Oliver/Secret-Hitler-Online
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Convert all Stylus into CSS and add CSS var def file

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

104
src/App.vue
View file

@ -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>