fix: linux display main page

src/pages/AddDspPage/AddDspPage.css

@@ -34,21 +34,26 @@
   color: var(--text-muted);
 }
 
-.add-dsp-form__field input,
-.add-dsp-form__field select {
+/* Input */
+
+.add-dsp-form__field input {
   height: var(--card-control-height);
   padding: 0 var(--space-3);
 
   background: var(--bg-panel);
+  color: var(--text-primary);
 
   border: var(--border-width) solid var(--border-hairline);
   border-radius: var(--radius-sm);
 
-  color: var(--text-primary);
   font-family: var(--font-ui);
   font-size: var(--font-sm);
 
   outline: none;
+
+  appearance: none;
+  -webkit-appearance: none;
+
   transition: border-color var(--dur-base) var(--ease-standard);
 }
 
@@ -56,11 +61,15 @@
   font-family: var(--font-mono);
 }
 
-.add-dsp-form__field input:focus,
-.add-dsp-form__field select:focus {
+.add-dsp-form__field input:focus {
   border-color: var(--accent-brand);
 }
 
+.add-dsp-form__field input::placeholder {
+  color: var(--text-muted);
+  opacity: 0.5;
+}
+
 .add-dsp-form__actions {
   display: flex;
   justify-content: flex-end;
@@ -68,7 +77,89 @@
   margin-top: var(--space-2);
 }
 
+.add-dsp-form__field input:disabled {
+  color: var(--text-muted);
+  background: var(--bg-panel);
+  border-color: var(--border-hairline);
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* CheckBox */
+
 .add-dsp-form__checkbox-label {
   display: flex;
   align-items: center;
+  gap: var(--space-2);
+  cursor: pointer;
+}
+
+.add-dsp-form__checkbox-label input[type='checkbox'] {
+  appearance: none;
+  -webkit-appearance: none;
+  box-sizing: border-box;
+
+  flex: 0 0 auto;
+  display: block;
+
+  width: 18px;
+  height: 18px;
+  aspect-ratio: 1 / 1;
+  padding: 0;
+  margin: 0;
+
+  background: var(--bg-panel);
+  border: var(--border-width) solid var(--border-hairline);
+  border-radius: var(--radius-sm);
+
+  position: relative;
+  cursor: pointer;
+  transition:
+    border-color var(--dur-base) var(--ease-standard),
+    background var(--dur-base) var(--ease-standard);
+}
+
+.add-dsp-form__checkbox-label input[type='checkbox']:checked {
+  background: var(--accent-brand);
+  border-color: var(--accent-brand);
+}
+
+.add-dsp-form__checkbox-label input[type='checkbox']:checked::after {
+  content: '';
+
+  position: absolute;
+  left: 50%;
+  top: 50%;
+
+  width: 5px;
+  height: 9px;
+
+  border: solid var(--bg-panel);
+  border-width: 0 2px 2px 0;
+
+  transform: translate(-50%, -60%) rotate(45deg);
+}
+
+.add-dsp-form__checkbox-label input[type='checkbox']:focus-visible {
+  outline: 2px solid var(--accent-brand);
+  outline-offset: 2px;
+}
+
+/* Stepper */
+
+.add-dsp-form__stepper {
+  width: auto;
+  flex: 0 0 auto;
+  min-width: 120px;
+  height: var(--card-control-height);
+}
+
+.add-dsp-form__stepper .choice-stepper__arrows {
+  padding: 4px 4px 4px 0;
+  gap: 2px;
+}
+
+.add-dsp-form__field .choice-stepper__input {
+  border: none;
+  background: transparent;
 }