/* ============================================================ CYBER.MD — login screen theme ------------------------------------------------------------ Scoped to the login route only (.giz-wm-layout-login / .giz-wm-page-login), so it never touches the rest of the Manager UI. Loaded after app.css in index.html so it wins the cascade. NOTE: exact input/button class names below are best-effort (Manager forms use Syncfusion Blazor controls, e.g. .e-input, .e-btn) — verify against the rendered DOM in the browser and adjust selectors if a control doesn't pick up the theme. ============================================================ */ :root { --cybmd-accent: #ce121e; /* red */ --cybmd-accent-2: #2b4be2; /* blue */ --cybmd-bg: #101319; --cybmd-surface: #181c26; --cybmd-border: rgba(255, 255, 255, 0.08); --cybmd-text: #f2f2f4; --cybmd-text-muted: rgba(242, 242, 244, 0.7); } /* ---------- Full-page backdrop ---------- */ .giz-wm-layout-login { position: relative; align-items: center; background: var(--cybmd-bg) url("../wallpaper_new.jpg") center center / cover no-repeat !important; overflow: hidden; } /* ---------- Login card ---------- */ .giz-wm-page-login, .giz-wm-page-login > *, .giz-wm-page-login .e-card { background: var(--cybmd-surface) !important; color: var(--cybmd-text) !important; } .giz-wm-page-login { position: relative; z-index: 1; border: 1px solid var(--cybmd-border) !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.2); } .giz-wm-page-login__logo { transform: scale(1.1); transform-origin: center top; } /* Subtitle line (no matching element in the DOM, so it is injected) */ .giz-wm-page-login__logo::after { content: "Введите логин и пароль для входа в систему"; display: block; margin-top: 1.2rem; font-size: 1.4rem; color: var(--cybmd-text-muted); text-align: center; } /* ---------- Field rows ---------- .giz-wm-page-login__body__form is a CSS grid whose direct children are, in order: username field, password field, submit button. We style by position so this doesn't depend on which component (native input vs. Syncfusion) renders each row. */ .giz-wm-page-login__body__form { position: relative; } .giz-wm-page-login__body__form > *:nth-child(1), .giz-wm-page-login__body__form > *:nth-child(2) { position: relative; } .giz-wm-page-login__body__form > *:nth-child(1) *:not(svg):not(path), .giz-wm-page-login__body__form > *:nth-child(2) *:not(svg):not(path) { background: transparent !important; color: var(--cybmd-text) !important; border-color: transparent !important; } .giz-wm-page-login__body__form > *:nth-child(1), .giz-wm-page-login__body__form > *:nth-child(2) { background: var(--cybmd-bg) !important; border: 1px solid var(--cybmd-border) !important; border-radius: 0.8rem !important; padding-left: 3.6rem !important; } .giz-wm-page-login__body__form > *:nth-child(1):focus-within, .giz-wm-page-login__body__form > *:nth-child(2):focus-within { border-color: var(--cybmd-accent) !important; box-shadow: 0 0 0 3px rgba(226, 31, 43, 0.18) !important; } .giz-wm-page-login__body__form ::placeholder, .giz-wm-page-login__body__form .e-float-text, .giz-wm-page-login__body__form label { color: var(--cybmd-text-muted) !important; opacity: 1 !important; } /* Person / lock icons, drawn inline as SVG masks so they render as flat monochrome glyphs regardless of platform icon fonts */ .giz-wm-page-login__body__form > *:nth-child(1)::before, .giz-wm-page-login__body__form > *:nth-child(2)::before { content: ""; position: absolute; left: 1.2rem; top: 50%; transform: translateY(-50%); width: 1.8rem; height: 1.8rem; background-color: var(--cybmd-text-muted); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; pointer-events: none; z-index: 1; } .giz-wm-page-login__body__form > *:nth-child(1)::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E"); } .giz-wm-page-login__body__form > *:nth-child(2)::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); } /* password visibility toggle icon sits on the right, don't cover it */ .giz-wm-page-login__body__form > *:nth-child(2) svg, .giz-wm-page-login__body__form > *:nth-child(2) .e-icons { color: var(--cybmd-text-muted) !important; } /* ---------- Primary action button ---------- Scoped to the whole card (.giz-wm-page-login), not just .giz-wm-page-login__body__form — the button turned out to live in a sibling container (likely .giz-wm-page-login__actions), so a descendant-of-body__form selector never matched it. Targeting any