From 2b55851a621cd71daab47213368286e6d98de6c8 Mon Sep 17 00:00:00 2001 From: tkachuk Date: Sun, 4 Feb 2024 17:28:38 +0200 Subject: [PATCH] minor fixes --- src/lib/components/Config/code.svelte | 80 +++++++++++++------------- src/lib/components/Config/index.svelte | 1 - src/lib/utils/config.ts | 6 +- src/scss/root.scss | 1 - 4 files changed, 43 insertions(+), 45 deletions(-) diff --git a/src/lib/components/Config/code.svelte b/src/lib/components/Config/code.svelte index 866d438..23e74ec 100644 --- a/src/lib/components/Config/code.svelte +++ b/src/lib/components/Config/code.svelte @@ -19,86 +19,86 @@ `.shape {\n` + ` background-color: ${$cssData.shapeBg};\n` + `}\n .shape .shape-default {\n` + - ` box-shadow: ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadow},\n` + - `${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadowInset};\n` + + ` box-shadow: ${$cssData.offsetX} ${$cssData.offsetY} ${$cssData.shadowWidth} ${$cssData.boxShadowDark},\n` + + `${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadowLight};\n` + `}\n .shape .shape-active {\n` + - ` box-shadow: inset ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadow},\n` + - ` inset ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadowInset};\n` + + ` box-shadow: inset ${$cssData.offsetX} ${$cssData.offsetY} ${$cssData.shadowWidth} ${$cssData.boxShadowInsetDark},\n` + + ` inset ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadowInsetLight};\n` + `}\n .shape .shape-focused {\n` + ` background: linear-gradient(${$cssData.angle}, ${$cssData.gradientFocusedFrom}, ${$cssData.gradientFocusedTo});\n` + - ` box-shadow: ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadow},\n` + - ` ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadowInset};\n` + + ` box-shadow: ${$cssData.offsetX} ${$cssData.offsetY} ${$cssData.shadowWidth} ${$cssData.boxShadowDark},\n` + + ` ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadowLight};\n` + `}\n .shape .shape-disabled {\n` + ` background: linear-gradient(${$cssData.angle}, ${$cssData.gradientFocusedTo}, ${$cssData.gradientFocusedFrom});\n` + - ` box-shadow: ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadow},\n` + - ` ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadowInset};\n` + + ` box-shadow: ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadowDark},\n` + + ` ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadowLight};\n` + `}\n .text {\n` + - ` text-shadow: ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.textShadowWidth} ${$cssData.boxShadow},\n` + - ` ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.textShadowWidth} ${$cssData.boxShadowInset};\n` + + ` text-shadow: ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.textShadowWidth} ${$cssData.boxShadowDark},\n` + + ` ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.textShadowWidth} ${$cssData.boxShadowLight};\n` + `}\n`, sass: `.shape \n` + ` background-color: ${$cssData.shapeBg}\n` + ` &-default \n` + - ` box-shadow: ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadow},\n` + - `${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadowInset}\n` + + ` box-shadow: ${$cssData.offsetX} ${$cssData.offsetY} ${$cssData.shadowWidth} ${$cssData.boxShadowDark},\n` + + `${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadowLight}\n` + ` &-active \n` + - ` box-shadow: inset ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadow},\n` + - ` inset ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadowInset}\n` + + ` box-shadow: inset ${$cssData.offsetX} ${$cssData.offsetY} ${$cssData.shadowWidth} ${$cssData.boxShadowInsetDark},\n` + + ` inset ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadowInsetLight}\n` + ` &-focused \n` + ` background: linear-gradient(${$cssData.angle}, ${$cssData.gradientFocusedFrom}, ${$cssData.gradientFocusedTo})\n` + - ` box-shadow: ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadow},\n` + - ` ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadowInset}\n` + + ` box-shadow: $${$cssData.offsetX} ${$cssData.offsetY} ${$cssData.shadowWidth} ${$cssData.boxShadowDark},\n` + + ` ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadowLight}\n` + ` &-disabled \n` + ` background: linear-gradient(${$cssData.angle}, ${$cssData.gradientFocusedTo}, ${$cssData.gradientFocusedFrom})\n` + - ` box-shadow: ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadow},\n` + - ` ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadowInset}\n` + + ` box-shadow: ${$cssData.offsetX} ${$cssData.offsetY} ${$cssData.shadowWidth} ${$cssData.boxShadowDark},\n` + + ` ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadowLight}\n` + `.text \n` + - ` text-shadow: ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.textShadowWidth} ${$cssData.boxShadow},\n` + - ` ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.textShadowWidth} ${$cssData.boxShadowInset}\n`, + ` text-shadow: ${$cssData.offsetX} ${$cssData.offsetY} ${$cssData.textShadowWidth} ${$cssData.boxShadowDark},\n` + + ` ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.textShadowWidth} ${$cssData.boxShadowLight}\n`, scss: `.shape {\n` + ` background-color: ${$cssData.shapeBg};\n` + ` &-default {\n` + - ` box-shadow: ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadow},\n` + - `${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadowInset};\n` + + ` box-shadow: ${$cssData.offsetX} ${$cssData.offsetY} ${$cssData.shadowWidth} ${$cssData.boxShadowDark},\n` + + `${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadowLight};\n` + ` &-active {\n` + - ` box-shadow: inset ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadow},\n` + - ` inset ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadowInset};\n` + + ` box-shadow: inset ${$cssData.offsetX} ${$cssData.offsetY} ${$cssData.shadowWidth} ${$cssData.boxShadowInsetDark},\n` + + ` inset ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadowInsetLight};\n` + ` &-focused {\n` + ` background: linear-gradient(${$cssData.angle}, ${$cssData.gradientFocusedFrom}, ${$cssData.gradientFocusedTo});\n` + - ` box-shadow: ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadow},\n` + - ` ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadowInset};\n` + + ` box-shadow: ${$cssData.offsetX} ${$cssData.offsetY} ${$cssData.shadowWidth} ${$cssData.boxShadowDark},\n` + + ` ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadowLight};\n` + ` &-disabled {\n` + ` background: linear-gradient(${$cssData.angle}, ${$cssData.gradientFocusedTo}, ${$cssData.gradientFocusedFrom});\n` + - ` box-shadow: ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadow},\n` + - ` ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadowInset};\n` + + ` box-shadow: ${$cssData.offsetX} ${$cssData.offsetY} ${$cssData.shadowWidth} ${$cssData.boxShadowDark},\n` + + ` ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadowLight};\n` + ` }\n` + `}\n .text {\n` + - ` text-shadow: ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.textShadowWidth} ${$cssData.boxShadow},\n` + - ` ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.textShadowWidth} ${$cssData.boxShadowInset};\n` + + ` text-shadow: ${$cssData.offsetX} ${$cssData.offsetY} ${$cssData.textShadowWidth} ${$cssData.boxShadowDark},\n` + + ` ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.textShadowWidth} ${$cssData.boxShadowLight};\n` + `}\n`, less: `.shape {\n` + ` background-color: ${$cssData.shapeBg};\n` + ` &-default {\n` + - ` box-shadow: ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadow},\n` + - `${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadowInset};\n` + + ` box-shadow: ${$cssData.offsetX} ${$cssData.offsetY} ${$cssData.shadowWidth} ${$cssData.boxShadowDark},\n` + + `${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadowLight};\n` + ` &-active {\n` + - ` box-shadow: inset ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadow},\n` + - ` inset ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadowInset};\n` + + ` box-shadow: inset ${$cssData.offsetX} ${$cssData.offsetY} ${$cssData.shadowWidth} ${$cssData.boxShadowInsetDark},\n` + + ` inset ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadowInsetLight};\n` + ` &-focused {\n` + ` background: linear-gradient(${$cssData.angle}, ${$cssData.gradientFocusedFrom}, ${$cssData.gradientFocusedTo});\n` + - ` box-shadow: ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadow},\n` + - ` ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadowInset};\n` + + ` box-shadow: ${$cssData.offsetX} ${$cssData.offsetY} ${$cssData.shadowWidth} ${$cssData.boxShadowDark},\n` + + ` ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadowLight};\n` + ` &-disabled {\n` + ` background: linear-gradient(${$cssData.angle}, ${$cssData.gradientFocusedTo}, ${$cssData.gradientFocusedFrom});\n` + - ` box-shadow: ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadow},\n` + - ` ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadowInset};\n` + + ` box-shadow: ${$cssData.offsetX} ${$cssData.offsetY} ${$cssData.shadowWidth} ${$cssData.boxShadowDark},\n` + + ` ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.shadowWidth} ${$cssData.boxShadowLight};\n` + ` }\n` + `}\n .text {\n` + - ` text-shadow: ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.textShadowWidth} ${$cssData.boxShadow},\n` + - ` ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.textShadowWidth} ${$cssData.boxShadowInset};\n` + + ` text-shadow: ${$cssData.offsetX} ${$cssData.offsetY} ${$cssData.textShadowWidth} ${$cssData.boxShadowDark},\n` + + ` ${$cssData.offsetY} ${$cssData.offsetX} ${$cssData.textShadowWidth} ${$cssData.boxShadowLight};\n` + `}\n` }; diff --git a/src/lib/components/Config/index.svelte b/src/lib/components/Config/index.svelte index 10c168c..360dde4 100644 --- a/src/lib/components/Config/index.svelte +++ b/src/lib/components/Config/index.svelte @@ -599,7 +599,6 @@ justify-content: flex-start; margin-bottom: rem(20); - // switch .switch { position: relative; display: inline-block; diff --git a/src/lib/utils/config.ts b/src/lib/utils/config.ts index 01f7b72..1a74c68 100644 --- a/src/lib/utils/config.ts +++ b/src/lib/utils/config.ts @@ -12,14 +12,14 @@ export const states = [ ]; export const defaults = { - lightColor: '#eceff1', + lightColor: '#cfd8dc', darkColor: '#546e7a', angle: 45, - offset: 8, + offset: 6, coeff: 0, width: 10, showIcons: true, - mode: true // true for light, false for dark + mode: true }; export const data = { diff --git a/src/scss/root.scss b/src/scss/root.scss index 26454cb..3497502 100644 --- a/src/scss/root.scss +++ b/src/scss/root.scss @@ -1,5 +1,4 @@ :root { - // colors --dark: #263238; --grey: #cfd8dc; --light: #eceff1;