Skip to content

Commit

Permalink
Update to version 2.2, added
Browse files Browse the repository at this point in the history
  • Loading branch information
@artisticfox8
artisticfox8 authored Dec 20, 2022
1 parent 425e027 commit 621bafa
Showing 1 changed file with 64 additions and 32 deletions.
96 changes: 64 additions & 32 deletions tab bar v6.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,33 +6,36 @@
</head>
<body>
<div id="main" style="display: flex;width: 100%">
<button class="navigation" id="backButton"><!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
<path d="M14.375 8 3.048 8l4.308-4.308a.626.626 0 0 0-.885-.885L1 8.281l0 .689 5.472 5.473a.623.623 0 0 0 .884 0 .628.628 0 0 0 0-.885L3.048 9.25l11.327 0a.625.625 0 0 0 0-1.25z"/>
</svg>
</button>

<button class="navigation" id="forwardButton"><!-- This Source Code Form is subject to the terms of the Mozilla Public
<div class="navigationWrapper">
<button class="navigation" id="backButton"><!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
<path d="m1.625 8 11.327 0-4.308-4.308a.626.626 0 0 1 .885-.885L15 8.281l0 .689-5.472 5.473a.623.623 0 0 1-.884 0 .628.628 0 0 1 0-.885l4.308-4.308-11.327 0a.625.625 0 0 1 0-1.25z"/>
</svg>
</button>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" fill-opacity="context-fill-opacity">
<path d="M14.375 8 3.048 8l4.308-4.308a.626.626 0 0 0-.885-.885L1 8.281l0 .689 5.472 5.473a.623.623 0 0 0 .884 0 .628.628 0 0 0 0-.885L3.048 9.25l11.327 0a.625.625 0 0 0 0-1.25z"/>
</svg>
</button>

<button class="navigation" id="reloadButton">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
<path d="M10.707 6 14.7 6l.3-.3 0-3.993a.5.5 0 0 0-.854-.354l-1.459 1.459A6.95 6.95 0 0 0 8 1C4.141 1 1 4.141 1 8s3.141 7 7 7a6.97 6.97 0 0 0 6.968-6.322.626.626 0 0 0-.562-.682.635.635 0 0 0-.682.562A5.726 5.726 0 0 1 8 13.75c-3.171 0-5.75-2.579-5.75-5.75S4.829 2.25 8 2.25a5.71 5.71 0 0 1 3.805 1.445l-1.451 1.451a.5.5 0 0 0 .353.854z"/>
<button class="navigation" id="forwardButton"><!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" fill-opacity="context-fill-opacity">
<path d="m1.625 8 11.327 0-4.308-4.308a.626.626 0 0 1 .885-.885L15 8.281l0 .689-5.472 5.473a.623.623 0 0 1-.884 0 .628.628 0 0 1 0-.885l4.308-4.308-11.327 0a.625.625 0 0 1 0-1.25z"/>
</svg>
</button>
</button>

<button class="navigation" id="reloadButton">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" fill-opacity="context-fill-opacity">
<path d="M10.707 6 14.7 6l.3-.3 0-3.993a.5.5 0 0 0-.854-.354l-1.459 1.459A6.95 6.95 0 0 0 8 1C4.141 1 1 4.141 1 8s3.141 7 7 7a6.97 6.97 0 0 0 6.968-6.322.626.626 0 0 0-.562-.682.635.635 0 0 0-.682.562A5.726 5.726 0 0 1 8 13.75c-3.171 0-5.75-2.579-5.75-5.75S4.829 2.25 8 2.25a5.71 5.71 0 0 1 3.805 1.445l-1.451 1.451a.5.5 0 0 0 .353.854z"/>
</svg>
</button>

</div>
<div id="tabcontainer">
<!-- <button class="tab1">Text</button> -->
</div>
<div style="height:95%">
<button id="plus">
<svg id="plusPicture" width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
<svg id="plusPicture" width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-opacity="context-fill-opacity">
<path d="M7 9.75 7 14a.625.625 0 0 0 1.25 0l0-4.25.5-.5 4.25 0A.625.625 0 0 0 13 8L8.75 8l-.5-.5 0-4.25a.625.625 0 0 0-1.25 0L7 7.5l-.5.5-4.25 0a.625.625 0 0 0 0 1.25l4.137 0z"/>
</svg>
</button>
Expand All @@ -55,13 +58,17 @@
svg{
transition: rotate 0.1s
}
img{
vertical-align: middle;
padding-right: 2px;
}
.tab{
display: inline-block;
/*height: 45px;*/
background: #e9e9ed;
color: black;
font-family: "MS Shell Dlg 2",Tahoma, serif;
padding: 1px;
padding: 2px;
margin-right: 4px;
min-width: 80px; /*65px*/
max-width: 12em;
Expand All @@ -71,14 +78,18 @@
box-sizing: border-box;
white-space: pre;
}
.selected{
background: #b1b1b9;
border-color: "transparent";
}
.hidden{
display: none;
}
#tabcontainer{
/*these two properties seem to have fixed the tabs overflowing the container slightly*/
overflow-x: auto;
overflow-y: hidden;
/*the prevoius working config with this slight bug was only one overflow property, and that is overflow-y: auto; */
/*the prevoius working config which had this slight bug was only one overflow property, and that is overflow-y: auto; */
white-space: nowrap;
scrollbar-width: none;
width: 99%;
Expand All @@ -93,13 +104,14 @@
height: 100%
}
.navigation{
width: 3rem;
width: 2.6rem;
/*height: 36px;*/ /*45px*/
margin: 4px;
height: 90%;
}
#reloadButton{
margin-right: 10px;
margin: 0px 3px 0px;
height: 100%;

}
.navigationWrapper{
height: 95%;
}
#main{
white-space: nowrap;
Expand All @@ -113,10 +125,6 @@
}
.closeButton{
margin: 5px;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
margin-right: 0px;
}
body{
Expand All @@ -129,8 +137,32 @@
background: #1c1b22;
color: #ddd;
}

}
button{
background: #323340;
border: none;
}
svg{
color: white;
}
.tab{
background: #1c1b22;
border: none;
margin-left: 10px;
padding-left: 4px;
}
.tabseparator{
border-radius: 0px;
}
.selected{
background: #42414d;
}
.tab > a{
color: white;
}
#menuItem{
color: white;
}
}
</style>
<script src="openNewTab6.js"></script>
</body>
Expand Down

0 comments on commit 621bafa

Please sign in to comment.