From 730f05da6106f431e89fc4f6d67d32f1ea549380 Mon Sep 17 00:00:00 2001 From: Jack McDade Date: Tue, 21 May 2024 13:28:53 -0400 Subject: [PATCH] [5.x] Style the Dark Mode login (#10143) Style the Dark Mode login --- .../css/components/{login.css => outside.css} | 46 +++++++++- resources/css/core/layout.css | 23 ----- resources/css/cp.css | 2 +- resources/svg/statamic-wordmark.svg | 2 +- resources/views/auth/login.blade.php | 91 ++++++++++--------- tailwind.config.js | 1 + 6 files changed, 93 insertions(+), 72 deletions(-) rename resources/css/components/{login.css => outside.css} (55%) diff --git a/resources/css/components/login.css b/resources/css/components/outside.css similarity index 55% rename from resources/css/components/login.css rename to resources/css/components/outside.css index 326cf3a69f..fb5755fb6d 100644 --- a/resources/css/components/login.css +++ b/resources/css/components/outside.css @@ -1,9 +1,39 @@ +/* Outside the Control Panel + ========================================================================== */ +.outside { + @apply bg-gray-300 px-2 min-h-screen; + + label { + @apply text-[#596498] dark:text-dark-175; + } + + .logo svg { + @apply h-6 block mx-auto mb-20 mb-8 w-auto text-black/25 dark:text-white/60; + } +} + + /* Alternate rad mode for a more playful vibe */ +.outside.rad-theme { + background: #12c2e9; + background: linear-gradient(45deg, #f64f59, #c471ed, #12c2e9); +} + +.dark .outside.rad-theme { + background: #212223; background-image: radial-gradient(at 32.6% 91.5%, #142038 0px, transparent 50%),radial-gradient(at 87.4% 39.4%, #353945 0px, transparent 50%),radial-gradient(at 84.6% 52.5%, #171717 0px, transparent 50%); +} + +.dark .outside-shadow { + background: conic-gradient(from 230.29deg at 51.63% 52.16%, rgb(36, 0, 255) 0deg, rgb(0, 135, 255) 67.5deg, rgb(108, 39, 157) 198.75deg, rgb(24, 38, 163) 251.25deg, rgb(54, 103, 196) 301.88deg, rgb(105, 30, 255) 360deg); + filter: blur(160px); + transform: translateZ(0px); + @apply absolute inset-0; +} + /* ========================================================================== LOGIN SCREEN ========================================================================== */ -.auth-card { - @apply max-w-xs p-6 rounded shadow-lg; +.auth-card {; transition: .12s ease-out; } @@ -17,7 +47,7 @@ /* Rad Mode Stylez ========================================================================== */ -.outside.rad-theme { +html:not(.dark) .outside.rad-theme { .auth-card { @apply rounded-lg; box-shadow: @@ -35,6 +65,7 @@ } } + .input-text { @apply rounded-lg; } @@ -54,3 +85,12 @@ @apply text-white text-shadow; } } + +.dark .outside.rad-theme { + .auth-card { + @apply shadow-dark; + &:hover { + @apply shadow-dark-lg; + } + } +} diff --git a/resources/css/core/layout.css b/resources/css/core/layout.css index f381cda4fc..fa93124d1a 100644 --- a/resources/css/core/layout.css +++ b/resources/css/core/layout.css @@ -78,26 +78,3 @@ a { body > .draggable-mirror { z-index: 5; } - -/* Outside the Control Panel - ========================================================================== */ -.outside { - @apply bg-gray-300 px-2 min-h-screen; - - label { - color: #596498; - } - - .logo svg { - @apply h-6 block mx-auto mb-20 mb-8 w-auto; - path { - fill: rgba(0,0,0,.25); - } - } -} - - /* Alternate rad mode for a more playful vibe */ -.outside.rad-theme { - background: #12c2e9; - background: linear-gradient(45deg, #f64f59, #c471ed, #12c2e9); -} diff --git a/resources/css/cp.css b/resources/css/cp.css index 3f04ebb898..2b657234cb 100644 --- a/resources/css/cp.css +++ b/resources/css/cp.css @@ -26,12 +26,12 @@ @import "components/focal-point"; @import "components/global-header"; @import "components/items"; -@import "components/login"; @import "components/metrics"; @import "components/modal"; @import "components/nav-main"; @import "components/nav-mobile"; @import "components/notifications"; +@import "components/outside"; @import "components/page-tree"; @import "components/pagination"; @import "components/popover"; diff --git a/resources/svg/statamic-wordmark.svg b/resources/svg/statamic-wordmark.svg index f3c50e0848..18d8aeb280 100644 --- a/resources/svg/statamic-wordmark.svg +++ b/resources/svg/statamic-wordmark.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php index 10faef7448..611e9bfb71 100644 --- a/resources/views/auth/login.blade.php +++ b/resources/views/auth/login.blade.php @@ -8,60 +8,63 @@ @include('statamic::partials.outside-logo') -
- -
- @if ($oauth) - +
+
+
+ +
+ @if ($oauth) + - @if($emailLoginEnabled) -
— {{ __('or') }} —
+ @if($emailLoginEnabled) +
— {{ __('or') }} —
- + + @endif @endif - @endif - +
+ + + @if ($hasError('password'))
{{ $errors->first('password') }}
@endif +
+
+ + +
+ +
+
-
@if ($emailLoginEnabled) -
+
{{ __('Forgot password?') }} diff --git a/tailwind.config.js b/tailwind.config.js index 692a2bc2e2..e1929555ed 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -131,6 +131,7 @@ module.exports = { inner: 'inset 0px 1px 1px 0px rgba(0,0,0,.05)', 'inner-dark': 'inset 0px 2px 1px 0px rgba(0,0,0,.15)', dark: '0 20px 35px 0 rgba(22,22,22,.45), 0 10px 23px 0 rgba(23,23,23,.65), 0 0 0 1px rgba(85,87,89,.80)', + 'dark-lg': '0 40px 78px 0 rgba(22,22,22,.45), 0 15px 28px 0 rgba(23,23,23,.85), 0 0 0 1px rgba(85,87,89,.85)', 'dark-sm': '0 3px 3px 0 rgba(22,22,22,.15), 0 1px 2px 0 rgba(23,23,23,.1)', 'dark-popover': '0 10px 17px 10px rgb(31 33 36 / 76%), 0 2px 1px 1px rgb(31 33 36 / 76%), 0 0 0 1px rgb(109 118 118 / 41%), 0 0 0 1px rgb(110 125 140 / 61%)', 'dark-set': 'rgba(0,0,0,.25) 0 0 0 1px, rgba(0,0,0,.08) 0 2px 5px, rgba(0,0,0,.17) 0 1px 1.5px,rgba(0,0,0,.18) 0 1px 2px 0, transparent 0 0 0 0',