backups/Fantasy-Map-Generator
1
0
Fork 0
mirror of https://github.com/Azgaar/Fantasy-Map-Generator.git synced 2025-12-18 02:01:22 +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;
}
#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 {
position: absolute;
font-family: Consolas, monospace;
@ -360,10 +346,44 @@ div.tab > button#optionsHide {
font-family: Consolas, monospace;
}
#collapsible {
margin: 11px;
border: 0;
position: absolute;
z-index: 2;
display: grid;
grid-template-columns: 2fr 7fr;
}
.tab {
overflow: hidden;
border-bottom: 1px solid #5d4651;
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 {
@ -548,9 +568,8 @@ input[type="color"]::-webkit-color-swatch-wrapper {
}
#styleElements input[type="number"] {
width: 52px;
width: 6em;
border: 0;
padding-left: 2.5px;
}
#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 {
display: none;
padding: 0 12px 2px 12px;
@ -702,7 +695,7 @@ fieldset {
#options .buttonoff {
background-color: #b6b4b440 !important;
color: grey;
color: #666;
}
.tabcontent li:hover,