/* ============================================================================ D.O.P.E. — оформление. Пять скинов из проекта с планом: каждый — только набор переменных, ничего структурного. Правило то же и здесь: любой цвет определён в этом блоке, ниже по файлу голых цветов нет. Поменять скин = поменять один атрибут на , и страница пересобирается целиком, включая календарь и графики. Цвет направления приходит из базы инлайном как --dc: его правит человек в настройках, и подставлять сюда захардкоженные пять цветов было бы враньём. Скин говорит только, что с этим цветом сделать — на светлом фоне он притемняется, иначе жёлтая полоска на белом не читается. ========================================================================= */ :root { --rad: 14px; --rad-s: 9px; --ff: ui-sans-serif, system-ui, "Segoe UI Variable Text", "Segoe UI", Inter, Roboto, Arial, sans-serif; --fm: ui-monospace, SFMono-Regular, "Cascadia Mono", "JetBrains Mono", Consolas, monospace; --dc-fg: #07101A; /* текст поверх цвета направления */ --ink-on-dc: #07101A; } /* 1 · НОЧЬ — сине-графитовая, спокойная. По умолчанию. */ :root, :root[data-skin="night"] { --bg: #0F131A; --bg2: #151B24; --panel: #19202B; --panel2: #202836; --edge: #2C3746; --edge2: #3E4C5E; --ink: #EFF5FC; --ink2: #C6D3E1; --mut: #8B98A8; --ok: #3DDC97; --wait: #FFC94D; --now: #4CC7F5; --bad: #FB7185; --glow: 0 0 14px -2px; --shadow: 0 14px 36px rgba(0,0,0,.40); --grad1: 9%; --grad2: 7%; --heat-ink: #07101A; } /* 2 · ИНЕЙ — светлая холодная, чёткая. Для дня и яркой комнаты. */ :root[data-skin="frost"] { --bg: #EEF2F7; --bg2: #E3EAF2; --panel: #FFFFFF; --panel2: #F4F7FB; --edge: #DCE3EC; --edge2: #B4C1D1; --ink: #0E1720; --ink2: #38444F; --mut: #596573; --ok: #0E7245; --wait: #8E5405; --now: #11559F; --bad: #AC1D33; --glow: 0 0 0; --shadow: 0 6px 20px rgba(20,40,70,.09); --grad1: 0%; --grad2: 0%; --rad: 10px; --rad-s: 7px; --heat-ink: #FFFFFF; } /* 3 · УГОЛЬ — истинно чёрный, минимум цвета. Для тёмной комнаты и OLED. */ :root[data-skin="coal"] { --bg: #000000; --bg2: #07080A; --panel: #0E0F12; --panel2: #16181C; --edge: #24262B; --edge2: #3B3E45; --ink: #F3F5F8; --ink2: #C4C9D0; --mut: #8A919A; --ok: #B7F04A; --wait: #E8B93C; --now: #EAEEF3; --bad: #FF6B6B; --glow: 0 0 18px -4px; --shadow: 0 12px 32px rgba(0,0,0,.7); --grad1: 5%; --grad2: 4%; --rad: 8px; --rad-s: 5px; --heat-ink: #000000; } /* 4 · ХВОЯ — тёмная зелёная, мягкая, крупные скругления. Низкий раздражитель. */ :root[data-skin="pine"] { --bg: #0C1412; --bg2: #101B18; --panel: #13211D; --panel2: #1A2C26; --edge: #243830; --edge2: #354E44; --ink: #E8F2ED; --ink2: #BCD1C7; --mut: #8AA096; --ok: #6EE7A8; --wait: #E8C468; --now: #5FC9C0; --bad: #F08B8B; --glow: 0 0 18px -4px; --shadow: 0 14px 34px rgba(0,0,0,.34); --grad1: 10%; --grad2: 6%; --rad: 19px; --rad-s: 13px; --heat-ink: #0C1412; } /* 5 · РАССВЕТ — сливовая с янтарём, контрастная, «рабочая злость». */ :root[data-skin="dawn"] { --bg: #15101B; --bg2: #1B1523; --panel: #201929; --panel2: #2A2035; --edge: #392C48; --edge2: #503E64; --ink: #F7EFFC; --ink2: #D8CAE4; --mut: #9C8BAA; --ok: #6FE3A6; --wait: #FFD166; --now: #FFB454; --bad: #FF6B8A; --glow: 0 0 20px -3px; --shadow: 0 14px 38px rgba(0,0,0,.45); --grad1: 12%; --grad2: 10%; --rad: 15px; --rad-s: 11px; --heat-ink: #15101B; } /* --------------------------------------------------------------- основание */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: radial-gradient(1100px 460px at 16% -8%, color-mix(in srgb, var(--now) var(--grad1), transparent), transparent 62%), radial-gradient(900px 420px at 92% 0%, color-mix(in srgb, var(--ok) var(--grad2), transparent), transparent 58%), var(--bg); background-attachment: fixed; color: var(--ink); font: 14.5px/1.6 var(--ff); -webkit-font-smoothing: antialiased; padding-bottom: 78px; transition: background .25s, color .25s; } .wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; } .wrap.narrow { max-width: 820px; } a { color: var(--now); text-decoration: none; border-bottom: 1px solid transparent; } a:hover { border-bottom-color: currentColor; } :focus-visible { outline: 2px solid var(--now); outline-offset: 2px; border-radius: 4px; } code, .mono { font-family: var(--fm); } code { font-size: .88em; background: var(--panel2); border: 1px solid var(--edge); border-radius: 5px; padding: 1px 5px; color: var(--ink2); } pre { font-family: var(--fm); font-size: 12.5px; line-height: 1.65; background: var(--bg2); border: 1px solid var(--edge); border-radius: var(--rad-s); padding: 14px; overflow-x: auto; white-space: pre-wrap; word-break: break-word; color: var(--ink2); } h1 { font-size: 24px; line-height: 1.18; letter-spacing: -.02em; font-weight: 680; } h2 { font-size: 16.5px; letter-spacing: -.01em; font-weight: 640; } h3 { font: 700 10.5px/1.3 var(--fm); letter-spacing: 1.5px; text-transform: uppercase; color: var(--mut); } .sub { color: var(--mut); font-size: 13px; } .muted { color: var(--mut); } .small { font-size: 12.5px; } .tiny { font-size: 11.5px; } .nowrap { white-space: nowrap; } .mt { margin-top: 12px; } .mt2 { margin-top: 20px; } .mb { margin-bottom: 12px; } .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .row.tight { gap: 6px; } .spread { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; } .grow { flex: 1 1 auto; min-width: 0; } .hide { display: none !important; } h2.sec { font: 700 11px/1.3 var(--fm); letter-spacing: 1.6px; text-transform: uppercase; color: var(--mut); margin: 26px 0 10px; display: flex; align-items: center; gap: 12px; } h2.sec::after { content: ""; flex: 1; height: 1px; background: var(--edge); } /* ------------------------------------------------------------------- шапка */ .top { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg2) 90%, transparent); backdrop-filter: saturate(150%) blur(12px); border-bottom: 1px solid var(--edge); } .top-in { display: flex; align-items: center; gap: 12px; min-height: 56px; } .brand { display: flex; align-items: center; gap: 9px; color: var(--ink); font: 700 14px/1 var(--fm); letter-spacing: .5px; border: 0; flex: none; } .brand-mark { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; background: linear-gradient(150deg, var(--now), var(--ok)); color: var(--heat-ink); font: 800 12px/1 var(--fm); letter-spacing: -.5px; } .brand-sub { color: var(--mut); font-weight: 500; letter-spacing: 0; } /* Навигация лентой: на телефоне она прокручивается пальцем, а не прячется в гамбургер. Спрятанное меню на странице, куда заходят каждый день, — лишнее нажатие на каждом заходе. */ .nav { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; padding: 4px 0; } .nav::-webkit-scrollbar { display: none; } .nav a { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 6px 9px; border-radius: 999px; border: 1px solid transparent; color: var(--mut); font: 600 12px/1 var(--ff); white-space: nowrap; } .nav a:hover { color: var(--ink); background: var(--panel2); } .nav a.on { color: var(--ink); background: var(--panel); border-color: var(--edge2); } .nav a i { font-style: normal; font-size: 13px; } .skinbar { display: flex; gap: 5px; flex: none; align-items: center; } .skin-dot { width: 19px; height: 19px; border-radius: 6px; border: 1px solid var(--edge2); cursor: pointer; padding: 0; position: relative; display: block; } .skin-dot.on { box-shadow: 0 0 0 2px var(--now); } .skin-dot span { position: absolute; inset: 3px 3px 50% 3px; border-radius: 3px 3px 0 0; } /* ---------------------------------------------------------------- карточки */ .card { background: var(--panel); border: 1px solid var(--edge); border-radius: var(--rad); padding: 16px; box-shadow: var(--shadow); } .card + .card { margin-top: 14px; } .card.flat { box-shadow: none; background: var(--panel2); } .card.tight { padding: 12px; } .card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; } .grid { display: grid; gap: 14px; } .grid > * { min-width: 0; } @media (min-width: 900px) { .grid.two { grid-template-columns: 1fr 1fr; } .grid.side { grid-template-columns: minmax(0,1.55fr) minmax(0,1fr); align-items: start; } } .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; } .tile { background: var(--panel); border: 1px solid var(--edge); border-radius: var(--rad-s); padding: 12px 13px; position: relative; overflow: hidden; } .tile-label { font: 700 9.5px/1.3 var(--fm); letter-spacing: 1.2px; text-transform: uppercase; color: var(--mut); } .tile-value { font: 700 24px/1.1 var(--fm); letter-spacing: -.02em; margin-top: 5px; } .tile-value small { font-size: 13px; font-weight: 600; color: var(--mut); letter-spacing: 0; } .tile-note { font-size: 11.5px; color: var(--mut); margin-top: 4px; } .tile.up .tile-value { color: var(--ok); } .tile.down .tile-value { color: var(--bad); } .tile.warn { border-color: color-mix(in srgb, var(--wait) 45%, var(--edge)); } .tile.warn .tile-value { color: var(--wait); } /* --------------------------------------------------------------- сообщения */ .alert { border-radius: var(--rad-s); padding: 11px 13px; font-size: 13px; border: 1px solid var(--edge2); background: var(--panel2); color: var(--ink2); display: flex; gap: 9px; align-items: flex-start; } .alert b { color: var(--ink); } .alert.bad { border-color: color-mix(in srgb, var(--bad) 55%, var(--edge)); background: color-mix(in srgb, var(--bad) 12%, var(--panel)); } .alert.warn { border-color: color-mix(in srgb, var(--wait) 55%, var(--edge)); background: color-mix(in srgb, var(--wait) 12%, var(--panel)); } .alert.good { border-color: color-mix(in srgb, var(--ok) 50%, var(--edge)); background: color-mix(in srgb, var(--ok) 11%, var(--panel)); } .alert + .alert { margin-top: 8px; } /* ----------------------------------------------------------------- кнопки */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 15px; border-radius: var(--rad-s); border: 1px solid var(--edge2); background: var(--panel2); color: var(--ink); cursor: pointer; font: 600 13px/1 var(--ff); text-decoration: none; transition: .15s; white-space: nowrap; } .btn:hover { border-color: var(--now); color: var(--now); } .btn.primary { background: var(--now); border-color: var(--now); color: var(--heat-ink); } .btn.primary:hover { filter: brightness(1.1); color: var(--heat-ink); } .btn.ghost { background: transparent; border-color: var(--edge); color: var(--mut); } .btn.ghost:hover { color: var(--ink); border-color: var(--edge2); } .btn.danger { border-color: color-mix(in srgb, var(--bad) 50%, var(--edge)); color: var(--bad); background: transparent; } .btn.danger:hover { background: color-mix(in srgb, var(--bad) 14%, transparent); border-color: var(--bad); } .btn.sm { padding: 6px 10px; font-size: 12px; } .btn.xs { padding: 4px 8px; font-size: 11.5px; border-radius: 6px; } .btn.wide { width: 100%; } .btn[disabled] { opacity: .45; pointer-events: none; } .iconbtn { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: var(--rad-s); border: 1px solid var(--edge); background: var(--panel); color: var(--ink2); font-size: 16px; line-height: 1; cursor: pointer; } .iconbtn:hover { border-color: var(--now); color: var(--now); } /* ------------------------------------------------------------------ формы */ label { display: block; font: 700 10px/1.3 var(--fm); letter-spacing: 1.2px; text-transform: uppercase; color: var(--mut); margin-bottom: 5px; } input[type=text], input[type=password], input[type=date], input[type=time], input[type=number], input[type=search], input[type=url], select, textarea { width: 100%; padding: 9px 11px; border-radius: var(--rad-s); border: 1px solid var(--edge2); background: var(--bg2); color: var(--ink); font: 14px/1.45 var(--ff); -webkit-appearance: none; appearance: none; } input[type=color] { width: 44px; height: 34px; padding: 2px; border-radius: var(--rad-s); border: 1px solid var(--edge2); background: var(--bg2); cursor: pointer; } select { background-image: none; cursor: pointer; } textarea { min-height: 96px; resize: vertical; line-height: 1.6; } textarea.tall { min-height: 340px; font-family: var(--fm); font-size: 13px; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--now); box-shadow: var(--glow) color-mix(in srgb, var(--now) 55%, transparent); } ::placeholder { color: var(--mut); opacity: .75; } .field + .field { margin-top: 11px; } .fields2 { display: grid; gap: 11px; } @media (min-width: 620px) { .fields2 { grid-template-columns: 1fr 1fr; } .fields2 .span2 { grid-column: 1 / -1; } } /* ------------------------------------------------- выбор оценки 0..N */ .scale { display: flex; gap: 5px; flex-wrap: wrap; } .scale label { margin: 0; text-transform: none; letter-spacing: 0; color: var(--ink2); } .scale button, .scale a, .scale label { flex: 1 1 0; min-width: 38px; padding: 9px 0; border-radius: var(--rad-s); border: 1px solid var(--edge2); background: var(--bg2); color: var(--ink2); font: 700 14px/1 var(--fm); cursor: pointer; transition: .13s; text-align: center; } .scale button:hover, .scale a:hover, .scale label:hover { border-color: var(--dc, var(--now)); color: var(--ink); } .scale button.on, .scale a.on, .scale label.on { background: var(--dc, var(--now)); border-color: var(--dc, var(--now)); color: var(--ink-on-dc); box-shadow: var(--glow) color-mix(in srgb, var(--dc, var(--now)) 60%, transparent); } [data-skin="frost"] .scale button.on, [data-skin="frost"] .scale a.on, [data-skin="frost"] .scale label.on { background: color-mix(in srgb, var(--dc, var(--now)) 80%, #10202E); color: #fff; } .scale .clear { flex: 0 0 auto; min-width: 34px; color: var(--mut); font-size: 15px; } /* «Без оценки» — это отсутствие выбора, а не шестая оценка. Поэтому выбранный крестик остаётся приглушённым: залитый цветом направления, он читается как «поставил максимум», хотя означает ровно обратное. */ .scale .clear.on, .scale label.clear.on { background: var(--panel2); border-color: var(--edge2); color: var(--ink2); box-shadow: inset 0 0 0 1px var(--edge2); } [data-skin="frost"] .scale .clear.on, [data-skin="frost"] .scale label.clear.on { background: var(--panel2); color: var(--ink2); } /* строка направления в форме отметки дня */ .dirline { padding: 12px 0; border-top: 1px solid var(--edge); } .dirline:first-of-type { border-top: 0; padding-top: 4px; } .dirline-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; } .dirline-emoji { font-size: 17px; line-height: 1; flex: none; } .dirline-title { font-weight: 640; font-size: 14px; } .dirline-val { margin-left: auto; font: 700 12px/1 var(--fm); color: var(--dc, var(--mut)); } [data-skin="frost"] .dirline-val { color: color-mix(in srgb, var(--dc, var(--mut)) 75%, #0E1720); } .dirline textarea { min-height: 44px; margin-top: 8px; font-size: 13.5px; } /* -------------------------------------------------------------- календарь */ .cal-nav { display: flex; align-items: center; gap: 7px; } .cal-title { font: 700 14px/1 var(--fm); min-width: 128px; text-align: center; letter-spacing: .3px; } .cal { border: 1px solid var(--edge); border-radius: var(--rad); overflow: hidden; background: var(--panel); } .cal-head, .cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); } .cal-head { background: var(--panel2); border-bottom: 1px solid var(--edge); } .cal-head div { padding: 7px 4px; text-align: center; color: var(--mut); font: 700 9.5px/1 var(--fm); letter-spacing: 1.1px; text-transform: uppercase; } .cal-head div.we { color: color-mix(in srgb, var(--wait) 70%, var(--mut)); } .cal-day { position: relative; min-height: 92px; padding: 5px 5px 4px; border-right: 1px solid var(--edge); border-bottom: 1px solid var(--edge); display: flex; flex-direction: column; gap: 4px; color: var(--ink2); text-decoration: none; border-bottom-color: var(--edge); overflow: hidden; } .cal-week .cal-day:last-child { border-right: 0; } .cal-week:last-child .cal-day { border-bottom: 0; } .cal-day:hover { background: var(--panel2); border-bottom-color: var(--edge); } .cal-day.out { opacity: .32; } .cal-day.future { background: repeating-linear-gradient(135deg, transparent, transparent 7px, color-mix(in srgb, var(--edge) 40%, transparent) 7px, color-mix(in srgb, var(--edge) 40%, transparent) 8px); } .cal-day.today { box-shadow: inset 0 0 0 2px var(--now); z-index: 2; } .cal-num { font: 700 13px/1 var(--fm); color: var(--ink2); } .cal-day.today .cal-num { color: var(--now); } .cal-day.we .cal-num { color: color-mix(in srgb, var(--wait) 62%, var(--mut)); } .cal-top { display: flex; align-items: center; justify-content: space-between; gap: 4px; } /* Заливка клетки — индекс дня. Чем выше, тем плотнее: не пять оттенков светофора, а одна шкала, по которой месяц читается как рельеф. */ .cal-fill { position: absolute; inset: 0; pointer-events: none; opacity: var(--fill, 0); background: var(--now); } .cal-day .cal-inner { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; gap: 4px; } .cal-idx { font: 700 10.5px/1 var(--fm); color: var(--ink); opacity: .82; } /* Пять столбиков — по одному на направление. Это и есть «прогресс по отдельным направлениям прямо в календаре»: цвет говорит что, высота — насколько. Столбики не подписаны, подписи в легенде под календарём. */ .bars { display: flex; align-items: flex-end; gap: 2px; height: 26px; margin-top: auto; } .bars .b { flex: 1 1 0; min-width: 3px; border-radius: 2px 2px 1px 1px; background: color-mix(in srgb, var(--edge2) 62%, transparent); position: relative; height: 100%; } .bars .b i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 2px 2px 1px 1px; background: var(--dc); height: var(--h, 0%); } [data-skin="frost"] .bars .b i { background: color-mix(in srgb, var(--dc) 80%, #12202C); } .bars .b.empty { background: color-mix(in srgb, var(--edge2) 34%, transparent); } .cal-mark { display: flex; gap: 3px; align-items: center; } .cal-mark span { width: 5px; height: 5px; border-radius: 50%; background: var(--mut); opacity: .8; } .cal-mark span.task { background: var(--wait); } .cal-mark span.mat { background: var(--now); } .cal-mark span.note { background: var(--ok); } /* ----- лента: тот же месяц строками. На узком экране читается лучше сетки. */ .feed { border: 1px solid var(--edge); border-radius: var(--rad); overflow: hidden; background: var(--panel); } .feed-row { display: grid; grid-template-columns: 62px 1fr 46px; gap: 10px; align-items: center; padding: 9px 11px; border-bottom: 1px solid var(--edge); color: var(--ink2); text-decoration: none; } .feed-row:last-child { border-bottom: 0; } .feed-row:hover { background: var(--panel2); border-bottom-color: var(--edge); } .feed-row.today { box-shadow: inset 2px 0 0 var(--now); } .feed-row.we .feed-date b { color: color-mix(in srgb, var(--wait) 62%, var(--mut)); } .feed-row.empty { opacity: .55; } .feed-date { font-family: var(--fm); line-height: 1.25; } .feed-date b { display: block; font-size: 14px; font-weight: 700; color: var(--ink); } .feed-date span { font-size: 10px; color: var(--mut); text-transform: uppercase; letter-spacing: .8px; } /* В ленте столбики узкие и фиксированной ширины. Растянутые на всю строку они превращаются в плитки: разницу высот между 3 и 4 глазом уже не поймать, а ради неё лента и нужна. */ .feed-bars { display: flex; gap: 3px; align-items: flex-end; height: 27px; justify-content: flex-start; } .feed-bars .b { flex: 0 0 15px; background: color-mix(in srgb, var(--edge2) 55%, transparent); border-radius: 2px; position: relative; height: 100%; } .feed-bars .b i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--dc); border-radius: 2px; height: var(--h, 0%); } [data-skin="frost"] .feed-bars .b i { background: color-mix(in srgb, var(--dc) 80%, #12202C); } .feed-idx { font: 700 14px/1 var(--fm); text-align: right; color: var(--ink); } .feed-idx small { display: block; font-size: 9.5px; color: var(--mut); font-weight: 600; margin-top: 3px; letter-spacing: .6px; } .feed-note { font-size: 12px; color: var(--mut); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ------------------------------------------------------------- легенда */ .legend { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 11px; } .legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mut); } .legend i { width: 9px; height: 9px; border-radius: 3px; background: var(--dc); flex: none; } [data-skin="frost"] .legend i { background: color-mix(in srgb, var(--dc) 80%, #12202C); } /* --------------------------------------------------------- строки направлений */ .drow { display: grid; grid-template-columns: 1fr; gap: 7px; padding: 11px 0; border-top: 1px solid var(--edge); } .drow:first-child { border-top: 0; } .drow-head { display: flex; align-items: center; gap: 9px; } .drow-name { font-weight: 620; font-size: 13.5px; } .drow-val { margin-left: auto; font: 700 15px/1 var(--fm); } .drow-delta { font: 600 11.5px/1 var(--fm); padding: 3px 6px; border-radius: 5px; border: 1px solid var(--edge2); color: var(--mut); } .drow-delta.up { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, var(--edge)); } .drow-delta.down { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, var(--edge)); } .meter { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--edge2) 50%, transparent); overflow: hidden; position: relative; } .meter i { display: block; height: 100%; border-radius: 999px; background: var(--dc, var(--now)); width: var(--w, 0%); transition: width .5s cubic-bezier(.2,.8,.2,1); } [data-skin="frost"] .meter i { background: color-mix(in srgb, var(--dc, var(--now)) 80%, #12202C); } /* засечка «где было в прошлом окне» — без неё проценты не с чем сравнивать */ .meter u { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--ink); opacity: .55; left: var(--was, 0%); } /* -------------------------------------------------------------- графики */ .chart { width: 100%; height: auto; display: block; overflow: visible; } .chart .line { fill: none; stroke: var(--now); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .chart .line.short { stroke: var(--mut); stroke-width: 1.4; stroke-dasharray: 3 4; } .chart .area { fill: color-mix(in srgb, var(--now) 16%, transparent); stroke: none; } .chart .grid-l { stroke: var(--edge); stroke-width: 1; } .chart .grid-t { fill: var(--mut); font: 600 9px var(--fm); } .chart .dot { fill: var(--now); } .chart-box { background: var(--bg2); border: 1px solid var(--edge); border-radius: var(--rad-s); padding: 12px 12px 8px; } /* ------------------------------------------------------------ списки дел */ .item { display: flex; gap: 11px; align-items: flex-start; padding: 11px 0; border-top: 1px solid var(--edge); } .item:first-child { border-top: 0; } .item-dot { width: 8px; height: 8px; border-radius: 3px; background: var(--dc, var(--mut)); flex: none; margin-top: 6px; } .item-body { flex: 1 1 auto; min-width: 0; } .item-title { font-weight: 600; font-size: 14px; color: var(--ink); } .item-title.done { text-decoration: line-through; color: var(--mut); font-weight: 500; } .item-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 3px; font-size: 12px; color: var(--mut); } .item-acts { display: flex; gap: 5px; flex: none; align-items: center; } .item-note { font-size: 12.5px; color: var(--ink2); margin-top: 5px; white-space: pre-wrap; word-break: break-word; } .chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--edge2); font: 600 11px/1.5 var(--fm); color: var(--mut); background: var(--panel2); } .chip.dc { border-color: color-mix(in srgb, var(--dc) 50%, var(--edge)); color: var(--dc); background: color-mix(in srgb, var(--dc) 12%, transparent); } [data-skin="frost"] .chip.dc { color: color-mix(in srgb, var(--dc) 72%, #0E1720); } .chip.late { border-color: color-mix(in srgb, var(--bad) 55%, var(--edge)); color: var(--bad); background: color-mix(in srgb, var(--bad) 11%, transparent); } .chip.soon { border-color: color-mix(in srgb, var(--wait) 55%, var(--edge)); color: var(--wait); background: color-mix(in srgb, var(--wait) 11%, transparent); } .chip.ok { border-color: color-mix(in srgb, var(--ok) 45%, var(--edge)); color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); } .empty-note { padding: 22px 4px; text-align: center; color: var(--mut); font-size: 13px; } /* ------------------------------------------------------------- материалы */ .mat { display: block; padding: 12px 0; border-top: 1px solid var(--edge); color: inherit; border-bottom: 0; } .mat:first-child { border-top: 0; } .mat:hover { border-bottom: 0; } .mat:hover .mat-title { color: var(--now); } .mat-title { font-weight: 640; font-size: 14px; color: var(--ink); } .mat-prev { font-size: 12.5px; color: var(--mut); margin-top: 4px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mat-prev mark { background: color-mix(in srgb, var(--wait) 30%, transparent); color: var(--ink); border-radius: 3px; padding: 0 2px; } .mat-meta { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-top: 6px; } .body-text { white-space: pre-wrap; word-break: break-word; font-size: 14px; line-height: 1.72; color: var(--ink2); font-family: var(--ff); } .body-text.code { font-family: var(--fm); font-size: 13px; line-height: 1.65; } /* -------------------------------------------------------------- неделя/день */ .dayhead { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; } .dayidx { display: grid; place-items: center; width: 72px; height: 72px; flex: none; border-radius: var(--rad); border: 1px solid var(--edge2); background: var(--bg2); font: 700 22px/1 var(--fm); } .dayidx small { display: block; font-size: 9px; letter-spacing: 1px; color: var(--mut); margin-top: 5px; } .wk { border: 1px solid var(--edge); border-radius: var(--rad); overflow: hidden; background: var(--panel); } .wk-day { border-bottom: 1px solid var(--edge); padding: 12px 13px; } .wk-day:last-child { border-bottom: 0; } .wk-day.today { box-shadow: inset 3px 0 0 var(--now); } .wk-day.empty { opacity: .6; } .wk-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .wk-date { font: 700 13px/1 var(--fm); color: var(--ink); } .wk-wd { font: 600 10px/1 var(--fm); letter-spacing: 1px; text-transform: uppercase; color: var(--mut); } .wk-scores { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; } .wk-score { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--dc) 45%, var(--edge)); font: 700 11.5px/1.5 var(--fm); color: var(--dc); background: color-mix(in srgb, var(--dc) 11%, transparent); } [data-skin="frost"] .wk-score { color: color-mix(in srgb, var(--dc) 72%, #0E1720); } .wk-score.none { color: var(--mut); border-color: var(--edge); background: transparent; } /* -------------------------------------------------------------- таблицы */ .tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--rad-s); } table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; } table.tbl th { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--edge2); font: 700 9.5px/1.3 var(--fm); letter-spacing: 1.1px; text-transform: uppercase; color: var(--mut); white-space: nowrap; } table.tbl td { padding: 9px 10px; border-bottom: 1px solid var(--edge); vertical-align: top; color: var(--ink2); } table.tbl tr:last-child td { border-bottom: 0; } table.tbl td.num { font-family: var(--fm); text-align: right; white-space: nowrap; } /* ------------------------------------------------------------------- вход */ .login-wrap { min-height: 72vh; display: grid; place-items: center; padding: 20px 0; } .login-wrap .card { width: 100%; max-width: 400px; } .login-mark { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; background: linear-gradient(150deg, var(--now), var(--ok)); color: var(--heat-ink); font: 800 15px/1 var(--fm); letter-spacing: -.5px; margin-bottom: 14px; } /* ------------------------------------------------------------------ подвал */ .foot { padding: 26px 16px 20px; color: var(--mut); font-size: 11.5px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } .foot .mono { letter-spacing: .3px; } /* --------------------------------------------------------- нижняя панель */ /* На телефоне четыре главных действия должны быть под большим пальцем, а не в шапке наверху: страницу листают вниз, и возвращаться наверх ради перехода — лишнее движение по десять раз на дню. */ .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: none; background: color-mix(in srgb, var(--bg2) 94%, transparent); backdrop-filter: saturate(150%) blur(12px); border-top: 1px solid var(--edge); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); } .tabbar a { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 2px; border-radius: var(--rad-s); color: var(--mut); border: 0; font: 600 9.5px/1 var(--ff); } .tabbar a i { font-style: normal; font-size: 17px; line-height: 1; } .tabbar a.on { color: var(--now); background: var(--panel); } /* ------------------------------------------------------------- адаптив */ @media (max-width: 1400px) { .brand-sub { display: none; } } @media (max-width: 860px) { .nav { order: 3; width: 100%; border-top: 1px solid var(--edge); padding-top: 6px; } .top-in { flex-wrap: wrap; padding-bottom: 2px; } } @media (max-width: 700px) { body { padding-bottom: 84px; font-size: 14px; } .wrap { padding: 0 12px; } h1 { font-size: 20px; } .card { padding: 13px; border-radius: var(--rad-s); } .tabbar { display: flex; } .nav { display: none; } .top-in { flex-wrap: nowrap; } /* Календарь на телефоне. Клетка становится ниже, но столбики направлений и число остаются: именно ради них сюда и заходят. Проценты убираем — цифра в 9 px нечитаема, а рельеф заливки виден и без неё. */ .cal-day { min-height: 62px; padding: 4px 3px; } .cal-num { font-size: 11.5px; } .cal-idx { display: none; } .bars { height: 18px; gap: 1.5px; } .cal-head div { font-size: 8.5px; letter-spacing: .6px; padding: 6px 2px; } .cal-mark { display: none; } .feed-row { grid-template-columns: 54px 1fr 40px; gap: 8px; padding: 8px 9px; } .dayidx { width: 60px; height: 60px; font-size: 19px; } .tiles { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px; } .tile-value { font-size: 21px; } } @media (max-width: 380px) { .cal-day { min-height: 56px; } .bars { height: 15px; } .cal-num { font-size: 10.5px; } } @media print { .top, .tabbar, .foot, .btn, .item-acts { display: none !important; } body { background: #fff; color: #000; padding: 0; } .card { box-shadow: none; border-color: #ccc; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } html { scroll-behavior: auto; } }