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