mirror of
https://github.com/sky-systems/sky_phone.git
synced 2026-08-29 01:08:59 +00:00
Eichenholz
928 lines
24 KiB
Vue
928 lines
24 KiB
Vue
<script setup lang="ts">
|
|
import { kGlass, kRange } from 'konsta/vue'
|
|
import {
|
|
BellOff,
|
|
Bluetooth,
|
|
Calculator,
|
|
Camera,
|
|
Flashlight,
|
|
LockKeyhole,
|
|
Moon,
|
|
Plane,
|
|
Play,
|
|
RotateCw,
|
|
Signal,
|
|
SkipBack,
|
|
SkipForward,
|
|
Sun,
|
|
TimerReset,
|
|
Volume2,
|
|
Wifi,
|
|
} from 'lucide-vue-next'
|
|
import {
|
|
computed,
|
|
nextTick,
|
|
onBeforeUnmount,
|
|
ref,
|
|
watch,
|
|
type CSSProperties,
|
|
} from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
|
|
import { usePhoneStore } from '@/stores/phone'
|
|
import { nuiCall } from '@/utils/nui'
|
|
|
|
const props = defineProps<{ opened: boolean }>()
|
|
const emit = defineEmits<{ close: [] }>()
|
|
|
|
type ConnectivityPreference =
|
|
| 'airplaneMode'
|
|
| 'bluetoothEnabled'
|
|
| 'cellularEnabled'
|
|
| 'focusMode'
|
|
| 'rotationLocked'
|
|
| 'wifiEnabled'
|
|
|
|
const phone = usePhoneStore()
|
|
const router = useRouter()
|
|
const panel = ref<HTMLElement | null>(null)
|
|
const brightness = ref(phone.preferences.settings.screenBrightness)
|
|
const volume = ref(
|
|
Math.round(
|
|
(phone.preferences.settings.notificationVolume +
|
|
phone.preferences.settings.ringtoneVolume) /
|
|
2,
|
|
),
|
|
)
|
|
const flashlightActive = ref(false)
|
|
const flashlightPending = ref(false)
|
|
const previousAlertVolume = ref(volume.value || 75)
|
|
|
|
const inactiveGlassColors = {
|
|
bgIos: 'bg-[rgba(72,72,74,0.58)]',
|
|
shadowIos: 'shadow-ios-dark-glass',
|
|
}
|
|
const rotationColors = computed(() =>
|
|
phone.preferences.settings.rotationLocked
|
|
? {
|
|
bgIos: 'bg-white',
|
|
shadowIos: 'shadow-ios-light-glass',
|
|
}
|
|
: inactiveGlassColors,
|
|
)
|
|
const focusColors = computed(() =>
|
|
phone.preferences.settings.focusMode
|
|
? {
|
|
bgIos: 'bg-[#5e5ce6]',
|
|
shadowIos: 'shadow-ios-dark-glass',
|
|
}
|
|
: inactiveGlassColors,
|
|
)
|
|
const alertsMuted = computed(() => volume.value === 0)
|
|
const alertMuteColors = computed(() =>
|
|
alertsMuted.value
|
|
? {
|
|
bgIos: 'bg-white',
|
|
shadowIos: 'shadow-ios-light-glass',
|
|
}
|
|
: inactiveGlassColors,
|
|
)
|
|
const flashlightColors = computed(() =>
|
|
flashlightActive.value
|
|
? {
|
|
bgIos: 'bg-white',
|
|
shadowIos: 'shadow-ios-light-glass',
|
|
}
|
|
: inactiveGlassColors,
|
|
)
|
|
const brightnessStyle = computed<CSSProperties>(() => ({
|
|
'--control-level': `${brightness.value}%`,
|
|
}))
|
|
const volumeStyle = computed<CSSProperties>(() => ({
|
|
'--control-level': `${volume.value}%`,
|
|
}))
|
|
|
|
function togglePreference(key: ConnectivityPreference): void {
|
|
phone.setPreference(key, !phone.preferences.settings[key])
|
|
}
|
|
|
|
function updateBrightness(event: Event): void {
|
|
const nextValue = Number.parseInt(
|
|
(event.target as HTMLInputElement).value,
|
|
10,
|
|
)
|
|
brightness.value = nextValue
|
|
phone.preferences.settings.screenBrightness = nextValue
|
|
}
|
|
|
|
function saveBrightness(event: Event): void {
|
|
phone.setPreference(
|
|
'screenBrightness',
|
|
Number.parseInt((event.target as HTMLInputElement).value, 10),
|
|
)
|
|
}
|
|
|
|
function updateVolume(event: Event): void {
|
|
volume.value = Number.parseInt((event.target as HTMLInputElement).value, 10)
|
|
}
|
|
|
|
function saveVolume(event: Event): void {
|
|
const nextValue = Number.parseInt(
|
|
(event.target as HTMLInputElement).value,
|
|
10,
|
|
)
|
|
if (nextValue > 0) previousAlertVolume.value = nextValue
|
|
phone.setAlertVolumes(nextValue)
|
|
}
|
|
|
|
function toggleAlertMute(): void {
|
|
if (alertsMuted.value) {
|
|
volume.value = previousAlertVolume.value
|
|
} else {
|
|
previousAlertVolume.value = volume.value
|
|
volume.value = 0
|
|
}
|
|
phone.setAlertVolumes(volume.value)
|
|
}
|
|
|
|
function pointerRangeValue(
|
|
event: PointerEvent,
|
|
minimum: number,
|
|
maximum: number,
|
|
): number {
|
|
const rect = (event.currentTarget as HTMLElement).getBoundingClientRect()
|
|
const ratio =
|
|
1 - Math.min(1, Math.max(0, (event.clientY - rect.top) / rect.height))
|
|
return Math.round(minimum + ratio * (maximum - minimum))
|
|
}
|
|
|
|
function startBrightnessDrag(event: PointerEvent): void {
|
|
;(event.currentTarget as HTMLElement).setPointerCapture(event.pointerId)
|
|
const nextValue = pointerRangeValue(event, 10, 100)
|
|
brightness.value = nextValue
|
|
phone.preferences.settings.screenBrightness = nextValue
|
|
}
|
|
|
|
function dragBrightness(event: PointerEvent): void {
|
|
if (!(event.currentTarget as HTMLElement).hasPointerCapture(event.pointerId))
|
|
return
|
|
const nextValue = pointerRangeValue(event, 10, 100)
|
|
brightness.value = nextValue
|
|
phone.preferences.settings.screenBrightness = nextValue
|
|
}
|
|
|
|
function finishBrightnessDrag(event: PointerEvent): void {
|
|
const target = event.currentTarget as HTMLElement
|
|
if (!target.hasPointerCapture(event.pointerId)) return
|
|
const nextValue = pointerRangeValue(event, 10, 100)
|
|
brightness.value = nextValue
|
|
phone.setPreference('screenBrightness', nextValue)
|
|
target.releasePointerCapture(event.pointerId)
|
|
}
|
|
|
|
function startVolumeDrag(event: PointerEvent): void {
|
|
;(event.currentTarget as HTMLElement).setPointerCapture(event.pointerId)
|
|
volume.value = pointerRangeValue(event, 0, 100)
|
|
}
|
|
|
|
function dragVolume(event: PointerEvent): void {
|
|
if (!(event.currentTarget as HTMLElement).hasPointerCapture(event.pointerId))
|
|
return
|
|
volume.value = pointerRangeValue(event, 0, 100)
|
|
}
|
|
|
|
function finishVolumeDrag(event: PointerEvent): void {
|
|
const target = event.currentTarget as HTMLElement
|
|
if (!target.hasPointerCapture(event.pointerId)) return
|
|
volume.value = pointerRangeValue(event, 0, 100)
|
|
if (volume.value > 0) previousAlertVolume.value = volume.value
|
|
phone.setAlertVolumes(volume.value)
|
|
target.releasePointerCapture(event.pointerId)
|
|
}
|
|
|
|
async function toggleFlashlight(): Promise<void> {
|
|
if (flashlightPending.value) return
|
|
const enabled = !flashlightActive.value
|
|
flashlightActive.value = enabled
|
|
flashlightPending.value = true
|
|
const response = await nuiCall('camera:setFlash', { enabled })
|
|
if (!response.success) flashlightActive.value = !enabled
|
|
flashlightPending.value = false
|
|
}
|
|
|
|
function openApp(path: string): void {
|
|
emit('close')
|
|
void router.push(path)
|
|
}
|
|
|
|
function openTimer(): void {
|
|
emit('close')
|
|
void router.push({ path: '/apps/clock', query: { section: 'timer' } })
|
|
}
|
|
|
|
watch(
|
|
() => props.opened,
|
|
(opened) => {
|
|
if (!opened) return
|
|
brightness.value = phone.preferences.settings.screenBrightness
|
|
volume.value = Math.round(
|
|
(phone.preferences.settings.notificationVolume +
|
|
phone.preferences.settings.ringtoneVolume) /
|
|
2,
|
|
)
|
|
if (volume.value > 0) previousAlertVolume.value = volume.value
|
|
void nextTick(() => panel.value?.focus({ preventScroll: true }))
|
|
},
|
|
)
|
|
|
|
onBeforeUnmount(() => {
|
|
if (flashlightActive.value)
|
|
void nuiCall('camera:setFlash', { enabled: false })
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<Transition name="control-center">
|
|
<section
|
|
v-if="opened"
|
|
class="control-center"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
:aria-label="phone.t('ControlCenter.label')"
|
|
>
|
|
<button
|
|
class="control-center__backdrop"
|
|
type="button"
|
|
tabindex="-1"
|
|
:aria-label="phone.t('ControlCenter.close')"
|
|
@click="emit('close')"
|
|
></button>
|
|
|
|
<div ref="panel" class="control-center__panel" tabindex="-1">
|
|
<div class="control-center__top-grid">
|
|
<k-glass
|
|
class="control-center__connectivity"
|
|
:colors="inactiveGlassColors"
|
|
:highlight="false"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="control-center__connectivity-button"
|
|
:class="{
|
|
'control-center__connectivity-button--airplane':
|
|
phone.preferences.settings.airplaneMode,
|
|
}"
|
|
:aria-label="phone.t('ControlCenter.airplaneMode')"
|
|
:aria-pressed="phone.preferences.settings.airplaneMode"
|
|
@click="togglePreference('airplaneMode')"
|
|
>
|
|
<Plane aria-hidden="true" />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="control-center__connectivity-button"
|
|
:class="{
|
|
'control-center__connectivity-button--cellular':
|
|
phone.preferences.settings.cellularEnabled,
|
|
}"
|
|
:aria-label="phone.t('ControlCenter.cellular')"
|
|
:aria-pressed="phone.preferences.settings.cellularEnabled"
|
|
@click="togglePreference('cellularEnabled')"
|
|
>
|
|
<Signal aria-hidden="true" />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="control-center__connectivity-button"
|
|
:class="{
|
|
'control-center__connectivity-button--wifi':
|
|
phone.preferences.settings.wifiEnabled,
|
|
}"
|
|
:aria-label="phone.t('ControlCenter.wifi')"
|
|
:aria-pressed="phone.preferences.settings.wifiEnabled"
|
|
@click="togglePreference('wifiEnabled')"
|
|
>
|
|
<Wifi aria-hidden="true" />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="control-center__connectivity-button"
|
|
:class="{
|
|
'control-center__connectivity-button--bluetooth':
|
|
phone.preferences.settings.bluetoothEnabled,
|
|
}"
|
|
:aria-label="phone.t('ControlCenter.bluetooth')"
|
|
:aria-pressed="phone.preferences.settings.bluetoothEnabled"
|
|
@click="togglePreference('bluetoothEnabled')"
|
|
>
|
|
<Bluetooth aria-hidden="true" />
|
|
</button>
|
|
</k-glass>
|
|
|
|
<k-glass
|
|
class="control-center__media"
|
|
:colors="inactiveGlassColors"
|
|
:highlight="false"
|
|
>
|
|
<div class="control-center__media-copy">
|
|
<span>{{ phone.t('ControlCenter.media') }}</span>
|
|
<strong>{{ phone.t('ControlCenter.notPlaying') }}</strong>
|
|
</div>
|
|
<div class="control-center__media-controls">
|
|
<button
|
|
type="button"
|
|
disabled
|
|
:aria-label="phone.t('ControlCenter.previous')"
|
|
>
|
|
<SkipBack aria-hidden="true" />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
disabled
|
|
:aria-label="phone.t('ControlCenter.play')"
|
|
>
|
|
<Play aria-hidden="true" />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
disabled
|
|
:aria-label="phone.t('ControlCenter.next')"
|
|
>
|
|
<SkipForward aria-hidden="true" />
|
|
</button>
|
|
</div>
|
|
</k-glass>
|
|
</div>
|
|
|
|
<div class="control-center__middle-grid">
|
|
<div class="control-center__round-control">
|
|
<k-glass
|
|
component="button"
|
|
type="button"
|
|
class="control-center__round-button"
|
|
:class="{
|
|
'control-center__round-button--light':
|
|
phone.preferences.settings.rotationLocked,
|
|
}"
|
|
:colors="rotationColors"
|
|
:aria-label="phone.t('ControlCenter.rotationLock')"
|
|
:aria-pressed="phone.preferences.settings.rotationLocked"
|
|
@click="togglePreference('rotationLocked')"
|
|
>
|
|
<RotateCw aria-hidden="true" />
|
|
<LockKeyhole
|
|
class="control-center__rotation-lock"
|
|
aria-hidden="true"
|
|
/>
|
|
</k-glass>
|
|
</div>
|
|
|
|
<div class="control-center__round-control">
|
|
<k-glass
|
|
component="button"
|
|
type="button"
|
|
class="control-center__round-button"
|
|
:class="{
|
|
'control-center__round-button--light': alertsMuted,
|
|
}"
|
|
:colors="alertMuteColors"
|
|
:aria-label="
|
|
phone.t(
|
|
alertsMuted
|
|
? 'ControlCenter.unmuteRingtone'
|
|
: 'ControlCenter.muteRingtone',
|
|
)
|
|
"
|
|
:aria-pressed="alertsMuted"
|
|
@click="toggleAlertMute"
|
|
>
|
|
<BellOff aria-hidden="true" />
|
|
</k-glass>
|
|
</div>
|
|
|
|
<k-glass
|
|
class="control-center__slider"
|
|
:colors="inactiveGlassColors"
|
|
:highlight="false"
|
|
:style="brightnessStyle"
|
|
@pointerdown="startBrightnessDrag"
|
|
@pointermove="dragBrightness"
|
|
@pointerup="finishBrightnessDrag"
|
|
@pointercancel="finishBrightnessDrag"
|
|
>
|
|
<span
|
|
class="control-center__slider-level"
|
|
aria-hidden="true"
|
|
></span>
|
|
<k-range
|
|
class="control-center__range"
|
|
:value="brightness"
|
|
:min="10"
|
|
:max="100"
|
|
:aria-label="phone.t('ControlCenter.brightness')"
|
|
@input="updateBrightness"
|
|
@change="saveBrightness"
|
|
/>
|
|
<Sun
|
|
class="control-center__slider-icon"
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
/>
|
|
</k-glass>
|
|
|
|
<k-glass
|
|
class="control-center__slider"
|
|
:colors="inactiveGlassColors"
|
|
:highlight="false"
|
|
:style="volumeStyle"
|
|
@pointerdown="startVolumeDrag"
|
|
@pointermove="dragVolume"
|
|
@pointerup="finishVolumeDrag"
|
|
@pointercancel="finishVolumeDrag"
|
|
>
|
|
<span
|
|
class="control-center__slider-level"
|
|
aria-hidden="true"
|
|
></span>
|
|
<k-range
|
|
class="control-center__range"
|
|
:value="volume"
|
|
:min="0"
|
|
:max="100"
|
|
:aria-label="phone.t('ControlCenter.volume')"
|
|
@input="updateVolume"
|
|
@change="saveVolume"
|
|
/>
|
|
<Volume2
|
|
class="control-center__slider-icon"
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
/>
|
|
</k-glass>
|
|
|
|
<k-glass
|
|
component="button"
|
|
type="button"
|
|
class="control-center__focus-button"
|
|
:colors="focusColors"
|
|
:aria-label="phone.t('ControlCenter.focus')"
|
|
:aria-pressed="phone.preferences.settings.focusMode"
|
|
@click="togglePreference('focusMode')"
|
|
>
|
|
<Moon aria-hidden="true" />
|
|
<span>{{ phone.t('ControlCenter.focus') }}</span>
|
|
</k-glass>
|
|
</div>
|
|
|
|
<nav
|
|
class="control-center__quick-actions"
|
|
:aria-label="phone.t('ControlCenter.quickActions')"
|
|
>
|
|
<div class="control-center__quick-action">
|
|
<k-glass
|
|
component="button"
|
|
type="button"
|
|
class="control-center__quick-button"
|
|
:class="{
|
|
'control-center__quick-button--flashlight-active':
|
|
flashlightActive,
|
|
}"
|
|
:colors="flashlightColors"
|
|
:disabled="flashlightPending"
|
|
:aria-label="phone.t('ControlCenter.flashlight')"
|
|
:aria-pressed="flashlightActive"
|
|
@click="toggleFlashlight"
|
|
>
|
|
<Flashlight aria-hidden="true" />
|
|
</k-glass>
|
|
<span>{{ phone.t('ControlCenter.flashlight') }}</span>
|
|
</div>
|
|
<div class="control-center__quick-action">
|
|
<k-glass
|
|
component="button"
|
|
type="button"
|
|
class="control-center__quick-button"
|
|
:colors="inactiveGlassColors"
|
|
:aria-label="phone.t('ControlCenter.timer')"
|
|
@click="openTimer"
|
|
>
|
|
<TimerReset aria-hidden="true" />
|
|
</k-glass>
|
|
<span>{{ phone.t('ControlCenter.timer') }}</span>
|
|
</div>
|
|
<div class="control-center__quick-action">
|
|
<k-glass
|
|
component="button"
|
|
type="button"
|
|
class="control-center__quick-button"
|
|
:colors="inactiveGlassColors"
|
|
:aria-label="phone.t('ControlCenter.camera')"
|
|
@click="openApp('/apps/camera')"
|
|
>
|
|
<Camera aria-hidden="true" />
|
|
</k-glass>
|
|
<span>{{ phone.t('ControlCenter.camera') }}</span>
|
|
</div>
|
|
<div class="control-center__quick-action">
|
|
<k-glass
|
|
component="button"
|
|
type="button"
|
|
class="control-center__quick-button"
|
|
:colors="inactiveGlassColors"
|
|
:aria-label="phone.t('ControlCenter.calculator')"
|
|
@click="openApp('/apps/calculator')"
|
|
>
|
|
<Calculator aria-hidden="true" />
|
|
</k-glass>
|
|
<span>{{ phone.t('ControlCenter.calculator') }}</span>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</section>
|
|
</Transition>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.control-center {
|
|
position: absolute;
|
|
z-index: 95;
|
|
inset: 0;
|
|
overflow: hidden;
|
|
color: #fff;
|
|
isolation: isolate;
|
|
}
|
|
|
|
.control-center__backdrop {
|
|
position: absolute;
|
|
z-index: -1;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 0;
|
|
background: rgba(20, 20, 24, 0.34);
|
|
backdrop-filter: blur(25px) saturate(1.45);
|
|
-webkit-backdrop-filter: blur(25px) saturate(1.45);
|
|
}
|
|
|
|
.control-center__panel {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 62px 18px 30px;
|
|
outline: none;
|
|
pointer-events: none;
|
|
transform-origin: calc(100% - 38px) 18px;
|
|
}
|
|
|
|
.control-center__top-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 10px;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.control-center__connectivity,
|
|
.control-center__media {
|
|
min-width: 0;
|
|
height: 154px;
|
|
border-radius: 34px;
|
|
}
|
|
|
|
.control-center__connectivity {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
grid-template-rows: repeat(2, 1fr);
|
|
gap: 10px;
|
|
padding: 12px;
|
|
}
|
|
|
|
.control-center__connectivity-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 0;
|
|
border: 0;
|
|
border-radius: 50%;
|
|
color: #fff;
|
|
background: rgba(72, 72, 74, 0.64);
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.14),
|
|
0 2px 5px rgba(0, 0, 0, 0.28);
|
|
transition:
|
|
background 180ms ease,
|
|
box-shadow 180ms ease,
|
|
transform 160ms ease;
|
|
}
|
|
|
|
.control-center__connectivity-button--airplane {
|
|
background: #ff9f0a;
|
|
}
|
|
|
|
.control-center__connectivity-button--cellular {
|
|
background: #34c759;
|
|
}
|
|
|
|
.control-center__connectivity-button--wifi,
|
|
.control-center__connectivity-button--bluetooth {
|
|
background: #0a84ff;
|
|
}
|
|
|
|
.control-center__connectivity-button:active,
|
|
.control-center__round-button:active,
|
|
.control-center__quick-button:active {
|
|
transform: scale(0.92);
|
|
}
|
|
|
|
.control-center__connectivity-button svg {
|
|
width: 27px;
|
|
height: 27px;
|
|
stroke-width: 2.3;
|
|
}
|
|
|
|
.control-center__connectivity-button:first-child svg {
|
|
fill: currentcolor;
|
|
stroke-width: 1.5;
|
|
}
|
|
|
|
.control-center__media {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
padding: 21px 18px 17px;
|
|
}
|
|
|
|
.control-center__media-copy {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.control-center__media-copy span {
|
|
color: rgba(255, 255, 255, 0.66);
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.control-center__media-copy strong {
|
|
overflow: hidden;
|
|
font-size: 17px;
|
|
line-height: 1.2;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.control-center__media-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.control-center__media-controls button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 38px;
|
|
height: 38px;
|
|
padding: 0;
|
|
border: 0;
|
|
color: rgba(255, 255, 255, 0.88);
|
|
background: transparent;
|
|
}
|
|
|
|
.control-center__media-controls button:nth-child(2) svg {
|
|
width: 31px;
|
|
height: 31px;
|
|
fill: currentcolor;
|
|
}
|
|
|
|
.control-center__media-controls svg {
|
|
width: 25px;
|
|
height: 25px;
|
|
fill: currentcolor;
|
|
}
|
|
|
|
.control-center__middle-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
grid-template-rows: repeat(2, 73px);
|
|
gap: 10px;
|
|
min-height: 156px;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.control-center__round-control,
|
|
.control-center__quick-action {
|
|
display: flex;
|
|
min-width: 0;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 7px;
|
|
}
|
|
|
|
.control-center__round-control {
|
|
justify-content: center;
|
|
}
|
|
|
|
.control-center__round-control > span,
|
|
.control-center__quick-action > span {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
color: rgba(255, 255, 255, 0.82);
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
line-height: 1.15;
|
|
text-align: center;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.control-center__round-button {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 73px;
|
|
height: 73px;
|
|
border: 0;
|
|
border-radius: 50%;
|
|
color: #fff;
|
|
transition: transform 160ms ease;
|
|
}
|
|
|
|
.control-center__round-button--light {
|
|
color: #ff453a;
|
|
}
|
|
|
|
.control-center__focus-button {
|
|
display: flex;
|
|
grid-column: 1 / span 2;
|
|
grid-row: 2;
|
|
align-items: center;
|
|
gap: 13px;
|
|
min-width: 0;
|
|
height: 73px;
|
|
padding: 0 22px;
|
|
border: 0;
|
|
border-radius: 37px;
|
|
color: #fff;
|
|
font-size: 15px;
|
|
font-weight: 650;
|
|
transition: transform 160ms ease;
|
|
}
|
|
|
|
.control-center__focus-button:active {
|
|
transform: scale(0.96);
|
|
}
|
|
|
|
.control-center__focus-button svg {
|
|
width: 27px;
|
|
height: 27px;
|
|
fill: currentcolor;
|
|
}
|
|
|
|
.control-center__round-button svg,
|
|
.control-center__quick-button svg {
|
|
width: 27px;
|
|
height: 27px;
|
|
stroke-width: 2;
|
|
}
|
|
|
|
.control-center__round-button .control-center__rotation-lock {
|
|
position: absolute;
|
|
width: 13px;
|
|
height: 13px;
|
|
stroke-width: 2.5;
|
|
}
|
|
|
|
.control-center__slider {
|
|
position: relative;
|
|
grid-row: 1 / span 2;
|
|
height: 156px;
|
|
overflow: hidden;
|
|
border-radius: 38px;
|
|
cursor: pointer;
|
|
touch-action: none;
|
|
}
|
|
|
|
.control-center__slider-level {
|
|
position: absolute;
|
|
z-index: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
height: var(--control-level);
|
|
background: rgba(255, 255, 255, 0.96);
|
|
transition: height 80ms linear;
|
|
}
|
|
|
|
.control-center__range {
|
|
position: absolute;
|
|
z-index: 2;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 172px;
|
|
height: 58px !important;
|
|
transform: translate(-50%, -50%) rotate(-90deg);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.control-center__range :deep(span) {
|
|
opacity: 0;
|
|
}
|
|
|
|
.control-center__range :deep(input) {
|
|
height: 58px !important;
|
|
}
|
|
|
|
.control-center__range :deep(input::-webkit-slider-thumb) {
|
|
opacity: 0;
|
|
}
|
|
|
|
.control-center__range :deep(input::-moz-range-thumb) {
|
|
opacity: 0;
|
|
}
|
|
|
|
.control-center__slider-icon {
|
|
position: absolute;
|
|
z-index: 3;
|
|
bottom: 18px;
|
|
left: 50%;
|
|
width: 25px;
|
|
height: 25px;
|
|
color: #0a84ff;
|
|
transform: translateX(-50%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.control-center__quick-button.control-center__quick-button--flashlight-active {
|
|
color: #bf5af2 !important;
|
|
}
|
|
|
|
.control-center__slider:nth-child(3) .control-center__slider-icon {
|
|
color: #ffd60a;
|
|
}
|
|
|
|
.control-center__quick-actions {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 10px;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.control-center__quick-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 73px;
|
|
height: 73px;
|
|
border: 0;
|
|
border-radius: 50%;
|
|
color: #fff;
|
|
transition: transform 160ms ease;
|
|
}
|
|
|
|
.control-center__quick-button:disabled {
|
|
opacity: 0.72;
|
|
}
|
|
|
|
.control-center-enter-active,
|
|
.control-center-leave-active {
|
|
transition: opacity 280ms ease;
|
|
}
|
|
|
|
.control-center-enter-active .control-center__panel {
|
|
transition: transform 440ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
.control-center-leave-active .control-center__panel {
|
|
transition: transform 260ms cubic-bezier(0.7, 0, 0.84, 0);
|
|
}
|
|
|
|
.control-center-enter-from,
|
|
.control-center-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
.control-center-enter-from .control-center__panel,
|
|
.control-center-leave-to .control-center__panel {
|
|
transform: translate3d(28px, -22px, 0) scale(0.84);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.control-center-enter-active,
|
|
.control-center-leave-active,
|
|
.control-center-enter-active .control-center__panel,
|
|
.control-center-leave-active .control-center__panel,
|
|
.control-center__connectivity-button,
|
|
.control-center__round-button,
|
|
.control-center__focus-button,
|
|
.control-center__quick-button {
|
|
transition-duration: 1ms;
|
|
}
|
|
}
|
|
</style>
|