feat: Add CSS styles for CommandLine component

2026-06-22 05:55:07 +00:00
parent e72fb3f44a
commit af142699e1
1 changed files with 111 additions and 0 deletions
@@ -0,0 +1,111 @@
+.command-line {
+  background-color: var(--surface);
+  border-top: var(--border-width) solid var(--border);
+  padding: var(--spacing-sm);
+  min-height: 60px;
+}
+
+.command-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+
+.command-label {
+  font-family: var(--font-family);
+  font-size: var(--font-size-sm);
+  color: var(--text);
+  font-weight: var(--font-weight-medium);
+}
+
+.command-input-container {
+  display: flex;
+  gap: var(--spacing-sm);
+}
+
+.command-input {
+  flex: 1;
+  padding: var(--spacing-sm);
+  border: var(--border-width) solid var(--border);
+  border-radius: var(--border-radius);
+  background-color: var(--background);
+  color: var(--text);
+  font-family: var(--font-family);
+  font-size: var(--font-size-md);
+}
+
+.command-input:focus {
+  outline: 2px solid var(--primary);
+  outline-offset: 1px;
+}
+
+.command-submit {
+  padding: var(--spacing-sm) var(--spacing-md);
+  background-color: var(--primary);
+  color: var(--background);
+  border: none;
+  border-radius: var(--border-radius);
+  cursor: pointer;
+  font-family: var(--font-family);
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-medium);
+  transition: background-color var(--transition-normal);
+}
+
+.command-submit:hover {
+  background-color: var(--primary-dark);
+}
+
+.suggestions-list {
+  position: absolute;
+  background-color: var(--surface);
+  border: var(--border-width) solid var(--border);
+  border-radius: var(--border-radius);
+  max-height: 200px;
+  overflow-y: auto;
+  z-index: 100;
+  list-style: none;
+  padding: 0;
+  margin: var(--spacing-xs) 0 0 0;
+  width: 300px;
+}
+
+.suggestion-item {
+  padding: var(--spacing-sm);
+  cursor: pointer;
+  color: var(--text);
+  font-family: var(--font-family);
+  font-size: var(--font-size-md);
+}
+
+.suggestion-item:hover {
+  background-color: var(--hover);
+}
+
+/* Screen reader only */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  .command-input-container {
+    flex-direction: column;
+  }
+  
+  .command-submit {
+    width: 100%;
+  }
+  
+  .suggestions-list {
+    width: calc(100% - 2 * var(--spacing-sm));
+  }
+}