diff options
| author | Craig Jennings <c@cjennings.net> | 2026-06-20 05:48:01 -0400 |
|---|---|---|
| committer | Craig Jennings <c@cjennings.net> | 2026-06-20 05:48:01 -0400 |
| commit | 055e0992ddba95d19f6d7f77687ae80148479e7a (patch) | |
| tree | 1bc8e601ecfa5c117ec9ddd25c2587464b0d5ae2 /scripts/theme-studio/styles.css | |
| parent | 792e09b5554fb8633d2ca547c3cf6799aa02d797 (diff) | |
| download | dotemacs-055e0992ddba95d19f6d7f77687ae80148479e7a.tar.gz dotemacs-055e0992ddba95d19f6d7f77687ae80148479e7a.zip | |
feat(theme-studio): custom weight/slant dropdowns with previews
Replace the native weight and slant selects with a custom dropdown themed like the color dropdown. The values are spelled out (semibold instead of "semi", and an unset control reads "weight"/"slant" rather than "wt"/"sl"), and each popup option renders in its own weight or slant so the choice previews itself. The trigger shows the current value in that style too.
mkEnumDropdown mirrors the color dropdown's popup, lock, and outside-click handling, so the new control opens, locks, and closes the same way. The style-cluster gates drive the popup instead of a native select and check the spelled-out range plus the per-option preview.
Diffstat (limited to 'scripts/theme-studio/styles.css')
| -rw-r--r-- | scripts/theme-studio/styles.css | 9 |
1 files changed, 8 insertions, 1 deletions
diff --git a/scripts/theme-studio/styles.css b/scripts/theme-studio/styles.css index e81bef810..a22777035 100644 --- a/scripts/theme-studio/styles.css +++ b/scripts/theme-studio/styles.css @@ -20,7 +20,6 @@ .boxbtn.on{background:#3a3320;border-color:#e8bd30;color:#e8bd30} .boxbtn:disabled{opacity:.3;cursor:default} .stylecluster{display:flex;flex-wrap:wrap;align-items:center;gap:4px;width:max-content;max-width:210px} - select.stylesel{width:78px;padding:2px 4px;font:11px monospace;font-weight:normal} .exptoggle{width:18px;height:18px;padding:0;border:1px solid #3a3a3a;border-radius:3px;background:#1f1c19;color:#8a9496;font:12px monospace;line-height:1;cursor:pointer;vertical-align:middle} .exptoggle.on{background:#3a3320;border-color:#e8bd30;color:#e8bd30} .exptoggle.exp-nd{border-color:#e8bd30;color:#e8bd30} @@ -52,6 +51,14 @@ .cdd.compact.is-default{border-color:#8f7810;box-shadow:inset 0 0 0 1px #8f7810} .cddsw{display:inline-block;width:13px;height:13px;border-radius:3px;border:1px solid #0007;flex:none} .cdd.compact .cddsw{width:18px;height:18px} + .cdd.enumdd{width:auto;min-width:60px;max-width:96px;justify-content:center;background:#161412;color:#cdced1;font:13px monospace;padding:5px 8px} + .cdd.enumdd.is-default{color:#8a8a82} + .cdd.enumdd.locked{cursor:default;opacity:.85;box-shadow:inset 0 0 0 2px #e8bd3088} + .enumpop{display:flex;flex-direction:column;gap:2px;min-width:96px} + .enumopt{text-align:left;font:13px monospace;color:#cdced1;background:#161412;border:1px solid #3a3a3a;border-radius:4px;padding:4px 10px;cursor:pointer} + .enumopt:hover{background:#252321} + .enumopt.sel{outline:1px solid #e8bd30;outline-offset:1px} + .enumdef{color:#9a9a92} .cddpop{position:fixed;z-index:200;background:#161412;border:1px solid #3a3a3a;border-radius:6px;box-shadow:0 12px 34px #000c;max-height:70vh;overflow:auto;padding:8px} .cddghead{display:flex;align-items:center;gap:8px;margin-bottom:7px} .cddgdef{font:bold 11px monospace;color:#cdced1;background:#161412;border:1px solid #3a3a3a;border-radius:4px;padding:3px 10px;cursor:pointer} |