_gnome.scss
ASCII text
1@use "sass:color"; 2@use "sass:math"; 3@use "../../../theme"; 4@use "../../../theme-color"; 5@use "../common"; 6@use "../drawing"; 7 8/** 9* Nautilus 10*/ 11 12// based css: 13// https://gitlab.gnome.org/GNOME/nautilus/blob/master/src/resources/css/Adwaita.css 14// hard-coded css: 15// https://gitlab.gnome.org/GNOME/nautilus/blob/master/src/resources/css/nautilus.css 16 17.nautilus-window, 18.nautilus-window notebook, 19.nautilus-window notebook > stack { 20// background-color: $surface-z0; 21} 22 23.nautilus-canvas-item { 24// border-radius: $corner-radius; 25} 26 27.nautilus-canvas-item.dim-label, 28.nautilus-list-dim-label { 29color: theme-color.hint(theme-color.$on-surface); 30} 31 32.nautilus-desktop.nautilus-canvas-item { 33@extend %iconview-desktop; 34} 35 36// Toolbar 37 38@keyframes nautilus-operations-button-needs-attention { 39to { 40background-color: theme-color.focus-overlay(theme-color.$on-titlebar); 41} 42} 43 44.nautilus-operations-button-needs-attention { 45animation: nautilus-operations-button-needs-attention theme.$ripple-fade-out-duration theme.$ease 2 alternate; 46} 47 48.nautilus-operations-button-needs-attention-multiple { 49animation: nautilus-operations-button-needs-attention theme.$ripple-fade-out-duration theme.$ease 6 alternate; 50} 51 52.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action):not(:only-child).disclosure-button { 53border-radius: theme.$circular-radius; 54} 55 56// Path bar 57 58.path-bar-box { 59transition: background-color theme.$duration theme.$ease-out; 60margin: theme.$container-padding 0; 61border-radius: theme.$corner-radius; 62 63// reset the margin 64button { 65margin: 0; 66} 67 68&.width-maximized { 69background-color: theme-color.entry-fill(theme-color.$on-titlebar); 70} 71 72// workaround for 3.30.1 73&.background.frame { 74border-style: none; 75background-color: theme-color.entry-fill(theme-color.$on-titlebar); 76} 77 78// for 3.30 79.path-bar button { 80label:not(:only-child) { 81&:first-child { 82margin-left: 0; 83} 84 85&:last-child { 86margin-right: 0; 87} 88} 89} 90 91// for 3.32 92.nautilus-path-bar button:not(.suggested-action):not(.destructive-action) { 93padding-left: (theme.$medium-size - 24px) / 2; 94padding-right: (theme.$medium-size - 24px) / 2; 95 96&.text-button { 97min-width: 0; 98} 99 100label:not(:only-child) { 101&:first-child { 102margin-left: 0; 103} 104 105&:last-child { 106margin-right: 0; 107} 108} 109 110&.text-button.image-button image:not(:only-child) { 111margin: 0; 112} 113 114&:last-child:dir(ltr), 115&:first-child:dir(rtl) { 116@extend %titlebar-button-checked; 117} 118} 119} 120 121// Floating status bar 122.nautilus-window .floating-bar { 123min-height: 32px; 124padding: 0; 125border-style: solid solid none; 126border-width: 1px; 127border-color: theme-color.divider(theme-color.$on-surface); 128border-radius: (theme.$corner-radius + 1px) (theme.$corner-radius + 1px) 0 0; 129background-clip: padding-box; 130background-color: theme-color.$surface-z8; 131 132// axes left border and border radius 133&.bottom.left { 134margin-right: 8px - 1px; 135border-left-style: none; 136border-top-left-radius: 0; 137} 138 139// axes right border and border radius 140&.bottom.right { 141margin-left: 8px - 1px; 142border-right-style: none; 143border-top-right-radius: 0; 144} 145 146button { 147margin: (32px - theme.$small-size) / 2; 148 149@extend %button-small; 150} 151} 152 153.disk-space-display { 154// border-style: solid; 155// border-width: 2px; 156 157&.unknown { 158background-color: theme-color.stroke(theme-color.$on-surface); 159color: theme-color.stroke(theme-color.$on-surface); 160} 161 162&.used { 163background-color: theme-color.$primary; 164color: theme-color.$primary; 165} 166 167&.free { 168background-color: theme-color.fill(theme-color.$on-surface); 169color: theme-color.fill(theme-color.$on-surface); 170} 171} 172 173// View 174 175// Hide superfluous treeview drop target indication 176.nautilus-list-view .view:not(.dnd) { 177// border-bottom: 1px solid divider($on-surface); 178} 179 180.nautilus-empty-state-icon + .large-title { 181@extend .title-1; 182color: theme-color.hint(theme-color.$on-surface); 183} 184 185.search-information { 186padding: 2px; 187border-bottom: 1px solid theme-color.divider(theme-color.$on-surface); 188} 189 190.documents-entry-tag { 191@extend .entry-tag; 192} 193 194.conflict-row:not(:selected) { 195background-color: color.mix(theme-color.$warning, theme-color.$surface-z1, math.percentage(.3)); 196} 197 198// Icon view 199.nautilus-window flowboxchild { 200.icon-background { 201// background-color: black; 202} 203 204.icon-item-background { 205padding: 4px; 206border-radius: theme.$corner-radius; 207} 208 209&:selected { 210background-color: transparent; 211 212.icon-item-background { 213background-color: theme-color.$selected-overlay; 214} 215} 216} 217 218// Batch rename dialog 219dialog.background > box.dialog-vbox.vertical > grid.horizontal { 220> scrolledwindow.frame { 221border-style: none; 222} 223 224> box.horizontal:last-child { 225margin: -6px 0 0 -6px; 226border-top: 1px solid theme-color.divider(theme-color.$on-surface); 227 228> label { 229margin: 0 8px; 230} 231 232> box > button { 233border-radius: 0; 234} 235} 236} 237 238// Tweak to fix the messy sizing of the popover menu 239.nautilus-window > popover.menu:not(:last-child) { 240padding: 3px; 241 242> stack > box > box > box { 243margin-top: -6px; 244 245> box { 246margin-bottom: -6px; 247 248&.linked { 249margin-top: 1px; 250} 251} 252} 253 254separator { 255margin-bottom: -2px; 256} 257} 258 259.nautilus-menu-sort-heading { 260// min-height: 26px; 261// padding-left: 5px; 262// padding-right: 5px; 263margin: 1px 3px; 264font-weight: 500; 265 266&:disabled { 267color: theme-color.hint(theme-color.$on-surface); 268} 269} 270 271// Make operations button circular 272.nautilus-window headerbar revealer > button { 273border-radius: theme.$circular-radius; 274} 275 276// Ensure paned separator rendering. See issue #84 for details. 277.nautilus-window paned > separator { 278background-color: theme-color.$surface-z0; 279} 280 281 282/** 283* gedit 284*/ 285 286// based css: 287// https://gitlab.gnome.org/GNOME/gedit/blob/master/gedit/resources/css/gedit.adwaita.css 288// hard-coded css: 289// https://gitlab.gnome.org/GNOME/gedit/blob/master/gedit/resources/css/gedit-style.css 290 291// Only normal state is handle 292.open-document-selector-name-label { 293// font-weight: bold; 294} 295 296// Only normal state is handle 297.open-document-selector-path-label { 298color: theme-color.hint(theme-color.$on-surface); 299font-size: smaller; 300} 301 302// Only normal state is handle 303.open-document-selector-match { 304background-color: theme-color.$warning; 305color: theme-color.$on-warning; 306} 307 308.gedit-document-panel { 309// Try to look as the notebook tab close button 310row button.flat { 311margin-top: 8px; 312margin-bottom: 8px; 313 314@extend %button-small; 315} 316} 317 318.gedit-document-panel-group-row:not(:first-child) { 319border-top: 1px solid theme-color.divider(theme-color.$on-surface); 320} 321 322.gedit-side-panel-paned statusbar { 323border-top: 1px solid theme-color.divider(theme-color.$on-surface); 324} 325 326.gedit-search-slider { 327margin: 4px 4px 8px; 328 329.linked:not(.vertical) > entry { 330border-radius: theme.$corner-radius; 331@extend %entry_raised; 332 333.gedit-search-entry-occurrences-tag { 334all: unset; 335color: theme-color.hint(theme-color.$on-surface); 336} 337 338$buttons_width: theme.$small-size * 2 + theme.$container-padding * 3; 339 340&:dir(ltr) { 341margin-right: -$buttons_width; 342padding-right: $buttons_width; 343 344.gedit-search-entry-occurrences-tag { 345margin-left: theme.$container-padding; 346} 347 348image.right { 349margin-right: 0; 350} 351} 352 353&:dir(rtl) { 354margin-left: -$buttons_width; 355padding-left: $buttons_width; 356 357.gedit-search-entry-occurrences-tag { 358margin-right: theme.$container-padding; 359} 360 361image.left { 362margin-left: 0; 363} 364} 365 366&:not(.error) { 367background-color: theme-color.$surface-z8; 368} 369 370&.error ~ button { 371color: theme-color.hint(theme-color.$on-error); 372@include drawing.ink-color(theme-color.$on-error, $button-style: "flat"); 373 374&:disabled { 375color: theme-color.disabled-hint(theme-color.$on-error); 376} 377} 378} 379 380.linked:not(.vertical) > button { 381border: solid theme.$container-padding transparent; 382border-radius: theme.$circular-radius; 383background-clip: padding-box; 384 385@extend %button-flat-basic; 386@extend %button-small; 387 388&:last-child:dir(ltr), 389&:not(:first-child):dir(rtl) { 390margin-left: -(theme.$container-padding) / 2; 391} 392 393&:first-child:dir(rtl), 394&:not(:last-child):dir(ltr) { 395margin-right: -(theme.$container-padding) / 2; 396} 397} 398} 399 400frame.gedit-map-frame > border { 401&:dir(ltr) { 402border-style: none none none solid; 403} 404 405&:dir(rtl) { 406border-style: none solid none none; 407} 408} 409 410/** 411* Tweaks 412*/ 413 414// hard-coded css: 415// https://gitlab.gnome.org/GNOME/gnome-tweaks/blob/master/data/shell.css 416 417// the sidebar 418.tweak-categories { 419// padding: 4px 0; 420// background-color: shade(@theme_bg_color, 0.99); 421background-image: image(theme-color.$surface-z0); 422 423separator { 424@extend %hide_separators; 425} 426} 427 428.tweak { 429// padding-top: 3px; 430padding: 3px; 431 432&.title:hover { 433box-shadow: none; 434} 435} 436 437.tweak-group-white, 438.tweak-white, 439.tweak-white:hover { 440// background-color: white; 441background-image: image(theme-color.$surface-z1); 442} 443 444.tweak-startup, 445.tweak-startup:hover { 446// background-color: lighter(shade(@theme_bg_color, 0.9)); 447background-image: image(theme-color.$surface-z1); 448} 449 450.tweak-group-startup { 451border: 1px solid theme-color.divider(theme-color.$on-surface); 452background-clip: padding-box; 453// background-color: @view_separators; 454background-image: image(theme-color.$surface-z1); 455} 456 457// 458// Workaround for 3.26 459// 460 461row#Focus, 462row#ClickMethod, 463row#StaticWorkspaceTweak, // for 3.26.0 464row#dynamic-workspaces, 465row#PrimaryWorkspaceTweak, // for 3.26.0 466row#workspaces-only-on-primary { 467padding: 0; 468border: 1px solid theme-color.divider(theme-color.$on-surface); 469background-clip: padding-box; 470background-image: image(theme-color.$surface-z1); 471 472row:not(:last-child) { 473border-bottom: 1px solid theme-color.divider(theme-color.$on-surface); 474} 475 476&.tweak > list { 477margin-top: -3px; 478} 479} 480 481// Add more spaces between title and list 482row#Focus, 483row#ClickMethod, 484row#PrimaryWorkspaceTweak, // for 3.26.0 485row#workspaces-only-on-primary { 486margin-top: 4px; 487} 488 489// Workaround for gnome-tweaks >= 3.34 490// See https://github.com/nana-4/materia-theme/issues/432 491leaflet.titlebar > .titlebar.tweak-titlebar-left, 492leaflet.titlebar > .titlebar.tweak-titlebar-right, 493hdyleaflet.titlebar > .titlebar.tweak-titlebar-left, 494hdyleaflet.titlebar > .titlebar.tweak-titlebar-right { 495background-color: inherit; 496box-shadow: inherit; 497// Remove only background-color transition. 498// This shouldn't be necessary, but otherwise it gets lag... 499transition: color theme.$duration theme.$ease-out; 500 501+ separator { 502background-color: inherit; 503background-image: image(theme-color.divider(theme-color.$on-titlebar)); 504} 505} 506 507/** 508* Builder 509*/ 510 511// based css for 3.22: 512// https://gitlab.gnome.org/GNOME/gnome-builder/tree/gnome-builder-3-22/data/theme 513// based css for 3.24: 514// https://gitlab.gnome.org/GNOME/gnome-builder/tree/gnome-builder-3-24/data/theme 515// based css for 3.26: 516// https://gitlab.gnome.org/GNOME/gnome-builder/tree/gnome-builder-3-26/data/themes 517 518// Layout tab and tab bar tweaks 519// The following makes the layout stack header look similar to a tab bar. 520layouttabbar { 521border-bottom: 1px solid theme-color.divider(theme-color.$on-surface); 522background-color: theme-color.$surface-z0; 523 524button { 525@extend %button-flat-activatable; 526} 527 528> box > button { 529margin: (40px - theme.$medium-size) / 2 0; 530// border-radius: 0; 531} 532} 533 534layouttab { 535margin: 0 8px; // not working 536border-style: none solid; 537border-width: 1px; 538border-color: theme-color.divider(theme-color.$on-surface); 539box-shadow: inset 0 -2px theme-color.$primary; 540background-color: theme-color.$surface-z1; 541 542separator.vertical { 543margin: 8px 4px; 544} 545 546button { 547&, 548&.text-button, 549&.image-button { 550margin-top: 8px; 551margin-bottom: 8px; 552padding: 0 4px; 553} 554} 555 556// Close button styling for layouttab. 557> box > button.close { 558// border-radius: $circular-radius; 559} 560} 561 562layout { 563border: 1px solid theme-color.divider(theme-color.$on-surface); 564-PnlDockBin-handle-size: 1; 565} 566 567entry.search-missing { 568background-color: theme-color.$error; 569color: theme-color.$on-error; 570} 571 572// tweak icons for treeviews 573window.workbench treeview.image { 574color: theme-color.hint(theme-color.$on-surface); 575} 576 577popover.popover-selector list { 578padding: 8px - 2px; 579 580row { 581border-radius: theme.$corner-radius; 582 583image { 584&:dir(ltr) { 585margin-right: 6px; 586} 587 588&:dir(rtl) { 589margin-left: 6px; 590} 591} 592 593.accel { 594&:dir(ltr) { 595margin-left: 6px; 596} 597 598&:dir(rtl) { 599margin-right: 6px; 600} 601} 602} 603} 604 605omnibar { 606&.linked:not(.vertical) entry { 607border-radius: theme.$corner-radius; 608} 609 610entry { 611color: theme-color.hint(theme-color.$on-surface); 612} 613} 614 615popover.omnibar list row:not(:last-child) { 616border-bottom: 1px solid theme-color.divider(theme-color.$on-surface); 617} 618 619entry.preferences-search { 620border-bottom: 1px solid theme-color.divider(theme-color.$on-surface); 621box-shadow: none; 622background-color: transparent; 623 624// doesn't work properly 625&:dir(ltr) { 626// border-right: 1px solid divider($on-surface); 627} 628 629&:dir(rtl) { 630// border-left: 1px solid divider($on-surface); 631} 632} 633 634preferences stacksidebar.sidebar { 635list { 636// background-color: $surface-z0; 637} 638 639&:dir(ltr), 640&:dir(rtl) { 641list { 642border-style: none; 643} 644} 645 646list separator { 647@extend %hide_separators; 648} 649} 650 651preferences > box > box { 652&:dir(ltr) { 653border-right: 1px solid theme-color.divider(theme-color.$on-surface); 654} 655 656&:dir(rtl) { 657border-left: 1px solid theme-color.divider(theme-color.$on-surface); 658} 659} 660 661popover.messagepopover { 662&.background { 663padding: 0; 664} 665 666.popover-action-area button { 667@extend %button-flat-basic; 668 669padding: 8px 16px; 670border-top: 1px solid theme-color.divider(theme-color.$on-surface); 671border-radius: 0; 672 673&:first-child { 674border-bottom-left-radius: theme.$corner-radius; 675} 676 677&:last-child { 678border-bottom-right-radius: theme.$corner-radius; 679} 680} 681 682.popover-content-area { 683margin: 16px; 684} 685} 686 687popover.transfers list { 688background-color: transparent; 689 690row:not(:first-child) { 691border-top: 1px solid theme-color.divider(theme-color.$on-surface); 692} 693 694row > box { 695padding: 10px; 696} 697} 698 699dockbin { 700border: 1px solid theme-color.divider(theme-color.$on-surface); 701-PnlDockBin-handle-size: 1; 702} 703 704dockpaned { 705border: 1px solid theme-color.divider(theme-color.$on-surface); 706} 707 708eggsearchbar box.search-bar { 709padding: 0 8px; 710border-bottom: 1px solid theme-color.divider(theme-color.$on-surface); 711background-color: theme-color.$surface-z0; 712} 713 714docktabstrip { 715padding: 0 8px; 716border-bottom: 1px solid theme-color.divider(theme-color.$on-surface); 717background-color: theme-color.$surface-z0; 718} 719 720docktab { 721transition: theme.$transition, 722background-size 0ms, 723background-image 0ms; 724min-height: theme.$small-size; 725min-width: theme.$small-size; 726margin-bottom: -1px; 727padding: theme.$container-padding 6px; 728 729border-width: 1px; // for reorderable tabs 730border-color: transparent; // 731 732box-shadow: inset 0 -2px transparent; 733background-image: radial-gradient(circle, theme-color.$primary 10%, transparent 0%); 734background-repeat: no-repeat; 735background-position: center; 736background-size: 0% 0%; 737 738color: theme-color.hint(theme-color.$on-surface); 739font-weight: 500; 740 741&:hover { 742background-color: theme-color.hover-overlay(theme-color.$on-surface); 743} 744 745&:checked { 746transition: theme.$transition, 747background-size theme.$ripple-fade-in-duration theme.$ease-out, 748background-image theme.$ripple-fade-in-duration + theme.$ripple-fade-out-duration theme.$ease-out; 749box-shadow: inset 0 -2px theme-color.$primary; 750background-color: transparent; 751background-image: radial-gradient(circle, transparent 10%, transparent 0%); 752background-size: 1000% 1000%; 753color: theme-color.$on-surface; 754} 755} 756 757dockoverlayedge { 758background-color: theme-color.$surface-z0; 759 760docktabstrip { 761padding: 0; 762border: none; 763} 764 765&.left-edge docktab:checked { 766box-shadow: inset -2px 0 theme-color.$primary; 767} 768 769&.right-edge docktab:checked { 770box-shadow: inset 2px 0 theme-color.$primary; 771} 772} 773 774pillbox { 775background-color: theme-color.$surface-z0; 776border-radius: theme.$corner-radius; 777} 778 779buildperspective row { 780// padding: 10px; 781} 782 783layoutpane entry.search { 784border-bottom: 1px solid theme-color.divider(theme-color.$on-surface); 785box-shadow: none; 786background-color: theme-color.$surface-z1; 787} 788 789editortweak entry.search { 790margin-bottom: -1px; 791box-shadow: none; 792background-color: transparent; 793} 794 795// 796// let's tweak hard-coded elements 797// 798 799.gb-search-entry-occurrences-tag { 800box-shadow: none; 801background-color: transparent; 802} 803 804// Keep search bar and layouttab height in sync. 805// layouttabbar > box, 806// eggsearchbar > revealer > box, 807docktabstrip { 808min-height: 39px; 809} 810 811eggsearchbar entry { 812// min-height: 24px; 813} 814 815window.workbench preferences preferencesgroup list entry { 816// background: none; 817// min-height: 0px; 818padding-top: 8px; 819padding-bottom: 8px; 820} 821 822button.run-arrow-button { 823// min-width: 12px; 824padding-left: (theme.$medium-size - 16px) / 2; 825padding-right: (theme.$medium-size - 16px) / 2; 826} 827 828// 829// Additional styles for 3.26 830// 831 832button.dzlmenubutton image { 833min-width: theme.$medium-size - 6px; 834 835&.arrow { 836min-width: theme.$medium-size - 9px; 837} 838} 839 840button.dzlmenubuttonitem { 841color: theme-color.$on-surface; 842font-weight: normal; 843 844&:disabled { 845color: theme-color.disabled(theme-color.$on-surface); 846} 847} 848 849idelayoutstackheader { 850border-bottom: 1px solid theme-color.divider(theme-color.$on-surface); 851 852button:checked { 853color: theme-color.$on-surface; 854} 855} 856 857// utilities stack switcher 858ideeditorutilities > dzldockpaned > box > stackswitcher { 859padding: 8px 0; 860background-color: theme-color.$surface-z0; 861 862&:dir(ltr) { 863border-right: 1px solid theme-color.divider(theme-color.$on-surface); 864} 865 866&:dir(rtl) { 867border-left: 1px solid theme-color.divider(theme-color.$on-surface); 868} 869 870button { 871border-radius: 0; 872box-shadow: none; 873background-color: transparent; 874 875&:active { 876background-image: radial-gradient(circle, rgba(theme-color.$primary, .7) 10%, transparent 0%); 877} 878 879&:checked { 880background-color: transparent; 881color: theme-color.$on-surface; 882} 883 884&:dir(ltr) { 885margin-right: -1px; 886 887&:checked { 888box-shadow: inset -2px 0 theme-color.$primary; 889} 890} 891 892&:dir(rtl) { 893margin-left: -1px; 894 895&:checked { 896box-shadow: inset 2px 0 theme-color.$primary; 897} 898} 899} 900} 901 902// buildui panel 903ideeditorsidebar notebook header { 904background: transparent; 905} 906 907popover.messagepopover { 908// padding: 0; 909 910list { 911border: 1px solid theme-color.divider(theme-color.$on-surface); 912background-clip: padding-box; 913 914row:not(:last-child) { 915border-bottom: 1px solid theme-color.divider(theme-color.$on-surface); 916} 917} 918} 919 920// Workaround for hard-coded .title color 921dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > list > row:selected { 922.title { 923// color: @theme_selected_fg_color; 924} 925 926background-color: theme-color.$primary; 927color: theme-color.$on-primary; 928} 929 930// Workaround for hard-coded button background 931#titlebar_container .suggestionbutton button { 932// background-color: @content_view_bg; 933// background-image: none; 934 935padding: 0; 936border-radius: 0; 937box-shadow: inset 0 0 0 9999px theme-color.$titlebar; 938 939&:backdrop { 940box-shadow: inset 0 0 0 9999px theme-color.$titlebar-backdrop; 941} 942 943// For some reason background-image doesn't work well with transition :( 944image { 945transition: 946box-shadow theme.$duration theme.$ease-out, 947background-color theme.$ripple-fade-in-duration theme.$ease-out; 948min-width: theme.$medium-size; 949min-height: theme.$medium-size; 950border-radius: theme.$circular-radius; 951box-shadow: inset 0 0 0 9999px transparent; 952} 953 954&:hover image { 955box-shadow: inset 0 0 0 9999px theme-color.hover-overlay(theme-color.$on-titlebar); 956} 957 958&:focus image { 959box-shadow: inset 0 0 0 9999px theme-color.focus-overlay(theme-color.$on-titlebar); 960} 961 962&:active image { 963background-color: theme-color.pressed-overlay(theme-color.$on-titlebar); 964} 965} 966 967/** 968* Photos 969*/ 970 971// based css: 972// https://gitlab.gnome.org/GNOME/gnome-photos/blob/master/data/Adwaita.css 973 974GdMainIconView.content-view { 975-GdMainIconView-icon-size: 48; 976 977// Make spinner visible on both dark and bright backgrounds w/o making 978// it look ugly/weird. 979&.cell:active { 980// color: disabled($on-surface); 981} 982} 983 984.documents-counter { 985margin: 8px; 986border-radius: theme.$circular-radius; 987box-shadow: theme.$shadow-z4; 988background-color: theme-color.$primary; 989color: theme-color.$on-primary; 990font-weight: bold; 991} 992 993.photos-entry-tag { 994@extend .entry-tag; 995} 996 997.documents-scrolledwin.frame { 998border-style: none; 999background-color: transparent; 1000 1001frame.content-view > border { 1002border-style: none; 1003background-color: transparent; 1004} 1005} 1006 1007.photos-icon-bg { 1008} 1009 1010.photos-fade-in { 1011opacity: 1; 1012transition: opacity theme.$duration theme.$ease-out; 1013} 1014 1015.photos-fade-out { 1016opacity: 0; 1017transition: opacity theme.$duration theme.$ease-out; 1018} 1019 1020.photos-collection-icon { 1021} 1022 1023button.photos-filter-preview { 1024color: theme-color.$on-surface; 1025font-weight: normal; 1026 1027&:checked { 1028background-color: theme-color.$selected-overlay; 1029color: theme-color.$on-surface; 1030 1031image { 1032color: theme-color.$on-dark; 1033-gtk-icon-shadow: theme.$text-shadow; 1034} 1035} 1036} 1037 1038overlay grid.horizontal > revealer > scrolledwindow.frame { 1039border-style: none; 1040background-color: transparent; 1041 1042&:dir(ltr) { 1043border-left-style: solid; 1044} 1045 1046&:dir(rtl) { 1047border-right-style: solid; 1048} 1049} 1050 1051/** 1052* Music 1053*/ 1054 1055// hard-coded css: 1056// https://gitlab.gnome.org/GNOME/gnome-music/blob/master/data/application.css 1057 1058.side-panel:dir(ltr) { 1059// border-width: 0 1px 0 0; 1060border-style: solid; 1061border-color: theme-color.divider(theme-color.$on-surface); 1062} 1063 1064.side-panel:dir(rtl) { 1065// border-width: 0 0 0 1px; 1066border-style: solid; 1067border-color: theme-color.divider(theme-color.$on-surface); 1068} 1069 1070.side-panel .view { 1071// background-color: mix(@theme_fg_color, @theme_bg_color, 0.9); 1072background-image: image(theme-color.$surface-z0); 1073 1074&:hover { 1075background-image: image(theme-color.hover-overlay(theme-color.$on-surface, $on: theme-color.$surface-z0)); 1076} 1077} 1078 1079.side-panel .view:selected { 1080// background-color: mix(@theme_fg_color, @theme_bg_color, 0.5); 1081background-image: image(theme-color.$primary); 1082 1083&:hover { 1084background-image: image(theme-color.hover-overlay(theme-color.$on-primary, $on: theme-color.$primary)); 1085} 1086} 1087 1088.songs-list { 1089// box-shadow: inset 0 -1px shade(@borders, 1.30); 1090// background-color: @theme_bg_color; 1091 1092&:hover { 1093background-image: image(theme-color.hover-overlay(theme-color.$on-surface)); 1094} 1095} 1096 1097frame.documents-dropdown { 1098@extend %toolbar-osd; 1099 1100margin: 8px; 1101 1102> border { 1103border: none; 1104} 1105} 1106 1107box.vertical > revealer > toolbar.search-bar { 1108border-bottom: 1px solid theme-color.divider(theme-color.$on-surface); 1109 1110button > widget { 1111-gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); 1112// -GtkArrow-arrow-scaling: 1; 1113} 1114} 1115 1116/** 1117* Terminal 1118*/ 1119 1120terminal-window notebook > header > box { 1121// Remove hard-coded margin around button(s) 1122margin: -2px; 1123 1124button { 1125border-radius: 0; 1126} 1127} 1128 1129/** 1130* To Do 1131*/ 1132 1133// less than 3.28 1134task-list-view { 1135taskrow { 1136transition: theme.$transition; 1137margin: 0 -8px; 1138 1139&:hover { 1140transition: none; 1141} 1142 1143label { 1144margin: 0 8px; 1145} 1146 1147image.dim-label { 1148min-width: 16px; 1149} 1150} 1151 1152> box > revealer > box > button { 1153margin: (12px * 2 - theme.$medium-size) / 2; 1154 1155.dim-label { 1156color: inherit; 1157} 1158} 1159} 1160 1161// 3.28 or later 1162tasklistview { 1163taskrow { 1164outline: none; 1165 1166entry { 1167&, 1168&:focus, 1169&:disabled { 1170box-shadow: none; 1171} 1172} 1173 1174image.dim-label { 1175min-width: 16px; 1176} 1177} 1178 1179> box > revealer > box > button { 1180margin: (12px * 2 - theme.$medium-size) / 2; 1181 1182.dim-label { 1183color: inherit; 1184} 1185} 1186} 1187 1188/** 1189* eog 1190*/ 1191 1192#eog-thumb-nav { 1193scrolledwindow.frame { 1194border-top: none; 1195} 1196} 1197 1198/** 1199* Evolution 1200*/ 1201 1202frame.taskbar > border { 1203border-style: solid none none; 1204} 1205 1206box.vertical > paned.horizontal notebook widget .frame { 1207border-style: none; 1208} 1209 1210/** 1211* gitg 1212*/ 1213 1214frame.commit-frame > border { 1215border-style: solid none none; 1216} 1217 1218/** 1219* Characters 1220*/ 1221 1222box.dialog-vbox scrolledwindow.related { 1223border: 1px solid theme-color.divider(theme-color.$on-surface); 1224background-clip: padding-box; 1225background-color: theme-color.$surface-z1; 1226} 1227 1228list.categories { 1229background-image: image(theme-color.$surface-z0); 1230} 1231 1232/** 1233* Boxes 1234*/ 1235 1236.transparent-bg + stack overlay > label { 1237min-height: 24px; 1238padding: 0 4px; 1239border-radius: theme.$corner-radius; 1240background-color: theme-color.$scrim; 1241color: theme-color.$on-scrim; 1242} 1243 1244/** 1245* Evince 1246*/ 1247 1248// Color is needed for Evince to match hardcoded background-color, 1249// since Documents app is also uses this style, background-color needs to be set accordingly. 1250evview.content-view.view:selected { 1251background-color: theme-color.$primary; 1252color: theme-color.$on-primary; 1253} 1254 1255/** 1256* Polari 1257*/ 1258 1259// hard-coded css: 1260// https://gitlab.gnome.org/GNOME/polari/blob/master/data/resources/application.css 1261 1262// background-color is needed to match hard-coded row colors. 1263// Just $primary is too harsh for activated rows, so add transparency. 1264.polari-room-list row:selected { 1265background-color: rgba(theme-color.$primary, .5); 1266} 1267 1268/** 1269* Fractal 1270*/ 1271 1272.message-input-area button { 1273@extend %button-flat-activatable; 1274} 1275 1276// To display the drop shadow 1277button.osd.scroll_button { 1278margin: 4px; 1279} 1280 1281/** 1282* Mines 1283*/ 1284 1285grid.minefield > button.tile { 1286border-style: solid; 1287} 1288