make the tabs take all the space
This commit is contained in:
parent
f5abe57ca1
commit
5328ba1727
1 changed files with 8 additions and 3 deletions
11
index.html
11
index.html
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue