193 lines
2.6 KiB
CSS
193 lines
2.6 KiB
CSS
:root {
|
|
|
|
--rouge: hsl(0, 98.8%, 33.5%);
|
|
--rouge-fonce: hsl(0, 75%, 33.5%);
|
|
|
|
--noir-complet: black;
|
|
--noir-fonce: hsl(0, 30%, 2.1%);
|
|
--noir-moyen: hsl(0, 15%, 3.1%);
|
|
--noir-clair: hsl(0, 5%, 7.1%);
|
|
|
|
--blanc: hsla(0, 0%, 100%, 1);
|
|
--blanc-fort: hsla(0, 0%, 100%, 0.75);
|
|
--blanc-semi-transparent: hsla(0, 0%, 100%, 0.25);
|
|
}
|
|
|
|
|
|
body {
|
|
|
|
background: var(--noir-fonce);
|
|
color: white;
|
|
font-family: Roboto,sans-serif;
|
|
}
|
|
|
|
header {
|
|
|
|
background: var(--noir-clair);
|
|
}
|
|
|
|
|
|
header * {
|
|
|
|
color: var(--rouge);
|
|
text-decoration: none;
|
|
}
|
|
|
|
header span {
|
|
|
|
color: white;
|
|
}
|
|
|
|
#pinFilter ul li a {
|
|
|
|
background-color: var(--blanc);
|
|
}
|
|
|
|
#pinFilter ul li.selected a {
|
|
|
|
background-color: var(--rouge);
|
|
}
|
|
|
|
|
|
ul#tagsList,
|
|
ul#narrowingTags {
|
|
|
|
list-style: none;
|
|
margin-left: 0;
|
|
padding-left: 0;
|
|
}
|
|
|
|
ul#tagsList li,
|
|
ul#narrowingTags li {
|
|
|
|
display: inline-block;
|
|
}
|
|
|
|
ul#tagsList a,
|
|
ul#tagsList a:visited {
|
|
|
|
text-decoration: none;
|
|
color: var(--rouge-fonce);
|
|
}
|
|
|
|
#narrowingTags a,
|
|
#narrowingTags a:visited {
|
|
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
|
|
#narrowingTags li {
|
|
|
|
border-radius: 1rem;
|
|
}
|
|
|
|
#narrowingTags li.selected {
|
|
|
|
background-color: var(--rouge-fonce);
|
|
color: var(--blanc);
|
|
border: 0.125rem solid var(--noir-clair);
|
|
}
|
|
|
|
#tagsList,
|
|
#narrowingTags {
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
#tagsList li.station,
|
|
#narrowingTags li.station {
|
|
|
|
order: 1;
|
|
}
|
|
|
|
#tagsList li.station,
|
|
#narrowingTags li.station {
|
|
|
|
background-image: url("logo.png");
|
|
background-repeat: no-repeat;
|
|
background-position: left middle;
|
|
background-size: contain;
|
|
padding-left: 2em;
|
|
order: 1;
|
|
}
|
|
|
|
#narrowingTags li.selectable {
|
|
|
|
background-color: var(--noir-fonce);
|
|
color: var(--rouge-fonce);
|
|
border: 0.125rem solid var(--noir-clair);
|
|
}
|
|
|
|
#videosList > li {
|
|
|
|
background: var(--noir-clair);
|
|
border-color: var(--rouge);
|
|
border-style: solid;
|
|
}
|
|
|
|
.video-title,
|
|
.video-title a,
|
|
.video-title a:visited {
|
|
|
|
color: white;
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
word-break: break-all;
|
|
}
|
|
|
|
#videosList .thumbnail {
|
|
|
|
background-color: var(--noir-complet);
|
|
}
|
|
|
|
#videosList > li ul.tags li a,
|
|
#videosList > li ul.tags li a:visited {
|
|
|
|
text-decoration: none;
|
|
}
|
|
|
|
#videosList > li ul.tags li.selectable a,
|
|
#videosList > li ul.tags li.selectable a:visited {
|
|
|
|
color: var(--blanc-semi-transparent);
|
|
}
|
|
|
|
#videosList > li ul.tags li.selectable a:hover {
|
|
|
|
color: var(--blanc-fort);
|
|
}
|
|
|
|
#videosList > li ul.tags li.selected a,
|
|
#videosList > li ul.tags li.selected a:visited {
|
|
|
|
color: var(--blanc-fort);
|
|
}
|
|
|
|
article {
|
|
|
|
background: var(--noir-clair);
|
|
}
|
|
|
|
article video {
|
|
|
|
background: black;
|
|
}
|
|
|
|
|
|
article .video-title {
|
|
|
|
font-weight: bold;
|
|
}
|
|
|
|
#successMsg {
|
|
|
|
opacity: 0;
|
|
transition: opacity 1s;
|
|
}
|
|
|
|
|
|
|