@event-calendar/core 2.3.3 → 2.4.1
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 +21 -3
- package/index.css +94 -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 +95 -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.1/event-calendar.min.css">
|
|
201
|
+
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.4.1/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,23 @@ 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. You can activate it by adding the `ec-dark` CSS class to any parent element of the calendar, e.g. `<body class="ec-dark">`.
|
|
2727
|
+
|
|
2728
|
+
If you want the dark theme to be activated automatically based on the [preferred color scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme), then use the `ec-auto-dark` CSS class instead.
|
|
2729
|
+
|
|
2730
|
+
Please note that the dark theme does not change the background and font color in the calendar. These are assumed to be set by the page styles, and the calendar inherits these styles.
|
|
2731
|
+
|
|
2732
|
+
If you do need to set the background or font color of the calendar, use local CSS variables for this:
|
|
2733
|
+
```css
|
|
2734
|
+
.ec {
|
|
2735
|
+
--ec-bg-color: #22272e;
|
|
2736
|
+
--ec-text-color: #adbac7;
|
|
2737
|
+
}
|
|
2738
|
+
```
|
|
2739
|
+
A list of all available CSS variables can be found [here](packages/core/src/styles/theme.scss).
|
|
2740
|
+
|
|
2723
2741
|
## Browser support
|
|
2724
2742
|
|
|
2725
2743
|
The latest versions of Chrome, Firefox, Safari, and Edge are supported.
|
package/index.css
CHANGED
|
@@ -1,3 +1,66 @@
|
|
|
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-auto-dark .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
|
+
}
|
|
63
|
+
|
|
1
64
|
/* Grid */
|
|
2
65
|
.ec-days,
|
|
3
66
|
.ec-day,
|
|
@@ -11,21 +74,24 @@
|
|
|
11
74
|
.ec {
|
|
12
75
|
display: flex;
|
|
13
76
|
flex-direction: column;
|
|
77
|
+
color: var(--ec-text-color);
|
|
78
|
+
background-color: var(--ec-bg-color);
|
|
14
79
|
-webkit-tap-highlight-color: transparent;
|
|
15
80
|
/* Scrollbar */
|
|
16
81
|
}
|
|
17
82
|
.ec ::-webkit-scrollbar {
|
|
18
|
-
background:
|
|
83
|
+
background-color: transparent;
|
|
19
84
|
}
|
|
20
85
|
.ec ::-webkit-scrollbar-thumb {
|
|
21
|
-
border: 4px solid
|
|
86
|
+
border: 4px solid transparent;
|
|
22
87
|
box-shadow: none;
|
|
23
|
-
background:
|
|
88
|
+
background-color: var(--ec-border-color);
|
|
89
|
+
background-clip: padding-box;
|
|
24
90
|
border-radius: 8px;
|
|
25
91
|
min-height: 40px;
|
|
26
92
|
}
|
|
27
93
|
.ec :hover::-webkit-scrollbar-thumb {
|
|
28
|
-
background:
|
|
94
|
+
background-color: var(--ec-accent-color);
|
|
29
95
|
}
|
|
30
96
|
|
|
31
97
|
.ec-hidden-scroll {
|
|
@@ -61,20 +127,22 @@
|
|
|
61
127
|
}
|
|
62
128
|
|
|
63
129
|
.ec-button {
|
|
64
|
-
background-color:
|
|
65
|
-
border: 1px solid
|
|
130
|
+
background-color: var(--ec-button-bg-color);
|
|
131
|
+
border: 1px solid var(--ec-button-border-color);
|
|
66
132
|
padding: 0.375rem 0.75rem;
|
|
67
133
|
font-size: 1rem;
|
|
68
134
|
line-height: 1.5;
|
|
69
135
|
border-radius: 0.25rem;
|
|
70
136
|
}
|
|
71
137
|
.ec-button:not(:disabled) {
|
|
72
|
-
color:
|
|
138
|
+
color: var(--ec-button-text-color);
|
|
73
139
|
cursor: pointer;
|
|
74
140
|
}
|
|
75
141
|
.ec-button:not(:disabled):hover, .ec-button.ec-active {
|
|
76
|
-
background-color:
|
|
77
|
-
border-color:
|
|
142
|
+
background-color: var(--ec-button-active-bg-color);
|
|
143
|
+
border-color: var(--ec-button-active-border-color);
|
|
144
|
+
color: var(--ec-button-active-text-color);
|
|
145
|
+
z-index: 1;
|
|
78
146
|
}
|
|
79
147
|
|
|
80
148
|
.ec-button-group {
|
|
@@ -99,8 +167,8 @@
|
|
|
99
167
|
position: relative;
|
|
100
168
|
width: 0.5em;
|
|
101
169
|
height: 0.5em;
|
|
102
|
-
border-top: 2px solid
|
|
103
|
-
border-right: 2px solid
|
|
170
|
+
border-top: 2px solid currentcolor;
|
|
171
|
+
border-right: 2px solid currentcolor;
|
|
104
172
|
display: inline-block;
|
|
105
173
|
}
|
|
106
174
|
.ec-icon.ec-prev:after {
|
|
@@ -116,7 +184,7 @@
|
|
|
116
184
|
.ec-body,
|
|
117
185
|
.ec-days,
|
|
118
186
|
.ec-day {
|
|
119
|
-
border: 1px solid
|
|
187
|
+
border: 1px solid var(--ec-border-color);
|
|
120
188
|
}
|
|
121
189
|
|
|
122
190
|
.ec-header {
|
|
@@ -224,10 +292,10 @@
|
|
|
224
292
|
border-style: none none none solid;
|
|
225
293
|
}
|
|
226
294
|
.ec-day.ec-today {
|
|
227
|
-
background-color:
|
|
295
|
+
background-color: var(--ec-today-bg-color);
|
|
228
296
|
}
|
|
229
297
|
.ec-day.ec-highlight {
|
|
230
|
-
background-color:
|
|
298
|
+
background-color: var(--ec-highlight-color);
|
|
231
299
|
}
|
|
232
300
|
.ec-day-grid .ec-body .ec-day {
|
|
233
301
|
min-height: 5em;
|
|
@@ -244,7 +312,7 @@
|
|
|
244
312
|
}
|
|
245
313
|
.ec-list .ec-day {
|
|
246
314
|
flex: 1 0 auto;
|
|
247
|
-
background-color:
|
|
315
|
+
background-color: var(--ec-list-day-bg-color);
|
|
248
316
|
border-style: solid none;
|
|
249
317
|
padding: 8px 14px;
|
|
250
318
|
font-weight: bold;
|
|
@@ -288,10 +356,10 @@
|
|
|
288
356
|
.ec-event {
|
|
289
357
|
display: flex;
|
|
290
358
|
padding: 2px;
|
|
291
|
-
color:
|
|
359
|
+
color: var(--ec-event-text-color);
|
|
292
360
|
box-sizing: border-box;
|
|
293
|
-
box-shadow: 0 0 1px 0
|
|
294
|
-
background-color:
|
|
361
|
+
box-shadow: 0 0 1px 0 var(--ec-border-color);
|
|
362
|
+
background-color: var(--ec-event-bg-color);
|
|
295
363
|
border-radius: 3px;
|
|
296
364
|
font-size: 0.85em;
|
|
297
365
|
line-height: 1.5;
|
|
@@ -389,8 +457,8 @@
|
|
|
389
457
|
|
|
390
458
|
.ec-bg-event {
|
|
391
459
|
position: absolute;
|
|
392
|
-
background-color:
|
|
393
|
-
opacity:
|
|
460
|
+
background-color: var(--ec-bg-event-color);
|
|
461
|
+
opacity: var(--ec-bg-event-opacity);
|
|
394
462
|
width: 100%;
|
|
395
463
|
z-index: 1;
|
|
396
464
|
}
|
|
@@ -421,7 +489,7 @@
|
|
|
421
489
|
content: "";
|
|
422
490
|
position: absolute;
|
|
423
491
|
width: 100%;
|
|
424
|
-
border-bottom: 1px solid
|
|
492
|
+
border-bottom: 1px solid var(--ec-border-color);
|
|
425
493
|
pointer-events: none;
|
|
426
494
|
}
|
|
427
495
|
|
|
@@ -438,10 +506,11 @@
|
|
|
438
506
|
min-width: 180px;
|
|
439
507
|
z-index: 1010;
|
|
440
508
|
padding: 8px 10px 14px;
|
|
441
|
-
background-color:
|
|
509
|
+
background-color: var(--ec-popup-bg-color);
|
|
510
|
+
border: 1px solid var(--ec-border-color);
|
|
442
511
|
border-radius: 6px;
|
|
443
512
|
outline: 1px solid transparent;
|
|
444
|
-
box-shadow: 0 1px 3px 0
|
|
513
|
+
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
514
|
}
|
|
446
515
|
.ec-popup .ec-day-head {
|
|
447
516
|
text-align: left;
|
|
@@ -471,11 +540,11 @@
|
|
|
471
540
|
position: absolute;
|
|
472
541
|
z-index: 1005;
|
|
473
542
|
width: 100%;
|
|
474
|
-
border-top:
|
|
543
|
+
border-top: var(--ec-now-indicator-color) solid 2px;
|
|
475
544
|
pointer-events: none;
|
|
476
545
|
}
|
|
477
546
|
.ec-now-indicator:before {
|
|
478
|
-
background:
|
|
547
|
+
background: var(--ec-now-indicator-color);
|
|
479
548
|
border-radius: 50%;
|
|
480
549
|
content: "";
|
|
481
550
|
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,95 @@
|
|
|
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
|
+
.ec-auto-dark & {
|
|
92
|
+
@include dark-theme;
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
}
|