profectus/Profectus
Template
1
0
Fork 4
Code Issues 38 Pull requests 6 Projects 2 Releases Packages Wiki Activity Actions

Improved themes

Browse source
This commit is contained in:
thepaperpilot 2021-09-04 16:51:41 -05:00
parent 6b501dd240
commit bb7db73eba
19 changed files with 99 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/App.vue
View file

@ -39,7 +39,7 @@ export default defineComponent({
<style scoped>
.app {
background-color: var(--background);
color: var(--color);
color: var(--foreground);
display: flex;
flex-flow: column;
min-height: 100%;

6
src/components/board/BoardNode.vue
View file

@ -284,13 +284,13 @@ export default defineComponent({
outlineColor(): string {
return (
getNodeTypeProperty(this.nodeType, this.node, "outlineColor") ||
themes[player.theme].variables["--separator"]
themes[player.theme].variables["--outline"]
);
},
fillColor(): string {
return (
getNodeTypeProperty(this.nodeType, this.node, "fillColor") ||
themes[player.theme].variables["--secondary-background"]
themes[player.theme].variables["--raised-background"]
);
},
progressColor(): string {
@ -299,7 +299,7 @@ export default defineComponent({
titleColor(): string {
return (
getNodeTypeProperty(this.nodeType, this.node, "titleColor") ||
themes[player.theme].variables["--color"]
themes[player.theme].variables["--foreground"]
);
},
progressDisplay(): ProgressDisplay {

1
src/components/common/features.css
View file

@ -6,6 +6,7 @@
border: 2px solid rgba(0, 0, 0, 0.125);
margin: var(--feature-margin);
box-sizing: border-box;
color: var(--feature-foreground);
}
.can,

4
src/components/features/Bar.vue
View file

@ -117,7 +117,7 @@ export default defineComponent({
.border {
border: 2px solid;
border-radius: 10px;
border-color: var(--color);
border-color: var(--foreground);
overflow: hidden;
mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
margin: 0;
@ -125,7 +125,7 @@ export default defineComponent({
.fill {
position: absolute;
background-color: var(--color);
background-color: var(--foreground);
overflow: hidden;
margin-left: -0.5px;
transition-duration: 0.2s;

18
src/components/fields/Select.vue
View file

@ -42,6 +42,7 @@ export default defineComponent({
<style>
.vue-select {
width: 50%;
border-radius: var(--border-radius);
}
.field-buttons .vue-select {
@ -50,23 +51,32 @@ export default defineComponent({
.vue-select,
.vue-dropdown {
border-color: rgba(var(--color), 0.26);
border-color: var(--outline);
}
.vue-dropdown {
background: var(--secondary-background);
background: var(--raised-background);
}
.vue-dropdown-item {
color: var(--color);
color: var(--feature-foreground);
}
.vue-dropdown-item,
.vue-dropdown-item * {
transition-duration: 0s;
}
.vue-dropdown-item.highlighted {
background-color: var(--background-tooltip);
background-color: var(--highlighted);
}
.vue-dropdown-item.selected,
.vue-dropdown-item.highlighted.selected {
background-color: var(--bought);
}
.vue-input input::placeholder {
color: var(--link);
}
</style>

4
src/components/fields/Text.vue
View file

@ -54,6 +54,10 @@ form {
input {
width: 50%;
outline: none;
border: solid 1px var(--outline);
background-color: unset;
border-radius: var(--border-radius);
}
.fullWidth {

26
src/components/fields/Toggle.vue
View file

@ -40,20 +40,21 @@ span {
}
/* track */
span::before {
input + span::before {
content: "";
float: right;
margin: 5px 0 5px 10px;
border-radius: 7px;
width: 36px;
height: 14px;
background-color: rgba(0, 0, 0, 0.38);
background-color: var(--outline);
opacity: 0.38;
vertical-align: top;
transition: background-color 0.2s, opacity 0.2s;
}
/* thumb */
span::after {
input + span::after {
content: "";
position: absolute;
top: 2px;
@ -61,28 +62,31 @@ span::after {
border-radius: 50%;
width: 20px;
height: 20px;
background-color: white;
background-color: var(--locked);
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 1px 5px 0 rgba(0, 0, 0, 0.12);
transition: background-color 0.2s, transform 0.2s;
}
input:checked + span::before {
background-color: rgba(33, 150, 243, 0.6);
background-color: var(--link);
opacity: 0.6;
}
input:checked + span::after {
background-color: rgb(33, 150, 243);
background-color: var(--link);
transform: translateX(16px);
}
/* active */
input:active + span::before {
background-color: rgba(33, 150, 243, 0.6);
background-color: var(--link);
opacity: 0.6;
}
input:checked:active + span::before {
background-color: rgba(0, 0, 0, 0.38);
background-color: var(--outline);
opacity: 0.38;
}
/* disabled */
@ -93,10 +97,12 @@ input:disabled + span {
}
input:disabled + span::before {
background-color: rgba(0, 0, 0, 0.38);
background-color: var(--outline);
opacity: 0.38;
}
input:checked:disabled + span::before {
background-color: rgba(33, 150, 243, 0.6);
background-color: var(--link);
opacity: 0.6;
}
</style>

2
src/components/system/GameOverScreen.vue
View file

@ -78,7 +78,7 @@ export default defineComponent({
.game-over-modal-header {
margin: -20px;
margin-bottom: 0;
background: var(--secondary-background);
background: var(--raised-background);
}
.game-over-modal-header * {

2
src/components/system/Info.vue
View file

@ -112,7 +112,7 @@ export default defineComponent({
display: flex;
margin: -20px;
margin-bottom: 0;
background: var(--secondary-background);
background: var(--raised-background);
align-items: center;
}

12
src/components/system/LayerTab.vue
View file

@ -215,7 +215,7 @@ export default defineComponent({
margin: 0;
cursor: pointer;
font-size: 40px;
color: var(--color);
color: var(--foreground);
border: none;
background-color: transparent;
}
@ -241,8 +241,8 @@ export default defineComponent({
}
.subtabs-container:not(.floating) {
border-top: solid 4px var(--separator);
border-bottom: solid 4px var(--separator);
border-top: solid 4px var(--outline);
border-bottom: solid 4px var(--outline);
}
.subtabs-container:not(.floating) .subtabs {
@ -307,7 +307,7 @@ export default defineComponent({
background: var(--background);
box-shadow: var(--background) 0 2px 3px 5px;
border-radius: 50%;
color: var(--color);
color: var(--foreground);
font-size: 40px;
cursor: pointer;
padding: 0;
@ -324,7 +324,7 @@ export default defineComponent({
left: 20px;
background-color: transparent;
border: 1px solid transparent;
color: var(--color);
color: var(--foreground);
font-size: 40px;
cursor: pointer;
line-height: 40px;
@ -333,7 +333,7 @@ export default defineComponent({
.goBack:hover {
transform: scale(1.1, 1.1);
text-shadow: 0 0 7px var(--color);
text-shadow: 0 0 7px var(--foreground);
}
</style>

2
src/components/system/Microtab.vue
View file

@ -84,7 +84,7 @@ export default defineComponent({
.microtabs {
margin: var(--feature-margin) -11px;
position: relative;
border: solid 4px var(--separator);
border: solid 4px var(--outline);
}
.tabs:not(.floating) {

8
src/components/system/Nav.vue
View file

@ -128,14 +128,14 @@ export default defineComponent({
<style scoped>
.nav {
background-color: var(--secondary-background);
background-color: var(--raised-background);
display: flex;
left: 0;
right: 0;
top: 0;
height: 46px;
width: 100%;
border-bottom: 4px solid var(--separator);
border-bottom: 4px solid var(--outline);
}
.nav > * {
@ -206,7 +206,7 @@ export default defineComponent({
right: -280px;
width: 200px;
transition: right 0.25s ease;
background: var(--secondary-background);
background: var(--raised-background);
z-index: 10;
}
@ -250,7 +250,7 @@ export default defineComponent({
.saves:hover span {
transform: scale(1.2, 1.2);
text-shadow: 5px 0 10px var(--color), -3px 0 12px var(--color);
text-shadow: 5px 0 10px var(--foreground), -3px 0 12px var(--foreground);
}
.options img {

4
src/components/system/Save.vue
View file

@ -111,9 +111,9 @@ export default defineComponent({
<style scoped>
.save {
position: relative;
border: solid 4px var(--separator);
border: solid 4px var(--outline);
padding: 4px;
background: var(--secondary-background);
background: var(--raised-background);
margin: var(--feature-margin);
display: flex;
align-items: center;

4
src/components/system/TabButton.vue
View file

@ -70,7 +70,7 @@ export default defineComponent({
<style scoped>
.tabButton {
background-color: transparent;
color: var(--color);
color: var(--foreground);
font-size: 20px;
cursor: pointer;
padding: 5px 20px;
@ -82,7 +82,7 @@ export default defineComponent({
.tabButton:hover {
transform: scale(1.1, 1.1);
text-shadow: 0 0 7px var(--color);
text-shadow: 0 0 7px var(--foreground);
}
.tabButton:not(.floating) {

4
src/components/system/Tabs.vue
View file

@ -96,7 +96,7 @@ export default defineComponent({
top: 0;
bottom: 0;
width: 6px;
background: var(--separator);
background: var(--outline);
z-index: 1;
}
</style>
@ -105,7 +105,7 @@ export default defineComponent({
.tab hr {
height: 4px;
border: none;
background: var(--separator);
background: var(--outline);
margin: 7px -10px;
}

10
src/components/system/Tooltip.vue
View file

@ -92,7 +92,7 @@ export default defineComponent({
transform: translateX(-50%);
padding: 7px;
border-radius: 3px;
background-color: var(--background-tooltip);
background-color: var(--tooltip-background);
color: var(--points);
z-index: 100 !important;
word-break: break-word;
@ -117,7 +117,7 @@ export default defineComponent({
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: var(--background-tooltip) transparent transparent transparent;
border-color: var(--tooltip-background) transparent transparent transparent;
}
.tooltip.left,
@ -138,7 +138,7 @@ export default defineComponent({
right: 100%;
margin-left: unset;
margin-top: -5px;
border-color: transparent transparent transparent var(--background-tooltip);
border-color: transparent transparent transparent var(--tooltip-background);
}
.tooltip.right {
@ -155,7 +155,7 @@ export default defineComponent({
right: 100%;
margin-left: -10px;
margin-top: -5px;
border-color: transparent var(--background-tooltip) transparent transparent;
border-color: transparent var(--tooltip-background) transparent transparent;
}
.tooltip.bottom {
@ -170,6 +170,6 @@ export default defineComponent({
.tooltip.bottom::after {
top: 0;
margin-top: -10px;
border-color: transparent transparent var(--background-tooltip) transparent;
border-color: transparent transparent var(--tooltip-background) transparent;
}
</style>

2
src/components/system/VerticalRule.vue
View file

@ -16,7 +16,7 @@ export default defineComponent({
<style scoped>
.vr {
width: 4px;
background: var(--separator);
background: var(--outline);
height: 100%;
margin: auto 7px;
}

44
src/data/themes.ts
View file

@ -2,17 +2,20 @@ import { Theme } from "@/typings/theme";
const defaultTheme: Theme = {
variables: {
"--foreground": "#dfdfdf",
"--background": "#0f0f0f",
"--background-tooltip": "rgba(0, 0, 0, 0.75)",
"--secondary-background": "#0f0f0f",
"--color": "#dfdfdf",
"--feature-foreground": "#eee",
"--tooltip-background": "rgba(0, 0, 0, 0.75)",
"--raised-background": "#0f0f0f",
"--points": "#ffffff",
"--locked": "#bf8f8f",
"--highlighted": "#333",
"--bought": "#77bf5f",
"--link": "#02f2f2",
"--separator": "#dfdfdf",
"--border-radius": "25%",
"--danger": "rgb(220, 53, 69)",
"--link": "#02f2f2",
"--outline": "#dfdfdf",
"--border-radius": "15px",
"--modal-border": "solid 2px var(--color)",
"--feature-margin": "0px"
},
@ -34,10 +37,11 @@ export default {
variables: {
...defaultTheme.variables,
"--background": "#2a323d",
"--secondary-background": "#333c4a",
"--feature-foreground": "#000",
"--raised-background": "#333c4a",
"--locked": "#3a3e45",
"--bought": "#5C8A58",
"--separator": "#333c4a",
"--outline": "#333c4a",
"--border-radius": "4px",
"--modal-border": "",
"--feature-margin": "5px"
@ -50,16 +54,18 @@ export default {
...defaultTheme,
variables: {
...defaultTheme.variables,
"--color": "#D8DEE9",
"--points": "#E5E9F0",
"--foreground": "#D8DEE9",
"--background": "#2E3440",
"--secondary-background": "#3B4252",
"--locked": "#3B4252",
"--feature-foreground": "#000",
"--raised-background": "#3B4252",
"--points": "#E5E9F0",
"--locked": "#4c566a",
"--highlighted": "#434c5e",
"--bought": "#8FBCBB",
"--link": "#88C0D0",
"--separator": "#3B4252",
"--border-radius": "4px",
"--danger": "#D08770",
"--link": "#88C0D0",
"--outline": "#3B4252",
"--border-radius": "4px",
"--modal-border": "solid 2px #3B4252",
"--feature-margin": "5px"
},
@ -70,13 +76,13 @@ export default {
...defaultTheme,
variables: {
...defaultTheme.variables,
"--foreground": "#bfdfff",
"--background": "#001f3f",
"--background-tooltip": "rgba(0, 15, 31, 0.75)",
"--secondary-background": "#001f3f",
"--color": "#bfdfff",
"--tooltip-background": "rgba(0, 15, 31, 0.75)",
"--raised-background": "#001f3f",
"--points": "#dfefff",
"--locked": "#c4a7b3",
"--separator": "#bfdfff"
"--outline": "#bfdfff"
}
} as Theme
} as Record<Themes, Theme>;

14
src/typings/theme.d.ts vendored
View file

@ -1,16 +1,18 @@
export interface Theme {
variables: {
"--foreground": string;
"--background": string;
"--background-tooltip": string;
"--secondary-background": string;
"--color": string;
"--feature-foreground": string;
"--tooltip-background": string;
"--raised-background": string;
"--points": string;
"--locked": string;
"--highlighted": string;
"--bought": string;
"--link": string;
"--separator": string;
"--border-radius": string;
"--danger": string;
"--link": string;
"--outline": string;
"--border-radius": string;
"--modal-border": string;
"--feature-margin": string;
};