gurix/Teleprompter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: Reformat CSS rules for improved readability and apply minor spacing and color adjustments.

Browse Source
This commit is contained in:
gurix
2025-12-12 15:21:46 +01:00
parent 8b83428803
commit d2f8b73996
1 changed files with 125 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles.css
+118 -30
View File
@@ -1,14 +1,22 @@
/* Reset & Base */ /* Reset & Base */
:root { :root {
--bg-color: #0f172a; /* Slate 900 */ --bg-color: #0f172a;
--text-color: #f1f5f9; /* Slate 100 */ /* Slate 900 */
--accent-color: #38bdf8; /* Sky 400 */ --text-color: #f1f5f9;
/* Slate 100 */
--accent-color: #38bdf8;
/* Sky 400 */
--panel-bg: rgba(15, 23, 42, 0.8); --panel-bg: rgba(15, 23, 42, 0.8);
--border-color: rgba(255, 255, 255, 0.1); --border-color: rgba(255, 255, 255, 0.1);
--font-main: 'Outfit', sans-serif; --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 { body {
font-family: var(--font-main); font-family: var(--font-main);
@@ -33,16 +41,25 @@ body {
#scroll-container { #scroll-container {
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
padding: 0 15%; /* Margins for reading */ padding: 0 15%;
/* Margins for reading */
position: relative; position: relative;
scroll-behavior: auto; /* JS controlled */ scroll-behavior: auto;
scrollbar-width: none; /* Firefox */ /* JS controlled */
scrollbar-width: none;
/* Firefox */
} }
#scroll-container::-webkit-scrollbar { display: none; } /* Chrome/Safari */
#scroll-container::-webkit-scrollbar {
display: none;
}
/* Chrome/Safari */
/* Content */ /* Content */
#content-area { #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 */ /* Large bottom padding to ensure the last line can scroll up to the eye level */
padding-bottom: 50vh; padding-bottom: 50vh;
min-height: 100%; min-height: 100%;
@@ -58,13 +75,48 @@ body {
} }
/* Typography for MD */ /* 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 h1 {
#markdown-output h2 { font-size: 1.3em; color: #e2e8f0; margin-top: 1em; margin-bottom: 0.5em; font-weight: 600; } font-size: 1.5em;
#markdown-output p { margin-bottom: 1em; color: #cbd5e1; } color: #fff;
#markdown-output ul, #markdown-output ol { margin-bottom: 1em; padding-left: 1.2em; } margin-bottom: 0.5em;
#markdown-output li { margin-bottom: 0.5em; } font-weight: 700;
#markdown-output strong { color: var(--accent-color); } letter-spacing: -0.02em;
#markdown-output blockquote { border-left: 4px solid var(--accent-color); padding-left: 1em; margin-left: 0; font-style: italic; color: #94a3b8; } }
#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 */
#placeholder { #placeholder {
@@ -77,7 +129,14 @@ body {
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: 100%; 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 { #btn-hero-open {
background: var(--accent-color); background: var(--accent-color);
color: #0f172a; color: #0f172a;
@@ -88,8 +147,10 @@ body {
cursor: pointer; cursor: pointer;
font-weight: 600; font-weight: 600;
box-shadow: 0 4px 20px rgba(56, 189, 248, 0.4); 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 { #btn-hero-open:hover {
transform: scale(1.05); transform: scale(1.05);
background: #fff; background: #fff;
@@ -106,13 +167,13 @@ body {
backdrop-filter: blur(20px); backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
border: 1px solid var(--border-color); 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; border-radius: 24px;
padding: 12px 28px; padding: 12px 28px;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 20px; 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; z-index: 1000;
transition: transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s;
} }
@@ -145,14 +206,21 @@ button {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
button:active { transform: scale(0.95); }
button:active {
transform: scale(0.95);
}
.icon-btn { .icon-btn {
padding: 8px; padding: 8px;
border-radius: 12px; border-radius: 12px;
color: #94a3b8; 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 { .action-btn {
background: var(--accent-color); background: var(--accent-color);
@@ -162,16 +230,21 @@ button:active { transform: scale(0.95); }
border-radius: 50%; border-radius: 50%;
box-shadow: 0 0 15px rgba(56, 189, 248, 0.3); box-shadow: 0 0 15px rgba(56, 189, 248, 0.3);
} }
.action-btn:hover { // scale effect
.action-btn:hover {
/* scale effect */
background: #fff; background: #fff;
transform: scale(1.05); transform: scale(1.05);
box-shadow: 0 0 20px rgba(255, 255, 255, 0.4); box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
} }
.action-btn.active { .action-btn.active {
background: #ef4444; /* Red for Stop */ background: #ef4444;
/* Red for Stop */
color: white; color: white;
box-shadow: 0 0 15px rgba(239, 68, 68, 0.4); box-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
} }
.action-btn.active:hover { .action-btn.active:hover {
background: #ff6b6b; background: #ff6b6b;
} }
@@ -185,6 +258,7 @@ button:active { transform: scale(0.95); }
position: relative; position: relative;
top: -2px; top: -2px;
} }
.label { .label {
font-size: 0.65rem; font-size: 0.65rem;
text-transform: uppercase; text-transform: uppercase;
@@ -193,6 +267,7 @@ button:active { transform: scale(0.95); }
color: #64748b; color: #64748b;
margin-left: 2px; margin-left: 2px;
} }
input[type=range] { input[type=range] {
-webkit-appearance: none; -webkit-appearance: none;
width: 120px; width: 120px;
@@ -200,7 +275,11 @@ input[type=range] {
cursor: pointer; cursor: pointer;
margin-top: 2px; margin-top: 2px;
} }
input[type=range]:focus { outline: none; }
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-thumb { input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
height: 14px; height: 14px;
@@ -208,17 +287,26 @@ input[type=range]::-webkit-slider-thumb {
border-radius: 50%; border-radius: 50%;
background: #fff; background: #fff;
margin-top: -5px; 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; 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 { input[type=range]::-webkit-slider-runnable-track {
width: 100%; width: 100%;
height: 4px; height: 4px;
background: rgba(255,255,255,0.1); background: rgba(255, 255, 255, 0.1);
border-radius: 2px; 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 */ /* Mirror mode util effectively flipping X */
.mirrored { transform: scaleX(-1); } .mirrored {
transform: scaleX(-1);
}