|
|
| Linha 1: |
Linha 1: |
| /* ========================================================== | | /* Vector 2022 padrão. Sem CSS customizado. */ |
| Wiki TokuDrive - layout próprio
| |
| ========================================================== */
| |
| | |
| :root {
| |
| --td-bg: #070a12;
| |
| --td-bg-2: #0d1320;
| |
| --td-surface: #111827;
| |
| --td-surface-2: #172033;
| |
| --td-surface-3: #1f2c46;
| |
| --td-card: #101827;
| |
| --td-card-soft: #131e31;
| |
| --td-border: rgba(255,255,255,.12);
| |
| --td-border-strong: rgba(255,255,255,.20);
| |
| --td-text: #f5f7fb;
| |
| --td-muted: #aab6c8;
| |
| --td-link: #8ab4ff;
| |
| --td-red: #e50914;
| |
| --td-red-soft: rgba(229,9,20,.18);
| |
| --td-blue-soft: rgba(70,125,255,.16);
| |
| --td-shadow: 0 24px 70px rgba(0,0,0,.45);
| |
| --td-radius: 22px;
| |
| }
| |
| | |
| html,
| |
| body {
| |
| background:
| |
| radial-gradient(circle at top left, rgba(229,9,20,.12), transparent 28%),
| |
| radial-gradient(circle at top right, rgba(70,125,255,.10), transparent 30%),
| |
| var(--td-bg) !important;
| |
| color: var(--td-text) !important;
| |
| color-scheme: dark !important;
| |
| font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
| |
| }
| |
| | |
| /* Oculta a cara padrão da Wikipédia */
| |
| .vector-header-container,
| |
| .mw-header,
| |
| .vector-column-start,
| |
| .vector-toc-landmark,
| |
| .vector-appearance-landmark,
| |
| #siteNotice,
| |
| .mw-logo,
| |
| #p-logo {
| |
| display: none !important;
| |
| }
| |
| | |
| /* Estrutura geral */
| |
| .mw-page-container,
| |
| .mw-body,
| |
| .vector-body,
| |
| #content,
| |
| #mw-content-text,
| |
| .mw-parser-output {
| |
| background: transparent !important;
| |
| color: var(--td-text) !important;
| |
| border: 0 !important;
| |
| box-shadow: none !important;
| |
| }
| |
| | |
| .mw-page-container {
| |
| max-width: none !important;
| |
| margin: 0 !important;
| |
| padding: 0 !important;
| |
| }
| |
| | |
| .mw-body {
| |
| max-width: 1240px !important;
| |
| margin: 0 auto !important;
| |
| padding: 112px 24px 64px !important;
| |
| }
| |
| | |
| /* Header próprio */
| |
| #td-custom-header {
| |
| position: fixed;
| |
| z-index: 99999;
| |
| top: 0;
| |
| left: 0;
| |
| right: 0;
| |
| background: rgba(7,10,18,.88);
| |
| backdrop-filter: blur(18px);
| |
| border-bottom: 1px solid var(--td-border);
| |
| box-shadow: 0 10px 34px rgba(0,0,0,.28);
| |
| }
| |
| | |
| .td-header-inner {
| |
| max-width: 1380px;
| |
| margin: 0 auto;
| |
| min-height: 76px;
| |
| padding: 10px 22px;
| |
| display: flex;
| |
| align-items: center;
| |
| gap: 18px;
| |
| }
| |
| | |
| .td-brand {
| |
| width: 250px;
| |
| min-width: 250px;
| |
| height: 62px;
| |
| background: url("/resources/assets/tokudrive-wiki-custom-wordmark-2026-06-29_001652.png") left center / contain no-repeat;
| |
| display: block;
| |
| text-decoration: none;
| |
| }
| |
| | |
| .td-nav {
| |
| display: flex;
| |
| align-items: center;
| |
| gap: 8px;
| |
| flex: 1;
| |
| overflow-x: auto;
| |
| scrollbar-width: none;
| |
| }
| |
| | |
| .td-nav::-webkit-scrollbar {
| |
| display: none;
| |
| }
| |
| | |
| .td-nav a {
| |
| display: inline-flex;
| |
| align-items: center;
| |
| height: 38px;
| |
| padding: 0 14px;
| |
| border-radius: 999px;
| |
| color: var(--td-text) !important;
| |
| text-decoration: none !important;
| |
| font-weight: 800;
| |
| font-size: 14px;
| |
| background: rgba(255,255,255,.06);
| |
| border: 1px solid transparent;
| |
| white-space: nowrap;
| |
| }
| |
| | |
| .td-nav a:hover {
| |
| background: var(--td-red-soft);
| |
| border-color: rgba(229,9,20,.32);
| |
| }
| |
| | |
| .td-search {
| |
| width: 280px;
| |
| min-width: 220px;
| |
| display: flex;
| |
| align-items: center;
| |
| gap: 8px;
| |
| }
| |
| | |
| .td-search input {
| |
| width: 100%;
| |
| height: 40px;
| |
| border-radius: 999px;
| |
| border: 1px solid var(--td-border);
| |
| background: rgba(255,255,255,.08);
| |
| color: var(--td-text);
| |
| padding: 0 14px;
| |
| outline: none;
| |
| }
| |
| | |
| .td-search input::placeholder {
| |
| color: #8c9ab0;
| |
| }
| |
| | |
| .td-search button { | |
| height: 40px;
| |
| border: 0;
| |
| border-radius: 999px;
| |
| background: #ffffff;
| |
| color: #111827;
| |
| font-weight: 900;
| |
| padding: 0 16px;
| |
| cursor: pointer;
| |
| }
| |
| | |
| .td-user-link { | |
| color: var(--td-link) !important;
| |
| text-decoration: none !important;
| |
| font-weight: 800;
| |
| white-space: nowrap;
| |
| }
| |
| | |
| /* Título e toolbar da página */
| |
| .vector-page-titlebar,
| |
| .vector-page-toolbar {
| |
| background: rgba(17,24,39,.76) !important;
| |
| border: 1px solid var(--td-border) !important;
| |
| border-radius: 18px !important;
| |
| padding: 14px 18px !important;
| |
| margin-bottom: 14px !important;
| |
| backdrop-filter: blur(10px);
| |
| }
| |
| | |
| .mw-page-title-main,
| |
| .firstHeading,
| |
| .mw-first-heading {
| |
| color: var(--td-text) !important;
| |
| font-family: Inter, system-ui, sans-serif !important;
| |
| font-weight: 950 !important;
| |
| letter-spacing: -.035em;
| |
| }
| |
| | |
| .vector-menu-tabs a,
| |
| .vector-menu-dropdown a,
| |
| .vector-page-toolbar a {
| |
| color: var(--td-link) !important;
| |
| }
| |
| | |
| .vector-menu-tabs .selected a {
| |
| color: #fff !important;
| |
| }
| |
| | |
| /* Conteúdo */
| |
| .mw-parser-output {
| |
| font-size: 16px;
| |
| line-height: 1.72;
| |
| }
| |
| | |
| .mw-parser-output p,
| |
| .mw-parser-output li,
| |
| .mw-parser-output td,
| |
| .mw-parser-output th {
| |
| color: var(--td-text) !important;
| |
| }
| |
| | |
| .mw-parser-output h2,
| |
| .mw-parser-output h3,
| |
| .mw-parser-output h4 {
| |
| color: var(--td-text) !important;
| |
| border-bottom: 1px solid var(--td-border) !important;
| |
| font-weight: 900;
| |
| }
| |
| | |
| a,
| |
| a:visited,
| |
| .mw-parser-output a.external,
| |
| .mw-parser-output a.extiw {
| |
| color: var(--td-link) !important;
| |
| }
| |
| | |
| a:hover {
| |
| color: #ffffff !important;
| |
| }
| |
| | |
| /* Artigos com visual de card */
| |
| .mw-parser-output > p,
| |
| .mw-parser-output > ul,
| |
| .mw-parser-output > ol,
| |
| .mw-parser-output > table.wikitable,
| |
| .mw-parser-output > .toc {
| |
| max-width: 880px;
| |
| }
| |
| | |
| /* Infobox moderna */
| |
| .infobox {
| |
| float: right;
| |
| clear: right;
| |
| width: 320px;
| |
| margin: 0 0 1.2em 1.4em;
| |
| background: linear-gradient(180deg, var(--td-surface), #0d1420) !important;
| |
| color: var(--td-text) !important;
| |
| border: 1px solid var(--td-border) !important;
| |
| border-radius: 18px;
| |
| overflow: hidden;
| |
| box-shadow: 0 18px 44px rgba(0,0,0,.28);
| |
| font-size: 90%;
| |
| line-height: 1.45;
| |
| border-spacing: 0;
| |
| }
| |
| | |
| .infobox th,
| |
| .infobox td {
| |
| padding: 8px 10px !important;
| |
| border-bottom: 1px solid rgba(255,255,255,.07) !important;
| |
| color: var(--td-text) !important;
| |
| }
| |
| | |
| .infobox th {
| |
| background: rgba(255,255,255,.06) !important;
| |
| font-weight: 900;
| |
| }
| |
| | |
| .infobox .infobox-above,
| |
| .infobox .infobox-title {
| |
| background:
| |
| linear-gradient(135deg, rgba(229,9,20,.32), rgba(70,125,255,.22)) !important;
| |
| text-align: center;
| |
| font-size: 130%;
| |
| font-weight: 950;
| |
| padding: 14px !important;
| |
| }
| |
| | |
| .infobox .td-infobox-image,
| |
| .infobox .infobox-image {
| |
| text-align: center;
| |
| background: rgba(255,255,255,.04) !important;
| |
| }
| |
| | |
| .infobox img {
| |
| max-width: 260px;
| |
| height: auto;
| |
| }
| |
| | |
| /* Tabelas */
| |
| .wikitable {
| |
| background: var(--td-card) !important;
| |
| color: var(--td-text) !important;
| |
| border: 1px solid var(--td-border) !important;
| |
| border-collapse: separate !important;
| |
| border-spacing: 0;
| |
| border-radius: 14px;
| |
| overflow: hidden;
| |
| }
| |
| | |
| .wikitable th {
| |
| background: var(--td-surface-2) !important;
| |
| color: var(--td-text) !important;
| |
| font-weight: 900;
| |
| }
| |
| | |
| .wikitable td,
| |
| .wikitable th {
| |
| border: 1px solid rgba(255,255,255,.08) !important;
| |
| padding: 10px 12px !important;
| |
| }
| |
| | |
| /* TOC e categorias */
| |
| .toc,
| |
| #toc,
| |
| .catlinks,
| |
| .thumbinner,
| |
| .metadata,
| |
| .ambox,
| |
| .navbox {
| |
| background: var(--td-card) !important;
| |
| color: var(--td-text) !important;
| |
| border: 1px solid var(--td-border) !important;
| |
| border-radius: 14px;
| |
| }
| |
| | |
| .tocnumber,
| |
| .toctext,
| |
| .catlinks {
| |
| color: var(--td-text) !important;
| |
| }
| |
| | |
| .thumbcaption {
| |
| color: var(--td-muted) !important;
| |
| }
| |
| | |
| /* Erros técnicos e avisos antigos */
| |
| .td-sourcebox,
| |
| .mw-parser-output .scribunto-error,
| |
| .mw-parser-output strong.error,
| |
| .mw-parser-output span.error {
| |
| display: none !important;
| |
| }
| |
| | |
| /* Footer */
| |
| .mw-footer,
| |
| #footer {
| |
| background: transparent !important;
| |
| color: var(--td-muted) !important;
| |
| border: 0 !important;
| |
| max-width: 1240px;
| |
| margin: 0 auto;
| |
| }
| |
| | |
| /* Home própria */
| |
| .page-Página_principal .mw-page-title-main,
| |
| .page-Página_principal .vector-page-titlebar,
| |
| .page-Página_principal .vector-page-toolbar {
| |
| display: none !important;
| |
| }
| |
| | |
| .td-home {
| |
| max-width: 1240px;
| |
| margin: 0 auto;
| |
| }
| |
| | |
| .td-hero {
| |
| position: relative;
| |
| overflow: hidden;
| |
| border-radius: 30px;
| |
| padding: clamp(42px, 6vw, 84px) 28px;
| |
| text-align: center;
| |
| background:
| |
| radial-gradient(circle at top left, rgba(229,9,20,.35), transparent 35%),
| |
| radial-gradient(circle at bottom right, rgba(70,125,255,.28), transparent 38%),
| |
| linear-gradient(135deg, #151d2c, #0b101a);
| |
| border: 1px solid var(--td-border);
| |
| box-shadow: var(--td-shadow);
| |
| }
| |
| | |
| .td-hero-logo {
| |
| width: min(430px, 88vw);
| |
| height: 145px;
| |
| margin: 0 auto 12px;
| |
| background: url("/resources/assets/tokudrive-wiki-custom-wordmark-2026-06-29_001652.png") center / contain no-repeat;
| |
| }
| |
| | |
| .td-kicker {
| |
| display: inline-flex;
| |
| align-items: center;
| |
| min-height: 34px;
| |
| padding: 0 14px;
| |
| border-radius: 999px;
| |
| background: var(--td-red-soft);
| |
| border: 1px solid rgba(229,9,20,.35);
| |
| color: #ff5a66;
| |
| font-size: 12px;
| |
| font-weight: 950;
| |
| letter-spacing: .12em;
| |
| text-transform: uppercase;
| |
| margin-bottom: 18px;
| |
| }
| |
| | |
| .td-hero h1 {
| |
| margin: 0 0 14px !important;
| |
| border: 0 !important;
| |
| font-size: clamp(42px, 7vw, 76px);
| |
| line-height: .95;
| |
| font-weight: 1000;
| |
| letter-spacing: -.065em;
| |
| }
| |
| | |
| .td-hero p {
| |
| max-width: 820px;
| |
| margin: 0 auto;
| |
| color: var(--td-muted) !important;
| |
| font-size: clamp(16px, 2vw, 21px);
| |
| }
| |
| | |
| .td-home-search {
| |
| max-width: 760px;
| |
| margin: 30px auto 0;
| |
| display: flex;
| |
| gap: 10px;
| |
| padding: 8px;
| |
| border-radius: 999px;
| |
| background: rgba(255,255,255,.07);
| |
| border: 1px solid var(--td-border);
| |
| }
| |
| | |
| .td-home-search input {
| |
| flex: 1;
| |
| min-width: 0;
| |
| border: 0;
| |
| outline: none;
| |
| background: transparent;
| |
| color: var(--td-text);
| |
| padding: 0 18px;
| |
| font-size: 16px;
| |
| }
| |
| | |
| .td-home-search button {
| |
| border: 0;
| |
| border-radius: 999px;
| |
| background: #ffffff;
| |
| color: #111827;
| |
| min-height: 48px;
| |
| padding: 0 24px;
| |
| font-weight: 950;
| |
| }
| |
| | |
| .td-section-title {
| |
| margin: 36px 0 16px !important;
| |
| border: 0 !important;
| |
| font-size: 30px;
| |
| font-weight: 950;
| |
| }
| |
| | |
| .td-grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(3, 1fr);
| |
| gap: 18px;
| |
| }
| |
| | |
| .td-card {
| |
| background: linear-gradient(180deg, var(--td-surface), #0d1420);
| |
| border: 1px solid var(--td-border);
| |
| border-radius: 22px;
| |
| padding: 22px;
| |
| box-shadow: 0 14px 34px rgba(0,0,0,.22);
| |
| }
| |
| | |
| .td-card h2 {
| |
| margin: 0 0 10px !important;
| |
| border: 0 !important;
| |
| font-size: 23px;
| |
| font-weight: 950;
| |
| }
| |
| | |
| .td-card p {
| |
| color: var(--td-muted) !important;
| |
| }
| |
| | |
| .td-card ul {
| |
| margin-bottom: 0;
| |
| }
| |
| | |
| .td-card li {
| |
| margin: 7px 0;
| |
| }
| |
| | |
| .td-latest-grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(4, 1fr);
| |
| gap: 14px;
| |
| }
| |
| | |
| .td-latest-card {
| |
| display: block;
| |
| min-height: 142px;
| |
| padding: 18px;
| |
| border-radius: 20px;
| |
| background: linear-gradient(180deg, var(--td-surface), #0d1420);
| |
| border: 1px solid var(--td-border);
| |
| text-decoration: none !important;
| |
| box-shadow: 0 12px 28px rgba(0,0,0,.18);
| |
| }
| |
| | |
| .td-latest-card:hover {
| |
| border-color: rgba(229,9,20,.45);
| |
| transform: translateY(-2px);
| |
| }
| |
| | |
| .td-latest-label {
| |
| color: var(--td-muted);
| |
| font-size: 12px;
| |
| text-transform: uppercase;
| |
| font-weight: 950;
| |
| letter-spacing: .08em;
| |
| }
| |
| | |
| .td-latest-title {
| |
| color: var(--td-text);
| |
| font-weight: 950;
| |
| font-size: 18px;
| |
| line-height: 1.25;
| |
| margin: 12px 0;
| |
| }
| |
| | |
| .td-latest-date {
| |
| color: var(--td-muted);
| |
| font-size: 13px;
| |
| }
| |
| | |
| .td-loading {
| |
| grid-column: 1 / -1;
| |
| padding: 20px;
| |
| border-radius: 18px;
| |
| background: var(--td-card);
| |
| border: 1px solid var(--td-border);
| |
| color: var(--td-muted);
| |
| }
| |
| | |
| @media (max-width: 1080px) {
| |
| .td-header-inner {
| |
| flex-wrap: wrap;
| |
| }
| |
| | |
| .td-brand {
| |
| width: 210px;
| |
| min-width: 210px;
| |
| }
| |
| | |
| .td-search {
| |
| flex: 1 1 100%;
| |
| width: 100%;
| |
| }
| |
| | |
| .td-grid {
| |
| grid-template-columns: 1fr 1fr;
| |
| }
| |
| | |
| .td-latest-grid {
| |
| grid-template-columns: 1fr 1fr;
| |
| }
| |
| }
| |
| | |
| @media (max-width: 720px) {
| |
| .mw-body {
| |
| padding: 112px 14px 44px !important;
| |
| }
| |
| | |
| .td-nav {
| |
| order: 3;
| |
| flex: 1 1 100%;
| |
| }
| |
| | |
| .td-grid,
| |
| .td-latest-grid {
| |
| grid-template-columns: 1fr;
| |
| }
| |
| | |
| .td-home-search {
| |
| flex-direction: column;
| |
| border-radius: 18px;
| |
| }
| |
| | |
| .infobox {
| |
| float: none;
| |
| width: 100%;
| |
| margin: 0 0 1em 0;
| |
| }
| |
| }
| |
