208 lines
7.2 KiB
CSS
208 lines
7.2 KiB
CSS
|
/* ---- Color System ---- */
|
||
|
|
:root{
|
||
|
|
/* light defaults */
|
||
|
|
--bg:#f6f7fb; --card:#ffffff; --text:#0f1220; --muted:#5b6473;
|
||
|
|
--border:#dfe3ee; --accent:#2563eb; --accent2:#7c3aed;
|
||
|
|
--k-bg:#f1f5ff; --k-border:#cdd9ff;
|
||
|
|
--br:16px; --gap:14px; --shadow:0 6px 20px rgba(0,0,0,.08); --max:1100px;
|
||
|
|
}
|
||
|
|
@media (prefers-color-scheme: dark){
|
||
|
|
:root{
|
||
|
|
--bg:#0f1220; --card:#151933; --text:#e7ebf3; --muted:#9aa3b2;
|
||
|
|
--border:#242a44; --accent:#7dd3fc; --accent2:#a78bfa;
|
||
|
|
--k-bg:rgba(125,211,252,.06); --k-border:#2a3357;
|
||
|
|
--shadow:0 8px 30px rgba(0,0,0,.25);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/* explicit overrides win over system */
|
||
|
|
:root[data-theme="light"]{
|
||
|
|
--bg:#f6f7fb; --card:#ffffff; --text:#0f1220; --muted:#5b6473;
|
||
|
|
--border:#dfe3ee; --accent:#2563eb; --accent2:#7c3aed;
|
||
|
|
--k-bg:#f1f5ff; --k-border:#cdd9ff; --shadow:0 6px 20px rgba(0,0,0,.08);
|
||
|
|
}
|
||
|
|
:root[data-theme="dark"]{
|
||
|
|
--bg:#0f1220; --card:#151933; --text:#e7ebf3; --muted:#9aa3b2;
|
||
|
|
--border:#242a44; --accent:#7dd3fc; --accent2:#a78bfa;
|
||
|
|
--k-bg:rgba(125,211,252,.06); --k-border:#2a3357;
|
||
|
|
--shadow:0 8px 30px rgba(0,0,0,.25);
|
||
|
|
}
|
||
|
|
|
||
|
|
:root { color-scheme: light; }
|
||
|
|
@media (prefers-color-scheme: dark) { :root { color-scheme: dark; } }
|
||
|
|
:root[data-theme="light"] { color-scheme: light; }
|
||
|
|
:root[data-theme="dark"] { color-scheme: dark; }
|
||
|
|
|
||
|
|
input, select, textarea { color-scheme: inherit; }
|
||
|
|
|
||
|
|
:root{
|
||
|
|
--select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
|
||
|
|
}
|
||
|
|
|
||
|
|
select{
|
||
|
|
appearance: none;
|
||
|
|
-webkit-appearance: none;
|
||
|
|
background-color: var(--card);
|
||
|
|
color: var(--text);
|
||
|
|
border: 1px solid var(--border);
|
||
|
|
border-radius: 10px;
|
||
|
|
padding: 10px 2.25rem 10px 10px; /* room for arrow */
|
||
|
|
background-image: var(--select-arrow);
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: right 10px center;
|
||
|
|
background-size: 12px auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
select:focus{
|
||
|
|
outline: none;
|
||
|
|
border-color: var(--accent2);
|
||
|
|
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent2) 25%, transparent);
|
||
|
|
}
|
||
|
|
|
||
|
|
select:disabled{ opacity:.55; cursor:not-allowed; }
|
||
|
|
|
||
|
|
/* ---- Base ---- */
|
||
|
|
*{box-sizing:border-box}
|
||
|
|
html,body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,Segoe UI,Roboto,Ubuntu,Cantarell,sans-serif}
|
||
|
|
.wrap{max-width:var(--max);margin:0 auto;padding:16px}
|
||
|
|
|
||
|
|
.bar{position:sticky;top:0;background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,0));backdrop-filter:blur(8px);border-bottom:1px solid var(--border);z-index:10}
|
||
|
|
.bar__inner{display:flex;align-items:center;gap:12px;justify-content:space-between}
|
||
|
|
.brand{font-weight:700}
|
||
|
|
|
||
|
|
.btn{background:transparent;border:1px solid var(--border);color:var(--text);padding:8px 10px;border-radius:999px;cursor:pointer}
|
||
|
|
|
||
|
|
/* ---- Layout ---- */
|
||
|
|
.layout{display:grid;grid-template-columns:240px 1fr;gap:16px}
|
||
|
|
@media (max-width: 820px){
|
||
|
|
.layout{grid-template-columns:1fr}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ---- Vertical nav ---- */
|
||
|
|
.sidenav{border:1px solid var(--border);border-radius:var(--br);padding:10px;background:var(--card);box-shadow:var(--shadow);position:sticky;top:70px;height:fit-content}
|
||
|
|
.sidenav .navlist{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
|
||
|
|
.sidenav .navlist button{width:100%;text-align:left;background:transparent;border:1px solid var(--border);color:var(--text);padding:10px;border-radius:10px;cursor:pointer}
|
||
|
|
.sidenav .navlist button[aria-current="page"]{border-color:var(--accent2);box-shadow:0 0 0 2px color-mix(in srgb, var(--accent2) 25%, transparent) inset}
|
||
|
|
|
||
|
|
.sidenav .navlist a{
|
||
|
|
display:block; text-decoration:none;
|
||
|
|
background:transparent; border:1px solid var(--border);
|
||
|
|
color:var(--text); padding:10px; border-radius:10px;
|
||
|
|
}
|
||
|
|
.sidenav .navlist a[aria-current="page"]{
|
||
|
|
border-color:var(--accent2);
|
||
|
|
box-shadow:0 0 0 2px color-mix(in srgb, var(--accent2) 25%, transparent) inset;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Select Lite (themed, accessible, tiny) */
|
||
|
|
.select-lite{ position:relative; }
|
||
|
|
.select-lite > select{
|
||
|
|
position:absolute; inset:auto auto auto auto; /* keep in DOM but invisible */
|
||
|
|
opacity:0; pointer-events:none; width:0; height:0;
|
||
|
|
}
|
||
|
|
.select-lite__button{
|
||
|
|
width:100%;
|
||
|
|
text-align:left;
|
||
|
|
background:var(--card);
|
||
|
|
color:var(--text);
|
||
|
|
border:1px solid var(--border);
|
||
|
|
border-radius:10px;
|
||
|
|
padding:10px 2.25rem 10px 10px;
|
||
|
|
cursor:pointer;
|
||
|
|
background-image: var(--select-arrow, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E"));
|
||
|
|
background-repeat:no-repeat; background-position:right 10px center; background-size:12px auto;
|
||
|
|
}
|
||
|
|
.select-lite__button:focus{
|
||
|
|
outline:none;
|
||
|
|
border-color:var(--accent2);
|
||
|
|
box-shadow:0 0 0 2px color-mix(in srgb, var(--accent2) 25%, transparent);
|
||
|
|
}
|
||
|
|
.select-lite__menu{
|
||
|
|
position:absolute; z-index:1000;
|
||
|
|
top:calc(100% + 6px); left:0; right:0;
|
||
|
|
background:var(--card);
|
||
|
|
color:var(--text);
|
||
|
|
border:1px solid var(--border);
|
||
|
|
border-radius:10px;
|
||
|
|
box-shadow:var(--shadow);
|
||
|
|
max-height:260px; overflow:auto; padding:6px;
|
||
|
|
}
|
||
|
|
.select-lite__option{
|
||
|
|
padding:8px 10px; border-radius:8px; outline:none;
|
||
|
|
}
|
||
|
|
.select-lite__option[aria-selected="true"],
|
||
|
|
.select-lite__option:hover,
|
||
|
|
.select-lite__option:focus{ background:var(--accent); color:white; }
|
||
|
|
|
||
|
|
.select-lite__option.search-match {
|
||
|
|
background: var(--accent) !important;
|
||
|
|
color: white !important;
|
||
|
|
font-weight: bold !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* ---- Main content ---- */
|
||
|
|
.content{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--gap)}
|
||
|
|
.card{background:var(--card);padding:14px;border-radius:var(--br);box-shadow:var(--shadow);border:1px solid var(--border)}
|
||
|
|
.card h2{margin:0 0 6px 0;font-size:18px}
|
||
|
|
.muted{color:var(--muted);font-size:14px}
|
||
|
|
label{display:block;margin-top:10px;margin-bottom:4px;color:var(--muted);font-size:14px}
|
||
|
|
input,select,textarea{width:100%;background:transparent;color:var(--text);border:1px solid var(--border);border-radius:10px;padding:10px}
|
||
|
|
.result{margin-top:12px;padding:10px;border:1px dashed var(--k-border);border-radius:10px;background:var(--k-bg)}
|
||
|
|
.k{padding:2px 6px;border-radius:6px;border:1px solid var(--k-border);background:var(--k-bg)}
|
||
|
|
.foot{color:var(--muted);font-size:13px;margin-top:20px}
|
||
|
|
|
||
|
|
/* ---- Status indicators ---- */
|
||
|
|
.status {
|
||
|
|
padding: 8px 12px;
|
||
|
|
border-radius: 8px;
|
||
|
|
font-size: 14px;
|
||
|
|
margin-top: 8px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.status.loading {
|
||
|
|
background-color: var(--k-bg);
|
||
|
|
color: var(--accent);
|
||
|
|
border: 1px solid var(--k-border);
|
||
|
|
}
|
||
|
|
|
||
|
|
.status.success {
|
||
|
|
background-color: #f0fdf4;
|
||
|
|
color: #166534;
|
||
|
|
border: 1px solid #bbf7d0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.status.error {
|
||
|
|
background-color: #fef2f2;
|
||
|
|
color: #991b1b;
|
||
|
|
border: 1px solid #fecaca;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Dark theme status adjustments */
|
||
|
|
@media (prefers-color-scheme: dark) {
|
||
|
|
.status.success {
|
||
|
|
background-color: #064e3b;
|
||
|
|
color: #6ee7b7;
|
||
|
|
border: 1px solid #065f46;
|
||
|
|
}
|
||
|
|
|
||
|
|
.status.error {
|
||
|
|
background-color: #450a0a;
|
||
|
|
color: #fca5a5;
|
||
|
|
border: 1px solid #7f1d1d;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
:root[data-theme="dark"] .status.success {
|
||
|
|
background-color: #064e3b;
|
||
|
|
color: #6ee7b7;
|
||
|
|
border: 1px solid #065f46;
|
||
|
|
}
|
||
|
|
|
||
|
|
:root[data-theme="dark"] .status.error {
|
||
|
|
background-color: #450a0a;
|
||
|
|
color: #fca5a5;
|
||
|
|
border: 1px solid #7f1d1d;
|
||
|
|
}
|
||
|
|
|