-/* === zndr.dk — full theme & layout === */
-
-/* --- Dark mode defaults (base palette) --- */
-:root {
- --bg: #0b0f1a; /* page background */
- --card: #111827; /* card background */
- --fg: #e5e7eb; /* primary text */
- --muted: #9aa4b2; /* secondary text */
- --ring: #243244; /* borders / outlines */
- --accent: #60a5fa; /* interactive accents (hover, focus) */
- --accent-strong: #3b82f6;
- --shadow: rgba(0,0,0,0.45);
+/* === zndr.dk — (dark-first) === */
+
+/* ---------- Dark mode (defaults) ---------- */
+:root{
+ --bg:#1a1b1e; /* page background */
+ --panel:#2a2b32; /* cards / input panels */
+ --fg:#e6e6e6; /* primary text */
+ --muted:#9ca3af; /* secondary text */
+ --ring:#3a3b45; /* borders */
+ --accent:#10a37f; /* green */
+ --accent-strong:#059669;
+ --accent-alt:#ef4444; /* red */
+ --shadow:rgba(0,0,0,.5);
}
-/* Global */
-* { box-sizing: border-box; }
-html, body { height: 100%; }
-body {
- margin: 0;
- font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
- color: var(--fg);
- background: var(--bg);
+*{box-sizing:border-box}
+html,body{height:100%}
+body{
+ margin:0;
+ font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans",Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
+ background:var(--bg);
+ color:var(--fg);
}
/* Layout */
-.container { max-width: 1100px; margin: 0 auto; padding: 32px 20px 48px; }
-header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom: 28px; }
-.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color: inherit; }
-.logo { width:36px; height:36px; border-radius:10px; background:#0f172a; display:grid; place-items:center; box-shadow: 0 8px 24px var(--shadow); }
-.logo svg { width:22px; height:22px; fill:#fff; }
-.title { font-weight:700; letter-spacing:.2px; }
-.subtitle { color:var(--muted); font-size:.95rem; }
+.container{max-width:1100px;margin:0 auto;padding:32px 20px 48px}
+header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:28px}
+.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
+.title{font-weight:700;letter-spacing:.2px}
+.subtitle{color:var(--muted);font-size:.95rem}
+
+/* Gradient logo box (green→red) with white stacked text */
+.logo{
+ --g1:var(--accent);
+ --g2:var(--accent-alt);
+ width:36px;height:36px;
+ border-radius:8px;
+ background:linear-gradient(135deg,var(--g1),var(--g2));
+ display:inline-grid;place-items:center;
+ box-shadow:0 4px 12px rgba(16,163,127,.25),0 0 6px rgba(239,68,68,.15);
+}
+.logo-core{width:100%;height:100%;border-radius:6px;display:grid;place-items:center}
+.logo-text{font-weight:700;font-size:.78rem;letter-spacing:.4px;line-height:1.05;color:#fff;text-align:center}
/* Search */
-.search { width:100%; margin:18px 0 24px; }
-.search input {
+.search{width:100%;margin:18px 0 24px}
+.search input{
width:100%;
padding:12px 14px;
border-radius:12px;
border:1px solid var(--ring);
- background:#0f172a;
+ background:var(--panel);
color:var(--fg);
outline:none;
+ box-shadow:inset 0 1px 3px rgba(0,0,0,.6);
}
-.search input:focus {
+.search input::placeholder{color:color-mix(in oklab,var(--muted) 85%, transparent)}
+.search input:focus{
border-color:var(--accent);
- box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 25%, transparent);
+ box-shadow:0 0 0 2px rgba(16,163,127,.40), inset 0 1px 3px rgba(0,0,0,.6);
}
/* Grid + Cards */
-.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap:14px; }
-
-.card {
+.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
+.card{
position:relative;
- border-radius:14px;
- background:var(--card);
+ border-radius:10px;
+ background:var(--panel);
border:1px solid var(--ring);
padding:16px 14px 14px;
text-decoration:none;
color:inherit;
- transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
- box-shadow:0 8px 24px var(--shadow);
+ box-shadow:none;
+ transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
-.card h3 { margin:0 0 6px; font-size:1.05rem; color:var(--fg); }
-.card p { margin:0; font-size:.95rem; color:var(--muted); }
-
-/* Dark-mode hover with stronger glow */
-.card:hover {
- transform: translateY(-2px);
- border-color: var(--accent);
+.card:hover{
+ transform:translateY(-1px);
+ border-color:var(--accent);
box-shadow:
- 0 6px 14px rgba(0,0,0,0.7),
- 0 0 18px color-mix(in oklab, var(--accent) 90%, transparent);
+ 0 0 12px rgba(16,163,127,.25), /* green glow */
+ 0 0 6px rgba(239,68,68,.20); /* red glow */
}
-/* Chip (top-right badge) */
-.chip {
- position:absolute; top:10px; right:10px;
+/* Titles and descriptions (single-line clamp) */
+.card h3{
+ margin:0 0 6px;
+ font-size:1.05rem;
+ white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
+}
+.card p{
+ margin:0;
+ font-size:.95rem;
+ color:var(--muted);
+ display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;
+}
+
+/* Badge (Public/Home/etc.) with gradient fill */
+.chip{
+ position:absolute;top:10px;right:10px;
font-size:.75rem;
- border:1px solid var(--ring);
- padding:.1rem .5rem;
+ padding:.12rem .5rem;
border-radius:999px;
- color: color-mix(in oklab, var(--fg) 80%, #fff 0%);
- background:#0f172a; /* ok for dark; overridden in light block below */
+ background:linear-gradient(135deg,var(--accent) 0%,var(--accent-alt) 100%);
+ color:#fff;
+ border:none;
}
-/* Links in footer/content */
-a { color:var(--accent); }
-a:hover { color:var(--accent-strong); }
+/* Static dim for LAN-only / offline (stripe overlay FIXED) */
+.card.is-lan,.card.is-offline{opacity:.85;position:relative}
+.card.is-lan::after,.card.is-offline::after{
+ content:''; /* REQUIRED */
+ position:absolute; inset:0; /* REQUIRED */
+ pointer-events:none;
+ border-radius:10px;
+ background:repeating-linear-gradient(
+ 45deg,
+ transparent 0 6px,
+ rgba(16,163,127,.08) 6px 9px,
+ rgba(239,68,68,.08) 9px 12px
+ );
+}
+
+/* Links */
+a{color:var(--accent)}
+a:hover{color:var(--accent-strong)}
/* Footer */
-footer {
- margin-top:36px; display:flex; gap:12px; flex-wrap:wrap;
- align-items:center; justify-content:space-between;
- color:var(--muted); font-size:.9rem;
+footer{
+ margin-top:36px;display:flex;gap:12px;flex-wrap:wrap;
+ align-items:center;justify-content:space-between;
+ color:var(--muted);font-size:.9rem;
}
-.foot-links { display:flex; gap:12px; flex-wrap:wrap; }
-.foot-links a { color:inherit; text-decoration:none; border-bottom:1px dashed var(--ring); }
-.foot-links a:hover { color:var(--fg); border-bottom-color:var(--accent); }
+.foot-links{display:flex;gap:12px;flex-wrap:wrap}
+.foot-links a{color:inherit;text-decoration:none;border-bottom:1px dashed var(--ring)}
+.foot-links a:hover{color:var(--fg);border-bottom-color:var(--accent)}
-/* Focus-visible for keyboard users */
-:where(a, input).focus-visible, :where(a, input):focus-visible {
+/* Keyboard focus */
+:where(a,input).focus-visible,:where(a,input):focus-visible{
outline:3px solid var(--accent);
outline-offset:2px;
border-radius:10px;
}
-/* Static dim style for LAN-only cards (no JS needed) */
-.card.is-lan,
-.card.is-offline {
- opacity:0.82; /* readable but visibly dimmed */
- position:relative;
-}
-.card.is-lan::after,
-.card.is-offline::after {
- content:'';
- position:absolute; inset:0; pointer-events:none;
- background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(255,255,255,0.04) 6px 12px);
- border-radius:14px;
-}
-
-/* --- Light mode overrides all in one place --- */
-@media (prefers-color-scheme: light) {
- :root {
- --bg:#f6f7fb;
- --card:#ffffff;
+/* ---------- Light mode ---------- */
+@media (prefers-color-scheme: light){
+ :root{
+ --bg:#f7f7f8;
+ --panel:#ffffff;
--fg:#0f172a;
- --muted:#475569;
- --ring:#cbd5e1;
- --accent:#2563eb;
- --accent-strong:#1d4ed8;
- --shadow: rgba(2, 6, 23, .18);
+ --muted:#4b5563;
+ --ring:#e5e7eb;
+ --accent:#10a37f; /* keep brand green */
+ --accent-strong:#0b8a6c;
+ --shadow:rgba(2,6,23,.12);
}
- .search input { background:#ffffff; }
+ /* keep gradient logo in light mode too (don’t override background) */
+ .logo{box-shadow:0 6px 16px rgba(2,6,23,.10), 0 0 6px rgba(239,68,68,.12)}
- /* Make chip readable in light */
- .chip {
- background:#eef2f7;
- color:#0f172a;
- border-color:#cbd5e1;
+ .search input{
+ background:var(--panel);
+ border:1px solid var(--ring);
+ box-shadow:inset 0 1px 2px rgba(0,0,0,.06);
}
-
- /* Lighten logo box in light (or set to transparent if you prefer) */
- .logo {
- background:#e2e8f0;
- box-shadow:0 6px 16px rgba(2, 6, 23, 0.10);
+ .search input:focus{
+ box-shadow:0 0 0 2px rgba(16,163,127,.3), inset 0 1px 2px rgba(0,0,0,.06);
}
- /* Softer hover shadows in light mode */
- .card:hover {
- box-shadow:
- 0 6px 12px rgba(0,0,0,0.15),
- 0 0 6px rgba(0,0,0,0.05);
- }
+ .card{background:var(--panel);border:1px solid var(--ring);box-shadow:none}
+ .card:hover{box-shadow:0 4px 10px rgba(0,0,0,.10)}
- /* Lighter stripe for dimmed cards on light bg */
- .card.is-lan::after,
- .card.is-offline::after {
- background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(0,0,0,0.03) 6px 12px);
+ /* If you prefer a neutral chip in light mode, uncomment:
+ .chip{background:#eef2f7;color:#0f172a;border:1px solid #dfe3ea}
+ */
+
+ .card.is-lan::after,.card.is-offline::after{
+ background:repeating-linear-gradient(45deg,transparent 0 6px, rgba(0,0,0,.03) 6px 12px);
}
}
-
projects / zndr-11ty.git / commitdiff
