[erp5_web_renderjs_ui] Factorize active, hover, focus states

Drop gradient image, which can not be animated with css transition

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_css.css

@@ -238,6 +238,10 @@ a[href=""] {
 a:hover {
   text-decoration: underline;
 }
+a:focus {
+  outline-offset: -2px;
+  outline: 2px solid #3388cc;
+}
 a[accesskey]:after {
   content: " [" attr(accesskey) "] ";
 }
@@ -299,7 +303,7 @@ textarea:focus {
 }
 input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]):focus,
 textarea:focus {
-  box-shadow: 0 0 12px 			#3388cc;
+  box-shadow: 0 0 12px #3388cc;
 }
 select {
   width: 100%;
@@ -318,10 +322,8 @@ select {
   outline-offset: 0;
 }
 select:hover,
-select:active,
-select:focus {
+select:active {
   background-color: #e0e0e0;
-  background: linear-gradient(#f5f5f5, #eeeeee);
 }
 textarea {
   height: 15em;
@@ -350,6 +352,7 @@ button {
   border: none;
   background-color: #FFFFFF;
   color: #1F1F1F;
+  transition: background-color 0.2s ease-out;
   cursor: pointer;
 }
 input[type=submit]::-moz-focus-inner,
@@ -357,6 +360,17 @@ button::-moz-focus-inner {
   border: 0px;
   padding: 0px;
 }
+input[type=submit]:hover,
+button:hover,
+input[type=submit]:focus,
+button:focus {
+  outline: none;
+  background-color: #e0e0e0;
+}
+input[type=submit]:active,
+button:active {
+  background-color: #adadad;
+}
 /**********************************************
 * Media
 **********************************************/
@@ -465,6 +479,10 @@ div[data-gadget-scope='panel'] ul li a {
 div[data-gadget-scope='panel'] ul li a::before {
   width: 2em;
 }
+div[data-gadget-scope='panel'] ul li a:hover,
+div[data-gadget-scope='panel'] ul li a:active {
+  background-color: #2b2b2b;
+}
 /**********************************************
 * Gadget: editor panel
 **********************************************/
@@ -539,18 +557,23 @@ div[data-gadget-scope='header'] .ui-header {
   display: flex;
   width: 100%;
   flex-flow: row wrap;
+  color: #FFFFFF;
 }
 @media only screen and (min-width: 62em) {
   div[data-gadget-scope='header'] .ui-header {
     margin-left: 17em;
   }
 }
+div[data-gadget-scope='header'] .ui-header button,
+div[data-gadget-scope='header'] .ui-header a {
+  color: #FFFFFF;
+  background-color: #085078;
+}
 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 button:active,
 div[data-gadget-scope='header'] .ui-header a:active {
-  background-color: #085078;
-  background-image: linear-gradient(#0E81C2, #85D8CE);
+  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 {
@@ -560,8 +583,6 @@ div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls button,
 div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a {
   display: block;
   line-height: 2.6em;
-  color: #FFFFFF;
-  background-color: #085078;
   width: 8em;
 }
 @media only screen and (max-width: 28em) {
@@ -613,7 +634,6 @@ div[data-gadget-scope='header'] .ui-header h1 {
   line-height: 2.6em;
   flex: 1;
   background-color: #085078;
-  color: #FFFFFF;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -628,7 +648,6 @@ div[data-gadget-scope='header'] .ui-header h1 > span {
 }
 div[data-gadget-scope='header'] .ui-header h1 a {
   display: block;
-  color: #FFFFFF;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -654,6 +673,9 @@ div[data-gadget-scope='header'] .ui-header ul {
   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%;
@@ -669,7 +691,6 @@ div[data-gadget-scope='header'] .ui-header ul {
     min-width: 5em;
     line-height: 2.6em;
     height: 100%;
-    color: #f8fff3;
     white-space: nowrap;
     overflow: hidden;
   }
@@ -689,7 +710,6 @@ div[data-gadget-scope='header'] .ui-header ul {
     display: block;
     padding-top: 0.8em;
     padding-bottom: 0.8em;
-    color: #f8fff3;
     white-space: nowrap;
     overflow: hidden;
   }
@@ -756,13 +776,8 @@ div[data-gadget-scope='header'] .ui-header ul {
   float: right;
 }
 .gadget-content ul.document-listview li a:hover,
-.gadget-content ul.document-listview li a:active,
-.gadget-content ul.document-listview li a:focus {
+.gadget-content ul.document-listview li a:active {
   background-color: #e0e0e0;
-  background: linear-gradient(#f5f5f5, #eeeeee);
-}
-.gadget-content ul.document-listview li a:focus {
-  box-shadow: 0 0 12px 			#3388cc;
 }
 .gadget-content ul.document-listview li:first-child {
   border-top-left-radius: 0.325em;
@@ -891,11 +906,11 @@ div[data-gadget-scope='erp5_searchfield'] button {
   color: #1F1F1F;
 }
 .document_table table tbody tr:nth-child(even) {
-  background-color: #eeeeee;
-  background-color: rgba(0, 0, 0, 0.04);
+  background-color: #f2f2f2;
 }
-.document_table table tbody tr:hover {
-  background: #e4ebf1;
+.document_table table tbody tr:hover,
+.document_table table tbody tr:active {
+  background-color: #e0e0e0;
 }
 @media only screen and (min-width: 62em), only screen and (min-width: 28em) and (max-width: 62em) {
   .document_table table tbody a {
@@ -939,7 +954,7 @@ div[data-gadget-scope='erp5_searchfield'] button {
     right: 0.5em;
     top: 50%;
     margin-top: -0.75em;
-    background: #FFFFFF;
+    background-color: #FFFFFF;
     border-radius: 0.5em;
     width: 1em;
     text-align: center;
@@ -983,6 +998,10 @@ div[data-gadget-scope='erp5_searchfield'] button {
 .document_table table tfoot .ui-controlgroup-controls a:last-of-type {
   margin-right: 0;
 }
+.document_table table tfoot .ui-controlgroup-controls a:hover,
+.document_table table tfoot .ui-controlgroup-controls a:active {
+  background-color: #e0e0e0;
+}
 @media only screen and (max-width: 28em) {
   .document_table table tfoot .ui-controlgroup-controls a {
     width: 2em;

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_css.xml

@@ -230,7 +230,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>952.27049.47586.45516</string> </value>
+                <value> <string>952.31797.52108.19336</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1467967442.23</float>
+                        <float>1468252822.53</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt

@@ -27,6 +27,9 @@
 @colorsubheaderbackground: #0E81C2;
 @colorsubheaderlink: #f8fff3;
 
+@colorfocus: #3388cc;
+@colorblocklinkbackground: #e0e0e0;
+
 @panelbackgroundcolor: #444444;
 
 @radius: .325em;
@@ -105,7 +108,6 @@
 
 
 
-
 
 
 /**********************************************
@@ -267,6 +269,10 @@ mark {
   &:hover {
     text-decoration: underline;
   }
+  &:focus {
+    outline-offset: -2px;
+    outline: 2px @border-type @colorfocus;
+  }
 }
 
 a {
@@ -336,11 +342,10 @@ input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio])
   }
 
   &:active, &:focus {
-    // outline: 2px @border-type @colortextboxbackground;
     outline-offset: 0;
   }
   &:focus {
-    box-shadow: 0 0 12px 			#3388cc;
+    box-shadow: 0 0 12px @colorfocus;
   }
 }
 
@@ -364,10 +369,9 @@ select {
 
    outline-offset: 0;
 
-        &:hover, &:active, &:focus {
-  background-color: #e0e0e0;
-  background: linear-gradient(#f5f5f5, #eeeeee);
-        }
+   &:hover, &:active {
+     background-color: @colorblocklinkbackground;
+   }
 }
 
 textarea {
@@ -405,6 +409,16 @@ input[type=submit], button {
   background-color: @colorbackground;
   color: @colorforeground;
 
+  transition: background-color 0.2s ease-out;
+  &:hover, &:focus {
+    outline: none;
+    background-color: @colorblocklinkbackground;
+  }
+  &:active {
+    // box-shadow: inset 0 0 0 5px darken(@colorblocklinkbackground, 10%);
+    background-color: darken(@colorblocklinkbackground, 20%);
+  }
+
   cursor: pointer;
 }
 
@@ -527,6 +541,9 @@ div[data-gadget-scope='panel'] {
         &::before {
           width: 2em;
         }
+        &:hover, &:active {
+          background-color: darken(@panelbackgroundcolor, 10%);
+        }
       }
     }
   }
@@ -636,10 +653,13 @@ div[data-gadget-scope='header'] .ui-header {
     margin-left: @panelwidth;
   }
 
+  color: @white;
+
   button, a {
+    color: @white;
+    background-color: @colorheaderbackground;
     &:hover, &:active {
-      background-color: @colorheaderbackground;
-      background-image: linear-gradient(#0E81C2, #85D8CE);
+      background-color: lighten(@colorheaderbackground, 20%);
     }
   }
 
@@ -656,8 +676,6 @@ div[data-gadget-scope='header'] .ui-header {
       display: block;
 
       line-height: @headerheight;
-      color: @white;
-      background-color: @colorheaderbackground;
 
       // https://css-tricks.com/forums/topic/hide-text-but-not-the-before-pseudo-class/
       // Default size
@@ -706,9 +724,8 @@ div[data-gadget-scope='header'] .ui-header {
     text-align: left;
     line-height: @headerheight;
     flex: 1;
-    background-color: @colorheaderbackground;
 
-    color: @white;
+    background-color: @colorheaderbackground;
 
     // XXX Restore border
     // border-left: 1px solid rgba(255, 255, 255, 0.55);
@@ -729,7 +746,6 @@ div[data-gadget-scope='header'] .ui-header {
     // Clickable title
     a {
       display: block;
-      color: @white;
 
       // Do not put link on multi line in case of small screen
       white-space: nowrap;
@@ -765,6 +781,10 @@ div[data-gadget-scope='header'] .ui-header {
     display: table;
     table-layout: fixed;
 
+    a {
+      background-color: @colorsubheaderbackground;
+    }
+
     @media @desktop {
     height: 100%;
 
@@ -782,9 +802,6 @@ div[data-gadget-scope='header'] .ui-header {
         line-height: @headerheight;
         height: 100%;
 
-
-        color: @colorsubheaderlink;
-
         white-space: nowrap;
         overflow: hidden;
 
@@ -814,8 +831,6 @@ div[data-gadget-scope='header'] .ui-header {
           padding-bottom: 0.2em;
         }
 
-        color: @colorsubheaderlink;
-
         white-space: nowrap;
         overflow: hidden;
 
@@ -885,12 +900,8 @@ div[data-gadget-scope='header'] .ui-header {
           text-align: right;
           float:right;
         }
-        &:hover, &:active, &:focus {
-  background-color: #e0e0e0;
-  background: linear-gradient(#f5f5f5, #eeeeee);
-        }
-        &:focus {
-	box-shadow: 0 0 12px 			#3388cc;
+        &:hover, &:active {
+          background-color: @colorblocklinkbackground;
         }
       }
       &:first-child {
@@ -1046,11 +1057,10 @@ div[data-gadget-scope='erp5_searchfield'] {
 
       tr {
         &:nth-child(even) {
-          background-color: #eeeeee;
-          background-color: rgba(0, 0, 0, .04);
+          background-color: darken(@colorbackground, 5%);
         }
-        &:hover {
-          background: #e4ebf1;
+        &:hover, &:active {
+          background-color: @colorblocklinkbackground
         }
       }
 
@@ -1099,7 +1109,7 @@ div[data-gadget-scope='erp5_searchfield'] {
                   top: 50%;
                   margin-top: -0.75em;
 
-                  background: @colorbackground;
+                  background-color: @colorbackground;
                   border-radius: 0.5em;
                   width: 1em;
                   text-align: center;
@@ -1148,6 +1158,10 @@ div[data-gadget-scope='erp5_searchfield'] {
           margin-right: 0;
         }
 
+        &:hover, &:active {
+          background-color: @colorblocklinkbackground;
+        }
+
         @media @smartphone {
           .hide_text(@width: 2em);
         }