assembler source, ASCII text
1
/* Date/Time Menu */
2
@use "../../../../theme";
4
@use "../../../../theme-color";
5
@use "../../../../st-theme";
6
@use "../../gnome-shell";
7
@use "../../drawing";
8
$calendar-column-spacing: 8px;
10
$calendar-column-margin: 0 8px;
11
%calendar-item {
13
margin: 0;
14
border: 0;
15
border-radius: theme.$corner-radius;
16
&,
18
&:focus,
19
&:hover,
20
&:active {
21
border-color: transparent;
22
box-shadow: none;
23
background-color: transparent;
24
color: inherit;
25
text-shadow: none;
26
icon-shadow: none;
27
transition-duration: st-theme.$duration;
28
}
29
&:focus {
31
background-color: theme-color.focus-overlay(theme-color.$on-surface);
32
}
33
&:hover {
35
background-color: theme-color.hover-overlay(theme-color.$on-surface);
36
}
37
&:active {
39
background-color: theme-color.pressed-overlay(theme-color.$on-surface);
40
transition-duration: st-theme.$duration-ripple;
41
}
42
}
43
.clock-display-box {
45
spacing: 0;
46
.clock {
48
padding-left: st-theme.$panel-button-hpadding;
49
padding-right: st-theme.$panel-button-hpadding;
50
}
51
}
52
// overall menu
54
#calendarArea {
55
padding: 8px 16px;
56
}
57
// Calendar menu side column
59
.datemenu-calendar-column {
60
spacing: $calendar-column-spacing;
61
padding: 0;
62
border: 0 solid theme-color.divider(theme-color.$on-surface);
63
&:ltr {
65
margin-right: 0;
66
border-left-width: 0;
67
}
68
&:rtl {
70
margin-left: 0;
71
border-right-width: 0;
72
}
73
.datemenu-displays-section {
75
padding-bottom: 0;
76
}
77
.datemenu-displays-box {
79
spacing: $calendar-column-spacing;
80
margin: $calendar-column-margin;
81
}
82
}
83
.events-section-title {
85
@extend %calendar-item;
86
min-height: st-theme.$menuitem-size - 8px * 2;
87
padding: 8px;
88
color: theme-color.hint(theme-color.$on-surface) !important;
89
font-weight: bold;
90
}
91
/* today button (the date) */
93
.datemenu-today-button {
94
@extend %calendar-item;
95
margin: $calendar-column-margin;
96
min-height: st-theme.$menuitem-size * 2 - 8px * 2;
97
padding: 8px;
98
// weekday label
100
.day-label {
101
font-weight: normal;
102
font-size: 1em;
103
}
104
// date label
106
.date-label {
107
@include drawing.type(headline5);
108
}
109
}
110
/* Calendar */
112
.calendar {
113
@extend %calendar-item;
114
margin: $calendar-column-margin;
115
margin-bottom: 0;
116
padding: 0;
117
// month
119
.calendar-month-label {
120
transition-duration: st-theme.$duration;
121
min-height: st-theme.$menuitem-size - 6px * 2;
122
margin: 2px;
123
padding: 6px 8px;
124
border-radius: theme.$corner-radius;
125
color: inherit;
126
font-weight: bold;
127
text-align: center;
128
&:focus {
130
background-color: theme-color.focus-overlay(theme-color.$on-surface);
131
}
132
}
133
// prev/next month icons
135
@if gnome-shell.$version >= 3.32 {
136
.calendar-change-month-back StIcon,
137
.calendar-change-month-forward StIcon {
138
icon-size: 16px;
139
}
140
} @else {
141
.calendar-change-month-back {
142
background-image: url("assets/calendar-arrow-left.svg");
143
&:rtl {
145
background-image: url("assets/calendar-arrow-right.svg");
146
}
147
}
148
.calendar-change-month-forward {
150
background-image: url("assets/calendar-arrow-right.svg");
151
&:rtl {
153
background-image: url("assets/calendar-arrow-left.svg");
154
}
155
}
156
}
157
.pager-button {
159
transition-duration: st-theme.$duration;
160
width: st-theme.$menuitem-size;
161
height: st-theme.$menuitem-size;
162
margin: 2px;
163
border-radius: st-theme.$menuitem-size / 2;
164
background-color: transparent;
165
color: theme-color.hint(theme-color.$on-surface);
166
&:focus {
168
background-color: theme-color.focus-overlay(theme-color.$on-surface);
169
}
170
&:hover {
172
background-color: theme-color.hover-overlay(theme-color.$on-surface);
173
}
174
&:active {
176
background-color: theme-color.pressed-overlay(theme-color.$on-surface);
177
transition-duration: st-theme.$duration-ripple;
178
}
179
}
180
.calendar-day-base {
182
transition-duration: st-theme.$duration;
183
width: st-theme.$menuitem-size;
184
height: st-theme.$menuitem-size;
185
margin: 2px;
186
padding: 0;
187
border: 0;
188
border-radius: st-theme.$menuitem-size / 2;
189
@include drawing.type(caption);
190
font-feature-settings: "tnum";
191
text-align: center;
192
&:focus {
194
background-color: theme-color.focus-overlay(theme-color.$on-surface);
195
}
196
&:hover {
198
background-color: theme-color.hover-overlay(theme-color.$on-surface);
199
}
200
&:active {
202
transition-duration: st-theme.$duration-ripple;
203
border-color: transparent;
204
background-color: theme-color.pressed-overlay(theme-color.$on-surface);
205
color: inherit;
206
}
207
&:selected {
209
border-color: transparent;
210
background-color: theme-color.$primary !important;
211
color: theme-color.$on-primary !important;
212
font-weight: 500 !important;
213
}
214
// day of week heading
216
&.calendar-day-heading {
217
width: st-theme.$menuitem-size;
218
height: st-theme.$menuitem-size - 7px;
219
margin-top: 2px;
220
padding: 7px 0 0;
221
border-radius: st-theme.$menuitem-size / 2;
222
background-color: transparent;
223
color: theme-color.disabled(theme-color.$on-surface);
224
@include drawing.type(caption);
225
font-weight: bold;
226
text-align: center;
227
&:focus {
229
background-color: theme-color.focus-overlay(theme-color.$on-surface);
230
}
231
}
232
}
233
//border collapse hack - see calendar.js
235
.calendar-day {
236
border-width: 0;
237
}
238
.calendar-day-top {
240
border-top-width: 0;
241
}
242
.calendar-day-left {
244
border-left-width: 0;
245
}
246
.calendar-work-day {
248
}
249
.calendar-nonwork-day {
251
color: inherit;
252
}
253
// Today
255
.calendar-today {
256
border: 0;
257
box-shadow: inset 0 0 0 1px theme-color.hint(theme-color.$on-surface);
258
background-color: rgba(theme-color.$surface-z8, .01); // to draw box-shadow
259
color: inherit;
260
font-weight: normal;
261
&:focus {
263
background-color: theme-color.focus-overlay(theme-color.$on-surface);
264
color: inherit;
265
}
266
&:hover {
268
background-color: theme-color.hover-overlay(theme-color.$on-surface);
269
color: inherit;
270
}
271
&:active {
273
&,
274
&:hover,
275
&:focus {
276
background-color: theme-color.pressed-overlay(theme-color.$on-surface);
277
color: inherit;
278
}
279
}
280
&:selected {
282
box-shadow: inset 0 0 0 1px transparent;
283
&,
285
&:hover,
286
&:focus {
287
background-color: theme-color.$primary;
288
color: theme-color.$on-primary;
289
}
290
}
291
}
292
.calendar-day-with-events {
294
background-image: url("assets/calendar-event.svg");
295
&,
297
&.calendar-work-day {
298
color: inherit;
299
font-weight: normal;
300
}
301
}
302
.calendar-other-month-day {
304
color: theme-color.disabled-hint(theme-color.$on-surface) !important;
305
}
306
.calendar-week-number {
308
width: st-theme.$menuitem-size;
309
height: st-theme.$menuitem-size;
310
margin: 2px;
311
border-radius: st-theme.$menuitem-size / 2;
312
background-color: transparent;
313
color: theme-color.disabled(theme-color.$on-surface);
314
font-weight: bold;
315
font-size: 1em;
316
text-align: center;
317
@if gnome-shell.$version < 3.38 {
319
height: st-theme.$menuitem-size - 7px;
320
padding: 7px 0 0;
321
}
322
}
323
}
324
@if gnome-shell.$version >= 3.38 {
326
/* Events */
327
.events-button {
328
@extend %calendar-item;
329
min-height: st-theme.$menuitem-size * 2 - 8px * 2;
330
padding: 8px;
331
.events-box {
333
spacing: 8px;
334
}
335
.events-list {
337
spacing: 8px;
338
}
339
.events-title {
341
color: theme-color.hint(theme-color.$on-surface);
342
font-weight: bold;
343
margin-bottom: 0;
344
}
345
.event-time {
347
color: theme-color.hint(theme-color.$on-surface);
348
@include drawing.type(caption);
349
font-feature-settings: "tnum";
350
}
351
}
352
}
353
/* World clocks */
355
.world-clocks-button {
356
@extend %calendar-item;
357
min-height: st-theme.$menuitem-size - 8px * 2;
358
padding: 8px;
359
.world-clocks-grid {
361
spacing-rows: .4em;
362
spacing-columns: .8em;
363
}
364
// title
366
.world-clocks-header {
367
color: theme-color.hint(theme-color.$on-surface);
368
font-weight: bold;
369
}
370
// city label
372
.world-clocks-city {
373
color: inherit;
374
font-weight: normal;
375
font-size: 1em;
376
}
377
// timezone time
379
.world-clocks-time {
380
color: theme-color.hint(theme-color.$on-surface);
381
font-weight: normal;
382
font-size: 1em;
383
font-feature-settings: "tnum";
384
text-align: right;
385
&:ltr {
387
text-align: right;
388
}
389
&:rtl {
391
text-align: left;
392
}
393
}
394
// timezone offset label
396
.world-clocks-timezone {
397
color: theme-color.disabled(theme-color.$on-surface);
398
font-size: 1em;
399
font-feature-settings: "tnum";
400
}
401
}
402
/* Weather */
404
.weather-button {
405
@extend %calendar-item;
406
min-height: st-theme.$menuitem-size * 2 - 8px * 2;
407
padding: 8px;
408
.weather-box {
410
spacing: 0.4em;
411
}
412
.weather-header-box {
414
spacing: 8px;
415
}
416
.weather-header {
418
color: theme-color.hint(theme-color.$on-surface);
419
font-weight: bold;
420
&.location {
422
font-weight: normal;
423
font-size: 1em;
424
}
425
}
426
.weather-grid {
428
spacing-rows: .4em;
429
spacing-columns: .8em;
430
}
431
.weather-forecast-time {
433
padding-top: 0;
434
padding-bottom: 0;
435
color: theme-color.hint(theme-color.$on-surface);
436
@include drawing.type(caption);
437
font-feature-settings: "tnum";
438
}
439
.weather-forecast-icon {
441
icon-size: 32px;
442
}
443
.weather-forecast-temp {
445
font-weight: bold;
446
}
447
}
448