thepaperpilot/Profectus
1
0
Fork 0
forked from profectus/Profectus
Code Pull requests 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> <style scoped>
.app { .app {
background-color: var(--background); background-color: var(--background);
color: var(--color); color: var(--foreground);
display: flex; display: flex;
flex-flow: column; flex-flow: column;
min-height: 100%; min-height: 100%;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

44
src/data/themes.ts
View file

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

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

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