style: Reformat CSS rules for improved readability and apply minor spacing and color adjustments.
This commit is contained in:
+118
-30
@@ -1,14 +1,22 @@
|
||||
/* Reset & Base */
|
||||
:root {
|
||||
--bg-color: #0f172a; /* Slate 900 */
|
||||
--text-color: #f1f5f9; /* Slate 100 */
|
||||
--accent-color: #38bdf8; /* Sky 400 */
|
||||
--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);
|
||||
@@ -33,16 +41,25 @@ body {
|
||||
#scroll-container {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
padding: 0 15%; /* Margins for reading */
|
||||
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;
|
||||
min-height: 100%;
|
||||
@@ -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);
|
||||
}
|
||||
Reference in New Issue
Block a user