lzc256
/
AquaDX
mirror of https://github.com/hykilpikonna/AquaDX
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

[O] Migrate sass import

matching
Azalea 2024-12-20 04:37:51 -05:00
parent d66eb239fa
commit 813ec7d294
18 changed files with 206 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
AquaNet/src/App.svelte
View File

@ -60,14 +60,14 @@
</Router> </Router>
<style lang="sass"> <style lang="sass">
@import "vars" @use "vars"
nav nav
display: flex display: flex
justify-content: flex-end justify-content: flex-end
align-items: center align-items: center
gap: 32px gap: 32px
height: $nav-height height: vars.$nav-height
padding: 0 48px padding: 0 48px
@ -89,15 +89,15 @@
align-items: center align-items: center
gap: 8px gap: 8px
font-weight: bold font-weight: bold
color: $c-main color: vars.$c-main
letter-spacing: 0.2em letter-spacing: 0.2em
flex: 1 flex: 1
@media (max-width: $w-mobile) @media (max-width: vars.$w-mobile)
> span > span
display: none display: none
@media (max-width: $w-mobile) @media (max-width: vars.$w-mobile)
justify-content: center justify-content: center
</style> </style>

99
AquaNet/src/app.sass
View File

@ -1,11 +1,12 @@
@import "vars" @use "sass:color"
@use "vars"
@import 'lxgw-wenkai-lite-webfont/style.css' @import 'lxgw-wenkai-lite-webfont/style.css'
html html
height: 100% height: 100%
body body
font-family: $font font-family: vars.$font
line-height: 1.5 line-height: 1.5
font-weight: 400 font-weight: 400
width: 100% width: 100%
@ -15,7 +16,7 @@ body
color-scheme: dark color-scheme: dark
color: rgba(255, 255, 255, 0.87) color: rgba(255, 255, 255, 0.87)
background-color: $c-bg background-color: vars.$c-bg
font-synthesis: none font-synthesis: none
text-rendering: optimizeLegibility text-rendering: optimizeLegibility
@ -24,11 +25,11 @@ body
a a
font-weight: 500 font-weight: 500
color: $c-main color: vars.$c-main
text-decoration: inherit text-decoration: inherit
a:hover a:hover
color: $c-main color: vars.$c-main
h1 h1
font-size: 3.2em font-size: 3.2em
@ -39,9 +40,9 @@ h1
display: flex display: flex
flex-direction: column flex-direction: column
border-radius: $border-radius border-radius: vars.$border-radius
padding: 12px 16px padding: 12px 16px
background: $ov-light background: vars.$ov-light
blockquote blockquote
@ -51,7 +52,7 @@ blockquote
padding: 10px 20px 10px 20px padding: 10px 20px 10px 20px
margin: 16px 0 margin: 16px 0
border-left: solid #ff7c7c 3px border-left: solid #ff7c7c 3px
border-radius: $border-radius border-radius: vars.$border-radius
#app #app
@ -67,29 +68,29 @@ main:not(.no-margin)
button button
border-radius: $border-radius border-radius: vars.$border-radius
border: 1px solid transparent border: 1px solid transparent
padding: 0.6em 1.2em padding: 0.6em 1.2em
font-size: 1em font-size: 1em
font-weight: 500 font-weight: 500
font-family: inherit font-family: inherit
background-color: $ov-lighter background-color: vars.$ov-lighter
opacity: 0.9 opacity: 0.9
cursor: pointer cursor: pointer
transition: $transition transition: vars.$transition
button:hover button:hover
border-color: $c-main border-color: vars.$c-main
button:focus, button:focus-visible button:focus, button:focus-visible
color: $c-main color: vars.$c-main
outline: none outline: none
button.error button.error
color: unset color: unset
&:hover &:hover
border-color: $c-error border-color: vars.$c-error
color: $c-error color: vars.$c-error
//background: $c-error //background: $c-error
//border-color: transparent //border-color: transparent
@ -120,29 +121,29 @@ button.icon
--lv-color: 194, 153, 231 --lv-color: 194, 153, 231
.error .error
color: $c-error color: vars.$c-error
input input
border-radius: $border-radius border-radius: vars.$border-radius
border: 1px solid transparent border: 1px solid transparent
padding: 0.6em 1.2em padding: 0.6em 1.2em
font-size: 1em font-size: 1em
font-weight: 500 font-weight: 500
font-family: inherit font-family: inherit
background-color: $ov-lighter background-color: vars.$ov-lighter
transition: $transition transition: vars.$transition
box-sizing: border-box box-sizing: border-box
// Dropdown // Dropdown
select select
border-radius: $border-radius border-radius: vars.$border-radius
border: 1px solid transparent border: 1px solid transparent
padding: 0.6em 1.2em padding: 0.6em 1.2em
font-size: 1em font-size: 1em
font-weight: 500 font-weight: 500
font-family: inherit font-family: inherit
background-color: $ov-lighter background-color: vars.$ov-lighter
transition: $transition transition: vars.$transition
box-sizing: border-box box-sizing: border-box
option option
@ -157,25 +158,25 @@ input[type="checkbox"]
height: 1.2em height: 1.2em
margin: 0 margin: 0
padding: 0 padding: 0
border: 1px solid $c-main border: 1px solid vars.$c-main
background-color: $ov-lighter background-color: vars.$ov-lighter
appearance: none appearance: none
cursor: pointer cursor: pointer
flex-shrink: 0 flex-shrink: 0
&:checked &:checked
background-color: $c-main background-color: vars.$c-main
border-color: $c-main border-color: vars.$c-main
label label
cursor: pointer cursor: pointer
input:focus, input:focus-visible input:focus, input:focus-visible
border: 1px solid $c-main border: 1px solid vars.$c-main
outline: none outline: none
input.error input.error
border: 1px solid $c-error border: 1px solid vars.$c-error
.flex-center .flex-center
display: flex display: flex
@ -201,30 +202,30 @@ input.error
margin: 100px auto 0 margin: 100px auto 0
padding: 32px 32px 128px padding: 32px 32px 128px
min-height: 100% min-height: 100%
max-width: $w-max max-width: vars.$w-max
background-color: darken($c-bg, 3%) background-color: color.adjust(vars.$c-bg, $lightness: -3%)
border-radius: 16px 16px 0 0 border-radius: 16px 16px 0 0
@media (max-width: #{$w-max + (64px) * 2}) @media (max-width: #{vars.$w-max + (64px) * 2})
margin: 100px 32px 0 margin: 100px 32px 0
@media (max-width: $w-mobile) @media (max-width: vars.$w-mobile)
margin: 100px 0 0 margin: 100px 0 0
.fw-block .fw-block
margin-left: -32px margin-left: -32px
margin-right: -32px margin-right: -32px
padding: 12px 32px padding: 12px 32px
background-color: $ov-darker background-color: vars.$ov-darker
// Inner shadow // Inner shadow
box-shadow: inset 0 10px 10px -2px $c-shadow, inset 0 -10px 10px -2px $c-shadow box-shadow: inset 0 10px 10px -2px vars.$c-shadow, inset 0 -10px 10px -2px vars.$c-shadow
> h2.outer-title, > .outer-title-options > h2.outer-title, > .outer-title-options
margin-top: -5rem margin-top: -5rem
margin-bottom: 1rem margin-bottom: 1rem
@media (max-width: $w-mobile) @media (max-width: vars.$w-mobile)
text-align: center text-align: center
> .outer-title-options > .outer-title-options
@ -238,7 +239,7 @@ input.error
gap: 10px gap: 10px
top: 4px top: 4px
@media (max-width: $w-mobile) @media (max-width: vars.$w-mobile)
flex-direction: column flex-direction: column
> h2, > .outer-title-options > h2 > h2, > .outer-title-options > h2
@ -257,15 +258,15 @@ main.content
position: absolute position: absolute
inset: 0 inset: 0
top: 100px top: 100px
background: rgba(darken($c-bg, 3%), 0.9) background: rgba(color.adjust(vars.$c-bg, $lightness: -3%), 0.9)
backdrop-filter: blur(5px) backdrop-filter: blur(5px)
box-shadow: 0 0 10px 6px rgba(black, 0.4) box-shadow: 0 0 10px 6px rgba(black, 0.4)
max-width: calc($w-max + 20px) max-width: calc(vars.$w-max + 20px)
@media (max-width: #{$w-max + (64px) * 2}) @media (max-width: #{vars.$w-max + (64px) * 2})
margin: 100px 22px 0 margin: 100px 22px 0
@media (max-width: $w-mobile) @media (max-width: vars.$w-mobile)
margin: 100px 0 0 margin: 100px 0 0
@ -289,9 +290,9 @@ main.content
margin: 0 margin: 0
> div > div
background-color: $c-bg background-color: vars.$c-bg
padding: 2rem padding: 2rem
border-radius: $border-radius border-radius: vars.$border-radius
display: flex display: flex
flex-direction: column flex-direction: column
@ -305,7 +306,7 @@ main.content
nav nav
> div, > a > div, > a
cursor: pointer cursor: pointer
transition: $transition transition: vars.$transition
text-decoration: underline 1px solid transparent text-decoration: underline 1px solid transparent
text-underline-offset: 0.1em text-underline-offset: 0.1em
@ -315,12 +316,12 @@ nav
font-weight: unset font-weight: unset
&:hover &:hover
color: $c-main color: vars.$c-main
text-decoration-color: $c-main text-decoration-color: vars.$c-main
text-underline-offset: 0.5em text-underline-offset: 0.5em
&.active &.active
color: $c-main color: vars.$c-main
.hide-scrollbar .hide-scrollbar
@ -331,11 +332,11 @@ nav
.aqua-tooltip .aqua-tooltip
box-shadow: 0 0 5px 0 $c-shadow box-shadow: 0 0 5px 0 vars.$c-shadow
border-radius: $border-radius border-radius: vars.$border-radius
position: absolute position: absolute
padding: 4px 8px padding: 4px 8px
background: $ov-lighter background: vars.$ov-lighter
backdrop-filter: blur(5px) backdrop-filter: blur(5px)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4
AquaNet/src/pages/Home.svelte
View File

@ -77,7 +77,7 @@
<StatusOverlays {error} loading={!me}/> <StatusOverlays {error} loading={!me}/>
<style lang="sass"> <style lang="sass">
@import "../vars" @use "../vars"
.tabs .tabs
display: flex display: flex
@ -85,7 +85,7 @@
div div
&.active &.active
color: $c-main color: vars.$c-main
h3 h3
font-size: 1.3rem font-size: 1.3rem

8
AquaNet/src/pages/Home/ImportDataAction.svelte
View File

@ -126,7 +126,7 @@
{/if} {/if}
<style lang="sass"> <style lang="sass">
@import "../../vars" @use "../../vars"
h3 h3
font-size: 1.3rem font-size: 1.3rem
margin: 0 margin: 0
@ -142,7 +142,7 @@
.old .old
background: #ff6b6b20 background: #ff6b6b20
border: 1px solid $c-error border: 1px solid vars.$c-error
color: #ffffff99 color: #ffffff99
position: relative position: relative
@ -151,13 +151,13 @@
position: absolute position: absolute
bottom: 0.5rem bottom: 0.5rem
right: 0.5rem right: 0.5rem
color: $c-error color: vars.$c-error
opacity: 0.6 opacity: 0.6
font-size: 2rem font-size: 2rem
.new .new
background: #646cff20 background: #646cff20
border: 1px solid $c-darker border: 1px solid vars.$c-darker
.buttons .buttons
display: grid display: grid

8
AquaNet/src/pages/Home/LinkCard.svelte
View File

@ -317,7 +317,7 @@
</div> </div>
<style lang="sass"> <style lang="sass">
@import "../../vars" @use "../../vars"
.link-card .link-card
input input
@ -343,7 +343,7 @@
white-space: nowrap white-space: nowrap
&.ghost &.ghost
background: rgba($c-darker, 0.8) background: rgba(vars.$c-darker, 0.8)
.register, .last .register, .last
opacity: 0.7 opacity: 0.7
@ -361,10 +361,10 @@
.conflict-cards .conflict-cards
.card .card
transition: $transition transition: vars.$transition
.card:hover .card:hover
background: $c-darker background: vars.$c-darker
span:not(.type) span:not(.type)
font-size: 0.8rem font-size: 0.8rem

10
AquaNet/src/pages/Ranking.svelte
View File

@ -77,7 +77,7 @@
</main> </main>
<style lang="sass"> <style lang="sass">
@import "../vars" @use "../vars"
.leaderboard-container .leaderboard-container
display: flex display: flex
@ -89,7 +89,7 @@
justify-content: space-between justify-content: space-between
width: 100% width: 100%
gap: 12px gap: 12px
border-radius: $border-radius border-radius: vars.$border-radius
padding: 6px 12px padding: 6px 12px
box-sizing: border-box box-sizing: border-box
@ -104,7 +104,7 @@
color: unset color: unset
.registered .registered
background: $grad-special background: vars.$grad-special
color: transparent color: transparent
-webkit-background-clip: text -webkit-background-clip: text
background-clip: text background-clip: text
@ -121,14 +121,14 @@
width: 5% width: 5%
min-width: 20px min-width: 20px
@media (max-width: $w-mobile) @media (max-width: vars.$w-mobile)
font-size: 0.9rem font-size: 0.9rem
.accuracy .accuracy
display: none display: none
&.alternate &.alternate
background-color: $ov-light background-color: vars.$ov-light
</style> </style>

4
AquaNet/src/pages/User/Settings.svelte
View File

@ -156,7 +156,7 @@
</main> </main>
<style lang="sass"> <style lang="sass">
@import "../../vars" @use "../../vars"
.fields .fields
display: flex display: flex
@ -194,7 +194,7 @@
img img
max-width: 100px max-width: 100px
max-height: 100px max-height: 100px
border-radius: $border-radius border-radius: vars.$border-radius
object-fit: cover object-fit: cover
</style> </style>

38
AquaNet/src/pages/UserHome.svelte
View File

@ -294,13 +294,13 @@
</main> </main>
<style lang="sass"> <style lang="sass">
@import "../vars" @use "../vars"
#user-home #user-home
.user-pfp .user-pfp
display: flex display: flex
align-items: flex-end align-items: flex-end
gap: $gap gap: vars.$gap
margin-top: -72px margin-top: -72px
position: relative position: relative
@ -319,7 +319,7 @@
.setting-icon .setting-icon
font-size: 1.5rem font-size: 1.5rem
color: $c-main color: vars.$c-main
cursor: pointer cursor: pointer
display: flex display: flex
align-items: center align-items: center
@ -334,10 +334,10 @@
.pfp .pfp
width: 100px width: 100px
height: 100px height: 100px
border-radius: $border-radius border-radius: vars.$border-radius
object-fit: cover object-fit: cover
@media (max-width: $w-mobile) @media (max-width: vars.$w-mobile)
.user-pfp .user-pfp
margin-top: -68px margin-top: -68px
h2 h2
@ -349,7 +349,7 @@
.info-bottom, .info-top, .other-info .info-bottom, .info-top, .other-info
display: flex display: flex
gap: $gap gap: vars.$gap
> div > div
display: flex display: flex
@ -361,7 +361,7 @@
// character spacing // character spacing
letter-spacing: 0.1em letter-spacing: 0.1em
color: $c-main color: vars.$c-main
.info-bottom .info-bottom
width: max-content width: max-content
@ -376,7 +376,7 @@
.scoring-info .scoring-info
display: flex display: flex
gap: $gap gap: vars.$gap
max-height: 250px max-height: 250px
.chart .chart
@ -408,7 +408,7 @@
opacity: 0.5 opacity: 0.5
user-select: none user-select: none
@media (max-width: $w-mobile) @media (max-width: vars.$w-mobile)
flex-direction: column flex-direction: column
max-height: unset max-height: unset
@ -429,12 +429,12 @@
.activity-info .activity-info
display: flex display: flex
flex-direction: column flex-direction: column
gap: $gap gap: vars.$gap
#cal-heatmap #cal-heatmap
overflow-x: auto overflow-x: auto
@media (max-width: $w-mobile) @media (max-width: vars.$w-mobile)
#cal-heatmap #cal-heatmap
width: 100% width: 100%
@ -453,17 +453,17 @@
display: flex display: flex
flex-direction: column flex-direction: column
flex-wrap: wrap flex-wrap: wrap
gap: $gap gap: vars.$gap
> div.alt > div.alt
background-color: rgba(white, 0.03) background-color: rgba(white, 0.03)
border-radius: $border-radius border-radius: vars.$border-radius
// Image and song info // Image and song info
> div > div
display: flex display: flex
align-items: center align-items: center
gap: $gap gap: vars.$gap
padding-right: 16px padding-right: 16px
max-width: 100% max-width: 100%
box-sizing: border-box box-sizing: border-box
@ -471,7 +471,7 @@
img img
width: 50px width: 50px
height: 50px height: 50px
border-radius: $border-radius border-radius: vars.$border-radius
object-fit: cover object-fit: cover
// Song info and score // Song info and score
@ -493,7 +493,7 @@
> div:last-child > div:last-child
white-space: nowrap white-space: nowrap
@media (max-width: $w-mobile) @media (max-width: vars.$w-mobile)
flex-direction: column flex-direction: column
gap: 0 gap: 0
@ -511,7 +511,7 @@
.rank-S .rank-S
// Gold green gradient on text // Gold green gradient on text
background: $grad-special background: vars.$grad-special
-webkit-background-clip: text -webkit-background-clip: text
color: transparent color: transparent
@ -526,7 +526,7 @@
text-align: center text-align: center
background: rgba(var(--lv-color), 0.6) background: rgba(var(--lv-color), 0.6)
padding: 0 6px padding: 0 6px
border-radius: $border-radius border-radius: vars.$border-radius
margin-right: 10px margin-right: 10px
span span
@ -544,5 +544,5 @@
span.increased span.increased
&:before &:before
content: "+" content: "+"
color: $c-good color: vars.$c-good
</style> </style>

10
AquaNet/src/pages/Welcome.svelte
View File

@ -157,7 +157,7 @@
</main> </main>
<style lang="sass"> <style lang="sass">
@import "../vars" @use "../vars"
.login-form .login-form
display: flex display: flex
@ -171,7 +171,7 @@
align-items: center align-items: center
#home #home
color: $c-main color: vars.$c-main
position: relative position: relative
width: 100% width: 100%
height: 100% height: 100%
@ -185,7 +185,7 @@
flex-direction: column flex-direction: column
justify-content: center justify-content: center
margin-top: -$nav-height margin-top: -(vars.$nav-height)
// Content container // Content container
> div > div
@ -196,10 +196,10 @@
// Switching state container // Switching state container
> div > div
transition: $transition transition: vars.$transition
#title #title
font-family: Quicksand, $font font-family: Quicksand, vars.$font
user-select: none user-select: none
// Gap between text characters // Gap between text characters

76
AquaNet/tools/migrate.py 100644
View File

@ -0,0 +1,76 @@
import pathlib
import re
import subprocess
import tempfile
def extract_and_migrate_sass(file_path):
"""Extracts <style lang="sass"> block from a Svelte file, runs sass-migrator on it, and replaces the original style block."""
with open(file_path, 'r', encoding='utf-8') as file:
content = file.read()
# Regex pattern to match <style lang="sass">...</style>
style_pattern = re.compile(r'<style\s+lang\s*=\s*["\']sass["\']>(.*?)</style>', re.DOTALL)
# Extract all matching style blocks
matches = list(style_pattern.finditer(content))
if not matches:
print(f"No <style lang='sass'> block found in {file_path}")
return
updated_content = content
for match in matches:
original_style_block = match.group(0) # The full <style>...</style> block
sass_content = match.group(1) # The content inside the <style> block
# Create a temporary file in the same directory as the .svelte file
temp_file_path = pathlib.Path(file_path).parent / f"{pathlib.Path(file_path).stem}_temp.sass"
# Write the SASS content to the temporary file
with open(temp_file_path, 'w', encoding='utf-8') as temp_file:
temp_file.write(sass_content)
# Run the sass-migrator on the temporary file
try:
subprocess.run(['sass-migrator', 'module', str(temp_file_path)], check=True)
except subprocess.CalledProcessError as e:
print(f"Error while running sass-migrator on {file_path}: {e}")
continue
# Read back the migrated content
with open(temp_file_path, 'r', encoding='utf-8') as temp_file:
migrated_sass_content = temp_file.read()
# Create the new <style> block with the migrated SASS content
new_style_block = f'<style lang="sass">{migrated_sass_content}</style>'
# Replace the original style block with the new one
updated_content = updated_content.replace(original_style_block, new_style_block)
# Remove the temporary file
temp_file_path.unlink()
# Write the updated content back to the original file
with open(file_path, 'w', encoding='utf-8') as file:
file.write(updated_content)
print(f"Updated {file_path}")
def process_svelte_files(directory):
"""Recursively processes all .svelte files in the given directory."""
svelte_files = pathlib.Path(directory).rglob("*.svelte")
for svelte_file in svelte_files:
extract_and_migrate_sass(svelte_file)
def main():
"""Main function to process all .svelte files in the current directory."""
current_directory = pathlib.Path(__file__).parent
process_svelte_files(current_directory)
if __name__ == "__main__":
main()