Something went wrong. Try again.
a a vibe-coded abomination experiment of a fragrance review platform built on the atmosphere. drydown.social
Something went wrong. Try again.
2.5 kB · 134 lines
CSS
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135/* Button Component - Standardized button styles */
/* Base button styles */.btn { display: inline-block; font-family: inherit; font-weight: 500; text-align: center; text-decoration: none; text-transform: lowercase; cursor: pointer; border: none; transition: all 0.2s ease; line-height: 1.5;}
.btn:focus-visible { outline: 2px solid var(--status-ready); outline-offset: 2px;}
/* Size variants */.btn--sm { padding: 0.5rem 0.75rem; font-size: 0.875rem; border-radius: 6px;}
.btn--md { padding: 0.75rem 1rem; font-size: 1rem; border-radius: 8px;}
.btn--lg { padding: 1rem 1.25rem; font-size: 1.125rem; border-radius: 8px;}
/* Emphasis variants */
/* Strong (default) - Dark background, white text */.btn--strong { color: #ffffff; background: #2e2e2e; border: none;}
.btn--strong:hover:not(:disabled):not([aria-disabled="true"]) { background: #1a1a1a;}
@media (prefers-color-scheme: dark) { .btn--strong { background: #404040; color: #ffffff; }
.btn--strong:hover:not(:disabled):not([aria-disabled="true"]) { background: #525252; }}
/* Brand - Blue background, white text */.btn--brand { color: #ffffff; background: #0085ff; border: none;}
.btn--brand:hover:not(:disabled):not([aria-disabled="true"]) { background: #0070dd;}
/* Muted - Transparent background, bordered */.btn--muted { color: var(--text-secondary); background: transparent; border: 1px solid var(--border-color); font-weight: 400;}
.btn--muted:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--card-bg); border-color: var(--text-color); color: var(--text-color);}
/* Ghost - Transparent, no border, text only */.btn--ghost { color: var(--text-color); background: transparent; border: none; font-weight: 400;}
.btn--ghost:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--card-bg); color: var(--text-color);}
/* Disabled state */.btn:disabled,.btn[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed;}
.btn--muted:disabled,.btn--muted[aria-disabled="true"] { opacity: 0.4;}
/* Special modifiers */
/* Danger variant (for delete buttons) */.btn--danger { color: #cc0000 !important;}
.btn--danger:hover:not(:disabled):not([aria-disabled="true"]) { background: #ffeeee !important;}
@media (prefers-color-scheme: dark) { .btn--danger { color: #ff6666 !important; }
.btn--danger:hover:not(:disabled):not([aria-disabled="true"]) { background: #4a1f1f !important; }}