29 lines
1.4 KiB
CSS
29 lines
1.4 KiB
CSS
:root {
|
|
--brand: #5b7cfa;
|
|
--brand-2: #7b5bfa;
|
|
--radius: 14px;
|
|
--radius-sm: 10px;
|
|
--shadow: 0 6px 20px rgba(0,0,0,0.06);
|
|
}
|
|
|
|
body { background: #f8fafc; }
|
|
.container { max-width: 1100px; }
|
|
.navbar { border-radius: var(--radius); box-shadow: var(--shadow); }
|
|
.nav-menu a { padding: 8px 14px; border-radius: 999px; }
|
|
.nav-menu a:hover { background: #f1f5ff; }
|
|
.nav-user { display:flex; align-items:center; gap:12px; }
|
|
.avatar { width: 32px; height: 32px; border-radius: 50%; background: #e5e7eb; display:inline-flex; align-items:center; justify-content:center; font-weight:600; color:#4b5563; }
|
|
.card { border: 0; border-radius: var(--radius); box-shadow: var(--shadow); }
|
|
.btn { border-radius: var(--radius-sm); }
|
|
.form-control, .form-select, textarea { border-radius: var(--radius-sm); }
|
|
.badge, .alert { border-radius: var(--radius-sm); }
|
|
|
|
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
|
|
.photo-thumb { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); }
|
|
.exif-tag { display: inline-block; background: #eef2ff; color: #334155; padding: 4px 10px; margin: 4px 6px 0 0; border-radius: 999px; font-size: 12px; }
|
|
.comment-bubble { background: #ffffff; border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow); }
|
|
|
|
.brand { color: var(--brand); }
|
|
.btn-brand { background: var(--brand); color: #fff; }
|
|
.btn-brand:hover { background: var(--brand-2); color: #fff; }
|