forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
1<main>
2 <div id="command-menu" class="panel">
3 <div id="breadcrumbs" aria-label="Navigation path" role="navigation"></div>
4 <label for="search" id="search-wrapper">
5 <input
6 id="search"
7 type="text"
8 placeholder="Type a command…"
9 autocomplete="off"
10 spellcheck="false"
11 role="combobox"
12 aria-autocomplete="list"
13 aria-controls="kmenu-listbox"
14 aria-expanded="true"
15 />
16 </label>
17 <ul id="kmenu-listbox" role="listbox" aria-label="Commands"></ul>
18 </div>
19</main>
20
21<style>
22 @import "./styles/base.css";
23 @import "./styles/wireframe/ui.css";
24 @import "./vendor/@phosphor-icons/web/bold/style.css";
25
26 body {
27 display: flex;
28 align-items: center;
29 justify-content: center;
30 height: 100dvh;
31 }
32
33 main {
34 width: min(var(--container-lg), 90vw);
35 }
36
37 #command-menu {
38 padding: 0;
39 overflow: hidden;
40 }
41
42 #breadcrumbs {
43 display: flex;
44 align-items: center;
45 gap: var(--space-sm);
46 padding: var(--space-xs) var(--space-sm);
47 font-size: var(--fs-xs);
48 font-weight: 600;
49 text-transform: uppercase;
50 letter-spacing: var(--tracking-wider);
51 color: oklch(from var(--text-color) l c h / 0.5);
52 border-bottom: 2px solid var(--form-color);
53 }
54
55 #breadcrumbs:empty {
56 display: none;
57 }
58
59 .crumb-home {
60 background: oklch(from var(--text-color) l c h / 0.075);
61 border: none;
62 border-radius: var(--radius-sm);
63 cursor: pointer;
64 padding: 0;
65 font-size: inherit;
66 font-weight: inherit;
67 line-height: 0.75;
68 padding: var(--space-2xs);
69 letter-spacing: inherit;
70 text-box: trim-both cap alphabetic;
71 text-transform: inherit;
72
73 &:hover {
74 text-decoration: underline;
75 }
76 }
77
78 #search-wrapper {
79 display: flex;
80 align-items: center;
81 gap: var(--space-xs);
82 padding: var(--space-sm);
83 border-bottom: 2px solid var(--form-color);
84 }
85
86 #search-wrapper i {
87 flex-shrink: 0;
88 color: oklch(from var(--text-color) l c h / 0.5);
89 pointer-events: none;
90 }
91
92 #search {
93 border: none;
94 padding: 0;
95 font-size: var(--fs-sm);
96 background: transparent;
97 flex: 1;
98 width: 100%;
99 }
100
101 #kmenu-listbox {
102 list-style: none;
103 margin: 0;
104 padding: var(--space-2xs) 0;
105 max-height: 340px;
106 overflow-y: auto;
107 }
108
109 .group-label {
110 color: oklch(from var(--text-color) l c h / 0.45);
111 font-size: var(--fs-2xs);
112 font-weight: 600;
113 letter-spacing: calc(var(--tracking-widest) * 2);
114 padding: var(--space-2xs) var(--space-sm);
115 pointer-events: none;
116 text-transform: uppercase;
117 }
118
119 .option {
120 display: flex;
121 align-items: center;
122 gap: var(--space-xs);
123 padding: var(--space-xs) var(--space-sm);
124 cursor: pointer;
125 user-select: none;
126 font-size: var(--fs-sm);
127 }
128
129 .option[aria-selected="true"] {
130 background-color: var(--accent);
131 color: var(--bg-color);
132 }
133
134 .option[aria-disabled="true"] {
135 opacity: 0.35;
136 cursor: not-allowed;
137 pointer-events: none;
138 }
139
140 .option-label {
141 flex: 1;
142 }
143
144 .option .option-chevron {
145 flex-shrink: 0;
146 font-size: var(--fs-xs);
147 opacity: 0.6;
148 }
149
150 .panel {
151 gap: 0;
152 }
153
154 .empty-message {
155 padding: var(--space-md);
156 text-align: center;
157 color: oklch(from var(--text-color) l c h / 0.45);
158 font-size: var(--fs-sm);
159 pointer-events: none;
160 }
161</style>
162
163<script type="module" src="facets/misc/command/index.inline.js"></script>