magmaus3/infohash2base64
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

make the tabs take all the space

Browse source
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
1 changed files with 8 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
index.html
View file

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