124 lines
2.4 KiB
CSS
124 lines
2.4 KiB
CSS
/**
|
|
* AniWorld - Button Styles
|
|
*
|
|
* All button-related styles including variants,
|
|
* states, and sizes.
|
|
*/
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--spacing-xs);
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
border: 1px solid transparent;
|
|
border-radius: var(--border-radius-md);
|
|
font-size: var(--font-size-body);
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
transition: all var(--transition-duration) var(--transition-easing);
|
|
background-color: transparent;
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.btn:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Primary button */
|
|
.btn-primary {
|
|
background-color: var(--color-accent);
|
|
color: white;
|
|
}
|
|
|
|
.btn-primary:hover:not(:disabled) {
|
|
background-color: var(--color-accent-hover);
|
|
}
|
|
|
|
.btn-primary:active {
|
|
background-color: var(--color-accent-pressed);
|
|
}
|
|
|
|
/* Secondary button */
|
|
.btn-secondary {
|
|
background-color: var(--color-surface);
|
|
border-color: var(--color-border);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.btn-secondary:hover:not(:disabled) {
|
|
background-color: var(--color-surface-hover);
|
|
}
|
|
|
|
/* Success button */
|
|
.btn-success {
|
|
background-color: var(--color-success);
|
|
color: white;
|
|
}
|
|
|
|
.btn-success:hover:not(:disabled) {
|
|
background-color: #0e6b0e;
|
|
}
|
|
|
|
/* Warning button */
|
|
.btn-warning {
|
|
background-color: var(--color-warning);
|
|
color: white;
|
|
}
|
|
|
|
.btn-warning:hover:not(:disabled) {
|
|
background-color: #e67e00;
|
|
}
|
|
|
|
/* Danger/Error button */
|
|
.btn-danger {
|
|
background-color: var(--color-error);
|
|
color: white;
|
|
}
|
|
|
|
.btn-danger:hover:not(:disabled) {
|
|
background-color: #b52d30;
|
|
}
|
|
|
|
/* Icon button */
|
|
.btn-icon {
|
|
padding: var(--spacing-sm);
|
|
min-width: auto;
|
|
}
|
|
|
|
/* Small button */
|
|
.btn-small {
|
|
padding: var(--spacing-xs) var(--spacing-sm);
|
|
font-size: var(--font-size-caption);
|
|
}
|
|
|
|
/* Extra small button */
|
|
.btn-xs {
|
|
padding: 2px 6px;
|
|
font-size: 0.75em;
|
|
}
|
|
|
|
/* Filter button active state */
|
|
.series-filters .btn {
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.series-filters .btn[data-active="true"] {
|
|
background-color: var(--color-primary);
|
|
color: white;
|
|
border-color: var(--color-primary);
|
|
transform: scale(1.02);
|
|
box-shadow: 0 2px 8px rgba(0, 120, 212, 0.3);
|
|
}
|
|
|
|
.series-filters .btn[data-active="true"]:hover {
|
|
background-color: var(--color-primary-dark);
|
|
}
|
|
|
|
/* Dark theme adjustments */
|
|
[data-theme="dark"] .series-filters .btn[data-active="true"] {
|
|
background-color: var(--color-primary);
|
|
color: white;
|
|
}
|