mirror of https://github.com/VueTubeApp/VueTube
cooler toggle
This commit is contained in:
parent
b17993281a
commit
7c8733f126
|
@ -20,7 +20,7 @@
|
||||||
<v-card
|
<v-card
|
||||||
flat
|
flat
|
||||||
class="d-flex flex-row mx-4 mb-4 pr-4 background"
|
class="d-flex flex-row mx-4 mb-4 pr-4 background"
|
||||||
style="overflow: hidden"
|
style="overflow: hidden; position: relative"
|
||||||
:class="
|
:class="
|
||||||
$store.state.tweaks.roundTweak > 0
|
$store.state.tweaks.roundTweak > 0
|
||||||
? $vuetify.theme.dark
|
? $vuetify.theme.dark
|
||||||
|
@ -38,21 +38,35 @@
|
||||||
$vuetube.haptics.hapticsImpactLight(1)
|
$vuetube.haptics.hapticsImpactLight(1)
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
|
<div
|
||||||
|
v-if="roundTweak > 0"
|
||||||
|
class="circle"
|
||||||
|
:class="watchTelemetry ? '' : 'moved'"
|
||||||
|
style="width: 11rem; height: 11rem"
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
v-if="roundTweak > 0"
|
||||||
|
class="circle"
|
||||||
|
:class="watchTelemetry ? '' : 'moved'"
|
||||||
|
style="width: 7rem; height: 7rem"
|
||||||
|
></div>
|
||||||
<v-icon
|
<v-icon
|
||||||
class="pr-8 pl-4"
|
class="pr-8 pl-4 py-12"
|
||||||
style="border-radius: 0rem !important"
|
style="border-radius: 0rem !important; transition: all 0.2s ease"
|
||||||
:class="
|
|
||||||
$store.state.tweaks.roundTweak > 0
|
|
||||||
? $vuetify.theme.dark
|
|
||||||
? 'background lighten-2'
|
|
||||||
: 'background darken-2'
|
|
||||||
: ''
|
|
||||||
"
|
|
||||||
:style="{
|
:style="{
|
||||||
|
translate:
|
||||||
|
watchTelemetry && $store.state.tweaks.roundTweak > 0
|
||||||
|
? '0 1.75rem'
|
||||||
|
: '0 -1.5rem',
|
||||||
|
scale: watchTelemetry ? '1.1' : '1',
|
||||||
color: watchTelemetry ? 'var(--v-primary-base)' : '',
|
color: watchTelemetry ? 'var(--v-primary-base)' : '',
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
mdi-account-card-outline
|
{{
|
||||||
|
watchTelemetry
|
||||||
|
? "mdi-account-card-outline"
|
||||||
|
: "mdi-account-lock-outline"
|
||||||
|
}}
|
||||||
</v-icon>
|
</v-icon>
|
||||||
<div
|
<div
|
||||||
class="my-auto pa-4 ml-n4 background"
|
class="my-auto pa-4 ml-n4 background"
|
||||||
|
@ -82,11 +96,10 @@
|
||||||
time telemetry.
|
time telemetry.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<v-spacer />
|
|
||||||
<v-switch
|
<v-switch
|
||||||
v-model="watchTelemetry"
|
v-model="watchTelemetry"
|
||||||
style="pointer-events: none"
|
|
||||||
class="mt-4"
|
class="mt-4"
|
||||||
|
style="pointer-events: none"
|
||||||
inset
|
inset
|
||||||
/>
|
/>
|
||||||
</v-card>
|
</v-card>
|
||||||
|
@ -191,4 +204,17 @@ export default {
|
||||||
section {
|
section {
|
||||||
padding: 0 1em 1em 1em;
|
padding: 0 1em 1em 1em;
|
||||||
}
|
}
|
||||||
|
.circle {
|
||||||
|
left: -2rem;
|
||||||
|
bottom: -2rem;
|
||||||
|
opacity: 0.25;
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--v-primary-base);
|
||||||
|
transition: all 0.25s ease;
|
||||||
|
}
|
||||||
|
.moved {
|
||||||
|
bottom: -8rem;
|
||||||
|
left: -16rem;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue