370 lines
6.6 KiB
CSS
370 lines
6.6 KiB
CSS
.page {
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
}
|
|
|
|
.narrow {
|
|
max-width: 720px;
|
|
}
|
|
|
|
.head {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.head h1 {
|
|
margin: 0;
|
|
font-family: var(--font-display);
|
|
font-size: 28px;
|
|
font-weight: 600;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.subtitle {
|
|
margin: 6px 0 0;
|
|
color: var(--text2);
|
|
}
|
|
|
|
.section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
padding: 24px;
|
|
border-radius: var(--radius-lg);
|
|
background: var(--surface-a);
|
|
border: 1px solid var(--line);
|
|
}
|
|
|
|
.section h2 {
|
|
margin: 0;
|
|
font-size: 17px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.section form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.row > :first-child {
|
|
flex: 1;
|
|
min-width: 220px;
|
|
}
|
|
|
|
.settingRow {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.ok {
|
|
color: var(--ok);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.search {
|
|
position: relative;
|
|
flex: 1;
|
|
min-width: 220px;
|
|
max-width: 360px;
|
|
}
|
|
|
|
.search input {
|
|
width: 100%;
|
|
height: 40px;
|
|
padding: 0 12px 0 38px;
|
|
border-radius: 10px;
|
|
border: 1px solid var(--line);
|
|
background: var(--surface2);
|
|
color: var(--text);
|
|
font: inherit;
|
|
outline: none;
|
|
}
|
|
|
|
.search input:focus {
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 0 3px var(--accent-soft);
|
|
}
|
|
|
|
.searchIcon {
|
|
position: absolute;
|
|
left: 12px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: var(--text3);
|
|
}
|
|
|
|
.chips {
|
|
display: flex;
|
|
gap: 6px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.chip {
|
|
height: 32px;
|
|
padding: 0 14px;
|
|
border-radius: var(--radius-pill);
|
|
border: 1px solid var(--line);
|
|
background: var(--surface2);
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--text2);
|
|
}
|
|
|
|
.chip[aria-pressed='true'] {
|
|
background: var(--accent-soft);
|
|
border-color: var(--accent);
|
|
color: var(--text);
|
|
}
|
|
|
|
.tableWrap {
|
|
border-radius: var(--radius-lg);
|
|
border: 1px solid var(--line);
|
|
background: var(--surface-a);
|
|
}
|
|
|
|
/* Горизонтальная прокрутка только там, где таблица не помещается: она обрезала бы меню действий. */
|
|
@media (max-width: 900px) {
|
|
.tableWrap {
|
|
overflow-x: auto;
|
|
}
|
|
}
|
|
|
|
.table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.table th {
|
|
height: 44px;
|
|
padding: 0 16px;
|
|
text-align: left;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--text3);
|
|
border-bottom: 1px solid var(--line);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.table td {
|
|
height: 60px;
|
|
padding: 0 16px;
|
|
border-bottom: 1px solid var(--line);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.table tr:last-child td {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.table tbody tr:hover {
|
|
background: var(--hover);
|
|
}
|
|
|
|
.userCell {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
min-width: 200px;
|
|
}
|
|
|
|
.userName {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.userLogin {
|
|
font-size: 12px;
|
|
color: var(--text3);
|
|
}
|
|
|
|
.you {
|
|
margin-left: 6px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: var(--text3);
|
|
}
|
|
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
height: 24px;
|
|
padding: 0 10px;
|
|
border-radius: var(--radius-pill);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.role_admin {
|
|
background: var(--violet-soft);
|
|
color: var(--violet);
|
|
}
|
|
|
|
.role_moderator {
|
|
background: var(--accent-soft);
|
|
color: var(--accent2);
|
|
}
|
|
|
|
.role_user {
|
|
background: var(--hover);
|
|
color: var(--text2);
|
|
}
|
|
|
|
.status {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.status::before {
|
|
content: '';
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
background: currentColor;
|
|
}
|
|
|
|
.status_active {
|
|
color: var(--ok);
|
|
}
|
|
|
|
.status_blocked {
|
|
color: var(--danger);
|
|
}
|
|
|
|
.status_must_change {
|
|
color: var(--warn);
|
|
}
|
|
|
|
.muted {
|
|
color: var(--text3);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.empty {
|
|
padding: 40px 16px;
|
|
text-align: center;
|
|
color: var(--text3);
|
|
}
|
|
|
|
.more {
|
|
align-self: center;
|
|
}
|
|
|
|
.mono {
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
.secret {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 14px 16px;
|
|
border-radius: var(--radius-md);
|
|
background: var(--surface2);
|
|
border: 1px dashed var(--line2);
|
|
font-family: var(--font-mono);
|
|
font-size: 18px;
|
|
letter-spacing: 0.04em;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.select {
|
|
height: 48px;
|
|
padding: 0 12px;
|
|
border-radius: var(--radius-md);
|
|
border: 1px solid var(--line2);
|
|
background: var(--surface2);
|
|
color: var(--text);
|
|
font: inherit;
|
|
}
|
|
|
|
.note {
|
|
margin: 0;
|
|
font-size: 13px;
|
|
color: var(--text2);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.sessions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.session {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 12px 14px;
|
|
border-radius: var(--radius-md);
|
|
background: var(--surface2);
|
|
}
|
|
|
|
.sessionMeta {
|
|
font-size: 12px;
|
|
color: var(--text3);
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.page, .section, .head > *, .toolbar > *, .settingRow > * { min-width: 0; max-width: 100%; }
|
|
.page { gap: 20px; overflow-wrap: anywhere; }
|
|
.head h1 { font-size: 24px; }
|
|
.section { padding: 16px; }
|
|
.row > :first-child, .search { min-width: 0; flex-basis: 100%; max-width: none; }
|
|
.settingRow { align-items: flex-start; gap: 10px; }
|
|
.settingRow > :first-child { flex-basis: 100%; }
|
|
.actions { flex-wrap: wrap; justify-content: flex-start; }
|
|
.actions > * { flex: 1 1 auto; }
|
|
.chip { min-height: 44px; height: auto; padding: 8px 14px; }
|
|
.select { max-width: 100%; min-width: 0; font-size: 16px; }
|
|
.session { flex-wrap: wrap; overflow-wrap: anywhere; }
|
|
.tableWrap { min-width: 0; max-width: 100%; }
|
|
.mobileCards, .mobileCards tbody { display: block; }
|
|
.mobileCards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
|
|
.mobileCards tr { display: flex; flex-direction: column; padding: 14px; border-bottom: 1px solid var(--line); gap: 12px; }
|
|
.mobileCards tr:last-child { border-bottom: 0; }
|
|
.mobileCards td { display: flex; flex-wrap: wrap; gap: 6px 10px; height: auto; padding: 0; border: 0; white-space: normal; }
|
|
.mobileCards td::before { content: attr(data-label); flex-basis: 100%; font-size: 12px; color: var(--text3); }
|
|
.mobileCards .userCell { min-width: 0; }
|
|
.mobileCards .userCell > div { min-width: 0; overflow-wrap: anywhere; }
|
|
.mobileCards .cardAction { align-self: flex-end; }
|
|
.cardAction::before { display: none; }
|
|
}
|