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;
|
font-variant-numeric: tabular-nums;
|
||||||
}
|
}
|
||||||
table.data tr:last-child td { border-bottom: 0; }
|
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; }
|
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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
Reference in New Issue
Block a user