HidemaruOwO/puyoskey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use module scss like everywhere else

Browse source
This commit is contained in:
CenTdemeern1 2024-12-08 16:04:47 +01:00
parent 3e16028411
commit 7888d20c35
1 changed files with 21 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
packages/frontend/src/components/SkModPlayer.vue
View file

@ -4,39 +4,39 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<div v-if="hide" class="mod-player-disabled" @click="toggleVisible()"> <div v-if="hide" :class="$style.mod_player_disabled" @click="toggleVisible()">
<div> <div>
<b><i class="ph-eye ph-bold ph-lg"></i> {{ i18n.ts.sensitive }}</b> <b><i class="ph-eye ph-bold ph-lg"></i> {{ i18n.ts.sensitive }}</b>
<span>{{ i18n.ts.clickToShow }}</span> <span>{{ i18n.ts.clickToShow }}</span>
</div> </div>
</div> </div>
<div v-else class="mod-player-enabled"> <div v-else :class="$style.mod_player_enabled">
<div class="pattern-display" @click="togglePattern()" @scroll="scrollHandler" @scrollend="scrollEndHandle"> <div :class="$style.pattern_display" @click="togglePattern()" @scroll="scrollHandler" @scrollend="scrollEndHandle">
<div v-if="patternHide" class="pattern-hide"> <div v-if="patternHide" :class="$style.pattern_hide">
<b><i class="ph-eye ph-bold ph-lg"></i> Pattern Hidden</b> <b><i class="ph-eye ph-bold ph-lg"></i> Pattern Hidden</b>
<span>{{ i18n.ts.clickToShow }}</span> <span>{{ i18n.ts.clickToShow }}</span>
</div> </div>
<span class="patternShadowTop"></span> <span :class="$style.patternShadowTop"></span>
<span class="patternShadowBottom"></span> <span :class="$style.patternShadowBottom"></span>
<canvas ref="displayCanvas" class="pattern-canvas"></canvas> <canvas ref="displayCanvas" :class="$style.pattern_canvas"></canvas>
</div> </div>
<div class="controls"> <div :class="$style.controls">
<input v-if="patternScrollSliderShow" ref="patternScrollSlider" v-model="patternScrollSliderPos" class="pattern-slider" type="range" min="0" max="100" step="0.01" style=""/> <input v-if="patternScrollSliderShow" ref="patternScrollSlider" v-model="patternScrollSliderPos" :class="$style.pattern_slider" type="range" min="0" max="100" step="0.01" style=""/>
<button class="play" @click="playPause()"> <button :class="$style.play" @click="playPause()">
<i v-if="playing" class="ph-pause ph-bold ph-lg"></i> <i v-if="playing" class="ph-pause ph-bold ph-lg"></i>
<i v-else class="ph-play ph-bold ph-lg"></i> <i v-else class="ph-play ph-bold ph-lg"></i>
</button> </button>
<button class="stop" @click="stop()"> <button :class="$style.stop" @click="stop()">
<i class="ph-stop ph-bold ph-lg"></i> <i class="ph-stop ph-bold ph-lg"></i>
</button> </button>
<input ref="progress" v-model="position" class="progress" type="range" min="0" max="1" step="0.1" @mousedown="initSeek()" @mouseup="performSeek()"/> <input ref="progress" v-model="position" :class="$style.progress" type="range" min="0" max="1" step="0.1" @mousedown="initSeek()" @mouseup="performSeek()"/>
<input v-model="player.context.gain.value" type="range" min="0" max="1" step="0.1"/> <input v-model="player.context.gain.value" type="range" min="0" max="1" step="0.1"/>
<a class="download" :title="i18n.ts.download" :href="module.url" :download="module.name" target="_blank"> <a :class="$style.download" :title="i18n.ts.download" :href="module.url" :download="module.name" target="_blank">
<i class="ph-download ph-bold ph-lg"></i> <i class="ph-download ph-bold ph-lg"></i>
</a> </a>
</div> </div>
<i class="hide ph-eye-slash ph-bold ph-lg" @click="toggleVisible()"></i> <i :class="$style.hide" class="ph-eye-slash ph-bold ph-lg" @click="toggleVisible()"></i>
</div> </div>
</template> </template>
@ -437,7 +437,7 @@ onDeactivated(() => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.hide { .hide {
border-radius: var(--radius-sm) !important; border-radius: var(--radius-sm) !important;
@ -446,7 +446,7 @@ onDeactivated(() => {
font-size: 12px !important; font-size: 12px !important;
} }
.mod-player-enabled { .mod_player_enabled {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
@ -469,7 +469,7 @@ onDeactivated(() => {
z-index: 4; z-index: 4;
} }
> .pattern-display { > .pattern_display {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow-x: scroll; overflow-x: scroll;
@ -484,7 +484,7 @@ onDeactivated(() => {
display: none; display: none;
} }
.pattern-canvas { .pattern_canvas {
position: relative; position: relative;
background-color: black; background-color: black;
image-rendering: pixelated; image-rendering: pixelated;
@ -513,7 +513,7 @@ onDeactivated(() => {
z-index: 2; z-index: 2;
} }
.pattern-hide { .pattern_hide {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@ -563,7 +563,7 @@ onDeactivated(() => {
margin: 4px 8px; margin: 4px 8px;
overflow-x: hidden; overflow-x: hidden;
&.pattern-slider { &.pattern_slider {
position: absolute; position: absolute;
width: calc( 100% - 8px * 2 ); width: calc( 100% - 8px * 2 );
top: calc( 100% - 21px * 3 ); top: calc( 100% - 21px * 3 );
@ -677,7 +677,7 @@ onDeactivated(() => {
} }
} }
.mod-player-disabled { .mod_player_disabled {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;