_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; 645 646&:hover { transition: none; } 647} 648 649task-list-view > box > revealer > box > button { margin: -6px 0; } 650 651 652/************* 653* Evolution * 654*************/ 655frame.taskbar > border { border-style: solid none none; } 656 657box.vertical > paned.horizontal notebook widget .frame { border-style: none; } 658 659 660/******** 661* gitg * 662********/ 663frame.commit-frame > border { border-style: solid none none; } 664 665 666/************** 667* Characters * 668**************/ 669box.dialog-vbox scrolledwindow.related { border: 1px solid $borders_color; } 670 671list.categories { background-image: image($lighter_bg_color); } 672 673 674/************** 675* Calculator * 676**************/ 677button.title label { min-height: $medium_size; } 678 679 680/************ 681* Terminix * 682************/ 683.terminix-background box.vertical > widget > box.horizontal { 684padding: 3px 0 2px; 685// border-bottom: 1px solid $borders_color; 686 687button { 688padding: 4px 8px; 689 690&.image-button { padding: 4px; } 691} 692} 693 694.terminix-background revealer > frame > border { 695// border-style: none none solid; 696border-style: none; 697} 698 699button.image-button.session-new-button { min-width: $medium_size - 4px; } 700 701overlay > revealer.left > scrolledwindow.frame, 702overlay > revealer.right > scrolledwindow.frame { 703border-style: none; 704box-shadow: $z-depth-4; 705} 706 707overlay > revealer.left > scrolledwindow.frame { 708margin-right: 32px; 709// border-style: none solid none none; 710} 711 712overlay > revealer.right > scrolledwindow.frame { 713margin-left: 32px; 714// border-style: none none none solid; 715} 716 717.terminix-session-sidebar { background-image: image($lighter_bg_color); } 718 719 720/*********** 721* Firefox * 722***********/ 723window.background > widget > menubar { 724color: $secondary_inversed_fg_color; 725 726&:hover { color: $inversed_fg_color; } 727 728&:disabled { color: $disabled_secondary_inversed_fg_color; } 729} 730 731window.background > menu > menuitem > label:disabled { color: $disabled_fg_color; } 732 733window.background > window.background > menu > separator { color: $borders_color; } 734 735window.background > widget > frame { color: rgba(0, 0, 0, 0.2); } 736 737window.background > widget > checkbutton > check, 738window.background > widget > radiobutton > radio { 739margin: 0; 740padding: 0; 741} 742 743window.background > widget > radiobutton > radio:checked { 744-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")), 745-gtk-recolor(url("assets/radio-checked-symbolic.png"))); 746border-image: none; 747} 748 749 750/*********** 751* Synapse * 752***********/ 753box > widget > widget:selected { background-color: $primary_color; } 754 755 756/********* 757* Unity * 758*********/ 759// based css: 760// http://bazaar.launchpad.net/~ubuntu-art-pkg/ubuntu-themes/trunk/view/head:/Ambiance/gtk-3.20/apps/unity.css 761 762// Decorations 763UnityDecoration { 764-UnityDecoration-extents: 28px 0 0 0; 765-UnityDecoration-input-extents: 8px; 766 767-UnityDecoration-shadow-offset-x: 0; 768-UnityDecoration-shadow-offset-y: 3px; 769-UnityDecoration-active-shadow-color: rgba(0, 0, 0, 0.48); 770-UnityDecoration-active-shadow-radius: 18px; 771-UnityDecoration-inactive-shadow-color: rgba(0, 0, 0, 0.32); 772-UnityDecoration-inactive-shadow-radius: 6px; 773 774-UnityDecoration-glow-size: 8px; 775-UnityDecoration-glow-color: $primary_color; 776 777-UnityDecoration-title-indent: 4px; 778-UnityDecoration-title-fade: 32px; 779-UnityDecoration-title-alignment: 0.0; 780} 781 782UnityDecoration.top { 783padding: 0 2px; 784border-style: none; 785border-radius: 2px 2px 0 0; 786// box-shadow: inset 0 1px $secondary_highlight_color; 787box-shadow: inset 0 1px scale-alpha(#FFFFFF, 0.1); 788background-color: $secondary_titlebar_color; 789color: $inversed_fg_color; 790} 791 792UnityDecoration.top:backdrop { 793color: $secondary_inversed_fg_color; 794} 795 796UnityDecoration.left, 797UnityDecoration.right { 798} 799 800UnityDecoration.bottom { 801} 802 803UnityDecoration.menuitem, 804UnityDecoration .menuitem { 805color: gtkalpha(currentColor, $enabled_opacity); 806} 807 808UnityDecoration.menubar.menuitem:hover, 809UnityDecoration.menubar .menuitem *:hover { 810box-shadow: inset 0 -2px currentColor; 811background-color: transparent; 812color: currentColor; 813} 814 815.background:not(.csd) headerbar:not(.titlebar) { 816border-radius: 0; 817box-shadow: none; 818 819&.inline-toolbar { border-style: none; } 820} 821 822SheetStyleDialog.unity-force-quit { 823// background-color: $bg_color; 824} 825 826// Panel Style 827UnityPanelWidget, 828.unity-panel { 829background-color: $topbar_color; 830background-image: image($topbar_color); 831color: $inversed_fg_color; 832} 833 834UnityPanelWidget:backdrop, 835.unity-panel:backdrop { 836color: $secondary_inversed_fg_color; 837} 838 839.unity-panel.menubar, 840.unity-panel .menubar { 841} 842 843.unity-panel.menuitem, 844.unity-panel .menuitem { 845color: gtkalpha(currentColor, $enabled_opacity); 846} 847 848.unity-panel.menubar.menuitem:hover, 849.unity-panel.menubar .menuitem *:hover { 850box-shadow: inset 0 -2px currentColor; 851background-color: transparent; 852color: currentColor; 853} 854 855@keyframes playbackmenuitem_spinner { 856to { -gtk-icon-transform: rotate(1turn); } 857} 858 859.menu IdoPlaybackMenuItem.menuitem:active { 860-gtk-icon-source: -gtk-icontheme("process-working-symbolic"); 861animation: playbackmenuitem_spinner 1s infinite linear; 862color: $primary_color; 863} 864 865