mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-17 09:41:24 +01:00
editable theme color
This commit is contained in:
Azgaar
parent
385d9fa27e
commit
5492a0e643
4 changed files with 393 additions and 333 deletions
96
index.css
96
index.css
|
|
@ -228,11 +228,6 @@ t,
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
#options .pressed {
|
||||
background-color: #896c77 !important;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
i.icon-lock {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -328,10 +323,21 @@ text.drag {
|
|||
text-shadow: 0 0 1px red;
|
||||
}
|
||||
|
||||
#dialogs {
|
||||
background-color: var(--bg-dialogs);
|
||||
}
|
||||
|
||||
.draggable {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.ui-widget-header {
|
||||
border-bottom: 1px solid var(--dark-solid);
|
||||
background: var(--header);
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ui-dialog,
|
||||
#optionsContainer {
|
||||
user-select: none;
|
||||
|
|
@ -343,6 +349,7 @@ text.drag {
|
|||
border: solid 1px #5e4fa2;
|
||||
margin: 10px;
|
||||
padding-bottom: 0.3em;
|
||||
background: var(--bg-light);
|
||||
}
|
||||
|
||||
#options input,
|
||||
|
|
@ -361,7 +368,7 @@ text.drag {
|
|||
}
|
||||
|
||||
.tab {
|
||||
border-bottom: 1px solid #5d4651;
|
||||
border-bottom: 1px solid var(--dark-solid);
|
||||
height: 2.2em;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -375,19 +382,19 @@ div.tab > button#optionsHide {
|
|||
|
||||
button.options {
|
||||
width: 100%;
|
||||
background-color: #997b89;
|
||||
background-color: var(--bg-main);
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
button.options:hover {
|
||||
background-color: #806070 !important;
|
||||
color: white !important;
|
||||
button.active {
|
||||
background-color: var(--header);
|
||||
color: white;
|
||||
}
|
||||
|
||||
button.active {
|
||||
background-color: #916e7f;
|
||||
button.options:hover {
|
||||
background-color: var(--header-active);
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
|
@ -417,7 +424,7 @@ button.active {
|
|||
|
||||
#options i {
|
||||
color: #31272c;
|
||||
font-size: 0.8em;
|
||||
font-size: 0.85em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -466,11 +473,11 @@ input[type="color"]::-webkit-color-swatch-wrapper {
|
|||
border-radius: 15%;
|
||||
width: 0.91em;
|
||||
height: 0.91em;
|
||||
background: #a58394;
|
||||
border: 1px solid #5d4651;
|
||||
background: var(--light-solid);
|
||||
border: 1px solid var(--dark-solid);
|
||||
cursor: pointer;
|
||||
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 {
|
||||
|
|
@ -478,10 +485,10 @@ input[type="color"]::-webkit-color-swatch-wrapper {
|
|||
border-radius: 15%;
|
||||
width: 0.73em;
|
||||
height: 0.73em;
|
||||
background: #a58394;
|
||||
border: 1px solid #5d4651;
|
||||
background: var(--light-solid);
|
||||
border: 1px solid var(--dark-solid);
|
||||
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 {
|
||||
|
|
@ -525,7 +532,7 @@ input[type="color"]::-webkit-color-swatch-wrapper {
|
|||
}
|
||||
|
||||
#optionsContent input[type="number"]:hover {
|
||||
outline: 1px solid #5d4651;
|
||||
outline: 1px solid var(--dark-solid);
|
||||
}
|
||||
|
||||
#optionsContent input.paired {
|
||||
|
|
@ -553,6 +560,11 @@ input[type="color"]::-webkit-color-swatch-wrapper {
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
#options input[type="color"] {
|
||||
width: 2em;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.tabcontent button.sideButton {
|
||||
border-radius: 15%;
|
||||
font-size: 0.8em;
|
||||
|
|
@ -606,7 +618,7 @@ input[type="color"]::-webkit-color-swatch-wrapper {
|
|||
|
||||
#exitCustomization > div {
|
||||
width: 12em;
|
||||
background: #5d4651;
|
||||
background: var(--dark-solid);
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
|
|
@ -642,7 +654,7 @@ input[type="color"]::-webkit-color-swatch-wrapper {
|
|||
}
|
||||
|
||||
.tabcontent button {
|
||||
background-color: #916e7f;
|
||||
background-color: var(--bg-lighter);
|
||||
border: none;
|
||||
padding: 0.45em 0.75em;
|
||||
margin: 0.35em 0;
|
||||
|
|
@ -650,8 +662,13 @@ input[type="color"]::-webkit-color-swatch-wrapper {
|
|||
font-size: 1em;
|
||||
}
|
||||
|
||||
.tabcontent button.pressed {
|
||||
background-color: var(--header);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.tabcontent button:hover {
|
||||
background-color: #a8879d !important;
|
||||
background-color: var(--header-active);
|
||||
}
|
||||
|
||||
#toolsContent div {
|
||||
|
|
@ -684,12 +701,12 @@ input[type="color"]::-webkit-color-swatch-wrapper {
|
|||
}
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #5d4651;
|
||||
border: 1px solid var(--dark-solid);
|
||||
}
|
||||
|
||||
.tabcontent li {
|
||||
list-style-type: none;
|
||||
background-color: #997b89;
|
||||
background-color: var(--bg-main);
|
||||
cursor: pointer;
|
||||
padding: 0.35em;
|
||||
margin: 0.2em 0.3em;
|
||||
|
|
@ -698,14 +715,17 @@ fieldset {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
#options .buttonoff {
|
||||
background-color: #b6b4b440 !important;
|
||||
color: #666;
|
||||
.tabcontent .buttonoff {
|
||||
background-color: var(--bg-disabled);
|
||||
color: #444444aa;
|
||||
}
|
||||
|
||||
.tabcontent li:hover {
|
||||
box-shadow: 0 0 2px 2px var(--dark-solid) 17;
|
||||
}
|
||||
|
||||
.tabcontent li:hover,
|
||||
.tabcontent button:hover {
|
||||
box-shadow: 0 0 2px 2px #5d465117;
|
||||
background-color: var(--header);
|
||||
}
|
||||
|
||||
#optionsContainer span {
|
||||
|
|
@ -804,7 +824,7 @@ fieldset {
|
|||
|
||||
table.matrix-table th,
|
||||
table.matrix-table td {
|
||||
border: 1px solid #5d4651;
|
||||
border: 1px solid var(--dark-solid);
|
||||
height: 2em;
|
||||
padding: 0.2em;
|
||||
position: relative;
|
||||
|
|
@ -820,7 +840,7 @@ table.matrix-table tr:hover th {
|
|||
}
|
||||
|
||||
table.matrix-table td:hover {
|
||||
outline: 2px solid #5d4651;
|
||||
outline: 2px solid var(--dark-solid);
|
||||
outline-offset: -1px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
|
@ -1147,7 +1167,7 @@ i.resetButton {
|
|||
}
|
||||
|
||||
i.resetButton:active {
|
||||
color: #5d4651;
|
||||
color: var(--dark-solid);
|
||||
}
|
||||
|
||||
.ui-dialog button.pressed {
|
||||
|
|
@ -1680,8 +1700,8 @@ div.editorLine {
|
|||
}
|
||||
|
||||
#pickerHeader {
|
||||
fill: #916e7f;
|
||||
stroke: #5d4651;
|
||||
fill: var(--header);
|
||||
stroke: var(--dark-solid);
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
|
|
@ -1695,7 +1715,7 @@ div.editorLine {
|
|||
|
||||
#pickerCloseRect {
|
||||
cursor: pointer;
|
||||
fill: #916e7f;
|
||||
fill: var(--header);
|
||||
stroke: #f8ffff;
|
||||
}
|
||||
|
||||
|
|
@ -2198,14 +2218,14 @@ svg.button {
|
|||
color: #920303;
|
||||
background-color: #dabdbd91;
|
||||
padding: 2px;
|
||||
border: 1px solid #916e7f;
|
||||
border: 1px solid var(--header);
|
||||
}
|
||||
|
||||
.announcement {
|
||||
background-color: #a18888;
|
||||
color: white;
|
||||
padding: 0.4em 0.5em;
|
||||
border: dashed 1px #5d4651;
|
||||
border: dashed 1px var(--dark-solid);
|
||||
}
|
||||
|
||||
.speaker {
|
||||
|
|
|
|||
32
index.html
32
index.html
|
|
@ -16,7 +16,7 @@
|
|||
<link rel="canonical" href="https://azgaar.github.io/Fantasy-Map-Generator/">
|
||||
|
||||
<style type="text/css">
|
||||
body {margin: 0; font-size: 11px; overflow: hidden;}
|
||||
body {margin: 0; font-size: 10px; overflow: hidden;}
|
||||
#map {position: absolute;}
|
||||
#initial {fill: none; stroke: black; pointer-events: none;}
|
||||
#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(3), #mapOverlay > span:nth-child(3) {animation-delay: 2s;}
|
||||
@keyframes blink {0% {opacity: 0;} 20% {opacity: 1;} 100% {opacity: .1;}}
|
||||
|
||||
</style>
|
||||
<link rel="stylesheet" href="index.css">
|
||||
<link rel="stylesheet" href="icons.css">
|
||||
|
|
@ -1145,10 +1146,10 @@
|
|||
<td></td>
|
||||
<td>Interface size</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>
|
||||
<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>
|
||||
</tr>
|
||||
|
||||
|
|
@ -1163,14 +1164,27 @@
|
|||
</td>
|
||||
</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">
|
||||
<td></td>
|
||||
<td>Transparency</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>
|
||||
<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>
|
||||
</tr>
|
||||
|
||||
|
|
@ -1263,7 +1277,9 @@
|
|||
</tr>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
</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>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -1454,8 +1469,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div id="dialogs" style="background-color: #ffffff">
|
||||
|
||||
<div id="dialogs">
|
||||
<div id="worldConfigurator" class="dialog stable" style="display: none">
|
||||
|
||||
<div id="worldControls">
|
||||
|
|
|
|||
58
libs/jquery-ui.css
vendored
58
libs/jquery-ui.css
vendored
|
|
@ -46,14 +46,13 @@
|
|||
left: 0;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
filter:Alpha(Opacity=0); /* support: IE8 */
|
||||
filter: Alpha(Opacity=0); /* support: IE8 */
|
||||
}
|
||||
|
||||
.ui-front {
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
|
||||
/* Interaction Cues
|
||||
----------------------------------*/
|
||||
.ui-state-disabled {
|
||||
|
|
@ -61,13 +60,12 @@
|
|||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
/* Icons
|
||||
----------------------------------*/
|
||||
.ui-icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-top: -.25em;
|
||||
margin-top: -0.25em;
|
||||
position: relative;
|
||||
text-indent: -99999px;
|
||||
overflow: hidden;
|
||||
|
|
@ -166,11 +164,11 @@
|
|||
touch-action: none;
|
||||
}
|
||||
.ui-button {
|
||||
padding: .4em 1em;
|
||||
padding: 0.4em 1em;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
line-height: normal;
|
||||
margin-right: .1em;
|
||||
margin-right: 0.1em;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
|
|
@ -213,7 +211,6 @@
|
|||
height: 2.1em;
|
||||
text-indent: -9999px;
|
||||
white-space: nowrap;
|
||||
|
||||
}
|
||||
|
||||
input.ui-button.ui-icon-notext .ui-icon {
|
||||
|
|
@ -221,7 +218,7 @@ input.ui-button.ui-icon-notext .ui-icon {
|
|||
height: auto;
|
||||
text-indent: 0;
|
||||
white-space: normal;
|
||||
padding: .4em 1em;
|
||||
padding: 0.4em 1em;
|
||||
}
|
||||
|
||||
/* workarounds */
|
||||
|
|
@ -256,7 +253,7 @@ button.ui-button::-moz-focus-inner {
|
|||
box-sizing: border-box;
|
||||
}
|
||||
.ui-controlgroup .ui-controlgroup-label {
|
||||
padding: .4em 1em;
|
||||
padding: 0.4em 1em;
|
||||
}
|
||||
.ui-controlgroup .ui-controlgroup-label span {
|
||||
font-size: 80%;
|
||||
|
|
@ -276,10 +273,9 @@ button.ui-button::-moz-focus-inner {
|
|||
|
||||
/* Spinner specific style fixes */
|
||||
.ui-controlgroup-vertical .ui-spinner-input {
|
||||
|
||||
/* Support: IE8 only, Android < 4.4 only */
|
||||
width: 75%;
|
||||
width: calc( 100% - 2.4em );
|
||||
width: calc(100% - 2.4em);
|
||||
}
|
||||
.ui-controlgroup-vertical .ui-spinner .ui-spinner-up {
|
||||
border-top-style: solid;
|
||||
|
|
@ -287,7 +283,7 @@ button.ui-button::-moz-focus-inner {
|
|||
|
||||
.ui-checkboxradio-label .ui-icon-background {
|
||||
box-shadow: inset 1px 1px 1px #ccc;
|
||||
border-radius: .12em;
|
||||
border-radius: 0.12em;
|
||||
border: none;
|
||||
}
|
||||
.ui-checkboxradio-radio-label .ui-icon-background {
|
||||
|
|
@ -317,14 +313,14 @@ body .ui-dialog {
|
|||
background-color: inherit;
|
||||
}
|
||||
.ui-dialog .ui-dialog-titlebar {
|
||||
padding: .4em 1em;
|
||||
padding: 0.4em 1em;
|
||||
position: relative;
|
||||
font-size: 1.2em;
|
||||
min-width: 150px;
|
||||
}
|
||||
.ui-dialog .ui-dialog-title {
|
||||
float: left;
|
||||
margin: .1em 0;
|
||||
margin: 0.1em 0;
|
||||
white-space: nowrap;
|
||||
width: 90%;
|
||||
overflow: hidden;
|
||||
|
|
@ -333,14 +329,14 @@ body .ui-dialog {
|
|||
|
||||
.ui-dialog .ui-dialog-titlebar button {
|
||||
position: absolute;
|
||||
right: .5em;
|
||||
right: 0.5em;
|
||||
top: 53%;
|
||||
padding: 0;
|
||||
width: 1.8em;
|
||||
height: 1.8em;
|
||||
color: #ffffff;
|
||||
background: none;
|
||||
font-size: .75em;
|
||||
font-size: 0.75em;
|
||||
border: 1px solid #c5c5c5;
|
||||
}
|
||||
|
||||
|
|
@ -360,7 +356,7 @@ body .ui-dialog {
|
|||
.ui-dialog .ui-dialog-content {
|
||||
position: relative;
|
||||
border: 0;
|
||||
padding: .5em 1em;
|
||||
padding: 0.5em 1em;
|
||||
background: none;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
|
@ -369,14 +365,14 @@ body .ui-dialog {
|
|||
text-align: left;
|
||||
border-width: 1px 0 0 0;
|
||||
background-image: none;
|
||||
margin-top: .5em;
|
||||
padding: .3em 1em .5em .4em;
|
||||
margin-top: 0.5em;
|
||||
padding: 0.3em 1em 0.5em 0.4em;
|
||||
}
|
||||
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
|
||||
float: right;
|
||||
}
|
||||
.ui-dialog .ui-dialog-buttonpane button {
|
||||
margin: .5em .4em .5em 0;
|
||||
margin: 0.5em 0.4em 0.5em 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ui-dialog .ui-resizable-n {
|
||||
|
|
@ -425,13 +421,13 @@ body .ui-dialog {
|
|||
/* Component containers
|
||||
----------------------------------*/
|
||||
.ui-widget {
|
||||
font-family: Arial,Helvetica,sans-serif;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
.ui-widget input,
|
||||
.ui-widget select,
|
||||
.ui-widget textarea,
|
||||
.ui-widget button {
|
||||
font-family: Arial,Helvetica,sans-serif;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 1em;
|
||||
}
|
||||
.ui-widget button[class^="icon-"] {
|
||||
|
|
@ -448,12 +444,6 @@ body .ui-dialog {
|
|||
.ui-widget-content a {
|
||||
color: #333333;
|
||||
}
|
||||
.ui-widget-header {
|
||||
border-bottom: 1px solid #5d4651;
|
||||
background: #916e7f;
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
}
|
||||
.ui-widget-header a {
|
||||
color: #333333;
|
||||
}
|
||||
|
|
@ -548,19 +538,19 @@ a.ui-button:focus {
|
|||
.ui-priority-secondary,
|
||||
.ui-widget-content .ui-priority-secondary,
|
||||
.ui-widget-header .ui-priority-secondary {
|
||||
opacity: .7;
|
||||
filter:Alpha(Opacity=70); /* support: IE8 */
|
||||
opacity: 0.7;
|
||||
filter: Alpha(Opacity=70); /* support: IE8 */
|
||||
font-weight: normal;
|
||||
}
|
||||
.ui-state-disabled,
|
||||
.ui-widget-content .ui-state-disabled,
|
||||
.ui-widget-header .ui-state-disabled {
|
||||
opacity: .35;
|
||||
filter:Alpha(Opacity=35); /* support: IE8 */
|
||||
opacity: 0.35;
|
||||
filter: Alpha(Opacity=35); /* support: IE8 */
|
||||
background-image: none;
|
||||
}
|
||||
.ui-state-disabled .ui-icon {
|
||||
filter:Alpha(Opacity=35); /* support: IE8 - See #6059 */
|
||||
filter: Alpha(Opacity=35); /* support: IE8 - See #6059 */
|
||||
}
|
||||
|
||||
/* Misc visuals
|
||||
|
|
@ -568,7 +558,7 @@ a.ui-button:focus {
|
|||
/* Overlays */
|
||||
.ui-widget-overlay {
|
||||
background: #aaaaaa;
|
||||
opacity: .3;
|
||||
opacity: 0.3;
|
||||
filter: Alpha(Opacity=30); /* support: IE8 */
|
||||
}
|
||||
.ui-widget-shadow {
|
||||
|
|
|
|||
|
|
@ -150,7 +150,9 @@ optionsContent.addEventListener("input", function (event) {
|
|||
else if (id === "regionsInput" || id === "regionsOutput") changeStatesNumber(value);
|
||||
else if (id === "emblemShape") changeEmblemShape(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) {
|
||||
|
|
@ -175,6 +177,7 @@ optionsContent.addEventListener("click", function (event) {
|
|||
else if (id === "zoomExtentDefault") restoreDefaultZoomExtent();
|
||||
else if (id === "translateExtent") toggleTranslateExtent(event.target);
|
||||
else if (id === "speakerTest") testSpeaker();
|
||||
else if (id === "themeColorRestore") restoreDefaultThemeColor();
|
||||
});
|
||||
|
||||
function mapSizeInputChange() {
|
||||
|
|
@ -417,7 +420,7 @@ function changeUIsize(value) {
|
|||
if (+value > max) value = max;
|
||||
|
||||
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";
|
||||
}
|
||||
|
||||
|
|
@ -429,19 +432,49 @@ function changeTooltipSize(value) {
|
|||
tooltip.style.fontSize = `calc(${value}px + 0.5vw)`;
|
||||
}
|
||||
|
||||
// change transparency for modal windows
|
||||
function changeDialogsTransparency(value) {
|
||||
transparencyInput.value = transparencyOutput.value = value;
|
||||
const alpha = (100 - +value) / 100;
|
||||
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) + ")";
|
||||
const optionLiColor = "rgba(153, 123, 137, " + Math.min(alpha + 0.3, 1) + ")";
|
||||
document.getElementById("options").style.backgroundColor = optionsColor;
|
||||
document.getElementById("dialogs").style.backgroundColor = dialogsColor;
|
||||
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));
|
||||
const THEME_COLOR = "#997787";
|
||||
function restoreDefaultThemeColor() {
|
||||
localStorage.removeItem("themeColor");
|
||||
changeDialogsTheme(THEME_COLOR, transparencyInput.value);
|
||||
}
|
||||
|
||||
function changeThemeHue(hue) {
|
||||
const {s, l} = d3.hsl(themeColorInput.value);
|
||||
const newColor = d3.hsl(+hue, s, l).hex();
|
||||
changeDialogsTheme(newColor, transparencyInput.value);
|
||||
}
|
||||
|
||||
// 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) {
|
||||
|
|
@ -484,7 +517,6 @@ function applyStoredOptions() {
|
|||
.map(w => +w);
|
||||
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("regions")) changeStatesNumber(localStorage.getItem("regions"));
|
||||
|
||||
|
|
@ -499,6 +531,10 @@ function applyStoredOptions() {
|
|||
if (width) mapWidthInput.value = width;
|
||||
if (height) mapHeightInput.value = height;
|
||||
|
||||
const transparency = localStorage.getItem("transparency") || 5;
|
||||
const themeColor = localStorage.getItem("themeColor");
|
||||
changeDialogsTheme(themeColor, transparency);
|
||||
|
||||
// set shape rendering
|
||||
viewbox.attr("shape-rendering", shapeRendering.value);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue