diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.vue | 2 | ||||
| -rw-r--r-- | src/components/HelpModal.vue | 2 | ||||
| -rw-r--r-- | src/store.ts | 25 |
3 files changed, 14 insertions, 15 deletions
diff --git a/src/App.vue b/src/App.vue index f7ae8c8..375882f 100644 --- a/src/App.vue +++ b/src/App.vue @@ -2,7 +2,7 @@ <div class="absolute left-0 top-0 w-screen h-screen overflow-hidden flex flex-col" :style="{backgroundColor: store.color.bg, scrollbarColor: store.color.altDark + ' ' + store.color.bgDark}"> <!-- Title bar --> - <div class="flex shadow gap-2 p-2" :style="{backgroundColor: store.color.bgDark2, color: store.color.alt}"> + <div class="flex gap-2 p-2" :style="{backgroundColor: store.color.bgDark2, color: store.color.alt}"> <h1 class="my-auto ml-2 text-4xl hover:cursor-pointer" @click="collapseTree" title="Reset tree">Tilo</h1> <div class="mx-auto"/> <!-- Spacer --> <!-- Icons --> diff --git a/src/components/HelpModal.vue b/src/components/HelpModal.vue index 747c687..7eb2ea2 100644 --- a/src/components/HelpModal.vue +++ b/src/components/HelpModal.vue @@ -5,7 +5,7 @@ w-[90%] max-w-[16cm] max-h-[80%] overflow-auto" :style="styles"> <close-icon @click.stop="onClose" ref="closeRef" class="absolute top-1 right-1 md:top-2 md:right-2 w-8 h-8 hover:cursor-pointer"/> - <h1 class="text-center text-xl font-bold pt-2 pb-1">Help</h1> + <h1 class="text-center text-xl sm:text-2xl font-bold pt-2 pb-1">Help</h1> <div class="flex flex-col gap-2 p-2"> <s-collapsible :class="scClasses"> <template #summary="slotProps"> diff --git a/src/store.ts b/src/store.ts index b882101..00892b7 100644 --- a/src/store.ts +++ b/src/store.ts @@ -2,7 +2,6 @@ * Defines a global store for UI settings, palette colors, etc */ - import {defineStore} from 'pinia'; import {Action} from './lib'; import {LayoutOptions} from './layout'; @@ -66,18 +65,18 @@ function getDefaultState(): StoreState { const scrollGap = getScrollBarWidth(); const tileSpacing = breakpoint == 'sm' ? 6 : 9; const color = { // Note: For scrollbar colors on chrome, edit ./index.css - text: '#fafaf9', - textAlt: '#1c1917', - bg: '#292524', - bgLight: '#44403c', - bgDark: '#1c1917', - bgLight2: '#57534e', - bgDark2: '#0e0c0b', - bgAlt: '#f5f5f4', - bgAltDark: '#d6d3d1', - alt: '#a3e623', - altDark: '#65a30d', - accent: '#f59e0b', + text: '#fafaf9', // stone-50 + textAlt: '#1c1917', // stone-900 + bg: '#292524', // stone-800 + bgLight: '#44403c', // stone-700 + bgDark: '#1c1917', // stone-900 + bgLight2: '#57534e', // stone-600 + bgDark2: '#0e0c0b', // darker version of stone-900 + bgAlt: '#f5f5f4', // stone-100 + bgAltDark: '#d6d3d1', // stone-300 + alt: '#a3e635', // lime-400 + altDark: '#65a30d', // lime-600 + accent: '#f59e0b', // amber-500 }; return { // Device related |