_apps.scss
ASCII text
1// floating status bar 2.floating-bar { 3@extend %osd; 4 5// @extend .toolbar.osd; 6 7min-height: 32px; 8padding: 0; 9border-style: solid solid none; 10border-width: 1px; 11border-color: $borders_color; 12border-radius: (2px + 1px) (2px + 1px) 0 0; 13background-color: $base_color; 14background-clip: $extra_background_clip; 15transition: $longer_transition, border-width 0; 16 17&.left { 18margin-right: 8px - 1px; 19border-left-style: none; 20border-top-left-radius: 0; 21} 22 23&.right { 24margin-left: 8px - 1px; 25border-right-style: none; 26border-top-right-radius: 0; 27} 28 29button { 30min-height: 24px; 31min-width: 24px; 32margin: 4px; 33padding: 0; 34} 35} 36 37 38/************ 39* Nautilus * 40************/ 41// based css: 42// https://git.gnome.org/browse/nautilus/tree/src/resources/css/Adwaita.css 43// hard-coded css: 44// https://git.gnome.org/browse/nautilus/tree/src/resources/css/nautilus.css 45.nautilus-window, 46.nautilus-window notebook, 47.nautilus-window notebook > stack { 48background: $base_color; 49} 50 51.nautilus-canvas-item { 52// border-radius: 2px; 53} 54 55.nautilus-canvas-item.dim-label, 56.nautilus-list-dim-label { 57// @extend .dim-label; 58} 59 60.nautilus-canvas-item.dim-label:selected, 61.nautilus-list-dim-label:selected { 62} 63 64.nautilus-desktop.nautilus-canvas-item { 65// background-color: scale-alpha(#000000, $lower_opacity); 66color: $inversed_fg_color; 67text-shadow: $z-depth-1; 68} 69 70.nautilus-desktop.nautilus-canvas-item:selected { 71// color: $inversed_fg_color; 72text-shadow: none; 73} 74 75// Toolbar 76@keyframes needs_attention_keyframes { 770% {background-color: transparent; } 7850% {background-color: $track_color; } 79100% {background-color: transparent; } 80} 81 82.nautilus-operations-button-needs-attention { 83color: $accent_color; 84animation: needs_attention_keyframes 2s $standard_curve; 85} 86 87.nautilus-operations-button-needs-attention-multiple { 88color: $accent_color; 89animation: needs_attention_keyframes 2s $standard_curve; 90animation-iteration-count: 2; 91} 92 93.disk-space-display { 94// border-style: solid; 95// border-width: 2px; 96} 97 98.disk-space-display.unknown { 99background-color: $warning_color; 100} 101 102.disk-space-display.used { 103background-color: $primary_color; 104} 105 106.disk-space-display.free { 107background-color: $track_color; 108color: $disabled_fg_color; 109} 110 111// View 112.nautilus-list-view .view { 113// border-bottom: 1px solid $borders_color; 114} 115 116// Hide superfluous treeview drop target indication 117.nautilus-list-view .view.dnd { 118// border-style: none; 119} 120 121// Libgd tag entries in the search. Sadly it requires this copy pasted css style. 122// https://git.gnome.org/browse/libgd/tree/libgd/gd-tagged-entry-default.css 123.documents-entry-tag { 124// min-height: 24px; 125margin: 3px -2px 3px 8px; 126padding: 0 8px; 127border-radius: $circular_radius; 128box-shadow: none; 129background-color: $primary_color; 130color: $inversed_fg_color; 131 132&:hover { box-shadow: $z-depth-1; } 133} 134 135.documents-entry-tag.button { 136// @extend %simple_flat_button; 137 138// min-height: 24px; 139// min-width: 24px; 140margin: 0 -2px; 141padding: 4px; 142border-radius: $circular_radius; 143box-shadow: none; 144color: $secondary_inversed_fg_color; 145 146&:hover, &:active { color: $inversed_fg_color; } 147} 148 149// Workaround for the double border of the searchbar since we use a revealer which 150// always allocates at least 1 pixel 151.nautilus-window searchbar { border-top: 1px solid $borders_color; } 152 153.nautilus-window .searchbar-container { margin-top: -1px; } 154 155 156/********* 157* gedit * 158*********/ 159// based css: 160// https://git.gnome.org/browse/gedit/tree/gedit/resources/css/gedit.adwaita.css 161// hard-coded css: 162// https://git.gnome.org/browse/gedit/tree/gedit/resources/css/gedit-style.css 163.open-document-selector-treeview:hover { 164} 165 166.open-document-selector-treeview:selected:hover { 167} 168 169/* Only normal state is handle */ 170.open-document-selector-name-label { 171font-weight: bold; 172} 173 174/* Only normal state is handle */ 175.open-document-selector-path-label { 176color: gtkalpha(currentColor, $hint_opacity); 177font-size: smaller; 178 179// @extend .dim-label; 180} 181 182.gedit-document-panel { 183background-color: $lighter_bg_color; 184} 185 186.gedit-document-panel row:selected { 187} 188 189.gedit-document-panel-group-row, 190.gedit-document-panel-group-row:hover { 191border-top: 1px solid gtkalpha(currentColor, 0.3); 192} 193 194.gedit-document-panel-group-row:first-child, 195.gedit-document-panel-group-row:first-child:hover { 196border-top: 0px; 197} 198 199/* Try to look as the notebook tab close button */ 200.gedit-document-panel row button.flat { 201margin-top: 8px; 202margin-bottom: 8px; 203 204@extend %small_button; 205} 206 207.gedit-side-panel-paned statusbar { 208border-top: 1px solid $borders_color; 209} 210 211.gedit-search-slider { 212margin: 4px 4px 8px; 213 214.gedit-search-entry-occurrences-tag { 215all: unset; 216padding: 0 4px; 217color: gtkalpha(currentColor, $hint_opacity); 218} 219 220entry { 221&:dir(ltr) { 222margin-right: -$medium_size * 2; 223padding-right: $medium_size * 2 + 8px; 224 225.gedit-search-entry-occurrences-tag { margin-right: -8px; } 226} 227 228&:dir(rtl) { 229margin-left: -$medium_size * 2; 230padding-left: $medium_size * 2 + 8px; 231 232.gedit-search-entry-occurrences-tag { margin-left: -8px; } 233} 234 235&.error ~ button { 236color: $secondary_inversed_fg_color; 237 238&:hover, &:active { color: $inversed_fg_color; } 239 240&:disabled { color: $disabled_secondary_inversed_fg_color; } 241} 242} 243 244button { 245@extend %simple_flat_button; 246 247&:dir(ltr), 248&:dir(rtl) { @extend %linked; } 249} 250} 251 252// Yeah this is ugly 253.gedit-search-slider .linked:not(.vertical) > entry, 254notebook > stack:not(:only-child) revealer .gedit-search-slider .linked:not(.vertical) > entry { 255border-radius: 2px; 256} 257 258 259/************** 260* Tweak Tool * 261**************/ 262// hard-coded css: 263// https://git.gnome.org/browse/gnome-tweak-tool/tree/data/shell.css 264// the sidebar 265.tweak-categories { 266// padding: 4px 0; 267// background-color: shade(@theme_bg_color, 0.99); 268background-image: image($lighter_bg_color); 269 270// hide separators 271separator { 272min-width: 0; 273min-height: 0; 274background: transparent; 275} 276} 277 278.tweak { 279padding: 3px; 280// padding-top: 3px; 281 282&.title:hover { box-shadow: none; } 283} 284 285.tweak-group-white, 286.tweak-white, 287.tweak-white:hover { 288// background-color: white; 289background-image: image($base_color); 290} 291 292.tweak-startup, 293.tweak-startup:hover { 294// background-color: lighter(shade(@theme_bg_color, 0.9)); 295background-image: image($base_color); 296} 297 298.tweak-group-startup { 299// background-color: @view_separators; 300background-image: image($base_color); 301border: 1px solid $borders_color; 302} 303 304 305/*********** 306* Builder * 307***********/ 308// based css: 309// https://git.gnome.org/browse/gnome-builder/tree/data/theme 310// hard-coded css: 311// https://git.gnome.org/browse/gnome-builder/tree/data/theme/shared.css 312// 313// Titlebar adjustments for workbench 314// 315// This is needed due to our placement of headerbar inside of a 316// stack. We were seeing black edges around the header bar, and 317// improper radius on the headerbar. 318// 319workbench stack.titlebar { 320padding: 0; 321// box-shadow: none; 322} 323 324workbench:not(.tiled):not(.maximized):not(.fullscreen) stack.titlebar headerbar { 325border-radius: 2px 2px 0 0; 326// box-shadow: none; 327} 328 329perspectiveswitcher { 330background-color: $bg_color; 331} 332 333perspectiveswitcher button { 334} 335 336perspectiveswitcher button:hover { 337} 338 339perspectiveswitcher button:checked { 340color: $primary_color; 341} 342 343// 344// Layout tab and tab bar tweaks 345// 346// The following makes the layout stack header look similar to a tab bar. 347// 348layouttabbar { 349border-bottom: 1px solid $borders_color; 350background-color: $bg_color; 351} 352 353layouttabbar button { @extend %flat_button; } 354 355layouttabbar > box > button { 356margin: (40px - $medium_size) / 2 0; 357// border-radius: 0; 358} 359 360layouttab { 361margin: 0 8px; // not working 362border-style: none solid; 363border-width: 1px; 364border-color: $borders_color; 365box-shadow: inset 0 -2px $primary_color; 366background-color: $base_color; 367} 368 369layouttab separator.vertical { 370margin: 8px 4px; 371} 372 373layouttab button { 374&.text-button, &.image-button, & { 375margin-top: 8px; 376margin-bottom: 8px; 377padding: 0 4px; 378} 379} 380 381// 382// Close button styling for layouttab. 383// 384layouttab > box > button.close { 385border-radius: $circular_radius; 386} 387 388layout { 389border: 1px solid $borders_color; 390-PnlDockBin-handle-size: 1; 391} 392 393entry.search-missing { 394background-color: $error_color; 395color: $inversed_fg_color; 396} 397 398// tweak icons for treeviews 399workbench treeview.image { color: gtkalpha(currentColor, $hint_opacity); } 400workbench treeview.image:selected { color: $tertiary_inversed_fg_color; } 401 402dockbin { 403border: 1px solid $borders_color; 404-PnlDockBin-handle-size: 1; 405} 406 407dockpaned { 408border: 1px solid $borders_color; 409} 410 411eggsearchbar box.search-bar { 412padding: 0 8px; 413border-bottom: 1px solid $borders_color; 414background-color: $bg_color; 415} 416 417docktabstrip { 418padding: 0 8px; 419border-bottom: 1px solid $borders_color; 420background-color: $bg_color; 421} 422 423docktab { 424transition: $longer_transition; 425min-height: $small_size; 426min-width: $small_size; 427margin-bottom: -1px; 428padding: $container_padding 6px; 429 430outline-offset: -6px; 431 432border-width: 1px; // for reorderable tabs 433border-color: transparent; // 434 435color: $secondary_fg_color; 436font-weight: 500; 437 438&:hover { 439box-shadow: inset 0 -2px $track_color; 440color: $fg_color; 441} 442 443&:checked { 444animation: tab_ripple_effect $longer_duration * 3 $deceleration_curve; 445box-shadow: inset 0 -2px $primary_color; 446color: $fg_color; 447} 448} 449 450dockoverlayedge { 451background-color: $bg_color; 452} 453 454dockoverlayedge docktabstrip { 455padding: 0; 456border: none; 457} 458 459dockoverlayedge.left-edge docktab:checked { 460border-right-color: $primary_color; 461border-bottom-color: transparent; 462} 463 464dockoverlayedge.right-edge docktab:checked { 465border-left-color: $primary_color; 466border-bottom-color: transparent; 467} 468 469pillbox { 470background-color: $bg_color; 471border-radius: 2px; 472} 473 474layoutpane entry.search { 475@extend %entry.flat; 476 477box-shadow: inset 0 -1px $borders_color; 478background-color: $base_color; 479} 480 481editortweak entry.search { 482@extend %entry.flat; 483 484margin-bottom: -1px; 485box-shadow: none; 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// 500// Keep search bar and layouttab height in sync. 501// 502docktabstrip { 503min-height: 39px; 504} 505 506layouttabbar > box { 507// min-height: 39px; 508} 509 510eggsearchbar > revealer > box { 511// min-height: 39px; 512} 513 514eggsearchbar entry { 515// min-height: 24px; 516} 517 518workbench preferences preferencesgroup list entry { 519// background: none; 520// min-height: 0px; 521padding-top: 8px; 522padding-bottom: 8px; 523} 524 525 526/*********** 527* Firefox * 528***********/ 529menubar { 530color: $secondary_inversed_fg_color; 531 532&:hover { color: $inversed_fg_color; } 533} 534 535separator { color: $borders_color; } 536 537/* FIXME: not working */ 538window.background > widget > check, 539window.background > widget > radio { 540margin: 0; 541padding: 0; 542} 543 544window.background > widget > radio:checked { 545-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")), 546-gtk-recolor(url("assets/radio-checked-symbolic.png"))); 547border-image: none; 548} 549 550 551/*********** 552* Synapse * 553***********/ 554box > widget > widget:selected { background-color: $primary_color; } 555 556 557/********* 558* Unity * 559*********/ 560// based css: 561// http://bazaar.launchpad.net/~ubuntu-art-pkg/ubuntu-themes/trunk/view/head:/Ambiance/gtk-3.20/apps/unity.css 562// Decorations 563UnityDecoration { 564-UnityDecoration-extents: 28px 0 0 0; 565-UnityDecoration-input-extents: 8px; 566 567-UnityDecoration-shadow-offset-x: 0; 568-UnityDecoration-shadow-offset-y: 3px; 569-UnityDecoration-active-shadow-color: rgba(0, 0, 0, 0.48); 570-UnityDecoration-active-shadow-radius: 18px; 571-UnityDecoration-inactive-shadow-color: rgba(0, 0, 0, 0.32); 572-UnityDecoration-inactive-shadow-radius: 6px; 573 574-UnityDecoration-glow-size: 8px; 575-UnityDecoration-glow-color: $primary_color; 576 577-UnityDecoration-title-indent: 4px; 578-UnityDecoration-title-fade: 32px; 579-UnityDecoration-title-alignment: 0.0; 580} 581 582UnityDecoration.top { 583padding: 0 2px; 584border-style: none; 585border-radius: 2px 2px 0 0; 586// box-shadow: inset 0 1px $secondary_highlight_color; 587box-shadow: inset 0 1px scale-alpha(#FFFFFF, 0.1); 588background-color: $secondary_titlebar_color; 589color: $inversed_fg_color; 590} 591 592UnityDecoration.top:backdrop { 593color: $secondary_inversed_fg_color; 594} 595 596UnityDecoration.left, 597UnityDecoration.right { 598} 599 600UnityDecoration.bottom { 601} 602 603UnityDecoration.menuitem, 604UnityDecoration .menuitem { 605color: gtkalpha(currentColor, $enabled_opacity); 606} 607 608UnityDecoration.menubar.menuitem:hover, 609UnityDecoration.menubar .menuitem *:hover { 610box-shadow: inset 0 -2px currentColor; 611background-color: transparent; 612color: currentColor; 613} 614 615.background:not(.csd) headerbar:not(.titlebar) { 616border-radius: 0; 617box-shadow: none; 618 619&.inline-toolbar { border-style: none; } 620} 621 622SheetStyleDialog.unity-force-quit { 623// background-color: $bg_color; 624} 625 626// Panel Style 627UnityPanelWidget, 628.unity-panel { 629background-color: $topbar_color; 630background-image: image($topbar_color); 631color: $inversed_fg_color; 632} 633 634UnityPanelWidget:backdrop, 635.unity-panel:backdrop { 636color: $secondary_inversed_fg_color; 637} 638 639.unity-panel.menubar, 640.unity-panel .menubar { 641} 642 643.unity-panel.menuitem, 644.unity-panel .menuitem { 645color: gtkalpha(currentColor, $enabled_opacity); 646} 647 648.unity-panel.menubar.menuitem:hover, 649.unity-panel.menubar .menuitem *:hover { 650box-shadow: inset 0 -2px currentColor; 651background-color: transparent; 652color: currentColor; 653} 654 655@keyframes playbackmenuitem_spinner { 656to { -gtk-icon-transform: rotate(1turn); } 657} 658 659.menu IdoPlaybackMenuItem.menuitem:active { 660-gtk-icon-source: -gtk-icontheme("process-working-symbolic"); 661animation: playbackmenuitem_spinner 1s infinite linear; 662color: $primary_color; 663} 664 665