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; $primary-text-color: #ffffff;
$error-text-color: #ff8000; $error-text-color: #ff8000;
// Box // Box
$primary-box-background-color: #6040c0; $primary-box-background-color: #282838;
$primary-box-border-color: #c0c040; $primary-box-border-color: #ffffff;
$primary-box-text-color: #ffff80; $primary-box-text-color: #ffffff;
$primary-box-hover-background-color: #8040e0; $primary-box-hover-background-color: #8040e0;
$primary-box-hover-text-color: #ffffff; $primary-box-hover-text-color: #ffffff;
@ -25,9 +25,9 @@ $secondary-box-disabled-text-color: #606060;
// Button // Button
$button-background-color: #40a020; $button-background-color: #00a0e0;
$button-border-color: #c0c060; $button-border-color: #007098;
$button-text-color: #ffff80; $button-text-color: #304048;
$button-hover-background-color: #60c040; $button-hover-background-color: #60c040;
$button-hover-border-color: #ffffc0; $button-hover-border-color: #ffffc0;
@ -41,3 +41,13 @@ $button-secondary-background-color: #808040;
$button-secondary-text-color: #808040; $button-secondary-text-color: #808040;
$button-secondary-border-color: #ffffff; $button-secondary-border-color: #ffffff;
$button-secondary-hover-text-color: #c0c080; $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'; @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; background-color: $button-background-color;
color: $button-text-color; color: $button-text-color;
text-align: center; text-align: center;
font-family: Dosis; font-family: $secondary-font;
font-weight: bold; font-weight: bold;
font-size: 24px; font-size: 24px;
cursor: pointer; cursor: pointer;

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

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

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

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

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

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

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

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

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

@ -91,7 +91,7 @@ export default {
&__title { &__title {
color: $primary-box-text-color; color: $primary-box-text-color;
font-family: "Wendy One"; font-family: "$primary-font";
font-size: 48px; font-size: 48px;
} }
@ -101,7 +101,7 @@ export default {
background-color: $primary-box-background-color; background-color: $primary-box-background-color;
border-radius: 0 0 32px 32px; border-radius: 0 0 32px 32px;
color: $primary-box-text-color; color: $primary-box-text-color;
font-family: Dosis; font-family: $secondary-font;
font-size: 32px; 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; border-bottom: 1px solid $primary-box-border-color;
button { button {
font-family: Dosis; font-family: $secondary-font;
margin: 0 2px; margin: 0 2px;
padding: 0 1rem; padding: 0 1rem;
font-size: 18px; font-size: 18px;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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