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-text-color: #ffffff;
$error-text-color: #ff8000;
$primary-box-color: #6040c0;
// Box
$primary-box-background-color: #6040c0;
$primary-box-border-color: #808040;
$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-border-color: #c0c060;
$button-text-color: #ffff80;
@ -16,5 +37,7 @@ $button-disabled-background-color: #406020;
$button-disabled-border-color: #808030;
$button-disabled-text-color: #808060;
$button-secondary-background-color: #808040;
$button-secondary-text-color: #808040;
$button-secondary-border-color: #ffffff;
$button-secondary-hover-text-color: #c0c080;

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

@ -27,19 +27,19 @@ export default {
&__button {
width: 100px;
height: 48px;
border: 4px solid #c0c060;
background-color: $button-background-color;
border: 4px solid $button-border-color;
border-radius: 8px;
color: #ffff80;
background-color: #40a020;
color: $button-text-color;
font-size: 24px;
// font-family: Dosis;
font-weight: 800;
text-align: center;
cursor: pointer;
&:hover {
background-color: #60c040;
color: #ffffc0;
background-color: $button-hover-background-color;
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';
.collect-quote {
color: #ffffff;
color: $primary-text-color;
&__backdrop {
position: fixed;
@ -58,9 +58,10 @@ export default {
top: 15%;
width: 80%;
height: 400px;
background-color: $primary-background-color;
border: 1px solid #ffffff;
background-color: $primary-box-background-color;
border: 4px solid $primary-box-border-color;
border-radius: 20px;
color: $primary-box-text-color;
}
&__quote-container {
@ -71,7 +72,7 @@ export default {
top: 0;
width: 50%;
height: 100%;
border-right: 1px solid #ffffff;
border-right: 1px solid $primary-box-border-color;
overflow: hidden;
}
@ -112,11 +113,12 @@ export default {
background: none;
border: 0;
font-size: 24px;
color: #ffffff;
color: $primary-box-text-color;
cursor: pointer;
&:hover {
background-color: #6040a0;
background-color: $primary-box-hover-background-color;
color: $primary-box-hover-text-color;
border-radius: 16px;
}
}
@ -132,19 +134,20 @@ export default {
right: 0;
bottom: 0;
margin: 48px;
background-color: #40a020;
background-color: $button-background-color;
width: 80px;
height: 48px;
border: 4px solid #c0c060;
border: 4px solid $button-border-color;
border-radius: 8px;
color: #ffff80;
color: $button-text-color;
font-family: Dosis;
font-size: 24px;
cursor: pointer;
&:hover {
background-color: #60c040;
color: #ffffc0;
background-color: $button-hover-background-color;
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;
border: 1px solid white;
border-radius: 20px;
background-color: $primary-box-color;
background-color: $primary-box-background-color;
}
&__open-close-toggle {
@ -104,7 +104,7 @@ export default {
cursor: pointer;
&: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;
height: 32px;
padding: 4px 36px;
border: 4px solid #c0c060;
background-color: $button-background-color;
border: 4px solid $button-border-color;
border-radius: 8px;
color: #ffff80;
background-color: #40a020;
color: $button-text-color;
font-family: Dosis;
font-weight: 800;
text-align: center;
@ -58,11 +58,10 @@ export default {
}
&:hover {
border-color: #ffffc0;
background-color: #60c040;
color: #ffffc0;
background-color: $button-hover-background-color;
border-color: $button-hover-border-color;
color: $button-hover-text-color;
}
}
}
</style>

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

@ -59,7 +59,7 @@ export default {
height: 100%;
padding: 4px;
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%;
animation: finals-gradient 10s linear infinite 5s;
@ -83,13 +83,13 @@ export default {
height: 100px;
align-items: center;
justify-content: center;
background-color: $primary-background-color;
background-color: $primary-box-background-color;
border-radius: 32px 32px 0 0;
margin-bottom: 4px;
}
&__title {
color: #ffffff;
color: $primary-box-text-color;
font-family: "Wendy One";
font-size: 48px;
}
@ -97,9 +97,9 @@ export default {
&__table-body {
width: 100%;
height: 100%;
background-color: $primary-background-color;
background-color: $primary-box-background-color;
border-radius: 0 0 32px 32px;
color: #ffffff;
color: $primary-box-text-color;
font-family: Dosis;
font-size: 32px;

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

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

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

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

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

@ -34,12 +34,12 @@ export default {
.player {
&__row {
display: flex;
color: #ffffff;
color: $secondary-box-text-color;
font-family: Dosis;
font-size: 18px;
&__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 {
padding: 8px;
border: 1px solid #ffffff;
border: 1px solid $secondary-box-border-color;
border-radius: 10px;
background-color: rgba(64, 32, 128, 0.5);
background-color: $secondary-box-background-color;
}
</style>

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

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

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

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

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

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

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

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

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

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