settel/knowyt
1
0
Fork 0
Code Issues Pull Requests Packages Releases Activity

css: update colors for start page (WIP)

Browse Source
This commit is contained in:
Settel 2022-07-17 20:45:49 +02:00
parent ad3c202951
commit adce61af4e
21 changed files with 68 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
client/src/assets/css/colors.scss
View File

@ -1,12 +1,12 @@
$primary-background-color: #402080;
$primary-background-color: #282838;
$primary-text-color: #ffffff;
$error-text-color: #ff8000;
// Box
$primary-box-background-color: #6040c0;
$primary-box-border-color: #c0c040;
$primary-box-text-color: #ffff80;
$primary-box-background-color: #282838;
$primary-box-border-color: #ffffff;
$primary-box-text-color: #ffffff;
$primary-box-hover-background-color: #8040e0;
$primary-box-hover-text-color: #ffffff;
@ -25,9 +25,9 @@ $secondary-box-disabled-text-color: #606060;
// Button
$button-background-color: #40a020;
$button-border-color: #c0c060;
$button-text-color: #ffff80;
$button-background-color: #00a0e0;
$button-border-color: #007098;
$button-text-color: #304048;
$button-hover-background-color: #60c040;
$button-hover-border-color: #ffffc0;
@ -41,3 +41,13 @@ $button-secondary-background-color: #808040;
$button-secondary-text-color: #808040;
$button-secondary-border-color: #ffffff;
$button-secondary-hover-text-color: #c0c080;
// Input
$input-background-color: $primary-background-color;
$input-text-color: #ffffff;
$input-border-color: #00a0e0;
$input-inactive-background-color: $input-background-color;
$input-inactive-text-color: $input-text-color;
$input-inactive-border-color: #ffffff;

3
client/src/assets/css/components.scss
View File

@ -1 +1,4 @@
@import './colors.scss';
$primary-font: 'Wendy One';
$secondary-font: 'Dosis';

2
client/src/components/Button.vue
View File

@ -27,7 +27,7 @@ export default {
background-color: $button-background-color;
color: $button-text-color;
text-align: center;
font-family: Dosis;
font-family: $secondary-font;
font-weight: bold;
font-size: 24px;
cursor: pointer;

2
client/src/components/CollectQuote.vue
View File

@ -89,7 +89,7 @@ export default {
&__title {
font-size: 32px;
font-family: "Wendy One";
font-family: "$primary-font";
margin: 48px 0 16px 48px;
}

8
client/src/components/CollectQuotesExplain.vue
View File

@ -114,7 +114,7 @@ export default {
border: 1px solid #ffffff;
border-radius: 8px;
background-color: $primary-background-color;
font-family: "Wendy One";
font-family: "$primary-font";
color: #ffffff;
cursor: pointer;
@ -126,12 +126,12 @@ export default {
&__explain {
margin-bottom: 40px;
font-size: 24px;
font-family: Dosis;
font-family: $secondary-font;
color: #ffffff;
}
&__example {
font-family: Dosis;
font-family: $secondary-font;
color: #ffffff;
&-title {
font-size: 24px;
@ -145,7 +145,7 @@ export default {
height: 8em;
}
&-text {
font-family: Dosis;
font-family: $secondary-font;
font-size: 24px;
color: #ffffff;
cursor: pointer;

2
client/src/components/ConfirmButton.vue
View File

@ -49,7 +49,7 @@ export default {
border: 4px solid $button-border-color;
border-radius: 8px;
color: $button-text-color;
font-family: Dosis;
font-family: $secondary-font;
font-weight: 800;
text-align: center;
cursor: pointer;

6
client/src/components/CreateTeam.vue
View File

@ -119,7 +119,7 @@ export default {
&__button {
display: inline;
font-family: Dosis;
font-family: $secondary-font;
font-weight: 800;
font-size: 24px;
color: $button-secondary-text-color;
@ -144,7 +144,7 @@ export default {
border: 1px solid $primary-box-border-color;
border-radius: 20px;
background-color: $primary-box-background-color;
font-family: Dosis;
font-family: $secondary-font;
font-size: 20px;
color: #ffffff;
@ -179,7 +179,7 @@ export default {
border: 1px solid #ffffff;
border-radius: 8px;
background-color: $primary-background-color;
font-family: "Wendy One";
font-family: "$primary-font";
color: #ffffff;
cursor: pointer;

4
client/src/components/Final.vue
View File

@ -91,7 +91,7 @@ export default {
&__title {
color: $primary-box-text-color;
font-family: "Wendy One";
font-family: "$primary-font";
font-size: 48px;
}
@ -101,7 +101,7 @@ export default {
background-color: $primary-box-background-color;
border-radius: 0 0 32px 32px;
color: $primary-box-text-color;
font-family: Dosis;
font-family: $secondary-font;
font-size: 32px;
}

2
client/src/components/GameControls.vue
View File

@ -93,7 +93,7 @@ export default {
border-bottom: 1px solid $primary-box-border-color;
button {
font-family: Dosis;
font-family: $secondary-font;
margin: 0 2px;
padding: 0 1rem;
font-size: 18px;

4
client/src/components/lobby.vue → client/src/components/Lobby.vue
View File

@ -32,6 +32,8 @@ export default {
</script>
<style lang="scss">
@import '~/assets/css/components';
.lobby {
display: flex;
width: 100%;
@ -41,7 +43,7 @@ export default {
flex-grow: 1;
margin-top: 60px;
text-align: center;
font-family: Dosis;
font-family: $secondary-font;
font-size: 24px;
color: #ffffff;
}

4
client/src/components/NoQuotesYet.vue
View File

@ -18,9 +18,11 @@ export default {
</script>
<style lang="scss">
@import '~/assets/css/components';
.no-quotes-yet {
width: 100%;
font-family: Dosis;
font-family: $secondary-font;
font-size: 18px;
text-align: center;
color: #ffffff;

15
client/src/components/PlayButton.vue
View File

@ -84,7 +84,7 @@ export default {
@import '~/assets/css/components';
.playbutton {
font-family: Dosis;
font-family: $secondary-font;
font-weight: 800;
font-size: 36px;
text-align: center;
@ -125,11 +125,20 @@ export default {
&__authinput {
display: inline;
height: 36px;
border: 4px solid $button-border-color;
border: 1px solid $input-inactive-border-color;
border-radius: 8px;
font-family: Dosis;
font-family: $secondary-font;
font-weight: 800;
font-size: 24px;
background-color: $input-inactive-background-color;
color: $input-inactive-text-color;
outline: none;
&:focus {
border: 1px solid $input-border-color;
background-color: $input-background-color;
color: $input-text-color;
}
}
&__errormessage {

2
client/src/components/Player.vue
View File

@ -35,7 +35,7 @@ export default {
&__row {
display: flex;
color: $secondary-box-text-color;
font-family: Dosis;
font-family: $secondary-font;
font-size: 18px;
&__idle {

2
client/src/components/Quote.vue
View File

@ -16,7 +16,7 @@ export default {
.quote {
&__quote {
text-align: justify;
font-family: Dosis;
font-family: $secondary-font;
font-size: 24px;
color: $primary-text-color;

2
client/src/components/ReadySet.vue
View File

@ -103,7 +103,7 @@ export default {
height: 600px;
line-height: 600px;
font-size: 100px;
font-family: 'Wendy One';
font-family: '$primary-font';
color: #ffff80;
text-align: center;
z-index: 10;

4
client/src/components/Source.vue
View File

@ -109,7 +109,7 @@ export default {
&__source {
width: 100%;
font-family: "Wendy One";
font-family: "$primary-font";
text-align: center;
white-space: nowrap;
overflow: hidden;
@ -129,7 +129,7 @@ export default {
border: 2px solid #ffffff;
border-radius: 14px;
color: #c0c060;
font-family: "Wendy One";
font-family: "$primary-font";
font-size: 16px;
&-count {

4
client/src/components/TitleBox.vue
View File

@ -25,7 +25,7 @@
&__titleborderbox1,
&__titleborderbox2,
&__titleborderbox3 {
border: 4px solid $primary-box-border-color;
border: 1px solid $primary-box-border-color;
border-radius: 16px;
background-color: $primary-box-background-color;
}
@ -53,7 +53,7 @@
}
&__title {
font-size: 64px;
font-family: 'Wendy One';
font-family: $primary-font;
color: $primary-box-text-color;
text-align: center;
}

8
client/src/components/admin/AdminEditPlayer.vue
View File

@ -84,7 +84,7 @@ export default {
@import '~/assets/css/components';
.admin-edit-player {
font-family: Dosis;
font-family: $secondary-font;
&__close {
float: right;
margin: 16px -16px 16px 16px;
@ -92,7 +92,7 @@ export default {
border: 1px solid #ffffff;
border-radius: 8px;
background-color: $primary-background-color;
font-family: "Wendy One";
font-family: "$primary-font";
color: #ffffff;
cursor: pointer;
@ -116,7 +116,7 @@ export default {
&__button-delete {
margin-left: 3em;
font-size: 16px;
font-family: Dosis;
font-family: $secondary-font;
color: #e06060;
cursor: pointer;
&:hover {
@ -126,7 +126,7 @@ export default {
&__button-generate-code {
margin-left: 3em;
font-size: 16px;
font-family: Dosis;
font-family: $secondary-font;
color: #d0d0d0;
cursor: pointer;
&:hover {

6
client/src/components/admin/AdminTile.vue
View File

@ -17,18 +17,20 @@ export default {
</script>
<style lang="scss">
@import '~/assets/css/components';
.admin-tile {
min-width: 240px;
margin: 16px;
&__title {
font-size: 32px;
font-family: Dosis;
font-family: $secondary-font;
border-bottom: 1px solid #ffffff;
margin-bottom: 16px;
}
&__body {
font-family: Dosis;
font-family: $secondary-font;
font-size: 18px;
}
}

2
client/src/pages/gamemaster.vue
View File

@ -94,7 +94,7 @@ export default {
border: 1px solid #ffffff;
border-radius: 8px;
background-color: $primary-background-color;
font-family: "Wendy One";
font-family: "$primary-font";
color: #ffffff;
cursor: pointer;

2
client/src/pages/index.vue
View File

@ -45,7 +45,7 @@ export default {
&__video {
margin: 2em 0;
text-align: center;
font-family: Dosis;
font-family: $secondary-font;
font-size: 24px;
font-weight: 800;
color: #808040;