mirror of
https://github.com/Cleanuparr/Cleanuparr.git
synced 2026-10-28 18:58:59 -04:00
63 lines
1.8 KiB
SCSS
63 lines
1.8 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;
|
|
}
|
|
|
|
// 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);
|
|
}
|