From f0057663e3ddb478b0e05306349cfa245e97ec83 Mon Sep 17 00:00:00 2001 From: Settel Date: Sun, 28 Nov 2021 20:28:43 +0100 Subject: [PATCH] use variables for colors --- client/src/assets/css/colors.scss | 25 ++++++++++++++++++- client/src/components/AddNewQuote.vue | 12 ++++----- client/src/components/CollectQuote.vue | 25 +++++++++++-------- .../src/components/CollectQuotesExplain.vue | 4 +-- client/src/components/ConfirmButton.vue | 13 +++++----- client/src/components/Final.vue | 10 ++++---- client/src/components/GameControls.vue | 2 +- client/src/components/PlayButton.vue | 4 +-- client/src/components/Player.vue | 4 +-- client/src/components/PlayerList.vue | 4 +-- client/src/components/Quote.vue | 4 +-- client/src/components/QuoteListItem.vue | 11 +++++--- client/src/components/ReadySet.vue | 8 +++--- client/src/components/Source.vue | 12 ++++----- client/src/components/TitleBox.vue | 2 +- 15 files changed, 84 insertions(+), 56 deletions(-) diff --git a/client/src/assets/css/colors.scss b/client/src/assets/css/colors.scss index 980ac35..7106239 100644 --- a/client/src/assets/css/colors.scss +++ b/client/src/assets/css/colors.scss @@ -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; diff --git a/client/src/components/AddNewQuote.vue b/client/src/components/AddNewQuote.vue index 2f4459c..da08e73 100644 --- a/client/src/components/AddNewQuote.vue +++ b/client/src/components/AddNewQuote.vue @@ -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; } } } diff --git a/client/src/components/CollectQuote.vue b/client/src/components/CollectQuote.vue index 882c2da..b8d5d12 100644 --- a/client/src/components/CollectQuote.vue +++ b/client/src/components/CollectQuote.vue @@ -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; } } } diff --git a/client/src/components/CollectQuotesExplain.vue b/client/src/components/CollectQuotesExplain.vue index e85e1dc..ea3e3d6 100644 --- a/client/src/components/CollectQuotesExplain.vue +++ b/client/src/components/CollectQuotesExplain.vue @@ -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; } } diff --git a/client/src/components/ConfirmButton.vue b/client/src/components/ConfirmButton.vue index fc023c4..2fd29a2 100644 --- a/client/src/components/ConfirmButton.vue +++ b/client/src/components/ConfirmButton.vue @@ -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; } - } } diff --git a/client/src/components/Final.vue b/client/src/components/Final.vue index c9b428c..b2e3385 100644 --- a/client/src/components/Final.vue +++ b/client/src/components/Final.vue @@ -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; diff --git a/client/src/components/GameControls.vue b/client/src/components/GameControls.vue index ae02851..199423f 100644 --- a/client/src/components/GameControls.vue +++ b/client/src/components/GameControls.vue @@ -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; diff --git a/client/src/components/PlayButton.vue b/client/src/components/PlayButton.vue index 1f75dee..aae7f89 100644 --- a/client/src/components/PlayButton.vue +++ b/client/src/components/PlayButton.vue @@ -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; } } diff --git a/client/src/components/Player.vue b/client/src/components/Player.vue index c7a0c27..dc32846 100644 --- a/client/src/components/Player.vue +++ b/client/src/components/Player.vue @@ -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; } } diff --git a/client/src/components/PlayerList.vue b/client/src/components/PlayerList.vue index 258a9f7..3f1e81f 100644 --- a/client/src/components/PlayerList.vue +++ b/client/src/components/PlayerList.vue @@ -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; } diff --git a/client/src/components/Quote.vue b/client/src/components/Quote.vue index a5fb1db..04dbffc 100644 --- a/client/src/components/Quote.vue +++ b/client/src/components/Quote.vue @@ -1,5 +1,5 @@ @@ -18,7 +18,7 @@ export default { text-align: justify; font-family: Dosis; font-size: 24px; - color: #ffffff; + color: $primary-text-color; &:before { content: '„'; diff --git a/client/src/components/QuoteListItem.vue b/client/src/components/QuoteListItem.vue index 7298a53..8bd5769 100644 --- a/client/src/components/QuoteListItem.vue +++ b/client/src/components/QuoteListItem.vue @@ -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 { diff --git a/client/src/components/ReadySet.vue b/client/src/components/ReadySet.vue index ba21627..311e4f1 100644 --- a/client/src/components/ReadySet.vue +++ b/client/src/components/ReadySet.vue @@ -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; } diff --git a/client/src/components/Source.vue b/client/src/components/Source.vue index 3f4b78c..d92dcf2 100644 --- a/client/src/components/Source.vue +++ b/client/src/components/Source.vue @@ -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; diff --git a/client/src/components/TitleBox.vue b/client/src/components/TitleBox.vue index 4ed86c4..e56029a 100644 --- a/client/src/components/TitleBox.vue +++ b/client/src/components/TitleBox.vue @@ -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;