From d2f8b73996ea8fc23783bcb919f0a601a4a5175e Mon Sep 17 00:00:00 2001 From: Markus Graf Date: Fri, 12 Dec 2025 15:21:46 +0100 Subject: [PATCH] style: Reformat CSS rules for improved readability and apply minor spacing and color adjustments. --- styles.css | 162 +++++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 125 insertions(+), 37 deletions(-) diff --git a/styles.css b/styles.css index 6f86baf..3fdfafa 100644 --- a/styles.css +++ b/styles.css @@ -1,19 +1,27 @@ /* Reset & Base */ :root { - --bg-color: #0f172a; /* Slate 900 */ - --text-color: #f1f5f9; /* Slate 100 */ - --accent-color: #38bdf8; /* Sky 400 */ - --panel-bg: rgba(15, 23, 42, 0.8); - --border-color: rgba(255, 255, 255, 0.1); - --font-main: 'Outfit', sans-serif; + --bg-color: #0f172a; + /* Slate 900 */ + --text-color: #f1f5f9; + /* Slate 100 */ + --accent-color: #38bdf8; + /* Sky 400 */ + --panel-bg: rgba(15, 23, 42, 0.8); + --border-color: rgba(255, 255, 255, 0.1); + --font-main: 'Outfit', sans-serif; } -* { box-sizing: border-box; margin: 0; padding: 0; user-select: none; } +* { + box-sizing: border-box; + margin: 0; + padding: 0; + user-select: none; +} body { font-family: var(--font-main); background-color: var(--bg-color); - background-image: + background-image: radial-gradient(at 0% 0%, rgba(56, 189, 248, 0.1) 0px, transparent 50%), radial-gradient(at 100% 100%, rgba(139, 92, 246, 0.1) 0px, transparent 50%); color: var(--text-color); @@ -32,24 +40,33 @@ body { /* Scroll Container */ #scroll-container { height: 100%; - overflow-y: auto; - padding: 0 15%; /* Margins for reading */ + overflow-y: auto; + padding: 0 15%; + /* Margins for reading */ position: relative; - scroll-behavior: auto; /* JS controlled */ - scrollbar-width: none; /* Firefox */ + scroll-behavior: auto; + /* JS controlled */ + scrollbar-width: none; + /* Firefox */ } -#scroll-container::-webkit-scrollbar { display: none; } /* Chrome/Safari */ + +#scroll-container::-webkit-scrollbar { + display: none; +} + +/* Chrome/Safari */ /* Content */ #content-area { - padding-top: 45vh; /* Eye level approximately */ + padding-top: 45vh; + /* Eye level approximately */ /* Large bottom padding to ensure the last line can scroll up to the eye level */ - padding-bottom: 50vh; + padding-bottom: 50vh; min-height: 100%; } #markdown-output { - font-size: 60px; + font-size: 60px; line-height: 1.4; font-weight: 500; text-align: left; @@ -58,13 +75,48 @@ body { } /* Typography for MD */ -#markdown-output h1 { font-size: 1.5em; color: #fff; margin-bottom: 0.5em; font-weight: 700; letter-spacing: -0.02em; } -#markdown-output h2 { font-size: 1.3em; color: #e2e8f0; margin-top: 1em; margin-bottom: 0.5em; font-weight: 600; } -#markdown-output p { margin-bottom: 1em; color: #cbd5e1; } -#markdown-output ul, #markdown-output ol { margin-bottom: 1em; padding-left: 1.2em; } -#markdown-output li { margin-bottom: 0.5em; } -#markdown-output strong { color: var(--accent-color); } -#markdown-output blockquote { border-left: 4px solid var(--accent-color); padding-left: 1em; margin-left: 0; font-style: italic; color: #94a3b8; } +#markdown-output h1 { + font-size: 1.5em; + color: #fff; + margin-bottom: 0.5em; + font-weight: 700; + letter-spacing: -0.02em; +} + +#markdown-output h2 { + font-size: 1.3em; + color: #e2e8f0; + margin-top: 1em; + margin-bottom: 0.5em; + font-weight: 600; +} + +#markdown-output p { + margin-bottom: 1em; + color: #cbd5e1; +} + +#markdown-output ul, +#markdown-output ol { + margin-bottom: 1em; + padding-left: 1.2em; +} + +#markdown-output li { + margin-bottom: 0.5em; +} + +#markdown-output strong { + color: var(--accent-color); +} + +#markdown-output blockquote { + border-left: 4px solid var(--accent-color); + padding-left: 1em; + margin-left: 0; + font-style: italic; + color: #94a3b8; +} /* Placeholder */ #placeholder { @@ -77,7 +129,14 @@ body { transform: translate(-50%, -50%); width: 100%; } -#placeholder h1 { font-size: 3rem; margin-bottom: 1rem; color: #fff; letter-spacing: -1px; } + +#placeholder h1 { + font-size: 3rem; + margin-bottom: 1rem; + color: #fff; + letter-spacing: -1px; +} + #btn-hero-open { background: var(--accent-color); color: #0f172a; @@ -88,8 +147,10 @@ body { cursor: pointer; font-weight: 600; box-shadow: 0 4px 20px rgba(56, 189, 248, 0.4); - transition: all 0.2s; + margin: 1.5rem auto 0; + width: fit-content; } + #btn-hero-open:hover { transform: scale(1.05); background: #fff; @@ -106,13 +167,13 @@ body { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border-color); - border-top: 1px solid rgba(255,255,255,0.2); + border-top: 1px solid rgba(255, 255, 255, 0.2); border-radius: 24px; padding: 12px 28px; display: flex; align-items: center; gap: 20px; - box-shadow: 0 20px 40px rgba(0,0,0,0.4); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); z-index: 1000; transition: transform 0.3s, opacity 0.3s; } @@ -145,14 +206,21 @@ button { align-items: center; justify-content: center; } -button:active { transform: scale(0.95); } + +button:active { + transform: scale(0.95); +} .icon-btn { padding: 8px; border-radius: 12px; color: #94a3b8; } -.icon-btn:hover { background: rgba(255,255,255,0.05); color: #fff; } + +.icon-btn:hover { + background: rgba(255, 255, 255, 0.05); + color: #fff; +} .action-btn { background: var(--accent-color); @@ -162,16 +230,21 @@ button:active { transform: scale(0.95); } border-radius: 50%; box-shadow: 0 0 15px rgba(56, 189, 248, 0.3); } -.action-btn:hover { // scale effect + +.action-btn:hover { + /* scale effect */ background: #fff; transform: scale(1.05); box-shadow: 0 0 20px rgba(255, 255, 255, 0.4); } + .action-btn.active { - background: #ef4444; /* Red for Stop */ + background: #ef4444; + /* Red for Stop */ color: white; box-shadow: 0 0 15px rgba(239, 68, 68, 0.4); } + .action-btn.active:hover { background: #ff6b6b; } @@ -185,6 +258,7 @@ button:active { transform: scale(0.95); } position: relative; top: -2px; } + .label { font-size: 0.65rem; text-transform: uppercase; @@ -193,6 +267,7 @@ button:active { transform: scale(0.95); } color: #64748b; margin-left: 2px; } + input[type=range] { -webkit-appearance: none; width: 120px; @@ -200,7 +275,11 @@ input[type=range] { cursor: pointer; margin-top: 2px; } -input[type=range]:focus { outline: none; } + +input[type=range]:focus { + outline: none; +} + input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 14px; @@ -208,17 +287,26 @@ input[type=range]::-webkit-slider-thumb { border-radius: 50%; background: #fff; margin-top: -5px; - box-shadow: 0 2px 6px rgba(0,0,0,0.3); + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); transition: transform 0.1s; } -input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.2); } + +input[type=range]::-webkit-slider-thumb:hover { + transform: scale(1.2); +} + input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 4px; - background: rgba(255,255,255,0.1); + background: rgba(255, 255, 255, 0.1); border-radius: 2px; } -input[type=range]:active::-webkit-slider-runnable-track { background: rgba(56, 189, 248, 0.3); } + +input[type=range]:active::-webkit-slider-runnable-track { + background: rgba(56, 189, 248, 0.3); +} /* Mirror mode util effectively flipping X */ -.mirrored { transform: scaleX(-1); } +.mirrored { + transform: scaleX(-1); +} \ No newline at end of file