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

theme sombre + bandeau 100% terminé (50/50 avec kentin)

Browse Source
remotes/origin/master
Maxime ROCHER 7 months ago
parent f25f3f47f6
commit 09103a7b88
2 changed files with 1 additions and 81 deletions
Show Stats Download Patch File Download Diff File

2
index.html
Unescape View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wiki Fantasy</title> <title>Wiki Fantasy</title>
<link id="favicon" rel="icon" href="../images/iconeSombre.ico"> <!-- Par défaut sombre --> <link id="favicon" rel="icon" href="../images/iconeSombre.ico"> <!-- Par défaut sombre -->
<link rel="stylesheet" href="../style/style.css"> <link rel="stylesheet" href="../styles/style.css">
<script defer src="../script/theme-toggle.js"></script> <script defer src="../script/theme-toggle.js"></script>
</head> </head>
<body> <body>

80
style/style.css
Unescape View File

@ -1,80 +0,0 @@
/* Styles généraux */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Header */
.header {
display: flex;
position: fixed;
background-color: #000000;
right: 0;
top: 0;
width: 100%;
text-align: center;
padding: 20px;
}
.nav {
display: flex;
align-items: center;
vertical-align: center;
gap: 30px;
width: 40%;
}
.logo {
display: flex;
align-items: center;
justify-content: center;
width: 20%;
}
.user {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
vertical-align: center;
gap: 30px;
width: 40%;
}
/* Mode sombre */
body.dark-mode {
background-color: #120B1D;
color: #ffffff;
}
body.dark-mode .header {
background-color: #000;
}
body.dark-mode img {
filter: invert(0%);
}
body.dark-mode .nav img:hover {
filter: invert(59%) sepia(96%) saturate(6733%) hue-rotate(275deg) brightness(112%) contrast(122%);
}
/* Mode clair */
body.light-mode {
background-color: #ffffff;
color: #000000;
}
body.light-mode .header {
background-color: #F7F7EB;
}
body.light-mode img {
filter: invert(100%);
}
body.light-mode .nav img:hover {
filter: invert(22%) sepia(6%) saturate(2269%) hue-rotate(193deg) brightness(98%) contrast(106%);
}
Write Preview
Loading…
Cancel
Save