Skip to content

GitLab

Commit 7c3a3e83 authored by Simon Daron's avatar Simon Daron
Browse files

Styling player

parent fbd0a7b8
Hide whitespace changes
Inline Side-by-side
panikweb_templates/static/css/style.less
View file @ 7c3a3e83
......@@ -54,14 +54,28 @@
width: @wrapper-width;
.clearfix
}
.symbols, .symbol {
.symbol, .control {
font-family: RE06;
font-size: @l;
font-size: @xl;
}
.symbol:hover,.symbols:hover,.control:hover {
color: @blue;
.symbol:hover,.control:hover{
color: @blue !important;
}
.label {
text-transform: uppercase;
font-family: Reglo;
letter-spacing:1px;
font-size:@m;
background-color:@black;
position: absolute;
left:10px;
top:-5px;
color:white;
padding:5px 7px 0px 7px;
}
/*
.symbol {
font-family: RE06;
......@@ -80,7 +94,7 @@
}
*/
.block {display:block;}
button.control{background:transparent;border:none;}
button.control, button.symbol{background:transparent;border:none;margin:0;padding:0;}
nav.menu{
width:100%;
text-align: justify;
......@@ -103,7 +117,7 @@ body {
/*padding: 0px 10px;*/
clear: both;
}
#main {padding:1em;}
#main {padding:2em 1em;}
/* GLOBAL SITE NAV */
......@@ -180,17 +194,6 @@ body {
}
}
#player-top {
position: relative;
}
.direct {
text-transform: uppercase;
font-family: Reglo;
letter-spacing:1px;
font-size:@m;
}
.absolute {
background-color:@orange;
......@@ -204,17 +207,36 @@ body {
/**** Player ****/
#player{
color: @orange;
}
#player .label {
background:@orange;
}
#player .symbol{
color: @orange;
font-size: @xxl;
line-height: 80%;
}
#player .direct .control {
font-size: @xxxl;
position:absolute;
left:80px;
top:30px;
}
#player {
color: @orange;
#Home #player{
float: left;
width: @player-width;
}
#player .direct {
position:relative;
}
#player a, #player a:visited, #player a:active {
color: lighten(@orange, 20%);
}
}
#player .date {
font-size: @m;
......@@ -234,46 +256,48 @@ body {
}
#player .controls {
font-family: RE06;
font-size: @xxl;
line-height: 80%;
text-align: center;
margin: 0px 0 15px 0;
border-top: 3px solid @orange;
}
#player hr {
height: 1px;
border: 0;
border-top: 3px solid @orange;
}
#player .current{
margin-top:1em;
}
.previousNext {
margin: 40px 0 16px 0;
height: 22px;
}
margin: 40px 0 16px 0;
height: 22px;
}
.previousNext .symbol {
width:50px;
height: 22px;
background-color:@orange;
color:white;
font-size:@l;
text-align:center;
margin-right:2px;
padding-top:6px;
}
width:50px;
height: 22px;
background-color:@orange;
color:white;
font-size:@l;
text-align:center;
margin-right:2px;
padding-top:6px;
}
.playlist .item {
margin:20px 0;
}
min-height:60px;
margin:20px 0;
}
.playlist img {
border: 2px solid @orange;
float:left;
margin-right:10px;
margin-bottom:10px;
}
border: 2px solid @orange;
}
.playlist .item img{
float:left;
}
/**** Emission / Content ****/
......
panikweb_templates/templates/base.html
View file @ 7c3a3e83
......@@ -19,7 +19,7 @@
{% block extrascripts %}{% endblock %}
</head>
<body>
<body id="{% block bodyID %}{% endblock %}">
<div class="wrapper" id="metaNav">
<input id="search-form" type="text" />
......
panikweb_templates/templates/home.html
View file @ 7c3a3e83
{% extends "base.html" %}
{% block bodyID %}Home{% endblock %}
{% block content %}
<p>Plop</p>
......
panikweb_templates/templates/player/detail.html
View file @ 7c3a3e83
<div id="player">
<div class="player-top">
<div class="symbol">G</div>
<div class="direct">en direct</div>
<div class="playlist img"><img src="http://placehold.it/210X130"/></div>
<div id="player">
<div class="direct">
<button class="control play symbol">G</button>
<div class="label">en direct</div>
<div class="playlist img">
<img src="http://placehold.it/210X130"/>
</div>
</div>
<div class="cf"></div>
<h4>Elles en parlent encore</h4>
<h2>Mardi 2 Février 2013</h2>
<h2 class="extra-margin time">07:00 - 09:00</h2>
<!--<div class="previousNext">
<span class="symbol">K</span>
<span class="symbol">K</span>
</div>-->
<div class="controls">
<span>H</span><span>E</span><span>A</span><span>D</span><span>F</span>
<div class="current">
<h4>Elles en parlent encore</h4>
<h2>Mardi 2 Février 2013</h2>
<h2 class="extra-margin time">07:00 - 09:00</h2>
</div>
<div class="playlist">
<div class="controls">
<button class="symbol">H</button>
<button class="symbol next">E</button>
<button class="symbol play-pause">A</button>
<button class="symbol previous">D</button>
<button class="symbol mute">F</button>
</div>
<div class="item">
<img src="http://placehold.it/50X50" />
<h5>The croissant fertile</h5>
<p>The sound of the RCA electronic music synthesizer</p>
</div>
<div class="item">
<img src="http://placehold.it/50X50" />
<h5>The croissant fertile</h5>
<p>The sound of the RCA electronic music synthesizer</p>
</div>
<div class="item">
<img src="http://placehold.it/50X50" />
<h5>The croissant fertile</h5>
<p>The sound of the RCA electronic music synthesizer</p>
</div>
<div class="item">
<img src="http://placehold.it/50X50" />
<h5>The croissant fertile</h5>
<p>The sound of the RCA electronic music synthesizer</p>
</div>
<div class="item">
<img src="http://placehold.it/50X50" />
<h5>The croissant fertile</h5>
<p>The sound of the RCA electronic music synthesizer</p>
</div>
<div class="item">
<img src="http://placehold.it/50X50" />
<h5>The croissant fertile</h5>
<p>The sound of the RCA electronic music synthesizer</p>
</div>
</div>
</div>
</div>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment