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 {
width: 96.5vw;
width: 96.66vw;
padding: 0;
margin-left: 1.25vw;
overflow: hidden;

13
public/styles/styleQuiz.css
Unescape View File

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

214
public/styles/styleQuote.css
Unescape View File

@ -4,80 +4,60 @@
body.dark-mode .card {
background-color: var(--main-dark-other-color);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
body.dark-mode .card-content {
color: var(--main-dark-text-color);
}
body.dark-mode .likes {
font-size: 20px;
color: var(--main-dark-text-color);
}
body.dark-mode .like-icon {
body.dark-mode .card-content,
body.dark-mode .likes,
body.dark-mode .like-icon,
body.dark-mode .share-icon,
body.dark-mode .likeLien {
color: var(--main-dark-text-color);
cursor: pointer;
}
body.dark-mode .like-icon,
body.dark-mode .share-icon {
color: var(--main-dark-text-color);
cursor: pointer;
}
body.dark-mode .commentaire{
body.dark-mode .commentaire {
background-color: var(--main-dark-other-color);
}
body.dark-mode .likeLien{
color: var(--main-dark-text-color);
}
/* ====== LIGHT MODE ====== */
body.light-mode .card {
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,
body.light-mode .likes,
body.light-mode .like-icon,
body.light-mode .share-icon,
body.light-mode .likeLien {
color: var(--main-light-text-color);
}
body.light-mode .likes {
font-size: 20px;
color: var(--main-light-text-color);
}
body.light-mode .like-icon {
color: var(--main-light-text-color);
cursor: pointer;
}
body.light-mode .like-icon,
body.light-mode .share-icon {
color: var(--main-light-text-color);
cursor: pointer;
}
body.light-mode .commentaire{
body.light-mode .commentaire {
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%);
}
/* ====== DEFAULT ====== */
.central_container{
.central_container {
display: flex;
justify-content: space-around;
padding: 2vh;
}
.card {
@ -87,9 +67,10 @@ body.light-mode .like-icon-none img{
height: 70vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
.commentaire{
.commentaire {
margin-top: 5vh;
border-radius: 15px;
width: 25vw;
@ -97,7 +78,7 @@ body.light-mode .like-icon-none img{
display: flex;
padding: 1vh;
flex-direction: column;
flex-wrap: nowrap;
overflow: hidden;
}
.infoQuote {
@ -105,6 +86,7 @@ body.light-mode .like-icon-none img{
font-size: 25px;
line-height: 40px;
}
.card-image {
border-radius: 10px;
width: 20vw;
@ -119,17 +101,18 @@ body.light-mode .like-icon-none img{
font-style: italic;
}
.comAdd{
width : 21vw;
height : 5vh;
.comAdd {
width: 21vw;
height: 5vh;
padding-left: 1vh;
border: none;
border-radius: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.btn{
width : 5vh;
height : 5vh;
.btn {
width: 5vh;
height: 5vh;
padding-left: 1vh;
border: none;
border-radius: 50px;
@ -137,14 +120,16 @@ body.light-mode .like-icon-none img{
background-image: url(../images/icons8-envoyer-24.png);
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
}
.formulaire{
display : flex;
.formulaire {
display: flex;
flex-direction: row;
align-items: center;
}
.comment_section{
.comment_section {
margin-top: 2vh;
display: flex;
flex-direction: column;
@ -153,25 +138,25 @@ body.light-mode .like-icon-none img{
}
.comment_section::-webkit-scrollbar {
width: 8px; /* Largeur de la scrollbar */
width: 8px;
}
.comment_section::-webkit-scrollbar-track {
background: #f1f1f1; /* Couleur de fond */
border-radius: 8px; /* Arrondi pour modernité */
background: #f1f1f1;
border-radius: 8px;
}
.comment_section::-webkit-scrollbar-thumb {
background-color: #888; /* Couleur du "curseur" */
border-radius: 8px; /* Arrondi du curseur */
border: 2px solid #f1f1f1; /* Petit espace autour pour l'effet moderne */
background-color: #888;
border-radius: 8px;
border: 2px solid #f1f1f1;
}
.comment_section::-webkit-scrollbar-thumb:hover {
background-color: #555; /* Couleur au survol */
.comment_section::-webkit-scrollbar-thumb:hover {
background-color: #555;
}
.com{
.com {
background-color: #fff;
color: black;
display: flex;
@ -179,67 +164,63 @@ body.light-mode .like-icon-none img{
flex-direction: column;
margin-bottom: 1vh;
border-radius: 20px;
padding : 2%;
padding: 2%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.date{
.date {
margin-bottom: 0.5vh;
font-size: small;
color: #888;
}
.icons{
.icons {
margin: 2vh;
display: flex;
justify-content: space-around;
}
.like-icon{
.like-icon,
.like-icon-none {
height: 5vh;
margin-bottom: 2vh;
}
.like-icon img{
.like-icon img,
.like-icon-none img {
height: 5vh;
width: 5vh;
}
.like-icon-none img{
height: 5vh;
width: 5vh;
}
.like-icon-none{
height: 5vh;
margin-bottom: 2vh;
}
.share-icon{
.share-icon {
font-size: 50px;
}
.part1{
.part1,
.part2 {
display: flex;
}
.part2{
display: flex;
.part2 {
justify-content: space-between;
}
.likes{
align-self: self-end;
.likes {
align-self: flex-end;
padding: 2vh;
}
.infoQuote{
.infoQuote {
margin-bottom: 2vh;
height: 31vh;
}
.userName{
.userName {
font-size: large;
display: inline-block;
}
.infCom{
.infCom {
display: flex;
justify-content: space-between;
margin-bottom: -5px;
@ -254,47 +235,38 @@ body.light-mode .like-icon-none img{
border: #000 solid 1.5px;
}
.imgIcones{
.imgIcones {
display: flex;
align-items: center;
}
.comAdd :focus {
.comAdd:focus {
outline: none;
box-shadow: none;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}
.likeLien{
.likeLien {
text-decoration: none;
}
.card-content{
.card-content {
margin-left: 20px;
flex: 1;
}
.like-icon-none{
height: 5vh;
margin-bottom: 2vh;
}
.like-icon-none img{
height: 5vh;
}
@media (max-width: 834px) or (max-aspect-ratio : 1/1){
.central_container{
@media (max-width: 834px), (max-aspect-ratio: 1/1) {
.central_container {
flex-direction: column;
}
.card {
margin : auto;
margin: auto;
margin-bottom: 1vh;
width: 85vw;
height: 50vh;
}
.commentaire{
.commentaire {
margin-top: 1vh;
margin: auto;
width: 83vw;
@ -302,7 +274,6 @@ body.light-mode .like-icon-none img{
}
.infoQuote {
list-style: none;
font-size: 20px;
line-height: 30px;
}
@ -316,58 +287,47 @@ body.light-mode .like-icon-none img{
font-size: 25px;
}
.btn{
width : 5vh;
height : 5vh;
.btn {
width: 5vh;
height: 5vh;
}
.com{
display: flex;
flex-direction: column;
.com {
margin-top: 0.5vh;
margin-bottom: 0.5vh;
padding : 2vh;
padding: 2vh;
}
.icons{
.icons {
margin: 2vh;
}
.like-icon{
.like-icon,
.like-icon-none {
height: 3vh;
}
.like-icon img{
height: 3vh;
width: 5vh;
}
.like-icon-none img{
.like-icon img,
.like-icon-none img {
height: 3vh;
width: 3vh;
}
.like-icon-none{
height: 3vh;
}
.share-icon{
.share-icon {
font-size: 35px;
}
.likes{
align-self: self-end;
.likes {
padding: 2vh;
}
.infoQuote{
.infoQuote {
margin: 2vh;
height: 21vh;
}
#content{
#content {
width: 75vw;
height: 5vw;
}
}

2
public/styles/styleQuoteLittle.css
Unescape View File

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

Write Preview
Loading…
Cancel
Save