assembler source, ASCII text
1
/* Date/Time Menu */
2
@use "../../../../theme";
4
@use "../../../../theme-color";
5
@use "../../gnome-shell";
6
@use "../../typography";
7
$column-spacing: 8px;
9
$column-margin: 0 8px;
10
@mixin item {
12
margin: 0;
13
border: 0;
14
border-radius: theme.$corner-radius;
15
&,
17
&:focus,
18
&:hover,
19
&:active {
20
border-color: transparent;
21
box-shadow: none;
22
background-color: transparent;
23
color: inherit;
24
text-shadow: none;
25
icon-shadow: none;
26
transition-duration: theme.$state-duration;
27
}
28
&:focus {
30
background-color: theme-color.focus-overlay(theme-color.$on-surface);
31
}
32
&:hover {
34
background-color: theme-color.hover-overlay(theme-color.$on-surface);
35
}
36
&:active {
38
background-color: theme-color.pressed-overlay(theme-color.$on-surface);
39
transition-duration: theme.$ripple-duration;
40
}
41
}
42
// overall menu
44
#calendarArea {
45
padding: 8px 16px;
46
}
47
// Calendar menu side column
49
.datemenu-calendar-column {
50
spacing: $column-spacing;
51
padding: 0;
52
border: 0 solid theme-color.divider(theme-color.$on-surface);
53
&:ltr {
55
margin-right: 0;
56
border-left-width: 0;
57
}
58
&:rtl {
60
margin-left: 0;
61
border-right-width: 0;
62
}
63
.datemenu-displays-section {
65
padding-bottom: 0;
66
}
67
.datemenu-displays-box {
69
spacing: $column-spacing;
70
margin: $column-margin;
71
}
72
}
73
.events-section-title {
75
@include item;
76
min-height: theme.$menu-item-height - 8px * 2;
77
padding: 8px;
78
color: theme-color.hint(theme-color.$on-surface) !important;
79
font-weight: bold;
80
}
81
/* today button (the date) */
83
.datemenu-today-button {
84
@include item;
85
margin: $column-margin;
86
min-height: theme.$menu-item-height * 2 - 8px * 2;
87
padding: 8px;
88
// weekday label
90
.day-label {
91
font-weight: normal;
92
font-size: 1em;
93
}
94
// date label
96
.date-label {
97
@include typography.headline5;
98
}
99
}
100
/* Calendar */
102
.calendar {
103
@include item;
104
margin: $column-margin;
105
margin-bottom: 0;
106
padding: 0;
107
// month
109
.calendar-month-label {
110
transition-duration: theme.$state-duration;
111
min-height: theme.$menu-item-height - 6px * 2;
112
margin: 2px;
113
padding: 6px 8px;
114
border-radius: theme.$corner-radius;
115
color: inherit;
116
font-weight: bold;
117
text-align: center;
118
&:focus {
120
background-color: theme-color.focus-overlay(theme-color.$on-surface);
121
}
122
}
123
// prev/next month icons
125
@if gnome-shell.$version >= 3.32 {
126
.calendar-change-month-back StIcon,
127
.calendar-change-month-forward StIcon {
128
icon-size: 16px;
129
}
130
} @else {
131
.calendar-change-month-back {
132
background-image: url("assets/calendar-arrow-left.svg");
133
&:rtl {
135
background-image: url("assets/calendar-arrow-right.svg");
136
}
137
}
138
.calendar-change-month-forward {
140
background-image: url("assets/calendar-arrow-right.svg");
141
&:rtl {
143
background-image: url("assets/calendar-arrow-left.svg");
144
}
145
}
146
}
147
.pager-button {
149
transition-duration: theme.$state-duration;
150
width: theme.$menu-item-height;
151
height: theme.$menu-item-height;
152
margin: 2px;
153
border-radius: theme.$menu-item-height / 2;
154
background-color: transparent;
155
color: theme-color.hint(theme-color.$on-surface);
156
&:focus {
158
background-color: theme-color.focus-overlay(theme-color.$on-surface);
159
}
160
&:hover {
162
background-color: theme-color.hover-overlay(theme-color.$on-surface);
163
}
164
&:active {
166
background-color: theme-color.pressed-overlay(theme-color.$on-surface);
167
transition-duration: theme.$ripple-duration;
168
}
169
}
170
.calendar-day-base {
172
transition-duration: theme.$state-duration;
173
width: theme.$menu-item-height;
174
height: theme.$menu-item-height;
175
margin: 2px;
176
padding: 0;
177
border: 0;
178
border-radius: theme.$menu-item-height / 2;
179
@include typography.caption;
180
font-feature-settings: "tnum";
181
text-align: center;
182
&:focus {
184
background-color: theme-color.focus-overlay(theme-color.$on-surface);
185
}
186
&:hover {
188
background-color: theme-color.hover-overlay(theme-color.$on-surface);
189
}
190
&:active {
192
transition-duration: theme.$ripple-duration;
193
border-color: transparent;
194
background-color: theme-color.pressed-overlay(theme-color.$on-surface);
195
color: inherit;
196
}
197
&:selected {
199
border-color: transparent;
200
background-color: theme-color.$primary !important;
201
color: theme-color.$on-primary !important;
202
font-weight: 500 !important;
203
}
204
// day of week heading
206
&.calendar-day-heading {
207
width: theme.$menu-item-height;
208
height: theme.$menu-item-height - 7px;
209
margin-top: 2px;
210
padding: 7px 0 0;
211
border-radius: theme.$menu-item-height / 2;
212
background-color: transparent;
213
color: theme-color.disabled(theme-color.$on-surface);
214
@include typography.caption;
215
font-weight: bold;
216
text-align: center;
217
&:focus {
219
background-color: theme-color.focus-overlay(theme-color.$on-surface);
220
}
221
}
222
}
223
//border collapse hack - see calendar.js
225
.calendar-day {
226
border-width: 0;
227
}
228
.calendar-day-top {
230
border-top-width: 0;
231
}
232
.calendar-day-left {
234
border-left-width: 0;
235
}
236
.calendar-work-day {
238
}
239
.calendar-nonwork-day {
241
color: inherit;
242
}
243
// Today
245
.calendar-today {
246
border: 0;
247
box-shadow: inset 0 0 0 1px theme-color.hint(theme-color.$on-surface);
248
background-color: rgba(theme-color.$surface-z8, .01); // to draw box-shadow
249
color: inherit;
250
font-weight: normal;
251
&:focus {
253
background-color: theme-color.focus-overlay(theme-color.$on-surface);
254
color: inherit;
255
}
256
&:hover {
258
background-color: theme-color.hover-overlay(theme-color.$on-surface);
259
color: inherit;
260
}
261
&:active {
263
&,
264
&:hover,
265
&:focus {
266
background-color: theme-color.pressed-overlay(theme-color.$on-surface);
267
color: inherit;
268
}
269
}
270
&:selected {
272
box-shadow: inset 0 0 0 1px transparent;
273
&,
275
&:hover,
276
&:focus {
277
background-color: theme-color.$primary;
278
color: theme-color.$on-primary;
279
}
280
}
281
}
282
.calendar-day-with-events {
284
background-image: url("assets/calendar-event.svg");
285
&,
287
&.calendar-work-day {
288
color: inherit;
289
font-weight: normal;
290
}
291
}
292
.calendar-other-month-day {
294
color: theme-color.disabled-hint(theme-color.$on-surface) !important;
295
}
296
.calendar-week-number {
298
width: theme.$menu-item-height;
299
height: theme.$menu-item-height;
300
margin: 2px;
301
border-radius: theme.$menu-item-height / 2;
302
background-color: transparent;
303
color: theme-color.disabled(theme-color.$on-surface);
304
font-weight: bold;
305
font-size: 1em;
306
text-align: center;
307
@if gnome-shell.$version < 3.38 {
309
height: theme.$menu-item-height - 7px;
310
padding: 7px 0 0;
311
}
312
}
313
}
314
@if gnome-shell.$version >= 3.38 {
316
/* Events */
317
.events-button {
318
@include item;
319
min-height: theme.$menu-item-height * 2 - 8px * 2;
320
padding: 8px;
321
.events-box {
323
spacing: 8px;
324
}
325
.events-list {
327
spacing: 8px;
328
}
329
.events-title {
331
color: theme-color.hint(theme-color.$on-surface);
332
font-weight: bold;
333
margin-bottom: 0;
334
}
335
.event-time {
337
color: theme-color.hint(theme-color.$on-surface);
338
@include typography.caption;
339
font-feature-settings: "tnum";
340
}
341
}
342
}
343
/* World clocks */
345
.world-clocks-button {
346
@include item;
347
min-height: theme.$menu-item-height - 8px * 2;
348
padding: 8px;
349
.world-clocks-grid {
351
spacing-rows: .4em;
352
spacing-columns: .8em;
353
}
354
// title
356
.world-clocks-header {
357
color: theme-color.hint(theme-color.$on-surface);
358
font-weight: bold;
359
}
360
// city label
362
.world-clocks-city {
363
color: inherit;
364
font-weight: normal;
365
font-size: 1em;
366
}
367
// timezone time
369
.world-clocks-time {
370
color: theme-color.hint(theme-color.$on-surface);
371
font-weight: normal;
372
font-size: 1em;
373
font-feature-settings: "tnum";
374
text-align: right;
375
&:ltr {
377
text-align: right;
378
}
379
&:rtl {
381
text-align: left;
382
}
383
}
384
// timezone offset label
386
.world-clocks-timezone {
387
color: theme-color.disabled(theme-color.$on-surface);
388
font-size: 1em;
389
font-feature-settings: "tnum";
390
}
391
}
392
/* Weather */
394
.weather-button {
395
@include item;
396
min-height: theme.$menu-item-height * 2 - 8px * 2;
397
padding: 8px;
398
.weather-box {
400
spacing: 0.4em;
401
}
402
.weather-header-box {
404
spacing: 8px;
405
}
406
.weather-header {
408
color: theme-color.hint(theme-color.$on-surface);
409
font-weight: bold;
410
&.location {
412
font-weight: normal;
413
font-size: 1em;
414
}
415
}
416
.weather-grid {
418
spacing-rows: .4em;
419
spacing-columns: .8em;
420
}
421
.weather-forecast-time {
423
padding-top: 0;
424
padding-bottom: 0;
425
color: theme-color.hint(theme-color.$on-surface);
426
@include typography.caption;
427
font-feature-settings: "tnum";
428
}
429
.weather-forecast-icon {
431
icon-size: 32px;
432
}
433
.weather-forecast-temp {
435
font-weight: bold;
436
}
437
}
438