gerrit/Kitchen-Radio
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Neue Streams und CSS-Optimierungen

Browse Source
This commit is contained in:
Gerrit Linnemann 2021-05-07 21:07:36 +02:00
parent adf7df7952
commit 45073a59f9
3 changed files with 98 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
kitchenradio/config.json
View File

@ -2,9 +2,9 @@
"channels": [ "channels": [
{ {
"type": "radiostream", "type": "radiostream",
"title": "NDR2", "title": "WDR2",
"stream": "http://www.ndr.de/resources/metadaten/audio/m3u/ndr2_hh.m3u", "stream": "http://wdr-wdr2-ostwestfalenlippe.icecast.wdr.de/wdr/wdr2/ostwestfalenlippe/mp3/128/stream.mp3",
"icon": "https://upload.wikimedia.org/wikipedia/commons/9/9e/NDR_2_Logo.svg" "icon": "https://upload.wikimedia.org/wikipedia/commons/b/bb/WDR_2_logo_2012.svg"
}, },
{ {
"type": "radiostream", "type": "radiostream",

110
kitchenradio/public/stylesheets/style.css
View File

@ -126,15 +126,15 @@ table {
/* RESET END */ /* RESET END */
html, html,
body { body {
height: 98.5%; height: 100%;
} }
body { body {
font: 12px "Lucida Grande", Helvetica, Arial, sans-serif; font: 12px "Lucida Grande", Helvetica, Arial, sans-serif;
background-color: rgba(0, 0, 0, 0.38); background-color: rgba(0, 0, 0, 0.38);
background-image: url('/images/gl_formentera_seil.jpg'); background-image: url('/images/gl_formentera_kueste.jpg');
background-size: auto 100%; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: left top; background-position: center;
overflow: hidden; overflow: hidden;
} }
.clearboth { .clearboth {
@ -142,6 +142,7 @@ body {
} }
a { a {
color: #00B7FF; color: #00B7FF;
transition: background-color 1s;
} }
.hidden { .hidden {
display: none !important; display: none !important;
@ -149,87 +150,62 @@ a {
#navigation { #navigation {
height: 70%; height: 70%;
display: flex; display: flex;
flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: center; justify-content: space-between;
align-items: stretch; align-items: stretch;
align-content: center; align-content: stretch;
margin: 1% 1% 1% 1%;
} }
#navigation .tile { #navigation > a {
background-color: rgba(255, 255, 255, 0.25); width: 33%;
margin: 2px; margin: 1%;
flex-grow: 1; flex-grow: 1;
flex-basis: auto; align-self: stretch;
align-self: flex-start; background-color: rgba(255, 255, 255, 0.25);
}
#navigation > a > .content {
height: 100%; height: 100%;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
} }
#navigation .tile .content { #navigation > a > .content > .icon {
height: inherit; width: 80%;
text-align: center;
padding: 2px;
} }
#navigation .tile .content .icon { #navigation > a:hover {
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); 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 { #controls {
background-color: rgba(255, 255, 255, 0.25);
height: 30%; height: 30%;
margin: 2px;
margin-top: 4px;
display: flex; display: flex;
flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: center; justify-content: space-between;
align-items: stretch; align-items: stretch;
align-content: center; align-content: stretch;
margin: 1% 1% 1% 1%;
} }
#controls .control { #controls > a {
display: block; width: 33%;
margin: 2px;
flex-grow: 1;
flex-basis: auto;
align-self: flex-start;
height: auto; height: auto;
margin: 0 1% 4% 1%;
flex-grow: 1;
align-self: stretch;
text-align: center; text-align: center;
background-color: rgba(255, 255, 255, 0.25);
font-size: 3rem;
text-decoration: none; text-decoration: none;
font-size: 50px; display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
} }
#controls .control:hover { #controls > a.empty {
display: none;
}
#controls > a:hover {
background-color: rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.5);
} transition: all 2s;
#controls .control.empty {
visibility: hidden;
}
@media screen and (max-width: 320px) {
#controls {
display: block;
text-align: center;
}
#controls .control {
display: inline-block;
width: 25%;
margin: 0;
}
} }

126
kitchenradio/public/stylesheets/style.less
View File

@ -1,7 +1,11 @@
@margin_element: 2px;
@backgroundcolor: rgba(0,0,0,0.38); @backgroundcolor: rgba(0,0,0,0.38);
@backgroundcolor_element: rgba(255,255,255,0.25); @backgroundcolor_element: rgba(255,255,255,0.25);
@backgroundcolor_element_hover: rgba(255,255,255,0.50); @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 { html, body {
height: 98.5%; height: 100%;
} }
body { body {
font: 12px "Lucida Grande", Helvetica, Arial, sans-serif; font: 12px "Lucida Grande", Helvetica, Arial, sans-serif;
background-color: @backgroundcolor; background-color: @backgroundcolor;
background-image: url('/images/gl_formentera_seil.jpg'); background-image: url('/images/gl_formentera_kueste.jpg');
background-size: auto 100%; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: left top; background-position: center;
overflow: hidden; overflow: hidden;
} }
@ -74,7 +78,8 @@ body {
} }
a { a {
color: #00B7FF; color: @linkcolor;
transition: background-color 1s;
} }
.hidden { .hidden {
@ -82,36 +87,31 @@ a {
} }
#navigation { #navigation {
height: 70%; height: @height_navigation;
display: flex; display: flex;
flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: center; justify-content: space-between;
align-items: stretch; align-items: stretch;
align-content: center; align-content: stretch;
margin: 1% 1% 1% 1%;
.tile { > a {
background-color: @backgroundcolor_element; width: 33%;
margin: @margin_element; margin: 1%;
flex-grow: 1; flex-grow: 1;
flex-basis: auto; align-self: stretch;
align-self: flex-start; background-color: @backgroundcolor_element;
> .content {
height: 100%; height: 100%;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
.content { > .icon {
height: inherit; width: 80%;
text-align: center;
padding: @margin_element;
.icon {
display: block;
margin: auto;
height: 50%;
}
.title {
display: block;
margin-top: 20px;
font-size: 2.2em;
} }
} }
@ -119,65 +119,41 @@ a {
background-color: @backgroundcolor_element_hover; 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 { #controls {
background-color: @backgroundcolor_element; height: @height_controls;
height: 30%;
margin: @margin_element;
margin-top: (@margin_element * 2);
display: flex; display: flex;
flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: center; justify-content: space-between;
align-items: stretch; align-items: stretch;
align-content: center; align-content: stretch;
margin: 1% 1% 1% 1%;
.control { > a {
display: block; width: 33%;
margin: @margin_element;
flex-grow: 1;
flex-basis: auto;
align-self: flex-start;
height: auto; height: auto;
margin: 0 1% 4% 1%;
flex-grow: 1;
align-self: stretch;
text-align: center; text-align: center;
background-color: @backgroundcolor_element;
font-size: @fontsize_controls;
text-decoration: none; text-decoration: none;
font-size: 50px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
&.empty {
display: none;
}
&:hover { &:hover {
background-color: @backgroundcolor_element_hover; background-color: @backgroundcolor_element_hover;
} transition: all 2s;
&.empty {
visibility: hidden;
}
}
@media screen and (max-width: 320px) {
display: block;
text-align: center;
.control {
display: inline-block;
width: 25%;
margin: 0;
} }
} }
} }