A fork of the Materia GTK theme.

Important information: Google announced that, from September 2026, Android devices will require ALL apps to be signed by Google, effectively leading to an iOS situation. Value your right to a computer that does what you want; do not tolerate this monopolistic practice! Contact me if you don't understand why it is bad. Click to learn more.

 _calendar.scss

View raw Download
text/x-asm • 5.24 kiB
assembler source, ASCII text
        
            
1
/* Date/Time Menu */
2
3
.clock-display-box { spacing: $base_spacing; }
4
5
// overall menu
6
#calendarArea {
7
padding:0;
8
}
9
10
// Calendar menu side column
11
.datemenu-calendar-column {
12
spacing: $base_spacing;
13
border: 0 solid $bubble_borders_color;
14
padding: 0 $base_padding * 2;
15
16
&:ltr {margin-right: $base_margin * 2; border-left-width: 1px; }
17
&:rtl {margin-left: $base_margin * 2; border-right-width: 1px; }
18
19
.datemenu-displays-section {
20
}
21
22
.datemenu-displays-box {
23
spacing: $base_spacing;
24
}
25
}
26
27
.events-section-title {
28
@include notification_bubble($flat: true);
29
color: desaturate(darken($fg_color,40%), 10%);
30
font-weight: bold;
31
padding: .4em;
32
}
33
34
/* today button (the date) */
35
.datemenu-today-button {
36
@include notification_bubble($flat: true);
37
padding: $base_padding * 1.5;
38
39
// weekday label
40
.day-label {
41
@include fontsize($base_font_size+1);
42
font-weight: bold;
43
}
44
45
// date label
46
.date-label {
47
@include fontsize($base_font_size+7);
48
font-weight: 1000;
49
}
50
}
51
52
/* Calendar */
53
.calendar {
54
@include notification_bubble;
55
padding: $base_padding;
56
57
// month
58
.calendar-month-label {
59
color: lighten($fg_color,5%);
60
font-weight: bold;
61
padding: 8px 0;
62
&:focus {}
63
}
64
65
// prev/next month icons
66
.calendar-change-month-back StIcon,
67
.calendar-change-month-forward StIcon {
68
icon-size: $base_icon_size;
69
}
70
71
.pager-button {
72
background-color: transparent;
73
height: 32px;
74
width: 32px;
75
border-radius: $base_border_radius;
76
&:hover, &:focus { background-color: lighten($hover_bg_color, 5%); }
77
&:active { background-color: $active_bg_color; }
78
}
79
80
81
$calendar_day_size: 32px;
82
83
.calendar-day-base {
84
@include fontsize($base_font_size - 3);
85
text-align: center;
86
width: $calendar_day_size;
87
height: $calendar_day_size;
88
padding: 0;
89
margin: 2px;
90
border-radius: $calendar_day_size * 0.5 + 2px;
91
border: 1px solid transparent; //avoid jumparound due to today
92
font-feature-settings: "tnum";
93
&:hover, &:focus { background-color: $hover_bg_color; }
94
&:active,&:selected {
95
color: lighten($fg_color,10%);
96
background-color: darken($bg_color,5%);
97
}
98
99
// day of week heading
100
&.calendar-day-heading {
101
color: lighten($fg_color,10%);
102
margin-top: 1em;
103
@include fontsize($base_font_size - 4);
104
}
105
}
106
107
.calendar-day { //border collapse hack - see calendar.js
108
border-width: 0;
109
}
110
111
.calendar-day-top {
112
border-top-width: 1px;
113
}
114
115
.calendar-day-left {
116
border-left-width: 1px;
117
}
118
119
.calendar-work-day {}
120
121
.calendar-nonwork-day {
122
color: $insensitive_fg_color;
123
}
124
125
// Today
126
.calendar-today {
127
font-weight: bold;
128
border: 1px solid transparent;
129
background-color: $selected_bg_color;
130
color: $selected_fg_color;
131
132
&:hover,&:focus {
133
background-color:lighten($selected_bg_color, 3%);
134
color: $selected_fg_color;
135
}
136
137
&:active,&:selected {
138
background-color: $selected_bg_color;
139
color: $selected_fg_color;
140
141
&:hover,&:focus {
142
background-color:lighten($selected_bg_color, 3%);
143
color: $selected_fg_color;
144
}
145
}
146
}
147
148
.calendar-day-with-events {
149
color: lighten($fg_color,10%);
150
font-weight: bold;
151
background-image: url("resource:///org/gnome/shell/theme/calendar-today.svg");
152
}
153
154
.calendar-other-month-day {
155
color: transparentize($fg_color ,0.5);
156
}
157
158
.calendar-week-number {
159
@include fontsize($base_font_size - 4);
160
font-weight: bold;
161
height: 1.8em;
162
width: 2.3em;
163
border-radius: 2px;
164
padding: 0.5em 0 0;
165
margin: 6px;
166
background-color: darken($bg_color, 2%);
167
color: lighten($fg_color, 5%);
168
}
169
}
170
171
/* World clocks */
172
.world-clocks-button {
173
@include notification_bubble;
174
padding: $base_padding * 2;
175
176
.world-clocks-grid {
177
spacing-rows: $base_spacing;
178
spacing-columns: $base_spacing * 2;
179
}
180
181
// title
182
.world-clocks-header {
183
color: desaturate(darken($fg_color,40%), 10%);
184
font-weight: bold;
185
}
186
187
// city label
188
.world-clocks-city {
189
color: $fg_color;
190
@include fontsize($base_font_size);
191
font-weight: normal;
192
}
193
194
// timezone time
195
.world-clocks-time {
196
font-weight: bold;
197
color: $fg_color;
198
font-feature-settings: "lnum";
199
@include fontsize($base_font_size);
200
text-align: right;
201
}
202
203
// timezone offset label
204
.world-clocks-timezone {
205
color: darken($fg_color,20%);
206
font-feature-settings: "tnum";
207
@include fontsize($base_font_size - 1);
208
}
209
}
210
211
/* Weather */
212
.weather-button {
213
@include notification_bubble;
214
padding: $base_padding * 2;
215
216
.weather-box {
217
spacing: $base_spacing + $base_margin;
218
}
219
220
.weather-header-box {
221
spacing: $base_spacing;
222
}
223
224
.weather-header {
225
color: desaturate(darken($fg_color,40%), 10%);
226
font-weight: bold;
227
228
&.location {
229
font-weight: normal;
230
@include fontsize($base_font_size - 1);
231
}
232
}
233
234
.weather-grid {
235
spacing-rows: $base_spacing;
236
spacing-columns: $base_spacing * 2;
237
}
238
239
.weather-forecast-time {
240
color: darken($fg_color,30%);
241
font-feature-settings: "tnum";
242
@include fontsize($base_font_size - 2);
243
font-weight: normal;
244
padding-top: 0.2em;
245
padding-bottom: 0.4em;
246
}
247
248
.weather-forecast-icon {
249
icon-size: $base_icon_size * 2;
250
}
251
252
.weather-forecast-temp {
253
font-weight: bold;
254
}
255
}
256