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

Improved result tables and added dark mode. General improvements.

Browse Source
This commit is contained in:
Trygve
2020-10-10 15:27:48 +02:00
parent 4843e664b1
commit 8648094fa9
4 changed files with 303 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

255
common/main.css
View File

@@ -1,47 +1,216 @@
body{
font-family: "Red Hat Display", Myriad, Cantarell, "Noto Sans", "Liberation Sans","Trebuchet MS", Arial, Helvetica, sans-serif;
:root {
--accent-color-dark: #045d56;
--button-color-dark: #045d56;
--text-accent-color-dark: #1eb980;
--table-border-dark: #00000000;
--tr-color-dark: #1e1e1e;
--tr-nth-color-dark: #121212;
--table-highlight-dark: #616161;
--dark-background-color: #121212;
--dark-text-color: #eeeeee;
}
body.theme-dark {
--background-color: var(--dark-background-color);
--text-color: var(dark-text-color);
}
body{
--accent-color:#303f9f;
--button-color: #303f9f;
--text-accent-color:#303f9f;
--table-border: #e0e0e0;
--table-highlight: #c5cae9;;
--tr-nth-color: #f2f2f2;
--tr-color: none;
--background-color: #ffffff;
--text-color: #000000;
font-family: "Noto Sans", "Liberation Sans","Trebuchet MS", Arial, Helvetica, sans-serif;
background-color: var(--background-color);
color: var(--text-color);
font-size: 1.2rem;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 10%;
background-color: var(--accent-color);
color: white;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
box-shadow: 0 .5rem 1.2rem rgba(0,0,0,.15) !important;
}
.header-brand{
font-weight: 700;
}
header div{
display: inline-block;
align-items: center;
text-align: center;
}
header .spacer{
margin-left: auto;
align-items: center;
}
table {
border-collapse: collapse;
line-height: 1.1rem;
}
td, th {
border: 1px solid rgb(192, 192, 192);
padding: 0.8rem;
}
tr {
transition: 0.1s;
}
tr:nth-child(even){background-color: #f2f2f2;}
border-collapse: collapse;
line-height: 1.1rem;
font-weight: 410;
margin: 0.8rem;
border-radius: 0.4rem;
overflow: hidden;
box-shadow: 0 .5rem 1.2rem rgba(0,0,0,.15) !important;
}
tr:hover {
background-color: #c5cae9;
}
tr:visited {
background-color:#c5cae9;
}
th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}
h4 {
font-size: 20px;
margin-bottom: 6px;
margin-top: 20px;
font-weight: 600;
}
.hiddendiv {
display:none;
}
.nav-link{
font-weight: 700;
}
.fade{
transition: 0.13s;
}
td, th {
padding: 0.8rem;
padding-left: 0.3rem;
padding-right: 0.3rem;
}
tr {
transition: 0.1s;
background-color: var(--tr-color);
}
tr:nth-child(even){background-color: var(--tr-nth-color);}
.button4:hover {background-color: #e7e7e7;}
tr:hover {
background-color: var(--table-highlight);
box-shadow: 0 .8rem 1.8rem rgba(0,0,0,.15) !important;
}
tr:visited {
background-color:var(--table-highlight);
}
th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}
h4 {
font-size: 20px;
margin-bottom: 6px;
margin-top: 20px;
margin-left: 0.9rem;
font-weight: 600;
}
.all-result{
display: -ms-flexbox;
-ms-flex-direction: column;
-ms-flex-wrap: wrap;
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 50vw;
gap: 1rem;
font-size: 1rem;
}
.all-result-div{
max-width: 25%;
padding: 0 4px;
}
.all-result-div h4{
margin-left: auto;
font-size: 1.4rem;
}
@media only screen and (max-width: 1200px){
.all-result{
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: auto;
gap: 1rem;
}
.all-result-div{
max-width: 100%;
padding: 0px;
margin-left: auto;
margin-right: auto;
}
body{
font-size: 1rem;
}
}
.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;
}
.StatusDiv{
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);
}
.result-div{
width: max-content;
margin: auto;
}
.table-labels{
font-weight: 900;
font-size: 1.2rem;
}
@media only screen and (max-width: 600px) {
header {
flex-wrap: wrap;
padding-left: 0.2rem;
padding-right: 0.2rem;
}
.StatusDiv{
margin-left: auto;
}
.header-brand {
align-self: flex-start;
width: 100%;
}
.ResultTable{
width: 100%;
margin: 0px;
}
.result-div{
width: 100%;
margin: 0px;
}
.result-div h4{
margin: 0px;
}
.all-result-div{
width: 100%;
}
.club-collum{
display: none;
}
}
@media (prefers-color-scheme: dark) {
body.theme-auto {
--background-color: var(--dark-background-color);
--text-color: var(--dark-text-color);
--tr-nth-color: var(--tr-nth-color-dark);
--table-border: var(--table-border-dark);
--table-highlight: var(--table-highlight-dark);
--accent-color: var(--accent-color-dark);
--text-accent-color: var(--text-accent-color-dark);
--tr-color: var(--tr-color-dark);
--button-color: var(--button-color-dark);
}
}