mirror of
https://github.com/thepaperpilot/Advent-Incremental.git
synced 2024-11-22 00:21:34 +00:00
Style refinements
This commit is contained in:
ducdat0507
parent
1871fe8f60
commit
5919f1a579
10 changed files with 70 additions and 30 deletions
5
package-lock.json
generated
5
package-lock.json
generated
|
|
@ -1090,6 +1090,11 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"@fontsource/great-vibes": {
|
||||
"version": "4.5.10",
|
||||
"resolved": "https://registry.npmjs.org/@fontsource/great-vibes/-/great-vibes-4.5.10.tgz",
|
||||
"integrity": "sha512-ABrgq127wEex95tVBpa6zAjKDeBzq+c2eHw2qDs/V/Iw+Agp/NHO6I5AWv0iDkWHoboVfckmrDbKO+gchMo0cw=="
|
||||
},
|
||||
"@fontsource/material-icons": {
|
||||
"version": "4.5.4",
|
||||
"resolved": "https://registry.npmjs.org/@fontsource/material-icons/-/material-icons-4.5.4.tgz",
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
"serve": "vite preview --host"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fontsource/great-vibes": "^4.5.10",
|
||||
"@fontsource/material-icons": "^4.5.4",
|
||||
"@fontsource/roboto-mono": "^4.5.8",
|
||||
"@pixi/app": "~6.3.2",
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@ import themes from "./data/themes";
|
|||
import settings, { gameComponents } from "./game/settings";
|
||||
import "./main.css";
|
||||
import "@fontsource/roboto-mono";
|
||||
import "@fontsource/great-vibes";
|
||||
import type { CSSProperties } from "vue";
|
||||
|
||||
const useHeader = projInfo.useHeader;
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<Modal v-model="isOpen">
|
||||
<Modal class="info-modal" v-model="isOpen">
|
||||
<template v-slot:header>
|
||||
<div class="info-modal-header">
|
||||
<img class="info-modal-logo" v-if="logo" :src="logo" :alt="title" />
|
||||
<div class="info-modal-title">
|
||||
<h2>{{ title }}</h2>
|
||||
<h2>- {{ title }} -</h2>
|
||||
<h4>
|
||||
v{{ versionNumber }}<span v-if="versionTitle">: {{ versionTitle }}</span>
|
||||
- v{{ versionNumber }}<span v-if="versionTitle">: {{ versionTitle }}</span> -
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -95,6 +95,12 @@ function openChangelog() {
|
|||
</script>
|
||||
|
||||
<style>
|
||||
.info-modal .modal-header {
|
||||
font-family: unset;
|
||||
font-weight: unset;
|
||||
font-size: unset;
|
||||
margin-top: unset;
|
||||
}
|
||||
.info-modal-header {
|
||||
display: flex;
|
||||
margin: -20px;
|
||||
|
|
@ -114,9 +120,17 @@ function openChangelog() {
|
|||
|
||||
.info-modal-title {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
padding: 10px 0;
|
||||
margin-left: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.info-modal-title h2 {
|
||||
font-family: "Great Vibes", cursive;
|
||||
font-weight: normal;
|
||||
font-size: 64px;
|
||||
margin-top: -40px;
|
||||
}
|
||||
|
||||
.info-modal-discord-link {
|
||||
|
|
|
|||
|
|
@ -88,9 +88,10 @@ defineExpose({ isOpen, nodes });
|
|||
.modal-container {
|
||||
width: 640px;
|
||||
max-width: 95vw;
|
||||
max-height: 95vh;
|
||||
max-height: calc(95vh - 20px);
|
||||
background-color: var(--background);
|
||||
padding: 20px;
|
||||
margin-top: 20px;
|
||||
border-radius: 5px;
|
||||
transition: all 0.3s ease;
|
||||
text-align: left;
|
||||
|
|
@ -102,6 +103,13 @@ defineExpose({ isOpen, nodes });
|
|||
|
||||
.modal-header {
|
||||
width: 100%;
|
||||
margin-top: -50px;
|
||||
text-align: center;
|
||||
}
|
||||
.modal-header > h2 {
|
||||
font-family: "Great Vibes", cursive;
|
||||
font-weight: normal;
|
||||
font-size: 64px;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
|
|
|
|||
|
|
@ -168,7 +168,8 @@ function openDiscord() {
|
|||
}
|
||||
|
||||
.title {
|
||||
font-size: 36px;
|
||||
font-family: "Great Vibes", cursive;
|
||||
font-size: 46px;
|
||||
text-align: left;
|
||||
margin-left: 12px;
|
||||
cursor: unset;
|
||||
|
|
@ -177,6 +178,7 @@ function openDiscord() {
|
|||
.nav > .title {
|
||||
width: unset;
|
||||
flex-shrink: 1;
|
||||
padding-right: 8px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
<template>
|
||||
<Modal v-model="isOpen">
|
||||
<template v-slot:header>
|
||||
<div class="header">
|
||||
<h2>Options</h2>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:body>
|
||||
<Select title="Theme" :options="themes" v-model="theme" />
|
||||
|
|
@ -77,9 +75,6 @@ const progressMethodTitle = jsx(() => (
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.header {
|
||||
margin-bottom: -10px;
|
||||
}
|
||||
|
||||
*:deep() .tooltip-container {
|
||||
display: inline;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
.modifier-container {
|
||||
display: flex;
|
||||
padding: 1px 8px;
|
||||
}
|
||||
|
||||
.modifier-container:nth-child(2n) {
|
||||
|
|
@ -9,6 +10,7 @@
|
|||
.modifier-amount {
|
||||
flex-basis: 100px;
|
||||
flex-shrink: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.modifier-description {
|
||||
|
|
|
|||
|
|
@ -308,13 +308,13 @@ export function createCollapsibleModifierSections(
|
|||
const modifiers = unref(collapsed.value[i]) ? null : (
|
||||
<>
|
||||
<div class="modifier-container">
|
||||
<span class="modifier-description">
|
||||
{renderJSX(unref(processed.baseText[i]) ?? "Base")}
|
||||
</span>
|
||||
<span class="modifier-amount">
|
||||
{format(unref(processed.base[i]) ?? 1)}
|
||||
{s.unit}
|
||||
</span>
|
||||
<span class="modifier-description">
|
||||
{renderJSX(unref(processed.baseText[i]) ?? "Base")}
|
||||
</span>
|
||||
</div>
|
||||
{renderJSX(unref(s.modifier.description))}
|
||||
</>
|
||||
|
|
@ -331,8 +331,15 @@ export function createCollapsibleModifierSections(
|
|||
<br />
|
||||
{modifiers}
|
||||
<hr />
|
||||
Total: {format(s.modifier.apply(unref(processed.base[i]) ?? 1))}
|
||||
<div class="modifier-container">
|
||||
<span class="modifier-description">
|
||||
Total
|
||||
</span>
|
||||
<span class="modifier-amount">
|
||||
{format(s.modifier.apply(unref(processed.base[i]) ?? 1))}
|
||||
{s.unit}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -77,16 +77,16 @@ export function createAdditiveModifier<T extends AdditiveModifierOptions>(
|
|||
? undefined
|
||||
: jsx(() => (
|
||||
<div class="modifier-container">
|
||||
<span class="modifier-amount">
|
||||
{Decimal.gte(unref(processedAddend), 0) ? "+" : ""}
|
||||
{format(unref(processedAddend))}
|
||||
</span>
|
||||
{unref(processedDescription) ? (
|
||||
<span class="modifier-description">
|
||||
{/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
|
||||
{renderJSX(unref(processedDescription)!)}
|
||||
</span>
|
||||
) : null}
|
||||
<span class="modifier-amount">
|
||||
{Decimal.gte(unref(processedAddend), 0) ? "+" : ""}
|
||||
{format(unref(processedAddend))}
|
||||
</span>
|
||||
</div>
|
||||
))
|
||||
};
|
||||
|
|
@ -125,15 +125,15 @@ export function createMultiplicativeModifier<T extends MultiplicativeModifierOpt
|
|||
? undefined
|
||||
: jsx(() => (
|
||||
<div class="modifier-container">
|
||||
<span class="modifier-amount">
|
||||
x{format(unref(processedMultiplier))}
|
||||
</span>
|
||||
{unref(processedDescription) ? (
|
||||
<span class="modifier-description">
|
||||
{/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
|
||||
{renderJSX(unref(processedDescription)!)}
|
||||
</span>
|
||||
) : null}
|
||||
<span class="modifier-amount">
|
||||
×{format(unref(processedMultiplier))}
|
||||
</span>
|
||||
</div>
|
||||
))
|
||||
};
|
||||
|
|
@ -194,9 +194,6 @@ export function createExponentialModifier<T extends ExponentialModifierOptions>(
|
|||
? undefined
|
||||
: jsx(() => (
|
||||
<div class="modifier-container">
|
||||
<span class="modifier-amount">
|
||||
^{format(unref(processedExponent))}
|
||||
</span>
|
||||
{unref(processedDescription) ? (
|
||||
<span class="modifier-description">
|
||||
{/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
|
||||
|
|
@ -204,6 +201,9 @@ export function createExponentialModifier<T extends ExponentialModifierOptions>(
|
|||
{supportLowNumbers ? " (+1 effective)" : null}
|
||||
</span>
|
||||
) : null}
|
||||
<span class="modifier-amount">
|
||||
^{format(unref(processedExponent))}
|
||||
</span>
|
||||
</div>
|
||||
))
|
||||
};
|
||||
|
|
@ -279,16 +279,21 @@ export function createModifierSection(
|
|||
</h3>
|
||||
<br />
|
||||
<div class="modifier-container">
|
||||
<span class="modifier-description">{renderJSX(baseText)}</span>
|
||||
<span class="modifier-amount">
|
||||
{format(base)}
|
||||
{unit}
|
||||
</span>
|
||||
<span class="modifier-description">{renderJSX(baseText)}</span>
|
||||
</div>
|
||||
{renderJSX(unref(modifier.description))}
|
||||
<hr />
|
||||
Total: {format(modifier.apply(base))}
|
||||
<div class="modifier-container">
|
||||
<span class="modifier-description">Total</span>
|
||||
<span class="modifier-amount">
|
||||
{format(modifier.apply(base))}
|
||||
{unit}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue