Neue Streams und CSS-Optimierungen
This commit is contained in:
parent
adf7df7952
commit
45073a59f9
@ -2,9 +2,9 @@
|
||||
"channels": [
|
||||
{
|
||||
"type": "radiostream",
|
||||
"title": "NDR2",
|
||||
"stream": "http://www.ndr.de/resources/metadaten/audio/m3u/ndr2_hh.m3u",
|
||||
"icon": "https://upload.wikimedia.org/wikipedia/commons/9/9e/NDR_2_Logo.svg"
|
||||
"title": "WDR2",
|
||||
"stream": "http://wdr-wdr2-ostwestfalenlippe.icecast.wdr.de/wdr/wdr2/ostwestfalenlippe/mp3/128/stream.mp3",
|
||||
"icon": "https://upload.wikimedia.org/wikipedia/commons/b/bb/WDR_2_logo_2012.svg"
|
||||
},
|
||||
{
|
||||
"type": "radiostream",
|
||||
|
||||
@ -126,15 +126,15 @@ table {
|
||||
/* RESET END */
|
||||
html,
|
||||
body {
|
||||
height: 98.5%;
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
font: 12px "Lucida Grande", Helvetica, Arial, sans-serif;
|
||||
background-color: rgba(0, 0, 0, 0.38);
|
||||
background-image: url('/images/gl_formentera_seil.jpg');
|
||||
background-size: auto 100%;
|
||||
background-image: url('/images/gl_formentera_kueste.jpg');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left top;
|
||||
background-position: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.clearboth {
|
||||
@ -142,6 +142,7 @@ body {
|
||||
}
|
||||
a {
|
||||
color: #00B7FF;
|
||||
transition: background-color 1s;
|
||||
}
|
||||
.hidden {
|
||||
display: none !important;
|
||||
@ -149,87 +150,62 @@ a {
|
||||
#navigation {
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
align-content: center;
|
||||
align-content: stretch;
|
||||
margin: 1% 1% 1% 1%;
|
||||
}
|
||||
#navigation .tile {
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
margin: 2px;
|
||||
#navigation > a {
|
||||
width: 33%;
|
||||
margin: 1%;
|
||||
flex-grow: 1;
|
||||
flex-basis: auto;
|
||||
align-self: flex-start;
|
||||
align-self: stretch;
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
#navigation > a > .content {
|
||||
height: 100%;
|
||||
}
|
||||
#navigation .tile .content {
|
||||
height: inherit;
|
||||
text-align: center;
|
||||
padding: 2px;
|
||||
}
|
||||
#navigation .tile .content .icon {
|
||||
display: block;
|
||||
margin: auto;
|
||||
height: 50%;
|
||||
}
|
||||
#navigation .tile .content .title {
|
||||
display: block;
|
||||
margin-top: 20px;
|
||||
font-size: 2.2em;
|
||||
}
|
||||
#navigation .tile:hover {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
@media screen and (max-width: 320px) {
|
||||
#navigation {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
#navigation .tile {
|
||||
display: inline-block;
|
||||
width: 32%;
|
||||
}
|
||||
#navigation .tile .content .icon {
|
||||
height: auto;
|
||||
width: 88%;
|
||||
}
|
||||
}
|
||||
#controls {
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
height: 30%;
|
||||
margin: 2px;
|
||||
margin-top: 4px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
#controls .control {
|
||||
display: block;
|
||||
margin: 2px;
|
||||
flex-grow: 1;
|
||||
flex-basis: auto;
|
||||
align-self: flex-start;
|
||||
height: auto;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font-size: 50px;
|
||||
#navigation > a > .content > .icon {
|
||||
width: 80%;
|
||||
}
|
||||
#controls .control:hover {
|
||||
#navigation > a:hover {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
#controls .control.empty {
|
||||
visibility: hidden;
|
||||
}
|
||||
@media screen and (max-width: 320px) {
|
||||
#controls {
|
||||
display: block;
|
||||
height: 30%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
align-content: stretch;
|
||||
margin: 1% 1% 1% 1%;
|
||||
}
|
||||
#controls > a {
|
||||
width: 33%;
|
||||
height: auto;
|
||||
margin: 0 1% 4% 1%;
|
||||
flex-grow: 1;
|
||||
align-self: stretch;
|
||||
text-align: center;
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
font-size: 3rem;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
#controls .control {
|
||||
display: inline-block;
|
||||
width: 25%;
|
||||
margin: 0;
|
||||
#controls > a.empty {
|
||||
display: none;
|
||||
}
|
||||
#controls > a:hover {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
transition: all 2s;
|
||||
}
|
||||
|
||||
@ -1,7 +1,11 @@
|
||||
@margin_element: 2px;
|
||||
@backgroundcolor: rgba(0,0,0,0.38);
|
||||
@backgroundcolor_element: rgba(255,255,255,0.25);
|
||||
@backgroundcolor_element_hover: rgba(255,255,255,0.50);
|
||||
@margin_element: 2px;
|
||||
@linkcolor: #00B7FF;
|
||||
@fontsize_controls: 3rem;
|
||||
@height_navigation: 70%;
|
||||
@height_controls: (100% - @height_navigation);
|
||||
|
||||
|
||||
|
||||
@ -56,16 +60,16 @@ table {
|
||||
|
||||
|
||||
html, body {
|
||||
height: 98.5%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font: 12px "Lucida Grande", Helvetica, Arial, sans-serif;
|
||||
background-color: @backgroundcolor;
|
||||
background-image: url('/images/gl_formentera_seil.jpg');
|
||||
background-size: auto 100%;
|
||||
background-image: url('/images/gl_formentera_kueste.jpg');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left top;
|
||||
background-position: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@ -74,7 +78,8 @@ body {
|
||||
}
|
||||
|
||||
a {
|
||||
color: #00B7FF;
|
||||
color: @linkcolor;
|
||||
transition: background-color 1s;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
@ -82,36 +87,31 @@ a {
|
||||
}
|
||||
|
||||
#navigation {
|
||||
height: 70%;
|
||||
height: @height_navigation;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
align-content: center;
|
||||
align-content: stretch;
|
||||
margin: 1% 1% 1% 1%;
|
||||
|
||||
.tile {
|
||||
background-color: @backgroundcolor_element;
|
||||
margin: @margin_element;
|
||||
> a {
|
||||
width: 33%;
|
||||
margin: 1%;
|
||||
flex-grow: 1;
|
||||
flex-basis: auto;
|
||||
align-self: flex-start;
|
||||
align-self: stretch;
|
||||
background-color: @backgroundcolor_element;
|
||||
|
||||
> .content {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.content {
|
||||
height: inherit;
|
||||
text-align: center;
|
||||
padding: @margin_element;
|
||||
|
||||
.icon {
|
||||
display: block;
|
||||
margin: auto;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: block;
|
||||
margin-top: 20px;
|
||||
font-size: 2.2em;
|
||||
> .icon {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -119,65 +119,41 @@ a {
|
||||
background-color: @backgroundcolor_element_hover;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 320px) {
|
||||
display: block;
|
||||
text-align: center;
|
||||
|
||||
.tile {
|
||||
display: inline-block;
|
||||
width: 32%;
|
||||
|
||||
.content {
|
||||
|
||||
.icon {
|
||||
height: auto;
|
||||
width: 88%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#controls {
|
||||
background-color: @backgroundcolor_element;
|
||||
height: 30%;
|
||||
margin: @margin_element;
|
||||
margin-top: (@margin_element * 2);
|
||||
height: @height_controls;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
align-content: center;
|
||||
align-content: stretch;
|
||||
margin: 1% 1% 1% 1%;
|
||||
|
||||
.control {
|
||||
display: block;
|
||||
margin: @margin_element;
|
||||
flex-grow: 1;
|
||||
flex-basis: auto;
|
||||
align-self: flex-start;
|
||||
> a {
|
||||
width: 33%;
|
||||
height: auto;
|
||||
margin: 0 1% 4% 1%;
|
||||
flex-grow: 1;
|
||||
align-self: stretch;
|
||||
text-align: center;
|
||||
background-color: @backgroundcolor_element;
|
||||
font-size: @fontsize_controls;
|
||||
text-decoration: none;
|
||||
font-size: 50px;
|
||||
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&.empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: @backgroundcolor_element_hover;
|
||||
}
|
||||
|
||||
&.empty {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 320px) {
|
||||
display: block;
|
||||
text-align: center;
|
||||
|
||||
.control {
|
||||
display: inline-block;
|
||||
width: 25%;
|
||||
margin: 0;
|
||||
transition: all 2s;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user