admin/cacti
1
0 Fork 0
mirror of https://github.com/Cacti/cacti.git synced 2026-10-23 03:27:02 +09:00
Code Issues Packages Projects Releases Wiki Activity

themes: unify login page styling across all core themes (#8230)

Browse Source 
* themes: unify login page styling across all core themes

Flatten the dark themes' login page/card gradients (dark, paper-plane) to flat surfaces, give every theme a clean bordered login card, and add a browser -webkit-autofill override per theme so saved credentials keep the theme's input colors instead of the browser's olive tint. Re-point the Deepness and MidWinter themes' login styling from the legacy .login*/.cactiLogin* classes to develop's .cactiAuth* markup (including .cactiAuthLeft, which auth_login.php targets) so their login pages render correctly. Light themes keep their signature login backdrops.

* changelog: add fragment for login page theme unification (#8230)
This commit is contained in:
TheWitness authored and GitHub committed 2026-10-08 13:32:01 -04:00
1 parent 6f57c319dd
commit 22ab16cac9
12 files changed
+162 -128
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

changelog.d/8230.issue
+1
View File
@@ -0,0 +1 @@
Unify the login page styling across all core themes - a flat bordered login card and a browser-autofill override for every theme, flattened login-page gradients on the dark themes, and re-point the Deepness and MidWinter themes from the legacy .login* classes to the current .cactiAuth* login markup
include/themes/cacti/main.css
+12 -8
View File
@@ -893,14 +893,18 @@ label {
top: 30%;
width: 360px;
max-height: 300px;
background: rgba(255,255,255,1);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(237,237,237,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0 );
background: #ffffff;
border: 1px solid #cccccc;
}
.cactiAuthBody input:-webkit-autofill,
.cactiAuthBody input:-webkit-autofill:hover,
.cactiAuthBody input:-webkit-autofill:focus,
.cactiAuthBody input:-webkit-autofill:active {
-webkit-text-fill-color: #000000;
-webkit-box-shadow: 0 0 0 1000px #ffffff inset;
caret-color: #000000;
transition: background-color 9999s ease-in-out 0s;
}
.cactiAuthTitle {
include/themes/carrot/main.css
+12 -8
View File
@@ -827,14 +827,18 @@ label {
top: 30%;
width: 360px;
max-height: 300px;
background: rgba(255,255,255,1);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(237,237,237,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0 );
background: #ffffff;
border: 1px solid #cccccc;
}
.cactiAuthBody input:-webkit-autofill,
.cactiAuthBody input:-webkit-autofill:hover,
.cactiAuthBody input:-webkit-autofill:focus,
.cactiAuthBody input:-webkit-autofill:active {
-webkit-text-fill-color: #000000;
-webkit-box-shadow: 0 0 0 1000px #ffffff inset;
caret-color: #000000;
transition: background-color 9999s ease-in-out 0s;
}
.cactiAuthTitle {
include/themes/dark/main.css
+12 -13
View File
@@ -1031,16 +1031,21 @@ ul#breadcrumbs {
top: 30%;
width: 360px;
max-height: 300px;
background: rgba(255,255,255,1);
background: -ms-linear-gradient(top, #363636 0%, #071204 100%);
background: -moz-linear-gradient(top, #363636 0%, #071204 100%);
background: -o-linear-gradient(top, #363636 0%, #071204 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #363636), color-stop(100, #071204));
background: -webkit-linear-gradient(top, #363636 0%, #071204 100%);
background: linear-gradient(to bottom, #363636 0%, #071204 100%);
background: #363636;
border: 1px solid #4a4a4a;
text-shadow: 1px 1px 1px rgba(9, 61, 16, 0.66);
}
.cactiAuthBody input:-webkit-autofill,
.cactiAuthBody input:-webkit-autofill:hover,
.cactiAuthBody input:-webkit-autofill:focus,
.cactiAuthBody input:-webkit-autofill:active {
-webkit-text-fill-color: #eeeeee;
-webkit-box-shadow: 0 0 0 1000px #222222 inset;
caret-color: #eeeeee;
transition: background-color 9999s ease-in-out 0s;
}
.cactiAuthArea hr {
margin-right: 60px;
}
@@ -1073,12 +1078,6 @@ legend {
width: 100%;
height: 100%;
background: #161616;
background-image: -ms-linear-gradient(top, #161616 0%, #000000 100%);
background-image: -moz-linear-gradient(top, #161616 0%, #000000 100%);
background-image: -o-linear-gradient(top, #161616 0%, #000000 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #161616), color-stop(100, #000000));
background-image: -webkit-linear-gradient(top, #161616 0%, #000000 100%);
background-image: linear-gradient(to bottom, #161616 0%, #000000 100%);
}
.cactiAuthPanel {
include/themes/deepness/main.css
+18 -50
View File
@@ -993,16 +993,19 @@ label {
margin-right: 2px;
}
.loginLeft, .logoutLeft {
width: 33%;
float: left;
.cactiAuthBody {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: var(--dp-page);
}
.loginCenter, .logoutCenter {
.cactiAuthArea {
border-radius: 10px;
position: relative;
padding: 30px 0px 5px 20px;
top: 30%;
padding: 15px;
max-width: 360px;
max-height: 300px;
margin-left: auto;
@@ -1011,37 +1014,18 @@ label {
border: 1px solid var(--dp-border);
}
.loginArea input:-webkit-autofill,
.loginArea input:-webkit-autofill:hover,
.loginArea input:-webkit-autofill:focus,
.loginArea input:-webkit-autofill:active {
.cactiAuthBody input:-webkit-autofill,
.cactiAuthBody input:-webkit-autofill:hover,
.cactiAuthBody input:-webkit-autofill:focus,
.cactiAuthBody input:-webkit-autofill:active {
-webkit-text-fill-color: var(--dp-text);
-webkit-box-shadow: 0 0 0 1000px var(--dp-panel) inset;
caret-color: var(--dp-text);
transition: background-color 9999s ease-in-out 0s;
}
.cactiLoginLogo, .cactiLogoutLogo {
position: relative;
z-index: 2;
margin-bottom: 0px;
color: var(--dp-accent);
font-size: 48px;
float: right;
}
.cactiLoginLogo i, .cactiLogoutLogo i {
margin-right: 10px;
}
.cactiLoginLogo .rockyLogo, .cactiLogoutLogo .rockyLogo {
display: inline-block;
width: 48px;
height: 48px;
background-color: var(--dp-accent);
-webkit-mask: url('./images/rockylinux.svg') no-repeat center / contain;
mask: url('./images/rockylinux.svg') no-repeat center / contain;
vertical-align: middle;
.cactiAuthLogo {
display: none;
}
/* Graph action icons: hidden until the row is hovered (ported from the dark theme) */
@@ -1059,19 +1043,12 @@ label {
display: none;
}
.loginArea, .logoutArea {
-moz-border-radius: 10px;
border-radius: 10px;
position: relative;
min-height: 200px;
}
.cactiLoginTable td {
.cactiAuthTable td {
padding-bottom: 6px;
padding-right: 6px;
}
.loginErrors, .logoutErrors {
.cactiAuthErrors {
color: red;
min-height: 15px;
}
@@ -1081,15 +1058,6 @@ legend {
font-weight: bold;
}
.loginRight, .logoutRight {
width: 33%;
float: right;
}
.loginBody, .logoutBody {
background: var(--dp-page);
}
.versionInfo {
padding-top: 5px;
float: right;
@@ -1165,7 +1133,7 @@ legend {
display: inline-block;
}
.loginPanel {
.cactiAuthPanel {
padding: 4px 0px;
}
include/themes/hollyberry/main.css
+12 -8
View File
@@ -847,14 +847,18 @@ label {
top: 30%;
width: 360px;
max-height: 300px;
background: rgba(255,255,255,1);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(237,237,237,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0 );
background: #ffffff;
border: 1px solid #cccccc;
}
.cactiAuthBody input:-webkit-autofill,
.cactiAuthBody input:-webkit-autofill:hover,
.cactiAuthBody input:-webkit-autofill:focus,
.cactiAuthBody input:-webkit-autofill:active {
-webkit-text-fill-color: #000000;
-webkit-box-shadow: 0 0 0 1000px #ffffff inset;
caret-color: #000000;
transition: background-color 9999s ease-in-out 0s;
}
.cactiAuthTitle {
include/themes/midwinter/css/media/core.css
+31 -17
View File
@@ -1208,11 +1208,11 @@ ul#breadcrumbs {
background: transparent url("./../../images/cacti_logo.svg") no-repeat 30px;
}
.logoutLeft, .loginLeft {
.cactiAuthLeft {
display: none;
}
.loginCenter, .logoutCenter {
.cactiAuthCenter {
display: flex !important;
align-content: center;
align-items: center;
@@ -1221,7 +1221,7 @@ ul#breadcrumbs {
height: 100%;
}
.cactiLoginLogo, .cactiLogoutLogo {
.cactiAuthLogo {
position: relative;
float: left;
width: 50px;
@@ -1232,42 +1232,46 @@ ul#breadcrumbs {
background: var(--text-color-highlight-a) url(./../../images/cacti_logo.svg) no-repeat scroll 50% 50% / 20px auto;
}
.loginArea, .logoutArea {
.cactiAuthArea {
margin: auto;
color: var(--text-color-highlight);
padding: 20px;
border-radius: 10px;
background: var(--background-filter);
border: 1px solid var(--border-color);
}
.cactiLoginTable {
.cactiAuthTable {
width: 100%;
}
.cactiLoginTable tr{
.cactiAuthTable tr{
line-height: 30px;
}
.cactiLoginTable td {
.cactiAuthTable td {
width: 100%;
}
.cactiLoginTable td:nth-child(2){
.cactiAuthTable td:nth-child(2){
padding-bottom: 10px;
}
.cactiLoginTable tr:last-child td{
.cactiAuthTable tr:last-child td{
padding-top: 20px;
}
.cactiLoginTable td > * {
.cactiAuthTable td > * {
width: 100%;
padding-right: 0;
padding-left: 0;
}
.loginTitle {
.cactiAuthTitle {
display: flex;
justify-content: flex-end;
}
.loginErrors, .logoutErrors {
.cactiAuthErrors {
min-height: 15px;
text-align: center;
color: red;
@@ -1290,11 +1294,11 @@ legend::before {
background: transparent url(./../../images/cacti_logo.svg) no-repeat scroll 50% 50% / 60px auto;
}
*/
.logoutRight, .loginRight {
.cactiAuthRight {
display: none;
}
.loginBody, .logoutBody {
.cactiAuthBody {
font-size: 100%;
display: flex !important;
align-content: center;
@@ -1304,12 +1308,22 @@ legend::before {
background: var(--background-menu);
}
.loginBody input, .logoutBody input {
.cactiAuthBody input {
color: white;
border: 1px solid rgba(255,255,255,0.2);
}
.loginBody input[type="submit"] {
.cactiAuthBody input:-webkit-autofill,
.cactiAuthBody input:-webkit-autofill:hover,
.cactiAuthBody input:-webkit-autofill:focus,
.cactiAuthBody input:-webkit-autofill:active {
-webkit-text-fill-color: white;
-webkit-box-shadow: 0 0 0 1000px var(--background-filter) inset;
caret-color: white;
transition: background-color 9999s ease-in-out 0s;
}
.cactiAuthBody input[type="submit"] {
background-color: var(--background-progress);
}
@@ -1389,7 +1403,7 @@ legend::before {
width: 2.0em;
}
.loginPanel {
.cactiAuthPanel {
padding: 4px 0;
}
include/themes/modern/main.css
+12 -7
View File
@@ -966,16 +966,21 @@ ul#breadcrumbs {
top: 30%;
max-width: 460px;
max-height: 300px;
background: rgba(255,255,255,1);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(237,237,237,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: #ffffff;
border: 1px solid #cccccc;
text-shadow: 1px 1px 1px rgba(9, 61, 16, 0.66);
}
.cactiAuthBody input:-webkit-autofill,
.cactiAuthBody input:-webkit-autofill:hover,
.cactiAuthBody input:-webkit-autofill:focus,
.cactiAuthBody input:-webkit-autofill:active {
-webkit-text-fill-color: #000000;
-webkit-box-shadow: 0 0 0 1000px #ffffff inset;
caret-color: #000000;
transition: background-color 9999s ease-in-out 0s;
}
.cactiAuthCenter {
width: 400px;
height: 350px;
include/themes/paper-plane/main.css
+14 -1
View File
@@ -945,6 +945,20 @@ label {
.cactiAuthArea {
color: #9d9d9d;
padding: 20px;
border-radius: 10px;
background: #26282b;
border: 1px solid #3a3b3c;
}
.cactiAuthBody input:-webkit-autofill,
.cactiAuthBody input:-webkit-autofill:hover,
.cactiAuthBody input:-webkit-autofill:focus,
.cactiAuthBody input:-webkit-autofill:active {
-webkit-text-fill-color: #333333;
-webkit-box-shadow: 0 0 0 1000px #f5f5f5 inset;
caret-color: #333333;
transition: background-color 9999s ease-in-out 0s;
}
.cactiAuthTable td {
@@ -987,7 +1001,6 @@ legend {
height: 100% !important;
width: 100% !important;
background: #1D1F21;
background-image: linear-gradient(#1D1F21,#000000);
}
.versionInfo {
include/themes/paw/main.css
+12 -8
View File
@@ -845,14 +845,18 @@ label {
top: 30%;
width: 360px;
max-height: 300px;
background: rgba(255, 255, 255, 1);
background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(47%, rgba(246, 246, 246, 1)), color-stop(100%, rgba(237, 237, 237, 1)));
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0);
background: #ffffff;
border: 1px solid #cccccc;
}
.cactiAuthBody input:-webkit-autofill,
.cactiAuthBody input:-webkit-autofill:hover,
.cactiAuthBody input:-webkit-autofill:focus,
.cactiAuthBody input:-webkit-autofill:active {
-webkit-text-fill-color: #000000;
-webkit-box-shadow: 0 0 0 1000px #ffffff inset;
caret-color: #000000;
transition: background-color 9999s ease-in-out 0s;
}
.cactiAuthTable td {
include/themes/raspberry/main.css
+12 -8
View File
@@ -839,14 +839,18 @@ label {
top: 30%;
width: 360px;
max-height: 300px;
background: rgba(255,255,255,1);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(237,237,237,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0 );
background: #ffffff;
border: 1px solid #cccccc;
}
.cactiAuthBody input:-webkit-autofill,
.cactiAuthBody input:-webkit-autofill:hover,
.cactiAuthBody input:-webkit-autofill:focus,
.cactiAuthBody input:-webkit-autofill:active {
-webkit-text-fill-color: #000000;
-webkit-box-shadow: 0 0 0 1000px #ffffff inset;
caret-color: #000000;
transition: background-color 9999s ease-in-out 0s;
}
.cactiAuthTitle {
include/themes/sunrise/main.css
+14
View File
@@ -1003,6 +1003,10 @@ label.ui-state-hover > span {
.cactiAuthArea {
color: #9d9d9d;
padding: 20px;
border-radius: 10px;
background: rgba(0,0,0,0.35);
border: 1px solid rgba(255,255,255,0.2);
}
.cactiAuthTitle {
@@ -1043,6 +1047,16 @@ legend {
border: 1px solid rgba(255,255,255,0.2);
}
.cactiAuthBody input:-webkit-autofill,
.cactiAuthBody input:-webkit-autofill:hover,
.cactiAuthBody input:-webkit-autofill:focus,
.cactiAuthBody input:-webkit-autofill:active {
-webkit-text-fill-color: #969BA3;
-webkit-box-shadow: 0 0 0 1000px #0c2233 inset;
caret-color: #969BA3;
transition: background-color 9999s ease-in-out 0s;
}
.versionInfo {
position: fixed;
left: 5px;