mirror of
https://github.com/Project-Redacted/Highscores-Server.git
synced 2025-06-05 17:53:12 +00:00
Sassy
This commit is contained in:
parent
62945c943d
commit
ebdef07840
7 changed files with 222 additions and 127 deletions
|
|
@ -1 +1 @@
|
|||
@import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700&display=swap");:root{--black:21,21,21;--white:232,227,227;--primary:213,214,130;--secondary:185,77,77;--gold:255,222,70;--silver:229,220,206;--bronze:193,145,69;--darkBlue:9,9,39}*{box-sizing:border-box;font-family:'Merriweather',serif}html{margin:0;padding:0}body{margin:0;padding:0;display:flex;flex-direction:row;background-color:RGB(var(--darkBlue));color:RGB(var(--white))}.background{width:100%;height:100%;object-fit:cover;position:absolute;z-index:1}.app{margin:0 auto;padding:2rem;width:800px;min-height:100vh;position:relative;display:flex;flex-direction:column;background-color:rgba(var(--darkBlue),0.9);z-index:2}.app>table{width:100%}.app .center-text{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.app .center-text>h2{margin:0;text-align:center;font-size:2em;color:RGB(var(--white))}.app .center-text>p{margin:0;text-align:center;font-size:1em;color:RGB(var(--white))}.app .auth{margin:auto 1rem;padding:1rem;display:flex;flex-direction:column;background-color:rgba(var(--darkBlue),0.5);border-radius:2px}.app .auth>h2{margin:0 0 1rem 0;font-size:1.3em;color:RGB(var(--white))}.title{margin-bottom:2rem;width:100%;height:auto;text-align:center}.subtitle{margin-bottom:1rem;padding:0;text-align:center;font-weight:bolder;font-size:1.2em;color:RGB(var(--secondary))}.subtitle>span{padding:0 .1rem;color:transparent;background:RGB(var(--secondary))}nav{margin:0;padding:0;height:3rem;display:flex;flex-direction:row;justify-content:center}nav>span{width:100%}nav>a{margin:auto .25rem;padding:.5rem 1rem;text-decoration:none;white-space:nowrap;color:RGB(var(--primary))}nav>a.button{text-decoration:none;background-color:transparent;color:RGB(var(--white));border-radius:2px;transition:background-color .2s ease-in-out,box-shadow .2s ease-in-out,transform .2s ease-in-out}nav>a.button:hover{background-color:RGBA(var(--white),0.3);transform:translateY(-0.1rem)}nav>a.button.primary{text-decoration:none;background-color:transparent;color:RGB(var(--primary));border-radius:2px;transition:background-color .2s ease-in-out,box-shadow .2s ease-in-out,transform .2s ease-in-out}nav>a.button.primary:hover{background-color:RGBA(var(--primary),0.3);transform:translateY(-0.1rem)}nav>a.button.secondary{text-decoration:none;background-color:transparent;color:RGB(var(--secondary));border-radius:2px;transition:background-color .2s ease-in-out,box-shadow .2s ease-in-out,transform .2s ease-in-out}nav>a.button.secondary:hover{background-color:RGBA(var(--secondary),0.3);transform:translateY(-0.1rem)}form{display:flex;flex-direction:column}form>input{margin:0 0 1rem 0;padding:.5rem 1rem;border:1px solid RGB(var(--white));border-radius:2px;background-color:RGB(var(--darkBlue));color:RGB(var(--white))}form>input:focus{outline:none;border-color:RGB(var(--primary))}form>input.error{border-color:RGB(var(--secondary))}form>button{margin:0;padding:.5rem 1rem;font-weight:bolder;border:transparent;border-radius:2px;background-color:RGB(var(--primary));color:RGB(var(--black))}form>button:focus-visible,form>button:hover{outline:none;background-color:RGBA(var(--primary),0.3);color:RGB(var(--primary))}form>button.disabled{pointer-events:none;opacity:.5}form>button.secondary{background-color:RGB(var(--secondary));color:RGB(var(--black))}form>button.secondary:focus-visible,form>button.secondary:hover{background-color:RGBA(var(--secondary),0.3);color:RGB(var(--secondary))}
|
||||
@import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700&display=swap");:root{--black:21,21,21;--white:232,227,227;--primary:213,214,130;--secondary:185,77,77;--gold:255,222,70;--silver:229,220,206;--bronze:193,145,69;--darkBlue:9,9,39}*{box-sizing:border-box;font-family:'Merriweather',serif}html{margin:0;padding:0}body{margin:0;padding:0;display:flex;flex-direction:row;background-color:RGB(var(--darkBlue));color:RGB(var(--white))}.background{width:100%;height:100%;object-fit:cover;position:absolute;z-index:1}.app{margin:0 auto;padding:0;width:800px;min-height:100vh;position:relative;display:flex;flex-direction:column;background-color:rgba(var(--darkBlue),0.7);z-index:2}.app>table{width:100%}header{padding:1rem;background-color:RGBA(var(--darkBlue),0.7)}header>img{margin-bottom:2rem;width:100%;height:auto;text-align:center}header>nav{margin:0;padding:0;height:3rem;display:flex;flex-direction:row;justify-content:center}header>nav>span{width:100%}header>nav>a{margin:auto .25rem;padding:.5rem 1rem;text-decoration:none;white-space:nowrap;color:RGB(var(--primary))}header>nav>a.button{text-decoration:none;background-color:transparent;color:RGB(var(--white));border-radius:2px;transition:background-color .2s ease-in-out,box-shadow .2s ease-in-out,transform .2s ease-in-out}header>nav>a.button:hover{background-color:RGBA(var(--white),0.3);transform:translateY(-0.1rem)}header>nav>a.button.primary{text-decoration:none;background-color:transparent;color:RGB(var(--primary));border-radius:2px;transition:background-color .2s ease-in-out,box-shadow .2s ease-in-out,transform .2s ease-in-out}header>nav>a.button.primary:hover{background-color:RGBA(var(--primary),0.3);transform:translateY(-0.1rem)}header>nav>a.button.secondary{text-decoration:none;background-color:transparent;color:RGB(var(--secondary));border-radius:2px;transition:background-color .2s ease-in-out,box-shadow .2s ease-in-out,transform .2s ease-in-out}header>nav>a.button.secondary:hover{background-color:RGBA(var(--secondary),0.3);transform:translateY(-0.1rem)}.flash{display:flex;flex-direction:column;justify-content:center;align-items:center}.flash>p{margin:.4rem 0 0;padding:.75rem 1rem;width:100%;position:relative;border-left:RGB(var(--secondary)) .25rem solid;background-color:RGB(var(--darkBlue));color:RGB(var(--secondary))}main{padding:1rem;height:100%;display:flex;flex-direction:column}main .center-text{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}main .center-text>h2{margin:0;text-align:center;font-size:2em;color:RGB(var(--white))}main .center-text>p{margin:0;text-align:center;font-size:1em;color:RGB(var(--white))}main .auth{margin:auto 0;padding:1rem;display:flex;flex-direction:column;background-color:rgba(var(--darkBlue),0.7);border-radius:2px}main .auth>h2{margin:0 0 1rem 0;font-size:1.3em;color:RGB(var(--white))}main form{display:flex;flex-direction:column}main form>input{margin:0 0 1rem 0;padding:.75rem 1rem;border:1px solid RGB(var(--white));border-radius:2px;background-color:RGB(var(--darkBlue));color:RGB(var(--white))}main form>input:focus{outline:none;border-color:RGB(var(--primary))}main form>input.error{border-color:RGB(var(--secondary))}main form>button{margin:0;padding:.75rem 1rem;font-weight:bolder;border:transparent;border-radius:2px;background-color:RGB(var(--primary));color:RGB(var(--black))}main form>button:focus-visible,main form>button:hover{outline:none;background-color:RGBA(var(--primary),0.3);color:RGB(var(--primary))}main form>button.disabled{pointer-events:none;opacity:.5}main form>button.secondary{background-color:RGB(var(--secondary));color:RGB(var(--black))}main form>button.secondary:focus-visible,main form>button.secondary:hover{background-color:RGBA(var(--secondary),0.3);color:RGB(var(--secondary))}footer{padding:.5rem 1rem;width:100%;display:flex;flex-direction:row;background-color:RGBA(var(--darkBlue),0.7)}footer>p{margin:0;width:100%;text-align:center;font-size:.8em;white-space:nowrap;color:RGB(var(--white))}footer>p>a{color:RGB(var(--secondary));text-decoration:none}footer>p>a:hover{text-decoration:underline}
|
||||
|
|
@ -58,7 +58,7 @@ body
|
|||
|
||||
.app
|
||||
margin: 0 auto
|
||||
padding: 2rem
|
||||
padding: 0
|
||||
|
||||
width: 800px
|
||||
min-height: 100vh
|
||||
|
|
@ -67,12 +67,78 @@ body
|
|||
display: flex
|
||||
flex-direction: column
|
||||
|
||||
background-color: rgba($darkBlue, 0.9)
|
||||
background-color: rgba($darkBlue, 0.7)
|
||||
z-index: 2
|
||||
|
||||
> table
|
||||
width: 100%
|
||||
|
||||
header
|
||||
padding: 1rem
|
||||
|
||||
background-color: RGBA($darkBlue, 0.7)
|
||||
|
||||
> img
|
||||
margin-bottom: 2rem
|
||||
width: 100%
|
||||
height: auto
|
||||
text-align: center
|
||||
|
||||
> nav
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
height: 3rem
|
||||
|
||||
display: flex
|
||||
flex-direction: row
|
||||
justify-content: center
|
||||
|
||||
> span
|
||||
width: 100%
|
||||
|
||||
> a
|
||||
margin: auto 0.25rem
|
||||
padding: 0.5rem 1rem
|
||||
|
||||
text-decoration: none
|
||||
white-space: nowrap
|
||||
|
||||
color: RGB($primary)
|
||||
|
||||
&.button
|
||||
@include button($white)
|
||||
|
||||
&.primary
|
||||
@include button($primary)
|
||||
|
||||
&.secondary
|
||||
@include button($secondary)
|
||||
|
||||
.flash
|
||||
display: flex
|
||||
flex-direction: column
|
||||
justify-content: center
|
||||
align-items: center
|
||||
|
||||
> p
|
||||
margin: 0.4rem 0 0
|
||||
padding: 0.75rem 1rem
|
||||
|
||||
width: 100%
|
||||
position: relative
|
||||
|
||||
border-left: RGB($secondary) 0.25rem solid
|
||||
background-color: RGB($darkBlue)
|
||||
color: RGB($secondary)
|
||||
|
||||
main
|
||||
padding: 1rem
|
||||
height: 100%
|
||||
|
||||
display: flex
|
||||
flex-direction: column
|
||||
|
||||
.center-text
|
||||
height: 100%
|
||||
|
||||
|
|
@ -94,13 +160,13 @@ body
|
|||
color: RGB($white)
|
||||
|
||||
.auth
|
||||
margin: auto 1rem
|
||||
margin: auto 0
|
||||
padding: 1rem
|
||||
|
||||
display: flex
|
||||
flex-direction: column
|
||||
|
||||
background-color: rgba($darkBlue, 0.5)
|
||||
background-color: rgba($darkBlue, 0.7)
|
||||
border-radius: 2px
|
||||
|
||||
> h2
|
||||
|
|
@ -108,105 +174,74 @@ body
|
|||
font-size: 1.3em
|
||||
color: RGB($white)
|
||||
|
||||
.title
|
||||
margin-bottom: 2rem
|
||||
width: 100%
|
||||
height: auto
|
||||
text-align: center
|
||||
form
|
||||
display: flex
|
||||
flex-direction: column
|
||||
|
||||
.subtitle
|
||||
margin-bottom: 1rem
|
||||
padding: 0
|
||||
> input
|
||||
margin: 0 0 1rem 0
|
||||
padding: 0.75rem 1rem
|
||||
|
||||
text-align: center
|
||||
font-weight: bolder
|
||||
font-size: 1.2em
|
||||
border: 1px solid RGB($white)
|
||||
border-radius: 2px
|
||||
|
||||
color: RGB($secondary)
|
||||
background-color: RGB($darkBlue)
|
||||
color: RGB($white)
|
||||
|
||||
> span
|
||||
padding: 0 0.1rem
|
||||
&:focus
|
||||
outline: none
|
||||
border-color: RGB($primary)
|
||||
|
||||
color: transparent
|
||||
background: RGB($secondary)
|
||||
&.error
|
||||
border-color: RGB($secondary)
|
||||
|
||||
nav
|
||||
margin: 0
|
||||
padding: 0
|
||||
> button
|
||||
margin: 0
|
||||
padding: 0.75rem 1rem
|
||||
|
||||
height: 3rem
|
||||
font-weight: bolder
|
||||
|
||||
display: flex
|
||||
flex-direction: row
|
||||
justify-content: center
|
||||
border: transparent
|
||||
border-radius: 2px
|
||||
|
||||
> span
|
||||
width: 100%
|
||||
|
||||
> a
|
||||
margin: auto 0.25rem
|
||||
padding: 0.5rem 1rem
|
||||
|
||||
text-decoration: none
|
||||
white-space: nowrap
|
||||
|
||||
color: RGB($primary)
|
||||
|
||||
&.button
|
||||
@include button($white)
|
||||
|
||||
&.primary
|
||||
@include button($primary)
|
||||
|
||||
&.secondary
|
||||
@include button($secondary)
|
||||
|
||||
form
|
||||
display: flex
|
||||
flex-direction: column
|
||||
|
||||
> input
|
||||
margin: 0 0 1rem 0
|
||||
padding: 0.5rem 1rem
|
||||
|
||||
border: 1px solid RGB($white)
|
||||
border-radius: 2px
|
||||
|
||||
background-color: RGB($darkBlue)
|
||||
color: RGB($white)
|
||||
|
||||
&:focus
|
||||
outline: none
|
||||
border-color: RGB($primary)
|
||||
|
||||
&.error
|
||||
border-color: RGB($secondary)
|
||||
|
||||
> button
|
||||
margin: 0
|
||||
padding: 0.5rem 1rem
|
||||
|
||||
font-weight: bolder
|
||||
|
||||
border: transparent
|
||||
border-radius: 2px
|
||||
|
||||
background-color: RGB($primary)
|
||||
color: RGB($black)
|
||||
|
||||
&:focus-visible, &:hover
|
||||
outline: none
|
||||
background-color: RGBA($primary, 0.3)
|
||||
color: RGB($primary)
|
||||
|
||||
&.disabled
|
||||
pointer-events: none
|
||||
opacity: 0.5
|
||||
|
||||
&.secondary
|
||||
background-color: RGB($secondary)
|
||||
background-color: RGB($primary)
|
||||
color: RGB($black)
|
||||
|
||||
&:focus-visible, &:hover
|
||||
background-color: RGBA($secondary, 0.3)
|
||||
color: RGB($secondary)
|
||||
outline: none
|
||||
background-color: RGBA($primary, 0.3)
|
||||
color: RGB($primary)
|
||||
|
||||
&.disabled
|
||||
pointer-events: none
|
||||
opacity: 0.5
|
||||
|
||||
&.secondary
|
||||
background-color: RGB($secondary)
|
||||
color: RGB($black)
|
||||
|
||||
&:focus-visible, &:hover
|
||||
background-color: RGBA($secondary, 0.3)
|
||||
color: RGB($secondary)
|
||||
|
||||
footer
|
||||
padding: 0.5rem 1rem
|
||||
width: 100%
|
||||
display: flex
|
||||
flex-direction: row
|
||||
background-color: RGBA($darkBlue, 0.7)
|
||||
|
||||
> p
|
||||
margin: 0
|
||||
width: 100%
|
||||
text-align: center
|
||||
font-size: 0.8em
|
||||
white-space: nowrap
|
||||
color: RGB($white)
|
||||
|
||||
> a
|
||||
color: RGB($secondary)
|
||||
text-decoration: none
|
||||
|
||||
&:hover
|
||||
text-decoration: underline
|
||||
Loading…
Add table
Add a link
Reference in a new issue