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