newtil-css 0.2.79 → 0.2.80
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 +4 -3
- package/dist/components.css +1 -1
- package/dist/style.css +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -42,8 +42,8 @@ CSS 속성을 그대로 클래스명으로 사용하여 학습 곡선을 최소
|
|
|
42
42
|
Google Material Icons를 간편하게 사용할 수 있습니다.
|
|
43
43
|
|
|
44
44
|
```html
|
|
45
|
-
<
|
|
46
|
-
<
|
|
45
|
+
<span class="n-icon icon:home">home</span>
|
|
46
|
+
<span class="n-icon icon:menu">menu</span>
|
|
47
47
|
```
|
|
48
48
|
|
|
49
49
|
### 🔧 CSS 변수 기반 컴포넌트
|
|
@@ -68,7 +68,8 @@ Google Material Icons를 간편하게 사용할 수 있습니다.
|
|
|
68
68
|
|
|
69
69
|
### CDN으로 설치
|
|
70
70
|
```html
|
|
71
|
-
<link href="https://
|
|
71
|
+
<link href="https://unpkg.com/newtil-css@latest/dist/style.css" rel="stylesheet" />
|
|
72
|
+
<script src="https://unpkg.com/newtil-css@latest/dist/script.js"></script>
|
|
72
73
|
```
|
|
73
74
|
|
|
74
75
|
### npm으로 설치
|
package/dist/components.css
CHANGED
|
@@ -3,4 +3,4 @@
|
|
|
3
3
|
&>:where(aside,.n-aside,*>.n-aside){width:min-content}&.layout-aside-width\:slide-out{grid-template-columns:0 1fr;overflow-x:hidden;transition:grid-template-columns .5s ease;&>:where(aside,.n-aside,*>.n-aside){overflow:hidden;pointer-events:none;transform:translateX(-100%);z-index:-1}}&.layout-aside-width\:resizable>:where(aside,.n-aside,*>.n-aside):after{background-image:linear-gradient(to right,transparent 0,transparent 1px),linear-gradient(to right,transparent 0,transparent 1px),linear-gradient(to right,var(--color-base-4) 0,var(--color-base-4) 1px);background-position:1px 0,2px 0,0 0;background-repeat:repeat-y;background-size:1px 8px,1px 8px,1px 100%;content:"";cursor:ew-resize;height:100%;position:absolute;right:-2px;top:0;transition:background-image .2s ease;width:4px;z-index:10}&.layout-aside\:resizable>:where(aside,.n-aside,*>.n-aside):hover:after{background-image:linear-gradient(to right,transparent 0,transparent 1px),linear-gradient(to right,transparent 0,transparent 1px),linear-gradient(to right,var(--color-base-6) 0,var(--color-base-6) 1px);background-position:1px 0,2px 0,0 0;background-repeat:repeat-y;background-size:1px 6px,1px 6px,1px 100%}&.layout-aside\:resizable>:where(aside,.n-aside,*>.n-aside).resizing:after{background-image:linear-gradient(to right,transparent 0,transparent 1px),linear-gradient(to right,transparent 0,transparent 1px),linear-gradient(to right,var(--color-main-1) 0,var(--color-main-1) 1px);background-position:1px 0,2px 0,0 0;background-repeat:repeat-y;background-size:1px 4px,1px 4px,1px 100%}&.layout-aside-pos\:right{grid-template-areas:"header header" "main aside" "footer footer";grid-template-columns:1fr min-content;overflow-x:hidden;&>:where(aside,.n-aside,*>.n-aside){border-left:1px solid var(--border-color,--color-base-3);border-right:none}&.layout-aside-width\:slide-out{grid-template-columns:1fr 0;overflow-x:hidden;transition:grid-template-columns .5s ease;&>:where(aside,.n-aside,*>.n-aside){overflow:hidden;pointer-events:none;transform:translateX(100%);z-index:-1}}&.layout-aside-width\:resizable>:where(aside,.n-aside,*>.n-aside):after{background-image:linear-gradient(to left,transparent 0,transparent 1px),linear-gradient(to left,transparent 0,transparent 1px),linear-gradient(to left,var(--color-base-4) 0,var(--color-base-4) 1px);background-position:1px 0,2px 0,0 0;background-repeat:repeat-y;background-size:1px 8px,1px 8px,1px 100%;left:-2px;right:auto}&.layout-aside-width\:resizable>:where(aside,.n-aside,*>.n-aside):hover:after{background-image:linear-gradient(to left,transparent 0,transparent 1px),linear-gradient(to left,transparent 0,transparent 1px),linear-gradient(to left,var(--color-base-6) 0,var(--color-base-6) 1px);background-position:1px 0,2px 0,0 0;background-repeat:repeat-y;background-size:1px 6px,1px 6px,1px 100%}&.layout-aside-width\:resizable>:where(aside,.n-aside,*>.n-aside).resizing:after{background-image:linear-gradient(to left,transparent 0,transparent 1px),linear-gradient(to left,transparent 0,transparent 1px),linear-gradient(to left,var(--color-main-1) 0,var(--color-main-1) 1px);background-position:1px 0,2px 0,0 0;background-repeat:repeat-y;background-size:1px 4px,1px 4px,1px 100%}}}}@media (max-width:640px){.n-layout:has(>aside,>.n-aside).layout-aside-pos\:right{&.layout-aside-width\:responsive{grid-template-areas:"header header" "main aside" "footer footer";grid-template-columns:1fr min-content}}}.n-layout{&>.n-header:has(.n-aside-toggle:checked)~:where(aside,.n-aside,*>aside,*>.n-aside){background-color:var(--background-color,--color-base-1);height:100%;left:0;position:absolute;top:0;transform:translateX(-100%)}}@media (max-width:640px){.n-layout{&.layout-aside-width\:responsive{grid-template-areas:"header header" "aside main" "footer footer";grid-template-columns:min-content 1fr}}}.n-section{--padding:var(--space-4);--gap:var(--space-4);--bd-color:var(--color-base-5);--bd-color-hover:var(--color-base-8);--bd-width:1px;--bd-radius:var(--space-3);--title-color:var(--color-base-7);--title-size:var(--size-8);--title-fw:var(--font-weight-7);--bg-color-glass:rgba(var(--rgb-base-2),0.4);--bg-color-glass-hover:rgba(var(--rgb-base-4),0.4)}@media (prefers-color-scheme:dark){.n-section{--title-color:var(--color-base-1);--bd-color:var(--color-base-6);--bd-color-hover:var(--color-base-2);--bd-width:0.5px;--bg-color-glass:rgba(var(--rgb-base-8),0.4);--bg-color-glass-hover:rgba(var(--rgb-base-8),0.6)}}.n-section{display:flex;flex-direction:column;overflow:clip;&.hover:hover{cursor:pointer}&.section\:card{border:var(--bd-width) solid var(--bd-color);border-radius:var(--bd-radius);&.hover:hover{border:var(--border-width-1) solid var(--bd-color-hover)}}&.section\:glass{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:var(--bg-color-glass);transition:background .3s ease,backdrop-filter .3s ease,border .3s ease;&.hover:hover{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:var(--bg-color-glass-hover)}}&.section\:elevated{box-shadow:var(--shadow-lg);&.hover:hover{box-shadow:var(--shadow-xl)}}&>h1,&>header{border-bottom:var(--bd-width) solid var(--bd-color);max-width:100%;min-width:0;overflow:hidden;padding:var(--padding);text-overflow:ellipsis;white-space:nowrap;width:100%}&>h1,&>header,&>header>h1{align-items:center;color:var(--title-color);display:flex;font-size:var(--title-size);font-weight:var(--title-fw)}&>h1+*,&>header+*{max-height:2000px;opacity:1;overflow:hidden;padding:var(--padding);transition:max-height .6s ease,opacity .6s ease,padding .6s ease}&:has(.n-list.list-dir\:column),&:has(.n-list.list-direction\:column)>*{&>h1+*,&>header+*{padding:0}}&.content-toggle\:hide{&>h1,&>header{border-bottom:none}&>h1+*,&>header+*{max-height:0;opacity:0;padding-bottom:0;padding-top:0}}}:where(.n-frame,.n-frame\:ruled,.n-frame\:outlined){>h1,>header{align-items:center;display:flex;width:100%}>h1,>header>h1{font-size:var(--panel-header-fs,var(--font-size-7,16px));font-weight:var(--panel-header-fw,var(--font-weight-2,bold))}>:is(table,ul,dl,form,div,.content){align-items:var(--content-align,start);display:flex;flex-direction:var(--content-direction,column);justify-content:var(--content-justify,start);list-style:var(--list-style,circle);overflow:hidden;position:relative;width:var(--panel-content-width,100%);>:where(li,dt,dd,.item){align-items:start;display:flex;flex-direction:row;flex-direction:column;padding:1em 1.5em;width:100%}}}:where(.n-frame,.n-frame\:ruled,.n-frame\:outlined):has(>h1,>header){>:is(table,ul,dl,form,div,.content){padding-top:1em}}.list-title\:underline{>h1,>header{border-bottom:1px solid var(--panel-header-bd-bottom,var(--color-base-3));padding-bottom:10px}}.list-item-style\:circle{>:where(table,ul,dl,form,div,.content){list-style:var(--list-style,circle)}}.n-frame\:outlined.n-frame-item\:card{>:where(table,ul,dl,form,div,.content){>:where(li,dt,dd,section){align-items:start;flex-direction:column;padding:1em 1.5em}}}.n-frame\:outlined{>:where(table,ul,dl,form,div,.content){gap:1em;>:where(li,dt,dd,section){align-items:center;border:1px solid var(--panel-header-bd-bottom,var(--color-base-3));display:flex;min-height:40px;padding:0 10px}}}.n-frame\:outlined.outlined-gap\:1{>:where(table,ul,dl,form,div,.content){gap:var(--space-1,4px)}}.n-frame\:outlined.outlined-gap\:2{>:where(table,ul,dl,form,div,.content){gap:var(--space-2,8px)}}.n-frame\:ruled{>:where(table,ul,dl,form,div,.content){>:where(li,dt,dd){line-height:2.5em;position:relative}>:where(li,dt,dd,section):after{background-color:var(--panel-header-bd-bottom,var(--color-base-3));bottom:0;content:"";display:flex;height:1px;padding:0;position:absolute;width:100%}>:where(li,dt,dd):last-child:after{display:none;min-height:40px}}}.n-frame\:ruled:has(section):before{align-items:center;color:red;content:"ruled-list 클래스 박스 안에 section 태그를 포함할 수 없습니다.";display:flex;font-weight:700;justify-content:center;padding:20px 20px 0;width:100%}.n-form{--form-border-radius:16px;--form-padding:24px;--input-padding-x:12px;--input-input-height:36px;--input-textarea-min-height:58px;--input-border-radius:6px;--input-border-color:var(--color-base-3);--input-underline-border-width:1.6px;--input-border-color-focus:var(--color-sub-2);--input-border-color-success:#37b24d;--input-color-warning:var(--color-accent-1);--input-border-color-warning:var(--color-accent-1);display:flex;flex-direction:column;gap:var(--space-5);>div{display:flex;flex-direction:column;gap:5px;padding:5px 0;width:100%;label{display:flex;flex-direction:column;gap:5px;>span{display:inline-flex;font-weight:500;width:100%}>input[type=email],>input[type=number],>input[type=password],>input[type=search],>input[type=tel],>input[type=text],>input[type=url],>textarea{background-color:var(--color-base-1);border:1px solid var(--input-border-color);border-radius:var(--input-border-radius);box-shadow:0 1px 1.5px 0 rgba(0,0,0,.05);color:rgba(var(--rgb-base-7),.85);cursor:default;flex-grow:1;font-size:14px;line-height:150%;padding:4px var(--input-padding-x);transition:border .12s}>textarea{height:auto;min-height:100px;overflow-y:auto}}}&.n-label-pos\:left{>div{label{align-items:center;flex-direction:row;width:100%;>span{text-wrap:nowrap;display:inline-flex;justify-content:center;overflow:hidden;text-overflow:ellipsis " [..]";white-space:nowrap;width:20%}>span:after{content:" : "}input{flex-grow:1}}}}}.n-input{--input-padding-x:12px;--input-input-height:36px;--input-textarea-min-height:58px;--input-border-color:var(--color-base-3);--input-border-radius:6px;--input-underline-border-width:1.6px;--input-border-color-focus:var(--color-sub-2);--input-border-color-success:#37b24d;--input-color-warning:var(--color-accent-1);--input-border-color-warning:var(--color-accent-1)}.n-input,input[type=email].n-input,input[type=number].n-input,input[type=password].n-input,input[type=search].n-input,input[type=tel].n-input,input[type=text].n-input,input[type=url].n-input,textarea.n-input{background-color:var(--color-base-1);border:1px solid var(--input-border-color);border-radius:var(--input-border-radius);box-shadow:0 1px 1.5px 0 rgba(0,0,0,.05);color:rgba(var(--rgb-base-10),.85);padding:4px var(--input-padding-x);width:100%}.n-input,.n-input-type\:outline,.n-input\:outline,input[type=email].n-input,input[type=email].n-input-type\:outline,input[type=email].n-input\:outline,input[type=number].n-input,input[type=number].n-input-type\:outline,input[type=number].n-input\:outline,input[type=password].n-input,input[type=password].n-input-type\:outline,input[type=password].n-input\:outline,input[type=search].n-input,input[type=search].n-input-type\:outline,input[type=search].n-input\:outline,input[type=tel].n-input,input[type=tel].n-input-type\:outline,input[type=tel].n-input\:outline,input[type=text].n-input,input[type=text].n-input-type\:outline,input[type=text].n-input\:outline,input[type=url].n-input,input[type=url].n-input-type\:outline,input[type=url].n-input\:outline{height:var(--input-input-height)}.n-input-type\:underline,.n-input\:underline,input[type=email].n-input-type\:underline,input[type=email].n-input\:underline,input[type=number].n-input-type\:underline,input[type=number].n-input\:underline,input[type=password].n-input-type\:underline,input[type=password].n-input\:underline,input[type=search].n-input-type\:underline,input[type=search].n-input\:underline,input[type=tel].n-input-type\:underline,input[type=tel].n-input\:underline,input[type=text].n-input-type\:underline,input[type=text].n-input\:underline,input[type=url].n-input-type\:underline,input[type=url].n-input\:underline{background-color:transparent;border-left:none;border-radius:0;border-right:none;border-top:none;border-width:var(--input-underline-border-width);box-shadow:none;transition-duration:.2s;transition-property:border-color}textarea.n-input{height:100%;min-height:var(--input-textarea-min-height);resize:none}.n-input.n-input-status\:focus,input[type=email].n-input.n-input-status\:focus,input[type=email].n-input:focus,input[type=number].n-input.n-input-status\:focus,input[type=number].n-input:focus,input[type=password].n-input.n-input-status\:focus,input[type=password].n-input:focus,input[type=search].n-input.n-input-status\:focus,input[type=search].n-input:focus,input[type=tel].n-input.n-input-status\:focus,input[type=tel].n-input:focus,input[type=text].n-input.n-input-status\:focus,input[type=text].n-input:focus,input[type=url].n-input.n-input-status\:focus,input[type=url].n-input:focus,textarea.n-input.n-input-status\:focus,textarea.n-input:focus{border-color:var(--input-border-color-focus)}.n-input.n-input-status\:success,input[type=email].n-input.n-input-status\:success,input[type=number].n-input.n-input-status\:success,input[type=password].n-input.n-input-status\:success,input[type=search].n-input.n-input-status\:success,input[type=tel].n-input.n-input-status\:success,input[type=text].n-input.n-input-status\:success,input[type=url].n-input.n-input-status\:success,textarea.n-input.n-input-status\:success{border-color:var(--input-border-color-success)}.n-input.n-input-status\:warning,input[type=email].n-input.n-input-status\:warning,input[type=number].n-input.n-input-status\:warning,input[type=password].n-input.n-input-status\:warning,input[type=search].n-input.n-input-status\:warning,input[type=tel].n-input.n-input-status\:warning,input[type=text].n-input.n-input-status\:warning,input[type=url].n-input.n-input-status\:warning,textarea.n-input.n-input-status\:warning{border-color:var(--input-border-color-warning);color:var(--input-color-warning)}.n-input.n-input-status\:disabled,input[type=email].n-input.n-input-status\:disabled,input[type=email].n-input:disabled,input[type=number].n-input.n-input-status\:disabled,input[type=number].n-input:disabled,input[type=password].n-input.n-input-status\:disabled,input[type=password].n-input:disabled,input[type=search].n-input.n-input-status\:disabled,input[type=search].n-input:disabled,input[type=tel].n-input.n-input-status\:disabled,input[type=tel].n-input:disabled,input[type=text].n-input.n-input-status\:disabled,input[type=text].n-input:disabled,input[type=url].n-input.n-input-status\:disabled,input[type=url].n-input:disabled,textarea.n-input.n-input-status\:disabled,textarea.n-input:disabled{background-color:rgba(var(--rgb-base-2),.6);border-color:var(--color-base-4);color:rgba(var(--rgb-base-10),.27);cursor:not-allowed}.n-input::placeholder{color:var(--color-base-5);font-size:var(--font-size-2);font-weight:var(--font-weight-1);letter-spacing:-.02em;line-height:150%}.n-input.n-input-status\:disabled::placeholder,.n-input:disabled::placeholder{color:rgba(var(--rgb-base-10),.27)}label:has(+.n-input){align-items:center;display:flex;font-size:var(--font-size-2);font-weight:var(--font-weight-2);letter-spacing:-.02em;line-height:150%;margin-right:var(--space-2)}.n-input+label{align-items:center;display:flex;font-size:var(--font-size-2);font-weight:var(--font-weight-2);letter-spacing:-.02em;line-height:150%;margin-left:var(--space-2)}label:has(.n-input){align-items:center;display:flex;font-size:var(--font-size-2);font-weight:var(--font-weight-2);gap:var(--space-2);letter-spacing:-.02em;line-height:150%;width:100%}label:has(.n-input.n-input-label\:top){align-items:start;flex-direction:column;gap:var(--space-1)}label:has(.n-input.n-input-label\:bottom){align-items:start;flex-direction:column-reverse;gap:var(--space-1)}:is(.n-header,.n-header\:sticky){--header-height:64px;--header-border-width:1px;--header-border-color:var(--color-base-3);--header-padding:var(--space-4);align-items:center;box-shadow:1px 1px 1px var(--header-border-color,--color-base-3);display:flex;flex-direction:row;flex-shrink:0;grid-area:header;height:var(--header-height,64px);justify-content:start;padding:0 var(--header-padding,var(--space-4));position:relative;>:is(h1,.title){font-size:24px;font-weight:700}>:is(.nav,nav){display:flex;position:absolute;right:var(--space-4);>ul{align-items:center;display:flex;>li>a{vertical-align:top}}>ul.hide{display:none}>ul.show{display:flex}}>.content{align-items:center;display:flex;flex-direction:row;justify-content:start;margin:0 auto;max-width:var(--header-content-width,1200px);position:relative;width:100%;>:is(h1,.title){font-size:24px;font-weight:700}>:is(.nav,nav){display:flex;position:absolute;right:0;>ul{align-items:center;display:flex;>li>a{vertical-align:top}}}>ul.hide{display:none}>ul.show{display:flex}}}.n-header\:sticky{position:sticky;top:0;width:100%;z-index:1000}.n-header.content-pos\:left{>.content{margin:initial}}.n-header.content-pos\:center{>.content{margin:0 auto}}.n-header.content-pos\:right{>.content{margin:0 0 0 auto}}.n-header.menu-pos\:right{>:is(.nav,nav){left:auto;right:var(--space-4)}>.content{>:is(.nav,nav){left:auto;right:0}}}.n-header.menu-pos\:left{>:is(.nav,nav){left:0;right:auto}>.content{>:is(.nav,nav){left:0;right:auto}}}.n-header.logo-pos\:left{>.title,>h1{margin:0 auto 0 0}>.content{>:is(.title,h1){margin:0 auto 0 0}}}.n-header.logo-pos\:center{>.title,>h1{margin:0 auto}>.content{>:is(.title,h1){margin:0 auto}}}.n-header.logo-pos\:right{>.title,>h1{margin:0 0 0 auto}>.content{>.title,>h1{margin:0 0 0 auto}}}.n-header .mobile-menu{background:var(--color-base-1);border:1px solid var(--color-base-3);border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.15);display:none;min-width:200px;position:absolute;right:0;top:100%;z-index:1001}.n-header .mobile-menu.is\:open{display:flex;flex-direction:column}.n-header .mobile-menu-header{align-items:center;display:flex;justify-content:flex-end;padding:.5rem}.n-header .mobile-menu-title{font-size:1.25rem;font-weight:600;margin:0}.n-header .mobile-menu-content{padding:1rem}.n-header .mobile-menu\:1{background:var(--color-base-1);border:1px solid var(--color-base-3);border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.15);display:none;min-width:200px;position:absolute;right:0;top:100%;z-index:1001}.n-header .mobile-menu\:1.is\:open{display:flex;flex-direction:column}.n-header .mobile-menu\:2{background:var(--color-base-1);border-top:1px solid var(--color-base-3);bottom:0;box-shadow:0 -4px 12px rgba(0,0,0,.15);left:0;padding:1rem;position:fixed;right:0;transform:translateY(100%);transition:transform .3s ease;z-index:1001}.n-header .mobile-menu\:2.is\:open{transform:translateY(0)}.n-header .mobile-menu\:3{background:rgba(0,0,0,.8);bottom:0;display:none;flex-direction:column;left:0;position:fixed;right:0;top:0;z-index:1001}.n-footer,.n-header .mobile-menu\:3.is\:open{display:flex}.n-footer{border-top:var(--border-width,1px) solid var(--border-color,--color-base-3);flex-direction:column;flex-shrink:0;height:var(--footer-height,auto);padding:var(--footer-padding,var(--space-5))}.n-modal{--modal-border-radius:16px;--modal-border:none;--modal-box-shadow:rgba(0,0,0,.08) 0 16px 20px -4px,rgba(0,0,0,.03) 0 8px 8px -4px;--modal-z-index:1200;background-color:rgba(0,0,0,.5);background-color:var(--color-base-1);border:var(--modal-border);border-radius:var(--modal-border-radius);box-shadow:var(--modal-box-shadow);content:"";height:100vh;left:0;max-width:90vw;padding:16px 24px;position:fixed;position:fixed;right:50%;top:0;top:50%;transform:translate(50%,-50%);width:100vw;z-index:var(--modal-z-index,10);z-index:var(--modal-z-index)}:root{--heading-font-size:var(--font-size-7)}.n-heading{align-items:center;display:flex;font-size:var(--heading-font-size);font-weight:700;unicode-bidi:isolate;.heading-truncate{word-wrap:normal;text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;>a{word-wrap:normal;text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}.heading-overflow-clamp{text-wrap:nowrap;-webkit-box-orient:vertical;-webkit-line-clamp:1;display:-webkit-box;overflow:hidden;width:100%}}.n-table{--n-table-bg-color:var(--color-base-1);background-color:var(--n-table-bg-color);border-collapse:collapse;table-layout:fixed;width:100%;>thead{--n-thead-bg-color:var(--color-base-2);background-color:var(--n-thead-bg-color)}>:is(thead,tbody)>tr{--n-tr-height:40px;--n-tr-border-color:var(--color-base-3);border-top:1px solid var(--n-tr-border-color);height:var(--n-tr-height);position:relative}>:is(thead,tbody)>tr>:is(th,td){text-align:center;vertical-align:middle;img,input{vertical-align:middle}&:has(img){padding:8px}}>tbody>tr:nth-child(odd):has(.n-row-expander:checked)
|
|
4
4
|
label:has(.n-row-expander):before{content:"\e5c5";font-family:Material Symbols Outlined;font-size:24px}>tbody>tr:nth-child(odd):has(.n-row-expander:checked)+tr{display:table-row}}.n-table\:expandable{>tbody>tr:nth-child(odd):not(:has(.n-row-expander))>td:last-child:after{align-items:center;background-color:rgba(var(--rgb-base-1),.7);color:red;content:"오류 : n-table:expandable은 n-row-expander가 필요합니다.";display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}>tbody>tr:nth-child(odd):has(.n-row-expander:checked)
|
|
5
5
|
label:has(.n-row-expander):before{content:"\e5c7";font-family:Material Symbols Outlined;font-size:24px}>tbody>tr:nth-child(odd):has(.n-row-expander:not(:checked))+tr{display:none}>tbody>tr:nth-child(odd):has(.n-row-expander:not(:checked))
|
|
6
|
-
label:has(.n-row-expander):before{content:"\e5c5"}>tbody>tr:nth-child(odd):has(.n-row-expander:checked)+tr{display:table-row;>td{line-height:normal;overflow:hidden;padding:10px;text-align:start}}}.n-list{--gap:var(--space-2);--sp-color:var(--color-base-5);--sp-bg-image:none;--sp-dot-bg-size:3px 4px;--sp-dot-width:3px;--icon-color-active:var(--color-main-2);--icon-color-hover:var(--color-base-3);--bar-color-active:var(--color-main-2);--bar-color-hover:var(--color-base-3);--bg-color-hover:rgba(var(--rgb-base-2),0.3);--text-color-active:inherit}@media (prefers-color-scheme:dark){.n-list{--sp-color:var(--color-base-7,#333a44);--icon-color-active:var(--color-main-2);--icon-color-hover:var(--color-base-3);--bar-color-active:var(--color-main-2);--bar-color-hover:var(--color-base-3);--bg-color-hover:rgba(var(--rgb-base-8),0.3);--text-color-active:inherit}}.n-list{align-items:center;display:flex;flex-direction:row;text-overflow:ellipsis;&>*{align-items:center;box-sizing:border-box;display:flex;justify-content:center;padding:var(--space-2) var(--space-4);position:relative}&.hover>:hover{background-color:var(--bg-color-hover)}&.list-sep,&.list-sep\:dashed,&.list-sep\:dot,&.list-sep\:dotted,&.list-sep\:solid,&.list-seperator,&.list-seperator\:dashed,&.list-seperator\:dot,&.list-seperator\:dotted,&.list-seperator\:solid{gap:var(--gap)}&.list-sep>*+:before,&.list-sep\:dashed>*+:before,&.list-sep\:dot>*+:before,&.list-sep\:dotted>*+:before,&.list-sep\:solid>*+:before,&.list-seperator>*+:before,&.list-seperator\:dashed>*+:before,&.list-seperator\:dot>*+:before,&.list-seperator\:dotted>*+:before,&.list-seperator\:solid>*+:before{background-image:var(--sp-bg-image);background-repeat:repeat-y;background-size:1px 4px;bottom:25%;content:"";left:calc(var(--gap)*-.7);pointer-events:none;position:absolute;top:25%;width:1px}&.list-sep\:none,&.list-seperator\:none{&>*+:before{display:none}}&.list-sep\:solid,&.list-seperator\:solid{&>*+:before{--sp-bg-image:linear-gradient(to bottom,var(--sp-color) 100%,transparent 100%)}}&.list-sep\:dotted,&.list-seperator\:dotted{&>*+:before{--sp-bg-image:linear-gradient(to bottom,var(--sp-color) 50%,transparent 50%)}}&.list-sep\:dot,&.list-seperator\:dot{&>*+:before{--sp-bg-image:radial-gradient(circle,var(--sp-color) 1.5px,transparent 1.6px);background-image:linear-gradient(to bottom,var(--sp-color) 50%,transparent 50%);background-repeat:no-repeat;background-size:var(--sp-dot-bg-size);bottom:45%;top:45%;width:var(--sp-dot-width)}}&.list-sep\:dashed,&.list-seperator\:dashed{&>*+:before{background-image:linear-gradient(to bottom,var(--sp-color) 50%,transparent 50%)}}&.list-fit\:fill>*{flex:1 0 auto}&.list-fit\:shrink>*{flex:0 1 auto;min-width:0}&.list-fit\:noshrink{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}&.list-fit\:content>*,&.list-fit\:noshrink>*{flex:0 0 auto}&.list-fit\:wrap>*{flex-wrap:wrap}&.list-fit\:nowrap>*{flex-wrap:nowrap}&.list-vertical-align\:left{justify-content:flex-start}&.list-vertical-align\:center{justify-content:center}&.list-vertical-align\:right{justify-content:flex-end}&.active,&.active\:bar,&.active\:color{&>*{cursor:pointer;transition:background-color .3s ease,color .3s ease,opacity .3s ease;& label,input{cursor:pointer}&.active,&:has(input:checked){background-color:var(--color-background-onactive);color:var(--text-color-active)}}}&.active\:bar{&>*{&.active{background-color:transparent;color:var(--text-color-active);& .n-icon{color:var(--icon-color-active)}}&:hover{background-color:transparent;& .n-icon{color:var(--icon-color-hover)}}&:hover:after{background-color:var(--bar-color-hover)}&.active:after,&:hover:after{bottom:0;content:"";height:3px;left:0;opacity:1;position:absolute;right:0}&.active:after{background-color:var(--bar-color-active)}&:not(.active):not(:hover):after{opacity:0}}}&.list-dir\:column,&.list-direction\:column{--gap:0;align-items:flex-start;flex-direction:column;&>*{display:flex;justify-content:flex-start;width:100%}&>*+:before{display:none}&.list-sep,&.list-sep\:dashed,&.list-sep\:dot,&.list-sep\:dotted,&.list-sep\:solid,&.list-seperator,&.list-seperator\:dashed,&.list-seperator\:dot,&.list-seperator\:dotted,&.list-seperator\:solid{&>*+:before{background-image:linear-gradient(to right,var(--sp-color) 50%,transparent 50%);background-repeat:repeat-x;background-size:4px 1px;content:"";display:block;height:1px;left:0;pointer-events:none;position:absolute;right:0;top:0;width:auto}}&.list-sep\:none,&.list-seperator\:none{&>*+:before{display:none}}&.list-sep\:solid,&.list-seperator\:solid{&>*+:before{background-image:linear-gradient(to right,var(--sp-color) 100%,transparent 100%);background-size:100% 1px}}&.list-sep\:dotted,&.list-seperator\:dotted{&>*+:before{background-image:linear-gradient(to right,var(--sp-color) 50%,transparent 50%);background-size:4px 1px}}&.list-sep\:dashed,&.list-seperator\:dashed{&>*+:before{background-image:linear-gradient(to right,var(--sp-color) 50%,transparent 50%);background-size:8px 1px}}&.list-align\:left>*{justify-content:flex-start}&.list-align\:center>*{justify-content:center}&.list-align\:right>*{justify-content:flex-end}&.list-valign\:top>*,&.list-vertical-align\:top>*{align-items:flex-start}&.list-valign\:center>*,&.list-vertical-align\:center>*{align-items:center}&.list-valign\:bottom>*,&.list-vertical-align\:bottom>*{align-items:flex-end}}& .w\:grow{flex-grow:1}&.list\:aside-menu{flex-direction:column;overflow:hidden;width:100%;&>*{align-items:center;border:none;display:flex;flex-shrink:0;justify-content:flex-start;overflow:hidden;padding:10px;width:100%}}}.n-list\:wrap{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}.n-list\:dl{display:flex;flex-direction:column;>div{display:flex;flex-direction:row;padding:var(--space-2) 0;>dt{font-weight:700;&:after{content:":"}}>dd{flex-grow:1;margin-left:var(--space-2)}}>div:last-child{border-bottom:none}}.n-list\:dl.dl-sperator\:solid{>div{border-bottom:1px solid var(--color-base-5)}}.n-list\:dl.dl-sperator\:ruled{>div{border-bottom:1px dashed var(--color-base-5)}}@media (hover:hover) and (pointer:fine){.n-list{&.list\:aside-menu{&>li:hover{background-color:var(--color-hover-bg);color:var(--color-hover-text)}}}}.list\:cols{--column-width:300px;display:grid;gap:var(--space-2);grid-template-columns:repeat(auto-fill,minmax(var(--column-width),1fr));&.column-width\:1{--column-width:250px}&.column-width\:2{--column-width:300px}&.column-width\:3{--column-width:350px}&.column-width\:4{--column-width:400px}&.column-width\:5{--column-width:450px}&.column-width\:6{--column-width:500px}&.column-width\:auto{--column-width:auto}&.column-width\:100p{--column-width:100%}&.column-width\:50p{--column-width:50%}&.column-width\:33p{--column-width:33.33%}&.column-width\:25p{--column-width:25%}}:root{--icon-size:24px;--icon-family:"Material Symbols Outlined";--icon-color:var(--color-base-9);--icon-variation-settings:"FILL" 0}@media (prefers-color-scheme:dark){:root{--icon-color:var(--color-base-2)}}.n-icon{align-items:center;display:inline-flex;height:var(--icon-size);overflow:hidden;transition:all .2s ease-in-out;visibility:visible;width:var(--icon-size);&:before{align-items:center;color:inherit;content:"";display:inline-flex;flex-shrink:0;font-family:var(--icon-family);font-size:var(--icon-size);font-variation-settings:var(--icon-variation-settings);height:var(--icon-size);overflow:hidden;vertical-align:top;width:var(--icon-size)}&.hover:not(.n-deco):hover{background-color:var(--color-base-3);border-radius:50%;transform:scale(1.4);&:before{transform:scale(.72)}}.icon-style\:outlined:before{--icon-family:"Material Symbols Outlined"}.icon-style\:filled:before{--icon-variation-settings:"FILL" 1}.icon-style\:rounded:before{--icon-family:"Material Symbols Rounded"}.icon-style\:sharp:before{--icon-family:"Material Symbols Sharp"}.icon-color\:main-1:before{--icon-color:var(--color-main-1)}.icon-color\:main-2:before{--icon-color:var(--color-main-2)}.icon-color\:main-3:before{--icon-color:var(--color-main-3)}.icon-color\:sub-1:before{--icon-color:var(--color-sub-1)}.icon-color\:sub-2:before{--icon-color:var(--color-sub-2)}.icon-color\:sub-3:before{--icon-color:var(--color-sub-3)}.icon-color\:accent-1:before{--icon-color:var(--color-accent-1)}.icon-color\:accent-2:before{--icon-color:var(--color-accent-2)}.icon-color\:accent-3:before{--icon-color:var(--color-accent-3)}.icon-color\:base-1:before{--icon-color:var(--color-base-1)}.icon-color\:base-2:before{--icon-color:var(--color-base-2)}.icon-color\:base-3:before{--icon-color:var(--color-base-3)}.icon-color\:base-4:before{--icon-color:var(--color-base-4)}.icon-color\:base-5:before{--icon-color:var(--color-base-5)}.icon-color\:base-6:before{--icon-color:var(--color-base-6)}.icon-color\:base-7:before{--icon-color:var(--color-base-7)}.icon-color\:base-8:before{--icon-color:var(--color-base-8)}.icon-color\:base-9:before{--icon-color:var(--color-base-9)}.icon-color\:base-10:before{--icon-color:var(--color-base-10)}.icon-size\:1{--icon-size:var(--size-1)}.icon-size\:2{--icon-size:var(--size-2)}.icon-size\:3{--icon-size:var(--size-3)}.icon-size\:4{--icon-size:var(--size-4)}.icon-size\:5{--icon-size:var(--size-5)}.icon-size\:6{--icon-size:var(--size-6)}.icon-size\:7{--icon-size:var(--size-7)}.icon-size\:8{--icon-size:var(--size-8)}.icon-size\:9{--icon-size:var(--size-9)}.icon-size\:10{--icon-size:var(--size-10)}.icon-size\:11{--icon-size:var(--size-11)}.icon-size\:12{--icon-size:var(--size-12)}.icon-size\:13{--icon-size:var(--size-13)}}@media (min-width:640px){.sm\:n-icon{align-items:center;display:inline-flex;height:var(--icon-size);overflow:hidden;width:var(--icon-size);&:before{content:"\e87d";font-family:Material Symbols Outlined;font-size:var(--icon-size)}&.icon-color\:main-1:before{color:var(--color-main-1)}&.icon-color\:main-2:before{color:var(--color-main-2)}&.icon-color\:main-3:before{color:var(--color-main-3)}&.icon-color\:sub-1:before{color:var(--color-sub-1)}&.icon-color\:sub-2:before{color:var(--color-sub-2)}&.icon-color\:sub-3:before{color:var(--color-sub-3)}&.icon-color\:accent-1:before{color:var(--color-accent-1)}&.icon-color\:accent-2:before{color:var(--color-accent-2)}&.icon-color\:accent-3:before{color:var(--color-accent-3)}&.icon-color\:base-1:before{color:var(--color-base-1)}&.icon-color\:base-2:before{color:var(--color-base-2)}&.icon-color\:base-3:before{color:var(--color-base-3)}&.icon-color\:base-4:before{color:var(--color-base-4)}&.icon-color\:base-5:before{color:var(--color-base-5)}&.icon-color\:base-6:before{color:var(--color-base-6)}&.icon-color\:base-7:before{color:var(--color-base-7)}&.icon-color\:base-8:before{color:var(--color-base-8)}&.icon-color\:base-9:before{color:var(--color-base-9)}&.icon-color\:base-10:before{color:var(--color-base-10)}&.icon-size\:1{--icon-size:var(--size-1)}&.icon-size\:2{--icon-size:var(--size-2)}&.icon-size\:3{--icon-size:var(--size-3)}&.icon-size\:4{--icon-size:var(--size-4)}&.icon-size\:5{--icon-size:var(--size-5)}&.icon-size\:6{--icon-size:var(--size-6)}&.icon-size\:7{--icon-size:var(--size-7)}&.icon-size\:8{--icon-size:var(--size-8)}&.icon-size\:9{--icon-size:var(--size-9)}&.icon-size\:10{--icon-size:var(--size-10)}&.icon-size\:11{--icon-size:var(--size-11)}&.icon-size\:12{--icon-size:var(--size-12)}&.icon-size\:13{--icon-size:var(--size-13)}&.icon-size\:xs:before{font-size:var(--font-size-xs)}&.icon-size\:sm:before{font-size:var(--font-size-sm)}&.icon-size\:base:before{font-size:var(--font-size-base)}&.icon-size\:lg:before{font-size:var(--font-size-lg)}&.icon-size\:xl:before{font-size:var(--font-size-xl)}&.icon-size\:2xl:before{font-size:var(--font-size-2xl)}&.icon-size\:3xl:before{font-size:var(--font-size-3xl)}&.icon-size\:4xl:before{font-size:var(--font-size-4xl)}}}@media (min-width:768px){.md\:n-icon{align-items:center;display:inline-flex;height:var(--icon-size);overflow:hidden;width:var(--icon-size);&.icon-size\:1{--icon-size:var(--size-1)}&.icon-size\:2{--icon-size:var(--size-2)}&.icon-size\:3{--icon-size:var(--size-3)}&.icon-size\:4{--icon-size:var(--size-4)}&.icon-size\:5{--icon-size:var(--size-5)}&.icon-size\:6{--icon-size:var(--size-6)}&.icon-size\:7{--icon-size:var(--size-7)}&.icon-size\:8{--icon-size:var(--size-8)}&.icon-size\:9{--icon-size:var(--size-9)}&.icon-size\:10{--icon-size:var(--size-10)}&.icon-size\:11{--icon-size:var(--size-11)}&.icon-size\:12{--icon-size:var(--size-12)}&.icon-size\:13{--icon-size:var(--size-13)}&:before{font-family:Material Symbols Outlined;font-size:var(--icon-size)}}}@media (min-width:1024px){.lg\:n-icon{align-items:center;display:inline-flex;height:var(--icon-size);overflow:hidden;width:var(--icon-size);&.icon-size\:1{--icon-size:var(--size-1)}&.icon-size\:2{--icon-size:var(--size-2)}&.icon-size\:3{--icon-size:var(--size-3)}&.icon-size\:4{--icon-size:var(--size-4)}&.icon-size\:5{--icon-size:var(--size-5)}&.icon-size\:6{--icon-size:var(--size-6)}&.icon-size\:7{--icon-size:var(--size-7)}&.icon-size\:8{--icon-size:var(--size-8)}&.icon-size\:9{--icon-size:var(--size-9)}&.icon-size\:10{--icon-size:var(--size-10)}&.icon-size\:11{--icon-size:var(--size-11)}&.icon-size\:12{--icon-size:var(--size-12)}&.icon-size\:13{--icon-size:var(--size-13)}&:before{font-family:Material Symbols Outlined;font-size:var(--icon-size)}&.icon-color\:main-1:before{color:var(--color-main-1)}&.icon-color\:main-2:before{color:var(--color-main-2)}&.icon-color\:main-3:before{color:var(--color-main-3)}&.icon-color\:sub-1:before{color:var(--color-sub-1)}&.icon-color\:sub-2:before{color:var(--color-sub-2)}&.icon-color\:sub-3:before{color:var(--color-sub-3)}&.icon-color\:accent-1:before{color:var(--color-accent-1)}&.icon-color\:accent-2:before{color:var(--color-accent-2)}&.icon-color\:accent-3:before{color:var(--color-accent-3)}&.icon-color\:base-1:before{color:var(--color-base-1)}&.icon-color\:base-2:before{color:var(--color-base-2)}&.icon-color\:base-3:before{color:var(--color-base-3)}&.icon-color\:base-4:before{color:var(--color-base-4)}&.icon-color\:base-5:before{color:var(--color-base-5)}&.icon-color\:base-6:before{color:var(--color-base-6)}&.icon-color\:base-7:before{color:var(--color-base-7)}&.icon-color\:base-8:before{color:var(--color-base-8)}&.icon-color\:base-9:before{color:var(--color-base-9)}&.icon-color\:base-10:before{color:var(--color-base-10)}&.icon-size\:xs:before{font-size:var(--font-size-xs)}&.icon-size\:sm:before{font-size:var(--font-size-sm)}&.icon-size\:base:before{font-size:var(--font-size-base)}&.icon-size\:lg:before{font-size:var(--font-size-lg)}&.icon-size\:xl:before{font-size:var(--font-size-xl)}&.icon-size\:2xl:before{font-size:var(--font-size-2xl)}&.icon-size\:3xl:before{font-size:var(--font-size-3xl)}&.icon-size\:4xl:before{font-size:var(--font-size-4xl)}}}@media (min-width:1280px){.xl\:n-icon{align-items:center;display:inline-flex;height:var(--icon-size);overflow:hidden;width:var(--icon-size)}.xl\:icon-size\:1{--icon-size:var(--size-1)}.xl\:icon-size\:2{--icon-size:var(--size-2)}.xl\:icon-size\:3{--icon-size:var(--size-3)}.xl\:icon-size\:4{--icon-size:var(--size-4)}.xl\:icon-size\:5{--icon-size:var(--size-5)}.xl\:icon-size\:6{--icon-size:var(--size-6)}.xl\:icon-size\:7{--icon-size:var(--size-7)}.xl\:icon-size\:8{--icon-size:var(--size-8)}.xl\:icon-size\:9{--icon-size:var(--size-9)}.xl\:icon-size\:10{--icon-size:var(--size-10)}.xl\:icon-size\:11{--icon-size:var(--size-11)}.xl\:icon-size\:12{--icon-size:var(--size-12)}.xl\:icon-size\:13{--icon-size:var(--size-13)}.xl\:n-icon:before{font-family:Material Symbols Outlined;font-size:var(--icon-size)}.xl\:icon-color\:main-1:before{color:var(--color-main-1)}.xl\:icon-color\:main-2:before{color:var(--color-main-2)}.xl\:icon-color\:main-3:before{color:var(--color-main-3)}.xl\:icon-color\:sub-1:before{color:var(--color-sub-1)}.xl\:icon-color\:sub-2:before{color:var(--color-sub-2)}.xl\:icon-color\:sub-3:before{color:var(--color-sub-3)}.xl\:icon-color\:accent-1:before{color:var(--color-accent-1)}.xl\:icon-color\:accent-2:before{color:var(--color-accent-2)}.xl\:icon-color\:accent-3:before{color:var(--color-accent-3)}.xl\:icon-color\:base-1:before{color:var(--color-base-1)}.xl\:icon-color\:base-2:before{color:var(--color-base-2)}.xl\:icon-color\:base-3:before{color:var(--color-base-3)}.xl\:icon-color\:base-4:before{color:var(--color-base-4)}.xl\:icon-color\:base-5:before{color:var(--color-base-5)}.xl\:icon-color\:base-6:before{color:var(--color-base-6)}.xl\:icon-color\:base-7:before{color:var(--color-base-7)}.xl\:icon-color\:base-8:before{color:var(--color-base-8)}.xl\:icon-color\:base-9:before{color:var(--color-base-9)}.xl\:icon-color\:base-10:before{color:var(--color-base-10)}.xl\:icon-size\:xs:before{font-size:var(--font-size-xs)}.xl\:icon-size\:sm:before{font-size:var(--font-size-sm)}.xl\:icon-size\:base:before{font-size:var(--font-size-base)}.xl\:icon-size\:lg:before{font-size:var(--font-size-lg)}.xl\:icon-size\:xl:before{font-size:var(--font-size-xl)}.xl\:icon-size\:2xl:before{font-size:var(--font-size-2xl)}.xl\:icon-size\:3xl:before{font-size:var(--font-size-3xl)}.xl\:icon-size\:4xl:before{font-size:var(--font-size-4xl)}}.icon\:home:before{content:"\e88a"}.icon\:menu:before{content:"\e5d2"}.icon\:close:before{content:"\e5cd"}.icon\:arrow_back:before{content:"\e5c4"}.icon\:arrow_forward:before{content:"\e5c8"}.icon\:expand_more:before{content:"\e5cf"}.icon\:expand_less:before{content:"\e5ce"}.icon\:chevron_left:before{content:"\e5cb"}.icon\:chevron_right:before{content:"\e5cc"}.icon\:more_vert:before{content:"\e5d4"}.icon\:more_horiz:before{content:"\e5d3"}.icon\:refresh:before{content:"\e5d5"}.icon\:settings:before{content:"\e8b8"}.icon\:apps:before{content:"\e5c3"}.icon\:launch:before{content:"\e895"}.icon\:add:before{content:"\e145"}.icon\:remove:before{content:"\e15b"}.icon\:edit:before{content:"\e3c9"}.icon\:delete:before{content:"\e872"}.icon\:save:before{content:"\e161"}.icon\:check:before{content:"\e5ca"}.icon\:clear:before{content:"\e14c"}.icon\:cancel:before{content:"\e5c9"}.icon\:done:before{content:"\e876"}.icon\:search:before{content:"\e8b6"}.icon\:share:before{content:"\e80d"}.icon\:download:before{content:"\e2c4"}.icon\:upload:before{content:"\e2c6"}.icon\:copy:before{content:"\e14d"}.icon\:visibility:before{content:"\e8f4"}.icon\:visibility_off:before{content:"\e8f5"}.icon\:lock:before{content:"\e897"}.icon\:lock_open:before{content:"\e898"}.icon\:sync:before{content:"\e627"}.icon\:info:before{content:"\e88e"}.icon\:email:before{content:"\e0be"}.icon\:phone:before{content:"\e0cd"}.icon\:chat:before{content:"\e0b7"}.icon\:notifications:before{content:"\e7f4"}.icon\:send:before{content:"\e163"}.icon\:reply:before{content:"\e15e"}.icon\:help:before{content:"\e887"}.icon\:feedback:before{content:"\e87f"}.icon\:play_arrow:before{content:"\e037"}.icon\:pause:before{content:"\e034"}.icon\:stop:before{content:"\e047"}.icon\:volume_up:before{content:"\e050"}.icon\:volume_off:before{content:"\e04f"}.icon\:mic:before{content:"\e029"}.icon\:mic_off:before{content:"\e02b"}.icon\:folder:before{content:"\e2c7"}.icon\:folder_open:before{content:"\e2c8"}.icon\:attach_file:before{content:"\e226"}.icon\:cloud:before{content:"\e2bd"}.icon\:description:before{content:"\e873"}.icon\:person:before{content:"\e7fd"}.icon\:people:before{content:"\e7fb"}.icon\:favorite:before{content:"\e87d"}.icon\:star:before{content:"\e838"}.icon\:thumb_up:before{content:"\e8dc"}.n-btn{--line-height:1.4em;--font-size:14px;--padding:0.3em 0.7em;--bd-radius:6px;--bd-color:var(--color-base-4);--bd-color-hover:var(--color-base-8);--bd-color-active:var(--color-main-2);--bg-color:var(--color-base-3);--bg-color-hover:transparent;--bg-color-active:rgba(var(--rgb-main-2),0.7);--text-color:var(--color-base-8);--text-color-hover:var(--color-base-7);--text-color-active:var(--color-accent-2);--text-indent:-999px}@media (prefers-color-scheme:dark){.n-btn{--bd-color:var(--color-base-3);--bd-color-hover:var(--color-base-7);--bd-color-active:var(--color-base-9);--bg-color:var(--color-base-7);--bg-color-hover:transparent;--bg-color-active:rgba(var(--rgb-main-1),0.7);--text-color:var(--color-base-2);--text-color-hover:var(--color-base-2);--text-color-active:var(--color-accent-1)}}.n-btn{align-items:center;background-color:var(--bg-color);border:1px solid var(--bd-color);border-radius:var(--bd-radius);box-sizing:border-box;color:var(--text-color);cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--font-size,14px);font-weight:400;height:auto;justify-content:center;line-height:var(--line-height);padding:var(--padding);position:relative;transition:background-color .15s ease,border-color .15s ease,color .15s ease;user-select:none;white-space:nowrap;width:auto;&:before{align-items:center;display:inline-flex;font-family:Material Symbols Outlined;font-size:var(--icon-size);height:var(--icon-size);justify-content:center;overflow:hidden;width:var(--icon-size)}&:hover{background-color:var(--bg-color-hover);border-color:var(--bd-color-hover);color:var(--text-color-hover);text-decoration:none;transition:background-color .4s ease,border-color .4s ease,color .4s ease}&:active{color:var(--text-color-active)}&:focus-visible{outline:2px solid var(--bd-color-active);outline-offset:1px}&.n-icon:not(.n-deco){--padding:4px;text-indent:-999px;&:before{text-indent:0}}&.n-icon.n-deco{text-indent:0}&.btn\:rounded{--bd-radius:8px}&.btn\:circle{--bd-radius:50%}&.btn\:badge{--font-size:var(--size-5);--bd-radius:0.6em;--padding:0.2em 0.4em}&.disabled{--text-color:var(--color-base-1);--text-color-hover:var(--color-base-5);--text-color-active:var(--color-base-5);--bd-color:var(--color-base-5);--bd-color-hover:var(--color-base-5);--bd-color-active:var(--color-base-5);--bg-color:var(--color-base-4);--bg-color-hover:var(--color-base-3);--bg-color-active:var(--color-base-3)}&.btn-size\:1{--font-size:var(--size-6)}&.btn-size\:2{--font-size:var(--size-7)}&.btn-size\:3{--font-size:var(--size-8)}&.btn-size\:4{--font-size:var(--size-9)}&.btn-size\:5{--font-size:var(--size-10)}&.btn-size\:6{--font-size:var(--size-11)}&.btn-size\:7{--font-size:var(--size-12)}&.btn-size\:8{--font-size:var(--size-13)}&.btn-size\:9{--font-size:var(--size-14)}&.btn-size\:ex{--font-size:var(--size-15)}&.btn-size\:inline{--padding:0;--line-height:1em}&.btn-size\:small{--font-size:var(--size-1);--padding:0.1em 0.2em;--line-height:1em}&.btn-color\:main-1{--bg-color:var(--color-main-1);--bd-color:var(--color-main-1);--text-color:var(--color-base-1);&:hover{--bg-color-hover:var(--color-main-2);--bd-color-hover:var(--color-main-2);--text-color:var(--color-base-1)}&:active{--bg-color:var(--color-main-3);--bd-color:var(--color-main-3);--text-color:var(--color-main-3)}}&.btn-color\:sub-1{--bg-color:var(--color-sub-1);--bd-color:var(--color-sub-1);--text-color:var(--color-base-1);&:hover{--bd-color-hover:var(--color-sub-2);--text-color:var(--color-base-1)}&:active{--bd-color:var(--color-sub-3);--text-color:var(--color-sub-3)}}&.btn-color\:accent-1{--bg-color:var(--color-accent-1);--bd-color:var(--color-accent-1);--text-color:var(--color-base-1);&:hover{--bd-color-hover:var(--color-accent-2);--text-color:var(--color-base-1)}&:active{--bg-color:var(--color-accent-3);--bd-color:var(--color-accent-3);--text-color:var(--color-accent-3)}}}.n-deco{--deco-gap:4px;align-items:center;display:inline-flex;gap:var(--deco-gap);justify-content:center;text-align:center;text-indent:0;width:auto;&:before{align-items:center;display:inline-flex;flex-shrink:0;font-family:Material Symbols Outlined;font-size:var(--icon-size);height:var(--icon-size);justify-content:center;overflow:hidden;width:var(--icon-size)}}.deco-pos\:bottom,.deco-pos\:top{flex-direction:column;gap:0;height:auto}:is(li,dt,dd,td,th,div):has(>.deco-pos\:bottom),:is(li,dt,dd,td,th,div):has(>.deco-pos\:top){height:auto;padding-bottom:5px;padding-top:5px}.deco-pos\:left:before,.deco-pos\:top:before{order:unset}.deco-pos\:bottom:before,.deco-pos\:right:before{order:1}.deco-pos\:bottom,.deco-pos\:top{width:auto}:not(.n-deco).deco-pos\:bottom,:not(.n-deco).deco-pos\:left,:not(.n-deco).deco-pos\:right,:not(.n-deco).deco-pos\:top{align-items:center;display:flex;flex-direction:row;justify-content:center;overflow:visible;position:relative}:not(.n-deco).deco-pos\:bottom:before,:not(.n-deco).deco-pos\:left:before,:not(.n-deco).deco-pos\:right:before,:not(.n-deco).deco-pos\:top:before{border:1px solid red;color:red;content:"Error: n-deco is missing.";display:flex;font-family:Arial,Helvetica,sans-serif;font-size:12px;height:100%;left:0;position:absolute;top:0;width:150px}.deco-gap\:0{--deco-gap:0px}.deco-gap\:1{--deco-gap:5px}.deco-gap\:2{--deco-gap:10px}@media screen and (min-width:576px){.sm\:n-deco{--deco-gap:10px;--deco-size:24px;gap:var(--deco-gap);text-align:center;text-indent:0;width:auto}.sm\:deco-pos\:bottom,.sm\:deco-pos\:top{flex-direction:column;gap:0;height:auto}:is(li,dt,dd,td,th,div):has(>.sm\:deco-pos\:bottom),:is(li,dt,dd,td,th,div):has(>.sm\:deco-pos\:top){height:auto;padding-bottom:5px;padding-top:5px}.sm\:deco-pos\:left,.sm\:deco-pos\:top{&:before{order:unset}}.sm\:deco-pos\:bottom:before,.sm\:deco-pos\:right:before{order:1}.sm\:deco-pos\:left,.sm\:deco-pos\:right{flex-direction:row;gap:var(--deco-gap)}.sm\:deco-gap\:0{--deco-gap:0px}.sm\:deco-gap\:1{--deco-gap:5px}.sm\:deco-gap\:2{--deco-gap:10px}}@media screen and (min-width:768px){.md\:n-deco{--deco-gap:10px;--deco-size:24px;gap:var(--deco-gap);text-align:center;text-indent:0;width:auto}.md\:deco-pos\:bottom,.md\:deco-pos\:top{flex-direction:column;gap:0;height:auto}:is(li,dt,dd,td,th,div):has(>.md\:deco-pos\:bottom),:is(li,dt,dd,td,th,div):has(>.md\:deco-pos\:top){height:auto;padding-bottom:5px;padding-top:5px}.md\:deco-pos\:left,.md\:deco-pos\:top{&:before{order:unset}}.md\:deco-pos\:bottom:before,.md\:deco-pos\:right:before{order:1}.md\:deco-pos\:left,.md\:deco-pos\:right{flex-direction:row;gap:var(--deco-gap)}.md\:deco-gap\:0{--deco-gap:0px}.md\:deco-gap\:1{--deco-gap:5px}.md\:deco-gap\:2{--deco-gap:10px}}@media screen and (min-width:992px){.lg\:n-deco{--deco-gap:10px;--deco-size:24px;gap:var(--deco-gap);text-align:center;text-indent:0;width:auto}.lg\:deco-pos\:bottom,.lg\:deco-pos\:top{flex-direction:column;gap:0;height:auto}:is(li,dt,dd,td,th,div):has(>.lg\:deco-pos\:bottom),:is(li,dt,dd,td,th,div):has(>.lg\:deco-pos\:top){height:auto;padding-bottom:5px;padding-top:5px}.lg\:deco-pos\:left,.lg\:deco-pos\:top{&:before{order:unset}}.lg\:deco-pos\:bottom:before,.lg\:deco-pos\:right:before{order:1}.lg\:deco-pos\:left,.lg\:deco-pos\:right{flex-direction:row;gap:var(--deco-gap)}.lg\:deco-gap\:0{--deco-gap:0px}.lg\:deco-gap\:1{--deco-gap:5px}.lg\:deco-gap\:2{--deco-gap:10px}}@media screen and (min-width:1200px){.xl\:n-deco{--deco-gap:10px;--deco-size:24px;gap:var (--deco-gap);text-align:center;text-indent:0;width:auto}.xl\:deco-pos\:bottom,.xl\:deco-pos\:top{flex-direction:column;gap:0;height:auto}:is(li,dt,dd,td,th,div):has(>.xl\:deco-pos\:bottom),:is(li,dt,dd,td,th,div):has(>.xl\:deco-pos\:top){height:auto;padding-bottom:5px;padding-top:5px}.xl\:deco-pos\:left,.xl\:deco-pos\:top{&:before{order:unset}}.xl\:deco-pos\:bottom:before,.xl\:deco-pos\:right:before{order:1}.xl\:deco-pos\:left,.xl\:deco-pos\:right{flex-direction:row;gap:var(--deco-gap)}.xl\:deco-gap\:0{--deco-gap:0px}.xl\:deco-gap\:1{--deco-gap:5px}.xl\:deco-gap\:2{--deco-gap:10px}}
|
|
6
|
+
label:has(.n-row-expander):before{content:"\e5c5"}>tbody>tr:nth-child(odd):has(.n-row-expander:checked)+tr{display:table-row;>td{line-height:normal;overflow:hidden;padding:10px;text-align:start}}}.n-list{--gap:var(--space-2);--sp-color:var(--color-base-5);--sp-bg-image:none;--sp-dot-bg-size:3px 4px;--sp-dot-width:3px;--icon-color-active:var(--color-main-2);--icon-color-hover:var(--color-base-3);--bar-color-active:var(--color-main-2);--bar-color-hover:var(--color-base-3);--bg-color-hover:rgba(var(--rgb-base-2),0.3);--text-color-active:inherit}@media (prefers-color-scheme:dark){.n-list{--sp-color:var(--color-base-7,#333a44);--icon-color-active:var(--color-main-2);--icon-color-hover:var(--color-base-3);--bar-color-active:var(--color-main-2);--bar-color-hover:var(--color-base-3);--bg-color-hover:rgba(var(--rgb-base-8),0.3);--text-color-active:inherit}}.n-list{align-items:center;display:flex;flex-direction:row;text-overflow:ellipsis;&>*{align-items:center;box-sizing:border-box;display:flex;justify-content:center;padding:var(--space-2) var(--space-4);position:relative}&.hover>:hover{background-color:var(--bg-color-hover)}&.list-sep,&.list-sep\:dashed,&.list-sep\:dot,&.list-sep\:dotted,&.list-sep\:solid,&.list-seperator,&.list-seperator\:dashed,&.list-seperator\:dot,&.list-seperator\:dotted,&.list-seperator\:solid{gap:var(--gap)}&.list-sep>*+:before,&.list-sep\:dashed>*+:before,&.list-sep\:dot>*+:before,&.list-sep\:dotted>*+:before,&.list-sep\:solid>*+:before,&.list-seperator>*+:before,&.list-seperator\:dashed>*+:before,&.list-seperator\:dot>*+:before,&.list-seperator\:dotted>*+:before,&.list-seperator\:solid>*+:before{background-image:var(--sp-bg-image);background-repeat:repeat-y;background-size:1px 4px;bottom:25%;content:"";left:calc(var(--gap)*-.7);pointer-events:none;position:absolute;top:25%;width:1px}&.list-sep\:none,&.list-seperator\:none{&>*+:before{display:none}}&.list-sep\:solid,&.list-seperator\:solid{&>*+:before{--sp-bg-image:linear-gradient(to bottom,var(--sp-color) 100%,transparent 100%)}}&.list-sep\:dotted,&.list-seperator\:dotted{&>*+:before{--sp-bg-image:linear-gradient(to bottom,var(--sp-color) 50%,transparent 50%)}}&.list-sep\:dot,&.list-seperator\:dot{&>*+:before{--sp-bg-image:radial-gradient(circle,var(--sp-color) 1.5px,transparent 1.6px);background-image:linear-gradient(to bottom,var(--sp-color) 50%,transparent 50%);background-repeat:no-repeat;background-size:var(--sp-dot-bg-size);bottom:45%;top:45%;width:var(--sp-dot-width)}}&.list-sep\:dashed,&.list-seperator\:dashed{&>*+:before{background-image:linear-gradient(to bottom,var(--sp-color) 50%,transparent 50%)}}&.list-fit\:fill>*{flex:1 0 auto}&.list-fit\:shrink>*{flex:0 1 auto;min-width:0}&.list-fit\:noshrink{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}&.list-fit\:content>*,&.list-fit\:noshrink>*{flex:0 0 auto}&.list-fit\:wrap>*{flex-wrap:wrap}&.list-fit\:nowrap>*{flex-wrap:nowrap}&.list-vertical-align\:left{justify-content:flex-start}&.list-vertical-align\:center{justify-content:center}&.list-vertical-align\:right{justify-content:flex-end}&.active,&.active\:bar,&.active\:color{&>*{cursor:pointer;transition:background-color .3s ease,color .3s ease,opacity .3s ease;& label,input{cursor:pointer}&.active,&:has(input:checked){background-color:var(--color-background-onactive);color:var(--text-color-active)}}}&.active\:bar{&>*{&.active{background-color:transparent;color:var(--text-color-active);& .n-icon{color:var(--icon-color-active)}}&:hover{background-color:transparent;& .n-icon{color:var(--icon-color-hover)}}&:hover:after{background-color:var(--bar-color-hover)}&.active:after,&:hover:after{bottom:0;content:"";height:3px;left:0;opacity:1;position:absolute;right:0}&.active:after{background-color:var(--bar-color-active)}&:not(.active):not(:hover):after{opacity:0}}}&.list-dir\:column,&.list-direction\:column{--gap:0;align-items:flex-start;flex-direction:column;&>*{display:flex;justify-content:flex-start;width:100%}&>*+:before{display:none}&.list-sep,&.list-sep\:dashed,&.list-sep\:dot,&.list-sep\:dotted,&.list-sep\:solid,&.list-seperator,&.list-seperator\:dashed,&.list-seperator\:dot,&.list-seperator\:dotted,&.list-seperator\:solid{&>*+:before{background-image:linear-gradient(to right,var(--sp-color) 50%,transparent 50%);background-repeat:repeat-x;background-size:4px 1px;content:"";display:block;height:1px;left:0;pointer-events:none;position:absolute;right:0;top:0;width:auto}}&.list-sep\:none,&.list-seperator\:none{&>*+:before{display:none}}&.list-sep\:solid,&.list-seperator\:solid{&>*+:before{background-image:linear-gradient(to right,var(--sp-color) 100%,transparent 100%);background-size:100% 1px}}&.list-sep\:dotted,&.list-seperator\:dotted{&>*+:before{background-image:linear-gradient(to right,var(--sp-color) 50%,transparent 50%);background-size:4px 1px}}&.list-sep\:dashed,&.list-seperator\:dashed{&>*+:before{background-image:linear-gradient(to right,var(--sp-color) 50%,transparent 50%);background-size:8px 1px}}&.list-align\:left>*{justify-content:flex-start}&.list-align\:center>*{justify-content:center}&.list-align\:right>*{justify-content:flex-end}&.list-valign\:top>*,&.list-vertical-align\:top>*{align-items:flex-start}&.list-valign\:center>*,&.list-vertical-align\:center>*{align-items:center}&.list-valign\:bottom>*,&.list-vertical-align\:bottom>*{align-items:flex-end}}& .w\:grow{flex-grow:1}&.list\:aside-menu{flex-direction:column;overflow:hidden;width:100%;&>*{align-items:center;border:none;display:flex;flex-shrink:0;justify-content:flex-start;overflow:hidden;padding:10px;width:100%}}}.n-list\:wrap{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}.n-list\:dl{display:flex;flex-direction:column;>div{display:flex;flex-direction:row;padding:var(--space-2) 0;>dt{font-weight:700;&:after{content:":"}}>dd{flex-grow:1;margin-left:var(--space-2)}}>div:last-child{border-bottom:none}}.n-list\:dl.dl-sperator\:solid{>div{border-bottom:1px solid var(--color-base-5)}}.n-list\:dl.dl-sperator\:ruled{>div{border-bottom:1px dashed var(--color-base-5)}}@media (hover:hover) and (pointer:fine){.n-list{&.list\:aside-menu{&>li:hover{background-color:var(--color-hover-bg);color:var(--color-hover-text)}}}}.list\:cols{--column-width:300px;display:grid;gap:var(--space-2);grid-template-columns:repeat(auto-fill,minmax(var(--column-width),1fr));&.column-width\:1{--column-width:250px}&.column-width\:2{--column-width:300px}&.column-width\:3{--column-width:350px}&.column-width\:4{--column-width:400px}&.column-width\:5{--column-width:450px}&.column-width\:6{--column-width:500px}&.column-width\:auto{--column-width:auto}&.column-width\:100p{--column-width:100%}&.column-width\:50p{--column-width:50%}&.column-width\:33p{--column-width:33.33%}&.column-width\:25p{--column-width:25%}}:root{--icon-size:24px;--icon-family:"Material Symbols Outlined";--icon-color:var(--color-base-9);--icon-variation-settings:"FILL" 0}@media (prefers-color-scheme:dark){:root{--icon-color:var(--color-base-2)}}.n-icon{align-items:center;display:inline-flex;height:var(--icon-size);overflow:hidden;transition:all .2s ease-in-out;visibility:visible;width:var(--icon-size);&:before{align-items:center;color:inherit;content:"";display:inline-flex;flex-shrink:0;font-family:var(--icon-family);font-size:var(--icon-size);font-variation-settings:var(--icon-variation-settings);height:var(--icon-size);overflow:hidden;vertical-align:top;width:var(--icon-size)}&.hover:not(.n-deco):hover{background-color:var(--color-base-3);border-radius:50%;transform:scale(1.4);&:before{transform:scale(.72)}}.icon-style\:outlined:before{--icon-family:"Material Symbols Outlined"}.icon-style\:filled:before{--icon-variation-settings:"FILL" 1}.icon-style\:rounded:before{--icon-family:"Material Symbols Rounded"}.icon-style\:sharp:before{--icon-family:"Material Symbols Sharp"}.icon-color\:main-1:before{--icon-color:var(--color-main-1)}.icon-color\:main-2:before{--icon-color:var(--color-main-2)}.icon-color\:main-3:before{--icon-color:var(--color-main-3)}.icon-color\:sub-1:before{--icon-color:var(--color-sub-1)}.icon-color\:sub-2:before{--icon-color:var(--color-sub-2)}.icon-color\:sub-3:before{--icon-color:var(--color-sub-3)}.icon-color\:accent-1:before{--icon-color:var(--color-accent-1)}.icon-color\:accent-2:before{--icon-color:var(--color-accent-2)}.icon-color\:accent-3:before{--icon-color:var(--color-accent-3)}.icon-color\:base-1:before{--icon-color:var(--color-base-1)}.icon-color\:base-2:before{--icon-color:var(--color-base-2)}.icon-color\:base-3:before{--icon-color:var(--color-base-3)}.icon-color\:base-4:before{--icon-color:var(--color-base-4)}.icon-color\:base-5:before{--icon-color:var(--color-base-5)}.icon-color\:base-6:before{--icon-color:var(--color-base-6)}.icon-color\:base-7:before{--icon-color:var(--color-base-7)}.icon-color\:base-8:before{--icon-color:var(--color-base-8)}.icon-color\:base-9:before{--icon-color:var(--color-base-9)}.icon-color\:base-10:before{--icon-color:var(--color-base-10)}.icon-size\:1{--icon-size:var(--size-1)}.icon-size\:2{--icon-size:var(--size-2)}.icon-size\:3{--icon-size:var(--size-3)}.icon-size\:4{--icon-size:var(--size-4)}.icon-size\:5{--icon-size:var(--size-5)}.icon-size\:6{--icon-size:var(--size-6)}.icon-size\:7{--icon-size:var(--size-7)}.icon-size\:8{--icon-size:var(--size-8)}.icon-size\:9{--icon-size:var(--size-9)}.icon-size\:10{--icon-size:var(--size-10)}.icon-size\:11{--icon-size:var(--size-11)}.icon-size\:12{--icon-size:var(--size-12)}.icon-size\:13{--icon-size:var(--size-13)}}@media (min-width:640px){.sm\:n-icon{align-items:center;display:inline-flex;height:var(--icon-size);overflow:hidden;width:var(--icon-size);&:before{content:"\e87d";font-family:Material Symbols Outlined;font-size:var(--icon-size)}&.icon-color\:main-1:before{color:var(--color-main-1)}&.icon-color\:main-2:before{color:var(--color-main-2)}&.icon-color\:main-3:before{color:var(--color-main-3)}&.icon-color\:sub-1:before{color:var(--color-sub-1)}&.icon-color\:sub-2:before{color:var(--color-sub-2)}&.icon-color\:sub-3:before{color:var(--color-sub-3)}&.icon-color\:accent-1:before{color:var(--color-accent-1)}&.icon-color\:accent-2:before{color:var(--color-accent-2)}&.icon-color\:accent-3:before{color:var(--color-accent-3)}&.icon-color\:base-1:before{color:var(--color-base-1)}&.icon-color\:base-2:before{color:var(--color-base-2)}&.icon-color\:base-3:before{color:var(--color-base-3)}&.icon-color\:base-4:before{color:var(--color-base-4)}&.icon-color\:base-5:before{color:var(--color-base-5)}&.icon-color\:base-6:before{color:var(--color-base-6)}&.icon-color\:base-7:before{color:var(--color-base-7)}&.icon-color\:base-8:before{color:var(--color-base-8)}&.icon-color\:base-9:before{color:var(--color-base-9)}&.icon-color\:base-10:before{color:var(--color-base-10)}&.icon-size\:1{--icon-size:var(--size-1)}&.icon-size\:2{--icon-size:var(--size-2)}&.icon-size\:3{--icon-size:var(--size-3)}&.icon-size\:4{--icon-size:var(--size-4)}&.icon-size\:5{--icon-size:var(--size-5)}&.icon-size\:6{--icon-size:var(--size-6)}&.icon-size\:7{--icon-size:var(--size-7)}&.icon-size\:8{--icon-size:var(--size-8)}&.icon-size\:9{--icon-size:var(--size-9)}&.icon-size\:10{--icon-size:var(--size-10)}&.icon-size\:11{--icon-size:var(--size-11)}&.icon-size\:12{--icon-size:var(--size-12)}&.icon-size\:13{--icon-size:var(--size-13)}&.icon-size\:xs:before{font-size:var(--font-size-xs)}&.icon-size\:sm:before{font-size:var(--font-size-sm)}&.icon-size\:base:before{font-size:var(--font-size-base)}&.icon-size\:lg:before{font-size:var(--font-size-lg)}&.icon-size\:xl:before{font-size:var(--font-size-xl)}&.icon-size\:2xl:before{font-size:var(--font-size-2xl)}&.icon-size\:3xl:before{font-size:var(--font-size-3xl)}&.icon-size\:4xl:before{font-size:var(--font-size-4xl)}}}@media (min-width:768px){.md\:n-icon{align-items:center;display:inline-flex;height:var(--icon-size);overflow:hidden;width:var(--icon-size);&.icon-size\:1{--icon-size:var(--size-1)}&.icon-size\:2{--icon-size:var(--size-2)}&.icon-size\:3{--icon-size:var(--size-3)}&.icon-size\:4{--icon-size:var(--size-4)}&.icon-size\:5{--icon-size:var(--size-5)}&.icon-size\:6{--icon-size:var(--size-6)}&.icon-size\:7{--icon-size:var(--size-7)}&.icon-size\:8{--icon-size:var(--size-8)}&.icon-size\:9{--icon-size:var(--size-9)}&.icon-size\:10{--icon-size:var(--size-10)}&.icon-size\:11{--icon-size:var(--size-11)}&.icon-size\:12{--icon-size:var(--size-12)}&.icon-size\:13{--icon-size:var(--size-13)}&:before{font-family:Material Symbols Outlined;font-size:var(--icon-size)}}}@media (min-width:1024px){.lg\:n-icon{align-items:center;display:inline-flex;height:var(--icon-size);overflow:hidden;width:var(--icon-size);&.icon-size\:1{--icon-size:var(--size-1)}&.icon-size\:2{--icon-size:var(--size-2)}&.icon-size\:3{--icon-size:var(--size-3)}&.icon-size\:4{--icon-size:var(--size-4)}&.icon-size\:5{--icon-size:var(--size-5)}&.icon-size\:6{--icon-size:var(--size-6)}&.icon-size\:7{--icon-size:var(--size-7)}&.icon-size\:8{--icon-size:var(--size-8)}&.icon-size\:9{--icon-size:var(--size-9)}&.icon-size\:10{--icon-size:var(--size-10)}&.icon-size\:11{--icon-size:var(--size-11)}&.icon-size\:12{--icon-size:var(--size-12)}&.icon-size\:13{--icon-size:var(--size-13)}&:before{font-family:Material Symbols Outlined;font-size:var(--icon-size)}&.icon-color\:main-1:before{color:var(--color-main-1)}&.icon-color\:main-2:before{color:var(--color-main-2)}&.icon-color\:main-3:before{color:var(--color-main-3)}&.icon-color\:sub-1:before{color:var(--color-sub-1)}&.icon-color\:sub-2:before{color:var(--color-sub-2)}&.icon-color\:sub-3:before{color:var(--color-sub-3)}&.icon-color\:accent-1:before{color:var(--color-accent-1)}&.icon-color\:accent-2:before{color:var(--color-accent-2)}&.icon-color\:accent-3:before{color:var(--color-accent-3)}&.icon-color\:base-1:before{color:var(--color-base-1)}&.icon-color\:base-2:before{color:var(--color-base-2)}&.icon-color\:base-3:before{color:var(--color-base-3)}&.icon-color\:base-4:before{color:var(--color-base-4)}&.icon-color\:base-5:before{color:var(--color-base-5)}&.icon-color\:base-6:before{color:var(--color-base-6)}&.icon-color\:base-7:before{color:var(--color-base-7)}&.icon-color\:base-8:before{color:var(--color-base-8)}&.icon-color\:base-9:before{color:var(--color-base-9)}&.icon-color\:base-10:before{color:var(--color-base-10)}&.icon-size\:xs:before{font-size:var(--font-size-xs)}&.icon-size\:sm:before{font-size:var(--font-size-sm)}&.icon-size\:base:before{font-size:var(--font-size-base)}&.icon-size\:lg:before{font-size:var(--font-size-lg)}&.icon-size\:xl:before{font-size:var(--font-size-xl)}&.icon-size\:2xl:before{font-size:var(--font-size-2xl)}&.icon-size\:3xl:before{font-size:var(--font-size-3xl)}&.icon-size\:4xl:before{font-size:var(--font-size-4xl)}}}@media (min-width:1280px){.xl\:n-icon{align-items:center;display:inline-flex;height:var(--icon-size);overflow:hidden;width:var(--icon-size)}.xl\:icon-size\:1{--icon-size:var(--size-1)}.xl\:icon-size\:2{--icon-size:var(--size-2)}.xl\:icon-size\:3{--icon-size:var(--size-3)}.xl\:icon-size\:4{--icon-size:var(--size-4)}.xl\:icon-size\:5{--icon-size:var(--size-5)}.xl\:icon-size\:6{--icon-size:var(--size-6)}.xl\:icon-size\:7{--icon-size:var(--size-7)}.xl\:icon-size\:8{--icon-size:var(--size-8)}.xl\:icon-size\:9{--icon-size:var(--size-9)}.xl\:icon-size\:10{--icon-size:var(--size-10)}.xl\:icon-size\:11{--icon-size:var(--size-11)}.xl\:icon-size\:12{--icon-size:var(--size-12)}.xl\:icon-size\:13{--icon-size:var(--size-13)}.xl\:n-icon:before{font-family:Material Symbols Outlined;font-size:var(--icon-size)}.xl\:icon-color\:main-1:before{color:var(--color-main-1)}.xl\:icon-color\:main-2:before{color:var(--color-main-2)}.xl\:icon-color\:main-3:before{color:var(--color-main-3)}.xl\:icon-color\:sub-1:before{color:var(--color-sub-1)}.xl\:icon-color\:sub-2:before{color:var(--color-sub-2)}.xl\:icon-color\:sub-3:before{color:var(--color-sub-3)}.xl\:icon-color\:accent-1:before{color:var(--color-accent-1)}.xl\:icon-color\:accent-2:before{color:var(--color-accent-2)}.xl\:icon-color\:accent-3:before{color:var(--color-accent-3)}.xl\:icon-color\:base-1:before{color:var(--color-base-1)}.xl\:icon-color\:base-2:before{color:var(--color-base-2)}.xl\:icon-color\:base-3:before{color:var(--color-base-3)}.xl\:icon-color\:base-4:before{color:var(--color-base-4)}.xl\:icon-color\:base-5:before{color:var(--color-base-5)}.xl\:icon-color\:base-6:before{color:var(--color-base-6)}.xl\:icon-color\:base-7:before{color:var(--color-base-7)}.xl\:icon-color\:base-8:before{color:var(--color-base-8)}.xl\:icon-color\:base-9:before{color:var(--color-base-9)}.xl\:icon-color\:base-10:before{color:var(--color-base-10)}.xl\:icon-size\:xs:before{font-size:var(--font-size-xs)}.xl\:icon-size\:sm:before{font-size:var(--font-size-sm)}.xl\:icon-size\:base:before{font-size:var(--font-size-base)}.xl\:icon-size\:lg:before{font-size:var(--font-size-lg)}.xl\:icon-size\:xl:before{font-size:var(--font-size-xl)}.xl\:icon-size\:2xl:before{font-size:var(--font-size-2xl)}.xl\:icon-size\:3xl:before{font-size:var(--font-size-3xl)}.xl\:icon-size\:4xl:before{font-size:var(--font-size-4xl)}}.icon\:home:before{content:"\e88a"}.icon\:menu:before{content:"\e5d2"}.icon\:close:before{content:"\e5cd"}.icon\:arrow_back:before{content:"\e5c4"}.icon\:arrow_forward:before{content:"\e5c8"}.icon\:expand_more:before{content:"\e5cf"}.icon\:expand_less:before{content:"\e5ce"}.icon\:chevron_left:before{content:"\e5cb"}.icon\:chevron_right:before{content:"\e5cc"}.icon\:more_vert:before{content:"\e5d4"}.icon\:more_horiz:before{content:"\e5d3"}.icon\:refresh:before{content:"\e5d5"}.icon\:settings:before{content:"\e8b8"}.icon\:apps:before{content:"\e5c3"}.icon\:launch:before{content:"\e895"}.icon\:add:before{content:"\e145"}.icon\:remove:before{content:"\e15b"}.icon\:edit:before{content:"\e3c9"}.icon\:delete:before{content:"\e872"}.icon\:save:before{content:"\e161"}.icon\:check:before{content:"\e5ca"}.icon\:clear:before{content:"\e14c"}.icon\:cancel:before{content:"\e5c9"}.icon\:done:before{content:"\e876"}.icon\:search:before{content:"\e8b6"}.icon\:share:before{content:"\e80d"}.icon\:download:before{content:"\e2c4"}.icon\:upload:before{content:"\e2c6"}.icon\:copy:before{content:"\e14d"}.icon\:visibility:before{content:"\e8f4"}.icon\:visibility_off:before{content:"\e8f5"}.icon\:lock:before{content:"\e897"}.icon\:lock_open:before{content:"\e898"}.icon\:sync:before{content:"\e627"}.icon\:info:before{content:"\e88e"}.icon\:email:before{content:"\e0be"}.icon\:phone:before{content:"\e0cd"}.icon\:chat:before{content:"\e0b7"}.icon\:notifications:before{content:"\e7f4"}.icon\:send:before{content:"\e163"}.icon\:reply:before{content:"\e15e"}.icon\:help:before{content:"\e887"}.icon\:feedback:before{content:"\e87f"}.icon\:play_arrow:before{content:"\e037"}.icon\:pause:before{content:"\e034"}.icon\:stop:before{content:"\e047"}.icon\:volume_up:before{content:"\e050"}.icon\:volume_off:before{content:"\e04f"}.icon\:mic:before{content:"\e029"}.icon\:mic_off:before{content:"\e02b"}.icon\:folder:before{content:"\e2c7"}.icon\:folder_open:before{content:"\e2c8"}.icon\:attach_file:before{content:"\e226"}.icon\:cloud:before{content:"\e2bd"}.icon\:description:before{content:"\e873"}.icon\:person:before{content:"\e7fd"}.icon\:people:before{content:"\e7fb"}.icon\:favorite:before{content:"\e87d"}.icon\:star:before{content:"\e838"}.icon\:thumb_up:before{content:"\e8dc"}.n-btn{--line-height:1.4em;--font-size:14px;--padding:0.3em 0.7em;--bd-radius:6px;--bd-color:var(--color-base-3);--bd-color-hover:var(--color-base-5);--bd-color-active:var(--color-main-2);--bg-color:var(--color-base-1);--bg-color-hover:var(--color-base-2);--bg-color-active:rgba(var(--rgb-main-2),0.1);--text-color:var(--color-base-8);--text-color-hover:var(--color-base-9);--text-color-active:var(--color-main-2);--text-indent:-999px;--bg-image:none;--bg-blend-mode:normal;--hover-gradient:none}@media (prefers-color-scheme:dark){.n-btn{--bd-color:var(--color-base-6);--bd-color-hover:var(--color-base-5);--bd-color-active:var(--color-main-1);--bg-color:var(--color-base-8);--bg-color-hover:var(--color-base-7);--bg-color-active:rgba(var(--rgb-main-1),0.25);--text-color:var(--color-base-3);--text-color-hover:var(--color-base-2);--text-color-active:var(--color-main-1)}}.n-btn{align-items:center;background-blend-mode:var(--bg-blend-mode,normal);background-color:var(--bg-color);background-image:var(--bg-image,none);border:1px solid var(--bd-color);border-radius:var(--bd-radius);box-sizing:border-box;color:var(--text-color);cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--font-size,14px);font-weight:400;height:auto;justify-content:center;line-height:var(--line-height);padding:var(--padding);position:relative;transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .15s ease,box-shadow .15s ease,filter .15s ease;user-select:none;white-space:nowrap;width:auto;&:before{align-items:center;display:inline-flex;font-family:Material Symbols Outlined;font-size:var(--icon-size);height:var(--icon-size);justify-content:center;overflow:hidden;width:var(--icon-size)}&:hover{background-blend-mode:var(--bg-blend-mode);background-color:var(--bg-color-hover,var(--bg-color));background-image:var(--bg-image,none);border-color:var(--bd-color-hover);box-shadow:0 4px 12px rgba(var(--rgb-base-10),.15),0 2px 4px rgba(var(--rgb-base-10),.1);color:var(--text-color-hover);text-decoration:none;transform:scale(1.02);transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease,filter .2s ease}&:not(.btn-color\:main-1):not(.btn-color\:sub-1):not(.btn-color\:accent-1){--hover-gradient:linear-gradient(to bottom,var(--bg-color-hover),var(--bg-color-hover)),radial-gradient(circle at center,rgba(var(--rgb-main-2),0.1) 0%,transparent 60%);&:hover{--bg-image:var(--hover-gradient);--bg-blend-mode:overlay;filter:contrast(1.01) brightness(.98)}}&:active{box-shadow:0 1px 3px rgba(var(--rgb-base-10),.12);color:var(--text-color-active);transform:scale(.98);transition:background-color .1s ease,border-color .1s ease,color .1s ease,transform .1s ease,box-shadow .1s ease,filter .1s ease}&:not(.btn-color\:main-1):not(.btn-color\:sub-1):not(.btn-color\:accent-1):active{background-color:var(--bg-color-active,var(--bg-color));filter:brightness(.96)}&:focus-visible{outline:2px solid var(--bd-color-active);outline-offset:1px}&.n-icon:not(.n-deco){--padding:4px;text-indent:-999px;&:before{text-indent:0}}&.n-icon.n-deco{text-indent:0}&.btn\:rounded{--bd-radius:8px}&.btn\:circle{--bd-radius:50%}&.btn\:badge{--font-size:var(--size-5);--bd-radius:0.6em;--padding:0.2em 0.4em}&.disabled{--text-color:var(--color-base-1);--text-color-hover:var(--color-base-5);--text-color-active:var(--color-base-5);--bd-color:var(--color-base-5);--bd-color-hover:var(--color-base-5);--bd-color-active:var(--color-base-5);--bg-color:var(--color-base-4);--bg-color-hover:var(--color-base-3);--bg-color-active:var(--color-base-3)}&.btn-size\:1{--font-size:var(--size-6)}&.btn-size\:2{--font-size:var(--size-7)}&.btn-size\:3{--font-size:var(--size-8)}&.btn-size\:4{--font-size:var(--size-9)}&.btn-size\:5{--font-size:var(--size-10)}&.btn-size\:6{--font-size:var(--size-11)}&.btn-size\:7{--font-size:var(--size-12)}&.btn-size\:8{--font-size:var(--size-13)}&.btn-size\:9{--font-size:var(--size-14)}&.btn-size\:ex{--font-size:var(--size-15)}&.btn-size\:inline{--padding:0;--line-height:1em}&.btn-size\:small{--font-size:var(--size-1);--padding:0.1em 0.2em;--line-height:1em}&.btn-color\:main-1{--bg-color:var(--color-main-1);--bd-color:var(--color-main-1);--text-color:var(--color-base-1);--bg-color-hover:var(--color-main-1);--bd-color-hover:var(--color-main-1);--bg-image:none;--bg-blend-mode:normal;&:hover{--bg-color-hover:var(--color-main-2);--bd-color-hover:var(--color-main-2);box-shadow:0 4px 12px rgba(var(--rgb-main-2),.25),0 2px 4px rgba(var(--rgb-main-2),.2);filter:brightness(1.05);transform:scale(1.02)}&:active{--bg-color:var(--color-main-3);--bd-color:var(--color-main-3);box-shadow:0 1px 3px rgba(var(--rgb-main-3),.3);filter:brightness(.95);transform:scale(.98)}}&.btn-color\:sub-1{--bg-color:var(--color-sub-1);--bd-color:var(--color-sub-1);--text-color:var(--color-base-1);--bg-color-hover:var(--color-sub-1);--bd-color-hover:var(--color-sub-1);--bg-image:none;--bg-blend-mode:normal;&:hover{--bg-color-hover:var(--color-sub-2);--bd-color-hover:var(--color-sub-2);box-shadow:0 4px 12px rgba(var(--rgb-sub-2),.25),0 2px 4px rgba(var(--rgb-sub-2),.2);filter:brightness(1.05);transform:scale(1.02)}&:active{--bg-color:var(--color-sub-3);--bd-color:var(--color-sub-3);box-shadow:0 1px 3px rgba(var(--rgb-sub-3),.3);filter:brightness(.95);transform:scale(.98)}}&.btn-color\:accent-1{--bg-color:var(--color-accent-1);--bd-color:var(--color-accent-1);--text-color:var(--color-base-1);--bg-color-hover:var(--color-accent-1);--bd-color-hover:var(--color-accent-1);--text-color-hover:var(--color-base-1);--text-color-active:var(--color-base-1);--bg-image:none;--bg-blend-mode:normal;&:hover{--bg-color-hover:var(--color-accent-2);--bd-color-hover:var(--color-accent-2);box-shadow:0 4px 12px rgba(var(--rgb-accent-2),.25),0 2px 4px rgba(var(--rgb-accent-2),.2);filter:brightness(1.05);transform:scale(1.02)}&:active{--bg-color:var(--color-accent-3);--bd-color:var(--color-accent-3);box-shadow:0 1px 3px rgba(var(--rgb-accent-3),.3);filter:brightness(.95);transform:scale(.98)}}}.n-deco{--deco-gap:4px;align-items:center;display:inline-flex;gap:var(--deco-gap);justify-content:center;text-align:center;text-indent:0;width:auto;&:before{align-items:center;display:inline-flex;flex-shrink:0;font-family:Material Symbols Outlined;font-size:var(--icon-size);height:var(--icon-size);justify-content:center;overflow:hidden;width:var(--icon-size)}}.deco-pos\:bottom,.deco-pos\:top{flex-direction:column;gap:0;height:auto}:is(li,dt,dd,td,th,div):has(>.deco-pos\:bottom),:is(li,dt,dd,td,th,div):has(>.deco-pos\:top){height:auto;padding-bottom:5px;padding-top:5px}.deco-pos\:left:before,.deco-pos\:top:before{order:unset}.deco-pos\:bottom:before,.deco-pos\:right:before{order:1}.deco-pos\:bottom,.deco-pos\:top{width:auto}:not(.n-deco).deco-pos\:bottom,:not(.n-deco).deco-pos\:left,:not(.n-deco).deco-pos\:right,:not(.n-deco).deco-pos\:top{align-items:center;display:flex;flex-direction:row;justify-content:center;overflow:visible;position:relative}:not(.n-deco).deco-pos\:bottom:before,:not(.n-deco).deco-pos\:left:before,:not(.n-deco).deco-pos\:right:before,:not(.n-deco).deco-pos\:top:before{border:1px solid red;color:red;content:"Error: n-deco is missing.";display:flex;font-family:Arial,Helvetica,sans-serif;font-size:12px;height:100%;left:0;position:absolute;top:0;width:150px}.deco-gap\:0{--deco-gap:0px}.deco-gap\:1{--deco-gap:5px}.deco-gap\:2{--deco-gap:10px}@media screen and (min-width:576px){.sm\:n-deco{--deco-gap:10px;--deco-size:24px;gap:var(--deco-gap);text-align:center;text-indent:0;width:auto}.sm\:deco-pos\:bottom,.sm\:deco-pos\:top{flex-direction:column;gap:0;height:auto}:is(li,dt,dd,td,th,div):has(>.sm\:deco-pos\:bottom),:is(li,dt,dd,td,th,div):has(>.sm\:deco-pos\:top){height:auto;padding-bottom:5px;padding-top:5px}.sm\:deco-pos\:left,.sm\:deco-pos\:top{&:before{order:unset}}.sm\:deco-pos\:bottom:before,.sm\:deco-pos\:right:before{order:1}.sm\:deco-pos\:left,.sm\:deco-pos\:right{flex-direction:row;gap:var(--deco-gap)}.sm\:deco-gap\:0{--deco-gap:0px}.sm\:deco-gap\:1{--deco-gap:5px}.sm\:deco-gap\:2{--deco-gap:10px}}@media screen and (min-width:768px){.md\:n-deco{--deco-gap:10px;--deco-size:24px;gap:var(--deco-gap);text-align:center;text-indent:0;width:auto}.md\:deco-pos\:bottom,.md\:deco-pos\:top{flex-direction:column;gap:0;height:auto}:is(li,dt,dd,td,th,div):has(>.md\:deco-pos\:bottom),:is(li,dt,dd,td,th,div):has(>.md\:deco-pos\:top){height:auto;padding-bottom:5px;padding-top:5px}.md\:deco-pos\:left,.md\:deco-pos\:top{&:before{order:unset}}.md\:deco-pos\:bottom:before,.md\:deco-pos\:right:before{order:1}.md\:deco-pos\:left,.md\:deco-pos\:right{flex-direction:row;gap:var(--deco-gap)}.md\:deco-gap\:0{--deco-gap:0px}.md\:deco-gap\:1{--deco-gap:5px}.md\:deco-gap\:2{--deco-gap:10px}}@media screen and (min-width:992px){.lg\:n-deco{--deco-gap:10px;--deco-size:24px;gap:var(--deco-gap);text-align:center;text-indent:0;width:auto}.lg\:deco-pos\:bottom,.lg\:deco-pos\:top{flex-direction:column;gap:0;height:auto}:is(li,dt,dd,td,th,div):has(>.lg\:deco-pos\:bottom),:is(li,dt,dd,td,th,div):has(>.lg\:deco-pos\:top){height:auto;padding-bottom:5px;padding-top:5px}.lg\:deco-pos\:left,.lg\:deco-pos\:top{&:before{order:unset}}.lg\:deco-pos\:bottom:before,.lg\:deco-pos\:right:before{order:1}.lg\:deco-pos\:left,.lg\:deco-pos\:right{flex-direction:row;gap:var(--deco-gap)}.lg\:deco-gap\:0{--deco-gap:0px}.lg\:deco-gap\:1{--deco-gap:5px}.lg\:deco-gap\:2{--deco-gap:10px}}@media screen and (min-width:1200px){.xl\:n-deco{--deco-gap:10px;--deco-size:24px;gap:var (--deco-gap);text-align:center;text-indent:0;width:auto}.xl\:deco-pos\:bottom,.xl\:deco-pos\:top{flex-direction:column;gap:0;height:auto}:is(li,dt,dd,td,th,div):has(>.xl\:deco-pos\:bottom),:is(li,dt,dd,td,th,div):has(>.xl\:deco-pos\:top){height:auto;padding-bottom:5px;padding-top:5px}.xl\:deco-pos\:left,.xl\:deco-pos\:top{&:before{order:unset}}.xl\:deco-pos\:bottom:before,.xl\:deco-pos\:right:before{order:1}.xl\:deco-pos\:left,.xl\:deco-pos\:right{flex-direction:row;gap:var(--deco-gap)}.xl\:deco-gap\:0{--deco-gap:0px}.xl\:deco-gap\:1{--deco-gap:5px}.xl\:deco-gap\:2{--deco-gap:10px}}
|
package/dist/style.css
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
&>:where(aside,.n-aside,*>.n-aside){width:min-content}&.layout-aside-width\:slide-out{grid-template-columns:0 1fr;overflow-x:hidden;transition:grid-template-columns .5s ease;&>:where(aside,.n-aside,*>.n-aside){overflow:hidden;pointer-events:none;transform:translateX(-100%);z-index:-1}}&.layout-aside-width\:resizable>:where(aside,.n-aside,*>.n-aside):after{background-image:linear-gradient(to right,transparent 0,transparent 1px),linear-gradient(to right,transparent 0,transparent 1px),linear-gradient(to right,var(--color-base-4) 0,var(--color-base-4) 1px);background-position:1px 0,2px 0,0 0;background-repeat:repeat-y;background-size:1px 8px,1px 8px,1px 100%;content:"";cursor:ew-resize;height:100%;position:absolute;right:-2px;top:0;transition:background-image .2s ease;width:4px;z-index:10}&.layout-aside\:resizable>:where(aside,.n-aside,*>.n-aside):hover:after{background-image:linear-gradient(to right,transparent 0,transparent 1px),linear-gradient(to right,transparent 0,transparent 1px),linear-gradient(to right,var(--color-base-6) 0,var(--color-base-6) 1px);background-position:1px 0,2px 0,0 0;background-repeat:repeat-y;background-size:1px 6px,1px 6px,1px 100%}&.layout-aside\:resizable>:where(aside,.n-aside,*>.n-aside).resizing:after{background-image:linear-gradient(to right,transparent 0,transparent 1px),linear-gradient(to right,transparent 0,transparent 1px),linear-gradient(to right,var(--color-main-1) 0,var(--color-main-1) 1px);background-position:1px 0,2px 0,0 0;background-repeat:repeat-y;background-size:1px 4px,1px 4px,1px 100%}&.layout-aside-pos\:right{grid-template-areas:"header header" "main aside" "footer footer";grid-template-columns:1fr min-content;overflow-x:hidden;&>:where(aside,.n-aside,*>.n-aside){border-left:1px solid var(--border-color,--color-base-3);border-right:none}&.layout-aside-width\:slide-out{grid-template-columns:1fr 0;overflow-x:hidden;transition:grid-template-columns .5s ease;&>:where(aside,.n-aside,*>.n-aside){overflow:hidden;pointer-events:none;transform:translateX(100%);z-index:-1}}&.layout-aside-width\:resizable>:where(aside,.n-aside,*>.n-aside):after{background-image:linear-gradient(to left,transparent 0,transparent 1px),linear-gradient(to left,transparent 0,transparent 1px),linear-gradient(to left,var(--color-base-4) 0,var(--color-base-4) 1px);background-position:1px 0,2px 0,0 0;background-repeat:repeat-y;background-size:1px 8px,1px 8px,1px 100%;left:-2px;right:auto}&.layout-aside-width\:resizable>:where(aside,.n-aside,*>.n-aside):hover:after{background-image:linear-gradient(to left,transparent 0,transparent 1px),linear-gradient(to left,transparent 0,transparent 1px),linear-gradient(to left,var(--color-base-6) 0,var(--color-base-6) 1px);background-position:1px 0,2px 0,0 0;background-repeat:repeat-y;background-size:1px 6px,1px 6px,1px 100%}&.layout-aside-width\:resizable>:where(aside,.n-aside,*>.n-aside).resizing:after{background-image:linear-gradient(to left,transparent 0,transparent 1px),linear-gradient(to left,transparent 0,transparent 1px),linear-gradient(to left,var(--color-main-1) 0,var(--color-main-1) 1px);background-position:1px 0,2px 0,0 0;background-repeat:repeat-y;background-size:1px 4px,1px 4px,1px 100%}}}}@media (max-width:640px){.n-layout:has(>aside,>.n-aside).layout-aside-pos\:right{&.layout-aside-width\:responsive{grid-template-areas:"header header" "main aside" "footer footer";grid-template-columns:1fr min-content}}}.n-layout{&>.n-header:has(.n-aside-toggle:checked)~:where(aside,.n-aside,*>aside,*>.n-aside){background-color:var(--background-color,--color-base-1);height:100%;left:0;position:absolute;top:0;transform:translateX(-100%)}}@media (max-width:640px){.n-layout{&.layout-aside-width\:responsive{grid-template-areas:"header header" "aside main" "footer footer";grid-template-columns:min-content 1fr}}}.n-section{--padding:var(--space-4);--gap:var(--space-4);--bd-color:var(--color-base-5);--bd-color-hover:var(--color-base-8);--bd-width:1px;--bd-radius:var(--space-3);--title-color:var(--color-base-7);--title-size:var(--size-8);--title-fw:var(--font-weight-7);--bg-color-glass:rgba(var(--rgb-base-2),0.4);--bg-color-glass-hover:rgba(var(--rgb-base-4),0.4)}@media (prefers-color-scheme:dark){.n-section{--title-color:var(--color-base-1);--bd-color:var(--color-base-6);--bd-color-hover:var(--color-base-2);--bd-width:0.5px;--bg-color-glass:rgba(var(--rgb-base-8),0.4);--bg-color-glass-hover:rgba(var(--rgb-base-8),0.6)}}.n-section{display:flex;flex-direction:column;overflow:clip;&.hover:hover{cursor:pointer}&.section\:card{border:var(--bd-width) solid var(--bd-color);border-radius:var(--bd-radius);&.hover:hover{border:var(--border-width-1) solid var(--bd-color-hover)}}&.section\:glass{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:var(--bg-color-glass);transition:background .3s ease,backdrop-filter .3s ease,border .3s ease;&.hover:hover{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:var(--bg-color-glass-hover)}}&.section\:elevated{box-shadow:var(--shadow-lg);&.hover:hover{box-shadow:var(--shadow-xl)}}&>h1,&>header{border-bottom:var(--bd-width) solid var(--bd-color);max-width:100%;min-width:0;overflow:hidden;padding:var(--padding);text-overflow:ellipsis;white-space:nowrap;width:100%}&>h1,&>header,&>header>h1{align-items:center;color:var(--title-color);display:flex;font-size:var(--title-size);font-weight:var(--title-fw)}&>h1+*,&>header+*{max-height:2000px;opacity:1;overflow:hidden;padding:var(--padding);transition:max-height .6s ease,opacity .6s ease,padding .6s ease}&:has(.n-list.list-dir\:column),&:has(.n-list.list-direction\:column)>*{&>h1+*,&>header+*{padding:0}}&.content-toggle\:hide{&>h1,&>header{border-bottom:none}&>h1+*,&>header+*{max-height:0;opacity:0;padding-bottom:0;padding-top:0}}}:where(.n-frame,.n-frame\:ruled,.n-frame\:outlined){>h1,>header{align-items:center;display:flex;width:100%}>h1,>header>h1{font-size:var(--panel-header-fs,var(--font-size-7,16px));font-weight:var(--panel-header-fw,var(--font-weight-2,bold))}>:is(table,ul,dl,form,div,.content){align-items:var(--content-align,start);display:flex;flex-direction:var(--content-direction,column);justify-content:var(--content-justify,start);list-style:var(--list-style,circle);overflow:hidden;position:relative;width:var(--panel-content-width,100%);>:where(li,dt,dd,.item){align-items:start;display:flex;flex-direction:row;flex-direction:column;padding:1em 1.5em;width:100%}}}:where(.n-frame,.n-frame\:ruled,.n-frame\:outlined):has(>h1,>header){>:is(table,ul,dl,form,div,.content){padding-top:1em}}.list-title\:underline{>h1,>header{border-bottom:1px solid var(--panel-header-bd-bottom,var(--color-base-3));padding-bottom:10px}}.list-item-style\:circle{>:where(table,ul,dl,form,div,.content){list-style:var(--list-style,circle)}}.n-frame\:outlined.n-frame-item\:card{>:where(table,ul,dl,form,div,.content){>:where(li,dt,dd,section){align-items:start;flex-direction:column;padding:1em 1.5em}}}.n-frame\:outlined{>:where(table,ul,dl,form,div,.content){gap:1em;>:where(li,dt,dd,section){align-items:center;border:1px solid var(--panel-header-bd-bottom,var(--color-base-3));display:flex;min-height:40px;padding:0 10px}}}.n-frame\:outlined.outlined-gap\:1{>:where(table,ul,dl,form,div,.content){gap:var(--space-1,4px)}}.n-frame\:outlined.outlined-gap\:2{>:where(table,ul,dl,form,div,.content){gap:var(--space-2,8px)}}.n-frame\:ruled{>:where(table,ul,dl,form,div,.content){>:where(li,dt,dd){line-height:2.5em;position:relative}>:where(li,dt,dd,section):after{background-color:var(--panel-header-bd-bottom,var(--color-base-3));bottom:0;content:"";display:flex;height:1px;padding:0;position:absolute;width:100%}>:where(li,dt,dd):last-child:after{display:none;min-height:40px}}}.n-frame\:ruled:has(section):before{align-items:center;color:red;content:"ruled-list 클래스 박스 안에 section 태그를 포함할 수 없습니다.";display:flex;font-weight:700;justify-content:center;padding:20px 20px 0;width:100%}.n-form{--form-border-radius:16px;--form-padding:24px;--input-padding-x:12px;--input-input-height:36px;--input-textarea-min-height:58px;--input-border-radius:6px;--input-border-color:var(--color-base-3);--input-underline-border-width:1.6px;--input-border-color-focus:var(--color-sub-2);--input-border-color-success:#37b24d;--input-color-warning:var(--color-accent-1);--input-border-color-warning:var(--color-accent-1);display:flex;flex-direction:column;gap:var(--space-5);>div{display:flex;flex-direction:column;gap:5px;padding:5px 0;width:100%;label{display:flex;flex-direction:column;gap:5px;>span{display:inline-flex;font-weight:500;width:100%}>input[type=email],>input[type=number],>input[type=password],>input[type=search],>input[type=tel],>input[type=text],>input[type=url],>textarea{background-color:var(--color-base-1);border:1px solid var(--input-border-color);border-radius:var(--input-border-radius);box-shadow:0 1px 1.5px 0 rgba(0,0,0,.05);color:rgba(var(--rgb-base-7),.85);cursor:default;flex-grow:1;font-size:14px;line-height:150%;padding:4px var(--input-padding-x);transition:border .12s}>textarea{height:auto;min-height:100px;overflow-y:auto}}}&.n-label-pos\:left{>div{label{align-items:center;flex-direction:row;width:100%;>span{text-wrap:nowrap;display:inline-flex;justify-content:center;overflow:hidden;text-overflow:ellipsis " [..]";white-space:nowrap;width:20%}>span:after{content:" : "}input{flex-grow:1}}}}}.n-input{--input-padding-x:12px;--input-input-height:36px;--input-textarea-min-height:58px;--input-border-color:var(--color-base-3);--input-border-radius:6px;--input-underline-border-width:1.6px;--input-border-color-focus:var(--color-sub-2);--input-border-color-success:#37b24d;--input-color-warning:var(--color-accent-1);--input-border-color-warning:var(--color-accent-1)}.n-input,input[type=email].n-input,input[type=number].n-input,input[type=password].n-input,input[type=search].n-input,input[type=tel].n-input,input[type=text].n-input,input[type=url].n-input,textarea.n-input{background-color:var(--color-base-1);border:1px solid var(--input-border-color);border-radius:var(--input-border-radius);box-shadow:0 1px 1.5px 0 rgba(0,0,0,.05);color:rgba(var(--rgb-base-10),.85);padding:4px var(--input-padding-x);width:100%}.n-input,.n-input-type\:outline,.n-input\:outline,input[type=email].n-input,input[type=email].n-input-type\:outline,input[type=email].n-input\:outline,input[type=number].n-input,input[type=number].n-input-type\:outline,input[type=number].n-input\:outline,input[type=password].n-input,input[type=password].n-input-type\:outline,input[type=password].n-input\:outline,input[type=search].n-input,input[type=search].n-input-type\:outline,input[type=search].n-input\:outline,input[type=tel].n-input,input[type=tel].n-input-type\:outline,input[type=tel].n-input\:outline,input[type=text].n-input,input[type=text].n-input-type\:outline,input[type=text].n-input\:outline,input[type=url].n-input,input[type=url].n-input-type\:outline,input[type=url].n-input\:outline{height:var(--input-input-height)}.n-input-type\:underline,.n-input\:underline,input[type=email].n-input-type\:underline,input[type=email].n-input\:underline,input[type=number].n-input-type\:underline,input[type=number].n-input\:underline,input[type=password].n-input-type\:underline,input[type=password].n-input\:underline,input[type=search].n-input-type\:underline,input[type=search].n-input\:underline,input[type=tel].n-input-type\:underline,input[type=tel].n-input\:underline,input[type=text].n-input-type\:underline,input[type=text].n-input\:underline,input[type=url].n-input-type\:underline,input[type=url].n-input\:underline{background-color:transparent;border-left:none;border-radius:0;border-right:none;border-top:none;border-width:var(--input-underline-border-width);box-shadow:none;transition-duration:.2s;transition-property:border-color}textarea.n-input{height:100%;min-height:var(--input-textarea-min-height);resize:none}.n-input.n-input-status\:focus,input[type=email].n-input.n-input-status\:focus,input[type=email].n-input:focus,input[type=number].n-input.n-input-status\:focus,input[type=number].n-input:focus,input[type=password].n-input.n-input-status\:focus,input[type=password].n-input:focus,input[type=search].n-input.n-input-status\:focus,input[type=search].n-input:focus,input[type=tel].n-input.n-input-status\:focus,input[type=tel].n-input:focus,input[type=text].n-input.n-input-status\:focus,input[type=text].n-input:focus,input[type=url].n-input.n-input-status\:focus,input[type=url].n-input:focus,textarea.n-input.n-input-status\:focus,textarea.n-input:focus{border-color:var(--input-border-color-focus)}.n-input.n-input-status\:success,input[type=email].n-input.n-input-status\:success,input[type=number].n-input.n-input-status\:success,input[type=password].n-input.n-input-status\:success,input[type=search].n-input.n-input-status\:success,input[type=tel].n-input.n-input-status\:success,input[type=text].n-input.n-input-status\:success,input[type=url].n-input.n-input-status\:success,textarea.n-input.n-input-status\:success{border-color:var(--input-border-color-success)}.n-input.n-input-status\:warning,input[type=email].n-input.n-input-status\:warning,input[type=number].n-input.n-input-status\:warning,input[type=password].n-input.n-input-status\:warning,input[type=search].n-input.n-input-status\:warning,input[type=tel].n-input.n-input-status\:warning,input[type=text].n-input.n-input-status\:warning,input[type=url].n-input.n-input-status\:warning,textarea.n-input.n-input-status\:warning{border-color:var(--input-border-color-warning);color:var(--input-color-warning)}.n-input.n-input-status\:disabled,input[type=email].n-input.n-input-status\:disabled,input[type=email].n-input:disabled,input[type=number].n-input.n-input-status\:disabled,input[type=number].n-input:disabled,input[type=password].n-input.n-input-status\:disabled,input[type=password].n-input:disabled,input[type=search].n-input.n-input-status\:disabled,input[type=search].n-input:disabled,input[type=tel].n-input.n-input-status\:disabled,input[type=tel].n-input:disabled,input[type=text].n-input.n-input-status\:disabled,input[type=text].n-input:disabled,input[type=url].n-input.n-input-status\:disabled,input[type=url].n-input:disabled,textarea.n-input.n-input-status\:disabled,textarea.n-input:disabled{background-color:rgba(var(--rgb-base-2),.6);border-color:var(--color-base-4);color:rgba(var(--rgb-base-10),.27);cursor:not-allowed}.n-input::placeholder{color:var(--color-base-5);font-size:var(--font-size-2);font-weight:var(--font-weight-1);letter-spacing:-.02em;line-height:150%}.n-input.n-input-status\:disabled::placeholder,.n-input:disabled::placeholder{color:rgba(var(--rgb-base-10),.27)}label:has(+.n-input){align-items:center;display:flex;font-size:var(--font-size-2);font-weight:var(--font-weight-2);letter-spacing:-.02em;line-height:150%;margin-right:var(--space-2)}.n-input+label{align-items:center;display:flex;font-size:var(--font-size-2);font-weight:var(--font-weight-2);letter-spacing:-.02em;line-height:150%;margin-left:var(--space-2)}label:has(.n-input){align-items:center;display:flex;font-size:var(--font-size-2);font-weight:var(--font-weight-2);gap:var(--space-2);letter-spacing:-.02em;line-height:150%;width:100%}label:has(.n-input.n-input-label\:top){align-items:start;flex-direction:column;gap:var(--space-1)}label:has(.n-input.n-input-label\:bottom){align-items:start;flex-direction:column-reverse;gap:var(--space-1)}:is(.n-header,.n-header\:sticky){--header-height:64px;--header-border-width:1px;--header-border-color:var(--color-base-3);--header-padding:var(--space-4);align-items:center;box-shadow:1px 1px 1px var(--header-border-color,--color-base-3);display:flex;flex-direction:row;flex-shrink:0;grid-area:header;height:var(--header-height,64px);justify-content:start;padding:0 var(--header-padding,var(--space-4));position:relative;>:is(h1,.title){font-size:24px;font-weight:700}>:is(.nav,nav){display:flex;position:absolute;right:var(--space-4);>ul{align-items:center;display:flex;>li>a{vertical-align:top}}>ul.hide{display:none}>ul.show{display:flex}}>.content{align-items:center;display:flex;flex-direction:row;justify-content:start;margin:0 auto;max-width:var(--header-content-width,1200px);position:relative;width:100%;>:is(h1,.title){font-size:24px;font-weight:700}>:is(.nav,nav){display:flex;position:absolute;right:0;>ul{align-items:center;display:flex;>li>a{vertical-align:top}}}>ul.hide{display:none}>ul.show{display:flex}}}.n-header\:sticky{position:sticky;top:0;width:100%;z-index:1000}.n-header.content-pos\:left{>.content{margin:initial}}.n-header.content-pos\:center{>.content{margin:0 auto}}.n-header.content-pos\:right{>.content{margin:0 0 0 auto}}.n-header.menu-pos\:right{>:is(.nav,nav){left:auto;right:var(--space-4)}>.content{>:is(.nav,nav){left:auto;right:0}}}.n-header.menu-pos\:left{>:is(.nav,nav){left:0;right:auto}>.content{>:is(.nav,nav){left:0;right:auto}}}.n-header.logo-pos\:left{>.title,>h1{margin:0 auto 0 0}>.content{>:is(.title,h1){margin:0 auto 0 0}}}.n-header.logo-pos\:center{>.title,>h1{margin:0 auto}>.content{>:is(.title,h1){margin:0 auto}}}.n-header.logo-pos\:right{>.title,>h1{margin:0 0 0 auto}>.content{>.title,>h1{margin:0 0 0 auto}}}.n-header .mobile-menu{background:var(--color-base-1);border:1px solid var(--color-base-3);border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.15);display:none;min-width:200px;position:absolute;right:0;top:100%;z-index:1001}.n-header .mobile-menu.is\:open{display:flex;flex-direction:column}.n-header .mobile-menu-header{align-items:center;display:flex;justify-content:flex-end;padding:.5rem}.n-header .mobile-menu-title{font-size:1.25rem;font-weight:600;margin:0}.n-header .mobile-menu-content{padding:1rem}.n-header .mobile-menu\:1{background:var(--color-base-1);border:1px solid var(--color-base-3);border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.15);display:none;min-width:200px;position:absolute;right:0;top:100%;z-index:1001}.n-header .mobile-menu\:1.is\:open{display:flex;flex-direction:column}.n-header .mobile-menu\:2{background:var(--color-base-1);border-top:1px solid var(--color-base-3);bottom:0;box-shadow:0 -4px 12px rgba(0,0,0,.15);left:0;padding:1rem;position:fixed;right:0;transform:translateY(100%);transition:transform .3s ease;z-index:1001}.n-header .mobile-menu\:2.is\:open{transform:translateY(0)}.n-header .mobile-menu\:3{background:rgba(0,0,0,.8);bottom:0;display:none;flex-direction:column;left:0;position:fixed;right:0;top:0;z-index:1001}.n-footer,.n-header .mobile-menu\:3.is\:open{display:flex}.n-footer{border-top:var(--border-width,1px) solid var(--border-color,--color-base-3);flex-direction:column;flex-shrink:0;height:var(--footer-height,auto);padding:var(--footer-padding,var(--space-5))}.n-modal{--modal-border-radius:16px;--modal-border:none;--modal-box-shadow:rgba(0,0,0,.08) 0 16px 20px -4px,rgba(0,0,0,.03) 0 8px 8px -4px;--modal-z-index:1200;background-color:rgba(0,0,0,.5);background-color:var(--color-base-1);border:var(--modal-border);border-radius:var(--modal-border-radius);box-shadow:var(--modal-box-shadow);content:"";height:100vh;left:0;max-width:90vw;padding:16px 24px;position:fixed;position:fixed;right:50%;top:0;top:50%;transform:translate(50%,-50%);width:100vw;z-index:var(--modal-z-index,10);z-index:var(--modal-z-index)}:root{--heading-font-size:var(--font-size-7)}.n-heading{align-items:center;display:flex;font-size:var(--heading-font-size);font-weight:700;unicode-bidi:isolate;.heading-truncate{word-wrap:normal;text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;>a{word-wrap:normal;text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}.heading-overflow-clamp{text-wrap:nowrap;-webkit-box-orient:vertical;-webkit-line-clamp:1;display:-webkit-box;overflow:hidden;width:100%}}.n-table{--n-table-bg-color:var(--color-base-1);background-color:var(--n-table-bg-color);border-collapse:collapse;table-layout:fixed;width:100%;>thead{--n-thead-bg-color:var(--color-base-2);background-color:var(--n-thead-bg-color)}>:is(thead,tbody)>tr{--n-tr-height:40px;--n-tr-border-color:var(--color-base-3);border-top:1px solid var(--n-tr-border-color);height:var(--n-tr-height);position:relative}>:is(thead,tbody)>tr>:is(th,td){text-align:center;vertical-align:middle;img,input{vertical-align:middle}&:has(img){padding:8px}}>tbody>tr:nth-child(odd):has(.n-row-expander:checked)
|
|
6
6
|
label:has(.n-row-expander):before{content:"\e5c5";font-family:Material Symbols Outlined;font-size:24px}>tbody>tr:nth-child(odd):has(.n-row-expander:checked)+tr{display:table-row}}.n-table\:expandable{>tbody>tr:nth-child(odd):not(:has(.n-row-expander))>td:last-child:after{align-items:center;background-color:rgba(var(--rgb-base-1),.7);color:red;content:"오류 : n-table:expandable은 n-row-expander가 필요합니다.";display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}>tbody>tr:nth-child(odd):has(.n-row-expander:checked)
|
|
7
7
|
label:has(.n-row-expander):before{content:"\e5c7";font-family:Material Symbols Outlined;font-size:24px}>tbody>tr:nth-child(odd):has(.n-row-expander:not(:checked))+tr{display:none}>tbody>tr:nth-child(odd):has(.n-row-expander:not(:checked))
|
|
8
|
-
label:has(.n-row-expander):before{content:"\e5c5"}>tbody>tr:nth-child(odd):has(.n-row-expander:checked)+tr{display:table-row;>td{line-height:normal;overflow:hidden;padding:10px;text-align:start}}}.n-list{--gap:var(--space-2);--sp-color:var(--color-base-5);--sp-bg-image:none;--sp-dot-bg-size:3px 4px;--sp-dot-width:3px;--icon-color-active:var(--color-main-2);--icon-color-hover:var(--color-base-3);--bar-color-active:var(--color-main-2);--bar-color-hover:var(--color-base-3);--bg-color-hover:rgba(var(--rgb-base-2),0.3);--text-color-active:inherit}@media (prefers-color-scheme:dark){.n-list{--sp-color:var(--color-base-7,#333a44);--icon-color-active:var(--color-main-2);--icon-color-hover:var(--color-base-3);--bar-color-active:var(--color-main-2);--bar-color-hover:var(--color-base-3);--bg-color-hover:rgba(var(--rgb-base-8),0.3);--text-color-active:inherit}}.n-list{align-items:center;display:flex;flex-direction:row;text-overflow:ellipsis;&>*{align-items:center;box-sizing:border-box;display:flex;justify-content:center;padding:var(--space-2) var(--space-4);position:relative}&.hover>:hover{background-color:var(--bg-color-hover)}&.list-sep,&.list-sep\:dashed,&.list-sep\:dot,&.list-sep\:dotted,&.list-sep\:solid,&.list-seperator,&.list-seperator\:dashed,&.list-seperator\:dot,&.list-seperator\:dotted,&.list-seperator\:solid{gap:var(--gap)}&.list-sep>*+:before,&.list-sep\:dashed>*+:before,&.list-sep\:dot>*+:before,&.list-sep\:dotted>*+:before,&.list-sep\:solid>*+:before,&.list-seperator>*+:before,&.list-seperator\:dashed>*+:before,&.list-seperator\:dot>*+:before,&.list-seperator\:dotted>*+:before,&.list-seperator\:solid>*+:before{background-image:var(--sp-bg-image);background-repeat:repeat-y;background-size:1px 4px;bottom:25%;content:"";left:calc(var(--gap)*-.7);pointer-events:none;position:absolute;top:25%;width:1px}&.list-sep\:none,&.list-seperator\:none{&>*+:before{display:none}}&.list-sep\:solid,&.list-seperator\:solid{&>*+:before{--sp-bg-image:linear-gradient(to bottom,var(--sp-color) 100%,transparent 100%)}}&.list-sep\:dotted,&.list-seperator\:dotted{&>*+:before{--sp-bg-image:linear-gradient(to bottom,var(--sp-color) 50%,transparent 50%)}}&.list-sep\:dot,&.list-seperator\:dot{&>*+:before{--sp-bg-image:radial-gradient(circle,var(--sp-color) 1.5px,transparent 1.6px);background-image:linear-gradient(to bottom,var(--sp-color) 50%,transparent 50%);background-repeat:no-repeat;background-size:var(--sp-dot-bg-size);bottom:45%;top:45%;width:var(--sp-dot-width)}}&.list-sep\:dashed,&.list-seperator\:dashed{&>*+:before{background-image:linear-gradient(to bottom,var(--sp-color) 50%,transparent 50%)}}&.list-fit\:fill>*{flex:1 0 auto}&.list-fit\:shrink>*{flex:0 1 auto;min-width:0}&.list-fit\:noshrink{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}&.list-fit\:content>*,&.list-fit\:noshrink>*{flex:0 0 auto}&.list-fit\:wrap>*{flex-wrap:wrap}&.list-fit\:nowrap>*{flex-wrap:nowrap}&.list-vertical-align\:left{justify-content:flex-start}&.list-vertical-align\:center{justify-content:center}&.list-vertical-align\:right{justify-content:flex-end}&.active,&.active\:bar,&.active\:color{&>*{cursor:pointer;transition:background-color .3s ease,color .3s ease,opacity .3s ease;& label,input{cursor:pointer}&.active,&:has(input:checked){background-color:var(--color-background-onactive);color:var(--text-color-active)}}}&.active\:bar{&>*{&.active{background-color:transparent;color:var(--text-color-active);& .n-icon{color:var(--icon-color-active)}}&:hover{background-color:transparent;& .n-icon{color:var(--icon-color-hover)}}&:hover:after{background-color:var(--bar-color-hover)}&.active:after,&:hover:after{bottom:0;content:"";height:3px;left:0;opacity:1;position:absolute;right:0}&.active:after{background-color:var(--bar-color-active)}&:not(.active):not(:hover):after{opacity:0}}}&.list-dir\:column,&.list-direction\:column{--gap:0;align-items:flex-start;flex-direction:column;&>*{display:flex;justify-content:flex-start;width:100%}&>*+:before{display:none}&.list-sep,&.list-sep\:dashed,&.list-sep\:dot,&.list-sep\:dotted,&.list-sep\:solid,&.list-seperator,&.list-seperator\:dashed,&.list-seperator\:dot,&.list-seperator\:dotted,&.list-seperator\:solid{&>*+:before{background-image:linear-gradient(to right,var(--sp-color) 50%,transparent 50%);background-repeat:repeat-x;background-size:4px 1px;content:"";display:block;height:1px;left:0;pointer-events:none;position:absolute;right:0;top:0;width:auto}}&.list-sep\:none,&.list-seperator\:none{&>*+:before{display:none}}&.list-sep\:solid,&.list-seperator\:solid{&>*+:before{background-image:linear-gradient(to right,var(--sp-color) 100%,transparent 100%);background-size:100% 1px}}&.list-sep\:dotted,&.list-seperator\:dotted{&>*+:before{background-image:linear-gradient(to right,var(--sp-color) 50%,transparent 50%);background-size:4px 1px}}&.list-sep\:dashed,&.list-seperator\:dashed{&>*+:before{background-image:linear-gradient(to right,var(--sp-color) 50%,transparent 50%);background-size:8px 1px}}&.list-align\:left>*{justify-content:flex-start}&.list-align\:center>*{justify-content:center}&.list-align\:right>*{justify-content:flex-end}&.list-valign\:top>*,&.list-vertical-align\:top>*{align-items:flex-start}&.list-valign\:center>*,&.list-vertical-align\:center>*{align-items:center}&.list-valign\:bottom>*,&.list-vertical-align\:bottom>*{align-items:flex-end}}& .w\:grow{flex-grow:1}&.list\:aside-menu{flex-direction:column;overflow:hidden;width:100%;&>*{align-items:center;border:none;display:flex;flex-shrink:0;justify-content:flex-start;overflow:hidden;padding:10px;width:100%}}}.n-list\:wrap{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}.n-list\:dl{display:flex;flex-direction:column;>div{display:flex;flex-direction:row;padding:var(--space-2) 0;>dt{font-weight:700;&:after{content:":"}}>dd{flex-grow:1;margin-left:var(--space-2)}}>div:last-child{border-bottom:none}}.n-list\:dl.dl-sperator\:solid{>div{border-bottom:1px solid var(--color-base-5)}}.n-list\:dl.dl-sperator\:ruled{>div{border-bottom:1px dashed var(--color-base-5)}}@media (hover:hover) and (pointer:fine){.n-list{&.list\:aside-menu{&>li:hover{background-color:var(--color-hover-bg);color:var(--color-hover-text)}}}}.list\:cols{--column-width:300px;display:grid;gap:var(--space-2);grid-template-columns:repeat(auto-fill,minmax(var(--column-width),1fr));&.column-width\:1{--column-width:250px}&.column-width\:2{--column-width:300px}&.column-width\:3{--column-width:350px}&.column-width\:4{--column-width:400px}&.column-width\:5{--column-width:450px}&.column-width\:6{--column-width:500px}&.column-width\:auto{--column-width:auto}&.column-width\:100p{--column-width:100%}&.column-width\:50p{--column-width:50%}&.column-width\:33p{--column-width:33.33%}&.column-width\:25p{--column-width:25%}}:root{--icon-size:24px;--icon-family:"Material Symbols Outlined";--icon-color:var(--color-base-9);--icon-variation-settings:"FILL" 0}@media (prefers-color-scheme:dark){:root{--icon-color:var(--color-base-2)}}.n-icon{align-items:center;display:inline-flex;height:var(--icon-size);overflow:hidden;transition:all .2s ease-in-out;visibility:visible;width:var(--icon-size);&:before{align-items:center;color:inherit;content:"";display:inline-flex;flex-shrink:0;font-family:var(--icon-family);font-size:var(--icon-size);font-variation-settings:var(--icon-variation-settings);height:var(--icon-size);overflow:hidden;vertical-align:top;width:var(--icon-size)}&.hover:not(.n-deco):hover{background-color:var(--color-base-3);border-radius:50%;transform:scale(1.4);&:before{transform:scale(.72)}}.icon-style\:outlined:before{--icon-family:"Material Symbols Outlined"}.icon-style\:filled:before{--icon-variation-settings:"FILL" 1}.icon-style\:rounded:before{--icon-family:"Material Symbols Rounded"}.icon-style\:sharp:before{--icon-family:"Material Symbols Sharp"}.icon-color\:main-1:before{--icon-color:var(--color-main-1)}.icon-color\:main-2:before{--icon-color:var(--color-main-2)}.icon-color\:main-3:before{--icon-color:var(--color-main-3)}.icon-color\:sub-1:before{--icon-color:var(--color-sub-1)}.icon-color\:sub-2:before{--icon-color:var(--color-sub-2)}.icon-color\:sub-3:before{--icon-color:var(--color-sub-3)}.icon-color\:accent-1:before{--icon-color:var(--color-accent-1)}.icon-color\:accent-2:before{--icon-color:var(--color-accent-2)}.icon-color\:accent-3:before{--icon-color:var(--color-accent-3)}.icon-color\:base-1:before{--icon-color:var(--color-base-1)}.icon-color\:base-2:before{--icon-color:var(--color-base-2)}.icon-color\:base-3:before{--icon-color:var(--color-base-3)}.icon-color\:base-4:before{--icon-color:var(--color-base-4)}.icon-color\:base-5:before{--icon-color:var(--color-base-5)}.icon-color\:base-6:before{--icon-color:var(--color-base-6)}.icon-color\:base-7:before{--icon-color:var(--color-base-7)}.icon-color\:base-8:before{--icon-color:var(--color-base-8)}.icon-color\:base-9:before{--icon-color:var(--color-base-9)}.icon-color\:base-10:before{--icon-color:var(--color-base-10)}.icon-size\:1{--icon-size:var(--size-1)}.icon-size\:2{--icon-size:var(--size-2)}.icon-size\:3{--icon-size:var(--size-3)}.icon-size\:4{--icon-size:var(--size-4)}.icon-size\:5{--icon-size:var(--size-5)}.icon-size\:6{--icon-size:var(--size-6)}.icon-size\:7{--icon-size:var(--size-7)}.icon-size\:8{--icon-size:var(--size-8)}.icon-size\:9{--icon-size:var(--size-9)}.icon-size\:10{--icon-size:var(--size-10)}.icon-size\:11{--icon-size:var(--size-11)}.icon-size\:12{--icon-size:var(--size-12)}.icon-size\:13{--icon-size:var(--size-13)}}@media (min-width:640px){.sm\:n-icon{align-items:center;display:inline-flex;height:var(--icon-size);overflow:hidden;width:var(--icon-size);&:before{content:"\e87d";font-family:Material Symbols Outlined;font-size:var(--icon-size)}&.icon-color\:main-1:before{color:var(--color-main-1)}&.icon-color\:main-2:before{color:var(--color-main-2)}&.icon-color\:main-3:before{color:var(--color-main-3)}&.icon-color\:sub-1:before{color:var(--color-sub-1)}&.icon-color\:sub-2:before{color:var(--color-sub-2)}&.icon-color\:sub-3:before{color:var(--color-sub-3)}&.icon-color\:accent-1:before{color:var(--color-accent-1)}&.icon-color\:accent-2:before{color:var(--color-accent-2)}&.icon-color\:accent-3:before{color:var(--color-accent-3)}&.icon-color\:base-1:before{color:var(--color-base-1)}&.icon-color\:base-2:before{color:var(--color-base-2)}&.icon-color\:base-3:before{color:var(--color-base-3)}&.icon-color\:base-4:before{color:var(--color-base-4)}&.icon-color\:base-5:before{color:var(--color-base-5)}&.icon-color\:base-6:before{color:var(--color-base-6)}&.icon-color\:base-7:before{color:var(--color-base-7)}&.icon-color\:base-8:before{color:var(--color-base-8)}&.icon-color\:base-9:before{color:var(--color-base-9)}&.icon-color\:base-10:before{color:var(--color-base-10)}&.icon-size\:1{--icon-size:var(--size-1)}&.icon-size\:2{--icon-size:var(--size-2)}&.icon-size\:3{--icon-size:var(--size-3)}&.icon-size\:4{--icon-size:var(--size-4)}&.icon-size\:5{--icon-size:var(--size-5)}&.icon-size\:6{--icon-size:var(--size-6)}&.icon-size\:7{--icon-size:var(--size-7)}&.icon-size\:8{--icon-size:var(--size-8)}&.icon-size\:9{--icon-size:var(--size-9)}&.icon-size\:10{--icon-size:var(--size-10)}&.icon-size\:11{--icon-size:var(--size-11)}&.icon-size\:12{--icon-size:var(--size-12)}&.icon-size\:13{--icon-size:var(--size-13)}&.icon-size\:xs:before{font-size:var(--font-size-xs)}&.icon-size\:sm:before{font-size:var(--font-size-sm)}&.icon-size\:base:before{font-size:var(--font-size-base)}&.icon-size\:lg:before{font-size:var(--font-size-lg)}&.icon-size\:xl:before{font-size:var(--font-size-xl)}&.icon-size\:2xl:before{font-size:var(--font-size-2xl)}&.icon-size\:3xl:before{font-size:var(--font-size-3xl)}&.icon-size\:4xl:before{font-size:var(--font-size-4xl)}}}@media (min-width:768px){.md\:n-icon{align-items:center;display:inline-flex;height:var(--icon-size);overflow:hidden;width:var(--icon-size);&.icon-size\:1{--icon-size:var(--size-1)}&.icon-size\:2{--icon-size:var(--size-2)}&.icon-size\:3{--icon-size:var(--size-3)}&.icon-size\:4{--icon-size:var(--size-4)}&.icon-size\:5{--icon-size:var(--size-5)}&.icon-size\:6{--icon-size:var(--size-6)}&.icon-size\:7{--icon-size:var(--size-7)}&.icon-size\:8{--icon-size:var(--size-8)}&.icon-size\:9{--icon-size:var(--size-9)}&.icon-size\:10{--icon-size:var(--size-10)}&.icon-size\:11{--icon-size:var(--size-11)}&.icon-size\:12{--icon-size:var(--size-12)}&.icon-size\:13{--icon-size:var(--size-13)}&:before{font-family:Material Symbols Outlined;font-size:var(--icon-size)}}}@media (min-width:1024px){.lg\:n-icon{align-items:center;display:inline-flex;height:var(--icon-size);overflow:hidden;width:var(--icon-size);&.icon-size\:1{--icon-size:var(--size-1)}&.icon-size\:2{--icon-size:var(--size-2)}&.icon-size\:3{--icon-size:var(--size-3)}&.icon-size\:4{--icon-size:var(--size-4)}&.icon-size\:5{--icon-size:var(--size-5)}&.icon-size\:6{--icon-size:var(--size-6)}&.icon-size\:7{--icon-size:var(--size-7)}&.icon-size\:8{--icon-size:var(--size-8)}&.icon-size\:9{--icon-size:var(--size-9)}&.icon-size\:10{--icon-size:var(--size-10)}&.icon-size\:11{--icon-size:var(--size-11)}&.icon-size\:12{--icon-size:var(--size-12)}&.icon-size\:13{--icon-size:var(--size-13)}&:before{font-family:Material Symbols Outlined;font-size:var(--icon-size)}&.icon-color\:main-1:before{color:var(--color-main-1)}&.icon-color\:main-2:before{color:var(--color-main-2)}&.icon-color\:main-3:before{color:var(--color-main-3)}&.icon-color\:sub-1:before{color:var(--color-sub-1)}&.icon-color\:sub-2:before{color:var(--color-sub-2)}&.icon-color\:sub-3:before{color:var(--color-sub-3)}&.icon-color\:accent-1:before{color:var(--color-accent-1)}&.icon-color\:accent-2:before{color:var(--color-accent-2)}&.icon-color\:accent-3:before{color:var(--color-accent-3)}&.icon-color\:base-1:before{color:var(--color-base-1)}&.icon-color\:base-2:before{color:var(--color-base-2)}&.icon-color\:base-3:before{color:var(--color-base-3)}&.icon-color\:base-4:before{color:var(--color-base-4)}&.icon-color\:base-5:before{color:var(--color-base-5)}&.icon-color\:base-6:before{color:var(--color-base-6)}&.icon-color\:base-7:before{color:var(--color-base-7)}&.icon-color\:base-8:before{color:var(--color-base-8)}&.icon-color\:base-9:before{color:var(--color-base-9)}&.icon-color\:base-10:before{color:var(--color-base-10)}&.icon-size\:xs:before{font-size:var(--font-size-xs)}&.icon-size\:sm:before{font-size:var(--font-size-sm)}&.icon-size\:base:before{font-size:var(--font-size-base)}&.icon-size\:lg:before{font-size:var(--font-size-lg)}&.icon-size\:xl:before{font-size:var(--font-size-xl)}&.icon-size\:2xl:before{font-size:var(--font-size-2xl)}&.icon-size\:3xl:before{font-size:var(--font-size-3xl)}&.icon-size\:4xl:before{font-size:var(--font-size-4xl)}}}@media (min-width:1280px){.xl\:n-icon{align-items:center;display:inline-flex;height:var(--icon-size);overflow:hidden;width:var(--icon-size)}.xl\:icon-size\:1{--icon-size:var(--size-1)}.xl\:icon-size\:2{--icon-size:var(--size-2)}.xl\:icon-size\:3{--icon-size:var(--size-3)}.xl\:icon-size\:4{--icon-size:var(--size-4)}.xl\:icon-size\:5{--icon-size:var(--size-5)}.xl\:icon-size\:6{--icon-size:var(--size-6)}.xl\:icon-size\:7{--icon-size:var(--size-7)}.xl\:icon-size\:8{--icon-size:var(--size-8)}.xl\:icon-size\:9{--icon-size:var(--size-9)}.xl\:icon-size\:10{--icon-size:var(--size-10)}.xl\:icon-size\:11{--icon-size:var(--size-11)}.xl\:icon-size\:12{--icon-size:var(--size-12)}.xl\:icon-size\:13{--icon-size:var(--size-13)}.xl\:n-icon:before{font-family:Material Symbols Outlined;font-size:var(--icon-size)}.xl\:icon-color\:main-1:before{color:var(--color-main-1)}.xl\:icon-color\:main-2:before{color:var(--color-main-2)}.xl\:icon-color\:main-3:before{color:var(--color-main-3)}.xl\:icon-color\:sub-1:before{color:var(--color-sub-1)}.xl\:icon-color\:sub-2:before{color:var(--color-sub-2)}.xl\:icon-color\:sub-3:before{color:var(--color-sub-3)}.xl\:icon-color\:accent-1:before{color:var(--color-accent-1)}.xl\:icon-color\:accent-2:before{color:var(--color-accent-2)}.xl\:icon-color\:accent-3:before{color:var(--color-accent-3)}.xl\:icon-color\:base-1:before{color:var(--color-base-1)}.xl\:icon-color\:base-2:before{color:var(--color-base-2)}.xl\:icon-color\:base-3:before{color:var(--color-base-3)}.xl\:icon-color\:base-4:before{color:var(--color-base-4)}.xl\:icon-color\:base-5:before{color:var(--color-base-5)}.xl\:icon-color\:base-6:before{color:var(--color-base-6)}.xl\:icon-color\:base-7:before{color:var(--color-base-7)}.xl\:icon-color\:base-8:before{color:var(--color-base-8)}.xl\:icon-color\:base-9:before{color:var(--color-base-9)}.xl\:icon-color\:base-10:before{color:var(--color-base-10)}.xl\:icon-size\:xs:before{font-size:var(--font-size-xs)}.xl\:icon-size\:sm:before{font-size:var(--font-size-sm)}.xl\:icon-size\:base:before{font-size:var(--font-size-base)}.xl\:icon-size\:lg:before{font-size:var(--font-size-lg)}.xl\:icon-size\:xl:before{font-size:var(--font-size-xl)}.xl\:icon-size\:2xl:before{font-size:var(--font-size-2xl)}.xl\:icon-size\:3xl:before{font-size:var(--font-size-3xl)}.xl\:icon-size\:4xl:before{font-size:var(--font-size-4xl)}}.icon\:home:before{content:"\e88a"}.icon\:menu:before{content:"\e5d2"}.icon\:close:before{content:"\e5cd"}.icon\:arrow_back:before{content:"\e5c4"}.icon\:arrow_forward:before{content:"\e5c8"}.icon\:expand_more:before{content:"\e5cf"}.icon\:expand_less:before{content:"\e5ce"}.icon\:chevron_left:before{content:"\e5cb"}.icon\:chevron_right:before{content:"\e5cc"}.icon\:more_vert:before{content:"\e5d4"}.icon\:more_horiz:before{content:"\e5d3"}.icon\:refresh:before{content:"\e5d5"}.icon\:settings:before{content:"\e8b8"}.icon\:apps:before{content:"\e5c3"}.icon\:launch:before{content:"\e895"}.icon\:add:before{content:"\e145"}.icon\:remove:before{content:"\e15b"}.icon\:edit:before{content:"\e3c9"}.icon\:delete:before{content:"\e872"}.icon\:save:before{content:"\e161"}.icon\:check:before{content:"\e5ca"}.icon\:clear:before{content:"\e14c"}.icon\:cancel:before{content:"\e5c9"}.icon\:done:before{content:"\e876"}.icon\:search:before{content:"\e8b6"}.icon\:share:before{content:"\e80d"}.icon\:download:before{content:"\e2c4"}.icon\:upload:before{content:"\e2c6"}.icon\:copy:before{content:"\e14d"}.icon\:visibility:before{content:"\e8f4"}.icon\:visibility_off:before{content:"\e8f5"}.icon\:lock:before{content:"\e897"}.icon\:lock_open:before{content:"\e898"}.icon\:sync:before{content:"\e627"}.icon\:info:before{content:"\e88e"}.icon\:email:before{content:"\e0be"}.icon\:phone:before{content:"\e0cd"}.icon\:chat:before{content:"\e0b7"}.icon\:notifications:before{content:"\e7f4"}.icon\:send:before{content:"\e163"}.icon\:reply:before{content:"\e15e"}.icon\:help:before{content:"\e887"}.icon\:feedback:before{content:"\e87f"}.icon\:play_arrow:before{content:"\e037"}.icon\:pause:before{content:"\e034"}.icon\:stop:before{content:"\e047"}.icon\:volume_up:before{content:"\e050"}.icon\:volume_off:before{content:"\e04f"}.icon\:mic:before{content:"\e029"}.icon\:mic_off:before{content:"\e02b"}.icon\:folder:before{content:"\e2c7"}.icon\:folder_open:before{content:"\e2c8"}.icon\:attach_file:before{content:"\e226"}.icon\:cloud:before{content:"\e2bd"}.icon\:description:before{content:"\e873"}.icon\:person:before{content:"\e7fd"}.icon\:people:before{content:"\e7fb"}.icon\:favorite:before{content:"\e87d"}.icon\:star:before{content:"\e838"}.icon\:thumb_up:before{content:"\e8dc"}.n-btn{--line-height:1.4em;--font-size:14px;--padding:0.3em 0.7em;--bd-radius:6px;--bd-color:var(--color-base-4);--bd-color-hover:var(--color-base-8);--bd-color-active:var(--color-main-2);--bg-color:var(--color-base-3);--bg-color-hover:transparent;--bg-color-active:rgba(var(--rgb-main-2),0.7);--text-color:var(--color-base-8);--text-color-hover:var(--color-base-7);--text-color-active:var(--color-accent-2);--text-indent:-999px}@media (prefers-color-scheme:dark){.n-btn{--bd-color:var(--color-base-3);--bd-color-hover:var(--color-base-7);--bd-color-active:var(--color-base-9);--bg-color:var(--color-base-7);--bg-color-hover:transparent;--bg-color-active:rgba(var(--rgb-main-1),0.7);--text-color:var(--color-base-2);--text-color-hover:var(--color-base-2);--text-color-active:var(--color-accent-1)}}.n-btn{align-items:center;background-color:var(--bg-color);border:1px solid var(--bd-color);border-radius:var(--bd-radius);box-sizing:border-box;color:var(--text-color);cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--font-size,14px);font-weight:400;height:auto;justify-content:center;line-height:var(--line-height);padding:var(--padding);position:relative;transition:background-color .15s ease,border-color .15s ease,color .15s ease;user-select:none;white-space:nowrap;width:auto;&:before{align-items:center;display:inline-flex;font-family:Material Symbols Outlined;font-size:var(--icon-size);height:var(--icon-size);justify-content:center;overflow:hidden;width:var(--icon-size)}&:hover{background-color:var(--bg-color-hover);border-color:var(--bd-color-hover);color:var(--text-color-hover);text-decoration:none;transition:background-color .4s ease,border-color .4s ease,color .4s ease}&:active{color:var(--text-color-active)}&:focus-visible{outline:2px solid var(--bd-color-active);outline-offset:1px}&.n-icon:not(.n-deco){--padding:4px;text-indent:-999px;&:before{text-indent:0}}&.n-icon.n-deco{text-indent:0}&.btn\:rounded{--bd-radius:8px}&.btn\:circle{--bd-radius:50%}&.btn\:badge{--font-size:var(--size-5);--bd-radius:0.6em;--padding:0.2em 0.4em}&.disabled{--text-color:var(--color-base-1);--text-color-hover:var(--color-base-5);--text-color-active:var(--color-base-5);--bd-color:var(--color-base-5);--bd-color-hover:var(--color-base-5);--bd-color-active:var(--color-base-5);--bg-color:var(--color-base-4);--bg-color-hover:var(--color-base-3);--bg-color-active:var(--color-base-3)}&.btn-size\:1{--font-size:var(--size-6)}&.btn-size\:2{--font-size:var(--size-7)}&.btn-size\:3{--font-size:var(--size-8)}&.btn-size\:4{--font-size:var(--size-9)}&.btn-size\:5{--font-size:var(--size-10)}&.btn-size\:6{--font-size:var(--size-11)}&.btn-size\:7{--font-size:var(--size-12)}&.btn-size\:8{--font-size:var(--size-13)}&.btn-size\:9{--font-size:var(--size-14)}&.btn-size\:ex{--font-size:var(--size-15)}&.btn-size\:inline{--padding:0;--line-height:1em}&.btn-size\:small{--font-size:var(--size-1);--padding:0.1em 0.2em;--line-height:1em}&.btn-color\:main-1{--bg-color:var(--color-main-1);--bd-color:var(--color-main-1);--text-color:var(--color-base-1);&:hover{--bg-color-hover:var(--color-main-2);--bd-color-hover:var(--color-main-2);--text-color:var(--color-base-1)}&:active{--bg-color:var(--color-main-3);--bd-color:var(--color-main-3);--text-color:var(--color-main-3)}}&.btn-color\:sub-1{--bg-color:var(--color-sub-1);--bd-color:var(--color-sub-1);--text-color:var(--color-base-1);&:hover{--bd-color-hover:var(--color-sub-2);--text-color:var(--color-base-1)}&:active{--bd-color:var(--color-sub-3);--text-color:var(--color-sub-3)}}&.btn-color\:accent-1{--bg-color:var(--color-accent-1);--bd-color:var(--color-accent-1);--text-color:var(--color-base-1);&:hover{--bd-color-hover:var(--color-accent-2);--text-color:var(--color-base-1)}&:active{--bg-color:var(--color-accent-3);--bd-color:var(--color-accent-3);--text-color:var(--color-accent-3)}}}.n-deco{--deco-gap:4px;align-items:center;display:inline-flex;gap:var(--deco-gap);justify-content:center;text-align:center;text-indent:0;width:auto;&:before{align-items:center;display:inline-flex;flex-shrink:0;font-family:Material Symbols Outlined;font-size:var(--icon-size);height:var(--icon-size);justify-content:center;overflow:hidden;width:var(--icon-size)}}.deco-pos\:bottom,.deco-pos\:top{flex-direction:column;gap:0;height:auto}:is(li,dt,dd,td,th,div):has(>.deco-pos\:bottom),:is(li,dt,dd,td,th,div):has(>.deco-pos\:top){height:auto;padding-bottom:5px;padding-top:5px}.deco-pos\:left:before,.deco-pos\:top:before{order:unset}.deco-pos\:bottom:before,.deco-pos\:right:before{order:1}.deco-pos\:bottom,.deco-pos\:top{width:auto}:not(.n-deco).deco-pos\:bottom,:not(.n-deco).deco-pos\:left,:not(.n-deco).deco-pos\:right,:not(.n-deco).deco-pos\:top{align-items:center;display:flex;flex-direction:row;justify-content:center;overflow:visible;position:relative}:not(.n-deco).deco-pos\:bottom:before,:not(.n-deco).deco-pos\:left:before,:not(.n-deco).deco-pos\:right:before,:not(.n-deco).deco-pos\:top:before{border:1px solid red;color:red;content:"Error: n-deco is missing.";display:flex;font-family:Arial,Helvetica,sans-serif;font-size:12px;height:100%;left:0;position:absolute;top:0;width:150px}.deco-gap\:0{--deco-gap:0px}.deco-gap\:1{--deco-gap:5px}.deco-gap\:2{--deco-gap:10px}@media screen and (min-width:576px){.sm\:n-deco{--deco-gap:10px;--deco-size:24px;gap:var(--deco-gap);text-align:center;text-indent:0;width:auto}.sm\:deco-pos\:bottom,.sm\:deco-pos\:top{flex-direction:column;gap:0;height:auto}:is(li,dt,dd,td,th,div):has(>.sm\:deco-pos\:bottom),:is(li,dt,dd,td,th,div):has(>.sm\:deco-pos\:top){height:auto;padding-bottom:5px;padding-top:5px}.sm\:deco-pos\:left,.sm\:deco-pos\:top{&:before{order:unset}}.sm\:deco-pos\:bottom:before,.sm\:deco-pos\:right:before{order:1}.sm\:deco-pos\:left,.sm\:deco-pos\:right{flex-direction:row;gap:var(--deco-gap)}.sm\:deco-gap\:0{--deco-gap:0px}.sm\:deco-gap\:1{--deco-gap:5px}.sm\:deco-gap\:2{--deco-gap:10px}}@media screen and (min-width:768px){.md\:n-deco{--deco-gap:10px;--deco-size:24px;gap:var(--deco-gap);text-align:center;text-indent:0;width:auto}.md\:deco-pos\:bottom,.md\:deco-pos\:top{flex-direction:column;gap:0;height:auto}:is(li,dt,dd,td,th,div):has(>.md\:deco-pos\:bottom),:is(li,dt,dd,td,th,div):has(>.md\:deco-pos\:top){height:auto;padding-bottom:5px;padding-top:5px}.md\:deco-pos\:left,.md\:deco-pos\:top{&:before{order:unset}}.md\:deco-pos\:bottom:before,.md\:deco-pos\:right:before{order:1}.md\:deco-pos\:left,.md\:deco-pos\:right{flex-direction:row;gap:var(--deco-gap)}.md\:deco-gap\:0{--deco-gap:0px}.md\:deco-gap\:1{--deco-gap:5px}.md\:deco-gap\:2{--deco-gap:10px}}@media screen and (min-width:992px){.lg\:n-deco{--deco-gap:10px;--deco-size:24px;gap:var(--deco-gap);text-align:center;text-indent:0;width:auto}.lg\:deco-pos\:bottom,.lg\:deco-pos\:top{flex-direction:column;gap:0;height:auto}:is(li,dt,dd,td,th,div):has(>.lg\:deco-pos\:bottom),:is(li,dt,dd,td,th,div):has(>.lg\:deco-pos\:top){height:auto;padding-bottom:5px;padding-top:5px}.lg\:deco-pos\:left,.lg\:deco-pos\:top{&:before{order:unset}}.lg\:deco-pos\:bottom:before,.lg\:deco-pos\:right:before{order:1}.lg\:deco-pos\:left,.lg\:deco-pos\:right{flex-direction:row;gap:var(--deco-gap)}.lg\:deco-gap\:0{--deco-gap:0px}.lg\:deco-gap\:1{--deco-gap:5px}.lg\:deco-gap\:2{--deco-gap:10px}}@media screen and (min-width:1200px){.xl\:n-deco{--deco-gap:10px;--deco-size:24px;gap:var (--deco-gap);text-align:center;text-indent:0;width:auto}.xl\:deco-pos\:bottom,.xl\:deco-pos\:top{flex-direction:column;gap:0;height:auto}:is(li,dt,dd,td,th,div):has(>.xl\:deco-pos\:bottom),:is(li,dt,dd,td,th,div):has(>.xl\:deco-pos\:top){height:auto;padding-bottom:5px;padding-top:5px}.xl\:deco-pos\:left,.xl\:deco-pos\:top{&:before{order:unset}}.xl\:deco-pos\:bottom:before,.xl\:deco-pos\:right:before{order:1}.xl\:deco-pos\:left,.xl\:deco-pos\:right{flex-direction:row;gap:var(--deco-gap)}.xl\:deco-gap\:0{--deco-gap:0px}.xl\:deco-gap\:1{--deco-gap:5px}.xl\:deco-gap\:2{--deco-gap:10px}}:root{--color-text:var(--color-base-7);--color-text-onactive:var(--color-base-1);--color-text-onhover:var(--color-base-1);--color-background:var(--color-base-1);--color-background-onactive:rgba(var(--rgb-main-1),0.7);--color-background-onhover:rgba(var(--rgb-base-5),0.7);--color-icon-onactive:rgba(var(--rgb-main-1),0.7);--color-icon-onhover:rgba(var(--rgb-base-5),0.7)}@media (prefers-color-scheme:dark){:root{--color-text:var(--color-base-2);--color-background:var(--color-base-9)}}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--color-background);color:var(--color-text);font-family:Pretendard Variable,Pretendard,-apple-system,BlinkMacSystemFont,system-ui,Roboto,Helvetica Neue,Segoe UI,Apple SD Gothic Neo,Noto Sans KR,Malgun Gothic,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,sans-serif;font-size:var(--font-size,14px);line-height:var(--line-height-normal,1.5)}
|
|
8
|
+
label:has(.n-row-expander):before{content:"\e5c5"}>tbody>tr:nth-child(odd):has(.n-row-expander:checked)+tr{display:table-row;>td{line-height:normal;overflow:hidden;padding:10px;text-align:start}}}.n-list{--gap:var(--space-2);--sp-color:var(--color-base-5);--sp-bg-image:none;--sp-dot-bg-size:3px 4px;--sp-dot-width:3px;--icon-color-active:var(--color-main-2);--icon-color-hover:var(--color-base-3);--bar-color-active:var(--color-main-2);--bar-color-hover:var(--color-base-3);--bg-color-hover:rgba(var(--rgb-base-2),0.3);--text-color-active:inherit}@media (prefers-color-scheme:dark){.n-list{--sp-color:var(--color-base-7,#333a44);--icon-color-active:var(--color-main-2);--icon-color-hover:var(--color-base-3);--bar-color-active:var(--color-main-2);--bar-color-hover:var(--color-base-3);--bg-color-hover:rgba(var(--rgb-base-8),0.3);--text-color-active:inherit}}.n-list{align-items:center;display:flex;flex-direction:row;text-overflow:ellipsis;&>*{align-items:center;box-sizing:border-box;display:flex;justify-content:center;padding:var(--space-2) var(--space-4);position:relative}&.hover>:hover{background-color:var(--bg-color-hover)}&.list-sep,&.list-sep\:dashed,&.list-sep\:dot,&.list-sep\:dotted,&.list-sep\:solid,&.list-seperator,&.list-seperator\:dashed,&.list-seperator\:dot,&.list-seperator\:dotted,&.list-seperator\:solid{gap:var(--gap)}&.list-sep>*+:before,&.list-sep\:dashed>*+:before,&.list-sep\:dot>*+:before,&.list-sep\:dotted>*+:before,&.list-sep\:solid>*+:before,&.list-seperator>*+:before,&.list-seperator\:dashed>*+:before,&.list-seperator\:dot>*+:before,&.list-seperator\:dotted>*+:before,&.list-seperator\:solid>*+:before{background-image:var(--sp-bg-image);background-repeat:repeat-y;background-size:1px 4px;bottom:25%;content:"";left:calc(var(--gap)*-.7);pointer-events:none;position:absolute;top:25%;width:1px}&.list-sep\:none,&.list-seperator\:none{&>*+:before{display:none}}&.list-sep\:solid,&.list-seperator\:solid{&>*+:before{--sp-bg-image:linear-gradient(to bottom,var(--sp-color) 100%,transparent 100%)}}&.list-sep\:dotted,&.list-seperator\:dotted{&>*+:before{--sp-bg-image:linear-gradient(to bottom,var(--sp-color) 50%,transparent 50%)}}&.list-sep\:dot,&.list-seperator\:dot{&>*+:before{--sp-bg-image:radial-gradient(circle,var(--sp-color) 1.5px,transparent 1.6px);background-image:linear-gradient(to bottom,var(--sp-color) 50%,transparent 50%);background-repeat:no-repeat;background-size:var(--sp-dot-bg-size);bottom:45%;top:45%;width:var(--sp-dot-width)}}&.list-sep\:dashed,&.list-seperator\:dashed{&>*+:before{background-image:linear-gradient(to bottom,var(--sp-color) 50%,transparent 50%)}}&.list-fit\:fill>*{flex:1 0 auto}&.list-fit\:shrink>*{flex:0 1 auto;min-width:0}&.list-fit\:noshrink{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}&.list-fit\:content>*,&.list-fit\:noshrink>*{flex:0 0 auto}&.list-fit\:wrap>*{flex-wrap:wrap}&.list-fit\:nowrap>*{flex-wrap:nowrap}&.list-vertical-align\:left{justify-content:flex-start}&.list-vertical-align\:center{justify-content:center}&.list-vertical-align\:right{justify-content:flex-end}&.active,&.active\:bar,&.active\:color{&>*{cursor:pointer;transition:background-color .3s ease,color .3s ease,opacity .3s ease;& label,input{cursor:pointer}&.active,&:has(input:checked){background-color:var(--color-background-onactive);color:var(--text-color-active)}}}&.active\:bar{&>*{&.active{background-color:transparent;color:var(--text-color-active);& .n-icon{color:var(--icon-color-active)}}&:hover{background-color:transparent;& .n-icon{color:var(--icon-color-hover)}}&:hover:after{background-color:var(--bar-color-hover)}&.active:after,&:hover:after{bottom:0;content:"";height:3px;left:0;opacity:1;position:absolute;right:0}&.active:after{background-color:var(--bar-color-active)}&:not(.active):not(:hover):after{opacity:0}}}&.list-dir\:column,&.list-direction\:column{--gap:0;align-items:flex-start;flex-direction:column;&>*{display:flex;justify-content:flex-start;width:100%}&>*+:before{display:none}&.list-sep,&.list-sep\:dashed,&.list-sep\:dot,&.list-sep\:dotted,&.list-sep\:solid,&.list-seperator,&.list-seperator\:dashed,&.list-seperator\:dot,&.list-seperator\:dotted,&.list-seperator\:solid{&>*+:before{background-image:linear-gradient(to right,var(--sp-color) 50%,transparent 50%);background-repeat:repeat-x;background-size:4px 1px;content:"";display:block;height:1px;left:0;pointer-events:none;position:absolute;right:0;top:0;width:auto}}&.list-sep\:none,&.list-seperator\:none{&>*+:before{display:none}}&.list-sep\:solid,&.list-seperator\:solid{&>*+:before{background-image:linear-gradient(to right,var(--sp-color) 100%,transparent 100%);background-size:100% 1px}}&.list-sep\:dotted,&.list-seperator\:dotted{&>*+:before{background-image:linear-gradient(to right,var(--sp-color) 50%,transparent 50%);background-size:4px 1px}}&.list-sep\:dashed,&.list-seperator\:dashed{&>*+:before{background-image:linear-gradient(to right,var(--sp-color) 50%,transparent 50%);background-size:8px 1px}}&.list-align\:left>*{justify-content:flex-start}&.list-align\:center>*{justify-content:center}&.list-align\:right>*{justify-content:flex-end}&.list-valign\:top>*,&.list-vertical-align\:top>*{align-items:flex-start}&.list-valign\:center>*,&.list-vertical-align\:center>*{align-items:center}&.list-valign\:bottom>*,&.list-vertical-align\:bottom>*{align-items:flex-end}}& .w\:grow{flex-grow:1}&.list\:aside-menu{flex-direction:column;overflow:hidden;width:100%;&>*{align-items:center;border:none;display:flex;flex-shrink:0;justify-content:flex-start;overflow:hidden;padding:10px;width:100%}}}.n-list\:wrap{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}.n-list\:dl{display:flex;flex-direction:column;>div{display:flex;flex-direction:row;padding:var(--space-2) 0;>dt{font-weight:700;&:after{content:":"}}>dd{flex-grow:1;margin-left:var(--space-2)}}>div:last-child{border-bottom:none}}.n-list\:dl.dl-sperator\:solid{>div{border-bottom:1px solid var(--color-base-5)}}.n-list\:dl.dl-sperator\:ruled{>div{border-bottom:1px dashed var(--color-base-5)}}@media (hover:hover) and (pointer:fine){.n-list{&.list\:aside-menu{&>li:hover{background-color:var(--color-hover-bg);color:var(--color-hover-text)}}}}.list\:cols{--column-width:300px;display:grid;gap:var(--space-2);grid-template-columns:repeat(auto-fill,minmax(var(--column-width),1fr));&.column-width\:1{--column-width:250px}&.column-width\:2{--column-width:300px}&.column-width\:3{--column-width:350px}&.column-width\:4{--column-width:400px}&.column-width\:5{--column-width:450px}&.column-width\:6{--column-width:500px}&.column-width\:auto{--column-width:auto}&.column-width\:100p{--column-width:100%}&.column-width\:50p{--column-width:50%}&.column-width\:33p{--column-width:33.33%}&.column-width\:25p{--column-width:25%}}:root{--icon-size:24px;--icon-family:"Material Symbols Outlined";--icon-color:var(--color-base-9);--icon-variation-settings:"FILL" 0}@media (prefers-color-scheme:dark){:root{--icon-color:var(--color-base-2)}}.n-icon{align-items:center;display:inline-flex;height:var(--icon-size);overflow:hidden;transition:all .2s ease-in-out;visibility:visible;width:var(--icon-size);&:before{align-items:center;color:inherit;content:"";display:inline-flex;flex-shrink:0;font-family:var(--icon-family);font-size:var(--icon-size);font-variation-settings:var(--icon-variation-settings);height:var(--icon-size);overflow:hidden;vertical-align:top;width:var(--icon-size)}&.hover:not(.n-deco):hover{background-color:var(--color-base-3);border-radius:50%;transform:scale(1.4);&:before{transform:scale(.72)}}.icon-style\:outlined:before{--icon-family:"Material Symbols Outlined"}.icon-style\:filled:before{--icon-variation-settings:"FILL" 1}.icon-style\:rounded:before{--icon-family:"Material Symbols Rounded"}.icon-style\:sharp:before{--icon-family:"Material Symbols Sharp"}.icon-color\:main-1:before{--icon-color:var(--color-main-1)}.icon-color\:main-2:before{--icon-color:var(--color-main-2)}.icon-color\:main-3:before{--icon-color:var(--color-main-3)}.icon-color\:sub-1:before{--icon-color:var(--color-sub-1)}.icon-color\:sub-2:before{--icon-color:var(--color-sub-2)}.icon-color\:sub-3:before{--icon-color:var(--color-sub-3)}.icon-color\:accent-1:before{--icon-color:var(--color-accent-1)}.icon-color\:accent-2:before{--icon-color:var(--color-accent-2)}.icon-color\:accent-3:before{--icon-color:var(--color-accent-3)}.icon-color\:base-1:before{--icon-color:var(--color-base-1)}.icon-color\:base-2:before{--icon-color:var(--color-base-2)}.icon-color\:base-3:before{--icon-color:var(--color-base-3)}.icon-color\:base-4:before{--icon-color:var(--color-base-4)}.icon-color\:base-5:before{--icon-color:var(--color-base-5)}.icon-color\:base-6:before{--icon-color:var(--color-base-6)}.icon-color\:base-7:before{--icon-color:var(--color-base-7)}.icon-color\:base-8:before{--icon-color:var(--color-base-8)}.icon-color\:base-9:before{--icon-color:var(--color-base-9)}.icon-color\:base-10:before{--icon-color:var(--color-base-10)}.icon-size\:1{--icon-size:var(--size-1)}.icon-size\:2{--icon-size:var(--size-2)}.icon-size\:3{--icon-size:var(--size-3)}.icon-size\:4{--icon-size:var(--size-4)}.icon-size\:5{--icon-size:var(--size-5)}.icon-size\:6{--icon-size:var(--size-6)}.icon-size\:7{--icon-size:var(--size-7)}.icon-size\:8{--icon-size:var(--size-8)}.icon-size\:9{--icon-size:var(--size-9)}.icon-size\:10{--icon-size:var(--size-10)}.icon-size\:11{--icon-size:var(--size-11)}.icon-size\:12{--icon-size:var(--size-12)}.icon-size\:13{--icon-size:var(--size-13)}}@media (min-width:640px){.sm\:n-icon{align-items:center;display:inline-flex;height:var(--icon-size);overflow:hidden;width:var(--icon-size);&:before{content:"\e87d";font-family:Material Symbols Outlined;font-size:var(--icon-size)}&.icon-color\:main-1:before{color:var(--color-main-1)}&.icon-color\:main-2:before{color:var(--color-main-2)}&.icon-color\:main-3:before{color:var(--color-main-3)}&.icon-color\:sub-1:before{color:var(--color-sub-1)}&.icon-color\:sub-2:before{color:var(--color-sub-2)}&.icon-color\:sub-3:before{color:var(--color-sub-3)}&.icon-color\:accent-1:before{color:var(--color-accent-1)}&.icon-color\:accent-2:before{color:var(--color-accent-2)}&.icon-color\:accent-3:before{color:var(--color-accent-3)}&.icon-color\:base-1:before{color:var(--color-base-1)}&.icon-color\:base-2:before{color:var(--color-base-2)}&.icon-color\:base-3:before{color:var(--color-base-3)}&.icon-color\:base-4:before{color:var(--color-base-4)}&.icon-color\:base-5:before{color:var(--color-base-5)}&.icon-color\:base-6:before{color:var(--color-base-6)}&.icon-color\:base-7:before{color:var(--color-base-7)}&.icon-color\:base-8:before{color:var(--color-base-8)}&.icon-color\:base-9:before{color:var(--color-base-9)}&.icon-color\:base-10:before{color:var(--color-base-10)}&.icon-size\:1{--icon-size:var(--size-1)}&.icon-size\:2{--icon-size:var(--size-2)}&.icon-size\:3{--icon-size:var(--size-3)}&.icon-size\:4{--icon-size:var(--size-4)}&.icon-size\:5{--icon-size:var(--size-5)}&.icon-size\:6{--icon-size:var(--size-6)}&.icon-size\:7{--icon-size:var(--size-7)}&.icon-size\:8{--icon-size:var(--size-8)}&.icon-size\:9{--icon-size:var(--size-9)}&.icon-size\:10{--icon-size:var(--size-10)}&.icon-size\:11{--icon-size:var(--size-11)}&.icon-size\:12{--icon-size:var(--size-12)}&.icon-size\:13{--icon-size:var(--size-13)}&.icon-size\:xs:before{font-size:var(--font-size-xs)}&.icon-size\:sm:before{font-size:var(--font-size-sm)}&.icon-size\:base:before{font-size:var(--font-size-base)}&.icon-size\:lg:before{font-size:var(--font-size-lg)}&.icon-size\:xl:before{font-size:var(--font-size-xl)}&.icon-size\:2xl:before{font-size:var(--font-size-2xl)}&.icon-size\:3xl:before{font-size:var(--font-size-3xl)}&.icon-size\:4xl:before{font-size:var(--font-size-4xl)}}}@media (min-width:768px){.md\:n-icon{align-items:center;display:inline-flex;height:var(--icon-size);overflow:hidden;width:var(--icon-size);&.icon-size\:1{--icon-size:var(--size-1)}&.icon-size\:2{--icon-size:var(--size-2)}&.icon-size\:3{--icon-size:var(--size-3)}&.icon-size\:4{--icon-size:var(--size-4)}&.icon-size\:5{--icon-size:var(--size-5)}&.icon-size\:6{--icon-size:var(--size-6)}&.icon-size\:7{--icon-size:var(--size-7)}&.icon-size\:8{--icon-size:var(--size-8)}&.icon-size\:9{--icon-size:var(--size-9)}&.icon-size\:10{--icon-size:var(--size-10)}&.icon-size\:11{--icon-size:var(--size-11)}&.icon-size\:12{--icon-size:var(--size-12)}&.icon-size\:13{--icon-size:var(--size-13)}&:before{font-family:Material Symbols Outlined;font-size:var(--icon-size)}}}@media (min-width:1024px){.lg\:n-icon{align-items:center;display:inline-flex;height:var(--icon-size);overflow:hidden;width:var(--icon-size);&.icon-size\:1{--icon-size:var(--size-1)}&.icon-size\:2{--icon-size:var(--size-2)}&.icon-size\:3{--icon-size:var(--size-3)}&.icon-size\:4{--icon-size:var(--size-4)}&.icon-size\:5{--icon-size:var(--size-5)}&.icon-size\:6{--icon-size:var(--size-6)}&.icon-size\:7{--icon-size:var(--size-7)}&.icon-size\:8{--icon-size:var(--size-8)}&.icon-size\:9{--icon-size:var(--size-9)}&.icon-size\:10{--icon-size:var(--size-10)}&.icon-size\:11{--icon-size:var(--size-11)}&.icon-size\:12{--icon-size:var(--size-12)}&.icon-size\:13{--icon-size:var(--size-13)}&:before{font-family:Material Symbols Outlined;font-size:var(--icon-size)}&.icon-color\:main-1:before{color:var(--color-main-1)}&.icon-color\:main-2:before{color:var(--color-main-2)}&.icon-color\:main-3:before{color:var(--color-main-3)}&.icon-color\:sub-1:before{color:var(--color-sub-1)}&.icon-color\:sub-2:before{color:var(--color-sub-2)}&.icon-color\:sub-3:before{color:var(--color-sub-3)}&.icon-color\:accent-1:before{color:var(--color-accent-1)}&.icon-color\:accent-2:before{color:var(--color-accent-2)}&.icon-color\:accent-3:before{color:var(--color-accent-3)}&.icon-color\:base-1:before{color:var(--color-base-1)}&.icon-color\:base-2:before{color:var(--color-base-2)}&.icon-color\:base-3:before{color:var(--color-base-3)}&.icon-color\:base-4:before{color:var(--color-base-4)}&.icon-color\:base-5:before{color:var(--color-base-5)}&.icon-color\:base-6:before{color:var(--color-base-6)}&.icon-color\:base-7:before{color:var(--color-base-7)}&.icon-color\:base-8:before{color:var(--color-base-8)}&.icon-color\:base-9:before{color:var(--color-base-9)}&.icon-color\:base-10:before{color:var(--color-base-10)}&.icon-size\:xs:before{font-size:var(--font-size-xs)}&.icon-size\:sm:before{font-size:var(--font-size-sm)}&.icon-size\:base:before{font-size:var(--font-size-base)}&.icon-size\:lg:before{font-size:var(--font-size-lg)}&.icon-size\:xl:before{font-size:var(--font-size-xl)}&.icon-size\:2xl:before{font-size:var(--font-size-2xl)}&.icon-size\:3xl:before{font-size:var(--font-size-3xl)}&.icon-size\:4xl:before{font-size:var(--font-size-4xl)}}}@media (min-width:1280px){.xl\:n-icon{align-items:center;display:inline-flex;height:var(--icon-size);overflow:hidden;width:var(--icon-size)}.xl\:icon-size\:1{--icon-size:var(--size-1)}.xl\:icon-size\:2{--icon-size:var(--size-2)}.xl\:icon-size\:3{--icon-size:var(--size-3)}.xl\:icon-size\:4{--icon-size:var(--size-4)}.xl\:icon-size\:5{--icon-size:var(--size-5)}.xl\:icon-size\:6{--icon-size:var(--size-6)}.xl\:icon-size\:7{--icon-size:var(--size-7)}.xl\:icon-size\:8{--icon-size:var(--size-8)}.xl\:icon-size\:9{--icon-size:var(--size-9)}.xl\:icon-size\:10{--icon-size:var(--size-10)}.xl\:icon-size\:11{--icon-size:var(--size-11)}.xl\:icon-size\:12{--icon-size:var(--size-12)}.xl\:icon-size\:13{--icon-size:var(--size-13)}.xl\:n-icon:before{font-family:Material Symbols Outlined;font-size:var(--icon-size)}.xl\:icon-color\:main-1:before{color:var(--color-main-1)}.xl\:icon-color\:main-2:before{color:var(--color-main-2)}.xl\:icon-color\:main-3:before{color:var(--color-main-3)}.xl\:icon-color\:sub-1:before{color:var(--color-sub-1)}.xl\:icon-color\:sub-2:before{color:var(--color-sub-2)}.xl\:icon-color\:sub-3:before{color:var(--color-sub-3)}.xl\:icon-color\:accent-1:before{color:var(--color-accent-1)}.xl\:icon-color\:accent-2:before{color:var(--color-accent-2)}.xl\:icon-color\:accent-3:before{color:var(--color-accent-3)}.xl\:icon-color\:base-1:before{color:var(--color-base-1)}.xl\:icon-color\:base-2:before{color:var(--color-base-2)}.xl\:icon-color\:base-3:before{color:var(--color-base-3)}.xl\:icon-color\:base-4:before{color:var(--color-base-4)}.xl\:icon-color\:base-5:before{color:var(--color-base-5)}.xl\:icon-color\:base-6:before{color:var(--color-base-6)}.xl\:icon-color\:base-7:before{color:var(--color-base-7)}.xl\:icon-color\:base-8:before{color:var(--color-base-8)}.xl\:icon-color\:base-9:before{color:var(--color-base-9)}.xl\:icon-color\:base-10:before{color:var(--color-base-10)}.xl\:icon-size\:xs:before{font-size:var(--font-size-xs)}.xl\:icon-size\:sm:before{font-size:var(--font-size-sm)}.xl\:icon-size\:base:before{font-size:var(--font-size-base)}.xl\:icon-size\:lg:before{font-size:var(--font-size-lg)}.xl\:icon-size\:xl:before{font-size:var(--font-size-xl)}.xl\:icon-size\:2xl:before{font-size:var(--font-size-2xl)}.xl\:icon-size\:3xl:before{font-size:var(--font-size-3xl)}.xl\:icon-size\:4xl:before{font-size:var(--font-size-4xl)}}.icon\:home:before{content:"\e88a"}.icon\:menu:before{content:"\e5d2"}.icon\:close:before{content:"\e5cd"}.icon\:arrow_back:before{content:"\e5c4"}.icon\:arrow_forward:before{content:"\e5c8"}.icon\:expand_more:before{content:"\e5cf"}.icon\:expand_less:before{content:"\e5ce"}.icon\:chevron_left:before{content:"\e5cb"}.icon\:chevron_right:before{content:"\e5cc"}.icon\:more_vert:before{content:"\e5d4"}.icon\:more_horiz:before{content:"\e5d3"}.icon\:refresh:before{content:"\e5d5"}.icon\:settings:before{content:"\e8b8"}.icon\:apps:before{content:"\e5c3"}.icon\:launch:before{content:"\e895"}.icon\:add:before{content:"\e145"}.icon\:remove:before{content:"\e15b"}.icon\:edit:before{content:"\e3c9"}.icon\:delete:before{content:"\e872"}.icon\:save:before{content:"\e161"}.icon\:check:before{content:"\e5ca"}.icon\:clear:before{content:"\e14c"}.icon\:cancel:before{content:"\e5c9"}.icon\:done:before{content:"\e876"}.icon\:search:before{content:"\e8b6"}.icon\:share:before{content:"\e80d"}.icon\:download:before{content:"\e2c4"}.icon\:upload:before{content:"\e2c6"}.icon\:copy:before{content:"\e14d"}.icon\:visibility:before{content:"\e8f4"}.icon\:visibility_off:before{content:"\e8f5"}.icon\:lock:before{content:"\e897"}.icon\:lock_open:before{content:"\e898"}.icon\:sync:before{content:"\e627"}.icon\:info:before{content:"\e88e"}.icon\:email:before{content:"\e0be"}.icon\:phone:before{content:"\e0cd"}.icon\:chat:before{content:"\e0b7"}.icon\:notifications:before{content:"\e7f4"}.icon\:send:before{content:"\e163"}.icon\:reply:before{content:"\e15e"}.icon\:help:before{content:"\e887"}.icon\:feedback:before{content:"\e87f"}.icon\:play_arrow:before{content:"\e037"}.icon\:pause:before{content:"\e034"}.icon\:stop:before{content:"\e047"}.icon\:volume_up:before{content:"\e050"}.icon\:volume_off:before{content:"\e04f"}.icon\:mic:before{content:"\e029"}.icon\:mic_off:before{content:"\e02b"}.icon\:folder:before{content:"\e2c7"}.icon\:folder_open:before{content:"\e2c8"}.icon\:attach_file:before{content:"\e226"}.icon\:cloud:before{content:"\e2bd"}.icon\:description:before{content:"\e873"}.icon\:person:before{content:"\e7fd"}.icon\:people:before{content:"\e7fb"}.icon\:favorite:before{content:"\e87d"}.icon\:star:before{content:"\e838"}.icon\:thumb_up:before{content:"\e8dc"}.n-btn{--line-height:1.4em;--font-size:14px;--padding:0.3em 0.7em;--bd-radius:6px;--bd-color:var(--color-base-3);--bd-color-hover:var(--color-base-5);--bd-color-active:var(--color-main-2);--bg-color:var(--color-base-1);--bg-color-hover:var(--color-base-2);--bg-color-active:rgba(var(--rgb-main-2),0.1);--text-color:var(--color-base-8);--text-color-hover:var(--color-base-9);--text-color-active:var(--color-main-2);--text-indent:-999px;--bg-image:none;--bg-blend-mode:normal;--hover-gradient:none}@media (prefers-color-scheme:dark){.n-btn{--bd-color:var(--color-base-6);--bd-color-hover:var(--color-base-5);--bd-color-active:var(--color-main-1);--bg-color:var(--color-base-8);--bg-color-hover:var(--color-base-7);--bg-color-active:rgba(var(--rgb-main-1),0.25);--text-color:var(--color-base-3);--text-color-hover:var(--color-base-2);--text-color-active:var(--color-main-1)}}.n-btn{align-items:center;background-blend-mode:var(--bg-blend-mode,normal);background-color:var(--bg-color);background-image:var(--bg-image,none);border:1px solid var(--bd-color);border-radius:var(--bd-radius);box-sizing:border-box;color:var(--text-color);cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--font-size,14px);font-weight:400;height:auto;justify-content:center;line-height:var(--line-height);padding:var(--padding);position:relative;transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .15s ease,box-shadow .15s ease,filter .15s ease;user-select:none;white-space:nowrap;width:auto;&:before{align-items:center;display:inline-flex;font-family:Material Symbols Outlined;font-size:var(--icon-size);height:var(--icon-size);justify-content:center;overflow:hidden;width:var(--icon-size)}&:hover{background-blend-mode:var(--bg-blend-mode);background-color:var(--bg-color-hover,var(--bg-color));background-image:var(--bg-image,none);border-color:var(--bd-color-hover);box-shadow:0 4px 12px rgba(var(--rgb-base-10),.15),0 2px 4px rgba(var(--rgb-base-10),.1);color:var(--text-color-hover);text-decoration:none;transform:scale(1.02);transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease,filter .2s ease}&:not(.btn-color\:main-1):not(.btn-color\:sub-1):not(.btn-color\:accent-1){--hover-gradient:linear-gradient(to bottom,var(--bg-color-hover),var(--bg-color-hover)),radial-gradient(circle at center,rgba(var(--rgb-main-2),0.1) 0%,transparent 60%);&:hover{--bg-image:var(--hover-gradient);--bg-blend-mode:overlay;filter:contrast(1.01) brightness(.98)}}&:active{box-shadow:0 1px 3px rgba(var(--rgb-base-10),.12);color:var(--text-color-active);transform:scale(.98);transition:background-color .1s ease,border-color .1s ease,color .1s ease,transform .1s ease,box-shadow .1s ease,filter .1s ease}&:not(.btn-color\:main-1):not(.btn-color\:sub-1):not(.btn-color\:accent-1):active{background-color:var(--bg-color-active,var(--bg-color));filter:brightness(.96)}&:focus-visible{outline:2px solid var(--bd-color-active);outline-offset:1px}&.n-icon:not(.n-deco){--padding:4px;text-indent:-999px;&:before{text-indent:0}}&.n-icon.n-deco{text-indent:0}&.btn\:rounded{--bd-radius:8px}&.btn\:circle{--bd-radius:50%}&.btn\:badge{--font-size:var(--size-5);--bd-radius:0.6em;--padding:0.2em 0.4em}&.disabled{--text-color:var(--color-base-1);--text-color-hover:var(--color-base-5);--text-color-active:var(--color-base-5);--bd-color:var(--color-base-5);--bd-color-hover:var(--color-base-5);--bd-color-active:var(--color-base-5);--bg-color:var(--color-base-4);--bg-color-hover:var(--color-base-3);--bg-color-active:var(--color-base-3)}&.btn-size\:1{--font-size:var(--size-6)}&.btn-size\:2{--font-size:var(--size-7)}&.btn-size\:3{--font-size:var(--size-8)}&.btn-size\:4{--font-size:var(--size-9)}&.btn-size\:5{--font-size:var(--size-10)}&.btn-size\:6{--font-size:var(--size-11)}&.btn-size\:7{--font-size:var(--size-12)}&.btn-size\:8{--font-size:var(--size-13)}&.btn-size\:9{--font-size:var(--size-14)}&.btn-size\:ex{--font-size:var(--size-15)}&.btn-size\:inline{--padding:0;--line-height:1em}&.btn-size\:small{--font-size:var(--size-1);--padding:0.1em 0.2em;--line-height:1em}&.btn-color\:main-1{--bg-color:var(--color-main-1);--bd-color:var(--color-main-1);--text-color:var(--color-base-1);--bg-color-hover:var(--color-main-1);--bd-color-hover:var(--color-main-1);--bg-image:none;--bg-blend-mode:normal;&:hover{--bg-color-hover:var(--color-main-2);--bd-color-hover:var(--color-main-2);box-shadow:0 4px 12px rgba(var(--rgb-main-2),.25),0 2px 4px rgba(var(--rgb-main-2),.2);filter:brightness(1.05);transform:scale(1.02)}&:active{--bg-color:var(--color-main-3);--bd-color:var(--color-main-3);box-shadow:0 1px 3px rgba(var(--rgb-main-3),.3);filter:brightness(.95);transform:scale(.98)}}&.btn-color\:sub-1{--bg-color:var(--color-sub-1);--bd-color:var(--color-sub-1);--text-color:var(--color-base-1);--bg-color-hover:var(--color-sub-1);--bd-color-hover:var(--color-sub-1);--bg-image:none;--bg-blend-mode:normal;&:hover{--bg-color-hover:var(--color-sub-2);--bd-color-hover:var(--color-sub-2);box-shadow:0 4px 12px rgba(var(--rgb-sub-2),.25),0 2px 4px rgba(var(--rgb-sub-2),.2);filter:brightness(1.05);transform:scale(1.02)}&:active{--bg-color:var(--color-sub-3);--bd-color:var(--color-sub-3);box-shadow:0 1px 3px rgba(var(--rgb-sub-3),.3);filter:brightness(.95);transform:scale(.98)}}&.btn-color\:accent-1{--bg-color:var(--color-accent-1);--bd-color:var(--color-accent-1);--text-color:var(--color-base-1);--bg-color-hover:var(--color-accent-1);--bd-color-hover:var(--color-accent-1);--text-color-hover:var(--color-base-1);--text-color-active:var(--color-base-1);--bg-image:none;--bg-blend-mode:normal;&:hover{--bg-color-hover:var(--color-accent-2);--bd-color-hover:var(--color-accent-2);box-shadow:0 4px 12px rgba(var(--rgb-accent-2),.25),0 2px 4px rgba(var(--rgb-accent-2),.2);filter:brightness(1.05);transform:scale(1.02)}&:active{--bg-color:var(--color-accent-3);--bd-color:var(--color-accent-3);box-shadow:0 1px 3px rgba(var(--rgb-accent-3),.3);filter:brightness(.95);transform:scale(.98)}}}.n-deco{--deco-gap:4px;align-items:center;display:inline-flex;gap:var(--deco-gap);justify-content:center;text-align:center;text-indent:0;width:auto;&:before{align-items:center;display:inline-flex;flex-shrink:0;font-family:Material Symbols Outlined;font-size:var(--icon-size);height:var(--icon-size);justify-content:center;overflow:hidden;width:var(--icon-size)}}.deco-pos\:bottom,.deco-pos\:top{flex-direction:column;gap:0;height:auto}:is(li,dt,dd,td,th,div):has(>.deco-pos\:bottom),:is(li,dt,dd,td,th,div):has(>.deco-pos\:top){height:auto;padding-bottom:5px;padding-top:5px}.deco-pos\:left:before,.deco-pos\:top:before{order:unset}.deco-pos\:bottom:before,.deco-pos\:right:before{order:1}.deco-pos\:bottom,.deco-pos\:top{width:auto}:not(.n-deco).deco-pos\:bottom,:not(.n-deco).deco-pos\:left,:not(.n-deco).deco-pos\:right,:not(.n-deco).deco-pos\:top{align-items:center;display:flex;flex-direction:row;justify-content:center;overflow:visible;position:relative}:not(.n-deco).deco-pos\:bottom:before,:not(.n-deco).deco-pos\:left:before,:not(.n-deco).deco-pos\:right:before,:not(.n-deco).deco-pos\:top:before{border:1px solid red;color:red;content:"Error: n-deco is missing.";display:flex;font-family:Arial,Helvetica,sans-serif;font-size:12px;height:100%;left:0;position:absolute;top:0;width:150px}.deco-gap\:0{--deco-gap:0px}.deco-gap\:1{--deco-gap:5px}.deco-gap\:2{--deco-gap:10px}@media screen and (min-width:576px){.sm\:n-deco{--deco-gap:10px;--deco-size:24px;gap:var(--deco-gap);text-align:center;text-indent:0;width:auto}.sm\:deco-pos\:bottom,.sm\:deco-pos\:top{flex-direction:column;gap:0;height:auto}:is(li,dt,dd,td,th,div):has(>.sm\:deco-pos\:bottom),:is(li,dt,dd,td,th,div):has(>.sm\:deco-pos\:top){height:auto;padding-bottom:5px;padding-top:5px}.sm\:deco-pos\:left,.sm\:deco-pos\:top{&:before{order:unset}}.sm\:deco-pos\:bottom:before,.sm\:deco-pos\:right:before{order:1}.sm\:deco-pos\:left,.sm\:deco-pos\:right{flex-direction:row;gap:var(--deco-gap)}.sm\:deco-gap\:0{--deco-gap:0px}.sm\:deco-gap\:1{--deco-gap:5px}.sm\:deco-gap\:2{--deco-gap:10px}}@media screen and (min-width:768px){.md\:n-deco{--deco-gap:10px;--deco-size:24px;gap:var(--deco-gap);text-align:center;text-indent:0;width:auto}.md\:deco-pos\:bottom,.md\:deco-pos\:top{flex-direction:column;gap:0;height:auto}:is(li,dt,dd,td,th,div):has(>.md\:deco-pos\:bottom),:is(li,dt,dd,td,th,div):has(>.md\:deco-pos\:top){height:auto;padding-bottom:5px;padding-top:5px}.md\:deco-pos\:left,.md\:deco-pos\:top{&:before{order:unset}}.md\:deco-pos\:bottom:before,.md\:deco-pos\:right:before{order:1}.md\:deco-pos\:left,.md\:deco-pos\:right{flex-direction:row;gap:var(--deco-gap)}.md\:deco-gap\:0{--deco-gap:0px}.md\:deco-gap\:1{--deco-gap:5px}.md\:deco-gap\:2{--deco-gap:10px}}@media screen and (min-width:992px){.lg\:n-deco{--deco-gap:10px;--deco-size:24px;gap:var(--deco-gap);text-align:center;text-indent:0;width:auto}.lg\:deco-pos\:bottom,.lg\:deco-pos\:top{flex-direction:column;gap:0;height:auto}:is(li,dt,dd,td,th,div):has(>.lg\:deco-pos\:bottom),:is(li,dt,dd,td,th,div):has(>.lg\:deco-pos\:top){height:auto;padding-bottom:5px;padding-top:5px}.lg\:deco-pos\:left,.lg\:deco-pos\:top{&:before{order:unset}}.lg\:deco-pos\:bottom:before,.lg\:deco-pos\:right:before{order:1}.lg\:deco-pos\:left,.lg\:deco-pos\:right{flex-direction:row;gap:var(--deco-gap)}.lg\:deco-gap\:0{--deco-gap:0px}.lg\:deco-gap\:1{--deco-gap:5px}.lg\:deco-gap\:2{--deco-gap:10px}}@media screen and (min-width:1200px){.xl\:n-deco{--deco-gap:10px;--deco-size:24px;gap:var (--deco-gap);text-align:center;text-indent:0;width:auto}.xl\:deco-pos\:bottom,.xl\:deco-pos\:top{flex-direction:column;gap:0;height:auto}:is(li,dt,dd,td,th,div):has(>.xl\:deco-pos\:bottom),:is(li,dt,dd,td,th,div):has(>.xl\:deco-pos\:top){height:auto;padding-bottom:5px;padding-top:5px}.xl\:deco-pos\:left,.xl\:deco-pos\:top{&:before{order:unset}}.xl\:deco-pos\:bottom:before,.xl\:deco-pos\:right:before{order:1}.xl\:deco-pos\:left,.xl\:deco-pos\:right{flex-direction:row;gap:var(--deco-gap)}.xl\:deco-gap\:0{--deco-gap:0px}.xl\:deco-gap\:1{--deco-gap:5px}.xl\:deco-gap\:2{--deco-gap:10px}}:root{--color-text:var(--color-base-7);--color-text-onactive:var(--color-base-1);--color-text-onhover:var(--color-base-1);--color-background:var(--color-base-1);--color-background-onactive:rgba(var(--rgb-main-1),0.7);--color-background-onhover:rgba(var(--rgb-base-5),0.7);--color-icon-onactive:rgba(var(--rgb-main-1),0.7);--color-icon-onhover:rgba(var(--rgb-base-5),0.7)}@media (prefers-color-scheme:dark){:root{--color-text:var(--color-base-2);--color-background:var(--color-base-9)}}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--color-background);color:var(--color-text);font-family:Pretendard Variable,Pretendard,-apple-system,BlinkMacSystemFont,system-ui,Roboto,Helvetica Neue,Segoe UI,Apple SD Gothic Neo,Noto Sans KR,Malgun Gothic,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,sans-serif;font-size:var(--font-size,14px);line-height:var(--line-height-normal,1.5)}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "newtil-css",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.80",
|
|
4
4
|
"description": "Utility based CSS",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"types": "index.d.ts",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"rollup": "^4.52.5",
|
|
42
42
|
"rollup-plugin-copy": "^3.5.0",
|
|
43
43
|
"rollup-plugin-postcss": "^4.0.2",
|
|
44
|
-
"vitepress": "^
|
|
44
|
+
"vitepress": "^1.6.4"
|
|
45
45
|
},
|
|
46
46
|
"directories": {
|
|
47
47
|
"doc": "docs"
|