mirror of
https://github.com/Cleanuparr/Cleanuparr.git
synced 2026-09-18 00:31:06 -04:00
105 lines
2.5 KiB
SCSS
105 lines
2.5 KiB
SCSS
// Cleanuparr v2 - Global Styles Entry Point
|
|
|
|
@use 'styles/tokens';
|
|
@use 'styles/themes';
|
|
@use 'styles/accents';
|
|
@use 'styles/reset';
|
|
@use 'styles/typography';
|
|
@use 'styles/scrollbar';
|
|
@use 'styles/animations';
|
|
|
|
// Full-width toggle
|
|
:root[data-full-width="true"] .shell__content-inner {
|
|
max-width: none;
|
|
}
|
|
|
|
// Skeleton loading utility - add class="skeleton" to any element
|
|
.skeleton {
|
|
background: linear-gradient(
|
|
90deg,
|
|
var(--glass-bg) 0px,
|
|
rgba(var(--accent-rgb), 0.08) 30px,
|
|
rgba(var(--accent-rgb), 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);
|
|
}
|
|
}
|
|
|
|
// CDK overlay: pin the overlay container to the app's modal layer so toasts and
|
|
// tooltips keep their prior stacking above open drawers (prebuilt CSS defaults to 1000).
|
|
.cdk-overlay-container {
|
|
z-index: var(--z-modal);
|
|
}
|
|
|
|
// Drawer backdrop — CDK renders the backdrop element outside the drawer component,
|
|
// so it can't be styled from the component stylesheet.
|
|
.drawer-backdrop {
|
|
background: rgba(0, 0, 0, 0.6);
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
|
|
// Modal footer content is projected via [modal-footer] into the modal's footer slot,
|
|
// so the wrapper element lives under the consumer's view encapsulation and the modal component stylesheet can't reach it. Lay its buttons out here.
|
|
[modal-footer] {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: var(--space-3);
|
|
}
|