pascal.lafourcade
/
swish
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

classement

Browse Source
master
LAPTOP-LJ9LM6JH\franc 4 years ago
parent ab8763e3a5
commit 5afbe99c8c
4 changed files with 371 additions and 7 deletions
Show Stats Download Patch File Download Diff File

5
SwichGIT/src/css/PageDaccueil.css
Unescape View File

@ -119,11 +119,6 @@
width: 2vw;
}
#infosec2{
z-index:15;
width: 2vw;
}
#info {
color: var(--lightprima);
text-decoration: none;

145
SwichGIT/src/css/desktops.css
Unescape View File

@ -306,4 +306,149 @@
text-align: center;
width: inherit;
}
#containBottom{
position: absolute;
bottom: 3vh;
width: auto;
left: 50%;
z-index: 20;
height: auto;
}
#containScore {
display: grid;
grid-template-columns: repeat(10, 100px);
grid-template-rows: repeat(1, 100px);
grid-gap: 1vw;
justify-content: center;
position: relative;
left: -50%;
}
.titreScore{
font: 700 5vh "Poppins", sans-serif;
color: #2B2D2F;
position: relative;
left: -50%;
text-align: center;
}
.case-score{
padding: 4px;
position: relative;
z-index: 1;
width: 7vw;
height: 17vh;
cursor: default;
transition: all 0.3s ease;
}
.case-score .score-description {
background-color: #B7B7B7;
padding: 10px 15px;
width: calc(100% - 30px);
height: calc(100% - 20px);
transition: inherit;
}
.case-score .score-position {
font: 700 34px/1.3 "Poppins", sans-serif;
margin: 0 0 0;
transition: 0.2s ease 150ms;
}
.case-score .score-pseudo, .score-points {
font: 500 12px "Poppins", sans-serif;
margin-top: -0.2em;
}
.case-score:after {
z-index: 10;
background: #f9f8f7;
color: #333;
width: 180px;
position: absolute;
top: 80%;
opacity: 0;
transition: opacity 0.3s ease 0.3s, top 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;
height: auto;
font-size: 12px;
line-height: 1.4;
padding: 10px;
margin: 0 0 0 -50px;
border-radius: 6px;
text-align: center;
}
.case-score:hover {
transform: scale(1.12);
z-index: 10;
}
.case-score:hover .score-description {
background: transparent;
}
.case-score:hover .score-position,
.case-score:hover .score-pseudo,
.case-score:hover .score-points {
-webkit-text-fill-color: #222;
}
.case-score:hover:after {
top: 105%;
opacity: 1;
}
.first {
background: linear-gradient(to bottom right, #f3f9a6 0%, #cbc634 100%);
}
.first .score-position,
.first .score-pseudo,
.first .score-points {
background: -webkit-linear-gradient(#2B2D2F, #2B2D2F);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.second {
background: linear-gradient(to bottom right, #37cfdc 0%, #5a88e5 100%);
}
.second .score-position,
.second .score-pseudo,
.second .score-points {
background: -webkit-linear-gradient(#2B2D2F, #2B2D2F);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.third {
background: linear-gradient(to bottom right, #ff616d 0%, #ffc171 100%);
}
.third .score-position,
.third .score-pseudo,
.third .score-points {
background: -webkit-linear-gradient(#2B2D2F, #2B2D2F);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.nopodium {
background: linear-gradient(to bottom right, #2c3e50 0%, #B7B7B7 90%);
}
.nopodium .score-position,
.nopodium .score-pseudo,
.nopodium .score-points {
background: -webkit-linear-gradient(#3A3B3C, #3A3B3C );
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#infosec2{
z-index:15;
width: 2vw;
position: relative;
left: 2vw;
}
}

150
SwichGIT/src/css/tablet.css
Unescape View File

@ -299,4 +299,154 @@
background-color: var(--lighttercia);
}
#containBottom{
position: absolute;
bottom: 0vh;
width: auto;
left: 50%;
z-index: 20;
height: auto;
}
#containScore {
display: grid;
grid-template-columns: repeat(5, 100px);
grid-template-rows: repeat(2, 90px);
justify-content: center;
position: relative;
left: -50%;
}
.titreScore{
font: 700 5vh "Poppins", sans-serif;
color: #2B2D2F;
position: relative;
left: -50%;
text-align: center;
}
.case-score{
padding: 4px;
position: relative;
z-index: 1;
width: 10vw;
height: 12vh;
cursor: default;
transition: all 0.3s ease;
}
.case-score .score-description {
background-color: #B7B7B7;
padding: 10px 15px;
width: calc(100% - 30px);
height: calc(100% - 20px);
transition: inherit;
}
.case-score .score-position {
font: 700 3vw "Poppins", sans-serif;
margin-left: -1vw;
transition: 0.2s ease 150ms;
}
.case-score .score-pseudo, .score-points {
font: 500 12px "Poppins", sans-serif;
margin-top: -0.2em;
margin-left: -1vw;
}
.case-score:after {
z-index: 10;
background: #f9f8f7;
color: #333;
width: 180px;
position: absolute;
top: 80%;
opacity: 0;
transition: opacity 0.3s ease 0.3s, top 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;
height: auto;
font-size: 12px;
line-height: 1.4;
padding: 10px;
margin: 0 0 0 -50px;
border-radius: 6px;
text-align: center;
}
.case-score:hover {
transform: scale(1.12);
z-index: 10;
}
.case-score:hover .score-description {
background: transparent;
}
.case-score:hover .score-position,
.case-score:hover .score-pseudo,
.case-score:hover .score-points {
-webkit-text-fill-color: #222;
}
.case-score:hover:after {
top: 105%;
opacity: 1;
}
.first {
background: linear-gradient(to bottom right, #f3f9a6 0%, #cbc634 100%);
}
.first .score-position,
.first .score-pseudo,
.first .score-points {
background: -webkit-linear-gradient(#2B2D2F, #2B2D2F);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.second {
background: linear-gradient(to bottom right, #37cfdc 0%, #5a88e5 100%);
}
.second .score-position,
.second .score-pseudo,
.second .score-points {
background: -webkit-linear-gradient(#2B2D2F, #2B2D2F);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.third {
background: linear-gradient(to bottom right, #ff616d 0%, #ffc171 100%);
}
.third .score-position,
.third .score-pseudo,
.third .score-points {
background: -webkit-linear-gradient(#2B2D2F, #2B2D2F);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.nopodium {
background: linear-gradient(to bottom right, #2c3e50 0%, #B7B7B7 90%);
}
.nopodium .score-position,
.nopodium .score-pseudo,
.nopodium .score-points {
background: -webkit-linear-gradient(#3A3B3C, #3A3B3C );
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.content{
margin-top: -5vw;
}
#infosec2{
position: relative;
z-index:15;
width: 2vw;
left: 5vw;
}
}

78
SwichGIT/src/index.html
Unescape View File

@ -627,8 +627,82 @@
</div>
<div id="ContainBottom">
<!-- présentation des formes -->
<div id="containBottom">
<!-- tableau des scores -->
<h1 class="titreScore">Classement - solo</h1>
<div id="containScore">
<div class="case-score first" data-description="Score obtenu le ...">
<div class="score-description">
<div class="score-position">1er</div>
<div class="score-pseudo">palafour</div>
<div class="score-points">696 pts</div>
</div>
</div>
<div class="case-score second" data-description="Score obtenu le ...">
<div class="score-description">
<div class="score-position">2e</div>
<div class="score-pseudo">cyril</div>
<div class="score-points">600 pts</div>
</div>
</div>
<div class="case-score third" data-description="Score obtenu le ...">
<div class="score-description">
<div class="score-position">3e</div>
<div class="score-pseudo">mamore</div>
<div class="score-points">500 pts</div>
</div>
</div>
<div class="case-score nopodium" data-description="Score obtenu le ...">
<div class="score-description">
<div class="score-position">4e</div>
<div class="score-pseudo">yannis</div>
<div class="score-points">430 pts</div>
</div>
</div>
<div class="case-score nopodium" data-description="Score obtenu le ...">
<div class="score-description">
<div class="score-position">5e</div>
<div class="score-pseudo">theo</div>
<div class="score-points">340 pts</div>
</div>
</div>
<div class="case-score nopodium" data-description="Score obtenu le ...">
<div class="score-description">
<div class="score-position">6e</div>
<div class="score-pseudo">alexandre</div>
<div class="score-points">295 pts</div>
</div>
</div>
<div class="case-score nopodium" data-description="Score obtenu le ...">
<div class="score-description">
<div class="score-position">7e</div>
<div class="score-pseudo">borto</div>
<div class="score-points">210 pts</div>
</div>
</div>
<div class="case-score nopodium" data-description="Score obtenu le ...">
<div class="score-description">
<div class="score-position">8e</div>
<div class="score-pseudo"></div>
<div class="score-points"></div>
</div>
</div>
<div class="case-score nopodium" data-description="Score obtenu le ...">
<div class="score-description">
<div class="score-position">9e</div>
<div class="score-pseudo"></div>
<div class="score-points"></div>
</div>
</div>
<div class="case-score nopodium" data-description="Score obtenu le ...">
<div class="score-description">
<div class="score-position">10e</div>
<div class="score-pseudo"></div>
<div class="score-points"></div>
</div>
</div>
</div>
</div>

Write Preview
Loading…
Cancel
Save