_apps.scss
ASCII text
1/************ 2* Nautilus * 3************/ 4// based css: 5// https://git.gnome.org/browse/nautilus/tree/src/resources/css/Adwaita.css 6// hard-coded css: 7// https://git.gnome.org/browse/nautilus/tree/src/resources/css/nautilus.css 8 9.nautilus-window, 10.nautilus-window notebook, 11.nautilus-window notebook > stack { 12background: $base_color; 13} 14 15.nautilus-canvas-item { 16// border-radius: $md_radius; 17} 18 19.nautilus-canvas-item.dim-label, 20.nautilus-list-dim-label { 21// @extend .dim-label; 22} 23 24.nautilus-desktop.nautilus-canvas-item { 25// background-color: scale-alpha(#000000, $lower_opacity); 26color: $inversed_fg_color; 27text-shadow: $z-depth-1; 28} 29 30.nautilus-desktop.nautilus-canvas-item:selected { 31// color: $inversed_fg_color; 32text-shadow: none; 33} 34 35// Toolbar 36@keyframes needs_attention_keyframes { 37from { background-color: transparent; } 38to { background-color: $track_color; } 39} 40 41.nautilus-operations-button-needs-attention { 42color: $accent_color; 43animation: needs_attention_keyframes $longer_duration $standard_curve 2 alternate; 44} 45 46.nautilus-operations-button-needs-attention-multiple { 47color: $accent_color; 48animation: needs_attention_keyframes $longer_duration $standard_curve 4 alternate; 49} 50 51// Floating status bar 52.nautilus-window .floating-bar { 53@extend %osd; 54 55// @extend .toolbar.osd; 56 57min-height: 32px; 58padding: 0; 59border-style: solid solid none; 60border-width: 1px; 61border-color: $borders_color; 62border-radius: (2px + 1px) (2px + 1px) 0 0; 63background-color: $base_color; 64background-clip: $extra_background_clip; 65transition: $longer_transition, border-width 0; 66 67&.bottom.left { // axes left border and border radius 68margin-right: 8px - 1px; 69border-left-style: none; 70border-top-left-radius: 0; 71} 72 73&.bottom.right { // axes right border and border radius 74margin-left: 8px - 1px; 75border-right-style: none; 76border-top-right-radius: 0; 77} 78 79button { 80margin: (32px - $small_size) / 2; 81 82@extend %small_button; 83} 84} 85 86.disk-space-display { 87// border-style: solid; 88// border-width: 2px; 89} 90 91.disk-space-display.unknown { 92background-color: $warning_color; 93} 94 95.disk-space-display.used { 96background-color: $primary_color; 97} 98 99.disk-space-display.free { 100background-color: $track_color; 101color: $disabled_fg_color; 102} 103 104// View 105.nautilus-list-view .view { 106// border-bottom: 1px solid $borders_color; 107} 108 109// Hide superfluous treeview drop target indication 110.nautilus-list-view .view.dnd { 111// border-style: none; 112} 113 114// Libgd tag entries in the search. Sadly it requires this copy pasted css style. 115// https://git.gnome.org/browse/libgd/tree/libgd/gd-tagged-entry-default.css 116.documents-entry-tag { 117// min-height: 24px; 118margin: 3px -2px 3px 8px; 119padding: 0 8px; 120border-radius: $circular_radius; 121box-shadow: none; 122background-color: $primary_color; 123color: $inversed_fg_color; 124 125&:hover { box-shadow: $z-depth-1; } 126} 127 128.documents-entry-tag.button { 129// @extend %simple_flat_button; 130 131// min-height: 24px; 132// min-width: 24px; 133margin: 0 -2px; 134padding: 4px; 135border-radius: $circular_radius; 136box-shadow: none; 137color: $secondary_inversed_fg_color; 138 139&:hover, &:active { color: $inversed_fg_color; } 140} 141 142// Workaround for the double border of the searchbar since we use a revealer which 143// always allocates at least 1 pixel 144.nautilus-window searchbar { border-top: 1px solid $borders_color; } 145 146.nautilus-window .searchbar-container { margin-top: -1px; } 147 148.nautilus-window headerbar > revealer > button { @extend %circular_button; } 149 150 151/********* 152* gedit * 153*********/ 154// based css: 155// https://git.gnome.org/browse/gedit/tree/gedit/resources/css/gedit.adwaita.css 156// hard-coded css: 157// https://git.gnome.org/browse/gedit/tree/gedit/resources/css/gedit-style.css 158 159// Only normal state is handle 160.open-document-selector-name-label { 161font-weight: bold; 162} 163 164// Only normal state is handle 165.open-document-selector-path-label { 166color: gtkalpha(currentColor, $hint_opacity); 167font-size: smaller; 168 169// @extend .dim-label; 170} 171 172.gedit-document-panel { 173background-color: $lighter_bg_color; 174} 175 176.gedit-document-panel-group-row { 177border-top: 1px solid $borders_color; 178} 179 180.gedit-document-panel-group-row:first-child { 181border-top: none; 182} 183 184// Try to look as the notebook tab close button 185.gedit-document-panel row button.flat { 186margin-top: 8px; 187margin-bottom: 8px; 188 189@extend %small_button; 190} 191 192.gedit-side-panel-paned statusbar { 193border-top: 1px solid $borders_color; 194} 195 196.gedit-search-slider { 197margin: 4px 4px 8px; 198 199.gedit-search-entry-occurrences-tag { 200all: unset; 201padding: 0 4px; 202color: gtkalpha(currentColor, $hint_opacity); 203} 204 205entry { 206&:dir(ltr) { 207margin-right: -$medium_size * 2; 208padding-right: $medium_size * 2 + 8px; 209 210.gedit-search-entry-occurrences-tag { margin-right: -8px; } 211} 212 213&:dir(rtl) { 214margin-left: -$medium_size * 2; 215padding-left: $medium_size * 2 + 8px; 216 217.gedit-search-entry-occurrences-tag { margin-left: -8px; } 218} 219 220&.error ~ button { 221color: $secondary_inversed_fg_color; 222 223&:hover, &:active { color: $inversed_fg_color; } 224 225&:disabled { color: $disabled_secondary_inversed_fg_color; } 226} 227} 228 229button { 230@extend %simple_flat_button; 231 232&:dir(ltr), 233&:dir(rtl) { @extend %linked; } 234} 235} 236 237// Yeah this is ugly 238.gedit-search-slider .linked:not(.vertical) > entry, 239notebook > stack:not(:only-child) revealer .gedit-search-slider .linked:not(.vertical) > entry { 240border-radius: 2px; 241} 242 243frame.gedit-map-frame > border { 244&:dir(ltr) { border-style: none none none solid; } 245&:dir(rtl) { border-style: none solid none none; } 246} 247 248 249/************** 250* Tweak Tool * 251**************/ 252// hard-coded css: 253// https://git.gnome.org/browse/gnome-tweak-tool/tree/data/shell.css 254 255// the sidebar 256.tweak-categories { 257// padding: 4px 0; 258// background-color: shade(@theme_bg_color, 0.99); 259background-image: image($lighter_bg_color); 260 261// hide separators 262separator { 263min-width: 0; 264min-height: 0; 265background: transparent; 266} 267} 268 269.tweak { 270padding: 3px; 271// padding-top: 3px; 272 273&.title:hover { box-shadow: none; } 274} 275 276.tweak-group-white, 277.tweak-white, 278.tweak-white:hover { 279// background-color: white; 280background-image: image($base_color); 281} 282 283.tweak-startup, 284.tweak-startup:hover { 285// background-color: lighter(shade(@theme_bg_color, 0.9)); 286background-image: image($base_color); 287} 288 289.tweak-group-startup { 290// background-color: @view_separators; 291background-image: image($base_color); 292border: 1px solid $borders_color; 293} 294 295 296/*********** 297* Builder * 298***********/ 299// based css: 300// https://git.gnome.org/browse/gnome-builder/tree/data/theme 301// hard-coded css: 302// https://git.gnome.org/browse/gnome-builder/tree/data/theme/shared.css 303 304// Titlebar adjustments for workbench 305// 306// This is needed due to our placement of headerbar inside of a 307// stack. We were seeing black edges around the header bar, and 308// improper radius on the headerbar. 309// 310workbench stack.titlebar { 311padding: 0; 312// box-shadow: none; 313} 314 315workbench:not(.tiled):not(.maximized):not(.fullscreen) stack.titlebar headerbar { 316border-radius: 2px 2px 0 0; 317// box-shadow: none; 318} 319 320perspectiveswitcher { 321background-color: $bg_color; 322} 323 324perspectiveswitcher button:checked { 325color: $primary_color; 326} 327 328// Layout tab and tab bar tweaks 329// The following makes the layout stack header look similar to a tab bar. 330layouttabbar { 331border-bottom: 1px solid $borders_color; 332background-color: $bg_color; 333} 334 335layouttabbar button { @extend %flat_button; } 336 337layouttabbar > box > button { 338margin: (40px - $medium_size) / 2 0; 339// border-radius: 0; 340} 341 342layouttab { 343margin: 0 8px; // not working 344border-style: none solid; 345border-width: 1px; 346border-color: $borders_color; 347box-shadow: inset 0 -2px $primary_color; 348background-color: $base_color; 349} 350 351layouttab separator.vertical { 352margin: 8px 4px; 353} 354 355layouttab button { 356&.text-button, &.image-button, & { 357margin-top: 8px; 358margin-bottom: 8px; 359padding: 0 4px; 360} 361} 362 363// Close button styling for layouttab. 364layouttab > box > button.close { 365border-radius: $circular_radius; 366} 367 368layout { 369border: 1px solid $borders_color; 370-PnlDockBin-handle-size: 1; 371} 372 373entry.search-missing { 374background-color: $error_color; 375color: $inversed_fg_color; 376} 377 378// tweak icons for treeviews 379workbench treeview.image { color: gtkalpha(currentColor, $hint_opacity); } 380workbench treeview.image:selected { color: $tertiary_inversed_fg_color; } 381 382dockbin { 383border: 1px solid $borders_color; 384-PnlDockBin-handle-size: 1; 385} 386 387dockpaned { 388border: 1px solid $borders_color; 389} 390 391eggsearchbar box.search-bar { 392padding: 0 8px; 393border-bottom: 1px solid $borders_color; 394background-color: $bg_color; 395} 396 397docktabstrip { 398padding: 0 8px; 399border-bottom: 1px solid $borders_color; 400background-color: $bg_color; 401} 402 403docktab { 404transition: $longer_transition; 405min-height: $small_size; 406min-width: $small_size; 407margin-bottom: -1px; 408padding: $container_padding 6px; 409 410outline-offset: -6px; 411 412border-width: 1px; // for reorderable tabs 413border-color: transparent; // 414 415color: $secondary_fg_color; 416font-weight: 500; 417 418&:hover { 419box-shadow: inset 0 -2px $track_color; 420color: $fg_color; 421} 422 423&:checked { 424animation: tab_ripple_effect $longer_duration * 3 $deceleration_curve; 425box-shadow: inset 0 -2px $primary_color; 426color: $fg_color; 427} 428} 429 430dockoverlayedge { 431background-color: $bg_color; 432} 433 434dockoverlayedge docktabstrip { 435padding: 0; 436border: none; 437} 438 439dockoverlayedge.left-edge docktab { 440&:hover { box-shadow: inset -2px 0 $track_color; } 441&:checked { box-shadow: inset -2px 0 $primary_color; } 442} 443 444dockoverlayedge.right-edge docktab { 445&:hover { box-shadow: inset 2px 0 $track_color; } 446&:checked { box-shadow: inset 2px 0 $primary_color; } 447} 448 449pillbox { 450background-color: $bg_color; 451border-radius: 2px; 452} 453 454buildperspective row { 455padding: 10px; 456} 457 458layoutpane entry.search { 459@extend %entry.flat; 460 461box-shadow: inset 0 -1px $borders_color; 462background-color: $base_color; 463} 464 465editortweak entry.search { 466@extend %entry.flat; 467 468margin-bottom: -1px; 469box-shadow: none; 470} 471 472// 473// let's tweak hard-coded elements 474// 475 476// styling for editor search 477frame.gb-search-frame { 478// border-bottom-left-radius: 5px; 479border-bottom-right-radius: 5px; 480} 481 482.gb-search-entry-occurrences-tag { 483box-shadow: none; 484background-color: transparent; 485} 486 487// Keep search bar and layouttab height in sync. 488docktabstrip { 489min-height: 39px; 490} 491 492layouttabbar > box { 493// min-height: 39px; 494} 495 496eggsearchbar > revealer > box { 497// min-height: 39px; 498} 499 500eggsearchbar entry { 501// min-height: 24px; 502} 503 504workbench preferences preferencesgroup list entry { 505// background: none; 506// min-height: 0px; 507padding-top: 8px; 508padding-bottom: 8px; 509} 510 511 512/********** 513* Photos * 514**********/ 515// based css: 516// https://git.gnome.org/browse/gnome-photos/tree/data/Adwaita.css 517 518GdMainIconView.content-view { 519-GdMainIconView-icon-size: 48; 520} 521 522// Make spinner visible on both dark and bright backgrounds w/o making 523// it look ugly/weird. 524GdMainIconView.content-view.cell:active { 525// color: $tertiary_fg_color; 526} 527 528.documents-counter { 529margin: 8px; 530border-radius: $circular_radius; 531box-shadow: $z-depth-2; 532background-color: $accent_color; 533color: $inversed_fg_color; 534font-weight: bold; 535} 536 537.photos-entry-tag { 538@extend .documents-entry-tag; 539} 540 541.documents-scrolledwin.frame { 542border-style: none; 543} 544 545.photos-icon-bg { 546} 547 548.photos-fade-in { 549opacity: 1; 550transition: opacity $shorter_duration $deceleration_curve; 551} 552 553.photos-fade-out { 554opacity: 0; 555transition: opacity $shorter_duration $deceleration_curve; 556} 557 558.photos-collection-icon { 559} 560 561overlay grid.horizontal > revealer > scrolledwindow.frame { 562&:dir(ltr) { border-style: none none none solid; } 563&:dir(rtl) { border-style: none solid none none; } 564} 565 566 567/********* 568* Music * 569*********/ 570// hard-coded css: 571// https://git.gnome.org/browse/gnome-music/tree/data/application.css 572 573.side-panel:dir(ltr) { 574// border-width: 0 1px 0 0; 575border-style: solid; 576border-color: $borders_color; 577} 578 579.side-panel:dir(rtl) { 580// border-width: 0 0 0 1px; 581border-style: solid; 582border-color: $borders_color; 583} 584 585.side-panel .view { 586// background-color: mix(@theme_fg_color, @theme_bg_color, 0.9); 587background-image: image($lighter_bg_color); 588 589&:hover { background-image: image(mix($fg_color, $lighter_bg_color, percentage(0.05))); } 590} 591 592.side-panel .view:selected { 593// background-color: mix(@theme_fg_color, @theme_bg_color, 0.5); 594background-image: image($primary_color); 595 596&:hover { background-image: image(mix($inversed_fg_color, $primary_color, percentage(0.05))); } 597} 598 599.playlists-list { 600// box-shadow: inset 0 -1px @view_separators; 601} 602 603.songs-list { 604// box-shadow: inset 0 1px shade(@borders, 1.30); 605// background-color: @theme_bg_color; 606 607&:hover { background-image: image(gtkalpha(currentColor, 0.05)); } 608} 609 610frame.documents-dropdown { 611@extend toolbar.osd; 612 613margin: 8px; 614 615> border { border: none; } 616} 617 618box.vertical:not(.titlebar) > revealer > toolbar.search-bar { 619border-bottom: 1px solid $borders_color; 620 621button > widget { 622-gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); 623// -GtkArrow-arrow-scaling: 1; 624} 625} 626 627 628/********* 629* To Do * 630*********/ 631task-row { 632transition: $shorter_transition; 633 634&:hover { transition: none; } 635} 636 637task-list-view > box > revealer > box > button { margin: -6px 0; } 638 639 640/************* 641* Evolution * 642*************/ 643frame.taskbar > border { border-style: solid none none; } 644 645box.vertical > paned.horizontal notebook widget .frame { border-style: none; } 646 647 648/******** 649* gitg * 650********/ 651frame.commit-frame > border { border-style: solid none none; } 652 653 654/************** 655* Characters * 656**************/ 657box.dialog-vbox scrolledwindow.related { border: 1px solid $borders_color; } 658 659list.categories { background-image: image($lighter_bg_color); } 660 661 662/************** 663* Calculator * 664**************/ 665button.title label { min-height: $medium_size; } 666 667 668/************ 669* Terminix * 670************/ 671.terminix-background box.vertical > widget > box.horizontal { 672padding: 3px 0 2px; 673// border-bottom: 1px solid $borders_color; 674 675button { 676padding: 4px 8px; 677 678&.image-button { padding: 4px; } 679} 680} 681 682.terminix-background revealer > frame > border { 683// border-style: none none solid; 684border-style: none; 685} 686 687button.image-button.session-new-button { min-width: $medium_size - 4px; } 688 689overlay > revealer.left > scrolledwindow.frame, 690overlay > revealer.right > scrolledwindow.frame { 691border-style: none; 692box-shadow: $z-depth-4; 693} 694 695overlay > revealer.left > scrolledwindow.frame { 696margin-right: 32px; 697// border-style: none solid none none; 698} 699 700overlay > revealer.right > scrolledwindow.frame { 701margin-left: 32px; 702// border-style: none none none solid; 703} 704 705.terminix-session-sidebar { background-image: image($lighter_bg_color); } 706 707 708/*********** 709* Firefox * 710***********/ 711window.background > widget > menubar { 712color: $secondary_inversed_fg_color; 713 714&:hover { color: $inversed_fg_color; } 715 716&:disabled { color: $disabled_secondary_inversed_fg_color; } 717} 718 719window.background > menu > menuitem > label:disabled { color: $disabled_fg_color; } 720 721window.background > window.background > menu > separator { color: $borders_color; } 722 723window.background > widget > frame { color: rgba(0, 0, 0, 0.2); } 724 725window.background > widget > checkbutton > check, 726window.background > widget > radiobutton > radio { 727margin: 0; 728padding: 0; 729} 730 731window.background > widget > radiobutton > radio:checked { 732-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")), 733-gtk-recolor(url("assets/radio-checked-symbolic.png"))); 734border-image: none; 735} 736 737 738/*********** 739* Synapse * 740***********/ 741box > widget > widget:selected { background-color: $primary_color; } 742 743 744/********* 745* Unity * 746*********/ 747// based css: 748// http://bazaar.launchpad.net/~ubuntu-art-pkg/ubuntu-themes/trunk/view/head:/Ambiance/gtk-3.20/apps/unity.css 749 750// Decorations 751UnityDecoration { 752-UnityDecoration-extents: 28px 0 0 0; 753-UnityDecoration-input-extents: 8px; 754 755-UnityDecoration-shadow-offset-x: 0; 756-UnityDecoration-shadow-offset-y: 3px; 757-UnityDecoration-active-shadow-color: rgba(0, 0, 0, 0.48); 758-UnityDecoration-active-shadow-radius: 18px; 759-UnityDecoration-inactive-shadow-color: rgba(0, 0, 0, 0.32); 760-UnityDecoration-inactive-shadow-radius: 6px; 761 762-UnityDecoration-glow-size: 8px; 763-UnityDecoration-glow-color: $primary_color; 764 765-UnityDecoration-title-indent: 4px; 766-UnityDecoration-title-fade: 32px; 767-UnityDecoration-title-alignment: 0.0; 768} 769 770UnityDecoration.top { 771padding: 0 2px; 772border-style: none; 773border-radius: 2px 2px 0 0; 774// box-shadow: inset 0 1px $secondary_highlight_color; 775box-shadow: inset 0 1px scale-alpha(#FFFFFF, 0.1); 776background-color: $secondary_titlebar_color; 777color: $inversed_fg_color; 778} 779 780UnityDecoration.top:backdrop { 781color: $secondary_inversed_fg_color; 782} 783 784UnityDecoration.left, 785UnityDecoration.right { 786} 787 788UnityDecoration.bottom { 789} 790 791UnityDecoration.menuitem, 792UnityDecoration .menuitem { 793color: gtkalpha(currentColor, $enabled_opacity); 794} 795 796UnityDecoration.menubar.menuitem:hover, 797UnityDecoration.menubar .menuitem *:hover { 798box-shadow: inset 0 -2px currentColor; 799background-color: transparent; 800color: currentColor; 801} 802 803.background:not(.csd) headerbar:not(.titlebar) { 804border-radius: 0; 805box-shadow: none; 806 807&.inline-toolbar { border-style: none; } 808} 809 810SheetStyleDialog.unity-force-quit { 811// background-color: $bg_color; 812} 813 814// Panel Style 815UnityPanelWidget, 816.unity-panel { 817background-color: $topbar_color; 818background-image: image($topbar_color); 819color: $inversed_fg_color; 820} 821 822UnityPanelWidget:backdrop, 823.unity-panel:backdrop { 824color: $secondary_inversed_fg_color; 825} 826 827.unity-panel.menubar, 828.unity-panel .menubar { 829} 830 831.unity-panel.menuitem, 832.unity-panel .menuitem { 833color: gtkalpha(currentColor, $enabled_opacity); 834} 835 836.unity-panel.menubar.menuitem:hover, 837.unity-panel.menubar .menuitem *:hover { 838box-shadow: inset 0 -2px currentColor; 839background-color: transparent; 840color: currentColor; 841} 842 843@keyframes playbackmenuitem_spinner { 844to { -gtk-icon-transform: rotate(1turn); } 845} 846 847.menu IdoPlaybackMenuItem.menuitem:active { 848-gtk-icon-source: -gtk-icontheme("process-working-symbolic"); 849animation: playbackmenuitem_spinner 1s infinite linear; 850color: $primary_color; 851} 852 853