Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
erp5
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Analytics
Analytics
CI / CD
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
amrani
erp5
Commits
0fac5987
Commit
0fac5987
authored
Nov 10, 2016
by
Romain Courteaud
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
[erp5_web_renderjs_ui] Integrate action button on the second header line on desktop
parent
afe0d1a9
Changes
4
Show whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
514 additions
and
542 deletions
+514
-542
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_appcache.xml
...TemplateItem/web_page_module/rjs_gadget_erp5_appcache.xml
+3
-3
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css
...emplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css
+228
-255
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.xml
...emplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.xml
+28
-5
bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt
...teItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt
+255
-279
No files found.
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_appcache.xml
View file @
0fac5987
...
@@ -108,7 +108,7 @@
...
@@ -108,7 +108,7 @@
<value>
<string
encoding=
"cdata"
>
<![CDATA[
<value>
<string
encoding=
"cdata"
>
<![CDATA[
CACHE MANIFEST\n
CACHE MANIFEST\n
# generated on Mon,
07 Nov 2016 10
:00:00 GMT\n
# generated on Mon,
10 Nov 2016 15
:00:00 GMT\n
# XXX + fonts\n
# XXX + fonts\n
# images/ajax-loader.gif\n
# images/ajax-loader.gif\n
CACHE:\n
CACHE:\n
...
@@ -366,7 +366,7 @@ NETWORK:\n
...
@@ -366,7 +366,7 @@ NETWORK:\n
</item>
</item>
<item>
<item>
<key>
<string>
serial
</string>
</key>
<key>
<string>
serial
</string>
</key>
<value>
<string>
955.7
684.22445.34560
</string>
</value>
<value>
<string>
955.7
927.49570.52292
</string>
</value>
</item>
</item>
<item>
<item>
<key>
<string>
state
</string>
</key>
<key>
<string>
state
</string>
</key>
...
@@ -384,7 +384,7 @@ NETWORK:\n
...
@@ -384,7 +384,7 @@ NETWORK:\n
</tuple>
</tuple>
<state>
<state>
<tuple>
<tuple>
<float>
1478
515550.48
</float>
<float>
1478
794080.61
</float>
<string>
UTC
</string>
<string>
UTC
</string>
</tuple>
</tuple>
</state>
</state>
...
...
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css
View file @
0fac5987
...
@@ -171,26 +171,11 @@ input,
...
@@ -171,26 +171,11 @@ input,
textarea
,
textarea
,
select
{
select
{
font-family
:
'Open Sans'
,
Helvetica
,
Arial
,
sans-serif
;
font-family
:
'Open Sans'
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
400
;
line-height
:
1.3
;
}
@media
only
screen
and
(
min-width
:
62em
),
only
screen
and
(
min-width
:
28em
)
and
(
max-width
:
62em
)
{
body
,
button
,
input
,
textarea
,
select
{
font-size
:
11pt
;
}
}
@media
only
screen
and
(
max-width
:
28em
)
{
body
,
button
,
input
,
textarea
,
select
{
font-size
:
12pt
;
font-size
:
12pt
;
}
padding
:
0
;
margin
:
0
;
font-weight
:
400
;
line-height
:
1.5
;
}
}
/**********************************************
/**********************************************
* Inline elements
* Inline elements
...
@@ -266,7 +251,7 @@ a:focus {
...
@@ -266,7 +251,7 @@ a:focus {
outline-offset
:
-2px
;
outline-offset
:
-2px
;
outline
:
2px
solid
#3388cc
;
outline
:
2px
solid
#3388cc
;
}
}
@media
only
screen
and
(
min-width
:
62
em
)
{
@media
only
screen
and
(
min-width
:
70
em
)
{
a
[
accesskey
]
:after
{
a
[
accesskey
]
:after
{
content
:
" ["
attr
(
accesskey
)
"] "
;
content
:
" ["
attr
(
accesskey
)
"] "
;
}
}
...
@@ -287,89 +272,58 @@ listing {
...
@@ -287,89 +272,58 @@ listing {
hr
{
hr
{
display
:
block
;
display
:
block
;
border-style
:
inset
;
border-style
:
inset
;
border-width
:
1p
t
;
border-width
:
1p
x
;
border-color
:
#FF6600
;
border-color
:
#FF6600
;
}
}
/**********************************************
/**********************************************
* Text fields
* Text fields
**********************************************/
**********************************************/
label
{
label
{
display
:
block
;
color
:
#777777
;
color
:
#777777
;
}
}
input
:not
([
type
=
submit
])
:not
([
type
=
file
])
:not
([
type
=
checkbox
])
:not
([
type
=
radio
])
:not
([
type
=
color
]),
input
:not
([
type
=
submit
])
:not
([
type
=
file
])
:not
([
type
=
checkbox
])
:not
([
type
=
radio
])
:not
([
type
=
color
]),
textarea
{
textarea
,
select
{
width
:
100%
;
width
:
100%
;
margin
:
0
;
padding
:
3pt
;
padding
:
0.4em
;
line-height
:
1.4em
;
border
:
none
;
background-color
:
#FFFFFF
;
background-color
:
#FFFFFF
;
color
:
#1F1F1F
;
color
:
#1F1F1F
;
border
:
1px
solid
rgba
(
0
,
0
,
0
,
0.3
);
border-radius
:
0.325em
;
border-radius
:
0.325em
;
border-width
:
1px
;
transition
:
border
0.2s
ease-out
,
box-shadow
0.2s
ease-out
;
border-style
:
solid
;
border-color
:
rgba
(
0
,
0
,
0
,
0.3
);
box-shadow
:
inset
0
1px
3px
rgba
(
0
,
0
,
0
,
0.2
);
outline-offset
:
0
;
}
input
:not
([
type
=
submit
])
:not
([
type
=
file
])
:not
([
type
=
checkbox
])
:not
([
type
=
radio
])
:not
([
type
=
color
])[
readonly
=
"readonly"
],
textarea
[
readonly
=
"readonly"
]
{
border
:
none
;
box-shadow
:
none
;
padding
:
0
;
line-height
:
1em
;
}
}
input
:not
([
type
=
submit
])
:not
([
type
=
file
])
:not
([
type
=
checkbox
])
:not
([
type
=
radio
])
:not
([
type
=
color
])
:active
,
input
:not
([
type
=
submit
])
:not
([
type
=
file
])
:not
([
type
=
checkbox
])
:not
([
type
=
radio
])
:not
([
type
=
color
])
:active
,
textarea
:active
,
textarea
:active
,
select
:active
,
input
:not
([
type
=
submit
])
:not
([
type
=
file
])
:not
([
type
=
checkbox
])
:not
([
type
=
radio
])
:not
([
type
=
color
])
:focus
,
input
:not
([
type
=
submit
])
:not
([
type
=
file
])
:not
([
type
=
checkbox
])
:not
([
type
=
radio
])
:not
([
type
=
color
])
:focus
,
textarea
:focus
{
textarea
:focus
,
outline-offset
:
0
;
select
:focus
{
outline
:
none
;
}
}
input
:not
([
type
=
submit
])
:not
([
type
=
file
])
:not
([
type
=
checkbox
])
:not
([
type
=
radio
])
:not
([
type
=
color
])
:focus
,
input
:not
([
type
=
submit
])
:not
([
type
=
file
])
:not
([
type
=
checkbox
])
:not
([
type
=
radio
])
:not
([
type
=
color
])
:focus
,
textarea
:focus
{
textarea
:focus
,
box-shadow
:
0
0
12px
#3388cc
;
select
:focus
{
border
:
1px
solid
#3388cc
;
box-shadow
:
0
0
12pt
#3388cc
;
}
}
select
{
select
{
width
:
100%
;
cursor
:
pointer
;
margin
:
0
;
padding
:
0.4em
;
padding-right
:
1.8em
;
-webkit-appearance
:
none
;
-webkit-appearance
:
none
;
-moz-appearance
:
none
;
-moz-appearance
:
none
;
appearance
:
none
;
appearance
:
none
;
line-height
:
1.4em
;
cursor
:
pointer
;
background-image
:
none
;
background-image
:
none
;
background-color
:
#FFFFFF
;
background-color
:
#FFFFFF
;
padding-right
:
24pt
;
background
:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50px' height='50px'><polyline fill-opacity='0.5' points='46.139,15.518 25.166,36.49 4.193,15.519'/></svg>")
right
no-repeat
;
background
:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50px' height='50px'><polyline fill-opacity='0.5' points='46.139,15.518 25.166,36.49 4.193,15.519'/></svg>")
right
no-repeat
;
background-position
:
right
.5em
top
50%
;
background-position
:
right
6pt
top
50%
;
background-size
:
1em
1em
;
background-size
:
12pt
12pt
;
color
:
#1F1F1F
;
border-radius
:
0.325em
;
border-width
:
1px
;
border-style
:
solid
;
border-color
:
rgba
(
0
,
0
,
0
,
0.3
);
box-shadow
:
inset
0
1px
3px
rgba
(
0
,
0
,
0
,
0.2
);
outline-offset
:
0
;
}
select
[
readonly
=
"readonly"
]
{
border
:
none
;
background
:
none
;
box-shadow
:
none
;
padding
:
0
;
line-height
:
1em
;
}
select
:not
([
readonly
=
"readonly"
])
:hover
,
select
:not
([
readonly
=
"readonly"
])
:active
{
background-color
:
#e0e0e0
;
}
}
select
:-moz-focusring
{
select
:-moz-focusring
{
color
:
transparent
;
color
:
transparent
;
text-shadow
:
0
0
0
#000
;
}
}
textarea
{
textarea
{
width
:
100%
;
vertical-align
:
top
;
margin
:
0
;
}
}
::-webkit-input-placeholder
{
::-webkit-input-placeholder
{
color
:
#575757
;
color
:
#575757
;
...
@@ -390,10 +344,19 @@ button {
...
@@ -390,10 +344,19 @@ button {
margin
:
0
;
margin
:
0
;
padding
:
0
;
padding
:
0
;
border
:
none
;
border
:
none
;
background-image
:
none
;
background
:
transparent
;
background-color
:
#FFFFFF
;
color
:
#1F1F1F
;
color
:
#1F1F1F
;
transition
:
background-color
0.2s
ease-out
;
/*
// XXX TODO
// transition: background-color 0.2s ease-out;
&:hover, &:focus {
outline: none;
}
&:active {
// box-shadow: inset 0 0 0 5px darken(@colorblocklinkbackground, 10%);
background-color: darken(@colorblocklinkbackground, 20%);
}
*/
cursor
:
pointer
;
cursor
:
pointer
;
}
}
input
[
type
=
submit
]
::-moz-focus-inner
,
input
[
type
=
submit
]
::-moz-focus-inner
,
...
@@ -406,17 +369,11 @@ button:hover,
...
@@ -406,17 +369,11 @@ button:hover,
input
[
type
=
submit
]
:focus
,
input
[
type
=
submit
]
:focus
,
button
:focus
{
button
:focus
{
outline
:
none
;
outline
:
none
;
background-color
:
#e0e0e0
;
}
input
[
type
=
submit
]
:active
,
button
:active
{
background-color
:
#adadad
;
}
}
/**********************************************
/**********************************************
* Media
* Media
**********************************************/
**********************************************/
img
,
img
,
canvas
,
iframe
,
iframe
,
video
,
video
,
svg
{
svg
{
...
@@ -432,8 +389,8 @@ svg text {
...
@@ -432,8 +389,8 @@ svg text {
}
}
iframe
{
iframe
{
width
:
100%
;
width
:
100%
;
height
:
50em
;
height
:
80vh
;
background-color
:
white
;
background-color
:
#FFFFFF
;
}
}
img
{
img
{
image-orientation
:
from-image
;
image-orientation
:
from-image
;
...
@@ -444,7 +401,7 @@ img {
...
@@ -444,7 +401,7 @@ img {
div
[
data-gadget-scope
=
'panel'
]
{
div
[
data-gadget-scope
=
'panel'
]
{
background-color
:
#444444
;
background-color
:
#444444
;
color
:
#FFFFFF
;
color
:
#FFFFFF
;
width
:
1
7em
;
width
:
1
80pt
;
min-height
:
100%
;
min-height
:
100%
;
max-height
:
none
;
max-height
:
none
;
position
:
fixed
;
position
:
fixed
;
...
@@ -453,19 +410,19 @@ div[data-gadget-scope='panel'] {
...
@@ -453,19 +410,19 @@ div[data-gadget-scope='panel'] {
display
:
block
;
display
:
block
;
z-index
:
2000
;
z-index
:
2000
;
}
}
@media
only
screen
and
(
max-width
:
28em
),
only
screen
and
(
min-width
:
28em
)
and
(
max-width
:
62
em
)
{
@media
only
screen
and
(
max-width
:
28em
),
only
screen
and
(
min-width
:
28em
)
and
(
max-width
:
70
em
)
{
div
[
data-gadget-scope
=
'panel'
]
{
div
[
data-gadget-scope
=
'panel'
]
{
box-shadow
:
5px
0
5px
rgba
(
0
,
0
,
0
,
0.15
);
box-shadow
:
5px
0
5px
rgba
(
0
,
0
,
0
,
0.15
);
}
}
}
}
@media
only
screen
and
(
max-width
:
28em
),
only
screen
and
(
min-width
:
28em
)
and
(
max-width
:
62
em
)
{
@media
only
screen
and
(
max-width
:
28em
),
only
screen
and
(
min-width
:
28em
)
and
(
max-width
:
70
em
)
{
div
[
data-gadget-scope
=
'panel'
]
{
div
[
data-gadget-scope
=
'panel'
]
{
left
:
-18
em
;
left
:
-18
6pt
;
transition
:
transform
200ms
ease-out
;
transition
:
transform
200ms
ease-out
;
transform
:
translate3d
(
0
,
0
,
0
);
transform
:
translate3d
(
0
,
0
,
0
);
}
}
div
[
data-gadget-scope
=
'panel'
]
.visible
{
div
[
data-gadget-scope
=
'panel'
]
.visible
{
transform
:
translate3d
(
18
em
,
0
,
0
);
transform
:
translate3d
(
18
6pt
,
0
,
0
);
}
}
}
}
div
[
data-gadget-scope
=
'panel'
]
div
[
data-role
=
"header"
]
{
div
[
data-gadget-scope
=
'panel'
]
div
[
data-role
=
"header"
]
{
...
@@ -475,7 +432,7 @@ div[data-gadget-scope='panel'] div[data-role="header"] {
...
@@ -475,7 +432,7 @@ div[data-gadget-scope='panel'] div[data-role="header"] {
div
[
data-gadget-scope
=
'panel'
]
div
[
data-role
=
"header"
]
.panel_img
{
div
[
data-gadget-scope
=
'panel'
]
div
[
data-role
=
"header"
]
.panel_img
{
text-align
:
center
;
text-align
:
center
;
flex
:
1
;
flex
:
1
;
height
:
2.6em
;
height
:
30pt
;
}
}
div
[
data-gadget-scope
=
'panel'
]
div
[
data-role
=
"header"
]
button
,
div
[
data-gadget-scope
=
'panel'
]
div
[
data-role
=
"header"
]
button
,
div
[
data-gadget-scope
=
'panel'
]
div
[
data-role
=
"header"
]
a
{
div
[
data-gadget-scope
=
'panel'
]
div
[
data-role
=
"header"
]
a
{
...
@@ -485,16 +442,16 @@ div[data-gadget-scope='panel'] div[data-role="header"] a {
...
@@ -485,16 +442,16 @@ div[data-gadget-scope='panel'] div[data-role="header"] a {
white-space
:
nowrap
;
white-space
:
nowrap
;
background-color
:
#444444
;
background-color
:
#444444
;
display
:
block
;
display
:
block
;
line-height
:
2.6em
;
line-height
:
30pt
;
color
:
#FFFFFF
;
color
:
#FFFFFF
;
}
}
div
[
data-gadget-scope
=
'panel'
]
div
[
data-role
=
"header"
]
button
::before
,
div
[
data-gadget-scope
=
'panel'
]
div
[
data-role
=
"header"
]
button
::before
,
div
[
data-gadget-scope
=
'panel'
]
div
[
data-role
=
"header"
]
a
::before
{
div
[
data-gadget-scope
=
'panel'
]
div
[
data-role
=
"header"
]
a
::before
{
float
:
left
;
float
:
left
;
text-indent
:
0
;
text-indent
:
0
;
margin-left
:
1
em
;
margin-left
:
1
2pt
;
}
}
@media
only
screen
and
(
min-width
:
62
em
)
{
@media
only
screen
and
(
min-width
:
70
em
)
{
div
[
data-gadget-scope
=
'panel'
]
div
[
data-role
=
"header"
]
button
[
data-i18n
=
"Close"
],
div
[
data-gadget-scope
=
'panel'
]
div
[
data-role
=
"header"
]
button
[
data-i18n
=
"Close"
],
div
[
data-gadget-scope
=
'panel'
]
div
[
data-role
=
"header"
]
a
[
data-i18n
=
"Close"
]
{
div
[
data-gadget-scope
=
'panel'
]
div
[
data-role
=
"header"
]
a
[
data-i18n
=
"Close"
]
{
display
:
none
;
display
:
none
;
...
@@ -505,19 +462,19 @@ div[data-gadget-scope='panel'] img {
...
@@ -505,19 +462,19 @@ div[data-gadget-scope='panel'] img {
height
:
100%
;
height
:
100%
;
}
}
div
[
data-gadget-scope
=
'panel'
]
ul
{
div
[
data-gadget-scope
=
'panel'
]
ul
{
margin-top
:
2.6em
;
margin-top
:
30pt
;
}
}
div
[
data-gadget-scope
=
'panel'
]
ul
li
a
{
div
[
data-gadget-scope
=
'panel'
]
ul
li
a
{
color
:
#FFFFFF
;
color
:
#FFFFFF
;
padding
:
.4em
;
padding
:
3pt
;
padding-left
:
1
em
;
padding-left
:
1
2pt
;
display
:
block
;
display
:
block
;
text-overflow
:
ellipsis
;
text-overflow
:
ellipsis
;
overflow
:
hidden
;
overflow
:
hidden
;
white-space
:
nowrap
;
white-space
:
nowrap
;
}
}
div
[
data-gadget-scope
=
'panel'
]
ul
li
a
::before
{
div
[
data-gadget-scope
=
'panel'
]
ul
li
a
::before
{
width
:
2
em
;
width
:
2
4pt
;
}
}
div
[
data-gadget-scope
=
'panel'
]
ul
li
a
:hover
,
div
[
data-gadget-scope
=
'panel'
]
ul
li
a
:hover
,
div
[
data-gadget-scope
=
'panel'
]
ul
li
a
:active
{
div
[
data-gadget-scope
=
'panel'
]
ul
li
a
:active
{
...
@@ -528,7 +485,7 @@ div[data-gadget-scope='panel'] ul li a:active {
...
@@ -528,7 +485,7 @@ div[data-gadget-scope='panel'] ul li a:active {
**********************************************/
**********************************************/
div
[
data-gadget-scope
=
'editor_panel'
]
{
div
[
data-gadget-scope
=
'editor_panel'
]
{
background-color
:
#FFFFFF
;
background-color
:
#FFFFFF
;
width
:
1
7em
;
width
:
1
80pt
;
min-height
:
100%
;
min-height
:
100%
;
max-height
:
none
;
max-height
:
none
;
position
:
fixed
;
position
:
fixed
;
...
@@ -536,26 +493,26 @@ div[data-gadget-scope='editor_panel'] {
...
@@ -536,26 +493,26 @@ div[data-gadget-scope='editor_panel'] {
display
:
block
;
display
:
block
;
z-index
:
3000
;
z-index
:
3000
;
}
}
@media
only
screen
and
(
min-width
:
62
em
)
{
@media
only
screen
and
(
min-width
:
70
em
)
{
div
[
data-gadget-scope
=
'editor_panel'
]
{
div
[
data-gadget-scope
=
'editor_panel'
]
{
left
:
-18
em
;
left
:
-18
6pt
;
transition
:
transform
200ms
ease-out
;
transition
:
transform
200ms
ease-out
;
transform
:
translate3d
(
0
,
0
,
0
);
transform
:
translate3d
(
0
,
0
,
0
);
box-shadow
:
5px
0
5px
rgba
(
0
,
0
,
0
,
0.15
);
box-shadow
:
5px
0
5px
rgba
(
0
,
0
,
0
,
0.15
);
}
}
div
[
data-gadget-scope
=
'editor_panel'
]
.visible
{
div
[
data-gadget-scope
=
'editor_panel'
]
.visible
{
transform
:
translate3d
(
18
em
,
0
,
0
);
transform
:
translate3d
(
18
6pt
,
0
,
0
);
}
}
}
}
@media
only
screen
and
(
max-width
:
28em
),
only
screen
and
(
min-width
:
28em
)
and
(
max-width
:
62
em
)
{
@media
only
screen
and
(
max-width
:
28em
),
only
screen
and
(
min-width
:
28em
)
and
(
max-width
:
70
em
)
{
div
[
data-gadget-scope
=
'editor_panel'
]
{
div
[
data-gadget-scope
=
'editor_panel'
]
{
right
:
-18
em
;
right
:
-18
6pt
;
transition
:
transform
200ms
ease-out
;
transition
:
transform
200ms
ease-out
;
transform
:
translate3d
(
0
,
0
,
0
);
transform
:
translate3d
(
0
,
0
,
0
);
box-shadow
:
-5px
0
5px
rgba
(
0
,
0
,
0
,
0.15
);
box-shadow
:
-5px
0
5px
rgba
(
0
,
0
,
0
,
0.15
);
}
}
div
[
data-gadget-scope
=
'editor_panel'
]
.visible
{
div
[
data-gadget-scope
=
'editor_panel'
]
.visible
{
transform
:
translate3d
(
-18
em
,
0
,
0
);
transform
:
translate3d
(
-18
6pt
,
0
,
0
);
}
}
}
}
div
[
data-gadget-scope
=
'editor_panel'
]
div
[
data-role
=
"header"
]
{
div
[
data-gadget-scope
=
'editor_panel'
]
div
[
data-role
=
"header"
]
{
...
@@ -564,8 +521,8 @@ div[data-gadget-scope='editor_panel'] div[data-role="header"] {
...
@@ -564,8 +521,8 @@ div[data-gadget-scope='editor_panel'] div[data-role="header"] {
}
}
div
[
data-gadget-scope
=
'editor_panel'
]
div
[
data-role
=
"header"
]
h1
{
div
[
data-gadget-scope
=
'editor_panel'
]
div
[
data-role
=
"header"
]
h1
{
text-align
:
left
;
text-align
:
left
;
line-height
:
2.6em
;
line-height
:
30pt
;
max-height
:
2.6em
;
max-height
:
30pt
;
}
}
div
[
data-gadget-scope
=
'editor_panel'
]
div
[
data-role
=
"header"
]
button
,
div
[
data-gadget-scope
=
'editor_panel'
]
div
[
data-role
=
"header"
]
button
,
div
[
data-gadget-scope
=
'editor_panel'
]
div
[
data-role
=
"header"
]
a
{
div
[
data-gadget-scope
=
'editor_panel'
]
div
[
data-role
=
"header"
]
a
{
...
@@ -574,16 +531,16 @@ div[data-gadget-scope='editor_panel'] div[data-role="header"] a {
...
@@ -574,16 +531,16 @@ div[data-gadget-scope='editor_panel'] div[data-role="header"] a {
text-indent
:
-9999px
;
text-indent
:
-9999px
;
white-space
:
nowrap
;
white-space
:
nowrap
;
display
:
block
;
display
:
block
;
line-height
:
2.6em
;
line-height
:
30pt
;
}
}
div
[
data-gadget-scope
=
'editor_panel'
]
div
[
data-role
=
"header"
]
button
::before
,
div
[
data-gadget-scope
=
'editor_panel'
]
div
[
data-role
=
"header"
]
button
::before
,
div
[
data-gadget-scope
=
'editor_panel'
]
div
[
data-role
=
"header"
]
a
::before
{
div
[
data-gadget-scope
=
'editor_panel'
]
div
[
data-role
=
"header"
]
a
::before
{
float
:
left
;
float
:
left
;
text-indent
:
0
;
text-indent
:
0
;
margin-left
:
1
em
;
margin-left
:
1
2pt
;
}
}
div
[
data-gadget-scope
=
'editor_panel'
]
section
{
div
[
data-gadget-scope
=
'editor_panel'
]
section
{
padding
:
1
em
;
padding
:
1
2pt
;
}
}
div
[
data-gadget-scope
=
'editor_panel'
]
section
fieldset
>
div
{
div
[
data-gadget-scope
=
'editor_panel'
]
section
fieldset
>
div
{
display
:
inline-block
;
display
:
inline-block
;
...
@@ -591,7 +548,6 @@ div[data-gadget-scope='editor_panel'] section fieldset > div {
...
@@ -591,7 +548,6 @@ div[data-gadget-scope='editor_panel'] section fieldset > div {
div
[
data-gadget-scope
=
'editor_panel'
]
section
fieldset
label
{
div
[
data-gadget-scope
=
'editor_panel'
]
section
fieldset
label
{
display
:
inline-block
;
display
:
inline-block
;
text-align
:
center
;
text-align
:
center
;
font-size
:
0.8em
;
}
}
div
[
data-gadget-scope
=
'editor_panel'
]
section
fieldset
input
[
type
=
"radio"
]
{
div
[
data-gadget-scope
=
'editor_panel'
]
section
fieldset
input
[
type
=
"radio"
]
{
display
:
inline-block
;
display
:
inline-block
;
...
@@ -600,7 +556,7 @@ div[data-gadget-scope='editor_panel'] section .filter_item_container > div,
...
@@ -600,7 +556,7 @@ div[data-gadget-scope='editor_panel'] section .filter_item_container > div,
div
[
data-gadget-scope
=
'editor_panel'
]
section
.sort_item_container
>
div
{
div
[
data-gadget-scope
=
'editor_panel'
]
section
.sort_item_container
>
div
{
display
:
flex
;
display
:
flex
;
align-items
:
flex-start
;
align-items
:
flex-start
;
padding
:
0.5em
0
;
padding
:
6pt
0
;
}
}
div
[
data-gadget-scope
=
'editor_panel'
]
section
.filter_item_container
>
div
.filter_item
,
div
[
data-gadget-scope
=
'editor_panel'
]
section
.filter_item_container
>
div
.filter_item
,
div
[
data-gadget-scope
=
'editor_panel'
]
section
.sort_item_container
>
div
.filter_item
,
div
[
data-gadget-scope
=
'editor_panel'
]
section
.sort_item_container
>
div
.filter_item
,
...
@@ -609,10 +565,10 @@ div[data-gadget-scope='editor_panel'] section .sort_item_container > div .sort_i
...
@@ -609,10 +565,10 @@ div[data-gadget-scope='editor_panel'] section .sort_item_container > div .sort_i
flex
:
1
;
flex
:
1
;
}
}
div
[
data-gadget-scope
=
'editor_panel'
]
section
button
{
div
[
data-gadget-scope
=
'editor_panel'
]
section
button
{
padding
:
0.5em
;
padding
:
3pt
6pt
;
border
:
1px
solid
rgba
(
0
,
0
,
0
,
0.14
);
border
:
1px
solid
rgba
(
0
,
0
,
0
,
0.14
);
border-radius
:
0.325em
;
border-radius
:
0.325em
;
margin-right
:
0.5em
;
margin-right
:
6pt
;
width
:
2em
;
width
:
2em
;
overflow
:
hidden
;
overflow
:
hidden
;
text-indent
:
-9999px
;
text-indent
:
-9999px
;
...
@@ -622,7 +578,7 @@ div[data-gadget-scope='editor_panel'] section button:last-of-type {
...
@@ -622,7 +578,7 @@ div[data-gadget-scope='editor_panel'] section button:last-of-type {
margin-right
:
0
;
margin-right
:
0
;
}
}
div
[
data-gadget-scope
=
'editor_panel'
]
section
button
::before
{
div
[
data-gadget-scope
=
'editor_panel'
]
section
button
::before
{
margin-right
:
0.4em
;
margin-right
:
6pt
;
float
:
left
;
float
:
left
;
text-indent
:
0
;
text-indent
:
0
;
}
}
...
@@ -633,25 +589,21 @@ div[data-gadget-scope='header'] .ui-header {
...
@@ -633,25 +589,21 @@ div[data-gadget-scope='header'] .ui-header {
position
:
fixed
;
position
:
fixed
;
z-index
:
1000
;
z-index
:
1000
;
text-align
:
center
;
text-align
:
center
;
width
:
100%
;
color
:
#FFFFFF
;
}
@media
only
screen
and
(
min-width
:
28em
)
and
(
max-width
:
62em
),
only
screen
and
(
max-width
:
28em
)
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
{
display
:
flex
;
display
:
flex
;
flex-flow
:
row
wrap
;
flex-flow
:
row
wrap
;
}
width
:
100%
;
color
:
#FFFFFF
;
background-color
:
#0E81C2
;
}
}
@media
only
screen
and
(
min-width
:
62
em
)
{
@media
only
screen
and
(
min-width
:
70
em
)
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
{
display
:
table
;
margin-left
:
180pt
;
margin-left
:
17em
;
}
}
}
}
div
[
data-gadget-scope
=
'header'
]
.ui-header
button
,
div
[
data-gadget-scope
=
'header'
]
.ui-header
button
,
div
[
data-gadget-scope
=
'header'
]
.ui-header
a
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
a
{
color
:
#FFFFFF
;
color
:
#FFFFFF
;
background-color
:
#085078
;
transition
:
background-color
0.2s
ease-out
;
}
}
div
[
data-gadget-scope
=
'header'
]
.ui-header
button
:hover
,
div
[
data-gadget-scope
=
'header'
]
.ui-header
button
:hover
,
div
[
data-gadget-scope
=
'header'
]
.ui-header
a
:hover
,
div
[
data-gadget-scope
=
'header'
]
.ui-header
a
:hover
,
...
@@ -659,15 +611,35 @@ div[data-gadget-scope='header'] .ui-header button:active,
...
@@ -659,15 +611,35 @@ div[data-gadget-scope='header'] .ui-header button:active,
div
[
data-gadget-scope
=
'header'
]
.ui-header
a
:active
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
a
:active
{
background-color
:
#0e90d8
;
background-color
:
#0e90d8
;
}
}
div
[
data-gadget-scope
=
'header'
]
.ui-header
>
.ui-btn-left
button
,
div
[
data-gadget-scope
=
'header'
]
.ui-header
>
.ui-btn-left
a
{
border-right
:
1px
solid
rgba
(
255
,
255
,
255
,
0.55
);
}
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
button
,
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
button
,
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
a
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
a
{
display
:
block
;
display
:
block
;
line-height
:
2.6em
;
transition
:
background-color
0.2s
ease-out
;
line-height
:
30pt
;
}
@media
only
screen
and
(
min-width
:
70em
)
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
button
,
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
a
{
background-color
:
#0E81C2
;
}
}
@media
only
screen
and
(
max-width
:
28em
),
only
screen
and
(
min-width
:
28em
)
and
(
max-width
:
70em
)
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
button
,
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
a
{
background-color
:
#085078
;
}
}
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
button
:hover
,
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
a
:hover
,
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
button
:active
,
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
a
:active
{
background-color
:
#0e90d8
;
}
@media
only
screen
and
(
min-width
:
28em
)
and
(
max-width
:
70em
)
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
button
,
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
a
{
width
:
8em
;
width
:
8em
;
}
}
}
@media
only
screen
and
(
max-width
:
28em
)
{
@media
only
screen
and
(
max-width
:
28em
)
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
button
,
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
button
,
...
@@ -678,64 +650,71 @@ div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a {
...
@@ -678,64 +650,71 @@ div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a {
white-space
:
nowrap
;
white-space
:
nowrap
;
}
}
}
}
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
button
::before
,
@media
only
screen
and
(
min-width
:
28em
)
and
(
max-width
:
70em
),
only
screen
and
(
min-width
:
70em
)
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
a
::before
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
button
::before
,
margin-right
:
0.4em
;
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
a
::before
{
width
:
1em
;
margin-right
:
6pt
;
text-align
:
center
;
}
}
}
@media
only
screen
and
(
max-width
:
28em
)
{
@media
only
screen
and
(
max-width
:
28em
)
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
button
::before
,
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
button
::before
,
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
a
::before
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
a
::before
{
float
:
left
;
float
:
left
;
text-indent
:
0
;
text-indent
:
0
;
margin-left
:
1
em
;
margin-left
:
1
2pt
;
}
}
}
}
@media
only
screen
and
(
min-width
:
62
em
)
{
@media
only
screen
and
(
min-width
:
70
em
)
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
button
[
name
=
"panel"
],
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
button
[
name
=
"panel"
],
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
a
[
name
=
"panel"
]
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
a
[
name
=
"panel"
]
{
display
:
none
;
display
:
none
;
}
}
}
}
div
[
data-gadget-scope
=
'header'
]
.ui-header
>
.ui-btn-
righ
t
button
,
div
[
data-gadget-scope
=
'header'
]
.ui-header
>
.ui-btn-
lef
t
button
,
div
[
data-gadget-scope
=
'header'
]
.ui-header
>
.ui-btn-
righ
t
a
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
>
.ui-btn-
lef
t
a
{
b
ackground-color
:
#F60
;
b
order-right
:
1px
solid
rgba
(
255
,
255
,
255
,
0.55
)
;
}
}
@media
only
screen
and
(
max-width
:
28em
),
only
screen
and
(
min-width
:
28em
)
and
(
max-width
:
62
em
)
{
@media
only
screen
and
(
max-width
:
28em
),
only
screen
and
(
min-width
:
28em
)
and
(
max-width
:
70
em
)
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
>
.ui-btn-right
button
,
div
[
data-gadget-scope
=
'header'
]
.ui-header
>
.ui-btn-right
button
,
div
[
data-gadget-scope
=
'header'
]
.ui-header
>
.ui-btn-right
a
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
>
.ui-btn-right
a
{
border-left
:
1px
solid
rgba
(
255
,
255
,
255
,
0.55
);
border-left
:
1px
solid
rgba
(
255
,
255
,
255
,
0.55
);
}
}
}
}
@media
only
screen
and
(
min-width
:
62em
)
{
@media
only
screen
and
(
min-width
:
70em
)
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
>
.ui-btn-right
{
display
:
table-footer-group
;
}
div
[
data-gadget-scope
=
'header'
]
.ui-header
>
.ui-btn-right
button
,
div
[
data-gadget-scope
=
'header'
]
.ui-header
>
.ui-btn-right
button
,
div
[
data-gadget-scope
=
'header'
]
.ui-header
>
.ui-btn-right
a
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
>
.ui-btn-right
a
{
margin
:
0.5em
;
padding-left
:
24pt
;
margin-left
:
2em
;
padding-right
:
24pt
;
min-width
:
5em
;
}
}
}
}
div
[
data-gadget-scope
=
'header'
]
.ui-header
h1
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
h1
{
text-align
:
left
;
text-align
:
left
;
line-height
:
2.6em
;
line-height
:
30pt
;
flex
:
1
;
flex
:
1
;
background-color
:
#085078
;
background-color
:
#085078
;
white-space
:
nowrap
;
white-space
:
nowrap
;
overflow
:
hidden
;
overflow
:
hidden
;
text-overflow
:
ellipsis
;
text-overflow
:
ellipsis
;
}
}
@media
only
screen
and
(
min-width
:
70em
)
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
h1
{
flex
:
1
100%
;
}
}
div
[
data-gadget-scope
=
'header'
]
.ui-header
h1
>
span
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
h1
>
span
{
padding-left
:
4
em
;
padding-left
:
4
2pt
;
}
}
@media
only
screen
and
(
max-width
:
28em
)
{
@media
only
screen
and
(
max-width
:
28em
)
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
h1
>
span
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
h1
>
span
{
padding-left
:
2em
;
padding-left
:
30pt
;
}
}
}
}
@media
only
screen
and
(
min-width
:
62
em
)
{
@media
only
screen
and
(
min-width
:
70
em
)
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
h1
>
span
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
h1
>
span
{
padding-left
:
2
em
;
padding-left
:
2
4pt
;
}
}
}
}
div
[
data-gadget-scope
=
'header'
]
.ui-header
h1
a
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
h1
a
{
...
@@ -746,62 +725,40 @@ div[data-gadget-scope='header'] .ui-header h1 a {
...
@@ -746,62 +725,40 @@ div[data-gadget-scope='header'] .ui-header h1 a {
}
}
div
[
data-gadget-scope
=
'header'
]
.ui-header
h1
a
::before
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
h1
a
::before
{
display
:
inline-block
;
display
:
inline-block
;
width
:
4
em
;
width
:
4
2pt
;
}
}
@media
only
screen
and
(
min-width
:
28em
)
and
(
max-width
:
62
em
),
only
screen
and
(
max-width
:
28em
)
{
@media
only
screen
and
(
min-width
:
28em
)
and
(
max-width
:
70
em
),
only
screen
and
(
max-width
:
28em
)
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
h1
a
::before
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
h1
a
::before
{
text-align
:
center
;
text-align
:
center
;
}
}
}
}
@media
only
screen
and
(
min-width
:
62
em
)
{
@media
only
screen
and
(
min-width
:
70
em
)
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
h1
a
::before
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
h1
a
::before
{
padding-left
:
2
em
;
padding-left
:
2
4pt
;
}
}
}
}
@media
only
screen
and
(
max-width
:
28em
)
{
@media
only
screen
and
(
max-width
:
28em
)
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
h1
a
::before
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
h1
a
::before
{
width
:
2em
;
width
:
30pt
;
}
}
}
}
@media
only
screen
and
(
min-width
:
62
em
)
{
@media
only
screen
and
(
min-width
:
70
em
)
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-subheader
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-subheader
{
text-align
:
left
;
text-align
:
left
;
flex
:
1
;
}
}
}
}
div
[
data-gadget-scope
=
'header'
]
.ui-header
ul
{
@media
only
screen
and
(
max-width
:
28em
),
only
screen
and
(
min-width
:
28em
)
and
(
max-width
:
70em
)
{
width
:
100%
;
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-subheader
{
background-color
:
#0E81C2
;
flex
:
1
100%
;
display
:
table
;
table-layout
:
fixed
;
}
div
[
data-gadget-scope
=
'header'
]
.ui-header
ul
a
{
background-color
:
#0E81C2
;
}
@media
only
screen
and
(
min-width
:
62em
)
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
ul
{
height
:
100%
;
}
div
[
data-gadget-scope
=
'header'
]
.ui-header
ul
li
{
display
:
inline-block
;
height
:
100%
;
}
div
[
data-gadget-scope
=
'header'
]
.ui-header
ul
li
a
{
display
:
block
;
padding-left
:
2em
;
padding-right
:
2em
;
min-width
:
5em
;
line-height
:
2.6em
;
height
:
100%
;
white-space
:
nowrap
;
overflow
:
hidden
;
}
div
[
data-gadget-scope
=
'header'
]
.ui-header
ul
li
a
::before
{
display
:
none
;
}
}
}
}
@media
only
screen
and
(
min-width
:
28em
)
and
(
max-width
:
62em
)
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
ul
{
display
:
flex
;
}
@media
only
screen
and
(
min-width
:
28em
)
and
(
max-width
:
70em
),
only
screen
and
(
max-width
:
28em
)
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
ul
li
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
ul
li
{
display
:
table-cell
;
flex
:
1
;
border-left
:
1px
solid
rgba
(
0
,
0
,
0
,
0.55
);
border-left
:
1px
solid
rgba
(
0
,
0
,
0
,
0.55
);
}
}
div
[
data-gadget-scope
=
'header'
]
.ui-header
ul
li
:first-child
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
ul
li
:first-child
{
...
@@ -809,33 +766,27 @@ div[data-gadget-scope='header'] .ui-header ul a {
...
@@ -809,33 +766,27 @@ div[data-gadget-scope='header'] .ui-header ul a {
}
}
div
[
data-gadget-scope
=
'header'
]
.ui-header
ul
li
a
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
ul
li
a
{
display
:
block
;
display
:
block
;
padding-top
:
0.4em
;
}
padding-bottom
:
0.4em
;
}
@media
only
screen
and
(
min-width
:
28em
)
and
(
max-width
:
70em
)
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
ul
li
a
{
padding-top
:
3pt
;
padding-bottom
:
3pt
;
white-space
:
nowrap
;
white-space
:
nowrap
;
overflow
:
hidden
;
overflow
:
hidden
;
}
}
div
[
data-gadget-scope
=
'header'
]
.ui-header
ul
li
a
::before
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
ul
li
a
::before
{
font-size
:
1.2em
;
font-size
:
1.2em
;
padding-bottom
:
0.3em
;
display
:
block
;
display
:
block
;
}
}
}
}
@media
only
screen
and
(
max-width
:
28em
)
{
@media
only
screen
and
(
max-width
:
28em
)
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
ul
li
{
line-height
:
2.6em
;
display
:
table-cell
;
border-left
:
1px
solid
rgba
(
0
,
0
,
0
,
0.55
);
}
div
[
data-gadget-scope
=
'header'
]
.ui-header
ul
li
:first-child
{
border-left
:
none
;
}
div
[
data-gadget-scope
=
'header'
]
.ui-header
ul
li
a
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
ul
li
a
{
display
:
block
;
text-align
:
center
;
text-align
:
center
;
vertical-align
:
middle
;
vertical-align
:
middle
;
font-size
:
1.5em
;
font-size
:
1.5em
;
padding-top
:
0.4em
;
padding-top
:
6pt
;
padding-bottom
:
0.4em
;
padding-bottom
:
6pt
;
overflow
:
hidden
;
overflow
:
hidden
;
text-indent
:
-9999px
;
text-indent
:
-9999px
;
white-space
:
nowrap
;
white-space
:
nowrap
;
...
@@ -846,17 +797,41 @@ div[data-gadget-scope='header'] .ui-header ul a {
...
@@ -846,17 +797,41 @@ div[data-gadget-scope='header'] .ui-header ul a {
width
:
100%
;
width
:
100%
;
}
}
}
}
@media
only
screen
and
(
min-width
:
70em
)
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
ul
li
a
{
display
:
block
;
padding-left
:
24pt
;
padding-right
:
24pt
;
min-width
:
5em
;
line-height
:
30pt
;
white-space
:
nowrap
;
overflow
:
hidden
;
}
div
[
data-gadget-scope
=
'header'
]
.ui-header
ul
li
a
::before
{
display
:
none
;
}
}
/**********************************************
/**********************************************
* Gadget: main
* Gadget: main
**********************************************/
**********************************************/
.gadget-content
{
.gadget-content
{
padding
:
2em
;
padding
:
24pt
;
padding-top
:
9em
;
padding-top
:
66pt
;
/*
@media @smartphone {
.ui-field-contain {
// padding: 0.8em 0;
// make sure there is a bottom border
// XXX TODO: border should be visible only if not input
// XXX How to not show it on last field?
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
}
*/
/* form validation (assuming label>span is used) */
/* form validation (assuming label>span is used) */
}
}
.gadget-content
input
[
type
=
'submit'
]
{
.gadget-content
input
[
type
=
'submit'
]
{
padding
:
0.4em
;
padding
:
6pt
;
line-height
:
1.4em
;
background-color
:
#444444
;
background-color
:
#444444
;
color
:
#FFFFFF
;
color
:
#FFFFFF
;
border-radius
:
0.325em
;
border-radius
:
0.325em
;
...
@@ -871,31 +846,36 @@ div[data-gadget-scope='header'] .ui-header ul a {
...
@@ -871,31 +846,36 @@ div[data-gadget-scope='header'] .ui-header ul a {
.gadget-content
input
[
type
=
'submit'
]
:active
{
.gadget-content
input
[
type
=
'submit'
]
:active
{
background-color
:
#777777
;
background-color
:
#777777
;
}
}
@media
only
screen
and
(
min-width
:
62
em
)
{
@media
only
screen
and
(
min-width
:
70
em
)
{
.gadget-content
{
.gadget-content
{
margin-left
:
17em
;
margin-left
:
180pt
;
}
}
@media
only
screen
and
(
min-width
:
28em
)
and
(
max-width
:
70em
)
{
.gadget-content
{
padding-top
:
7em
;
}
}
}
}
@media
only
screen
and
(
max-width
:
28em
)
{
@media
only
screen
and
(
max-width
:
28em
)
{
.gadget-content
{
.gadget-content
{
padding
:
0.5em
;
padding
:
6pt
;
padding-top
:
8
em
;
padding-top
:
6
em
;
}
}
}
}
.gadget-content
.ui-field-contain
{
.gadget-content
.ui-field-contain
{
padding
:
0.5em
0
;
padding
:
6pt
0
;
}
}
.gadget-content
.ui-field-contain
div
{
.gadget-content
.ui-field-contain
div
{
width
:
100%
;
width
:
100%
;
}
}
.gadget-content
.ui-field-contain
label
{
.gadget-content
.ui-content-header-plain
{
margin
:
0
0
0.4em
;
}
.gadget-content
.ui-content-title
{
font-size
:
150%
;
font-size
:
150%
;
}
}
.gadget-content
ul
.document-listview
{
.gadget-content
ul
.document-listview
:not
(
:last-of-type
)
{
margin-bottom
:
2em
;
margin-bottom
:
12pt
;
}
.gadget-content
ul
.document-listview
:first-child
{
margin-top
:
6pt
;
}
}
.gadget-content
ul
.document-listview
li
{
.gadget-content
ul
.document-listview
li
{
border-color
:
rgba
(
0
,
0
,
0
,
0.3
);
border-color
:
rgba
(
0
,
0
,
0
,
0.3
);
...
@@ -910,13 +890,13 @@ div[data-gadget-scope='header'] .ui-header ul a {
...
@@ -910,13 +890,13 @@ div[data-gadget-scope='header'] .ui-header ul a {
text-align
:
right
;
text-align
:
right
;
float
:
right
;
float
:
right
;
position
:
absolute
;
position
:
absolute
;
right
:
1
.5em
;
right
:
1
2pt
;
}
}
.gadget-content
ul
.document-listview
li
a
{
.gadget-content
ul
.document-listview
li
a
{
display
:
block
;
display
:
block
;
position
:
relative
;
position
:
relative
;
padding
:
0.7em
1em
;
padding
:
6pt
12pt
;
padding-right
:
2
.5em
;
padding-right
:
2
4pt
;
color
:
#222222
;
color
:
#222222
;
white-space
:
nowrap
;
white-space
:
nowrap
;
overflow
:
hidden
;
overflow
:
hidden
;
...
@@ -937,13 +917,13 @@ div[data-gadget-scope='header'] .ui-header ul a {
...
@@ -937,13 +917,13 @@ div[data-gadget-scope='header'] .ui-header ul a {
}
}
.gadget-content
ul
.document-listview
li
.ui-li-count
{
.gadget-content
ul
.document-listview
li
.ui-li-count
{
float
:
right
;
float
:
right
;
padding
:
0
0.5em
;
padding
:
0
6pt
;
border
:
1px
solid
rgba
(
0
,
0
,
0
,
0.14
);
border
:
1px
solid
rgba
(
0
,
0
,
0
,
0.14
);
border-radius
:
0.325em
;
border-radius
:
0.325em
;
position
:
absolute
;
position
:
absolute
;
right
:
.5em
;
right
:
6pt
;
}
}
@media
only
screen
and
(
min-width
:
62
em
)
{
@media
only
screen
and
(
min-width
:
70
em
)
{
.gadget-content
.left
,
.gadget-content
.left
,
.gadget-content
.right
{
.gadget-content
.right
{
vertical-align
:
top
;
vertical-align
:
top
;
...
@@ -951,10 +931,10 @@ div[data-gadget-scope='header'] .ui-header ul a {
...
@@ -951,10 +931,10 @@ div[data-gadget-scope='header'] .ui-header ul a {
width
:
50%
;
width
:
50%
;
}
}
.gadget-content
.right
{
.gadget-content
.right
{
padding-left
:
2
%
;
padding-left
:
2
4pt
;
}
}
}
}
@media
only
screen
and
(
min-width
:
28em
)
and
(
max-width
:
62em
),
only
screen
and
(
min-width
:
62
em
)
{
@media
only
screen
and
(
min-width
:
28em
)
and
(
max-width
:
70em
),
only
screen
and
(
min-width
:
70
em
)
{
.gadget-content
.ui-field-contain
{
.gadget-content
.ui-field-contain
{
display
:
flex
;
display
:
flex
;
}
}
...
@@ -965,16 +945,11 @@ div[data-gadget-scope='header'] .ui-header ul a {
...
@@ -965,16 +945,11 @@ div[data-gadget-scope='header'] .ui-header ul a {
flex
:
3
;
flex
:
3
;
}
}
}
}
@media
only
screen
and
(
min-width
:
62
em
)
{
@media
only
screen
and
(
min-width
:
70
em
)
{
.gadget-content
.center
.ui-field-contain
label
+
div
{
.gadget-content
.center
.ui-field-contain
label
+
div
{
flex
:
7
;
flex
:
7
;
}
}
}
}
@media
only
screen
and
(
max-width
:
28em
)
{
.gadget-content
.ui-field-contain
{
padding
:
0.8em
0
;
}
}
.gadget-content
form
label
span
{
.gadget-content
form
label
span
{
color
:
red
;
color
:
red
;
}
}
...
@@ -985,17 +960,18 @@ div[data-gadget-scope='header'] .ui-header ul a {
...
@@ -985,17 +960,18 @@ div[data-gadget-scope='header'] .ui-header ul a {
display
:
flex
;
display
:
flex
;
}
}
.relation-input
a
{
.relation-input
a
{
width
:
3em
;
width
:
24pt
;
overflow
:
hidden
;
overflow
:
hidden
;
text-indent
:
-9999px
;
text-indent
:
-9999px
;
white-space
:
nowrap
;
white-space
:
nowrap
;
display
:
block
;
display
:
block
;
line-height
:
2.6em
;
padding-top
:
3pt
;
padding-bottom
:
3pt
;
}
}
.relation-input
a
::before
{
.relation-input
a
::before
{
float
:
left
;
float
:
left
;
text-indent
:
0
;
text-indent
:
0
;
margin-left
:
1em
;
margin-left
:
6pt
;
}
}
.relation-input
div
{
.relation-input
div
{
position
:
relative
;
position
:
relative
;
...
@@ -1010,15 +986,15 @@ div[data-gadget-scope='header'] .ui-header ul a {
...
@@ -1010,15 +986,15 @@ div[data-gadget-scope='header'] .ui-header ul a {
cursor
:
pointer
;
cursor
:
pointer
;
background-color
:
#444444
;
background-color
:
#444444
;
color
:
#FFFFFF
;
color
:
#FFFFFF
;
padding
:
.4em
;
padding
:
3pt
;
padding-left
:
1em
;
padding-left
:
6pt
;
display
:
block
;
display
:
block
;
text-overflow
:
ellipsis
;
text-overflow
:
ellipsis
;
overflow
:
hidden
;
overflow
:
hidden
;
white-space
:
nowrap
;
white-space
:
nowrap
;
}
}
.relation-input
ul
li
::before
{
.relation-input
ul
li
::before
{
width
:
2em
;
padding-right
:
6pt
;
}
}
.relation-input
ul
li
:hover
,
.relation-input
ul
li
:hover
,
.relation-input
ul
li
:active
{
.relation-input
ul
li
:active
{
...
@@ -1039,6 +1015,9 @@ div[data-gadget-scope='header'] .ui-header ul a {
...
@@ -1039,6 +1015,9 @@ div[data-gadget-scope='header'] .ui-header ul a {
/**********************************************
/**********************************************
* Listbox
* Listbox
**********************************************/
**********************************************/
div
[
data-gadget-scope
=
'erp5_searchfield'
]
{
padding-top
:
6pt
;
}
div
[
data-gadget-scope
=
'erp5_searchfield'
]
.ui-input-text
{
div
[
data-gadget-scope
=
'erp5_searchfield'
]
.ui-input-text
{
display
:
flex
;
display
:
flex
;
}
}
...
@@ -1046,13 +1025,11 @@ div[data-gadget-scope='erp5_searchfield'] .ui-input-text div[data-gadget-scope='
...
@@ -1046,13 +1025,11 @@ div[data-gadget-scope='erp5_searchfield'] .ui-input-text div[data-gadget-scope='
width
:
100%
;
width
:
100%
;
}
}
div
[
data-gadget-scope
=
'erp5_searchfield'
]
button
{
div
[
data-gadget-scope
=
'erp5_searchfield'
]
button
{
margin-left
:
0.5em
;
padding
:
3pt
;
padding
:
0.5em
;
padding-left
:
0
;
}
}
.document_table
.ui-table-header
{
.document_table
.ui-table-header
{
display
:
flex
;
display
:
flex
;
padding-bottom
:
0.5em
;
padding-bottom
:
6pt
;
}
}
@media
only
screen
and
(
max-width
:
28em
)
{
@media
only
screen
and
(
max-width
:
28em
)
{
.document_table
.ui-table-header
{
.document_table
.ui-table-header
{
...
@@ -1065,10 +1042,10 @@ div[data-gadget-scope='erp5_searchfield'] button {
...
@@ -1065,10 +1042,10 @@ div[data-gadget-scope='erp5_searchfield'] button {
align-self
:
flex-end
;
align-self
:
flex-end
;
}
}
.document_table
.ui-table-header
button
{
.document_table
.ui-table-header
button
{
padding
:
0.5em
;
padding
:
3pt
;
border
:
1px
solid
rgba
(
0
,
0
,
0
,
0.14
);
border
:
1px
solid
rgba
(
0
,
0
,
0
,
0.14
);
border-radius
:
0.325em
;
border-radius
:
0.325em
;
margin-right
:
0.5em
;
margin-right
:
6pt
;
}
}
.document_table
.ui-table-header
button
:last-of-type
{
.document_table
.ui-table-header
button
:last-of-type
{
margin-right
:
0
;
margin-right
:
0
;
...
@@ -1082,7 +1059,7 @@ div[data-gadget-scope='erp5_searchfield'] button {
...
@@ -1082,7 +1059,7 @@ div[data-gadget-scope='erp5_searchfield'] button {
}
}
}
}
.document_table
.ui-table-header
button
::before
{
.document_table
.ui-table-header
button
::before
{
margin-right
:
0.4em
;
margin-right
:
6pt
;
}
}
@media
only
screen
and
(
max-width
:
28em
)
{
@media
only
screen
and
(
max-width
:
28em
)
{
.document_table
.ui-table-header
button
::before
{
.document_table
.ui-table-header
button
::before
{
...
@@ -1096,7 +1073,6 @@ div[data-gadget-scope='erp5_searchfield'] button {
...
@@ -1096,7 +1073,6 @@ div[data-gadget-scope='erp5_searchfield'] button {
}
}
.document_table
table
th
,
.document_table
table
th
,
.document_table
table
td
{
.document_table
table
td
{
line-height
:
1.5em
;
vertical-align
:
middle
;
vertical-align
:
middle
;
}
}
.document_table
table
thead
{
.document_table
table
thead
{
...
@@ -1104,7 +1080,7 @@ div[data-gadget-scope='erp5_searchfield'] button {
...
@@ -1104,7 +1080,7 @@ div[data-gadget-scope='erp5_searchfield'] button {
color
:
#FFFFFF
;
color
:
#FFFFFF
;
}
}
.document_table
table
thead
tr
th
{
.document_table
table
thead
tr
th
{
padding
:
0.4em
0.25em
;
padding
:
6pt
3pt
;
}
}
@media
only
screen
and
(
max-width
:
28em
)
{
@media
only
screen
and
(
max-width
:
28em
)
{
.document_table
table
thead
{
.document_table
table
thead
{
...
@@ -1121,10 +1097,10 @@ div[data-gadget-scope='erp5_searchfield'] button {
...
@@ -1121,10 +1097,10 @@ div[data-gadget-scope='erp5_searchfield'] button {
.document_table
table
tbody
tr
:active
{
.document_table
table
tbody
tr
:active
{
background-color
:
#e0e0e0
;
background-color
:
#e0e0e0
;
}
}
@media
only
screen
and
(
min-width
:
62em
),
only
screen
and
(
min-width
:
28em
)
and
(
max-width
:
62
em
)
{
@media
only
screen
and
(
min-width
:
70em
),
only
screen
and
(
min-width
:
28em
)
and
(
max-width
:
70
em
)
{
.document_table
table
tbody
a
{
.document_table
table
tbody
a
{
display
:
block
;
display
:
block
;
padding
:
0.4em
0.25em
;
padding
:
3pt
;
}
}
}
}
@media
only
screen
and
(
max-width
:
28em
)
{
@media
only
screen
and
(
max-width
:
28em
)
{
...
@@ -1160,7 +1136,7 @@ div[data-gadget-scope='erp5_searchfield'] button {
...
@@ -1160,7 +1136,7 @@ div[data-gadget-scope='erp5_searchfield'] button {
content
:
"\f0da"
;
content
:
"\f0da"
;
font-size
:
1.25em
;
font-size
:
1.25em
;
position
:
absolute
;
position
:
absolute
;
right
:
0.5em
;
right
:
6pt
;
top
:
50%
;
top
:
50%
;
margin-top
:
-0.75em
;
margin-top
:
-0.75em
;
background-color
:
#FFFFFF
;
background-color
:
#FFFFFF
;
...
@@ -1190,7 +1166,7 @@ div[data-gadget-scope='erp5_searchfield'] button {
...
@@ -1190,7 +1166,7 @@ div[data-gadget-scope='erp5_searchfield'] button {
}
}
.document_table
table
tfoot
.ui-controlgroup-controls
{
.document_table
table
tfoot
.ui-controlgroup-controls
{
display
:
flex
;
display
:
flex
;
padding-top
:
0.5em
;
padding-top
:
6pt
;
border-top
:
2px
solid
rgba
(
0
,
0
,
0
,
0.14902
);
border-top
:
2px
solid
rgba
(
0
,
0
,
0
,
0.14902
);
}
}
.document_table
table
tfoot
.ui-controlgroup-controls
span
{
.document_table
table
tfoot
.ui-controlgroup-controls
span
{
...
@@ -1199,10 +1175,10 @@ div[data-gadget-scope='erp5_searchfield'] button {
...
@@ -1199,10 +1175,10 @@ div[data-gadget-scope='erp5_searchfield'] button {
text-align
:
right
;
text-align
:
right
;
}
}
.document_table
table
tfoot
.ui-controlgroup-controls
a
{
.document_table
table
tfoot
.ui-controlgroup-controls
a
{
padding
:
0.5em
;
padding
:
6pt
;
border
:
1px
solid
rgba
(
0
,
0
,
0
,
0.14
);
border
:
1px
solid
rgba
(
0
,
0
,
0
,
0.14
);
border-radius
:
0.325em
;
border-radius
:
0.325em
;
margin-right
:
0.5em
;
margin-right
:
6pt
;
}
}
.document_table
table
tfoot
.ui-controlgroup-controls
a
:last-of-type
{
.document_table
table
tfoot
.ui-controlgroup-controls
a
:last-of-type
{
margin-right
:
0
;
margin-right
:
0
;
...
@@ -1213,19 +1189,18 @@ div[data-gadget-scope='erp5_searchfield'] button {
...
@@ -1213,19 +1189,18 @@ div[data-gadget-scope='erp5_searchfield'] button {
}
}
@media
only
screen
and
(
max-width
:
28em
)
{
@media
only
screen
and
(
max-width
:
28em
)
{
.document_table
table
tfoot
.ui-controlgroup-controls
a
{
.document_table
table
tfoot
.ui-controlgroup-controls
a
{
width
:
2em
;
overflow
:
hidden
;
overflow
:
hidden
;
text-indent
:
-9999px
;
text-indent
:
-9999px
;
white-space
:
nowrap
;
white-space
:
nowrap
;
}
}
}
}
.document_table
table
tfoot
.ui-controlgroup-controls
a
::before
{
.document_table
table
tfoot
.ui-controlgroup-controls
a
::before
{
margin-right
:
0.4em
;
margin-right
:
6pt
;
}
}
@media
only
screen
and
(
max-width
:
28em
)
{
@media
only
screen
and
(
max-width
:
28em
)
{
.document_table
table
tfoot
.ui-controlgroup-controls
a
::before
{
.document_table
table
tfoot
.ui-controlgroup-controls
a
::before
{
float
:
left
;
float
:
left
;
text-indent
:
0.3em
;
text-indent
:
6pt
;
}
}
}
}
/**********************************************
/**********************************************
...
@@ -1263,9 +1238,7 @@ div[data-gadget-scope='erp5_searchfield'] button {
...
@@ -1263,9 +1238,7 @@ div[data-gadget-scope='erp5_searchfield'] button {
content
:
""
;
content
:
""
;
}
}
.ui-icon-warning
{
.ui-icon-warning
{
background
:
none
repeat
scroll
0
0
#e4ebf1
;
background-color
:
#FF6600
!important
;
border-color
:
rgba
(
0
,
0
,
0
,
0.3
);
color
:
#777
;
}
}
.ui-icon-warning
::before
{
.ui-icon-warning
::before
{
content
:
"\f071"
;
content
:
"\f071"
;
...
...
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.xml
View file @
0fac5987
...
@@ -63,6 +63,16 @@
...
@@ -63,6 +63,16 @@
</tuple>
</tuple>
</value>
</value>
</item>
</item>
<item>
<key>
<string>
categories
</string>
</key>
<value>
<tuple>
<string>
group/3
</string>
<string>
contributor/organisation_module/1
</string>
<string>
contributor/person_module/3
</string>
</tuple>
</value>
</item>
<item>
<item>
<key>
<string>
content_md5
</string>
</key>
<key>
<string>
content_md5
</string>
</key>
<value>
<value>
...
@@ -81,9 +91,22 @@
...
@@ -81,9 +91,22 @@
</item>
</item>
<item>
<item>
<key>
<string>
description
</string>
</key>
<key>
<string>
description
</string>
</key>
<value>
<value>
<string>
fsvdfv\n
<none/>
dfv\n
</value>
dfv\n
dfv\n
dfv\n
ddfv\n
dfv\n
dfv\n
dfvdfvdfvdfv\n
dfdfv\n
ffffff\n
dfvfdvdfvdfvdfvdfvdfvdfv\n
dfv\n
dfvdf\n
vdf\n
vdf
</string>
</value>
</item>
</item>
<item>
<item>
<key>
<string>
id
</string>
</key>
<key>
<string>
id
</string>
</key>
...
@@ -236,7 +259,7 @@
...
@@ -236,7 +259,7 @@
</item>
</item>
<item>
<item>
<key>
<string>
serial
</string>
</key>
<key>
<string>
serial
</string>
</key>
<value>
<string>
95
4.58960.41752.2715
3
</string>
</value>
<value>
<string>
95
5.12311.36129.4908
3
</string>
</value>
</item>
</item>
<item>
<item>
<key>
<string>
state
</string>
</key>
<key>
<string>
state
</string>
</key>
...
@@ -254,7 +277,7 @@
...
@@ -254,7 +277,7 @@
</tuple>
</tuple>
<state>
<state>
<tuple>
<tuple>
<float>
147
7660036.34
</float>
<float>
147
8793295.77
</float>
<string>
UTC
</string>
<string>
UTC
</string>
</tuple>
</tuple>
</state>
</state>
...
...
bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt
View file @
0fac5987
...
@@ -34,18 +34,22 @@
...
@@ -34,18 +34,22 @@
@radius: .325em;
@radius: .325em;
@headerheight: 2.6em;
// XXX BUG Generate wrong align on firefox smartphone
@headertitleleftlargemargin: 4em;
@headerheight: @font-size * 2 + @margin-size;
@headertitleleftsmallmargin: 2em;
@mainpaddingdesktop: 2em;
@main-margin-size-desktop: @quadruple-margin-size;
@main-margin-size-smartphone: @margin-size;
@headertitleleftlargemargin: @main-margin-size-desktop + @margin-size * 3;
@headertitleleftsmallmargin: @main-margin-size-smartphone + @main-margin-size-desktop;
// XXX desktop: 12em
// XXX desktop: 12em
@panelwidth: 17em;
@panelwidth: @margin-size * 30;
// @panelwidth: 15em;
@smartphone: ~"only screen and (max-width: 28em)";
@smartphone: ~"only screen and (max-width: 28em)";
@tablet: ~"only screen and (min-width: 28em) and (max-width:
62
em)";
@tablet: ~"only screen and (min-width: 28em) and (max-width:
70
em)";
@desktop: ~"only screen and (min-width:
62
em)";
@desktop: ~"only screen and (min-width:
70
em)";
/**********************************************
/**********************************************
...
@@ -58,24 +62,39 @@
...
@@ -58,24 +62,39 @@
* Shared
* Shared
**********************************************/
**********************************************/
@font-family: @sans-serif;
@font-family: @sans-serif;
@font-size: 11pt;
// Increase font size to prevent IOS auto zooming when focusing input field
// Increase font size to prevent IOS auto zooming when focusing input field
@
smartphone-
font-size: 12pt;
@font-size: 12pt;
@font-weight: 400;
@font-weight: 400;
@line-height: 1.3;
@line-height: 1.5;
@letter-spacing: .05em;
@header-font-weight: 700;
@header-font-weight: 700;
// @header-font-weight: bolder;
@header-letter-spacing: .1em;
@border-size: 1p
t
;
@border-size: 1p
x
;
@border-type: solid;
@border-type: solid;
// @border-color: @color;
@border-transparency: .3;
@border: @border-size @border-type @colorforeground;
@border-color: rgba(0, 0, 0, @border-transparency);
@border: @border-size @border-type @border-color;
@border-radius: @radius;
@box-shadow-transparency: .2;
@box-shadow: inset 0 @border-size 3px rgba(0, 0, 0, @box-shadow-transparency);
// #3388cc = rgba(51, 136, 204, 1)
@focus-border-color: #3388cc;
@focus-border: @border-size @border-type @focus-border-color;
@focus-box-shadow: 0 0 @double-margin-size @focus-border-color;
@half-margin-size: 3pt;
@margin-size: 6pt;
@double-margin-size: 12pt;
@triple-margin-size: 18pt;
@quadruple-margin-size: 24pt;
@transition-timing: .2s ease-out;
@sub-line-margin-size-desktop: @main-margin-size-desktop;
@sub-line-min-width-desktop: 5em;
///////////////////////////////////////////////
///////////////////////////////////////////////
// Extend
// Extend
...
@@ -205,13 +224,10 @@ body {
...
@@ -205,13 +224,10 @@ body {
body, button, input, textarea, select {
body, button, input, textarea, select {
font-family: @font-family;
font-family: @font-family;
// letter-spacing: @letter-spacing;
@media @desktop, @tablet {
font-size: @font-size;
font-size: @font-size;
}
padding: 0;
@media @smartphone {
margin: 0;
font-size: @smartphone-font-size;
}
font-weight: @font-weight;
font-weight: @font-weight;
line-height: @line-height;
line-height: @line-height;
}
}
...
@@ -270,7 +286,6 @@ q {
...
@@ -270,7 +286,6 @@ q {
}
}
mark {
mark {
// background-color: @colortextselection;
color: @colortextselection;
color: @colortextselection;
}
}
...
@@ -278,9 +293,11 @@ mark {
...
@@ -278,9 +293,11 @@ mark {
* Link
* Link
**********************************************/
**********************************************/
.link(@ccolor) {
.link(@ccolor) {
// XXX
color: @ccolor;
color: @ccolor;
text-decoration: none;
text-decoration: none;
// TODO Animate underline by using outline?
&[href=""] {
&[href=""] {
color: @colorforeground;
color: @colorforeground;
...
@@ -291,6 +308,7 @@ mark {
...
@@ -291,6 +308,7 @@ mark {
text-decoration: underline;
text-decoration: underline;
}
}
&:focus {
&:focus {
// XXX TODO
outline-offset: -2px;
outline-offset: -2px;
outline: 2px @border-type @colorfocus;
outline: 2px @border-type @colorfocus;
}
}
...
@@ -314,7 +332,6 @@ a {
...
@@ -314,7 +332,6 @@ a {
pre, xmp, plaintext, listing {
pre, xmp, plaintext, listing {
display: block;
display: block;
// font-family: @monospace;
white-space: pre-wrap;
white-space: pre-wrap;
}
}
...
@@ -334,106 +351,64 @@ hr {
...
@@ -334,106 +351,64 @@ hr {
**********************************************/
**********************************************/
label {
label {
display: block;
// XXX
color: @grey;
color: @grey;
}
}
input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]), textarea {
input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]), textarea
, select
{
width: 100%;
width: 100%;
margin: 0;
padding: 0.4em;
padding: @half-margin-size;
line-height: 1.4em;
border: none;
background-color: @colortextboxbackground;
background-color: @colortextboxbackground;
color: @colortextboxforeground;
color: @colortextboxforeground;
border-radius: @radius;
border: @border;
border-width: 1px;
border-radius: @border-radius;
border-style: solid;
border-color: rgba(0, 0, 0, 0.3);
// BUG: transition is not triggered if there is a default box-shadow
box-shadow: inset 0 1px 3px rgba(0,0,0,.2);
// probably a chrome bug. Disable for now.
// box-shadow: @box-shadow;
outline-offset: 0;
transition : border @transition-timing, box-shadow @transition-timing;
&[readonly="readonly"] {
// XXX Should be dropped when gadget field do not use input
// in read only
border: none;
box-shadow: none;
padding: 0;
line-height: 1em;
}
&:active, &:focus {
&:active, &:focus {
outline
-offset: 0
;
outline
: none
;
}
}
&:focus {
&:focus {
box-shadow: 0 0 12px @colorfocus;
border: @focus-border;
box-shadow: @focus-box-shadow;
}
}
}
}
// http://kyusuf.com/post/completely-css-custom-checkbox-radio-buttons-and-select-boxes
// http://kyusuf.com/post/completely-css-custom-checkbox-radio-buttons-and-select-boxes
select {
select {
width: 100%;
cursor: pointer;
margin: 0;
padding: 0.4em;
padding-right: 1.8em;
-webkit-appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
-moz-appearance: none;
appearance: none;
appearance: none;
line-height: 1.4em;
cursor: pointer;
background-image: none;
background-image: none;
background-color: @colortextboxbackground;
background-color: @colortextboxbackground;
padding-right: @quadruple-margin-size;
background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50px' height='50px'><polyline fill-opacity='0.5' points='46.139,15.518 25.166,36.49 4.193,15.519'/></svg>") right no-repeat;
background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50px' height='50px'><polyline fill-opacity='0.5' points='46.139,15.518 25.166,36.49 4.193,15.519'/></svg>") right no-repeat;
background-position: right .5em top 50%;
background-position: right @margin-size top 50%;
background-size: 1em 1em;
background-size: @double-margin-size @double-margin-size;
color: @colortextboxforeground;
border-radius: @radius;
border-width: 1px;
border-style: solid;
border-color: rgba(0, 0, 0, 0.3);
box-shadow: inset 0 1px 3px rgba(0,0,0,.2);
outline-offset: 0;
&[readonly="readonly"] {
// XXX Should be dropped when gadget field do not use input
// in read only
border: none;
background: none;
box-shadow: none;
padding: 0;
line-height: 1em;
}
&:not([readonly="readonly"]) {
&:hover, &:active {
background-color: @colorblocklinkbackground;
}
}
&:-moz-focusring {
&:-moz-focusring {
color: transparent
// Remove outline in Firefox
// http://stackoverflow.com/a/18853002
color: transparent;
text-shadow: 0 0 0 #000;
}
}
}
}
textarea {
textarea {
width: 100%;
// Fix inconsistent Textarea bottom margin in Firefox and Chrome
margin: 0;
// http://stackoverflow.com/a/26904480
// font-family: @monospace;
vertical-align: top;
// BUG: how to transition on textarea row property
}
}
::-webkit-input-placeholder {
::-webkit-input-placeholder {
...
@@ -461,20 +436,24 @@ input[type=submit], button {
...
@@ -461,20 +436,24 @@ input[type=submit], button {
margin: 0;
margin: 0;
padding: 0;
padding: 0;
border: none;
border: none;
background-image: none;
background:transparent;
background-color: @colorbackground;
color: @colorforeground;
color: @colorforeground;
transition: background-color 0.2s ease-out;
&:hover, &:focus {
&:hover, &:focus {
outline: none;
outline: none;
background-color: @colorblocklinkbackground;
}
/*
// XXX TODO
// transition: background-color 0.2s ease-out;
&:hover, &:focus {
outline: none;
}
}
&:active {
&:active {
// box-shadow: inset 0 0 0 5px darken(@colorblocklinkbackground, 10%);
// box-shadow: inset 0 0 0 5px darken(@colorblocklinkbackground, 10%);
background-color: darken(@colorblocklinkbackground, 20%);
background-color: darken(@colorblocklinkbackground, 20%);
}
}
*/
cursor: pointer;
cursor: pointer;
}
}
...
@@ -482,7 +461,7 @@ input[type=submit], button {
...
@@ -482,7 +461,7 @@ input[type=submit], button {
* Media
* Media
**********************************************/
**********************************************/
img,
canvas,
iframe, video, svg {
img, iframe, video, svg {
max-width: 100%;
max-width: 100%;
}
}
...
@@ -499,8 +478,8 @@ svg {
...
@@ -499,8 +478,8 @@ svg {
iframe {
iframe {
width: 100%;
width: 100%;
height:
50em
;
height:
80vh
;
background-color:
white
;
background-color:
@colorbackground
;
}
}
img {
img {
...
@@ -530,15 +509,14 @@ div[data-gadget-scope='panel'] {
...
@@ -530,15 +509,14 @@ div[data-gadget-scope='panel'] {
z-index: 2000;
z-index: 2000;
@media @smartphone, @tablet {
@media @smartphone, @tablet {
left: -@panelwidth -
1em
;
left: -@panelwidth -
@margin-size
;
transition: transform 200ms ease-out;
transition: transform 200ms ease-out;
transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
&.visible {
&.visible {
transform: translate3d(@panelwidth +
1em
, 0, 0);
transform: translate3d(@panelwidth +
@margin-size
, 0, 0);
}
}
}
}
div[data-role="header"] {
div[data-role="header"] {
display: flex;
display: flex;
justify-content: flex-start;
justify-content: flex-start;
...
@@ -553,11 +531,10 @@ div[data-gadget-scope='panel'] {
...
@@ -553,11 +531,10 @@ div[data-gadget-scope='panel'] {
.hide_text();
.hide_text();
background-color: @panelbackgroundcolor;
background-color: @panelbackgroundcolor;
&::before {
&::before {
float: left;
float: left;
text-indent: 0;
text-indent: 0;
margin-left:
1em
;
margin-left:
@double-margin-size
;
}
}
@media @desktop {
@media @desktop {
...
@@ -585,15 +562,17 @@ div[data-gadget-scope='panel'] {
...
@@ -585,15 +562,17 @@ div[data-gadget-scope='panel'] {
li {
li {
a {
a {
color: @white;
color: @white;
padding:
.4em
;
padding:
@half-margin-size
;
padding-left:
1em
;
padding-left:
@double-margin-size
;
display: block;
display: block;
text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
overflow: hidden;
white-space: nowrap;
white-space: nowrap;
&::before {
&::before {
width: @mainpaddingdesktop;
// Use width instead of padding-right
// To keep text aligned
width: @quadruple-margin-size;
}
}
&:hover, &:active {
&:hover, &:active {
background-color: darken(@panelbackgroundcolor, 10%);
background-color: darken(@panelbackgroundcolor, 10%);
...
@@ -621,20 +600,20 @@ div[data-gadget-scope='editor_panel'] {
...
@@ -621,20 +600,20 @@ div[data-gadget-scope='editor_panel'] {
z-index: 3000;
z-index: 3000;
@media @desktop {
@media @desktop {
left: -@panelwidth -
1em
;
left: -@panelwidth -
@margin-size
;
transition: transform 200ms ease-out;
transition: transform 200ms ease-out;
transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
&.visible {
&.visible {
transform: translate3d(@panelwidth +
1em
, 0, 0);
transform: translate3d(@panelwidth +
@margin-size
, 0, 0);
}
}
box-shadow: 5px 0 5px rgba(0,0,0,.15);
box-shadow: 5px 0 5px rgba(0,0,0,.15);
}
}
@media @smartphone, @tablet {
@media @smartphone, @tablet {
right: -@panelwidth -
1em
;
right: -@panelwidth -
@margin-size
;
transition: transform 200ms ease-out;
transition: transform 200ms ease-out;
transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
&.visible {
&.visible {
transform: translate3d(-@panelwidth -
1em
, 0, 0);
transform: translate3d(-@panelwidth -
@margin-size
, 0, 0);
}
}
box-shadow: -5px 0 5px rgba(0,0,0,.15);
box-shadow: -5px 0 5px rgba(0,0,0,.15);
}
}
...
@@ -659,7 +638,7 @@ div[data-gadget-scope='editor_panel'] {
...
@@ -659,7 +638,7 @@ div[data-gadget-scope='editor_panel'] {
&::before {
&::before {
float: left;
float: left;
text-indent: 0;
text-indent: 0;
margin-left:
1em
;
margin-left:
@double-margin-size
;
}
}
display: block;
display: block;
...
@@ -669,7 +648,7 @@ div[data-gadget-scope='editor_panel'] {
...
@@ -669,7 +648,7 @@ div[data-gadget-scope='editor_panel'] {
}
}
section {
section {
padding:
1em
;
padding:
@double-margin-size
;
fieldset {
fieldset {
& > div {
& > div {
...
@@ -678,7 +657,7 @@ div[data-gadget-scope='editor_panel'] {
...
@@ -678,7 +657,7 @@ div[data-gadget-scope='editor_panel'] {
label {
label {
display: inline-block;
display: inline-block;
text-align: center;
text-align: center;
font-size: 0.8em;
//
font-size: 0.8em;
}
}
input[type="radio"] {
input[type="radio"] {
display: inline-block;
display: inline-block;
...
@@ -689,7 +668,7 @@ div[data-gadget-scope='editor_panel'] {
...
@@ -689,7 +668,7 @@ div[data-gadget-scope='editor_panel'] {
& > div {
& > div {
display: flex;
display: flex;
align-items: flex-start;
align-items: flex-start;
padding:
0.5em
0;
padding:
@margin-size
0;
.filter_item, .sort_item {
.filter_item, .sort_item {
flex: 1;
flex: 1;
...
@@ -700,11 +679,11 @@ div[data-gadget-scope='editor_panel'] {
...
@@ -700,11 +679,11 @@ div[data-gadget-scope='editor_panel'] {
button {
button {
// Copy pasted from listbox buttons
// Copy pasted from listbox buttons
padding:
0.5em
;
padding:
@half-margin-size @margin-size
;
border: 1px solid rgba(0, 0, 0, 0.14);
border: 1px solid rgba(0, 0, 0, 0.14);
border-radius: @radius;
border-radius: @radius;
margin-right:
0.5em
;
margin-right:
@margin-size
;
&:last-of-type {
&:last-of-type {
margin-right: 0;
margin-right: 0;
}
}
...
@@ -712,7 +691,7 @@ div[data-gadget-scope='editor_panel'] {
...
@@ -712,7 +691,7 @@ div[data-gadget-scope='editor_panel'] {
.hide_text(@width: 2em);
.hide_text(@width: 2em);
&::before {
&::before {
margin-right:
0.4em
;
margin-right:
@margin-size
;
float: left;
float: left;
text-indent: 0;
text-indent: 0;
...
@@ -727,62 +706,78 @@ div[data-gadget-scope='editor_panel'] {
...
@@ -727,62 +706,78 @@ div[data-gadget-scope='editor_panel'] {
/**********************************************
/**********************************************
* Gadget: header
* Gadget: header
**********************************************/
**********************************************/
.renderDesktopSubLink() {
padding-left: @sub-line-margin-size-desktop;
padding-right: @sub-line-margin-size-desktop;
min-width: @sub-line-min-width-desktop;
}
div[data-gadget-scope='header'] .ui-header {
div[data-gadget-scope='header'] .ui-header {
position: fixed;
position: fixed;
z-index: 1000;
z-index: 1000;
text-align: center;
text-align: center;
@media @tablet, @smartphone {
display: flex;
display: flex;
flex-flow: row wrap;
flex-flow: row wrap;
}
// Prevent the header to have a width higher than the screen
width: 100%;
@media @desktop {
@media @desktop {
display: table;
margin-left: @panelwidth;
margin-left: @panelwidth;
}
}
// Prevent the header to have a width higher than the screen
width: 100%;
color: @white;
color: @white;
background-color: @colorsubheaderbackground;
button, a {
button, a {
color: @white;
color: @white;
background-color: @colorheaderbackground
;
transition: background-color @transition-timing
;
&:hover, &:active {
&:hover, &:active {
background-color: lighten(@colorheaderbackground, 20%);
background-color: lighten(@colorheaderbackground, 20%);
}
}
}
}
// XXX TODO: restore border to separate title from button/links
& > .ui-btn-left {
button, a {
border-right: 1px solid rgba(255, 255, 255, 0.55);
}
}
.ui-controlgroup-controls {
.ui-controlgroup-controls {
// Left, right button next to the page title
button, a {
button, a {
display: block;
display: block;
@media @desktop {
background-color: @colorsubheaderbackground;
}
@media @smartphone, @tablet {
background-color: @colorheaderbackground;
}
transition: background-color @transition-timing;
&:hover, &:active {
background-color: lighten(@colorheaderbackground, 20%);
}
line-height: @headerheight;
line-height: @headerheight;
@media @tablet {
// https://css-tricks.com/forums/topic/hide-text-but-not-the-before-pseudo-class/
// https://css-tricks.com/forums/topic/hide-text-but-not-the-before-pseudo-class/
// Default size
// Default size
width: 8em;
width: 8em;
}
@media @smartphone {
@media @smartphone {
.hide_text();
.hide_text();
}
}
&::before {
&::before {
margin-right: 0.4em;
@media @tablet, @desktop {
width: 1em;
margin-right: @margin-size;
text-align: center;
}
@media @smartphone {
@media @smartphone {
float: left;
float: left;
text-indent: 0;
text-indent: 0;
margin-left:
1em
;
margin-left:
@double-margin-size
;
}
}
}
}
...
@@ -795,18 +790,21 @@ div[data-gadget-scope='header'] .ui-header {
...
@@ -795,18 +790,21 @@ div[data-gadget-scope='header'] .ui-header {
}
}
}
}
// XXX TODO: restore border to separate title from button/links
& > .ui-btn-left {
button, a {
border-right: 1px solid rgba(255, 255, 255, 0.55);
}
}
& > .ui-btn-right {
& > .ui-btn-right {
button, a {
button, a {
background-color: #F60;
//
background-color: #F60;
@media @smartphone, @tablet {
@media @smartphone, @tablet {
border-left: 1px solid rgba(255, 255, 255, 0.55);
border-left: 1px solid rgba(255, 255, 255, 0.55);
}
}
}
@media @desktop {
@media @desktop {
display: table-footer-group;
.renderDesktopSubLink();
button, a {
margin: 0.5em;
margin-left: @mainpaddingdesktop;
}
}
}
}
}
}
...
@@ -815,10 +813,13 @@ div[data-gadget-scope='header'] .ui-header {
...
@@ -815,10 +813,13 @@ div[data-gadget-scope='header'] .ui-header {
text-align: left;
text-align: left;
line-height: @headerheight;
line-height: @headerheight;
flex: 1;
flex: 1;
@media @desktop {
flex: 1 100%;
}
background-color: @colorheaderbackground;
background-color: @colorheaderbackground;
//
XXX Restore border
//
Restore border?
// border-left: 1px solid rgba(255, 255, 255, 0.55);
// border-left: 1px solid rgba(255, 255, 255, 0.55);
// border-right: 1px solid rgba(255, 255, 255, 0.55);
// border-right: 1px solid rgba(255, 255, 255, 0.55);
...
@@ -834,7 +835,7 @@ div[data-gadget-scope='header'] .ui-header {
...
@@ -834,7 +835,7 @@ div[data-gadget-scope='header'] .ui-header {
padding-left: @headertitleleftsmallmargin;
padding-left: @headertitleleftsmallmargin;
}
}
@media @desktop {
@media @desktop {
padding-left: @main
padding
desktop;
padding-left: @main
-margin-size-
desktop;
}
}
}
}
// Clickable title
// Clickable title
...
@@ -851,13 +852,13 @@ div[data-gadget-scope='header'] .ui-header {
...
@@ -851,13 +852,13 @@ div[data-gadget-scope='header'] .ui-header {
@media @tablet, @smartphone {
@media @tablet, @smartphone {
text-align: center;
text-align: center;
}
}
@media @desktop {
@media @desktop {
padding-left: @main
padding
desktop;
padding-left: @main
-margin-size-
desktop;
}
}
width: @headertitleleftlargemargin;
width: @headertitleleftlargemargin;
@media @smartphone {
@media @smartphone {
width: @headertitleleftsmallmargin
width: @headertitleleftsmallmargin
;
}
}
}
}
...
@@ -869,111 +870,79 @@ div[data-gadget-scope='header'] .ui-header {
...
@@ -869,111 +870,79 @@ div[data-gadget-scope='header'] .ui-header {
.ui-subheader {
.ui-subheader {
@media @desktop {
@media @desktop {
text-align: left;
text-align: left;
flex: 1;
}
}
@media @smartphone, @tablet {
flex: 1 100%;
}
}
ul {
width: 100%;
background-color: @colorsubheaderbackground;
display: table;
table-layout: fixed;
a {
background-color: @colorsubheaderbackground;
}
}
@media @desktop
{
ul
{
height: 100%
;
display: flex
;
li {
li {
display: inline-block;
@media @tablet, @smartphone {
height: 100%;
flex: 1;
// XXX TODO Hardcoded color
border-left: 1px solid rgba(0, 0, 0, 0.55);
&:first-child {
border-left: none;
}
a {
a {
display: block;
display: block;
padding-left: @mainpaddingdesktop;
padding-right: @mainpaddingdesktop;
min-width: 5em;
line-height: @headerheight;
height: 100%;
white-space: nowrap;
overflow: hidden;
&::before {
display: none;
}
}
}
}
}
}
@media @tablet {
@media @tablet {
li {
display: table-cell;
border-left: 1px solid rgba(0, 0, 0, 0.55);
&:first-child {
border-left: none;
}
a {
a {
display: block;
padding-top: @half-margin-size;
padding-bottom: @half-margin-size;
padding-top: 0.4em;
padding-bottom: 0.4em;
white-space: nowrap;
white-space: nowrap;
overflow: hidden;
overflow: hidden;
&::before {
&::before {
font-size: 1.2em;
font-size: 1.2em;
padding-bottom: 0.3em;
display: block;
display: block;
}
}
}
}
}
}
}
@media @smartphone {
@media @smartphone {
li {
line-height: @headerheight;
display: table-cell;
border-left: 1px solid rgba(0, 0, 0, 0.55);
&:first-child {
border-left: none;
}
a {
a {
display: block;
text-align: center;
text-align: center;
vertical-align: middle;
vertical-align: middle;
font-size: 1.5em;
font-size: 1.5em;
padding-top: @margin-size;
padding-top: 0.4em;
padding-bottom: @margin-size;
padding-bottom: 0.4em;
.hide_text(@width: false);
.hide_text(@width: false);
&::before {
&::before {
float: left;
float: left;
text-indent: 0;
text-indent: 0;
width: 100%;
width: 100%;
}
}
}
}
@media @desktop {
a {
display: block;
.renderDesktopSubLink();
line-height: @headerheight;
white-space: nowrap;
overflow: hidden;
&::before {
display: none;
}
}
}
}
}
}
}
}
}
}
}
/**********************************************
/**********************************************
...
@@ -981,10 +950,8 @@ div[data-gadget-scope='header'] .ui-header {
...
@@ -981,10 +950,8 @@ div[data-gadget-scope='header'] .ui-header {
**********************************************/
**********************************************/
.gadget-content {
.gadget-content {
input[type='submit'] {
input[type='submit'] {
padding: 0.4em;
padding: @margin-size;
line-height: 1.4em;
background-color: @panelbackgroundcolor;
background-color: @panelbackgroundcolor;
color: @white;
color: @white;
...
@@ -1010,33 +977,39 @@ div[data-gadget-scope='header'] .ui-header {
...
@@ -1010,33 +977,39 @@ div[data-gadget-scope='header'] .ui-header {
}
}
// Top padding
// Top padding
padding: @mainpaddingdesktop;
padding: @main-margin-size-desktop;
padding-top: 9em;
// XXX TODO: replace em by pt, to have exact position
padding-top: 2 * @headerheight + @margin-size;
@media @tablet {
padding-top: 7em;
}
@media @smartphone {
@media @smartphone {
padding:
0.5em
;
padding:
@main-margin-size-smartphone
;
padding-top:
8
em;
padding-top:
6
em;
}
}
// Label
// Label
.ui-field-contain {
.ui-field-contain {
padding:
0.5em
0;
padding:
@margin-size
0;
div {
div {
width: 100%;
width: 100%;
}
}
label {
margin: 0 0 0.4em;
}
}
}
.ui-content-
title
{
.ui-content-
header-plain
{
font-size: 150%;
font-size: 150%;
}
}
ul.document-listview {
ul.document-listview {
margin-bottom: 2em;
&:not(:last-of-type) {
margin-bottom: @double-margin-size;
}
&:first-child {
margin-top: @margin-size;
}
li {
li {
border-color: rgba(0, 0, 0, 0.3);
border-color: rgba(0, 0, 0, 0.3);
border-width: 1px;
border-width: 1px;
...
@@ -1050,9 +1023,9 @@ div[data-gadget-scope='header'] .ui-header {
...
@@ -1050,9 +1023,9 @@ div[data-gadget-scope='header'] .ui-header {
font-family: FontAwesome;
font-family: FontAwesome;
content: "\f0da";
content: "\f0da";
text-align: right;
text-align: right;
float:right;
float:
right;
position: absolute;
position: absolute;
right:
1.5em
;
right:
@double-margin-size
;
}
}
}
}
}
}
...
@@ -1060,8 +1033,8 @@ div[data-gadget-scope='header'] .ui-header {
...
@@ -1060,8 +1033,8 @@ div[data-gadget-scope='header'] .ui-header {
a {
a {
display: block;
display: block;
position: relative;
position: relative;
padding:
0.7em 1em
;
padding:
@margin-size @double-margin-size
;
padding-right:
2.5em
;
padding-right:
@quadruple-margin-size
;
color: #222222;
color: #222222;
...
@@ -1085,11 +1058,11 @@ div[data-gadget-scope='header'] .ui-header {
...
@@ -1085,11 +1058,11 @@ div[data-gadget-scope='header'] .ui-header {
.ui-li-count {
.ui-li-count {
float: right;
float: right;
padding: 0
0.5em
;
padding: 0
@margin-size
;
border: 1px solid rgba(0, 0, 0, 0.14);
border: 1px solid rgba(0, 0, 0, 0.14);
border-radius: @radius;
border-radius: @radius;
position: absolute;
position: absolute;
right:
.5em
;
right:
@margin-size
;
}
}
}
}
...
@@ -1102,7 +1075,8 @@ div[data-gadget-scope='header'] .ui-header {
...
@@ -1102,7 +1075,8 @@ div[data-gadget-scope='header'] .ui-header {
width: 50%;
width: 50%;
}
}
.right {
.right {
padding-left: 2%;
// Put padding only in .right, to keep .center aligned with .left
padding-left: @quadruple-margin-size;
}
}
}
}
...
@@ -1129,14 +1103,17 @@ div[data-gadget-scope='header'] .ui-header {
...
@@ -1129,14 +1103,17 @@ div[data-gadget-scope='header'] .ui-header {
}
}
}
}
/*
@media @smartphone {
@media @smartphone {
.ui-field-contain {
.ui-field-contain {
padding: 0.8em 0;
//
padding: 0.8em 0;
// make sure there is a bottom border
// make sure there is a bottom border
// XXX TODO: border should be visible only if not input
// XXX TODO: border should be visible only if not input
// border-bottom: 1px solid rgba(0, 0, 0, 0.15);
// XXX How to not show it on last field?
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
}
}
}
*/
/* form validation (assuming label>span is used) */
/* form validation (assuming label>span is used) */
form label span {
form label span {
...
@@ -1151,18 +1128,18 @@ div[data-gadget-scope='header'] .ui-header {
...
@@ -1151,18 +1128,18 @@ div[data-gadget-scope='header'] .ui-header {
.relation-input {
.relation-input {
display: flex;
display: flex;
a {
a {
.hide_text();
.hide_text(
@width: @quadruple-margin-size
);
&::before {
&::before {
float: left;
float: left;
text-indent: 0;
text-indent: 0;
margin-left:
1em
;
margin-left:
@margin-size
;
}
}
display: block;
display: block;
line-height: @headerheight
;
padding-top: @half-margin-size
;
padding-bottom: @half-margin-size;
}
}
div {
div {
...
@@ -1179,16 +1156,18 @@ div[data-gadget-scope='header'] .ui-header {
...
@@ -1179,16 +1156,18 @@ div[data-gadget-scope='header'] .ui-header {
background-color: @panelbackgroundcolor;
background-color: @panelbackgroundcolor;
color: @white;
color: @white;
padding:
.4em
;
padding:
@half-margin-size
;
padding-left:
1em
;
padding-left:
@margin-size
;
display: block;
display: block;
text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
overflow: hidden;
white-space: nowrap;
white-space: nowrap;
&::before {
&::before {
width: @mainpaddingdesktop
;
padding-right: @margin-size
;
}
}
// No transition, as it doesn't feel right
// transition: background-color @transition-timing;
&:hover, &:active {
&:hover, &:active {
background-color: darken(@panelbackgroundcolor, 10%);
background-color: darken(@panelbackgroundcolor, 10%);
}
}
...
@@ -1214,6 +1193,8 @@ div[data-gadget-scope='header'] .ui-header {
...
@@ -1214,6 +1193,8 @@ div[data-gadget-scope='header'] .ui-header {
* Listbox
* Listbox
**********************************************/
**********************************************/
div[data-gadget-scope='erp5_searchfield'] {
div[data-gadget-scope='erp5_searchfield'] {
padding-top: @margin-size;
.ui-input-text {
.ui-input-text {
display: flex;
display: flex;
div[data-gadget-scope='input'] {
div[data-gadget-scope='input'] {
...
@@ -1221,9 +1202,7 @@ div[data-gadget-scope='erp5_searchfield'] {
...
@@ -1221,9 +1202,7 @@ div[data-gadget-scope='erp5_searchfield'] {
}
}
}
}
button {
button {
margin-left: 0.5em;
padding: @half-margin-size;
padding: 0.5em;
padding-left: 0;
}
}
}
}
...
@@ -1231,7 +1210,7 @@ div[data-gadget-scope='erp5_searchfield'] {
...
@@ -1231,7 +1210,7 @@ div[data-gadget-scope='erp5_searchfield'] {
.ui-table-header {
.ui-table-header {
display: flex;
display: flex;
padding-bottom:
0.5em
;
padding-bottom:
@margin-size
;
@media @smartphone {
@media @smartphone {
border-bottom: 2px solid rgba(0, 0, 0, 0.14902);
border-bottom: 2px solid rgba(0, 0, 0, 0.14902);
}
}
...
@@ -1243,11 +1222,11 @@ div[data-gadget-scope='erp5_searchfield'] {
...
@@ -1243,11 +1222,11 @@ div[data-gadget-scope='erp5_searchfield'] {
align-self: flex-end;
align-self: flex-end;
}
}
button {
button {
padding:
0.5em
;
padding:
@half-margin-size
;
border: 1px solid rgba(0, 0, 0, 0.14);
border: 1px solid rgba(0, 0, 0, 0.14);
border-radius: @radius;
border-radius: @radius;
margin-right:
0.5em
;
margin-right:
@margin-size
;
&:last-of-type {
&:last-of-type {
margin-right: 0;
margin-right: 0;
}
}
...
@@ -1257,7 +1236,7 @@ div[data-gadget-scope='erp5_searchfield'] {
...
@@ -1257,7 +1236,7 @@ div[data-gadget-scope='erp5_searchfield'] {
}
}
&::before {
&::before {
margin-right:
0.4em
;
margin-right:
@margin-size
;
@media @smartphone {
@media @smartphone {
float: left;
float: left;
...
@@ -1272,7 +1251,7 @@ div[data-gadget-scope='erp5_searchfield'] {
...
@@ -1272,7 +1251,7 @@ div[data-gadget-scope='erp5_searchfield'] {
text-align: left;
text-align: left;
th, td {
th, td {
line-height: 1.5em;
//
line-height: 1.5em;
vertical-align: middle;
vertical-align: middle;
}
}
...
@@ -1283,7 +1262,7 @@ div[data-gadget-scope='erp5_searchfield'] {
...
@@ -1283,7 +1262,7 @@ div[data-gadget-scope='erp5_searchfield'] {
// XXX Same than cells
// XXX Same than cells
tr { th {
tr { th {
padding: 0.4em 0.25em
;
padding: @margin-size @half-margin-size
;
}}
}}
// text-align: center;
// text-align: center;
...
@@ -1311,7 +1290,7 @@ div[data-gadget-scope='erp5_searchfield'] {
...
@@ -1311,7 +1290,7 @@ div[data-gadget-scope='erp5_searchfield'] {
@media @desktop, @tablet {
@media @desktop, @tablet {
a {
a {
display: block;
display: block;
padding:
0.4em 0.25em
;
padding:
@half-margin-size
;
}
}
}
}
...
@@ -1349,7 +1328,7 @@ div[data-gadget-scope='erp5_searchfield'] {
...
@@ -1349,7 +1328,7 @@ div[data-gadget-scope='erp5_searchfield'] {
content: "\f0da";
content: "\f0da";
font-size: 1.25em;
font-size: 1.25em;
position: absolute;
position: absolute;
right:
0.5em
;
right:
@margin-size
;
top: 50%;
top: 50%;
margin-top: -0.75em;
margin-top: -0.75em;
...
@@ -1384,7 +1363,7 @@ div[data-gadget-scope='erp5_searchfield'] {
...
@@ -1384,7 +1363,7 @@ div[data-gadget-scope='erp5_searchfield'] {
tfoot .ui-controlgroup-controls {
tfoot .ui-controlgroup-controls {
display: flex;
display: flex;
padding-top:
0.5em
;
padding-top:
@margin-size
;
border-top: 2px solid rgba(0, 0, 0, 0.14902);
border-top: 2px solid rgba(0, 0, 0, 0.14902);
span {
span {
...
@@ -1393,11 +1372,11 @@ div[data-gadget-scope='erp5_searchfield'] {
...
@@ -1393,11 +1372,11 @@ div[data-gadget-scope='erp5_searchfield'] {
text-align: right;
text-align: right;
}
}
a {
a {
padding:
0.5em
;
padding:
@margin-size
;
border: 1px solid rgba(0, 0, 0, 0.14);
border: 1px solid rgba(0, 0, 0, 0.14);
border-radius: @radius;
border-radius: @radius;
margin-right:
0.5em
;
margin-right:
@margin-size
;
&:last-of-type {
&:last-of-type {
margin-right: 0;
margin-right: 0;
}
}
...
@@ -1407,15 +1386,15 @@ div[data-gadget-scope='erp5_searchfield'] {
...
@@ -1407,15 +1386,15 @@ div[data-gadget-scope='erp5_searchfield'] {
}
}
@media @smartphone {
@media @smartphone {
.hide_text(@width:
2em
);
.hide_text(@width:
initial
);
}
}
&::before {
&::before {
margin-right:
0.4em
;
margin-right:
@margin-size
;
@media @smartphone {
@media @smartphone {
float: left;
float: left;
text-indent:
0.3em
;
text-indent:
@margin-size
;
}
}
}
}
}
}
...
@@ -1457,10 +1436,7 @@ div[data-gadget-scope='erp5_searchfield'] {
...
@@ -1457,10 +1436,7 @@ div[data-gadget-scope='erp5_searchfield'] {
}
}
.ui-icon-warning {
.ui-icon-warning {
// XXX does not work...
background-color: @coloraccent !important;
background: none repeat scroll 0 0 #e4ebf1;
border-color: rgba(0, 0, 0, 0.3);
color: #777;
&::before {
&::before {
content: "\f071";
content: "\f071";
}
}
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment