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">

530
libs/jquery-ui.css vendored
View file

@ -3,81 +3,79 @@
* Copyright jQuery Foundation and other contributors; Licensed MIT */ * Copyright jQuery Foundation and other contributors; Licensed MIT */
.ui-draggable-handle { .ui-draggable-handle {
-ms-touch-action: none; -ms-touch-action: none;
touch-action: none; touch-action: none;
} }
.ui-helper-hidden { .ui-helper-hidden {
display: none; display: none;
} }
.ui-helper-hidden-accessible { .ui-helper-hidden-accessible {
border: 0; border: 0;
clip: rect(0 0 0 0); clip: rect(0 0 0 0);
height: 1px; height: 1px;
margin: -1px; margin: -1px;
overflow: hidden; overflow: hidden;
padding: 0; padding: 0;
position: absolute; position: absolute;
width: 1px; width: 1px;
} }
.ui-helper-reset { .ui-helper-reset {
margin: 0; margin: 0;
padding: 0; padding: 0;
border: 0; border: 0;
outline: 0; outline: 0;
line-height: 1.3; line-height: 1.3;
text-decoration: none; text-decoration: none;
font-size: 100%; font-size: 100%;
list-style: none; list-style: none;
} }
.ui-helper-clearfix:before, .ui-helper-clearfix:before,
.ui-helper-clearfix:after { .ui-helper-clearfix:after {
content: ""; content: "";
display: table; display: table;
border-collapse: collapse; border-collapse: collapse;
} }
.ui-helper-clearfix:after { .ui-helper-clearfix:after {
clear: both; clear: both;
} }
.ui-helper-zfix { .ui-helper-zfix {
width: 100%; width: 100%;
height: 100%; height: 100%;
top: 0; top: 0;
left: 0; left: 0;
position: absolute; position: absolute;
opacity: 0; opacity: 0;
filter:Alpha(Opacity=0); /* support: IE8 */ filter: Alpha(Opacity=0); /* support: IE8 */
} }
.ui-front { .ui-front {
z-index: 100; z-index: 100;
} }
/* Interaction Cues /* Interaction Cues
----------------------------------*/ ----------------------------------*/
.ui-state-disabled { .ui-state-disabled {
cursor: default !important; cursor: default !important;
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;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.ui-widget-icon-block { .ui-widget-icon-block {
left: 50%; left: 50%;
margin-left: -8px; margin-left: -8px;
display: block; display: block;
} }
/* Misc visuals /* Misc visuals
@ -85,102 +83,102 @@
/* Overlays */ /* Overlays */
.ui-widget-overlay { .ui-widget-overlay {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.ui-resizable { .ui-resizable {
position: relative; position: relative;
} }
.ui-resizable-handle { .ui-resizable-handle {
position: absolute; position: absolute;
font-size: 0.1px; font-size: 0.1px;
display: block; display: block;
-ms-touch-action: none; -ms-touch-action: none;
touch-action: none; touch-action: none;
} }
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle { .ui-resizable-autohide .ui-resizable-handle {
display: none; display: none;
} }
.ui-resizable-n { .ui-resizable-n {
cursor: n-resize; cursor: n-resize;
height: 7px; height: 7px;
width: 100%; width: 100%;
top: -5px; top: -5px;
left: 0; left: 0;
} }
.ui-resizable-s { .ui-resizable-s {
cursor: s-resize; cursor: s-resize;
height: 7px; height: 7px;
width: 100%; width: 100%;
bottom: -5px; bottom: -5px;
left: 0; left: 0;
} }
.ui-resizable-e { .ui-resizable-e {
cursor: e-resize; cursor: e-resize;
width: 7px; width: 7px;
right: -5px; right: -5px;
top: 0; top: 0;
height: 100%; height: 100%;
} }
.ui-resizable-w { .ui-resizable-w {
cursor: w-resize; cursor: w-resize;
width: 7px; width: 7px;
left: -5px; left: -5px;
top: 0; top: 0;
height: 100%; height: 100%;
} }
.ui-resizable-se { .ui-resizable-se {
cursor: se-resize; cursor: se-resize;
width: 12px; width: 12px;
height: 12px; height: 12px;
right: 1px; right: 1px;
bottom: 1px; bottom: 1px;
} }
.ui-resizable-sw { .ui-resizable-sw {
cursor: sw-resize; cursor: sw-resize;
width: 9px; width: 9px;
height: 9px; height: 9px;
left: -5px; left: -5px;
bottom: -5px; bottom: -5px;
} }
.ui-resizable-nw { .ui-resizable-nw {
cursor: nw-resize; cursor: nw-resize;
width: 9px; width: 9px;
height: 9px; height: 9px;
left: -5px; left: -5px;
top: -5px; top: -5px;
} }
.ui-resizable-ne { .ui-resizable-ne {
cursor: ne-resize; cursor: ne-resize;
width: 9px; width: 9px;
height: 9px; height: 9px;
right: -5px; right: -5px;
top: -5px; top: -5px;
} }
.ui-sortable-handle { .ui-sortable-handle {
-ms-touch-action: none; -ms-touch-action: none;
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;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
/* Support: IE <= 11 */ /* Support: IE <= 11 */
overflow: visible; overflow: visible;
} }
.ui-button, .ui-button,
@ -188,128 +186,126 @@
.ui-button:visited, .ui-button:visited,
.ui-button:hover, .ui-button:hover,
.ui-button:active { .ui-button:active {
text-decoration: none; text-decoration: none;
} }
/* to make room for the icon, a width needs to be set here */ /* to make room for the icon, a width needs to be set here */
.ui-button-icon-only { .ui-button-icon-only {
width: 2em; width: 2em;
box-sizing: border-box; box-sizing: border-box;
white-space: nowrap; white-space: nowrap;
} }
/* button icon element(s) */ /* button icon element(s) */
.ui-button-icon-only .ui-icon { .ui-button-icon-only .ui-icon {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
margin-top: -8px; margin-top: -8px;
margin-left: -8px; margin-left: -8px;
} }
.ui-button.ui-icon-notext .ui-icon { .ui-button.ui-icon-notext .ui-icon {
padding: 0; padding: 0;
width: 2.1em; width: 2.1em;
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 {
width: auto; width: auto;
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 */
/* Support: Firefox 5 - 40 */ /* Support: Firefox 5 - 40 */
input.ui-button::-moz-focus-inner, input.ui-button::-moz-focus-inner,
button.ui-button::-moz-focus-inner { button.ui-button::-moz-focus-inner {
border: 0; border: 0;
padding: 0; padding: 0;
} }
.ui-controlgroup { .ui-controlgroup {
vertical-align: middle; vertical-align: middle;
display: inline-block; display: inline-block;
} }
.ui-controlgroup > .ui-controlgroup-item { .ui-controlgroup > .ui-controlgroup-item {
float: left; float: left;
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
} }
.ui-controlgroup > .ui-controlgroup-item:focus, .ui-controlgroup > .ui-controlgroup-item:focus,
.ui-controlgroup > .ui-controlgroup-item.ui-visual-focus { .ui-controlgroup > .ui-controlgroup-item.ui-visual-focus {
z-index: 9999; z-index: 9999;
} }
.ui-controlgroup-vertical > .ui-controlgroup-item { .ui-controlgroup-vertical > .ui-controlgroup-item {
display: block; display: block;
float: none; float: none;
width: 100%; width: 100%;
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
text-align: left; text-align: left;
} }
.ui-controlgroup-vertical .ui-controlgroup-item { .ui-controlgroup-vertical .ui-controlgroup-item {
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%;
} }
.ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item { .ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item {
border-left: none; border-left: none;
} }
.ui-controlgroup-vertical .ui-controlgroup-label + .ui-controlgroup-item { .ui-controlgroup-vertical .ui-controlgroup-label + .ui-controlgroup-item {
border-top: none; border-top: none;
} }
.ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content { .ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content {
border-right: none; border-right: none;
} }
.ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content { .ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content {
border-bottom: none; border-bottom: none;
} }
/* 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 );
} }
.ui-controlgroup-vertical .ui-spinner .ui-spinner-up { .ui-controlgroup-vertical .ui-spinner .ui-spinner-up {
border-top-style: solid; border-top-style: solid;
} }
.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 {
width: 16px; width: 16px;
height: 16px; height: 16px;
border-radius: 1em; border-radius: 1em;
overflow: visible; overflow: visible;
border: none; border: none;
} }
.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon, .ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon,
.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon { .ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon {
background-image: none; background-image: none;
width: 8px; width: 8px;
height: 8px; height: 8px;
border-width: 4px; border-width: 4px;
border-style: solid; border-style: solid;
} }
.ui-checkboxradio-disabled { .ui-checkboxradio-disabled {
pointer-events: none; pointer-events: none;
} }
body .ui-dialog { body .ui-dialog {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
outline: 0; outline: 0;
@ -317,30 +313,30 @@ 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;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.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;
} }
@ -349,113 +345,107 @@ body .ui-dialog {
} }
.ui-dialog .ui-dialog-titlebar button.ui-dialog-titlebar-close { .ui-dialog .ui-dialog-titlebar button.ui-dialog-titlebar-close {
margin: -1em 0 0; margin: -1em 0 0;
} }
.ui-dialog .ui-dialog-titlebar button:active { .ui-dialog .ui-dialog-titlebar button:active {
border: 1px solid #5d4651; border: 1px solid #5d4651;
color: #5d4651; color: #5d4651;
} }
.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;
} }
.ui-dialog .ui-dialog-buttonpane { .ui-dialog .ui-dialog-buttonpane {
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 {
height: 2px; height: 2px;
top: 0; top: 0;
} }
.ui-dialog .ui-resizable-e { .ui-dialog .ui-resizable-e {
width: 2px; width: 2px;
right: 0; right: 0;
} }
.ui-dialog .ui-resizable-s { .ui-dialog .ui-resizable-s {
height: 2px; height: 2px;
bottom: 0; bottom: 0;
} }
.ui-dialog .ui-resizable-w { .ui-dialog .ui-resizable-w {
width: 2px; width: 2px;
left: 0; left: 0;
} }
.ui-dialog .ui-resizable-se, .ui-dialog .ui-resizable-se,
.ui-dialog .ui-resizable-sw, .ui-dialog .ui-resizable-sw,
.ui-dialog .ui-resizable-ne, .ui-dialog .ui-resizable-ne,
.ui-dialog .ui-resizable-nw { .ui-dialog .ui-resizable-nw {
width: 7px; width: 7px;
height: 7px; height: 7px;
} }
.ui-dialog .ui-resizable-se { .ui-dialog .ui-resizable-se {
right: 0; right: 0;
bottom: 0; bottom: 0;
} }
.ui-dialog .ui-resizable-sw { .ui-dialog .ui-resizable-sw {
left: 0; left: 0;
bottom: 0; bottom: 0;
} }
.ui-dialog .ui-resizable-ne { .ui-dialog .ui-resizable-ne {
right: 0; right: 0;
top: 0; top: 0;
} }
.ui-dialog .ui-resizable-nw { .ui-dialog .ui-resizable-nw {
left: 0; left: 0;
top: 0; top: 0;
} }
.ui-draggable .ui-dialog-titlebar { .ui-draggable .ui-dialog-titlebar {
cursor: move; cursor: move;
} }
/* Component containers /* Component containers
----------------------------------*/ ----------------------------------*/
.ui-widget { .ui-widget {
font-family: Arial,Helvetica,sans-serif; font-family: Arial, Helvetica, sans-serif;
} }
.ui-widget input, .ui-widget input,
.ui-widget select, .ui-widget select,
.ui-widget textarea, .ui-widget textarea,
.ui-widget button { .ui-widget button {
font-family: Arial,Helvetica,sans-serif; font-family: Arial, Helvetica, sans-serif;
font-size: 1em; font-size: 1em;
} }
.ui-widget button[class^="icon-"] { .ui-widget button[class^="icon-"] {
padding: 1px 6px; padding: 1px 6px;
} }
.ui-widget.ui-widget-content { .ui-widget.ui-widget-content {
border: 1px solid #5e4fa2; border: 1px solid #5e4fa2;
color: #333333; color: #333333;
} }
.ui-widget-content { .ui-widget-content {
border: 1px solid #dddddd; border: 1px solid #dddddd;
color: #333333; color: #333333;
} }
.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;
} }
/* Interaction states /* Interaction states
@ -469,10 +459,10 @@ body .ui-dialog {
works properly when clicked or hovered */ works properly when clicked or hovered */
html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active { html .ui-button.ui-state-disabled:active {
border: 1px solid #c5c5c5; border: 1px solid #c5c5c5;
background: #f6f6f6; background: #f6f6f6;
font-weight: normal; font-weight: normal;
color: #454545; color: #454545;
} }
.ui-state-default a, .ui-state-default a,
.ui-state-default a:link, .ui-state-default a:link,
@ -481,10 +471,10 @@ a.ui-button,
a:link.ui-button, a:link.ui-button,
a:visited.ui-button, a:visited.ui-button,
.ui-button { .ui-button {
color: #454545; color: #454545;
} }
.ui-button:active { .ui-button:active {
color: #5d4651; color: #5d4651;
border-color: #5d4651; border-color: #5d4651;
} }
.ui-state-hover a, .ui-state-hover a,
@ -497,12 +487,12 @@ a:visited.ui-button,
.ui-state-focus a:visited, .ui-state-focus a:visited,
a.ui-button:hover, a.ui-button:hover,
a.ui-button:focus { a.ui-button:focus {
color: #2b2b2b; color: #2b2b2b;
text-decoration: none; text-decoration: none;
} }
.ui-visual-focus { .ui-visual-focus {
box-shadow: 0 0 3px 1px rgb(94, 158, 214); box-shadow: 0 0 3px 1px rgb(94, 158, 214);
} }
/* Interaction Cues /* Interaction Cues
@ -510,68 +500,68 @@ a.ui-button:focus {
.ui-state-highlight, .ui-state-highlight,
.ui-widget-content .ui-state-highlight, .ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight { .ui-widget-header .ui-state-highlight {
border: 1px solid #dad55e; border: 1px solid #dad55e;
background: #fffa90; background: #fffa90;
color: #777620; color: #777620;
} }
.ui-state-checked { .ui-state-checked {
border: 1px solid #dad55e; border: 1px solid #dad55e;
background: #fffa90; background: #fffa90;
} }
.ui-state-highlight a, .ui-state-highlight a,
.ui-widget-content .ui-state-highlight a, .ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a { .ui-widget-header .ui-state-highlight a {
color: #777620; color: #777620;
} }
.ui-state-error, .ui-state-error,
.ui-widget-content .ui-state-error, .ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error { .ui-widget-header .ui-state-error {
border: 1px solid #f1a899; border: 1px solid #f1a899;
background: #fddfdf; background: #fddfdf;
color: #5f3f3f; color: #5f3f3f;
} }
.ui-state-error a, .ui-state-error a,
.ui-widget-content .ui-state-error a, .ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a { .ui-widget-header .ui-state-error a {
color: #5f3f3f; color: #5f3f3f;
} }
.ui-state-error-text, .ui-state-error-text,
.ui-widget-content .ui-state-error-text, .ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text { .ui-widget-header .ui-state-error-text {
color: #5f3f3f; color: #5f3f3f;
} }
.ui-priority-primary, .ui-priority-primary,
.ui-widget-content .ui-priority-primary, .ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary { .ui-widget-header .ui-priority-primary {
font-weight: bold; font-weight: bold;
} }
.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;
} }
.ui-state-disabled .ui-icon { .ui-state-disabled .ui-icon {
filter:Alpha(Opacity=35); /* support: IE8 - See #6059 */ filter: Alpha(Opacity=35); /* support: IE8 - See #6059 */
} }
/* Misc visuals /* Misc visuals
----------------------------------*/ ----------------------------------*/
/* 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 {
-webkit-box-shadow: 0px 0px 5px #666666; -webkit-box-shadow: 0px 0px 5px #666666;
box-shadow: 0px 0px 5px #666666; box-shadow: 0px 0px 5px #666666;
} }

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);
} }