diff --git a/assets/webui/ofdgo.css b/assets/webui/ofdgo.css index e6dd967..6ea0df8 100644 --- a/assets/webui/ofdgo.css +++ b/assets/webui/ofdgo.css @@ -640,6 +640,7 @@ a:focus-visible { } .font-listbox .font-option { + position: relative; display: flex; align-items: baseline; justify-content: space-between; @@ -662,10 +663,26 @@ a:focus-visible { font-size: 12px; } -.font-listbox .font-option:hover, +.font-listbox .font-option:not([data-disabled="true"]):hover, .font-listbox [data-selected="true"] { - background: var(--selected); - color: var(--accent); + background: var(--hover); +} + +.font-listbox [data-selected="true"] { + outline: 1px solid var(--focus); + outline-offset: -1px; +} + +.font-listbox [data-current="true"] { + color: var(--accent-strong); +} + +.font-listbox [data-current="true"]::before { + position: absolute; + inset: 6px auto 6px 0; + width: 2px; + background: var(--accent); + content: ""; } .font-listbox [data-disabled="true"], @@ -673,6 +690,10 @@ a:focus-visible { color: var(--text-muted); } +.font-listbox [data-disabled="true"] { + cursor: default; +} + .font-search-empty { padding: 6px 8px; } @@ -1915,21 +1936,6 @@ button:not(:disabled):hover { background: var(--accent-strong); } -.format-select:focus, -.format-select:focus-visible, -.order-select:focus, -.order-select:focus-visible { - border-color: var(--accent); - outline: 2px solid var(--accent); - outline-offset: 2px; -} - -.format-select option:checked, -.order-select option:checked { - background-color: var(--selected); - color: var(--accent-strong); -} - .zoom-label { min-width: 42px; text-align: center; @@ -2071,10 +2077,6 @@ body[data-hide-meta] .meta-panel { font-size: 12px; } -.document-select:not(:disabled):hover { - background-color: var(--hover); -} - .document-dialog { width: 440px; } @@ -4795,10 +4797,6 @@ audio.page-media { background-color: var(--input); } -.editor-toolbar > .editor-group > select:not(:disabled):hover { - background-color: var(--hover); -} - .page-surface, .thumb-paper, .print-preview-page img, @@ -4932,6 +4930,11 @@ audio.page-media { margin: 0; } +select:not(:disabled):hover, +#textAlign:not(:disabled):hover { + background-color: var(--hover); +} + select:not([multiple]):not([size]) { appearance: none; background-image: var(--dropdown-arrow); diff --git a/assets/webui/ofdgo_font.js b/assets/webui/ofdgo_font.js index dee398b..d05cb0d 100644 --- a/assets/webui/ofdgo_font.js +++ b/assets/webui/ofdgo_font.js @@ -98,12 +98,13 @@ export class FontPicker { return terms.every(term => name.includes(term)); }); this.list.replaceChildren(); - for (const { font, index } of this.matches) { + for (const { font, index, group } of this.matches) { const option = document.createElement("div"); option.className = "font-option"; option.id = `${this.list.id}-${index}`; option.dataset.index = String(index); option.setAttribute("data-disabled", String(Boolean(font.disabled))); + option.setAttribute("data-current", String(!font.disabled && group.includes(Number(this.value)))); const name = document.createElement("span"); name.textContent = font.menuFamily || font.fullName || font.name; option.append(name);