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