s8n
236d4632c9
flexhub-main is now DEFAULT_THEME. Magenta -> blue cyberpunk paint job on a #5b6cff periwinkle primary, JetBrains Mono site-wide, pixel-glitch "FLEXHUB" wordmark with 0.35s chromatic shake on hover, bracket-frame hover on nav items, panel-fill on the bordered Sign-in pill, gradient 1px under-line. Homepage now ships a 4-column agent grid with constant gradient stroke, outlined-letter markers, and -3px lift + dual outer glow on hover. What's in this commit - 3 themes (CSS): theme-flexhub-main, theme-flexhub-og, theme-monochrome - Homepage + navbar + footer templates (image-swap logo, stripped lang switch) - Full favicon set + apple-touch + .ico + PNG-wrapped SVG (works everywhere) - Pixel-glitch home wordmark + transparent-bg navbar wordmark - README rewrite covering current state English-only locked ([i18n] LANGS = en-US). All credit s8n. The flex is the work.
122 lines
3.4 KiB
CSS
122 lines
3.4 KiB
CSS
@import url('/assets/css/theme-forgejo-dark.css');
|
|
|
|
: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;
|
|
}
|