Add styling
This commit is contained in:
parent
c0a14ed508
commit
9f513d8a1b
3 changed files with 77 additions and 2 deletions
34
src/App.vue
34
src/App.vue
|
|
@ -40,8 +40,42 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus">
|
<style lang="stylus">
|
||||||
|
@import "theme.styl"
|
||||||
|
|
||||||
|
html, body, #app {
|
||||||
|
font-family: $fonts
|
||||||
|
font-style: normal
|
||||||
|
overflow: hidden
|
||||||
|
padding: 0
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
|
||||||
#app {
|
#app {
|
||||||
|
background-color: $main-background-colour
|
||||||
height: 100vh
|
height: 100vh
|
||||||
width: 100vw
|
width: 100vw
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.input {
|
||||||
|
background-color: $input-background
|
||||||
|
border-radius: $input-border-radius
|
||||||
|
border-color: $input-border-colour
|
||||||
|
border-width: $input-border-width
|
||||||
|
border-style: solid
|
||||||
|
text-align: center
|
||||||
|
padding: 10px 15px
|
||||||
|
color: $input-text
|
||||||
|
outline: none
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="text"] {
|
||||||
|
@extend .input
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
@extend .input
|
||||||
|
font-family: $fonts
|
||||||
|
letter-spacing: $input-letter-spacing
|
||||||
|
font-size: 17px
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -38,14 +38,32 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus">
|
<style lang="stylus">
|
||||||
|
@import "../theme.styl"
|
||||||
|
|
||||||
#websocket_entry {
|
#websocket_entry {
|
||||||
text-align: center
|
text-align: center
|
||||||
|
margin: 0 auto
|
||||||
height: 100vh
|
height: 100vh
|
||||||
width: 33vw
|
width: 33vw
|
||||||
margin: 0 auto
|
color: $main-text-colour
|
||||||
|
|
||||||
|
h1, h3 {
|
||||||
|
letter-spacing: $title-letter-spacing
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
letter-spacing: $body-letter-spacing
|
||||||
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 600px) {
|
@media screen and (max-width: 600px) {
|
||||||
width: 90vw
|
width: 90vw
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<style lang="stylus" scoped>
|
||||||
|
@import "../theme.styl"
|
||||||
|
|
||||||
|
input[type="text"] {
|
||||||
|
margin-bottom: 10px
|
||||||
|
}
|
||||||
|
</style>
|
||||||
23
src/theme.styl
Normal file
23
src/theme.styl
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
/* Import all the fonts and whatnot */
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Germania+One&display=swap');
|
||||||
|
$fonts = 'Germania One', sans-serif
|
||||||
|
|
||||||
|
$title-letter-spacing = 2px
|
||||||
|
$body-letter-spacing = 1px
|
||||||
|
|
||||||
|
$main-background-colour = #23272A
|
||||||
|
$main-text-colour = #99AAB5
|
||||||
|
|
||||||
|
/* Styling for inputs (not all input types use all values) */
|
||||||
|
$input-background = #2C2F33
|
||||||
|
$input-background-hover = $input-background
|
||||||
|
$input-background-active = $input-background
|
||||||
|
$input-text = $main-text-colour
|
||||||
|
$input-text-hover = $input-text
|
||||||
|
$input-text-active = $input-text
|
||||||
|
$input-letter-spacing = 1px
|
||||||
|
$input-border-width = 2px
|
||||||
|
$input-border-radius = 7px
|
||||||
|
$input-border-colour = transparent
|
||||||
|
$input-border-colour-hover = transparent
|
||||||
|
$input-border-colour-active = transparent
|
||||||
Loading…
Add table
Add a link
Reference in a new issue