{{ .Data.Title }}
-{{ .Data.Description }}
+{{ title }}
+{{ description }}
-
+
+
+
+
-
-{{ end }}
diff --git a/glossary-words.html b/glossary-words.html
index 6b4a01c..13f5d3c 100644
--- a/glossary-words.html
+++ b/glossary-words.html
@@ -1,13 +1,10 @@
-{{ define "glossary-words" }}
-{{ $g := .Data.Glossary }}
-{{ if not $g.Words }}
-
- 
-
+
-
+
+
-
+
+ 
+
ಶ್ರೀ. ವಿ. ಕೃಷ್ಣ ಅವರ ಕನ್ನಡ - ಇಂಗ್ಲಿಷ್ ನಿಘಂಟು
- “Alar” V. Krishna's Kannada → English dictionary
-
+ "Alar" V. Krishna's Kannada → English dictionary
+
-
+
-{{ end}}
-{{ define "footer" }}
-
+ ಶ್ರೀ. ವಿ. ಕೃಷ್ಣ ಅವರ ಕನ್ನಡ - ಇಂಗ್ಲಿಷ್ ನಿಘಂಟು
- “Alar” V. Krishna's Kannada → English dictionary - + "Alar" V. Krishna's Kannada → English dictionary +{{ $.L.T "public.noResultsTitle" }}
-{{ $.L.T "public.noResults" }}
-{{ else }} --
- {{ range $i, $w := $g.Words }}
-
- {{ $w.Content | join ", " }} - {{ end }} +{% if not glossary.words or glossary.words | length == 0 %} +
- {{ w.content | join(sep=", ") }} + {% endfor %}
- {{ lang_name }}
- {{ count }} {{ t(key="public.statsEntries") }}
- {{ t(key="public.statsDefs") }}
- {{ consts.stats.relations }}
-
-
+ +-
+ {% for r in results.entries | slice(end=num_results) %}
+ {% set shareGuid = "s" ~ r.guid | split(pat="-") | first %}
+
-
+ --{{ end }} diff --git a/search.html b/search.html index ebc3147..7c253dd 100644 --- a/search.html +++ b/search.html @@ -1,16 +1,14 @@ -{{ define "search" }} -{{ template "header" . }} +{% extends "base.html" %} +{% block content %}--
{{ $r.Content | join ", " }}
- - {{- if $r.Meta.audio -}} -
- {{- end -}}
-
- {{- if $.Consts.EnableSubmissions -}}
- ✏️
- {{- end -}}
+ +- {{- if $r.Phones -}} - ♪ {{ $r.Phones | join "," }} - {{- end -}} - + {% if r.phones and r.phones | length > 0 %} + ♪ {{ r.phones | join(sep=",") }} + {% endif %}{{ r.content | join(sep=", ") }}
+ {% if r.meta.audio %} + + {% endif %}- {{- if $r.Tags -}} +-+ {% if r.tags and r.tags | length > 0 %} - {{- end -}} -- {{- if $r.Relations -}} - {{- $lastType := "" -}} - {{- range $k, $d := $r.Relations -}} - {{- $types := ($d.RelationTypes | join ", ") -}} + {% if r.relations and r.relations | length > 0 %} + {%- set_global last_type = "" -%} + {%- for d in r.relations -%} + {%- set types = d.relation.types | default(value=[]) | join(sep=", ") -%} - {{- if ne $lastType $types -}} - {{- if $lastType -}}{{- end }} -
+ {% endif %}
+
+
-
- {{ if $d.RelationTypes }}
-
- - {{- range $t := $d.RelationTypes -}} - - {{- $dType := index (index $.Langs $r.Lang).Types $t }} - {{- if $dType }}{{ $dType }} {{ end -}} - {{- $rType := index (index $.Langs $d.Lang).Types $t }} - {{- if $rType }}({{ $rType }}){{ end -}} - - {{- end -}} - - {{ end }} - {{- end -}} + {%- if last_type != types or loop.first -%} + {% if not loop.first %}
-
+
- + {%- for t in d.relation.types | default(value=[]) -%} + {%- if t != "" -%} + + {%- set type_label = langs[d.lang].types | get(key=t, default="") -%} + {%- if type_label %}{{ type_label }} + {%- else %}({{ t }}){% endif -%} + + {%- endif -%} + {%- endfor -%} + + {%- endif %} -
- - {{ $d.Content | join ", " }} - {{ if or (gt $d.ContentLength $maxContentItems) $d.Meta.synonyms -}} - - - {{- end -}} - {{- if $.Consts.EnableSubmissions }} - ✏️ - {{ end -}} +
- {{ if not .Data.Results.Entries }} - - -{{ template "footer" . }} -{{ end }} +{% endblock %} diff --git a/static/alar.js b/static/alar.js index a17e402..d242fc3 100644 --- a/static/alar.js +++ b/static/alar.js @@ -1,8 +1,3 @@ -// Custom language code mapping for govarnam. -window.autoCompLangCodes = { - "kannada": "kn" -} - function hasKannadaChar(str) { return /[\u0C80-\u0CFF]/.test(str); } @@ -57,4 +52,4 @@ function hasKannadaChar(str) { defs[i].appendChild(s); } -})(); \ No newline at end of file +})(); diff --git a/static/autocomp.js b/static/autocomp.js index d94280d..478ca09 100644 --- a/static/autocomp.js +++ b/static/autocomp.js @@ -7,6 +7,9 @@ function autocomp(el, options = {}) { // Disable browser's default autocomplete behaviour on the input. el.autocomplete = "off"; + el.setAttribute("role", "combobox"); + el.setAttribute("aria-autocomplete", "list"); + el.setAttribute("aria-expanded", "false"); // Attach all the events required for the interactions in one go. ["input", "keydown", "blur"].forEach(k => el.addEventListener(k, handleEvent)); @@ -85,7 +88,9 @@ function autocomp(el, options = {}) { }); box.classList.add("autocomp"); + box.setAttribute("role", "listbox"); el.parentNode.insertBefore(box, el.nextSibling); + el.setAttribute("aria-expanded", "true"); } function renderResults() { @@ -93,6 +98,8 @@ function autocomp(el, options = {}) { items.forEach((item, idx) => { const div = document.createElement("div"); div.classList.add("autocomp-item"); + div.setAttribute("role", "option"); + div.setAttribute("aria-selected", idx === cur ? "true" : "false"); // If there's a custom renderer callback, use it, else, simply insert the value/text as-is. opt.onRender ? div.appendChild(opt.onRender(item)) : div.innerText = item; @@ -110,11 +117,16 @@ function autocomp(el, options = {}) { // Remove the previous item's highlight; const prev = box.querySelector(`:nth-child(${cur + 1})`); - prev?.classList.remove("autocomp-sel"); + if (prev) { + prev.classList.remove("autocomp-sel"); + prev.setAttribute("aria-selected", "false"); + } // Increment the cursor and highlight the next item, cycled between [0, n]. cur = (cur + direction + items.length) % items.length; - box.querySelector(`:nth-child(${cur + 1})`).classList.add("autocomp-sel"); + const next = box.querySelector(`:nth-child(${cur + 1})`); + next.classList.add("autocomp-sel"); + next.setAttribute("aria-selected", "true"); } function select(idx) { @@ -122,7 +134,7 @@ function autocomp(el, options = {}) { return; } - val = opt.onSelect(items[idx], items); + val = opt.onSelect(items[idx]); el.value = val || items[idx]; } @@ -133,5 +145,6 @@ function autocomp(el, options = {}) { box.remove(); box = null; } + el.setAttribute("aria-expanded", "false"); } } diff --git a/static/edit.svg b/static/edit.svg new file mode 100644 index 0000000..e36b606 --- /dev/null +++ b/static/edit.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/export.svg b/static/export.svg index 05edf4a..3b173a0 100644 --- a/static/export.svg +++ b/static/export.svg @@ -1,2 +1 @@ - - \ No newline at end of file + \ No newline at end of file diff --git a/static/flexit.css b/static/flexit.css deleted file mode 100644 index 54f7029..0000000 --- a/static/flexit.css +++ /dev/null @@ -1,135 +0,0 @@ -.container { - position: relative; - width: 100%; - max-width: 960px; - margin: 0 auto; - box-sizing: border-box; -} -.row { - box-sizing: border-box; - display: flex; - flex: 0 1 auto; - flex-flow: row wrap; -} -.row.nogutter { - margin-left: 0; - margin-right: 0; -} -.row.nogutter > .columns { - padding-left: 0; - padding-right: 0; -} -.columns { - box-sizing: border-box; - flex: 0 1 auto; - min-width: 0; -} -.one { - flex-basis: 8.33333333%; -} -.two { - flex-basis: 16.66666667%; -} -.three { - flex-basis: 25%; -} -.four { - flex-basis: 33.3333333333%; -} -.five { - flex-basis: 41.66666667%; -} -.six { - flex-basis: 50%; -} -.seven { - flex-basis: 58.33333333%; -} -.eight { - flex-basis: 66.66666667%; -} -.nine { - flex-basis: 75%; -} -.ten { - flex-basis: 83.33333333%; -} -.eleven { - flex-basis: 91.66666667%; -} -.twelve { - flex-basis: 100%; -} -.col-offset-0 { - margin-left: 0; -} -.col-offset-1 { - margin-left: 8.33333333%; -} -.col-offset-2 { - margin-left: 16.66666667%; -} -.col-offset-3 { - margin-left: 25%; -} -.col-offset-4 { - margin-left: 33.33333333%; -} -.col-offset-5 { - margin-left: 41.66666667%; -} -.col-offset-6 { - margin-left: 50%; -} -.col-offset-7 { - margin-left: 58.33333333%; -} -.col-offset-8 { - margin-left: 66.66666667%; -} -.col-offset-9 { - margin-left: 75%; -} -.col-offset-10 { - margin-left: 83.33333333%; -} -.col-offset-11 { - margin-left: 91.66666667%; -} -.between { - justify-content: space-between; -} -.end { - justify-content: flex-end; -} -.around { - justify-content: space-around; -} -.row-align-center { - align-items: center; -} -.space-right { - margin-right: 10px; -} -.space-left { - margin-left: 10px; -} -.space-bottom { - margin-bottom: 10px; -} -.space-top { - margin-top: 10px; -} -@media (max-width: 980px) { - .columns { - flex: 1 1 auto; - } - .offset-0, - .offset-1, - .offset-2 { - margin: unset; - } - .container { - padding: 0 15px; - } -} diff --git a/static/link.svg b/static/link.svg new file mode 100644 index 0000000..bdc760b --- /dev/null +++ b/static/link.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/main.js b/static/main.js index 1fe5e39..f82ae14 100644 --- a/static/main.js +++ b/static/main.js @@ -1,15 +1,3 @@ -async function screenshotElement(element) { - const canvas = await html2canvas(element); - canvas.toBlob(blob => { - const url = URL.createObjectURL(blob); - const a = document.createElement('a'); - a.href = url; - a.download = 'screenshot.png'; - a.click(); - URL.revokeObjectURL(url); - }); -} - (() => { const elForm = document.querySelector("form.search-form"); const elQ = document.querySelector("#q"); @@ -34,7 +22,7 @@ async function screenshotElement(element) { let val = q.trim(); const uri = elForm.getAttribute("action"); - document.location.href = `${uri}/${encodeURIComponent(val).replace(/%20/g, "+")}`; + document.location.href = `${uri}/${encodeURIComponent(val).replace(/%20/g, "-")}`; } // =================================== @@ -82,7 +70,7 @@ async function screenshotElement(element) { // fetch() content from the dataset data.guid from /api/entry/{guid} // and populate the div.more innerHTML with the content. if (state === "block" && !el.dataset.fetched) { - container.innerHTML = ``; + container.innerHTML = ``; fetch(`${window._ROOT_URL}/api/dictionary/entries/${el.dataset.entryGuid}`) .then((resp) => resp.json()) @@ -127,52 +115,11 @@ async function screenshotElement(element) { elQ.select(); })(); -// Screenshot sharing. -(() => { - document.querySelectorAll("a.export").forEach((el) => { - el.onclick = async (e) => { - e.preventDefault(); - const guid = el.dataset.guid; - const entryEl = document.querySelector(`.entry[data-guid='${guid}']`); - if (!entryEl) { - alert("Could not find entry to export"); - return; - } - - const title = entryEl.dataset.head; - // Make the filename by stripping spaces from the head word(s). - const filename = title.replace(/\s+/g, "_").toLowerCase(); - - try { - await shareDOM(entryEl, `${title} meaning`, `${localStorage.from_lang} to ${localStorage.to_lang} meaning\n\n${window.location.href}`, `${filename}.png`); - } catch (err) { - console.error("Error sharing entry:", err); - alert(`Error sharing entry: ${err?.message || err}`); - } - }; - }); -})(); - -// Play audio. -(() => { - document.querySelectorAll("a[data-audio]").forEach((el) => { - el.onclick = (e) => { - e.preventDefault(); - const audio = new Audio(el.getAttribute("href")); - audio.play().catch((err) => { - console.error("error playing audio:", err); - alert("error playing audio"); - }); - }; - }); -})(); - - // Submission form. (() => { function filterTypes(e) { // Filter the types select field with elements that are supported by the language. - const types = e.target.closest("fieldset").querySelector("select[name=relation_type]"); + const types = e.target.closest("[data-relation-controls]").querySelector("select[name=relation_type]"); types.querySelectorAll("option").forEach((o) => o.style.display = "none"); types.querySelectorAll(`option[data-lang=${e.target.value}]`).forEach((o) => o.style.display = "block"); types.selectedIndex = 1; @@ -207,64 +154,59 @@ async function screenshotElement(element) { } })(); -// Edit form. +// Edit form using ot-dropdown. (() => { - document.querySelectorAll(".edit").forEach((o) => { - o.onclick = ((e) => { - e.preventDefault(); - const btn = e.target; + const tpl = document.querySelector("#tpl-form-comments"); + if (!tpl) return; - // Form is already open. - if (btn.close) { - btn.close(); - return; - } + let counter = 0; + document.querySelectorAll("[data-edit-from]").forEach((btn) => { + const parent = btn.parentNode; - const form = document.querySelector(".form-comments").cloneNode(true); - o.parentNode.appendChild(form); - form.style.display = "block"; + // Clone template content and give the popover a unique ID. + const popoverId = `form-comments-${counter++}`; + const form = tpl.content.firstElementChild.cloneNode(true); + form.id = popoverId; - const txt = form.querySelector("textarea"); - txt.focus(); - txt.onkeydown = (e) => { - if (e.key === "Escape" && txt.value === "") { - btn.close(); - } - }; + // Wire the button as the popover trigger. + btn.setAttribute("popovertarget", popoverId); - btn.close = () => { - btn.close = null; - form.remove(); - }; + // Build{{ .L.T "public.noResultsTitle" }}
+ {% if not results.entries or results.entries | length == 0 %} +{{ t(key="public.noResultsTitle") }}
- {{ .L.T "public.noResults" }} + {{ t(key="public.noResults") }}
- {{ else }} - {{ template "results" . }} - {{ end }} + {% else %} + {% include "results.html" %} + {% endif %}with children fully assembled before inserting into DOM + // so that init() finds [popovertarget] and [popover]. + const dropdown = document.createElement("ot-dropdown"); + dropdown.appendChild(btn); + dropdown.appendChild(form); + parent.appendChild(dropdown); - // Handle form submission. - form.onsubmit = () => { - fetch(`${window._ROOT_URL}/api/submissions/comments`, { - method: "POST", - headers: { - "Content-Type": "application/json" - }, - body: JSON.stringify({ - from_guid: btn.dataset.from, - to_guid: btn.dataset.to, - comments: txt.value - }) - }).catch((err) => { - alert(`Error submitting: ${err}`); - }); + const txt = form.querySelector("textarea"); - alert(form.dataset.success); - btn.close(); - }; + // Handle submission. + form.querySelector("button.submit-comment").onclick = () => { + fetch(`${window._ROOT_URL}/api/submissions/comments`, { + method: "POST", + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify({ + from_guid: btn.dataset.editFrom, + to_guid: btn.dataset.editTo, + comments: txt.value + }) + }).catch((err) => { + alert(`Error submitting: ${err}`); + }); - form.querySelector("button.close").onclick = btn.close; - }); - }) + alert(form.dataset.success); + form.hidePopover(); + }; + + form.querySelector("button.close").onclick = () => form.hidePopover(); + }); })(); // Autocomplete. (() => { - if(!autocomp) { + if (!autocomp) { return; } @@ -273,37 +215,25 @@ async function screenshotElement(element) { let debounce; autocomp(elQ, { - autoSelect: elQ.dataset.autocompAutoselect === "true", + autoSelect: false, onQuery: async (val) => { const langCode = localStorage.from_lang; - - if (!langCode) { - return; - } - - const shortcode = autoCompLangCodes?.[langCode] ?? langCode; - clearTimeout(debounce); return new Promise(resolve => { debounce = setTimeout(async () => { - const response = await fetch(`${_ROOT_URL}/atl/${shortcode}/${val.toLowerCase()}`); + const response = await fetch(`${_ROOT_URL}/api/autocomplete/${langCode}/${val}`); const data = await response.json(); - const a = data.greedy_tokenized.map(item => item.word).slice(0, 3).sort((a, b) => a.length - b.length); - const b = data.dictionary_suggestions.map(item => item.word).slice(0, 6).sort((a, b) => a.length - b.length); + const suggestions = data.data.map(item => item.content[0]); debounce = null; - resolve([...new Set(a.concat(b))]); + resolve(suggestions); }, 50); }); }, - onSelect: (val, items) => { - // If the val is English, then pick the first item from items and use that. - if (/^[A-Za-z0-9\-,'" ]+$/.test(val) && items.length > 0) { - val = items[0]; - } - + onSelect: (val) => { + // autocomp search isn't complete. Use the user's input instead of autocomp selection. if (val) { elQ.value = val; } @@ -313,3 +243,37 @@ async function screenshotElement(element) { } }); })(); + +// Audio playback. +document.querySelectorAll("[data-audio]").forEach((el) => { + el.onclick = (e) => { + e.preventDefault(); + const audio = new Audio(el.dataset.src); + audio.play().catch((err) => { + console.error("error playing audio:", err); + alert("error playing audio"); + }); + }; +}); + +// Scroll to hash on load. +window.setTimeout(() => { + if (window.location.hash) { + document.querySelector(window.location.hash)?.scrollIntoView(); + } +}, 100); + +// Screenshot share. +document.querySelectorAll("[data-share-entry]").forEach((el) => { + el.onclick = async (e) => { + e.preventDefault(); + const entryEl = document.getElementById(el.dataset.shareEntry); + if (!entryEl) return; + try { + await shareEntry(entryEl); + } catch (err) { + console.error("Error sharing entry:", err); + alert(`Error sharing: ${err?.message || err}`); + } + }; +}); diff --git a/static/oat.min.css b/static/oat.min.css new file mode 100644 index 0000000..a2191fa --- /dev/null +++ b/static/oat.min.css @@ -0,0 +1 @@ +@layer theme,base,components,animations,utilities;@layer base{*,*:before,*:after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}*{margin:0}html{tab-size:4}body,dialog,[popover]{font-family:var(--font-sans);font-size:var(--text-regular);line-height:var(--leading-normal);color:var(--foreground)}body{background-color:var(--background);color:var(--foreground);-webkit-font-smoothing:antialiased}main{padding-block-start:var(--space-8)}img,picture,video,canvas,svg{max-width:100%}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}h1,h2,h3,h4,h5,h6{font-weight:var(--font-semibold);line-height:1.25;&:first-child{margin-block-start:0}}h1{font-size:var(--text-1);margin:var(--space-10) 0 var(--space-6)}h2{font-size:var(--text-2);margin:var(--space-8) 0 var(--space-5)}h3{font-size:var(--text-3);margin:var(--space-6) 0 var(--space-4)}h4{font-size:var(--text-4);margin:var(--space-5) 0 var(--space-3)}h5{font-size:var(--text-5);margin:var(--space-4) 0 var(--space-2)}h6{font-size:var(--text-regular);margin:var(--space-4) 0 var(--space-2)}p{margin-block-end:var(--space-4);&:last-child{margin-block-end:0}}a{color:var(--primary);text-decoration:underline;text-underline-offset:2px;transition:color var(--transition-fast);&:hover{color:rgb(from var(--primary) r g b / .8)}}strong,b{font-weight:var(--font-semibold)}em,i{font-style:italic}small{font-size:var(--text-7)}code{font-family:var(--font-mono);font-size:.875em;padding:calc(var(--space-1) / 2) var(--space-1);background-color:var(--faint);border-radius:var(--radius-small)}pre{font-family:var(--font-mono);padding:var(--space-4);background-color:var(--faint);border-radius:var(--radius-medium);overflow-x:auto;margin-block-end:var(--space-4);code{padding:0;background:none;border-radius:0}}blockquote{border-inline-start:4px solid var(--border);padding-inline-start:var(--space-4);margin:var(--space-4) 0;color:var(--muted-foreground);font-style:italic}hr{border:none;border-top:1px solid var(--border);margin:var(--space-8) 0}ul,ol{padding-inline-start:var(--space-6);margin-block-end:var(--space-4)}ul{list-style-type:disc}ol{list-style-type:decimal}li{margin-block-end:var(--space-1)}mark{background-color:rgb(from var(--warning) r g b / .3);padding:calc(var(--space-1) / 2) var(--space-1);border-radius:var(--radius-small)}[hidden]{display:none}:focus-visible{outline:2px solid var(--ring);outline-offset:2px}:disabled{opacity:.5;cursor:not-allowed}}@layer theme{:root{color-scheme:light dark;--background: light-dark(#fff, #09090b);--foreground: light-dark(#09090b, #fafafa);--card: light-dark(#fff, #18181b);--card-foreground: light-dark(#09090b, #fafafa);--primary: light-dark(#574747, #fafafa);--primary-foreground: light-dark(#fafafa, #18181b);--secondary: light-dark(#f4f4f5, #27272a);--secondary-foreground: light-dark(#574747, #fafafa);--muted: light-dark(#f4f4f5, #27272a);--muted-foreground: light-dark(#71717a, #a1a1aa);--faint: light-dark(#fafafa, #1e1e21);--faint-foreground: light-dark(#a1a1aa, #71717a);--accent: light-dark(#f4f4f5, #27272a);--danger: light-dark(#d32f2f, #f4807b);--danger-foreground: light-dark(#fafafa, #18181b);--success: light-dark(#008032, #6cc070);--success-foreground: light-dark(#fafafa, #18181b);--warning: light-dark(#a65b00, #f0a030);--warning-foreground: #09090b;--border: light-dark(#d4d4d8, #52525b);--input: light-dark(#d4d4d8, #52525b);--ring: light-dark(#574747, #d4d4d8);--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-14: 3.5rem;--space-16: 4rem;--space-18: 4.5rem;--radius-small: .125rem;--radius-medium: .375rem;--radius-large: .75rem;--radius-full: 9999px;--bar-height: .5rem;--font-sans: system-ui, sans-serif;--font-mono: ui-monospace, Consolas, monospace;--text-1: clamp(1.75rem, 1.5rem + 1.1vw, 2.25rem);--text-2: clamp(1.5rem, 1.3rem + .8vw, 1.875rem);--text-3: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);--text-4: clamp(1.125rem, 1.05rem + .3vw, 1.25rem);--text-5: 1.125rem;--text-6: 1rem;--text-7: .875rem;--text-8: .75rem;--text-regular: var(--text-6);--leading-normal: 1.5;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 600;--shadow-small: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-medium: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--shadow-large: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--transition-fast: .12s cubic-bezier(.4, 0, .2, 1);--transition: .2s cubic-bezier(.4, 0, .2, 1);--z-dropdown: 50;--z-modal: 200}}@layer animations{@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.animate-pop-in{opacity:1;transform:perspective(1000px) rotateX(0) translateZ(0);transition:opacity .15s cubic-bezier(.4,0,.2,1),transform .15s cubic-bezier(.4,0,.2,1),overlay .15s cubic-bezier(.4,0,.2,1) allow-discrete,display .15s cubic-bezier(.4,0,.2,1) allow-discrete;@starting-style{opacity:0;transform:perspective(1000px) rotateX(-15deg) translateZ(-80px)}&[data-state=closing]{opacity:0;transform:perspective(1000px) rotateX(-15deg) translateZ(-80px)}&[data-state=closing]::backdrop{opacity:0}}dialog::backdrop{opacity:1;transition:opacity .15s cubic-bezier(.4,0,.2,1);@starting-style{opacity:0}}.animate-slide-in{opacity:1;transform:translate(0);transition:opacity .15s cubic-bezier(.16,1,.3,1),transform .15s cubic-bezier(.16,1,.3,1);@starting-style{opacity:0;transform:translate(100%)}&[data-state=closing]{opacity:0;transform:translate(100%)}}}@layer components{figure[data-variant=avatar]:not([role=group]){display:inline-flex;align-items:center;justify-content:center;width:var(--sz, 2.5rem);height:var(--sz, 2.5rem);color:var(--primary);background-color:var(--muted);border-radius:var(--radius-full);font-weight:var(--font-medium);overflow:hidden;>img{width:100%;height:100%;object-fit:cover}&.small{--sz: 2rem}&.large{--sz: 3.25rem}}figure[data-variant=avatar][role=group]{display:inline-flex;align-items:center;margin:0;& figure[data-variant=avatar]{isolation:isolate;margin-inline-end:calc(var(--space-5) * -1);border:2px solid var(--background);&:last-child{margin-inline-end:0}}&.small{--sz: 2rem;& figure[data-variant=avatar]{margin-inline-end:calc(var(--space-4) * -.8);border-width:1px}}&.large{--sz: 3.25rem;& figure[data-variant=avatar]{margin-inline-end:calc(var(--space-6) * -1)}}}}@layer base{:is(button,[type=submit],[type=reset],[type=button],a.button),::file-selector-button{--_hov: color-mix(in srgb, var(--primary), white 25%);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);font-size:var(--text-7);font-weight:var(--font-medium);line-height:var(--leading-normal);white-space:nowrap;text-decoration:none;background-color:var(--primary);color:var(--primary-foreground);border-radius:var(--radius-medium);border:1px solid;border-color:rgb(from #fff r g b / .15) rgb(from #000 r g b / .2) rgb(from #000 r g b / .2) rgb(from #fff r g b / .15);transition:background-color var(--transition-fast),opacity var(--transition-fast),transform var(--transition-fast);&:not(:disabled){cursor:pointer}&:hover:not(:disabled){background-color:var(--_hov)}&:active:not(:disabled){transform:translate(1px,1px)}&[data-variant=secondary]{--_hov: color-mix(in srgb, var(--secondary), black 10%);background-color:var(--secondary);color:var(--secondary-foreground);border-color:rgb(from #fff r g b / .5) rgb(from #000 r g b / .1) rgb(from #000 r g b / .1) rgb(from #fff r g b / .5)}&[data-variant=danger]{--_hov: color-mix(in srgb, var(--danger), black 15%);background-color:var(--danger);color:var(--danger-foreground)}&:is(.outline,.ghost){--_hov: var(--accent);background-color:transparent;color:var(--foreground);&[data-variant=danger]{--_hov: color-mix(in srgb, var(--danger), transparent 90%);color:var(--danger)}&[data-variant=secondary]{--_hov: color-mix(in srgb, var(--secondary), transparent 80%);color:var(--secondary-foreground)}}&.outline{border-color:var(--border);&[data-variant=danger]{border-color:var(--danger)}&[data-variant=secondary]{border-color:var(--secondary)}}&.ghost{border-color:transparent}&.small{padding:var(--space-1) var(--space-3);font-size:var(--text-8)}&.large{height:3rem;padding:0 var(--space-6);font-size:var(--text-regular)}&.icon{width:2.5rem;padding:0;&.small{width:2rem}&.large{width:3rem}}}::file-selector-button{background-color:transparent;color:var(--foreground);border:1px solid var(--border)}::file-selector-button:hover{background-color:var(--accent)}}@layer components{menu.buttons{list-style-type:none;padding-inline-start:0;display:inline-flex;>li{&:first-child>*{border-start-start-radius:var(--radius-medium);border-end-start-radius:var(--radius-medium)}&:last-child>*{border-start-end-radius:var(--radius-medium);border-end-end-radius:var(--radius-medium)}>*{border-radius:0}&:not(:last-child)>*{border-inline-end:1px solid rgb(from var(--primary-foreground) r g b / .2)}}}}@layer base{label{display:block;font-size:var(--text-7);font-weight:var(--font-medium);&:has(input:where([type=checkbox],[type=radio])){display:inline-flex;align-items:center;gap:var(--space-2);font-weight:var(--font-normal)}}:where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color]),textarea,select){width:100%;margin-block-start:var(--space-1);padding:var(--space-2) var(--space-3);font-size:var(--text-7);line-height:var(--leading-normal);background-color:var(--background);color:var(--foreground);border:1px solid var(--input);border-radius:var(--radius-medium);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);&::placeholder{color:var(--muted-foreground)}&:focus{outline:none;border-color:var(--ring);box-shadow:0 0 0 2px rgb(from var(--ring) r g b / .2);z-index:1}&:disabled{background-color:var(--muted)}&:is([aria-invalid=true],:user-invalid){border-color:var(--danger);&:focus{box-shadow:0 0 0 2px rgb(from var(--danger) r g b / .2)}}}textarea{height:auto;min-height:5rem;padding:var(--space-3);resize:vertical}select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--space-2) center;padding-inline-end:var(--space-6)}input:where([type=checkbox],[type=radio]){appearance:none;width:1rem;height:1rem;margin:0;position:relative;background-color:var(--background);border:1px solid var(--input);transition:background-color var(--transition-fast),border-color var(--transition-fast);&:checked{background-color:var(--primary);border-color:var(--primary);&:after{content:"";position:absolute;inset:0;background-color:var(--primary-foreground);mask-position:center;mask-repeat:no-repeat;mask-size:100%}}}input[type=checkbox]{border-radius:var(--radius-small);&:checked:after{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='4'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}&[role=switch]{--switch-height: calc(var(--bar-height) * 3);--switch-inset: 2px;--switch-thumb: calc(var(--switch-height) - var(--switch-inset) * 3);width:calc(var(--switch-height) * 2);height:var(--switch-height);border-radius:var(--radius-full);background-color:var(--input);&:before{content:"";position:absolute;top:50%;left:var(--switch-inset);transform:translateY(-50%);width:var(--switch-thumb);height:var(--switch-thumb);background-color:var(--background);border-radius:var(--radius-full);transition:transform var(--transition);box-shadow:var(--shadow-small)}&:checked{background-color:var(--primary);&:after{content:none}&:before{transform:translateY(-50%) translate(var(--switch-height))}}}}input[type=radio]{border-radius:var(--radius-full);&:checked:after{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4' fill='currentColor'/%3E%3C/svg%3E")}}:where(input:where([type=checkbox],[type=radio],[type=range]),select):not(:disabled),label:has(input:where([type=checkbox],[type=radio]):not(:disabled)){cursor:pointer}input[type=range]{width:100%;height:var(--bar-height);appearance:none;background:var(--muted);border-radius:var(--radius-full);&::-webkit-slider-thumb{appearance:none;width:1.25rem;height:1.25rem;background:var(--primary);border-radius:var(--radius-full);transition:transform var(--transition-fast);&:hover{transform:scale(1.1)}}&::-moz-range-thumb{width:1.25rem;height:1.25rem;background:var(--primary);border:none;border-radius:var(--radius-full)}}fieldset{border:1px solid var(--border);border-radius:var(--radius-medium);padding:var(--space-4);margin-block-end:var(--space-4)}legend{font-size:var(--text-7);font-weight:var(--font-medium);padding:0 var(--space-2)}}@layer components{fieldset.group{display:flex;align-items:stretch;border:none;padding:0;margin:0;>:is(input,textarea,select){flex:1;margin-block-start:0;&:not(:focus):not(:last-child){border-inline-end-color:transparent}}>:is(input,textarea,select,button){border-radius:0;&:first-child{border-radius:var(--radius-medium) 0 0 var(--radius-medium)}&:last-child{border-radius:0 var(--radius-medium) var(--radius-medium) 0}}>legend{float:inline-start;display:inline-flex;align-items:center;padding:0 var(--space-3);line-height:var(--leading-normal);font-weight:var(--font-normal);color:var(--muted-foreground);background-color:var(--muted);border:1px solid var(--input);border-inline-end:none;border-radius:var(--radius-medium) 0 0 var(--radius-medium)}}[data-field]{margin-block-end:var(--space-4);[data-hint],.error{font-size:var(--text-8);font-weight:var(--font-normal);color:var(--muted-foreground);margin-block-start:var(--space-1)}.error{display:none}&[data-field=error] .error{display:block;color:var(--danger)}}}@layer base{.table{min-width:320px;width:100%;overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:var(--text-7)}thead{border-bottom:1px solid var(--border)}th,td{overflow-wrap:break-word}th{padding:var(--space-3) var(--space-2);text-align:start;font-weight:var(--font-medium);color:var(--muted-foreground)}td{padding:var(--space-3) var(--space-2)}tbody tr{border-bottom:1px solid var(--border);transition:background-color var(--transition-fast);&:last-child{border-bottom:none}&:hover{background-color:rgb(from var(--muted) r g b / .5)}}}@layer base{progress{appearance:none;width:100%;height:var(--bar-height);border:none;border-radius:var(--radius-full);overflow:hidden;background-color:var(--muted);&::-webkit-progress-bar{background-color:var(--muted);border-radius:var(--radius-full)}&::-webkit-progress-value{background-color:var(--primary);border-radius:var(--radius-full);transition:width var(--transition)}&::-moz-progress-bar{background-color:var(--primary);border-radius:var(--radius-full)}}meter{appearance:none;width:100%;height:var(--bar-height);border:none;border-radius:var(--radius-full);overflow:hidden;background:var(--muted);&::-webkit-meter-bar{background:var(--muted);border:none;border-radius:var(--radius-full);height:var(--bar-height)}&::-webkit-meter-optimum-value,&::-webkit-meter-suboptimum-value,&::-webkit-meter-even-less-good-value{border-radius:var(--radius-full)}&::-webkit-meter-optimum-value{background:var(--success)}&::-webkit-meter-suboptimum-value{background:var(--warning)}&::-webkit-meter-even-less-good-value{background:var(--danger)}&::-moz-meter-bar{background:var(--success);border-radius:var(--radius-full)}&:-moz-meter-sub-optimum::-moz-meter-bar{background:var(--warning)}&:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:var(--danger)}}}@layer components{[aria-busy=true]{&:before{content:"";display:inline-block;inset:0;margin:auto;width:1.5rem;height:1.5rem;border:2px solid var(--muted);border-top-color:var(--primary);border-radius:var(--radius-full);animation:spin 1s linear infinite;text-align:center}&[data-spinner~=small]:before{width:1rem;height:1rem}&[data-spinner~=large]:before{width:2rem;height:2rem;border-width:3px}&[data-spinner~=overlay]{position:relative;>*{opacity:.3;pointer-events:none}&:before{position:absolute;inset:0;margin:auto;z-index:1}}}@keyframes spin{to{transform:rotate(360deg)}}}@layer components{:root{--grid-cols: 12;--grid-gap: 1.5rem;--container-max: 1280px;--container-pad: 1rem}.container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--container-pad)}.row{display:grid;grid-template-columns:repeat(var(--grid-cols),1fr);gap:var(--grid-gap);width:100%}.col,[class*=col-]{grid-column-end:span calc(var(--span, var(--grid-cols)) + var(--offset, 0))}.col-1{--span: 1}.col-2{--span: 2}.col-3{--span: 3}.col-4{--span: 4}.col-5{--span: 5}.col-6{--span: 6}.col-7{--span: 7}.col-8{--span: 8}.col-9{--span: 9}.col-10{--span: 10}.col-11{--span: 11}.col-12{--span: 12}.offset-1{--offset: 1}.offset-2{--offset: 2}.offset-3{--offset: 3}.offset-4{--offset: 4}.offset-5{--offset: 5}.offset-6{--offset: 6}[class*=offset-]{margin-inline-start:calc(var(--offset) * (100% + var(--grid-gap)) / (var(--span) + var(--offset)))}.col-end{grid-column-start:span var(--span, 1);grid-column-end:-1}@media(max-width:768px){.row{--grid-cols: 4;--grid-gap: 1rem}.col,[class*=col-]{--span: 4}[class*=offset-]{--offset: 0;margin-inline-start:0}}}@layer components{.card{background-color:var(--card);color:var(--card-foreground);border:1px solid var(--border);border-radius:var(--radius-medium);box-shadow:var(--shadow-small);padding:var(--space-6)}}@layer components{[role=alert]{position:relative;display:flex;gap:var(--space-3);padding:var(--space-4) var(--space-6);background-color:var(--background);border:1px solid var(--border);border-radius:var(--radius-medium);font-size:var(--text-7);&[data-variant]{border:none}&[data-variant=error],&[data-variant=danger]{color:var(--danger);background-color:light-dark(color-mix(in srgb,var(--danger) 8%,transparent),color-mix(in srgb,var(--danger) 20%,transparent));& a{color:var(--danger)}}&[data-variant=success]{color:var(--success);background-color:light-dark(color-mix(in srgb,var(--success) 8%,transparent),color-mix(in srgb,var(--success) 20%,transparent));& a{color:var(--success)}}&[data-variant=warning]{color:var(--warning);background-color:light-dark(color-mix(in srgb,var(--warning) 8%,transparent),color-mix(in srgb,var(--warning) 20%,transparent));& a{color:var(--warning)}}}}@layer components{.badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-4);font-size:var(--text-8);font-weight:var(--font-medium);line-height:var(--leading-normal);background-color:var(--primary);color:var(--primary-foreground);border-radius:var(--radius-full);&.secondary{background-color:var(--secondary);color:var(--secondary-foreground)}&.outline{background-color:transparent;color:var(--foreground);border:1px solid var(--border)}&.success{color:var(--success);background-color:light-dark(color-mix(in srgb,var(--success) 10%,transparent),color-mix(in srgb,var(--success) 30%,transparent))}&.warning{color:var(--warning);background-color:light-dark(color-mix(in srgb,var(--warning) 10%,transparent),color-mix(in srgb,var(--warning) 30%,transparent))}&.danger{color:var(--danger);background-color:light-dark(color-mix(in srgb,var(--danger) 10%,transparent),color-mix(in srgb,var(--danger) 30%,transparent))}}}@layer components{details{border:1px solid var(--border);border-radius:var(--radius-medium);overflow:hidden;+details{margin-top:-1px;border-start-start-radius:0;border-start-end-radius:0}&:has(+details){border-end-start-radius:0;border-end-end-radius:0}&[open] summary{border-bottom:1px solid var(--border)}}summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-4);font-weight:var(--font-medium);cursor:pointer;user-select:none;transition:background-color var(--transition-fast);&:hover{background-color:var(--muted)}&::-webkit-details-marker,&::marker{display:none}&:after{content:"";width:1em;height:1em;flex-shrink:0;background-color:currentColor;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");mask-size:contain;mask-repeat:no-repeat;transition:transform var(--transition-fast)}details[open] &:after{transform:rotate(180deg)}}details>*:not(summary){margin:var(--space-4)}}@layer components{[role=tablist]{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1);background-color:var(--muted);border-radius:var(--radius-medium)}[role=tab]{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-2) var(--space-3);font-size:var(--text-7);font-weight:var(--font-medium);white-space:nowrap;background-color:transparent;color:var(--foreground);border:none;border-radius:calc(var(--radius-medium) - 2px);cursor:pointer;transition:background-color var(--transition-fast),color var(--transition-fast);&:hover{color:var(--muted-foreground)}&[aria-selected=true]{background-color:var(--background);box-shadow:var(--shadow-small)}}[role=tabpanel]{padding:var(--space-4) 0;&:focus-visible{outline:none}}}@layer components{dialog{position:fixed;inset:0;z-index:var(--z-modal);width:min(100% - 2rem,32rem);max-height:85vh;margin:auto;padding:0;background-color:var(--card);border:1px solid var(--border);border-radius:var(--radius-large);box-shadow:var(--shadow-large);overflow:hidden;opacity:0;transform:scale(.95);transition:opacity .15s ease,transform .15s ease,overlay .15s ease allow-discrete,display .15s ease allow-discrete;&:is([open],:popover-open){opacity:1;transform:scale(1)}@starting-style{&:is([open],:popover-open){opacity:0;transform:scale(.95)}}&::backdrop{background-color:#0000;transition:background-color .15s ease,overlay .15s ease allow-discrete,display .15s ease allow-discrete}&:is([open],:popover-open)::backdrop{background-color:#00000080}@starting-style{&:is([open],:popover-open)::backdrop{background-color:#0000}}>header,>form>header{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-6);padding-block-end:0;>h1,>h2,>h3,>h4,>h5,>h6{margin-block-end:0}>p{font-size:var(--text-7);color:var(--muted-foreground);margin-block-end:0}}>p,>div,>section,>form>p,>form>div,>form>section{padding:var(--space-6);overflow-y:auto}>footer,>form>footer{display:flex;justify-content:flex-end;gap:var(--space-2);padding:var(--space-6);padding-block-start:0}}}@layer components{ot-dropdown{[popover]{position:fixed;margin:0;min-width:12rem;background-color:var(--background);border:1px solid var(--border);border-radius:var(--radius-medium);box-shadow:var(--shadow-medium);opacity:0;transform:translateY(-4px);transition:opacity .15s ease-out,transform .15s ease-out,display .15s allow-discrete,overlay .15s allow-discrete;&:popover-open{opacity:1;transform:translateY(0)}@starting-style{&:popover-open{opacity:0;transform:translateY(-4px)}}}[role=menuitem]{display:flex;align-items:center;justify-content:start;gap:var(--space-2);width:100%;padding:var(--space-2) var(--space-3);font-size:var(--text-7);text-align:start;color:var(--foreground);background:none;border:none;border-radius:var(--radius-small);cursor:pointer;&:hover,&:focus{background-color:var(--accent);outline:none}}}}@layer components{.toast-container{position:fixed;display:flex;flex-direction:column;pointer-events:none;margin:0;padding:0;border:none;background:transparent;overflow:visible;&::backdrop{display:none}&[data-placement=top-left]{inset:var(--space-4) auto auto var(--space-4)}&[data-placement=top-center]{inset:var(--space-4) auto auto 50%;transform:translate(-50%)}&[data-placement=top-right]{inset:var(--space-4) var(--space-4) auto auto}&[data-placement=bottom-left]{inset:auto auto var(--space-4) var(--space-4);flex-direction:column-reverse}&[data-placement=bottom-center]{inset:auto auto var(--space-4) 50%;transform:translate(-50%);flex-direction:column-reverse}&[data-placement=bottom-right]{inset:auto var(--space-4) var(--space-4) auto;flex-direction:column-reverse}}.toast{--transition: .3s;--transition-in: calc(var(--transition) - 50ms);padding:var(--space-5) var(--space-4);max-width:28rem;min-width:20rem;pointer-events:auto;background-color:var(--card);border:1px solid var(--border);border-inline-start-width:var(--space-1);border-inline-start-style:solid;border-radius:var(--radius-medium);box-shadow:var(--shadow-small);transition:opacity var(--transition-in),transform var(--transition-in),margin var(--transition-in);line-height:1;.toast-title{font-weight:600;margin:0 0 var(--space-3) 0}.toast-message{color:var(--muted-foreground)}&[data-variant=success]{border-inline-start-color:var(--success);.toast-title{color:var(--success)}}&[data-variant=danger]{border-inline-start-color:var(--danger);.toast-title{color:var(--danger)}}&[data-variant=warning]{border-inline-start-color:var(--warning);.toast-title{color:var(--warning)}}>[data-close]{margin-inline-start:auto;background:none;border:none;padding:0;cursor:pointer;opacity:.5;&:hover{opacity:1}}margin:var(--space-2) 0;&[data-entering]{opacity:0;transform:translateY(-1rem)}&[data-exiting]{opacity:0;margin:0;padding-block:0;max-height:0;overflow:hidden;transition:opacity var(--transition),margin var(--transition),padding var(--transition),max-height var(--transition)}}}@layer components{[data-sidebar-layout]{display:grid;grid-template-columns:14rem 1fr;grid-template-rows:auto 1fr;height:100dvh;>main{grid-row:2;min-width:0;overflow-y:auto}>aside[data-sidebar]{grid-row:2;min-height:0;z-index:1;background-color:var(--background);border-inline-end:1px solid var(--border);box-shadow:var(--shadow-medium);display:flex;flex-direction:column;>:is(header,footer){flex-shrink:0;padding:var(--space-3)}>footer{margin-block-start:auto}>nav{flex:1;min-height:0;overflow-y:auto;padding:var(--space-3) var(--space-2);font-size:var(--text-7);ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--space-1);li{margin:0}}a{display:flex;gap:var(--space-2);padding:var(--space-1) var(--space-3);color:var(--foreground);text-decoration:none;border-radius:var(--radius-small);transition:background-color var(--transition-fast);&:is(:hover,[aria-current]){background-color:var(--accent)}}details{border:none;overflow:visible;+details{margin-top:0}&[open] summary{border-bottom:none}>ul{margin-inline-start:var(--space-4);padding:var(--space-1) 0}}summary{justify-content:flex-start;padding:var(--space-2) var(--space-3);border-radius:var(--radius-small);&:after{width:.75rem;height:.75rem;margin-inline-start:auto}}}}>nav[data-topnav]{grid-column:1 / -1}}nav[data-topnav]{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-4);background-color:var(--background);border-bottom:1px solid var(--border);box-shadow:var(--shadow-small);a{text-decoration:none}}:is([data-sidebar-toggle],[data-sidebar-header]){display:none}[data-sidebar-toggle]{padding:0 var(--space-1);background:none;border:1px solid var(--border);border-radius:var(--radius-small)}@media(min-width:769px){[data-sidebar-layout=always]{transition:grid-template-columns var(--transition);[data-sidebar-toggle]{display:inline-block}>aside[data-sidebar]{transform:translate(0);opacity:1;transition:transform var(--transition),opacity var(--transition),visibility var(--transition)}&[data-sidebar-open]{grid-template-columns:0px 1fr;gap:0;>aside[data-sidebar]{overflow:hidden;min-width:0;transform:translate(-100%);opacity:0;visibility:hidden;border-inline-end:none}}}}@media(max-width:768px){[data-sidebar-layout]{grid-template-columns:1fr;>main{grid-column:1}>aside[data-sidebar]{grid-column:1;z-index:2;width:16rem;transform:translate(-100%);transition:transform var(--transition);box-shadow:var(--shadow-large)}&[data-sidebar-open]>aside[data-sidebar]{transform:translate(0)}}[data-sidebar-toggle]{display:inline-block}[data-sidebar-header]{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border)}}}@layer components{[role=status].skeleton{--_c: light-dark( color-mix(in srgb, var(--muted) 15%, white), color-mix(in srgb, var(--muted) 90%, var(--foreground)) );margin-block-end:var(--space-3);background:var(--muted);border-radius:var(--radius-medium);animation:anim 2s infinite;background-size:200% 100%;background-image:linear-gradient(90deg,var(--muted) 0%,var(--_c) 50%,var(--muted) 100%);&.box{width:4rem;height:4rem}&.line{height:1rem;width:100%}}[role=status].skeleton:last-child{margin-block-end:0}@keyframes anim{0%{background-position:200% 0}to{background-position:-200% 0}}}@layer components{[data-tooltip]{position:relative}[data-tooltip]:before,[data-tooltip]:after{position:absolute;inset-inline-start:50%;opacity:0;visibility:hidden;transition:opacity var(--transition-fast),transform var(--transition-fast),visibility var(--transition-fast);pointer-events:none;z-index:calc(var(--z-modal) + 10)}[data-tooltip]:after{content:attr(data-tooltip);inset-block-end:calc(100% + 10px);transform:translate(-50%) translateY(4px);padding:var(--space-2) var(--space-3);font-size:var(--text-7);line-height:1;white-space:nowrap;background:var(--foreground);color:var(--background);border-radius:var(--radius-medium)}[data-tooltip]:before{content:"";inset-block-end:calc(100% - 5px);transform:translate(-50%) translateY(4px);border:8px solid transparent;border-top-color:var(--foreground)}[data-tooltip]:is(:hover,:focus-visible):before,[data-tooltip]:is(:hover,:focus-visible):after{opacity:1;visibility:visible;transition-delay:.7s;transform:translate(-50%) translateY(0)}}@layer utilities{.align-left{text-align:start}.align-center{text-align:center}.align-right{text-align:end}.text-light{color:var(--muted-foreground)}.text-lighter{color:var(--faint-foreground)}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}.hstack{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;align-content:flex-start;height:auto;>*{margin:0}}.vstack{display:flex;flex-direction:column;gap:var(--space-3)}.gap-1{gap:var(--space-1)}.gap-2{gap:var(--space-2)}.gap-4{gap:var(--space-4)}.mt-2{margin-block-start:var(--space-2)}.mt-4{margin-block-start:var(--space-4)}.mt-6{margin-block-start:var(--space-6)}.mb-2{margin-block-end:var(--space-2)}.mb-4{margin-block-end:var(--space-4)}.mb-6{margin-block-end:var(--space-6)}.p-4{padding:var(--space-4)}.w-100{width:100%}:is(ul,ol,a).unstyled{list-style:none;text-decoration:none;padding:0}} diff --git a/static/oat.min.js b/static/oat.min.js new file mode 100644 index 0000000..4f95a5a --- /dev/null +++ b/static/oat.min.js @@ -0,0 +1 @@ +(()=>{var l=class extends HTMLElement{#t=!1;connectedCallback(){this.#t||(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>this.#e(),{once:!0}):this.#e())}#e(){this.#t||(this.#t=!0,this.init())}disconnectedCallback(){this.cleanup()}cleanup(){}handleEvent(t){let e=this[`on${t.type}`];e&&e.call(this,t)}keyNav(t,e,n,o,s,a=!1){let{key:r}=t,c=-1;return r===s?c=(e+1)%n:r===o?c=(e-1+n)%n:a&&(r==="Home"?c=0:r==="End"&&(c=n-1)),c>=0&&t.preventDefault(),c}emit(t,e=null){return this.dispatchEvent(new CustomEvent(t,{bubbles:!0,composed:!0,cancelable:!0,detail:e}))}$(t){return this.querySelector(t)}$$(t){return Array.from(this.querySelectorAll(t))}uid(){return Math.random().toString(36).slice(2,10)}};"commandForElement"in HTMLButtonElement.prototype||document.addEventListener("click",i=>{let t=i.target.closest("button[commandfor]");if(!t)return;let e=document.getElementById(t.getAttribute("commandfor"));if(!e)return;let n=t.getAttribute("command")||"toggle";e instanceof HTMLDialogElement&&(n==="show-modal"?e.showModal():n==="close"||e.open?e.close():e.showModal())});document.addEventListener("touchstart",i=>{i.target instanceof HTMLDialogElement&&(i.preventDefault(),i.target.close())},{passive:!1});var u=class extends l{#t=[];#e=[];init(){let t=this.$(':scope > [role="tablist"]');if(this.#t=t?[...t.querySelectorAll('[role="tab"]')]:[],this.#e=this.$$(':scope > [role="tabpanel"]'),this.#t.length===0||this.#e.length===0){console.warn("ot-tabs: Missing tab or tabpanel elements");return}this.#t.forEach((n,o)=>{let s=this.#e[o];if(!s)return;let a=n.id||`ot-tab-${this.uid()}`,r=s.id||`ot-panel-${this.uid()}`;n.id=a,s.id=r,n.setAttribute("aria-controls",r),s.setAttribute("aria-labelledby",a)}),t.addEventListener("click",this),t.addEventListener("keydown",this);let e=this.#t.findIndex(n=>n.ariaSelected==="true");this.#i(e>=0?e:0)}onclick(t){let e=this.#t.indexOf(t.target.closest('[role="tab"]'));e>=0&&this.#i(e)}onkeydown(t){if(!t.target.closest('[role="tab"]'))return;let e=this.keyNav(t,this.activeIndex,this.#t.length,"ArrowLeft","ArrowRight");e>=0&&(this.#i(e),this.#t[e].focus())}#i(t){this.#t.forEach((e,n)=>{let o=n===t;e.ariaSelected=String(o),e.tabIndex=o?0:-1}),this.#e.forEach((e,n)=>{e.hidden=n!==t}),this.emit("ot-tab-change",{index:t,tab:this.#t[t]})}get activeIndex(){return this.#t.findIndex(t=>t.ariaSelected==="true")}set activeIndex(t){t>=0&&t ${idx + 1}. -- ${parts.map((part, idx) => { - if (idx > 0) { - yOffset += offset; - } - return ` - `; - }).join(''); - } - - const vOffset = 25; - const svg = ` - - `; - - const svgBlob = new Blob([svg], { type: 'image/svg+xml;charset=utf-8' }); - const url = URL.createObjectURL(svgBlob); - - try { - const img = await loadImage(url); - const canvas = document.createElement('canvas'); - canvas.width = Math.ceil(width * scale); - canvas.height = Math.ceil(height * scale); - const ctx = canvas.getContext('2d'); - if (background !== 'transparent' || type !== 'image/png') { - ctx.fillStyle = background === 'transparent' ? '#0000' : background; - ctx.fillRect(0, 0, canvas.width, canvas.height); - } - ctx.drawImage(img, 0, 0, canvas.width, canvas.height); - const blob = await new Promise(res => canvas.toBlob(res, type, quality)); - if (!blob) throw new Error('Canvas.toBlob returned null.'); - return blob; - } finally { - URL.revokeObjectURL(url); - } - - function loadImage(src) { - return new Promise((resolve, reject) => { - const img = new Image(); - img.crossOrigin = 'anonymous'; - img.decoding = 'async'; - img.onload = () => resolve(img); - img.onerror = reject; - img.src = src; - }); - } - - async function inlineEverything(srcNode, dstNode) { - copyComputedStyle(srcNode, dstNode); - - // Remove interactive states that may be captured on touch devices - if (dstNode instanceof Element) { - // Reset outline from :focus state - dstNode.style.setProperty('outline', 'none', 'important'); - // Reset any pointer-events to ensure no hover states - const cs = window.getComputedStyle(srcNode); - // Only override cursor if it's pointer (indicating interactivity) - if (cs.cursor === 'pointer') { - dstNode.style.setProperty('cursor', 'default', 'important'); - } - } - - if (srcNode instanceof HTMLTextAreaElement) { - dstNode.textContent = srcNode.value; - } else if (srcNode instanceof HTMLInputElement) { - dstNode.setAttribute('value', srcNode.value); - if ((srcNode.type === 'checkbox' || srcNode.type === 'radio') && srcNode.checked) { - dstNode.setAttribute('checked', ''); - } - } else if (srcNode instanceof HTMLSelectElement) { - const sel = Array.from(srcNode.options).filter(o => o.selected).map(o => o.value); - Array.from(dstNode.options).forEach(o => (o.selected = sel.includes(o.value))); - } - - if (srcNode instanceof HTMLCanvasElement) { - try { - const dataURL = srcNode.toDataURL(); - const img = document.createElement('img'); - img.src = dataURL; - copyBoxSizing(dstNode, img); - dstNode.replaceWith(img); - dstNode = img; - } catch { } - } - - // Handle img elements to ensure they render properly - if (srcNode instanceof HTMLImageElement && dstNode instanceof HTMLImageElement) { - // Convert image to data URL for inlining - if (srcNode.complete && srcNode.naturalWidth > 0) { - try { - const canvas = document.createElement('canvas'); - const ctx = canvas.getContext('2d'); - canvas.width = srcNode.naturalWidth; - canvas.height = srcNode.naturalHeight; - ctx.drawImage(srcNode, 0, 0); - dstNode.src = canvas.toDataURL('image/png'); - // Also set width/height to ensure proper rendering - const cs = window.getComputedStyle(srcNode); - dstNode.style.width = cs.width; - dstNode.style.height = cs.height; - dstNode.style.objectFit = cs.objectFit; - } catch (err) { - // If cross-origin or other error, keep original src - console.log('Could not inline image:', err); - dstNode.src = srcNode.src; - } - } else { - // Image not loaded or has no dimensions, use src as-is - dstNode.src = srcNode.src || srcNode.getAttribute('src') || ''; - } - // Remove alt text from being rendered - dstNode.removeAttribute('alt'); - } - - materializePseudo(srcNode, dstNode, '::before'); - materializePseudo(srcNode, dstNode, '::after'); - - const sKids = srcNode.childNodes; - const dKids = dstNode.childNodes; - for (let i = 0; i < sKids.length; i++) { - const s = sKids[i], d = dKids[i]; - if (s && d && s.nodeType === 1 && d.nodeType === 1) await inlineEverything(s, d); - } - - function copyComputedStyle(src, dst) { - const cs = window.getComputedStyle(src); - let cssText = ''; - for (const prop of cs) cssText += `${prop}:${cs.getPropertyValue(prop)};`; - dst.setAttribute('style', (dst.getAttribute('style') || '') + cssText); - - // Always keep transform origin consistent - if (cs.transformOrigin) dst.style.transformOrigin = cs.transformOrigin; - - // Keep each line painting its own decoration (helps some engines) - dst.style.setProperty('box-decoration-break', 'clone', 'important'); - dst.style.setProperty('-webkit-box-decoration-break', 'clone', 'important'); - - // --- CAPSULE FIX: prevent decorated inline from splitting across lines --- - if (preventCapsuleSplit) { - const hasBg = (cs.backgroundImage && cs.backgroundImage !== 'none') || - (cs.backgroundColor && cs.backgroundColor !== 'rgba(0, 0, 0, 0)' && cs.backgroundColor !== 'transparent'); - const hasRadius = ['borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomRightRadius', 'borderBottomLeftRadius'] - .some(k => parseFloat(cs[k]) > 0); - const hasPad = ['paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft'] - .some(k => parseFloat(cs[k]) > 0); - const isInlineLevel = cs.display.startsWith('inline'); - - if (isInlineLevel && (hasBg || hasRadius || hasPad)) { - // Make it behave like a chip for capture: no internal wrapping - dst.style.setProperty('display', 'inline-block', 'important'); - dst.style.setProperty('white-space', 'nowrap', 'important'); - // In case original allowed breaking long words, emulate by clipping - if (cs.overflowWrap === 'break-word' || cs.wordBreak === 'break-all') { - dst.style.setProperty('max-width', cs.maxWidth && cs.maxWidth !== 'none' ? cs.maxWidth : '100%', 'important'); - dst.style.setProperty('overflow', 'hidden', 'important'); - dst.style.setProperty('text-overflow', 'ellipsis', 'important'); - } - } - } - } - - function copyBoxSizing(src, dst) { - const cs = window.getComputedStyle(src); - dst.style.width = cs.width; - dst.style.height = cs.height; - dst.style.display = cs.display; - dst.style.objectFit = 'contain'; - } - - function materializePseudo(src, dst, which) { - const ps = window.getComputedStyle(src, which); - if (!ps || ps.content === '' || ps.content === 'none') return; - const span = document.createElement('span'); - let cssText = ''; - for (const prop of ps) cssText += `${prop}:${ps.getPropertyValue(prop)};`; - span.setAttribute('style', cssText); - - const content = ps.content; - const quoted = /^(['"]).*\1$/.test(content); - if (quoted) span.textContent = content.slice(1, -1).replace(/\\n/g, '\n'); - else if (content.startsWith('attr(')) { - const attrName = content.slice(5, -1).trim(); - span.textContent = src.getAttribute(attrName) || ''; - } else span.textContent = ''; - - if (which === '::before') dst.insertBefore(span, dst.firstChild); - else dst.appendChild(span); - } - } + return new Promise((resolve) => { + canvas.toBlob((blob) => resolve(blob), 'image/png'); + }); } -async function shareDOM(target, title, text, filename) { +async function shareEntry(entryEl) { + const blob = await renderEntryCard(entryEl); + const head = entryEl.dataset.head || 'entry'; + const filename = `${head.replace(/[^a-zA-Z0-9\u0900-\u097F\u0D00-\u0D7F]/g, '_')}.png`; + const file = new File([blob], filename, { type: 'image/png', lastModified: Date.now() }); + + // 1. Try Web Share with image file. + if (navigator.canShare && navigator.canShare({ files: [file] })) { + await navigator.share({ files: [file] }); + return; + } + + // 2. Try Web Share with text/URL (no file support). + if (navigator.share) { + const def = entryEl.querySelector('.def'); + const url = `${window.location.origin}${window.location.pathname}#${entryEl.id}`; + await navigator.share({ + title: head, + text: def?.textContent?.trim() || '', + url: url, + }); + return; + } + + // 3. Try clipboard. + if (navigator.clipboard && window.ClipboardItem) { try { - // Remove any active/focus states before capturing - // This is especially important on touch devices (Android) - if (document.activeElement) { - document.activeElement.blur(); - } + await navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })]); + alert('Screenshot copied to clipboard'); + return; + } catch (e) { + console.log('Clipboard write failed, downloading instead:', e); + } + } - // Wait a brief moment for any :active states to clear - await new Promise(resolve => setTimeout(resolve, 100)); - - // Make a crisp image (PNG keeps transparency; use JPEG for smaller files) - const blob = await screenshotDOM(target, { - scale: Math.max(2, window.devicePixelRatio || 2), - type: 'image/png', - background: 'white' - }); - - const file = new File([blob], filename || 'share.png', { - type: blob.type, - lastModified: Date.now() - }); - - // Web Share API with files (Android Chrome, iOS/iPadOS Safari 16+). - if (navigator.canShare && navigator.canShare({ files: [file] })) { - await navigator.share({ title, text, files: [file] }); - return; - } - - // Copy image to clipboard (desktop Chrome/Edge, some Android) - if (navigator.clipboard && window.ClipboardItem) { - try { - await navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })]); - alert('Screenshot copied to clipboard'); - return; - } catch (clipErr) { - // Clipboard write failed (common on Android), fall through to download - console.log('Clipboard write not allowed, downloading instead:', clipErr); - } - } - - // Fallback: prompt a download - const dlUrl = URL.createObjectURL(blob); - const a = Object.assign(document.createElement('a'), { - href: dlUrl, - download: 'share.png' - }); - document.body.appendChild(a); - a.click(); - a.remove(); - URL.revokeObjectURL(dlUrl); - } catch (err) { - console.error(err); - alert(`share failed: ${err?.message || err}`); - } finally { } + // Fallback: download. + const url = URL.createObjectURL(blob); + const a = Object.assign(document.createElement('a'), { href: url, download: filename }); + document.body.appendChild(a); + a.click(); + a.remove(); + URL.revokeObjectURL(url); } diff --git a/static/style.css b/static/style.css index 014f377..c74d25c 100644 --- a/static/style.css +++ b/static/style.css @@ -1,611 +1,30 @@ :root { - --primary: #111; - --secondary: #333; - --light: #666; - --lighter: #aaa; - --lightest: #eee; - --lightestest: #f4f4f4; - --white: #fff; - --blue: #36c; + --container-max: 960px; + --muted: light-dark(#eee, #27272a); + --border: light-dark(#e8e8e8, #52525b); + --primary: light-dark(#111, #fafafa); } -* { - box-sizing: border-box; -} - -body { - background: #fbfbfb; - font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif; - margin: 0; - color: var(--primary); -} - -html, -body { - font-size: 1em; - line-height: 1.3; +html, body { height: 100%; + font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif; +} + +body { + background-color: var(--faint); min-width: 320px; } -:focus { - outline-style: solid; - outline-width: 2px; - outline-color: var(--blue); -} - -img { - max-width: 100%; -} - -hr { - height: 2px; - border: 0; - background: #ddd; - display: block; - margin: 30px 0; - clear: both; -} - -h1, -h2, -h3, -h4, -h5 { - margin: 10px 0 10px 0; -} - -h4, -h5 { - margin: 0 0 10px 0; - font-weight: normal; -} - -a { - color: var(--primary); -} - -a:hover { - color: var(--blue); -} - -input:not([type="radio"]), -select, -button, -textarea, -.button { - padding: 10px 15px; - font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif; - font-size: 1.2rem; - line-height: 1; - color: var(--primary); - border-radius: 5px; - border: 1px solid #ccc; -} - -select { - background-color: var(--white); - font-size: 0.875rem; -} - -label { - display: block; - color: var(--light); -} - -button, -.button { - background: var(--primary); - border-color: var(--primary); - color: var(--white); - width: auto; - cursor: pointer; - padding: 10px 20px; -} - -.button-outline { - background: var(--white); - color: var(--primary); -} - -.button-outline:hover { - background: var(--lighter); - color: var(--primary); -} - -button:hover, -.button:hover { - border-color: #444; - background: #444; -} - -.noul { - list-style-type: none; - margin: 0; - padding: 0; -} - -.text-right { - text-align: right; -} - -.box { - box-shadow: 2px 2px 1px #f6f6f6; - border: 1px solid #e6e6e6; - padding: 15px; -} - -.loader { - width: 16px; - padding: 3px; - aspect-ratio: 1; - border-radius: 50%; - background: #aaa; - --_m: - conic-gradient(#0000 10%, #000), - linear-gradient(#000 0 0) content-box; - -webkit-mask: var(--_m); - mask: var(--_m); - -webkit-mask-composite: source-out; - mask-composite: subtract; - animation: l3 1s infinite linear; -} - -@keyframes l3 { - to { - transform: rotate(1turn) +fieldset.group { + select { + border-radius: var(--radius-full) 0 0 var(--radius-full); + padding-left: var(--space-5); + padding-right: var(--space-5); } -} -/* Custom */ -.main { - margin: 30px auto 15px auto; - - display: flex; - flex-direction: column; -} - -.home .container { - max-width: 700px; - margin: auto; -} - -.logo a { - display: inline-block; -} - -.logo img { - height: auto; - max-height: 40px; -} - -.home .logo img { - max-width: 80%; -} - -.intro { - display: none; - color: #444; - margin: 30px 0 30px; - font-weight: normal; -} - -.search-form { - position: relative; -} - -.search-form>div { - display: flex; - align-items: stretch; -} - -.search-form .input-group { - display: flex; - flex-grow: 1; - align-self: center; -} - -.search-form input { - flex-grow: 1; - padding: 10px 15px; - border-width: 1px 0px; - border-radius: 0; -} - -.search-form select { - background-color: var(--white); - padding: 5px 15px; - border-radius: 30px 0 0 30px; - color: var(--light) -} - -.search-form select:focus { - z-index: 100; -} - -.search-form button { - line-height: 0; - padding: 7px 15px 7px 10px; - border-radius: 0 30px 30px 0; - z-index: 100; -} - -.search-form button img { - max-height: 32px; - min-width: 13px; -} - -.page { - margin: 30px 0 30px 0; -} - -.word { - background: var(--lightest); - padding: 0 5px; - border-radius: 30px; - margin: 0 5px 5px 0; - display: inline-block; - text-decoration: none; -} - - -.entries { - padding: 0; -} - -.entries .entry { - background-color: var(--white); - margin-bottom: 30px; - padding: 15px; - border-radius: 5px; - box-shadow: 2px 2px 1px #f6f6f6; - border: 1px solid #e6e6e6; - list-style-type: none; -} - -.entries .head { - position: relative; - margin-bottom: 10px; - display: flex; - align-items: baseline; - justify-content: space-between; -} - -.entries .title { - margin: 0; -} - -.entries .title-wrap { - display: flex; - align-items: center; - gap: 10px; -} - -.entries .audio { - display: inline-block; - vertical-align: middle; - cursor: pointer; - transition: ease-in-out 0.035s; -} -.entries .audio:hover { - transform: scale(1.1); -} - -.entries .pronun { - color: var(--light); -} - -.entries .defs { - padding: 0 0 0 30px; -} - -.entries .defs:not(:last-child) { - margin-bottom: 30px; -} - -.entries li::marker { - color: var(--lighter); -} - -.entries .defs li { - margin-bottom: 5px; - position: relative; -} - -.entries .defs li::marker { - font-size: 0.8em; -} - -.entries .defs .more { - display: none; -} - -.entries .defs .synonyms { - margin: 5px 0 10px 0; -} - -.entries .defs .synonyms a { - display: inline-block; - text-decoration: none; - color: var(--light); - font-size: 0.775rem; - margin-right: 8px; -} - -.entries .defs .synonyms a:hover { - color: var(--blue); -} - -.entries .more-toggle { - display: inline-block; - text-decoration: none; - transform: translate(0, 3px); - transition: transform 0.15s ease; - position: absolute; - margin: 0 5px; -} - -.entries .more-toggle::before { - width: 1em; - line-height: 0; - content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); - transform-origin: .5em 50%; -} - -.entries .more-toggle[data-open] { - transform: rotate(-180deg) translate(0, 3px); -} - -.entries .defs .types { - list-style-type: none; - display: block; - margin: 0 0 10px -15px; - color: var(--light); - text-decoration: underline; - text-decoration-style: dashed; - text-decoration-color: var(--lighter); - font-size: 0.675rem; - font-weight: bold; -} - -.entries .defs .types span { - margin-right: 10px; -} - -.entry .edit { - padding: 3px; - display: none; - text-decoration: none; - z-index: 1000; - line-height: 1; - text-shadow: 0px 3px 3px #fff; - font-size: 0.8rem; -} - -.entries .defs li:hover .edit { - display: inline-block; -} - -.entry .head:hover .edit { - display: inline-block; -} - -.entries .tags { - display: inline-block; - background-color: var(--lightestest); - border: 1px solid var(--lightest); - border-radius: 3px; - font-size: 0.75rem; - line-height: 1; - padding: 2px 5px; - color: var(--lighter); -} -.entries .meta { - display: flex; - align-items: center; - gap: 10px; -} - -.related .word { - margin: 0 5px 8px 0; - padding: 5px 10px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - display: inline-block; -} - -.form-submit fieldset { - padding: 0; - margin: 0 0 20px 0; - border: 0; -} - -.form-submit select { - margin-bottom: 5px; -} - -.form-submit select, -.form-submit textarea { - width: 100%; -} - -.form-submit li { - margin-bottom: 20px; -} - -.form-submit li:first-child .btn-remove-relation { - display: none; -} - -.form-submit input, -.form-submit textarea { - width: 100%; -} - -.form-comments { - margin: 10px 0 45px 0; - display: none; - padding: 15px; - clear: both; -} - -.form-comments textarea { - width: 100%; - min-height: 200px; -} - -.form-comments h3 { - margin: 0 0 15px 0; -} - -.form-comments button { - margin: 0 10px 10px 0; - width: 100%; -} - -.glossary .index { - background: #f7f7f7; - margin-bottom: 15px; -} - -.glossary .index a { - text-decoration: none; - display: inline-block; - padding: 5px; -} - -.glossary .index .sel, -.glossary .index a:hover { - background: var(--primary); - color: var(--white); -} - -.glossary .words { - /* column-count: auto; - column-gap: 0; */ - column-count: 3; - column-gap: 40px; -} - -.glossary .words li { - border-bottom: 1px solid #eee; - page-break-inside: avoid; - margin-bottom: 10px; -} - -.glossary .words a { - text-decoration: none; -} - -.pagination { - margin-top: 30px; -} - -.pagination a { - display: inline-block; - text-decoration: none; -} - -.pagination .pg-page { - padding: 0 6px; -} - -.pagination .pg-selected { - font-weight: bold; - border-bottom: 2px solid var(--primary); -} - -.pagination.top { - margin-bottom: 30px; -} - -.pagination.bottom { - margin-top: 30px; -} - -/* Custom pages */ -.page.type textarea { - width: 100%; - min-height: 400px; -} - -.page { - background-color: #fff; - padding: 30px; -} - -.page li { - margin-bottom: 20px; -} - -.page a { - color: var(--blue); -} - -.page a:hover { - color: var(--secondary); -} - -.nav { - border-bottom: 1px solid #ddd; - padding: 30px 0; - text-align: center; - margin-bottom: 30px; -} - -.nav a { - text-decoration: none; - color: var(--light); - margin: 0 15px; -} - -.nav a:hover { - color: var(--blue); -} - -.header { - margin-bottom: 40px; -} - -.footer { - padding-bottom: 30px; - text-align: center; - font-size: 0.75rem; - color: var(--light); -} - -.footer a { - color: var(--light); - display: inline-block; - margin: 0 10px; - text-decoration: none; -} - -.footer a:hover { - color: var(--blue); -} - -.footer img { - max-height: 9px; -} - -.footer .slash { - margin: 0 10px; -} - -.footer .credit img { - height: 11px; - width: auto; -} - -.footer .credit:hover img { - opacity: 0.6; -} - - -.center { - text-align: center; + button { + border-radius: 0 var(--radius-full) var(--radius-full) 0; + } } /* Homepage */ @@ -613,129 +32,432 @@ button:hover, display: flex; justify-content: center; min-height: 100%; - padding: 15px 0; + padding: var(--space-4) 0; + + .container { + max-width: 700px; + margin: auto; + } + + .header { + text-align: center; + margin-bottom: var(--space-8); + } + + .intro { + display: block; + } + + .logo { + --span: 12; + + img { + max-width: 250px; + max-height: 100%; + } + } + + .search { + --span: 12; + } + + .stats { + font-size: var(--text-7); + dd, dt { + display: inline-block; + } + } + + .nav { + margin-top: var(--space-14); + } } -.home .header { - text-align: center; - margin-bottom: 40px; +/* Entry/result cards */ +.card { + overflow: inherit; + padding: var(--space-3) var(--space-4); } -.home .intro { - display: block; +.entries { + .entry:not(:last-child) { + margin-bottom: var(--space-8); + } + + .entry:target { + outline: 3px solid var(--ring); + scroll-margin-top: var(--space-5); + } + + .head { + position: relative; + margin-bottom: var(--space-3); + align-items: baseline; + + &:hover .edit { + display: inline-block; + } + } + + .title { + margin: 0; + } + + .audio, + .toolbar .item { + background: none; + border: none; + padding: 0; + cursor: pointer; + line-height: 0; + transition: scale var(--transition-fast); + display: inline-block; + margin-left: var(--space-3); + text-decoration: none; + + img { + max-height: 12px; + width: auto; + } + + &:hover { + scale: 1.2; + } + } + + .audio img { + max-height: 14px; + width: auto; + } + + .meta { + gap: var(--space-3); + } + + .defs { + padding: 0 0 0 var(--space-8); + + &:not(:last-child) { + margin-bottom: var(--space-8); + } + + li { + margin-bottom: var(--space-2); + position: relative; + + &::marker { + font-size: 0.8em; + } + + &:hover .edit { + display: inline-block; + } + } + + .more { + display: none; + } + + .types { + list-style-type: none; + display: block; + margin: 0 0 var(--space-3) calc(-1 * var(--space-4)); + color: var(--muted-foreground); + text-decoration: underline; + text-decoration-style: dashed; + text-decoration-color: var(--faint-foreground); + font-size: var(--text-7); + font-weight: bold; + + span { + margin-right: var(--space-3); + } + } + + .synonyms { + margin: var(--space-1) 0 var(--space-3) 0; + + a { + display: inline-block; + text-decoration: none; + color: var(--muted-foreground); + font-size: var(--text-8); + margin-right: var(--space-2); + + &:hover { + color: var(--primary); + } + } + } + + .edit { + padding: 3px var(--space-3); + margin-left: var(--space-4); + display: none; + position: absolute; + text-decoration: none; + background: none; + border: none; + cursor: pointer; + + img { + max-height: 12px; + width: auto; + } + } + } + + li::marker { + color: var(--faint-foreground); + } + + .more-toggle { + display: inline-block; + text-decoration: none; + transform: translate(0, 3px); + transition: transform var(--transition-fast); + position: absolute; + margin: 0 var(--space-1); + + &::before { + width: 1em; + line-height: 0; + content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); + transform-origin: .5em 50%; + } + + &[data-open] { + transform: rotate(-180deg) translate(0, 3px); + } + } } -.home .logo { - width: 100%; - flex: none; - margin-bottom: 15px; -} +/* Glossary */ +.glossary { + .index { + margin-bottom: var(--space-4); + flex-wrap: wrap; + } -.home .logo img { - max-height: 100%; -} + .words { + column-count: 3; + column-gap: var(--space-10); -.home .search { - width: 100%; - flex: none; + li { + border-bottom: 1px solid var(--muted); + page-break-inside: avoid; + margin-bottom: var(--space-3); + } + + a { + text-decoration: none; + color: var(--foreground); + } + } } /* Autocomplete */ .autocomp { - background: #fff; - border-radius: 0 0 5px 5px; - border: 1px solid #ccc; + background: var(--card); + border-radius: 0 0 var(--radius-medium) var(--radius-medium); + border: 1px solid var(--border); border-top: 0; - box-shadow: 2px 2px 2px #eee; + box-shadow: var(--shadow-medium); text-align: left; - z-index: 100; + z-index: var(--z-dropdown); + + .autocomp-item { + padding: var(--space-1) var(--space-3); + cursor: pointer; + border-bottom: 1px solid var(--border); + + &:hover { + background: var(--faint); + font-weight: bold; + } + } + + .autocomp-sel { + background: var(--faint); + font-weight: bold; + } } -.autocomp-item { - padding: 5px 10px; - cursor: pointer; - border-bottom: 1px solid #eee; +/* Comments popover */ +.form-comments { + min-width: 400px; + + textarea { + width: 100%; + min-height: 200px; + } } -.autocomp-item:hover, -.autocomp-sel { - background: #f1f1f1; - font-weight: bold; +/* Word/related pills */ +.word { + background: var(--muted); + padding: 0 var(--space-1); + border-radius: var(--radius-full); + margin: 0 var(--space-1) var(--space-1) 0; + display: inline-block; + text-decoration: none; + transition: none; + + &:hover { + background: var(--primary); + color: var(--primary-foreground); + } +} + +.related .word { + padding: var(--space-1) var(--space-3); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +/* Search form */ +.search-form { + position: relative; + + select { + color: var(--muted-foreground); + max-width: 30%; + } + + button { + line-height: 0; + + img { + max-height: 32px; + min-width: 13px; + } + } +} + +/* Nav */ +.nav { + border-top: 1px dashed var(--border); + margin: var(--space-8) var(--space-2) var(--space-4); + font-size: var(--text-7); + display: flex; + flex-wrap: wrap; + gap: var(--space-4); + + a { + text-decoration: none; + color: var(--muted-foreground); + + &:hover { + color: var(--foreground); + } + } +} + +/* Footer */ +.footer { + padding-bottom: var(--space-8); + font-size: var(--text-8); + + display: flex; + gap: var(--space-4); + justify-content: center; + flex-wrap: wrap; + + img { + max-height: 10px; + } +} + +/* Page layout */ +.intro { + color: var(--muted-foreground); + margin: var(--space-4) 0; + font-weight: normal; + display: none; +} + +.logo { + a { + display: inline-block; + } + + img { + height: auto; + max-height: 42px; + } +} + +.header { + margin-bottom: var(--space-8); +} + +.page { + border-top: 1px solid var(--border); + padding-top: var(--space-8); +} + +/* Submission form */ +.form-submit { + fieldset, + > div [class^="col-"] { + padding: 0; + margin: 0 0 var(--space-5) 0; + border: 0; + } + + select { + margin-bottom: var(--space-1); + } + + li { + margin-bottom: var(--space-5); + + &:first-child .btn-remove-relation { + display: none; + } + } +} + +/* Responsive */ +@media screen and (max-width: 720px) { + main { + padding-block-start: var(--space-4); + } + + .logo { + text-align: center; + } + + .nav { + row-gap: var(--space-1); + } } @media screen and (max-width: 500px) { - .search-form select { - min-width: 0; - flex-shrink: 1; + .home .search-form { + .group { + flex-wrap: wrap; + } + + input, + button, + select { + flex-basis: 100%; + max-width: 100%; + margin-bottom: var(--space-3); + border: 1px solid var(--border); + border-radius: var(--radius-medium); + } } - .search-form .input-group { - min-width: 0; - flex-shrink: 1; - } + .entries { + .entry { + margin-bottom: var(--space-4); + } - .search-form input { - min-width: 0; - } -} - -@media screen and (max-width: 720px) { - .logo { - text-align: center; - margin-bottom: 5px; - } - .logo img { - max-height: 42px; - } - - .main { - margin-top: 15px; - } - - .header { - margin-bottom: 0; - } - - .footer a, .nav a { - display: block; - line-height: 1.4rem; - } - - .footer a.icon { - display: inline-block; - } -} - -@media screen and (max-width: 320px) { - .search-form>div { - flex-wrap: wrap; - } - - .search-form select { - flex-basis: 100%; - border-radius: 30px; - padding: 10px 15px; - margin-bottom: 10px; - } - - .search-form .input-group { - flex-basis: 100%; - width: 100%; - min-width: 0; - } - - .search-form input { - border-width: 1px 0 1px 1px; - border-radius: 30px 0 0 30px; - padding: 10px 15px; - min-width: 0; - } - - .entries .entry { - margin-bottom: 15px; - } - - .entries .defs:not(:last-child) { - margin-bottom: 15px; + .defs:not(:last-child) { + margin-bottom: var(--space-4); + } } } diff --git a/submit-new.html b/submit-new.html index 5f446a2..7b59a77 100644 --- a/submit-new.html +++ b/submit-new.html @@ -1,67 +1,67 @@ -{{ define "submit-entry" }} -{{ template "header" . }} +{% extends "base.html" %} -${part} ` - }).join('')} -{{ .L.T "public.submitEntryTitle" }}
+{% block content %} +{{ t(key="public.submitEntry") }}
@@ -69,6 +69,4 @@ - -{{ template "footer" . }} -{{ end }} +{% endblock %}
-
+
{{ t(key="public.noResultsTitle") }}
+{{ t(key="public.noResults") }}
+{% else %} +-
+ {% for w in glossary.words %}
+
{{ .L.T "public.glossaryTitle" }}
-{{ .L.T "public.noResults" }}
- {{ else }} - + {% if not initials or initials | length == 0 %} +{{ t(key="public.glossaryTitle") }}
+{{ t(key="public.noResults") }}
+ {% else %} + - - {{ template "glossary-words" . }} - - {{ end}} + + + {% include "glossary-words.html" %} + + + {% endif %}-
+ {%- for lang_code, count in consts.stats.languages -%}
+ {%- set lang_name = langs[lang_code].name -%}
+
About
Alar is an authoritative Kannada-English dictionary corpus @@ -50,7 +50,7 @@
This website is published using dictpress, and uses knphone, a Kannada phonetic - indexing algorithm, for search. Search suggestions and transliterations are powered by Varnam. + indexing algorithm, for search. Search suggestions and transliterations are powered by Varnam. The website's source is available here.
@@ -61,8 +61,8 @@
In 2019, Zerodha collaborated with - V. Krishna to open source and publish his dictionary online and +
In 2019, Zerodha collaborated with + V. Krishna to open source and publish his dictionary online and awarded him a grant to support his work.
@@ -72,5 +72,4 @@ alt="Indic Archive" />Since 2023, Alar is a project under Indic Digital Archive Foundation.
-
-
-
- {{- range $k, $r := (mustSlice .Data.Results.Entries 0 $numResults) -}}
-