diff --git a/apxtri.objects.setup.zip b/apxtri.objects.setup.zip new file mode 100644 index 0000000..c52cfdf Binary files /dev/null and b/apxtri.objects.setup.zip differ diff --git a/wco/apx/apx.js b/wco/apx/apx.js index 10acf94..6699170 100644 --- a/wco/apx/apx.js +++ b/wco/apx/apx.js @@ -196,7 +196,7 @@ apx.listendatawco = (newpropertie) => { if (!apx.wco) apx.wco = {}; console.log( "wco dynamic into the webpage", - apx.wco, + apx.data.wco, "no propertie to add:", !newpropertie ); @@ -217,13 +217,19 @@ apx.listendatawco = (newpropertie) => { const elements = document.querySelectorAll(`[data-wco='${p}']`); elements.forEach((e) => actionprop(apx.data.wco[p], e)); //console.log(p, Object.hasOwnProperty(apx.wco)); - if (Object.hasOwnProperty(apx.wco)) { - Object.defineProperty(apx.wco, p, { + if (!apx.data.wco.hasOwnProperty(p)) { + let _val = apx.data.wco[p]; // Stocke la valeur initiale + Object.defineProperty(apx.data.wco, p, { + get: () => _val, set: (newv) => { - this[p] = newv; + _val = newv; // Met à jour la valeur interne + const elements = document.querySelectorAll(`[data-wco='${p}']`); // Re-sélectionne les éléments au cas où le DOM aurait changé elements.forEach((e) => actionprop(newv, e)); }, }); + if (_val !== undefined) { + apx.data.wco[p] = _val; + } } }); }; @@ -491,7 +497,7 @@ apx.update = async () => { console.log("WARNING!!, local apxtri.wco was erase by updatelocaldb.wco"); }*/ Object.keys(initset.data.data).forEach((k) => { - if (k != "headers") { + if (k !== "headers") { apx.data[k] = initset.data.data[k]; } }); diff --git a/wco/apxauth/apxauth.js b/wco/apxauth/apxauth.js index 7870a39..d7db95c 100644 --- a/wco/apxauth/apxauth.js +++ b/wco/apxauth/apxauth.js @@ -2,7 +2,7 @@ var apx = apx || {}; apx.apxauth = {}; apx.apxauth.loadwco = async (id, ctx) => { // 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=screenmytribes + // if authenticate, if url xhash then redirect if no url then change wco-link=screenmyworld // if (dayjs(apx.data.headers.xdays).diff(dayjs(), "hours") >= 24) apx.apxauth.checkisauth(); //load main.mustache of the component //when wco-xxx change it run this function @@ -35,7 +35,7 @@ apx.apxauth.getdata = (id, ctx) => { ? apx.data.appdata.emailsupport : ""; switch (ctx.link) { - case "logout": + case "myworld": if (!data.profils) data.profils = []; apx.data.headers.xprofils.forEach((p) => { if (!["anonymous", "pagans", "persons"].includes(p)) { @@ -45,15 +45,47 @@ apx.apxauth.getdata = (id, ctx) => { data.noprofils = data.profils.length == 0; data.member = apx.data.headers.xprofils.includes("persons"); data.websites = apx.data.appdata.websites; - // get tribes activities - /*["", "https://wall-ants.ndda.fr"]; + data.optionlinks=apx.data.tpldata[tpldataname].optionlinks + data.town=apx.data.town + data.nation=apx.data.nation + if (1==1 || apx.data.headers.xprofils.includes('major')){ + apx.data.tpldata[tpldataname].optionlinksmajor.forEach(o=>data.optionlinks.push(o)) + apx.save() + } + // get towns list axios - .get(`/api/apxtri/tribes/activities`, { + .get(`/api/apxtri/odmdb/idx/apxtri/towns/towns`, { headers: apx.data.headers, }) - .then((rep) => {}) - .catch((err) => {}); - */ + .then((rep) => { + console.log(rep) + if (rep.status==200){ + apx.data.itms.towns=rep.data.data.idx + data.townsnumber= Object.keys(apx.data.itms.towns).length; + apx.data.wco.townsnumber={textContent:Object.keys(apx.data.itms.towns).length}; + apx.listendatawco('townsnumber'); + apx.save() + } + }) + .catch((err) => { + console.log("ERROR, geting towns itms not available",err) + }); + axios + .get(`/api/apxtri/odmdb/idx/apxtri/pagans/lst_alias`, { + headers: apx.data.headers, + }) + .then((rep) => { + if (rep.status==200){ + console.log(rep) + data.pagansnumber=rep.data.data.idx.length + apx.data.wco.pagansnumber={textContent:rep.data.data.idx.length}; + apx.listendatawco('pagansnumber'); + apx.save(); + } + }) + .catch((err) => { + console.log("ERROR, geting pagans itms not available",err) + }); break; default: break; @@ -253,7 +285,7 @@ apx.apxauth.authentifyme = async ( //location.reload(); document .getElementById(idparent) - .setAttribute("wco-link", "mytribes"); + .setAttribute("wco-link", "myworld"); } }) .catch((err) => { @@ -484,7 +516,7 @@ apx.apxauth.authenticatedetachedSignature = async ( message ) => { /** - * Check that alias (pubkey) signe a message + * Check that alias (pubkey) sign a message * @alias {string} alias link to the publickey * @pubK {string} publiKey text format * @detachedSignature {string} a detachedsignatured get from apx.apxauth.detachedSignature diff --git a/wco/apxauth/screenlogout_fr.mustache b/wco/apxauth/screenlogout_fr.mustache deleted file mode 100644 index ce2648f..0000000 --- a/wco/apxauth/screenlogout_fr.mustache +++ /dev/null @@ -1,39 +0,0 @@ -
-
-

- Bonjour {{xalias}}, -

-

- Si cet appareil ne vous appartiens pas et que vous n'utilisez pas l'application, vous devriez vous deconnecter. -

-

- Nettoyer mes traces de cet appareil? - Se deconnecter -

-
-
-

- Voir mes échanges? - Mon activité -

- {{#member}} -

- Vous êtes membre de {{xtribe}} {{#noprofils}} sand profil particulier {{/noprofils}} {{^noprofils}}avec le(s) profil(s):
{{#profils}} {{.}}
{{/profils}} {{/noprofils}} -

- {{/member}} - {{^member}} -

Vous n'êtes pas encore membre de {{xtribe}}

-

- Envie d'jouter cette tribut {{xtribe}}? - Rejoindre {{xtribe}} -

- {{/member}} -

Les applications ou pages web de {{xtribe}} à visiter:
- {{#websites}}{{{name}}}
{{/websites}} -

- -
-
\ No newline at end of file diff --git a/wco/apxauth/screenmytribes_fr.mustache b/wco/apxauth/screenmytribes_fr.mustache deleted file mode 100644 index 9128c94..0000000 --- a/wco/apxauth/screenmytribes_fr.mustache +++ /dev/null @@ -1,23 +0,0 @@ -
-
-

- Bonjour {{xalias}}, -

-
-
-

- Redirige vers - Redirige vers recruiter.smatchit.io/offer_fr.html&xhash.... -

- {{#member}} -

- Vous êtes membre de {{xtribe}} {{#noprofils}} sand profil particulier {{/noprofils}} {{^noprofils}}avec le(s) profil(s):
{{#profils}} {{.}}
{{/profils}} {{/noprofils}} -

- {{/member}} -

Les applications ou pages web de {{xtribe}} à visiter:
- {{#websites}}{{{name}}}
{{/websites}} -

- -
-
\ No newline at end of file diff --git a/wco/apxauth/screenmyworld_fr.mustache b/wco/apxauth/screenmyworld_fr.mustache new file mode 100644 index 0000000..9b39a4c --- /dev/null +++ b/wco/apxauth/screenmyworld_fr.mustache @@ -0,0 +1,41 @@ +
+ Authentifié avec l'alias: {{xalias}} dans {{town}}-{{nation}} +
+
+ {{#optionlinks}} +
+ {{#notification_count}} + {{notification_count}} + {{/notification_count}} + + {{{svg}}} + +
+ {{/optionlinks}} +
+
+
+
+
Nombre d'uniques
+
{{pagansnumber}}
+
identités actives
+
+
+
Nombre de towns
+
{{townsnumber}}
+
Actives en ce moment
+
+
+
+
+ {{#mytribes}} +
+ {{#notification_count}} + {{notification_count}} + {{/notification_count}} + + {{{tribename}}} + +
+ {{/mytribes}} +
\ No newline at end of file diff --git a/wco/crypto/crypto.js b/wco/crypto/crypto.js index 7f52ffb..acf4e1d 100644 --- a/wco/crypto/crypto.js +++ b/wco/crypto/crypto.js @@ -3,59 +3,70 @@ var apx = apx || {}; apx.crypto = apx.crypto || {}; apx.crypto.genKey = async (uuid) => { - return await openpgp.generateKey( - { - type: "ecc", - curve: "curve25519", - userIDs: [ - { - alias: uuid - } - ], - passphrase: "", - format: "armored", - } - ); + return await openpgp.generateKey({ + type: "ecc", + curve: "curve25519", + userIDs: [ + { + alias: uuid, + }, + ], + passphrase: "", + format: "armored", + }); }; apx.crypto.encryptMessage = async (message, publicKey) => { - publicKey = await openpgp.readKey( - { - armoredKey: publicKey - } - ); + publicKey = await openpgp.readKey({ + armoredKey: publicKey, + }); - return await openpgp.encrypt( - { - message: await openpgp.createMessage( - { - text: message - } - ), - encryptionKeys: publicKey - } - ); + return await openpgp.encrypt({ + message: await openpgp.createMessage({ + text: message, + }), + encryptionKeys: publicKey, + }); }; apx.crypto.decryptMessage = async (encryptedMessage, privateKey) => { - privateKey = await openpgp.readPrivateKey( - { - armoredKey: privateKey - } - ); + privateKey = await openpgp.readPrivateKey({ + armoredKey: privateKey, + }); - const message = await openpgp.readMessage( - { - armoredMessage: encryptedMessage - } - ); + const message = await openpgp.readMessage({ + armoredMessage: encryptedMessage, + }); - return await openpgp.decrypt( - { - message, - decryptionKeys: privateKey - } - ); + return await openpgp.decrypt({ + message, + decryptionKeys: privateKey, + }); }; - -export default apx; \ No newline at end of file +apx.crypto.isSignedby = async ( + alias, + publicKey, + detachedSignature, + message +) => { + const publickey = await openpgp.readKey({ armoredKey: publicKey }); + const msg = await openpgp.createMessage({ text: message }); + const signature = await openpgp.readSignature({ + armoredSignature: atob(detachedSignature), // parse detached signature + }); + const verificationResult = await openpgp.verify({ + msg, // Message object + signature, + verificationKeys: publickey, + }); + const { verified, keyID } = verificationResult.signatures[0]; + try { + await verified; // throws on invalid signature + //console.log("Signed by key id " + keyID.toHex()); + return KeyId.toHex().alias == alias; + } catch (e) { + console.log("Signature could not be verified: " + e.message); + return false; + } +}; +export default apx; diff --git a/wco/itm/apxauth.json b/wco/itm/apxauth.json index 1b4e78f..8e5a860 100644 --- a/wco/itm/apxauth.json +++ b/wco/itm/apxauth.json @@ -14,7 +14,7 @@ "apxauthscreensignup": "apxtri/objects/wco/apxauth/screensignup", "apxauthscreensignin": "apxtri/objects/wco/apxauth/screensignin", "apxauthscreenlogout": "apxtri/objects/wco/apxauth/screenlogout", - "apxauthscreenmytribes": "apxtri/objects/wco/apxauth/screenmytribes", + "apxauthscreenmyworld": "apxtri/objects/wco/apxauth/screenmyworld", "apxauthscreeninformation": "apxtri/objects/wco/apxauth/screeninformation", "apxauthscreenforgetkey": "apxtri/objects/wco/apxauth/screenforgetkey" }, diff --git a/wwws/admin/src/myprofil_fr.html b/wwws/admin/src/myprofil_fr.html new file mode 100644 index 0000000..31e063c --- /dev/null +++ b/wwws/admin/src/myprofil_fr.html @@ -0,0 +1,66 @@ + + + + + Mon profil + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ +
+ + diff --git a/wwws/admin/src/static/css/input.css b/wwws/admin/src/static/css/input.css index 05da729..2af92c3 100644 --- a/wwws/admin/src/static/css/input.css +++ b/wwws/admin/src/static/css/input.css @@ -17,7 +17,9 @@ src: url(../fonts/Quicksand-Light.ttf) format('ttf'); } -@import "tailwindcss" source("../../../src/**/*.{html,js,mustache}"); +/*@import "tailwindcss" source("../../.{html,js,mustache}"); +*/ +@import "tailwindcss" source("/media/phil/usbfarm/apxtowns/data/apxtri/objects/wwws/admin/src/**/*.{html,js,mustache}"); @import "./sourcetw.css"; @plugin "daisyui"; diff --git a/wwws/admin/src/static/css/output.css b/wwws/admin/src/static/css/output.css index ea840af..98627a9 100644 --- a/wwws/admin/src/static/css/output.css +++ b/wwws/admin/src/static/css/output.css @@ -1,4 +1,4 @@ -/*! tailwindcss v4.1.6 | MIT License | https://tailwindcss.com */ +/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */ @layer properties; @font-face { font-family: 'Questrial'; @@ -17,18 +17,25 @@ "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - --color-blue-600: oklch(54.6% 0.245 262.881); + --color-red-500: oklch(63.7% 0.237 25.331); + --color-red-600: oklch(57.7% 0.245 27.325); + --color-green-50: oklch(98.2% 0.018 155.826); + --color-green-500: oklch(72.3% 0.219 149.579); + --color-green-600: oklch(62.7% 0.194 149.214); + --color-gray-50: oklch(98.5% 0.002 247.839); --color-gray-100: oklch(96.7% 0.003 264.542); --color-gray-200: oklch(92.8% 0.006 264.531); --color-gray-400: oklch(70.7% 0.022 261.325); --color-gray-500: oklch(55.1% 0.027 264.364); --color-gray-600: oklch(44.6% 0.03 256.802); --color-gray-700: oklch(37.3% 0.034 259.733); + --color-gray-800: oklch(27.8% 0.033 256.848); --color-gray-900: oklch(21% 0.034 264.665); --color-neutral-800: oklch(26.9% 0 0); --color-black: #000; --color-white: #fff; --spacing: 0.25rem; + --breakpoint-lg: 64rem; --container-sm: 24rem; --text-xs: 0.75rem; --text-xs--line-height: calc(1 / 0.75); @@ -38,18 +45,25 @@ --text-base--line-height: calc(1.5 / 1); --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); + --text-xl: 1.25rem; + --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); + --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --tracking-tight: -0.025em; - --radius-md: 0.375rem; --radius-lg: 0.5rem; + --ease-in: cubic-bezier(0.4, 0, 1, 1); + --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --default-transition-duration: 150ms; --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); + --font-display: "Questrial", "sans-serif"; + --font-display--font-feature-settings: "cv02", "cv03", "cv04", "cv11"; + --font-display--font-variation-settings: "opsz" 32; --font-heading: "Quicksand","system-ui"; --font-body: "Questrial"; } @@ -200,6 +214,294 @@ } } @layer utilities { + .diff { + position: relative; + display: grid; + width: 100%; + overflow: hidden; + webkit-user-select: none; + user-select: none; + direction: ltr; + container-type: inline-size; + grid-template-columns: auto 1fr; + &:focus-visible, &:has(.diff-item-1:focus-visible) { + outline-style: var(--tw-outline-style); + outline-width: 2px; + outline-offset: 1px; + outline-color: var(--color-base-content); + } + &:focus-visible { + outline-style: var(--tw-outline-style); + outline-width: 2px; + outline-offset: 1px; + outline-color: var(--color-base-content); + .diff-resizer { + min-width: 90cqi; + max-width: 90cqi; + } + } + &:has(.diff-item-2:focus-visible) { + outline-style: var(--tw-outline-style); + outline-width: 2px; + outline-offset: 1px; + .diff-resizer { + min-width: 10cqi; + max-width: 10cqi; + } + } + @supports (-webkit-overflow-scrolling: touch) and (overflow: -webkit-paged-x) { + &:focus { + .diff-resizer { + min-width: 10cqi; + max-width: 10cqi; + } + } + &:has(.diff-item-1:focus) { + .diff-resizer { + min-width: 90cqi; + max-width: 90cqi; + } + } + } + } + .modal { + pointer-events: none; + visibility: hidden; + position: fixed; + inset: calc(0.25rem * 0); + margin: calc(0.25rem * 0); + display: grid; + height: 100%; + max-height: none; + width: 100%; + max-width: none; + align-items: center; + justify-items: center; + background-color: transparent; + padding: calc(0.25rem * 0); + color: inherit; + overflow-x: hidden; + transition: translate 0.3s ease-out, visibility 0.3s allow-discrete, background-color 0.3s ease-out, opacity 0.1s ease-out; + overflow-y: hidden; + overscroll-behavior: contain; + z-index: 999; + &::backdrop { + display: none; + } + &.modal-open, &[open], &:target { + pointer-events: auto; + visibility: visible; + opacity: 100%; + background-color: oklch(0% 0 0/ 0.4); + .modal-box { + translate: 0 0; + scale: 1; + opacity: 1; + } + } + @starting-style { + &.modal-open, &[open], &:target { + visibility: hidden; + opacity: 0%; + } + } + } + .tooltip { + position: relative; + display: inline-block; + --tt-bg: var(--color-neutral); + --tt-off: calc(100% + 0.5rem); + --tt-tail: calc(100% + 1px + 0.25rem); + > :where(.tooltip-content), &:where([data-tip]):before { + position: absolute; + max-width: 20rem; + border-radius: var(--radius-field); + padding-inline: calc(0.25rem * 2); + padding-block: calc(0.25rem * 1); + text-align: center; + white-space: normal; + color: var(--color-neutral-content); + 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; + z-index: 2; + --tw-content: attr(data-tip); + content: var(--tw-content); + } + &: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; + height: 0.25rem; + display: block; + mask-repeat: no-repeat; + mask-position: -1px 0; + --mask-tooltip: url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500009 1C3.5 1 3.00001 4 5.00001 4C7 4 6.5 1 9.5 1C10 1 10 0.499897 10 0H0C-1.99338e-08 0.5 0 1 0.500009 1Z' fill='black'/%3E%3C/svg%3E%0A"); + mask-image: var(--mask-tooltip); + } + &.tooltip-open, &[data-tip]:not([data-tip=""]):hover, &:not(:has(.tooltip-content:empty)):has(.tooltip-content):hover, &:has(:focus-visible) { + > .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; + } + } + > .tooltip-content, &[data-tip]:before { + transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem)); + inset: auto auto var(--tt-off) 50%; + } + &:after { + transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem)); + inset: auto auto var(--tt-tail) 50%; + } + } + .tooltip\! { + position: relative !important; + display: inline-block !important; + --tt-bg: var(--color-neutral) !important; + --tt-off: calc(100% + 0.5rem) !important; + --tt-tail: calc(100% + 1px + 0.25rem) !important; + > :where(.tooltip-content), &:where([data-tip]):before { + position: absolute !important; + max-width: 20rem !important; + border-radius: var(--radius-field) !important; + padding-inline: calc(0.25rem * 2) !important; + padding-block: calc(0.25rem * 1) !important; + text-align: center !important; + white-space: normal !important; + color: var(--color-neutral-content) !important; + 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; + z-index: 2 !important; + --tw-content: attr(data-tip) !important; + content: var(--tw-content) !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; + height: 0.25rem !important; + display: block !important; + mask-repeat: no-repeat !important; + mask-position: -1px 0 !important; + --mask-tooltip: url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500009 1C3.5 1 3.00001 4 5.00001 4C7 4 6.5 1 9.5 1C10 1 10 0.499897 10 0H0C-1.99338e-08 0.5 0 1 0.500009 1Z' fill='black'/%3E%3C/svg%3E%0A") !important; + mask-image: var(--mask-tooltip) !important; + } + &.tooltip-open, &[data-tip]:not([data-tip=""]):hover, &:not(:has(.tooltip-content:empty)):has(.tooltip-content):hover, &:has(:focus-visible) { + > .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; + } + } + > .tooltip-content, &[data-tip]:before { + transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem)) !important; + inset: auto auto var(--tt-off) 50% !important; + } + &:after { + transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem)) !important; + inset: auto auto var(--tt-tail) 50% !important; + } + } + .tab { + position: relative; + display: inline-flex; + cursor: pointer; + appearance: none; + flex-wrap: wrap; + align-items: center; + justify-content: center; + text-align: center; + webkit-user-select: none; + user-select: none; + &:hover { + @media (hover: hover) { + color: var(--color-base-content); + } + } + --tab-p: 1rem; + --tab-bg: var(--color-base-100); + --tab-border-color: var(--color-base-300); + --tab-radius-ss: 0; + --tab-radius-se: 0; + --tab-radius-es: 0; + --tab-radius-ee: 0; + --tab-order: 0; + --tab-radius-min: calc(0.75rem - var(--border)); + border-color: #0000; + order: var(--tab-order); + height: var(--tab-height); + font-size: 0.875rem; + padding-inline-start: var(--tab-p); + padding-inline-end: var(--tab-p); + &:is(input[type="radio"]) { + min-width: fit-content; + &:after { + content: attr(aria-label); + } + } + &:is(label) { + position: relative; + input { + position: absolute; + inset: calc(0.25rem * 0); + cursor: pointer; + appearance: none; + opacity: 0%; + } + } + &:checked, &:is(label:has(:checked)), &:is(.tab-active, [aria-selected="true"]) { + & + .tab-content { + display: block; + height: calc(100% - var(--tab-height) + var(--border)); + } + } + &:not(:checked, label:has(:checked), :hover, .tab-active, [aria-selected="true"]) { + color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-base-content) 50%, transparent); + } + } + &:not(input):empty { + flex-grow: 1; + cursor: default; + } + &:focus { + --tw-outline-style: none; + outline-style: none; + @media (forced-colors: active) { + outline: 2px solid transparent; + outline-offset: 2px; + } + } + &:focus-visible, &:is(label:has(:checked:focus-visible)) { + outline: 2px solid currentColor; + outline-offset: -5px; + } + &[disabled] { + pointer-events: none; + opacity: 40%; + } + } .menu { display: flex; width: fit-content; @@ -584,6 +886,118 @@ mask-position: center; mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E"); } + .pointer-events-none { + pointer-events: none; + } + .collapse { + &:not(td, tr, colgroup) { + visibility: visible; + } + position: relative; + display: grid; + overflow: hidden; + border-radius: var(--radius-box, 1rem); + width: 100%; + grid-template-rows: max-content 0fr; + transition: grid-template-rows 0.2s; + isolation: isolate; + > input:is([type="checkbox"], [type="radio"]) { + grid-column-start: 1; + grid-row-start: 1; + appearance: none; + opacity: 0; + z-index: 1; + width: 100%; + padding: 1rem; + padding-inline-end: 3rem; + min-height: 1lh; + transition: background-color 0.2s ease-out; + } + &:is([open], :focus:not(.collapse-close)), &:not(.collapse-close):has(> input:is([type="checkbox"], [type="radio"]):checked) { + grid-template-rows: max-content 1fr; + } + &:is([open], :focus:not(.collapse-close)) > .collapse-content, &:not(.collapse-close) > :where(input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-content) { + visibility: visible; + min-height: fit-content; + } + &:focus-visible, &:has(> input:is([type="checkbox"], [type="radio"]):focus-visible) { + outline-color: var(--color-base-content); + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; + } + &:not(.collapse-close) { + > input[type="checkbox"], > input[type="radio"]:not(:checked), > .collapse-title { + cursor: pointer; + } + } + &:focus:not(.collapse-close, .collapse[open]) > .collapse-title { + cursor: unset; + } + &: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; + } + &:is([open]) { + &.collapse-arrow { + > .collapse-title:after { + transform: translateY(-50%) rotate(225deg); + } + } + } + &.collapse-open { + &.collapse-arrow { + > .collapse-title:after { + transform: translateY(-50%) rotate(225deg); + } + } + &.collapse-plus { + > .collapse-title:after { + content: "−"; + } + } + } + &.collapse-arrow:focus:not(.collapse-close) { + > .collapse-title:after { + transform: translateY(-50%) rotate(225deg); + } + } + &.collapse-arrow:not(.collapse-close) { + > input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-title:after { + transform: translateY(-50%) rotate(225deg); + } + } + &[open] { + &.collapse-plus { + > .collapse-title:after { + content: "−"; + } + } + } + &.collapse-plus:focus:not(.collapse-close) { + > .collapse-title:after { + content: "−"; + } + } + &.collapse-plus:not(.collapse-close) { + > input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-title:after { + content: "−"; + } + } + &:is(details) { + width: 100%; + & summary { + position: relative; + display: block; + &::-webkit-details-marker { + display: none; + } + } + } + &:is(details) summary { + outline: none; + } + } .validator-hint { visibility: hidden; margin-top: calc(0.25rem * 2); @@ -595,7 +1009,7 @@ --input-color: var(--color-success); } } - &:user-invalid, &:has(:user-invalid), &[aria-invalid] { + &:user-invalid, &:has(:user-invalid), &[aria-invalid]:not([aria-invalid="false"]) { &, &:focus, &:checked, &[aria-checked="true"], &:focus-within { --input-color: var(--color-error); } @@ -606,6 +1020,248 @@ } } } + .collapse { + visibility: collapse; + } + .invisible { + visibility: hidden; + } + .visible { + visibility: visible; + } + .list { + display: flex; + flex-direction: column; + font-size: 0.875rem; + :where(.list-row) { + --list-grid-cols: minmax(0, auto) 1fr; + position: relative; + display: grid; + grid-auto-flow: column; + gap: calc(0.25rem * 4); + border-radius: var(--radius-box); + padding: calc(0.25rem * 4); + word-break: break-word; + grid-template-columns: var(--list-grid-cols); + &:has(.list-col-grow:nth-child(1)) { + --list-grid-cols: 1fr; + } + &:has(.list-col-grow:nth-child(2)) { + --list-grid-cols: minmax(0, auto) 1fr; + } + &:has(.list-col-grow:nth-child(3)) { + --list-grid-cols: minmax(0, auto) minmax(0, auto) 1fr; + } + &:has(.list-col-grow:nth-child(4)) { + --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr; + } + &:has(.list-col-grow:nth-child(5)) { + --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr; + } + &:has(.list-col-grow:nth-child(6)) { + --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) + minmax(0, auto) 1fr; + } + :not(.list-col-wrap) { + grid-row-start: 1; + } + } + & > :not(:last-child) { + &.list-row, .list-row { + &:after { + content: ""; + border-bottom: var(--border) solid; + inset-inline: var(--radius-box); + position: absolute; + bottom: calc(0.25rem * 0); + border-color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix(in oklab, var(--color-base-content) 5%, transparent); + } + } + } + } + } + .toast { + position: fixed; + inset-inline-start: auto; + inset-inline-end: calc(0.25rem * 4); + top: auto; + bottom: calc(0.25rem * 4); + display: flex; + flex-direction: column; + gap: calc(0.25rem * 2); + background-color: transparent; + translate: var(--toast-x, 0) var(--toast-y, 0); + width: max-content; + max-width: calc(100vw - 2rem); + & > * { + animation: toast 0.25s ease-out; + } + &:where(.toast-start) { + inset-inline-start: calc(0.25rem * 4); + inset-inline-end: auto; + --toast-x: 0; + } + &:where(.toast-center) { + inset-inline-start: calc(1/2 * 100%); + inset-inline-end: calc(1/2 * 100%); + --toast-x: -50%; + } + &:where(.toast-end) { + inset-inline-start: auto; + inset-inline-end: calc(0.25rem * 4); + --toast-x: 0; + } + &:where(.toast-bottom) { + top: auto; + bottom: calc(0.25rem * 4); + --toast-y: 0; + } + &:where(.toast-middle) { + top: calc(1/2 * 100%); + bottom: auto; + --toast-y: -50%; + } + &:where(.toast-top) { + top: calc(0.25rem * 4); + bottom: auto; + --toast-y: 0; + } + } + .toggle { + border: var(--border) solid currentColor; + color: var(--input-color); + position: relative; + display: inline-grid; + flex-shrink: 0; + cursor: pointer; + appearance: none; + place-content: center; + vertical-align: middle; + webkit-user-select: none; + user-select: none; + grid-template-columns: 0fr 1fr 1fr; + --radius-selector-max: calc( + var(--radius-selector) + var(--radius-selector) + var(--radius-selector) + ); + border-radius: calc( var(--radius-selector) + min(var(--toggle-p), var(--radius-selector-max)) + min(var(--border), var(--radius-selector-max)) ); + padding: var(--toggle-p); + box-shadow: 0 1px currentColor inset; + @supports (color: color-mix(in lab, red, red)) { + box-shadow: 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000) inset; + } + transition: color 0.3s, grid-template-columns 0.2s; + --input-color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + --input-color: color-mix(in oklab, var(--color-base-content) 50%, #0000); + } + --toggle-p: calc(var(--size) * 0.125); + --size: calc(var(--size-selector, 0.25rem) * 6); + width: calc((var(--size) * 2) - (var(--border) + var(--toggle-p)) * 2); + height: var(--size); + > * { + z-index: 1; + grid-column: span 1 / span 1; + grid-column-start: 2; + grid-row-start: 1; + height: 100%; + cursor: pointer; + appearance: none; + background-color: transparent; + padding: calc(0.25rem * 0.5); + transition: opacity 0.2s, rotate 0.4s; + border: none; + &:focus { + --tw-outline-style: none; + outline-style: none; + @media (forced-colors: active) { + outline: 2px solid transparent; + outline-offset: 2px; + } + } + &:nth-child(2) { + color: var(--color-base-100); + rotate: 0deg; + } + &:nth-child(3) { + color: var(--color-base-100); + opacity: 0%; + rotate: -15deg; + } + } + &:has(:checked) { + > :nth-child(2) { + opacity: 0%; + rotate: 15deg; + } + > :nth-child(3) { + opacity: 100%; + rotate: 0deg; + } + } + &:before { + position: relative; + inset-inline-start: calc(0.25rem * 0); + grid-column-start: 2; + grid-row-start: 1; + aspect-ratio: 1 / 1; + height: 100%; + border-radius: var(--radius-selector); + background-color: currentColor; + translate: 0; + --tw-content: ""; + content: var(--tw-content); + transition: background-color 0.1s, translate 0.2s, inset-inline-start 0.2s; + 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 currentColor; + @supports (color: color-mix(in lab, red, red)) { + 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 color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000); + } + background-size: auto, calc(var(--noise) * 100%); + background-image: none, var(--fx-noise); + } + @media (forced-colors: active) { + &:before { + outline-style: var(--tw-outline-style); + outline-width: 1px; + outline-offset: calc(1px * -1); + } + } + @media print { + &:before { + outline: 0.25rem solid; + outline-offset: -1rem; + } + } + &:focus-visible, &:has(:focus-visible) { + outline: 2px solid currentColor; + outline-offset: 2px; + } + &:checked, &[aria-checked="true"], &:has(> input:checked) { + grid-template-columns: 1fr 1fr 0fr; + background-color: var(--color-base-100); + --input-color: var(--color-base-content); + &:before { + background-color: currentColor; + } + @starting-style { + &:before { + opacity: 0; + } + } + } + &:indeterminate { + grid-template-columns: 0.5fr 1fr 0.5fr; + } + &:disabled { + cursor: not-allowed; + opacity: 30%; + &:before { + background-color: transparent; + border: var(--border) solid currentColor; + } + } + } .input { cursor: text; border: var(--border) solid #0000; @@ -622,6 +1278,7 @@ width: clamp(3rem, 20rem, 100%); height: var(--size); font-size: 0.875rem; + touch-action: manipulation; border-start-start-radius: var(--join-ss, var(--radius-field)); border-start-end-radius: var(--join-se, var(--radius-field)); border-end-start-radius: var(--join-es, var(--radius-field)); @@ -655,6 +1312,9 @@ } } } + :where(input[type="url"]), :where(input[type="email"]) { + direction: ltr; + } :where(input[type="date"]) { display: inline-block; } @@ -702,77 +1362,483 @@ inset-inline-end: 0.75em; } } - .card { + .indicator { position: relative; - display: flex; - flex-direction: column; + display: inline-flex; + width: max-content; + :where(.indicator-item) { + z-index: 1; + position: absolute; + white-space: nowrap; + top: var(--indicator-t, 0); + bottom: var(--indicator-b, auto); + left: var(--indicator-s, auto); + right: var(--indicator-e, 0); + translate: var(--indicator-x, 50%) var(--indicator-y, -50%); + } + } + .table { + font-size: 0.875rem; + position: relative; + width: 100%; border-radius: var(--radius-box); - outline-width: 2px; - transition: outline 0.2s ease-in-out; - outline: 0 solid #0000; - outline-offset: 2px; - &:focus { - --tw-outline-style: none; - outline-style: none; - @media (forced-colors: active) { - outline: 2px solid transparent; - outline-offset: 2px; + text-align: left; + &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { + text-align: right; + } + tr.row-hover { + &, &:nth-child(even) { + &:hover { + @media (hover: hover) { + background-color: var(--color-base-200); + } + } } } - &:focus-visible { - outline-color: currentColor; + :where(th, td) { + padding-inline: calc(0.25rem * 4); + padding-block: calc(0.25rem * 3); + vertical-align: middle; } - :where(figure:first-child) { - overflow: hidden; - border-start-start-radius: inherit; - border-start-end-radius: inherit; - border-end-start-radius: unset; - border-end-end-radius: unset; + :where(thead, tfoot) { + white-space: nowrap; + color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-base-content) 60%, transparent); + } + font-size: 0.875rem; + font-weight: 600; } - :where(figure:last-child) { - overflow: hidden; - border-start-start-radius: unset; - border-start-end-radius: unset; - border-end-start-radius: inherit; - border-end-end-radius: inherit; + :where(tfoot) { + border-top: var(--border) solid var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + border-top: var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000); + } } - &:where(.card-border) { - border: var(--border) solid var(--color-base-200); + :where(.table-pin-rows thead tr) { + position: sticky; + top: calc(0.25rem * 0); + z-index: 1; + background-color: var(--color-base-100); } - &:where(.card-dash) { - border: var(--border) dashed var(--color-base-200); + :where(.table-pin-rows tfoot tr) { + position: sticky; + bottom: calc(0.25rem * 0); + z-index: 1; + background-color: var(--color-base-100); } - &.image-full { + :where(.table-pin-cols tr th) { + position: sticky; + right: calc(0.25rem * 0); + left: calc(0.25rem * 0); + background-color: var(--color-base-100); + } + :where(thead tr, tbody tr:not(:last-child)) { + border-bottom: var(--border) solid var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + border-bottom: var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000); + } + } + } + .steps { + display: inline-grid; + grid-auto-flow: column; + overflow: hidden; + overflow-x: auto; + counter-reset: step; + grid-auto-columns: 1fr; + .step { display: grid; - > * { + grid-template-columns: repeat(1, minmax(0, 1fr)); + grid-template-columns: auto; + grid-template-rows: repeat(2, minmax(0, 1fr)); + grid-template-rows: 40px 1fr; + place-items: center; + text-align: center; + min-width: 4rem; + --step-bg: var(--color-base-300); + --step-fg: var(--color-base-content); + &:before { + top: calc(0.25rem * 0); grid-column-start: 1; grid-row-start: 1; + height: calc(0.25rem * 2); + width: 100%; + border: 1px solid; + color: var(--step-bg); + background-color: var(--step-bg); + --tw-content: ""; + content: var(--tw-content); + margin-inline-start: -100%; } - > .card-body { + > .step-icon, &:not(:has(.step-icon)):after { + content: counter(step); + counter-increment: step; + z-index: 1; + color: var(--step-fg); + background-color: var(--step-bg); + border: 1px solid var(--step-bg); position: relative; - color: var(--color-neutral-content); + grid-column-start: 1; + grid-row-start: 1; + display: grid; + height: calc(0.25rem * 8); + width: calc(0.25rem * 8); + place-items: center; + place-self: center; + border-radius: calc(infinity * 1px); } - :where(figure) { - overflow: hidden; - border-radius: inherit; + &:first-child:before { + content: none; } - > figure img { - height: 100%; - object-fit: cover; - filter: brightness(28%); + &[data-content]:after { + content: attr(data-content); } } - figure { - display: flex; - align-items: center; - justify-content: center; + .step-neutral { + + .step-neutral:before, &:after, > .step-icon { + --step-bg: var(--color-neutral); + --step-fg: var(--color-neutral-content); + } } - &:has(> input:is(input[type="checkbox"], input[type="radio"])) { - cursor: pointer; - user-select: none; + .step-primary { + + .step-primary:before, &:after, > .step-icon { + --step-bg: var(--color-primary); + --step-fg: var(--color-primary-content); + } } - &:has(> :checked) { - outline: 2px solid currentColor; + .step-secondary { + + .step-secondary:before, &:after, > .step-icon { + --step-bg: var(--color-secondary); + --step-fg: var(--color-secondary-content); + } + } + .step-accent { + + .step-accent:before, &:after, > .step-icon { + --step-bg: var(--color-accent); + --step-fg: var(--color-accent-content); + } + } + .step-info { + + .step-info:before, &:after, > .step-icon { + --step-bg: var(--color-info); + --step-fg: var(--color-info-content); + } + } + .step-success { + + .step-success:before, &:after, > .step-icon { + --step-bg: var(--color-success); + --step-fg: var(--color-success-content); + } + } + .step-warning { + + .step-warning:before, &:after, > .step-icon { + --step-bg: var(--color-warning); + --step-fg: var(--color-warning-content); + } + } + .step-error { + + .step-error:before, &:after, > .step-icon { + --step-bg: var(--color-error); + --step-fg: var(--color-error-content); + } + } + } + .range { + appearance: none; + webkit-appearance: none; + --range-thumb: var(--color-base-100); + --range-thumb-size: calc(var(--size-selector, 0.25rem) * 6); + --range-progress: currentColor; + --range-fill: 1; + --range-p: 0.25rem; + --range-bg: currentColor; + @supports (color: color-mix(in lab, red, red)) { + --range-bg: color-mix(in oklab, currentColor 10%, #0000); + } + cursor: pointer; + overflow: hidden; + background-color: transparent; + vertical-align: middle; + width: clamp(3rem, 20rem, 100%); + --radius-selector-max: calc( + var(--radius-selector) + var(--radius-selector) + var(--radius-selector) + ); + border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max))); + border: none; + height: var(--range-thumb-size); + [dir="rtl"] & { + --range-dir: -1; + } + &:focus { + outline: none; + } + &:focus-visible { + outline: 2px solid; + outline-offset: 2px; + } + &::-webkit-slider-runnable-track { + width: 100%; + background-color: var(--range-bg); + border-radius: var(--radius-selector); + height: calc(var(--range-thumb-size) * 0.5); + } + @media (forced-colors: active) { + &::-webkit-slider-runnable-track { + border: 1px solid; + } + } + @media (forced-colors: active) { + &::-moz-range-track { + border: 1px solid; + } + } + &::-webkit-slider-thumb { + position: relative; + box-sizing: border-box; + border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max))); + background-color: currentColor; + height: var(--range-thumb-size); + width: var(--range-thumb-size); + border: var(--range-p) solid; + appearance: none; + webkit-appearance: none; + top: 50%; + color: var(--range-progress); + transform: translateY(-50%); + 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 currentColor, 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100rem) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100rem * var(--range-fill)); + @supports (color: color-mix(in lab, red, red)) { + 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 color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000), 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100rem) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100rem * var(--range-fill)); + } + } + &::-moz-range-track { + width: 100%; + background-color: var(--range-bg); + border-radius: var(--radius-selector); + height: calc(var(--range-thumb-size) * 0.5); + } + &::-moz-range-thumb { + position: relative; + box-sizing: border-box; + border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max))); + background-color: currentColor; + height: var(--range-thumb-size); + width: var(--range-thumb-size); + border: var(--range-p) solid; + top: 50%; + color: var(--range-progress); + 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 currentColor, 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100rem) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100rem * var(--range-fill)); + @supports (color: color-mix(in lab, red, red)) { + 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 color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000), 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100rem) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100rem * var(--range-fill)); + } + } + &:disabled { + cursor: not-allowed; + opacity: 30%; + } + } + .range\! { + appearance: none !important; + webkit-appearance: none !important; + --range-thumb: var(--color-base-100) !important; + --range-thumb-size: calc(var(--size-selector, 0.25rem) * 6) !important; + --range-progress: currentColor !important; + --range-fill: 1 !important; + --range-p: 0.25rem !important; + --range-bg: currentColor !important; + @supports (color: color-mix(in lab, red, red)) { + --range-bg: color-mix(in oklab, currentColor 10%, #0000) !important; + } + cursor: pointer !important; + overflow: hidden !important; + background-color: transparent !important; + vertical-align: middle !important; + width: clamp(3rem, 20rem, 100%) !important; + --radius-selector-max: calc( + var(--radius-selector) + var(--radius-selector) + var(--radius-selector) + ) !important; + border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max))) !important; + border: none !important; + height: var(--range-thumb-size) !important; + [dir="rtl"] & { + --range-dir: -1 !important; + } + &:focus { + outline: none !important; + } + &:focus-visible { + outline: 2px solid !important; + outline-offset: 2px !important; + } + &::-webkit-slider-runnable-track { + width: 100% !important; + background-color: var(--range-bg) !important; + border-radius: var(--radius-selector) !important; + height: calc(var(--range-thumb-size) * 0.5) !important; + } + @media (forced-colors: active) { + &::-webkit-slider-runnable-track { + border: 1px solid !important; + } + } + @media (forced-colors: active) { + &::-moz-range-track { + border: 1px solid !important; + } + } + &::-webkit-slider-thumb { + position: relative !important; + box-sizing: border-box !important; + border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max))) !important; + background-color: currentColor !important; + height: var(--range-thumb-size) !important; + width: var(--range-thumb-size) !important; + border: var(--range-p) solid !important; + appearance: none !important; + webkit-appearance: none !important; + top: 50% !important; + color: var(--range-progress) !important; + transform: translateY(-50%) !important; + 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 currentColor, 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100rem) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100rem * var(--range-fill)) !important; + @supports (color: color-mix(in lab, red, red)) { + 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 color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000), 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100rem) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100rem * var(--range-fill)) !important; + } + } + &::-moz-range-track { + width: 100% !important; + background-color: var(--range-bg) !important; + border-radius: var(--radius-selector) !important; + height: calc(var(--range-thumb-size) * 0.5) !important; + } + &::-moz-range-thumb { + position: relative !important; + box-sizing: border-box !important; + border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max))) !important; + background-color: currentColor !important; + height: var(--range-thumb-size) !important; + width: var(--range-thumb-size) !important; + border: var(--range-p) solid !important; + top: 50% !important; + color: var(--range-progress) !important; + 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 currentColor, 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100rem) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100rem * var(--range-fill)) !important; + @supports (color: color-mix(in lab, red, red)) { + 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 color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000), 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100rem) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100rem * var(--range-fill)) !important; + } + } + &:disabled { + cursor: not-allowed !important; + opacity: 30% !important; + } + } + .countdown { + display: inline-flex; + &.countdown { + line-height: 1em; + } + & > * { + display: inline-block; + overflow-y: hidden; + height: 1em; + &:before { + position: relative; + content: "00\A 01\A 02\A 03\A 04\A 05\A 06\A 07\A 08\A 09\A 10\A 11\A 12\A 13\A 14\A 15\A 16\A 17\A 18\A 19\A 20\A 21\A 22\A 23\A 24\A 25\A 26\A 27\A 28\A 29\A 30\A 31\A 32\A 33\A 34\A 35\A 36\A 37\A 38\A 39\A 40\A 41\A 42\A 43\A 44\A 45\A 46\A 47\A 48\A 49\A 50\A 51\A 52\A 53\A 54\A 55\A 56\A 57\A 58\A 59\A 60\A 61\A 62\A 63\A 64\A 65\A 66\A 67\A 68\A 69\A 70\A 71\A 72\A 73\A 74\A 75\A 76\A 77\A 78\A 79\A 80\A 81\A 82\A 83\A 84\A 85\A 86\A 87\A 88\A 89\A 90\A 91\A 92\A 93\A 94\A 95\A 96\A 97\A 98\A 99\A"; + white-space: pre; + top: calc(var(--value) * -1em); + text-align: center; + transition: all 1s cubic-bezier(1, 0, 0, 1); + } + } + } + .select { + border: var(--border) solid #0000; + position: relative; + display: inline-flex; + flex-shrink: 1; + appearance: none; + align-items: center; + gap: calc(0.25rem * 1.5); + background-color: var(--color-base-100); + padding-inline-start: calc(0.25rem * 4); + padding-inline-end: calc(0.25rem * 7); + vertical-align: middle; + width: clamp(3rem, 20rem, 100%); + height: var(--size); + font-size: 0.875rem; + touch-action: manipulation; + border-start-start-radius: var(--join-ss, var(--radius-field)); + border-start-end-radius: var(--join-se, var(--radius-field)); + border-end-start-radius: var(--join-es, var(--radius-field)); + border-end-end-radius: var(--join-ee, var(--radius-field)); + background-image: linear-gradient(45deg, #0000 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, #0000 50%); + background-position: calc(100% - 20px) calc(1px + 50%), calc(100% - 16.1px) calc(1px + 50%); + background-size: 4px 4px, 4px 4px; + background-repeat: no-repeat; + text-overflow: ellipsis; + box-shadow: 0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset; + @supports (color: color-mix(in lab, red, red)) { + box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset; + } + border-color: var(--input-color); + --input-color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000); + } + --size: calc(var(--size-field, 0.25rem) * 10); + [dir="rtl"] & { + background-position: calc(0% + 12px) calc(1px + 50%), calc(0% + 16px) calc(1px + 50%); + } + select { + margin-inline-start: calc(0.25rem * -4); + margin-inline-end: calc(0.25rem * -7); + width: calc(100% + 2.75rem); + appearance: none; + padding-inline-start: calc(0.25rem * 4); + padding-inline-end: calc(0.25rem * 7); + height: calc(100% - 2px); + background: inherit; + border-radius: inherit; + border-style: none; + &:focus, &:focus-within { + --tw-outline-style: none; + outline-style: none; + @media (forced-colors: active) { + outline: 2px solid transparent; + outline-offset: 2px; + } + } + &:not(:last-child) { + margin-inline-end: calc(0.25rem * -5.5); + background-image: none; + } + } + &:focus, &:focus-within { + --input-color: var(--color-base-content); + box-shadow: 0 1px var(--input-color); + @supports (color: color-mix(in lab, red, red)) { + box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000); + } + outline: 2px solid var(--input-color); + outline-offset: 2px; + isolation: isolate; + z-index: 1; + } + &:has(> select[disabled]), &:is(:disabled, [disabled]) { + cursor: not-allowed; + border-color: var(--color-base-200); + background-color: var(--color-base-200); + color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-base-content) 40%, transparent); + } + &::placeholder { + color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-base-content) 20%, transparent); + } + } + } + &:has(> select[disabled]) > select[disabled] { + cursor: not-allowed; } } .checkbox { @@ -781,6 +1847,7 @@ border: var(--border) solid var(--input-color, color-mix(in oklab, var(--color-base-content) 20%, #0000)); } position: relative; + display: inline-block; flex-shrink: 0; cursor: pointer; appearance: none; @@ -852,6 +1919,115 @@ opacity: 20%; } } + .radio { + position: relative; + display: inline-block; + flex-shrink: 0; + cursor: pointer; + appearance: none; + border-radius: calc(infinity * 1px); + padding: calc(0.25rem * 1); + vertical-align: middle; + border: var(--border) solid var(--input-color, currentColor); + @supports (color: color-mix(in lab, red, red)) { + border: var(--border) solid var(--input-color, color-mix(in srgb, currentColor 20%, #0000)); + } + box-shadow: 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset; + --size: calc(var(--size-selector, 0.25rem) * 6); + width: var(--size); + height: var(--size); + color: var(--input-color, currentColor); + &:before { + display: block; + width: 100%; + height: 100%; + border-radius: calc(infinity * 1px); + --tw-content: ""; + content: var(--tw-content); + background-size: auto, calc(var(--noise) * 100%); + background-image: none, var(--fx-noise); + } + &:focus-visible { + outline: 2px solid currentColor; + } + &:checked, &[aria-checked="true"] { + animation: radio 0.2s ease-out; + border-color: currentColor; + background-color: var(--color-base-100); + &: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)); + } + @media (forced-colors: active) { + &:before { + outline-style: var(--tw-outline-style); + outline-width: 1px; + outline-offset: calc(1px * -1); + } + } + @media print { + &:before { + outline: 0.25rem solid; + outline-offset: -1rem; + } + } + } + &:disabled { + cursor: not-allowed; + opacity: 20%; + } + } + .stats { + position: relative; + display: inline-grid; + grid-auto-flow: column; + overflow-x: auto; + border-radius: var(--radius-box); + } + .progress { + position: relative; + height: calc(0.25rem * 2); + width: 100%; + appearance: none; + overflow: hidden; + border-radius: var(--radius-box); + background-color: currentColor; + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, currentColor 20%, transparent); + } + color: var(--color-base-content); + &:indeterminate { + 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; + @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; + } + } + } + @supports (-moz-appearance: none) { + &::-moz-progress-bar { + border-radius: var(--radius-box); + background-color: currentColor; + } + } + @supports (-webkit-appearance: none) { + &::-webkit-progress-bar { + border-radius: var(--radius-box); + background-color: transparent; + } + &::-webkit-progress-value { + border-radius: var(--radius-box); + background-color: currentColor; + } + } + } .absolute { position: absolute; } @@ -861,11 +2037,42 @@ .relative { position: relative; } - .inset-y-0 { - inset-block: calc(var(--spacing) * 0); + .static { + position: static; } - .top-0 { - top: calc(var(--spacing) * 0); + .sticky { + position: sticky; + } + .inset-0 { + inset: calc(var(--spacing) * 0); + } + .dropdown-center { + --anchor-h: center; + :where(.dropdown-content) { + inset-inline-end: calc(1/2 * 100%); + translate: 50% 0; + [dir="rtl"] & { + translate: -50% 0; + } + } + &.dropdown-left { + --anchor-h: left; + --anchor-v: center; + .dropdown-content { + top: auto; + bottom: calc(1/2 * 100%); + translate: 0 50%; + } + } + &.dropdown-right { + --anchor-h: right; + --anchor-v: center; + .dropdown-content { + top: auto; + bottom: calc(1/2 * 100%); + translate: 0 50%; + } + } } .top-4 { top: calc(var(--spacing) * 4); @@ -876,9 +2083,6 @@ .right-4 { right: calc(var(--spacing) * 4); } - .left-0 { - left: calc(var(--spacing) * 0); - } .left-4 { left: calc(var(--spacing) * 4); } @@ -895,6 +2099,7 @@ padding-inline-start: 0.75rem; padding-inline-end: 0.75rem; font-size: 0.875rem; + touch-action: manipulation; border-color: var(--input-color); box-shadow: 0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset; @supports (color: color-mix(in lab, red, red)) { @@ -947,24 +2152,254 @@ cursor: not-allowed; } } + .stack { + display: inline-grid; + grid-template-columns: 3px 4px 1fr 4px 3px; + grid-template-rows: 3px 4px 1fr 4px 3px; + & > * { + height: 100%; + width: 100%; + &:nth-child(n + 2) { + width: 100%; + opacity: 70%; + } + &:nth-child(2) { + z-index: 2; + opacity: 90%; + } + &:nth-child(1) { + z-index: 3; + width: 100%; + } + } + &, &.stack-bottom { + > * { + grid-column: 3 / 4; + grid-row: 3 / 6; + &:nth-child(2) { + grid-column: 2 / 5; + grid-row: 2 / 5; + } + &:nth-child(1) { + grid-column: 1 / 6; + grid-row: 1 / 4; + } + } + } + &.stack-top { + > * { + grid-column: 3 / 4; + grid-row: 1 / 4; + &:nth-child(2) { + grid-column: 2 / 5; + grid-row: 2 / 5; + } + &:nth-child(1) { + grid-column: 1 / 6; + grid-row: 3 / 6; + } + } + } + &.stack-start { + > * { + grid-column: 1 / 4; + grid-row: 3 / 4; + &:nth-child(2) { + grid-column: 2 / 5; + grid-row: 2 / 5; + } + &:nth-child(1) { + grid-column: 3 / 6; + grid-row: 1 / 6; + } + } + } + &.stack-end { + > * { + grid-column: 3 / 6; + grid-row: 3 / 4; + &:nth-child(2) { + grid-column: 2 / 5; + grid-row: 2 / 5; + } + &:nth-child(1) { + grid-column: 1 / 4; + grid-row: 1 / 6; + } + } + } + } + .modal-backdrop { + grid-column-start: 1; + grid-row-start: 1; + display: grid; + align-self: stretch; + justify-self: stretch; + color: transparent; + z-index: -1; + button { + cursor: pointer; + } + } + .z-10 { + z-index: 10; + } + .z-20 { + z-index: 20; + } .z-40 { z-index: 40; } .z-50 { z-index: 50; } + .hero { + display: grid; + width: 100%; + place-items: center; + background-size: cover; + background-position: center; + & > * { + grid-column-start: 1; + grid-row-start: 1; + } + } + .stat-value { + grid-column-start: 1; + white-space: nowrap; + font-size: 2rem; + font-weight: 800; + } + .stat-desc { + grid-column-start: 1; + white-space: nowrap; + color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-base-content) 60%, transparent); + } + font-size: 0.75rem; + } + .stat-title { + grid-column-start: 1; + white-space: nowrap; + color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-base-content) 60%, transparent); + } + font-size: 0.75rem; + } + .container { + width: 100%; + @media (width >= 40rem) { + max-width: 40rem; + } + @media (width >= 48rem) { + max-width: 48rem; + } + @media (width >= 64rem) { + max-width: 64rem; + } + @media (width >= 80rem) { + max-width: 80rem; + } + @media (width >= 96rem) { + max-width: 96rem; + } + } .m-4 { margin: calc(var(--spacing) * 4); } .m-6 { margin: calc(var(--spacing) * 6); } + .filter { + display: flex; + flex-wrap: wrap; + input[type="radio"] { + width: auto; + } + input { + overflow: hidden; + opacity: 100%; + scale: 1; + transition: margin 0.1s, opacity 0.3s, padding 0.3s, border-width 0.1s; + &:not(:last-child) { + margin-inline-end: calc(0.25rem * 1); + } + &.filter-reset { + aspect-ratio: 1 / 1; + &::after { + content: "×"; + } + } + } + &:not(:has(input:checked:not(.filter-reset))) { + .filter-reset, input[type="reset"] { + scale: 0; + border-width: 0; + margin-inline: calc(0.25rem * 0); + width: calc(0.25rem * 0); + padding-inline: calc(0.25rem * 0); + opacity: 0%; + } + } + &:has(input:checked:not(.filter-reset)) { + input:not(:checked, .filter-reset, input[type="reset"]) { + scale: 0; + border-width: 0; + margin-inline: calc(0.25rem * 0); + width: calc(0.25rem * 0); + padding-inline: calc(0.25rem * 0); + opacity: 0%; + } + } + } .mx-auto { margin-inline: auto; } + .my-4 { + margin-block: calc(var(--spacing) * 4); + } .my-5 { margin-block: calc(var(--spacing) * 5); } + .label { + 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); + } + } + } + } .mt-1 { margin-top: calc(var(--spacing) * 1); } @@ -983,12 +2418,27 @@ .mr-3 { margin-right: calc(var(--spacing) * 3); } + .mb-2 { + margin-bottom: calc(var(--spacing) * 2); + } .mb-4 { margin-bottom: calc(var(--spacing) * 4); } .mb-6 { margin-bottom: calc(var(--spacing) * 6); } + .mb-8 { + margin-bottom: calc(var(--spacing) * 8); + } + .ml-2 { + margin-left: calc(var(--spacing) * 2); + } + .carousel-item { + box-sizing: content-box; + display: flex; + flex: none; + scroll-snap-align: start; + } .box-content { box-sizing: content-box; } @@ -1018,27 +2468,274 @@ box-shadow: 0 2px 3px -1px color-mix(in oklab, currentColor calc(var(--depth) * 100%), #0000); } } - .card-body { - display: flex; - flex: auto; - flex-direction: column; - gap: calc(0.25rem * 2); - padding: var(--card-p, 1.5rem); - font-size: var(--card-fs, 0.875rem); - :where(p) { - flex-grow: 1; + .status\! { + display: inline-block !important; + aspect-ratio: 1 / 1 !important; + width: calc(0.25rem * 2) !important; + height: calc(0.25rem * 2) !important; + border-radius: var(--radius-selector) !important; + background-color: var(--color-base-content) !important; + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-base-content) 20%, transparent) !important; + } + background-position: center !important; + background-repeat: no-repeat !important; + vertical-align: middle !important; + color: color-mix(in srgb, #000 30%, transparent) !important; + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in srgb, #000 30%, transparent) !important; + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-black) 30%, transparent) !important; + } + } + background-image: radial-gradient( circle at 35% 30%, oklch(1 0 0 / calc(var(--depth) * 0.5)), #0000 ) !important; + box-shadow: 0 2px 3px -1px currentColor !important; + @supports (color: color-mix(in lab, red, red)) { + box-shadow: 0 2px 3px -1px color-mix(in oklab, currentColor calc(var(--depth) * 100%), #0000) !important; } } - .card-title { - display: flex; + .badge { + display: inline-flex; align-items: center; + justify-content: center; gap: calc(0.25rem * 2); - font-size: var(--cardtitle-fs, 1.125rem); - font-weight: 600; + border-radius: var(--radius-selector); + vertical-align: middle; + color: var(--badge-fg); + border: var(--border) solid var(--badge-color, var(--color-base-200)); + font-size: 0.875rem; + width: fit-content; + padding-inline: calc(0.25rem * 3 - var(--border)); + background-size: auto, calc(var(--noise) * 100%); + background-image: none, var(--fx-noise); + background-color: var(--badge-bg); + --badge-bg: var(--badge-color, var(--color-base-100)); + --badge-fg: var(--color-base-content); + --size: calc(var(--size-selector, 0.25rem) * 6); + height: var(--size); + } + .kbd { + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: var(--radius-field); + background-color: var(--color-base-200); + vertical-align: middle; + padding-left: 0.5em; + padding-right: 0.5em; + border: var(--border) solid var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + border: var(--border) solid color-mix(in srgb, var(--color-base-content) 20%, #0000); + } + border-bottom: calc(var(--border) + 1px) solid var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + border-bottom: calc(var(--border) + 1px) solid color-mix(in srgb, var(--color-base-content) 20%, #0000); + } + --size: calc(var(--size-selector, 0.25rem) * 6); + font-size: 0.875rem; + height: var(--size); + min-width: var(--size); + } + .tabs { + display: flex; + flex-wrap: wrap; + --tabs-height: auto; + --tabs-direction: row; + --tab-height: calc(var(--size-field, 0.25rem) * 10); + height: var(--tabs-height); + flex-direction: var(--tabs-direction); + } + .navbar { + display: flex; + width: 100%; + align-items: center; + padding: 0.5rem; + min-height: 4rem; + } + .footer { + display: grid; + width: 100%; + grid-auto-flow: row; + place-items: start; + column-gap: calc(0.25rem * 4); + row-gap: calc(0.25rem * 10); + font-size: 0.875rem; + line-height: 1.25rem; + & > * { + display: grid; + place-items: start; + gap: calc(0.25rem * 2); + } + &.footer-center { + grid-auto-flow: column dense; + place-items: center; + text-align: center; + & > * { + place-items: center; + } + } + } + .stat { + display: inline-grid; + width: 100%; + column-gap: calc(0.25rem * 4); + padding-inline: calc(0.25rem * 6); + padding-block: calc(0.25rem * 4); + grid-template-columns: repeat(1, 1fr); + &:not(:last-child) { + border-inline-end: var(--border) dashed currentColor; + @supports (color: color-mix(in lab, red, red)) { + border-inline-end: var(--border) dashed color-mix(in oklab, currentColor 10%, #0000); + } + border-block-end: none; + } + } + .carousel { + display: inline-flex; + overflow-x: scroll; + scroll-snap-type: x mandatory; + scroll-behavior: smooth; + scrollbar-width: none; + &::-webkit-scrollbar { + display: none; + } + } + .alert { + display: grid; + align-items: center; + gap: calc(0.25rem * 4); + border-radius: var(--radius-box); + padding-inline: calc(0.25rem * 4); + padding-block: calc(0.25rem * 3); + color: var(--color-base-content); + background-color: var(--alert-color, var(--color-base-200)); + justify-content: start; + justify-items: start; + grid-auto-flow: column; + grid-template-columns: auto; + text-align: start; + border: var(--border) solid var(--color-base-200); + font-size: 0.875rem; + line-height: 1.25rem; + background-size: auto, calc(var(--noise) * 100%); + background-image: none, var(--fx-noise); + box-shadow: 0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * 0.08)) inset, 0 1px #000, 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * 0.08)); + @supports (color: color-mix(in lab, red, red)) { + box-shadow: 0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * 0.08)) inset, 0 1px color-mix( in oklab, color-mix(in oklab, #000 20%, var(--alert-color, var(--color-base-200))) calc(var(--depth) * 20%), #0000 ), 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * 0.08)); + } + &:has(:nth-child(2)) { + grid-template-columns: auto minmax(auto, 1fr); + } + &.alert-outline { + background-color: transparent; + color: var(--alert-color); + box-shadow: none; + background-image: none; + } + &.alert-dash { + background-color: transparent; + color: var(--alert-color); + border-style: dashed; + box-shadow: none; + background-image: none; + } + &.alert-soft { + color: var(--alert-color, var(--color-base-content)); + background: var(--alert-color, var(--color-base-content)); + @supports (color: color-mix(in lab, red, red)) { + background: color-mix( in oklab, var(--alert-color, var(--color-base-content)) 8%, var(--color-base-100) ); + } + border-color: var(--alert-color, var(--color-base-content)); + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix( in oklab, var(--alert-color, var(--color-base-content)) 10%, var(--color-base-100) ); + } + box-shadow: none; + background-image: none; + } + } + .fieldset { + display: grid; + gap: calc(0.25rem * 1.5); + padding-block: calc(0.25rem * 1); + font-size: 0.75rem; + grid-template-columns: 1fr; + grid-auto-rows: max-content; + } + .join { + display: inline-flex; + align-items: stretch; + --join-ss: 0; + --join-se: 0; + --join-es: 0; + --join-ee: 0; + :where(.join-item) { + border-start-start-radius: var(--join-ss, 0); + border-start-end-radius: var(--join-se, 0); + border-end-start-radius: var(--join-es, 0); + border-end-end-radius: var(--join-ee, 0); + * { + --join-ss: var(--radius-field); + --join-se: var(--radius-field); + --join-es: var(--radius-field); + --join-ee: var(--radius-field); + } + } + > .join-item:where(:first-child) { + --join-ss: var(--radius-field); + --join-se: 0; + --join-es: var(--radius-field); + --join-ee: 0; + } + :first-child:not(:last-child) { + :where(.join-item) { + --join-ss: var(--radius-field); + --join-se: 0; + --join-es: var(--radius-field); + --join-ee: 0; + } + } + > .join-item:where(:last-child) { + --join-ss: 0; + --join-se: var(--radius-field); + --join-es: 0; + --join-ee: var(--radius-field); + } + :last-child:not(:first-child) { + :where(.join-item) { + --join-ss: 0; + --join-se: var(--radius-field); + --join-es: 0; + --join-ee: var(--radius-field); + } + } + > .join-item:where(:only-child) { + --join-ss: var(--radius-field); + --join-se: var(--radius-field); + --join-es: var(--radius-field); + --join-ee: var(--radius-field); + } + :only-child { + :where(.join-item) { + --join-ss: var(--radius-field); + --join-se: var(--radius-field); + --join-es: var(--radius-field); + --join-ee: var(--radius-field); + } + } + } + .mask { + display: inline-block; + vertical-align: middle; + mask-size: contain; + mask-repeat: no-repeat; + mask-position: center; } .block { display: block; } + .contents { + display: contents; + } .flex { display: flex; } @@ -1048,18 +2745,57 @@ .hidden { display: none; } + .inline { + display: inline; + } .inline-block { display: inline-block; } + .inline-flex { + display: inline-flex; + } + .inline-grid { + display: inline-grid; + } + .inline-table { + display: inline-table; + } + .list-item { + display: list-item; + } + .table { + display: table; + } + .table-caption { + display: table-caption; + } + .table-cell { + display: table-cell; + } + .table-column { + display: table-column; + } + .table-column-group { + display: table-column-group; + } + .table-footer-group { + display: table-footer-group; + } + .table-header-group { + display: table-header-group; + } + .table-row { + display: table-row; + } + .table-row-group { + display: table-row-group; + } .btn-circle { border-radius: calc(infinity * 1px); padding-inline: calc(0.25rem * 0); width: var(--size); height: var(--size); } - .h-3 { - height: calc(var(--spacing) * 3); - } .h-5 { height: calc(var(--spacing) * 5); } @@ -1072,12 +2808,18 @@ .h-16 { height: calc(var(--spacing) * 16); } + .h-20 { + height: calc(var(--spacing) * 20); + } .h-48 { height: calc(var(--spacing) * 48); } .h-\[1em\] { height: 1em; } + .h-auto { + height: auto; + } .h-full { height: 100%; } @@ -1096,9 +2838,6 @@ .w-0 { width: calc(var(--spacing) * 0); } - .w-3 { - width: calc(var(--spacing) * 3); - } .w-5 { width: calc(var(--spacing) * 5); } @@ -1108,17 +2847,14 @@ .w-9 { width: calc(var(--spacing) * 9); } - .w-13 { - width: calc(var(--spacing) * 13); - } .w-14 { width: calc(var(--spacing) * 14); } .w-16 { width: calc(var(--spacing) * 16); } - .w-48 { - width: calc(var(--spacing) * 48); + .w-20 { + width: calc(var(--spacing) * 20); } .w-64 { width: calc(var(--spacing) * 64); @@ -1129,12 +2865,24 @@ .w-full { width: 100%; } + .max-w-screen-lg { + max-width: var(--breakpoint-lg); + } .flex-1 { flex: 1; } .flex-none { flex: none; } + .flex-shrink { + flex-shrink: 1; + } + .flex-grow { + flex-grow: 1; + } + .border-collapse { + border-collapse: collapse; + } .-translate-x-full { --tw-translate-x: -100%; translate: var(--tw-translate-x) var(--tw-translate-y); @@ -1142,6 +2890,19 @@ .transform { transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } + .skeleton { + border-radius: var(--radius-box); + background-color: var(--color-base-300); + @media (prefers-reduced-motion: reduce) { + 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%; + } .link { cursor: pointer; text-decoration-line: underline; @@ -1161,36 +2922,75 @@ .cursor-pointer { cursor: pointer; } + .resize { + resize: both; + } + .stats-horizontal { + grid-auto-flow: column; + overflow-x: auto; + .stat:not(:last-child) { + border-inline-end: var(--border) dashed currentColor; + @supports (color: color-mix(in lab, red, red)) { + border-inline-end: var(--border) dashed color-mix(in oklab, currentColor 10%, #0000); + } + border-block-end: none; + } + } + .stats-vertical { + grid-auto-flow: row; + overflow-y: auto; + .stat:not(:last-child) { + border-inline-end: none; + border-block-end: var(--border) dashed currentColor; + @supports (color: color-mix(in lab, red, red)) { + border-block-end: var(--border) dashed color-mix(in oklab, currentColor 10%, #0000); + } + } + } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } + .grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } .flex-col { flex-direction: column; } + .flex-wrap { + flex-wrap: wrap; + } + .place-items-center { + place-items: center; + } .items-center { align-items: center; } + .items-start { + align-items: flex-start; + } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } + .justify-start { + justify-content: flex-start; + } + .justify-items-center { + justify-items: center; + } .gap-1 { gap: calc(var(--spacing) * 1); } .gap-2 { gap: calc(var(--spacing) * 2); } - .gap-6 { - gap: calc(var(--spacing) * 6); + .gap-4 { + gap: calc(var(--spacing) * 4); } - .space-y-1 { - :where(& > :not(:last-child)) { - --tw-space-y-reverse: 0; - margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse)); - margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse))); - } + .gap-8 { + gap: calc(var(--spacing) * 8); } .space-y-2 { :where(& > :not(:last-child)) { @@ -1199,6 +2999,13 @@ margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse))); } } + .space-y-4 { + :where(& > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse))); + } + } .space-y-6 { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; @@ -1206,25 +3013,31 @@ margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse))); } } - .space-x-4 { + .space-x-2 { :where(& > :not(:last-child)) { --tw-space-x-reverse: 0; - margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse)); - margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse))); + margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse)); + margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse))); } } - .space-x-6 { + .space-x-8 { :where(& > :not(:last-child)) { --tw-space-x-reverse: 0; - margin-inline-start: calc(calc(var(--spacing) * 6) * var(--tw-space-x-reverse)); - margin-inline-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-x-reverse))); + margin-inline-start: calc(calc(var(--spacing) * 8) * var(--tw-space-x-reverse)); + margin-inline-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-x-reverse))); } } + .self-end { + align-self: flex-end; + } + .self-start { + align-self: flex-start; + } .overflow-hidden { overflow: hidden; } - .overflow-y-auto { - overflow-y: auto; + .rounded { + border-radius: 0.25rem; } .rounded-full { border-radius: calc(infinity * 1px); @@ -1232,9 +3045,6 @@ .rounded-lg { border-radius: var(--radius-lg); } - .rounded-md { - border-radius: var(--radius-md); - } .border { border-style: var(--tw-border-style); border-width: 1px; @@ -1242,15 +3052,35 @@ .border-gray-200 { border-color: var(--color-gray-200); } + .glass { + border: none; + backdrop-filter: blur(var(--glass-blur, 40px)); + background-color: #0000; + background-image: linear-gradient( 135deg, oklch(100% 0 0 / var(--glass-opacity, 30%)) 0%, oklch(0% 0 0 / 0%) 100% ), linear-gradient( var(--glass-reflect-degree, 100deg), oklch(100% 0 0 / var(--glass-reflect-opacity, 5%)) 25%, oklch(0% 0 0 / 0%) 25% ); + box-shadow: 0 0 0 1px oklch(100% 0 0 / var(--glass-border-opacity, 20%)) inset, 0 0 0 2px oklch(0% 0 0 / 5%); + text-shadow: 0 1px oklch(0% 0 0 / var(--glass-text-shadow-opacity, 5%)); + } .bg-base-100 { background-color: var(--color-base-100); } .bg-base-200 { background-color: var(--color-base-200); } + .bg-black { + background-color: var(--color-black); + } + .bg-gray-50 { + background-color: var(--color-gray-50); + } .bg-gray-100 { background-color: var(--color-gray-100); } + .bg-gray-200 { + background-color: var(--color-gray-200); + } + .bg-green-50 { + background-color: var(--color-green-50); + } .bg-neutral { background-color: var(--color-neutral); } @@ -1263,6 +3093,15 @@ .loading-spinner { mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E"); } + .bg-cover { + background-size: cover; + } + .bg-center { + background-position: center; + } + .mask-repeat { + mask-repeat: repeat; + } .object-cover { object-fit: cover; } @@ -1275,8 +3114,8 @@ .p-6 { padding: calc(var(--spacing) * 6); } - .px-2 { - padding-inline: calc(var(--spacing) * 2); + .p-10 { + padding: calc(var(--spacing) * 10); } .px-4 { padding-inline: calc(var(--spacing) * 4); @@ -1284,6 +3123,9 @@ .px-6 { padding-inline: calc(var(--spacing) * 6); } + .px-8 { + padding-inline: calc(var(--spacing) * 8); + } .py-1 { padding-block: calc(var(--spacing) * 1); } @@ -1299,21 +3141,20 @@ .pr-3 { padding-right: calc(var(--spacing) * 3); } - .pr-10 { - padding-right: calc(var(--spacing) * 10); - } - .pl-4 { - padding-left: calc(var(--spacing) * 4); - } - .pl-10 { - padding-left: calc(var(--spacing) * 10); - } .text-center { text-align: center; } .text-justify { text-align: justify; } + .text-left { + text-align: left; + } + .font-display { + font-family: var(--font-display); + font-feature-settings: var(--font-display--font-feature-settings); + font-variation-settings: var(--font-display--font-variation-settings); + } .text-2xl { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); @@ -1330,6 +3171,10 @@ font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } + .text-xl { + font-size: var(--text-xl); + line-height: var(--tw-leading, var(--text-xl--line-height)); + } .text-xs { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); @@ -1346,6 +3191,10 @@ --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } + .font-medium { + --tw-font-weight: var(--font-weight-medium); + font-weight: var(--font-weight-medium); + } .font-semibold { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); @@ -1354,6 +3203,16 @@ --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); } + .text-wrap { + text-wrap: wrap; + } + .break-all { + word-break: break-all; + } + .checkbox-primary { + color: var(--color-primary-content); + --input-color: var(--color-primary); + } .checkbox-secondary { color: var(--color-secondary-content); --input-color: var(--color-secondary); @@ -1361,33 +3220,83 @@ .text-base-content { color: var(--color-base-content); } - .text-black { - color: var(--color-black); - } .text-gray-400 { color: var(--color-gray-400); } .text-gray-500 { color: var(--color-gray-500); } + .text-gray-600 { + color: var(--color-gray-600); + } .text-gray-700 { color: var(--color-gray-700); } + .text-gray-800 { + color: var(--color-gray-800); + } + .text-gray-900 { + color: var(--color-gray-900); + } + .text-green-500 { + color: var(--color-green-500); + } + .text-green-600 { + color: var(--color-green-600); + } .text-info { color: var(--color-info); } .text-neutral-content { color: var(--color-neutral-content); } + .text-red-500 { + color: var(--color-red-500); + } + .text-red-600 { + color: var(--color-red-600); + } .text-secondary { color: var(--color-secondary); } + .text-success { + color: var(--color-success); + } .text-white { color: var(--color-white); } + .capitalize { + text-transform: capitalize; + } + .lowercase { + text-transform: lowercase; + } .uppercase { text-transform: uppercase; } + .italic { + font-style: italic; + } + .line-through { + text-decoration-line: line-through; + } + .overline { + text-decoration-line: overline; + } + .underline { + text-decoration-line: underline; + } + .antialiased { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + .subpixel-antialiased { + -webkit-font-smoothing: auto; + -moz-osx-font-smoothing: auto; + } + .opacity-20 { + opacity: 20%; + } .opacity-50 { opacity: 50%; } @@ -1410,10 +3319,14 @@ --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - .shadow-xl { - --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); + .ring { + --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .outline { + outline-style: var(--tw-outline-style); + outline-width: 1px; + } .btn-ghost { &:not(.btn-active, :hover, :active:focus, :focus-visible) { --btn-shadow: ""; @@ -1425,20 +3338,75 @@ --btn-fg: currentColor; } } + @media (hover: none) { + &:hover:not(.btn-active, :active, :focus-visible, :disabled, [disabled], .btn-disabled) { + --btn-shadow: ""; + --btn-bg: #0000; + --btn-border: #0000; + --btn-noise: none; + --btn-fg: currentColor; + } + } + } + .blur { + --tw-blur: blur(8px); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + } + .drop-shadow { + --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.1))) drop-shadow(0 1px 1px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.06))); + --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow( 0 1px 1px rgb(0 0 0 / 0.06)); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + } + .grayscale { + --tw-grayscale: grayscale(100%); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + } + .invert { + --tw-invert: invert(100%); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + } + .sepia { + --tw-sepia: sepia(100%); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + } + .filter { + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + } + .backdrop-filter { + -webkit-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,); + 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-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-all { transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } + .transition-colors { + transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + } .duration-300 { --tw-duration: 300ms; transition-duration: 300ms; } + .ease-in { + --tw-ease: var(--ease-in); + transition-timing-function: var(--ease-in); + } .ease-in-out { --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); } + .ease-out { + --tw-ease: var(--ease-out); + transition-timing-function: var(--ease-out); + } .btn-outline { &:not( .btn-active, :hover, :active:focus, :focus-visible, :disabled, [disabled], .btn-disabled, :checked ) { --btn-shadow: ""; @@ -1470,31 +3438,31 @@ --btn-color: var(--color-primary); --btn-fg: var(--color-primary-content); } - .hover\:bg-blue-600 { + .select-all { + -webkit-user-select: all; + user-select: all; + } + .input-error { + &, &:focus, &:focus-within { + --input-color: var(--color-error); + } + } + .input-success { + &, &:focus, &:focus-within { + --input-color: var(--color-success); + } + } + .hover\:bg-base-300 { &:hover { @media (hover: hover) { - background-color: var(--color-blue-600); + background-color: var(--color-base-300); } } } - .hover\:bg-gray-100 { + .hover\:bg-gray-200 { &:hover { @media (hover: hover) { - background-color: var(--color-gray-100); - } - } - } - .hover\:bg-gray-600 { - &:hover { - @media (hover: hover) { - background-color: var(--color-gray-600); - } - } - } - .hover\:bg-gray-700 { - &:hover { - @media (hover: hover) { - background-color: var(--color-gray-700); + background-color: var(--color-gray-200); } } } @@ -1505,13 +3473,6 @@ } } } - .hover\:text-gray-600 { - &:hover { - @media (hover: hover) { - color: var(--color-gray-600); - } - } - } .hover\:text-gray-700 { &:hover { @media (hover: hover) { @@ -1519,13 +3480,6 @@ } } } - .hover\:text-gray-900 { - &:hover { - @media (hover: hover) { - color: var(--color-gray-900); - } - } - } .hover\:text-primary { &:hover { @media (hover: hover) { @@ -1598,8 +3552,21 @@ translate: var(--tw-translate-x) var(--tw-translate-y); } } - .sm\:grid-cols-2 { + .sm\:stats-vertical { @media (width >= 40rem) { + grid-auto-flow: row; + overflow-y: auto; + .stat:not(:last-child) { + border-inline-end: none; + border-block-end: var(--border) dashed currentColor; + @supports (color: color-mix(in lab, red, red)) { + border-block-end: var(--border) dashed color-mix(in oklab, currentColor 10%, #0000); + } + } + } + } + .md\:grid-cols-2 { + @media (width >= 48rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @@ -1608,6 +3575,24 @@ grid-template-columns: repeat(3, minmax(0, 1fr)); } } + .lg\:stats-horizontal { + @media (width >= 64rem) { + grid-auto-flow: column; + overflow-x: auto; + .stat:not(:last-child) { + border-inline-end: var(--border) dashed currentColor; + @supports (color: color-mix(in lab, red, red)) { + border-inline-end: var(--border) dashed color-mix(in oklab, currentColor 10%, #0000); + } + border-block-end: none; + } + } + } + .lg\:grid-cols-3 { + @media (width >= 64rem) { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + } .lg\:grid-cols-4 { @media (width >= 64rem) { grid-template-columns: repeat(4, minmax(0, 1fr)); @@ -1787,14 +3772,10 @@ } } @layer base { - :root:has( .modal-open, .modal[open], .modal:target, .modal-toggle:checked, .drawer:not([class*="drawer-open"]) > .drawer-toggle:checked ) { - overflow: hidden; - } -} -@layer base { - :root, [data-theme] { - background-color: var(--root-bg, var(--color-base-100)); - color: var(--color-base-content); + @property --radialprogress { + syntax: ""; + inherits: true; + initial-value: 0%; } } @layer base { @@ -1806,10 +3787,13 @@ } } @layer base { - @property --radialprogress { - syntax: ""; - inherits: true; - initial-value: 0%; + :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:has( .modal-open, .modal[open], .modal:target, .modal-toggle:checked, .drawer:not([class*="drawer-open"]) > .drawer-toggle:checked ) { + overflow: hidden; } } @layer base { @@ -1826,16 +3810,25 @@ } } @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"); - } - .chat { - --mask-chat: url("data:image/svg+xml,%3csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M0 11.5004C0 13.0004 2 13.0004 2 13.0004H12H13V0.00036329L12.5 0C12.5 0 11.977 2.09572 11.8581 2.50033C11.6075 3.35237 10.9149 4.22374 9 5.50036C6 7.50036 0 10.0004 0 11.5004Z'/%3e%3c/svg%3e"); + :root, [data-theme] { + background-color: var(--root-bg, var(--color-base-100)); + color: var(--color-base-content); } } -@keyframes dropdown { +@keyframes radio { 0% { - opacity: 0; + padding: 5px; + } + 50% { + padding: 3px; + } +} +@keyframes skeleton { + 0% { + background-position: 150%; + } + 100% { + background-position: -50%; } } @keyframes progress { @@ -1853,28 +3846,17 @@ opacity: 1; } } +@keyframes dropdown { + 0% { + opacity: 0; + } +} @keyframes rating { 0%, 40% { scale: 1.1; filter: brightness(1.05) contrast(1.05); } } -@keyframes radio { - 0% { - padding: 5px; - } - 50% { - padding: 3px; - } -} -@keyframes skeleton { - 0% { - background-position: 150%; - } - 100% { - background-position: -50%; - } -} @layer base { @media (prefers-color-scheme: dark) { :root { @@ -2103,6 +4085,100 @@ inherits: false; initial-value: 0 0 #0000; } +@property --tw-outline-style { + syntax: "*"; + inherits: false; + initial-value: solid; +} +@property --tw-blur { + syntax: "*"; + inherits: false; +} +@property --tw-brightness { + syntax: "*"; + inherits: false; +} +@property --tw-contrast { + syntax: "*"; + inherits: false; +} +@property --tw-grayscale { + syntax: "*"; + inherits: false; +} +@property --tw-hue-rotate { + syntax: "*"; + inherits: false; +} +@property --tw-invert { + syntax: "*"; + inherits: false; +} +@property --tw-opacity { + syntax: "*"; + inherits: false; +} +@property --tw-saturate { + syntax: "*"; + inherits: false; +} +@property --tw-sepia { + syntax: "*"; + inherits: false; +} +@property --tw-drop-shadow { + syntax: "*"; + inherits: false; +} +@property --tw-drop-shadow-color { + syntax: "*"; + inherits: false; +} +@property --tw-drop-shadow-alpha { + syntax: ""; + inherits: false; + initial-value: 100%; +} +@property --tw-drop-shadow-size { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-blur { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-brightness { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-contrast { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-grayscale { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-hue-rotate { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-invert { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-opacity { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-saturate { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-sepia { + syntax: "*"; + inherits: false; +} @property --tw-duration { syntax: "*"; inherits: false; @@ -2111,11 +4187,6 @@ syntax: "*"; inherits: false; } -@property --tw-outline-style { - syntax: "*"; - inherits: false; - initial-value: solid; -} @layer properties { @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { *, ::before, ::after, ::backdrop { @@ -2147,9 +4218,31 @@ --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; + --tw-outline-style: solid; + --tw-blur: initial; + --tw-brightness: initial; + --tw-contrast: initial; + --tw-grayscale: initial; + --tw-hue-rotate: initial; + --tw-invert: initial; + --tw-opacity: initial; + --tw-saturate: initial; + --tw-sepia: initial; + --tw-drop-shadow: initial; + --tw-drop-shadow-color: initial; + --tw-drop-shadow-alpha: 100%; + --tw-drop-shadow-size: initial; + --tw-backdrop-blur: initial; + --tw-backdrop-brightness: initial; + --tw-backdrop-contrast: initial; + --tw-backdrop-grayscale: initial; + --tw-backdrop-hue-rotate: initial; + --tw-backdrop-invert: initial; + --tw-backdrop-opacity: initial; + --tw-backdrop-saturate: initial; + --tw-backdrop-sepia: initial; --tw-duration: initial; --tw-ease: initial; - --tw-outline-style: solid; } } } diff --git a/wwws/admin/src/tpldata/apxid_authentification_simplemobnav_fr.json b/wwws/admin/src/tpldata/apxid_authentification_simplemobnav_fr.json index 99be438..4830666 100644 --- a/wwws/admin/src/tpldata/apxid_authentification_simplemobnav_fr.json +++ b/wwws/admin/src/tpldata/apxid_authentification_simplemobnav_fr.json @@ -18,7 +18,7 @@ "profilmenu": [ { "mainprofil": "persons", - "link": "mytribes" + "link": "myworld" }, { "mainprofil": "pagans", @@ -108,10 +108,10 @@ "next": [] }, { - "link": "mytribes", - "shortlabel": "Tribus", - "label": "Mes tribus", - "allowedprofil":["persons"], + "link": "myworld", + "shortlabel": "Ma chose", + "label": "Ma propriété", + "allowedprofil":["pagans"], "textlink": "Voir ", "action":"navigation", "next": ["logout"] diff --git a/wwws/admin/src/tpldata/apxid_mydata_simplemobnav_fr.json b/wwws/admin/src/tpldata/apxid_mydata_simplemobnav_fr.json new file mode 100644 index 0000000..eeaa768 --- /dev/null +++ b/wwws/admin/src/tpldata/apxid_mydata_simplemobnav_fr.json @@ -0,0 +1,113 @@ +{ + "contentwconame": "apxauth", + "contentid": "signature", + "logo": { + "src": "/src/static/img/logo/logobgdark.png", + "alt": "smatchit" + }, + "claim": { + "textContent": "Never miss an opportunity" + }, + "textlist": true, + "commentmenutype": "textlist: vertical list of menu with texte, buttonlist: horizontal btn", + "profilmenu": [ + { + "mainprofil": "persons", + "link": "mytribes" + }, + { + "mainprofil": "pagans", + "link": "logout" + }, + { + "mainprofil": "anonymous", + "link": "signin" + } + ], + "links": [ + { + "link": "signup", + "label": "Pas encore d'identité apxtri ?", + "textlink": "Créer mon identité", + "tpl": "apxauthscreensignup", + "allowedprofil": [ + "anonymous" + ], + "next": [ + "signin", + "forgetkey", + "information" + ] + }, + { + "link": "signin", + "label": "S'identifier ?", + "textlink": "Accédez à vos données", + "tpl": "apxauthscreensignin", + "allowedprofil": [ + "anonymous" + ], + "next": [ + "signup", + "forgetkey", + "information" + ] + }, + { + "link": "forgetkey", + "label": "Clé oubliée ?", + "textlink": "Récupérez par email", + "tpl": "apxauthscreenforgetkey", + "allowedprofil": [ + "anonymous" + ], + "next": [ + "signin", + "signup", + "information" + ] + }, + { + "link": "information", + "label": " C'est quoi une identité apxtri ?", + "textlink": "En savoir plus", + "allowedprofil": [ + "anonymous" + ], + "tpl": "apxauthscreeninformation", + "next": [ + "back" + ] + }, + { + "link": "back", + "label": "Retour au menu ", + "allowedprofil": [ + "anonymous" + ], + "tpl": "sc", + "textlink": "Retour", + "next": [] + }, + { + "link": "logout", + "label": " ", + "allowedprofil": [ + "pagans" + ], + "tpl": "apxauthscreenlogout", + "textlink": "", + "next": [] + }, + { + "link": "mytribes", + "label": " ", + "tpl": "apxauthscreenmytribes", + "allowedprofil": [ + "persons" + ], + "textlink": "", + "next": [] + } + ] +} diff --git a/wwws/admin/src/tpldata/apxid_signature_apxauth_fr.json b/wwws/admin/src/tpldata/apxid_signature_apxauth_fr.json index af354f4..1f26882 100644 --- a/wwws/admin/src/tpldata/apxid_signature_apxauth_fr.json +++ b/wwws/admin/src/tpldata/apxid_signature_apxauth_fr.json @@ -1,17 +1,46 @@ -{ "idparent":"authentification", - "signintitle":"Qui êtes-vous?", - "signuptitle":"Creer un compte anonyme", - "aliastitle":"Votre alias", - "aliasinvalid": "Combinaison de 3 à 150 caractères
composée de minuscules (a à z) et/ou de chiffres (0 à 9)", - "aliastitle": "Uniquement minuscules ou chiffres", - "emailinvalid":"Vérifier votre email", - "privatekeyplaceholder": "Votre clé privée", - "remembermetext":"Stocker mon identité sur ce navigateur plus de 24 heures.Pour supprimer la clé de ce navigateur, il suffit de se déconnecter.", - "authentifyme":"S'identifier", - "createkey":"Créer mes clés en local", - "trusttext":"Si vous faites plus confiance à ce domaine qu'à vous même pour garder vos clés, cochez cette case. Les administrateurs de ce domaine auront accès à vos clés et pourront donc agir en votre nom. L'email ci-dessus sera utilisé pour vous renvoyer vos clés par le domaine de confiance. Dans tous les cas, il est conseillé de telecharger vos clés et de les stocker sur un support fiable non connecté (papier, clé usb)", - "downloadPuK":" Download
Publickey", - "downloadPrK":" Download
Privatekey", - "saveidentity":"Sauvegarde cette identité", - "nextpage":"Page suivante" -} +{ + "idparent": "authentification", + "signintitle": "Qui êtes-vous?", + "signuptitle": "Creer un compte anonyme", + "aliastitle": "Votre alias", + "aliasinvalid": "Combinaison de 3 à 150 caractères
composée de minuscules (a à z) et/ou de chiffres (0 à 9)", + "aliastitle": "Uniquement minuscules ou chiffres", + "emailinvalid": "Vérifier votre email", + "privatekeyplaceholder": "Votre clé privée", + "remembermetext": "Stocker mon identité sur ce navigateur plus de 24 heures.Pour supprimer la clé de ce navigateur, il suffit de se déconnecter.", + "authentifyme": "S'identifier", + "createkey": "Créer mes clés en local", + "trusttext": "Si vous faites plus confiance à ce domaine qu'à vous même pour garder vos clés, cochez cette case. Les administrateurs de ce domaine auront accès à vos clés et pourront donc agir en votre nom. L'email ci-dessus sera utilisé pour vous renvoyer vos clés par le domaine de confiance. Dans tous les cas, il est conseillé de telecharger vos clés et de les stocker sur un support fiable non connecté (papier, clé usb)", + "downloadPuK": " Download
Publickey", + "downloadPrK": " Download
Privatekey", + "saveidentity": "Sauvegarde cette identité", + "nextpage": "Page suivante", + "optionlinksmajor":[ { + "notification_count": 5, + "typebadge": "success", + "svg": " ", + "title": "Accéder à l'administration de la ville", + "onclick": " href='admindata_fr.html' " + }], + "optionlinks": [ + { + "notification_count": 1, + "typebadge": "success", + "svg":"", + "title": "Accéder à vos messages chiffrés", + "onclick": " href='privatri_fr.html' " + }, + { + "notification_count": 1, + "typebadge": "success", + "svg": " ", + "title": "Accéder à mon wallet", + "onclick": " href='wallet_fr.html' " + }, + { + "svg": "", + "title": "Accéder à mon profil", + "onclick": " href='myprofil_fr.html' " + } + ] +} \ No newline at end of file diff --git a/wwws/apx/caddy.apx.apxtri.farm.ants.json b/wwws/apx/caddy.apx.apxtri.farm.ants.json index 33e4a47..b167b18 100644 --- a/wwws/apx/caddy.apx.apxtri.farm.ants.json +++ b/wwws/apx/caddy.apx.apxtri.farm.ants.json @@ -4,6 +4,16 @@ "servers": { "apx.apxtri.farm.ants": { "listen": [":80",":443"], + "tls_connection_policies": [ + { + "match": { + "sni": ["apx.apxtri.farm.ants"] + }, + "certificates": { + "load_storage": "local_certs" + } + } + ], "routes": [ { "match": [{ diff --git a/wwws/itm/admin.json b/wwws/itm/admin.json index ffad8d9..e39c4f0 100644 --- a/wwws/itm/admin.json +++ b/wwws/itm/admin.json @@ -1,123 +1,41 @@ { - "appname": "admin", - "dns": [], - "commonfiles": [ - "static/fonts/questrial-regular-webfont.woff2", - "static/fonts/Quicksand-Light.woff2", - "static/img/icons/iconbgdark.png", - "static/img/icons/iconbglight.png", - "static/img/logo/logobgdark.png" - ], - "apxtri": { - "headers": { - "xtrkversion": 1, - "xalias": "anonymous", - "xapp": "admin", - "xdays": 0, - "xhash": "anonymous", - "xlang": "fr", - "xprofils": "anonymous", - "xtribe": "apxtri", - "xuuid": "0" - } - }, - "tailwindcsscontent": [ - "../../../../../../../apxtri/objects/wco/apx/*.{html,js,mustache}", - "../../../../../../../apxtri/objects/wwws/admin/src/**/*.{html,js,mustache}", - "../../../../../../../apxtri/objects/wco/simplemobnav/*.{html,js,mustache}", - "../../../../../../../apxtri/objects/wco/apxauth/*.{html,js,mustache}", - "../../../../../../../apxtri/objects/wco/adminskull/*.{html,js,mustache}", - "/media/phil/usbfarm/apxtowns/data/apxtri/objects/wco/apx/*.{html,js,mustache}", - "/media/phil/usbfarm/apxtowns/data/apxtri/objects/wwws/admin/src/**/*.{html,js,mustache}", - "/media/phil/usbfarm/apxtowns/data/apxtri/objects/wco/simplemobnav/*.{html,js,mustache}", - "/media/phil/usbfarm/apxtowns/data/apxtri/objects/wco/apxauth/*.{html,js,mustache}" - ], "pages": { - "testapi": { - "version": 1, - "languages": [ - "fr" - ], - "profils": [ - "anonymous" - ], - "tpl": {}, - "tpldata": {}, - "itms": {}, - "ref": { - "Checkjson": "apxtri/models/tplstrings/Checkjson", - "Notification": "apxtri/models/tplstrings/Notifications", - "Odmdb": "apxtri/models/tplstrings/Odmdb", - "Pagans": "apxtri/models/tplstrings/Pagans", - "Middlewares": "apxtri/models/tplstrings/middlewares" - }, - "schema": [ - "apxtri/objects/pagans", - "apxtri/objects/persons" - ], - "options": { - "profil": "apxtri/objects/options/profil" - }, - "wcodata": { - "favicon": { - "href": "static/img/icons/iconbglight.png" - }, - "logo": { - "src": "static/img/logo/logobgdark.png", - "alt": "apXtri" - }, - "claim": { - "textContent": "L'Unique et sa propriété" - } - }, - "appdata": { - "emailsupport": "support@need-data.com" - } - }, "apxid": { "version": 1, - "languages": [ - "fr" - ], "profils": [ "anonymous" ], "tpl": { - "simplemobnavnav": "apxtri/objects/wco/simplemobnav/nav.mustache", - "simplemobnavmain": "apxtri/objects/wco/simplemobnav/main.mustache", + "apxauthmain": "apxtri/objects/wco/apxauth/main", "apxauthscreensignup": "apxtri/objects/wco/apxauth/screensignup", "apxauthscreensignin": "apxtri/objects/wco/apxauth/screensignin", "apxauthscreenlogout": "apxtri/objects/wco/apxauth/screenlogout", - "apxauthscreenmytribes": "apxtri/objects/wco/apxauth/screenmytribes", + "apxauthscreenmyworld": "apxtri/objects/wco/apxauth/screenmyworld", "apxauthscreeninformation": "apxtri/objects/wco/apxauth/screeninformation", "apxauthscreenforgetkey": "apxtri/objects/wco/apxauth/screenforgetkey", - "apxauthmain": "apxtri/objects/wco/apxauth/main", - "simplemobnavbuttongroup": "apxtri/objects/wco/simplemobnav/buttongroup.mustache", "simplemobnavnavbuttonh": "apxtri/objects/wco/simplemobnav/navbuttonh.mustache", "simplemobnavnavlist": "apxtri/objects/wco/simplemobnav/navlist.mustache", - "simplemobnavnavbutton": "apxtri/objects/wco/simplemobnav/navbuttonh.mustache" + "simplemobnavnavbutton": "apxtri/objects/wco/simplemobnav/navbuttonh.mustache", + "simplemobnavmain": "apxtri/objects/wco/simplemobnav/main.mustache" }, "tpldata": { + "apxid_signature_apxauth": "apxtri/objects/wwws/admin/src/tpldata/apxid_signature_apxauth", "apxid_authentification_simplemobnav": "apxtri/objects/wwws/admin/src/tpldata/apxid_authentification_simplemobnav", - "apxid_signature_apxauth": "apxtri/objects/wwws/admin/src/tpldata/apxid_signature_apxauth" - }, - "itms": {}, - "ref": { - "Checkjson": "apxtri/models/tplstrings/Checkjson", - "Middlewares": "apxtri/models/tplstrings/Middlewares", - "Notification": "apxtri/models/tplstrings/Notifications", - "Odmdb": "apxtri/models/tplstrings/Odmdb", - "Pagans": "apxtri/models/tplstrings/Pagans", - "Persons": "apxtri/models/tplstrings/Persons" + "apxid_mydata_simplemobnav": "apxtri/objects/wwws/admin/src/tpldata/apxid_mydata_simplemobnav" }, "schema": [ "apxtri/objects/pagans", "apxtri/objects/persons" ], - "options": { - "profil": "apxtri/objects/options/itm/profil" + "ref": { + "Odmdb": "apxtri/models/tplstrings/Odmdb", + "Pagans": "apxtri/models/tplstrings/Pagans", + "Persons": "apxtri/models/tplstrings/Persons", + "Checkjson": "apxtri/models/tplstrings/Checkjson", + "Notification": "apxtri/models/tplstrings/Notifications", + "Middlewares": "apxtri/models/tplstrings/Middlewares" }, - "wcodata": { + "wco": { "favicon": { "href": "static/img/icons/iconbglight.png" }, @@ -129,31 +47,10 @@ "textContent": "L'Unique et sa propriété" } }, - "appdata": { - "emailsupport": "support@smatchit.io", - "websites": [ - { - "href": "https://app.smatchit.io", - "name": "app.smatchit.io" - }, - { - "href": "https://apptest.smatchit.io", - "name": "apptest.smatchit.io" - }, - { - "href": "http://pwa.smatchit/src/testapi_fr.html", - "name": "pwa.smatchit/src/testapi" - } - ], - "nopassphrase": true, - "forcetrustcurrenttribe": true - } + "appdata": {} }, "admindata": { "version": 1, - "languages": [ - "fr" - ], "profils": [ "anonymous" ], @@ -163,57 +60,18 @@ "adminskullmain": "apxtri/objects/wco/adminskull/main", "adminskullheadnav": "apxtri/objects/wco/adminskull/headnav" }, - "tpldata": { - "verticalnav": "apxtri/objects/wwws/admin/src/tpldata/admindata/verticalnav", - "headnav": "apxtri/objects/wwws/admin/src/tpldata/admindata/headnav", - "simplemobnav": "../apxtri/objects/wwws/admin/src/tpldata/simplemobnav/simplemobnav" - }, - "itms": {}, - "ref": { - "Checkjson": "apxtri/models/tplstrings/Checkjson", - "Notification": "apxtri/models/tplstrings/Notifications", - "Odmdb": "apxtri/models/tplstrings/Odmdb", - "Pagans": "apxtri/models/tplstrings/Pagans", - "Middlewares": "apxtri/models/tplstrings/middlewares", - "Persons": "apxtri/models/tplstrings/Persons" - }, + "tpldata": {}, "schema": [ "apxtri/objects/pagans", "apxtri/objects/persons" ], - "options": { - "profil": "apxtri/objects/options/profil" - }, - "wcodata": { - "favicon": { - "href": "static/img/icons/iconbglight.png" - }, - "logo": { - "src": "static/img/logo/logobgdark.png", - "alt": "apXtri" - }, - "claim": { - "textContent": "L'Unique et sa propriété" - } - }, - "appdata": { - "emailsupport": "support@smatchit.io", - "websites": [ - { - "href": "https://app.smatchit.io", - "name": "app.smatchit.io" - }, - { - "href": "https://apptest.smatchit.io", - "name": "apptest.smatchit.io" - }, - { - "href": "http://pwa.smatchit/src/testapi_fr.html", - "name": "pwa.smatchit/src/testapi" - } - ], - "nopassphrase": true, - "forcetrustcurrenttribe": true + "ref": { + "Checkjson": "apxtri/models/tplstrings/Checkjson", + "Notification": "apxtri/models/tplstrings/Notifications", + "Middlewares": "apxtri/models/tplstrings/Middlewares", + "Odmdb": "apxtri/models/tplstrings/Odmdb", + "Pagans": "apxtri/models//tplstrings/Pagans", + "Persons": "apxtri/models/tplstrings/Persons" } } }