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 "../../typography";
8
$column-spacing: 8px;
10
$column-margin: 0 8px;
11
@mixin 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
// overall menu
45
#calendarArea {
46
padding: 8px 16px;
47
}
48
// Calendar menu side column
50
.datemenu-calendar-column {
51
spacing: $column-spacing;
52
padding: 0;
53
border: 0 solid theme-color.divider(theme-color.$on-surface);
54
&:ltr {
56
margin-right: 0;
57
border-left-width: 0;
58
}
59
&:rtl {
61
margin-left: 0;
62
border-right-width: 0;
63
}
64
.datemenu-displays-section {
66
padding-bottom: 0;
67
}
68
.datemenu-displays-box {
70
spacing: $column-spacing;
71
margin: $column-margin;
72
}
73
}
74
.events-section-title {
76
@include item;
77
min-height: theme.$menu-item-height - 8px * 2;
78
padding: 8px;
79
color: theme-color.hint(theme-color.$on-surface) !important;
80
font-weight: bold;
81
}
82
/* today button (the date) */
84
.datemenu-today-button {
85
@include item;
86
margin: $column-margin;
87
min-height: theme.$menu-item-height * 2 - 8px * 2;
88
padding: 8px;
89
// weekday label
91
.day-label {
92
font-weight: normal;
93
font-size: 1em;
94
}
95
// date label
97
.date-label {
98
@include typography.headline5;
99
}
100
}
101
/* Calendar */
103
.calendar {
104
@include item;
105
margin: $column-margin;
106
margin-bottom: 0;
107
padding: 0;
108
// month
110
.calendar-month-label {
111
transition-duration: st-theme.$duration;
112
min-height: theme.$menu-item-height - 6px * 2;
113
margin: 2px;
114
padding: 6px 8px;
115
border-radius: theme.$corner-radius;
116
color: inherit;
117
font-weight: bold;
118
text-align: center;
119
&:focus {
121
background-color: theme-color.focus-overlay(theme-color.$on-surface);
122
}
123
}
124
// prev/next month icons
126
@if gnome-shell.$version >= 3.32 {
127
.calendar-change-month-back StIcon,
128
.calendar-change-month-forward StIcon {
129
icon-size: 16px;
130
}
131
} @else {
132
.calendar-change-month-back {
133
background-image: url("assets/calendar-arrow-left.svg");
134
&:rtl {
136
background-image: url("assets/calendar-arrow-right.svg");
137
}
138
}
139
.calendar-change-month-forward {
141
background-image: url("assets/calendar-arrow-right.svg");
142
&:rtl {
144
background-image: url("assets/calendar-arrow-left.svg");
145
}
146
}
147
}
148
.pager-button {
150
transition-duration: st-theme.$duration;
151
width: theme.$menu-item-height;
152
height: theme.$menu-item-height;
153
margin: 2px;
154
border-radius: theme.$menu-item-height / 2;
155
background-color: transparent;
156
color: theme-color.hint(theme-color.$on-surface);
157
&:focus {
159
background-color: theme-color.focus-overlay(theme-color.$on-surface);
160
}
161
&:hover {
163
background-color: theme-color.hover-overlay(theme-color.$on-surface);
164
}
165
&:active {
167
background-color: theme-color.pressed-overlay(theme-color.$on-surface);
168
transition-duration: st-theme.$duration-ripple;
169
}
170
}
171
.calendar-day-base {
173
transition-duration: st-theme.$duration;
174
width: theme.$menu-item-height;
175
height: theme.$menu-item-height;
176
margin: 2px;
177
padding: 0;
178
border: 0;
179
border-radius: theme.$menu-item-height / 2;
180
@include typography.caption;
181
font-feature-settings: "tnum";
182
text-align: center;
183
&:focus {
185
background-color: theme-color.focus-overlay(theme-color.$on-surface);
186
}
187
&:hover {
189
background-color: theme-color.hover-overlay(theme-color.$on-surface);
190
}
191
&:active {
193
transition-duration: st-theme.$duration-ripple;
194
border-color: transparent;
195
background-color: theme-color.pressed-overlay(theme-color.$on-surface);
196
color: inherit;
197
}
198
&:selected {
200
border-color: transparent;
201
background-color: theme-color.$primary !important;
202
color: theme-color.$on-primary !important;
203
font-weight: 500 !important;
204
}
205
// day of week heading
207
&.calendar-day-heading {
208
width: theme.$menu-item-height;
209
height: theme.$menu-item-height - 7px;
210
margin-top: 2px;
211
padding: 7px 0 0;
212
border-radius: theme.$menu-item-height / 2;
213
background-color: transparent;
214
color: theme-color.disabled(theme-color.$on-surface);
215
@include typography.caption;
216
font-weight: bold;
217
text-align: center;
218
&:focus {
220
background-color: theme-color.focus-overlay(theme-color.$on-surface);
221
}
222
}
223
}
224
//border collapse hack - see calendar.js
226
.calendar-day {
227
border-width: 0;
228
}
229
.calendar-day-top {
231
border-top-width: 0;
232
}
233
.calendar-day-left {
235
border-left-width: 0;
236
}
237
.calendar-work-day {
239
}
240
.calendar-nonwork-day {
242
color: inherit;
243
}
244
// Today
246
.calendar-today {
247
border: 0;
248
box-shadow: inset 0 0 0 1px theme-color.hint(theme-color.$on-surface);
249
background-color: rgba(theme-color.$surface-z8, .01); // to draw box-shadow
250
color: inherit;
251
font-weight: normal;
252
&:focus {
254
background-color: theme-color.focus-overlay(theme-color.$on-surface);
255
color: inherit;
256
}
257
&:hover {
259
background-color: theme-color.hover-overlay(theme-color.$on-surface);
260
color: inherit;
261
}
262
&:active {
264
&,
265
&:hover,
266
&:focus {
267
background-color: theme-color.pressed-overlay(theme-color.$on-surface);
268
color: inherit;
269
}
270
}
271
&:selected {
273
box-shadow: inset 0 0 0 1px transparent;
274
&,
276
&:hover,
277
&:focus {
278
background-color: theme-color.$primary;
279
color: theme-color.$on-primary;
280
}
281
}
282
}
283
.calendar-day-with-events {
285
background-image: url("assets/calendar-event.svg");
286
&,
288
&.calendar-work-day {
289
color: inherit;
290
font-weight: normal;
291
}
292
}
293
.calendar-other-month-day {
295
color: theme-color.disabled-hint(theme-color.$on-surface) !important;
296
}
297
.calendar-week-number {
299
width: theme.$menu-item-height;
300
height: theme.$menu-item-height;
301
margin: 2px;
302
border-radius: theme.$menu-item-height / 2;
303
background-color: transparent;
304
color: theme-color.disabled(theme-color.$on-surface);
305
font-weight: bold;
306
font-size: 1em;
307
text-align: center;
308
@if gnome-shell.$version < 3.38 {
310
height: theme.$menu-item-height - 7px;
311
padding: 7px 0 0;
312
}
313
}
314
}
315
@if gnome-shell.$version >= 3.38 {
317
/* Events */
318
.events-button {
319
@include item;
320
min-height: theme.$menu-item-height * 2 - 8px * 2;
321
padding: 8px;
322
.events-box {
324
spacing: 8px;
325
}
326
.events-list {
328
spacing: 8px;
329
}
330
.events-title {
332
color: theme-color.hint(theme-color.$on-surface);
333
font-weight: bold;
334
margin-bottom: 0;
335
}
336
.event-time {
338
color: theme-color.hint(theme-color.$on-surface);
339
@include typography.caption;
340
font-feature-settings: "tnum";
341
}
342
}
343
}
344
/* World clocks */
346
.world-clocks-button {
347
@include item;
348
min-height: theme.$menu-item-height - 8px * 2;
349
padding: 8px;
350
.world-clocks-grid {
352
spacing-rows: .4em;
353
spacing-columns: .8em;
354
}
355
// title
357
.world-clocks-header {
358
color: theme-color.hint(theme-color.$on-surface);
359
font-weight: bold;
360
}
361
// city label
363
.world-clocks-city {
364
color: inherit;
365
font-weight: normal;
366
font-size: 1em;
367
}
368
// timezone time
370
.world-clocks-time {
371
color: theme-color.hint(theme-color.$on-surface);
372
font-weight: normal;
373
font-size: 1em;
374
font-feature-settings: "tnum";
375
text-align: right;
376
&:ltr {
378
text-align: right;
379
}
380
&:rtl {
382
text-align: left;
383
}
384
}
385
// timezone offset label
387
.world-clocks-timezone {
388
color: theme-color.disabled(theme-color.$on-surface);
389
font-size: 1em;
390
font-feature-settings: "tnum";
391
}
392
}
393
/* Weather */
395
.weather-button {
396
@include item;
397
min-height: theme.$menu-item-height * 2 - 8px * 2;
398
padding: 8px;
399
.weather-box {
401
spacing: 0.4em;
402
}
403
.weather-header-box {
405
spacing: 8px;
406
}
407
.weather-header {
409
color: theme-color.hint(theme-color.$on-surface);
410
font-weight: bold;
411
&.location {
413
font-weight: normal;
414
font-size: 1em;
415
}
416
}
417
.weather-grid {
419
spacing-rows: .4em;
420
spacing-columns: .8em;
421
}
422
.weather-forecast-time {
424
padding-top: 0;
425
padding-bottom: 0;
426
color: theme-color.hint(theme-color.$on-surface);
427
@include typography.caption;
428
font-feature-settings: "tnum";
429
}
430
.weather-forecast-icon {
432
icon-size: 32px;
433
}
434
.weather-forecast-temp {
436
font-weight: bold;
437
}
438
}
439