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

use variables for colors

Browse Source
This commit is contained in:
Settel 2021-11-28 20:28:43 +01:00
parent 91541f78d4
commit f0057663e3
15 changed files with 84 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,9 +1,30 @@
$primary-background-color: #402080; $primary-background-color: #402080;
$primary-text-color: #ffffff;
$error-text-color: #ff8000;
$primary-box-color: #6040c0;
// Box
$primary-box-background-color: #6040c0;
$primary-box-border-color: #808040; $primary-box-border-color: #808040;
$primary-box-text-color: #ffff80; $primary-box-text-color: #ffff80;
$primary-box-hover-background-color: #8040e0;
$primary-box-hover-text-color: #ffffff;
$primary-box-animation-color: rgba(128, 128, 64, 0.5);
$secondary-box-text-color: #ffffff;
$secondary-box-border-color: #ffffff;
$secondary-box-background-color: rgba(64, 32, 128, 0.5);
$secondary-box-hover-background-color: #6040c0;
$secondary-box-hover-border-color: #ffffff;
$secondary-box-hover-text-color: #ffffff;
$secondary-box-disabled-text-color: #606060;
// Button
$button-background-color: #40a020; $button-background-color: #40a020;
$button-border-color: #c0c060; $button-border-color: #c0c060;
$button-text-color: #ffff80; $button-text-color: #ffff80;
@ -16,5 +37,7 @@ $button-disabled-background-color: #406020;
$button-disabled-border-color: #808030; $button-disabled-border-color: #808030;
$button-disabled-text-color: #808060; $button-disabled-text-color: #808060;
$button-secondary-background-color: #808040;
$button-secondary-text-color: #808040; $button-secondary-text-color: #808040;
$button-secondary-border-color: #ffffff;
$button-secondary-hover-text-color: #c0c080; $button-secondary-hover-text-color: #c0c080;

12
client/src/components/AddNewQuote.vue
View File

@ -27,19 +27,19 @@ export default {
&__button { &__button {
width: 100px; width: 100px;
height: 48px; height: 48px;
border: 4px solid #c0c060; background-color: $button-background-color;
border: 4px solid $button-border-color;
border-radius: 8px; border-radius: 8px;
color: #ffff80; color: $button-text-color;
background-color: #40a020;
font-size: 24px; font-size: 24px;
// font-family: Dosis;
font-weight: 800; font-weight: 800;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: #60c040; background-color: $button-hover-background-color;
color: #ffffc0; border-color: $button-hover-border-color;
color: $button-hover-text-color;
} }
} }
} }

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

@ -40,7 +40,7 @@ export default {
@import '~/assets/css/components'; @import '~/assets/css/components';
.collect-quote { .collect-quote {
color: #ffffff; color: $primary-text-color;
&__backdrop { &__backdrop {
position: fixed; position: fixed;
@ -58,9 +58,10 @@ export default {
top: 15%; top: 15%;
width: 80%; width: 80%;
height: 400px; height: 400px;
background-color: $primary-background-color; background-color: $primary-box-background-color;
border: 1px solid #ffffff; border: 4px solid $primary-box-border-color;
border-radius: 20px; border-radius: 20px;
color: $primary-box-text-color;
} }
&__quote-container { &__quote-container {
@ -71,7 +72,7 @@ export default {
top: 0; top: 0;
width: 50%; width: 50%;
height: 100%; height: 100%;
border-right: 1px solid #ffffff; border-right: 1px solid $primary-box-border-color;
overflow: hidden; overflow: hidden;
} }
@ -112,11 +113,12 @@ export default {
background: none; background: none;
border: 0; border: 0;
font-size: 24px; font-size: 24px;
color: #ffffff; color: $primary-box-text-color;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: #6040a0; background-color: $primary-box-hover-background-color;
color: $primary-box-hover-text-color;
border-radius: 16px; border-radius: 16px;
} }
} }
@ -132,19 +134,20 @@ export default {
right: 0; right: 0;
bottom: 0; bottom: 0;
margin: 48px; margin: 48px;
background-color: #40a020; background-color: $button-background-color;
width: 80px; width: 80px;
height: 48px; height: 48px;
border: 4px solid #c0c060; border: 4px solid $button-border-color;
border-radius: 8px; border-radius: 8px;
color: #ffff80; color: $button-text-color;
font-family: Dosis; font-family: Dosis;
font-size: 24px; font-size: 24px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: #60c040; background-color: $button-hover-background-color;
color: #ffffc0; border-color: $button-hover-border-color;
color: $button-hover-text-color;
} }
} }
} }

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

@ -89,7 +89,7 @@ export default {
padding: 0 40px; padding: 0 40px;
border: 1px solid white; border: 1px solid white;
border-radius: 20px; border-radius: 20px;
background-color: $primary-box-color; background-color: $primary-box-background-color;
} }
&__open-close-toggle { &__open-close-toggle {
@ -104,7 +104,7 @@ export default {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: $primary-box-color; background-color: $primary-box-background-color;
} }
} }

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

@ -39,10 +39,10 @@ export default {
width: 100px; width: 100px;
height: 32px; height: 32px;
padding: 4px 36px; padding: 4px 36px;
border: 4px solid #c0c060; background-color: $button-background-color;
border: 4px solid $button-border-color;
border-radius: 8px; border-radius: 8px;
color: #ffff80; color: $button-text-color;
background-color: #40a020;
font-family: Dosis; font-family: Dosis;
font-weight: 800; font-weight: 800;
text-align: center; text-align: center;
@ -58,11 +58,10 @@ export default {
} }
&:hover { &:hover {
border-color: #ffffc0; background-color: $button-hover-background-color;
background-color: #60c040; border-color: $button-hover-border-color;
color: #ffffc0; color: $button-hover-text-color;
} }
} }
} }
</style> </style>

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

@ -59,7 +59,7 @@ export default {
height: 100%; height: 100%;
padding: 4px; padding: 4px;
border-radius: 32px; border-radius: 32px;
background: linear-gradient(45deg, #8060c0 0, #8060c0 68%, #ffffff 70%, #8060c0 72%, #8060c0 100%); background: linear-gradient(45deg, $primary-box-border-color 0, $primary-box-border-color 68%, #ffffff 70%, $primary-box-border-color 72%, $primary-box-border-color 100%);
background-size: 1000% 1000%; background-size: 1000% 1000%;
animation: finals-gradient 10s linear infinite 5s; animation: finals-gradient 10s linear infinite 5s;
@ -83,13 +83,13 @@ export default {
height: 100px; height: 100px;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: $primary-background-color; background-color: $primary-box-background-color;
border-radius: 32px 32px 0 0; border-radius: 32px 32px 0 0;
margin-bottom: 4px; margin-bottom: 4px;
} }
&__title { &__title {
color: #ffffff; color: $primary-box-text-color;
font-family: "Wendy One"; font-family: "Wendy One";
font-size: 48px; font-size: 48px;
} }
@ -97,9 +97,9 @@ export default {
&__table-body { &__table-body {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: $primary-background-color; background-color: $primary-box-background-color;
border-radius: 0 0 32px 32px; border-radius: 0 0 32px 32px;
color: #ffffff; color: $primary-box-text-color;
font-family: Dosis; font-family: Dosis;
font-size: 32px; font-size: 32px;

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

@ -44,7 +44,7 @@ export default {
.gamecontrols { .gamecontrols {
padding: 8px 1em; padding: 8px 1em;
border-bottom: 1px solid #808080; border-bottom: 1px solid $primary-box-border-color;
button { button {
font-family: Dosis; font-family: Dosis;

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

@ -113,7 +113,7 @@ export default {
&__authinput { &__authinput {
display: inline; display: inline;
height: 36px; height: 36px;
border: 4px solid #c0c060; border: 4px solid $button-border-color;
border-radius: 8px; border-radius: 8px;
font-family: Dosis; font-family: Dosis;
font-weight: 800; font-weight: 800;
@ -146,7 +146,7 @@ export default {
&__errormessage { &__errormessage {
padding: 8px; padding: 8px;
font-size: 18px; font-size: 18px;
color: #ff8080; color: $error-text-color;
} }
} }
</style> </style>

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

@ -34,12 +34,12 @@ export default {
.player { .player {
&__row { &__row {
display: flex; display: flex;
color: #ffffff; color: $secondary-box-text-color;
font-family: Dosis; font-family: Dosis;
font-size: 18px; font-size: 18px;
&__idle { &__idle {
color: #606060; color: $secondary-box-disabled-text-color;
} }
} }

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

@ -17,8 +17,8 @@ export default {
.player-list { .player-list {
padding: 8px; padding: 8px;
border: 1px solid #ffffff; border: 1px solid $secondary-box-border-color;
border-radius: 10px; border-radius: 10px;
background-color: rgba(64, 32, 128, 0.5); background-color: $secondary-box-background-color;
} }
</style> </style>

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

@ -1,5 +1,5 @@
<template> <template>
<div class="quote"> <div class="quote" v-if="text">
<div class="quote__quote">{{ text }}</div> <div class="quote__quote">{{ text }}</div>
</div> </div>
</template> </template>
@ -18,7 +18,7 @@ export default {
text-align: justify; text-align: justify;
font-family: Dosis; font-family: Dosis;
font-size: 24px; font-size: 24px;
color: #ffffff; color: $primary-text-color;
&:before { &:before {
content: '„'; content: '„';

11
client/src/components/QuoteListItem.vue
View File

@ -34,7 +34,7 @@ export default {
display: flex; display: flex;
} }
&__quote { &__quote {
color: #ffffff; color: $primary-text-color;
} }
&__actions { &__actions {
display: flex; display: flex;
@ -44,16 +44,19 @@ export default {
width: 48px; width: 48px;
height: 48px; height: 48px;
margin-left: 16px; margin-left: 16px;
border: 1px solid #ffffff; background-color: $secondary-box-background-color;
border: 1px solid $secondary-box-border-color;
border-radius: 8px; border-radius: 8px;
text-align: center; text-align: center;
line-height: 48px; line-height: 48px;
font-size: 32px; font-size: 32px;
color: #ffffff; color: $secondary-box-text-color;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: $primary-box-color; background-color: $secondary-box-hover-background-color;
border-color: $secondary-box-hover-border-color;
color: $secondary-box-hover-text-color;
} }
&-edit::after { &-edit::after {

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

@ -67,9 +67,9 @@ export default {
transform: rotate(45deg); transform: rotate(45deg);
width: 370px; width: 370px;
height: 370px; height: 370px;
border: 15px solid #808040; background-color: $primary-box-background-color;
border: 15px solid $primary-box-border-color;
border-radius: 50px; border-radius: 50px;
background-color: $primary-box-color;
z-index: 5; z-index: 5;
} }
@ -80,7 +80,7 @@ export default {
width: 420px; width: 420px;
height: 420px; height: 420px;
border-radius: 150px; border-radius: 150px;
background-color: rgba(128,128,64,0.5); background-color: $primary-box-animation-color;
animation: spin-rev 5s linear infinite; animation: spin-rev 5s linear infinite;
z-index: 4; z-index: 4;
} }
@ -92,7 +92,7 @@ export default {
width: 420px; width: 420px;
height: 420px; height: 420px;
border-radius: 150px; border-radius: 150px;
background-color: rgba(128,128,64,0.5); background-color: $primary-box-animation-color;
z-index: 3; z-index: 3;
animation: spin 6s linear infinite; animation: spin 6s linear infinite;
} }

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

@ -78,10 +78,10 @@ export default {
max-width: 180px; max-width: 180px;
height: 1.4em; height: 1.4em;
padding: 4px; padding: 4px;
border: 1px solid #e0e0e0; border: 1px solid $secondary-box-border-color;
border-radius: 10px; border-radius: 10px;
background-color: $primary-box-color; background-color: $secondary-box-background-color;
color: #ffffff; color: $secondary-box-text-color;
&-selectable { &-selectable {
&:hover { &:hover {
@ -90,8 +90,8 @@ export default {
cursor: pointer; cursor: pointer;
} }
&.source__container__selected { &.source__container__selected {
background-color: #ffffff; background-color: $primary-text-color;
box-shadow: 0 0 10px #ffffff; box-shadow: 0 0 10px $primary-text-color;
} }
} }
@ -125,7 +125,7 @@ export default {
top: -16px; top: -16px;
width: 24px; width: 24px;
height: 24px; height: 24px;
background-color: $primary-box-color; background-color: $primary-box-background-color;
border: 2px solid #ffffff; border: 2px solid #ffffff;
border-radius: 14px; border-radius: 14px;
color: #c0c060; color: #c0c060;

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

@ -27,7 +27,7 @@
&__titleborderbox3 { &__titleborderbox3 {
border: 4px solid $primary-box-border-color; border: 4px solid $primary-box-border-color;
border-radius: 16px; border-radius: 16px;
background-color: $primary-box-color; background-color: $primary-box-background-color;
} }
&__titleborderbox1 { &__titleborderbox1 {
display: flex; display: flex;