auto-sync 2026-05-22 13:57:56
This commit is contained in:
korabayev
parent
15bd8e181d
commit
cb0bf80e2c
@ -283,3 +283,158 @@ table.data td {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
table.data tr:last-child td { border-bottom: 0; }
|
||||
|
||||
/* =========================
|
||||
Mobile / responsive
|
||||
========================= */
|
||||
@media (max-width: 880px) {
|
||||
main { padding: 20px 16px; }
|
||||
h1 { font-size: 19px; }
|
||||
.kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
|
||||
.grid-2-1, .grid-1-1 { grid-template-columns: 1fr; gap: 12px; }
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
main { padding: 16px 12px; }
|
||||
section { gap: 14px; }
|
||||
|
||||
/* Topbar: nav скроллится горизонтально, user на новую строку */
|
||||
.topbar {
|
||||
padding: 10px 12px;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
.brand { font-size: 15px; }
|
||||
.nav {
|
||||
order: 3;
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: none;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
.nav::-webkit-scrollbar { display: none; }
|
||||
.nav button {
|
||||
flex-shrink: 0;
|
||||
padding: 8px 14px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.user {
|
||||
margin-left: auto;
|
||||
font-size: 11px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
/* KPI 2 в ряд + меньшие значения */
|
||||
.kpi { padding: 14px 14px; }
|
||||
.kpi-label { font-size: 10px; letter-spacing: 0.08em; }
|
||||
.kpi-value { font-size: 22px; margin-top: 6px; }
|
||||
.kpi-grid, .kpi-3 { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
|
||||
|
||||
/* Cards: меньше отступы */
|
||||
.card { padding: 14px; border-radius: 10px; }
|
||||
|
||||
/* Touch-friendly inputs (iOS не зумит при 16px) */
|
||||
input[type="text"], input:not([type]), select {
|
||||
font-size: 16px;
|
||||
padding: 10px 12px;
|
||||
width: 100%;
|
||||
}
|
||||
.row.gap.wrap > input,
|
||||
.row.gap.wrap > select { flex: 1 1 100%; }
|
||||
.row.gap.wrap { gap: 8px; }
|
||||
|
||||
/* Buttons крупнее */
|
||||
button.btn-primary, button.btn-ghost {
|
||||
min-height: 42px;
|
||||
padding: 10px 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Email card: всё в колонку */
|
||||
.email {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 12px;
|
||||
padding: 14px;
|
||||
}
|
||||
.email > div:first-child {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.email .score-bar { flex: 1; margin-top: 0; }
|
||||
.email .actions {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
.email .actions .age,
|
||||
.email .actions .reco { flex-shrink: 0; }
|
||||
.email .preview {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Approval card: controls под content, кнопки full-width */
|
||||
.approval { grid-template-columns: 1fr; padding: 16px; }
|
||||
.approval .controls { min-width: 0; }
|
||||
.approval .controls button {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
font-size: 14px;
|
||||
min-height: 44px;
|
||||
}
|
||||
.approval .subject { font-size: 15px; }
|
||||
.approval .meta-row { gap: 10px; font-size: 11px; }
|
||||
.approval .ai-box { font-size: 12px; padding: 10px 12px; }
|
||||
.approval .summary { font-size: 13px; }
|
||||
|
||||
/* Таблицы: горизонтальный скролл */
|
||||
table.data { font-size: 12px; }
|
||||
table.data th, table.data td { padding: 8px 6px; }
|
||||
|
||||
/* Allocation легенда в 1 колонку */
|
||||
.alloc-legend { grid-template-columns: 1fr; }
|
||||
|
||||
/* Monthly chart меньше */
|
||||
.chart { height: 140px; }
|
||||
.chart .month { font-size: 9px; }
|
||||
|
||||
/* Brief: топ-3 чуть компактнее */
|
||||
.priorities li { padding: 10px; font-size: 13px; }
|
||||
.briefing { font-size: 13px; line-height: 1.6; }
|
||||
|
||||
/* Чипсы крупнее (тач) */
|
||||
.chip { font-size: 12px; padding: 6px 12px; min-height: 30px; }
|
||||
|
||||
/* AI-копилот ответ */
|
||||
.answer { font-size: 13px; padding: 12px 14px; }
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
/* Очень узкие — KPI один в ряд */
|
||||
.kpi-grid, .kpi-3 { grid-template-columns: 1fr !important; }
|
||||
.kpi-value { font-size: 24px; }
|
||||
.user .small { display: none; }
|
||||
.user .mono { font-size: 10px; }
|
||||
.topbar .install-btn { font-size: 11px; padding: 6px 10px; }
|
||||
/* Брифинг: header колонка */
|
||||
.row.spread.wrap { flex-direction: column; align-items: flex-start; }
|
||||
.row.spread.wrap > * { width: 100%; }
|
||||
}
|
||||
|
||||
/* Большие касательные таргеты для тач-устройств */
|
||||
@media (hover: none) and (pointer: coarse) {
|
||||
.nav button, .chip, .approval .controls button,
|
||||
button.btn-primary, button.btn-ghost {
|
||||
min-height: 40px;
|
||||
}
|
||||
/* убираем hover-only фокус-эффекты */
|
||||
.email:hover { border-color: var(--line); }
|
||||
}
|
||||
|
||||
155
index.html
155
index.html
@ -298,6 +298,161 @@ table.data td {
|
||||
}
|
||||
table.data tr:last-child td { border-bottom: 0; }
|
||||
|
||||
/* =========================
|
||||
Mobile / responsive
|
||||
========================= */
|
||||
@media (max-width: 880px) {
|
||||
main { padding: 20px 16px; }
|
||||
h1 { font-size: 19px; }
|
||||
.kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
|
||||
.grid-2-1, .grid-1-1 { grid-template-columns: 1fr; gap: 12px; }
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
main { padding: 16px 12px; }
|
||||
section { gap: 14px; }
|
||||
|
||||
/* Topbar: nav скроллится горизонтально, user на новую строку */
|
||||
.topbar {
|
||||
padding: 10px 12px;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
.brand { font-size: 15px; }
|
||||
.nav {
|
||||
order: 3;
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: none;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
.nav::-webkit-scrollbar { display: none; }
|
||||
.nav button {
|
||||
flex-shrink: 0;
|
||||
padding: 8px 14px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.user {
|
||||
margin-left: auto;
|
||||
font-size: 11px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
/* KPI 2 в ряд + меньшие значения */
|
||||
.kpi { padding: 14px 14px; }
|
||||
.kpi-label { font-size: 10px; letter-spacing: 0.08em; }
|
||||
.kpi-value { font-size: 22px; margin-top: 6px; }
|
||||
.kpi-grid, .kpi-3 { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
|
||||
|
||||
/* Cards: меньше отступы */
|
||||
.card { padding: 14px; border-radius: 10px; }
|
||||
|
||||
/* Touch-friendly inputs (iOS не зумит при 16px) */
|
||||
input[type="text"], input:not([type]), select {
|
||||
font-size: 16px;
|
||||
padding: 10px 12px;
|
||||
width: 100%;
|
||||
}
|
||||
.row.gap.wrap > input,
|
||||
.row.gap.wrap > select { flex: 1 1 100%; }
|
||||
.row.gap.wrap { gap: 8px; }
|
||||
|
||||
/* Buttons крупнее */
|
||||
button.btn-primary, button.btn-ghost {
|
||||
min-height: 42px;
|
||||
padding: 10px 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Email card: всё в колонку */
|
||||
.email {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 12px;
|
||||
padding: 14px;
|
||||
}
|
||||
.email > div:first-child {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.email .score-bar { flex: 1; margin-top: 0; }
|
||||
.email .actions {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
.email .actions .age,
|
||||
.email .actions .reco { flex-shrink: 0; }
|
||||
.email .preview {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Approval card: controls под content, кнопки full-width */
|
||||
.approval { grid-template-columns: 1fr; padding: 16px; }
|
||||
.approval .controls { min-width: 0; }
|
||||
.approval .controls button {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
font-size: 14px;
|
||||
min-height: 44px;
|
||||
}
|
||||
.approval .subject { font-size: 15px; }
|
||||
.approval .meta-row { gap: 10px; font-size: 11px; }
|
||||
.approval .ai-box { font-size: 12px; padding: 10px 12px; }
|
||||
.approval .summary { font-size: 13px; }
|
||||
|
||||
/* Таблицы: горизонтальный скролл */
|
||||
table.data { font-size: 12px; }
|
||||
table.data th, table.data td { padding: 8px 6px; }
|
||||
|
||||
/* Allocation легенда в 1 колонку */
|
||||
.alloc-legend { grid-template-columns: 1fr; }
|
||||
|
||||
/* Monthly chart меньше */
|
||||
.chart { height: 140px; }
|
||||
.chart .month { font-size: 9px; }
|
||||
|
||||
/* Brief: топ-3 чуть компактнее */
|
||||
.priorities li { padding: 10px; font-size: 13px; }
|
||||
.briefing { font-size: 13px; line-height: 1.6; }
|
||||
|
||||
/* Чипсы крупнее (тач) */
|
||||
.chip { font-size: 12px; padding: 6px 12px; min-height: 30px; }
|
||||
|
||||
/* AI-копилот ответ */
|
||||
.answer { font-size: 13px; padding: 12px 14px; }
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
/* Очень узкие — KPI один в ряд */
|
||||
.kpi-grid, .kpi-3 { grid-template-columns: 1fr !important; }
|
||||
.kpi-value { font-size: 24px; }
|
||||
.user .small { display: none; }
|
||||
.user .mono { font-size: 10px; }
|
||||
.topbar .install-btn { font-size: 11px; padding: 6px 10px; }
|
||||
/* Брифинг: header колонка */
|
||||
.row.spread.wrap { flex-direction: column; align-items: flex-start; }
|
||||
.row.spread.wrap > * { width: 100%; }
|
||||
}
|
||||
|
||||
/* Большие касательные таргеты для тач-устройств */
|
||||
@media (hover: none) and (pointer: coarse) {
|
||||
.nav button, .chip, .approval .controls button,
|
||||
button.btn-primary, button.btn-ghost {
|
||||
min-height: 40px;
|
||||
}
|
||||
/* убираем hover-only фокус-эффекты */
|
||||
.email:hover { border-color: var(--line); }
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
Reference in New Issue
Block a user