You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
WF-Website/styles/style.css

85 lines
1.3 KiB

/* Styles généraux */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: #120b1d ;
font-family: "Lemon", serif;
}
/* 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 .header 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 .header img {
filter: invert(100%);
}
body.light-mode .nav img:hover {
filter: invert(22%) sepia(6%) saturate(2269%) hue-rotate(193deg) brightness(98%) contrast(106%);
}