www.aleph1.co.uk Git - yaffs-website/blob - web/core/modules/settings_tray/css/settings_tray.theme.css

   1 /**
   2  * @file
   3  * Visual styling for Settings Tray module.
   4  */
   5
   6 /* @todo remove the @imports when we find a better way to load these styles last.
   7  * https://www.drupal.org/node/1945262.
   8  */
   9
  10 /* Style the edit mode toolbar and tabs. */
  11 #toolbar-bar.js-settings-tray-edit-mode {
  12   background-image: linear-gradient(to bottom,#0c97ed,#1f86c7);
  13 }
  14 .js-settings-tray-edit-mode .toolbar-item:not(.toolbar-icon-edit) {
  15   color: #999;
  16 }
  17 .js-settings-tray-edit-mode .toolbar-item:not(.toolbar-icon-edit) .is-active {
  18   color: #333;
  19 }
  20
  21 /* Style both the edit and editing states of the contextual links toggle tab. */
  22 .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item,
  23 .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active,
  24 .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:focus {
  25   background-color: #50a0e9;
  26   background-image: linear-gradient(to bottom, #007bc6, #0071b8);
  27   color: #ddd;
  28   text-shadow: none;
  29   font-weight: bold;
  30   outline: none;
  31 }
  32 /* Make the hover of the inactive state the same as the active state. */
  33 .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:hover,
  34 .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active {
  35   background-image: linear-gradient(to bottom, #0c97ed, #1f86c7);
  36   color: #fff;
  37 }
  38 /* Make the hover of the active state the same as the inactive state. */
  39 .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active:hover {
  40   background-color: #2369a6;
  41   background-image: linear-gradient(to bottom, #007bc6, #0071b8);
  42   color: #fff;
  43 }
  44 /* Make the inactive icon grey. */
  45 .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:before {
  46   background-image: url(../../../misc/icons/bebebe/pencil.svg);
  47 }
  48 /* Make the active icon white. */
  49 .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active:before {
  50   background-image: url(../../../misc/icons/ffffff/pencil.svg);
  51 }
  52 .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:hover:before {
  53   background-image: url(../../../misc/icons/ffffff/pencil.svg);
  54 }
  55 .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:hover > .toolbar-icon-edit:before {
  56   background-image: url(../../../misc/icons/ffffff/pencil.svg);
  57 }
  58 .toolbar-tab > .button.toolbar-icon.toolbar-icon.toolbar-icon-edit:before {
  59   background-image: url(../../../misc/icons/ffffff/pencil.svg);
  60 }
  61
  62 /* Style the editables while in edit mode. */
  63 .dialog-off-canvas__main-canvas.js-settings-tray-edit-mode .settings-tray-editable {
  64   outline: 1px dashed rgba(0,0,0,0.5);
  65   box-shadow: 0 0 0 1px rgba(255,255,255,0.7);
  66 }
  67 .dialog-off-canvas__main-canvas.js-settings-tray-edit-mode .settings-tray-editable:hover,
  68 .dialog-off-canvas__main-canvas.js-settings-tray-edit-mode .settings-tray-editable.settings-tray-active-editable {
  69   background-color: rgba(0,0,0,0.2);
  70 }