fix: theme system, adapt to small screens

This commit is contained in:
Artemy Egorov 2024-07-31 18:58:02 +03:00
parent 1488604772
commit 20f5234572
7 changed files with 109 additions and 191 deletions

View file

@ -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;
}

View file

@ -1,7 +1,8 @@
<script>
export let onClick = () => {};
export let className = "";
</script>
<button class="button" on:click={onClick}>
<button class={`button${className ? " " + className : ""}`} on:click={onClick}>
<slot />
</button>

View file

@ -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}

View file

@ -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

View 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

View file

@ -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;
}

View file

@ -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);
}),
],
};