feat: flat design Sunset Glitch palette + Font Awesome icons
This commit is contained in:
root
+48
-40
@@ -1,14 +1,22 @@
|
||||
/* Ohm Streaming - Flat Design Theme */
|
||||
:root {
|
||||
/* ========== FLAT DESIGN VARIABLES ========== */
|
||||
--primary: #f15025;
|
||||
--primary-hover: #d94420;
|
||||
--bg-dark: #ffffff;
|
||||
--bg-card: #e6e8e6;
|
||||
--text-main: #191919;
|
||||
--text-dim: #ced0ce;
|
||||
--secondary: #ced0ce;
|
||||
--accent: #f15025;
|
||||
/* ========== FLAT DESIGN VARIABLES - SUNSET GLITCH PALETTE ========== */
|
||||
--primary: #FF9F1C;
|
||||
--primary-hover: #e08a15;
|
||||
--bg-dark: #15171A;
|
||||
--bg-card: #202327;
|
||||
--bg-elevated: #2a2d32;
|
||||
--text-main: #F2F2F2;
|
||||
--text-dim: #8a8f98;
|
||||
--text-muted: #5a5f68;
|
||||
--secondary: #FF9F1C;
|
||||
--border: #2a2d32;
|
||||
--border-hover: #FFBF69;
|
||||
--accent: #FF9F1C;
|
||||
--hover: rgba(255, 191, 105, 0.15);
|
||||
--lilac: #8a8f98;
|
||||
--pastel-petal: #F2F2F2;
|
||||
--surface-hover: rgba(255, 191, 105, 0.08);
|
||||
--danger: #e63946;
|
||||
--success: #2d936c;
|
||||
--warning: #f4a261;
|
||||
@@ -39,7 +47,7 @@ body {
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #e6e8e6;
|
||||
background: #202327;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@@ -50,13 +58,13 @@ body {
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--primary);
|
||||
background: var(--text-main);
|
||||
}
|
||||
|
||||
/* Firefox scrollbar */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--text-dim) #e6e8e6;
|
||||
scrollbar-color: var(--text-dim) #202327;
|
||||
}
|
||||
|
||||
/* ========== CONTAINER ========== */
|
||||
@@ -97,7 +105,7 @@ h1 {
|
||||
.section-header h2 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
border-left: 4px solid var(--primary);
|
||||
border-left: 4px solid #FFBF69;
|
||||
padding-left: 15px;
|
||||
color: var(--text-main);
|
||||
}
|
||||
@@ -188,8 +196,8 @@ h1 {
|
||||
}
|
||||
|
||||
.btn-outlined:hover:not(:disabled) {
|
||||
border-color: var(--primary);
|
||||
color: var(--primary);
|
||||
border-color: var(--text-dim);
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
/* Text Button */
|
||||
@@ -268,7 +276,7 @@ h1 {
|
||||
}
|
||||
|
||||
.card:hover, .hc:hover, .download-item:hover {
|
||||
border-color: var(--primary);
|
||||
border-color: #FFBF69;
|
||||
}
|
||||
|
||||
/* ========== HORIZONTAL SCROLL ROW ========== */
|
||||
@@ -300,7 +308,7 @@ h1 {
|
||||
.streaming-row::-webkit-scrollbar-thumb:hover,
|
||||
.recommendations-carousel::-webkit-scrollbar-thumb:hover,
|
||||
.releases-carousel::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--primary);
|
||||
background: var(--text-main);
|
||||
}
|
||||
|
||||
/* ========== HOME CARD ========== */
|
||||
@@ -317,7 +325,7 @@ h1 {
|
||||
}
|
||||
|
||||
.hc:hover {
|
||||
border-color: var(--primary);
|
||||
border-color: #FFBF69;
|
||||
}
|
||||
|
||||
.hc-poster {
|
||||
@@ -432,7 +440,7 @@ h1 {
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
color: var(--primary);
|
||||
color: #FFBF69;
|
||||
}
|
||||
|
||||
.tab.active::after {
|
||||
@@ -442,7 +450,7 @@ h1 {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: var(--primary);
|
||||
background: #FF9F1C;
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
|
||||
@@ -457,7 +465,7 @@ h1 {
|
||||
}
|
||||
|
||||
.input-group:focus-within {
|
||||
border-color: var(--primary);
|
||||
border-color: #FFBF69;
|
||||
}
|
||||
|
||||
.input-group input {
|
||||
@@ -511,14 +519,14 @@ h1 {
|
||||
|
||||
.form-group input:focus {
|
||||
outline: none;
|
||||
border-bottom-color: var(--primary);
|
||||
border-bottom-color: #FFBF69;
|
||||
}
|
||||
|
||||
.form-group input:focus + label,
|
||||
.form-group input:not(:placeholder-shown) + label {
|
||||
transform: translateY(-24px);
|
||||
font-size: 0.75rem;
|
||||
color: var(--primary);
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.form-group input::placeholder {
|
||||
@@ -530,7 +538,7 @@ h1 {
|
||||
margin-bottom: 25px;
|
||||
padding: 16px 20px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--primary);
|
||||
border: 1px solid var(--text-dim);
|
||||
border-radius: var(--card-radius);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -543,13 +551,13 @@ h1 {
|
||||
padding: 40px;
|
||||
background: var(--bg-card);
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--text-dim);
|
||||
border: 1px solid rgba(255, 191, 105, 0.3);
|
||||
}
|
||||
|
||||
.auth-title {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
color: var(--primary);
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.auth-tabs {
|
||||
@@ -570,7 +578,7 @@ h1 {
|
||||
}
|
||||
|
||||
.auth-tab.active {
|
||||
color: var(--primary);
|
||||
color: #FFBF69;
|
||||
}
|
||||
|
||||
.auth-tab.active::after {
|
||||
@@ -580,7 +588,7 @@ h1 {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: var(--primary);
|
||||
background: #FF9F1C;
|
||||
}
|
||||
|
||||
.auth-form {
|
||||
@@ -606,7 +614,7 @@ h1 {
|
||||
}
|
||||
|
||||
.auth-success {
|
||||
background: rgba(45, 147, 108, 0.1);
|
||||
background: rgba(255, 191, 105, 0.1);
|
||||
border: 1px solid var(--success);
|
||||
color: var(--success);
|
||||
}
|
||||
@@ -618,7 +626,7 @@ h1 {
|
||||
/* ========== FLAT PROGRESS BARS ========== */
|
||||
.progress-container {
|
||||
height: 6px;
|
||||
background: var(--text-dim);
|
||||
background: rgba(255, 191, 105, 0.15);
|
||||
border-radius: 3px;
|
||||
margin: 12px 0;
|
||||
overflow: hidden;
|
||||
@@ -626,7 +634,7 @@ h1 {
|
||||
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
background: var(--primary);
|
||||
background: #FF9F1C;
|
||||
transition: width 0.3s ease;
|
||||
border-radius: 3px;
|
||||
}
|
||||
@@ -690,8 +698,8 @@ h1 {
|
||||
}
|
||||
|
||||
.download-item:hover {
|
||||
border-color: var(--primary);
|
||||
border-left-color: var(--primary);
|
||||
border-color: #FFBF69;
|
||||
border-left-color: #FFBF69;
|
||||
}
|
||||
|
||||
.download-info {
|
||||
@@ -769,13 +777,13 @@ h1 {
|
||||
|
||||
/* Progress bar for downloading */
|
||||
.download-item.status-downloading .progress-bar {
|
||||
background: var(--primary);
|
||||
background: var(--text-dim);
|
||||
}
|
||||
|
||||
/* ========== BADGE SYSTEM ========== */
|
||||
.badge-completed {
|
||||
color: var(--success);
|
||||
background: rgba(45, 147, 108, 0.1);
|
||||
background: rgba(255, 191, 105, 0.1);
|
||||
padding: 4px 8px;
|
||||
border-radius: var(--input-radius);
|
||||
}
|
||||
@@ -789,7 +797,7 @@ h1 {
|
||||
|
||||
.badge-downloading {
|
||||
color: var(--primary);
|
||||
background: rgba(241, 80, 37, 0.1);
|
||||
background: rgba(255, 191, 105, 0.15);
|
||||
padding: 4px 8px;
|
||||
border-radius: var(--input-radius);
|
||||
}
|
||||
@@ -817,7 +825,7 @@ h1 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 3px solid var(--text-dim);
|
||||
border-top-color: var(--primary);
|
||||
border-top-color: var(--text-main);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
@@ -830,7 +838,7 @@ h1 {
|
||||
|
||||
/* Skeleton Loading */
|
||||
.skeleton {
|
||||
background: var(--bg-card);
|
||||
background: rgba(255, 191, 105, 0.1);
|
||||
animation: skeleton-loading 1.5s ease-in-out infinite;
|
||||
border-radius: var(--input-radius);
|
||||
}
|
||||
@@ -904,7 +912,7 @@ h1 {
|
||||
.toast {
|
||||
padding: 16px 24px;
|
||||
background: var(--bg-card);
|
||||
border-left: 4px solid var(--primary);
|
||||
border-left: 4px solid var(--text-dim);
|
||||
border-radius: var(--card-radius);
|
||||
border: 1px solid var(--text-dim);
|
||||
display: flex;
|
||||
@@ -929,7 +937,7 @@ h1 {
|
||||
}
|
||||
|
||||
.toast.info {
|
||||
border-left-color: var(--primary);
|
||||
border-left-color: #FFBF69;
|
||||
}
|
||||
|
||||
@keyframes slide-up {
|
||||
|
||||
Reference in New Issue
Block a user