Convert all Stylus into CSS and add CSS var def file
This commit is contained in:
Oliver-Akins
parent
51769bedd1
commit
ec98480917
5 changed files with 158 additions and 110 deletions
104
src/App.vue
104
src/App.vue
|
|
@ -95,88 +95,92 @@ export default {
|
|||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
@import "theme.styl"
|
||||
@import "./css/animations.css"
|
||||
<style>
|
||||
@import "./css/colours.css";
|
||||
@import "./css/animations.css";
|
||||
|
||||
html, body, #app {
|
||||
font-family: $fonts
|
||||
font-style: normal
|
||||
overflow: hidden
|
||||
padding: 0
|
||||
margin: 0
|
||||
font-family: var(--fonts);
|
||||
font-style: normal;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
letter-spacing: var(--title-letter-spacing);
|
||||
}
|
||||
|
||||
p {
|
||||
letter-spacing: var(--body-letter-spacing);
|
||||
}
|
||||
|
||||
#app {
|
||||
background-color: $main-background-colour
|
||||
color: $main-text-colour
|
||||
height: 100vh
|
||||
width: 100vw
|
||||
background-color: var(--main-background-colour);
|
||||
color: var(--main-text-colour);
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
div {
|
||||
margin: 0 auto
|
||||
}
|
||||
#app > div {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.alert-bar {
|
||||
justify-content: center
|
||||
position: absolute
|
||||
display: flex
|
||||
padding: 3px
|
||||
width: 100vw
|
||||
z-index: 1
|
||||
left: 0
|
||||
top: 0
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
padding: 3px;
|
||||
width: 100vw;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.alert-bar.error {
|
||||
background-color: $error-background-colour
|
||||
color: $error-text-colour
|
||||
background-color: var(--error-background-colour);
|
||||
color: var(--error-text-colour);
|
||||
}
|
||||
.alert-bar.warning {
|
||||
background-color: $warning-background-colour
|
||||
color: $warning-text-colour
|
||||
background-color: var(--warning-background-colour);
|
||||
color: var(--warning-text-colour);
|
||||
}
|
||||
.alert-bar.info {
|
||||
background-color: $info-background-colour
|
||||
color: $info-text-colour
|
||||
background-color: var(info-background-colour);
|
||||
color: var(info-text-colour);
|
||||
}
|
||||
|
||||
.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"], button {
|
||||
background-color: var(--input-background);
|
||||
border-radius: var(--input-border-radius);
|
||||
border-color: var(--input-border-colour);
|
||||
border-width: var(--input-border-width);
|
||||
color: var(--input-text);
|
||||
border-style: solid;
|
||||
text-align: center;
|
||||
padding: 10px 15px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
@extend .input
|
||||
}
|
||||
input[type="text"].warning {
|
||||
border-color: $input-border-colour-warning
|
||||
border-color: var(--input-border-colour-warning);
|
||||
}
|
||||
input[type="text"].error {
|
||||
border-color: $input-border-colour-error
|
||||
border-color: var(--input-border-colour-error);
|
||||
}
|
||||
input[type="text"]:focus {
|
||||
border-color: $input-border-colour-focus
|
||||
border-color: var(--input-border-colour-focus);
|
||||
}
|
||||
|
||||
button {
|
||||
@extend .input
|
||||
font-family: $fonts
|
||||
letter-spacing: $input-letter-spacing
|
||||
letter-spacing: var(--input-letter-spacing);
|
||||
font-family: var(--fonts);
|
||||
font-size: 17px
|
||||
}
|
||||
button:hover {
|
||||
background-color: $input-background-hover
|
||||
background-color: var(--input-background-hover);
|
||||
}
|
||||
button:active {
|
||||
background-color: $input-background-active
|
||||
background-color: var(--input-background-active);
|
||||
}
|
||||
</style>
|
||||
67
src/css/colours.css
Normal file
67
src/css/colours.css
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
/* Import all the fonts and whatnot */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Germania+One&display=swap");
|
||||
|
||||
:root {
|
||||
--fonts: 'Germania One', sans-serif;
|
||||
|
||||
/* General Colours */
|
||||
--facist-red: #9d5757;
|
||||
--liberal-blue: #6592bc;
|
||||
|
||||
--title-letter-spacing: 2px;
|
||||
--body-letter-spacing: 1px;
|
||||
|
||||
/***********************************************************/
|
||||
/* Card Colours */
|
||||
--main-background-colour: #23272A;
|
||||
--main-text-colour: #99AAB5;
|
||||
|
||||
--card-background-colour: #23272A;
|
||||
--card-text-colour: var(--main-text-colour);;
|
||||
|
||||
--on-card-background-colour: #2C2F33;
|
||||
--on-card-text-colour: var(--main-text-colour);
|
||||
/***********************************************************/
|
||||
|
||||
--error-background-colour: #FF0000;
|
||||
--error-text-colour: white;
|
||||
|
||||
--warning-background-colour: #DBB400;
|
||||
--warning-text-colour: black;
|
||||
|
||||
--info-background-colour: #7289DA;
|
||||
--info-text-colour: black;
|
||||
|
||||
/***********************************************************/
|
||||
/* Styling for inputs (not all input types use all values) */
|
||||
|
||||
/* general */
|
||||
--input-letter-spacing: 1px;
|
||||
--input-border-width: 2px;
|
||||
--input-border-radius: 7px;
|
||||
|
||||
/* background colours */
|
||||
--input-background: var(--on-card-background-colour);
|
||||
--input-background-hover: #424242;
|
||||
--input-background-active: #4a4a4a;
|
||||
--input-background-focus: var(--input-background);
|
||||
--input-background-warning: var(--input-background);
|
||||
--input-background-error: var(--input-background);
|
||||
|
||||
/* font colours */
|
||||
--input-text: var(--main-text-colour);
|
||||
--input-text-hover: var(--input-text);
|
||||
--input-text-active: var(--input-text);
|
||||
--input-text-focus: var(--input-text);
|
||||
--input-text-warning: var(--input-text);
|
||||
--input-text-error: var(--input-text);
|
||||
|
||||
/* border colours */
|
||||
--input-border-colour: transparent;
|
||||
--input-border-colour-hover: transparent;
|
||||
--input-border-colour-active: transparent;
|
||||
--input-border-colour-focus: var(--liberal-blue);
|
||||
--input-border-colour-warning: transparent;
|
||||
--input-border-colour-error: var(--fascist-red);
|
||||
/***********************************************************/
|
||||
}
|
||||
|
|
@ -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
|
||||
color: var(--main-text-colour);
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
height: 100vh;
|
||||
width: 50vw;
|
||||
}
|
||||
|
||||
h1, h3 {
|
||||
letter-spacing: $title-letter-spacing
|
||||
}
|
||||
#game_code_entry p {
|
||||
letter-spacing: var(--body-letter-spacing);
|
||||
}
|
||||
|
||||
p {
|
||||
letter-spacing: $body-letter-spacing
|
||||
}
|
||||
#game_code_entry label {
|
||||
font-size: 1.2em
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
width: 90vw
|
||||
}
|
||||
}
|
||||
</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 input[type="text"] {
|
||||
margin-bottom: 10px;
|
||||
margin-left: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
#game_code_entry { width: 90vw; }
|
||||
}
|
||||
</style>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue