Light mode 1.1

webdevsk · May 25, 2021 · 6c33e9a · 6c33e9a
1 parent f14a938
commit 6c33e9a
Show file tree

Hide file tree

Showing 4 changed files with 350 additions and 4 deletions.
diff --git a/css/style.css b/css/style.css
@@ -9,18 +9,22 @@
     --secondary-link: #080808;
     --btn-text: #e4e4e4;
     --btn-hover: #0d6efd;
+    --switch-shadow-from: #00afefd8;
+    --switch-shadow-to: #00afef04;
 }
 .theme-dark{
-    --bg-theme: #1c1c1c;
+    --bg-theme: #18191A;
     --text-theme: #e4e4e4;
     --shadow-theme-1: #0b0b0b; 
     --shadow-theme-2: #2d2d2d;
     --border-theme: #fdfdfd61;
-    --link-theme: #243fff;
+    --link-theme: #304FFE;
     --footer-link: #e4e4e4;
     --secondary-link: #e4e4e4;
     --btn-text: #e4e4e4;
     --btn-hover: #0d6efd;
+    --switch-shadow-from: #5a6166;
+    --switch-shadow-to: #5A616600;
 }
 
 
@@ -223,6 +227,8 @@ footer ul li a i{
     font-weight: 600;
     margin-top: 30px;
 }
+
+
 /* The slider */
 .slider {
     position: absolute;
@@ -249,7 +255,7 @@ footer ul li a i{
     -webkit-transition: 0.4s;
     transition: 0.4s;
     box-shadow: 0 0px 15px #2020203d;
-    background: white url('https://i.ibb.co/FxzBYR9/night.png');
+    background: white url('../images/night.png');
     background-repeat: no-repeat;
     background-position: center;
   }
@@ -266,16 +272,36 @@ footer ul li a i{
     -webkit-transform: translateX(16px);
     -ms-transform: translateX(16px);
     transform: translateX(16px);
-    background: white url('https://i.ibb.co/7JfqXxB/sunny.png');
+    background: white url('../images/sunny.png');
     background-repeat: no-repeat;
     background-position: center;
   }
   /* The switch - the box around the slider */
+
+
+  .pulseBtn {
+      padding: 12px 24px;
+      background-color: hsl(222, 100%, 95%);
+      color: hsl(243, 80%, 62%);
+      border-radius: 6px;
+      box-shadow: 0 0 0 0 rgba(230, 237, 255, 0.7);
+      animation: pulse 1.75s infinite cubic-bezier(0.66, 0, 0, 1);
+  }
+
+
   .switch {
       position: relative;
       display: inline-block;
       width: 45px;
       height: 25px;
+      border-radius: 45px;
+      box-shadow: 0 0 0 0 var(--switch-shadow-from);
+      animation: pulse 1.75s infinite cubic-bezier(0.66, 0, 0, 1);
+    }
+    @keyframes pulse {
+        to {
+          box-shadow: 0 0 0 20px var(--switch-shadow-to);
+        }
     }
 
     /* Hide default HTML checkbox */