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

Compare commits

base: settel:9e63e101cc631fce4a5d286aae2d43591d2ebae0
Branches Tags
settel:develop
settel:prod
settel:3.4
settel:3.3
settel:2.20
settel:2.19
settel:2.18
settel:2.17
settel:2.16
settel:2.14
...
compare: settel:450319ba35b0fc11790b978d8b86af1124d43239
Branches Tags
settel:develop
settel:prod
settel:3.4
settel:3.3
settel:2.20
settel:2.19
settel:2.18
settel:2.17
settel:2.16
settel:2.14

2 Commits
9e63e101cc ... 450319ba35

Author SHA1 Message Date
Settel
450319ba35 bugfix: fix errors and warnings after library updates
All checks were successful
ci/woodpecker/manual/woodpecker Pipeline was successful
Details
2025-04-17 11:56:47 +02:00
Settel
8a374b7d86 refactor: update to Node 22, update libraries 2025-04-16 22:35:42 +02:00
38 changed files with 7191 additions and 5299 deletions
Show Stats Expand all files Collapse all files

1
.nvmrc Normal file
View File

@ -0,0 +1 @@
22.14

1
Makefile
View File

@ -83,6 +83,7 @@ container-publish:
clean: clean:
rm -rf client/.output/ rm -rf client/.output/
rm -rf client/.nuxt/ rm -rf client/.nuxt/
rm -rf client/node_modules/
$(MAKE) -C server clean $(MAKE) -C server clean
rm -f build/files/knowyt build/knowyt-*.tar rm -f build/files/knowyt build/knowyt-*.tar

4
client/nuxt.config.ts
View File

@ -7,6 +7,10 @@ export default defineNuxtConfig({
srcDir: 'src/', srcDir: 'src/',
ssr: false, ssr: false,
telemetry: false, telemetry: false,
compatibilityDate: '2025-04-17',
devtools: {
enabled: false,
},
modules: [ modules: [
'@pinia/nuxt', '@pinia/nuxt',
'nuxt-icons', 'nuxt-icons',

30
client/package.json
View File

@ -10,26 +10,26 @@
"setup": "pnpm install" "setup": "pnpm install"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "^18.19.17", "@types/node": "^18.19.86",
"http-proxy": "^1.18.1", "http-proxy": "^1.18.1",
"nuxt": "^3.10.2", "nuxt": "^3.16.2",
"sass": "^1.71.0", "sass": "^1.86.3",
"sass-loader": "^13.3.3", "sass-loader": "^16.0.5",
"typescript-strict-plugin": "^2.3.0", "typescript-strict-plugin": "^2.4.4",
"webpack": "^5.90.2" "webpack": "^5.99.5"
}, },
"dependencies": { "dependencies": {
"@pinia/nuxt": "^0.4.11", "@pinia/nuxt": "^0.11.0",
"@vue/reactivity": "^3.4.19", "@vue/reactivity": "^3.5.13",
"@vue/runtime-core": "^3.4.19", "@vue/runtime-core": "^3.5.13",
"@vue/runtime-dom": "^3.4.19", "@vue/runtime-dom": "^3.5.13",
"@vue/shared": "^3.4.19", "@vue/shared": "^3.5.13",
"nuxt-icons": "^3.2.1", "nuxt-icons": "^3.2.1",
"ofetch": "^1.3.3", "ofetch": "^1.4.1",
"query-string": "^8.2.0", "query-string": "^8.2.0",
"typescript": "^5.3.3", "typescript": "^5.8.3",
"vue": "^3.4.19", "vue": "^3.5.13",
"vue-contenteditable": "^4.1.0", "vue-contenteditable": "^4.1.0",
"vue-router": "^4.2.5" "vue-router": "^4.5.0"
} }
} }

11949
client/pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

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

@ -16,7 +16,7 @@ $box-primary-text-color: $text-primary-color;
$box-primary-border: 1px solid #e0e0e0; $box-primary-border: 1px solid #e0e0e0;
$box-primary-disabled-background-color: $box-primary-background-color; $box-primary-disabled-background-color: $box-primary-background-color;
$box-primary-disabled-text-color: darken($box-primary-text-color, 60%); $box-primary-disabled-text-color: #666666;
$box-primary-disabled-border: $box-primary-border; $box-primary-disabled-border: $box-primary-border;
// Animation Box // Animation Box
@ -64,7 +64,7 @@ $quote-editmode-background-color: #ffcc88;
$quote-new-background-color: none; $quote-new-background-color: none;
$quote-new-border: 5px dashed #ffffff; $quote-new-border: 5px dashed #ffffff;
$quote-new-text-color: #ffffff; $quote-new-text-color: #ffffff;
$quote-new-hover-background-color: lighten($background-primary-color, 10%); $quote-new-hover-background-color: #3d3d56;
$quote-new-hover-border: $quote-new-border; $quote-new-hover-border: $quote-new-border;
$quote-new-hover-text-color: $quote-new-text-color; $quote-new-hover-text-color: $quote-new-text-color;
@ -116,6 +116,6 @@ $dialog-box-border: none;
$dialog-box-text-color: #ffffff; $dialog-box-text-color: #ffffff;
// Engine Debug // Engine Debug
$debug-background-color: lighten($background-primary-color, 10%); $debug-background-color: #3d3d56;
$debug-border: none; $debug-border: none;
$debug-text-color: $text-primary-color; $debug-text-color: $text-primary-color;

5
client/src/assets/css/components.scss
View File

@ -1,5 +0,0 @@
@import './colors.scss';
@import './media.scss';
$font-primary: 'Wendy One';
$font-secondary: 'Dosis';

26
client/src/assets/css/fonts-definition.scss Normal file
View File

@ -0,0 +1,26 @@
@font-face {
font-family: 'Wendy One';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/wendy-one/WendyOne-Regular.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Dosis';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(/fonts/dosis/dosis-300.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Dosis';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(/fonts/dosis/dosis-800.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

28
client/src/assets/css/fonts.scss
View File

@ -1,26 +1,2 @@
@font-face { $font-primary: 'Wendy One';
font-family: 'Wendy One'; $font-secondary: 'Dosis';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/wendy-one/WendyOne-Regular.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Dosis';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(/fonts/dosis/dosis-300.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Dosis';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(/fonts/dosis/dosis-800.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

@ -7,7 +7,7 @@
</template> </template>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components'; @use '~/assets/css/colors';
.alert { .alert {
&__container { &__container {
@ -24,11 +24,11 @@
width: auto; width: auto;
margin: 2em auto auto auto; margin: 2em auto auto auto;
padding: 2em; padding: 2em;
border: $alert-border; border: colors.$alert-border;
border-radius: 10px; border-radius: 10px;
background-color: $alert-background-color; background-color: colors.$alert-background-color;
font-size: 24px; font-size: 24px;
color: $text-primary-color; color: colors.$text-primary-color;
} }
} }
</style> </style>

39
client/src/components/Button.vue
View File

@ -27,16 +27,17 @@ defineProps({
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components'; @use '~/assets/css/colors';
@use '~/assets/css/fonts';
.button { .button {
&__button { &__button {
display: inline-block; display: inline-block;
padding: 4px 24px; padding: 4px 24px;
background-color: inherit; background-color: inherit;
color: $text-secondary-color; color: colors.$text-secondary-color;
text-align: center; text-align: center;
font-family: $font-secondary; font-family: fonts.$font-secondary;
font-weight: bold; font-weight: bold;
font-size: 24px; font-size: 24px;
border: none; border: none;
@ -44,44 +45,44 @@ defineProps({
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: $text-secondary-hover-color; color: colors.$text-secondary-hover-color;
} }
&__border { &__border {
background-color: $button-background-color; background-color: colors.$button-background-color;
color: $button-text-color; color: colors.$button-text-color;
border: $button-border; border: colors.$button-border;
border-radius: 8px; border-radius: 8px;
&:hover { &:hover {
border: $button-hover-border; border: colors.$button-hover-border;
background-color: $button-hover-background-color; background-color: colors.$button-hover-background-color;
color: $button-hover-text-color; color: colors.$button-hover-text-color;
} }
} }
&__disabled, &__disabled,
&__disabled:hover { &__disabled:hover {
cursor: default; cursor: default;
background-color: $button-disabled-background-color; background-color: colors.$button-disabled-background-color;
margin: 4px; margin: 4px;
color: $button-disabled-text-color; color: colors.$button-disabled-text-color;
&.button__button__border { &.button__button__border {
margin: 0; margin: 0;
border: $button-disabled-border-border; border: colors.$button-disabled-border-border;
} }
} }
&__caution { &__caution {
background-color: $button-caution-background-color; background-color: colors.$button-caution-background-color;
border: $button-caution-border; border: colors.$button-caution-border;
color: $button-caution-text-color; color: colors.$button-caution-text-color;
&:hover { &:hover {
background-color: $button-caution-hover-background-color; background-color: colors.$button-caution-hover-background-color;
border: $button-caution-hover-border; border: colors.$button-caution-hover-border;
color: $button-caution-hover-text-color; color: colors.$button-caution-hover-text-color;
} }
} }

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

@ -39,13 +39,13 @@ const editEnd = () => {
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components'; @use '~/assets/css/media';
.collect-quotes { .collect-quotes {
&__explaination-box { &__explaination-box {
margin: 16px; margin: 16px;
@media (max-width: $phone-width) { @media (max-width: media.$phone-width) {
display: none; display: none;
} }
} }

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

@ -86,11 +86,12 @@ onMounted(() => {
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components'; @use '~/assets/css/fonts';
@use '~/assets/css/colors';
.create-team-dialog { .create-team-dialog {
&__description { &__description {
font-family: $font-secondary; font-family: fonts.$font-secondary;
font-size: 18px; font-size: 18px;
} }
@ -107,8 +108,8 @@ onMounted(() => {
&__input { &__input {
border: 1px solid white; border: 1px solid white;
background-color: $dialog-box-background-color; background-color: colors.$dialog-box-background-color;
color: $dialog-box-text-color; color: colors.$dialog-box-text-color;
border-radius: 4px; border-radius: 4px;
} }
@ -121,14 +122,14 @@ onMounted(() => {
} }
&__auth-message { &__auth-message {
font-family: $font-secondary; font-family: fonts.$font-secondary;
font-size: 24px; font-size: 24px;
text-align: center; text-align: center;
margin: 32px; margin: 32px;
} }
&__pin { &__pin {
font-family: $font-secondary; font-family: fonts.$font-secondary;
font-size: 32px; font-size: 32px;
font-weight: 800; font-weight: 800;
text-align: center; text-align: center;

16
client/src/components/DialogBox.vue
View File

@ -23,7 +23,9 @@ const emit = defineEmits(['close'])
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components'; @use '~/assets/css/media';
@use '~/assets/css/fonts';
@use '~/assets/css/colors';
.dialog-box { .dialog-box {
&__container { &__container {
@ -32,13 +34,13 @@ const emit = defineEmits(['close'])
min-width: 400px; min-width: 400px;
min-height: 280px; min-height: 280px;
margin: auto; margin: auto;
background-color: $dialog-box-background-color; background-color: colors.$dialog-box-background-color;
border: $dialog-box-border; border: colors.$dialog-box-border;
border-radius: 8px; border-radius: 8px;
color: $dialog-box-text-color; color: colors.$dialog-box-text-color;
z-index: 12; z-index: 12;
@media (max-width: $phone-max-width) { @media (max-width: media.$phone-max-width) {
min-width: unset; min-width: unset;
} }
} }
@ -51,14 +53,14 @@ const emit = defineEmits(['close'])
&__title { &__title {
flex-grow: 1; flex-grow: 1;
margin: 36px 36px 8px 36px; margin: 36px 36px 8px 36px;
font-family: $font-primary; font-family: fonts.$font-primary;
font-size: 24px; font-size: 24px;
} }
&__body { &__body {
flex-grow: 1; flex-grow: 1;
margin: 36px; margin: 36px;
font-family: $font-secondary; font-family: fonts.$font-secondary;
} }
&__footer { &__footer {

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

@ -17,20 +17,20 @@ const engineJson = computed(() => JSON.stringify(engine.json, null, 2))
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components'; @use '~/assets/css/colors';
.enginedebug { .enginedebug {
&__container { &__container {
width: 100%; width: 100%;
max-height: 100%; max-height: 100%;
border: $debug-border; border: colors.$debug-border;
background-color: $debug-background-color; background-color: colors.$debug-background-color;
overflow: auto; overflow: auto;
} }
&__json { &__json {
padding: 0 0 0 1em; padding: 0 0 0 1em;
color: $debug-text-color; color: colors.$debug-text-color;
font-size: 10px; font-size: 10px;
} }
} }

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

@ -57,7 +57,8 @@ const backToPlay = () => { useRouter().push('/play') }
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components'; @use '~/assets/css/fonts';
@use '~/assets/css/colors';
.game-controls { .game-controls {
&__container { &__container {
@ -70,12 +71,12 @@ const backToPlay = () => { useRouter().push('/play') }
&__end { &__end {
margin-left: auto; margin-left: auto;
color: $text-primary-color; color: colors.$text-primary-color;
font-size: 16px; font-size: 16px;
font-family: $font-primary; font-family: fonts.$font-primary;
&:hover { &:hover {
color: $text-primary-hover-color; color: colors.$text-primary-hover-color;
} }
} }
} }

24
client/src/components/Highscores.vue
View File

@ -35,7 +35,9 @@ const players = computed(() => {
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components'; @use '~/assets/css/media';
@use '~/assets/css/fonts';
@use '~/assets/css/colors';
.highscores { .highscores {
&__container-outer { &__container-outer {
@ -51,7 +53,7 @@ const players = computed(() => {
width: 600px; width: 600px;
min-height: 600px; min-height: 600px;
@media (max-width: $phone-max-width) { @media (max-width: media.$phone-max-width) {
width: 300px; width: 300px;
} }
} }
@ -64,10 +66,10 @@ const players = computed(() => {
height: 100%; height: 100%;
padding: 2px; padding: 2px;
border-radius: 32px; border-radius: 32px;
background: linear-gradient(45deg, $highscores-border-color 0, $highscores-border-color 68%, #ffffff 70%, $highscores-border-color 72%, $highscores-border-color 100%); background: linear-gradient(45deg, colors.$highscores-border-color 0, colors.$highscores-border-color 68%, #ffffff 70%, colors.$highscores-border-color 72%, colors.$highscores-border-color 100%);
background-size: 1000% 1000%; background-size: 1000% 1000%;
animation: highscores-gradient 10s linear infinite 5s; animation: highscores-gradient 10s linear infinite 5s;
color: $highscores-text-color; color: colors.$highscores-text-color;
&::after { &::after {
content: ''; content: '';
@ -77,7 +79,7 @@ const players = computed(() => {
top: 0; top: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: linear-gradient(45deg, rgba(128, 96, 192, 0) 50%, $highscores-background-color 60%); background: linear-gradient(45deg, rgba(128, 96, 192, 0) 50%, colors.$highscores-background-color 60%);
background-size: 1000% 1000%; background-size: 1000% 1000%;
animation: highscores-gradient__fade-in 10s ease forwards; animation: highscores-gradient__fade-in 10s ease forwards;
} }
@ -89,16 +91,16 @@ const players = computed(() => {
height: 100px; height: 100px;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: $highscores-background-color; background-color: colors.$highscores-background-color;
border-radius: 32px 32px 0 0; border-radius: 32px 32px 0 0;
margin-bottom: 2px; margin-bottom: 2px;
} }
&__title { &__title {
font-family: $font-primary; font-family: fonts.$font-primary;
font-size: 48px; font-size: 48px;
@media (max-width: $phone-max-width) { @media (max-width: media.$phone-max-width) {
font-size: 32px; font-size: 32px;
padding: 20px; padding: 20px;
text-align: center; text-align: center;
@ -108,12 +110,12 @@ const players = computed(() => {
&__table-body { &__table-body {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: $highscores-background-color; background-color: colors.$highscores-background-color;
border-radius: 0 0 32px 32px; border-radius: 0 0 32px 32px;
font-family: $font-secondary; font-family: fonts.$font-secondary;
font-size: 32px; font-size: 32px;
@media (max-width: $phone-max-width) { @media (max-width: media.$phone-max-width) {
font-size: 24px; font-size: 24px;
} }
} }

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

@ -51,14 +51,15 @@ const close = () => { window.location.href = '/' }
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components'; @use '~/assets/css/fonts';
@use '~/assets/css/colors';
.info { .info {
&__container { &__container {
display: flex; display: flex;
width: 100%; width: 100%;
height: 100%; height: 100%;
color: $text-primary-color; color: colors.$text-primary-color;
} }
&__box { &__box {
@ -67,12 +68,12 @@ const close = () => { window.location.href = '/' }
min-width: 600px; min-width: 600px;
margin: auto; margin: auto;
padding: 32px; padding: 32px;
border: 1px solid white; border: 1px solid #ffffff;
border-radius: 16px; border-radius: 16px;
} }
&__title { &__title {
font-family: $font-primary; font-family: fonts.$font-primary;
margin: 0 32px 32px 0; margin: 0 32px 32px 0;
font-size: 48px; font-size: 48px;
} }
@ -80,11 +81,11 @@ const close = () => { window.location.href = '/' }
&__subtitle { &__subtitle {
margin: 32px 0 8px 0; margin: 32px 0 8px 0;
font-size: 24px; font-size: 24px;
font-family: $font-secondary; font-family: fonts.$font-secondary;
} }
&__table { &__table {
font-family: $font-secondary; font-family: fonts.$font-secondary;
&-key { &-key {
width: 6em; width: 6em;

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

@ -18,7 +18,9 @@ const { $t } = useI18n({
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components'; @use '~/assets/css/media';
@use '~/assets/css/fonts';
@use '~/assets/css/colors';
.lobby { .lobby {
&__container { &__container {
@ -30,12 +32,12 @@ const { $t } = useI18n({
&__message { &__message {
flex-grow: 1; flex-grow: 1;
margin: 60px 48px 0 200px; margin: 60px 48px 0 200px;
font-family: $font-secondary; font-family: fonts.$font-secondary;
font-size: 24px; font-size: 24px;
text-align: center; text-align: center;
color: $text-primary-color; color: colors.$text-primary-color;
@media (max-width: $phone-max-width) { @media (max-width: media.$phone-max-width) {
margin: 60px 48px; margin: 60px 48px;
} }
} }
@ -44,7 +46,7 @@ const { $t } = useI18n({
width: 200px; width: 200px;
margin: 16px 16px 0 0; margin: 16px 16px 0 0;
@media (max-width: $phone-width) { @media (max-width: media.$phone-width) {
display: none; display: none;
} }
} }

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

@ -37,7 +37,8 @@ const login = (): void => {
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components'; @use '~/assets/css/colors';
@use '~/assets/css/fonts';
.login-box { .login-box {
&__container-outer { &__container-outer {
@ -55,9 +56,9 @@ const login = (): void => {
margin: 0 16px; margin: 0 16px;
background: transparent; background: transparent;
border: none; border: none;
border-bottom: $box-primary-border; border-bottom: colors.$box-primary-border;
color: $text-primary-color; color: colors.$text-primary-color;
font-family: $font-secondary; font-family: fonts.$font-secondary;
font-weight: 800; font-weight: 800;
font-size: 24px; font-size: 24px;
outline: none; outline: none;
@ -68,7 +69,7 @@ const login = (): void => {
width: 240px; width: 240px;
text-align: center; text-align: center;
margin: 8px; margin: 8px;
color: $text-error-color; color: colors.$text-error-color;
} }
} }
</style> </style>

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

@ -20,7 +20,7 @@ const emit = defineEmits(['close'])
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components'; @use '~/assets/css/colors';
.modal-dialog { .modal-dialog {
&__container { &__container {
@ -36,7 +36,7 @@ const emit = defineEmits(['close'])
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: $modal-dialog-backdrop-background-color; background-color: colors.$modal-dialog-backdrop-background-color;
z-index: 10; z-index: 10;
} }
} }

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

@ -25,19 +25,20 @@ defineProps<{
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components'; @use '~/assets/css/fonts';
@use '~/assets/css/colors';
.player { .player {
&__row { &__row {
display: flex; display: flex;
background-color: $box-primary-background-color; background-color: colors.$box-primary-background-color;
color: $box-primary-text-color; color: colors.$box-primary-text-color;
font-family: $font-secondary; font-family: fonts.$font-secondary;
font-size: 18px; font-size: 18px;
&__idle { &__idle {
background-color: $box-primary-disabled-background-color; background-color: colors.$box-primary-disabled-background-color;
color: $box-primary-disabled-text-color; color: colors.$box-primary-disabled-text-color;
} }
} }

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

@ -20,12 +20,12 @@ const round = useRoundStore().round
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components'; @use '~/assets/css/colors';
.player-list { .player-list {
padding: 8px; padding: 8px;
border: $box-primary-border; border: colors.$box-primary-border;
border-radius: 10px; border-radius: 10px;
background-color: $box-primary-background-color; background-color: colors.$box-primary-background-color;
} }
</style> </style>

16
client/src/components/Playground.vue
View File

@ -80,7 +80,7 @@ sources.forEach((source, index) => {
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components'; @use '~/assets/css/media';
.playground { .playground {
&__container { &__container {
@ -95,7 +95,7 @@ sources.forEach((source, index) => {
flex-grow: 1; flex-grow: 1;
margin: 40px; margin: 40px;
@media (max-width: $phone-max-width) { @media (max-width: media.$phone-max-width) {
margin: 0; margin: 0;
} }
} }
@ -106,7 +106,7 @@ sources.forEach((source, index) => {
justify-content: space-around; justify-content: space-around;
gap: 24px 36px; gap: 24px 36px;
@media (max-width: $phone-max-width) { @media (max-width: media.$phone-max-width) {
order: 2; order: 2;
} }
} }
@ -114,7 +114,7 @@ sources.forEach((source, index) => {
&__spacer { &__spacer {
flex-grow: 3; flex-grow: 3;
@media (max-width: $phone-max-width) { @media (max-width: media.$phone-max-width) {
flex-grow: 1; flex-grow: 1;
} }
} }
@ -130,7 +130,7 @@ sources.forEach((source, index) => {
opacity: 100%; opacity: 100%;
} }
@media (max-width: $phone-max-width) { @media (max-width: media.$phone-max-width) {
flex-grow: 1; flex-grow: 1;
} }
} }
@ -146,7 +146,7 @@ sources.forEach((source, index) => {
animation-fill-mode: forwards; animation-fill-mode: forwards;
} }
@media (max-width: $phone-max-width) { @media (max-width: media.$phone-max-width) {
order: 3; order: 3;
margin: 64px 32px; margin: 64px 32px;
} }
@ -156,11 +156,11 @@ sources.forEach((source, index) => {
width: 200px; width: 200px;
margin: 16px 16px 0 64px; margin: 16px 16px 0 64px;
@media (max-width: $phone-max-width) { @media (max-width: media.$phone-max-width) {
display: none; display: none;
} }
@media (max-width: calc($desktop-min-width - 1px)) { @media (max-width: calc(media.$desktop-min-width - 1px)) {
margin-left: 16px; margin-left: 16px;
} }
} }

22
client/src/components/QuoteCard.vue
View File

@ -99,7 +99,9 @@ const keydown = async (ev: KeyboardEvent) => {
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components'; @use '~/assets/css/media';
@use '~/assets/css/fonts';
@use '~/assets/css/colors';
.quote-card { .quote-card {
&__container { &__container {
@ -108,12 +110,12 @@ const keydown = async (ev: KeyboardEvent) => {
height: 150px; height: 150px;
margin: 32px; margin: 32px;
padding: 32px; padding: 32px;
background-color: $quote-background-color; background-color: colors.$quote-background-color;
border: $quote-border; border: colors.$quote-border;
border-radius: 0 16px 0 0; border-radius: 0 16px 0 0;
color: $quote-text-color; color: colors.$quote-text-color;
@media (max-width: $phone-width) { @media (max-width: media.$phone-width) {
width: 240px; width: 240px;
height: 120px; height: 120px;
padding: 16px; padding: 16px;
@ -123,7 +125,7 @@ const keydown = async (ev: KeyboardEvent) => {
cursor: text; cursor: text;
&__edit-mode { &__edit-mode {
background-color: $quote-editmode-background-color; background-color: colors.$quote-editmode-background-color;
} }
& .quote-card__quote { & .quote-card__quote {
@ -134,7 +136,7 @@ const keydown = async (ev: KeyboardEvent) => {
&__text-short { &__text-short {
font-size: 24px; font-size: 24px;
@media (max-width: $phone-width) { @media (max-width: media.$phone-width) {
font-size: 20px; font-size: 20px;
} }
} }
@ -142,7 +144,7 @@ const keydown = async (ev: KeyboardEvent) => {
&__text-medium { &__text-medium {
font-size: 20px; font-size: 20px;
@media (max-width: $phone-width) { @media (max-width: media.$phone-width) {
font-size: 18px; font-size: 18px;
} }
} }
@ -150,7 +152,7 @@ const keydown = async (ev: KeyboardEvent) => {
&__text-long { &__text-long {
font-size: 18px; font-size: 18px;
@media (max-width: $phone-width) { @media (max-width: media.$phone-width) {
font-size: 14px; font-size: 14px;
} }
} }
@ -166,7 +168,7 @@ const keydown = async (ev: KeyboardEvent) => {
&__quote { &__quote {
margin: 2px; margin: 2px;
font-family: $font-secondary; font-family: fonts.$font-secondary;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
cursor: default; cursor: default;

17
client/src/components/QuoteCardActionButton.vue
View File

@ -11,25 +11,26 @@ defineProps<{
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components'; @use '~/assets/css/fonts';
@use '~/assets/css/colors';
.quote-card-action-button { .quote-card-action-button {
&__button { &__button {
margin: 0 4px; margin: 0 4px;
width: 48px; width: 48px;
height: 48px; height: 48px;
border: $quote-button-border; border: colors.$quote-button-border;
border-radius: 48px; border-radius: 48px;
background-color: $quote-button-background-color; background-color: colors.$quote-button-background-color;
color: $quote-button-text-color; color: colors.$quote-button-text-color;
font-family: $font-secondary; font-family: fonts.$font-secondary;
font-size: 24px; font-size: 24px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
border: $quote-button-hover-border; border: colors.$quote-button-hover-border;
background-color: $quote-button-hover-background-color; background-color: colors.$quote-button-hover-background-color;
color: $quote-button-hover-text-color; color: colors.$quote-button-hover-text-color;
} }
} }
} }

17
client/src/components/QuoteCardNew.vue
View File

@ -5,7 +5,8 @@
</template> </template>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components'; @use '~/assets/css/media';
@use '~/assets/css/colors';
.quote-card-new { .quote-card-new {
&__container { &__container {
@ -16,18 +17,18 @@
height: 150px; height: 150px;
margin: 32px; margin: 32px;
padding: 28px; padding: 28px;
background-color: $quote-new-background-color; background-color: colors.$quote-new-background-color;
border: $quote-new-border; border: colors.$quote-new-border;
border-radius: 0 16px 0 0; border-radius: 0 16px 0 0;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: $quote-new-hover-background-color; background-color: colors.$quote-new-hover-background-color;
border: $quote-new-hover-border; border: colors.$quote-new-hover-border;
color: $quote-new-hover-text-color; color: colors.$quote-new-hover-text-color;
} }
@media (max-width: $phone-width) { @media (max-width: media.$phone-width) {
width: 240px; width: 240px;
height: 120px; height: 120px;
padding: 12px; padding: 12px;
@ -37,7 +38,7 @@
&__new { &__new {
width: 100%; width: 100%;
font-size: 72px; font-size: 72px;
color: $quote-new-text-color; color: colors.$quote-new-text-color;
text-align: center; text-align: center;
} }
} }

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

@ -93,12 +93,14 @@ onBeforeUnmount(() => { window.clearInterval(timer) })
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components'; @use 'sass:color';
@use '~/assets/css/fonts';
@use '~/assets/css/colors';
.quote-explaination-box { .quote-explaination-box {
&__container { &__container {
padding: 16px; padding: 16px;
font-family: $font-secondary; font-family: fonts.$font-secondary;
font-size: 24px; font-size: 24px;
} }
@ -134,11 +136,11 @@ onBeforeUnmount(() => { window.clearInterval(timer) })
} }
&__container-small { &__container-small {
color: darken($text-primary-color, 20%); color: color.adjust(colors.$text-primary-color, $lightness: -20%);
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: $text-primary-color; color: colors.$text-primary-color;
} }
} }

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

@ -30,7 +30,9 @@ const textSize = computed((): string => {
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components'; @use '~/assets/css/media';
@use '~/assets/css/fonts';
@use '~/assets/css/colors';
.ready-set { .ready-set {
&__container-outer { &__container-outer {
@ -53,7 +55,7 @@ const textSize = computed((): string => {
animation-fill-mode: forwards; animation-fill-mode: forwards;
} }
@media (max-width: $phone-max-width) { @media (max-width: media.$phone-max-width) {
width: 360px; width: 360px;
height: 360px; height: 360px;
} }
@ -66,12 +68,12 @@ const textSize = computed((): string => {
transform: rotate(45deg); transform: rotate(45deg);
width: 370px; width: 370px;
height: 370px; height: 370px;
background-color: $animationbox-background-color; background-color: colors.$animationbox-background-color;
border: $animationbox-border; border: colors.$animationbox-border;
border-radius: 50px; border-radius: 50px;
z-index: 5; z-index: 5;
@media (max-width: $phone-max-width) { @media (max-width: media.$phone-max-width) {
left: 54px; left: 54px;
top: 54px; top: 54px;
width: 240px; width: 240px;
@ -87,11 +89,11 @@ const textSize = computed((): string => {
width: 420px; width: 420px;
height: 420px; height: 420px;
border-radius: 150px; border-radius: 150px;
background-color: $animationbox-animation-color; background-color: colors.$animationbox-animation-color;
animation: spin-rev 5s linear infinite; animation: spin-rev 5s linear infinite;
z-index: 4; z-index: 4;
@media (max-width: $phone-max-width) { @media (max-width: media.$phone-max-width) {
left: 50px; left: 50px;
top: 50px; top: 50px;
width: 260px; width: 260px;
@ -107,11 +109,11 @@ const textSize = computed((): string => {
width: 420px; width: 420px;
height: 420px; height: 420px;
border-radius: 150px; border-radius: 150px;
background-color: $animationbox-animation-color; background-color: colors.$animationbox-animation-color;
z-index: 3; z-index: 3;
animation: spin 6s linear infinite; animation: spin 6s linear infinite;
@media (max-width: $phone-max-width) { @media (max-width: media.$phone-max-width) {
left: 50px; left: 50px;
top: 50px; top: 50px;
width: 260px; width: 260px;
@ -126,8 +128,8 @@ const textSize = computed((): string => {
height: 600px; height: 600px;
line-height: 600px; line-height: 600px;
font-size: 100px; font-size: 100px;
font-family: $font-primary; font-family: fonts.$font-primary;
color: $animationbox-text-color; color: colors.$animationbox-text-color;
text-align: center; text-align: center;
z-index: 10; z-index: 10;
@ -147,7 +149,7 @@ const textSize = computed((): string => {
animation: pop 0.5s ease-in-out; animation: pop 0.5s ease-in-out;
} }
@media (max-width: $phone-max-width) { @media (max-width: media.$phone-max-width) {
width: 360px; width: 360px;
height: 360px; height: 360px;
line-height: 360px; line-height: 360px;

31
client/src/components/SourceCard.vue
View File

@ -38,7 +38,8 @@ const containerClasses = computed(() => {
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components'; @use '~/assets/css/fonts';
@use '~/assets/css/colors';
.source-card { .source-card {
&__container { &__container {
@ -46,12 +47,12 @@ const containerClasses = computed(() => {
position: relative; position: relative;
width: 180px; width: 180px;
height: 40px; height: 40px;
border: $sourcecard-border; border: colors.$sourcecard-border;
border-radius: 8px; border-radius: 8px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: $sourcecard-background-color; background-color: colors.$sourcecard-background-color;
color: $sourcecard-text-color; color: colors.$sourcecard-text-color;
cursor: not-allowed; cursor: not-allowed;
opacity: 0; opacity: 0;
@ -69,17 +70,17 @@ const containerClasses = computed(() => {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: $sourcecard-hover-background-color; background-color: colors.$sourcecard-hover-background-color;
border: $sourcecard-hover-border; border: colors.$sourcecard-hover-border;
color: $sourcecard-hover-text-color; color: colors.$sourcecard-hover-text-color;
} }
} }
&__selected { &__selected {
background-color: $sourcecard-selected-background-color; background-color: colors.$sourcecard-selected-background-color;
border: $sourcecard-selected-border; border: colors.$sourcecard-selected-border;
color: $sourcecard-selected-text-color; color: colors.$sourcecard-selected-text-color;
box-shadow: $sourcecard-selected-box-shadow; box-shadow: colors.$sourcecard-selected-box-shadow;
cursor: not-allowed; cursor: not-allowed;
} }
@ -96,11 +97,11 @@ const containerClasses = computed(() => {
width: 32px; width: 32px;
height: 32px; height: 32px;
align-items: center; align-items: center;
background-color: $sourcecardbadge-background-color; background-color: colors.$sourcecardbadge-background-color;
border: $sourcecardbadge-border; border: colors.$sourcecardbadge-border;
border-radius: 32px; border-radius: 32px;
color: $sourcecardbadge-text-color; color: colors.$sourcecardbadge-text-color;
font-family: $font-primary; font-family: fonts.$font-primary;
font-size: 16px; font-size: 16px;
} }

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

@ -11,7 +11,9 @@
</template> </template>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components'; @use '~/assets/css/media';
@use '~/assets/css/fonts';
@use '~/assets/css/colors';
.titlebox { .titlebox {
&__container { &__container {
@ -20,7 +22,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
@media (max-width: $phone-max-width) { @media (max-width: media.$phone-max-width) {
padding: 40px 0; padding: 40px 0;
} }
} }
@ -28,9 +30,9 @@
&__titleborderbox1, &__titleborderbox1,
&__titleborderbox2, &__titleborderbox2,
&__titleborderbox3 { &__titleborderbox3 {
border: $box-primary-border; border: colors.$box-primary-border;
border-radius: 16px; border-radius: 16px;
background-color: $box-primary-background-color; background-color: colors.$box-primary-background-color;
} }
&__titleborderbox1 { &__titleborderbox1 {
@ -41,7 +43,7 @@
align-items: center; align-items: center;
z-index: 3; z-index: 3;
@media (max-width: $phone-max-width) { @media (max-width: media.$phone-max-width) {
width: 260px; width: 260px;
height: 140px; height: 140px;
} }
@ -54,7 +56,7 @@
height: 120px; height: 120px;
z-index: 2; z-index: 2;
@media (max-width: $phone-max-width) { @media (max-width: media.$phone-max-width) {
top: 75px; top: 75px;
width: 300px; width: 300px;
height: 80px; height: 80px;
@ -68,7 +70,7 @@
height: 40px; height: 40px;
z-index: 1; z-index: 1;
@media (max-width: $phone-max-width) { @media (max-width: media.$phone-max-width) {
top: 95px; top: 95px;
width: 340px; width: 340px;
} }
@ -76,11 +78,11 @@
&__title { &__title {
font-size: 64px; font-size: 64px;
font-family: $font-primary; font-family: fonts.$font-primary;
color: $box-primary-text-color; color: colors.$box-primary-text-color;
text-align: center; text-align: center;
@media (max-width: $phone-max-width) { @media (max-width: media.$phone-max-width) {
font-size: 32px; font-size: 32px;
} }
} }

30
client/src/components/TopBar.vue
View File

@ -51,7 +51,9 @@ const actionLogout = async () => {
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components'; @use '~/assets/css/media';
@use '~/assets/css/fonts';
@use '~/assets/css/colors';
.topbar { .topbar {
&__container { &__container {
@ -59,14 +61,14 @@ const actionLogout = async () => {
width: 100%; width: 100%;
height: 64px; height: 64px;
align-items: center; align-items: center;
background-color: $topbar-background-color; background-color: colors.$topbar-background-color;
font-size: 16px; font-size: 16px;
font-family: $font-primary; font-family: fonts.$font-primary;
font-weight: bold; font-weight: bold;
cursor: default; cursor: default;
&__cameo { &__cameo {
background-color: $topbar-cameo-background-color; background-color: colors.$topbar-cameo-background-color;
} }
} }
@ -75,11 +77,11 @@ const actionLogout = async () => {
width: 128px; width: 128px;
padding: 0 16px; padding: 0 16px;
text-align: center; text-align: center;
color: $text-primary-color; color: colors.$text-primary-color;
} }
&__username { &__username {
@media (max-width: $phone-width) { @media (max-width: media.$phone-width) {
display: none; display: none;
} }
} }
@ -89,11 +91,11 @@ const actionLogout = async () => {
&__player, &__player,
&__admin { &__admin {
color: $text-primary-color; color: colors.$text-primary-color;
font-size: 24px; font-size: 24px;
text-align: center; text-align: center;
@media (max-width: $phone-width) { @media (max-width: media.$phone-width) {
margin-left: 24px; margin-left: 24px;
text-align: left; text-align: left;
font-size: 20px; font-size: 20px;
@ -105,23 +107,23 @@ const actionLogout = async () => {
width: 1px; width: 1px;
height: calc(64px - 2 * 16px); height: calc(64px - 2 * 16px);
margin: 16px 0; margin: 16px 0;
background-color: $topbar-separator-color; background-color: colors.$topbar-separator-color;
@media (max-width: $phone-width) { @media (max-width: media.$phone-width) {
display: none; display: none;
} }
} }
&__logout-button { &__logout-button {
color: $text-primary-color; color: colors.$text-primary-color;
font-size: 16px; font-size: 16px;
font-family: $font-primary; font-family: fonts.$font-primary;
&:hover { &:hover {
color: $text-primary-hover-color; color: colors.$text-primary-hover-color;
} }
@media (max-width: $phone-width) { @media (max-width: media.$phone-width) {
padding-right: 0; padding-right: 0;
} }
} }

23
client/src/components/admin/InfoTile.vue
View File

@ -24,7 +24,8 @@ const emit = defineEmits(['icon-top-click', 'icon-bottom-click'])
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components'; @use '~/assets/css/fonts';
@use '~/assets/css/colors';
.admin-tile { .admin-tile {
&__container { &__container {
@ -32,15 +33,15 @@ const emit = defineEmits(['icon-top-click', 'icon-bottom-click'])
min-width: 300px; min-width: 300px;
margin: 16px; margin: 16px;
padding: 16px 30px; padding: 16px 30px;
background-color: $admin-tile-background-color; background-color: colors.$admin-tile-background-color;
border: $admin-tile-border; border: colors.$admin-tile-border;
color: $admin-tile-text-color; color: colors.$admin-tile-text-color;
} }
&__title { &__title {
margin-bottom: 16px; margin-bottom: 16px;
font-size: 24px; font-size: 24px;
font-family: $font-primary; font-family: fonts.$font-primary;
} }
&__action-button { &__action-button {
@ -49,7 +50,7 @@ const emit = defineEmits(['icon-top-click', 'icon-bottom-click'])
&__body { &__body {
font-size: 16px; font-size: 16px;
font-family: $font-secondary; font-family: fonts.$font-secondary;
} }
&__icon-bottom-container { &__icon-bottom-container {
@ -72,21 +73,21 @@ const emit = defineEmits(['icon-top-click', 'icon-bottom-click'])
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: $admin-tile-bottom-icon-hover-background-color; background-color: colors.$admin-tile-bottom-icon-hover-background-color;
} }
} }
&__icon-bottom { &__icon-bottom {
margin: 0 auto; margin: 0 auto;
padding: 20px; padding: 20px;
background-color: $admin-tile-bottom-icon-background-color; background-color: colors.$admin-tile-bottom-icon-background-color;
border-bottom: $admin-tile-bottom-icon-border; border-bottom: colors.$admin-tile-bottom-icon-border;
border-radius: 64px; border-radius: 64px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: $admin-tile-bottom-icon-hover-background-color; background-color: colors.$admin-tile-bottom-icon-hover-background-color;
border-bottom: $admin-tile-bottom-icon-hover-border; border-bottom: colors.$admin-tile-bottom-icon-hover-border;
} }
} }
} }

6
client/src/components/admin/PlayerDialog.vue
View File

@ -49,7 +49,7 @@ const generate = () => {
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components'; @use '~/assets/css/colors';
.player-dialog { .player-dialog {
&__label { &__label {
@ -59,8 +59,8 @@ const generate = () => {
&__input { &__input {
border: 1px solid white; border: 1px solid white;
background-color: $dialog-box-background-color; background-color: colors.$dialog-box-background-color;
color: $dialog-box-text-color; color: colors.$dialog-box-text-color;
border-radius: 4px; border-radius: 4px;
} }

10
client/src/layouts/default.vue
View File

@ -20,9 +20,9 @@ const alertMessages = useAlert().getAlertMessagesRef()
</script> </script>
<style lang="scss"> <style lang="scss">
@import '@/assets/css/colors.scss'; @use '~/assets/css/colors';
@import '@/assets/css/fonts.scss'; @use '~/assets/css/fonts-definition';
@import '@/assets/css/components.scss'; @use '~/assets/css/fonts';
html, html,
body, body,
@ -35,8 +35,8 @@ body,
} }
body { body {
background-color: $background-primary-color; background-color: colors.$background-primary-color;
font-family: $font-primary; font-family: fonts.$font-primary;
// override Firefox DownloadStatusBar's setting // override Firefox DownloadStatusBar's setting
margin-bottom: 0 !important; margin-bottom: 0 !important;

4
client/src/pages/admin.vue
View File

@ -15,11 +15,11 @@ await useAuth().authenticateAndLoadUserInfo(['admin'])
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components'; @use '~/assets/css/colors';
.admin { .admin {
&__container { &__container {
color: $text-primary-color; color: colors.$text-primary-color;
} }
&__tiles { &__tiles {

17
client/src/pages/index.vue
View File

@ -47,11 +47,12 @@ const closeCreateTeamDialog = () => { showCreateTeamDialog.value = false }
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components'; @use '~/assets/css/colors';
@use '~/assets/css/media';
body { body {
background-color: $background-primary-color; background-color: colors.$background-primary-color;
color: $text-primary-color; color: colors.$text-primary-color;
margin: 0; margin: 0;
} }
@ -67,7 +68,7 @@ body {
width: 100%; width: 100%;
height: 120px; height: 120px;
@media (max-width: $phone-max-width) { @media (max-width: media.$phone-max-width) {
margin: 32px 0 0 0; margin: 32px 0 0 0;
} }
} }
@ -77,13 +78,13 @@ body {
width: 320px; width: 320px;
align-self: center; align-self: center;
@media (max-width: $phone-max-width) { @media (max-width: media.$phone-max-width) {
width: auto; width: auto;
} }
} }
&__create-team { &__create-team {
@media (max-width: $phone-max-width) { @media (max-width: media.$phone-max-width) {
display: none; display: none;
} }
} }
@ -91,9 +92,9 @@ body {
&__separator { &__separator {
width: 1px; width: 1px;
margin: 0 48px; margin: 0 48px;
border-left: $box-primary-border; border-left: colors.$box-primary-border;
@media (max-width: $phone-max-width) { @media (max-width: media.$phone-max-width) {
display: none; display: none;
} }
} }

9
client/src/pages/setup.vue
View File

@ -64,7 +64,8 @@ const createAdminAccount = async () => {
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components'; @use '~/assets/css/media';
@use '~/assets/css/fonts';
.page-setup { .page-setup {
&__action-box { &__action-box {
@ -73,7 +74,7 @@ const createAdminAccount = async () => {
width: 340px; width: 340px;
margin: 0 auto; margin: 0 auto;
@media (max-width: $phone-max-width) { @media (max-width: media.$phone-max-width) {
margin: 32px 0 0 0; margin: 32px 0 0 0;
width: 100%; width: 100%;
} }
@ -86,14 +87,14 @@ const createAdminAccount = async () => {
} }
&__auth-message { &__auth-message {
font-family: $font-secondary; font-family: fonts.$font-secondary;
font-size: 24px; font-size: 24px;
text-align: center; text-align: center;
margin: 32px; margin: 32px;
} }
&__pin { &__pin {
font-family: $font-secondary; font-family: fonts.$font-secondary;
font-size: 32px; font-size: 32px;
font-weight: 800; font-weight: 800;
text-align: center; text-align: center;