/* IAM — «Новый» дизайн. Включается в Настройках → Дизайн. Перенос макета ~/mac-dashboard/design/iam-widgets.html (30.09.2026): колонка-меню, сужающийся лист, холст со штриховкой, Geist, «Стол» с виджетами. ВСЁ — только под data-design="shtab"; «Классический» и капсула (00-surface.js отключает этот файл) не затрагиваются. */ /* ---------- палитра холста ---------- */ :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) { --font-ui:'Geist',-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',system-ui,sans-serif; --font-display:'Geist',-apple-system,system-ui,sans-serif; --sh-mono:'Geist Mono',ui-monospace,SFMono-Regular,monospace; --sh-spring:cubic-bezier(.2,.85,.2,1); --sh-desk:#141416; --sh-canvas:#1a1a1c; /* 09.11: рамка окна = цвет меню (вариант B) */ --sh-hatch:rgba(255,255,255,.025); --sh-edge:rgba(255,255,255,.06); --sh-w:#232325; --sh-w2:#2d2d30; --sh-line:rgba(255,255,255,.08); --sh-t:#f4f4f2; --sh-m:#8d8d92; --sh-lime:#b9f36c; --sh-lime-ink:#1c2410; --sh-peri:#7d8ce9; --sh-peri2:#95a2f0; --sh-shadow:0 34px 60px -28px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.05); --sh-ink:#f4f4f2; } :root[data-design="shtab"][data-theme="light"]:not([data-_a]):not([data-_b]) { --sh-desk:#141416; --sh-canvas:#ececea; --sh-hatch:rgba(0,0,0,.035); --sh-edge:rgba(255,255,255,.7); --sh-w:#202022; --sh-shadow:0 34px 60px -28px rgba(0,0,0,.45),0 14px 26px -14px rgba(0,0,0,.28); --sh-ink:#161618; } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]), :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) body { background:var(--sh-desk)!important; font-family:var(--font-ui); } /* ---------- лист (правый экран): и главная, и все разделы ---------- */ :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) :is(#app-sheet, body[data-page="home"] .main-area) { background-color:var(--sh-canvas)!important; background-image:repeating-linear-gradient(45deg,var(--sh-hatch) 0 1px,transparent 1px 22px), repeating-linear-gradient(-45deg,var(--sh-hatch) 0 1px,transparent 1px 22px)!important; border-radius:24px!important; outline:none!important; box-shadow:inset 0 0 0 1px var(--sh-edge)!important; } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) :is(#app-sheet,.main-area) .page { background:transparent!important; } @media (min-width:761px) { /* колонка иконок 76 px → по наведению 258 px; лист сужается, всё остаётся видно */ :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) body:not(.pane2) { --shell-sidebar-width:56px; --shell-inset:10px; --shell-gap:0px; } /* 09.11: меню и лист вплотную (B) */ /* в IAM.app лист больше не опускаем под кнопки окна — они над меню; сверху та же рамка 10px, что снизу */ html[data-shell-host="macos"]:root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) body:not(.pane2) { --shell-panel-top:var(--shell-inset)!important; } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) body:not(.pane2).sh-rail-open { --shell-sidebar-width:188px; } /* 09.11: раскрыто ручкой на шве (37-rail-handle.js) */ :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) body:not(.pane2) :is(#app-sheet, .main-area) { transition:left .28s var(--sh-spring), right .28s var(--sh-spring)!important; } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) body:not(.pane2).sh-rail-open :is(#app-sheet, .main-area) { transition-delay:0s!important; } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) body:not(.pane2) #app-sidebar { background:transparent!important; border:0!important; border-radius:0!important; top:0!important; left:0!important; bottom:0!important; width:calc(var(--shell-sidebar-width) + var(--shell-inset))!important; /* меню от края окна до листа — иконки по центру полосы */ padding:44px 11px 14px!important; gap:4px!important; overflow:hidden!important; /* сверху место под кнопки окна IAM.app */ box-shadow:none!important; transition:width .28s var(--sh-spring), box-shadow .28s!important; } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) body:not(.pane2).sh-rail-open #app-sidebar { transition-delay:0s!important; } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) body:not(.pane2).sh-rail-open #app-sidebar { box-shadow:none!important; } /* подписи/клавиши/названия проявляются только в раскрытом меню */ :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #app-sidebar :is(.sb-btn > span:not(.sh-key):not(.sh-badge), .sb-proj-lbl > span:not(.sh-badge), .sb-brand span, .sh-key, .sb-proj-chev, .sh-pin-btn) { opacity:0; transition:opacity .15s; } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) body:not(.pane2).sh-rail-open #app-sidebar :is(.sb-btn > span:not(.sh-key):not(.sh-badge), .sb-proj-lbl > span:not(.sh-badge), .sb-brand span, .sh-key, .sb-proj-chev, .sh-pin-btn) { opacity:1; transition-delay:.2s; } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #sb-app-projects { max-height:0!important; opacity:0!important; } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) body:not(.pane2).sh-rail-open #app-sidebar.sb-projects-open #sb-app-projects { max-height:min(50vh,600px)!important; opacity:1!important; overflow-y:auto; } } /* ---------- содержимое меню ---------- */ :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #app-sidebar .sb-brand { display:none!important; order:-4; align-items:center; gap:14px; height:44px; padding-left:11px; margin-bottom:12px; white-space:nowrap; } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #app-sidebar .sb-brand img { width:30px; height:auto; flex:none; } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #app-sidebar .sb-brand span { font-size:17px; font-weight:600; color:#fff; } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #app-sidebar .sh-only { display:flex!important; } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #app-sidebar .sh-sep { display:block!important; height:1px; background:#26262a; margin:8px 12px; flex:none; } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #app-sidebar .sh-sep.sh-top { display:none!important; } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #app-sidebar .sh-sep.sh-proj { order:1; } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #app-sidebar :is(.sh-sep.sh-tr, .sb-btn[data-p="trail"], .sb-btn[data-p="workflow"]) { order:2; } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #app-sidebar .sb-foot { order:3; } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #app-sidebar :is(.sb-btn, .sb-proj-lbl) { display:flex; align-items:center; gap:15px; height:44px; min-height:44px; padding:0 11.5px; border-radius:14px; color:#8d8d92!important; background:none; white-space:nowrap; position:relative; flex:none; width:100%; font:500 15px var(--font-ui); transition:background .15s, color .15s; cursor:pointer; } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #app-sidebar :is(.sb-btn, .sb-proj-lbl):hover { color:#fff!important; background:#1f1f22!important; } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #app-sidebar .sb-btn.active { background:linear-gradient(180deg,#303033,#28282b)!important; color:#fff!important; font-weight:500; box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 6px 12px -6px rgba(0,0,0,.8); } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #app-sidebar .sb-btn > svg { display:none!important; } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #app-sidebar .sb-btn::before, :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #app-sidebar .sb-proj-lbl::before { content:""; width:21px; height:21px; flex:none; background:currentColor; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #app-sidebar .sb-proj-lbl::before { -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #app-sidebar .sb-btn[data-p="home"]::before{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")} :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #app-sidebar .sb-btn[data-p="tasks"]::before{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")} :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #app-sidebar .sb-btn[data-p="focus"]::before{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")} :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #app-sidebar .sb-btn[data-p="calendar"]::before{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")} :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #app-sidebar .sb-btn[data-p="notes"]::before{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")} :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #app-sidebar .sb-btn[data-p="checklist"]::before{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")} :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #app-sidebar .sb-btn[data-p="trail"]::before{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")} :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #app-sidebar .sb-btn[data-p="workflow"]::before{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")} :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #app-sidebar .sb-btn[data-p="profile"]::before{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")} :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #app-sidebar .sb-proj-lbl { order:1; } /* 24.10: был сверху (order:-3) — теперь под «Заметками» */ :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #app-sidebar .sb-proj-lbl .sb-proj-chev { display:block!important; width:14px; height:14px; margin-left:auto; transition:transform .25s var(--sh-spring), opacity .15s; } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #app-sidebar.sb-projects-open .sb-proj-lbl .sb-proj-chev { transform:rotate(90deg); } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #app-sidebar .sb-proj-lbl.sh-has-badge .sb-proj-chev { margin-right:28px; } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #sb-app-projects { order:1; flex:none; overflow:hidden; transition:max-height .35s var(--sh-spring), opacity .2s; } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #app-sidebar .sb-proj-row { height:40px; min-height:40px; padding:0 12px 0 22px; border-radius:14px; color:#cfcfd2!important; font-size:14px; gap:13px; white-space:nowrap; } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #app-sidebar .sb-proj-row:hover, :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #app-sidebar .sb-sub-row:hover { background:#1f1f22!important; color:#fff!important; } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #app-sidebar .sb-proj-row.active { background:#232326!important; color:#fff!important; } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #app-sidebar .sb-proj-dot { width:9px; height:9px; border-radius:3px; } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #app-sidebar .sb-proj-emoji { display:none; } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #app-sidebar .sb-proj-count { font:500 12px var(--sh-mono); color:#6d6d72!important; } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #app-sidebar .sb-proj-arrow { color:#6d6d72!important; } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #app-sidebar .sb-sub-row, :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #app-sidebar .sb-sub-add { color:#9d9da2!important; padding-left:44px; } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]):not([data-_d]) body #app-sidebar .sb-btn[data-p="checklist"] { position:absolute!important; visibility:hidden!important; pointer-events:none!important; width:0!important; height:0!important; min-height:0!important; padding:0!important; margin:0!important; overflow:hidden!important; } /* display тут не годится: штатный код ставит кнопке админа inline display:flex!important */ /* чек-листы убраны из нового дизайна (09.10); данные и классический дизайн не тронуты */ /* подпроекты в левом меню — в новом стиле (09.10): линейный значок вместо эмодзи, значок ставит 31-project-tabs-shtab.js */ :root[data-design="shtab"] #app-sidebar :is(.sb-sub-emoji, .sb-sub-add-ico) { display:none!important; } :root[data-design="shtab"] #app-sidebar :is(.sb-sub-row, .sb-sub-add) { height:36px; min-height:36px!important; padding:0 12px 0 43px!important; gap:11px!important; border-radius:12px!important; font-size:13px!important; white-space:nowrap; transition:background .15s, color .15s; } :root[data-design="shtab"] #app-sidebar .sb-sub-ic { width:16px; height:16px; flex:none; display:grid; place-items:center; color:#7d7d82; transition:color .15s; } :root[data-design="shtab"] #app-sidebar .sb-sub-ic svg { width:16px; height:16px; } :root[data-design="shtab"] #app-sidebar .sb-sub-name { min-width:0; overflow:hidden; text-overflow:ellipsis; } :root[data-design="shtab"] #app-sidebar :is(.sb-sub-row, .sb-sub-add):hover .sb-sub-ic, :root[data-design="shtab"] #app-sidebar .sb-sub-row.active .sb-sub-ic { color:#f4f4f2; } :root[data-design="shtab"] #app-sidebar .sb-sub-row.active { background:#232326!important; color:#fff!important; } :root[data-design="shtab"] #app-sidebar .sb-sub-add { color:#6d6d72!important; } :root[data-design="shtab"] #app-sidebar .sb-sub-add:hover { background:#1f1f22!important; color:#fff!important; } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #app-sidebar .sh-key { margin-left:auto; font:500 11px var(--sh-mono); color:#6d6d72; border:1px solid #2c2c2f; border-radius:7px; padding:2px 7px; } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #app-sidebar .sh-badge { position:absolute; left:33px; top:7px; min-width:17px; height:17px; border-radius:9px; background:var(--sh-lime); color:var(--sh-lime-ink); font:600 10px var(--font-ui); display:grid; place-items:center; padding:0 4px; transition:left .22s var(--sh-spring), top .22s var(--sh-spring); } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) body:not(.pane2).sh-rail-open #app-sidebar .sh-badge { left:auto; right:12px; top:50%; transform:translateY(-50%); transition-delay:.15s; } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) body:not(.pane2).sh-rail-open #app-sidebar .sb-btn .sh-badge + .sh-key, :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) body:not(.pane2).sh-rail-open #app-sidebar .sb-btn:has(.sh-badge) .sh-key { margin-right:26px; } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #app-sidebar .sb-foot { margin-top:auto; border-top:1px solid #26262a!important; padding-top:8px; } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #app-sidebar .sh-pin-btn { display:none!important; position:absolute; right:14px; top:10px; width:28px; height:28px; border-radius:9px; place-items:center; color:#6d6d72; background:none; border:0; cursor:pointer; z-index:2; } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #app-sidebar .sh-pin-btn:hover { color:#fff; background:#1f1f22; } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) body.sh-pin #app-sidebar .sh-pin-btn { color:var(--sh-lime); } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #app-sidebar .sh-pin-btn svg { width:15px; height:15px; } /* ---------- «Стол» (главная) ---------- */ :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) body[data-page="home"] .main-area > .topbar { display:none!important; } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) body[data-page="home"] .main-area { padding:0!important; } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #page-home { padding:0!important; max-width:none!important; height:100%; overflow:hidden; } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #page-home > :not(#shtab-desk) { display:none!important; } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #shtab-desk { display:block!important; height:100%; overflow-y:auto; overflow-x:hidden; scrollbar-width:none; color:var(--sh-ink); font-family:var(--font-ui); } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #shtab-desk::-webkit-scrollbar { display:none; } #shtab-desk button { font:inherit; color:inherit; border:0; background:none; cursor:pointer; } #shtab-desk .sd-mono { font-family:var(--sh-mono); } #shtab-desk .sd-top { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:26px 36px 0; } #shtab-desk .sd-brand { font-weight:600; font-size:17px; white-space:nowrap; } #shtab-desk .sd-brand small { font-weight:400; color:#86868b; font-size:13px; margin-left:10px; } #shtab-desk .sd-seg { display:flex; padding:4px; border-radius:16px; background:rgba(0,0,0,.06); gap:2px; } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]):not([data-theme="light"]) #shtab-desk .sd-seg { background:rgba(255,255,255,.06); } #shtab-desk .sd-seg button { padding:8px 14px; border-radius:12px; font-size:13px; font-weight:500; color:#86868b; transition:.2s; white-space:nowrap; } #shtab-desk .sd-seg button.on { background:var(--popup-surface,#fff); color:var(--sh-ink); box-shadow:0 2px 8px rgba(0,0,0,.12); } #shtab-desk .sd-grid { display:grid; gap:34px 30px; padding:34px 36px 50px; align-items:start; } #shtab-desk .sd-grid > * { min-width:0; } #shtab-desk .sd-wd { background:var(--sh-w); color:var(--sh-t); border-radius:40px; box-shadow:var(--sh-shadow); position:relative; transition:transform .35s var(--sh-spring); } #shtab-desk .sd-lift:hover { transform:translateY(-4px); } #shtab-desk .sd-muted { color:var(--sh-m); } #shtab-desk .sd-dot { width:8px; height:8px; border-radius:50%; background:var(--sh-lime); display:inline-block; box-shadow:0 0 10px rgba(185,243,108,.6); flex:none; } #shtab-desk .sd-dot.off { background:#5c5c61; box-shadow:none; } #shtab-desk .sd-row { display:flex; align-items:center; justify-content:space-between; gap:12px; } #shtab-desk .sd-btn { height:54px; border-radius:18px; display:flex; align-items:center; justify-content:center; gap:10px; font-size:16px; font-weight:500; color:var(--sh-t); background:linear-gradient(180deg,#4d4d50,#3d3d40); box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 16px -8px rgba(0,0,0,.7); transition:transform .2s var(--sh-spring), filter .2s; } #shtab-desk .sd-btn:hover { filter:brightness(1.1); } #shtab-desk .sd-btn:active { transform:translateY(1px) scale(.985); } #shtab-desk .sd-btn.dim { background:linear-gradient(180deg,#303033,#29292b); } #shtab-desk .sd-btn svg { width:18px; height:18px; } #shtab-desk .sd-btns { display:grid; grid-template-columns:1fr 1fr; gap:16px; } /* «Я» + лаймовая подложка */ #shtab-desk .sd-me { margin-bottom:46px; isolation:isolate; } #shtab-desk .sd-me-in { padding:30px 34px 34px; background:var(--sh-w); border-radius:40px; position:relative; box-shadow:var(--sh-shadow); } #shtab-desk .sd-st { font-size:15px; display:flex; align-items:center; gap:10px; min-width:0; } #shtab-desk .sd-st span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #shtab-desk .sd-time { font-size:15px; display:flex; align-items:center; gap:6px; } #shtab-desk .sd-who { display:flex; align-items:center; gap:20px; margin:26px 0 30px; min-width:0; } #shtab-desk .sd-ava { width:78px; height:78px; border-radius:50%; background:linear-gradient(140deg,#f1efe8,#cfcac0); display:grid; place-items:center; color:#1a1a1a; font-weight:600; font-size:28px; flex:none; } #shtab-desk .sd-who b { font-size:30px; font-weight:500; letter-spacing:-.01em; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #shtab-desk .sd-who span { font-size:16px; } /* «Сегодня» */ #shtab-desk .sd-day { padding:30px 34px 34px; } #shtab-desk .sd-day .sd-who { gap:16px; margin:24px 0 26px; } #shtab-desk .sd-day .sd-who b { font-size:24px; } #shtab-desk .sd-ring { width:62px; height:62px; flex:none; } #shtab-desk .sd-cols { display:grid; grid-template-columns:repeat(3,1fr); margin-bottom:28px; } #shtab-desk .sd-cols div { padding:0 22px; border-left:1px solid var(--sh-line); cursor:pointer; } #shtab-desk .sd-cols div:first-child { padding-left:0; border:0; } #shtab-desk .sd-cols small { font-size:14px; color:var(--sh-m); display:block; margin-bottom:8px; } #shtab-desk .sd-cols b { font-size:26px; font-weight:500; } #shtab-desk .sd-cols b.red { color:#ff8a80; } /* папки проектов */ #shtab-desk .sd-cv { position:absolute; inset:8px; border-radius:27px; overflow:hidden; } #shtab-desk .sd-cv i { position:absolute; border-radius:50%; filter:blur(26px); transition:transform 1.2s var(--sh-spring); } #shtab-desk .sd-empty-shelf { grid-column:1/-1; padding:28px; border-radius:30px; border:1.5px dashed rgba(127,127,127,.35); color:#86868b; text-align:center; } /* фокус-блоки */ #shtab-desk .sd-focus { background:#07070a; border-radius:52px; padding:10px 10px 44px; box-shadow:var(--sh-shadow); position:relative; } #shtab-desk .sd-focus-in { background:var(--sh-peri); border-radius:44px; padding:26px; color:#fff; overflow:hidden; } #shtab-desk .sd-fh { display:flex; align-items:center; gap:18px; } #shtab-desk .sd-fh .ic { width:74px; height:74px; border-radius:50%; background:rgba(255,255,255,.18); display:grid; place-items:center; flex:none; } #shtab-desk .sd-fh .ic svg { width:34px; height:34px; } #shtab-desk .sd-fh b { font-size:26px; font-weight:600; line-height:1.1; flex:1; } #shtab-desk .sd-clock { min-width:58px; height:58px; padding:0 8px; border-radius:29px; background:rgba(0,0,40,.18); display:grid; place-items:center; font:500 13px var(--sh-mono); } #shtab-desk .sd-slides-wrap { overflow:hidden; cursor:pointer; } #shtab-desk .sd-slides { display:flex; gap:26px; margin:26px 0 24px; transition:transform .5s var(--sh-spring); } #shtab-desk .sd-sl { flex:none; width:78%; border-left:4px solid rgba(255,255,255,.85); padding:4px 0 4px 22px; transition:opacity .4s; } #shtab-desk .sd-sl b { font-size:25px; font-weight:600; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #shtab-desk .sd-sl span { font-size:25px; opacity:.6; } #shtab-desk .sd-sl.off { opacity:.35; border-left-color:rgba(255,255,255,.4); } #shtab-desk .sd-pill { width:100%; height:70px; border-radius:36px; background:rgba(255,255,255,.18); font-size:22px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:14px; color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.2); transition:background .2s; } #shtab-desk .sd-pill:hover { background:rgba(255,255,255,.26); } #shtab-desk .sd-pill svg { width:24px; height:24px; } #shtab-desk .sd-dots { position:absolute; left:0; right:0; bottom:16px; display:flex; justify-content:center; gap:10px; } #shtab-desk .sd-dots button { width:11px; height:11px; border-radius:50%; background:#2e2f45; transition:.3s; } #shtab-desk .sd-dots button.on { background:var(--sh-peri2); } /* задачи */ #shtab-desk .sd-tasks { padding:30px 34px 30px; } #shtab-desk .sd-tk { display:flex; align-items:center; gap:16px; padding:14px 0; border-top:1px solid var(--sh-line); cursor:pointer; } #shtab-desk .sd-tk:first-child { border-top:0; } #shtab-desk .sd-ck { width:26px; height:26px; border-radius:50%; border:2px solid #4a4a4e; flex:none; display:grid; place-items:center; transition:.25s var(--sh-spring); } #shtab-desk .sd-ck svg { width:13px; height:13px; opacity:0; color:var(--sh-lime-ink); } #shtab-desk .sd-tk.done .sd-ck { background:var(--sh-lime); border-color:var(--sh-lime); transform:scale(1.06); } #shtab-desk .sd-tk.done .sd-ck svg { opacity:1; } #shtab-desk .sd-tk.done .sd-tn { text-decoration:line-through; color:var(--sh-m); } #shtab-desk .sd-tx { flex:1; min-width:0; } #shtab-desk .sd-tn { font-size:16px; font-weight:500; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #shtab-desk .sd-tm { font-size:13px; color:var(--sh-m); display:flex; align-items:center; gap:7px; margin-top:3px; white-space:nowrap; overflow:hidden; } #shtab-desk .sd-pd { width:7px; height:7px; border-radius:50%; flex:none; } #shtab-desk .sd-at { font:500 13px var(--sh-mono); color:var(--sh-m); white-space:nowrap; } #shtab-desk .sd-at.late { color:#ff8a80; } #shtab-desk .sd-none { padding:26px 0 8px; color:var(--sh-m); font-size:15px; } /* три раскладки */ #shtab-desk .sd-grid[data-l="1"] { grid-template-columns:1.25fr 1fr; grid-template-areas:"focus me" "focus day" "tasks tasks" "shelf shelf"; } #shtab-desk .sd-grid[data-l="1"] .sd-focus { align-self:stretch; display:flex; flex-direction:column; } #shtab-desk .sd-grid[data-l="1"] .sd-focus-in { flex:1; display:flex; flex-direction:column; justify-content:space-between; } #shtab-desk .sd-grid[data-l="1"] .sd-fh b { font-size:32px; } #shtab-desk .sd-grid[data-l="1"] .sd-fh .ic { width:86px; height:86px; } #shtab-desk .sd-grid[data-l="1"] .sd-sl b, #shtab-desk .sd-grid[data-l="1"] .sd-sl span { font-size:40px; line-height:1.15; } #shtab-desk .sd-grid[data-l="1"] .sd-sl { padding:10px 0 10px 28px; border-left-width:5px; } #shtab-desk .sd-grid[data-l="1"] .sd-tlist { display:grid; grid-template-columns:1fr 1fr; column-gap:44px; } #shtab-desk .sd-grid[data-l="1"] .sd-tlist .sd-tk:nth-child(2) { border-top:0; } #shtab-desk .sd-grid[data-l="2"] { grid-template-columns:1fr 1.1fr 1fr; grid-template-areas:"me tasks day" "focus tasks shelf"; gap:28px 24px; } #shtab-desk .sd-grid[data-l="2"] .sd-tasks { align-self:stretch; } #shtab-desk .sd-grid[data-l="2"] .sd-cv { inset:6px; border-radius:23px; } #shtab-desk .sd-grid[data-l="2"] .sd-me-in { padding:24px 24px 26px; } #shtab-desk .sd-grid[data-l="2"] .sd-me .sd-who { margin:18px 0 22px; } #shtab-desk .sd-grid[data-l="2"] .sd-me .sd-who b { font-size:24px; } #shtab-desk .sd-grid[data-l="2"] .sd-ava { width:60px; height:60px; font-size:22px; } #shtab-desk .sd-grid[data-l="2"] .sd-day { padding:24px 24px 26px; } #shtab-desk .sd-grid[data-l="2"] .sd-cols div { padding:0 12px; } #shtab-desk .sd-grid[data-l="2"] .sd-cols b { font-size:22px; } #shtab-desk .sd-grid[data-l="2"] .sd-day .sd-btns { grid-template-columns:1fr; } #shtab-desk .sd-grid[data-l="2"] .sd-day .sd-btns .dim { display:none; } #shtab-desk .sd-grid[data-l="2"] .sd-fh b { font-size:21px; } #shtab-desk .sd-grid[data-l="2"] .sd-fh .ic { width:58px; height:58px; } #shtab-desk .sd-grid[data-l="2"] .sd-sl b, #shtab-desk .sd-grid[data-l="2"] .sd-sl span { font-size:20px; } #shtab-desk .sd-grid[data-l="2"] .sd-pill { height:58px; font-size:18px; } #shtab-desk .sd-grid[data-l="3"] { grid-template-columns:1.6fr 1fr; grid-template-areas:"day day" "tasks me" "tasks focus" "shelf shelf"; } #shtab-desk .sd-grid[data-l="3"] .sd-day { display:grid; grid-template-columns:auto 1.3fr minmax(300px,.9fr); align-items:center; gap:34px; padding:24px 30px; border-radius:32px; } #shtab-desk .sd-grid[data-l="3"] .sd-day .sd-head { display:none; } #shtab-desk .sd-grid[data-l="3"] .sd-day .sd-who, #shtab-desk .sd-grid[data-l="3"] .sd-day .sd-cols { margin:0; } #shtab-desk .sd-grid[data-l="3"] .sd-tasks { align-self:stretch; } #shtab-desk .sd-grid[data-l="3"] .sd-tk { padding:17px 0; } @media (max-width:1100px) { #shtab-desk .sd-grid[data-l] { grid-template-columns:1fr; grid-template-areas:"me" "day" "focus" "tasks" "shelf"; } #shtab-desk .sd-grid[data-l] .sd-day { display:block; } #shtab-desk .sd-grid[data-l] .sd-head { display:flex; } #shtab-desk .sd-grid[data-l="1"] .sd-tlist { display:block; } } /* ---------- окно задачи (как «Share») ---------- */ .sd-veil { position:fixed; inset:0; background:rgba(10,10,12,.28); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); opacity:0; pointer-events:none; transition:.3s; z-index:2000; } .sd-veil.open { opacity:1; pointer-events:auto; } .sd-pop { position:fixed; left:50%; top:50%; width:min(440px,calc(100vw - 32px)); transform:translate(-50%,-46%) scale(.96); opacity:0; pointer-events:none; z-index:2001; color:var(--text); border-radius:30px; padding:26px 26px 22px; box-shadow:0 40px 80px -30px rgba(0,0,0,.5); transition:.35s cubic-bezier(.2,.85,.2,1); font-family:var(--font-ui); } .sd-pop.open { opacity:1; pointer-events:auto; transform:translate(-50%,-50%); } .sd-pop h4 { font-size:15px; font-weight:600; margin:0 0 14px; display:flex; justify-content:space-between; align-items:center; } .sd-pop h4 button { color:var(--text3); font-size:18px; background:none; border:0; cursor:pointer; } .sd-pop .sd-ttl { font-size:21px; font-weight:600; letter-spacing:-.01em; margin-bottom:4px; } .sd-pop .sd-sub { font-size:13px; color:var(--text3); display:flex; align-items:center; gap:7px; margin-bottom:22px; } .sd-pop .sd-avs { display:flex; gap:10px; margin-bottom:24px; flex-wrap:wrap; } .sd-pop .sd-avs span { width:46px; height:46px; border-radius:50%; display:grid; place-items:center; font-weight:600; font-size:15px; color:#1a1a1a; cursor:pointer; box-shadow:0 0 0 3px var(--popup-surface); transition:.2s; } .sd-pop .sd-avs span.on { box-shadow:0 0 0 3px var(--popup-surface),0 0 0 5px var(--text); } .sd-pop .sd-sr { display:flex; align-items:center; gap:14px; padding:9px 0; } .sd-pop .sd-ri { width:40px; height:40px; border-radius:50%; background:rgba(var(--ink-rgb),.07); display:grid; place-items:center; flex:none; } .sd-pop .sd-ri svg { width:15px; height:15px; } .sd-pop .sd-sr b { font-size:14px; font-weight:600; display:block; } .sd-pop .sd-sr small { font-size:12px; color:var(--text3); } .sd-pop .sd-x { flex:1; min-width:0; } .sd-pop .sd-chip { padding:7px 14px; border-radius:14px; border:1px solid rgba(var(--ink-rgb),.14); font:600 12px var(--font-ui); background:none; color:var(--text); cursor:pointer; } .sd-pop .sd-sr.done .sd-chip { background:var(--text); color:var(--popup-surface); border-color:var(--text); } .sd-pop .sd-sr.done b { text-decoration:line-through; color:var(--text3); } .sd-pop .sd-foot { margin-top:16px; display:flex; align-items:center; gap:10px; border:1.5px dashed rgba(var(--ink-rgb),.16); border-radius:22px; padding:6px 6px 6px 18px; } .sd-pop .sd-foot input { flex:1; border:0; background:none; font:500 14px var(--font-ui); color:var(--text); outline:none; min-width:0; } .sd-pop .sd-foot button { background:var(--text); color:var(--popup-surface); border:0; border-radius:16px; padding:11px 18px; font:600 13px var(--font-ui); cursor:pointer; } .sd-pop .sd-more { margin-top:14px; width:100%; text-align:center; font:500 13px var(--font-ui); color:var(--text3); background:none; border:0; cursor:pointer; } .sd-pop .sd-more:hover { color:var(--text); } /* узкие виджеты (меню раскрыто, вариант 2): подписи в одну строку, заголовок дня мельче */ #shtab-desk .sd-who span { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #shtab-desk .sd-day { container-type:inline-size; } @container (max-width:380px) { #shtab-desk .sd-day .sd-who b { font-size:19px; } #shtab-desk .sd-cols small { font-size:12px; } } /* ---------- экран проекта (правое окно) ---------- */ :root[data-design="shtab"] #page-project { padding:34px 36px 50px!important; max-width:none!important; } /* шапка проекта — плашка в цвете проекта (09.10, вариант 4 макета iam-project-header-5.html) */ #proj-hero .sd-ph { position:relative; overflow:hidden; border-radius:30px; padding:20px 18px 20px 24px; margin:0 -24px 20px; font-family:var(--font-ui); color:#fff; /* 09.10, макет iam-project-header-bright.html, вариант A: яркая заливка цветом проекта со светлым пятном слева сверху, как плитки «Напоминаний». --pb — цвет проекта, подтянутый до яркого: приглушённые цвета палитры тоже светятся, серые остаются серыми. */ --pb:var(--pc); background:radial-gradient(120% 150% at 22% 18%,color-mix(in oklab,var(--pb) 72%,#fff) 0%,var(--pb) 46%,color-mix(in oklab,var(--pb) 88%,#000) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 26px 40px -26px color-mix(in oklab,var(--pb) 70%,transparent); } @supports (color:oklch(from red l c h)) { #proj-hero .sd-ph { --pb:oklch(from var(--pc) clamp(.62,l,.73) min(max(c,.13),calc(c * 2.2)) h); } } #proj-hero .sd-ph-top { position:relative; display:flex; align-items:center; gap:10px; min-width:0; } #proj-hero .sd-ph-top b { flex:1; min-width:0; font-size:28px; font-weight:500; letter-spacing:-.02em; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #proj-hero .sd-ph .sd-pl-more { color:rgba(255,255,255,.88); } #proj-hero .sd-ph .sd-pl-more:hover { background:rgba(255,255,255,.2); color:#fff; } #proj-hero .sd-ph .sd-pl-back { color:#fff; margin-right:4px; background:rgba(255,255,255,.2); } #proj-hero .sd-ph .sd-pl-back:hover { background:rgba(255,255,255,.3); } #proj-hero .sd-ph-ds { position:relative; font-size:13.5px; line-height:1.45; color:rgba(255,255,255,.84); margin-top:4px; padding-right:60px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } #proj-hero .sd-pl-more { width:38px; height:38px; border-radius:13px; flex:none; display:grid; place-items:center; border:0; padding:0; background:none; color:#8d8d92; cursor:pointer; transition:background .2s, color .2s; } #proj-hero .sd-pl-more:hover, #proj-hero .sd-pl-more[aria-expanded="true"] { background:rgba(255,255,255,.08); color:#f4f4f2; } #proj-hero .sd-pl-more svg { width:18px; height:18px; } /* 10.10: шапка проекта — отдельная панель справа от листа, как левое меню (макет iam-project-wide-3.html, вариант 2, но справа и снаружи). Узел #proj-hero на широком окне лежит в body (переносит 22-design-shtab.js, класс sd-ph-out); лист сужается на ширину панели. */ :root[data-design="shtab"] body[data-page="project"].pp-panel-on { --shell-content-right:calc(var(--shell-inset) + 300px + var(--shell-gap)); } body > #proj-hero.sd-ph-out { position:fixed; z-index:3; top:var(--shell-panel-top,var(--shell-inset,20px)); /* верх — как у листа и левого меню: в IAM.app он ниже из-за полосы окна */ right:var(--shell-inset,20px); bottom:var(--shell-inset,20px); width:300px; margin:0; padding:0; } body:not([data-page="project"]) > #proj-hero { display:none!important; } #proj-hero .sd-ph.sd-ph-v { height:100%; margin:0; border-radius:40px; padding:26px 22px 22px; display:flex; flex-direction:column; overflow-y:auto; scrollbar-width:none; background:radial-gradient(150% 80% at 22% 6%,color-mix(in oklab,var(--pb) 72%,#fff) 0%,var(--pb) 46%,color-mix(in oklab,var(--pb) 86%,#000) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 30px 70px -30px color-mix(in oklab,var(--pb) 70%,transparent); } #proj-hero .sd-ph-v::-webkit-scrollbar { display:none; } #proj-hero .sd-ph-v .sd-ph-top { align-items:flex-start; } #proj-hero .sd-ph-v .sd-ph-top b { font-size:28px; line-height:1.15; white-space:normal; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; } #proj-hero .sd-ph-in { font:500 12.5px var(--sh-mono); color:rgba(255,255,255,.8); margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #proj-hero .sd-ph-v .sd-ph-ds { margin-top:8px; } #proj-hero .sd-ph-ring { width:148px; height:148px; border-radius:50%; flex:none; margin:28px auto 8px; display:grid; place-items:center; background:conic-gradient(#fff calc(var(--p) * 1%),rgba(255,255,255,.28) 0); transition:--p .6s; } #proj-hero .sd-ph-ring > div { width:122px; height:122px; border-radius:50%; display:grid; place-items:center; background:var(--pb); font:600 34px var(--font-ui); letter-spacing:-.03em; } #proj-hero .sd-ph-ring small { font:600 13px var(--sh-mono); letter-spacing:0; margin-left:2px; } #proj-hero .sd-ph-cnt { text-align:center; font:500 12.5px var(--sh-mono); color:rgba(255,255,255,.88); } #proj-hero .sd-ph-v .sd-ph-seg { margin:22px 0 0; } #proj-hero .sd-ph-v .sd-ph-seg button { flex:1 1 0; min-width:0; justify-content:center; height:36px; padding:0 6px; gap:5px; font-size:12.5px; } #proj-hero .sd-ph-k { font:600 11px var(--sh-mono); letter-spacing:.07em; text-transform:uppercase; color:rgba(255,255,255,.75); margin:22px 2px 8px; } #proj-hero .sd-ph-subs { display:flex; flex-direction:column; gap:4px; } #proj-hero .sd-ph-sub { display:flex; align-items:center; gap:10px; width:100%; height:38px; padding:0 11px; border:0; border-radius:13px; background:rgba(255,255,255,.15); color:#fff; font:500 14px var(--font-ui); text-align:left; cursor:pointer; transition:background .2s; } #proj-hero .sd-ph-sub:hover { background:rgba(255,255,255,.26); } #proj-hero .sd-ph-sub svg { width:16px; height:16px; flex:none; } #proj-hero .sd-ph-sub span { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #proj-hero .sd-ph-sub small { font:500 12px var(--sh-mono); opacity:.85; } #proj-hero .sd-ph-bt { margin-top:auto; padding-top:22px; display:flex; align-items:center; gap:8px; } #proj-hero .sd-ph-v .sd-ph-add { flex:1; width:auto; height:44px; margin:0; display:flex; align-items:center; justify-content:center; gap:8px; font:600 14px var(--font-ui); } #proj-hero .sd-ph-v .sd-pl-more { width:44px; height:44px; border-radius:14px; background:rgba(255,255,255,.17); } :root[data-design="shtab"] body.pp-panel-on #page-project { padding-top:22px!important; } /* переключатель «Список / Доска» в шапке проекта */ #proj-hero .sd-ph-seg { display:flex; flex:none; background:rgba(255,255,255,.2); border-radius:13px; padding:3px; margin-right:2px; } #proj-hero .sd-ph-seg button { height:32px; padding:0 12px; border:0; border-radius:10px; background:none; font:500 13px var(--font-ui); color:rgba(255,255,255,.88); display:flex; align-items:center; gap:7px; cursor:pointer; transition:background .2s, color .2s; } #proj-hero .sd-ph-seg button:hover { color:#fff; } #proj-hero .sd-ph-seg button svg { width:15px; height:15px; } #proj-hero .sd-ph-seg button.on { background:#fff; color:#161618; box-shadow:0 4px 10px -4px rgba(0,0,0,.4); } /* вид «Доска»: на всю ширину листа, правая колонка скрыта (класс pp-board ставит 31-й модуль) */ :root[data-design="shtab"] #page-project.pp-board { padding-left:44px!important; padding-right:44px!important; } :root[data-design="shtab"] #page-project.pp-board.active { grid-template-columns:minmax(0,1fr)!important; } :root[data-design="shtab"] #page-project.pp-board > #pp-side { display:none!important; } /* «+» в шапке проекта — тот же, что в разделе «Задачи» */ #proj-hero .sd-ph-add { width:40px; height:40px; border-radius:14px; flex:none; display:grid; place-items:center; border:0; padding:0; margin-left:4px; cursor:pointer; color:#161618; background:linear-gradient(180deg,#fbfbf9,#e6e6e2); box-shadow:inset 0 1px 0 #fff, 0 8px 16px -8px rgba(0,0,0,.7); transition:transform .2s var(--sh-tk-spring); } #proj-hero .sd-ph-add:hover { transform:translateY(-1px); } #proj-hero .sd-ph-add svg { width:17px; height:17px; transition:transform .35s var(--sh-tk-spring); } #proj-hero .sd-ph-add:is(.on,.sh-cp-on) svg { transform:rotate(45deg); } #proj-hero .sd-btn { height:38px; padding:0 14px; border-radius:13px; display:flex; align-items:center; gap:8px; font:500 13.5px var(--font-ui); color:#f4f4f2; border:0; cursor:pointer; background:linear-gradient(180deg,#2c2c2f,#161618); box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 14px -8px rgba(0,0,0,.6); transition:filter .2s, transform .2s; } #proj-hero .sd-btn:hover { filter:brightness(1.18); } #proj-hero .sd-btn:active { transform:translateY(1px); } :root[data-design="shtab"]:not([data-theme="light"]) #proj-hero .sd-btn { background:linear-gradient(180deg,#4d4d50,#3d3d40); } :root[data-design="shtab"]:not([data-theme="light"]) #proj-hero .sd-btn.dim { background:linear-gradient(180deg,#303033,#29292b); } #proj-hero .sd-btn svg { width:16px; height:16px; } :root[data-design="shtab"] #page-project .prj-head, :root[data-design="shtab"] #page-project .prj-desc { display:none; } /* вкладки — один переключатель: тёмная плашка, выбранная вкладка светлая, счётчик моноширинный */ :root[data-design="shtab"] #proj-tabs { padding:0 0 18px!important; } #proj-tabs .sh-pseg { display:contents; } :root[data-design="shtab"] #proj-tabs .sh-pseg { display:inline-flex; gap:2px; padding:4px; border-radius:17px; background:var(--sh-w); box-shadow:0 16px 26px -16px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06); } :root[data-design="shtab"] #proj-tabs .prj-tab { display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 14px!important; border-radius:13px!important; margin:0!important; border:0!important; background:none!important; color:#8d8d92!important; font:500 13.5px var(--font-ui)!important; width:auto!important; box-shadow:none!important; transition:background .2s,color .2s; white-space:nowrap; } :root[data-design="shtab"] #proj-tabs .prj-tab:hover:not(.active) { color:#f4f4f2!important; } :root[data-design="shtab"] #proj-tabs .prj-tab svg { width:16px; height:16px; display:none; } :root[data-design="shtab"] #proj-tabs .prj-tab.active svg { display:block; } :root[data-design="shtab"] #proj-tabs .prj-tab.active { background:linear-gradient(180deg,#f4f4f2,#dededa)!important; color:#161618!important; box-shadow:0 6px 12px -6px rgba(0,0,0,.6)!important; } #proj-tabs .sh-tab-n { display:none; } :root[data-design="shtab"] #proj-tabs .sh-tab-n { display:inline; font:500 11px var(--sh-mono); opacity:.7; } :root[data-design="shtab"] #proj-tabs .sh-tab-n:empty { display:none; } #proj-tabs .sh-tab-l { display:none; } :root[data-design="shtab"] #proj-tabs .sh-tab-l { display:inline; } /* ---------- проект — тёмная рабочая область (09.10, вариант 1 макета iam-project-workspace-5.html) ---------- Весь лист тёмный (правило листа — рядом с разделом «Задачи»). Сетка: шапка / задачи + колонка «Подпроекты» / панель действий режима выбора (кнопка «+» — в шапке, как в «Задачах»). Вкладок нет; #pp-side и #pp-cmd создаёт 31-project-tabs-shtab.js. */ :root[data-design="shtab"] #page-project { --sh-ink:#f4f4f2; padding:30px max(24px, calc((100% - 1100px) / 2)) 0!important; } /* одна колонка по центру: задачи, заметки и секции в одном списке */ :root[data-design="shtab"] #page-project.active { display:grid!important; grid-template-columns:minmax(0,1fr); grid-template-rows:auto 1fr auto; min-height:100%; align-content:start; } :root[data-design="shtab"] #page-project > * { max-width:none!important; margin-left:0!important; margin-right:0!important; } :root[data-design="shtab"] #page-project > #proj-hero { grid-column:1/-1; } :root[data-design="shtab"] #page-project > :is(#proj-tabs,#proj-subprojects-list,#proj-notes-list,#proj-checklist-list) { display:none!important; } :root[data-design="shtab"] #page-project > #proj-tasks-list { grid-column:1; grid-row:2; display:block!important; min-width:0; margin-left:0!important; } /* ширина и край как в «Задачах» (wd1) */ /* колонка «Подпроекты» — только на экране самого проекта, когда подпроекты есть (класс pp-side-on ставит 31-й модуль) */ :root[data-design="shtab"] #page-project.pp-side-on { padding-left:max(44px, calc((100% - 1400px) / 2))!important; padding-right:max(44px, calc((100% - 1400px) / 2))!important; } :root[data-design="shtab"] #page-project.pp-side-on.active { grid-template-columns:minmax(0,1fr) 256px; column-gap:44px; } :root[data-design="shtab"] #page-project > #pp-side { display:none; } :root[data-design="shtab"] #page-project.pp-side-on > #pp-side { display:block; grid-column:2; grid-row:2; align-self:start; position:sticky; top:0; } :root[data-design="shtab"] #page-project > #pp-cmd { grid-column:1/-1; grid-row:3; justify-self:center; max-width:100%; position:sticky; bottom:22px; margin:26px 0 22px; z-index:6; } @media (max-width:1000px) { :root[data-design="shtab"] #page-project.active, :root[data-design="shtab"] #page-project.pp-side-on.active { grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto auto; } :root[data-design="shtab"] #page-project.pp-side-on > #pp-side { grid-column:1; grid-row:3; position:static; margin-top:18px; } :root[data-design="shtab"] #page-project > #pp-cmd { grid-row:4; } } :root[data-design="shtab"] #proj-tasks-list { --text:#f4f4f2; --text2:#c9c9cc; --text3:#8d8d92; --text4:#6d6d72; --ink-rgb:255,255,255; --bg2:#2a2a2d; --bg3:#2d2d30; --bg4:#323235; --border:rgba(255,255,255,.08); --border2:rgba(255,255,255,.1); --accent:#b9f36c; --on-accent:#1c2410; --accent-bg:rgba(185,243,108,.14); --accent-border:rgba(185,243,108,.3); --green:#b9f36c; color:var(--text); } :root[data-design="shtab"] #proj-tasks-list .empty-ico { display:none!important; } :root[data-design="shtab"] #proj-tasks-list .empty { padding:22px 2px!important; text-align:left!important; } :root[data-design="shtab"] #proj-tasks-list .empty-text { font-size:13.5px!important; color:#6d6d72!important; } /* страница проекта (09.10): старые значки «выбрать / сеткой / +» убраны — одна кнопка «+» в шапке, подпись по вкладке */ :root[data-design="shtab"] #proj-tabs > div:not(.sh-pseg) { display:none!important; } :root[data-design="shtab"] #proj-tabs.sh-sub { display:none!important; } /* подпроект: только задачи */ #proj-hero .sd-pl-back { width:38px; height:38px; border-radius:13px; flex:none; display:grid; place-items:center; border:0; padding:0; cursor:pointer; color:var(--sh-ink); background:rgba(255,255,255,.07); transition:background .2s, transform .14s var(--sh-spring); margin-right:-4px; } #proj-hero .sd-pl-back:hover { background:rgba(255,255,255,.13); } #proj-hero .sd-pl-back:active { transform:translateY(1px) scale(.96); } #proj-hero .sd-pl-back svg { width:17px; height:17px; } :root[data-design="shtab"] #proj-tasks-list .task-group { margin:0!important; } /* подпроекты и заметки — тёмные мини-карточки */ :root[data-design="shtab"] #page-project :is(#proj-subprojects-list,#proj-notes-list) .note-grid { gap:20px!important; } :root[data-design="shtab"] #page-project :is(#proj-subprojects-list,#proj-notes-list) .note-card { --text:#f4f4f2; --text2:#c9c9cc; --text3:#8d8d92; --text4:#6d6d72; --ink-rgb:255,255,255; background:var(--sh-w)!important; color:#f4f4f2!important; border:0!important; border-radius:30px!important; padding:22px 24px!important; min-height:130px; box-shadow:var(--sh-shadow)!important; transition:transform .35s var(--sh-spring); } :root[data-design="shtab"] #page-project :is(#proj-subprojects-list,#proj-notes-list) .note-card:hover { transform:translateY(-4px); } :root[data-design="shtab"] #page-project #proj-notes-list .note-card .note-date ~ span { display:none!important; } /* плашка с названием проекта внутри самого проекта лишняя */ :root[data-design="shtab"] #page-project #proj-notes-list .note-card:not([style*="dashed"]) { --text:#e8f7cf; --text2:#c5d8a6; --text3:#a2b684; --text4:#7d9160; background:#29321f!important; color:#e8f7cf!important; border-radius:24px!important; padding:16px 18px!important; } :root[data-design="shtab"] #page-project :is(#proj-subprojects-list,#proj-notes-list) .note-card[style*="dashed"] { background:transparent!important; box-shadow:none!important; border:1.5px dashed rgba(127,127,127,.4)!important; color:var(--sh-ink)!important; } /* ---------- экран «Проекты» (кнопка «Проекты» в меню) ---------- */ #shtab-desk .sd-allgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:30px; padding:34px 36px 50px; } #shtab-desk .sd-newp { height:46px; padding:0 20px; font-size:15px; } #shtab-desk .sd-folder-new { aspect-ratio:1/1; border-radius:34px; border:1.5px dashed rgba(127,127,127,.45)!important; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:#86868b!important; font:500 15px var(--font-ui); transition:.25s var(--sh-spring); } #shtab-desk .sd-folder-new span { font-size:34px; line-height:1; font-weight:300; } #shtab-desk .sd-folder-new:hover { color:var(--sh-ink)!important; border-color:var(--sh-ink)!important; transform:translateY(-4px); } :root[data-design="shtab"] #app-sidebar .sb-proj-lbl.active { background:linear-gradient(180deg,#303033,#28282b)!important; color:#fff!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 6px 12px -6px rgba(0,0,0,.8); } /* ---------- шрифт мельче (−15…20%), 30.09.2026 ---------- */ #shtab-desk .sd-brand { font-size:15px; } #shtab-desk .sd-brand small { font-size:12px; } #shtab-desk .sd-seg button { font-size:12px; padding:7px 12px; } #shtab-desk .sd-btn { font-size:14px; height:48px; border-radius:16px; } #shtab-desk .sd-btn svg { width:16px; height:16px; } #shtab-desk .sd-st, #shtab-desk .sd-time { font-size:13px; } #shtab-desk .sd-who b { font-size:24px; } #shtab-desk .sd-who span { font-size:14px; } #shtab-desk .sd-ava { width:64px; height:64px; font-size:22px; } #shtab-desk .sd-day .sd-who b { font-size:20px; } #shtab-desk .sd-cols small { font-size:12px; } #shtab-desk .sd-cols b { font-size:22px; } #shtab-desk .sd-row[style] { font-size:13px!important; } #shtab-desk .sd-row span[style] { font-size:12px!important; } #shtab-desk .sd-fh b { font-size:21px; } #shtab-desk .sd-fh .ic { width:62px; height:62px; } #shtab-desk .sd-sl b, #shtab-desk .sd-sl span { font-size:20px; } #shtab-desk .sd-pill { font-size:17px; height:58px; } #shtab-desk .sd-clock { font-size:12px; } #shtab-desk .sd-tn { font-size:14px; } #shtab-desk .sd-tm, #shtab-desk .sd-at { font-size:12px; } #shtab-desk .sd-folder-new { font-size:13px; } /* раскладки с собственными размерами */ #shtab-desk .sd-grid[data-l="1"] .sd-fh b { font-size:26px; } #shtab-desk .sd-grid[data-l="1"] .sd-sl b, #shtab-desk .sd-grid[data-l="1"] .sd-sl span { font-size:30px; } #shtab-desk .sd-grid[data-l="2"] .sd-me .sd-who b { font-size:20px; } #shtab-desk .sd-grid[data-l="2"] .sd-ava { width:54px; height:54px; font-size:19px; } #shtab-desk .sd-grid[data-l="2"] .sd-cols b { font-size:19px; } #shtab-desk .sd-grid[data-l="2"] .sd-fh b { font-size:18px; } #shtab-desk .sd-grid[data-l="2"] .sd-sl b, #shtab-desk .sd-grid[data-l="2"] .sd-sl span { font-size:17px; } #shtab-desk .sd-grid[data-l="2"] .sd-pill { font-size:15px; height:52px; } @container (max-width:380px) { #shtab-desk .sd-day .sd-who b { font-size:17px; } } /* меню и окно задачи */ :root[data-design="shtab"] #app-sidebar :is(.sb-btn, .sb-proj-lbl) { font-size:14px!important; } :root[data-design="shtab"] #app-sidebar .sb-proj-row { font-size:13px!important; } :root[data-design="shtab"] #app-sidebar .sb-brand span { font-size:15px; } .sd-pop .sd-ttl { font-size:18px; } .sd-pop h4 { font-size:13px; } .sd-pop .sd-sr b { font-size:13px; } /* ===== Папка проекта — «Предмет+» (30.09.2026): размытая обложка в цвете проекта, вкладка с названием, тёмный корпус. Наведение: корпус опускается, из обложки выезжают 3 последние задачи. ⚙ — настройки внутри. Размеры от ширины 336 px через --u ===== */ :root[data-design="shtab"] #shtab-desk .sd-pf { --u:calc(100cqw / 336); --pc:#8b83ff; position:relative; aspect-ratio:1/1; container-type:inline-size; cursor:pointer; outline:none; border-radius:10%; background:#0b0b0c; box-shadow:var(--sh-shadow); transition:transform .45s var(--sh-spring); -webkit-tap-highlight-color:transparent; } :root[data-design="shtab"] #shtab-desk .sd-pf:focus-visible { box-shadow:var(--sh-shadow), 0 0 0 2px var(--sh-canvas), 0 0 0 4px var(--sh-ink); } #shtab-desk .sd-pf .sd-cv { position:absolute; inset:calc(8 * var(--u)); border-radius:calc(27 * var(--u)); overflow:hidden; clip-path:inset(0 round calc(27 * var(--u))); -webkit-mask-image:-webkit-radial-gradient(white, black); } #shtab-desk .sd-pf .sd-cv i { position:absolute; border-radius:50%; filter:blur(26px); transition:transform 1.2s var(--sh-spring), background .45s; } #shtab-desk .sd-pf-tk { position:absolute; left:calc(18 * var(--u)); right:calc(18 * var(--u)); top:calc(16 * var(--u)); z-index:1; pointer-events:none; } #shtab-desk .sd-pf-c { position:absolute; left:0; right:0; height:calc(34 * var(--u)); min-height:22px; border-radius:calc(13 * var(--u)); background:rgba(250,250,247,.94); color:#1d1d1f; display:flex; align-items:center; gap:calc(9 * var(--u)); padding:0 calc(12 * var(--u)); box-shadow:0 8px 16px -8px rgba(0,0,0,.45); opacity:0; transition:transform .6s var(--sh-spring), opacity .4s; } #shtab-desk .sd-pf-c:nth-child(1) { top:0; transform:translateY(70px) scale(.9); } #shtab-desk .sd-pf-c:nth-child(2) { top:calc(38 * var(--u)); transform:translateY(60px) scale(.92); } #shtab-desk .sd-pf-c:nth-child(3) { top:calc(76 * var(--u)); transform:translateY(50px) scale(.94); } #shtab-desk .sd-pf-c span { flex:1; min-width:0; font-size:max(10px, calc(12.5 * var(--u))); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #shtab-desk .sd-pf-c small { font:500 max(9px, calc(10.5 * var(--u))) var(--sh-mono); color:#8b8b86; white-space:nowrap; } #shtab-desk .sd-pf-c em { width:calc(16 * var(--u)); height:calc(16 * var(--u)); min-width:12px; min-height:12px; border-radius:50%; border:1.5px solid #c4c4bf; flex:none; display:grid; place-items:center; font-style:normal; } #shtab-desk .sd-pf-c em.dn { background:var(--sh-lime); border-color:var(--sh-lime); } #shtab-desk .sd-pf-c em.dn::after { content:""; width:38%; height:18%; border:solid #000; border-width:0 0 1.6px 1.6px; transform:rotate(-45deg) translate(8%,-18%); } #shtab-desk .sd-pf-tab { position:absolute; left:calc(8 * var(--u) - 1px); top:34%; width:calc(245 * var(--u) + 1px); height:calc(36 * var(--u)); z-index:2; background:var(--sh-w); -webkit-mask:url("data:image/svg+xml;utf8,") 0 0 / 100% 100% no-repeat; mask:url("data:image/svg+xml;utf8,") 0 0 / 100% 100% no-repeat; transition:top .6s var(--sh-spring), opacity .25s; } #shtab-desk .sd-pf-title { position:absolute; left:calc(28 * var(--u)); top:calc(34% + 13 * var(--u)); right:calc(36% + 14 * var(--u)); z-index:4; color:var(--sh-t); transition:top .6s var(--sh-spring), opacity .25s; } #shtab-desk .sd-pf-title b { display:block; font-size:max(12px, calc(16 * var(--u))); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #shtab-desk .sd-pf-title small { display:block; font-size:max(10px, calc(12 * var(--u))); color:var(--sh-m); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* корпус (в настройках разворачивается) */ #shtab-desk .sd-pf-fr { position:absolute; left:calc(8 * var(--u) - 1px); width:calc(100% - 16 * var(--u) + 2px); top:calc(34% + 34 * var(--u)); height:calc(66% - 42 * var(--u) + 1px); z-index:3; overflow:hidden; background:var(--sh-w); color:var(--sh-t); border-radius:0 calc(24 * var(--u)) calc(27 * var(--u)) calc(27 * var(--u)); transition:top .6s var(--sh-spring), height .6s var(--sh-spring), width .6s var(--sh-spring), border-radius .6s var(--sh-spring), box-shadow .4s; } #shtab-desk .sd-pf-face { position:absolute; inset:0; padding:0 calc(20 * var(--u)) calc(18 * var(--u)); display:flex; align-items:flex-end; justify-content:space-between; gap:8px; transition:opacity .25s; } #shtab-desk .sd-pf-face b { display:flex; align-items:baseline; white-space:nowrap; font-size:max(24px, calc(36 * var(--u))); font-weight:600; letter-spacing:-.03em; line-height:.9; } #shtab-desk .sd-pf-face b small { font-size:max(10px, calc(13 * var(--u))); font-weight:500; letter-spacing:0; margin-left:calc(6 * var(--u)); } #shtab-desk .sd-pf-face > span { font-size:max(10px, calc(13 * var(--u))); color:var(--sh-m); white-space:nowrap; } #shtab-desk .sd-pf-gear { position:absolute; right:calc(14 * var(--u)); top:calc(14 * var(--u)); width:max(28px, calc(36 * var(--u))); height:max(28px, calc(36 * var(--u))); border-radius:calc(12 * var(--u)); display:grid; place-items:center; color:#cfcfd2; border:0; cursor:pointer; opacity:0; transform:scale(.85); background:linear-gradient(180deg, #4d4d50, #3d3d40); box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 6px 12px -6px rgba(0,0,0,.7); transition:opacity .25s, transform .35s var(--sh-spring); } #shtab-desk .sd-pf-gear:hover { color:#fff; } #shtab-desk .sd-pf-gear svg { width:48%; height:48%; } @container (max-width:200px) { #shtab-desk .sd-pf-face > span, #shtab-desk .sd-pf-title small { display:none; } } /* наведение */ #shtab-desk .sd-pf:is(:hover, :root[data-kbd] :focus-within):not(.cfg) { transform:translateY(-6px) rotate(-.6deg); } #shtab-desk .sd-pf:is(:hover, :root[data-kbd] :focus-within):not(.cfg) .sd-cv i { transform:translate(var(--dx), var(--dy)) scale(1.15); } /* язычок и подпись едут через top, как корпус: transform шёл отдельным потоком и на кадр отставал — между язычком и корпусом мелькала линия (10.10) */ #shtab-desk .sd-pf:is(:hover, :root[data-kbd] :focus-within):not(.cfg) .sd-pf-tab { top:calc(34% + 28 * var(--u)); } #shtab-desk .sd-pf:is(:hover, :root[data-kbd] :focus-within):not(.cfg) .sd-pf-title { top:calc(34% + 41 * var(--u)); } #shtab-desk .sd-pf:is(:hover, :root[data-kbd] :focus-within):not(.cfg) .sd-pf-fr { top:calc(34% + 62 * var(--u)); height:calc(66% - 70 * var(--u) + 1px); } #shtab-desk .sd-pf:is(:hover, :root[data-kbd] :focus-within):not(.cfg) .sd-pf-c { opacity:1; transform:none; } #shtab-desk .sd-pf:is(:hover, :root[data-kbd] :focus-within):not(.cfg) .sd-pf-c:nth-child(2) { transition-delay:.05s; } #shtab-desk .sd-pf:is(:hover, :root[data-kbd] :focus-within):not(.cfg) .sd-pf-c:nth-child(3) { transition-delay:.1s; } #shtab-desk .sd-pf:is(:hover, :root[data-kbd] :focus-within) .sd-pf-gear { opacity:1; transform:none; } @media (hover:none) { #shtab-desk .sd-pf-gear { opacity:1; transform:none; } } /* клик — открытие: карточки улетают вверх, корпус проседает */ #shtab-desk .sd-pf.opening { transform:scale(.97)!important; } #shtab-desk .sd-pf.opening .sd-pf-c { transform:translateY(calc(-40 * var(--u)))!important; opacity:0!important; transition-duration:.35s; } #shtab-desk .sd-pf.opening .sd-pf-fr { top:calc(34% + 80 * var(--u))!important; } /* язычок и подпись проседают вместе с корпусом — иначе между ними мелькала полоса обложки (29.10, владелец) */ #shtab-desk .sd-pf.opening .sd-pf-tab { top:calc(34% + 46 * var(--u))!important; } #shtab-desk .sd-pf.opening .sd-pf-title { top:calc(34% + 59 * var(--u))!important; } /* настройки: корпус разворачивается, обложка с цветом остаётся видна сверху */ #shtab-desk .sd-pf.cfg :is(.sd-pf-tab, .sd-pf-title) { opacity:0; } #shtab-desk .sd-pf.cfg-now .sd-pf-fr, #shtab-desk .sd-pf.cfg-now .sd-pf-set { transition:none!important; } #shtab-desk .sd-pf.cfg .sd-pf-face { opacity:0; pointer-events:none; } #shtab-desk .sd-pf.cfg .sd-pf-gear { opacity:0!important; pointer-events:none; } #shtab-desk .sd-pf-set { position:absolute; inset:0; padding:18px 20px; display:flex; flex-direction:column; gap:13px; opacity:0; transition:opacity .2s; } #shtab-desk .sd-pf.cfg .sd-pf-set { opacity:1; transition:opacity .3s .15s; } #shtab-desk .sd-pf-set label { display:block; font:500 11px var(--sh-mono); color:var(--sh-m); letter-spacing:.05em; text-transform:uppercase; margin-bottom:8px; } #shtab-desk .sd-pf-hint { text-transform:none; letter-spacing:0; margin-left:6px; color:#6d6d72; } #shtab-desk .sd-pf-nm { flex:1; min-width:0; height:44px; border:0; border-radius:14px; background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); padding:0 14px; color:var(--sh-t); font:600 17px var(--font-ui); outline:none; transition:box-shadow .2s; } #shtab-desk .sd-pf-nm:focus { box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45); } #shtab-desk .sd-pf-sw { display:flex; gap:7px; flex-wrap:wrap; } #shtab-desk .sd-pf-sw button { width:26px; height:26px; border:0; border-radius:50%; position:relative; cursor:pointer; padding:0; transition:transform .25s var(--sh-spring); } #shtab-desk .sd-pf-sw button:hover { transform:scale(1.12); } #shtab-desk .sd-pf-sw button.on { box-shadow:0 0 0 2px #1f1f21, 0 0 0 4px #f4f4f2; } #shtab-desk .sd-pf-cu { background:conic-gradient(#ff6b6b, #ffc94d, #3dd68c, #4fc3f7, #8b83ff, #ff7ab6, #ff6b6b); overflow:hidden; } #shtab-desk .sd-pf-cu input { position:absolute; inset:-6px; opacity:0; cursor:pointer; } #shtab-desk .sd-pf-two { display:grid; grid-template-columns:1fr 1fr; gap:12px; } #shtab-desk .sd-pf-fld { width:100%; height:40px; border:0; border-radius:12px; background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); padding:0 8px; color:var(--sh-t); font:500 12px var(--sh-mono); outline:none; color-scheme:dark; } #shtab-desk .sd-pf-seg { display:flex; height:40px; padding:3px; border-radius:12px; background:rgba(255,255,255,.05); } #shtab-desk .sd-pf-seg button { flex:1; border:0; border-radius:9px; background:none; color:var(--sh-m); font:500 12.5px var(--font-ui); cursor:pointer; transition:.2s; } #shtab-desk .sd-pf-seg button.on { color:#f4f4f2; background:linear-gradient(180deg, #4d4d50, #3d3d40); box-shadow:inset 0 1px 0 rgba(255,255,255,.14); } #shtab-desk .sd-pf-mem { display:flex; gap:8px; flex-wrap:wrap; } #shtab-desk .sd-pf-mem button { width:32px; height:32px; border:0; border-radius:50%; position:relative; color:#161618; font:600 11px var(--font-ui); cursor:pointer; opacity:.3; filter:grayscale(1); transition:.25s var(--sh-spring); } #shtab-desk .sd-pf-mem button.on { opacity:1; filter:none; } #shtab-desk .sd-pf-mem button.on::after { content:""; position:absolute; right:-2px; bottom:-2px; width:11px; height:11px; border-radius:50%; background:var(--sh-lime); box-shadow:0 0 0 2px #1f1f21; } #shtab-desk .sd-pf-mem button:disabled { cursor:progress; } #shtab-desk .sd-pf-act { display:flex; align-items:center; gap:10px; margin-top:auto; } #shtab-desk .sd-pf-act .sd-btn { height:44px; padding:0 16px; font-size:14px; flex:none; } #shtab-desk .sd-pf-arc { margin-right:auto; height:40px; padding:0 4px; border:0; background:none; color:var(--sh-m); font:500 13px var(--font-ui); cursor:pointer; } #shtab-desk .sd-pf-arc:hover { color:#f87171; } /* сетки */ #shtab-desk .sd-allgrid { grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:26px; } #shtab-desk .sd-folder-new { aspect-ratio:1/1; border-radius:10%; } /* Стол и «Проекты» не меняют размер при раскрытии меню: ширина = лист при раскрытом меню (100vw − 20·2 − 258 − 16) */ @media (min-width:761px) { :root[data-design="shtab"] body:not(.pane2) #shtab-desk :is(.sd-top, .sd-grid, .sd-allgrid) { width:min(100%, calc(100vw - 314px)); margin-inline:auto; box-sizing:border-box; } } /* Настройки проекта в стиле папки: папка раздвигается в сетке на 2×2 (соседей не перекрывает), сверху обложка в цвете проекта, вкладка с редактируемым названием, тёмный корпус с полями */ :root[data-design="shtab"] #shtab-desk .sd-pf.cfg { grid-column:span 2; grid-row:span 2; aspect-ratio:auto; min-height:470px; transform:none; cursor:default; z-index:5; animation:sdPfGrow .5s var(--sh-spring); } @keyframes sdPfGrow { from { transform:scale(.92); opacity:.4; } } #shtab-desk .sd-pf.cfg :is(.sd-pf-tab, .sd-pf-title, .sd-pf-fr, .sd-pf-tk) { opacity:0; pointer-events:none; transition:opacity .15s; } #shtab-desk .sd-pf .sd-pf-set { position:absolute; inset:0; padding:0; display:block; z-index:6; } #shtab-desk .sd-ps-x { position:absolute; top:calc(8 * var(--u) + 12px); right:calc(8 * var(--u) + 12px); width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:rgba(250,250,247,.9)!important; color:#161618!important; font-size:15px; box-shadow:0 8px 14px -8px rgba(0,0,0,.5); transition:transform .3s var(--sh-spring); } #shtab-desk .sd-ps-x:hover { transform:rotate(90deg); } #shtab-desk .sd-ps-tab { position:absolute; left:calc(8 * var(--u) - 1px); top:84px; width:min(74%, 400px); height:58px; padding:11px 0 0 20px; background:var(--sh-w); -webkit-mask:url("data:image/svg+xml;utf8,") 0 0 / 100% 100% no-repeat; mask:url("data:image/svg+xml;utf8,") 0 0 / 100% 100% no-repeat; transform:translateY(10px); opacity:0; transition:transform .5s var(--sh-spring), opacity .3s; } #shtab-desk .sd-ps-tab .sd-pf-nm { display:block; width:calc(100% - 64px); height:28px; padding:0; border:0; border-bottom:1.5px solid transparent; border-radius:0; background:none; box-shadow:none; color:var(--sh-t); font:600 18px var(--font-ui); outline:none; } #shtab-desk .sd-ps-tab .sd-pf-nm:focus { box-shadow:none; border-bottom-color:rgba(255,255,255,.35); } #shtab-desk .sd-ps-tab small { display:block; margin-top:2px; font:500 11px var(--sh-mono); color:var(--sh-m); } #shtab-desk .sd-ps-body { position:absolute; left:calc(8 * var(--u) - 1px); right:calc(8 * var(--u) - 1px); top:140px; bottom:calc(8 * var(--u) - 1px); padding:18px 20px; display:flex; flex-direction:column; gap:14px; background:var(--sh-w); color:var(--sh-t); border-radius:0 24px 27px 27px; overflow:auto; scrollbar-width:none; transform:translateY(14px); opacity:0; transition:transform .55s var(--sh-spring), opacity .3s; } #shtab-desk .sd-pf.cfg .sd-ps-tab, #shtab-desk .sd-pf.cfg .sd-ps-body { transform:none; opacity:1; } #shtab-desk .sd-pf.cfg .sd-ps-body { transition-delay:.05s; } #shtab-desk .sd-pf.cfg-now { animation:none; } #shtab-desk .sd-pf.cfg-now :is(.sd-ps-tab, .sd-ps-body) { transition:none!important; } #shtab-desk .sd-pf-arc { white-space:nowrap; } #shtab-desk .sd-ps-body .sd-pf-act .sd-btn { padding:0 14px; } /* Папки «Нового» дизайна анимируются и при macOS «Уменьшение движения» (выбор владельца, как у «Пути»): system.css сжимает все переходы до 0,01 мс — здесь возвращаем исходные длительности только для папок */ @media (prefers-reduced-motion:reduce) { :root[data-design="shtab"] #shtab-desk .sd-pf { transition:transform .45s var(--sh-spring)!important; } :root[data-design="shtab"] #shtab-desk .sd-pf .sd-cv i { transition:transform 1.2s var(--sh-spring), background .45s!important; } :root[data-design="shtab"] #shtab-desk .sd-pf-c { transition:transform .6s var(--sh-spring), opacity .4s!important; } :root[data-design="shtab"] #shtab-desk :is(.sd-pf-tab, .sd-pf-title) { transition:top .6s var(--sh-spring), opacity .25s!important; } :root[data-design="shtab"] #shtab-desk .sd-pf-fr { transition:top .6s var(--sh-spring), height .6s var(--sh-spring), width .6s var(--sh-spring), border-radius .6s var(--sh-spring), box-shadow .4s!important; } :root[data-design="shtab"] #shtab-desk .sd-pf-face { transition:opacity .25s!important; } :root[data-design="shtab"] #shtab-desk .sd-pf-gear { transition:opacity .25s, transform .35s var(--sh-spring)!important; } :root[data-design="shtab"] #shtab-desk .sd-pf-set { transition:opacity .3s!important; } :root[data-design="shtab"] #shtab-desk .sd-ps-tab { transition:transform .5s var(--sh-spring), opacity .3s!important; } :root[data-design="shtab"] #shtab-desk .sd-ps-body { transition:transform .55s var(--sh-spring), opacity .3s!important; } :root[data-design="shtab"] #shtab-desk .sd-ps-x { transition:transform .3s var(--sh-spring)!important; } :root[data-design="shtab"] #shtab-desk .sd-pf.opening :is(.sd-pf-c, .sd-pf-fr, .sd-pf-tab, .sd-pf-title) { transition-duration:.35s!important; } :root[data-design="shtab"] #shtab-desk .sd-pf.cfg { animation-duration:.5s!important; } :root[data-design="shtab"] #shtab-desk .sd-pf.cfg-now :is(.sd-ps-tab, .sd-ps-body) { transition:none!important; } } /* ===== «Стол» — 6 одинаковых карточек 3×2 (30.09.2026). Каждая сверстана в 411×303 и масштабируется zoom под колонку (--z из fitDesk) ===== */ :root[data-design="shtab"] #shtab-desk .sd-grid[data-l="6"] { grid-template-columns:repeat(3, 1fr); grid-template-areas:"me day focus" "tasks shelf new"; gap:28px; align-items:start; } :root[data-design="shtab"] #shtab-desk .sd-grid[data-l="6"] > section { width:411px; height:303px; zoom:var(--z, .78); margin:0; justify-self:start; border-radius:34px; overflow:hidden; transition:transform .45s var(--sh-spring); } :root[data-design="shtab"] #shtab-desk .sd-grid[data-l="6"] > section:not(.sd-new6):hover { transform:translateY(-4px); } @media (max-width:1100px) { :root[data-design="shtab"] #shtab-desk .sd-grid[data-l="6"] { grid-template-columns:repeat(2, 1fr); grid-template-areas:"me day" "focus tasks" "shelf new"; } } @media (max-width:760px) { :root[data-design="shtab"] #shtab-desk .sd-grid[data-l="6"] { grid-template-columns:1fr; grid-template-areas:"me" "day" "focus" "tasks" "shelf" "new"; } } /* «Я» — прежний вид: тёмная карточка, лаймовая подложка выглядывает снизу; всё вместе 411×303 */ :root[data-design="shtab"] #shtab-desk .sd-grid[data-l="6"] > .sd-me { background:none; box-shadow:none; overflow:visible; isolation:isolate; border-radius:0; } #shtab-desk .sd-grid[data-l="6"] .sd-me-in { height:257px; padding:24px 24px 26px; border-radius:40px; box-shadow:var(--sh-shadow); display:flex; flex-direction:column; } #shtab-desk .sd-grid[data-l="6"] .sd-me .sd-who { margin:18px 0 0; } #shtab-desk .sd-grid[data-l="6"] .sd-me .sd-who b { font-size:24px; } #shtab-desk .sd-grid[data-l="6"] .sd-ava { width:60px; height:60px; font-size:22px; } #shtab-desk .sd-grid[data-l="6"] .sd-btns { margin-top:auto; } /* «Сегодня» */ #shtab-desk .sd-grid[data-l="6"] .sd-day { padding:26px 28px; display:flex; flex-direction:column; } #shtab-desk .sd-grid[data-l="6"] .sd-day .sd-who { margin:18px 0 20px; gap:18px; } #shtab-desk .sd-grid[data-l="6"] .sd-day .sd-who b { font-size:20px; } #shtab-desk .sd-grid[data-l="6"] .sd-ring { width:58px; height:58px; } #shtab-desk .sd-grid[data-l="6"] .sd-cols { margin-bottom:0; } #shtab-desk .sd-grid[data-l="6"] .sd-cols div { padding:0 16px; } #shtab-desk .sd-grid[data-l="6"] .sd-cols small { font-size:13px; margin-bottom:6px; } #shtab-desk .sd-grid[data-l="6"] .sd-cols b { font-size:22px; } #shtab-desk .sd-grid[data-l="6"] .sd-day .sd-btns { grid-template-columns:1fr; } #shtab-desk .sd-grid[data-l="6"] .sd-day .sd-btns .dim { display:none; } /* «Фокус-блоки» — прежний вид (чёрная рамка, точки внизу), вписан в 411×303 */ :root[data-design="shtab"] #shtab-desk .sd-grid[data-l="6"] > .sd-focus { overflow:visible; border-radius:52px; padding:10px 10px 44px; display:flex; } #shtab-desk .sd-grid[data-l="6"] .sd-focus-in { flex:1; height:249px; box-sizing:border-box; border-radius:44px; padding:24px 26px; display:flex; flex-direction:column; } #shtab-desk .sd-grid[data-l="6"] .sd-fh b { font-size:21px; } #shtab-desk .sd-grid[data-l="6"] .sd-fh .ic { width:58px; height:58px; } #shtab-desk .sd-grid[data-l="6"] .sd-slides { margin:18px 0 18px; } #shtab-desk .sd-grid[data-l="6"] .sd-sl b, #shtab-desk .sd-grid[data-l="6"] .sd-sl span { font-size:20px; } #shtab-desk .sd-grid[data-l="6"] .sd-pill { margin-top:auto; height:52px; font-size:17px; } /* «Задачи на сегодня» */ #shtab-desk .sd-grid[data-l="6"] .sd-tasks { padding:26px 28px 22px; display:flex; flex-direction:column; } #shtab-desk .sd-grid[data-l="6"] .sd-tk { padding:9px 0; gap:12px; } #shtab-desk .sd-grid[data-l="6"] .sd-ck { width:22px; height:22px; } #shtab-desk .sd-grid[data-l="6"] .sd-tn { font-size:14px; } #shtab-desk .sd-grid[data-l="6"] :is(.sd-tm, .sd-at) { font-size:12px; } #shtab-desk .sd-tmore { margin-top:auto; padding-top:8px; display:flex; justify-content:space-between; font-size:13px; color:var(--sh-m); cursor:pointer; } #shtab-desk .sd-tmore:hover { color:var(--sh-t); } /* папка «Проекты» (Предмет+) */ #shtab-desk .sd-pall { position:relative; background:#0b0b0c; box-shadow:var(--sh-shadow); cursor:pointer; outline:none; } #shtab-desk .sd-pall:focus-visible { box-shadow:var(--sh-shadow), 0 0 0 2px var(--sh-canvas), 0 0 0 4px var(--sh-ink); } #shtab-desk .sd-pall-cv { position:absolute; inset:8px; border-radius:27px; overflow:hidden; clip-path:inset(0 round 27px); -webkit-mask-image:-webkit-radial-gradient(white, black); } #shtab-desk .sd-pall-cv i { position:absolute; border-radius:50%; filter:blur(30px); transition:transform 1.2s var(--sh-spring); } #shtab-desk .sd-pall-tk { position:absolute; left:18px; right:18px; top:16px; z-index:1; pointer-events:none; } #shtab-desk .sd-pall-c { position:absolute; left:0; right:0; height:32px; border-radius:12px; background:rgba(250,250,247,.95); color:#1d1d1f; display:flex; align-items:center; gap:9px; padding:0 12px; font-size:13px; font-weight:500; box-shadow:0 8px 16px -8px rgba(0,0,0,.45); opacity:0; transition:transform .6s var(--sh-spring), opacity .4s; } #shtab-desk .sd-pall-c i { width:10px; height:10px; border-radius:3px; flex:none; } #shtab-desk .sd-pall-c span { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #shtab-desk .sd-pall-c small { font:500 11px var(--sh-mono); color:#8b8b86; } #shtab-desk .sd-pall-c:nth-child(1) { top:0; transform:translateY(70px) scale(.9); } #shtab-desk .sd-pall-c:nth-child(2) { top:36px; transform:translateY(60px) scale(.92); } #shtab-desk .sd-pall-c:nth-child(3) { top:72px; transform:translateY(50px) scale(.94); } #shtab-desk .sd-pall-tab { position:absolute; left:7px; top:36%; width:62%; height:44px; z-index:2; background:var(--sh-w); transition:top .6s var(--sh-spring); -webkit-mask:url("data:image/svg+xml;utf8,") 0 0 / 100% 100% no-repeat; mask:url("data:image/svg+xml;utf8,") 0 0 / 100% 100% no-repeat; } #shtab-desk .sd-pall-nm { position:absolute; left:28px; top:calc(36% + 13px); z-index:4; color:var(--sh-t); transition:top .6s var(--sh-spring); } #shtab-desk .sd-pall-nm b { display:block; font-size:17px; font-weight:600; } #shtab-desk .sd-pall-nm small { font-size:12.5px; color:var(--sh-m); } #shtab-desk .sd-pall-bd { position:absolute; left:7px; right:7px; bottom:7px; top:calc(36% + 42px); z-index:3; background:var(--sh-w); color:var(--sh-t); border-radius:0 24px 27px 27px; padding:0 22px 20px; display:flex; align-items:flex-end; justify-content:space-between; transition:top .6s var(--sh-spring); } #shtab-desk .sd-pall-bd b { display:flex; align-items:baseline; font-size:38px; font-weight:600; letter-spacing:-.03em; line-height:.9; white-space:nowrap; } #shtab-desk .sd-pall-bd b small { font-size:13px; font-weight:500; letter-spacing:0; margin-left:6px; } #shtab-desk .sd-pall-ar { width:38px; height:38px; border-radius:50%; background:#f4f4f2; color:#161618; display:grid; place-items:center; flex:none; } #shtab-desk .sd-pall-ar svg { width:15px; height:15px; } #shtab-desk .sd-grid[data-l="6"] > .sd-pall:is(:hover, :focus-visible) { transform:translateY(-6px) rotate(-.5deg); } #shtab-desk .sd-pall:is(:hover, :focus-visible) .sd-pall-cv i { transform:translate(var(--dx), var(--dy)) scale(1.15); } #shtab-desk .sd-pall:is(:hover, :focus-visible) .sd-pall-tab { top:calc(36% + 34px); } /* через top, как корпус — см. .sd-pf-tab */ #shtab-desk .sd-pall:is(:hover, :focus-visible) .sd-pall-nm { top:calc(36% + 47px); } #shtab-desk .sd-pall:is(:hover, :focus-visible) .sd-pall-bd { top:calc(36% + 76px); } #shtab-desk .sd-pall:is(:hover, :focus-visible) .sd-pall-c { opacity:1; transform:none; } #shtab-desk .sd-pall:is(:hover, :focus-visible) .sd-pall-c:nth-child(2) { transition-delay:.05s; } #shtab-desk .sd-pall:is(:hover, :focus-visible) .sd-pall-c:nth-child(3) { transition-delay:.1s; } /* место под 6-ю карточку */ #shtab-desk .sd-new6 { visibility:hidden; border:1.5px dashed rgba(127,127,127,.45); color:#86868b; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; font-size:14px; text-align:center; padding:0 40px; } #shtab-desk .sd-new6 b { font-size:34px; font-weight:300; line-height:1; } /* анимации Стола работают и при macOS «Уменьшение движения» (выбор владельца) */ @media (prefers-reduced-motion:reduce) { :root[data-design="shtab"] #shtab-desk .sd-grid[data-l="6"] > section { transition:transform .45s var(--sh-spring)!important; } :root[data-design="shtab"] #shtab-desk .sd-pall-cv i { transition:transform 1.2s var(--sh-spring)!important; } :root[data-design="shtab"] #shtab-desk .sd-pall-c { transition:transform .6s var(--sh-spring), opacity .4s!important; } :root[data-design="shtab"] #shtab-desk :is(.sd-pall-tab, .sd-pall-nm) { transition:top .6s var(--sh-spring)!important; } :root[data-design="shtab"] #shtab-desk .sd-pall-bd { transition:top .6s var(--sh-spring)!important; } :root[data-design="shtab"] #shtab-desk .sd-slides { transition:transform .5s var(--sh-spring)!important; } :root[data-design="shtab"] #shtab-desk .sd-sl { transition:opacity .4s!important; } :root[data-design="shtab"] #shtab-desk .sd-tk .sd-ck { transition:all .25s var(--sh-spring)!important; } } /* ===== Карточка «Я»: лаймовая панель (вариант C), живой таймер, полоска дня (30.09.2026, анимации как в макете iam-me-panels.html) ===== */ #shtab-desk .sd-grid[data-l="6"] .sd-me-in { z-index:2; overflow:hidden; transition:height .55s var(--sh-spring); } #shtab-desk .sd-grid[data-l="6"] .sd-me .sd-who { margin-top:14px; } #shtab-desk .sd-grid[data-l="6"] .sd-me-in > :is(.sd-who, .sd-dayline, .sd-btns) { transition:opacity .25s; } #shtab-desk .sd-time.run { color:var(--sh-lime)!important; } #shtab-desk .sd-me .sd-dot:not(.off) { position:relative; } #shtab-desk .sd-me .sd-dot:not(.off)::after { content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid var(--sh-lime); opacity:0; animation:sdPulse 1.6s ease-out infinite; } @keyframes sdPulse { 0% { transform:scale(.6); opacity:.8; } 100% { transform:scale(1.6); opacity:0; } } #shtab-desk .sd-dayline { position:relative; height:26px; margin-top:14px; flex:none; } #shtab-desk .sd-dayline i { position:absolute; top:8px; height:8px; border-radius:4px; } #shtab-desk .sd-dl-rail { left:0; right:0; background:rgba(255,255,255,.07); } #shtab-desk .sd-dl-bk.past { background:#4a4a4e; } #shtab-desk .sd-dl-bk.fut { box-shadow:inset 0 0 0 1.5px #4a4a4e; } #shtab-desk .sd-dl-bk.cur { background:var(--sh-lime); box-shadow:0 0 10px rgba(185,243,108,.5); } #shtab-desk .sd-dayline .sd-dl-now { top:2px!important; width:2px; height:20px!important; border-radius:1px; background:#f4f4f2; } #shtab-desk .sd-dayline span { position:absolute; top:18px; transform:translateX(-50%); font:500 9.5px var(--sh-mono); color:#6d6d72; } /* панель */ #shtab-desk .sd-lp { position:absolute; left:0; right:0; bottom:0; height:100px; z-index:1; overflow:hidden; cursor:pointer; border-radius:0 0 40px 40px; background:linear-gradient(180deg, var(--sh-lime), #a9e45a); color:var(--sh-lime-ink); box-shadow:0 20px 40px -24px rgba(60,90,20,.6); transition:height .55s var(--sh-spring), transform .35s var(--sh-spring), border-radius .55s var(--sh-spring); } #shtab-desk .sd-peek { position:absolute; left:0; right:0; bottom:0; height:46px; display:flex; align-items:center; justify-content:center; gap:8px; font-size:14px; font-weight:500; white-space:nowrap; padding:0 16px; transition:opacity .2s; } #shtab-desk .sd-peek span { overflow:hidden; text-overflow:ellipsis; } #shtab-desk .sd-peek svg { width:15px; height:15px; flex:none; } #shtab-desk .sd-peek .chev { width:14px; height:14px; opacity:.55; } #shtab-desk .sd-me:not(.mp-open) .sd-lp:hover { transform:translateY(6px); } #shtab-desk .sd-lpb { position:absolute; left:0; right:0; top:78px; bottom:16px; padding:0 20px; display:flex; flex-direction:column; gap:6px; opacity:0; pointer-events:none; transition:opacity .25s; } #shtab-desk .sd-me.mp-open .sd-me-in { height:66px; cursor:pointer; } #shtab-desk .sd-me.mp-open .sd-me-in > :is(.sd-who, .sd-dayline, .sd-btns) { opacity:0; pointer-events:none; } #shtab-desk .sd-me.mp-open .sd-lp { height:303px; border-radius:40px; cursor:default; } #shtab-desk .sd-me.mp-open .sd-peek { opacity:0; pointer-events:none; } #shtab-desk .sd-me.mp-open .sd-lpb { opacity:1; pointer-events:auto; transition-delay:.15s; } #shtab-desk .sd-grid[data-l="6"] > .sd-me.mp-open:hover { transform:none; } /* элементы панели */ #shtab-desk .sd-mp-h { display:flex; justify-content:space-between; align-items:center; font-size:13px; font-weight:600; min-height:26px; flex:none; } #shtab-desk .sd-mp-h .r { display:flex; gap:6px; align-items:center; } #shtab-desk .sd-mp-x { width:26px; height:26px; border-radius:8px; display:grid; place-items:center; background:rgba(28,36,16,.1)!important; font-size:12px; } #shtab-desk .sd-mp-ch { height:26px; padding:0 9px; border-radius:8px; background:rgba(28,36,16,.1)!important; font-size:12px; font-weight:600; white-space:nowrap; transition:background .2s; } #shtab-desk .sd-mp-ch:hover, #shtab-desk .sd-mp-x:hover { background:rgba(28,36,16,.2)!important; } #shtab-desk .sd-mp-scroll { flex:1; min-height:0; overflow:auto; display:flex; flex-direction:column; gap:6px; scrollbar-width:none; } #shtab-desk .sd-mp-scroll::-webkit-scrollbar { display:none; } #shtab-desk .sd-mp-li { display:flex; align-items:center; gap:10px; height:36px; padding:0 8px 0 10px; border-radius:12px; background:rgba(255,255,255,.45); font-size:13.5px; font-weight:500; flex:none; cursor:pointer; transition:background .2s, opacity .3s; } #shtab-desk .sd-mp-li:hover { background:rgba(255,255,255,.6); } #shtab-desk .sd-mp-li span { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #shtab-desk .sd-mp-li span b { font-weight:600; } #shtab-desk .sd-mp-li small { font:500 11px var(--sh-mono); opacity:.6; white-space:nowrap; } #shtab-desk .sd-mp-li.dn span { text-decoration:line-through; opacity:.5; } #shtab-desk .sd-mp-li.rd { background:rgba(255,255,255,.25); } #shtab-desk .sd-mp-li.rd span { font-weight:400; opacity:.75; } #shtab-desk .sd-mp-ud { width:7px; height:7px; border-radius:50%; background:var(--sh-lime-ink); flex:none; transition:opacity .2s; } #shtab-desk .sd-mp-li.rd .sd-mp-ud { opacity:0; } #shtab-desk .sd-mp-cb { width:20px; height:20px; border-radius:50%; border:1.6px solid var(--sh-lime-ink); flex:none; display:grid; place-items:center; transition:.2s; } #shtab-desk .sd-mp-cb.on { background:var(--sh-lime-ink); } #shtab-desk .sd-mp-cb.on::after { content:""; width:7px; height:4px; border:solid var(--sh-lime); border-width:0 0 2px 2px; transform:rotate(-45deg) translate(1px,-1px); } #shtab-desk .sd-mp-bar { height:6px; border-radius:3px; background:rgba(28,36,16,.12); overflow:hidden; flex:none; margin-top:4px; } #shtab-desk .sd-mp-bar i { display:block; height:100%; background:var(--sh-lime-ink); border-radius:3px; transition:width .5s var(--sh-spring); } #shtab-desk .sd-mp-fi { height:34px; border:0; border-radius:11px; background:rgba(255,255,255,.5); padding:0 12px; font:500 13px var(--font-ui); color:var(--sh-lime-ink); outline:none; flex:none; width:100%; } #shtab-desk .sd-mp-fi::placeholder { color:rgba(28,36,16,.45); } #shtab-desk .sd-mp-fi:focus { background:rgba(255,255,255,.75); } #shtab-desk .sd-mp-pb { height:38px; border-radius:12px; background:var(--sh-lime-ink)!important; color:var(--sh-lime)!important; font-size:13.5px; font-weight:600; margin-top:auto; flex:none; } #shtab-desk .sd-mp-empty { font-size:13px; opacity:.6; padding:14px 4px; } /* важность и теги в строке задачи, подсказка разбора в окне «+» (24.10) */ :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-mhi { display:inline-grid; place-items:center; width:15px; height:15px; border-radius:5px; background:rgba(255,138,128,.18); color:#ff8a80; font:700 11px var(--font-ui); vertical-align:-2px; margin-right:2px; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-mwho { display:inline-flex; align-items:center; gap:5px; color:var(--text2); font-weight:600; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-mwho i { display:inline-grid; place-items:center; width:19px; height:19px; border-radius:50%; background:color-mix(in srgb, currentColor 22%, transparent); color:var(--text); font:700 9.5px var(--font-ui); font-style:normal; } :root[data-design="shtab"] #sh-cp .shk-parse { font:500 12px var(--sh-mono); color:#b9f36c; margin:4px 0 0; opacity:.9; } #shtab-desk .sd-mp-done { display:flex; gap:8px; align-items:baseline; margin:0 4px 8px; font-size:12.5px; min-width:0; } /* вечер: «Сделано сегодня» одной строкой (24.10) */ #shtab-desk .sd-mp-done > b { font-weight:600; white-space:nowrap; flex:none; } #shtab-desk .sd-mp-done > span { opacity:.65; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; } @media (prefers-reduced-motion:reduce) { :root[data-design="shtab"] #shtab-desk .sd-grid[data-l="6"] .sd-me-in { transition:height .55s var(--sh-spring)!important; } :root[data-design="shtab"] #shtab-desk .sd-me-in > :is(.sd-who, .sd-dayline, .sd-btns) { transition:opacity .25s!important; } :root[data-design="shtab"] #shtab-desk .sd-lp { transition:height .55s var(--sh-spring), transform .35s var(--sh-spring), border-radius .55s var(--sh-spring)!important; } :root[data-design="shtab"] #shtab-desk .sd-peek { transition:opacity .2s!important; } :root[data-design="shtab"] #shtab-desk .sd-lpb { transition:opacity .25s!important; } :root[data-design="shtab"] #shtab-desk .sd-me.mp-open .sd-lpb { transition-delay:.15s!important; } :root[data-design="shtab"] #shtab-desk :is(.sd-mp-li, .sd-mp-cb, .sd-mp-ud) { transition:all .25s!important; } :root[data-design="shtab"] #shtab-desk .sd-mp-bar i { transition:width .5s var(--sh-spring)!important; } :root[data-design="shtab"] #shtab-desk .sd-me .sd-dot:not(.off)::after { animation-duration:1.6s!important; animation-iteration-count:infinite!important; } } /* ===== Быстрая задача в «Я» (30.09.2026, макет iam-quick-task-a.html): верхняя строка уходит, название вверху, 4 выбора, описание / лента вариантов ===== */ #shtab-desk .sd-me-in > .sd-row { transition:opacity .2s, transform .35s var(--sh-spring); } #shtab-desk .sd-me.qt-on .sd-me-in > :is(.sd-row, .sd-who, .sd-dayline, .sd-btns) { opacity:0; pointer-events:none; } #shtab-desk .sd-me.qt-on .sd-me-in > .sd-row { transform:translateY(-8px); } #shtab-desk .sd-me.qt-on .sd-me-in > .sd-who { transform:translateY(-10px); } #shtab-desk .sd-me-in > .sd-who { transition:opacity .25s, transform .45s var(--sh-spring); } #shtab-desk .sd-qt { position:absolute; left:24px; right:24px; top:24px; bottom:22px; opacity:0; pointer-events:none; transform:translateY(14px); transition:opacity .25s, transform .45s var(--sh-spring); } #shtab-desk .sd-me.qt-on .sd-qt { opacity:1; pointer-events:auto; transform:none; transition-delay:.08s; } #shtab-desk .sd-qt-in { position:absolute; left:0; right:0; top:0; height:52px; border:0; border-radius:15px; background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14); padding:0 16px; font:500 17px var(--font-ui); color:var(--sh-t); outline:none; transition:box-shadow .2s; } #shtab-desk .sd-qt-in:focus { box-shadow:inset 0 0 0 1.5px var(--sh-lime); } #shtab-desk :is(.sd-qt-in, .sd-qt-note)::placeholder { color:var(--sh-m); font-weight:400; } #shtab-desk .sd-qt-sel { position:absolute; left:0; right:0; top:62px; display:grid; grid-template-columns:1.2fr 1.05fr .9fr auto; gap:8px; } #shtab-desk .sd-qt-sel.noav { grid-template-columns:1.2fr 1.05fr .9fr; } #shtab-desk .sd-qpk { height:44px; border-radius:13px; background:rgba(255,255,255,.06)!important; display:flex; align-items:center; gap:5px; padding:0 9px; font-size:13px; font-weight:500; min-width:0; text-align:left; color:var(--sh-t); transition:background .2s, box-shadow .2s; } #shtab-desk .sd-qpk:hover { background:rgba(255,255,255,.12)!important; } #shtab-desk .sd-qpk.open { box-shadow:inset 0 0 0 1.5px var(--sh-lime); background:rgba(255,255,255,.12)!important; } #shtab-desk .sd-qpk > span { flex:1; min-width:0; } #shtab-desk .sd-qpk small { display:block; font:500 9.5px var(--sh-mono); text-transform:uppercase; letter-spacing:.04em; color:var(--sh-m); } #shtab-desk .sd-qpk b { display:block; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #shtab-desk .sd-qpk > i { width:9px; height:9px; border-radius:3px; flex:none; } #shtab-desk .sd-qpk svg { width:12px; height:12px; color:var(--sh-m); flex:none; } #shtab-desk .sd-qpk.av { padding:0 5px; } #shtab-desk .sd-qpk.av b, #shtab-desk .sd-qo b { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:700; color:#161618; } #shtab-desk .sd-qt-note { position:absolute; left:0; right:0; top:116px; height:40px; border:0; border-radius:13px; background:rgba(255,255,255,.06); padding:0 14px; font:400 13.5px var(--font-ui); color:var(--sh-t); outline:none; transition:opacity .2s, transform .3s var(--sh-spring); } #shtab-desk .sd-me.qt-pick .sd-qt-note { opacity:0; pointer-events:none; transform:translateY(-6px); } #shtab-desk .sd-qt-strip { position:absolute; left:0; right:0; top:114px; height:44px; display:flex; gap:6px; align-items:center; overflow-x:auto; scrollbar-width:none; padding-right:30px; opacity:0; pointer-events:none; transform:translateY(8px); transition:opacity .2s, transform .35s var(--sh-spring); -webkit-mask-image:linear-gradient(90deg, #000 88%, transparent); mask-image:linear-gradient(90deg, #000 88%, transparent); } #shtab-desk .sd-qt-strip::-webkit-scrollbar { display:none; } #shtab-desk .sd-me.qt-pick .sd-qt-strip { opacity:1; pointer-events:auto; transform:none; } #shtab-desk .sd-qo { height:36px; border-radius:11px; display:inline-flex; align-items:center; gap:7px; padding:0 12px; font-size:13px; font-weight:500; background:rgba(255,255,255,.06)!important; color:var(--sh-t); white-space:nowrap; flex:none; cursor:pointer; transition:background .15s; animation:sdChipIn .35s var(--sh-spring) both; } #shtab-desk .sd-qo:hover { background:rgba(255,255,255,.12)!important; } #shtab-desk .sd-qo.on { background:var(--sh-lime)!important; color:var(--sh-lime-ink); } #shtab-desk .sd-qo > i { width:9px; height:9px; border-radius:3px; } #shtab-desk .sd-qo.mono { font:500 12.5px var(--sh-mono); } #shtab-desk .sd-qo b { width:24px; height:24px; font-size:11px; margin-left:-6px; } #shtab-desk .sd-qo input { width:92px; height:28px; border:0; border-radius:8px; background:rgba(255,255,255,.08); padding:0 6px; font:500 12px var(--sh-mono); color:var(--sh-t); outline:none; color-scheme:dark; } @keyframes sdChipIn { from { opacity:0; transform:translateX(12px); } } #shtab-desk .sd-qt-act { position:absolute; left:0; right:0; bottom:0; display:flex; gap:8px; align-items:center; } #shtab-desk .sd-qt-act > span { flex:1; } #shtab-desk .sd-qt-act .sd-btn { height:40px; padding:0 16px; font-size:14px; border-radius:13px; } #shtab-desk .sd-btn.lime { background:var(--sh-lime)!important; color:var(--sh-lime-ink)!important; box-shadow:0 8px 16px -8px rgba(60,90,20,.6); } #shtab-desk .sd-qt-urg, #shtab-desk .sd-qt-full { height:30px; padding:0 11px; border-radius:10px; background:rgba(255,255,255,.06)!important; font-size:12.5px; font-weight:500; color:var(--sh-t); transition:.2s; } #shtab-desk .sd-qt-full { padding:0 9px; color:var(--sh-m); } #shtab-desk .sd-qt-urg.on { background:var(--sh-lime)!important; color:var(--sh-lime-ink); } #shtab-desk .sd-tk.sd-tk-new { animation:sdTkNew .8s var(--sh-spring); border-radius:12px; } @keyframes sdTkNew { 0% { background:rgba(185,243,108,.28); transform:translateY(-6px); opacity:0; } 20% { opacity:1; transform:none; } 60% { background:rgba(185,243,108,.18); } 100% { background:transparent; } } @media (prefers-reduced-motion:reduce) { :root[data-design="shtab"] #shtab-desk .sd-me-in > :is(.sd-row, .sd-who) { transition:opacity .25s, transform .45s var(--sh-spring)!important; } :root[data-design="shtab"] #shtab-desk :is(.sd-qt, .sd-qt-note, .sd-qt-strip) { transition:opacity .25s, transform .45s var(--sh-spring)!important; } :root[data-design="shtab"] #shtab-desk .sd-me.qt-on .sd-qt { transition-delay:.08s!important; } :root[data-design="shtab"] #shtab-desk .sd-qo { animation-duration:.35s!important; } :root[data-design="shtab"] #shtab-desk .sd-tk.sd-tk-new { animation-duration:1.8s!important; } } /* Раздел «Задачи» — всегда тёмный фон, как у карточки «Задачи на сегодня», в любой теме (30.09.2026). Тёмные значения токенов из tokens.css переопределяются только внутри листа раздела. */ :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) body:is([data-page="tasks"],[data-page="project"]) #app-sheet { background-color:var(--sh-w)!important; background-image:none!important; color-scheme:dark; --surface-workspace:#16171a; --surface-raised:#2a2a2d; --surface-hover:#2f3035; --bg:#1a1a1c; --bg2:#262628; --bg3:#2c2c2f; --bg4:#323235; --bg5:#38383b; --border:rgba(255,255,255,.07); --border2:rgba(255,255,255,.09); --border3:rgba(255,255,255,.14); --text:#f4f4f2; --text2:#b4b4b8; --text3:#8d8d92; --text4:#6d6d72; --accent:#fff; --on-accent:#111; --accent-bg:rgba(255,255,255,.09); --accent-border:rgba(255,255,255,.18); --ink-rgb:255,255,255; --green:var(--accent); --green-bg:var(--accent-bg); --green-border:var(--accent-border); --blue:#38bdf8; --red:#ff8a80; --red-bg:rgba(255,138,128,.10); --red-border:rgba(255,138,128,.22); --amber:#fbbf24; color:var(--text); } :root[data-design="shtab"][data-theme="light"] body:is([data-page="tasks"],[data-page="project"]) #app-sheet :is(.t-name, .task-title, h1, h2, .page-title) { color:var(--text)!important; } :root[data-design="shtab"][data-theme="light"] body:is([data-page="tasks"],[data-page="project"]) #app-sheet .task-check { border-color:var(--border3)!important; } /* ---------- Раскрытая задача в «Задачах» (30.09.2026, макет iam-task-card-styles.html) ---------- Настройки на : data-tstyle top|under, data-tcolor white|proj, data-tmenu top|bottom (22-design-shtab.js). */ @property --p { syntax:''; inherits:true; initial-value:0; } :root[data-design="shtab"] { --sh-tk-spring:cubic-bezier(.2,.85,.2,1); } /* булавка вместо 📌 — в строках списка и в верхе раскрытой задачи */ :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-pinic { display:grid; place-items:center; flex:none; color:#8d8d92; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-pinic svg { width:16px; height:16px; fill:currentColor; } /* кольцо прогресса подзадач на кружке задачи */ :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .task-check.sh-ring { position:relative; --rc:#b9f36c; background:transparent!important; border:1.8px solid #55555a!important; transition:--p .6s var(--sh-tk-spring), border-color .25s, width .35s var(--sh-tk-spring), height .35s var(--sh-tk-spring)!important; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .task-check.sh-ring > * { display:none!important; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .task-check.sh-ring::before { content:""!important; position:absolute; inset:-2px; border-radius:50%; background:conic-gradient(var(--rc) calc(var(--p)*1turn), transparent 0); -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px)); mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px)); } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .task-check.sh-ring:hover { transform:none; } /* обёртка раскрытой задачи: верх-плашка впереди, серое тело сзади */ :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk { --top:linear-gradient(180deg,#fbfbf9,#ecece8); --topink:#161618; position:relative; isolation:isolate; overflow:visible!important; background:transparent!important; border:0!important; border-radius:24px; box-shadow:none!important; margin:4px auto!important; transition:margin .45s var(--sh-tk-spring), filter .45s; } :root[data-design="shtab"][data-tcolor="proj"] :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk { --top:linear-gradient(180deg,color-mix(in oklab,var(--pc) 72%,#fff),color-mix(in oklab,var(--pc) 88%,#fff)); --topink:color-mix(in oklab,var(--pc) 22%,#0c0c10); } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open { margin:10px auto 14px!important; filter:drop-shadow(0 26px 30px rgba(0,0,0,.45)); } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk > .task-row { position:relative; z-index:3; border-radius:24px!important; align-items:center; transition:background .45s var(--sh-tk-spring), color .35s, padding .45s var(--sh-tk-spring), border-radius .45s var(--sh-tk-spring), box-shadow .45s!important; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk.open > .task-row .t-name { font-weight:600!important; } /* размер не меняем: при закрытии текст вздрагивал (mn6) */ /* «Цветной верх» */ :root[data-design="shtab"]:not([data-tstyle="under"]) :is(#tasks-list,#proj-tasks-list) .sh-tk.open > .task-row { background:var(--top)!important; color:var(--topink)!important; padding:13px 16px!important; box-shadow:0 14px 26px -12px rgba(0,0,0,.65)!important; } :root[data-design="shtab"]:not([data-tstyle="under"]) :is(#tasks-list,#proj-tasks-list) .sh-tk.open > .task-row :is(.t-name,.t-meta,.t-timepill,.t-badge,.sh-pinic,span[title]) { color:var(--topink)!important; } :root[data-design="shtab"]:not([data-tstyle="under"]) :is(#tasks-list,#proj-tasks-list) .sh-tk.open > .task-row :is(.t-meta,.t-timepill,.sh-pinic,span[title]) { opacity:.72; } :root[data-design="shtab"]:not([data-tstyle="under"]) :is(#tasks-list,#proj-tasks-list) .sh-tk.open > .task-row .t-dot { background:var(--topink)!important; opacity:.8; } :root[data-design="shtab"]:not([data-tstyle="under"]) body #app-sheet :is(#tasks-list,#proj-tasks-list) .sh-tk.open > .task-row .task-check:not(.done) { border-color:color-mix(in oklab,var(--topink) 45%,transparent)!important; } :root[data-design="shtab"]:not([data-tstyle="under"]) body #app-sheet :is(#tasks-list,#proj-tasks-list) .sh-tk.open > .task-row .task-check.sh-ring { --rc:var(--topink); border-color:color-mix(in oklab,var(--topink) 22%,transparent)!important; } /* «Подложка»: верх того же серого цвета, что тело */ :root[data-design="shtab"][data-tstyle="under"] :is(#tasks-list,#proj-tasks-list) .sh-tk.open > .task-row { background:#2c2c2f!important; color:#f4f4f2!important; padding:13px 16px!important; box-shadow:none!important; border-radius:24px 24px 0 0!important; } /* тело — серое, заезжает под верх */ :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk .sh-x { position:relative; z-index:1; display:grid; grid-template-rows:0fr; transition:grid-template-rows .26s var(--sh-tk-spring), margin .25s var(--sh-tk-spring); } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk .sh-in { overflow:hidden; min-height:0; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk.open .sh-x { grid-template-rows:1fr; margin-top:-24px; } :root[data-design="shtab"][data-tstyle="under"] :is(#tasks-list,#proj-tasks-list) .sh-tk.open .sh-x { margin-top:0; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk .task-accordion { position:relative; background:#2c2c2f!important; color:#f4f4f2!important; border-radius:0 0 24px 24px!important; padding:40px 22px 18px!important; margin:0!important; animation:none!important; opacity:0; transform:translateY(-10px); transition:opacity .3s .1s, transform .5s .05s var(--sh-tk-spring)!important; } :root[data-design="shtab"][data-tstyle="under"] :is(#tasks-list,#proj-tasks-list) .sh-tk .task-accordion { padding-top:6px!important; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk.open .task-accordion { opacity:1!important; transform:none!important; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk .task-acc-desc { font-size:14.5px!important; line-height:1.55; color:#d8d8da!important; outline:none; border-radius:10px; padding:4px 6px; margin:0 -6px 10px; transition:background .2s; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk .task-acc-desc:is(:hover,:focus) { background:rgba(255,255,255,.04); } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk .anim-check-wrap { padding:6px 0!important; gap:12px!important; border:0!important; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk .anim-check-box { width:22px!important; height:22px!important; border-radius:50%!important; border:1.8px solid #55555a!important; background:transparent!important; transform:none!important; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk .anim-check-box.checked { background:#b9f36c!important; border-color:#b9f36c!important; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk .anim-check-box .anim-check-path { stroke:#000!important; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk .anim-check-label { font-size:14.5px!important; color:#f4f4f2!important; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk .anim-check-label.done { color:#6d6d72!important; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk .subt-add { gap:12px!important; padding:6px 0!important; margin-top:0!important; border:0!important; color:#8d8d92; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk .subt-add input { font-size:14px!important; color:#f4f4f2!important; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk .subt-add input::placeholder { color:#8d8d92!important; } /* строка «Добавить подзадачу» как в макете: пунктирный кружок 22 px с «+», без аватара исполнителя (он в меню «…») */ :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk .subt-add :is(.subt-add-ico,.t-assignee) { display:none!important; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk .sh-plus { width:22px; height:22px; box-sizing:border-box; border-radius:50%; border:1.5px dashed #55555a; display:grid; place-items:center; flex:none; font:400 14px/1 var(--font-ui); color:#8d8d92; cursor:pointer; transition:border-color .2s, color .2s; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk .subt-add:focus-within .sh-plus, :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk .sh-plus:hover { border-color:#8d8d92; color:#f4f4f2; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk .subt-add input { padding:0!important; font-family:var(--font-ui)!important; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk [id^="acc-subtasks-inline-"] { margin-bottom:0!important; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk .task-acc-desc { margin-bottom:14px!important; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk .acc-tb-popup.collapsed { display:none!important; } /* ✕ у подзадачи — только при наведении на строку */ :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk .anim-check-wrap > button { opacity:0; color:#8d8d92!important; transition:opacity .15s; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk .anim-check-wrap:hover > button, :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk .anim-check-wrap > button:focus-visible { opacity:1; } :root[data-design="shtab"][data-tstyle="under"] :is(#tasks-list,#proj-tasks-list) .sh-tk.open > .task-row .t-meta { color:#8d8d92!important; } /* кнопка «…»: вверху справа на плашке или внизу справа в теле */ :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tmore { display:none; width:38px; height:38px; border-radius:13px; place-items:center; flex:none; border:0; padding:0; cursor:pointer; color:#b4b4b8; background:rgba(255,255,255,.05); transition:background .2s, color .2s, box-shadow .2s; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tmore svg { width:17px; height:17px; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tmore:hover { color:#fff; background:rgba(255,255,255,.1); } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tmore.open { box-shadow:inset 0 0 0 1.5px #f4f4f2; } :root[data-design="shtab"]:not([data-tmenu="bottom"]) :is(#tasks-list,#proj-tasks-list) .sh-tk.open > .task-row .sh-tmore { display:grid; } :root[data-design="shtab"]:not([data-tmenu="bottom"]):not([data-tstyle="under"]) :is(#tasks-list,#proj-tasks-list) .sh-tk.open > .task-row .sh-tmore { color:var(--topink); background:rgba(0,0,0,.06); } :root[data-design="shtab"]:not([data-tmenu="bottom"]):not([data-tstyle="under"]) :is(#tasks-list,#proj-tasks-list) .sh-tk.open > .task-row .sh-tmore:hover { background:rgba(0,0,0,.12); } :root[data-design="shtab"]:not([data-tmenu="bottom"]):not([data-tstyle="under"]) :is(#tasks-list,#proj-tasks-list) .sh-tk.open > .task-row .sh-tmore.open { box-shadow:inset 0 0 0 1.5px var(--topink); } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk .sh-mbot { display:none; justify-content:flex-end; margin-top:-6px; } :root[data-design="shtab"][data-tmenu="bottom"] :is(#tasks-list,#proj-tasks-list) .sh-tk .sh-mbot { display:flex; } :root[data-design="shtab"][data-tmenu="bottom"] :is(#tasks-list,#proj-tasks-list) .sh-tk .sh-mbot .sh-tmore { display:grid; } /* подложка по состоянию задачи (только стиль «Подложка») */ :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk .sh-ul { display:none; } /* без анимации — при перерисовке списка после действия из меню */ :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk.sh-noanim, :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk.sh-noanim * { transition:none!important; animation:none!important; } /* меню «…» — fixed в body */ :root[data-design="shtab"] #sh-tmenu { position:fixed; z-index:9000; width:290px; box-sizing:border-box; border-radius:16px; background:#38383b; color:#f4f4f2; padding:6px; box-shadow:0 20px 40px -12px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.06); display:flex; flex-direction:column; gap:2px; overflow:auto; scrollbar-width:none; font:400 13.5px var(--font-ui); opacity:0; pointer-events:none; transform:translateY(6px) scale(.97); transform-origin:100% 100%; transition:opacity .2s, transform .3s var(--sh-tk-spring); } :root[data-design="shtab"] #sh-tmenu.down { transform:translateY(-6px) scale(.97); transform-origin:100% 0; } :root[data-design="shtab"] #sh-tmenu.on { opacity:1; pointer-events:auto; transform:none; } :root[data-design="shtab"] #sh-tmenu button { font:inherit; color:inherit; border:0; background:none; cursor:pointer; } :root[data-design="shtab"] #sh-tmenu .mi { height:36px; flex:none; border-radius:10px; display:flex; align-items:center; gap:10px; padding:0 10px; text-align:left; transition:background .15s; } :root[data-design="shtab"] #sh-tmenu .mi:hover, :root[data-design="shtab"] #sh-tmenu .mi.act { background:rgba(255,255,255,.07); } :root[data-design="shtab"] #sh-tmenu .mi svg { width:15px; height:15px; opacity:.8; flex:none; } :root[data-design="shtab"] #sh-tmenu .mi[data-ma="pin"] svg { fill:currentColor; } :root[data-design="shtab"] #sh-tmenu .mi small { margin-left:auto; color:#8d8d92; font-size:12px; white-space:nowrap; } :root[data-design="shtab"] #sh-tmenu .mi small.late { color:#ff8a80; } :root[data-design="shtab"] #sh-tmenu .mi.red { color:#ff8a80; } :root[data-design="shtab"] #sh-tmenu .mi.solid { background:rgba(255,138,128,.15); justify-content:center; } :root[data-design="shtab"] #sh-tmenu .mq { font-size:13px; color:#8d8d92; padding:6px 10px; } :root[data-design="shtab"] #sh-tmenu .mrow { display:grid; grid-template-columns:1fr 1fr; gap:4px; } :root[data-design="shtab"] #sh-tmenu .mrow .mi { justify-content:center; } :root[data-design="shtab"] #sh-tmenu .msep { display:block; flex:none; height:1px; background:rgba(255,255,255,.08); margin:4px 6px; } :root[data-design="shtab"] #sh-tmenu .mchips { display:flex; gap:4px; padding:0 8px 6px 34px; flex:none; } :root[data-design="shtab"] #sh-tmenu .so { height:28px; padding:0 9px; font-size:12px!important; font-weight:500; border-radius:8px; background:rgba(255,255,255,.06)!important; white-space:nowrap; flex:none; transition:background .15s; } :root[data-design="shtab"] #sh-tmenu .so:hover { background:rgba(255,255,255,.12)!important; } :root[data-design="shtab"] #sh-tmenu .so.on { background:#f4f4f2!important; color:#161618!important; } :root[data-design="shtab"] #sh-tmenu .so.mono { font-family:var(--sh-mono)!important; font-size:11.5px!important; } :root[data-design="shtab"] #sh-tmenu .mdt { display:grid; grid-template-rows:0fr; flex:none; transition:grid-template-rows .35s var(--sh-tk-spring); } :root[data-design="shtab"] #sh-tmenu .mdt > div { overflow:hidden; min-height:0; } :root[data-design="shtab"] #sh-tmenu .mdt.on { grid-template-rows:1fr; } :root[data-design="shtab"] #sh-tmenu .mgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:4px 6px; } :root[data-design="shtab"] #sh-tmenu .mgrid.t { padding-bottom:8px; } :root[data-design="shtab"] #sh-tmenu .mgrid.as { grid-template-columns:repeat(2,1fr); padding-bottom:8px; } :root[data-design="shtab"] #sh-tmenu .mgrid.t .so[data-mtime=""] { grid-column:span 2; font-family:var(--font-ui)!important; font-size:12px!important; } :root[data-design="shtab"] #sh-tmenu .mgrid .so { height:30px; padding:0 4px; display:flex; align-items:center; justify-content:center; overflow:hidden; text-overflow:ellipsis; } /* Профиль → Настройки → «Карточка задачи» */ /* 01.10: «Цвет проекта» работает и для «Подложки» — красит полосу-подложку (см. конец файла) */ /* «Уменьшение движения»: system.css глушит transition до 0.01ms — для карточки задачи возвращаем мягкие переходы */ @media (prefers-reduced-motion:reduce) { :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk { transition:margin .25s var(--sh-tk-spring), filter .25s!important; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk > .task-row { transition:background .25s var(--sh-tk-spring), color .35s, padding .25s var(--sh-tk-spring), border-radius .25s var(--sh-tk-spring), box-shadow .25s!important; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk .sh-x { transition:grid-template-rows .26s var(--sh-tk-spring), margin .25s var(--sh-tk-spring)!important; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk .task-accordion { transition:opacity .18s .05s, transform .26s .02s var(--sh-tk-spring)!important; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .task-check.sh-ring { transition:--p .6s var(--sh-tk-spring), border-color .25s, width .35s var(--sh-tk-spring), height .35s var(--sh-tk-spring)!important; } :root[data-design="shtab"] #sh-tmenu { transition:opacity .2s, transform .3s var(--sh-tk-spring)!important; } :root[data-design="shtab"] #sh-tmenu .mdt { transition:grid-template-rows .35s var(--sh-tk-spring)!important; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk.sh-noanim, :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk.sh-noanim * { transition:none!important; animation:none!important; } } /* ---------- Раздел «Задачи» — «Тихий список» (01.10.2026, макет iam-tasks-screen-5.html, вариант 1; без стрелок и без поля быстрой задачи) ---------- */ :root[data-design="shtab"] #page-tasks :is(.tsk-crumb-chev,.tsk-crumb-cal) { display:none!important; } :root[data-design="shtab"] #page-tasks .sec-hdr { align-items:center!important; gap:14px; margin-bottom:10px!important; } :root[data-design="shtab"] #page-tasks .sec-actions { display:flex!important; align-items:center; gap:10px!important; } /* Все · Мои · Команда */ :root[data-design="shtab"] #page-tasks .sh-tseg { display:flex; background:rgba(255,255,255,.05); border-radius:14px; padding:3px; } :root[data-design="shtab"] #page-tasks .sh-tseg button { height:34px; padding:0 13px; border:0; border-radius:11px; background:none; font:500 13px var(--font-ui); color:#8d8d92; cursor:pointer; transition:background .2s, color .2s; } :root[data-design="shtab"] #page-tasks .sh-tseg button:hover { color:#f4f4f2; } :root[data-design="shtab"] #page-tasks .sh-tseg button.on { background:#3a3a3d; color:#f4f4f2; box-shadow:inset 0 1px 0 rgba(255,255,255,.1); } /* поиск: кнопка 40×40 раскрывается в поле */ :root[data-design="shtab"] #page-tasks .sh-tsearch { display:flex; align-items:center; height:40px; width:40px; border-radius:14px; background:rgba(255,255,255,.05); overflow:hidden; transition:width .4s var(--sh-tk-spring), background .2s; } :root[data-design="shtab"] #page-tasks .sh-tsearch:hover { background:rgba(255,255,255,.1); } :root[data-design="shtab"] #page-tasks .sh-tsearch.on, :root[data-design="shtab"] #page-tasks .sh-tsearch.has { width:240px; background:rgba(255,255,255,.08); } :root[data-design="shtab"] #page-tasks .sh-tsearch button { width:40px; height:40px; flex:none; display:grid; place-items:center; border:0; background:none; color:#b4b4b8; cursor:pointer; padding:0; } :root[data-design="shtab"] #page-tasks .sh-tsearch button:hover { color:#fff; } :root[data-design="shtab"] #page-tasks .sh-tsearch .sh-tsb svg { width:18px; height:18px; } :root[data-design="shtab"] #page-tasks .sh-tsearch .sh-tsx { width:32px; opacity:0; pointer-events:none; transition:opacity .2s; } :root[data-design="shtab"] #page-tasks .sh-tsearch.has .sh-tsx { opacity:1; pointer-events:auto; } :root[data-design="shtab"] #page-tasks .sh-tsearch .sh-tsx svg { width:14px; height:14px; } :root[data-design="shtab"] #page-tasks .sh-tsearch input { flex:1 0 150px; min-width:150px; border:0; outline:none; background:none; font:400 14px var(--font-ui); color:#f4f4f2; padding:0; -webkit-appearance:none; appearance:none; } :root[data-design="shtab"] #page-tasks .sh-tsearch input::placeholder { color:#8d8d92; } :root[data-design="shtab"] #page-tasks .sh-tsearch input::-webkit-search-cancel-button { display:none; } /* «+ Задача» — белая выпуклая */ :root[data-design="shtab"] #page-tasks .sec-add-btn { width:auto!important; height:40px!important; padding:0 16px!important; border-radius:14px!important; display:inline-flex!important; align-items:center; gap:8px; font:600 13.5px var(--font-ui)!important; color:#161618!important; background:linear-gradient(180deg,#fbfbf9,#e6e6e2)!important; opacity:1!important; border:0!important; box-shadow:inset 0 1px 0 #fff, 0 8px 16px -8px rgba(0,0,0,.7)!important; transition:transform .2s var(--sh-tk-spring)!important; } :root[data-design="shtab"] #page-tasks .sec-add-btn:hover { transform:translateY(-1px); } :root[data-design="shtab"] #page-tasks .sec-add-btn svg { width:15px; height:15px; stroke-width:2.4; } /* группы: моно-подпись, счётчик, шеврон; «Просрочено» — красный счётчик + «Всё на сегодня» */ :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tg > .tg-hdr { padding:16px 12px 6px!important; background:none!important; border-radius:12px; gap:10px!important; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tg .tg-label { font:400 14px var(--font-ui)!important; letter-spacing:0!important; text-transform:none!important; color:#8d8d92!important; } /* как название секции в проекте (30.10) */ :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tg .tg-num { font:400 13px var(--font-ui)!important; color:#6d6d72!important; margin-left:0!important; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-late .tg-num { color:#ff8a80!important; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tg .tg-arrow { color:#55555a!important; font-size:13px!important; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tg > .tg-hdr:hover .tg-arrow { color:#8d8d92!important; } /* выполненные — тихая строка в самом низу списка (08.10) */ :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-doneg > .tg-hdr { justify-content:center; gap:6px!important; padding:10px 12px!important; opacity:.75; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-doneg > .tg-hdr:hover { opacity:1; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-doneg .tg-label { font-size:0!important; letter-spacing:0!important; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-doneg .tg-label::before { content:"Показать выполненные ·"; font:400 13px var(--font-ui); text-transform:none; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-doneg:has(.tg-arrow.open) .tg-label::before { content:"Скрыть выполненные ·"; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-doneg .tg-num { font:400 13px var(--font-ui)!important; color:#8d8d92!important; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-doneg .tg-arrow { display:none!important; } /* строка: без обводок, мягкая подсветка; время — моно-пилюля */ :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .task-wrap:not(.open) > .task-row, :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .tg-body > .task-row { border:0!important; outline:0!important; box-shadow:none!important; border-radius:18px!important; transition:background .2s; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .tg-body > .task-row:hover { background:rgba(255,255,255,.035)!important; } .sh-mob { display:none; } /* 06.11: части подписи только для телефона (время, подзадачи, повтор), включает 36-mobile-nav.js */ :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .t-meta .sh-mtx { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .t-meta .sh-mlate { color:#ff8a80; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .t-timepill { height:30px!important; padding:0 11px!important; border-radius:10px!important; border:0!important; display:inline-flex!important; align-items:center; font:500 13px var(--font-ui)!important; font-variant-numeric:tabular-nums; color:#f4f4f2!important; background:rgba(255,255,255,.07)!important; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .t-timepill.sh-late { color:#ff8a80!important; background:rgba(255,138,128,.09)!important; } @media (prefers-reduced-motion:reduce) { :root[data-design="shtab"] #page-tasks .sh-tsearch { transition:width .4s var(--sh-tk-spring), background .2s!important; } :root[data-design="shtab"] #page-tasks :is(.sh-tseg button,.sec-add-btn), :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) :is(.tg-body > .task-row) { transition-duration:.2s!important; } } /* строка «Задач» — размеры/цвета 1:1 с макетом (сверено по computed-стилям, 01.10) */ :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .task-row { padding:11px 12px!important; gap:14px!important; } :root[data-design="shtab"] body #app-sheet :is(#tasks-list,#proj-tasks-list) .task-row .task-check { width:24px!important; height:24px!important; border:1.8px solid #4a4a4f!important; background:transparent!important; box-shadow:none!important; transition:border-color .2s, box-shadow .25s!important; } :root[data-design="shtab"] body #app-sheet :is(#tasks-list,#proj-tasks-list) .task-row:hover .task-check:not(.done):not(.sh-fon) { border-color:#6d6d72!important; } :root[data-design="shtab"] body #app-sheet :is(#tasks-list,#proj-tasks-list) .task-row .task-check.sh-ring::before { inset:-2px; } :root[data-design="shtab"] body #app-sheet :is(#tasks-list,#proj-tasks-list) .task-row .task-check.sh-fon { border-color:#b9f36c!important; box-shadow:0 0 0 4px rgba(185,243,108,.1)!important; } :root[data-design="shtab"] body #app-sheet :is(#tasks-list,#proj-tasks-list) .task-row .task-check.sh-fon::before { display:none!important; } :root[data-design="shtab"] body #app-sheet :is(#tasks-list,#proj-tasks-list) .task-row .task-check.done { background:#b9f36c!important; border-color:#b9f36c!important; } :root[data-design="shtab"] body #app-sheet :is(#tasks-list,#proj-tasks-list) .task-row .task-check.done > svg:not([width="24"]) path { stroke:#000!important; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .t-meta { font:600 12px var(--font-ui)!important; color:#8d8d92!important; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .t-name { font:500 15px var(--font-ui)!important; letter-spacing:normal!important; margin-top:2px; color:#f4f4f2; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .t-name.done { color:#6d6d72!important; text-decoration:line-through; text-decoration-color:rgba(255,255,255,.2); } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .t-timepill { letter-spacing:normal!important; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .task-row .sh-pinic { color:#6d6d72; } /* шеврон группы — иконка, как в макете: открыто ⌄, закрыто › */ :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tg .tg-arrow { width:14px; height:14px; font-size:0!important; flex:none; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; transform:rotate(-90deg)!important; transition:transform .3s var(--sh-tk-spring)!important; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tg .tg-arrow.open { transform:none!important; } /* ---------- «+» в шапке «Задач» — только плюс (01.10, v20261001-tl3) ---------- */ :root[data-design="shtab"] #page-tasks .sec-add-btn { width:40px!important; padding:0!important; justify-content:center; } :root[data-design="shtab"] #page-tasks .sec-add-btn svg { width:17px; height:17px; transition:transform .35s var(--sh-tk-spring); } :root[data-design="shtab"] #page-tasks .sec-add-btn.sh-cp-on svg { transform:rotate(45deg); } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .task-row.sh-new { animation:shNewRow .8s var(--sh-tk-spring); } @keyframes shNewRow { 0%, 30% { background:rgba(185,243,108,.2); } 100% { background:transparent; } } /* ---------- Попап создания #sh-cp = раскрытая карточка .shk (01.10, v20261001-tl6); полоска времени #sh-tpk ---------- */ :root[data-design="shtab"] :is(#sh-cp-scrim, #sh-tpk-scrim) { position:fixed; inset:0; background:transparent; display:none; } :root[data-design="shtab"] #sh-cp-scrim { z-index:1199; } :root[data-design="shtab"] #sh-tpk-scrim { z-index:1399; } :root[data-design="shtab"] :is(#sh-cp-scrim, #sh-tpk-scrim).on { display:block; } /* ---------- Время задачи — «полоска дня» #sh-tpk (01.10) ---------- */ :root[data-design="shtab"] #sh-tpk { position:fixed; z-index:1400; width:280px; border-radius:22px; background:#38383b!important; color:#f4f4f2; padding:16px 14px 14px; font-family:var(--font-ui); box-shadow:0 24px 50px -14px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,255,255,.06); opacity:0; pointer-events:none; transform:translateY(-6px) scale(.97); transform-origin:100% 0; transition:opacity .2s, transform .35s var(--sh-tk-spring); } :root[data-design="shtab"] #sh-tpk.up { transform-origin:100% 100%; transform:translateY(6px) scale(.97); } :root[data-design="shtab"] #sh-tpk.open { opacity:1; pointer-events:auto; transform:none; } :root[data-design="shtab"] #sh-tpk .tk-big { font:600 44px/1.1 var(--sh-mono); letter-spacing:-.03em; text-align:center; padding:0 0 12px; font-variant-numeric:tabular-nums; } :root[data-design="shtab"] #sh-tpk .tk-trk { position:relative; height:56px; border-radius:14px; background:rgba(0,0,0,.18); cursor:ew-resize; touch-action:none; overflow:hidden; outline:none; } :root[data-design="shtab"] #sh-tpk .tk-trk:focus-visible { box-shadow:0 0 0 2px rgba(255,255,255,.35); } :root[data-design="shtab"] #sh-tpk .tk-tick { position:absolute; top:0; bottom:0; width:1px; background:rgba(255,255,255,.05); } :root[data-design="shtab"] #sh-tpk .tk-tick.b { background:rgba(255,255,255,.1); } :root[data-design="shtab"] #sh-tpk .tk-busy { position:absolute; top:18px; bottom:18px; border-radius:5px; background:rgba(255,255,255,.14); } :root[data-design="shtab"] #sh-tpk .tk-fill { position:absolute; left:0; top:0; bottom:0; background:rgba(255,255,255,.05); } :root[data-design="shtab"] #sh-tpk .tk-knob { position:absolute; top:6px; bottom:6px; width:4px; margin-left:-2px; border-radius:3px; background:#b9f36c; box-shadow:0 0 12px rgba(185,243,108,.6); } :root[data-design="shtab"] #sh-tpk .tk-hl { display:flex; justify-content:space-between; font:500 10.5px var(--sh-mono); color:#6d6d72; margin:6px 2px 0; } :root[data-design="shtab"] #sh-tpk .tk-btns { display:flex; gap:8px; margin-top:12px; } :root[data-design="shtab"] #sh-tpk .tk-cl { height:42px; padding:0 14px; border:0; border-radius:14px; cursor:pointer; font:500 13px var(--font-ui); color:#8d8d92; background:rgba(255,255,255,.05); transition:background .2s, color .2s; } :root[data-design="shtab"] #sh-tpk .tk-cl:hover { color:#f4f4f2; background:rgba(255,255,255,.09); } :root[data-design="shtab"] #sh-tpk .tk-ok { flex:1; height:42px; border:0; border-radius:14px; cursor:pointer; font:600 14px var(--font-ui); color:#161618; background:linear-gradient(180deg,#fbfbf9,#e6e6e2); box-shadow:inset 0 1px 0 #fff, 0 8px 14px -8px rgba(0,0,0,.7); } @media (prefers-reduced-motion:reduce) { :root[data-design="shtab"] #page-tasks .sec-add-btn svg { transition-duration:.35s!important; } :root[data-design="shtab"] #sh-tpk { transition:opacity .2s, transform .35s var(--sh-tk-spring)!important; } :root[data-design="shtab"] #sh-tpk :is(.tk-cl) { transition-duration:.2s!important; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .task-row.sh-new { animation-duration:2s!important; } } /* ---------- Раскрытая задача-карточка .shk — ОДИН компонент: «Карточки», «Плашки», попап создания (01.10, v20261001-tl6; макет iam-tasks-layouts.html) ---------- */ :root[data-design="shtab"] { --shk-body:#2c2c2f; --shk-obj:#28282b; --shk-obj2:#2e2e31; --shk-wsh:0 24px 36px -26px rgba(0,0,0,.85); } @property --p { syntax:''; inherits:true; initial-value:0; } /* кольцо (свой класс — не зависит от правил .task-check списка и светлой темы) */ :root[data-design="shtab"] .shv-cc { width:24px; height:24px; box-sizing:border-box; border-radius:50%; border:1.8px solid #4a4a4f; flex:none; position:relative; display:block; cursor:pointer; background:transparent; transition:border-color .2s, box-shadow .25s, background .2s, --p .6s var(--sh-tk-spring); } :root[data-design="shtab"] .shv-cc > * { display:none!important; } :root[data-design="shtab"] .shv-cc.ring::before { content:""; position:absolute; inset:-2px; border-radius:50%; background:conic-gradient(#b9f36c calc(var(--p)*1turn), transparent 0); -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px)); mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px)); } :root[data-design="shtab"] .shv-cc.fon { border-color:#b9f36c; box-shadow:0 0 0 4px rgba(185,243,108,.1); } :root[data-design="shtab"] .shv-cc.new { border-style:dashed; border-color:#55555a; cursor:default; } :root[data-design="shtab"] :is(.shv-cc.dn, .shv-cc.done) { background:#b9f36c; border-color:#b9f36c; } :root[data-design="shtab"] :is(.shv-cc.dn, .shv-cc.done)::after { content:""; position:absolute; left:6px; top:6px; width:8px; height:4.5px; border:solid #000; border-width:0 0 2px 2px; transform:rotate(-45deg); } :root[data-design="shtab"] .shv-cc.cs { width:22px; height:22px; } :root[data-design="shtab"] :is(.shv-cc.cs.dn)::after { left:5.5px; top:5.5px; } /* компонент */ :root[data-design="shtab"] .shk { position:relative; display:flow-root; font-family:var(--font-ui); color:#f4f4f2; text-align:left; cursor:default; } :root[data-design="shtab"] .shk * { box-sizing:border-box; } :root[data-design="shtab"] .shk button { font:inherit; color:inherit; border:0; background:none; cursor:pointer; padding:0; } :root[data-design="shtab"] .shk input, :root[data-design="shtab"] .shk textarea { font:inherit; color:inherit; border:0; background:none; outline:none; padding:0; margin:0; } /* светлая подложка начинается на 10 px ниже верха тёмного тела: иначе её край просвечивает светлой линией по верхней кромке и в углах (WebKit) */ :root[data-design="shtab"] .shk-u { position:absolute; inset:10px 0 0 0; z-index:0; border-radius:24px; background:linear-gradient(180deg,#f4f4f2,#e4e4e0); color:#161618; box-shadow:0 30px 50px -28px rgba(0,0,0,.9); display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; } :root[data-design="shtab"] .shk-f { position:relative; z-index:1; border-radius:24px; background:var(--shk-body); box-shadow:0 14px 26px -12px rgba(0,0,0,.75); display:flex; flex-direction:column; margin-bottom:48px; } :root[data-design="shtab"] .shk-h { display:flex; align-items:flex-start; gap:12px; padding:14px 14px 10px; } :root[data-design="shtab"] .shk-h .shv-cc { margin-top:4px; } :root[data-design="shtab"] .shk-h .tt { flex:1; min-width:0; } /* 08.10: карточка задачи набрана как карточка профиля — без жирного, главное выделено размером */ :root[data-design="shtab"] .shk-tp { font-size:13px!important; font-weight:400!important; } :root[data-design="shtab"] .shk-tp, :root[data-design="shtab"] .shv-tp { font-size:12px; font-weight:600; color:#8d8d92; display:flex; align-items:center; gap:6px; white-space:nowrap; overflow:hidden; min-height:16px; } :root[data-design="shtab"] :is(.shk-tp, .shv-tp) i { width:7px; height:7px; border-radius:50%; flex:none; } :root[data-design="shtab"] .shk-tp .ph { color:#6d6d72; } :root[data-design="shtab"] .shk .shk-n { display:block; width:100%; font-size:17px!important; font-weight:500!important; letter-spacing:-.005em; margin-top:2px; line-height:1.3; color:#f4f4f2; word-break:break-word; } :root[data-design="shtab"] .shk-ti { caret-color:#b9f36c; } :root[data-design="shtab"] .shk-ti::placeholder { color:#6d6d72; } :root[data-design="shtab"] .shk-x { width:30px; height:30px; border-radius:10px!important; display:grid!important; place-items:center; color:#b4b4b8!important; background:rgba(255,255,255,.05)!important; flex:none; transition:background .2s, color .2s; } :root[data-design="shtab"] .shk-x:hover { color:#fff!important; background:rgba(255,255,255,.1)!important; } :root[data-design="shtab"] .shk-x svg { width:14px; height:14px; } :root[data-design="shtab"] .shk-bw { display:grid; grid-template-rows:1fr; transition:grid-template-rows .5s var(--sh-tk-spring); } :root[data-design="shtab"] .shk-bw > div { min-height:0; overflow:hidden; } :root[data-design="shtab"] .shk.up .shk-bw { grid-template-rows:0fr; } :root[data-design="shtab"] .shk-b { padding:0 16px 14px 50px; display:flex; flex-direction:column; gap:8px; transition:opacity .25s; animation:shkIn .45s .12s var(--sh-tk-spring) both; } @keyframes shkIn { from { opacity:0; transform:translateY(6px); } } :root[data-design="shtab"] .shk.up .shk-b { opacity:0; } :root[data-design="shtab"] .shk .shk-d { display:block; width:100%; font-size:14px; line-height:1.55; color:#d8d8da; outline:none; border-radius:10px; padding:4px 6px!important; margin:0 -6px!important; width:calc(100% + 12px); white-space:pre-wrap; word-break:break-word; } :root[data-design="shtab"] .shk-d:hover, :root[data-design="shtab"] .shk-d:focus { background:rgba(255,255,255,.04); } :root[data-design="shtab"] .shk-d.ph:empty::before, :root[data-design="shtab"] .shk-d[contenteditable]:empty::before { content:attr(data-ph); color:#6d6d72; } :root[data-design="shtab"] textarea.shk-d { resize:none; min-height:26px; max-height:180px; overflow-y:auto; caret-color:#b9f36c; } :root[data-design="shtab"] textarea.shk-d::placeholder { color:#6d6d72; } :root[data-design="shtab"] .shk-s { display:flex; align-items:center; gap:12px; padding:4px 0; font-size:14px; } :root[data-design="shtab"] .shk-s > span { flex:1; min-width:0; word-break:break-word; } :root[data-design="shtab"] .shk-s.dn > span { color:#6d6d72; text-decoration:line-through; text-decoration-color:rgba(255,255,255,.2); } :root[data-design="shtab"] .shk-sx { width:22px; height:22px; border-radius:7px!important; display:grid!important; place-items:center; color:#8d8d92!important; opacity:0; transition:opacity .15s, background .15s; flex:none; } :root[data-design="shtab"] .shk-s:hover .shk-sx, :root[data-design="shtab"] .shk-sx:focus-visible { opacity:1; } :root[data-design="shtab"] .shk-sx:hover { background:rgba(255,255,255,.08)!important; } :root[data-design="shtab"] .shk-sx svg { width:11px; height:11px; } :root[data-design="shtab"] .shk-su svg { width:14px; height:14px; } /* подзадача → отдельная задача: кнопка слева от крестика, видна при наведении на строку (08.10) */ :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk .anim-check-wrap > .subt-up { display:grid!important; place-items:center; width:24px; height:22px; border-radius:7px; padding:0!important; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk .anim-check-wrap > .subt-up:hover { background:rgba(255,255,255,.08)!important; color:#f4f4f2!important; } :root[data-design="shtab"] .shk-add { display:flex; align-items:center; gap:12px; padding:4px 0; color:#8d8d92; font-size:14px; } :root[data-design="shtab"] .shk-add .plus { width:22px; height:22px; border-radius:50%; border:1.5px dashed #55555a; display:grid; place-items:center; font-size:14px; flex:none; } :root[data-design="shtab"] .shk .shk-add input { flex:1; min-width:0; color:#f4f4f2; } :root[data-design="shtab"] .shk-add input::placeholder { color:#8d8d92; } /* подложка: полоса иконок; поднятая — варианты */ :root[data-design="shtab"] .shk-o { flex:1; min-height:0; display:flex; flex-direction:column; padding:0 14px; opacity:0; transform:translateY(12px); transition:opacity .16s, transform .26s var(--sh-tk-spring); } :root[data-design="shtab"] :is(.shk.up, :is(#tasks-list,#proj-tasks-list) .sh-tk.up) .shk-o { opacity:1; transform:none; transition-delay:.06s; } :root[data-design="shtab"] .shk-gap { flex:none; height:calc(var(--hh,64px) - 10px); } :root[data-design="shtab"] :is(.shk, :is(#tasks-list,#proj-tasks-list) .sh-ul) .shk-dt { display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; margin:12px 0 9px; } :root[data-design="shtab"] .shk-dt .ic { width:28px; height:28px; border-radius:9px; background:#161618; color:#f4f4f2; display:grid; place-items:center; animation:shkRise .26s var(--sh-tk-spring); } :root[data-design="shtab"] .shk-dt .ic svg { width:14px; height:14px; } :root[data-design="shtab"] .shk-dt small { font:500 11px var(--sh-mono); color:#6d6d72; margin-left:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:55%; } @keyframes shkRise { from { transform:translateY(10px); opacity:.3; } } :root[data-design="shtab"] .shk-chips { display:flex; flex-wrap:wrap; gap:5px; align-content:flex-start; overflow-y:auto; scrollbar-width:none; min-height:0; padding-bottom:8px; } :root[data-design="shtab"] :is(.shk, :is(#tasks-list,#proj-tasks-list) .sh-ul) .shk-op { height:30px; border-radius:9px!important; padding:0 10px!important; font-size:12.5px; font-weight:500; background:rgba(255,255,255,.6)!important; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); display:inline-flex!important; align-items:center; gap:6px; white-space:nowrap; color:#161618!important; transition:background .15s; } :root[data-design="shtab"] :is(.shk, :is(#tasks-list,#proj-tasks-list) .sh-ul) .shk-op:hover { background:#fff!important; } :root[data-design="shtab"] :is(.shk, :is(#tasks-list,#proj-tasks-list) .sh-ul) .shk-op.on { background:#161618!important; color:#f4f4f2!important; box-shadow:none; } :root[data-design="shtab"] .shk-op[disabled] { cursor:default; } /* время — ползунок дня внутри подложки (08.10); подложка светлая, поэтому полоска тёмная */ :root[data-design="shtab"] .shk-tk { flex:1 1 100%; min-width:0; margin-bottom:3px; } :root[data-design="shtab"] .shk-tk .tk-trk { position:relative; height:42px; border-radius:12px; background:rgba(22,22,24,.09); cursor:ew-resize; touch-action:none; overflow:hidden; outline:none; } :root[data-design="shtab"] .shk-tk .tk-trk:focus-visible { box-shadow:0 0 0 2px rgba(22,22,24,.3); } :root[data-design="shtab"] .shk-tk .tk-tick { position:absolute; top:0; bottom:0; width:1px; background:rgba(22,22,24,.07); } :root[data-design="shtab"] .shk-tk .tk-tick.b { background:rgba(22,22,24,.16); } :root[data-design="shtab"] .shk-tk .tk-busy { position:absolute; top:14px; bottom:14px; border-radius:4px; background:rgba(22,22,24,.16); } :root[data-design="shtab"] .shk-tk .tk-fill { position:absolute; left:0; top:0; bottom:0; background:rgba(22,22,24,.07); } :root[data-design="shtab"] .shk-tk .tk-knob { position:absolute; top:5px; bottom:5px; width:4px; margin-left:-2px; border-radius:3px; background:#161618; } :root[data-design="shtab"] .shk-tk .tk-hl { display:flex; justify-content:space-between; font:500 10.5px var(--sh-mono); color:#77777c; margin:5px 2px 0; } :root[data-design="shtab"] .shk-op i { width:8px; height:8px; border-radius:50%; } :root[data-design="shtab"] :is(.shk, :is(#tasks-list,#proj-tasks-list) .sh-ul) .shk-op.mono { font-family:var(--sh-mono); font-size:12px; } :root[data-design="shtab"] :is(.shk, :is(#tasks-list,#proj-tasks-list) .sh-ul) .shk-op.red { background:rgba(180,30,20,.12)!important; color:#8a1c14!important; box-shadow:none; } :root[data-design="shtab"] :is(.shk, :is(#tasks-list,#proj-tasks-list) .sh-ul) .shk-op.red:hover { background:rgba(180,30,20,.2)!important; } :root[data-design="shtab"] .shk-note { font-size:12px; color:#6d6d72; align-self:center; padding:0 4px; } :root[data-design="shtab"] .shk-ics { flex:none; height:48px; display:flex; align-items:center; gap:2px; padding:0 8px; justify-content:space-between; } :root[data-design="shtab"] .shk-ics > button:not(.shk-go) { flex:1; max-width:40px; height:36px; border-radius:11px!important; display:grid!important; place-items:center; color:#3a3a3d!important; position:relative; transition:background .2s, color .2s, opacity .25s; } :root[data-design="shtab"] .shk-ics > button:not(.shk-go):hover { background:rgba(0,0,0,.07)!important; } :root[data-design="shtab"] .shk-ics > button svg { width:17px; height:17px; } :root[data-design="shtab"] .shk-ics > button.set::after { content:""; position:absolute; right:7px; top:7px; width:5px; height:5px; border-radius:50%; background:#161618; } :root[data-design="shtab"] .shk-ics > button.on:not(.shk-go), :root[data-design="shtab"] .shk-ics > button.on:not(.shk-go):hover { background:#161618!important; color:#f4f4f2!important; } :root[data-design="shtab"] :is(.shk.up, :is(#tasks-list,#proj-tasks-list) .sh-tk.up) .shk-ics > button:not(.on):not(.shk-go) { opacity:.4; } :root[data-design="shtab"] .shk-ics > button.need { box-shadow:inset 0 0 0 1.5px rgba(22,22,24,.45); animation:shkShake .4s; } @keyframes shkShake { 25% { transform:translateX(-3px); } 75% { transform:translateX(3px); } } :root[data-design="shtab"] .shk-ics .sp { flex:1; } :root[data-design="shtab"] :is(.shk, :is(#tasks-list,#proj-tasks-list) .sh-ul) .shk-go { height:32px; padding:0 14px!important; border-radius:11px!important; font-size:14px!important; font-weight:500!important; color:#f4f4f2!important; flex:none; background:linear-gradient(180deg,#2c2c2f,#161618)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 8px 14px -8px rgba(0,0,0,.6); transition:transform .2s var(--sh-tk-spring), filter .2s; } :root[data-design="shtab"] .shk-go:hover { filter:brightness(1.25); } :root[data-design="shtab"] .shk-go:disabled { opacity:.6; cursor:default; } /* попап создания = компонент */ :root[data-design="shtab"] #sh-cp { position:fixed; z-index:1200; width:412px; max-width:calc(100vw - 16px); background:transparent!important; border:0!important; box-shadow:none!important; padding:0!important; opacity:0; pointer-events:none; transform:translateY(-8px) scale(.97); transform-origin:100% 0; transition:opacity .2s, transform .45s var(--sh-tk-spring); } :root[data-design="shtab"] #sh-cp.open { opacity:1; pointer-events:auto; transform:none; } :root[data-design="shtab"] #sh-cp .shk { transition:height .5s var(--sh-tk-spring); } @media (prefers-reduced-motion:reduce) { :root[data-design="shtab"] .shv-cc { transition:border-color .2s, box-shadow .25s, background .2s, --p .6s var(--sh-tk-spring)!important; } :root[data-design="shtab"] .shk-bw { transition:grid-template-rows .5s var(--sh-tk-spring)!important; } :root[data-design="shtab"] .shk-b { transition:opacity .25s!important; animation-duration:.45s!important; animation-delay:.12s!important; } :root[data-design="shtab"] .shk-o { transition:opacity .16s, transform .26s var(--sh-tk-spring)!important; } :root[data-design="shtab"] :is(.shk.up, :is(#tasks-list,#proj-tasks-list) .sh-tk.up) .shk-o { transition-delay:.06s!important; } :root[data-design="shtab"] .shk-dt .ic { animation-duration:.26s!important; } :root[data-design="shtab"] .shk-ics > button, :root[data-design="shtab"] .shk-op, :root[data-design="shtab"] .shk-sx, :root[data-design="shtab"] .shk-x, :root[data-design="shtab"] .shk-go { transition-duration:.2s!important; } :root[data-design="shtab"] .shk-ics > button.need { animation-duration:.4s!important; } :root[data-design="shtab"] #sh-cp { transition:opacity .2s, transform .45s var(--sh-tk-spring)!important; } :root[data-design="shtab"] #sh-cp .shk { transition:height .5s var(--sh-tk-spring)!important; } } /* ---------- «Тихий список»: подложка раскрытой задачи = белая полоса из макета (01.10, v20261001-tl6) ---------- Стиль «Подложка»: тело задачи (шапка .task-row + .sh-x) спереди, .sh-ul — позади на всю высоту, снизу торчит полосой 48 px. Клик по иконке (22-design-shtab.js lkSetDk): .sh-tk.up — тело сжимается до шапки, подложка поднимается с вариантами. */ :root[data-design="shtab"][data-tstyle="under"] :is(#tasks-list,#proj-tasks-list) .sh-tk.open { padding-bottom:48px; transition:margin .25s var(--sh-tk-spring), filter .25s, height .26s var(--sh-tk-spring); } :root[data-design="shtab"][data-tstyle="under"] :is(#tasks-list,#proj-tasks-list) .sh-tk.open .sh-ul { display:flex; flex-direction:column; justify-content:flex-end; position:absolute; inset:10px 0 0 0; z-index:0; margin:0; padding:0; border-radius:24px; background:linear-gradient(180deg,#f4f4f2,#e4e4e0); color:#161618; overflow:hidden; box-shadow:0 30px 50px -28px rgba(0,0,0,.9); font:400 13px var(--font-ui); animation:shkUlIn .45s .08s var(--sh-tk-spring) both; } @keyframes shkUlIn { from { opacity:0; } } :root[data-design="shtab"]:not([data-tdock="dark"]) :is(#tasks-list,#proj-tasks-list) .sh-ul button:not(.iam-dt button) { font:inherit; color:inherit; border:0; background:none; padding:0; cursor:pointer; } /* тело спереди: тень как у .shk-f */ :root[data-design="shtab"][data-tstyle="under"] :is(#tasks-list,#proj-tasks-list) .sh-tk.open .task-accordion { box-shadow:0 14px 26px -12px rgba(0,0,0,.75); } :root[data-design="shtab"][data-tstyle="under"] :is(#tasks-list,#proj-tasks-list) .sh-tk.open > .task-row { transition:background .25s var(--sh-tk-spring), border-radius .25s var(--sh-tk-spring), box-shadow .25s!important; } /* поднятая подложка: тело до шапки, шапка — отдельный тёмный «предмет» */ :root[data-design="shtab"][data-tstyle="under"] :is(#tasks-list,#proj-tasks-list) .sh-tk.open.up .sh-x { grid-template-rows:0fr; } :root[data-design="shtab"][data-tstyle="under"] :is(#tasks-list,#proj-tasks-list) .sh-tk.open.up .task-accordion { opacity:0!important; } :root[data-design="shtab"][data-tstyle="under"] :is(#tasks-list,#proj-tasks-list) .sh-tk.open.up > .task-row { border-radius:24px!important; box-shadow:0 14px 26px -12px rgba(0,0,0,.75)!important; } /* верхняя «…» в стиле «Подложка» не нужна — всё на полосе */ :root[data-design="shtab"][data-tstyle="under"] :is(#tasks-list,#proj-tasks-list) .sh-tk :is(.sh-tmore, .sh-mbot) { display:none!important; } /* полоса: иконки группой слева с шагом, «…» — справа */ :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-ul .shk-ics { justify-content:flex-start; gap:4px; padding:0 14px; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-ul .shk-ics > button:not(.shk-go) { flex:none; width:48px; max-width:none; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-ul .shk-ics > button[data-shdk="more"] { margin-left:auto; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-ul .shk-o { padding:0 18px 0 20px; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-ul .shk-chips { gap:6px; } /* ✕ в заголовке выбора */ :root[data-design="shtab"] .shk-dx { width:26px; height:26px; border-radius:8px!important; display:grid!important; place-items:center; color:#55555a!important; flex:none; transition:background .15s; } :root[data-design="shtab"] .shk-dx:hover { background:rgba(0,0,0,.08)!important; color:#161618!important; } :root[data-design="shtab"] .shk-dx svg { width:12px; height:12px; } :root[data-design="shtab"] :is(.shk, :is(#tasks-list,#proj-tasks-list) .sh-ul) .shk-dt small { margin-right:4px; } /* «В фокус · 25 мин» — тёмная кнопка среди чипов */ :root[data-design="shtab"] :is(.shk, :is(#tasks-list,#proj-tasks-list) .sh-ul) .shk-op.go { background:linear-gradient(180deg,#2c2c2f,#161618)!important; color:#f4f4f2!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 8px 14px -8px rgba(0,0,0,.6); font-weight:600; } @media (prefers-reduced-motion:reduce) { :root[data-design="shtab"][data-tstyle="under"] :is(#tasks-list,#proj-tasks-list) .sh-tk.open { transition:margin .25s var(--sh-tk-spring), filter .25s, height .26s var(--sh-tk-spring)!important; } :root[data-design="shtab"][data-tstyle="under"] :is(#tasks-list,#proj-tasks-list) .sh-tk.open .sh-ul { animation-duration:.45s!important; animation-delay:.08s!important; } :root[data-design="shtab"][data-tstyle="under"] :is(#tasks-list,#proj-tasks-list) .sh-tk.open > .task-row { transition:background .25s var(--sh-tk-spring), border-radius .25s var(--sh-tk-spring), box-shadow .25s!important; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk .sh-x { transition:grid-template-rows .26s var(--sh-tk-spring), margin .25s var(--sh-tk-spring)!important; } :root[data-design="shtab"] .shk-dx { transition-duration:.15s!important; } } /* «Подложка» + «Цвет проекта» (01.10): полоса позади задачи — в цвете проекта, как «Цветной верх» */ :root[data-design="shtab"][data-tstyle="under"][data-tcolor="proj"] :is(#tasks-list,#proj-tasks-list) .sh-tk.open .sh-ul { --ink:color-mix(in oklab,var(--pc) 22%,#0c0c10); background:linear-gradient(180deg,color-mix(in oklab,var(--pc) 72%,#fff),color-mix(in oklab,var(--pc) 88%,#fff)); color:var(--ink); } :root[data-design="shtab"][data-tstyle="under"][data-tcolor="proj"] :is(#tasks-list,#proj-tasks-list) .sh-ul .shk-ics > button:not(.shk-go) { color:var(--ink)!important; } :root[data-design="shtab"][data-tstyle="under"][data-tcolor="proj"] :is(#tasks-list,#proj-tasks-list) .sh-ul .shk-ics > button:not(.shk-go):hover { background:rgba(0,0,0,.08)!important; } :root[data-design="shtab"][data-tstyle="under"][data-tcolor="proj"] :is(#tasks-list,#proj-tasks-list) .sh-ul .shk-ics > button.set::after { background:var(--ink); } :root[data-design="shtab"][data-tstyle="under"][data-tcolor="proj"] :is(#tasks-list,#proj-tasks-list) .sh-ul .shk-ics > button.on:not(.shk-go) { background:var(--ink)!important; color:#fff!important; } :root[data-design="shtab"][data-tstyle="under"][data-tcolor="proj"] :is(#tasks-list,#proj-tasks-list) .sh-ul .shk-op.on { background:var(--ink)!important; } /* ---------- Стол (01.10, v20261001-tl8): карточка создания .shk вместо «Я» и раскрытая задача вместо «Задачи на сегодня» ---------- Хозяин .sd-shkh лежит поверх карточки (inset:0) — размер карточки 411×303 не меняется. Тёмная часть 257 px (как .sd-me-in), снизу белая подложка 46 px (как лаймовая полоса «Я»); тело прокручивается внутри. */ :root[data-design="shtab"] #shtab-desk :is(.sd-me, .sd-tasks) { position:relative; } :root[data-design="shtab"] #shtab-desk .sd-shkh { position:absolute; inset:0; z-index:6; opacity:0; pointer-events:none; transform:translateY(10px) scale(.985); transition:opacity .25s, transform .5s var(--sh-tk-spring); } :root[data-design="shtab"] #shtab-desk :is(.sd-me.cp-on > .sd-shkh.cpme, .sd-tasks.tko-on > .sd-shkh.tko) { opacity:1; pointer-events:auto; transform:none; transition-delay:.05s; } :root[data-design="shtab"] #shtab-desk .sd-me > :is(.sd-me-in, .sd-lp), :root[data-design="shtab"] #shtab-desk .sd-tasks > :not(.sd-shkh) { transition:opacity .2s; } :root[data-design="shtab"] #shtab-desk .sd-me.cp-on > :is(.sd-me-in, .sd-lp), :root[data-design="shtab"] #shtab-desk .sd-tasks.tko-on > :not(.sd-shkh) { opacity:0; pointer-events:none; } :root[data-design="shtab"] #shtab-desk .sd-tasks.tko-on { background:transparent!important; box-shadow:none!important; } :root[data-design="shtab"] #shtab-desk .sd-shkh .shk { height:100%!important; } :root[data-design="shtab"] #shtab-desk .sd-shkh :is(.shk-u, .shk-f) { border-radius:40px; } :root[data-design="shtab"] #shtab-desk .sd-shkh .shk-u { box-shadow:var(--sh-shadow); } :root[data-design="shtab"] #shtab-desk .sd-shkh .shk-f { height:calc(100% - 46px); margin-bottom:0; overflow:hidden; transition:height .5s var(--sh-tk-spring); } :root[data-design="shtab"] #shtab-desk .sd-shkh .shk.up .shk-f { height:var(--hh, 64px); } :root[data-design="shtab"] #shtab-desk .sd-shkh .shk-h { padding:20px 20px 10px 22px; } :root[data-design="shtab"] #shtab-desk .sd-shkh .shk-bw { flex:1; min-height:0; } :root[data-design="shtab"] #shtab-desk .sd-shkh .shk-bw > div { overflow-y:auto; scrollbar-width:none; } :root[data-design="shtab"] #shtab-desk .sd-shkh .shk-bw > div::-webkit-scrollbar { display:none; } :root[data-design="shtab"] #shtab-desk .sd-shkh .shk-b { padding:0 22px 16px 56px; } :root[data-design="shtab"] #shtab-desk .sd-shkh .shk-ics { height:46px; padding:0 16px; } :root[data-design="shtab"] #shtab-desk .sd-shkh .shk-o { padding:0 20px; } :root[data-design="shtab"] #shtab-desk .sd-shkh .shk-x { width:34px; height:34px; border-radius:12px!important; } :root[data-design="shtab"] #shtab-desk .sd-noanim, :root[data-design="shtab"] #shtab-desk .sd-noanim * { transition:none!important; animation:none!important; } @media (prefers-reduced-motion:reduce) { :root[data-design="shtab"] #shtab-desk .sd-shkh { transition:opacity .25s, transform .5s var(--sh-tk-spring)!important; } :root[data-design="shtab"] #shtab-desk :is(.sd-me.cp-on > .sd-shkh.cpme, .sd-tasks.tko-on > .sd-shkh.tko) { transition-delay:.05s!important; } :root[data-design="shtab"] #shtab-desk .sd-me > :is(.sd-me-in, .sd-lp), :root[data-design="shtab"] #shtab-desk .sd-tasks > :not(.sd-shkh) { transition:opacity .2s!important; } :root[data-design="shtab"] #shtab-desk .sd-shkh .shk-f { transition:height .5s var(--sh-tk-spring)!important; } } /* ---------- Тень у белой подложки слева и справа (01.10, v20261001-tl8) ---------- Тело задачи отбрасывало box-shadow вниз; у скруглённых нижних углов тела эта тень ложилась на белую подложку, которая видна в вырезе угла, — серые «уши» слева и справа (замер: 186–195 вместо 218–220). Тени тела на подложке убраны. */ :root[data-design="shtab"][data-tstyle="under"] :is(#tasks-list,#proj-tasks-list) .sh-tk.open .task-accordion { box-shadow:none!important; } :root[data-design="shtab"][data-tstyle="under"] :is(#tasks-list,#proj-tasks-list) .sh-tk.open.up > .task-row { box-shadow:none!important; } :root[data-design="shtab"] .shk-f { box-shadow:none; } /* ---------- Меню-колонка (01.10): без подсказок-цифр клавиш; лаймовый счётчик всегда на углу иконки (не прыгает при раскрытии) ---------- */ :root[data-design="shtab"] #app-sidebar .sh-key { display:none!important; } :root[data-design="shtab"] #app-sidebar .sh-badge, :root[data-design="shtab"] body #app-sidebar .sh-badge { left:25px!important; right:auto!important; top:3px!important; transform:none!important; transition:none!important; } :root[data-design="shtab"] #app-sidebar .sb-proj-lbl .sb-proj-chev, :root[data-design="shtab"] #app-sidebar .sb-proj-lbl.sh-has-badge .sb-proj-chev { box-sizing:border-box; width:28px!important; height:28px!important; padding:7px; margin:-7px -7px -7px auto!important; border-radius:9px; cursor:pointer; } :root[data-design="shtab"] #app-sidebar .sb-proj-lbl .sb-proj-chev:hover { background:rgba(255,255,255,.08); color:#fff; } /* ---------- 03.10 (v20261003-in1): тело раскрытой задачи — от левого края кружка задачи; описание без подсветки ---------- .shk (Стол, попап создания): кружок 24 на отступе 14 (22 в карточке на месте «Я») → тело с того же отступа, кружки подзадач 22 — +1 px по центру. «Задачи» (.task-accordion): кружок 26 на отступе 16 → тело 16, кружки подзадач/«+» 22 — +2 px по центру. */ :root[data-design="shtab"] .shk-b { padding-left:14px; } :root[data-design="shtab"] #shtab-desk .sd-shkh .shk-b { padding-left:22px; } :root[data-design="shtab"] .shk .shk-d { padding:0!important; margin:0!important; width:100%; border-radius:0; background:none!important; } :root[data-design="shtab"] .shk-s > .shv-cc.cs, :root[data-design="shtab"] .shk-add .plus { margin-left:1px; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk .task-accordion { padding-left:16px!important; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk .task-acc-desc { padding:0!important; margin-left:0!important; margin-right:0!important; border-radius:0!important; background:none!important; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk .anim-check-box, :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk .sh-plus { margin-left:2px!important; } /* ---------- 05.10 (v20261005-tw1): «Путь» — тропа из «предметов» (макет iam-trail-3.html, вариант A) ---------- Только облик: разметка, геометрия тропы, раскрытие и анимация — прежние (15-trail-plan.js, trail.css). Следует теме: тёмные карточки на холсте листа; лайм — «сделано», текущий месяц, «ты здесь». */ :root[data-design="shtab"] #page-trail { --popup-surface:var(--sh-w); --trail-panel:var(--sh-w); --trail-shadow:var(--sh-shadow); --trail-month-ink:#161618; --trail-action:var(--sh-lime); --trail-on-action:var(--sh-lime-ink); --trail-track:rgba(255,255,255,.13); --trail-line:color-mix(in srgb,var(--sh-ink) 32%,transparent); --surface-workspace:var(--sh-canvas); --tw-mut:color-mix(in srgb,var(--sh-ink) 58%,transparent); --tw-go:var(--sh-lime); --tw-btn:linear-gradient(180deg,#f4f4f2,#d8d8d4); --tw-btn-ink:#161618; } :root[data-design="shtab"][data-theme="light"] #page-trail { --tw-go:#161618; --tw-btn:linear-gradient(180deg,#4d4d50,#3d3d40); --tw-btn-ink:#f4f4f2; } :root[data-design="shtab"] #page-trail :is(.path-card,.path-finish>span,.trail-month,.trail-detail) { --text:var(--sh-t); --text2:#c4c4c8; --text3:var(--sh-m); --accent-bg:rgba(255,255,255,.07); --border:var(--sh-line); --border2:rgba(255,255,255,.13); } :root[data-design="shtab"] #page-trail:has(.path-reference) > .sec-hdr { display:none; } :root[data-design="shtab"] #page-trail .path-hero { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:16px; align-items:center; text-align:left; padding:8px var(--path-gutter,32px) 0; } :root[data-design="shtab"] #page-trail .path-hero h1 { grid-column:1; font:600 26px/1.15 var(--font-display); letter-spacing:-.01em; color:var(--sh-ink); } :root[data-design="shtab"] #page-trail .path-hero > p { grid-column:1; margin:4px 0 0; font:500 12.5px/1.5 var(--sh-mono); color:var(--tw-mut); } :root[data-design="shtab"] #page-trail .path-cta { grid-column:2; grid-row:1 / span 2; display:block; max-width:min(46cqw,520px); min-height:40px; margin:0; padding:0 16px; border-radius:14px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; background:var(--tw-btn); color:var(--tw-btn-ink); font-size:13.5px; font-weight:600; line-height:40px; box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 16px -10px rgba(0,0,0,.7); } :root[data-design="shtab"] #page-trail .path-cta > span { margin-left:8px; } :root[data-design="shtab"] #page-trail .path-year-progress { grid-column:1 / -1; max-width:none; margin:22px 0 0; --trail-track:color-mix(in srgb,var(--sh-ink) 13%,transparent); --trail-action:var(--tw-go); } :root[data-design="shtab"] #page-trail .path-year-progress > div:first-child { margin-bottom:9px; font:600 10.5px var(--sh-mono); letter-spacing:.07em; text-transform:uppercase; color:var(--tw-mut); } /* полоска года делится на 12 месяцев маской — сама заливка остаётся одной полосой */ :root[data-design="shtab"] #page-trail .path-year-progress .path-progress { border-radius:4px; -webkit-mask:linear-gradient(90deg,#000 calc(100% - 5px),transparent 0) 0 0 / calc((100% + 5px) / 12) 100% repeat-x; mask:linear-gradient(90deg,#000 calc(100% - 5px),transparent 0) 0 0 / calc((100% + 5px) / 12) 100% repeat-x; } :root[data-design="shtab"] #page-trail .path-year-progress .path-progress i { border-radius:0; } :root[data-design="shtab"] #page-trail .path-lines .is-passed :is(path,circle) { stroke:var(--tw-go); } :root[data-design="shtab"] #page-trail .path-lines .is-passed path { stroke-dasharray:1 7; } :root[data-design="shtab"] #page-trail .path-card { border:0; background:var(--sh-w); color:var(--sh-t); box-shadow:var(--sh-shadow),inset 0 1px 0 rgba(255,255,255,.05); } :root[data-design="shtab"] #page-trail .path-card.is-locked { background:var(--sh-w); box-shadow:inset 0 0 0 1px var(--sh-line); } :root[data-design="shtab"] #page-trail .path-card.is-locked > * { opacity:.42; } /* текущий месяц — первый открытый с несделанным шагом (там же стоит «ты здесь») */ :root[data-design="shtab"] #page-trail .path-card:nth-child(1 of .path-card:not(.is-locked):not(.path-open):has(.path-dots i:not(.is-done))) { box-shadow:var(--sh-shadow),0 0 0 1.5px rgba(185,243,108,.6),0 0 0 6px rgba(185,243,108,.12); } :root[data-design="shtab"] #page-trail .path-number { width:28px; height:28px; font:600 12.5px var(--sh-mono); } :root[data-design="shtab"] #page-trail .path-card.is-locked .path-number { background:#3a3a3d; color:var(--sh-m); } :root[data-design="shtab"] #page-trail .path-card-head strong { font-size:15px; font-weight:600; } :root[data-design="shtab"] #page-trail .path-caption { font:500 11px/1.5 var(--sh-mono); color:var(--sh-m); } :root[data-design="shtab"] #page-trail .path-dots { gap:4px; } :root[data-design="shtab"] #page-trail .path-dots i { width:14px; height:6px; border-radius:3px; background:#45454a; } :root[data-design="shtab"] #page-trail .path-dots i.is-done { background:var(--sh-lime); } :root[data-design="shtab"] #page-trail .path-card-foot { font:500 11.5px var(--sh-mono); color:var(--sh-m); } :root[data-design="shtab"] #page-trail .path-card-foot b { font:600 11.5px var(--sh-mono); color:var(--sh-t); } :root[data-design="shtab"] #page-trail .path-done-tag { color:var(--sh-lime); } :root[data-design="shtab"] #page-trail .path-here { padding:5px 10px; border-radius:9px; font:600 11px var(--sh-mono); } :root[data-design="shtab"] #page-trail .path-finish > span { background:var(--sh-w); } :root[data-design="shtab"] #page-trail .path-finish p { color:var(--tw-mut); } /* раскрытый месяц: тёмное тело + белая полоса-подложка (ею становится подпись условия .path-gate) */ :root[data-design="shtab"] #page-trail .path-card.path-open { background:var(--sh-w)!important; box-shadow:var(--sh-shadow); } :root[data-design="shtab"] #page-trail .path-close { border-radius:14px; background:rgba(255,255,255,.07); color:var(--sh-m); } :root[data-design="shtab"] #page-trail .path-close:hover { background:rgba(255,255,255,.12); color:var(--sh-t); } :root[data-design="shtab"] #page-trail .path-detail-head h2 { font:600 20px/1.25 var(--font-display); letter-spacing:-.01em; color:var(--sh-t); } :root[data-design="shtab"] #page-trail .path-detail-head p { font:500 12px/1.6 var(--sh-mono); color:var(--sh-m); } :root[data-design="shtab"] #page-trail .path-month-progress > b { font:600 20px var(--sh-mono); } :root[data-design="shtab"] #page-trail .path-month-progress .path-progress i { background:var(--sh-lime); } :root[data-design="shtab"] #page-trail .path-check { border:0; box-shadow:inset 0 0 0 1.6px #5a5a5f; color:var(--sh-lime-ink); } :root[data-design="shtab"] #page-trail .path-step:not(.is-locked):hover .path-check { box-shadow:inset 0 0 0 1.6px var(--sh-lime); } :root[data-design="shtab"] #page-trail .path-step.is-done .path-check { background:var(--sh-lime); box-shadow:none; } :root[data-design="shtab"] #page-trail .path-step-copy strong { font-size:14.5px; } :root[data-design="shtab"] #page-trail .path-step-copy small { font-size:12.5px; color:var(--sh-m); } :root[data-design="shtab"] #page-trail .path-step.is-done .path-step-copy strong { color:var(--sh-m); text-decoration-color:#5a5a5f; } :root[data-design="shtab"] #page-trail .path-step.is-highlighted { background:rgba(185,243,108,.07); outline:1px solid rgba(185,243,108,.4); outline-offset:5px; border-radius:12px; } :root[data-design="shtab"] #page-trail .path-date { font:500 11.5px/1.5 var(--sh-mono); color:#6d6d72; } :root[data-design="shtab"] #page-trail .path-gate { min-height:48px; margin:20px -30px -28px; padding:14px 30px; border-radius:0; background:linear-gradient(180deg,#f4f4f2,#e4e4e0); color:#161618; font-size:12.5px; } :root[data-design="shtab"] #page-trail .path-gate.is-locked { background:linear-gradient(180deg,#f4f4f2,#e4e4e0); color:#5d5d62; } @container (max-width:660px) { :root[data-design="shtab"] #page-trail .path-hero { grid-template-columns:minmax(0,1fr); } :root[data-design="shtab"] #page-trail .path-hero h1 { font-size:24px; } :root[data-design="shtab"] #page-trail .path-cta { grid-column:1; grid-row:auto; max-width:100%; margin-top:14px; } :root[data-design="shtab"] #page-trail .path-gate { margin:20px -20px -24px; padding:14px 20px; } } :root[data-design="shtab"] #page-trail .path-status { color:var(--tw-mut); } :root[data-design="shtab"] #page-trail .path-secondary { gap:8px; } :root[data-design="shtab"] #page-trail .path-secondary button { min-height:32px; padding:0 13px; border-radius:10px; background:color-mix(in srgb,var(--sh-ink) 6%,transparent); color:var(--tw-mut); font-size:13px; font-weight:600; text-decoration:none; } :root[data-design="shtab"] #page-trail .path-secondary button:hover { color:var(--sh-ink); } /* «Мои шаги» — личный редактор (он же «Путь» у остальных аккаунтов): те же предметы */ :root[data-design="shtab"] #page-trail .trail-intro h1 { font:600 26px/1.15 var(--font-display); letter-spacing:-.01em; color:var(--sh-ink); } :root[data-design="shtab"] #page-trail .trail-intro p { margin-top:4px; font:500 13px/1.5 var(--font-ui); color:var(--tw-mut); } :root[data-design="shtab"] #page-trail .trail-btn { min-height:40px; padding:0 16px; border:0; border-radius:14px; background:var(--sh-w); color:var(--sh-t); font-size:13.5px; font-weight:600; box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 10px 16px -10px rgba(0,0,0,.6); } :root[data-design="shtab"] #page-trail .trail-btn:hover { background:var(--sh-w2,#2d2d30); } :root[data-design="shtab"] #page-trail .trail-btn.trail-primary { background:linear-gradient(180deg,#f4f4f2,#d8d8d4); color:#161618; opacity:1; } :root[data-design="shtab"] #page-trail .trail-btn[data-trail="reference"] { margin-bottom:16px; } :root[data-design="shtab"] #page-trail .trail-summary { font:600 10.5px var(--sh-mono); letter-spacing:.07em; text-transform:uppercase; color:var(--tw-mut); } :root[data-design="shtab"] #page-trail .trail-progress { height:8px; background:color-mix(in srgb,var(--sh-ink) 13%,transparent); } :root[data-design="shtab"] #page-trail .trail-progress::-webkit-progress-bar { background:transparent; } :root[data-design="shtab"] #page-trail .trail-progress::-webkit-progress-value { background:var(--tw-go); border-radius:4px; } :root[data-design="shtab"] #page-trail .trail-progress::-moz-progress-bar { background:var(--tw-go); } :root[data-design="shtab"] #page-trail .trail-month { border:0; border-radius:22px; background:var(--sh-w); color:var(--sh-t); box-shadow:0 22px 34px -22px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05); } :root[data-design="shtab"] #page-trail .trail-month.is-selected { box-shadow:0 22px 34px -22px rgba(0,0,0,.6),0 0 0 1.5px rgba(185,243,108,.6),0 0 0 6px rgba(185,243,108,.12); } :root[data-design="shtab"] #page-trail .trail-number { border-radius:10px; font:600 11px var(--sh-mono); } :root[data-design="shtab"] #page-trail .trail-month-bottom { font:500 11.5px var(--sh-mono); } :root[data-design="shtab"] #page-trail .trail-month progress { background:#45454a; } :root[data-design="shtab"] #page-trail .trail-month progress::-webkit-progress-bar { background:#45454a; } :root[data-design="shtab"] #page-trail .trail-month progress::-webkit-progress-value { background:var(--sh-lime); } :root[data-design="shtab"] #page-trail .trail-month progress::-moz-progress-bar { background:var(--sh-lime); } :root[data-design="shtab"] #page-trail .trail-detail { padding:22px 22px 14px; border:0; border-radius:28px; background:var(--sh-w); color:var(--sh-t); box-shadow:var(--sh-shadow); } :root[data-design="shtab"] #page-trail .trail-detail h2 { font:600 20px/1.25 var(--font-display); letter-spacing:-.01em; } :root[data-design="shtab"] #page-trail .trail-check::before { border-color:#5a5a5f; } :root[data-design="shtab"] #page-trail .trail-check[aria-checked="true"] { background-color:var(--sh-lime); color:var(--sh-lime-ink); } :root[data-design="shtab"] #page-trail .trail-step-text strong { font-weight:600; } :root[data-design="shtab"] #page-trail .trail-empty { color:var(--tw-mut); } :root[data-design="shtab"] #page-trail .trail-detail .trail-empty { color:var(--sh-m); } /* ---------- 05.10 (v20261005-tw1): «Воркфлоу» — тёмные «предметы» на холсте (макет iam-workflow-3.html) ---------- Светлая тема — вариант A (светлый холст), тёмная — тёмный лист. Только облик: размеры карточек (268×184, 220×112), связи, точки, масштаб и всё поведение — прежние (17-workflow*.js, workflow.css). */ :root[data-design="shtab"] #page-workflow { --popup-surface:var(--sh-w); --workflow-card:var(--sh-w); --workflow-border:transparent; --workflow-radius:28px; --workflow-header-border:transparent; --workflow-wire:color-mix(in srgb,var(--sh-ink) 50%,transparent); --workflow-grid-color:color-mix(in srgb,var(--sh-ink) 15%,transparent); --workflow-selected:var(--sh-ink); --workflow-done:var(--sh-lime); --workflow-dot:#45454a; --tw-mut:color-mix(in srgb,var(--sh-ink) 58%,transparent); --tw-btn:linear-gradient(180deg,#f4f4f2,#d8d8d4); --tw-btn-ink:#161618; } :root[data-design="shtab"][data-theme="light"] #page-workflow { --tw-btn:linear-gradient(180deg,#4d4d50,#3d3d40); --tw-btn-ink:#f4f4f2; } :root[data-design="shtab"] #page-workflow :is(.workflow-node,.workflow-dialog,.workflow-zoom,.workflow-map-tools,.workflow-selection-bar,.workflow-tools,.workflow-fold,.workflow-child-add,.workflow-empty .workflow-button) { --text:var(--sh-t); --text2:#c4c4c8; --text3:var(--sh-m); --text4:#6d6d72; --accent-bg:rgba(255,255,255,.08); --workflow-border:rgba(255,255,255,.13); --workflow-header-border:var(--sh-line); } /* холст раздела непрозрачный: под картой точки, а не штриховка листа */ :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #app-sheet #page-workflow { background:var(--sh-canvas)!important; } :root[data-design="shtab"] #page-workflow .workflow-header { padding:28px 34px 16px; border:0; } :root[data-design="shtab"] #page-workflow .workflow-title { font:600 26px/1.15 var(--font-display); letter-spacing:-.01em; color:var(--sh-ink); } :root[data-design="shtab"] #page-workflow .workflow-local { font:500 11.5px var(--sh-mono); color:var(--tw-mut); } :root[data-design="shtab"] #page-workflow :is(.workflow-tools,.workflow-empty) .workflow-button { min-height:40px; border:0; border-radius:14px; background:var(--sh-w); color:var(--sh-t); font-size:13px; font-weight:600; box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 10px 16px -10px rgba(0,0,0,.7); } :root[data-design="shtab"] #page-workflow :is(.workflow-tools,.workflow-empty) .workflow-button:is(.workflow-primary,[data-wf-add]) { padding:0 16px; background:var(--tw-btn); color:var(--tw-btn-ink); } :root[data-design="shtab"] #page-workflow .workflow-node { border:0; background:var(--sh-w); color:var(--sh-t); box-shadow:var(--sh-shadow),inset 0 1px 0 rgba(255,255,255,.06); } :root[data-design="shtab"] #page-workflow .workflow-node.is-child { border-radius:22px; } :root[data-design="shtab"] #page-workflow .workflow-node:is(.is-multiselected,.is-link-target) { box-shadow:var(--sh-shadow),0 0 0 2px rgba(185,243,108,.75),0 0 0 7px rgba(185,243,108,.14); } :root[data-design="shtab"] #page-workflow .workflow-symbol { background:rgba(255,255,255,.07); } :root[data-design="shtab"] #page-workflow .workflow-node-title { font-weight:600; letter-spacing:-.01em; } :root[data-design="shtab"] #page-workflow .workflow-node-sub { font-size:12.5px; font-weight:400; } :root[data-design="shtab"] #page-workflow .workflow-dots { gap:5px; } :root[data-design="shtab"] #page-workflow .workflow-dots i { width:13px; height:7px; border-radius:4px; } :root[data-design="shtab"] #page-workflow :is(.workflow-node-bottom,.workflow-child-progress) { font:500 11.5px/16px var(--sh-mono); } :root[data-design="shtab"] #page-workflow .workflow-child-description { font-size:12.5px; } :root[data-design="shtab"] #page-workflow .workflow-wire-label rect { fill:var(--sh-canvas); stroke:none; } :root[data-design="shtab"] #page-workflow .workflow-wire-label text { fill:var(--tw-mut); font:500 11px var(--sh-mono); } :root[data-design="shtab"] #page-workflow .workflow-connector::after { border-color:var(--sh-canvas); background:var(--sh-ink); box-shadow:none; } :root[data-design="shtab"] #page-workflow .workflow-child-add { border:0; border-radius:10px; background:var(--sh-w); color:var(--sh-t); box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 8px 14px -8px rgba(0,0,0,.7); } :root[data-design="shtab"] #page-workflow .workflow-fold { border:0; border-radius:8px; background:var(--sh-w); color:var(--sh-t); font:600 11px/1 var(--sh-mono); box-shadow:0 8px 14px -8px rgba(0,0,0,.7); } :root[data-design="shtab"] #page-workflow .workflow-selection-rect { background:color-mix(in srgb,var(--sh-ink) 6%,transparent); } /* панели масштаба и инструментов — тёмные пилюли */ :root[data-design="shtab"] #page-workflow :is(.workflow-zoom,.workflow-map-tools,.workflow-selection-bar) { border:0; border-radius:17px; padding:5px; color:var(--sh-t); box-shadow:0 20px 30px -18px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.08); } :root[data-design="shtab"] #page-workflow .workflow-zoom { left:24px; bottom:24px; } :root[data-design="shtab"] #page-workflow .workflow-map-tools { right:24px; bottom:24px; } :root[data-design="shtab"] #page-workflow :is(.workflow-zoom,.workflow-map-tools,.workflow-selection-bar) .workflow-button { min-height:36px; border-radius:12px; color:var(--sh-t); } :root[data-design="shtab"] #page-workflow .workflow-map-tools .workflow-button { min-width:36px; } :root[data-design="shtab"] #page-workflow .workflow-zoom-value { font:600 12.5px var(--sh-mono); } :root[data-design="shtab"] #page-workflow .workflow-status { color:var(--tw-mut); text-shadow:none; } :root[data-design="shtab"] #page-workflow .workflow-empty :is(h2,p,small,.workflow-empty-symbol) { color:var(--sh-ink); } :root[data-design="shtab"] #page-workflow .workflow-empty :is(p,small,.workflow-empty-symbol) { color:var(--tw-mut); } /* раскрытая карточка / редактор: тёмное тело + белая полоса действий, как у раскрытой задачи */ :root[data-design="shtab"] #page-workflow .workflow-dialog { border:0; border-radius:26px; color:var(--sh-t); box-shadow:var(--sh-shadow); } :root[data-design="shtab"] #page-workflow .workflow-dialog.is-child-draft { border-radius:22px; } :root[data-design="shtab"] #page-workflow .workflow-detail-head h2 { font-weight:600; letter-spacing:-.01em; } :root[data-design="shtab"] #page-workflow :is(.workflow-detail-kind,.workflow-detail-label,.workflow-detail-meta) { font-family:var(--sh-mono); } :root[data-design="shtab"] #page-workflow .workflow-check { font-size:14px; } :root[data-design="shtab"] #page-workflow :is(.workflow-check,.workflow-edit-item) input[type="checkbox"] { width:20px; height:20px; border:0; box-shadow:inset 0 0 0 1.6px #5a5a5f; } :root[data-design="shtab"] #page-workflow :is(.workflow-check,.workflow-edit-item) input[type="checkbox"]:checked { background:var(--sh-lime); box-shadow:none; } :root[data-design="shtab"] #page-workflow :is(.workflow-check,.workflow-edit-item) input[type="checkbox"]:checked::after { color:var(--sh-lime-ink); } :root[data-design="shtab"] #page-workflow .workflow-detail-actions { gap:4px; margin-top:4px; padding:8px 10px; border:0; background:linear-gradient(180deg,#f4f4f2,#e4e4e0); } :root[data-design="shtab"] #page-workflow .workflow-detail-actions .workflow-button { min-height:32px; padding:0 10px; border:0; border-radius:10px; background:none; color:#161618; font-size:12.5px; font-weight:600; } :root[data-design="shtab"] #page-workflow .workflow-detail-actions .workflow-button:hover { background:rgba(0,0,0,.07); } :root[data-design="shtab"] #page-workflow .workflow-detail-actions .workflow-button:is(.workflow-delete,.workflow-danger) { color:#b42332; } :root[data-design="shtab"] #page-workflow .workflow-edit-form :is(input[type="text"],input[name="title"],textarea) { border:0; border-radius:12px; background:rgba(255,255,255,.06); } :root[data-design="shtab"] #page-workflow .workflow-edit-actions .workflow-button { border-radius:12px; font-weight:600; } :root[data-design="shtab"] #page-workflow .workflow-edit-actions .workflow-button:is(.workflow-primary,[type="submit"]) { border:0; background:linear-gradient(180deg,#f4f4f2,#d8d8d4); color:#161618; } @media (max-width:760px) { :root[data-design="shtab"] #page-workflow .workflow-header { padding:22px 16px 12px; } :root[data-design="shtab"] #page-workflow .workflow-zoom { left:16px; bottom:16px; } :root[data-design="shtab"] #page-workflow .workflow-map-tools { right:16px; bottom:16px; } } @media (max-width:520px) { :root[data-design="shtab"] #page-workflow .workflow-map-tools { left:16px; right:auto; bottom:80px; } } /* телефон («Новый» = cap-mob): панели карты выше нижнего меню #cap-mtab */ :root[data-design="shtab"].cap-mob #page-workflow .workflow-zoom { bottom:100px; } :root[data-design="shtab"].cap-mob #page-workflow .workflow-map-tools { bottom:158px; } :root[data-design="shtab"].cap-mob #page-workflow .workflow-status { bottom:222px; } /* чужая задача у участника (24.10, прожарка №2 п.9): посмотреть можно, менять — нет (сервер ответил бы 403) */ :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .task-row.sh-ro .task-check { pointer-events:none; border-style:dashed!important; opacity:.55; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk.sh-ro .task-accordion > :not(.sh-rotxt):not(.sh-cm) { pointer-events:none; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk.sh-ro :is(.subt-add,.task-acc-toolbar) { display:none!important; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk.sh-ro .sh-rotxt { font-size:12.5px; color:#8d8d92; padding-top:8px; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-mst { font-weight:600; color:#6ea8ff; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-mst.st-paused { color:#e6b85c; } :root[data-design="shtab"] #sh-tmenu .mchips.mst { padding-top:2px; } :root[data-design="shtab"] #sh-tmenu .mi.mlab, :root[data-design="shtab"] #sh-tmenu .mi.mlab:hover { background:none; cursor:default; } /* обсуждение задачи (24.10, прожарка №2 п.7) — внутри тёмного раскрытия задачи */ :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-mcm { display:inline-flex; align-items:center; gap:3px; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-mcm svg { width:12px; height:12px; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-cm { margin:12px 0 2px; padding-top:12px; border-top:1px solid rgba(255,255,255,.07); } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-cm-cap { font:600 11px var(--font-ui); letter-spacing:.06em; text-transform:uppercase; color:#8d8d92; margin-bottom:8px; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-cm-l { display:flex; flex-direction:column; gap:8px; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-cm-ev { font-size:12.5px; color:#8d8d92; padding-left:32px; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-cm-ev b { font-weight:600; color:#b5b5ba; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-cm time { margin-left:8px; font-size:11.5px; color:#6d6d72; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-cm-c { display:flex; gap:10px; align-items:flex-start; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-cm-c > i { flex:none; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.12); color:#f4f4f2; font:700 10.5px var(--font-ui); font-style:normal; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-cm-b { min-width:0; flex:1; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-cm-h { display:flex; align-items:baseline; font-size:12.5px; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-cm-h b { color:#f4f4f2; font-weight:600; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-cm-h button { margin-left:auto; border:0; background:none; color:#6d6d72; font:500 11.5px var(--font-ui); cursor:pointer; opacity:0; transition:opacity .15s, color .15s; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-cm-c:hover .sh-cm-h button, :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-cm-h button:focus-visible { opacity:1; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-cm-h button:hover { color:#ff8a80; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-cm-t { font-size:14px; line-height:1.45; color:#d8d8da; overflow-wrap:anywhere; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-cm-at { color:#b9f36c; font-weight:600; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-cm-more { align-self:flex-start; border:0; background:none; padding:0 0 0 32px; color:#8d8d92; font:500 12px var(--font-ui); cursor:pointer; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-cm-more:hover { color:#f4f4f2; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-cm-pick { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 0 32px; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-cm-pick[hidden] { display:none; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-cm-pick button { border:0; border-radius:9px; padding:5px 10px; background:rgba(185,243,108,.14); color:#b9f36c; font:600 12px var(--font-ui); cursor:pointer; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-cm-in { display:flex; gap:8px; margin-top:10px; padding-left:32px; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-cm-in input { flex:1; min-width:0; height:36px; border-radius:11px; border:0; padding:0 12px; background:rgba(255,255,255,.06); color:#f4f4f2; font:400 14px var(--font-ui); outline:none; transition:background .2s, box-shadow .2s; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-cm-in input:focus { background:rgba(255,255,255,.09); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16); } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-cm-in input::placeholder { color:#8d8d92; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-cm-in button { flex:none; width:36px; height:36px; border-radius:11px; border:0; background:#b9f36c; color:#161618; font:700 15px var(--font-ui); cursor:pointer; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk.sh-ro .task-acc-desc:empty { display:none; } :root[data-design="shtab"] #page-tasks .sh-tseg button { animation:sh-tseg-in .22s ease both; } :root[data-design="shtab"] #page-tasks .sh-tseg.fold button { animation:none; } @keyframes sh-tseg-in { from { opacity:0; transform:translateX(6px); } } :root[data-design="shtab"] .shk-kh { font:500 11.5px var(--font-ui); color:#8d8d92; margin-right:10px; white-space:nowrap; } /* 24.10 (владелец): длинное название не тянется на всю ширину листа — переносится */ :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .task-row .t-name { max-width:min(640px,100%); } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk.open > .task-row .t-name { cursor:text; width:fit-content; } /* правка — только по самому тексту; клик сразу за последней буквой закрывает задачу */ :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .t-name.sh-ted { outline:none; white-space:normal!important; text-overflow:clip!important; overflow:visible!important; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-mwho i { overflow:hidden; background:none; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-cm-c > i { overflow:hidden; background:none; width:26px; height:26px; } :root[data-design="shtab"] #sh-tmenu .sh-so-av { display:inline-flex; align-items:center; gap:6px; } :root[data-design="shtab"] #sh-tmenu .sh-so-av i { width:18px; height:18px; border-radius:50%; overflow:hidden; flex:none; } /* шапка проекта — цветная полоса наверху листа (24.10, вариант B макета iam-own/3-project-header.html) */ #proj-hero .sd-ph.sd-ph-b { padding:18px 18px 18px 26px; } #proj-hero .sd-ph-b .sd-ph-top { gap:12px; } #proj-hero .sd-ph-b .sd-ph-tt { flex:1; min-width:0; } #proj-hero .sd-ph-b .sd-ph-tt b { display:block; font-size:26px; font-weight:600; letter-spacing:-.02em; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #proj-hero .sd-ph-b .sd-ph-s1 { display:block; margin-top:3px; font-size:13px; color:rgba(255,255,255,.84); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #proj-hero .sd-ph-b .sd-ph-chip { flex:none; font:600 12px var(--sh-mono); color:#fff; background:rgba(255,255,255,.2); border-radius:10px; padding:7px 10px; white-space:nowrap; } #proj-hero .sd-ph-b .sd-ph-add { width:auto; height:40px; padding:0 16px 0 13px; display:inline-flex; align-items:center; gap:7px; font:600 13.5px var(--font-ui); } #proj-hero .sd-ph-b .sd-ph-add svg { width:16px; height:16px; } @media (max-width:1180px) { #proj-hero .sd-ph-b .sd-ph-chip { display:none; } #proj-hero .sd-ph-b .sd-ph-add span { display:none; } #proj-hero .sd-ph-b .sd-ph-add { width:40px; padding:0; justify-content:center; } } @media (max-width:900px) { #proj-hero .sd-ph-b .sd-ph-seg button { padding:0 9px; font-size:0; gap:0; } #proj-hero .sd-ph-b .sd-ph-seg button svg { width:16px; height:16px; } } /* 24.10 (владелец, вариант D макета iam-own/12-header-calm.html): цвет проекта приглушён и слева уходит в графит — без «кислотного» блика; справа всё нейтральное */ #proj-hero .sd-ph.sd-ph-b { --pb:oklch(from var(--pc) .55 calc(c * .55) h); background:linear-gradient(90deg,var(--pb) 0%,color-mix(in oklab,var(--pb) 40%,#2a2a2d) 38%,#2a2a2d 70%); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); } @supports not (color:oklch(from red l c h)) { #proj-hero .sd-ph.sd-ph-b { --pb:color-mix(in oklab,var(--pc) 60%,#3a3a3d); } } #proj-hero .sd-ph-b .sd-ph-chip, #proj-hero .sd-ph-b .sd-ph-seg { background:rgba(255,255,255,.08); } #proj-hero .sd-ph-b .sd-ph-chip { color:#e4e4e6; } #proj-hero .sd-ph-b .sd-ph-seg button:not(.on) { color:#c4c4c8; } #proj-hero .sd-ph-b .sd-ph-seg button:not(.on):hover { color:#fff; } /* одна кнопка «дата и время» в полосе задачи (24.10): с подписью срока, когда он есть */ :root[data-design="shtab"] .shk-ics > button.shk-when:not(.shk-go) { flex:none; width:auto!important; max-width:none; min-width:40px; padding:0 10px!important; display:inline-flex!important; align-items:center; gap:7px; font:600 12.5px var(--font-ui); white-space:nowrap; } :root[data-design="shtab"] .shk-ics > button.shk-when.set { background:rgba(0,0,0,.07)!important; } :root[data-design="shtab"] .shk-ics > button.shk-when.set::after { display:none; } :root[data-design="shtab"] .shk-ics .shk-when svg { flex:none; } /* обсуждение в белой подложке открытой задачи (24.10, владелец): кнопка на полосе, аватары авторов и того, кто пишет */ :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-cm-me { flex:none; display:block; width:26px; height:26px; border-radius:50%; overflow:hidden; align-self:center; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-cm-in { align-items:center; padding-left:0; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-ul .shk-cmh { flex:1 1 100%; min-width:0; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-ul .sh-cm { margin:0; padding:0; border:0; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-ul .sh-cm-cap { display:none; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-ul .sh-cm-l { max-height:320px; overflow-y:auto; scrollbar-width:thin; gap:10px; padding-right:4px; } :root[data-design="shtab"]:not([data-tdock="dark"]) :is(#tasks-list,#proj-tasks-list) .sh-ul .sh-cm-ev { color:#8a8a8e; padding-left:36px; } :root[data-design="shtab"]:not([data-tdock="dark"]) :is(#tasks-list,#proj-tasks-list) .sh-ul .sh-cm-ev b { color:#55555a; } :root[data-design="shtab"]:not([data-tdock="dark"]) :is(#tasks-list,#proj-tasks-list) .sh-ul .sh-cm time { color:#9a9a9e; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-ul .sh-cm-c { gap:10px; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-ul .sh-cm-c > i { width:26px; height:26px; } :root[data-design="shtab"]:not([data-tdock="dark"]) :is(#tasks-list,#proj-tasks-list) .sh-ul .sh-cm-h b { color:#161618; } :root[data-design="shtab"]:not([data-tdock="dark"]) :is(#tasks-list,#proj-tasks-list) .sh-ul .sh-cm-h button { color:#8a8a8e; } :root[data-design="shtab"]:not([data-tdock="dark"]) :is(#tasks-list,#proj-tasks-list) .sh-ul .sh-cm-h button:hover { color:#b3261e; } :root[data-design="shtab"]:not([data-tdock="dark"]) :is(#tasks-list,#proj-tasks-list) .sh-ul .sh-cm-t { color:#2c2c2f; } :root[data-design="shtab"]:not([data-tdock="dark"]) :is(#tasks-list,#proj-tasks-list) .sh-ul .sh-cm-at { color:#161618; background:rgba(0,0,0,.07); border-radius:5px; padding:0 3px; } :root[data-design="shtab"]:not([data-tdock="dark"]) :is(#tasks-list,#proj-tasks-list) .sh-ul .sh-cm-more { color:#6d6d72; padding-left:36px; } :root[data-design="shtab"]:not([data-tdock="dark"]) :is(#tasks-list,#proj-tasks-list) .sh-ul .sh-cm-more:hover { color:#161618; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-ul .sh-cm-pick { margin-left:36px; } :root[data-design="shtab"]:not([data-tdock="dark"]) :is(#tasks-list,#proj-tasks-list) .sh-ul .sh-cm-pick button { background:#161618; color:#f4f4f2; padding:5px 10px; border-radius:9px; font:600 12px var(--font-ui); } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-ul .sh-cm-in { margin-top:12px; gap:10px; } :root[data-design="shtab"]:not([data-tdock="dark"]) :is(#tasks-list,#proj-tasks-list) .sh-ul .sh-cm-in input { height:38px; background:rgba(255,255,255,.75); color:#161618; box-shadow:inset 0 0 0 1px rgba(0,0,0,.07); } :root[data-design="shtab"]:not([data-tdock="dark"]) :is(#tasks-list,#proj-tasks-list) .sh-ul .sh-cm-in input:focus { background:#fff; box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.18); } :root[data-design="shtab"]:not([data-tdock="dark"]) :is(#tasks-list,#proj-tasks-list) .sh-ul .sh-cm-in input::placeholder { color:#8a8a8e; } :root[data-design="shtab"]:not([data-tdock="dark"]) :is(#tasks-list,#proj-tasks-list) .sh-ul .sh-cm-in button { width:38px; height:38px; border-radius:11px; background:#161618; color:#f4f4f2; font:700 15px var(--font-ui); } /* «Кому» в подложке — люди с аватарами, как у новой задачи (24.10, владелец) */ :root[data-design="shtab"] :is(.shk, :is(#tasks-list,#proj-tasks-list) .sh-ul) .shk-op.av { height:36px; display:inline-flex; align-items:center; gap:8px; padding:0 12px 0 5px!important; border-radius:12px!important; font-size:13.5px; } :root[data-design="shtab"] :is(.shk, :is(#tasks-list,#proj-tasks-list) .sh-ul) .shk-op.av i { width:26px; height:26px; border-radius:50%; overflow:hidden; display:block; flex:none; } /* срок открытой задачи — в белой подложке, как у новой задачи, но светлый (24.10, владелец): две недели одной строкой, лента времени */ :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-ul .shk-dth { flex:1 1 100%; min-width:0; padding-top:12px; } :root[data-design="shtab"]:not([data-tdock="dark"]) :is(#tasks-list,#proj-tasks-list) .sh-ul .iam-dt { color:#161618; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-ul .iam-dt [data-nod] { display:none!important; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-ul .iam-dt .dh { padding:0 0 8px; } :root[data-design="shtab"]:not([data-tdock="dark"]) :is(#tasks-list,#proj-tasks-list) .sh-ul .iam-dt .dh .mb { color:#161618; } :root[data-design="shtab"]:not([data-tdock="dark"]) :is(#tasks-list,#proj-tasks-list) .sh-ul .iam-dt .dh .mb svg, :root[data-design="shtab"]:not([data-tdock="dark"]) :is(#tasks-list,#proj-tasks-list) .sh-ul .iam-dt .dh button { color:#6d6d72; } :root[data-design="shtab"]:not([data-tdock="dark"]) :is(#tasks-list,#proj-tasks-list) .sh-ul .iam-dt .dh button:hover, :root[data-design="shtab"]:not([data-tdock="dark"]) :is(#tasks-list,#proj-tasks-list) .sh-ul .iam-dt .dh .mb:hover { background:rgba(0,0,0,.06); color:#161618; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-ul .iam-dt .dw { grid-template-columns:repeat(14,1fr); } @media (max-width:640px) { :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-ul .iam-dt .dw { grid-template-columns:repeat(7,1fr); } } :root[data-design="shtab"]:not([data-tdock="dark"]) :is(#tasks-list,#proj-tasks-list) .sh-ul .iam-dt :is(.dw,.dg) button { color:#6d6d72; } :root[data-design="shtab"]:not([data-tdock="dark"]) :is(#tasks-list,#proj-tasks-list) .sh-ul .iam-dt .dw button b, :root[data-design="shtab"]:not([data-tdock="dark"]) :is(#tasks-list,#proj-tasks-list) .sh-ul .iam-dt .dg button { color:#161618; } :root[data-design="shtab"]:not([data-tdock="dark"]) :is(#tasks-list,#proj-tasks-list) .sh-ul .iam-dt .dg button.o { color:#a5a5a8; } :root[data-design="shtab"]:not([data-tdock="dark"]) :is(#tasks-list,#proj-tasks-list) .sh-ul .iam-dt .dg i { color:#8a8a8e; } :root[data-design="shtab"]:not([data-tdock="dark"]) :is(#tasks-list,#proj-tasks-list) .sh-ul .iam-dt :is(.dw,.dg) button:hover { background:rgba(0,0,0,.06); } :root[data-design="shtab"]:not([data-tdock="dark"]) :is(#tasks-list,#proj-tasks-list) .sh-ul .iam-dt :is(.dw,.dg) button.t { box-shadow:inset 0 0 0 1.5px rgba(22,22,24,.45); } :root[data-design="shtab"]:not([data-tdock="dark"]) :is(#tasks-list,#proj-tasks-list) .sh-ul .iam-dt :is(.dw,.dg) button.on { background:#161618; color:#b5b5ba; box-shadow:none; } :root[data-design="shtab"]:not([data-tdock="dark"]) :is(#tasks-list,#proj-tasks-list) .sh-ul .iam-dt .dw button.on b, :root[data-design="shtab"]:not([data-tdock="dark"]) :is(#tasks-list,#proj-tasks-list) .sh-ul .iam-dt .dg button.on { color:#f4f4f2; } :root[data-design="shtab"]:not([data-tdock="dark"]) :is(#tasks-list,#proj-tasks-list) .sh-ul .iam-dt .dw button.nx { background:rgba(255,255,255,.7); color:#55555a; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); } :root[data-design="shtab"]:not([data-tdock="dark"]) :is(#tasks-list,#proj-tasks-list) .sh-ul .iam-dt .dw button.nx:hover { background:#fff; color:#161618; } :root[data-design="shtab"]:not([data-tdock="dark"]) :is(#tasks-list,#proj-tasks-list) .sh-ul .iam-dt .dtr { border-top-color:rgba(0,0,0,.08); } :root[data-design="shtab"]:not([data-tdock="dark"]) :is(#tasks-list,#proj-tasks-list) .sh-ul .iam-dt .dts { mask-image:linear-gradient(90deg,#000 92%,transparent); } :root[data-design="shtab"]:not([data-tdock="dark"]) :is(#tasks-list,#proj-tasks-list) .sh-ul .iam-dt .dts button { background:rgba(255,255,255,.7); color:#161618; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); } :root[data-design="shtab"]:not([data-tdock="dark"]) :is(#tasks-list,#proj-tasks-list) .sh-ul .iam-dt .dts button:hover { background:#fff; } :root[data-design="shtab"]:not([data-tdock="dark"]) :is(#tasks-list,#proj-tasks-list) .sh-ul .iam-dt .dts button.on { background:#161618; color:#f4f4f2; box-shadow:none; } :root[data-design="shtab"]:not([data-tdock="dark"]) :is(#tasks-list,#proj-tasks-list) .sh-ul .iam-dt .dtc { background:rgba(255,255,255,.7); color:#8a8a8e; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); } :root[data-design="shtab"]:not([data-tdock="dark"]) :is(#tasks-list,#proj-tasks-list) .sh-ul .iam-dt .dtc:focus-within { box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.25); background:#fff; } :root[data-design="shtab"]:not([data-tdock="dark"]) :is(#tasks-list,#proj-tasks-list) .sh-ul .iam-dt .dtc input { color:#161618; } :root[data-design="shtab"]:not([data-tdock="dark"]) :is(#tasks-list,#proj-tasks-list) .sh-ul .iam-dt .dtc input::placeholder { color:#a5a5a8; } :root[data-design="shtab"]:not([data-tdock="dark"]) :is(#tasks-list,#proj-tasks-list) .sh-ul .iam-dt .dtc.on { background:#161618; color:#f4f4f2; } :root[data-design="shtab"]:not([data-tdock="dark"]) :is(#tasks-list,#proj-tasks-list) .sh-ul .iam-dt .dtc.on input { color:#f4f4f2; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-ul .shk-ics > button.shk-when.on { background:#161618!important; color:#f4f4f2!important; } /* тёмная подложка открытой задачи (24.10, владелец: Профиль → «Подложка задачи» → «Тёмная») — как подложка новой задачи */ :root[data-design="shtab"][data-tstyle="under"][data-tdock="dark"] :is(#tasks-list,#proj-tasks-list) .sh-tk.open .sh-ul { background:#262628!important; color:#f4f4f2; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.1), 0 30px 50px -28px rgba(0,0,0,.9)!important; } :root[data-design="shtab"][data-tdock="dark"] :is(#tasks-list,#proj-tasks-list) .sh-ul .shk-ics > button:not(.shk-go) { color:#b5b5ba!important; } :root[data-design="shtab"][data-tdock="dark"] :is(#tasks-list,#proj-tasks-list) .sh-ul .shk-ics > button:not(.shk-go):hover { background:rgba(255,255,255,.07)!important; color:#fff!important; } :root[data-design="shtab"][data-tdock="dark"] :is(#tasks-list,#proj-tasks-list) .sh-ul .shk-ics > button.set::after { background:#f4f4f2!important; } :root[data-design="shtab"][data-tdock="dark"] :is(#tasks-list,#proj-tasks-list) .sh-ul .shk-ics > button.shk-when.set { background:rgba(255,255,255,.08)!important; color:#f4f4f2!important; } :root[data-design="shtab"][data-tdock="dark"] :is(#tasks-list,#proj-tasks-list) .sh-ul .shk-ics > button.on:not(.shk-go), :root[data-design="shtab"][data-tdock="dark"] :is(#tasks-list,#proj-tasks-list) .sh-ul .shk-ics > button.shk-when.on { background:#f4f4f2!important; color:#161618!important; } :root[data-design="shtab"][data-tdock="dark"] :is(#tasks-list,#proj-tasks-list) .sh-ul .shk-dt .ic { background:#f4f4f2; color:#161618; } :root[data-design="shtab"][data-tdock="dark"] :is(#tasks-list,#proj-tasks-list) .sh-ul .shk-dt small { color:#8d8d92; } :root[data-design="shtab"][data-tdock="dark"] :is(#tasks-list,#proj-tasks-list) .sh-ul .shk-dx { color:#8d8d92; } :root[data-design="shtab"][data-tdock="dark"] :is(#tasks-list,#proj-tasks-list) .sh-ul .shk-op { background:rgba(255,255,255,.07)!important; color:#f4f4f2!important; box-shadow:none!important; } :root[data-design="shtab"][data-tdock="dark"] :is(#tasks-list,#proj-tasks-list) .sh-ul .shk-op:hover { background:rgba(255,255,255,.12)!important; } :root[data-design="shtab"][data-tdock="dark"] :is(#tasks-list,#proj-tasks-list) .sh-ul .shk-op.on { background:#f4f4f2!important; color:#161618!important; } :root[data-design="shtab"][data-tdock="dark"] :is(#tasks-list,#proj-tasks-list) .sh-ul .shk-op.go { background:#f4f4f2!important; color:#161618!important; } :root[data-design="shtab"][data-tdock="dark"] :is(#tasks-list,#proj-tasks-list) .sh-ul .shk-op.red { background:rgba(255,107,107,.14)!important; color:#ff8a80!important; } :root[data-design="shtab"][data-tdock="dark"] :is(#tasks-list,#proj-tasks-list) .sh-ul .shk-note { color:#8d8d92; } :root[data-design="shtab"][data-tdock="dark"] :is(#tasks-list,#proj-tasks-list) .sh-ul :is(.tk-hl, .tk-hl span) { color:#8d8d92; } :root[data-design="shtab"][data-tdock="dark"] :is(#tasks-list,#proj-tasks-list) .sh-ul .sh-cm-in input { background:rgba(255,255,255,.06); } :root[data-design="shtab"][data-tdock="dark"] :is(#tasks-list,#proj-tasks-list) .sh-ul .sh-cm-in button { background:#f4f4f2; color:#161618; } /* перетаскивание проекта в левом меню (24.10, владелец) */ :root[data-design="shtab"] #sb-app-projects .sb-proj-item.sb-drag { position:relative; z-index:5; border-radius:12px; background:rgba(255,255,255,.08); box-shadow:0 12px 24px -10px rgba(0,0,0,.7); } :root[data-design="shtab"] body.sb-dragging, :root[data-design="shtab"] body.sb-dragging * { cursor:grabbing!important; user-select:none!important; } /* описание открытой задачи (29.10, владелец; макет iam-own/14-open-task.html, A/C): по левому краю названия, подсказка «Описание» без курсива */ :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk .task-acc-desc { margin-left:40px!important; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk .task-acc-desc[contenteditable]:empty::before { content:"Описание"; font-style:normal; color:#6d6d72; } @media (max-width:640px) { :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-tk .task-acc-desc { margin-left:0!important; } } /* повтор в подложке «…» (29.10): дни недели — отдельной строкой */ :root[data-design="shtab"] .shk-chips .shk-br { flex-basis:100%; height:0; } /* напоминание (29.10): колокольчик на кнопке срока, строка «Напомню …» в светлой подложке, значок в меню */ :root[data-design="shtab"] .shk-bell { display:inline-grid; place-items:center; font-style:normal; margin-left:-2px; opacity:.75; } :root[data-design="shtab"] .shk-bell svg { width:13px!important; height:13px!important; } :root[data-design="shtab"] #sh-tmenu .mi-ic { display:inline-grid; width:16px; height:16px; } :root[data-design="shtab"] #sh-tmenu .mi-ic svg { width:16px; height:16px; } :root[data-design="shtab"]:not([data-tdock="dark"]) :is(#tasks-list,#proj-tasks-list) .sh-ul .iam-dt .drm { color:#6d6d72; } :root[data-design="shtab"]:not([data-tdock="dark"]) :is(#tasks-list,#proj-tasks-list) .sh-ul .iam-dt .drm .drm-u { color:#161618; border-bottom-color:rgba(0,0,0,.3); } :root[data-design="shtab"]:not([data-tdock="dark"]) :is(#tasks-list,#proj-tasks-list) .sh-ul .iam-dt .drm-o button { background:rgba(255,255,255,.7); color:#161618; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); } :root[data-design="shtab"]:not([data-tdock="dark"]) :is(#tasks-list,#proj-tasks-list) .sh-ul .iam-dt .drm-o button:hover { background:#fff; } :root[data-design="shtab"]:not([data-tdock="dark"]) :is(#tasks-list,#proj-tasks-list) .sh-ul .iam-dt .drm-o button.on { background:#161618; color:#f4f4f2; box-shadow:none; } /* «Сделано» по дням (30.10, прожарка №4 п.9, вариант A макета iam-own/19-done-days.html) */ :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .dd-sum { font-size:12.5px; color:#8d8d92; padding:4px 10px 6px; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .dd-sum b { color:#f4f4f2; font-weight:600; margin:0 2px; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .dd-cap { font:600 10.5px var(--sh-mono); letter-spacing:.07em; text-transform:uppercase; color:#6d6d72; margin:14px 10px 2px; display:flex; gap:8px; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .dd-cap i { font-style:normal; color:#4a4a4e; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .dd .task-row[data-done-at]::after { content:attr(data-done-at); order:99; flex:none; margin-left:12px; font:500 12px var(--sh-mono); color:#6d6d72; align-self:center; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .dd .dd-more { display:block; border:0; background:none; cursor:pointer; padding:12px 10px 2px; font:400 12.5px var(--font-ui); color:#6d6d72; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .dd .dd-more:hover { color:#b5b5ba; } /* подпись группы в «Задачах» — как в проекте: «Выполненные · N», тише (вариант A макета 16-done-toggle) */ :root[data-design="shtab"] #tasks-list .sh-doneg .tg-label::before { content:"Выполненные ·"; font-size:12.5px!important; color:#6d6d72!important; } :root[data-design="shtab"] #tasks-list .sh-doneg:has(.tg-arrow.open) .tg-label::before { content:"Скрыть выполненные ·"; } :root[data-design="shtab"] #tasks-list .sh-doneg .tg-num { font-size:12.5px!important; color:#6d6d72!important; } :root[data-design="shtab"] #tasks-list .sh-doneg > .tg-hdr { opacity:1!important; } :root[data-design="shtab"] #tasks-list .sh-doneg > .tg-hdr:hover .tg-label::before, :root[data-design="shtab"] #tasks-list .sh-doneg > .tg-hdr:hover .tg-num { color:#b5b5ba!important; } /* «Просрочено»: первые 3 + «Ещё N» (29.10, прожарка №4 п.2, вариант Б) */ :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-late .sh-lhide { display:none!important; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-latemore { display:block; margin:2px 0 4px 50px; padding:4px 0; border:0; background:none; font:500 13px var(--font-ui); color:var(--text3); cursor:pointer; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-latemore:hover { color:var(--text); } /* «Важно» (29.10, прожарка №4, вариант A): красный «!» перед названием; в меню — подсказка клавиши */ :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .task-row.sh-hi .t-name::before { content:"!"; color:#ff8a80; font-weight:700; margin-right:6px; } :root[data-design="shtab"] #sh-tmenu .mi small.mkb { font:600 11px var(--mono); color:#8d8d92; background:rgba(255,255,255,.07); border-radius:5px; padding:2px 6px; } /* точка у курсора для меню задачи по правой кнопке (29.10) */ .sh-ctxa { position:fixed; width:1px; height:1px; pointer-events:none; opacity:0; } /* «Задачи» на большом экране — лист не шире 1100 px по центру, как проект и заметки (29.10, прожарка №5 п.8) */ :root[data-design="shtab"] #page-tasks > * { max-width:1100px; margin-left:auto!important; margin-right:auto!important; } /* «Задачи»: загрузка и ошибка вместо «Задач нет» (29.10, прожарка №5 п.5) */ :root[data-design="shtab"] #tasks-list .sh-tskel { padding:6px 0; } :root[data-design="shtab"] #tasks-list .sh-tsk { display:flex; gap:14px; align-items:center; padding:12px 12px; } :root[data-design="shtab"] #tasks-list .sh-tsk > i { width:24px; height:24px; border-radius:50%; border:1.8px solid rgba(255,255,255,.08); flex:none; } :root[data-design="shtab"] #tasks-list .sh-tsk > div { flex:1; display:flex; flex-direction:column; gap:8px; } :root[data-design="shtab"] #tasks-list .sh-tsk b { display:block; height:11px; border-radius:6px; background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.1),rgba(255,255,255,.05)); background-size:200% 100%; animation:sh-tsk 1.4s linear infinite; } :root[data-design="shtab"] #tasks-list .sh-tsk b:first-child { height:8px; } @keyframes sh-tsk { to { background-position:-200% 0; } } @media (prefers-reduced-motion:reduce) { :root[data-design="shtab"] #tasks-list .sh-tsk b { animation:none; } } :root[data-design="shtab"] #tasks-list .sh-tfail { display:flex; align-items:center; gap:14px; margin:14px 6px; padding:14px 16px; border-radius:16px; background:rgba(255,138,128,.08); color:#ffb3ab; font:500 14px var(--font-ui); } :root[data-design="shtab"] #tasks-list .sh-tfail button { margin-left:auto; flex:none; height:34px; padding:0 14px; border:0; border-radius:11px; background:#f4f4f2; color:#111; font:600 13px var(--font-ui); cursor:pointer; } /* меню задачи: «Проект ›» — проекты цветными кнопками (30.10, круг 2, A3) */ :root[data-design="shtab"] #sh-tmenu .mproj .so { display:inline-flex; align-items:center; gap:6px; } :root[data-design="shtab"] #sh-tmenu .mproj .so i { width:7px; height:7px; border-radius:50%; flex:none; } /* карточка человека/задачи из старой боковой панели — поверх листа (лист 950), 30.10, круг 2, A6 */ :root[data-design="shtab"] .detail-overlay { z-index:990; } :root[data-design="shtab"] .detail-panel { z-index:1000; } :root[data-design="shtab"] #sh-tmenu .mgrid.mproj { display:flex!important; flex-wrap:wrap; gap:6px; } :root[data-design="shtab"] #sh-tmenu .mgrid.mproj .so { max-width:100%; overflow:hidden; text-overflow:ellipsis; } /* курсор клавиатуры на строке задачи (30.10, круг 2, B1): видно, где фокус */ :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .task-row:focus { outline:none!important; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .task-wrap:not(.open) > .task-row.sh-cur:focus-visible, :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .tg-body > .task-row.sh-cur:focus-visible, :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .task-row.sh-cur:focus-visible { box-shadow:inset 0 0 0 1.5px rgba(244,244,242,.5)!important; background:rgba(255,255,255,.05)!important; } :root[data-design="shtab"] #sh-tmenu button:focus-visible { outline:2px solid rgba(244,244,242,.55)!important; outline-offset:-2px; } /* список не мигает при перерисовке: анимация строк только при входе в раздел (30.10, круг 2, C1) */ :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list):not(.sh-enter) .task-row:not(.sh-new) { animation:none!important; } /* строка задачи: имя исполнителя на одной линии с датой, аватар 16 px (30.10, круг 2, D1) */ :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-mwho { display:inline-flex; vertical-align:-4px; line-height:16px; gap:4px; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .sh-mwho i { width:16px!important; height:16px!important; font-size:8.5px!important; } /* Стол (30.10, круг 2, D4): «Мои открытые» в одну строку, цифры по нижнему краю; карточка «Фокус» контрастнее */ #shtab-desk .sd-cols div { display:flex; flex-direction:column; justify-content:flex-end; } #shtab-desk .sd-cols small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13px; } #shtab-desk .sd-sl span { opacity:.85; } #shtab-desk .sd-pill { background:rgba(16,20,64,.26); } #shtab-desk .sd-pill:hover { background:rgba(16,20,64,.36); } /* колокольчик уведомлений (30.10, прожарка круг 2, F1); заливка — общая для попапов (ambient.css) */ #sh-bellpop { position:fixed; z-index:9100; width:360px; max-height:min(560px, calc(100vh - 24px)); display:flex; flex-direction:column; border-radius:18px; padding:8px; color:#f4f4f2; box-shadow:0 26px 50px -18px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.06); font-family:var(--font-ui); } #sh-bellpop .bp-h { display:flex; align-items:center; justify-content:space-between; padding:8px 10px 10px; } #sh-bellpop .bp-h b { font-size:15px; font-weight:600; } #sh-bellpop .bp-h button { border:0; background:rgba(255,255,255,.07); color:#c9c9cc; font:500 12.5px var(--font-ui); height:28px; padding:0 10px; border-radius:9px; cursor:pointer; } #sh-bellpop .bp-h button:hover { background:rgba(255,255,255,.12); color:#fff; } #sh-bellpop .bp-l { overflow:auto; display:flex; flex-direction:column; gap:2px; } #sh-bellpop .bp-i { display:flex; gap:10px; align-items:flex-start; width:100%; text-align:left; border:0; background:none; color:inherit; padding:9px 10px; border-radius:12px; cursor:pointer; font-family:inherit; } #sh-bellpop .bp-i:hover, #sh-bellpop .bp-i:focus-visible { background:rgba(255,255,255,.06); outline:none; } #sh-bellpop .bp-i > i { width:7px; height:7px; border-radius:50%; margin-top:6px; flex:none; background:transparent; } #sh-bellpop .bp-i.un > i { background:#b9f36c; } #sh-bellpop .bp-i span { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; } #sh-bellpop .bp-i b { font-size:13.5px; font-weight:500; color:#a5a5aa; } #sh-bellpop .bp-i.un b { color:#f4f4f2; font-weight:600; } #sh-bellpop .bp-i small { font-size:12.5px; color:#8d8d92; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #sh-bellpop .bp-i em { font-style:normal; font:500 11.5px var(--sh-mono); color:#6d6d72; flex:none; margin-top:2px; } #sh-bellpop .bp-e { padding:18px 10px 22px; font-size:13.5px; color:#8d8d92; } :root[data-theme="light"] #sh-bellpop { color:#161618; box-shadow:0 26px 50px -18px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.08); } :root[data-theme="light"] #sh-bellpop .bp-i.un b { color:#161618; } :root[data-theme="light"] #sh-bellpop .bp-i b { color:#55555a; } :root[data-theme="light"] #sh-bellpop .bp-h button { background:rgba(0,0,0,.06); color:#3a3a3d; } :root[data-theme="light"] #sh-bellpop .bp-i:hover { background:rgba(0,0,0,.05); } :root[data-theme="light"] #sh-bellpop .bp-i.un > i { background:#5c9e1e; } :root[data-design="shtab"]:not([data-_a]):not([data-_b]):not([data-_c]) #app-sidebar #sh-bell::before{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")} /* значок колокольчика, как у остальных пунктов меню */ :root[data-design="shtab"] #page-tasks .sh-tseg[hidden] { display:none!important; } /* у участника «Все/Мои» не показываем (30.10, круг 2, F5) */ /* выбор нескольких: массовые действия с задачами (30.10, прожарка круг 2, H1) */ #ms-bar #ms-acts { display:inline-flex; gap:2px; } #ms-bar #ms-acts button { color:#f4f4f2; } #ms-bar #ms-acts button:hover:not(:disabled) { background:rgba(255,255,255,.1); } #ms-bar #ms-acts button:disabled { opacity:.4; cursor:default; } #ms-proj { position:fixed; z-index:9600; min-width:200px; max-height:50vh; overflow:auto; padding:6px; border-radius:16px; display:flex; flex-direction:column; gap:2px; box-shadow:0 26px 50px -18px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.06); } #ms-proj button { display:flex; align-items:center; gap:9px; border:0; background:none; color:#f4f4f2; font:500 13.5px var(--font-ui); text-align:left; padding:9px 10px; border-radius:11px; cursor:pointer; } #ms-proj button:hover { background:rgba(255,255,255,.07); } #ms-proj i { width:8px; height:8px; border-radius:50%; flex:none; } #ms-bar button { white-space:nowrap; } /* «Задачи»: общий список без заголовка (30.10, владелец) */ :root[data-design="shtab"] #tasks-list .sh-main > .tg-hdr { display:none!important; } :root[data-design="shtab"] #tasks-list .sh-main > .tg-body { display:block!important; } :root[data-design="shtab"] #tasks-list .task-group + .sh-main { margin-top:18px; } /* «Задачи»: строка новой задачи, как в проекте (30.10) */ :root[data-design="shtab"] #tasks-list #sh-td { margin:6px 0 2px; } :root[data-design="shtab"] #tasks-list #sh-td .ppl-nppl.tdp button { padding:0 12px; } :root[data-design="shtab"] #tasks-list #sh-td .ppl-nppl.tdp i { width:8px; height:8px; } /* ---------- движение (30.10, mn1, макет 48-motion.html; логика — 35-motion-shtab.js) ---------- */ :root[data-design="shtab"] { --sh-out:cubic-bezier(.23,1,.32,1); } @keyframes shPageIn { from { opacity:0; transform:translateY(2px); } to { opacity:1; transform:none; } } @keyframes shModalIn { from { opacity:0; transform:scale(.97); } to { opacity:1; transform:none; } } @keyframes shBarIn { from { opacity:0; translate:0 16px; } to { opacity:1; translate:0 0; } } @keyframes shCkIn { from { transform:scale(.8); } to { transform:none; } } @keyframes shCkDraw { from { stroke-dashoffset:20; } to { stroke-dashoffset:0; } } @keyframes shStrike { to { background-size:100% 1.5px; color:var(--sh-m); } } /* №33 разделы и №30 окна: быстрее и без отскока */ :root[data-design="shtab"] .page.active { animation:shPageIn .14s var(--sh-out) both; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list).sh-enter .task-row { animation:shPageIn .14s var(--sh-out) both; } :root[data-design="shtab"] .overlay.open .modal, :root[data-design="shtab"] .ctp-pop { animation:shModalIn .18s var(--sh-out) both; } :root[data-design="shtab"] .toast { transition:opacity .2s var(--sh-out), transform .2s var(--sh-out); } /* №8 галочка рисуется, название перечёркивается */ :root[data-design="shtab"] .task-check.tc-pop { animation:shCkIn .22s var(--sh-spring); } :root[data-design="shtab"] .task-check.tc-pop svg path { stroke-dasharray:20; animation:shCkDraw .22s .04s var(--sh-out) both; } :root[data-design="shtab"] .task-row:has(.task-check.tc-pop) .t-name { width:fit-content; max-width:100%; background:linear-gradient(currentColor,currentColor) no-repeat 0 56%/0 1.5px; animation:shStrike .24s .09s var(--sh-out) forwards; } /* №1, №2 плашка и №6 счётчики */ .sh-glide { position:absolute; z-index:0; pointer-events:none; display:block; will-change:transform; } :is(.sh-tseg,.sh-pseg,.sd-ph-seg,.ca-seg,.ntb-seg,.fa-seg,.pf-seg,.pl-seg,.ck-seg).sh-glp { position:relative; } :is(.sh-tseg,.sh-pseg,.sd-ph-seg,.ca-seg,.ntb-seg,.fa-seg,.pf-seg,.pl-seg,.ck-seg).sh-glp > :not(.sh-glide) { position:relative; z-index:1; } #app-sidebar.sh-glp :is(.sb-btn,.sb-proj-row,.sb-sub-row) { position:relative; z-index:1; } .sh-roll { display:inline-grid; overflow:hidden; vertical-align:bottom; } .sh-roll > i { grid-area:1/1; font-style:normal; } #app-sidebar .sh-badge { font-variant-numeric:tabular-nums!important; font-feature-settings:"tnum" 1!important; } /* цифры одной ширины: кружок не меняет размер, 21 и 20 одинаковые (mn9) */ :root[data-design="shtab"] #app-sidebar .sh-badge.sh-roll { display:grid; place-items:center; overflow:hidden; } :is(#tasks-list,#proj-tasks-list) .tg-num, #ms-count { font-feature-settings:"tnum" 1!important; } .sh-roll > i[data-o]::before { content:attr(data-o); } /* №5, №12 плашки снизу */ :root[data-design="shtab"] :is(#ms-toast,#ms-bar).on { animation:shBarIn .2s var(--sh-out) both; } :root[data-design="shtab"] #ms-toast { overflow:hidden; } /* плашки снизу всегда тёмные и выше края листа, как меню задачи (mn8) */ :root[data-design="shtab"]:root :is(#ms-toast,#ms-bar,.toast) { background:#38383b!important; color:#f4f4f2; border:0; border-radius:14px; box-shadow:0 18px 40px -12px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.07); } :root[data-design="shtab"] :is(#ms-toast,#ms-bar) { bottom:44px; } :root[data-design="shtab"] .toast { bottom:44px; } :root[data-design="shtab"] #ms-toast { padding:11px 18px; font-weight:500; } :root[data-design="shtab"] #ms-bar #ms-cancel { color:#c9c9cc; } :root[data-design="shtab"] #ms-bar #ms-cancel:hover { background:rgba(255,255,255,.1); } :root[data-design="shtab"] #ms-bar #ms-count { color:#a5a5aa; } :root[data-design="shtab"] #ms-toast button { color:var(--sh-lime); font-weight:600; } .ms-tm { display:none; } :root[data-design="shtab"] .ms-tm { display:block; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--sh-lime); transform-origin:left; } /* карточка задачи (mn5–mn7). app.css держал на .task-wrap свой transition с !important: высота, нижний отступ и отступы строки прыгали. Открытие — .4 с мягкой кривой, закрытие быстрее */ :root[data-design="shtab"] { --sh-open:cubic-bezier(.3,.6,.1,1); } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk { transition:height .26s var(--sh-tk-spring), margin .25s var(--sh-tk-spring), padding .25s var(--sh-tk-spring), filter .25s!important; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open:not(.up):not([data-h]):not(.sh-lk) { transition:height .4s var(--sh-open), margin .4s var(--sh-open), padding .4s var(--sh-open), filter .4s!important; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open > .task-row { transition:background .4s var(--sh-open), color .35s, padding .4s var(--sh-open), border-radius .4s var(--sh-open), box-shadow .4s!important; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open:not(.up):not([data-h]):not(.sh-lk) .sh-x { transition:grid-template-rows .4s var(--sh-open), margin .4s var(--sh-open)!important; } :root[data-design="shtab"] :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open:not(.up):not([data-h]):not(.sh-lk) .task-accordion { transition:opacity .26s .1s, transform .4s var(--sh-open)!important; } :root[data-design="shtab"][data-tstyle="under"] :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open .sh-ul { animation:shkUlIn .32s .1s ease-out both!important; } /* иконки групп в «Задачах» (вариант B макета 49): иконка над колонкой кружков, текст по линии названий */ :root[data-design="shtab"] #tasks-list .sh-tgic > .tg-hdr { gap:14px!important; } :root[data-design="shtab"] #tasks-list .sh-tgi { width:24px; height:16px; flex:none; fill:none; stroke:#b4b4b8; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } :root[data-design="shtab"] #tasks-list .sh-tgic .tg-label { color:#b4b4b8!important; } :root[data-design="shtab"] #tasks-list .sh-tgic .tg-num { margin-left:-6px!important; } /* №25 */ .sh-dayall { position:fixed; left:50%; top:22%; z-index:9500; font:600 30px var(--font-ui); letter-spacing:-.02em; color:var(--sh-lime); text-shadow:0 2px 24px rgba(0,0,0,.6); pointer-events:none; } /* №29 смена темы */ html[data-design="shtab"]::view-transition-old(root), html[data-design="shtab"]::view-transition-new(root) { animation:none; mix-blend-mode:normal; } html[data-design="shtab"]::view-transition-group(root) { animation:none; } /* выбор даты в черновике календаря: тёмная подложка (макет 56) */ :root[data-design="shtab"] :is(#cal-a .ca-draft,#cal-popup-el) .iam-dt [data-nod] { display:none!important; } :root[data-design="shtab"] :is(#cal-a .ca-draft,#cal-popup-el) .iam-dt .dh { padding:0 0 8px; } :root[data-design="shtab"] :is(#cal-a .ca-draft,#cal-popup-el) .iam-dt .dw { grid-template-columns:repeat(14,1fr); } @media (max-width:640px) { :root[data-design="shtab"] :is(#cal-a .ca-draft,#cal-popup-el) .iam-dt .dw { grid-template-columns:repeat(7,1fr); } } :is(#cal-a .ca-draft,#cal-popup-el) .iam-dt { font:400 13px var(--font-ui); } :is(#cal-a .ca-draft,#cal-popup-el) .iam-dt .dts button { font-size:12px; } :is(#cal-a .ca-draft,#cal-popup-el) .iam-dt .dw button b { font-size:14px; } :is(#cal-a .ca-draft,#cal-popup-el) .dth { padding:0 6px; } :root[data-design="shtab"] :is(#cal-a .ca-draft,#cal-popup-el) .iam-dt :is(.dw,.dg) button.on { background:#f4f4f2; color:#55555a; box-shadow:none; } :root[data-design="shtab"] :is(#cal-a .ca-draft,#cal-popup-el) .iam-dt .dw button.on b, :root[data-design="shtab"] :is(#cal-a .ca-draft,#cal-popup-el) .iam-dt .dg button.on { color:#161618; } :root[data-design="shtab"] :is(#cal-a .ca-draft,#cal-popup-el) .iam-dt .dts button { background:rgba(255,255,255,.07); color:#f4f4f2; } :root[data-design="shtab"] :is(#cal-a .ca-draft,#cal-popup-el) .iam-dt .dts button:hover { background:rgba(255,255,255,.12); } :root[data-design="shtab"] :is(#cal-a .ca-draft,#cal-popup-el) .iam-dt .dts button.on { background:#f4f4f2; color:#161618; } :root[data-design="shtab"] :is(#cal-a .ca-draft,#cal-popup-el) .iam-dt .dts .dtc button, :root[data-design="shtab"] :is(#cal-a .ca-draft,#cal-popup-el) .iam-dt .dts .dtc button:hover { background:none; color:inherit; } :root[data-design="shtab"] :is(#cal-a .ca-draft,#cal-popup-el) .iam-dt .dtc.on { background:#f4f4f2; color:#161618; } :root[data-design="shtab"] :is(#cal-a .ca-draft,#cal-popup-el) .iam-dt .dtc.on input { color:#161618; } /* время в черновике задаётся местом на сетке, ряд времени в панели не нужен (dc5) */ :root[data-design="shtab"] #cal-a .ca-draft .iam-dt .dtr { display:none; } /* фокус идёт: точка у значка в левом меню и остаток времени (02.11) */ @keyframes sh-fblink { 0%,100% { opacity:1; } 50% { opacity:.2; } } :root[data-design="shtab"] #app-sidebar .sb-btn[data-p="focus"] { position:relative; } :root[data-design="shtab"] #app-sidebar .sh-fd { position:absolute; left:30px; top:9px; width:9px; height:9px; border-radius:50%; background:#8c97e8; box-shadow:0 0 0 2px #101012; pointer-events:none; } :root[data-design="shtab"] #app-sidebar .sb-btn.sh-fr .sh-fd { animation:sh-fblink 1.4s ease-in-out infinite; } :root[data-design="shtab"] #app-sidebar .sh-ft { margin-left:auto; font:600 12px var(--mono,ui-monospace,monospace); color:#b4b7f0; font-variant-numeric:tabular-nums; }