wip

mallowigi · mallowigi · commit 87bd9d160d15 · 2023-11-10T16:20:33.000+02:00
diff --git a/src/components/Loading.svelte b/src/components/Loading.svelte
@@ -26,6 +26,10 @@
       line-height: 1;
       font-size: 2em;
     }
+
+    &:empty {
+      display: none;
+    }
   }
 
 </style>
diff --git a/src/components/Settings.svelte b/src/components/Settings.svelte
@@ -1,5 +1,5 @@
 <script>
-    import { app } from '~store/store.ts';
+  import { app } from '~store/store.ts';
 
   import { styleBuilder } from '~utils/styleBuilder';
   import { debounce } from '@github/mini-throttle';
diff --git a/src/components/ThemeSwitcher.svelte b/src/components/ThemeSwitcher.svelte
@@ -29,15 +29,15 @@
     </header>
   {/if}
 
-  <grid>
+  <grid class='grid'>
     <div class='first-col'>
-      <ThemeSelector></ThemeSelector>
+      <ThemeSelector />
 
-      <Settings></Settings>
+      <Settings />
     </div>
 
     <div class='second-col preview'>
-      <ThemePreview></ThemePreview>
+      <ThemePreview />
     </div>
   </grid>
 </div>
@@ -102,7 +102,7 @@
     }
   }
 
-  grid {
+  .grid {
     display: grid;
     grid-template-columns: 50% 50%;
     grid-column-gap: 20px;
diff --git a/src/devtools.svelte b/src/devtools.svelte
@@ -3,7 +3,7 @@
   import darkStyle from 'data-text:./assets/dark.css';
   import lightStyle from 'data-text:./assets/light.css';
 
-  (async function (w, storage, panels, browserAction) {
+  (async function(w, storage, panels, browserAction) {
     const SETTINGS = 'devtools-settings';
     const DEVTOOLS_THEME = 'devtools-theme';
     const DEVTOOLS_FONT = 'devtools-font';
@@ -62,7 +62,7 @@
                   cyan,
                   white,
                   gray,
-                  error,
+                  error
                 } = currentTheme.colors;
 
           return this.styles({
@@ -106,7 +106,7 @@
             error,
             fontFamily: currentFontFamily,
             fontSize: currentFontSize,
-            accentColor: accentColor,
+            accentColor: accentColor
           });
         }
       },
@@ -197,59 +197,59 @@
                error,
                fontFamily,
                fontSize,
-               accentColor,
+               accentColor
              }) {
         // language=CSS
         return `
-        :root {
-          --bg: ${background};
-          --fg: ${foreground};
-          --text: ${primary};
-          --selBg: ${selectBg};
-          --selFg: ${selectFg};
-          --selFg2: ${selectFg2};
-          --button: ${button};
-          --disabled: ${disabled};
-          --contrast: ${contrast};
-          --second: ${second};
-          --active: ${table};
-          --border: ${border};
-          --hl: ${highlight};
-          --tree: ${tree};
-          --notif: ${notif};
-          --accent: ${accentColor || accent};
-          --excluded: ${excluded};
+          :root {
+            --bg: ${background};
+            --fg: ${foreground};
+            --text: ${primary};
+            --selBg: ${selectBg};
+            --selFg: ${selectFg};
+            --selFg2: ${selectFg2};
+            --button: ${button};
+            --disabled: ${disabled};
+            --contrast: ${contrast};
+            --second: ${second};
+            --active: ${table};
+            --border: ${border};
+            --hl: ${highlight};
+            --tree: ${tree};
+            --notif: ${notif};
+            --accent: ${accentColor || accent};
+            --excluded: ${excluded};
 
-          --tags: ${tags};
-          --attributes: ${attributes};
-          --comments: ${comments};
-          --keywords: ${keywords};
-          --errors: ${errors};
-          --vars: ${vars};
-          --operators: ${operators};
-          --functions: ${functions};
-          --strings: ${strings};
-          --numbers: ${numbers};
-          --links: ${links};
-          --parameters: ${parameters};
-          --green: ${green};
-          --red: ${red};
-          --yellow: ${yellow};
-          --blue: ${blue};
-          --purple: ${purple};
-          --orange: ${orange};
-          --cyan: ${cyan};
-          --white: ${white};
-          --gray: ${gray};
-          --error: ${error};
+            --tags: ${tags};
+            --attributes: ${attributes};
+            --comments: ${comments};
+            --keywords: ${keywords};
+            --errors: ${errors};
+            --vars: ${vars};
+            --operators: ${operators};
+            --functions: ${functions};
+            --strings: ${strings};
+            --numbers: ${numbers};
+            --links: ${links};
+            --parameters: ${parameters};
+            --green: ${green};
+            --red: ${red};
+            --yellow: ${yellow};
+            --blue: ${blue};
+            --purple: ${purple};
+            --orange: ${orange};
+            --cyan: ${cyan};
+            --white: ${white};
+            --gray: ${gray};
+            --error: ${error};
 
 
-          --ui-font-family: Roboto, Helvetica Neue, Arial, sans-serif;
-          --font-family: ${fontFamily}, Menlo, Consolas, "Fira Code", monospace;
-          --font-size: ${fontSize || 10}px;
-        }
-      `;
-      },
+            --ui-font-family: Roboto, Helvetica Neue, Arial, sans-serif;
+            --font-family: ${fontFamily}, Menlo, Consolas, "Fira Code", monospace;
+            --font-size: ${fontSize || 10}px;
+          }
+        `;
+      }
     };
 
     function generateScrollbarsStyle(scrollbars = true) {
@@ -258,29 +258,29 @@
       }
       // language=CSS
       return `
-      :host ::-webkit-scrollbar,
-      html ::-webkit-scrollbar,
-      .-theme-with-dark-background ::-webkit-scrollbar,
-      :host-context(.-theme-with-dark-background) ::-webkit-scrollbar {
-        width: 10px !important;
-        height: 10px !important;
-        opacity: 0 !important;
-        transition: opacity 0.4s ease;
-      }
-    `;
+        :host ::-webkit-scrollbar,
+        html ::-webkit-scrollbar,
+        .-theme-with-dark-background ::-webkit-scrollbar,
+        :host-context(.-theme-with-dark-background) ::-webkit-scrollbar {
+          width: 10px !important;
+          height: 10px !important;
+          opacity: 0 !important;
+          transition: opacity 0.4s ease;
+        }
+      `;
     }
 
     async function themeSetup() {
       storage.get(SETTINGS, async (object) => {
         const settings = object[SETTINGS];
         if (settings && settings.startsWith('{')) {
           const json = JSON.parse(settings);
-          const size = json[DEVTOOLS_SIZE],
-                theme = json[DEVTOOLS_THEME] || 'Oceanic',
-                current = json[DEVTOOLS_CURRENT],
-                family = json[DEVTOOLS_FONT],
+          const size       = json[DEVTOOLS_SIZE],
+                theme      = json[DEVTOOLS_THEME] || 'Oceanic',
+                current    = json[DEVTOOLS_CURRENT],
+                family     = json[DEVTOOLS_FONT],
                 scrollbars = json[DEVTOOLS_SCROLLBARS] ?? true,
-                accent = json[DEVTOOLS_ACCENT_COLOR];
+                accent     = json[DEVTOOLS_ACCENT_COLOR];
 
           // Variables
           let style = styleBuilder.generateThemeVars(current, family, size, accent);
@@ -293,18 +293,16 @@
           // Apply theme
           if (current.dark) {
             panels.applyStyleSheet(lightStyle);
-          } else {
+          }
+          else {
             panels.applyStyleSheet(darkStyle);
           }
           // Apply def style
           panels.applyStyleSheet(scroll);
-        } else {
+        }
+        else {
           // Append scroll manually
           const scroll = generateScrollbarsStyle(true);
-
-          // css = await fetch('~/assets/default.css').then((res) => res.text());
-
-          console.log('applying default theme');
           panels.applyStyleSheet(defaultStyle);
           panels.applyStyleSheet(scroll);
         }
diff --git a/src/popup.svelte b/src/popup.svelte
@@ -1,5 +1,6 @@
 <script lang='ts'>
   import App from '~App.svelte';
+  import './styles/app.scss';
 </script>
 
 <style global lang='scss'>
@@ -21,8 +22,8 @@
     margin: 0;
     height: 100%;
     width: 100%;
-    min-width: 1024px;
-    min-height: 800px;
+    min-width: 720px;
+    min-height: 600px;
     font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
     font-size: 14px;
     line-height: 1.5;
@@ -135,6 +136,7 @@
     flex-direction: column;
     justify-content: flex-start;
     align-items: center;
+    overflow-x: hidden;
   }
 </style>
 
diff --git a/src/styles/app.scss b/src/styles/app.scss
@@ -0,0 +1,81 @@
+@import 'base/variables';
+@import 'base/typography';
+@import 'base/animations';
+
+:root {
+  --bg: #263238;
+  --fg: #b0bec5;
+}
+
+.loading {
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
+  text-align: center;
+  width: 100%;
+  margin: 0 auto;
+  padding: 0 2rem;
+  max-width: 40rem;
+  min-width: 24rem;
+}
+
+select,
+input[type='text'],
+input[type='range'],
+input[type='range']::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  background: transparent;
+  outline: none;
+  width: 100%;
+  height: 2.3125rem;
+  padding: 0.5rem;
+  margin: 0;
+
+  &:focus {
+    outline: none;
+    box-shadow: none;
+  }
+}
+
+input[type='text'] {
+  border: 0.0625rem solid var(--hl);
+  background: var(--contrast);
+}
+
+input[type='range'] {
+  border: 0 none;
+  line-height: normal;
+  font: inherit;
+  transition: all 0.15s ease;
+
+  &:focus {
+    &::-webkit-slider-thumb {
+      box-shadow: 0 0 0 0.5rem rgba(0, 0, 0, 0.075);
+    }
+  }
+}
+
+input[type='range']::-webkit-slider-thumb {
+  width: 1rem;
+  height: 1rem;
+  border: 0.1875rem solid var(--accent);
+  background-color: var(--accent);
+  box-shadow: 0 0 0 0.1875rem var(--border);
+  border-radius: 100%;
+  margin-top: -0.5rem;
+  transition: inherit;
+}
+
+input[type='range']::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 0.125rem;
+  cursor: pointer;
+  background: var(--hl);
+  border-radius: 0.25rem;
+}
+
+@for $item from 1 through 40 {
+  .anim.anim-delayed:nth-child(#{$item}) {
+    animation-delay: #{$item/12}s !important;
+  }
+}
diff --git a/src/styles/base/_animations.scss b/src/styles/base/_animations.scss
diff --git a/src/styles/base/_typography.scss b/src/styles/base/_typography.scss
diff --git a/src/styles/base/_variables.scss b/src/styles/base/_variables.scss

Original file line number	Diff line number	Diff line change
`@@ -26,6 +26,10 @@`
`26`	`26`	`line-height: 1;`
`27`	`27`	`font-size: 2em;`
`28`	`28`	`}`
	`29`	`+`
	`30`	`+ &:empty {`
	`31`	`+ display: none;`
	`32`	`+ }`
`29`	`33`	`}`
`30`	`34`
`31`	`35`	`</style>`