/* Tema MyCodeSchool pentru lecțiile din /utile/. Tokenii și regulile pe elemente sunt luate din constanta CSS a lui build-utila.py, adică exact tema din matematica-tabla-inmultirii. Restul sunt echivalentele pe elemente ale lucrurilor pe care generatorul le stilează prin clase proprii. Fișierul e legat ULTIMUL în -ul fiecărei lecții, ca să câștige în fața CSS-ului paginii. Proprietățile marcate !important sunt cele fără de care o pagină cu degrade și fonturi proprii ar rămâne neschimbată. */ :root { --mcs-mov: #662D91; --mcs-mov-inchis: #4a1f6b; --mcs-mov-deschis: #f3ecfa; --mcs-mov-linie: #e0d0f0; --mcs-text: #1c1a20; --mcs-text-sters: #5f5a68; --mcs-fundal: #ffffff; --mcs-fundal-alt: #faf8fc; --mcs-cod-fundal: #241b30; --mcs-cod-text: #efe9f5; --mcs-linie: #e6e2ec; --mcs-sans: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; --mcs-mono: "JetBrains Mono", Menlo, Consolas, monospace; } html { scroll-behavior: smooth; } body { background: var(--mcs-fundal) !important; background-image: none !important; color: var(--mcs-text) !important; font-family: var(--mcs-sans) !important; font-size: 16px !important; line-height: 1.7 !important; -webkit-font-smoothing: antialiased; } /* Antetul propriu al lecției (hero-ul cu degrade) devine sobru, ca în tabla înmulțirii. ATENȚIE: se țintește doar cromul paginii. Degradele de pe elementele demonstrative (.grid-item dintr-o lecție de CSS Grid, de exemplu) SUNT conținut didactic și rămân. */ body > header:not(.mcs-antet), body > div > header:not(.mcs-antet), .hero, .page-header, .site-header, .titlu-pagina, .code-header { background: var(--mcs-fundal-alt) !important; background-image: none !important; color: var(--mcs-text) !important; border-bottom: 1px solid var(--mcs-linie) !important; box-shadow: none !important; } body > header:not(.mcs-antet) h1, body > div > header:not(.mcs-antet) h1, .hero h1, body > header:not(.mcs-antet) h2, .hero h2 { color: var(--mcs-mov-inchis) !important; -webkit-text-fill-color: currentColor; text-shadow: none !important; } body > header:not(.mcs-antet) p, body > div > header:not(.mcs-antet) p, .hero p { color: var(--mcs-text-sters) !important; -webkit-text-fill-color: currentColor; text-shadow: none !important; } /* Bara și subsolul MyCodeSchool nu se lasă restilizate de regulile de mai sus. */ .mcs-antet { background: #662D91 !important; color: #fff !important; border: none !important; } .mcs-antet .mcs-eticheta, .mcs-antet .mcs-acasa { color: #fff !important; -webkit-text-fill-color: #fff; } .mcs-subsol { background: var(--mcs-fundal-alt) !important; border-top: 1px solid var(--mcs-linie) !important; } body > div, body > main, body > section, body > article { background-image: none !important; } body, body * { font-family: var(--mcs-sans); } /* Lățimea de citit: conținutul nu se întinde cât ecranul. */ body > main, body > article, body > .container, body > .wrapper, body > .content { max-width: 1180px; margin-left: auto; margin-right: auto; } /* ---------- titluri ---------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--mcs-sans) !important; color: var(--mcs-mov-inchis) !important; background: none !important; background-image: none !important; -webkit-text-fill-color: currentColor; letter-spacing: -0.3px; line-height: 1.25; } h1 { font-size: 29px; } h2 { font-size: 21px; } h3 { font-size: 17px; } h4, h5, h6 { font-size: 15px; } /* ---------- text ---------- */ a { color: var(--mcs-mov); } strong, b { color: var(--mcs-mov-inchis); } blockquote { margin: 22px 0; padding: 14px 20px; background: var(--mcs-mov-deschis) !important; border: none; border-left: 4px solid var(--mcs-mov) !important; border-radius: 0 8px 8px 0 !important; color: var(--mcs-text) !important; } blockquote p { margin: 0; } hr { border: none !important; border-top: 1px solid var(--mcs-linie) !important; margin: 44px 0; } /* ---------- cod ---------- */ code, kbd, samp { font-family: var(--mcs-mono) !important; font-size: 0.88em; background: var(--mcs-mov-deschis) !important; color: var(--mcs-mov-inchis) !important; padding: 2px 6px; border-radius: 4px; } pre { background: var(--mcs-cod-fundal) !important; background-image: none !important; color: var(--mcs-cod-text) !important; font-family: var(--mcs-mono) !important; padding: 18px 20px !important; border: none !important; border-radius: 10px !important; overflow-x: auto; margin: 0 0 20px; } pre code, pre * { background: none !important; padding: 0; font-size: 13.5px; line-height: 1.6; font-family: var(--mcs-mono) !important; } /* Evidențierea de sintaxă își păstrează culorile — altfel codul devine ilizibil. */ pre .token, pre .hljs-keyword, pre .hljs-string, pre .hljs-comment, pre [class*="token-"], pre [class*="hljs-"], pre [class*="keyword"], pre [class*="string"], pre [class*="comment"], pre [class*="number"] { -webkit-text-fill-color: currentColor; } /* ---------- tabele ---------- */ table { border-collapse: collapse !important; width: 100%; font-size: 14.5px; background: var(--mcs-fundal) !important; } th, td { padding: 10px 14px !important; text-align: left; border: none !important; border-bottom: 1px solid var(--mcs-linie) !important; vertical-align: top; color: var(--mcs-text) !important; } th { background: var(--mcs-fundal-alt) !important; color: var(--mcs-mov-inchis) !important; font-weight: 600; } tr:last-child td { border-bottom: none !important; } /* ---------- butoane și câmpuri ---------- */ button, input[type="button"], input[type="submit"], input[type="reset"], a.btn, a.button, .btn, .button { font-family: var(--mcs-sans) !important; font-size: 14px !important; font-weight: 600; padding: 8px 16px !important; border-radius: 999px !important; border: 1px solid var(--mcs-mov-linie) !important; background: #fff !important; background-image: none !important; color: var(--mcs-mov) !important; box-shadow: none !important; text-shadow: none !important; cursor: pointer; transition: background .15s, color .15s; } button:hover, input[type="button"]:hover, input[type="submit"]:hover, a.btn:hover, a.button:hover, .btn:hover, .button:hover { background: var(--mcs-mov-deschis) !important; } /* Butonul principal / starea activă rămâne plin, ca în tabla înmulțirii. */ button.primary, button.primar, button.activ, button.active, button[aria-pressed="true"], button.selected, button.selectat, input[type="submit"] { background: var(--mcs-mov) !important; border-color: var(--mcs-mov) !important; color: #fff !important; } input, select, textarea { font-family: var(--mcs-sans) !important; font-size: 14px !important; color: var(--mcs-text) !important; background: #fff !important; border: 1px solid var(--mcs-mov-linie) !important; border-radius: 8px !important; padding: 7px 10px !important; box-shadow: none !important; } input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--mcs-mov); outline-offset: 1px; } /* ---------- carduri ---------- */ .card, .box, .panel, .cutie, .demo-box, .example, .exemplu, [class*="card"], [class*="box"], [class*="panel"] { background: var(--mcs-fundal-alt) !important; background-image: none !important; border: 1px solid var(--mcs-linie) !important; border-radius: 12px !important; box-shadow: none !important; color: var(--mcs-text) !important; } /* ---------- tipărire ---------- */ @media print { body { font-size: 11pt; } pre { background: var(--mcs-cod-fundal) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } th { -webkit-print-color-adjust: exact; print-color-adjust: exact; } pre code { font-size: 9pt; } } /* ---------- utilizabilitate pe telefon ---------- 21 din 81 de lecții se derulau lateral pe ecran mic. Cauzele sunt diferite, iar una dintre ele NU e defect: în lecțiile de CSS, elementele late chiar sunt demonstrația. Acolo nu strâng elementul — îi dau propria derulare, ca pagina să rămână întreagă și lecția să-și păstreze sensul. */ @media (max-width: 700px) { /* NU punem `overflow-x: clip` pe pagină. Am încercat: scoate derularea laterală de pe 20 de lecții, dar face inaccesibil conținutul lat din 8 — inclusiv demonstrația de CSS Grid, care E lecția. O lecție pe care n-o poți vedea e mai rău decât un avertisment de utilizabilitate. */ /* barele de navigare cu linkuri care refuză să se rupă */ nav, .nav, .tabs, .tab-nav, .menu, [class*="nav-"], [class*="tabs"] { flex-wrap: wrap !important; max-width: 100% !important; } nav a, .nav a, .tabs a, .tabs button, [class*="tab"] > a, [class*="tab"] > button { white-space: normal !important; } /* Copiii de grid și flex au implicit `min-width: auto`, deci refuză să se strângă sub lățimea conținutului lor — de aici `.step` de 829px într-o grilă de 311px. `min-width: 0` e fix-ul standard pentru exact asta. */ body * { max-width: 100%; min-width: 0; } [style*="width:"], [style*="width ："] { max-width: 100% !important; } /* elementele care chiar trebuie să rămână late primesc derulare proprie */ .demo, .demo-box, .example, .exemplu, .grid-demo, .playground, [class*="grid-demo"], [class*="demo-"] { overflow-x: auto !important; max-width: 100% !important; } table, img, video, iframe, canvas, svg { max-width: 100% !important; } /* ce e mai lat decât ecranul se derulează în cutia lui, nu în pagină */ pre, .tabel-scroll, .table-wrap, [class*="scroll"] { max-width: 100% !important; overflow-x: auto !important; } /* Containerul unei demonstrații primește derulare proprie, ca să nu rămână tăiat de `overflow-x: clip` de mai sus. `:has()` e singurul mod de a ținti părintele, iar demonstrațiile n-au un nume de clasă comun. */ :has(> table), :has(> [class*="grid-item"]), :has(> [class*="flex-item"]), :has(> [class*="demo-item"]), :has(> [class*="item-"]) { overflow-x: auto; } }