feat: various improvements to styles and bugs

src/SEQTA.ts

@@ -38,7 +38,6 @@ import documentLoadCSS from '@/css/documentload.scss?inline'
 import renderSvelte from '@/svelte-interface/main'
 import Settings from '@/svelte-interface/pages/settings.svelte'
 import { settingsPopup } from './svelte-interface/hooks/SettingsPopup'
-import { OpenThemeCreator } from './seqta/ui/ThemeCreator'
 
 let SettingsClicked = false
 export let MenuOptionsOpen = false
@@ -465,8 +464,6 @@ export async function finishLoad() {
     console.error("Error during loading cleanup:", err);
   }
 
-  OpenThemeCreator()
-
   if (settingsState.justupdated && !document.getElementById('whatsnewbk')) {
     OpenWhatsNewPopup();
   }

src/css/injected.scss

@@ -1599,19 +1599,10 @@ iframe.userHTML {
 #main > .course > .content > .resources > h2 {
   color: var(--text-primary);
 }
-::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
-  transition: 1s;
-  border-radius: 16px;
-  //width: 0px !important;
-  //background: none;
-}
-::-webkit-scrollbar-track {
-  background-color: transparent;
-}
-::-webkit-scrollbar-corner {
-  background: none;
+
+/* set button(top and bottom of the scrollbar) */
+body::-webkit-scrollbar-button {
+  display: none !important;
 }
 :root,
 html,
@@ -1620,8 +1611,19 @@ div,
 ol,
 ul {
   scrollbar-width: thin !important;
-  scrollbar-color: var(--better-light) var(--better-sub);
+  scrollbar-color: #babac0 #fff !important;
 }
+
+.dark {
+  body,
+  div,
+  ol,
+  ul {
+    scrollbar-width: thin !important;
+    scrollbar-color: #333 #111 !important;
+  }
+}
+
 .connectedNotificationsWrapper > div > button {
   color: var(--text-primary) !important;
   height: 45px;

src/svelte-interface/components/TabbedContainer.svelte

@@ -72,7 +72,7 @@
     >
       <div class="flex">
         {#each tabs as { Content, props }, index}
-          <div class="absolute focus:outline-none w-full h-full transition-opacity duration-300 overflow-y-scroll tab {activeTab === index ? 'opacity-100 active' : 'opacity-0'}"
+          <div class="absolute focus:outline-none w-full h-full transition-opacity duration-300 overflow-y-scroll no-scrollbar tab {activeTab === index ? 'opacity-100 active' : 'opacity-0'}"
             style="left: {index * 100}%;">
              <Content {...props} />
           </div>

src/svelte-interface/components/store/ThemeModal.svelte

@@ -45,12 +45,23 @@
   }
 </script>
 
-<div class="fixed inset-0 z-50 flex items-end justify-center bg-black bg-opacity-70" onclick={() => hideModal()} onkeydown={() => hideModal()} role="button" tabindex="-1" transition:fade>
+<div 
+  class="fixed inset-0 z-50 flex items-end justify-center bg-black bg-opacity-70" 
+  onclick={(e) => {
+    if (e.target === e.currentTarget) hideModal();
+  }} 
+  onkeydown={(e) => {
+    if (e.target === e.currentTarget) hideModal();
+  }} 
+  role="button" 
+  tabindex="-1" 
+  transition:fade
+>
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div 
     bind:this={modalElement}
-    class="w-full max-w-xl h-[95%] p-4 bg-white rounded-t-2xl dark:bg-zinc-800 overflow-scroll" 
-    onclick={(e) => e.stopPropagation()} 
+    class="w-full max-w-[50%] h-[95%] p-4 bg-white rounded-t-2xl dark:bg-zinc-800 overflow-scroll no-scrollbar cursor-auto" 
+    onclick={(e) => e.stopPropagation()}
     onkeydown={(e) => e.stopPropagation()}
   >
     <div class="relative h-auto">

src/svelte-interface/components/themes/ThemeSelector.svelte

@@ -98,7 +98,7 @@
 </script>
 
 <div
-  class="w-full my-3"
+  class="w-full mt-3 mb-1"
   role="list"
   tabindex="-1"
   ondragover={handleDragOver}

src/svelte-interface/index.css

@@ -41,6 +41,10 @@ input {
   }
 }
 
+.no-scrollbar {
+  scrollbar-width: none !important;
+}
+
 .cm-editor {
   width: 100%;
   min-height: 100px;

src/svelte-interface/pages/settings.svelte

@@ -62,7 +62,7 @@
   });
 </script>
 
-<div class="w-[384px] shadow-2xl {$settingsState.DarkMode ? 'dark' : ''} { standalone ? 'h-[600px]' : 'h-full rounded-xl' } overflow-clip">
+<div class="w-[384px] no-scrollbar shadow-2xl {$settingsState.DarkMode ? 'dark' : ''} { standalone ? 'h-[600px]' : 'h-full rounded-xl' } overflow-clip">
   <div class="relative flex flex-col h-full gap-2 bg-white overflow-clip dark:bg-zinc-800 dark:text-white">
     <div class="grid border-b border-b-zinc-200/40 place-items-center">
       <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->

src/svelte-interface/pages/themeCreator.svelte

@@ -230,7 +230,7 @@
   {/if}
 {/snippet}
 
-<div class='h-screen overflow-y-scroll {$settingsState.DarkMode && "dark"} '>
+<div class='h-screen overflow-y-scroll {$settingsState.DarkMode && "dark"} no-scrollbar'>
   <div class='flex flex-col w-full min-h-screen p-2 bg-zinc-100 dark:bg-zinc-800 dark:text-white'>
     <h1 class='text-xl font-semibold'>Theme Creator</h1>
     <a href='https://betterseqta.gitbook.io/betterseqta-docs' target='_blank' class='text-sm font-light text-zinc-500 dark:text-zinc-400'>