Update style

src/assets/css/main.scss

@@ -1,16 +1,17 @@
 @import '@/assets/css/tailwind.css';
 @import 'leaflet/dist/leaflet.css';
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;400;500;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,400;0,500;0,900;1,100;1,400&display=swap');
 @import '@/assets/css/leaflet.scss';
+@import '@/assets/css/webkit.scss';
 
 * {
   box-sizing: content-box;
 }
 
 body {
-  @apply bg-gray-100;
+  background-color: #f5f7fb;
+  @apply font-main;
   @apply dark:bg-slate-900;
-  @apply font-inter;
   @apply dark:text-slate-400;
 }
 

src/assets/css/webkit.scss

@@ -0,0 +1,21 @@
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+  -webkit-transition: background .3s;
+  transition: background .3s;
+}
+
+::-webkit-scrollbar-corner {
+  background: 0 0;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: rgb(0,0,0, .16);
+  @apply dark:bg-slate-600;
+}
+
+::-webkit-scrollbar-track {
+  background: rgb(0,0,0, .06);
+  @apply dark:bg-slate-700;
+}

src/components/Card/VCard.vue

@@ -1,5 +1,13 @@
 <template>
-  <div class="shadow bg-white print:shadow-none print:border-0 dark:bg-slate-800 ">
+  <div class="border-1 card dark:border-slate-700 bg-white print:shadow-none print:border-0 dark:bg-slate-800 rounded">
     <slot />
   </div>
-</template>
+</template>
+
+<style>
+.card {
+    box-shadow: rgba(30,41,59,.04) 0 2px 4px 0;
+    border: 1px solid rgba(98,105,118,.16);
+    transition: transform .3s ease-out,opacity .3s ease-out,box-shadow .3s ease-out;
+}
+</style>

src/components/Card/VCardContent.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="p-4 dark:text-slate-400">
+  <div class="p-4 pl-5 pr-5 dark:text-slate-400 text-slate-800">
     <slot />
   </div>
 </template>

src/components/Card/VCardHeader.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="p-4 pb-0 uppercase text-sm dark:text-slate-200 font-medium">
+  <div class="p-4 pl-5 pr-5 text dark:text-slate-200 border-b font-medium dark:border-b-slate-700">
     <slot />
   </div>
 </template>

src/components/Gallery/ControlImageNext.vue

@@ -1,14 +1,14 @@
 <template>
   <button
     type="button"
-    class="w-20 h-20 rounded-full text-black cursor-pointer dark:text-white opacity-50"
+    class="p-2 text-black cursor-pointer dark:text-white opacity-50 bg-black"
   >
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      class="h-20 w-20"
+      class="h-8 w-8"
       fill="none"
       viewBox="0 0 24 24"
-      stroke="currentColor"
+      stroke="white"
       stroke-width="2"
     >
       <path

src/components/Gallery/ControlImagePrevious.vue

@@ -1,14 +1,14 @@
 <template>
   <button
     type="button"
-    class="w-20 h-20 rounded-full text-black cursor-pointer dark:text-white opacity-50"
+    class="p-2 text-black cursor-pointer dark:text-white opacity-50 bg-black"
   >
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      class="h-20 w-20"
+      class="h-8 w-8"
       fill="none"
       viewBox="0 0 24 24"
-      stroke="currentColor"
+      stroke="white"
       stroke-width="2"
     >
       <path

src/components/Gallery/GalleryThumbnail.vue

@@ -1,6 +1,6 @@
 <template>
   <div 
-    class="bg-white dark:bg-gray-800 flex flex-col justify-center cursor-pointer w-24 h-24 dark:border-gray-600 rounded-md shadow box-border"
+    class="bg-white dark:bg-gray-800 flex flex-col justify-center cursor-pointer w-24 h-24 dark:border-gray-600 rounded-md border box-border"
     :title="title"
   >
     <img 

src/components/Gallery/ImageViewer.vue

@@ -4,7 +4,7 @@
     @click="emit('close')"
   >
     <div 
-      class="min-w-96 dark:bg-slate-900 relative rounded-lg shadow-sm mb-24"
+      class="min-w-96 dark:bg-slate-900  rounded-lg shadow-sm mb-24"
       @click.stop
     >
       <VSpinner v-if="isLoading" />

src/modules/otus/components/Citation/CitationList.vue

@@ -5,16 +5,14 @@
         Nomenclature citations
       </h1>
     </VCardHeader>
-    <VCardContent>
-      <ul class="text-sm">
-        <CitationRow
-          v-for="citation in citations"
-          :key="citation.id"
-          :citation="citation"
-          class="flex justify-start border-b-2 p-3 pl-0 last:border-b-0 dark:border-b-slate-700"
-        />
-      </ul>
-    </VCardContent>
+    <ul class="text-sm">
+      <CitationRow
+        v-for="citation in citations"
+        :key="citation.id"
+        :citation="citation"
+        class="flex justify-start border-b p-3 px-4 last:border-b-0 dark:border-b-slate-700"
+      />
+    </ul>
   </VCard>
 </template>
 

src/modules/otus/components/Citation/CitationRow.vue

@@ -1,16 +1,32 @@
 <template>
   <li>
     <ButtonExpand
+      v-if="false"
       v-model="isExpanded"
       class="mr-2"
-    /> 
-    <div>
-      <template v-if="isExpanded">
+    />
+
+    <svg 
+      v-if="!isExpanded"
+      @click="isExpanded = !isExpanded"
+      xmlns="http://www.w3.org/2000/svg" class="h-6 w-6  text-primary-700 opacity-60 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+    </svg>
+
+    <svg
+      v-else
+      @click="isExpanded = !isExpanded"
+      xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 min-w-fit min-h-6 text-primary-700 opacity-60 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+    </svg>
+
+    <div class="pt-0.5">
+      <div v-if="isExpanded">
         <span v-html="citation.source.label" />
         <span v-if="citation.pages">
           :{{ citation.pages }}
         </span>
-      </template>
+      </div>
 
       <span
         v-else

src/modules/otus/components/Map.vue

@@ -1,6 +1,6 @@
 <template>
   <VCard>
-    <VCardContent class="h-96 max-h-96">
+
       <VSpinner v-if="isLoading" />
       <VMap
         ref="map"
@@ -9,7 +9,7 @@
         :geojson="geojson"
         @geojson:ready="isLoading = false"
       />
-    </VCardContent>
+
   </VCard>
 </template>
 

src/modules/otus/components/TaxaInfo.vue

@@ -3,7 +3,7 @@
     <h2 class="text-1xl text-gray-700 capitalize dark:text-gray-400">
       {{ taxon.rank || taxon.type }}
     </h2>
-    <h1 class="text-2xl dark:text-gray-100">
+    <h1 class="text-xl dark:text-gray-100">
       <span v-html="taxonNameString" />
       <span 
         class="ml-2"

src/modules/otus/views/Index.vue

@@ -27,12 +27,14 @@
           />
           <Autocomplete
             class="
-              print:hidden 
+              print:hidden
               min-w-full 
               mb-2
               md:min-w-fit
               md:ml-2
-              md:mb-0"
+              md:mb-0
+              w-60
+            "
             url="/otus/autocomplete"
             query-param="term"
             label="label_html"
@@ -49,7 +51,9 @@
           />
         </div>
 
-        <TabMenu class="m-[-1px] print:hidden">
+        <TabMenu
+          v-if="tabs.length"
+          class="m-[-1px] print:hidden">
           <TabItem
             v-for="({ name, label }) in tabs"
             :key="name"

tailwind.config.js

@@ -11,7 +11,7 @@ module.exports = {
   theme: {
     extend: {
       fontFamily: {
-        inter: ['Inter', 'sans-serif']
+        main: ['-apple-system','BlinkMacSystemFont','San Francisco','Segoe UI','Roboto','Helvetica Neue','sans-serif']
       },
       colors: {
         'primary': colors.sky,