/* ============================================================================ Devbyte — вход и состояние «не авторизован». Дроп-ин для devbyte.css (конспекты) и для страницы входа академии. Только CSS, без библиотек. Все цвета — через токены тем. ========================================================================= */ /* --- 1. Токены ------------------------------------------------------------- В devbyte.css блоки :root / [data-theme='dark'] уже есть — при интеграции этот блок НЕ дублируется, добавляются только переменные с пометкой NEW. */ :root{ --ifm-color-primary:#5b3fd6;--ifm-color-primary-darker:#4a32b5;--ifm-color-primary-darkest:#3d2995; --ifm-color-primary-lightest:#9a87ec; --ifm-background-color:#ffffff;--ifm-background-surface-color:#f7f7fa; --ifm-font-color-base:#1f2328;--ifm-heading-color:#111318; --ifm-color-emphasis-200:#e9ecf1;--ifm-color-emphasis-300:#dfe2e8; --ifm-font-family-base:"Noto Sans",Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --dv-ok:#1f8a4c;--dv-err:#c0392b;--dv-amber:#ffbe00; --dv-card:#ffffff;--dv-border:#e9ecf1;--dv-muted:#57606a;--dv-surface:#f7f7fa; /* NEW */ --dv-font-head:"DM Sans","Noto Sans",system-ui,sans-serif; /* как на главной каталога */ --dv-ink:#06040e; /* подложка молнии */ --dv-tint:rgba(91,63,214,.08); /* мягкая заливка акцента */ --dv-tint-strong:rgba(91,63,214,.14); --dv-err-bg:rgba(192,57,43,.08); --dv-ok-bg:rgba(31,138,76,.10); --dv-ok-text:#15713c; /* --dv-ok (#1f8a4c) даёт 4.38:1 на белом — для текста берём темнее */ --dv-shadow-1:0 1px 2px rgba(24,24,26,.05),0 6px 18px rgba(24,24,26,.07); --dv-shadow-2:0 18px 48px rgba(24,24,26,.16); --dv-focus:var(--ifm-color-primary); } [data-theme='dark']{ --ifm-color-primary:#a08cff;--ifm-color-primary-darker:#866dff;--ifm-color-primary-darkest:#6b4fef; --ifm-color-primary-lightest:#d2c9ff; --ifm-background-color:#0f1117;--ifm-background-surface-color:#161922; --ifm-font-color-base:#d9dce3;--ifm-heading-color:#f0f2f5; --ifm-color-emphasis-200:#232834;--ifm-color-emphasis-300:#2a2f3b; --dv-ok:#6ccf8e;--dv-err:#ff7b6b; --dv-card:#161922;--dv-border:#262a36;--dv-muted:#9aa3b2;--dv-surface:#161922; /* NEW */ --dv-tint:rgba(160,140,255,.12); --dv-tint-strong:rgba(160,140,255,.18); --dv-err-bg:rgba(255,123,107,.12); --dv-ok-bg:rgba(108,207,142,.12); --dv-ok-text:var(--dv-ok); --dv-shadow-1:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.35); --dv-shadow-2:0 18px 48px rgba(0,0,0,.5); } /* --- 2. Общие примитивы ---------------------------------------------------- */ /* В Docusaurus box-sizing уже глобальный; на отдельной странице входа — нет. */ .dv-gate,.dv-signin,.dv-acmenu,.dv-toast,.dv-resume,.dv-account,.dv-sb-acc,.dv-sb-view, .dv-a-btn,.dv-input,.dv-field,.dv-tabs,.dv-alert, .dv-gate *,.dv-signin *,.dv-acmenu *,.dv-toast *,.dv-resume *,.dv-account *{box-sizing:border-box} .dv-a-btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:44px;padding:0 20px;border-radius:10px;border:1px solid transparent; font:700 .95rem/1 var(--dv-font-head);cursor:pointer;text-decoration:none!important; transition:background .15s,border-color .15s,color .15s;white-space:nowrap; } .dv-a-btn--primary{background:var(--ifm-color-primary);color:#fff} .dv-a-btn--primary:hover{background:var(--ifm-color-primary-darker)} [data-theme='dark'] .dv-a-btn--primary{color:#0f1117} .dv-a-btn--ghost{background:var(--dv-card);color:var(--ifm-font-color-base);border-color:var(--dv-border)} .dv-a-btn--ghost:hover{border-color:var(--ifm-color-primary);color:var(--ifm-color-primary)} .dv-a-btn--quiet{background:transparent;color:var(--dv-muted);border-color:transparent;font-weight:600} .dv-a-btn--quiet:hover{color:var(--ifm-color-primary)} .dv-a-btn--wide{width:100%} .dv-a-btn[disabled],.dv-a-btn[aria-busy="true"]{opacity:.65;cursor:default} .dv-a-btn:focus-visible,.dv-a-link:focus-visible,.dv-input:focus-visible, .dv-account:focus-visible,.dv-acmenu__item:focus-visible,.dv-tabs button:focus-visible{ outline:2px solid var(--dv-focus);outline-offset:2px; } .dv-a-link{color:var(--ifm-color-primary);font-weight:600;text-decoration:none} .dv-a-link:hover{text-decoration:underline} .dv-a-spin{ width:15px;height:15px;border:2px solid currentColor;border-right-color:transparent; border-radius:50%;display:inline-block;animation:dv-a-spin .8s linear infinite;flex:0 0 auto; } @keyframes dv-a-spin{to{transform:rotate(360deg)}} .dv-bolt{display:grid;place-items:center;background:var(--dv-ink);border-radius:12px;flex:0 0 auto} .dv-bolt svg{display:block} .dv-a-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* --- 3. Элемент аккаунта в шапке ------------------------------------------- */ .dv-account{ position:relative;display:inline-flex;align-items:center;gap:8px; height:34px;padding:0 12px 0 4px;margin-right:6px; border:1px solid var(--dv-border);border-radius:999px;background:transparent; color:var(--ifm-font-color-base);font:600 .85rem/1 var(--ifm-font-family-base); cursor:pointer;white-space:nowrap;transition:border-color .15s,color .15s; } .dv-account:hover{border-color:var(--ifm-color-primary);color:var(--ifm-color-primary)} /* зона нажатия ≥44px, размер кнопки при этом остаётся 34px */ .dv-account::before{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)} .dv-account__ava{ width:26px;height:26px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center; background:var(--dv-tint-strong);color:var(--ifm-color-primary); font:700 .72rem/1 var(--dv-font-head);letter-spacing:.02em;text-transform:uppercase; } .dv-account--out .dv-account__ava{background:transparent;color:var(--dv-muted)} .dv-account__name{max-width:12ch;overflow:hidden;text-overflow:ellipsis} .dv-account__caret{opacity:.55;flex:0 0 auto} .dv-account[aria-expanded="true"]{border-color:var(--ifm-color-primary);color:var(--ifm-color-primary)} /* кнопка «Войти» — заметная, но не спорит с «Все курсы» */ .dv-account--out{padding:0 14px;gap:7px} .dv-account[hidden],.dv-acmenu[hidden],.dv-field[hidden],.dv-a-link[hidden], .dv-a-btn[hidden],.dv-sec[hidden],.dv-sum__lvl[hidden]{display:none!important} .dv-account--out .dv-account__name{max-width:none} /* выпадающее меню */ .dv-acmenu{ position:absolute;top:calc(100% + 10px);right:0;z-index:320;width:268px; background:var(--dv-card);border:1px solid var(--dv-border);border-radius:14px; box-shadow:var(--dv-shadow-2);padding:6px;display:none; font-family:var(--ifm-font-family-base);text-align:left;color:var(--ifm-font-color-base); } .dv-acmenu[data-open="true"]{display:block} .dv-acmenu__head{display:flex;align-items:center;gap:10px;padding:10px 10px 12px} .dv-acmenu__head .dv-account__ava{width:38px;height:38px;font-size:.92rem} .dv-acmenu__who{min-width:0} .dv-acmenu__who b{display:block;font:700 .92rem/1.25 var(--dv-font-head);color:var(--ifm-heading-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dv-acmenu__who small{display:block;margin-top:2px;font-size:.78rem;color:var(--dv-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dv-acmenu__prog{margin:0 10px 10px;padding:10px 12px;border-radius:10px;background:var(--dv-surface);border:1px solid var(--dv-border)} .dv-acmenu__prog b{display:flex;justify-content:space-between;font:600 .8rem/1 var(--ifm-font-family-base);margin-bottom:8px} .dv-acmenu__prog b span{color:var(--dv-muted);font-weight:600;font-variant-numeric:tabular-nums} .dv-acmenu__bar{height:6px;border-radius:999px;background:var(--ifm-color-emphasis-200);overflow:hidden} .dv-acmenu__bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--ifm-color-primary),var(--dv-amber))} .dv-acmenu__sep{height:1px;background:var(--dv-border);margin:6px 4px} .dv-acmenu__item{ display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 12px; border:0;border-radius:10px;background:transparent;color:var(--ifm-font-color-base); font:600 .9rem/1.3 var(--ifm-font-family-base);text-align:left;text-decoration:none!important;cursor:pointer; } .dv-acmenu__item:hover{background:var(--dv-tint)} .dv-acmenu__item svg{opacity:.6;flex:0 0 auto} .dv-acmenu__item small{margin-left:auto;color:var(--dv-muted);font-weight:600;font-size:.76rem} .dv-acmenu__item--danger{color:var(--dv-err)} .dv-acmenu__item--danger svg{opacity:.75} .dv-acmenu__note{padding:8px 12px 10px;color:var(--dv-muted);font-size:.78rem;line-height:1.45} .dv-acmenu__note .dot{color:var(--dv-ok-text);font-weight:700} /* мобильная шапка: остаётся только аватар */ @media(max-width:996px){ .dv-account{height:36px;padding:0 4px;margin-right:2px;border-color:transparent} .dv-account .dv-account__name,.dv-account .dv-account__caret{display:none} .dv-account__ava{width:32px;height:32px;font-size:.8rem} .dv-account--out .dv-account__ava{background:var(--dv-tint-strong);color:var(--ifm-color-primary)} .dv-acmenu{position:fixed;left:8px;right:8px;top:auto;bottom:8px;width:auto;border-radius:16px;padding:8px} .dv-acmenu__item{min-height:48px} } /* строка аккаунта в бургер-меню (уже есть .dv-sb-acc — стили ниже её заменяют) */ .dv-sb-acc{ display:flex;align-items:center;gap:10px;width:100%;min-height:52px;margin:0 0 10px; padding:8px 12px;border:1px solid var(--dv-border);border-radius:12px;background:var(--dv-card); color:var(--ifm-font-color-base);font:inherit;text-align:left;cursor:pointer; } .dv-sb-acc b{display:block;font:700 .9rem/1.25 var(--dv-font-head)} .dv-sb-acc em{display:block;font-style:normal;font-size:.76rem;color:var(--dv-muted);margin-top:2px} .dv-sb-acc .dv-account__ava{width:34px;height:34px;font-size:.82rem} /* блок «Вид» в бургере: сюда уезжают шрифт и тема с узких экранов */ .dv-sb-view{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px;padding:10px 12px;border:1px solid var(--dv-border);border-radius:12px} .dv-sb-view > b{flex:1 0 100%;font:700 11px/1 var(--ifm-font-family-base);letter-spacing:.08em;text-transform:uppercase;color:var(--dv-muted);margin-bottom:4px} /* --- 4. Экран-приглашение (закрытый конспект) ------------------------------ */ .dv-gate{ min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center; padding:32px 16px;background:var(--ifm-background-color);color:var(--ifm-font-color-base); font-family:var(--ifm-font-family-base); } .dv-gate__wrap{width:100%;max-width:1040px} .dv-gate__card{ display:grid;grid-template-columns:1.15fr .85fr;gap:0; background:var(--dv-card);border:1px solid var(--dv-border);border-radius:20px; box-shadow:var(--dv-shadow-1);overflow:hidden; } .dv-gate__main{padding:40px 40px 36px;min-width:0} .dv-gate__side{padding:36px 32px;background:var(--dv-surface);border-left:1px solid var(--dv-border);min-width:0} [data-theme='dark'] .dv-gate__side{background:rgba(255,255,255,.02)} .dv-gate__brand{display:flex;align-items:center;gap:10px;margin-bottom:24px} .dv-gate__brand .dv-bolt{width:36px;height:36px;border-radius:10px} .dv-gate__brand b{font:800 17px/1 var(--dv-font-head);letter-spacing:-.01em;color:var(--ifm-heading-color)} .dv-gate__brand span{color:var(--dv-muted);font:500 17px/1 var(--dv-font-head)} .dv-gate__eyebrow{ display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;padding:6px 12px; border-radius:999px;background:var(--dv-tint);color:var(--ifm-color-primary); font:600 12.5px/1 var(--ifm-font-family-base); } .dv-gate__eyebrow svg{flex:0 0 auto} .dv-gate h1{ margin:0 0 12px;font:800 clamp(26px,3.6vw,36px)/1.12 var(--dv-font-head); letter-spacing:-.025em;color:var(--ifm-heading-color);text-wrap:balance; } .dv-gate__lead{margin:0 0 22px;color:var(--dv-muted);font-size:1rem;line-height:1.6;max-width:46ch} .dv-gate__facts{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 24px;padding:0;list-style:none} .dv-gate__facts li{ display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px; border:1px solid var(--dv-border);background:var(--ifm-background-color); font:600 .82rem/1 var(--ifm-font-family-base);color:var(--ifm-font-color-base); } .dv-gate__facts svg{opacity:.55;flex:0 0 auto} .dv-gate__actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px} .dv-gate__back{display:inline-flex;align-items:center;gap:7px;min-height:44px;color:var(--dv-muted);font-weight:600;font-size:.88rem;text-decoration:none} .dv-gate__back:hover{color:var(--ifm-color-primary)} .dv-gate__return{ display:flex;gap:10px;align-items:flex-start;margin-top:22px;padding:12px 14px; border-left:3px solid var(--dv-amber);background:var(--dv-surface);border-radius:0 10px 10px 0; font-size:.85rem;line-height:1.5;color:var(--dv-muted); } [data-theme='dark'] .dv-gate__return{background:rgba(255,190,0,.07)} .dv-gate__return b{display:block;color:var(--ifm-font-color-base);font-weight:600} .dv-gate__side h2{margin:0 0 14px;font:700 .78rem/1 var(--ifm-font-family-base);letter-spacing:.08em;text-transform:uppercase;color:var(--dv-muted)} .dv-gate__toc{margin:0 0 22px;padding:0;list-style:none;display:grid;gap:9px} .dv-gate__toc li{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;line-height:1.45} .dv-gate__toc i{ flex:0 0 auto;width:20px;height:20px;border-radius:6px;background:var(--dv-tint);color:var(--ifm-color-primary); display:grid;place-items:center;font:700 11px/1 var(--dv-font-head);font-style:normal;margin-top:1px; } .dv-gate__toc li.more{color:var(--dv-muted);font-size:.84rem;padding-left:30px} .dv-gate__why{margin:0;padding:18px 0 0;border-top:1px solid var(--dv-border);display:grid;gap:12px;list-style:none} .dv-gate__why li{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;line-height:1.45;color:var(--ifm-font-color-base)} .dv-gate__why svg{flex:0 0 auto;color:var(--dv-ok-text);margin-top:2px} .dv-gate__foot{margin-top:18px;text-align:center;font-size:.8rem;color:var(--dv-muted)} @media(max-width:900px){ .dv-gate__card{grid-template-columns:1fr} .dv-gate__side{border-left:0;border-top:1px solid var(--dv-border);padding:28px 24px} .dv-gate__main{padding:32px 24px 26px} } @media(max-width:480px){ .dv-gate{padding:16px 12px} .dv-gate__card{border-radius:16px} .dv-gate__main{padding:24px 18px 20px} .dv-gate__side{padding:22px 18px} .dv-gate__actions{flex-direction:column;align-items:stretch} .dv-gate__actions .dv-a-btn{width:100%} .dv-gate__lead{font-size:.95rem} } /* --- 5. Страница входа ----------------------------------------------------- */ .dv-signin{ min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:1fr 1fr; background:var(--ifm-background-color);color:var(--ifm-font-color-base);font-family:var(--ifm-font-family-base); } .dv-signin__promo{ position:relative;padding:48px 44px;background:var(--dv-ink);color:#fff;overflow:hidden; display:flex;flex-direction:column;justify-content:space-between; } .dv-signin__promo::after{ content:"";position:absolute;inset:auto -20% -30% -20%;height:60%; background:radial-gradient(60% 60% at 50% 100%,rgba(123,102,255,.45),transparent 70%);pointer-events:none; } .dv-signin__promo > *{position:relative;z-index:1} .dv-signin__promo .dv-gate__brand b{color:#fff} .dv-signin__promo .dv-gate__brand span{color:rgba(255,255,255,.55)} .dv-signin__promo .dv-bolt{background:rgba(255,255,255,.08)} .dv-signin__promo h2{margin:0 0 14px;font:800 clamp(24px,2.6vw,32px)/1.15 var(--dv-font-head);letter-spacing:-.025em;text-wrap:balance} .dv-signin__promo p{margin:0 0 26px;color:rgba(255,255,255,.66);font-size:.98rem;line-height:1.6;max-width:42ch} .dv-signin__promo ul{list-style:none;margin:0;padding:0;display:grid;gap:12px} .dv-signin__promo li{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;line-height:1.5;color:rgba(255,255,255,.88)} .dv-signin__promo li svg{flex:0 0 auto;color:var(--dv-amber);margin-top:2px} .dv-signin__stats{display:flex;gap:28px;margin-top:36px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14)} .dv-signin__stats b{display:block;font:800 22px/1.1 var(--dv-font-head);font-variant-numeric:tabular-nums} .dv-signin__stats small{font-size:12.5px;color:rgba(255,255,255,.55)} .dv-signin__pane{display:flex;align-items:center;justify-content:center;padding:48px 24px} .dv-signin__form{width:100%;max-width:392px} .dv-signin__form > h1{margin:0 0 6px;font:800 26px/1.2 var(--dv-font-head);letter-spacing:-.02em;color:var(--ifm-heading-color)} .dv-signin__sub{margin:0 0 24px;color:var(--dv-muted);font-size:.92rem;line-height:1.5} .dv-tabs{display:flex;gap:4px;padding:4px;margin-bottom:22px;border-radius:12px;background:var(--dv-surface);border:1px solid var(--dv-border)} .dv-tabs button{ flex:1;min-height:40px;border:0;border-radius:9px;background:transparent;color:var(--dv-muted); font:700 .9rem/1 var(--ifm-font-family-base);cursor:pointer;transition:background .15s,color .15s; } .dv-tabs button[aria-selected="true"]{background:var(--dv-card);color:var(--ifm-heading-color);box-shadow:var(--dv-shadow-1)} .dv-field{margin-bottom:16px} .dv-field > label{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px;font:600 .82rem/1.3 var(--ifm-font-family-base);color:var(--dv-muted)} .dv-input{ width:100%;min-height:46px;padding:0 14px;border-radius:10px; border:1.5px solid var(--dv-border);background:var(--ifm-background-color); color:var(--ifm-font-color-base);font:400 .95rem/1 var(--ifm-font-family-base); transition:border-color .15s; } .dv-input::placeholder{color:var(--dv-muted);opacity:.7} .dv-input:hover{border-color:var(--ifm-color-emphasis-300)} .dv-input:focus{outline:none;border-color:var(--ifm-color-primary)} .dv-input:focus-visible{outline:2px solid var(--dv-focus);outline-offset:1px;border-color:var(--ifm-color-primary)} .dv-field[data-invalid="true"] .dv-input{border-color:var(--dv-err)} .dv-field__err{display:none;align-items:center;gap:6px;margin-top:6px;color:var(--dv-err);font-size:.82rem;font-weight:600;line-height:1.4} .dv-field[data-invalid="true"] .dv-field__err{display:flex} .dv-field__hint{margin-top:6px;color:var(--dv-muted);font-size:.8rem;line-height:1.4} .dv-pass{position:relative} .dv-pass .dv-input{padding-right:52px} .dv-pass button{ position:absolute;right:4px;top:50%;transform:translateY(-50%);width:44px;height:44px; border:0;background:transparent;color:var(--dv-muted);cursor:pointer;display:grid;place-items:center;border-radius:8px; } .dv-pass button:hover{color:var(--ifm-color-primary)} .dv-alert{ display:flex;gap:10px;align-items:flex-start;margin-bottom:16px;padding:12px 14px;border-radius:10px; font-size:.86rem;line-height:1.5;border:1px solid transparent; } .dv-alert svg{flex:0 0 auto;margin-top:2px} .dv-alert b{display:block;font-weight:700;margin-bottom:2px} .dv-alert--err{background:var(--dv-err-bg);border-color:rgba(192,57,43,.25);color:var(--dv-err)} [data-theme='dark'] .dv-alert--err{border-color:rgba(255,123,107,.3)} .dv-alert--err b{color:var(--dv-err)} .dv-alert--ok{background:var(--dv-ok-bg);border-color:rgba(31,138,76,.25);color:var(--dv-ok-text)} .dv-alert--info{background:var(--dv-surface);border-color:var(--dv-border);color:var(--ifm-font-color-base)} .dv-alert--info svg{color:var(--ifm-color-primary)} .dv-alert__act{margin-top:8px;display:flex;gap:10px;flex-wrap:wrap} .dv-signin__row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-4px 0 18px} .dv-signin__legal{margin-top:18px;padding-top:16px;border-top:1px solid var(--dv-border);color:var(--dv-muted);font-size:.78rem;line-height:1.5;text-align:center} .dv-signin__switch{margin-top:14px;text-align:center;font-size:.88rem;color:var(--dv-muted)} @media(max-width:900px){ .dv-signin{grid-template-columns:1fr} .dv-signin__promo{display:none} .dv-signin__pane{padding:28px 16px 40px;align-items:flex-start} .dv-signin__form{max-width:440px} .dv-signin__mobrand{display:flex!important} } .dv-signin__mobrand{display:none;align-items:center;gap:10px;margin-bottom:26px} .dv-signin__mobrand .dv-bolt{width:34px;height:34px;border-radius:10px} .dv-signin__mobrand b{font:800 16px/1 var(--dv-font-head);color:var(--ifm-heading-color)} .dv-signin__mobrand span{font:500 16px/1 var(--dv-font-head);color:var(--dv-muted)} /* --- 6. Продолжить как… / истёкшая сессия / сетевые состояния --------------- */ .dv-resume{ display:flex;gap:12px;align-items:center;margin-bottom:20px;padding:14px; border:1px solid var(--ifm-color-primary-lightest);border-radius:12px;background:var(--dv-tint); } [data-theme='dark'] .dv-resume{border-color:var(--ifm-color-primary-darkest)} .dv-resume .dv-account__ava{width:40px;height:40px;font-size:.95rem;background:var(--dv-card)} .dv-resume__who{min-width:0;flex:1} .dv-resume__who small{display:block;font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ifm-color-primary)} .dv-resume__who b{display:block;font:700 .95rem/1.3 var(--dv-font-head);color:var(--ifm-heading-color)} .dv-resume__mail{display:block;font-size:.8rem;color:var(--dv-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dv-resume__act{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px} @media(max-width:480px){.dv-resume{flex-wrap:wrap}} .dv-toast{ position:fixed;left:16px;right:16px;bottom:16px;z-index:420;margin:0 auto;max-width:440px; display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:14px; background:var(--dv-card);border:1px solid var(--dv-border);box-shadow:var(--dv-shadow-2); font-family:var(--ifm-font-family-base);font-size:.88rem;line-height:1.5;color:var(--ifm-font-color-base); } .dv-toast b{display:block;font:700 .92rem/1.3 var(--dv-font-head);color:var(--ifm-heading-color);margin-bottom:2px} .dv-toast p{margin:0;color:var(--dv-muted)} .dv-toast__icon{flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--dv-err-bg);color:var(--dv-err)} .dv-toast__icon--ok{background:var(--dv-ok-bg);color:var(--dv-ok-text)} .dv-toast__act{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap} .dv-toast__close{margin-left:auto;width:44px;height:44px;margin:-8px -10px -8px 0;border:0;background:transparent;color:var(--dv-muted);cursor:pointer;border-radius:10px;display:grid;place-items:center;flex:0 0 auto} .dv-toast__close:hover{color:var(--ifm-font-color-base)} @media(min-width:997px){.dv-toast{left:auto;right:20px;bottom:20px}} /* скелет загрузки: без анимации, просто спокойные плашки */ .dv-skel{background:var(--ifm-color-emphasis-200);border-radius:8px;height:12px} .dv-loading{display:flex;flex-direction:column;align-items:center;gap:14px;padding:48px 16px;color:var(--dv-muted);font-size:.9rem} .dv-loading .dv-a-spin{width:22px;height:22px;color:var(--ifm-color-primary);border-width:2.5px} @media(prefers-reduced-motion:reduce){ .dv-a-btn,.dv-input,.dv-account,.dv-tabs button{transition:none} .dv-a-spin{animation-duration:2s} } @media(prefers-contrast:more){ .dv-account,.dv-input,.dv-a-btn--ghost{border-color:var(--ifm-font-color-base)} } /* Надзаголовок промо-колонки входа: короткая строка о курсе над его названием */ .dv-signin__eyebrow{margin:0 0 6px;font:700 12.5px/1.3 var(--dv-font-head);letter-spacing:.06em; text-transform:uppercase;color:var(--dv-gold,#FFBE00)} /* --- 8. Кабинет и внутренние страницы академии ----------------------------- Тот же язык, что у шлюза и входа: те же токены, та же типографика, тот же радиус и тень. Отдельный префикс dv-app, чтобы блок можно было подключать к любой странице академии, не трогая Docusaurus. */ .dv-app,.dv-app *{box-sizing:border-box} .dv-app{ min-height:100vh;min-height:100dvh; background:var(--ifm-background-surface-color);color:var(--ifm-font-color-base); font-family:var(--ifm-font-family-base);line-height:1.6; } .dv-app__wrap{width:100%;max-width:1040px;margin:0 auto;padding:0 20px} .dv-app__head{ position:sticky;top:0;z-index:20; background:var(--ifm-background-color); /* запасной вариант */ background:color-mix(in srgb,var(--ifm-background-color) 92%,transparent); backdrop-filter:blur(10px);border-bottom:1px solid var(--dv-border); } .dv-app__head .dv-app__wrap{display:flex;align-items:center;gap:14px;min-height:64px} .dv-app__brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto} .dv-app__brand .dv-bolt{width:34px;height:34px;border-radius:10px} .dv-app__brand b{font:800 17px/1 var(--dv-font-head);letter-spacing:-.01em;color:var(--ifm-heading-color)} .dv-app__brand span{font:500 17px/1 var(--dv-font-head);color:var(--dv-muted)} .dv-app__nav{display:flex;align-items:center;gap:2px;margin-left:12px;flex:1;min-width:0;overflow:auto;scrollbar-width:none} .dv-app__nav::-webkit-scrollbar{display:none} .dv-app__nav a{ display:inline-flex;align-items:center;height:36px;padding:0 12px;border-radius:9px; font:600 .88rem/1 var(--dv-font-head);color:var(--dv-muted);text-decoration:none;white-space:nowrap; } .dv-app__nav a:hover{background:var(--dv-tint);color:var(--ifm-color-primary)} .dv-app__nav a[aria-current="page"]{background:var(--dv-tint-strong);color:var(--ifm-color-primary)} .dv-app__act{display:flex;align-items:center;gap:8px;flex:0 0 auto} .dv-app__main{padding:26px 0 64px} .dv-app h1{margin:0 0 4px;font:800 clamp(24px,3.4vw,32px)/1.15 var(--dv-font-head);letter-spacing:-.025em;color:var(--ifm-heading-color)} .dv-app__sub{margin:0 0 22px;color:var(--dv-muted);font-size:.92rem} /* Тёмная карточка сводки — тот же приём, что в промо-колонке входа */ .dv-sum{ position:relative;overflow:hidden;background:var(--dv-ink);color:#fff; border-radius:18px;padding:26px 28px;display:flex;flex-wrap:wrap;align-items:center;gap:26px; } .dv-sum::after{ content:"";position:absolute;inset:auto -20% -60% 30%;height:170%; background:radial-gradient(50% 50% at 50% 100%,rgba(123,102,255,.42),transparent 70%);pointer-events:none; } .dv-sum > *{position:relative;z-index:1} .dv-sum__pts{font:800 clamp(34px,5vw,46px)/1 var(--dv-font-head);letter-spacing:-.03em;font-variant-numeric:tabular-nums} .dv-sum__pts small{display:block;margin-top:6px;font:500 13px/1 var(--ifm-font-family-base);color:rgba(255,255,255,.55)} .dv-chips{display:flex;flex-wrap:wrap;gap:8px;flex:1;min-width:200px} .dv-chip{ border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:5px 12px; font-size:12.5px;color:rgba(255,255,255,.82);white-space:nowrap; } .dv-chip b{font-variant-numeric:tabular-nums;color:#fff} .dv-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px} .dv-tile{background:var(--dv-card);border:1px solid var(--dv-border);border-radius:12px;padding:14px 16px} .dv-tile b{display:block;font:800 24px/1.1 var(--dv-font-head);font-variant-numeric:tabular-nums;color:var(--ifm-heading-color)} .dv-tile small{color:var(--dv-muted);font-size:12.5px} /* Следующий шаг */ .dv-next{ display:flex;align-items:center;gap:14px;margin-top:16px;padding:15px 18px;text-decoration:none; border:1px solid var(--ifm-color-primary-lightest);background:var(--dv-tint);border-radius:14px; } [data-theme='dark'] .dv-next{border-color:var(--ifm-color-primary-darkest)} .dv-next:hover{background:var(--dv-tint-strong)} .dv-next__t{flex:1;min-width:0} .dv-next__t small{display:block;font:700 .72rem/1.4 var(--ifm-font-family-base);letter-spacing:.07em;text-transform:uppercase;color:var(--ifm-color-primary)} .dv-next__t b{display:block;font:700 1rem/1.35 var(--dv-font-head);color:var(--ifm-heading-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dv-next__t span{display:block;font-size:.8rem;color:var(--dv-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dv-next svg{flex:0 0 auto;color:var(--ifm-color-primary)} /* Разделы */ .dv-sec{margin-top:30px} .dv-sec__t{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px} .dv-sec h2{margin:0;font:700 .8rem/1 var(--ifm-font-family-base);letter-spacing:.08em;text-transform:uppercase;color:var(--dv-muted)} .dv-sec__t a{font:600 .82rem/1 var(--dv-font-head);color:var(--ifm-color-primary);text-decoration:none} .dv-card{background:var(--dv-card);border:1px solid var(--dv-border);border-radius:16px;padding:6px 18px;box-shadow:var(--dv-shadow-1)} .dv-item{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--dv-border);text-decoration:none;color:inherit} .dv-item:last-child{border-bottom:0} .dv-item:hover .dv-item__n b{color:var(--ifm-color-primary)} .dv-item__ic{ width:38px;height:38px;flex:0 0 auto;border-radius:10px;display:grid;place-items:center; background:var(--dv-tint);color:var(--ifm-color-primary);font:800 12px/1 var(--dv-font-head); letter-spacing:.02em;text-transform:uppercase; } .dv-item__n{flex:1;min-width:0} .dv-item__n b{display:block;font:600 .95rem/1.35 var(--ifm-font-family-base);color:var(--ifm-heading-color)} .dv-item__n small{display:block;color:var(--dv-muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dv-item__p{font:700 .9rem/1 var(--dv-font-head);font-variant-numeric:tabular-nums;color:var(--dv-muted);min-width:44px;text-align:right;flex:0 0 auto} .dv-item__p[data-full]{color:var(--dv-ok-text)} .dv-bar{height:6px;border-radius:99px;background:var(--ifm-color-emphasis-200);overflow:hidden;margin:6px 0 5px} .dv-bar i{display:block;height:100%;border-radius:99px;background:var(--ifm-color-primary);transition:width .4s ease} .dv-bar i[data-full]{background:var(--dv-ok)} .dv-feed{margin:0;padding:0;list-style:none} .dv-feed li{display:flex;gap:12px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--dv-border);font-size:.88rem} .dv-feed li:last-child{border-bottom:0} .dv-feed time{flex:0 0 96px;color:var(--dv-muted);font-size:.78rem;font-variant-numeric:tabular-nums} .dv-feed span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dv-empty{padding:24px 0;text-align:center;color:var(--dv-muted);font-size:.9rem} .dv-empty a{color:var(--ifm-color-primary);font-weight:600;text-decoration:none} .dv-sk{height:14px;border-radius:7px;display:inline-block; background:linear-gradient(90deg,var(--ifm-color-emphasis-200),var(--ifm-color-emphasis-300),var(--ifm-color-emphasis-200)); background-size:200% 100%;animation:dv-sk 1.2s linear infinite} @keyframes dv-sk{to{background-position:-200% 0}} @media(max-width:820px){ .dv-tiles{grid-template-columns:repeat(2,1fr)} .dv-sum{padding:22px;gap:18px} } @media(max-width:560px){ .dv-app__nav{order:3;margin:0 -20px;padding:0 20px 10px;width:calc(100% + 40px);flex-basis:100%} .dv-app__head .dv-app__wrap{flex-wrap:wrap;padding-top:10px} .dv-app__act{margin-left:auto} .dv-feed time{flex-basis:70px} } @media(prefers-reduced-motion:reduce){.dv-bar i,.dv-sk{transition:none;animation:none}} /* Уровень академии внутри тёмной карточки сводки */ .dv-sum__lvl{flex:1 1 210px;min-width:200px} .dv-sum__lvl b{display:block;font:700 .95rem/1.3 var(--dv-font-head)} .dv-sum__lvl small{display:block;margin-top:2px;font-size:12.5px;color:rgba(255,255,255,.55)} .dv-sum__lvl .dv-bar{margin:9px 0 0;background:rgba(255,255,255,.16)} .dv-sum__lvl .dv-bar i{background:var(--dv-amber)} /* Доступ к курсу: раздел переехал из личного кабинета академии */ .dv-pay{padding:18px 0 20px} .dv-pay h3{margin:0 0 4px;font:800 1.05rem/1.3 var(--dv-font-head);color:var(--ifm-heading-color)} .dv-pay p{margin:0 0 14px;color:var(--dv-muted);font-size:.9rem} .dv-pay ul{margin:0 0 16px;padding:0;list-style:none;display:grid;gap:8px} .dv-pay li{display:flex;gap:9px;align-items:flex-start;font-size:.9rem;line-height:1.45} .dv-pay li svg{flex:0 0 auto;margin-top:3px;color:var(--dv-ok-text)} .dv-pay__act{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .dv-pay__note{font-size:.78rem;color:var(--dv-muted)} .dv-pay__ok{display:flex;gap:10px;align-items:center;font:700 .98rem/1.3 var(--dv-font-head);color:var(--dv-ok-text)} /* Дневная цель и неделя занятий — мотивационный блок кабинета */ .dv-goal{flex:1 1 220px;min-width:210px} .dv-goal b{display:block;font:700 .95rem/1.3 var(--dv-font-head)} .dv-goal small{display:block;margin-top:2px;font-size:12.5px;color:rgba(255,255,255,.55)} .dv-goal .dv-bar{margin:9px 0 0;background:rgba(255,255,255,.16)} .dv-goal .dv-bar i{background:var(--dv-amber)} .dv-goal[data-done] .dv-bar i{background:#6ccf8e} .dv-week{display:flex;gap:6px;margin-top:14px;flex:1 0 100%;padding-top:16px; border-top:1px solid rgba(255,255,255,.14)} .dv-week div{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px} .dv-week i{display:block;width:100%;height:30px;border-radius:5px; background:rgba(255,255,255,.12);position:relative;overflow:hidden} .dv-week i::after{content:"";position:absolute;left:0;right:0;bottom:0; height:var(--h,0%);background:var(--dv-amber);border-radius:5px} .dv-week span{font-size:10.5px;color:rgba(255,255,255,.5);letter-spacing:.02em} .dv-week div[data-today] span{color:#fff;font-weight:700} .dv-week div[data-today] i{box-shadow:0 0 0 1.5px rgba(255,255,255,.35)} /* Достижения */ .dv-ach{display:flex;flex-wrap:wrap;gap:10px;padding:16px 0} .dv-ach__i{display:flex;align-items:center;gap:10px;padding:10px 14px; border:1px solid var(--dv-border);border-radius:12px;background:var(--dv-surface)} .dv-ach__i b{font:700 .88rem/1.2 var(--dv-font-head);color:var(--ifm-heading-color)} .dv-ach__i small{display:block;font-size:11.5px;color:var(--dv-muted);margin-top:2px} .dv-ach__e{font-size:20px;line-height:1} /* --- 9. Песочницы: живой проект рядом с редактором ------------------------ */ .dv-play{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start} .dv-play__pane{background:var(--dv-card);border:1px solid var(--dv-border); border-radius:16px;overflow:hidden;box-shadow:var(--dv-shadow-1)} .dv-play__bar{display:flex;align-items:center;gap:4px;padding:0 10px; border-bottom:1px solid var(--dv-border);background:var(--dv-surface)} .dv-play__bar button{background:none;border:0;cursor:pointer;min-height:42px;padding:0 12px; font:700 .85rem/1 var(--dv-font-head);color:var(--dv-muted); border-bottom:2px solid transparent} .dv-play__bar button:hover{color:var(--ifm-heading-color)} .dv-play__bar button[aria-selected="true"]{color:var(--ifm-color-primary); border-bottom-color:var(--ifm-color-primary)} .dv-play__bar .dv-play__spacer{flex:1} .dv-play__ed{height:420px;width:100%} .dv-play__out{height:calc(462px);width:100%;border:0;background:#fff;display:block} .dv-play__cap{display:flex;align-items:center;justify-content:space-between;gap:10px; padding:0 14px;min-height:42px;border-bottom:1px solid var(--dv-border); background:var(--dv-surface);font:700 .78rem/1 var(--ifm-font-family-base); letter-spacing:.08em;text-transform:uppercase;color:var(--dv-muted)} .dv-play__act{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px} .dv-play__tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;padding:0;list-style:none} .dv-play__tags li{border:1px solid var(--dv-border);border-radius:999px;padding:5px 11px; font:600 .78rem/1 var(--ifm-font-family-base);color:var(--dv-muted)} .dv-play__lead{margin:0 0 16px;color:var(--dv-muted);font-size:.95rem;line-height:1.6;max-width:68ch} .dv-play__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px} .dv-play__card{display:flex;flex-direction:column;gap:8px;padding:18px;text-decoration:none; background:var(--dv-card);border:1px solid var(--dv-border);border-radius:16px; box-shadow:var(--dv-shadow-1);transition:border-color .15s} .dv-play__card:hover{border-color:var(--ifm-color-primary)} .dv-play__card b{font:700 1rem/1.3 var(--dv-font-head);color:var(--ifm-heading-color)} .dv-play__card p{margin:0;font-size:.88rem;line-height:1.5;color:var(--dv-muted);flex:1} .dv-play__lvl{align-self:flex-start;border-radius:999px;padding:4px 10px; font:700 .72rem/1 var(--ifm-font-family-base);letter-spacing:.04em;text-transform:uppercase; background:var(--dv-tint);color:var(--ifm-color-primary)} @media(max-width:900px){ .dv-play{grid-template-columns:1fr} .dv-play__ed{height:320px} .dv-play__out{height:320px} } /* Окно результата SQL: настоящая выборка, поэтому таблица, а не картинка */ .dv-play__sql{overflow:auto;padding:14px 16px;background:var(--dv-card)} .dv-sql{width:100%;border-collapse:collapse;font:400 13px/1.5 var(--ifm-font-family-base); font-variant-numeric:tabular-nums} .dv-sql th{position:sticky;top:0;background:var(--dv-surface);text-align:left; padding:8px 10px;border-bottom:1px solid var(--dv-border); font:700 11.5px/1 var(--ifm-font-family-base);letter-spacing:.06em; text-transform:uppercase;color:var(--dv-muted);white-space:nowrap} .dv-sql td{padding:7px 10px;border-bottom:1px solid var(--dv-border);vertical-align:top} .dv-sql tbody tr:hover{background:var(--dv-tint)} .dv-sql__null{color:var(--dv-muted);font-style:italic} .dv-sql__n{margin:10px 0 18px;font-size:12.5px;color:var(--dv-muted)} .dv-sql__err{margin:0;padding:12px 14px;border-radius:10px;background:var(--dv-err-bg); color:var(--dv-err);font:400 13px/1.6 var(--ifm-font-family-base);white-space:pre-wrap} .dv-sql__ok{margin:0;color:var(--dv-ok-text);font-size:13px} /* Задание к песочнице и вердикт проверки */ .dv-play__task{margin:0 0 14px;padding:14px 18px;border:1px solid var(--ifm-color-primary); background:var(--dv-tint);border-radius:14px} .dv-play__task b{display:block;font:700 .74rem/1 var(--ifm-font-family-base); letter-spacing:.08em;text-transform:uppercase;color:var(--ifm-color-primary);margin-bottom:6px} .dv-play__task p{margin:0;font-size:.95rem;line-height:1.55;color:var(--ifm-font-color-base)} .dv-play__verdict{display:block;margin-top:10px;font:600 .88rem/1.4 var(--ifm-font-family-base); color:var(--dv-muted)} .dv-play__verdict[data-ok]{color:var(--dv-ok-text)} /* Вывод PHP: обычный поток текста, как в терминале */ .dv-play__php{margin:0;padding:16px 18px;overflow:auto;background:#0f1117;color:#d9dce3; font:400 13px/1.7 "JetBrains Mono","SF Mono",Menlo,Consolas,monospace;white-space:pre-wrap} .dv-play__php[data-err]{color:#ff7b6b} /* --- 03-app-shell.css --- */ /* =========================================================================== ПАТЧ 03 — оболочка приложения: кабинет, песочницы, вход Куда: /var/www/academy/devbyte-auth.css — дописать в КОНЕЦ файла. После правки поднять версию в ссылках: ?v=10 → ?v=11 в /me/index.html, /play/index.html, /signin/index.html, /learn/index.html. Риск: низкий, только переопределения. =========================================================================== */ /* --- 3.1 Токены, которых не хватало --------------------------------------- Часть значений в файле записана числом, потому что подходящего токена не было. Объявляем — дальше правится в одном месте. */ :root{ --dv-on-ink:#ffffff; /* текст на чернильной подложке */ --dv-on-ink-2:rgba(255,255,255,.66); --dv-on-ink-3:rgba(255,255,255,.55); --dv-on-ink-line:rgba(255,255,255,.14); --dv-on-ink-fill:rgba(255,255,255,.16); --dv-ok-on-ink:#6ccf8e; /* зелёный, читаемый на тёмном */ --dv-h-sm:36px; /* шапка: навигация, аккаунт, кнопки */ --dv-h-md:44px; /* основная кнопка */ --dv-r-ctl:10px; /* радиус кнопки/поля */ --dv-r-card:16px; /* радиус карточки */ --dv-r-ink:18px; /* радиус тёмной карточки */ --dv-r-pill:999px; } /* --- 3.2 Шапка приложения: три высоты в одной полосе ---------------------- Было: ссылка навигации 36 px, чип аккаунта 34 px, кнопка «Войти/Выйти» 44 px — три роста рядом в полосе 64 px, кнопки визуально «выпирали». Ставим одну высоту для всего, что стоит в шапке. */ .dv-app__head .dv-a-btn{min-height:var(--dv-h-sm);padding:0 14px;font-size:.85rem} .dv-app__nav a{height:var(--dv-h-sm)} .dv-account{height:var(--dv-h-sm)} @media(max-width:996px){ .dv-account{height:var(--dv-h-sm)} } /* --- 3.3 Состояния фокуса, которых не было -------------------------------- Список в строке 69 devbyte-auth.css перечисляет .dv-a-btn, .dv-a-link, .dv-input, .dv-account, .dv-acmenu__item, .dv-tabs button — и всё. Ссылки навигации, вкладки песочницы, карточки и строки списков при ходьбе с клавиатуры не подсвечиваются никак. Для платного продукта на рынках США и ЕС это ещё и юридический риск (ADA, European Accessibility Act действует с июня 2025). */ .dv-app__nav a:focus-visible, .dv-app__brand:focus-visible, .dv-sec__t a:focus-visible, .dv-item:focus-visible, .dv-next:focus-visible, .dv-play__bar button:focus-visible, .dv-play__card:focus-visible, .dv-empty a:focus-visible, .dv-theme-btn:focus-visible{ outline:2px solid var(--dv-focus);outline-offset:2px;border-radius:var(--dv-r-ctl); } /* --- 3.4 Наведение на строки списков -------------------------------------- .dv-item — кликабельная строка (занятие, конспект, песочница), но на наведение не отвечает ничем: непонятно, что это ссылка. */ .dv-item{border-radius:10px;margin:0 -10px;padding-left:10px;padding-right:10px; transition:background .15s} .dv-item:hover{background:var(--dv-tint)} /* --- 3.5 Кнопка темы (см. 02-theme.js) ------------------------------------ */ .dv-theme-btn{ display:inline-grid;place-items:center;width:var(--dv-h-sm);height:var(--dv-h-sm); flex:0 0 auto;border:1px solid var(--dv-border);border-radius:var(--dv-r-pill); background:transparent;color:var(--dv-muted);cursor:pointer; transition:border-color .15s,color .15s; } .dv-theme-btn:hover{border-color:var(--ifm-color-primary);color:var(--ifm-color-primary)} .dv-theme-btn svg{display:block} /* --- 3.6 Остатки жёстких значений ----------------------------------------- */ .dv-goal[data-done] .dv-bar i{background:var(--dv-ok-on-ink)} .dv-sum__lvl small,.dv-goal small,.dv-sum__pts small{color:var(--dv-on-ink-3)} .dv-sum__lvl .dv-bar,.dv-goal .dv-bar{background:var(--dv-on-ink-fill)} .dv-week{border-top-color:var(--dv-on-ink-line)} .dv-bar,.dv-acmenu__bar{border-radius:var(--dv-r-pill)} .dv-bar i{border-radius:var(--dv-r-pill)} /* Полоса прогресса в меню аккаунта — единственная оставшаяся градиентная в продукте: редизайн градиенты на кнопках и полосах убрал, эту забыли. */ .dv-acmenu__bar i{background:var(--ifm-color-primary)} /* --- 3.7 Пустые состояния ------------------------------------------------- Сейчас пусто = одна серая строчка без действия. Человек не понимает, сломалось или ещё нечему появиться. Даём воздух и место под ссылку. */ .dv-empty{display:block;padding:28px 16px;text-align:center;color:var(--dv-muted); font-size:.9rem;line-height:1.55} .dv-empty b{display:block;margin-bottom:4px;color:var(--ifm-heading-color); font:700 .95rem/1.3 var(--dv-font-head)} .dv-empty a{display:inline-block;margin-top:10px} /* --- 3.8 Песочницы: две колонки разной высоты ----------------------------- Было: левая колонка = панель вкладок 42 + редактор 420 = 462. Правая = заголовок 42 + окно результата 462 = 504. Разница 42 px, при align-items:start колонки видимо не сходятся. В исходнике так и написано: height:calc(462px) — след ручной правки, где высоту окна приравняли к высоте всей левой колонки. Заодно поднимаем вкладки с 42 до 44 — как .code-tab в академии (патч 06) и как .dv-a-btn. Обе колонки остаются 44+420=464. */ .dv-play__bar button{min-height:44px} .dv-play__cap{min-height:44px} .dv-play__out{height:420px} @media(max-width:900px){ .dv-play__ed,.dv-play__out{height:320px} } /* --- 3.9 Песочницы: что делать дальше ------------------------------------- Кнопка «Готово» на заданиях с проверкой приходит disabled, а причина спрятана в атрибуте title — на телефоне его не существует. Показываем условие рядом с кнопкой и снимаем ложную «кликабельность». */ .dv-a-btn[disabled],.dv-a-btn[aria-busy="true"]{opacity:.55;cursor:not-allowed} .dv-play__act{align-items:flex-start} .dv-play__act .dv-play__hint{ flex:1 1 100%;order:9;margin:2px 0 0;color:var(--dv-muted);font-size:.82rem; line-height:1.5} /* --- 3.10 Песочницы: состояние прогона ------------------------------------ #state — единственный индикатор «запущено / готово / ошибка», и он набран тем же серым, что и слово «РЕЗУЛЬТАТ» рядом. Отделяем. */ .dv-play__cap #state{color:var(--ifm-heading-color);font-weight:600} .dv-play__cap #state[data-err]{color:var(--dv-err)} .dv-play__cap #state[data-ok]{color:var(--dv-ok-text)} /* --- 3.11 Телефон 390 px -------------------------------------------------- .dv-tiles остаётся 2 колонки вплоть до 0 px: на 390 плитка ~169 px при цифре 24 px и подписи 12.5 px — впритык, длинные подписи («упражнений», «exercises») переносятся и плитки разъезжаются по высоте. Ниже 420 px — одна колонка. */ @media(max-width:420px){ .dv-tiles{grid-template-columns:1fr 1fr;gap:10px} .dv-tile{padding:12px 14px} .dv-tile b{font-size:21px} .dv-tile small{font-size:12px;display:block;line-height:1.3} .dv-sum{padding:20px 18px;gap:16px;border-radius:var(--dv-r-ink)} .dv-week i{height:26px} .dv-card{padding:4px 14px} .dv-app__wrap{padding:0 16px} } /* --- 04-cabinet-order.css --- */ /* =========================================================================== ПАТЧ 04 — порядок в личном кабинете Куда: /var/www/academy/devbyte-auth.css — дописать в конец (после патча 03) Разметку /me/index.html менять не нужно: порядок задаётся через order, поэтому откат = удаление этого блока. Проблема. В #body сейчас такой порядок: 1. .dv-sum — тёмная карточка: баллы, чипы, уровень, цель дня, неделя 2. .dv-tiles — четыре плитки с числами 3. #nextWrap — «Продолжить: <следующий урок>» ← единственное действие 4..N разделы: занятия, конспекты, песочницы, достижения, оплата, лента То есть единственная кнопка, ради которой человек открыл кабинет, стоит на четвёртом месте, после пяти виджетов прогресса. По расчёту на 390 px: шапка 64 + заголовок с подписью ~110 + .dv-sum ~390 + .dv-tiles ~156 = «Продолжить» начинается около 720 px, то есть ниже сгиба на любом телефоне. Числа кабинета — награда за уже сделанное. Кнопка — то, что нужно сделать сейчас. Награда не должна закрывать задачу. =========================================================================== */ #body{display:flex;flex-direction:column} #body > *{order:5} /* разделы ниже остаются в своём порядке */ #body > .dv-sum{order:1} #body > #nextWrap{order:2} #body > .dv-tiles{order:3} /* Раньше .dv-next шёл после плиток и имел margin-top:16px; теперь он идёт сразу за тёмной карточкой — отступ тот же, всё сходится. */ #body > .dv-tiles{margin-top:14px} /* «Продолжить» — это и есть главное действие экрана. Сейчас он оформлен как подсказка: тонкая рамка и бледная заливка. Делаем его заметным, не превращая в рекламный баннер. */ .dv-next{ border-width:1px;border-color:var(--ifm-color-primary); background:var(--dv-tint); box-shadow:var(--dv-shadow-1); transition:background .15s,border-color .15s,box-shadow .15s; } .dv-next:hover{background:var(--dv-tint-strong);box-shadow:var(--dv-shadow-2)} /* --- Что ещё перегружено --------------------------------------------------- В тёмной карточке одновременно: баллы, чипы источников баллов, уровень с полосой, цель дня с полосой и неделя столбиками. Пять индикаторов прогресса подряд, три из них — полоски. На телефоне карточка занимает почти весь первый экран. Ниже — мягкий вариант: на узком экране чипы источников баллов сворачиваются в одну строку с прокруткой, а не растут вниз. Это правка плотности, не удаление данных. */ @media(max-width:560px){ .dv-chips{ flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none; -webkit-overflow-scrolling:touch;padding-bottom:2px; } .dv-chips::-webkit-scrollbar{display:none} } /* --- Песочница: раскладка как в привычных онлайн-редакторах --------------- Раньше панели были жёстко пополам, редактор резал длинные строки, а окно результата было на 42px выше редактора (height:calc(462px) — остаток от подгонки). Теперь границу можно тянуть, панели — поставить друг под друга, развернуть на весь экран и включить перенос строк. */ .dv-play{grid-template-columns:var(--dv-play-split,50%) 8px 1fr;gap:0} .dv-play>.dv-play__pane:first-child{border-top-right-radius:0;border-bottom-right-radius:0} .dv-play>.dv-play__pane:last-child{border-top-left-radius:0;border-bottom-left-radius:0} .dv-play__split{align-self:stretch;cursor:col-resize;position:relative; background:transparent;border:0;padding:0} .dv-play__split::before{content:"";position:absolute;inset:0;margin:auto; width:2px;border-radius:2px;background:var(--dv-border);transition:background .15s} .dv-play__split:hover::before,.dv-play__split:focus-visible::before{background:var(--ifm-color-primary)} .dv-play__split:focus-visible{outline:2px solid var(--ifm-color-primary);outline-offset:2px;border-radius:4px} /* Одинаковая высота панелей: раньше результат был выше редактора */ .dv-play__ed,.dv-play__out{height:var(--dv-play-h,440px)} /* Друг под другом — для узких экранов и для разметки, где важна ширина */ .dv-play[data-layout="rows"]{grid-template-columns:1fr;grid-template-rows:auto 8px auto} .dv-play[data-layout="rows"]>.dv-play__pane{border-radius:16px} .dv-play[data-layout="rows"] .dv-play__split{cursor:row-resize} .dv-play[data-layout="rows"] .dv-play__split::before{width:auto;height:2px;left:0;right:0} /* Режима «на весь экран» здесь нет намеренно: position:fixed вырывал песочницу из страницы и накрывал шапку, а состояние сохранялось — после одного клика страница открывалась сломанной каждый раз. Песочница остаётся встроенной в поток. */ .dv-play__bar .dv-play__go{color:var(--ifm-color-primary);font-weight:700} .dv-play__bar button[aria-pressed="true"]{color:var(--ifm-color-primary)} @media(max-width:900px){ /* На телефоне тянуть границу негде — всегда друг под другом */ .dv-play,.dv-play[data-layout="cols"]{grid-template-columns:1fr;grid-template-rows:auto 8px auto} .dv-play>.dv-play__pane{border-radius:16px} .dv-play__split{cursor:row-resize;min-height:8px} .dv-play__ed,.dv-play__out{height:var(--dv-play-h,320px)} } /* --- Песочница: во всю ширину и без горизонтальной прокрутки -------------- Раньше редактор жил в текстовой колонке: строки не помещались, снизу появлялась полоса прокрутки, а окно результата занимало пустотой пол-экрана. Код читают глазами по строкам — значит строки должны помещаться целиком. */ .dv-play{width:100%} /* Ширину даём контейнеру страницы, а не самой песочнице: попытка вылезти из колонки отрицательным полем вырывала панель из потока и клала её поверх шапки. Контейнер расширяется только на странице песочницы. */ .dv-app__wrap--wide{max-width:1560px} /* Высота от экрана, а не фиксированные 440px: на большом мониторе видно больше кода, на ноутбуке ничего не вылезает за край */ .dv-play__ed{height:clamp(320px, 56vh, 640px)} /* Высота окна результата зависит от того, что в нём. Текстовый вывод (PHP, SQL) подстраивается под содержимое: пять строк больше не превращаются в чёрный прямоугольник во весь экран. А вот у рамки предпросмотра (HTML/CSS/JS) высота должна быть задана: height:auto её схлопывает, и страница внутри показывается в щель. */ .dv-play__php,.dv-play__sql{height:auto;min-height:220px; max-height:clamp(320px, 56vh, 640px);overflow:auto} iframe.dv-play__out{height:clamp(320px, 56vh, 640px)} .dv-play__php{padding:14px 16px;margin:0;white-space:pre-wrap;word-break:break-word} .dv-play[data-layout="rows"] .dv-play__ed{height:clamp(280px, 42vh, 520px)} @media(max-width:900px){ .dv-play{width:100%;margin-left:0} .dv-play__ed{height:clamp(260px, 44vh, 420px)} .dv-play__php,.dv-play__sql{min-height:180px;max-height:52vh} iframe.dv-play__out{height:clamp(260px, 44vh, 420px)} } /* --- Витрина песочниц: по направлениям ------------------------------------ Двадцать одинаковых карточек подряд заставляли читать каждую, чтобы понять, про что она. Человек приходит за PHP или за SQL — значит это и должно быть видно сразу. */ .dv-play__dirs{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 26px} .dv-play__dirs button{display:inline-flex;align-items:center;gap:7px; padding:8px 14px;border-radius:999px;cursor:pointer; border:1px solid var(--dv-border);background:var(--dv-card); font:600 .88rem/1 var(--dv-font-head);color:var(--dv-muted); transition:border-color .15s,color .15s,background .15s} .dv-play__dirs button:hover{color:var(--ifm-heading-color);border-color:var(--ifm-color-primary)} .dv-play__dirs button[aria-pressed="true"]{background:var(--ifm-color-primary); border-color:var(--ifm-color-primary);color:#fff} .dv-play__dirs i{font-style:normal;font-size:.8rem;opacity:.7} .dv-play__dir{margin:0 0 34px} .dv-play__dir[hidden]{display:none} .dv-play__dir>h2{display:flex;align-items:baseline;gap:9px;margin:0 0 14px; font:800 1.12rem/1.2 var(--dv-font-head);color:var(--ifm-heading-color)} .dv-play__dir>h2 span{font:600 .85rem/1 var(--dv-font-head);color:var(--dv-muted)} /* Почему кнопка «Разобрался» пока недоступна — видимым текстом, а не подсказкой в title: на телефоне title не существует, с клавиатуры до выключенной кнопки не дойти, экранный диктор её пропускает. */ .dv-play__why{font:500 .86rem/1.4 var(--dv-font-base);color:var(--dv-muted); max-width:46ch} /* =========================================================================== ПАТЧ 08 — доступность оболочки приложения: кабинет, вход, песочницы Куда: /var/www/academy/devbyte-auth.css — дописать в КОНЕЦ файла, после патчей 03 и 04. После правки поднять ?v= в ссылках на файл в /me/, /play/, /signin/, /learn/. Риск: низкий, только переопределения и один новый класс (.dv-skip). Почему это не «вкусовщина». European Accessibility Act применяется с 28.06.2025 и покрывает онлайн-обучение; технический критерий — EN 301 549, то есть WCAG 2.1 AA. Ниже закрыты 1.4.11 (контраст нетекстовых элементов), 2.4.7 (видимый фокус), 2.4.1 (пропуск блоков) и 1.4.3 (контраст текста) в тех местах, где они были нарушены. =========================================================================== */ /* --- 8.1 Кольцо фокуса: чем оно рисуется ---------------------------------- --dv-focus = --ifm-color-primary. Посчитано по формуле WCAG 2.1: светлая тема #5b3fd6 на #ffffff (--dv-card) 6.72:1 #5b3fd6 на #f7f7fa (--dv-surface) 6.28:1 #5b3fd6 на #06040e (--dv-ink) 3.03:1 ← впритык тёмная тема #a08cff на #0f1117 (фон) 6.97:1 #a08cff на #161922 (карточка) 6.68:1 #a08cff на #06040e (тёмная карточка) 7.46:1 Норма 1.4.11 — 3:1. На чернильной подложке светлая тема проходила с запасом в сотые доли, поэтому там кольцо переключается на светлый оттенок — он даёт 6.84:1 (#9a87ec на #06040e). Фокусируемых элементов внутри .dv-sum сейчас нет, но правило страхует будущую разметку. */ .dv-sum,.dv-signin__promo,.dv-gate__side{--dv-focus:#9a87ec} /* --- 8.2 Элементы, у которых кольца не было вовсе -------------------------- Списки фокуса были в двух местах (строка 69 и патч 03, §3.3) и вместе не покрывали: «глаз» показа пароля на входе, «На главную» и «Назад к песочницам», крестик всплывающего сообщения, чипы направлений в витрине песочниц, строку аккаунта в бургер-меню и переключатель языка, который вставляет /i18n.js. Всё это нажимается мышью и до сих пор никак не отзывалось на клавиатуру. */ .dv-pass button:focus-visible, .dv-gate__back:focus-visible, .dv-toast__close:focus-visible, .dv-play__dirs button:focus-visible, .dv-sb-acc:focus-visible, .dv-sb-view button:focus-visible, .dv-lang:focus-visible, .dv-chip[href]:focus-visible, .dv-tile[href]:focus-visible, .dv-skip:focus-visible{ outline:2px solid var(--dv-focus);outline-offset:2px;border-radius:var(--dv-r-ctl); } /* Разбор по типу элемента — страховка на то, что появится в разметке позже. Классовые правила выше и ниже перебивают его по весу, поэтому вид уже настроенных элементов не меняется. */ .dv-app a:focus-visible,.dv-app button:focus-visible, .dv-app select:focus-visible,.dv-app input:focus-visible, .dv-app textarea:focus-visible,.dv-app summary:focus-visible, .dv-signin a:focus-visible,.dv-signin button:focus-visible, .dv-signin select:focus-visible,.dv-signin input:focus-visible, .dv-gate a:focus-visible,.dv-gate button:focus-visible, .dv-acmenu a:focus-visible,.dv-acmenu button:focus-visible, .dv-toast a:focus-visible,.dv-toast button:focus-visible, .dv-resume a:focus-visible,.dv-resume button:focus-visible{ outline:2px solid var(--dv-focus);outline-offset:2px; } /* Кольцо не должно уходить под соседнюю карточку или под липкую шапку. */ .dv-app a:focus-visible,.dv-app button:focus-visible, .dv-item:focus-visible,.dv-next:focus-visible,.dv-play__card:focus-visible{ position:relative;z-index:1} /* --- 8.3 Переключатель языка из /i18n.js ---------------------------------- Файл вставляет