Refactor UI styles for share dialog, prompt type selection, and acces…

…sibility improvements
TMHSDigital · Dec 23, 2024 · 58083a3 · 58083a3
1 parent 3852e1f
commit 58083a3
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 19 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -945,8 +945,86 @@ footer {
     background-position: right 1rem center;
     background-size: 1.25rem;
     padding-right: 2.5rem;
+    min-width: 180px;
+}
+
+.form-select option {
+    padding: 0.75rem 1rem;
+    background-color: var(--background-color);
+    color: var(--text-color);
+    font-size: 0.9375rem;
+}
+
+.form-select option:hover {
+    background-color: var(--primary-color);
+    color: white;
+}
+
+/* Dark mode adjustments */
+.dark-mode .form-select option {
+    background-color: var(--dark-surface);
+    color: var(--dark-text);
+}
+
+/* Add tooltip styles */
+.form-select[title] {
+    position: relative;
+}
+
+.form-select[title]:hover::after {
+    content: attr(title);
+    position: absolute;
+    bottom: calc(100% + 0.5rem);
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 0.5rem 0.75rem;
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+    font-size: 0.875rem;
+    border-radius: 0.5rem;
+    white-space: nowrap;
+    z-index: 10;
+    pointer-events: none;
 }
 
+.form-select option[title]:hover::after {
+    content: attr(title);
+    position: absolute;
+    left: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    padding: 0.5rem 0.75rem;
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+    font-size: 0.875rem;
+    border-radius: 0.5rem;
+    white-space: nowrap;
+    z-index: 10;
+    pointer-events: none;
+}
+
+/* Dark mode tooltip adjustments */
+.dark-mode .form-select[title]:hover::after,
+.dark-mode .form-select option[title]:hover::after {
+    background: rgba(255, 255, 255, 0.9);
+    color: var(--dark-bg);
+}
+
+/* Mobile adjustments */
+@media (max-width: 768px) {
+    .prompt-type-section {
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    .form-select {
+        width: 100%;
+        padding: 0.75rem 1rem;
+    }
+}
+
+/* ... rest of the existing styles ... */ 
+
 .form-select:hover {
     border-color: var(--primary-color);
     transform: translateY(-1px);
@@ -959,7 +1037,7 @@ footer {
     box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
 }
 
-/* Dark mode adjustments */
+/* Dark mode adjustments for form-select */
 .dark-mode .form-select {
     background-color: var(--dark-surface);
     border-color: #404040;
@@ -975,19 +1053,4 @@ footer {
 .dark-mode .form-select:focus {
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
-}
-
-/* Mobile adjustments */
-@media (max-width: 768px) {
-    .prompt-type-section {
-        flex-direction: column;
-        gap: 1rem;
-    }
-
-    .form-select {
-        width: 100%;
-        padding: 0.75rem 1rem;
-    }
-}
-
-/* ... rest of the existing styles ... */ 
+} 
diff --git a/js/main.js b/js/main.js
@@ -38,15 +38,19 @@ class PromptUI {
     updateMediumTypes() {
         this.elements.promptMedium.innerHTML = Object.entries(mediumTypes)
             .map(([value, medium]) => `
-                <option value="${value}">${medium.name}</option>
+                <option value="${value}" title="${medium.description}">
+                    ${medium.name}
+                </option>
             `).join('');
     }
 
     updatePromptTypes(medium) {
         const types = mediumTypes[medium]?.types || {};
         this.elements.promptType.innerHTML = Object.entries(types)
             .map(([value, type]) => `
-                <option value="${value}">${type.name}</option>
+                <option value="${value}" title="${type.description}">
+                    ${type.name}
+                </option>
             `).join('');
     }