mirror of
https://github.com/PR0M3TH3AN/bitvid.git
synced 2026-11-02 02:42:28 +00:00
Fix video modal secondary column sizing
This commit is contained in:
1 parent
5e99c3d3b9
commit
17115d6e15
3 files changed
+33
-24
No files matched your search
+30
-22
@@ -1669,38 +1669,46 @@
|
||||
}
|
||||
|
||||
.video-modal__layout {
|
||||
--video-modal-primary-columns: minmax(0, 1.2fr);
|
||||
--video-modal-secondary-columns: minmax(
|
||||
clamp(var(--space-4xl), 28vw, var(--space-7xl)),
|
||||
1fr
|
||||
--video-modal-secondary-size: clamp(
|
||||
var(--video-modal-secondary-min),
|
||||
38vw,
|
||||
var(--video-modal-secondary-max)
|
||||
);
|
||||
@apply grid items-start gap-6 lg:gap-8;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
@media (min-width: theme('screens.lg')) {
|
||||
.video-modal__layout {
|
||||
--video-modal-secondary-size: clamp(
|
||||
var(--video-modal-secondary-min),
|
||||
32vw,
|
||||
var(--video-modal-secondary-max)
|
||||
);
|
||||
grid-template-columns:
|
||||
minmax(0, var(--video-modal-primary-fr, 1.65fr))
|
||||
minmax(
|
||||
var(--video-modal-secondary-min),
|
||||
var(--video-modal-secondary-size)
|
||||
);
|
||||
}
|
||||
|
||||
.video-modal__primary,
|
||||
.video-modal__secondary {
|
||||
min-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: theme('screens.xl')) {
|
||||
.video-modal__layout {
|
||||
--video-modal-primary-columns: minmax(0, 1.4fr);
|
||||
--video-modal-secondary-columns: minmax(
|
||||
clamp(var(--space-5xl), 30vw, var(--space-8xl)),
|
||||
1fr
|
||||
--video-modal-secondary-size: clamp(
|
||||
var(--video-modal-secondary-min),
|
||||
28vw,
|
||||
var(--video-modal-secondary-max)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: theme('screens.lg')) {
|
||||
.video-modal__layout {
|
||||
grid-template-columns: var(--video-modal-primary-columns)
|
||||
var(--video-modal-secondary-columns);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: theme('screens.lg')) {
|
||||
.video-modal__primary,
|
||||
.video-modal__secondary {
|
||||
min-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.revert-modal__layout {
|
||||
@apply grid gap-6;
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user