html, body {
height: 100%;
}
app {
display: block;
height: 100%;
}
:root {
--gov-splash-bg: var(--dxbl-body-bg, var(--bs-body-bg, #f7f9fc));
--gov-splash-fg: var(--dxbl-text-color, var(--bs-body-color, #1f3557));
--gov-splash-accent: var(--dxbl-primary, var(--bs-primary, #2f5d8f));
}
/* Dark-mode splash overrides ─────────────────────────────────────────────
The inline script in _Host.cshtml adds [data-gov-dark] to before
the first paint when the XAF_CurrentTheme cookie indicates a dark theme
(e.g. FluentDark, BlazingDark). This ensures the splash screen respects
the user's selected theme without waiting for Blazor / JS to hydrate. */
[data-gov-dark] {
--gov-splash-bg: #1a1a2e;
--gov-splash-fg: #c8d6e8;
--gov-splash-accent: #6ea8d0;
}
/* OS-level dark-mode fallback (used when no XAF cookie is present yet,
e.g. the very first visit with the OS set to dark mode). */
@media (prefers-color-scheme: dark) {
:root:not([data-gov-dark]) {
--gov-splash-bg: #1a1a2e;
--gov-splash-fg: #c8d6e8;
--gov-splash-accent: #6ea8d0;
}
}
.header-logo {
flex-shrink: 0;
background-image: url('../images/BarangayLogo.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: left center;
width: 230px;
height: 44px;
}
/* Dark theme — swap to white variant so barangay name stays readable */
[data-gov-dark] .header-logo {
background-image: url('../images/BarangayLogo-white.svg');
}
#blazor-error-ui {
background: inherit;
bottom: 0;
display: none;
position: fixed;
width: 100%;
height: 100%;
z-index: 100001;
}
.gov-splash {
position: fixed;
inset: 0;
z-index: 100000;
display: grid;
place-items: center;
background: var(--gov-splash-bg);
color: var(--gov-splash-fg);
transition: opacity 300ms ease-out;
opacity: 1;
}
.gov-splash--hidden {
opacity: 0;
pointer-events: none;
}
.gov-splash__panel {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
color: inherit;
}
.gov-splash__emblem {
position: relative;
width: 96px;
height: 96px;
display: grid;
place-items: center;
color: inherit;
}
.gov-splash__ring {
position: absolute;
inset: 6px;
border-radius: 50%;
border: 2px solid var(--gov-splash-accent);
opacity: 0.35;
animation: gov-ring 1.8s ease-in-out infinite;
}
.gov-splash__seal {
width: 50px;
height: 58px;
opacity: 0.95;
}
.gov-splash__title {
font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 1.05rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: inherit;
}
.kp-criteria-editor__actions {
display: flex;
align-items: center;
column-gap: 8px;
margin-left: 8px;
}
.kp-criteria-editor__footer-actions {
display: flex;
justify-content: flex-end;
column-gap: 12px;
}
@keyframes gov-ring {
0%, 100% {
transform: scale(0.92);
opacity: 0.25;
}
50% {
transform: scale(1.08);
opacity: 0.65;
}
}
@media (prefers-reduced-motion: reduce) {
.gov-splash,
.gov-splash__ring {
animation: none !important;
transition: none;
}
.gov-splash__ring {
opacity: 0.55;
transform: none;
}
}
/* ============================================================
Custom Login Page
============================================================ */
.login-page {
display: flex;
min-height: 100vh;
overflow: hidden;
background: var(--dxds-color-surface-neutral-default-rest, #f7f9fc);
color: var(--dxds-color-content-neutral-default-rest, #161616);
}
/* ── Left branding panel ─────────────────────────────────── */
.login-panel-left {
flex: 0 0 42%;
max-width: 42%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 3.5rem 3.5rem 2.5rem;
background: var(--dxds-color-surface-primary-default-rest, #2f5d8f);
color: var(--dxds-color-content-neutral-default-rest-on-primary, #fff);
position: relative;
overflow: hidden;
}
/* Subtle decorative circles */
.login-panel-left::before {
content: '';
position: absolute;
top: -160px;
right: -160px;
width: 480px;
height: 480px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.06);
pointer-events: none;
}
.login-panel-left::after {
content: '';
position: absolute;
bottom: -100px;
left: -100px;
width: 320px;
height: 320px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.08);
pointer-events: none;
}
.login-branding {
position: relative;
z-index: 1;
max-width: 400px;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Powered-by footer at the bottom of the left panel */
.login-powered-footer {
display: flex;
align-items: center;
gap: 0.45rem;
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.55);
margin-top: auto;
padding-top: 2rem;
}
.login-powered-icon {
width: 20px;
height: 20px;
object-fit: contain;
opacity: 0.7;
filter: brightness(0) invert(1);
}
/* Barangay logo on the login panel */
.login-brgy-logo {
display: block;
width: 260px;
height: auto;
margin-bottom: 1.75rem;
}
.login-app-name {
font-size: 2rem;
font-weight: 700;
letter-spacing: -0.025em;
margin: 0 0 0.3rem;
color: #fff;
line-height: 1.1;
}
.login-app-full-name {
font-size: 0.875rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.7);
margin: 0 0 1.5rem;
line-height: 1.4;
letter-spacing: 0.01em;
}
.login-app-desc {
font-size: 0.9rem;
line-height: 1.65;
color: rgba(255, 255, 255, 0.82);
margin: 0 0 2rem;
}
.login-security-notice {
display: flex;
align-items: flex-start;
gap: 0.6rem;
background: rgba(0, 0, 0, 0.18);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 8px;
padding: 0.85rem 1rem;
font-size: 0.795rem;
line-height: 1.55;
color: rgba(255, 255, 255, 0.88);
}
.login-security-notice svg {
flex-shrink: 0;
margin-top: 1px;
opacity: 0.75;
}
/* ── Right login form panel ──────────────────────────────── */
.login-panel-right {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 3rem 2rem;
background: var(--dxds-color-surface-neutral-default-rest, #f7f9fc);
}
.login-form-card {
width: 100%;
max-width: 420px;
background: var(--dxds-color-surface-neutral-default-rest, #fff);
border: 1px solid var(--dxds-color-border-neutral-default-rest, #dee2e6);
border-radius: 12px;
padding: 2.5rem 2.5rem 2rem;
box-shadow: 0 4px 28px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.07);
}
/* Header */
.login-form-header {
margin-bottom: 1.75rem;
}
.login-form-header h2 {
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--dxds-color-content-neutral-default-rest, #161616);
margin: 0 0 0.3rem;
}
.login-form-header p {
font-size: 0.875rem;
color: var(--dxds-color-content-neutral-subdued-rest, #6c757d);
margin: 0;
}
/* Error alert */
.login-error {
display: flex;
align-items: flex-start;
gap: 0.55rem;
background: var(--dxds-color-surface-danger-subdued-rest, #fff5f5);
border: 1px solid var(--dxds-color-border-danger-default-rest, #fca5a5);
border-radius: 8px;
color: var(--dxds-color-content-danger-default-rest, #b91c1c);
font-size: 0.855rem;
line-height: 1.5;
padding: 0.7rem 0.9rem;
margin-bottom: 1.25rem;
}
.login-error svg {
flex-shrink: 0;
margin-top: 1px;
}
/* Informational alert */
.login-info {
display: flex;
align-items: flex-start;
gap: 0.55rem;
background: #eff6ff;
border: 1px solid #93c5fd;
border-radius: 8px;
color: #1e40af;
font-size: 0.855rem;
line-height: 1.5;
padding: 0.7rem 0.9rem;
margin-bottom: 1.25rem;
}
.login-info svg {
flex-shrink: 0;
margin-top: 1px;
}
/* Form fields */
.login-field {
margin-bottom: 1.2rem;
}
.login-field label {
display: block;
font-size: 0.845rem;
font-weight: 500;
color: var(--dxds-color-content-neutral-default-rest, #161616);
margin-bottom: 0.4rem;
}
/* Stretch the DxTextBox wrapper to full width */
.login-field .dxbl-textbox {
width: 100%;
}
/* Native inputs — use DevExpress Design System semantic variables for full theme support */
.login-field .form-control {
display: block;
width: 100%;
border-radius: 6px;
border: 1px solid var(--dxds-color-border-neutral-default-rest, #ced4da);
background: var(--dxds-color-surface-neutral-default-rest, #fff);
color: var(--dxds-color-content-neutral-default-rest, #161616);
padding: 0.45rem 0.75rem;
font-size: 0.9rem;
font-family: inherit;
line-height: 1.5;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
box-sizing: border-box;
-webkit-appearance: none;
appearance: none;
}
.login-field .form-control::placeholder {
color: var(--dxds-color-content-neutral-subdued-rest, #9ca3af);
opacity: 1;
}
.login-field .form-control:focus {
border-color: var(--dxds-color-border-primary-default-rest, #2f5d8f);
box-shadow: 0 0 0 3px var(--dxds-color-surface-primary-subdued-rest, rgba(47, 93, 143, 0.18));
outline: none;
background: var(--dxds-color-surface-neutral-default-rest, #fff);
color: var(--dxds-color-content-neutral-default-rest, #161616);
}
/* Submit button */
.login-btn {
display: block;
width: 100%;
margin-top: 0.75rem;
padding: 0.6rem 1rem;
font-size: 0.95rem;
font-weight: 500;
border-radius: 8px;
}
/* Footer */
.login-footer {
margin-top: 1.75rem;
padding-top: 1.25rem;
border-top: 1px solid var(--dxds-color-border-neutral-default-rest, #dee2e6);
text-align: center;
font-size: 0.775rem;
color: var(--dxds-color-content-neutral-subdued-rest, #6c757d);
line-height: 1.6;
}
/* ── Responsive — stack panels on small screens ──────────── */
@media (max-width: 768px) {
.login-page {
flex-direction: column;
}
.login-panel-left {
flex: 0 0 auto;
max-width: 100%;
padding: 2rem 1.5rem 1.75rem;
align-items: center;
text-align: center;
}
.login-branding {
max-width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.login-eliteworkx-logo {
margin-left: auto;
margin-right: auto;
}
.login-security-notice {
text-align: left;
}
.login-panel-right {
padding: 2rem 1.25rem;
}
.login-form-card {
padding: 2rem 1.5rem 1.5rem;
}
}
/* ============================================================
Welcome Landing Page
============================================================ */
.welcome-landing {
display: flex;
justify-content: center;
align-items: flex-start;
padding: 2rem;
min-height: 100%;
background: var(--dxds-color-surface-neutral-default-rest, #f7f9fc);
}
.welcome-landing__card {
width: 100%;
max-width: 980px;
background: var(--dxds-color-surface-neutral-default-rest, #fff);
border: 1px solid var(--dxds-color-border-neutral-default-rest, #dee2e6);
border-radius: 14px;
padding: 2rem;
box-shadow: 0 6px 22px rgba(0, 0, 0, 0.08);
}
.welcome-landing__header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}
.welcome-landing__logo {
width: 180px;
height: auto;
object-fit: contain;
flex-shrink: 0;
}
/* Dark theme — swap to white-text logo so barangay name stays readable */
[data-gov-dark] .welcome-landing__logo {
content: url('../images/BarangayLogo-white.svg');
}
.welcome-landing__title {
margin: 0;
font-size: 1.75rem;
line-height: 1.2;
color: var(--dxds-color-content-neutral-default-rest, #161616);
}
.welcome-landing__subtitle {
margin: 0.3rem 0 0;
font-size: 0.92rem;
color: var(--dxds-color-content-neutral-subdued-rest, #6c757d);
}
.welcome-landing__description {
margin: 1rem 0 1.25rem;
line-height: 1.7;
color: var(--dxds-color-content-neutral-default-rest, #20252b);
}
.welcome-landing__actions {
margin-bottom: 1.5rem;
}
.welcome-landing__link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
text-decoration: none;
font-weight: 600;
color: var(--dxds-color-content-primary-default-rest, #2f5d8f);
}
.welcome-landing__link:hover,
.welcome-landing__link:focus {
text-decoration: underline;
}
.welcome-landing__security {
border-left: 4px solid var(--dxds-color-border-primary-default-rest, #2f5d8f);
background: var(--dxds-color-surface-primary-subdued-rest, #eef4fb);
border-radius: 8px;
padding: 0.95rem 1rem;
}
.welcome-landing__security h2 {
margin: 0 0 0.45rem;
font-size: 1rem;
color: var(--dxds-color-content-neutral-default-rest, #161616);
}
.welcome-landing__security p {
margin: 0;
line-height: 1.6;
font-size: 0.9rem;
color: var(--dxds-color-content-neutral-default-rest, #20252b);
}
.welcome-landing__powered {
margin-top: 1.25rem;
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-size: 0.75rem;
color: var(--dxds-color-content-neutral-subdued-rest, #6c757d);
transition: color 0.2s;
}
/* Dark theme — use a light muted colour for readability */
[data-gov-dark] .welcome-landing__powered {
color: rgba(200, 214, 232, 0.75);
}
.welcome-landing__eliteworkx {
width: 20px;
height: 20px;
object-fit: contain;
opacity: 0.85;
}
/* Dark theme — invert the dark icon so it shows on dark backgrounds */
[data-gov-dark] .welcome-landing__eliteworkx {
filter: brightness(0) invert(1);
opacity: 0.7;
}
@media (max-width: 768px) {
.welcome-landing {
padding: 1.2rem;
}
.welcome-landing__card {
padding: 1.25rem;
}
.welcome-landing__header {
flex-direction: column;
align-items: flex-start;
}
.welcome-landing__title {
font-size: 1.4rem;
}
}