backups/Fantasy-Map-Generator
1
0
Fork 0
mirror of https://github.com/Azgaar/Fantasy-Map-Generator.git synced 2025-12-17 09:41:24 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

editable theme color

Browse source
This commit is contained in:
Azgaar 2021-09-21 21:44:03 +03:00
parent 385d9fa27e
commit 5492a0e643
4 changed files with 393 additions and 333 deletions
Download patch file Download diff file Expand all files Collapse all files

96
index.css
View file

@ -228,11 +228,6 @@ t,
cursor: pointer; cursor: pointer;
} }
#options .pressed {
background-color: #896c77 !important;
font-style: italic;
}
i.icon-lock { i.icon-lock {
cursor: pointer; cursor: pointer;
} }
@ -328,10 +323,21 @@ text.drag {
text-shadow: 0 0 1px red; text-shadow: 0 0 1px red;
} }
#dialogs {
background-color: var(--bg-dialogs);
}
.draggable { .draggable {
cursor: move; cursor: move;
} }
.ui-widget-header {
border-bottom: 1px solid var(--dark-solid);
background: var(--header);
color: #ffffff;
font-weight: bold;
}
.ui-dialog, .ui-dialog,
#optionsContainer { #optionsContainer {
user-select: none; user-select: none;
@ -343,6 +349,7 @@ text.drag {
border: solid 1px #5e4fa2; border: solid 1px #5e4fa2;
margin: 10px; margin: 10px;
padding-bottom: 0.3em; padding-bottom: 0.3em;
background: var(--bg-light);
} }
#options input, #options input,
@ -361,7 +368,7 @@ text.drag {
} }
.tab { .tab {
border-bottom: 1px solid #5d4651; border-bottom: 1px solid var(--dark-solid);
height: 2.2em; height: 2.2em;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -375,19 +382,19 @@ div.tab > button#optionsHide {
button.options { button.options {
width: 100%; width: 100%;
background-color: #997b89; background-color: var(--bg-main);
font-weight: bold; font-weight: bold;
border: none; border: none;
transition: 0.2s; transition: 0.2s;
} }
button.options:hover { button.active {
background-color: #806070 !important; background-color: var(--header);
color: white !important; color: white;
} }
button.active { button.options:hover {
background-color: #916e7f; background-color: var(--header-active);
color: white; color: white;
} }
@ -417,7 +424,7 @@ button.active {
#options i { #options i {
color: #31272c; color: #31272c;
font-size: 0.8em; font-size: 0.85em;
cursor: pointer; cursor: pointer;
} }
@ -466,11 +473,11 @@ input[type="color"]::-webkit-color-swatch-wrapper {
border-radius: 15%; border-radius: 15%;
width: 0.91em; width: 0.91em;
height: 0.91em; height: 0.91em;
background: #a58394; background: var(--light-solid);
border: 1px solid #5d4651; border: 1px solid var(--dark-solid);
cursor: pointer; cursor: pointer;
margin-top: -0.4em; margin-top: -0.4em;
box-shadow: 0.5px 0.5px 0px #5d4651; box-shadow: 0.5px 0.5px 0px var(--dark-solid);
} }
#options input[type="range"]::-moz-range-thumb { #options input[type="range"]::-moz-range-thumb {
@ -478,10 +485,10 @@ input[type="color"]::-webkit-color-swatch-wrapper {
border-radius: 15%; border-radius: 15%;
width: 0.73em; width: 0.73em;
height: 0.73em; height: 0.73em;
background: #a58394; background: var(--light-solid);
border: 1px solid #5d4651; border: 1px solid var(--dark-solid);
cursor: pointer; cursor: pointer;
box-shadow: 0.5px 0.5px 0px #5d4651; box-shadow: 0.5px 0.5px 0px var(--dark-solid);
} }
#options input[type="range"]::-webkit-slider-runnable-track { #options input[type="range"]::-webkit-slider-runnable-track {
@ -525,7 +532,7 @@ input[type="color"]::-webkit-color-swatch-wrapper {
} }
#optionsContent input[type="number"]:hover { #optionsContent input[type="number"]:hover {
outline: 1px solid #5d4651; outline: 1px solid var(--dark-solid);
} }
#optionsContent input.paired { #optionsContent input.paired {
@ -553,6 +560,11 @@ input[type="color"]::-webkit-color-swatch-wrapper {
font-weight: bold; font-weight: bold;
} }
#options input[type="color"] {
width: 2em;
padding: 1px;
}
.tabcontent button.sideButton { .tabcontent button.sideButton {
border-radius: 15%; border-radius: 15%;
font-size: 0.8em; font-size: 0.8em;
@ -606,7 +618,7 @@ input[type="color"]::-webkit-color-swatch-wrapper {
#exitCustomization > div { #exitCustomization > div {
width: 12em; width: 12em;
background: #5d4651; background: var(--dark-solid);
cursor: move; cursor: move;
} }
@ -642,7 +654,7 @@ input[type="color"]::-webkit-color-swatch-wrapper {
} }
.tabcontent button { .tabcontent button {
background-color: #916e7f; background-color: var(--bg-lighter);
border: none; border: none;
padding: 0.45em 0.75em; padding: 0.45em 0.75em;
margin: 0.35em 0; margin: 0.35em 0;
@ -650,8 +662,13 @@ input[type="color"]::-webkit-color-swatch-wrapper {
font-size: 1em; font-size: 1em;
} }
.tabcontent button.pressed {
background-color: var(--header);
font-style: italic;
}
.tabcontent button:hover { .tabcontent button:hover {
background-color: #a8879d !important; background-color: var(--header-active);
} }
#toolsContent div { #toolsContent div {
@ -684,12 +701,12 @@ input[type="color"]::-webkit-color-swatch-wrapper {
} }
fieldset { fieldset {
border: 1px solid #5d4651; border: 1px solid var(--dark-solid);
} }
.tabcontent li { .tabcontent li {
list-style-type: none; list-style-type: none;
background-color: #997b89; background-color: var(--bg-main);
cursor: pointer; cursor: pointer;
padding: 0.35em; padding: 0.35em;
margin: 0.2em 0.3em; margin: 0.2em 0.3em;
@ -698,14 +715,17 @@ fieldset {
text-align: center; text-align: center;
} }
#options .buttonoff { .tabcontent .buttonoff {
background-color: #b6b4b440 !important; background-color: var(--bg-disabled);
color: #666; color: #444444aa;
}
.tabcontent li:hover {
box-shadow: 0 0 2px 2px var(--dark-solid) 17;
} }
.tabcontent li:hover,
.tabcontent button:hover { .tabcontent button:hover {
box-shadow: 0 0 2px 2px #5d465117; background-color: var(--header);
} }
#optionsContainer span { #optionsContainer span {
@ -804,7 +824,7 @@ fieldset {
table.matrix-table th, table.matrix-table th,
table.matrix-table td { table.matrix-table td {
border: 1px solid #5d4651; border: 1px solid var(--dark-solid);
height: 2em; height: 2em;
padding: 0.2em; padding: 0.2em;
position: relative; position: relative;
@ -820,7 +840,7 @@ table.matrix-table tr:hover th {
} }
table.matrix-table td:hover { table.matrix-table td:hover {
outline: 2px solid #5d4651; outline: 2px solid var(--dark-solid);
outline-offset: -1px; outline-offset: -1px;
z-index: 1; z-index: 1;
} }
@ -1147,7 +1167,7 @@ i.resetButton {
} }
i.resetButton:active { i.resetButton:active {
color: #5d4651; color: var(--dark-solid);
} }
.ui-dialog button.pressed { .ui-dialog button.pressed {
@ -1680,8 +1700,8 @@ div.editorLine {
} }
#pickerHeader { #pickerHeader {
fill: #916e7f; fill: var(--header);
stroke: #5d4651; stroke: var(--dark-solid);
cursor: move; cursor: move;
} }
@ -1695,7 +1715,7 @@ div.editorLine {
#pickerCloseRect { #pickerCloseRect {
cursor: pointer; cursor: pointer;
fill: #916e7f; fill: var(--header);
stroke: #f8ffff; stroke: #f8ffff;
} }
@ -2198,14 +2218,14 @@ svg.button {
color: #920303; color: #920303;
background-color: #dabdbd91; background-color: #dabdbd91;
padding: 2px; padding: 2px;
border: 1px solid #916e7f; border: 1px solid var(--header);
} }
.announcement { .announcement {
background-color: #a18888; background-color: #a18888;
color: white; color: white;
padding: 0.4em 0.5em; padding: 0.4em 0.5em;
border: dashed 1px #5d4651; border: dashed 1px var(--dark-solid);
} }
.speaker { .speaker {

32
index.html
View file

@ -16,7 +16,7 @@
<link rel="canonical" href="https://azgaar.github.io/Fantasy-Map-Generator/"> <link rel="canonical" href="https://azgaar.github.io/Fantasy-Map-Generator/">
<style type="text/css"> <style type="text/css">
body {margin: 0; font-size: 11px; overflow: hidden;} body {margin: 0; font-size: 10px; overflow: hidden;}
#map {position: absolute;} #map {position: absolute;}
#initial {fill: none; stroke: black; pointer-events: none;} #initial {fill: none; stroke: black; pointer-events: none;}
#init-rose {animation: 20s infinite spin; opacity: .7; transform-origin: center;} #init-rose {animation: 20s infinite spin; opacity: .7; transform-origin: center;}
@ -31,6 +31,7 @@
#loading-text span:nth-child(2), #mapOverlay > span:nth-child(2) {animation-delay: 1s;} #loading-text span:nth-child(2), #mapOverlay > span:nth-child(2) {animation-delay: 1s;}
#loading-text span:nth-child(3), #mapOverlay > span:nth-child(3) {animation-delay: 2s;} #loading-text span:nth-child(3), #mapOverlay > span:nth-child(3) {animation-delay: 2s;}
@keyframes blink {0% {opacity: 0;} 20% {opacity: 1;} 100% {opacity: .1;}} @keyframes blink {0% {opacity: 0;} 20% {opacity: 1;} 100% {opacity: .1;}}
</style> </style>
<link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="icons.css"> <link rel="stylesheet" href="icons.css">
@ -1145,10 +1146,10 @@
<td></td> <td></td>
<td>Interface size</td> <td>Interface size</td>
<td> <td>
<input id="uiSizeInput" data-stored="uiSize" type="range" min=.6 max=3 step=.1 value=1> <input id="uiSizeInput" data-stored="uiSize" type="range" min=.6 max=3 step=.1>
</td> </td>
<td> <td>
<input id="uiSizeOutput" data-stored="uiSize" type="number" min=.6 max=3 step=.1 value=1> <input id="uiSizeOutput" data-stored="uiSize" type="number" min=.6 max=3 step=.1>
</td> </td>
</tr> </tr>
@ -1163,14 +1164,27 @@
</td> </td>
</tr> </tr>
<tr data-tip="Set theme hue for dialogs and tool windows">
<td>
<i data-tip="Restore default theme color: pale magenta" id="themeColorRestore" class="icon-ccw"></i>
</td>
<td>Theme color</td>
<td>
<input id="themeHueInput" type="range" min=0 max=359 >
</td>
<td>
<input id="themeColorInput" data-stored="themeColor" type="color" >
</td>
</tr>
<tr data-tip="Set dialog and tool windows transparency"> <tr data-tip="Set dialog and tool windows transparency">
<td></td> <td></td>
<td>Transparency</td> <td>Transparency</td>
<td> <td>
<input id="transparencyInput" data-stored="transparency" type="range" min=0 max=100 value=15> <input id="transparencyInput" data-stored="transparency" type="range" min=0 max=100 >
</td> </td>
<td> <td>
<input id="transparencyOutput" data-stored="transparency" type="number" min=0 max=100 value=15> <input id="transparencyOutput" data-stored="transparency" type="number" min=0 max=100 >
</td> </td>
</tr> </tr>
@ -1263,7 +1277,9 @@
</tr> </tr>
<tr data-tip="Set minimum and maximum possible zoom level"> <tr data-tip="Set minimum and maximum possible zoom level">
<td></td> <td>
<i data-tip="Restore default zoom extent: [1, 20]" id="zoomExtentDefault" class="icon-ccw"></i>
</td>
<td>Zoom extent</td> <td>Zoom extent</td>
<td> <td>
<span data-tip="Mimimal possible zoom level (should be > 0)">min</span> <span data-tip="Mimimal possible zoom level (should be > 0)">min</span>
@ -1272,7 +1288,6 @@
<input data-tip="Maximal possible zoom level (should be > 1)" id="zoomExtentMax" class="paired" type="number" min=1 max=50 value=20> <input data-tip="Maximal possible zoom level (should be > 1)" id="zoomExtentMax" class="paired" type="number" min=1 max=50 value=20>
</td> </td>
<td> <td>
<i data-tip="Restore default zoom extent (1, 20)" id="zoomExtentDefault" class="icon-ccw"></i>
<i data-tip="Allow to drag map beyond canvas borders" id="translateExtent" data-on=0 class="icon-hand-paper-o"></i> <i data-tip="Allow to drag map beyond canvas borders" id="translateExtent" data-on=0 class="icon-hand-paper-o"></i>
</td> </td>
</tr> </tr>
@ -1454,8 +1469,7 @@
</div> </div>
</div> </div>
<div id="dialogs" style="background-color: #ffffff"> <div id="dialogs">
<div id="worldConfigurator" class="dialog stable" style="display: none"> <div id="worldConfigurator" class="dialog stable" style="display: none">
<div id="worldControls"> <div id="worldControls">

44
libs/jquery-ui.css vendored
View file

@ -53,7 +53,6 @@
z-index: 100; z-index: 100;
} }
/* Interaction Cues /* Interaction Cues
----------------------------------*/ ----------------------------------*/
.ui-state-disabled { .ui-state-disabled {
@ -61,13 +60,12 @@
pointer-events: none; pointer-events: none;
} }
/* Icons /* Icons
----------------------------------*/ ----------------------------------*/
.ui-icon { .ui-icon {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
margin-top: -.25em; margin-top: -0.25em;
position: relative; position: relative;
text-indent: -99999px; text-indent: -99999px;
overflow: hidden; overflow: hidden;
@ -166,11 +164,11 @@
touch-action: none; touch-action: none;
} }
.ui-button { .ui-button {
padding: .4em 1em; padding: 0.4em 1em;
display: inline-block; display: inline-block;
position: relative; position: relative;
line-height: normal; line-height: normal;
margin-right: .1em; margin-right: 0.1em;
cursor: pointer; cursor: pointer;
vertical-align: middle; vertical-align: middle;
text-align: center; text-align: center;
@ -213,7 +211,6 @@
height: 2.1em; height: 2.1em;
text-indent: -9999px; text-indent: -9999px;
white-space: nowrap; white-space: nowrap;
} }
input.ui-button.ui-icon-notext .ui-icon { input.ui-button.ui-icon-notext .ui-icon {
@ -221,7 +218,7 @@ input.ui-button.ui-icon-notext .ui-icon {
height: auto; height: auto;
text-indent: 0; text-indent: 0;
white-space: normal; white-space: normal;
padding: .4em 1em; padding: 0.4em 1em;
} }
/* workarounds */ /* workarounds */
@ -256,7 +253,7 @@ button.ui-button::-moz-focus-inner {
box-sizing: border-box; box-sizing: border-box;
} }
.ui-controlgroup .ui-controlgroup-label { .ui-controlgroup .ui-controlgroup-label {
padding: .4em 1em; padding: 0.4em 1em;
} }
.ui-controlgroup .ui-controlgroup-label span { .ui-controlgroup .ui-controlgroup-label span {
font-size: 80%; font-size: 80%;
@ -276,7 +273,6 @@ button.ui-button::-moz-focus-inner {
/* Spinner specific style fixes */ /* Spinner specific style fixes */
.ui-controlgroup-vertical .ui-spinner-input { .ui-controlgroup-vertical .ui-spinner-input {
/* Support: IE8 only, Android < 4.4 only */ /* Support: IE8 only, Android < 4.4 only */
width: 75%; width: 75%;
width: calc(100% - 2.4em); width: calc(100% - 2.4em);
@ -287,7 +283,7 @@ button.ui-button::-moz-focus-inner {
.ui-checkboxradio-label .ui-icon-background { .ui-checkboxradio-label .ui-icon-background {
box-shadow: inset 1px 1px 1px #ccc; box-shadow: inset 1px 1px 1px #ccc;
border-radius: .12em; border-radius: 0.12em;
border: none; border: none;
} }
.ui-checkboxradio-radio-label .ui-icon-background { .ui-checkboxradio-radio-label .ui-icon-background {
@ -317,14 +313,14 @@ body .ui-dialog {
background-color: inherit; background-color: inherit;
} }
.ui-dialog .ui-dialog-titlebar { .ui-dialog .ui-dialog-titlebar {
padding: .4em 1em; padding: 0.4em 1em;
position: relative; position: relative;
font-size: 1.2em; font-size: 1.2em;
min-width: 150px; min-width: 150px;
} }
.ui-dialog .ui-dialog-title { .ui-dialog .ui-dialog-title {
float: left; float: left;
margin: .1em 0; margin: 0.1em 0;
white-space: nowrap; white-space: nowrap;
width: 90%; width: 90%;
overflow: hidden; overflow: hidden;
@ -333,14 +329,14 @@ body .ui-dialog {
.ui-dialog .ui-dialog-titlebar button { .ui-dialog .ui-dialog-titlebar button {
position: absolute; position: absolute;
right: .5em; right: 0.5em;
top: 53%; top: 53%;
padding: 0; padding: 0;
width: 1.8em; width: 1.8em;
height: 1.8em; height: 1.8em;
color: #ffffff; color: #ffffff;
background: none; background: none;
font-size: .75em; font-size: 0.75em;
border: 1px solid #c5c5c5; border: 1px solid #c5c5c5;
} }
@ -360,7 +356,7 @@ body .ui-dialog {
.ui-dialog .ui-dialog-content { .ui-dialog .ui-dialog-content {
position: relative; position: relative;
border: 0; border: 0;
padding: .5em 1em; padding: 0.5em 1em;
background: none; background: none;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
@ -369,14 +365,14 @@ body .ui-dialog {
text-align: left; text-align: left;
border-width: 1px 0 0 0; border-width: 1px 0 0 0;
background-image: none; background-image: none;
margin-top: .5em; margin-top: 0.5em;
padding: .3em 1em .5em .4em; padding: 0.3em 1em 0.5em 0.4em;
} }
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
float: right; float: right;
} }
.ui-dialog .ui-dialog-buttonpane button { .ui-dialog .ui-dialog-buttonpane button {
margin: .5em .4em .5em 0; margin: 0.5em 0.4em 0.5em 0;
cursor: pointer; cursor: pointer;
} }
.ui-dialog .ui-resizable-n { .ui-dialog .ui-resizable-n {
@ -448,12 +444,6 @@ body .ui-dialog {
.ui-widget-content a { .ui-widget-content a {
color: #333333; color: #333333;
} }
.ui-widget-header {
border-bottom: 1px solid #5d4651;
background: #916e7f;
color: #ffffff;
font-weight: bold;
}
.ui-widget-header a { .ui-widget-header a {
color: #333333; color: #333333;
} }
@ -548,14 +538,14 @@ a.ui-button:focus {
.ui-priority-secondary, .ui-priority-secondary,
.ui-widget-content .ui-priority-secondary, .ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary { .ui-widget-header .ui-priority-secondary {
opacity: .7; opacity: 0.7;
filter: Alpha(Opacity=70); /* support: IE8 */ filter: Alpha(Opacity=70); /* support: IE8 */
font-weight: normal; font-weight: normal;
} }
.ui-state-disabled, .ui-state-disabled,
.ui-widget-content .ui-state-disabled, .ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled { .ui-widget-header .ui-state-disabled {
opacity: .35; opacity: 0.35;
filter: Alpha(Opacity=35); /* support: IE8 */ filter: Alpha(Opacity=35); /* support: IE8 */
background-image: none; background-image: none;
} }
@ -568,7 +558,7 @@ a.ui-button:focus {
/* Overlays */ /* Overlays */
.ui-widget-overlay { .ui-widget-overlay {
background: #aaaaaa; background: #aaaaaa;
opacity: .3; opacity: 0.3;
filter: Alpha(Opacity=30); /* support: IE8 */ filter: Alpha(Opacity=30); /* support: IE8 */
} }
.ui-widget-shadow { .ui-widget-shadow {

68
modules/ui/options.js
View file

@ -150,7 +150,9 @@ optionsContent.addEventListener("input", function (event) {
else if (id === "regionsInput" || id === "regionsOutput") changeStatesNumber(value); else if (id === "regionsInput" || id === "regionsOutput") changeStatesNumber(value);
else if (id === "emblemShape") changeEmblemShape(value); else if (id === "emblemShape") changeEmblemShape(value);
else if (id === "tooltipSizeInput" || id === "tooltipSizeOutput") changeTooltipSize(value); else if (id === "tooltipSizeInput" || id === "tooltipSizeOutput") changeTooltipSize(value);
else if (id === "transparencyInput") changeDialogsTransparency(value); else if (id === "themeHueInput") changeThemeHue(value);
else if (id === "themeColorInput") changeDialogsTheme(themeColorInput.value, transparencyInput.value);
else if (id === "transparencyInput") changeDialogsTheme(themeColorInput.value, value);
}); });
optionsContent.addEventListener("change", function (event) { optionsContent.addEventListener("change", function (event) {
@ -175,6 +177,7 @@ optionsContent.addEventListener("click", function (event) {
else if (id === "zoomExtentDefault") restoreDefaultZoomExtent(); else if (id === "zoomExtentDefault") restoreDefaultZoomExtent();
else if (id === "translateExtent") toggleTranslateExtent(event.target); else if (id === "translateExtent") toggleTranslateExtent(event.target);
else if (id === "speakerTest") testSpeaker(); else if (id === "speakerTest") testSpeaker();
else if (id === "themeColorRestore") restoreDefaultThemeColor();
}); });
function mapSizeInputChange() { function mapSizeInputChange() {
@ -417,7 +420,7 @@ function changeUIsize(value) {
if (+value > max) value = max; if (+value > max) value = max;
uiSizeInput.value = uiSizeOutput.value = value; uiSizeInput.value = uiSizeOutput.value = value;
document.getElementsByTagName("body")[0].style.fontSize = value * 11 + "px"; document.getElementsByTagName("body")[0].style.fontSize = rn(value * 10, 2) + "px";
document.getElementById("options").style.width = value * 300 + "px"; document.getElementById("options").style.width = value * 300 + "px";
} }
@ -429,19 +432,49 @@ function changeTooltipSize(value) {
tooltip.style.fontSize = `calc(${value}px + 0.5vw)`; tooltip.style.fontSize = `calc(${value}px + 0.5vw)`;
} }
// change transparency for modal windows const THEME_COLOR = "#997787";
function changeDialogsTransparency(value) { function restoreDefaultThemeColor() {
transparencyInput.value = transparencyOutput.value = value; localStorage.removeItem("themeColor");
const alpha = (100 - +value) / 100; changeDialogsTheme(THEME_COLOR, transparencyInput.value);
const optionsColor = "rgba(164, 139, 149, " + alpha + ")"; }
const dialogsColor = "rgba(255, 255, 255, " + alpha + ")";
const optionButtonsColor = "rgba(145, 110, 127, " + Math.min(alpha + 0.3, 1) + ")"; function changeThemeHue(hue) {
const optionLiColor = "rgba(153, 123, 137, " + Math.min(alpha + 0.3, 1) + ")"; const {s, l} = d3.hsl(themeColorInput.value);
document.getElementById("options").style.backgroundColor = optionsColor; const newColor = d3.hsl(+hue, s, l).hex();
document.getElementById("dialogs").style.backgroundColor = dialogsColor; changeDialogsTheme(newColor, transparencyInput.value);
document.querySelectorAll(".tabcontent button").forEach(el => (el.style.backgroundColor = optionButtonsColor)); }
document.querySelectorAll(".tabcontent li").forEach(el => (el.style.backgroundColor = optionLiColor));
document.querySelectorAll("button.options").forEach(el => (el.style.backgroundColor = optionLiColor)); // change color and transparency for modal windows
function changeDialogsTheme(themeColor, transparency) {
transparencyInput.value = transparencyOutput.value = transparency;
const alpha = (100 - +transparency) / 100;
const alphaReduced = Math.min(alpha + 0.3, 1);
const {h, s, l} = d3.hsl(themeColor || THEME_COLOR);
themeColorInput.value = themeColor || THEME_COLOR;
themeHueInput.value = h;
const getRGBA = (hue, saturation, lightness, alpha) => {
const color = d3.hsl(hue, saturation, lightness, alpha);
return color.toString();
};
const theme = [
{name: "--bg-main", h, s, l, alpha},
{name: "--bg-lighter", h, s, l: l + 0.02, alpha},
{name: "--bg-light", h, s: s - 0.02, l: l + 0.06, alpha},
{name: "--light-solid", h, s: s + 0.01, l: l + 0.05, alpha: 1},
{name: "--dark-solid", h, s, l: l - 0.2, alpha: 1},
{name: "--header", h, s: s, l: l - 0.03, alpha: alphaReduced},
{name: "--header-active", h, s: s, l: l - 0.09, alpha: alphaReduced},
{name: "--bg-disabled", h, s: s - 0.04, l: l + 0.09, alphaReduced},
{name: "--bg-dialogs", h: 0, s: 0, l: 0.98, alpha}
];
const sx = document.documentElement.style;
theme.forEach(({name, h, s, l, alpha}) => {
sx.setProperty(name, getRGBA(h, s, l, alpha));
});
} }
function changeZoomExtent(value) { function changeZoomExtent(value) {
@ -484,7 +517,6 @@ function applyStoredOptions() {
.map(w => +w); .map(w => +w);
if (localStorage.getItem("military")) options.military = JSON.parse(localStorage.getItem("military")); if (localStorage.getItem("military")) options.military = JSON.parse(localStorage.getItem("military"));
changeDialogsTransparency(localStorage.getItem("transparency") || 5);
if (localStorage.getItem("tooltipSize")) changeTooltipSize(localStorage.getItem("tooltipSize")); if (localStorage.getItem("tooltipSize")) changeTooltipSize(localStorage.getItem("tooltipSize"));
if (localStorage.getItem("regions")) changeStatesNumber(localStorage.getItem("regions")); if (localStorage.getItem("regions")) changeStatesNumber(localStorage.getItem("regions"));
@ -499,6 +531,10 @@ function applyStoredOptions() {
if (width) mapWidthInput.value = width; if (width) mapWidthInput.value = width;
if (height) mapHeightInput.value = height; if (height) mapHeightInput.value = height;
const transparency = localStorage.getItem("transparency") || 5;
const themeColor = localStorage.getItem("themeColor");
changeDialogsTheme(themeColor, transparency);
// set shape rendering // set shape rendering
viewbox.attr("shape-rendering", shapeRendering.value); viewbox.attr("shape-rendering", shapeRendering.value);
} }