Changeset View
Changeset View
Standalone View
Standalone View
src/gtk3/widgets/_notebook.scss
1 | @charset "UTF-8"; | 1 | @charset "UTF-8"; | ||
---|---|---|---|---|---|
2 | 2 | | |||
3 | /***************** | 3 | /***************** | ||
4 | * Notebooks and * | 4 | * Notebooks and * | ||
5 | * Tabs * | 5 | * Tabs * | ||
6 | *****************/ | 6 | *****************/ | ||
7 | /************* | 7 | /************* | ||
8 | * Notebooks * | 8 | * Notebooks * | ||
9 | *************/ | 9 | *************/ | ||
10 | notebook { | 10 | notebook { | ||
11 | &.frame { | 11 | &.frame { | ||
12 | border: none; | 12 | border: none; | ||
13 | padding: 0px; | 13 | padding: 0px; | ||
14 | box-shadow: inset 0px 0px 0px 1px $border_color; | 14 | box-shadow: inset 0px 0px 0px 1px gtk("@borders"); | ||
15 | } | 15 | } | ||
16 | 16 | | |||
17 | > header { | 17 | > header { | ||
18 | padding: 0px; | 18 | padding: 0px; | ||
19 | border: none; | 19 | border: none; | ||
20 | background-color: w_color(normal); | 20 | background-color: gtk("@theme_bg_color"); | ||
21 | //box-shadow: inset 0 -1px $border_color; | 21 | //box-shadow: inset 0 -1px gtk("@borders"); | ||
22 | 22 | | |||
23 | &.top { | 23 | &.top { | ||
24 | box-shadow: inset 0 -1px $border_color; // border | 24 | box-shadow: inset 0 -1px gtk("@borders"); // border | ||
25 | &:backdrop { box-shadow: inset 0 -1px backdrop($border_color); } | 25 | &:backdrop { box-shadow: inset 0 -1px gtk("@unfocused_borders"); } | ||
26 | } | 26 | } | ||
27 | &.bottom { | 27 | &.bottom { | ||
28 | box-shadow: inset 0 1px $border_color; | 28 | box-shadow: inset 0 1px gtk("@borders"); | ||
29 | &:backdrop { box-shadow: inset 0 1px backdrop($border_color); } | 29 | &:backdrop { box-shadow: inset 0 1px gtk("@unfocused_borders"); } | ||
30 | } | 30 | } | ||
31 | &.right { | 31 | &.right { | ||
32 | box-shadow: inset 1px 0 $border_color; | 32 | box-shadow: inset 1px 0 gtk("@borders"); | ||
33 | &:backdrop { box-shadow: inset 1px 0 backdrop($border_color); } | 33 | &:backdrop { box-shadow: inset 1px 0 gtk("@unfocused_borders"); } | ||
34 | } | 34 | } | ||
35 | &.left { | 35 | &.left { | ||
36 | box-shadow: inset -1px 0 $border_color; | 36 | box-shadow: inset -1px 0 gtk("@borders"); | ||
37 | &:backdrop { box-shadow: inset -1px 0 backdrop($border_color); } | 37 | &:backdrop { box-shadow: inset -1px 0 gtk("@unfocused_borders"); } | ||
38 | } | 38 | } | ||
39 | &:backdrop { | 39 | &:backdrop { | ||
40 | background-color: backdrop(w_color(normal)); | 40 | background-color: gtk("@theme_unfocused_bg_color"); | ||
41 | } | 41 | } | ||
42 | 42 | | |||
43 | tabs { | 43 | tabs { | ||
44 | margin: 0px; | 44 | margin: 0px; | ||
45 | } | 45 | } | ||
46 | 46 | | |||
47 | 47 | | |||
48 | @each $_tab, $_border, $_radius in (top,bottom,3px 3px 0px 0px), | 48 | @each $_tab, $_border, $_radius in (top,bottom,3px 3px 0px 0px), | ||
49 | (bottom,top,0px 0px 3px 3px), | 49 | (bottom,top,0px 0px 3px 3px), | ||
50 | (left,right, 3px 0px 0px 3px), | 50 | (left,right, 3px 0px 0px 3px), | ||
51 | (right,left, 0px 3px 3px 0px) { | 51 | (right,left, 0px 3px 3px 0px) { | ||
52 | &.#{$_tab} { | 52 | &.#{$_tab} { | ||
53 | > tabs { | 53 | > tabs { | ||
54 | > tab { | 54 | > tab { | ||
55 | padding: 4px 6px; | 55 | padding: 4px 6px; | ||
56 | border: 1px solid transparentize(w_color(text), 0.8); | 56 | border: 1px solid gtkalpha("@theme_fg_color", 0.2); | ||
57 | background-color: transparentize(w_color(text), 0.8); | 57 | background-color: gtkalpha("@theme_fg_color", 0.2); | ||
58 | border-radius: #{$_radius}; | 58 | border-radius: #{$_radius}; | ||
59 | border-#{$_border}-color: transparent; | 59 | border-#{$_border}-color: transparent; | ||
60 | &:hover, &.prelight-page { | 60 | &:hover, &.prelight-page { | ||
61 | background-color: transparentize(s_color(normal), 0.8); | 61 | background-color: gtkalpha("@theme_selected_bg_color", 0.2); | ||
62 | border-color: transparentize(s_color(normal), 0.8); | 62 | border-color: gtkalpha("@theme_selected_bg_color", 0.2); | ||
63 | } | 63 | } | ||
64 | &:checked { | 64 | &:checked { | ||
65 | border-color: $border_color; | 65 | border-color: gtk("@borders"); | ||
66 | border-#{$_border}-color: $menu_color; | 66 | border-#{$_border}-color: gtk("@theme_bg_color"); | ||
67 | background-color: $menu_color; | 67 | background-color: gtk("@theme_bg_color"); | ||
68 | &:backdrop { | 68 | &:backdrop { | ||
69 | border-color: backdrop($border_color); | 69 | border-color: gtk("@unfocused_borders"); | ||
70 | border-#{$_border}-color: backdrop($menu_color); | 70 | border-#{$_border}-color: gtk("@theme_unfocused_bg_color"); | ||
71 | background-color: backdrop($menu_color); | 71 | background-color: gtk("@theme_unfocused_bg_color"); | ||
72 | } | 72 | } | ||
73 | } | 73 | } | ||
74 | } | 74 | } | ||
75 | } | 75 | } | ||
76 | } | 76 | } | ||
77 | } | 77 | } | ||
78 | 78 | | |||
79 | @each $_tab, $_border, $_shadow1 in (top, right, -3px 0px 0px 0px), | 79 | @each $_tab, $_border, $_shadow1 in (top, right, -3px 0px 0px 0px), | ||
80 | (bottom, right, -3px 0px 0px 0px), | 80 | (bottom, right, -3px 0px 0px 0px), | ||
81 | (left, bottom, 0px -3px 0px 0px), | 81 | (left, bottom, 0px -3px 0px 0px), | ||
82 | (right, bottom, 0px -3px 0px 0px) { | 82 | (right, bottom, 0px -3px 0px 0px) { | ||
83 | &.#{$_tab} { | 83 | &.#{$_tab} { | ||
84 | > tabs { | 84 | > tabs { | ||
85 | > tab { | 85 | > tab { | ||
86 | &.reorderable-page { | 86 | &.reorderable-page { | ||
87 | border-width: 3px; | 87 | border-width: 3px; | ||
88 | border-style: solid; | 88 | border-style: solid; | ||
89 | border-color: transparent; | 89 | border-color: transparent; | ||
90 | background-color: w_color(normal); | 90 | background-color: gtk("@theme_bg_color"); | ||
91 | background-clip: padding-box; | 91 | background-clip: padding-box; | ||
92 | border-#{$_border}-width: 1px; | 92 | border-#{$_border}-width: 1px; | ||
93 | border-#{$_border}-color: $border_color; | 93 | border-#{$_border}-color: gtk("@borders"); | ||
94 | box-shadow: inset #{$_shadow1} w_color(normal); | 94 | box-shadow: inset #{$_shadow1} gtk("@theme_bg_color"); | ||
95 | &:hover, &.prelight-page { | 95 | &:hover, &.prelight-page { | ||
96 | box-shadow: inset 0px -3px 0px 0px transparentize(s_color(normal),0.8), inset $_shadow1 w_color(normal); | 96 | box-shadow: inset 0px -3px 0px 0px gtkalpha("@theme_selected_bg_color",0.2), inset $_shadow1 gtk("@theme_bg_color"); | ||
97 | } | 97 | } | ||
98 | &:checked { | 98 | &:checked { | ||
99 | box-shadow: inset 0px -3px 0px 0px s_color(normal), inset $_shadow1 w_color(normal); | 99 | box-shadow: inset 0px -3px 0px 0px gtk("@theme_selected_bg_color"), inset $_shadow1 gtk("@theme_bg_color"); | ||
100 | &:backdrop { | 100 | &:backdrop { | ||
101 | background-color: backdrop(w_color(normal)); | 101 | background-color: gtk("@theme_unfocused_bg_color"); | ||
102 | border-color: transparent; | 102 | border-color: transparent; | ||
103 | border-#{$_border}-color: backdrop($border_color); | 103 | border-#{$_border}-color: gtk("@unfocused_borders"); | ||
104 | box-shadow:none; | 104 | box-shadow:none; | ||
105 | } | 105 | } | ||
106 | } | 106 | } | ||
107 | &:backdrop { | 107 | &:backdrop { | ||
108 | background-color: backdrop(w_color(normal)); | 108 | background-color: gtk("@theme_unfocused_bg_color"); | ||
109 | border-#{$_border}-color: backdrop($border_color); | 109 | border-#{$_border}-color: gtk("@unfocused_borders"); | ||
110 | box-shadow:none; | 110 | box-shadow:none; | ||
111 | } | 111 | } | ||
112 | } | 112 | } | ||
113 | } | 113 | } | ||
114 | } | 114 | } | ||
115 | } | 115 | } | ||
116 | } | 116 | } | ||
117 | 117 | | |||
▲ Show 20 Lines • Show All 70 Lines • ▼ Show 20 Line(s) | |||||
188 | button.flat { | 188 | button.flat { | ||
189 | padding: 0; | 189 | padding: 0; | ||
190 | margin: 4px; | 190 | margin: 4px; | ||
191 | // FIXME: generalize .small-button? | 191 | // FIXME: generalize .small-button? | ||
192 | min-width: 12px; | 192 | min-width: 12px; | ||
193 | min-height: 12px; | 193 | min-height: 12px; | ||
194 | border: 0px solid; | 194 | border: 0px solid; | ||
195 | border-radius: 50%; | 195 | border-radius: 50%; | ||
196 | color: w_color(normal); | 196 | color: gtk("@theme_bg_color"); | ||
197 | background-color: $border_color; | 197 | background-color: gtk("@borders"); | ||
198 | background-image: none; | 198 | background-image: none; | ||
199 | &:hover { | 199 | &:hover { | ||
200 | background-color: $error_color; | 200 | background-color: $error_color; | ||
201 | } | 201 | } | ||
202 | &:active { background-color: $error_color;} | 202 | &:active { background-color: $error_color;} | ||
203 | 203 | | |||
204 | &:backdrop { | 204 | &:backdrop { | ||
205 | background-color: backdrop($border_color); | 205 | background-color: gtk("@unfocused_borders"); | ||
206 | color: backdrop(w_color(normal)); | 206 | color: gtk("@theme_unfocused_bg_color"); | ||
207 | } | 207 | } | ||
208 | } | 208 | } | ||
209 | } | 209 | } | ||
210 | 210 | | |||
211 | 211 | | |||
212 | > stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks | 212 | > stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks | ||
213 | background-color: transparent; | 213 | background-color: transparent; | ||
214 | border-style: solid; | 214 | border-style: solid; | ||
215 | border-color: $border_color; | 215 | border-color: gtk("@borders"); | ||
216 | border-width: 0px; | 216 | border-width: 0px; | ||
217 | } | 217 | } | ||
218 | } | 218 | } |