Changeset View
Changeset View
Standalone View
Standalone View
src/gtk3/widgets/_menus.scss
1 | @charset "UTF-8"; | 1 | @charset "UTF-8"; | ||
---|---|---|---|---|---|
2 | 2 | | |||
3 | @mixin item-highlight { | ||||
4 | @if $new-highlight { | ||||
5 | background-color: gtk("@theme_selected_bg_color"); | ||||
6 | color: gtk("@theme_button_foreground_active"); | ||||
7 | border: 1px solid gtk("@theme_button_decoration_focus"); | ||||
8 | } @else { | ||||
9 | background-color: gtk("@theme_button_decoration_focus"); | ||||
10 | color: gtk("@theme_button_foreground_active") | ||||
11 | } | ||||
12 | border-radius: 3px; | ||||
13 | } | ||||
14 | | ||||
3 | /********* | 15 | /********* | ||
4 | * Menus * | 16 | * Menus * | ||
5 | *********/ | 17 | *********/ | ||
6 | 18 | | |||
7 | | ||||
8 | menubar, | 19 | menubar, | ||
9 | .menubar { | 20 | .menubar { | ||
10 | -GtkWidget-window-dragging: true; | 21 | -GtkWidget-window-dragging: true; | ||
11 | padding: 0px; | 22 | padding: 0px; | ||
12 | box-shadow: none; | 23 | box-shadow: none; | ||
13 | border-style: none; | 24 | border-style: none; | ||
14 | background-color: w_color(normal); | 25 | background-color: gtk("@theme_bg_color"); | ||
26 | | ||||
15 | &:backdrop { | 27 | &:backdrop { | ||
16 | background-color: backdrop(w_color(normal)); | 28 | background-color: gtk("@theme_unfocused_bg_color"); | ||
17 | } | 29 | } | ||
30 | | ||||
18 | > menuitem { | 31 | >menuitem { | ||
19 | min-height: 16px; | 32 | min-height: 16px; | ||
20 | padding: 4px 6px; | 33 | padding: 4px 6px; | ||
21 | &:hover { //Seems like it :hover even with keyboard focus | 34 | border-bottom: 3px solid transparent; | ||
22 | background-color: b_color(active); | 35 | | ||
23 | color: b_color(active-text); | 36 | &:hover { | ||
37 | //Seems like it :hover even with keyboard focus | ||||
38 | background-color: gtkalpha(gtk("@theme_button_decoration_focus"), 0.3); | ||||
39 | color: gtk("@theme_button_foreground_active"); | ||||
40 | border-bottom: 3px solid gtk("@theme_button_decoration_focus"); | ||||
24 | } | 41 | } | ||
42 | | ||||
25 | &:disabled { | 43 | &:disabled { | ||
26 | color: insensitive(w_color(text)); | 44 | color: gtk("@insensitive_fg_color"); | ||
27 | box-shadow: none; | 45 | box-shadow: none; | ||
46 | | ||||
28 | &:backdrop { | 47 | &:backdrop { | ||
29 | background-color: backdrop(w_color(normal)); | 48 | background-color: gtk("@theme_unfocused_bg_color"); | ||
30 | color: backdrop(insensitive(w_color(text))); | 49 | color: gtk("@insensitive_unfocused_fg_color"); | ||
31 | } | 50 | } | ||
32 | } | 51 | } | ||
52 | | ||||
33 | &:backdrop { | 53 | &:backdrop { | ||
34 | background-color: backdrop(w_color(normal)); | 54 | background-color: gtk("@theme_unfocused_bg_color"); | ||
35 | color: backdrop(w_color(text)); | 55 | color: gtk("@theme_unfocused_fg_color"); | ||
36 | } | 56 | } | ||
37 | } | 57 | } | ||
38 | } | 58 | } | ||
39 | 59 | | |||
40 | menu, | 60 | menu, | ||
41 | .menu { | 61 | .menu { | ||
42 | padding: 0px; | 62 | padding: 0px; | ||
43 | background-color: $menu_color; | 63 | background-color: gtk("@theme_bg_color"); | ||
44 | border: 0px solid transparent; | 64 | border: 0px solid transparent; | ||
45 | // FIXME workaround for libreoffice gtk3, should be a border | 65 | // FIXME workaround for libreoffice gtk3, should be a border | ||
46 | //border: 1px solid $border_color; // adds borders in a non composited env | 66 | //border: 1px solid $border_color; // adds borders in a non composited env | ||
47 | box-shadow: inset 0px 0px 0px 1px $border_color; | 67 | box-shadow: inset 0px 0px 0px 1px gtk("@borders"); | ||
48 | 68 | | |||
49 | border-radius: $r; | 69 | border-radius: $r; | ||
70 | | ||||
50 | .csd & { | 71 | .csd & { | ||
51 | //background-color: transparent; | 72 | //background-color: transparent; | ||
52 | border: 0px solid; | 73 | border: 0px solid; | ||
53 | border-radius: $r; | 74 | border-radius: $r; | ||
54 | //box-shadow: 0px 0px 0px 1px $border_color, 2px 2px 2px 1px rgba(0, 0, 0, 0.1); | 75 | //box-shadow: 0px 0px 0px 1px $border_color, 2px 2px 2px 1px rgba(0, 0, 0, 0.1); | ||
55 | } // axes borders in a composited env | 76 | } | ||
77 | | ||||
78 | // axes borders in a composited env | ||||
56 | separator { | 79 | separator { | ||
57 | color: $border_color; | 80 | color: gtk("@borders"); | ||
58 | margin-top: 3px; | | |||
59 | margin-bottom: 3px; | | |||
60 | } | 81 | } | ||
82 | | ||||
61 | menuitem { | 83 | menuitem { | ||
62 | text-shadow: none; | 84 | text-shadow: none; | ||
63 | min-height: 16px; | 85 | min-height: 16px; | ||
64 | min-width: 40px; | 86 | min-width: 40px; | ||
65 | padding: 4px 4px; | 87 | padding: 4px 4px; | ||
88 | | ||||
89 | @if $new-highlight{ | ||||
90 | border: 1px solid transparent; | ||||
91 | margin: 4px; | ||||
92 | } | ||||
93 | | ||||
66 | &:hover { | 94 | &:hover { | ||
67 | color: b_color(active-text); | 95 | @include item-highlight(); | ||
68 | background-color: b_color(active); | | |||
69 | } | 96 | } | ||
97 | | ||||
70 | &:disabled { | 98 | &:disabled { | ||
71 | color: insensitive(w_color(text)); | 99 | color: gtk("@insensitive_fg_color"); | ||
72 | &:backdrop { color: backdrop(insensitive(w_color(text))); } | 100 | | ||
101 | &:backdrop { | ||||
102 | color: gtk("@insensitive_unfocused_fg_color"); | ||||
73 | } | 103 | } | ||
74 | &:backdrop, &:backdrop:hover { | | |||
75 | color: backdrop(w_color(text)); | | |||
76 | background-color: backdrop(w_color(normal)); | | |||
77 | } | 104 | } | ||
105 | | ||||
106 | &:backdrop, | ||||
107 | &:backdrop:hover { | ||||
108 | color: gtk("@theme_unfocused_fg_color"); | ||||
109 | background-color: gtk("@theme_unfocused_bg_color"); | ||||
110 | } | ||||
111 | | ||||
78 | // submenu indicators | 112 | // submenu indicators | ||
79 | arrow { | 113 | arrow { | ||
80 | min-height: 16px; | 114 | min-height: 16px; | ||
81 | min-width: 16px; | 115 | min-width: 16px; | ||
82 | 116 | | |||
83 | &:dir(ltr) { | 117 | &:dir(ltr) { | ||
84 | -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); | 118 | -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); | ||
85 | margin-left: 10px; | 119 | margin-left: 10px; | ||
86 | } | 120 | } | ||
87 | 121 | | |||
88 | &:dir(rtl) { | 122 | &:dir(rtl) { | ||
89 | -gtk-icon-source:-gtk-icontheme('pan-start-symbolic'); | 123 | -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); | ||
90 | margin-right: 10px; | 124 | margin-right: 10px; | ||
91 | } | 125 | } | ||
92 | } | 126 | } | ||
93 | } | 127 | } | ||
128 | | ||||
94 | // overflow arrows | 129 | // overflow arrows | ||
95 | > arrow { | 130 | >arrow { | ||
96 | @include button(undecorated); | 131 | @include button(undecorated); | ||
97 | 132 | | |||
98 | min-height: 16px; | 133 | min-height: 16px; | ||
99 | min-width: 16px; | 134 | min-width: 16px; | ||
100 | padding: 4px; | 135 | padding: 4px; | ||
101 | background-color: transparent; | 136 | background-color: transparent; | ||
102 | border-radius: 0; | 137 | border-radius: 0; | ||
103 | 138 | | |||
104 | &.top { | 139 | &.top { | ||
105 | margin-top: -6px; | 140 | margin-top: -6px; | ||
106 | border: none; | 141 | border: none; | ||
107 | -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); | 142 | -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); | ||
108 | } | 143 | } | ||
109 | 144 | | |||
110 | &.bottom { | 145 | &.bottom { | ||
111 | margin-bottom: -6px; | 146 | margin-bottom: -6px; | ||
112 | border: none; | 147 | border: none; | ||
113 | -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); | 148 | -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); | ||
114 | } | 149 | } | ||
115 | 150 | | |||
116 | &:hover { color: b_color(hover); } | 151 | &:hover { | ||
117 | &:active { color: b_color(active)} | 152 | color: gtk("@theme_button_decoration_hover"); | ||
153 | } | ||||
154 | | ||||
155 | &:active { | ||||
156 | color: gtk("@theme_button_decoration_focus"); | ||||
157 | } | ||||
118 | 158 | | |||
119 | &:backdrop { background-color: backdrop($menu_color); } | 159 | &:backdrop { | ||
160 | background-color: gtk("@insensitive_bg_color"); | ||||
161 | } | ||||
120 | 162 | | |||
121 | &:disabled { | 163 | &:disabled { | ||
122 | color: transparent; | 164 | color: transparent; | ||
123 | background-color: transparent; | 165 | background-color: transparent; | ||
124 | border-color: transparent ; | 166 | border-color: transparent; | ||
125 | } | 167 | } | ||
126 | } | 168 | } | ||
127 | } | 169 | } | ||
128 | 170 | | |||
129 | menuitem { | 171 | menuitem { | ||
130 | accelerator { color: gtkalpha(currentColor,0.55); } | 172 | accelerator { | ||
173 | color: gtkalpha(currentColor, 0.55); | ||||
174 | } | ||||
175 | | ||||
131 | check, | 176 | check, | ||
132 | radio { | 177 | radio { | ||
133 | min-height: 18px; | 178 | min-height: 18px; | ||
134 | min-width: 18px; | 179 | min-width: 18px; | ||
135 | 180 | | |||
136 | &:dir(ltr) { margin-right: 6px; } | 181 | &:dir(ltr) { | ||
137 | &:dir(rtl) { margin-left: 6px; } | 182 | margin-right: 6px; | ||
138 | } | 183 | } | ||
184 | | ||||
185 | &:dir(rtl) { | ||||
186 | margin-left: 6px; | ||||
139 | } | 187 | } | ||
188 | &:active check, &:active radio { | ||||
189 | -gtk-icon-transform: translate(1px,1px); | ||||
190 | } | ||||
191 | } | ||||
192 | } | ||||
193 | | ||||
140 | /*************** | 194 | /*************** | ||
141 | * Popovers * | 195 | * Popovers * | ||
142 | ***************/ | 196 | ***************/ | ||
143 | /* menu buttons */ | 197 | /* menu buttons */ | ||
144 | modelbutton.flat, | 198 | modelbutton.flat, | ||
145 | .menuitem.button.flat { | 199 | .menuitem.button.flat { | ||
146 | min-height: 16px; | 200 | min-height: 16px; | ||
147 | padding: 4px 8px; | 201 | padding: 4px 8px; | ||
202 | margin: 3px; | ||||
148 | 203 | | |||
149 | @extend %undecorated_button; | 204 | @extend %undecorated_button; | ||
150 | color: w_color(text); | 205 | color: gtk("@theme_fg_color"); | ||
206 | | ||||
207 | border: 1px solid transparent; | ||||
208 | | ||||
151 | &:hover { | 209 | &:hover { | ||
152 | background-color: b_color(active); | 210 | @include item-highlight(); | ||
153 | color: b_color(active-text) | | |||
154 | } | 211 | } | ||
212 | | ||||
155 | &:selected { | 213 | &:selected { | ||
156 | background-color: b_color(active); | 214 | background-color: gtk("@theme_button_decoration_focus"); | ||
157 | color: b_color(active-text) | 215 | color: gtk("@theme_button_foreground_active"); | ||
158 | } | 216 | } | ||
159 | &:backdrop, &:backdrop:hover { | 217 | | ||
218 | &:backdrop, | ||||
219 | &:backdrop:hover { | ||||
160 | @extend %undecorated_button; | 220 | @extend %undecorated_button; | ||
161 | color: backdrop(w_color(text)); | 221 | color: gtk("@theme_unfocused_fg_color"); | ||
222 | } | ||||
223 | | ||||
224 | check:hover { | ||||
225 | -gtk-icon-source: -gtk-scaled(url("../assets/check-unchecked.png"), url("../assets/check-unchecked@2.png")); | ||||
162 | } | 226 | } | ||
163 | check:hover {-gtk-icon-source: -gtk-scaled(url("../assets/check-unchecked.png"), url("../assets/check-unchecked@2.png"));} | | |||
164 | radio:hover {-gtk-icon-source: -gtk-scaled(url("../assets/radio-unchecked.png"), url("../assets/radio-unchecked@2.png"));} | | |||
165 | 227 | | |||
166 | check:checked:hover {-gtk-icon-source: -gtk-scaled(url("../assets/check-checked-active.png"), url("../assets/check-checked-active@2.png"));} | 228 | radio:hover { | ||
167 | radio:checked:hover {-gtk-icon-source: -gtk-scaled(url("../assets/radio-checked-active.png"), url("../assets/radio-checked-active@2.png"));} | 229 | -gtk-icon-source: -gtk-scaled(url("../assets/radio-unchecked.png"), url("../assets/radio-unchecked@2.png")); | ||
230 | } | ||||
168 | 231 | | |||
169 | check:indeterminate:hover {-gtk-icon-source: -gtk-scaled(url("../assets/check-mixed.png"), url("../assets/check-mixed@2.png"));} | 232 | check:checked:hover { | ||
170 | radio:indeterminate:hover {-gtk-icon-source: -gtk-scaled(url("../assets/radio-mixed.png"), url("../assets/radio-mixed@2.png"));} | 233 | -gtk-icon-source: -gtk-scaled(url("../assets/check-checked-active.png"), url("../assets/check-checked-active@2.png")); | ||
234 | } | ||||
235 | | ||||
236 | radio:checked:hover { | ||||
237 | -gtk-icon-source: -gtk-scaled(url("../assets/radio-checked-active.png"), url("../assets/radio-checked-active@2.png")); | ||||
238 | } | ||||
239 | | ||||
240 | check:indeterminate:hover { | ||||
241 | -gtk-icon-source: -gtk-scaled(url("../assets/check-mixed.png"), url("../assets/check-mixed@2.png")); | ||||
242 | } | ||||
243 | | ||||
244 | radio:indeterminate:hover { | ||||
245 | -gtk-icon-source: -gtk-scaled(url("../assets/radio-mixed.png"), url("../assets/radio-mixed@2.png")); | ||||
246 | } | ||||
171 | 247 | | |||
172 | // FIXME: remove the following when the checks/radios rewrite lands | 248 | // FIXME: remove the following when the checks/radios rewrite lands | ||
173 | check:last-child, | 249 | check:last-child, | ||
174 | radio:last-child { margin-right: 0px; } | 250 | radio:last-child { | ||
251 | margin-right: 0px; | ||||
252 | } | ||||
175 | 253 | | |||
176 | check:first-child, | 254 | check:first-child, | ||
177 | radio:first-child { margin-left: 0px; } | 255 | radio:first-child { | ||
256 | margin-left: 0px; | ||||
257 | } | ||||
258 | &:active check, &:active radio { | ||||
259 | -gtk-icon-transform: translate(1px,1px); | ||||
260 | } | ||||
178 | } | 261 | } | ||
179 | 262 | | |||
180 | modelbutton.flat arrow { | 263 | modelbutton.flat arrow { | ||
181 | background: none; | 264 | background: none; | ||
182 | 265 | | |||
183 | &:hover { background: none; } | 266 | &:hover { | ||
267 | background: none; | ||||
268 | } | ||||
184 | 269 | | |||
185 | &.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } | 270 | &.left { | ||
271 | -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); | ||||
272 | } | ||||
186 | 273 | | |||
187 | &.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } | 274 | &.right { | ||
275 | -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); | ||||
276 | } | ||||
188 | } | 277 | } | ||
189 | 278 | | |||
190 | popover.background { | 279 | popover.background { | ||
191 | padding: 0px; | 280 | padding: 0px; | ||
192 | border: 1px solid $border_color; | 281 | border: 1px solid gtk("@borders"); | ||
193 | border-radius: 3px; | 282 | border-radius: 3px; | ||
194 | background-color: w_color(normal); | 283 | background-color: gtk("@theme_bg_color"); | ||
195 | 284 | | |||
196 | box-shadow: 0 2px 3px transparentize(black, 0.1); | 285 | box-shadow: 0 2px 3px transparentize(black, 0.1); | ||
197 | 286 | | |||
198 | &:backdrop { | 287 | &:backdrop { | ||
199 | box-shadow: none; | 288 | box-shadow: none; | ||
200 | } | 289 | } | ||
201 | 290 | | |||
202 | > list, | 291 | >list, | ||
203 | > .view, | 292 | >.view, | ||
204 | > toolbar { | 293 | >toolbar { | ||
205 | border-style: none; | 294 | border-style: none; | ||
206 | background-color: transparent; | 295 | background-color: transparent; | ||
207 | } | 296 | } | ||
208 | .csd &, & { | 297 | | ||
298 | .csd &, | ||||
299 | & { | ||||
300 | | ||||
209 | &.touch-selection, | 301 | &.touch-selection, | ||
210 | &.magnifier { | 302 | &.magnifier { | ||
211 | @extend %osd; | 303 | @extend %osd; | ||
212 | 304 | | |||
213 | border: 1px solid $border_color; | 305 | border: 1px solid gtk("@borders"); | ||
214 | 306 | | |||
215 | button { @extend %button }; | 307 | button { | ||
308 | @extend %button | ||||
216 | } | 309 | } | ||
217 | 310 | | |||
218 | &.osd { @extend %osd; } | 311 | ; | ||
219 | } | 312 | } | ||
220 | 313 | | |||
221 | separator { margin: 3px; } | 314 | &.osd { | ||
222 | 315 | @extend %osd; | |||
223 | list separator { margin: 0px; } | 316 | } | ||
317 | } | ||||
224 | 318 | | |||
225 | checkbutton, | 319 | checkbutton, | ||
226 | radiobutton { @extend modelbutton.flat; } | 320 | radiobutton { | ||
321 | @extend modelbutton.flat; | ||||
322 | } | ||||
227 | } | 323 | } | ||
228 | 324 | | |||
229 | // .scale-popup .button, | 325 | GtkVolumeButton.button { | ||
230 | // .scale-popup .button.flat { // +/- buttons on GtkVolumeButton popup | 326 | padding: 5px; | ||
231 | // @extend %undecorated_button; | 327 | } | ||
232 | // background-color: transparent; | | |||
233 | // padding: 5px; | | |||
234 | // color: w_color(text); | | |||
235 | // &:hover { | | |||
236 | // @extend %undecorated_button; | | |||
237 | // color: b_color(hover); | | |||
238 | // } | | |||
239 | // &:active { | | |||
240 | // color: b_color(active); | | |||
241 | // } | | |||
242 | // &:insensitive { | | |||
243 | // color: insensitive(w_color(text)); | | |||
244 | // } | | |||
245 | // &:backdrop { | | |||
246 | // color: backdrop(w_color(text)); | | |||
247 | // &:insensitive { | | |||
248 | // color: backdrop(insensitive(w_color(text))); | | |||
249 | // } | | |||
250 | // } | | |||
251 | // } | | |||
252 | | ||||
253 | GtkVolumeButton.button { padding: 5px; } | | |||
328 | No newline at end of file |