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

style(css): backfill utility classes used across templates

Browse Source
This commit is contained in:
hehihoho3@gmail.com 2026-05-31 00:45:05 +09:00
parent 7f2227133d
commit 390037efe2
1 changed files with 99 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -85,6 +85,105 @@ ul {
padding: 1.5rem;
}
/* ===== Utility backfill (classes already used in templates, previously undefined) ===== */
/* Spacing — padding */
.p-0 { padding: 0; }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-8 { padding: var(--space-8); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.pr-4 { padding-right: var(--space-4); }
/* Spacing — margin */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-6 { margin-bottom: var(--space-6); }
.ml-2 { margin-left: var(--space-2); }
/* Spacing — gap */
.gap-1 { gap: var(--space-1); }
.gap-3 { gap: var(--space-3); }
/* Fl/grid helpers */
.flex-wrap { flex-wrap: wrap; }
.flex-shrink-0 { flex-shrink: 0; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.items-start { align-items: flex-start; }
.block { display: block; }
.hidden { display: none; }
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0 { inset: 0; }
.top-4 { top: var(--space-4); }
.left-4 { left: var(--space-4); }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.w-6 { width: 1.5rem; }
.h-6 { height: 1.5rem; }
.h-full { height: 100%; }
.rounded-lg { border-radius: var(--radius-md); }
.opacity-0 { opacity: 0; }
.cursor-pointer { cursor: pointer; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-center { text-align: center; }
/* Typography */
.text-xs { font-size: 0.75rem; }
.text-2xl { font-size: 1.875rem; font-weight: 700; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-normal { font-weight: 400; }
/* Colors */
.text-white { color: #fff; }
.text-secondary { color: var(--text-secondary); }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.text-blue-400 { color: #60a5fa; }
.text-cyan-400 { color: #22d3ee; }
.text-pink-400 { color: #f472b6; }
.text-purple-400 { color: #c084fc; }
.text-orange-400 { color: #fb923c; }
.text-yellow-400 { color: #facc15; }
.text-emerald-400 { color: #34d399; }
/* Transitions */
.transition-colors { transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; }
.transition-opacity { transition: opacity 0.2s ease; }
.transition-all { transition: all 0.2s ease; }
/* Hover utilities (escaped selectors) */
.hover\:text-white:hover { color: #fff; }
.hover\:underline:hover { text-decoration: underline; }
.hover\:text-\[var\(--primary\)\]:hover { color: var(--primary); }
.hover\:border-\[var\(--primary\)\]:hover { border-color: var(--primary); }
.border-\[var\(--glass-border\)\] { border: 1px solid var(--glass-border); }
.hover\:bg-blue-400\/10:hover { background: rgba(96, 165, 250, 0.1); }
.hover\:bg-cyan-400\/10:hover { background: rgba(34, 211, 238, 0.1); }
.hover\:bg-pink-400\/10:hover { background: rgba(244, 114, 182, 0.1); }
.hover\:bg-purple-400\/10:hover { background: rgba(192, 132, 252, 0.1); }
.hover\:bg-orange-400\/10:hover { background: rgba(251, 146, 60, 0.1); }
.hover\:bg-emerald-400\/10:hover { background: rgba(52, 211, 153, 0.1); }
.hover\:bg-yellow-400\/10:hover { background: rgba(250, 204, 21, 0.1); }
/* Group hover reveal */
.group:hover .group-hover\:opacity-100 { opacity: 1; }
/* Spin animation */
@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin { animation: spin 1s linear infinite; }
@media (prefers-reduced-motion: reduce) {
.animate-spin { animation: none; }
}
/* Components */
/* GLASS CARD */