/* EasyLoops Code — brand skin for Gitea 1.27. * * Loaded last inside by custom/templates/custom/header.tmpl, so these * declarations win over the shipped theme without !important. * * Palette: colour VALUES only, copied from the admin console's default "paper" * mode (admin.easyloops.app). No admin component code, class names or markup is * imported here — see CLAUDE.md "The auth hub stays lean" for the same rule. */ :root, :root[data-theme] { --el-accent: #e04a14; --el-accent-hover: #c8400f; --el-accent-ink: #fff7f0; --el-accent-soft: rgba(224, 74, 20, 0.12); --el-paper: #f1ece0; --el-paper-raised: #faf7ef; --el-paper-sunken: #e8e0d0; --el-ink: #18160f; --el-ink-2: #3a342a; --el-ink-3: #6e6555; --el-rule: rgba(24, 22, 15, 0.14); --el-rule-strong: rgba(24, 22, 15, 0.28); --el-r-2: 4px; --el-r-3: 6px; --el-r-4: 8px; --el-font: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Gitea theme hooks — accent + chrome only, so every page picks up the brand while Gitea keeps owning light/dark surfaces. */ --color-primary: var(--el-accent); --color-primary-contrast: var(--el-accent-ink); --color-primary-hover: var(--el-accent-hover); --color-primary-active: var(--el-accent-hover); --color-primary-dark-1: #c8400f; --color-primary-dark-2: #b1390d; --color-primary-dark-3: #99310b; --color-primary-dark-4: #822a09; --color-primary-dark-5: #6a2207; --color-primary-dark-6: #531b06; --color-primary-dark-7: #3b1304; --color-primary-light-1: #e65f2e; --color-primary-light-2: #ec7548; --color-primary-light-3: #f18b63; --color-primary-light-4: #f5a182; --color-primary-light-5: #f9b8a1; --color-primary-light-6: #fbcfc0; --color-primary-light-7: #fde7df; --color-primary-alpha-10: rgba(224, 74, 20, 0.1); --color-primary-alpha-20: rgba(224, 74, 20, 0.2); --color-primary-alpha-30: rgba(224, 74, 20, 0.3); --color-primary-alpha-40: rgba(224, 74, 20, 0.4); --color-primary-alpha-50: rgba(224, 74, 20, 0.5); --color-primary-alpha-60: rgba(224, 74, 20, 0.6); --color-primary-alpha-70: rgba(224, 74, 20, 0.7); --color-primary-alpha-80: rgba(224, 74, 20, 0.8); --color-primary-alpha-90: rgba(224, 74, 20, 0.9); --color-accent: var(--el-accent); --color-nav-bg: var(--el-ink); --color-nav-text: var(--el-paper-sunken); --color-nav-hover-bg: rgba(255, 255, 255, 0.1); } /* ---------------------------------------------------------------- sign-in -- */ .page-content.user.signin { font-family: var(--el-font); padding: 0; } .el-auth { display: flex; justify-content: center; padding: 56px 16px 72px; } .el-auth-card { width: 100%; max-width: 420px; box-sizing: border-box; padding: 32px; background: var(--el-paper-raised); border: 1px solid var(--el-rule); border-radius: var(--el-r-4); box-shadow: 0 1px 2px rgba(24, 22, 15, 0.06), 0 12px 32px rgba(24, 22, 15, 0.08); color: var(--el-ink); } .el-auth-brand { display: flex; align-items: center; gap: 10px; } .el-auth-brand img { display: block; width: 32px; height: 32px; border-radius: var(--el-r-3); } .el-auth-wordmark { font-family: var(--el-font); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--el-ink); line-height: 1.2; } .el-auth-title { margin: 24px 0 4px; font-family: var(--el-font); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--el-ink); } .el-auth-sub { margin: 0 0 24px; font-size: 13.5px; line-height: 1.5; color: var(--el-ink-3); } a.el-auth-primary, a.el-auth-primary:hover, a.el-auth-primary:focus { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 13px 18px; border: 1px solid transparent; border-radius: var(--el-r-3); background: var(--el-accent); color: var(--el-accent-ink); font-family: var(--el-font); font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background 0.12s ease; } a.el-auth-primary:hover { background: var(--el-accent-hover); } a.el-auth-primary:focus-visible { outline: 2px solid var(--el-ink); outline-offset: 2px; } .el-auth-primary svg { flex: none; width: 18px; height: 18px; } .el-auth-note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--el-ink-3); text-align: center; } /* Operator fallback: present, functional, deliberately quiet. */ .el-auth-operators { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--el-rule); } .el-auth-operators > summary { list-style: none; cursor: pointer; font-size: 12.5px; color: var(--el-ink-3); text-align: center; user-select: none; } .el-auth-operators > summary::-webkit-details-marker { display: none; } .el-auth-operators > summary:hover { color: var(--el-accent); } .el-auth-operators > summary::after { content: " ▾"; } .el-auth-operators[open] > summary::after { content: " ▴"; } .el-auth-operators .ui.form { margin-top: 20px; } .el-auth-operators .ui.form label { font-family: var(--el-font); font-size: 12.5px; color: var(--el-ink-2); } .el-auth-operators .ui.form input[type="text"], .el-auth-operators .ui.form input[type="password"] { background: var(--el-paper); border: 1px solid var(--el-rule-strong); border-radius: var(--el-r-2); color: var(--el-ink); } .el-auth-operators .ui.form .ui.primary.button { background: var(--el-ink); color: var(--el-paper); border-radius: var(--el-r-3); font-family: var(--el-font); font-weight: 600; } .el-auth-operators .ui.form .ui.primary.button:hover { background: var(--el-ink-2); } .el-auth-extra { margin-top: 16px; text-align: center; font-size: 12.5px; color: var(--el-ink-3); } .el-auth-extra a { color: var(--el-accent); } /* Gitea's flash/alert banner sits above the card; keep it centred with it. */ .el-auth .ui.message, .el-auth .ui.negative.message, .el-auth .ui.positive.message { max-width: 420px; margin-inline: auto; } /* ------------------------------------------------------ logged-out splash -- */ .page-content.home.el-home { font-family: var(--el-font); } .el-home-hero { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 72px 16px 40px; text-align: center; } .el-home-hero img { width: 72px; height: 72px; border-radius: 16px; } .el-home-hero h1 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; } .el-home-hero p { margin: 0; max-width: 38ch; font-size: 13.5px; line-height: 1.6; /* Gitea owns this surface (it follows the OS light/dark theme), so the copy uses Gitea's own text token rather than the fixed paper ink. */ color: var(--color-text-light); }