feat(kon): scaffold hybrid modular workspace
- Cargo workspace with 6 domain crates: core, audio, transcription, ai-formatting, storage, cloud-providers - Minimal Tauri shell (lib.rs + main.rs) with plugin registration - Svelte 5 frontend copied from Ramble v0.2 - All crates compile as empty stubs - App identifier: uk.co.corbel.kon Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
jake
284
src/app.css
Normal file
284
src/app.css
Normal file
@@ -0,0 +1,284 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300..700;1,9..40,300..700&family=Instrument+Serif:ital@0;1&display=swap');
|
||||
@import "tailwindcss";
|
||||
|
||||
/* === Ramble Design Tokens === */
|
||||
@theme {
|
||||
/* Surfaces — warm layered depth */
|
||||
--color-bg: #0f0e0c;
|
||||
--color-bg-elevated: #171614;
|
||||
--color-bg-card: #1b1a17;
|
||||
--color-bg-input: #151412;
|
||||
--color-border: #2c2923;
|
||||
--color-border-subtle: #221f1b;
|
||||
|
||||
/* Text — warm hierarchy */
|
||||
--color-text: #f0ece4;
|
||||
--color-text-secondary: #9a9486;
|
||||
--color-text-tertiary: #5c574d;
|
||||
|
||||
/* Accent — warm amber/copper */
|
||||
--color-accent: #e8a87c;
|
||||
--color-accent-hover: #d4976a;
|
||||
--color-accent-subtle: #e8a87c10;
|
||||
--color-accent-glow: #e8a87c25;
|
||||
|
||||
/* Semantic */
|
||||
--color-success: #7ec89a;
|
||||
--color-danger: #e87171;
|
||||
--color-warning: #e8c86e;
|
||||
|
||||
/* Layout */
|
||||
--color-sidebar: #13120f;
|
||||
--color-nav-active: #201e1a;
|
||||
--color-hover: #1e1c18;
|
||||
}
|
||||
|
||||
/* === Light theme overrides === */
|
||||
html.light {
|
||||
--color-bg: #faf8f5;
|
||||
--color-bg-elevated: #f3f0eb;
|
||||
--color-bg-card: #ffffff;
|
||||
--color-bg-input: #f0ede8;
|
||||
--color-border: #ddd8d0;
|
||||
--color-border-subtle: #e6e2da;
|
||||
|
||||
--color-text: #1a1816;
|
||||
--color-text-secondary: #5c574d;
|
||||
--color-text-tertiary: #9a9486;
|
||||
|
||||
--color-accent: #d4956a;
|
||||
--color-accent-hover: #c48a60;
|
||||
--color-accent-subtle: #d4956a10;
|
||||
--color-accent-glow: #d4956a25;
|
||||
|
||||
--color-success: #4a9e6a;
|
||||
--color-danger: #d45454;
|
||||
--color-warning: #c9a84e;
|
||||
|
||||
--color-sidebar: #f5f2ed;
|
||||
--color-nav-active: #eae6e0;
|
||||
--color-hover: #ede9e3;
|
||||
}
|
||||
|
||||
html.light ::-webkit-scrollbar-thumb {
|
||||
background: #d0ccc4;
|
||||
}
|
||||
html.light ::-webkit-scrollbar-thumb:hover {
|
||||
background: #b8b3aa;
|
||||
}
|
||||
html.light .grain::after {
|
||||
opacity: 0.015;
|
||||
}
|
||||
|
||||
/* === Base === */
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* === Display font === */
|
||||
.font-display {
|
||||
font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
|
||||
}
|
||||
|
||||
/* === Transcript font — optimised for reading === */
|
||||
.font-transcript {
|
||||
font-family: "DM Sans", system-ui, sans-serif;
|
||||
font-size: var(--font-size-transcript, 15px);
|
||||
line-height: 1.85;
|
||||
letter-spacing: 0.01em;
|
||||
font-feature-settings: "liga" 1, "kern" 1;
|
||||
}
|
||||
|
||||
/* === Grain texture overlay === */
|
||||
.grain::after {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
opacity: 0.025;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
||||
z-index: 50;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
/* === Scrollbar — thin, appears on hover === */
|
||||
::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #2c2923;
|
||||
border-radius: 999px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #3d3830;
|
||||
}
|
||||
|
||||
/* === Smooth transitions (global) === */
|
||||
* {
|
||||
transition-property: background-color, border-color, color, opacity, box-shadow;
|
||||
transition-duration: 150ms;
|
||||
transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Opt out for inputs */
|
||||
textarea, input, [data-no-transition] {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
/* === Focus ring — consistent, accessible === */
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--color-accent);
|
||||
outline-offset: 2px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* === Selection colour === */
|
||||
::selection {
|
||||
background: var(--color-accent-glow);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* === Animations === */
|
||||
@keyframes fade-in {
|
||||
from { opacity: 0; transform: translateY(4px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes pulse-soft {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.4; }
|
||||
}
|
||||
|
||||
@keyframes pulse-warm {
|
||||
0%, 100% { box-shadow: 0 0 24px rgba(232, 168, 124, 0.25), 0 0 48px rgba(232, 168, 124, 0.08); }
|
||||
50% { box-shadow: 0 0 32px rgba(232, 168, 124, 0.4), 0 0 64px rgba(232, 168, 124, 0.15); }
|
||||
}
|
||||
|
||||
@keyframes slide-up {
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes breathe {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.04); }
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fade-in 200ms ease-out;
|
||||
}
|
||||
|
||||
.animate-pulse-soft {
|
||||
animation: pulse-soft 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-pulse-warm {
|
||||
animation: pulse-warm 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-slide-up {
|
||||
animation: slide-up 250ms ease-out;
|
||||
}
|
||||
|
||||
.animate-breathe {
|
||||
animation: breathe 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* === Task sidebar slide === */
|
||||
@keyframes slide-in-right {
|
||||
from { transform: translateX(100%); opacity: 0; }
|
||||
to { transform: translateX(0); opacity: 1; }
|
||||
}
|
||||
@keyframes slide-out-right {
|
||||
from { transform: translateX(0); opacity: 1; }
|
||||
to { transform: translateX(100%); opacity: 0; }
|
||||
}
|
||||
|
||||
/* Task extraction highlight */
|
||||
@keyframes highlight-warm {
|
||||
0% { border-left-color: var(--color-accent); }
|
||||
100% { border-left-color: transparent; }
|
||||
}
|
||||
|
||||
/* Checkbox pop */
|
||||
@keyframes scale-pop {
|
||||
0% { transform: scale(0.95); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
.animate-slide-in-right {
|
||||
animation: slide-in-right 200ms ease-out;
|
||||
}
|
||||
.animate-highlight-warm {
|
||||
border-left: 3px solid transparent;
|
||||
animation: highlight-warm 2s ease-out;
|
||||
}
|
||||
.animate-scale-pop {
|
||||
animation: scale-pop 50ms ease-out;
|
||||
}
|
||||
|
||||
/* Window focus glow */
|
||||
@keyframes glow-pulse {
|
||||
0% { box-shadow: 0 0 0 0 rgba(232, 168, 124, 0); }
|
||||
30% { box-shadow: 0 0 20px 4px rgba(232, 168, 124, 0.35), inset 0 0 12px rgba(232, 168, 124, 0.08); }
|
||||
100% { box-shadow: 0 0 0 0 rgba(232, 168, 124, 0); }
|
||||
}
|
||||
|
||||
.animate-glow-pulse {
|
||||
animation: glow-pulse 700ms ease-out;
|
||||
}
|
||||
|
||||
html.light .animate-glow-pulse {
|
||||
animation: glow-pulse-light 700ms ease-out;
|
||||
}
|
||||
|
||||
@keyframes glow-pulse-light {
|
||||
0% { box-shadow: 0 0 0 0 rgba(212, 149, 106, 0); }
|
||||
30% { box-shadow: 0 0 20px 4px rgba(212, 149, 106, 0.3), inset 0 0 12px rgba(212, 149, 106, 0.06); }
|
||||
100% { box-shadow: 0 0 0 0 rgba(212, 149, 106, 0); }
|
||||
}
|
||||
|
||||
/* Float window entrance */
|
||||
@keyframes float-enter {
|
||||
from { opacity: 0; transform: scale(0.97); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
|
||||
.animate-float-enter {
|
||||
animation: float-enter 200ms ease-out;
|
||||
}
|
||||
|
||||
/* === Custom titlebar buttons === */
|
||||
.titlebar-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 46px;
|
||||
height: 32px;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
/* Sinhala character spin (decorative, during recording) */
|
||||
@keyframes sinhala-spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(-360deg); }
|
||||
}
|
||||
.animate-sinhala-spin {
|
||||
animation: sinhala-spin 2s linear infinite;
|
||||
}
|
||||
|
||||
/* Recording indicator dot (follows mouse via JS, see +layout.svelte) */
|
||||
Reference in New Issue
Block a user