www.aleph1.co.uk Git - yaffs-website/blob - web/core/modules/outside_in/css/outside_in.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-outside-in-edit-mode {
  12   background-color: #fff;
  13 }
  14 #toolbar-bar.js-outside-in-edit-mode .toolbar-item {
  15   color: #999;
  16 }
  17 #toolbar-bar.js-outside-in-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: #50a0e9;
  24   background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
  25   background-image: linear-gradient(to bottom, #007bc6, #0071b8);
  26   color: #eee;
  27   text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
  28   font-weight: 700;
  29   -webkit-font-smoothing: antialiased;
  30 }
  31 .toolbar-icon-edit.toolbar-item.is-active {
  32   background-color: #50a0e9;
  33   background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
  34   background-image: linear-gradient(to bottom, #007bc6, #0071b8);
  35   color: #eee;
  36   text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
  37   font-weight: 700;
  38   -webkit-font-smoothing: antialiased;
  39 }
  40 .toolbar-tab:hover > .toolbar-icon-edit,
  41 .toolbar-icon-edit:focus .toolbar-item {
  42   background-color: #2369a6;
  43   background-image: -webkit-linear-gradient(top, #0c97ed, #1f86c7);
  44   background-image: linear-gradient(to bottom, #0c97ed, #1f86c7);
  45   border-color: #1e5c90;
  46   color: #fff;
  47   outline: none;
  48 }
  49 .toolbar-icon.toolbar-icon-edit.toolbar-item:before,
  50 button.toolbar-icon.toolbar-icon-edit.toolbar-item:before {
  51   background-image: url(../../../misc/icons/bebebe/pencil.svg);
  52 }
  53 .toolbar-icon.toolbar-icon-edit.toolbar-item:before:hover,
  54 button.toolbar-icon.toolbar-icon-edit.toolbar-item:before:focus {
  55   background-image: url(../../../misc/icons/ffffff/pencil.svg);
  56 }
  57 .toolbar-icon.toolbar-icon-edit.toolbar-item:hover > .toolbar-icon-edit:before {
  58   background-image: url(../../../misc/icons/ffffff/pencil.svg);
  59 }
  60 #toolbar-bar.button.toolbar-icon.toolbar-icon.toolbar-icon-edit:before {
  61   background-image: url(../../../misc/icons/ffffff/pencil.svg);
  62 }
  63
  64 #toolbar-bar.js-outside-in-edit-mode button.toolbar-icon.toolbar-icon-edit.toolbar-item.is-active {
  65  background-image: none;
  66  color: #fff;
  67 }
  68 #toolbar-bar.js-outside-in-edit-mode button.toolbar-icon.toolbar-icon-edit.toolbar-item.is-active:hover {
  69  background-image: linear-gradient(to bottom, #0094f0, #0e69be);
  70 }