CCCSBG-PR/cccsbg-keycloak-theme
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix light mode

Browse source
This commit is contained in:
Pheeef 2025-02-28 20:16:29 +01:00
parent befbd768e9
commit 4f8ce016c9
2 changed files with 69 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
cccsbg/login/resources/css/styles.css
View file

@ -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 {
@ -44,3 +60,17 @@
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;
}
}

32
cccsbg/login/resources/img/background_light.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 2.3 KiB