Spythere/pojazdownik
1
0
Fork 0
mirror of https://github.com/Spythere/pojazdownik.git synced 2026-05-03 05:18:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(styles): separated fonts and responsiveness to scss files; made global reference only once

Browse Source
This commit is contained in:
Spythere
2026-03-03 02:29:27 +01:00
parent 8698a53caf
commit 22b8509ebe
25 changed files with 278 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+6 -6
View File
@@ -13,22 +13,22 @@
}, },
"dependencies": { "dependencies": {
"axios": "^1.4.0", "axios": "^1.4.0",
"lucide-vue-next": "^0.552.0", "lucide-vue-next": "^0.576.0",
"pinia": "^3.0.3", "pinia": "^3.0.3",
"prettier": "^3.0.3", "prettier": "^3.0.3",
"vue": "^3.2.37", "vue": "^3.2.37",
"vue-i18n": "11.1.12", "vue-i18n": "11.2.8",
"vue-router": "4" "vue-router": "5.0.3"
}, },
"devDependencies": { "devDependencies": {
"@rushstack/eslint-patch": "^1.3.3", "@rushstack/eslint-patch": "^1.3.3",
"@types/node": "^24.10.0", "@types/node": "^25.3.3",
"@vite-pwa/assets-generator": "^1.0.2", "@vite-pwa/assets-generator": "^1.0.2",
"@vitejs/plugin-vue": "^6.0.1", "@vitejs/plugin-vue": "^6.0.1",
"@vue/eslint-config-prettier": "^10.2.0", "@vue/eslint-config-prettier": "^10.2.0",
"@vue/eslint-config-typescript": "^14.6.0", "@vue/eslint-config-typescript": "^14.6.0",
"@vue/tsconfig": "^0.8.1", "@vue/tsconfig": "^0.9.0",
"eslint": "^9.39.1", "eslint": "^10.0.2",
"eslint-plugin-vue": "^10.5.1", "eslint-plugin-vue": "^10.5.1",
"sass": "^1.59.3", "sass": "^1.59.3",
"typescript": "^5.0.2", "typescript": "^5.0.2",
src/App.vue
+6 -3
View File
@@ -65,19 +65,22 @@ export default defineComponent({
</script> </script>
<style lang="scss"> <style lang="scss">
@use './styles/global';
@use './styles/responsive';
/* APP */ /* APP */
#app { #app {
margin: 0 auto; margin: 0 auto;
color: global.$textColor; color: var(--textColor);
font-size: 1em; font-size: 1em;
padding: 0; padding: 0;
@media screen and (max-width: global.$breakpointMd) { @include responsive.midScreen {
font-size: calc(0.7rem + 0.75vw); font-size: calc(0.7rem + 0.75vw);
} }
@media screen and (orientation: landscape) and (max-width: global.$breakpointMd) { @include responsive.midScreenLandscape {
font-size: calc(0.75rem + 0.4vw); font-size: calc(0.75rem + 0.4vw);
} }
} }
src/components/app/AppModals.vue
+5 -12
View File
@@ -3,22 +3,15 @@
<keep-alive> <keep-alive>
<RealStockCard v-if="store.isRealStockListCardOpen" /> <RealStockCard v-if="store.isRealStockListCardOpen" />
</keep-alive> </keep-alive>
<MigrationInfoCard v-if="store.isMigrationCardOpen" />
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue';
import { useStore } from '../../store'; import { useStore } from '../../store';
import RealStockCard from '../cards/RealStockCard.vue'; import RealStockCard from '../cards/RealStockCard.vue';
import MigrationInfoCard from '../cards/MigrationInfoCard.vue';
export default defineComponent({ const store = useStore();
components: { RealStockCard },
data() {
return {
store: useStore(),
};
},
});
</script> </script>
<style scoped></style>
src/components/app/MainContainer.vue
+4 -2
View File
@@ -20,6 +20,8 @@ export default defineComponent({
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use '@/styles/responsive';
main { main {
display: grid; display: grid;
gap: 1em; gap: 1em;
@@ -30,7 +32,7 @@ main {
grid-template-columns: 1fr 2fr; grid-template-columns: 1fr 2fr;
grid-template-rows: auto 360px minmax(300px, 1fr); grid-template-rows: auto 360px minmax(300px, 1fr);
background-color: global.$bgColorDarker; background-color: var(--bgColorDarker);
border-radius: 1em; border-radius: 1em;
min-height: 950px; min-height: 950px;
@@ -38,7 +40,7 @@ main {
padding: 1em; padding: 1em;
} }
@media screen and (max-width: global.$breakpointMd) { @include responsive.midScreen {
main { main {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
src/components/cards/MigrationInfoCard.vue
+111
View File
@@ -0,0 +1,111 @@
<template>
<div class="migration-card g-card" @toggle-card="toggleCard">
<div class="g-card_bg" @click="store.isMigrationCardOpen = false"></div>
<div class="card-content">
<div class="content-top">
<!-- <img src="/images/icon-loading.svg" alt="loading" height="125" /> -->
<h1>{{ t('migrate-info.header-text') }}</h1>
</div>
<div>
<p v-html="t('migrate-info.paragraph-1-html')"></p>
<p>
<a class="new-link" href="https://stacjownik-td2.spythere.eu/" target="_blank">
{{ t('migrate-info.paragraph-2-link-text') }}
</a>
</p>
<p>
{{ t('migrate-info.paragraph-3-text') }}
</p>
<p class="info-bottom" v-html="t('migrate-info.paragraph-4-html')"></p>
</div>
<div class="content-actions">
<button class="btn" @click="toggleCard">PRZYJĄŁEM!</button>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { useI18n } from 'vue-i18n';
import { useStore } from '../../store';
const { t } = useI18n();
const store = useStore();
function toggleCard() {
store.isMigrationCardOpen = !store.isMigrationCardOpen;
}
</script>
<style lang="scss" scoped>
@use '@/styles/responsive';
.migration-card {
align-items: center;
top: 0;
padding: 0.5em;
}
.card-content {
background-color: #1c1c1c;
z-index: 100;
border-radius: 1em;
max-width: 800px;
min-height: 500px;
padding: 1em 0.5em;
display: grid;
grid-template-rows: auto 1fr auto;
gap: 0.5em;
text-align: center;
font-size: 1.1em;
}
p {
padding: 0.5em 0;
}
a.new-link {
font-size: 1.2em;
color: var(--clr-primary);
color: transparent;
background: var(--clr-primary);
background: linear-gradient(90deg, var(--clr-primary), #ffffff);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: var(--clr-primary) 0 0 10px;
}
.info-bottom {
font-size: 0.9em;
color: #ccc;
}
.content-actions {
display: flex;
justify-content: center;
font-size: 1.2em;
}
.content-actions > button {
background-color: #111;
padding: 0.5em;
}
@include responsive.smallScreen {
.migration-card {
// top: 0;
}
}
</style>
src/components/cards/RealStockCard.vue
+6 -4
View File
@@ -220,6 +220,8 @@ export default defineComponent({
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use '@/styles/responsive';
.action-exit { .action-exit {
display: flex; display: flex;
background-color: #333; background-color: #333;
@@ -247,7 +249,7 @@ export default defineComponent({
z-index: 100; z-index: 100;
@media screen and (max-width: global.$breakpointSm) { @include responsive.smallScreen {
height: 80vh; height: 80vh;
} }
} }
@@ -279,7 +281,7 @@ export default defineComponent({
width: 35%; width: 35%;
} }
@media screen and (max-width: global.$breakpointSm) { @include responsive.smallScreen {
flex-wrap: wrap; flex-wrap: wrap;
input { input {
@@ -307,7 +309,7 @@ ul {
padding: 0.1em; padding: 0.1em;
&[data-last-selected='true'] .stock-title { &[data-last-selected='true'] .stock-title {
border: 1px solid global.$accentColor; border: 1px solid var(--accentColor);
} }
.stock-title { .stock-title {
@@ -323,7 +325,7 @@ ul {
background: #222; background: #222;
} }
@media screen and (max-width: global.$breakpointSm) { @include responsive.smallScreen {
grid-template-columns: 1fr; grid-template-columns: 1fr;
// grid-template-rows: 1fr 1fr; // grid-template-rows: 1fr 1fr;
} }
src/components/sections/InputsSection.vue
+6 -4
View File
@@ -224,6 +224,8 @@ export default defineComponent({
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use '@/styles/responsive';
.inputs-section { .inputs-section {
display: flex; display: flex;
justify-content: center; justify-content: center;
@@ -242,7 +244,7 @@ button.btn--choice {
padding: 0.3em 0.6em; padding: 0.3em 0.6em;
&[data-selected='true'] { &[data-selected='true'] {
background-color: global.$accentColor; background-color: var(--accentColor);
color: black; color: black;
} }
@@ -260,12 +262,12 @@ button.btn--choice {
display: block; display: block;
font-weight: bold; font-weight: bold;
color: global.$accentColor; color: var(--accentColor);
margin-bottom: 0.3em; margin-bottom: 0.3em;
} }
select:focus { select:focus {
border-color: global.$accentColor; border-color: var(--accentColor);
} }
} }
@@ -290,7 +292,7 @@ button.btn--choice {
} }
} }
@media screen and (max-width: global.$breakpointMd) { @include responsive.midScreen {
.inputs-section { .inputs-section {
justify-content: center; justify-content: center;
text-align: center; text-align: center;
src/components/sections/LogoSection.vue
+1 -1
View File
@@ -58,7 +58,7 @@ export default {
button[data-selected='true'] { button[data-selected='true'] {
font-weight: bold; font-weight: bold;
color: global.$accentColor; color: var(--accentColor);
text-decoration: underline; text-decoration: underline;
} }
} }
src/components/sections/TabsSection.vue
+3 -1
View File
@@ -69,6 +69,8 @@ onMounted(() => {
</script> </script>
<style lang="scss"> <style lang="scss">
@use '@/styles/responsive';
// Tab change animation // Tab change animation
.tab-change { .tab-change {
&-enter-from, &-enter-from,
@@ -105,7 +107,7 @@ onMounted(() => {
margin-bottom: 1em; margin-bottom: 1em;
} }
@media screen and (max-width: global.$breakpointSm) { @include responsive.smallScreen {
.tabs-modes { .tabs-modes {
grid-template-areas: grid-template-areas:
'stock wiki' 'stock wiki'
src/components/sections/TrainImageSection.vue
+8 -8
View File
@@ -152,7 +152,7 @@ export default defineComponent({
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use '@/styles/responsive';
.train-image-section { .train-image-section {
display: flex; display: flex;
@@ -178,11 +178,11 @@ img {
} }
&[data-sponsor-only='true'] { &[data-sponsor-only='true'] {
border: 1px solid global.$sponsorColor; border: 1px solid var(--accentColor);
} }
&[data-team-only='true'] { &[data-team-only='true'] {
border: 1px solid global.$teamColor; border: 1px solid var(--teamColor);
} }
} }
@@ -216,25 +216,25 @@ img {
width: 100%; width: 100%;
max-width: 380px; max-width: 380px;
background-color: global.$secondaryColor; background-color: var(--secondaryColor);
font-weight: bold; font-weight: bold;
} }
.placeholder { .placeholder {
height: 250px; height: 250px;
background-color: global.$bgColor; background-color: var(--bgColor);
} }
.sponsor-only { .sponsor-only {
color: global.$sponsorColor; color: var(--accentColor);
} }
.team-only { .team-only {
color: global.$teamColor; color: var(--teamColor);
} }
@media screen and (max-width: global.$breakpointMd) { @include responsive.midScreen {
.train-image-section { .train-image-section {
justify-content: center; justify-content: center;
} }
src/components/tabs/NumberGeneratorTab.vue
+5 -4
View File
@@ -224,7 +224,8 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use '../../styles/tab'; @use '@/styles/tab';
@use '@/styles/responsive';
.category-select { .category-select {
select { select {
@@ -263,7 +264,7 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
margin: 0.5em 0; margin: 0.5em 0;
padding: 0.5em; padding: 0.5em;
background-color: global.$secondaryColor; background-color: var(--secondaryColor);
} }
.category-rules { .category-rules {
@@ -281,13 +282,13 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
margin: 0.25em 0; margin: 0.25em 0;
} }
@media screen and (max-width: global.$breakpointMd) { @include responsive.midScreen {
.number-generator { .number-generator {
min-height: 100vh; min-height: 100vh;
} }
} }
@media screen and (max-width: global.$breakpointSm) { @include responsive.smallScreen {
.regions-select { .regions-select {
flex-wrap: wrap; flex-wrap: wrap;
} }
src/components/tabs/StockGeneratorTab.vue
+3 -3
View File
@@ -335,7 +335,7 @@ h2 {
text-transform: uppercase; text-transform: uppercase;
font-weight: bold; font-weight: bold;
background-color: global.$secondaryColor; background-color: var(--secondaryColor);
&[data-excluded='true'] { &[data-excluded='true'] {
background-color: gray; background-color: gray;
@@ -349,7 +349,7 @@ h2 {
padding: 5px; padding: 5px;
transform: translate(-8px, -50%); transform: translate(-8px, -50%);
background-color: global.$bgColor; background-color: var(--bgColor);
color: white; color: white;
} }
} }
@@ -390,7 +390,7 @@ h2 {
} }
.generator_warning { .generator_warning {
background-color: global.$accentColor; background-color: var(--accentColor);
padding: 0.5em; padding: 0.5em;
text-align: justify; text-align: justify;
font-weight: bold; font-weight: bold;
src/components/tabs/StorageTab.vue
+1 -1
View File
@@ -165,7 +165,7 @@ ul.storage-list {
ul.storage-list > li { ul.storage-list > li {
padding: 0.5em; padding: 0.5em;
background-color: global.$secondaryColor; background-color: var(--secondaryColor);
&[data-current='true'] { &[data-current='true'] {
background-color: #3b3b3b; background-color: #3b3b3b;
src/components/tabs/WikiListTab.vue
+4 -3
View File
@@ -245,6 +245,7 @@ export default defineComponent({
<style lang="scss" scoped> <style lang="scss" scoped>
@use '@/styles/tab'; @use '@/styles/tab';
@use '@/styles/responsive';
.actions { .actions {
display: grid; display: grid;
@@ -318,7 +319,7 @@ export default defineComponent({
} }
.sponsor-only { .sponsor-only {
color: global.$sponsorColor; color: var(--accentColor);
&::after { &::after {
content: '*'; content: '*';
@@ -326,7 +327,7 @@ export default defineComponent({
} }
.team-only { .team-only {
color: global.$teamColor; color: var(--teamColor);
&::after { &::after {
content: '*'; content: '*';
@@ -343,7 +344,7 @@ export default defineComponent({
background-color: #161c2e; background-color: #161c2e;
} }
@media screen and (max-width: global.$breakpointSm) { @include responsive.smallScreen {
.actions-panel { .actions-panel {
align-items: stretch; align-items: stretch;
flex-direction: column; flex-direction: column;
src/components/tabs/stock-list/StockList.vue
+13 -29
View File
@@ -20,13 +20,7 @@
@keydown.backspace="stockListUtils.removeStock(i)" @keydown.backspace="stockListUtils.removeStock(i)"
ref="itemRefs" ref="itemRefs"
> >
<div <div class="stock-info" @dragstart="onDragStart(i)" @drop="onDrop($event, i)" @dragover="allowDrop" draggable="true">
class="stock-info"
@dragstart="onDragStart(i)"
@drop="onDrop($event, i)"
@dragover="allowDrop"
draggable="true"
>
<span class="stock-info-no" :data-selected="i == store.chosenStockListIndex"> <span class="stock-info-no" :data-selected="i == store.chosenStockListIndex">
<span v-if="i == store.chosenStockListIndex">&bull;&nbsp;</span> <span v-if="i == store.chosenStockListIndex">&bull;&nbsp;</span>
{{ i + 1 }}. {{ i + 1 }}.
@@ -34,17 +28,10 @@
<span <span
class="stock-info-type" class="stock-info-type"
:data-sponsor-only=" :data-sponsor-only="stock.vehicleRef.sponsorOnlyTimestamp && stock.vehicleRef.sponsorOnlyTimestamp > Date.now()"
stock.vehicleRef.sponsorOnlyTimestamp &&
stock.vehicleRef.sponsorOnlyTimestamp > Date.now()
"
:data-team-only="stock.vehicleRef.teamOnly" :data-team-only="stock.vehicleRef.teamOnly"
> >
{{ {{ isTractionUnit(stock.vehicleRef) ? stock.vehicleRef.type : getCarSpecFromType(stock.vehicleRef.type) }}
isTractionUnit(stock.vehicleRef)
? stock.vehicleRef.type
: getCarSpecFromType(stock.vehicleRef.type)
}}
</span> </span>
<span class="stock-info-cargo" v-if="stock.cargo"> <span class="stock-info-cargo" v-if="stock.cargo">
@@ -53,9 +40,7 @@
<span class="stock-info-length">{{ stock.vehicleRef.length }}m</span> <span class="stock-info-length">{{ stock.vehicleRef.length }}m</span>
<span class="stock-info-mass"> <span class="stock-info-mass"> {{ ((stock.vehicleRef.weight + (stock.cargo?.weight ?? 0)) / 1000).toFixed(1) }}t </span>
{{ ((stock.vehicleRef.weight + (stock.cargo?.weight ?? 0)) / 1000).toFixed(1) }}t
</span>
<span class="stock-info-speed">{{ stock.vehicleRef.maxSpeed }}km/h</span> <span class="stock-info-speed">{{ stock.vehicleRef.maxSpeed }}km/h</span>
</div> </div>
</li> </li>
@@ -123,10 +108,7 @@ export default defineComponent({
const stock = this.store.stockList[stockID]; const stock = this.store.stockList[stockID];
this.store.chosenStockListIndex = this.store.chosenStockListIndex =
this.store.chosenStockListIndex == stockID && this.store.chosenStockListIndex == stockID && this.store.chosenVehicle?.type == stock.vehicleRef.type ? -1 : stockID;
this.store.chosenVehicle?.type == stock.vehicleRef.type
? -1
: stockID;
if (this.store.chosenStockListIndex == -1) { if (this.store.chosenStockListIndex == -1) {
this.store.chosenVehicle = null; this.store.chosenVehicle = null;
@@ -154,12 +136,14 @@ export default defineComponent({
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use '@/styles/responsive';
.list-wrapper { .list-wrapper {
position: relative; position: relative;
} }
.list-empty { .list-empty {
background-color: global.$secondaryColor; background-color: var(--secondaryColor);
border-radius: 0.5em; border-radius: 0.5em;
padding: 0.75em; padding: 0.75em;
font-weight: bold; font-weight: bold;
@@ -202,14 +186,14 @@ li > .stock-info {
.stock-info-no, .stock-info-no,
.stock-info-type { .stock-info-type {
background-color: global.$secondaryColor; background-color: var(--secondaryColor);
&[data-team-only='true'] { &[data-team-only='true'] {
color: global.$teamColor; color: var(--teamColor);
} }
&[data-sponsor-only='true'] { &[data-sponsor-only='true'] {
color: global.$sponsorColor; color: var(--accentColor);
} }
} }
@@ -218,7 +202,7 @@ li > .stock-info {
text-align: right; text-align: right;
&[data-selected='true'] { &[data-selected='true'] {
color: global.$accentColor; color: var(--accentColor);
} }
} }
@@ -253,7 +237,7 @@ li > .stock-info {
} }
} }
@media screen and (max-width: global.$breakpointMd) { @include responsive.midScreen {
ul { ul {
min-height: auto; min-height: auto;
} }
src/components/tabs/stock-list/StockThumbnails.vue
+2 -2
View File
@@ -199,11 +199,11 @@ ul {
} }
&[data-sponsor-only='true'] > b { &[data-sponsor-only='true'] > b {
color: global.$sponsorColor; color: var(--accentColor);
} }
&[data-team-only='true'] > b { &[data-team-only='true'] > b {
color: global.$teamColor; color: var(--teamColor);
} }
img { img {
src/components/tabs/stock-list/StockWarnings.vue
+1 -1
View File
@@ -91,7 +91,7 @@ export default defineComponent({
.warning { .warning {
padding: 0.25em; padding: 0.25em;
margin: 0.25em 0; margin: 0.25em 0;
background: global.$accentColor; background: var(--accentColor);
color: black; color: black;
font-weight: bold; font-weight: bold;
src/locales/en.json
+10 -1
View File
@@ -339,5 +339,14 @@
"warning_un1965_tn": "TN: LPG - empty tank (UN 1965)", "warning_un1965_tn": "TN: LPG - empty tank (UN 1965)",
"warning_un1202_tn": "TN: diesel fuel (UN 1202)", "warning_un1202_tn": "TN: diesel fuel (UN 1202)",
"warning_military_pn": "PN: military transport" "warning_military_pn": "PN: military transport"
},
"migrate-info": {
"tooltip-content": "Information about migration of\nStacjownik site!",
"header-text": "Attention!",
"paragraph-1-html": "Due to the growing interest in Stacjownik and other applications I have made, <b>as of January 1, 2026, Stacjownik will be <u>permanently moved</u> to a new dedicated domain:</b>",
"paragraph-2-link-text": "https://stacjownik-td2.spythere.eu",
"paragraph-3-text": "This website will no longer receive future updates and after the New Year it will only redirect to the address above.",
"paragraph-4-italic-text": "\"Why are you messing this up? It's been fine for so long!\"",
"paragraph-4-html": "<i>\"Why are you messing this up? It's been fine for so long!\"</i> <br /> The change is mainly caused by the growing website interest and exceeding the free limit plan of the current Google hosting, which forces additional fees for each use of the service above a certain threshold (or otherwise blocks access to it). By moving the site to a dedicated domain (which has already been purchased and is maintained with the financial help of <span class=\"text--donator\">Supporters</span>), I will get rid of unnecessary expenses for a large corporation that can shut down my application at any given time."
} }
} }
src/locales/pl.json
+9 -1
View File
@@ -338,5 +338,13 @@
"warning_un1965_tn": "TN: gazy węglowodorowe skroplone - puste cysterny (UN 1965)", "warning_un1965_tn": "TN: gazy węglowodorowe skroplone - puste cysterny (UN 1965)",
"warning_un1202_tn": "TN: olej napędowy (UN 1202)", "warning_un1202_tn": "TN: olej napędowy (UN 1202)",
"warning_military_pn": "PN: transport wojskowy" "warning_military_pn": "PN: transport wojskowy"
},
"migrate-info": {
"tooltip-content": "Informacja o migracji\nstrony Stacjownika!",
"header-text": "Uwaga!",
"paragraph-1-html": "Ze względu na coraz większe zainteresowanie Stacjownikiem oraz innymi aplikacjami mojego autorstwa <b>z dniem 1 stycznia 2026r. Stacjownik zostaje <u>permamentnie przeniesiony</u> na nową dedykowaną domenę:</b>",
"paragraph-2-link-text": "https://stacjownik-td2.spythere.eu",
"paragraph-3-text": "Obecna strona nie będzie otrzymywać już przyszłych aktualizacji, a po Nowym Roku będzie jedynie przenosić na powyższy adres.",
"paragraph-4-html": "<i>\"Po co psujesz? Przecież było dobrze tyle czasu!\"</i> <br /> Zmiana podyktowana jest głównie wzrostem zainteresowania stroną i przekraczaniem darmowego limitu obecnego hostingu Google'a, który wymusza płatność za każde użycie serwisu ponad określoną wartość (lub w przeciwnym wypadku blokuje do niego dostęp). Przenosząc stronę na dedykowaną domenę (która jest już wykupiona i utrzymywana dzięki pomocy <span class=\"text--donator\">Wspierających</span>), pozbędę się niepotrzebnego wydatku dla wielkiej korporacji, która w każdej chwili może mi wyłączyć aplikację."
} }
} }
src/store.ts
+1
View File
@@ -52,6 +52,7 @@ export const useStore = defineStore('store', {
vehiclePreviewSrc: '', vehiclePreviewSrc: '',
isMigrationCardOpen: false,
isRandomizerCardOpen: false, isRandomizerCardOpen: false,
isRealStockListCardOpen: false, isRealStockListCardOpen: false,
src/styles/_fonts.scss
+19
View File
@@ -0,0 +1,19 @@
@font-face {
font-family: 'Lato';
src:
url('/fonts/Lato-Bold.woff2') format('woff2'),
url('/fonts/Lato-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Lato';
src:
url('/fonts/Lato-Regular.woff2') format('woff2'),
url('/fonts/Lato-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
src/styles/_global.scss
+31 -51
View File
@@ -1,33 +1,15 @@
$breakpointMd: 960px; @use 'fonts';
$breakpointSm: 550px; @use 'responsive';
$bgColor: #2b3552; :root {
$bgColorDarker: #1f263b; --bgColor: #2b3552;
$textColor: #fff; --bgColorDarker: #1f263b;
$secondaryColor: #1b1b1b; --textColor: #fff;
$accentColor: #e4c428; --secondaryColor: #1b1b1b;
--accentColor: #e4c428;
$sponsorColor: gold; --sponsorColor: gold;
$teamColor: #ff4848; --teamColor: #ff4848;
@font-face {
font-family: 'Lato';
src:
url('/fonts/Lato-Bold.woff2') format('woff2'),
url('/fonts/Lato-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Lato';
src:
url('/fonts/Lato-Regular.woff2') format('woff2'),
url('/fonts/Lato-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
@@ -56,7 +38,7 @@ html {
font-family: Lato, sans-serif; font-family: Lato, sans-serif;
background-color: $bgColor; background-color: var(--bgColor);
overflow-x: hidden; overflow-x: hidden;
} }
@@ -78,7 +60,7 @@ a {
&:hover, &:hover,
&:focus { &:focus {
color: $accentColor; color: var(--accentColor);
} }
} }
@@ -104,11 +86,11 @@ button {
color: white; color: white;
&:hover { &:hover {
color: $accentColor; color: var(--accentColor);
} }
&:focus-visible { &:focus-visible {
outline: 1px solid $accentColor; outline: 1px solid var(--accentColor);
} }
} }
@@ -130,7 +112,7 @@ button {
z-index: 100; z-index: 100;
@media screen and (max-width: $breakpointSm) { @include responsive.smallScreen {
left: 50%; left: 50%;
transform: translate(-50%, 3ex); transform: translate(-50%, 3ex);
text-align: center; text-align: center;
@@ -165,7 +147,7 @@ button {
padding: 0.4em 0.75em; padding: 0.4em 0.75em;
outline: none; outline: none;
background-color: $secondaryColor; background-color: var(--secondaryColor);
border-radius: 8px; border-radius: 8px;
font-weight: bold; font-weight: bold;
@@ -174,25 +156,25 @@ button {
background-color 150ms; background-color 150ms;
&:hover { &:hover {
color: $accentColor; color: var(--accentColor);
} }
&.btn--outline { &.btn--outline {
background: none; background: none;
font-weight: bold; font-weight: bold;
outline: 1px solid $accentColor; outline: 1px solid var(--accentColor);
} }
&:focus-visible { &:focus-visible {
color: $accentColor; color: var(--accentColor);
outline: 1px solid white; outline: 1px solid white;
} }
&[data-chosen='true'] { &[data-chosen='true'] {
background-color: $accentColor; background-color: var(--accentColor);
color: black; color: black;
box-shadow: 0 0 5px 1px $accentColor; box-shadow: 0 0 5px 1px var(--accentColor);
} }
&[data-disabled='true'] { &[data-disabled='true'] {
@@ -240,13 +222,13 @@ button {
} }
.link-btn.router-link-exact-active { .link-btn.router-link-exact-active {
color: $accentColor; color: var(--accentColor);
} }
select, select,
input[type='text'], input[type='text'],
input[type='number'] { input[type='number'] {
background: $bgColor; background: var(--bgColor);
border: 2px solid #aaa; border: 2px solid #aaa;
outline: none; outline: none;
@@ -257,7 +239,7 @@ input[type='number'] {
font-size: 1em; font-size: 1em;
&:focus-visible { &:focus-visible {
border-color: $accentColor; border-color: var(--accentColor);
} }
&::placeholder { &::placeholder {
@@ -268,7 +250,7 @@ input[type='number'] {
option { option {
color: white; color: white;
border: none; border: none;
background-color: $bgColor; background-color: var(--bgColor);
} }
ul { ul {
@@ -279,7 +261,7 @@ ul {
.text { .text {
&--accent { &--accent {
color: $accentColor; color: var(--accentColor);
} }
&--grayed { &--grayed {
@@ -336,19 +318,18 @@ hr {
} }
span:focus { span:focus {
color: $accentColor; color: var(--accentColor);
outline: none; outline: none;
} }
label>input:checked+span { label > input:checked + span {
color: $accentColor; color: var(--accentColor);
border-color: $accentColor; border-color: var(--accentColor);
} }
} }
// Vue Transition anims // Vue Transition anims
.slide-top { .slide-top {
&-enter-from, &-enter-from,
&-leave-to { &-leave-to {
transform: translateY(-100%); transform: translateY(-100%);
@@ -361,7 +342,6 @@ hr {
} }
.card-appear { .card-appear {
&-enter-from, &-enter-from,
&-leave-to { &-leave-to {
opacity: 0; opacity: 0;
@@ -371,4 +351,4 @@ hr {
&-leave-active { &-leave-active {
transition: all 100ms ease-in-out; transition: all 100ms ease-in-out;
} }
} }
src/styles/_responsive.scss
+20
View File
@@ -0,0 +1,20 @@
$breakpointMd: 960px;
$breakpointSm: 550px;
@mixin smallScreen() {
@media only screen and (max-width: $breakpointSm) {
@content;
}
}
@mixin midScreen() {
@media only screen and (max-width: $breakpointMd) {
@content;
}
}
@mixin midScreenLandscape() {
@media only screen and (orientation: landscape) and (max-device-height: $breakpointMd) {
@content;
}
}
src/styles/_tab.scss
+1 -3
View File
@@ -1,5 +1,3 @@
@use 'global';
.tab { .tab {
height: 100%; height: 100%;
margin-top: 1px; margin-top: 1px;
@@ -7,7 +5,7 @@
&_header { &_header {
padding: 0.5em 1em; padding: 0.5em 1em;
background-color: global.$secondaryColor; background-color: var(--secondaryColor);
text-align: center; text-align: center;
h2 { h2 {
vite.config.ts
+2 -4
View File
@@ -10,7 +10,7 @@ export default defineConfig({
preview: { port: 4138 }, preview: { port: 4138 },
css: { css: {
preprocessorOptions: { preprocessorOptions: {
scss: { additionalData: `@use '@/styles/global';`, silenceDeprecations: ['legacy-js-api'] }, scss: { silenceDeprecations: ['legacy-js-api'] },
}, },
}, },
resolve: { resolve: {
@@ -23,13 +23,11 @@ export default defineConfig({
VitePWA({ VitePWA({
registerType: 'autoUpdate', registerType: 'autoUpdate',
includeAssets: ['/images/*.{png,svg,jpg}', '/fonts/*.{woff,woff2,ttf}'],
devOptions: { suppressWarnings: true, enabled: true }, devOptions: { suppressWarnings: true, enabled: true },
workbox: { workbox: {
cleanupOutdatedCaches: true, cleanupOutdatedCaches: true,
globPatterns: ['**/*.{js,css,html,jpg,png,svg,img,woff,woff2}'], globPatterns: ['**/*.{js,css,html,ico,woff,woff2,ttf}', '**/*.{png,jpg,jpeg,svg,webp,gif}'],
runtimeCaching: [ runtimeCaching: [
{ {