hehihoho3/h-lab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(css): refine shared components (buttons, badge, bar, forms, table, skeleton)

Browse Source
This commit is contained in:
hehihoho3@gmail.com 2026-05-31 00:48:14 +09:00
parent 390037efe2
commit 5ec04eaa60
1 changed files with 114 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
src/main/resources/static/css/style.css
View File

@ -241,6 +241,28 @@ ul {
border-color: var(--glass-border); border-color: var(--glass-border);
} }
.btn-secondary {
background: rgba(255, 255, 255, 0.06);
color: var(--text-primary);
border: 1px solid var(--glass-border);
}
.btn-secondary:hover {
background: rgba(255, 255, 255, 0.1);
border-color: var(--glass-highlight);
transform: translateY(-1px);
}
.btn-outline {
background: transparent;
color: var(--text-secondary);
border: 1px solid var(--glass-border);
}
.btn-outline:hover {
color: var(--text-primary);
border-color: var(--primary);
}
/* SIDEBAR SPECIFIC */ /* SIDEBAR SPECIFIC */
:root { :root {
@ -631,3 +653,94 @@ body.sidebar-collapsed #mainContent {
/* Customize Rank appearance to look like a badge */ /* Customize Rank appearance to look like a badge */
} }
/* ===== Shared components (added) ===== */
/* Progress bar (dashboard funnel, distributions, …) */
.bar-track {
flex: 1;
height: 8px;
background: rgba(255, 255, 255, 0.06);
border-radius: var(--radius-full);
overflow: hidden;
}
.bar-fill {
height: 100%;
border-radius: var(--radius-full);
transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
.bar-fill { transition: none; }
}
/* Badge */
.badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.7rem;
font-weight: 600;
padding: 2px 8px;
border-radius: var(--radius-full);
border: 1px solid transparent;
line-height: 1.4;
}
.badge-muted { background: rgba(255,255,255,0.06); color: var(--text-secondary); }
.badge-primary { background: rgba(var(--primary-rgb), 0.15); color: var(--primary); }
.badge-success { background: rgba(var(--success-rgb), 0.15); color: var(--success); }
.badge-warning { background: rgba(245, 158, 11, 0.15); color: var(--warning); }
.badge-danger { background: rgba(var(--danger-rgb), 0.15); color: var(--danger); }
/* Skeleton shimmer */
.skeleton {
position: relative;
overflow: hidden;
background: rgba(255, 255, 255, 0.05);
border-radius: var(--radius-md);
}
.skeleton::after {
content: "";
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
animation: skeleton-shimmer 1.4s infinite;
}
@keyframes skeleton-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
.skeleton::after { animation: none; }
}
/* Dark form controls (unify select/input across pages) */
select, input[type="text"], input[type="search"], input[type="number"], input[type="date"], input[type="datetime-local"], textarea {
background: rgba(255, 255, 255, 0.04);
color: var(--text-primary);
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
padding: 0.5rem 0.75rem;
font-family: inherit;
font-size: 0.875rem;
transition: border-color 0.2s ease, background 0.2s ease;
}
select:focus, input:focus, textarea:focus {
outline: none;
border-color: var(--primary);
background: rgba(255, 255, 255, 0.06);
}
select option { background: #0f172a; color: var(--text-primary); }
/* Table polish */
table { width: 100%; border-collapse: collapse; }
thead th {
text-align: left;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-muted);
padding: 0.6rem 0.75rem;
border-bottom: 1px solid var(--glass-border);
}
tbody td { padding: 0.6rem 0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
tbody tr { transition: background 0.15s ease; }
tbody tr:hover { background: rgba(255, 255, 255, 0.03); }