Files
site-interpromos/public_html/css/stylePages.css
2022-10-10 20:16:59 +02:00

428 lines
8.5 KiB
CSS

@font-face {
font-family: "BebasNeue";
src: url("../styles/font/BebasNeue-Regular.woff2") format("woff2"),
url("../styles/font/BebasNeue-Regular.woff") format("woff");
}
@font-face {
font-family: "ScoreBoard";
src: url("../styles/font/scoreboard.woff") format("woff");
}
body{
background-color: rgb(37, 37, 37);
}
.LightMode{
background-color: rgb(255, 255, 255);
}
/* SCROLLBAR */
::-webkit-scrollbar {
width: 20px;
}
::-webkit-scrollbar-track {
background-color: transparent;
}
::-webkit-scrollbar-thumb {
background-color: #d6dee1;
border-radius: 20px;
border: 6px solid transparent;
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
background-color: #a8bbbf;
}
::-webkit-scrollbar-corner {
background: transparent;
}
/*--*/
@media only screen and ( orientation: portrait ) {
img {
padding: 5%;
width: 60%;
display: block;
margin-left: auto;
margin-right: auto
}
.ButtonDayNight{
position: absolute;
top: 3%;
right: 5%;
width: 10%;
}
.Home{
position:absolute;
top: 0%;
width: 10%;
}
.ContainerMatchEnCours{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);
margin-top: 7%;
margin-right: auto;
margin-left: auto;
border-radius: 3%;
width: 80%;
height: 20%;
background-color: #4c535e;
}
.TextMatch{
grid-row: 1;
grid-column: 1/4;
font-family: "BebasNeue";
color: rgb(217, 224, 232);
font-size: 300%;
padding-top: 1%;
position: relative;
text-align: center;
}
.J1{
grid-row: 2;
grid-column: 1;
color: rgb(0, 0, 0);
font-family: 'BebasNeue';
font-size: 500%;
margin-bottom: 5%;
margin-left: 30%;
}
img.VersusImg{
grid-row: 2;
grid-column: 2;
margin-left: -5%;
width: 100%;
margin-top: -40% ;
}
.J2{
grid-row: 2;
color:rgb(0, 0, 0);
margin-right: 30%;
grid-column: 3/4;
margin-bottom: 5%;
font-family: 'BebasNeue';
font-size: 500%;
margin-left: 5%;
}
.ScoreJ1{
color: #fff;
text-shadow:
0 0 7px #fff,
0 0 10px #fff,
0 0 21px #fff,
0 0 42px #0fa,
0 0 82px #0fa,
0 0 92px #0fa,
0 0 102px #0fa,
0 0 151px #0fa;
font-family: 'ScoreBoard';
grid-row: 3;
grid-column: 1;
font-size: 900%;
margin-top: -30%;
margin-left: 40%;
text-align: center;
}
.ScoreJ2{
font-family: 'ScoreBoard';
grid-row: 3;
grid-column: 3;
font-size: 900%;
margin-top: -30%;
margin-right: 40%;
color: #ffffff;
text-shadow:
0 0 7px #ffffff,
0 0 10px #ffffff,
0 0 21px #cd0707,
0 0 42px #cd0707,
0 0 82px #cd0707,
0 0 92px #cd0707,
0 0 102px #cd0707,
0 0 151px #cd0707;
text-align: center;
}
.tiret{
font-family: 'ScoreBoard';
grid-row: 3;
grid-column: 2;
margin-top: -35%;
font-size: 900%;
text-align: center;
color: rgb(255, 255, 255);
text-shadow:
0 0 7px rgb(249, 249, 249),
0 0 10px rgb(255, 255, 255),
0 0 21px rgb(0, 0, 0),
0 0 42px rgb(0, 0, 0),
0 0 82px rgb(0, 0, 0),
0 0 92px rgb(0, 0, 0),
0 0 102px rgb(0, 0, 0),
0 0 151px rgb(0, 0, 0);
}
table {
display: none;
font-family: arial, sans-serif;
font-size: 160%;
border-collapse: collapse;
width: 80%;
height: 40%;
margin-right: auto;
margin-left: auto;
}
td, th {
color: azure;
border: 2px solid #dddddd;
text-align: center;
padding: 8px;
}
tr:nth-child(even) {
background-color: #515151;
}
.Sign{
position:fixed;
bottom: 10px;
right: 0px;
width: 2%;
}
.TournamentContainer{
position: relative;
display: flex;
width: 95%;
margin-left: auto;
margin-right: auto;
height: 35%;
background-color: rgb(58, 56, 56);
border-radius: 2em;
overflow: auto;
}
.Bracket {
overflow:hidden ;
flex-grow: 1;
border: none;
margin: 0;
padding: 0;
zoom: 1.75;
-moz-transform:scale(1.75);
-moz-transform-origin: 0 0;
-o-transform: scale(1.75);
-o-transform-origin: 0 0;
-webkit-transform: scale(1.75);
-webkit-transform-origin: 0 0;
}
OsefColorSelctor {
background-color: #979ba0;
}
}
@media only screen and ( orientation: landscape) {
.Home{
position:absolute;
left: 1%;
top: 2%;
width: 5%;
}
.Logo{
display: flex;
position: relative;
display: flex;
width: 25%;
margin-left: 7%;
left: -2%;
float: left;
}
.ButtonDayNight{
position: absolute;
top: 2%;
right: 1%;
width: 4%;
}
.ContainerMatchEnCours{
position: relative;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
grid-auto-rows: minmax(30px, auto);
top: 7%;
margin-right: auto;
margin-left: auto;
border-radius: 25em;
width: 90%;
height: 30%;
background-color: #4c535e;
}
.TextMatch{
grid-row: 1;
grid-column: 1/4;
font-family: "BebasNeue";
color: rgb(217, 224, 232);
font-size: 200%;
padding-top: 1%;
position: relative;
text-align: center;
}
.J1{
grid-row: 2;
grid-column: 1;
color: rgb(0, 0, 0);
font-family: 'BebasNeue';
font-size: 300%;
text-align: right;
margin-top: -14%;
margin-left: 0%;
}
img.VersusImg{
grid-row: 1/3;
image-orientation: flip;
grid-column: 2;
margin-left: auto;
margin-right: auto;
width: 40%;
margin-top: 10%;
}
.J2{
grid-row: 2;
color:rgb(0, 0, 0);
grid-column: 3/4;
font-family: 'BebasNeue';
margin-top: -14%;
font-size: 300%;
text-align: left;
}
.ScoreJ1{
color: #fff;
text-shadow:
0 0 7px #fff,
0 0 10px #fff,
0 0 21px #fff,
0 0 42px #0fa,
0 0 82px #0fa,
0 0 92px #0fa,
0 0 102px #0fa,
0 0 151px #0fa;
font-family: 'ScoreBoard';
grid-row: 3;
grid-column: 1;
font-size: 375%;
margin-top: -10%;
text-align: right;
margin-right: 10%;
}
.ScoreJ2{
font-family: 'ScoreBoard';
grid-row: 3;
grid-column: 3;
font-size: 375%;
margin-top: -10%;
color: #ffffff;
text-shadow:
0 0 7px #ffffff,
0 0 10px #ffffff,
0 0 21px #cd0707,
0 0 42px #cd0707,
0 0 82px #cd0707,
0 0 92px #cd0707,
0 0 102px #cd0707,
0 0 151px #cd0707;
text-align: left;
margin-left: 10%;
}
.tiret{
opacity: 0%;
}
table {
display: none;
font-family: arial, sans-serif;
font-size: 80%;
top: 4%;
right: 7%;
border-collapse: collapse;
width: 60%;
height: 40%;
float: right;
position: relative;
}
td, th {
color: azure;
border: 2px solid #dddddd;
text-align: center;
padding: 8px;
}
tr:nth-child(even) {
background-color: #515151;
}
.Sign{
position:fixed;
bottom: 10px;
right: 0px;
width: 1.5%;
}
/* TOURNAMENT */
.TournamentContainer{
display: flex;
position: relative;
width: 63%;
height: 55%;
background-color: rgb(58, 56, 56);
border-radius: 2em;
overflow: hidden;
float: left;
}
.Bracket {
flex-grow: 1; border: none; margin: 0; padding: 0; }
}