use erp5css.less instead gadget_erp5_nojqm.css

.gitignore

+gadget_erp5_nojqm.css
 renderjs.js
 rsvp.js
 jio.js

Gruntfile.js

@@ -28,6 +28,7 @@ module.exports = function (grunt) {
   grunt.loadNpmTasks('grunt-contrib-qunit');
   grunt.loadNpmTasks('grunt-contrib-connect');
   grunt.loadNpmTasks('grunt-contrib-copy');
+  grunt.loadNpmTasks('grunt-contrib-less');
   grunt.loadNpmTasks('grunt-open');
 
   grunt.initConfig({
@@ -80,6 +81,13 @@ module.exports = function (grunt) {
         }
       }
     },
+    less: {
+      production: {
+        files: {
+          'gadget_erp5_nojqm.css': 'erp5css.less'
+        }
+      }
+    },
 
     copy: {
       dependencies: {
@@ -153,7 +161,7 @@ module.exports = function (grunt) {
   });
 
   grunt.registerTask('default', ['all']);
-  grunt.registerTask('all', ['lint']);
+  grunt.registerTask('all', ['less', 'lint']);
   grunt.registerTask('lint', ['jslint']);
   grunt.registerTask('test', ['copy', 'qunit']);
   grunt.registerTask('server', ['connect:client', 'watch']);

gadget_erp5_nojqm.css → erp5css.less

 /**********************************************
 * Colors
 **********************************************/
+@black: #1F1F1F;
+@txtorange: #FF6600;
+@txtblue: #2FA2E4;
+@white: #FFFFFF;
+@txtgreen: #22CC22;
+@txtsubgrey: #575757;
+@grey: #767676;
+@backgroundgreen: #37A419;
+
+
+// Default background for pages and other controls
+@colorbackground: @white;
+// Default foreground and border color
+@colorforeground: @black;
+@colortextselection: @txtgreen;
+// Foreground color to single-out items of interest
+@coloraccent: @txtorange;
+@colorlink: @txtblue;
+
+@colortextboxforeground: @colorforeground;
+@colortextboxplaceholder: @txtsubgrey;
+@colortextboxbackground: @colorbackground;
+
+@colorheaderbackground: #085078;
+@colorsubheaderbackground: #0E81C2;
+@colorsubheaderlink: #f8fff3;
+
+@colorfocus: #3388cc;
+@colorblocklinkbackground: #e0e0e0;
+
+@paneldarkerbackgroundcolor: @black;
+@panelbackgroundcolor: lighten(@paneldarkerbackgroundcolor, 10%);
+
+@panelcontextuallinkcolor: @colorforeground;
+@panelcontextuallinkcolorbackground: @colorbackground;
+
+@listboxbordercolor: rgba(0, 0, 0, 0.14902);
+
+@radius: .325em;
+
+// XXX BUG Generate wrong align on firefox smartphone
+@headerheight: @smartphone-font-size * 2 + @margin-size;
+@headerheight-smartphone: 2 * @headerheight + @margin-size + 1;
+@headerheight-tablet: 2 * @headerheight + 2 * @margin-size + 1;
+
+@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;
+@headertitlemiddlewidth: @double-margin-size;
+@headertitleleftmiddlemargin: @main-margin-size-desktop;
+@headertitlerightsmallmargin: @margin-size * 3 -  @headertitlemiddlewidth;
+
+@headertitlespanleftlargemargin: @double-margin-size + 2;
+@headertitlespanleftsmallmargin: @margin-size;
+@headertitlespanleftlargepadding: @quadruple-margin-size;
+@headertitlespanleftmiddlepadding: @triple-margin-size - 2;
+@headertitlespanleftsmallpadding: @double-margin-size;
+
+// XXX desktop: 12em
+@panelwidth: @margin-size * 30;
+// @panelwidth: 15em;
+
+@smartphone: ~"not screen and (min-width: 45em)";
+@tablet: ~"only screen and (min-width: 45em) and (max-width: 85em)";
+@desktop: ~"not screen and (max-width: 85em)";
+
+
 /**********************************************
 * Fonts (font-family)
 **********************************************/
+@sans-serif: 'Open Sans', Helvetica, Arial, sans-serif;
+@monospace: "Courier New", Courier, monospace;
+
 /**********************************************
 * Shared
 **********************************************/
+@font-family: @sans-serif;
+// Increase font size to prevent IOS auto zooming when focusing input field
+@smartphone-font-size: 12pt;
+// Reduce font size on tablet/desktop,
+// as users want to increase information's density on big screen
+@tablet-font-size: 11pt;
+@desktop-font-size: 10pt;
+@font-weight: 400;
+
+@line-height: 1.5;
+
+@header-font-weight: 700;
+
+@border-size: 1px;
+@border-type: solid;
+@border-transparency: .3;
+@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;
+
+@invalid-border: @border-size @border-type @coloraccent;
+@invalid-box-shadow: 0 0 @double-margin-size @coloraccent;
+
+@quarter-margin-size: 1.5pt;
+@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
+///////////////////////////////////////////////
+
+.hide_text(@width: 3em) {
+  // https://css-tricks.com/forums/topic/hide-text-but-not-the-before-pseudo-class/
+  & when (@width > 0) {
+    width: @width;
+  }
+  overflow: hidden;
+  text-indent: -9999px;
+  white-space: nowrap;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 /**********************************************
 * http://meyerweb.com/eric/tools/css/reset/ 
 *   v2.0 | 20110126
 *   License: none (public domain)
 **********************************************/
-html,
-body,
-div,
-span,
-applet,
-object,
-iframe,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-blockquote,
-pre,
-a,
-abbr,
-acronym,
-address,
-big,
-cite,
-code,
-del,
-dfn,
-em,
-img,
-ins,
-kbd,
-q,
-s,
-samp,
-small,
-strike,
-strong,
-sub,
-sup,
-tt,
-var,
-b,
-u,
-i,
-center,
-dl,
-dt,
-dd,
-ol,
-ul,
-li,
-fieldset,
-form,
-label,
-legend,
-table,
-caption,
-tbody,
-tfoot,
-thead,
-tr,
-th,
-td,
-article,
-aside,
-canvas,
-details,
-embed,
-figure,
-figcaption,
-footer,
-header,
-hgroup,
-menu,
-nav,
-output,
-ruby,
-section,
-summary,
-time,
-mark,
-audio,
-video {
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
 	margin: 0;
 	padding: 0;
 	border: 0;
@@ -101,34 +187,21 @@ video {
 	vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-menu,
-nav,
-section {
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
 	display: block;
 }
 body {
 	line-height: 1;
 }
-ol,
-ul {
+ol, ul {
 	list-style: none;
 }
-blockquote,
-q {
+blockquote, q {
 	quotes: none;
 }
-blockquote:before,
-blockquote:after,
-q:before,
-q:after {
+blockquote:before, blockquote:after,
+q:before, q:after {
 	content: '';
 	content: none;
 }
@@ -136,9 +209,11 @@ table {
 	border-collapse: collapse;
 	border-spacing: 0;
 }
+
 /**********************************************
 * Default
 **********************************************/
+
 @font-face {
   font-family: 'FontAwesome';
   src: url('font-awesome/font-awesome-webfont.eot');
@@ -146,260 +221,310 @@ table {
   font-weight: normal;
   font-style: normal;
 }
+
 html {
   height: 100%;
   width: 100%;
   display: block;
-  background-color: #FFFFFF;
+
+  background-color: @colorbackground;
+
+  // https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
   box-sizing: border-box;
 }
-*,
-*:before,
-*:after {
+
+*, *:before, *:after {
   box-sizing: inherit;
 }
+
 body {
   height: 100%;
   width: 100%;
   display: block;
-  color: #1F1F1F;
+
+  color: @colorforeground;
+
   word-wrap: break-word;
 }
-body,
-button,
-input,
-textarea,
-select {
-  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
-  font-size: 12pt;
-  padding: 0;
-  margin: 0;
-  font-weight: 400;
-  line-height: 1.5;
-}
-@media only screen and (min-width: 45em) and (max-width: 85em) {
-  body,
-  button,
-  input,
-  textarea,
-  select {
-    font-size: 11pt;
+
+body, button, input, textarea, select {
+  font-family: @font-family;
+  font-size: @smartphone-font-size;
+  @media @tablet {
+    font-size: @tablet-font-size;
   }
-}
-@media not screen and (max-width: 85em) {
-  body,
-  button,
-  input,
-  textarea,
-  select {
-    font-size: 10pt;
+  @media @desktop {
+    font-size: @desktop-font-size;
   }
+  padding: 0;
+  margin: 0;
+
+  font-weight: @font-weight;
+  line-height: @line-height;
 }
+
 /**********************************************
 * Inline elements
 **********************************************/
+
 strong {
   font-weight: bold;
 }
-i,
-cite,
-em,
-var,
-address,
-dfn {
+
+i, cite, em, var, address, dfn {
   font-style: italic;
 }
-strong,
-b {
+
+strong, b {
   font-weight: bold;
 }
-u,
-ins {
+
+u, ins {
   text-decoration: underline;
 }
-s,
-strike,
-del {
+
+s, strike, del {
   text-decoration: line-through;
 }
+
 sup {
   vertical-align: super;
   font-size: smaller;
 }
+
 sub {
   vertical-align: sub;
   font-size: smaller;
 }
+
 small {
   font-size: smaller;
 }
-tt,
-code,
-kbd,
-samp {
-  font-family: "Courier New", Courier, monospace;
+
+tt, code, kbd, samp {
+  font-family: @monospace;
 }
+
 q {
   display: inline;
-  quotes: initial;
-}
-q:before {
+  &:before {
     content: open-quote;
-}
-q:after {
+  }
+  &:after {
     content: close-quote;
+  }
+  quotes: initial;
 }
+
 mark {
-  color: #22CC22;
+  color: @colortextselection;
 }
+
 /**********************************************
 * Link
 **********************************************/
-a {
-  color: #2FA2E4;
+.link(@ccolor) {
+  // XXX
+  color: @ccolor;
+
   text-decoration: none;
-}
-a[href=""] {
-  color: #1F1F1F;
-}
-a:hover {
+  // TODO Animate underline by using outline?
+
+  &[href=""] {
+    color: @colorforeground;
+  }
+  &:hover {
+    // This make links and button a bit different, and so,
+    // it is easier to know which element can open a new tab
     text-decoration: underline;
-}
-a:focus {
+  }
+  &:focus {
+    // XXX TODO
     outline-offset: -2px;
-  outline: 2px solid #3388cc;
+    outline: 2px @border-type @colorfocus;
+  }
 }
-@media not screen and (max-width: 85em) {
-  a[accesskey]:after {
+
+a {
+  .link(@colorlink);
+
+  @media @desktop {
+    // Do not display access key if not physical keyboard
+    &[accesskey]:after {
       content: " (" attr(accesskey) ") ";
     }
+  }
 }
+
 /**********************************************
 * Button
 **********************************************/
+
+.button() {
+  padding: @margin-size;
+  border: 1px solid rgba(0, 0, 0, 0.14);
+  border-radius: @border-radius;
+  &::before{
+    margin-right: @margin-size;
+  }
+  &:hover, &:active {
+    background-color: @colorblocklinkbackground;
+  }
+}
+.beforeHeaderButton() {
+  margin-right: @margin-size;
+  text-align: center;
+  width: 1em;
+}
+
 /**********************************************
 * Preformatted
 **********************************************/
-pre,
-xmp,
-plaintext,
-listing {
+
+pre, xmp, plaintext, listing {
   display: block;
   white-space: pre-wrap;
 }
+
 /**********************************************
 * hr
 **********************************************/
+
 hr {
   display: block;
   border-style: inset;
-  border-width: 1px;
-  border-color: #FF6600;
+  border-width: @border-size;
+  border-color: @coloraccent;
 }
+
 /**********************************************
 * Text fields
 **********************************************/
+
 label {
   display: block;
 }
-input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]),
-textarea,
-select {
+
+input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]), textarea, select {
   width: 100%;
-  padding: 3pt;
-  background-color: #FFFFFF;
-  color: #1F1F1F;
-  border: 1px solid rgba(0, 0, 0, 0.3);
-  border-radius: 0.325em;
-  transition: border 0.2s ease-out, box-shadow 0.2s ease-out;
-}
-input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]):active,
-textarea:active,
-select:active,
-input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]):focus,
-textarea:focus,
-select:focus {
+
+  padding: @half-margin-size;
+
+  background-color: @colortextboxbackground;
+  color: @colortextboxforeground;
+
+  border: @border;
+  border-radius: @border-radius;
+
+  // BUG: transition is not triggered if there is a default box-shadow
+  // probably a chrome bug. Disable for now.
+  // box-shadow: @box-shadow;
+  transition : border @transition-timing, box-shadow @transition-timing;
+
+  &:active, &:focus {
     outline: none;
+  }
+  &:focus {
+    border: @focus-border;
+    box-shadow: @focus-box-shadow;
+  }
+  &:invalid {
+    border: @invalid-border;
+    &:focus {
+      box-shadow: @invalid-box-shadow;
+    }
+  }
 }
-input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]):focus,
-textarea:focus,
-select:focus {
-  border: 1px solid #3388cc;
-  box-shadow: 0 0 12pt #3388cc;
-}
-input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]):invalid,
-textarea:invalid,
-select:invalid {
-  border: 1px solid #FF6600;
-}
-input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]):invalid:focus,
-textarea:invalid:focus,
-select:invalid:focus {
-  box-shadow: 0 0 12pt #FF6600;
-}
+
+// Force safari to render search input as text
+// https://stackoverflow.com/questions/34802552/safari-input-type-search-reset-normalize
 input[type="search"] {
     -webkit-appearance: textfield;
 }
 input[type="search"]::-webkit-search-decoration {
     -webkit-appearance: none;
 }
+
+// http://kyusuf.com/post/completely-css-custom-checkbox-radio-buttons-and-select-boxes
 select {
   cursor: pointer;
+
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   background-image: none;
-  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-position: right 6pt top 50%;
-  background-size: 12pt 12pt;
-}
-select:-moz-focusring {
+  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-position: right @margin-size top 50%;
+  background-size: @double-margin-size @double-margin-size;
+
+  &:-moz-focusring {
+    // Remove outline in Firefox
+    // http://stackoverflow.com/a/18853002
     color: transparent;
     text-shadow: 0 0 0 #000;
+  }
 }
+
 textarea {
   word-wrap: break-word;
   white-space: pre-wrap;
+  // Fix inconsistent Textarea bottom margin in Firefox and Chrome
+  // http://stackoverflow.com/a/26904480
   vertical-align: top;
-  transition: height 0.2s ease-out;
-}
-@media not screen and (min-width: 45em) {
-  textarea {
+
+  transition: height @transition-timing;
+
+  // On smartphone, display the textarea small
+  // and increase its size when focused
+  // This behaviour should not be activated on bigscreen,
+  // as it make it unusable (difficult to search text for example)
+  @media @smartphone {
     height: 4em;
-  }
-  textarea:focus {
+    &:focus {
       height: 20em;
     }
-}
-@media only screen and (min-width: 45em) and (max-width: 85em), not screen and (max-width: 85em) {
-  textarea {
+  }
+  @media @tablet, @desktop {
     min-height: 10em;
   }
 }
+
 ::-webkit-input-placeholder {
-  color: #575757;
+   color: @colortextboxplaceholder;
 }
-:-moz-placeholder {
-  /* Firefox 18- */
-  color: #575757;
+
+:-moz-placeholder { /* Firefox 18- */
+   color: @colortextboxplaceholder;  
 }
-::-moz-placeholder {
-  /* Firefox 19+ */
-  color: #575757;
+
+::-moz-placeholder {  /* Firefox 19+ */
+   color: @colortextboxplaceholder;  
 }
+
 :-ms-input-placeholder {  
-  color: #575757;
+   color: @colortextboxplaceholder;  
 }
-input[type=submit],
-button {
+
+input[type=submit], button {
+  &::-moz-focus-inner {
+    border : 0px;
+    padding: 0px;
+  }
+
   margin: 0;
   padding: 0;
   border: none;
-  background: transparent;
-  color: #1F1F1F;
-  /*
+  background:transparent;
+  color: @colorforeground;
+
+  &:hover, &:focus {
+    outline: none;
+  }
+
+/*
   // XXX TODO
   // transition: background-color 0.2s ease-out;
   &:hover, &:focus {
@@ -412,49 +537,50 @@ button {
 */
   cursor: pointer;
 }
-input[type=submit]::-moz-focus-inner,
-button::-moz-focus-inner {
-  border: 0px;
-  padding: 0px;
-}
-input[type=submit]:hover,
-button:hover,
-input[type=submit]:focus,
-button:focus {
-  outline: none;
-}
+
 /**********************************************
 * Media
 **********************************************/
-img,
-iframe,
-video,
-svg {
+
+img, iframe, video, svg {
   max-width: 100%;
 }
-svg polyline {
-  stroke: #1F1F1F;
+
+svg {
+  polyline {
+    stroke: @colorforeground;
     fill: none;
+  }
+  text {
+    stroke: @colorforeground;
+    fill: @colorforeground;
+  }
 }
-svg text {
-  stroke: #1F1F1F;
-  fill: #1F1F1F;
-}
+
 iframe {
   width: 100%;
   height: 20em;
-  background-color: #FFFFFF;
+  background-color: @colorbackground;
 }
+
 img {
   image-orientation: from-image;
 }
+
+
 /**********************************************
 * Gadget: panel
 **********************************************/
 div[data-gadget-scope='panel'] {
-  background-color: #393939;
-  color: #FFFFFF;
-  width: 180pt;
+
+  background-color: @panelbackgroundcolor;
+
+  @media @smartphone, @tablet {
+    box-shadow: 5px 0 5px rgba(0,0,0,.15);
+  }
+  color: @white;
+
+  width: @panelwidth;
   min-height: 100%;
   max-height: 100%;
   overflow-y: auto;
@@ -463,154 +589,162 @@ div[data-gadget-scope='panel'] {
   left: 0;
   display: block;
   z-index: 2000;
+
   transition: transform 200ms ease-out;
   transform: translate3d(0, 0, 0);
-}
-@media not screen and (min-width: 45em), only screen and (min-width: 45em) and (max-width: 85em) {
-  div[data-gadget-scope='panel'] {
-    box-shadow: 5px 0 5px rgba(0, 0, 0, 0.15);
+
+  @media @smartphone, @tablet {
+    left: -@panelwidth - @margin-size;
+    &.visible {
+      transform: translate3d(@panelwidth + @margin-size, 0, 0);
     }
-}
-@media not screen and (min-width: 45em), only screen and (min-width: 45em) and (max-width: 85em) {
-  div[data-gadget-scope='panel'] {
-    left: -186pt;
-  }
-  div[data-gadget-scope='panel'].visible {
-    transform: translate3d(186pt, 0, 0);
   }
-}
-div[data-gadget-scope='panel'] div[data-role="header"] {
+
+  div[data-role="header"] {
     display: flex;
     justify-content: flex-start;
-}
-div[data-gadget-scope='panel'] div[data-role="header"] .panel_img {
+
+    .panel_img {
       text-align: center;
       flex: 1;
-  height: 30pt;
-}
-div[data-gadget-scope='panel'] div[data-role="header"] button,
-div[data-gadget-scope='panel'] div[data-role="header"] a {
-  width: 3em;
-  overflow: hidden;
-  text-indent: -9999px;
-  white-space: nowrap;
-  background-color: #393939;
-  display: block;
-  line-height: 30pt;
-  color: #FFFFFF;
-}
-div[data-gadget-scope='panel'] div[data-role="header"] button::before,
-div[data-gadget-scope='panel'] div[data-role="header"] a::before {
+      height: @headerheight;
+    }
+    button, a {
+
+      .hide_text();
+      background-color: @panelbackgroundcolor;
+
+      &::before {
         float: left;
         text-indent: 0;
-  margin-left: 12pt;
-}
-@media not screen and (max-width: 85em) {
-  div[data-role='page']:not(.desktop-panel-hidden) div[data-gadget-scope='panel'] div[data-role="header"] button[data-i18n="Close"],
-  div[data-role='page']:not(.desktop-panel-hidden) div[data-gadget-scope='panel'] div[data-role="header"] a[data-i18n="Close"] {
+        margin-left: @double-margin-size;
+      }
+
+      @media @desktop {
+        div[data-role='page']:not(.desktop-panel-hidden) &[data-i18n="Close"] {
           display: none;
         }
-}
-div[data-gadget-scope='panel'] div[data-gadget-scope='erp5_searchfield'] {
-  padding: 3pt 12pt;
-}
-div[data-gadget-scope='panel'] div[data-gadget-scope='erp5_searchfield'] button {
-  color: #FFFFFF;
-}
-div[data-gadget-scope='panel'] div[data-gadget-scope='erp5_searchfield'] input[type="search"] {
-  color: #FFFFFF !important;
-  background-color: #767676 !important;
-}
-div[data-gadget-scope='panel'] img {
+      }
+
+      display: block;
+
+      line-height: @headerheight;
+      color: @white;
+    }
+  }
+
+  div[data-gadget-scope='erp5_searchfield'] {
+    padding: @half-margin-size @double-margin-size;
+    button {
+      color: @white;
+    }
+    input[type="search"] {
+      color: @white !important;
+      background-color: @grey !important;
+    }
+  }
+
+  img {
     text-align: left;
     height: 100%;
-}
-div[data-gadget-scope='panel'] div[data-gadget-scope="erp5_checkbox"] {
-  padding: 3pt;
-  padding-left: 12pt;
-}
-div[data-gadget-scope='panel'] div[data-gadget-scope="erp5_checkbox"] label,
-div[data-gadget-scope='panel'] div[data-gadget-scope="erp5_checkbox"] span,
-div[data-gadget-scope='panel'] div[data-gadget-scope="erp5_checkbox"] input {
+  }
+
+  div[data-gadget-scope="erp5_checkbox"] {
+    padding: @half-margin-size;
+    padding-left: @double-margin-size;
+
+    label, span, input {
       cursor: pointer;
-}
-div[data-gadget-scope='panel'] div[data-gadget-scope="erp5_checkbox"] span {
-  width: 24pt;
+    }
+
+    span {
+      width: @quadruple-margin-size;
       display: inline-block;
-}
-div[data-gadget-scope='panel'] ul:first-child {
-  margin-top: 30pt;
-}
-div[data-gadget-scope='panel'] ul li a {
-  color: #FFFFFF;
-  display: block;
-  padding: 1.5pt;
-  padding-left: 12pt;
+    }
+  }
+
+  .alignwithicon() {
+    padding: @quarter-margin-size;
+    padding-left: @double-margin-size;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
-}
-div[data-gadget-scope='panel'] ul li a.active {
-  color: #1F1F1F;
-  background-color: #FFFFFF;
-}
-div[data-gadget-scope='panel'] ul li a:hover,
-div[data-gadget-scope='panel'] ul li a:active {
-  color: #FFFFFF;
-  background-color: #1F1F1F;
-}
-div[data-gadget-scope='panel'] ul li a::before {
-  width: 24pt;
-}
-div[data-gadget-scope='panel'] dl {
-  background-color: #767676;
-  color: #1F1F1F;
+
+    &::before {
+      // Use width instead of padding-right
+      // To keep text aligned
+      width: @quadruple-margin-size;
+    }
+  }
+
+  .alignwithouticon() {
+    .alignwithicon();
+    padding-left: @double-margin-size + @quadruple-margin-size;
+  }
+
+  .linkpanel(@linkpanelhovercolor: @white, @linkpanelhoverbackgroundcolor: @paneldarkerbackgroundcolor) {
+    color: @white;
+    display: block;
+    // Define .active before :hover to ensure it hover is displayed
+    // for the .active entry
+    &.active {
+      color: @panelcontextuallinkcolor;
+      background-color: @panelcontextuallinkcolorbackground;
+    }
+    &:hover, &:active {
+      color: @linkpanelhovercolor;
+      background-color: @linkpanelhoverbackgroundcolor;
+    }
+  }
+
+  ul {
+    &:first-child {
+      margin-top: @headerheight;
+    }
+    li {
+      a {
+        .linkpanel();
+        .alignwithicon();
+      }
+    }
+  }
+
+  dl {
+    background-color: @grey;
+    color: @black;
+
+    // Animate when content is added
     transform-origin: 50% 0;
     transform: scaleY(0);
-  transition: transform 0.2s ease-out;
-}
-div[data-gadget-scope='panel'] dl:not(:empty) {
+    &:not(:empty) {
       transform: scaleY(1);
-}
-div[data-gadget-scope='panel'] dl dt {
-  padding: 1.5pt;
-  padding-left: 12pt;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
+    }
+    transition: transform @transition-timing;
+
+    dt {
+      .alignwithicon();
       text-transform: uppercase;
+    }
+
+    dd {
+        a {
+          .linkpanel(@panelcontextuallinkcolor, @panelcontextuallinkcolorbackground);
+          .alignwithouticon();
+        }
+    }
+  }
+
 }
-div[data-gadget-scope='panel'] dl dt::before {
-  width: 24pt;
-}
-div[data-gadget-scope='panel'] dl dd a {
-  color: #FFFFFF;
-  display: block;
-  padding: 1.5pt;
-  padding-left: 12pt;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-  padding-left: 36pt;
-}
-div[data-gadget-scope='panel'] dl dd a.active {
-  color: #1F1F1F;
-  background-color: #FFFFFF;
-}
-div[data-gadget-scope='panel'] dl dd a:hover,
-div[data-gadget-scope='panel'] dl dd a:active {
-  color: #1F1F1F;
-  background-color: #FFFFFF;
-}
-div[data-gadget-scope='panel'] dl dd a::before {
-  width: 24pt;
-}
+
 /**********************************************
 * Gadget: editor panel
 **********************************************/
+
 div[data-gadget-scope='editor_panel'] {
-  background-color: #FFFFFF;
-  width: 180pt;
+
+  background-color: @colorbackground;
+
+  width: @panelwidth;
   min-height: 100%;
   max-height: 100%;
   overflow-y: auto;
@@ -618,830 +752,946 @@ div[data-gadget-scope='editor_panel'] {
   top: 0;
   display: block;
   z-index: 3000;
-}
-@media not screen and (max-width: 85em) {
-  div[data-gadget-scope='editor_panel'] {
-    left: -186pt;
+
+  @media @desktop {
+    left: -@panelwidth - @margin-size;
     transition: transform 200ms ease-out;
     transform: translate3d(0, 0, 0);
-    box-shadow: 5px 0 5px rgba(0, 0, 0, 0.15);
+    &.visible {
+      transform: translate3d(@panelwidth + @margin-size, 0, 0);
     }
-  div[data-gadget-scope='editor_panel'].visible {
-    transform: translate3d(186pt, 0, 0);
+    box-shadow: 5px 0 5px rgba(0,0,0,.15);
   }
-}
-@media not screen and (min-width: 45em), only screen and (min-width: 45em) and (max-width: 85em) {
-  div[data-gadget-scope='editor_panel'] {
-    right: -186pt;
+  @media @smartphone, @tablet {
+    right: -@panelwidth - @margin-size;
     transition: transform 200ms ease-out;
     transform: translate3d(0, 0, 0);
-    box-shadow: -5px 0 5px rgba(0, 0, 0, 0.15);
+    &.visible {
+      transform: translate3d(-@panelwidth - @margin-size, 0, 0);
     }
-  div[data-gadget-scope='editor_panel'].visible {
-    transform: translate3d(-186pt, 0, 0);
+    box-shadow: -5px 0 5px rgba(0,0,0,.15);
   }
-}
-div[data-gadget-scope='editor_panel'] div[data-role="header"] {
+
+
+
+  div[data-role="header"] {
+
     display: flex;
     justify-content: space-between;
     flex-direction: row-reverse;
-}
-div[data-gadget-scope='editor_panel'] div[data-role="header"] h1 {
+
+    h1 {
       text-align: left;
-  line-height: 30pt;
-  max-height: 30pt;
-}
-div[data-gadget-scope='editor_panel'] div[data-role="header"] button,
-div[data-gadget-scope='editor_panel'] div[data-role="header"] a {
-  width: 3em;
-  overflow: hidden;
-  text-indent: -9999px;
-  white-space: nowrap;
-  display: block;
-  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"] a::before {
+      line-height: @headerheight;
+      max-height: @headerheight;
+    }
+
+    button, a {
+
+      .hide_text();
+
+      &::before {
         float: left;
         text-indent: 0;
-  margin-left: 12pt;
-}
-div[data-gadget-scope='editor_panel'] section {
-  padding: 12pt;
-}
-div[data-gadget-scope='editor_panel'] section fieldset > div {
+        margin-left: @double-margin-size;
+      }
+
+      display: block;
+
+      line-height: @headerheight;
+    }
+  }
+
+  section {
+    padding: @double-margin-size;
+
+    fieldset {
+      & > div {
         display: inline-block;
-}
-div[data-gadget-scope='editor_panel'] section fieldset label {
+      }
+      label {
         display: inline-block;
         text-align: center;
-}
-div[data-gadget-scope='editor_panel'] section fieldset input[type="radio"] {
+        // font-size: 0.8em;
+      }
+      input[type="radio"] {
         display: inline-block;
-}
-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 .column_item_container > div {
+      }
+    }
+
+    .filter_item_container, .sort_item_container, .column_item_container {
+      & > div {
         display: flex;
         align-items: flex-start;
-  padding: 6pt 0;
-}
-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 .column_item_container > div .filter_item,
-div[data-gadget-scope='editor_panel'] section .filter_item_container > div .sort_item,
-div[data-gadget-scope='editor_panel'] section .sort_item_container > div .sort_item,
-div[data-gadget-scope='editor_panel'] section .column_item_container > div .sort_item,
-div[data-gadget-scope='editor_panel'] section .filter_item_container > div .column_item,
-div[data-gadget-scope='editor_panel'] section .sort_item_container > div .column_item,
-div[data-gadget-scope='editor_panel'] section .column_item_container > div .column_item {
+        padding: @margin-size 0;
+
+        .filter_item, .sort_item, .column_item {
           flex: 1;
-}
-div[data-gadget-scope='editor_panel'] section button {
-  padding: 3pt 6pt;
+        }
+      }
+    }
+
+    button {
+
+      // Copy pasted from listbox buttons
+      padding: @half-margin-size @margin-size;
       border: 1px solid rgba(0, 0, 0, 0.14);
-  border-radius: 0.325em;
-  margin-right: 6pt;
-  width: 2em;
-  overflow: hidden;
-  text-indent: -9999px;
-  white-space: nowrap;
-}
-div[data-gadget-scope='editor_panel'] section button:last-of-type {
+      border-radius: @radius;
+
+      margin-right: @margin-size;
+      &:last-of-type {
         margin-right: 0;
-}
-div[data-gadget-scope='editor_panel'] section button::before {
-  margin-right: 6pt;
+      }
+
+      .hide_text(@width: 2em);
+
+      &::before {
+        margin-right: @margin-size;
+
         float: left;
         text-indent: 0;
-}
-div[data-gadget-scope='editor_panel'] section button.trash {
+      }
+
+      &.trash {
         float: right;
+      }
+
+    }
+  }
+
 }
+
+
 /**********************************************
 * Gadget: header
 **********************************************/
-div[data-gadget-scope='header'] .ui-header {
-  position: fixed;
-  z-index: 1000;
-  text-align: center;
-  display: flex;
-  flex-flow: row wrap;
-  width: 100%;
-  color: #FFFFFF;
-  background-color: #0E81C2;
-}
-@media not screen and (max-width: 85em) {
-  div[data-gadget-scope='header'] .ui-header {
-    transition: transform 200ms ease-out;
-    transform: translate3d(180pt, 0, 0);
+.renderDesktopSubLink() {
+  div[data-role='page']:not(.desktop-panel-hidden) & {
+    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 button,
-div[data-gadget-scope='header'] .ui-header a {
-  color: #FFFFFF;
-  transition: background-color 0.2s ease-out;
-}
-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: #0e90d8;
-}
-div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls button,
-div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a {
+
+.renderTabletSubLink() {
+  padding-top: @half-margin-size;
+  padding-bottom: @half-margin-size;
+  line-height: inherit;
+  white-space: nowrap;
+  overflow: hidden;
+  &::before {
+    font-size: 1.2em;
     display: block;
-  transition: background-color 0.2s ease-out;
-  line-height: 30pt;
-}
-@media not screen and (max-width: 85em) {
-  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 not screen and (min-width: 45em) {
-  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;
-    width: 3em;
-    overflow: hidden;
-    text-indent: -9999px;
-    white-space: nowrap;
+
+.renderTabletSubListElement() {
+  flex: 1;
+  // XXX TODO Hardcoded color
+  border-left: 1px solid rgba(0, 0, 0, 0.55);
+  &:first-child {
+    border-left: none;
+  }
+
+  a {
+    display: block;
   }
 }
-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;
+
+.renderTabletNotALinkTitle() {
+  padding-left: @headertitlespanleftmiddlepadding;
+  &::before {
+    margin-right:@headertitlespanleftlargemargin;
+  }
 }
-@media only screen and (min-width: 45em) and (max-width: 85em) {
-  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;
+
+.renderTabletHeaderButton() {
+  // https://css-tricks.com/forums/topic/hide-text-but-not-the-before-pseudo-class/
+  // Default size
+  background-color: @colorheaderbackground;
   width: 8em;
-  }
 }
-@media only screen and (min-width: 45em) and (max-width: 85em), not screen and (max-width: 85em) {
-  div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls button::before,
-  div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a::before {
-    width: 1em;
-    margin-right: 6pt;
+
+div[data-gadget-scope='header'] .ui-header {
+  position: fixed;
+  z-index: 1000;
   text-align: center;
+
+  display: flex;
+  flex-flow: row wrap;
+  // Prevent the header to have a width higher than the screen
+  width: 100%;
+
+  @media @desktop {
+    transition: transform 200ms ease-out;
+    transform: translate3d(@panelwidth, 0, 0);
+  }
+
+  color: @white;
+  background-color: @colorsubheaderbackground;
+
+  button, a {
+    color: @white;
+    transition: background-color @transition-timing;
+    &:hover, &:active {
+      background-color: lighten(@colorheaderbackground, 20%);
+    }
+  }
+
+  .ui-controlgroup-controls {
+    // Left, right button next to the page title
+
+    button, a {
+      display: block;
+
+      @media @desktop {
+        background-color: @colorsubheaderbackground;
       }
-}
-@media not screen and (min-width: 45em) {
-  div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls button::before,
-  div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a::before {
+      @media @smartphone {
+        background-color: @colorheaderbackground;
+        .hide_text();
+      }
+
+      transition: background-color @transition-timing;
+      &:hover, &:active {
+        background-color: lighten(@colorheaderbackground, 20%);
+      }
+
+      line-height: @headerheight;
+
+      @media @tablet {
+        .renderTabletHeaderButton();
+      }
+
+      &::before {
+        @media @tablet, @desktop {
+          .beforeHeaderButton()
+        }
+
+        @media @smartphone {
           float: left;
           text-indent: 0;
-    margin-left: 12pt;
+          margin-left: @double-margin-size;
         }
-}
-@media not screen and (max-width: 85em) {
-  div[data-role='page']:not(.desktop-panel-hidden) div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls button[name="panel"],
-  div[data-role='page']:not(.desktop-panel-hidden) div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a[name="panel"] {
+      }
+
+      div[data-role='page']:not(.desktop-panel-hidden) &[name="panel"] {
+        @media @desktop {
           display: none;
         }
-}
-div[data-gadget-scope='header'] .ui-header > .ui-btn-left button,
-div[data-gadget-scope='header'] .ui-header > .ui-btn-left a {
+      }
+
+    }
+  }
+
+  // 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);
-}
-@media not screen and (min-width: 45em), only screen and (min-width: 45em) and (max-width: 85em) {
-  div[data-gadget-scope='header'] .ui-header > .ui-btn-right button,
-  div[data-gadget-scope='header'] .ui-header > .ui-btn-right a {
+    }
+  }
+
+  & > .ui-btn-right {
+    button, a {
+      // background-color: #F60;
+      @media @smartphone, @tablet {
         border-left: 1px solid rgba(255, 255, 255, 0.55);
       }
-}
-@media not screen and (max-width: 85em) {
-  div[data-role='page']:not(.desktop-panel-hidden) div[data-gadget-scope='header'] .ui-header > .ui-btn-right button,
-  div[data-role='page']:not(.desktop-panel-hidden) div[data-gadget-scope='header'] .ui-header > .ui-btn-right a {
-    padding-left: 24pt;
-    padding-right: 24pt;
-    min-width: 5em;
+      @media @desktop {
+        .renderDesktopSubLink();
       }
-}
-div[data-gadget-scope='header'] .ui-header h1 {
+      &.ui-icon-warning {
+        background-color: @coloraccent;
+      }
+    }
+  }
+
+  h1 {
     text-align: left;
-  line-height: 30pt;
+    line-height: @headerheight;
     flex: 1;
-  background-color: #085078;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-@media not screen and (max-width: 85em) {
-  div[data-role='page']:not(.desktop-panel-hidden) div[data-gadget-scope='header'] .ui-header h1 {
+    @media @desktop {
+      div[data-role='page']:not(.desktop-panel-hidden) & {
         flex: 1 100%;
       }
-}
-div[data-gadget-scope='header'] .ui-header h1 > span {
-  padding-left: 24pt;
-}
-div[data-gadget-scope='header'] .ui-header h1 > span::before {
-  width: 1em;
-  margin-right: 6pt;
-}
-@media only screen and (min-width: 45em) and (max-width: 85em) {
-  div[data-gadget-scope='header'] .ui-header h1 > span {
-    padding-left: 16pt;
     }
-  div[data-gadget-scope='header'] .ui-header h1 > span::before {
-    margin-right: 14pt;
+
+    background-color: @colorheaderbackground;
+
+    // Restore border?
+    // border-left: 1px solid rgba(255, 255, 255, 0.55);
+    // border-right: 1px solid rgba(255, 255, 255, 0.55);
+
+    // Do not put title on multi line in case of small screen
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    // Title which is not a link
+    & > span {
+      padding-left: @headertitlespanleftlargepadding;
+      &::before {
+        width:1em;
+        margin-right:@headertitlespanleftsmallmargin;
+      }
+
+      @media @tablet {
+        .renderTabletNotALinkTitle();
+      }
+
+      @media @smartphone {
+        padding-left: @headertitlespanleftsmallpadding;
+        &::before {
+          margin-right:@headertitlespanleftsmallmargin;
         }
-}
-@media not screen and (min-width: 45em) {
-  div[data-gadget-scope='header'] .ui-header h1 > span {
-    padding-left: 12pt;
       }
-  div[data-gadget-scope='header'] .ui-header h1 > span::before {
-    margin-right: 6pt;
     }
-}
-div[data-gadget-scope='header'] .ui-header h1 form {
+    // Clickable title and button
+    form {
       height: 100%;
-}
-div[data-gadget-scope='header'] .ui-header h1 form button {
+      button {
         text-align: left;
         height: 100%;
         width: 100%;  
-}
-div[data-gadget-scope='header'] .ui-header h1 a,
-div[data-gadget-scope='header'] .ui-header h1 button {
+      }
+    }
+    a, button {
       display: block;
+
+      // Do not put link on multi line in case of small screen
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-}
-div[data-gadget-scope='header'] .ui-header h1 a::before,
-div[data-gadget-scope='header'] .ui-header h1 button::before {
+
+      &::before {
         display: inline-block;
-  width: 42pt;
-}
-@media only screen and (min-width: 45em) and (max-width: 85em), not screen and (min-width: 45em) {
-  div[data-gadget-scope='header'] .ui-header h1 a::before,
-  div[data-gadget-scope='header'] .ui-header h1 button::before {
+        @media @tablet, @smartphone {
           text-align: center;
         }
-}
-@media not screen and (max-width: 85em) {
-  div[data-role='page']:not(.desktop-panel-hidden) div[data-gadget-scope='header'] .ui-header h1 a::before,
-  div[data-role='page']:not(.desktop-panel-hidden) div[data-gadget-scope='header'] .ui-header h1 button::before {
-    width: 12pt;
-    margin-left: 24pt;
-    margin-right: 6pt;
+
+        @media @desktop {
+          div[data-role='page']:not(.desktop-panel-hidden) & {
+            width: @headertitlemiddlewidth;
+            margin-left: @headertitleleftmiddlemargin;
+            margin-right: @headertitlerightsmallmargin;
           }
-}
-@media not screen and (min-width: 45em) {
-  div[data-gadget-scope='header'] .ui-header h1 a::before,
-  div[data-gadget-scope='header'] .ui-header h1 button::before {
-    width: 30pt;
         }
-}
-@media not screen and (max-width: 85em) {
-  div[data-gadget-scope='header'] .ui-header .ui-subheader {
+        width: @headertitleleftlargemargin;
+        @media @smartphone {
+          width: @headertitleleftsmallmargin;
+        }
+
+      }
+
+    }
+  }
+
+
+  .ui-subheader {
+    @media @desktop {
       text-align: left;
       flex: 1;
     }
-}
-@media not screen and (min-width: 45em), only screen and (min-width: 45em) and (max-width: 85em) {
-  div[data-gadget-scope='header'] .ui-header .ui-subheader {
+
+    @media @smartphone, @tablet {
       flex: 1 100%;
     }
-}
-div[data-gadget-scope='header'] .ui-header ul {
-  display: flex;
-}
-@media only screen and (min-width: 45em) and (max-width: 85em), not screen and (min-width: 45em) {
-  div[data-gadget-scope='header'] .ui-header ul li {
-    flex: 1;
-    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 {
-    display: block;
+
+  ul {
+    display: flex;
+
+    li {
+      @media @tablet, @smartphone {
+        .renderTabletSubListElement();
       }
-}
-@media only screen and (min-width: 45em) and (max-width: 85em) {
-  div[data-gadget-scope='header'] .ui-header ul li a {
-    padding-top: 3pt;
-    padding-bottom: 3pt;
-    line-height: inherit;
-    white-space: nowrap;
-    overflow: hidden;
+
+      @media @tablet {
+        a {
+          .renderTabletSubLink();
         }
-  div[data-gadget-scope='header'] .ui-header ul li a::before {
-    font-size: 1.2em;
-    display: block;
       }
-}
-@media not screen and (min-width: 45em) {
-  div[data-gadget-scope='header'] .ui-header ul li a {
+
+      @media @smartphone {
+        a {
           text-align: center;
           vertical-align: middle;
           font-size: 1.5em;
-    padding-top: 6pt;
-    padding-bottom: 6pt;
-    overflow: hidden;
-    text-indent: -9999px;
-    white-space: nowrap;
-  }
-  div[data-gadget-scope='header'] .ui-header ul li a::before {
+          padding-top: @margin-size;
+          padding-bottom: @margin-size;
+          .hide_text(@width: false);
+          &::before {
             float: left;
             text-indent: 0;
             width: 100%;
           }
-}
-@media not screen and (max-width: 85em) {
-  div[data-gadget-scope='header'] .ui-header ul li a {
+        }
+      }
+
+      @media @desktop {
+        a {
           display: block;
-    line-height: 30pt;
+          .renderDesktopSubLink();
+          line-height: @headerheight;
+
           white-space: nowrap;
           overflow: hidden;
+          &::before {
+            .beforeHeaderButton()
+          }
+        }
       }
-  div[data-role='page']:not(.desktop-panel-hidden) div[data-gadget-scope='header'] .ui-header ul li a {
-    padding-left: 24pt;
-    padding-right: 24pt;
-    min-width: 5em;
     }
-  div[data-gadget-scope='header'] .ui-header ul li a::before {
-    display: none;
   }
 }
 /**********************************************
 * Gadget: main
 **********************************************/
-.gadget-content {
-  padding: 24pt;
-  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);
-    }
-  }
-*/
-}
-.gadget-content div[data-gadget-scope='m'] {
-  animation: fadein 0.2s ease-out;
-}
-.gadget-content input[type='submit'] {
-  padding: 6pt;
-  margin-top: 30pt;
-  margin-right: 12pt;
-  background-color: #FF6600;
-  color: #FFFFFF;
-  border-radius: 0.325em;
+.renderPageSubmitButton(@backgroundcolor) {
+  padding: @margin-size;
+  margin-top: @headerheight;
+  margin-right: @double-margin-size;
+
+  background-color: @backgroundcolor;
+  color: @white;
+
+  border-radius: @radius;
   border-width: 1px;
   border-style: solid;
+
   min-width: 8em;
-}
-.gadget-content input[type='submit']:hover,
-.gadget-content input[type='submit']:focus {
-  background-color: #ff8533;
-}
-.gadget-content input[type='submit']:active {
-  background-color: #ffa366;
-}
-.gadget-content button[name='action_update'] {
-  padding: 6pt;
-  margin-top: 30pt;
-  margin-right: 12pt;
-  background-color: #767676;
-  color: #FFFFFF;
-  border-radius: 0.325em;
-  border-width: 1px;
-  border-style: solid;
-  min-width: 8em;
-}
-.gadget-content button[name='action_update']:hover,
-.gadget-content button[name='action_update']:focus {
-  background-color: #909090;
-}
-.gadget-content button[name='action_update']:active {
-  background-color: #a9a9a9;
-}
-@media not screen and (max-width: 85em) {
-  div[data-role='page']:not(.desktop-panel-hidden) .gadget-content {
-    margin-left: 180pt;
+
+  &:hover, &:focus {
+    background-color: lighten(@backgroundcolor, 10%);
+  }
+  &:active {
+    background-color: lighten(@backgroundcolor, 20%);
   }
 }
-@media only screen and (min-width: 45em) and (max-width: 85em) {
-  .gadget-content {
+
+.gadget-content {
+  div[data-gadget-scope='m'] {
+    animation: fadein @transition-timing;
+  }
+
+  // Dialog page template main submit button 
+  input[type='submit'] {
+    .renderPageSubmitButton(@coloraccent);
+  }
+  // Dialog page template update button 
+  button[name='action_update'] {
+    .renderPageSubmitButton(@grey);
+  }
+
+  @media @desktop {
+    div[data-role='page']:not(.desktop-panel-hidden) & {
+      // Keep the panel always visible
+      margin-left: @panelwidth;
+    }
+  }
+
+  // Top padding
+  padding: @main-margin-size-desktop;
+  // XXX TODO: replace em by pt, to have exact position
+  padding-top: 2 * @headerheight + @margin-size;
+  @media @tablet {
     padding-top: 7em;
   }
-}
-@media not screen and (min-width: 45em) {
-  .gadget-content {
-    padding: 6pt;
+  @media @smartphone {
+    padding: @main-margin-size-smartphone;
     padding-top: 6em;
   }
-}
-.gadget-content .field_container > div > div > div.ui-field-contain {
-  padding: 3pt 0;
-}
-.gadget-content .field_container > div > div > div.ui-field-contain div {
+
+  // Set the size and padding of each field inside a form
+  .field_container > div > div > div.ui-field-contain {
+    padding: @half-margin-size 0;
+
+    div {
       width: 100%;
-}
-.gadget-content .field_container > div > div.horizontal_align_form_box > .ui-field-contain {
+    }
+  }
+
+  .field_container > div > div.horizontal_align_form_box {
+    // Class .horizontal_align_form_box is here only for backward-compatibility!
+    // It is used to force horizontal rendering of fields inside FormBox.
+    // we need to overwrite the padding above this statement
+    & > .ui-field-contain {
+      // makes field to high
       padding: 0;
-}
-.gadget-content .field_container > div > div.horizontal_align_form_box > .ui-field-contain > label {
-  padding-top: 9pt;
-}
-.gadget-content .field_container > div > div.horizontal_align_form_box .field_container > div {
+
+      & > label {
+        padding-top: @margin-size + @half-margin-size;
+      }
+    }
+
+    .field_container > div {
+      // matches form-group ("left", "right" ...)
       display: flex;
-}
-.gadget-content .field_container > div > div.horizontal_align_form_box .field_container > div > div {
+
+      & > div {
         flex: 1;
-}
-.gadget-content .ui-content-header-plain {
-  font-size: 150%;
-}
-.gadget-content .worklist-empty {
-  max-width: 442px;
-  /* original size of the embedded image */
-  width: 100%;
-  /* smaller screens than 442px will show full-width box */
-  margin: auto;
-  /* center with known width */
-  text-align: center;
-}
-.gadget-content .worklist-empty h2 {
-  font-size: 300%;
-  /* copy behaviour of previously used .first-loader */
-  margin-bottom: 0.5em;
-}
-.gadget-content .worklist-empty img {
-  width: 100%;
-  /* height will be computed automatically and proportionally */
-}
-.gadget-content ul.document-listview:not(:last-of-type) {
-  margin-bottom: 12pt;
-}
-.gadget-content ul.document-listview:first-child {
-  margin-top: 6pt;
-}
-.gadget-content ul.document-listview li {
+      }
+    }
+  }
+
+  .ui-content-header-plain {
+    font-size: 150%;
+  }
+  .worklist-empty {
+    max-width: 442px; /* original size of the embedded image */
+    width: 100%; /* smaller screens than 442px will show full-width box */
+    margin: auto; /* center with known width */
+    text-align: center;
+    h2 {
+      font-size: 300%; /* copy behaviour of previously used .first-loader */
+      margin-bottom: 0.5em;
+    }
+    img {
+      width: 100%; /* height will be computed automatically and proportionally */
+    }
+  }
+  ul.document-listview {
+    &:not(:last-of-type) {
+      margin-bottom: @double-margin-size;
+    }
+    &:first-child {
+      margin-top: @margin-size;
+    }
+
+    li {
       border-color: rgba(0, 0, 0, 0.3);
       border-width: 1px;
       border-style: solid;
       border-bottom-style: none;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
-}
-.gadget-content ul.document-listview li:not(.ui-li-has-count) a:after {
+      box-shadow: 0 1px 3px rgba(0,0,0,.15);
+  
+      &:not(.ui-li-has-count) {
+        a {
+          &:after {
             font-family: FontAwesome;
             content: "\f0da";
             text-align: right;
             float: right;
             position: absolute;
-  right: 12pt;
-}
-.gadget-content ul.document-listview li a {
+            right: @double-margin-size;
+          }
+        }
+      }
+
+      a {
         display: block;
         position: relative;
-  padding: 6pt 12pt;
-  padding-right: 24pt;
+        padding: @margin-size @double-margin-size;
+        padding-right: @quadruple-margin-size;
+
         color: #222222;
+
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-}
-.gadget-content ul.document-listview li a:hover,
-.gadget-content ul.document-listview li a:active {
-  background-color: #e0e0e0;
-}
-.gadget-content ul.document-listview li:first-child {
-  border-top-left-radius: 0.325em;
-  border-top-right-radius: 0.325em;
-}
-.gadget-content ul.document-listview li:last-child {
-  border-bottom-left-radius: 0.325em;
-  border-bottom-right-radius: 0.325em;
+
+        &:hover, &:active {
+          background-color: @colorblocklinkbackground;
+        }
+      }
+      &:first-child {
+        border-top-left-radius: @radius;
+        border-top-right-radius: @radius;
+      }
+      &:last-child {
+        border-bottom-left-radius: @radius;
+        border-bottom-right-radius: @radius;
         border-bottom-style: solid;
-}
-.gadget-content ul.document-listview li .ui-li-count {
+      }
+
+      .ui-li-count {
         float: right;
-  padding: 0 6pt;
+        padding: 0 @margin-size;
         border: 1px solid rgba(0, 0, 0, 0.14);
-  border-radius: 0.325em;
+        border-radius: @radius;
         position: absolute;
-  right: 6pt;
-}
-@media only screen and (min-width: 45em) and (max-width: 85em), not screen and (max-width: 85em) {
-  .gadget-content .left,
-  .gadget-content .right {
+        right: @margin-size;
+      }
+
+    }
+  }
+
+  @media @tablet, @desktop {
+    .left, .right {
       vertical-align: top;
       display: inline-block;
       width: 50%;
     }
-  .gadget-content .right {
-    padding-left: 24pt;
+    .right {
+      // Put padding only in .right, to keep .center aligned with .left
+      padding-left: @quadruple-margin-size;
     }
-}
-.gadget-content .ui-field-contain > label {
-  color: #767676;
-}
-.gadget-content .required > .ui-field-contain > label {
+  }
+
+  //Label
+  .ui-field-contain {
+    & > label {
+      color: @grey;
+
+    }
+  }
+  //Label styling in required and "invisible" field
+  .required > .ui-field-contain > label {
+    // backward-compatibility: support for ERP5 field class defined in formulator configuration
+    // inform user that the field is needed by contraint, but do not prevent him to save the value
     font-weight: bold;
-}
-.gadget-content .invisible > .ui-field-contain > label {
+  }
+  .invisible > .ui-field-contain > label {
+    // used to hide the label of a formbox
     display: none;
-}
-@media only screen and (min-width: 45em) and (max-width: 85em), not screen and (max-width: 85em) {
-  .gadget-content .ui-field-contain {
-    display: flex;
   }
-  .gadget-content .ui-field-contain > label {
+
+
+  @media @tablet, @desktop {
+    .ui-field-contain {
+      display: flex;
+      & > label {
         flex: 1;
       }
-  .gadget-content .ui-field-contain > label + div {
+      & > label + div {
         flex: 3;
       }
-}
-@media only screen and (min-width: 45em) and (max-width: 85em), not screen and (max-width: 85em) {
-  .gadget-content .center .ui-field-contain > label + div {
+    }
+  }
+  @media @tablet, @desktop {
+    // Align field on the left group's field
+    .center {
+      .ui-field-contain {
+        & > label + div {
           flex: 7;
         }
-}
-.gadget-content .bottom iframe {
+      }
+    }
+  }
+
+  // Increase the size of the editors when placed
+  // in the bottom group
+  .bottom {
+    iframe {
       height: 80vh;
-}
-.gadget-content form .ui-field-contain {
+    }
+  }
+
+/*
+  @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 .ui-field-contain {
+    // relative for displaying popups with errors
     position: relative;
-}
-.gadget-content form .ui-field-contain > span {
-  animation: fadein 0.2s ease-out;
-}
-@media not screen and (max-width: 85em), only screen and (min-width: 45em) and (max-width: 85em) {
-  .gadget-content form .ui-field-contain > span {
-    background-color: #FF6600;
-    color: #f8fff3;
+
+    & > span {
+      animation: fadein @transition-timing;
+
+      @media @desktop, @tablet {
+        background-color: @coloraccent;
+        color: @colorsubheaderlink;
         left: 25%;
         position: absolute;
         bottom: 110%;
         white-space: pre;
-    padding: 6pt;
-    border-radius: 0.325em;
+        padding: @margin-size;
+        border-radius: @border-radius;
         width: auto;
         z-index: 1001;
-  }
-  .gadget-content form .ui-field-contain > span:before {
+
+        &:before {
           position: absolute;
           top: 100%;
           left: 2em;
           display: inline-block;
-    border-right: 6pt solid transparent;
-    border-top: 6pt solid #FF6600;
-    border-left: 6pt solid transparent;
+          border-right: @margin-size solid transparent;
+          border-top: @margin-size solid @coloraccent;
+          border-left: @margin-size solid transparent;
           content: '';
         }
-}
-@media not screen and (min-width: 45em) {
-  .gadget-content form .ui-field-contain > span {
-    margin-left: 6pt;
-    color: #FF6600;
+      }
+      @media @smartphone {
+        margin-left: @margin-size;
+        color: @coloraccent;
+      }
+    }
   }
 }
+
 /**********************************************
 * Gadget: HTML5 input field
 **********************************************/
-.gadget-content .ui-field-contain .ui-input-has-appendinx,
-.gadget-content .ui-field-contain .ui-input-has-prependinx {
+.gadget-content .ui-field-contain {
+  .ui-input-has-appendinx,
+  .ui-input-has-prependinx {
     display: flex;
-}
-.gadget-content .ui-field-contain .ui-input-has-appendinx i,
-.gadget-content .ui-field-contain .ui-input-has-prependinx i {
+    i {
       display: block;
       padding: 3pt;
       color: #777777;
       font-weight: 400;
+    }
+  }
 }
 /**********************************************
 * Gadget: relation field
 **********************************************/
 .relation-input {
   display: flex;
-}
-.relation-input a,
-.relation-input button {
-  width: 24pt;
-  overflow: hidden;
-  text-indent: -9999px;
-  white-space: nowrap;
-  display: block;
-  padding-top: 3pt;
-  padding-bottom: 3pt;
-}
-.relation-input a::before,
-.relation-input button::before {
+  a, button {
+      .hide_text(@width: @quadruple-margin-size);
+
+      &::before {
         float: left;
         text-indent: 0;
-  margin-left: 6pt;
-}
-.relation-input div {
+        margin-left: @margin-size;
+      }
+
+      display: block;
+
+      padding-top: @half-margin-size;
+      padding-bottom: @half-margin-size;
+  }
+
+  div {
     position: relative;
-}
-.relation-input ul {
+  }
+  ul {
     position: absolute;
     display: block;
     width: 100%;
     z-index: 501;
-}
-.relation-input ul li {
+    li {
       cursor: pointer;
-  background-color: #393939;
-  color: #FFFFFF;
-  padding: 3pt;
-  padding-left: 6pt;
+
+      background-color: @panelbackgroundcolor;
+
+      color: @white;
+      padding: @half-margin-size;
+      padding-left: @margin-size;
       display: block;
       text-overflow: ellipsis;
       overflow: hidden;
       white-space: nowrap; 
+
+      &::before {
+        padding-right: @margin-size;
+      }
+      // No transition, as it doesn't feel right
+      // transition: background-color @transition-timing;
+      &:hover, &:active {
+        background-color: @paneldarkerbackgroundcolor;
+      }
+
+    }
+  }
+  .ui-icon-warning {
+    color: @coloraccent;
+    // Link is disabled in this case
+    opacity: 1;
+  }
 }
-.relation-input ul li::before {
-  padding-right: 6pt;
-}
-.relation-input ul li:hover,
-.relation-input ul li:active {
-  background-color: #1F1F1F;
-}
+
 /**********************************************
 * Gadget: datetime field
 **********************************************/
 .datetimefield {
   display: flex;
-}
-.datetimefield div[data-gadget-scope=INPUT] {
+  div[data-gadget-scope=INPUT] {
     flex: 2;
-}
-.datetimefield div[data-gadget-scope=SELECT] {
+  }
+  div[data-gadget-scope=SELECT] {
     flex: 1;
+  }
 }
+
 /**********************************************
 * Gadget: float/integer field
 **********************************************/
-.floatfield p,
-.integerfield p,
-.floatfield input,
-.integerfield input {
+.floatfield, .integerfield {
+  p, input {
     text-align: right;
+    // Do not render float/integer on multiline
+    // as it make them unreadable
     white-space: nowrap;
+  }
 }
+
 /**********************************************
 * Listbox
 **********************************************/
 div[data-gadget-scope='erp5_searchfield'] {
-  padding-top: 6pt;
-}
-div[data-gadget-scope='erp5_searchfield'] .ui-input-text {
+  padding-top: @margin-size;
+
+  .ui-input-text {
     display: flex;
-}
-div[data-gadget-scope='erp5_searchfield'] .ui-input-text div[data-gadget-scope='input'] {
+    div[data-gadget-scope='input'] {
       width: 100%;
-}
-div[data-gadget-scope='erp5_searchfield'] button {
-  padding: 3pt;
-}
-div[data-gadget-scope='erp5_searchfield'] div.search_parsed_value {
+    }
+  }
+  button {
+    padding: @half-margin-size;
+  }
+  div.search_parsed_value {
     display: flex;
     flex-direction: row;
-}
-div[data-gadget-scope='erp5_searchfield'] div.search_parsed_value button {
+    button {
+      // padding: @half-margin-size;
       border: 1px solid rgba(0, 0, 0, 0.14);
-  border-radius: 0.325em;
-  margin-right: 6pt;
+      border-radius: @radius;
+
+      margin-right: @margin-size;
       max-width: 6em;
+      // Do not put title on multi line in case of small screen
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
       -o-text-overflow: ellipsis;
       -ms-text-overflow: ellipsis;
+    }
+  }
 }
-.document_table .ui-table-header {
+
+.document_table {
+
+  .ui-table-header {
     display: flex;
-  padding-top: 3pt;
-  padding-bottom: 3pt;
-}
-@media not screen and (min-width: 45em) {
-  .document_table .ui-table-header {
-    border-bottom: 2px solid #085078;
+    padding-top: @half-margin-size;
+    padding-bottom: @half-margin-size;
+    @media @smartphone {
+      border-bottom: 2px solid @colorheaderbackground;
     }
-}
-.document_table .ui-table-header h1 {
-  color: #767676;
+
+    h1 {
+      // XXX TODO Same color than label
+      color: @grey;
       flex: 2;
       align-self: flex-end;
-}
-@media not screen and (min-width: 45em) {
-  .document_table .ui-table-header h1 span.listboxloader {
+
+      // Hide the pagination info next to the listbox title
+      @media @smartphone {
+        span.listboxloader {
           display: none;
-  }
-  .document_table .ui-table-header h1 span.listboxloader.ui-icon-spinner {
+          &.ui-icon-spinner {
+            // Show the loader
             display: initial;
           }
-}
-.document_table .ui-table-header button {
-  padding: 3pt;
+        }
+      }
+    }
+
+    button {
+      padding: @half-margin-size;
       border: 1px solid rgba(0, 0, 0, 0.14);
-  border-radius: 0.325em;
-  margin-right: 6pt;
-}
-.document_table .ui-table-header button:last-of-type {
+      border-radius: @radius;
+
+      margin-right: @margin-size;
+      &:last-of-type {
         margin-right: 0;
-}
-@media not screen and (min-width: 45em) {
-  .document_table .ui-table-header button {
-    width: 2em;
-    overflow: hidden;
-    text-indent: -9999px;
-    white-space: nowrap;
       }
-}
-.document_table .ui-table-header button::before {
-  margin-right: 6pt;
-}
-@media not screen and (min-width: 45em) {
-  .document_table .ui-table-header button::before {
+
+      @media @smartphone {
+        .hide_text(@width: 2em);
+      }
+
+      &::before {
+        margin-right: @margin-size;
+
+        @media @smartphone {
           float: left;
           text-indent: 0;
         }
-}
-.document_table table {
+      }
+    }
+  }
+
+  table {
     width: 100%;
     text-align: left;
-}
-.document_table table th,
-.document_table table td {
+
+    th, td {
+      // line-height: 1.5em;
       vertical-align: middle;
-  padding: 3pt;
-}
-.document_table table thead,
-.document_table table tfoot {
-  background-color: #085078;
-  color: #FFFFFF;
-}
-.document_table table thead a,
-.document_table table tfoot a {
-  color: #FFFFFF;
+      padding: @half-margin-size;
+    }
+
+    thead, tfoot {
+      background-color: @colorheaderbackground;
+      color: @white;
+
+      a {
+        color: @white;
         text-decoration: underline;
-}
-.document_table table thead tr th,
-.document_table table tfoot tr th {
-  padding: 6pt 3pt;
-}
-@media not screen and (min-width: 45em) {
-  .document_table table thead,
-  .document_table table tfoot {
+      }
+
+      // XXX Same than cells
+      tr { th {
+        padding: @margin-size @half-margin-size;
+      }}
+
+      // text-align: center;
+
+      @media @smartphone {
         display: none;
       }
-}
-.document_table table a {
-  color: #1F1F1F;
-}
-.document_table table tbody {
-  animation: fadein 0.2s ease-out;
-}
-.document_table table tbody tr:nth-child(even) {
-  background-color: #f2f2f2;
-}
-.document_table table tbody tr:hover,
-.document_table table tbody tr:active {
-  background-color: #e0e0e0;
-}
-@media not screen and (max-width: 85em), only screen and (min-width: 45em) and (max-width: 85em) {
-  .document_table table tbody td:not(:last-child) {
-    border-right: 1px solid rgba(0, 0, 0, 0.14902);
     }
-}
-@media not screen and (min-width: 45em) {
-  .document_table table tbody tr {
+
+    a {
+      color: @colorforeground;
+    }
+
+    tbody {
+      animation: fadein @transition-timing;
+
+      tr {
+        &:nth-child(even) {
+          background-color: darken(@colorbackground, 5%);
+        }
+        &:hover, &:active {
+          background-color: @colorblocklinkbackground
+        }
+      }
+
+      @media @desktop, @tablet {
+        td:not(:last-child) {
+          border-right: 1px solid @listboxbordercolor;
+        }
+      }
+
+      @media @smartphone {
+        tr {
+          // each row becomes a table, now block
           display: block;
           overflow: hidden;
           width: 100%;
           position: relative;
+          // Only 2 visible lines are visible
           height: 4em;
           line-height: 2em;
-  }
-  .document_table table tbody tr td *,
-  .document_table table tbody tr th * {
+
+          td, th {
+            * {
+              // Disable all block (div, p, ...)
               display: inline;
             }
-  .document_table table tbody tr td:first-child,
-  .document_table table tbody tr th:first-child {
+
+            &:first-child {
+              // first cell must be locked
               display: inline-block;
               width: 100%;
-  }
-  .document_table table tbody tr td:first-child a,
-  .document_table table tbody tr th:first-child a {
+
+              a {
+                // stretch first link to full width (positioned relative to <tr>)
                 position: absolute;
                 width: 100%;
                 top: 0;
@@ -1449,135 +1699,137 @@ div[data-gadget-scope='erp5_searchfield'] div.search_parsed_value button {
                 overflow: hidden;
                 white-space: nowrap;
                 text-overflow: ellipsis;
-    padding-top: 6pt;
-  }
-  .document_table table tbody tr td:first-child a:after,
-  .document_table table tbody tr th:first-child a:after {
+                // Reduce the gap between the first and second visible lines
+                padding-top: @margin-size;
+
+                &:after {
+                  // XXX copy/pasted
                   font-family: FontAwesome;
                   content: "\f0da";
                   font-size: 1.25em;
                   position: absolute;
-    right: 6pt;
+                  right: @margin-size;
                   top: 50%;
                   margin-top: -0.75em;
-    background-color: #FFFFFF;
+
+                  background-color: @colorbackground;
                   border-radius: 0.5em;
                   width: 1em;
                   text-align: center;
                   line-height: 1em;
                 }
-  .document_table table tbody tr td:first-child ~ th,
-  .document_table table tbody tr th:first-child ~ th,
-  .document_table table tbody tr td:first-child ~ td,
-  .document_table table tbody tr th:first-child ~ td {
+
+              }
+
+              ~ th, ~ td {
+                // set line height on cells after first row
+                // First column must be more visible
                 font-size: 0.8em;
+                // Cells must be next to the other and correctly aligned
                 display: inline;
                 word-break: break-word;
-  }
-  .document_table table tbody tr td:first-child ~ th a,
-  .document_table table tbody tr th:first-child ~ th a,
-  .document_table table tbody tr td:first-child ~ td a,
-  .document_table table tbody tr th:first-child ~ td a {
+
+                a {
                   pointer-events: none;
-    color: #767676;
+                  // Add contrast with the first column content
+                  color: @grey;
                 }
-  .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 td:first-child ~ td:not(:last-child) a:not(:empty):after,
-  .document_table table tbody tr th:first-child ~ td:not(:last-child) a:not(:empty):after {
+
+                &:not(:last-child) a:not(:empty):after {
+                  // add tide
                   content: " ~ ";
                 }
-}
-.document_table nav {
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  nav {
     display: flex;
-  padding-top: 6pt;
-  border-top: 2px solid rgba(0, 0, 0, 0.14902);
-}
-.document_table nav span {
+    padding-top: @margin-size;
+    border-top: 2px solid @listboxbordercolor;
+
+    span {
       opacity: .3;
       flex: 2;
       text-align: right;
       float: right;
-}
-.document_table nav a {
-  padding: 6pt;
-  border: 1px solid rgba(0, 0, 0, 0.14);
-  border-radius: 0.325em;
-  margin-right: 6pt;
-}
-.document_table nav a::before {
-  margin-right: 6pt;
-}
-.document_table nav a:hover,
-.document_table nav a:active {
-  background-color: #e0e0e0;
-}
-.document_table nav a:last-of-type {
+    }
+    a {
+      .button();
+
+      margin-right: @margin-size;
+      &:last-of-type {
         margin-right: 0;
-}
-.document_table nav a:hover,
-.document_table nav a:active {
-  background-color: #e0e0e0;
-}
-@media not screen and (min-width: 45em) {
-  .document_table nav a {
-    overflow: hidden;
-    text-indent: -9999px;
-    white-space: nowrap;
       }
-}
-@media not screen and (min-width: 45em) {
-  .document_table nav a::before {
+
+      &:hover, &:active {
+        background-color: @colorblocklinkbackground;
+      }
+
+      @media @smartphone {
+        .hide_text(@width: initial);
+      }
+
+      &::before {
+
+        @media @smartphone {
           float: left;
-    text-indent: 6pt;
+          text-indent: @margin-size;
+        }
+      }
+    }
   }
 }
+
 /**********************************************
 * Notification
 **********************************************/
 div[data-gadget-scope='notification'] {
   position: fixed;
   z-index: 99999;
-  bottom: 12pt;
-  right: -192pt;
+  bottom: @double-margin-size;
+
+  right: -@panelwidth - @double-margin-size;
   transition: transform 200ms ease-out;
   transform: translate3d(0, 0, 0);
-}
-div[data-gadget-scope='notification'].visible {
-  transform: translate3d(-216pt, 0, 0);
-}
-div[data-gadget-scope='notification'].visible .error {
+  &.visible {
+    transform: translate3d(-@panelwidth - @double-margin-size - @main-margin-size-desktop, 0, 0);
+    .error {
       animation: pulseerrormobile 1s ease-in infinite;
-}
-@media not screen and (max-width: 85em) {
-  div[data-gadget-scope='notification'].visible .error {
+      @media @desktop {
         animation: pulseerrordesktop 1s ease-in infinite;
       }
-}
-@media not screen and (min-width: 45em) {
-  div[data-gadget-scope='notification'].visible {
-    transform: translate3d(-198pt, 0, 0);
     }
-}
-div[data-gadget-scope='notification'] button {
+    @media @smartphone {
+      transform: translate3d(-@panelwidth - @double-margin-size - @main-margin-size-smartphone, 0, 0);
+    }
+  }
+
+  button {
     text-align: left;
-  width: 180pt;
-  padding: 12pt;
-  color: #f8fff3;
-  border-radius: 0.325em;
-}
-div[data-gadget-scope='notification'] button.success {
-  background-color: #37A419;
-}
-div[data-gadget-scope='notification'] button.error {
-  background-color: #FF6600;
+    width: @panelwidth;
+    padding: @double-margin-size;
+    color: @colorsubheaderlink;
+    border-radius: @border-radius;
+    &.success {
+      background-color: @backgroundgreen;
+    }
+    &.error {
+      background-color: @coloraccent;
+    }
+  }
 }
+
 @keyframes pulseerrormobile {
   0% {
     box-shadow: 0 0 0 0 rgba(255, 102, 0, 0.6);
   }
   100% {
-    box-shadow: 0 0 0 12pt rgba(255, 102, 0, 0);
+    box-shadow: 0 0 0 @double-margin-size rgba(255, 102, 0, 0);
   }
 }
 @keyframes pulseerrordesktop {
@@ -1588,6 +1840,7 @@ div[data-gadget-scope='notification'] button.error {
     box-shadow: 0 0 0 100pt rgba(255, 102, 0, 0);
   }
 }
+
 /**********************************************
 * JQM
 **********************************************/
@@ -1596,9 +1849,11 @@ div[data-gadget-scope='notification'] button.error {
   cursor: default;
   pointer-events: none;
 }
+
 .ui-screen-hidden {
   display: none;
 }
+
 /**********************************************
 * First loader
 **********************************************/
@@ -1609,171 +1864,119 @@ div[data-gadget-scope='notification'] button.error {
   transform: translate(-50%, -50%);
   font-size: 300%;
 }
+
 /**********************************************
 * Keyframes
 **********************************************/
 @keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+    from {transform:rotate(0deg);}
+    to {transform:rotate(360deg);}
 }
+
 @keyframes fadein {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
+    from {opacity:0;}
+    to {opacity:1;}
 }
 /**********************************************
 * Desktop Panel Hidden
 **********************************************/
-@media not screen and (max-width: 85em) {
-  .desktop-panel-hidden div[data-gadget-scope="header"] .ui-header {
+@media @desktop {
+  .desktop-panel-hidden {
+    div[data-gadget-scope="header"] .ui-header {
+  
       margin-left: 0;
       transform: translate3d(0, 0, 0);
+
+      h1 {
+        & > span {
+          .renderTabletNotALinkTitle();
         }
-  .desktop-panel-hidden div[data-gadget-scope="header"] .ui-header h1 > span {
-    padding-left: 16pt;
+        a, button {
+          &::before {
+            text-align: center;
           }
-  .desktop-panel-hidden div[data-gadget-scope="header"] .ui-header h1 > span::before {
-    margin-right: 14pt;
         }
-  .desktop-panel-hidden div[data-gadget-scope="header"] .ui-header h1 a::before,
-  .desktop-panel-hidden div[data-gadget-scope="header"] .ui-header h1 button::before {
-    text-align: center;
       }
-  .desktop-panel-hidden div[data-gadget-scope="header"] .ui-header > .ui-btn-right button,
-  .desktop-panel-hidden div[data-gadget-scope="header"] .ui-header > .ui-btn-right a {
+
+      & > .ui-btn-right {
+        button, a {
           border-left: 1px solid rgba(255, 255, 255, 0.55);
         }
-  .desktop-panel-hidden div[data-gadget-scope="header"] .ui-header .ui-controlgroup-controls button,
-  .desktop-panel-hidden div[data-gadget-scope="header"] .ui-header .ui-controlgroup-controls a {
-    background-color: #085078;
-    width: 8em;
       }
-  .desktop-panel-hidden div[data-gadget-scope="header"] .ui-header .ui-subheader {
-    flex: 1 100%;
-    text-align: center;
+
+      .ui-controlgroup-controls {
+        button, a {
+          .renderTabletHeaderButton();
+          &.ui-icon-warning {
+            background-color: @coloraccent;
           }
-  .desktop-panel-hidden div[data-gadget-scope="header"] .ui-header ul > li {
-    flex: 1;
-    border-left: 1px solid rgba(0, 0, 0, 0.55);
         }
-  .desktop-panel-hidden div[data-gadget-scope="header"] .ui-header ul > li:first-child {
-    border-left: none;
       }
-  .desktop-panel-hidden div[data-gadget-scope="header"] .ui-header ul > li a {
-    display: block;
+
+      .ui-subheader {
+        flex: 1 100%;
+        text-align: center;
       }
-  .desktop-panel-hidden div[data-gadget-scope="header"] .ui-header ul > li a {
-    padding-top: 3pt;
-    padding-bottom: 3pt;
-    line-height: inherit;
-    white-space: nowrap;
-    overflow: hidden;
+
+      ul > li {
+        .renderTabletSubListElement();
+        a {
+          .renderTabletSubLink();
         }
-  .desktop-panel-hidden div[data-gadget-scope="header"] .ui-header ul > li a::before {
-    font-size: 1.2em;
-    display: block;
       }
-  .desktop-panel-hidden .gadget-content {
-    padding-top: 7em;
     }
-  .desktop-panel-hidden div[data-gadget-scope='panel'] {
-    transform: translate3d(-186pt, 0, 0);
+    .gadget-content {
+      padding-top: 7em;
     }
-  .desktop-panel-hidden div[data-gadget-scope='panel'].visible {
+    div[data-gadget-scope='panel'] {
+      transform: translate3d(-@panelwidth - @margin-size, 0, 0);
+      &.visible {
         transform: translate3d(0, 0, 0);
       }
+    }
+  }
 }
 /**********************************************
 * Maximize
 **********************************************/
+
 div[data-gadget-scope='maximize'] button {
-  padding: 6pt;
-  border: 1px solid rgba(0, 0, 0, 0.14);
-  border-radius: 0.325em;
-}
-div[data-gadget-scope='maximize'] button::before {
-  margin-right: 6pt;
-}
-div[data-gadget-scope='maximize'] button:hover,
-div[data-gadget-scope='maximize'] button:active {
-  background-color: #e0e0e0;
+  .button();
 }
+
 .editor-maximize div[data-gadget-scope='editor'] {
   position: fixed;
   z-index: 1500;
   left: 0;
-  top: 30pt;
+  top: @headerheight;
   width: 100vw;
-  height: calc(100vh -  30pt );
-}
-.editor-maximize div[data-gadget-scope='editor'] iframe {
+  height: ~"calc(100vh - "@headerheight~")";
+  iframe {
     height: 100%;
+  }
 }
-/**********************************************
-* JSONForm
-**********************************************/
-fieldset > .jsonformfield {
-  padding-left: 0
-}
-.jsonformfield {
-  display: flex;
-  /*padding-left: 20px;*/
-  padding-top: 3px;
-  /*margin-left: 15px;*/
-}
-.jsonformfield button {
-  display: block;
-  vertical-align: top;
-}
-.jsonformfield .ui-btn-icon-top::before {
-  vertical-align: top;
-}
-.jsonformfield label {
-  word-break: keep-all;
-  hyphens: none;
-}
-.jsonformfield span {
-  color: rgb(94, 127, 141)
-}
-.jsonformfield .error {
-  color: #E82525;
-  font-weight: 600;
-}
-.jsonformfield input[type=number] {
-  text-align:right;
-}
+
 /**********************************************
 * Icons
 **********************************************/
-.ui-btn-icon-top::before,
-.ui-btn-icon-left::before,
-.ui-btn-icon-right::before,
-.ui-icon::before,
-.ui-btn-icon-notext::before {
+.ui-btn-icon-top, .ui-btn-icon-left, .ui-btn-icon-right, .ui-icon, .ui-btn-icon-notext {
+  &::before {
     font-family: FontAwesome;
     display: inline-block;
     content: "";
+  }
 }
-.ui-icon-warning {
-  background-color: #FF6600 !important;
-}
-.ui-icon-warning::before {
-  content: "\f071";
-}
+
 .ui-icon-spinner {
+  // Don't fade spinner
   opacity: 1;
-}
-.ui-icon-spinner::before {
+  &::before {
     content: "\f110";
     animation: spin .5s infinite linear;
+  }
 }
+
+
 /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
    readers do not read off random characters that represent icons */
 .ui-icon-glass::before {
@@ -2106,6 +2309,9 @@ fieldset > .jsonformfield {
 .ui-icon-eye-slash::before {
   content: "\f070";
 }
+.ui-icon-warning::before {
+  content: "\f071";
+}
 .ui-icon-low-vision::before {
   content: "\f2a8";
 }
@@ -2376,7 +2582,7 @@ fieldset > .jsonformfield {
   content: "\f0d7";
 }
 .ui-icon-caret-up::before,
-hmtl .ui-icon-carat-u::before {
+hmtl .ui-icon-carat-u::before{
   content: "\f0d8";
 }
 .ui-icon-caret-left::before,

package.json

@@ -18,6 +18,7 @@
     "grunt-contrib-copy": "~0.4.1",
     "grunt-contrib-qunit": "~0.3.0",
     "grunt-contrib-watch": "~0.5.3",
+    "grunt-contrib-less": "",
     "grunt-jslint": "1.1.14",
     "grunt-open": "~0.2.2",
     "sinon": "~1.7.3"