From 4f8ce016c9369a3a49705ba6356c6369193b3882 Mon Sep 17 00:00:00 2001
From: Pheeef <pheeef@proton.me>
Date: Fri, 28 Feb 2025 20:16:29 +0100
Subject: [PATCH] fix light mode

---
 cccsbg/login/resources/css/styles.css         | 44 ++++++++++++++++---
 .../login/resources/img/background_light.svg  | 32 ++++++++++++++
 2 files changed, 69 insertions(+), 7 deletions(-)
 create mode 100644 cccsbg/login/resources/img/background_light.svg

diff --git a/cccsbg/login/resources/css/styles.css b/cccsbg/login/resources/css/styles.css
index bd0ab77..2d1ee82 100644
--- a/cccsbg/login/resources/css/styles.css
+++ b/cccsbg/login/resources/css/styles.css
@@ -4,32 +4,48 @@
 }
 
 
+#kc-header {
+    display: none;
+}
+
 .login-pf body {
-    background-image: url('../img/background.svg');
+    background-image: url('../img/background_light.svg');
     background-size: cover;
 }
 
 .pf-v5-c-login__main {
     border-radius: 0.75rem;
-    background-color: #282828;
+    background-color: #ffffff;
 }
 
+/* Button Theming */
 .pf-v5-c-button.pf-m-primary {
     background-color: #FFDF5D;
     color: #282828;
 }
-
 .pf-v5-c-button.pf-m-primary:hover {
     background-color: #ffd738;
 }
 
+/* Input Fields*/
+.pf-v5-c-form-control:hover {
+    --pf-v5-c-form-control--after--BorderBottomColor: #FFDF5D;
+    --pf-v5-c-form-control--after--BorderBottomWidth: var(--pf-v5-c-form-control--focus--after--BorderBottomWidth);
+}
 .pf-v5-c-form-control:focus-within {
-	--pf-v5-c-form-control--after--BorderBottomColor: #FFDF5D;
-	--pf-v5-c-form-control--after--BorderBottomWidth: var(--pf-v5-c-form-control--focus--after--BorderBottomWidth);
+    --pf-v5-c-form-control--after--BorderBottomColor: #FFDF5D;
+    --pf-v5-c-form-control--after--BorderBottomWidth: var(--pf-v5-c-form-control--focus--after--BorderBottomWidth);
 }
 
-#kc-header {
-    display: none;
+/* Show Password Button */
+.pf-v5-c-button.pf-m-control:hover {
+	--pf-v5-c-button--m-control--after--BorderBottomColor: #FFDF5D;
+}
+.pf-v5-c-button.pf-m-control:focus-within {
+	--pf-v5-c-button--m-control--after--BorderBottomColor: #FFDF5D;
+}
+.pf-v5-c-button.pf-m-control:focus {
+	--pf-v5-c-button--m-control--after--BorderBottomColor: #FFDF5D;
 }
 
 .pf-v5-c-login__main-header {
@@ -43,4 +59,18 @@
     width: 300px;
     background-repeat: no-repeat;
     margin-bottom: 50px;
+}
+
+@media (prefers-color-scheme: dark) {
+    
+    .pf-v5-c-login__main {
+        border-radius: 0.75rem;
+        background-color: #282828;
+    }
+
+
+    .login-pf body {
+        background-image: url('../img/background.svg');
+        background-size: cover;
+    }
 }
\ No newline at end of file
diff --git a/cccsbg/login/resources/img/background_light.svg b/cccsbg/login/resources/img/background_light.svg
new file mode 100644
index 0000000..40f19e9
--- /dev/null
+++ b/cccsbg/login/resources/img/background_light.svg
@@ -0,0 +1,32 @@
+<svg width="1928" height="1088" viewBox="0 0 1928 1088" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_126_3)" filter="url(#filter0_d_126_3)">
+<rect width="1920" height="1080" transform="translate(4)" fill="url(#paint0_linear_126_3)"/>
+<path opacity="0.6" d="M1524.95 -329L1537.27 -321.888L538.318 1408.34L526 1401.23L1524.95 -329Z" fill="#FFDF5D"/>
+<rect opacity="0.6" x="1676.97" y="-343" width="38.2309" height="2039.94" transform="rotate(30 1676.97 -343)" fill="#FFDF5D"/>
+<rect opacity="0.6" x="1729.69" y="-307.732" width="55.7603" height="2015.38" transform="rotate(30 1729.69 -307.732)" fill="#FFDF5D"/>
+<rect opacity="0.6" x="1835.17" y="-330.327" width="75.0563" height="2070.34" transform="rotate(30 1835.17 -330.327)" fill="#FFDF5D"/>
+<rect opacity="0.6" x="1906.61" y="-251.391" width="84.9295" height="2009.21" transform="rotate(30 1906.61 -251.391)" fill="#FFDF5D"/>
+<rect opacity="0.6" x="2016.81" y="-210.952" width="99.9236" height="1985.61" transform="rotate(30 2016.81 -210.952)" fill="#FFDF5D"/>
+<rect opacity="0.6" x="1596.95" y="-306.147" width="27" height="1997.9" transform="rotate(30 1596.95 -306.147)" fill="#FFDF5D"/>
+<rect opacity="0.6" x="1554.95" y="-321" width="22.7129" height="1997.9" transform="rotate(30 1554.95 -321)" fill="#FFDF5D"/>
+</g>
+<defs>
+<filter id="filter0_d_126_3" x="0" y="0" width="1928" height="1088" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_126_3"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_126_3" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_126_3" x1="-236.5" y1="-157.5" x2="2659.5" y2="1293" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#999999"/>
+</linearGradient>
+<clipPath id="clip0_126_3">
+<rect width="1920" height="1080" fill="white" transform="translate(4)"/>
+</clipPath>
+</defs>
+</svg>