Convert all Stylus into CSS and add CSS var def file

This commit is contained in:
Oliver-Akins 2020-10-05 22:46:54 -06:00
parent 51769bedd1
commit ec98480917
5 changed files with 158 additions and 110 deletions

View file

@ -71,40 +71,32 @@ export default {
}
</script>
<style lang="stylus">
@import "../theme.styl"
<style>
@import "../css/colours.css";
#game_code_entry {
text-align: center
margin: 0 auto
height: 100vh
width: 50vw
color: $main-text-colour
h1, h3 {
letter-spacing: $title-letter-spacing
}
p {
letter-spacing: $body-letter-spacing
}
@media screen and (max-width: 600px) {
width: 90vw
}
color: var(--main-text-colour);
text-align: center;
margin: 0 auto;
height: 100vh;
width: 50vw;
}
</style>
<style lang="stylus" scoped>
@import "../theme.styl"
#game_code_entry {
label {
font-size: 1.2em
}
input[type="text"] {
margin-bottom: 10px
margin-left: 10px
text-align: left
}
#game_code_entry p {
letter-spacing: var(--body-letter-spacing);
}
#game_code_entry label {
font-size: 1.2em
}
#game_code_entry input[type="text"] {
margin-bottom: 10px;
margin-left: 10px;
text-align: left;
}
@media screen and (max-width: 600px) {
#game_code_entry { width: 90vw; }
}
</style>

View file

@ -57,16 +57,16 @@ export default {
}
</script>
<style lang="stylus" scoped>
@import "../theme.styl"
<style scoped>
@import "../css/colours.css";
#game_type_choice {
text-align: center
width: 50vw
text-align: center;
width: 50vw;
}
button {
width: 100%
margin: 5px
width: 100%;
margin: 5px;
}
</style>

View file

@ -159,33 +159,18 @@ export default {
}
</script>
<style lang="stylus">
@import "../theme.styl"
<style scoped>
@import "../css/colours.css";
#websocket_entry {
text-align: center
margin: 0 auto
height: 100vh
width: 100vw
color: $main-text-colour
h1, h3 {
letter-spacing: $title-letter-spacing
}
p {
letter-spacing: $body-letter-spacing
}
@media screen and (max-width: 600px) {
width: 100vw
}
text-align: center;
margin: 0 auto;
height: 100vh;
width: 100vw;
color: var(--main-text-colour);
}
</style>
<style lang="stylus" scoped>
@import "../theme.styl"
input[type="text"] {
margin-bottom: 10px
margin-bottom: 10px;
}
</style>