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

Compare commits

base: 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
..
compare: 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

No commits in common. "450319ba35b0fc11790b978d8b86af1124d43239" and "9e63e101cc631fce4a5d286aae2d43591d2ebae0" have entirely different histories.
450319ba35 ... 9e63e101cc

38 changed files with 5243 additions and 7135 deletions
Show Stats Expand all files Collapse all files

1
.nvmrc
View File

@ -1 +0,0 @@
22.14

1
Makefile
View File

@ -83,7 +83,6 @@ 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,10 +7,6 @@ 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.86", "@types/node": "^18.19.17",
"http-proxy": "^1.18.1", "http-proxy": "^1.18.1",
"nuxt": "^3.16.2", "nuxt": "^3.10.2",
"sass": "^1.86.3", "sass": "^1.71.0",
"sass-loader": "^16.0.5", "sass-loader": "^13.3.3",
"typescript-strict-plugin": "^2.4.4", "typescript-strict-plugin": "^2.3.0",
"webpack": "^5.99.5" "webpack": "^5.90.2"
}, },
"dependencies": { "dependencies": {
"@pinia/nuxt": "^0.11.0", "@pinia/nuxt": "^0.4.11",
"@vue/reactivity": "^3.5.13", "@vue/reactivity": "^3.4.19",
"@vue/runtime-core": "^3.5.13", "@vue/runtime-core": "^3.4.19",
"@vue/runtime-dom": "^3.5.13", "@vue/runtime-dom": "^3.4.19",
"@vue/shared": "^3.5.13", "@vue/shared": "^3.4.19",
"nuxt-icons": "^3.2.1", "nuxt-icons": "^3.2.1",
"ofetch": "^1.4.1", "ofetch": "^1.3.3",
"query-string": "^8.2.0", "query-string": "^8.2.0",
"typescript": "^5.8.3", "typescript": "^5.3.3",
"vue": "^3.5.13", "vue": "^3.4.19",
"vue-contenteditable": "^4.1.0", "vue-contenteditable": "^4.1.0",
"vue-router": "^4.5.0" "vue-router": "^4.2.5"
} }
} }

11929
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: #666666; $box-primary-disabled-text-color: darken($box-primary-text-color, 60%);
$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: #3d3d56; $quote-new-hover-background-color: lighten($background-primary-color, 10%);
$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: #3d3d56; $debug-background-color: lighten($background-primary-color, 10%);
$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 Normal file
View File

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

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

@ -1,26 +0,0 @@
@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,2 +1,26 @@
$font-primary: 'Wendy One'; @font-face {
$font-secondary: 'Dosis'; 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;
}

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

@ -7,7 +7,7 @@
</template> </template>
<style lang="scss"> <style lang="scss">
@use '~/assets/css/colors'; @import '~/assets/css/components';
.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: colors.$alert-border; border: $alert-border;
border-radius: 10px; border-radius: 10px;
background-color: colors.$alert-background-color; background-color: $alert-background-color;
font-size: 24px; font-size: 24px;
color: colors.$text-primary-color; color: $text-primary-color;
} }
} }
</style> </style>

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

@ -27,17 +27,16 @@ defineProps({
</script> </script>
<style lang="scss"> <style lang="scss">
@use '~/assets/css/colors'; @import '~/assets/css/components';
@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: colors.$text-secondary-color; color: $text-secondary-color;
text-align: center; text-align: center;
font-family: fonts.$font-secondary; font-family: $font-secondary;
font-weight: bold; font-weight: bold;
font-size: 24px; font-size: 24px;
border: none; border: none;
@ -45,44 +44,44 @@ defineProps({
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: colors.$text-secondary-hover-color; color: $text-secondary-hover-color;
} }
&__border { &__border {
background-color: colors.$button-background-color; background-color: $button-background-color;
color: colors.$button-text-color; color: $button-text-color;
border: colors.$button-border; border: $button-border;
border-radius: 8px; border-radius: 8px;
&:hover { &:hover {
border: colors.$button-hover-border; border: $button-hover-border;
background-color: colors.$button-hover-background-color; background-color: $button-hover-background-color;
color: colors.$button-hover-text-color; color: $button-hover-text-color;
} }
} }
&__disabled, &__disabled,
&__disabled:hover { &__disabled:hover {
cursor: default; cursor: default;
background-color: colors.$button-disabled-background-color; background-color: $button-disabled-background-color;
margin: 4px; margin: 4px;
color: colors.$button-disabled-text-color; color: $button-disabled-text-color;
&.button__button__border { &.button__button__border {
margin: 0; margin: 0;
border: colors.$button-disabled-border-border; border: $button-disabled-border-border;
} }
} }
&__caution { &__caution {
background-color: colors.$button-caution-background-color; background-color: $button-caution-background-color;
border: colors.$button-caution-border; border: $button-caution-border;
color: colors.$button-caution-text-color; color: $button-caution-text-color;
&:hover { &:hover {
background-color: colors.$button-caution-hover-background-color; background-color: $button-caution-hover-background-color;
border: colors.$button-caution-hover-border; border: $button-caution-hover-border;
color: colors.$button-caution-hover-text-color; color: $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">
@use '~/assets/css/media'; @import '~/assets/css/components';
.collect-quotes { .collect-quotes {
&__explaination-box { &__explaination-box {
margin: 16px; margin: 16px;
@media (max-width: media.$phone-width) { @media (max-width: $phone-width) {
display: none; display: none;
} }
} }

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

@ -86,12 +86,11 @@ onMounted(() => {
</script> </script>
<style lang="scss"> <style lang="scss">
@use '~/assets/css/fonts'; @import '~/assets/css/components';
@use '~/assets/css/colors';
.create-team-dialog { .create-team-dialog {
&__description { &__description {
font-family: fonts.$font-secondary; font-family: $font-secondary;
font-size: 18px; font-size: 18px;
} }
@ -108,8 +107,8 @@ onMounted(() => {
&__input { &__input {
border: 1px solid white; border: 1px solid white;
background-color: colors.$dialog-box-background-color; background-color: $dialog-box-background-color;
color: colors.$dialog-box-text-color; color: $dialog-box-text-color;
border-radius: 4px; border-radius: 4px;
} }
@ -122,14 +121,14 @@ onMounted(() => {
} }
&__auth-message { &__auth-message {
font-family: fonts.$font-secondary; font-family: $font-secondary;
font-size: 24px; font-size: 24px;
text-align: center; text-align: center;
margin: 32px; margin: 32px;
} }
&__pin { &__pin {
font-family: fonts.$font-secondary; font-family: $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,9 +23,7 @@ const emit = defineEmits(['close'])
</script> </script>
<style lang="scss"> <style lang="scss">
@use '~/assets/css/media'; @import '~/assets/css/components';
@use '~/assets/css/fonts';
@use '~/assets/css/colors';
.dialog-box { .dialog-box {
&__container { &__container {
@ -34,13 +32,13 @@ const emit = defineEmits(['close'])
min-width: 400px; min-width: 400px;
min-height: 280px; min-height: 280px;
margin: auto; margin: auto;
background-color: colors.$dialog-box-background-color; background-color: $dialog-box-background-color;
border: colors.$dialog-box-border; border: $dialog-box-border;
border-radius: 8px; border-radius: 8px;
color: colors.$dialog-box-text-color; color: $dialog-box-text-color;
z-index: 12; z-index: 12;
@media (max-width: media.$phone-max-width) { @media (max-width: $phone-max-width) {
min-width: unset; min-width: unset;
} }
} }
@ -53,14 +51,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: fonts.$font-primary; font-family: $font-primary;
font-size: 24px; font-size: 24px;
} }
&__body { &__body {
flex-grow: 1; flex-grow: 1;
margin: 36px; margin: 36px;
font-family: fonts.$font-secondary; font-family: $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">
@use '~/assets/css/colors'; @import '~/assets/css/components';
.enginedebug { .enginedebug {
&__container { &__container {
width: 100%; width: 100%;
max-height: 100%; max-height: 100%;
border: colors.$debug-border; border: $debug-border;
background-color: colors.$debug-background-color; background-color: $debug-background-color;
overflow: auto; overflow: auto;
} }
&__json { &__json {
padding: 0 0 0 1em; padding: 0 0 0 1em;
color: colors.$debug-text-color; color: $debug-text-color;
font-size: 10px; font-size: 10px;
} }
} }

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

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

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

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

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

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

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

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

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

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

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

@ -25,20 +25,19 @@ defineProps<{
</script> </script>
<style lang="scss"> <style lang="scss">
@use '~/assets/css/fonts'; @import '~/assets/css/components';
@use '~/assets/css/colors';
.player { .player {
&__row { &__row {
display: flex; display: flex;
background-color: colors.$box-primary-background-color; background-color: $box-primary-background-color;
color: colors.$box-primary-text-color; color: $box-primary-text-color;
font-family: fonts.$font-secondary; font-family: $font-secondary;
font-size: 18px; font-size: 18px;
&__idle { &__idle {
background-color: colors.$box-primary-disabled-background-color; background-color: $box-primary-disabled-background-color;
color: colors.$box-primary-disabled-text-color; color: $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">
@use '~/assets/css/colors'; @import '~/assets/css/components';
.player-list { .player-list {
padding: 8px; padding: 8px;
border: colors.$box-primary-border; border: $box-primary-border;
border-radius: 10px; border-radius: 10px;
background-color: colors.$box-primary-background-color; background-color: $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">
@use '~/assets/css/media'; @import '~/assets/css/components';
.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: media.$phone-max-width) { @media (max-width: $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: media.$phone-max-width) { @media (max-width: $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: media.$phone-max-width) { @media (max-width: $phone-max-width) {
flex-grow: 1; flex-grow: 1;
} }
} }
@ -130,7 +130,7 @@ sources.forEach((source, index) => {
opacity: 100%; opacity: 100%;
} }
@media (max-width: media.$phone-max-width) { @media (max-width: $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: media.$phone-max-width) { @media (max-width: $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: media.$phone-max-width) { @media (max-width: $phone-max-width) {
display: none; display: none;
} }
@media (max-width: calc(media.$desktop-min-width - 1px)) { @media (max-width: calc($desktop-min-width - 1px)) {
margin-left: 16px; margin-left: 16px;
} }
} }

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

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

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

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

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

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

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

@ -30,9 +30,7 @@ const textSize = computed((): string => {
</script> </script>
<style lang="scss"> <style lang="scss">
@use '~/assets/css/media'; @import '~/assets/css/components';
@use '~/assets/css/fonts';
@use '~/assets/css/colors';
.ready-set { .ready-set {
&__container-outer { &__container-outer {
@ -55,7 +53,7 @@ const textSize = computed((): string => {
animation-fill-mode: forwards; animation-fill-mode: forwards;
} }
@media (max-width: media.$phone-max-width) { @media (max-width: $phone-max-width) {
width: 360px; width: 360px;
height: 360px; height: 360px;
} }
@ -68,12 +66,12 @@ const textSize = computed((): string => {
transform: rotate(45deg); transform: rotate(45deg);
width: 370px; width: 370px;
height: 370px; height: 370px;
background-color: colors.$animationbox-background-color; background-color: $animationbox-background-color;
border: colors.$animationbox-border; border: $animationbox-border;
border-radius: 50px; border-radius: 50px;
z-index: 5; z-index: 5;
@media (max-width: media.$phone-max-width) { @media (max-width: $phone-max-width) {
left: 54px; left: 54px;
top: 54px; top: 54px;
width: 240px; width: 240px;
@ -89,11 +87,11 @@ const textSize = computed((): string => {
width: 420px; width: 420px;
height: 420px; height: 420px;
border-radius: 150px; border-radius: 150px;
background-color: colors.$animationbox-animation-color; background-color: $animationbox-animation-color;
animation: spin-rev 5s linear infinite; animation: spin-rev 5s linear infinite;
z-index: 4; z-index: 4;
@media (max-width: media.$phone-max-width) { @media (max-width: $phone-max-width) {
left: 50px; left: 50px;
top: 50px; top: 50px;
width: 260px; width: 260px;
@ -109,11 +107,11 @@ const textSize = computed((): string => {
width: 420px; width: 420px;
height: 420px; height: 420px;
border-radius: 150px; border-radius: 150px;
background-color: colors.$animationbox-animation-color; background-color: $animationbox-animation-color;
z-index: 3; z-index: 3;
animation: spin 6s linear infinite; animation: spin 6s linear infinite;
@media (max-width: media.$phone-max-width) { @media (max-width: $phone-max-width) {
left: 50px; left: 50px;
top: 50px; top: 50px;
width: 260px; width: 260px;
@ -128,8 +126,8 @@ const textSize = computed((): string => {
height: 600px; height: 600px;
line-height: 600px; line-height: 600px;
font-size: 100px; font-size: 100px;
font-family: fonts.$font-primary; font-family: $font-primary;
color: colors.$animationbox-text-color; color: $animationbox-text-color;
text-align: center; text-align: center;
z-index: 10; z-index: 10;
@ -149,7 +147,7 @@ const textSize = computed((): string => {
animation: pop 0.5s ease-in-out; animation: pop 0.5s ease-in-out;
} }
@media (max-width: media.$phone-max-width) { @media (max-width: $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,8 +38,7 @@ const containerClasses = computed(() => {
</script> </script>
<style lang="scss"> <style lang="scss">
@use '~/assets/css/fonts'; @import '~/assets/css/components';
@use '~/assets/css/colors';
.source-card { .source-card {
&__container { &__container {
@ -47,12 +46,12 @@ const containerClasses = computed(() => {
position: relative; position: relative;
width: 180px; width: 180px;
height: 40px; height: 40px;
border: colors.$sourcecard-border; border: $sourcecard-border;
border-radius: 8px; border-radius: 8px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: colors.$sourcecard-background-color; background-color: $sourcecard-background-color;
color: colors.$sourcecard-text-color; color: $sourcecard-text-color;
cursor: not-allowed; cursor: not-allowed;
opacity: 0; opacity: 0;
@ -70,17 +69,17 @@ const containerClasses = computed(() => {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: colors.$sourcecard-hover-background-color; background-color: $sourcecard-hover-background-color;
border: colors.$sourcecard-hover-border; border: $sourcecard-hover-border;
color: colors.$sourcecard-hover-text-color; color: $sourcecard-hover-text-color;
} }
} }
&__selected { &__selected {
background-color: colors.$sourcecard-selected-background-color; background-color: $sourcecard-selected-background-color;
border: colors.$sourcecard-selected-border; border: $sourcecard-selected-border;
color: colors.$sourcecard-selected-text-color; color: $sourcecard-selected-text-color;
box-shadow: colors.$sourcecard-selected-box-shadow; box-shadow: $sourcecard-selected-box-shadow;
cursor: not-allowed; cursor: not-allowed;
} }
@ -97,11 +96,11 @@ const containerClasses = computed(() => {
width: 32px; width: 32px;
height: 32px; height: 32px;
align-items: center; align-items: center;
background-color: colors.$sourcecardbadge-background-color; background-color: $sourcecardbadge-background-color;
border: colors.$sourcecardbadge-border; border: $sourcecardbadge-border;
border-radius: 32px; border-radius: 32px;
color: colors.$sourcecardbadge-text-color; color: $sourcecardbadge-text-color;
font-family: fonts.$font-primary; font-family: $font-primary;
font-size: 16px; font-size: 16px;
} }

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

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

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

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

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

@ -24,8 +24,7 @@ const emit = defineEmits(['icon-top-click', 'icon-bottom-click'])
</script> </script>
<style lang="scss"> <style lang="scss">
@use '~/assets/css/fonts'; @import '~/assets/css/components';
@use '~/assets/css/colors';
.admin-tile { .admin-tile {
&__container { &__container {
@ -33,15 +32,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: colors.$admin-tile-background-color; background-color: $admin-tile-background-color;
border: colors.$admin-tile-border; border: $admin-tile-border;
color: colors.$admin-tile-text-color; color: $admin-tile-text-color;
} }
&__title { &__title {
margin-bottom: 16px; margin-bottom: 16px;
font-size: 24px; font-size: 24px;
font-family: fonts.$font-primary; font-family: $font-primary;
} }
&__action-button { &__action-button {
@ -50,7 +49,7 @@ const emit = defineEmits(['icon-top-click', 'icon-bottom-click'])
&__body { &__body {
font-size: 16px; font-size: 16px;
font-family: fonts.$font-secondary; font-family: $font-secondary;
} }
&__icon-bottom-container { &__icon-bottom-container {
@ -73,21 +72,21 @@ const emit = defineEmits(['icon-top-click', 'icon-bottom-click'])
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: colors.$admin-tile-bottom-icon-hover-background-color; background-color: $admin-tile-bottom-icon-hover-background-color;
} }
} }
&__icon-bottom { &__icon-bottom {
margin: 0 auto; margin: 0 auto;
padding: 20px; padding: 20px;
background-color: colors.$admin-tile-bottom-icon-background-color; background-color: $admin-tile-bottom-icon-background-color;
border-bottom: colors.$admin-tile-bottom-icon-border; border-bottom: $admin-tile-bottom-icon-border;
border-radius: 64px; border-radius: 64px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: colors.$admin-tile-bottom-icon-hover-background-color; background-color: $admin-tile-bottom-icon-hover-background-color;
border-bottom: colors.$admin-tile-bottom-icon-hover-border; border-bottom: $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">
@use '~/assets/css/colors'; @import '~/assets/css/components';
.player-dialog { .player-dialog {
&__label { &__label {
@ -59,8 +59,8 @@ const generate = () => {
&__input { &__input {
border: 1px solid white; border: 1px solid white;
background-color: colors.$dialog-box-background-color; background-color: $dialog-box-background-color;
color: colors.$dialog-box-text-color; color: $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">
@use '~/assets/css/colors'; @import '@/assets/css/colors.scss';
@use '~/assets/css/fonts-definition'; @import '@/assets/css/fonts.scss';
@use '~/assets/css/fonts'; @import '@/assets/css/components.scss';
html, html,
body, body,
@ -35,8 +35,8 @@ body,
} }
body { body {
background-color: colors.$background-primary-color; background-color: $background-primary-color;
font-family: fonts.$font-primary; font-family: $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">
@use '~/assets/css/colors'; @import '~/assets/css/components';
.admin { .admin {
&__container { &__container {
color: colors.$text-primary-color; color: $text-primary-color;
} }
&__tiles { &__tiles {

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

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

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

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