514 lines
12 KiB
CSS
514 lines
12 KiB
CSS
:root {
|
|
--main-color: black ;
|
|
--alternative-color: white ;
|
|
--interactive-color: grey;
|
|
}
|
|
|
|
a{
|
|
color: var(--main-color);
|
|
text-decoration: underline;
|
|
cursor: pointer;
|
|
}
|
|
|
|
a:hover{
|
|
background-color: var(--main-color);
|
|
color: var(--alternative-color);
|
|
}
|
|
|
|
body{
|
|
font-family: "covik-sans-mono", sans-serif;
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
}
|
|
|
|
#logoandcredits{
|
|
height: fit-content; width: 98vw;
|
|
position: fixed; bottom: 0vh;
|
|
margin-top: 12vh; margin-bottom: 3vh;
|
|
|
|
display: flex; justify-content: space-between;
|
|
align-items: end;
|
|
}
|
|
|
|
#logo{
|
|
width: auto; height: 40vh;
|
|
}
|
|
|
|
#credits{
|
|
width: fit-content;
|
|
display: flex; justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
#logoandcredits p{
|
|
width: 70vw;
|
|
line-height: 2.5vh;
|
|
}
|
|
|
|
#logoandcredits p a{
|
|
color: var(--main-color);
|
|
}
|
|
|
|
#logoandcredits p a:hover{
|
|
color: var(--alternative-color);
|
|
}
|
|
|
|
/* __ __ _______ _______ ______ _______ ______
|
|
| | | || || _ || | | || _ |
|
|
| |_| || ___|| |_| || _ || ___|| | ||
|
|
| || |___ | || | | || |___ | |_||_
|
|
| || ___|| || |_| || ___|| __ |
|
|
| _ || |___ | _ || || |___ | | | |
|
|
|__| |__||_______||__| |__||______| |_______||___| |_|
|
|
*/
|
|
|
|
#header{
|
|
width: 100vw; height: fit-content;
|
|
position: fixed; top: 0vh;
|
|
|
|
padding-top: 2vh; padding-left: 1vw; padding-right: 1vw; padding-bottom: 0.5vh;
|
|
box-sizing: border-box;
|
|
|
|
display: flex; justify-content: space-between;
|
|
z-index: 100;
|
|
|
|
background-color: var(--alternative-color);
|
|
}
|
|
|
|
#name{
|
|
width: 10vw; height: fit-content;
|
|
margin-right: 1vw;
|
|
}
|
|
|
|
.nav-home {
|
|
background-color: transparent; border: none; margin-left: -0.5vw; margin-top: -0.5vh; padding: none;
|
|
box-sizing: border-box;
|
|
|
|
align-items: center; text-align: left;
|
|
width: 100%; height: 100%;
|
|
font-family: "covik-sans-mono", sans-serif;
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
|
|
cursor: pointer;
|
|
font-size: 0.9vw;
|
|
}
|
|
|
|
#navigation{
|
|
display: flex;
|
|
}
|
|
|
|
#archives-button, #apropos-button{
|
|
width: 6vw; height: 2.1vh;
|
|
|
|
align-items: center;
|
|
}
|
|
|
|
#archives-button{
|
|
margin-right: 0.5vw;
|
|
}
|
|
|
|
.nav-btn {
|
|
background-color: transparent; border: none; margin-left: -0.4vw; margin-top: -0.5vh; padding: none;
|
|
box-sizing: border-box;
|
|
|
|
align-items: center; text-align: left;
|
|
width: 100%; height: 100%;
|
|
font-family: "covik-sans-mono", sans-serif;
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
|
|
cursor: pointer;
|
|
font-size: 0.9vw;
|
|
}
|
|
|
|
#archives-button.active, #apropos-button.active {
|
|
background-color: var(--main-color);
|
|
}
|
|
|
|
#archives-button.active button, #apropos-button.active button{
|
|
color: var(--alternative-color);
|
|
}
|
|
|
|
#apropos{
|
|
text-align: right; margin-right: 0vw;
|
|
}
|
|
|
|
/* _______ ___ _______ __ __ _______ ______
|
|
| || | | _ || | | || || _ |
|
|
| _ || | | |_| || |_| || ___|| | ||
|
|
| |_| || | | || || |___ | |_||_
|
|
| ___|| |___ | ||_ _|| ___|| __ |
|
|
| | | || _ | | | | |___ | | | |
|
|
|___| |_______||__| |__| |___| |_______||___| |_|
|
|
*/
|
|
|
|
#player{
|
|
width: 78vw; height: fit-content; margin-right: 0vw;
|
|
position: fixed; top: 2.1vh; left: 8vw;
|
|
|
|
font-size: 0.9vw;
|
|
z-index: 100;
|
|
|
|
border: 0.2vh solid var(--main-color);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#info-player{
|
|
width: 100%; height: 2vh;
|
|
display: flex;
|
|
|
|
background-color: var(--main-color);
|
|
color: var(--alternative-color);
|
|
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
#info-player #second-title{
|
|
width: 35%;
|
|
}
|
|
|
|
#info-player #title{
|
|
width: 57%;
|
|
display: block;
|
|
}
|
|
|
|
#info-player .controls {
|
|
width: 8%; height: 2vh;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.play-btn {
|
|
height: fit-content;
|
|
border: none;
|
|
|
|
background-color: var(--main-color);
|
|
color: var(--alternative-color);
|
|
|
|
font-family: "covik-sans-mono", sans-serif;
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
|
|
cursor: pointer;
|
|
font-size: 0.9vw;
|
|
}
|
|
|
|
.play-btn:hover {
|
|
color: var(--interactive-color);
|
|
}
|
|
|
|
.seek-container {
|
|
position: relative;
|
|
width: 100%; height: 2vh;
|
|
background-color: var(--alternative-color);
|
|
}
|
|
|
|
#seekSlider {
|
|
-webkit-appearance: none;
|
|
width: 100%;
|
|
height: 2vh;
|
|
background: transparent;
|
|
z-index: 2;
|
|
margin-left: -0.1vw;
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#seekSlider::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
width: 0.2vw;
|
|
height: 2vh;
|
|
background: transparent;
|
|
margin-top: -0.9vh;
|
|
position: relative;
|
|
z-index: 3;
|
|
}
|
|
|
|
.progress-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 2vh;
|
|
background-color: var(--interactive-color);
|
|
border-right: 0.2vw solid var(--main-color);
|
|
z-index: 1;
|
|
pointer-events: none; /* important pour que l'utilisateur puisse cliquer sur le slider */
|
|
}
|
|
|
|
.audio-line{
|
|
width: 100%; height: fit-content;
|
|
padding-bottom: 0.5vh;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
transition: 0.2s ease all;
|
|
}
|
|
|
|
.audio-line:hover .audio-text p{
|
|
background-color: var(--main-color);
|
|
color: var(--alternative-color);
|
|
}
|
|
|
|
.audio-info{
|
|
width: 100%; height: fit-content;
|
|
display: flex; justify-content: space-between;
|
|
}
|
|
|
|
.und-audio-info{
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
|
|
.und-audio-info h4{
|
|
margin-bottom: 0.5vh;
|
|
width: fit-content;
|
|
}
|
|
|
|
.und-audio-info .date-mobile{
|
|
display: none;
|
|
}
|
|
|
|
.audio-line.active .button-box{
|
|
background-color: var(--main-color);
|
|
color: var(--alternative-color);
|
|
}
|
|
|
|
.audio-text{
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
|
|
display: none;
|
|
}
|
|
|
|
.audio-text img{
|
|
width: 6.5vw;
|
|
margin-right: 0.5vw;
|
|
display: block;
|
|
}
|
|
|
|
.audio-text p{
|
|
width: 100%;
|
|
padding-bottom: 1vh;
|
|
}
|
|
|
|
.audio-line.active .audio-text {
|
|
display: flex;
|
|
}
|
|
|
|
.audio-line.active .audio-text p{
|
|
background-color: var(--main-color);
|
|
color: var(--alternative-color);
|
|
}
|
|
|
|
.audio-line.active .und-audio-info{
|
|
background-color: var(--main-color);
|
|
color: var(--alternative-color);
|
|
}
|
|
|
|
#archives-box .audio-line.active .und-audio-info{
|
|
background-color: var(--main-color);
|
|
color: var(--alternative-color);
|
|
}
|
|
|
|
#home-box, #apropos-box, #archives-box{
|
|
width: 100vw; height: fit-content;
|
|
position: absolute; top: 10vh;
|
|
|
|
padding-left: 1vw; padding-right: 1vw;
|
|
box-sizing: border-box;
|
|
|
|
font-size: 0.9vw;
|
|
z-index: 10;
|
|
}
|
|
|
|
/* ___ __ _ ______ _______ __ __
|
|
| | | | | || | | || |_| |
|
|
| | | |_| || _ || ___|| |
|
|
| | | || | | || |___ | |
|
|
| | | _ || |_| || ___| | |
|
|
| | | | | || || |___ | _ |
|
|
|___| |_| |__||______| |_______||__| |__|
|
|
*/
|
|
|
|
#home-box h2{
|
|
width: 14.8vw; height: 2vh;
|
|
|
|
background-color: var(--main-color);
|
|
color: var(--alternative-color);
|
|
}
|
|
|
|
#image-text{
|
|
width: fit-content; height: 80vh;
|
|
display: flex;
|
|
}
|
|
|
|
#image-legende{
|
|
width: 7.5vw; height: 100%;
|
|
margin-right: 0.5vw;
|
|
display: none;
|
|
}
|
|
|
|
#image-legende img{
|
|
width: 100%;
|
|
}
|
|
|
|
#text-new{
|
|
width: 100%; height: fit-content;
|
|
padding-bottom: 0.5vh;
|
|
box-sizing: border-box;
|
|
|
|
background-color: var(--main-color);
|
|
color: var(--alternative-color);
|
|
font-family: "covik-sans-mono", sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
|
|
#home-box .und-audio-info .date-desktop{
|
|
width: 7vw;
|
|
display: block;
|
|
|
|
}
|
|
|
|
#home-box .und-audio-info .date-mobile{
|
|
width: 70vw;
|
|
display: none;
|
|
}
|
|
|
|
#home-box .und-audio-info .hour{
|
|
width: 9vw;
|
|
}
|
|
|
|
#home-box .und-audio-info .title{
|
|
width: 40vw;
|
|
}
|
|
|
|
#home-box .und-audio-info .autors{
|
|
width: 29.5vw;
|
|
}
|
|
|
|
#home-box .und-audio-info .duration{
|
|
width: 10vw;
|
|
}
|
|
|
|
#home-box .und-audio-info .button-box{
|
|
width: 8vw;
|
|
}
|
|
|
|
#home-box .audio-info .button-box{
|
|
height: fit-content; width: 30vw;
|
|
text-align: right;
|
|
|
|
display: none;
|
|
}
|
|
|
|
#home-box .audio-info .listen-button{
|
|
all: unset;
|
|
width: fit-content; height: fit-content;
|
|
}
|
|
|
|
/* _______ ______ _______ __ __ ___ __ __ _______ _______
|
|
| _ || _ | | || | | || | | | | || || |
|
|
| |_| || | || | || |_| || | | |_| || ___|| _____|
|
|
| || |_||_ | || || | | || |___ | |_____
|
|
| || __ || _|| || | | || ___||_____ |
|
|
| _ || | | || |_ | _ || | | | | |___ _____| |
|
|
|__| |__||___| |_||_______||__| |__||___| |___| |_______||_______|
|
|
*/
|
|
|
|
#archives-box .und-audio-info .date-desktop{
|
|
width: 7vw;
|
|
display: block;
|
|
}
|
|
|
|
#archives-box .und-audio-info .date-mobile{
|
|
width: 70vw;
|
|
display: none;
|
|
}
|
|
|
|
#archives-box .und-audio-info .second-title{
|
|
width: 27vw;
|
|
}
|
|
|
|
#archives-box .und-audio-info .title{
|
|
width: 25vw;
|
|
}
|
|
|
|
#archives-box .und-audio-info .autors{
|
|
width: 26.5vw;
|
|
}
|
|
|
|
#archives-box .und-audio-info .duration{
|
|
width: 6vw;
|
|
}
|
|
|
|
#archives-box .button-box{
|
|
height: fit-content; width: 8vw;
|
|
text-align: left;
|
|
|
|
display: block;
|
|
}
|
|
|
|
#archives-box .audio-info .listen-button{
|
|
all: unset;
|
|
width: fit-content; height: fit-content;
|
|
}
|
|
|
|
#archives-button.active, #apropos-button.active {
|
|
background-color: var(--main-color);
|
|
}
|
|
|
|
#archives-button.active button, #apropos-button.active button{
|
|
color: var(--alternative-color);
|
|
}
|
|
|
|
/* _______ _______ _______ __ __ _______
|
|
| _ || _ || || | | || |
|
|
| |_| || |_| || _ || | | ||_ _|
|
|
| || || | | || |_| | | |
|
|
| || _ | | |_| || | | |
|
|
| _ || |_| || || | | |
|
|
|__| |__||_______||_______||_______| |___|
|
|
*/
|
|
|
|
#info-apropos{
|
|
height: fit-content;
|
|
padding-bottom: 0.5vh;
|
|
box-sizing: border-box;
|
|
|
|
display: flex; flex-direction: row;
|
|
|
|
color: var(--alternative-color);
|
|
}
|
|
|
|
#presentation{
|
|
width: 100%; height: fit-content;
|
|
|
|
margin-bottom: 1vh;
|
|
}
|
|
|
|
#gestionmaintenance{
|
|
width: 100%; height: fit-content;
|
|
margin-bottom: 1vh;
|
|
}
|
|
|
|
#contact{
|
|
width: 100%; height: fit-content;
|
|
}
|
|
|
|
.title-apropos{
|
|
width: 100%;
|
|
background-color: var(--main-color);
|
|
}
|
|
|
|
#presentation p, #gestionmaintenance p, #contact p{
|
|
line-height: 2.5vh;
|
|
background-color: var(--main-color);
|
|
}
|
|
|
|
#contact a{
|
|
color: var(--alternative-color);
|
|
} |