fix tooltip in record editor

fix images path in record editor wip: standardize font-sizes
2025-10-12 20:43:25 +00:00 · 2015-11-27 13:24:36 +01:00
parent 4e7131f296
commit 34689daaa8
37 changed files with 209 additions and 231 deletions
--- a/resources/www/_shared/styles/_main-menu.scss
+++ b/resources/www/_shared/styles/_main-menu.scss
@@ -42,7 +42,7 @@ $mainMenuBottomBorder: none !default;
      display: inline-block;
      color: $mainMenuLinkColor;
      > span {
-        font-size: 12px;
+        font-size: $xmediumFontSize;
        font-weight: normal;
        border-top: 3px solid transparent;
        display: block;
--- a/resources/www/_shared/styles/_variables.scss
+++ b/resources/www/_shared/styles/_variables.scss
@@ -7,4 +7,11 @@ $mainMenuLineHeight: 36px;

 $baseBorderRadius:      3px;
 $borderRadiusLarge:     4px;
-$borderRadiusSmall:     2px;
+$borderRadiusSmall:     2px;
+
+
+$defaultFontFamily: Helvetica, Arial, sans-serif;
+$xsmallFontSize: 8px;
+$smallFontSize: 10px;
+$xmediumFontSize: 12px;
+$mediumFontSize: 13px;
--- a/resources/www/_shared/styles/jquery-ui/_shared.scss
+++ b/resources/www/_shared/styles/jquery-ui/_shared.scss
@@ -339,7 +339,7 @@ button.ui-button::-moz-focus-inner {
  text-align: center;
 }
 .ui-datepicker .ui-datepicker-title select {
-  font-size: 1em;
+  //font-size: 1em;
  margin: 1px 0;
 }
 .ui-datepicker select.ui-datepicker-month-year {
@@ -351,7 +351,7 @@ button.ui-button::-moz-focus-inner {
 }
 .ui-datepicker table {
  width: 100%;
-  font-size: .9em;
+  //font-size: .9em;
  border-collapse: collapse;
  margin: 0 0 .4em;
 }
@@ -780,6 +780,7 @@ body .ui-tooltip {

 /* Component containers
 ----------------------------------*/
+/* let bootstrap handle font-size
 .ui-widget {
  font-family: Verdana,Arial,sans-serif;
  font-size: 1.1em;
@@ -793,7 +794,7 @@ body .ui-tooltip {
 .ui-widget button {
  font-family: Verdana,Arial,sans-serif;
  font-size: 1em;
-}
+}*/


 /* positioning */
--- a/resources/www/_shared/styles/main.scss
+++ b/resources/www/_shared/styles/main.scss
@@ -1,12 +1,12 @@
@import 'variables';

 /** skin/common/main.css */
-body{
-  margin:0;
-  padding:0;
-  font-family:Helvetica,Arial,sans-serif;
-  font-size:12px;
-  overflow:hidden;
+body {
+  margin: 0;
+  padding: 0;
+  font-family: $defaultFontFamily;
+  font-size: $mediumFontSize;
+  overflow: hidden;
 }


@@ -23,13 +23,15 @@ img{
  position:absolute;
  z-index:32000;
  overflow:hidden;
+  hr{
+    margin: 8px 0;
+  }
+  .popover {
+    max-width: none;
+    width: auto;
+  }
 }

-#tooltip hr{
-  margin: 8px 0;
-}
-
-
 .PNB
 {
  position:absolute;
@@ -56,10 +58,6 @@ input.checkbox{
  display:none;
 }

-#tooltip .popover {
-  max-width: none;
-  width: auto;
-}

 .ui-dialog-titlebar {
  min-height: 20px;
--- a/resources/www/admin/styles/main.scss
+++ b/resources/www/admin/styles/main.scss
@@ -20,6 +20,8 @@ body {
  padding: 0;
  background-color: #ffffff;
  color: #333333;
+  font-family: $defaultFontFamily;
+  font-size: $mediumFontSize;
  overflow-y: auto;
 }
 .clear {
--- a/resources/www/prod/skins/000000/images/ui-bg_gloss-wave_20_111111_500x100.png
+++ b/resources/www/prod/skins/000000/images/ui-bg_gloss-wave_20_111111_500x100.png
--- a/resources/www/common/js/jquery.tooltip.js
+++ b/resources/www/common/js/jquery.tooltip.js
@@ -300,7 +300,8 @@
                    topOffset = 20,
                    leftOffset = 20;

-                if( $eventTarget ) {
+                console.log($eventTarget.length)
+                if( $eventTarget.length > 0 ) {
                    // change offsets:
                    topOffset = -8;
                    leftOffset = -8;
@@ -318,7 +319,7 @@
                var ratioImage = $(h).width() / $(h).height();

                //position de l'image
-                console.log('$eventTarget', $eventTarget)
+
                if ($eventTarget.offset().left > (v.x - $eventTarget.offset().left - $eventTarget.width())) {
                    hor = 'gauche';
                    wiH = $eventTarget.offset().left;
@@ -493,6 +494,10 @@
    // delete timeout and show helper
    function show() {
        tID = null;
+        var isBrowsable = false;
+        if( $.tooltip.current !== null ) {
+            isBrowsable = settings($.tooltip.current).isBrowsable;
+        }

        if ((!IE || !$.fn.bgiframe) && settings($.tooltip.current).fade) {
            if (helper.parent.is(":animated"))
@@ -507,12 +512,12 @@
            .unbind('mouseenter')
            .unbind('mouseleave')
            .mouseenter(function(){
-                if (settings($.tooltip.current).isBrowsable) {
+                if (isBrowsable) {
                    $.tooltip.currentHover = true;
                }
            })
            .mouseleave(function () {
-                if (settings($.tooltip.current).isBrowsable) {
+                if (isBrowsable) {
                    // if tooltip has scrollable content or selectionnable text - should be closed on mouseleave:
                    $.tooltip.currentHover = false;
                    helper.parent.hide();
--- a/resources/www/common/styles/main.scss
+++ b/resources/www/common/styles/main.scss
@@ -20,40 +20,7 @@ $mainMenuLinkBackgroundHoverColor: transparent;

 #mainContent {
  margin-top: $mainMenuHeight;
-  #page {
-    background-color: #414141;
-  }
 }

-body {
-  color: #FFFFFF;
-  background-color: #212121;
-  font-family: Helvetica, Arial, sans-serif;
-  font-size: 14px;
-  overflow: auto;
-  min-height: 100%;
-  width: 100%;
-}

-h1 {
-  font-size: 26px;
-  font-weight: bold;
-  padding: 50px 0 20px;
-}

-#page {
-  width: 860px;
-  background-color: #414141;
-  padding: 0 20px;
-  margin: 0 auto;
-  height: 100%;
-  position: relative !important;
-}
-
-.preview .thumb_wrapper {
-  overflow: hidden;
-}
-
-.caption {
-  padding: 50px 0 20px;
-}
--- a/resources/www/lightbox/styles/main.scss
+++ b/resources/www/lightbox/styles/main.scss
@@ -14,7 +14,8 @@ body {
  background-color: #BFBFBF;
  color: #212121;
  /*font-size:11px;*/
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: $defaultFontFamily;
+  font-size: $mediumFontSize;
 }

 #mainContent {
--- a/resources/www/oauth/main.scss
+++ b/resources/www/oauth/main.scss
@@ -1,10 +1,11 @@
 /********* Default CSS Oauth pages *********/

 /****************** Page *******************/
-
+@import '../_shared/styles/variables';
 html, body {
  background: #000000;
-  font-family: Verdana, sans-serif;
+  font-family: $defaultFontFamily;
+  font-size: $mediumFontSize;
  color: #FFFFFF;
 }

--- a/resources/www/prod/js/jquery.main-prod.js
+++ b/resources/www/prod/js/jquery.main-prod.js
@@ -324,7 +324,7 @@ function checkFilters(save) {
        search.dates.minbound = $('#ADVSRCH_DATE_ZONE input[name=date_min]', adv_box).val();
        search.dates.maxbound = $('#ADVSRCH_DATE_ZONE input[name=date_max]', adv_box).val();
        search.dates.field = $('#ADVSRCH_DATE_ZONE select[name=date_field]', adv_box).val();
-
+        console.log(search.dates.minbound, search.dates.maxbound, search.dates.field)
        if ($.trim(search.dates.minbound) || $.trim(search.dates.maxbound)) {
            danger = true;
            $('#ADVSRCH_DATE_ZONE', adv_box).addClass('danger');
@@ -1008,8 +1008,11 @@ function HueToRgb(m1, m2, hue) {
 $(document).ready(function () {

    $('input[name=search_type]').bind('click', function () {
+        console.log('search bind')
        var $this = $(this);
        var $record_types = $('#recordtype_sel');
+
+        console.log($this.hasClass('mode_type_reg'), $record_types)
        if ($this.hasClass('mode_type_reg')) {
            $record_types.css("visibility", "hidden");  // better than hide because does not change layout
            $record_types.prop("selectedIndex", 0);
--- a/resources/www/prod/skins/000000/skin-000000.scss
+++ b/resources/www/prod/skins/000000/skin-000000.scss
@@ -123,9 +123,9 @@ $tabsNavBg: #666666;
 $tabsNavBgActive: $mediumBackgroundColor;
 $contentLoaderImg: 'loader-white.gif';

-$btnBackground: #EAEAEA;
+$btnBackground: #f2f2f2;
 $btnBackgroundHighlight: #D6D6D6;
-$btnColor: #8e8e8e;
+$btnColor: #737373;
 $btnTextShadow: 0 -1px 0 rgba(0,0,0,0);

 $btnInverseBackground: #444444;
--- a/resources/www/prod/skins/959595/images/ui-bg_gloss-wave_20_111111_500x100.png
+++ b/resources/www/prod/skins/959595/images/ui-bg_gloss-wave_20_111111_500x100.png
--- a/resources/www/prod/skins/959595/skin-959595.scss
+++ b/resources/www/prod/skins/959595/skin-959595.scss
@@ -123,10 +123,17 @@ $tabsNavBg: #999999;
 $tabsNavBgActive: #B2B2B2; //#D9D9D9;
 $contentLoaderImg: 'loader-black.gif';

-$btnBackground: #444444; //#B9B9B9;
+/*$btnBackground: #444444; //#B9B9B9;
 $btnBackgroundHighlight: #393939;
 $btnColor: #AAAAAA;
-$btnTextShadow: 0 -1px 0 rgba(0,0,0,.25);
+$btnTextShadow: 0 -1px 0 rgba(0,0,0,.25);*/
+
+$btnBackground: #f2f2f2;
+$btnBackgroundHighlight: #D6D6D6;
+$btnColor: #737373;
+$btnTextShadow: 0 -1px 0 rgba(0,0,0,0);
+
+

 $btnInverseBackground: #B9B9B9;
 $btnInverseBackgroundHighlight: #A4A4A4;
--- a/resources/www/prod/skins/skin-shared.scss
+++ b/resources/www/prod/skins/skin-shared.scss
@@ -18,7 +18,7 @@ $basketsColor: #076882;
 ::-webkit-scrollbar-thumb {
  border-radius: 0;
  width: 3px;
-  background-color: $scrollBgColor;
+  background-color: lighten($scrollBgColor, 5);
 }

 ::-webkit-scrollbar-button {
@@ -51,10 +51,11 @@ legend {
  border: none;
 }

-
 body {
  color: $darkerTextColor;
  background-color: $darkerBackgroundColor;
+  font-family: $defaultFontFamily;
+  font-size: $mediumFontSize;
  position: absolute;
  top: 0;
  left: 0;
@@ -71,11 +72,9 @@ html {
  margin: 0;
  padding: 0;
  z-index: 1;
-}
-
-html, body {
-  font-size: 12px;
-  z-index: 1;
+  body {
+    z-index: 1;
+  }
 }

 a {
@@ -180,7 +179,7 @@ div#PREVIEWTITLEWRAPPER {
  cursor: pointer;
  color: rgb(204, 204, 204);
  font-weight: bold;
-  font-size: 12px;
+  font-size: $mediumFontSize;
  text-align: right;
  text-decoration: underline;
  height: 16px;
@@ -253,13 +252,13 @@ span.ww_winTitle {

 .cont_infos div {
  line-height: 20px;
-  font-size: 10px;
+  font-size: $smallFontSize;
  font-weight: bold;
 }

 .cont_infos span {
  cursor: pointer;
-  font-size: 10px;
+  font-size: $smallFontSize;
 }

 #SPANTITLE img {
@@ -426,7 +425,7 @@ H4 {
  border-width: 1px;
  border-radius: 4px 4px 4px 4px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
-  font-size: 12px;
+  font-size: $xmediumFontSize;
  font-weight: bold;
  line-height: 14px;
  text-align: center;
@@ -505,6 +504,14 @@ H4 {
  margin: 3px 1px 3px 1px;
 }

+.close {
+  color: $textPrimaryColor;
+  // box-shadow: inset 1px 1px 2px 0px rgba($darkerBackgroundColor,0.7);
+  &:hover {
+    color: $textPrimaryColor;
+  }
+}
+
 .status-marker {
  line-height: 10px;
  border-radius: 50%;
--- a/resources/www/prod/skins/ui-components/_actions.scss
+++ b/resources/www/prod/skins/ui-components/_actions.scss
@@ -125,7 +125,7 @@

 .contextMenuTrigger {
  color: $textPrimaryColor;
-  font-size: 10px;
+  font-size: $smallFontSize;
  margin-left: 5px;
  line-height: 18px;
  vertical-align: middle;
--- a/resources/www/prod/skins/ui-components/_answers-tools.scss
+++ b/resources/www/prod/skins/ui-components/_answers-tools.scss
@@ -15,7 +15,7 @@
  margin-bottom: 0px;
  margin-top: 0px;
  background-color: $mediumBackgroundColor;
-  font-size:10px;
+  font-size: $smallFontSize;
  z-index:100;
  height:45px;
 }
@@ -38,7 +38,7 @@
 #idFrameT .tools .dropdownButton button.btn {
  height: 30px;
  font-family: verdana,"Helvetica Neue",Helvetica,Arial,sans-serif;
-  font-size: 12px;
+  font-size: $mediumFontSize;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
@@ -84,7 +84,7 @@

 #idFrameT .tools .dropdown-menu a {
  padding: 3px 10px;
-  font-size: 12px;
+  font-size: $mediumFontSize;
  color: $answersToolsBtnColor;
  cursor: pointer;
 }
--- a/resources/www/prod/skins/ui-components/_answers.scss
+++ b/resources/www/prod/skins/ui-components/_answers.scss
@@ -154,18 +154,6 @@ $answersInfoLabelColor: #949494 !default;
    position: relative;
    clear: left;
    margin: 10px;
-    .btn {
-      font-family: verdana,"Helvetica Neue",Helvetica,Arial,sans-serif;
-      font-size: 12px;
-      font-weight: bold;
-    }
-    .btn-inverse:hover {
-      color: $textPrimaryHoverColor;
-    }
-    .btn-group.open .btn-inverse.dropdown-toggle {
-      background-color: $darkerBackgroundColor;
-      background-image: none;
-    }
    .headblock {
      max-width: 800px;
      margin-bottom: 20px;
@@ -215,7 +203,7 @@ $answersInfoLabelColor: #949494 !default;
      font-weight: bold;
      font-size: 20px;
      .author {
-        font-size: 12px;
+        font-size: $mediumFontSize;
        font-weight: normal;
        margin-left: 15px;
      }
@@ -247,7 +235,7 @@ $answersInfoLabelColor: #949494 !default;
      height: 60px;
      text-align: center;
      font-weight: bold;
-      font-size: 13px;
+      font-size: $mediumFontSize;
      background-position: center bottom;
    }
    .contents {
--- a/resources/www/prod/skins/ui-components/_buttons.scss
+++ b/resources/www/prod/skins/ui-components/_buttons.scss
@@ -15,7 +15,7 @@

 .ui-dialog .btn {
  font-family: verdana,"Helvetica Neue",Helvetica,Arial,sans-serif;
-  font-size: 12px;
+  font-size: $mediumFontSize;
  font-weight: bold;
 }

--- a/resources/www/prod/skins/ui-components/_diapo.scss
+++ b/resources/www/prod/skins/ui-components/_diapo.scss
@@ -50,7 +50,8 @@ $diapoBorderColor: $darkerBorderColor !default;

  .bottom {
    position: absolute;
-    bottom: 0px;
+    bottom: 0;
+    z-index: 100;
  }

  div.title {
--- a/resources/www/prod/skins/ui-components/_jquery-ui.scss
+++ b/resources/www/prod/skins/ui-components/_jquery-ui.scss
@@ -32,7 +32,7 @@ $modalBackground: $darkerBackgroundColor !default;
      overflow: hidden;
      a {
        padding: 5px 8px;
-        font-size: 0.8em;
+        //font-size: 0.8em;
        font-weight: normal;
        color: $lightTextColor; // more contrasted  color
      }
@@ -84,7 +84,7 @@ $modalBackground: $darkerBackgroundColor !default;
 .ui-tabs li.ui-state-active a, .ui-state-active a:link, .ui-state-active a {
  color: $mediumTextActiveColor;
  font-weight: bold;
-  font-size: 0.8em;
+  //font-size: 0.8em;
 }

 .ui-state-active, .ui-widget-content .ui-state-active {
--- a/resources/www/prod/skins/ui-components/_modal-bridge.scss
+++ b/resources/www/prod/skins/ui-components/_modal-bridge.scss
@@ -9,7 +9,6 @@
    *border: 1px solid $bridgeDropdownMenuBorder;
    a {
      padding: 3px 10px;
-      font-size: 12px;
      color: $bridgeDropdownMenuColor;
      cursor: pointer;
      &:hover {
@@ -196,7 +195,7 @@
 #dialog_publicator .element_menu .default_action,
 .element_menu .trigger {
  z-index: 444;
-  font-size: 13px;
+  font-size: $mediumFontSize;
  font-weight: normal;
  border-color: #666
 }
--- a/resources/www/prod/skins/ui-components/_modal-edit.scss
+++ b/resources/www/prod/skins/ui-components/_modal-edit.scss
@@ -294,7 +294,8 @@
 #idFrameE {
  .ui-datepicker-inline {
    background-color: #111111;
-    background-image: url('#{$skinsImagesPath}ui-bg_gloss-wave_20_111111_500x100.png');
+    // /assets/prod/skins/{{cssfile}}/images/
+    background-image: url('#{$iconsPath}ui-bg_gloss-wave_20_111111_500x100.png');
    background-repeat: repeat-x;
    background-position: 50% top;
  }
--- a/resources/www/prod/skins/ui-components/_modal-preview.scss
+++ b/resources/www/prod/skins/ui-components/_modal-preview.scss
@@ -76,7 +76,7 @@

 #PREVIEWOTHERSINNER li.title {
  font-weight: bold;
-  font-size: 13px;
+  font-size: $mediumFontSize;
  margin: 10px 10px 5px;
 }

--- a/resources/www/prod/skins/ui-components/_modal-publish.scss
+++ b/resources/www/prod/skins/ui-components/_modal-publish.scss
@@ -14,7 +14,7 @@
        background-color: $darkerBackgroundColor;
        border: 1px solid $darkerBorderColor;
        color: $darkerTextColor;
-        font-size: 13px;
+        font-size: $mediumFontSize;
        cursor: pointer;
        &.odd {
          background-color: lighten($darkerBackgroundColor, 5);
--- a/resources/www/prod/skins/ui-components/_modal-push.scss
+++ b/resources/www/prod/skins/ui-components/_modal-push.scss
@@ -12,11 +12,11 @@
 }

 .PushBox .LeftColumn ul {
-  margin:10px 0;
+  margin: 10px 0;
 }

 .PushBox .LeftColumn ul li img {
-  margin-right:5px;
+  margin-right: 5px;
  vertical-align: middle;
 }

@@ -43,90 +43,90 @@
 }

 .PushBox .user_content .badges {
-  top:50px;
-  overflow:auto;
-  height:auto;
-  bottom:50px;
-  left:20px;
-  right:20px;
+  top: 50px;
+  overflow: auto;
+  height: auto;
+  bottom: 50px;
+  left: 20px;
+  right: 20px;
 }

 .PushBox .user_content .badges .badge .deleter {
-  float:right;
+  float: right;

 }

 .PushBox .user_content .badges .badge {
-  width:230px;
-  height:80px;
-  margin:10px;
-  display:inline-block;
+  width: 230px;
+  height: 80px;
+  margin: 10px;
+  display: inline-block;
  background-color: #515150;
-  border:3px solid #515150;
-  padding:3px;
+  border: 3px solid #515150;
+  padding: 3px;
 }

 .PushBox .user_content .badges .badge.selected {
-  border:3px solid #EFEFEF;
+  border: 3px solid #EFEFEF;
 }

 .PushBox .user_content .badges .badge .toggles .status_on .toggle_off {
-  display:none;
+  display: none;
 }

 .PushBox .user_content .badges .badge .toggles .status_off .toggle_on {
-  display:none;
+  display: none;
 }

-.PushBox .user_content .badges .badge td{
+.PushBox .user_content .badges .badge td {
  vertical-align: top;
 }

-.PushBox .user_content .badges .badge td.toggle{
+.PushBox .user_content .badges .badge td.toggle {
  vertical-align: bottom;
 }

-.PushBox .user_content .badges .badge .icon{
-  width:80px;
-  background-color:#404040;
+.PushBox .user_content .badges .badge .icon {
+  width: 80px;
+  background-color: #404040;
 }

 .PushBox .user_content .badges .badge .infos {
-  padding-top:3px;
-  padding-left:5px;
+  padding-top: 3px;
+  padding-left: 5px;
 }

 .PushBox .user_content .badges .badge table {
-  width:95%;
+  width: 95%;
 }

 .PushBox .user_content .badges .badge .infos table {
-  height:75px;
+  height: 75px;
 }

 .PushBox .user_content .badges .badge .infos tr {
-  height:20px;
+  height: 20px;
 }

 .PushBox .user_content .badges .badge .infos tr.toggles {
-  height:25px;
-  text-align:center;
+  height: 25px;
+  text-align: center;
 }

 .PushBox .user_content .badges .badge .icon img {
-  margin:7px;
+  margin: 7px;
 }

 .PushBox .user_content .badges .badge .name {
-  font-weight:bold;
-  white-space:pre-line;
-  display:block;
-  font-size:12px;
+  font-weight: bold;
+  white-space: pre-line;
+  display: block;
+  font-size: $mediumFontSize;
 }

 .PushBox .user_content .badges .badge .subtite {
-  display:block;
-  font-size:10px;
+  display: block;
+  font-size: 10px;
 }

 .PushBox .user_content .header .options {
@@ -134,7 +134,7 @@
 }

 .PushBox .all-lists .lists {
-  overflow:auto;
+  overflow: auto;
 }

 .PushBox .LeftColumn .content ul.list li:nth-child(odd) {
@@ -162,19 +162,19 @@
 }

 .PushBox .lists .list {
-  padding:3px 0;
+  padding: 3px 0;
 }

 .PushBox .welcome {
  text-align: center;
  font-size: 16px;
  line-height: 18px;
-  margin : 20px 0;
+  margin: 20px 0;
 }

 .PushBox .welcome h1 {
  font-weight: bold;
-  margin:40px 0;
+  margin: 40px 0;
 }

 #list-editor-search-results {
@@ -182,14 +182,14 @@
 }

 #list-editor-search-results table td {
-  padding:1px 0;
-  overflow:hidden;
+  padding: 1px 0;
+  overflow: hidden;
 }

 #list-editor-search-results table tr {
  line-height: 24px;
  vertical-align: middle;
-  cursor:pointer;
+  cursor: pointer;
 }

 #list-editor-search-results table tr.odd {
@@ -197,70 +197,66 @@
 }

 #list-editor-search-results table tr.selected {
-  background-color:#D18827;
+  background-color: #D18827;
 }

-
 #list-editor-search-results table th.sortable span {
-  margin:0 5px;
+  margin: 0 5px;
 }

 #list-editor-search-results table th.sortable {
-  cursor:pointer;
+  cursor: pointer;
 }

 #list-editor-search-results table th.sortable.hover,
 #list-editor-search-results table th.sortable.sorted {
-  background-color:#F0AD30;
+  background-color: #F0AD30;
 }

 #list-editor-search-results table th.sortable span.ord_notifier {
-  display:none;
+  display: none;
 }

 #list-editor-search-results table th.sortable.sorted span.ord_notifier {
-  display:inline;
+  display: inline;
 }

-
-
 #ListShare table {
-  width:100%;
-  margin:5px;
-  background-color:#505050;
+  width: 100%;
+  margin: 5px;
+  background-color: #505050;
 }

 #ListManager .content.readonly .badge {
-  width:250px;
-  display:inline-block;
-  margin:5px;
+  width: 250px;
+  display: inline-block;
+  margin: 5px;
  background-color: #515150;
-  padding:5px;
+  padding: 5px;
 }

 #ListManager .content.readonly .badge .deleter {
-  float:right;
+  float: right;
 }

-
-#ListManager .content.readonly .badge table{
-  width:auto;
+#ListManager .content.readonly .badge table {
+  width: auto;
  table-layout: fixed;
 }

-#ListManager .content.readonly .badge .infos{
-  padding:2px;
+#ListManager .content.readonly .badge .infos {
+  padding: 2px;
 }

-#ListManager h1 span.title{
-  font-size:24px;
-  line-height:24px;
-  font-weight:bold;
-  vertical-align:middle;
+#ListManager h1 span.title {
+  font-size: 24px;
+  line-height: 24px;
+  font-weight: bold;
+  vertical-align: middle;
 }

 #PushBox .general_togglers li {
-  margin-top:5px;
+  margin-top: 5px;
 }

 #PushBox .general_togglers button {
@@ -269,12 +265,10 @@
  width: 100%;
 }

-
 #PushBox .general_togglers button .ui-button-text {
  font-weight: lighter;
 }

-
 #PushBox .content .list_saver {
  padding-top: 20px;
  padding-bottom: 20px;
@@ -298,15 +292,15 @@
 }

 #ListManager .content .lists span.action {
-  display:block;
-  text-align:center;
+  display: block;
+  text-align: center;
  font-weight: bold;
-  width:100%;
+  width: 100%;
 }

 #recommanded-users {
-  margin-top:25px;
-  line-height:15px;
+  margin-top: 25px;
+  line-height: 15px;
 }

 #recommanded-users a:last-child {
@@ -315,8 +309,8 @@
 }

 #QuickAddUser table {
-  width:100%;
-  table-layout:auto;
+  width: 100%;
+  table-layout: auto;
 }

 #QuickAddUser table tr td {
--- a/resources/www/prod/skins/ui-components/_pagination.scss
+++ b/resources/www/prod/skins/ui-components/_pagination.scss
@@ -8,7 +8,7 @@
  margin: 0 4px;
  background-color: #0077BC;
  border-radius: $defaultBorderRadius;
-  font-size: 12px;
+  font-size: $mediumFontSize;
  line-height: 14px;
  font-weight: bold;
  cursor: pointer;
--- a/resources/www/prod/skins/ui-components/_upload.scss
+++ b/resources/www/prod/skins/ui-components/_upload.scss
@@ -22,7 +22,7 @@
  h5 {
    margin-top: 20px;
    margin-bottom: 10px;
-    font-size: 13px;
+    font-size: $mediumFontSize;
    font-weight: bold;
    text-align: left;
  }
--- a/resources/www/prod/skins/ui-components/_workzone-baskets.scss
+++ b/resources/www/prod/skins/ui-components/_workzone-baskets.scss
@@ -35,7 +35,7 @@
      color: $workzoneBasketAlertDataColor;
      text-align: center;
      font-weight: bold;
-      font-size: 12px;
+      font-size: $mediumFontSize;
      display: none;
      z-index: 5000;
    }
@@ -79,7 +79,7 @@
        right: 40px;
        height: 16px;
        margin: 2px 0;
-        font-size: 12px;
+        font-size: $mediumFontSize;
      }
      .menu {
        text-align: right;
@@ -119,7 +119,7 @@
    }
    .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
      color: $textPrimaryActiveColor;
-      font-size: 1em;
+      //font-size: 1em;
    }
  }
 }
--- a/resources/www/prod/skins/ui-components/_workzone-proposals.scss
+++ b/resources/www/prod/skins/ui-components/_workzone-proposals.scss
@@ -14,7 +14,7 @@
    }
    li {
      line-height: 17px;
-      font-size: 13px;
+      font-size: $mediumFontSize;
    }
    &.fancytree-container {
      background-color: $mediumBackgroundColor;
@@ -50,7 +50,7 @@
    border-left: 4px solid $mediumBackgroundColor;
    border-bottom: 1px solid $mediumBorderColor;
    .fancytree-title {
-      font-size: 12px;
+      font-size: $xmediumFontSize;
      margin-left: 10px;
    }
    &:hover {
@@ -93,7 +93,7 @@
  }

  .fancytree-title {
-    font-size: 12px;
+    font-size: $xmediumFontSize;
    color: $proposalsTitle;
    background-color: transparent;
    border: 0px none transparent;
--- a/resources/www/prod/skins/ui-components/_workzone-thesaurus.scss
+++ b/resources/www/prod/skins/ui-components/_workzone-thesaurus.scss
@@ -54,7 +54,7 @@
 }

 #THPD_T_treeBox {
-  font-size: 0.85em;
+  font-size: $xmediumFontSize;
  overflow-x: hidden;
  overflow-y: hidden;
  > div {
--- a/resources/www/prod/skins/ui-components/_workzone.scss
+++ b/resources/www/prod/skins/ui-components/_workzone.scss
@@ -155,7 +155,7 @@
      display: inline;
      margin: 0 15px 0 0;
      float: left;
-      font-size: 11px;
+      font-size: $smallFontSize;
      color: $workzoneToolsLabelColor;
      line-height: 22px;
      vertical-align: middle;
--- a/resources/www/setup/styles/main.scss
+++ b/resources/www/setup/styles/main.scss
@@ -1,8 +1,8 @@
 $iconsPath: '../../../assets/common/images/icons/';
-
+@import '../../_shared/styles/variables';
 body, html {
-  font-family: Helvetica, Verdana, Arial, sans-serif;
-  font-size: 13px;
+  font-family: $defaultFontFamily;
+  font-size: $mediumFontSize;
  color: white;
  background-color: #000000;
 }
--- a/templates/web/overview.html.twig
+++ b/templates/web/overview.html.twig
@@ -8,40 +8,36 @@

 {% block stylesheet %}
        <style type="text/css">
-      html{
-
-                color:white;
-                background-color:#212121;
-        }
-
-
-            body{
-                font-family:Helvetica, Arial, sans-serif;
-                font-size:14px;
-        overflow:auto;
-        min-height:100%;
-        width:100%;
-        top:0;
-        left:0;
-        position:absolute;
+            body {
+                color: #FFFFFF;
+                background-color: #212121;
+                font-family: Helvetica, Arial, sans-serif;
+                font-size: 14px;
+                overflow: auto;
+                min-height: 100%;
+                width: 100%;
            }
-            h1{
-                font-size:26px;
-                font-weight:bold;
-                padding:50px 0 20px;
+
+            h1 {
+                font-size: 26px;
+                font-weight: bold;
+                padding: 50px 0 20px;
            }
-            #page{
-                width:860px;
-                background-color:#414141;
-                padding:0 20px;
-                margin:0 auto;
-                height:100%;
+            #page {
+                width: 860px;
+                background-color: #414141;
+                padding: 0 20px;
+                margin: 0 auto;
+                height: 100%;
+                position: relative !important;
            }
-      .preview .thumb_wrapper{
-        overflow:hidden;
-      }
-            .caption{
-                padding:50px 0 20px;
+
+            .preview .thumb_wrapper {
+                overflow: hidden;
+            }
+
+            .caption {
+                padding: 50px 0 20px;
            }
        </style>
 {% endblock %}
--- a/templates/web/prod/actions/edit_default.html.twig
+++ b/templates/web/prod/actions/edit_default.html.twig
@@ -78,7 +78,7 @@
        {% set i = field.get_id() %}
        {% if field.is_readonly() is empty %}
            <div class="edit_field" id="EditFieldBox_{{i}}" onclick="return(edit_mdwn_fld(event, {{i}}, '{{field.get_name()}}'));" >
-                <img id="editSGtri_{{i}}" style="visibility:hidden;" src="/assets/prod/images/{{cssfile}}/images/suggested.gif" />
+                <img id="editSGtri_{{i}}" style="visibility:hidden;" src="/assets/prod/skins/{{cssfile}}/images/suggested.gif" />
                <img src="/assets/common/images/icons/info.gif" tooltipsrc="{{ path('prod_tooltip_metadata', { 'sbas_id' : field.get_databox().get_sbas_id(), 'field_id' : field.get_id() }) }}" class="fieldTips" alt=""/>
                {% if field.get_dces_element %}
                    <img src="/assets/common/images/icons/dublincore.png" tooltipsrc="{{ path('prod_tooltip_dces', { 'sbas_id' : field.get_databox().get_sbas_id(), 'field_id' : field.get_id() }) }}" alt="{{ 'Ce champ est decrit comme un element DublinCore' | trans }}" class="DCESTips" />
--- a/templates/web/prod/results/record.html.twig
+++ b/templates/web/prod/results/record.html.twig
@@ -69,7 +69,7 @@
                    <td style='text-align:right;width:{{l_width}}px;' valign='bottom'>
                        <a style="float:right;padding:0;cursor:pointer;" class="contextMenuTrigger" id="contextTrigger_{{record.id}}">
                            <img src="/assets/common/images/icons/contextMenuTrigger.png" height="10" />
-                            &#9660;
+                            <i class="icon-caret-down"></i>
                        </a>
                        <table cellspacing="0" cellpadding="0" style="display:none;" id="answerContext_{{record.id}}" class="contextMenu answercontextmenu">
                            <tbody>
--- a/templates/web/prod/templates/upload.html.twig
+++ b/templates/web/prod/templates/upload.html.twig
@@ -35,7 +35,7 @@
            </div>
            <p class="error alert-error"></p>
            <p class="success alert-success"></p>
-            <button type="button" class="remove-element btn btn-inverse btn-mini"><%= language.cancel %></button>
+            <button type="button" class="remove-element btn btn-mini"><%= language.cancel %></button>
        </div>
    </div>
 </li>