WhatTheFantasy
/
WF-Website
14
1
Fork 0
Code Issues 19 Pull Requests Packages Projects 1 Releases Wiki Activity

ajout annimations quiz en hover

Browse Source
pull/23/head
Maxime ROCHER 4 months ago
parent 5ea5c0b876
commit ad9c10e450
5 changed files with 105 additions and 148 deletions
Show Stats Download Patch File Download Diff File

2
public/styles/styleAccueil.css
Unescape View File

@ -5,7 +5,7 @@
/* Citation du jour */ /* Citation du jour */
.citation-du-jour { .citation-du-jour {
width: 96.5vw; width: 96.66vw;
padding: 0; padding: 0;
margin-left: 1.25vw; margin-left: 1.25vw;
overflow: hidden; overflow: hidden;

13
public/styles/styleQuiz.css
Unescape View File

@ -14,10 +14,6 @@ body.dark-mode .answer {
color: var(--main-dark-text-color); color: var(--main-dark-text-color);
} }
body.dark-mode .answer:hover {
background: #1b0048;
}
body.dark-mode .submit-button { body.dark-mode .submit-button {
text-align: center; text-align: center;
margin-top: 80px; margin-top: 80px;
@ -51,10 +47,6 @@ body.light-mode .answer {
color: var(--main-light-text-color); color: var(--main-light-text-color);
} }
body.light-mode .answer:hover {
background: #7c7c7c;
}
/* ====== ECRAN DEFAUT ====== */ /* ====== ECRAN DEFAUT ====== */
h1, h2, p { h1, h2, p {
@ -90,6 +82,11 @@ h1, h2, p {
cursor: pointer; cursor: pointer;
} }
.answer:hover {
transform: scale(1.1);
transition: transform 0.3s ease-in-out;
}
#timer{ #timer{
width: 20vw; width: 20vw;
display: block; display: block;

126
public/styles/styleQuote.css
Unescape View File

@ -4,26 +4,19 @@
body.dark-mode .card { body.dark-mode .card {
background-color: var(--main-dark-other-color); background-color: var(--main-dark-other-color);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
} }
body.dark-mode .card-content,
body.dark-mode .card-content { body.dark-mode .likes,
color: var(--main-dark-text-color); body.dark-mode .like-icon,
} body.dark-mode .share-icon,
body.dark-mode .likeLien {
body.dark-mode .likes {
font-size: 20px;
color: var(--main-dark-text-color);
}
body.dark-mode .like-icon {
color: var(--main-dark-text-color); color: var(--main-dark-text-color);
cursor: pointer;
} }
body.dark-mode .like-icon,
body.dark-mode .share-icon { body.dark-mode .share-icon {
color: var(--main-dark-text-color);
cursor: pointer; cursor: pointer;
} }
@ -31,33 +24,23 @@ body.dark-mode .commentaire{
background-color: var(--main-dark-other-color); background-color: var(--main-dark-other-color);
} }
body.dark-mode .likeLien{
color: var(--main-dark-text-color);
}
/* ====== LIGHT MODE ====== */ /* ====== LIGHT MODE ====== */
body.light-mode .card { body.light-mode .card {
background-color: var(--main-light-other-color); background-color: var(--main-light-other-color);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
} }
body.light-mode .card-content { body.light-mode .card-content,
color: var(--main-light-text-color); body.light-mode .likes,
} body.light-mode .like-icon,
body.light-mode .share-icon,
body.light-mode .likeLien {
body.light-mode .likes {
font-size: 20px;
color: var(--main-light-text-color);
}
body.light-mode .like-icon {
color: var(--main-light-text-color); color: var(--main-light-text-color);
cursor: pointer;
} }
body.light-mode .like-icon,
body.light-mode .share-icon { body.light-mode .share-icon {
color: var(--main-light-text-color);
cursor: pointer; cursor: pointer;
} }
@ -65,10 +48,6 @@ body.light-mode .commentaire{
background-color: var(--main-light-other-color); background-color: var(--main-light-other-color);
} }
body.light-mode .likeLien{
color: var(--main-light-text-color);
}
body.light-mode .like-icon-none img { body.light-mode .like-icon-none img {
filter: invert(100%); filter: invert(100%);
} }
@ -78,6 +57,7 @@ body.light-mode .like-icon-none img{
.central_container { .central_container {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
padding: 2vh;
} }
.card { .card {
@ -87,6 +67,7 @@ body.light-mode .like-icon-none img{
height: 70vh; height: 70vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden;
} }
.commentaire { .commentaire {
@ -97,7 +78,7 @@ body.light-mode .like-icon-none img{
display: flex; display: flex;
padding: 1vh; padding: 1vh;
flex-direction: column; flex-direction: column;
flex-wrap: nowrap; overflow: hidden;
} }
.infoQuote { .infoQuote {
@ -105,6 +86,7 @@ body.light-mode .like-icon-none img{
font-size: 25px; font-size: 25px;
line-height: 40px; line-height: 40px;
} }
.card-image { .card-image {
border-radius: 10px; border-radius: 10px;
width: 20vw; width: 20vw;
@ -125,6 +107,7 @@ body.light-mode .like-icon-none img{
padding-left: 1vh; padding-left: 1vh;
border: none; border: none;
border-radius: 20px; border-radius: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
} }
.btn { .btn {
@ -137,11 +120,13 @@ body.light-mode .like-icon-none img{
background-image: url(../images/icons8-envoyer-24.png); background-image: url(../images/icons8-envoyer-24.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
cursor: pointer;
} }
.formulaire { .formulaire {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center;
} }
.comment_section { .comment_section {
@ -153,22 +138,22 @@ body.light-mode .like-icon-none img{
} }
.comment_section::-webkit-scrollbar { .comment_section::-webkit-scrollbar {
width: 8px; /* Largeur de la scrollbar */ width: 8px;
} }
.comment_section::-webkit-scrollbar-track { .comment_section::-webkit-scrollbar-track {
background: #f1f1f1; /* Couleur de fond */ background: #f1f1f1;
border-radius: 8px; /* Arrondi pour modernité */ border-radius: 8px;
} }
.comment_section::-webkit-scrollbar-thumb { .comment_section::-webkit-scrollbar-thumb {
background-color: #888; /* Couleur du "curseur" */ background-color: #888;
border-radius: 8px; /* Arrondi du curseur */ border-radius: 8px;
border: 2px solid #f1f1f1; /* Petit espace autour pour l'effet moderne */ border: 2px solid #f1f1f1;
} }
.comment_section::-webkit-scrollbar-thumb:hover { .comment_section::-webkit-scrollbar-thumb:hover {
background-color: #555; /* Couleur au survol */ background-color: #555;
} }
.com { .com {
@ -180,52 +165,48 @@ body.light-mode .like-icon-none img{
margin-bottom: 1vh; margin-bottom: 1vh;
border-radius: 20px; border-radius: 20px;
padding: 2%; padding: 2%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
} }
.date { .date {
margin-bottom: 0.5vh; margin-bottom: 0.5vh;
font-size: small; font-size: small;
color: #888;
} }
.icons { .icons {
margin: 2vh; margin: 2vh;
display: flex;
justify-content: space-around;
} }
.like-icon{ .like-icon,
.like-icon-none {
height: 5vh; height: 5vh;
margin-bottom: 2vh; margin-bottom: 2vh;
} }
.like-icon img{ .like-icon img,
height: 5vh;
width: 5vh;
}
.like-icon-none img { .like-icon-none img {
height: 5vh; height: 5vh;
width: 5vh; width: 5vh;
} }
.like-icon-none{
height: 5vh;
margin-bottom: 2vh;
}
.share-icon { .share-icon {
font-size: 50px; font-size: 50px;
} }
.part1{ .part1,
.part2 {
display: flex; display: flex;
} }
.part2 { .part2 {
display: flex;
justify-content: space-between; justify-content: space-between;
} }
.likes { .likes {
align-self: self-end; align-self: flex-end;
padding: 2vh; padding: 2vh;
} }
@ -261,7 +242,7 @@ body.light-mode .like-icon-none img{
.comAdd:focus { .comAdd:focus {
outline: none; outline: none;
box-shadow: none; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
} }
.likeLien { .likeLien {
@ -273,16 +254,7 @@ body.light-mode .like-icon-none img{
flex: 1; flex: 1;
} }
.like-icon-none{ @media (max-width: 834px), (max-aspect-ratio: 1/1) {
height: 5vh;
margin-bottom: 2vh;
}
.like-icon-none img{
height: 5vh;
}
@media (max-width: 834px) or (max-aspect-ratio : 1/1){
.central_container { .central_container {
flex-direction: column; flex-direction: column;
} }
@ -302,7 +274,6 @@ body.light-mode .like-icon-none img{
} }
.infoQuote { .infoQuote {
list-style: none;
font-size: 20px; font-size: 20px;
line-height: 30px; line-height: 30px;
} }
@ -322,8 +293,6 @@ body.light-mode .like-icon-none img{
} }
.com { .com {
display: flex;
flex-direction: column;
margin-top: 0.5vh; margin-top: 0.5vh;
margin-bottom: 0.5vh; margin-bottom: 0.5vh;
padding: 2vh; padding: 2vh;
@ -333,30 +302,22 @@ body.light-mode .like-icon-none img{
margin: 2vh; margin: 2vh;
} }
.like-icon{ .like-icon,
height: 3vh; .like-icon-none {
}
.like-icon img{
height: 3vh; height: 3vh;
width: 5vh;
} }
.like-icon img,
.like-icon-none img { .like-icon-none img {
height: 3vh; height: 3vh;
width: 3vh; width: 3vh;
} }
.like-icon-none{
height: 3vh;
}
.share-icon { .share-icon {
font-size: 35px; font-size: 35px;
} }
.likes { .likes {
align-self: self-end;
padding: 2vh; padding: 2vh;
} }
@ -369,5 +330,4 @@ body.light-mode .like-icon-none img{
width: 75vw; width: 75vw;
height: 5vw; height: 5vw;
} }
} }

2
public/styles/styleQuoteLittle.css
Unescape View File

@ -41,7 +41,7 @@ a.link-citation:hover {
a.link-citation { a.link-citation {
text-decoration: none; text-decoration: none;
width: 47.5%; width: 47.5vw;
height: 100%; height: 100%;
transition: transform 0.3s ease; transition: transform 0.3s ease;
} }

Write Preview
Loading…
Cancel
Save