Skip to content

erp5
erp5
Commit 3578e49d authored by Romain Courteaud's avatar Romain Courteaud
Browse files
Options

[erp5_web_renderjs_ui] Improve the text contrast 

Make the label, listbox, panel more readable.
parent 462d42ff
Hide whitespace changes
Inline Side-by-side
Showing with 24 additions and 22 deletions
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css
View file @ 3578e49d
...@@ -452,7 +452,7 @@ img { ...@@ -452,7 +452,7 @@ img {
* Gadget: panel * Gadget: panel
**********************************************/ **********************************************/
div[data-gadget-scope='panel'] { div[data-gadget-scope='panel'] {
background-color: #444444; background-color: #393939;
color: #FFFFFF; color: #FFFFFF;
width: 180pt; width: 180pt;
min-height: 100%; min-height: 100%;
...@@ -494,7 +494,7 @@ div[data-gadget-scope='panel'] div[data-role="header"] a { ...@@ -494,7 +494,7 @@ div[data-gadget-scope='panel'] div[data-role="header"] a {
overflow: hidden; overflow: hidden;
text-indent: -9999px; text-indent: -9999px;
white-space: nowrap; white-space: nowrap;
background-color: #444444; background-color: #393939;
display: block; display: block;
line-height: 30pt; line-height: 30pt;
color: #FFFFFF; color: #FFFFFF;
...@@ -519,7 +519,7 @@ div[data-gadget-scope='panel'] div[data-gadget-scope='erp5_searchfield'] button ...@@ -519,7 +519,7 @@ div[data-gadget-scope='panel'] div[data-gadget-scope='erp5_searchfield'] button
} }
div[data-gadget-scope='panel'] div[data-gadget-scope='erp5_searchfield'] input[type="search"] { div[data-gadget-scope='panel'] div[data-gadget-scope='erp5_searchfield'] input[type="search"] {
color: #FFFFFF !important; color: #FFFFFF !important;
background-color: #777777 !important; background-color: #767676 !important;
} }
div[data-gadget-scope='panel'] img { div[data-gadget-scope='panel'] img {
text-align: left; text-align: left;
...@@ -557,13 +557,13 @@ div[data-gadget-scope='panel'] ul li a.active { ...@@ -557,13 +557,13 @@ div[data-gadget-scope='panel'] ul li a.active {
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 {
color: #FFFFFF; color: #FFFFFF;
background-color: #2b2b2b; background-color: #1F1F1F;
} }
div[data-gadget-scope='panel'] ul li a::before { div[data-gadget-scope='panel'] ul li a::before {
width: 24pt; width: 24pt;
} }
div[data-gadget-scope='panel'] dl { div[data-gadget-scope='panel'] dl {
background-color: #777777; background-color: #767676;
color: #1F1F1F; color: #1F1F1F;
transform-origin: 50% 0; transform-origin: 50% 0;
transform: scaleY(0); transform: scaleY(0);
...@@ -578,6 +578,7 @@ div[data-gadget-scope='panel'] dl dt { ...@@ -578,6 +578,7 @@ div[data-gadget-scope='panel'] dl dt {
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-transform: uppercase;
} }
div[data-gadget-scope='panel'] dl dt::before { div[data-gadget-scope='panel'] dl dt::before {
width: 24pt; width: 24pt;
...@@ -1011,7 +1012,7 @@ div[data-gadget-scope='header'] .ui-header ul { ...@@ -1011,7 +1012,7 @@ div[data-gadget-scope='header'] .ui-header ul {
padding: 6pt; padding: 6pt;
margin-top: 30pt; margin-top: 30pt;
margin-right: 12pt; margin-right: 12pt;
background-color: #777777; background-color: #767676;
color: #FFFFFF; color: #FFFFFF;
border-radius: 0.325em; border-radius: 0.325em;
border-width: 1px; border-width: 1px;
...@@ -1020,10 +1021,10 @@ div[data-gadget-scope='header'] .ui-header ul { ...@@ -1020,10 +1021,10 @@ div[data-gadget-scope='header'] .ui-header ul {
} }
.gadget-content button[name='action_update']:hover, .gadget-content button[name='action_update']:hover,
.gadget-content button[name='action_update']:focus { .gadget-content button[name='action_update']:focus {
background-color: #919191; background-color: #909090;
} }
.gadget-content button[name='action_update']:active { .gadget-content button[name='action_update']:active {
background-color: #aaaaaa; background-color: #a9a9a9;
} }
@media not screen and (max-width: 85em) { @media not screen and (max-width: 85em) {
div[data-role='page']:not(.desktop-panel-hidden) .gadget-content { div[data-role='page']:not(.desktop-panel-hidden) .gadget-content {
...@@ -1144,7 +1145,7 @@ div[data-gadget-scope='header'] .ui-header ul { ...@@ -1144,7 +1145,7 @@ div[data-gadget-scope='header'] .ui-header ul {
} }
} }
.gadget-content .ui-field-contain > label { .gadget-content .ui-field-contain > label {
color: #777777; color: #767676;
} }
.gadget-content .required > .ui-field-contain > label { .gadget-content .required > .ui-field-contain > label {
font-weight: bold; font-weight: bold;
...@@ -1251,7 +1252,7 @@ div[data-gadget-scope='header'] .ui-header ul { ...@@ -1251,7 +1252,7 @@ div[data-gadget-scope='header'] .ui-header ul {
} }
.relation-input ul li { .relation-input ul li {
cursor: pointer; cursor: pointer;
background-color: #444444; background-color: #393939;
color: #FFFFFF; color: #FFFFFF;
padding: 3pt; padding: 3pt;
padding-left: 6pt; padding-left: 6pt;
...@@ -1265,7 +1266,7 @@ div[data-gadget-scope='header'] .ui-header ul { ...@@ -1265,7 +1266,7 @@ div[data-gadget-scope='header'] .ui-header ul {
} }
.relation-input ul li:hover, .relation-input ul li:hover,
.relation-input ul li:active { .relation-input ul li:active {
background-color: #2b2b2b; background-color: #1F1F1F;
} }
/********************************************** /**********************************************
* Gadget: datetime field * Gadget: datetime field
...@@ -1326,11 +1327,11 @@ div[data-gadget-scope='erp5_searchfield'] div.search_parsed_value button { ...@@ -1326,11 +1327,11 @@ div[data-gadget-scope='erp5_searchfield'] div.search_parsed_value button {
} }
@media not screen and (min-width: 45em) { @media not screen and (min-width: 45em) {
.document_table .ui-table-header { .document_table .ui-table-header {
border-bottom: 2px solid #0E81C2; border-bottom: 2px solid #085078;
} }
} }
.document_table .ui-table-header h1 { .document_table .ui-table-header h1 {
color: #777777; color: #767676;
flex: 2; flex: 2;
align-self: flex-end; align-self: flex-end;
} }
...@@ -1371,7 +1372,7 @@ div[data-gadget-scope='erp5_searchfield'] div.search_parsed_value button { ...@@ -1371,7 +1372,7 @@ div[data-gadget-scope='erp5_searchfield'] div.search_parsed_value button {
} }
.document_table table thead, .document_table table thead,
.document_table table tfoot { .document_table table tfoot {
background-color: #0E81C2; background-color: #085078;
color: #FFFFFF; color: #FFFFFF;
} }
.document_table table thead a, .document_table table thead a,
...@@ -1467,7 +1468,7 @@ div[data-gadget-scope='erp5_searchfield'] div.search_parsed_value button { ...@@ -1467,7 +1468,7 @@ div[data-gadget-scope='erp5_searchfield'] div.search_parsed_value button {
.document_table table tbody tr td:first-child ~ td a, .document_table table tbody tr td:first-child ~ td a,
.document_table table tbody tr th:first-child ~ td a { .document_table table tbody tr th:first-child ~ td a {
pointer-events: none; pointer-events: none;
color: #777777; color: #767676;
} }
.document_table table tbody tr td:first-child ~ th:not(:last-child) a:not(:empty):after, .document_table table tbody tr td:first-child ~ th:not(:last-child) a:not(:empty):after,
.document_table table tbody tr th:first-child ~ th:not(:last-child) a:not(:empty):after, .document_table table tbody tr th:first-child ~ th:not(:last-child) a:not(:empty):after,
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.xml
View file @ 3578e49d
...@@ -242,7 +242,7 @@ ...@@ -242,7 +242,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>965.14626.55645.31283</string> </value> <value> <string>965.19250.34599.40550</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -260,7 +260,7 @@ ...@@ -260,7 +260,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1517562628.45</float> <float>1517843643.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 @ 3578e49d
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
@white: #FFFFFF; @white: #FFFFFF;
@txtgreen: #22CC22; @txtgreen: #22CC22;
@txtsubgrey: #575757; @txtsubgrey: #575757;
@grey: #777777; @grey: #767676;
@backgroundgreen: #37A419; @backgroundgreen: #37A419;
...@@ -31,8 +31,8 @@ ...@@ -31,8 +31,8 @@
@colorfocus: #3388cc; @colorfocus: #3388cc;
@colorblocklinkbackground: #e0e0e0; @colorblocklinkbackground: #e0e0e0;
@panelbackgroundcolor: #444444; @paneldarkerbackgroundcolor: @black;
@paneldarkerbackgroundcolor: darken(@panelbackgroundcolor, 10%); @panelbackgroundcolor: lighten(@paneldarkerbackgroundcolor, 10%);
@panelcontextuallinkcolor: @colorforeground; @panelcontextuallinkcolor: @colorforeground;
@panelcontextuallinkcolorbackground: @colorbackground; @panelcontextuallinkcolorbackground: @colorbackground;
...@@ -718,6 +718,7 @@ div[data-gadget-scope='panel'] { ...@@ -718,6 +718,7 @@ div[data-gadget-scope='panel'] {
dt { dt {
.alignwithicon(); .alignwithicon();
text-transform: uppercase;
} }
dd { dd {
...@@ -1545,7 +1546,7 @@ div[data-gadget-scope='erp5_searchfield'] { ...@@ -1545,7 +1546,7 @@ div[data-gadget-scope='erp5_searchfield'] {
padding-top: @half-margin-size; padding-top: @half-margin-size;
padding-bottom: @half-margin-size; padding-bottom: @half-margin-size;
@media @smartphone { @media @smartphone {
border-bottom: 2px solid @colorsubheaderbackground; border-bottom: 2px solid @colorheaderbackground;
} }
h1 { h1 {
...@@ -1590,7 +1591,7 @@ div[data-gadget-scope='erp5_searchfield'] { ...@@ -1590,7 +1591,7 @@ div[data-gadget-scope='erp5_searchfield'] {
} }
thead, tfoot { thead, tfoot {
background-color: @colorsubheaderbackground; background-color: @colorheaderbackground;
color: @white; color: @white;
a { a {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7