KevinMidboe/zoff
1
0
Fork 0
mirror of https://github.com/KevinMidboe/zoff.git synced 2025-10-29 18:00:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Styled controls and nav

Browse Source
This commit is contained in:
Nicolas A. Tonne
2015-04-15 20:59:43 +02:00
parent e0b0b01f5a
commit 7deb54fd01
2 changed files with 38 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
index.php
View File

@@ -14,45 +14,43 @@
</head> </head>
<body> <body>
<header> <header>
<div class="navbar-fixed"> <nav id="nav">
<nav id="nav"> <div class="nav-wrapper">
<div class="nav-wrapper"> <a href="//zoff.no" class="brand-logo hide-on-small-only">
<a href="//zoff.no" class="brand-logo hide-on-small-only"> <img id="zicon" src="static/images/squareicon_small.png" alt="zöff" title="Zöff">
<img id="zicon" src="static/images/squareicon_small.png" alt="zöff" title="Zöff"> </a>
</a> <div class="brand-logo">
<div class="brand-logo"> <a href="//zoff.no" class="hide-on-med-and-up">Zöff</a>
<a href="//zoff.no" class="hide-on-med-and-up">Zöff</a> <span class="hide-on-med-and-up">/</span>
<span class="hide-on-med-and-up">/</span> <span id="chan" class="chan hide" title="Show big URL" onclick="show()"><?php echo(ucfirst($list));?></span>
<span id="chan" class="chan hide" title="Show big URL" onclick="show()"><?php echo(ucfirst($list));?></span>
</div>
<ul class="right">
<li>
<a class="nav-btn" href="#" id="skip" onclick="skip();">
<i class="mdi-av-skip-next"></i>
<span class="hover-text">Skip</span>
</a>
</li>
<li>
<a class="nav-btn" href="#" data-activates="settings-bar" id="settings">
<i class="mdi-action-settings"></i>
<span class="hover-text">Conf</span>
</a>
</li>
</ul>
<ul class="side-nav" id="settings-bar">
<?php include("php/panel.php");?>
</ul>
<form id="searchform" onsubmit="return false">
<div>
<input id="search" class="search_input" type="search" required title="Search for songs..." spellcheck="false" placeholder="Search" onsubmit="null;" autocomplete="off">
<!--<label for="search"><i class="mdi-action-search"></i></label>
<i class="mdi-navigation-close"></i>-->
</div>
</form>
<div id="results"></div>
</div> </div>
</nav> <ul class="right">
</div> <li>
<a class="nav-btn" href="#" id="skip" onclick="skip();">
<i class="mdi-av-skip-next"></i>
<span class="hover-text">Skip</span>
</a>
</li>
<li>
<a class="nav-btn" href="#" data-activates="settings-bar" id="settings">
<i class="mdi-action-settings"></i>
<span class="hover-text">Conf</span>
</a>
</li>
</ul>
<ul class="side-nav" id="settings-bar">
<?php include("php/panel.php");?>
</ul>
<form id="searchform" onsubmit="return false">
<div>
<input id="search" class="search_input" type="search" required title="Search for songs..." spellcheck="false" placeholder="Search" onsubmit="null;" autocomplete="off">
<!--<label for="search"><i class="mdi-action-search"></i></label>
<i class="mdi-navigation-close"></i>-->
</div>
</form>
<div id="results"></div>
</div>
</nav>
</header> </header>
<main class="container center-align main"> <main class="container center-align main">
<div class="row"> <div class="row">

14
static/css/controlstyle.css
View File

@@ -3,16 +3,8 @@
{ {
opacity:0; opacity:0;
height:5%; height:5%;
background-color:rgba(255, 255, 255, 0.25); background-color:rgba(255, 255, 255, 0.1);
width:100%; width:100%;
transition: 0.75s -webkit-filter linear;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-transition:opacity 1s;
transition: opacity 1s;
} }
#playpause, #duration, #volume-button #playpause, #duration, #volume-button
@@ -28,7 +20,7 @@
#playpause:hover, #volume-button:hover, #fullscreen:hover #playpause:hover, #volume-button:hover, #fullscreen:hover
{ {
color:#2D2D2D; color:rgba(255,255,255,0.5);
} }
#fullscreen #fullscreen
@@ -94,7 +86,6 @@
.play .play
{ {
/*background: no-repeat url(player.webp) 0 -496px;*/
background-size: auto; background-size: auto;
width: 55px; width: 55px;
height: 27px; height: 27px;
@@ -102,7 +93,6 @@
.pause .pause
{ {
/*background: no-repeat url(player.webp) 0 -2139px;*/
background-size: auto; background-size: auto;
width: 55px; width: 55px;
height: 27px; height: 27px;