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

25
wco/apx/apx.js
View File

@@ -609,3 +609,28 @@ apx.indexedDB.del = async (db, storeName, key) => {
request.onerror = (error) => reject(error);
});
};
apx.indexedDB.getAllKeys = async (db, storeName) => {
return new Promise((resolve, reject) => {
const request = indexedDB.open(db, 1);
request.onsuccess = (event) => {
const db = event.target.result;
const transaction = db.transaction(storeName, "readonly");
const store = transaction.objectStore(storeName);
const keysRequest = store.getAllKeys();
keysRequest.onsuccess = (event) => {
resolve(event.target.result);
};
keysRequest.onerror = (event) => {
reject(event);
};
};
request.onerror = (error) => reject(error);
});
}

53
wco/privatri/main.mustache
View File

@@ -1,6 +1,6 @@
<section class="w-fit min-w-110 h-screen max-h-screen bg-base-100 border-r border-solid border-r-base-300 relative flex flex-col">
<section class="w-fit md:min-w-110 h-screen max-h-screen bg-base-100 border-r border-solid border-r-base-300 relative flex flex-col">
<div class="w-full h-12 max-h-12 flex items-center justify-evenly mt-4 mb-4 flex-shrink-0">
<div class="dropdown h-full">
<div class="dropdown h-full hidden md:block">
<div tabindex="0" role="button" class="h-full flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 -960 960 960" width="32px" class="h-full fill-current text-base-content">
<path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/>
@@ -14,7 +14,27 @@
{{/appOptions}}
</ul>
</div>
<label class="input rounded-lg md-4">
<div class="drawer md:hidden">
<input id="my-drawer" type="checkbox" class="drawer-toggle"/>
<div class="drawer-content">
<label for="my-drawer" class="btn btn-ghost drawer-button h-full flex items-center hover:bg-transparent hover:shadow-none border-none">
<svg xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 -960 960 960" width="32px" class="h-full fill-current text-base-content">
<path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/>
</svg>
</label>
</div>
<div class="drawer-side">
<label for="my-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
<ul class="menu bg-base-200 text-base-content min-h-full w-80 p-4">
{{#appOptions}}
<li>
<a data-template="{{template}}" class="rounded-lg">{{{title}}}</a>
</li>
{{/appOptions}}
</ul>
</div>
</div>
<label class="hidden md:flex input rounded-lg md-4">
<svg class="h-4 w-4 text-base-content" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor">
<circle cx="11" cy="11" r="8"></circle>
@@ -23,7 +43,7 @@
</svg>
<input id="threadSearchBar" type="search" required placeholder="Search for threads" class="flex-1 bg-transparent outline-none placeholder:opacity-75 placeholder:text-base-content text-base-content" />
</label>
<div class="dropdown dropdown-end">
<div class="hidden md:block dropdown dropdown-end">
<div tabindex="0" role="button" class="m-1">
<svg xmlns="http://www.w3.org/2000/svg" height="28px" viewBox="0 -960 960 960" width="28px" class="h-full fill-current text-base-content">
<path d="M440-160q-17 0-28.5-11.5T400-200v-240L168-736q-15-20-4.5-42t36.5-22h560q26 0 36.5 22t-4.5 42L560-440v240q0 17-11.5 28.5T520-160h-80Zm40-308 198-252H282l198 252Zm0 0Z"/>
@@ -40,7 +60,7 @@
</div>
</div>
<div id="threadsContainer" class="flex-1 overflow-y-auto flex flex-col"></div>
<a class="w-16 h-16 btn bg-base-content rounded-full p-0 shadow-lg flex items-center justify-center absolute bottom-8 right-8" data-template="createThread">
<a class="hidden md:flex w-16 h-16 btn bg-base-content rounded-full p-0 shadow-lg items-center justify-center absolute bottom-8 right-8">
<svg xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 -960 960 960" width="32px" class="h-full fill-current text-base-100">
<path d="M120-160v-600q0-33 23.5-56.5T200-840h480q33 0 56.5 23.5T760-760v203q-10-2-20-2.5t-20-.5q-10 0-20 .5t-20 2.5v-203H200v400h283q-2 10-2.5 20t-.5 20q0 10 .5 20t2.5 20H240L120-160Zm160-440h320v-80H280v80Zm0 160h200v-80H280v80Zm400 280v-120H560v-80h120v-120h80v120h120v80H760v120h-80ZM200-360v-400 400Z"/>
</svg>
@@ -67,19 +87,20 @@
</div>
</div>
<div id="messagesContainer" class="w-full flex-1 min-h-0 bg-base-200 overflow-y-auto flex flex-col p-4 gap-y-6"></div>
<div class="flex items-center justify-center w-full h-fit pt-4 pb-4 pl-8 pr-8 gap-x-4">
<button id="attachmentsBtn" class="hover:bg-base-200 transition rounded-full p-2 flex items-center justify-center">
<input id="attachmentsInput" type="file" multiple accept="image/png, image/jpeg" class="hidden"/>
<svg xmlns="http://www.w3.org/2000/svg" height="28px" viewBox="0 -960 960 960" width="28px" class="h-full fill-current text-base-content opacity-50">
<path d="M720-330q0 104-73 177T470-80q-104 0-177-73t-73-177v-370q0-75 52.5-127.5T400-880q75 0 127.5 52.5T580-700v350q0 46-32 78t-78 32q-46 0-78-32t-32-78v-370h80v370q0 13 8.5 21.5T470-320q13 0 21.5-8.5T500-350v-350q-1-42-29.5-71T400-800q-42 0-71 29t-29 71v370q-1 71 49 120.5T470-160q70 0 119-49.5T640-330v-390h80v390Z"/>
</svg>
</button>
<div class="flex items-center rounded-full w-full h-10 bg-base-300">
<input id="messageInput" type="text" placeholder="Write a message..." class="flex-1 bg-transparent border-transparent outline-none px-4" />
<button id="sendMessageBtn" type="button" class="flex justify-center items-center ml-2 p-2 rounded-full hover:bg-base-200 transition">
<div class="flex items-center justify-center w-full h-fit pt-4 pb-4 pl-2 pr-4 md:pl-8 md:pr-12 gap-x-2 md:gap-x-4">
<button id="attachmentsBtn" class="hover:bg-base-200 transition rounded-full p-2 flex items-center justify-center">
<input id="attachmentsInput" type="file" multiple accept="image/png, image/jpeg" class="hidden"/>
<svg xmlns="http://www.w3.org/2000/svg" height="28px" viewBox="0 -960 960 960" width="28px" class="h-full fill-current text-base-content opacity-50">
<path d="M120-160v-640l760 320-760 320Zm80-120 474-200-474-200v140l240 60-240 60v140Zm0 0v-400 400Z" />
<path d="M720-330q0 104-73 177T470-80q-104 0-177-73t-73-177v-370q0-75 52.5-127.5T400-880q75 0 127.5 52.5T580-700v350q0 46-32 78t-78 32q-46 0-78-32t-32-78v-370h80v370q0 13 8.5 21.5T470-320q13 0 21.5-8.5T500-350v-350q-1-42-29.5-71T400-800q-42 0-71 29t-29 71v370q-1 71 49 120.5T470-160q70 0 119-49.5T640-330v-390h80v390Z"/>
</svg>
</button>
<div class="flex items-center rounded-full w-full h-10 bg-base-300">
<input id="messageInput" type="text" placeholder="Write a message..." class="flex-1 bg-transparent border-transparent outline-none px-4" />
<button id="sendMessageBtn" type="button" class="flex justify-center items-center ml-2 p-2 rounded-full hover:bg-base-200 transition">
<svg xmlns="http://www.w3.org/2000/svg" height="28px" viewBox="0 -960 960 960" width="28px" class="h-full fill-current text-base-content opacity-50">
<path d="M120-160v-640l760 320-760 320Zm80-120 474-200-474-200v140l240 60-240 60v140Zm0 0v-400 400Z" />
</svg>
</button>
</div>
</div>
</section>

157
wco/privatri/privatri.js
View File

@@ -3,6 +3,9 @@ var apx = apx || {};
apx.privatri = {};
apx.privatri.templates = {};
const apiUrl = "http://admin.apxtri.farm.test/api/apxtri/privatri"
const tribe = "apxtri";
apx.privatri.loadwco = async (id, dataObj = {}, ctx = null) => {
// check if not authenticate, do nothing cause by default screensignin and wait authentification
// if authenticate, if url xhash then redirect if no url then change wco-link=screenmyworld
@@ -22,18 +25,65 @@ apx.privatri.loadwco = async (id, dataObj = {}, ctx = null) => {
return Mustache.render(template, dataObj);
};
apx.privatri.syncronizeBackend = async (alias, lastConnection) => {
// const response = await fetch
const response = [];
async function getOldestPrivatriids(db, storeName) {
const keysArray = await apx.indexedDB.getAllKeys(db, storeName);
const oldestPerUuid = {};
for (const message of response) {
await apx.indexedDB.set("privatri", "messages", message);
for (const key of keysArray) {
const [uuid, timestampStr] = key.split("_");
const timestamp = Number(timestampStr);
if (!oldestPerUuid[uuid] || timestamp < oldestPerUuid[uuid].timestamp) {
oldestPerUuid[uuid] = { key, timestamp };
};
};
const oldestKeysArray = Object.values(oldestPerUuid).map(obj => obj.key)
const threadsArray = [];
for (key of oldestKeysArray) {
threadsArray.push(await apx.indexedDB.get(db, storeName, key));
};
return threadsArray;
};
apx.privatri.syncronizeBackend = async (alias, lastConnection) => {
const threadsArray = await getOldestPrivatriids("privatri", "messages");
for (const threadObj of threadsArray) {
try {
const response = await fetch(`${apiUrl}/${tribe}/${threadObj.thread}?since=${lastConnection}`);
if (response.ok === false) {
throw new Error("HTTP error");
};
console.log(response);
// for (const message of response) {
// await apx.indexedDB.set("privatri", "messages", message);
// };
} catch (error) {
const displayToastAlert = async (message) => {
return await apx.privatri.loadwco("toastAlert", { message });
};
document.querySelector("body").insertAdjacentHTML("beforeend", await displayToastAlert("An error occurred while synchronizing messages. Please try again later."));
};
};
};
apx.privatri.templates.scripts = {
createThread: async () => {
const bodyEl = document.querySelector("body");
const autoDeletionBtnElArray = document.querySelectorAll("li.autoDeletionBtn");
const displayToastAlert = async (message) => {
return await apx.privatri.loadwco("toastAlert", { message });
};
autoDeletionBtnElArray.forEach(btn => {
btn.addEventListener("click", () => {
@@ -70,10 +120,20 @@ apx.privatri.templates.scripts = {
};
})(publicKey);
// Faire un post sur l'endpoint /privatri
await apx.indexedDB.set("privatri", "threads", { uuid: messageObj.thread, privateKey: privateKey });
await apx.indexedDB.set("privatri", "messages", messageObj);
try {
const response = await fetch(`${apiUrl}/`);
if (response.ok === false) {
throw new Error("HTTP error");
};
await apx.indexedDB.set("privatri", "threads", { uuid: messageObj.thread, privateKey: privateKey });
await apx.indexedDB.set("privatri", "messages", messageObj);
bodyEl.insertAdjacentHTML("beforeend", await displayToastAlert("Thread created successfully."));
} catch (error) {
bodyEl.insertAdjacentHTML("beforeend", await displayToastAlert("An error occurred while creating the thread. Please try again later."));
};
});
},
inviteAlias: async () => {
@@ -92,7 +152,7 @@ apx.privatri.templates.scripts = {
height: 425,
type: "svg",
data: url,
image: "./assets/icon.png",
image: "static/img/icons/privatri.png",
dotsOptions: {
color: "#ffffff",
type: "rounded"
@@ -251,61 +311,6 @@ apx.privatri.templates.scripts = {
}
};
async function getOldestPrivatriids(dbName, storeName) {
return new Promise((resolve, reject) => {
const request = indexedDB.open(dbName, 1);
request.onupgradeneeded = (event) => {
const db = event.target.result;
if (!db.objectStoreNames.contains("threads")) {
db.createObjectStore("threads", { keyPath: "uuid" });
};
if (!db.objectStoreNames.contains("messages")) {
db.createObjectStore("messages", { keyPath: "privatriid" });
};
};
request.onsuccess = (event) => {
const db = event.target.result;
if (!db.objectStoreNames.contains(storeName)) {
resolve([]);
return;
};
const transaction = db.transaction(storeName, "readonly");
const store = transaction.objectStore(storeName);
const cursorRequest = store.openCursor();
const uuidMap = {};
cursorRequest.onsuccess = (event) => {
const cursor = event.target.result;
if (cursor) {
const obj = cursor.value;
const [uuid, timestamp] = obj.privatriid.split("_");
if (!uuidMap[uuid] || Number(timestamp) < uuidMap[uuid].timestamp) {
uuidMap[uuid] = { privatriid: obj.privatriid, timestamp: Number(timestamp) };
};
cursor.continue();
} else {
const result = Object.values(uuidMap).map(event => event.privatriid);
resolve(result);
};
};
cursorRequest.onerror = (event) => reject(event);
};
request.onerror = (event) => reject(event);
});
};
apx.ready(async () => {
document.querySelector("body").innerHTML = await apx.privatri.loadwco("main", JSON.parse(localStorage.getItem("admin")).tpldata.privatri_main_privatri);
@@ -321,16 +326,17 @@ apx.ready(async () => {
await (async () => {
const lastConnection = JSON.parse(localStorage.getItem("lastConnection")) || Date.now();
await apx.privatri.syncronizeBackend(apx.data.headers.xalias, lastConnection);
// await apx.privatri.syncronizeBackend(apx.data.headers.xalias, lastConnection);
const privatriidArray = await getOldestPrivatriids("privatri", "messages");
console.log(privatriidArray);
const thread = async (name, uuid) => {
return await apx.privatri.loadwco("thread", { uuid, name });
};
for (const privatriid of privatriidArray) {
const obj = await apx.indexedDB.get("privatri", "messages", privatriid)
for (const privatriidObj of privatriidArray) {
const obj = await apx.indexedDB.get("privatri", "messages", privatriidObj.privatriid)
const privateKey = (await apx.indexedDB.get("privatri", "threads", obj.thread)).privateKey;
const name = (await apx.crypto.decryptMessage(obj.title, privateKey)).data;
@@ -542,14 +548,21 @@ apx.ready(async () => {
messageInputEl.value = "";
// Faire un post sur l'endpoint /privatri
await apx.indexedDB.set("privatri", "messages", messageObj);
try {
const response = await fetch(`${apiUrl}/`);
if (response.ok === false) {
throw new Error("HTTP error");
};
await apx.indexedDB.set("privatri", "messages", messageObj);
} catch (error) {
bodyEl.insertAdjacentHTML("beforeend", await displayToastAlert("An error occurred while sending the message. Please try again later."));
};
};
});
window.addEventListener("beforeunload", () => {
// if (apx)
localStorage.setItem("lastConnection", JSON.stringify(Date.now()));
});

6
wco/privatri/thread.mustache
View File

@@ -1,7 +1,7 @@
<ul data-uuid="{{uuid}}" class="list hover:bg-base-200 transition">
<li class="list-row items-center">
<li class="gap-x-0 md:gap-x-4 list-row items-center">
<img class="size-12 rounded-full bg-base-content" src=""/>
<div class="text-xl font-medium">{{name}}</div>
<span class="badge h-8 bg-info text-info-content font-semibold border-transparent">17</span>
<div class="hidden md:block text-xl font-medium">{{name}}</div>
<span class="hidden md:flex badge h-8 bg-info text-info-content font-semibold border-transparent">17</span>
</li>
</ul>

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);