settings_tray.theme.css

Same filename in this branch
  1. 11.x core/themes/stable9/css/settings_tray/settings_tray.theme.css
Same filename in other branches
  1. 9 core/themes/stable9/css/settings_tray/settings_tray.theme.css
  2. 9 core/themes/stable/css/settings_tray/settings_tray.theme.css
  3. 9 core/modules/settings_tray/css/settings_tray.theme.css
  4. 8.9.x core/themes/stable/css/settings_tray/settings_tray.theme.css
  5. 8.9.x core/modules/settings_tray/css/settings_tray.theme.css
  6. 10 core/themes/stable9/css/settings_tray/settings_tray.theme.css
  7. 10 core/modules/settings_tray/css/settings_tray.theme.css

Visual styling for Settings Tray module.

File

core/modules/settings_tray/css/settings_tray.theme.css

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

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.