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