Jaybe
200 lines
10 KiB
SCSS
200 lines
10 KiB
SCSS
@mixin font-face-woff($font-family, $font-path, $weight:normal, $style:normal) {
|
|
@font-face {
|
|
font-family: $font-family;
|
|
src: url('#{$font-path}.woff') format('woff');
|
|
font-weight: $weight;
|
|
font-style: $style;
|
|
}
|
|
}
|
|
|
|
|
|
@mixin font-face-woff2($font-family, $font-path, $weight:normal, $style:normal) {
|
|
@font-face {
|
|
font-family: $font-family;
|
|
src: url('#{$font-path}.woff2') format('woff2');
|
|
font-weight: $weight;
|
|
font-style: $style;
|
|
}
|
|
}
|
|
@include font-face-woff('NanumSquareNeo', '/fonts/NanumSquareNeo-Variable');
|
|
@include font-face-woff('NanumSquareNeo', '/fonts/NanumSquareNeo-bRg');
|
|
@include font-face-woff('NanumSquareNeo', '/fonts/NanumSquareNeo-cBd');
|
|
@include font-face-woff2('D2Coding', '/fonts/D2Coding');
|
|
@include font-face-woff2('bootstrap-icons', '/fonts/bootstrap-icons');
|
|
|
|
|
|
//변수선언
|
|
$font:'NanumSquareNeo', 'Noto Sans', dotum, Gulim, sans-serif;
|
|
|
|
//default layout
|
|
html, body{height:100%;}
|
|
body{margin:0; padding:0; font-family:$font; font-size:16px; font-weight:400; font-variation-settings:"wght" 400; line-height:1.2; color:rgb(var(--bs-dark-metal));}
|
|
a{color:inherit; text-decoration:none;}
|
|
hr, legend{display:none;}
|
|
h1, h2, h3, h4, h5, h6{font-size:100%; font-weight:300; line-height:1.2;}
|
|
h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, form, fieldset, figure, figcaption, img{margin:0; padding:0; border:0;}
|
|
ul, ol, li{list-style:none;}
|
|
p, div, th, td{font-size:100%;}
|
|
dfn, address{font-style:normal;}
|
|
img, input, select, textarea{vertical-align:middle;}
|
|
input, select, button{font-family:$font; font-size:100%;}
|
|
textarea{font-family:$font; font-size:100%; resize:none; border-radius:0; appearance:none;}
|
|
input[type="submit"], button{cursor:pointer;}
|
|
button{color: inherit; border:0; background:none;}
|
|
button::-moz-focus-inner{padding:0; border:0;}
|
|
input::-ms-clear, input::-ms-reveal{display:none;}
|
|
input{outline:none;}
|
|
textarea{box-sizing:border-box; padding:20px; color:rgb(var(--bs-dark-mirage)); border:1px solid rgb(var(--bs-gray-moon-mist));}
|
|
textarea:focus{border:1px solid rgb(var(--bs-dark-mirage)); outline: none;}
|
|
textarea[name*="script"]{font-family:"D2Coding";}
|
|
// select{appearance:none;} 셀렉트박스화살표 가리는 css
|
|
select:focus{outline:none;}
|
|
select::-ms-expand{display:none;}
|
|
::-moz-selection {color:rgb(var(--bs-white)); background:rgb(var(--bs-blue-azure));}
|
|
::selection {color:rgb(var(--bs-white)); background:rgb(var(--bs-blue-azure));}
|
|
.masking{font-style:normal; font-family:Gulim; letter-spacing:0px;}
|
|
.masking:last-child{padding-right:1.5px;}
|
|
@include medium{//var.scss
|
|
html, body{font-size:14px;}
|
|
}
|
|
|
|
.tooltipped{position:relative}
|
|
.tooltipped:after{position:absolute;z-index:1000000;display:none;padding:5px 8px;font:normal normal 11px/1.5 Helvetica,arial,nimbussansl,liberationsans,freesans,clean,sans-serif,"Segoe UI Emoji","Segoe UI Symbol";color:rgb(var(--bs-white));text-align:center;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(aria-label);background:rgba(var(--bs-black), 0.8);border-radius:3px;-webkit-font-smoothing:subpixel-antialiased}
|
|
.tooltipped:before{position:absolute;z-index:1000001;display:none;width:0;height:0;color:rgba(var(--bs-black), 0.8);pointer-events:none;content:"";border:5px solid transparent}
|
|
.tooltipped:hover:before,.tooltipped:hover:after,.tooltipped:active:before,.tooltipped:active:after,.tooltipped:focus:before,.tooltipped:focus:after{display:inline-block;text-decoration:none}
|
|
.tooltipped-multiline:hover:after,.tooltipped-multiline:active:after,.tooltipped-multiline:focus:after{display:table-cell}
|
|
.tooltipped-s:after,.tooltipped-se:after,.tooltipped-sw:after{top:100%;right:50%;margin-top:5px}
|
|
.tooltipped-s:before,.tooltipped-se:before,.tooltipped-sw:before{top:auto;right:50%;bottom:-5px;margin-right:-5px;border-bottom-color:rgba(var(--bs-black), 0.8)}
|
|
.tooltipped-se:after{right:auto;left:50%;margin-left:-15px}
|
|
.tooltipped-sw:after{margin-right:-15px}
|
|
.tooltipped-n:after,.tooltipped-ne:after,.tooltipped-nw:after{right:50%;bottom:100%;margin-bottom:5px}
|
|
.tooltipped-n:before,.tooltipped-ne:before,.tooltipped-nw:before{top:-5px;right:50%;bottom:auto;margin-right:-5px;border-top-color:rgba(var(--bs-black), 0.8)}
|
|
.tooltipped-ne:after{right:auto;left:50%;margin-left:-15px}
|
|
.tooltipped-nw:after{margin-right:-15px}
|
|
.tooltipped-s:after,.tooltipped-n:after{transform:translateX(50%)}
|
|
.tooltipped-w:after{right:100%;bottom:50%;margin-right:5px;transform:translateY(50%)}
|
|
.tooltipped-w:before{top:50%;bottom:50%;left:-5px;margin-top:-5px;border-left-color:rgba(var(--bs-black), 0.8)}
|
|
.tooltipped-e:after{bottom:50%;left:100%;margin-left:5px;transform:translateY(50%)}
|
|
.tooltipped-e:before{top:50%;right:-5px;bottom:50%;margin-top:-5px;border-right-color:rgba(var(--bs-black), 0.8)}
|
|
.tooltipped-multiline:after{width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:250px;word-break:break-word;word-wrap:normal;white-space:pre-line;border-collapse:separate}
|
|
.tooltipped-multiline.tooltipped-s:after,.tooltipped-multiline.tooltipped-n:after{right:auto;left:50%;transform:translateX(-50%)}
|
|
.tooltipped-multiline.tooltipped-w:after,.tooltipped-multiline.tooltipped-e:after{right:100%}
|
|
@media screen and (min-width: 0\0){.tooltipped-multiline:after{width:250px}}
|
|
.tooltipped-sticky:before,.tooltipped-sticky:after{display:inline-block}
|
|
.tooltipped-sticky.tooltipped-multiline:after{display:table-cell}
|
|
.fullscreen-overlay-enabled.dark-theme .tooltipped:after{color:rgb(var(--bs-black));background:rgba(var(--bs-white), 0.8);}
|
|
.fullscreen-overlay-enabled.dark-theme .tooltipped .tooltipped-s:before,.fullscreen-overlay-enabled.dark-theme .tooltipped .tooltipped-se:before,.fullscreen-overlay-enabled.dark-theme .tooltipped .tooltipped-sw:before{border-bottom-color:rgba(var(--bs-white), 0.8);}
|
|
.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-n:before,.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-ne:before,.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-nw:before{border-top-color:rgba(var(--bs-white), 0.8);}
|
|
.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-e:before{border-right-color:rgba(var(--bs-white), 0.8);}
|
|
.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-w:before{border-left-color:rgba(var(--bs-white), 0.8);}
|
|
|
|
.zenith-loading {width:auto;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background: 50% 100% / 50% 50% no-repeat radial-gradient(ellipse at bottom, rgb(var(--bs-red-chili)), transparent, transparent); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 10vw; font-family: sans-serif; animation: zenith-loading-reveal 1500ms ease-in-out forwards 200ms, zenith-loading-glow 2500ms linear infinite 2000ms;z-index:9;}
|
|
*:has(>.zenith-loading){position:relative; min-height:50px;}
|
|
.zenith-loading::after{display:block; text-align:center; font-size:30px; font-weight:bold; content:"ZENITH";}
|
|
|
|
/* margin */
|
|
.m0 {margin:0 !important}
|
|
.m5 {margin:5px !important}
|
|
.m10 {margin:10px !important}
|
|
.mw10 {margin:0 10px !important}
|
|
.mt0{margin-top:0 !important}
|
|
.mt5{margin-top:5px !important}
|
|
.mt10{margin-top:10px !important}
|
|
.mt15{margin-top:15px !important}
|
|
.mt20{margin-top:20px !important}
|
|
.mt25{margin-top:25px !important}
|
|
.mt30{margin-top:30px !important}
|
|
.mt35{margin-top:35px !important}
|
|
.mt40{margin-top:40px !important}
|
|
.mt45{margin-top:45px !important}
|
|
.mt50{margin-top:50px !important}
|
|
.mt60{margin-top:60px !important}
|
|
.mt70{margin-top:70px !important}
|
|
.mt80{margin-top:80px !important}
|
|
.mt90{margin-top:90px !important}
|
|
.mt100{margin-top:100px !important}
|
|
.mt-5{margin-top:-5px !important}
|
|
|
|
.mb0{margin-bottom:0px !important}
|
|
.mb5{margin-bottom:5px !important}
|
|
.mb10{margin-bottom:10px !important}
|
|
.mb15{margin-bottom:15px !important}
|
|
.mb20{margin-bottom:20px !important}
|
|
.mb25{margin-bottom:25px !important}
|
|
.mb30{margin-bottom:30px !important}
|
|
.mb35{margin-bottom:35px !important}
|
|
.mb40{margin-bottom:40px !important}
|
|
.mb45{margin-bottom:45px !important}
|
|
.mb50{margin-bottom:50px !important}
|
|
.mb55{margin-bottom:55px !important}
|
|
.mb60{margin-bottom:60px !important}
|
|
.mb70{margin-bottom:70px !important}
|
|
.mb80{margin-bottom:80px !important}
|
|
.mb85{margin-bottom:85px !important}
|
|
.mb90{margin-bottom:90px !important}
|
|
.mb100{margin-bottom:100px !important}
|
|
|
|
.mr0{margin-right:0 !important}
|
|
.mr5{margin-right:5px !important}
|
|
.mr10{margin-right:10px !important}
|
|
.mr15{margin-right:15px !important}
|
|
|
|
.ml0{margin-left:0 !important}
|
|
.ml5{margin-left:5px !important}
|
|
.ml10{margin-left:10px !important}
|
|
.ml15{margin-left:15px !important}
|
|
.ml20{margin-left:20px !important}
|
|
.ml22{margin-left:22px !important}
|
|
.ml30{margin-left:30px !important}
|
|
.ml40{margin-left:40px !important}
|
|
.ml50{margin-left:50px !important}
|
|
.ml55{margin-left:55px !important}
|
|
|
|
.ml-10{margin-left:-10px !important;}
|
|
.ml-20{margin-left:-20px !important;}
|
|
.ml-30{margin-left:-30px !important;}
|
|
.ml-40{margin-left:-40px !important;}
|
|
|
|
/* padding */
|
|
.p0 {padding:0 !important}
|
|
.pd10 {padding:10px !important}
|
|
.pd15 {padding:15px !important}
|
|
.pd30 {padding:30px !important}
|
|
.pt0 {padding-top:0 !important}
|
|
.pt2 {padding-top:2px !important}
|
|
.pt5 {padding-top:5px !important}
|
|
.pt10 {padding-top:10px !important}
|
|
.pt15 {padding-top:15px !important}
|
|
.pt20 {padding-top:20px !important}
|
|
.pt25 {padding-top:25px !important}
|
|
.pt30 {padding-top:30px !important}
|
|
.pt35 {padding-top:35px !important}
|
|
.pt40 {padding-top:40px !important}
|
|
.pb0 {padding-bottom:0 !important}
|
|
.pb10 {padding-bottom:10px !important}
|
|
.pb15 {padding-bottom:15px !important}
|
|
.pb20 {padding-bottom:20px !important}
|
|
.pb30 {padding-bottom:30px !important}
|
|
.pl0 {padding-left:0px !important}
|
|
.pl10 {padding-left:10px !important}
|
|
.pl15 {padding-left:15px !important}
|
|
.pl20 {padding-left:20px !important}
|
|
.pl30 {padding-left:30px !important}
|
|
.pr0 {padding-right:0px !important}
|
|
.pr10 {padding-right:10px !important}
|
|
.pr15 {padding-right:15px !important}
|
|
.pr20 {padding-right:20px !important}
|
|
.pr30 {padding-right:30px !important}
|
|
|
|
// width
|
|
.wid10 {width:10% !important;}
|
|
.wid20 {width:20% !important;}
|
|
.wid30 {width:30% !important;}
|
|
.wid40 {width:40% !important;}
|
|
.wid50 {width:50% !important;}
|
|
.wid60 {width:60% !important;}
|
|
.wid70 {width:70% !important;}
|
|
.wid80 {width:80% !important;}
|
|
.wid90 {width:90% !important;}
|
|
.wid100 {width:100% !important;}
|