/* ========================================================= Wiki Mode (MyAAC) - CLEAN wiki.css Scope: only active when is present Loaded by: system/templates/wiki_assets.php ========================================================= */ html.wiki-mode{ /* layout */ --wiki-sidebar: 320px; /* colors */ --wiki-text: rgba(255,255,255,0.92); --wiki-text-soft: rgba(255,255,255,0.80); --wiki-link: #d8e9ff; --wiki-link-hover: #ffffff; --wiki-border: rgba(255,255,255,0.12); --wiki-card: rgba(0,0,0,0.22); /* tables */ --wiki-table-bg: rgba(40, 28, 14, 0.90); --wiki-table-head: rgba(0,0,0,0.70); --wiki-table-row-even: rgba(255,255,255,0.04); --wiki-table-row-hover: rgba(255,255,255,0.08); } /* ---- keep website background visible ---- */ html.wiki-mode body{ background-color: transparent !important; /* DO NOT use `background:` (that would remove body bg-image) */ margin: 0 !important; padding: 0 !important; color: var(--wiki-text); } /* ---- remove reserved top spacer / offsets from template ---- */ html.wiki-mode #top{ display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } html.wiki-mode #ArtworkHelper, html.wiki-mode #Bodycontainer, html.wiki-mode #ContentRow, html.wiki-mode #ContentColumn{ position: relative !important; top: 0 !important; margin-top: 0 !important; padding-top: 0 !important; } /* ---- hide normal website side columns on wiki ---- */ html.wiki-mode #MenuColumn{ display: none !important; } html.wiki-mode #ThemeboxesColumn{ display: none !important; } /* ---- main content column takes the space next to the wiki sidebar ---- */ html.wiki-mode #ContentColumn{ float: none !important; width: calc(100% - var(--wiki-sidebar)) !important; margin-left: var(--wiki-sidebar) !important; } /* ---- kill the Tibia/MyAAC chrome for wiki pages (decorations) ---- */ html.wiki-mode .BorderTitleText, html.wiki-mode .TitleContainer, html.wiki-mode img.Title, html.wiki-mode .InfoBar{ display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } /* Remove corner/border images & scroll backgrounds */ html.wiki-mode .Box, html.wiki-mode .BoxContent, html.wiki-mode .Border_1, html.wiki-mode .Border_2, html.wiki-mode .Border_3, html.wiki-mode .Corner-tl, html.wiki-mode .Corner-tr, html.wiki-mode .Corner-bl, html.wiki-mode .Corner-br{ background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; } /* Ensure the box wrapper doesn't push content down */ html.wiki-mode .Content .Box{ margin: 0 !important; } html.wiki-mode .Content .BoxContent{ margin: 0 !important; padding: 0 !important; background: transparent !important; background-image: none !important; /* overrides inline scroll.gif */ min-height: 0 !important; } /* Remove small decorative strips */ html.wiki-mode .Border_1{ height: 0 !important; min-height: 0 !important; overflow: hidden !important; } /* No max-width restrictions from theme */ html.wiki-mode .myaac-content{ max-width: none !important; } /* ========================================================= Left fixed wiki column (from system/templates/wiki_banner.php) ========================================================= */ html.wiki-mode .wiki-shell.wiki-leftnav{ position: fixed; left: 0; top: 0; width: var(--wiki-sidebar); height: 100vh; overflow-y: auto; padding: 0 !important; background: rgba(0,0,0,0.40); border-right: 1px solid var(--wiki-border); z-index: 9999; } html.wiki-mode .wiki-topbar{ display: flex; flex-direction: column; gap: 10px; padding: 12px; border-bottom: 1px solid var(--wiki-border); margin: 0 !important; } html.wiki-mode .wiki-brand{ font-weight: 800; font-size: 22px; text-decoration: none; color: var(--wiki-text); } html.wiki-mode .wiki-quicknav{ display: flex; flex-direction: column; gap: 10px; padding: 12px; margin: 0 !important; } html.wiki-mode .wiki-quicknav-item{ display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; text-decoration: none; border: 1px solid var(--wiki-border); background: rgba(0,0,0,0.22); color: var(--wiki-text); } html.wiki-mode .wiki-quicknav-item:hover{ background: rgba(255,255,255,0.06); } /* Sidebar icon: uniform size (fix oversized images) */ html.wiki-mode .wiki-quicknav-imgwrap{ width: 48px; height: 48px; padding: 6px; box-sizing: border-box; border-radius: 10px; background: rgba(255,255,255,0.06); border: 1px solid var(--wiki-border); display: flex; align-items: center; justify-content: center; overflow: hidden; } html.wiki-mode .wiki-quicknav-imgwrap img{ width: 100%; height: 100%; object-fit: contain; /* no weird cropping */ object-position: center; display: block; image-rendering: pixelated; } html.wiki-mode .wiki-quicknav-label{ font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ========================================================= Wiki content wrapper ========================================================= */ html.wiki-mode .wiki-wrap{ margin: 0 !important; padding: 14px 18px !important; color: var(--wiki-text); } /* Subtle readable card background (keeps site bg visible) */ html.wiki-mode .wiki-wrap{ background: var(--wiki-card); border: 1px solid var(--wiki-border); border-radius: 14px; } /* Text defaults */ html.wiki-mode .wiki-wrap p, html.wiki-mode .wiki-wrap li, html.wiki-mode .wiki-wrap span, html.wiki-mode .wiki-wrap div{ color: var(--wiki-text); } /* Links */ html.wiki-mode .wiki-wrap a{ color: var(--wiki-link); } html.wiki-mode .wiki-wrap a:hover{ color: var(--wiki-link-hover); } /* Override common "light theme" colors used in wiki templates */ html.wiki-mode .wiki-breadcrumbs, html.wiki-mode .wiki-meta, html.wiki-mode .wiki-article-subtitle{ color: var(--wiki-text-soft) !important; } html.wiki-mode .wiki-article-title, html.wiki-mode .wiki-wrap h1, html.wiki-mode .wiki-wrap h2, html.wiki-mode .wiki-wrap h3, html.wiki-mode .wiki-wrap h4{ color: #fff !important; } /* Summary blocks that are white in article template -> make dark */ html.wiki-mode .wiki-article-summary{ background: rgba(0,0,0,0.35) !important; border-color: var(--wiki-border) !important; color: var(--wiki-text) !important; } /* Pills (spawn switcher) */ html.wiki-mode .spawn-pill{ background: rgba(0,0,0,0.35) !important; border-color: var(--wiki-border) !important; color: var(--wiki-text) !important; } html.wiki-mode .spawn-pill:hover{ background: rgba(255,255,255,0.08) !important; } html.wiki-mode .spawn-pill.active{ background: rgba(40,120,255,0.70) !important; border-color: rgba(40,120,255,0.85) !important; color: #fff !important; } /* ========================================================= Tables: readable over background ========================================================= */ html.wiki-mode .wiki-wrap table{ width: 100%; border-collapse: collapse; margin: 14px 0; background: var(--wiki-table-bg); border: 1px solid var(--wiki-border); border-radius: 10px; overflow: hidden; } html.wiki-mode .wiki-wrap table th, html.wiki-mode .wiki-wrap table td{ padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.10); color: var(--wiki-text); } html.wiki-mode .wiki-wrap table thead th, html.wiki-mode .wiki-wrap table thead td, html.wiki-mode .wiki-wrap table th{ background: var(--wiki-table-head); color: #fff !important; font-weight: 700; } /* Many editors use first row as header but with */ html.wiki-mode .wiki-wrap table tr:first-child > td, html.wiki-mode .wiki-wrap table tr:first-child > td *{ color: #fff !important; } html.wiki-mode .wiki-wrap table tbody tr:nth-child(even){ background: var(--wiki-table-row-even); } html.wiki-mode .wiki-wrap table tbody tr:hover{ background: var(--wiki-table-row-hover); } html.wiki-mode .wiki-wrap table a{ color: var(--wiki-link); text-decoration: underline; } /* ========================================================= HARD OVERRIDES for inline styles coming from wiki_data.php (Charms table sets black text with !important) ========================================================= */ /* Beat: table.nice-desc.charms-table tbody td.charms-name { color:#000 !important; } */ html.wiki-mode body .wiki-wrap table.nice-desc.charms-table tbody tr td.charms-name, html.wiki-mode body .wiki-wrap table.nice-desc.charms-table tbody tr td.charms-name *{ color: #fff !important; } /* Also ensure header text stays white (some inline css forces dark) */ html.wiki-mode body .wiki-wrap table.nice-desc.charms-table thead th, html.wiki-mode body .wiki-wrap table.nice-desc.charms-table thead th *, html.wiki-mode body .wiki-wrap table.nice-desc.charms-table thead td, html.wiki-mode body .wiki-wrap table.nice-desc.charms-table thead td *{ color: #fff !important; } /* ========================================================= Mobile: sidebar becomes top block ========================================================= */ @media (max-width: 900px){ html.wiki-mode #ContentColumn{ width: 100% !important; margin-left: 0 !important; } html.wiki-mode .wiki-shell.wiki-leftnav{ position: static; width: auto; height: auto; border-right: 0; border-bottom: 1px solid var(--wiki-border); } html.wiki-mode .wiki-quicknav{ flex-direction: row; flex-wrap: wrap; } html.wiki-mode .wiki-quicknav-item{ width: calc(50% - 5px); } html.wiki-mode .wiki-wrap{ border-radius: 0; } } /* ========================= Wiki buttons (spawn-pill + task-btn) ========================= */ /* 1) Kies hier je kleuren */ html.wiki-mode{ --btn-bg: rgba(0,0,0,0.35); --btn-border: rgba(255,255,255,0.18); --btn-text: rgba(255,255,255,0.92); --btn-hover-bg: rgba(255,255,255,0.08); /* actieve knop (accentkleur) */ --btn-active-bg: rgba(120, 70, 10, 0.95); /* <- pas dit aan */ --btn-active-border: rgba(255,255,255,0.25); --btn-active-text: #fff; } /* 2) Basis styling voor beide button types */ html.wiki-mode body .wiki-wrap a.spawn-pill, html.wiki-mode body .wiki-wrap a.task-btn{ background: var(--btn-bg) !important; border: 1px solid var(--btn-border) !important; color: var(--btn-text) !important; text-decoration: none !important; border-radius: 999px !important; padding: 6px 12px !important; font-weight: 700 !important; } /* Hover */ html.wiki-mode body .wiki-wrap a.spawn-pill:hover, html.wiki-mode body .wiki-wrap a.task-btn:hover{ background: var(--btn-hover-bg) !important; } /* Actief (spawn tabs) */ html.wiki-mode body .wiki-wrap a.spawn-pill.active{ background: var(--btn-active-bg) !important; border-color: var(--btn-active-border) !important; color: var(--btn-active-text) !important; cursor: default; } /* Actief (category quick switch buttons) */ html.wiki-mode body .wiki-wrap a.task-btn.is-active, html.wiki-mode body .wiki-wrap a.task-btn[aria-current="page"]{ background: var(--btn-active-bg) !important; border-color: var(--btn-active-border) !important; color: var(--btn-active-text) !important; } /* ========================================================= Column alignment fixes (headers match body) ========================================================= */ /* 1) Charms: "Name" header links, net als .charms-name */ html.wiki-mode body .wiki-wrap table.nice-desc.charms-table thead th:nth-child(2){ text-align: left !important; } /* 2) Forge (tier-costs): maak de numerieke kolommen rechts, incl headers */ html.wiki-mode body .wiki-wrap table.tier-costs thead th:nth-child(n+2), html.wiki-mode body .wiki-wrap table.tier-costs tbody td:nth-child(n+2){ text-align: right !important; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1; } /* 3) Forge: Tier kolom (1e) mooi gecentreerd */ html.wiki-mode body .wiki-wrap table.tier-costs thead th:first-child, html.wiki-mode body .wiki-wrap table.tier-costs tbody td:first-child{ text-align: center !important; } /* ========================================= WIKI: tiles/videos onder elkaar (1 kolom) ========================================= */ /* Startpagina tiles */ html.wiki-mode .wiki-grid{ grid-template-columns: 1fr !important; } /* Category tiles */ html.wiki-mode .wiki-tiles{ grid-template-columns: 1fr !important; } /* (optioneel) ook artikel-lijst tiles onder elkaar */ html.wiki-mode .wiki-list{ grid-template-columns: 1fr !important; } /* safety: items pakken altijd volle breedte */ html.wiki-mode .tile, html.wiki-mode .wiki-tile, html.wiki-mode .wiki-item{ width: 100% !important; } html.wiki-mode .wiki-article-body .video-square{ display:block !important; width:100% !important; clear:both !important; } html.wiki-mode .wiki-backsite{ display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; text-decoration: none; font-weight: 800; color: rgba(255,255,255,0.92); background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.10); } html.wiki-mode .wiki-backsite:hover{ background: rgba(255,255,255,0.06); } /* Zorg dat inline svg icon netjes in dezelfde box past */ html.wiki-mode .wiki-quicknav-imgwrap svg{ width: 100%; height: 100%; display: block; fill: currentColor; color: rgba(255,255,255,0.92); } html.wiki-mode .wiki-quicknav-item:last-child{ margin-bottom: 60px !important; } /* Tooltip op loot items (alleen in boss raid-table) */ html.wiki-mode .raid-table .loot-chip{ position: relative; cursor: help; } /* Tekstballon */ html.wiki-mode .raid-table .loot-chip[data-tip]:hover::after{ content: attr(data-tip); position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -8px); background: rgba(0,0,0,0.85); color: #fff; padding: 6px 10px; border-radius: 10px; font-size: 12px; font-weight: 700; white-space: nowrap; z-index: 99999; pointer-events: none; box-shadow: 0 6px 18px rgba(0,0,0,0.35); } /* Pijltje */ html.wiki-mode .raid-table .loot-chip[data-tip]:hover::before{ content: ""; position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: rgba(0,0,0,0.85); margin-bottom: -2px; pointer-events: none; z-index: 99999; }