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