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.
320 lines
8.6 KiB
CSS
320 lines
8.6 KiB
CSS
@import url('/assets/css/theme-forgejo-dark.css');
|
|
|
|
@font-face {
|
|
font-family: "Inter";
|
|
font-style: normal;
|
|
font-weight: 100 900;
|
|
font-display: swap;
|
|
src: url("/assets/font/inter-var.woff2") format("woff2-variations"),
|
|
url("/assets/font/inter-var.woff2") format("woff2");
|
|
}
|
|
|
|
:root {
|
|
/* FlexHub — orange/black/white wordmark vibe */
|
|
|
|
/* Primary = signal orange */
|
|
--color-primary: #ff9000;
|
|
--color-primary-contrast: #000000;
|
|
--color-primary-dark-1: #f08400;
|
|
--color-primary-dark-2: #db7800;
|
|
--color-primary-dark-3: #c66c00;
|
|
--color-primary-dark-4: #b16100;
|
|
--color-primary-dark-5: #9c5500;
|
|
--color-primary-dark-6: #874900;
|
|
--color-primary-dark-7: #723e00;
|
|
--color-primary-light-1: #ffa12a;
|
|
--color-primary-light-2: #ffb255;
|
|
--color-primary-light-3: #ffc37f;
|
|
--color-primary-light-4: #ffd4a9;
|
|
--color-primary-light-5: #ffe5d4;
|
|
--color-primary-light-6: #fff2e6;
|
|
--color-primary-light-7: #fff8f0;
|
|
--color-primary-alpha-10: #ff90001a;
|
|
--color-primary-alpha-20: #ff900033;
|
|
--color-primary-alpha-30: #ff90004d;
|
|
--color-primary-alpha-40: #ff900066;
|
|
--color-primary-alpha-50: #ff900080;
|
|
--color-primary-alpha-60: #ff900099;
|
|
--color-primary-alpha-70: #ff9000b3;
|
|
--color-primary-alpha-80: #ff9000cc;
|
|
--color-primary-alpha-90: #ff9000e6;
|
|
--color-primary-hover: var(--color-primary-light-1);
|
|
--color-primary-active: var(--color-primary-dark-1);
|
|
|
|
/* Surfaces — pure black base, slight lift on cards */
|
|
--color-body: #000000;
|
|
--color-box-header: #0a0a0a;
|
|
--color-box-body: #060606;
|
|
--color-box-body-highlight: #101010;
|
|
--color-card: #0a0a0a;
|
|
--color-menu: #060606;
|
|
--color-header-wrapper: #000000;
|
|
--color-nav-bg: #000000;
|
|
--color-secondary-nav-bg: var(--color-body);
|
|
--color-footer: #000000;
|
|
--color-button: #1a1a1a;
|
|
--color-secondary-bg: #1a1a1a;
|
|
--color-secondary: #1a1a1a;
|
|
--color-secondary-dark-1: #222222;
|
|
--color-secondary-dark-2: #2a2a2a;
|
|
|
|
/* Borders — subtle orange tint on hover */
|
|
--color-input-border: #2a2a2a;
|
|
--color-input-border-hover: var(--color-primary);
|
|
--color-light-border: #ffffff1a;
|
|
|
|
/* Inputs / search box — pure black, not blue-grey */
|
|
--color-input-background: #000000;
|
|
--color-input-toggle-background: #000000;
|
|
--color-input-text: #f0f0f0;
|
|
--color-form-background: #000000;
|
|
--color-active-line: var(--color-primary);
|
|
|
|
/* Accent */
|
|
--color-accent: var(--color-primary);
|
|
--color-small-accent: var(--color-primary-light-2);
|
|
--color-highlight-fg: var(--color-primary);
|
|
--color-highlight-bg: var(--color-primary-alpha-10);
|
|
|
|
/* Text + focus */
|
|
--color-text: #f0f0f0;
|
|
--color-text-light: #c8c8c8;
|
|
--color-text-light-1: #b0b0b0;
|
|
--color-text-light-2: #909090;
|
|
--color-text-light-3: #707070;
|
|
--color-text-focus: var(--color-primary);
|
|
|
|
/* Reaction / overlays */
|
|
--color-reaction-bg: var(--color-primary-alpha-10);
|
|
--color-reaction-active-bg: var(--color-primary-alpha-30);
|
|
--color-reaction-hover-bg: var(--color-primary-alpha-40);
|
|
--color-overlay-backdrop: #000000d0;
|
|
|
|
/* Links */
|
|
--color-link: var(--color-primary);
|
|
--color-link-hover: var(--color-primary-light-1);
|
|
}
|
|
|
|
::selection {
|
|
background: #ff9000 !important;
|
|
color: #000000 !important;
|
|
}
|
|
|
|
/* FlexHub homepage hero */
|
|
.flexhub-home {
|
|
padding: 4rem 1rem 3rem;
|
|
text-align: center;
|
|
}
|
|
.flexhub-home .flexhub-wordmark {
|
|
max-width: min(420px, 70vw);
|
|
height: auto;
|
|
margin: 0 auto 2rem;
|
|
display: block;
|
|
}
|
|
.flexhub-home .flexhub-text-wordmark {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
font-family: "Inter", system-ui, Helvetica, Arial, sans-serif;
|
|
font-weight: 700;
|
|
font-size: clamp(3rem, 9vw, 6rem);
|
|
line-height: 1;
|
|
letter-spacing: -0.04em;
|
|
margin: 0 auto 1.25rem;
|
|
white-space: nowrap;
|
|
}
|
|
.flexhub-home .flexhub-text-wordmark .fh-flex {
|
|
color: #ffffff;
|
|
padding: 0.1em 0.15em 0.1em 0;
|
|
}
|
|
.flexhub-home .flexhub-text-wordmark::after {
|
|
content: "Hub";
|
|
color: #000000;
|
|
background: var(--color-primary);
|
|
padding: 0.05em 0.2em;
|
|
border-radius: 0.18em;
|
|
}
|
|
.flexhub-home h1 {
|
|
font-size: clamp(2.2rem, 5vw, 3.4rem);
|
|
font-weight: 900;
|
|
letter-spacing: -0.02em;
|
|
margin: 0 0 0.6rem;
|
|
color: #ffffff;
|
|
}
|
|
.flexhub-home h1 .flex {
|
|
color: #ffffff;
|
|
}
|
|
.flexhub-home h1 .hub {
|
|
color: var(--color-primary);
|
|
}
|
|
.flexhub-home .tagline {
|
|
font-size: clamp(1.1rem, 2vw, 1.4rem);
|
|
color: var(--color-text-light);
|
|
margin: 0 0 0.4rem;
|
|
font-weight: 400;
|
|
}
|
|
.flexhub-home .subtagline {
|
|
font-size: 1rem;
|
|
color: var(--color-text-light-2);
|
|
margin: 0 0 3rem;
|
|
font-style: italic;
|
|
}
|
|
.flexhub-home .agent-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
|
gap: 1.25rem;
|
|
max-width: 980px;
|
|
margin: 0 auto;
|
|
padding: 0 1rem;
|
|
}
|
|
.flexhub-home .agent-card {
|
|
background: var(--color-card);
|
|
border: 1px solid var(--color-input-border);
|
|
border-radius: 12px;
|
|
padding: 1.5rem 1.25rem;
|
|
text-align: left;
|
|
transition: border-color .15s, transform .15s;
|
|
}
|
|
.flexhub-home .agent-card:hover {
|
|
border-color: var(--color-primary);
|
|
transform: translateY(-2px);
|
|
}
|
|
.flexhub-home .agent-card .marker {
|
|
display: inline-block;
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 6px;
|
|
background: var(--color-primary);
|
|
color: #000;
|
|
font-weight: 900;
|
|
text-align: center;
|
|
line-height: 28px;
|
|
font-size: 1rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
.flexhub-home .agent-card h3 {
|
|
margin: 0 0 0.4rem;
|
|
color: #ffffff;
|
|
font-size: 1.05rem;
|
|
font-weight: 700;
|
|
}
|
|
.flexhub-home .agent-card p {
|
|
margin: 0;
|
|
color: var(--color-text-light);
|
|
font-size: 0.92rem;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
/* Navbar wordmark — text-rendered via head_navbar.tmpl override */
|
|
.flexhub-nav-wordmark {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
font-family: "Inter", system-ui, Helvetica, Arial, sans-serif;
|
|
font-weight: 700;
|
|
font-size: 22px;
|
|
letter-spacing: -0.02em;
|
|
line-height: 1;
|
|
white-space: nowrap;
|
|
}
|
|
.flexhub-nav-wordmark .fh-flex {
|
|
color: #ffffff;
|
|
padding: 4px 6px 4px 2px;
|
|
}
|
|
.flexhub-nav-wordmark::after {
|
|
content: "Hub";
|
|
color: #000000;
|
|
background: var(--color-primary);
|
|
padding: 4px 8px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
/* Footer: orange s8n.ru link + white placeholder text */
|
|
.page-footer .footer-placeholder {
|
|
color: #ffffff;
|
|
margin-right: 0.4rem;
|
|
}
|
|
.page-footer .left-links a {
|
|
color: var(--color-primary);
|
|
}
|
|
.page-footer .left-links a:hover {
|
|
color: var(--color-primary-light-1);
|
|
}
|
|
|
|
/* Top navbar (Explore etc): underlined hyperlink style, transparent bg, kill blue hover chip */
|
|
#navbar a.item,
|
|
#navbar .item {
|
|
background: transparent !important;
|
|
border-radius: 0 !important;
|
|
}
|
|
#navbar a.item:hover,
|
|
#navbar .item:hover {
|
|
background: transparent !important;
|
|
color: var(--color-primary) !important;
|
|
}
|
|
#navbar a.item.active,
|
|
#navbar .item.active {
|
|
background: transparent !important;
|
|
color: var(--color-primary) !important;
|
|
text-decoration: underline;
|
|
text-decoration-color: var(--color-primary);
|
|
text-decoration-thickness: 2px;
|
|
text-underline-offset: 6px;
|
|
}
|
|
#navbar a.item.active:hover {
|
|
color: var(--color-primary-light-1) !important;
|
|
}
|
|
|
|
/* Tab menus (Repositories / Users / Organizations): keep big border-bottom only,
|
|
strip the close text-decoration line that doubles up under the label. */
|
|
.ui.tabs.menu .item.active,
|
|
.ui.tabs.menu .active.item,
|
|
.ui.tabular.menu .item.active,
|
|
.ui.tabular.menu .active.item,
|
|
.ui.secondary.pointing.menu .item.active,
|
|
.ui.secondary.pointing.menu .active.item {
|
|
text-decoration: none !important;
|
|
background: transparent !important;
|
|
color: var(--color-primary) !important;
|
|
border-color: var(--color-primary) !important;
|
|
}
|
|
|
|
/* Search input + filter/sort dropdowns: pure black */
|
|
.ui.input > input,
|
|
.ui.action.input > input,
|
|
.ui.form input[type="text"],
|
|
.ui.form input[type="search"],
|
|
.ui.search input,
|
|
input[type="text"],
|
|
input[type="search"] {
|
|
background: #000000 !important;
|
|
color: var(--color-input-text) !important;
|
|
border-color: var(--color-input-border) !important;
|
|
}
|
|
.ui.input > input:focus,
|
|
input[type="text"]:focus,
|
|
input[type="search"]:focus {
|
|
background: #000000 !important;
|
|
border-color: var(--color-primary) !important;
|
|
}
|
|
.ui.action.input > .button,
|
|
.ui.action.input > .ui.button {
|
|
background: #000000 !important;
|
|
color: var(--color-text) !important;
|
|
border: 1px solid var(--color-input-border) !important;
|
|
}
|
|
.ui.action.input > .button:hover {
|
|
border-color: var(--color-primary) !important;
|
|
color: var(--color-primary) !important;
|
|
}
|
|
|
|
/* Primary buttons keep orange-on-black */
|
|
.ui.primary.button,
|
|
.ui.primary.buttons .button {
|
|
background: var(--color-primary) !important;
|
|
color: #000 !important;
|
|
font-weight: 700;
|
|
}
|
|
.ui.primary.button:hover,
|
|
.ui.primary.buttons .button:hover {
|
|
background: var(--color-primary-light-1) !important;
|
|
color: #000 !important;
|
|
}
|