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