minjubyun
/
kisa_styleguide_darklight
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

main header 수정

master
minjubyun 1 year ago
parent
2cd216607f
commit
b2277c7426
11 changed files with 575 additions and 3458 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +40
    -40
      assets/css/_mixin.scss
  2. +307
    -1765
      assets/css/guide.css
  3. +88
    -1223
      assets/css/guide.scss
  4. +15
    -155
      assets/css/layout.css
  5. +12
    -125
      assets/css/layout.scss
  6. +84
    -119
      assets/css/template.css
  7. +3
    -31
      assets/css/template.scss
  8. +5
    -0
      assets/images/bell_bk_20.svg
  9. +5
    -0
      assets/images/bell_fff_20.svg
  10. +8
    -0
      assets/images/user_bk_20.svg
  11. +8
    -0
      assets/images/user_fff_20.svg

+ 40
- 40
assets/css/_mixin.scss View File

@ -126,123 +126,123 @@ $fc_default: rgba(255, 255, 255, 0.87);
font-family: 'Spoqa Han Sans Neo', sans-serif;
}
@mixin fs_40_bold {
font-size: 2.5rem;
font-size: 40px;
font-weight: 700;
}
@mixin fs_40_medium {
font-size: 2.5rem;
font-size: 40px;
font-weight: 500;
}
@mixin fs_28_bold {
font-size: 1.75rem;
font-size: 28px;
font-weight: 700;
}
@mixin fs_24_bold {
font-size: 1.5rem;
font-size: 24px;
font-weight: 700;
}
@mixin fs_24_medium {
font-size: 1.5rem;
font-size: 24px;
font-weight: 500;
}
@mixin fs_20_bold {
font-size: 1.25rem;
font-size: 20px;
font-weight: 700;
}
@mixin fs_20_medium {
font-size: 1.25rem;
font-size: 20px;
font-weight: 500;
}
@mixin fs_18_bold {
font-size: 1.125rem;
font-size: 18px;
font-weight: 700;
}
@mixin fs_18_medium {
font-size: 1.125rem;
font-size: 18px;
font-weight: 500;
}
@mixin fs_16_bold {
font-size: 1rem;
font-size: 16px;
font-weight: 700;
}
@mixin fs_16_medium {
font-size: 1rem;
font-size: 16px;
font-weight: 500;
}
@mixin fs_16_regular {
font-size: 1rem;
font-size: 16px;
font-weight: 400;
}
@mixin fs_16_light {
font-size: 1rem;
font-size: 16px;
font-weight: 300;
}
@mixin fs_15_medium {
font-size: 0.9375rem;
font-size: 15px;
font-weight: 500;
}
@mixin fs_15_regular {
font-size: 0.9375rem;
font-size: 15px;
font-weight: 400;
}
@mixin fs_14_bold {
font-size: 0.875rem;
font-size: 14px;
font-weight: 700;
}
@mixin fs_14_medium {
font-size: 0.875rem;
font-size: 14px;
font-weight: 500;
}
@mixin fs_14_regular {
font-size: 0.875rem;
font-size: 14px;
font-weight: 400;
}
@mixin fs_14_light {
font-size: 0.875rem;
font-size: 14px;
font-weight: 300;
}
@mixin fs_13_medium {
font-size: 0.8125rem;
font-size: 13px;
font-weight: 500;
}
@mixin fs_13_regular {
font-size: 0.8125rem;
font-size: 13px;
font-weight: 400;
}
@mixin fs_13_light {
font-size: 0.8125rem;
font-size: 13px;
font-weight: 300;
}
@mixin fs_12_bold {
font-size: 0.75rem !important;
font-size: 12px!important;
font-weight: 700 !important;
}
@mixin fs_12_medium {
font-size: 0.75rem !important;
font-size: 12px !important;
font-weight: 500 !important;
}
@mixin fs_12_regular {
font-size: 0.75rem;
font-size: 12px;
font-weight: 400;
}
@mixin fs_12_light {
font-size: 0.75rem;
font-size: 12px;
font-weight: 300;
}
@mixin fs_11_medium {
font-size: 0.6875rem;
font-size: 12px;
font-weight: 500;
}
@mixin fs_11_regular {
font-size: 0.6875rem;
font-size: 11px;
font-weight: 400;
}
@mixin fs_11_light {
font-size: 0.6875rem;
font-size: 11px;
font-weight: 300;
}
@mixin fs_10_regular {
font-size: 0.625rem;
font-size: 10px;
font-weight: 400;
}
@ -252,7 +252,7 @@ $fc_default: rgba(255, 255, 255, 0.87);
align-items: center;
justify-content: center;
width: $width;
padding: 0.125rem 0.75rem 0;
padding: 2px 12px 0;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
@ -269,7 +269,7 @@ $fc_default: rgba(255, 255, 255, 0.87);
}
&.disabled {
background: var(--white-w_12);
box-shadow: inset 0 0 0.75rem rgba(255, 255, 255, 0.1);
box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.1);
color: var(--white-w_20);
}
}
@ -311,23 +311,23 @@ $fc_default: rgba(255, 255, 255, 0.87);
@include backFilter;
@include box_shadow16;
background: var(--bg_01_80);
border: 0.063rem solid var(--line-pri_40-to-wh_40);
border: 1px solid var(--line-pri_40-to-wh_40);
color: var(--white-w_100-sec);
&:hover:not(.selected):not(.card_selected):not(.hover):not(.disabled), &.hover {
background: var(--btn-btn_hover);
border: none;
box-shadow: inset 0 0 0.75rem rgba(39, 212, 255, 0.5);
box-shadow: inset 0 0 12px rgba(39, 212, 255, 0.5);
color: var(--white-w_100);
}
&.selected{
background: var(--btn-btn_default);
border: none;
box-shadow: inset 0 0 0.75rem #0476FF;
box-shadow: inset 0 0 12px #0476FF;
color: var(--white-w_100);
}
&.disabled {
background: var(--bg_01_80);
border: 0.063rem solid var(--line-wh_12-to-100);
border: 1px solid var(--line-wh_12-to-100);
box-shadow: none;
color: var(--white-w_20);
}
@ -339,23 +339,23 @@ $fc_default: rgba(255, 255, 255, 0.87);
@include box_shadow16;
@include fs_14_medium;
background: var(--bg_01_80);
border: 0.063rem solid var(--line-wh_12-to-40);
border: 1px solid var(--line-wh_12-to-40);
color: var(--white-w_87);
&:hover:not(.selected):not(.disabled),&.hover {
background: var(--primary-pri_12);
color: var(--primary-pri_100);
border: 0.063rem solid var(--line-wh_12-to-40);
border: 1px solid var(--line-wh_12-to-40);
font-weight: 700;
}
&.selected {
background: var(--primary-pri_20);
border: 0.063rem solid var(--line-wh_12-to-40);
border: 1px solid var(--line-wh_12-to-40);
color: var(--primary-pri_100);
font-weight: 700;
}
&.disabled {
background: var(--bg_01_40);
border: 0.063rem solid var(--white-w_12);
border: 1px solid var(--white-w_12);
color: var(--white-w_20);
}
}

+ 307
- 1765
assets/css/guide.css
File diff suppressed because it is too large
View File


+ 88
- 1223
assets/css/guide.scss
File diff suppressed because it is too large
View File


+ 15
- 155
assets/css/layout.css View File

@ -7,16 +7,6 @@
--background-bg_01:#0A0F24;
--bg_01_40: rgba(10, 11, 20, 0.4);
--bg_02_60: rgba(4, 9, 26, 0.60);
--primary-pri_100: #27D4FF;
--primary-pri_80: rgba(39, 212, 255, 0.8);
--primary-pri_60: rgba(39, 212, 255, 0.6);
--primary-pri_50: rgba(39, 212, 255, 0.5);
--primary-pri_40: rgba(39, 212, 255, 0.4);
--primary-pri_30: rgba(39, 212, 255, 0.3);
--primary-pri_20: rgba(39, 212, 255, 0.2);
--primary-pri_12: rgba(39, 212, 255, 0.12);
--primary-pri_12-to-bk: rgba(39, 212, 255, 0.12);
--primary-pri_06: rgba(39, 212, 255, 0.06);
--primary-pri_6: rgba(39, 212, 255, 0.06);
--white-w_100: #ffffff;
--white-w_100-sec: #ffffff;
@ -29,12 +19,7 @@
--white-w_20: rgba(255, 255, 255, 0.2);
--white-w_16: rgba(255, 255, 255, 0.16);
--white-w_12: rgba(255, 255, 255, 0.12);
--tab-btn_default: #024294;
--btn-btn_default: #024294;
--btn-btn_hover: #0155BD;
--btn-btn_selected: #0068E6;
--box1_border:rgba(39, 212, 255, 0.4);
--title-color: #27D4FF;
--bg_01_80: rgba(11, 17, 41, 0.8);
--line-wh_12-to-40: rgba(255, 255, 255, 0.12);
--line-wh_20-to-100: rgba(255, 255, 255, 0.2);
@ -43,7 +28,6 @@
--line-pri_40-to-wh_40: rgba(39, 212, 255, 0.40);
--line-pri_40-to-bk_40: rgba(39, 212, 255, 0.40);
--icon-pri_20-to-100: rgba(34, 212, 255, 0.20);
--primary-to-grayscale-to-bk: #27D4FF;
--more-bright-wh_6-to-60: rgba(255, 255, 255, 0.06);
--white-w_6: rgba(255, 255, 255, 0.06);
--line-pri_40-to-wh_100: rgba(39, 212, 255, 0.40);
@ -54,7 +38,6 @@
--point-error-10: rgba(219, 0, 0, 0.08);
--blur_02_60: rgba(55, 61, 82, 0.60);
--bg-blur_02_60: rgba(55, 61, 82, 0.60);
--grade-chart-gco-01:#FFE043;
--radio-default: rgba(255, 255, 255, 0.6);
--control-disabled: bg_grey10;
--background-legend: rgba(74, 78, 102, 0.8);
@ -89,16 +72,7 @@
--background-bg_01: #ffffff;
--bg_01_40: #F3F5FD;
--bg_02_60: rgba(245, 247, 255, 0.90);
--primary-pri_100: #0068E6;
--primary-pri_80: rgba(0, 104, 230, 0.8);
--primary-pri_60: rgba(0, 104, 230, 0.6);
--primary-pri_50: rgba(0, 104, 230, 0.5);
--primary-pri_40: rgba(0, 104, 230, 0.4);
--primary-pri_30: rgba(0, 104, 230, 0.3);
--primary-pri_20: rgba(0, 104, 230, 0.2);
--primary-pri_12: rgba(0, 104, 230, 0.12);
--primary-pri_12-to-bk: #000;
--primary-pri_06: rgba(0, 104, 230, 0.06);
--primary-pri_6: rgba(0, 104, 230, 0.06);
--white-w_100: #ffffff;
--white-w_100-sec: #000;
@ -111,12 +85,7 @@
--white-w_20: rgba(0, 0, 0, 0.2);
--white-w_16: rgba(0, 0, 0, 0.16);
--white-w_12: rgba(0, 0, 0, 0.12);
--tab-btn_default: #024294;
--btn-btn_default: #0155BD;
--btn-btn_hover: #0068E6;
--btn-btn_selected: #338FFF;
--box1_border: #ffffff;
--title-color: #0068E6;
--bg_01_80: rgba(245, 246, 250, 0.90);
--icon-pri_20-to-100: #0067E6;
--white-w_6: rgba(0, 0, 0, 0.06);
@ -133,7 +102,6 @@
--control-disabled: bg_grey10;
--icon-icon-selected: #ffffff;
--group-icon-selected: rgba(51, 143, 255, 0.40);
--map-ver2-hover: rgba(51, 143, 255, 0.4);
--navigation-bg: #E1E2E5;
--etc-FNB:rgba(245, 246, 250, 0.90);
--black-bk_100: #ffffff;
@ -160,14 +128,9 @@
border-radius: 1.5em;
background-color: rgba(237, 237, 237, 0.3);
}
.lightmode > .inner.template {
padding: unset;
}
html[data-theme=light] .lightmode > .inner {
html[data-theme=light] .lightmode > .inner.ver1 {
background-color: var(--PRI);
}
.outer {
padding: 4px;
border-radius: 50px;
@ -204,7 +167,6 @@ html[data-theme=light] .lightmode > .inner {
color: rgb(135, 199, 24);
transition: all 0.35s ease-in-out;
}
.circle_dark {
background: var(--alpha-wh-to-bkwh-100);
display: flex;
@ -273,7 +235,7 @@ html[data-theme=light] .lightmode > .inner {
border-bottom: 0.063rem solid var(--white-w_30);
}
.guide_top h1 {
font-size: 2.5rem;
font-size: 40px;
font-weight: 700;
color: #fff;
}
@ -297,7 +259,7 @@ html[data-theme=light] .guide_top h1 {
padding: 0 0 1.875rem;
}
.comp_top h2 {
font-size: 1.5rem;
font-size: 24px;
font-weight: 700;
color: var(--white-w_87);
}
@ -311,7 +273,7 @@ html[data-theme=light] .guide_top h1 {
}
.comp_dt {
font-size: 1rem;
font-size: 16px;
font-weight: 500;
width: 6.25rem;
padding: 1.25rem 0 0 0;
@ -334,7 +296,7 @@ html[data-theme=light] .guide_top h1 {
}
.comp_size {
font-size: 0.75rem;
font-size: 12px;
font-weight: 400;
color: rgba(255, 255, 255, 0.6);
width: 2.5rem;
@ -441,7 +403,7 @@ footer {
}
.user_table {
font-size: 0.8125rem;
font-size: 13px;
font-weight: 400;
color: var(--white-w_87-sec);
width: 100%;
@ -634,7 +596,7 @@ footer {
align-items: center;
}
.ch_label .word {
font-size: 0.6875rem;
font-size: 11px;
font-weight: 400;
color: var(--white-w_87-sec);
margin: 0.25rem 0 0.25rem 0.25rem;
@ -664,29 +626,16 @@ footer {
padding: 1rem 0 0;
}
.chart_tlt {
font-size: 0.875rem;
font-weight: 500;
color: #27D4FF;
}
.chart_tlt.cover {
width: 86%;
padding: 0.75rem 0 0 0.75rem;
background: url(../images/bg_tract_top.svg) no-repeat left top;
background-size: 100% auto;
}
.chart_result {
display: flex;
align-items: flex-end;
color: #27D4FF;
font-size: 1.5rem;
font-weight: 700;
-moz-column-gap: 0.375rem;
column-gap: 0.375rem;
}
.chart_result .unit {
font-size: 0.875rem;
font-size: 14px;
font-weight: 400;
line-height: 1.7;
}
@ -743,7 +692,7 @@ footer {
}
.user_title {
font-size: 1rem;
font-size: 16px;
font-weight: 700;
color: var(--primary-to-grayscale-to-bk);
height: 1.5rem;
@ -798,9 +747,6 @@ html[data-theme=light] .sp_logo_uniplus {
html[data-theme=light] .gnb ul li a {
color: var(--more-visible-wh_60-to-100);
}
html[data-theme=light] .gnb ul li a.on, html[data-theme=light] .gnb ul li a:hover, html[data-theme=light] .gnb ul li a:focus {
color: #0068E6;
}
html[data-theme=light] .guide_top h1 {
color: #000;
}
@ -828,69 +774,6 @@ html[data-theme=light] .btn_srch28:active:not(.selected) span img:not(.on) {
html[data-theme=light] .btn_srch28.on span img {
filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%);
}
html[data-theme=light] .btn_floating .put_drop img {
filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
}
html[data-theme=light] .btn_floating .put_see img {
filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%);
}
html[data-theme=light] .btn_floating .put_see .img_seeoff {
filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%);
}
html[data-theme=light] .btn_floating .put_see .img_see {
filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%);
}
html[data-theme=light] .btn_floating:hover:not(.disabled) .put_drop img, html[data-theme=light] .btn_floating.hover .put_drop img, html[data-theme=light] .btn_floating.selected .put_drop img {
filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%);
}
html[data-theme=light] .btn_floating:hover:not(.disabled) .put_see img, html[data-theme=light] .btn_floating.hover .put_see img, html[data-theme=light] .btn_floating.selected .put_see img {
filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%);
}
html[data-theme=light] .btn_drop .put_drop .img_drop {
filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
}
html[data-theme=light] .btn_drop .put_see img {
filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
}
html[data-theme=light] .btn_drop.hover p img, html[data-theme=light] .btn_drop.selected p img {
filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%);
}
html[data-theme=light] .btn_drop.hover img, html[data-theme=light] .btn_drop.selected img {
filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%);
}
html[data-theme=light] .btn_drop .put_see.off .img_see {
filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
}
html[data-theme=light] .btn_drop .put_see.off .img_see_off {
filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%);
}
html[data-theme=light] .btn_arrow_circle.line img {
filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
}
html[data-theme=light] .btn_arrow_circle.line.selected img, html[data-theme=light] .btn_arrow_circle.line:hover:not(.disabled) img {
filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%);
}
html[data-theme=light] .btn_arrow_l img {
filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%);
}
html[data-theme=light] .btn_arrow_l.disabled img {
opacity: 0.3;
filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(150deg) brightness(101%) contrast(102%);
}
html[data-theme=light] .btn_arrow img {
filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(150deg) brightness(101%) contrast(102%);
}
html[data-theme=light] .btn_arrow.hover img {
filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%);
}
html[data-theme=light] .btn_arrow.disabled img {
opacity: 0.3;
filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(150deg) brightness(101%) contrast(102%);
}
html[data-theme=light] .btn_arrow_s img {
filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(150deg) brightness(101%) contrast(102%);
opacity: 0.6;
}
html[data-theme=light] .arrow_box img {
filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
}
@ -904,20 +787,6 @@ html[data-theme=light] .btn_primary.disabled img {
html[data-theme=light] .btn_file img, html[data-theme=light] .preview_box img {
filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
}
html[data-theme=light] .circle32.icon img {
filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
}
html[data-theme=light] .icon_ffb img,
html[data-theme=light] .btn_icon img {
filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
}
html[data-theme=light] .icon_ffb.selected img, html[data-theme=light] .icon_ffb:hover img, html[data-theme=light] .icon_ffb:active img, html[data-theme=light] .icon_ffb:focus img,
html[data-theme=light] .btn_icon.selected img,
html[data-theme=light] .btn_icon:hover img,
html[data-theme=light] .btn_icon:active img,
html[data-theme=light] .btn_icon:focus img {
filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%);
}
html[data-theme=light] .arr_up img, html[data-theme=light] .arr_right img {
filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
}
@ -936,12 +805,6 @@ html[data-theme=light] .stepper_arrow img {
html[data-theme=light] .play_circle img {
content: url("../images/play_circle_light_20.svg");
}
html[data-theme=light] .play_btn img, html[data-theme=light] .playbar_current img, html[data-theme=light] .pagination_btn img, html[data-theme=light] .pg_prev img {
filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%);
}
html[data-theme=light] .pause_btn img, html[data-theme=light] .again_btn img {
filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
}
html[data-theme=light] .selectbox_arrow img, html[data-theme=light] .selectbox img, html[data-theme=light] .selectboxSample img {
filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
}
@ -960,15 +823,6 @@ html[data-theme=light] .selector.sm.color {
html[data-theme=light] .lnb_box img {
filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
}
html[data-theme=light] .arrival_car img {
content: url("../images/marker_arrival_car_selected_100.svg");
}
html[data-theme=light] .arrival_marker img {
content: url("../images/marker_arrival_area_selected.svg");
}
html[data-theme=light] .map_frame img {
content: url("../images/map_frame_light.svg");
}
html[data-theme=light] .main_contents {
width: 100%;
height: 100%;
@ -994,6 +848,12 @@ html[data-theme=light] .hamberger_btn {
html[data-theme=light] .logo_hd_kisa {
content: url("../images/logo_light.svg");
}
html[data-theme=light] .bell img {
content: url("../images/bell_bk_20.svg");
}
html[data-theme=light] .user img {
content: url("../images/user_bk_20.svg");
}
html[data-theme=light] .light_none {
display: none;
}

+ 12
- 125
assets/css/layout.scss View File

@ -10,16 +10,6 @@
--background-bg_01:#0A0F24;
--bg_01_40: #{$bg_default04};
--bg_02_60: rgba(4, 9, 26, 0.60);
--primary-pri_100: #{$ui_sky};
--primary-pri_80: #{$ui_sky80};
--primary-pri_60: #{$ui_sky60};
--primary-pri_50: #{$ui_sky50};
--primary-pri_40: #{$ui_sky40};
--primary-pri_30: #{$ui_sky30};
--primary-pri_20: #{$ui_sky20};
--primary-pri_12: #{$ui_sky12};
--primary-pri_12-to-bk: #{$ui_sky12};
--primary-pri_06: #{$ui_sky06};
--primary-pri_6: rgba(39, 212, 255, 0.06);
--white-w_100: #{$fc_white};
--white-w_100-sec: #{$fc_white};
@ -32,12 +22,7 @@
--white-w_20: #{$bg_grey20};
--white-w_16: #{$bg_grey16};
--white-w_12: #{$bg_grey12};
--tab-btn_default: #{$ui_blue};
--btn-btn_default: #{$ui_blue};
--btn-btn_hover: #{$ui_blue_hover};
--btn-btn_selected: #{$ui_blue_more};
--box1_border:rgba(39, 212, 255, 0.4);
--title-color: #{$ui_sky};
--bg_01_80: rgba(11, 17, 41, 0.8);
--line-wh_12-to-40: #{$bg_grey12};
--line-wh_20-to-100: #{$bg_grey20};
@ -46,7 +31,6 @@
--line-pri_40-to-wh_40: rgba(39, 212, 255, 0.40);
--line-pri_40-to-bk_40: rgba(39, 212, 255, 0.40);
--icon-pri_20-to-100: rgba(34, 212, 255, 0.20);
--primary-to-grayscale-to-bk: #{$ui_sky};
--more-bright-wh_6-to-60: #{$bg_grey06};
--white-w_6: #{$bg_grey06};
--line-pri_40-to-wh_100: rgba(39, 212, 255, 0.40);
@ -57,7 +41,6 @@
--point-error-10: rgba(219, 0, 0, 0.08);
--blur_02_60: rgba(55, 61, 82, 0.60);
--bg-blur_02_60: rgba(55, 61, 82, 0.60);
--grade-chart-gco-01:#{$fc_yellow};
--radio-default: #{$bg_grey60};
--control-disabled: #{bg_grey10};
--background-legend: rgba(74, 78, 102, 0.8);
@ -93,16 +76,7 @@
--background-bg_01: #{$fc_white};
--bg_01_40: #F3F5FD;
--bg_02_60: rgba(245, 247, 255, 0.90);
--primary-pri_100: #{$ui_blue_more};
--primary-pri_80: #{$ui_blue_more80};
--primary-pri_60: #{$ui_blue_more60};
--primary-pri_50: #{$ui_blue_more50};
--primary-pri_40: #{$ui_blue_more40};
--primary-pri_30: #{$ui_blue_more30};
--primary-pri_20: #{$ui_blue_more20};
--primary-pri_12: #{$ui_blue_more12};
--primary-pri_12-to-bk: #{$bg_black00};
--primary-pri_06: #{$ui_blue_more06};
--primary-pri_6: rgba(0, 104, 230, 0.06);
--white-w_100: #{$fc_white};
--white-w_100-sec: #{$bg_black00};
@ -115,12 +89,7 @@
--white-w_20: #{$bg_black20};
--white-w_16: #{$bg_black16};
--white-w_12: #{$bg_black12};
--tab-btn_default: #{$ui_blue};
--btn-btn_default: #{$ui_blue_hover};
--btn-btn_hover: #{$ui_blue_more};
--btn-btn_selected: #{$fc_normal};
--box1_border: #{$fc_white};
--title-color: #{$ui_blue_more};
--bg_01_80: rgba(245, 246, 250, 0.90);
--icon-pri_20-to-100 : #0067E6;
@ -138,7 +107,6 @@
--control-disabled: #{bg_grey10};
--icon-icon-selected: #{$fc_white};
--group-icon-selected: rgba(51, 143, 255, 0.40);
--map-ver2-hover: #{$fc_normal_more40};
--navigation-bg: #E1E2E5;
--etc-FNB:rgba(245, 246, 250, 0.90);
--black-bk_100: #{$fc_white};
@ -166,12 +134,10 @@
border-radius: 1.5em;
background-color: rgb(237,237,237, 0.3);
&.template {
padding: unset;
// padding: unset;
}
}
html[data-theme=light] .lightmode > .inner{
// background-color: rgba(0,0,0,0.25);
&.ver1 {
background-color: var(--PRI);
}
@ -192,12 +158,10 @@ html[data-theme=light] .lightmode > .inner{
}
.lightmode label:first-of-type{
padding: 2px;
// border-radius: 50% 0 0 50%;
border-radius: 50px;
}
.lightmode label:last-of-type{
padding: 2px;
// border-radius: 0 50% 50% 0;
border-radius: 50px;
}
.lightmode i{
@ -633,19 +597,8 @@ footer {
padding: 1rem 0 0;
}
}
.chart_tlt {
@include fs_14_medium;
color: $ui_sky;
&.cover {
width: 86%;
padding: 0.75rem 0 0 0.75rem;
background: url(../images/bg_tract_top.svg) no-repeat left top;
background-size: 100% auto;
}
}
.chart_result {
@include dflx_ae;
color: $ui_sky;
font-size: 1.5rem;
font-weight: 700;
column-gap: 0.375rem;
@ -757,7 +710,7 @@ html[data-theme=light] {
ul li a {
color: var(--more-visible-wh_60-to-100);
&.on, &:hover, &:focus {
color: $ui_blue_more;
// color: $ui_blue_more;
}
}
}
@ -790,65 +743,6 @@ html[data-theme=light] {
.btn_srch28.on{
span img {@include filter_white}
}
.btn_floating{
.put_drop img {@include filter_black}
.put_see img {@include filter_blue}
.put_see .img_seeoff {@include filter_white}
.put_see {
.img_see{@include filter_blue}
}
&:hover:not(.disabled),&.hover,&.selected {
.put_drop img {@include filter_white}
.put_see img {@include filter_white}
}
}
.btn_drop {
.put_drop .img_drop {@include filter_black}
.put_see img {@include filter_black}
&.hover, &.selected{
p {
img {@include filter_white}
}
img {@include filter_blue}
}
// split button
.put_see.off{
.img_see {@include filter_black}
.img_see_off {@include filter_blue}
}
}
.btn_arrow_circle.line {
img {@include filter_black}
&.selected,&:hover:not(.disabled){
img {@include filter_blue}
}
}
.btn_arrow_l {
img {@include filter_blue}
&.disabled{
img{
opacity: 0.3;
@include filter_black01;
}
}
}
.btn_arrow{
img {@include filter_black01}
&.hover{
img {@include filter_blue}
}
&.disabled{
img{
opacity: 0.3;
@include filter_black01;
}
}
}
.btn_arrow_s {
img {@include filter_black01;
opacity: 0.6;
}
}
.arrow_box {
img {@include filter_black;}
}
@ -910,23 +804,6 @@ html[data-theme=light] {
.lnb_box{
img{@include filter_black}
}
// map
.arrival_car {
img{
content: url("../images/marker_arrival_car_selected_100.svg");
}
}
.arrival_marker {
img{
content: url("../images/marker_arrival_area_selected.svg");
}
}
.map_frame{
img{
content: url("../images/map_frame_light.svg")
}
}
// template
.main_contents {
width: 100%;
@ -954,6 +831,16 @@ html[data-theme=light] {
.logo_hd_kisa{
content: url("../images/logo_light.svg");
}
.bell{
img {
content: url("../images/bell_bk_20.svg");
}
}
.user{
img {
content: url("../images/user_bk_20.svg");
}
}
// light모드 display none
.light_none {
display: none;

+ 84
- 119
assets/css/template.css View File

@ -223,7 +223,7 @@ footer {
}
.tmbox_text {
font-size: 0.875rem;
font-size: 14px;
font-weight: 500;
line-height: 1.3;
}
@ -334,7 +334,7 @@ footer {
margin-bottom: 0;
}
.signal_dl dt {
font-size: 0.8125rem;
font-size: 13px;
font-weight: 300;
display: flex;
justify-content: space-between;
@ -393,7 +393,7 @@ footer {
}
.map_label {
font-size: 1.25rem;
font-size: 20px;
font-weight: 700;
width: auto;
padding: 0.125rem 0.75rem 0.25rem;
@ -427,7 +427,7 @@ footer {
}
.record_title {
font-size: 1rem;
font-size: 16px;
font-weight: 700;
width: 100%;
padding: 1.25rem 1rem 1rem 0;
@ -499,7 +499,7 @@ footer {
grid-template-columns: 1.5fr 1fr;
}
.situation_box h4 {
font-size: 0.875rem;
font-size: 14px;
font-weight: 500;
color: var(--white-w_87);
}
@ -563,7 +563,7 @@ footer {
align-items: center;
}
.ch_label .word {
font-size: 0.6875rem;
font-size: 11px;
font-weight: 400;
color: rgba(255, 255, 255, 0.87);
margin: 0.25rem 0 0.25rem 0.25rem;
@ -638,7 +638,7 @@ footer {
border: 0.125rem solid #6E3DFF;
}
.record_radio .word {
font-size: 0.6875rem;
font-size: 11px;
font-weight: 300;
}
@ -694,7 +694,7 @@ footer {
}
.user_title {
font-size: 1rem;
font-size: 16px;
font-weight: 700;
color: var(--primary-to-grayscale-to-bk);
height: 1.5rem;
@ -1200,11 +1200,8 @@ body::-webkit-scrollbar:horizontal {
header {
width: 100%;
height: 56px;
height: 3.5rem;
padding: 8px 20px;
padding: 0.5rem 1.25rem;
border-radius: 10px;
height: 48px;
padding: 0px 20px 0px 18px;
}
.header_in {
@ -1232,7 +1229,7 @@ header {
}
.header_title {
font-size: 1.125rem;
font-size: 18px;
font-weight: 500;
font-weight: 600;
color: #fff;
@ -1248,38 +1245,6 @@ header {
margin: 0 0 0 1rem;
}
.alarm_zone {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
position: relative;
cursor: pointer;
transition: 0.2s all;
}
.alarm_zone:hover {
opacity: 0.8;
}
.alarm_zone .dot {
position: absolute;
right: 4px;
top: 5px;
}
.bell {
width: 20px;
height: 20px;
}
.user_zone {
display: flex;
align-items: center;
}
.user_zone .user_txt {
margin: 0px 0px 0px 8px;
}
.user_thumb {
display: flex;
align-items: center;
@ -1312,7 +1277,7 @@ header {
align-items: center;
}
.user_txt span {
font-size: 0.875rem;
font-size: 14px;
font-weight: 400;
color: #fff;
}
@ -1470,7 +1435,7 @@ header {
}
.menu_tlt {
font-size: 0.9375rem;
font-size: 15px;
font-weight: 500;
}
@ -1512,7 +1477,7 @@ header {
}
.explain {
font-size: 1rem;
font-size: 16px;
font-weight: 400;
}
@ -1571,7 +1536,7 @@ header {
}
.tab_nemo {
font-size: 0.9375rem;
font-size: 15px;
font-weight: 400;
min-width: 8.25rem;
height: 2rem;
@ -1626,7 +1591,7 @@ header {
width: 100%;
}
.netz_table thead th {
font-size: 0.875rem;
font-size: 14px;
font-weight: 500;
text-align: center;
vertical-align: middle;
@ -1640,7 +1605,7 @@ header {
border-right: 1px solid #8A8E99;
}
.netz_table tbody td {
font-size: 0.875rem;
font-size: 14px;
font-weight: 400;
text-align: center;
vertical-align: middle;
@ -1693,7 +1658,7 @@ header {
}
.caption_title {
font-size: 1rem;
font-size: 16px;
font-weight: 700;
letter-spacing: 0.5px;
padding: 0px 0px 14px;
@ -1722,14 +1687,14 @@ header {
.scope_total {
display: flex;
align-items: flex-end;
font-size: 1rem;
font-size: 16px;
font-weight: 700;
padding: 0 1.25rem 0 0;
color: #00B295;
line-height: 1;
}
.scope_total .decimal {
font-size: 0.75rem;
font-size: 12px;
font-weight: 400;
}
@ -1738,14 +1703,14 @@ header {
align-items: center;
-moz-column-gap: 0.5rem;
column-gap: 0.5rem;
font-size: 1rem;
font-size: 16px;
font-weight: 500;
}
.scope_text span {
color: rgba(0, 0, 0, 0.5);
}
.scope_text .scope_count {
font-size: 1rem;
font-size: 16px;
font-weight: 700;
}
@ -1760,7 +1725,7 @@ header {
}
.td_txt {
font-size: 0.875rem;
font-size: 14px;
font-weight: 400;
word-break: keep-all;
}
@ -1785,7 +1750,7 @@ header {
min-width: 3.25rem;
}
.td_txt.med {
font-size: 0.875rem;
font-size: 14px;
font-weight: 500;
line-height: 1.6;
}
@ -1794,7 +1759,7 @@ header {
}
.date_txt {
font-size: 0.875rem;
font-size: 14px;
font-weight: 400;
opacity: 0.4;
line-height: 1.2;
@ -1802,12 +1767,12 @@ header {
}
.td_total .td_txt {
font-size: 0.75rem;
font-size: 12px;
font-weight: 400;
line-height: 1.4;
}
.td_total.sum .td_txt {
font-size: 0.875rem;
font-size: 14px;
font-weight: 500;
color: #0068E6;
}
@ -1841,7 +1806,7 @@ header {
}
.paging_ul li a {
font-size: 0.875rem;
font-size: 14px;
font-weight: 400;
display: inline-block;
width: 1.75rem;
@ -1974,7 +1939,7 @@ header {
padding: 0 0 0.25rem;
}
.dl_enroll dt {
font-size: 0.875rem;
font-size: 14px;
font-weight: 500;
width: 6.25rem;
padding: 0 0.75rem 0 0;
@ -1998,7 +1963,7 @@ header {
width: 100%;
}
.dl_enroll dd .tlt {
font-size: 0.875rem;
font-size: 14px;
font-weight: 500;
}
@ -2120,7 +2085,7 @@ header {
letter-spacing: 1.8px;
}
.mtitle_dl dd .mtitle_exp {
font-size: 1rem;
font-size: 16px;
font-weight: 400;
color: #fff;
letter-spacing: 0.8px;
@ -2151,7 +2116,7 @@ header {
margin-top: -25px;
}
.go_ready span {
font-size: 0.875rem;
font-size: 14px;
font-weight: 400;
}
@ -2182,13 +2147,13 @@ header {
margin: 0 0 3rem;
}
.msent_dl dt {
font-size: 1.25rem;
font-size: 20px;
font-weight: 700;
margin: 0 0 1.25rem;
line-height: 1.4;
}
.msent_dl dd {
font-size: 1rem;
font-size: 16px;
font-weight: 400;
line-height: 1.8;
}
@ -2246,7 +2211,7 @@ header {
.date_put_dl dt {
display: flex;
align-items: center;
font-size: 0.875rem;
font-size: 14px;
font-weight: 500;
margin: 0 1.5rem 0 0;
line-height: 1;
@ -2383,7 +2348,7 @@ header {
opacity: 0.3;
}
.add_button span {
font-size: 1rem;
font-size: 16px;
font-weight: 500;
line-height: 1.6;
}
@ -2461,7 +2426,7 @@ header {
word-break: break-all;
}
.vol_count + .decimal {
font-size: 0.75rem;
font-size: 12px;
font-weight: 400;
color: #00B295;
}
@ -2524,7 +2489,7 @@ header {
}
.chart_unit {
font-size: 0.75rem;
font-size: 12px;
font-weight: 400;
color: rgba(0, 0, 0, 0.5);
}
@ -2623,7 +2588,7 @@ header {
}
.date {
font-size: 0.75rem;
font-size: 12px;
font-weight: 400;
color: rgba(0, 0, 0, 0.5);
}
@ -2662,7 +2627,7 @@ header {
overflow: hidden;
}
.scope_zone .chart_unit {
font-size: 0.6875rem;
font-size: 11px;
font-weight: 400;
position: absolute;
right: 12px;
@ -2714,13 +2679,13 @@ header {
padding: 0.3rem 0 0 0.5rem;
}
.reduce_sett .dl_enroll dt {
font-size: 1rem;
font-size: 16px;
font-weight: 700;
width: 10.5rem;
padding: 0 0.5rem 0 0;
}
.reduce_sett .dl_enroll dt .mini {
font-size: 0.75rem;
font-size: 12px;
font-weight: 400;
color: rgba(0, 0, 0, 0.5);
letter-spacing: -0.5px;
@ -2745,7 +2710,7 @@ footer {
padding: 0 1rem 0 0;
}
.footer_left .copy {
font-size: 0.6875rem;
font-size: 11px;
font-weight: 400;
font-weight: 300;
color: #fff;
@ -2761,7 +2726,7 @@ footer {
padding: 2px 0 0;
}
.copy_right p {
font-size: 0.75rem;
font-size: 12px;
font-weight: 400;
font-weight: 300;
color: #fff;
@ -2852,7 +2817,7 @@ footer {
line-height: 1.2;
}
.chart_inner .chart_unit {
font-size: 0.6875rem;
font-size: 11px;
font-weight: 400;
position: absolute;
right: 1rem;
@ -2928,7 +2893,7 @@ footer {
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-size: 12px;
font-weight: 400;
margin: 0 6px 0 0;
width: 26px;
@ -2944,7 +2909,7 @@ footer {
line-height: 1;
}
.seq_dl dd .call {
font-size: 0.875rem;
font-size: 14px;
font-weight: 500;
margin: 0 0.5rem 0 0;
}
@ -3006,12 +2971,12 @@ footer {
}
.terms_sent {
font-size: 0.875rem;
font-size: 14px;
font-weight: 500;
line-height: 1.4;
}
.terms_sent.full {
font-size: 1rem;
font-size: 16px;
font-weight: 700;
color: #00A388;
}
@ -3105,7 +3070,7 @@ footer {
border-radius: 8px;
}
.status_dl dt {
font-size: 0.875rem;
font-size: 14px;
font-weight: 400;
margin: 0.25rem 0.25rem 0 0;
word-break: keep-all;
@ -3228,7 +3193,7 @@ footer {
margin: 0.375rem 0 0;
}
.point_dl dd {
font-size: 0.875rem;
font-size: 14px;
font-weight: 400;
flex: 1;
}
@ -3264,7 +3229,7 @@ footer {
.timer {
display: flex;
align-items: center;
font-size: 0.6875rem;
font-size: 11px;
font-weight: 400;
}
.timer span {
@ -3345,7 +3310,7 @@ footer {
}
.panel_text p {
font-size: 1rem;
font-size: 16px;
font-weight: 400;
font-weight: 300;
line-height: 1.6;
@ -3364,13 +3329,13 @@ footer {
margin: 24px 0 0;
}
.tier_dl dt {
font-size: 0.875rem;
font-size: 14px;
font-weight: 500;
font-weight: 700;
margin: 0 0 0.25rem;
}
.tier_dl dd {
font-size: 0.875rem;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
}
@ -3405,7 +3370,7 @@ footer {
color: #00A387;
}
.tab_radio .word {
font-size: 0.875rem;
font-size: 14px;
font-weight: 500;
color: #000000;
margin: 0 0 0 0.5rem;
@ -3445,14 +3410,14 @@ select option[value=""][disabled] {
}
.td_name {
font-size: 0.875rem;
font-size: 14px;
font-weight: 400;
word-break: nowrap;
color: #0069CC;
}
.td_space {
font-size: 0.875rem;
font-size: 14px;
font-weight: 400;
width: 15rem;
margin: 0 auto;
@ -3495,7 +3460,7 @@ select option[value=""][disabled] {
}
.users_state {
font-size: 0.75rem !important;
font-size: 12px !important;
font-weight: 500 !important;
width: 3.5rem;
height: 1.375rem;
@ -3568,7 +3533,7 @@ select option[value=""][disabled] {
display: flex;
align-items: flex-end;
justify-content: center;
font-size: 0.6875rem;
font-size: 12px;
font-weight: 500;
width: 100%;
padding: 0 0 3px;
@ -3619,7 +3584,7 @@ select option[value=""][disabled] {
max-width: fit-content;
}
.toast_in .toast_text {
font-size: 0.875rem;
font-size: 14px;
font-weight: 400;
margin: 0 24px 0 12px;
line-height: 1.4;
@ -3646,7 +3611,7 @@ select option[value=""][disabled] {
background: #E6E7EB;
}
.user_rejection_list li {
font-size: 0.875rem;
font-size: 14px;
font-weight: 400;
position: relative;
padding-left: 10px;
@ -3674,13 +3639,13 @@ select option[value=""][disabled] {
margin-bottom: 0;
}
.user_approval_list li .text_01 {
font-size: 0.875rem;
font-size: 14px;
font-weight: 400;
width: 113px;
color: rgba(0, 0, 0, 0.7);
}
.user_approval_list li .text_02 {
font-size: 0.875rem;
font-size: 14px;
font-weight: 500;
}
.user_approval_list .additional_file {
@ -3720,18 +3685,18 @@ select option[value=""][disabled] {
line-height: 1;
}
.member_popup_box .member_name {
font-size: 1rem;
font-size: 16px;
font-weight: 700;
margin-bottom: 7px;
}
.member_popup_box .member_email {
font-size: 0.875rem;
font-size: 14px;
font-weight: 400;
color: rgba(0, 0, 0, 0.7);
}
.member_popup_box .member_modify,
.member_popup_box .member_logout {
font-size: 1rem;
font-size: 16px;
font-weight: 400;
width: 100%;
height: 2.75rem;
@ -3760,7 +3725,7 @@ select option[value=""][disabled] {
margin-bottom: 0;
}
.modify_confirm_list .modify_password_title {
font-size: 1rem;
font-size: 16px;
font-weight: 400;
width: 100px;
}
@ -3776,7 +3741,7 @@ select option[value=""][disabled] {
}
.form_error_msg {
font-size: 0.8125rem;
font-size: 13px;
font-weight: 400;
position: absolute;
left: 20px;
@ -3795,14 +3760,14 @@ select option[value=""][disabled] {
border-bottom: 1px solid #DCDDE0;
}
.member_modify_form .form_row .button_default {
font-size: 0.875rem;
font-size: 14px;
font-weight: 400;
height: 2rem;
border-radius: 4px;
text-align: center;
}
.member_modify_form .form_title {
font-size: 1rem;
font-size: 16px;
font-weight: 500;
width: 14.75rem;
padding: 1.687rem 1rem 0.5rem 1.25rem;
@ -3823,7 +3788,7 @@ select option[value=""][disabled] {
padding-right: 1.25rem;
}
.member_modify_form .form_error_msg {
font-size: 0.8125rem;
font-size: 13px;
font-weight: 400;
position: absolute;
left: 20px;
@ -3831,7 +3796,7 @@ select option[value=""][disabled] {
color: #DB0000;
}
.member_modify_form .remark_msg {
font-size: 0.875rem;
font-size: 14px;
font-weight: 400;
color: rgba(0, 0, 0, 0.5);
margin: 1px 0 0;
@ -3930,7 +3895,7 @@ select option[value=""][disabled] {
color: rgba(0, 0, 0, 0.5);
}
.form_head_phone .remark_msg {
font-size: 0.8125rem;
font-size: 13px;
font-weight: 400;
left: 8.5rem;
bottom: 7px;
@ -3945,7 +3910,7 @@ select option[value=""][disabled] {
width: 84px;
}
.form_file_upload .form_file_name {
font-size: 0.875rem;
font-size: 14px;
font-weight: 400;
width: auto;
max-width: 532px;
@ -3969,7 +3934,7 @@ select option[value=""][disabled] {
.form_admin_email .remark_msg {
display: flex;
align-items: flex-start;
font-size: 0.75rem;
font-size: 12px;
font-weight: 400;
bottom: 10px;
line-height: 1.5rem;
@ -3977,7 +3942,7 @@ select option[value=""][disabled] {
}
.signup_title {
font-size: 1rem;
font-size: 16px;
font-weight: 700;
}
@ -3998,14 +3963,14 @@ select option[value=""][disabled] {
padding: 0;
}
.signup_step_form .form_row .button_default {
font-size: 0.875rem;
font-size: 14px;
font-weight: 400;
height: 2rem;
border-radius: 4px;
text-align: center;
}
.signup_step_form .form_title {
font-size: 0.875rem;
font-size: 14px;
font-weight: 500;
width: 10.5rem;
padding: 0.5rem 0.5rem 0 0;
@ -4053,7 +4018,7 @@ select option[value=""][disabled] {
width: 9rem;
}
.signup_step_form .form_signup_phone .remark_msg {
font-size: 0.8125rem;
font-size: 13px;
font-weight: 400;
position: absolute;
left: 0;
@ -4071,7 +4036,7 @@ select option[value=""][disabled] {
flex-wrap: wrap;
}
.signup_step_form .form_business_registration .form_contents .remark_msg {
font-size: 0.75rem;
font-size: 12px;
font-weight: 400;
width: 100%;
line-height: 1.25rem;
@ -4099,7 +4064,7 @@ select option[value=""][disabled] {
font-weight: 700;
}
.signup_success .remark_msg {
font-size: 0.875rem;
font-size: 14px;
font-weight: 500;
margin-top: 1rem;
color: rgba(0, 0, 0, 0.5);
@ -4181,12 +4146,12 @@ select option[value=""][disabled] {
color: rgba(0, 0, 0, 0.8);
}
.pop_address_search .result_text01 {
font-size: 1rem;
font-size: 16px;
font-weight: 500;
margin-bottom: 8px;
}
.pop_address_search .result_text02 {
font-size: 0.875rem;
font-size: 14px;
font-weight: 400;
}

+ 3
- 31
assets/css/template.scss View File

@ -944,13 +944,11 @@ body::-webkit-scrollbar:horizontal{
}
header {
width:100%;
height: 56px;
height: 3.5rem;
padding:8px 20px;
padding: 0.5rem 1.25rem;
height: 48px;
padding: 0px 20px 0px 18px;
// background: $bgdb;
// border: 1px solid #000;
border-radius: 10px;
// border-radius: 10px;
}
.header_in{
@ -992,32 +990,6 @@ header {
margin: 0 0 0 1rem;
}
}
.alarm_zone{
@include dflx_ac_jcent;
width: 28px;
height: 28px;
position: relative;
cursor: pointer;
transition: 0.2s all;
&:hover{
opacity: 0.8;
}
.dot{
position: absolute;
right: 4px;
top: 5px;
}
}
.bell{
width: 20px;
height: 20px;
}
.user_zone{
@include dflx_ac;
.user_txt{
margin: 0px 0px 0px 8px;
}
}
.user_thumb{
@include dflx_ac_jcent;
position: relative;

+ 5
- 0
assets/images/bell_bk_20.svg View File

@ -0,0 +1,5 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="bell">
<path id="Icon" d="M12.4998 15.8334C12.4998 17.2141 11.3805 18.3334 9.99977 18.3334C8.61906 18.3334 7.49977 17.2141 7.49977 15.8334M11.4969 5.19882C11.8598 4.82389 12.0831 4.31304 12.0831 3.75002C12.0831 2.59943 11.1504 1.66669 9.99977 1.66669C8.84917 1.66669 7.91643 2.59943 7.91643 3.75002C7.91643 4.31304 8.13977 4.82389 8.50268 5.19882M14.9998 9.33335C14.9998 8.18408 14.473 7.08188 13.5353 6.26922C12.5976 5.45657 11.3258 5.00002 9.99977 5.00002C8.67368 5.00002 7.40192 5.45657 6.46423 6.26922C5.52655 7.08188 4.99977 8.18408 4.99977 9.33335C4.99977 11.2349 4.52821 12.6255 3.93982 13.6206C3.26922 14.7547 2.93391 15.3218 2.94715 15.4572C2.9623 15.6122 2.9902 15.6611 3.11588 15.753C3.22574 15.8334 3.77769 15.8334 4.88159 15.8334H15.1179C16.2218 15.8334 16.7738 15.8334 16.8837 15.753C17.0093 15.6611 17.0372 15.6122 17.0524 15.4572C17.0656 15.3218 16.7303 14.7547 16.0597 13.6206C15.4713 12.6255 14.9998 11.2349 14.9998 9.33335Z" stroke="black" stroke-opacity="0.87" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</svg>

+ 5
- 0
assets/images/bell_fff_20.svg View File

@ -0,0 +1,5 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="bell">
<path id="Icon" d="M12.4998 15.8333C12.4998 17.2141 11.3805 18.3333 9.99977 18.3333C8.61906 18.3333 7.49977 17.2141 7.49977 15.8333M11.4969 5.1988C11.8598 4.82387 12.0831 4.31302 12.0831 3.75001C12.0831 2.59941 11.1504 1.66667 9.99977 1.66667C8.84917 1.66667 7.91643 2.59941 7.91643 3.75001C7.91643 4.31302 8.13977 4.82387 8.50268 5.1988M14.9998 9.33334C14.9998 8.18407 14.473 7.08187 13.5353 6.26921C12.5976 5.45655 11.3258 5.00001 9.99977 5.00001C8.67368 5.00001 7.40192 5.45655 6.46423 6.26921C5.52655 7.08187 4.99977 8.18407 4.99977 9.33334C4.99977 11.2348 4.52821 12.6255 3.93982 13.6206C3.26922 14.7547 2.93391 15.3218 2.94715 15.4572C2.9623 15.6122 2.9902 15.6611 3.11588 15.753C3.22574 15.8333 3.77769 15.8333 4.88159 15.8333H15.1179C16.2218 15.8333 16.7738 15.8333 16.8837 15.753C17.0093 15.6611 17.0372 15.6122 17.0524 15.4572C17.0656 15.3218 16.7303 14.7547 16.0597 13.6206C15.4713 12.6255 14.9998 11.2348 14.9998 9.33334Z" stroke="white" stroke-opacity="0.87" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</svg>

+ 8
- 0
assets/images/user_bk_20.svg View File

@ -0,0 +1,8 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="user-02">
<g id="Icon">
<path d="M10 12.5C7.35831 12.5 5.00904 13.7755 3.51337 15.755C3.19146 16.181 3.0305 16.394 3.03577 16.6819C3.03984 16.9043 3.17951 17.1849 3.35451 17.3222C3.58103 17.5 3.89493 17.5 4.52273 17.5H15.4773C16.1051 17.5 16.4191 17.5 16.6456 17.3222C16.8206 17.1849 16.9602 16.9043 16.9643 16.6819C16.9696 16.394 16.8086 16.181 16.4867 15.755C14.991 13.7755 12.6418 12.5 10 12.5Z" stroke="black" stroke-opacity="0.87" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10 10C12.0711 10 13.75 8.32107 13.75 6.25C13.75 4.17893 12.0711 2.5 10 2.5C7.92897 2.5 6.25004 4.17893 6.25004 6.25C6.25004 8.32107 7.92897 10 10 10Z" stroke="black" stroke-opacity="0.87" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</g>
</svg>

+ 8
- 0
assets/images/user_fff_20.svg View File

@ -0,0 +1,8 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="user-02">
<g id="Icon">
<path d="M10 12.5C7.35831 12.5 5.00904 13.7755 3.51337 15.755C3.19146 16.181 3.0305 16.394 3.03577 16.6819C3.03984 16.9043 3.17951 17.1849 3.35451 17.3222C3.58103 17.5 3.89493 17.5 4.52273 17.5H15.4773C16.1051 17.5 16.4191 17.5 16.6456 17.3222C16.8206 17.1849 16.9602 16.9043 16.9643 16.6819C16.9696 16.394 16.8086 16.181 16.4867 15.755C14.991 13.7755 12.6418 12.5 10 12.5Z" stroke="white" stroke-opacity="0.87" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10 10C12.0711 10 13.75 8.32107 13.75 6.25C13.75 4.17893 12.0711 2.5 10 2.5C7.92897 2.5 6.25004 4.17893 6.25004 6.25C6.25004 8.32107 7.92897 10 10 10Z" stroke="white" stroke-opacity="0.87" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</g>
</svg>

Write Preview
Loading…
Cancel
Save