/* Оформление paula — ведомственное, по docs/Оформление.md НИИЧЕГО: одноэкранное рабочее место под DOS — строка меню, окно с двойной рамкой, строка состояния; растровый шрифт; палитры токенами. Схем две, и по умолчанию выбирает их устройство, как в институте: широкий экран — бумага, узкий — синий экран линии. Выбор смотрящего (cookie vedomstvo_cveta, общая на ведомство) ставит data-cveta на и отменяет ширину. Поэтому ночная палитра записана дважды — под медиазапросом и под явным выбором; наборы обязаны совпадать. Трекерам такой интерфейс родной: FastTracker 2 и Impulse Tracker выглядели именно так. Шрифт PxPlus IBM VGA 8x16 — VileR, Ultimate Oldschool PC Font Pack, CC BY-SA 4.0; лицензия рядом: px-vga-LICENSE.txt. */ @font-face { font-family: "PxVGA"; src: url("px-vga.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: swap; } /* ── Токены: рабочее место (бумага) ──────────────────────────────────── */ :root { --desktop: #b8b4a8; --desktop-dot: #aaa69a; --frame: #6e6a60; --win: #f2f0ea; --text: #14140f; --muted: #5c584e; --line: #a8a49a; --sunken: #e2dfd6; --bar: #ccc8bc; --bar-text: #14140f; --accel: #800000; --accent: #00006a; --accent-fg: #f2f0ea; --warn: #8a0000; --warn-bg: #f0dcd8; --shadow: 3px 3px 0 rgb(0 0 0 / 0.35); /* Паттерн: цвета колонок ячейки, как в трекерах — нота, инструмент, громкость, эффект. */ --pat-note: #14140f; --pat-inst: #005a6a; --pat-vol: #005000; --pat-fx: #8a0050; --pat-param: #7a4a00; --pat-dim: #a8a49a; --pat-beat: #e8e5dc; --meter: #005000; --meter-hot: #8a0000; --font-ui: "PxVGA", ui-monospace, "Courier New", monospace; --ui: 16px; --line-h: 20px; --ch: 8px; /* ширина знака растрового шрифта */ } /* ── Токены: удалённый терминал (синий) ──────────────────────────────── */ @media (max-width: 40rem) { :root:not([data-cveta="den"]) { --desktop: #00a8a8; --desktop-dot: #009090; --frame: #a8a8a8; --win: #0000a8; --text: #ffffff; --muted: #b0b0cc; --line: #5454a8; --sunken: #000078; --bar: #a8a8a8; --bar-text: #000000; --accel: #800000; --accent: #ffff55; --accent-fg: #0000a8; --warn: #ff5454; --warn-bg: #700000; --shadow: none; --pat-note: #ffffff; --pat-inst: #55ffff; --pat-vol: #55ff55; --pat-fx: #ff55ff; --pat-param: #ffff55; --pat-dim: #7070c8; --pat-beat: #00009c; --meter: #55ff55; --meter-hot: #ff5454; } } :root[data-cveta="noch"] { --desktop: #00a8a8; --desktop-dot: #009090; --frame: #a8a8a8; --win: #0000a8; --text: #ffffff; --muted: #b0b0cc; --line: #5454a8; --sunken: #000078; --bar: #a8a8a8; --bar-text: #000000; --accel: #800000; --accent: #ffff55; --accent-fg: #0000a8; --warn: #ff5454; --warn-bg: #700000; --shadow: none; --pat-note: #ffffff; --pat-inst: #55ffff; --pat-vol: #55ff55; --pat-fx: #ff55ff; --pat-param: #ffff55; --pat-dim: #7070c8; --pat-beat: #00009c; --meter: #55ff55; --meter-hot: #ff5454; } * { box-sizing: border-box; } [hidden] { display: none !important; } /* ── Рабочий стол ────────────────────────────────────────────────────── */ html { background: var(--desktop); } body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background-color: var(--desktop); background-image: linear-gradient(45deg, var(--desktop-dot) 25%, transparent 25%, transparent 75%, var(--desktop-dot) 75%), linear-gradient(45deg, var(--desktop-dot) 25%, transparent 25%, transparent 75%, var(--desktop-dot) 75%); background-size: 4px 4px; background-position: 0 0, 2px 2px; color: var(--text); font: normal var(--ui)/var(--line-h) var(--font-ui); -webkit-font-smoothing: none; -webkit-text-size-adjust: 100%; } a { color: var(--accent); } :focus-visible { outline: 1px dotted currentColor; outline-offset: 1px; } ::selection { background: var(--accent); color: var(--accent-fg); } .muted { color: var(--muted); } p { margin: 0 0 var(--line-h); } /* ── Строка меню ─────────────────────────────────────────────────────── */ .menubar { position: sticky; top: 0; z-index: 10; background: var(--bar); color: var(--bar-text); border-bottom: 1px solid var(--frame); display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--ui); padding: 2px 8px; padding-top: max(2px, env(safe-area-inset-top)); } .menubar a { color: var(--bar-text); text-decoration: none; padding: 0 6px; } .menubar a:hover, .menubar a:focus-visible, .menubar a.current { background: var(--bar-text); color: var(--bar); outline: none; } .menubar em { font-style: normal; color: var(--accel); } .menubar a:hover em, .menubar a:focus-visible em, .menubar a.current em { color: var(--bar); } .menubar .spacer { flex: 1; } .menubar .app { color: var(--bar-text); opacity: .7; } .menubar .whoami { color: var(--accel); } /* ── Кнопки ──────────────────────────────────────────────────────────── */ .button { font: inherit; color: var(--text); background: var(--sunken); border: 1px solid var(--frame); border-radius: 0; padding: 0 6px; cursor: pointer; text-decoration: none; white-space: nowrap; box-shadow: 2px 2px 0 rgb(0 0 0 / 0.3); display: inline-block; } .button::before { content: "[ "; } .button::after { content: " ]"; } .button:hover { background: var(--accent); color: var(--accent-fg); } .button:active { box-shadow: none; transform: translate(2px, 2px); } .button.primary { background: var(--accent); color: var(--accent-fg); } .button.primary:hover { background: var(--accent-fg); color: var(--accent); } .button.on { background: var(--accent); color: var(--accent-fg); } .button:disabled { opacity: .5; cursor: default; } .button.big { padding: 4px 12px; } /* ── Окно ────────────────────────────────────────────────────────────── */ main { flex: 1; padding: var(--line-h) 8px var(--line-h); } .window { background: var(--win); border: 3px double var(--frame); box-shadow: var(--shadow); min-width: 0; } .win-title { background: var(--frame); color: var(--win); padding: 0 8px; display: flex; gap: 8px; align-items: baseline; } .win-title .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .win-title .close { font: inherit; background: none; border: none; color: var(--win); cursor: pointer; padding: 0 4px; } .win-title .close:hover { background: var(--win); color: var(--frame); } .win-body { padding: var(--line-h) 12px; } h1 { font: inherit; margin: 0 0 var(--line-h); text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid var(--line); padding-bottom: 2px; } h2 { font: inherit; margin: var(--line-h) 0 4px; text-transform: uppercase; color: var(--muted); } /* ── Проходная ───────────────────────────────────────────────────────── */ .gate { max-width: 34rem; margin: 0 auto; } .epigraph { color: var(--muted); } .form label { display: flex; gap: 8px; align-items: baseline; margin: 0 0 8px; } .form label > input { flex: 1; } input { font: inherit; color: var(--text); background: var(--win); border: 1px solid var(--frame); border-right-color: var(--bar); border-bottom-color: var(--bar); border-radius: 0; padding: 1px 6px; min-width: 0; } .form-error { color: var(--warn); min-height: var(--line-h); } .actions { margin: var(--line-h) 0 0; } /* ── Стол проигрывателя ──────────────────────────────────────────────── */ .desk { max-width: 96rem; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--line-h) 16px; } .history { display: none; } @media (min-width: 75rem) { .desk { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; } .history { display: block; } } .player .win-body { position: relative; } .now { display: flex; gap: 16px; align-items: flex-start; margin: 0 0 12px; } .now-text { flex: 1; min-width: 0; } .now h1 { margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .now .line { margin: 0; min-height: var(--line-h); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .now .line b { font-weight: normal; color: var(--accent); } .meters { width: 13rem; flex: none; } .lr { display: grid; grid-template-columns: auto 1fr; gap: 2px 6px; align-items: center; margin-bottom: 6px; } .bar { height: 10px; background: var(--sunken); border: 1px solid var(--line); overflow: hidden; } .bar i { display: block; height: 100%; width: 0; background: var(--meter); } .bar i.hot { background: var(--meter-hot); } .spectrum { display: flex; gap: 2px; height: 48px; align-items: flex-end; background: var(--sunken); border: 1px solid var(--line); padding: 2px; } .spectrum i { flex: 1; background: var(--meter); height: 0; } .progress { display: flex; gap: 8px; align-items: center; margin: 0 0 12px; } .track-bar { flex: 1; height: 14px; background: var(--sunken); border: 1px solid var(--frame); cursor: pointer; position: relative; touch-action: none; } .track-bar i { display: block; height: 100%; width: 0; background: var(--accent); } .controls { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0 0 var(--line-h); } .controls .vol { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; } .controls .vol .button::before, .controls .vol .button::after { content: ""; } .controls .vol .button { min-width: 2em; text-align: center; } /* Вкладки видов — как пункты меню: инверсия выбранного. */ .tabs { display: flex; gap: 0 var(--ui); border-bottom: 1px solid var(--line); margin: 0 0 8px; flex-wrap: wrap; } .tabs a { color: var(--text); text-decoration: none; padding: 0 6px; } /* В окне горячая буква — цветом акцента: тёмно-красный с панелей на синем окне пропадает. */ .tabs a em { font-style: normal; color: var(--accent); } .tabs a.current, .tabs a:hover { background: var(--text); color: var(--win); } .tabs a.current em, .tabs a:hover em { color: var(--win); } .view { min-height: calc(var(--line-h) * 17); } /* ── Паттерн ─────────────────────────────────────────────────────────── */ .pat-nav { display: flex; gap: 8px; align-items: center; margin: 0 0 4px; } .pat-nav .spacer { flex: 1; } .pat-nav .button::before, .pat-nav .button::after { content: ""; } .pattern { white-space: pre; overflow: hidden; font-variant-ligatures: none; line-height: var(--line-h); background: var(--sunken); border: 1px solid var(--line); padding: 0 4px; } .pattern .hdr { color: var(--muted); border-bottom: 1px solid var(--line); } .pattern .vu-cell { display: inline-block; vertical-align: middle; height: 6px; } .pattern .vu { display: block; height: 100%; width: 0; background: var(--meter); } .pattern .row.beat { background: var(--pat-beat); } .pattern .row.cur { background: var(--accent); } .pattern .row.cur span { color: var(--accent-fg) !important; } .pattern .row.gap { color: var(--pat-dim); } .pattern .rn { color: var(--muted); } .pattern .n { color: var(--pat-note); } .pattern .i { color: var(--pat-inst); } .pattern .v, .pattern .u { color: var(--pat-vol); } .pattern .e { color: var(--pat-fx); } .pattern .f { color: var(--pat-param); } .pattern .d { color: var(--pat-dim); } .pattern .sep { color: var(--line); } /* ── Записка ─────────────────────────────────────────────────────────── */ .view-notes { white-space: pre-wrap; overflow-wrap: anywhere; } .view-notes h2:first-child { margin-top: 0; } .view-notes .facts { display: grid; grid-template-columns: max-content 1fr; gap: 0 12px; margin: 0 0 var(--line-h); white-space: normal; } .view-notes .facts dt { color: var(--muted); } .view-notes .facts dd { margin: 0; } .view-notes pre { font: inherit; margin: 0 0 var(--line-h); white-space: pre-wrap; } /* ── Избранное ───────────────────────────────────────────────────────── */ .fav-head { display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; margin: 0 0 8px; } .fav-head .spacer { flex: 1; } .fav-list { border: 1px solid var(--line); background: var(--sunken); max-height: calc(var(--line-h) * 14); overflow-y: auto; outline: none; } .fav-row { display: grid; grid-template-columns: 2ch minmax(0, 3fr) minmax(0, 2fr) 6ch 4ch 6ch; gap: 0 12px; padding: 0 6px; cursor: pointer; white-space: nowrap; } .fav-row > span { overflow: hidden; text-overflow: ellipsis; } .fav-row.head { color: var(--muted); cursor: default; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--sunken); } .fav-row.sel { background: var(--accent); color: var(--accent-fg); } .fav-row.playing .mark::before { content: "♪"; } .fav-empty { padding: 4px 8px; margin: 0; } .fav-card { margin-top: 8px; min-height: calc(var(--line-h) * 3); } .fav-card .button { margin-right: 8px; } /* ── Учётка ──────────────────────────────────────────────────────────── */ .inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; margin: 0 0 8px; } .invite-new { background: var(--sunken); border: 1px solid var(--line); padding: 4px 8px; overflow-wrap: anywhere; } .plain-table { border-collapse: collapse; width: 100%; } .plain-table td, .plain-table th { font: inherit; text-align: left; padding: 0 12px 0 0; vertical-align: top; } .plain-table th { color: var(--muted); } /* ── Запуск ──────────────────────────────────────────────────────────── */ /* Первый звук — только по нажатию: так требуют браузеры. Заставка лежит поверх вида, пока его нечем заполнить. */ .start { position: absolute; inset: auto 12px var(--line-h) 12px; top: calc(var(--line-h) * 9); background: var(--win); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; border: 1px solid var(--line); padding: 12px; } .start p { max-width: 36rem; margin: 0; } /* ── История ─────────────────────────────────────────────────────────── */ .hist { list-style: none; margin: 0 0 var(--line-h); padding: 0; } .hist li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hist li.cur { background: var(--accent); color: var(--accent-fg); } .hist li .muted { margin-left: 6px; } .hist-next-h { margin: 0 0 4px; } /* ── Строка состояния ────────────────────────────────────────────────── */ .statusbar { position: sticky; bottom: 0; background: var(--bar); color: var(--bar-text); border-top: 1px solid var(--frame); padding: 2px 8px; padding-bottom: max(2px, env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; gap: 0 var(--ui); } .statusbar .spacer { flex: 1; } .statusbar .cveta button { font: inherit; color: var(--bar-text); background: none; border: none; padding: 0; cursor: pointer; opacity: .7; } .statusbar .cveta button:hover, .statusbar .cveta button:focus-visible { opacity: 1; text-decoration: underline; } .statusbar .version, .statusbar .tishina { color: var(--bar-text); opacity: .7; } .statusbar .keys { display: flex; flex-wrap: wrap; gap: 0 var(--ui); } .statusbar .keys b { color: var(--accel); font-weight: normal; } #st-msg.warn { color: var(--accel); } /* ── Окно подсказки ──────────────────────────────────────────────────── */ .dialog { padding: 0; color: var(--text); max-width: 40rem; } .dialog::backdrop { background: rgb(0 0 0 / .35); } .keys-table td { padding: 0 16px 0 0; vertical-align: top; } .keys-table td:first-child { color: var(--accent); white-space: nowrap; } /* ── Удалённый терминал ──────────────────────────────────────────────── */ @media (max-width: 40rem) { main { padding: 8px 0 var(--line-h); } .window { border-left: none; border-right: none; } .win-body { padding: 12px 8px; } .menubar, .statusbar { gap: 0 12px; } .statusbar .keys, .statusbar .version { display: none; } .now { flex-direction: column; align-items: stretch; gap: 8px; } .meters { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: end; } .lr { margin: 0; } .spectrum { height: 32px; } .controls { gap: 8px; } .controls .button { padding: 6px 8px; } .controls #b-page { display: none; } .fav-row { grid-template-columns: 2ch minmax(0, 1fr) 4ch 5ch; gap: 0 8px; } .fav-row > .c-artist, .fav-row > .c-ch { display: none; } .start { top: calc(var(--line-h) * 12); } }