make the tabs take all the space

This commit is contained in:
magmaus3 2023-07-24 19:55:08 +02:00
parent f5abe57ca1
commit 5328ba1727
Signed by: magmaus3
GPG key ID: 966755D3F4A9B251

View file

@ -40,7 +40,7 @@
// Everything for the UI itself
// Holds the state of tabs.
// Intended values are "encode" and "decode"
// Intended values are "encode", "decode" and "about"
let tabOpen = "encode"
function switchTab(name) {
@ -117,7 +117,7 @@
.tab {
border: 1px solid white;
padding: 1em;
border-radius: 0em 1em 1em 1em;
border-radius: 0em 0em 1em 1em;
box-shadow: 0px 5px 15px black, 0px 1px 15px black inset;
}
.result:empty { display: none;}
@ -132,6 +132,8 @@
display: none; /* Default value to keep tabs hidden when JS is not available */
}
.button {
flex: 1;
text-align: center;
padding: 0.5em;
border: 1px solid white;
border-bottom: none;
@ -140,6 +142,9 @@
.leftButton {
border-radius: 1em 0em 0em 0em;
}
.rightButton {
border-radius: 0em 1em 0em 0em;
}
.button:hover {
box-shadow: 0px 5px 25px black;
}
@ -162,7 +167,7 @@
<div class="tabBar">
<div onclick="switchTab('encode')" class="button leftButton">Encode</div>
<div onclick="switchTab('decode')" class="button">Decode</div>
<div onclick="switchTab('about')" class="button right">About</div>
<div onclick="switchTab('about')" class="button rightButton">About</div>
</div>
<div class="tab" id="encode">
<form>