mirror of
https://github.com/Cleanuparr/Cleanuparr.git
synced 2026-03-29 03:21:32 -04:00
77 lines
1.6 KiB
SCSS
77 lines
1.6 KiB
SCSS
// Cleanuparr v2 - Global Styles Entry Point
|
|
|
|
@use 'styles/tokens';
|
|
@use 'styles/themes';
|
|
@use 'styles/reset';
|
|
@use 'styles/typography';
|
|
@use 'styles/scrollbar';
|
|
@use 'styles/animations';
|
|
|
|
// Skeleton loading utility - add class="skeleton" to any element
|
|
.skeleton {
|
|
background: linear-gradient(
|
|
90deg,
|
|
var(--glass-bg) 0px,
|
|
rgba(126, 87, 194, 0.08) 30px,
|
|
rgba(59, 130, 246, 0.06) 50px,
|
|
var(--glass-bg-hover) 70px,
|
|
var(--glass-bg) 100px
|
|
);
|
|
background-size: 250px 100%;
|
|
animation: shimmer 1.5s ease-in-out infinite;
|
|
border-radius: var(--radius-md);
|
|
color: transparent !important;
|
|
pointer-events: none;
|
|
user-select: none;
|
|
|
|
* { visibility: hidden; }
|
|
|
|
&--text {
|
|
height: 14px;
|
|
width: 60%;
|
|
}
|
|
|
|
&--title {
|
|
height: 20px;
|
|
width: 40%;
|
|
}
|
|
|
|
&--input {
|
|
height: 38px;
|
|
width: 100%;
|
|
max-width: 400px;
|
|
}
|
|
|
|
&--badge {
|
|
height: 24px;
|
|
width: 80px;
|
|
border-radius: var(--radius-full);
|
|
}
|
|
}
|
|
|
|
// Shared field help button (used across all form components)
|
|
.field-help-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 50%;
|
|
border: 1px solid var(--input-border);
|
|
background: var(--input-bg);
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
margin-left: var(--space-1);
|
|
padding: 0;
|
|
transition: color var(--duration-fast) var(--ease-default),
|
|
border-color var(--duration-fast) var(--ease-default),
|
|
background var(--duration-fast) var(--ease-default);
|
|
vertical-align: middle;
|
|
|
|
&:hover {
|
|
color: var(--color-primary);
|
|
border-color: var(--color-primary);
|
|
background: var(--color-primary-subtle);
|
|
}
|
|
}
|