generated from nhcarrigan/template
feat: theme
This commit is contained in:
+75
-74
@@ -4,16 +4,28 @@
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
--primary-color: #3b82f6;
|
||||
--primary-hover: #2563eb;
|
||||
--secondary-color: #10b981;
|
||||
--danger-color: #ef4444;
|
||||
--bg-color: #ffffff;
|
||||
--surface-color: #f9fafb;
|
||||
--text-color: #111827;
|
||||
--text-secondary: #6b7280;
|
||||
--border-color: #e5e7eb;
|
||||
--shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
||||
/* Witchy Purple Rose Palette */
|
||||
--witch-purple: #2B1B3D;
|
||||
--witch-plum: #44275A;
|
||||
--witch-rose: #A8577E;
|
||||
--witch-mauve: #D4A5C7;
|
||||
--witch-lavender: #E8D5E8;
|
||||
--witch-black: #0A0009;
|
||||
--witch-silver: #C0C0C0;
|
||||
--witch-moon: #F5F5F5;
|
||||
--witch-shadow: rgba(10, 0, 9, 0.7);
|
||||
|
||||
/* Theme mappings */
|
||||
--primary-color: var(--witch-rose);
|
||||
--primary-hover: var(--witch-plum);
|
||||
--secondary-color: var(--witch-mauve);
|
||||
--danger-color: #D4658E;
|
||||
--bg-color: var(--witch-black);
|
||||
--surface-color: var(--witch-purple);
|
||||
--text-color: var(--witch-moon);
|
||||
--text-secondary: var(--witch-silver);
|
||||
--border-color: var(--witch-plum);
|
||||
--shadow: 0 4px 6px -1px var(--witch-shadow), 0 2px 4px -1px var(--witch-shadow);
|
||||
|
||||
color: var(--text-color);
|
||||
background-color: var(--bg-color);
|
||||
@@ -63,12 +75,13 @@ body {
|
||||
|
||||
/* Warning Banner */
|
||||
.warning-banner {
|
||||
background-color: #fef3c7;
|
||||
color: #92400e;
|
||||
background-color: var(--witch-plum);
|
||||
color: var(--witch-lavender);
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
margin-bottom: 2rem;
|
||||
text-align: center;
|
||||
border: 1px solid var(--witch-rose);
|
||||
}
|
||||
|
||||
/* App Content */
|
||||
@@ -99,9 +112,9 @@ body {
|
||||
font-size: 1.25rem;
|
||||
padding: 1rem 2rem;
|
||||
border-radius: 0.75rem;
|
||||
border: 2px solid transparent;
|
||||
border: 2px solid var(--witch-rose);
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
color: var(--witch-moon);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
@@ -109,11 +122,10 @@ body {
|
||||
}
|
||||
|
||||
.record-button:hover {
|
||||
background-color: var(--primary-hover);
|
||||
background-color: var(--witch-mauve);
|
||||
transform: translateY(-2px);
|
||||
box-shadow:
|
||||
0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
box-shadow: 0 6px 12px -2px var(--witch-shadow);
|
||||
border-color: var(--witch-lavender);
|
||||
}
|
||||
|
||||
.record-button.recording {
|
||||
@@ -121,7 +133,7 @@ body {
|
||||
}
|
||||
|
||||
.record-button.recording:hover {
|
||||
background-color: #dc2626;
|
||||
background-color: #B94A6D;
|
||||
}
|
||||
|
||||
.recording-indicator {
|
||||
@@ -162,7 +174,7 @@ body {
|
||||
gap: 1rem;
|
||||
padding: 1rem 1.5rem;
|
||||
background-color: var(--surface-color);
|
||||
border: 1px solid var(--danger-color);
|
||||
border: 1px solid var(--witch-rose);
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
@@ -190,9 +202,9 @@ body {
|
||||
.stop-button {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
border: 2px solid var(--danger-color);
|
||||
border: 2px solid var(--witch-rose);
|
||||
background-color: transparent;
|
||||
color: var(--danger-color);
|
||||
color: var(--witch-rose);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
@@ -200,8 +212,9 @@ body {
|
||||
}
|
||||
|
||||
.stop-button:hover {
|
||||
background-color: var(--danger-color);
|
||||
color: white;
|
||||
background-color: var(--witch-rose);
|
||||
color: var(--witch-moon);
|
||||
box-shadow: 0 2px 4px var(--witch-shadow);
|
||||
}
|
||||
|
||||
/* Transcribing Indicator */
|
||||
@@ -248,13 +261,16 @@ body {
|
||||
}
|
||||
|
||||
.primary-button {
|
||||
background-color: var(--secondary-color);
|
||||
color: white;
|
||||
background-color: var(--witch-mauve);
|
||||
color: var(--witch-purple);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.primary-button:hover:not(:disabled) {
|
||||
background-color: #059669;
|
||||
background-color: var(--witch-rose);
|
||||
color: var(--witch-moon);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 8px var(--witch-shadow);
|
||||
}
|
||||
|
||||
.primary-button:disabled {
|
||||
@@ -263,13 +279,15 @@ body {
|
||||
}
|
||||
|
||||
.secondary-button {
|
||||
background-color: var(--surface-color);
|
||||
color: var(--text-color);
|
||||
border: 1px solid var(--border-color);
|
||||
background-color: transparent;
|
||||
color: var(--witch-lavender);
|
||||
border: 1px solid var(--witch-plum);
|
||||
}
|
||||
|
||||
.secondary-button:hover {
|
||||
background-color: var(--border-color);
|
||||
background-color: var(--witch-plum);
|
||||
color: var(--witch-moon);
|
||||
border-color: var(--witch-rose);
|
||||
}
|
||||
|
||||
/* Content Grid */
|
||||
@@ -296,6 +314,7 @@ body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 600px;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.transcript-display h2,
|
||||
@@ -337,6 +356,7 @@ body {
|
||||
.speaker {
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
color: var(--witch-mauve);
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
@@ -359,15 +379,17 @@ body {
|
||||
.download-button {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.375rem;
|
||||
border: 1px solid var(--border-color);
|
||||
background-color: var(--bg-color);
|
||||
border: 1px solid var(--witch-plum);
|
||||
background-color: transparent;
|
||||
color: var(--witch-silver);
|
||||
font-size: 0.875rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.download-button:hover {
|
||||
background-color: var(--surface-color);
|
||||
background-color: var(--witch-plum);
|
||||
color: var(--witch-moon);
|
||||
}
|
||||
|
||||
.summary-text {
|
||||
@@ -388,8 +410,9 @@ body {
|
||||
.spinner {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border: 3px solid var(--border-color);
|
||||
border-top-color: var(--primary-color);
|
||||
border: 3px solid var(--witch-plum);
|
||||
border-top-color: var(--witch-rose);
|
||||
border-right-color: var(--witch-mauve);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
@@ -432,7 +455,7 @@ body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 100;
|
||||
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 -2px 10px var(--witch-shadow);
|
||||
}
|
||||
|
||||
.logs-header {
|
||||
@@ -470,8 +493,8 @@ body {
|
||||
padding: 0.5rem 1rem;
|
||||
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
|
||||
font-size: 0.75rem;
|
||||
background-color: #1a1a2e;
|
||||
color: #d4d4d4;
|
||||
background-color: var(--witch-black);
|
||||
color: var(--witch-silver);
|
||||
}
|
||||
|
||||
.logs-empty {
|
||||
@@ -552,7 +575,7 @@ body {
|
||||
|
||||
.error-message {
|
||||
color: var(--danger-color);
|
||||
background-color: rgba(239, 68, 68, 0.1);
|
||||
background-color: rgba(212, 101, 142, 0.1);
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid var(--danger-color);
|
||||
@@ -570,31 +593,7 @@ body {
|
||||
margin: 1rem auto;
|
||||
}
|
||||
|
||||
/* Dark Mode */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bg-color: #111827;
|
||||
--surface-color: #1f2937;
|
||||
--text-color: #f3f4f6;
|
||||
--text-secondary: #9ca3af;
|
||||
--border-color: #374151;
|
||||
--shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.warning-banner {
|
||||
background-color: #451a03;
|
||||
color: #fbbf24;
|
||||
}
|
||||
|
||||
.recording-item {
|
||||
background-color: var(--surface-color);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.recording-item:hover {
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
}
|
||||
/* Unified Witchy Purple Rose Theme - No Dark/Light Modes */
|
||||
|
||||
/* New layout styles */
|
||||
.app-layout {
|
||||
@@ -637,7 +636,7 @@ body {
|
||||
border-radius: 0.375rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
background-color: white;
|
||||
background-color: var(--witch-purple);
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
@@ -647,20 +646,22 @@ body {
|
||||
}
|
||||
|
||||
.transcript-item:hover {
|
||||
background-color: var(--surface-color);
|
||||
background-color: var(--witch-plum);
|
||||
border-color: var(--witch-rose);
|
||||
}
|
||||
|
||||
.transcript-item.selected {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
background-color: var(--witch-rose);
|
||||
color: var(--witch-moon);
|
||||
border-color: var(--witch-mauve);
|
||||
}
|
||||
|
||||
.transcript-item.selected .transcript-time {
|
||||
color: white;
|
||||
color: var(--witch-moon);
|
||||
}
|
||||
|
||||
.transcript-item.selected .transcript-status {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
color: var(--witch-lavender);
|
||||
}
|
||||
|
||||
.transcript-title {
|
||||
@@ -701,8 +702,8 @@ body {
|
||||
}
|
||||
|
||||
.transcript-item.selected .delete-button {
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
color: white;
|
||||
border-color: var(--witch-lavender);
|
||||
color: var(--witch-moon);
|
||||
}
|
||||
|
||||
.transcript-item.selected .delete-button:hover {
|
||||
@@ -809,7 +810,7 @@ body {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
rgba(255, 255, 255, 0.2) 50%,
|
||||
rgba(232, 213, 232, 0.2) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
animation: shimmer 1.5s infinite;
|
||||
|
||||
Reference in New Issue
Block a user