estreui 1.0.7 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/index.html +3 -1
- package/package.json +5 -5
- package/scripts/alienese.js +49 -5
- package/scripts/doctre.js +17 -3
- package/scripts/estreU0EEOZ.js +82 -9
- package/scripts/estreUi.js +1138 -40
- package/scripts/jcodd.js +34 -10
- package/scripts/modernism.js +353 -41
- package/serviceWorker.js +6 -4
- package/stockHandlePrototypes.html +13 -1
- package/styles/estreUi.css +25 -102
- package/styles/estreUiCore.css +1 -0
- package/styles/estreUiCore2.css +2 -2
- package/styles/estreUiHandles.css +122 -4
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
|
|
|
@@ -265,6 +265,7 @@ article.limit_on_screen nav.instant_appbar { width: var(--on-screen-limit-width)
|
|
|
265
265
|
}
|
|
266
266
|
article nav.instant_appbar > * { max-height: var(--height); margin-top: auto; margin-bottom: auto; }
|
|
267
267
|
article nav.instant_appbar > * > * { max-height: var(--height); }
|
|
268
|
+
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
269
|
article nav.instant_appbar button { height: var(--height); margin: 0; font-size: 1rem; }
|
|
269
270
|
article nav.instant_appbar button.square { aspect-ratio: 1; }
|
|
270
271
|
article nav.instant_appbar > .float_area { position: absolute; bottom: 0; margin: 0; height: var(--appbar-height); }
|
|
@@ -282,7 +283,9 @@ article nav.instant_appbar > nav.appbarCenter > button { }
|
|
|
282
283
|
article nav.instant_appbar button.home { }
|
|
283
284
|
article nav.instant_appbar button.home img { height: calc(var(--height) * 86%); }
|
|
284
285
|
|
|
286
|
+
article .top_safe_pad { height: var(--top-safe-pad); }
|
|
285
287
|
article .appbar_pad { height: calc(var(--appbar-height) + var(--top-safe-pad)); }
|
|
288
|
+
article .appbar_only_pad { height: var(--appbar-height); }
|
|
286
289
|
|
|
287
290
|
article ul.for_ui { list-style: none; margin: 0; padding: 0; }
|
|
288
291
|
|
|
@@ -319,7 +322,7 @@ article .info_button { --height: 3.25rem; --height: var(--menu-height); --lead-t
|
|
|
319
322
|
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
323
|
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
324
|
|
|
322
|
-
article .text_capsule { --height: 1.5em; --radius:
|
|
325
|
+
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
326
|
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
327
|
article .text_capsule.hide_on_empty:empty { display: none; }
|
|
325
328
|
|
|
@@ -368,10 +371,22 @@ article .search_box button:hover > * { background-color: transparent; translate:
|
|
|
368
371
|
article .search_box button:active > * { background-color: transparent; scale: 1.25; filter: drop-shadow(2px 4px 3px #666); }
|
|
369
372
|
|
|
370
373
|
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; }
|
|
374
|
+
article .custom_checkbox > input[type="checkbox"] { position: absolute; width: 0; height: 0; opacity: 0; }
|
|
375
|
+
article .custom_checkbox:not(:has(> input[type="checkbox"])) > input[type="radio"] { position: absolute; width: 0; height: 0; opacity: 0; }
|
|
376
|
+
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; }
|
|
377
|
+
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
378
|
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;
|
|
374
|
-
article .custom_checkbox:
|
|
379
|
+
article .custom_checkbox > label::before { content: ''; display: inline-block; width: 1em; height: 1em; vertical-align: text-bottom; }
|
|
380
|
+
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; }
|
|
381
|
+
article .custom_checkbox:not(.mask_mode):has(> input[type="checkbox"]:checked) > label::before { background-image: var(--checkbox-checked-bg), var(--checkbox-checked); }
|
|
382
|
+
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); }
|
|
383
|
+
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); }
|
|
384
|
+
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); }
|
|
385
|
+
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; }
|
|
386
|
+
article .custom_checkbox.mask_mode:has(> input[type="checkbox"]:checked) > label::before { mask-image: var(--checkbox-checked-bg), var(--checkbox-checked); }
|
|
387
|
+
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); }
|
|
388
|
+
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); }
|
|
389
|
+
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
390
|
article .custom_checkbox > label > span { }
|
|
376
391
|
|
|
377
392
|
|
|
@@ -501,6 +516,10 @@ article [data-shoe]::after { content: attr(data-shoe); }
|
|
|
501
516
|
article [data-hang-lead]:not(:empty)::before { content: attr(data-hang-lead); }
|
|
502
517
|
article [data-hang-trail]:not(:empty)::after { content: attr(data-hang-trail); }
|
|
503
518
|
|
|
519
|
+
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; }
|
|
520
|
+
article [data-help-alert]::after:hover { --color: var(--color-text); }
|
|
521
|
+
article [data-help-alert]::after:active { --color: var(--color-point); }
|
|
522
|
+
|
|
504
523
|
article [data-focused="1"] { color: var(--color-focused); }
|
|
505
524
|
article [data-important="1"] { color: var(--color-important); }
|
|
506
525
|
article [data-emphasis="1"] { color: var(--color-emphasis); }
|
|
@@ -612,102 +631,6 @@ button.placeholder div.text_wrap span.sub_line { margin-top: 4px; font-size: 0.7
|
|
|
612
631
|
|
|
613
632
|
|
|
614
633
|
/* 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
634
|
|
|
712
635
|
|
|
713
636
|
|
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-
|
|
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-
|
|
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); }
|
|
@@ -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
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
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
|
|