You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
202 lines
3.5 KiB
202 lines
3.5 KiB
2 years ago
|
a:link, a:hover, a:active, a:visited{color: #000;}
|
||
|
|
||
|
html, body{margin: 0; padding: 0; height: 100%; width: 100%;}
|
||
|
|
||
|
canvas{margin: 0; padding: 0; border: none; display: block;}
|
||
|
|
||
|
button:hover{cursor: pointer;}
|
||
|
|
||
|
@font-face{
|
||
|
font-family: "Tajawal";
|
||
|
src: url("data/styles/fonts/Tajawal/Tajawal-Regular.ttf");
|
||
|
}
|
||
|
@font-face{
|
||
|
font-family: "Elronet";
|
||
|
src: url("data/styles/fonts/Elronet/Elronmonospace.ttf");
|
||
|
}
|
||
|
|
||
|
*{
|
||
|
font-family: "Tajawal", serif;
|
||
|
color: #e2e2e2;
|
||
|
font-size: 17px;
|
||
|
}
|
||
|
|
||
|
:root{
|
||
|
--width: 100vw;
|
||
|
--height: 100vh;
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* Standard styles
|
||
|
*/
|
||
|
|
||
|
#p5_loading{
|
||
|
display: none;
|
||
|
}
|
||
|
|
||
|
body{
|
||
|
display: flex;
|
||
|
flex-direction: column;
|
||
|
align-items: center;
|
||
|
background-color: #2c2b2b;
|
||
|
}
|
||
|
header{
|
||
|
text-align: center;
|
||
|
}
|
||
|
header > h1{
|
||
|
font-size: 30px;
|
||
|
}
|
||
|
h2{
|
||
|
font-size: 23px;
|
||
|
text-align: center;
|
||
|
}
|
||
|
button{
|
||
|
color: #000;
|
||
|
}
|
||
|
|
||
|
#tournament-selection{
|
||
|
display: flex;
|
||
|
flex-direction: column;
|
||
|
}
|
||
|
|
||
|
#tournament-selection > button, #tournament-selection > input[type=number]{
|
||
|
border-radius: 3px;
|
||
|
border: 2px solid #25b31f;
|
||
|
height: 30px;
|
||
|
box-sizing: border-box;
|
||
|
margin-bottom: 10px;
|
||
|
}
|
||
|
#tournament-selection > input[type=number]{
|
||
|
width: auto;
|
||
|
text-align: center;
|
||
|
color: #000
|
||
|
}
|
||
|
#tournament-selection > button{
|
||
|
background-color: #6ae046;
|
||
|
}
|
||
|
#tournament-selection > button:hover{
|
||
|
filter: brightness(90%);
|
||
|
}
|
||
|
#tournament-selection > button:disabled{
|
||
|
filter: brightness(70%);
|
||
|
}
|
||
|
|
||
|
.tournament-teaser{
|
||
|
border: 2px solid #2778c3;
|
||
|
border-radius: 5px;
|
||
|
display: flex;
|
||
|
flex-direction: row;
|
||
|
align-items: center;
|
||
|
margin-bottom: 10px;
|
||
|
background-color: #a3d3ff;
|
||
|
cursor: pointer;
|
||
|
}
|
||
|
.tournament-teaser:hover{
|
||
|
filter: brightness(80%);
|
||
|
}
|
||
|
.tournament-teaser > span{
|
||
|
color: #000;
|
||
|
}
|
||
|
|
||
|
#tournament-teams{
|
||
|
display: flex;
|
||
|
flex-direction: column;
|
||
|
align-items: center;
|
||
|
}
|
||
|
#tournament-teams > button{
|
||
|
background-color: #5d8eee;
|
||
|
border: 2px solid #395791;
|
||
|
border-radius: 4px;
|
||
|
}
|
||
|
#tournament-teams > button:hover{
|
||
|
filter: brightness(70%);
|
||
|
}
|
||
|
|
||
|
#teams-list{
|
||
|
display: flex;
|
||
|
flex-flow: row wrap;
|
||
|
align-content: flex-start;
|
||
|
height: 40vh;
|
||
|
overflow: auto;
|
||
|
margin: 20px 0;
|
||
|
border: 2px solid #000;
|
||
|
border-radius: 5px;
|
||
|
padding: 10px;
|
||
|
background-color: #59618f;
|
||
|
width: 95vw;
|
||
|
}
|
||
|
.team-teaser{
|
||
|
width: calc(20% - 20px);
|
||
|
height: 50px;
|
||
|
margin: 5px;
|
||
|
padding: 3px;
|
||
|
border-radius: 4px;
|
||
|
border: 2px solid #2778c3;
|
||
|
background-color: #14436b;
|
||
|
cursor: pointer;
|
||
|
display: flex;
|
||
|
align-items: center;
|
||
|
justify-content: center;
|
||
|
}
|
||
|
.team-teaser:hover{
|
||
|
filter: brightness(80%);
|
||
|
}
|
||
|
|
||
|
.team-teaser > img {
|
||
|
height: calc(100% - 2 * 3px - 2 * 2px);
|
||
|
margin: 10px;
|
||
|
}
|
||
|
|
||
|
#team{
|
||
|
display: flex;
|
||
|
flex-flow: row wrap;
|
||
|
justify-content: center;
|
||
|
width: 80%;
|
||
|
}
|
||
|
#team > hr{
|
||
|
width: 100%;
|
||
|
height: 0;
|
||
|
margin: 0;
|
||
|
border: 0;
|
||
|
}
|
||
|
#team > a{
|
||
|
font-size: 30px;
|
||
|
background-color: #5d8eee;
|
||
|
border: 2px solid #334f83;
|
||
|
border-radius: 4px;
|
||
|
margin: 10px;
|
||
|
text-decoration: none;
|
||
|
padding: 4px;
|
||
|
}
|
||
|
#team > a:hover{
|
||
|
filter: brightness(70%);
|
||
|
}
|
||
|
|
||
|
.player-teaser{
|
||
|
margin: 10px;
|
||
|
border-radius: 4px;
|
||
|
border: 2px solid #43699f;
|
||
|
padding: 2px 5px;
|
||
|
font-size: 20px;
|
||
|
background-color: rgba(255, 255, 255, 0.2);
|
||
|
}
|
||
|
|
||
|
#search_field {
|
||
|
color: #000;
|
||
|
border-radius: 2px;
|
||
|
}
|
||
|
|
||
|
|
||
|
/* Special */
|
||
|
|
||
|
/* Chrome, Safari, Edge, Opera */
|
||
|
input::-webkit-outer-spin-button,
|
||
|
input::-webkit-inner-spin-button {
|
||
|
-webkit-appearance: none;
|
||
|
margin: 0;
|
||
|
}
|
||
|
|
||
|
/* Firefox */
|
||
|
input[type=number] {
|
||
|
-moz-appearance: textfield;
|
||
|
}
|