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 17:24:22 +01:00
parent a4a499518e
commit 91541f78d4
21 changed files with 100 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/assets/css/base.scss
View File

@ -1,10 +1,12 @@
@import './colors';
html, body { html, body {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
body { body {
background-color: #402080; background-color: $primary-background-color;
} }
a { a {

20
client/src/assets/css/colors.scss Normal file
View File

@ -0,0 +1,20 @@
$primary-background-color: #402080;
$primary-box-color: #6040c0;
$primary-box-border-color: #808040;
$primary-box-text-color: #ffff80;
$button-background-color: #40a020;
$button-border-color: #c0c060;
$button-text-color: #ffff80;
$button-hover-background-color: #60c040;
$button-hover-border-color: #ffffc0;
$button-hover-text-color: #ffffc0;
$button-disabled-background-color: #406020;
$button-disabled-border-color: #808030;
$button-disabled-text-color: #808060;
$button-secondary-text-color: #808040;
$button-secondary-hover-text-color: #c0c080;

1
client/src/assets/css/components.scss Normal file
View File

@ -0,0 +1 @@
@import './colors.scss';

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

@ -15,7 +15,15 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components';
.add-new-quote { .add-new-quote {
display: flex;
width: 100%;
margin: 32px;
flex-direction: column;
align-items: center;
&__button { &__button {
width: 100px; width: 100px;
height: 48px; height: 48px;

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

@ -37,6 +37,8 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components';
.collect-quote { .collect-quote {
color: #ffffff; color: #ffffff;
@ -56,7 +58,7 @@ export default {
top: 15%; top: 15%;
width: 80%; width: 80%;
height: 400px; height: 400px;
background-color: #402080; background-color: $primary-background-color;
border: 1px solid #ffffff; border: 1px solid #ffffff;
border-radius: 20px; border-radius: 20px;
} }

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

@ -81,13 +81,15 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components';
.collect-quotes-explain { .collect-quotes-explain {
&__container { &__container {
margin: 20px 80px; margin: 20px 80px;
padding: 0 40px; padding: 0 40px;
border: 1px solid white; border: 1px solid white;
border-radius: 20px; border-radius: 20px;
background-color: #6040c0; background-color: $primary-box-color;
} }
&__open-close-toggle { &__open-close-toggle {
@ -96,13 +98,13 @@ export default {
padding: 12px; padding: 12px;
border: 1px solid #ffffff; border: 1px solid #ffffff;
border-radius: 8px; border-radius: 8px;
background-color: #402080; background-color: $primary-background-color;
font-family: "Wendy One"; font-family: "Wendy One";
color: #ffffff; color: #ffffff;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: #6040c0; background-color: $primary-box-color;
} }
} }

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

@ -28,6 +28,8 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components';
.confirm-button { .confirm-button {
position: absolute; position: absolute;
right: 32px; right: 32px;

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

@ -19,6 +19,8 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components';
.enginedebug { .enginedebug {
width: 100%; width: 100%;
height: 100%; height: 100%;

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

@ -36,6 +36,8 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components';
.final { .final {
display: flex; display: flex;
width: 100%; width: 100%;
@ -69,7 +71,7 @@ export default {
top: 0; top: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: linear-gradient(45deg, rgba(128, 96, 192, 0) 50%, #402080 60%); background: linear-gradient(45deg, rgba(128, 96, 192, 0) 50%, $primary-background-color 60%);
background-size: 1000% 1000%; background-size: 1000% 1000%;
animation: finals-gradient__fade-in 5s ease forwards; animation: finals-gradient__fade-in 5s ease forwards;
} }
@ -81,7 +83,7 @@ export default {
height: 100px; height: 100px;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: #402080; background-color: $primary-background-color;
border-radius: 32px 32px 0 0; border-radius: 32px 32px 0 0;
margin-bottom: 4px; margin-bottom: 4px;
} }
@ -95,7 +97,7 @@ export default {
&__table-body { &__table-body {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #402080; background-color: $primary-background-color;
border-radius: 0 0 32px 32px; border-radius: 0 0 32px 32px;
color: #ffffff; color: #ffffff;
font-family: Dosis; font-family: Dosis;

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

@ -40,6 +40,8 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components';
.gamecontrols { .gamecontrols {
padding: 8px 1em; padding: 8px 1em;
border-bottom: 1px solid #808080; border-bottom: 1px solid #808080;

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

@ -44,6 +44,8 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components';
.play { .play {
position: relative; position: relative;
width: 100%; width: 100%;

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

@ -75,6 +75,8 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components';
.playbutton { .playbutton {
font-family: Dosis; font-family: Dosis;
font-weight: 800; font-weight: 800;
@ -85,25 +87,26 @@ export default {
width: 200px; width: 200px;
height: 48px; height: 48px;
padding: 4px 36px; padding: 4px 36px;
border: 4px solid #c0c060; border: 4px solid $button-border-color;
border-radius: 8px; border-radius: 8px;
background-color: #40a020; background-color: $button-background-color;
color: #ffff80; color: $button-text-color;
&: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;
} }
} }
&__logout { &__logout {
margin-top: 36px; margin-top: 36px;
font-size: 24px; font-size: 24px;
color: $button-secondary-text-color;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: #c0c080; color: $button-secondary-hover-text-color;
} }
} }
@ -121,21 +124,22 @@ export default {
display: inline; display: inline;
width: 80px; width: 80px;
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;
background-color: #40a020; color: $button-text-color;
color: #ffff80;
font-size: 24px; font-size: 24px;
&.disabled, &.disabled,
&:hover.disabled { &:hover.disabled {
border-color: #808030; background-color: $button-disabled-background-color;
background-color: #406020; border-color: $button-disabled-border-color;
color: #808060; color: $button-disabled-text-color;
} }
&:hover { &:hover {
background-color: #60c040; background-color: $button-hover-background-color;
color: #ffffc0; border-color: $button-hover-border-color;
color: $button-hover-text-color;
} }
} }

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

@ -29,6 +29,8 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components';
.player { .player {
&__row { &__row {
display: flex; display: flex;

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

@ -13,6 +13,8 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components';
.player-list { .player-list {
padding: 8px; padding: 8px;
border: 1px solid #ffffff; border: 1px solid #ffffff;

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

@ -11,6 +11,8 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components';
.quote { .quote {
&__quote { &__quote {
text-align: justify; text-align: justify;

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

@ -11,6 +11,8 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components';
.quote-container { .quote-container {
display: flex; display: flex;
position: absolute; position: absolute;

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

@ -27,6 +27,8 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components';
.quote-list-item { .quote-list-item {
&__container { &__container {
display: flex; display: flex;
@ -51,7 +53,7 @@ export default {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: #6040c0; background-color: $primary-box-color;
} }
&-edit::after { &-edit::after {

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

@ -38,6 +38,8 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components';
.ready-set { .ready-set {
display: flex; display: flex;
position: relative; position: relative;
@ -67,7 +69,7 @@ export default {
height: 370px; height: 370px;
border: 15px solid #808040; border: 15px solid #808040;
border-radius: 50px; border-radius: 50px;
background-color: #6040c0; background-color: $primary-box-color;
z-index: 5; z-index: 5;
} }

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

@ -64,6 +64,8 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components';
.source { .source {
position: absolute; position: absolute;
width: 180px; width: 180px;
@ -78,13 +80,13 @@ export default {
padding: 4px; padding: 4px;
border: 1px solid #e0e0e0; border: 1px solid #e0e0e0;
border-radius: 10px; border-radius: 10px;
background-color: #6040c0; background-color: $primary-box-color;
color: #ffffff; color: #ffffff;
&-selectable { &-selectable {
&:hover { &:hover {
background-color: #c0a0f0; background-color: #c0a0f0;
color: #402080; color: $primary-background-color;
cursor: pointer; cursor: pointer;
} }
&.source__container__selected { &.source__container__selected {
@ -95,7 +97,7 @@ export default {
&__selected { &__selected {
background-color: #d0d0d0; background-color: #d0d0d0;
color: #402080; color: $primary-background-color;
box-shadow: 0 0 10px #d0d0d0; box-shadow: 0 0 10px #d0d0d0;
} }
@ -123,7 +125,7 @@ export default {
top: -16px; top: -16px;
width: 24px; width: 24px;
height: 24px; height: 24px;
background-color: #6040c0; background-color: $primary-box-color;
border: 2px solid #ffffff; border: 2px solid #ffffff;
border-radius: 14px; border-radius: 14px;
color: #c0c060; color: #c0c060;

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

@ -25,6 +25,8 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components';
.sources { .sources {
position: relative; position: relative;
width: 100%; width: 100%;

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

@ -13,6 +13,8 @@
</template> </template>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components';
.titlebox { .titlebox {
&__titlebox { &__titlebox {
position: relative; position: relative;
@ -23,9 +25,9 @@
&__titleborderbox1, &__titleborderbox1,
&__titleborderbox2, &__titleborderbox2,
&__titleborderbox3 { &__titleborderbox3 {
border: 4px solid #808040; border: 4px solid $primary-box-border-color;
border-radius: 16px; border-radius: 16px;
background-color: #6040c0; background-color: $primary-box-color;
} }
&__titleborderbox1 { &__titleborderbox1 {
display: flex; display: flex;
@ -52,7 +54,7 @@
&__title { &__title {
font-size: 64px; font-size: 64px;
font-family: 'Wendy One'; font-family: 'Wendy One';
color: #ffff80; color: $primary-box-text-color;
text-align: center; text-align: center;
} }
} }