Cookies_Github_mirror/AquaDX
4
0
Fork 1
mirror of https://github.com/MewoLab/AquaDX.git synced 2026-02-07 02:37:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

[O] Migrate sass import

Browse Source
This commit is contained in:
Azalea
2024-12-20 04:37:51 -05:00
parent d66eb239fa
commit 813ec7d294
18 changed files with 206 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
AquaNet/src/components/ActionCard.svelte
View File

@@ -30,13 +30,13 @@
</div>
<style lang="sass">
@import '../vars'
@use '../vars'
.action-card
overflow: hidden
padding: 1rem
border-radius: $border-radius
box-shadow: 0 5px 5px 1px $c-shadow
border-radius: vars.$border-radius
box-shadow: 0 5px 5px 1px vars.$c-shadow
transition: all 0.2s ease
cursor: pointer
position: relative
@@ -45,7 +45,7 @@
filter: drop-shadow(0 0 12px rgba(var(--card-color), 0))
&:hover
box-shadow: 0 0 0.5rem 0.2rem $c-shadow
box-shadow: 0 0 0.5rem 0.2rem vars.$c-shadow
transform: translateY(-3px)
// Drop shadow glow
@@ -67,7 +67,7 @@
mask-image: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.5) 70%, white 100%)
opacity: 0.8
@media (max-width: $w-mobile)
@media (max-width: vars.$w-mobile)
opacity: 0.6
:global(> svg)

10
AquaNet/src/components/CommunityCard.svelte
View File

@@ -17,13 +17,13 @@
</div>
<style lang="sass">
@import '../vars'
@use '../vars'
.action-card
overflow: hidden
padding: 1rem
border-radius: $border-radius
box-shadow: 0 5px 5px 1px $c-shadow
border-radius: vars.$border-radius
box-shadow: 0 5px 5px 1px vars.$c-shadow
transition: all 0.2s ease
cursor: pointer
position: relative
@@ -32,7 +32,7 @@
filter: drop-shadow(0 0 12px rgba(var(--card-color), 0))
&:hover
box-shadow: 0 0 0.5rem 0.2rem $c-shadow
box-shadow: 0 0 0.5rem 0.2rem vars.$c-shadow
transform: translateY(-3px)
// Drop shadow glow
@@ -57,6 +57,6 @@
mask-image: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.5) 70%, white 100%)
opacity: 0.8
@media (max-width: $w-mobile)
@media (max-width: vars.$w-mobile)
opacity: 0.6
</style>

8
AquaNet/src/components/RankDetails.svelte
View File

@@ -35,7 +35,7 @@
</div>
<style lang="sass">
@import "../vars"
@use "../vars"
.rank-detail-container
> div
@@ -48,11 +48,11 @@
table-layout: fixed
th:not(:first-child)
background: $grad-special
background: vars.$grad-special
-webkit-background-clip: text
-webkit-text-fill-color: transparent
background-clip: text
color: $c-main
color: vars.$c-main
padding: 0.5em
th, td
@@ -60,5 +60,5 @@
text-align: center
&:first-child
color: $c-main
color: vars.$c-main
</style>

18
AquaNet/src/components/RatingCompSong.svelte
View File

@@ -66,19 +66,19 @@
</div>
<style lang="sass">
@import "../vars"
@use "../vars"
vars.$gap: 20px
.map-detail-container
background-color: rgb(35,35,35)
background-color: rgb(35,35,35)
border-radius: vars.$border-radius
overflow: hidden
.scores
display: flex
flex-direction: column
flex-wrap: wrap
flex-wrap: wrap
gap: vars.$gap
// Image and song info
@@ -91,7 +91,7 @@
img
width: 50px
height: 50px
height: 50px
border-radius: vars.$border-radius
object-fit: cover
@@ -118,7 +118,7 @@
// Make song score and rank not wrap
> div:last-child
white-space: nowrap
@media (max-width: vars.$w-mobile)
flex-direction: column
gap: 0
@@ -127,7 +127,7 @@
text-align: left
.rank-S
// Gold green gradient on text
// Gold green gradient on text
background: vars.$grad-special
-webkit-background-clip: text
color: transparent
@@ -142,7 +142,7 @@
width: 30px
text-align: center
background: rgba(var(--lv-color), 0.6)
padding: 0 6px
padding: 0 6px
border-radius: 0 vars.$border-radius 0 vars.$border-radius
// Inset shadow, like it's a paper below this card with a cut
@@ -163,5 +163,5 @@
span.rank-num
min-width: 60px
span.dx-change
margin-right: 0.5rem
margin-right: 0.5rem
color: vars.$c-good

6
AquaNet/src/components/RatingComposition.svelte
View File

@@ -25,17 +25,17 @@
{/if}
<style lang="sass">
@import "../vars"
@use "../vars"
.rating-composition
display: grid
// 3 columns
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr))
gap: $gap
gap: vars.$gap
.rating-composition-2
display: grid
// 2 columns
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr))
gap: $gap
gap: vars.$gap
</style>

4
AquaNet/src/components/Tooltip.svelte
View File

@@ -56,14 +56,14 @@
{/if}
<style lang="sass">
@import "../vars"
@use "../vars"
.tooltip
position: absolute
z-index: 1000
background: white
padding: 10px 16px
border-radius: $border-radius
border-radius: vars.$border-radius
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)
pointer-events: none
white-space: nowrap

8
AquaNet/src/components/UserBox.svelte
View File

@@ -432,7 +432,7 @@
<StatusOverlays {error} {loading} />
<style lang="sass">
@import "../vars"
@use "../vars"
.outer-container
display: flex
@@ -451,7 +451,7 @@
font-weight: 500
&.active
color: $c-main
color: vars.$c-main
img
width: 100%
@@ -462,7 +462,7 @@
flex-direction: row
gap: 3rem
@media (max-width: $w-max)
@media (max-width: vars.$w-max)
flex-direction: column
.preview
@@ -471,7 +471,7 @@
gap: 1rem
width: 50%
@media (max-width: $w-max)
@media (max-width: vars.$w-max)
width: 100%
.secondrow

4
AquaNet/src/components/UserCard.svelte
View File

@@ -32,12 +32,12 @@
{/if}
<style lang="sass">
@import "../vars"
@use "../vars"
.user-card
display: flex
align-items: center
gap: $gap
gap: vars.$gap
.details
display: flex