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
@ -5,25 +5,42 @@
|
|||||||
<xsl:template match="/node()">
|
<xsl:template match="/node()">
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title><xsl:value-of select="$title"/> — Icecast Streaming Media Server</title>
|
<meta charset="utf-8" />
|
||||||
<link rel="stylesheet" type="text/css" href="style.css" />
|
<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="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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1 id="header">Icecast <xsl:value-of select="$title"/></h1>
|
<!-- Header and menu -->
|
||||||
<!--index header menu -->
|
<header>
|
||||||
<div id="menu">
|
<nav id="main-nav" role="primary">
|
||||||
|
<a href="/" id="branding">
|
||||||
|
<img src="icecast.png" alt="" />
|
||||||
|
<h1>Icecast Server</h1>
|
||||||
|
</a>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="admin/">Administration</a></li>
|
<li><a href="#">Status</a></li>
|
||||||
<li><a href="status.xsl">Server Status</a></li>
|
<li><a href="#">Version</a></li>
|
||||||
<li><a href="server_version.xsl">Version</a></li>
|
<li class="right"><a href="#">Administration</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</nav>
|
||||||
<!--end index header menu -->
|
</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" />
|
<xsl:call-template name="content" namespace="http://www.w3.org/1999/xhtml" />
|
||||||
<div id="footer">
|
</main>
|
||||||
Support icecast development at <a href="http://www.icecast.org">www.icecast.org</a>
|
|
||||||
</div>
|
<!-- Footer -->
|
||||||
|
<footer>
|
||||||
|
<p>Support icecast development at <a href="http://icecast.org">icecast.org</a></p>
|
||||||
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
</xsl:template>
|
</xsl:template>
|
||||||
|
|||||||
@ -4,28 +4,13 @@ webdir = $(pkgdatadir)/web
|
|||||||
|
|
||||||
nobase_web_DATA = \
|
nobase_web_DATA = \
|
||||||
status.xsl \
|
status.xsl \
|
||||||
favicon.ico \
|
|
||||||
icecast.png \
|
|
||||||
style.css \
|
|
||||||
auth.xsl \
|
auth.xsl \
|
||||||
server_version.xsl \
|
server_version.xsl \
|
||||||
tunein.png \
|
|
||||||
key.png \
|
|
||||||
status-json.xsl \
|
status-json.xsl \
|
||||||
xml2json.xslt \
|
xml2json.xslt \
|
||||||
|
favicon.ico \
|
||||||
assets/css/style.css \
|
assets/css/style.css \
|
||||||
assets/font/FiraMono-Bold.eot \
|
assets/img/icecast.png
|
||||||
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
|
|
||||||
|
|
||||||
|
|
||||||
EXTRA_DIST = $(nobase_web_DATA)
|
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 |
@ -13,28 +13,24 @@
|
|||||||
-->
|
-->
|
||||||
</xsl:text>
|
</xsl:text>
|
||||||
<!--mount point stats-->
|
<!--mount point stats-->
|
||||||
|
<h2>Status</h2>
|
||||||
|
<xsl:choose>
|
||||||
|
<xsl:when test="source">
|
||||||
<xsl:for-each select="source">
|
<xsl:for-each select="source">
|
||||||
<xsl:choose>
|
<xsl:choose>
|
||||||
<xsl:when test="listeners">
|
<xsl:when test="listeners">
|
||||||
<div class="roundbox">
|
<section class="box">
|
||||||
<div class="mounthead">
|
<h3 class="box_title">Mountpoint <code><xsl:value-of select="@mount" /></code></h3>
|
||||||
<h3 class="mount">Mount Point <xsl:value-of select="@mount" /></h3>
|
|
||||||
<div class="right">
|
<!-- Playlists section -->
|
||||||
<xsl:choose>
|
<h4>Play stream</h4>
|
||||||
<xsl:when test="authenticator">
|
<ul class="playlists">
|
||||||
<a class="auth" href="/auth.xsl">Login</a>
|
<li><a href="{@mount}">Direct</a></li>
|
||||||
</xsl:when>
|
<li><a href="{@mount}.m3u">M3U</a></li>
|
||||||
<xsl:otherwise>
|
<li><a href="{@mount}.xspf">XSPF</a></li>
|
||||||
<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>
|
</ul>
|
||||||
</xsl:otherwise>
|
|
||||||
</xsl:choose>
|
<!-- Player -->
|
||||||
</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'))">
|
<xsl:if test="server_type and ((server_type = 'application/ogg') or (server_type = 'audio/ogg') or (server_type = 'audio/webm'))">
|
||||||
<div class="audioplayer">
|
<div class="audioplayer">
|
||||||
<audio controls="controls" preload="none">
|
<audio controls="controls" preload="none">
|
||||||
@ -42,7 +38,11 @@
|
|||||||
</audio>
|
</audio>
|
||||||
</div>
|
</div>
|
||||||
</xsl:if>
|
</xsl:if>
|
||||||
<table class="yellowkeys">
|
|
||||||
|
<!-- Stream info and stats -->
|
||||||
|
<h4>Further information</h4>
|
||||||
|
<div class="mountcont">
|
||||||
|
<table class="table-keys">
|
||||||
<tbody>
|
<tbody>
|
||||||
<xsl:if test="server_name">
|
<xsl:if test="server_name">
|
||||||
<tr>
|
<tr>
|
||||||
@ -158,12 +158,19 @@
|
|||||||
</table>
|
</table>
|
||||||
</xsl:if>
|
</xsl:if>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</xsl:when>
|
</xsl:when>
|
||||||
<xsl:otherwise>
|
<xsl:otherwise>
|
||||||
<h3><xsl:value-of select="@mount" /> - Not Connected</h3>
|
<h3><xsl:value-of select="@mount" /> - Not Connected</h3>
|
||||||
</xsl:otherwise>
|
</xsl:otherwise>
|
||||||
</xsl:choose>
|
</xsl:choose>
|
||||||
</xsl:for-each>
|
</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:template>
|
||||||
</xsl:stylesheet>
|
</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