/*-------------------------------------------------------------------- [Colors] - Text, dividers - Brandng - Backgrounds - Status - Rights - Flags - Pallette ---------------------------------------------------------------------*/ /*-------------------------------------------------------------------- [Text, dividers] */ /*-------------------------------------------------------------------- [Branding] */ /*-------------------------------------------------------------------- [Backgrounds] */ /*-------------------------------------------------------------------- [Status] */ /*-------------------------------------------------------------------- [Rights] */ /*-------------------------------------------------------------------- [Flags] */ /*-------------------------------------------------------------------- [Pallette] */ :root, .theme-light { --bg-app: #fff; --font-on-dark: #fff; --font-on-light: #000; } .theme-dark { --bg-app: #121212; --font-on-dark: #000; --font-on-light: #fff; } @media (max-width: 500px) { .theme-dark { --bg-app: #000; --font-on-light: #d4d4d4; --font-on-dark: #000; } } /*-------------------------------------------------------------------- [_ThemeVars] Semantic CSS custom properties for runtime theming. Usage: color: var(--text-primary); background: var(--bg-surface); border: 1px solid var(--border-color); Theme switching: — forced dark — forced light (no class) + prefers-color-scheme — auto LESS vars (@color_blue, @border_color, …) kept for legacy. Rule: new code uses var(--...), legacy reads @less-var. Dark = neutral grey, NOT blue tint. ---------------------------------------------------------------------*/ :root { /* ─── Surface layers (backgrounds) ─────────────────────────────── */ --bg-app: #ffffff; /* page background */ --bg-surface: #ffffff; /* cards, panels */ --bg-surface-elevated: #fafafa; /* hover / elevated panels */ --bg-muted: #f5f5f5; /* subtle backgrounds, disabled */ --bg-inset: #eeeeee; /* inset inputs, wells */ --bg-overlay: rgba(0, 0, 0, 0.5); /* ─── Text ─────────────────────────────────────────────────────── */ --text-primary: #1a1a1a; --text-secondary: #5a5a5a; --text-muted: #8a8a8a; --text-on-accent: #ffffff; --text-link: #00a2e8; /* ─── Borders / dividers ──────────────────────────────────────── */ --border-color: #e0e0e0; --border-color-strong: #c8c8c8; --border-color-subtle: #eeeeee; /* ─── Brand accent ────────────────────────────────────────────── */ --color-primary: #00a2e8; --color-primary-hover: #1ab3f2; --color-primary-active: #0082b8; --color-primary-subtle: #dcf2ff; --color-primary-disabled: #88a2cc; /* ─── Status ──────────────────────────────────────────────────── */ --color-success: #1dc81d; --color-success-subtle: #e1f5e1; --color-warning: #ffea01; --color-warning-subtle: #fff9cc; --color-danger: #d90036; --color-danger-subtle: #fde1e8; --color-info: #6299ba; /* ─── Accent (legacy) ─────────────────────────────────────────── */ --color-gold: #fffba9; --color-yellow: #ffea01; /* ─── Skeleton placeholders ───────────────────────────────────── */ --skeleton-bg: #e8e8e8; --skeleton-shimmer: #f5f5f5; --skeleton-header: #e0e0e0; /* ─── Shadows / elevation ─────────────────────────────────────── */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); /* ─── Menu (left sidebar) ─────────────────────────────────────── */ --menu-bg: #ffffff; --menu-item-bg: #ffffff; --menu-item-big-bg: #f8fbff; --menu-item-hover: #dcf2ff; --menu-item-active: #dcf2ff; --menu-item-border: #dde6f3; --menu-footer-bg: #e5eaf3; --menu-footer-text: #8e8e8e; --menu-divider: #dde6f3; /* ─── Footer (page bottom) ────────────────────────────────────── */ --footer-bg: #f5f5f5; --footer-text: #5a5a5a; --footer-border: #e0e0e0; /* ─── Modal content box (original design = light blue) ───────── */ --modal-content-bg: #dcf2ff; /* ─── Form inputs (.form-control, Bootstrap defaults) ────────── */ --input-bg: #ffffff; --input-color: #495057; --input-border: #ced4da; --input-border-focus: #80bdff; --input-focus-shadow: rgba(0, 123, 255, 0.25); --input-placeholder: #6c757d; --input-disabled-bg: #e9ecef; /* ─── Wizard / registration inputs (.wp-control) ─────────────── */ --wp-input-bg: #dcf2ff; --wp-input-bg-gradient-end: #bad8ea; --wp-input-border: #88a2cc; /* ─── Focus rings (Bootstrap-style 0.2rem shadow) ─────────────── */ --focus-shadow-primary: rgba(0, 123, 255, 0.25); --focus-shadow-success: rgba(40, 167, 69, 0.25); --focus-shadow-danger: rgba(220, 53, 69, 0.25); --focus-shadow-accent: rgba(0, 162, 232, 0.25); /* ─── Alert text colors (dark text on subtle bg, BS4 tones) ──── */ --alert-text-primary: #004085; --alert-text-success: #155724; --alert-text-danger: #721c24; --alert-text-warning: #856404; --alert-text-info: #0c5460; } /*-------------------------------------------------------------------- [Dark theme — neutral grey, NO blue tint] ---------------------------------------------------------------------*/ /*-------------------------------------------------------------------- [Anonymous avatar SVGs — theme recolor] Applied to both and CSS background-image. Light theme: SVG shown as-is. Dark theme: invert + hue-rotate to flip whites/pastels to dark equivalents while preserving the silhouette. ---------------------------------------------------------------------*/ img[src$="0_vector.svg"], img[src$="1_vector.svg"] { object-fit: contain; } html.theme-dark img[src$="0_vector.svg"], .theme-dark img[src$="0_vector.svg"], html.theme-dark img[src$="1_vector.svg"], .theme-dark img[src$="1_vector.svg"], html.theme-dark .box.man, .theme-dark .box.man, html.theme-dark .box.woman, .theme-dark .box.woman, html.theme-dark .anon-avatar-bg, .theme-dark .anon-avatar-bg { filter: invert(0.86) hue-rotate(180deg); } @media (prefers-color-scheme: dark) { html:not(.theme-light):not(.theme-dark) img[src$="0_vector.svg"], html:not(.theme-light):not(.theme-dark) img[src$="1_vector.svg"], html:not(.theme-light):not(.theme-dark) .box.man, html:not(.theme-light):not(.theme-dark) .box.woman, html:not(.theme-light):not(.theme-dark) .anon-avatar-bg { filter: invert(0.86) hue-rotate(180deg); } } /* Explicit dark — user chose dark or html has class */ html.theme-dark, body.theme-dark, .theme-dark { --bg-app: #121212; --bg-surface: #1a1a1a; --bg-surface-elevated: #1f1f1f; --bg-muted: #181818; --bg-inset: #141414; --bg-overlay: rgba(0, 0, 0, 0.7); --text-primary: #e8e8e8; --text-secondary: #b0b0b0; --text-muted: #808080; --text-on-accent: #ffffff; --text-link: #4dc5f5; --border-color: #2e2e2e; --border-color-strong: #3a3a3a; --border-color-subtle: #242424; --color-primary: #1ab3f2; --color-primary-hover: #4dc5f5; --color-primary-active: #0099d6; --color-primary-subtle: #0f2a3a; --color-primary-disabled: #445569; --color-success-subtle: #14321a; --color-warning-subtle: #3a3100; --color-danger-subtle: #3a0e1a; --skeleton-bg: #2a2a2a; --skeleton-shimmer: #3a3a3a; --skeleton-header: #2a2a2a; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.5); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6); --menu-bg: #1a1a1a; --menu-item-bg: #1a1a1a; --menu-item-hover: #252525; --menu-item-active: #2a2a2a; --menu-item-border: #2e2e2e; --menu-footer-bg: #141414; --menu-footer-text: #808080; --menu-divider: #2e2e2e; --footer-bg: #181818; --footer-text: #b0b0b0; --footer-border: #2e2e2e; --modal-content-bg: #1f1f1f; --input-bg: #1f1f1f; --input-color: #e8e8e8; --input-border: #3a3a3a; --input-border-focus: #4da3ff; --input-focus-shadow: rgba(77, 163, 255, 0.25); --input-placeholder: #808080; --input-disabled-bg: #2a2a2a; --wp-input-bg: #1f1f1f; --wp-input-bg-gradient-end: #1a1a1a; --wp-input-border: #3a3a3a; --focus-shadow-primary: rgba(77, 163, 255, 0.35); --focus-shadow-success: rgba(29, 200, 29, 0.3); --focus-shadow-danger: rgba(255, 100, 120, 0.3); --focus-shadow-accent: rgba(77, 197, 245, 0.3); --alert-text-primary: #a5c8ff; --alert-text-success: #78dc78; --alert-text-danger: #ff8fa3; --alert-text-warning: #ffd96a; --alert-text-info: #6fc5d9; } /* Auto dark via OS — only when NO explicit theme class present */ @media (prefers-color-scheme: dark) { html:not(.theme-light):not(.theme-dark) { --bg-app: #121212; --bg-surface: #1a1a1a; --bg-surface-elevated: #1f1f1f; --bg-muted: #181818; --bg-inset: #141414; --bg-overlay: rgba(0, 0, 0, 0.7); --text-primary: #e8e8e8; --text-secondary: #b0b0b0; --text-muted: #808080; --text-on-accent: #ffffff; --text-link: #4dc5f5; --border-color: #2e2e2e; --border-color-strong: #3a3a3a; --border-color-subtle: #242424; --color-primary: #1ab3f2; --color-primary-hover: #4dc5f5; --color-primary-active: #0099d6; --color-primary-subtle: #0f2a3a; --color-primary-disabled: #445569; --color-success-subtle: #14321a; --color-warning-subtle: #3a3100; --color-danger-subtle: #3a0e1a; --skeleton-bg: #2a2a2a; --skeleton-shimmer: #3a3a3a; --skeleton-header: #2a2a2a; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.5); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6); --menu-bg: #1a1a1a; --menu-item-bg: #1a1a1a; --menu-item-hover: #252525; --menu-item-active: #2a2a2a; --menu-item-border: #2e2e2e; --menu-footer-bg: #141414; --menu-footer-text: #808080; --menu-divider: #2e2e2e; --footer-bg: #181818; --footer-text: #b0b0b0; --footer-border: #2e2e2e; --modal-content-bg: #1f1f1f; --input-bg: #1f1f1f; --input-color: #e8e8e8; --input-border: #3a3a3a; --input-border-focus: #4da3ff; --input-focus-shadow: rgba(77, 163, 255, 0.25); --input-placeholder: #808080; --input-disabled-bg: #2a2a2a; --wp-input-bg: #1f1f1f; --wp-input-bg-gradient-end: #1a1a1a; --wp-input-border: #3a3a3a; --focus-shadow-primary: rgba(77, 163, 255, 0.35); --focus-shadow-success: rgba(29, 200, 29, 0.3); --focus-shadow-danger: rgba(255, 100, 120, 0.3); --focus-shadow-accent: rgba(77, 197, 245, 0.3); --alert-text-primary: #a5c8ff; --alert-text-success: #78dc78; --alert-text-danger: #ff8fa3; --alert-text-warning: #ffd96a; --alert-text-info: #6fc5d9; } } .left-menu { background: url(/images/generals/left_back_top.jpg) top center no-repeat var(--menu-bg); min-width: 310px; } .new-message-count-notification, .new-photo-request-count-notification, .new-message-count-notification-vip { font-size: 100%; } .badge { font-size: 100%; } .relative-r-5 { position: relative; right: 5px; } .left-menu, .main-menu-items { display: flex; flex-direction: column; /*border: 1px solid @border_color; border-top: 0; border-bottom: 0;*/ } .left-menu > *, .main-menu-items > * { border-left: 1px solid var(--menu-divider); border-right: 1px solid var(--menu-divider); } .left-menu > .homepage-text, .main-menu-items > .homepage-text { display: none; border-left: 0; border-right: 0; padding: 30px; padding-top: 40px; color: var(--text-muted); } .left-menu > .logo, .main-menu-items > .logo { max-width: 100%; min-height: 86px; padding: 22px 25px; display: flex; align-items: center; flex-direction: column; font-size: 12.5px; } .left-menu > .logo:hover, .main-menu-items > .logo:hover { text-decoration: none; color: var(--text-primary); } .left-menu > .logo > .full-logo-img > img, .main-menu-items > .logo > .full-logo-img > img { max-width: 255px; } .left-menu > .logo > .full-logo-img > div, .main-menu-items > .logo > .full-logo-img > div { line-height: 23px; } .left-menu > .logo > .full-logo-img h1, .main-menu-items > .logo > .full-logo-img h1 { font-size: 12.5px; margin: 0; line-height: inherit; display: inline; font-weight: 400; } .left-menu > .menu > .menu-item, .main-menu-items > .menu > .menu-item { height: 55px; border-bottom: 1px solid var(--menu-divider); display: flex; align-items: center; text-decoration: none; color: var(--text-primary); background-color: var(--menu-item-bg); } .left-menu > .menu > .menu-item:first-child, .main-menu-items > .menu > .menu-item:first-child { border-top: 1px solid var(--menu-divider); } .left-menu > .menu > .menu-item:hover, .main-menu-items > .menu > .menu-item:hover { background-color: var(--menu-item-hover); } .left-menu > .menu > .menu-item.gold, .main-menu-items > .menu > .menu-item.gold { background-color: #fffba9; } .left-menu > .menu > .menu-item.gold:hover, .main-menu-items > .menu > .menu-item.gold:hover { background-color: #ffea01; } .left-menu > .menu > .menu-item.active, .main-menu-items > .menu > .menu-item.active { background-color: var(--menu-item-active); } .left-menu > .menu > .menu-item .badge-danger, .main-menu-items > .menu > .menu-item .badge-danger { margin-right: 25px; font-weight: 500; border-radius: 2px; } .left-menu > .menu > .menu-item .text, .main-menu-items > .menu > .menu-item .text { font-size: 0.875rem; margin-left: 30px; flex: 1 1 auto; } .left-menu > .menu > .menu-item .text .fc-blue, .main-menu-items > .menu > .menu-item .text .fc-blue { font-weight: 600; font-size: 18px; } .left-menu > .menu > .menu-item.multiline, .main-menu-items > .menu > .menu-item.multiline { display: grid; height: auto; } .left-menu > .menu > .menu-item.multiline > div:first-child, .main-menu-items > .menu > .menu-item.multiline > div:first-child { display: flex; align-items: center; width: 100%; height: 55px; } .left-menu > .menu > .menu-item.multiline > .text-after, .main-menu-items > .menu > .menu-item.multiline > .text-after { color: var(--text-muted); font-size: 0.75rem; padding: 0 10px 10px 34px; } .left-menu > .menu > .menu-item .red-icon, .main-menu-items > .menu > .menu-item .red-icon { color: var(--color-danger); } .left-menu > .menu > .menu-item .icon, .main-menu-items > .menu > .menu-item .icon { align-self: flex-end; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 100%; } .left-menu > .menu > .menu-item .icon + .text, .main-menu-items > .menu > .menu-item .icon + .text { margin-left: 0; } .left-menu > .menu > .menu-item .icon.diskretnost > img, .main-menu-items > .menu > .menu-item .icon.diskretnost > img { max-width: 32px!important; } .left-menu > .menu > .menu-item .icon.tv > img, .main-menu-items > .menu > .menu-item .icon.tv > img { max-width: 22px!important; } .left-menu > .menu > .menu-item .icon.flag > img, .main-menu-items > .menu > .menu-item .icon.flag > img { max-width: 21px!important; } .left-menu > .menu > .menu-item .icon.vozik > img, .main-menu-items > .menu > .menu-item .icon.vozik > img { max-width: 26px!important; } .left-menu > .menu > .menu-item .icon.feather > img, .main-menu-items > .menu > .menu-item .icon.feather > img, .left-menu > .menu > .menu-item .icon.vip-star-messages > img, .main-menu-items > .menu > .menu-item .icon.vip-star-messages > img { max-width: 15px!important; } .left-menu > .menu > .menu-item .icon.lupa > img, .main-menu-items > .menu > .menu-item .icon.lupa > img { max-width: 18px!important; } .left-menu > .menu > .menu-item.big, .main-menu-items > .menu > .menu-item.big { height: 78px; background-color: var(--menu-item-big-bg); } .left-menu > .menu > .menu-item.big > .text, .main-menu-items > .menu > .menu-item.big > .text { display: flex; flex-direction: column; margin-left: 66px; } .left-menu > .menu > .menu-item.big > .text > .fc-blue:first-of-type, .main-menu-items > .menu > .menu-item.big > .text > .fc-blue:first-of-type { text-transform: uppercase; } .left-menu > .menu > .menu-item.big > .icon, .main-menu-items > .menu > .menu-item.big > .icon { width: 66px; } .left-menu > .menu > .menu-item.big > .icon + .text, .main-menu-items > .menu > .menu-item.big > .icon + .text { margin-left: 0; } .left-menu > .menu > .menu-item.big > .icon > img, .main-menu-items > .menu > .menu-item.big > .icon > img { max-width: 36px; } .left-menu .img-separator, .main-menu-items .img-separator { display: flex; align-items: center; justify-content: center; background-color: var(--menu-bg); } .left-menu .img-separator.active, .main-menu-items .img-separator.active { background-color: var(--menu-item-active); } .left-menu .img-separator .fc-blue, .main-menu-items .img-separator .fc-blue { text-decoration: underline; } .left-menu .img-separator.first, .main-menu-items .img-separator.first { min-height: 200px; } .left-menu .img-separator.second, .main-menu-items .img-separator.second { min-height: 413px; } .left-menu .img-separator.second:hover, .main-menu-items .img-separator.second:hover { text-decoration: none; background-color: var(--menu-item-hover); } .left-menu .img-separator > img, .main-menu-items .img-separator > img { padding: 20px 0; } .left-menu .img-separator > .flex, .main-menu-items .img-separator > .flex { margin: 115px 0; align-items: center; } .left-menu .img-separator > .flex > img, .main-menu-items .img-separator > .flex > img { padding: 10px 0; } .left-menu .img-separator > .flex a, .main-menu-items .img-separator > .flex a { color: var(--color-primary); text-decoration: underline; } .left-menu .img-separator > .flex a:hover, .main-menu-items .img-separator > .flex a:hover { text-decoration: none; } .left-menu > .footer, .main-menu-items > .footer { background-color: var(--menu-footer-bg); min-height: 55px; display: flex; align-items: center; justify-content: center; color: var(--menu-footer-text); } .left-menu > .footer > .separator, .main-menu-items > .footer > .separator { margin: 0 5px; font-size: 12px; } .left-menu > .footer a, .main-menu-items > .footer a { font-size: 13px; color: var(--menu-footer-text); text-decoration: underline; } .left-menu > .footer a:hover, .main-menu-items > .footer a:hover { text-decoration: none; } .left-menu > .menu > .menu-item.theme-toggle-btn .theme-toggle-icon, .main-menu-items > .menu > .menu-item.theme-toggle-btn .theme-toggle-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; font-size: 16px; } .left-menu > .menu > .menu-item.theme-toggle-btn .icon-dark, .main-menu-items > .menu > .menu-item.theme-toggle-btn .icon-dark { display: none; } .left-menu > .menu > .menu-item.theme-toggle-btn .icon-light, .main-menu-items > .menu > .menu-item.theme-toggle-btn .icon-light { display: inline; } .theme-dark .left-menu > .menu > .menu-item.gold { background-color: #3a3000; color: #ffe066; } .theme-dark .left-menu > .menu > .menu-item.gold:hover { background-color: #4a3d00; } .theme-dark .left-menu > .menu > .menu-item .badge-danger { background-color: #8b2020; } .theme-dark .left-menu { background-image: none; } .theme-dark .left-menu > .menu > .menu-item.theme-toggle-btn .icon-light { display: none; } .theme-dark .left-menu > .menu > .menu-item.theme-toggle-btn .icon-dark { display: inline; } /*# sourceMappingURL=page.css.map */