themes/whitey/gtk-3.0/_misc.scss (view raw)
1/***************
2 * Gnome panel *
3 ***************/
4
5PanelWidget,
6PanelApplet,
7PanelToplevel {
8 // Always use dark-color of dark variant
9 color: $inverted_secondary_fg_color;
10 background-color: $panel_bg_color;
11 box-shadow: none;
12}
13
14PanelSeparator {
15 border-width: 0;
16 background: none;
17 background-image: none;
18}
19
20.gnome-panel-menu-bar,
21PanelMenuButton,
22PanelApplet > GtkMenuBar.menubar,
23ClockBox {
24 color: $inverted_secondary_fg_color;
25 background-color: transparent;
26 box-shadow: none;
27 font-weight: 700;
28 .label:backdrop,
29 &:backdrop { opacity: 1.0; }
30}
31
32.gnome-panel-menu-bar,
33PanelApplet > GtkMenuBar.menubar {
34 box-shadow: none;
35 & .menuitem {
36 color: $inverted_secondary_fg_color;
37 background-color: transparent;
38 &:hover {
39 color: $selected_fg_color;
40 box-shadow: inset 0 -2px $selected_bg_color;
41 }
42 &:backdrop { opacity: 1.0; }
43 }
44 .menu {
45 font: regular;
46 .menuitem {
47 color: $secondary_fg_color;
48 background-color: $base_color;
49 &:hover {
50 color: $fg_color;
51 background-color: gtkalpha(currentColor, 0.1);
52 box-shadow: none;
53 }
54 &:backdrop { opacity: 1.0; }
55 }
56 .separator { color: $borders_color; }
57 }
58}
59
60PanelAppletFrame {
61 border-width: 0;
62 background-color: transparent;
63 background-image: none;
64}
65
66PanelApplet {
67 GtkButton {
68 &#tasklist-button,
69 &#clock-applet-button,
70 &#showdesktop-button {
71 @include button(flat-normal);
72 padding: 0px 4px;
73 color: $inverted_secondary_fg_color;
74 background-color: transparent;
75 border: none;
76 border-radius: 0;
77 &:hover {
78 color: $selected_fg_color;
79 background-color: transparent;
80 box-shadow: inset 0 -2px $track_color;
81 }
82 &:checked,
83 &:hover:checked,
84 &:insensitive:checked { // 'checked' = 'active'
85 color: $selected_fg_color;
86 background-color: transparent;
87 box-shadow: inset 0 -2px $selected_bg_color;
88 }
89 .label:backdrop,
90 &:backdrop { opacity: 1.0; }
91 }
92 }
93}
94
95// FIXME: w.i.p
96TaskList TaskItem {
97 @include button(flat-normal);
98 padding: 0px 4px;
99 color: $inverted_secondary_fg_color;
100 background-color: transparent;
101 border: none;
102 border-radius: 0;
103 &:hover {
104 color: $selected_fg_color;
105 background-color: transparent;
106 box-shadow: inset 0 -2px $track_color;
107 }
108 &:checked,
109 &:hover:checked,
110 &:insensitive:checked { // 'checked' = 'active'
111 color: $selected_fg_color;
112 background-color: transparent;
113 box-shadow: inset 0 -2px $selected_bg_color;
114 }
115 .label:backdrop,
116 &:backdrop { opacity: 1.0; }
117}
118
119WpTaskTitle {
120 background-color: transparent;
121 .label { color: $inverted_secondary_fg_color; }
122}
123
124WnckPager {
125 &:selected { box-shadow: inset 0 -2px $selected_bg_color; }
126 &:backdrop { opacity: 1.0; }
127}
128
129NaTrayApplet {
130 -NaTrayApplet-icon-padding: 2;
131 -NaTrayApplet-icon-size: 16;
132}
133
134
135/**************
136 * Tweak-tool *
137 **************/
138
139// sidebar
140.tweak-categories.list {
141 background-color: $secondary_dark_color;
142 color: $secondary_fg_color;
143
144 &:dir(ltr) { box-shadow: if($variant == 'light', $sidebar-light-ltr,
145 $sidebar-dark-ltr);
146 }
147 &:dir(rtl) { box-shadow: if($variant == 'light', $sidebar-light-rtl,
148 $sidebar-dark-rtl);
149 }
150
151 .separator { -GtkWidget-wide-separators: true; }
152}
153
154.tweak-category {
155 @extend .list-row;
156 color: $secondary_fg_color;
157 font-weight: 500;
158 &:hover { color: $fg_color; }
159 &:selected {
160 color: $selected_bg_color;
161 background-color: transparent;
162 }
163}
164
165// container and tweaks in a group
166.tweak-group {
167 padding: 6px;
168 background-color: $base_color;
169}
170
171.tweak {
172 background-color: $base_color;
173 &:hover { background-color: transparent; }
174}
175
176.tweak-group-white,
177.tweak-white {
178 background-color: $base_color;
179}
180
181
182/*******************
183 * Gnome-Flashback *
184 *******************/
185
186// use message-dialog style for popup osd windows
187FlashbackOsdWindow,
188GfPopupWindow {
189 border-radius: 2px;
190 border: 1px solid $borders_color;
191 opacity: 0.9;
192 &.background {
193 background-color: $inverted_dark_color;
194 color: $inverted_fg_color;
195 }
196}
197
198GfInputSourcePopup {
199 #input-source {
200 color: $inverted_fg_color;
201 font-size: 2em;
202 font-weight: 700;
203 &:selected {
204 border-radius: 2px;
205 background-color: $track_color;
206 color: $accent_color;
207 }
208 }
209}
210
211FlashbackLabelWindow {
212 font-size: 4em;
213}
214
215// popup for inpu-source candidates
216GfCandidatePopup {
217 &, &.solid {
218 border-radius: 2px;
219 border: 1px solid $borders_color;
220 color: $inverted_fg_color;
221 }
222
223 GfCandidateBox {
224 transition: none;
225 .label { padding: 0.2em 0.2em 0.3em; } // half of .menuitem
226
227 &:last-child { padding-left: 0; }
228 &:hover,
229 &:selected {
230 border-radius: 0;
231 background-color: $track_color;
232 color: $selected_fg_color;
233 }
234 }
235
236 .button,
237 .linked > .button { // page-up&down buttons
238 &,
239 &:first-child,
240 &:last-child {
241 @extend .button.flat;
242 border-radius: 0;
243 border: none;
244 background-color: transparent;
245 color: $secondary_accent_color;
246 box-shadow: none;
247 }
248 }
249}
250
251
252/************
253 * Nautilus *
254 ************/
255
256EelEditableLabel {
257 // Workaround for invisible text in rename entry in Nautilus 3.14.x
258 // Copied from arc-theme:
259 // 966778df08c2ee94dfdf55c9281791b0b2121497
260
261 &.entry { transition: none; }
262}
263
264.nautilus-desktop-window,
265.nautilus-desktop-window .notebook,
266.nautilus-desktop-window .notebook > GtkStack {
267 background: transparent;
268}
269
270.nautilus-desktop.nautilus-canvas-item {
271 color: $selected_fg_color;
272}
273
274.nautilus-canvas-item {
275 border-radius: 2px;
276}
277
278.nautilus-circular-button {
279 border-radius: 100px;
280 outline-radius: 100px;
281}
282
283NautilusTrashBar {
284 @extend GtkInfoBar;
285}
286
287.disk-space-display {
288 border: 0 none transparent;
289
290 &.free {
291 background-color: $track_color;
292 color: $insensitive_fg_color;
293 }
294
295 &.used { background-color: $selected_bg_color; }
296
297 &.unknown { background-color: $warning_color; }
298}
299
300
301/*********
302 * Geary *
303 *********/
304
305// Geary is the most ugly app for theming.
306.geary-titlebar-left {
307 // remove unexpected "hardcoded" vertical separator
308 .separator { opacity: 0; }
309}
310
311.geary-titlebar-right {
312 // stop double-shadows on right paned header-bar
313 box-shadow: none;
314}
315
316
317/************
318 * Epiphany *
319 ************/
320
321// reset inverted foreground colour
322EphyWindow {
323 .floating-bar { color: $secondary_fg_color; }
324
325 .search-bar {
326 // sset same padding with GtkEntry
327 .linked > .button { padding: 0.7em 1em 0.8em; }
328
329 // force using circle-button
330 .button.flat.close.raised {
331 padding: 0.75em;
332 border-radius: 100px;
333 outline-radius: 100px;
334 }
335 }
336}
337
338
339/************
340 * Seahorse *
341 ************/
342
343// remove weird borders
344SeahorseKeyManager {
345 .sidebar,
346 .pane-separator {
347 &, &:backdrop {
348 border-width: 0;
349 border-style: none;
350 border-color: transparent;
351 }
352 }
353}
354
355
356/**********
357 * Polari *
358 **********/
359
360.polari-input-area {
361 border-top: 1px solid $borders_color;
362 box-shadow: if($variant == 'light', $inline-shadow-light,
363 $inline-shadow-dark);
364}
365
366.polari-room-list { // override labels
367 .list-row {
368 font-weight: 700;
369 &:not(:hover):not(:active):not(:selected) {
370 .label,
371 GtkImage { opacity: 1.0; }
372 }
373
374 &.inactive {
375 &:not(:hover):not(:active):not(:selected) {
376 .label,
377 GtkImage { opacity: 0.65; }
378 }
379 }
380 }
381}
382
383.polari-nick-entry {
384 border-image: none;
385 font-weight: 700;
386}
387
388// Why GtkLabel was needed, crazy...
389GtkBox > .header-bar > .label.polari-titlebar-separator {
390 border: none;
391 opacity: 0;
392}
393
394
395/*************
396 * RhythmBox *
397 *************/
398
399// add top-border to inline-toolbar
400.inline-toolbar.toolbar.horizontal.sidebar-toolbar {
401 @if $variant == 'light' {
402 box-shadow: inset 0 1px $solid_light_borders_color,
403 inset 0 2px 2px rgba(0, 0, 0, 0.05),
404 inset -2px 0 2px -2px rgba(0, 0, 0, 0.03),
405 inset -3px 0 3px -2px rgba(0, 0, 0, 0.03);
406 }
407 @else {
408 box-shadow: inset 0 1px $solid_light_borders_color,
409 inset 0 2px 2px rgba(0, 0, 0, 0.05),
410 inset -2px 0 1px -2px rgba(0, 0, 0, 0.02),
411 inset -3px 0 3px -2px rgba(0, 0, 0, 0.04);
412 }
413
414 &:dir(rtl) {
415 @if $variant == 'light' {
416 box-shadow: inset 0 1px $solid_light_borders_color,
417 inset 0 2px 2px rgba(0, 0, 0, 0.05),
418 inset 2px 0 2px -2px rgba(0, 0, 0, 0.03),
419 inset 3px 0 3px -2px rgba(0, 0, 0, 0.03);
420 }
421 @else {
422 box-shadow: inset 0 1px $solid_light_borders_color,
423 inset 0 2px 2px rgba(0, 0, 0, 0.05),
424 inset 2px 0 1px -2px rgba(0, 0, 0, 0.02),
425 inset 3px 0 3px -2px rgba(0, 0, 0, 0.04);
426 }
427 }
428}
429
430// fix sidebar background colour
431.sidebar-paned GtkStack RBDisplayPageTree {
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// stop drawing fake-shadows when enabling header-bar extension
439GtkBox.vertical > GtkBox.vertical > .toolbar {
440 box-shadow: none;
441}
442
443
444/**************
445 * Calculator *
446 **************/
447
448MathWindow {
449 & :not(.titlebar),
450 & :not(.header-bar) {
451 .button:not(.flat):not(.titlebutton) {
452 @extend .button.flat;
453 padding: 0.75em 1em 0.75em; // FIXME: broken in 12pt fonts?
454 border: 0.75em solid transparent;
455 border-radius: 2px;
456 font-weight: 700;
457
458 &.suggested-action { // '=' button
459 color: transparent;
460 font-size: 0;
461 @each $s,$as in ('',''),
462 (':hover','-hover'),
463 (':active','-active'),
464 (':insensitive','-insensitive') {
465 &#{$s} {
466 $_url: 'assets/equal#{$as}#{$asset_suffix}';
467 @include button(normal#{$as});
468 border-style: none;
469 border-radius: 100px;
470 background-color: transparent;
471 background-image: -gtk-scaled(url('#{$_url}.png'),
472 url('#{$_url}@2.png'));
473 background-size: 32px;
474 background-repeat: no-repeat;
475 background-position: center;
476 box-shadow: none;
477 transition-duration: 0.2s;
478 animation: none; // FIXME: animation breaks padding.
479 }
480 }
481 }
482 }
483 }
484}
485
486
487/*********
488 * Gedit *
489 *********/
490
491GeditViewFrame {
492 .gedit-search-slider {
493 @extend .osd.toolbar;
494 padding: 3px;
495 border-radius: 2px;
496 border-width: 9px;
497 border-image: -gtk-scaled(url("assets/osd-shadow#{$asset_suffix}.png"),
498 url("assets/osd-shadow#{$asset_suffix}@2.png"))
499 10 / 10px stretch;
500 color: $inverted_fg_color;
501 opacity: 0.9;
502
503 .entry,
504 .linked > .entry {
505 &,
506 &.error,
507 &.warning {
508 color: $inverted_fg_color;
509 &:focus { color: $selected_fg_color; }
510 &:insensitive { color: $insensitive_inverted_fg_color; }
511 }
512 }
513 }
514}
515
516.gedit-titlebar-left {
517 .button.flat { // left-pane header button
518 border-radius: 2px;
519 outline-radius: 2px;
520 }
521}
522
523GeditViewHolder GtkScrolledWindow {
524 .undershoot { // remove undershoot
525 &.top,
526 &.bottom,
527 &.left,
528 &.right { background-image: none; }
529 }
530}
531
532
533/***********
534 * Builder *
535 ***********/
536
537// pane header styling
538GbViewStack GtkBox.header.notebook,
539GbEditorWorkspace > GtkPaned > GtkBox > GtkBox.header.notebook,
540GbWorkspacePane GtkBox.header.notebook {
541 border-bottom: 1px solid $borders_color;
542 background-color: transparent;
543}
544
545GbWorkspacePane {
546 GtkStackSwitcher .button { padding: 1em; }
547
548 .pane-separator { background-color: $solid_light_borders_color; }
549}
550
551// remove unwanted border
552GtkScrolledWindow.gb-linked-scroller {
553 border-top: none;
554}
555
556// force using fixed-width font
557GbSourceStyleSchemeWidget GtkSourceView,
558GtkEntry.gb-command-bar-entry {
559 font-family: Monospace;
560}
561
562GbTerminalView > GtkPaned > GtkScrolledWindow {
563 &, & > VteTerminal {
564 font-family: Monospace;
565 font-weight: 500;
566 font-size: 1em;
567 }
568}
569
570GbTerminalView { // always use dark variant
571 background-color: $inverted_dark_color;
572 color: $inverted_fg_color;
573}
574
575// Disable various animations that are enabled by default and really annoying
576// to the overall flow of Builder.
577GbSearchDisplayGroup GtkListBox .list-row { transition: none; }
578
579// remove undershoot from main editor pane
580GbEditorFrame GtkScrolledWindow {
581 .undershoot {
582 &.top,
583 &.bottom,
584 &.left,
585 &.right { background-image: none; }
586 }
587}
588
589
590/***************
591 * Gnome-music *
592 ***************/
593
594// side-bar styling
595// FIXME: it doesn't work properly
596GdMainView,
597.side-panel {
598 &:dir(ltr) { border-right: 1px solid $borders_color; }
599 &:dir(rtl) { border-left: 1px solid $borders_color; }
600
601 .view {
602 background-color: $secondary_dark_color;
603 box-shadow: none;
604 &, &.list-row.activatable {
605 padding: 0;
606 background-color: transparent;
607 color: $secondary_fg_color;
608 font-weight: 500;
609 box-shadow: none;
610 &:hover { color: $fg_color; }
611 &:hover:selected,
612 &:selected { @extend %selected_items; }
613 }
614 }
615}
616
617// player-bar
618// FIXME: it doesn't work properly
619.action-bar {
620 &, &.frame { background-color: $secondary_dark_color; }
621 box-shadow: if($variant == 'light', $inline-shadow-light,
622 $inline-shadow-dark);
623 padding: 0.4em;
624
625 .button,
626 .linked > .button.image-button {
627 @extend .button.flat;
628 border-radius: 100px;
629 outline-radius: 100px;
630 box-shadow: none;
631 border-image: -gtk-gradient(radial,
632 center bottom, 0,
633 center bottom, 0.001,
634 to($track_color),
635 to(transparent))
636 0 0 0 / 0 0 0px;
637 color: $secondary_fg_color;
638 &:hover {
639 box-shadow: none;
640 border-image: none;
641 color: $fg_color;
642 }
643 &:checked {
644 box-shadow: none;
645 border-image: -gtk-gradient(radial,
646 center bottom, 0,
647 center bottom, 0.5,
648 to($selected_bg_color),
649 to(transparent))
650 0 0 2 / 0 0 2px;
651 background-color: transparent;
652 color: $fg_color;
653 &:insensitive {
654 box-shadow: none;
655 background-color: transparent;
656 color: $insensitive_fg_color;
657 border-image: none;
658 > .label { color: inherit; }
659 }
660 }
661 &:insensitive {
662 box-shadow: none;
663 background-color: transparent;
664 color: $insensitive_secondary_fg_color;
665 border-image: none;
666 }
667 }
668}
669
670
671/******************
672 * Gnome-contacts *
673 ******************/
674
675ContactsWindow {
676 // side-bar styling
677 ContactsListPane ContactsView { // = '.list'
678 &:dir(ltr) { box-shadow: if($variant == 'light', $sidebar-light-ltr,
679 $sidebar-dark-ltr);
680 }
681 &:dir(rtl) { box-shadow: if($variant == 'light', $sidebar-light-rtl,
682 $sidebar-dark-rtl);
683 }
684
685 .list-row.activatable {
686 color: $secondary_fg_color;
687 background-color: if($variant == 'light', rgba(12, 18, 0, 0.01),
688 rgba(18, 22, 0, 0.04));
689
690 &:hover { color: $fg_color; }
691 &:selected {
692 color: $selected_bg_color;
693 background-color: if($variant == 'light', rgba(12, 18, 0, 0.01),
694 rgba(18, 22, 0, 0.04));
695 }
696 &:backdrop { opacity: 1.0; }
697 }
698
699 // hide horizontal separator
700 .separator { -GtkWidget-wide-separators: true; }
701 }
702
703 ContactsListPane GtkScrolledWindow {
704 .undershoot {
705 &.top { @include undershoot(top, $secondary_dark_color); }
706 &.bottom { @include undershoot(bottom, $secondary_dark_color); }
707 &.left { @include undershoot(left, $secondary_dark_color); }
708 &.right { @include undershoot(right, $secondary_dark_color); }
709 }
710 }
711}
712
713
714/******************
715 * Gnome-Terminal *
716 ******************/
717
718TerminalScreen,
719TerminalWindow.background { // dark variant as default
720 background-color: $inverted_dark_color;
721 color: $selected_fg_color;
722}
723
724TerminalWindow {
725 .scrollbar {
726 .slider { // always use dark variant
727 background-color: gtkopacity($inverted_tertiary_fg_color, 0.55);
728 &:hover { background-color: gtkopacity($inverted_secondary_fg_color, 0.55); }
729 &:active { background-color: $inverted_fg_color; }
730 &:insensitive { opacity: 0.4; }
731 }
732
733 .trough { // hide trough
734 background-color: transparent;
735 border: 1px none transparent;
736 }
737 }
738}
739
740
741/**********
742 * Evince *
743 **********/
744
745EvAnnotationWindow {
746 padding: 0.4em;
747
748 GtkBox {
749 > GtkLabel {
750 color: $fixed_fg_color;
751 font-weight: 700;
752 }
753
754 > GtkBox > .button.flat {
755 padding: 1em;
756 border: none;
757 border-radius: 100px;
758 outline-radius: 100px;
759 color: $fixed_fg_color;
760 }
761 }
762}
763