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

styling - option tabs to have flex layout

Browse source
This commit is contained in:
Azgaar 2021-09-10 01:31:52 +03:00
parent 4e04488310
commit 2c4c462499
2 changed files with 43 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

81
index.css
View file

@ -332,20 +332,6 @@ text.drag {
user-select: none; user-select: none;
} }
#collapsible {
margin: 11px;
border: 0;
position: absolute;
z-index: 2;
}
div.tab > button#optionsHide {
width: 7%;
height: 100%;
font-family: Times New Roman, Arial;
padding: 7px 0px;
}
#options { #options {
position: absolute; position: absolute;
font-family: Consolas, monospace; font-family: Consolas, monospace;
@ -360,10 +346,44 @@ div.tab > button#optionsHide {
font-family: Consolas, monospace; font-family: Consolas, monospace;
} }
#collapsible {
margin: 11px;
border: 0;
position: absolute;
z-index: 2;
display: grid;
grid-template-columns: 2fr 7fr;
}
.tab { .tab {
overflow: hidden;
border-bottom: 1px solid #5d4651; border-bottom: 1px solid #5d4651;
height: 2.2em; height: 2.2em;
display: flex;
justify-content: space-between;
}
div.tab > button#optionsHide {
width: auto;
font-family: Arial;
padding: 0.6em 0.45em;
}
button.options {
width: 100%;
background-color: #997b89;
font-weight: bold;
border: none;
transition: 0.2s;
}
button.options:hover {
background-color: #806070 !important;
color: white !important;
}
button.active {
background-color: #916e7f;
color: white;
} }
#options p { #options p {
@ -548,9 +568,8 @@ input[type="color"]::-webkit-color-swatch-wrapper {
} }
#styleElements input[type="number"] { #styleElements input[type="number"] {
width: 52px; width: 6em;
border: 0; border: 0;
padding-left: 2.5px;
} }
#styleSelectFont > option { #styleSelectFont > option {
@ -611,32 +630,6 @@ input[type="color"]::-webkit-color-swatch-wrapper {
} }
} }
.tab > button.options {
width: 18.6%;
height: 100%;
padding: 6px 0px;
}
button.options {
background-color: #997b89;
font-weight: bold;
float: left;
border: none;
border-radius: 0;
padding: 8px 10px;
transition: 0.2s;
}
button.options:hover {
background-color: #806070 !important;
color: white !important;
}
button.active {
background-color: #916e7f;
color: white;
}
.tabcontent { .tabcontent {
display: none; display: none;
padding: 0 12px 2px 12px; padding: 0 12px 2px 12px;
@ -702,7 +695,7 @@ fieldset {
#options .buttonoff { #options .buttonoff {
background-color: #b6b4b440 !important; background-color: #b6b4b440 !important;
color: grey; color: #666;
} }
.tabcontent li:hover, .tabcontent li:hover,

7
index.html
View file

@ -242,7 +242,7 @@
<div id="collapsible"> <div id="collapsible">
<button id="optionsTrigger" data-t="tipOptionsTrigger" data-tip="Click to show options pane. Shortcut: Tab" class="options glow" onclick="showOptions(event)" style="padding:.6em .45em">►</button> <button id="optionsTrigger" data-t="tipOptionsTrigger" data-tip="Click to show options pane. Shortcut: Tab" class="options glow" onclick="showOptions(event)" style="padding:.6em .45em">►</button>
<button id="regenerate" data-t="tipRegenerate" data-tip="Click to generate a new map. Shortcut: F2" onclick="regeneratePrompt()" class="options" style="display:none; padding:.6em 1em"><t data-t="newMap">New Map!</t></button> <button id="regenerate" data-t="tipRegenerate" data-tip="Click to generate a new map. Shortcut: F2" onclick="regeneratePrompt()" class="options" style="display: none"><t data-t="newMap">New Map!</t></button>
</div> </div>
<div id="options" style="display:none"> <div id="options" style="display:none">
@ -666,7 +666,7 @@
<td>Font</td> <td>Font</td>
<td> <td>
<select id="styleSelectFont"></select> <select id="styleSelectFont"></select>
<button id="styleFontAdd" data-tip="Add a font" class="icon-plus styleButton"></button> <button id="styleFontAdd" data-tip="Add a font" class="icon-plus sideButton"></button>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -1310,9 +1310,10 @@
</tr> --> </tr> -->
</table> </table>
<div>
<button id="configureWorld" data-tip="Click to open world configurator to setup map position on Globe and World climate" onclick="editWorld()">Configure World</button> <button id="configureWorld" data-tip="Click to open world configurator to setup map position on Globe and World climate" onclick="editWorld()">Configure World</button>
<button id="optionsReset" data-tip="Click to restore default options (page will be reloaded)" onclick="restoreDefaultOptions()">Reset to defaults</button> <button id="optionsReset" data-tip="Click to restore default options (page will be reloaded)" onclick="restoreDefaultOptions()">Reset to defaults</button>
</div>
</div> </div>
<div id="toolsContent" class="tabcontent"> <div id="toolsContent" class="tabcontent">