diff --git a/src/app.css b/src/app.css
index 0c9aae5..7cffd15 100644
--- a/src/app.css
+++ b/src/app.css
@@ -5,6 +5,8 @@
/* Theme */
:root {
+ --colorspace: oklch;
+
/* Theme Colors */
/* Green */
--min-bg: #96e28a;
@@ -13,92 +15,19 @@
--min-text: #bef5b5;
--max-text: #fff;
- --colorspace: oklch;
-
/* Dark */
- /* --min: #818181;
- --max: #000; */
+ /* --min-bg: #555;
+ --max-bg: #000;
- /* Blue */
- /* --min: #8a9fe2;
- --max: #151a38; */
-
- /* Red */
- /* --min: #e28a8a;
- --max: #641515; */
- /* End Theme Colors */
+ --min-text: #cfcfcf;
+ --max-text: #fff; */
}
-/* Theme Classes */
-.color-vigi-0 {
- @apply text-vigi-0 bg-vigi-0;
-}
-.color-vigi-5 {
- @apply text-vigi-5 bg-vigi-5;
-}
-.color-vigi-10 {
- @apply text-vigi-10 bg-vigi-10;
-}
-.color-vigi-15 {
- @apply text-vigi-15 bg-vigi-15;
-}
-.color-vigi-20 {
- @apply text-vigi-20 bg-vigi-20;
-}
-.color-vigi-25 {
- @apply text-vigi-25 bg-vigi-25;
-}
-.color-vigi-30 {
- @apply text-vigi-30 bg-vigi-30;
-}
-.color-vigi-35 {
- @apply text-vigi-35 bg-vigi-35;
-}
-.color-vigi-40 {
- @apply text-vigi-40 bg-vigi-40;
-}
-.color-vigi-45 {
- @apply text-vigi-45 bg-vigi-45;
-}
-.color-vigi-50 {
- @apply text-vigi-50 bg-vigi-50;
-}
-.color-vigi-55 {
- @apply text-vigi-55 bg-vigi-55;
-}
-.color-vigi-60 {
- @apply text-vigi-60 bg-vigi-60;
-}
-.color-vigi-65 {
- @apply text-vigi-65 bg-vigi-65;
-}
-.color-vigi-70 {
- @apply text-vigi-70 bg-vigi-70;
-}
-.color-vigi-75 {
- @apply text-vigi-75 bg-vigi-75;
-}
-.color-vigi-80 {
- @apply text-vigi-80 bg-vigi-80;
-}
-.color-vigi-85 {
- @apply text-vigi-85 bg-vigi-85;
-}
-.color-vigi-90 {
- @apply text-vigi-90 bg-vigi-90;
-}
-.color-vigi-95 {
- @apply text-vigi-95 bg-vigi-95;
-}
-.color-vigi-100 {
- @apply text-vigi-100 bg-vigi-100;
-}
-/* End Theme Classes */
/* End theme */
/* Components */
body {
- @apply bg-vigi-90 text-vigi-10 cursor-default;
+ @apply color-vigi-90 cursor-default;
user-select: none;
}
@@ -118,7 +47,7 @@ body {
}
.browser-window {
- @apply grow overflow-auto select-text cursor-auto;
+ @apply grow overflow-auto text-wrap select-text cursor-auto;
}
.window-controls {
@@ -129,10 +58,10 @@ body {
@apply p-1 rounded-lg;
@apply ease-out duration-150;
- @apply hover:bg-vigi-90;
- @apply hover:px-2 hover:mx-1 hover:scale-125 cursor-pointer;
+ @apply hover:color-vigi-90;
+ @apply cursor-pointer;
- @apply active:bg-vigi-100;
+ @apply active:color-vigi-100;
}
.tabs-category {
@@ -140,12 +69,14 @@ body {
}
.block {
- @apply p-2 rounded-xl bg-vigi-60;
+ @apply p-2 rounded-xl color-vigi-60;
}
.sidebar {
@apply shrink-0 grow-0 flex flex-col w-1/5;
@apply ease-out duration-300;
+
+ @apply max-sm:hidden;
}
.sidebar.collapsed {
@@ -156,20 +87,35 @@ body {
}
.top-bar {
+ @apply flex max-sm:flex-row-reverse gap-3;
+}
+
+.top-bar-buttons {
@apply flex;
}
-.search-input {
- @apply ms-2 px-2 py-1 rounded-xl grow;
+.hide-sidebar-button,
+.back-button,
+.forward-button {
+ @apply max-sm:hidden;
+}
- @apply bg-vigi-60 outline-none;
- @apply focus:bg-vigi-50 focus:text-vigi-0 hover:bg-vigi-55;
+.open-tabs-page-button {
+ @apply sm:hidden;
+}
+
+.search-input {
+ @apply px-2 py-1 rounded-xl grow;
+
+ @apply color-vigi-60 outline-none;
+ @apply focus:color-vigi-50 hover:color-vigi-55;
@apply ease-out duration-100;
}
input::placeholder {
- @apply text-vigi-40 focus:text-vigi-20;
+ @apply color-vigi-60;
+ @apply focus:color-vigi-50 hover:color-vigi-55;
}
.tabs {
@@ -177,40 +123,35 @@ input::placeholder {
}
.tab {
- @apply p-2 rounded-xl bg-vigi-50;
+ @apply p-2 rounded-xl color-vigi-50;
@apply cursor-pointer;
@apply ease-out duration-100;
- @apply hover:bg-vigi-55;
+ @apply hover:color-vigi-55;
@apply hover:px-4;
@apply flex items-center gap-2 w-full truncate;
}
+.tab.loading {
+ @apply animate-load-pulse;
+}
+
.close-button {
@apply p-1 rounded-lg;
@apply ease-out duration-100;
- @apply hover:bg-vigi-90 active:bg-vigi-100;
+ @apply hover:color-vigi-90 active:color-vigi-100;
}
-/* .tab .close-button {
- @apply text-transparent;
-}
-
-.tab:hover .close-button {
- @apply text-vigi-0;
-} */
-
.tab.active {
- @apply bg-vigi-40 text-vigi-0 font-bold;
-
- @apply hover:bg-vigi-45;
+ @apply color-vigi-40 font-bold;
+ @apply hover:color-vigi-45;
}
::selection {
- @apply bg-vigi-60;
+ @apply color-vigi-60;
}
/* width */
@@ -225,12 +166,12 @@ input::placeholder {
/* Handle */
::-webkit-scrollbar-thumb {
- @apply rounded-xl bg-vigi-70 bg-clip-content;
+ @apply rounded-xl color-vigi-70 bg-clip-content;
border: 6px solid transparent;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
- @apply bg-vigi-75;
+ @apply color-vigi-75;
border: 5px solid transparent;
}
diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
index e30a2fc..d934a4a 100644
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@@ -1,7 +1,8 @@
-