/* ========================================================= ВИНИЛОВЫЙ ПРОИГРЫВАТЕЛЬ. СТИЛЬ. Часть 1 — БЫСТРЫЕ НАСТРОЙКИ ОСНОВНОЙ ТЕМЫ theme 0 = основная тема Здесь находятся все значения основной темы. Структура разделов совпадает с дополнительными темами. Создан с помощью ChatGPT Kolobdur74. ========================================================= */ :root { /* ===================================================== ОСНОВНЫЕ ЦВЕТА ===================================================== */ /* Основной цвет бумаги / светлой основы проигрывателя. */ --av-paper: #fff9e8; /* Резервный дополнительный оттенок бумаги. В текущей геометрии непосредственно не используется. */ --av-paper-2: #f8efd4; /* Основной золотистый цвет элементов проигрывателя. */ --av-gold: #b9954f; /* Светлый оттенок золота для тонких границ и разделителей. */ --av-gold-light: #dfc98f; /* Тёмный оттенок золота для акцентов и границ. */ --av-gold-dark: #8d6d35; /* Основной нефритовый цвет интерактивных элементов. */ --av-jade: #438f86; /* Тёмный оттенок нефрита для контрастных состояний. */ --av-jade-dark: #34766e; /* Акцентный красный цвет декоративных элементов. */ --av-red: #a85249; /* Основной цвет текста. */ --av-text: #594737; /* Приглушённый цвет второстепенного текста. */ --av-muted: #8b7862; /* ===================================================== ПРОГРЕСС ===================================================== */ /* Цвет незаполненной части шкалы прогресса. */ --av-progress-track: #dfd1ae; /* Цвет заполненной части шкалы прогресса. */ --av-progress-fill: var(--av-jade); /* ===================================================== РАЗМЕРЫ ===================================================== */ /* Максимальная ширина всего проигрывателя. */ --av-width: 720px; /* Общая высота проигрывателя. */ --av-height: 245px; /* Ширина левой панели с кнопками управления. */ --av-controls-width: 66px; /* Ширина центральной части с пластинкой и тонармом. */ --av-deck-width: 270px; /* Диаметр виниловой пластинки. */ --av-disc-size: 190px; /* ===================================================== ШРИФТЫ ===================================================== */ /* Шрифт интерфейсных элементов и служебного текста. */ --av-font-ui: "Segoe UI", Arial, sans-serif; /* Шрифт китайского / декоративного текста. */ --av-font-cn: "Noto Serif SC", "Songti SC", "SimSun", serif; /* ===================================================== РАЗМЕРЫ ТЕКСТА И ЭЛЕМЕНТОВ ===================================================== */ /* Размер названия композиции. */ --av-title-size: 17px; /* Размер декоративного символа перед названием. */ --av-mark-size: 18px; /* Размер основного текста подписи. 0px = собственный текст подписи визуально скрыт. */ --av-caption-size: 0px; /* Размер текста исполнителя, выводимого через ::after. */ --av-caption-after-size: 10px; /* Размер времени воспроизведения. */ --av-time-size: 9px; /* Размер символов кнопок управления. */ --av-button-size: 18px; /* Размер символа кнопки громкости. */ --av-volume-icon-size: 24px; /* Ширина кнопок управления. */ --av-button-width: 42px; /* Высота кнопок управления. */ --av-button-height: 42px; /* Ширина ползунка громкости. */ --av-volume-width: 72px; /* ===================================================== ДЕКОРАТИВНЫЕ ИЗОБРАЖЕНИЯ ===================================================== */ /* Фоновое изображение правой информационной части. */ --av-info-background-image: url(https://forumstatic.ru/files/000d/8d/19/26207.png); /* Положение фонового изображения относительно блока. */ --av-info-background-position: 170% 30%; /* Размер фонового изображения относительно блока. */ --av-info-background-size: 70%; /* ===================================================== СИМВОЛЫ ===================================================== */ /* Символ кнопки «Плей». */ --av-play-icon: '\64ad'; /* Символ кнопки «Пауза». */ --av-pause-icon: '\505c'; /* Символ кнопки «Стоп». */ --av-stop-icon: '\6b62'; /* Символ кнопки смены изображения пластинки. */ --av-cover-icon: '\21c4'; /* Декоративный символ перед названием композиции. */ --av-title-icon: '\97F3'; /* Текст подписи под названием композиции. */ --av-caption-text: '\97F3\4E50 · music'; /* ===================================================== ОБЩАЯ ГЕОМЕТРИЯ ===================================================== */ /* Основной способ отображения контейнера проигрывателя. */ --av-display: flex; /* Колонки CSS Grid. Для основной темы сетка не используется. */ --av-grid-columns: none; /* Фиксированная высота карточки. auto = высота определяется содержимым. */ --av-card-height: auto; /* Минимальная высота карточки. */ --av-card-min-height: var(--av-height); /* Фон всей карточки проигрывателя. */ --av-card-background: linear-gradient( 135deg, rgba(255,255,255,.72), rgba(255,249,232,.95) ); /* Граница всей карточки. */ --av-card-border: 1px solid var(--av-gold); /* Скругление углов карточки. */ --av-card-radius: 4px; /* Тень карточки и лёгкая внутренняя подсветка. */ --av-card-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 3px 8px rgba(80,55,25,.10); /* ===================================================== ЛЕВАЯ ПАНЕЛЬ ===================================================== */ /* Ширина левой панели в flex-контейнере. */ --av-controls-flex: 0 0 var(--av-controls-width); /* Положение панели при использовании CSS Grid. Для основной темы отдельная колонка не задаётся. */ --av-controls-grid-column: auto; /* Фон панели с кнопками управления. */ --av-controls-background: linear-gradient( 90deg, rgba(223,201,143,.12), rgba(255,255,255,.25) ); /* Правая граница панели управления. */ --av-controls-border-right: 1px solid var(--av-gold-light); /* Расстояние между кнопками. */ --av-controls-gap: 10px; /* Внутренние отступы панели управления. */ --av-controls-padding: 12px 8px; /* ===================================================== КНОПКИ ===================================================== */ /* Граница кнопок управления. */ --av-button-border: 1px solid var(--av-gold); /* Фон кнопок управления. */ --av-button-background: radial-gradient( circle, #fffdf5 0%, #f9efcf 70%, #ead8a7 100% ); /* Цвет символов кнопок. */ --av-button-color: var(--av-jade); /* Тень кнопок в обычном состоянии. */ --av-button-shadow: 0 1px 2px rgba(90,65,30,.10); /* Размер собственного текста кнопки. 0 = используется символ из соответствующей переменной icon. */ --av-button-font-size: 0; /* Высота строки символа внутри кнопки. */ --av-button-line-height: calc(var(--av-button-height) - 2px); /* Внутренний отступ кнопки. */ --av-button-padding: 0; /* Фон кнопки при наведении курсора. */ --av-button-hover-background: radial-gradient( circle, #fffef9 0%, #fff5d8 70%, #ecd9a6 100% ); /* Цвет границы кнопки при наведении. */ --av-button-hover-border: var(--av-gold-dark); /* ===================================================== ЦЕНТРАЛЬНАЯ ЧАСТЬ ===================================================== */ /* Ширина центральной части в flex-контейнере. */ --av-deck-flex: 0 0 var(--av-deck-width); /* Положение центральной части при использовании CSS Grid. */ --av-deck-grid-column: auto; /* Высота центральной части. */ --av-deck-height: var(--av-height); /* Фон площадки с пластинкой. */ --av-deck-background: linear-gradient( 145deg, #fffdf5, #f7edcf ); /* Правая граница центральной части. */ --av-deck-border-right: 1px solid var(--av-gold-light); /* Обрезка элементов, выходящих за границы площадки. */ --av-deck-overflow: hidden; /* ===================================================== ВНУТРЕННЯЯ РАМКА ===================================================== */ /* Отступ рамки слева от края центральной части. */ --av-frame-left: 10px; /* Отступ рамки справа от края центральной части. */ --av-frame-right: 10px; /* Отступ рамки сверху. */ --av-frame-top: 10px; /* Отступ рамки снизу. */ --av-frame-bottom: 10px; /* Граница декоративной внутренней рамки. */ --av-frame-border: 1px solid rgba(185,149,79,.42); /* Скругление углов внутренней рамки. */ --av-frame-radius: 0; /* Фон внутренней рамки. */ --av-frame-background: transparent; /* Тень внутренней рамки. */ --av-frame-shadow: none; /* ===================================================== ПЛАСТИНКА ===================================================== */ /* Граница виниловой пластинки. */ --av-disc-border: 1px solid var(--av-gold-dark); /* Тень пластинки. */ --av-disc-shadow: 0 3px 7px rgba(80,55,20,.18); /* Основной цвет пластинки под изображением. */ --av-disc-background-color: #d8ad4e; /* Изображение, используемое как поверхность пластинки. */ --av-record-image: url(https://forumstatic.ru/files/000d/8d/19/40871.png); /* ===================================================== ТОНАРМ ===================================================== */ /* Фон круглого основания тонарма. */ --av-pivot-background: radial-gradient( circle, #fff9e8 0 30%, #d5b66e 31% 55%, #fff8e8 56% ); /* Граница основания тонарма. */ --av-pivot-border: 2px solid var(--av-gold-dark); /* Тень основания тонарма. */ --av-pivot-shadow: 0 1px 2px rgba(80,55,20,.15); /* Фон металлического рычага тонарма. */ --av-arm-background: linear-gradient( 90deg, #8d6d35, #f3dfaa 45%, #ad8942 ); /* Фон головки / картриджа тонарма. */ --av-cartridge-background: linear-gradient( 90deg, #b18b42, #fff1c7 45%, #b18b42 ); /* Цвет иглы. */ --av-stylus-background: var(--av-red); /* ===================================================== ПРАВАЯ ЧАСТЬ ===================================================== */ /* Ширина информационной части в flex-контейнере. */ --av-info-flex: 1 1 auto; /* Положение информационной части при использовании CSS Grid. */ --av-info-grid-column: auto; /* Внутренние отступы информационной части. */ --av-info-padding: 20px 18px 18px 20px; /* Дополнительный цвет фона информационной части. */ --av-info-background-color: transparent; /* Отображение дополнительного декоративного слоя. */ --av-info-overlay-display: none; /* Ширина дополнительного декоративного слоя. */ --av-info-overlay-width: 0; /* Фон дополнительного декоративного слоя. */ --av-info-overlay-background: transparent; /* ===================================================== ЗАГОЛОВОК И ТЕКСТ ===================================================== */ /* Шрифт названия композиции. */ --av-title-font-family: var(--av-font-cn); /* Насыщенность шрифта названия. */ --av-title-weight: 400; /* Межбуквенный интервал названия. */ --av-title-letter-spacing: normal; /* Шрифт декоративного символа перед названием. */ --av-mark-font-family: var(--av-font-cn); /* Цвет декоративного символа перед названием. */ --av-mark-color: var(--av-red); /* Межбуквенный интервал подписи исполнителя. */ --av-caption-letter-spacing: .7px; /* ===================================================== ПОЛЗУНОК И ГРОМКОСТЬ ===================================================== */ /* Цвет бегунка ползунка прогресса. */ --av-progress-thumb-background: var(--av-paper); /* Граница бегунка ползунка прогресса. */ --av-progress-thumb-border: 1px solid var(--av-jade); /* Тень бегунка ползунка прогресса. */ --av-progress-thumb-shadow: none; /* Цвет символа кнопки громкости. */ --av-volume-button-color: var(--av-jade); } /* ========================================================= КНОПКА РЕДАКТОРА ========================================================= */ /* Иконка кнопки вставки винилового проигрывателя в панели редактора сообщений. */ #button-vinyl_record_player { background: url(https://forumstatic.ru/files/001a/ad/c5/95954.png) no-repeat; /* Размер иконки относительно размера кнопки редактора. */ background-size: 40%; }