You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1709 lines
41 KiB
1709 lines
41 KiB
/*가이드에서만 쓰이는 레이아웃 스타일*/
|
|
|
|
@charset "utf-8";
|
|
@import '_mixin.scss';
|
|
|
|
:root{
|
|
--bg_02: #04091A;
|
|
--bg_02_template: #050A1F;
|
|
--bg_01:#0A0F24;
|
|
--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};
|
|
--white-w_87: #{$bg_grey87};
|
|
--white-w_87-sec: #{$bg_grey87};
|
|
--white-w_60: #{$bg_grey60};
|
|
--white-w_40: #{$bg_grey40};
|
|
--white-w_40-sec: #{$bg_grey40};
|
|
--white-w_30: #{$bg_grey30};
|
|
--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};
|
|
--line-wh_30-to-60: #{$bg_grey30};
|
|
--line-wh_12-to-100: #{$bg_grey12};
|
|
--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);
|
|
--more-bright-wh_16-to-6: #{$bg_grey16};
|
|
--more-bright-wh_12-to-6: #{$bg_grey12};
|
|
--more-visible-wh_20-to-12: #{$bg_grey20};
|
|
--more-visible-wh_6-to-100: #{$bg_grey06};
|
|
--more-visible-wh_6-to-60: #{$bg_grey06};
|
|
--more-visible-wh_6-to-bk: #{$bg_grey06};
|
|
--more-visible-wh_60-to-12: #{$bg_grey60};
|
|
--more-visible-wh_60-to-100: #{$bg_grey60};
|
|
--more-visible-wh_12-to-6: #{$bg_grey12};
|
|
--more-visible-wh_16-to-6: #{$bg_grey16};
|
|
--more-visible-wh_20-to-12: #{$bg_grey20};
|
|
--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);
|
|
--etc-bg: #04091A;
|
|
--etc-popup_tit: rgba(39, 212, 255, 0.60);
|
|
--hero-notification_01: #{$bg_black00};
|
|
--hero-notification_02: #{$bg_black40};
|
|
--hero-notification_03: #{$bg_black40};
|
|
--hero-notification-border-top: rgba(39, 212, 255, 0.00);
|
|
--hero-notification-border-bottom: rgba(39, 212, 255, 0.00);
|
|
--hero-border : rgba(39, 212, 255, 1);
|
|
--background-blur_0260: rgba(56, 61, 82, 0.60);
|
|
--point-error: #D60000;
|
|
--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);
|
|
--icon-icon-selected: rgba(39, 212, 255, 0.40);
|
|
--group-icon-selected: rgba(39, 212, 255, 0.40);
|
|
--map-ver2-hover: rgba(39, 212, 255, 0.40);
|
|
--background-blur_02_60: rgba(55, 61, 82, 0.60);
|
|
--background-blur_01_20: rgba(162, 164, 184, 0.20);
|
|
--navigation-bg: #1F2333;
|
|
--etc-FNB: rgba(39, 212, 255, 0.12);
|
|
--black-bk_100: #{$bg_black00};
|
|
--etc-b_text: #338FFF;
|
|
--etc-b_text2: #338FFF;
|
|
|
|
// KISA
|
|
--PRI: #84C01D;
|
|
--bg_body: #030914;
|
|
|
|
}
|
|
:root[data-theme=light] {
|
|
--bg_02: #{$fc_white};
|
|
--bg_02_template: #DCDDE0;
|
|
--bg_01: #F5F6FA;
|
|
--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};
|
|
--white-w_87: #{$bg_black87};
|
|
--white-w_87-sec: #{$bg_black00};
|
|
--white-w_60: #{$bg_black60};
|
|
--white-w_40: #{$bg_black40};
|
|
--white-w_40-sec: #{$bg_grey40};
|
|
--white-w_30: #{$bg_black30};
|
|
--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);
|
|
--line-wh_12-to-40: #{$bg_grey40};
|
|
--line-wh_20-to-100: #{$fc_white};
|
|
--line-wh_30-to-60: #{$bg_grey60};
|
|
--line-wh_12-to-100: #{$fc_white};
|
|
--line-pri_40-to-wh_40: #{$bg_grey40};
|
|
--line-pri_40-to-bk_40: #{$bg_black40};
|
|
--icon-pri_20-to-100 : #0067E6;
|
|
--more-bright-wh_16-to-6: #{$bg_black06};
|
|
--more-bright-wh_12-to-6: #{$bg_black06};
|
|
--more-visible-wh_20-to-12: #{$bg_black12};
|
|
--more-visible-wh_6-to-100: #{$fc_white};
|
|
--more-visible-wh_6-to-60: #{$bg_grey60};
|
|
--more-visible-wh_6-to-bk: #{$bg_black00};
|
|
--more-visible-wh_60-to-12: #{$bg_black12};
|
|
--more-visible-wh_60-to-100: #{$bg_black00};
|
|
--more-visible-wh_12-to-6: #{$bg_black06};
|
|
--more-visible-wh_16-to-6: #{$bg_black06};
|
|
--more-visible-wh_20-to-12: #{$bg_black12};
|
|
--primary-to-grayscale-to-bk: #{$bg_black00};
|
|
--more-bright-wh_6-to-60 : #{$bg_grey60};
|
|
--white-w_6: #{$bg_black06};
|
|
--line-pri_40-to-wh_100: #{$fc_white};
|
|
--etc-bg: #{$fc_white};
|
|
--etc-popup_tit: rgba(0, 104, 230, 0.80);
|
|
--hero-notification_01: #{$bg_grey00};
|
|
--hero-notification_02: #{$bg_grey60};
|
|
--hero-notification_03: #{$bg_grey80};
|
|
--hero-notification-border-top: rgba(0, 104, 230, 0.00);
|
|
--hero-notification-border-bottom: rgba(0, 104, 230, 0.00);
|
|
--hero-border: rgba(0, 104, 230, 0.80);
|
|
--background-blur_0260: rgba(56, 61, 82, 0.60);
|
|
--point-error: #D60000;
|
|
--point-error-10: rgba(219, 0, 0, 0.08);
|
|
--blur_02_60: #{$bg_grey90};
|
|
--bg-blur_02_60: rgba(55, 61, 82, 0.60);
|
|
--grade-chart-gco-01: #FC5C34;
|
|
--radio-default: #{$bg_black60};
|
|
--control-disabled: #{bg_grey10};
|
|
--icon-icon-selected: #{$fc_white};
|
|
--group-icon-selected: rgba(51, 143, 255, 0.40);
|
|
--map-ver2-hover: #{$fc_normal_more40};
|
|
--background-blur_02_60: rgba(55, 61, 82, 0.60);
|
|
--background-blur_01_20: rgba(245, 246, 250, 0.90);
|
|
--navigation-bg: #E1E2E5;
|
|
--etc-FNB:rgba(245, 246, 250, 0.90);
|
|
--black-bk_100: #{$fc_white};
|
|
--etc-b_text: #139DF2;
|
|
|
|
// KISA
|
|
--PRI: #87C718;
|
|
--bg_body: #030914;
|
|
|
|
}
|
|
/*mode button*/
|
|
.lightmode > .inner{
|
|
position: relative;
|
|
display: inline-flex;
|
|
padding: 0.313rem;
|
|
border-radius: 1.5em;
|
|
background-color: rgb(237,237,237, 0.3);
|
|
&.template {
|
|
padding: unset;
|
|
}
|
|
}
|
|
html[data-theme=light] .lightmode > .inner{
|
|
background-color: rgba(0,0,0,0.25);
|
|
}
|
|
.lightmode label {
|
|
cursor: pointer;
|
|
}
|
|
.lightmode label:first-of-type{
|
|
padding: 0.313rem 0.313rem 0.313rem 0.625rem;
|
|
border-radius: 50% 0 0 50%;
|
|
}
|
|
.lightmode label:last-of-type{
|
|
padding: 0.313rem 0.625rem 0.313rem 0.313rem;
|
|
border-radius: 0 50% 50% 0;
|
|
}
|
|
.lightmode i{
|
|
font-size: 1.2em;
|
|
color: #aaa;
|
|
}
|
|
.lightmode input[type=radio]{
|
|
display: none;
|
|
}
|
|
.lightmode input[type=radio]:checked + label > i {
|
|
color: rgba(135, 199, 24, 1);
|
|
transition: all 0.35s ease-in-out;
|
|
}
|
|
/**/
|
|
|
|
/*Contents*/
|
|
.guide_back {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 0;
|
|
}
|
|
.guide_wrap {
|
|
background: var(--etc-bg);
|
|
color: var(--white-w_87);
|
|
position: relative;
|
|
width: 100%;
|
|
min-height: 100%;
|
|
overflow: hidden;
|
|
padding: 1.875rem 0;
|
|
&.grey{
|
|
background-color: #1A1D29;
|
|
}
|
|
&.two_line{
|
|
padding: 3.75rem 0;
|
|
}
|
|
&.cards{
|
|
background: var(--bg_01);
|
|
}
|
|
&.navigation{
|
|
background: var(--navigation-bg);
|
|
}
|
|
}
|
|
.guide_center{
|
|
width: 77.5rem;
|
|
margin: 0 auto;
|
|
padding: 1.25rem;
|
|
&.width1720 {
|
|
width: 107.5rem;
|
|
}
|
|
}
|
|
.guide_top{
|
|
@include dflx_ae_jbet;
|
|
column-gap: 1rem;
|
|
width: 100%;
|
|
height: 4.75rem;
|
|
padding: 0 0 1rem;
|
|
border-bottom: 0.063rem solid var(--white-w_30);
|
|
h1{
|
|
@include fs_40_bold;
|
|
color: #fff;
|
|
}
|
|
}
|
|
html[data-theme=light] .guide_top{
|
|
h1{
|
|
color: #000;
|
|
}
|
|
}
|
|
.Gr_contents{
|
|
width: 100%;
|
|
margin: 2.5rem 0 4.375rem;
|
|
}
|
|
.comp_top{
|
|
@include dflx_ae_jbet;
|
|
column-gap: 1rem;
|
|
width: 100%;
|
|
padding: 0 0 1.875rem;
|
|
h2{
|
|
@include fs_24_bold;
|
|
color: var(--white-w_87);
|
|
}
|
|
}
|
|
.comp_dl{
|
|
width: 100%;
|
|
display: flex;
|
|
column-gap: 0.75rem;
|
|
margin: 0 0 1.5rem;
|
|
}
|
|
.comp_dt{
|
|
@include fs_16_medium;
|
|
width: 6.25rem;
|
|
padding: 1.25rem 0 0 0;
|
|
}
|
|
.comp_dd{
|
|
flex: 1;
|
|
}
|
|
.compline{
|
|
@include dflx_ac;
|
|
flex-wrap: wrap;
|
|
margin: 0.75rem 0;
|
|
column-gap: 0.5rem;
|
|
&.box{
|
|
background: var(--white-w_6);
|
|
}
|
|
}
|
|
.comp_size{
|
|
@include fs_12_regular;
|
|
color: $bg_grey60;
|
|
width: 2.5rem;
|
|
text-align: center;
|
|
}
|
|
.components{
|
|
@include dflx_ac;
|
|
flex: 1;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.flex_wrap {flex-wrap: wrap !important}
|
|
.flex_one{flex:1 !important}
|
|
|
|
.usage_box{
|
|
width: 53rem;
|
|
height: 46.688rem;
|
|
padding: 2.5rem;
|
|
border-radius: 0.5rem;
|
|
background: var(--white-w_6);
|
|
}
|
|
.card_box{
|
|
height: 100%;
|
|
padding: 0.625rem;
|
|
background: var(--white-w_6);
|
|
&.dark {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
.black_box{
|
|
width: 33.75rem;
|
|
padding: 1.25em;
|
|
background: var(--white-w_6);
|
|
}
|
|
|
|
/*template*/
|
|
footer {
|
|
position: fixed;
|
|
width: 100%;
|
|
bottom: 0;
|
|
z-index: 200;
|
|
}
|
|
.main_back {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
.main_wrap {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: var(--bg_02_template);
|
|
}
|
|
.main_contents {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
background: url("../images/background_img.png");
|
|
background-repeat: no-repeat;
|
|
background-size : cover !important;
|
|
}
|
|
.marker_wrap {
|
|
position: absolute;
|
|
}
|
|
.notification_box {
|
|
&.main {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 3.5rem;
|
|
transform: translateX(-50%);
|
|
z-index: 80;
|
|
}
|
|
&.hide {
|
|
.notification_bg {
|
|
min-height: 0;
|
|
height: 0;
|
|
border-width: 0.063rem 0 0 0;
|
|
}
|
|
.btn_notification {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
}
|
|
.board_line {
|
|
&.signal {
|
|
&.right {
|
|
position: absolute;
|
|
display: flex;
|
|
top: 3.5rem;
|
|
right: 1.25rem;
|
|
z-index: 100;
|
|
}
|
|
}
|
|
}
|
|
.box_line {
|
|
&.left {
|
|
position: absolute;
|
|
top: 3.5rem;
|
|
left: 1.25rem;
|
|
z-index: 100;
|
|
}
|
|
&.right {
|
|
position: absolute;
|
|
top: 3.5rem;
|
|
right: 1.25rem;
|
|
z-index: 100;
|
|
}
|
|
}
|
|
.infowindow_box {
|
|
&.main {
|
|
top: auto;
|
|
bottom: calc(100% + 0.125rem) !important;
|
|
left: 50%;
|
|
transform: translate(-50%, 0);
|
|
position: absolute;
|
|
background: var(--bg_01);
|
|
border: 0.063rem solid var(--line-pri_40-to-wh_100) !important;
|
|
.infowindow_title {
|
|
color: var(--white-w_87-sec);
|
|
}
|
|
}
|
|
}
|
|
.label_tag {
|
|
&.main_label {
|
|
background: var(--white-w_30)
|
|
}
|
|
&.main_info {
|
|
background: var(--white-w_30)
|
|
}
|
|
}
|
|
// scroll
|
|
.scroll {
|
|
&.sc_y {
|
|
&.table {
|
|
height: 8.25rem;
|
|
padding: 0;
|
|
}
|
|
&.signal {
|
|
padding: 0;
|
|
margin-right: 0.5rem;
|
|
}
|
|
}
|
|
}
|
|
// accordion
|
|
.accordion_paragraph {
|
|
&.signal {
|
|
padding: 0 0.75rem 1.25rem 1.25rem;
|
|
height: 16.75rem;
|
|
}
|
|
}
|
|
.footer_in {
|
|
@include dflx_as_jbet;
|
|
width: 100%;
|
|
padding-left: 1.25rem;
|
|
padding-right: 1.25rem;
|
|
padding-bottom: 1.25rem;
|
|
}
|
|
// table
|
|
.table_box {
|
|
&.signal {
|
|
tr {
|
|
&.selected, &:focus, &.hover {
|
|
background: var(--primary-pri_12);
|
|
}
|
|
}
|
|
th {
|
|
position: static;
|
|
//height: 2.25rem;
|
|
height: 2rem;
|
|
}
|
|
th, td:not(.disable), td:not(.disabled) {
|
|
border-right: 0.063rem solid rgba(255, 255, 255, 0.12);
|
|
&:last-child {border-right: 0;}
|
|
}
|
|
td {
|
|
height: 1.75rem;
|
|
//height: 2.25rem;
|
|
//border-top: 0.188rem solid $bg_default !important;
|
|
border-top: 0.125rem solid var(--etc-bg) !important;
|
|
p {
|
|
text-align: center !important;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.user_table {
|
|
@include fs_13_regular;
|
|
color: var(--white-w_87-sec);
|
|
width: 100%;
|
|
border-collapse:separate;
|
|
border-spacing: 0 0.125rem;
|
|
tr {
|
|
//background: var(--more-visible-wh_16-to-6);
|
|
&.selected,
|
|
&:hover, &:focus, &.hover {
|
|
//background: rgba(39, 212, 255, 0.2);
|
|
background: var(--primary-pri_12);
|
|
}
|
|
}
|
|
th {
|
|
position: relative;
|
|
z-index: 1;
|
|
top: 0;
|
|
height: 2.25rem;
|
|
background: $bg_grey16;
|
|
background: var(--more-visible-wh_6-to-100);
|
|
background: var(--more-visible-wh_16-to-6);
|
|
//background: #2c313f;
|
|
font-weight: 500;
|
|
}
|
|
th, td {
|
|
border-right: 0.063rem solid var(--white-w_12);
|
|
&:last-child {border-right: 0;}
|
|
}
|
|
td {
|
|
height: 2.25rem;
|
|
border-top: 0.188rem solid transparent !important;
|
|
}
|
|
td.on {
|
|
background: rgba(39, 212, 255, 0.2);
|
|
}
|
|
.row_type1 {
|
|
background: $bg_grey16;
|
|
}
|
|
// 표 색상
|
|
.row_type2 {
|
|
background: var(--more-visible-wh_6-to-100);
|
|
}
|
|
.row_error {
|
|
background: rgba(219, 0, 0, 0.08);
|
|
color: #FF1F55;
|
|
}
|
|
}
|
|
.arrow {
|
|
&.left {transform: rotate(180deg);}
|
|
&.up {transform: rotate(270deg);}
|
|
&.down {transform: rotate(90deg);}
|
|
}
|
|
.grey_box {
|
|
@include dflx;
|
|
@include backFilter;
|
|
top: 33%;
|
|
left: 30%;
|
|
&.login {
|
|
z-index: 0;
|
|
width: 44.563rem;
|
|
padding: 3rem;
|
|
border-radius: 0.125rem;
|
|
border: 0.063rem solid $bg_grey12;
|
|
background: rgba(162, 164, 184, 0.20);
|
|
backdrop-filter: blur(3.75rem);
|
|
p {
|
|
position: relative;
|
|
z-index: 200;
|
|
width: 0.063rem;
|
|
background: rgba(255, 255, 255, 0.20);
|
|
align-self: stretch;
|
|
}
|
|
}
|
|
&.error {
|
|
display: block;
|
|
z-index: 0;
|
|
width: 44.563rem;
|
|
padding: 5rem;
|
|
border-radius: 0.125rem;
|
|
border: 0.063rem solid rgba(255, 255, 255, 0.30);
|
|
//background: var(--bg_01_80);
|
|
background: var(--background-blur_01_20);
|
|
backdrop-filter: blur(3.75rem);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.error_box {
|
|
@include dflx;
|
|
@include backFilter;
|
|
position: absolute;
|
|
padding: 3rem;
|
|
top: 33%;
|
|
left: 30%;
|
|
z-index: 0;
|
|
width: 44.563rem;
|
|
height: 18.25rem;
|
|
border-radius: 0.125rem;
|
|
border: 0.063rem solid rgba(255, 255, 255, 0.21);
|
|
background: rgba(162, 164, 184, 0.20);
|
|
backdrop-filter: blur(3.75rem);
|
|
}
|
|
.marker_main {
|
|
position: absolute;
|
|
bottom: 40%;
|
|
left: 50%;
|
|
}
|
|
.indicator{
|
|
&.main {
|
|
padding: 1.25rem 0.6rem 1.25rem 1.25rem;
|
|
}
|
|
&.signal {
|
|
padding: 0;
|
|
}
|
|
}
|
|
.indi_conts {
|
|
&.del {display: none}
|
|
&.signal {margin: 0}
|
|
}
|
|
.tmbox_text {
|
|
@include fs_14_medium;
|
|
line-height: 1.3;
|
|
color: var(--white-w_87-sec);
|
|
}
|
|
.tmbox{
|
|
&.signal {
|
|
background-color: transparent;
|
|
padding: 0;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
}
|
|
// 프로필
|
|
.hd_profile{
|
|
position: relative;
|
|
width: 1.875rem;
|
|
height: 1.25rem;
|
|
.member_popover{
|
|
display: none;
|
|
}
|
|
&.profile_open{
|
|
.member_popover, .member_toggle{
|
|
display: block;
|
|
}
|
|
.btn_profile .comma_under8 {
|
|
opacity: 1;
|
|
transform: rotate(180deg);
|
|
}
|
|
.profile20{
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
// 마커
|
|
.marker_img_selected {
|
|
display: none;
|
|
}
|
|
.marker_main {
|
|
.tooltip_parents, .infowindow_box.main.on{
|
|
display: none;
|
|
}
|
|
&.marker_hide {
|
|
.tooltip_parents, .infowindow_box.main.on{
|
|
display: block;
|
|
}
|
|
.img_off {display: none !important;}
|
|
.marker_img_selected {display: block !important;}
|
|
}
|
|
}
|
|
.fab_wrap{
|
|
position: absolute;
|
|
top: 0%;
|
|
left: 108%;
|
|
margin-left: 0.5rem;
|
|
}
|
|
// 범례
|
|
.popover_box {
|
|
&.main {
|
|
position: absolute;
|
|
display: none;
|
|
bottom: 3rem;
|
|
left: -2.5rem;
|
|
z-index: 100;
|
|
&.legend {
|
|
display: block;
|
|
}
|
|
&.pop {
|
|
display: block;
|
|
}
|
|
&.pop_hide {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
// 신호최적화
|
|
.signal_board {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.signal_content {
|
|
@include dflx_ac_jcent;
|
|
column-gap: 1rem;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: var(--bg_02_template);
|
|
}
|
|
.signal_body {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: url("../images/signal_body_img.png");
|
|
background-repeat: no-repeat;
|
|
background-size : cover !important;
|
|
}
|
|
.accordion_box {
|
|
position: absolute;
|
|
margin-top: 0.5rem;
|
|
}
|
|
.indi_top {
|
|
&.signal {
|
|
height: 3.5rem;
|
|
padding: 1.25rem 1rem 1.25rem;
|
|
}
|
|
}
|
|
.signal_dl {
|
|
@include dflx_ac;
|
|
//width: 100%;
|
|
margin: 0.5rem 0;
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
dt {
|
|
@include fs_13_light;
|
|
@include dflx_jbet;
|
|
width: 4rem;
|
|
padding: 0 1rem 0 0;
|
|
color: var(--white-w_87-sec);
|
|
}
|
|
dd {
|
|
@include dflx_ac_jbet;
|
|
flex: 1;
|
|
column-gap: 0.25rem;
|
|
.wrput{
|
|
width: 100%;
|
|
}
|
|
.ch_radio:last-child{
|
|
padding: 0;
|
|
}
|
|
}
|
|
&.check {
|
|
margin: 1rem 0;
|
|
}
|
|
}
|
|
// accordion
|
|
.accordion_block {
|
|
// 포인트
|
|
&.signal {
|
|
@include backFilter;
|
|
.accordion_title:hover:not(.levle2), .hover.accordion_title,
|
|
.accordion_title:focus {
|
|
background: var(--primary-pri_20);
|
|
cursor: pointer;
|
|
}
|
|
.accordion_title {
|
|
background: var(--primary-pri_20);
|
|
&:hover:not(.disabled),
|
|
&:hover:not(.point.disabled),
|
|
&:focus:not(.disabled) {
|
|
background: var(--primary-pri_20);
|
|
}
|
|
}
|
|
.accordion_contents {
|
|
background: rgba(255, 255, 255, 0.06);
|
|
}
|
|
.accordion_contents.signal {
|
|
padding: unset;
|
|
}
|
|
}
|
|
}
|
|
// map label
|
|
.map_label_line {
|
|
@include dflx_ac_jcent;
|
|
position: absolute;
|
|
width: 100%;
|
|
bottom: 1.5rem;
|
|
padding: 0.125rem 0.75rem;
|
|
}
|
|
.map_label {
|
|
@include fs_20_bold;
|
|
width: auto;
|
|
padding: 0.125rem 0.75rem 0.25rem;
|
|
background-color: #0B1129;
|
|
color: #fff;
|
|
}
|
|
// 상황관리이력
|
|
.record_wrap {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding-top: 5rem;
|
|
}
|
|
.record_content {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 1.25rem;
|
|
display: grid;
|
|
grid-auto-rows: 25.75rem auto;
|
|
row-gap: 1rem;
|
|
}
|
|
.record_box {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 0.063rem solid var(--line-pri_40-to-wh_40);
|
|
background: var(--bg_01_80);
|
|
box-shadow: 0.25rem 0.25rem 1rem 0 rgba(4, 9, 26, 0.16);
|
|
backdrop-filter: blur(1.875rem);
|
|
padding: 0 1.25rem 1.25rem 1.25rem;
|
|
}
|
|
.record_title {
|
|
@include fs_16_bold;
|
|
width: 100%;
|
|
padding: 1.25rem 1rem 1rem 0;
|
|
color: var(--primary-to-grayscale-to-bk);
|
|
}
|
|
.record_box_content {
|
|
display: flex;
|
|
column-gap: 1rem;
|
|
width: 100%;
|
|
height: calc(100% - 3.25rem);
|
|
}
|
|
.record_grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr 1fr 2fr 1.5fr;
|
|
grid-template-rows: 8.125rem auto;
|
|
column-gap: 1rem;
|
|
row-gap: 1rem;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.record_top {
|
|
display: grid;
|
|
grid-column-gap: 1rem;
|
|
width: 9rem;
|
|
}
|
|
.chart_cont_box {
|
|
height: 100%;
|
|
width: 9rem;
|
|
}
|
|
.diagon_cont_box {
|
|
display: grid;
|
|
grid-column-gap: 1rem;
|
|
}
|
|
.diagon_cont {
|
|
&.record {
|
|
width: 9rem;
|
|
height: 4.875rem;
|
|
}
|
|
}
|
|
.situation_box {
|
|
padding: 0.75rem;
|
|
border-radius: 0.125rem;
|
|
background: var(--more-visible-wh_6-to-100);
|
|
&.chart {
|
|
@include dflx_dcol_jbet;
|
|
grid-row: 1/3;
|
|
}
|
|
&.case1 {
|
|
grid-row: 1/2;
|
|
grid-column: 5/6;
|
|
}
|
|
&.case2 {
|
|
grid-row: 1/2;
|
|
grid-column: 6/7;
|
|
}
|
|
&.event {
|
|
display: grid;
|
|
grid-column: 5/7;
|
|
grid-template-columns: 1.5fr 1fr;
|
|
}
|
|
h4{
|
|
@include fs_14_medium;
|
|
color: var(--white-w_87-sec);
|
|
}
|
|
}
|
|
.case_wrap {
|
|
@include dflx;
|
|
column-gap: 0.5rem;
|
|
width: 100%;
|
|
height: calc(100% - 1.125rem);
|
|
}
|
|
.case_box {
|
|
padding: 0.25rem;
|
|
border-radius: 0.125rem;
|
|
background: var(--white-w_6);
|
|
width: 100%;
|
|
.case_number {
|
|
@include dflx_ac_jcent;
|
|
font-weight: 700;
|
|
width: 100%;
|
|
height: calc(100% - 0.875rem);
|
|
color: var(--white-w_87);
|
|
}
|
|
}
|
|
.case_grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
column-gap: 0.5rem;
|
|
row-gap: 0.5rem;
|
|
}
|
|
.chart_box {
|
|
@include dflx_ac_jcent;
|
|
height: calc(100% - 0.875rem);
|
|
column-gap: 2.5rem;
|
|
}
|
|
.rate_content {
|
|
display: grid;
|
|
row-gap: 1rem;
|
|
height: calc(100% - 3.25rem);
|
|
}
|
|
.rate_box {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0.75rem;
|
|
border-radius: 0.125rem;
|
|
background: var(--more-visible-wh_6-to-100);
|
|
}
|
|
.ch_label{
|
|
@include dflx_ac;
|
|
.word{
|
|
@include fs_11_regular;
|
|
color: var(--white-w_87-sec);
|
|
margin: 0.25rem 0 0.25rem 0.25rem;
|
|
line-height: 1.1;
|
|
word-break: keep-all
|
|
}
|
|
}
|
|
.chart_cont{
|
|
@include dflx_ac_jcent;
|
|
position: relative;
|
|
width: 9rem;
|
|
height: 4.891rem;
|
|
padding: 0.5rem;
|
|
overflow: hidden;
|
|
background: url(../images/bg_tract.svg) no-repeat left top;
|
|
background-size: 100% 100%;
|
|
.chart_tlt {
|
|
position: absolute;
|
|
left: 1.25rem;
|
|
top: 1.25rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.chart_result{
|
|
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;
|
|
.unit{
|
|
@include fs_14_regular;
|
|
line-height: 1.7;
|
|
}
|
|
}
|
|
// check box
|
|
.record_radio {
|
|
@include dflx_ac;
|
|
cursor: pointer;
|
|
.word {
|
|
color: var(--white-w_87-sec);
|
|
}
|
|
&.on {
|
|
.radio {
|
|
background-color: #fff;
|
|
border: 0.25rem solid #27d4ff;
|
|
}
|
|
.word {
|
|
color: var(--white-w_87-sec);
|
|
}
|
|
}
|
|
.radio {
|
|
display: inline-block;
|
|
width: 0.9375rem;
|
|
height: 0.9375rem;
|
|
background-color: rgba(255, 255, 255, 0.7);
|
|
border-radius: 100%;
|
|
margin: 0 0.5rem 0 0;
|
|
&.mini{
|
|
width: 0.625rem;
|
|
height: 0.625rem;
|
|
border: 0.125rem solid #27d4ff;
|
|
margin: 0 0.375rem 0 0;
|
|
}
|
|
&.green {border: 0.125rem solid #16D9AB}
|
|
&.blue {border: 0.125rem solid #07F}
|
|
&.dark_blue {border: 0.125rem solid #0E44E5}
|
|
&.purple {border: 0.125rem solid #8972FF}
|
|
&.dark_purple {border: 0.125rem solid #6E3DFF}
|
|
}
|
|
.word {
|
|
@include fs_11_light;
|
|
}
|
|
}
|
|
// 사용자 관리 user
|
|
.user_wrap {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding-top: 2.5rem;
|
|
}
|
|
.user_content {
|
|
display: flex;
|
|
column-gap: 1rem;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 1.25rem;
|
|
}
|
|
.personal_box, .system_box {
|
|
@include backFilter;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 0.063rem solid var(--line-pri_40-to-wh_40);
|
|
background: var(--bg_01_80);
|
|
box-shadow: 0.25rem 0.25rem 1rem 1rem rgba(4, 9, 26, 0.16);
|
|
width: 28.625rem;
|
|
}
|
|
.user_box {
|
|
@include backFilter;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 1.25rem;
|
|
border: 0.063rem solid var(--line-pri_40-to-wh_40);
|
|
background: var(--bg_01_80);
|
|
box-shadow: 0.25rem 0.25rem 1rem 1rem rgba(4, 9, 26, 0.16);
|
|
flex: 1;
|
|
}
|
|
.table_inner {
|
|
margin-top: 0.75rem;
|
|
width: 100%;
|
|
height: calc(100% - 2.625rem);
|
|
}
|
|
.title_box {
|
|
@include dflx_ac_jbet;
|
|
flex-wrap: wrap;
|
|
}
|
|
.user_title {
|
|
@include fs_16_bold;
|
|
color: var(--primary-to-grayscale-to-bk);
|
|
height: 1.5rem;
|
|
}
|
|
.user_btn {
|
|
height: 1.75rem;
|
|
padding: 0.5rem 0;
|
|
word-break: keep-all;
|
|
}
|
|
// error
|
|
.error_logo {
|
|
position: absolute;
|
|
top: -10%;
|
|
left: 50%;
|
|
transform: translate(-50%, 0);
|
|
z-index: 1;
|
|
}
|
|
// logo
|
|
.logo_login {
|
|
width: 12.5rem;
|
|
}
|
|
// 프로필
|
|
.hd_profile {
|
|
position: relative;
|
|
width: 1.875rem;
|
|
height: 1.25rem;
|
|
.member_popover {
|
|
display: none;
|
|
}
|
|
&.profile_open {
|
|
.member_popover, .member_toggle {
|
|
display: block;
|
|
}
|
|
.btn_profile .comma_under8 {
|
|
opacity: 1;
|
|
transform: rotate(180deg);
|
|
}
|
|
.profile20{
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
// login
|
|
.login_title {
|
|
color: var(--white-w_100-sec);
|
|
}
|
|
// font
|
|
.white_w_87 {color: var(--white-w_87) !important}
|
|
.white_w_bk {color: var(--white-w_87-sec) !important}
|
|
.white_ff_bk {color: var( --white-w_100-sec) !important}
|
|
// 반응형
|
|
@media screen and (min-width: 2400px) {
|
|
body, html {
|
|
font-size: 1.2rem;
|
|
}
|
|
.indi_vert432{
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 3800px) {
|
|
body, html {
|
|
font-size: 1.7rem;
|
|
}
|
|
}
|
|
|
|
/* html data-theme */
|
|
html[data-theme=light] {
|
|
header{
|
|
// background: #F3F5FD;
|
|
// border-bottom: 0.063rem solid $bg_grey20;
|
|
}
|
|
.sp_logo_uniplus{
|
|
background: url('../images/logo_uniplus_light.svg') no-repeat left center;
|
|
background-size: cover;
|
|
}
|
|
.gnb {
|
|
ul li a {
|
|
color: var(--more-visible-wh_60-to-100);
|
|
&.on, &:hover, &:focus {
|
|
color: $ui_blue_more;
|
|
}
|
|
}
|
|
}
|
|
.guide_top h1{color: #000;}
|
|
|
|
//img filter
|
|
button{
|
|
&.mode{
|
|
img {@include filter_black}
|
|
.img_on {@include filter_blue}
|
|
}
|
|
&:hover:not(.hover):not(.legend):not(.selected):not(.disabled), &:active ,&.selected {
|
|
.circle_grey28.popover {
|
|
img {@include filter_white}
|
|
.img_on {@include filter_white}
|
|
}
|
|
}
|
|
}
|
|
.btn_srch28{
|
|
span img:not(.on){@include filter_black}
|
|
&.mode{
|
|
&:active{
|
|
img{filter: none;}
|
|
}
|
|
}
|
|
&:active:not(.selected) {
|
|
span img:not(.on){@include filter_white}
|
|
}
|
|
}
|
|
.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 {
|
|
img {@include filter_black}
|
|
|
|
&.selected, &:hover:not(.disabled){
|
|
img {@include filter_black}
|
|
}
|
|
&.disabled{
|
|
// img {@include filter_white}
|
|
}
|
|
}
|
|
.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;}
|
|
}
|
|
.btn_secondary {
|
|
img {
|
|
@include filter_black;
|
|
}
|
|
}
|
|
.btn_primary.disabled {
|
|
img {
|
|
@include filter_black;
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
.btn_toggle_icon :not(.map) {
|
|
span img {@include filter_black}
|
|
span.circle_grey32, .circle_grey28.popover {
|
|
img {@include filter_white}
|
|
}
|
|
span .circle_grey28.icon {
|
|
.img_on {@include filter_white}
|
|
}
|
|
&:hover, &.active, &:focus {
|
|
span .circle_grey28.popover {
|
|
img{@include filter_white}
|
|
.img_on {@include filter_white}
|
|
}
|
|
img {@include filter_white}
|
|
}
|
|
.circle_grey28 {
|
|
.img_on {@include filter_white}
|
|
}
|
|
|
|
span .circle_grey28 .icon {
|
|
.img {@include filter_white}
|
|
}
|
|
&.legend {
|
|
span.circle_grey32, .circle_grey28.popover {
|
|
img {@include filter_white}
|
|
}
|
|
span.circle_grey28.popover {
|
|
img{@include filter_white}
|
|
&.selected, &:hover:not(.legend), &:focus, &:active {
|
|
img {@include filter_white}
|
|
.img_on {@include filter_white}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// Icon Button
|
|
.btn_toggle_icon {
|
|
.circle_grey28.icon {
|
|
.img {@include filter_black}
|
|
.img_on {@include filter_white}
|
|
}
|
|
.circle_grey32.line {
|
|
.img {@include filter_black}
|
|
.img_on {@include filter_white}
|
|
}
|
|
&.selected {
|
|
.img {@include filter_black}
|
|
.img_on {@include filter_white}
|
|
}
|
|
}
|
|
.btn_file, .preview_box {
|
|
img{@include filter_black}
|
|
}
|
|
.circle32.icon {
|
|
img{@include filter_black}
|
|
}
|
|
.icon_ffb,
|
|
.btn_icon {
|
|
img {@include filter_black}
|
|
&.selected, &:hover, &:active, &:focus {
|
|
img {@include filter_blue}
|
|
}
|
|
}
|
|
.arr_up, .arr_right {
|
|
img {@include filter_black}
|
|
}
|
|
.diagon_cont {filter: brightness(0) saturate(100%) invert(23%) sepia(99%) saturate(2905%) hue-rotate(204deg) brightness(96%) contrast(101%);}
|
|
.datepicker {
|
|
background-image: url(../images/calendar_gray_24.svg);
|
|
&:focus, &.on {
|
|
background-image: url(../images/calendar_blue_24.svg);
|
|
}
|
|
}
|
|
.accordion_block {
|
|
div {
|
|
button {
|
|
img {@include filter_black}
|
|
}
|
|
}
|
|
}
|
|
.accordion_block {
|
|
&.accord_select {
|
|
.accordion_title {
|
|
&.on, &.hover, &:hover, &:focus, &.selected {
|
|
img {@include filter_blue}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// pagination
|
|
.btn_pagination{
|
|
img {@include filter_black}
|
|
}
|
|
.accordion_title {
|
|
div{
|
|
img{@include filter_black;}
|
|
}
|
|
div.on{
|
|
img{
|
|
filter: brightness(0) saturate(100%) invert(25%) sepia(93%) saturate(1829%) hue-rotate(200deg) brightness(98%) contrast(107%);
|
|
}
|
|
}
|
|
}
|
|
.toggle {
|
|
img {@include filter_black}
|
|
&.on {
|
|
img {@include filter_blue}
|
|
}
|
|
}
|
|
.popover_close{
|
|
img {@include filter_black}
|
|
}
|
|
.tree_button {
|
|
button {
|
|
img {@include filter_blue}
|
|
}
|
|
}
|
|
.mark_trig_down12 {
|
|
@include filter_black;
|
|
background: url('../images/triangle_down12.svg') no-repeat center center;
|
|
background-size: contain;
|
|
}
|
|
|
|
// sp_icon
|
|
.sp_search24{
|
|
background: url('../images/search_fff_24_light.svg') no-repeat center center;
|
|
background-size: cover;
|
|
}
|
|
.sp_download20{
|
|
background: url('../images/icon_download_20_light.svg') no-repeat center center;
|
|
background-size: cover;
|
|
}
|
|
.sp_cctv20{
|
|
background: url('../images/icon_camera_20_light.svg') no-repeat center center;
|
|
background-size: cover;
|
|
}
|
|
.btn_toggle_icon{
|
|
&:hover:not(.legend), &:focus, &.selected{
|
|
.sp_cctv20{
|
|
background: url('../images/icon_camera_sky_20_light.svg') no-repeat center center;
|
|
background-size: cover;
|
|
}
|
|
}
|
|
}
|
|
.sp_x20{
|
|
background: url('../images/icon_x_20_light.svg') no-repeat center center;
|
|
background-size: cover;
|
|
}
|
|
.sp_layer24{
|
|
background: url('../images/layer_fff_24_light.svg') no-repeat center center;
|
|
background-size: cover;
|
|
opacity: 1 !important;
|
|
}
|
|
.icon_ffb{
|
|
&:hover, &.selected{
|
|
.sp_layer24{
|
|
background: url('../images/layer_sky_24_light.svg') no-repeat center center;
|
|
background-size: cover;
|
|
}
|
|
}
|
|
}
|
|
.checkbox_type:not(.login) {
|
|
input[type=checkbox]:checked + label {
|
|
&:after
|
|
{
|
|
background: url(../images/checkbox_accordion_20.svg) center no-repeat;
|
|
}
|
|
}
|
|
}
|
|
.card_box{
|
|
&.dark {background: var(--white-w_6);}
|
|
}
|
|
.photo_circle{
|
|
img{
|
|
filter: brightness(0) saturate(100%) invert(70%) sepia(34%) saturate(0%) hue-rotate(73deg) brightness(100%) contrast(97%);
|
|
}
|
|
}
|
|
.tree_button.check{
|
|
button{
|
|
img {@include filter_blue}
|
|
}
|
|
}
|
|
.btn_notification{
|
|
img {@include filter_blue}
|
|
}
|
|
.profile_box {
|
|
@include filter_black
|
|
}
|
|
|
|
//date picker
|
|
.action_prev, .action_next {
|
|
@include filter_black
|
|
}
|
|
.stepper_arrow{
|
|
img{@include filter_black}
|
|
}
|
|
.play_circle{
|
|
img{
|
|
content: url("../images/play_circle_light_20.svg");
|
|
}
|
|
}
|
|
.play_btn, .playbar_current, .pagination_btn, .pg_prev {
|
|
img {@include filter_blue}
|
|
}
|
|
.pause_btn, .again_btn {
|
|
img {@include filter_black}
|
|
}
|
|
// select arrow
|
|
.selectbox_arrow, .selectbox, .selectboxSample {
|
|
img {@include filter_black}
|
|
}
|
|
//table
|
|
.bt_srch{
|
|
@include filter_black
|
|
}
|
|
// navigation
|
|
.logo_hd_uniplus{
|
|
content: url("../images/gnb_logo_light.svg");
|
|
}
|
|
.light_none{
|
|
img{
|
|
display: none;
|
|
}
|
|
}
|
|
.lnb_popup_title_bg {
|
|
button{
|
|
img {@include filter_black}
|
|
}
|
|
}
|
|
.btn_fnb_search{
|
|
img {@include filter_blue;}
|
|
}
|
|
.put_delete{
|
|
img {@include filter_black}
|
|
}
|
|
.selector {
|
|
background-image: url("../images/arrow_down_gray_16.svg");
|
|
&.sm {
|
|
&.color{
|
|
background-image: url(../images/arrow_down_light_16.svg);
|
|
background-repeat: no-repeat;
|
|
background-position: 93% 42%;
|
|
background-size: 1rem 1rem;
|
|
}
|
|
}
|
|
}
|
|
.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")
|
|
}
|
|
}
|
|
// 3d map
|
|
.eastside, .westside, .southside, .northside{@include filter_blue;}
|
|
.mapcontrol_btn {@include filter_blue;}
|
|
|
|
// polygon
|
|
.polygon{
|
|
&.black{
|
|
img{
|
|
content: url("../images/Polygon_black_light.svg");
|
|
}
|
|
}
|
|
&.blue{
|
|
img{
|
|
content: url("../images/Polygon_blue_light.svg");
|
|
}
|
|
}
|
|
&.purple{
|
|
img{
|
|
content: url("../images/Polygon_purple_light.svg");
|
|
}
|
|
}
|
|
&.green{
|
|
img{
|
|
content: url("../images/Polygon_green_light.svg");
|
|
}
|
|
}
|
|
&.yellow{
|
|
img{
|
|
content: url("../images/Polygon_yellow_light.svg");
|
|
}
|
|
}
|
|
}
|
|
.pass_road{
|
|
img{@include filter_blue}
|
|
}
|
|
.light_conceal {
|
|
visibility: hidden;
|
|
}
|
|
.marker.cctv {
|
|
.img_selected{
|
|
content: url("../images/cctv_light_selected_48.svg");
|
|
}
|
|
}
|
|
.marker.weather {
|
|
.img_selected{
|
|
content: url("../images/weather_center_light_selected_48.svg");
|
|
}
|
|
}
|
|
.marker.bus {
|
|
.img_selected{
|
|
content: url("../images/bus_light_selected_48.svg");
|
|
}
|
|
}
|
|
.marker.depart {
|
|
.img_selected{
|
|
content: url("../images/depart_light_selected_48.svg");
|
|
}
|
|
}
|
|
.park_sign.danger.on {
|
|
background: url("../images/park_danger_light_on.svg") no-repeat center center;
|
|
}
|
|
.put_check {
|
|
img {@include filter_black}
|
|
}
|
|
.time_mark20 {@include filter_black}
|
|
// table
|
|
.row_type2{
|
|
.tac{img{@include filter_black}}
|
|
}
|
|
// card pattern
|
|
.ic_artff{
|
|
background: url('../images/arr_traff_light_16.svg') no-repeat center center;
|
|
}
|
|
.pg_prev, .pg_next {
|
|
img{@include filter_blue}
|
|
}
|
|
.sign_tri2 {
|
|
&.jam {
|
|
background: url(../images/sign_jam_light_28.svg) no-repeat center center;
|
|
background-size: contain;
|
|
}
|
|
&.ambulace{
|
|
background: url(../images/ambulance_light.svg) no-repeat center center;
|
|
background-size: contain;
|
|
}
|
|
}
|
|
// input
|
|
.pos_rel.lightmode{
|
|
opacity: 0;
|
|
}
|
|
.popup_close{
|
|
img{@include filter_white}
|
|
}
|
|
.wrput {
|
|
&.read_success {
|
|
display: none;
|
|
}
|
|
}
|
|
// card
|
|
.circle_g32.pencil{
|
|
img {@include filter_black}
|
|
}
|
|
// upload
|
|
.upload_btn{
|
|
img{@include filter_black;}
|
|
}
|
|
// template
|
|
.main_contents {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size : cover;
|
|
background: url("../images/background_light_img.png") no-repeat center center;
|
|
&.ver2 {
|
|
background: url("../images/background_ver2.png") no-repeat center center;
|
|
background-size : cover;
|
|
}
|
|
&.ver3 {
|
|
background: url("../images/background_ver3.png") no-repeat center center;
|
|
background-size : cover;
|
|
}
|
|
&.ver4 {
|
|
background: url("../images/background_img.png") no-repeat center center;
|
|
background-size : cover;
|
|
}
|
|
&.login {
|
|
background: url("../images/login_background_light.png") no-repeat;
|
|
}
|
|
&.error {
|
|
background: url("../images/error_background_light.png") no-repeat center center;
|
|
}
|
|
&.error2 {
|
|
background: url("../images/error2_background_light.svg") no-repeat center bottom;
|
|
background-size: contain;
|
|
}
|
|
}
|
|
.main_traffic {
|
|
img {
|
|
content: url("../images/main_traffic_light.svg") no-repeat;
|
|
}
|
|
}
|
|
.signal_body {
|
|
background-image: url("../images/signal_body_light.png");
|
|
}
|
|
.img_off.marker {
|
|
content: url("../images/car_accident_light_56.svg");
|
|
}
|
|
.marker_img_selected {
|
|
content: url("../images/car_accident_selected_light_56.svg");
|
|
}
|
|
|
|
// 신호최적화
|
|
.arrow {
|
|
img {@include filter_black}
|
|
}
|
|
.arrow_right_2line {
|
|
img {@include filter_blue}
|
|
}
|
|
|
|
// 상황관리이력
|
|
.chart_cont.record {filter: brightness(0) saturate(100%) invert(23%) sepia(99%) saturate(2905%) hue-rotate(204deg) brightness(96%) contrast(101%);}
|
|
|
|
// login
|
|
.logo_login {
|
|
content: url("../images/login_logo_light.svg");
|
|
}
|
|
|
|
// input
|
|
.wrput {
|
|
&.read_success{
|
|
display: none;
|
|
}
|
|
}
|
|
// light모드 display none
|
|
.light_none {
|
|
display: none;
|
|
}
|
|
.light_hidden {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.grey_box.login{
|
|
border: 0.063rem solid $bg_grey30;
|
|
background: var(--bg_01_80);
|
|
p{
|
|
background: $bg_black20;
|
|
}
|
|
}
|
|
.indicator {box-shadow: 0.25rem 0.25rem 1rem 0 rgba(4, 9, 26, 0.16);}
|
|
}
|
|
/* html data-theme End */
|