jahlib
1284 lines
34 KiB
CSS
1284 lines
34 KiB
CSS
/* ===== ПОЛНЫЙ НОЧНОЙ РЕЖИМ ===== */
|
||
|
||
/* CSS переменные для ночных тем - дефолтная синяя */
|
||
body.night-mode:not([data-background]),
|
||
body.night-mode[data-background="default"] {
|
||
--theme-primary: #3b5998;
|
||
--theme-primary-hover: #5b79b8;
|
||
--theme-primary-dark: #2a3d52;
|
||
--theme-secondary: #2d4159;
|
||
--theme-secondary-dark: #b1b6bb;
|
||
--theme-accent: #5273b8;
|
||
--theme-accent-dark: #3b5998;
|
||
--theme-bg-light: #2a3d52;
|
||
--theme-bg-medium: #1e2d3f;
|
||
--theme-bg-dark: #1a2332;
|
||
--theme-border: #35466b;
|
||
--theme-success: #435273;
|
||
--theme-success-bg: #2d4159;
|
||
--theme-toggle-off: #2e3f53;
|
||
--theme-toggle-on: #5273b8;
|
||
--theme-modal-overlay: rgba(26, 35, 50, 0.95);
|
||
}
|
||
|
||
/* Коричневая ночная тема */
|
||
body.night-mode[data-background="green"] {
|
||
--theme-primary: #b8956d;
|
||
--theme-primary-hover: #d8b58d;
|
||
--theme-primary-dark: #4a3d32;
|
||
--theme-secondary: #5c4c3e;
|
||
--theme-secondary-dark: #4a3d32;
|
||
--theme-accent: #8a7360;
|
||
--theme-accent-dark: #6d5a47;
|
||
--theme-bg-light: #4a3d32;
|
||
--theme-bg-medium: #3a2d22;
|
||
--theme-bg-dark: #2c2626;
|
||
--theme-border: #6d5a47;
|
||
--theme-success: #8a7360;
|
||
--theme-success-bg: #5c4c3e;
|
||
--theme-toggle-off: #3a2d22;
|
||
--theme-toggle-on: #b8956d;
|
||
--theme-modal-overlay: rgba(44, 38, 38, 0.95);
|
||
}
|
||
|
||
/* Зелёная ночная тема */
|
||
body.night-mode[data-background="blue"] {
|
||
--theme-primary: #3d8a5f;
|
||
--theme-primary-hover: #5daa7f;
|
||
--theme-primary-dark: #11281c;
|
||
--theme-secondary: #163423;
|
||
--theme-secondary-dark: #11281c;
|
||
--theme-accent: #2d6342;
|
||
--theme-accent-dark: #1f4a2f;
|
||
--theme-bg-light: #163423;
|
||
--theme-bg-medium: #11281c;
|
||
--theme-bg-dark: #0e150df2;
|
||
--theme-border: #1f4a2f;
|
||
--theme-success: #2d6342;
|
||
--theme-success-bg: #163423;
|
||
--theme-toggle-off: #1a3326;
|
||
--theme-toggle-on: #3f6f3a;
|
||
--theme-modal-overlay: rgb(2 3 2 / 95%);
|
||
}
|
||
|
||
/* Фиолетовая ночная тема */
|
||
body.night-mode[data-background="purple"] {
|
||
--theme-primary: #8d5faa;
|
||
--theme-primary-hover: #ad7fca;
|
||
--theme-primary-dark: #1c1522;
|
||
--theme-secondary: #231b2a;
|
||
--theme-secondary-dark: #1c1522;
|
||
--theme-accent: #4d3a5a;
|
||
--theme-accent-dark: #352840;
|
||
--theme-bg-light: #231b2a;
|
||
--theme-bg-medium: #1c1522;
|
||
--theme-bg-dark: #12091e;
|
||
--theme-border: #352840;
|
||
--theme-success: #4d3a5a;
|
||
--theme-success-bg: #231b2a;
|
||
--theme-toggle-off: #1c1522;
|
||
--theme-toggle-on: #8d5faa;
|
||
--theme-modal-overlay: rgba(18, 9, 30, 0.95);
|
||
}
|
||
|
||
/* Красная ночная тема */
|
||
body.night-mode[data-background="orange"] {
|
||
--theme-primary: #c74a3d;
|
||
--theme-primary-hover: #e76a5d;
|
||
--theme-primary-dark: #230907;
|
||
--theme-secondary: #2e0b09;
|
||
--theme-secondary-dark: #230907;
|
||
--theme-accent: #5a1812;
|
||
--theme-accent-dark: #3d0f0c;
|
||
--theme-bg-light: #2e0b09;
|
||
--theme-bg-medium: #412a29;
|
||
--theme-bg-dark: #1a0404;
|
||
--theme-border: #3d0f0c;
|
||
--theme-success: #5a1812;
|
||
--theme-success-bg: #2e0b09;
|
||
--theme-toggle-off: #491814;
|
||
--theme-toggle-on: #87362e;
|
||
--theme-modal-overlay: rgba(26, 4, 4, 0.95);
|
||
}
|
||
|
||
/* Базовые стили */
|
||
body.night-mode {
|
||
background: var(--theme-bg-dark);
|
||
color: #ffffff;
|
||
}
|
||
|
||
/* Night mode toggle button */
|
||
body.night-mode .night-mode-btn {
|
||
background: var(--theme-primary-dark);
|
||
border-color: var(--theme-primary);
|
||
}
|
||
|
||
body.night-mode .night-mode-btn:hover {
|
||
background: var(--theme-primary);
|
||
box-shadow: 0 4px 12px rgba(94, 204, 123, 0.3);
|
||
}
|
||
|
||
/* Контейнеры */
|
||
body.night-mode .container {
|
||
background: var(--theme-bg-light);
|
||
color: #ffffff;
|
||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
|
||
}
|
||
|
||
/* Заголовки */
|
||
body.night-mode h1 {
|
||
color: #ffffff!important;
|
||
}
|
||
|
||
body.night-mode h2 {
|
||
color: #e0e0e0!important;
|
||
}
|
||
|
||
body.night-mode h3 {
|
||
color: #d0d0d0!important;
|
||
}
|
||
|
||
body.night-mode h4,
|
||
body.night-mode h5,
|
||
body.night-mode h6 {
|
||
color: #ffffff!important;
|
||
}
|
||
|
||
/* Инпуты */
|
||
body.night-mode input[type="text"],
|
||
body.night-mode input[type="number"],
|
||
body.night-mode textarea {
|
||
background: var(--theme-bg-light);
|
||
color: #ffffff;
|
||
border-color: var(--theme-border);
|
||
}
|
||
|
||
body.night-mode input[type="text"]:focus,
|
||
body.night-mode input[type="number"]:focus,
|
||
body.night-mode textarea:focus {
|
||
border-color: #5ecc7b;
|
||
}
|
||
|
||
body.night-mode input[type="text"]::placeholder,
|
||
body.night-mode input[type="number"]::placeholder,
|
||
body.night-mode textarea::placeholder {
|
||
color: var(--theme-secondary-dark);
|
||
}
|
||
|
||
/* Кнопки */
|
||
body.night-mode .btn {
|
||
color: #ffffff!important;
|
||
}
|
||
|
||
body.night-mode .btn-primary {
|
||
background: var(--theme-primary);
|
||
color: #ffffff!important;
|
||
}
|
||
|
||
body.night-mode .btn-primary:hover {
|
||
background: var(--theme-primary-hover);
|
||
box-shadow: 0 5px 15px rgba(59, 89, 152, 0.4);
|
||
}
|
||
|
||
body.night-mode .btn-secondary {
|
||
background: var(--theme-primary-dark);
|
||
color: #ffffff;
|
||
}
|
||
|
||
body.night-mode .btn-secondary:hover {
|
||
background: var(--theme-primary);
|
||
}
|
||
|
||
body.night-mode .btn:disabled {
|
||
opacity: 0.5;
|
||
}
|
||
|
||
body.night-mode .btn-primary:disabled:hover {
|
||
background: var(--theme-primary) !important;
|
||
}
|
||
|
||
body.night-mode .btn-secondary:disabled:hover {
|
||
background: var(--theme-primary-dark) !important;
|
||
}
|
||
|
||
/* Invite Link Block */
|
||
body.night-mode #invite-link-block {
|
||
background: rgba(59, 89, 152, 0.2);
|
||
border-color: var(--theme-border);
|
||
}
|
||
|
||
body.night-mode .invite-hint {
|
||
color: var(--theme-secondary-dark);
|
||
}
|
||
|
||
body.night-mode .invite-link {
|
||
background: var(--theme-bg-light);
|
||
color: var(--theme-accent);
|
||
border-color: var(--theme-border);
|
||
}
|
||
|
||
body.night-mode .btn-copy,
|
||
body.night-mode .btn-share {
|
||
background: var(--theme-primary-dark);
|
||
border-color: var(--theme-primary);
|
||
}
|
||
|
||
body.night-mode .btn-copy:hover,
|
||
body.night-mode .btn-share:hover {
|
||
background: var(--theme-primary);
|
||
}
|
||
|
||
/* Bot Game Section */
|
||
body.night-mode #bot-game-section {
|
||
border-top-color: rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
body.night-mode #bot-game-section h3 {
|
||
color: #ffffff;
|
||
}
|
||
|
||
body.night-mode .btn-bot {
|
||
background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-dark) 100%);
|
||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
|
||
}
|
||
|
||
body.night-mode .btn-bot:hover {
|
||
box-shadow: 0 6px 20px rgba(59, 89, 152, 0.5);
|
||
}
|
||
|
||
/* Rooms List */
|
||
body.night-mode .room-card {
|
||
background: var(--theme-bg-light);
|
||
border-color: var(--theme-border);
|
||
color: #ffffff;
|
||
}
|
||
|
||
body.night-mode .room-card:hover {
|
||
border-color: #5ecc7b;
|
||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
|
||
}
|
||
|
||
body.night-mode .room-card h4 {
|
||
color: #5ecc7b;
|
||
}
|
||
|
||
body.night-mode .room-card p {
|
||
color: #d0d0d0;
|
||
}
|
||
|
||
body.night-mode .room-card.room-full {
|
||
background: var(--theme-bg-medium);
|
||
border-color: var(--theme-border);
|
||
opacity: 0.6;
|
||
}
|
||
|
||
body.night-mode .room-card.room-full h4 {
|
||
color: #9ca3af;
|
||
}
|
||
|
||
/* Players List */
|
||
body.night-mode #players-list {
|
||
color: #ffffff;
|
||
}
|
||
|
||
body.night-mode .player-card {
|
||
background: var(--theme-bg-light);
|
||
border-color: var(--theme-border);
|
||
color: #ffffff;
|
||
}
|
||
|
||
body.night-mode .player-card.ready {
|
||
border-color: var(--theme-success);
|
||
background: var(--theme-success-bg);
|
||
}
|
||
|
||
body.night-mode .player-card.current {
|
||
border-color: var(--theme-success);
|
||
background: var(--theme-success-bg);
|
||
box-shadow: 0 0 20px rgba(94, 204, 123, 0.3);
|
||
}
|
||
|
||
body.night-mode .player-card h4 {
|
||
color: #ffffff;
|
||
}
|
||
|
||
body.night-mode .player-card .status {
|
||
color: #9ca3af;
|
||
}
|
||
|
||
body.night-mode .player-card.ready .status {
|
||
color: #5ecc7b;
|
||
}
|
||
|
||
body.night-mode .player-card .score {
|
||
color: #ffffff;
|
||
}
|
||
|
||
/* Hints */
|
||
body.night-mode .hint {
|
||
color: #9ca3af;
|
||
}
|
||
|
||
body.night-mode .hint-small {
|
||
color: #6b7280;
|
||
}
|
||
|
||
/* Room Settings */
|
||
body.night-mode #room-settings,
|
||
body.night-mode .room-settings {
|
||
background: rgba(59, 89, 152, 0.2);
|
||
color: #ffffff;
|
||
}
|
||
|
||
body.night-mode #room-settings h3 {
|
||
color: #ffffff;
|
||
}
|
||
|
||
body.night-mode .deck-label {
|
||
color: #9ca3af;
|
||
}
|
||
|
||
body.night-mode .toggle-slider {
|
||
background-color: var(--theme-toggle-off);
|
||
}
|
||
|
||
body.night-mode input:checked + .toggle-slider {
|
||
background-color: var(--theme-toggle-on);
|
||
}
|
||
|
||
body.night-mode .deck-size-toggle input[type="checkbox"]:checked ~ .deck-label:last-child {
|
||
color: var(--theme-toggle-on);
|
||
}
|
||
|
||
body.night-mode .deck-size-toggle input[type="checkbox"]:not(:checked) ~ .deck-label:first-child {
|
||
color: var(--theme-toggle-on);
|
||
}
|
||
|
||
/* Countdown Timer */
|
||
body.night-mode .countdown-timer {
|
||
background: linear-gradient(135deg, var(--theme-success), var(--theme-success-bg));
|
||
border-color: var(--theme-success);
|
||
}
|
||
|
||
body.night-mode #countdown-number {
|
||
color: #ffffff;
|
||
}
|
||
|
||
body.night-mode #countdown-text {
|
||
color: var(--theme-success);
|
||
}
|
||
|
||
/* Модальные окна */
|
||
body.night-mode .modal {
|
||
background-color: var(--theme-modal-overlay);
|
||
}
|
||
|
||
body.night-mode .modal-content,
|
||
body.night-mode .settings-modal-content,
|
||
body.night-mode .alert-modal .modal-content,
|
||
body.night-mode .rules-modal .modal-content {
|
||
background: var(--theme-bg-dark);
|
||
color: #ffffff;
|
||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
|
||
}
|
||
|
||
body.night-mode #settings-modal .modal-content {
|
||
background: var(--theme-bg-dark);
|
||
}
|
||
|
||
body.night-mode .close-modal-btn {
|
||
background: var(--theme-primary);
|
||
color: #ffffff;
|
||
}
|
||
|
||
body.night-mode .close-modal-btn:hover {
|
||
background: var(--theme-primary-hover);
|
||
}
|
||
|
||
/* Settings */
|
||
body.night-mode .settings-content {
|
||
color: #ffffff;
|
||
}
|
||
|
||
body.night-mode .setting-item {
|
||
color: #ffffff;
|
||
}
|
||
|
||
body.night-mode .setting-label {
|
||
color: #ffffff;
|
||
}
|
||
|
||
/* Правила */
|
||
body.night-mode .rules-content {
|
||
background: var(--theme-bg-light);
|
||
color: #ffffff;
|
||
}
|
||
|
||
body.night-mode .rules-content strong {
|
||
color: #ababab;
|
||
font-weight: 600;
|
||
}
|
||
|
||
body.night-mode .rules-content th {
|
||
color: #b9b9b9;
|
||
}
|
||
|
||
body.night-mode #rules-section {
|
||
border-top: 2px solid rgb(187 187 187 / 20%);
|
||
}
|
||
|
||
body.night-mode .rules-content h2 {
|
||
border-bottom: 2px solid rgb(169 169 169 / 36%);
|
||
}
|
||
|
||
body.night-mode .rules-content hr {
|
||
border-bottom: 2px solid rgb(169 169 169 / 36%);
|
||
}
|
||
|
||
body.night-mode .rules-content h3 {
|
||
color: #5ecc7b;
|
||
}
|
||
|
||
body.night-mode .rules-content p,
|
||
body.night-mode .rules-content li {
|
||
color: #ffffff;
|
||
}
|
||
|
||
body.night-mode .rules-content table {
|
||
background: rgb(255 255 255 / 27%);
|
||
}
|
||
|
||
body.night-mode .rules-content th {
|
||
background: rgb(56 56 56 / 74%);
|
||
}
|
||
|
||
body.night-mode .rules-content td {
|
||
background: rgb(255 255 255 / 27%);
|
||
}
|
||
|
||
/* Алерты */
|
||
body.night-mode .alert-text {
|
||
background: rgb(255 255 255 / 27%);
|
||
}
|
||
|
||
/* Алерты */
|
||
body.night-mode .alert-text {
|
||
color: #ffffff;
|
||
}
|
||
|
||
/* Игровой стол - фон задаётся через data-background */
|
||
|
||
body.night-mode .game-circle {
|
||
background: radial-gradient(circle, #1e2d3f 0%, #141d2b 100%);
|
||
border-color: #3b5998;
|
||
}
|
||
|
||
/* Карты */
|
||
body.night-mode .card {
|
||
background: #9ca3af;
|
||
color: white;
|
||
border-color: #374151;
|
||
filter: brightness(0.9);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
/* Белые масти - только когда включена настройка */
|
||
body.night-mode.white-suits .card.hearts,
|
||
body.night-mode.white-suits .card.diamonds {
|
||
color: #ffffff;
|
||
}
|
||
|
||
body.night-mode.white-suits .card.hearts .card-rank,
|
||
body.night-mode.white-suits .card.diamonds .card-rank {
|
||
color: #ffffff;
|
||
filter: grayscale(1) contrast(0) brightness(3);
|
||
}
|
||
|
||
body.night-mode.white-suits .card.hearts .card-suit,
|
||
body.night-mode.white-suits .card.diamonds .card-suit {
|
||
color: #ffffff;
|
||
filter: grayscale(1) contrast(0) brightness(3) drop-shadow(0px 0px 0.8px #ffffffd0);
|
||
}
|
||
|
||
body.night-mode.white-suits .card.spades,
|
||
body.night-mode.white-suits .card.clubs {
|
||
color: #000000;
|
||
}
|
||
|
||
body.night-mode.white-suits .card.spades .card-rank,
|
||
body.night-mode.white-suits .card.clubs .card-rank {
|
||
color: #000000;
|
||
filter: contrast(4) saturate(0.5);
|
||
}
|
||
|
||
body.night-mode.white-suits .card.spades .card-suit,
|
||
body.night-mode.white-suits .card.clubs .card-suit {
|
||
color: #000000;
|
||
filter: contrast(4) saturate(0.5) drop-shadow(0px 0px 0.8px #333333c9);
|
||
}
|
||
|
||
|
||
/* Красные масти */
|
||
body.night-mode .card.hearts,
|
||
body.night-mode .card.diamonds {
|
||
color: #ffffff;
|
||
}
|
||
|
||
body.night-mode .card.hearts .card-rank,
|
||
body.night-mode .card.diamonds .card-rank {
|
||
color: #ffffff;
|
||
}
|
||
|
||
body.night-mode .card.hearts .card-suit,
|
||
body.night-mode .card.diamonds .card-suit {
|
||
color: #ffffff;
|
||
filter: saturate(0.8) brightness(1.1) drop-shadow(rgba(194, 90, 90, 0.79) 0px 0px 0.8px);
|
||
}
|
||
|
||
body.night-mode .card.spades,
|
||
body.night-mode .card.clubs {
|
||
color: #000000;
|
||
}
|
||
|
||
body.night-mode .card.spades .card-rank,
|
||
body.night-mode .card.clubs .card-rank {
|
||
color: #000000;
|
||
filter: contrast(4) saturate(0.5);
|
||
}
|
||
|
||
body.night-mode .card.spades .card-suit,
|
||
body.night-mode .card.clubs .card-suit {
|
||
color: #000000;
|
||
filter: contrast(4) saturate(0.5) drop-shadow(0px 0px 0.8px #838383c9);
|
||
}
|
||
|
||
|
||
body.night-mode .card:hover:not(.disabled):not(#discard-pile .card) {
|
||
border-color: #374151;
|
||
box-shadow: 0 0 20px #060606, 0 0 10px #adadad;
|
||
}
|
||
|
||
body.night-mode .card.disabled {
|
||
opacity: 0.56;
|
||
background: #767676a6;
|
||
}
|
||
|
||
/* Рубашка карт - цвет управляется через data-card-back */
|
||
body.night-mode .opponent-card {
|
||
border-color: #1a3025 !important;
|
||
color: #ffffff;
|
||
}
|
||
|
||
/* Колода - цвет управляется через data-card-back */
|
||
body.night-mode .deck {
|
||
border-color: #1a3025 !important;
|
||
color: #ffffff;
|
||
}
|
||
|
||
/* Рубашка карты (card-back) - цвет управляется через data-card-back */
|
||
body.night-mode .card-back {
|
||
border-color: #1a3025 !important;
|
||
color: #ffffff;
|
||
}
|
||
|
||
/* Deck count */
|
||
body.night-mode .deck-count {
|
||
background: var(--theme-success-bg);
|
||
color: #5ecc7b;
|
||
border-color: var(--theme-success);
|
||
}
|
||
|
||
body.night-mode .deck-count-badge {
|
||
background: var(--theme-success);
|
||
color: #ffffff;
|
||
border-color: var(--theme-success);
|
||
}
|
||
|
||
/* Discard pile */
|
||
body.night-mode .discard-pile {
|
||
border-color: var(--theme-border);
|
||
}
|
||
|
||
/* Chosen suit */
|
||
body.night-mode #chat-input {
|
||
background: var(--theme-bg-medium);
|
||
color: #ffffff;
|
||
border-color: var(--theme-border);
|
||
}
|
||
|
||
body.night-mode .chosen-suit {
|
||
background: var(--theme-bg-light);
|
||
color: #ffffff;
|
||
border-color: var(--theme-border);
|
||
}
|
||
|
||
body.night-mode .chosen-suit-label {
|
||
color: #9ca3af;
|
||
}
|
||
|
||
/* Индикатор выбранной масти */
|
||
body.night-mode #chosen-suit-indicator {
|
||
background: rgb(140 147 157);
|
||
border-color: var(--theme-success);
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
|
||
}
|
||
|
||
body.night-mode .suit-emoji {
|
||
z-index: 1012;
|
||
font-size: 32px;
|
||
filter: contrast(4) saturate(0.5) drop-shadow(0px 0px 1.3px #727272c9);
|
||
}
|
||
|
||
/* Красные масти в индикаторе делаем белыми - только с white-suits */
|
||
body.night-mode.white-suits .suit-emoji-indicator.hearts,
|
||
body.night-mode.white-suits .suit-emoji-indicator.diamonds {
|
||
filter: grayscale(1) contrast(0) brightness(3) drop-shadow(0px 0px 0.8px #ffffffd0);
|
||
}
|
||
|
||
/* Чёрные масти в индикаторе - только с white-suits */
|
||
body.night-mode.white-suits .suit-emoji-indicator.clubs,
|
||
body.night-mode.white-suits .suit-emoji-indicator.spades {
|
||
filter: contrast(4) saturate(0.5) drop-shadow(0px 0px 1px #333333c9);
|
||
}
|
||
|
||
/* Красные масти в индикаторе */
|
||
body.night-mode .suit-emoji-indicator.hearts,
|
||
body.night-mode .suit-emoji-indicator.diamonds {
|
||
filter: saturate(0.8) brightness(1.1) drop-shadow(rgba(194, 90, 90, 0.79) 0px 0px 0.8px);
|
||
}
|
||
|
||
/* Чёрные масти в индикаторе */
|
||
body.night-mode .suit-emoji-indicator.clubs,
|
||
body.night-mode .suit-emoji-indicator.spades {
|
||
filter: contrast(4) saturate(0.5) drop-shadow(0px 0px 0.8px #838383c9);
|
||
}
|
||
|
||
/* Player info - табло игрока */
|
||
body.night-mode .player-info {
|
||
background: var(--theme-bg-light);
|
||
color: #ffffff;
|
||
border-color: var(--theme-border);
|
||
}
|
||
|
||
body.night-mode .player-info h3 {
|
||
color: #ffffff;
|
||
}
|
||
|
||
body.night-mode .player-info p {
|
||
color: #ffffff;
|
||
}
|
||
|
||
body.night-mode .player-name {
|
||
color: #ffffff;
|
||
}
|
||
|
||
body.night-mode .player-score {
|
||
color: #ffffff;
|
||
}
|
||
|
||
body.night-mode .player-info.current-turn {
|
||
background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-hover) 100%);
|
||
border-color: #5ecc7b !important;
|
||
}
|
||
|
||
body.night-mode .player-info.current-turn .player-name,
|
||
body.night-mode .player-info.current-turn .player-score {
|
||
color: #ffffff;
|
||
}
|
||
|
||
/* Player hand */
|
||
body.night-mode .player-hand {
|
||
background: var(--theme-bg-light);
|
||
}
|
||
|
||
body.night-mode .player-hand.current-turn {
|
||
box-shadow: 0 0 20px #5ecc7b, 0 0 40px #5ecc7b;
|
||
}
|
||
|
||
/* Opponent area - табло противников */
|
||
body.night-mode .opponent-area {
|
||
color: #ffffff;
|
||
}
|
||
|
||
body.night-mode .opponent-info {
|
||
background: var(--theme-bg-dark);
|
||
color: #ffffff;
|
||
}
|
||
|
||
body.night-mode .opponent-name {
|
||
color: #ffffff;
|
||
}
|
||
|
||
body.night-mode .opponent-score {
|
||
color: #ffffff;
|
||
}
|
||
|
||
body.night-mode .opponent-area.current-turn .opponent-info {
|
||
background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-hover) 100%);
|
||
border-color: #5ecc7b;
|
||
box-shadow: 0 4px 15px rgba(94, 204, 123, 0.6),
|
||
0 0 20px rgba(94, 204, 123, 0.4);
|
||
}
|
||
|
||
body.night-mode .opponent-area.current-turn .opponent-info .opponent-name,
|
||
body.night-mode .opponent-area.current-turn .opponent-info .opponent-score {
|
||
color: #ffffff;
|
||
}
|
||
|
||
body.night-mode .opponent-area.current-turn .opponent-cards {
|
||
filter: drop-shadow(0 0 15px rgba(94, 204, 123, 0.6))
|
||
drop-shadow(0 0 30px rgba(94, 204, 123, 0.4));
|
||
}
|
||
|
||
/* Action buttons */
|
||
body.night-mode #draw-card-btn,
|
||
body.night-mode .chat-btn:hover {
|
||
background: var(--theme-primary);
|
||
color: #ffffff;
|
||
}
|
||
|
||
body.night-mode #draw-card-btn:hover,
|
||
body.night-mode #send-chat-btn:hover {
|
||
background: var(--theme-primary-hover);
|
||
}
|
||
|
||
body.night-mode #ready-toggle-btn {
|
||
background: var(--theme-primary);
|
||
color: #ffffff;
|
||
}
|
||
|
||
body.night-mode #ready-toggle-btn:hover {
|
||
background: var(--theme-primary-hover);
|
||
}
|
||
|
||
body.night-mode #ready-toggle-btn.ready {
|
||
background: #2d5a3f;
|
||
}
|
||
|
||
body.night-mode #ready-toggle-btn.ready:hover {
|
||
background: #3d6a4f;
|
||
}
|
||
|
||
/* Leave game button */
|
||
body.night-mode .leave-game-btn {
|
||
background: #3d1e1e;
|
||
border-color: #e74c3c;
|
||
}
|
||
|
||
body.night-mode #leave-game-btn:hover {
|
||
background: #4c6baf;
|
||
}
|
||
|
||
/* Settings button */
|
||
body.night-mode #settings-btn {
|
||
background: var(--theme-primary-dark);
|
||
color: #ffffff;
|
||
}
|
||
|
||
body.night-mode .settings-btn:hover {
|
||
background: var(--theme-primary);
|
||
}
|
||
|
||
/* Suit selection modal */
|
||
body.night-mode #suit-selection-modal .modal-content {
|
||
background: var(--theme-bg-light);
|
||
}
|
||
|
||
body.night-mode .suit-selection h3 {
|
||
color: #ffffff;
|
||
}
|
||
|
||
body.night-mode .suit-btn {
|
||
background: var(--theme-bg-medium);
|
||
color: #ffffff;
|
||
border-color: var(--theme-border);
|
||
}
|
||
|
||
body.night-mode .rules-btn:hover {
|
||
background: var(--theme-primary);
|
||
border-color: var(--theme-primary);
|
||
}
|
||
|
||
body.night-mode .suit-btn {
|
||
color: #ffffff;
|
||
}
|
||
|
||
/* Красные масти в suit-selector делаем белыми - только с white-suits */
|
||
body.night-mode.white-suits .suit-btn[data-suit="hearts"] .suit-emoji,
|
||
body.night-mode.white-suits .suit-btn[data-suit="diamonds"] .suit-emoji {
|
||
filter: grayscale(1) contrast(0) brightness(3) drop-shadow(0px 0px 0.8px #ffffffd0);
|
||
}
|
||
|
||
/* Черные масти в suit-selector - только с white-suits */
|
||
body.night-mode.white-suits .suit-btn[data-suit="spades"] .suit-emoji,
|
||
body.night-mode.white-suits .suit-btn[data-suit="clubs"] .suit-emoji {
|
||
filter: contrast(4) saturate(0.5) drop-shadow(0px 0px 0.8px #333333c9);
|
||
}
|
||
|
||
/* Suit symbols (анимация выбора масти) */
|
||
body.night-mode .settings-btn {
|
||
background: var(--theme-primary-dark);
|
||
border-color: var(--theme-border);
|
||
}
|
||
|
||
body.night-mode.white-suits .suit-symbol.hearts,
|
||
body.night-mode.white-suits .suit-symbol.diamonds {
|
||
filter: grayscale(1) contrast(0) brightness(3) drop-shadow(0px 0px 0.8px #ffffffd0);
|
||
}
|
||
|
||
body.night-mode.white-suits .suit-symbol.clubs,
|
||
body.night-mode.white-suits .suit-symbol.spades {
|
||
color: #ffffff;
|
||
filter: contrast(4) saturate(0.5) drop-shadow(0px 0px 0.8px #333333c9);
|
||
}
|
||
|
||
body.night-mode .suit-arrow {
|
||
color: #5ecc7b;
|
||
}
|
||
|
||
/* Results modal */
|
||
body.night-mode .chat-modal-content {
|
||
background: var(--theme-bg-light);
|
||
}
|
||
|
||
body.night-mode #results-content h2 {
|
||
color: #ffffff;
|
||
}
|
||
|
||
body.night-mode .result-item {
|
||
background: var(--theme-bg-light);
|
||
color: #ffffff;
|
||
border-color: var(--theme-border);
|
||
}
|
||
|
||
body.night-mode .result-item.winner {
|
||
background: var(--theme-success-bg);
|
||
border-color: var(--theme-success);
|
||
}
|
||
|
||
body.night-mode .result-item h4 {
|
||
color: #ffffff;
|
||
}
|
||
|
||
body.night-mode .result-item p {
|
||
color: #ffffff;
|
||
}
|
||
|
||
body.night-mode .result-card {
|
||
background: #9ca3af;
|
||
color: white;
|
||
border-color: #374151;
|
||
filter: brightness(0.8);
|
||
}
|
||
|
||
body.night-mode.white-suits .result-card.hearts,
|
||
body.night-mode.white-suits .result-card.diamonds {
|
||
color: #ffffff;
|
||
}
|
||
|
||
body.night-mode.white-suits .result-card.hearts .card-rank,
|
||
body.night-mode.white-suits .result-card.diamonds .card-rank {
|
||
color: #ffffff;
|
||
filter: grayscale(1) contrast(0) brightness(3);
|
||
}
|
||
|
||
body.night-mode.white-suits .result-card.hearts .card-suit,
|
||
body.night-mode.white-suits .result-card.diamonds .card-suit {
|
||
color: #ffffff;
|
||
filter: grayscale(1) contrast(0) brightness(3) drop-shadow(0px 0px 0.8px #ffffffd0);
|
||
}
|
||
|
||
body.night-mode.white-suits .result-card.spades,
|
||
body.night-mode.white-suits .result-card.clubs {
|
||
color: #000000;
|
||
}
|
||
|
||
body.night-mode.white-suits .result-card.spades .card-rank,
|
||
body.night-mode.white-suits .result-card.clubs .card-rank {
|
||
color: #000000;
|
||
filter: contrast(4) saturate(0.5);
|
||
}
|
||
|
||
body.night-mode.white-suits .result-card.spades .card-suit,
|
||
body.night-mode.white-suits .result-card.clubs .card-suit {
|
||
color: #000000;
|
||
filter: contrast(4) saturate(0.5) drop-shadow(0px 0px 0.8px #333333c9);
|
||
}
|
||
|
||
/* Game log */
|
||
body.night-mode #game-log {
|
||
background: var(--theme-bg-dark);
|
||
color: #ffffff;
|
||
border-color: var(--theme-border);
|
||
}
|
||
|
||
body.night-mode .log-entry {
|
||
color: #ffffff;
|
||
}
|
||
|
||
body.night-mode .log-entry.highlight {
|
||
color: #5ecc7b;
|
||
}
|
||
|
||
/* Красные масти в чате (логе) делаем белыми - только с white-suits */
|
||
body.night-mode.white-suits .suit-emoji-log.hearts,
|
||
body.night-mode.white-suits .suit-emoji-log.diamonds {
|
||
filter: grayscale(1) contrast(1) brightness(3) drop-shadow(rgba(189, 189, 189, 0.79) 0px 0px 0.8px);
|
||
}
|
||
|
||
/* Чёрные масти в чате (логе) - только с white-suits */
|
||
body.night-mode.white-suits .suit-emoji-log.clubs,
|
||
body.night-mode.white-suits .suit-emoji-log.spades {
|
||
filter: contrast(4) saturate(0.5) drop-shadow(0px 0px 0.8px #c7c7c742);
|
||
}
|
||
|
||
/* Красные масти в чате (логе) */
|
||
body.night-mode .suit-emoji-log.hearts,
|
||
body.night-mode .suit-emoji-log.diamonds {
|
||
filter: saturate(0.8) brightness(1.1) drop-shadow(rgba(194, 90, 90, 0.79) 0px 0px 0.8px);
|
||
}
|
||
|
||
/* Чёрные масти в чате (логе) */
|
||
body.night-mode .suit-emoji-log.clubs,
|
||
body.night-mode .suit-emoji-log.spades {
|
||
filter: contrast(4) saturate(0.5) drop-shadow(0px 0px 0.8px #c7c7c75d);
|
||
}
|
||
|
||
/* Error screen */
|
||
body.night-mode #error-screen {
|
||
background: var(--theme-bg-dark);
|
||
}
|
||
|
||
body.night-mode #error-screen .container {
|
||
background: var(--theme-bg-medium);
|
||
}
|
||
|
||
body.night-mode #error-message {
|
||
color: #ff6b6b;
|
||
}
|
||
|
||
/* Lobby screen */
|
||
body.night-mode #lobby-screen {
|
||
background: var(--theme-bg-dark);
|
||
}
|
||
|
||
/* Room screen */
|
||
body.night-mode .chat-messages {
|
||
background: var(--theme-bg-medium);
|
||
}
|
||
|
||
body.night-mode .reaction-bubble.chat-bubble {
|
||
font-size: 14px;
|
||
max-width: 250px;
|
||
color: #ffffff;
|
||
white-space: pre-wrap;
|
||
word-wrap: break-word;
|
||
text-align: center;
|
||
padding: 4px 6px;
|
||
}
|
||
|
||
/* Все параграфы и тексты */
|
||
body.night-mode p,
|
||
body.night-mode span,
|
||
body.night-mode label,
|
||
body.night-mode div {
|
||
color: inherit;
|
||
}
|
||
|
||
/* Ссылки */
|
||
body.night-mode a {
|
||
color: #5ecc7b;
|
||
}
|
||
|
||
body.night-mode a:hover {
|
||
color: #4caf50;
|
||
}
|
||
|
||
/* Скроллбары */
|
||
body.night-mode ::-webkit-scrollbar {
|
||
width: 12px;
|
||
height: 12px;
|
||
}
|
||
|
||
body.night-mode ::-webkit-scrollbar-track {
|
||
background: var(--theme-bg-dark);
|
||
}
|
||
|
||
body.night-mode ::-webkit-scrollbar-thumb {
|
||
background: var(--theme-primary);
|
||
border-radius: 6px;
|
||
}
|
||
|
||
body.night-mode ::-webkit-scrollbar-thumb:hover {
|
||
background: var(--theme-primary-hover);
|
||
}
|
||
|
||
/* Mobile only elements */
|
||
body.night-mode .mobile-only {
|
||
color: #ffffff;
|
||
}
|
||
|
||
/* Flying card animation - цвет управляется через data-card-back */
|
||
body.night-mode .flying-card {
|
||
border-color: #303030 !important;
|
||
color: #ffffff;
|
||
}
|
||
|
||
/* Deck shuffling */
|
||
body.night-mode .deck-shuffling {
|
||
filter: brightness(1.2);
|
||
}
|
||
|
||
/* Card back selector в ночном режиме */
|
||
body.night-mode .card-back-preview {
|
||
border: 2px solid #555;
|
||
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
body.night-mode .card-back-option:hover {
|
||
border-color: #5ecc7b;
|
||
}
|
||
|
||
body.night-mode .card-back-option.selected {
|
||
border-color: #5ecc7b;
|
||
box-shadow: 0 0 10px rgba(94, 204, 123, 0.5);
|
||
}
|
||
|
||
/* 5 вариантов цветов рубашки для ночного режима */
|
||
body.night-mode .card-back-gray {
|
||
background:
|
||
repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(0, 0, 0, 0.15) 6px, rgba(0, 0, 0, 0.2) 7px),
|
||
repeating-linear-gradient(-45deg, transparent, transparent 6px, rgba(0, 0, 0, 0.15) 6px, rgba(0, 0, 0, 0.2) 7px),
|
||
linear-gradient(314deg, #433f3f 20%, #898787 100%) !important;
|
||
filter: saturate(1.1) brightness(0.93);
|
||
border-color: #2a2a2a !important;
|
||
}
|
||
|
||
body.night-mode .card-back-green {
|
||
background:
|
||
repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(0, 0, 0, 0.15) 6px, rgba(0, 0, 0, 0.2) 7px),
|
||
repeating-linear-gradient(-45deg, transparent, transparent 6px, rgba(0, 0, 0, 0.15) 6px, rgba(0, 0, 0, 0.2) 7px),
|
||
linear-gradient(251deg, #153522, #2e553d) !important;
|
||
filter: saturate(0.7) brightness(1.1);
|
||
border-color: #142119 !important;
|
||
}
|
||
|
||
body.night-mode .card-back-blue {
|
||
background:
|
||
repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(0, 0, 0, 0.15) 6px, rgba(0, 0, 0, 0.2) 7px),
|
||
repeating-linear-gradient(-45deg, transparent, transparent 6px, rgba(0, 0, 0, 0.15) 6px, rgba(0, 0, 0, 0.2) 7px),
|
||
linear-gradient(288deg, #223143, #346295) !important;
|
||
filter: saturate(0.7) brightness(1.1);
|
||
border-color: #172231 !important;
|
||
}
|
||
|
||
body.night-mode .card-back-red {
|
||
background:
|
||
repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(0, 0, 0, 0.15) 6px, rgba(0, 0, 0, 0.2) 7px),
|
||
repeating-linear-gradient(-45deg, transparent, transparent 6px, rgba(0, 0, 0, 0.15) 6px, rgba(0, 0, 0, 0.2) 7px),
|
||
linear-gradient(299deg, #311414, #732020) !important;
|
||
filter: saturate(0.7) brightness(1.1);
|
||
border-color: #200f0f !important;
|
||
}
|
||
|
||
body.night-mode .card-back-purple {
|
||
background:
|
||
repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(0, 0, 0, 0.15) 6px, rgba(0, 0, 0, 0.2) 7px),
|
||
repeating-linear-gradient(-45deg, transparent, transparent 6px, rgba(0, 0, 0, 0.15) 6px, rgba(0, 0, 0, 0.2) 7px),
|
||
linear-gradient(314deg, #3e235d, #4d3863) !important;
|
||
filter: saturate(0.7) brightness(1.1);
|
||
border-color: #241436 !important;
|
||
}
|
||
|
||
/* Применение выбранного цвета рубашки для ночного режима */
|
||
body.night-mode[data-card-back="gray"] .opponent-card,
|
||
body.night-mode[data-card-back="gray"] .deck,
|
||
body.night-mode[data-card-back="gray"] .card-back,
|
||
body.night-mode[data-card-back="gray"] .flying-card {
|
||
background:
|
||
repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(0, 0, 0, 0.15) 6px, rgba(0, 0, 0, 0.2) 7px),
|
||
repeating-linear-gradient(-45deg, transparent, transparent 6px, rgba(0, 0, 0, 0.15) 6px, rgba(0, 0, 0, 0.2) 7px),
|
||
linear-gradient(314deg, #433f3f 20%, #898787 100%) !important;
|
||
filter: saturate(1.1) brightness(0.93);
|
||
border-color: #2a2a2a !important;
|
||
}
|
||
|
||
body.night-mode[data-card-back="green"] .opponent-card,
|
||
body.night-mode[data-card-back="green"] .deck,
|
||
body.night-mode[data-card-back="green"] .card-back,
|
||
body.night-mode[data-card-back="green"] .flying-card {
|
||
background:
|
||
repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(0, 0, 0, 0.15) 6px, rgba(0, 0, 0, 0.2) 7px),
|
||
repeating-linear-gradient(-45deg, transparent, transparent 6px, rgba(0, 0, 0, 0.15) 6px, rgba(0, 0, 0, 0.2) 7px),
|
||
linear-gradient(251deg, #153522, #2e553d) !important;
|
||
filter: saturate(0.7) brightness(1.1);
|
||
border-color: #142119 !important;
|
||
}
|
||
|
||
body.night-mode[data-card-back="blue"] .opponent-card,
|
||
body.night-mode[data-card-back="blue"] .deck,
|
||
body.night-mode[data-card-back="blue"] .card-back,
|
||
body.night-mode[data-card-back="blue"] .flying-card {
|
||
background:
|
||
repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(0, 0, 0, 0.15) 6px, rgba(0, 0, 0, 0.2) 7px),
|
||
repeating-linear-gradient(-45deg, transparent, transparent 6px, rgba(0, 0, 0, 0.15) 6px, rgba(0, 0, 0, 0.2) 7px),
|
||
linear-gradient(288deg, #223143, #346295) !important;
|
||
filter: saturate(0.7) brightness(1.1);
|
||
border-color: #172231 !important;
|
||
}
|
||
|
||
body.night-mode[data-card-back="red"] .opponent-card,
|
||
body.night-mode[data-card-back="red"] .deck,
|
||
body.night-mode[data-card-back="red"] .card-back,
|
||
body.night-mode[data-card-back="red"] .flying-card {
|
||
background:
|
||
repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(0, 0, 0, 0.15) 6px, rgba(0, 0, 0, 0.2) 7px),
|
||
repeating-linear-gradient(-45deg, transparent, transparent 6px, rgba(0, 0, 0, 0.15) 6px, rgba(0, 0, 0, 0.2) 7px),
|
||
linear-gradient(299deg, #311414, #732020) !important;
|
||
filter: saturate(0.7) brightness(1.1);
|
||
border-color: #200f0f !important;
|
||
}
|
||
|
||
body.night-mode[data-card-back="purple"] .opponent-card,
|
||
body.night-mode[data-card-back="purple"] .deck,
|
||
body.night-mode[data-card-back="purple"] .card-back,
|
||
body.night-mode[data-card-back="purple"] .flying-card {
|
||
background:
|
||
repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(0, 0, 0, 0.15) 6px, rgba(0, 0, 0, 0.2) 7px),
|
||
repeating-linear-gradient(-45deg, transparent, transparent 6px, rgba(0, 0, 0, 0.15) 6px, rgba(0, 0, 0, 0.2) 7px),
|
||
linear-gradient(314deg, #3e235d, #4d3863) !important;
|
||
filter: saturate(0.7) brightness(1.1);
|
||
border-color: #241436 !important;
|
||
}
|
||
|
||
/* Background selector в ночном режиме */
|
||
body.night-mode .background-option {
|
||
border-color: transparent;
|
||
}
|
||
|
||
body.night-mode .background-option:hover {
|
||
border-color: #5ecc7b;
|
||
}
|
||
|
||
body.night-mode .background-option.selected {
|
||
border-color: #5ecc7b;
|
||
box-shadow: 0 0 10px rgba(94, 204, 123, 0.5);
|
||
}
|
||
|
||
body.night-mode .background-preview {
|
||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
|
||
}
|
||
|
||
/* 5 вариантов фонов для ночного режима - тёмные пастельные */
|
||
body.night-mode .bg-default {
|
||
background: linear-gradient(155deg, #2a3d52 0%, #1a2332 100%);
|
||
}
|
||
|
||
body.night-mode .bg-green {
|
||
background: linear-gradient(167deg, #5c4c3e 10%, #2c2626 90%);
|
||
}
|
||
|
||
body.night-mode .bg-blue {
|
||
background: linear-gradient(199deg, #163423 10%, #0d080e 80%);
|
||
}
|
||
|
||
body.night-mode .bg-purple {
|
||
background: linear-gradient(67deg, #231b2a 20%, #12091e 100%);
|
||
}
|
||
|
||
body.night-mode .bg-orange {
|
||
background: linear-gradient(322deg, #1a0404 10%, #2e0b09 70%);
|
||
}
|
||
|
||
/* Применение выбранного фона для ночного режима */
|
||
body.night-mode[data-background="default"] .game-table,
|
||
body.night-mode:not([data-background]) .game-table {
|
||
background: linear-gradient(155deg, #2a3d52 0%, #1a2332 100%);
|
||
}
|
||
|
||
body.night-mode[data-background="default"] .game-circle,
|
||
body.night-mode:not([data-background]) .game-circle {
|
||
background: radial-gradient(circle, #2d4159 0%, #1e2d3f 100%);
|
||
border-color: #5273b8;
|
||
}
|
||
|
||
body.night-mode[data-background="green"] .game-table {
|
||
background: linear-gradient(167deg, #5c4c3e 10%, #2c2626 90%);
|
||
}
|
||
|
||
body.night-mode[data-background="green"] .game-circle {
|
||
background: radial-gradient(circle, #6d5a47 0%, #4a3d32 100%);
|
||
border-color: #8a7360;
|
||
}
|
||
|
||
body.night-mode[data-background="blue"] .game-table {
|
||
background: linear-gradient(166deg, #143723bf 10%, #0a110af5 80%);
|
||
}
|
||
|
||
body.night-mode[data-background="blue"] .game-circle {
|
||
background: radial-gradient(circle, #274b35 10%, #192920 90%);
|
||
border-color: #20472f;
|
||
}
|
||
|
||
body.night-mode[data-background="purple"] .game-table {
|
||
background: linear-gradient(317deg, #211927 20%, #180f23 100%);
|
||
}
|
||
|
||
body.night-mode[data-background="purple"] .game-circle {
|
||
background: radial-gradient(circle, #352840 0%, #1c1522 100%);
|
||
border-color: #4d3a5a;
|
||
}
|
||
|
||
body.night-mode[data-background="orange"] .game-table {
|
||
background: linear-gradient(322deg, #1a0404 10%, #2e0b09 70%);
|
||
}
|
||
|
||
body.night-mode[data-background="orange"] .game-circle {
|
||
background: radial-gradient(circle, #3d0f0c 0%, #230907 100%);
|
||
border-color: #5a1812;
|
||
}
|
||
|
||
/* Фон руки игрока под каждый цвет фона */
|
||
body.night-mode[data-background="default"] .player-hand,
|
||
body.night-mode:not([data-background]) .player-hand {
|
||
background: rgba(42, 61, 82, 0.95);
|
||
}
|
||
|
||
body.night-mode[data-background="green"] .player-hand {
|
||
background: rgba(92, 76, 62, 0.95);
|
||
}
|
||
|
||
body.night-mode[data-background="blue"] .player-hand {
|
||
background: rgba(22, 52, 35, 0.95);
|
||
}
|
||
|
||
body.night-mode[data-background="purple"] .player-hand {
|
||
background: rgba(35, 27, 42, 0.95);
|
||
}
|
||
|
||
body.night-mode[data-background="orange"] .player-hand {
|
||
background: rgba(46, 11, 9, 0.95);
|
||
}
|
||
|
||
/* Рамка карт под каждый фон для ночного режима */
|
||
body.night-mode[data-background="default"] .card,
|
||
body.night-mode:not([data-background]) .card {
|
||
border-color: #1e2d3f;
|
||
}
|
||
|
||
body.night-mode[data-background="green"] .card {
|
||
border-color: #4a3d32;
|
||
}
|
||
|
||
body.night-mode[data-background="blue"] .card {
|
||
border-color: #11281c;
|
||
}
|
||
|
||
body.night-mode[data-background="purple"] .card {
|
||
border-color: #1c1522;
|
||
}
|
||
|
||
body.night-mode[data-background="orange"] .card {
|
||
border-color: #230907;
|
||
}
|