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;

216
public/styles/styleQuote.css
Unescape View File

@ -4,80 +4,60 @@
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); color: var(--main-dark-text-color);
} }
body.dark-mode .like-icon { body.dark-mode .like-icon,
color: var(--main-dark-text-color);
cursor: pointer;
}
body.dark-mode .share-icon { body.dark-mode .share-icon {
color: var(--main-dark-text-color);
cursor: pointer; cursor: pointer;
} }
body.dark-mode .commentaire{ 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,
body.light-mode .likes,
body.light-mode .like-icon,
body.light-mode .share-icon,
body.light-mode .likeLien {
color: var(--main-light-text-color); color: var(--main-light-text-color);
} }
body.light-mode .like-icon,
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 .share-icon { body.light-mode .share-icon {
color: var(--main-light-text-color);
cursor: pointer; cursor: pointer;
} }
body.light-mode .commentaire{ body.light-mode .commentaire {
background-color: var(--main-light-other-color); background-color: var(--main-light-other-color);
} }
body.light-mode .likeLien{ body.light-mode .like-icon-none img {
color: var(--main-light-text-color);
}
body.light-mode .like-icon-none img{
filter: invert(100%); filter: invert(100%);
} }
/* ====== DEFAULT ====== */ /* ====== DEFAULT ====== */
.central_container{ .central_container {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
padding: 2vh;
} }
.card { .card {
@ -87,9 +67,10 @@ 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 {
margin-top: 5vh; margin-top: 5vh;
border-radius: 15px; border-radius: 15px;
width: 25vw; width: 25vw;
@ -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;
@ -119,17 +101,18 @@ body.light-mode .like-icon-none img{
font-style: italic; font-style: italic;
} }
.comAdd{ .comAdd {
width : 21vw; width: 21vw;
height : 5vh; height: 5vh;
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 {
width : 5vh; width: 5vh;
height : 5vh; height: 5vh;
padding-left: 1vh; padding-left: 1vh;
border: none; border: none;
border-radius: 50px; border-radius: 50px;
@ -137,14 +120,16 @@ 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 {
margin-top: 2vh; margin-top: 2vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -153,25 +138,25 @@ 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 {
background-color: #fff; background-color: #fff;
color: black; color: black;
display: flex; display: flex;
@ -179,67 +164,63 @@ body.light-mode .like-icon-none img{
flex-direction: column; flex-direction: column;
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,
.like-icon-none img {
height: 5vh; height: 5vh;
width: 5vh; width: 5vh;
} }
.like-icon-none img{ .share-icon {
height: 5vh;
width: 5vh;
}
.like-icon-none{
height: 5vh;
margin-bottom: 2vh;
}
.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;
} }
.infoQuote{ .infoQuote {
margin-bottom: 2vh; margin-bottom: 2vh;
height: 31vh; height: 31vh;
} }
.userName{ .userName {
font-size: large; font-size: large;
display: inline-block; display: inline-block;
} }
.infCom{ .infCom {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: -5px; margin-bottom: -5px;
@ -254,47 +235,38 @@ body.light-mode .like-icon-none img{
border: #000 solid 1.5px; border: #000 solid 1.5px;
} }
.imgIcones{ .imgIcones {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.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 {
text-decoration: none; text-decoration: none;
} }
.card-content{ .card-content {
margin-left: 20px; margin-left: 20px;
flex: 1; flex: 1;
} }
.like-icon-none{ @media (max-width: 834px), (max-aspect-ratio: 1/1) {
height: 5vh; .central_container {
margin-bottom: 2vh;
}
.like-icon-none img{
height: 5vh;
}
@media (max-width: 834px) or (max-aspect-ratio : 1/1){
.central_container{
flex-direction: column; flex-direction: column;
} }
.card { .card {
margin : auto; margin: auto;
margin-bottom: 1vh; margin-bottom: 1vh;
width: 85vw; width: 85vw;
height: 50vh; height: 50vh;
} }
.commentaire{ .commentaire {
margin-top: 1vh; margin-top: 1vh;
margin: auto; margin: auto;
width: 83vw; width: 83vw;
@ -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;
} }
@ -316,58 +287,47 @@ body.light-mode .like-icon-none img{
font-size: 25px; font-size: 25px;
} }
.btn{ .btn {
width : 5vh; width: 5vh;
height : 5vh; height: 5vh;
} }
.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;
} }
.icons{ .icons {
margin: 2vh; margin: 2vh;
} }
.like-icon{ .like-icon,
height: 3vh; .like-icon-none {
}
.like-icon img{
height: 3vh; height: 3vh;
width: 5vh;
} }
.like-icon-none img{ .like-icon img,
.like-icon-none img {
height: 3vh; height: 3vh;
width: 3vh; width: 3vh;
} }
.like-icon-none{ .share-icon {
height: 3vh;
}
.share-icon{
font-size: 35px; font-size: 35px;
} }
.likes{ .likes {
align-self: self-end;
padding: 2vh; padding: 2vh;
} }
.infoQuote{ .infoQuote {
margin: 2vh; margin: 2vh;
height: 21vh; height: 21vh;
} }
#content{ #content {
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;
} }

2
vue/templates/bandeau.html.twig
Unescape View File

@ -6,7 +6,7 @@
</div> </div>
<div class="logo"> <div class="logo">
<a href="{{ racine }}/"><img src="{{ racine }}/images/WIKIFANTASY.png" alt="Logo" onmousedown="return false"></a> <a href="{{ racine }}/"><img src="{{ racine }}/images/WIKIFANTASY.png" alt="Logo" onmousedown="return false"></a>
</div> </div>
<div class="user"> <div class="user">

Write Preview
Loading…
Cancel
Save