thePR0M3TH3AN/bitvid
1
0 Fork 0
mirror of https://github.com/PR0M3TH3AN/bitvid.git synced 2026-10-27 16:02:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor floating panel positioning tokens

Browse Source
This commit is contained in:
thePR0M3TH3AN committed 2025-10-14 07:48:58 -04:00
1 parent d44e327d42
commit 8e4e9c270e
4 files changed
+149 -75
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

css/tailwind.source.css
+75
View File
@@ -160,6 +160,81 @@
@apply font-mono;
}
[data-floating-panel] {
--floating-transform-origin-inline: 50%;
--floating-transform-origin-block: 50%;
--floating-fallback-top: auto;
--floating-fallback-left: auto;
position: fixed;
inset: auto;
transform-origin: var(--floating-transform-origin-inline)
var(--floating-transform-origin-block);
}
[data-floating-panel][data-floating-strategy="absolute"] {
position: absolute;
}
[data-floating-panel] {
top: var(--floating-fallback-top);
left: var(--floating-fallback-left);
right: auto;
bottom: auto;
}
[data-floating-panel][data-floating-placement="top"] {
--floating-transform-origin-block: 100%;
}
[data-floating-panel][data-floating-placement="bottom"] {
--floating-transform-origin-block: 0%;
}
[data-floating-panel][data-floating-placement="left"] {
--floating-transform-origin-inline: 100%;
}
[data-floating-panel][data-floating-placement="right"] {
--floating-transform-origin-inline: 0%;
}
[data-floating-panel][data-floating-placement="top"][data-floating-alignment="start"],
[data-floating-panel][data-floating-placement="bottom"][data-floating-alignment="start"],
[data-floating-panel][data-floating-placement="top"][data-floating-alignment="end"],
[data-floating-panel][data-floating-placement="bottom"][data-floating-alignment="end"] {
--floating-transform-origin-inline: 50%;
}
[data-floating-panel][data-floating-dir="ltr"][data-floating-placement="top"][data-floating-alignment="start"],
[data-floating-panel][data-floating-dir="ltr"][data-floating-placement="bottom"][data-floating-alignment="start"] {
--floating-transform-origin-inline: 0%;
}
[data-floating-panel][data-floating-dir="ltr"][data-floating-placement="top"][data-floating-alignment="end"],
[data-floating-panel][data-floating-dir="ltr"][data-floating-placement="bottom"][data-floating-alignment="end"] {
--floating-transform-origin-inline: 100%;
}
[data-floating-panel][data-floating-dir="rtl"][data-floating-placement="top"][data-floating-alignment="start"],
[data-floating-panel][data-floating-dir="rtl"][data-floating-placement="bottom"][data-floating-alignment="start"] {
--floating-transform-origin-inline: 100%;
}
[data-floating-panel][data-floating-dir="rtl"][data-floating-placement="top"][data-floating-alignment="end"],
[data-floating-panel][data-floating-dir="rtl"][data-floating-placement="bottom"][data-floating-alignment="end"] {
--floating-transform-origin-inline: 0%;
}
[data-floating-panel][data-floating-placement="left"][data-floating-alignment="start"],
[data-floating-panel][data-floating-placement="right"][data-floating-alignment="start"] {
--floating-transform-origin-block: 0%;
}
[data-floating-panel][data-floating-placement="left"][data-floating-alignment="end"],
[data-floating-panel][data-floating-placement="right"][data-floating-alignment="end"] {
--floating-transform-origin-block: 100%;
}
.popover {
@apply relative inline-flex;
}