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 {
margin: 0;
padding: 0;
}
body {
background-color: #402080;
background-color: $primary-background-color;
}
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>
<style lang="scss">
@import '~/assets/css/components';
.add-new-quote {
display: flex;
width: 100%;
margin: 32px;
flex-direction: column;
align-items: center;
&__button {
width: 100px;
height: 48px;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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