_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 199entry { 200&:dir(ltr), 201&:dir(rtl) { // specificity bump 202border-radius: 2px; 203 204.gedit-search-entry-occurrences-tag { 205all: unset; 206color: gtkalpha(currentColor, $hint_opacity); 207} 208} 209 210$buttons_width: $small_size * 2 + $container_padding * 3; 211 212&:dir(ltr) { 213margin-right: -$buttons_width; 214padding-right: $buttons_width; 215 216.gedit-search-entry-occurrences-tag { margin-left: $container_padding; } 217 218image.right { margin-right: 0; } 219} 220 221&:dir(rtl) { 222margin-left: -$buttons_width; 223padding-left: $buttons_width; 224 225.gedit-search-entry-occurrences-tag { margin-right: $container_padding; } 226 227image.left { margin-left: 0; } 228} 229 230&.error ~ button { 231color: $secondary_inversed_fg_color; 232 233&:hover, &:active { color: $inversed_fg_color; } 234 235&:disabled { color: $disabled_secondary_inversed_fg_color; } 236} 237} 238 239button { 240border: solid $container_padding transparent; 241 242@extend %simple_flat_button; 243 244&:dir(ltr), 245&:dir(rtl) { @extend %small_button; } // specificity bump 246 247&:last-child:dir(ltr), 248&:not(:first-child):dir(rtl) { margin-left: -$container_padding / 2; } 249 250&:first-child:dir(rtl), 251&:not(:last-child):dir(ltr) { margin-right: -$container_padding / 2; } 252} 253} 254 255frame.gedit-map-frame > border { 256&:dir(ltr) { border-style: none none none solid; } 257&:dir(rtl) { border-style: none solid none none; } 258} 259 260 261/************** 262* Tweak Tool * 263**************/ 264// hard-coded css: 265// https://git.gnome.org/browse/gnome-tweak-tool/tree/data/shell.css 266 267// the sidebar 268.tweak-categories { 269// padding: 4px 0; 270// background-color: shade(@theme_bg_color, 0.99); 271background-image: image($lighter_bg_color); 272 273// hide separators 274separator { 275min-width: 0; 276min-height: 0; 277background: transparent; 278} 279} 280 281.tweak { 282padding: 3px; 283// padding-top: 3px; 284 285&.title:hover { box-shadow: none; } 286} 287 288.tweak-group-white, 289.tweak-white, 290.tweak-white:hover { 291// background-color: white; 292background-image: image($base_color); 293} 294 295.tweak-startup, 296.tweak-startup:hover { 297// background-color: lighter(shade(@theme_bg_color, 0.9)); 298background-image: image($base_color); 299} 300 301.tweak-group-startup { 302// background-color: @view_separators; 303background-image: image($base_color); 304border: 1px solid $borders_color; 305} 306 307 308/*********** 309* Builder * 310***********/ 311// based css: 312// https://git.gnome.org/browse/gnome-builder/tree/data/theme 313// hard-coded css: 314// https://git.gnome.org/browse/gnome-builder/tree/data/theme/shared.css 315 316// Titlebar adjustments for workbench 317// 318// This is needed due to our placement of headerbar inside of a 319// stack. We were seeing black edges around the header bar, and 320// improper radius on the headerbar. 321// 322workbench stack.titlebar { 323padding: 0; 324// box-shadow: none; 325} 326 327workbench:not(.tiled):not(.maximized):not(.fullscreen) stack.titlebar headerbar { 328border-radius: 2px 2px 0 0; 329// box-shadow: none; 330} 331 332perspectiveswitcher { 333background-color: $bg_color; 334} 335 336perspectiveswitcher button:checked { 337color: $primary_color; 338} 339 340// Layout tab and tab bar tweaks 341// The following makes the layout stack header look similar to a tab bar. 342layouttabbar { 343border-bottom: 1px solid $borders_color; 344background-color: $bg_color; 345} 346 347layouttabbar button { @extend %flat_button; } 348 349layouttabbar > box > button { 350margin: (40px - $medium_size) / 2 0; 351// border-radius: 0; 352} 353 354layouttab { 355margin: 0 8px; // not working 356border-style: none solid; 357border-width: 1px; 358border-color: $borders_color; 359box-shadow: inset 0 -2px $primary_color; 360background-color: $base_color; 361} 362 363layouttab separator.vertical { 364margin: 8px 4px; 365} 366 367layouttab button { 368&.text-button, &.image-button, & { 369margin-top: 8px; 370margin-bottom: 8px; 371padding: 0 4px; 372} 373} 374 375// Close button styling for layouttab. 376layouttab > box > button.close { 377border-radius: $circular_radius; 378} 379 380layout { 381border: 1px solid $borders_color; 382-PnlDockBin-handle-size: 1; 383} 384 385entry.search-missing { 386background-color: $error_color; 387color: $inversed_fg_color; 388} 389 390// tweak icons for treeviews 391workbench treeview.image { color: gtkalpha(currentColor, $hint_opacity); } 392workbench treeview.image:selected { color: $tertiary_inversed_fg_color; } 393 394dockbin { 395border: 1px solid $borders_color; 396-PnlDockBin-handle-size: 1; 397} 398 399dockpaned { 400border: 1px solid $borders_color; 401} 402 403eggsearchbar box.search-bar { 404padding: 0 8px; 405border-bottom: 1px solid $borders_color; 406background-color: $bg_color; 407} 408 409docktabstrip { 410padding: 0 8px; 411border-bottom: 1px solid $borders_color; 412background-color: $bg_color; 413} 414 415docktab { 416transition: $longer_transition; 417min-height: $small_size; 418min-width: $small_size; 419margin-bottom: -1px; 420padding: $container_padding 6px; 421 422outline-offset: -6px; 423 424border-width: 1px; // for reorderable tabs 425border-color: transparent; // 426 427color: $secondary_fg_color; 428font-weight: 500; 429 430&:hover { 431box-shadow: inset 0 -2px $track_color; 432color: $fg_color; 433} 434 435&:checked { 436animation: tab_ripple_effect $longer_duration * 3 $deceleration_curve; 437box-shadow: inset 0 -2px $primary_color; 438color: $fg_color; 439} 440} 441 442dockoverlayedge { 443background-color: $bg_color; 444} 445 446dockoverlayedge docktabstrip { 447padding: 0; 448border: none; 449} 450 451dockoverlayedge.left-edge docktab { 452&:hover { box-shadow: inset -2px 0 $track_color; } 453&:checked { box-shadow: inset -2px 0 $primary_color; } 454} 455 456dockoverlayedge.right-edge docktab { 457&:hover { box-shadow: inset 2px 0 $track_color; } 458&:checked { box-shadow: inset 2px 0 $primary_color; } 459} 460 461pillbox { 462background-color: $bg_color; 463border-radius: 2px; 464} 465 466buildperspective row { 467padding: 10px; 468} 469 470layoutpane entry.search { 471@extend %entry.flat; 472 473box-shadow: inset 0 -1px $borders_color; 474background-color: $base_color; 475} 476 477editortweak entry.search { 478@extend %entry.flat; 479 480margin-bottom: -1px; 481box-shadow: none; 482} 483 484// 485// let's tweak hard-coded elements 486// 487 488// styling for editor search 489frame.gb-search-frame { 490// border-bottom-left-radius: 5px; 491border-bottom-right-radius: 5px; 492} 493 494.gb-search-entry-occurrences-tag { 495box-shadow: none; 496background-color: transparent; 497} 498 499// Keep search bar and layouttab height in sync. 500docktabstrip { 501min-height: 39px; 502} 503 504layouttabbar > box { 505// min-height: 39px; 506} 507 508eggsearchbar > revealer > box { 509// min-height: 39px; 510} 511 512eggsearchbar entry { 513// min-height: 24px; 514} 515 516workbench preferences preferencesgroup list entry { 517// background: none; 518// min-height: 0px; 519padding-top: 8px; 520padding-bottom: 8px; 521} 522 523 524/********** 525* Photos * 526**********/ 527// based css: 528// https://git.gnome.org/browse/gnome-photos/tree/data/Adwaita.css 529 530GdMainIconView.content-view { 531-GdMainIconView-icon-size: 48; 532} 533 534// Make spinner visible on both dark and bright backgrounds w/o making 535// it look ugly/weird. 536GdMainIconView.content-view.cell:active { 537// color: $tertiary_fg_color; 538} 539 540.documents-counter { 541margin: 8px; 542border-radius: $circular_radius; 543box-shadow: $z-depth-2; 544background-color: $accent_color; 545color: $inversed_fg_color; 546font-weight: bold; 547} 548 549.photos-entry-tag { 550@extend .documents-entry-tag; 551} 552 553.documents-scrolledwin.frame { 554border-style: none; 555} 556 557.photos-icon-bg { 558} 559 560.photos-fade-in { 561opacity: 1; 562transition: opacity $shorter_duration $deceleration_curve; 563} 564 565.photos-fade-out { 566opacity: 0; 567transition: opacity $shorter_duration $deceleration_curve; 568} 569 570.photos-collection-icon { 571} 572 573overlay grid.horizontal > revealer > scrolledwindow.frame { 574&:dir(ltr) { border-style: none none none solid; } 575&:dir(rtl) { border-style: none solid none none; } 576} 577 578 579/********* 580* Music * 581*********/ 582// hard-coded css: 583// https://git.gnome.org/browse/gnome-music/tree/data/application.css 584 585.side-panel:dir(ltr) { 586// border-width: 0 1px 0 0; 587border-style: solid; 588border-color: $borders_color; 589} 590 591.side-panel:dir(rtl) { 592// border-width: 0 0 0 1px; 593border-style: solid; 594border-color: $borders_color; 595} 596 597.side-panel .view { 598// background-color: mix(@theme_fg_color, @theme_bg_color, 0.9); 599background-image: image($lighter_bg_color); 600 601&:hover { background-image: image(mix($fg_color, $lighter_bg_color, percentage(0.05))); } 602} 603 604.side-panel .view:selected { 605// background-color: mix(@theme_fg_color, @theme_bg_color, 0.5); 606background-image: image($primary_color); 607 608&:hover { background-image: image(mix($inversed_fg_color, $primary_color, percentage(0.05))); } 609} 610 611.playlists-list { 612// box-shadow: inset 0 -1px @view_separators; 613} 614 615.songs-list { 616// box-shadow: inset 0 1px shade(@borders, 1.30); 617// background-color: @theme_bg_color; 618 619&:hover { background-image: image($row_track_color); } 620} 621 622frame.documents-dropdown { 623@extend toolbar.osd; 624 625margin: 8px; 626 627> border { border: none; } 628} 629 630box.vertical:not(.titlebar) > revealer > toolbar.search-bar { 631border-bottom: 1px solid $borders_color; 632 633button > widget { 634-gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); 635// -GtkArrow-arrow-scaling: 1; 636} 637} 638 639 640/********* 641* To Do * 642*********/ 643task-row { 644transition: $shorter_transition; 645margin: 0 -4px; 646 647&:hover { transition: none; } 648 649label { margin: 0 8px; } 650 651image { margin: 0 4px; } 652} 653 654task-list-view > box > revealer > box > button { 655min-height: $medium_size; 656margin: -4px; 657padding: 0 12px; 658 659label { margin: 0 8px; } 660 661image { margin: 0 4px; } 662} 663 664 665/************* 666* Evolution * 667*************/ 668frame.taskbar > border { border-style: solid none none; } 669 670box.vertical > paned.horizontal notebook widget .frame { border-style: none; } 671 672 673/******** 674* gitg * 675********/ 676frame.commit-frame > border { border-style: solid none none; } 677 678 679/************** 680* Characters * 681**************/ 682box.dialog-vbox scrolledwindow.related { border: 1px solid $borders_color; } 683 684list.categories { background-image: image($lighter_bg_color); } 685 686 687/************** 688* Calculator * 689**************/ 690button.title label { min-height: $medium_size; } 691 692 693/************ 694* Terminix * 695************/ 696.terminix-background box.vertical > widget > box.horizontal { 697padding: 3px 0 2px; 698// border-bottom: 1px solid $borders_color; 699 700button { 701padding: 4px 8px; 702 703&.image-button { padding: 4px; } 704} 705} 706 707.terminix-background revealer > frame > border { 708// border-style: none none solid; 709border-style: none; 710} 711 712button.image-button.session-new-button { min-width: $medium_size - 4px; } 713 714overlay > revealer.left > scrolledwindow.frame, 715overlay > revealer.right > scrolledwindow.frame { 716border-style: none; 717box-shadow: $z-depth-4; 718} 719 720overlay > revealer.left > scrolledwindow.frame { 721margin-right: 32px; 722// border-style: none solid none none; 723} 724 725overlay > revealer.right > scrolledwindow.frame { 726margin-left: 32px; 727// border-style: none none none solid; 728} 729 730.terminix-session-sidebar { background-image: image($lighter_bg_color); } 731 732 733/*********** 734* Firefox * 735***********/ 736window.background > widget > menubar { 737color: $secondary_inversed_fg_color; 738 739&:hover { color: $inversed_fg_color; } 740 741&:disabled { color: $disabled_secondary_inversed_fg_color; } 742} 743 744window.background > menu > menuitem > label:disabled { color: $disabled_fg_color; } 745 746window.background > window.background > menu > separator { color: $borders_color; } 747 748window.background > widget > frame { color: rgba(0, 0, 0, 0.2); } 749 750window.background > widget > checkbutton > check, 751window.background > widget > radiobutton > radio { 752margin: 0; 753padding: 0; 754} 755 756window.background > widget > radiobutton > radio:checked { 757-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")), 758-gtk-recolor(url("assets/radio-checked-symbolic.png"))); 759border-image: none; 760} 761 762 763/*********** 764* Synapse * 765***********/ 766box > widget > widget:selected { background-color: $primary_color; } 767 768 769/********* 770* Unity * 771*********/ 772// based css: 773// http://bazaar.launchpad.net/~ubuntu-art-pkg/ubuntu-themes/trunk/view/head:/Ambiance/gtk-3.20/apps/unity.css 774 775// Decorations 776UnityDecoration { 777-UnityDecoration-extents: 28px 0 0 0; 778-UnityDecoration-input-extents: 8px; 779 780-UnityDecoration-shadow-offset-x: 0; 781-UnityDecoration-shadow-offset-y: 3px; 782-UnityDecoration-active-shadow-color: rgba(0, 0, 0, 0.48); 783-UnityDecoration-active-shadow-radius: 18px; 784-UnityDecoration-inactive-shadow-color: rgba(0, 0, 0, 0.32); 785-UnityDecoration-inactive-shadow-radius: 6px; 786 787-UnityDecoration-glow-size: 8px; 788-UnityDecoration-glow-color: $primary_color; 789 790-UnityDecoration-title-indent: 4px; 791-UnityDecoration-title-fade: 32px; 792-UnityDecoration-title-alignment: 0.0; 793} 794 795UnityDecoration.top { 796padding: 0 2px; 797border-style: none; 798border-radius: 2px 2px 0 0; 799// box-shadow: inset 0 1px $secondary_highlight_color; 800box-shadow: inset 0 1px scale-alpha(#FFFFFF, 0.1); 801background-color: $secondary_titlebar_color; 802color: $inversed_fg_color; 803} 804 805UnityDecoration.top:backdrop { 806color: $secondary_inversed_fg_color; 807} 808 809UnityDecoration.left, 810UnityDecoration.right { 811} 812 813UnityDecoration.bottom { 814} 815 816UnityDecoration.menuitem, 817UnityDecoration .menuitem { 818color: gtkalpha(currentColor, $enabled_opacity); 819} 820 821UnityDecoration.menubar.menuitem:hover, 822UnityDecoration.menubar .menuitem *:hover { 823box-shadow: inset 0 -2px currentColor; 824background-color: transparent; 825color: currentColor; 826} 827 828.background:not(.csd) headerbar:not(.titlebar) { 829border-radius: 0; 830box-shadow: none; 831 832&.inline-toolbar { border-style: none; } 833} 834 835SheetStyleDialog.unity-force-quit { 836// background-color: $bg_color; 837} 838 839// Panel Style 840UnityPanelWidget, 841.unity-panel { 842background-color: $topbar_color; 843background-image: image($topbar_color); 844color: $inversed_fg_color; 845} 846 847UnityPanelWidget:backdrop, 848.unity-panel:backdrop { 849color: $secondary_inversed_fg_color; 850} 851 852.unity-panel.menubar, 853.unity-panel .menubar { 854} 855 856.unity-panel.menuitem, 857.unity-panel .menuitem { 858color: gtkalpha(currentColor, $enabled_opacity); 859} 860 861.unity-panel.menubar.menuitem:hover, 862.unity-panel.menubar .menuitem *:hover { 863box-shadow: inset 0 -2px currentColor; 864background-color: transparent; 865color: currentColor; 866} 867 868@keyframes playbackmenuitem_spinner { 869to { -gtk-icon-transform: rotate(1turn); } 870} 871 872.menu IdoPlaybackMenuItem.menuitem:active { 873-gtk-icon-source: -gtk-icontheme("process-working-symbolic"); 874animation: playbackmenuitem_spinner 1s infinite linear; 875color: $primary_color; 876} 877 878