s8n
e59acdfd52
Same Google Fonts @import (JetBrains Mono 400/500/600/700 + Major Mono Display) and same html/body/.ui/.ui.menu/.ui.button/.ui.input/input/ textarea/select/button font-family !important override. Keeps the monochrome steel-gray palette intact — only the typography changes.
133 lines
4 KiB
CSS
133 lines
4 KiB
CSS
@import url('/assets/css/theme-forgejo-dark.css');
|
|
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Major+Mono+Display&display=swap');
|
|
|
|
/* Site-wide font override — JetBrains Mono everywhere (matches flexhub-main) */
|
|
:root {
|
|
--fonts-proportional: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
--fonts-monospace: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
}
|
|
html, body, .ui, .ui.menu, .ui.menu .item, .ui.button, .ui.input input,
|
|
.ui.dropdown, .ui.dropdown .menu > .item, input, textarea, select, button {
|
|
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
|
|
}
|
|
|
|
:root {
|
|
/* Veilor monochrome — security/terminal aesthetic */
|
|
|
|
/* Steel scale: pure neutral grays (zero hue) */
|
|
--steel-900: #0a0a0a;
|
|
--steel-850: #0f0f0f;
|
|
--steel-800: #131313;
|
|
--steel-750: #181818;
|
|
--steel-700: #1d1d1d;
|
|
--steel-650: #232323;
|
|
--steel-600: #2b2b2b;
|
|
--steel-550: #353535;
|
|
--steel-500: #424242;
|
|
--steel-450: #525252;
|
|
--steel-400: #636363;
|
|
--steel-350: #767676;
|
|
--steel-300: #8b8b8b;
|
|
--steel-250: #a0a0a0;
|
|
--steel-200: #b6b6b6;
|
|
--steel-150: #cdcdcd;
|
|
--steel-100: #e6e6e6;
|
|
|
|
/* Primary = stark white accent */
|
|
--color-primary: #ffffff;
|
|
--color-primary-contrast: #000000;
|
|
--color-primary-dark-1: #f0f0f0;
|
|
--color-primary-dark-2: #e0e0e0;
|
|
--color-primary-dark-3: #d0d0d0;
|
|
--color-primary-dark-4: #c0c0c0;
|
|
--color-primary-dark-5: #b0b0b0;
|
|
--color-primary-dark-6: #a0a0a0;
|
|
--color-primary-dark-7: #909090;
|
|
--color-primary-light-1: #e6e6e6;
|
|
--color-primary-light-2: #cdcdcd;
|
|
--color-primary-light-3: #b6b6b6;
|
|
--color-primary-light-4: #a0a0a0;
|
|
--color-primary-light-5: #8b8b8b;
|
|
--color-primary-light-6: #767676;
|
|
--color-primary-light-7: #636363;
|
|
--color-primary-alpha-10: #ffffff19;
|
|
--color-primary-alpha-20: #ffffff33;
|
|
--color-primary-alpha-30: #ffffff4b;
|
|
--color-primary-alpha-40: #ffffff66;
|
|
--color-primary-alpha-50: #ffffff80;
|
|
--color-primary-alpha-60: #ffffff99;
|
|
--color-primary-alpha-70: #ffffffb3;
|
|
--color-primary-alpha-80: #ffffffcc;
|
|
--color-primary-alpha-90: #ffffffe1;
|
|
--color-primary-hover: var(--color-primary-light-1);
|
|
--color-primary-active: var(--color-primary-light-2);
|
|
|
|
/* Body / surfaces — pitch black base */
|
|
--color-body: #08080a;
|
|
--color-box-header: #121214;
|
|
--color-box-body: #0e0e10;
|
|
--color-box-body-highlight: #16161a;
|
|
--color-card: #121214;
|
|
--color-menu: #0e0e10;
|
|
--color-header-wrapper: #050507;
|
|
--color-nav-bg: #050507;
|
|
--color-secondary-nav-bg: var(--color-body);
|
|
--color-footer: #050507;
|
|
--color-button: #1d1d1d;
|
|
--color-secondary-bg: #1d1d1d;
|
|
|
|
/* Borders / lines */
|
|
--color-input-border: #2a2a2a;
|
|
--color-input-border-hover: #404040;
|
|
--color-light-border: #ffffff1a;
|
|
|
|
/* Accent override (chains back to primary) */
|
|
--color-accent: #ffffff;
|
|
--color-small-accent: #b6b6b6;
|
|
--color-highlight-fg: #e6e6e6;
|
|
--color-highlight-bg: #ffffff14;
|
|
|
|
/* Reaction / focus */
|
|
--color-text-focus: #ffffff;
|
|
--color-reaction-bg: #ffffff10;
|
|
--color-reaction-active-bg: #ffffff30;
|
|
--color-reaction-hover-bg: #ffffff40;
|
|
|
|
/* Selection */
|
|
--color-overlay-backdrop: #000000d0;
|
|
}
|
|
|
|
::selection {
|
|
background: #ffffff !important;
|
|
color: #000000 !important;
|
|
}
|
|
|
|
/* Strip color from primary buttons / labels (override late-cascading rules) */
|
|
.ui.primary.button,
|
|
.ui.primary.buttons .button {
|
|
background: var(--color-primary) !important;
|
|
color: var(--color-primary-contrast) !important;
|
|
}
|
|
.ui.primary.button:hover,
|
|
.ui.primary.buttons .button:hover {
|
|
background: var(--color-primary-dark-2) !important;
|
|
}
|
|
.ui.primary.label,
|
|
.ui.primary.labels .label,
|
|
.ui.red.label.notification_count {
|
|
background-color: #ffffff !important;
|
|
color: #000000 !important;
|
|
}
|
|
|
|
/* Top nav: pure black bar, white text */
|
|
.ui.secondary.menu .item,
|
|
#navbar .item {
|
|
color: var(--color-text) !important;
|
|
}
|
|
|
|
/* Subtle white outline on cards */
|
|
.repo-list .item,
|
|
.ui.cards > .card,
|
|
.ui.card {
|
|
border: 1px solid #1f1f22 !important;
|
|
}
|