mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-23 12:31:24 +01:00
editable theme color
This commit is contained in:
Azgaar
Dranorter
parent
9474956756
commit
756d020d9a
4 changed files with 393 additions and 333 deletions
96
index.css
96
index.css
|
|
@ -222,11 +222,6 @@ t,
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
#options .pressed {
|
||||
background-color: #896c77 !important;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
i.icon-lock {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -322,10 +317,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;
|
||||
|
|
@ -337,6 +343,7 @@ text.drag {
|
|||
border: solid 1px #5e4fa2;
|
||||
margin: 10px;
|
||||
padding-bottom: 0.3em;
|
||||
background: var(--bg-light);
|
||||
}
|
||||
|
||||
#options input,
|
||||
|
|
@ -355,7 +362,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;
|
||||
|
|
@ -369,19 +376,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;
|
||||
}
|
||||
|
||||
|
|
@ -411,7 +418,7 @@ button.active {
|
|||
|
||||
#options i {
|
||||
color: #31272c;
|
||||
font-size: 0.8em;
|
||||
font-size: 0.85em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -460,11 +467,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 {
|
||||
|
|
@ -472,10 +479,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 {
|
||||
|
|
@ -519,7 +526,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 {
|
||||
|
|
@ -547,6 +554,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;
|
||||
|
|
@ -600,7 +612,7 @@ input[type="color"]::-webkit-color-swatch-wrapper {
|
|||
|
||||
#exitCustomization > div {
|
||||
width: 12em;
|
||||
background: #5d4651;
|
||||
background: var(--dark-solid);
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
|
|
@ -636,7 +648,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;
|
||||
|
|
@ -644,8 +656,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 {
|
||||
|
|
@ -678,12 +695,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;
|
||||
|
|
@ -692,14 +709,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 {
|
||||
|
|
@ -798,7 +818,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;
|
||||
|
|
@ -814,7 +834,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;
|
||||
}
|
||||
|
|
@ -1141,7 +1161,7 @@ i.resetButton {
|
|||
}
|
||||
|
||||
i.resetButton:active {
|
||||
color: #5d4651;
|
||||
color: var(--dark-solid);
|
||||
}
|
||||
|
||||
.ui-dialog button.pressed {
|
||||
|
|
@ -1674,8 +1694,8 @@ div.editorLine {
|
|||
}
|
||||
|
||||
#pickerHeader {
|
||||
fill: #916e7f;
|
||||
stroke: #5d4651;
|
||||
fill: var(--header);
|
||||
stroke: var(--dark-solid);
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
|
|
@ -1689,7 +1709,7 @@ div.editorLine {
|
|||
|
||||
#pickerCloseRect {
|
||||
cursor: pointer;
|
||||
fill: #916e7f;
|
||||
fill: var(--header);
|
||||
stroke: #f8ffff;
|
||||
}
|
||||
|
||||
|
|
@ -2192,14 +2212,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 {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue