Mercurial > repos > other > Adwaita-Dark-Green
annotate gtk-3.0/_common.scss @ 95:f3009ca89a46
Fix exported colours and export dark ones
author | IBBoard <dev@ibboard.co.uk> |
---|---|
date | Mon, 14 Oct 2019 21:00:06 +0100 |
parents | cb3e1a45b770 |
children |
rev | line source |
---|---|
0 | 1 @function gtkalpha($c,$a) { |
2 @return unquote("alpha(#{$c},#{$a})"); | |
3 } | |
4 | |
5 $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); | |
6 | |
7 * { | |
8 padding: 0; | |
9 -GtkToolButton-icon-spacing: 4; | |
10 -GtkTextView-error-underline-color: $error_color; | |
11 | |
12 -GtkCheckButton-indicator-size: 16; | |
13 -GtkCheckMenuItem-indicator-size: 16; | |
14 | |
15 // The size for scrollbars. The slider is 2px smaller, but we keep it | |
16 // up so that the whole area is sensitive to button presses for the | |
17 // slider. The stepper button is larger in both directions, the slider | |
18 // only in the width | |
19 | |
20 -GtkScrolledWindow-scrollbar-spacing: 0; | |
21 -GtkScrolledWindow-scrollbars-within-bevel: 1; | |
22 | |
23 -GtkToolItemGroup-expander-size: 11; | |
24 -GtkExpander-expander-size: 16; | |
25 -GtkTreeView-expander-size: 11; | |
26 | |
27 -GtkTreeView-horizontal-separator: 4; | |
28 | |
29 -GtkMenu-horizontal-padding: 0; | |
30 -GtkMenu-vertical-padding: 0; | |
31 | |
32 -GtkWidget-link-color: $link_color; | |
33 -GtkWidget-visited-link-color: $link_visited_color; | |
34 | |
35 -GtkWidget-focus-padding: 2; // FIXME: do we still need these? | |
36 -GtkWidget-focus-line-width: 1; // | |
37 | |
38 -GtkWidget-text-handle-width: 20; | |
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
39 -GtkWidget-text-handle-height: 20; |
0 | 40 |
41 -GtkDialog-button-spacing: 4; | |
42 -GtkDialog-action-area-border: 0; | |
43 | |
44 -GtkStatusbar-shadow-type: none; | |
45 | |
46 // We use the outline properties to signal the focus properties | |
47 // to the adwaita engine: using real CSS properties is faster, | |
48 // and we don't use any outlines for now. | |
49 | |
50 outline-color: transparentize($fg_color, 0.7); | |
51 outline-style: dashed; | |
52 outline-offset: -3px; | |
53 outline-width: 1px; | |
54 outline-radius: 2px; | |
55 } | |
56 | |
57 | |
58 /*************** | |
59 * Base States * | |
60 ***************/ | |
61 | |
62 .background { | |
63 color: $fg_color; | |
64 background-color: if($variant == 'light', darken($bg_color, 1.5%), $bg_color); | |
65 | |
66 &:backdrop { | |
67 text-shadow: none; | |
68 icon-shadow: none; | |
69 color: $backdrop_fg_color; | |
70 background-color: $backdrop_bg_color; | |
71 } | |
72 } | |
73 | |
74 /* | |
75 These wildcard seems unavoidable, need to investigate. | |
76 Wildcards are bad and troublesome, use them with care, | |
77 or better, just don't. | |
78 Everytime a wildcard is used a kitten dies, painfully. | |
79 */ | |
80 | |
81 *:insensitive { | |
82 -gtk-image-effect: dim; | |
83 } | |
84 | |
85 .gtkstyle-fallback { | |
86 background-color: $bg_color; | |
87 color: $fg_color; | |
88 &:prelight { | |
89 background-color: lighten($bg_color, 10%); | |
90 color: $fg_color; | |
91 } | |
92 &:active { | |
93 background-color: darken($bg_color, 10%); | |
94 color: $fg_color; | |
95 } | |
96 &:insensitive { | |
97 background-color: $insensitive_bg_color; | |
98 color: $insensitive_fg_color; | |
99 } | |
100 &:selected { | |
101 background-color: $selected_bg_color; | |
102 color: $selected_fg_color; | |
103 } | |
104 } | |
105 | |
106 .view { | |
107 color: $text_color; | |
108 background-color: $base_color; | |
109 | |
110 &:backdrop { | |
111 color: $backdrop_text_color; | |
112 background-color: $backdrop_base_color; | |
113 } | |
114 | |
115 &:selected { | |
116 border-radius: 3px; | |
117 @extend %selected_items; | |
118 } | |
119 } | |
120 | |
121 .rubberband { | |
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
122 border: 1px solid $selected_bg_color; |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
123 background-color: transparentize($selected_bg_color,0.8); |
0 | 124 } |
125 | |
126 .label { | |
127 &.separator { | |
128 color: $fg_color; | |
129 @extend .dim-label; | |
130 &:backdrop { color: $backdrop_fg_color; } | |
131 } | |
132 &:selected, | |
133 &:selected:focus, | |
134 &:selected:hover { | |
135 @extend %selected_items; | |
136 } | |
137 &:insensitive { | |
138 color: $insensitive_fg_color; | |
139 &:backdrop { color: $backdrop_insensitive_color; } | |
140 } | |
141 } | |
142 | |
143 .dim-label { | |
144 opacity: 0.55; | |
145 text-shadow: none; | |
146 } | |
147 | |
148 GtkAssistant { | |
149 .sidebar { | |
150 background-color: $base_color; | |
151 border-top: 1px solid $borders_color; | |
152 &:dir(ltr) { border-right: 1px solid $borders_color; } | |
153 &:dir(rtl) { border-left: 1px solid $borders_color; } | |
154 &:backdrop { | |
155 background-color: $backdrop_base_color; | |
156 border-color: $backdrop_borders_color; | |
157 } | |
158 } | |
159 &.csd .sidebar { border-top-style: none; } | |
160 .sidebar .label { | |
161 padding: 6px 12px; | |
162 } | |
163 .sidebar .label.highlight { | |
164 background-color: mix($bg_color, $fg_color, 80%); | |
165 } | |
166 } | |
167 | |
168 GtkTextView { // This will get overridden by .view, needed by gedit line numbers | |
169 background-color: mix($bg_color, $base_color, 50%); | |
170 &:backdrop { background-color: mix($backdrop_bg_color, | |
171 $backdrop_base_color, 50%); } | |
172 } | |
173 | |
174 .grid-child { | |
175 padding: 3px; | |
176 border-radius: 3px; | |
177 &:selected { | |
178 @extend %selected_items; | |
179 outline-offset: -2px; | |
180 } | |
181 } | |
182 | |
183 %osd, .osd { | |
184 color: $osd_fg_color; | |
185 border: none; | |
186 background-color: $osd_bg_color; | |
187 background-clip: padding-box; | |
188 outline-color: transparentize($osd_fg_color, 0.7); | |
189 box-shadow: none; | |
190 text-shadow: 0 1px black; | |
191 icon-shadow: 0 1px black; | |
192 &:backdrop { text-shadow: none; } | |
193 } | |
194 | |
195 /********************* | |
196 * Spinner Animation * | |
197 *********************/ | |
198 | |
199 @keyframes spin { | |
200 to { -gtk-icon-transform: rotate(1turn); } | |
201 } | |
202 | |
203 .spinner { | |
204 background-image: none; | |
205 background-color: blue; | |
206 opacity: 0; // non spinning spinner makes no sense | |
207 -gtk-icon-source: -gtk-icontheme('process-working-symbolic'); | |
208 &:active { | |
209 opacity: 1; | |
210 animation: spin 1s linear infinite; | |
211 &:insensitive { | |
212 opacity: 0.5; | |
213 } | |
214 } | |
215 } | |
216 | |
217 /**************** | |
218 * Text Entries * | |
219 ****************/ | |
220 | |
221 .entry { | |
222 border: 1px solid; | |
223 padding: 5px 8px 6px; | |
224 | |
225 &.image { // icons inside the entry | |
226 &.left { padding-left: 0; } | |
227 &.right { padding-right: 0; } | |
228 } | |
229 | |
230 border-radius: 3px; | |
231 transition: all 200ms $ease-out-quad; | |
232 @include entry(normal); | |
233 | |
234 &.flat, &.flat:focus { | |
235 padding: 2px; | |
236 @include entry(normal, $edge:none); | |
237 border: none; | |
238 border-radius: 0; | |
239 } | |
240 | |
241 &:focus { @include entry(focus); } | |
242 &:insensitive { @include entry(insensitive); } | |
243 &:backdrop { @include entry(backdrop); } | |
244 &:backdrop:insensitive { @include entry(backdrop-insensitive); } | |
245 | |
246 &:selected, | |
247 &:selected:focus { | |
248 @extend %selected_items; | |
249 } | |
250 | |
251 &.progressbar { | |
252 margin: 1px; | |
253 border-radius: 0; | |
254 border-width: 0 0 2px; | |
255 border-color: $selected_bg_color; | |
256 border-style: solid; | |
257 background-image: none; | |
258 background-color: transparent; | |
259 box-shadow: none; | |
260 &:backdrop { background-color: transparent; } | |
261 } | |
262 | |
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
263 .linked > & { //FIXME: use same buttons linking logic and template |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
264 border-radius: 0; |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
265 &:first-child { |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
266 border-top-left-radius: 3px; |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
267 border-bottom-left-radius: 3px; |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
268 &:dir(rtl) { border-right-style: none;} |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
269 } |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
270 &:last-child { |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
271 border-top-right-radius: 3px; |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
272 border-bottom-right-radius: 3px; |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
273 border-left-style: none; |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
274 &:dir(rtl) { border-left-style: solid; } |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
275 } |
0 | 276 } |
277 | |
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
278 &.error { // FIXME: dark variant love needed |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
279 color: $error_color; |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
280 border-color: $error_color; |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
281 &:focus { @include entry(focus, $error_color); } |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
282 &:selected, &:selected:focus { |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
283 background-color: $error_color; |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
284 } |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
285 } |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
286 |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
287 &.warning { // FIXME: dark variant love needed |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
288 color: $warning_color; |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
289 border-color: $warning_color; |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
290 &:focus { @include entry(focus, $warning_color); } |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
291 &:selected, &:selected:focus { |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
292 background-color: $warning_color; |
0 | 293 } |
294 } | |
295 | |
296 &.image { // entry icons colors | |
297 color: mix($fg_color, $base_color, 80%); | |
298 &:hover { color: $fg_color; } | |
299 &:active { color: $selected_bg_color; } | |
300 &:backdrop { color: mix($backdrop_fg_color, $backdrop_base_color, 80%); } | |
301 } | |
302 | |
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
303 .linked.vertical > & { //FIXME comment stuff and make the whole thing smarter. |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
304 @include entry(normal, $edge: none); |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
305 background-image: linear-gradient(to bottom, $base_color); |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
306 border-bottom-color: mix($borders_color, $base_color, 30%); |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
307 box-shadow: none; |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
308 @extend %linked_vertical; |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
309 &:focus { |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
310 border-color: entry_focus_border($selected_bg_color); |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
311 box-shadow: entry_focus_glow($selected_bg_color), |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
312 0 -1px 0 0 entry_focus_border($selected_bg_color); |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
313 @extend %linked_vertical; |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
314 } |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
315 &:insensitive { |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
316 @include entry(insensitive, $edge: none); |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
317 border-bottom-color: mix($borders_color, $base_color, 30%); |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
318 @extend %linked_vertical; |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
319 &:backdrop { |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
320 @include entry(backdrop-insensitive, $edge: none); |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
321 border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%); |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
322 @extend %linked_vertical; |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
323 } |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
324 } |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
325 &:backdrop { |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
326 @include entry(backdrop, $edge: none); |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
327 border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%); |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
328 @extend %linked_vertical; |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
329 } |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
330 &:first-child { |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
331 @include entry(normal, $edge: none); |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
332 border-bottom-color: mix($borders_color, $base_color, 30%); |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
333 &:focus { @include entry(focus, $edge: none); } |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
334 &:insensitive { |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
335 @include entry(insensitive, $edge: none); |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
336 border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%); |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
337 @extend %linked_vertical:first-child; |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
338 &:backdrop { |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
339 @include entry(backdrop-insensitive, $edge: none); |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
340 border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%); |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
341 border-top-style: solid; |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
342 } |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
343 } |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
344 &:backdrop { |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
345 @include entry(backdrop, $edge: none); |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
346 border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%); |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
347 @extend %linked_vertical:first-child; |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
348 } |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
349 } |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
350 &:last-child { |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
351 @include entry(normal); |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
352 background-image: linear-gradient(to bottom, $base_color); |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
353 box-shadow: _widget_edge(); |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
354 &:focus { |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
355 border-color: entry_focus_border($selected_bg_color); |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
356 box-shadow: entry_focus_glow($selected_bg_color), |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
357 0 -1px 0 0 entry_focus_border($selected_bg_color), |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
358 _widget_edge(); |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
359 @extend %linked_vertical:last-child; |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
360 } |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
361 &:insensitive { |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
362 @include entry(insensitive); |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
363 @extend %linked_vertical:last-child; |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
364 &:backdrop { |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
365 @include entry(backdrop-insensitive); |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
366 @extend %linked_vertical:last-child; |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
367 } |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
368 } |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
369 &:backdrop { |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
370 @include entry(backdrop); |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
371 @extend %linked_vertical:last-child; |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
372 } |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
373 } |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
374 } |
0 | 375 .osd & { |
376 @include entry(osd); | |
377 &:focus { @include entry(osd-focus); } | |
378 &:backdrop { @include entry(osd-backdrop); } | |
379 &:insensitive { @include entry(osd-insensitive); } | |
380 } | |
381 } | |
382 | |
383 /*********** | |
384 * Buttons * | |
385 ***********/ | |
386 | |
387 // stuff for .needs-attention | |
388 $_dot_color: if($variant=='light', $selected_bg_color, | |
389 lighten($selected_bg_color,15%)); | |
390 @keyframes needs_attention { | |
391 from { | |
392 background-image: -gtk-gradient(radial, | |
393 center center, 0, | |
394 center center, 0.01, | |
395 to($_dot_color), | |
396 to(transparent)); | |
397 } | |
398 to { | |
399 background-image: -gtk-gradient(radial, | |
400 center center, 0, | |
401 center center, 0.5, | |
402 to($selected_bg_color), | |
403 to(transparent)); | |
404 } | |
405 } | |
406 | |
407 | |
408 .button { | |
409 | |
410 $_button_transition: all 200ms $ease-out-quad; | |
411 | |
412 border: 1px solid; | |
413 border-radius: 3px; | |
414 padding: 5px 8px 6px; | |
415 transition: $_button_transition; | |
416 @include button(normal); | |
417 &.flat { | |
418 @include button(undecorated); | |
419 // to avoid adiacent buttons borders clashing when transitioning, the transition on the normal state is set | |
420 // to none, while it's added back in the hover state, so the button decoration will fade in on hover, but | |
421 // it won't fade out when the pointer leave the button allocation area. To make the transition more evident | |
422 // in this case the duration is increased. | |
423 transition: none; | |
424 &:hover { | |
425 transition: $_button_transition; | |
426 transition-duration: 500ms; | |
427 &:active { transition: $_button_transition; } | |
428 } | |
429 } | |
430 &:hover { | |
431 @include button(hover); | |
432 -gtk-image-effect: highlight; | |
433 } | |
434 &:active, &:checked { | |
435 @include button(active); | |
436 transition-duration: 50ms; | |
437 } | |
438 &:backdrop, &.flat:backdrop { | |
439 @include button(backdrop); | |
440 -gtk-image-effect: none; | |
441 &:active, &:checked { | |
442 @include button(backdrop-active); | |
443 } | |
444 &:insensitive { | |
445 @include button(backdrop-insensitive); | |
446 } | |
447 &:insensitive:active, &:insensitive:checked { | |
448 @include button(backdrop-insensitive-active); | |
449 } | |
450 } | |
451 &.flat:backdrop, &.flat:insensitive, &.flat:backdrop:insensitive { | |
452 @include button(undecorated); | |
453 } | |
454 &:insensitive { | |
455 @include button(insensitive); | |
456 &:active, &:checked { | |
457 @include button(insensitive-active); | |
458 } | |
459 } | |
460 // big standalone buttons like in Documents pager | |
461 &.osd { | |
462 &.image-button { padding: 13px; } | |
463 color: $osd_fg_color; | |
464 border-radius: 5px; | |
465 outline-color: transparentize($osd_fg_color, 0.7); //FIXME: define a color var? | |
466 @include button(osd); | |
467 border: none; | |
468 box-shadow: none; | |
469 &:hover { | |
470 @include button(osd-hover); | |
471 border: none; | |
472 box-shadow: none; | |
473 } | |
474 &:active, &:checked { | |
475 @include button(osd-active); | |
476 border: none; | |
477 box-shadow: none; | |
478 } | |
479 &:insensitive, &:backdrop:insensitive { | |
480 @include button(osd-insensitive); | |
481 border: none; | |
482 } | |
483 &:backdrop { | |
484 @include button(osd-backdrop); | |
485 border: none; | |
486 } | |
487 } | |
488 //overlay / OSD style | |
489 .osd & { | |
490 @include button(osd); | |
491 // there's a problem with sass which prevents it to extend the linked | |
492 // placeholder as expected, it should just be "@extend %linked;", the | |
493 // placeholder is basically replicated here | |
494 // | |
495 // Workaround START | |
496 border-radius: 0; | |
497 border-left-style: none; | |
498 &:dir(rtl) { | |
499 border-radius: 0; | |
500 border-right-style: none; | |
501 border-left-style: solid | |
502 } | |
503 &:first-child { | |
504 border-radius: 3px 0 0 3px; | |
505 border-left-style: solid; | |
506 } | |
507 &:last-child { | |
508 border-radius: 0 3px 3px 0; | |
509 &:dir(rtl) { border-right-style: solid; } | |
510 } | |
511 &:only-child { | |
512 border-radius: 3px; | |
513 border-style: solid; | |
514 } | |
515 // Workaround END | |
516 &:hover { | |
517 @include button(osd-hover); | |
518 @extend %linked; | |
519 } | |
520 &:active, &:checked, &:backdrop:active, &:backdrop:checked { | |
521 @include button(osd-active); | |
522 @extend %linked; | |
523 } | |
524 &:insensitive, &:backdrop:insensitive { | |
525 @include button(osd-insensitive); | |
526 @extend %linked; | |
527 } | |
528 &:backdrop { | |
529 @include button(osd-backdrop); | |
530 @extend %linked; | |
531 } | |
532 &.flat { | |
533 @include button(undecorated); | |
534 box-shadow: none; //FIXME respect no edge on the button mixin | |
535 text-shadow: 0 1px black; | |
536 icon-shadow: 0 1px black; | |
537 &:hover { | |
538 @include button(osd-hover); | |
539 background-clip: padding-box; | |
540 border-color: transparent; | |
541 box-shadow: none; | |
542 } | |
543 &:insensitive { | |
544 @include button(osd-insensitive); | |
545 background-image: none; | |
546 border-color: transparent; | |
547 box-shadow: none; | |
548 } | |
549 &:backdrop { @include button(undecorated); } | |
550 &:active, &:checked { | |
551 @include button(osd-active); | |
552 background-clip: padding-box; | |
553 border-color: transparent; | |
554 box-shadow: none; | |
555 } | |
556 } | |
557 } | |
558 | |
559 // Suggested and Destructive Action buttons | |
560 @each $b_type, $b_color in (suggested-action, $selected_bg_color), | |
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
561 (destructive-action, $destructive_color) { |
0 | 562 &.#{$b_type} { |
563 @include button(normal, $b_color, white); | |
564 &.flat { | |
565 @include button(undecorated); | |
566 color: $b_color; //FIXME: does it work on the dark variant? | |
567 } | |
568 &:hover { @include button(hover, $b_color, white); } | |
569 &:active, &:checked { @include button(active, $b_color, white); } | |
570 &:backdrop, &.flat:backdrop { | |
571 @include button(backdrop, $b_color, white); | |
572 &:active, &:checked { | |
573 @include button(backdrop-active, $b_color, white); | |
574 } | |
575 &:insensitive { | |
576 @include button(backdrop-insensitive); | |
577 &:active, &:checked { | |
578 @include button(backdrop-insensitive-active, $b_color, white); | |
579 } | |
580 } | |
581 } | |
582 &.flat:backdrop, &.flat:insensitive, &.flat:backdrop:insensitive { | |
583 @include button(undecorated); | |
584 color: transparentize($b_color, 0.2); | |
585 } | |
586 &:insensitive { | |
587 @include button(insensitive); | |
588 &:active, &:checked { | |
589 @include button(insensitive-active, $b_color, white); | |
590 } | |
591 } | |
592 .osd & { | |
593 @include button(osd, $b_color); | |
594 @extend %linked; | |
595 &:hover { | |
596 @include button(osd-hover, $b_color); | |
597 @extend %linked; | |
598 } | |
599 &:active, &:checked, &:backdrop:active, &:backdrop:checked { | |
600 @include button(osd-active, $b_color); | |
601 @extend %linked; | |
602 } | |
603 &:insensitive, &:backdrop:insensitive { | |
604 @include button(osd-insensitive, $b_color); | |
605 @extend %linked; | |
606 } | |
607 &:backdrop { | |
608 @include button(osd-backdrop, $b_color); | |
609 @extend %linked; | |
610 } | |
611 } | |
612 } | |
613 } | |
614 | |
615 &.image-button { padding: 8px; } | |
616 | |
617 &.text-button { | |
618 padding-left: 16px; | |
619 padding-right: 16px; | |
620 } | |
621 | |
622 &.text-button.image-button { | |
623 // those buttons needs uneven horizontal padding, we want the icon side | |
624 // to have the image-button padding, while the text side the text-button | |
625 // one, so we're adding the missing padding to the label depending on | |
626 // its position inside the button | |
627 padding: 5px 8px 6px; // same as .button | |
628 .label:first-child { padding-left: 8px; } | |
629 .label:last-child { padding-right: 8px; } | |
630 } | |
631 | |
632 .stack-switcher > & { | |
633 // to position the needs attention dot, padding is added to the button | |
634 // child, a label needs just lateral padding while an icon needs vertical | |
635 // padding added too. | |
636 | |
637 outline-offset: -3px; // needs to be set or it gets overriden by GtkRadioButton outline-offset | |
638 | |
639 > .label { | |
640 padding-left: 6px; // label padding | |
641 padding-right: 6px; // | |
642 } | |
643 > GtkImage { | |
644 padding-left: 6px; // image padding | |
645 padding-right: 6px; // | |
646 padding-top: 3px; // | |
647 padding-bottom: 3px; // | |
648 } | |
649 &.text-button { | |
650 padding: 5px 10px 6px; // needed or it will get overridden | |
651 } | |
652 &.image-button { | |
653 // we want image buttons to have a 1:1 aspect ratio, so compensation | |
654 // of the padding added to the GtkImage is needed | |
655 padding: 5px 2px; | |
656 } | |
657 &.needs-attention > .label, | |
658 &.needs-attention > GtkImage { @extend %needs_attention; } | |
659 &.needs-attention:active > .label, | |
660 &.needs-attention:active > GtkImage, | |
661 &.needs-attention:checked > .label, | |
662 &.needs-attention:checked > GtkImage { | |
663 animation: none; | |
664 background-image: none; | |
665 } | |
666 } | |
667 | |
668 //inline-toolbar buttons | |
669 .inline-toolbar &, .inline-toolbar &:backdrop { | |
670 border-radius: 2px; | |
671 border-width: 1px; | |
672 @extend %linked; | |
673 } | |
674 | |
675 .primary-toolbar & { icon-shadow: none; } // tango icons don't need shadows | |
676 | |
677 .linked > &, | |
678 .linked > &:hover, | |
679 .linked > &:active, | |
680 .linked > &:checked, | |
681 .linked > &:backdrop { @extend %linked; } | |
682 | |
683 .linked.vertical > &, | |
684 .linked.vertical > &:hover, | |
685 .linked.vertical > &:active, | |
686 .linked.vertical > &:checked, | |
687 .linked.vertical > &:backdrop { @extend %linked_vertical; } | |
688 } | |
689 | |
690 %needs_attention { | |
691 animation: needs_attention 150ms ease-in; | |
692 $_dot_shadow: _text_shadow_color(); | |
693 $_dot_shadow_r: if($variant=='light',0.5,0.45); | |
694 background-image: -gtk-gradient(radial, | |
695 center center, 0, | |
696 center center, 0.5, | |
697 to($_dot_color), | |
698 to(transparent)), | |
699 -gtk-gradient(radial, | |
700 center center, 0, | |
701 center center, $_dot_shadow_r, | |
702 to($_dot_shadow), | |
703 to(transparent)); | |
704 background-size: 6px 6px, 6px 6px; | |
705 background-repeat: no-repeat; | |
706 @if $variant == 'light' { background-position: right 3px, right 4px; } | |
707 @else { background-position: right 3px, right 2px; } | |
708 &:backdrop { background-size: 6px 6px, 0 0;} | |
709 &:dir(rtl) { | |
710 @if $variant == 'light' { background-position: left 3px, left 4px; } | |
711 @else { background-position: left 3px, left 2px; } | |
712 } | |
713 } | |
714 | |
715 | |
716 // all the following is for the +|- buttons on inline toolbars, that way | |
717 // should really be deprecated... | |
718 .inline-toolbar GtkToolButton > .button { // redefining the button look is | |
719 // needed since those are flat... | |
720 @include button(normal); | |
721 &:hover { @include button(hover); } | |
722 &:active, | |
723 &:checked{ @include button(active); } | |
724 &:insensitive { @include button(insensitive); } | |
725 &:insensitive:active, | |
726 &:insensitive:checked { @include button(insensitive-active); } | |
727 &:backdrop { @include button(backdrop); }; | |
728 &:backdrop:active, | |
729 &:backdrop:checked { @include button(backdrop-active); } | |
730 &:backdrop:insensitive { @include button(backdrop-insensitive); } | |
731 &:backdrop:insensitive:active, | |
732 &:backdrop:insensitive:checked { | |
733 @include button(backdrop-insensitive-active); } | |
734 } | |
735 | |
736 // More inline toolbar buttons | |
737 .inline-toolbar.toolbar GtkToolButton, | |
738 .inline-toolbar.toolbar GtkToolButton:backdrop { | |
739 & > .button.flat { @extend %linked_middle; } | |
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
740 &:dir(rtl) > .button.flat { @extend %linked_middle:dir(rtl); } |
0 | 741 &:first-child > .button.flat { @extend %linked:first-child; } |
742 &:last-child > .button.flat { @extend %linked:last-child; } | |
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
743 &:last-child:dir(rtl) > .button.flat { @extend %linked:last-child:dir(rtl); } |
0 | 744 &:only-child > .button.flat { @extend %linked:only-child; } |
745 } | |
746 | |
747 %linked_middle { | |
748 border-radius: 0; | |
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
749 border-left-style: none; |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
750 &:dir(rtl) { |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
751 border-radius: 0; // needed when including %linked_middle:dir(rtl) |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
752 border-right-style: none; |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
753 border-left-style: solid |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
754 } |
0 | 755 } |
756 | |
757 %linked { | |
758 @extend %linked_middle; | |
759 &:first-child { | |
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
760 border-radius: 3px 0 0 3px; |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
761 border-left-style: solid; |
0 | 762 } |
763 &:last-child { | |
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
764 border-radius: 0 3px 3px 0; |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
765 &:dir(rtl) { border-right-style: solid; } |
0 | 766 } |
767 &:only-child { | |
768 border-radius: 3px; | |
769 border-style: solid; | |
770 } | |
771 } | |
772 | |
773 %linked_vertical_middle { | |
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
774 border-left-style: solid; |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
775 border-top-style: none; |
0 | 776 border-radius: 0; |
777 } | |
778 | |
779 %linked_vertical{ | |
780 @extend %linked_vertical_middle; | |
781 &:first-child { | |
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
782 border-style: solid; |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
783 border-radius: 3px 3px 0 0; |
0 | 784 } |
785 &:last-child { | |
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
786 border-radius: 0 0 3px 3px; |
0 | 787 } |
788 &:only-child { | |
789 border-radius: 3px; | |
790 border-style: solid; | |
791 } | |
792 } | |
793 | |
794 %undecorated_button { | |
795 border-color: transparent; | |
796 background-color: transparent; | |
797 background-image: none; | |
798 box-shadow: inset 0 1px transparentize(white,1), | |
799 0 1px transparentize(white, 1); | |
800 text-shadow: none; | |
801 icon-shadow: none; | |
802 } | |
803 | |
804 /* menu buttons */ | |
805 .menuitem.button.flat { | |
806 @extend %undecorated_button; | |
807 outline-offset: -1px; | |
808 &:hover { background-color: mix($fg_color, $bg_color, 10%); } | |
809 &:selected { @extend %selected_items; } | |
810 &:backdrop, &:backdrop:hover { | |
811 @extend %undecorated_button; | |
812 } | |
813 } | |
814 | |
815 | |
816 GtkColorButton.button { | |
817 padding: 5px; // Uniform padding on the GtkColorButton | |
818 | |
819 GtkColorSwatch:first-child:last-child { // :first-child:last-child for a specificity bump, it gets overridden by the | |
820 // colorpicker style, otherwise | |
821 border-radius: 0; | |
822 box-shadow: inset 0 1px 1px transparentize(black, 0.9), | |
823 _widget_edge(); | |
824 &:insensitive, | |
825 &:backdrop { box-shadow: none; } | |
826 } | |
827 } | |
828 | |
829 /********* | |
830 * Links * | |
831 *********/ | |
832 | |
833 *:link { | |
834 color: $link_color; | |
835 &:visited { | |
836 color: $link_visited_color; | |
837 *:selected & { color: mix($selected_fg_color, $selected_bg_color, 60%); } | |
838 } | |
839 &:hover { | |
840 color: lighten($link_color,10%); | |
841 *:selected & { color: mix($selected_fg_color, $selected_bg_color, 90%); } | |
842 } | |
843 &:active { | |
844 color: $link_color; | |
845 *:selected & { color: mix($selected_fg_color, $selected_bg_color, 80%); } | |
846 } | |
847 &:backdrop, &:backdrop:hover, &:backdrop:hover:selected { | |
848 color: $selected_bg_color; | |
849 } | |
850 &:selected, *:selected & { | |
851 color: mix($selected_fg_color, $selected_bg_color, 80%); | |
852 } | |
853 } | |
854 | |
855 .button:link, .button:visited { | |
856 @extend %undecorated_button; | |
857 @extend *:link; | |
858 text-shadow: none; | |
859 &:hover, &:active, &:checked { | |
860 @extend %undecorated_button; | |
861 text-shadow: none; | |
862 } | |
863 &:backdrop { | |
864 @extend %undecorated_button; //This shouldn't be needed but avoids | |
865 //a weird transition which for some reason | |
866 //makes borders blink on hover | |
867 } | |
868 } | |
869 | |
870 /***************** | |
871 * GtkSpinButton * | |
872 *****************/ | |
873 | |
874 .spinbutton { | |
875 .button { | |
876 background-image: none; | |
877 border-style: none none none solid; | |
878 border-color: transparentize($borders_color, 0.7); | |
879 color: mix($fg_color, $base_color, 90%); | |
880 border-radius: 0; | |
881 box-shadow: none; | |
882 // padding-left: 6px; | |
883 // padding-right: 6px; | |
884 &:dir(rtl) { border-style: none solid none none; } | |
885 &:hover { | |
886 color: $fg_color; | |
887 background-color: transparentize($fg_color, 0.95); | |
888 } | |
889 &:insensitive { | |
890 color: transparentize($insensitive_fg_color, 0.7); | |
891 } | |
892 &:active { | |
893 box-shadow: inset 0 2px 3px -1px transparentize(black, 0.8); | |
894 background-color: transparentize(black, 0.9); | |
895 } | |
896 &:backdrop { | |
897 color: mix($backdrop_fg_color, $backdrop_base_color, 90%); | |
898 border-color: transparentize($backdrop_borders_color, 0.7); | |
899 background-color: transparent; | |
900 } | |
901 &:backdrop:insensitive { | |
902 background-image: none; | |
903 color: transparentize($backdrop_insensitive_color,0.7); | |
904 border-style: none none none solid; // It is needed or it gets overridden | |
905 &:dir(rtl) { border-style: none solid none none; } | |
906 } | |
907 } | |
908 .osd & { | |
909 .button { | |
910 @include button(undecorated); | |
911 color: $osd_fg_color; | |
912 border-style: none none none solid; | |
913 border-color: transparentize($osd_borders_color, 0.3); | |
914 border-radius: 0; | |
915 box-shadow: none; | |
916 icon-shadow: 0 1px black; | |
917 &:dir(rtl) { border-style: none solid none none; } | |
918 &:hover { | |
919 @include button(undecorated); | |
920 color: $osd_fg_color; | |
921 border-color: transparentize(opacify($osd_borders_color, 1), 0.5); | |
922 background-color: transparentize($osd_fg_color, 0.9); | |
923 icon-shadow: 0 1px black; | |
924 box-shadow: none; | |
925 } | |
926 &:backdrop { | |
927 @include button(undecorated); | |
928 color: $osd_fg_color; | |
929 border-color: transparentize(opacify($osd_borders_color, 1), 0.5); | |
930 icon-shadow: none; | |
931 box-shadow: none; | |
932 } | |
933 &:insensitive { | |
934 @include button(undecorated); | |
935 color: $osd_insensitive_fg_color; | |
936 border-color: transparentize(opacify($osd_borders_color, 1), 0.5); | |
937 icon-shadow: none; | |
938 box-shadow: none; | |
939 } | |
940 &:last-child { border-radius: 0 3px 3px 0; } | |
941 &:dir(rtl):first-child { border-radius: 3px 0 0 3px; } | |
942 } | |
943 } | |
944 &.vertical, &.vertical:dir(rtl) { //FIXME: try using linking templates for vertically linked stuff | |
945 .button { | |
946 padding-top: 8px; // Same vertical padding as image-buttons | |
947 padding-bottom: 8px; // | |
948 &:first-child { | |
949 @extend %top_button; | |
950 @include button(normal, $edge:none); | |
951 &:active { | |
952 @extend %top_button; | |
953 @include button(active, $edge:none); | |
954 } | |
955 &:hover { | |
956 @extend %top_button; | |
957 @include button(hover, $edge:none); | |
958 } | |
959 &:insensitive { | |
960 @extend %top_button; | |
961 @include button(insensitive, $edge:none); | |
962 } | |
963 &:backdrop { | |
964 @extend %top_button; | |
965 @include button(backdrop, $edge:none); | |
966 } | |
967 } | |
968 &:last-child { | |
969 @extend %bottom_button; | |
970 @include button(normal); | |
971 &:active { | |
972 @extend %bottom_button; | |
973 @include button(active); | |
974 } | |
975 &:hover { | |
976 @extend %bottom_button; | |
977 @include button(hover); | |
978 } | |
979 &:insensitive { | |
980 @extend %bottom_button; | |
981 @include button(insensitive); | |
982 } | |
983 &:backdrop { | |
984 @extend %bottom_button; | |
985 @include button(backdrop); | |
986 } | |
987 } | |
988 &:backdrop:insensitive { | |
989 @include button(backdrop-insensitive); | |
990 } | |
991 } | |
992 &.entry { | |
993 // we should remove the bottom edge hilight here, but seems | |
994 // like buttons are on top of it so it doesn't show up | |
995 border-radius: 0; | |
996 padding-left: 3px; | |
997 padding-right: 3px; | |
998 } | |
999 %top_button { | |
1000 border-radius: 3px 3px 0 0; | |
1001 border-style: solid solid none solid; | |
1002 } | |
1003 %bottom_button { | |
1004 border-radius: 0 0 3px 3px; | |
1005 border-style: none solid solid solid; | |
1006 } | |
1007 } | |
1008 GtkTreeView & { | |
1009 &.entry, &.entry:focus { | |
1010 padding: 1px; | |
1011 border-width: 1px 0; | |
1012 border-color: $selected_bg_color; | |
1013 border-radius: 0; | |
1014 box-shadow: none; | |
1015 } | |
1016 } | |
1017 } | |
1018 | |
1019 /************** | |
1020 * ComboBoxes * | |
1021 **************/ | |
1022 GtkComboBox { | |
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
1023 > .button { padding-top: 3px; padding-bottom: 4px; } // Otherwise combos |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
1024 // are bigger then |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
1025 // buttons |
0 | 1026 -GtkComboBox-arrow-scaling: 0.5; |
1027 -GtkComboBox-shadow-type: none; | |
1028 | |
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
1029 box-shadow: 0 1px $borders_edge; |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
1030 |
0 | 1031 @include _button_text_shadow; |
1032 | |
1033 &:insensitive { | |
1034 color: $insensitive_fg_color; | |
1035 text-shadow: none; | |
1036 icon-shadow: none; | |
1037 } | |
1038 &:backdrop { | |
1039 color: $backdrop_fg_color; | |
1040 text-shadow: none; | |
1041 icon-shadow: none; | |
1042 } | |
1043 &:backdrop:insensitive { | |
1044 color: $backdrop_insensitive_color; | |
1045 } | |
1046 .menuitem { text-shadow: none; } | |
1047 .separator.vertical { | |
1048 // always disable separators | |
1049 -GtkWidget-wide-separators: true; | |
1050 } | |
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
1051 &.combobox-entry .entry { @extend %linked; } |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
1052 &.combobox-entry .button, &.combobox-entry .button:backdrop { |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
1053 // It is needed to specify the backdrop button or it gets overridden |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
1054 @extend %linked; |
0 | 1055 } |
1056 } | |
1057 | |
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
1058 .linked > GtkComboBox > .button { |
0 | 1059 // the combo is a composite widget so the way we do button linkind doesn't |
1060 // work, special case needed. See | |
1061 // https://bugzilla.gnome.org/show_bug.cgi?id=733979 | |
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
1062 &:dir(ltr) { @extend %linked_middle; } // specificity bump |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
1063 &:dir(rtl) { @extend %linked_middle:dir(rtl); } |
0 | 1064 } |
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
1065 .linked > GtkComboBox:first-child > .button { |
0 | 1066 @extend %linked:first-child; |
1067 } | |
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
1068 .linked > GtkComboBox:last-child > .button { |
0 | 1069 @extend %linked:last-child; |
1070 } | |
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
1071 .linked > GtkComboBox:only-child > .button { |
0 | 1072 @extend %linked:only-child; |
1073 } | |
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
1074 .linked.vertical > GtkComboBoxText > .button, |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
1075 .linked.vertical > GtkComboBox > .button { @extend %linked_vertical_middle; } |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
1076 .linked.vertical > GtkComboBoxText:first-child > .button, |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
1077 .linked.vertical > GtkComboBox:first-child > .button { @extend %linked_vertical:first-child; } |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
1078 .linked.vertical > GtkComboBoxText:last-child > .button, |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
1079 .linked.vertical > GtkComboBox:last-child > .button { @extend %linked_vertical:last-child; } |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
1080 .linked.vertical > GtkComboBoxText:only-child > .button, |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
1081 .linked.vertical > GtkComboBox:only-child > .button { @extend %linked_vertical:only-child; } |
0 | 1082 |
1083 /************ | |
1084 * Toolbars * | |
1085 ************/ | |
1086 .toolbar { | |
1087 -GtkWidget-window-dragging: true; | |
1088 padding: 4px; | |
1089 background-color: $bg_color; | |
1090 .osd &, &.osd { | |
1091 padding: 13px; | |
1092 border: none; | |
1093 border-radius: 5px; | |
1094 background-color: $osd_bg_color; | |
1095 } | |
1096 } | |
1097 | |
1098 //searchbar, location-bar & inline-toolbar | |
1099 .inline-toolbar { | |
1100 @extend .toolbar; | |
1101 @extend %inset-bar; | |
1102 border-width: 0 1px 1px; | |
1103 padding: 3px; | |
1104 border-radius: 0 0 5px 5px; | |
1105 } | |
1106 .search-bar, .location-bar { | |
1107 @extend .toolbar; | |
1108 @extend %inset-bar; | |
1109 border-width: 0 0 1px; | |
1110 padding: 3px; | |
1111 } | |
1112 | |
1113 %inset-bar { | |
1114 border-style: solid; | |
1115 border-color: $borders_color; | |
1116 $_bg: mix($bg_color, $borders_color, 70%); | |
1117 background-color: $_bg; | |
1118 box-shadow: inset 0 2px 3px -1px mix($borders_color, $_bg, 60%), | |
1119 _widget_edge(); | |
1120 //FIXME edge would be nice, but doesn't work | |
1121 &:backdrop { | |
1122 border-color: $backdrop_borders_color; | |
1123 background-color: $backdrop_dark_fill; | |
1124 box-shadow: none; | |
1125 } | |
1126 } | |
1127 | |
1128 /*************** | |
1129 * Header bars * | |
1130 ***************/ | |
1131 | |
1132 .titlebar, | |
1133 .header-bar { | |
1134 padding: 6px; | |
1135 border-width: 0 0 1px; | |
1136 border-style: solid; | |
1137 border-color: $borders_color; | |
1138 border-radius: 7px 7px 0 0; | |
1139 background-color: transparent; | |
1140 | |
1141 @include headerbar_fill; | |
1142 | |
1143 &:backdrop { | |
1144 border-color: $backdrop_borders_color; | |
1145 background-color: $bg_color; | |
1146 background-image: none; | |
1147 box-shadow: inset 0 1px $top_hilight; | |
1148 } | |
1149 | |
1150 .title { | |
1151 font-weight: bold; | |
1152 padding-left: 12px; | |
1153 padding-right: 12px; | |
1154 } | |
1155 | |
1156 .subtitle { | |
1157 font-size: smaller; | |
1158 padding-left: 12px; | |
1159 padding-right: 12px; | |
1160 @extend .dim-label; | |
1161 } | |
1162 | |
1163 .header-bar-separator, | |
1164 & > GtkBox > .separator.vertical { | |
1165 -GtkWidget-wide-separators: true; | |
1166 -GtkWidget-separator-width: 1px; | |
1167 border-width: 0 1px; | |
1168 border-image: linear-gradient(to bottom, | |
1169 transparentize($borders_color,1), | |
1170 $borders_color 30%, | |
1171 $borders_color 70%, | |
1172 transparentize($borders_color,1) 100%) | |
1173 0 1 / 0 1px stretch; //FIXME use a proper color | |
1174 | |
1175 &:backdrop { | |
1176 border-image: linear-gradient(to bottom, transparentize($backdrop_borders_color, 0.5)) | |
1177 0 1 / 1px 1px; //FIXME use a proper color | |
1178 } | |
1179 } | |
1180 | |
1181 &.selection-mode { | |
1182 $_hc: mix($top_hilight,$selected_bg_color, 50%); // hilight color | |
1183 | |
1184 color: $selected_fg_color; | |
1185 text-shadow: 0 -1px transparentize(black, 0.5); | |
1186 border-color: $selected_borders_color; | |
1187 background-image: linear-gradient(to bottom, | |
1188 lighten($selected_bg_color,5%), | |
1189 $selected_bg_color); | |
1190 box-shadow: inset 0 -1px mix($selected_borders_color, $selected_bg_color, 35%), //bottom shade | |
1191 inset 0 1px $_hc; | |
1192 | |
1193 &:backdrop { | |
1194 background-image: linear-gradient(to bottom, $selected_bg_color); | |
1195 box-shadow: inset 0 1px mix($top_hilight, $selected_bg_color, 60%); | |
1196 } | |
1197 | |
1198 .subtitle:link { @extend *:link:selected; } | |
1199 | |
1200 .button { | |
1201 @include button(normal, $selected_bg_color, $selected_fg_color, $_hc); | |
1202 | |
1203 &.flat { @include button(undecorated); } | |
1204 | |
1205 &:hover { @include button(hover, $selected_bg_color, $selected_fg_color, $_hc); } | |
1206 | |
1207 &:active, &:checked { @include button(active, $selected_bg_color, $selected_fg_color, $_hc); } | |
1208 | |
1209 &:backdrop, | |
1210 &.flat:backdrop { | |
1211 @include button(backdrop, $selected_bg_color, $selected_fg_color, $_hc); | |
1212 -gtk-image-effect: none; | |
1213 border-color: $selected_borders_color; | |
1214 | |
1215 &:active, | |
1216 &:checked { | |
1217 @include button(backdrop-active, $selected_bg_color, $selected_fg_color, $_hc); | |
1218 border-color: $selected_borders_color; | |
1219 } | |
1220 | |
1221 &:insensitive { | |
1222 @include button(backdrop-insensitive, $selected_bg_color, $selected_fg_color, $_hc); | |
1223 border-color: $selected_borders_color; | |
1224 } | |
1225 | |
1226 &:insensitive:active, | |
1227 &:insensitive:checked { | |
1228 @include button(backdrop-insensitive-active, $selected_bg_color, | |
1229 $selected_fg_color, $_hc); | |
1230 border-color: $selected_borders_color; | |
1231 } | |
1232 } | |
1233 | |
1234 &.flat:backdrop, | |
1235 &.flat:insensitive, | |
1236 &.flat:insensitive:backdrop { | |
1237 @include button(undecorated); | |
1238 } | |
1239 | |
1240 &:insensitive { | |
1241 @include button(insensitive, $selected_bg_color, $selected_fg_color, $_hc); | |
1242 | |
1243 &:active, &:checked { @include button(insensitive-active, $selected_bg_color, $selected_fg_color, $_hc); } | |
1244 } | |
1245 | |
1246 &.suggested-action { | |
1247 @include button(normal, $edge:$_hc); | |
1248 border-color: $selected_borders_color; | |
1249 | |
1250 &:hover { | |
1251 @include button(hover, $edge:$_hc); | |
1252 border-color: $selected_borders_color; | |
1253 } | |
1254 | |
1255 &:active { | |
1256 @include button(active, $edge:$_hc); | |
1257 border-color: $selected_borders_color; | |
1258 } | |
1259 | |
1260 &:insensitive { | |
1261 @include button(insensitive, $edge:$_hc); | |
1262 border-color: $selected_borders_color; | |
1263 } | |
1264 | |
1265 &:backdrop { | |
1266 @include button(backdrop, $edge:$_hc); | |
1267 border-color: $selected_borders_color; | |
1268 } | |
1269 | |
1270 &:backdrop:insensitive { | |
1271 @include button(backdrop-insensitive, $edge:$_hc); | |
1272 border-color: $selected_borders_color; | |
1273 } | |
1274 } | |
1275 } | |
1276 | |
1277 .selection-menu { | |
1278 border-color: transparentize($selected_bg_color, 1); | |
1279 background-image: linear-gradient(to bottom, transparentize($selected_bg_color, 1)); | |
1280 box-shadow: none; | |
1281 padding-left: 10px; | |
1282 padding-right: 10px; | |
1283 | |
1284 GtkArrow { -GtkArrow-arrow-scaling: 1; } | |
1285 | |
1286 .arrow { | |
1287 -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); | |
1288 color: transparentize($selected_fg_color,0.5); | |
1289 icon-shadow: none; | |
1290 } | |
1291 | |
1292 &:backdrop { @extend .selection-menu }; | |
1293 } | |
1294 } | |
1295 | |
1296 .tiled &, .maximized & { | |
1297 border-radius: 0; // squared corners when the window is max'd or tiled | |
1298 } | |
1299 | |
1300 &.default-decoration { | |
1301 padding: 4px; | |
1302 .button { padding: 5px; } | |
1303 } | |
1304 } | |
1305 | |
1306 /************ | |
1307 * Pathbars * | |
1308 ************/ | |
1309 | |
1310 .path-bar .button { | |
1311 padding: 5px 6px 6px; | |
1312 &:first-child { padding-left: 8px; } | |
1313 &:last-child { padding-right: 8px; } | |
1314 &:only-child { | |
1315 padding-left: 12px; | |
1316 padding-right: 12px; | |
1317 } | |
1318 | |
1319 // the following is for spacing the icon and the label inside the home button | |
1320 .label:last-child { padding-left: 2px; } | |
1321 .label:first-child { padding-right: 2px; } | |
1322 .label:only-child { padding-right: 0; padding-left: 0; } | |
1323 GtkImage { padding-top: 1px; } | |
1324 } | |
1325 | |
1326 /************** | |
1327 * Tree Views * | |
1328 **************/ | |
1329 GtkTreeView.view { | |
1330 -GtkTreeView-grid-line-width: 1; | |
1331 -GtkTreeView-grid-line-pattern: ''; | |
1332 -GtkTreeView-tree-line-width: 1; | |
1333 -GtkTreeView-tree-line-pattern: ''; | |
1334 -GtkTreeView-expander-size: 16; | |
1335 | |
1336 border-left-color: mix($fg_color, $base_color, 50%); // this is actually the tree lines color, | |
1337 border-top-color: $bg_color; // while this is the grid lines color, better then nothing | |
1338 | |
1339 &:selected { border-radius: 0; } // rest border radius in lists | |
1340 | |
1341 &:selected, &:backdrop:selected { | |
1342 border-left-color: mix($selected_fg_color, $selected_bg_color, 50%); | |
1343 border-top-color: transparentize($fg_color, 0.9); // doesn't work unfortunatelly | |
1344 } | |
1345 | |
1346 &:insensitive { | |
1347 color: $insensitive_fg_color; | |
1348 &:selected { | |
1349 color: mix($selected_fg_color, $selected_bg_color, 40%); | |
1350 &:backdrop { color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%); } | |
1351 } | |
1352 &:backdrop { color: $backdrop_insensitive_color; } | |
1353 } | |
1354 | |
1355 &.separator:backdrop { | |
1356 color: transparentize(black, 0.9); | |
1357 } | |
1358 | |
1359 &:backdrop { | |
1360 border-left-color: mix($backdrop_fg_color, $backdrop_bg_color, 50%); | |
1361 border-top: $backdrop_bg_color; | |
1362 } | |
1363 | |
1364 &.dnd { | |
1365 border-style: solid none; | |
1366 border-width: 1px; | |
1367 border-color: mix($fg_color, $selected_bg_color, 50%); | |
1368 } | |
1369 | |
1370 &.expander { | |
1371 -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); | |
1372 &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); } | |
1373 color: mix($fg_color, $base_color, 70%); | |
1374 &:hover { color: $fg_color; } | |
1375 &:selected { | |
1376 color: mix($selected_fg_color, $selected_bg_color, 70%); | |
1377 &:hover { color: $selected_fg_color; } | |
1378 &:backdrop { color: mix($backdrop_selected_fg_color, $selected_bg_color, 70%); } | |
1379 } | |
1380 | |
1381 &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } | |
1382 | |
1383 &:backdrop { color: mix($backdrop_fg_color, $backdrop_base_color, 70%); } | |
1384 } | |
1385 | |
1386 &.progressbar { // progress bar in treeviews | |
1387 @if $variant == light { color: $base_color; } | |
1388 | |
1389 border: 1px solid $selected_borders_color; | |
1390 border-radius: 4px; | |
1391 background-image: linear-gradient(to bottom, | |
1392 $selected_bg_color, | |
1393 darken($selected_bg_color,10%)); | |
1394 box-shadow: inset 0 1px if($variant=='light', transparentize(white,0.7), | |
1395 transparentize(white,0.85)), | |
1396 0 1px if($variant=='light', transparentize(black, 0.8), | |
1397 transparentize(black,0.9)); | |
1398 | |
1399 &:selected { | |
1400 @if $variant == 'light' { | |
1401 color: $selected_bg_color; | |
1402 box-shadow: none; | |
1403 } | |
1404 | |
1405 @else { box-shadow: inset 0 1px transparentize(white, 0.95); } | |
1406 | |
1407 background-image: linear-gradient(to bottom, | |
1408 $base_color, | |
1409 darken($base_color,10%)); | |
1410 | |
1411 &:backdrop { | |
1412 @if $variant == 'light' { | |
1413 color: $selected_bg_color; | |
1414 border-color: $selected_borders_color; // otherwise it gets inherited by .view(?!?) | |
1415 } | |
1416 @else { border-color: $backdrop_base_color; } | |
1417 background-color: $backdrop_base_color; | |
1418 } | |
1419 } | |
1420 | |
1421 &:backdrop { | |
1422 @if $variant == 'light' { color: $backdrop_base_color; } | |
1423 @else { border-color: $backdrop_base_color; } | |
1424 background-image: none; | |
1425 box-shadow: none; | |
1426 } | |
1427 } | |
1428 | |
1429 &.trough { // progress bar trough in treeviews | |
1430 background-color: transparentize($fg_color,0.9); | |
1431 border-radius: 4px; | |
1432 | |
1433 &:selected { | |
1434 background-color: if($variant == 'light', | |
1435 transparentize($selected_fg_color, 0.7), | |
1436 darken($selected_bg_color, 10%)); | |
1437 @if $variant == 'light' { | |
1438 border-width: 1px 0; | |
1439 border-style: solid; | |
1440 border-color: $selected_bg_color; | |
1441 } | |
1442 } | |
1443 } | |
1444 } | |
1445 | |
1446 column-header { | |
1447 .button { | |
1448 @extend %column_header_button; | |
1449 $_column_header_color: mix($fg_color, $base_color, 50%); | |
1450 color: $_column_header_color; | |
1451 background-color: $base_color; | |
1452 font-weight: bold; | |
1453 text-shadow: none; | |
1454 box-shadow: none; | |
1455 &:hover { | |
1456 @extend %column_header_button; | |
1457 color: mix($_column_header_color, $fg_color, 50%); | |
1458 box-shadow: none; | |
1459 transition: none; //I shouldn't need this | |
1460 } | |
1461 &:active { | |
1462 @extend %column_header_button; | |
1463 color: $fg_color; | |
1464 transition: none; //I shouldn't need this | |
1465 } | |
1466 &.dnd { | |
1467 @extend column-header.button.dnd; | |
1468 } | |
1469 } | |
1470 &:last-child .button, | |
1471 &:last-child .button:backdrop, // set :backdrop too or the border will be visibile there | |
1472 &:last-child.button, | |
1473 &:last-child.button:backdrop { //treeview-like derived widgets in Banshee and Evolution | |
1474 border-right-style: none; | |
1475 } | |
1476 } | |
1477 | |
1478 column-header.button.dnd { // for treeview-like derive widgets | |
1479 transition: none; | |
1480 color: $selected_bg_color; | |
1481 box-shadow: inset 1px 1px 0 1px $selected_bg_color, | |
1482 inset -1px 0 0 1px $selected_bg_color, | |
1483 inset 1px 1px $base_color, inset -1px 0 $base_color;; | |
1484 &:active { @extend column-header.button.dnd; } | |
1485 &:selected { @extend column-header.button.dnd; } | |
1486 &:hover { @extend column-header.button.dnd; } | |
1487 } | |
1488 | |
1489 %column_header_button { | |
1490 padding: 3px 6px; | |
1491 border-style: none solid solid none; | |
1492 border-radius: 0; | |
1493 background-image: none; | |
1494 border-color: $bg_color; | |
1495 text-shadow: none; | |
1496 &:insensitive { | |
1497 border-color: $bg_color; | |
1498 background-image: none; | |
1499 } | |
1500 &:backdrop { | |
1501 border-color: $backdrop_bg_color; | |
1502 border-style: none solid solid none; | |
1503 color: mix($backdrop_fg_color, $backdrop_bg_color, 50%); | |
1504 background-image: none; | |
1505 background-color: $backdrop_base_color; | |
1506 &:insensitive { | |
1507 border-color: $backdrop_bg_color; | |
1508 background-image: none; | |
1509 } | |
1510 } | |
1511 } | |
1512 | |
1513 | |
1514 /********* | |
1515 * Menus * | |
1516 *********/ | |
1517 .menubar { | |
1518 -GtkWidget-window-dragging: true; | |
1519 padding: 0px; | |
1520 box-shadow: inset 0 -1px transparentize(black, 0.9); | |
1521 &:backdrop { background-color: $backdrop_bg_color; } | |
1522 & > .menuitem { | |
1523 padding: 4px 8px; | |
1524 &:hover { //Seems like it :hover even with keyboard focus | |
1525 box-shadow: inset 0 -3px $selected_bg_color; | |
1526 color: $link_color; | |
1527 } | |
1528 &:insensitive { | |
1529 color: $insensitive_fg_color; | |
1530 box-shadow: none; | |
1531 } | |
1532 } | |
1533 } | |
1534 | |
1535 .menu { | |
1536 margin: 4px; | |
1537 padding: 0px; | |
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
1538 background-color: $base_color; |
0 | 1539 border: 1px solid $borders_color; // adds borders in a non composited env |
1540 .csd & { border: none; } // axes borders in a composited env | |
1541 .menuitem { | |
1542 text-shadow: none; | |
1543 padding: 4px; | |
1544 &:hover { | |
1545 color: $selected_fg_color; | |
1546 background-color: $selected_bg_color; | |
1547 } | |
1548 &:insensitive { | |
1549 color: $insensitive_fg_color; | |
1550 &:backdrop { color: $backdrop_insensitive_color; } | |
1551 } | |
1552 &:backdrop, &:backdrop:hover { | |
1553 color: $backdrop_fg_color; | |
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
1554 background-color: $backdrop_base_color; |
0 | 1555 } |
1556 //submenu indicators | |
1557 &.arrow { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); } | |
1558 &.arrow:dir(rtl) {-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl'); } | |
1559 } | |
1560 &.button { // overlow buttons | |
1561 @extend %undecorated_button; | |
1562 border-style: none; | |
1563 border-radius: 0; | |
1564 &.top { border-bottom: 1px solid mix($fg_color, $base_color, 10%); } | |
1565 &.bottom { border-top: 1px solid mix($fg_color, $base_color, 10%); } | |
1566 &:hover { background-color: mix($fg_color, $base_color, 10%); } | |
1567 &:insensitive { | |
1568 color: transparent; | |
1569 background-color: transparent; | |
1570 border-color: transparent ; | |
1571 } | |
1572 } | |
1573 } | |
1574 | |
1575 .menuitem .accelerator { color: gtkalpha(currentColor,0.55); } | |
1576 | |
1577 | |
1578 /*************** | |
1579 * Popovers * | |
1580 ***************/ | |
1581 | |
1582 .popover { | |
1583 padding: 2px; | |
1584 border: 1px solid $borders_color; | |
1585 border-radius: 5px; | |
1586 background-color: mix($bg_color, $base_color, 50%); | |
1587 | |
1588 box-shadow: 0 1px 2px transparentize(black, 0.7); | |
1589 | |
1590 &:backdrop { | |
1591 box-shadow: none; | |
1592 } | |
1593 | |
1594 > .list, | |
1595 > .view, | |
1596 > .toolbar, | |
1597 &.osd > .toolbar { | |
1598 border-style: none; | |
1599 background-color: transparent; | |
1600 } | |
1601 | |
1602 .button.flat, | |
1603 .button.flat:hover { | |
1604 text-shadow: none; | |
1605 transition: none; | |
1606 } | |
1607 | |
1608 &.osd { @extend %osd; } | |
1609 } | |
1610 | |
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
1611 //touch selection handlebars for the Popover.osd above |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
1612 .entry.cursor-handle, |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
1613 .cursor-handle { |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
1614 background-color: transparent; |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
1615 background-image: none; |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
1616 box-shadow: none; |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
1617 border-style: none; |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
1618 &.top { -gtk-icon-source: -gtk-icontheme('selection-start-symbolic'); } |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
1619 &.bottom { -gtk-icon-source: -gtk-icontheme('selection-end-symbolic'); } |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
1620 } |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
1621 |
0 | 1622 /***************** |
1623 * Notebooks and * | |
1624 * Tabs * | |
1625 *****************/ | |
1626 | |
1627 .notebook { | |
1628 // Through me you go to the grief wracked city; | |
1629 // Through me you go to everlasting pain; | |
1630 // Through me you go a pass among lost souls. | |
1631 // ... | |
1632 // Abandon all hope — Ye Who Enter Here | |
1633 padding: 0; | |
1634 background-color: $base_color; | |
1635 -GtkNotebook-initial-gap: 10; | |
1636 -GtkNotebook-arrow-spacing: 5; | |
1637 -GtkNotebook-tab-curvature: 0; | |
1638 -GtkNotebook-tab-overlap: -8; | |
1639 -GtkNotebook-has-tab-gap: false; | |
1640 -GtkWidget-focus-padding: 0; | |
1641 -GtkWidget-focus-line-width: 0; | |
1642 transition: all 200ms $ease-out-quad; | |
1643 &:backdrop { | |
1644 background-color: $backdrop_base_color; | |
1645 } | |
1646 &.frame { | |
1647 border: 1px solid $borders_color; | |
1648 // FIXME doesn't work | |
1649 &.top { border-top-width: 0; } | |
1650 &.bottom { border-bottom-width: 0; } | |
1651 &.right { border-right-width: 0; } | |
1652 &.left { border-left-width: 0; } | |
1653 &:backdrop { border-color: $backdrop_borders_color; } | |
1654 } | |
1655 &.header { | |
1656 // FIXME: double borders in some case, can't fix it w/o a class tho | |
1657 // FIXME: doesn't work on dark var | |
1658 background-color: mix($bg_color, $borders_color, 70%); | |
1659 | |
1660 // this is the shading of the header behind the tabs | |
1661 &.frame { | |
1662 border: 1px solid $borders_color; | |
1663 &.top { border-bottom-width: 0; } | |
1664 &.bottom { border-top-width: 0; } | |
1665 &.right { border-left-width: 0; } | |
1666 &.left { border-right-width: 0; } | |
1667 &:backdrop { border-color: $backdrop_borders_color; } | |
1668 } | |
1669 | |
1670 $_header_shade: inset 0 2px 3px -1px transparentize(black, 0.85); | |
1671 &.top { | |
1672 box-shadow: $_header_shade, | |
1673 inset 0 -1px $borders_color; // border | |
1674 &:backdrop { box-shadow: inset 0 -1px $backdrop_borders_color; } | |
1675 } | |
1676 &.bottom { | |
1677 box-shadow: $_header_shade, | |
1678 inset 0 1px $borders_color; | |
1679 &:backdrop { box-shadow: inset 0 1px $backdrop_borders_color; } | |
1680 } | |
1681 &.right { | |
1682 box-shadow: $_header_shade, | |
1683 inset 1px 0 $borders_color; | |
1684 &:backdrop { box-shadow: inset 1px 0 $backdrop_borders_color; } | |
1685 } | |
1686 &.left { | |
1687 box-shadow: $_header_shade, | |
1688 inset -1px 0 $borders_color; | |
1689 &:backdrop { box-shadow: inset -1px 0 $backdrop_borders_color; } | |
1690 } | |
1691 &:backdrop { | |
1692 // same color as backdrop pushed button | |
1693 background-color: $backdrop_dark_fill; | |
1694 box-shadow: none; | |
1695 } | |
1696 } | |
1697 tab { | |
1698 border-width: 0; | |
1699 border-style: solid; | |
1700 border-color: transparent; | |
1701 background-color: transparent; | |
1702 | |
1703 outline-offset: 0; | |
1704 | |
1705 $tab_indicator_size: 3px; | |
1706 //vertical tab sizing | |
1707 $vt_vpadding: 8px; | |
1708 $vt_hpadding: 20px; | |
1709 // horizontal tab sizing | |
1710 $ht_vpadding: 5px; | |
1711 $ht_hpadding: 20px; | |
1712 | |
1713 //FIXME: we get double border in some cases, not considering the broken | |
1714 //notebook content frame... | |
1715 &.top, &.bottom { padding: $vt_vpadding $vt_hpadding; } | |
1716 &.left, &.right { padding: $ht_vpadding $ht_hpadding; } | |
1717 | |
1718 | |
1719 /* works for testnotebookdnd, but there's a superfluous border | |
1720 in gedit or web, commented out for now, needs gtk fixes | |
1721 &.reorderable-page { | |
1722 &.top { | |
1723 padding-top: ($vt_vpadding - 1px); | |
1724 border-top-width: 1px; | |
1725 border-left-width: 1px; | |
1726 border-right-width: 1px; | |
1727 } | |
1728 &.bottom { | |
1729 padding-bottom: ($vt_vpadding - 1px); | |
1730 border-bottom-width: 1px; | |
1731 border-left-width: 1px; | |
1732 border-right-width: 1px; | |
1733 } | |
1734 &.left { | |
1735 padding-left: ($ht_hpadding - 1px); | |
1736 border-left-width: 1px; | |
1737 border-top-width: 1px; | |
1738 border-bottom-width: 1px; | |
1739 } | |
1740 &.right { | |
1741 padding-right: ($ht_hpadding - 1px); | |
1742 border-right-width: 1px; | |
1743 border-top-width: 1px; | |
1744 border-bottom-width: 1px; | |
1745 } | |
1746 } | |
1747 */ | |
1748 &.reorderable-page { | |
1749 &.top, &.bottom { | |
1750 padding-left: 12px; // for a nicer close button | |
1751 padding-right: 12px; // placement | |
1752 border-left-width: 1px; | |
1753 border-right-width: 1px; | |
1754 } | |
1755 &.left, &.right { | |
1756 border-bottom-width: 1px; | |
1757 border-top-width: 1px; | |
1758 } | |
1759 } | |
1760 &.top { | |
1761 //padding-bottom: ($vt_vpadding -$tab_indicator_size); | |
1762 border-bottom-width: $tab_indicator_size; | |
1763 } | |
1764 &.bottom { | |
1765 //padding-top: ($vt_vpadding -$tab_indicator_size); | |
1766 border-top-width: $tab_indicator_size; | |
1767 } | |
1768 &.left { | |
1769 //padding-right: ($ht_hpadding -$tab_indicator_size); | |
1770 border-right-width: $tab_indicator_size; | |
1771 } | |
1772 &.right { | |
1773 //padding-left: ($ht_hpadding -$tab_indicator_size); | |
1774 border-left-width: $tab_indicator_size; | |
1775 } | |
1776 | |
1777 //here's the interesting stuff | |
1778 &:hover, &.prelight-page { | |
1779 border-color: $borders_color; | |
1780 } | |
1781 &:active, &.active-page, &:backdrop:active { | |
1782 border-color: $selected_bg_color; | |
1783 } | |
1784 &:backdrop { | |
1785 background-color: transparent; | |
1786 border-color: transparent; | |
1787 } | |
1788 @each $_tab, $_border in (top, bottom), | |
1789 (bottom, top), | |
1790 (left, right), | |
1791 (right, left) { | |
1792 &.reorderable-page.#{$_tab} { | |
1793 border-color: transparent; | |
1794 &:hover, &.prelight-page { | |
1795 border-color: transparentize($borders_color,0.7); | |
1796 border-#{$_border}-color: $borders_color; | |
1797 background-color: transparentize($bg_color,0.8); | |
1798 } | |
1799 &:active, &.active-page { | |
1800 background-color: transparentize($bg_color,0.5); | |
1801 border-color: transparentize($borders_color,0.5); | |
1802 border-#{$_border}-color: $selected_bg_color; | |
1803 &:hover { background-color: transparentize($bg_color,0.3); } | |
1804 &:backdrop { | |
1805 border-color: $backdrop_borders_color; | |
1806 background-color: $backdrop_bg_color; | |
1807 border-#{$_border}-color: $selected_bg_color; | |
1808 } | |
1809 } | |
1810 &:backdrop { | |
1811 border-color: transparent; | |
1812 background-color: transparent; | |
1813 } | |
1814 } | |
1815 } | |
1816 .label { //tab text | |
1817 padding: 0 2px; // needed for a nicer focus ring | |
1818 font-weight: bold; | |
1819 color: $insensitive_fg_color; | |
1820 &:backdrop, &.prelight-page:backdrop { | |
1821 color: mix($backdrop_fg_color, $backdrop_insensitive_color, 50%); | |
1822 } | |
1823 } | |
1824 .prelight-page .label, .label.prelight-page { | |
1825 // prelight tab text | |
1826 color: mix($fg_color, $insensitive_fg_color, 50%); | |
1827 &:backdrop { // FIXME, it's the same as .label:backdrop up here | |
1828 color: mix($backdrop_fg_color, $backdrop_insensitive_color, 50%); | |
1829 } | |
1830 } | |
1831 .active-page .label, .label.active-page { | |
1832 // active tab text | |
1833 color: $fg_color; | |
1834 &:backdrop { color: $backdrop_fg_color; } | |
1835 } | |
1836 .button { //tab close button | |
1837 padding: 0; | |
1838 border: 1px solid transparent; | |
1839 @extend %undecorated_button; | |
1840 icon-shadow: none; | |
1841 transition: none; | |
1842 color: transparentize($fg_color,0.7); | |
1843 &:hover { | |
1844 color: $fg_color; | |
1845 @include button(hover, $edge:none); | |
1846 background-image: none; | |
1847 box-shadow: none; | |
1848 } | |
1849 &:active { | |
1850 @include button(active, $edge:none); | |
1851 } | |
1852 &:backdrop { | |
1853 color: transparentize($backdrop_fg_color,0.7); | |
1854 border-color: transparent; | |
1855 } | |
1856 & > GtkImage { // this is a hack which makes tabs grow | |
1857 padding: 2px; | |
1858 } | |
1859 } | |
1860 } | |
1861 &.arrow { | |
1862 color: $insensitive_fg_color; | |
1863 &:hover { color: mix($fg_color, $insensitive_fg_color, 50%); } | |
1864 &:active { color: $fg_color; } | |
1865 &:insensitive { | |
1866 color: transparentize($insensitive_fg_color,0.7); | |
1867 } | |
1868 &:backdrop { | |
1869 color: transparentize($backdrop_fg_color,0.6); | |
1870 &:insensitive { | |
1871 color: $backdrop_insensitive_color; | |
1872 } | |
1873 } | |
1874 } | |
1875 } | |
1876 | |
1877 /************** | |
1878 * Scrollbars * | |
1879 **************/ | |
1880 | |
1881 .scrollbar { | |
1882 -GtkRange-slider-width: 13; | |
1883 -GtkRange-trough-border: 0; | |
1884 -GtkScrollbar-has-backward-stepper: false; | |
1885 -GtkScrollbar-has-forward-stepper: false; | |
1886 -GtkScrollbar-min-slider-length: 42; // minimum size for the slider. | |
1887 // sadly can't be in '.slider' | |
1888 // where it belongs | |
1889 -GtkRange-stepper-spacing: 0; | |
1890 -GtkRange-trough-under-steppers: 1; | |
1891 | |
1892 $_slider_margin: 3px; | |
1893 $_slider_fine_tune_margin: 4px; | |
1894 | |
1895 .button { | |
1896 border: none; | |
1897 } | |
1898 | |
1899 &.overlay-indicator { | |
1900 &:not(.dragging):not(.hovering) { // Overlay scrolling indicator | |
1901 opacity: 0.4; | |
1902 | |
1903 -GtkRange-slider-width: 5px; | |
1904 | |
1905 .slider { | |
1906 margin: 0; | |
1907 background-color: $fg_color; | |
1908 border: 1px solid if($variant==light, white, black); | |
1909 background-clip: padding-box; | |
1910 } | |
1911 | |
1912 .trough { | |
1913 border-style: none; | |
1914 background-color: transparent; | |
1915 } | |
1916 | |
1917 // w/o the following margin tweaks the slider shrinks when hovering/dragging | |
1918 &.vertical .slider { | |
1919 margin-top: $_slider_margin - 1px; | |
1920 margin-bottom: $_slider_margin - 1px; | |
1921 } | |
1922 | |
1923 &.horizontal .slider { | |
1924 margin-left: $_slider_margin - 1px; | |
1925 margin-right: $_slider_margin - 1px; | |
1926 } | |
1927 | |
1928 } | |
1929 | |
1930 &.dragging, | |
1931 &.hovering { opacity: 0.7; } | |
1932 } | |
1933 | |
1934 // trough coloring | |
1935 .trough { | |
1936 background-color: $scrollbar_bg_color; | |
1937 border: 1px none $borders_color; | |
1938 | |
1939 &:backdrop { | |
1940 background-color: $backdrop_scrollbar_bg_color; | |
1941 border-color: $backdrop_borders_color; | |
1942 } | |
1943 } | |
1944 | |
1945 // slider coloring | |
1946 .slider { | |
1947 background-color: mix($fg_color, $bg_color, 60%); | |
1948 | |
1949 &:hover { background-color: mix($fg_color, $bg_color, 80%); } | |
1950 | |
1951 &:prelight:active { background-color: if($variant=='light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 10%));} | |
1952 | |
1953 &:backdrop { background-color: mix($backdrop_fg_color, $backdrop_bg_color, 40%); } | |
1954 | |
1955 &:insensitive { | |
1956 background-color: transparent; | |
1957 } | |
1958 } | |
1959 | |
1960 | |
1961 // sizing | |
1962 .slider { | |
1963 border-radius: 100px; | |
1964 margin: $_slider_margin; | |
1965 } | |
1966 | |
1967 &.fine-tune .slider { margin: $_slider_fine_tune_margin; } | |
1968 | |
1969 &.vertical { | |
1970 | |
1971 .slider { | |
1972 margin-left: 1px + $_slider_margin; | |
1973 | |
1974 &:dir(rtl) { | |
1975 margin-left: $_slider_margin; | |
1976 margin-right: 1px + $_slider_margin; | |
1977 } | |
1978 } | |
1979 | |
1980 &.fine-tune .slider { | |
1981 margin-left: 1px + $_slider_fine_tune_margin; | |
1982 | |
1983 &:dir(rtl) { | |
1984 margin-left: $_slider_fine_tune_margin; | |
1985 margin-right: 1px + $_slider_fine_tune_margin; | |
1986 } | |
1987 } | |
1988 | |
1989 .trough { | |
1990 border-left-style: solid; | |
1991 | |
1992 &:dir(rtl) { | |
1993 border-left-style: none; | |
1994 border-right-style: solid; | |
1995 } | |
1996 } | |
1997 } | |
1998 | |
1999 &.horizontal { | |
2000 | |
2001 .slider { margin-top: 1px + $_slider_margin; } | |
2002 | |
2003 &.fine-tune .slider { margin-top: 1px + $_slider_fine_tune_margin; } | |
2004 | |
2005 .trough { border-top-style: solid; } | |
2006 } | |
2007 } | |
2008 | |
2009 .scrollbars-junction, | |
2010 .scrollbars-junction.frame { // the small square between two scrollbars | |
2011 border-color: transparent; | |
2012 // the border image is used to add the missing dot between the borders, details, details, details... | |
2013 border-image: linear-gradient(to bottom, $borders_color 1px, transparent 1px) 0 0 0 1 / 0 1px stretch; | |
2014 background-color: $scrollbar_bg_color; | |
2015 | |
2016 &:dir(rtl) { border-image-slice: 0 1 0 0; } | |
2017 | |
2018 &:backdrop { | |
2019 border-image-source: linear-gradient(to bottom, $backdrop_borders_color 1px, transparent 1px); | |
2020 background-color: $backdrop_scrollbar_bg_color; | |
2021 } | |
2022 } | |
2023 | |
2024 | |
2025 /********** | |
2026 * Switch * | |
2027 **********/ | |
2028 | |
2029 GtkSwitch { | |
2030 -GtkSwitch-slider-width: 45px; // 55px is the right value to make it as tall | |
2031 // as buttons, not doing that for now | |
2032 font-weight: bold; | |
2033 font-size: smaller; | |
2034 outline-offset: -4px; | |
2035 box-shadow: inset 0 1px transparentize(black, 0.9), // needs to be set here | |
2036 _widget_edge(); // otherwise it gets | |
2037 // clipped | |
2038 &.trough { | |
2039 // similar to the .scale | |
2040 border: 1px solid $borders_color; | |
2041 border-radius: 3px; | |
2042 color: $fg_color; | |
2043 background-image: linear-gradient(to bottom, mix($bg_color, $borders_color, 60%)); | |
2044 text-shadow: 0 1px transparentize(black, 0.9); | |
2045 &:active { | |
2046 @include progressbar_fill; | |
2047 color: white; | |
2048 border-color: $selected_borders_color; | |
2049 box-shadow: _widget_edge(); | |
2050 text-shadow: 0 1px transparentize($selected_borders_color, 0.5), | |
2051 0 0 2px transparentize(white, 0.4); | |
2052 } | |
2053 &:insensitive { | |
2054 color: $insensitive_fg_color; | |
2055 border-color: $borders_color; | |
2056 background-image: none; | |
2057 background-color: $insensitive_bg_color; | |
2058 box-shadow: _widget_edge(); | |
2059 text-shadow: none; | |
2060 } | |
2061 &:backdrop { | |
2062 color: $backdrop_fg_color; | |
2063 border-color: $backdrop_borders_color; | |
2064 background-image: linear-gradient(to bottom, $backdrop_dark_fill); | |
2065 box-shadow: none; | |
2066 text-shadow: none; | |
2067 &:active { | |
2068 @if $variant == 'light' { color: $backdrop_bg_color; } | |
2069 border-color: if($variant == 'light', $selected_bg_color, | |
2070 $selected_borders_color); | |
2071 background-image: linear-gradient(to bottom, $selected_bg_color); | |
2072 box-shadow: none; | |
2073 } | |
2074 &:insensitive { | |
2075 color: $backdrop_insensitive_color; | |
2076 border-color: $backdrop_borders_color; | |
2077 background-image: none; | |
2078 background-color: $insensitive_bg_color; | |
2079 } | |
2080 } | |
2081 } | |
2082 &.slider { | |
2083 border: 1px solid; | |
2084 border-radius: 3px; | |
2085 @include button(normal); | |
2086 box-shadow: inset 0 1px if($variant=='light', white, | |
2087 transparentize(white, 0.85)), | |
2088 inset 0 -2px transparentize($bg_color, 0.4), | |
2089 inset 0 -1px mix($bg_color, $borders_color, 50%); | |
2090 &:hover { | |
2091 @include button(hover); | |
2092 box-shadow: inset 0 1px if($variant=='light', white, | |
2093 transparentize(white, 0.85)), | |
2094 inset 0 -2px transparentize($bg_color, 0.4), | |
2095 inset 0 -1px mix($bg_color, $borders_color, 50%); | |
2096 } | |
2097 &:active { border: 1px solid $selected_borders_color; } | |
2098 &:insensitive { @include button(insensitive, $edge:none); } | |
2099 &:backdrop { | |
2100 @include button(backdrop); | |
2101 box-shadow: none; | |
2102 &:active{ | |
2103 border-color: if($variant == 'light', $selected_bg_color, | |
2104 $selected_borders_color); | |
2105 } | |
2106 &:insensitive { | |
2107 @include button(backdrop-insensitive); | |
2108 box-shadow: none; | |
2109 } | |
2110 } | |
2111 } | |
2112 .list-row:selected & { | |
2113 @if $variant == 'light' { | |
2114 box-shadow: none; | |
2115 border-color: $selected_borders_color; | |
2116 &:backdrop { border-color: $selected_borders_color; } | |
2117 &.slider:dir(rtl) { border-left-color: $borders_color; } | |
2118 &.slider:dir(ltr) { border-right-color: $borders_color; } | |
2119 &.slider, | |
2120 &.slider:active { border-color: $selected_borders_color; } | |
2121 } | |
2122 } | |
2123 | |
2124 } | |
2125 | |
2126 /************************* | |
2127 * Check and Radio items * | |
2128 *************************/ | |
2129 | |
2130 // draw regular check and radio items using our PNG assets | |
2131 // all assets are rendered from assets.svg. never add pngs directly | |
2132 | |
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2133 $asset_suffix: if($variant=='dark', '-dark', ''); |
0 | 2134 @each $w,$a in ('check', 'checkbox'), |
2135 ('radio','radio') { | |
2136 | |
2137 //standard checks and radios | |
2138 @each $s,$as in ('','-unchecked'), | |
2139 (':hover', '-unchecked-hover'), | |
2140 (':active', '-unchecked-active'), | |
2141 (':insensitive','-unchecked-insensitive'), | |
2142 (':backdrop', '-unchecked-backdrop'), | |
2143 (':backdrop:insensitive', '-unchecked-backdrop-insensitive'), | |
2144 (':inconsistent', '-mixed'), | |
2145 (':inconsistent:hover', '-mixed-hover'), | |
2146 (':inconsistent:selected', '-mixed-active'), | |
2147 (':inconsistent:backdrop', '-mixed-backdrop'), | |
2148 (':inconsistent:insensitive', '-mixed-insensitive'), | |
2149 (':inconsistent:insensitive:backdrop', '-mixed-backdrop-insensitive'), | |
2150 (':checked', '-checked'), | |
2151 (':checked:insensitive','-checked-insensitive'), | |
2152 (':checked:hover', '-checked-hover'), | |
2153 (':checked:active', '-checked-active'), | |
2154 (':backdrop:checked', '-checked-backdrop'), | |
2155 (':backdrop:checked:insensitive', '-checked-backdrop-insensitive') { | |
2156 .#{$w}#{$s} { | |
2157 -gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}#{$asset_suffix}.png"), | |
2158 url("assets/#{$a}#{$as}#{$asset_suffix}@2.png")); | |
2159 icon-shadow: if(str-index($s,"backdrop"), none, 0 1px 0 $borders_edge); //no edge highlight for :backdrop | |
2160 &.button.flat { icon-shadow: none; } | |
2161 } | |
2162 @if $variant == 'light' { | |
2163 // the borders of the light variant versions of checks and radios are | |
2164 // too similar in luminosity to the selected background color, hence | |
2165 // we need special casing. | |
2166 .view.#{$w}#{$s}:selected, | |
2167 .list-row:selected .#{$w}#{$s} { | |
2168 -gtk-icon-source: -gtk-scaled(url("assets/selected-#{$a}#{$as}#{$asset_suffix}.png"), | |
2169 url("assets/selected-#{$a}#{$as}#{$asset_suffix}@2.png")); | |
2170 } | |
2171 } | |
2172 } | |
2173 | |
2174 //menu | |
2175 .menu .menuitem.#{$w} { | |
2176 -gtk-icon-source: -gtk-icontheme('#{$a}-symbolic'); | |
2177 color: mix($fg_color, $bg_color, 60%); | |
2178 icon-shadow: none; | |
2179 &:active, &:checked { | |
2180 -gtk-icon-source: -gtk-icontheme('#{$a}-checked-symbolic'); | |
2181 } | |
2182 &:inconsistent { | |
2183 -gtk-icon-source: -gtk-icontheme('#{$a}-mixed-symbolic'); | |
2184 } | |
2185 &:hover { color: $selected_fg_color; } | |
2186 &:insensitive { color: mix($insensitive_fg_color, $bg_color, 50%); } | |
2187 } | |
2188 } | |
2189 | |
2190 //treeview and list-rows | |
2191 .view.check, .view.radio, | |
2192 .list-row .check, list-row .radio { | |
2193 icon-shadow: none; | |
2194 &:selected, &:hover { icon-shadow: none; } | |
2195 } | |
2196 | |
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2197 //content view (grid/list) |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2198 |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2199 .content-view { |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2200 background-color: darken($bg_color,7%); |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2201 &:backdrop { background-color: darken($bg_color,7%); } |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2202 &.rubberband { @extend .rubberband; } |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2203 } |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2204 |
0 | 2205 //selection-mode |
2206 @each $s,$as in ('','-selectionmode'), | |
2207 (':hover', '-hover-selectionmode'), | |
2208 (':active', '-active-selectionmode'), | |
2209 (':backdrop', '-backdrop-selectionmode'), | |
2210 (':checked', '-checked-selectionmode'), | |
2211 (':checked:hover', '-checked-hover-selectionmode'), | |
2212 (':checked:active', '-checked-active-selectionmode'), | |
2213 (':backdrop:checked', '-checked-backdrop-selectionmode') { | |
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2214 .view.content-view.check#{$s} { |
0 | 2215 icon-shadow: none; |
2216 -gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}.png"), | |
2217 url("assets/checkbox#{$as}@2.png")); | |
2218 background-color: transparent; | |
2219 } | |
2220 } | |
2221 | |
2222 GtkCheckButton.text-button, GtkRadioButton.text-button { | |
2223 // this is for a nice focus on check and radios text | |
2224 padding: 1px 2px 4px; | |
2225 outline-offset: 0; | |
2226 &:insensitive, | |
2227 &:insensitive:active, | |
2228 &:insensitive:inconsistent { | |
2229 // set insensitive color, which is overriden otherwise | |
2230 color: $insensitive_fg_color; | |
2231 &:backdrop { color: $backdrop_insensitive_color; } | |
2232 } | |
2233 } | |
2234 | |
2235 /************ | |
2236 * GtkScale * | |
2237 ************/ | |
2238 .scale, | |
2239 .scale.scale-has-marks-above.scale-has-marks-below, | |
2240 .scale.vertical.scale-has-marks-above.scale-has-marks-below { | |
2241 // FIXME: rationalize | |
2242 -GtkScale-slider-length: 20; | |
2243 -GtkRange-slider-width: 20; | |
2244 -GtkRange-trough-border: 2; | |
2245 outline-offset: -9px; | |
2246 outline-radius: 4px; | |
2247 | |
2248 &.fine-tune { | |
2249 outline-offset: -7px; | |
2250 outline-radius: 6px; | |
2251 &.trough { | |
2252 margin: 8px; | |
2253 border-radius: 4px; | |
2254 } | |
2255 } | |
2256 | |
2257 &.slider { | |
2258 //FIXME: better gradient on the slider and hover state | |
2259 @include button(normal); | |
2260 border: 1px solid; | |
2261 border-radius: 50%; | |
2262 border-color: darken($borders_color,3%); | |
2263 box-shadow: inset 0 1px if($variant=='light', white, | |
2264 transparentize(white,0.85)), | |
2265 inset 0 #{-2px} $bg_color, | |
2266 inset 0 #{-1px} mix($bg_color, $borders_color, 50%); | |
2267 &:hover { | |
2268 @include button(hover); | |
2269 border-color: darken($borders_color,3%); | |
2270 border-radius: 50%; // needed for double marks scales | |
2271 box-shadow: inset 0 1px if($variant=='light', white, | |
2272 transparentize(white, 0.85)), | |
2273 inset 0 #{-2px} if($variant=='light', white, | |
2274 transparentize(white, 0.86)), | |
2275 inset 0 #{-1px} mix($bg_color, $borders_color, 70%); | |
2276 } | |
2277 &:insensitive { | |
2278 border-style: solid; // needed for double marks scales or they'll get | |
2279 border-radius: 50%; // overridden | |
2280 background-image: linear-gradient(to bottom, $insensitive_bg_color); | |
2281 box-shadow: none; | |
2282 } | |
2283 &:backdrop { | |
2284 border-style: solid; // needed for double marks scales or they'll get | |
2285 border-radius: 50%; // overridden | |
2286 border-color: darken($backdrop_borders_color,3%); | |
2287 background-image: linear-gradient(to bottom, $backdrop_bg_color); | |
2288 box-shadow: none; | |
2289 } | |
2290 &:backdrop:insensitive { | |
2291 @include button(backdrop-insensitive); | |
2292 } | |
2293 &:active { | |
2294 border: 1px solid if($variant=='light',darken($selected_borders_color,3%), | |
2295 darken($selected_bg_color,15%)); | |
2296 } | |
2297 //OSD sliders | |
2298 .osd & { | |
2299 @include button(osd); | |
2300 background-color: opacify($osd_bg_color, 1); | |
2301 &:hover { @include button(osd-hover); } | |
2302 &:active { @include button(osd-active); } | |
2303 &:backdrop { @include button(osd-backdrop); } | |
2304 } | |
2305 } | |
2306 &.trough { | |
2307 margin: 10px; | |
2308 border: 1px solid $borders_color; | |
2309 border-radius: 3px; | |
2310 background-color: mix($bg_color, $borders_color, 60%); | |
2311 box-shadow: inset 1px 1px transparentize(black, 0.9), | |
2312 _widget_edge(); | |
2313 &.highlight { | |
2314 @include progressbar_fill; | |
2315 border-color: $selected_borders_color; | |
2316 box-shadow: _widget_edge(); | |
2317 &.vertical { @include progressbar_fill(vertical); } | |
2318 &:backdrop { | |
2319 border-color: if($variant=='light', $selected_bg_color, | |
2320 $selected_borders_color); | |
2321 background-color: $selected_bg_color; | |
2322 box-shadow: none; | |
2323 } | |
2324 } | |
2325 &:insensitive, &.vertical:insensitive { | |
2326 border-color: $insensitive_borders_color; | |
2327 background-image: none; | |
2328 background-color: $insensitive_bg_color; | |
2329 box-shadow: _widget_edge(); | |
2330 } | |
2331 &:backdrop { | |
2332 border-color: $backdrop_borders_color; | |
2333 background-color: mix($backdrop_bg_color, $borders_color, 50%); | |
2334 box-shadow: none; | |
2335 } | |
2336 &:backdrop:insensitive, .highlight:backdrop:insensitive { | |
2337 border-color: $backdrop_borders_color; | |
2338 background-color: $insensitive_bg_color; | |
2339 } | |
2340 //OSD troughs | |
2341 .osd & { | |
2342 border-color: $osd_borders_color; | |
2343 box-shadow: none; | |
2344 margin: 9px; | |
2345 &.fine-tune { margin: 7px; } | |
2346 background-color: transparentize($osd_borders_color, 0.2); | |
2347 outline-color: transparentize($osd_fg_color, 0.8); | |
2348 outline-offset: -8px; | |
2349 &.highlight { | |
2350 background-image: none; | |
2351 background-color: $selected_bg_color; | |
2352 } | |
2353 &:insensitive, &:backdrop:insensitive { | |
2354 border-color: transparent; | |
2355 background-color: transparent; | |
2356 } | |
2357 &:backdrop { | |
2358 border-color: $osd_borders_color; | |
2359 background-image: none; | |
2360 } | |
2361 } | |
2362 } | |
2363 } | |
2364 | |
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2365 $asset_suffix: if($variant=='dark', '-dark', ''); |
0 | 2366 @each $d,$dn in ('', 'horz'), |
2367 ('.vertical', 'vert') { | |
2368 @each $w,$we in ('scale-has-marks-below','scale_marks_below'), | |
2369 ('scale-has-marks-above','scale_marks_above') { | |
2370 .scale#{$d}.#{$w} { | |
2371 -GtkScale-slider-length: 20; | |
2372 -GtkRange-slider-width: 24; | |
2373 -GtkRange-trough-border: 2; | |
2374 | |
2375 @extend %#{$we}_#{$dn}; | |
2376 | |
2377 @each $s,$as in ('',''), | |
2378 (':hover','-hover'), | |
2379 (':active','-active'), | |
2380 (':insensitive','-insensitive'), | |
2381 (':backdrop','-backdrop'), | |
2382 (':backdrop:insensitive','-backdrop-insensitive') { | |
2383 &.slider#{$s} { | |
2384 $_url: 'assets/slider-#{$dn}-#{$w}#{$as}#{$asset_suffix}'; | |
2385 border-style: none; | |
2386 border-radius: 0; | |
2387 background-color: transparent; | |
2388 background-image: -gtk-scaled(url('#{$_url}.png'), | |
2389 url('#{$_url}@2.png')); | |
2390 background-repeat: no-repeat; | |
2391 background-position: center; | |
2392 box-shadow: none; | |
2393 } | |
2394 } | |
2395 } | |
2396 } | |
2397 } | |
2398 | |
2399 %scale_marks_above_horz { | |
2400 .trough { margin: 14px 10px 10px; } | |
2401 &.fine-tune .trough { margin: 12px 8px 8px; } | |
2402 } | |
2403 %scale_marks_below_horz { | |
2404 .trough { margin: 10px 10px 14px; } | |
2405 &.fine-tune .trough { margin: 8px 8px 12px; } | |
2406 } | |
2407 %scale_marks_above_vert { | |
2408 .trough { margin: 10px 10px 10px 14px; } | |
2409 &.fine-tune .trough { margin: 8px 8px 8px 12px; } | |
2410 } | |
2411 %scale_marks_below_vert { | |
2412 .trough { margin: 10px 14px 10px 10px; } | |
2413 &.fine-tune .trough { margin: 8px 12px 8px 8px; } | |
2414 } | |
2415 | |
2416 /***************** | |
2417 * Progress bars * | |
2418 *****************/ | |
2419 | |
2420 GtkProgressBar { | |
2421 padding: 0; | |
2422 font-size: smaller; | |
2423 color: transparentize($fg_color, 0.6); | |
2424 box-shadow: inset 1px 1px transparentize(black, 0.9), // needs to be set | |
2425 _widget_edge(); // here ot it gets | |
2426 // clipped | |
2427 &:backdrop { | |
2428 color: $backdrop_insensitive_color; | |
2429 } | |
2430 &.osd { | |
2431 -GtkProgressBar-xspacing: 0; | |
2432 -GtkProgressBar-yspacing: 0; | |
2433 -GtkProgressBar-min-horizontal-bar-height: 3; | |
2434 } | |
2435 &.trough { // background | |
2436 border: 1px solid $borders_color; | |
2437 border-radius: 3px; | |
2438 background-color: mix($borders_color, $bg_color, 35%); | |
2439 &:backdrop{ | |
2440 border-color: $backdrop_borders_color; | |
2441 background-color: $backdrop_dark_fill; | |
2442 box-shadow: 0 1px transparentize(white,1); | |
2443 } | |
2444 &.osd { | |
2445 border-style: none; | |
2446 background-color: transparent; | |
2447 box-shadow: none; | |
2448 } | |
2449 } | |
2450 } | |
2451 | |
2452 // moving bit | |
2453 .progressbar { | |
2454 @include progressbar_fill; | |
2455 border: 1px solid $selected_borders_color; | |
2456 border-radius: 1.5px; | |
2457 box-shadow: none; //needed for clipping | |
2458 &.left { | |
2459 border-top-left-radius: 3px; | |
2460 border-bottom-left-radius: 3px; | |
2461 } | |
2462 &.right { | |
2463 border-top-right-radius: 3px; | |
2464 border-bottom-right-radius: 3px; | |
2465 } | |
2466 &.left.right { | |
2467 box-shadow: none; | |
2468 } | |
2469 &.vertical { | |
2470 @include progressbar_fill(vertical); | |
2471 &.bottom { | |
2472 border-bottom-left-radius: 3px; | |
2473 border-bottom-right-radius: 3px; | |
2474 box-shadow: none; | |
2475 } | |
2476 &.top { | |
2477 border-top-left-radius: 3px; | |
2478 border-top-right-radius: 3px; | |
2479 } | |
2480 } | |
2481 &:backdrop { | |
2482 border-color: if($variant=='light', $selected_bg_color, | |
2483 $selected_borders_color); | |
2484 background-image: none; | |
2485 background-color: $selected_bg_color; | |
2486 box-shadow: none; | |
2487 } | |
2488 &.osd { | |
2489 background-image: none; | |
2490 background-color: $selected_bg_color; | |
2491 border-style: none; | |
2492 border-radius: 0; | |
2493 } | |
2494 } | |
2495 | |
2496 | |
2497 /************* | |
2498 * Level Bar * | |
2499 *************/ | |
2500 | |
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2501 .level-bar.vertical { |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2502 -GtkLevelBar-min-block-width: 3; |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2503 -GtkLevelBar-min-block-height: 34; |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2504 } |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2505 |
0 | 2506 .level-bar { |
2507 box-shadow: _widget_edge(); // needs to be set here to avoid clipping | |
2508 -GtkLevelBar-min-block-width: 34; | |
2509 -GtkLevelBar-min-block-height: 3; | |
2510 &.vertical { | |
2511 -GtkLevelBar-min-block-width: 3; | |
2512 -GtkLevelBar-min-block-height: 34; | |
2513 } | |
2514 &.trough { | |
2515 border: 1px solid; | |
2516 padding: 2px; | |
2517 border-radius: 3px; | |
2518 @include entry(normal); | |
2519 &:backdrop { | |
2520 @include entry(backdrop); | |
2521 } | |
2522 } | |
2523 &.fill-block { | |
2524 // FIXME: it would be nice to set make fill blocks bigger, but we'd need | |
2525 // :nth-child working on discrete indicators | |
2526 border: 1px solid if($variant=='light', darken($selected_bg_color,10%), | |
2527 darken($selected_bg_color,5%)); | |
2528 background-color: $selected_bg_color; | |
2529 box-shadow: 0 1px transparentize(black, 0.9); | |
2530 border-radius: 1px; | |
2531 &:backdrop { | |
2532 border-color: $selected_bg_color; | |
2533 box-shadow: none; | |
2534 } | |
2535 &.indicator-discrete { | |
2536 &.horizontal { margin: 0 1px; } | |
2537 &.vertical { margin: 1px 0; } | |
2538 } | |
2539 &.level-high { | |
2540 border-color: darken($success_color,10%); | |
2541 background-color: $success_color; | |
2542 &:backdrop { border-color: $success_color; } | |
2543 } | |
2544 &.level-low { | |
2545 border-color: darken($warning_color,10%); | |
2546 background-color: $warning_color; | |
2547 &:backdrop { border-color: $warning_color; }; | |
2548 } | |
2549 &.empty-fill-block { | |
2550 background-color: transparent; | |
2551 border-color: if($variant=='light', transparentize($fg_color,0.8), | |
2552 transparentize($fg_color,0.9)); | |
2553 box-shadow: none; | |
2554 &:backdrop { border-color: transparentize($backdrop_fg_color,0.85); } | |
2555 } | |
2556 } | |
2557 } | |
2558 | |
2559 | |
2560 /********** | |
2561 * Frames * | |
2562 **********/ | |
2563 .frame { | |
2564 border: 1px solid $borders_color; | |
2565 &.flat { border-style: none; } | |
2566 &:backdrop { border-color: $backdrop_borders_color; } | |
2567 padding: 0; | |
2568 &.action-bar { | |
2569 padding: 6px; | |
2570 border-width: 1px 0 0; | |
2571 } | |
2572 } | |
2573 | |
2574 GtkScrolledWindow { | |
2575 GtkViewport.frame { // avoid double borders when viewport inside | |
2576 // scrolled window | |
2577 border-style: none; | |
2578 } | |
2579 } | |
2580 | |
2581 //vbox and hbox separators | |
2582 .separator { | |
2583 // always disable separators | |
2584 // -GtkWidget-wide-separators: true; | |
2585 color: transparentize(black, 0.9); | |
2586 | |
2587 // Font and File button separators | |
2588 GtkFileChooserButton &.vertical, | |
2589 GtkFontButton &.vertical { | |
2590 // always disable separators | |
2591 -GtkWidget-wide-separators: true; | |
2592 } | |
2593 } | |
2594 | |
2595 /********* | |
2596 * Lists * | |
2597 *********/ | |
2598 | |
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2599 .list, .list-row { |
0 | 2600 background-color: $base_color; |
2601 border-color: $borders_color; | |
2602 &:backdrop { | |
2603 background-color: $backdrop_base_color; | |
2604 border-color: $backdrop_borders_color; | |
2605 } | |
2606 } | |
2607 | |
2608 .list-row, | |
2609 .grid-child { | |
2610 padding: 2px; | |
2611 } | |
2612 | |
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2613 .list-row.button, |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2614 .list-row.button:backdrop, |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2615 .list-row.button:backdrop:active, |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2616 .list-row.button:backdrop:checked, |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2617 .list-row.button:backdrop:insensitive, |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2618 .list-row.button:backdrop:insensitive:active, |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2619 .list-row.button:backdrop:insensitive:checked, |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2620 .list-row.button:insensitive:active, |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2621 .list-row.button:insensitive:checked { |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2622 // reset button inherited stuff |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2623 @extend %undecorated_button; |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2624 background-color: transparentize($base_color,1); // for the transition |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2625 border-style: none; // I need no borders here |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2626 border-radius: 0; // and no rounded corners |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2627 box-shadow: none; // and no box-shadow |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2628 |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2629 } |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2630 |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2631 .list-row.button { |
0 | 2632 // let's take care of background colors |
2633 &:hover { | |
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2634 background-color: mix($fg_color, $base_color, 5%); |
0 | 2635 } |
2636 &:active { | |
2637 box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8); | |
2638 } | |
2639 &:backdrop:hover { background-color: transparent; } | |
2640 &:selected { | |
2641 &:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); } | |
2642 &:hover { | |
2643 background-color: mix($fg_color, $selected_bg_color, 10%); | |
2644 } | |
2645 &:backdrop { background-color: $selected_bg_color; } | |
2646 } | |
2647 } | |
2648 | |
2649 .list-row:selected { | |
2650 @extend %selected_items; | |
2651 .button { | |
2652 @include button(normal, $edge:none); | |
2653 @if $variant == 'light' { border-color: $selected_borders_color; } | |
2654 &.flat { | |
2655 @include button(undecorated, $edge:none); | |
2656 color: $selected_fg_color; | |
2657 } | |
2658 &:hover { | |
2659 @include button(hover, $edge:none); | |
2660 @if $variant == 'light' { border-color: $selected_borders_color; } | |
2661 } | |
2662 &:active, &:checked { | |
2663 @include button(active, $edge:none); | |
2664 @if $variant == 'light' { border-color: $selected_borders_color; } | |
2665 } | |
2666 &:backdrop, &.flat:backdrop { | |
2667 @include button(backdrop, $edge:none); | |
2668 @if $variant == 'light' { border-color: $selected_borders_color; } | |
2669 &:active, &:checked { | |
2670 @include button(backdrop-active, $edge:none); | |
2671 @if $variant == 'light' { border-color: $selected_borders_color; } | |
2672 } | |
2673 &:insensitive { | |
2674 @include button(backdrop-insensitive, $edge:none); | |
2675 @if $variant == 'light' { border-color: $selected_borders_color; } | |
2676 &:active, &:checked { | |
2677 @include button(backdrop-insensitive-active, $edge:none); | |
2678 @if $variant == 'light' { border-color: $selected_borders_color; } | |
2679 } | |
2680 } | |
2681 } | |
2682 &.flat:backdrop { | |
2683 @include button(undecorated); | |
2684 color: if($variant=='light', $backdrop_base_color, $backdrop_fg_color); | |
2685 } | |
2686 &:insensitive { | |
2687 @include button(insensitive, $edge:none); | |
2688 @if $variant == 'light' { border-color: $selected_borders_color; } | |
2689 &:active, &:checked { @include button(insensitive-active, $edge:none); } | |
2690 } | |
2691 //FIXME: make placeholder with buttons w/o edge to be extended around | |
2692 // istead of repeating everytime this stuff. | |
2693 } | |
2694 } | |
2695 | |
2696 // transition | |
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2697 .list-row, list-row.button { |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2698 transition: all 300ms $ease-out-quad; |
0 | 2699 &:hover { transition: none; } |
2700 } | |
2701 | |
2702 | |
2703 /********************* | |
2704 * App Notifications * | |
2705 *********************/ | |
2706 | |
2707 .app-notification, | |
2708 .app-notification.frame { | |
2709 @extend %osd; | |
2710 padding: 10px; | |
2711 border: none; | |
2712 border-radius: 0 0 6px 6px; | |
2713 background-color: $osd_bg_color; | |
2714 background-image: linear-gradient(to bottom, transparentize(black, 0.8), | |
2715 transparent 2px); | |
2716 background-clip: padding-box; | |
2717 &:backdrop { background-image: none; } | |
2718 .button { | |
2719 @include button(osd); | |
2720 &.flat { | |
2721 @extend %undecorated_button; | |
2722 icon-shadow: 0 1px black; | |
2723 text-shadow: 0 1px black; | |
2724 &:backdrop, | |
2725 &:insensitive, | |
2726 &:backdrop:insensitive { @extend %undecorated_button; } | |
2727 } | |
2728 &:hover { @include button(osd-hover); } | |
2729 &:active, | |
2730 &:checked, | |
2731 &:backdrop:active, | |
2732 &:backdrop:checked { | |
2733 @include button(osd-active); | |
2734 } | |
2735 &:insensitive, | |
2736 &:backdrop:insensitive { | |
2737 @include button(osd-insensitive); | |
2738 } | |
2739 &:backdrop { @include button(osd-backdrop); } | |
2740 } | |
2741 } | |
2742 | |
2743 /************* | |
2744 * Expanders * | |
2745 *************/ | |
2746 | |
2747 .expander { | |
2748 -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); | |
2749 &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); } | |
2750 &:hover { color: lighten($fg_color,30%); } //only lightens the arrow | |
2751 &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } | |
2752 } | |
2753 | |
2754 /************ | |
2755 * Calendar * | |
2756 ***********/ | |
2757 GtkCalendar { | |
2758 color: $text_color; | |
2759 border: 1px solid $borders_color; | |
2760 | |
2761 &:selected { | |
2762 @extend .view:selected; | |
2763 } | |
2764 | |
2765 &.header { | |
2766 border: 1px solid transparentize(black, 0.9); | |
2767 border-radius: 0; | |
2768 | |
2769 &:backdrop { border-color: transparentize(black, 0.9); } | |
2770 } | |
2771 | |
2772 &.button { | |
2773 @extend %undecorated_button; | |
2774 color: transparentize($fg_color, 0.55); | |
2775 | |
2776 &:hover { | |
2777 @extend %undecorated_button; | |
2778 color: $fg_color; | |
2779 } | |
2780 | |
2781 &:backdrop { | |
2782 @extend %undecorated_button; | |
2783 color: transparentize($backdrop_fg_color,0.55); | |
2784 } | |
2785 } | |
2786 | |
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2787 &:inconsistent, &:inconsistent:backdrop, |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2788 &.highlight, &.highlight:backdrop { color: gtkalpha(currentColor, 0.55); } |
0 | 2789 |
2790 | |
2791 &:backdrop { | |
2792 color: $backdrop_text_color; | |
2793 border-color: $backdrop_borders_color; | |
2794 } | |
2795 } | |
2796 | |
2797 /*********** | |
2798 * Dialogs * | |
2799 ***********/ | |
2800 | |
2801 .message-dialog .dialog-action-area .button { | |
2802 padding: 8px; | |
2803 } | |
2804 | |
2805 .message-dialog { // Message Dialog styling | |
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2806 -GtkDialog-button-spacing: 0; |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2807 |
0 | 2808 @if $variant==light { |
2809 // the bright variant as a slightly darker bg which in this case clashes with the window decoration, overriding | |
2810 &.background { background-color: $bg_color; } | |
2811 } | |
2812 | |
2813 .titlebar { | |
2814 border-style: none; | |
2815 box-shadow: inset 0 1px $borders_edge; | |
2816 } | |
2817 &.csd { // rounded bottom border styling for csd version | |
2818 &.background { | |
2819 // bigger radius for better antialiasing | |
2820 border-bottom-left-radius: 9px; | |
2821 border-bottom-right-radius: 9px; | |
2822 } | |
2823 .dialog-action-area .button { | |
2824 padding: 12px; | |
2825 border-radius: 0; | |
2826 @include button(normal, $edge:none); | |
2827 @extend %middle_button; | |
2828 &:hover { | |
2829 @include button(hover, $edge:none); | |
2830 @extend %middle_button; | |
2831 } | |
2832 &:active { | |
2833 @include button(active, $edge:none); | |
2834 @extend %middle_button; | |
2835 } | |
2836 &:insensitive { | |
2837 @include button(insensitive, $edge:none); | |
2838 @extend %middle_button; | |
2839 } | |
2840 &:backdrop { | |
2841 @include button(backdrop, $edge:none); | |
2842 @extend %middle_button; | |
2843 } | |
2844 &:backdrop:insensitive { | |
2845 @include button(backdrop-insensitive, $edge:none); | |
2846 @extend %middle_button; | |
2847 } | |
2848 @each $b_type, $b_color in (suggested-action, $selected_bg_color), | |
2849 (destructive-action, $destructive_color) { | |
2850 &.#{$b_type} { | |
2851 @include button(normal, $b_color, white, $edge:none); | |
2852 @extend %middle_button; | |
2853 &:hover { | |
2854 @include button(hover, $b_color, white, $edge:none); | |
2855 @extend %middle_button; | |
2856 } | |
2857 &:active { | |
2858 @include button(active, $b_color, white, $edge:none); | |
2859 @extend %middle_button; | |
2860 } | |
2861 &:backdrop { | |
2862 @include button(backdrop, $b_color, white, $edge:none); | |
2863 @extend %middle_button; | |
2864 &:insensitive { | |
2865 @include button(backdrop-insensitive, $edge:none); | |
2866 @extend %middle_button; | |
2867 } | |
2868 } | |
2869 &:insensitive { | |
2870 @include button(insensitive, $edge:none); | |
2871 @extend %middle_button; | |
2872 } | |
2873 } | |
2874 } | |
2875 &:first-child{ @extend %first_button; } | |
2876 &:last-child { @extend %last_button; } | |
2877 } | |
2878 %middle_button { | |
2879 border-left-style: solid; | |
2880 border-right-style: none; | |
2881 border-bottom-style: none; | |
2882 } | |
2883 %last_button { | |
2884 border-bottom-right-radius: 7px; | |
2885 outline-bottom-right-radius: 5px; | |
2886 } | |
2887 %first_button { | |
2888 border-left-style: none; | |
2889 border-bottom-left-radius: 7px; | |
2890 outline-bottom-left-radius: 5px; | |
2891 } | |
2892 } | |
2893 } | |
2894 | |
2895 GtkFileChooserDialog { | |
2896 .search-bar { | |
2897 background-color: $base_color; | |
2898 border-color: $bg_color; | |
2899 box-shadow: none; | |
2900 &:backdrop { | |
2901 background-color: $backdrop_base_color; | |
2902 border-color: $backdrop_bg_color; | |
2903 } | |
2904 } | |
2905 .dialog-action-box { | |
2906 border-top: 1px solid $borders_color; | |
2907 &:backdrop { border-top-color: $backdrop_borders_color; } | |
2908 } | |
2909 } | |
2910 | |
2911 /*********** | |
2912 * Sidebar * | |
2913 ***********/ | |
2914 | |
2915 .sidebar { | |
2916 border: none; | |
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2917 background-color: $sidebar_bg_color; |
0 | 2918 |
2919 &:backdrop { | |
2920 background-color: $backdrop_sidebar_bg_color; | |
2921 } | |
2922 | |
2923 &:selected { | |
2924 @extend %selected_items; | |
2925 } | |
2926 } | |
2927 | |
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2928 // Places sidebar is a special case, since the view here have to look like chrome not content, so we override text color |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2929 GtkPlacesSidebar.sidebar .view { |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2930 |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2931 color: $fg_color; |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2932 background-color: transparent; |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2933 |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2934 .separator, |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2935 .separator:backdrop { @extend .separator; } |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2936 |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2937 .image { // icons color |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2938 color: mix($fg_color, $sidebar_bg_color, 70%); |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2939 |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2940 &:selected { |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2941 color: mix($selected_fg_color, $selected_bg_color, 90%); |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2942 |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2943 &:backdrop { color: mix($backdrop_selected_fg_color, $selected_bg_color, 90%); } |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2944 } |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2945 |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2946 &:insensitive { color: mix($insensitive_fg_color, $sidebar_bg_color, 70%); } |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2947 |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2948 &:backdrop { |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2949 color: mix($backdrop_fg_color, $sidebar_bg_color, 70%); |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2950 |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2951 &:insensitive { color: mix($backdrop_insensitive_color, $sidebar_bg_color, 70%); } |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2952 } |
0 | 2953 } |
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2954 |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2955 &:insensitive { color: $insensitive_fg_color; } |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2956 |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2957 &:backdrop { |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2958 color: $backdrop_fg_color; |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2959 |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2960 &:insensitive { color: $backdrop_insensitive_color; } |
0 | 2961 } |
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2962 |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2963 &:selected { |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
2964 @extend %selected_items; |
0 | 2965 } |
2966 } | |
2967 | |
2968 | |
2969 .sidebar-item { | |
2970 padding: 10px 4px; | |
2971 > .label { | |
2972 padding-left: 6px; | |
2973 padding-right: 6px; | |
2974 } | |
2975 &.needs-attention > .label { | |
2976 @extend %needs_attention; | |
2977 background-size: 6px 6px, 0 0; | |
2978 } | |
2979 } | |
2980 | |
2981 | |
2982 /********* | |
2983 * Paned * | |
2984 *********/ | |
2985 | |
2986 GtkPaned { // this is for the standard paned separator | |
2987 | |
2988 -GtkPaned-handle-size: 1; // sets separator width | |
2989 | |
2990 -gtk-icon-source: none; // removes handle decoration | |
2991 margin: 0 8px 8px 0; // drag area of the separator, not a real margin | |
2992 &:dir(rtl) { | |
2993 margin-right: 0; | |
2994 margin-left: 8px; | |
2995 } | |
2996 .pane-separator { | |
2997 background-color: $borders_color; | |
2998 &:backdrop { | |
2999 background-color: $backdrop_borders_color; | |
3000 } | |
3001 } | |
3002 } | |
3003 | |
3004 GtkPaned.wide { // this is for the paned with wide separator | |
3005 -GtkPaned-handle-size: 5; // wider separator here | |
3006 margin: 0; // no need of the invisible drag area so, reset margin | |
3007 .pane-separator { | |
3008 background-color: transparent; | |
3009 border-style: none solid; | |
3010 border-color: $borders_color; | |
3011 border-width: 1px; | |
3012 } | |
3013 &.vertical .pane-separator { border-style: solid none;} | |
3014 .pane-separator:backdrop { border-color: $backdrop_borders_color; } | |
3015 } | |
3016 | |
3017 | |
3018 /************** | |
3019 * GtkInfoBar * | |
3020 **************/ | |
3021 GtkInfoBar { | |
3022 border-style: none; | |
3023 } | |
3024 | |
3025 .info, | |
3026 .question, | |
3027 .warning, | |
3028 .error { | |
3029 background-color: $selected_bg_color; | |
3030 color: $selected_fg_color; | |
3031 text-shadow: 0 1px darken($selected_bg_color, 10%); | |
3032 border-color: darken($selected_bg_color, 10%); | |
3033 .button { | |
3034 // FIXME: extend selection mode buttons | |
3035 @include button(normal, $selected_bg_color, $selected_fg_color, none); | |
3036 &:hover { | |
3037 @include button(hover, $selected_bg_color, $selected_fg_color, none); } | |
3038 &:active { | |
3039 @include button(active, $selected_bg_color, $selected_fg_color, none); } | |
3040 &:insensitive { | |
3041 @include button(insensitive,$selected_bg_color,$selected_fg_color,none); } | |
3042 &:backdrop { | |
3043 @include button(backdrop, $selected_bg_color, $selected_fg_color, none); | |
3044 border-color: _border_color($selected_bg_color); | |
3045 &:insensitive { | |
3046 @include button(backdrop-insensitive, $selected_bg_color, | |
3047 $selected_fg_color, none); | |
3048 border-color: _border_color($selected_bg_color); | |
3049 } | |
3050 } | |
3051 } | |
3052 .label:selected, | |
3053 .label:selected:focus, | |
3054 .label:selected:hover { | |
3055 background-color: darken($selected_bg_color, 10%); | |
3056 } | |
3057 } | |
3058 | |
3059 /************ | |
3060 * Tooltips * | |
3061 ************/ | |
3062 | |
3063 .tooltip { | |
3064 &.background { | |
3065 // background-color needs to be set this way otherwise it gets drawn twice | |
3066 // see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details. | |
3067 background-color: transparentize(black, 0.2); | |
3068 background-clip: padding-box; | |
3069 border: 1px solid $tooltip_borders_color; // this suble border is meant to | |
3070 // not make the tooltip melt with | |
3071 // very dark backgrounds | |
3072 } | |
3073 | |
3074 color: white; | |
3075 padding: 4px; /* not working */ | |
3076 border-radius: 5px; | |
3077 box-shadow: none; // otherwise it gets inherited by windowframe.csd | |
3078 text-shadow: 0 1px black; | |
3079 // FIXME: we need a border or tooltips vanish on black background. | |
3080 &.window-frame.csd { | |
3081 background-color: transparent; | |
3082 } | |
3083 } | |
3084 | |
3085 .tooltip * { //Yeah this is ugly | |
3086 padding: 4px; | |
3087 background-color: transparent; | |
3088 color: inherit; // just to be sure | |
3089 } | |
3090 | |
3091 /***************** | |
3092 * Color Chooser * | |
3093 *****************/ | |
3094 | |
3095 GtkColorSwatch { | |
3096 // This widget is made of two boxes one on top of the other, the lower box is GtkColorSwatch {} the other one | |
3097 // is GtkColorSwatch > .overlay {}, GtkColorSwatch has the programmatically set background, so most of the style | |
3098 // is applied to the overlay box. | |
3099 | |
3100 $_colorswatch_shadow: inset 0 1px transparentize(black, 0.9), _widget_edge(); | |
3101 | |
3102 $_colorswatch_radius: 5px; | |
3103 | |
3104 box-shadow: $_colorswatch_shadow; | |
3105 | |
3106 // take care of colorswatches on selected elements | |
3107 :selected & { | |
3108 box-shadow: none; | |
3109 &.overlay, &.overlay:hover { | |
3110 border-color: $selected_fg_color; | |
3111 } | |
3112 } | |
3113 | |
3114 // we need to re-set the shadow here since it get axed by the previous bit | |
3115 &:selected { box-shadow: $_colorswatch_shadow; } | |
3116 | |
3117 // base color corners rounding | |
3118 // to avoid the artifacts caused by rounded corner anti-aliasing the base color | |
3119 // sports a bigger radius. | |
3120 // nth-child is needed by the custom color strip. | |
3121 // The :not() madness is needed since actually the overlay is selectable by GtkColorSwatch > .overlay | |
3122 // and GtkColorSwatch.overlay, I know it's weird, but this is gtk+, not a browser. | |
3123 &.top { | |
3124 border-top-left-radius: $_colorswatch-radius + 1px; | |
3125 border-top-right-radius: $_colorswatch-radius + 1px; | |
3126 } | |
3127 &.bottom { | |
3128 border-bottom-left-radius: $_colorswatch-radius + 1px; | |
3129 border-bottom-right-radius: $_colorswatch-radius + 1px; | |
3130 } | |
3131 &.left, &:first-child:not(.overlay):not(.top) { | |
3132 border-top-left-radius: $_colorswatch-radius + 1px; | |
3133 border-bottom-left-radius: $_colorswatch-radius + 1px; | |
3134 } | |
3135 &.right, &:last-child:not(.overlay):not(.bottom) { | |
3136 border-top-right-radius: $_colorswatch-radius + 1px; | |
3137 border-bottom-right-radius: $_colorswatch-radius + 1px; | |
3138 } | |
3139 &:only-child:not(.overlay) { border-radius: $_colorswatch-radius + 1px; } | |
3140 | |
3141 // overlay corner rounding | |
3142 &.top > .overlay { | |
3143 border-top-left-radius: $_colorswatch-radius; | |
3144 border-top-right-radius: $_colorswatch-radius; | |
3145 } | |
3146 &.bottom > .overlay { | |
3147 border-bottom-left-radius: $_colorswatch-radius; | |
3148 border-bottom-right-radius: $_colorswatch-radius; | |
3149 } | |
3150 &:first-child:not(.top) > .overlay { | |
3151 border-top-left-radius: $_colorswatch-radius; | |
3152 border-bottom-left-radius: $_colorswatch-radius; | |
3153 } | |
3154 &:last-child:not(.bottom) > .overlay { | |
3155 border-top-right-radius: $_colorswatch-radius; | |
3156 border-bottom-right-radius: $_colorswatch-radius; | |
3157 } | |
3158 &:only-child > .overlay { border-radius: $_colorswatch-radius; } | |
3159 | |
3160 // hover effect | |
3161 &:hover, | |
3162 &:hover:selected { | |
3163 background-image: linear-gradient(135deg, transparentize(white, 0.3), | |
3164 transparentize(white, 1) 50%); | |
3165 box-shadow: inset 0 1px transparentize(white, 0.6), | |
3166 inset 0 -1px if($variant == 'light', transparentize(black, 0.9), transparentize(black, 0.6)); | |
3167 &.color-dark { // swatches with colors with luminosity lower than 50% get the color-dark class | |
3168 background-image: linear-gradient(135deg, transparentize(white, 0.5), | |
3169 transparentize(white, 1) 50%); | |
3170 } | |
3171 } | |
3172 &:backdrop, | |
3173 &:backdrop:selected | |
3174 &.color-dark:backdrop, | |
3175 &.color-dark:backdrop:selected { | |
3176 background-image: none; | |
3177 box-shadow: none; | |
3178 } | |
3179 | |
3180 // no hover effect for the colorswatch in the color editor | |
3181 GtkColorEditor & { | |
3182 border-radius: 3px; // same radius as the entry | |
3183 &:hover { | |
3184 background-image: none; | |
3185 box-shadow: inset 0 1px transparentize(black, 0.9), _widget_edge(); | |
3186 } | |
3187 &:backdrop { box-shadow: none; } | |
3188 } | |
3189 | |
3190 // indicator and keynav outline colors | |
3191 &.color-dark { | |
3192 color: white; | |
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
3193 outline-color: transparentize(black, 0.7); |
0 | 3194 &:backdrop { color: transparentize(white, 0.7); } |
3195 } | |
3196 &.color-light { | |
3197 color: black; | |
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
3198 outline-color: transparentize(white, 0.5); |
0 | 3199 &:backdrop { color: transparentize(black, 0.7); } |
3200 } | |
3201 | |
3202 // border color | |
3203 &.overlay, | |
3204 &.overlay:selected { | |
3205 border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color); | |
3206 &:hover { border-color: if($variant == 'light', transparentize(black, 0.5), black); } | |
3207 } | |
3208 | |
3209 // make the add color button looks like, well, a button | |
3210 &#add-color-button { | |
3211 border-style: solid; // the borders are drawn by the overlay for standard colorswatches to have them semi | |
3212 border-width: 1px; // translucent on the colored background, here it's not necessary so they need to be set | |
3213 @include button(normal); | |
3214 &:hover { @include button(hover); } | |
3215 &:backdrop { @include button(backdrop); } | |
3216 .overlay { @include button(undecorated); } // reset the overlay to not cover the button style underneat | |
3217 } | |
3218 } | |
3219 | |
3220 | |
3221 /******** | |
3222 * Misc * | |
3223 ********/ | |
3224 | |
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
3225 .scale-popup .button { // +/- buttons on GtkVolumeButton popup |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
3226 padding: 6px; |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
3227 &:hover { |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
3228 @extend %undecorated_button; |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
3229 background-color: transparentize($fg_color,0.9); |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
3230 border-radius: 5px; |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
3231 } |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
3232 &:backdrop, |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
3233 &:backdrop:hover, |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
3234 &:backdrop:insensitive { @extend %undecorated_button; } |
17
ca246bc0af4a
Update to GTK 3.18 and regenerate assets
IBBoard <dev@ibboard.co.uk>
parents:
0
diff
changeset
|
3235 } |
ca246bc0af4a
Update to GTK 3.18 and regenerate assets
IBBoard <dev@ibboard.co.uk>
parents:
0
diff
changeset
|
3236 |
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
3237 GtkVolumeButton.button { padding: 8px; } |
0 | 3238 |
3239 /********************** | |
3240 * Window Decorations * | |
3241 *********************/ | |
3242 | |
3243 .window-frame { | |
3244 border-radius: 7px 7px 0 0; | |
3245 // lamefun trick to get rounded borders regardless of CSD use | |
3246 border-width: 0px; | |
3247 | |
3248 // this needs to be transparent | |
3249 // see bug #722563 | |
3250 $_wm_border: if($variant=='light', transparentize(black, 0.77), transparentize($borders_color, 0.1)); | |
3251 $_wm_border_backdrop: if($variant=='light', transparentize(black, 0.82), transparentize($borders_color, 0.1)); | |
3252 | |
3253 box-shadow: 0 3px 9px 1px transparentize(black, 0.5), | |
3254 0 0 0 1px $_wm_border; //doing borders with box-shadow | |
3255 | |
3256 // FIXME rationalize window-frame shadows | |
3257 | |
3258 /* this is used for the resize cursor area */ | |
3259 margin: 10px; | |
3260 | |
3261 &:backdrop { | |
3262 box-shadow: 0 2px 6px 2px transparentize(black, 0.8), | |
3263 0 0 0 1px $_wm_border_backdrop; | |
3264 } | |
3265 &.tiled { | |
3266 border-radius: 0; | |
3267 } | |
3268 &.popup { | |
3269 box-shadow: none; | |
3270 } | |
3271 // server-side decorations as used by mutter | |
3272 &.ssd { | |
3273 box-shadow: 0 0 0 1px $_wm_border; //just doing borders, wm draws actual shadows | |
3274 } | |
3275 &.csd { | |
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
3276 .popup { |
0 | 3277 border-radius: 0; |
3278 box-shadow: 0 1px 2px transparentize(black, 0.8), | |
3279 0 0 0 1px transparentize($_wm_border,0.1); | |
3280 } | |
3281 &.tooltip { | |
3282 border-radius: 5px; | |
3283 box-shadow: none; | |
3284 } | |
3285 &.message-dialog { | |
3286 border-radius: 7px; | |
3287 box-shadow: 0 1px 2px transparentize(black, 0.8), | |
3288 0 0 0 1px transparentize($_wm_border,0.1); | |
3289 } | |
3290 } | |
3291 &.solid-csd { | |
3292 border-radius: 0; | |
3293 margin: 4px; | |
3294 background-color: $backdrop_bg_color; | |
3295 border: solid 1px $backdrop_borders_color; | |
3296 box-shadow: none; | |
3297 } | |
3298 } | |
3299 | |
3300 // Window Close button | |
3301 .header-bar .button.titlebutton, | |
3302 .titlebar .button.titlebutton { | |
3303 @extend .button; | |
3304 @extend .button.flat; | |
3305 @extend .image-button; | |
3306 @include _button_text_shadow; | |
3307 &:backdrop { icon-shadow: none; } | |
3308 } | |
3309 | |
3310 .header-bar.selection-mode .button.titlebutton, | |
3311 .titlebar.selection-mode .button.titlebutton { | |
3312 @include _button_text_shadow(white, $selected_bg_color); | |
3313 &:backdrop { icon-shadow: none; } | |
3314 } | |
3315 | |
3316 | |
3317 // catch all extend :) | |
3318 | |
3319 %selected_items { | |
3320 background-color: $selected_bg_color; | |
3321 color: $selected_fg_color; | |
3322 @if $variant == 'light' { | |
3323 outline-color: transparentize($selected_fg_color, 0.7); | |
3324 } | |
3325 &:backdrop { | |
3326 color: $backdrop_selected_fg_color; | |
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
3327 background-color: $backdrop_selected_bg_color; |
17
ca246bc0af4a
Update to GTK 3.18 and regenerate assets
IBBoard <dev@ibboard.co.uk>
parents:
0
diff
changeset
|
3328 } |
ca246bc0af4a
Update to GTK 3.18 and regenerate assets
IBBoard <dev@ibboard.co.uk>
parents:
0
diff
changeset
|
3329 } |
ca246bc0af4a
Update to GTK 3.18 and regenerate assets
IBBoard <dev@ibboard.co.uk>
parents:
0
diff
changeset
|
3330 |
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
3331 /* Decouple the font of context menus from their entry/textview */ |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
3332 .touch-selection, |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
3333 .context-menu { |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
3334 font: initial; |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
3335 } |
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
3336 |
17
ca246bc0af4a
Update to GTK 3.18 and regenerate assets
IBBoard <dev@ibboard.co.uk>
parents:
0
diff
changeset
|
3337 .monospace { |
ca246bc0af4a
Update to GTK 3.18 and regenerate assets
IBBoard <dev@ibboard.co.uk>
parents:
0
diff
changeset
|
3338 font: Monospace; |
ca246bc0af4a
Update to GTK 3.18 and regenerate assets
IBBoard <dev@ibboard.co.uk>
parents:
0
diff
changeset
|
3339 } |
ca246bc0af4a
Update to GTK 3.18 and regenerate assets
IBBoard <dev@ibboard.co.uk>
parents:
0
diff
changeset
|
3340 |
0 | 3341 // This is used by GtkScrolledWindow, when content is touch-dragged past boundaries. |
3342 // This draws a box on top of the content, the size changes programmatically. | |
3343 .overshoot { | |
3344 &.top { | |
3345 @include overshoot(top); | |
3346 &:backdrop { @include overshoot(top, backdrop); } | |
3347 } | |
3348 &.bottom { | |
3349 @include overshoot(bottom); | |
3350 &:backdrop { @include overshoot(bottom, backdrop); } | |
3351 } | |
3352 &.left { | |
3353 @include overshoot(left); | |
3354 &:backdrop { @include overshoot(left, backdrop); } | |
3355 } | |
3356 &.right { | |
3357 @include overshoot(right); | |
3358 &:backdrop { @include overshoot(right, backdrop); } | |
3359 } | |
3360 } | |
3361 | |
3362 // Overflow indication, works similarly to the overshoot, the size if fixed tho. | |
3363 .undershoot { | |
3364 &.top { | |
3365 @include undershoot(top); | |
3366 } | |
3367 | |
3368 &.bottom { | |
3369 @include undershoot(bottom); | |
3370 } | |
3371 | |
3372 &.left { | |
3373 @include undershoot(left); | |
3374 } | |
3375 | |
3376 &.right { | |
3377 @include undershoot(right); | |
3378 } | |
3379 } |