mirror of
https://github.com/TxtDot/vigi.git
synced 2024-10-16 11:18:03 +03:00
fix: theme system, adapt to small screens
This commit is contained in:
parent
1488604772
commit
20f5234572
7 changed files with 109 additions and 191 deletions
151
src/app.css
151
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
<script>
|
||||
export let onClick = () => {};
|
||||
export let onClick = () => {};
|
||||
export let className = "";
|
||||
</script>
|
||||
|
||||
<button class="button" on:click={onClick}>
|
||||
<slot />
|
||||
<button class={`button${className ? " " + className : ""}`} on:click={onClick}>
|
||||
<slot />
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
{/if}
|
||||
|
||||
<button
|
||||
class={`tab${loading && active ? " animate-pulse" : ""}`}
|
||||
class={`tab${loading && active ? " loading" : ""}`}
|
||||
class:active
|
||||
transition:slide={{ duration: 100 }}
|
||||
bind:this={tabElement}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<script lang="ts">
|
||||
import ArrowLeft from "$lib/icons/ArrowLeft.svelte";
|
||||
import ArrowRight from "$lib/icons/ArrowRight.svelte";
|
||||
import OpenTabs from "$lib/icons/OpenTabs.svelte";
|
||||
import Reload from "$lib/icons/Reload.svelte";
|
||||
import SidebarLeft from "$lib/icons/SidebarLeft.svelte";
|
||||
import SidebarRight from "$lib/icons/SidebarRight.svelte";
|
||||
|
|
@ -16,27 +17,41 @@
|
|||
|
||||
let currentInput = "";
|
||||
let input = "";
|
||||
let tabsOpen = 0;
|
||||
|
||||
state.subscribe((val) => {
|
||||
input = val.top_bar_input;
|
||||
currentInput = decodeURIComponent(input);
|
||||
tabsOpen = val.tabs.length;
|
||||
});
|
||||
|
||||
let iEl: HTMLInputElement;
|
||||
</script>
|
||||
|
||||
<div class="top-bar">
|
||||
<Block className="flex">
|
||||
<Button onClick={() => (sidebarOpen = !sidebarOpen)}>
|
||||
<Block className="top-bar-buttons">
|
||||
<Button
|
||||
className="hide-sidebar-button"
|
||||
onClick={() => (sidebarOpen = !sidebarOpen)}
|
||||
>
|
||||
{#if sidebarOpen}
|
||||
<SidebarLeft />
|
||||
{:else}
|
||||
<SidebarRight />
|
||||
{/if}
|
||||
</Button>
|
||||
<Button onClick={onBack}><ArrowLeft /></Button>
|
||||
<Button onClick={onForward}><ArrowRight /></Button>
|
||||
<Button onClick={() => updateAndLoadInput(input)}><Reload /></Button>
|
||||
<Button className="back-button" onClick={onBack}><ArrowLeft /></Button>
|
||||
<Button className="forward-button" onClick={onForward}>
|
||||
<ArrowRight />
|
||||
</Button>
|
||||
<Button
|
||||
className="reload-button"
|
||||
onClick={() => updateAndLoadInput(input)}
|
||||
>
|
||||
<Reload />
|
||||
</Button>
|
||||
|
||||
<Button className="open-tabs-page-button"><OpenTabs /></Button>
|
||||
</Block>
|
||||
|
||||
<input
|
||||
|
|
|
|||
23
src/lib/icons/OpenTabs.svelte
Normal file
23
src/lib/icons/OpenTabs.svelte
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1.3em"
|
||||
height="1.3em"
|
||||
viewBox="0 0 24 24"
|
||||
{...$$props}
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1"
|
||||
color="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M2.5 12c0-4.478 0-6.718 1.391-8.109S7.521 2.5 12 2.5c4.478 0 6.718 0 8.109 1.391S21.5 7.521 21.5 12c0 4.478 0 6.718-1.391 8.109S16.479 21.5 12 21.5c-4.478 0-6.718 0-8.109-1.391S2.5 16.479 2.5 12m4.496 0h10.008"
|
||||
/>
|
||||
<path
|
||||
d="M17.004 9H9c-.987 0-1.857.01-1.98-.324c-.096-.26.504-1.08.984-1.68M7.01 15h8.004c.986 0 1.857-.01 1.98.324c.096.26-.504 1.08-.984 1.68"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 747 B |
|
|
@ -1,63 +0,0 @@
|
|||
.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;
|
||||
}
|
||||
|
|
@ -1,25 +1,26 @@
|
|||
let bgColors = {};
|
||||
let textColors = {};
|
||||
|
||||
for (let i = 0; i <= 100; i += 5) {
|
||||
bgColors[`vigi-${i}`] =
|
||||
`color-mix(in var(--colorspace), var(--max-bg) ${i}%, var(--min-bg))`;
|
||||
|
||||
textColors[`vigi-${i}`] =
|
||||
`color-mix(in var(--colorspace), var(--min-text) ${i}%, var(--max-text))`;
|
||||
}
|
||||
const plugin = require("tailwindcss/plugin");
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ["./src/**/*.{html,js,svelte,ts}"],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: bgColors,
|
||||
textColor: textColors,
|
||||
animation: {
|
||||
pulse: "pulse 0.7s linear infinite",
|
||||
"load-pulse": "pulse 0.7s linear infinite",
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
plugins: [
|
||||
plugin(({ addUtilities }) => {
|
||||
let utilities = {};
|
||||
for (let i = 0; i <= 100; i += 5) {
|
||||
utilities[`.color-vigi-${i}`] = {
|
||||
color: `color-mix(in var(--colorspace), var(--max-text) ${i}%, var(--min-text))`,
|
||||
"background-color": `color-mix(in var(--colorspace), var(--max-bg) ${i}%, var(--min-bg))`,
|
||||
};
|
||||
}
|
||||
|
||||
addUtilities(utilities);
|
||||
}),
|
||||
],
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue