Differential D22877 Diff 62994 src/gtk3/widgets/_base.scss

Changeset View

Standalone View

View Options

src/gtk3/widgets/_base.scss

1@charset "UTF-8"; 1​@charset "UTF-8";
2 2​
3@function gtkalpha($c,$a) { ​
4 @return unquote("alpha(#{$c},#{$a})"); ​
5} ​
6 ​
7$ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); 3​$ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
8 4​
9* { 5​* {
10 padding: 0; 6​ padding: 0;
11 -GtkToolButton-icon-spacing: 4; 7​ -GtkToolButton-icon-spacing: 4;
12 -GtkTextView-error-underline-color: $error_color; 8​ -GtkTextView-error-underline-color: gtk("@error_color");
13 9​
14 // The size for scrollbars. The slider is 2px smaller, but we keep it 10​ // The size for scrollbars. The slider is 2px smaller, but we keep it
15 // up so that the whole area is sensitive to button presses for the 11​ // up so that the whole area is sensitive to button presses for the
16 // slider. The stepper button is larger in both directions, the slider 12​ // slider. The stepper button is larger in both directions, the slider
17 // only in the width 13​ // only in the width
18 14​
19 -GtkScrolledWindow-scrollbar-spacing: 0; 15​ -GtkScrolledWindow-scrollbar-spacing: 0;
20 16​
Show All 14 Lines
35} 31​}
36 32​
37 33​
38/*************** 34​/***************
39 * Base States * 35​ * Base States *
40 ***************/ 36​ ***************/
41 37​
42.background { 38​.background {
43 color: w_color(text); 39​ color: gtk("@theme_fg_color");
44 background-color: w_color(normal); 40​ background-color: gtk("@theme_bg_color");
45 41​
46 &:backdrop { 42​ &:backdrop {
47 text-shadow: none; 43​ text-shadow: none;
48 -gtk-icon-shadow: none; 44​ -gtk-icon-shadow: none;
49 color: backdrop(w_color(text)); 45​ color: gtk("@theme_unfocused_fg_color");
50 background-color: backdrop(w_color(normal)); 46​ background-color: gtk("@theme_unfocused_bg_color");
51 } 47​ }
52} 48​}
53 49​
54/* 50​/*
55 These wildcard seems unavoidable, need to investigate. 51​ These wildcard seems unavoidable, need to investigate.
56 Wildcards are bad and troublesome, use them with care, 52​ Wildcards are bad and troublesome, use them with care,
57 or better, just don't. 53​ or better, just don't.
58 Everytime a wildcard is used a kitten dies, painfully. 54​ Everytime a wildcard is used a kitten dies, painfully.
59*/ 55​*/
60 56​
61*:disabled { 57​*:disabled {
62 -gtk-icon-effect: dim; 58​ -gtk-icon-effect: dim;
63} 59​}
64 60​
65.gtkstyle-fallback { 61​.gtkstyle-fallback {
66 background-color: w_color(normal); 62​ background-color: gtk("@theme_bg_color");
67 color: w_color(text); 63​ color: gtk("@theme_fg_color");
68 &:hover { 64​ &:hover {
69 background-color: lighten(w_color(normal), 10%); 65​ background-color: gtkshade("@theme_bg_color", 1.1);
70 color: w_color(text); 66​ color: gtk("@theme_fg_color");
71 } 67​ }
72 &:active { 68​ &:active {
73 background-color: darken(w_color(normal), 10%); 69​ background-color: gtkshade("@theme_bg_color", 0.9);
74 color: w_color(text); 70​ color: gtk("@theme_fg_color");
75 } 71​ }
76 &:disabled { 72​ &:disabled {
77 background-color: insensitive(w_color(normal)); 73​ background-color: gtk("@insensitive_fg_color");
78 color: insensitive(w_color(text)); 74​ color: gtk("@insensitive_fg_color");
79 } 75​ }
80 &:selected { 76​ &:selected {
81 background-color: s_color(normal); 77​ background-color: gtk("@theme_selected_bg_color");
82 color: s_color(text); 78​ color: gtk("@theme_selected_fg_color");
83 } 79​ }
84} 80​}
85 81​
86%view, 82​%view,
87.view { 83​.view {
88 color: v_color(text); 84​ color: gtk("@theme_text_color");
89 background-color: v_color(normal); 85​ background-color: gtk("@theme_base_color");
90 86​
91 &:backdrop { 87​ &:backdrop {
92 color: backdrop(v_color(text)); 88​ color: gtk("@theme_unfocused_text_color");
93 background-color: backdrop(v_color(normal)); 89​ background-color: gtk("@theme_unfocused_base_color");
94 } 90​ }
95 91​
96 &:disabled { 92​ &:disabled {
97 color: insensitive(v_color(text)); 93​ color: gtk("@insensitive_base_fg_color");
98 } 94​ }
99 95​
100 &:selected { 96​ &:selected {
101 &:focus, & { 97​ &:focus, & {
102 border-radius: $r; 98​ border-radius: $r;
103 @extend %selected_items; 99​ @extend %selected_items;
104 } 100​ }
105 } 101​ }
106} 102​}
107 103​
108.view, 104​.view,
109textview { 105​textview {
110 text { 106​ text {
111 @extend %view; 107​ @extend %view;
112 108​
113 selection { &:focus, & { @extend %selected_items; }} 109​ selection { &:focus, & { @extend %selected_items; }}
114 } 110​ }
115} 111​}
116 112​
117textview border { 113​textview border {
118 background-color: v_color(normal); 114​ background-color: gtk("@theme_base_color");
119 background-image: image($border_color); // HACK: the border node just draws background so, 115​ background-image: image(gtk("@borders")); // HACK: the border node just draws background so,
120 background-repeat: no-repeat; // using a background-image to draw the border 116​ background-repeat: no-repeat; // using a background-image to draw the border
121 117​
122 &:backdrop { background-color: backdrop(v_color(normal)); } 118​ &:backdrop {
119​ background-color: gtk("@theme_unfocused_base_color");
120​ }
123 121​
124 &.bottom { 122​ &.bottom {
125 background-size: 100% 1px; 123​ background-size: 100% 1px;
126 background-position: top; 124​ background-position: top;
127 } 125​ }
128 126​
129 &.top { 127​ &.top {
130 background-size: 100% 1px; 128​ background-size: 100% 1px;
131 background-position: bottom; 129​ background-position: bottom;
132 } 130​ }
133 131​
134 &.left { 132​ &.left {
135 background-size: 1px 100%; 133​ background-size: 1px 100%;
136 background-position: right; 134​ background-position: right;
137 } 135​ }
138 136​
139 &.right { 137​ &.right {
140 background-size: 1px 100%; 138​ background-size: 1px 100%;
141 background-position: left; 139​ background-position: left;
142 } 140​ }
143} 141​}
144 142​
145.rubberband, 143​.rubberband,
146rubberband { 144​rubberband {
147 border: 1px solid s_color(normal); 145​ border: 1px solid gtk("@theme_selected_bg_color");
148 background-color: transparentize(s_color(normal),0.8); 146​ background-color: gtkalpha("@theme_selected_bg_color", 0.8);
149 &:backdrop { 147​ &:backdrop {
150 border-color: backdrop(s_color(normal)); 148​ border-color: gtk("@theme_unfocused_selected_bg_color");
151 background-color: backdrop(transparentize(s_color(normal),0.8)); 149​ background-color: gtkalpha("@theme_unfocused_selected_bg_color", 0.8);
152 } 150​ }
153} 151​}
154 152​
155flowbox { 153​flowbox {
156 rubberband { @extend rubberband; } 154​ rubberband { @extend rubberband; }
157 155​
158 flowboxchild { 156​ flowboxchild {
159 padding: 3px; 157​ padding: 3px;
160 border-radius: $r; 158​ border-radius: $r;
161 159​
162 &:selected { 160​ &:selected {
163 @extend %selected_items; 161​ @extend %selected_items;
164 162​
165 outline-offset: 0px; 163​ outline-offset: 0px;
166 } 164​ }
167 } 165​ }
168} 166​}
169 167​
170label { 168​label {
171 &.separator { 169​ &.separator {
172 color: w_color(text); 170​ color: gtk("@theme_fg_color");
173 @extend .dim-label; 171​ @extend .dim-label;
174 &:backdrop { color: backdrop(w_color(text)); } 172​ &:backdrop {
173​ color: gtk("@theme_unfocused_fg_color");
174​ }
175 } 175​ }
176 176​
177 selection { 177​ selection {
178 background-color: s_color(normal); 178​ background-color: gtk("@theme_selected_bg_color");
179 color: s_color(text) 179​ color: gtk("@theme_selected_fg_color");
180 } 180​ }
181 &:disabled { 181​ &:disabled {
182 color: insensitive(w_color(text)); 182​ color: gtk("@insensitive_fg_color");
183 selection { @extend %selected_items:disabled; } 183​ selection { @extend %selected_items:disabled; }
184 184​
185 &:backdrop { color: backdrop(insensitive(w_color(text))); } 185​ &:backdrop {
186​ color: gtk("@insensitive_unfocused_fg_color")
187​ }
186 } 188​ }
187 &:backdrop { 189​ &:backdrop {
188 color:backdrop(w_color(text)); 190​ color: gtk("@theme_unfocused_text_color");
189 191​
190 selction {@extend %selected_items:backdrop;} 192​ selction {@extend %selected_items:backdrop;}
191 } 193​ }
192} 194​}
193 195​
194.dim-label { 196​.dim-label {
195 opacity: 0.5; 197​ opacity: 0.5;
196 text-shadow: none; 198​ text-shadow: none;
197} 199​}
198 200​
199assistant { 201​assistant {
200 .sidebar { 202​ .sidebar {
201 background-color: v_color(text); 203​ background-color: gtk("@theme_text_color");
202 border-top: 1px solid $border_color; 204​ border-top: 1px solid gtk("@borders");
203 205​
204 &:backdrop { 206​ &:backdrop {
205 background-color: backdrop(v_color(text)); 207​ background-color: gtk("@theme_unfocused_text_color");
206 border-color: backdrop($border_color); 208​ border-color: gtk("@unfocused_borders");
207 } 209​ }
208 } 210​ }
209 &.csd .sidebar { border-top-style: none; } 211​ &.csd .sidebar { border-top-style: none; }
210 .sidebar label { 212​ .sidebar label {
211 padding: 6px 12px; 213​ padding: 6px 12px;
212 } 214​ }
213 .sidebar label.highlight { 215​ .sidebar label.highlight {
214 background-color: mix(v_color(normal), v_color(text), 80%); 216​ background-color: gtkmix("@theme_base_color", "@theme_text_color", 0.8);
215 } 217​ }
216} 218​}
217 219​
218%osd, 220​%osd,
219.osd { 221​.osd {
220 color: w_color(text); 222​ color: gtk("@theme_fg_color");
221 border: 1px solid $border_color; 223​ border: 1px solid gtk("@borders");
222 background-color: transparentize(w_color(normal),0.2); 224​ background-color: gtkalpha("@theme_bg_color",0.8);
223 background-clip: padding-box; 225​ background-clip: padding-box;
224 box-shadow: none; 226​ box-shadow: none;
225 text-shadow: none; 227​ text-shadow: none;
226 -gtk-icon-shadow: none; 228​ -gtk-icon-shadow: none;
227 &:backdrop { 229​ &:backdrop {
228 color: backdrop(w_color(text)); 230​ color: gtk("@theme_unfocused_text_color");
229 background-color: backdrop(transparentize(w_color(normal),0.2)); 231​ background-color: gtkalpha("@theme_unfocused_bg_color", 0.8);
230 -gtk-icon-shadow: none; 232​ -gtk-icon-shadow: none;
231 } 233​ }
232} 234​}
233 235​
234%selected_items { 236​%selected_items {
235 background-color: s_color(normal); 237​ background-color: gtk("@theme_selected_bg_color");
236 color: s_color(text); 238​ color: gtk("@theme_selected_fg_color");
237 &:hover { 239​ &:hover {
238 background-color: s_color(hover); 240​ background-color: gtk("@theme_hovering_selected_bg_color");
239 color: w_color(text); 241​ color: gtk("@theme_fg_color");
240 } 242​ }
241 &:backdrop { 243​ &:backdrop {
242 background-color: backdrop(s_color(backdrop)); 244​ background-color: gtk("@theme_unfocused_selected_bg_color");
243 color: backdrop(v_color(normal)); 245​ color: gtk("@theme_unfocused_base_color");
244 } 246​ }
245} 247​}
246 248​
247%selected_items { 249​%selected_items {
248 background-color: s_color(normal); 250​ background-color: gtk("@theme_selected_bg_color");
249 border-radius: 0px; 251​ border-radius: 0px;
250 252​
251 @at-root %nobg_selected_items, & { 253​ @at-root %nobg_selected_items, & {
252 color: s_color(text); 254​ color: gtk("@theme_selected_fg_color");
253 255​
254 &:disabled { color: insensitive(s_color(text)); } 256​ &:disabled {
257​ color: gtk("@insensitive_selected_fg_color");
258​ }
255 259​
256 &:backdrop { 260​ &:backdrop {
257 color: backdrop(s_color(text)); 261​ color: gtk("@theme_unfocused_selected_fg_color");
258 262​
259 &:disabled { color: backdrop(insensitive(s_color(text))); } 263​ &:disabled {
264​ color: gtk("@insensitive_unfocused_selected_fg_color");
265​ }
260 } 266​ }
261 } 267​ }
262} 268​}