mirror of https://github.com/hykilpikonna/AquaDX
[O] Migrate sass import
Azalea
parent
d66eb239fa
commit
813ec7d294
|
|
@ -60,14 +60,14 @@
|
|||
</Router>
|
||||
|
||||
<style lang="sass">
|
||||
@import "vars"
|
||||
@use "vars"
|
||||
|
||||
nav
|
||||
display: flex
|
||||
justify-content: flex-end
|
||||
align-items: center
|
||||
gap: 32px
|
||||
height: $nav-height
|
||||
height: vars.$nav-height
|
||||
|
||||
padding: 0 48px
|
||||
|
||||
|
|
@ -89,15 +89,15 @@
|
|||
align-items: center
|
||||
gap: 8px
|
||||
font-weight: bold
|
||||
color: $c-main
|
||||
color: vars.$c-main
|
||||
letter-spacing: 0.2em
|
||||
flex: 1
|
||||
|
||||
@media (max-width: $w-mobile)
|
||||
@media (max-width: vars.$w-mobile)
|
||||
> span
|
||||
display: none
|
||||
|
||||
@media (max-width: $w-mobile)
|
||||
@media (max-width: vars.$w-mobile)
|
||||
justify-content: center
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
@import "vars"
|
||||
@use "sass:color"
|
||||
@use "vars"
|
||||
@import 'lxgw-wenkai-lite-webfont/style.css'
|
||||
|
||||
html
|
||||
height: 100%
|
||||
|
||||
body
|
||||
font-family: $font
|
||||
font-family: vars.$font
|
||||
line-height: 1.5
|
||||
font-weight: 400
|
||||
width: 100%
|
||||
|
|
@ -15,7 +16,7 @@ body
|
|||
|
||||
color-scheme: dark
|
||||
color: rgba(255, 255, 255, 0.87)
|
||||
background-color: $c-bg
|
||||
background-color: vars.$c-bg
|
||||
|
||||
font-synthesis: none
|
||||
text-rendering: optimizeLegibility
|
||||
|
|
@ -24,11 +25,11 @@ body
|
|||
|
||||
a
|
||||
font-weight: 500
|
||||
color: $c-main
|
||||
color: vars.$c-main
|
||||
text-decoration: inherit
|
||||
|
||||
a:hover
|
||||
color: $c-main
|
||||
color: vars.$c-main
|
||||
|
||||
h1
|
||||
font-size: 3.2em
|
||||
|
|
@ -39,9 +40,9 @@ h1
|
|||
display: flex
|
||||
flex-direction: column
|
||||
|
||||
border-radius: $border-radius
|
||||
border-radius: vars.$border-radius
|
||||
padding: 12px 16px
|
||||
background: $ov-light
|
||||
background: vars.$ov-light
|
||||
|
||||
|
||||
blockquote
|
||||
|
|
@ -51,7 +52,7 @@ blockquote
|
|||
padding: 10px 20px 10px 20px
|
||||
margin: 16px 0
|
||||
border-left: solid #ff7c7c 3px
|
||||
border-radius: $border-radius
|
||||
border-radius: vars.$border-radius
|
||||
|
||||
|
||||
#app
|
||||
|
|
@ -67,29 +68,29 @@ main:not(.no-margin)
|
|||
|
||||
|
||||
button
|
||||
border-radius: $border-radius
|
||||
border-radius: vars.$border-radius
|
||||
border: 1px solid transparent
|
||||
padding: 0.6em 1.2em
|
||||
font-size: 1em
|
||||
font-weight: 500
|
||||
font-family: inherit
|
||||
background-color: $ov-lighter
|
||||
background-color: vars.$ov-lighter
|
||||
opacity: 0.9
|
||||
cursor: pointer
|
||||
transition: $transition
|
||||
transition: vars.$transition
|
||||
|
||||
button:hover
|
||||
border-color: $c-main
|
||||
border-color: vars.$c-main
|
||||
|
||||
button:focus, button:focus-visible
|
||||
color: $c-main
|
||||
color: vars.$c-main
|
||||
outline: none
|
||||
|
||||
button.error
|
||||
color: unset
|
||||
&:hover
|
||||
border-color: $c-error
|
||||
color: $c-error
|
||||
border-color: vars.$c-error
|
||||
color: vars.$c-error
|
||||
//background: $c-error
|
||||
//border-color: transparent
|
||||
|
||||
|
|
@ -120,29 +121,29 @@ button.icon
|
|||
--lv-color: 194, 153, 231
|
||||
|
||||
.error
|
||||
color: $c-error
|
||||
color: vars.$c-error
|
||||
|
||||
input
|
||||
border-radius: $border-radius
|
||||
border-radius: vars.$border-radius
|
||||
border: 1px solid transparent
|
||||
padding: 0.6em 1.2em
|
||||
font-size: 1em
|
||||
font-weight: 500
|
||||
font-family: inherit
|
||||
background-color: $ov-lighter
|
||||
transition: $transition
|
||||
background-color: vars.$ov-lighter
|
||||
transition: vars.$transition
|
||||
box-sizing: border-box
|
||||
|
||||
// Dropdown
|
||||
select
|
||||
border-radius: $border-radius
|
||||
border-radius: vars.$border-radius
|
||||
border: 1px solid transparent
|
||||
padding: 0.6em 1.2em
|
||||
font-size: 1em
|
||||
font-weight: 500
|
||||
font-family: inherit
|
||||
background-color: $ov-lighter
|
||||
transition: $transition
|
||||
background-color: vars.$ov-lighter
|
||||
transition: vars.$transition
|
||||
box-sizing: border-box
|
||||
|
||||
option
|
||||
|
|
@ -157,25 +158,25 @@ input[type="checkbox"]
|
|||
height: 1.2em
|
||||
margin: 0
|
||||
padding: 0
|
||||
border: 1px solid $c-main
|
||||
background-color: $ov-lighter
|
||||
border: 1px solid vars.$c-main
|
||||
background-color: vars.$ov-lighter
|
||||
appearance: none
|
||||
cursor: pointer
|
||||
flex-shrink: 0
|
||||
|
||||
&:checked
|
||||
background-color: $c-main
|
||||
border-color: $c-main
|
||||
background-color: vars.$c-main
|
||||
border-color: vars.$c-main
|
||||
|
||||
label
|
||||
cursor: pointer
|
||||
|
||||
input:focus, input:focus-visible
|
||||
border: 1px solid $c-main
|
||||
border: 1px solid vars.$c-main
|
||||
outline: none
|
||||
|
||||
input.error
|
||||
border: 1px solid $c-error
|
||||
border: 1px solid vars.$c-error
|
||||
|
||||
.flex-center
|
||||
display: flex
|
||||
|
|
@ -201,30 +202,30 @@ input.error
|
|||
margin: 100px auto 0
|
||||
padding: 32px 32px 128px
|
||||
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
|
||||
|
||||
@media (max-width: #{$w-max + (64px) * 2})
|
||||
@media (max-width: #{vars.$w-max + (64px) * 2})
|
||||
margin: 100px 32px 0
|
||||
|
||||
@media (max-width: $w-mobile)
|
||||
@media (max-width: vars.$w-mobile)
|
||||
margin: 100px 0 0
|
||||
|
||||
.fw-block
|
||||
margin-left: -32px
|
||||
margin-right: -32px
|
||||
padding: 12px 32px
|
||||
background-color: $ov-darker
|
||||
background-color: vars.$ov-darker
|
||||
// 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
|
||||
margin-top: -5rem
|
||||
margin-bottom: 1rem
|
||||
|
||||
@media (max-width: $w-mobile)
|
||||
@media (max-width: vars.$w-mobile)
|
||||
text-align: center
|
||||
|
||||
> .outer-title-options
|
||||
|
|
@ -238,7 +239,7 @@ input.error
|
|||
gap: 10px
|
||||
top: 4px
|
||||
|
||||
@media (max-width: $w-mobile)
|
||||
@media (max-width: vars.$w-mobile)
|
||||
flex-direction: column
|
||||
|
||||
> h2, > .outer-title-options > h2
|
||||
|
|
@ -257,15 +258,15 @@ main.content
|
|||
position: absolute
|
||||
inset: 0
|
||||
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)
|
||||
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
|
||||
|
||||
@media (max-width: $w-mobile)
|
||||
@media (max-width: vars.$w-mobile)
|
||||
margin: 100px 0 0
|
||||
|
||||
|
||||
|
|
@ -289,9 +290,9 @@ main.content
|
|||
margin: 0
|
||||
|
||||
> div
|
||||
background-color: $c-bg
|
||||
background-color: vars.$c-bg
|
||||
padding: 2rem
|
||||
border-radius: $border-radius
|
||||
border-radius: vars.$border-radius
|
||||
|
||||
display: flex
|
||||
flex-direction: column
|
||||
|
|
@ -305,7 +306,7 @@ main.content
|
|||
nav
|
||||
> div, > a
|
||||
cursor: pointer
|
||||
transition: $transition
|
||||
transition: vars.$transition
|
||||
text-decoration: underline 1px solid transparent
|
||||
text-underline-offset: 0.1em
|
||||
|
||||
|
|
@ -315,12 +316,12 @@ nav
|
|||
font-weight: unset
|
||||
|
||||
&:hover
|
||||
color: $c-main
|
||||
text-decoration-color: $c-main
|
||||
color: vars.$c-main
|
||||
text-decoration-color: vars.$c-main
|
||||
text-underline-offset: 0.5em
|
||||
|
||||
&.active
|
||||
color: $c-main
|
||||
color: vars.$c-main
|
||||
|
||||
|
||||
.hide-scrollbar
|
||||
|
|
@ -331,11 +332,11 @@ nav
|
|||
|
||||
|
||||
.aqua-tooltip
|
||||
box-shadow: 0 0 5px 0 $c-shadow
|
||||
border-radius: $border-radius
|
||||
box-shadow: 0 0 5px 0 vars.$c-shadow
|
||||
border-radius: vars.$border-radius
|
||||
position: absolute
|
||||
padding: 4px 8px
|
||||
background: $ov-lighter
|
||||
background: vars.$ov-lighter
|
||||
backdrop-filter: blur(5px)
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -66,19 +66,19 @@
|
|||
|
||||
<style lang="sass">
|
||||
|
||||
@import "../vars"
|
||||
$gap: 20px
|
||||
@use "../vars"
|
||||
vars.$gap: 20px
|
||||
|
||||
.map-detail-container
|
||||
background-color: rgb(35,35,35)
|
||||
border-radius: $border-radius
|
||||
border-radius: vars.$border-radius
|
||||
overflow: hidden
|
||||
|
||||
.scores
|
||||
display: flex
|
||||
flex-direction: column
|
||||
flex-wrap: wrap
|
||||
gap: $gap
|
||||
gap: vars.$gap
|
||||
|
||||
// Image and song info
|
||||
> div
|
||||
|
|
@ -91,7 +91,7 @@
|
|||
img
|
||||
width: 50px
|
||||
height: 50px
|
||||
border-radius: $border-radius
|
||||
border-radius: vars.$border-radius
|
||||
object-fit: cover
|
||||
|
||||
// Song info and score
|
||||
|
|
@ -118,7 +118,7 @@
|
|||
> div:last-child
|
||||
white-space: nowrap
|
||||
|
||||
@media (max-width: $w-mobile)
|
||||
@media (max-width: vars.$w-mobile)
|
||||
flex-direction: column
|
||||
gap: 0
|
||||
|
||||
|
|
@ -127,7 +127,7 @@
|
|||
|
||||
.rank-S
|
||||
// Gold green gradient on text
|
||||
background: $grad-special
|
||||
background: vars.$grad-special
|
||||
-webkit-background-clip: text
|
||||
color: transparent
|
||||
|
||||
|
|
@ -142,7 +142,7 @@
|
|||
text-align: center
|
||||
background: rgba(var(--lv-color), 0.6)
|
||||
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
|
||||
box-shadow: inset 0 0 10px rgba(0,0,0,0.5)
|
||||
|
|
@ -163,5 +163,5 @@
|
|||
min-width: 60px
|
||||
span.dx-change
|
||||
margin-right: 0.5rem
|
||||
color: $c-good
|
||||
color: vars.$c-good
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@
|
|||
<StatusOverlays {error} loading={!me}/>
|
||||
|
||||
<style lang="sass">
|
||||
@import "../vars"
|
||||
@use "../vars"
|
||||
|
||||
.tabs
|
||||
display: flex
|
||||
|
|
@ -85,7 +85,7 @@
|
|||
|
||||
div
|
||||
&.active
|
||||
color: $c-main
|
||||
color: vars.$c-main
|
||||
|
||||
h3
|
||||
font-size: 1.3rem
|
||||
|
|
|
|||
|
|
@ -126,7 +126,7 @@
|
|||
{/if}
|
||||
|
||||
<style lang="sass">
|
||||
@import "../../vars"
|
||||
@use "../../vars"
|
||||
h3
|
||||
font-size: 1.3rem
|
||||
margin: 0
|
||||
|
|
@ -142,7 +142,7 @@
|
|||
|
||||
.old
|
||||
background: #ff6b6b20
|
||||
border: 1px solid $c-error
|
||||
border: 1px solid vars.$c-error
|
||||
color: #ffffff99
|
||||
position: relative
|
||||
|
||||
|
|
@ -151,13 +151,13 @@
|
|||
position: absolute
|
||||
bottom: 0.5rem
|
||||
right: 0.5rem
|
||||
color: $c-error
|
||||
color: vars.$c-error
|
||||
opacity: 0.6
|
||||
font-size: 2rem
|
||||
|
||||
.new
|
||||
background: #646cff20
|
||||
border: 1px solid $c-darker
|
||||
border: 1px solid vars.$c-darker
|
||||
|
||||
.buttons
|
||||
display: grid
|
||||
|
|
|
|||
|
|
@ -317,7 +317,7 @@
|
|||
</div>
|
||||
|
||||
<style lang="sass">
|
||||
@import "../../vars"
|
||||
@use "../../vars"
|
||||
|
||||
.link-card
|
||||
input
|
||||
|
|
@ -343,7 +343,7 @@
|
|||
white-space: nowrap
|
||||
|
||||
&.ghost
|
||||
background: rgba($c-darker, 0.8)
|
||||
background: rgba(vars.$c-darker, 0.8)
|
||||
|
||||
.register, .last
|
||||
opacity: 0.7
|
||||
|
|
@ -361,10 +361,10 @@
|
|||
|
||||
.conflict-cards
|
||||
.card
|
||||
transition: $transition
|
||||
transition: vars.$transition
|
||||
|
||||
.card:hover
|
||||
background: $c-darker
|
||||
background: vars.$c-darker
|
||||
|
||||
span:not(.type)
|
||||
font-size: 0.8rem
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@
|
|||
</main>
|
||||
|
||||
<style lang="sass">
|
||||
@import "../vars"
|
||||
@use "../vars"
|
||||
|
||||
.leaderboard-container
|
||||
display: flex
|
||||
|
|
@ -89,7 +89,7 @@
|
|||
justify-content: space-between
|
||||
width: 100%
|
||||
gap: 12px
|
||||
border-radius: $border-radius
|
||||
border-radius: vars.$border-radius
|
||||
padding: 6px 12px
|
||||
box-sizing: border-box
|
||||
|
||||
|
|
@ -104,7 +104,7 @@
|
|||
color: unset
|
||||
|
||||
.registered
|
||||
background: $grad-special
|
||||
background: vars.$grad-special
|
||||
color: transparent
|
||||
-webkit-background-clip: text
|
||||
background-clip: text
|
||||
|
|
@ -121,14 +121,14 @@
|
|||
width: 5%
|
||||
min-width: 20px
|
||||
|
||||
@media (max-width: $w-mobile)
|
||||
@media (max-width: vars.$w-mobile)
|
||||
font-size: 0.9rem
|
||||
|
||||
.accuracy
|
||||
display: none
|
||||
|
||||
&.alternate
|
||||
background-color: $ov-light
|
||||
background-color: vars.$ov-light
|
||||
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -156,7 +156,7 @@
|
|||
</main>
|
||||
|
||||
<style lang="sass">
|
||||
@import "../../vars"
|
||||
@use "../../vars"
|
||||
|
||||
.fields
|
||||
display: flex
|
||||
|
|
@ -194,7 +194,7 @@
|
|||
img
|
||||
max-width: 100px
|
||||
max-height: 100px
|
||||
border-radius: $border-radius
|
||||
border-radius: vars.$border-radius
|
||||
object-fit: cover
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -294,13 +294,13 @@
|
|||
</main>
|
||||
|
||||
<style lang="sass">
|
||||
@import "../vars"
|
||||
@use "../vars"
|
||||
|
||||
#user-home
|
||||
.user-pfp
|
||||
display: flex
|
||||
align-items: flex-end
|
||||
gap: $gap
|
||||
gap: vars.$gap
|
||||
margin-top: -72px
|
||||
position: relative
|
||||
|
||||
|
|
@ -319,7 +319,7 @@
|
|||
|
||||
.setting-icon
|
||||
font-size: 1.5rem
|
||||
color: $c-main
|
||||
color: vars.$c-main
|
||||
cursor: pointer
|
||||
display: flex
|
||||
align-items: center
|
||||
|
|
@ -334,10 +334,10 @@
|
|||
.pfp
|
||||
width: 100px
|
||||
height: 100px
|
||||
border-radius: $border-radius
|
||||
border-radius: vars.$border-radius
|
||||
object-fit: cover
|
||||
|
||||
@media (max-width: $w-mobile)
|
||||
@media (max-width: vars.$w-mobile)
|
||||
.user-pfp
|
||||
margin-top: -68px
|
||||
h2
|
||||
|
|
@ -349,7 +349,7 @@
|
|||
|
||||
.info-bottom, .info-top, .other-info
|
||||
display: flex
|
||||
gap: $gap
|
||||
gap: vars.$gap
|
||||
|
||||
> div
|
||||
display: flex
|
||||
|
|
@ -361,7 +361,7 @@
|
|||
|
||||
// character spacing
|
||||
letter-spacing: 0.1em
|
||||
color: $c-main
|
||||
color: vars.$c-main
|
||||
|
||||
.info-bottom
|
||||
width: max-content
|
||||
|
|
@ -376,7 +376,7 @@
|
|||
|
||||
.scoring-info
|
||||
display: flex
|
||||
gap: $gap
|
||||
gap: vars.$gap
|
||||
max-height: 250px
|
||||
|
||||
.chart
|
||||
|
|
@ -408,7 +408,7 @@
|
|||
opacity: 0.5
|
||||
user-select: none
|
||||
|
||||
@media (max-width: $w-mobile)
|
||||
@media (max-width: vars.$w-mobile)
|
||||
flex-direction: column
|
||||
max-height: unset
|
||||
|
||||
|
|
@ -429,12 +429,12 @@
|
|||
.activity-info
|
||||
display: flex
|
||||
flex-direction: column
|
||||
gap: $gap
|
||||
gap: vars.$gap
|
||||
|
||||
#cal-heatmap
|
||||
overflow-x: auto
|
||||
|
||||
@media (max-width: $w-mobile)
|
||||
@media (max-width: vars.$w-mobile)
|
||||
#cal-heatmap
|
||||
width: 100%
|
||||
|
||||
|
|
@ -453,17 +453,17 @@
|
|||
display: flex
|
||||
flex-direction: column
|
||||
flex-wrap: wrap
|
||||
gap: $gap
|
||||
gap: vars.$gap
|
||||
|
||||
> div.alt
|
||||
background-color: rgba(white, 0.03)
|
||||
border-radius: $border-radius
|
||||
border-radius: vars.$border-radius
|
||||
|
||||
// Image and song info
|
||||
> div
|
||||
display: flex
|
||||
align-items: center
|
||||
gap: $gap
|
||||
gap: vars.$gap
|
||||
padding-right: 16px
|
||||
max-width: 100%
|
||||
box-sizing: border-box
|
||||
|
|
@ -471,7 +471,7 @@
|
|||
img
|
||||
width: 50px
|
||||
height: 50px
|
||||
border-radius: $border-radius
|
||||
border-radius: vars.$border-radius
|
||||
object-fit: cover
|
||||
|
||||
// Song info and score
|
||||
|
|
@ -493,7 +493,7 @@
|
|||
> div:last-child
|
||||
white-space: nowrap
|
||||
|
||||
@media (max-width: $w-mobile)
|
||||
@media (max-width: vars.$w-mobile)
|
||||
flex-direction: column
|
||||
gap: 0
|
||||
|
||||
|
|
@ -511,7 +511,7 @@
|
|||
|
||||
.rank-S
|
||||
// Gold green gradient on text
|
||||
background: $grad-special
|
||||
background: vars.$grad-special
|
||||
-webkit-background-clip: text
|
||||
color: transparent
|
||||
|
||||
|
|
@ -526,7 +526,7 @@
|
|||
text-align: center
|
||||
background: rgba(var(--lv-color), 0.6)
|
||||
padding: 0 6px
|
||||
border-radius: $border-radius
|
||||
border-radius: vars.$border-radius
|
||||
margin-right: 10px
|
||||
|
||||
span
|
||||
|
|
@ -544,5 +544,5 @@
|
|||
span.increased
|
||||
&:before
|
||||
content: "+"
|
||||
color: $c-good
|
||||
color: vars.$c-good
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -157,7 +157,7 @@
|
|||
</main>
|
||||
|
||||
<style lang="sass">
|
||||
@import "../vars"
|
||||
@use "../vars"
|
||||
|
||||
.login-form
|
||||
display: flex
|
||||
|
|
@ -171,7 +171,7 @@
|
|||
align-items: center
|
||||
|
||||
#home
|
||||
color: $c-main
|
||||
color: vars.$c-main
|
||||
position: relative
|
||||
width: 100%
|
||||
height: 100%
|
||||
|
|
@ -185,7 +185,7 @@
|
|||
flex-direction: column
|
||||
justify-content: center
|
||||
|
||||
margin-top: -$nav-height
|
||||
margin-top: -(vars.$nav-height)
|
||||
|
||||
// Content container
|
||||
> div
|
||||
|
|
@ -196,10 +196,10 @@
|
|||
|
||||
// Switching state container
|
||||
> div
|
||||
transition: $transition
|
||||
transition: vars.$transition
|
||||
|
||||
#title
|
||||
font-family: Quicksand, $font
|
||||
font-family: Quicksand, vars.$font
|
||||
user-select: none
|
||||
|
||||
// Gap between text characters
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
Loading…
Reference in New Issue