108 lines
3.2 KiB
Plaintext
108 lines
3.2 KiB
Plaintext
---
|
|
import {getConfig} from "../../utils/config-utils";
|
|
import {i18n} from "../../i18n/translation";
|
|
import I18nKey from "../../i18n/i18nKey";
|
|
const hueSet: number[] = [0, 30, 60, 180, 250, 270, 300, 330, 345];
|
|
|
|
const enableBanner = getConfig().banner.enable;
|
|
|
|
---
|
|
<div id="display-setting" class:list={["card-base closed absolute transition-all w-[320px] fixed right-4 border-[var(--primary)] px-4 py-4",
|
|
{"border-[3px]": !enableBanner}
|
|
]}>
|
|
<div class="flex flex-row gap-2 mb-3 items-center justify-between">
|
|
<div class="font-bold text-lg text-neutral-900 dark:text-neutral-100 transition relative ml-3
|
|
before:w-1 before:h-4 before:rounded-md before:bg-[var(--primary)]
|
|
before:absolute before:left-[-12px] before:top-[5.5px]"
|
|
>
|
|
{i18n(I18nKey.primaryColor)}
|
|
</div>
|
|
<div id="hueValue" class="transition bg-[var(--btn-regular-bg)] w-10 h-7 rounded-md flex justify-center font-bold transition text-sm items-center text-[var(--btn-content)]">
|
|
{0}
|
|
</div>
|
|
</div>
|
|
<div id="preset-list" class="flex flex-row gap-1 mb-4 hidden">
|
|
{hueSet.map((hue) => <div
|
|
class="h-7 w-8 rounded-md cursor-pointer
|
|
bg-[oklch(0.75_0.14_var(--hue))]
|
|
hover:bg-[oklch(0.70_0.12_var(--hue))]
|
|
active:bg-[oklch(0.65_0.11_var(--hue))]
|
|
"
|
|
style=`--hue: ${hue}` data-hue={hue}
|
|
>
|
|
|
|
</div>)}
|
|
</div>
|
|
<div class="w-full h-6 px-1 bg-[oklch(0.80_0.10_0)] dark:bg-[oklch(0.70_0.10_0)] rounded select-none">
|
|
<input type="range" min="0" max="360" value="0" class="slider" id="colorSlider" step="5" style="width: 100%;">
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<style lang="stylus" is:global>
|
|
#display-setting
|
|
input[type="range"]
|
|
-webkit-appearance: none;
|
|
height: 24px;
|
|
background-image: var(--color-selection-bar)
|
|
transition: background-image 0.15s ease-in-out
|
|
|
|
/* Input Thumb */
|
|
::-webkit-slider-thumb
|
|
-webkit-appearance: none;
|
|
height: 16px;
|
|
width: 8px;
|
|
border-radius: 2px;
|
|
background: rgba(255, 255, 255, 0.7);
|
|
box-shadow: none;
|
|
&:hover
|
|
background: rgba(255, 255, 255, 0.8);
|
|
&:active
|
|
background: rgba(255, 255, 255, 0.6);
|
|
|
|
::-moz-range-thumb
|
|
-webkit-appearance: none;
|
|
height: 16px;
|
|
width: 8px;
|
|
border-radius: 2px;
|
|
border-width: 0
|
|
background: rgba(255, 255, 255, 0.7);
|
|
box-shadow: none;
|
|
&:hover
|
|
background: rgba(255, 255, 255, 0.8);
|
|
&:active
|
|
background: rgba(255, 255, 255, 0.6);
|
|
|
|
&::-ms-thumb
|
|
-webkit-appearance: none;
|
|
height: 16px;
|
|
width: 8px;
|
|
border-radius: 2px;
|
|
background: rgba(255, 255, 255, 0.7);
|
|
box-shadow: none;
|
|
&:hover
|
|
background: rgba(255, 255, 255, 0.8);
|
|
&:active
|
|
background: rgba(255, 255, 255, 0.6);
|
|
|
|
|
|
.banner-closed
|
|
#display-setting
|
|
border-width: 3px
|
|
</style>
|
|
|
|
<style>
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer components {
|
|
#display-setting {
|
|
@apply top-[84px]
|
|
}
|
|
#display-setting.closed {
|
|
@apply top-[76px] opacity-0 pointer-events-none
|
|
}
|
|
}
|
|
</style> |