@event-calendar/core 2.3.3 → 2.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +28 -3
- package/index.css +104 -25
- package/index.js +4 -4
- package/package.json +1 -1
- package/src/{index.scss → styles/index.scss} +34 -26
- package/src/styles/theme.scss +96 -0
package/README.md
CHANGED
|
@@ -133,6 +133,7 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
|
|
|
133
133
|
- [Resource object](#resource-object)
|
|
134
134
|
- [Parsing resource from a plain object](#parsing-resource-from-a-plain-object)
|
|
135
135
|
- [View object](#view-object)
|
|
136
|
+
- [Theming](#theming)
|
|
136
137
|
- [Browser support](#browser-support)
|
|
137
138
|
|
|
138
139
|
## Usage
|
|
@@ -196,8 +197,8 @@ import '@event-calendar/core/index.css';
|
|
|
196
197
|
### Pre-built browser ready bundle
|
|
197
198
|
Include the following lines of code in the `<head>` section of your page:
|
|
198
199
|
```html
|
|
199
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.
|
|
200
|
-
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.
|
|
200
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.4.0/event-calendar.min.css">
|
|
201
|
+
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.4.0/event-calendar.min.js"></script>
|
|
201
202
|
```
|
|
202
203
|
|
|
203
204
|
<details>
|
|
@@ -2244,7 +2245,7 @@ Returns the [View](#view-object) object for the current view.
|
|
|
2244
2245
|
Clears the current selection. See [selectable](#selectable).
|
|
2245
2246
|
|
|
2246
2247
|
## Content
|
|
2247
|
-
The content can be presented in the following forms:
|
|
2248
|
+
The content value can be presented in the following forms:
|
|
2248
2249
|
|
|
2249
2250
|
* a string containing text `'some text'`
|
|
2250
2251
|
* an object containing the HTML string `{html: '<p>some HTML</p>'}`
|
|
@@ -2720,6 +2721,30 @@ Here are all properties that exist in View object:
|
|
|
2720
2721
|
</tr>
|
|
2721
2722
|
</table>
|
|
2722
2723
|
|
|
2724
|
+
## Theming
|
|
2725
|
+
|
|
2726
|
+
The library provides a built-in dark theme. This theme is activated automatically if the current [preferred color theme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) is a dark one.
|
|
2727
|
+
|
|
2728
|
+
You can also activate the dark theme manually by adding the `ec-dark` CSS class to any parent element of the calendar, e.g. `<body class="ec-dark">`.
|
|
2729
|
+
|
|
2730
|
+
<details>
|
|
2731
|
+
<summary>Note</summary>
|
|
2732
|
+
|
|
2733
|
+
> Use the `ec-light` CSS class to manually activate the light theme when the current [preferred color theme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) is a dark theme, e.g. `<body class="ec-light">`.
|
|
2734
|
+
|
|
2735
|
+
</details>
|
|
2736
|
+
|
|
2737
|
+
Please note that the dark theme does not change the background and font color in the calendar. It is assumed that the page background and font color are set by page styles, and the calendar inherits these styles.
|
|
2738
|
+
|
|
2739
|
+
If you do need to set the background or font color of the calendar, use local CSS variables for this:
|
|
2740
|
+
```css
|
|
2741
|
+
.ec {
|
|
2742
|
+
--ec-bg-color: #22272e;
|
|
2743
|
+
--ec-text-color: #adbac7;
|
|
2744
|
+
}
|
|
2745
|
+
```
|
|
2746
|
+
A list of all available CSS variables can be found [here](packages/core/src/styles/theme.scss).
|
|
2747
|
+
|
|
2723
2748
|
## Browser support
|
|
2724
2749
|
|
|
2725
2750
|
The latest versions of Chrome, Firefox, Safari, and Edge are supported.
|
package/index.css
CHANGED
|
@@ -1,3 +1,76 @@
|
|
|
1
|
+
.ec {
|
|
2
|
+
/* HSL */
|
|
3
|
+
color-scheme: light;
|
|
4
|
+
--ec-h: 0;
|
|
5
|
+
--ec-s: 0%;
|
|
6
|
+
--ec-l-300: 91.00%;
|
|
7
|
+
--ec-l-500: 83.50%;
|
|
8
|
+
--ec-l-600: 78.40%;
|
|
9
|
+
--ec-l-700: 71.40%;
|
|
10
|
+
--ec-bg-fallback-color: #fff;
|
|
11
|
+
--ec-hs: var(--ec-h), var(--ec-s);
|
|
12
|
+
/* Main color */
|
|
13
|
+
--ec-color-300: hsl(var(--ec-hs), var(--ec-l-300));
|
|
14
|
+
--ec-color-500: hsl(var(--ec-hs), var(--ec-l-500));
|
|
15
|
+
--ec-color-600: hsl(var(--ec-hs), var(--ec-l-600));
|
|
16
|
+
--ec-color-700: hsl(var(--ec-hs), var(--ec-l-700));
|
|
17
|
+
/* General props */
|
|
18
|
+
--ec-border-color: var(--ec-color-500);
|
|
19
|
+
--ec-accent-color: var(--ec-color-600);
|
|
20
|
+
/* Buttons */
|
|
21
|
+
--ec-button-bg-color: var(--ec-bg-color);
|
|
22
|
+
--ec-button-border-color: var(--ec-color-600);
|
|
23
|
+
--ec-button-text-color: var(--ec-text-color);
|
|
24
|
+
--ec-button-active-bg-color: var(--ec-color-300);
|
|
25
|
+
--ec-button-active-border-color: var(--ec-color-700);
|
|
26
|
+
--ec-button-active-text-color: var(--ec-button-text-color);
|
|
27
|
+
/* Events */
|
|
28
|
+
--ec-event-bg-color: #039be5;
|
|
29
|
+
--ec-event-text-color: #fff;
|
|
30
|
+
--ec-bg-event-color: var(--ec-color-500);
|
|
31
|
+
--ec-bg-event-opacity: 0.3;
|
|
32
|
+
/* Days */
|
|
33
|
+
--ec-list-day-bg-color: var(--ec-bg-color, var(--ec-bg-fallback-color));
|
|
34
|
+
--ec-today-bg-color: rgba(255, 220, 40, .15);
|
|
35
|
+
--ec-highlight-color: rgba(188, 232, 241, .3);
|
|
36
|
+
/* Popup */
|
|
37
|
+
--ec-popup-bg-color: var(--ec-bg-color, var(--ec-bg-fallback-color));
|
|
38
|
+
/* Now Indicator */
|
|
39
|
+
--ec-now-indicator-color: #ea4335;
|
|
40
|
+
}
|
|
41
|
+
.ec-dark .ec {
|
|
42
|
+
color-scheme: dark;
|
|
43
|
+
--ec-h: 215;
|
|
44
|
+
--ec-s: 15%;
|
|
45
|
+
--ec-l-300: 25.50%;
|
|
46
|
+
--ec-l-500: 42.40%;
|
|
47
|
+
--ec-l-600: 49.80%;
|
|
48
|
+
--ec-l-700: 57.30%;
|
|
49
|
+
--ec-bg-fallback-color: #22272e;
|
|
50
|
+
}
|
|
51
|
+
@media (prefers-color-scheme: dark) {
|
|
52
|
+
.ec {
|
|
53
|
+
color-scheme: dark;
|
|
54
|
+
--ec-h: 215;
|
|
55
|
+
--ec-s: 15%;
|
|
56
|
+
--ec-l-300: 25.50%;
|
|
57
|
+
--ec-l-500: 42.40%;
|
|
58
|
+
--ec-l-600: 49.80%;
|
|
59
|
+
--ec-l-700: 57.30%;
|
|
60
|
+
--ec-bg-fallback-color: #22272e;
|
|
61
|
+
}
|
|
62
|
+
.ec-light .ec {
|
|
63
|
+
color-scheme: light;
|
|
64
|
+
--ec-h: 0;
|
|
65
|
+
--ec-s: 0%;
|
|
66
|
+
--ec-l-300: 91.00%;
|
|
67
|
+
--ec-l-500: 83.50%;
|
|
68
|
+
--ec-l-600: 78.40%;
|
|
69
|
+
--ec-l-700: 71.40%;
|
|
70
|
+
--ec-bg-fallback-color: #fff;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
|
|
1
74
|
/* Grid */
|
|
2
75
|
.ec-days,
|
|
3
76
|
.ec-day,
|
|
@@ -11,21 +84,24 @@
|
|
|
11
84
|
.ec {
|
|
12
85
|
display: flex;
|
|
13
86
|
flex-direction: column;
|
|
87
|
+
color: var(--ec-text-color);
|
|
88
|
+
background-color: var(--ec-bg-color);
|
|
14
89
|
-webkit-tap-highlight-color: transparent;
|
|
15
90
|
/* Scrollbar */
|
|
16
91
|
}
|
|
17
92
|
.ec ::-webkit-scrollbar {
|
|
18
|
-
background:
|
|
93
|
+
background-color: transparent;
|
|
19
94
|
}
|
|
20
95
|
.ec ::-webkit-scrollbar-thumb {
|
|
21
|
-
border: 4px solid
|
|
96
|
+
border: 4px solid transparent;
|
|
22
97
|
box-shadow: none;
|
|
23
|
-
background:
|
|
98
|
+
background-color: var(--ec-border-color);
|
|
99
|
+
background-clip: padding-box;
|
|
24
100
|
border-radius: 8px;
|
|
25
101
|
min-height: 40px;
|
|
26
102
|
}
|
|
27
103
|
.ec :hover::-webkit-scrollbar-thumb {
|
|
28
|
-
background:
|
|
104
|
+
background-color: var(--ec-accent-color);
|
|
29
105
|
}
|
|
30
106
|
|
|
31
107
|
.ec-hidden-scroll {
|
|
@@ -61,20 +137,22 @@
|
|
|
61
137
|
}
|
|
62
138
|
|
|
63
139
|
.ec-button {
|
|
64
|
-
background-color:
|
|
65
|
-
border: 1px solid
|
|
140
|
+
background-color: var(--ec-button-bg-color);
|
|
141
|
+
border: 1px solid var(--ec-button-border-color);
|
|
66
142
|
padding: 0.375rem 0.75rem;
|
|
67
143
|
font-size: 1rem;
|
|
68
144
|
line-height: 1.5;
|
|
69
145
|
border-radius: 0.25rem;
|
|
70
146
|
}
|
|
71
147
|
.ec-button:not(:disabled) {
|
|
72
|
-
color:
|
|
148
|
+
color: var(--ec-button-text-color);
|
|
73
149
|
cursor: pointer;
|
|
74
150
|
}
|
|
75
151
|
.ec-button:not(:disabled):hover, .ec-button.ec-active {
|
|
76
|
-
background-color:
|
|
77
|
-
border-color:
|
|
152
|
+
background-color: var(--ec-button-active-bg-color);
|
|
153
|
+
border-color: var(--ec-button-active-border-color);
|
|
154
|
+
color: var(--ec-button-active-text-color);
|
|
155
|
+
z-index: 1;
|
|
78
156
|
}
|
|
79
157
|
|
|
80
158
|
.ec-button-group {
|
|
@@ -99,8 +177,8 @@
|
|
|
99
177
|
position: relative;
|
|
100
178
|
width: 0.5em;
|
|
101
179
|
height: 0.5em;
|
|
102
|
-
border-top: 2px solid
|
|
103
|
-
border-right: 2px solid
|
|
180
|
+
border-top: 2px solid currentcolor;
|
|
181
|
+
border-right: 2px solid currentcolor;
|
|
104
182
|
display: inline-block;
|
|
105
183
|
}
|
|
106
184
|
.ec-icon.ec-prev:after {
|
|
@@ -116,7 +194,7 @@
|
|
|
116
194
|
.ec-body,
|
|
117
195
|
.ec-days,
|
|
118
196
|
.ec-day {
|
|
119
|
-
border: 1px solid
|
|
197
|
+
border: 1px solid var(--ec-border-color);
|
|
120
198
|
}
|
|
121
199
|
|
|
122
200
|
.ec-header {
|
|
@@ -224,10 +302,10 @@
|
|
|
224
302
|
border-style: none none none solid;
|
|
225
303
|
}
|
|
226
304
|
.ec-day.ec-today {
|
|
227
|
-
background-color:
|
|
305
|
+
background-color: var(--ec-today-bg-color);
|
|
228
306
|
}
|
|
229
307
|
.ec-day.ec-highlight {
|
|
230
|
-
background-color:
|
|
308
|
+
background-color: var(--ec-highlight-color);
|
|
231
309
|
}
|
|
232
310
|
.ec-day-grid .ec-body .ec-day {
|
|
233
311
|
min-height: 5em;
|
|
@@ -244,7 +322,7 @@
|
|
|
244
322
|
}
|
|
245
323
|
.ec-list .ec-day {
|
|
246
324
|
flex: 1 0 auto;
|
|
247
|
-
background-color:
|
|
325
|
+
background-color: var(--ec-list-day-bg-color);
|
|
248
326
|
border-style: solid none;
|
|
249
327
|
padding: 8px 14px;
|
|
250
328
|
font-weight: bold;
|
|
@@ -288,10 +366,10 @@
|
|
|
288
366
|
.ec-event {
|
|
289
367
|
display: flex;
|
|
290
368
|
padding: 2px;
|
|
291
|
-
color:
|
|
369
|
+
color: var(--ec-event-text-color);
|
|
292
370
|
box-sizing: border-box;
|
|
293
|
-
box-shadow: 0 0 1px 0
|
|
294
|
-
background-color:
|
|
371
|
+
box-shadow: 0 0 1px 0 var(--ec-border-color);
|
|
372
|
+
background-color: var(--ec-event-bg-color);
|
|
295
373
|
border-radius: 3px;
|
|
296
374
|
font-size: 0.85em;
|
|
297
375
|
line-height: 1.5;
|
|
@@ -389,8 +467,8 @@
|
|
|
389
467
|
|
|
390
468
|
.ec-bg-event {
|
|
391
469
|
position: absolute;
|
|
392
|
-
background-color:
|
|
393
|
-
opacity:
|
|
470
|
+
background-color: var(--ec-bg-event-color);
|
|
471
|
+
opacity: var(--ec-bg-event-opacity);
|
|
394
472
|
width: 100%;
|
|
395
473
|
z-index: 1;
|
|
396
474
|
}
|
|
@@ -421,7 +499,7 @@
|
|
|
421
499
|
content: "";
|
|
422
500
|
position: absolute;
|
|
423
501
|
width: 100%;
|
|
424
|
-
border-bottom: 1px solid
|
|
502
|
+
border-bottom: 1px solid var(--ec-border-color);
|
|
425
503
|
pointer-events: none;
|
|
426
504
|
}
|
|
427
505
|
|
|
@@ -438,10 +516,11 @@
|
|
|
438
516
|
min-width: 180px;
|
|
439
517
|
z-index: 1010;
|
|
440
518
|
padding: 8px 10px 14px;
|
|
441
|
-
background-color:
|
|
519
|
+
background-color: var(--ec-popup-bg-color);
|
|
520
|
+
border: 1px solid var(--ec-border-color);
|
|
442
521
|
border-radius: 6px;
|
|
443
522
|
outline: 1px solid transparent;
|
|
444
|
-
box-shadow: 0 1px 3px 0
|
|
523
|
+
box-shadow: 0 1px 3px 0 hsla(var(--ec-hs), 50%, 0.15), 0 4px 8px 3px hsla(var(--ec-hs), 50%, 0.15);
|
|
445
524
|
}
|
|
446
525
|
.ec-popup .ec-day-head {
|
|
447
526
|
text-align: left;
|
|
@@ -471,11 +550,11 @@
|
|
|
471
550
|
position: absolute;
|
|
472
551
|
z-index: 1005;
|
|
473
552
|
width: 100%;
|
|
474
|
-
border-top:
|
|
553
|
+
border-top: var(--ec-now-indicator-color) solid 2px;
|
|
475
554
|
pointer-events: none;
|
|
476
555
|
}
|
|
477
556
|
.ec-now-indicator:before {
|
|
478
|
-
background:
|
|
557
|
+
background: var(--ec-now-indicator-color);
|
|
479
558
|
border-radius: 50%;
|
|
480
559
|
content: "";
|
|
481
560
|
position: absolute;
|
package/index.js
CHANGED
|
@@ -1091,7 +1091,7 @@ function validKey(key, state) {
|
|
|
1091
1091
|
return state.hasOwnProperty(key) && key[0] !== '_';
|
|
1092
1092
|
}
|
|
1093
1093
|
|
|
1094
|
-
/* packages/core/src/Buttons.svelte generated by Svelte v4.
|
|
1094
|
+
/* packages/core/src/Buttons.svelte generated by Svelte v4.2.2 */
|
|
1095
1095
|
|
|
1096
1096
|
function get_each_context$2(ctx, list, i) {
|
|
1097
1097
|
const child_ctx = ctx.slice();
|
|
@@ -1544,7 +1544,7 @@ class Buttons extends SvelteComponent {
|
|
|
1544
1544
|
}
|
|
1545
1545
|
}
|
|
1546
1546
|
|
|
1547
|
-
/* packages/core/src/Toolbar.svelte generated by Svelte v4.
|
|
1547
|
+
/* packages/core/src/Toolbar.svelte generated by Svelte v4.2.2 */
|
|
1548
1548
|
|
|
1549
1549
|
function get_each_context$1(ctx, list, i) {
|
|
1550
1550
|
const child_ctx = ctx.slice();
|
|
@@ -1930,7 +1930,7 @@ class Toolbar extends SvelteComponent {
|
|
|
1930
1930
|
}
|
|
1931
1931
|
}
|
|
1932
1932
|
|
|
1933
|
-
/* packages/core/src/Auxiliary.svelte generated by Svelte v4.
|
|
1933
|
+
/* packages/core/src/Auxiliary.svelte generated by Svelte v4.2.2 */
|
|
1934
1934
|
|
|
1935
1935
|
function get_each_context(ctx, list, i) {
|
|
1936
1936
|
const child_ctx = ctx.slice();
|
|
@@ -2138,7 +2138,7 @@ class Auxiliary extends SvelteComponent {
|
|
|
2138
2138
|
}
|
|
2139
2139
|
}
|
|
2140
2140
|
|
|
2141
|
-
/* packages/core/src/Calendar.svelte generated by Svelte v4.
|
|
2141
|
+
/* packages/core/src/Calendar.svelte generated by Svelte v4.2.2 */
|
|
2142
2142
|
|
|
2143
2143
|
function create_fragment(ctx) {
|
|
2144
2144
|
let div;
|
package/package.json
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
@use "theme";
|
|
2
|
+
|
|
1
3
|
/* Grid */
|
|
2
4
|
.ec-days,
|
|
3
5
|
.ec-day,
|
|
@@ -11,23 +13,26 @@
|
|
|
11
13
|
.ec {
|
|
12
14
|
display: flex;
|
|
13
15
|
flex-direction: column;
|
|
16
|
+
color: var(--ec-text-color);
|
|
17
|
+
background-color: var(--ec-bg-color);
|
|
14
18
|
-webkit-tap-highlight-color: transparent;
|
|
15
19
|
|
|
16
20
|
/* Scrollbar */
|
|
17
21
|
::-webkit-scrollbar {
|
|
18
|
-
background:
|
|
22
|
+
background-color: transparent;
|
|
19
23
|
}
|
|
20
24
|
|
|
21
25
|
::-webkit-scrollbar-thumb {
|
|
22
|
-
border: 4px solid
|
|
26
|
+
border: 4px solid transparent;
|
|
23
27
|
box-shadow: none;
|
|
24
|
-
background:
|
|
28
|
+
background-color: var(--ec-border-color);
|
|
29
|
+
background-clip: padding-box;
|
|
25
30
|
border-radius: 8px;
|
|
26
31
|
min-height: 40px;
|
|
27
32
|
}
|
|
28
33
|
|
|
29
34
|
:hover::-webkit-scrollbar-thumb {
|
|
30
|
-
background:
|
|
35
|
+
background-color: var(--ec-accent-color);
|
|
31
36
|
}
|
|
32
37
|
}
|
|
33
38
|
|
|
@@ -68,22 +73,24 @@
|
|
|
68
73
|
}
|
|
69
74
|
|
|
70
75
|
.ec-button {
|
|
71
|
-
background-color:
|
|
72
|
-
border: 1px solid
|
|
76
|
+
background-color: var(--ec-button-bg-color);
|
|
77
|
+
border: 1px solid var(--ec-button-border-color);
|
|
73
78
|
padding: .375rem .75rem;
|
|
74
79
|
font-size: 1rem;
|
|
75
80
|
line-height: 1.5;
|
|
76
81
|
border-radius: .25rem;
|
|
77
82
|
|
|
78
83
|
&:not(:disabled) {
|
|
79
|
-
color:
|
|
84
|
+
color: var(--ec-button-text-color);
|
|
80
85
|
cursor: pointer;
|
|
81
86
|
}
|
|
82
87
|
|
|
83
88
|
&:not(:disabled):hover,
|
|
84
89
|
&.ec-active {
|
|
85
|
-
background-color:
|
|
86
|
-
border-color:
|
|
90
|
+
background-color: var(--ec-button-active-bg-color);
|
|
91
|
+
border-color: var(--ec-button-active-border-color);
|
|
92
|
+
color: var(--ec-button-active-text-color);
|
|
93
|
+
z-index: 1; // make all borders visible
|
|
87
94
|
}
|
|
88
95
|
}
|
|
89
96
|
|
|
@@ -112,8 +119,8 @@
|
|
|
112
119
|
position: relative;
|
|
113
120
|
width: .5em;
|
|
114
121
|
height: .5em;
|
|
115
|
-
border-top: 2px solid
|
|
116
|
-
border-right: 2px solid
|
|
122
|
+
border-top: 2px solid currentcolor;
|
|
123
|
+
border-right: 2px solid currentcolor;
|
|
117
124
|
display: inline-block;
|
|
118
125
|
}
|
|
119
126
|
|
|
@@ -132,7 +139,7 @@
|
|
|
132
139
|
.ec-body,
|
|
133
140
|
.ec-days,
|
|
134
141
|
.ec-day {
|
|
135
|
-
border: 1px solid
|
|
142
|
+
border: 1px solid var(--ec-border-color);
|
|
136
143
|
}
|
|
137
144
|
|
|
138
145
|
.ec-header {
|
|
@@ -256,11 +263,11 @@
|
|
|
256
263
|
border-style: none none none solid;
|
|
257
264
|
|
|
258
265
|
&.ec-today {
|
|
259
|
-
background-color:
|
|
266
|
+
background-color: var(--ec-today-bg-color);
|
|
260
267
|
}
|
|
261
268
|
|
|
262
269
|
&.ec-highlight {
|
|
263
|
-
background-color:
|
|
270
|
+
background-color: var(--ec-highlight-color);
|
|
264
271
|
}
|
|
265
272
|
|
|
266
273
|
.ec-day-grid .ec-body & {
|
|
@@ -282,7 +289,7 @@
|
|
|
282
289
|
|
|
283
290
|
.ec-list & {
|
|
284
291
|
flex: 1 0 auto;
|
|
285
|
-
background-color:
|
|
292
|
+
background-color: var(--ec-list-day-bg-color);
|
|
286
293
|
border-style: solid none;
|
|
287
294
|
padding: 8px 14px;
|
|
288
295
|
font-weight: bold;
|
|
@@ -337,10 +344,10 @@
|
|
|
337
344
|
.ec-event {
|
|
338
345
|
display: flex;
|
|
339
346
|
padding: 2px;
|
|
340
|
-
color:
|
|
347
|
+
color: var(--ec-event-text-color);
|
|
341
348
|
box-sizing: border-box;
|
|
342
|
-
box-shadow: 0 0 1px 0
|
|
343
|
-
background-color:
|
|
349
|
+
box-shadow: 0 0 1px 0 var(--ec-border-color);
|
|
350
|
+
background-color: var(--ec-event-bg-color);
|
|
344
351
|
border-radius: 3px;
|
|
345
352
|
font-size: .85em;
|
|
346
353
|
line-height: 1.5;
|
|
@@ -451,8 +458,8 @@
|
|
|
451
458
|
|
|
452
459
|
.ec-bg-event {
|
|
453
460
|
position: absolute;
|
|
454
|
-
background-color:
|
|
455
|
-
opacity:
|
|
461
|
+
background-color: var(--ec-bg-event-color);
|
|
462
|
+
opacity: var(--ec-bg-event-opacity);
|
|
456
463
|
width: 100%;
|
|
457
464
|
z-index: 1;
|
|
458
465
|
}
|
|
@@ -485,7 +492,7 @@
|
|
|
485
492
|
content: '';
|
|
486
493
|
position: absolute;
|
|
487
494
|
width: 100%;
|
|
488
|
-
border-bottom: 1px solid
|
|
495
|
+
border-bottom: 1px solid var(--ec-border-color);
|
|
489
496
|
pointer-events: none;
|
|
490
497
|
}
|
|
491
498
|
|
|
@@ -502,10 +509,11 @@
|
|
|
502
509
|
min-width: 180px;
|
|
503
510
|
z-index: 1010;
|
|
504
511
|
padding: 8px 10px 14px;
|
|
505
|
-
background-color:
|
|
512
|
+
background-color: var(--ec-popup-bg-color);
|
|
513
|
+
border: 1px solid var(--ec-border-color);
|
|
506
514
|
border-radius: 6px;
|
|
507
515
|
outline: 1px solid transparent;
|
|
508
|
-
box-shadow: 0 1px 3px 0
|
|
516
|
+
box-shadow: 0 1px 3px 0 hsla(var(--ec-hs), 50%, .15), 0 4px 8px 3px hsla(var(--ec-hs), 50%, .15);
|
|
509
517
|
|
|
510
518
|
.ec-day-head {
|
|
511
519
|
text-align: left;
|
|
@@ -538,11 +546,11 @@
|
|
|
538
546
|
position: absolute;
|
|
539
547
|
z-index: 1005;
|
|
540
548
|
width: 100%;
|
|
541
|
-
border-top:
|
|
549
|
+
border-top: var(--ec-now-indicator-color) solid 2px;
|
|
542
550
|
pointer-events: none;
|
|
543
551
|
|
|
544
552
|
&:before {
|
|
545
|
-
background:
|
|
553
|
+
background: var(--ec-now-indicator-color);
|
|
546
554
|
border-radius: 50%;
|
|
547
555
|
content: "";
|
|
548
556
|
position: absolute;
|
|
@@ -585,4 +593,4 @@
|
|
|
585
593
|
}
|
|
586
594
|
.ec-resizing-x {
|
|
587
595
|
cursor: ew-resize!important;
|
|
588
|
-
}
|
|
596
|
+
}
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
@mixin light-theme() {
|
|
2
|
+
color-scheme: light;
|
|
3
|
+
--ec-h: 0;
|
|
4
|
+
--ec-s: 0%;
|
|
5
|
+
//--ec-l-50: 97.30%;
|
|
6
|
+
//--ec-l-100: 95.70%;
|
|
7
|
+
//--ec-l-200: 93.70%;
|
|
8
|
+
--ec-l-300: 91.00%;
|
|
9
|
+
//--ec-l-400: 87.80%;
|
|
10
|
+
--ec-l-500: 83.50%;
|
|
11
|
+
--ec-l-600: 78.40%;
|
|
12
|
+
--ec-l-700: 71.40%;
|
|
13
|
+
//--ec-l-800: 62.40%;
|
|
14
|
+
//--ec-l-900: 48.20%;
|
|
15
|
+
//--ec-l-950: 13.30%;
|
|
16
|
+
--ec-bg-fallback-color: #fff;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
@mixin dark-theme() {
|
|
20
|
+
color-scheme: dark;
|
|
21
|
+
--ec-h: 215;
|
|
22
|
+
--ec-s: 15%;
|
|
23
|
+
//--ec-l-50: 5.10%;
|
|
24
|
+
//--ec-l-100: 8.60%;
|
|
25
|
+
//--ec-l-200: 13.30%;
|
|
26
|
+
--ec-l-300: 25.50%;
|
|
27
|
+
//--ec-l-400: 34.10%;
|
|
28
|
+
--ec-l-500: 42.40%;
|
|
29
|
+
--ec-l-600: 49.80%;
|
|
30
|
+
--ec-l-700: 57.30%;
|
|
31
|
+
//--ec-l-800: 64.70%;
|
|
32
|
+
//--ec-l-900: 72.50%;
|
|
33
|
+
//--ec-l-950: 80.40%;
|
|
34
|
+
--ec-bg-fallback-color: #22272e;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.ec {
|
|
38
|
+
/* HSL */
|
|
39
|
+
@include light-theme;
|
|
40
|
+
--ec-hs: var(--ec-h), var(--ec-s);
|
|
41
|
+
|
|
42
|
+
/* Main color */
|
|
43
|
+
//--ec-color-50: hsl(var(--ec-hs), var(--ec-l-50));
|
|
44
|
+
//--ec-color-100: hsl(var(--ec-hs), var(--ec-l-100));
|
|
45
|
+
//--ec-color-200: hsl(var(--ec-hs), var(--ec-l-200));
|
|
46
|
+
--ec-color-300: hsl(var(--ec-hs), var(--ec-l-300));
|
|
47
|
+
//--ec-color-400: hsl(var(--ec-hs), var(--ec-l-400));
|
|
48
|
+
--ec-color-500: hsl(var(--ec-hs), var(--ec-l-500));
|
|
49
|
+
--ec-color-600: hsl(var(--ec-hs), var(--ec-l-600));
|
|
50
|
+
--ec-color-700: hsl(var(--ec-hs), var(--ec-l-700));
|
|
51
|
+
//--ec-color-800: hsl(var(--ec-hs), var(--ec-l-800));
|
|
52
|
+
//--ec-color-900: hsl(var(--ec-hs), var(--ec-l-900));
|
|
53
|
+
//--ec-color-950: hsl(var(--ec-hs), var(--ec-l-950));
|
|
54
|
+
|
|
55
|
+
/* General props */
|
|
56
|
+
//--ec-bg-color: <color>; // can be set by the user
|
|
57
|
+
//--ec-text-color: <color>; // can be set by the user
|
|
58
|
+
--ec-border-color: var(--ec-color-500);
|
|
59
|
+
--ec-accent-color: var(--ec-color-600);
|
|
60
|
+
|
|
61
|
+
/* Buttons */
|
|
62
|
+
--ec-button-bg-color: var(--ec-bg-color);
|
|
63
|
+
--ec-button-border-color: var(--ec-color-600);
|
|
64
|
+
--ec-button-text-color: var(--ec-text-color);
|
|
65
|
+
--ec-button-active-bg-color: var(--ec-color-300);
|
|
66
|
+
--ec-button-active-border-color: var(--ec-color-700);
|
|
67
|
+
--ec-button-active-text-color: var(--ec-button-text-color);
|
|
68
|
+
|
|
69
|
+
/* Events */
|
|
70
|
+
--ec-event-bg-color: #039be5;
|
|
71
|
+
--ec-event-text-color: #fff;
|
|
72
|
+
--ec-bg-event-color: var(--ec-color-500);
|
|
73
|
+
--ec-bg-event-opacity: 0.3;
|
|
74
|
+
|
|
75
|
+
/* Days */
|
|
76
|
+
--ec-list-day-bg-color: var(--ec-bg-color, var(--ec-bg-fallback-color));
|
|
77
|
+
--ec-today-bg-color: rgba(255, 220, 40, .15);
|
|
78
|
+
--ec-highlight-color: rgba(188, 232, 241, .3);
|
|
79
|
+
|
|
80
|
+
/* Popup */
|
|
81
|
+
--ec-popup-bg-color: var(--ec-bg-color, var(--ec-bg-fallback-color));
|
|
82
|
+
|
|
83
|
+
/* Now Indicator */
|
|
84
|
+
--ec-now-indicator-color: #ea4335;
|
|
85
|
+
|
|
86
|
+
.ec-dark & {
|
|
87
|
+
@include dark-theme;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
@media (prefers-color-scheme: dark) {
|
|
91
|
+
@include dark-theme;
|
|
92
|
+
.ec-light & {
|
|
93
|
+
@include light-theme;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
}
|