Trygve/simple-liveresults
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Implemented my own tab code, so bootstrap could be removed.

Browse Source
This commit is contained in:
Trygve
2021-02-13 00:21:00 +01:00
parent b3da48ab6d
commit 55bf96bb2b
4 changed files with 118 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
common/main.css
View File

@@ -26,6 +26,7 @@ body{
background-color: var(--background-color);
color: var(--text-color);
font-size: 1.1rem;
margin: 0;
}
body.theme-dark {
--background-color: var(--dark-background-color);
@@ -218,34 +219,10 @@ h4 {
.hiddendiv {
display:none;
}
.nav-link {
font-weight: 600;
transition: 0.3s;
}
.nav-link:hover {
box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
}
.button4:hover {
background-color: #e7e7e7;
}
.status-div{
color: #ffffffa2;
}
.nav-pills .nav-link{
border-radius: .25rem;
color: var(--text-accent-color);
}
.nav-pills .nav-link.active{
color: #fff;
background-color: var(--button-color);
}
.nav-link:focus{
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
outline: none;
box-shadow: 0 0 2px 2px var(--text-accent-color), 0 .5rem 1rem rgba(0,0,0,.15) !important;
}
.result-div{
width: max-content;
margin: auto;
@@ -316,7 +293,46 @@ h4 {
outline: none;
box-shadow: 0 0 2px 2px var(--button-color), 0 .5rem 1rem rgba(0,0,0,.15);
}
.tab-list{
list-style: none;
display: flex;
flex-wrap: wrap;
margin-left: auto;
margin-right: auto;
justify-content: center;
align-items: center;
}
.tab{
margin: 0.2rem;
}
.tab-button{
display: block;
padding: 0.5rem 1rem;
border-radius: .25rem;
text-decoration: none;
font-weight: 600;
transition: 0.3s;
color: var(--text-accent-color);
}
.tab-button.active{
color: #fff;
background-color: var(--button-color);
}
.tab-button:focus {
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
outline: none;
box-shadow: 0 0 2px 2px var(--text-accent-color), 0 .5rem 1rem rgba(0,0,0,.15) !important;
}
.tab-button:hover {
box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
}
.tab-content{
display: none;
}
.tab-content.active{
display: block;
}
@media only screen and (max-width: 600px) {
header {
@@ -344,6 +360,13 @@ h4 {
align-self: flex-start;
width: 100%;
}
.tab-list{
padding: 0;
justify-content: space-around;
}
.tab-button{
padding: 0.5rem;
}
.ResultTable{
width: 100%;
margin: 0px;
@@ -392,4 +415,18 @@ h4 {
--tr-color: var(--tr-color-dark);
--button-color: var(--button-color-dark);
}
}
}
.alert-div{
color: #664d03;
background-color: #fff3cd;
border-color: #ffecb5;
position: relative;
padding: 1rem 1rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
border-radius: .25rem;
}