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