User:StrikeXR/vector-2022.css
/*
Wikipedia macOS Retina "Crystal" Theme
Blur: 12px | Optimized for High-DPI Displays
v2.1 — Imagus compatibility + interactive glow
*/
:root {
--glass-blur: blur(12px);
--glass-bg: rgba(255, 255, 255, 0.72);
--glass-border: 1px solid rgba(0, 0, 0, 0.08);
--glass-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(0, 0, 0, 0.05);
}
/* ============================================================
1. TOP NAV & STICKY HEADER
============================================================ */
.mw-header,
.vector-sticky-header {
background-color: var(--glass-bg) !important;
backdrop-filter: var(--glass-blur) saturate(180%) !important;
-webkit-backdrop-filter: var(--glass-blur) saturate(180%) !important;
border-bottom: var(--glass-border) !important;
box-shadow: var(--glass-shadow);
}
/* ============================================================
2. SIDEBARS (Menu & Table of Contents)
============================================================ */
.vector-main-menu,
.vector-toc {
background-color: rgba(255, 255, 255, 0.5) !important;
backdrop-filter: var(--glass-blur) !important;
-webkit-backdrop-filter: var(--glass-blur) !important;
border: var(--glass-border) !important;
border-radius: 12px !important;
padding: 12px !important;
}
/* ============================================================
3. SEARCH RESULTS (Dropdown as you type)
============================================================ */
.cdx-typeahead-search--show-results .cdx-typeahead-search__menu {
background-color: var(--glass-bg) !important;
backdrop-filter: var(--glass-blur) saturate(180%) !important;
-webkit-backdrop-filter: var(--glass-blur) saturate(180%) !important;
border: var(--glass-border) !important;
border-radius: 0 0 12px 12px !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
}
/* ============================================================
4. HOVER PREVIEWS (Cards that pop up on link hover)
============================================================ */
.mwe-popups {
background-color: var(--glass-bg) !important;
backdrop-filter: var(--glass-blur) !important;
-webkit-backdrop-filter: var(--glass-blur) !important;
border: var(--glass-border) !important;
border-radius: 14px !important;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15) !important;
}
.mwe-popups .mwe-popups-container {
background: transparent !important;
}
/* ============================================================
5. ALL DROPDOWN MENUS (Language switcher, User menu)
============================================================ */
.vector-dropdown-content {
background-color: var(--glass-bg) !important;
backdrop-filter: var(--glass-blur) saturate(180%) !important;
-webkit-backdrop-filter: var(--glass-blur) saturate(180%) !important;
border: var(--glass-border) !important;
border-radius: 10px !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}
/* ============================================================
6. RETINA TEXT SMOOTHING
============================================================ */
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ============================================================
7. DARK MODE SUPPORT (macOS Night Mode feel)
============================================================ */
@media screen {
html.skin-theme-clientpref-night .mw-header,
html.skin-theme-clientpref-night .vector-sticky-header,
html.skin-theme-clientpref-night .vector-main-menu,
html.skin-theme-clientpref-night .vector-toc,
html.skin-theme-clientpref-night .vector-dropdown-content,
html.skin-theme-clientpref-night .mwe-popups {
background-color: rgba(28, 28, 30, 0.75) !important;
backdrop-filter: var(--glass-blur) saturate(140%) !important;
-webkit-backdrop-filter: var(--glass-blur) saturate(140%) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
color: #efefef !important;
}
}
/* ============================================================
8. CLEANUP: Hide default ugly borders
============================================================ */
.vector-toc { border: none; }
.mw-page-container { background: transparent !important; }
/* ============================================================
9. INFOBOX GLASS CARD
============================================================ */
.infobox,
.infobox-full-data,
table.infobox {
background-color: var(--glass-bg) !important;
backdrop-filter: var(--glass-blur) !important;
-webkit-backdrop-filter: var(--glass-blur) !important;
border: var(--glass-border) !important;
border-radius: 12px !important;
box-shadow: var(--glass-shadow) !important;
overflow: hidden !important;
}
/* Infobox header row */
.infobox th[colspan],
.infobox .infobox-title {
background-color: rgba(255, 255, 255, 0.45) !important;
border-bottom: var(--glass-border) !important;
border-radius: 12px 12px 0 0 !important;
backdrop-filter: var(--glass-blur) !important;
-webkit-backdrop-filter: var(--glass-blur) !important;
}
/* Dark mode infobox */
html.skin-theme-clientpref-night .infobox,
html.skin-theme-clientpref-night table.infobox {
background-color: rgba(28, 28, 30, 0.72) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
html.skin-theme-clientpref-night .infobox th[colspan],
html.skin-theme-clientpref-night .infobox .infobox-title {
background-color: rgba(255, 255, 255, 0.06) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
/* ============================================================
10. REFERENCE / CITATION TOOLTIP
============================================================ */
.mwe-popups-type-reference,
.mwe-popups[data-type="reference"] {
background-color: var(--glass-bg) !important;
backdrop-filter: var(--glass-blur) saturate(160%) !important;
-webkit-backdrop-filter: var(--glass-blur) saturate(160%) !important;
border: var(--glass-border) !important;
border-radius: 10px !important;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06) !important;
}
.mwe-popups-type-reference .mwe-popups-container {
background: transparent !important;
}
/* Inline reference superscripts — subtle underline hint */
sup.reference a {
text-decoration: none !important;
border-bottom: 1px dotted rgba(0, 0, 0, 0.25);
transition: border-color 0.15s ease, color 0.15s ease;
}
sup.reference a:hover {
border-bottom-color: currentColor;
}
/* Dark mode reference tooltip */
html.skin-theme-clientpref-night .mwe-popups-type-reference {
background-color: rgba(28, 28, 30, 0.82) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
/* ============================================================
11. SECTION ANCHOR HOVER GLOW
============================================================ */
.mw-body-content h2,
.mw-body-content h3,
.mw-body-content h4 {
transition: opacity 0.2s ease;
}
/* The § edit / anchor link */
.mw-editsection {
opacity: 0;
transition: opacity 0.2s ease, transform 0.2s ease;
transform: translateX(-4px);
}
.mw-body-content h2:hover .mw-editsection,
.mw-body-content h3:hover .mw-editsection,
.mw-body-content h4:hover .mw-editsection {
opacity: 1;
transform: translateX(0);
}
/* Subtle left-border glow on hovered headings */
.mw-body-content h2:hover,
.mw-body-content h3:hover {
padding-left: 10px !important;
border-left: 3px solid rgba(0, 122, 255, 0.4) !important;
transition: padding-left 0.2s ease, border-left 0.2s ease;
}
html.skin-theme-clientpref-night .mw-body-content h2:hover,
html.skin-theme-clientpref-night .mw-body-content h3:hover {
border-left-color: rgba(100, 180, 255, 0.45) !important;
}
/* ============================================================
12. STICKY TOC SCROLL SPY
— Highlights the active section in the TOC as you scroll
============================================================ */
/* Base TOC link style */
.vector-toc .vector-toc-link {
transition: color 0.2s ease, padding-left 0.2s ease;
border-radius: 6px;
padding: 2px 6px;
display: block;
}
.vector-toc .vector-toc-link:hover {
background-color: rgba(0, 0, 0, 0.04);
}
/* Active TOC item (set via JS scroll spy below) */
.vector-toc .vector-toc-list-item-active > .vector-toc-link {
color: #0064c8 !important;
font-weight: 500 !important;
padding-left: 10px !important;
background-color: rgba(0, 100, 200, 0.07) !important;
border-left: 2px solid rgba(0, 100, 200, 0.5) !important;
}
html.skin-theme-clientpref-night .vector-toc .vector-toc-list-item-active > .vector-toc-link {
color: #5eb0ff !important;
background-color: rgba(94, 176, 255, 0.1) !important;
border-left-color: rgba(94, 176, 255, 0.5) !important;
}
/* Scroll spy script — injected via CSS @layer trick using content+JS would need userscript,
so we use a <style>-compatible approach: activate via the existing Wikipedia TOC active class.
The Vector 2022 skin already sets .vector-toc-list-item-active natively — the rules above
style it. For older skins without native scroll spy, add the userscript below in the comments.
OPTIONAL userscript to polyfill scroll spy on older skins:
-------------------------------------------------------
// ==UserScript==
// @name Crystal TOC Scroll Spy
// @match https://*.wikipedia.org/wiki/*
// ==/UserScript==
const tocLinks = document.querySelectorAll('.vector-toc-link');
const headings = [...document.querySelectorAll('.mw-body-content h2[id], .mw-body-content h3[id]')];
window.addEventListener('scroll', () => {
const pos = window.scrollY + 100;
let active = headings.findLast(h => h.offsetTop <= pos);
tocLinks.forEach(l => l.closest('li')?.classList.remove('vector-toc-list-item-active'));
if (active) {
const link = document.querySelector(`.vector-toc-link[href="#${active.id}"]`);
link?.closest('li')?.classList.add('vector-toc-list-item-active');
}
}, { passive: true });
*/
/* ============================================================
13. CONTENT COLUMN MAX-WIDTH CAP
— Improves readability on wide monitors
============================================================ */
.mw-body-content {
max-width: 860px !important;
margin-inline: auto !important;
}
/* Keep infoboxes and wide tables from being clipped */
.mw-body-content .infobox,
.mw-body-content .wikitable {
max-width: 100% !important;
}
/* ============================================================
14. IMAGE CAPTION GLASS PILL
============================================================ */
.thumbcaption,
.mw-default-size .thumbcaption {
background: rgba(255, 255, 255, 0.58) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
border-radius: 0 0 8px 8px !important;
padding: 5px 10px !important;
font-size: 0.8rem !important;
border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}
/* Thumbnail frame to match */
.thumb {
border-radius: 10px !important;
overflow: hidden !important;
border: var(--glass-border) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07) !important;
}
.thumbinner {
border: none !important;
background: transparent !important;
padding: 0 !important;
}
html.skin-theme-clientpref-night .thumbcaption {
background: rgba(28, 28, 30, 0.68) !important;
border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
/* ============================================================
15. SMOOTH PAGE-LOAD FADE-IN
============================================================ */
@keyframes crystal-fadein {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.mw-body {
animation: crystal-fadein 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Staggered sidebar reveal */
.vector-main-menu {
animation: crystal-fadein 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}
.vector-toc {
animation: crystal-fadein 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}
/* ============================================================
16. LINK UNDERLINE SLIDE TRANSITION
============================================================ */
.mw-body-content a:not(.new):not(.image):not(.mw-ui-button):not([role="button"]) {
text-decoration: none !important;
background-image: linear-gradient(currentColor, currentColor) !important;
background-size: 0% 1px !important;
background-repeat: no-repeat !important;
background-position: left bottom !important;
transition: background-size 0.22s cubic-bezier(0.22, 1, 0.36, 1), color 0.15s ease !important;
padding-bottom: 1px;
}
.mw-body-content a:not(.new):not(.image):not(.mw-ui-button):not([role="button"]):hover {
background-size: 100% 1px !important;
}
/* Keep red "missing page" links legible */
.mw-body-content a.new {
text-decoration: none !important;
border-bottom: 1px dashed rgba(180, 0, 0, 0.4);
transition: border-color 0.15s ease;
}
.mw-body-content a.new:hover {
border-bottom-color: rgba(180, 0, 0, 0.9);
}
/* ============================================================
17. FOCUS RING REFINEMENT
============================================================ */
:focus-visible {
outline: 2px solid rgba(0, 100, 255, 0.55) !important;
outline-offset: 3px !important;
border-radius: 5px !important;
box-shadow: 0 0 0 4px rgba(0, 100, 255, 0.1) !important;
}
/* Suppress focus ring for mouse users (only show for keyboard nav) */
:focus:not(:focus-visible) {
outline: none !important;
box-shadow: none !important;
}
html.skin-theme-clientpref-night :focus-visible {
outline-color: rgba(94, 176, 255, 0.7) !important;
box-shadow: 0 0 0 4px rgba(94, 176, 255, 0.15) !important;
}
/* ============================================================
18. REDUCED MOTION OVERRIDE
— Respects users who prefer less motion (accessibility)
============================================================ */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
/* Keep link underlines visible for reduced-motion users
since the slide animation won't play */
.mw-body-content a:not(.new):not(.image):not(.mw-ui-button):not([role="button"]) {
text-decoration: underline !important;
background-image: none !important;
}
}
/* ============================================================
19. IMAGUS COMPATIBILITY
Imagus injects DOM under these identifiers:
#imu-lo — the full-viewport overlay backdrop
#imu-lo-img — the enlarged <img> inside the overlay
#imu-lo-vid — the enlarged <video> inside the overlay
#imu-lo-cas — caption / status bar strip
.imu-hovered — applied to the page thumbnail being previewed
.imu-lo-loading — overlay state while image is fetching
.imu-lo-loaded — overlay state once loaded
.imu-lo-error — overlay state on 404 / load failure
Goals:
1. Stop our `cursor: zoom-in` from conflicting on .imu-hovered thumbs
2. Stop our `.thumb` border-radius / box-shadow from doubling up
with Imagus's own highlight indicator
3. Give the Imagus overlay a glass backdrop so it reads as part of
the Crystal skin rather than a foreign grey slab
4. Neutralise any z-index or transform conflicts from our animations
============================================================ */
/* 19a. Freeze our zoom-in cursor while Imagus has claimed the element */
.mw-body-content img.imu-hovered {
cursor: default !important;
}
/* 19b. Don't let our thumb border-radius clip Imagus's highlight ring.
Imagus draws an outline on the <a> wrapping the thumb — our
overflow:hidden on .thumb would hide it. Lift it just enough. */
.thumb:has(img.imu-hovered) {
overflow: visible !important;
}
/* 19c. Imagus overlay — glass treatment so it matches the skin.
#imu-lo is appended to <body>, outside .mw-body, so our main
content rules don't reach it. We target it directly.
Imagus sets its own background via inline style; we override
with !important only on backdrop-related props we're adding —
we intentionally leave background-color alone so Imagus's
own dimming level is preserved. */
#imu-lo {
backdrop-filter: blur(2px) !important;
-webkit-backdrop-filter: blur(2px) !important;
/* Subtle vignette that makes the media pop without a hard black wall */
background: radial-gradient(
ellipse at center,
rgba(0, 0, 0, 0.0) 30%,
rgba(0, 0, 0, 0.35) 100%
) !important;
}
/* 19d. The enlarged image itself — add a faint glass card feel */
#imu-lo-img,
#imu-lo-vid {
border-radius: 10px !important;
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.12),
0 32px 80px rgba(0, 0, 0, 0.55) !important;
}
/* 19e. Caption bar — glass pill rather than a flat dark strip */
#imu-lo-cas {
background: rgba(0, 0, 0, 0.55) !important;
backdrop-filter: blur(12px) saturate(160%) !important;
-webkit-backdrop-filter: blur(12px) saturate(160%) !important;
border-radius: 0 0 10px 10px !important;
border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
/* 19f. Loading shimmer — keep Imagus's own spinner visible,
just tint the overlay glass during the wait */
#imu-lo.imu-lo-loading {
background: rgba(0, 0, 0, 0.6) !important;
}
/* 19g. Error state — a hint of red in the vignette */
#imu-lo.imu-lo-error {
background: radial-gradient(
ellipse at center,
rgba(40, 0, 0, 0.1) 20%,
rgba(80, 0, 0, 0.6) 100%
) !important;
}
/* 19h. Prevent our staggered fade-in on .vector-main-menu / .vector-toc
from fighting Imagus's z-index stack when overlay opens.
(Imagus uses z-index ~2147483647; our animations are fine,
but we reset animation on the overlay to be safe.) */
#imu-lo,
#imu-lo * {
animation: none !important;
transition: opacity 0.15s ease !important;
}
/* 19i. Dark mode — deepen the vignette a touch */
html.skin-theme-clientpref-night #imu-lo {
background: radial-gradient(
ellipse at center,
rgba(0, 0, 0, 0.0) 20%,
rgba(0, 0, 0, 0.55) 100%
) !important;
}
/* 19j. The small hover-indicator Imagus draws on thumbnails
(a thin outline on the wrapping <a>) — harmonise its
colour with the Crystal accent blue rather than leaving
it at Imagus's default yellow/grey */
.mw-body-content a:has(> img.imu-hovered) {
outline: 2px solid rgba(0, 100, 255, 0.55) !important;
outline-offset: 2px !important;
border-radius: 6px !important;
}
html.skin-theme-clientpref-night .mw-body-content a:has(> img.imu-hovered) {
outline-color: rgba(94, 176, 255, 0.65) !important;
}
/* ============================================================
20. INTERACTIVE ELEMENT GLOW
A subtle, low-saturation glow on hover for clickable elements
only. The glow lives in a ::after pseudo-element so it never
affects layout. It respects reduced-motion automatically via
the existing @media block above.
Targeted selectors (only things a user can actually click or
focus — NOT decorative elements, images, or plain text links):
• Nav / menu buttons
• TOC links
• Dropdown items
• Search box submit
• Back-to-top button (our own widget)
• Wikipedia tool buttons (.mw-ui-button, .cdx-button)
• Tab-bar items (.vector-tab-bar)
• The edit section anchors (.mw-editsection a)
============================================================ */
:root {
--glow-color-light: rgba(0, 100, 255, 0.12);
--glow-color-dark: rgba(94, 176, 255, 0.15);
--glow-radius: 12px;
--glow-spread: 0px;
}
/* Base: the elements that get the glow treatment */
.vector-menu-content-list a,
.vector-toc-link,
.vector-dropdown-content a,
.cdx-button,
.mw-ui-button,
.vector-tab-bar a,
.mw-editsection a,
.mw-portlet-lang .interlanguage-link-title,
#crystal-back-top,
.crystal-collapse-btn {
position: relative;
/* Transition only box-shadow — never layout props */
transition:
box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1),
background 0.15s ease,
color 0.15s ease !important;
}
/* The glow itself on hover */
.vector-menu-content-list a:hover,
.vector-toc-link:hover,
.vector-dropdown-content a:hover,
.cdx-button:hover,
.mw-ui-button:hover,
.vector-tab-bar a:hover,
.mw-editsection a:hover,
.mw-portlet-lang .interlanguage-link-title:hover,
#crystal-back-top:hover,
.crystal-collapse-btn:hover {
box-shadow:
0 0 0 var(--glow-spread) transparent,
0 0 var(--glow-radius) 2px var(--glow-color-light) !important;
}
/* Dark mode — slightly warmer/brighter glow */
html.skin-theme-clientpref-night .vector-menu-content-list a:hover,
html.skin-theme-clientpref-night .vector-toc-link:hover,
html.skin-theme-clientpref-night .vector-dropdown-content a:hover,
html.skin-theme-clientpref-night .cdx-button:hover,
html.skin-theme-clientpref-night .mw-ui-button:hover,
html.skin-theme-clientpref-night .vector-tab-bar a:hover,
html.skin-theme-clientpref-night .mw-editsection a:hover,
html.skin-theme-clientpref-night .mw-portlet-lang .interlanguage-link-title:hover,
html.skin-theme-clientpref-night #crystal-back-top:hover,
html.skin-theme-clientpref-night .crystal-collapse-btn:hover {
box-shadow:
0 0 0 var(--glow-spread) transparent,
0 0 var(--glow-radius) 2px var(--glow-color-dark) !important;
}
/* Focus glow — same shape, slightly stronger so keyboard nav is clear */
.vector-menu-content-list a:focus-visible,
.vector-toc-link:focus-visible,
.vector-dropdown-content a:focus-visible,
.cdx-button:focus-visible,
.mw-ui-button:focus-visible,
.vector-tab-bar a:focus-visible,
.mw-editsection a:focus-visible,
#crystal-back-top:focus-visible,
.crystal-collapse-btn:focus-visible {
box-shadow:
0 0 0 2px rgba(0, 100, 255, 0.55),
0 0 var(--glow-radius) 4px var(--glow-color-light) !important;
outline: none !important; /* glow replaces the outline ring here */
}
html.skin-theme-clientpref-night .vector-menu-content-list a:focus-visible,
html.skin-theme-clientpref-night .vector-toc-link:focus-visible,
html.skin-theme-clientpref-night .vector-dropdown-content a:focus-visible,
html.skin-theme-clientpref-night .cdx-button:focus-visible,
html.skin-theme-clientpref-night .mw-ui-button:focus-visible,
html.skin-theme-clientpref-night .vector-tab-bar a:focus-visible,
html.skin-theme-clientpref-night .mw-editsection a:focus-visible,
html.skin-theme-clientpref-night #crystal-back-top:focus-visible,
html.skin-theme-clientpref-night .crystal-collapse-btn:focus-visible {
box-shadow:
0 0 0 2px rgba(94, 176, 255, 0.65),
0 0 var(--glow-radius) 4px var(--glow-color-dark) !important;
}
/* Active/pressed state — glow compresses inward for a tactile feel */
.vector-menu-content-list a:active,
.vector-toc-link:active,
.vector-dropdown-content a:active,
.cdx-button:active,
.mw-ui-button:active,
.vector-tab-bar a:active,
#crystal-back-top:active,
.crystal-collapse-btn:active {
box-shadow:
0 0 0 1px rgba(0, 100, 255, 0.2),
0 0 6px 1px rgba(0, 100, 255, 0.08) !important;
transform: scale(0.97) !important;
transition-duration: 0.08s !important;
}
/* Reduced-motion: strip glow transitions (the @media block above
already kills animation-duration/transition-duration globally,
but box-shadow transitions on interactive elements are worth
being explicit about) */
@media (prefers-reduced-motion: reduce) {
.vector-menu-content-list a,
.vector-toc-link,
.vector-dropdown-content a,
.cdx-button,
.mw-ui-button,
.vector-tab-bar a,
.mw-editsection a,
.mw-portlet-lang .interlanguage-link-title,
#crystal-back-top,
.crystal-collapse-btn {
transition: none !important;
box-shadow: none !important;
}
}
Content Disclaimer
Informasi ini disarikan dari Wikipedia dan disajikan kembali untuk tujuan edukasi. Konten tersedia di bawah lisensi CC BY-SA 3.0. Kami tidak bertanggung jawab atas ketidakakuratan data yang bersumber dari kontribusi publik tersebut.
- The information displayed on this website is sourced in part or in whole from Wikipedia and has been adapted for the purpose of restating it. We strive to provide accurate and relevant information, however:
- There is no guarantee of absolute accuracy. Wikipedia is an open, collaborative project that can be edited by anyone, so information is subject to change.
- It is not intended to constitute professional advice. The content displayed is for informational and educational purposes only. For important decisions (e.g., medical, legal, or financial), please consult a professional.
- Content copyright. Wikipedia is licensed under the Creative Commons Attribution-ShareAlike License (CC BY-SA). This means that content may be reused with appropriate attribution and shared under a similar license.
- Responsible use. Any risk arising from the use of information from this website is entirely the responsibility of the user.