From 3578e49d62a630d250880dc6f2dd04ac8920ca2e Mon Sep 17 00:00:00 2001
From: Romain Courteaud <romain@nexedi.com>
Date: Mon, 5 Feb 2018 15:18:26 +0000
Subject: [PATCH] [erp5_web_renderjs_ui] Improve the text contrast
Make the label, listbox, panel more readable.
---
.../rjs_gadget_erp5_nojqm_css.css | 31 ++++++++++---------
.../rjs_gadget_erp5_nojqm_css.xml | 4 +--
.../erp5_web_renderjs_ui/erp5css.less.txt | 11 ++++---
3 files changed, 24 insertions(+), 22 deletions(-)
diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css
index 9ecdabc4b5..2b50dd1dc6 100644
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css
@@ -452,7 +452,7 @@ img {
* Gadget: panel
**********************************************/
div[data-gadget-scope='panel'] {
- background-color: #444444;
+ background-color: #393939;
color: #FFFFFF;
width: 180pt;
min-height: 100%;
@@ -494,7 +494,7 @@ div[data-gadget-scope='panel'] div[data-role="header"] a {
overflow: hidden;
text-indent: -9999px;
white-space: nowrap;
- background-color: #444444;
+ background-color: #393939;
display: block;
line-height: 30pt;
color: #FFFFFF;
@@ -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"] {
color: #FFFFFF !important;
- background-color: #777777 !important;
+ background-color: #767676 !important;
}
div[data-gadget-scope='panel'] img {
text-align: left;
@@ -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:active {
color: #FFFFFF;
- background-color: #2b2b2b;
+ background-color: #1F1F1F;
}
div[data-gadget-scope='panel'] ul li a::before {
width: 24pt;
}
div[data-gadget-scope='panel'] dl {
- background-color: #777777;
+ background-color: #767676;
color: #1F1F1F;
transform-origin: 50% 0;
transform: scaleY(0);
@@ -578,6 +578,7 @@ div[data-gadget-scope='panel'] dl dt {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
+ text-transform: uppercase;
}
div[data-gadget-scope='panel'] dl dt::before {
width: 24pt;
@@ -1011,7 +1012,7 @@ div[data-gadget-scope='header'] .ui-header ul {
padding: 6pt;
margin-top: 30pt;
margin-right: 12pt;
- background-color: #777777;
+ background-color: #767676;
color: #FFFFFF;
border-radius: 0.325em;
border-width: 1px;
@@ -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']:focus {
- background-color: #919191;
+ background-color: #909090;
}
.gadget-content button[name='action_update']:active {
- background-color: #aaaaaa;
+ background-color: #a9a9a9;
}
@media not screen and (max-width: 85em) {
div[data-role='page']:not(.desktop-panel-hidden) .gadget-content {
@@ -1144,7 +1145,7 @@ div[data-gadget-scope='header'] .ui-header ul {
}
}
.gadget-content .ui-field-contain > label {
- color: #777777;
+ color: #767676;
}
.gadget-content .required > .ui-field-contain > label {
font-weight: bold;
@@ -1251,7 +1252,7 @@ div[data-gadget-scope='header'] .ui-header ul {
}
.relation-input ul li {
cursor: pointer;
- background-color: #444444;
+ background-color: #393939;
color: #FFFFFF;
padding: 3pt;
padding-left: 6pt;
@@ -1265,7 +1266,7 @@ div[data-gadget-scope='header'] .ui-header ul {
}
.relation-input ul li:hover,
.relation-input ul li:active {
- background-color: #2b2b2b;
+ background-color: #1F1F1F;
}
/**********************************************
* Gadget: datetime field
@@ -1326,11 +1327,11 @@ div[data-gadget-scope='erp5_searchfield'] div.search_parsed_value button {
}
@media not screen and (min-width: 45em) {
.document_table .ui-table-header {
- border-bottom: 2px solid #0E81C2;
+ border-bottom: 2px solid #085078;
}
}
.document_table .ui-table-header h1 {
- color: #777777;
+ color: #767676;
flex: 2;
align-self: flex-end;
}
@@ -1371,7 +1372,7 @@ div[data-gadget-scope='erp5_searchfield'] div.search_parsed_value button {
}
.document_table table thead,
.document_table table tfoot {
- background-color: #0E81C2;
+ background-color: #085078;
color: #FFFFFF;
}
.document_table table thead a,
@@ -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 th:first-child ~ td a {
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 th:first-child ~ th:not(:last-child) a:not(:empty):after,
diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.xml b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.xml
index 47a4dbf9eb..fee62b15cb 100644
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.xml
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.xml
@@ -242,7 +242,7 @@
</item>
<item>
<key> <string>serial</string> </key>
- <value> <string>965.14626.55645.31283</string> </value>
+ <value> <string>965.19250.34599.40550</string> </value>
</item>
<item>
<key> <string>state</string> </key>
@@ -260,7 +260,7 @@
</tuple>
<state>
<tuple>
- <float>1517562628.45</float>
+ <float>1517843643.77</float>
<string>UTC</string>
</tuple>
</state>
diff --git a/bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt b/bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt
index 2dada4cdb1..0846a0e03a 100644
--- a/bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt
+++ b/bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt
@@ -7,7 +7,7 @@
@white: #FFFFFF;
@txtgreen: #22CC22;
@txtsubgrey: #575757;
-@grey: #777777;
+@grey: #767676;
@backgroundgreen: #37A419;
@@ -31,8 +31,8 @@
@colorfocus: #3388cc;
@colorblocklinkbackground: #e0e0e0;
-@panelbackgroundcolor: #444444;
-@paneldarkerbackgroundcolor: darken(@panelbackgroundcolor, 10%);
+@paneldarkerbackgroundcolor: @black;
+@panelbackgroundcolor: lighten(@paneldarkerbackgroundcolor, 10%);
@panelcontextuallinkcolor: @colorforeground;
@panelcontextuallinkcolorbackground: @colorbackground;
@@ -718,6 +718,7 @@ div[data-gadget-scope='panel'] {
dt {
.alignwithicon();
+ text-transform: uppercase;
}
dd {
@@ -1545,7 +1546,7 @@ div[data-gadget-scope='erp5_searchfield'] {
padding-top: @half-margin-size;
padding-bottom: @half-margin-size;
@media @smartphone {
- border-bottom: 2px solid @colorsubheaderbackground;
+ border-bottom: 2px solid @colorheaderbackground;
}
h1 {
@@ -1590,7 +1591,7 @@ div[data-gadget-scope='erp5_searchfield'] {
}
thead, tfoot {
- background-color: @colorsubheaderbackground;
+ background-color: @colorheaderbackground;
color: @white;
a {
--
2.30.9