forked from rc/aircox
562 lines
13 KiB
CSS
562 lines
13 KiB
CSS
:root {
|
|
--a-player-bar-bg: #738EF2;
|
|
--a-player-bar-fg: #4897c7;
|
|
--a-player-url-fg: white;
|
|
--a-playlist-header-bg: #F6ED80;;
|
|
--a-playlist-header-fg: #222;
|
|
--a-player-panel-bg: #738ef2;
|
|
--a-player-panel-fg: white;
|
|
--a-sound-hv-bg: #f6ed80;
|
|
--a-sound-hv-fg: #444;
|
|
--a-sound-bg: #f6ed80;
|
|
--body-bg: unset;
|
|
--break-color: transparent;
|
|
--button-bg: #e9e9ed;
|
|
--button-fg: #222;
|
|
--button-hv-bg: #F4F88D;
|
|
--button-hv-fg: #1d3cab;
|
|
--button-active-fg: white;
|
|
--button-active-bg: #738ef2;
|
|
--cover-small-h: 10rem;
|
|
--cover-small-w: 10rem;
|
|
--heading-font-family: "campus_grotesk";
|
|
--header-height: 320px;
|
|
--heading-link-hv-fg: #aa217b;
|
|
--heading-hg-fg: #fff;
|
|
--link-fg: #3b47ff;
|
|
--link-hv-fg: #c40c85;
|
|
--main-color-light: #F4F881;
|
|
--nav-bg: transparent;
|
|
--nav-fg: #222;
|
|
--nav-secondary-bg: transparent;
|
|
--nav-hv-bg: unset;
|
|
--nav-active-bg: unset;
|
|
--nav-active-fg: white;
|
|
--preview-title-sz: 21px;
|
|
--text-color: #75124e;
|
|
--text-color-light: #eee;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "campus_grotesk";
|
|
src:
|
|
local("campus_grotesk"),
|
|
url("/static/radiocampus/fonts/campus_grotesk/CampusGroteskv24-Regular.woff2") format("woff2"),
|
|
url("/static/radiocampus/fonts/campus_grotesk/CampusGroteskv24-Regular.woff") format("woff"),
|
|
url("/static/radiocampus/fonts/campus_grotesk/CampusGroteskv24-Regular.otf") format("opentype") tech(color-COLRv1);
|
|
}
|
|
|
|
body {
|
|
color: #222;
|
|
background-size: cover;
|
|
}
|
|
|
|
|
|
body.home, body.home .preview .headings a, body.home .page a {
|
|
color: #fff;
|
|
}
|
|
body.home .preview .headings a:hover {
|
|
color: #f4f88d !important;
|
|
}
|
|
body.home .nav.primary {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
body.yellow {
|
|
background: url(/static/radiocampus/backgrounds/degrade-jaune.jpg) repeat-x top fixed;
|
|
}
|
|
body.yellow :root {
|
|
--nav-active-fg: #f4f88d;
|
|
}
|
|
body.yellow.home {
|
|
background: url(/static/radiocampus/backgrounds/photo-degrade-02.jpg) no-repeat center/cover;
|
|
background-attachment: fixed;
|
|
}
|
|
body.blue {
|
|
background: url(/static/radiocampus/backgrounds/degrade-bleu.jpg) repeat-x top fixed;
|
|
}
|
|
body.blue.home {
|
|
background: url(/static/radiocampus/backgrounds/photo-degrade-01.jpg) no-repeat center/cover;
|
|
background-attachment: fixed;
|
|
}
|
|
body.blue #grandlogo img {
|
|
content: url('/static/radiocampus/logos/logo-RC-blanc1.png');
|
|
}
|
|
body.yellow #grandlogo img {
|
|
content: url('/static/radiocampus/logos/logo-RC-bleu1.png');
|
|
}
|
|
body.blue.home #grandlogo img {
|
|
content: url('/static/radiocampus/logos/logo-RC-blanc2.png');
|
|
}
|
|
body.yellow.home #grandlogo img {
|
|
content: url('/static/radiocampus/logos/logo-RC-bleu2.png');
|
|
}
|
|
body.yellow .nav .nav-item.active {
|
|
color: #738EF2 !important;
|
|
text-shadow: -3px 3px 17px rgb(0, 48, 111);
|
|
}
|
|
body.blue #grandlogo img, body.yellow #grandlogo img {
|
|
width: 120px;
|
|
margin: 12px 0 0 48px;
|
|
}
|
|
body.blue.home #grandlogo, body.yellow.home #grandlogo {
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
body.blue.home #grandlogo img , body.yellow.home #grandlogo img {
|
|
margin: 12px auto 0 auto;
|
|
width: 100%;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.a-player-bar {
|
|
border-top: 1px solid #555;
|
|
}
|
|
.a-player .button, .a-player-bar-content {
|
|
color: white;
|
|
}
|
|
#player .a-sound-item .label {
|
|
color: white !important;
|
|
}
|
|
.a-switch-nav span {
|
|
color: white;
|
|
}
|
|
.a-switch-nav span:hover {
|
|
color: #333;
|
|
}
|
|
a.heading.title {
|
|
color: black;
|
|
}
|
|
|
|
a.heading.title:hover {
|
|
/*color: var(--link-hv-fg); */
|
|
color: #738ef2;
|
|
}
|
|
.button, a.button, button.button {
|
|
border: 0;
|
|
}
|
|
.header-cover:not(:only-child) {
|
|
float: left;
|
|
margin: 0 1.2rem 1.2rem 0;
|
|
}
|
|
.header.has-cover {
|
|
min-height: unset;
|
|
}
|
|
.item-section {display:flex; align-items:end}
|
|
.fifty {
|
|
width: 55%;
|
|
}
|
|
.grid.list-emissions {
|
|
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
|
grid-auto-flow: dense;
|
|
gap: 0.2rem;
|
|
}
|
|
.grid.list-emissions .media-content {
|
|
font-size: 0.84rem;
|
|
}
|
|
.today {
|
|
color: yellow;
|
|
font-size: 1.4em !important;
|
|
}
|
|
.list-grille article {
|
|
border-bottom: 1px solid black;
|
|
}
|
|
.lagrille .category {
|
|
color: white;
|
|
margin-left: 10px;
|
|
vertical-align: text-bottom;
|
|
font-size: 0.8rem;
|
|
}
|
|
.lagrille:not(.homedisplay) .heading.subtitle {
|
|
color: black;
|
|
}
|
|
.mt-3 {
|
|
margin-top: unset !important;
|
|
}
|
|
.nav.primary .nav-brand {
|
|
display: none;
|
|
}
|
|
.nav.secondary .nav-item {
|
|
color: black !important;
|
|
}
|
|
a.nav-item:hover {
|
|
opacity: 0.8;
|
|
}
|
|
.nav.primary .nav-item {
|
|
font-weight: unset;
|
|
font-size: 1.4em;
|
|
}
|
|
.page section.container {
|
|
margin-top: 0;
|
|
}
|
|
.program-list {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.list-home {
|
|
display: block;
|
|
}
|
|
.list-home article div.media {
|
|
line-height: 1;
|
|
padding: 0;
|
|
}
|
|
.list-home article.active div.media div.media-content a, .list-home article.active div.media div.media-content span {
|
|
color: yellow;
|
|
}
|
|
|
|
.list-home article.active div.media a:before {
|
|
content: "\2192";
|
|
margin-right: 6px;
|
|
}
|
|
|
|
.list-home article div.media a.preview-cover {
|
|
display: none;
|
|
}
|
|
.list-home article div.media div.media-content.flex-column {
|
|
display: unset;
|
|
}
|
|
.list-home article div.media div.media-content section.content {
|
|
display: none;
|
|
}
|
|
.list-home article div.media div.media-content div.episode-date {
|
|
display: none;
|
|
}
|
|
.list-home article div.media div.media-content span.heading.subtitle {
|
|
float: right;
|
|
}
|
|
.schedule {
|
|
background-color: unset;
|
|
font-size: 0.9em;
|
|
margin: 0 0.2rem;
|
|
opacity: 0.6;
|
|
padding: 0 0.2rem 0.2rem 0.2rem;
|
|
}
|
|
|
|
.schedules {
|
|
margin-bottom: 0.4rem !important;
|
|
}
|
|
.title, .preview .title, .preview .title:not(:last-child) {
|
|
text-transform: unset;
|
|
font-weight: unset;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
@media screen and (max-width: 400px) {
|
|
body {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
|
|
@media screen and (max-width: 1024px) {
|
|
:root {
|
|
--header-height: 200px;
|
|
}
|
|
.page {
|
|
margin-top: 0;
|
|
padding-top: var(--nav-primary-height);
|
|
}
|
|
.nav.primary .nav-brand {
|
|
display: inline-block;
|
|
}
|
|
.nav.secondary .nav-item {
|
|
color: white !important;
|
|
}
|
|
.dropdown-trigger .icon, .icon.bullet {
|
|
color: white;
|
|
}
|
|
.dropdown.is-right .dropdown-menu {
|
|
left: 0;
|
|
}
|
|
.grid.list-emissions {
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
}
|
|
#grandlogo {
|
|
display: none;
|
|
}
|
|
.navs, .nav-menu.active {
|
|
background-color: #7892f1; /*#738ef2;*/
|
|
}
|
|
.nav .nav-item {
|
|
color: white !important;
|
|
}
|
|
.nav .nav-item.active {
|
|
color: white !important;
|
|
}
|
|
.navs .nav + .nav {
|
|
flex-grow: 1 !important;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1408px) {
|
|
.container:not(.is-max-desktop):not(.is-max-widescreen) {
|
|
max-width: unset;
|
|
margin: 10px 64px;
|
|
}
|
|
body.home .container:not(.is-max-desktop):not(.is-max-widescreen) {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1216px) {
|
|
.container:not(.is-max-desktop):not(.is-max-widescreen) {
|
|
max-width: unset;
|
|
margin: 0 64px;
|
|
}
|
|
body.home .container:not(.is-max-desktop):not(.is-max-widescreen) {
|
|
max-width: 1152px;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 900px) {
|
|
.grid.list-emissions {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
}
|
|
|
|
.list-item .headings {
|
|
margin-bottom: .2rem !important;
|
|
}
|
|
|
|
.list-item:nth-child(3n+1):not(.wide) .media {
|
|
border-color: transparent !important;
|
|
}
|
|
|
|
.list-item:nth-child(3n):not(.wide) .media {
|
|
border-color: transparent !important;
|
|
}
|
|
|
|
.list-item:not(.wide) .media {
|
|
padding: 0.2rem;
|
|
}
|
|
|
|
.media-content .content p, .episode-date {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/*
|
|
.nav-urls .urls a, .nav-urls .urls span {
|
|
color: white;
|
|
background-color: #444;
|
|
border-radius: 5px;
|
|
padding: 4px;
|
|
}
|
|
|
|
#background {
|
|
background-size: cover;
|
|
padding: 80px 0 80px 0;
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
.button:hover, a.button:hover, button.button:hover {
|
|
opacity: 0.9 !important;
|
|
}
|
|
|
|
.container {
|
|
background: whitesmoke;
|
|
padding: 24px;
|
|
border-radius: 5px;
|
|
max-width: 960px;
|
|
border: 1px solid #929293;
|
|
}
|
|
|
|
.container.breadcrumbs, .container.header {
|
|
background: transparent;
|
|
border-radius: 0;
|
|
padding: 0 24px 0 24px;
|
|
border: 0;
|
|
}
|
|
|
|
.container.breadcrumbs a {
|
|
color: white;
|
|
}
|
|
|
|
.grid .list-item .headings .heading {
|
|
padding-top: 10px;
|
|
padding-left: 12px;
|
|
}
|
|
|
|
.nav.secondary {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.nav.secondary .nav-item{
|
|
olor: #1d3cab !important;
|
|
color: #8c827e !important;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.nav .nav-item:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.navs {
|
|
border-bottom: 1px solid #4d4545;
|
|
}
|
|
|
|
.page {
|
|
min-height: 500px;
|
|
}
|
|
|
|
.preview-cover {
|
|
border-radius: 5px;
|
|
opacity: 0.92;
|
|
border: 1px solid #fff;
|
|
}
|
|
|
|
.a-carousel .preview-cover {
|
|
border: 1px solid #ccc;
|
|
}
|
|
|
|
.preview-card .headings .heading {
|
|
opacity: 0.85;
|
|
padding: 12px;
|
|
background-color: #242121;
|
|
}
|
|
|
|
.preview-card .headings a {
|
|
color: white;
|
|
}
|
|
|
|
.grid .preview .headings a {
|
|
color: black;
|
|
}
|
|
|
|
.preview .title, .preview .title:not(:last-child) {
|
|
font-weight: normal;
|
|
}
|
|
|
|
@media screen and (max-width: 1024px) {
|
|
.nav .nav-menu {
|
|
background-color: #6C7ED2;
|
|
}
|
|
|
|
.page {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
#background {
|
|
padding: 100px 0 50px 0;
|
|
}
|
|
|
|
.container, .page .container {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
*/
|
|
|
|
|
|
|
|
/* fred fixes */
|
|
.grid.list-emissions:not(.list-home) {display: flex !important;flex-wrap: wrap !important; gap: 20px 1rem;}
|
|
|
|
.grid.list-emissions:not(.list-home) > .list-item {width: calc(20% - 2rem) !important ;}
|
|
|
|
.grid.list-emissions:not(.list-home) > .list-item .preview-cover {max-width: 100% !important;
|
|
display: block;
|
|
width: 100% !important;
|
|
min-width: auto;
|
|
aspect-ratio: 1 / 1;
|
|
height: fit-content;
|
|
background-size: contain;
|
|
background-position: center;
|
|
background-color: white;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.grid.list-emissions:not(.list-home) .media-content {margin-top: 0;}
|
|
|
|
.grid.list-emissions:not(.list-home) > .list-item .media .media-content > br, .grid.listfive > .list-item .media .media-content .episode-date > br {display: none;}
|
|
|
|
.grid.list-emissions:not(.list-home) .list-item .subtitle {text-align: left !important;font-size: 0.8rem !important;}
|
|
|
|
|
|
.grid.list-emissions:not(.list-home) .preview.active .heading:not(:empty) {
|
|
color: #738EF2 !important;
|
|
}
|
|
|
|
.grid.list-podcasts {display: flex !important;flex-wrap: wrap !important; gap: 20px 1rem;}
|
|
|
|
.grid.list-podcasts > .list-item {width: calc(50% - 2rem) !important ;}
|
|
|
|
.grid.list-podcasts > .list-item .preview-cover {max-width: 100% !important;
|
|
display: block;
|
|
width: 50% !important;
|
|
min-width: auto;
|
|
aspect-ratio: 1 / 1;
|
|
height: fit-content;
|
|
background-size: contain;
|
|
background-position: center;
|
|
background-color: white;
|
|
}
|
|
|
|
.grid.list-podcasts .media-content {margin-top: 0;}
|
|
|
|
.grid.list-podcasts .media .media-left {width: 25% !important;}
|
|
.grid.list-podcasts .media .media-content {width: 75%;}
|
|
|
|
.grid.list-podcasts > .list-item .media .media-content > br, .grid.list-emissions > .list-item .media .media-content .episode-date > br {display: none;}
|
|
|
|
.grid.list-podcasts .list-item .subtitle {text-align: left !important;font-size: 0.8rem !important;}
|
|
|
|
|
|
.grid.list-podcasts .preview.active .heading:not(:empty) {
|
|
color: #738EF2 !important;
|
|
}
|
|
|
|
@media screen and (max-width: 1224px) {
|
|
.grid.list-emissions:not(.list-home) > .list-item {width: calc(33% - 2rem) !important;;}
|
|
}
|
|
|
|
@media screen and (max-width: 924px) {
|
|
.grid.list-emissions:not(.list-home) > .list-item {width: calc(50% - 2rem) !important;}
|
|
}
|
|
|
|
@media screen and (max-width: 1024px) {
|
|
.grid.list-emissions > .list-item {width: 100% !important;}
|
|
.program-list {flex-direction: column;}
|
|
.grid.list-podcasts > .list-item {width: 100% !important ;}
|
|
}
|
|
|
|
.list-item .subtitle:not(:empty) {
|
|
min-width: auto !important;
|
|
}
|
|
|
|
@media screen and (max-width: 924px) {
|
|
.a-player-bar-content {overflow: hidden;}
|
|
.a-player-bar-content .title {
|
|
display: inline-block;
|
|
padding-right: 2em;
|
|
padding-left: 100%;
|
|
white-space: nowrap;
|
|
animation: defilement-rtl 55s infinite linear;
|
|
overflow: visible;}
|
|
|
|
@keyframes defilement-rtl {
|
|
0% {
|
|
transform: translate3d(0,0,0); /* position initiale à droite */
|
|
}
|
|
100% {
|
|
transform: translate3d(-100%,0,0); /* position finale à gauche */
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 540px) {
|
|
.media {
|
|
flex-direction: column;
|
|
}
|
|
.grid.list-podcasts .media .media-content {width:100%}
|
|
|
|
.grid.list-emissions:not(.list-home) > .list-item {
|
|
width: 100% !important;
|
|
}
|
|
}
|
|
|
|
.list-item .media-content {height:auto;}
|