General input style adjustments

gbv · Jun 27, 2024 · 257bde0 · 257bde0
1 parent 85603c0
commit 257bde0
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 8 deletions.
diff --git a/src/client/assets/main.css b/src/client/assets/main.css
@@ -60,7 +60,7 @@ header {
     "header_logo header_menu"
     "header_logo header_search";
 }
-@media only screen and (max-width: 550px) {
+@media only screen and (max-width: 600px) {
   header {
     grid-template-areas: 
       "header_logo header_menu"
@@ -85,7 +85,14 @@ header {
 }
 #header_search > input {
   width: 100%;
-  padding: 4px 8px;
+}
+input {
+  padding: 8px 10px !important;
+  border: 1px solid var(--color-primary);
+}
+input:focus {
+  outline: none;
+  box-shadow: 2px 2px 5px -2px var(--color-primary);
 }
 
 footer {

diff --git a/src/client/views/ItemView.vue b/src/client/views/ItemView.vue
@@ -157,6 +157,7 @@ const topConcepts = computed(() => {
   </div>
 </template>
 
+<!-- Note that we need unscoped rules for some of the selectors (particularly for "input") -->
 <style>
 #schemeHeader {
   grid-area: 2 / 1 / 3 / 3;
@@ -205,14 +206,8 @@ const topConcepts = computed(() => {
   }
   #searchInScheme > input {
     width: 50%;
-    padding: 8px 10px;
-    border: 1px solid var(--color-primary);
     border-top: none;
   }
-  #searchInScheme > input:focus {
-    outline: none;
-    box-shadow: 2px 2px 5px -2px var(--color-primary);
-  }
   #searchInScheme > .jskos-vue-itemSuggest-results {
     width: 50%;
   }