new retro mode fixes
This commit is contained in:
@@ -1,19 +1,31 @@
|
||||
/* ===================================================================
|
||||
RETRO MODE — TuiCss / DOS terminal experience
|
||||
Scoped under .retro-mode on the root app wrapper.
|
||||
Color palette: TuiCss 168-value (CGA/EGA)
|
||||
blue-168 #0000a8 cyan-168 #00a8a8
|
||||
green-168 #00a800 yellow-168 #a8a800
|
||||
red-168 #a80000 purple-168 #a800a8
|
||||
gray-168 #a8a8a8 black #000000
|
||||
RETRO MODE — Full TuiCss feature exploitation
|
||||
Features used:
|
||||
tui-window / tui-panel / tui-fieldset (double 6px white border)
|
||||
tui-nav / tui-statusbar / tui-statusbar-divider
|
||||
tui-button (green #00a800, shadow, cyan active)
|
||||
tui-table / striped-blue / hovered-blue
|
||||
tui-progress-bar / tui-indeterminate
|
||||
tui-divider / tui-black-divider
|
||||
tui-shadow (10px) / tui-shadow-2 (15px) / tui-shadow-3 (20px)
|
||||
tui-bg-blue-black / tui-bg-cyan-black textures
|
||||
168-value CGA/EGA color palette
|
||||
tui-shortcut / tui-border-double / color hover
|
||||
Scoped under .retro-mode on root app wrapper.
|
||||
=================================================================== */
|
||||
|
||||
/* ---- ANIMATIONS ---- */
|
||||
/* ---- ANIMATIONS (tui-indeterminate + blink) ---- */
|
||||
@keyframes retro-blink {
|
||||
0%, 49% { opacity: 1; }
|
||||
50%, 100% { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes tui-indeterminate {
|
||||
from { left: 0; width: 40px; }
|
||||
50% { width: 120px; }
|
||||
to { left: 100%; width: 40px; }
|
||||
}
|
||||
|
||||
/* ---- BASE ---- */
|
||||
.retro-mode {
|
||||
font-family: "Lucida Console", monospace !important;
|
||||
@@ -42,7 +54,6 @@
|
||||
}
|
||||
|
||||
/* ---- GLOBAL TAILWIND TEXT COLOR OVERRIDES ---- */
|
||||
/* Element-type + class combined for guaranteed specificity over Tailwind utilities */
|
||||
.retro-mode :is(p, h1, h2, h3, h4, h5, h6, span, div, dt, dd, li, td, th, a, label, small).text-gray-900,
|
||||
.retro-mode :is(p, h1, h2, h3, h4, h5, h6, span, div, dt, dd, li, td, th, a, label, small).text-gray-800,
|
||||
.retro-mode :is(p, h1, h2, h3, h4, h5, h6, span, div, dt, dd, li, td, th, a, label, small).text-gray-700 {
|
||||
@@ -65,21 +76,35 @@
|
||||
.retro-mode .blog-container,
|
||||
.retro-mode .howtos-container {
|
||||
background: transparent !important;
|
||||
background-image: none !important;
|
||||
min-height: auto !important;
|
||||
}
|
||||
|
||||
/* ---- NAVIGATION HEADER → tui-nav style ---- */
|
||||
/* ---- NAVIGATION — tui-nav exact style ---- */
|
||||
.retro-mode header.bg-gray-800 {
|
||||
background-color: #a8a8a8 !important;
|
||||
background-image: none !important;
|
||||
color: #000 !important;
|
||||
padding: 0 2px !important;
|
||||
border-bottom: none !important;
|
||||
box-shadow: none !important;
|
||||
display: block !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
width: 100% !important;
|
||||
min-height: auto !important;
|
||||
}
|
||||
|
||||
/* Nav stretches to fill, lang selector pushed to right */
|
||||
.retro-mode header.bg-gray-800 nav.hidden.md\:flex {
|
||||
flex: 1 !important;
|
||||
}
|
||||
|
||||
.retro-mode header.bg-gray-800 nav > div {
|
||||
margin-left: auto !important;
|
||||
border-left: 2px solid #000 !important;
|
||||
padding-left: 8px !important;
|
||||
}
|
||||
|
||||
.retro-mode header.bg-gray-800 a.text-xl {
|
||||
color: #000 !important;
|
||||
font-size: 14px !important;
|
||||
@@ -97,6 +122,7 @@
|
||||
content: "" !important;
|
||||
}
|
||||
|
||||
/* Nav links — tui-nav ul li style */
|
||||
.retro-mode header.bg-gray-800 nav.hidden a,
|
||||
.retro-mode header.bg-gray-800 nav.hidden.md\:flex a {
|
||||
color: #000 !important;
|
||||
@@ -108,6 +134,14 @@
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
/* TuiCss red-168-text highlight on first letter (keyboard shortcut style) */
|
||||
.retro-mode header.bg-gray-800 nav.hidden a::first-letter,
|
||||
.retro-mode header.bg-gray-800 nav.hidden.md\:flex a::first-letter {
|
||||
color: #a80000 !important;
|
||||
font-weight: bold !important;
|
||||
}
|
||||
|
||||
/* tui-nav ul li:hover → green-168 */
|
||||
.retro-mode header.bg-gray-800 nav a:hover,
|
||||
.retro-mode header.bg-gray-800 nav.hidden a:hover,
|
||||
.retro-mode header.bg-gray-800 nav.hidden.md\:flex a:hover {
|
||||
@@ -122,7 +156,7 @@
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
/* Hamburger only */
|
||||
/* Hamburger — tui-button style */
|
||||
.retro-mode header.bg-gray-800 button.md\:hidden {
|
||||
background-color: #00a800 !important;
|
||||
color: #000 !important;
|
||||
@@ -133,7 +167,7 @@
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
/* Language selector buttons — plain nav style */
|
||||
/* Language selector — plain nav style, no shadow */
|
||||
.retro-mode header.bg-gray-800 nav button {
|
||||
background: transparent !important;
|
||||
color: #000 !important;
|
||||
@@ -162,7 +196,7 @@
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
/* Mobile nav */
|
||||
/* Mobile nav — tui-window popup style */
|
||||
.retro-mode nav.md\:hidden.absolute {
|
||||
background-color: #a8a8a8 !important;
|
||||
border: 2px solid #000 !important;
|
||||
@@ -184,22 +218,45 @@
|
||||
.retro-mode .main-container,
|
||||
.retro-mode .blog-main {
|
||||
margin-top: 0 !important;
|
||||
padding: 12px !important;
|
||||
padding: 16px !important;
|
||||
max-width: 960px !important;
|
||||
}
|
||||
|
||||
/* ---- HERO SECTIONS → tui-window header style ---- */
|
||||
/* ---- HERO SECTIONS — tui-bg-blue-black, no frame ---- */
|
||||
.retro-mode .hero-section,
|
||||
.retro-mode .hero-section-gradient,
|
||||
.retro-mode .hero-section-slate,
|
||||
.retro-mode .blog-header {
|
||||
background-color: #0000a8 !important;
|
||||
padding: 8px 12px !important;
|
||||
background-image: url("../../node_modules/tuicss/dist/images/bg-blue-black.png") !important;
|
||||
background-repeat: repeat !important;
|
||||
border: none !important;
|
||||
padding: 12px !important;
|
||||
color: #fff !important;
|
||||
overflow: visible !important;
|
||||
text-align: left !important;
|
||||
border: none !important;
|
||||
box-shadow: 4px 4px 0 #000 !important;
|
||||
text-align: center !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.retro-mode .hero-container,
|
||||
.retro-mode .post-hero-container {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
/* tui-progress-bar strip under hero — tui-indeterminate decoration */
|
||||
.retro-mode .hero-section::after,
|
||||
.retro-mode .hero-section-gradient::after,
|
||||
.retro-mode .hero-section-slate::after,
|
||||
.retro-mode .blog-header::after {
|
||||
content: "" !important;
|
||||
display: block !important;
|
||||
height: 10px !important;
|
||||
background-color: #00a8a8 !important;
|
||||
margin-top: 8px !important;
|
||||
position: relative !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.retro-mode .hero-decor-blob,
|
||||
@@ -249,7 +306,7 @@
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
/* ---- WINDOWS / PANELS → tui-window style ---- */
|
||||
/* ---- CARDS/WINDOWS — tui-window + tui-fieldset (6px double white border) ---- */
|
||||
.retro-mode .card-base,
|
||||
.retro-mode .card-interactive,
|
||||
.retro-mode .blog-post-card,
|
||||
@@ -263,10 +320,12 @@
|
||||
.retro-mode .bg-white.rounded-3xl,
|
||||
.retro-mode .bg-white.rounded-2xl {
|
||||
background-color: #0000a8 !important;
|
||||
background-image: none !important;
|
||||
color: #fff !important;
|
||||
border: none !important;
|
||||
border: 6px white double !important;
|
||||
outline: none !important;
|
||||
box-shadow: 10px 10px 0 #000 !important;
|
||||
box-shadow: 10px 10px 0 #000 !important; /* tui-shadow */
|
||||
padding: 12px !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
@@ -275,6 +334,23 @@
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
/* tui-divider between card sections */
|
||||
.retro-mode .card-base > * + *,
|
||||
.retro-mode .card-interactive > * + *,
|
||||
.retro-mode .bg-white.rounded-3xl > * + * {
|
||||
border-top: 2px solid #fff;
|
||||
padding-top: 8px !important;
|
||||
margin-top: 8px !important;
|
||||
}
|
||||
|
||||
/* Undo divider for non-semantic children */
|
||||
.retro-mode .bg-white.rounded-3xl dl > * + *,
|
||||
.retro-mode .bg-white.rounded-3xl .flex > * + * {
|
||||
border-top: none !important;
|
||||
padding-top: 0 !important;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.retro-mode .shadow-xl,
|
||||
.retro-mode .shadow-2xl,
|
||||
.retro-mode .shadow-lg,
|
||||
@@ -283,7 +359,7 @@
|
||||
box-shadow: 10px 10px 0 #000 !important;
|
||||
}
|
||||
|
||||
/* ---- BUTTONS → tui-button style ---- */
|
||||
/* ---- BUTTONS — tui-button exact style ---- */
|
||||
.retro-mode .btn-hero,
|
||||
.retro-mode .btn-hero-teal,
|
||||
.retro-mode .btn-hero-indigo,
|
||||
@@ -291,7 +367,7 @@
|
||||
background-color: #00a800 !important;
|
||||
color: #000 !important;
|
||||
border: none !important;
|
||||
box-shadow: 4px 4px 0 #000 !important;
|
||||
box-shadow: 10px 10px 0 #000 !important;
|
||||
font-family: "Lucida Console", monospace !important;
|
||||
font-size: 14px !important;
|
||||
font-weight: normal !important;
|
||||
@@ -312,50 +388,50 @@
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Play buttons */
|
||||
/* Play buttons — green-168 */
|
||||
.retro-mode .btn-play-sm,
|
||||
.retro-mode .featured-btn-play,
|
||||
.retro-mode .yt-play-button {
|
||||
background-color: #00a800 !important;
|
||||
color: #000 !important;
|
||||
border: none !important;
|
||||
box-shadow: 4px 4px 0 #000 !important;
|
||||
box-shadow: 10px 10px 0 #000 !important;
|
||||
font-family: "Lucida Console", monospace !important;
|
||||
font-size: 14px !important;
|
||||
padding: 1px 10px !important;
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
/* Info / secondary buttons */
|
||||
/* Info / secondary — yellow-168 */
|
||||
.retro-mode .btn-info-sm,
|
||||
.retro-mode .featured-btn-secondary {
|
||||
background-color: #a8a800 !important;
|
||||
color: #000 !important;
|
||||
border: none !important;
|
||||
box-shadow: 4px 4px 0 #000 !important;
|
||||
box-shadow: 10px 10px 0 #000 !important;
|
||||
font-family: "Lucida Console", monospace !important;
|
||||
font-size: 14px !important;
|
||||
padding: 1px 10px !important;
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
/* Wiki / external buttons */
|
||||
/* Wiki / external — purple-168 + white text */
|
||||
.retro-mode .browse-wiki-btn {
|
||||
background-color: #a800a8 !important;
|
||||
color: #fff !important;
|
||||
border: none !important;
|
||||
box-shadow: 4px 4px 0 #000 !important;
|
||||
box-shadow: 10px 10px 0 #000 !important;
|
||||
font-size: 14px !important;
|
||||
padding: 1px 10px !important;
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
/* Discord button */
|
||||
/* Discord — blue-168 + white text + gray border */
|
||||
.retro-mode .discord-hero-btn {
|
||||
background-color: #0000a8 !important;
|
||||
color: #fff !important;
|
||||
border: 2px solid #a8a8a8 !important;
|
||||
box-shadow: 4px 4px 0 #000 !important;
|
||||
box-shadow: 10px 10px 0 #000 !important;
|
||||
font-size: 14px !important;
|
||||
padding: 1px 10px !important;
|
||||
cursor: pointer !important;
|
||||
@@ -372,7 +448,9 @@
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
/* All active states */
|
||||
/* tui-button active state — cyan-168 */
|
||||
.retro-mode .btn-hero:active,
|
||||
.retro-mode .btn-primary:active,
|
||||
.retro-mode .btn-play-sm:active,
|
||||
.retro-mode .btn-info-sm:active,
|
||||
.retro-mode .browse-wiki-btn:active,
|
||||
@@ -380,10 +458,11 @@
|
||||
.retro-mode .yt-play-button:active,
|
||||
.retro-mode .featured-btn-play:active {
|
||||
background-color: #00a8a8 !important;
|
||||
color: #000 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Filter buttons */
|
||||
/* Filter buttons — gray-168 base, green-168 active (tui-button variant) */
|
||||
.retro-mode .filter-btn {
|
||||
background-color: #a8a8a8 !important;
|
||||
color: #000 !important;
|
||||
@@ -406,21 +485,22 @@
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* ---- STATUS BADGES ---- */
|
||||
/* ---- STATUS BADGES — 168-value colors ---- */
|
||||
.retro-mode .status-badge {
|
||||
padding: 0 6px !important;
|
||||
font-size: 12px !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.retro-mode .status-released { background-color: #00a800 !important; color: #000 !important; }
|
||||
.retro-mode .status-demo { background-color: #0000a8 !important; color: #fff !important; }
|
||||
.retro-mode .status-released { background-color: #00a800 !important; color: #000 !important; }
|
||||
.retro-mode .status-demo { background-color: #0000a8 !important; color: #fff !important; border: 2px solid #a8a8a8 !important; }
|
||||
.retro-mode .status-development { background-color: #a8a800 !important; color: #000 !important; }
|
||||
.retro-mode .status-archived { background-color: #a8a8a8 !important; color: #000 !important; }
|
||||
.retro-mode .status-archived { background-color: #a8a8a8 !important; color: #000 !important; }
|
||||
|
||||
/* ---- COUNTDOWN ---- */
|
||||
/* ---- COUNTDOWN — tui-window + tui-progress-bar ---- */
|
||||
.retro-mode .countdown-card {
|
||||
background-color: #0000a8 !important;
|
||||
border: 6px white double !important;
|
||||
box-shadow: 10px 10px 0 #000 !important;
|
||||
padding: 12px !important;
|
||||
}
|
||||
@@ -433,6 +513,7 @@
|
||||
text-transform: uppercase !important;
|
||||
}
|
||||
|
||||
/* Terminal-style countdown display */
|
||||
.retro-mode .countdown-timer {
|
||||
display: inline-block !important;
|
||||
font-family: "Lucida Console", monospace !important;
|
||||
@@ -448,6 +529,17 @@
|
||||
text-shadow: 0 0 6px #00ff00 !important;
|
||||
}
|
||||
|
||||
/* tui-progress-bar strip at countdown bottom */
|
||||
.retro-mode .countdown-card::after {
|
||||
content: "" !important;
|
||||
display: block !important;
|
||||
height: 10px !important;
|
||||
background-color: #00a8a8 !important;
|
||||
margin-top: 10px !important;
|
||||
position: relative !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.retro-mode .countdown-date {
|
||||
font-size: 12px !important;
|
||||
color: #c8c8c8 !important;
|
||||
@@ -460,21 +552,22 @@
|
||||
|
||||
.retro-mode .upcoming-event-item {
|
||||
background-color: #000 !important;
|
||||
border: 1px solid #a8a8a8 !important;
|
||||
border: 2px solid #a8a8a8 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
/* ---- FEATURED GAME CARD ---- */
|
||||
/* ---- FEATURED GAME CARD — tui-shadow-2 (15px) ---- */
|
||||
.retro-mode .featured-card {
|
||||
background-color: #0000a8 !important;
|
||||
box-shadow: 10px 10px 0 #000 !important;
|
||||
border: 6px white double !important;
|
||||
box-shadow: 15px 15px 0 #000 !important;
|
||||
}
|
||||
|
||||
.retro-mode .featured-badge {
|
||||
background-color: #a800a8 !important;
|
||||
color: #fff !important;
|
||||
border: none !important;
|
||||
box-shadow: 2px 2px 0 #000 !important;
|
||||
box-shadow: 4px 4px 0 #000 !important;
|
||||
}
|
||||
|
||||
.retro-mode .featured-title {
|
||||
@@ -491,6 +584,7 @@
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
/* tui-border-solid on images */
|
||||
.retro-mode .featured-image {
|
||||
border: 2px solid #a8a8a8 !important;
|
||||
outline: none !important;
|
||||
@@ -502,9 +596,10 @@
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
/* ---- YOUTUBE ---- */
|
||||
/* ---- YOUTUBE — tui-window + tui-shadow ---- */
|
||||
.retro-mode .yt-featured-wrapper {
|
||||
background-color: #0000a8 !important;
|
||||
border: 6px white double !important;
|
||||
box-shadow: 10px 10px 0 #000 !important;
|
||||
}
|
||||
|
||||
@@ -524,11 +619,13 @@
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
/* tui-border-solid */
|
||||
.retro-mode .yt-player-container {
|
||||
border: 2px solid #a8a8a8 !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
/* tui-indeterminate blink on NEW tag */
|
||||
.retro-mode .yt-new-tag {
|
||||
background-color: #a80000 !important;
|
||||
color: #ffff00 !important;
|
||||
@@ -550,8 +647,11 @@
|
||||
}
|
||||
|
||||
/* ---- NAV CARDS ---- */
|
||||
/* tui-bg-cyan-black texture for icon boxes */
|
||||
.retro-mode .nav-card-icon {
|
||||
background-color: #00a8a8 !important;
|
||||
background-image: url("../../node_modules/tuicss/dist/images/bg-cyan-black.png") !important;
|
||||
background-repeat: repeat !important;
|
||||
border: 2px solid #000 !important;
|
||||
}
|
||||
|
||||
@@ -570,7 +670,7 @@
|
||||
/* AI notice */
|
||||
.retro-mode .border-indigo-100 {
|
||||
background-color: #0000a8 !important;
|
||||
border: 2px solid #a8a8a8 !important;
|
||||
border: 6px white double !important;
|
||||
box-shadow: 4px 4px 0 #000 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
@@ -578,7 +678,16 @@
|
||||
/* ---- BLOG ---- */
|
||||
.retro-mode .blog-post-card {
|
||||
background-color: #0000a8 !important;
|
||||
border: 6px white double !important;
|
||||
box-shadow: 10px 10px 0 #000 !important;
|
||||
padding: 12px !important;
|
||||
}
|
||||
|
||||
/* tui-divider between blog post title and body */
|
||||
.retro-mode .blog-post-title {
|
||||
border-bottom: 2px solid #fff !important;
|
||||
padding-bottom: 6px !important;
|
||||
margin-bottom: 6px !important;
|
||||
}
|
||||
|
||||
.retro-mode .blog-post-title a {
|
||||
@@ -613,9 +722,12 @@
|
||||
/* ---- SOFTWARE CATALOG ---- */
|
||||
.retro-mode .software-card {
|
||||
background-color: #0000a8 !important;
|
||||
border: 6px white double !important;
|
||||
box-shadow: 10px 10px 0 #000 !important;
|
||||
padding: 12px !important;
|
||||
}
|
||||
|
||||
/* tui-border-solid on thumbnails */
|
||||
.retro-mode .software-thumb {
|
||||
border: 2px solid #a8a8a8 !important;
|
||||
outline: none !important;
|
||||
@@ -629,11 +741,13 @@
|
||||
.retro-mode .software-desc { color: #fff !important; }
|
||||
.retro-mode .software-meta { color: #c8c8c8 !important; }
|
||||
|
||||
/* Catalog show — latest release panel */
|
||||
/* Catalog release panel — tui-shadow-2 (15px) */
|
||||
.retro-mode .bg-gradient-to-br.from-indigo-600 {
|
||||
background-color: #0000a8 !important;
|
||||
border: 2px solid #a8a8a8 !important;
|
||||
box-shadow: 10px 10px 0 #000 !important;
|
||||
background-image: url("../../node_modules/tuicss/dist/images/bg-blue-black.png") !important;
|
||||
background-repeat: repeat !important;
|
||||
border: 6px white double !important;
|
||||
box-shadow: 15px 15px 0 #000 !important;
|
||||
}
|
||||
|
||||
.retro-mode .bg-gradient-to-br.from-indigo-600 .text-4xl,
|
||||
@@ -643,9 +757,10 @@
|
||||
}
|
||||
|
||||
.retro-mode .bg-gradient-to-br.from-indigo-600 .text-indigo-100 {
|
||||
color: #a8a8a8 !important;
|
||||
color: #c8c8c8 !important;
|
||||
}
|
||||
|
||||
/* Release action buttons — tui-button */
|
||||
.retro-mode .bg-gradient-to-br.from-indigo-600 a {
|
||||
background-color: #00a800 !important;
|
||||
color: #000 !important;
|
||||
@@ -661,15 +776,27 @@
|
||||
min-height: 2em !important;
|
||||
}
|
||||
|
||||
.retro-mode .bg-gradient-to-br.from-indigo-600 a:active {
|
||||
background-color: #00a8a8 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* tui-divider between version and buttons */
|
||||
.retro-mode .bg-gradient-to-br.from-indigo-600 .flex.flex-col > * + *,
|
||||
.retro-mode .bg-gradient-to-br.from-indigo-600 .flex.flex-row > * + * {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.retro-mode .bg-gradient-to-br.from-purple-700 {
|
||||
background-color: #0000a8 !important;
|
||||
background-image: none !important;
|
||||
}
|
||||
|
||||
.retro-mode .text-purple-200,
|
||||
.retro-mode .text-purple-100,
|
||||
.retro-mode .text-purple-300 { color: #a8a8a8 !important; }
|
||||
.retro-mode .text-purple-300 { color: #c8c8c8 !important; }
|
||||
|
||||
/* Tables → tui-table style */
|
||||
/* ---- TABLES — tui-table + striped-blue + hovered-blue ---- */
|
||||
.retro-mode table {
|
||||
border: 2px solid #a8a8a8 !important;
|
||||
border-collapse: collapse !important;
|
||||
@@ -691,9 +818,11 @@
|
||||
padding: 5px !important;
|
||||
}
|
||||
|
||||
.retro-mode table tr:nth-child(odd) td { background-color: #000 !important; color: #fff !important; }
|
||||
.retro-mode table tr:nth-child(even) td { background-color: #0000a8 !important; color: #fff !important; }
|
||||
/* striped-blue: odd=black, even=blue */
|
||||
.retro-mode table tr:nth-child(odd) td { background-color: #000 !important; color: #fff !important; }
|
||||
.retro-mode table tr:nth-child(even) td { background-color: #0000a8 !important; color: #fff !important; }
|
||||
|
||||
/* hovered-blue: bright #0000ff, black text */
|
||||
.retro-mode table tr:hover td {
|
||||
background-color: #0000ff !important;
|
||||
color: #000 !important;
|
||||
@@ -703,8 +832,10 @@
|
||||
/* ---- TEAM ---- */
|
||||
.retro-mode .team-card {
|
||||
background-color: #0000a8 !important;
|
||||
border: 6px white double !important;
|
||||
box-shadow: 10px 10px 0 #000 !important;
|
||||
transform: none !important;
|
||||
padding: 12px !important;
|
||||
}
|
||||
|
||||
.retro-mode .team-card-title {
|
||||
@@ -717,6 +848,7 @@
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
/* tui-border-solid on avatar */
|
||||
.retro-mode .team-card-image-container {
|
||||
border: 2px solid #a8a8a8 !important;
|
||||
outline: none !important;
|
||||
@@ -725,7 +857,9 @@
|
||||
/* ---- CONTACT ---- */
|
||||
.retro-mode .contact-card {
|
||||
background-color: #0000a8 !important;
|
||||
border: 6px white double !important;
|
||||
box-shadow: 10px 10px 0 #000 !important;
|
||||
padding: 12px !important;
|
||||
}
|
||||
|
||||
.retro-mode .contact-card-title { color: #ffff00 !important; }
|
||||
@@ -737,13 +871,24 @@
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
.retro-mode .community-link-discord { color: #00ffff !important; font-weight: normal !important; text-decoration: underline !important; }
|
||||
.retro-mode .community-link-youtube { color: #a80000 !important; font-weight: normal !important; text-decoration: underline !important; }
|
||||
.retro-mode .community-section { border-left-color: #a8a8a8 !important; }
|
||||
.retro-mode .community-link-discord { color: #00ffff !important; text-decoration: underline !important; }
|
||||
.retro-mode .community-link-youtube { color: #a80000 !important; text-decoration: underline !important; }
|
||||
|
||||
/* tui-divider */
|
||||
.retro-mode .community-section {
|
||||
border-left: none !important;
|
||||
border-top: 2px solid #fff !important;
|
||||
padding-top: 8px !important;
|
||||
margin-top: 4px !important;
|
||||
}
|
||||
|
||||
.retro-mode .community-section-title { color: #ffff00 !important; }
|
||||
|
||||
/* IRC / BBS — tui-bg-green-black terminal boxes */
|
||||
.retro-mode .irc-box {
|
||||
background-color: #000 !important;
|
||||
background-image: url("../../node_modules/tuicss/dist/images/bg-green-black.png") !important;
|
||||
background-repeat: repeat !important;
|
||||
border: 2px solid #a8a8a8 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
@@ -753,6 +898,8 @@
|
||||
|
||||
.retro-mode .bbs-box {
|
||||
background-color: #000 !important;
|
||||
background-image: url("../../node_modules/tuicss/dist/images/bg-yellow-black.png") !important;
|
||||
background-repeat: repeat !important;
|
||||
border: 2px solid #a8a8a8 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
@@ -769,7 +916,9 @@
|
||||
|
||||
.retro-mode .commit-item {
|
||||
background-color: #0000a8 !important;
|
||||
border: 6px white double !important;
|
||||
box-shadow: 10px 10px 0 #000 !important;
|
||||
padding: 12px !important;
|
||||
}
|
||||
|
||||
.retro-mode .commits-section-title {
|
||||
@@ -792,7 +941,12 @@
|
||||
}
|
||||
|
||||
.retro-mode .group:hover .howto-card-title { color: #ffff00 !important; }
|
||||
.retro-mode .howto-card-footer { border-top-color: #a8a8a8 !important; }
|
||||
|
||||
/* tui-black-divider */
|
||||
.retro-mode .howto-card-footer {
|
||||
border-top: 2px solid #fff !important;
|
||||
}
|
||||
|
||||
.retro-mode .howto-card-read-link { color: #00ffff !important; font-weight: normal !important; transform: none !important; }
|
||||
|
||||
.retro-mode .new-badge {
|
||||
@@ -803,19 +957,44 @@
|
||||
|
||||
/* ---- WIKI CONTENT ---- */
|
||||
.retro-mode .wiki-content { font-size: 14px !important; color: #fff !important; }
|
||||
.retro-mode .wiki-content h1 { color: #ffff00 !important; border-bottom: 2px solid #a8a8a8 !important; font-style: normal !important; }
|
||||
.retro-mode .wiki-content h2 { color: #00ffff !important; font-style: normal !important; }
|
||||
|
||||
/* tui-divider under h1 */
|
||||
.retro-mode .wiki-content h1 {
|
||||
color: #ffff00 !important;
|
||||
border-bottom: 2px solid #fff !important;
|
||||
padding-bottom: 4px !important;
|
||||
}
|
||||
|
||||
.retro-mode .wiki-content h2 { color: #00ffff !important; }
|
||||
.retro-mode .wiki-content h3 { color: #00ff00 !important; }
|
||||
.retro-mode .wiki-content a { color: #00ffff !important; text-decoration: underline !important; }
|
||||
.retro-mode .wiki-content a:visited { color: #a800a8 !important; }
|
||||
|
||||
/* tui-border-solid on images */
|
||||
.retro-mode .wiki-content img { border: 2px solid #a8a8a8 !important; outline: none !important; }
|
||||
.retro-mode .wiki-content pre { background-color: #000 !important; color: #00ff00 !important; border: 2px solid #a8a8a8 !important; text-shadow: 0 0 4px #00ff00 !important; }
|
||||
|
||||
/* Terminal code blocks */
|
||||
.retro-mode .wiki-content pre {
|
||||
background-color: #000 !important;
|
||||
background-image: url("../../node_modules/tuicss/dist/images/bg-green-black.png") !important;
|
||||
background-repeat: repeat !important;
|
||||
color: #00ff00 !important;
|
||||
border: 2px solid #a8a8a8 !important;
|
||||
text-shadow: 0 0 4px #00ff00 !important;
|
||||
}
|
||||
|
||||
.retro-mode .wiki-content code { background-color: #000 !important; color: #00ff00 !important; border: 1px solid #a8a8a8 !important; }
|
||||
.retro-mode .wiki-content blockquote { border-left: 4px solid #a800a8 !important; background-color: #00002a !important; }
|
||||
|
||||
/* tui-border-solid blockquote */
|
||||
.retro-mode .wiki-content blockquote {
|
||||
border-left: 6px white double !important;
|
||||
background-color: #00002a !important;
|
||||
}
|
||||
|
||||
.retro-mode .wiki-content th { background-color: #a8a8a8 !important; color: #ffff00 !important; }
|
||||
.retro-mode .wiki-content tr:nth-child(even) td { background-color: #0000a8 !important; }
|
||||
|
||||
/* ---- RETRO TOGGLE BAR → tui-statusbar style ---- */
|
||||
/* ---- RETRO TOGGLE BAR — tui-statusbar exact style ---- */
|
||||
.retro-toggle-bar {
|
||||
padding: 0 1px;
|
||||
background-color: #f5f5f5;
|
||||
@@ -837,15 +1016,14 @@
|
||||
background-color: #e4e4e4;
|
||||
}
|
||||
|
||||
/* tui-statusbar in retro mode */
|
||||
.retro-mode .retro-toggle-bar {
|
||||
background-color: #a8a8a8 !important;
|
||||
border-top: none !important;
|
||||
box-shadow: none !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: flex-start !important;
|
||||
display: block !important;
|
||||
padding: 0 1px !important;
|
||||
gap: 0 !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.retro-mode .retro-toggle-bar::before {
|
||||
@@ -856,8 +1034,10 @@
|
||||
content: "" !important;
|
||||
}
|
||||
|
||||
/* tui-statusbar ul li style */
|
||||
.retro-mode .retro-toggle-btn {
|
||||
background-color: #a8a8a8 !important;
|
||||
display: inline-block !important;
|
||||
background: transparent !important;
|
||||
color: #000 !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
@@ -876,6 +1056,7 @@
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* tui-statusbar ul li:active → blue-168 */
|
||||
.retro-mode .retro-toggle-btn:active {
|
||||
background-color: #0000a8 !important;
|
||||
color: #fff !important;
|
||||
|
||||
Reference in New Issue
Block a user