From f90d7e36aa95ff103831541f8310fac7538dbc5c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= Date: Thu, 31 Mar 2022 01:04:28 +0200 Subject: [PATCH] fix: better gradients --- .../templates/error-404/index.html | 68 ++++++----- .../ui-templates/templates/loading/index.html | 18 +-- .../ui-templates/templates/welcome/index.html | 108 +++++++++--------- 3 files changed, 92 insertions(+), 102 deletions(-) diff --git a/packages/ui-templates/templates/error-404/index.html b/packages/ui-templates/templates/error-404/index.html index dab5ab87e5..3bde7627cf 100644 --- a/packages/ui-templates/templates/error-404/index.html +++ b/packages/ui-templates/templates/error-404/index.html @@ -12,56 +12,64 @@ } .gradient-border { position: relative; - background: transparent; border-radius: 0.5rem; + -webkit-backdrop-filter: blur(10px); + backdrop-filter: blur(10px); + } + @media (prefers-color-scheme: light) { + .gradient-border { + background-color: rgba(255, 255, 255, 0.3); + } + .gradient-border::before { + background: linear-gradient(90deg, #e2e2e2 0%, #e2e2e2 25%, #00DC82 50%, #36E4DA 75%, #0047E1 100%); + } + } + @media (prefers-color-scheme: dark) { + .gradient-border { + background-color: rgba(20, 20, 20, 0.3); + } + .gradient-border::before { + background: linear-gradient(90deg, #303030 0%, #303030 25%, #00DC82 50%, #36E4DA 75%, #0047E1 100%); + } } .gradient-border::before { - content: ''; + content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; - background: linear-gradient(90deg, #0047E1 0%, #34CDFE 50%, #00DC82 100%); - z-index: -2; - transition: filter 0.1s linear; - } - .gradient-border::after { - content: ''; - position: absolute; - top: -2px; - left: -2px; - right: -2px; - bottom: -2px; - background: linear-gradient(90deg, #0047E1 0%, #34CDFE 50%, #00DC82 100%); - z-index: -1; border-radius: 0.5rem; + padding: 2px; + width: 100%; + background-size: 400% auto; + opacity: 0.5; + transition: background-position 0.3s ease-in-out, opacity 0.2s ease-in-out; + -webkit-mask: + linear-gradient(#fff 0 0) content-box, + linear-gradient(#fff 0 0); + mask: + linear-gradient(#fff 0 0) content-box, + linear-gradient(#fff 0 0); + -webkit-mask-composite: xor; + mask-composite: exclude; } .gradient-border:hover::before { - filter: blur(10px); - } - @media (prefers-color-scheme: light) { - .gradient-border { - background: #F9FAFC; - } - } - @media (prefers-color-scheme: dark) { - .gradient-border { - background: #030D0F; - } + background-position: -50% 0; + opacity: 1; } -
-
+
+

{{ messages.statusCode }}

{{ messages.description }}

- + {{ messages.backHome }} -
+
diff --git a/packages/ui-templates/templates/loading/index.html b/packages/ui-templates/templates/loading/index.html index 5c1fa93c05..93fad12e50 100644 --- a/packages/ui-templates/templates/loading/index.html +++ b/packages/ui-templates/templates/loading/index.html @@ -3,10 +3,7 @@ {{ messages.loading }} | {{ messages.appName }} - + -
-
+
- - - - - - - - - - -

- {{ messages.version }} -

+ + {{ messages.version }} +
-
+

Get Started @@ -96,7 +90,7 @@

Remove this welcome page by removing <NuxtWelcome /> tag or creating an app.vue file.

- +