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

Mode sombre/clair page profil & login

Browse Source
remotes/origin/master
Leni BEAULATON 7 months ago
parent 11fb04b4c2
commit 82b9f21ad0
3 changed files with 150 additions and 31 deletions
Show Stats Download Patch File Download Diff File

3
pages/login.html
Unescape View File

@ -7,13 +7,14 @@
<title>Wiki Fantasy : Connexion</title>
<link id="favicon" rel="icon" href="../images/iconeSombre.ico"> <!-- Par défaut sombre -->
<link href="https://fonts.googleapis.com/css2?family=Lemon&display=swap" rel="stylesheet">
<script defer src="../script/theme-toggle.js"></script>
</head>
<body>
<div class="container">
<div class="header">
<div class="nav">
<img src="../images/coeur.svg" alt="coeur" width="67px" height="67px" onmousedown="return false">
<img src="../images/dark.svg" alt="dark" width="72px" height="37px" onmousedown="return false">
<img id="theme-icon" src="../images/light.svg" alt="toggle theme" width="72px" height="37px" onmousedown="return false" onclick="toggleTheme()">
<img src="../images/quizz.svg" alt="quizz" width="51px" height="82px" onmousedown="return false">
</div>
<div class="logo">

104
styles/styleLogin.css
Unescape View File

@ -1,6 +1,7 @@
@import url(./style.css);
h1{
/* ====== DARK MODE ====== */
body.dark-mode h1{
color : white;
font-family: "Lemon", serif;
text-align: center;
@ -8,7 +9,7 @@ h1{
margin-top: 10%;
}
p{
body.dark-mode p{
margin-top: 6%;
margin-bottom: 2%;
color : white;
@ -16,49 +17,112 @@ p{
font-family: "Lemon", serif;
}
.login{
body.dark-mode .login{
background-color: black;
width: 30%;
margin-left: 35%;
margin-top: 3%;
border-radius: 25px;
border: 2px solid transparent;
padding: 2%;
}
.connexion{
width:90%;
height: 40px;
padding-left: 3%;
margin-left: 1%;
margin-top: -1%;
border-radius: 25px;
border: none;
font-size: 15px;
}
.createAccount{
body.dark-mode .createAccount{
margin-top: 5%;
margin-bottom: 5%;
font-size: 13px;
text-align: center;
padding-top: 1%;
color: white;
border: 1px solid transparent;
font-family: "Lemon", serif;
}
body.dark-mode .buttonSudmite{
background: linear-gradient(90deg, #6100ff 0%, #1b0048 100%);
font-family: "Lemon", serif;
border: none;
color: white;
padding: 2%;
border-radius: 25px;
width: 75%;
font-size: 20px;
}
.buttonSudmiteDiv{
/* ====== LIGHT MODE ====== */
body.light-mode h1{
color : black;
font-family: "Lemon", serif;
text-align: center;
font-size: 32px;
margin-top: 10%;
}
.buttonSudmite{
background: linear-gradient(90deg, #6100ff 0%, #1b0048 100%);
body.light-mode p{
margin-top: 6%;
margin-bottom: 2%;
color : black;
font-size: 20px;
font-family: "Lemon", serif;
}
body.light-mode .login{
background-color: white;
width: 30%;
margin-left: 35%;
margin-top: 3%;
border-radius: 25px;
border: 2px solid black;
padding: 2%;
}
body.light-mode .createAccount{
margin-top: 5%;
margin-bottom: 5%;
font-size: 13px;
text-align: center;
padding-top: 1%;
color: black;
font-family: "Lemon", serif;
}
body.light-mode .buttonSudmite{
background: linear-gradient(180deg, rgba(187,211,249,1) 0%, rgba(199,246,196,1) 100%);
font-family: "Lemon", serif;
border: none;
color: white;
color: black;
padding: 2%;
border-radius: 25px;
width: 75%;
font-size: 20px;
}
body.light-mode .connexion{
width:90%;
height: 40px;
padding-left: 3%;
margin-left: 1%;
margin-top: -1%;
border-radius: 25px;
border: 1px solid black;
background-color: #fff1f1;
font-size: 15px;
}
/* ====== OTHER ====== */
.buttonSudmiteDiv{
text-align: center;
}
.connexion{
width:90%;
height: 40px;
padding-left: 3%;
margin-left: 1%;
margin-top: -1%;
border-radius: 25px;
border: none;
font-size: 15px;
}

72
styles/styleProfil.css
Unescape View File

@ -1,7 +1,7 @@
@import url(./style.css);
h1{
/* ====== DARK MODE ====== */
body.dark-mode h1{
color : white;
font-family: "Lemon", serif;
text-align: center;
@ -9,7 +9,7 @@ h1{
margin-top: 10%;
}
p{
body.dark-mode p{
margin-top: 6%;
margin-bottom: 2%;
color : white;
@ -18,7 +18,7 @@ p{
}
.buttonSudmite{
body.dark-mode .buttonSudmite{
background: linear-gradient(90deg, #6100ff 0%, #1b0048 100%);
font-family: "Lemon", serif;
border: none;
@ -29,12 +29,9 @@ p{
font-size: 20px;
}
.buttonSudmiteDiv{
text-align: center;
}
.createQuote{
body.dark-mode .createQuote{
margin-top: 5%;
margin-bottom: 5%;
font-size: 15px;
@ -44,7 +41,7 @@ p{
font-family: "Lemon", serif;
}
.login{
body.dark-mode .login{
background-color: black;
width: 30%;
margin-left: 35%;
@ -52,6 +49,63 @@ p{
border-radius: 25px;
padding-top: 1px;
padding-bottom: 1%;
border: 2px solid transparent;
}
/* ====== LIGHT MODE ====== */
body.light-mode h1{
color : black;
font-family: "Lemon", serif;
text-align: center;
font-size: 35px;
margin-top: 10%;
}
body.light-mode p{
margin-top: 6%;
margin-bottom: 2%;
color : black;
font-size: 20px;
font-family: "Lemon", serif;
}
body.light-mode .buttonSudmite{
background: linear-gradient(180deg, rgba(187,211,249,1) 0%, rgba(199,246,196,1) 100%);
font-family: "Lemon", serif;
border: none;
color: black;
padding: 5%;
border-radius: 25px;
width: 75%;
font-size: 20px;
}
body.light-mode .createQuote{
margin-top: 5%;
margin-bottom: 5%;
font-size: 15px;
text-align: center;
padding-top: 1%;
color: black;
font-family: "Lemon", serif;
}
body.light-mode .login{
background-color: white;
width: 30%;
margin-left: 35%;
margin-top: 9%;
border-radius: 25px;
padding-top: 1px;
padding-bottom: 1%;
border: 2px solid black;
}
/* ====== OTHER ====== */
.buttonSudmiteDiv{
text-align: center;
}
.imageProfil{

Write Preview
Loading…
Cancel
Save