2094 lines
37 KiB
CSS
2094 lines
37 KiB
CSS
|
|
||
|
|
@font-face {
|
||
|
|
font-family: "regular";
|
||
|
|
src: url("https://pl4tform.org/database/utilities/DINdong/DINdong.woff") format("woff");
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
a {
|
||
|
|
/* color: white; */
|
||
|
|
text-decoration: underline red 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
a:hover {
|
||
|
|
|
||
|
|
font-style: italic;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
#pl4tformBtn {
|
||
|
|
position: fixed;
|
||
|
|
z-index: 495;
|
||
|
|
width: 125px;
|
||
|
|
left: 20px;
|
||
|
|
top: 3px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#map1 #pl4tformBtn {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
#pl4tformBtn:hover {
|
||
|
|
filter: invert(1);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.wipDesktop {
|
||
|
|
position: fixed;
|
||
|
|
background-color: yellow;
|
||
|
|
z-index: 30000;
|
||
|
|
rotate: -8deg;
|
||
|
|
left: 8%;
|
||
|
|
top: 30%;
|
||
|
|
#width: 84%;
|
||
|
|
font-size: 1em;
|
||
|
|
border: 3px solid darkmagenta;
|
||
|
|
border-radius: 20px;
|
||
|
|
padding: 14px;
|
||
|
|
display: none;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.wipMobile {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
#searchBarInputMobile {
|
||
|
|
direction: none !important;;
|
||
|
|
}
|
||
|
|
|
||
|
|
#mobilesearchBar {
|
||
|
|
display: none
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
/*! overflow: hidden; */
|
||
|
|
font-family: monospace;
|
||
|
|
/*! line-height: 1.5em; */
|
||
|
|
/*! cursor: url(https://pl4tform.org/cursors/mapcursor.png), auto; */
|
||
|
|
|
||
|
|
overflow: hidden;
|
||
|
|
/*! height: 100vh; */
|
||
|
|
|
||
|
|
/* background-image: URL("data/main-page-image/img web mix echoique.jpeg"); */
|
||
|
|
background-repeat: repeat;
|
||
|
|
background-size: 100vw;
|
||
|
|
}
|
||
|
|
|
||
|
|
#mobilBtns {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* #actualImageBox {
|
||
|
|
position: fixed;
|
||
|
|
left: 50%;
|
||
|
|
top: 50%;
|
||
|
|
transform: translate(-50%, -53%);
|
||
|
|
background-image: URL('data/files/240703_1400_Narthex: a solstice journey.jpg');
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: center;
|
||
|
|
background-size: contain;
|
||
|
|
height: 83vh;
|
||
|
|
width: 70vw;
|
||
|
|
margin: auto;
|
||
|
|
} */
|
||
|
|
|
||
|
|
#actualImageBox {
|
||
|
|
/*! height: fit-content; */
|
||
|
|
overflow: scroll;
|
||
|
|
height: 101vh;
|
||
|
|
position: fixed;
|
||
|
|
top: 0px;
|
||
|
|
left: 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#actualImage {
|
||
|
|
width: 100vw;
|
||
|
|
position: relative;
|
||
|
|
top: 0px;
|
||
|
|
left: 0px;
|
||
|
|
/*! display: none; */
|
||
|
|
/*! overflow: scroll; */
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
#hoverText {
|
||
|
|
position: fixed;
|
||
|
|
transition: transform 0.1s, opacity 0.3s;
|
||
|
|
-webkit-transition: transform 0.1s, opacity 0.3s;
|
||
|
|
pointer-events: none;
|
||
|
|
z-index: 2000;
|
||
|
|
border: 1px solid white;
|
||
|
|
background-color: #050505;
|
||
|
|
padding: 2px;
|
||
|
|
opacity: 0;
|
||
|
|
color: white;
|
||
|
|
font-family: monospace;
|
||
|
|
}
|
||
|
|
|
||
|
|
#hoverText.visible {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
.radiobody {
|
||
|
|
#display: grid;
|
||
|
|
#grid-template-columns: 50% 50%;
|
||
|
|
#-webkit-transition: filter 600ms;
|
||
|
|
#transition: filter 600ms;
|
||
|
|
/* display: none; */
|
||
|
|
|
||
|
|
/*! overflow: hidden; */
|
||
|
|
/*! height: 100vh; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.background {
|
||
|
|
z-index: -5;
|
||
|
|
height: 100vh !important;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
img#background{
|
||
|
|
filter: blur(0) !important;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
#cadre {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
#contentBG {
|
||
|
|
filter: blur(1.5rem);
|
||
|
|
size: fill;
|
||
|
|
position: absolute;
|
||
|
|
z-index: -1;
|
||
|
|
}
|
||
|
|
|
||
|
|
#content {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
#content.visible {
|
||
|
|
display: block;
|
||
|
|
|
||
|
|
width: 30vw;
|
||
|
|
overflow: hidden;
|
||
|
|
/*! background-color: black; */
|
||
|
|
position: fixed;
|
||
|
|
/*! border: 1px solid black; */
|
||
|
|
backdrop-filter: blur(1);
|
||
|
|
/*! backdrop-filter: blur(1rem) opacity(1); */
|
||
|
|
max-width: 488px;
|
||
|
|
top: 0px;
|
||
|
|
right: 0px;
|
||
|
|
z-index: 200;
|
||
|
|
padding-top: 20px;
|
||
|
|
/*! background-color: white; */
|
||
|
|
min-width: 450px;
|
||
|
|
/*! backdrop-filter: blur(1); */
|
||
|
|
\#background-color: #c8c1677d;
|
||
|
|
}
|
||
|
|
|
||
|
|
#phpload {
|
||
|
|
|
||
|
|
/*! height: 0px; */
|
||
|
|
visibility: hidden;
|
||
|
|
opacity: 0;
|
||
|
|
/* transition: opacity 800ms, visibility 800ms;
|
||
|
|
-webkit-transition: opacity 800ms, visibility 800ms; */
|
||
|
|
/*! z-index: 400; */
|
||
|
|
position: relative;
|
||
|
|
overflow: scroll;
|
||
|
|
/*! width: 100%; */
|
||
|
|
z-index: 420;
|
||
|
|
margin-top: 20px;
|
||
|
|
left: 0px;
|
||
|
|
top: 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#phpload.visible {
|
||
|
|
visibility: visible;
|
||
|
|
opacity: 1;
|
||
|
|
|
||
|
|
/*! height: fit-content; */
|
||
|
|
/*! width: 206px; */
|
||
|
|
max-height: 96vh;
|
||
|
|
height: fit-content;
|
||
|
|
}
|
||
|
|
|
||
|
|
.loadMapBtn, .loadCatBtn, img.focus, .hoverinvert, .loadLiveBtn {
|
||
|
|
transition: filter 0.4s, width 0.2s, height 0.2s;
|
||
|
|
-webkit-transition: filter 0.4s, width 0.2s, height 0.2s;
|
||
|
|
|
||
|
|
cursor: url(https://pl4tform.org/cursors/loupev1.png), auto;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.loadMapBtn:hover, .loadCatBtn:hover, .focus:hover, .hoverinvert:hover, .loadLiveBtn:hover{
|
||
|
|
filter: invert(1);
|
||
|
|
|
||
|
|
/* width: 120% !important;
|
||
|
|
height: 120% !important; */
|
||
|
|
}
|
||
|
|
|
||
|
|
#map1 .loadMapBtn,#map1 .loadCatBtn,#map1 .focus{
|
||
|
|
/* filter: contrast(10); */
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.map .text {
|
||
|
|
overflow: scroll;
|
||
|
|
}
|
||
|
|
|
||
|
|
img.loadCatBtn {
|
||
|
|
#filter: blur(0.5rem);
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer {
|
||
|
|
#border-top: 1px solid black;
|
||
|
|
#background-color: #ffffff;
|
||
|
|
z-index: 510;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer {
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
#right: 50;
|
||
|
|
bottom: 0px;
|
||
|
|
width: 59%;
|
||
|
|
#background-color: rgb(214, 214, 214);
|
||
|
|
#color: white;
|
||
|
|
text-align: center;
|
||
|
|
transition: bottom 0.5s cubic-bezier(.64,.55,.36,1.57);
|
||
|
|
margin-left: 423px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
#actualPlaying {
|
||
|
|
background-color: #000;
|
||
|
|
width: fit-content;
|
||
|
|
margin: auto;
|
||
|
|
height: fit-content;
|
||
|
|
transition: height 0.5s, width 0.5s;
|
||
|
|
color: white;
|
||
|
|
border: #5cff00 1px solid;
|
||
|
|
padding-left: 5px;
|
||
|
|
padding-right: 5px;
|
||
|
|
border-bottom: 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#actualPlaying.visible {
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
audio {
|
||
|
|
border: #5cff00 1px solid;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.closeBtn {
|
||
|
|
position: fixed;
|
||
|
|
top: 2px;
|
||
|
|
left: 60vw;
|
||
|
|
margin-right: 20px;
|
||
|
|
font-size: 2em;
|
||
|
|
z-index: 240;
|
||
|
|
}
|
||
|
|
|
||
|
|
img#seum {
|
||
|
|
/* transform: translateX(709px) !important; */
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
.discriptionBox {
|
||
|
|
background-color: blue;
|
||
|
|
font-size: 1.2em;
|
||
|
|
font-weight: bold;
|
||
|
|
color: white;
|
||
|
|
border: 3px solid violet;
|
||
|
|
#padding: 20px;
|
||
|
|
margin-bottom: 30px;
|
||
|
|
position: fixed;
|
||
|
|
top: 20px;
|
||
|
|
left: 72vw;
|
||
|
|
width: 23vw;
|
||
|
|
max-height: 80vh;
|
||
|
|
overflow: scroll;
|
||
|
|
}
|
||
|
|
|
||
|
|
.discriptionBox a {
|
||
|
|
color:rgb(255, 111, 111);
|
||
|
|
}
|
||
|
|
|
||
|
|
#catPlaceHolder {
|
||
|
|
width: 100%;
|
||
|
|
margin: auto;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
#podcastList {
|
||
|
|
width: 100%;
|
||
|
|
margin: auto;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
#zoneBackground {
|
||
|
|
#background-image: url(https://pl4tform.org/database/maps/map2.jpg);
|
||
|
|
#background-size: 105vw 105vh;
|
||
|
|
position: fixed;
|
||
|
|
height: 100vh;
|
||
|
|
width: 130vw;
|
||
|
|
top: 0px;
|
||
|
|
left: -100vw;
|
||
|
|
z-index: 419;
|
||
|
|
|
||
|
|
transition: backdrop-filter 400ms;
|
||
|
|
-webkit-transition: backdrop-filter 400ms;
|
||
|
|
|
||
|
|
backdrop-filter: blur(4rem) opacity(0);
|
||
|
|
-webkit-backdrop-filter: blur(4rem) opacity(0);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
#zoneBackground.visible {
|
||
|
|
/*! backdrop-filter: blur(1rem) opacity(1); */
|
||
|
|
-webkit-backdrop-filter: blur(1rem) opacity(1);
|
||
|
|
|
||
|
|
/*! background-color: #00134c; */
|
||
|
|
/*! background-image: url('https://pl4tform.org/data/map-backgrounds/empty.png'); */
|
||
|
|
background-color: #91919187;
|
||
|
|
/*! display: none; */
|
||
|
|
width: 100vw;
|
||
|
|
position: fixed;
|
||
|
|
top: 0px;
|
||
|
|
left: 0px;
|
||
|
|
background-size: 100vw 100vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
#mapOverBackground {
|
||
|
|
/*! background-image: url(https://pl4tform.org/ive.jpg); */
|
||
|
|
background-size: 100vw 100vh;
|
||
|
|
position: fixed;
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
top: 0px;
|
||
|
|
left: 0px;
|
||
|
|
\#backdrop-filter: blur(1rem);
|
||
|
|
-webkit-backdrop-filter: blur(1rem);
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/*! background-color: rebeccapurple; */
|
||
|
|
}
|
||
|
|
|
||
|
|
#map2Background.visible {
|
||
|
|
/* backdrop-filter: blur(1rem) opacity(1); */
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
#map2Content {
|
||
|
|
/* visibility: hidden;
|
||
|
|
opacity: 0;
|
||
|
|
transition: opacity 800ms, visibility 800ms; */
|
||
|
|
}
|
||
|
|
|
||
|
|
#map2Content.visible {
|
||
|
|
/* visibility: visible;
|
||
|
|
opacity: 1; */
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
#map1Background {
|
||
|
|
#background-image: url(https://pl4tform.org/data/map-backgrounds/start.jpg);
|
||
|
|
background-size: 105vw 105vh;
|
||
|
|
position: fixed;
|
||
|
|
height: 100vh;
|
||
|
|
width: 100vw;
|
||
|
|
top: 0px;
|
||
|
|
left: 0px;
|
||
|
|
z-index: -50;
|
||
|
|
#backdrop-filter: blur(1rem);
|
||
|
|
#-webkit-transition: filter 600ms;
|
||
|
|
#transition: filter 600ms;
|
||
|
|
filter: blur(0px);
|
||
|
|
/*! overflow: hidden; */
|
||
|
|
/*! height: 100vh; */
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.contentColumn {
|
||
|
|
/*! max-height: 92vh; */
|
||
|
|
/*! overflow: scroll; */
|
||
|
|
/*! width: 100vw; */
|
||
|
|
/*! margin: auto; */
|
||
|
|
/*! padding: 23px; */
|
||
|
|
|
||
|
|
z-index: 450 !important;
|
||
|
|
/*! margin-bottom: 105px; */
|
||
|
|
/*! grid-template-columns: repeat(5, 1fr); */
|
||
|
|
/*! display: inline; */
|
||
|
|
/*! max-width: 1026px; */
|
||
|
|
/*! height: 100vh; */
|
||
|
|
padding-top: 5px;
|
||
|
|
/*! position: fixed; */
|
||
|
|
top: 0px;
|
||
|
|
/*! height: 100vh; */
|
||
|
|
overflow: scroll;
|
||
|
|
/*! padding-bottom: 200px; */
|
||
|
|
height: fit-content;
|
||
|
|
/*! margin: 100px; */
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.contentItemBox {
|
||
|
|
/*! height: 60px; */
|
||
|
|
overflow: hidden;
|
||
|
|
border: 2px solid white;
|
||
|
|
/*! padding-left: 20px; */
|
||
|
|
/*! padding-right: 20px; */
|
||
|
|
margin-top: -1px;
|
||
|
|
background-color: #000;
|
||
|
|
margin-bottom: 15px;
|
||
|
|
color: white;
|
||
|
|
width: 85%;
|
||
|
|
/*! margin-left: 20px; */
|
||
|
|
/*! margin-right: 20px; */
|
||
|
|
margin-left: auto;
|
||
|
|
margin-right: auto;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.contentItemBox a {
|
||
|
|
color: #00cfff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.contentItemBox .soundDiscription {
|
||
|
|
font-size: 0px;
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.contentItemBox .textItem img {
|
||
|
|
width: 100%;
|
||
|
|
/*! margin-top: 20px; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.contentItemBox .textItem {
|
||
|
|
font-size: 0px;
|
||
|
|
min-height: 51px;
|
||
|
|
padding-left: 20px;
|
||
|
|
padding-right: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.contentItemBox .textItem.long {
|
||
|
|
font-size: 15px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.contentItemBox.about {
|
||
|
|
/* position: fixed;
|
||
|
|
top: 47px;
|
||
|
|
left: 129px;
|
||
|
|
width: 21vw; */
|
||
|
|
background-color: darkblack;
|
||
|
|
}
|
||
|
|
|
||
|
|
.contentItemBox.noshow {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.contentItemBox .textItem h1 {
|
||
|
|
font-size: 22px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.contentItemBox .textItem hr {
|
||
|
|
display: none;^
|
||
|
|
}
|
||
|
|
|
||
|
|
.contentItemBox .pdfembed {
|
||
|
|
width: 103%;
|
||
|
|
height: 500px;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.contentItem {
|
||
|
|
#margin: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
#imageColumn {
|
||
|
|
height: fit-content;
|
||
|
|
}
|
||
|
|
|
||
|
|
#soundColumn {
|
||
|
|
#background-color: rgba(127, 231, 255, 0.74);
|
||
|
|
#border: 3px solid aliceblue;
|
||
|
|
/*! overflow: scroll; */
|
||
|
|
/*! max-height: 80vh; */
|
||
|
|
#min-width: 300px;
|
||
|
|
z-index: 200;
|
||
|
|
position: relative;
|
||
|
|
height: fit-content;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
#textColumn {
|
||
|
|
height: fit-content;
|
||
|
|
}
|
||
|
|
|
||
|
|
.imageItem {
|
||
|
|
position: relative;
|
||
|
|
/*! border: 3px solid violet; */
|
||
|
|
width: 100%;
|
||
|
|
z-index: 250;
|
||
|
|
/*! margin-bottom: 15px; */
|
||
|
|
min-height: 10vw;
|
||
|
|
display: block;
|
||
|
|
/*! height: 20px !important; */
|
||
|
|
/*! max-width: inherit !important; */
|
||
|
|
/*! border: 1px white solid; */
|
||
|
|
/*! padding: 10px; */
|
||
|
|
/*! margin-left: -5px; */
|
||
|
|
width: 97%;
|
||
|
|
width: 100%;
|
||
|
|
/*! min-height: 0px !important; */
|
||
|
|
/*! margin-top: 20px; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.soundItem {
|
||
|
|
height: fit-content;
|
||
|
|
padding-left: 20px;
|
||
|
|
width: calc(100% - 40px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.soundItem.withDiscription {
|
||
|
|
}
|
||
|
|
|
||
|
|
.soundTitle {
|
||
|
|
#font-size: 2em;
|
||
|
|
#line-height: 1.01em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.contentItemBox .soundTitle {
|
||
|
|
/*! background-color: #00000075; */
|
||
|
|
/*! box-shadow: 0px 0px 17px 5px black; */
|
||
|
|
/*! margin: 20px; */
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.soundDate {
|
||
|
|
position: relative;
|
||
|
|
top: 0px;
|
||
|
|
width: 110%;
|
||
|
|
left: -20px;
|
||
|
|
/*! display: none; */
|
||
|
|
border-bottom: 1px solid black;
|
||
|
|
}
|
||
|
|
|
||
|
|
.soundTitle:hover {
|
||
|
|
text-decoration: underline;
|
||
|
|
}
|
||
|
|
|
||
|
|
.soundDiscription {
|
||
|
|
}
|
||
|
|
|
||
|
|
.downloadLink {
|
||
|
|
#vertical-align: bottom;
|
||
|
|
display: ruby;
|
||
|
|
position: absolute;
|
||
|
|
right: 55px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fa {
|
||
|
|
text-decoration: underline !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.soundDiscription img {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.soundInfos {
|
||
|
|
}
|
||
|
|
|
||
|
|
.soundInfos:hover, .item:hover {
|
||
|
|
/*! filter: invert(1); */
|
||
|
|
}
|
||
|
|
|
||
|
|
.textItem {
|
||
|
|
height: fit-content;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
.textItem:before {
|
||
|
|
content:'read more';
|
||
|
|
font-style: italic;
|
||
|
|
#font-size: 1em;
|
||
|
|
text-align: center;
|
||
|
|
/* color: white; */
|
||
|
|
width:100%;
|
||
|
|
height:10vh;
|
||
|
|
position:absolute;
|
||
|
|
left:0;
|
||
|
|
top:231px;
|
||
|
|
#background:linear-gradient(transparent 10vh, rgba(255, 255, 255, 1));
|
||
|
|
#background-color: red;
|
||
|
|
#backdrop-filter: blur(1rem);
|
||
|
|
z-index: 260;
|
||
|
|
/*! backdrop-filter: blur(4rem); */
|
||
|
|
-webkit-backdrop-filter: blur(1rem);
|
||
|
|
#backdrop-filter: invert(0.7);
|
||
|
|
background-color: #191919;
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.item {
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
#map {
|
||
|
|
#-webkit-transition: filter 600ms;
|
||
|
|
#transition: filter 600ms;
|
||
|
|
filter: blur(0px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mapOver {
|
||
|
|
#display: none;
|
||
|
|
/* backdrop-filter: blur(1rem); */
|
||
|
|
height: 0vh;
|
||
|
|
position: fixed;
|
||
|
|
top: 0px;
|
||
|
|
left: 0px;
|
||
|
|
transition: opacity 0.5s ease, height 0.5s, width 0.5s;
|
||
|
|
-webkit-transition: opacity 0.5s ease, height 0.5s, width 0.5s;
|
||
|
|
opacity: 0;
|
||
|
|
width: 0vw;
|
||
|
|
z-index: -100;
|
||
|
|
|
||
|
|
/*! overflow: hidden; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.mapOver.visible {
|
||
|
|
#display: block;
|
||
|
|
opacity: 1;
|
||
|
|
height: 100vh;
|
||
|
|
width: 100vw;
|
||
|
|
z-index: 99;
|
||
|
|
backdrop-filter: blur(5px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.soundItemBtn {
|
||
|
|
margin-left: 10px;
|
||
|
|
margin-right: 10px;
|
||
|
|
cursor: url(https://pl4tform.org/cursors/loupev1.png), auto;
|
||
|
|
|
||
|
|
/*! background-color: white; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.soundItemBtn:hover {
|
||
|
|
filter: invert(1);
|
||
|
|
}
|
||
|
|
|
||
|
|
#soundDescriptionBtn {
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.soundPlayBtn {
|
||
|
|
visibility: visible;
|
||
|
|
background-color: white;
|
||
|
|
border: 2px solid white;
|
||
|
|
/*! background-image: URL("data/btns/playBtn.png"); */
|
||
|
|
background-size: 100% 100%;
|
||
|
|
width: 70px;
|
||
|
|
height: 50px;
|
||
|
|
/*! background-color: white; */
|
||
|
|
|
||
|
|
/*! display: none; */
|
||
|
|
color: black;
|
||
|
|
font-weight: bold;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.contentItemBox .soundPlayBtn {
|
||
|
|
/*! display: none; */
|
||
|
|
height: 25px;
|
||
|
|
width: fit-content;
|
||
|
|
}
|
||
|
|
|
||
|
|
.soundPlayBtn.hidden {
|
||
|
|
background-image: URL("data/btns/playingBtn.gif") !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.soundPauseBtn {
|
||
|
|
}
|
||
|
|
|
||
|
|
.soundPlayBtn .soundPauseBtn {
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/* FOCUS LOAD */
|
||
|
|
|
||
|
|
.focusBox {
|
||
|
|
position: relative;
|
||
|
|
top: 7vh;
|
||
|
|
margin: auto;
|
||
|
|
z-index: 500;
|
||
|
|
/* transition: opacity 800ms, visibility 800ms;
|
||
|
|
-webkit-transition: opacity 800ms, visibility 800ms; */
|
||
|
|
visibility: hidden;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.focusBox.full-page {
|
||
|
|
width: 100vw;
|
||
|
|
max-width: none;
|
||
|
|
margin: 0px;
|
||
|
|
position: fixed;
|
||
|
|
top: 0px !important;
|
||
|
|
left: 0px;
|
||
|
|
padding: 0;
|
||
|
|
height: 100vh !important;
|
||
|
|
overflow: scroll;
|
||
|
|
background-color: white;
|
||
|
|
color: black;
|
||
|
|
}
|
||
|
|
|
||
|
|
.focusBox h1 {
|
||
|
|
/*! color: chartreuse; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.focusBox hr {
|
||
|
|
color: rebeccapurple;
|
||
|
|
}
|
||
|
|
|
||
|
|
.focusBox a {
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.focusBox.visible {
|
||
|
|
visibility: visible;
|
||
|
|
opacity: 1;
|
||
|
|
/*! border: 1px solid black; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.focusBoxText {
|
||
|
|
height: 70vh;
|
||
|
|
width: 85vw;
|
||
|
|
/*! box-shadow: 5px 5px 10px 2px rgba(0,0,0,.8); */
|
||
|
|
overflow: scroll;
|
||
|
|
padding: 20px;
|
||
|
|
|
||
|
|
padding: 10px;
|
||
|
|
background-color: black;
|
||
|
|
/*! border-radius: 4px; */
|
||
|
|
color: white;
|
||
|
|
border: white 1px solid;
|
||
|
|
max-width: 692px;
|
||
|
|
/*! box-shadow: 0px 0px 70px 5px #2000ff; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.focusBoxText img {
|
||
|
|
width: 100%;
|
||
|
|
/*! margin-top: 20px; */
|
||
|
|
/*! margin-bottom: 20px; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.focusBox .pdfembed {
|
||
|
|
width: 100%;
|
||
|
|
height: 603px;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#focusBoxText {
|
||
|
|
/*! background: beige; */
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
#focusBoxSoundDiscription {
|
||
|
|
/*! background: rgb(160, 241, 255); */
|
||
|
|
}
|
||
|
|
|
||
|
|
#focusBoxSoundDiscription .soundDiscriptionTitle {
|
||
|
|
font-weight: bold;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#focusBoxSoundDiscription #soundPlayBtn {
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
#focusBoxImage {
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
#focusImage {
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: center;
|
||
|
|
background-size: contain;
|
||
|
|
height: 83vh;
|
||
|
|
width: 70vw;
|
||
|
|
margin: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
#phploadFocus {
|
||
|
|
/* display: none; */
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
#focusLayer {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
#focusLayer.visible {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
#focusBackground {
|
||
|
|
width: 100vw;
|
||
|
|
height: 100vh;
|
||
|
|
#display: none;
|
||
|
|
position: fixed;
|
||
|
|
top: 0px;
|
||
|
|
left: 0px;
|
||
|
|
z-index: 490;
|
||
|
|
|
||
|
|
transition: backdrop-filter 400ms;
|
||
|
|
-webkit-transition: backdrop-filter 400ms;
|
||
|
|
|
||
|
|
backdrop-filter: blur(4rem) opacity(0);
|
||
|
|
-webkit-backdrop-filter: blur(4rem) opacity(0);
|
||
|
|
|
||
|
|
/*! overflow: hidden; */
|
||
|
|
}
|
||
|
|
|
||
|
|
#focusBackground.visible {
|
||
|
|
backdrop-filter: blur(4rem) opacity(1);
|
||
|
|
-webkit-backdrop-filter: blur(4rem) opacity(1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.closeFocusBtn {
|
||
|
|
position: absolute;
|
||
|
|
top: -20px;
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
#closeFocusBtnText {
|
||
|
|
right: 2vw;
|
||
|
|
}
|
||
|
|
|
||
|
|
#closeFocusBtnImage {
|
||
|
|
right: 20vw;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/* POSITION BOX */
|
||
|
|
|
||
|
|
#positionBox {
|
||
|
|
position: fixed;
|
||
|
|
z-index: 2000;
|
||
|
|
#background-color: white;
|
||
|
|
height: 23px;
|
||
|
|
top: 0px;
|
||
|
|
right: 0px;
|
||
|
|
overflow: hidden;
|
||
|
|
backdrop-filter: blur(1rem);
|
||
|
|
-webkit-backdrop-filter: blur(1rem);
|
||
|
|
|
||
|
|
color: white;
|
||
|
|
border: 1px solid black;
|
||
|
|
height: 28px;
|
||
|
|
#width: fit-content;
|
||
|
|
width: 180px;
|
||
|
|
background: black;
|
||
|
|
font-size: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#positionBox {
|
||
|
|
-webkit-transition: height 600ms;
|
||
|
|
transition: height 600ms;
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
#positionBox:hover {
|
||
|
|
height: auto;
|
||
|
|
z-index: 2000;
|
||
|
|
background-color: rgba(255, 255, 255, 0.712);
|
||
|
|
width: fit-content !important;
|
||
|
|
color: black;
|
||
|
|
}
|
||
|
|
|
||
|
|
#positionActual{
|
||
|
|
/*! color: rgb(63, 63, 63); */
|
||
|
|
/*! color: white; */
|
||
|
|
font-family: monospace;
|
||
|
|
overflow: scroll;
|
||
|
|
height: 100vh;
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
#positionActual::first-line {
|
||
|
|
#font-weight: bold;
|
||
|
|
color: white;
|
||
|
|
background-color: black;
|
||
|
|
}
|
||
|
|
|
||
|
|
#positionActual::first-line:hover {
|
||
|
|
color: black;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
#positionActual::before {
|
||
|
|
text-align: right;
|
||
|
|
content: "Your roadmap =>";
|
||
|
|
}
|
||
|
|
|
||
|
|
.arrowUp {
|
||
|
|
}
|
||
|
|
|
||
|
|
.arrowSymbol {
|
||
|
|
#font-size: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/* //////////// NAVIGATION //////////// */
|
||
|
|
|
||
|
|
#navigationOpenBtn {
|
||
|
|
position: fixed;
|
||
|
|
z-index: 5000;
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
#navigation {
|
||
|
|
position: fixed;
|
||
|
|
z-index: 1000;
|
||
|
|
border-bottom: 2px solid white;
|
||
|
|
padding-bottom: 5px;
|
||
|
|
/*! padding-left: 353px; */
|
||
|
|
/*! padding-right: 396px; */
|
||
|
|
margin-left: auto;
|
||
|
|
margin-right: auto;
|
||
|
|
width: fit-content;
|
||
|
|
margin-bottom: -13px;
|
||
|
|
background-color: black;
|
||
|
|
/*! color: white; */
|
||
|
|
top: 0px;
|
||
|
|
/*! text-align: center; */
|
||
|
|
height: fit-content;
|
||
|
|
/*! text-align: center; */
|
||
|
|
/*! top: 50%; */
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -0%);
|
||
|
|
/*! display: flex; */
|
||
|
|
text-align: center;
|
||
|
|
/*! max-width: 1201px; */
|
||
|
|
width: 100vw;
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
#navigationMobil {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
#navigation button {
|
||
|
|
}
|
||
|
|
|
||
|
|
.navigationBtn {
|
||
|
|
display: inline;
|
||
|
|
/*! margin-left: 10px; */
|
||
|
|
/*! margin-right: 10px; */
|
||
|
|
#color: #fff0;
|
||
|
|
border: 0px;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
/*! width: 100px; */
|
||
|
|
/*! height: fit-content; */
|
||
|
|
font-family: monospace;
|
||
|
|
text-decoration: underline;
|
||
|
|
font-size: 20px;
|
||
|
|
color: white;
|
||
|
|
background-color: black;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.navigationBtn:hover {
|
||
|
|
/*! filter: invert(0.5); */
|
||
|
|
background-color: white !important;
|
||
|
|
color: black !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.navigationBtnBox {
|
||
|
|
border-right: 1px solid black;
|
||
|
|
display: inline;
|
||
|
|
padding-left: 20px;
|
||
|
|
padding-right: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#livestreamBtn {
|
||
|
|
}
|
||
|
|
|
||
|
|
#searchBtn {
|
||
|
|
#background-image: URL("data/map-backgrounds/navigation_search2.png");
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
#basemapBtn {
|
||
|
|
#background-image: URL("data/map-backgrounds/navigation_start2.png");
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
#backBtn {
|
||
|
|
#background-image: URL("data/map-backgrounds/navigation_back2.png");
|
||
|
|
|
||
|
|
background-color: black;
|
||
|
|
color: white;
|
||
|
|
/*! text-decoration: snow; */
|
||
|
|
position: fixed;
|
||
|
|
top: 0px;
|
||
|
|
left: 0px;
|
||
|
|
z-index: 5000;
|
||
|
|
font-size: 20px;
|
||
|
|
border: 2px solid white;
|
||
|
|
text-decoration: none;
|
||
|
|
height: 37px;
|
||
|
|
border-top: 0px;
|
||
|
|
border-left: 0px;
|
||
|
|
padding-right: 10px;
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* //////////// SEARCH //////////// */
|
||
|
|
|
||
|
|
#searchBar {
|
||
|
|
-webkit-transition: opacity 0.5s, visibility 0.5s, height 0.5s;
|
||
|
|
transition: opacity 0.5s, visibility 0.5s, height 0.5s;
|
||
|
|
|
||
|
|
vertical-align: middle;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
#searchBtn {
|
||
|
|
-webkit-transition: opacity 0.5s, visibility 0.5s, width 0.5s;
|
||
|
|
transition: opacity 0.5s, visibility 0.5s, width 0.5s;
|
||
|
|
z-index: 1000;
|
||
|
|
}
|
||
|
|
|
||
|
|
#searchBarInput {
|
||
|
|
width: 80%;
|
||
|
|
border-radius: 1px;
|
||
|
|
|
||
|
|
color: black;
|
||
|
|
height: 100%;
|
||
|
|
border: 0px;
|
||
|
|
background-color: transparent;
|
||
|
|
outline: none;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
#searchBar.visible {
|
||
|
|
width: 100%;
|
||
|
|
height: 31px;
|
||
|
|
|
||
|
|
position: fixed;
|
||
|
|
left: 14vw;
|
||
|
|
}
|
||
|
|
|
||
|
|
#searchBtn.visible {
|
||
|
|
/*! width: 100px; */
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
#searchBar.visible, #searchBtn.visible {
|
||
|
|
opacity: 1;
|
||
|
|
visibility: visible;
|
||
|
|
#display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
#searchBar.hidden, #searchBtn.hidden {
|
||
|
|
opacity: 0;
|
||
|
|
visibility: hidden;
|
||
|
|
#display: none;
|
||
|
|
width: 0%;
|
||
|
|
height: 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
#ceasefirenow {
|
||
|
|
position: fixed;
|
||
|
|
right: 0px;
|
||
|
|
top: 0px;
|
||
|
|
width: 200px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/* CHAT */
|
||
|
|
|
||
|
|
.chat {
|
||
|
|
height: 100%;
|
||
|
|
/*! background-color: lightgray; */
|
||
|
|
/*! color: white; */
|
||
|
|
word-wrap: break-word;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
display: grid;
|
||
|
|
}
|
||
|
|
|
||
|
|
#chat h1 {
|
||
|
|
width: 100%;
|
||
|
|
border-bottom: 1px solid grey;
|
||
|
|
margin: 0px;
|
||
|
|
position: sticky;
|
||
|
|
top: 0px;
|
||
|
|
/*! background-color: white; */
|
||
|
|
}
|
||
|
|
|
||
|
|
#historyBox{
|
||
|
|
overflow: scroll;
|
||
|
|
scroll-behavior: smooth;
|
||
|
|
/*! height: 132px; */
|
||
|
|
overflow: scroll;
|
||
|
|
}
|
||
|
|
|
||
|
|
#newMesInput {
|
||
|
|
width: 77%;
|
||
|
|
background-color: black;
|
||
|
|
color: white;
|
||
|
|
font-family: monospace;
|
||
|
|
border: 1px solid white;
|
||
|
|
position: relative;
|
||
|
|
bottom: 0px;
|
||
|
|
left: 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#sending {
|
||
|
|
position: relative;
|
||
|
|
bottom: 1px;
|
||
|
|
width: 100%;
|
||
|
|
/*! border-top: gray solid 1px; */
|
||
|
|
padding-top: 3px;
|
||
|
|
/*! background-color: white; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.message{
|
||
|
|
/* border: 1px solid white; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.chatName {
|
||
|
|
text-decoration: underline;
|
||
|
|
#color: darkorchid;
|
||
|
|
/*! background-color: black; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.sendBtn {
|
||
|
|
background-color: black;
|
||
|
|
color: white;
|
||
|
|
border: 1px solid white;
|
||
|
|
}
|
||
|
|
|
||
|
|
input#chatName {
|
||
|
|
background-color: black;
|
||
|
|
color: white;
|
||
|
|
font-family: monospace;
|
||
|
|
border: 1px solid white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.closeChat {
|
||
|
|
position: absolute;
|
||
|
|
top: -2px;
|
||
|
|
right: -1px;
|
||
|
|
background-color: black;
|
||
|
|
border: 2px solid white;
|
||
|
|
font-size: 2em;
|
||
|
|
height: 28px;
|
||
|
|
width: 28px;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 1.5rem;
|
||
|
|
cursor: pointer;
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
#showChat {
|
||
|
|
font-size: 2em;
|
||
|
|
border: 5px dotted white;
|
||
|
|
position: fixed;
|
||
|
|
z-index: 10000;
|
||
|
|
bottom: 13px;
|
||
|
|
left: 13px;
|
||
|
|
color: white;
|
||
|
|
padding: 10px;
|
||
|
|
background-color: black;
|
||
|
|
display: none;
|
||
|
|
box-shadow: 0 1px 16px 0 rgba(32, 0, 255, 0.46),0 3px 20px 0 rgba(0, 183, 255, 0.37) !important;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mesTime {
|
||
|
|
color: grey;
|
||
|
|
}
|
||
|
|
|
||
|
|
#lastTimecode {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
#liveTEST {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
#nowLiveSpan{
|
||
|
|
color: black;
|
||
|
|
background: red;
|
||
|
|
margin-left: -5px;
|
||
|
|
padding-left: 5px;
|
||
|
|
animation: color-change-nowLive 5s infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes color-change-nowLive {
|
||
|
|
0% { background-color: red; }
|
||
|
|
50% { background-color: rgb(255, 230, 0); }
|
||
|
|
100% { background-color: red; }
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/* GRID HTML ACCUEIL HOME SITE */
|
||
|
|
|
||
|
|
|
||
|
|
/* body {
|
||
|
|
padding: 0px;
|
||
|
|
margin: 0px;
|
||
|
|
height: 100vw;
|
||
|
|
overflow: hidden;
|
||
|
|
} */
|
||
|
|
|
||
|
|
.item1 {
|
||
|
|
grid-area: livestream;
|
||
|
|
font-size: 11px;
|
||
|
|
font-style: italic;
|
||
|
|
/* padding-left: 10px; */
|
||
|
|
text-decoration: underline;
|
||
|
|
text-align: center;
|
||
|
|
display: grid;
|
||
|
|
}
|
||
|
|
.item2 {grid-area: nextlive;
|
||
|
|
overflow: scroll !important;
|
||
|
|
position: relative;}
|
||
|
|
.item13 {grid-area: nextlive2;
|
||
|
|
overflow: scroll !important;
|
||
|
|
position: relative;}
|
||
|
|
.item3 { grid-area: logo;
|
||
|
|
text-align: center;}
|
||
|
|
|
||
|
|
.item4 { grid-area: search;
|
||
|
|
text-align: center;
|
||
|
|
background-color: #97ff00 !important;
|
||
|
|
}
|
||
|
|
.item5 { grid-area: about;
|
||
|
|
text-align: center;}
|
||
|
|
.item6 { grid-area: contact;
|
||
|
|
text-align: center; }
|
||
|
|
.item7 { grid-area: newsletter;
|
||
|
|
text-align: center; }
|
||
|
|
.item8 { grid-area: alliees;
|
||
|
|
text-align: center;
|
||
|
|
background-color: #c7fe86 !important;
|
||
|
|
}
|
||
|
|
.item9 {
|
||
|
|
grid-area: prog;
|
||
|
|
overflow: scroll;
|
||
|
|
|
||
|
|
}
|
||
|
|
.item10 { grid-area: ch4tform; overflow: scroll !important;border: 2px solid blue !important;background-color: black !important;color: white;}
|
||
|
|
.item11 { grid-area: index;
|
||
|
|
text-align: center;}
|
||
|
|
.item12 { grid-area: carte;
|
||
|
|
text-align: center;}
|
||
|
|
|
||
|
|
|
||
|
|
.item9::-webkit-scrollbar {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Hide scrollbar for IE, Edge and Firefox */
|
||
|
|
.item9 {
|
||
|
|
-ms-overflow-style: none; /* IE and Edge */
|
||
|
|
scrollbar-width: none; /* Firefox */
|
||
|
|
overflow: scroll !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.grid-container {
|
||
|
|
display: grid;
|
||
|
|
gap: 0px;
|
||
|
|
padding: 0px;
|
||
|
|
width: 50vw;
|
||
|
|
height: 100vh;
|
||
|
|
position: fixed;
|
||
|
|
top: 0px;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-container#accueil {
|
||
|
|
grid-template-areas:
|
||
|
|
'carte logo logo logo'
|
||
|
|
'carte logo logo logo'
|
||
|
|
'livestream nextlive nextlive nextlive'
|
||
|
|
'livestream nextlive nextlive nextlive'
|
||
|
|
'about prog prog prog'
|
||
|
|
'contact prog prog prog'
|
||
|
|
'newsletter prog prog prog'
|
||
|
|
'alliees prog prog prog'
|
||
|
|
'ch4tform ch4tform index index'
|
||
|
|
'ch4tform ch4tform index index'
|
||
|
|
'ch4tform ch4tform index index';
|
||
|
|
left: 0px;
|
||
|
|
grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto;
|
||
|
|
grid-template-columns: 25% 25% 25% 25%;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-container > div {
|
||
|
|
border: 1.5px solid grey;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-container p {margin-top: 0px}
|
||
|
|
|
||
|
|
|
||
|
|
.grid-container img {
|
||
|
|
max-width: 100%;
|
||
|
|
max-height: 100%;
|
||
|
|
vertical-align: middle;
|
||
|
|
margin: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
#carteImg, #indexImg {
|
||
|
|
width: 100% !important;
|
||
|
|
height: 100% !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
img#logo {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-container .helper {
|
||
|
|
display: inline-block;
|
||
|
|
height: 100%;
|
||
|
|
vertical-align: middle;
|
||
|
|
}
|
||
|
|
|
||
|
|
.item2 img {
|
||
|
|
position: absolute;
|
||
|
|
top: 0px;
|
||
|
|
z-index: 5;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.item2, .item9 {
|
||
|
|
font-size: 1.5em !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/* ///////////////////// INDEX griddddddd */
|
||
|
|
|
||
|
|
.header {
|
||
|
|
grid-area: header;
|
||
|
|
/* display: flex; */
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header:hover {
|
||
|
|
/* background-color: grey !important; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.header p {
|
||
|
|
width: 90%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.searchIndex {
|
||
|
|
grid-area: searchIndex;
|
||
|
|
text-align: center;
|
||
|
|
/* background-color: #97ff00 !important; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.searchIndex input {
|
||
|
|
background-color: transparent;
|
||
|
|
width: 100%;
|
||
|
|
text-align: center;
|
||
|
|
border: 0px;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tags {
|
||
|
|
grid-area: tags;
|
||
|
|
overflow: scroll;
|
||
|
|
}
|
||
|
|
|
||
|
|
#tagDiscription {
|
||
|
|
grid-area: tagDiscription;
|
||
|
|
overflow: scroll;
|
||
|
|
}
|
||
|
|
|
||
|
|
#tagDiscription h1 {
|
||
|
|
margin-top: 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.archiveList {
|
||
|
|
grid-area: archiveList;
|
||
|
|
overflow-y: scroll !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-container#index {
|
||
|
|
grid-template-areas:
|
||
|
|
'header header header header'
|
||
|
|
'searchIndex searchIndex tags tags'
|
||
|
|
'archiveList archiveList tags tags'
|
||
|
|
'archiveList archiveList tagDiscription tagDiscription';
|
||
|
|
right: 0px;
|
||
|
|
/* grid-template-rows: min-content 30px auto 30vh; */
|
||
|
|
grid-template-rows: min-content 30px auto 30vh;
|
||
|
|
grid-template-columns: 25% 25% 25% 25%;
|
||
|
|
background-color: black;
|
||
|
|
color: white;
|
||
|
|
border-left: 1px solid #8875ad;
|
||
|
|
width: calc(50vw - 14px);
|
||
|
|
z-index: 1;
|
||
|
|
display: none;
|
||
|
|
padding-right: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-container#index.visible {
|
||
|
|
display: grid !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-container#index a {
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
#closeIndex {
|
||
|
|
/* position: fixed;
|
||
|
|
top: 4px;
|
||
|
|
right: 15px; */
|
||
|
|
}
|
||
|
|
|
||
|
|
/* tr.about {
|
||
|
|
display: none !important;
|
||
|
|
} */
|
||
|
|
|
||
|
|
tr[tags*="about"] {
|
||
|
|
display: none !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
tr.No.Tags {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
#resetFilterButton {
|
||
|
|
background-color: gray !important;
|
||
|
|
width: fit-content;
|
||
|
|
border: 1px solid white;
|
||
|
|
margin: 5px;
|
||
|
|
padding: 2px;
|
||
|
|
transition: scale 0.5s;
|
||
|
|
}
|
||
|
|
|
||
|
|
#resetFilterButton:active {
|
||
|
|
/* background: lightslategray !important; */
|
||
|
|
/* scale: 0.9; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.tagButton.about, .tagButton.No.Tags, .tagButton.onlyincat {
|
||
|
|
display: none !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
button[data-filter*="2030"], button[data-filter*="2026"], button[data-filter*="No Tags"], button[data-filter*="about"] {
|
||
|
|
display: none !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.filterButton {
|
||
|
|
opacity: 0.3;
|
||
|
|
}
|
||
|
|
|
||
|
|
.filterButton.intable {
|
||
|
|
opacity: 1 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tagButton.selected, .yearButton.selected, .filterButton.selected {
|
||
|
|
/* background-color: rgb(255, 255, 255) !important; */
|
||
|
|
/* color: rgb(0, 0, 0) !important; */
|
||
|
|
border-radius: 13px;
|
||
|
|
filter: invert(1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-container#index > div {
|
||
|
|
background-color: black;
|
||
|
|
border: white 1px solid;
|
||
|
|
box-shadow: 0px 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-container#index button {
|
||
|
|
background-color: black;
|
||
|
|
color: white;
|
||
|
|
margin: 5px;
|
||
|
|
border: 1px solid white;
|
||
|
|
/* transition: opacity 0.5s , border-radius 0.5s, scale 0.2s, filter 1s; */
|
||
|
|
transition: opacity 0.5s , border-radius 0.5s, scale 0.2s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-container#index button:active {
|
||
|
|
background-color: rgb(255, 255, 255);
|
||
|
|
color: rgb(0, 0, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-container#index .tags{
|
||
|
|
/* padding: 5px; */
|
||
|
|
overflow: scroll;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* INDEXX TABLLLEEE */
|
||
|
|
|
||
|
|
#fileTable {
|
||
|
|
background-color: black;
|
||
|
|
color: white;
|
||
|
|
border-collapse: collapse;
|
||
|
|
width: 100% !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.noshowcolumn {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
table {
|
||
|
|
width: 100%;
|
||
|
|
border-collapse: collapse;
|
||
|
|
width: 300px !important;
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
table, th, td {
|
||
|
|
border: 1px solid black;
|
||
|
|
background-color: black !important;
|
||
|
|
}
|
||
|
|
tbody {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
td {
|
||
|
|
padding: 0px !important;
|
||
|
|
text-align: left;
|
||
|
|
border: 0px !important;
|
||
|
|
background-color: transparent !important;
|
||
|
|
}
|
||
|
|
tr {
|
||
|
|
background-color: black !important;
|
||
|
|
padding-bottom: 10px;
|
||
|
|
display: block;
|
||
|
|
border-top: 1px solid white;
|
||
|
|
}
|
||
|
|
tr:hover, #closeIndex:hover {
|
||
|
|
color: #00cfff;
|
||
|
|
}
|
||
|
|
tr:first-of-type {
|
||
|
|
border: 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
th {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
#fileTable_length {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
#fileTable_filter, .dataTables_filter {
|
||
|
|
color: white;
|
||
|
|
text-align: left;
|
||
|
|
float: none;
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
#fileTable_filter input {
|
||
|
|
color: white;
|
||
|
|
border: 1px solid white;
|
||
|
|
}
|
||
|
|
|
||
|
|
#fileTable_paginate {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
#fileNameRow {
|
||
|
|
/* max-width: 50px; */
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
tr.selected {
|
||
|
|
background-color: white !important;
|
||
|
|
color: black;
|
||
|
|
transition: background-color 0.5s;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/* ///////////////////// FOCUSSSSSSSS griddddddd */
|
||
|
|
|
||
|
|
.grid-container#focusGrid {
|
||
|
|
grid-template-areas:
|
||
|
|
'title'
|
||
|
|
'content'
|
||
|
|
'details';
|
||
|
|
left: 0px;
|
||
|
|
grid-template-rows: min-content auto min-content;
|
||
|
|
grid-template-columns: 100%;
|
||
|
|
background-color: black;
|
||
|
|
color: white;
|
||
|
|
width: calc(50vw + 4px);
|
||
|
|
z-index: 1;
|
||
|
|
border: 0px !important;
|
||
|
|
padding-right: 5px;
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-container#focusGrid.visible {
|
||
|
|
display: grid;
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-container#focusGrid > div {
|
||
|
|
background-color: black;
|
||
|
|
border: white 1px solid;
|
||
|
|
box-shadow: 0px 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-container#focusGrid #focusItemIndexDetailsTitle {
|
||
|
|
grid-area: title;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-container#focusGrid #focusItemIndexBack {
|
||
|
|
grid-area: backbtn;
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
.grid-container#focusGrid #focusItemIndexDetails {
|
||
|
|
grid-area: details;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-container#focusGrid #focusItemIndexContent {
|
||
|
|
grid-area: content;
|
||
|
|
overflow-y: scroll !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-container#focusGrid #focusItemIndexContent #startAnnounce {
|
||
|
|
width: 60%;
|
||
|
|
margin: auto;
|
||
|
|
margin-top: 20vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-container#focusGrid #focusItemIndexContent #startAnnounce #selectafile {
|
||
|
|
position: relative;
|
||
|
|
top: 8vh;
|
||
|
|
left: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
.grid-container#focusGrid a {
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
#focusItemIndexImage {
|
||
|
|
max-width: 100%;
|
||
|
|
max-height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* DETTTTTTTTTTTTTTAILS GRIDDD */
|
||
|
|
|
||
|
|
#focusItemIndexDetails {
|
||
|
|
display: grid !important;
|
||
|
|
grid-template-areas:
|
||
|
|
'date time format size id';
|
||
|
|
}
|
||
|
|
|
||
|
|
#focusItemIndexDetails > span {
|
||
|
|
border: 0px solid white;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
#focusItemIndexDetailsDate {
|
||
|
|
grid-area: date;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
#focusItemIndexDetailsTime {
|
||
|
|
grid-area: time;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
#focusItemIndexDetailsFormat {
|
||
|
|
grid-area: format;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
#focusItemIndexDetailsSize {
|
||
|
|
grid-area: size;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
#focusItemIndexDetailsId {
|
||
|
|
grid-area: id;
|
||
|
|
}
|
||
|
|
|
||
|
|
#focusItemIndexDetailsId a {
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
@media (max-width: 60rem) {
|
||
|
|
|
||
|
|
/* body {
|
||
|
|
background-image: URL("data/main-page-image/soso-mercredi-14.jpg");
|
||
|
|
background-repeat: repeat;
|
||
|
|
background-size: 100vw;
|
||
|
|
} */
|
||
|
|
|
||
|
|
|
||
|
|
#positionBox {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
#focusBackground {
|
||
|
|
background-color: rgba(255, 255, 255, 0.521);
|
||
|
|
}
|
||
|
|
|
||
|
|
#zoneBackground {
|
||
|
|
background-color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.focusBox {
|
||
|
|
top: 11vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
.focusBox.full-page {
|
||
|
|
height: 97vh !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.soundDiscription {
|
||
|
|
/*! display: none; */
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.soundItem.withDiscription {
|
||
|
|
|
||
|
|
display: block !important;
|
||
|
|
width: calc(100% - 40px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.focusBox {
|
||
|
|
top: 38px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.focusBoxText {
|
||
|
|
height: 80vh !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.textItem::before {
|
||
|
|
top: 226px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
#navigation {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
#navigationMobil {
|
||
|
|
position: fixed;
|
||
|
|
z-index: 1000;
|
||
|
|
border: 2px solid white;
|
||
|
|
padding-bottom: 5px;
|
||
|
|
padding-left: 10px;
|
||
|
|
padding-right: 10px;
|
||
|
|
margin-left: auto;
|
||
|
|
margin-right: auto;
|
||
|
|
margin-bottom: -13px;
|
||
|
|
background-color: black;
|
||
|
|
/*! color: white; */
|
||
|
|
/*! text-align: center; */
|
||
|
|
/*! text-align: center; */
|
||
|
|
/*! top: 50%; */
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -0%);
|
||
|
|
/*! display: flex; */
|
||
|
|
text-align: center;
|
||
|
|
max-width: 800px;
|
||
|
|
width: min-content !important;
|
||
|
|
display: none;display: none;
|
||
|
|
left: 0px !important;
|
||
|
|
transform: translate(-1%)!important;
|
||
|
|
height: 80vh !important;
|
||
|
|
top: 46px !important;
|
||
|
|
padding: 9px;
|
||
|
|
box-shadow: 0px 0px 70px 5px #ff6000;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.navigationBtn {
|
||
|
|
text-align: left !important;
|
||
|
|
width: inherit !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
#backBtn {
|
||
|
|
display: none !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
#backBtnMobil {
|
||
|
|
position: fixed;
|
||
|
|
right: 10px;
|
||
|
|
z-index: 5000;
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
#mobilBtns {
|
||
|
|
display: inherit !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
#searchBar, #mobilesearchBar, .mobilesearchBar {
|
||
|
|
position: fixed !important;
|
||
|
|
top: 11px !important;
|
||
|
|
width: 50vw !important;
|
||
|
|
z-index: 5000 !important;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%);
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
#mobilesearchBar.visible {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.contentColumn {
|
||
|
|
left: 0px !important;
|
||
|
|
position: fixed !important;
|
||
|
|
padding-top: 52px !important;
|
||
|
|
padding-left: 0px !important;
|
||
|
|
padding-right: 0px !important;
|
||
|
|
height: 94%;
|
||
|
|
overflow: scroll;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mobileMainBtns {
|
||
|
|
background: black;
|
||
|
|
color: white;
|
||
|
|
font-family: monospace;
|
||
|
|
font-size: 18px;
|
||
|
|
border: 2px solid white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wipMobile {
|
||
|
|
position: fixed;
|
||
|
|
z-index: 499;
|
||
|
|
background: yellow;
|
||
|
|
top: 83px;
|
||
|
|
font-size: 25px;
|
||
|
|
display: none;
|
||
|
|
left: 0px;
|
||
|
|
#display: block !important;
|
||
|
|
width: 86%;
|
||
|
|
margin: 10px;
|
||
|
|
padding: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#content.visible {
|
||
|
|
left: 0px !important;
|
||
|
|
width: 100% !important;
|
||
|
|
top: 0px !important;
|
||
|
|
max-width: 100% !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
#phpload.visible {
|
||
|
|
height: 100vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
.contentColumn {
|
||
|
|
width: 100%;
|
||
|
|
/*! top: -30px !important; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.contentItemBox {
|
||
|
|
width: 80% !important;
|
||
|
|
/*! margin-left: 16px !important; */
|
||
|
|
}
|
||
|
|
|
||
|
|
#showChat {
|
||
|
|
display: none !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chat {
|
||
|
|
width: 100vw !important;
|
||
|
|
top: 0px;
|
||
|
|
height: 100vh !important;
|
||
|
|
padding: 0px !important;
|
||
|
|
padding-top: 30px !important;
|
||
|
|
border: 0px !important;
|
||
|
|
display: none ;
|
||
|
|
left: 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#chat h1 {
|
||
|
|
top: 29px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.closeChat {
|
||
|
|
display: none !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
#newMesInput {
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#map1 div.image {
|
||
|
|
width: 90vw !important;
|
||
|
|
left: 20px !important;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.wipDesktop {
|
||
|
|
display: none;
|
||
|
|
top: 40px;
|
||
|
|
font-size: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#map1 .text {
|
||
|
|
max-width: 85vw !important;
|
||
|
|
height: fit-content !important;
|
||
|
|
left: 10px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
.grid-container#accueil {
|
||
|
|
grid-template-areas:
|
||
|
|
'logo '
|
||
|
|
'livestream'
|
||
|
|
'nextlive '
|
||
|
|
'prog '
|
||
|
|
'about '
|
||
|
|
'contact '
|
||
|
|
'newsletter'
|
||
|
|
'index '
|
||
|
|
'alliees ';
|
||
|
|
left: 0px;
|
||
|
|
grid-template-columns: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-container#index {
|
||
|
|
grid-template-areas:
|
||
|
|
'header '
|
||
|
|
'searchIndex '
|
||
|
|
'tags '
|
||
|
|
'archiveList '
|
||
|
|
'tagDiscription';
|
||
|
|
left: 0px;
|
||
|
|
grid-template-rows: min-content 30px 30vh auto auto;
|
||
|
|
grid-template-columns: 98%;
|
||
|
|
background-color: black;
|
||
|
|
color: white;
|
||
|
|
border-left: 1px solid #8875ad;
|
||
|
|
width: 100vw;
|
||
|
|
z-index: 1;
|
||
|
|
display: none;
|
||
|
|
padding-right: 8px;
|
||
|
|
overflow: hidden;
|
||
|
|
z-index: 5;
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-container#focusGrid.mobileVisible {
|
||
|
|
z-index: 6;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.grid-container#focusGrid {
|
||
|
|
width: 100vw;
|
||
|
|
z-index: 0;
|
||
|
|
grid-template-areas:
|
||
|
|
'backbtn title'
|
||
|
|
'content content'
|
||
|
|
'details details';
|
||
|
|
grid-template-columns: 20% 79%;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.radiobody {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-container {
|
||
|
|
width: 99vw;
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-container#focusGrid #focusItemIndexBack {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer {
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
bottom: 0px;
|
||
|
|
width: 100%;
|
||
|
|
text-align: center;
|
||
|
|
transition: bottom 0.5s cubic-bezier(.64,.55,.36,1.57);
|
||
|
|
margin-left: 0%;
|
||
|
|
}
|
||
|
|
}
|