login 페이지 수정

assets/css/_mixin.scss

@@ -1,34 +1,5 @@
 // variable
-$ui_blue: #024294;
-$ui_blue_hover: #0155BD;
-$ui_blue_more: #0068E6;
-$ui_blue_more80: rgba($color:$ui_blue_more, $alpha: 0.8);
-$ui_blue_more60: rgba($color:$ui_blue_more, $alpha: 0.6);
-$ui_blue_more50: rgba($color:$ui_blue_more, $alpha: 0.5);
-$ui_blue_more40: rgba($color:$ui_blue_more, $alpha: 0.4);
-$ui_blue_more30: rgba($color:$ui_blue_more, $alpha: 0.3);
-$ui_blue_more20: rgba($color:$ui_blue_more, $alpha: 0.2);
-$ui_blue_more12: rgba($color:$ui_blue_more, $alpha: 0.12);
-$ui_blue_more06: rgba($color:$ui_blue_more, $alpha: 0.06);
-$ui_sky: #27D4FF;
-$ui_sky80: rgba($color:$ui_sky, $alpha: 0.8);
-$ui_sky60: rgba($color:$ui_sky, $alpha: 0.6);
-$ui_sky50: rgba($color:$ui_sky, $alpha: 0.5);
-$ui_sky40: rgba($color:$ui_sky, $alpha: 0.4);
-$ui_sky30: rgba($color:$ui_sky, $alpha: 0.3);
-$ui_sky20: rgba($color:$ui_sky, $alpha: 0.2);
-$ui_sky12: rgba($color:$ui_sky, $alpha: 0.12);
-$ui_sky06: rgba($color:$ui_sky, $alpha: 0.06);
-$bg_cluster: rgba(0, 104, 230, 1);
-$fc_normal: #338FFF;
-$fc_normal_more40: rgba($color:$fc_normal, $alpha: 0.4);
-$fc_purple: #937EFF;
-$fc_green: #16D9AB;
-$fc_light_green: #00FF00;
-$fc_code_green:#1CAF93;
-$fc_card_green:#1CBD6D;
-$fc_yellow: #FFE043;
-$fc_yellow_04: #FFBC04;
+
 $fc_succeses: #00BD78;
 $fc_error: #D60000;
 $bg_default:rgb(10, 11, 20);
@@ -313,10 +284,6 @@ $fc_default: rgba(255, 255, 255, 0.87);
     &:hover,&.hover {
         background: var(--white-w_16);
     }
-    // &.selected {
-    //     background: var(--btn-btn_selected);
-    //     color: var(--white-w_100);
-    // }
     &.disabled {
         background: var(--white-w_12);
         border: 1px solid rgba(255, 255, 255, 0.20);
@@ -333,10 +300,6 @@ $fc_default: rgba(255, 255, 255, 0.87);
     &:hover,&.hover {
         background: var(--white-w_16);
     }
-    // &.selected {
-    //     background: var(--btn-btn_selected);
-    //     color: var(--white-w_100);
-    // }
     &.disabled {
         background: var(--white-w_12);
         color: var(--white-w_20);
@@ -362,12 +325,6 @@ $fc_default: rgba(255, 255, 255, 0.87);
         box-shadow: inset 0 0 0.75rem #0476FF;
         color: var(--white-w_100);
     }
-    &.card_selected{
-        background: var(--tab-btn_default);
-        border: none;
-        box-shadow: inset 0 0 0.75rem #0476FF;
-        color: var(--white-w_100);
-    }
     &.disabled {
         background: var(--bg_01_80);
         border: 0.063rem solid var(--line-wh_12-to-100);
@@ -403,22 +360,6 @@ $fc_default: rgba(255, 255, 255, 0.87);
     }
 }
 
-@mixin button_ghost {
-    @include button_options;
-    @include backFilter;
-    &:hover {
-        background: $bg_grey06;
-    }
-    &.selected{
-        background: transparent;
-        color: $ui_sky;
-    }
-    &.disabled {
-        background: transparent;
-        color: $bg_grey38;
-    }
-}
-
 @mixin button_default {
     @include border_radius02;
     height: 1.5rem;
@@ -580,14 +521,6 @@ $fc_default: rgba(255, 255, 255, 0.87);
     backdrop-filter: blur(1.875rem);
 }
 
-@mixin dashbox {
-    width: 100%;
-    padding: 0.75rem;
-    overflow: hidden;
-    background: rgba(255, 255, 255, 0.08);
-    border-radius: 0.125rem;
-}
-
 @mixin square {
     display: inline-block;
     width: 0.625rem;

assets/css/layout.scss

@@ -171,7 +171,13 @@
 }
 html[data-theme=light] .lightmode > .inner{
     // background-color: rgba(0,0,0,0.25);
-    background-color: var(--PRI);
+   
+    &.ver1 {
+        background-color: var(--PRI);
+    }
+    &.ver2 {
+        
+    }
 }
 .outer {
     padding: 4px;
@@ -204,6 +210,12 @@ html[data-theme=light] .lightmode > .inner{
 .lightmode input[type=radio]:checked + label > i {
     color: rgba(135, 199, 24, 1);
     transition: all 0.35s ease-in-out;
+    &.ver1 {
+
+    }
+    &.ver2 {
+
+    }
 }
 .circle_dark {
     // border-radius: 50%;
@@ -854,16 +866,6 @@ html[data-theme=light] {
     .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}
     }
@@ -885,12 +887,6 @@ html[data-theme=light] {
            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}

assets/css/template.css

@@ -73,6 +73,7 @@ footer {
   box-shadow: -12px 0px 40px 0px rgba(0, 0, 0, 0.4);
   -webkit-backdrop-filter: blur(30px);
           backdrop-filter: blur(30px);
+  z-index: 10;
 }
 
 .login_logo {
@@ -592,33 +593,6 @@ 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-weight: 400;
-  line-height: 1.7;
-}
-
 .record_radio {
   display: flex;
   align-items: center;

assets/css/template.scss

@@ -63,6 +63,7 @@ footer {
 	background-color: var(--alpha-wh-to-bkwh-60);
 	box-shadow: -12px 0px 40px 0px rgba(0, 0, 0, 0.40);
 	backdrop-filter: blur(30px);
+	z-index: 10;
 }
 .login_logo {
 	position: absolute;
@@ -532,27 +533,6 @@ 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;
-    .unit{
-        @include fs_14_regular;
-        line-height: 1.7;
-    }
-}
 // check box
 .record_radio {
     @include dflx_ac;

template/Login_ver1.html

@@ -17,7 +17,7 @@
                 <div class="login_wrap">
                     <div class="light_box">
                         <div class="lightmode outer">
-                            <div class="inner">
+                            <div class="inner ver1">
                                 <input type="radio" name="toggle" id="toggle-radio-light" />
                                 <label for="toggle-radio-light" class="tolight circle_light">
                                     <i class="fas fa-sun tolight"></i>