feat: Implement PWA support, responsive drawer layout, and custom context menu
This commit is contained in:
spinline
@@ -192,6 +192,96 @@
|
||||
}
|
||||
}
|
||||
@layer utilities {
|
||||
.drawer-side {
|
||||
:where(&) {
|
||||
@layer daisyui.l1.l2.l3 {
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
}
|
||||
@layer daisyui.l1.l2.l3 {
|
||||
pointer-events: none;
|
||||
visibility: hidden;
|
||||
position: fixed;
|
||||
inset-inline-start: calc(0.25rem * 0);
|
||||
top: calc(0.25rem * 0);
|
||||
z-index: 10;
|
||||
grid-column-start: 1;
|
||||
grid-row-start: 1;
|
||||
display: grid;
|
||||
width: 100%;
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
grid-template-rows: repeat(1, minmax(0, 1fr));
|
||||
align-items: flex-start;
|
||||
justify-items: start;
|
||||
overscroll-behavior: contain;
|
||||
background-color: transparent;
|
||||
opacity: 0%;
|
||||
transition: opacity 0.2s ease-out 0.1s allow-discrete, visibility 0.3s ease-out 0.1s allow-discrete;
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
> .drawer-overlay {
|
||||
position: sticky;
|
||||
top: calc(0.25rem * 0);
|
||||
cursor: pointer;
|
||||
place-self: stretch;
|
||||
background-color: oklch(0% 0 0 / 40%);
|
||||
}
|
||||
> * {
|
||||
grid-column-start: 1;
|
||||
grid-row-start: 1;
|
||||
}
|
||||
> *:not(.drawer-overlay) {
|
||||
will-change: transform;
|
||||
transition: translate 0.3s ease-out, width 0.2s ease-out;
|
||||
translate: -100%;
|
||||
[dir="rtl"] & {
|
||||
translate: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.drawer-toggle {
|
||||
@layer daisyui.l1.l2.l3 {
|
||||
position: fixed;
|
||||
height: calc(0.25rem * 0);
|
||||
width: calc(0.25rem * 0);
|
||||
appearance: none;
|
||||
opacity: 0%;
|
||||
}
|
||||
@layer daisyui.l1.l2 {
|
||||
:where(&:checked ~ .drawer-side) {
|
||||
scrollbar-color: currentColor oklch(0 0 0 / calc(var(--page-has-backdrop, 0) * 0.4));
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
scrollbar-color: color-mix(in oklch, currentColor 35%, #0000) oklch(0 0 0 / calc(var(--page-has-backdrop, 0) * 0.4));
|
||||
}
|
||||
}
|
||||
:where(:root:has(&:checked)) {
|
||||
--page-has-backdrop: 1;
|
||||
--page-overflow: hidden;
|
||||
--page-scroll-bg: var(--page-scroll-bg-on);
|
||||
--page-scroll-gutter: stable;
|
||||
--page-scroll-transition: var(--page-scroll-transition-on);
|
||||
animation: set-page-has-scroll forwards;
|
||||
animation-timeline: scroll();
|
||||
}
|
||||
}
|
||||
@layer daisyui.l1.l2 {
|
||||
:where(&:checked ~ .drawer-side) {
|
||||
pointer-events: auto;
|
||||
visibility: visible;
|
||||
overflow-y: auto;
|
||||
opacity: 100%;
|
||||
& > *:not(.drawer-overlay) {
|
||||
translate: 0%;
|
||||
}
|
||||
}
|
||||
&:focus-visible ~ .drawer-content label.drawer-button {
|
||||
outline: 2px solid;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.menu {
|
||||
@layer daisyui.l1.l2.l3 {
|
||||
display: flex;
|
||||
@@ -781,6 +871,14 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.drawer {
|
||||
@layer daisyui.l1.l2.l3 {
|
||||
position: relative;
|
||||
display: grid;
|
||||
width: 100%;
|
||||
grid-auto-columns: max-content auto;
|
||||
}
|
||||
}
|
||||
.progress {
|
||||
@layer daisyui.l1.l2.l3 {
|
||||
position: relative;
|
||||
@@ -831,24 +929,34 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.absolute {
|
||||
position: absolute;
|
||||
}
|
||||
.fixed {
|
||||
position: fixed;
|
||||
}
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
.static {
|
||||
position: static;
|
||||
}
|
||||
.inset-0 {
|
||||
inset: calc(var(--spacing) * 0);
|
||||
}
|
||||
.z-40 {
|
||||
z-index: 40;
|
||||
}
|
||||
.z-\[100\] {
|
||||
z-index: 100;
|
||||
}
|
||||
.z-\[200\] {
|
||||
z-index: 200;
|
||||
}
|
||||
.drawer-content {
|
||||
@layer daisyui.l1.l2.l3 {
|
||||
grid-column-start: 2;
|
||||
grid-row-start: 1;
|
||||
min-width: calc(0.25rem * 0);
|
||||
}
|
||||
}
|
||||
.filter {
|
||||
@layer daisyui.l1.l2.l3 {
|
||||
display: flex;
|
||||
@@ -909,6 +1017,45 @@
|
||||
.my-1 {
|
||||
margin-block: calc(var(--spacing) * 1);
|
||||
}
|
||||
.label {
|
||||
@layer daisyui.l1.l2.l3 {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: calc(0.25rem * 1.5);
|
||||
white-space: nowrap;
|
||||
color: currentcolor;
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
color: color-mix(in oklab, currentcolor 60%, transparent);
|
||||
}
|
||||
&:has(input) {
|
||||
cursor: pointer;
|
||||
}
|
||||
&:is(.input > *, .select > *) {
|
||||
display: flex;
|
||||
height: calc(100% - 0.5rem);
|
||||
align-items: center;
|
||||
padding-inline: calc(0.25rem * 3);
|
||||
white-space: nowrap;
|
||||
font-size: inherit;
|
||||
&:first-child {
|
||||
margin-inline-start: calc(0.25rem * -3);
|
||||
margin-inline-end: calc(0.25rem * 3);
|
||||
border-inline-end: var(--border) solid currentColor;
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
border-inline-end: var(--border) solid color-mix(in oklab, currentColor 10%, #0000);
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
margin-inline-start: calc(0.25rem * 3);
|
||||
margin-inline-end: calc(0.25rem * -3);
|
||||
border-inline-start: var(--border) solid currentColor;
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
border-inline-start: var(--border) solid color-mix(in oklab, currentColor 10%, #0000);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.join-item {
|
||||
&:where(*:not(:first-child, :disabled, [disabled], .btn-disabled)) {
|
||||
margin-inline-start: calc(var(--border, 1px) * -1);
|
||||
@@ -1051,6 +1198,9 @@
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
.inline-flex {
|
||||
display: inline-flex;
|
||||
}
|
||||
@@ -1094,6 +1244,9 @@
|
||||
.min-h-14 {
|
||||
min-height: calc(var(--spacing) * 14);
|
||||
}
|
||||
.min-h-full {
|
||||
min-height: 100%;
|
||||
}
|
||||
.w-4 {
|
||||
width: calc(var(--spacing) * 4);
|
||||
}
|
||||
@@ -1103,9 +1256,6 @@
|
||||
.w-8 {
|
||||
width: calc(var(--spacing) * 8);
|
||||
}
|
||||
.w-20 {
|
||||
width: calc(var(--spacing) * 20);
|
||||
}
|
||||
.w-24 {
|
||||
width: calc(var(--spacing) * 24);
|
||||
}
|
||||
@@ -1118,9 +1268,6 @@
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
.w-screen {
|
||||
width: 100vw;
|
||||
}
|
||||
.max-w-full {
|
||||
max-width: 100%;
|
||||
}
|
||||
@@ -1142,6 +1289,9 @@
|
||||
.transform {
|
||||
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
|
||||
}
|
||||
.cursor-context-menu {
|
||||
cursor: context-menu;
|
||||
}
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -1172,6 +1322,13 @@
|
||||
.gap-4 {
|
||||
gap: calc(var(--spacing) * 4);
|
||||
}
|
||||
.space-y-6 {
|
||||
:where(& > :not(:last-child)) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
|
||||
margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
|
||||
}
|
||||
}
|
||||
.truncate {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -1256,12 +1413,18 @@
|
||||
background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
|
||||
}
|
||||
}
|
||||
.stroke-current {
|
||||
stroke: currentcolor;
|
||||
}
|
||||
.checkbox-xs {
|
||||
@layer daisyui.l1.l2 {
|
||||
padding: 0.125rem;
|
||||
--size: calc(var(--size-selector, 0.25rem) * 4);
|
||||
}
|
||||
}
|
||||
.p-0 {
|
||||
padding: calc(var(--spacing) * 0);
|
||||
}
|
||||
.p-4 {
|
||||
padding: calc(var(--spacing) * 4);
|
||||
}
|
||||
@@ -1348,6 +1511,9 @@
|
||||
--tw-tracking: var(--tracking-wider);
|
||||
letter-spacing: var(--tracking-wider);
|
||||
}
|
||||
.whitespace-nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.progress-primary {
|
||||
@layer daisyui.l1.l2 {
|
||||
color: var(--color-primary);
|
||||
@@ -1482,6 +1648,10 @@
|
||||
--tw-duration: 200ms;
|
||||
transition-duration: 200ms;
|
||||
}
|
||||
.duration-300 {
|
||||
--tw-duration: 300ms;
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
.btn-outline {
|
||||
@layer daisyui.l1 {
|
||||
&:not( .btn-active, :hover, :active:focus, :focus-visible, input:checked:not(.filter .btn), :disabled, [disabled], .btn-disabled ) {
|
||||
@@ -1638,6 +1808,67 @@
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
}
|
||||
.md\:p-6 {
|
||||
@media (width >= 48rem) {
|
||||
padding: calc(var(--spacing) * 6);
|
||||
}
|
||||
}
|
||||
.lg\:drawer-open {
|
||||
@media (width >= 64rem) {
|
||||
@layer daisyui.l1.l2 {
|
||||
& > .drawer-toggle:checked {
|
||||
& ~ .drawer-side {
|
||||
scrollbar-color: revert-layer;
|
||||
}
|
||||
:root:has(&) {
|
||||
--page-overflow: revert-layer;
|
||||
--page-scroll-gutter: revert-layer;
|
||||
--page-scroll-bg: revert-layer;
|
||||
--page-scroll-transition: revert-layer;
|
||||
--page-has-backdrop: revert-layer;
|
||||
animation: revert-layer;
|
||||
animation-timeline: revert-layer;
|
||||
}
|
||||
}
|
||||
}
|
||||
@layer daisyui.l1.l2 {
|
||||
& > .drawer-side {
|
||||
overflow-y: auto;
|
||||
}
|
||||
> .drawer-toggle {
|
||||
display: none;
|
||||
& ~ .drawer-side {
|
||||
pointer-events: auto;
|
||||
visibility: visible;
|
||||
position: sticky;
|
||||
display: block;
|
||||
width: auto;
|
||||
overscroll-behavior: auto;
|
||||
opacity: 100%;
|
||||
& > .drawer-overlay {
|
||||
cursor: default;
|
||||
background-color: transparent;
|
||||
}
|
||||
& > *:not(.drawer-overlay) {
|
||||
translate: 0%;
|
||||
[dir="rtl"] & {
|
||||
translate: 0%;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:checked ~ .drawer-side {
|
||||
pointer-events: auto;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.lg\:hidden {
|
||||
@media (width >= 64rem) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@layer base {
|
||||
html, body {
|
||||
@@ -1911,6 +2142,11 @@
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-space-y-reverse {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 0;
|
||||
}
|
||||
@property --tw-border-style {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
@@ -2090,6 +2326,7 @@
|
||||
--tw-rotate-z: initial;
|
||||
--tw-skew-x: initial;
|
||||
--tw-skew-y: initial;
|
||||
--tw-space-y-reverse: 0;
|
||||
--tw-border-style: solid;
|
||||
--tw-font-weight: initial;
|
||||
--tw-tracking: initial;
|
||||
|
||||
Reference in New Issue
Block a user