Retrorama-Terminal-V3
Anonymous
css
03/09/2026 5:29 PM
16.7 KB
16
Indexable
/* === Retrorama - Maximum Readability + Classic Phosphor Green (v3 - No Toggle Borders) ===
Exactly the same as v2 (which you said was perfect) but with ALL borders around the toggles removed.
ON state remains ultra-visible: vivid phosphor-green track + oversized white knob with clean depth shadow.
Everything else (editor, settings, Community Plugins, icons, readability, scanlines) unchanged.
How to update:
1. Open your `retrorama-readability.css` file
2. Delete everything and paste the code below
3. Save
4. Settings → Appearance → CSS snippets → click the reload icon
5. Reload Obsidian (Ctrl/Cmd + R)
*/
.theme-dark,
:root {
/* Classic CRT / Phosphor Green Retro Palette */
--background-primary: #050a05 !important;
--background-secondary: #0a110a !important;
--background-tertiary: #111a11 !important;
--background-modifier-border: #223322 !important;
--text-normal: #bbffcc !important;
--text-muted: #88cc99 !important;
--text-faint: #669977 !important;
--text-accent: #00ff9f !important;
--heading-color: #aaffbb !important;
}
/* ====================== MAIN EDITOR + ICONS ====================== */
.cm-content,
.markdown-preview-view,
.markdown-rendered {
color: var(--text-normal) !important;
line-height: 1.75 !important;
text-shadow: 0 0 3px rgba(0, 255, 159, 0.18); /* subtle CRT phosphor glow */
}
h1 { color: #ccffdd !important; }
h2 { color: #aaffcc !important; }
h3, h4 { color: #88ffbb !important; }
code,
.cm-inline-code,
pre code {
color: #33ffaa !important;
background-color: rgba(0, 255, 159, 0.09) !important;
}
.lucide,
.svg-icon,
.clickable-icon svg,
.nav-action-button svg,
.workspace-tab-header-item-icon,
.nav-folder-title-icon,
.nav-file-title-icon,
.status-bar-item-icon {
color: #88ffbb !important;
opacity: 1 !important;
}
.clickable-icon:hover svg,
.is-active .lucide {
color: #ffffff !important;
}
.nav-file-title-content,
.nav-folder-title-content {
color: #bbffcc !important;
}
.workspace-leaf-content,
.view-content,
.markdown-source-view,
.status-bar {
background-color: var(--background-primary) !important;
}
.cm-activeLine {
background-color: rgba(0, 255, 159, 0.07) !important;
}
/* ====================== MAXIMUM READABILITY — EVERY SETTINGS AREA ====================== */
.mod-settings,
.settings,
.vertical-tab-content,
.vertical-tab-content-container,
.modal-content,
.popover,
.menu,
.suggestion-container,
.notice {
background-color: #050a05 !important;
color: #d4ffdd !important;
}
.mod-settings *,
.settings *,
.vertical-tab-content * {
color: #d0ffdd !important;
}
.setting-item-name,
.setting-item-heading,
.plugin-item-name,
.community-plugin-name,
.community-plugin-title,
.vertical-tab-nav-item-label,
.menu-item,
.suggestion-item {
color: #aaffcc !important;
font-weight: 600;
}
/* Toggle labels specifically (guaranteed visible) */
.setting-item-description,
.setting-item-info,
.setting-item-control span:not(.checkbox-container),
.checkbox-container + span,
.switch + span,
.toggle-label,
.checkbox-label,
.switch-label,
label {
color: #e0ffdd !important;
font-weight: 500;
}
/* Plugin list cards & items */
.setting-item,
.plugin-item,
.community-plugin-item,
.community-plugin {
background-color: #0a110a !important;
border-color: #223322 !important;
}
.plugin-item-description,
.community-plugin-description,
.community-plugin-author,
.community-plugin-version {
color: #99ddaa !important;
}
/* Search boxes, inputs, dropdowns */
.setting-search-input input,
input[type="search"],
input[type="text"],
input[type="number"],
textarea,
select,
.dropdown {
color: #eeffee !important;
background-color: #111a11 !important;
border-color: #334433 !important;
}
/* Sidebar tabs in settings */
.vertical-tab-nav-item {
color: #bbffcc !important;
}
.vertical-tab-nav-item:hover,
.vertical-tab-nav-item.is-active {
color: #e0ffdd !important;
background-color: rgba(0, 255, 159, 0.15) !important;
}
/* Buttons & links */
button.mod-cta,
.setting-item-control button.mod-cta {
background-color: #00ff9f !important;
color: #0a110a !important;
}
button:not(.mod-cta) {
color: #bbffcc !important;
}
a {
color: #33ffaa !important;
}
.notice {
color: #c8ffcc !important;
background-color: #1f2a1f !important;
border-left-color: #00ff9f;
}
/* ====================== ULTRA-VISIBLE RETRO TOGGLES (no glow + no borders) ====================== */
/* OFF = dark | ON = vivid phosphor green with clean white knob (no borders, no glow) */
.checkbox-container,
.switch {
background-color: #1a241a !important;
border: none !important; /* Borders completely removed */
outline: none !important;
}
.checkbox-container.is-enabled,
.switch.is-enabled {
background-color: #00ff9f !important;
border: none !important;
outline: none !important;
}
/* Prominent white knob with clean depth (no outer borders) */
.checkbox-container::before,
.switch::before {
background-color: #ffffff !important;
border: 2px solid #112211 !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.9) !important;
}
.checkbox-container.is-enabled::before,
.switch.is-enabled::before {
box-shadow: 0 4px 12px rgba(0,0,0,0.95) !important;
transform: scale(1.08) !important;
}
/* Black checkmark on checkbox toggles when ON */
.checkbox-container.is-enabled svg {
color: #001100 !important;
}
/* Optional full retro CRT scanline effect (uncomment if you want it) */
/*
body::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background: repeating-linear-gradient(
to bottom,
transparent 0px,
transparent 3px,
rgba(0, 255, 120, 0.035) 3px,
rgba(0, 255, 120, 0.035) 4px
);
z-index: 9999;
}
*/
)
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}Editor is loading...
Leave a Comment