/* Две темы. Тёмная по умолчанию: сервис смотрят с телефона и вечером, а на ночном поиске светлый экран в лесу слепит. Выбор запоминается в браузере и ставится на ещё до отрисовки (см. index.html), иначе светлая тема моргала бы тёмным фоном при каждой загрузке. Цвета заданы только здесь, значениями переменных: тогда светлая тема — это один блок, а не правка каждого правила. */ :root, :root[data-theme="dark"] { --bg: #0e1420; --card: #151d2b; --line: #253145; --txt: #e8edf5; --dim: #8a97ab; --accent: #4aa3ff; --green: #34c77b; --red: #ff6b6b; --warn: #ffb454; --onAccent: #04121f; --shadow: none; } :root[data-theme="light"] { --bg: #f0f4fb; --card: #ffffff; --line: #dde5f2; --txt: #0f172a; --dim: #4a6280; --accent: #2563eb; --green: #16a34a; --red: #dc2626; --warn: #b45309; --onAccent: #ffffff; --shadow: 0 1px 3px rgba(15,23,42,.06); } * { box-sizing: border-box; } body { margin: 0; padding: 16px; background: var(--bg); color: var(--txt); font: 15px/1.5 -apple-system, "Segoe UI", Roboto, sans-serif; } h1 { font-size: 20px; margin: 0; } h2 { font-size: 15px; margin: 0 0 10px; color: var(--dim); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; } header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .who { display: flex; align-items: center; gap: 8px; color: var(--dim); font-size: 13px; } .card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-bottom: 14px; max-width: 760px; box-shadow: var(--shadow); } label { display: block; margin-bottom: 10px; color: var(--dim); font-size: 12px; } input, textarea { width: 100%; margin-top: 4px; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg); color: var(--txt); font: inherit; font-size: 14px; } textarea { resize: vertical; } small { display: block; margin-top: 3px; color: var(--dim); } .row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; } .row > label { flex: 1; min-width: 220px; } button { padding: 9px 16px; border: none; border-radius: 9px; background: var(--accent); color: var(--onAccent); font: inherit; font-weight: 700; cursor: pointer; } button.ghost { background: transparent; border: 1px solid var(--line); color: var(--dim); } button.ghost.on { color: var(--green); border-color: var(--green); } button:disabled { opacity: .55; cursor: default; } .targets { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; } .chip { display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 5px 10px; border: 1px solid var(--line); border-radius: 20px; color: var(--txt); font-size: 13px; cursor: pointer; } .chip input { width: auto; margin: 0; } .msg { color: var(--green); font-size: 13px; } .msg.err { color: var(--red); } .list { display: flex; flex-direction: column; gap: 10px; } .item { border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px; } .item .head { display: flex; justify-content: space-between; gap: 10px; align-items: center; } .item p { margin: 6px 0 0; white-space: pre-wrap; } .meta { margin-top: 7px; color: var(--dim); font-size: 12px; } .wait { color: var(--accent); } .off { color: var(--red); } .muted { color: var(--dim); } .auth { max-width: 320px; margin: 12vh auto; } /* Поиски */ .hint { margin: 0 0 10px; color: var(--dim); font-size: 13px; } .hint.warn { color: var(--warn); } label.narrow { flex: 0 0 150px; min-width: 130px; } select { width: 100%; margin-top: 4px; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg); color: var(--txt); font: inherit; font-size: 14px; } .item.done { opacity: .6; } .item .place { margin-top: 4px; font-size: 14px; } .tag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; white-space: nowrap; } .tag.live { color: var(--green); background: color-mix(in srgb, var(--green) 16%, transparent); } .tag.off { color: var(--red); background: color-mix(in srgb, var(--red) 16%, transparent); } .meta a { color: var(--accent); text-decoration: none; } .ex { color: var(--dim); font-weight: 400; opacity: .75; } .acts { display: inline-flex; gap: 6px; margin-left: auto; } .item .acts button { padding: 3px 9px; font-size: 11px; } #team .item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .logrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; } #log h3 { font-size: 13px; margin: 12px 0 2px; color: var(--txt); } #logPick { max-width: 420px; margin-bottom: 6px; } /* Права: раздел — строка, роль — столбец. Читается как список разделов, а не как матрица: столбцов два, и глазу проще идти сверху вниз. */ table.rights { width: 100%; border-collapse: collapse; font-size: 13px; } table.rights th { text-align: center; padding: 0 0 8px; color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; } table.rights th:first-child { text-align: left; } table.rights td { padding: 9px 0; border-top: 1px solid var(--line); vertical-align: middle; } table.rights td:not(:first-child) { text-align: center; width: 92px; } table.rights td b { display: block; font-weight: 600; } table.rights td .muted { font-size: 12px; } /* Попасть пальцем в саму галочку трудно, поэтому нажимается вся ячейка. */ .tick { display: block; margin: 0; padding: 2px; cursor: pointer; } .tick input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); cursor: pointer; } #team select.role { width: auto; margin: 0; padding: 3px 8px; font-size: 12px; } /* Шестерёнка: редкие действия — тема, пароль, выход. */ .gearwrap { position: relative; } #gear, #bell { font-size: 15px; line-height: 1; padding: 8px 11px; } /* Перечёркнутый колокольчик приглушён, целый — зелёный (button.ghost.on). */ #bell:not(.on) { opacity: .8; } .menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; width: 250px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: 0 8px 28px rgba(0,0,0,.35); text-align: left; } .menu h3 { margin: 12px 0 8px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 11px; font-weight: 700; color: var(--dim); text-transform: uppercase; letter-spacing: .5px; } .menu button.wide { display: block; width: 100%; } /* Выход отодвинут: нажать его случайно, метя в «сменить», обидно. */ .menu #pwBlock { padding-bottom: 14px; border-bottom: 1px solid var(--line); } .menu #out { margin-top: 14px; } .menu label { margin-bottom: 8px; } .menu .msg { display: block; margin-top: 8px; }