Improve styles

Author: ricktu288

src/app/components/App.vue

@@ -197,8 +197,8 @@ export default {
    border-left-width: 4px;
    -webkit-border-radius: 6px 2px;
    -webkit-box-shadow:
-   inset 0 0 0 0px rgba(128, 128, 128, 0.2),
-   inset 0 0 0 4px rgba(128, 128, 128, 0.2);
+   inset 0 0 0 0px rgba(112, 112, 112, 0.35),
+   inset 0 0 0 4px rgba(112, 112, 112, 0.35);
 }
 ::-webkit-scrollbar-track-piece {
    margin: 4px 0;

src/app/components/LanguageModal.vue

@@ -23,8 +23,8 @@
           <h5 class="modal-title" id="staticBackdropLabel_language" v-html="$t('simulator:settings.language.title')"></h5>
           <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
         </div>
-        <div class="modal-body">
-          <div class="d-flex align-items-center">
+        <div class="modal-body language-modal-body">
+          <div class="language-header d-flex align-items-center">
             <div class="d-flex w-100">
               <div class="col" v-html="$t('simulator:settings.language.title')"></div>
               <div class="col text-end" v-html="$t('simulator:languageModal.translatedFraction')"></div>
@@ -43,15 +43,18 @@
               </div>
             </a>
           </div>
-
-          <small>
-            <a href="https://hosted.weblate.org/engage/ray-optics-simulation/" target="_blank" v-html="$t('simulator:languageModal.helpTranslate')">
-            </a>
-          </small>
         </div>
-        <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" v-html="$t('simulator:common.closeButton')">
-          </button>
+        <div class="modal-footer d-flex justify-content-between">
+          <div>
+            <small>
+              <a href="https://hosted.weblate.org/engage/ray-optics-simulation/" target="_blank" v-html="$t('simulator:languageModal.helpTranslate')">
+              </a>
+            </small>
+          </div>
+          <div>
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" v-html="$t('simulator:common.closeButton')">
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -122,7 +125,17 @@ export default {
 
 <style scoped>
 .language-list {
-  margin: 1rem 0;
+  margin: 0.25rem 0 1rem 0;
+}
+
+.language-header {
+  padding: 0 0.75rem;
+}
+
+.language-modal-body {
+  max-height: 70vh;
+  overflow-y: auto;
+  padding-right: 8px;
 }
 
 .modal-backdrop {

src/app/components/toolbar/LayoutAidsBar.vue

@@ -17,7 +17,7 @@
 <template>
   <div v-if="layout === 'desktop'" class="col-auto d-none d-xxl-block">
     <div class="row justify-content-center">
-      <div class="btn-group" role="group">
+      <div class="btn-group layout-aids-controls" role="group">
         <input type="checkbox" class="btn-check" id="showGrid" autocomplete="off" v-model="showGrid" @click="e => e.target.blur()">
         <label id="showGrid_label" class="btn shadow-none btn-secondary" for="showGrid" v-tooltip-popover="{ title: $t('simulator:settings.layoutAids.showGrid') }">
           <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-grid-3x3" viewBox="0 0 16 16">
@@ -116,4 +116,10 @@ export default {
     }
   }
 }
-</script>
+</script>
+
+<style>
+.layout-aids-controls {
+  width: max-content;
+}
+</style>

src/app/components/toolbar/SettingsList.vue

@@ -281,6 +281,7 @@ export default {
 <style scoped>
 .advanced-help {
   font-size: 9pt;
+  max-width: 280px;
 }
 
 #showAdvancedSettings {

src/app/components/toolbar/Toolbar.vue

@@ -301,7 +301,8 @@ export default {
 }
 
 #more-options-dropdown {
-  width:350px;
+  min-width: 300px;
+  width: max-content;
   max-height: 80vh;
   overflow-y: auto;
 }

src/app/components/toolbar/controls/SettingsWarning.vue

@@ -21,7 +21,9 @@
       alignItems: 'center',
       fontSize: '0.875rem',
       paddingLeft: '10px',
-      marginRight: layout === 'mobile' ? '0' : '5px'
+      width: '300px',
+      marginLeft: 'auto',
+      marginRight: 'auto'
     }"
   >
     <svg 

src/pages/modules.hbs

@@ -73,6 +73,34 @@
       font-size: 12pt;
     }
 
+    ::-webkit-scrollbar {
+      background: none;
+      width: 12px;
+      height: 12px;
+    }
+    ::-webkit-scrollbar-thumb {
+      border: solid 0 rgba(0, 0, 0, 0);
+      border-right-width: 4px;
+      border-left-width: 4px;
+      -webkit-border-radius: 6px 2px;
+      -webkit-box-shadow:
+      inset 0 0 0 0px rgba(112, 112, 112, 0.35),
+      inset 0 0 0 4px rgba(112, 112, 112, 0.35);
+    }
+    ::-webkit-scrollbar-track-piece {
+      margin: 4px 0;
+    }
+    ::-webkit-scrollbar-thumb:hover {
+        border-right-width: 3px;
+        border-left-width: 3px;
+      -webkit-box-shadow:
+        inset 0 0 0 0px rgba(128,128,128,0.9),
+        inset 0 0 0 4px rgba(128,128,128,0.9);
+    }
+    ::-webkit-scrollbar-corner {
+      background: transparent;
+    }
+
   </style>
 </head>