Add bluish background, update colors & padding

Signed-off-by: mctaylors <cantsendmails@mctaylors.ru>

assets/css/keyframes.css

@@ -10,15 +10,18 @@
 
 @keyframes onload-background-blur {
     from {
-        filter: blur(0) brightness(1);
+        filter: blur(0);
+        box-shadow: none;
     }
 
     99% {
-        filter: blur(0) brightness(1);
+        filter: blur(0);
+        box-shadow: none;
     }
 
     to {
-        filter: blur(16px) brightness(0.5);
+        filter: blur(8px);
+        box-shadow: inset 0 0 0 50vw var(--background-shadow);
     }
 }
 

assets/css/style.css

@@ -2,13 +2,15 @@
 @import url(keyframes.css);
 
 :root {
-    --background: #272727cf;
+    --background-shadow: hsla(210, 50%, 5%, 66%);
-    --background-active: #171717cf;
+    --dialog-background: hsla(0, 0%, 18%, 80%);
-    --border: #3f3f3f;
+    --dialog-background-active: hsla(0, 0%, 8%, 80%);
-    --light-blue: #60f7df;
+    --dialog-border: hsl(0, 0%, 30%);
-    --dark-blue: #10bfc7;
+    --light-blue: hsl(180, 90%, 60%);
+    --dark-blue: hsl(180, 90%, 30%);
+    --active-blue: hsla(180, 40%, 25%, 50%);
     --dialog-width: 770px;
-    --dialog-padding-bottom: 105px;
+    --dialog-padding-bottom: 120px;
     --details-button-width: 395px;
     --details-button-height: 65px;
     --keyframe-dialog-size-diff: 50px;
@@ -51,9 +53,9 @@ p, button {
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
-    background-color: var(--background);
+    background-color: var(--dialog-background);
     backdrop-filter: blur(4px);
-    border: 1px solid var(--border);
+    border: 1px solid var(--dialog-border);
     border-radius: 4px;
 }
 
@@ -75,7 +77,7 @@ p, button {
     bottom: 0;
     background-color: transparent;
     border: 0;
-    border-top: 2px solid var(--border);
+    border-top: 2px solid var(--dialog-border);
     width: 100%;
     height: 74px;
 }
@@ -85,16 +87,16 @@ p, button {
 }
 
 .dialog button.left {
-    border-right: 1px solid var(--border);
+    border-right: 1px solid var(--dialog-border);
 }
 
 .dialog button.right {
-    border-left: 1px solid var(--border);
+    border-left: 1px solid var(--dialog-border);
     left: 50%;
 }
 
 .dialog button:hover, .details button:hover {
-    background-color: var(--background-active);
+    background-color: var(--dialog-background-active);
     border-radius: 4px;
     outline: 5px solid;
     box-shadow: 0 0 12px var(--light-blue);
@@ -113,7 +115,7 @@ p, button {
 
 .dialog button:active {
     transition: none;
-    background-color: #274747cf;
+    background-color: var(--active-blue);
 }
 
 .details {
@@ -134,12 +136,12 @@ p, button {
 
 .details button {
     position: absolute;
-    background-color: var(--background);
+    background-color: var(--dialog-background);
     width: var(--details-button-width);
     height: var(--details-button-height);
     left: 50%;
     top: calc(100% - var(--details-button-height) * 1.25);
     transform: translate(-50%, -50%);
-    border: 1px solid var(--border);
+    border: 1px solid var(--dialog-border);
     border-radius: 4px;
 }