# LCD Screen Effect With Scanlines
## Code
```css
@import url('https://fonts.googleapis.com/css2?family=DotGothic16&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=VT323&display=swap');
body {
font-feature-settings: 'cv05' on;
--custom-font: "VT323";
--header-font: "DotGothic16";
/* Fonts */
--font-family: var(--custom-font), monospace;
--font-text-theme: var(--custom-font), monospace;
--font-text: var(--custom-font), monospace;
--font-monospace: 'JetBrains Mono', monospace;
--font-code: 'JetBrains Mono', monospace;
--font-text-size: 1.6rem;
--line-height-normal: 1.4rem;
--h1-size: 2.4rem;
--h2-size: 2.0rem;
--h3-size: 1.6rem;
--h4-size: 1.4rem;
--h5-size: 1.2rem;
--h6-size: 1.1rem;
--h1-font: var(--header-font);
--h2-font: var(--header-font);
--h3-font: var(--header-font);
--h4-font: var(--header-font);
--h5-font: var(--header-font);
--h6-font: var(--header-font);
/* Images */
--image-radius: 6px;
/* Headings */
--p-spacing: 1.5rem;
--heading-spacing: calc(var(--p-spacing) * 1.5);
--page-title-line-height: 1.1;
}
/* LIGHT/DARK MODES */
.theme-light {
--background-primary: #a7b0a2;
--background-secondary: #a1aa9b;
--background-secondary-alt: #9aa394;
--text-normal: #1f2a35;
--text-muted: #2c3844;
--text-faint: #3b4753;
--link-color: #1f2a35;
--link-external-color: #1f2a35;
--color-accent: #1f2a35;
--color-accent-1: #1f2a35;
--text-accent: #1f2a35;
--h1-color: #1f2a35;
--link-color-hover: #000000; /* True black for maximum contrast */
--link-external-color-hover: #000000;
--hover-bg: rgba(0,0,0,0.05); /* Subtle but distinct "ink" smudge background */
}
.theme-dark {
--background-primary: #a7b0a2;
--background-secondary: #a1aa9b;
--background-secondary-alt: #9aa394;
--text-normal: #1f2a35;
--text-muted: #2c3844;
--text-faint: #3b4753;
--link-color: #1f2a35;
--link-external-color: #1f2a35;
--color-accent: #1f2a35;
--color-accent-1: #1f2a35;
--text-accent: #1f2a35;
--link-color-hover: #000000;
--link-external-color-hover: #000000;
--hover-bg: rgba(0,0,0,0.05);
}
/* ===========================
RETRO LCD OVERLAY
=========================== */
/* Container relative positioning */
.published-container {
position: relative; /* needed for content-relative layers */
z-index: 1; /* keep content above background textures */
}
/* Top and Bottom Fixed Vignette / Glow */
.published-container::after {
content: "";
position: fixed;
inset: 0; /* Cover the entire viewport */
pointer-events: none;
z-index: 100; /* Ensure it's on top of everything */
/* Create a vignette effect on all sides */
background: radial-gradient(
ellipse at center,
transparent 50%,
rgba(0,0,0,0.1) 80%,
rgba(0,0,0,0.25) 100%
);
}
/* Individual edge glows (optional, if you still want the top-specific glow) */
.published-container::before {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
height: 20vh;
pointer-events: none;
z-index: 101;
background: radial-gradient(
ellipse at top center,
rgba(255,255,255,0.08) 0%,
transparent 80%
);
}
/* ===========================
LCD SCANLINES / PIXEL GRID
=========================== */
/* Pixel & scanline texture overlay */
.published-container .markdown-rendered::before {
content: "";
position: fixed; /* stays in viewport */
inset: 0; /* cover full viewport */
pointer-events: none;
z-index: 15; /* below vignette/glow */
background-image:
/* scanlines horizontal */
repeating-linear-gradient(
180deg,
rgba(0,0,0,0.04) 0px,
rgba(0,0,0,0.04) 2px,
transparent 2px,
transparent 6px
),
/* pixel grid vertical */
repeating-linear-gradient(
0deg,
rgba(0,0,0,0.03) 0px,
rgba(0,0,0,0.03) 1px,
transparent 1px,
transparent 4px
),
/* pixel grid horizontal */
repeating-linear-gradient(
90deg,
rgba(0,0,0,0.03) 0px,
rgba(0,0,0,0.03) 1px,
transparent 1px,
transparent 4px
);
background-blend-mode: multiply;
}
/* HEADINGS */
.published-container .markdown-rendered h1 {
margin: 0.5em 0 0.5em;
border-bottom: none;
padding-bottom: 0px;
text-wrap: balance;
}
.published-container .markdown-rendered h2 {
margin: 0.5em 0 0.5em;
text-wrap: balance;
}
/* IMAGES */
/* Adds rounded corners and drop shadow */
img {
border-radius: var(--image-radius);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
/* Removes above `img` styling from site logo */
.site-body-left-column-site-logo img {
border-radius: 0px;
box-shadow: 0px 0px;
}
.site-body-left-column-site-logo:hover,
.site-body-left-column-site-name:hover {
background-color: transparent !important;
box-shadow: none !important;
text-decoration: none !important;
}
/* CALLOUTS */
.callout {
position: relative;
}
.callout::before {
content: '';
position: absolute;
left: 0;
top: 1px;
bottom: 1px;
width: 10px;
border-left: 4px solid rgb(var(--callout-color));
}
.callout > .callout-content {
--quote-qutter-background: rgba(var(--callout-color), 0.15);
}
.callout .callout-title {
gap: 8px;
}
.callout .callout-title-inner {
color: var(--text-normal);
font-weight: 600;
}
.callout > .callout-content > *:first-child {
margin-block-start: 8px;
margin-top: 8px;
}
.callout > .callout-content > *:last-child {
margin-block-end: 0;
margin-bottom: 0;
}
/* CODE BLOCKS */
.markdown-preview-view pre,
.markdown-preview-view code,
.cm-s-obsidian .cm-inline-code,
.cm-s-obsidian .HyperMD-codeblock {
font-size: 14px !important;
line-height: 1.5;
tab-size: 2rem;
}
/* For narrow screens (i.e. mobile), reduce the size of code blocks' content */
@media screen and (max-width: 768px) {
.markdown-preview-view pre,
.markdown-preview-view code,
.cm-s-obsidian .cm-inline-code,
.cm-s-obsidian .HyperMD-codeblock {
font-size: 12px !important;
line-height: 1.5;
tab-size: 2rem;
}
}
.markdown-rendered code,
.cm-s-obsidian .cm-inline-code:not(.cm-formatting) {
padding: 2px 4px;
background-color: var(--background-secondary-alt) !important;
color: var(--text-normal) !important;
}
/* Ensure full code block container handles overflow and padding correctly */
.markdown-rendered pre,
.HyperMD-codeblock,
.markdown-source-view.mod-cm6 .cm-content,
.markdown-source-view.mod-cm6 .cm-line {
box-shadow: none !important;
border: none !important;
}
.markdown-rendered pre {
background-color: #1f2a35 !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
border-radius: 4px;
padding: 1em !important;
overflow: auto;
}
/* Remove Obsidian's default line backgrounds that cause the "strips" look */
.markdown-rendered pre code,
.markdown-rendered pre .cm-line,
.markdown-source-view.mod-cm6 .cm-line {
background-color: transparent !important;
display: block;
padding-left: 0;
}
/* Code Syntax Highlighting for LCD contrast */
.markdown-rendered pre code {
color: #a7b0a2 !important; /* LCD Green text on dark background */
background: transparent !important;
text-shadow: none !important;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #5b6773 !important; /* Muted ink-grey */
}
.token.punctuation {
color: #a7b0a2 !important;
}
.token.namespace {
opacity: .7;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #da7da5 !important; /* Soft retro pink */
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #89b482 !important; /* Bright LCD Green */
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #a7b0a2 !important;
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #d3869b !important; /* Retro Purple/Pink */
}
.token.function,
.token.class-name {
color: #fabd2f !important; /* Retro Amber/Yellow */
}
.token.regex,
.token.important,
.token.variable {
color: #fe8019 !important; /* Retro Orange */
}
.HyperMD-codeblock-begin {
border-bottom: none;
}
.HyperMD-codeblock:not(.HyperMD-codeblock-begin):not(.HyperMD-codeblock-end) {
border-top: none;
border-bottom: none;
}
.HyperMD-codeblock-end {
border-top: none;
}
.HyperMD-codeblock {
padding-right: 16px !important;
}
.markdown-rendered button.copy-code-button,
.markdown-source-view.mod-cm6 .edit-block-button,
.code-block-flair {
box-shadow: none !important;
padding: 8px !important;
line-height: 100%;
}
.markdown-reading-view .markdown-rendered button.copy-code-button {
inset-inline-end: 4px;
}
.markdown-source-view .markdown-rendered button.copy-code-button {
inset-inline-end: 36px;
}
/* TAGS */
/* Fix vertical overlap of the tag elements, esp. on mobile */
.tag {
display: inline-block;
margin-bottom: 0.2em;
--tag-padding-y: 0.45em;
}
/* QUOTES */
body {
--background-alt-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23000000' fill-opacity='0.12' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
--background-alt-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23ffffff' fill-opacity='0.12' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
--blockquote-border-thickness: 3px;
--blockquote-border-color: var(--interactive-accent);
--blockquote-font-style: normal;
--blockquote-color: inherit;
--blockquote-background-color: transparent;
--blockquote-background-light: var(--background-alt-light);
--blockquote-background-dark: var(--background-alt-dark);
--blockquote-padding: 8px;
}
.theme-light .markdown-source-view .cm-scroller .cm-line.HyperMD-quote,
.theme-light .markdown-rendered blockquote {
border-radius: var(--radius-s);
background: var(--blockquote-background-light);
}
.theme-dark .markdown-source-view .cm-scroller .cm-line.HyperMD-quote,
.theme-dark .markdown-rendered blockquote {
border-radius: var(--radius-s);
background: var(--blockquote-background-dark);
}
.markdown-rendered blockquote {
position: relative;
border-radius: var(--radius-s);
border-inline-start: none;
padding-inline: calc(16px + var(--blockquote-border-thickness) + var(--blockquote-padding)) var(--blockquote-padding);
padding-block: var(--blockquote-padding);
}
.markdown-rendered blockquote>blockquote {
padding-inline-start: calc(16px + var(--blockquote-border-thickness));
padding-block: 0 !important;
}
.markdown-rendered blockquote>blockquote::before {
top: 0;
bottom: 0;
inset-inline-start: 0;
}
.markdown-rendered blockquote::before {
position: absolute;
top: var(--blockquote-padding);
bottom: var(--blockquote-padding);
inset-inline-start: var(--blockquote-padding);
border-radius: var(--radius-s);
background-color: var(--blockquote-border-color);
width: var(--blockquote-border-thickness);
pointer-events: none;
content: "";
}
.HyperMD-quote {
border: solid transparent;
border-width: 0 var(--blockquote-padding) 0 var(--blockquote-padding);
background-color: var(--blockquote-background-color);
}
.HyperMD-quote::before {
width: 0 !important;
}
.HyperMD-quote:first-child,
.cm-sizer>div>div>*:not(.HyperMD-quote)+.HyperMD-quote {
border-top-width: var(--blockquote-padding);
border-start-start-radius: var(--radius-s);
border-start-end-radius: var(--radius-s);
}
.HyperMD-quote:first-child::before,
.cm-sizer>div>div>*:not(.HyperMD-quote)+.HyperMD-quote::before {
border-start-start-radius: var(--radius-s);
border-start-end-radius: var(--radius-s);
}
.HyperMD-quote:last-child,
.cm-sizer>div>div>.HyperMD-quote:has(+ *:not(.HyperMD-quote)) {
border-bottom-width: var(--blockquote-padding);
border-end-start-radius: var(--radius-s);
border-end-end-radius: var(--radius-s);
}
.HyperMD-quote:last-child::before,
.cm-sizer>div>div>.HyperMD-quote:has(+ *:not(.HyperMD-quote))::before {
border-end-start-radius: var(--radius-s);
border-end-end-radius: var(--radius-s);
}
/* FOOTER */
.site-footer a {
opacity: 0;
transition: 700ms;
}
.site-footer:hover a {
opacity: 1;
transition: 700ms;
}
/* REMOVE POPOVER DIMMING BACKDROP */
.modal-backdrop,
.hover-popover-backdrop,
.popover-backdrop {
background-color: transparent !important;
backdrop-filter: none !important;
pointer-events: none !important;
}
/* TABLES */
table {
width: 100%
}
tr:nth-child(even) {
background-color: var(--background-secondary-alt) !important;
}
/* LINK HOVER EFFECTS */
a:hover {
color: var(--link-color-hover) !important;
text-decoration: underline;
background-color: var(--hover-bg);
border-radius: 2px;
box-shadow: 0 0 2px rgba(0,0,0,0.1); /* Subtle "ink spread" look */
}
/* Sidebar and Navigation Item Hovers */
.site-body-left-column nav .nav-item:hover,
.site-body-right-column .outline-item:hover,
.tree-item-self:hover {
background-color: rgba(0,0,0,0.08) !important; /* Noticeable contrast shift */
color: var(--link-color-hover) !important;
}
/* SEARCH BAR LCD STYLE */
/* More aggressive global targets for the container and its wrapper */
.site-body-left-column .search-input-container,
.site-body-left-column .search-container,
.site-body-left-column .search-bar,
.site-body-left-column .search-input,
.site-body-left-column .search-input-container input,
.search-input-container,
.search-input-container input {
background-color: var(--background-secondary-alt) !important;
color: var(--text-normal) !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.15) !important;
border-radius: 4px;
}
/* Ensure the search icon also matches the muted aesthetic */
.site-body-left-column .search-input-container .search-input-icon,
.search-input-container .search-input-icon {
color: var(--text-muted) !important;
opacity: 0.6;
}
.site-body-left-column .search-input-container input:focus,
.site-body-left-column .search-input-container .search-input:focus,
.search-input-container input:focus {
background-color: var(--background-primary) !important;
outline: none;
}
.site-body-left-column .search-input-container input::placeholder,
.search-input-container input::placeholder {
color: var(--text-muted) !important;
opacity: 0.5;
}
.site-body-left-column .search-input-container .search-input-clear-button,
.search-input-container .search-input-clear-button {
color: var(--text-muted) !important;
}
/* Specific adjustments for popover scanlines */
.popover.hover-popover,
.hover-popover,
.markdown-embed-content,
.markdown-embed {
z-index: 9999 !important; /* Ensure popovers are above the screen-wide vignette/scanline overlay */
background-color: var(--background-primary) !important;
border: 1px solid rgba(0,0,0,0.2) !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
}
/* No internal scanlines for popovers to avoid "doubling up" with the fixed screen overlay */
.popover.hover-popover::before,
.hover-popover::before {
display: none !important;
}
```
#css #web #obsidian