72 lines
7.1 KiB
CSS
72 lines
7.1 KiB
CSS
/* Approved reference styling, applied to the real table only while open. */
|
||
.weekly-experiment {
|
||
position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none;
|
||
margin: 0; padding: 8px; border: 0; border-radius: 0; background: #efefed; color: #25364a;
|
||
font-family: 'Segoe UI', Arial, sans-serif; font-size: 14px; box-sizing: border-box;
|
||
--wk-channel-width: 226px; --wk-metric-width: 205px;
|
||
}
|
||
.weekly-experiment::backdrop { background: #efefed; }
|
||
.wke-layout { display: flex; flex-direction: column; height: 100%; min-height: 0; border-radius: 20px; background: #fdfdfc; overflow: hidden; }
|
||
.wke-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 6px 14px; min-height: 36px; }
|
||
.wke-modes { display: inline-flex; flex-shrink: 0; gap: 3px; padding: 3px; border-radius: 11px; background: #f1f2f3; }
|
||
.wke-mode { padding: 6px 12px; border: 0; border-radius: 8px; background: transparent; color: #7c8a98; font-size: 13px; cursor: pointer; white-space: nowrap; }
|
||
.wke-mode[aria-pressed="true"] { background: #e2efe8; color: #355d4b; box-shadow: 0 1px 3px #2636490a; }
|
||
.wke-mode:hover { color: #355d4b; }
|
||
.wke-mode:focus-visible { outline: 2px solid #8fbba5; outline-offset: 1px; }
|
||
.wke-status { margin-right: auto; font-size: 12px; color: #8b959e; }
|
||
.wke-status--error { color: #b85349; }
|
||
.wke-refresh { padding: 5px 10px; border: 0; border-radius: 8px; background: #f1f2f3; color: #55656e; cursor: pointer; font-size: 12px; }
|
||
.wke-refresh:disabled { opacity: .5; cursor: wait; }
|
||
.weekly-experiment #wk-filter { gap: 6px; flex-wrap: wrap; }
|
||
.weekly-experiment #wk-filter input { width: 132px; height: 28px; border: 1px solid #e8eded; border-radius: 7px; background: #f6f6f6; padding: 3px 6px; font: 12px 'Segoe UI', sans-serif; }
|
||
.weekly-experiment #wk-filter-reset { border: 0; background: none; color: #627a87; font-size: 12px; cursor: pointer; }
|
||
.weekly-experiment .wke-scroll { flex: 1; min-height: 0; overflow: auto; padding: 0 0 8px; box-sizing: border-box; scrollbar-width: thin; scrollbar-color: #d7ddde #f6f6f5; }
|
||
.weekly-experiment .wk-table { margin: 4px 0 0 8px; width: calc(var(--wk-channel-width) + var(--wk-metric-width) + var(--wk-period-count, 1) * var(--wk-period-width, 112px) + 6px); min-width: 0; table-layout: fixed; border-collapse: separate; border-spacing: 2px; color: #25364a; }
|
||
.weekly-experiment .wk-col--channel { width: var(--wk-channel-width); }
|
||
.weekly-experiment .wk-col--metric { width: var(--wk-metric-width); }
|
||
.weekly-experiment .wk-col--period { width: var(--wk-period-width, 112px); }
|
||
.weekly-experiment .wk-table th, .weekly-experiment .wk-table td { box-sizing: border-box; border: 0; height: 30px; padding: 3px 8px; border-radius: 5px; font-size: 14px; line-height: 18px; font-weight: 400; vertical-align: middle; }
|
||
.weekly-experiment .wk-table thead th { position: sticky; top: 0; z-index: 8; height: 42px; padding: 4px 7px; white-space: nowrap; text-align: center; border-radius: 10px; background: #f1f2f3; font-weight: 600; color: #152337; }
|
||
.weekly-experiment .wk-table .wk-brand { left: 0; z-index: 10; min-width: 0; padding: 0 20px; text-align: left; border-radius: 0; background: #fdfdfc; }
|
||
.weekly-experiment .wk-brand span { display: block; font-size: 24px; line-height: 26px; font-weight: 400; letter-spacing: -.025em; }
|
||
.weekly-experiment .wk-brand small { display: block; margin-top: 0; font-size: 13px; line-height: 16px; font-weight: 400; color: #8b959e; }
|
||
.weekly-experiment .wk-table .wk-metric { position: sticky; left: calc(var(--wk-channel-width) + 2px); z-index: 3; white-space: normal; text-align: left; color: #25364a; background: linear-gradient(135deg, #f6f6f6, #f2f3f3); border-top-left-radius: 0; border-bottom-left-radius: 0; box-shadow: -2px 0 0 #fdfdfc; }
|
||
.weekly-experiment .wk-table .wk-value { text-align: right; white-space: nowrap; background: linear-gradient(135deg, #f6f6f6, #f2f3f3); font-variant-numeric: tabular-nums; }
|
||
.weekly-experiment .wk-table .wk-heat { background: var(--wk-heat); }
|
||
.weekly-experiment .wk-table .wk-channel { position: sticky; left: 0; z-index: 5; padding: 18px 20px; border-right: 6px solid #fdfdfc; border-radius: 13px 0 0 13px; text-align: left; color: #17283b; background: linear-gradient(125deg, var(--wk-tint), #fafaf8); }
|
||
/* При прокрутке вправо колонка прижата к краю окна: скруглённые левые углы открывали цветные ячейки под ней. */
|
||
.weekly-experiment.wke-scrolled .wk-table .wk-channel { border-top-left-radius: 0; border-bottom-left-radius: 0; }
|
||
/* При прокрутке вниз шапка закреплена у верха: скруглённые углы и зазоры между ячейками открывали цветные строки под ней. */
|
||
.weekly-experiment.wke-scrolled-y .wk-table thead th { border-radius: 0; box-shadow: 2px 0 0 #fdfdfc, 0 2px 0 #fdfdfc, 2px 2px 0 #fdfdfc; }
|
||
.weekly-experiment .wk-channel__icon { width: 48px; height: 48px; margin-bottom: 8px; background: transparent; }
|
||
.weekly-experiment .wk-channel__icon img, .weekly-experiment .wk-channel__icon svg { width: 32px; height: 32px; }
|
||
.weekly-experiment .wk-channel__title { margin: 0 0 12px; color: #14243a; font-size: 18px; line-height: 22px; font-weight: 600; }
|
||
.weekly-experiment .wk-channel__hint { margin-top: 0; font-size: 13px; line-height: 18px; white-space: pre-line; }
|
||
.weekly-experiment .wk-table .wk-gap td { height: 30px; padding: 0; background: #fdfdfc; }
|
||
.weekly-experiment .wk-table .wk-budget { width: 100%; height: 22px; font-size: 14px; }
|
||
.wke-close { display: block; flex-shrink: 0; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; color: #7c8a98; background: transparent; font: 24px/28px 'Segoe UI', sans-serif; cursor: pointer; opacity: .65; }
|
||
.wke-close:hover, .wke-close:focus-visible { background: #e8edee; color: #213448; opacity: 1; }
|
||
.wke-close:focus-visible { outline: 2px solid #8fbba5; outline-offset: 2px; }
|
||
.wke-empty { flex-shrink: 0; padding: 10px 20px; text-align: left; color: #6d7d89; font-size: 13px; line-height: 1.6; background: #f6f7f6; }
|
||
@media (max-width: 900px) {
|
||
.weekly-experiment { --wk-channel-width: 190px; --wk-metric-width: 190px; }
|
||
.weekly-experiment .wk-table .wk-channel { padding: 14px 12px; }
|
||
.weekly-experiment .wk-table .wk-brand { padding-left: 12px; }
|
||
}
|
||
@media (max-width: 600px) {
|
||
.weekly-experiment { padding: 4px; --wk-channel-width: 126px; --wk-metric-width: 145px; }
|
||
.wke-layout { border-radius: 14px; }
|
||
.wke-toolbar { gap: 6px; padding: 6px 8px; }
|
||
.wke-status { flex: 1; }
|
||
.weekly-experiment #wk-filter { order: 1; width: 100%; justify-content: flex-start; }
|
||
.weekly-experiment #wk-filter input { flex: 1; min-width: 0; }
|
||
.weekly-experiment .wke-scroll { padding: 0 0 5px; }
|
||
.weekly-experiment .wk-table { margin: 4px 0 0 5px; }
|
||
.weekly-experiment .wk-table .wk-brand { padding-left: 8px; }
|
||
.weekly-experiment .wk-brand span { font-size: 20px; }
|
||
.weekly-experiment .wk-brand small { font-size: 11px; }
|
||
.weekly-experiment .wk-table .wk-channel { padding: 12px 8px; }
|
||
.weekly-experiment .wk-channel__title { font-size: 14px; }
|
||
.weekly-experiment .wk-channel__hint { font-size: 11px; }
|
||
}
|