diff options
Diffstat (limited to 'accounts/gkleen@sif/taffybar/taffybar.css')
-rw-r--r-- | accounts/gkleen@sif/taffybar/taffybar.css | 146 |
1 files changed, 146 insertions, 0 deletions
diff --git a/accounts/gkleen@sif/taffybar/taffybar.css b/accounts/gkleen@sif/taffybar/taffybar.css new file mode 100644 index 00000000..7a297465 --- /dev/null +++ b/accounts/gkleen@sif/taffybar/taffybar.css | |||
@@ -0,0 +1,146 @@ | |||
1 | @define-color transparent rgba(0.0, 0.0, 0.0, 0.0); | ||
2 | @define-color white #808080; | ||
3 | @define-color gray #202020; | ||
4 | @define-color green #008000; | ||
5 | @define-color yellow #808000; | ||
6 | @define-color blue #000080; | ||
7 | @define-color red #800000; | ||
8 | @define-color black #000000; | ||
9 | /* @define-color taffy-blue #0c7cd5; */ | ||
10 | @define-color taffy-blue @blue; | ||
11 | |||
12 | @define-color active-window-color @white; | ||
13 | @define-color urgent-window-color @taffy-blue; | ||
14 | @define-color font-color @white; | ||
15 | @define-color menu-background-color @black; | ||
16 | @define-color menu-font-color @white; | ||
17 | |||
18 | /* Top level styling */ | ||
19 | |||
20 | .taffy-window * { | ||
21 | /* | ||
22 | This removes any existing styling from UI elements. Taffybar will not | ||
23 | cohere with your gtk theme. | ||
24 | */ | ||
25 | all: unset; | ||
26 | |||
27 | font-family: "Fira Sans", sans-serif; | ||
28 | font-size: 21px; | ||
29 | color: @font-color; | ||
30 | } | ||
31 | |||
32 | .taffy-box { | ||
33 | /* border-radius: 10px; */ | ||
34 | background-color: @black; | ||
35 | } | ||
36 | |||
37 | .inner-pad { | ||
38 | /* padding-bottom: 5px; */ | ||
39 | /* padding-top: 5px; */ | ||
40 | padding-left: 2px; | ||
41 | padding-right: 2px; | ||
42 | } | ||
43 | |||
44 | .contents { | ||
45 | /* padding-bottom: 4px; */ | ||
46 | /* padding-top: 4px; */ | ||
47 | padding-right: 2px; | ||
48 | padding-left: 2px; | ||
49 | transition: background-color .5s; | ||
50 | border-radius: 5px; | ||
51 | } | ||
52 | |||
53 | /* Workspaces styling */ | ||
54 | |||
55 | .workspace-label { | ||
56 | padding-right: 3px; | ||
57 | padding-left: 2px; | ||
58 | font-size: 21px; | ||
59 | } | ||
60 | |||
61 | .workspace-label.active { | ||
62 | color: @green; | ||
63 | } | ||
64 | .workspace-label.visible { | ||
65 | color: @yellow; | ||
66 | } | ||
67 | .workspace-label.empty { | ||
68 | color: @gray; | ||
69 | } | ||
70 | .workspace-label.urgent { | ||
71 | color: @red; | ||
72 | } | ||
73 | |||
74 | .active .contents { | ||
75 | background-color: rgba(0.0, 0.0, 0.0, 0.5); | ||
76 | } | ||
77 | |||
78 | .visible .contents { | ||
79 | background-color: rgba(0.0, 0.0, 0.0, 0.2); | ||
80 | } | ||
81 | |||
82 | .window-icon-container { | ||
83 | transition: opacity .5s, box-shadow .5s; | ||
84 | opacity: 1; | ||
85 | } | ||
86 | |||
87 | /* This gives space for the box-shadow (they look like underlines) that follow. | ||
88 | This will actually affect all widgets, (not just the workspace icons), but | ||
89 | that is what we want since we want the icons to look the same. */ | ||
90 | .auto-size-image, .sni-tray { | ||
91 | padding-top: 3px; | ||
92 | padding-bottom: 3px; | ||
93 | } | ||
94 | |||
95 | .window-icon-container.active { | ||
96 | box-shadow: inset 0 -3px @white; | ||
97 | } | ||
98 | |||
99 | .window-icon-container.urgent { | ||
100 | box-shadow: inset 0 -3px @urgent-window-color; | ||
101 | } | ||
102 | |||
103 | .window-icon-container.inactive .window-icon { | ||
104 | padding: 0px; | ||
105 | } | ||
106 | |||
107 | .window-icon-container.minimized .window-icon { | ||
108 | opacity: .3; | ||
109 | } | ||
110 | |||
111 | .window-icon { | ||
112 | opacity: 1; | ||
113 | transition: opacity .5s; | ||
114 | } | ||
115 | |||
116 | /* Button styling */ | ||
117 | |||
118 | button { | ||
119 | background-color: @transparent; | ||
120 | border-width: 0px; | ||
121 | border-radius: 0px; | ||
122 | } | ||
123 | |||
124 | button:checked, button:hover .Contents:hover { | ||
125 | box-shadow: inset 0 -3px @taffy-blue; | ||
126 | } | ||
127 | |||
128 | /* Menu styling */ | ||
129 | |||
130 | /* The ".taffy-window" prefixed selectors are needed because if they aren't present, | ||
131 | the top level .Taffybar selector takes precedence */ | ||
132 | .taffy-window menuitem *, menuitem * { | ||
133 | color: @menu-font-color; | ||
134 | } | ||
135 | |||
136 | .taffy-window menuitem, menuitem { | ||
137 | background-color: @menu-background-color; | ||
138 | } | ||
139 | |||
140 | .taffy-window menuitem:hover, menuitem:hover { | ||
141 | background-color: @taffy-blue; | ||
142 | } | ||
143 | |||
144 | .taffy-window menuitem:hover > label, menuitem:hover > label { | ||
145 | color: @white; | ||
146 | } | ||