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