/* * Оформление песенника. * * Целевой минимум — Safari 12 (iPad mini 2, iOS 12.5.7), поэтому здесь нет * gap во flexbox, clamp(), :is() и логических свойств. Отступы — на margin. */ :root { --bg: #faf8f4; --surface: #ffffff; --text: #1c1a17; --muted: #6d675e; --line: #e3ddd2; --accent: #b0511b; --accent-soft: #f6e7db; --danger: #a32b2b; --fs-song: 17px; } /* * Тёмная тема описана дважды: по системной настройке и принудительно через * data-theme на . Объединить селекторы в один список нельзя — :is() * в Safari 12 не работает, а один непонятый селектор отменил бы всё правило. * * Ручной режим здесь не роскошь: в Safari на iOS 12 нет prefers-color-scheme, * так что на iPad mini 2 работает только вторая форма записи. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #14120f; --surface: #1e1b17; --text: #ece7dd; --muted: #9a9287; --line: #322d26; --accent: #f0a35e; --accent-soft: #33261a; --danger: #e07070; } } :root[data-theme="dark"] { --bg: #14120f; --surface: #1e1b17; --text: #ece7dd; --muted: #9a9287; --line: #322d26; --accent: #f0a35e; --accent-soft: #33261a; --danger: #e07070; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; background: var(--bg); } body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; } #app { max-width: 46rem; margin: 0 auto; padding: 0 16px 4rem; padding-left: calc(16px + env(safe-area-inset-left)); padding-right: calc(16px + env(safe-area-inset-right)); } a { color: inherit; text-decoration: none; } .msg { color: var(--muted); padding: 2rem 0; text-align: center; } .msg.error { color: var(--danger); } /* -- шапка ------------------------------------------------------------ */ .top { padding-top: 20px; padding-top: calc(20px + env(safe-area-inset-top)); padding-bottom: 12px; } .top-row { margin-bottom: 12px; overflow: hidden; /* держит строку вокруг плавающих потомков */ } .top-title { float: left; margin: 0; font-size: 1.6rem; line-height: 1.3; letter-spacing: -0.01em; } .top-theme, .top-add { float: right; } .top-add { margin-left: 6px; font-size: 1.3rem; font-weight: 600; line-height: 1; color: var(--accent); text-decoration: none; } /* -- экран добавления песни ------------------------------------------- */ .import { padding-bottom: 3rem; } .wide-btn { display: block; width: 100%; height: 44px; margin-top: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; font-size: 1rem; -webkit-appearance: none; appearance: none; cursor: pointer; } .wide-btn:active { background: var(--accent-soft); } .wide-btn:disabled { opacity: 0.5; } .wide-btn.primary { margin-top: 18px; border-color: var(--accent); background: var(--accent); color: #fff; font-weight: 600; } .link-btn { display: inline-block; margin: 14px 14px 0 0; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: 0.9rem; text-decoration: underline; cursor: pointer; } .hint { margin: 10px 0 0; color: var(--muted); font-size: 0.82rem; } .warn { margin: 12px 0 0; padding: 9px 12px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 6px; background: var(--accent-soft); color: var(--text); font-size: 0.86rem; } .preview { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); } .preview-title { margin: 0; font-size: 1.25rem; line-height: 1.25; } .preview-song { margin-top: 16px; padding: 14px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); max-height: 60vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } .source { display: block; width: 100%; margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace; font-size: 15px; /* мельче 16px — и iOS зумит поле при фокусе */ line-height: 1.45; resize: vertical; -webkit-appearance: none; appearance: none; } .search { width: 100%; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; -webkit-appearance: none; appearance: none; } .search:focus { outline: none; border-color: var(--accent); } /* -- состояние офлайн-копии ------------------------------------------- */ .offline { margin-top: 10px; padding: 7px 10px 7px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); overflow: hidden; /* держит строку вокруг плавающей кнопки */ } .offline-text { display: block; overflow: hidden; padding-top: 7px; color: var(--muted); font-size: 0.85rem; } .offline.ready .offline-text { color: var(--text); } .offline.error .offline-text { color: var(--danger); } .offline-btn { float: right; margin-left: 10px; height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--accent); font: inherit; font-size: 0.85rem; line-height: 1; -webkit-appearance: none; appearance: none; cursor: pointer; } .offline-btn:active { background: var(--accent-soft); } .offline-btn:disabled { opacity: 0.4; cursor: default; } .back { display: inline-block; margin-bottom: 14px; padding: 6px 0; color: var(--accent); font-size: 0.95rem; } /* -- список песен ----------------------------------------------------- */ .row { display: block; padding: 13px 4px; border-bottom: 1px solid var(--line); } .row:active { background: var(--accent-soft); } .row-title { display: block; font-size: 1.05rem; font-weight: 500; } .row-meta { display: block; margin-top: 3px; color: var(--muted); font-size: 0.87rem; } .row-artist { margin-right: 8px; } .tag { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 20px; background: var(--accent-soft); color: var(--accent); font-size: 0.78rem; white-space: nowrap; } /* -- заголовок песни -------------------------------------------------- */ .song-title { margin: 0; font-size: 1.45rem; line-height: 1.2; } .song-artist { margin-top: 4px; color: var(--muted); } .song-facts { margin-top: 10px; } .chord-strip { margin: 0 0 20px; padding-bottom: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; border-bottom: 1px solid var(--line); } /* -- карточка аккорда со схемой --------------------------------------- */ .card { display: inline-block; vertical-align: top; width: 74px; margin: 0 8px 4px 0; padding: 8px 4px 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; text-align: center; -webkit-appearance: none; appearance: none; cursor: pointer; } .card:active { background: var(--accent-soft); } .card-name { display: block; margin-bottom: 4px; color: var(--accent); font-weight: 700; font-size: 0.88rem; white-space: nowrap; } .card-empty { display: block; padding: 14px 0; color: var(--muted); font-size: 0.8rem; } .diagram { display: block; width: 58px; height: auto; margin: 0 auto; } /* -- транспонирование ------------------------------------------------- */ .transpose { display: inline-block; vertical-align: middle; margin-left: 4px; white-space: nowrap; } .tr-btn, .tr-now { min-width: 34px; height: 30px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 0.9rem; line-height: 1; vertical-align: middle; -webkit-appearance: none; appearance: none; cursor: pointer; } .tr-btn { font-weight: 700; } .tr-btn:active, .tr-now:active { background: var(--accent-soft); } .tr-now { margin: 0 2px; min-width: 40px; color: var(--muted); } .tr-now.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 700; } /* -- панель с вариантами постановки ----------------------------------- */ .sheet { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 20; background: rgba(0, 0, 0, 0.45); } .sheet-panel { position: absolute; right: 0; bottom: 0; left: 0; max-height: 82%; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 16px 24px; padding-bottom: calc(24px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); border-radius: 16px 16px 0 0; background: var(--bg); } .sheet-head { margin-bottom: 12px; overflow: hidden; } .sheet-name { float: left; color: var(--accent); font-size: 1.3rem; font-weight: 700; } .sheet-close { float: right; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); color: var(--muted); font-size: 1rem; line-height: 1; -webkit-appearance: none; appearance: none; cursor: pointer; } .sheet-grid { white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; } .sheet-item { display: inline-block; vertical-align: top; width: 92px; margin-right: 10px; } .sheet-item .diagram { width: 92px; } .sheet-hint { clear: both; margin: 14px 0 0; color: var(--muted); font-size: 0.85rem; } /* -- текст песни ------------------------------------------------------ */ .song { font-size: var(--fs-song); line-height: 1.5; padding-bottom: 60px; /* чтобы последняя строка не пряталась за панелью */ } /* -- нижняя панель управления ----------------------------------------- */ .bar { position: fixed; right: 0; bottom: 0; left: 0; z-index: 15; padding: 6px 10px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface); text-align: center; white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; } .bar-inner { display: inline-block; } .bar-btn { min-width: 42px; height: 38px; margin: 0 2px; padding: 0 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); color: var(--text); font: inherit; font-size: 0.95rem; line-height: 1; vertical-align: middle; -webkit-appearance: none; appearance: none; cursor: pointer; } .bar-btn:active { background: var(--accent-soft); } .bar-btn:disabled { opacity: 0.35; } .bar-play.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } .bar-level { display: inline-block; min-width: 24px; vertical-align: middle; color: var(--muted); font-size: 0.95rem; text-align: center; } .bar-sep { display: inline-block; width: 1px; height: 22px; margin: 0 7px; vertical-align: middle; background: var(--line); } .bar-font { font-size: 0.85rem; } .sec { margin-bottom: 1.6em; } .sec-label { margin: 0 0 0.5em; color: var(--muted); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .sec-chorus { padding-left: 12px; border-left: 3px solid var(--accent-soft); } .ln { margin: 0; } .ln.plain { min-height: 1.5em; } .ln.chorded { margin-bottom: 2px; } .ln.gap { height: 0.7em; } .ln.note { color: var(--muted); font-style: italic; font-size: 0.9em; } /* Слово целиком не разрывается: аккорд остаётся над своим слогом */ .w { display: inline-block; vertical-align: bottom; white-space: nowrap; } .u { display: inline-block; vertical-align: bottom; } .ch { display: block; height: 1.5em; font-size: 0.82em; line-height: 1.5; font-weight: 700; color: var(--accent); white-space: pre; } .ch.has { padding-right: 0.45em; cursor: pointer; /* Подсветка при нажатии — единственный намёк на кликабельность: подчёркивание в тексте песни отвлекало бы во время игры */ -webkit-tap-highlight-color: rgba(176, 81, 27, 0.25); } .ch.has:active { opacity: 0.55; } .ly { display: block; white-space: pre; } /* -- табулатуры ------------------------------------------------------- */ .tab-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; } .tab { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace; font-size: 0.78em; line-height: 1.35; white-space: pre; } /* -- широкий экран: iPad в альбомной ориентации ----------------------- */ @media (min-width: 700px) { :root { --fs-song: 18px; } #app { padding-left: 28px; padding-right: 28px; } }