etc
/
VueTube
mirror of https://github.com/VueTubeApp/VueTube
0
0
Fork 0
Code Issues Projects Releases Wiki Activity

cooler toggle

This commit is contained in:
Nikita Krupin 2022-12-26 04:39:14 -05:00
parent b17993281a
commit 7c8733f126
1 changed files with 39 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
NUXT/pages/mods/general.vue
View File

@ -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>