[5.x] Style the Dark Mode login (#10143)

Style the Dark Mode login
statamic · May 21, 2024 · 730f05d · 730f05d
1 parent f6c65f8
commit 730f05d
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 72 deletions.
diff --git a/resources/css/components/login.css → resources/css/components/outside.css b/resources/css/components/login.css → 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
@@ -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
@@ -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
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
@@ -8,60 +8,63 @@
 
 @include('statamic::partials.outside-logo')
 
-<div class="card auth-card mx-auto">
-    <login inline-template :show-email-login="!{{ $str::bool($oauth) }}" :has-error="{{ $str::bool(count($errors) > 0) }}">
-    <div>
-        @if ($oauth)
-            <div class="login-oauth-providers">
-                @foreach ($providers as $provider)
-                    <div class="provider mb-2">
-                        <a href="{{ $provider->loginUrl() }}?redirect={{ parse_url(cp_route('index'))['path'] }}" class="w-full btn-primary">
-                            {{ __('Log in with :provider', ['provider' => $provider->label()]) }}
-                        </a>
-                    </div>
-                @endforeach
-            </div>
+<div class="max-w-xs rounded shadow-lg flex items-center justify-center relative mx-auto">
+    <div class="outside-shadow absolute inset-0"></div>
+    <div class="card auth-card mx-auto relative z-10 w-full">
+        <login inline-template :show-email-login="!{{ $str::bool($oauth) }}" :has-error="{{ $str::bool(count($errors) > 0) }}">
+        <div>
+            @if ($oauth)
+                <div class="login-oauth-providers">
+                    @foreach ($providers as $provider)
+                        <div class="provider mb-2">
+                            <a href="{{ $provider->loginUrl() }}?redirect={{ parse_url(cp_route('index'))['path'] }}" class="w-full btn-primary">
+                                {{ __('Log in with :provider', ['provider' => $provider->label()]) }}
+                            </a>
+                        </div>
+                    @endforeach
+                </div>
 
-            @if($emailLoginEnabled)
-                <div class="text-center text-sm text-gray-700 py-6">&mdash; {{ __('or') }} &mdash;</div>
+                @if($emailLoginEnabled)
+                    <div class="text-center text-sm text-gray-700 py-6">&mdash; {{ __('or') }} &mdash;</div>
 
-                <div class="login-with-email" v-if="! showEmailLogin">
-                    <a class="btn w-full" @click.prevent="showEmailLogin = true">
-                        {{ __('Log in with email') }}
-                    </a>
-                </div>
+                    <div class="login-with-email" v-if="! showEmailLogin">
+                        <a class="btn w-full" @click.prevent="showEmailLogin = true">
+                            {{ __('Log in with email') }}
+                        </a>
+                    </div>
+                @endif
             @endif
-        @endif
 
-        <form method="POST" v-show="showEmailLogin" class="email-login select-none" @if ($oauth) v-cloak @endif>
-            {!! csrf_field() !!}
+            <form method="POST" v-show="showEmailLogin" class="email-login select-none" @if ($oauth) v-cloak @endif>
+                {!! csrf_field() !!}
 
-            <input type="hidden" name="referer" value="{{ $referer }}" />
+                <input type="hidden" name="referer" value="{{ $referer }}" />
 
-            <div class="mb-8">
-                <label class="mb-2" for="input-email">{{ __('Email') }}</label>
-                <input type="text" class="input-text input-text" name="email" value="{{ old('email') }}" autofocus id="input-email">
-                @if ($hasError('email'))<div class="text-red-500 text-xs mt-2">{{ $errors->first('email') }}</div>@endif
-            </div>
+                <div class="mb-8">
+                    <label class="mb-2" for="input-email">{{ __('Email') }}</label>
+                    <input type="text" class="input-text input-text" name="email" value="{{ old('email') }}" autofocus id="input-email">
+                    @if ($hasError('email'))<div class="text-red-500 text-xs mt-2">{{ $errors->first('email') }}</div>@endif
+                </div>
 
-            <div class="mb-8">
-                <label class="mb-2" for="input-password">{{ __('Password') }}</label>
-                <input type="password" class="input-text input-text" name="password" id="input-password">
-                @if ($hasError('password'))<div class="text-red-500 text-xs mt-2">{{ $errors->first('password') }}</div>@endif
-            </div>
-            <div class="flex justify-between items-center">
-                <label for="remember-me" class="flex items-center cursor-pointer">
-                    <input type="checkbox" name="remember" id="remember-me">
-                    <span class="rtl:mr-2 ltr:ml-2">{{ __('Remember me') }}</span>
-                </label>
-                <button type="submit" class="btn-primary">{{ __('Log in') }}</button>
-            </div>
-        </form>
+                <div class="mb-8">
+                    <label class="mb-2" for="input-password">{{ __('Password') }}</label>
+                    <input type="password" class="input-text input-text" name="password" id="input-password">
+                    @if ($hasError('password'))<div class="text-red-500 text-xs mt-2">{{ $errors->first('password') }}</div>@endif
+                </div>
+                <div class="flex justify-between items-center">
+                    <label for="remember-me" class="flex items-center cursor-pointer">
+                        <input type="checkbox" name="remember" id="remember-me">
+                        <span class="rtl:mr-2 ltr:ml-2">{{ __('Remember me') }}</span>
+                    </label>
+                    <button type="submit" class="btn-primary">{{ __('Log in') }}</button>
+                </div>
+            </form>
+        </div>
+        </login>
     </div>
-    </login>
 </div>
 @if ($emailLoginEnabled)
-    <div class="w-full text-center mt-4">
+    <div class="w-full text-center mt-4 dark:mt-6">
         <a href="{{ cp_route('password.request') }}" class="forgot-password-link text-sm opacity-75 hover:opacity-100">
             {{ __('Forgot password?') }}
         </a>

diff --git 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',