www.aleph1.co.uk Git - yaffs-website/blob - web/core/themes/stable/css/settings_tray/settings_tray.toolbar.css

   1 /**
   2  * @file
   3  * Visual styling for the toolbar when Settings Tray module is enabled.
   4  */
   5
   6 /* @todo Move this into toolbar when module is not experimental:
   7  *   https://www.drupal.org/node/2784593.
   8  */
   9
  10 /* Style the edit mode toolbar and tabs. */
  11 #toolbar-bar.js-settings-tray-edit-mode {
  12   background-color: #fff;
  13 }
  14 #toolbar-bar.js-settings-tray-edit-mode .toolbar-item {
  15   color: #999;
  16 }
  17 #toolbar-bar.js-settings-tray-edit-mode .toolbar-item .is-active {
  18   color: #333;
  19 }
  20
  21 /* Style both the edit and editing states of the contextual links toggle tab. */
  22 .toolbar-icon-edit.toolbar-item {
  23   background-color: #0066a1;
  24   background-image: linear-gradient(to bottom, #0066a1, #005b98);
  25   color: #eee;
  26   text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
  27   font-weight: 700;
  28   -webkit-font-smoothing: antialiased;
  29 }
  30 .toolbar-icon-edit.toolbar-item.is-active {
  31   background-color: #0a7bc1;
  32   background-image: linear-gradient(to bottom, #0a7bc1, #0a6eb4);
  33   color: #fff;
  34   text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
  35   font-weight: 700;
  36   -webkit-font-smoothing: antialiased;
  37 }
  38 .toolbar-tab:hover > .toolbar-icon-edit,
  39 .toolbar-icon-edit:focus .toolbar-item {
  40   background-color: #0a7bc1;
  41   background-image: linear-gradient(to bottom, #0a7bc1, #0a6eb4);
  42   border-color: #1e5c90;
  43   color: #fff;
  44   outline: none;
  45 }
  46 .toolbar-icon.toolbar-icon-edit.toolbar-item:before,
  47 button.toolbar-icon.toolbar-icon-edit.toolbar-item:before {
  48   background-image: url(../../../../misc/icons/bebebe/pencil.svg);
  49 }
  50 .toolbar-icon.toolbar-icon-edit.toolbar-item:before:hover,
  51 button.toolbar-icon.toolbar-icon-edit.toolbar-item:before:focus {
  52   background-image: url(../../../../misc/icons/ffffff/pencil.svg);
  53 }
  54 .toolbar-icon.toolbar-icon-edit.toolbar-item:hover > .toolbar-icon-edit:before {
  55   background-image: url(../../../../misc/icons/ffffff/pencil.svg);
  56 }
  57 #toolbar-bar.button.toolbar-icon.toolbar-icon.toolbar-icon-edit:before {
  58   background-image: url(../../../../misc/icons/ffffff/pencil.svg);
  59 }
  60
  61 #toolbar-bar.js-settings-tray-edit-mode button.toolbar-icon.toolbar-icon-edit.toolbar-item.is-active {
  62   color: #fff;
  63 }
  64 #toolbar-bar.js-settings-tray-edit-mode button.toolbar-icon.toolbar-icon-edit.toolbar-item.is-active:hover {
  65   background-image: linear-gradient(to bottom, #0a6fb4, #0a65aa);
  66 }