mirror of
https://gitlab.xiph.org/xiph/icecast-server.git
synced 2024-12-04 14:46:30 -05:00
WIP new style for the web interface
This commit is contained in:
Marvin Scholz
Philipp Schafft
parent
6484fb40c6
commit
5b4ad6d7a8
@ -1,30 +1,47 @@
|
||||
<xsl:stylesheet xmlns:xsl = "http://www.w3.org/1999/XSL/Transform" version = "1.0" xmlns="http://www.w3.org/1999/xhtml">
|
||||
<xsl:output omit-xml-declaration="no" method="xml" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" indent="yes" encoding="UTF-8" />
|
||||
<!-- Import include files -->
|
||||
<!-- Import include files -->
|
||||
|
||||
<xsl:template match="/node()">
|
||||
<html>
|
||||
<head>
|
||||
<title><xsl:value-of select="$title"/> — Icecast Streaming Media Server</title>
|
||||
<link rel="stylesheet" type="text/css" href="style.css" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 id="header">Icecast <xsl:value-of select="$title"/></h1>
|
||||
<!--index header menu -->
|
||||
<div id="menu">
|
||||
<ul>
|
||||
<li><a href="admin/">Administration</a></li>
|
||||
<li><a href="status.xsl">Server Status</a></li>
|
||||
<li><a href="server_version.xsl">Version</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--end index header menu -->
|
||||
<xsl:call-template name="content" namespace="http://www.w3.org/1999/xhtml" />
|
||||
<div id="footer">
|
||||
Support icecast development at <a href="http://www.icecast.org">www.icecast.org</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<xsl:template match="/node()">
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title><xsl:value-of select="$title"/> — Icecast Server</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="/assets/css/style.css" media="screen, print" />
|
||||
|
||||
<meta name="theme-color" content="#001826" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
||||
<meta name="description" content="Icecast is free server software for streaming multimedia." />
|
||||
</head>
|
||||
<body>
|
||||
<!-- Header and menu -->
|
||||
<header>
|
||||
<nav id="main-nav" role="primary">
|
||||
<a href="/" id="branding">
|
||||
<img src="icecast.png" alt="" />
|
||||
<h1>Icecast Server</h1>
|
||||
</a>
|
||||
<ul>
|
||||
<li><a href="#">Status</a></li>
|
||||
<li><a href="#">Version</a></li>
|
||||
<li class="right"><a href="#">Administration</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!--<h1 id="header">Icecast <xsl:value-of select="$title"/></h1>-->
|
||||
|
||||
<!-- Content -->
|
||||
<main role="main">
|
||||
<xsl:call-template name="content" namespace="http://www.w3.org/1999/xhtml" />
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer>
|
||||
<p>Support icecast development at <a href="http://icecast.org">icecast.org</a></p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
</xsl:template>
|
||||
</xsl:stylesheet>
|
||||
|
||||
@ -3,29 +3,14 @@
|
||||
webdir = $(pkgdatadir)/web
|
||||
|
||||
nobase_web_DATA = \
|
||||
status.xsl \
|
||||
favicon.ico \
|
||||
icecast.png \
|
||||
style.css \
|
||||
status.xsl \
|
||||
auth.xsl \
|
||||
server_version.xsl \
|
||||
tunein.png \
|
||||
key.png \
|
||||
status-json.xsl \
|
||||
xml2json.xslt \
|
||||
favicon.ico \
|
||||
assets/css/style.css \
|
||||
assets/font/FiraMono-Bold.eot \
|
||||
assets/font/FiraMono-Regular.eot \
|
||||
assets/font/FiraSans-Bold.eot \
|
||||
assets/font/FiraSans-BoldItalic.woff \
|
||||
assets/font/FiraSans-Italic.eot \
|
||||
assets/font/FiraSans-Regular.eot \
|
||||
assets/font/FiraMono-Bold.woff \
|
||||
assets/font/FiraMono-Regular.woff \
|
||||
assets/font/FiraSans-BoldItalic.eot \
|
||||
assets/font/FiraSans-Bold.woff \
|
||||
assets/font/FiraSans-Italic.woff \
|
||||
assets/font/FiraSans-Regular.woff
|
||||
assets/img/icecast.png
|
||||
|
||||
|
||||
EXTRA_DIST = $(nobase_web_DATA)
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 8.9 KiB After Width: | Height: | Size: 8.9 KiB |
BIN
web/key.png
BIN
web/key.png
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
307
web/status.xsl
307
web/status.xsl
@ -13,157 +13,164 @@
|
||||
-->
|
||||
</xsl:text>
|
||||
<!--mount point stats-->
|
||||
<xsl:for-each select="source">
|
||||
<xsl:choose>
|
||||
<xsl:when test="listeners">
|
||||
<div class="roundbox">
|
||||
<div class="mounthead">
|
||||
<h3 class="mount">Mount Point <xsl:value-of select="@mount" /></h3>
|
||||
<div class="right">
|
||||
<xsl:choose>
|
||||
<xsl:when test="authenticator">
|
||||
<a class="auth" href="/auth.xsl">Login</a>
|
||||
</xsl:when>
|
||||
<xsl:otherwise>
|
||||
<ul class="mountlist">
|
||||
<li><a class="play" href="{@mount}.m3u">M3U</a></li>
|
||||
<li><a class="play" href="{@mount}.xspf">XSPF</a></li>
|
||||
<!-- <li><a class="play" href="{@mount}.vclt">VCLT</a></li> -->
|
||||
</ul>
|
||||
</xsl:otherwise>
|
||||
</xsl:choose>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mountcont">
|
||||
<xsl:if test="server_type and ((server_type = 'application/ogg') or (server_type = 'audio/ogg') or (server_type = 'audio/webm'))">
|
||||
<div class="audioplayer">
|
||||
<audio controls="controls" preload="none">
|
||||
<source src="{@mount}" type="{server_type}" />
|
||||
</audio>
|
||||
</div>
|
||||
</xsl:if>
|
||||
<table class="yellowkeys">
|
||||
<tbody>
|
||||
<xsl:if test="server_name">
|
||||
<tr>
|
||||
<td>Stream Name:</td>
|
||||
<td><xsl:value-of select="server_name" /></td>
|
||||
</tr>
|
||||
</xsl:if>
|
||||
<xsl:if test="server_description">
|
||||
<tr>
|
||||
<td>Stream Description:</td>
|
||||
<td><xsl:value-of select="server_description" /></td>
|
||||
</tr>
|
||||
</xsl:if>
|
||||
<xsl:if test="server_type">
|
||||
<tr>
|
||||
<td>Content Type:</td>
|
||||
<td><xsl:value-of select="server_type" /></td>
|
||||
</tr>
|
||||
</xsl:if>
|
||||
<xsl:if test="stream_start">
|
||||
<tr>
|
||||
<td>Stream started:</td>
|
||||
<td class="streamstats"><xsl:value-of select="stream_start" /></td>
|
||||
</tr>
|
||||
</xsl:if>
|
||||
<xsl:if test="bitrate">
|
||||
<tr>
|
||||
<td>Bitrate:</td>
|
||||
<td class="streamstats"><xsl:value-of select="bitrate" /></td>
|
||||
</tr>
|
||||
</xsl:if>
|
||||
<xsl:if test="quality">
|
||||
<tr>
|
||||
<td>Quality:</td>
|
||||
<td class="streamstats"><xsl:value-of select="quality" /></td>
|
||||
</tr>
|
||||
</xsl:if>
|
||||
<xsl:if test="video_quality">
|
||||
<tr>
|
||||
<td>Video Quality:</td>
|
||||
<td class="streamstats"><xsl:value-of select="video_quality" /></td>
|
||||
</tr>
|
||||
</xsl:if>
|
||||
<xsl:if test="frame_size">
|
||||
<tr>
|
||||
<td>Framesize:</td>
|
||||
<td class="streamstats"><xsl:value-of select="frame_size" /></td>
|
||||
</tr>
|
||||
</xsl:if>
|
||||
<xsl:if test="frame_rate">
|
||||
<tr>
|
||||
<td>Framerate:</td>
|
||||
<td class="streamstats"><xsl:value-of select="frame_rate" /></td>
|
||||
</tr>
|
||||
</xsl:if>
|
||||
<xsl:if test="listeners">
|
||||
<tr>
|
||||
<td>Listeners (current):</td>
|
||||
<td class="streamstats"><xsl:value-of select="listeners" /></td>
|
||||
</tr>
|
||||
</xsl:if>
|
||||
<xsl:if test="listener_peak">
|
||||
<tr>
|
||||
<td>Listeners (peak):</td>
|
||||
<td class="streamstats"><xsl:value-of select="listener_peak" /></td>
|
||||
</tr>
|
||||
</xsl:if>
|
||||
<xsl:if test="genre">
|
||||
<tr>
|
||||
<td>Genre:</td>
|
||||
<td class="streamstats"><xsl:value-of select="genre" /></td>
|
||||
</tr>
|
||||
</xsl:if>
|
||||
<xsl:if test="server_url">
|
||||
<tr>
|
||||
<td>Stream URL:</td>
|
||||
<td class="streamstats">
|
||||
<a href="{server_url}"><xsl:value-of select="server_url" /></a>
|
||||
</td>
|
||||
</tr>
|
||||
</xsl:if>
|
||||
<tr>
|
||||
<td>Currently playing:</td>
|
||||
<td class="streamstats">
|
||||
<xsl:if test="artist">
|
||||
<xsl:value-of select="artist" /> -
|
||||
</xsl:if>
|
||||
<xsl:value-of select="title" />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- Extra playlist -->
|
||||
<xsl:if test="playlist/*">
|
||||
<h4>Playlist</h4>
|
||||
<table class="table-block">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Album</th>
|
||||
<th>Track</th>
|
||||
<th>Creator</th>
|
||||
<th>Title</th>
|
||||
</tr>
|
||||
<xsl:for-each select="playlist/trackList/track">
|
||||
<h2>Status</h2>
|
||||
<xsl:choose>
|
||||
<xsl:when test="source">
|
||||
<xsl:for-each select="source">
|
||||
<xsl:choose>
|
||||
<xsl:when test="listeners">
|
||||
<section class="box">
|
||||
<h3 class="box_title">Mountpoint <code><xsl:value-of select="@mount" /></code></h3>
|
||||
|
||||
<!-- Playlists section -->
|
||||
<h4>Play stream</h4>
|
||||
<ul class="playlists">
|
||||
<li><a href="{@mount}">Direct</a></li>
|
||||
<li><a href="{@mount}.m3u">M3U</a></li>
|
||||
<li><a href="{@mount}.xspf">XSPF</a></li>
|
||||
</ul>
|
||||
|
||||
<!-- Player -->
|
||||
<xsl:if test="server_type and ((server_type = 'application/ogg') or (server_type = 'audio/ogg') or (server_type = 'audio/webm'))">
|
||||
<div class="audioplayer">
|
||||
<audio controls="controls" preload="none">
|
||||
<source src="{@mount}" type="{server_type}" />
|
||||
</audio>
|
||||
</div>
|
||||
</xsl:if>
|
||||
|
||||
<!-- Stream info and stats -->
|
||||
<h4>Further information</h4>
|
||||
<div class="mountcont">
|
||||
<table class="table-keys">
|
||||
<tbody>
|
||||
<xsl:if test="server_name">
|
||||
<tr>
|
||||
<td>Stream Name:</td>
|
||||
<td><xsl:value-of select="server_name" /></td>
|
||||
</tr>
|
||||
</xsl:if>
|
||||
<xsl:if test="server_description">
|
||||
<tr>
|
||||
<td>Stream Description:</td>
|
||||
<td><xsl:value-of select="server_description" /></td>
|
||||
</tr>
|
||||
</xsl:if>
|
||||
<xsl:if test="server_type">
|
||||
<tr>
|
||||
<td>Content Type:</td>
|
||||
<td><xsl:value-of select="server_type" /></td>
|
||||
</tr>
|
||||
</xsl:if>
|
||||
<xsl:if test="stream_start">
|
||||
<tr>
|
||||
<td>Stream started:</td>
|
||||
<td class="streamstats"><xsl:value-of select="stream_start" /></td>
|
||||
</tr>
|
||||
</xsl:if>
|
||||
<xsl:if test="bitrate">
|
||||
<tr>
|
||||
<td>Bitrate:</td>
|
||||
<td class="streamstats"><xsl:value-of select="bitrate" /></td>
|
||||
</tr>
|
||||
</xsl:if>
|
||||
<xsl:if test="quality">
|
||||
<tr>
|
||||
<td>Quality:</td>
|
||||
<td class="streamstats"><xsl:value-of select="quality" /></td>
|
||||
</tr>
|
||||
</xsl:if>
|
||||
<xsl:if test="video_quality">
|
||||
<tr>
|
||||
<td>Video Quality:</td>
|
||||
<td class="streamstats"><xsl:value-of select="video_quality" /></td>
|
||||
</tr>
|
||||
</xsl:if>
|
||||
<xsl:if test="frame_size">
|
||||
<tr>
|
||||
<td>Framesize:</td>
|
||||
<td class="streamstats"><xsl:value-of select="frame_size" /></td>
|
||||
</tr>
|
||||
</xsl:if>
|
||||
<xsl:if test="frame_rate">
|
||||
<tr>
|
||||
<td>Framerate:</td>
|
||||
<td class="streamstats"><xsl:value-of select="frame_rate" /></td>
|
||||
</tr>
|
||||
</xsl:if>
|
||||
<xsl:if test="listeners">
|
||||
<tr>
|
||||
<td>Listeners (current):</td>
|
||||
<td class="streamstats"><xsl:value-of select="listeners" /></td>
|
||||
</tr>
|
||||
</xsl:if>
|
||||
<xsl:if test="listener_peak">
|
||||
<tr>
|
||||
<td>Listeners (peak):</td>
|
||||
<td class="streamstats"><xsl:value-of select="listener_peak" /></td>
|
||||
</tr>
|
||||
</xsl:if>
|
||||
<xsl:if test="genre">
|
||||
<tr>
|
||||
<td>Genre:</td>
|
||||
<td class="streamstats"><xsl:value-of select="genre" /></td>
|
||||
</tr>
|
||||
</xsl:if>
|
||||
<xsl:if test="server_url">
|
||||
<tr>
|
||||
<td>Stream URL:</td>
|
||||
<td class="streamstats">
|
||||
<a href="{server_url}"><xsl:value-of select="server_url" /></a>
|
||||
</td>
|
||||
</tr>
|
||||
</xsl:if>
|
||||
<tr>
|
||||
<td><xsl:value-of select="album" /></td>
|
||||
<td><xsl:value-of select="trackNum" /></td>
|
||||
<td><xsl:value-of select="creator" /></td>
|
||||
<td><xsl:value-of select="title" /></td>
|
||||
<td>Currently playing:</td>
|
||||
<td class="streamstats">
|
||||
<xsl:if test="artist">
|
||||
<xsl:value-of select="artist" /> -
|
||||
</xsl:if>
|
||||
<xsl:value-of select="title" />
|
||||
</td>
|
||||
</tr>
|
||||
</xsl:for-each>
|
||||
</tbody>
|
||||
</table>
|
||||
</xsl:if>
|
||||
</div>
|
||||
</div>
|
||||
</xsl:when>
|
||||
<xsl:otherwise>
|
||||
<h3><xsl:value-of select="@mount" /> - Not Connected</h3>
|
||||
</xsl:otherwise>
|
||||
</xsl:choose>
|
||||
</xsl:for-each>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- Extra playlist -->
|
||||
<xsl:if test="playlist/*">
|
||||
<h4>Playlist</h4>
|
||||
<table class="table-block">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Album</th>
|
||||
<th>Track</th>
|
||||
<th>Creator</th>
|
||||
<th>Title</th>
|
||||
</tr>
|
||||
<xsl:for-each select="playlist/trackList/track">
|
||||
<tr>
|
||||
<td><xsl:value-of select="album" /></td>
|
||||
<td><xsl:value-of select="trackNum" /></td>
|
||||
<td><xsl:value-of select="creator" /></td>
|
||||
<td><xsl:value-of select="title" /></td>
|
||||
</tr>
|
||||
</xsl:for-each>
|
||||
</tbody>
|
||||
</table>
|
||||
</xsl:if>
|
||||
</div>
|
||||
</section>
|
||||
</xsl:when>
|
||||
<xsl:otherwise>
|
||||
<h3><xsl:value-of select="@mount" /> - Not Connected</h3>
|
||||
</xsl:otherwise>
|
||||
</xsl:choose>
|
||||
</xsl:for-each>
|
||||
</xsl:when>
|
||||
<xsl:otherwise>
|
||||
<aside class="error">
|
||||
<strong>No mounts!</strong> There are no active mountpoints.
|
||||
</aside>
|
||||
</xsl:otherwise>
|
||||
</xsl:choose>
|
||||
</xsl:template>
|
||||
</xsl:stylesheet>
|
||||
|
||||
274
web/style.css
274
web/style.css
@ -1,274 +0,0 @@
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 0 25px 0 50px;
|
||||
background-color: #000;
|
||||
font-family: Verdana, sans-serif;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #f8ef64;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px dotted #f8ef64;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #f8ef64;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid #f8ef64;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: Verdana, sans-serif;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
font-size: 3em;
|
||||
color: #fff;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
font-family: Verdana, sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 110%;
|
||||
color: #f8ef64;
|
||||
}
|
||||
|
||||
h1#header{
|
||||
padding: 10px 0px 10px 80px;
|
||||
background: transparent url(/icecast.png) no-repeat scroll left center;
|
||||
}
|
||||
|
||||
h3 small {
|
||||
color: #fff;
|
||||
font-size: 70%;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
form.alignedform label {
|
||||
text-align: right;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 10em;
|
||||
margin: 0 1em 0 0;
|
||||
}
|
||||
|
||||
form.alignedform input {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
border: 1px solid #f8ef64;
|
||||
background-color: #333;
|
||||
color: #f8ef64;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#menu {
|
||||
border-top: 3px solid #7B96C6;
|
||||
border-bottom: 3px solid #7B96C6;
|
||||
text-align: center;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
|
||||
#menu ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#menu ul li {
|
||||
float: left;
|
||||
padding-left: 25px;
|
||||
padding-right: 25px;
|
||||
}
|
||||
|
||||
#menu ul li a {
|
||||
font-family: Verdana, sans-serif;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#menu ul li a:hover {
|
||||
color: #f8ef64;
|
||||
}
|
||||
|
||||
.roundbox {
|
||||
width: 90%;
|
||||
background-color: #656565;
|
||||
border-radius: 10px;
|
||||
padding: 15px 20px;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
|
||||
.roundbox h3 {
|
||||
margin-bottom: 10px;
|
||||
border-bottom: 1px groove #ACACAC;
|
||||
}
|
||||
|
||||
.roundbox table.yellowkeys tr td:last-child {
|
||||
color: #f8ef64;
|
||||
}
|
||||
|
||||
table.colortable {
|
||||
border-collapse: collapse;
|
||||
padding: 20px 0 20px 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
table.colortable td {
|
||||
border: 1px solid #000;
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
table.colortable thead tr td {
|
||||
color: #656565;
|
||||
background: #f8ef64;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
.roundbox table.yellowkeys tr td {
|
||||
padding: 5px 5px 0 0;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.mounthead h3 {
|
||||
float: left;
|
||||
margin-bottom: 0px;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.mountcont {
|
||||
border-top: 1px groove #ACACAC;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
ul.mountlist {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.mountlist li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
a.play {
|
||||
padding-left: 22px;
|
||||
margin-left: 25px;
|
||||
border: none;
|
||||
background: transparent url(/tunein.png) no-repeat scroll left center;
|
||||
background-size: auto 100%;
|
||||
}
|
||||
|
||||
a.auth {
|
||||
padding-left: 22px;
|
||||
margin-left: 25px;
|
||||
border: none;
|
||||
background: transparent url(/key.png) no-repeat scroll left top;
|
||||
background-size: auto 100%;
|
||||
}
|
||||
|
||||
/* Admin navigation */
|
||||
|
||||
ul.nav {
|
||||
margin: 0;
|
||||
padding: 5px 0 10px 0;
|
||||
clear: both;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
ul.nav li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
ul.nav li a {
|
||||
border: none;
|
||||
display: inline-block;
|
||||
padding: .2em .7em;
|
||||
margin-top: .2em;
|
||||
background-color: #333;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
ul.nav li a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
|
||||
#footer {
|
||||
border-top: 1px groove #ACACAC;
|
||||
margin-top: 20px;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
|
||||
body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.roundbox {
|
||||
width: auto;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.roundbox table.yellowkeys tr td {
|
||||
display: block;
|
||||
padding: 5px 5px 0 0;
|
||||
}
|
||||
|
||||
.roundbox table.yellowkeys tr td:last-child {
|
||||
margin-bottom: 5px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.scrolltable {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 320px) {
|
||||
|
||||
ul.nav, #menu ul {
|
||||
display: block;
|
||||
}
|
||||
|
||||
ul.nav li, #menu ul li {
|
||||
float: none;
|
||||
}
|
||||
|
||||
ul.nav li a, #menu ul li a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
ul.nav li + li, #menu ul li + li {
|
||||
border-top: 1px solid #ACACAC;
|
||||
}
|
||||
|
||||
a.play {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
BIN
web/tunein.png
BIN
web/tunein.png
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB |
Loading…
Reference in New Issue
Block a user