Files
schedule/src/frontend/static/style.css
Vladislav Kopnin f635272128 Аудитории: пометка про дни — просто жёлтым текстом
- убрана подсказка «С ограничением по дням: N» из панели фильтров;
- в карточке убран префикс «в таблице:» — осталось «занятия только по
  четвергам и пятницам», выделенное жёлтым (в тёмной теме — светлее);
- класс .room-note.bad больше не использовался, удалён.
2026-10-10 13:17:45 +03:00

811 lines
18 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

:root {
--bg: #f1f5f9;
--surface: #ffffff;
--surface-2: #f7fafc;
--surface-3: #eef2f8;
--border: #dde5ef;
--border-2: #c3d1e2;
--text: #17223a;
--muted: #57677f;
--muted-2: #8c9bb0;
--nav-1: #1b2dd8;
--nav-2: #167cf2;
--accent: #0241e3;
--accent-blue: #1f4fd0;
--accent-red: #d01838;
--accent-red-bright: #e61d43;
--accent-blue-bg: #e5ecfc;
--on-accent: #ffffff;
--error-bg: #fbe9ea;
--error-border: #f3c1c5;
--error-text: #b00d15;
--shadow: rgba(10, 50, 110, 0.12);
--badge-ch-bg: #e3ebfc;
--badge-ch-text: #1f4fd0;
--badge-zn-bg: #fbe3e7;
--badge-zn-text: #c40f30;
--badge-kv-bg: #edf1f7;
--badge-kv-text: #43536b;
--badge-always-bg: #e6edf6;
--badge-always-text: #2e3d55;
--badge-ch-active-bg: linear-gradient(90deg, #1b2dd8, #167cf2);
--badge-ch-active-text: #ffffff;
--badge-zn-active-bg: #e61d43;
--badge-zn-active-text: #ffffff;
}
[data-theme="dark"] {
--bg: #0a1120;
--surface: #111a2e;
--surface-2: #16223a;
--surface-3: #1d2e4c;
--border: #25375a;
--border-2: #3a4f78;
--text: #e7eef8;
--muted: #96adca;
--muted-2: #647e9f;
--nav-1: #1d2f72;
--nav-2: #1358b0;
--accent: #5ba3f7;
--accent-blue: #86b8ff;
--accent-red: #e96a7e;
--accent-red-bright: #ff6b7f;
--accent-blue-bg: #1a2d52;
--on-accent: #ffffff;
--error-bg: #4d1c22;
--error-border: #7c2a34;
--error-text: #ffc2c9;
--shadow: rgba(0, 0, 0, 0.45);
--badge-ch-bg: #1a2c55;
--badge-ch-text: #8cb8ff;
--badge-zn-bg: #54222d;
--badge-zn-text: #ff9dae;
--badge-kv-bg: #1e2c43;
--badge-kv-text: #b6c6da;
--badge-always-bg: #23314d;
--badge-always-text: #d9e3f0;
--badge-ch-active-bg: #3d86f2;
--badge-ch-active-text: #ffffff;
--badge-zn-active-bg: #ff6479;
--badge-zn-active-text: #ffffff;
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: Roboto, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
background: var(--bg);
color: var(--text);
-webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-red); }
/* ---- Верхняя белая полоса с цветной совой (как на сайте) ---- */
.topbar {
background: var(--surface);
border-bottom: 1px solid var(--border);
padding: 8px 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
position: sticky;
top: 0;
z-index: 20;
}
.topbar-brand {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.topbar-brand > a { display: inline-flex; }
.topbar-logo {
display: block;
width: 46px;
height: 46px;
flex-shrink: 0;
}
.topbar-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.topbar-university {
color: var(--text);
font-size: 14px;
font-weight: 700;
}
.topbar-university:hover { color: var(--accent-red); }
.topbar-faculty {
color: var(--muted);
font-size: 13px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.topbar-faculty:hover { color: var(--accent-red); }
.theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border: 1px solid var(--border-2);
background: var(--surface);
color: var(--muted);
cursor: pointer;
flex-shrink: 0;
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
/* ---- кнопки в шапке: админка и выход ---- */
.topbar-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.topbar-admin {
display: inline-flex;
align-items: center;
height: 36px;
padding: 0 14px;
border: 1px solid var(--accent);
background: var(--accent);
color: var(--on-accent);
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: background .15s ease, border-color .15s ease;
}
.topbar-admin:hover { background: var(--accent-blue); border-color: var(--accent-blue); }
/* красная кнопка выхода: при наведении темнеет, как остальные кнопки */
.topbar-logout {
display: inline-flex;
align-items: center;
height: 36px;
padding: 0 14px;
border: 1px solid var(--accent-red-bright);
background: var(--accent-red-bright);
color: #fff;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background .15s ease, border-color .15s ease;
}
.topbar-logout:hover { background: var(--accent-red); border-color: var(--accent-red); }
.theme-toggle .icon { width: 18px; height: 18px; }
.icon-sun { display: none; }
.icon-moon { display: block; }
[data-theme="dark"] .icon-sun { display: block; }
[data-theme="dark"] .icon-moon { display: none; }
/* ---- Двухколоночный layout: синяя панель + контент ---- */
.layout {
display: flex;
align-items: stretch;
min-height: calc(100vh - 63px);
}
.side {
width: 300px;
flex-shrink: 0;
background: linear-gradient(to bottom, var(--nav-1), var(--nav-2));
color: var(--on-accent);
display: flex;
flex-direction: column;
padding: 26px 22px 22px;
position: sticky;
top: 63px;
align-self: flex-start;
height: calc(100vh - 63px);
}
.side-head { text-align: center; padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.22); }
.side-logo-link { display: inline-block; }
.side-logo { width: 92px; height: 92px; }
.side-name {
margin-top: 12px;
font-size: 17px;
font-weight: 600;
line-height: 1.25;
}
.side-nav {
padding: 18px 0;
flex: 1;
}
.side-menu {
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: 16px;
}
.side-menu a {
display: block;
color: rgba(255, 255, 255, 0.9);
font-size: 15px;
font-weight: 600;
line-height: 1.3;
padding: 8px 10px;
border-left: 3px solid transparent;
}
.side-menu a:hover { color: #ffffff; background: rgba(0, 0, 0, 0.12); }
.side-menu a.active {
color: #ffffff;
background: rgba(0, 0, 0, 0.2);
border-left-color: #ffffff;
}
.side-label {
text-transform: uppercase;
font-size: 12px;
letter-spacing: 1px;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 8px;
}
#group-select {
width: 100%;
font-size: 16px;
font-weight: 500;
padding: 9px 10px;
border: none;
background: #ffffff;
color: #141c2b;
cursor: pointer;
}
#group-select option { background: #ffffff; color: #141c2b; }
[data-theme="dark"] #group-select {
background: rgba(10, 19, 40, 0.6);
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.35);
}
[data-theme="dark"] #group-select option {
background: var(--surface-3);
color: var(--text);
}
.side-footer {
border-top: 1px solid rgba(255, 255, 255, 0.22);
padding-top: 14px;
display: flex;
flex-direction: column;
gap: 6px;
font-size: 14px;
}
.side-footer a { color: rgba(255, 255, 255, 0.92); }
.side-footer a:hover { color: #ffffff; text-decoration: underline; }
main {
flex: 1;
min-width: 0;
padding: 26px 28px 40px;
}
.schedule { max-width: 900px; }
.schedule-title {
font-size: 22px;
font-weight: 700;
color: var(--text);
margin-bottom: 2px;
}
.schedule-title .badge { margin-left: 10px; font-size: 13px; vertical-align: middle; }
.schedule-meta { color: var(--muted); font-size: 14px; margin-bottom: 10px; }
.schedule-status {
display: flex;
justify-content: flex-start;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 18px;
}
.status-chip {
flex: 1 1 0;
min-width: 170px;
min-height: 54px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 3px;
padding: 8px 12px;
background: var(--surface-2);
border: 1px solid var(--border);
box-sizing: border-box;
}
.status-chip.current-week { align-items: flex-start; }
.status-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--muted);
}
.status-value {
font-size: 14px;
font-weight: 600;
color: var(--text);
}
.status-chip.error {
background: color-mix(in srgb, var(--accent-red-bright) 12%, var(--surface-2));
border-color: var(--accent-red-bright);
}
.status-chip.error .status-value {
color: var(--accent-red-bright);
font-size: 13px;
line-height: 1.3;
word-break: break-word;
}
.current-week .badge { margin-right: 0; font-size: 12px; }
.day-block {
background: var(--surface);
border: 1px solid var(--border);
margin-bottom: 14px;
}
.day-block.today {
border-color: var(--accent-red-bright);
box-shadow: inset 3px 0 0 var(--accent-red-bright);
}
.day-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 14px;
border-bottom: 1px solid var(--border);
background: var(--surface-2);
}
.day-title { font-size: 15px; font-weight: 700; text-transform: capitalize; color: var(--text); }
.today-badge {
background: var(--accent-red-bright);
color: #ffffff;
font-size: 11px;
font-weight: 700;
padding: 2px 8px;
letter-spacing: 0.4px;
}
.period {
padding: 8px 14px;
display: grid;
grid-template-columns: 96px minmax(0, 1fr);
gap: 14px;
border-bottom: 1px solid var(--border);
}
.period:last-child { border-bottom: none; }
.period-num { font-weight: 700; color: var(--text); }
.period-time { font-size: 13px; color: var(--muted); margin-top: 2px; }
.parities {
display: flex;
gap: 10px;
align-items: stretch;
}
.parity-col {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.parity-col .lesson {
margin-bottom: 0;
flex: 1 1 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.parity-col .window { justify-content: center; text-align: center; }
@media (max-width: 1023px) {
.parities { flex-direction: column; }
}
.lesson {
border: 1px solid var(--border);
padding: 7px 11px;
background: var(--surface-2);
min-width: 0;
/* длинные ссылки/слова переносятся, а не растягивают карточку на телефоне */
word-break: break-word;
overflow-wrap: anywhere;
}
.lesson:hover { border-color: var(--accent); }
.lesson .subject { font-weight: 700; font-size: 14px; }
.lesson .details { font-size: 13px; color: var(--muted); margin-top: 1px; }
.badge {
display: inline-block;
font-size: 11px;
font-weight: 700;
padding: 2px 8px;
margin-right: 6px;
vertical-align: 1px;
}
.badge-ch { background: var(--badge-ch-bg); color: var(--badge-ch-text); }
.badge-zn { background: var(--badge-zn-bg); color: var(--badge-zn-text); }
.badge-kv { background: var(--badge-kv-bg); color: var(--badge-kv-text); }
.badge-always { background: var(--badge-always-bg); color: var(--badge-always-text); }
.badge-ch.active { background: var(--badge-ch-active-bg); color: var(--badge-ch-active-text); }
.badge-zn.active { background: var(--badge-zn-active-bg); color: var(--badge-zn-active-text); }
.lesson.full { grid-column: 1 / -1; }
.empty-day { color: var(--muted-2); font-size: 14px; padding: 10px 14px; }
.lesson.empty {
grid-column: 1 / -1;
text-align: center;
color: var(--muted);
background: var(--surface-3);
border: 1px dashed var(--border-2);
font-weight: 600;
padding: 10px;
}
.window {
border-style: dashed;
color: var(--muted-2);
background: var(--surface);
text-align: center;
}
/* ---- поиск свободной аудитории ---- */
.free-widget {
background: var(--surface-2);
border: 1px solid var(--border);
padding: 12px 14px;
margin-bottom: 18px;
}
.free-title {
font-size: 16px;
font-weight: 700;
margin-bottom: 8px;
}
.free-controls {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.free-hint { font-size: 13px; color: var(--muted); }
.free-controls select {
font-size: 14px;
padding: 6px 8px;
border: 1px solid var(--border-2);
background: var(--surface);
color: var(--text);
}
.free-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 8px;
}
.free-item {
text-align: left;
display: flex;
flex-direction: column;
gap: 2px;
padding: 8px 10px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
cursor: pointer;
font-family: inherit;
}
.free-item:hover { border-color: var(--accent); }
.free-room { font-weight: 700; }
.free-info { font-size: 12px; color: var(--muted); }
.free-loading, .free-none { color: var(--muted); font-size: 14px; padding: 6px 0; }
.error {
background: var(--error-bg);
color: var(--error-text);
border: 1px solid var(--error-border);
padding: 12px 16px;
margin-bottom: 16px;
}
.loading { color: var(--muted); text-align: center; padding: 30px; }
.hidden { display: none; }
/* ---- Мобильная версия: панель сверху ---- */
@media (max-width: 860px) {
.layout { flex-direction: column; }
.side {
width: 100%;
position: static;
height: auto;
padding: 14px 16px;
flex-direction: row;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.side-head {
text-align: left;
display: flex;
align-items: center;
gap: 10px;
padding-bottom: 0;
border-bottom: none;
}
.side-logo { width: 52px; height: 52px; }
.side-name { margin-top: 0; font-size: 15px; }
.side-nav { padding: 0; flex: 1; min-width: 180px; }
.side-label { display: none; }
.side-footer { display: none; }
.side-menu {
flex-direction: row;
flex-wrap: wrap;
margin-bottom: 0;
}
.side-menu a {
border-left: none;
border-bottom: 2px solid transparent;
padding: 6px 8px;
font-size: 13px;
}
.side-menu a.active { border-bottom-color: #ffffff; }
main { padding: 16px 12px 30px; }
.period { grid-template-columns: 80px minmax(0, 1fr); gap: 10px; }
}
/* ---- занятость аудиторий по дню ---- */
.rooms-controls {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
}
.rooms-controls select {
font-size: 15px;
padding: 6px 10px;
border: 1px solid var(--border-2);
background: var(--surface);
color: var(--text);
}
.rooms-scroll { overflow-x: auto; }
.rooms-table {
border-collapse: collapse;
width: 100%;
min-width: 640px;
table-layout: fixed;
background: var(--surface);
font-size: 13px;
}
.rooms-table th:first-child,
.rooms-table td:first-child { width: 170px; }
.rooms-table th,
.rooms-table td {
border: 1px solid var(--border);
padding: 6px 9px;
text-align: left;
vertical-align: top;
}
.rooms-table th {
background: var(--surface-3);
font-size: 12px;
font-weight: 700;
color: var(--text);
white-space: nowrap;
}
.r-name {
font-weight: 700;
width: 170px;
overflow-wrap: anywhere;
}
.r-name-info { font-weight: 400; color: var(--muted); font-size: 12px; margin-top: 2px; line-height: 1.35; }
.r-cell { min-width: 90px; }
.r-cell.r-free {
background: var(--surface);
color: var(--muted-2);
text-align: center;
}
.r-cell.r-busy { background: var(--badge-ch-bg); }
.r-subj { font-weight: 600; color: var(--text); line-height: 1.3; }
/* ---- аудитории: список карточками (мобильная версия) ---- */
.rooms-list { display: flex; flex-direction: column; }
/* ---- фильтры аудиторий ---- */
.rooms-filters {
background: var(--surface);
border: 1px solid var(--border);
padding: 12px 14px;
margin-bottom: 12px;
display: flex;
flex-direction: column;
gap: 10px;
}
.rf-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.rf-tabs { align-items: center; }
.rf-tab {
font-size: 14px;
font-weight: 600;
padding: 7px 12px;
cursor: pointer;
border: 1px solid var(--border-2);
background: var(--surface-2);
color: var(--text);
}
.rf-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.rf-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 0 1 260px; }
.rf-field > span { font-size: 12px; color: var(--muted); }
.rf-field select,
.rf-field input {
font-size: 14px;
padding: 7px 9px;
border: 1px solid var(--border-2);
background: var(--surface-2);
color: var(--text);
width: 100%;
min-width: 0;
}
.rf-narrow { flex: 0 1 170px; }
.rf-equip { display: flex; flex-wrap: wrap; gap: 8px 16px; padding-top: 2px; }
.rf-check { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text); cursor: pointer; }
.rf-actions { justify-content: space-between; align-items: baseline; }
.rf-reset {
font-size: 13px;
padding: 7px 10px;
cursor: pointer;
border: 1px solid var(--border-2);
background: var(--surface-2);
color: var(--text);
}
.rf-summary { font-size: 13px; color: var(--muted); }
.rf-hint { font-size: 12px; color: #b8860b; }
.rooms-empty {
background: var(--surface);
border: 1px dashed var(--border-2);
padding: 18px;
color: var(--muted);
font-size: 14px;
}
.room-card-free { padding-bottom: 12px; }
.room-attrs { font-size: 13px; font-weight: 600; color: var(--text); margin-top: 3px; }
.room-note { font-size: 12px; color: var(--muted); margin-top: 2px; }
/* пометка про дни доступности — заметная, жёлтым */
.room-note.days { color: #b8860b; font-weight: 600; }
[data-theme="dark"] .room-note.days { color: #e8b339; }
.room-free-note { font-size: 13px; color: var(--muted); margin-top: 10px; }
.room-card {
background: var(--surface);
border: 1px solid var(--border);
padding: 14px;
margin-bottom: 12px;
min-width: 0;
word-break: break-word;
overflow-wrap: anywhere;
}
.room-title { line-height: 1.3; }
.room-info {
color: var(--muted);
font-size: 12px;
margin-top: 2px;
}
.room-row {
display: grid;
grid-template-columns: 96px minmax(0, 1fr);
gap: 12px;
padding: 10px 0;
border-top: 1px solid var(--border);
align-items: center;
}
.room-row-num { font-weight: 700; color: var(--text); }
.room-row-body { min-width: 0; }
.room-lesson {
font-weight: 600;
font-size: 14px;
color: var(--text);
margin-bottom: 6px;
}
.room-lesson:last-child { margin-bottom: 0; }
.lesson-note {
color: var(--accent-red-bright);
font-size: 12px;
font-weight: 600;
margin-top: 4px;
white-space: pre-line;
}