radiocampus: style update

radiocampus/static/radiocampus/backgroundLoad.js

@@ -0,0 +1,67 @@
+// Enable styling body background while using vue hotreload
+// Tags with side effect (<script> and <style>) are ignored in client component templates.
+
+const backgrounds = new Map();
+backgrounds.set('default', "url(/static/radiocampus/backgrounds/campus-degrade.png) repeat-x center top scroll");
+backgrounds.set('/', "url(/static/radiocampus/backgrounds/home.jpg) no-repeat center center fixed");
+//backgrounds.set('default', "linear-gradient(rgba(115, 142, 242, 0.9), white)");
+//backgrounds.set('default', "white");
+/*
+backgrounds.set('default', "linear-gradient(#738ef2, white)");
+backgrounds.set('/', "url(/static/radiocampus/backgrounds/photo-04-20.jpg) no-repeat center center fixed");
+backgrounds.set('/publications/', "url(/static/radiocampus/backgrounds/photo-04-20.jpg) no-repeat center center fixed");
+backgrounds.set('/pages/a-propos/', "white");
+backgrounds.set('/emissions/', "url(/static/radiocampus/backgrounds/08.jpeg) no-repeat center center fixed");
+backgrounds.set('/emissions/c/musicale/', "url(/static/radiocampus/backgrounds/08.jpeg) no-repeat center center fixed");
+backgrounds.set('/emissions/c/communautaire/', "url(/static/radiocampus/backgrounds/08.jpeg) no-repeat center center fixed");
+backgrounds.set('/emissions/c/magazine/', "url(/static/radiocampus/backgrounds/08.jpeg) no-repeat center center fixed");
+backgrounds.set('/emissions/c/creation/', "url(/static/radiocampus/backgrounds/08.jpeg) no-repeat center center fixed");
+backgrounds.set('/emissions/c/agenda-culturel/', "url(/static/radiocampus/backgrounds/08.jpeg) no-repeat center center fixed");
+backgrounds.set('/grille/', "url(/static/radiocampus/backgrounds/photo-04-19.jpg) no-repeat center center fixed");
+backgrounds.set('/podcasts/', "url(/static/radiocampus/backgrounds/09.jpeg) no-repeat center center fixed");
+backgrounds.set('/podcasts/c/musicale/', "url(/static/radiocampus/backgrounds/09.jpeg) no-repeat center center fixed");
+backgrounds.set('/podcasts/c/communautaire/', "url(/static/radiocampus/backgrounds/09.jpeg) no-repeat center center fixed");
+backgrounds.set('/podcasts/c/magazine/', "url(/static/radiocampus/backgrounds/09.jpeg) no-repeat center center fixed");
+backgrounds.set('/podcasts/c/creation/', "url(/static/radiocampus/backgrounds/09.jpeg) no-repeat center center fixed");
+backgrounds.set('/podcasts/c/agenda-culturel/', "url(/static/radiocampus/backgrounds/09.jpeg) no-repeat center center fixed");
+*/
+
+class BackgroundLoad {
+    constructor () {
+        let url = new URL(document.location);
+        this.path = url.pathname;
+        this.update();
+        document.addEventListener("pageLoaded", this.handlePageLoad.bind(this), false);
+    }
+
+    handlePageLoad (e) {
+        this.path = e.detail;
+        this.update();
+    }
+
+    update () {
+        let background = backgrounds.get(this.path) || backgrounds.get("default");
+        let target = document.body;
+        // let target = document.getElementsByClassName("page")[0];
+        //let target = document.getElementById("background");
+        target.style.background = background;
+        if (this.path == '/') {
+            target.style.backgroundSize = "cover";
+
+            const styleEl = document.createElement("style");
+            document.head.appendChild(styleEl);
+            const styleSheet = styleEl.sheet;
+            styleSheet.insertRule('.preview .headings a { color: white; }', styleSheet.cssRules.length);
+            styleSheet.insertRule('.preview .headings a:hover { color: #ffcdee !important; }', styleSheet.cssRules.length);
+        } else {
+            const styleEl = document.createElement("style");
+            document.head.appendChild(styleEl);
+            const styleSheet = styleEl.sheet;
+            styleSheet.insertRule('.preview .headings a { color: #75124e; }', styleSheet.cssRules.length);
+            styleSheet.insertRule('.preview .headings a:hover { color: #75124e !important; }', styleSheet.cssRules.length);
+        }
+    }
+}
+window.onload = function() {
+    let backgroundLoad = new BackgroundLoad();
+}

radiocampus/static/radiocampus/radiocampus.css

@@ -0,0 +1,258 @@
+: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; /*fff667;*/
+    --a-sound-bg: #f6ed80;
+    --body-bg: unset;
+    --break-color: transparent;
+    --button-bg: #F4F88D;
+    --button-fg: #222;
+    --button-hv-bg: #F4F88D;
+    --button-hv-fg: #1d3cab;
+    --button-active-fg: white;
+    --button-active-bg: #eef289;
+    --heading-font-family: "campus_heading";
+    --heading-link-hv-fg: #aa217b;
+    --heading-hg-fg: #e65fb1;
+    --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; /* #fdffba; */
+    --text-color: #75124e; /*#ed43ab;*/
+    --text-color-light: #bbb;
+}
+
+@font-face {
+    font-family: 'campus_heading';
+    src: url("/static/radiocampus/fonts/CampusGroteskv23-Regular.otf");
+}
+
+body {
+    color: #222;
+}
+
+#grandlogo {
+    width: 100%;
+    background: url('/static/radiocampus/images/grand-logo.png') no-repeat scroll top center;
+    background-size: contain;
+    height: 107px;
+
+}
+
+.a-player-bar {
+    border-top: 1px solid #555;
+}
+
+.a-player .button, .a-player-bar-content {
+    color: white;
+}
+
+#player .a-sound-item .label {
+    color: white;
+}
+
+.a-switch-nav span {
+    color: white;
+}
+
+.a-switch-nav span:hover {
+    color: #333;
+}
+
+.button, a.button, button.button {
+  border: var(--link-fg) 1px solid;
+  border-radius: 20px;
+}
+
+.nav.primary .nav-brand {
+    display: none;
+}
+
+/*
+.navs {
+    background-color: #738ef2;
+}
+*/
+
+.nav.secondary .nav-item {
+    color: #7E6B64 !important;
+}
+
+.nav-item:hover {
+    opacity: 0.8;
+}
+
+.page section.container {
+    margin-top: 0;
+    padding-top: 0.6rem;
+}
+
+
+@media screen and (max-width: 1024px) {
+  .nav.primary {
+      background-color: #738ef2;
+  }
+
+  .page {
+      margin-top: 0;
+      padding-top: var(--nav-primary-height);
+  }
+  .nav.primary .nav-brand {
+          display: inline-block;
+          background-color: #738ef2;
+      }
+
+  .dropdown-trigger .icon, .icon.bullet {
+      color: white;
+  }
+
+  .dropdown.is-right .dropdown-menu {
+      left: 0;
+  }
+
+    #grandlogo {
+        display: none;
+    }
+
+
+    .nav .nav-menu {
+        background-color: #738ef2;
+    }
+    .nav .nav-item {
+        color: white !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;
+}
+
+
+/*
+.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{
+    color: #1d3cab !important;
+}
+
+.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;
+  }
+}
+*/