apxtri/objects
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Privatri is now responsive

Browse Source
This commit is contained in:
devpotatoes
2025-09-06 13:55:49 +02:00
parent 595f026589
commit 7dfbc7ced1
5 changed files with 339 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

259
wwws/admin/src/static/css/output.css
View File

@@ -1,4 +1,4 @@
/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */
/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */
@layer properties;
@font-face {
font-family: 'Questrial';
@@ -292,6 +292,7 @@
overflow-y: hidden;
overscroll-behavior: contain;
z-index: 999;
scrollbar-gutter: auto;
&::backdrop {
display: none;
}
@@ -331,7 +332,6 @@
opacity: 0%;
font-size: 0.875rem;
line-height: 1.25;
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms;
background-color: var(--tt-bg);
width: max-content;
pointer-events: none;
@@ -339,12 +339,20 @@
--tw-content: attr(data-tip);
content: var(--tw-content);
}
@media (prefers-reduced-motion: no-preference) {
& > :where(.tooltip-content), &:where([data-tip]):before {
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms;
}
}
@media (prefers-reduced-motion: no-preference) {
&:after {
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms;
}
}
&:after {
position: absolute;
position: absolute;
opacity: 0%;
background-color: var(--tt-bg);
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms;
content: "";
pointer-events: none;
width: 0.625rem;
@@ -359,7 +367,11 @@
> .tooltip-content, &[data-tip]:before, &:after {
opacity: 100%;
--tt-pos: 0rem;
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
@media (prefers-reduced-motion: no-preference) {
& > .tooltip-content, &[data-tip]:before, &:after {
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
}
}
> .tooltip-content, &[data-tip]:before {
@@ -389,7 +401,6 @@
opacity: 0% !important;
font-size: 0.875rem !important;
line-height: 1.25 !important;
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms !important;
background-color: var(--tt-bg) !important;
width: max-content !important;
pointer-events: none !important;
@@ -397,12 +408,20 @@
--tw-content: attr(data-tip) !important;
content: var(--tw-content) !important;
}
@media (prefers-reduced-motion: no-preference) {
& > :where(.tooltip-content), &:where([data-tip]):before {
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms !important;
}
}
@media (prefers-reduced-motion: no-preference) {
&:after {
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms !important;
}
}
&:after {
position: absolute !important;
position: absolute !important;
opacity: 0% !important;
background-color: var(--tt-bg) !important;
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms !important;
content: "" !important;
pointer-events: none !important;
width: 0.625rem !important;
@@ -417,7 +436,11 @@
> .tooltip-content, &[data-tip]:before, &:after {
opacity: 100% !important;
--tt-pos: 0rem !important;
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms !important;
}
@media (prefers-reduced-motion: no-preference) {
& > .tooltip-content, &[data-tip]:before, &:after {
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms !important;
}
}
}
> .tooltip-content, &[data-tip]:before {
@@ -476,13 +499,13 @@
opacity: 0%;
}
}
&:checked, &:is(label:has(:checked)), &:is(.tab-active, [aria-selected="true"]) {
&:checked, &:is(label:has(:checked)), &:is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) {
& + .tab-content {
display: block;
height: calc(100% - var(--tab-height) + var(--border));
}
}
&:not(:checked, label:has(:checked), :hover, .tab-active, [aria-selected="true"]) {
&:not(:checked, label:has(:checked), :hover, .tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) {
color: var(--color-base-content);
@supports (color: color-mix(in lab, red, red)) {
color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
@@ -693,11 +716,13 @@
}
&[popover], .dropdown-content {
z-index: 999;
animation: dropdown 0.2s;
transition-property: opacity, scale, display;
transition-behavior: allow-discrete;
transition-duration: 0.2s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@media (prefers-reduced-motion: no-preference) {
animation: dropdown 0.2s;
transition-property: opacity, scale, display;
transition-behavior: allow-discrete;
transition-duration: 0.2s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
}
@starting-style {
&[popover], .dropdown-content {
@@ -822,7 +847,7 @@
}
}
}
&:focus-visible {
&:focus-visible, &:has(:focus-visible) {
outline-width: 2px;
outline-style: solid;
isolation: isolate;
@@ -906,8 +931,10 @@
border-radius: var(--radius-box, 1rem);
width: 100%;
grid-template-rows: max-content 0fr;
transition: grid-template-rows 0.2s;
isolation: isolate;
@media (prefers-reduced-motion: no-preference) {
transition: grid-template-rows 0.2s;
}
> input:is([type="checkbox"], [type="radio"]) {
grid-column-start: 1;
grid-row-start: 1;
@@ -943,19 +970,25 @@
}
&:is([open], :focus:not(.collapse-close)) > :where(.collapse-content), &:not(.collapse-close) > :where(input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-content) {
padding-bottom: 1rem;
transition: padding 0.2s ease-out, background-color 0.2s ease-out;
@media (prefers-reduced-motion: no-preference) {
transition: padding 0.2s ease-out, background-color 0.2s ease-out;
}
}
&:is([open]) {
&.collapse-arrow {
> .collapse-title:after {
transform: translateY(-50%) rotate(225deg);
@media (prefers-reduced-motion: no-preference) {
transform: translateY(-50%) rotate(225deg);
}
}
}
}
&.collapse-open {
&.collapse-arrow {
> .collapse-title:after {
transform: translateY(-50%) rotate(225deg);
@media (prefers-reduced-motion: no-preference) {
transform: translateY(-50%) rotate(225deg);
}
}
}
&.collapse-plus {
@@ -1103,7 +1136,9 @@
width: max-content;
max-width: calc(100vw - 2rem);
& > * {
animation: toast 0.25s ease-out;
@media (prefers-reduced-motion: no-preference) {
animation: toast 0.25s ease-out;
}
}
&:where(.toast-start) {
inset-inline-start: calc(0.25rem * 4);
@@ -1323,7 +1358,7 @@
direction: ltr;
}
:where(input[type="date"]) {
display: inline-block;
display: inline-flex;
}
&:focus, &:focus-within {
--input-color: var(--color-base-content);
@@ -1336,7 +1371,7 @@
isolation: isolate;
z-index: 1;
}
&:has(> input[disabled]), &:is(:disabled, [disabled]) {
&:has(> input[disabled]), &:is(:disabled, [disabled]), fieldset:disabled & {
cursor: not-allowed;
border-color: var(--color-base-200);
background-color: var(--color-base-200);
@@ -1368,6 +1403,20 @@
position: absolute;
inset-inline-end: 0.75em;
}
&:has(> input[type="date"]) {
:where(input[type="date"]) {
display: inline-flex;
webkit-appearance: none;
appearance: none;
}
input[type="date"]::-webkit-calendar-picker-indicator {
position: absolute;
inset-inline-end: 0.75em;
width: 1em;
height: 1em;
cursor: pointer;
}
}
}
.indicator {
position: relative;
@@ -1827,7 +1876,8 @@
appearance: none;
padding-inline-start: calc(0.25rem * 4);
padding-inline-end: calc(0.25rem * 7);
height: calc(100% - 2px);
height: calc(100% - calc(var(--border) * 2));
align-items: center;
background: inherit;
border-radius: inherit;
border-style: none;
@@ -1855,7 +1905,7 @@
isolation: isolate;
z-index: 1;
}
&:has(> select[disabled]), &:is(:disabled, [disabled]) {
&:has(> select[disabled]), &:is(:disabled, [disabled]), fieldset:disabled & {
cursor: not-allowed;
border-color: var(--color-base-200);
background-color: var(--color-base-200);
@@ -1873,6 +1923,66 @@
&:has(> select[disabled]) > select[disabled] {
cursor: not-allowed;
}
&, & select {
@supports (appearance: base-select) {
appearance: base-select;
}
@supports (appearance: base-select) {
&::picker(select) {
appearance: base-select;
}
}
&::picker(select) {
color: inherit;
max-height: 70dvh;
border: var(--border) solid var(--color-base-200);
margin-block: calc(0.25rem * 2);
border-radius: var(--radius-box);
padding: calc(0.25rem * 2);
background-color: inherit;
box-shadow: 0 2px calc(var(--depth) * 3px) -2px oklch(0% 0 0/0.2);
box-shadow: 0 20px 25px -5px rgb(0 0 0 / calc(var(--depth) * 0.1)), 0 8px 10px -6px rgb(0 0 0 / calc(var(--depth) * 0.1));
}
&::picker-icon {
display: none;
}
optgroup {
padding-top: 0.5em;
option {
&:nth-child(1) {
margin-top: 0.5em;
}
}
}
option {
border-radius: var(--radius-field);
padding-inline: calc(0.25rem * 3);
padding-block: calc(0.25rem * 1.5);
transition-property: color, background-color;
transition-duration: 0.2s;
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
&:not(:disabled) {
&:hover, &:focus-visible {
cursor: pointer;
background-color: var(--color-base-content);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
}
--tw-outline-style: none;
outline-style: none;
@media (forced-colors: active) {
outline: 2px solid transparent;
outline-offset: 2px;
}
}
&:active {
background-color: var(--color-neutral);
color: var(--color-neutral-content);
box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--color-neutral);
}
}
}
}
}
.card {
position: relative;
@@ -1962,9 +2072,11 @@
> * {
grid-column-start: 1;
grid-row-start: 1;
transition-property: transform, rotate, opacity;
transition-duration: 0.2s;
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
@media (prefers-reduced-motion: no-preference) {
transition-property: transform, rotate, opacity;
transition-duration: 0.2s;
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
}
.swap-on, .swap-indeterminate, input:indeterminate ~ .swap-on {
opacity: 0%;
@@ -2021,10 +2133,7 @@
outline-offset: 2px;
}
&:checked, &[aria-checked="true"] {
background-color: var(--input-color, var(--color-base-content));
@supports (color: color-mix(in lab, red, red)) {
background-color: var(--input-color, color-mix(in oklab, var(--color-base-content) 20%, #0000));
}
background-color: var(--input-color, #0000);
box-shadow: 0 0 #0000 inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1));
&:before {
clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%);
@@ -2096,9 +2205,11 @@
outline: 2px solid currentColor;
}
&:checked, &[aria-checked="true"] {
animation: radio 0.2s ease-out;
border-color: currentColor;
background-color: var(--color-base-100);
@media (prefers-reduced-motion: no-preference) {
animation: radio 0.2s ease-out;
}
&:before {
background-color: currentColor;
box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1));
@@ -2145,14 +2256,18 @@
background-image: repeating-linear-gradient( 90deg, currentColor -1%, currentColor 10%, #0000 10%, #0000 90% );
background-size: 200%;
background-position-x: 15%;
animation: progress 5s ease-in-out infinite;
@media (prefers-reduced-motion: no-preference) {
animation: progress 5s ease-in-out infinite;
}
@supports (-moz-appearance: none) {
&::-moz-progress-bar {
background-color: transparent;
background-image: repeating-linear-gradient( 90deg, currentColor -1%, currentColor 10%, #0000 10%, #0000 90% );
background-size: 200%;
background-position-x: 15%;
animation: progress 5s ease-in-out infinite;
@media (prefers-reduced-motion: no-preference) {
animation: progress 5s ease-in-out infinite;
background-image: repeating-linear-gradient( 90deg, currentColor -1%, currentColor 10%, #0000 10%, #0000 90% );
background-size: 200%;
background-position-x: 15%;
}
}
}
}
@@ -2822,8 +2937,10 @@
display: inline-flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
@media (prefers-reduced-motion: no-preference) {
scroll-behavior: smooth;
}
&::-webkit-scrollbar {
display: none;
}
@@ -3192,11 +3309,13 @@
transition-duration: 15s;
}
will-change: background-position;
animation: skeleton 1.8s ease-in-out infinite;
background-image: linear-gradient( 105deg, #0000 0% 40%, var(--color-base-100) 50%, #0000 60% 100% );
background-size: 200% auto;
background-repeat: no-repeat;
background-position-x: -50%;
@media (prefers-reduced-motion: no-preference) {
animation: skeleton 1.8s ease-in-out infinite;
}
}
.link {
cursor: pointer;
@@ -3803,7 +3922,7 @@
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
}
.transition {
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
@@ -4177,7 +4296,7 @@
}
@layer base {
@media (prefers-color-scheme: dark) {
:root {
:root:not([data-theme]) {
color-scheme: dark;
--color-base-100: oklch(25.33% 0.016 252.42);
--color-base-200: oklch(23.26% 0.014 253.1);
@@ -4276,24 +4395,6 @@
--noise: 0;
}
}
@layer base {
:root, [data-theme] {
background-color: var(--root-bg, var(--color-base-100));
color: var(--color-base-content);
}
}
@layer base {
:root {
--fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E");
}
}
@layer base {
@property --radialprogress {
syntax: "<percentage>";
inherits: true;
initial-value: 0%;
}
}
@layer base {
:where( :root:has( .modal-open, .modal[open], .modal:target, .modal-toggle:checked, .drawer:not(.drawer-open) > .drawer-toggle:checked ) ) {
scrollbar-gutter: stable;
@@ -4307,6 +4408,24 @@
scrollbar-gutter: stable;
}
}
@layer base {
@property --radialprogress {
syntax: "<percentage>";
inherits: true;
initial-value: 0%;
}
}
@layer base {
:root {
--fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E");
}
}
@layer base {
:root, [data-theme] {
background-color: var(--root-bg, var(--color-base-100));
color: var(--color-base-content);
}
}
@layer base {
:root {
scrollbar-color: currentColor #0000;
@@ -4320,9 +4439,9 @@
overflow: hidden;
}
}
@keyframes progress {
50% {
background-position-x: -115%;
@keyframes dropdown {
0% {
opacity: 0;
}
}
@keyframes radio {
@@ -4343,11 +4462,6 @@
opacity: 1;
}
}
@keyframes dropdown {
0% {
opacity: 0;
}
}
@keyframes rating {
0%, 40% {
scale: 1.1;
@@ -4362,9 +4476,14 @@
background-position: -50%;
}
}
@keyframes progress {
50% {
background-position-x: -115%;
}
}
@layer base {
@media (prefers-color-scheme: dark) {
:root {
:root:not([data-theme]) {
color-scheme: dark;
--color-base-100: oklch(40% 0.016 252.42);
--color-base-200: oklch(20% 0.014 253.1);