yWeb: small changes in NI yInfo; use material colors

Origin commit data
------------------
Branch: ni/coolstream
Commit: fbcf452a10
Author: vanhofen <vanhofen@gmx.de>
Date: 2018-11-04 (Sun, 04 Nov 2018)

Origin message was:
------------------
- yWeb: small changes in NI yInfo; use material colors

------------------
No further description and justification available within origin commit message!

------------------
This commit was generated by Migit
This commit is contained in:
vanhofen
2018-11-04 23:17:43 +01:00
parent 2bd71bec29
commit d8be0f3b93
3 changed files with 25 additions and 29 deletions

View File

@@ -1,5 +1,4 @@
installdir = $(PRIVATE_HTTPDDIR)/info installdir = $(PRIVATE_HTTPDDIR)/info
# NI-yWeb
install_DATA = index.html \ install_DATA = index.html \
page.yhtm yinfo.yhtm

View File

@@ -4,7 +4,7 @@
<head> <head>
<meta http-equiv="expires" content="Thu, 01 Jan 1970 00:01:00 GMT"> <meta http-equiv="expires" content="Thu, 01 Jan 1970 00:01:00 GMT">
<meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="refresh" content="0; URL=page.yhtm"> <meta http-equiv="refresh" content="0; URL=yinfo.yhtm">
<title></title> <title></title>
</head> </head>

View File

@@ -17,7 +17,7 @@
{=var-set:volume={=script:Y_NI_Tools getline /tmp/lcd/volume=}=} {=var-set:volume={=script:Y_NI_Tools getline /tmp/lcd/volume=}=}
{=include-block:Y_NI_Blocks.txt;head=} {=include-block:Y_NI_Blocks.txt;head=}
<meta http-equiv="refresh" content="15; URL=page.yhtm"> <meta http-equiv="refresh" content="15; URL=yinfo.yhtm">
<script type="text/javascript"> <script type="text/javascript">
//<![CDATA[ //<![CDATA[
jQuery(document).ready(function(){ jQuery(document).ready(function(){
@@ -31,15 +31,15 @@ jQuery(document).ready(function(){
jQuery('#_progress_graph').css({ width: "{=var-get:progress=}%"}); jQuery('#_progress_graph').css({ width: "{=var-get:progress=}%"});
jQuery('#clock').html(hours+':'+minutes); jQuery('#clock').html(hours+':'+minutes);
jQuery('html head').find('title').text("yWeb - NI - Info"); jQuery('html head').find('title').text("yInfo");
}); });
//-->//]]> //-->//]]>
</script> </script>
<style type="text/css"> <style type="text/css">
/*<![CDATA[*/ /*<![CDATA[*/
body { body {
background-color: #000; background-color: #212121;
color: #c0c0c0; color: #bdbdbd;
} }
.NIinfo { .NIinfo {
width: 780px; width: 780px;
@@ -56,23 +56,23 @@ body {
margin: 10px 0; margin: 10px 0;
} }
.NIinfo .status span { .NIinfo .status span {
color: #444; color: #424242;
margin-left: 10px; margin-left: 10px;
letter-spacing: 4px; letter-spacing: 4px;
} }
.NIinfo .top { .NIinfo .top {
} }
.NIinfo .status .ecm { .NIinfo .status .ecm {
color: {=if-equal:{=var-get:mode_ecm=}~on~orange~#444=} color: {=if-equal:{=var-get:mode_ecm=}~on~#ff9800~#424242=}
} }
.NIinfo .status .timer { .NIinfo .status .timer {
color: {=if-equal:{=var-get:mode_timer=}~on~yellow~#444=} color: {=if-equal:{=var-get:mode_timer=}~on~#ffeb3b~#424242=}
} }
.NIinfo .status .rec { .NIinfo .status .rec {
color: {=if-equal:{=var-get:mode_rec=}~on~red~#444=} color: {=if-equal:{=var-get:mode_rec=}~on~#f44336~#424242=}
} }
.NIinfo .status .ts { .NIinfo .status .ts {
color: {=if-equal:{=var-get:mode_tshift=}~on~red~#444=} color: {=if-equal:{=var-get:mode_tshift=}~on~#f44336~#424242=}
} }
.NIinfo .logo, .NIinfo .logo,
.NIinfo .event { .NIinfo .event {
@@ -97,23 +97,20 @@ body {
} }
.NIinfo ._outer_graph { .NIinfo ._outer_graph {
height: 45px; height: 45px;
border: 1px solid #333; background-color: #424242;
border-radius: 10px;
margin-left: -1px;
} }
.NIinfo ._inner_graph { .NIinfo ._inner_graph {
float: left; float: left;
background-color: #c0c0c0; background-color: #bdbdbd;
width: 0; width: 0;
height: 100%; height: 100%;
border-radius: 9px;
} }
.NIinfo .percent { .NIinfo .percent {
text-align: center; text-align: center;
position: absolute; position: absolute;
margin-top: -56px; margin-top: 0;
color: #909090; color: #bdbdbd;
text-shadow: 0 -1px #000, 1px 0 #000, 0 1px #000, -1px 0 #000, 0 0 3px #000; text-shadow: 0 -1px #212121, 1px 0 #212121, 0 1px #212121, -1px 0 #212121;
} }
.NIinfo .bottom { .NIinfo .bottom {
} }
@@ -125,7 +122,7 @@ body {
<div class="NIinfo"> <div class="NIinfo">
<div class="fullwidth status top"> <div class="fullwidth status top">
<div class="left"> <div class="left">
STATUS: <span class="ecm">ECM</span> <span class="ecm">ECM</span>
</div> </div>
<div class="right"> <div class="right">
<span class="timer">TIMER</span> <span class="timer">TIMER</span>
@@ -147,13 +144,13 @@ body {
</div> </div>
<div class="fullwidth status _outer_graph"> <div class="fullwidth status _outer_graph">
<div id="_progress_graph" class="_inner_graph"></div> <div id="_progress_graph" class="_inner_graph"></div>
</div>
<div class="fullwidth status percent"> <div class="fullwidth status percent">
{=if-equal:{=var-get:progress=}~0~ {=if-equal:{=var-get:progress=}~0~
~ ~
{=var-get:progress=} % {=var-get:progress=} %
=} =}
</div> </div>
</div>
<div class="fullwidth status bottom"> <div class="fullwidth status bottom">
<div class="left" id="clock"> <div class="left" id="clock">
00:00 00:00