mirror of
https://github.com/amitwh/markdown-converter.git
synced 2026-08-02 18:10:18 +05:30
amitwh
d29f19b1f5
- useMonospaceClasses hook calls electronAPI.monospace.getSettings()
and toggles body.mono-{jetbrains-mono,fira-code} and
body.mono-ligatures-{on,off} classes
- Add --font-mono-active and --font-mono-feature tokens in globals.css
- Apply to code/pre/kbd/samp so all code rendering picks up the active
monospace font + ligature settings
118 lines
3.2 KiB
CSS
118 lines
3.2 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
--background: 0 0% 100%;
|
|
--foreground: 0 0% 9%;
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 0 0% 9%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 0 0% 9%;
|
|
--primary: 11 79% 51%;
|
|
--primary-foreground: 0 0% 100%;
|
|
--secondary: 0 0% 96%;
|
|
--secondary-foreground: 0 0% 9%;
|
|
--muted: 0 0% 96%;
|
|
--muted-foreground: 0 0% 45%;
|
|
--accent: 0 0% 96%;
|
|
--accent-foreground: 0 0% 9%;
|
|
--destructive: 0 84% 60%;
|
|
--destructive-foreground: 0 0% 100%;
|
|
--border: 0 0% 90%;
|
|
--input: 0 0% 90%;
|
|
--ring: 11 79% 51%;
|
|
--radius: 0.5rem;
|
|
--shadow-sm: 0 1px 2px rgba(13, 11, 9, 0.06);
|
|
--shadow-md: 0 4px 12px rgba(13, 11, 9, 0.08), 0 0 0 1px rgba(13, 11, 9, 0.04);
|
|
--shadow-lg: 0 12px 32px rgba(13, 11, 9, 0.12), 0 0 0 1px rgba(13, 11, 9, 0.06);
|
|
--shadow-glow-brand: 0 0 24px rgba(229, 70, 31, 0.25);
|
|
--glass-bg-light: rgba(255, 255, 255, 0.72);
|
|
--glass-bg-dark: rgba(13, 11, 9, 0.72);
|
|
--glass-border-light: rgba(255, 255, 255, 0.4);
|
|
--glass-border-dark: rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
.dark {
|
|
--background: 30 14% 4%;
|
|
--foreground: 0 0% 98%;
|
|
--card: 30 14% 6%;
|
|
--card-foreground: 0 0% 98%;
|
|
--popover: 30 14% 6%;
|
|
--popover-foreground: 0 0% 98%;
|
|
--primary: 11 79% 51%;
|
|
--primary-foreground: 0 0% 100%;
|
|
--secondary: 30 6% 15%;
|
|
--secondary-foreground: 0 0% 98%;
|
|
--muted: 30 6% 15%;
|
|
--muted-foreground: 0 0% 63%;
|
|
--accent: 30 6% 15%;
|
|
--accent-foreground: 0 0% 98%;
|
|
--destructive: 0 62% 30%;
|
|
--destructive-foreground: 0 0% 100%;
|
|
--border: 30 6% 15%;
|
|
--input: 30 6% 15%;
|
|
--ring: 11 79% 51%;
|
|
--shadow-sm: 0 1px 2px rgba(13, 11, 9, 0.06);
|
|
--shadow-md: 0 4px 12px rgba(13, 11, 9, 0.08), 0 0 0 1px rgba(13, 11, 9, 0.04);
|
|
--shadow-lg: 0 12px 32px rgba(13, 11, 9, 0.12), 0 0 0 1px rgba(13, 11, 9, 0.06);
|
|
--shadow-glow-brand: 0 0 24px rgba(229, 70, 31, 0.25);
|
|
--glass-bg-light: rgba(255, 255, 255, 0.72);
|
|
--glass-bg-dark: rgba(13, 11, 9, 0.72);
|
|
--glass-border-light: rgba(255, 255, 255, 0.4);
|
|
--glass-border-dark: rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
}
|
|
}
|
|
|
|
/* Custom scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: hsl(var(--muted-foreground) / 0.3);
|
|
border-radius: 3px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: hsl(var(--muted-foreground) / 0.5);
|
|
}
|
|
|
|
/* CodeMirror integration */
|
|
.cm-editor {
|
|
@apply h-full;
|
|
}
|
|
.cm-editor .cm-scroller {
|
|
@apply font-mono text-sm;
|
|
}
|
|
|
|
/* Monospace font + ligature tokens — driven by body.mono-* classes */
|
|
:root {
|
|
--font-mono-active: 'JetBrains Mono', 'SF Mono', Monaco, 'Courier New', monospace;
|
|
--font-mono-feature: 'liga' 0, 'calt' 0;
|
|
}
|
|
body.mono-fira-code {
|
|
--font-mono-active: 'Fira Code', 'JetBrains Mono', 'SF Mono', monospace;
|
|
}
|
|
body.mono-ligatures-on {
|
|
--font-mono-feature: 'liga' 1, 'calt' 1;
|
|
}
|
|
code,
|
|
pre,
|
|
kbd,
|
|
samp {
|
|
font-family: var(--font-mono-active);
|
|
font-feature-settings: var(--font-mono-feature);
|
|
}
|