mirror of
https://github.com/euzu/tuliprox.git
synced 2026-10-17 05:12:34 +02:00
33ed942c16
* feat(update): add per-input actions and pipeline transparency Squash feature/cluster-update-quality onto upstream/develop. Include request-local update policies, persisted input and cluster status, library rescan and target rebuild integration, and the update-card view. Align the M3U request regression with the existing Force capability. * del(build): temporary dev changes * fix(update): address playlist review findings * fix(update): rename Shows to Series * Playlist update refactor * Playlist update refactor --------- Co-authored-by: euzu <euzu@proton.me>
120 lines
2.5 KiB
SCSS
120 lines
2.5 KiB
SCSS
@use '../../size';
|
|
.tp__custom-dialog-backdrop {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
background-color: var(--custom-dialog-backdrop-color);
|
|
z-index: var(--z-index-overlay);
|
|
animation: fadeIn 0.2s ease-out;
|
|
}
|
|
|
|
.tp__custom-dialog-modal {
|
|
padding-top: clamp(0vh, 15vh, 30vh);
|
|
}
|
|
|
|
.tp__custom-dialog {
|
|
--dialog-padding: var(--padding-default);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
|
|
color: var(--text-color);
|
|
background-color: var(--card-background-color);
|
|
box-shadow: var(--popup-shadow);
|
|
backdrop-filter: blur(6px);
|
|
-webkit-backdrop-filter: blur(6px);
|
|
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius);
|
|
|
|
max-width: 90%;
|
|
max-height: 90%;
|
|
width: auto;
|
|
animation: slideIn 0.2s ease-out;
|
|
|
|
&.tp__confirm-dialog {
|
|
--dialog-padding: var(--padding-default);
|
|
|
|
min-width: min(size.$confirm-dialog-min-width, 90vw);
|
|
max-width: min(size.$confirm-dialog-max-width, 90vw);
|
|
max-height: 80vh;
|
|
box-sizing: border-box;
|
|
padding: var(--dialog-padding);
|
|
gap: var(--gap-large);
|
|
border-radius: var(--border-radius);
|
|
|
|
@media (max-width: size.$mobile-breakpoint) {
|
|
--dialog-padding: var(--padding-larger);
|
|
}
|
|
|
|
.tp__confirm-dialog__message {
|
|
margin: 0;
|
|
min-height: 0;
|
|
font-size: var(--font-size-norm);
|
|
line-height: 1.5;
|
|
white-space: pre-wrap;
|
|
overflow-wrap: anywhere;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.tp__dialog__toolbar {
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
|
|
&.tp__content-dialog {
|
|
min-width: size.$content-dialog-min-width;
|
|
max-width: size.$content-dialog-max-width;
|
|
padding: var(--dialog-padding);
|
|
border-radius: var(--border-radius);
|
|
}
|
|
}
|
|
|
|
/* Animation for dialog appearance */
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from {
|
|
transform: translateY(-20px);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Ensure the dialog toolbar styles work with our custom dialog */
|
|
.tp__dialog__toolbar {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
border-top: 1px solid var(--border-color);
|
|
padding-top: var(--dialog-padding, var(--padding-small));
|
|
gap: var(--gap-default);
|
|
|
|
&-left {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
gap: var(--gap-default);
|
|
flex: 1;
|
|
}
|
|
|
|
&-right {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: var(--gap-default);
|
|
}
|
|
}
|