feat: Enhance dark mode styling and improve dropdown menu behavior for better user experience
This commit is contained in:
Matt Batchelder
@@ -398,6 +398,40 @@ hr {
|
||||
}
|
||||
|
||||
/* Navigation Icons and Text */
|
||||
|
||||
/* ==========================================================================
|
||||
FORCE DARK BACKGROUND FALLBACKS
|
||||
Ensure no white areas appear when scrolling or when elements overflow.
|
||||
This uses high-specificity selectors and !important to override stray
|
||||
light-background rules from other stylesheets.
|
||||
========================================================================== */
|
||||
|
||||
html, body, #page-wrapper, .ots-main, .ots-content, .page-content, .container {
|
||||
background-color: var(--color-background) !important;
|
||||
background: none !important;
|
||||
color: var(--color-text-primary) !important;
|
||||
}
|
||||
|
||||
/* Remove or neutralise any pseudo-elements that may paint a light background */
|
||||
html::before, html::after, body::before, body::after, #page-wrapper::before, #page-wrapper::after {
|
||||
background: transparent !important;
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
/* Ensure fixed/backdrop layers are dark where appropriate */
|
||||
.modal-backdrop,
|
||||
.modal,
|
||||
.modal-open,
|
||||
.ots-shell,
|
||||
.ots-footer {
|
||||
background-color: var(--color-background) !important;
|
||||
}
|
||||
|
||||
/* Defensive: override any explicit white panel backgrounds that leak outside their container */
|
||||
.card, .panel, .panel-body, .dashboard-card, .ots-sidebar li.sidebar-list.active > a {
|
||||
background-color: var(--color-surface) !important;
|
||||
color: var(--color-text-primary) !important;
|
||||
}
|
||||
.ots-nav-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
@@ -785,6 +819,29 @@ textarea:focus {
|
||||
border-top: 1px solid var(--color-border) !important;
|
||||
}
|
||||
|
||||
/* Ensure modal footer buttons (cancel/secondary) are readable on dark surfaces */
|
||||
.modal-footer .btn,
|
||||
.modal-footer button {
|
||||
background: var(--ots-surface-3);
|
||||
color: var(--ots-text) !important;
|
||||
border: 1px solid var(--ots-border) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.modal-footer .btn:hover,
|
||||
.modal-footer button:hover {
|
||||
background: var(--ots-surface-2);
|
||||
color: var(--ots-primary) !important;
|
||||
border-color: var(--ots-primary) !important;
|
||||
}
|
||||
|
||||
.modal-footer .btn.btn-primary,
|
||||
.modal-footer button.btn-primary {
|
||||
background: var(--ots-primary) !important;
|
||||
color: #0b1020 !important;
|
||||
border-color: var(--ots-primary-2) !important;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
HELP PANE / MISC
|
||||
============================================================================= */
|
||||
@@ -824,3 +881,333 @@ textarea:focus {
|
||||
font-size: 13px;
|
||||
color: var(--ots-text-muted);
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
LOGIN / SIGN-IN PAGE
|
||||
Styles to match the requested sign-in card: centered panel, dark glass
|
||||
surface, orange accent, soft shadow and modern inputs.
|
||||
============================================================================= */
|
||||
|
||||
:root {
|
||||
--login-accent: #ff8a00;
|
||||
--login-panel-bg: linear-gradient(180deg, rgba(8,12,20,0.9), rgba(10,16,28,0.85));
|
||||
}
|
||||
|
||||
body.login, body.login-page, .xibo-login, #login, .login-wrapper {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px 20px;
|
||||
background-image: radial-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
|
||||
linear-gradient(135deg, rgba(6,16,30,0.6), rgba(8,12,24,0.65));
|
||||
background-size: 48px 48px, cover;
|
||||
}
|
||||
|
||||
.login-card,
|
||||
.login-panel,
|
||||
.auth-card,
|
||||
.xibo-login-box,
|
||||
#login-box {
|
||||
width: 100%;
|
||||
max-width: 560px;
|
||||
border-radius: 12px;
|
||||
padding: 32px 36px;
|
||||
background: var(--login-panel-bg);
|
||||
border: 1px solid rgba(255,255,255,0.04);
|
||||
box-shadow: var(--ots-shadow-lg);
|
||||
color: var(--ots-text);
|
||||
}
|
||||
|
||||
.login-card .login-logo,
|
||||
.login-panel .login-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.login-card .login-logo .logo-icon,
|
||||
.login-panel .login-logo .logo-icon {
|
||||
width: 92px;
|
||||
height: 92px;
|
||||
border-radius: 10px;
|
||||
background: var(--login-accent);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 6px 18px rgba(0,0,0,0.45);
|
||||
}
|
||||
|
||||
/* Brand text next to logo on login */
|
||||
.login-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 18px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.login-brand .login-logo {
|
||||
width: 92px;
|
||||
height: 92px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.login-brand-text {
|
||||
color: var(--ots-text);
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.login-card h1,
|
||||
.login-panel h1 {
|
||||
text-align: center;
|
||||
margin: 8px 0 6px 0;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.login-card .lead,
|
||||
.login-panel .lead {
|
||||
text-align: center;
|
||||
color: var(--ots-text-muted);
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.login-card .form-group,
|
||||
.login-panel .form-group {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.login-card input[type="text"],
|
||||
.login-card input[type="email"],
|
||||
.login-card input[type="password"],
|
||||
.login-card .form-control,
|
||||
.login-panel input[type="text"],
|
||||
.login-panel input[type="email"],
|
||||
.login-panel input[type="password"] {
|
||||
width: 100%;
|
||||
background: linear-gradient(180deg, rgba(255,255,255,0.016), rgba(255,255,255,0.01));
|
||||
border: 1px solid rgba(255,255,255,0.06);
|
||||
color: var(--ots-text);
|
||||
padding: 14px 16px;
|
||||
border-radius: 12px;
|
||||
font-size: 1rem;
|
||||
line-height: 1.25;
|
||||
transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
|
||||
}
|
||||
|
||||
.login-card input:focus,
|
||||
.login-panel input:focus,
|
||||
.login-card .form-control:focus {
|
||||
outline: none;
|
||||
border-color: rgba(255,138,0,0.95);
|
||||
background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
|
||||
box-shadow: 0 8px 22px rgba(0,0,0,0.32), 0 0 0 6px rgba(255,138,0,0.04);
|
||||
}
|
||||
|
||||
.login-card input::placeholder,
|
||||
.login-panel input::placeholder {
|
||||
color: rgba(255,255,255,0.58);
|
||||
}
|
||||
|
||||
.login-card input + input,
|
||||
.login-card input + .form-control,
|
||||
.login-panel input + input {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.login-card .form-control[disabled],
|
||||
.login-card input[disabled] {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.login-card .btn-signin,
|
||||
.login-panel .btn-signin,
|
||||
.login-card .btn-primary.login,
|
||||
.login-panel .btn-primary.login {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
padding: 10px 14px;
|
||||
background: rgba(255,255,255,0.03);
|
||||
color: var(--ots-text);
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(255,255,255,0.12);
|
||||
font-weight: 600;
|
||||
box-shadow: none;
|
||||
transition: background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
|
||||
}
|
||||
|
||||
.login-card .btn-signin .icon,
|
||||
.login-panel .btn-signin .icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.login-card .btn-signin:hover,
|
||||
.login-panel .btn-signin:hover {
|
||||
background: rgba(255,255,255,0.06);
|
||||
border-color: rgba(255,255,255,0.18);
|
||||
}
|
||||
|
||||
.login-card .btn-signin:focus,
|
||||
.login-panel .btn-signin:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 6px 18px rgba(0,0,0,0.28), 0 0 0 6px rgba(255,138,0,0.04);
|
||||
border-color: rgba(255,138,0,0.28);
|
||||
}
|
||||
|
||||
.login-card .forgot-link,
|
||||
.login-panel .forgot-link {
|
||||
display: block;
|
||||
text-align: right;
|
||||
margin-top: 8px;
|
||||
color: var(--ots-text-muted);
|
||||
}
|
||||
|
||||
/* Small screens: compress card padding */
|
||||
@media (max-width: 520px) {
|
||||
.login-card, .login-panel { padding: 20px; border-radius: 10px; }
|
||||
.login-card .login-logo .logo-icon { width: 72px; height: 72px; }
|
||||
}
|
||||
|
||||
/* Animated background for login page: subtle moving gradient behind the card */
|
||||
body.login-page::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
background: linear-gradient(120deg, rgba(14,28,45,0.6), rgba(6,16,30,0.55)),
|
||||
radial-gradient( circle at 10% 20%, rgba(79,140,255,0.06), transparent 10% ),
|
||||
radial-gradient( circle at 85% 80%, rgba(255,138,0,0.04), transparent 12% );
|
||||
background-blend-mode: overlay, normal, normal;
|
||||
background-size: 200% 200%, 100% 100%, 100% 100%;
|
||||
filter: blur(22px);
|
||||
pointer-events: none;
|
||||
opacity: 0.95;
|
||||
/* no animation here - blobs will provide the motion */
|
||||
}
|
||||
|
||||
@keyframes ots-login-bg-shift {
|
||||
0% { background-position: 0% 50%, 0% 0%, 0% 0%; }
|
||||
50% { background-position: 100% 50%, 0% 0%, 0% 0%; }
|
||||
100% { background-position: 0% 50%, 0% 0%, 0% 0%; }
|
||||
}
|
||||
|
||||
/* Bring the login card above the animated background */
|
||||
.login-card,
|
||||
.login-panel,
|
||||
.auth-card,
|
||||
.xibo-login-box,
|
||||
#login-box {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* Blurred animated color blobs behind the login card */
|
||||
.ots-login-blob {
|
||||
position: fixed;
|
||||
pointer-events: none;
|
||||
filter: blur(60px) saturate(120%);
|
||||
opacity: 0.9;
|
||||
mix-blend-mode: screen;
|
||||
z-index: 0;
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
.ots-login-blob--1 {
|
||||
width: 520px;
|
||||
height: 520px;
|
||||
left: -8%;
|
||||
top: -6%;
|
||||
background: radial-gradient(circle at 30% 30%, rgba(79,140,255,0.65), rgba(79,140,255,0.18) 35%, transparent 50%);
|
||||
animation: ots-blob-move-1 20s ease-in-out infinite alternate !important;
|
||||
}
|
||||
|
||||
.ots-login-blob--2 {
|
||||
width: 420px;
|
||||
height: 420px;
|
||||
right: 6%;
|
||||
bottom: 18%;
|
||||
background: radial-gradient(circle at 60% 40%, rgba(255,138,0,0.45), rgba(255,138,0,0.14) 36%, transparent 55%);
|
||||
animation: ots-blob-move-2 26s ease-in-out infinite alternate !important;
|
||||
}
|
||||
|
||||
.ots-login-blob--3 {
|
||||
width: 360px;
|
||||
height: 360px;
|
||||
left: 18%;
|
||||
bottom: -4%;
|
||||
background: radial-gradient(circle at 40% 60%, rgba(94,200,255,0.28), rgba(94,200,255,0.08) 40%, transparent 60%);
|
||||
animation: ots-blob-move-3 22s ease-in-out infinite alternate !important;
|
||||
}
|
||||
|
||||
/* Disable other animations/transitions on the login page so only blobs animate */
|
||||
body.login-page *,
|
||||
body.login-page *::before,
|
||||
body.login-page *::after {
|
||||
animation: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
/* Re-enable blob animations specifically (higher specificity) */
|
||||
.ots-login-blob,
|
||||
.ots-login-blob--1,
|
||||
.ots-login-blob--2,
|
||||
.ots-login-blob--3 {
|
||||
animation-play-state: running !important;
|
||||
}
|
||||
|
||||
@keyframes ots-blob-move-1 {
|
||||
0% { transform: translate3d(0,0,0) scale(1); opacity: 0.85; }
|
||||
100% { transform: translate3d(18px,26px,0) scale(1.06); opacity: 0.7; }
|
||||
}
|
||||
|
||||
@keyframes ots-blob-move-2 {
|
||||
0% { transform: translate3d(0,0,0) scale(1); opacity: 0.65; }
|
||||
100% { transform: translate3d(-28px,-18px,0) scale(1.08); opacity: 0.55; }
|
||||
}
|
||||
|
||||
@keyframes ots-blob-move-3 {
|
||||
0% { transform: translate3d(0,0,0) scale(1); opacity: 0.6; }
|
||||
100% { transform: translate3d(22px,-20px,0) scale(1.05); opacity: 0.5; }
|
||||
}
|
||||
|
||||
|
||||
/* EXTRA DEFENSIVE: ensure no white background shows through on long pages */
|
||||
html, body, #page-wrapper, .ots-shell, .ots-main, #content-wrapper, .content-wrapper, .ots-content, .page-content, .container, .container-fluid, .dashboard-page, .dashboard, .dashboard-card, .page {
|
||||
background-color: var(--color-background) !important;
|
||||
background-image: none !important;
|
||||
background-repeat: no-repeat !important;
|
||||
color: var(--color-text-primary) !important;
|
||||
min-height: 100vh !important;
|
||||
}
|
||||
|
||||
/* Neutralise any inline styles or late-loaded styles that set white backgrounds */
|
||||
*[style] {
|
||||
background-color: inherit !important;
|
||||
}
|
||||
|
||||
/* Provide a small utility to detect offending elements visually (useful while debugging) */
|
||||
body.debug-white-areas * {
|
||||
outline: 1px solid rgba(255,0,0,0.04) !important;
|
||||
}
|
||||
|
||||
/* Strong fallback for modals/backdrops */
|
||||
.modal-backdrop, .modal, .modal-open, .ots-footer, .page-footer {
|
||||
background-color: var(--color-background) !important;
|
||||
}
|
||||
|
||||
/* Ensure the root html background is also forced dark at the highest level */
|
||||
html[style], body[style] {
|
||||
background-color: var(--color-background) !important;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user