diff --git a/assets/css/keyframes.css b/assets/css/keyframes.css index d2c25ac..b182104 100644 --- a/assets/css/keyframes.css +++ b/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); } } diff --git a/assets/css/style.css b/assets/css/style.css index b1cf3ad..e65e9a8 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -2,13 +2,15 @@ @import url(keyframes.css); :root { - --background: #272727cf; - --background-active: #171717cf; - --border: #3f3f3f; - --light-blue: #60f7df; - --dark-blue: #10bfc7; + --background-shadow: hsla(210, 50%, 5%, 66%); + --dialog-background: hsla(0, 0%, 18%, 80%); + --dialog-background-active: hsla(0, 0%, 8%, 80%); + --dialog-border: hsl(0, 0%, 30%); + --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; } \ No newline at end of file diff --git a/docs/screenshot.png b/docs/screenshot.png index 2423265..d1fc51f 100644 Binary files a/docs/screenshot.png and b/docs/screenshot.png differ