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