-
diff --git a/frontend/src/styles/media-queries-blue.scss b/frontend/src/styles/media-queries-blue.scss
index 9d725f05c3b0..45bae3ea5868 100644
--- a/frontend/src/styles/media-queries-blue.scss
+++ b/frontend/src/styles/media-queries-blue.scss
@@ -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;
+ }
}
}
}
diff --git a/frontend/src/styles/media-queries-green.scss b/frontend/src/styles/media-queries-green.scss
index 563a3e547592..2080e20547a2 100644
--- a/frontend/src/styles/media-queries-green.scss
+++ b/frontend/src/styles/media-queries-green.scss
@@ -76,6 +76,12 @@
grid-template-columns: 1fr;
}
}
+
+ &.themes .tabContainer .tabContent.customTheme {
+ .customThemeInputs .customThemeInput {
+ grid-template-columns: 10em 1fr;
+ }
+ }
}
.settingsGroup.quickNav {
justify-content: unset;
diff --git a/frontend/src/styles/media-queries-yellow.scss b/frontend/src/styles/media-queries-yellow.scss
index 403311e15877..8b2183a4e960 100644
--- a/frontend/src/styles/media-queries-yellow.scss
+++ b/frontend/src/styles/media-queries-yellow.scss
@@ -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 {
diff --git a/frontend/src/styles/settings.scss b/frontend/src/styles/settings.scss
index f1a923d2722f..f74bc242a16e 100644
--- a/frontend/src/styles/settings.scss
+++ b/frontend/src/styles/settings.scss
@@ -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);
@@ -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;
+ }
}
}
}
@@ -518,7 +507,6 @@
&.themes {
grid-template-areas:
"title tabs"
- "text text"
"buttons buttons";
column-gap: 2rem;
// row-gap: 0.5rem;
diff --git a/frontend/src/ts/elements/settings/theme-picker.ts b/frontend/src/ts/elements/settings/theme-picker.ts
index 1f536a87bf52..479f21d6dade 100644
--- a/frontend/src/ts/elements/settings/theme-picker.ts
+++ b/frontend/src/ts/elements/settings/theme-picker.ts
@@ -218,7 +218,7 @@ export async function fillCustomButtons(): Promise {
).empty();
const addButton = $(".pageSettings .section.themes .addCustomThemeButton");
const saveButton = $(
- ".pageSettings .section.themes .customThemeEdit #saveCustomThemeButton"
+ ".pageSettings .section.themes .tabContent.customTheme #saveCustomThemeButton"
);
if (!isAuthenticated()) {
@@ -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);
diff --git a/frontend/src/ts/modals/share-custom-theme.ts b/frontend/src/ts/modals/share-custom-theme.ts
index 13d95d7f7051..f05129eab06b 100644
--- a/frontend/src/ts/modals/share-custom-theme.ts
+++ b/frontend/src/ts/modals/share-custom-theme.ts
@@ -31,7 +31,7 @@ async function generateUrl(): Promise {
c: ThemeController.colorVars.map(
(color) =>
$(
- `.pageSettings .customTheme .customThemeEdit #${color}[type='color']`
+ `.pageSettings .customTheme .tabContent.customTheme #${color}[type='color']`
).attr("value") as string
),
};
diff --git a/frontend/src/ts/modals/simple-modals.ts b/frontend/src/ts/modals/simple-modals.ts
index f73c4fa775c6..3d3c38d86b90 100644
--- a/frontend/src/ts/modals/simple-modals.ts
+++ b/frontend/src/ts/modals/simple-modals.ts
@@ -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
);
}