themes/whitey/gtk-3.20/_misc.scss (view raw)
1/***************
2 * Gnome panel *
3 ***************/
4
5panel-toplevel.background {
6 background-color: $panel_bg_color;
7}
8
9panel-plug,
10panel-toplevel > grid.horizontal > widget > widget {
11 // Always use dark-color of dark variant
12 color: $inverted_secondary_fg_color;
13 background-color: $panel_bg_color;
14 box-shadow: none;
15}
16
17.gnome-panel-menu-bar,
18panel-applet > menubar,
19#clock-applet-button {
20 font-weight: 700;
21 color: $inverted_secondary_fg_color;
22 background-color: transparent;
23 box-shadow: none;
24 label:backdrop,
25 &:backdrop { opacity: 1.0; }
26}
27
28.gnome-panel-menu-bar,
29panel-applet menubar {
30 box-shadow: none;
31 & menuitem {
32 color: $inverted_secondary_fg_color;
33 background-color: transparent;
34 &:hover {
35 color: $inverted_fg_color;
36 box-shadow: inset 0 -2px $selected_bg_color;
37 }
38 &:backdrop { opacity: 1.0; }
39 }
40 & menu {
41 font: regular;
42 & menuitem {
43 color: $secondary_fg_color;
44 background-color: $base_color;
45 &:hover {
46 color: $fg_color;
47 background-color: gtkalpha(currentColor, 0.1);
48 box-shadow: none;
49 }
50 &:backdrop { opacity: 1.0; }
51 }
52 separator { color: $borders_color; }
53 }
54}
55
56#tasklist-button,
57#clock-applet-button,
58#showdesktop-button {
59 @include button(flat-normal);
60 padding: 0px rem(4px);
61 border: none;
62 border-radius: 0;
63 color: $inverted_secondary_fg_color;
64 background-color: transparent;
65 font-weight: 700;
66 &:hover {
67 color: $inverted_fg_color;
68 background-color: transparent;
69 box-shadow: inset 0 -2px $track_color;
70 }
71 &:checked,
72 &:hover:checked,
73 &:disabled:checked { // 'checked' = 'active'
74 color: $inverted_fg_color;
75 background-color: transparent;
76 box-shadow: inset 0 -2px $selected_bg_color;
77 }
78 label:backdrop,
79 &:backdrop { opacity: 1.0; }
80}
81
82widget { // ubuntu-indicator container
83 > menubar {
84 background-color: transparent;
85 background-image: linear-gradient(to bottom, $panel_bg_color);
86 box-shadow: none;
87 }
88}
89
90wnck-pager {
91 &:selected { box-shadow: inset 0 -2px $selected_bg_color; }
92 &:backdrop { opacity: 1.0; }
93}
94
95na-tray-applet {
96 -NaTrayApplet-icon-padding: 2;
97 -NaTrayApplet-icon-size: 16;
98 &:backdrop { opacity: 1.0; }
99}
100
101gp-arrow-button {
102 min-width: rem(20px);
103 min-height: 0;
104 border: 1px solid transparent;
105 background-image: none;
106 color: $inverted_secondary_fg_color;
107 margin: rem(2px);
108 &:hover,
109 &:active { color: $inverted_fg_color; }
110}
111
112sn-button { padding: rem(4px); }
113
114
115/**************
116 * Tweak-tool *
117 **************/
118
119// sidebar
120.tweak-categories {
121 background-color: $secondary_dark_color;
122 color: $secondary_fg_color;
123 &:dir(ltr) { box-shadow: if($variant == 'light', $sidebar-light-ltr,
124 $sidebar-dark-ltr);
125 }
126 &:dir(rtl) { box-shadow: if($variant == 'light', $sidebar-light-rtl,
127 $sidebar-dark-rtl);
128 }
129
130 separator,
131 .separator {
132 @extend separator.wide;
133 min-height: 0;
134 border-color: transparent;
135 background-color: transparent;
136 color: transparent;
137 }
138}
139
140.tweak-category {
141 @extend treeview.view;
142 border: none;
143 color: $secondary_fg_color;
144 background-color: transparent;
145 font-weight: 500;
146 &:hover { color: $fg_color; }
147 &:selected {
148 color: $selected_bg_color;
149 background-color: transparent;
150
151 label { color: $selected_bg_color; }
152 }
153
154}
155
156// container and tweaks in a group
157.tweak-group {
158 padding: 6px;
159 background-color: $base_color;
160}
161
162.tweak {
163 background-color: $base_color;
164 &:hover { background-color: transparent; }
165}
166
167.tweak-group-white,
168.tweak-white {
169 background-color: $base_color;
170}
171
172
173/*******************
174 * Gnome-Flashback *
175 *******************/
176
177// use message-dialog style for popup osd windows
178
179// gf-popup-window,
180#gf-bubble,
181#gf-osd-window,
182#gf-input-source-popup {
183 &, &.solid {
184 border-radius: 2px;
185 border: 1px solid $borders_color;
186 background-color: gtkopacity($inverted_dark_color, 0.9);
187 color: $inverted_fg_color;
188 }
189}
190
191// FIXME: it doesn't work at all...
192// #gf-label-window {
193// font-size: rem(45px);
194// font-weight: 400;
195// }
196
197// input-source switcher labels
198#gf-input-source {
199 min-width: rem(120px);
200 min-height: rem(120px);
201 color: $inverted_fg_color;
202 font-size: rem(24px);
203 font-weight: 400;
204 &:selected {
205 border-radius: 2px;
206 background-color: $track_color;
207 color: $accent_color;
208 }
209}
210
211// popup for inpu-source candidates
212#gf-candidate-popup {
213 &, &.solid {
214 border-radius: 2px;
215 border: 1px solid $borders_color;
216 background-color: gtkopacity($inverted_dark_color, 0.9);
217 color: $inverted_fg_color;
218 }
219
220 gf-candidate-box {
221 transition: none;
222 label { padding: rem(2.7px) rem(2.7px) rem(4px); } // a half of .menuitem
223
224 &:last-child { padding-left: 0; }
225 &:hover,
226 &:selected {
227 border-radius: 0;
228 background-color: $track_color;
229 color: $selected_fg_color;
230 }
231 }
232
233 button,
234 .linked > button { // page-up&down buttons
235 &,
236 &:first-child,
237 &:last-child {
238 @extend button.flat;
239 border-radius: 0;
240 border: none;
241 background-color: transparent;
242 color: $secondary_accent_color;
243 box-shadow: none;
244 }
245 }
246}
247
248
249/************
250 * Nautilus *
251 ************/
252
253.nautilus-desktop-window,
254.nautilus-desktop-window notebook,
255.nautilus-desktop-window notebook > stack {
256 background: transparent;
257}
258
259.nautilus-desktop.nautilus-canvas-item {
260 color: $selected_fg_color;
261}
262
263.nautilus-canvas-item {
264 border-radius: 2px;
265}
266
267.nautilus-circular-button {
268 border-radius: 100px;
269 -gtk-outline-radius: 100px;
270}
271
272NautilusTrashBar {
273 @extend infobar;
274}
275
276.disk-space-display {
277 border: 0 none transparent;
278
279 &.free {
280 background-color: $track_color;
281 color: $insensitive_fg_color;
282 }
283
284 &.used { background-color: $selected_bg_color; }
285
286 &.unknown { background-color: $warning_color; }
287}
288
289
290/*********
291 * Geary *
292 *********/
293
294// Geary is the most ugly app for theming.
295.geary-titlebar-left {
296 // remove unexpected "hardcoded" vertical separator
297 separator { opacity: 0; }
298}
299
300.geary-titlebar-right {
301 // stop double-shadows on right paned header-bar
302 box-shadow: none;
303}
304
305
306/************
307 * Epiphany *
308 ************/
309
310// reset inverted foreground colour
311EphyWindow {
312 .nautilus-window .floating-bar { color: $secondary_fg_color; }
313}
314
315
316/************
317 * Seahorse *
318 ************/
319
320// remove double borders
321SeahorseWidget {
322 .sidebar {
323 paned separator { border: none; }
324 }
325}
326
327window paned > box.vertical {
328 // remove drop-shadow
329 > box.vertical > toolbar.primary-toolbar {
330 box-shadow: none;
331 border-bottom: 1px solid $borders_color;
332 }
333}
334
335
336/**********
337 * Polari *
338 **********/
339
340.polari-room-list { // override labels
341 row {
342 font-weight: 700;
343 &:not(:hover):not(:active):not(:selected) {
344 label,
345 image { opacity: 1.0; }
346 }
347
348 &.inactive {
349 &:not(:hover):not(:active):not(:selected) {
350 label,
351 image { opacity: 0.65; }
352 }
353 }
354 }
355}
356
357.polari-nick-entry {
358 border-image: none;
359 font-weight: 700;
360}
361
362// FIXME: can not override Polari 3.20.2
363// style in 10 years ago...
364.sidebar {
365 row.activatable.inactive {
366 color: $secondary_fg_color;
367 background-color: transparent;
368 font-weight: 500;
369 &:hover { color: $fg_color; }
370 &:selected {
371 color: $selected_fg_color;
372 background-color: $selected_bg_color;
373 }
374 }
375}
376
377// Why GtkLabel was needed, crazy...
378box > headerbar > label.polari-titlebar-separator {
379 min-width: 0;
380 border: none;
381 opacity: 0;
382}
383
384
385/*************
386 * RhythmBox *
387 *************/
388
389// add top-border to inline-toolbar
390.sidebar-paned .inline-toolbar.horizontal.sidebar-toolbar {
391 @if $variant == 'light' {
392 box-shadow: inset 0 1px $solid_light_borders_color,
393 inset 0 2px 2px rgba(0, 0, 0, 0.05),
394 inset -2px 0 2px -2px rgba(0, 0, 0, 0.03),
395 inset -3px 0 3px -2px rgba(0, 0, 0, 0.03);
396 }
397 @else {
398 box-shadow: inset 0 1px $solid_light_borders_color,
399 inset 0 2px 2px rgba(0, 0, 0, 0.05),
400 inset -2px 0 1px -2px rgba(0, 0, 0, 0.02),
401 inset -3px 0 3px -2px rgba(0, 0, 0, 0.04);
402 }
403
404 &:dir(rtl) {
405 @if $variant == 'light' {
406 box-shadow: inset 0 1px $solid_light_borders_color,
407 inset 0 2px 2px rgba(0, 0, 0, 0.05),
408 inset 2px 0 2px -2px rgba(0, 0, 0, 0.03),
409 inset 3px 0 3px -2px rgba(0, 0, 0, 0.03);
410 }
411 @else {
412 box-shadow: inset 0 1px $solid_light_borders_color,
413 inset 0 2px 2px rgba(0, 0, 0, 0.05),
414 inset 2px 0 1px -2px rgba(0, 0, 0, 0.02),
415 inset 3px 0 3px -2px rgba(0, 0, 0, 0.04);
416 }
417 }
418}
419
420// tweak sidebar styling
421.sidebar-paned {
422 scrolledwindow {
423 &:dir(ltr) { box-shadow: if($variant == 'light', $sidebar-light-ltr,
424 $sidebar-dark-ltr);
425 }
426 &:dir(rtl) { box-shadow: if($variant == 'light', $sidebar-light-rtl,
427 $sidebar-dark-rtl);
428 }
429 }
430
431 .sidebar {
432 background-color: if($variant == 'light', rgba(12, 18, 0, 0.01),
433 rgba(18, 22, 0, 0.04));
434 }
435}
436
437// remove unwanted drop-shadow
438window > box.vertical > box.vertical {
439 > toolbar.horizontal { box-shadow: none; }
440}
441
442// force using circle buttons for 'play/pause' etc
443window > box.vertical > box.vertical > toolbar {
444 .linked > button {
445 border-radius: 100px;
446 -gtk-outline-radius: 100px;
447 }
448}
449
450
451/**************
452 * Calculator *
453 **************/
454
455window {
456 > grid.vertical > box.vertical > widget {
457 button {
458 @extend button.flat;
459 min-width: rem(13.3px);
460 min-height: rem(13.3px);
461 padding: 0.75em 1em 0.75em; // FIXME: broken in 12pt fonts?
462 border: 0.75em solid transparent;
463 border-radius: 2px;
464 font-weight: 700;
465
466 &.suggested-action { // '=' button
467 color: transparent;
468 font-size: 0;
469 @each $s,$as in ('',''),
470 (':hover','-hover'),
471 (':active','-active'),
472 (':disabled','-insensitive') {
473 &#{$s} {
474 $_url: 'assets/equal#{$as}#{$asset_suffix}';
475 @include button(normal#{$as});
476 border-style: none;
477 border-radius: 100px;
478 background-color: transparent;
479 background-image: -gtk-scaled(url('#{$_url}.png'),
480 url('#{$_url}@2.png'));
481 background-size: 32px;
482 background-repeat: no-repeat;
483 background-position: center;
484 box-shadow: none;
485 transition-duration: 0.2s;
486 animation: none; // FIXME: animation breaks padding.
487 }
488 }
489 }
490 }
491 }
492}
493
494
495/*********
496 * Gedit *
497 *********/
498
499GeditViewFrame {
500 .gedit-search-slider {
501 @extend toolbar.osd;
502 padding: 3px;
503 border-radius: 2px;
504 border-width: 9px;
505 border-image: -gtk-scaled(url("assets/osd-shadow#{$asset_suffix}.png"),
506 url("assets/osd-shadow#{$asset_suffix}@2.png"))
507 10 / 10px stretch;
508 color: $inverted_fg_color;
509 opacity: 0.9;
510
511 entry,
512 .linked > entry {
513 &,
514 &.error,
515 &.warning {
516 color: $inverted_fg_color;
517 &:focus { color: $selected_fg_color; }
518 &:disabled { color: $insensitive_inverted_fg_color; }
519 }
520 }
521 }
522}
523
524paned.titlebar.horizontal {
525 headerbar {
526 button.flat.toggle.popup { // left-pane header button
527 border-radius: 2px;
528 -gtk-outline-radius: 2px;
529 }
530 }
531}
532
533notebook grid.horizontal > widget > box.horizontal > scrolledwindow {
534 undershoot { // remove undershoot
535 &.top,
536 &.bottom,
537 &.left,
538 &.right { background-image: none; }
539 }
540}
541
542
543/***********
544 * Builder *
545 ***********/
546
547//
548// do not use box-shadows. it's too problematic!
549//
550
551// work around some gtk padding issue
552filechooser actionbar button.combo {
553 padding: 0;
554}
555
556// styling for editor search
557frame.gb-search-frame {
558 background-image: linear-gradient(to bottom, $bg_color);
559 padding: rem(6px);
560 border-style: solid;
561 border-color: $borders_color;
562 border-left-width: 1px;
563 border-right-width: 1px;
564 border-bottom-width: 1px;
565 border-radius: 0;
566}
567
568frame.gb-search-frame border { border: none; }
569
570.gb-search-entry-occurrences-tag {
571 color: $insensitive_fg_color;
572 margin: rem(2px);
573 padding: rem(2px);
574 border-width: 0;
575}
576
577// Tweaks for the editortweak popover in the editor.
578editortweak button { padding: 0 rem(6px) 0 rem(6px); }
579editortweak list row { padding: 0; }
580
581// Keep search bar and layouttab height in sync.
582layouttabbar > box { min-height: rem(39px); }
583eggsearchbar > revealer > box { min-height: rem(39px); }
584eggsearchbar entry { min-height: rem(24px); }
585
586// Pillbox is used to render "languages" in the greeter.
587pillbox { border-radius: 2px; }
588
589// Styling in the genesis (create project) perspective.
590genesisperspective stack > box:first-child list row {
591 padding: rem(10px);
592 border-bottom: 1px solid $solid_light_borders_color;
593 &:last-child { border-bottom: none; }
594}
595
596// Perspectives switcher
597//
598// The following tweaks the left-most sidebar containing
599// the list of perspectives.
600perspectiveswitcher {
601 padding: 0 rem(4px);
602 border-right: 1px solid $solid_light_borders_color;
603 background-color: $secondary_dark_color;
604
605 button {
606 padding: rem(6px);
607 border-radius: 100px;
608 border: none;
609 background: none;
610 color: $tertiary_fg_color;
611 box-shadow: none;
612
613 image { opacity: 0.55; }
614 &:hover {
615 background: none;
616 image { opacity: 0.75; }
617 }
618 &:active,
619 &:checked {
620 background: none;
621 image { opacity: 1.0; }
622 }
623 }
624}
625
626// Layout tab and tab bar tweaks
627//
628// The following makes the layout stack header look similar to a tab bar.
629layouttabbar {
630 min-height: rem(37.3px);
631 padding: rem(5.3px);
632 border-bottom: 1px solid $solid_light_borders_color;
633 background-color: $secondary_dark_color;
634
635 > box > button {
636 opacity: 0.55;
637 &:hover { opacity: 0.75; }
638 &:active { opacity: 1.0; }
639 }
640
641 button {
642 @extend button.flat;
643 padding: rem(4px) rem(5.3px) rem(5.3px);
644 margin: rem(2.7px);
645 border-radius: 2px;
646 background-color: transparent;
647 }
648}
649
650layouttab {
651 margin: rem(2.7px);
652 padding: rem(5.3px);
653 background-color: transparent;
654
655 label { padding: rem(4px); }
656
657 separator.vertical {
658 margin: rem(2.7px);
659 color: transparent;
660 background-color: $borders_color;
661 }
662
663 button {
664 @extend button.flat;
665 margin: rem(2.7px);
666 border-radius: 2px;
667 padding-left: rem(5.3px);
668 padding-right: rem(5.3px);
669 }
670}
671
672// Close button styling for layouttab.
673layouttab > box {
674 > button:last-child {
675 min-height: rem(13.3px);
676 min-width: rem(13.3px);
677 padding: rem(6.7px);
678 border-radius: 100px;
679 -gtk-outline-radius: 100px;
680 @include button(flat-normal);
681 &:hover { @include button(flat-hover); }
682 &:active { @include button(flat-active); }
683 &:disabled { @include button(flat-insensitive); }
684 }
685
686 > button:last-child image { opacity: 0.55; }
687 > button:last-child:hover image { opacity: 0.75; }
688 > button:last-child:active image { opacity: 1.0; }
689}
690
691layout {
692 border: 1px solid $solid_light_borders_color;
693 -PnlDockBin-handle-size: 1;
694}
695
696eggsearchbar box.search-bar {
697 background-color: $secondary_dark_color;
698}
699
700pillbox {
701 background-color: $bg_color;
702 border-radius: 2px;
703}
704
705docktabstrip,
706tabstrip {
707 min-height: rem(34.7px);
708 padding: rem(5.3px) rem(16px);
709 border-bottom: 1px solid $solid_light_borders_color;
710 background-color: $secondary_dark_color;
711
712 docktab,
713 tab {
714 color: $tertiary_fg_color;
715 font-weight: 700;
716 box-shadow: inset 0 -1px $track_color;
717 &:hover {
718 color: $fg_color;
719 box-shadow: inset 0 -2px $track_color;
720 }
721 &:checked {
722 color: $fg_color;
723 box-shadow: inset 0 -2px $selected_bg_color;
724 }
725 }
726}
727
728layoutstack { // remove undershoot from main editor pane
729 widget scrolledwindow {
730 undershoot {
731 &.top,
732 &.bottom,
733 &.left,
734 &.right {background-image: none; }
735 }
736 }
737}
738
739
740/***************
741 * Gnome-music *
742 ***************/
743
744// side-bar styling
745// FIXME: it doesn't work properly
746GdMainView,
747.side-panel {
748 &:dir(ltr) { border-right: 1px solid $borders_color; }
749 &:dir(rtl) { border-left: 1px solid $borders_color; }
750
751 .view {
752 background-color: $secondary_dark_color;
753 box-shadow: none;
754 &, & row.activatable {
755 padding: 0;
756 background-color: transparent;
757 color: $secondary_fg_color;
758 font-weight: 500;
759 box-shadow: none;
760 &:hover { color: $fg_color; }
761 &:hover:selected,
762 &:selected { @extend %selected_items; }
763 }
764
765 // &:dir(ltr) {
766 // box-shadow: if($variant == 'light', $sidebar-light-ltr,
767 // $sidebar-dark-ltr);
768 // }
769 // &:dir(rtl) {
770 // box-shadow: if($variant == 'light', $sidebar-light-rtl,
771 // $sidebar-dark-rtl);
772 // }
773 }
774}
775
776// player-bar
777// FIXME: it doesn't work properly
778actionbar {
779 &, &.frame { background-color: $secondary_dark_color; }
780 box-shadow: if($variant == 'light', $inline-shadow-light,
781 $inline-shadow-dark);
782
783 button,
784 .linked > button.image-button {
785 @include button(flat-normal);
786 border-radius: 100px;
787 -gtk-outline-radius: 100px;
788 border-image: -gtk-gradient(radial,
789 center bottom, 0,
790 center bottom, 0.001,
791 to($track_color),
792 to(transparent))
793 0 0 0 / 0 0 0px;
794 color: $secondary_fg_color;
795 box-shadow: none;
796 &:hover {
797 @include button(flat-hover);
798 border-image: none;
799 color: $fg_color;
800 box-shadow: none;
801 }
802 &:checked {
803 @include button(flat-checked);
804 border-image: -gtk-gradient(radial,
805 center bottom, 0,
806 center bottom, 0.5,
807 to($selected_bg_color),
808 to(transparent))
809 0 0 2 / 0 0 2px;
810 background-color: transparent;
811 color: $fg_color;
812 box-shadow: none;
813 &:disabled {
814 @include button(flat-checked-insensitive);
815 border-image: none;
816 background-color: transparent;
817 color: $insensitive_fg_color;
818 box-shadow: none;
819 > .label { color: inherit; }
820 }
821 }
822 &:disabled {
823 @include button(flat-insensitive);
824 border-image: none;
825 background-color: transparent;
826 color: $insensitive_secondary_fg_color;
827 box-shadow: none;
828 }
829 }
830}
831
832
833/******************
834 * Gnome-contacts *
835 ******************/
836
837window overlay > grid > frame > grid {
838 toolbar { box-shadow: none; }
839
840 // side-bar styling
841 list {
842 &:dir(ltr) { box-shadow: if($variant == 'light', $sidebar-light-ltr,
843 $sidebar-dark-ltr);
844 }
845 &:dir(rtl) { box-shadow: if($variant == 'light', $sidebar-light-rtl,
846 $sidebar-dark-rtl);
847 }
848
849 row {
850 color: $secondary_fg_color;
851 background-color: if($variant == 'light', rgba(12, 18, 0, 0.01),
852 rgba(18, 22, 0, 0.04));
853
854 &:hover { color: $fg_color; }
855 &:selected,
856 &:selected.activatable {
857 &, & label { color: $selected_bg_color; }
858 background-color: if($variant == 'light', rgba(12, 18, 0, 0.01),
859 rgba(18, 22, 0, 0.04));
860 }
861 &:backdrop { opacity: 1.0; }
862 }
863
864 // hide horizontal separator
865 separator {
866 @extend separator.wide;
867 min-height: 0;
868 border-color: transparent;
869 background-color: transparent;
870 color: transparent;
871 }
872 }
873
874 scrolledwindow undershoot {
875 &.top { @include undershoot(top, $secondary_dark_color); }
876 &.bottom { @include undershoot(bottom, $secondary_dark_color); }
877 &.left { @include undershoot(left, $secondary_dark_color); }
878 &.right { @include undershoot(right, $secondary_dark_color); }
879 }
880}
881
882
883/**********
884 * Baobab *
885 **********/
886
887window > box.vertical > grid.vertical > stack {
888 stack > spinner { // shrink spinner
889 min-width: rem(24px);
890 min-height: rem(24px);
891 padding: rem(53.2px) rem(79.8px) rem(53.2px);
892 }
893}
894
895
896/**********
897 * Evince *
898 **********/
899
900window.background {
901 padding: rem(5.3px);
902
903 > box.vertical > box.horizontal {
904 > widget > label {
905 color: $fixed_fg_color;
906 font-weight: 700;
907 }
908
909 > button.flat:not(.image-button):not(.text-button):not(.toggle) {
910 min-width: rem(13.3px);
911 min-height: rem(13.3px);
912 padding: rem(10.7px);
913 border: none;
914 border-radius: 100px;
915 -gtk-outline-radius: 100px;
916 color: $fixed_fg_color;
917 }
918 }
919}
920
921
922/**************
923 * Gnome-Logs *
924 **************/
925
926// titles inside the button!?
927headerbar > button.flat.popup.title-menu-button.toggle {
928 border-radius: 2px;
929 -gtk-outline-radius: 2px;
930
931 > grid {
932 .title,
933 .subtitle {
934 padding: rem(1.3px) rem(13.3px) rem(1.3px);
935 font-size: 90%;
936 }
937 }
938}
939