this repo has no description
1#shortcuts-settings-container .shortcuts-list {
2 line-height: 1.5;
3 padding: 0;
4 margin: 8px 0 0;
5 counter-reset: index;
6 border-radius: 8px;
7 overflow: hidden;
8}
9#shortcuts-settings-container .shortcuts-list li {
10 display: flex;
11 align-items: center;
12 padding: 8px;
13 gap: 4px;
14 background-color: var(--bg-faded-color);
15}
16#shortcuts-settings-container .shortcuts-list li::before {
17 content: counter(index);
18 counter-increment: index;
19 display: inline-block;
20 width: 1.2em;
21 text-align: end;
22 margin-inline-end: 8px;
23 color: var(--text-insignificant-color);
24 font-size: 90%;
25 flex-shrink: 0;
26}
27#shortcuts-settings-container .shortcuts-list li .shortcut-text {
28 flex-grow: 1;
29 min-width: 0;
30 line-height: 1;
31 word-break: break-word;
32}
33#shortcuts-settings-container .shortcuts-list li .shortcut-actions {
34 flex-shrink: 0;
35}
36
37#shortcuts-settings-container .shortcuts-view-mode {
38 display: flex;
39 align-items: stretch;
40 gap: 2px;
41 margin: 8px 0 0;
42}
43#shortcuts-settings-container .shortcuts-view-mode label {
44 border-radius: 4px;
45 background-color: var(--bg-faded-color);
46 padding: 16px;
47 text-align: center;
48 cursor: pointer;
49 display: block;
50 flex-grow: 1;
51 display: flex;
52 gap: 8px;
53 flex-direction: column;
54 align-items: center;
55 justify-content: center;
56}
57#shortcuts-settings-container .shortcuts-view-mode label:first-child {
58 border-start-start-radius: 16px;
59 border-end-start-radius: 16px;
60}
61#shortcuts-settings-container .shortcuts-view-mode label:last-child {
62 border-start-end-radius: 16px;
63 border-end-end-radius: 16px;
64}
65#shortcuts-settings-container .shortcuts-view-mode label img {
66 max-height: 64px;
67
68 &:dir(rtl) {
69 transform: scaleX(-1);
70 }
71}
72@media (prefers-color-scheme: dark) {
73 #shortcuts-settings-container .shortcuts-view-mode label img {
74 filter: invert(0.9) hue-rotate(180deg);
75 }
76}
77#shortcuts-settings-container .shortcuts-view-mode label span {
78 text-align: center;
79 font-size: 80%;
80}
81#shortcuts-settings-container .shortcuts-view-mode label input {
82 position: absolute;
83 opacity: 0;
84 pointer-events: none;
85 perspective: 500px;
86}
87#shortcuts-settings-container .shortcuts-view-mode label input ~ * {
88 opacity: 0.5;
89 transition: opacity 0.2s ease-out;
90}
91#shortcuts-settings-container .shortcuts-view-mode label.checked {
92 box-shadow:
93 inset 0 0 0 3px var(--link-color),
94 inset 0 0 32px var(--link-faded-color);
95}
96#shortcuts-settings-container
97 .shortcuts-view-mode
98 label
99 input:is(:hover, :active, :checked)
100 ~ * {
101 opacity: 1;
102}
103
104#shortcuts-settings-container summary {
105 cursor: pointer;
106}
107
108#shortcut-settings-form form > * {
109}
110
111#shortcut-settings-form label {
112 display: flex;
113 flex-direction: row;
114 gap: 8px;
115 align-items: center;
116}
117#shortcut-settings-form label > span:first-child {
118 flex-basis: 5em;
119 text-align: end;
120}
121#shortcut-settings-form :is(input[type='text'], select) {
122 flex-grow: 1;
123 flex-basis: 70%;
124 flex-shrink: 1;
125 /* width: calc(100% - 32px); */
126 min-width: 0;
127 max-width: 320px;
128}
129#shortcut-settings-form .form-note {
130 display: flex;
131 gap: 6px;
132 align-items: center;
133}
134#shortcut-settings-form form footer {
135 display: flex;
136 gap: 16px;
137}
138
139/* Import/Export */
140
141#import-export-container input[type='text'] {
142 font-family: var(--monospace-font);
143}
144#import-export-container section {
145 margin: 8px 0;
146 background-color: var(--bg-faded-color);
147 border-radius: 16px;
148 padding: 8px;
149}
150#import-export-container section h3 {
151 margin: 0 0 8px;
152}
153#import-export-container section h3 * {
154 vertical-align: middle;
155}
156#import-export-container section p {
157 margin: 8px 0;
158
159 &.field-button {
160 display: flex;
161 gap: 8px;
162
163 button {
164 flex-shrink: 0;
165 }
166 }
167}
168#import-export-container section details > summary {
169 cursor: pointer;
170}
171#import-export-container .import-settings-list {
172 border-radius: 8px;
173 overflow: hidden;
174 margin: 8px 0 0;
175 padding: 0;
176 counter-reset: index;
177}
178#import-export-container .import-settings-list li {
179 background-color: var(--bg-blur-color);
180 margin: 0 0 2px;
181 padding: 8px 4px;
182 display: flex;
183 gap: 4px;
184}
185#import-export-container .import-settings-list li::before {
186 content: counter(index);
187 counter-increment: index;
188 display: inline-block;
189 width: 1.2em;
190 text-align: end;
191 margin-inline-end: 8px;
192 color: var(--text-insignificant-color);
193 font-size: 90%;
194 flex-shrink: 0;
195}
196
197#import-export-container {
198 footer {
199 font-size: 90%;
200 color: var(--text-insignificant-color);
201
202 .icon {
203 vertical-align: text-bottom;
204 }
205 }
206}