mirror of
https://github.com/immich-app/immich.git
synced 2025-05-24 02:13:51 -04:00
6974d4068b
* feat(server): support providers without support for custom schemas * chore: unit tests * chore: test mobile override * chore: add details to the docs
83 lines
1.5 KiB
Svelte
83 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
export let title: string;
|
|
export let subtitle = '';
|
|
export let checked = false;
|
|
export let disabled = false;
|
|
</script>
|
|
|
|
<div class="flex justify-between place-items-center">
|
|
<div>
|
|
<h2 class="immich-form-label text-sm">
|
|
{title.toUpperCase()}
|
|
</h2>
|
|
|
|
<p class="text-sm dark:text-immich-dark-fg">{subtitle}</p>
|
|
</div>
|
|
|
|
<label class="relative inline-block w-[36px] h-[10px]" {disabled}>
|
|
<input
|
|
class="opacity-0 w-0 h-0 disabled::cursor-not-allowed"
|
|
type="checkbox"
|
|
bind:checked
|
|
on:click
|
|
{disabled}
|
|
/>
|
|
|
|
{#if disabled}
|
|
<span class="slider-disable" />
|
|
{:else}
|
|
<span class="slider" />
|
|
{/if}
|
|
</label>
|
|
</div>
|
|
|
|
<style>
|
|
.slider,
|
|
.slider-disable {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: #ccc;
|
|
-webkit-transition: 0.4s;
|
|
transition: 0.4s;
|
|
border-radius: 34px;
|
|
}
|
|
|
|
input:disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.slider:before,
|
|
.slider-disable:before {
|
|
position: absolute;
|
|
content: '';
|
|
height: 20px;
|
|
width: 20px;
|
|
left: 0px;
|
|
right: 0px;
|
|
bottom: -4px;
|
|
background-color: gray;
|
|
-webkit-transition: 0.4s;
|
|
transition: 0.4s;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
input:checked + .slider-disable {
|
|
background-color: gray;
|
|
}
|
|
|
|
input:checked + .slider {
|
|
background-color: #adcbfa;
|
|
}
|
|
|
|
input:checked + .slider:before {
|
|
-webkit-transform: translateX(18px);
|
|
-ms-transform: translateX(18px);
|
|
transform: translateX(18px);
|
|
background-color: #4250af;
|
|
}
|
|
</style>
|