3 * Visual styling for Settings Tray module.
6 /* @todo remove the @imports when we find a better way to load these styles last.
7 * https://www.drupal.org/node/1945262.
10 /* Style the edit mode toolbar and tabs. */
11 #toolbar-bar.js-settings-tray-edit-mode {
12 background-image: linear-gradient(to bottom, #0a7bc1, #0a6eb4);
14 .js-settings-tray-edit-mode .toolbar-item:not(.toolbar-icon-edit) {
17 .js-settings-tray-edit-mode .toolbar-item:not(.toolbar-icon-edit) .is-active {
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: #0066a1;
26 background-image: linear-gradient(to bottom, #0066a1, #005b98);
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, #0a7bc1, #0a6eb4);
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: #0066a1;
41 background-image: linear-gradient(to bottom, #0066a1, #005b98);
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);
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);
52 .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:hover:before {
53 background-image: url(../../../misc/icons/ffffff/pencil.svg);
55 .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:hover > .toolbar-icon-edit:before {
56 background-image: url(../../../misc/icons/ffffff/pencil.svg);
58 .toolbar-tab > .button.toolbar-icon.toolbar-icon.toolbar-icon-edit:before {
59 background-image: url(../../../misc/icons/ffffff/pencil.svg);
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);
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);