Index: admin/style/default.css
===================================================================
--- admin/style/default.css	(revision 3762)
+++ admin/style/default.css	(revision 3763)
@@ -222,4 +222,7 @@
 
 /** --------------------------------------------------
+  Colors
+--------------------------------------------------- */
+/** --------------------------------------------------
     Common rules
 --------------------------------------------------- */
@@ -233,4 +236,6 @@
 
 body {
+  color: #323232;
+  background: #fff;
   font-size: 1.4rem;
   line-height: 1.5;
@@ -264,4 +269,5 @@
 
 h2 {
+  color: #676e78;
   font-size: 1.5em;
   font-weight: normal;
@@ -271,4 +277,5 @@
 h3,
 .as_h3 {
+  color: #d33800;
   font-size: 1.34em;
   font-weight: normal;
@@ -278,8 +285,10 @@
 h4,
 .as_h4 {
+  color: #676e78;
   font-size: 1.16em;
   line-height: 1.5; }
 
 h5 {
+  color: #676e78;
   font-size: 1em;
   line-height: 1.5;
@@ -287,4 +296,5 @@
 
 h6 {
+  color: #676e78;
   font-size: 1em;
   line-height: 1.5; }
@@ -299,4 +309,7 @@
 
 #header {
+  color: #fff;
+  background: #676e78;
+  border-bottom: 4px solid #a2cbe9;
   width: 99.99%;
   /* Bugfix Chrome >= 49.0.2623.108 */
@@ -314,4 +327,5 @@
 
 #wrapper {
+  background: #f3f3f3 url(bg_wrapper.png) repeat-y 14em;
   position: relative;
   padding-top: 1.5em;
@@ -331,8 +345,10 @@
 
 #content {
+  background: #fff;
   margin: 0 0 0 14em;
   padding: .5em 1.5em .75em 2.5em; }
 
 #main-menu {
+  background: #f3f3f3;
   width: 14em;
   float: left;
@@ -343,4 +359,6 @@
 
 #footer {
+  background-color: #fff;
+  border-top: 1px solid #cbced1;
   clear: both;
   position: relative;
@@ -350,4 +368,5 @@
 /* to hide main-menu */
 #collapser {
+  background: #c9c9c9;
   position: absolute;
   top: 0;
@@ -361,4 +380,10 @@
   z-index: 1;
   transition: none; }
+  #collapser:hover, #collapser:focus {
+    background: #a2cbe9; }
+  .hide-mm #collapser {
+    background: #a2cbe9; }
+    .hide-mm #collapser:hover, .hide-mm #collapser:focus {
+      background: #c9c9c9; }
 
 .expand-mm {
@@ -380,4 +405,7 @@
 .hide-mm .expand-mm {
   display: block; }
+
+#wrapper.hide-mm {
+  background: #fff; }
 
 /* -------------------------------------------------------------- layout: two-cols */
@@ -448,4 +476,6 @@
 /* ---------------------------------------------------------------- layout: popups */
 .popup h1 {
+  color: #fff;
+  background: #676e78;
   display: block;
   width: 100%;
@@ -707,100 +737,4 @@
     float: none; } }
 /** --------------------------------------------------
-	Colors
---------------------------------------------------- */
-body {
-  color: #323232;
-  background: #fff; }
-
-h2 {
-  color: #676e78; }
-
-h3,
-.as_h3 {
-  color: #d33800; }
-
-h4,
-.as_h4 {
-  color: #676e78; }
-
-h5 {
-  color: #676e78; }
-
-h6 {
-  color: #676e78; }
-
-/* ---------------------------------------------------------------- layout: main */
-#header {
-  color: #fff;
-  background: #676e78;
-  border-bottom: 4px solid #a2cbe9; }
-
-#wrapper {
-  background: #f3f3f3 url(bg_wrapper.png) repeat-y 14em; }
-
-#content {
-  background: #fff; }
-
-#main-menu {
-  background: #f3f3f3; }
-
-#footer {
-  background-color: #fff;
-  border-top: 1px solid #c9c9c9; }
-
-/* to hide main-menu */
-#collapser {
-  background: #c9c9c9; }
-  #collapser:hover, #collapser:focus {
-    background: #a2cbe9; }
-  .hide-mm #collapser {
-    background: #a2cbe9; }
-    .hide-mm #collapser:hover, .hide-mm #collapser:focus {
-      background: #c9c9c9; }
-
-/* if main-menu is hidden */
-#wrapper.hide-mm {
-  background: #fff; }
-
-/* ---------------------------------------------------------------- layout: popups */
-.popup h1 {
-  color: #fff;
-  background: #676e78; }
-
-/* ------------------------------------------------------------------------------------
-															UN POIL DE MEDIA QUERIES
------------------------------------------------------------------------------------- */
-@media screen and (max-width: 80em) {
-  #header,
-  h1 {
-    background: #323232; }
-
-  #top-info-user {
-    background: #676e78; }
-    #top-info-user a.active {
-      color: #fff;
-      background: #868686; }
-
-  #wrapper {
-    background: #f3f3f3 url(bg_wrapper.png) repeat-y 17em; } }
-@media screen and (max-width: 44em) {
-  #help-button {
-    background-color: #a2cbe9; } }
-@media screen and (max-width: 38em) {
-  h1 a:link {
-    border-right: 1px solid #c9c9c9; }
-  h1 a:hover, h1 a:focus {
-    border-right: 1px solid #a2cbe9; }
-
-  .pseudo-tabs li {
-    border-top: 1px solid #c9c9c9; } }
-@media screen and (max-width: 26.5em) {
-  h1,
-  h1 a {
-    border-right: #323232 !important; }
-
-  .pseudo-tabs li {
-    border-top: 1px solid #c9c9c9 !important; } }
-/** --------------------------------------------------
     Elements
 --------------------------------------------------- */
@@ -812,9 +746,4 @@
   background: #fff url(bg_h2.png) repeat-x center bottom; }
 
-h2 a:link,
-h2 a:visited {
-  color: #676e78;
-  border-color: #000; }
-
 /* page courante dans le fil d'ariane */
 .page-title {
@@ -831,5 +760,5 @@
 .fieldset h4,
 .pretty-title {
-  color: #D33800;
+  color: #d33800;
   font-size: 1em;
   font-weight: bold; }
@@ -844,9 +773,9 @@
   text-transform: uppercase;
   font-weight: bold;
-  color: #333; }
+  color: #323232; }
 
 #entry-sidebar h5 {
   font-weight: normal;
-  color: #333; }
+  color: #323232; }
 
 .entry-status img.img_select_option {
@@ -856,5 +785,5 @@
 h4 label,
 h5 label {
-  color: #333; }
+  color: #323232; }
 
 h2:first-child,
@@ -880,5 +809,5 @@
 
 caption {
-  color: #333;
+  color: #323232;
   font-weight: bold;
   text-align: left;
@@ -888,6 +817,6 @@
   border-width: 1px 0 1px 0;
   border-style: solid;
-  border-color: #dfdfdf;
-  background: #eef1ec;
+  border-color: #dbdbdb;
+  background: #f3f3f3;
   padding: .4em 1em .4em .5em;
   vertical-align: top;
@@ -898,5 +827,5 @@
   border-width: 0 0 1px 0;
   border-style: solid;
-  border-color: #e3e3e3;
+  border-color: #ececec;
   padding: .4em 1em .4em .5em;
   vertical-align: top; }
@@ -909,6 +838,6 @@
   height: 1px;
   border-width: 1px 0 0;
-  border-color: #dfdfdf;
-  background: #dfdfdf;
+  border-color: #dbdbdb;
+  background: #dbdbdb;
   border-style: solid; }
   hr.clearer {
@@ -946,7 +875,7 @@
 a:link,
 a:visited {
-  color: #2373A8;
+  color: #2373a8;
   text-decoration: none;
-  border-bottom: 1px dotted #999;
+  border-bottom: 1px dotted #868686;
   background-color: inherit;
   outline: 0; }
@@ -966,5 +895,5 @@
 
 .discrete a {
-  color: #333; }
+  color: #323232; }
 
 a:link {
@@ -1020,8 +949,8 @@
   border-width: 1px 0;
   border-style: solid;
-  border-color: #ccc;
-  background: #f7f7f7; }
+  border-color: #cbced1;
+  background: #fff; }
   fieldset:focus-within {
-    background-color: #eee; }
+    background-color: #ededed; }
 
 input[type=text],
@@ -1050,10 +979,10 @@
 
 input.invalid, textarea.invalid, select.invalid, input:not([type=file]):invalid:not(:focus) {
-  color: #900;
-  box-shadow: 0 0 0 3px rgba(218, 62, 90, 0.3); }
+  color: #ae323b;
+  box-shadow: 0 0 0 3px rgba(174, 50, 59, 0.3); }
 
 input.invalid, textarea.invalid, input:not([type=file]):invalid:not(:focus) {
-  border: 1px solid red;
-  background: #FFBABA; }
+  border: 1px solid #ae323b;
+  background: #ffbaba; }
 
 input[type=text],
@@ -1084,11 +1013,11 @@
 input[type=number],
 textarea, input:not([type=file]):invalid, input:not([type=file]):invalid:placeholder-shown {
-  background: #fcfcfc;
+  background: #f9f9f9;
   border-width: 1px;
   border-style: solid;
-  border-color: #dfdfdf; }
+  border-color: #dbdbdb; }
 
 input:focus, textarea:focus {
-  border-color: #9bca1c; }
+  border-color: #bee74b; }
 
 textarea {
@@ -1167,5 +1096,5 @@
 
 label.required abbr {
-  color: #900;
+  color: #ae323b;
   font-size: 1.3em;
   text-decoration: none; }
@@ -1221,5 +1150,5 @@
     background-color: inherit; }
   50% {
-    background-color: #ccff00; }
+    background-color: #bee74b; }
   100% {
     background-color: inherit; } }
@@ -1241,5 +1170,5 @@
 input[type=reset],
 input[type=submit] {
-  border: 1px solid #ccc;
+  border: 1px solid #cbced1;
   font-family: inherit;
   padding: 3px 10px;
@@ -1305,5 +1234,5 @@
   background-image: linear-gradient(to bottom, #f9f9f9, #eaeaea);
   background-repeat: repeat-x;
-  border-color: #dfdfdf #dfdfdf #c5c5c5; }
+  border-color: #cbced1; }
 
 button:hover,
@@ -1332,5 +1261,5 @@
   background-image: linear-gradient(to bottom, #eaeaea, #dadada);
   background-repeat: repeat-x;
-  border-color: #cccccc #cccccc #b5b5b5; }
+  border-color: #cbced1; }
 
 /* suppression */
@@ -1340,5 +1269,5 @@
 button.delete,
 a.button.delete {
-  color: #900; }
+  color: #ae323b; }
 
 input[type=submit].delete:hover,
@@ -1352,9 +1281,9 @@
 button.delete:focus,
 a.button.delete:focus {
-  color: #ffffff;
+  color: #fff;
   background-color: #b33630;
   background-image: linear-gradient(to bottom, #dc5f59, #b33630);
   background-repeat: repeat-x;
-  border-color: #cd504a; }
+  border-color: #dc5f59; }
 
 #info-box a.button,
@@ -1395,6 +1324,6 @@
 button[type=submit].disabled {
   color: #676e78;
-  background: #F5F5F5;
-  border: 1px solid #CCC; }
+  background: #f3f3f3;
+  border: 1px solid #cbced1; }
 
 input.disabled:hover,
@@ -1403,6 +1332,6 @@
 button[type=submit].disabled:hover {
   color: #676e78;
-  background: #eee;
-  border: 1px solid #CCC; }
+  background: #ececec;
+  border: 1px solid #cbced1; }
 
 /* specific buttons */
@@ -1416,5 +1345,5 @@
 a.metaGetMore {
   font-size: 0.825em;
-  color: #333;
+  color: #323232;
   background: #fff;
   box-shadow: none;
@@ -1447,5 +1376,5 @@
   #gototop a:hover,
   #gototop a:active {
-    color: #333;
+    color: #323232;
     background: transparent;
     border: none; }
@@ -1466,5 +1395,5 @@
   .addMeta a:not(.metaGetMore):hover,
   .addMeta a:not(.metaGetMore):focus {
-    background: #fc0; }
+    background: #abd0eb; }
 
 .warn,
@@ -1474,17 +1403,18 @@
   padding: .2em .66em .2em;
   text-indent: 24px;
-  color: #333;
   display: inline-block;
   line-height: 1.5em;
   border-radius: 3px; }
 
+.info {
+  color: #323232;
+  background: #d9edf7 url(msg-info.png) no-repeat 0.3em 0.3em;
+  border: 1px solid #bce8f1; }
+
 .warn,
 .warning {
-  background: #FEFACD url(msg-warning.png) no-repeat 0.3em 0.3em;
+  color: #323232;
+  background: #fefacd url(msg-warning.png) no-repeat 0.3em 0.3em;
   border: 1px solid #ffd478; }
-
-.info {
-  background: #D9EDF7 url(msg-info.png) no-repeat 0.3em 0.3em;
-  border: 1px solid #BCE8F1; }
 
 div.warn,
@@ -1510,5 +1440,5 @@
   margin-bottom: 1em;
   border-radius: 8px;
-  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); }
+  box-shadow: 1px 1px 2px rgba(50, 50, 50, 0.1); }
 
 p.error,
@@ -1534,6 +1464,6 @@
 .message,
 .static-msg {
-  background: #676e78 url(msg-std.png) no-repeat 0.7em 0.7em;
-  color: #fff; }
+  color: #fff;
+  background: #676e78 url(msg-std.png) no-repeat 0.7em 0.7em; }
 
 .message {
@@ -1543,5 +1473,5 @@
 @keyframes kf-message {
   0% {
-    background-color: #ccc; }
+    background-color: #cbced1; }
   100% {
     background-color: #676e78; } }
@@ -1552,6 +1482,5 @@
   color: #fff; }
 
-.success,
-.warning-msg {
+.success {
   color: #000; }
 
@@ -1567,4 +1496,5 @@
     background-color: #bee74b; } }
 .warning-msg {
+  color: #323232;
   background: #ffd478 url(msg-warning.png) no-repeat 0.7em 0.7em;
   border: 1px solid #ffd478;
@@ -1580,5 +1510,5 @@
 .warning-msg a,
 .info a {
-  color: #333; }
+  color: #323232; }
 
 .close-notice-parent {
@@ -1603,7 +1533,7 @@
   margin-bottom: 1em;
   border-radius: 8px;
-  background: #A2CBE9 url(msg-success.png) no-repeat 0.7em 0.7em;
   color: #000;
-  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); }
+  background: #a2cbe9 url(msg-success.png) no-repeat 0.7em 0.7em;
+  box-shadow: 1px 1px 2px rgba(50, 50, 50, 0.1); }
   .dc-update h3 {
     margin-top: 0;
@@ -1652,6 +1582,6 @@
     #prelude li a {
       padding: 3px 16px 3px 8px;
+      color: #323232;
       background: #a2cbe9;
-      color: #000;
       text-decoration: underline; }
       #prelude li a:hover, #prelude li a:focus {
@@ -1699,9 +1629,10 @@
   margin-left: 1.5em; }
 #top-info-blog input[type=submit] {
-  background: #000;
-  border-color: #868686;
+  background: #25a6e1;
+  border-color: #cbced1;
   margin-left: .33em; }
 #top-info-blog input[type=submit]:hover {
-  background: #868686; }
+  color: #fff;
+  background: #188bc0; }
 #top-info-blog p {
   display: inline-block;
@@ -1725,6 +1656,6 @@
     margin: 0;
     padding: 2px 8px 3px;
+    color: #d33800;
     background-color: #f3f3f3;
-    color: #d33800;
     font-weight: bold; }
 
@@ -1751,6 +1682,6 @@
   font-size: 1.15em; }
 #main-menu a {
-  color: #333;
-  border-bottom-color: #ccc; }
+  color: #323232;
+  border-bottom-color: #cbced1; }
 #main-menu ul {
   margin: 0 0 1.5em 0;
@@ -1776,14 +1707,9 @@
 #system-menu,
 #plugins-menu {
-  border-bottom: 1px dashed #A2CBE9; }
+  border-bottom: 1px dashed #a2cbe9; }
 
 #favorites-menu h3 {
-  color: #000;
   font-variant: small-caps;
   padding-top: .2em; }
-#favorites-menu .active {
-  background-color: transparent; }
-  #favorites-menu .active a {
-    color: #000; }
 
 #search-menu {
@@ -1796,5 +1722,5 @@
     line-height: 24px; }
   #search-menu p {
-    border: 1px solid #999;
+    border: 1px solid #868686;
     border-radius: .3em;
     position: relative;
@@ -1804,7 +1730,7 @@
     padding: 0 .25em;
     margin-left: .33em;
-    background: #dfdfdf;
-    border-color: #999;
-    color: #333;
+    color: #323232;
+    background: #c9c9c9;
+    border-color: #868686;
     border-bottom-right-radius: .3em;
     border-top-right-radius: .3em;
@@ -1812,10 +1738,10 @@
     border-bottom-left-radius: 0;
     border: none;
-    border-left: 1px solid #999;
+    border-left: 1px solid #868686;
     font-size: .91em;
     float: right; }
     #search-menu input[type="submit"]:hover, #search-menu input[type="submit"]:focus {
-      background: #676e78;
-      color: #fff; }
+      color: #fff;
+      background: #868686; }
 
 #qx {
@@ -1833,5 +1759,5 @@
 .part-tabs ul {
   padding: .5em 0 0 1em;
-  border-bottom: 1px solid #ccc;
+  border-bottom: 1px solid #c9c9c9;
   line-height: 1.8; }
 .part-tabs li {
@@ -1846,12 +1772,12 @@
     padding: .33em 1.5em;
     margin-right: -1px;
-    border: 1px solid #ccc;
+    border: 1px solid #c9c9c9;
     border-bottom: none;
     text-decoration: none;
-    color: #333;
-    background-color: #ecf0f1;
+    color: #323232;
+    background-color: #f3f3f3;
     display: inline-block; }
     .part-tabs li a:hover, .part-tabs li a:focus {
-      color: #000;
+      color: #323232;
       background: #fff;
       border-bottom-color: #fff; }
@@ -1868,5 +1794,5 @@
 .pseudo-tabs {
   margin: -.75em 0 2em 0;
-  border-bottom: 1px solid #bbb;
+  border-bottom: 1px solid #c9c9c9;
   display: table;
   width: 100%;
@@ -1878,5 +1804,5 @@
     border-width: 0 1px;
     border-style: solid;
-    border-color: #ccc;
+    border-color: #c9c9c9;
     padding: 0;
     margin: 0;
@@ -1888,14 +1814,14 @@
     border-bottom: none; }
     .pseudo-tabs a:hover, .pseudo-tabs a:focus {
-      background-color: #ecf0f1;
-      color: #333; }
+      background-color: #f3f3f3;
+      color: #323232; }
     .pseudo-tabs a.active {
-      background-color: #ecf0f1;
-      color: #d30e60; }
+      background-color: #f3f3f3;
+      color: #d33800; }
 
 /* contextual help */
 #help {
   margin-top: 4em;
-  background: #f5f5f5;
+  background: #f3f3f3;
   z-index: 100;
   clear: both;
@@ -1907,6 +1833,6 @@
     right: 0;
     width: 32rem;
-    border-left: 2px solid #FFD478;
-    border-top: 2px solid #FFD478;
+    border-left: 2px solid #ffd478;
+    border-top: 2px solid #ffd478;
     margin-top: 0;
     padding: .5em 0 0 0;
@@ -1920,13 +1846,13 @@
   padding: 0 1.5em 0 30px;
   cursor: pointer;
-  color: #2373A8;
+  color: #2373a8;
   line-height: 3; }
   #help-button.floatable {
-    border-top: 2px solid #ccc;
-    border-left: 2px solid #ccc;
-    border-bottom: 2px solid #ccc;
+    border-top: 2px solid #c9c9c9;
+    border-left: 2px solid #c9c9c9;
+    border-bottom: 2px solid #c9c9c9;
     border-bottom-left-radius: 1em;
     border-top-left-radius: 1em;
-    background-color: #f5f5f5;
+    background-color: #f3f3f3;
     position: fixed;
     top: 10px;
@@ -1938,11 +1864,11 @@
   #content.with-help #help-button {
     right: 32rem;
-    background-color: #f5f5f5;
+    background-color: #f3f3f3;
     position: fixed;
     top: 6em;
     z-index: 100;
-    border-top: 2px solid #FFD478;
-    border-left: 2px solid #FFD478;
-    border-bottom: 2px solid #FFD478;
+    border-top: 2px solid #ffd478;
+    border-left: 2px solid #ffd478;
+    border-bottom: 2px solid #ffd478;
     border-bottom-left-radius: 1em;
     border-top-left-radius: 1em; }
@@ -2040,5 +1966,5 @@
   background: #f3f3f3; }
 tr.line:focus-within {
-  background-color: #eee; }
+  background-color: #ededed; }
 
 td.status {
@@ -2052,5 +1978,5 @@
 th.noborder {
   border-width: 0 0 1px 0;
-  border-color: #dfdfdf;
+  border-color: #dbdbdb;
   line-height: 2em;
   padding-bottom: 0; }
@@ -2116,5 +2042,5 @@
   #filters-form .filters-options {
     padding-left: 2em;
-    border-left: 1px solid #ccc; }
+    border-left: 1px solid #c9c9c9; }
   #filters-form select {
     width: 14em;
@@ -2131,5 +2057,5 @@
     display: inline-block; }
   #filters-form:focus-within {
-    background-color: #eee; }
+    background-color: #ededed; }
 
 span.ib {
@@ -2215,15 +2141,14 @@
     text-decoration: none; }
   #icons a span {
-    border-bottom: 1px dotted #999;
-    color: #333; }
+    color: #323232;
+    border-bottom: 1px dotted #868686; }
   #icons a img {
     padding: 1.5em;
     background-color: #f9f9f9;
     border-radius: 8px;
-    border: 1px solid #dadada;
+    border: 1px solid #dbdbdb;
     display: inline-block; }
   #icons a:focus {
-    outline: 0;
-    border-color: #fff; }
+    outline: 0; }
     #icons a:focus span {
       border: 2px solid #bee74b; }
@@ -2231,5 +2156,5 @@
     background: #bee74b;
     outline: 0;
-    border-color: #dadada; }
+    border-color: #dbdbdb; }
   #icons a:focus span, #icons a:hover span {
     border-bottom-style: solid; }
@@ -2238,8 +2163,8 @@
 #quick {
   padding: 1em;
-  max-width: 976px;
+  max-width: 72em;
   margin: 0 auto;
-  background: #f5f5f5;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  background: #f3f3f3;
+  border: 1px solid #dbdbdb;
   text-align: left; }
   #quick h3 {
@@ -2248,8 +2173,8 @@
   #quick p.qinfo {
     margin: -.7em -1em 1em;
-    background: #D9EDF7 url(info.png) no-repeat 0.2em 0.2em;
-    border: 1px solid #BCE8F1;
+    background: #d9edf7 url(info.png) no-repeat 0.2em 0.2em;
+    border: 1px solid #bce8f1;
     padding: .2em 1em .1em 24px;
-    color: #000; }
+    color: #323232; }
   #quick #new_cat,
   #quick .q-cat,
@@ -2273,5 +2198,5 @@
   #dashboard-boxes .box {
     padding: 10px;
-    border: 1px solid #ccc;
+    border: 1px solid #cbced1;
     border-radius: 3px;
     min-height: 200px;
@@ -2311,10 +2236,4 @@
     margin: 0.2em 0 0 0; }
 
-/* message de mise à jour */
-#upg-notify ul {
-  padding-left: 1.5em; }
-#upg-notify li {
-  color: #fff; }
-
 #media_img_title_pattern {
   margin-right: 1em; }
@@ -2329,5 +2248,5 @@
   background: transparent url(user.png) no-repeat 0.5em 0.5em;
   width: 20em;
-  border: 1px solid #ccc;
+  border: 1px solid #cbced1;
   border-radius: .5em;
   padding: 0 1em .5em; }
@@ -2347,5 +2266,6 @@
     padding-left: 0; }
   .user-perm.user_super {
-    background-color: rgba(153, 197, 255, 0.25); }
+    border-color: #bee74b;
+    background-color: rgba(217, 237, 247, 0.5); }
 
 li.user_super,
@@ -2370,8 +2290,8 @@
   margin: 5px;
   padding: 10px 10px 5px 10px;
-  border: 1px solid #dfdfdf;
+  border: 1px solid #dbdbdb;
   position: relative; }
   .box.theme:hover {
-    background: #ecf0f1 url(texture.png); }
+    background: #f3f3f3 url(texture.png); }
   .box.theme input {
     margin-bottom: 1em; }
@@ -2386,6 +2306,6 @@
   .module-sshot img {
     padding: 5px;
-    background: #f7f7f7;
-    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
+    background: #f3f3f3;
+    box-shadow: 1px 1px 2px rgba(50, 50, 50, 0.1);
     border: 3px solid #fff;
     max-width: 100%; }
@@ -2451,13 +2371,13 @@
   margin: 0;
   padding: 10px;
-  background: rgba(250, 250, 250, 0.95); }
+  background: #f3f3f3; }
 .with-js #theme-new .module-infos.toggle-bloc {
   top: 128px;
   height: 80px;
-  border-top: 1px solid #e3e3e3; }
+  border-top: 1px solid #ececec; }
 .with-js #theme-new .module-actions.toggle-bloc {
   top: 208px;
   height: 40px;
-  border-bottom: 1px solid #e3e3e3; }
+  border-bottom: 1px solid #ececec; }
 
 .with-js .module-sshot:hover {
@@ -2471,8 +2391,8 @@
   padding: 20px 18px 6px;
   background: #fff url(texture.png);
-  border: 1px solid #eee;
+  border: 1px solid #ececec;
   border-radius: .5em;
   min-height: 326px;
-  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
+  box-shadow: 1px 1px 2px rgba(50, 50, 50, 0.1);
   position: relative; }
   .box.current-theme .module-sshot:hover {
@@ -2486,5 +2406,5 @@
     max-height: 273px; }
   .box.current-theme .module-name {
-    color: #D33800;
+    color: #d33800;
     font-size: 1.5em;
     margin-bottom: 1em; }
@@ -2509,5 +2429,5 @@
       margin-left: 2em; }
   #categories .placeholder {
-    outline: 1px dashed #4183C4;
+    outline: 1px dashed #2373a8;
     min-height: 2.5em; }
 
@@ -2516,5 +2436,5 @@
   margin: .66em 0;
   padding: .66em 1em;
-  border: 1px solid #ccc;
+  border: 1px solid #cbced1;
   border-radius: 3px; }
   .cat-line label {
@@ -2527,5 +2447,5 @@
     display: inline-block; }
   .cat-line .cat-line {
-    border: 1px solid #dfdfdf; }
+    border: 1px solid #dbdbdb; }
 
 p.cat-title {
@@ -2533,5 +2453,5 @@
 
 .cat-nb-posts a {
-  color: #333; }
+  color: #323232; }
 
 .cat-url {
@@ -2565,5 +2485,5 @@
 .media-item {
   position: relative;
-  border: 1px solid #dfdfdf;
+  border: 1px solid #dbdbdb;
   margin: 9px;
   padding: 10px 12px 6px;
@@ -2638,5 +2558,5 @@
 .media-folder {
   background: transparent url(bg_menu.png) repeat-y;
-  border-color: #eee; }
+  border-color: #ececec; }
   .media-folder .media-link {
     font-size: 1.125em;
@@ -2651,5 +2571,5 @@
 
 .media-folder-up {
-  border-color: #fff;
+  border-color: transparent;
   padding-bottom: 6px; }
 
@@ -2708,5 +2628,5 @@
   margin-left: 0;
   padding-left: 0;
-  border-bottom: 1px solid #dfdfdf; }
+  border-bottom: 1px solid #dbdbdb; }
   .files li {
     margin-left: 0;
@@ -2716,5 +2636,5 @@
   font-weight: bold; }
   .upload-msg.upload-error {
-    color: #900; }
+    color: #ae323b; }
 
 .upload-files {
@@ -2725,5 +2645,5 @@
   margin: 0;
   padding: .3em 0;
-  border-top: 1px solid #dfdfdf;
+  border-top: 1px solid #dbdbdb;
   position: relative; }
 
@@ -2749,7 +2669,7 @@
 .upload-filemsg {
   font-weight: bold;
-  color: green; }
-  .upload-filemsg .upload-error {
-    color: #900; }
+  color: #fff; }
+  .upload-filemsg.upload-error {
+    color: #ae323b; }
 
 .upload-progress {
@@ -2761,6 +2681,6 @@
     line-height: 1.2em;
     text-align: right;
-    background: green url(loader.png) repeat-x left top;
-    color: white;
+    background: #556f0f url(loader.png) repeat-x left top;
+    color: #fff;
     border-radius: 3px; }
 
@@ -2805,14 +2725,13 @@
 .modules tr.expand,
 .modules td.expand {
-  background: #f7f7f7;
-  border-color: #bee74b; }
+  background: #f3f3f3;
+  border-color: #a2cbe9; }
 
 .modules tr.expand td:first-child {
   font-weight: bold;
-  background: #dfe5e7; }
+  background: #f3f3f3; }
 
 .modules td.expand {
-  padding: 0 0 1em;
-  border-top: 1px solid #eaeaea; }
+  padding: 0 0 1em; }
   .modules td.expand div {
     display: inline-block;
@@ -2897,5 +2816,5 @@
   background-color: #f3f3f3; }
   .sb-box:focus-within {
-    background-color: #eee; }
+    background-color: #ededed; }
 
 #tb_excerpt {
@@ -2907,5 +2826,5 @@
   padding-left: 0; }
   #my-favs .fav-list {
-    border-top: 1px solid #eee; }
+    border-top: 1px solid #ececec; }
   .fav-list li {
     margin-left: 0;
@@ -2916,8 +2835,10 @@
     #my-favs .fav-list li {
       line-height: 2;
-      border-bottom: 1px solid #eee;
+      border-bottom: 1px solid #ececec;
       padding-top: 3px;
       padding-bottom: 3px;
       position: relative; }
+    #my-favs:focus-within .fav-list li {
+      border-bottom-color: #dbdbdb; }
     .fav-list li span.zoom {
       display: none; }
@@ -2927,6 +2848,6 @@
       bottom: 0;
       left: 10em;
-      background-color: #f7f7f7;
-      border: 1px solid #dfdfdf;
+      background-color: #f3f3f3;
+      border: 1px solid #dbdbdb;
       padding: .2em;
       border-radius: .5em; }
@@ -2936,5 +2857,5 @@
 
 #my-favs {
-  border-color: #9bca1c; }
+  border-color: #9ac123; }
   #my-favs input.position {
     margin: 0 0 .4em .2em; }
@@ -2952,6 +2873,6 @@
   bottom: 0;
   left: 10em;
-  background-color: #f7f7f7;
-  border: 1px solid #dfdfdf;
+  background-color: #f3f3f3;
+  border: 1px solid #dbdbdb;
   padding: .2em;
   border-radius: .5em; }
@@ -2991,5 +2912,5 @@
   margin-top: 0; }
 .guideline .one-box .box {
-  border: 1px solid #dfdfdf;
+  border: 1px solid #dbdbdb;
   padding: 2px .5em; }
 .guideline #main-menu ul {
@@ -3006,6 +2927,6 @@
 .ac_results {
   padding: 0px;
-  border: 1px dotted #f90;
-  background-color: white;
+  background-color: #fff;
+  border: 1px dotted #ffd478;
   overflow: hidden;
   z-index: 99999; }
@@ -3029,6 +2950,6 @@
 
 .ac_over {
-  background-color: #2373a8;
-  color: white; }
+  color: #fff;
+  background-color: #2373a8; }
 
 /* password indicator */
@@ -3059,5 +2980,5 @@
 
 .pw-mediocre .bar {
-  background: #f90;
+  background: #ff9900;
   width: 90px; }
 
@@ -3073,6 +2994,5 @@
 /* selects accès rapide */
 .anchor-nav {
-  background: #ecf0f1;
-  color: #000;
+  background: #fff;
   padding: 4px 1em; }
   .anchor-nav label {
@@ -3086,6 +3006,6 @@
 .nav_prevnext a,
 a.back {
-  color: #2373A8;
-  border: 1px solid #dfdfdf;
+  color: #2373a8;
+  border: 1px solid #dbdbdb;
   padding: 2px 1.5em;
   border-radius: .75em;
@@ -3096,11 +3016,11 @@
 
 a.onblog_link {
-  color: #333;
+  color: #323232;
   float: right;
-  border: 1px solid #eee;
+  border: 1px solid #ececec;
   padding: 2px 1.5em;
   border-radius: .75em;
-  background-color: #ECF0F1;
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); }
+  background-color: #ececec;
+  box-shadow: 0 1px 1px rgba(50, 50, 50, 0.3); }
 
 /* Pagination */
@@ -3120,12 +3040,12 @@
     text-align: center; }
   .pager .btn {
-    border: 1px solid #dfdfdf;
-    background-color: #fcfcfc;
-    color: #676e78;
+    border: 1px solid #dbdbdb;
+    background-color: #f3f3f3;
+    color: #2373a8;
     border-radius: 3px;
     overflow: hidden; }
     .pager .btn.no-link {
-      border-color: #dfdfdf;
-      background-color: #f9f9f9;
+      border-color: #dbdbdb;
+      background-color: #fff;
       padding: 1px 3px 0; }
   .pager .active {
@@ -3135,5 +3055,5 @@
     margin-left: 2em; }
     .pager .direct-access input[type=text] {
-      border: 1px solid #dfdfdf;
+      border: 1px solid #dbdbdb;
       padding: 3px 8px;
       margin-left: .25em;
@@ -3146,5 +3066,5 @@
     border: none; }
     .pager a:hover, .pager a:focus {
-      background-color: #ecf0f1; }
+      background-color: #dbdbdb; }
 
 .index .btn.no-link,
@@ -3157,5 +3077,5 @@
   font-weight: bold; }
 .index .btn.no-link {
-  color: #ccc; }
+  color: #c9c9c9; }
 .index .active {
   padding: 4px 8px;
@@ -3171,9 +3091,9 @@
   margin: 3px 10px 2px 0;
   padding: 5px .5em;
-  background: #ecf0f1;
+  color: #676e78;
+  background: #f3f3f3;
+  border: 1px solid #cbced1;
   border-radius: 3px;
-  font-weight: bold;
-  border: 1px solid #c5c5c5;
-  color: #676e78; }
+  font-weight: bold; }
 
 /* ---------------------------------------------------------------- utilisables partout  */
@@ -3184,5 +3104,5 @@
 .fieldset {
   background: #fff;
-  border: 1px solid #c5c5c5;
+  border: 1px solid #cbced1;
   border-radius: 3px;
   padding: 1em .7em .5em;
@@ -3191,5 +3111,5 @@
     margin-top: 0; }
   .fieldset:focus-within {
-    background-color: #eee; }
+    background-color: #ededed; }
 
 .right,
@@ -3215,5 +3135,5 @@
 
 .border-top {
-  border-top: 1px solid #999;
+  border-top: 1px solid #868686;
   padding-top: 1em;
   margin-top: 1em; }
@@ -3278,15 +3198,34 @@
 /* _media_item.js */
 .color-div {
-  border: 1px solid #ccc; }
+  border: 1px solid #c9c9c9; }
 
 /* ------------------------------------------------------------------------------------
 															UN POIL DE MEDIA QUERIES
 ------------------------------------------------------------------------------------ */
+@media screen and (max-width: 80em) {
+  #header,
+  h1 {
+    background: #323232; }
+
+  #top-info-user {
+    background: #676e78; }
+    #top-info-user a.active {
+      color: #fff;
+      background: #868686; }
+
+  #wrapper {
+    background: #f3f3f3 url(bg_wrapper.png) repeat-y 17em; } }
 @media screen and (max-width: 44em) {
   #help-button {
+    background-color: #a2cbe9;
     padding: 0;
     font-size: .83em;
     line-height: 68px; } }
 @media screen and (max-width: 38em) {
+  h1 a:link {
+    border-right: 1px solid #c9c9c9; }
+  h1 a:hover, h1 a:focus {
+    border-right: 1px solid #c9c9c9; }
+
   #dashboard-main {
     padding: 0; }
@@ -3305,8 +3244,13 @@
 
   .pseudo-tabs li {
+    border-top: 1px solid #c9c9c9;
     padding: .25em; }
     .pseudo-tabs li:first-child, .pseudo-tabs li:nth-of-type(2) {
       border-top: none; } }
 @media screen and (max-width: 26.5em) {
+  h1,
+  h1 a {
+    border-right: #323232 !important; }
+
   #content.with-help #help {
     font-size: 1.2rem; }
@@ -3330,4 +3274,7 @@
   td {
     padding: 0.3em 1em 0.3em 0; }
+
+  .pseudo-tabs li {
+    border-top: 1px solid #c9c9c9 !important; }
 
   .pseudo-tabs li:first-child {
@@ -3737,4 +3684,4 @@
   a.delete.debug:hover {
     background: #ffd478;
-    color: #900;
+    color: #ae323b;
     border-color: #ffd478; }
Index: admin/style/scss/default.scss
===================================================================
--- admin/style/scss/default.scss	(revision 3731)
+++ admin/style/scss/default.scss	(revision 3763)
@@ -6,5 +6,10 @@
 @import "init/mixins-functions";    // mixins, fonctions
 @import "init/rebase";              // init html tags
-@import "init/config";              // theme variables
+@import "init/config";              // variables
+
+/** --------------------------------------------------
+  Colors
+--------------------------------------------------- */
+@import "themes/light";
 
 /** --------------------------------------------------
@@ -17,9 +22,4 @@
 --------------------------------------------------- */
 @import "partials/layout";
-
-/** --------------------------------------------------
-	Colors
---------------------------------------------------- */
-@import "partials/colors";
 
 /** --------------------------------------------------
Index: admin/style/scss/init/_config.scss
===================================================================
--- admin/style/scss/init/_config.scss	(revision 3712)
+++ admin/style/scss/init/_config.scss	(revision 3763)
@@ -14,58 +14,17 @@
 // ========================================================================== //
 
-$sans-serif:		-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
+$sans-serif:    -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
 
-$sans-serif-input:	inherit;	// Use OS default font for input fields
+$sans-serif-input:  inherit;  // Use OS default font for input fields
 
-$monospace:			"Andale Mono",AndaleMono,Consolas,Monaco,"Courier New",monospace;
+$monospace:     "Andale Mono",AndaleMono,Consolas,Monaco,"Courier New",monospace;
 
-$html-font-size:			62.5%;		// Basically 10px (16px ⁄x 0.625) — Must be in %
+$html-font-size:      62.5%;    // Basically 10px (16px ⁄x 0.625) — Must be in %
 
-$body-font-size-small: 1.2rem;		// For screen smaller than $small-screen (see below)
+$body-font-size-small: 1.2rem;    // For screen smaller than $small-screen (see below)
 $body-font-size:       1.4rem;
-$body-font-size-large: 1.6rem;		// For screen larger or equal than $large-screen (see below)
+$body-font-size-large: 1.6rem;    // For screen larger or equal than $large-screen (see below)
 
-// ========================================================================== //
-// =Couleurs
-// ========================================================================== //
-
-// Palette de base
-
-$blue:       #137bbb;
-$green:      #9ac123;
-$red:        #c44d58;
-$light-blue: #a2cbe9;
-$orange:     #d33800;
-
-$gray:      #b2b2b2;
-$gray-dark: #676e78;
-
-$gray-very-dark:  shade($gray, 72%);	// #323232 (near to #333 used before)
-$gray-semi-dark:  shade($gray, 25%);	// #868686 (near to #999 used before)
-$gray-light:      tint($gray, 30%);		// #c9c9c9 (near to #ccc used before)
-$gray-very-light: tint($gray, 85%);		// #f3f3f3 (near to #f7f7f7 used before)
-
-$white: #fff;
-$black: #000;
-
-// Couleurs secondaires
-
-
-
-// Application
-
-$primary-color:        $gray-very-dark;		// #323232 : Texte courant
-$secondary-color:      $orange;				// #d33800 : Titres
-$ternary-color:        $gray-dark;				// #676e78 : Titres (secondaires)
-$link:                 $blue;					// #137bbb : Liens
-$primary-background:   $white;					// #fff : Fond courant
-$secondary-background: $gray-very-light;		// #c9c9c9 : Fond secondaire
-$ternary-background:   $gray-dark;				// #676e78 : Fond tertiaire
-
-$button-base:  $light-blue;
-$button-dark:  shade($button-base, 10%);
-$button-light: tint($button-base, 10%);
-
-// Autres
+// Divers
 
 $css-img-path: 'img'; // utile pour le mixin de fallback svg
@@ -75,11 +34,11 @@
 // ========================================================================== //
 
-$xxs-screen: 26.5em;	// 424 px
-$xs-screen:  38em;		// 608 px
-$s-screen:   44em;		// 704 px
-$m-screen:   48em;		// 768 px
-$l-screen:   61em;		// 976 px
-$xl-screen:  80em;		// 1280 px
-$xxl-screen: 120em;		// 1920 px
+$xxs-screen: 26.5em;  // 424 px
+$xs-screen:  38em;    // 608 px
+$s-screen:   44em;    // 704 px
+$m-screen:   48em;    // 768 px
+$l-screen:   61em;    // 976 px
+$xl-screen:  80em;    // 1280 px
+$xxl-screen: 120em;   // 1920 px
 
 // =========================================================================== //
@@ -94,3 +53,3 @@
 // collapser width
 
-$collapser-width:	10px;
+$collapser-width: 10px;
Index: admin/style/scss/partials/_auth.scss
===================================================================
--- admin/style/scss/partials/_auth.scss	(revision 3711)
+++ admin/style/scss/partials/_auth.scss	(revision 3763)
@@ -13,7 +13,7 @@
 	}
 	.fieldset {
-		border: 1px solid #9bca1c;
+		border: 1px solid $login-fieldset-border;
 		padding: 1em 1em 0 1em;
-		background: #fff;
+		background: $login-fieldset-background;
 		margin-bottom: 0;
 		margin-top: 1em;
Index: admin/style/scss/partials/_blog_pref.scss
===================================================================
--- admin/style/scss/partials/_blog_pref.scss	(revision 3444)
+++ admin/style/scss/partials/_blog_pref.scss	(revision 3763)
@@ -13,5 +13,5 @@
 	background: transparent url(user.png) no-repeat .5em .5em;
 	width: 20em;
-	border: 1px solid #ccc;
+	border: 1px solid $blog-user-border;
 	border-radius: .5em;
 	padding: 0 1em .5em;
@@ -35,5 +35,6 @@
 	}
 	&.user_super {
-		background-color: rgba(153, 197, 255, .25);
+    border-color: $blog-super-border;
+    background-color: $blog-super-background;
 	}
 }
Index: admin/style/scss/partials/_blog_theme.scss
===================================================================
--- admin/style/scss/partials/_blog_theme.scss	(revision 3468)
+++ admin/style/scss/partials/_blog_theme.scss	(revision 3763)
@@ -12,8 +12,8 @@
 	margin: 5px;
 	padding: 10px 10px 5px 10px;
-	border: 1px solid #dfdfdf;
+	border: 1px solid $theme-box-border;
 	position: relative;
 	&:hover {
-		background: #ecf0f1 url(texture.png);
+		background: $theme-box-over url(texture.png);
 	}
 	input {
@@ -25,5 +25,5 @@
 .module-name label {
 	margin-bottom: .5em;
-	color: #676e78;
+	color: $theme-name-color;
 }
 
@@ -32,7 +32,7 @@
 	img {
 		padding: 5px;
-		background: #f7f7f7;
-		box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
-		border: 3px solid #fff;
+		background: $theme-img-background;
+		box-shadow: 1px 1px 2px $theme-img-shadow;
+		border: 3px solid $theme-img-border;
 		max-width: 100%;
 	}
@@ -117,15 +117,15 @@
 		margin: 0;
 		padding: 10px;
-		background: rgba(250, 250, 250, .95);
+		background: $theme-action-background;
 	}
 	.module-infos.toggle-bloc {
 		top: 128px;
 		height: 80px;
-		border-top: 1px solid #e3e3e3;
+		border-top: 1px solid $theme-action-border;
 	}
 	.module-actions.toggle-bloc {
 		top: 208px;
 		height: 40px;
-		border-bottom: 1px solid #e3e3e3;
+		border-bottom: 1px solid $theme-action-border;
 	}
 }
@@ -143,9 +143,9 @@
 	margin: 5px;
 	padding: 20px 18px 6px;
-	background: #fff url(texture.png);
-	border: 1px solid #eee;
+	background: $theme-current-background url(texture.png);
+	border: 1px solid $theme-current-border;
 	border-radius: .5em;
 	min-height: 326px;
-	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
+	box-shadow: 1px 1px 2px $theme-current-shadow;
 	position: relative;
 	.module-sshot:hover {
@@ -155,5 +155,5 @@
 		float: left;
 		margin-right: 2em;
-		border: 9px solid #fff;
+		border: 9px solid $theme-current-img-border;
 		padding: 5px;
 		max-width: 308px;
@@ -161,5 +161,5 @@
 	}
 	.module-name {
-		color: #D33800;
+		color: $theme-current-name-color;
 		font-size: 1.5em;
 		margin-bottom: 1em;
Index: admin/style/scss/partials/_buttons.scss
===================================================================
--- admin/style/scss/partials/_buttons.scss	(revision 3517)
+++ admin/style/scss/partials/_buttons.scss	(revision 3763)
@@ -17,5 +17,5 @@
 input[type=reset],
 input[type=submit] {
-	border: 1px solid #ccc;
+	border: 1px solid $button-border;
 	font-family: $sans-serif-input;
 	padding: 3px 10px;
@@ -27,5 +27,5 @@
 	cursor: pointer;
 	position: relative;
-	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+	box-shadow: 0 1px 3px $button-shadow;
 	border-style: solid;
 	border-width: 1px;
@@ -52,8 +52,8 @@
 button.submit,
 input.button.start {
-	color: #fff;
-	background-color: #25a6e1;
-	@include background-image(linear-gradient(to bottom, #25a6e1, #188bc0));
-	border-color: #25a6e1;
+	color: $submit-color;
+	background-color: $submit-background;
+	@include background-image(linear-gradient(to bottom, $submit-background, $submit-background-alt));
+	border-color: $submit-background;
 }
 
@@ -68,7 +68,7 @@
 a.button.submit:hover,
 a.button.submit:focus {
-	background-color: #188bc0;
-	@include background-image(linear-gradient(to bottom, #188bc0, #25a6e1));
-	border-color: #188bc0;
+	background-color: $submit-background-alt;
+	@include background-image(linear-gradient(to bottom, $submit-background-alt, $submit-background));
+	border-color: $submit-background-alt;
 }
 
@@ -87,9 +87,9 @@
 a.button.delete,
 a.button.reset {
-	color: #000;
-	background-color: #eaeaea;
-	@include background-image(linear-gradient(to bottom, #f9f9f9, #eaeaea));
+	color: $reset-color;
+	background-color: $reset-background;
+	@include background-image(linear-gradient(to bottom, $reset-background-alt, $reset-background));
 	background-repeat: repeat-x;
-	border-color: #dfdfdf #dfdfdf #c5c5c5;
+  border-color: $reset-border;
 }
 
@@ -116,8 +116,8 @@
 a.button.reset:focus,
 a.button:focus {
-	background-color: #dadada;
-	@include background-image(linear-gradient(to bottom, #eaeaea, #dadada));
+	background-color: $reset-background-ter;
+	@include background-image(linear-gradient(to bottom, $reset-background, $reset-background-ter));
 	background-repeat: repeat-x;
-	border-color: #cccccc #cccccc #b5b5b5;
+  border-color: $reset-border;
 }
 
@@ -130,5 +130,5 @@
 button.delete,
 a.button.delete {
-	color: #900;
+  color: $delete-color;
 }
 
@@ -143,9 +143,9 @@
 button.delete:focus,
 a.button.delete:focus {
-	color: #ffffff;
-	background-color: #b33630;
-	@include background-image(linear-gradient(to bottom, #dc5f59, #b33630));
+	color: $delete-hover-color;
+	background-color: $delete-hover-background;
+	@include background-image(linear-gradient(to bottom, $delete-hover-background-alt, $delete-hover-background));
 	background-repeat: repeat-x;
-	border-color: #cd504a;
+	border-color: $delete-hover-border;
 }
 
@@ -158,8 +158,8 @@
 .button.add,
 button.add {
-	color: #000;
-	background-color: #bee74b;
-	@include background-image(linear-gradient(to bottom, #bee74b, #9bca1c));
-	border-color: #bee74b;
+	color: $add-color;
+	background-color: $add-background;
+	@include background-image(linear-gradient(to bottom, $add-background, $add-background-alt));
+	border-color: $add-border;
 	padding: .33em 1.33em .5em;
 }
@@ -171,7 +171,7 @@
 button.add:active,
 button.add:focus {
-	background-color: #9bca1c;
-	@include background-image(linear-gradient(to bottom, #9bca1c, #bee74b));
-	border-color: #9bca1c;
+	background-color: $add-background-alt;
+	@include background-image(linear-gradient(to bottom, $add-background-alt, $add-background));
+	border-color: $add-border-alt;
 }
 
@@ -195,7 +195,7 @@
 button.disabled,
 button[type=submit].disabled {
-	color: #676e78;
-	background: #F5F5F5;
-	border: 1px solid #CCC;
+	color: $button-disabled-color;
+	background: $button-disabled-background;
+	border: 1px solid $button-disabled-border;
 }
 
@@ -204,7 +204,7 @@
 button.disabled:hover,
 button[type=submit].disabled:hover {
-	color: #676e78;
-	background: #eee;
-	border: 1px solid #CCC;
+	color: $button-disabled-color;
+	background: $button-disabled-background-alt;
+	border: 1px solid $button-disabled-border;
 }
 
@@ -222,14 +222,14 @@
 a.metaGetMore {
 	font-size: 0.825em;
-	color: #333;
-	background: #fff;
+	color: $ajax-color;
+	background: $ajax-background;
 	box-shadow: none;
-	border: 1px solid #676e78;
+	border: 1px solid $ajax-border;
 	margin-bottom: .25em;
 	text-align: center;
 	&:hover {
-		background: #a2cbe9;
+		background: $ajax-background-alt;
 		box-shadow: none;
-		border: 1px solid #676e78;
+		border: 1px solid $ajax-border;
 	}
 }
@@ -248,7 +248,7 @@
 	a:hover,
 	a:active {
-		color: #333;
-		background: transparent;
-		border: none;
+		color: $gotop-color;
+		background: $gotop-background;
+		border: $gotop-border;
 	}
 }
@@ -269,5 +269,5 @@
 	&:hover,
 	&:focus {
-		background: #fc0;
+    background: $addmeta-background;
 	}
 }
Index: admin/style/scss/partials/_categories.scss
===================================================================
--- admin/style/scss/partials/_categories.scss	(revision 3439)
+++ admin/style/scss/partials/_categories.scss	(revision 3763)
@@ -11,5 +11,5 @@
 	}
 	.placeholder {
-		outline: 1px dashed #4183C4;
+		outline: 1px dashed $cat-placeholder-outline;
 		min-height: 2.5em;
 	}
@@ -20,5 +20,5 @@
 	margin: .66em 0;
 	padding: .66em 1em;
-	border: 1px solid #ccc;
+	border: 1px solid $cat-line-border;
 	border-radius: 3px;
 	label {
@@ -34,5 +34,5 @@
 	}
 	.cat-line {
-		border: 1px solid #dfdfdf;
+		border: 1px solid $subcat-line-border;
 	}
 }
@@ -43,5 +43,5 @@
 
 .cat-nb-posts a {
-	color: #333;
+	color: $cat-post-counter;
 }
 
Index: admin/style/scss/partials/_charte.scss
===================================================================
--- admin/style/scss/partials/_charte.scss	(revision 3439)
+++ admin/style/scss/partials/_charte.scss	(revision 3763)
@@ -1,5 +1,5 @@
 .guideline {
 	#content h2 {
-		color: #d33800;
+		color: $charte-title;
 		padding: 2em 0 0 0;
 		margin: 1em 0;
@@ -17,5 +17,5 @@
 	}
 	.one-box .box {
-		border: 1px solid #dfdfdf;
+		border: 1px solid $charte-one-box-border;
 		padding: 2px .5em;
 	}
Index: admin/style/scss/partials/_classes.scss
===================================================================
--- admin/style/scss/partials/_classes.scss	(revision 3621)
+++ admin/style/scss/partials/_classes.scss	(revision 3763)
@@ -3,6 +3,6 @@
 .ac_results {
 	padding: 0px;
-	border: 1px dotted #f90;
-	background-color: white;
+	background-color: $ac-results-background;
+  border: 1px dotted $ac-results-border;
 	overflow: hidden;
 	z-index: 99999;
@@ -30,6 +30,6 @@
 
 .ac_over {
-	background-color: #2373a8;
-	color: white;
+  color: $ac-results-over;
+  background-color: $ac-results-over-background;
 }
 
@@ -59,25 +59,25 @@
 
 .pw-very-weak .bar {
-	background: #c44d58;
+	background: $pw-very-weak;
 	width: 30px;
 }
 
 .pw-weak .bar {
-	background: #e1732c;
+	background: $pw-weak;
 	width: 60px;
 }
 
 .pw-mediocre .bar {
-	background: #f90;
+	background: $pw-mediocre;
 	width: 90px;
 }
 
 .pw-strong .bar {
-	background: #cdad12;
+	background: $pw-strong;
 	width: 120px;
 }
 
 .pw-very-strong .bar {
-	background: #9ac123;
+	background: $pw-very-strong;
 	width: 150px;
 }
@@ -90,6 +90,5 @@
 
 .anchor-nav {
-	background: #ecf0f1;
-	color: #000;
+	background: $nav-background;
 	padding: 4px 1em;
 	label {
@@ -103,14 +102,14 @@
 .nav_prevnext {
 	margin-bottom: 2em;
-	color: #fff;
+	color: $nav-background;
 }
 
 .nav_prevnext a,
 a.back {
-	color: #2373A8;
-	border: 1px solid #dfdfdf;
+	color: $nav-prevnext;
+	border: 1px solid $nav-prevnext-border;
 	padding: 2px 1.5em;
 	border-radius: .75em;
-	background-color: #f3f3f3;
+	background-color: $nav-prevnext-background;
 }
 
@@ -120,11 +119,11 @@
 
 a.onblog_link {
-	color: #333;
+	color: $onblog-link;
 	float: right;
-	border: 1px solid #eee;
+	border: 1px solid $onblog-link-border;
 	padding: 2px 1.5em;
 	border-radius: .75em;
-	background-color: #ECF0F1;
-	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+	background-color: $onblog-link-background;
+	box-shadow: 0 1px 1px $onblog-link-shadow;
 }
 
@@ -149,12 +148,12 @@
 	}
 	.btn {
-		border: 1px solid #dfdfdf;
-		background-color: #fcfcfc;
-		color: #676e78;
+		border: 1px solid $pager-border;
+		background-color: $pager-background;
+		color: $pager-link;
 		border-radius: 3px;
 		overflow: hidden;
 		&.no-link {
-			border-color: #dfdfdf;
-			background-color: #f9f9f9;
+			border-color: $pager-border;
+			background-color: $pager-off-background;
 			padding: 1px 3px 0;
 		}
@@ -162,13 +161,13 @@
 	.active {
 		padding: 4px 12px;
-		color: #676e78;
+		color: $pager-active;
 	}
 	.direct-access {
 		margin-left: 2em;
 		input[type=text] {
-			border: 1px solid #dfdfdf;
+			border: 1px solid $pager-border;
 			padding: 3px 8px;
 			margin-left: .25em;
-			background-color: #fff;
+			background-color: $pager-input-background;
 		}
 		input[type=submit] {
@@ -182,5 +181,5 @@
 		&:hover,
 		&:focus {
-			background-color: #ecf0f1;
+			background-color: $pager-background-over;
 		}
 	}
@@ -200,10 +199,10 @@
 	}
 	.btn.no-link {
-		color: #ccc;
+		color: $index-no-link;
 	}
 	.active {
 		padding: 4px 8px;
-		color: #fff;
-		background: #676e78;
+		color: $index-active;
+		background: $index-active-background;
 		border-radius: 3px;
 		font-variant: small-caps;
@@ -219,9 +218,9 @@
 	margin: 3px 10px 2px 0;
 	padding: 5px .5em;
-	background: #ecf0f1;
+  color: $step;
+	background: $step-background;
+  border: 1px solid $step-border;
 	border-radius: 3px;
 	font-weight: bold;
-	border: 1px solid #c5c5c5;
-	color: #676e78;
 }
 
@@ -235,6 +234,6 @@
 
 .fieldset {
-	background: #fff;
-	border: 1px solid #c5c5c5;
+	background: $fieldset-background;
+	border: 1px solid $fieldset-border;
 	border-radius: 3px;
 	padding: 1em .7em .5em;
@@ -244,5 +243,5 @@
 	}
 	&:focus-within {
-		background-color: #eee;
+		background-color: $fieldset-focus-background;
 	}
 }
@@ -276,5 +275,5 @@
 
 .border-top {
-	border-top: 1px solid #999;
+	border-top: 1px solid $link-border;
 	padding-top: 1em;
 	margin-top: 1em;
@@ -309,5 +308,5 @@
 
 .offline {
-	color: #676e78;
+	color: $offline;
 }
 
Index: dmin/style/scss/partials/_colors.scss
===================================================================
--- admin/style/scss/partials/_colors.scss	(revision 3439)
+++ 	(revision )
@@ -1,144 +1,0 @@
-// Colors (text and border colors and backgrounds)
-body {
-	color: $primary-color;
-	background: $primary-background;
-}
-
-h2 {
-	color: $ternary-color;
-}
-
-h3,
-.as_h3 {
-	color: $secondary-color;
-}
-
-h4,
-.as_h4 {
-	color: $ternary-color;
-}
-
-h5 {
-	color: $ternary-color;
-}
-
-h6 {
-	color: $ternary-color;
-}
-
-
-/* ---------------------------------------------------------------- layout: main */
-
-#header {
-	color: $white;
-	background: $ternary-background;
-	border-bottom: 4px solid $light-blue;
-}
-
-#wrapper {
-	background: $secondary-background url(bg_wrapper.png) repeat-y 14em;
-}
-
-#content {
-	background: $white;
-}
-
-#main-menu {
-	background: $secondary-background;
-}
-
-#footer {
-	background-color: $white;
-	border-top: 1px solid $gray-light; // #ccc;
-}
-
-
-/* to hide main-menu */
-
-#collapser {
-	//	background: $light-blue;
-	background: $gray-light;
-	// background: $light-blue url(../images/collapser-hide.png) no-repeat center bottom;
-	&:hover,
-	&:focus {
-		// background: $gray-dark;
-		background: $light-blue;
-	}
-	.hide-mm & {
-		// background: $gray-dark;
-		background: $light-blue;
-		// background: $light-blue url(../images/collapser-show.png) no-repeat center bottom;
-		&:hover,
-		&:focus {
-			background: $gray-light;
-		}
-	}
-}
-
-
-/* if main-menu is hidden */
-
-#wrapper.hide-mm {
-	background: $white;
-}
-
-
-/* ---------------------------------------------------------------- layout: popups */
-
-.popup h1 {
-	color: $white;
-	background: $ternary-background;
-}
-
-
-/* ------------------------------------------------------------------------------------
-															UN POIL DE MEDIA QUERIES
------------------------------------------------------------------------------------- */
-
-@media screen and (max-width: $xl-screen) {
-	#header,
-	h1 {
-		background: $gray-very-dark;
-	}
-	#top-info-user {
-		background: $ternary-background;
-		a.active {
-			color: $white;
-			background: $gray-semi-dark;
-		}
-	}
-	#wrapper {
-		background: $secondary-background url(bg_wrapper.png) repeat-y 17em;
-	}
-}
-
-@media screen and (max-width: $s-screen) {
-	#help-button {
-		background-color: $light-blue;
-	}
-}
-
-@media screen and (max-width: $xs-screen) {
-	h1 a {
-		&:link {
-			border-right: 1px solid $gray-light;
-		}
-		&:hover,
-		&:focus {
-			border-right: 1px solid $light-blue;
-		}
-	}
-	.pseudo-tabs li {
-		border-top: 1px solid $gray-light;
-	}
-}
-
-@media screen and (max-width: $xxs-screen) {
-	h1,
-	h1 a {
-		border-right: $gray-very-dark !important;
-	}
-	.pseudo-tabs li {
-		border-top: 1px solid $gray-light !important;
-	}
-}
Index: admin/style/scss/partials/_common.scss
===================================================================
--- admin/style/scss/partials/_common.scss	(revision 3500)
+++ admin/style/scss/partials/_common.scss	(revision 3763)
@@ -13,4 +13,6 @@
 
 body {
+  color: $body-color;
+  background: $body-background;
 	font-size: $body-font-size;
 	line-height: 1.5;
@@ -51,4 +53,5 @@
 
 h2 {
+  color: $title-color;
 	font-size: 1.5em;
 	font-weight: normal;
@@ -59,4 +62,5 @@
 h3,
 .as_h3 {
+  color: $title-alt-color;
 	font-size: 1.34em;
 	font-weight: normal;
@@ -67,4 +71,5 @@
 h4,
 .as_h4 {
+  color: $title-color;
 	font-size: 1.16em;
 	line-height: 1.5;
@@ -72,4 +77,5 @@
 
 h5 {
+  color: $title-color;
 	font-size: 1em;
 	line-height: 1.5;
@@ -78,4 +84,5 @@
 
 h6 {
+  color: $title-color;
 	font-size: 1em;
 	line-height: 1.5;
Index: admin/style/scss/partials/_content.scss
===================================================================
--- admin/style/scss/partials/_content.scss	(revision 3678)
+++ admin/style/scss/partials/_content.scss	(revision 3763)
@@ -2,5 +2,5 @@
 	ul {
 		padding: .5em 0 0 1em;
-		border-bottom: 1px solid #ccc;
+		border-bottom: 1px solid $tabs-border;
 		line-height: 1.8;
 	}
@@ -18,15 +18,15 @@
 			padding: .33em 1.5em;
 			margin-right: -1px;
-			border: 1px solid #ccc;
+			border: 1px solid $tabs-border;
 			border-bottom: none;
 			text-decoration: none;
-			color: #333;
-			background-color: #ecf0f1;
+			color: $tabs-color;
+      background-color: $tabs-background;
 			display: inline-block;
 			&:hover,
 			&:focus {
-				color: #000;
-				background: #fff;
-				border-bottom-color: #fff;
+        color: $tabs-color;
+				background: $tabs-active-background;
+				border-bottom-color: $tabs-active-background;
 			}
       &:link {
@@ -35,7 +35,7 @@
 		}
 		&.part-tabs-active a {
-			background: #fff;
+			background: $tabs-active-background;
 			font-weight: bold;
-			border-bottom-color: #fff;
+			border-bottom-color: $tabs-active-background;
 		}
 	}
@@ -48,5 +48,5 @@
 .pseudo-tabs {
 	margin: -.75em 0 2em 0;
-	border-bottom: 1px solid #bbb;
+	border-bottom: 1px solid $tabs-border;
 	display: table;
 	width: 100%;
@@ -58,5 +58,5 @@
 		border-width: 0 1px;
 		border-style: solid;
-		border-color: #ccc;
+		border-color: $tabs-border;
 		padding: 0;
 		margin: 0;
@@ -70,10 +70,10 @@
 		&:hover,
 		&:focus {
-			background-color: #ecf0f1;
-			color: #333;
+			background-color: $tabs-background;
+			color: $tabs-color;
 		}
 		&.active {
-			background-color: #ecf0f1;
-			color: #d30e60;
+			background-color: $tabs-background;
+			color: $tabs-active-color;
 		}
 	}
@@ -85,5 +85,5 @@
 #help {
 	margin-top: 4em;
-	background: #f5f5f5;
+	background: $help-background;
 	z-index: 100;
 	clear: both;
@@ -95,6 +95,6 @@
 		right: 0;
 		width: 32rem; // 24em;
-		border-left: 2px solid #FFD478;
-		border-top: 2px solid #FFD478;
+		border-left: 2px solid $help-border;
+		border-top: 2px solid $help-border;
 		margin-top: 0;
 		padding: .5em 0 0 0;
@@ -110,13 +110,13 @@
 	padding: 0 1.5em 0 30px;
 	cursor: pointer;
-	color: #2373A8;
+	color: $link;
 	line-height: 3;
 	&.floatable {
-		border-top: 2px solid #ccc;
-		border-left: 2px solid #ccc;
-		border-bottom: 2px solid #ccc;
+		border-top: 2px solid $help-button-border;
+		border-left: 2px solid $help-button-border;
+		border-bottom: 2px solid $help-button-border;
 		border-bottom-left-radius: 1em;
 		border-top-left-radius: 1em;
-		background-color: #f5f5f5;
+		background-color: $help-button-background;
 		position: fixed;
 		top: 10px;
@@ -131,11 +131,11 @@
 	#content.with-help & {
 		right: 32rem; // 24em;
-		background-color: #f5f5f5;
+		background-color: $help-background;
 		position: fixed;
 		top: 6em; // 50px;
 		z-index: 100;
-		border-top: 2px solid #FFD478;
-		border-left: 2px solid #FFD478;
-		border-bottom: 2px solid #FFD478;
+		border-top: 2px solid $help-border;
+		border-left: 2px solid $help-border;
+		border-bottom: 2px solid $help-border;
 		border-bottom-left-radius: 1em;
 		border-top-left-radius: 1em;
@@ -157,5 +157,5 @@
 	dt {
 		font-weight: bold;
-		color: #676e78;
+		color: $help-title-color;
 		margin: 0;
 	}
Index: admin/style/scss/partials/_debug.scss
===================================================================
--- admin/style/scss/partials/_debug.scss	(revision 3439)
+++ admin/style/scss/partials/_debug.scss	(revision 3763)
@@ -6,5 +6,5 @@
 	width: 100%;
 	height: 4px;
-	background: #ffd478;
+	background: $debug-background;
 	div {
 		display: none;
@@ -25,5 +25,5 @@
 
 .debug {
-	background: #ffd478;
+	background: $debug-background;
 	padding: 3px 0.5em 2px;
 }
@@ -31,9 +31,9 @@
 input[type=submit].delete.debug,
 a.delete.debug {
-	border-color: #ffd478;
+	border-color: $debug-border;
 	&:hover {
-		background: #ffd478;
-		color: #900;
-		border-color: #ffd478;
+		background: $debug-background;
+		color: $debug-color;
+		border-color: $debug-border;
 	}
 }
Index: admin/style/scss/partials/_entry.scss
===================================================================
--- admin/style/scss/partials/_entry.scss	(revision 3621)
+++ admin/style/scss/partials/_entry.scss	(revision 3763)
@@ -42,5 +42,5 @@
 		font-size: 1.08em;
 		margin-top: .3em;
-		border-bottom: 1px solid $ternary-color;
+		border-bottom: 1px solid $entry-sb-title-border;
 	}
 	select {
@@ -57,7 +57,7 @@
 	margin-right: 1em;
 	padding: .5em 1em;
-	background-color: $secondary-background;
+	background-color: $entry-sb-background;
 	&:focus-within {
-		background-color: #eee;
+		background-color: $entry-sb-focus-background;
 	}
 }
Index: admin/style/scss/partials/_filters.scss
===================================================================
--- admin/style/scss/partials/_filters.scss	(revision 3621)
+++ admin/style/scss/partials/_filters.scss	(revision 3763)
@@ -3,5 +3,5 @@
 	background: url(../images/expand.png) no-repeat 4px center;
 	padding-left: 20px;
-	color: #000;
+	color: $form-control-color;
 	&.open {
 		background: url(../images/hide.png) no-repeat 4px center;
@@ -10,5 +10,5 @@
 
 #filters-form {
-	border: 1px solid rgb(162, 203, 233);
+	border: 1px solid $filter-border;
 	border-radius: .3em;
 	margin-bottom: 2em;
@@ -28,5 +28,5 @@
 	.filters-options {
 		padding-left: 2em;
-		border-left: 1px solid #ccc;
+		border-left: 1px solid $filter-options-border;
 	}
 	select {
@@ -48,5 +48,5 @@
 	}
 	&:focus-within {
-		background-color: #eee;
+		background-color: $filter-focus-background;
 	}
 }
Index: admin/style/scss/partials/_footer.scss
===================================================================
--- admin/style/scss/partials/_footer.scss	(revision 3454)
+++ admin/style/scss/partials/_footer.scss	(revision 3763)
@@ -7,15 +7,15 @@
 	a:hover span.tooltip {
 		padding: 10px;
-		color: #910ed3;
+		color: $tooltip-color;
 		height: auto;
 		width: auto;
 		left: 0;
 		bottom: 0;
-		background: rgba(255,255,255,.9);
+		background: $tooltip-background;
 		z-index: 99;
 		font-family: monospace;
 		text-align: left;
-		border-top: 1px solid #910ed3;
-		border-right: 1px solid #910ed3;
+		border-top: 1px solid $tooltip-color;
+		border-right: 1px solid $tooltip-color;
 		border-radius: 0 2em 0 0;
 	}
Index: admin/style/scss/partials/_forms.scss
===================================================================
--- admin/style/scss/partials/_forms.scss	(revision 3713)
+++ admin/style/scss/partials/_forms.scss	(revision 3763)
@@ -42,8 +42,8 @@
   border-width: 1px 0;
   border-style: solid;
-  border-color: #ccc;
-  background: #f7f7f7;
+  border-color: $fieldset-border;
+  background: $fieldset-background;
   &:focus-within {
-    background-color: #eee;
+    background-color: $fieldset-focus-background;
   }
 }
@@ -65,6 +65,6 @@
   border-width: 1px;
   border-style: solid;
-  border-color: #676e78;
-  background: #fff;
+  border-color: $legend-border;
+  background: $legend-background;
   margin-bottom: 0.5em;
 }
@@ -73,10 +73,10 @@
 }
 input.invalid, textarea.invalid, select.invalid, input:not([type=file]):invalid:not(:focus) {
-  color: #900;
-  box-shadow: 0 0 0 3px rgba(218, 62, 90, 0.3);
+  color: $invalid-input-color;
+  box-shadow: 0 0 0 3px $invalid-input-shadow;
 }
 input.invalid, textarea.invalid, input:not([type=file]):invalid:not(:focus) {
-  border: 1px solid red;
-  background: #FFBABA;
+  border: 1px solid $invalid-input-border;
+  background: $invalid-input-background;
 }
 input[type=text],
@@ -91,6 +91,6 @@
 input[type=number],
 textarea, select, input:not([type=file]):invalid, input:not([type=file]):invalid:placeholder-shown {
-  color: #000;
-  box-shadow: 1px 1px 2px #f3f3f3 inset;
+  color: $input-color;
+  box-shadow: 1px 1px 2px $input-shadow inset;
   padding: 3px;
   vertical-align: top;
@@ -107,11 +107,11 @@
 input[type=number],
 textarea, input:not([type=file]):invalid, input:not([type=file]):invalid:placeholder-shown {
-  background: #fcfcfc;
+  background: $input-background;
   border-width: 1px;
   border-style: solid;
-  border-color: #dfdfdf;
+  border-color: $input-border;
 }
 input:focus, textarea:focus {
-  border-color: #9bca1c;
+  border-color: $input-focus;
 }
 textarea {
@@ -197,5 +197,5 @@
 }
 label.required abbr {
-  color: #900;
+  color: $error-alt;
   font-size: 1.3em;
   text-decoration: none;
@@ -225,5 +225,5 @@
   font-style: italic;
   font-weight: normal;
-  color: #676e78;
+  color: $form-note-color;
 }
 p.form-note, p.form-stats {
@@ -243,5 +243,5 @@
   }
   50% {
-    background-color: #ffbaba;
+    background-color: $error-background;
   }
   100% {
@@ -259,5 +259,5 @@
   }
   50% {
-    background-color: #ccff00;
+    background-color: $input-focus;
   }
   100% {
Index: admin/style/scss/partials/_header.scss
===================================================================
--- admin/style/scss/partials/_header.scss	(revision 3439)
+++ admin/style/scss/partials/_header.scss	(revision 3763)
@@ -9,5 +9,5 @@
 	top: 3em;
 	left: 0;
-	background: $light-blue;
+	background: $prelude-background;
 	width: 100%;
 	z-index: 100;
@@ -19,10 +19,10 @@
 		a {
 			padding: 3px 16px 3px 8px;
-			background: $light-blue;
-			color: $black;
+      color: $prelude-color;
+			background: $prelude-background;
 			text-decoration: underline;
 			&:hover,
 			&:focus {
-				background: $white;
+				background: $prelude-background-alt;
 			}
 		}
@@ -47,5 +47,5 @@
 #header {
 	a {
-		color: $white;
+		color: $header-color;
 	}
 	img {
@@ -67,5 +67,5 @@
 		width: 150px;
 		height: 36px; // was 3em;
-		color: $white;
+		color: $header-color;
 		background: transparent url(dc_logos/b-dotclear120.png) no-repeat 0 6px;
 		transition: none;
@@ -93,10 +93,11 @@
 	}
 	input[type=submit] {
-		background: $black;
-		border-color: $gray-semi-dark;
+		background: $submit-background;
+		border-color: $submit-border;
 		margin-left: .33em;
 	}
 	input[type=submit]:hover {
-		background: $gray-semi-dark;
+    color: $submit-color;
+		background: $submit-background-alt;
 	}
 	p {
@@ -117,5 +118,5 @@
 		margin-left: .5em;
 		padding-left: .5em;
-		border-left: 1px solid $gray-semi-dark;
+		border-left: 1px solid $header-link-border;
 		&:first-child {
 			border-left: none;
@@ -127,6 +128,6 @@
 		margin: 0;
 		padding: 2px 8px 3px;
-		background-color: $secondary-background;
-		color: $secondary-color;
+    color: $header-active-color;
+		background-color: $header-active-background;
 		font-weight: bold;
 	}
Index: admin/style/scss/partials/_index.scss
===================================================================
--- admin/style/scss/partials/_index.scss	(revision 3439)
+++ admin/style/scss/partials/_index.scss	(revision 3763)
@@ -7,6 +7,4 @@
 
 #icons {
-	//    overflow: hidden;
-	//    text-align: center;
 	display: flex;
 	flex-wrap: wrap;
@@ -16,6 +14,4 @@
 		text-align: center;
 		margin: 1em 0 2em;
-		//    display: inline-block;
-		//    vertical-align: top;
 	}
 	a {
@@ -29,19 +25,18 @@
 		}
 		span {
-			border-bottom: 1px dotted #999;
-			color: #333;
+      color: $index-link-color;
+			border-bottom: 1px dotted $index-link-border;
 		}
 		img {
 			padding: 1.5em;
-			background-color: #f9f9f9;
+			background-color: $index-icon-background;
 			border-radius: 8px;
-			border: 1px solid #dadada;
+			border: 1px solid $index-icon-border;
 			display: inline-block;
 		}
 		&:focus {
 			outline: 0;
-			border-color: #fff;
 			span {
-				border: 2px solid #bee74b;
+				border: 2px solid $index-icon-outline;
 			}
 		}
@@ -49,7 +44,7 @@
 		&:hover {
 			img {
-				background: #bee74b;
+				background: $index-icon-outline;
 				outline: 0;
-				border-color: #dadada;
+				border-color: $index-icon-border;
 			}
 			span {
@@ -65,8 +60,8 @@
 #quick {
 	padding: 1em;
-	max-width: 976px;
+	max-width: 72em;
 	margin: 0 auto;
-	background: #f5f5f5;
-	box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
+	background: $quick-background;
+  border: 1px solid $quick-border;
 	text-align: left;
 	h3 {
@@ -76,8 +71,8 @@
 	p.qinfo {
 		margin: -.7em -1em 1em;
-		background: #D9EDF7 url(info.png) no-repeat .2em .2em;
-		border: 1px solid #BCE8F1;
+		background: $quick-info-background url(info.png) no-repeat .2em .2em;
+		border: 1px solid $quick-info-border;
 		padding: .2em 1em .1em 24px;
-		color: #000;
+		color: $quick-info-color;
 	}
 	#new_cat,
@@ -108,5 +103,5 @@
 	.box {
 		padding: 10px;
-		border: 1px solid #ccc;
+		border: 1px solid $index-box-border;
 		border-radius: 3px;
 		min-height: 200px;
@@ -157,14 +152,2 @@
 	}
 }
-
-
-/* message de mise à jour */
-
-#upg-notify {
-	ul {
-		padding-left: 1.5em;
-	}
-	li {
-		color: #fff;
-	}
-}
Index: admin/style/scss/partials/_layout.scss
===================================================================
--- admin/style/scss/partials/_layout.scss	(revision 3513)
+++ admin/style/scss/partials/_layout.scss	(revision 3763)
@@ -7,4 +7,7 @@
 
 #header {
+  color: $header-color;
+  background: $header-background;
+  border-bottom: 4px solid $header-border;
 	width: 99.99%;
 	/* Bugfix Chrome >= 49.0.2623.108 */
@@ -24,4 +27,5 @@
 
 #wrapper {
+  background: $wrapper-background url(bg_wrapper.png) repeat-y 14em;
 	position: relative;
 	padding-top: 1.5em;
@@ -44,4 +48,5 @@
 
 #content {
+  background: $content-background;
 	margin: 0 0 0 14em;
 	padding: .5em 1.5em .75em 2.5em;
@@ -49,4 +54,5 @@
 
 #main-menu {
+  background: $main-menu-background;
 	width: 14em;
 	float: left;
@@ -58,4 +64,6 @@
 
 #footer {
+  background-color: $footer-background;
+  border-top: 1px solid $footer-border;
 	clear: both;
 	position: relative;
@@ -68,4 +76,5 @@
 
 #collapser {
+  background: $collapser-background;
 	position: absolute;
 	top: 0;
@@ -75,8 +84,19 @@
 	overflow: hidden;
 	display: block;
-	border-right: 0; // 1px solid #999;
+	border-right: 0;
 	border-bottom: 0;
 	z-index: 1;
 	transition: none;
+  &:hover,
+  &:focus {
+    background: $collapser-focus;
+  }
+  .hide-mm & {
+    background: $collapser-focus;
+    &:hover,
+    &:focus {
+      background: $collapser-background;
+    }
+  }
 }
 
@@ -110,4 +130,8 @@
 		display: block;
 	}
+}
+
+#wrapper.hide-mm {
+  background: $content-background;
 }
 
@@ -206,4 +230,6 @@
 .popup {
 	h1 {
+    color: $popup-title-color;
+    background: $popup-title-background;
 		display: block;
 		width: 100%;
Index: admin/style/scss/partials/_main-menu.scss
===================================================================
--- admin/style/scss/partials/_main-menu.scss	(revision 3513)
+++ admin/style/scss/partials/_main-menu.scss	(revision 3763)
@@ -6,10 +6,10 @@
 		margin: 0;
 		padding: 10px 0 10px 8px;
-		color: #676e78;
+		color: $main-menu-title-color;
 		font-size: 1.15em;
 	}
 	a {
-		color: #333;
-		border-bottom-color: #ccc;
+		color: $main-menu-item-color;
+		border-bottom-color: $main-menu-item-border;
 	}
 	ul {
@@ -29,9 +29,9 @@
 	}
 	.active {
-		background-color: #fff;
+		background-color: $main-menu-active-background;
 		font-weight: bold;
 		a {
 			border-bottom: none;
-			color: #d30e60;
+			color: $main-menu-active-color;
 		}
 	}
@@ -42,18 +42,11 @@
 #system-menu,
 #plugins-menu {
-	border-bottom: 1px dashed #A2CBE9;
+	border-bottom: 1px dashed $main-menu-border;
 }
 
 #favorites-menu {
 	h3 {
-		color: #000;
 		font-variant: small-caps;
 		padding-top: .2em;
-	}
-	.active {
-		background-color: transparent;
-		a {
-			color: #000;
-		}
 	}
 }
@@ -69,5 +62,5 @@
 	}
 	p {
-		border: 1px solid #999;
+		border: 1px solid $search-border;
 		border-radius: .3em;
 		position: relative;
@@ -78,7 +71,7 @@
 		padding: 0 .25em;
 		margin-left: .33em;
-		background: #dfdfdf;
-		border-color: #999;
-		color: #333;
+    color: $search-color;
+		background: $search-background;
+		border-color: $search-border;
 		border-bottom-right-radius: .3em;
 		border-top-right-radius: .3em;
@@ -86,11 +79,11 @@
 		border-bottom-left-radius: 0;
 		border: none;
-		border-left: 1px solid #999;
+		border-left: 1px solid $search-border;
 		font-size: .91em;
 		float: right;
 		&:hover,
 		&:focus {
-			background: #676e78;
-			color: #fff;
+      color: $search-submit-color;
+			background: $search-submit-background;
 		}
 	}
@@ -107,5 +100,5 @@
 	height: 2em;
 	&:focus {
-		border: 1px solid #bee74b;
+		border: 1px solid $search-outline;
 	}
 }
Index: admin/style/scss/partials/_markup.scss
===================================================================
--- admin/style/scss/partials/_markup.scss	(revision 3762)
+++ admin/style/scss/partials/_markup.scss	(revision 3763)
@@ -7,18 +7,11 @@
 	padding: 0 1em .5em 1em;
 	margin: 0 -1em 1em -1em;
-	background: #fff url(bg_h2.png) repeat-x center bottom;
-}
-
-h2 a:link,
-h2 a:visited {
-	color: #676e78;
-	border-color: #000;
-}
-
+	background: $breadcrumb-background url(bg_h2.png) repeat-x center bottom;
+}
 
 /* page courante dans le fil d'ariane */
 
 .page-title {
-	color: #d30e60;
+	color: $breadcrumb-current;
 	img {
 		padding-left: .5em;
@@ -37,5 +30,5 @@
 .fieldset h4,
 .pretty-title {
-	color: #D33800;
+	color: $fieldset-pretty-title-color;
 	font-size: 1em;
 	font-weight: bold;
@@ -52,10 +45,10 @@
 	text-transform: uppercase;
 	font-weight: bold;
-	color: #333;
+	color: $fieldset-smart-title-color;
 }
 
 #entry-sidebar h5 {
 	font-weight: normal;
-	color: #333;
+	color: $entry-sidebar-title-color;
 }
 
@@ -67,5 +60,5 @@
 h4 label,
 h5 label {
-	color: #333;
+	color: $title-label-color;
 }
 
@@ -99,5 +92,5 @@
 
 caption {
-	color: #333;
+	color: $table-caption-color;
 	font-weight: bold;
 	text-align: left;
@@ -108,6 +101,6 @@
 	border-width: 1px 0 1px 0;
 	border-style: solid;
-	border-color: #dfdfdf;
-	background: #eef1ec;
+	border-color: $head-border;
+  background: $head-background;
 	padding: .4em 1em .4em .5em;
 	vertical-align: top;
@@ -119,5 +112,5 @@
 	border-width: 0 0 1px 0;
 	border-style: solid;
-	border-color: #e3e3e3;
+	border-color: $cell-border;
 	padding: .4em 1em .4em .5em;
 	vertical-align: top;
@@ -134,6 +127,6 @@
 	height: 1px;
 	border-width: 1px 0 0;
-	border-color: #dfdfdf;
-	background: #dfdfdf;
+	border-color: $hr-color;
+	background: $hr-color;
 	border-style: solid;
 	&.clearer {
@@ -149,5 +142,5 @@
 
 code {
-	background: #fefacd;
+	background: $code-background;
 }
 
@@ -180,7 +173,7 @@
 a:link,
 a:visited {
-	color: #2373A8;
+  color: $link-color;
 	text-decoration: none;
-	border-bottom: 1px dotted #999;
+	border-bottom: 1px dotted $link-border;
 	background-color: inherit;
 	outline: 0;
@@ -202,5 +195,5 @@
 
 .discrete a {
-	color: #333;
+	color: $discrete-link-color;
 }
 
@@ -211,5 +204,5 @@
 a:focus,
 a:focus img {
-	outline: 2px solid #bee74b;
+	outline: 2px solid $link-outline;
 	border-bottom: none;
 	text-decoration: none;
Index: admin/style/scss/partials/_media.scss
===================================================================
--- admin/style/scss/partials/_media.scss	(revision 3467)
+++ admin/style/scss/partials/_media.scss	(revision 3763)
@@ -14,5 +14,5 @@
 .media-item {
 	position: relative;
-	border: 1px solid #dfdfdf;
+	border: 1px solid $media-item-border;
 	margin: 9px;
 	padding: 10px 12px 6px;
@@ -105,10 +105,10 @@
 
 .media-folder {
-	background: transparent url(bg_menu.png) repeat-y;
-	border-color: #eee;
+	background: $media-folder-background url(bg_menu.png) repeat-y;
+	border-color: $media-folder-border;
 	.media-link {
 		font-size: 1.125em;
 		margin-left: 2em;
-		color: #676e78;
+		color: $media-folder-link;
 		border-bottom: none;
 	}
@@ -116,5 +116,5 @@
 
 tr.media-folder {
-	background: transparent;
+	background: $media-folder-background;
 	.media-link {
 		margin-left: 0;
@@ -123,5 +123,5 @@
 
 .media-folder-up {
-	border-color: #fff;
+	border-color: $media-folderup-border;
 	padding-bottom: 6px;
 }
@@ -198,5 +198,5 @@
 	margin-left: 0;
 	padding-left: 0;
-	border-bottom: 1px solid #dfdfdf;
+	border-bottom: 1px solid $media-files-border;
 	li {
 		margin-left: 0;
@@ -208,5 +208,5 @@
 	font-weight: bold;
 	&.upload-error {
-		color: #900;
+		color: $upload-error-color;
 	}
 }
@@ -220,5 +220,5 @@
 	margin: 0;
 	padding: .3em 0;
-	border-top: 1px solid #dfdfdf;
+	border-top: 1px solid $upload-file-border;
 	position: relative;
 }
@@ -249,7 +249,7 @@
 .upload-filemsg {
 	font-weight: bold;
-	color: green;
-	.upload-error {
-		color: #900;
+	color: $upload-filemsg-color;
+	&.upload-error {
+		color: $upload-error-color;
 	}
 }
@@ -263,6 +263,6 @@
 		line-height: 1.2em;
 		text-align: right;
-		background: green url(loader.png) repeat-x left top;
-		color: white;
+		background: $upload-progress-background url(loader.png) repeat-x left top;
+		color: $upload-progress-color;
 		border-radius: 3px;
 	}
Index: admin/style/scss/partials/_mediaqueries.scss
===================================================================
--- admin/style/scss/partials/_mediaqueries.scss	(revision 3439)
+++ admin/style/scss/partials/_mediaqueries.scss	(revision 3763)
@@ -3,6 +3,24 @@
 ------------------------------------------------------------------------------------ */
 
+@media screen and (max-width: $xl-screen) {
+  #header,
+  h1 {
+    background: $header-background-alt;
+  }
+  #top-info-user {
+    background: $header-background;
+    a.active {
+      color: $header-active-color-alt;
+      background: $header-active-background-alt;
+    }
+  }
+  #wrapper {
+    background: $wrapper-background url(bg_wrapper.png) repeat-y 17em;
+  }
+}
+
 @media screen and (max-width: $s-screen) {
 	#help-button {
+    background-color: $header-border;
 		padding: 0;
 		font-size: .83em;
@@ -12,4 +30,13 @@
 
 @media screen and (max-width: $xs-screen) {
+  h1 a {
+    &:link {
+      border-right: 1px solid $tabs-border;
+    }
+    &:hover,
+    &:focus {
+      border-right: 1px solid $tabs-border;
+    }
+  }
 	#dashboard-main {
 		padding: 0;
@@ -28,4 +55,5 @@
 	}
 	.pseudo-tabs li {
+    border-top: 1px solid $tabs-border;
 		padding: .25em;
 		&:first-child,
@@ -37,4 +65,8 @@
 
 @media screen and (max-width: $xxs-screen) {
+  h1,
+  h1 a {
+    border-right: $header-border-alt !important;
+  }
 	#content.with-help #help {
 		font-size: 1.2rem // 12px;
@@ -59,4 +91,7 @@
 		padding: 0.3em 1em 0.3em 0;
 	}
+  .pseudo-tabs li {
+    border-top: 1px solid $tabs-border !important;
+  }
 	.pseudo-tabs li:first-child {
 		border-top: none;
Index: admin/style/scss/partials/_messages.scss
===================================================================
--- admin/style/scss/partials/_messages.scss	(revision 3685)
+++ admin/style/scss/partials/_messages.scss	(revision 3763)
@@ -5,5 +5,4 @@
 	padding: .2em .66em .2em;
 	text-indent: 24px;
-	color: #333;
 	display: inline-block;
 	line-height: 1.5em;
@@ -11,13 +10,15 @@
 }
 
+.info {
+  color: $msg-info-color;
+	background: $msg-info-background url(msg-info.png) no-repeat .3em .3em;
+	border: 1px solid $msg-info-border;
+}
+
 .warn,
 .warning {
-	background: #FEFACD url(msg-warning.png) no-repeat .3em .3em;
-	border: 1px solid #ffd478;
-}
-
-.info {
-	background: #D9EDF7 url(msg-info.png) no-repeat .3em .3em;
-	border: 1px solid #BCE8F1;
+  color: $msg-warn-color;
+  background: $msg-warn-background url(msg-warning.png) no-repeat .3em .3em;
+  border: 1px solid $msg-warn-border;
 }
 
@@ -46,5 +47,5 @@
 	margin-bottom: 1em;
 	border-radius: 8px;
-	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
+	box-shadow: 1px 1px 2px $msg-shadow;
 }
 
@@ -60,6 +61,6 @@
 
 .error {
-	background: #ffbaba url(msg-error.png) no-repeat .7em .7em;
-	color: #000;
+	background: $msg-error-background url(msg-error.png) no-repeat .7em .7em;
+	color: $msg-error-color;
   animation-name: kf-error;
   animation-duration: .5s;
@@ -67,8 +68,8 @@
 @keyframes kf-error {
   0% {
-    background-color: #fefacd;
-  }
-  100% {
-    background-color: #ffbaba;
+    background-color: $msg-error-background-alt;
+  }
+  100% {
+    background-color: $msg-error-background;
   }
 }
@@ -76,6 +77,6 @@
 .message,
 .static-msg {
-	background: #676e78 url(msg-std.png) no-repeat .7em .7em;
-	color: #fff;
+  color: $msg-color;
+	background: $msg-background url(msg-std.png) no-repeat .7em .7em;
 }
 .message {
@@ -85,8 +86,8 @@
 @keyframes kf-message {
   0% {
-    background-color: #ccc;
-  }
-  100% {
-    background-color: #676e78;
+    background-color: $msg-background-alt;
+  }
+  100% {
+    background-color: $msg-background;
   }
 }
@@ -96,29 +97,29 @@
 .message h3,
 .static-msg h3 {
-	color: #fff;
-}
-
-.success,
+	color: $msg-color;
+}
+
+.success {
+	color: $msg-success-color;
+}
+
+.success {
+	background: $msg-success-background url(msg-success.png) no-repeat .7em .7em;
+  animation-name: kf-success;
+  animation-duration: .5s;
+}
+@keyframes kf-success {
+  0% {
+    background-color: $msg-success-background-alt;
+  }
+  100% {
+    background-color: $msg-success-background;
+  }
+}
+
 .warning-msg {
-	color: #000;
-}
-
-.success {
-	background: #bee74b url(msg-success.png) no-repeat .7em .7em;
-  animation-name: kf-success;
-  animation-duration: .5s;
-}
-@keyframes kf-success {
-  0% {
-    background-color: #9bca1c;
-  }
-  100% {
-    background-color: #bee74b;
-  }
-}
-
-.warning-msg {
-	background: #ffd478 url(msg-warning.png) no-repeat .7em .7em;
-	border: 1px solid #ffd478;
+  color: $msg-warn-color;
+	background: $msg-warn-background-alt url(msg-warning.png) no-repeat .7em .7em;
+	border: 1px solid $msg-warn-border;
   animation-name: kf-warning;
   animation-duration: .5s;
@@ -126,8 +127,8 @@
 @keyframes kf-warning {
   0% {
-    background-color: #fefacd;
-  }
-  100% {
-    background-color: #ffd478;
+    background-color: $msg-warn-background;
+  }
+  100% {
+    background-color: $msg-warn-background-alt;
   }
 }
@@ -136,5 +137,5 @@
 .warning-msg a,
 .info a {
-	color: #333;
+	color: $msg-info-color;
 }
 
@@ -164,10 +165,10 @@
 	margin-bottom: 1em;
 	border-radius: 8px;
-	background: #A2CBE9 url(msg-success.png) no-repeat .7em .7em;
-	color: #000;
-	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
+  color: $dc-update-color;
+	background: $dc-update-background url(msg-success.png) no-repeat .7em .7em;
+	box-shadow: 1px 1px 2px $msg-shadow;
 	h3 {
 		margin-top: 0;
-		color: #000;
+		color: $dc-update-color;
 	}
 	p {
@@ -176,5 +177,5 @@
 	}
 	a {
-		color: #000;
+		color: $dc-update-color;
 		margin-right: 1em;
 		&.button {
@@ -186,5 +187,5 @@
 .updt-info a {
 	margin-left: 2em;
-	border-color: #000;
+	border-color: $dc-update-color;
 	font-weight: bold;
 }
@@ -192,9 +193,9 @@
 body.ajax-loader {
 	#header {
-		border-bottom-color: shade($light-blue, 10%);
+		border-bottom-color: $ajax-loader;
 		transition: border-bottom-color .3s ease;
 	}
 	#collapser {
-		background-color: shade($light-blue, 10%);
+		background-color: $ajax-loader;
 		transition: background-color .3s ease;
 	}
Index: admin/style/scss/partials/_plugins.scss
===================================================================
--- admin/style/scss/partials/_plugins.scss	(revision 3439)
+++ admin/style/scss/partials/_plugins.scss	(revision 3763)
@@ -21,16 +21,15 @@
 .modules tr.expand,
 .modules td.expand {
-	background: #f7f7f7;
-	border-color: #bee74b;
+	background: $modules-background;
+  border-color: $modules-border;
 }
 
 .modules tr.expand td:first-child {
 	font-weight: bold;
-	background: #dfe5e7;
+	background: $modules-background;
 }
 
 .modules td.expand {
 	padding: 0 0 1em;
-	border-top: 1px solid #eaeaea;
 	div {
 		display: inline-block;
Index: admin/style/scss/partials/_preferences.scss
===================================================================
--- admin/style/scss/partials/_preferences.scss	(revision 3439)
+++ admin/style/scss/partials/_preferences.scss	(revision 3763)
@@ -4,5 +4,5 @@
 	padding-left: 0;
 	#my-favs & {
-		border-top: 1px solid #eee;
+		border-top: 1px solid $fav-list-border;
 	}
 	li {
@@ -14,9 +14,12 @@
 		#my-favs & {
 			line-height: 2;
-			border-bottom: 1px solid #eee;
+			border-bottom: 1px solid $fav-list-border;
 			padding-top: 3px;
 			padding-bottom: 3px;
 			position: relative;
 		}
+    #my-favs:focus-within & {
+      border-bottom-color: $fav-list-border-alt;
+    }
 		span.zoom {
 			display: none;
@@ -27,6 +30,6 @@
 			bottom: 0;
 			left: 10em;
-			background-color: #f7f7f7;
-			border: 1px solid #dfdfdf;
+			background-color: $fav-list-background-over;
+			border: 1px solid $fav-list-border-alt;
 			padding: .2em;
 			border-radius: .5em;
@@ -40,8 +43,9 @@
 
 #my-favs {
-	border-color: #9bca1c;
+	border-color: $my-favs-border;
 	input.position {
 		margin: 0 0 .4em .2em;
 	}
+
 }
 
@@ -61,6 +65,6 @@
 		bottom: 0;
 		left: 10em;
-		background-color: #f7f7f7;
-		border: 1px solid #dfdfdf;
+		background-color: $fav-list-background;
+		border: 1px solid $fav-list-border-alt;
 		padding: .2em;
 		border-radius: .5em;
Index: admin/style/scss/partials/_tables.scss
===================================================================
--- admin/style/scss/partials/_tables.scss	(revision 3621)
+++ admin/style/scss/partials/_tables.scss	(revision 3763)
@@ -50,11 +50,11 @@
 	}
 	input[type=text] {
-		background: #fff;
+		background: $line-input-background;
 	}
 	&:hover {
-		background: #f3f3f3;
+		background: $line-background-over;
 	}
 	&:focus-within {
-		background-color: #eee;
+    background-color: $line-focus-background;
 	}
 }
@@ -72,5 +72,5 @@
 th.noborder {
 	border-width: 0 0 1px 0;
-	border-color: #dfdfdf;
+  border-color: $cell-noborder-color;
 	line-height: 2em;
 	padding-bottom: 0;
Index: admin/style/scss/partials/_utils.scss
===================================================================
--- admin/style/scss/partials/_utils.scss	(revision 3690)
+++ admin/style/scss/partials/_utils.scss	(revision 3763)
@@ -3,7 +3,7 @@
 
 .color-color-picker {
-	border: 1px solid #000;
+	border: 1px solid $color-picker-border;
 	width: 195px;
-	background: #fff;
+	background: $color-picker-background;
 }
 
@@ -11,4 +11,4 @@
 
 .color-div {
-	border: 1px solid #ccc;
+	border: 1px solid $color-div-border;
 }
Index: admin/style/scss/themes/_light.scss
===================================================================
--- admin/style/scss/themes/_light.scss	(revision 3763)
+++ admin/style/scss/themes/_light.scss	(revision 3763)
@@ -0,0 +1,422 @@
+// ========================================================================== //
+// =Couleurs
+// ========================================================================== //
+
+// Palette de base
+
+$blue:            #137bbb;
+$green:           #9ac123;
+$red:             #c44d58;
+$light-blue:      #a2cbe9;
+$orange:          #d33800;
+
+$gray:            #b2b2b2;
+$gray-dark:       #676e78;
+
+$gray-very-dark:    shade($gray, 72%);  // #323232 (near to #333 used before)
+$gray-semi-dark:    shade($gray, 25%);  // #868686 (near to #999 used before)
+$gray-light:        tint($gray, 30%);   // #c9c9c9 (near to #ccc used before)
+$gray-lighter:      tint($gray, 75%);   // #ececec (near to #eee used before)
+$gray-very-light:   tint($gray, 85%);   // #f3f3f3 (near to #f7f7f7 used before)
+
+$white:           #fff;
+$black:           #000;
+
+// Palette secondaire
+
+$warning:         #fefacd;
+$warning-alt:     #ffd478;
+
+$info:            #d9edf7;
+$info-alt:        #bce8f1;
+
+$error:           #ffbaba;
+$error-alt:       #ae323b;
+
+$success:         #bee74b;
+$success-alt:     #9bca1c;
+
+$link:            #2373a8;
+$link-outline:    #bee74b;
+
+$current-page:    #d30e60;
+
+$legacy:          #eef1ec;
+$code:            #fefacd;
+$tooltip:         #910ed3;
+
+$pw-very-weak:    #c44d58;
+$pw-weak:         #e1732c;
+$pw-mediocre:     #ff9900;
+$pw-strong:       #cdad12;
+$pw-very-strong:  #9ac123;
+
+$submit:          #25a6e1;
+$submit-alt:      #188bc0;
+
+$reset:           #eaeaea;
+$reset-alt:       #f9f9f9;
+$reset-ter:       #dadada;
+
+$delete:          #ae323b;
+$delete-alt:      #b33630;
+$delete-ter:      #dc5f59;
+
+$add:             #bee74b;
+$add-alt:         #9bca1c;
+
+// Common
+
+$body-color:                      $gray-very-dark;                    // #323232
+$body-background:                 $white;                             // #ffffff
+
+$title-color:                     $gray-dark;                         // #676e78 : h2, h4, h5, h6
+$title-alt-color:                 $orange;                            // #d33800 : h3
+
+// Layout
+
+$header-color:                    $white;                             // #ffffff
+$header-background:               $gray-dark;                         // #676e78
+$header-background-alt:           $gray-very-dark;                    // #323232
+$header-border:                   $light-blue;                        // #a2cbe9
+$header-border-alt:               $gray-very-dark;                    // #323232
+$header-link-border:              $gray-semi-dark;                    // #868686
+$header-active-color:             $orange;                            // #d33800
+$header-active-background:        $gray-very-light;                   // #f3f3f3
+$header-active-color-alt:         $white;                             // #ffffff
+$header-active-background-alt:    $gray-semi-dark;                    // #868686
+
+$wrapper-background:              $gray-very-light;                   // #f3f3f3
+
+$content-background:              $white;                             // #ffffff
+
+$tabs-color:                      $gray-very-dark;                    // #323232
+$tabs-border:                     $gray-light;                        // #c9c9c9
+$tabs-background:                 $gray-very-light;                   // #f3f3f3
+$tabs-active-color:               $orange;                            // #d33800
+$tabs-active-background:          $white;                             // #ffffff
+
+$main-menu-background:            $gray-very-light;                   // #f3f3f3
+$main-menu-title-color:           $gray-dark;                         // #676e78
+$main-menu-item-color:            $gray-very-dark;                    // #323232
+$main-menu-item-border:           tint($gray-dark, 66%);              // #c5c5c5
+$main-menu-active-color:          $current-page;                      // #d30e60
+$main-menu-active-background:     $white;                             // #ffffff
+$main-menu-border:                $light-blue;                        // #a2cbe9
+
+$search-color:                    $gray-very-dark;                    // #323232
+$search-border:                   $gray-semi-dark;                    // #868686
+$search-background:               $gray-light;                        // #c9c9c9
+$search-submit-color:             $white;                             // #ffffff
+$search-submit-background:        $gray-semi-dark;                    // #868686
+$search-outline:                  $link-outline;                      // #bee74b
+
+$footer-background:               $white;                             // #ffffff
+$footer-border:                   tint($gray-dark, 66%);              // #c5c5c5
+
+$collapser-focus:                 $light-blue;                        // #a2cbe9
+$collapser-background:            $gray-light;                        // #c9c9c9
+
+$popup-title-color:               $white;                             // #ffffff
+$popup-title-background:          $gray-dark;                         // #676e78
+
+// Markup
+
+$breadcrumb-background:           $white;                             // #ffffff
+$breadcrumb-current:              $current-page;                      // #d30e60
+
+$fieldset-pretty-title-color:     $orange;                            // #d33800
+$fieldset-smart-title-color:      $gray-very-dark;                    // #323232
+$entry-sidebar-title-color:       $gray-very-dark;                    // #323232
+$title-label-color:               $gray-very-dark;                    // #323232
+
+$table-caption-color:             $gray-very-dark;                    // #323232
+$head-border:                     shade($gray-very-light, 10%);       // #dbdbdb
+$head-background:                 $gray-very-light;                   // #f3f3f3
+$line-input-background:           $white;                             // #ffffff
+$line-background-over:            $gray-very-light;                   // #f3f3f3 tr:hover
+$line-focus-background:           shade($white, 7%);                  // #ededed
+$cell-border:                     $gray-lighter;                      // #ececec
+$cell-noborder-color:             shade($gray-very-light, 10%);       // #dbdbdb td/th .noborder
+
+$hr-color:                        shade($gray-very-light, 10%);       // #dbdbdb
+
+$code-background:                 $code;                              // #fefacd
+
+$link-color:                      $link;                              // #2373a8
+$link-border:                     $gray-semi-dark;                    // #868686
+$discrete-link-color:             $gray-very-dark;                    // #323232
+
+// Forms
+
+$fieldset-border:                 tint($gray-dark, 66%);              // #c5c5c5
+$fieldset-background:             $white;                             // #ffffff
+$fieldset-focus-background:       shade($white, 7%);                  // #ededed
+
+$legend-border:                   $gray-dark;                         // #676e78
+$legend-background:               $white;                             // #ffffff
+
+$invalid-input-color:             $error-alt;                         // #ae323b
+$invalid-input-border:            $error-alt;                         // #ae323b
+$invalid-input-background:        $error;                             // #ffbaba
+$invalid-input-shadow:            rgba($error-alt, 0.3);
+
+$input-color:                     $black;                             // #000000
+$input-background:                tint($gray-very-light, 50%);        // #f9f9f9
+$input-border:                    shade($gray-very-light, 10%);       // #dbdbdb
+$input-shadow:                    $gray-very-light;                   // #f3f3f3
+$input-focus:                     $link-outline;                      // #bee74b
+
+$required-color:                  $error-alt;                         // #ae323b
+
+$form-note-color:                 $gray-dark;                         // #676e78
+
+$error-background:                $error;                             // #ffbaba
+
+// Buttons
+
+$button-color:                    $black;                             // #000000
+$button-border:                   tint($gray-dark, 66%);              // #c5c5c5
+$button-shadow:                   rgba($black, 0.05);
+
+$submit-color:                    $white;                             // #ffffff
+$submit-background:               $submit;                            // #25a6e1
+$submit-background-alt:           $submit-alt;                        // #188bc0
+$submit-border:                   tint($gray-dark, 66%);              // #c5c5c5
+
+$reset-color:                     $black;                             // #000000
+$reset-background:                $reset;                             // #eaeaea
+$reset-background-alt:            $reset-alt;                         // #f9f9f9
+$reset-background-ter:            $reset-ter;                         // #dadada
+$reset-border:                    tint($gray-dark, 66%);              // #c5c5c5
+
+$delete-color:                    $delete;                            // #ae323b
+$delete-hover-color:              $white;                             // #ffffff
+$delete-hover-background:         $delete-alt;                        // #b33630
+$delete-hover-background-alt:     $delete-ter;                        // #dc5f59
+$delete-hover-border:             $delete-ter;                        // #dc5f59
+
+$add-color:                       $black;                             // #000000
+$add-background:                  $add;                               // #bee74b
+$add-background-alt:              $add-alt;                           // #9bca1c
+$add-border:                      $add;                               // #bee74b
+$add-border-alt:                  $add-alt;                           // #9bca1c
+
+$button-disabled-color:           $gray-dark;                         // #676e78
+$button-disabled-background:      $gray-very-light;                   // #f3f3f3
+$button-disabled-background-alt:  $gray-lighter;                      // #ececec
+$button-disabled-border:          tint($gray-dark, 66%);              // #c5c5c5
+
+$ajax-color:                      $gray-very-dark;                    // #323232
+$ajax-background:                 $white;                             // #ffffff
+$ajax-background-alt:             $light-blue;                        // #a2cbe9
+$ajax-border:                     $gray-dark;                         // #676e78
+
+$gotop-color:                     $gray-very-dark;                    // #323232
+$gotop-background:                transparent;
+$gotop-border:                    none;
+
+$addmeta-background:              tint($light-blue, 10%);             // #abd0eb
+
+// Messages
+
+$msg-color:                       $white;                             // #ffffff
+$msg-background:                  $gray-dark;                         // #676e78
+$msg-background-alt:              tint($gray-dark, 66%);              // #c5c5c5
+$msg-shadow:                      rgba($gray-very-dark, 0.1);
+
+$msg-info-color:                  $gray-very-dark;                    // #323232
+$msg-info-background:             $info;                              // #d9edf7
+$msg-info-border:                 $info-alt;                          // #bce8f1
+
+$msg-warn-color:                  $gray-very-dark;                    // #323232
+$msg-warn-background:             $warning;                           // #fefacd
+$msg-warn-background-alt:         $warning-alt;                       // #ffd478
+$msg-warn-border:                 $warning-alt;                       // #ffd478
+
+$msg-error-color:                 $black;                             // #000000
+$msg-error-background:            $error;                             // #ffbaba
+$msg-error-background-alt:        $warning;                           // #fefacd
+
+$msg-success-color:               $black;                             // #000000
+$msg-success-background:          $success;                           // #bee74b
+$msg-success-background-alt:      $success-alt;                       // #9bca1c
+
+$dc-update-color:                 $black;                             // #000000
+$dc-update-background:            $light-blue;                        // #a2cbe9
+
+$ajax-loader:                     shade($light-blue, 10%);            // #92b7d2
+
+// Filters
+
+$form-control-color:              $black;                             // #000000
+
+$filter-border:                   $light-blue;                        // #a2cbe9
+$filter-options-border:           $gray-light;                        // #c9c9c9
+$filter-focus-background:         shade($white, 7%);                  // #ededed
+
+// Prelude
+
+$prelude-color:                   $gray-very-dark;                    // #323232
+$prelude-background:              $light-blue;                        // #a2cbe9
+$prelude-background-alt:          $white;                             // #ffffff
+
+// Help
+
+$help-background:                 $gray-very-light;                   // #f3f3f3
+$help-border:                     $warning-alt;                       // #ffd478
+$help-button-border:              $gray-light;                        // #c9c9c9
+$help-button-background:          $gray-very-light;                   // #f3f3f3
+$help-title-color:                $gray-dark;                         // #676e78
+
+// Tooltip (in footer)
+
+$tooltip-color:                   $tooltip;                           // #910ed3
+$tooltip-background:              rgba($white, 0.9);
+
+// Application pages:
+// - Auth
+
+$login-fieldset-background:       $white;                             // #ffffff
+$login-fieldset-border:           $success-alt;                       // #9bca1c
+
+// - Index
+
+$index-link-color:                $gray-very-dark;                    // #323232
+$index-link-border:               $gray-semi-dark;                    // #868686
+$index-icon-background:           tint($gray-very-light, 50%);        // #f9f9f9
+$index-icon-border:               shade($gray-very-light, 10%);       // #dbdbdb
+$index-icon-outline:              $link-outline;                      // #bee74b
+
+$quick-background:                $gray-very-light;                   // #f3f3f3
+$quick-border:                    shade($gray-very-light, 10%);       // #dbdbdb
+$quick-info-background:           $info;                              // #d9edf7
+$quick-info-border:               $info-alt;                          // #bce8f1
+$quick-info-color:                $gray-very-dark;                    // #323232
+
+$index-box-border:                tint($gray-dark, 66%);              // #c5c5c5
+
+// - Blog params
+
+$blog-user-border:                tint($gray-dark, 66%);              // #c5c5c5
+$blog-super-background:           rgba($info, 0.5);                   // #d9edf7 - 50%
+$blog-super-border:               $link-outline;                      // #bee74b
+
+// - Blog theme
+
+$theme-box-border:                shade($gray-very-light, 10%);       // #dbdbdb
+$theme-box-over:                  $gray-very-light;                   // #f3f3f3
+
+$theme-name-color:                $gray-dark;                         // #676e78
+
+$theme-img-background:            $gray-very-light;                   // #f3f3f3
+$theme-img-border:                $white;                             // #ffffff
+$theme-img-shadow:                rgba($gray-very-dark, 0.1);
+
+$theme-action-background:         $gray-very-light;                   // #f3f3f3
+$theme-action-border:             $gray-lighter;                      // #ececec
+
+$theme-current-background:        $white;                             // #ffffff
+$theme-current-border:            $gray-lighter;                      // #ececec
+$theme-current-shadow:            rgba($gray-very-dark, 0.1);
+
+$theme-current-img-border:        $white;                             // #ffffff
+$theme-current-name-color:        $orange;                            // #d33800
+
+// - Categories
+
+$cat-placeholder-outline:         $link;                              // #2373a8
+
+$cat-line-border:                 tint($gray-dark, 66%);              // #c5c5c5
+$subcat-line-border:              shade($gray-very-light, 10%);       // #dbdbdb
+
+$cat-post-counter:                $gray-very-dark;                    // #323232
+
+// - Media
+
+$media-folder-background:         transparent;
+$media-folder-border:             $gray-lighter;                      // #ececec
+$media-folderup-border:           transparent;
+$media-folder-link:               $gray-dark;                         // #676e78
+$media-item-border:               shade($gray-very-light, 10%);       // #dbdbdb
+$media-files-border:              shade($gray-very-light, 10%);       // #dbdbdb
+
+$upload-color:                    shade($success-alt, 45%);           // #556f0f
+$upload-filemsg-color:            $white;                             // #ffffff
+$upload-progress-color:           $white;                             // #ffffff
+$upload-progress-background:      shade($success-alt, 45%);           // #556f0f
+$upload-file-border:              shade($gray-very-light, 10%);       // #dbdbdb
+$upload-error-color:              $error-alt;                         // #ae323b
+
+// - Plugins
+
+$modules-background:              $gray-very-light;                   // #f3f3f3
+$modules-border:                  $light-blue;                        // #a2cbe9
+
+// - Entry
+
+$entry-sb-title-border:           $gray-dark;                         // #676e78
+$entry-sb-background:             $gray-very-light;                   // #f3f3f3
+$entry-sb-focus-background:       shade($white, 7%);                  // #ededed
+
+// - Preferences
+
+$fav-list-background:             $gray-very-light;                   // #f3f3f3
+$fav-list-background-over:        $gray-very-light;                   // #f3f3f3
+$fav-list-border:                 $gray-lighter;                      // #ececec
+$fav-list-border-alt:             shade($gray-very-light, 10%);       // #dbdbdb
+
+$my-favs-border:                  $green;                             // #9ac123
+
+// - Charte
+
+$charte-title:                    $orange;                            // #d33800
+$charte-one-box-border:           shade($gray-very-light, 10%);       // #dbdbdb
+
+// Classes
+
+$ac-results-background:           $white;                             // #ffffff
+$ac-results-border:               $warning-alt;                       // #ffd478
+$ac-results-over:                 $white;                             // #ffffff
+$ac-results-over-background:      $link;                              // #2373a8
+
+$nav-background:                  $white;                             // #ffffff
+$nav-prevnext:                    $link;                              // #2373a8
+$nav-prevnext-background:         $gray-very-light;                   // #f3f3f3
+$nav-prevnext-border:             shade($gray-very-light, 10%);       // #dbdbdb
+
+$onblog-link:                     $gray-very-dark;                    // #323232
+$onblog-link-background:          $gray-lighter;                      // #ececec
+$onblog-link-border:              $gray-lighter;                      // #ececec
+$onblog-link-shadow:              rgba($gray-very-dark, 0.3);         // #323232 30%
+
+$pager-link:                      $link;                              // #2373a8
+$pager-active:                    $gray-dark;                         // #676e78
+$pager-background:                $gray-very-light;                   // #f3f3f3
+$pager-background-over:           shade($gray-very-light, 10%);       // #dbdbdb
+$pager-off-background:            $white;                             // #ffffff
+$pager-input-background:          $white;                             // #ffffff
+$pager-border:                    shade($gray-very-light, 10%);       // #dbdbdb
+
+$index-no-link:                   $gray-light;                        // #c9c9c9
+$index-active:                    $white;                             // #ffffff
+$index-active-background:         $gray-dark;                         // #676e78
+
+$step:                            $gray-dark;                         // #676e78
+$step-background:                 $gray-very-light;                   // #f3f3f3
+$step-border:                     tint($gray-dark, 66%);              // #c5c5c5
+
+$offline:                         $gray-dark;                         // #676e78
+
+// Utils
+
+$color-picker-border:             $black;                             // #000000
+$color-picker-background:         $white;                             // #ffffff
+
+$color-div-border:                $gray-light;                        // #c9c9c9
+
+// Debug
+
+$debug-color:                     $error-alt;                         // #ae323b
+$debug-background:                $warning-alt;                       // #ffd478
+$debug-border:                    $warning-alt;                       // #ffd478
