estreui 1.0.7 → 1.2.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.
Files changed (18) hide show
  1. package/README.md +4 -4
  2. package/index.html +5 -1
  3. package/package.json +6 -6
  4. package/scripts/alienese.js +49 -5
  5. package/scripts/doctre.js +17 -3
  6. package/scripts/estreU0EEOZ.js +82 -9
  7. package/scripts/estreUi.js +1739 -390
  8. package/scripts/jcodd.js +34 -10
  9. package/scripts/modernism.js +353 -41
  10. package/serviceWorker.js +7 -4
  11. package/stockHandlePrototypes.html +13 -1
  12. package/styles/estreUi.css +30 -104
  13. package/styles/estreUiAliases.css +29 -1
  14. package/styles/estreUiCore.css +1 -0
  15. package/styles/estreUiCore2.css +2 -2
  16. package/styles/estreUiEmoji.css +88 -0
  17. package/styles/estreUiHandles.css +122 -4
  18. package/styles/estreUiRoot.css +15 -7
package/stockHandlePrototypes.html CHANGED
@@ -116,7 +116,7 @@
116
116
  <template data-handle="dedicatedCalendar" class="dedicated_calendar">
117
117
  <div class="calendar_block">
118
118
  <div class="micro_calendar" data-stretchable="" data-collapsed="">
119
- <div class="calendar_structure" data-structure-type="weekfloor" data-bound-y="" data-bound-m="" data-bound-w="" data-today-y="" data-today-m="" data-today-w="" data-today-d="" data-focus-y="" data-focus-m="" data-focus-w="" data-focus-d="" data-hide-weekage="1" data-hide-weekend="">
119
+ <div class="calendar_structure" data-structure-type="weekfloor" data-bound-y="" data-bound-m="" data-bound-w="" data-today-y="" data-today-m="" data-today-w="" data-today-d="" data-focus-y="" data-focus-m="" data-focus-w="" data-focus-d="" data-hide-weekage="1" data-hide-weekend="" data-show-pointer-days-subject="" data-show-pointer-days="" data-show-pointer-selected="">
120
120
  <div class="days_subjects">
121
121
  <div class="days_holder">
122
122
  <div class="days">
@@ -165,5 +165,17 @@
165
165
  </div>
166
166
  </div>
167
167
  </template>
168
+ <template data-handle="multiDialSlot" class="multi_dial_slot">
169
+ <ul class="dialHolder">
170
+ <li class="dial_bound" data-index="|boundIndex|">
171
+ <div class="prefix"><span></span></div>
172
+ <ul class="dial_host">
173
+ <li data-index="|index|"><span>|value|</span></li>
174
+ </ul>
175
+ <div class="suffix"><span></span></div>
176
+ </li>
177
+ <li class="divider" data-offset="|offset|"><span></span></li>
178
+ </ul>
179
+ </template>
168
180
  </article>
169
181
  <!-- end of stock prototypes -->
package/styles/estreUi.css CHANGED
@@ -33,10 +33,10 @@ article [data-inactivated="1"] { opacity: 0.5; }
33
33
 
34
34
  article [data-hide-on-empty="1"]:empty { display: none; }
35
35
 
36
- article [data-badge]::after { --height: 18px; --badge-color: var(--color-point); content: attr(data-badge); position: absolute; display: flex; z-index: 100; top: -5px; right: -5px; min-width: var(--height); min-height: var(--height); max-height: var(--height); padding: 0 5px; box-sizing: border-box; border-radius: var(--height); justify-content: center; align-items: center; background-color: var(--badge-color); color: var(--color-text-inverse); font-size: 0.75rem; font-weight: 400; line-height: var(--height); text-align: center; transition-timing-function: ease; transition-duration: 0.3s; will-change: auto; }
36
+ article [data-badge]::after { --height: 18px; --badge-color: var(--color-point); content: attr(data-badge); position: absolute; display: flex; z-index: 100; top: -5px; right: -5px; width: max-content; min-width: var(--height); min-height: var(--height); max-height: var(--height); padding: 0 5px; box-sizing: border-box; border-radius: var(--height); justify-content: center; align-items: center; background-color: var(--badge-color); color: var(--color-text-inverse); font-size: 0.75rem; font-weight: 400; line-height: var(--height); text-align: center; transition-timing-function: ease; transition-duration: 0.3s; will-change: auto; }
37
37
  article [data-badge][data-badge=""]::after { top: 0; right: 0; width: 8px; height: 8px; min-width: 8px; min-height: 8px; aspect-ratio: 1; padding: 0; border-radius: 100%; }
38
38
 
39
- article [data-inline-badge]::after { --height: 18px; --badge-color: var(--color-point); content: attr(data-inline-badge); display: inline-flex; min-width: var(--height); min-height: var(--height); max-height: var(--height); padding: 0 5px; box-sizing: border-box; border-radius: var(--height); justify-content: center; align-items: center; background-color: var(--badge-color); color: var(--color-text-inverse); font-size: 0.75rem; font-weight: 400; line-height: var(--height); text-align: center; transition-timing-function: ease; transition-duration: 0.3s; will-change: auto; }
39
+ article [data-inline-badge]::after { --height: 18px; --badge-color: var(--color-point); content: attr(data-inline-badge); display: inline-flex; width: max-content; min-width: var(--height); min-height: var(--height); max-height: var(--height); padding: 0 5px; box-sizing: border-box; border-radius: var(--height); justify-content: center; align-items: center; background-color: var(--badge-color); color: var(--color-text-inverse); font-size: 0.75rem; font-weight: 400; line-height: var(--height); text-align: center; transition-timing-function: ease; transition-duration: 0.3s; will-change: auto; }
40
40
  article [data-inline-badge][data-inline-badge=""]::after { width: 8px; height: 8px; min-width: 8px; min-height: 8px; aspect-ratio: 1; padding: 0; border-radius: 100%; }
41
41
 
42
42
 
@@ -75,6 +75,7 @@ article .equalized_block:has(> :nth-child(4)) > * { width: 24%; }
75
75
  article .equalized_block:has(> :nth-child(5)) > * { width: 18%; }
76
76
  article .equalized_block:has(> :nth-child(6)) > * { width: 14%; }
77
77
  article .inline_block { display: inline-flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-evenly; align-items: baseline; }
78
+ article .inline_block.reversed { flex-direction: row-reverse; }
78
79
  article .inline_block.wrapped { flex-wrap: wrap; }
79
80
  article .inline_block.stretched { justify-content: stretch; align-items: stretch; }
80
81
  article .inline_block.from_start { justify-content: flex-start; }
@@ -91,12 +92,13 @@ article .inline_block.spaced { --space: 0.5em; }
91
92
  article .inline_block.spaced > *:not(.inline_block) { display: inline-block; }
92
93
  article .inline_block.spaced > *:not(:first-child) { margin-left: var(--space); }
93
94
  article .inline_block.spaced > .suffix { margin-left: 0.1em; }
94
- article .inline_block > hr { display: inline-block; width: 1px; height: 0.83333em; margin: auto var(--basic-ui-inset-h); background-color: rgb(0 0 0 / 10%); }
95
+ article .inline_block > hr:not(.horizontal) { display: inline-block; width: 1px; height: 0.83333em; margin: auto var(--basic-ui-inset-h); background-color: rgb(0 0 0 / 10%); }
95
96
  article .inline_block.thin_divider > hr { margin-inline: 0; }
96
97
  article .line_block { position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-evenly; align-items: baseline; border-bottom: solid 1px rgb(var(--cp) / 30%); border-radius: 100%; }
97
98
  article .line_block.bolder { padding-top: 4px; padding-bottom: 4px; margin-bottom: 4px; }
98
99
  article .line_block.hide_block_when_empty:empty { display: none; }
99
100
  article .line_block.list_item:last-of-type { border-bottom-color: transparent !important; }
101
+ article .line_block.reversed { flex-direction: row-reverse; }
100
102
  article .line_block.wrapped { flex-wrap: wrap; }
101
103
  article .line_block.wrappable { flex-wrap: wrap; border-radius: 7%; align-items: center; }
102
104
  article .line_block.stretched { justify-content: stretch; align-items: stretch; }
@@ -115,12 +117,13 @@ article .line_block.spaced > *:not(.line_block):not(.inline_block) { display: in
115
117
  article .line_block.spaced > *:not(:first-child) { margin-left: var(--space); }
116
118
  article .line_block.spaced > .suffix { margin-left: 0.1em; }
117
119
  /* article .line_block > * { margin: 0 6px; } */
118
- article .line_block > hr { display: inline-block; width: 1px; height: 0.83333em; margin: auto var(--basic-ui-inset-h); background-color: rgb(0 0 0 / 10%); }
120
+ article .line_block > hr:not(.horizontal) { display: inline-block; width: 1px; height: 0.83333em; margin: auto var(--basic-ui-inset-h); background-color: rgb(0 0 0 / 10%); }
119
121
  article .line_block.thin_divider > hr { margin-inline: 0; }
120
122
  article .lines_block { --line-margin-top: 0px; --line-margin-bottom: 0px; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: baseline; text-align: left; }
121
123
  article ul.lines_block { list-style: none; margin: 0; padding: 0; }
122
124
  article .lines_block.inline { display: inline-flex; }
123
125
  article .lines_block.hide_block_when_empty:empty { display: none; }
126
+ article .lines_block.reversed { flex-direction: column-reverse; }
124
127
  article .lines_block.wrapped { flex-wrap: wrap; }
125
128
  article .lines_block.stretched { justify-content: stretch; align-items: stretch; }
126
129
  article .lines_block.from_start { align-items: flex-start; }
@@ -265,6 +268,7 @@ article.limit_on_screen nav.instant_appbar { width: var(--on-screen-limit-width)
265
268
  }
266
269
  article nav.instant_appbar > * { max-height: var(--height); margin-top: auto; margin-bottom: auto; }
267
270
  article nav.instant_appbar > * > * { max-height: var(--height); }
271
+ article nav.instant_appbar hr { display: inline-block; position: relative; width: 1px; height: 10px; min-width: 1px; margin: auto 6px; border-style: none; background-color: rgb(0 0 0 / 10%); }
268
272
  article nav.instant_appbar button { height: var(--height); margin: 0; font-size: 1rem; }
269
273
  article nav.instant_appbar button.square { aspect-ratio: 1; }
270
274
  article nav.instant_appbar > .float_area { position: absolute; bottom: 0; margin: 0; height: var(--appbar-height); }
@@ -282,7 +286,9 @@ article nav.instant_appbar > nav.appbarCenter > button { }
282
286
  article nav.instant_appbar button.home { }
283
287
  article nav.instant_appbar button.home img { height: calc(var(--height) * 86%); }
284
288
 
289
+ article .top_safe_pad { height: var(--top-safe-pad); }
285
290
  article .appbar_pad { height: calc(var(--appbar-height) + var(--top-safe-pad)); }
291
+ article .appbar_only_pad { height: var(--appbar-height); }
286
292
 
287
293
  article ul.for_ui { list-style: none; margin: 0; padding: 0; }
288
294
 
@@ -319,7 +325,7 @@ article .info_button { --height: 3.25rem; --height: var(--menu-height); --lead-t
319
325
  article .info_button[data-lead]::before { content: attr(data-lead); color: var(--lead-text-color); font-size: var(--lead-text-color); font-weight: var(--lead-text-weight); line-height: var(--lead-text-height); user-select: text; }
320
326
  article .info_button[data-trail]::after { content: attr(data-trail); color: var(--trail-text-color); font-size: var(--trail-text-size); font-weight: var(--trail-text-weight); line-height: var(--trail-text-height); }
321
327
 
322
- article .text_capsule { --height: 1.5em; --radius: calc(var(--height) / 2); --color: var(--color-text); --bg-color: var(--color-boundary-light); --font-size: 1em; display: inline-flex; min-width: max-content; padding-inline: 0.5em; justify-content: center; align-items: center; border-style: none; border-radius: var(--radius); background-color: var(--bg-color); color: var(--color); font-size: var(--font-size); line-height: var(--height); }
328
+ article .text_capsule { --height: 1.5em; --radius: var(--height); --color: var(--color-text); --bg-color: var(--color-boundary-light); --font-size: 1em; display: inline-flex; min-width: max-content; padding-inline: 0.5em; justify-content: center; align-items: center; border-style: none; border-radius: var(--radius); background-color: var(--bg-color); color: var(--color); font-size: var(--font-size); line-height: var(--height); }
323
329
  article .text_capsule.bordered { --border-color: var(--color-boundary); --bg-color: transparent; height: var(--height); box-sizing: border-box; border: solid 1px var(--border-color); }
324
330
  article .text_capsule.hide_on_empty:empty { display: none; }
325
331
 
@@ -368,10 +374,22 @@ article .search_box button:hover > * { background-color: transparent; translate:
368
374
  article .search_box button:active > * { background-color: transparent; scale: 1.25; filter: drop-shadow(2px 4px 3px #666); }
369
375
 
370
376
  article .custom_checkbox { --checkbox-unchecked-bg: var(--svg-checkbox-unchecked-bg); --checkbox-unchecked: var(--svg-checkbox-unchecked); --checkbox-checked-bg: var(--svg-checkbox-checked-bg); --checkbox-checked: var(--svg-checkbox-checked); }
371
- article .custom_checkbox > input { position: absolute; width: 0; height: 0; opacity: 0; }
377
+ article .custom_checkbox > input[type="checkbox"] { position: absolute; width: 0; height: 0; opacity: 0; }
378
+ article .custom_checkbox:not(:has(> input[type="checkbox"])) > input[type="radio"] { position: absolute; width: 0; height: 0; opacity: 0; }
379
+ article .custom_checkbox:not(:has(> input[type="checkbox"])):not(:has(> input[type="radio"])) > label > input[type="checkbox"] { position: absolute; width: 0; height: 0; opacity: 0; }
380
+ article .custom_checkbox:not(:has(> input[type="checkbox"])):not(:has(> input[type="radio"])) > label:not(:has(> input[type="checkbox"])) > input[type="radio"] { position: absolute; width: 0; height: 0; opacity: 0; }
372
381
  article .custom_checkbox > label { display: inline-flex; flex-flow: row nowrap; align-items: center; }
373
- article .custom_checkbox > label::before { content: ''; display: inline-block; width: 1em; height: 1em; background-image: var(--checkbox-unchecked-bg), var(--checkbox-unchecked); background-size: 1em 1em, 1em 1em; background-position: center, center; background-repeat: no-repeat, no-repeat; vertical-align: text-bottom; }
374
- article .custom_checkbox:has(input[type="checkbox"]:checked) > label::before { background-image: var(--checkbox-checked-bg), var(--checkbox-checked); }
382
+ article .custom_checkbox > label::before { content: ''; display: inline-block; width: 1em; height: 1em; vertical-align: text-bottom; }
383
+ article .custom_checkbox:not(.mask_mode) > label::before { background-image: var(--checkbox-unchecked-bg), var(--checkbox-unchecked); background-size: 1em 1em, 1em 1em; background-position: center, center; background-repeat: no-repeat, no-repeat; }
384
+ article .custom_checkbox:not(.mask_mode):has(> input[type="checkbox"]:checked) > label::before { background-image: var(--checkbox-checked-bg), var(--checkbox-checked); }
385
+ article .custom_checkbox:not(.mask_mode):not(:has(> input[type="checkbox"])):has(> input[type="radio"]:checked) > label::before { background-image: var(--checkbox-checked-bg), var(--checkbox-checked); }
386
+ article .custom_checkbox:not(.mask_mode):not(:has(> input[type="checkbox"])):not(:has(> input[type="radio"])) > label:has(> input[type="checkbox"]:checked)::before { background-image: var(--checkbox-checked-bg), var(--checkbox-checked); }
387
+ article .custom_checkbox:not(.mask_mode):not(:has(> input[type="checkbox"])):not(:has(> input[type="radio"])) > label:not(:has(> input[type="checkbox"])):has(> input[type="radio"]:checked)::before { background-image: var(--checkbox-checked-bg), var(--checkbox-checked); }
388
+ article .custom_checkbox.mask_mode > label::before { mask-image: var(--checkbox-unchecked-bg), var(--checkbox-unchecked); mask-size: 1em 1em, 1em 1em; mask-position: center, center; mask-repeat: no-repeat, no-repeat; }
389
+ article .custom_checkbox.mask_mode:has(> input[type="checkbox"]:checked) > label::before { mask-image: var(--checkbox-checked-bg), var(--checkbox-checked); }
390
+ article .custom_checkbox.mask_mode:not(:has(> input[type="checkbox"])):has(> input[type="radio"]:checked) > label::before { mask-image: var(--checkbox-checked-bg), var(--checkbox-checked); }
391
+ article .custom_checkbox.mask_mode:not(:has(> input[type="checkbox"])):not(:has(> input[type="radio"])) > label:has(> input[type="checkbox"]:checked)::before { mask-image: var(--checkbox-checked-bg), var(--checkbox-checked); }
392
+ article .custom_checkbox.mask_mode:not(:has(> input[type="checkbox"])):not(:has(> input[type="radio"])) > label:not(:has(> input[type="checkbox"])):has(> input[type="radio"]:checked)::before { mask-image: var(--checkbox-checked-bg), var(--checkbox-checked); }
375
393
  article .custom_checkbox > label > span { }
376
394
 
377
395
 
@@ -501,6 +519,10 @@ article [data-shoe]::after { content: attr(data-shoe); }
501
519
  article [data-hang-lead]:not(:empty)::before { content: attr(data-hang-lead); }
502
520
  article [data-hang-trail]:not(:empty)::after { content: attr(data-hang-trail); }
503
521
 
522
+ article [data-help-alert]::after { --color: var(--color-text-lightness); content: '?'; display: inline-flex; height: 1.25em; aspect-ratio: 1; margin-left: 0.5em; border: solid 1px var(--color); border-radius: 100%; justify-content: center; align-items: center; color: var(--color); font-size: 0.8em; font-weight: 500; cursor: pointer; user-select: none; transition-timing-function: ease; transition-duration: 0.3s; }
523
+ article [data-help-alert]::after:hover { --color: var(--color-text); }
524
+ article [data-help-alert]::after:active { --color: var(--color-point); }
525
+
504
526
  article [data-focused="1"] { color: var(--color-focused); }
505
527
  article [data-important="1"] { color: var(--color-important); }
506
528
  article [data-emphasis="1"] { color: var(--color-emphasis); }
@@ -612,102 +634,6 @@ button.placeholder div.text_wrap span.sub_line { margin-top: 4px; font-size: 0.7
612
634
 
613
635
 
614
636
  /* method related styles */
615
- article .dedicated_calendar { }
616
- article .dedicated_calendar > .calendar_block { }
617
- article .dedicated_calendar > .calendar_block > div { }
618
- article .dedicated_calendar > .schedule_block { }
619
- article .dedicated_calendar > .schedule_block > div { }
620
-
621
- article .micro_calendar { }
622
- article .micro_calendar > .calendar_structure { --color-days-subjects: var(--color-text); --today-outline-width: 1px; --color-label: var(--color-text-lighten); --color-label-pale: var(--color-text-paleness); --color-label-holiday: var(--color-holiday); color: var(--color-label); }
623
- article .micro_calendar > .calendar_structure .days_holder { margin-inline: var(--today-outline-width); }
624
- article .micro_calendar > .calendar_structure .days_holder > .days { display: flex; flex-flow: row nowrap; width: -moz-available; width: -webkit-fill-available; width: stretch; justify-content: stretch; align-items: stretch; }
625
- article .micro_calendar > .calendar_structure .days_holder > .days > .day { display: flex; flex-flow: column nowrap; width: calc(100% / 7); align-items: center; transition-timing-function: ease; transition-duration: 0.3s; will-change: auto; }
626
- article .micro_calendar > .calendar_structure .days_holder > .days > .day > .label { font-size: 0.75rem; line-height: 1em; }
627
- article .micro_calendar > .calendar_structure .days_holder > .days > .day[data-day="0"] > .label { color: var(--color-label-holiday); }
628
- article .micro_calendar > .calendar_structure .days_holder > .days > .day[data-day="6"] > .label { color: var(--color-label-holiday); }
629
- article .micro_calendar > .calendar_structure .days_holder > .days > .day[data-holiday="1"] > .label { color: var(--color-label-holiday); }
630
- article .micro_calendar > .calendar_structure[data-hide-weekend="1"] .days_holder > .days > .day { width: calc(100% / 5); }
631
- article .micro_calendar > .calendar_structure[data-hide-weekend="-1"] .days_holder > .days > .day { width: calc(100% / 6); }
632
- article .micro_calendar > .calendar_structure[data-hide-weekend="0"] .days_holder > .days > .day { width: calc(100% / 6); }
633
- article .micro_calendar > .calendar_structure[data-hide-weekend="-1"] .days_holder > .days > .day[data-day="0"] { display: none; }
634
- article .micro_calendar > .calendar_structure[data-hide-weekend="0"] .days_holder > .days > .day[data-day="6"] { display: none; }
635
- article .micro_calendar > .calendar_structure[data-hide-weekend="1"] .days_holder > .days > .day[data-day="0"] { display: none; }
636
- article .micro_calendar > .calendar_structure[data-hide-weekend="1"] .days_holder > .days > .day[data-day="6"] { display: none; }
637
- article .micro_calendar > .calendar_structure .days_holder > .days > .day > .label > label { overflow-wrap: normal; }
638
- article .micro_calendar > .calendar_structure > .days_subjects { display: flex; flex-flow: row nowrap; height: 40px; border-bottom: solid 1px var(--color-boundary-lightly); color: var(--color-days-subjects); }
639
- article .micro_calendar > .calendar_structure > .days_subjects > * { flex-grow: 0; flex-shrink: 0; }
640
- article .micro_calendar > .calendar_structure > .days_subjects > .days_holder { width: -moz-available; width: -webkit-fill-available; width: stretch; height: 100%; flex-grow: 1; flex-shrink: 1; }
641
- article .micro_calendar > .calendar_structure > .days_subjects > .days_holder > .days { height: 100%; }
642
- article .micro_calendar > .calendar_structure > .days_subjects > .days_holder > .days > .day { height: 100%; justify-content: center; }
643
- article .micro_calendar > .calendar_structure[data-show-pointer-days-subject="1"] > .days_subjects > .days_holder > .days > .day { cursor: pointer; }
644
- article .micro_calendar > .calendar_structure > .days_subjects > .days_holder > .days > .day > .label { }
645
- article .micro_calendar > .calendar_structure > .days_subjects > .days_holder > .days > .day > .label > label { }
646
- article .micro_calendar > .calendar_structure[data-show-pointer-days-subject="1"] > .days_subjects > .days_holder > .days > .day > .label > label { cursor: pointer; }
647
- article .micro_calendar > .calendar_structure > .weeks { }
648
- article .micro_calendar > .calendar_structure > .weeks > .week { display: flex; flex-flow: row nowrap; border-bottom: solid 1px var(--color-boundary-highlight); }
649
- article .micro_calendar[data-hide-week-divider="1"] > .calendar_structure > .weeks > .week { border-color: transparent; }
650
- article .micro_calendar > .calendar_structure > .weeks > .week > * { flex-grow: 0; flex-shrink: 0; }
651
- article .micro_calendar > .calendar_structure > .weeks > .week > .days_holder { width: -moz-available; width: 100%; width: -webkit-fill-available; width: stretch; flex-grow: 1; flex-shrink: 1; }
652
- article .micro_calendar > .calendar_structure > .weeks > .week > .days_holder > .days { }
653
- article .micro_calendar > .calendar_structure > .weeks > .week > .days_holder > .days > .day { --bg-color: transparent; padding: 2px 0; background-color: var(--bg-color); }
654
- article .micro_calendar > .calendar_structure[data-show-pointer-days="1"] > .weeks > .week > .days_holder > .days > .day { cursor: pointer; }
655
- article .micro_calendar > .calendar_structure > .weeks > .week > .days_holder > .days > .day[data-today="1"] { z-index: 1; outline: solid var(--today-outline-width) var(--color-boundary-darker); }
656
- article .micro_calendar > .calendar_structure > .weeks > .week > .days_holder > .days > .day > .label { display: flex; flex-flow: column nowrap; width: 24px; aspect-ratio: 1; margin: 5px 0; border-radius: 100%; justify-content: center; align-items: center; transition-timing-function: ease; transition-duration: 0.2s; will-change: auto; }
657
- article .micro_calendar > .calendar_structure > .weeks > .week > .days_holder > .days > .day > .label > label { }
658
- article .micro_calendar > .calendar_structure[data-bound-m="1"] > .weeks > .week > .days_holder > .days > .day:not([data-month="1"]) > .label { color: var(--color-label-pale); }
659
- article .micro_calendar > .calendar_structure[data-bound-m="2"] > .weeks > .week > .days_holder > .days > .day:not([data-month="2"]) > .label { color: var(--color-label-pale); }
660
- article .micro_calendar > .calendar_structure[data-bound-m="3"] > .weeks > .week > .days_holder > .days > .day:not([data-month="3"]) > .label { color: var(--color-label-pale); }
661
- article .micro_calendar > .calendar_structure[data-bound-m="4"] > .weeks > .week > .days_holder > .days > .day:not([data-month="4"]) > .label { color: var(--color-label-pale); }
662
- article .micro_calendar > .calendar_structure[data-bound-m="5"] > .weeks > .week > .days_holder > .days > .day:not([data-month="5"]) > .label { color: var(--color-label-pale); }
663
- article .micro_calendar > .calendar_structure[data-bound-m="6"] > .weeks > .week > .days_holder > .days > .day:not([data-month="6"]) > .label { color: var(--color-label-pale); }
664
- article .micro_calendar > .calendar_structure[data-bound-m="7"] > .weeks > .week > .days_holder > .days > .day:not([data-month="7"]) > .label { color: var(--color-label-pale); }
665
- article .micro_calendar > .calendar_structure[data-bound-m="8"] > .weeks > .week > .days_holder > .days > .day:not([data-month="8"]) > .label { color: var(--color-label-pale); }
666
- article .micro_calendar > .calendar_structure[data-bound-m="9"] > .weeks > .week > .days_holder > .days > .day:not([data-month="9"]) > .label { color: var(--color-label-pale); }
667
- article .micro_calendar > .calendar_structure[data-bound-m="10"] > .weeks > .week > .days_holder > .days > .day:not([data-month="10"]) > .label { color: var(--color-label-pale); }
668
- article .micro_calendar > .calendar_structure[data-bound-m="11"] > .weeks > .week > .days_holder > .days > .day:not([data-month="11"]) > .label { color: var(--color-label-pale); }
669
- article .micro_calendar > .calendar_structure[data-bound-m="12"] > .weeks > .week > .days_holder > .days > .day:not([data-month="12"]) > .label { color: var(--color-label-pale); }
670
- article .micro_calendar > .calendar_structure[data-show-pointer-days="1"] > .weeks > .week > .days_holder > .days > .day > .label > label { cursor: pointer; }
671
- article .micro_calendar > .calendar_structure:not([data-hide-selected="1"])[data-show-pointer-selected="1"] > .weeks > .week > .days_holder > .days > .day[data-selected="1"] { cursor: pointer; }
672
- article .micro_calendar > .calendar_structure:not([data-hide-selected="1"]) > .weeks > .week > .days_holder > .days > .day[data-selected="1"] > .label { background-color: var(--color-boundary-darker); color: var(--color-text-inverse); }
673
- article .micro_calendar > .calendar_structure:not([data-hide-selected="1"]) > .weeks > .week > .days_holder > .days > .day[data-selected="1"][data-day="0"] > .label { background-color: var(--color-label-holiday); }
674
- article .micro_calendar > .calendar_structure:not([data-hide-selected="1"]) > .weeks > .week > .days_holder > .days > .day[data-selected="1"][data-day="6"] > .label { background-color: var(--color-label-holiday); }
675
- article .micro_calendar > .calendar_structure:not([data-hide-selected="1"]) > .weeks > .week > .days_holder > .days > .day[data-selected="1"][data-holiday="1"] > .label { background-color: var(--color-label-holiday); }
676
- article .micro_calendar > .calendar_structure:not([data-hide-selected="1"])[data-show-pointer-selected="1"] > .weeks > .week > .days_holder > .days > .day[data-selected="1"] > .label > label { cursor: pointer; }
677
- article .micro_calendar > .calendar_structure > .weeks > .week > .days_holder > .days > .day > .subject { --height: 1.2em; height: var(--height); max-width: -moz-available; max-width: -webkit-fill-available; max-width: stretch; margin-top: calc(var(--height) * -1); color: var(--color-text-lightness); font-size: 0.5rem; font-weight: 200; line-height: var(--height); text-overflow: ellipsis; text-shadow: 0px 0px 1px var(--color-text-inverse); white-space: nowrap; overflow-x: hidden; }
678
- article .micro_calendar > .calendar_structure > .weeks > .week > .days_holder > .days > .day > .subject > span { }
679
- article .micro_calendar > .calendar_structure > .weeks > .week > .days_holder > .days > .day > .scheduled { display: flex; flex-flow: column nowrap; width: -moz-available; width: -webkit-fill-available; width: stretch; padding: 0 2px; align-items: center; }
680
- article .micro_calendar > .calendar_structure > .weeks > .week > .days_holder > .days > .day > .scheduled > ul { display: flex; flex-flow: column nowrap; list-style: none; width: -moz-available; width: -webkit-fill-available; width: stretch; margin: 0; padding: 0; gap: 2px; justify-content: stretch; transition-timing-function: ease; transition-duration: 0.3s; will-change: auto; }
681
- article .micro_calendar > .calendar_structure > .weeks > .week > .days_holder > .days > .day > .scheduled > ul > li { --bg-color: var(--color-boundary-lightish); max-width: -moz-available; max-width: -webkit-fill-available; max-width: stretch; padding: 2px; border-radius: 2px; background-color: var(--bg-color); color: var(--color-text-inverse); font-size: 0.75rem; line-height: 1em; text-align: center; text-overflow: ellipsis; white-space: nowrap; overflow-x: hidden; transition-timing-function: ease; transition-duration: 0.3s; will-change: auto; }
682
- article .micro_calendar[data-collapsed="1"] > .calendar_structure > .weeks > .week > .days_holder > .days > .day > .scheduled > ul { flex-flow: row wrap; width: 16px; max-width: -moz-available; max-width: -webkit-fill-available; max-width: stretch; justify-content: center; }
683
- article .micro_calendar[data-collapsed="1"] > .calendar_structure > .weeks > .week > .days_holder > .days > .day > .scheduled > ul:has(> li:nth-child(10)) { width: 28px; }
684
- article .micro_calendar[data-collapsed="1"] > .calendar_structure > .weeks > .week > .days_holder > .days > .day > .scheduled > ul:has(> li:nth-child(16)) { width: 40px; }
685
- article .micro_calendar[data-collapsed="1"] > .calendar_structure > .weeks > .week > .days_holder > .days > .day > .scheduled > ul:has(> li:nth-child(22)) { width: 52px; }
686
- article .micro_calendar[data-collapsed="1"] > .calendar_structure > .weeks > .week > .days_holder > .days > .day > .scheduled > ul > li { width: 4px; height: 4px; padding: 0; border-radius: 100%; font-size: 0; }
687
- article .micro_calendar > .calendar_structure > .weeks > .week > .days_holder > .days > .day > .scheduled > ul > li > span { }
688
- article .micro_calendar > .under_gradient { width: -moz-available; width: -webkit-fill-available; width: stretch; height: 12px; background-image: linear-gradient(180deg, rgb(0 0 0 / 3%) 0, transparent 3px); }
689
- article .micro_calendar > .stretch_handle { display: flex; flex-flow: row nowrap; width: -moz-available; width: -webkit-fill-available; width: stretch; justify-content: center; align-items: center; }
690
- article .micro_calendar > .stretch_handle > .handle { position: relative; width: 80px; height: 4px; border-radius: 2px; background-color: var(--color-boundary-lightside); cursor: row-resize; transition-timing-function: ease; transition-duration: 0.3s; will-change: auto; }
691
- article .micro_calendar > .stretch_handle > .handle:hover { background-color: var(--color-boundary-dark); }
692
- article .micro_calendar > .stretch_handle > .handle:active { background-color: var(--color-boundary-darkness); }
693
- article .micro_calendar > .stretch_handle > .handle::after { content: ''; position: absolute; display: block; top: -6px; bottom: -6px; left: -6px; right: -6px; border-radius: 8px; }
694
-
695
- article .minimal_scheduler { margin-top: var(--basic-ui-inset-v-half); padding: 5px 0; }
696
- article .minimal_scheduler > .schedule_list { list-style: none; display: flex; flex-flow: column nowrap; margin: 0; padding: var(--basic-ui-inset-v) var(--basic-ui-inset-h); align-items: stretch; row-gap: 12px; }
697
- article .minimal_scheduler > .schedule_list > .placeholder { display: block; width: -moz-available; width: -webkit-fill-available; width: stretch; text-align: center; font-size: 0.875rem; font-weight: 300; line-height: 1.25rem; }
698
- article .minimal_scheduler > .schedule_list > .placeholder > span.message { }
699
- article .minimal_scheduler > .schedule_list > .schedule_item { }
700
- article .minimal_scheduler > .schedule_list > .schedule_item > .schedule { --bg-color: var(--color-boundary-lightside); display: flex; flex-flow: column nowrap; border-radius: 12px; padding: var(--basic-ui-inset-v-half) var(--basic-ui-inset-h); background-color: var(--bg-color); color: var(--color-text-inverse); font-size: 0.875rem; line-height: 1.375rem; transition-timing-function: ease; transition-duration: 0.3s; will-change: auto; }
701
- article .minimal_scheduler > .schedule_list > .schedule_item > .schedule:hover { box-shadow: 1px 2px 4px var(--color-boundary-o5); }
702
- article .minimal_scheduler > .schedule_list > .schedule_item > .schedule:focus { outline: solid 2px var(--color-boundary-o10); }
703
- article .minimal_scheduler > .schedule_list > .schedule_item > .schedule:active { outline: solid 2px var(--color-boundary-o10); outline-offset: -2px; }
704
- article .minimal_scheduler > .schedule_list > .schedule_item > .schedule > .subject_line { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: flex-start; }
705
- article .minimal_scheduler > .schedule_list > .schedule_item > .schedule > .subject_line > .subject { font-weight: 500; }
706
- article .minimal_scheduler > .schedule_list > .schedule_item > .schedule > .subject_line > .origin { flex-shrink: 0; font-size: 0.75rem; font-weight: 300; line-height: 1.25rem; }
707
- article .minimal_scheduler > .schedule_list > .schedule_item > .schedule > .time_line { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: flex-end; }
708
- article .minimal_scheduler > .schedule_list > .schedule_item > .schedule > .time_line > .time { font-weight: 400; }
709
- article .minimal_scheduler > .schedule_list > .schedule_item > .schedule > .time_line > .time:empty::before { content: '하루종일'; }
710
- article .minimal_scheduler > .schedule_list > .schedule_item > .schedule > .time_line > .associated { flex-shrink: 0; font-size: 0.75rem; font-weight: 100; line-height: 1.25rem; }
711
637
 
712
638
 
713
639
 
package/styles/estreUiAliases.css CHANGED
@@ -150,7 +150,8 @@ body[data-not-allowed="1"] * { cursor: not-allowed !important; }
150
150
 
151
151
  body button { color: var(--color-text); }
152
152
 
153
- body .emoji { font-family: var(--font-for-emoji) !important; font-variant-emoji: emoji; }
153
+ body .force_emoji { font-variant-emoji: emoji; }
154
+ body .emoji { font-family: var(--font-for-emoji) !important; }
154
155
 
155
156
  body .square { aspect-ratio: 1; }
156
157
 
@@ -175,6 +176,33 @@ body img.logo { filter: drop-shadow(0 0 5px rgb(var(--cglr) / 60%)); }
175
176
 
176
177
 
177
178
  /* global classes */
179
+ .bgc_boundary_o1 { background-color: var(--color-boundary-o1); }
180
+ .bgc_boundary_o3 { background-color: var(--color-boundary-o3); }
181
+ .bgc_boundary_o5 { background-color: var(--color-boundary-o5); }
182
+ .bgc_boundary_o7 { background-color: var(--color-boundary-o7); }
183
+ .bgc_boundary_o10 { background-color: var(--color-boundary-o10); }
184
+ .bgc_boundary_o15 { background-color: var(--color-boundary-o15); }
185
+ .bgc_boundary_o20 { background-color: var(--color-boundary-o20); }
186
+ .bgc_boundary_o25 { background-color: var(--color-boundary-o25); }
187
+ .bgc_boundary_o30 { background-color: var(--color-boundary-o30); }
188
+ .bgc_boundary_o35 { background-color: var(--color-boundary-o35); }
189
+ .bgc_boundary_o40 { background-color: var(--color-boundary-o40); }
190
+ .bgc_boundary_o45 { background-color: var(--color-boundary-o45); }
191
+ .bgc_boundary_o50 { background-color: var(--color-boundary-o50); }
192
+ .bgc_boundary_o55 { background-color: var(--color-boundary-o55); }
193
+ .bgc_boundary_o60 { background-color: var(--color-boundary-o60); }
194
+ .bgc_boundary_o65 { background-color: var(--color-boundary-o65); }
195
+ .bgc_boundary_o70 { background-color: var(--color-boundary-o70); }
196
+ .bgc_boundary_o75 { background-color: var(--color-boundary-o75); }
197
+ .bgc_boundary_o80 { background-color: var(--color-boundary-o80); }
198
+ .bgc_boundary_o85 { background-color: var(--color-boundary-o85); }
199
+ .bgc_boundary_o90 { background-color: var(--color-boundary-o90); }
200
+ .bgc_boundary_o93 { background-color: var(--color-boundary-o93); }
201
+ .bgc_boundary_o95 { background-color: var(--color-boundary-o95); }
202
+ .bgc_boundary_o97 { background-color: var(--color-boundary-o97); }
203
+ .bgc_boundary_o99 { background-color: var(--color-boundary-o99); }
204
+
205
+
178
206
  .text_darker { color: var(--color-text-darker); }
179
207
  .text_darken { color: var(--color-text-darken); }
180
208
  .text_dark { color: var(--color-text-dark); }
package/styles/estreUiCore.css CHANGED
@@ -190,5 +190,6 @@ main#instantDoc > section > div.container:not(:is([data-on-top^="1"], [data-on-t
190
190
  main#instantDoc > section > div.container:not([data-on-top="1"]) { opacity: 0; }
191
191
  main#instantDoc > section > div.container > article { }
192
192
  main#instantDoc > section > div.container > article[data-on-top="1"] { z-index: 201; }
193
+ main#instantDoc > section > div.container > article:has(.appbar_pad.fixed_pad) { padding-top: 0; }
193
194
  main#instantDoc > section > div.container > .container_master_float { z-index: 212; }
194
195
 
package/styles/estreUiCore2.css CHANGED
@@ -100,7 +100,7 @@ nav#managedOverlay > section#customToast > div.container > article.popup_interfa
100
100
  nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.options > button:not(.tp_tiled_btn) { margin-inline: var(--margin-inline); padding: 8px; border: solid 1px var(--color-adaptive); border-radius: 0.75em; font-size: 1rem; cursor: pointer; }
101
101
  nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.options > button:not(.tp_tiled_btn):not(:first-child) { margin-top: var(--inter-item-margin); }
102
102
  nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.options > button > div.line_block { position: relative; }
103
- nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.options > button > div.line_block > label { display: inline-block; width: 100%; height: -webkit-fit-available; flex-grow: 1; flex-shrink: 1; }
103
+ nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.options > button > div.line_block > label { display: inline-block; width: 100%; height: -webkit-fill-available; flex-grow: 1; flex-shrink: 1; }
104
104
  nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.options > button.no_pad > div.line_block > label { padding: 16px; padding-inline: var(--margin-inline); }
105
105
  nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.options > button > div.line_block > input[type="checkbox"] { position: absolute; z-index: -1; top: 0; bottom: 0; right: 0; margin: auto 0; }
106
106
  nav#managedOverlay > section#customToast > div.container > article.popup_interface > .dialog > div.options > button.no_pad > div.line_block > input[type="checkbox"] { margin-inline: var(--margin-inline); }
@@ -185,7 +185,7 @@ nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interf
185
185
  nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.options > button:not(.tp_tiled_btn) { margin-inline: var(--margin-inline); padding: 8px; border: solid 1px var(--color-adaptive); border-radius: 0.75em; font-size: 1rem; cursor: pointer; }
186
186
  nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.options > button:not(.tp_tiled_btn):not(:first-child) { margin-top: var(--inter-item-margin); }
187
187
  nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.options > button > div.line_block { position: relative; }
188
- nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.options > button > div.line_block > label { display: inline-block; width: 100%; height: -webkit-fit-available; flex-grow: 1; flex-shrink: 1; }
188
+ nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.options > button > div.line_block > label { display: inline-block; width: 100%; height: -webkit-fill-available; flex-grow: 1; flex-shrink: 1; }
189
189
  nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.options > button.no_pad > div.line_block > label { padding: 16px; padding-inline: var(--margin-inline); }
190
190
  nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.options > button > div.line_block > input[type="checkbox"] { position: absolute; z-index: -1; top: 0; bottom: 0; right: 0; margin: auto 0; }
191
191
  nav#managedOverlay > section#toastUpSlide > div.container > article.popup_interface > .dialog > div.options > button.no_pad > div.line_block > input[type="checkbox"] { margin-inline: var(--margin-inline); }
package/styles/estreUiEmoji.css ADDED
@@ -0,0 +1,88 @@
1
+ /* emoji fonts */
2
+ @font-face {
3
+ font-family: 'NotoColorEmojiLimited';
4
+ unicode-range: U+1F1E6-1F1FF;
5
+ src: url('https://raw.githack.com/googlefonts/noto-emoji/main/fonts/NotoColorEmoji.ttf') format('truetype');
6
+ }
7
+ /* @import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap'); */
8
+ @font-face {
9
+ font-family: 'NotoColorEmoji';
10
+ font-style: normal;
11
+ font-weight: 400;
12
+ font-display: swap;
13
+ src: url(https://fonts.gstatic.com/s/notocoloremoji/v39/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.0.woff2) format('woff2');
14
+ unicode-range: U+1f1e6-1f1ff;
15
+ }
16
+ @font-face {
17
+ font-family: 'NotoColorEmoji';
18
+ font-style: normal;
19
+ font-weight: 400;
20
+ font-display: swap;
21
+ src: url(https://fonts.gstatic.com/s/notocoloremoji/v39/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.1.woff2) format('woff2');
22
+ unicode-range: U+200d, U+2620, U+26a7, U+fe0f, U+1f308, U+1f38c, U+1f3c1, U+1f3f3-1f3f4, U+1f6a9, U+e0062-e0063, U+e0065, U+e0067, U+e006c, U+e006e, U+e0073-e0074, U+e0077, U+e007f;
23
+ }
24
+ @font-face {
25
+ font-family: 'NotoColorEmoji';
26
+ font-style: normal;
27
+ font-weight: 400;
28
+ font-display: swap;
29
+ src: url(https://fonts.gstatic.com/s/notocoloremoji/v39/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.2.woff2) format('woff2');
30
+ /* unicode-range: U+23, U+2a, U+30-39, U+a9, U+ae, U+200d, U+203c, U+2049, U+20e3, U+2122, U+2139, U+2194-2199, U+21a9-21aa, U+23cf, U+23e9-23ef, U+23f8-23fa, U+24c2, U+25aa-25ab, U+25b6, U+25c0, U+25fb-25fe, U+2611, U+2622-2623, U+2626, U+262a, U+262e-262f, U+2638, U+2640, U+2642, U+2648-2653, U+2660, U+2663, U+2665-2666, U+2668, U+267b, U+267e-267f, U+2695, U+269b-269c, U+26a0, U+26a7, U+26aa-26ab, U+26ce, U+26d4, U+2705, U+2714, U+2716, U+271d, U+2721, U+2733-2734, U+2747, U+274c, U+274e, U+2753-2755, U+2757, U+2764, U+2795-2797, U+27a1, U+27b0, U+27bf, U+2934-2935, U+2b05-2b07, U+2b1b-2b1c, U+2b55, U+3030, U+303d, U+3297, U+3299, U+fe0f, U+1f170-1f171, U+1f17e-1f17f, U+1f18e, U+1f191-1f19a, U+1f201-1f202, U+1f21a, U+1f22f, U+1f232-1f23a, U+1f250-1f251, U+1f310, U+1f3a6, U+1f3b5-1f3b6, U+1f3bc, U+1f3e7, U+1f441, U+1f499-1f49c, U+1f49f-1f4a0, U+1f4ac-1f4ad, U+1f4b1-1f4b2, U+1f4b9, U+1f4db, U+1f4f2-1f4f6, U+1f500-1f507, U+1f515, U+1f518-1f524, U+1f52f-1f53d, U+1f549, U+1f54e, U+1f5a4, U+1f5e8, U+1f5ef, U+1f6ab, U+1f6ad-1f6b1, U+1f6b3, U+1f6b7-1f6bc, U+1f6be, U+1f6c2-1f6c5, U+1f6d0-1f6d1, U+1f6d7, U+1f6dc, U+1f7e0-1f7eb, U+1f7f0, U+1f90d-1f90e, U+1f9d1-1f9d2, U+1f9e1, U+1fa75-1fa77, U+1faaf; */
31
+ unicode-range: U+a9, U+ae, U+200d, U+203c, U+2049, U+20e3, U+2122, U+2139, U+2194-2199, U+21a9-21aa, U+23cf, U+23e9-23ef, U+23f8-23fa, U+24c2, U+25aa-25ab, U+25b6, U+25c0, U+25fb-25fe, U+2611, U+2622-2623, U+2626, U+262a, U+262e-262f, U+2638, U+2640, U+2642, U+2648-2653, U+2660, U+2663, U+2665-2666, U+2668, U+267b, U+267e-267f, U+2695, U+269b-269c, U+26a0, U+26a7, U+26aa-26ab, U+26ce, U+26d4, U+2705, U+2714, U+2716, U+271d, U+2721, U+2733-2734, U+2747, U+274c, U+274e, U+2753-2755, U+2757, U+2764, U+2795-2797, U+27a1, U+27b0, U+27bf, U+2934-2935, U+2b05-2b07, U+2b1b-2b1c, U+2b55, U+3030, U+303d, U+3297, U+3299, U+fe0f, U+1f170-1f171, U+1f17e-1f17f, U+1f18e, U+1f191-1f19a, U+1f201-1f202, U+1f21a, U+1f22f, U+1f232-1f23a, U+1f250-1f251, U+1f310, U+1f3a6, U+1f3b5-1f3b6, U+1f3bc, U+1f3e7, U+1f441, U+1f499-1f49c, U+1f49f-1f4a0, U+1f4ac-1f4ad, U+1f4b1-1f4b2, U+1f4b9, U+1f4db, U+1f4f2-1f4f6, U+1f500-1f507, U+1f515, U+1f518-1f524, U+1f52f-1f53d, U+1f549, U+1f54e, U+1f5a4, U+1f5e8, U+1f5ef, U+1f6ab, U+1f6ad-1f6b1, U+1f6b3, U+1f6b7-1f6bc, U+1f6be, U+1f6c2-1f6c5, U+1f6d0-1f6d1, U+1f6d7, U+1f6dc, U+1f7e0-1f7eb, U+1f7f0, U+1f90d-1f90e, U+1f9d1-1f9d2, U+1f9e1, U+1fa75-1fa77, U+1faaf;
32
+ }
33
+ @font-face {
34
+ font-family: 'NotoColorEmoji';
35
+ font-style: normal;
36
+ font-weight: 400;
37
+ font-display: swap;
38
+ src: url(https://fonts.gstatic.com/s/notocoloremoji/v39/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.3.woff2) format('woff2');
39
+ unicode-range: U+200d, U+231a-231b, U+2328, U+23f0-23f3, U+2602, U+260e, U+2692, U+2694, U+2696-2697, U+2699, U+26b0-26b1, U+26cf, U+26d1, U+26d3, U+2702, U+2709, U+270f, U+2712, U+fe0f, U+1f302, U+1f321, U+1f392-1f393, U+1f3a9, U+1f3bd, U+1f3ee, U+1f3f7, U+1f3fa, U+1f451-1f462, U+1f484, U+1f489-1f48a, U+1f48c-1f48e, U+1f4a1, U+1f4a3, U+1f4a5, U+1f4b0, U+1f4b3-1f4b8, U+1f4bb-1f4da, U+1f4dc-1f4f1, U+1f4ff, U+1f508-1f514, U+1f516-1f517, U+1f526-1f529, U+1f52c-1f52e, U+1f550-1f567, U+1f56f-1f570, U+1f576, U+1f587, U+1f58a-1f58d, U+1f5a5, U+1f5a8, U+1f5b1-1f5b2, U+1f5c2-1f5c4, U+1f5d1-1f5d3, U+1f5dc-1f5de, U+1f5e1, U+1f5f3, U+1f6aa, U+1f6ac, U+1f6bd, U+1f6bf, U+1f6c1, U+1f6cb, U+1f6cd-1f6cf, U+1f6d2, U+1f6e0-1f6e1, U+1f6f0, U+1f97b-1f97f, U+1f9af, U+1f9ba, U+1f9e2-1f9e6, U+1f9ea-1f9ec, U+1f9ee-1f9f4, U+1f9f7-1f9ff, U+1fa71-1fa74, U+1fa79-1fa7b, U+1fa86, U+1fa8e-1fa8f, U+1fa91-1fa93, U+1fa96, U+1fa99-1faa0, U+1faa2-1faa7, U+1faaa-1faae;
40
+ }
41
+ @font-face {
42
+ font-family: 'NotoColorEmoji';
43
+ font-style: normal;
44
+ font-weight: 400;
45
+ font-display: swap;
46
+ src: url(https://fonts.gstatic.com/s/notocoloremoji/v39/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.4.woff2) format('woff2');
47
+ unicode-range: U+265f, U+26bd-26be, U+26f3, U+26f8, U+fe0f, U+1f004, U+1f0cf, U+1f380-1f384, U+1f386-1f38b, U+1f38d-1f391, U+1f396-1f397, U+1f399-1f39b, U+1f39e-1f39f, U+1f3a3-1f3a5, U+1f3a7-1f3a9, U+1f3ab-1f3b4, U+1f3b7-1f3bb, U+1f3bd-1f3c0, U+1f3c5-1f3c6, U+1f3c8-1f3c9, U+1f3cf-1f3d3, U+1f3f8-1f3f9, U+1f47e, U+1f4e2, U+1f4f7-1f4fd, U+1f52b, U+1f579, U+1f58c-1f58d, U+1f5bc, U+1f6f7, U+1f6f9, U+1f6fc, U+1f93f, U+1f941, U+1f945, U+1f947-1f94f, U+1f9e7-1f9e9, U+1f9f5-1f9f6, U+1fa70-1fa71, U+1fa80-1fa81, U+1fa83-1fa85, U+1fa87-1fa8a, U+1fa94-1fa95, U+1fa97-1fa98, U+1faa1, U+1faa9, U+1fadf;
48
+ }
49
+ @font-face {
50
+ font-family: 'NotoColorEmoji';
51
+ font-style: normal;
52
+ font-weight: 400;
53
+ font-display: swap;
54
+ src: url(https://fonts.gstatic.com/s/notocoloremoji/v39/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.5.woff2) format('woff2');
55
+ unicode-range: U+2693, U+26e9-26ea, U+26f1-26f2, U+26f4-26f5, U+26fa, U+26fd, U+2708, U+fe0f, U+1f301, U+1f303, U+1f306-1f307, U+1f309, U+1f310, U+1f3a0-1f3a2, U+1f3aa, U+1f3cd-1f3ce, U+1f3d5, U+1f3d7-1f3db, U+1f3df-1f3e6, U+1f3e8-1f3ed, U+1f3ef-1f3f0, U+1f488, U+1f492, U+1f4ba, U+1f54b-1f54d, U+1f5fa-1f5ff, U+1f680-1f6a2, U+1f6a4-1f6a8, U+1f6b2, U+1f6d1, U+1f6d5-1f6d6, U+1f6dd-1f6df, U+1f6e2-1f6e5, U+1f6e9, U+1f6eb-1f6ec, U+1f6f3-1f6f6, U+1f6f8, U+1f6fa-1f6fb, U+1f9bc-1f9bd, U+1f9ed, U+1f9f3, U+1fa7c;
56
+ }
57
+ @font-face {
58
+ font-family: 'NotoColorEmoji';
59
+ font-style: normal;
60
+ font-weight: 400;
61
+ font-display: swap;
62
+ src: url(https://fonts.gstatic.com/s/notocoloremoji/v39/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.6.woff2) format('woff2');
63
+ unicode-range: U+200d, U+2615, U+fe0f, U+1f32d-1f330, U+1f336, U+1f33d, U+1f344-1f37f, U+1f382, U+1f52a, U+1f7e9, U+1f7eb, U+1f942-1f944, U+1f950-1f96f, U+1f99e, U+1f9aa, U+1f9c0-1f9cb, U+1fad0-1fadc;
64
+ }
65
+ @font-face {
66
+ font-family: 'NotoColorEmoji';
67
+ font-style: normal;
68
+ font-weight: 400;
69
+ font-display: swap;
70
+ src: url(https://fonts.gstatic.com/s/notocoloremoji/v39/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.7.woff2) format('woff2');
71
+ unicode-range: U+200d, U+2600-2601, U+2603-2604, U+2614, U+2618, U+26a1, U+26c4-26c5, U+26c8, U+26f0, U+2728, U+2744, U+2b1b, U+2b50, U+fe0f, U+1f300, U+1f304-1f305, U+1f308, U+1f30a-1f30f, U+1f311-1f321, U+1f324-1f32c, U+1f331-1f335, U+1f337-1f33c, U+1f33e-1f344, U+1f3d4, U+1f3d6, U+1f3dc-1f3de, U+1f3f5, U+1f400-1f43f, U+1f490, U+1f4a7, U+1f4ae, U+1f525, U+1f54a, U+1f573, U+1f577-1f578, U+1f648-1f64a, U+1f6d8, U+1f940, U+1f980-1f9ae, U+1f9ba, U+1fa90, U+1faa8, U+1fab0-1fabf, U+1facd-1facf, U+1fae7;
72
+ }
73
+ @font-face {
74
+ font-family: 'NotoColorEmoji';
75
+ font-style: normal;
76
+ font-weight: 400;
77
+ font-display: swap;
78
+ src: url(https://fonts.gstatic.com/s/notocoloremoji/v39/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.8.woff2) format('woff2');
79
+ unicode-range: U+200d, U+2640, U+2642, U+2695-2696, U+26f7, U+26f9, U+2708, U+2764, U+27a1, U+fe0f, U+1f33e, U+1f373, U+1f37c, U+1f384-1f385, U+1f393, U+1f3a4, U+1f3a8, U+1f3c2-1f3c4, U+1f3c7, U+1f3ca-1f3cc, U+1f3eb, U+1f3ed, U+1f3fb-1f3ff, U+1f430, U+1f466-1f469, U+1f46b-1f478, U+1f47c, U+1f481-1f483, U+1f486-1f487, U+1f48b, U+1f48f, U+1f491, U+1f4bb-1f4bc, U+1f527, U+1f52c, U+1f574-1f575, U+1f57a, U+1f645-1f647, U+1f64b, U+1f64d-1f64e, U+1f680, U+1f692, U+1f6a3, U+1f6b4-1f6b6, U+1f6c0, U+1f6cc, U+1f91d, U+1f926, U+1f930-1f931, U+1f934-1f93a, U+1f93c-1f93e, U+1f977, U+1f9af-1f9b3, U+1f9b8-1f9b9, U+1f9bc-1f9bd, U+1f9cc-1f9cf, U+1f9d1-1f9df, U+1fa70, U+1fa82, U+1fac3-1fac5, U+1fac8, U+1faef;
80
+ }
81
+ @font-face {
82
+ font-family: 'NotoColorEmoji';
83
+ font-style: normal;
84
+ font-weight: 400;
85
+ font-display: swap;
86
+ src: url(https://fonts.gstatic.com/s/notocoloremoji/v39/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.9.woff2) format('woff2');
87
+ unicode-range: U+200d, U+2194-2195, U+2603, U+261d, U+2620, U+2639-263a, U+2665, U+26a1, U+26c4, U+270a-270d, U+2728, U+2763-2764, U+2b50, U+fe0f, U+1f31a-1f31f, U+1f32b, U+1f389-1f38a, U+1f3fb-1f3ff, U+1f440-1f450, U+1f463-1f465, U+1f479-1f47b, U+1f47d-1f480, U+1f485, U+1f48b-1f48c, U+1f493-1f49f, U+1f4a2, U+1f4a4-1f4a6, U+1f4a8-1f4ab, U+1f4af, U+1f525, U+1f573, U+1f590, U+1f595-1f596, U+1f5a4, U+1f5e3, U+1f600-1f644, U+1f648-1f64a, U+1f64c, U+1f64f, U+1f90c-1f925, U+1f927-1f92f, U+1f932-1f933, U+1f970-1f976, U+1f978-1f97a, U+1f9a0, U+1f9b4-1f9b7, U+1f9bb, U+1f9be-1f9bf, U+1f9d0, U+1f9e0-1f9e1, U+1fa75-1fa79, U+1fac0-1fac2, U+1fac6, U+1fae0-1fae6, U+1fae8-1faea, U+1faef-1faf8;
88
+ }
package/styles/estreUiHandles.css CHANGED
@@ -1,4 +1,103 @@
1
1
  /* stock handle styles */
2
+ article .dedicated_calendar { }
3
+ article .dedicated_calendar > .calendar_block { }
4
+ article .dedicated_calendar > .calendar_block > div { }
5
+ article .dedicated_calendar > .schedule_block { }
6
+ article .dedicated_calendar > .schedule_block > div { }
7
+
8
+ article .micro_calendar { }
9
+ article .micro_calendar > .calendar_structure { --color-days-subjects: var(--color-text); --today-outline-width: 1px; --color-label: var(--color-text-lighten); --color-label-pale: var(--color-text-paleness); --color-label-holiday: var(--color-holiday); color: var(--color-label); }
10
+ article .micro_calendar > .calendar_structure .days_holder { margin-inline: var(--today-outline-width); }
11
+ article .micro_calendar > .calendar_structure .days_holder > .days { display: flex; flex-flow: row nowrap; width: -moz-available; width: -webkit-fill-available; width: stretch; justify-content: stretch; align-items: stretch; }
12
+ article .micro_calendar > .calendar_structure .days_holder > .days > .day { display: flex; flex-flow: column nowrap; width: calc(100% / 7); align-items: center; transition-timing-function: ease; transition-duration: 0.3s; will-change: auto; }
13
+ article .micro_calendar > .calendar_structure .days_holder > .days > .day > .label { font-size: 0.75rem; line-height: 1em; }
14
+ article .micro_calendar > .calendar_structure .days_holder > .days > .day[data-day="0"] > .label { color: var(--color-label-holiday); }
15
+ article .micro_calendar > .calendar_structure .days_holder > .days > .day[data-day="6"] > .label { color: var(--color-label-holiday); }
16
+ article .micro_calendar > .calendar_structure .days_holder > .days > .day[data-holiday="1"] > .label { color: var(--color-label-holiday); }
17
+ article .micro_calendar > .calendar_structure[data-hide-weekend="1"] .days_holder > .days > .day { width: calc(100% / 5); }
18
+ article .micro_calendar > .calendar_structure[data-hide-weekend="-1"] .days_holder > .days > .day { width: calc(100% / 6); }
19
+ article .micro_calendar > .calendar_structure[data-hide-weekend="0"] .days_holder > .days > .day { width: calc(100% / 6); }
20
+ article .micro_calendar > .calendar_structure[data-hide-weekend="-1"] .days_holder > .days > .day[data-day="0"] { display: none; }
21
+ article .micro_calendar > .calendar_structure[data-hide-weekend="0"] .days_holder > .days > .day[data-day="6"] { display: none; }
22
+ article .micro_calendar > .calendar_structure[data-hide-weekend="1"] .days_holder > .days > .day[data-day="0"] { display: none; }
23
+ article .micro_calendar > .calendar_structure[data-hide-weekend="1"] .days_holder > .days > .day[data-day="6"] { display: none; }
24
+ article .micro_calendar > .calendar_structure .days_holder > .days > .day > .label > label { overflow-wrap: normal; }
25
+ article .micro_calendar > .calendar_structure > .days_subjects { display: flex; flex-flow: row nowrap; height: 40px; border-bottom: solid 1px var(--color-boundary-lightly); color: var(--color-days-subjects); }
26
+ article .micro_calendar > .calendar_structure > .days_subjects > * { flex-grow: 0; flex-shrink: 0; }
27
+ article .micro_calendar > .calendar_structure > .days_subjects > .days_holder { width: -moz-available; width: -webkit-fill-available; width: stretch; height: 100%; flex-grow: 1; flex-shrink: 1; }
28
+ article .micro_calendar > .calendar_structure > .days_subjects > .days_holder > .days { height: 100%; }
29
+ article .micro_calendar > .calendar_structure > .days_subjects > .days_holder > .days > .day { height: 100%; justify-content: center; }
30
+ article .micro_calendar > .calendar_structure[data-show-pointer-days-subject="1"] > .days_subjects > .days_holder > .days > .day { cursor: pointer; }
31
+ article .micro_calendar > .calendar_structure > .days_subjects > .days_holder > .days > .day > .label { }
32
+ article .micro_calendar > .calendar_structure > .days_subjects > .days_holder > .days > .day > .label > label { }
33
+ article .micro_calendar > .calendar_structure[data-show-pointer-days-subject="1"] > .days_subjects > .days_holder > .days > .day > .label > label { cursor: pointer; }
34
+ article .micro_calendar > .calendar_structure > .weeks { }
35
+ article .micro_calendar > .calendar_structure > .weeks > .week { display: flex; flex-flow: row nowrap; border-bottom: solid 1px var(--color-boundary-highlight); }
36
+ article .micro_calendar[data-hide-week-divider="1"] > .calendar_structure > .weeks > .week { border-color: transparent; }
37
+ article .micro_calendar > .calendar_structure > .weeks > .week > * { flex-grow: 0; flex-shrink: 0; }
38
+ article .micro_calendar > .calendar_structure > .weeks > .week > .days_holder { width: -moz-available; width: 100%; width: -webkit-fill-available; width: stretch; flex-grow: 1; flex-shrink: 1; }
39
+ article .micro_calendar > .calendar_structure > .weeks > .week > .days_holder > .days { }
40
+ article .micro_calendar > .calendar_structure > .weeks > .week > .days_holder > .days > .day { --bg-color: transparent; padding: 2px 0; background-color: var(--bg-color); }
41
+ article .micro_calendar > .calendar_structure[data-show-pointer-days="1"] > .weeks > .week > .days_holder > .days > .day { cursor: pointer; }
42
+ article .micro_calendar > .calendar_structure > .weeks > .week > .days_holder > .days > .day[data-today="1"] { z-index: 1; outline: solid var(--today-outline-width) var(--color-boundary-darker); }
43
+ article .micro_calendar > .calendar_structure > .weeks > .week > .days_holder > .days > .day > .label { display: flex; flex-flow: column nowrap; width: 24px; aspect-ratio: 1; margin: 5px 0; border-radius: 100%; justify-content: center; align-items: center; transition-timing-function: ease; transition-duration: 0.2s; will-change: auto; }
44
+ article .micro_calendar > .calendar_structure > .weeks > .week > .days_holder > .days > .day > .label > label { }
45
+ article .micro_calendar > .calendar_structure[data-bound-m="1"] > .weeks > .week > .days_holder > .days > .day:not([data-month="1"]) > .label { color: var(--color-label-pale); }
46
+ article .micro_calendar > .calendar_structure[data-bound-m="2"] > .weeks > .week > .days_holder > .days > .day:not([data-month="2"]) > .label { color: var(--color-label-pale); }
47
+ article .micro_calendar > .calendar_structure[data-bound-m="3"] > .weeks > .week > .days_holder > .days > .day:not([data-month="3"]) > .label { color: var(--color-label-pale); }
48
+ article .micro_calendar > .calendar_structure[data-bound-m="4"] > .weeks > .week > .days_holder > .days > .day:not([data-month="4"]) > .label { color: var(--color-label-pale); }
49
+ article .micro_calendar > .calendar_structure[data-bound-m="5"] > .weeks > .week > .days_holder > .days > .day:not([data-month="5"]) > .label { color: var(--color-label-pale); }
50
+ article .micro_calendar > .calendar_structure[data-bound-m="6"] > .weeks > .week > .days_holder > .days > .day:not([data-month="6"]) > .label { color: var(--color-label-pale); }
51
+ article .micro_calendar > .calendar_structure[data-bound-m="7"] > .weeks > .week > .days_holder > .days > .day:not([data-month="7"]) > .label { color: var(--color-label-pale); }
52
+ article .micro_calendar > .calendar_structure[data-bound-m="8"] > .weeks > .week > .days_holder > .days > .day:not([data-month="8"]) > .label { color: var(--color-label-pale); }
53
+ article .micro_calendar > .calendar_structure[data-bound-m="9"] > .weeks > .week > .days_holder > .days > .day:not([data-month="9"]) > .label { color: var(--color-label-pale); }
54
+ article .micro_calendar > .calendar_structure[data-bound-m="10"] > .weeks > .week > .days_holder > .days > .day:not([data-month="10"]) > .label { color: var(--color-label-pale); }
55
+ article .micro_calendar > .calendar_structure[data-bound-m="11"] > .weeks > .week > .days_holder > .days > .day:not([data-month="11"]) > .label { color: var(--color-label-pale); }
56
+ article .micro_calendar > .calendar_structure[data-bound-m="12"] > .weeks > .week > .days_holder > .days > .day:not([data-month="12"]) > .label { color: var(--color-label-pale); }
57
+ article .micro_calendar > .calendar_structure[data-show-pointer-days="1"] > .weeks > .week > .days_holder > .days > .day > .label > label { cursor: pointer; }
58
+ article .micro_calendar > .calendar_structure:not([data-hide-selected="1"])[data-show-pointer-selected="1"] > .weeks > .week > .days_holder > .days > .day[data-selected="1"] { cursor: pointer; }
59
+ article .micro_calendar > .calendar_structure:not([data-hide-selected="1"]) > .weeks > .week > .days_holder > .days > .day[data-selected="1"] > .label { background-color: var(--color-boundary-darker); color: var(--color-text-inverse); }
60
+ article .micro_calendar > .calendar_structure:not([data-hide-selected="1"]) > .weeks > .week > .days_holder > .days > .day[data-selected="1"][data-day="0"] > .label { background-color: var(--color-label-holiday); }
61
+ article .micro_calendar > .calendar_structure:not([data-hide-selected="1"]) > .weeks > .week > .days_holder > .days > .day[data-selected="1"][data-day="6"] > .label { background-color: var(--color-label-holiday); }
62
+ article .micro_calendar > .calendar_structure:not([data-hide-selected="1"]) > .weeks > .week > .days_holder > .days > .day[data-selected="1"][data-holiday="1"] > .label { background-color: var(--color-label-holiday); }
63
+ article .micro_calendar > .calendar_structure:not([data-hide-selected="1"])[data-show-pointer-selected="1"] > .weeks > .week > .days_holder > .days > .day[data-selected="1"] > .label > label { cursor: pointer; }
64
+ article .micro_calendar > .calendar_structure > .weeks > .week > .days_holder > .days > .day > .subject { --height: 1.2em; height: var(--height); max-width: -moz-available; max-width: -webkit-fill-available; max-width: stretch; margin-top: calc(var(--height) * -1); color: var(--color-text-lightness); font-size: 0.5rem; font-weight: 200; line-height: var(--height); text-overflow: ellipsis; text-shadow: 1px 1px 0px var(--color-text-inverse); white-space: nowrap; overflow-x: hidden; }
65
+ article .micro_calendar > .calendar_structure > .weeks > .week > .days_holder > .days > .day > .subject > span { }
66
+ article .micro_calendar > .calendar_structure > .weeks > .week > .days_holder > .days > .day > .scheduled { display: flex; flex-flow: column nowrap; width: -moz-available; width: -webkit-fill-available; width: stretch; padding: 0 2px; align-items: center; }
67
+ article .micro_calendar > .calendar_structure > .weeks > .week > .days_holder > .days > .day > .scheduled > ul { display: flex; flex-flow: column nowrap; list-style: none; width: -moz-available; width: -webkit-fill-available; width: stretch; margin: 0; padding: 0; gap: 2px; justify-content: stretch; transition-timing-function: ease; transition-duration: 0.3s; will-change: auto; }
68
+ article .micro_calendar > .calendar_structure > .weeks > .week > .days_holder > .days > .day > .scheduled > ul > li { --bg-color: var(--color-boundary-lightish); max-width: -moz-available; max-width: -webkit-fill-available; max-width: stretch; padding: 2px; border-radius: 2px; background-color: var(--bg-color); color: var(--color-text-inverse); font-size: 0.75rem; line-height: 1em; text-align: center; text-overflow: ellipsis; white-space: nowrap; overflow-x: hidden; transition-timing-function: ease; transition-duration: 0.3s; will-change: auto; }
69
+ article .micro_calendar[data-collapsed="1"] > .calendar_structure > .weeks > .week > .days_holder > .days > .day > .scheduled > ul { flex-flow: row wrap; width: 16px; max-width: -moz-available; max-width: -webkit-fill-available; max-width: stretch; justify-content: center; }
70
+ article .micro_calendar[data-collapsed="1"] > .calendar_structure > .weeks > .week > .days_holder > .days > .day > .scheduled > ul:has(> li:nth-child(10)) { width: 28px; }
71
+ article .micro_calendar[data-collapsed="1"] > .calendar_structure > .weeks > .week > .days_holder > .days > .day > .scheduled > ul:has(> li:nth-child(16)) { width: 40px; }
72
+ article .micro_calendar[data-collapsed="1"] > .calendar_structure > .weeks > .week > .days_holder > .days > .day > .scheduled > ul:has(> li:nth-child(22)) { width: 52px; }
73
+ article .micro_calendar[data-collapsed="1"] > .calendar_structure > .weeks > .week > .days_holder > .days > .day > .scheduled > ul > li { width: 4px; height: 4px; padding: 0; border-radius: 100%; font-size: 0; }
74
+ article .micro_calendar > .calendar_structure > .weeks > .week > .days_holder > .days > .day > .scheduled > ul > li > span { }
75
+ article .micro_calendar > .under_gradient { width: -moz-available; width: -webkit-fill-available; width: stretch; height: 12px; background-image: linear-gradient(180deg, rgb(0 0 0 / 3%) 0, transparent 3px); }
76
+ article .micro_calendar > .stretch_handle { display: flex; flex-flow: row nowrap; width: -moz-available; width: -webkit-fill-available; width: stretch; justify-content: center; align-items: center; }
77
+ article .micro_calendar > .stretch_handle > .handle { position: relative; width: 80px; height: 4px; border-radius: 2px; background-color: var(--color-boundary-lightside); cursor: row-resize; transition-timing-function: ease; transition-duration: 0.3s; will-change: auto; }
78
+ article .micro_calendar > .stretch_handle > .handle:hover { background-color: var(--color-boundary-dark); }
79
+ article .micro_calendar > .stretch_handle > .handle:active { background-color: var(--color-boundary-darkness); }
80
+ article .micro_calendar > .stretch_handle > .handle::after { content: ''; position: absolute; display: block; top: -6px; bottom: -6px; left: -6px; right: -6px; border-radius: 8px; }
81
+
82
+ article .minimal_scheduler { margin-top: var(--basic-ui-inset-v-half); padding: 5px 0; }
83
+ article .minimal_scheduler > .schedule_list { list-style: none; display: flex; flex-flow: column nowrap; margin: 0; padding: var(--basic-ui-inset-v) var(--basic-ui-inset-h); align-items: stretch; row-gap: 12px; }
84
+ article .minimal_scheduler > .schedule_list > .placeholder { display: block; width: -moz-available; width: -webkit-fill-available; width: stretch; text-align: center; font-size: 0.875rem; font-weight: 300; line-height: 1.25rem; }
85
+ article .minimal_scheduler > .schedule_list > .placeholder > span.message { }
86
+ article .minimal_scheduler > .schedule_list > .schedule_item { }
87
+ article .minimal_scheduler > .schedule_list > .schedule_item > .schedule { --bg-color: var(--color-boundary-lightside); display: flex; flex-flow: column nowrap; border-radius: 12px; padding: var(--basic-ui-inset-v-half) var(--basic-ui-inset-h); background-color: var(--bg-color); color: var(--color-text-inverse); font-size: 0.875rem; line-height: 1.375rem; transition-timing-function: ease; transition-duration: 0.3s; will-change: auto; }
88
+ article .minimal_scheduler > .schedule_list > .schedule_item > .schedule:hover { box-shadow: 1px 2px 4px var(--color-boundary-o5); }
89
+ article .minimal_scheduler > .schedule_list > .schedule_item > .schedule:focus { outline: solid 2px var(--color-boundary-o10); }
90
+ article .minimal_scheduler > .schedule_list > .schedule_item > .schedule:active { outline: solid 2px var(--color-boundary-o10); outline-offset: -2px; }
91
+ article .minimal_scheduler > .schedule_list > .schedule_item > .schedule > .subject_line { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: flex-start; }
92
+ article .minimal_scheduler > .schedule_list > .schedule_item > .schedule > .subject_line > .subject { font-weight: 500; }
93
+ article .minimal_scheduler > .schedule_list > .schedule_item > .schedule > .subject_line > .origin { flex-shrink: 0; font-size: 0.75rem; font-weight: 300; line-height: 1.25rem; }
94
+ article .minimal_scheduler > .schedule_list > .schedule_item > .schedule > .time_line { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: flex-end; }
95
+ article .minimal_scheduler > .schedule_list > .schedule_item > .schedule > .time_line > .time { font-weight: 400; }
96
+ article .minimal_scheduler > .schedule_list > .schedule_item > .schedule > .time_line > .time:empty::before { content: '하루종일'; }
97
+ article .minimal_scheduler > .schedule_list > .schedule_item > .schedule > .time_line > .associated { flex-shrink: 0; font-size: 0.75rem; font-weight: 100; line-height: 1.25rem; }
98
+
99
+
100
+
2
101
  article .dynamic_section_host { display: flex; flex-flow: row nowrap; margin-top: 4px; color: var(--color-text-lightest); }
3
102
  article .dynamic_section_host > .host_item { width: 98%; flex-grow: 1; padding-top: 8px; padding-bottom: 7px; border-bottom: solid 1px var(--color-boundary-o10); font-size: 1rem; font-weight: 500; text-align: center; line-height: 1.5em; transition-timing-function: ease-in-out; transition-duration: 0.2s; will-change: auto; cursor: pointer; }
4
103
  article .dynamic_section_host > .host_item:has(> :nth-child(2)) { width: 48%; }
@@ -178,8 +277,27 @@ article .month_selector_bar > .float_selections > ul.monthes > li > button > spa
178
277
  article .month_selector_bar > .float_selections > ul.monthes > li > button > span.month { }
179
278
 
180
279
 
181
- body .toaster_slot { --line-height: 1.5em; display: flex !important; flex-flow: row nowrap; padding: var(--basic-ui-inset-v) var(--basic-ui-inset-h); justify-content: space-between; align-items: center; font-size: 1rem; line-height: var(--line-height); }
182
- body .toaster_slot::after { content: ''; display: inline-block; height: var(--line-height); aspect-ratio: 1; background-image: var(--svg-dropdown-24x24); background-size: cover; background-position: center; background-repeat: no-repeat; }
183
- body .toaster_slot:disabled { opacity: 0.4; }
184
- body .toaster_slot > span {}
280
+ article .multi_dial_slot { --holder-pad: 0; --holder-pad-l: var(--holder-pad); --holder-pad-r: var(--holder-pad); --col-gap: var(--basic-ui-inset-h-quarter); --bound-gap: 0; --font-size: 1rem; --font-weight: 500; --item-height: 2em; --item-pad: calc((var(--item-height) - var(--font-size)) / 2); --display-area-pad: max(var(--basic-ui-inset-v), var(--item-pad)); --item-preview-height: min(calc(var(--item-pad) + var(--font-size) + var(--display-area-pad)), calc(var(--item-height) * 0.98)); --height: calc(var(--item-height) + (var(--item-preview-height) * 2)); font-size: var(--font-size); line-height: var(--item-height); font-weight: var(--font-weight); }
281
+ article .multi_dial_slot > ul.dialHolder { display: flex; flex-flow: row nowrap; list-style: none; margin: 0; padding: 0 var(--holder-pad-r) 0 var(--holder-pad-l); column-gap: var(--col-gap); justify-content: stretch; align-items: stretch; }
282
+ article .multi_dial_slot:not([data-stretch="1"]) > ul.dialHolder { justify-content: center; }
283
+ article .multi_dial_slot > ul.dialHolder > .divider { display: flex; flex-flow: row nowrap; width: fit-content; flex-grow: 0; flex-shrink: 0; justify-content: center; align-items: center; }
284
+ article .multi_dial_slot > ul.dialHolder > .dial_bound { display: flex; flex-flow: row nowrap; width: fit-content; flex-grow: 1; flex-shrink: 1; column-gap: var(--bound-gap); justify-content: center; align-items: center; }
285
+ article .multi_dial_slot:not([data-stretch="1"]) > ul.dialHolder > .dial_bound { flex-grow: 0; }
286
+ article .multi_dial_slot > ul.dialHolder > .dial_bound > .prefix { display: flex; flex-flow: row nowrap; width: fit-content; flex-grow: 0; flex-shrink: 0; justify-content: center; align-items: center; }
287
+ article .multi_dial_slot > ul.dialHolder > .dial_bound > .suffix { display: flex; flex-flow: row nowrap; width: fit-content; flex-grow: 0; flex-shrink: 0; justify-content: center; align-items: center; }
288
+ article .multi_dial_slot > ul.dialHolder > .dial_bound > ul.dial_host { display: flex; flex-flow: column nowrap; list-style: none; width: fit-content; height: var(--height); box-sizing: border-box; flex-grow: 1; flex-shrink: 1; margin: 0; padding: var(--item-preview-height) 0; align-items: stretch; overflow: hidden auto; scroll-snap-type: y proximity; mask-image: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 50%) 20%, black 30%, black 70%, rgb(0 0 0 / 50%) 80%, transparent 100%); }
289
+ @media (pointer: fine) {
290
+ article .multi_dial_slot > ul.dialHolder > .dial_bound > ul.dial_host { scrollbar-width: thin; }
291
+ article .multi_dial_slot[data-hide-scrollbar="1"] > ul.dialHolder > .dial_bound > ul.dial_host { scrollbar-width: none; }
292
+ }
293
+ article .multi_dial_slot > ul.dialHolder > .dial_bound > ul.dial_host[data-align="center"] { text-align: center; }
294
+ article .multi_dial_slot > ul.dialHolder > .dial_bound > ul.dial_host[data-align="left"] { text-align: left; }
295
+ article .multi_dial_slot > ul.dialHolder > .dial_bound > ul.dial_host[data-align="right"] { text-align: right; }
296
+ article .multi_dial_slot > ul.dialHolder > .dial_bound > ul.dial_host > li { width: 100%; width: -webkit-fill-available; width: stretch; height: var(--item-height); flex-grow: 0; flex-shrink: 0; align-self: stretch; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; scroll-snap-align: center; }
297
+
298
+
299
+ article .toaster_slot { --line-height: 1.5em; display: flex !important; flex-flow: row nowrap; padding: var(--basic-ui-inset-v) var(--basic-ui-inset-h); justify-content: space-between; align-items: center; font-size: 1rem; line-height: var(--line-height); }
300
+ article .toaster_slot::after { content: ''; display: inline-block; height: var(--line-height); aspect-ratio: 1; background-image: var(--svg-dropdown-24x24); background-size: cover; background-position: center; background-repeat: no-repeat; }
301
+ article .toaster_slot:disabled { opacity: 0.4; }
302
+ article .toaster_slot > span {}
185
303