579 lines
8.4 KiB
CSS
579 lines
8.4 KiB
CSS
|
|
/*=======================COMUNE=====================*/
|
|
|
|
html{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
margin:0;
|
|
font-family: monospace;
|
|
}
|
|
|
|
article:not(:target){
|
|
display: none;
|
|
}
|
|
|
|
article{
|
|
height: 100%;
|
|
}
|
|
|
|
|
|
#about{
|
|
background: transparent;
|
|
z-index: 10;
|
|
/*
|
|
border-left:solid 1em white;
|
|
*/
|
|
transition: border-left 3s ease-in 4s;
|
|
}
|
|
|
|
#about-randio:target > .text, #listen:target > .text, #functioning:target > .text, #further:target > .text, #random:target > .text, #contribution:target > .text, #policy:target > .text, #patches:target > .text, #contacts:target > .text, #other-radios:target > .text
|
|
{
|
|
display:block;
|
|
}
|
|
|
|
#radio-wrapper{
|
|
width:100%;
|
|
/*margin: 0.5em 0 1.5em -3.7em;
|
|
allineare il player con info-wrapper*/
|
|
margin: 0.5em 0 1.5em 0em;
|
|
justify-content: center;
|
|
}
|
|
|
|
#now-playing{
|
|
margin: auto;
|
|
width: 100%;
|
|
}
|
|
|
|
.text
|
|
{
|
|
display:none;
|
|
color:#333333;
|
|
line-height: 1.5em;
|
|
overflow-y: scroll;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.pd-style{
|
|
background:white;
|
|
border: solid 0.12em black;
|
|
position: relative;
|
|
}
|
|
|
|
h3.pd-style{
|
|
|
|
}
|
|
|
|
.pdlet{
|
|
}
|
|
|
|
.pd-style::before{
|
|
content: " ";
|
|
display: block;
|
|
position: absolute;
|
|
background: black;
|
|
width: 2em;
|
|
height: 0.4em;
|
|
}
|
|
|
|
.pd-style::after{
|
|
content: " ";
|
|
display: block;
|
|
position: absolute;
|
|
background: black;
|
|
width: 2em;
|
|
height: 0.4em;
|
|
bottom:0;
|
|
}
|
|
|
|
.text-wrapper{
|
|
height:100%;
|
|
}
|
|
|
|
.text-wrapper > article{
|
|
margin: 0;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.accordion-strip > a > h3{
|
|
margin: 0;
|
|
background: white;
|
|
border:0.1em solid black;
|
|
color:black;
|
|
padding-left:0.4em;
|
|
padding-right:0.4em;
|
|
}
|
|
|
|
.accordion-strip{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.accordion-title{
|
|
text-decoration: none;
|
|
display: block;
|
|
}
|
|
|
|
.text
|
|
{
|
|
}
|
|
|
|
.cookies{
|
|
background:black;
|
|
width:100%;
|
|
height: 0%;
|
|
position: fixed;
|
|
text-align: center;
|
|
left: 0;
|
|
display: flex;
|
|
bottom:0;
|
|
animation-name: schiacciamento;
|
|
animation-duration: 4s;
|
|
animation-delay: 0.3s;
|
|
animation-fill-mode: forwards;
|
|
animation-iteration-count: 1;
|
|
}
|
|
|
|
.cookies > p{
|
|
color: white;
|
|
animation-name: scomparsa;
|
|
animation-duration: 4s;
|
|
animation-delay: 0.3s;
|
|
}
|
|
|
|
@keyframes schiacciamento {
|
|
0% {height: 0em;}
|
|
50% {height: 4em;}
|
|
100% {height: 0em;}
|
|
}
|
|
|
|
@keyframes scomparsa {
|
|
0% {color: transparent;}
|
|
20% {color: white;}
|
|
50% {color: white;}
|
|
80% {color: transparent;}
|
|
}
|
|
|
|
/* 1.25 dpr */
|
|
@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi){
|
|
|
|
html{
|
|
font-size:1.7em;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
@media screen and (max-width: 700px) {
|
|
|
|
.accordion-strip{
|
|
right: 0;
|
|
border-top: 0.1em solid black;
|
|
}
|
|
|
|
.accordion-strip > a > h3{
|
|
margin-top:0em;
|
|
}
|
|
|
|
#about{
|
|
bottom:0 !important;
|
|
}
|
|
}
|
|
|
|
|
|
@media screen and (max-width: 999px) {
|
|
|
|
body{
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
display: flex;
|
|
}
|
|
|
|
main{
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 45em;
|
|
padding-bottom: 4em;
|
|
}
|
|
|
|
aside{
|
|
}
|
|
|
|
nav {
|
|
flex-wrap: wrap;
|
|
position: relative;
|
|
padding:2em;
|
|
}
|
|
|
|
p{
|
|
max-width: 40em;
|
|
}
|
|
|
|
#about{
|
|
padding-right: 1em;
|
|
}
|
|
|
|
#logo{
|
|
height:7em;
|
|
flex: 1 1 100%;
|
|
}
|
|
|
|
#logo > div{
|
|
margin: auto;
|
|
}
|
|
|
|
#info-wrapper{
|
|
padding: 0 1em 0 1em;
|
|
}
|
|
|
|
#description-wrapper{
|
|
padding: 0 1em 0.5em 1em;
|
|
}
|
|
|
|
#ring-wrapper{
|
|
position:absolute;
|
|
bottom:10em;
|
|
justify-content:center;
|
|
width:100%;
|
|
padding-bottom:2em;
|
|
padding-top:2em;
|
|
display:flex;
|
|
flex:1 1 100%;"
|
|
}
|
|
|
|
#radio-info{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.accordion-strip{
|
|
bottom: 0;
|
|
position: absolute;
|
|
margin-top: 5em;
|
|
}
|
|
|
|
.accordion-title{
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.info-wrapper {
|
|
padding:1em;
|
|
}
|
|
|
|
.text{
|
|
}
|
|
|
|
.text > *{
|
|
max-width: 35em;
|
|
padding: 0 5% 0 1%;
|
|
list-style-type: none;
|
|
}
|
|
|
|
.text-wrapper{
|
|
padding: 1em 1em 19em 1em;
|
|
overflow:hidden;
|
|
}
|
|
|
|
.text-wrapper > article{
|
|
padding: 0;
|
|
width: 116%;
|
|
}
|
|
}
|
|
|
|
|
|
@media screen and (min-width: 1000px) {
|
|
|
|
nav {
|
|
-moz-box-shadow: 0 0 10px #000000;
|
|
-webkit-box-shadow: 0 0 10px #000000;
|
|
box-shadow: 0 0 10px #000000;
|
|
flex: 1 1 100%;
|
|
height:7em;
|
|
display: flex;position: fixed;
|
|
width: 100%;
|
|
background: white;
|
|
z-index: 20;
|
|
}
|
|
|
|
main {
|
|
padding-left: 5em;
|
|
padding-top: 2em;
|
|
}
|
|
|
|
article{
|
|
overflow: hidden;
|
|
width: 43em;
|
|
}
|
|
|
|
.text-wrapper{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
|
|
#radio-info{
|
|
max-width: 30em;
|
|
}
|
|
|
|
|
|
|
|
#now-playing{
|
|
}
|
|
|
|
#piece-text
|
|
{
|
|
border: solid 1px black;
|
|
width:100%;
|
|
}
|
|
|
|
#radio-column{
|
|
flex: 0 1 18%;
|
|
padding-top:5em;
|
|
}
|
|
|
|
#piece-text > h3{
|
|
padding-left: 1em;
|
|
padding-right: 1em;
|
|
}
|
|
|
|
#description-wrapper{
|
|
width: 23em;
|
|
margin: 0 0 0 1em;
|
|
}
|
|
|
|
#about{
|
|
height: 100vh;
|
|
/* right: -61%; */
|
|
/* ====================== */
|
|
right:0;
|
|
opacity: 0;
|
|
transition: opacity 1.5s cubic-bezier(.17,.84,.44,1);
|
|
/* ====================== */
|
|
max-width: 60%;
|
|
position: fixed;
|
|
z-index: 33 !important;
|
|
padding: 0 0 0 1%;
|
|
top:0;
|
|
transition: right 1s cubic-bezier(.17,.84,.44,1);
|
|
}
|
|
|
|
.about-bar{
|
|
position: fixed;
|
|
right: 0em;
|
|
height: 100%;
|
|
width: 1em;
|
|
top: 0;
|
|
display: inline-block;
|
|
z-index: 43;
|
|
transition: right 1s cubic-bezier(.17,.84,.44,1);
|
|
}
|
|
|
|
input[type=checkbox]:checked + label + h5 + #about{
|
|
/*
|
|
right:0em;
|
|
border-left: solid 1em black;
|
|
transition: border-left 3s ease-in;
|
|
transition: right 1s cubic-bezier(.17,.84,.44,1);
|
|
*/
|
|
opacity:1;
|
|
transition: opacity 1.5s cubic-bezier(.17,.84,.44,1);
|
|
}
|
|
|
|
input[type=checkbox]:not(:checked) + label + h5 + #about{
|
|
/*
|
|
right:0em;
|
|
border-left: solid 1em black;
|
|
transition: border-left 3s ease-in;
|
|
transition: right 1s cubic-bezier(.17,.84,.44,1);
|
|
*/
|
|
opacity:0;
|
|
transition: opacity 0.6s linear 0.1s;
|
|
}
|
|
|
|
input[type=checkbox]:active + .bang::after{
|
|
background: black;
|
|
}
|
|
|
|
.bang{
|
|
position: fixed;
|
|
border: solid 1pt black;
|
|
top: 0;
|
|
/* right: 4em;*/
|
|
right: 1em;
|
|
width: 1.6em;
|
|
height: 1.6em;
|
|
padding: 0;
|
|
margin: 0.4em 0.4em 0;
|
|
z-index: 60;
|
|
}
|
|
|
|
.bang::after{
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 0.8em solid transparent;
|
|
border-right: 0.8em solid transparent;
|
|
border-top: black;
|
|
position: absolute;
|
|
content: "";
|
|
left: -0.8em;
|
|
background: white;
|
|
padding-left: 0.8em;
|
|
padding-bottom: 1.6em;
|
|
padding-right: 0.8em;
|
|
border-radius: 1em;
|
|
border: solid 1pt black;
|
|
margin-left: 0.7em;
|
|
top: -0.1em;
|
|
}
|
|
|
|
input[type=reset]:active{
|
|
/* the reset button when mouse-down */
|
|
}
|
|
|
|
.dx{
|
|
background-color: aquamarine;
|
|
}
|
|
|
|
input[type="radio"]:checked + #about{
|
|
right:0;
|
|
transition: right 1s cubic-bezier(.17,.84,.44,1);
|
|
}
|
|
|
|
.sx{
|
|
background-color: black;
|
|
}
|
|
|
|
input[id="toggle-2"]:checked + .sx{
|
|
right:60%;
|
|
transition: right 1s cubic-bezier(.17,.84,.44,1);
|
|
}
|
|
|
|
input[id="toggle-2"]:checked + label + #about {
|
|
transition: right 1s cubic-bezier(.17,.84,.44,1);
|
|
right:0em;
|
|
}
|
|
|
|
label + h5{
|
|
top: 0;
|
|
right: 1.4em;
|
|
position: fixed;
|
|
margin: 0.7em 0 0 0em;
|
|
padding: 0;
|
|
font-size: 1em;
|
|
}
|
|
|
|
.text
|
|
{
|
|
max-width: auto;
|
|
margin: 3em auto;
|
|
padding-right: 2.5em;
|
|
width: 42em;
|
|
height: 45%;
|
|
}
|
|
|
|
.accordion-title{
|
|
margin: 0.1em 0.5em 0 0.5em;
|
|
}
|
|
|
|
.accordion-strip{
|
|
padding: 2em 8em 0 6em;
|
|
}
|
|
|
|
.accordion-strip > a > h3{
|
|
margin-top:1em;
|
|
}
|
|
|
|
#ring-wrapper{
|
|
bottom: 5.5em;
|
|
position: absolute;
|
|
width: 100%;
|
|
}
|
|
|
|
#logo > div{
|
|
margin-left: 1em;
|
|
}
|
|
|
|
#news
|
|
{
|
|
display: flex;
|
|
margin: 0 17em 0 4em;
|
|
}
|
|
|
|
#news-wrapper{
|
|
}
|
|
|
|
#pd-ring > table{
|
|
margin:auto;
|
|
}
|
|
|
|
#now-playing > h2, #now-playing > h3{
|
|
background: none;
|
|
border:solid 1pt black;
|
|
flex:1 1 100%;
|
|
padding-left:1em;
|
|
padding-right:1em;
|
|
margin-bottom: 0;
|
|
margin-top: 1em;
|
|
}
|
|
|
|
audio {
|
|
background-color:#000000;
|
|
}
|
|
|
|
.pd_ring {
|
|
width:260px;
|
|
height:75px;
|
|
background-color:"#FFFFFF";
|
|
}
|
|
|
|
.pd_ringnext {
|
|
width:55px;
|
|
height:25px;
|
|
vertical-align:middle;
|
|
border:none;
|
|
}
|
|
|
|
.pd_ringlist {
|
|
width: 62px;
|
|
height: 25px;
|
|
vertical-align:middle;
|
|
border:none;
|
|
}
|
|
|
|
.pd_ringrandom {
|
|
width:63px;
|
|
height:25px;
|
|
vertical-align:middle;
|
|
border:none;
|
|
}
|
|
|
|
.pd_ringprevious {
|
|
width:80px;
|
|
height:25px;
|
|
vertical-align:middle;
|
|
border:none;
|
|
}
|
|
|
|
.pd_ringinfo {
|
|
width:260px;
|
|
height:50px;
|
|
vertical-align:middle;
|
|
border:none;
|
|
}
|
|
|
|
}
|
|
|
|
@media screen and (min-height: 701px) {
|
|
.text{
|
|
height:45%;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-height: 700){
|
|
.text{
|
|
height:65%;
|
|
}
|
|
}
|