Skip to content

[pull] master from monkeytypegame:master #675

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pull merged 1 commit into from
Oct 28, 2025
Merged

[pull] master from monkeytypegame:master #675

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 28 additions & 9 deletions frontend/src/html/pages/settings.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1502,8 +1502,8 @@
<!-- Used to convert colors to hex -->
<div class="colorConverter"></div>
<div class="allCustomThemes buttons"></div>
<div class="customThemeEdit">
<div class="customThemeInputs">
<div class="customThemeInputs">
<div class="customThemeInput">
<label class="colorText">background</label>
<div class="colorPicker inputAndButton">
<input
Expand All @@ -1529,6 +1529,8 @@
id="--bg-color"
/>
</div>
</div>
<div class="customThemeInput">
<label class="colorText">sub alt</label>
<div class="colorPicker inputAndButton">
<input
Expand All @@ -1554,6 +1556,8 @@
id="--sub-alt-color"
/>
</div>
</div>
<div class="customThemeInput">
<label class="colorText">main</label>
<div class="colorPicker inputAndButton">
<input
Expand All @@ -1572,6 +1576,8 @@
id="--main-color"
/>
</div>
</div>
<div class="customThemeInput">
<label class="colorText">sub</label>
<div class="colorPicker inputAndButton">
<input
Expand All @@ -1590,6 +1596,8 @@
id="--sub-color"
/>
</div>
</div>
<div class="customThemeInput">
<label class="colorText">caret</label>
<div class="colorPicker inputAndButton">
<input
Expand All @@ -1608,6 +1616,8 @@
id="--caret-color"
/>
</div>
</div>
<div class="customThemeInput">
<label class="colorText">text</label>
<div class="colorPicker inputAndButton">
<input
Expand All @@ -1626,9 +1636,11 @@
id="--text-color"
/>
</div>
</div>

<span class="spacer"></span>
<!-- <span class="spacer"></span> -->

<div class="customThemeInput">
<label class="colorText">error</label>
<div class="colorPicker inputAndButton">
<input
Expand All @@ -1647,6 +1659,8 @@
id="--error-color"
/>
</div>
</div>
<div class="customThemeInput">
<label class="colorText">extra error</label>
<div class="colorPicker inputAndButton">
<input
Expand All @@ -1665,6 +1679,10 @@
id="--error-extra-color"
/>
</div>
</div>

<span class="colorfulHeader">colorful mode</span>
<div class="customThemeInput">
<label class="colorText">error</label>
<div class="colorPicker inputAndButton">
<input
Expand All @@ -1683,7 +1701,8 @@
id="--colorful-error-color"
/>
</div>

</div>
<div class="customThemeInput">
<label class="colorText">extra error</label>
<div class="colorPicker inputAndButton">
<input
Expand All @@ -1703,11 +1722,11 @@
/>
</div>
</div>
<div class="customThemeButtons">
<button id="loadCustomColorsFromPreset">load from preset</button>
<button id="shareCustomThemeButton">share</button>
<button id="saveCustomThemeButton">save as new</button>
</div>
</div>
<div class="customThemeButtons">
<button id="loadCustomColorsFromPreset">load from preset</button>
<button id="shareCustomThemeButton">share</button>
<button id="saveCustomThemeButton">save as new</button>
</div>
</div>
<div tabContent="preset" class="tabContent">
Expand Down
23 changes: 14 additions & 9 deletions frontend/src/styles/media-queries-blue.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,15 +119,20 @@
grid-template-areas:
"title"
"text" "buttons";
.customThemeEdit {
.spacer {
display: none;
}
.customThemeInputs {
grid-template-columns: 1fr 1.5fr;
}
.customThemeButtons {
grid-template-columns: 1fr;

&.themes {
grid-template-columns: 1fr 1fr;
gap: 1em;
.tabContainer .tabContent.customTheme {
.customThemeInputs {
grid-template-columns: 1fr;
.customThemeInput {
grid-template-columns: 1fr 1fr;
}
}
.customThemeButtons {
grid-template-columns: 1fr;
}
}
}
}
Expand Down
6 changes: 6 additions & 0 deletions frontend/src/styles/media-queries-green.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,12 @@
grid-template-columns: 1fr;
}
}

&.themes .tabContainer .tabContent.customTheme {
.customThemeInputs .customThemeInput {
grid-template-columns: 10em 1fr;
}
}
}
.settingsGroup.quickNav {
justify-content: unset;
Expand Down
5 changes: 5 additions & 0 deletions frontend/src/styles/media-queries-yellow.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,11 @@
.pageSettings {
.section {
grid-template-columns: 1.5fr 1fr;
&.themes .tabContainer .tabContent.customTheme {
.customThemeInputs .customThemeInput {
grid-template-columns: 15em 1fr;
}
}
}
}
.pageAccountSettings .main {
Expand Down
92 changes: 40 additions & 52 deletions frontend/src/styles/settings.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -268,52 +268,6 @@
margin-bottom: 1rem;
}

& .customThemeEdit {
// grid-row: 3;
display: grid;
gap: 1rem;
// grid-template-columns: 1fr 1fr 1fr 1fr;
// justify-items: stretch;
// gap: 0.5rem 1rem;

.customThemeInputs {
display: grid;
grid-template-columns: 1fr 1.5fr 1fr 1.5fr;
gap: 1rem;
}

.customThemeButtons {
display: grid;
gap: 1rem;
grid-template-columns: 1fr 1fr 1fr;
}

.inputAndButton {
grid-template-columns: 1fr auto;
}

input {
width: 100%;
}

label {
display: grid;
place-content: center start;
margin-left: 0.5rem;
}

& .spacer {
grid-column: span 4;
}

& .buttons {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-column: 1/5;
gap: 0.5rem;
}
}

.groupTitle {
font-size: 1rem;
color: var(--sub-color);
Expand Down Expand Up @@ -407,13 +361,48 @@

&.customTheme {
grid-template-columns: 1fr;
.colorText {
color: var(--text-color);

.customThemeInputs {
display: grid;
// margin-block: 1em;
margin-bottom: 1em;
grid-template-columns: 1fr 1fr;
gap: 1rem;

.customThemeInput {
display: grid;
color: var(--text-color);
grid-template-columns: 20em 1fr;
align-items: center;
gap: 1em;

.inputAndButton {
margin-bottom: 0;
width: 100%;
input {
width: 100%;
}

.button {
margin-left: 0.5em;
}
}
}

.colorfulHeader {
grid-column: 1/-1;
// margin-left: 0.5em;
color: var(--sub-color);
}
}
}

.text {
align-self: center;
.customThemeButtons {
display: grid;
margin-top: 0.5em;
grid-template-columns: 1fr 1fr 1fr;
grid-column: 1/-1;
gap: 0.5em;
}
}
}
}
Expand Down Expand Up @@ -518,7 +507,6 @@
&.themes {
grid-template-areas:
"title tabs"
"text text"
"buttons buttons";
column-gap: 2rem;
// row-gap: 0.5rem;
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/ts/elements/settings/theme-picker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -218,7 +218,7 @@ export async function fillCustomButtons(): Promise<void> {
).empty();
const addButton = $(".pageSettings .section.themes .addCustomThemeButton");
const saveButton = $(
".pageSettings .section.themes .customThemeEdit #saveCustomThemeButton"
".pageSettings .section.themes .tabContent.customTheme #saveCustomThemeButton"
);

if (!isAuthenticated()) {
Expand Down Expand Up @@ -284,9 +284,9 @@ function saveCustomThemeColors(): void {
const newColors: string[] = [];
for (const color of ThemeController.colorVars) {
newColors.push(
$(
`.pageSettings .customTheme .customThemeEdit #${color}[type='color']`
).attr("value") as string
$(`.pageSettings .tabContent.customTheme #${color}[type='color']`).attr(
"value"
) as string
);
}
UpdateConfig.setCustomThemeColors(newColors as CustomThemeColors);
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/ts/modals/share-custom-theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ async function generateUrl(): Promise<string> {
c: ThemeController.colorVars.map(
(color) =>
$(
`.pageSettings .customTheme .customThemeEdit #${color}[type='color']`
`.pageSettings .customTheme .tabContent.customTheme #${color}[type='color']`
).attr("value") as string
),
};
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/ts/modals/simple-modals.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1137,7 +1137,7 @@ list.updateCustomTheme = new SimpleModal({
for (const color of ThemeController.colorVars) {
newColors.push(
$(
`.pageSettings .customTheme .customThemeEdit #${color}[type='color']`
`.pageSettings .customTheme .tabContent.customTheme #${color}[type='color']`
).attr("value") as string
);
}
Expand Down
Loading