/* Secuarden Minimal Theme (v1) Works with Bootstrap 5.3+ */ /* ---------- CSS Variables ---------- */ /* Palette */ :root { --sc-bg: #0e1116; /* page background */ --sc-panel: #151922; /* cards / surfaces */ --sc-border: #232936; --sc-text: #e9eef6; --sc-muted: #9aa7b4; --sc-primary: #2ea0ff; --sc-primary-600: #1f7ed4; --sc-accent: #7CC243; /* subtle success/brand accent */ --sc-danger: #ff6b6b; --sc-warning: #ffcc66; /* Radius & Shadows */ --sc-radius: 14px; --sc-shadow: 0 8px 30px rgba(0,0,0,0.35); /* Typography */ --sc-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; --sc-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --sc-h1: clamp(2rem, 2.5vw + 1rem, 3rem); --sc-h2: clamp(1.5rem, 1.5vw + 1rem, 2rem); --sc-h3: 1.25rem; /* Spacing */ --sc-gap: 1rem; --sc-pad: 1.25rem; } /* Optional light mode (toggle by adding .theme-light to ) */ .theme-light { --sc-bg: #f7f9fc; --sc-panel: #ffffff; --sc-border: #e4e9f2; --sc-text: #1b2430; --sc-muted: #51606f; --sc-primary: #2266e3; --sc-primary-600: #1b54bc; --sc-shadow: 0 8px 24px rgba(0,0,0,0.08); } /* ---------- Base ---------- */ html, body { height: 100%; } body { background: var(--sc-bg); color: var(--sc-text); font-family: var(--sc-font); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--sc-danger); text-decoration: none; } a:hover { color: var(--sc-primary-600); text-decoration: underline; } /* ---------- Layout Helpers ---------- */ .container-narrow { max-width: 840px; margin-inline: auto; padding-inline: 1rem; } .stack-sm > * + * { margin-top: .5rem; } .stack > * + * { margin-top: var(--sc-gap); } .stack-lg > * + * { margin-top: calc(var(--sc-gap) * 2); } .center-vh { min-height: 100dvh; display: grid; place-items: center; padding: 2rem 1rem; } /* ---------- Header / Topbar ---------- */ .sc-topbar { position: sticky; top: 0; z-index: 1000; backdrop-filter: blur(8px); background: color-mix(in oklab, var(--sc-bg) 80%, transparent); border-bottom: 1px solid var(--sc-border); } .sc-nav { display: flex; align-items: center; gap: 1rem; padding: .75rem 1rem; } .sc-nav .spacer { flex: 1; } /* .sc-logo { height: 28px; display: block; } */ .logo { font-size: 1rem; font-weight: 700; color: #00d4ff; text-decoration: none; width: 170px; } /* ----------Login Card ---------- */ .login-card { max-width: 420px; margin: 0 auto; padding: 2rem; text-align: center; } .login-card img.logo { max-height: 98px; margin-bottom: 1.5rem; } .btn-github { display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-weight: 700; padding: 1rem 2rem; border-radius: 12px; background: rgba(17, 24, 39, 0.8); color: #E5E7EB !important; border: 2px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); transition: all 0.3s ease; position: relative; overflow: hidden; } /* Gradient overlay on hover */ .btn-github::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(0, 229, 255, 0.1), rgba(139, 92, 246, 0.1)); opacity: 0; transition: opacity 0.3s ease; } .btn-github:hover::before { opacity: 1; } .btn-github svg { width: 22px; height: 22px; fill: currentColor; position: relative; z-index: 1; transition: all 0.3s ease; } .btn-github:hover { background: rgba(0, 229, 255, 0.05); border-color: #00E5FF; transform: translateY(-3px); box-shadow: 0 15px 40px rgba(0, 229, 255, 0.3); text-decoration: none; color: #00E5FF !important; } .btn-github:hover svg { fill: #00E5FF; } /* Active/pressed state */ .btn-github:active { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0, 229, 255, 0.2); } /* Optional: Gradient version */ .btn-github-gradient { display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-weight: 700; padding: 1rem 2rem; border-radius: 12px; background: linear-gradient(135deg, #00E5FF, #8B5CF6); color: #fff !important; border: none; box-shadow: 0 10px 30px rgba(0, 229, 255, 0.4); transition: all 0.3s ease; } .btn-github-gradient svg { width: 22px; height: 22px; fill: currentColor; } .btn-github-gradient:hover { transform: translateY(-3px); box-shadow: 0 15px 40px rgba(0, 229, 255, 0.6); text-decoration: none; } .btn-github-gradient:active { transform: translateY(-1px); } /* ---------- Panel / Card ---------- */ .sc-card { background: var(--sc-panel); border: 1px solid var(--sc-border); border-radius: var(--sc-radius); box-shadow: var(--sc-shadow); } .sc-card.pad { padding: var(--sc-pad); } /* ---------- Headings ---------- */ h1, .h1 { font-size: var(--sc-h1); font-weight: 700; letter-spacing: -0.01em; } h2, .h2 { font-size: var(--sc-h2); font-weight: 650; } h3, .h3 { font-size: var(--sc-h3); font-weight: 600; } .muted { color: var(--sc-muted); } /* ---------- Forms ---------- */ .form-control, .form-select, .form-check-input { background: transparent; color: var(--sc-text); border: 1px solid var(--sc-border); border-radius: 10px; } .form-control::placeholder { color: color-mix(in oklab, var(--sc-muted) 70%, transparent); } .form-control:focus, .form-select:focus { border-color: var(--sc-primary); box-shadow: 0 0 0 .2rem color-mix(in oklab, var(--sc-primary) 25%, transparent); background: transparent; color: var(--sc-text); } /* Input groups */ .input-group .btn { border-color: var(--sc-border); } /* ---------- Buttons ---------- */ .btn-sc, .btn-primary, .btn-outline-sc { --_btn-bg: var(--sc-primary); --_btn-text: #fff; --_btn-border: var(--sc-primary); border-radius: 10px; font-weight: 600; padding: .6rem 1rem; line-height: 1.2; } .btn-sc, .btn-primary { background: var(--_btn-bg); color: var(--_btn-text); border: 1px solid var(--_btn-border); } .btn-sc:hover, .btn-primary:hover { background: var(--sc-primary-600); border-color: var(--sc-primary-600); color: #fff; } .btn-outline-sc { background: transparent; color: var(--sc-text); border: 1px solid var(--sc-border); } .btn-outline-sc:hover { border-color: var(--sc-primary); color: var(--sc-primary); } /* Subtle secondary button */ .btn-subtle { background: transparent; border: 1px dashed var(--sc-border); color: var(--sc-muted); } .btn-subtle:hover { color: var(--sc-text); border-style: solid; } /* GitHub button */ .btn-github { background: #161b22; color: #fff !important; border: 1px solid #2b3137; } .btn-github:hover { background:#0d1117; } /* ---------- Badges / Pills ---------- */ .badge-sc { background: color-mix(in oklab, var(--sc-primary) 18%, transparent); color: var(--sc-primary); border: 1px solid color-mix(in oklab, var(--sc-primary) 35%, transparent); padding: .25rem .5rem; border-radius: 999px; font-weight: 600; font-size: .825rem; } /* ---------- Alerts ---------- */ .alert-sc { border: 1px solid var(--sc-border); background: var(--sc-panel); color: var(--sc-text); border-left: 4px solid var(--sc-primary); border-radius: 10px; } .alert-sc.success { border-left-color: var(--sc-accent); } .alert-sc.warn { border-left-color: var(--sc-warning); } .alert-sc.danger { border-left-color: var(--sc-danger); } /* ---------- Tables ---------- */ .table-sc { width: 100%; border-collapse: collapse; background: var(--sc-panel); border: 1px solid var(--sc-border); border-radius: var(--sc-radius); overflow: hidden; } .table-sc th, .table-sc td { padding: .75rem 1rem; border-top: 1px solid var(--sc-border); } .table-sc thead th { background: color-mix(in oklab, var(--sc-panel) 90%, white 0%); color: var(--sc-muted); border-top: none; font-weight: 600; } /* ---------- Footer ---------- */ .sc-footer { border-top: 1px solid var(--sc-border); color: var(--sc-muted); padding: 1rem; text-align: center; } /* ---------- Auth Shell ---------- */ .auth-min { max-width: 520px; margin: 0 auto; } .auth-hero { margin-bottom: 1rem; } .auth-hero p { color: var(--sc-muted); } /* ---------- Utilities ---------- */ .shadow-0 { box-shadow: none !important; } .border-soft { border: 1px solid var(--sc-border) !important; } .rounded-2xl { border-radius: 18px; } .text-muted-2 { color: var(--sc-muted) !important; } .code { font-family: var(--sc-font-mono); font-size: .9em; padding: .2rem .4rem; border-radius: 6px; background: #0b0f15; border: 1px solid var(--sc-border); } /* ---------- Responsive tweaks ---------- */ @media (max-width: 768px) { .sc-nav { padding: .6rem .75rem; } .auth-min { max-width: 100%; padding-inline: .5rem; } } /* Settings page specific */ .settings-card { background: var(--sc-panel); border: 1px solid var(--sc-border); border-color: var(--sc-warning); border-radius: var(--sc-radius); box-shadow: var(--sc-shadow); width: 100%; } .settings-card-header { background: color-mix(in oklab, var(--sc-panel) 90%, white 0%); font-weight: 600; border-bottom: 1px solid var(--sc-border); color: var(--sc-warning); } .settings-card-body { padding: var(--sc-pad); color: var(--sc-muted); } .settings-card-body .form-label { font-weight: 600; color: var(--sc-text); } .settings-card-select { background: transparent; color: var(--sc-text); border: 1px solid var(--sc-warning); border-radius: 10px; width: 50%; } .settings-card-select:focus { border-color: var(--sc-primary); box-shadow: 0 0 0 .2rem color-mix(in oklab, var(--sc-primary) 25%, transparent); background: transparent; color: var(--sc-text); } .settings-card-input { background: transparent; color: var(--sc-text); border: 1px solid var(--sc-warning); border-radius: 10px; width: 70%; } .settings-card-p { color: var(--sc-light); } /* Github App Install page specific */ .gh-app-install-card { background: var(--sc-panel); border: 1px solid var(--sc-border); border-color: var(--sc-warning); border-radius: var(--sc-radius); box-shadow: var(--sc-shadow); width: 100%; } .gh-install-lead-text { color: var(--sc-primary); font-weight: 600; } .gh-install-lead-p { color: var(--sc-muted); font-size: 1.1rem; } .modal-title { font-weight: 600; color: var(--sc-primary); } .form-text { color: var(--sc-danger); } /* Repo Settings Styles */ .settings-container { max-width: 1000px; margin: 0 auto; } .settings-card { background: var(--sec-card, #14182a); border: 1px solid rgba(0, 212, 255, 0.3); border-radius: 12px; padding: 1.5rem; margin-bottom: 1.5rem; } .settings-card h6 { color: var(--sec-blue, #00d4ff); font-weight: 600; margin-bottom: 0.5rem; } .form-label { color: var(--sec-blue, #00d4ff); font-weight: 600; margin-bottom: 0.5rem; } .form-control, .form-select { background-color: rgba(0, 0, 0, 0.3); border: 1px solid rgba(0, 212, 255, 0.3); color: #fff; max-width: 500px; } .form-control:focus, .form-select:focus { background-color: rgba(0, 0, 0, 0.4); border-color: var(--sec-blue, #00d4ff); box-shadow: 0 0 0 0.2rem rgba(0, 212, 255, 0.25); color: #fff; } .form-select[multiple] { min-height: 120px; } .form-text { color: var(--muted, #b8c2d8); font-size: 0.875rem; margin-top: 0.5rem; } .settings-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } @media (max-width: 768px) { .settings-row { grid-template-columns: 1fr; } } .enforcement-toggle-card { background: linear-gradient(135deg, rgba(0,212,255,0.05) 0%, rgba(124,194,67,0.05) 100%); border: 2px solid rgba(0, 212, 255, 0.4); } .nav-tabs .nav-link { color: var(--muted, #b8c2d8); } .nav-tabs .nav-link.active { color: var(--sec-blue, #00d4ff); background-color: rgba(0, 212, 255, 0.1); border-color: rgba(0, 212, 255, 0.3); }