]> git.0d.be Git - panikweb.git/commitdiff
projects / panikweb.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: fbd0a7b)
Styling player
authorlaron <simon@surlaterre.org>
Thu, 15 Aug 2013 09:03:26 +0000 (11:03 +0200)
committerlaron <simon@surlaterre.org>
Thu, 15 Aug 2013 09:03:26 +0000 (11:03 +0200)
panikweb_templates/static/css/style.less patch | blob | history
panikweb_templates/templates/base.html patch | blob | history
panikweb_templates/templates/home.html patch | blob | history
panikweb_templates/templates/player/detail.html patch | blob | history

diff --git a/panikweb_templates/static/css/style.less b/panikweb_templates/static/css/style.less
index c67f5a1f4373589a21317f5b7644a9a1aae4b5d3..3598d9f0a05b91237350dba013992ffec45f512a 100644 (file)
--- a/panikweb_templates/static/css/style.less
+++ b/panikweb_templates/static/css/style.less
@@ -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 ****/
diff --git a/panikweb_templates/templates/base.html b/panikweb_templates/templates/base.html
index 825ddaf89c0dc3a1d4a8136bd522c606cdff2e07..cea0cfa53f11a17bbb5335a92db44a14ff8e2385 100644 (file)
--- a/panikweb_templates/templates/base.html
+++ b/panikweb_templates/templates/base.html
@@ -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" />
diff --git a/panikweb_templates/templates/home.html b/panikweb_templates/templates/home.html
index c9852d5d474f493fd45d030cc09f399fae183ee8..11f3487db66af4a025fdb2c80bbd567e0ffa974e 100644 (file)
--- a/panikweb_templates/templates/home.html
+++ b/panikweb_templates/templates/home.html
@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-
+{% block bodyID %}Home{% endblock %}
 {% block content %}
 
 <p>Plop</p>
diff --git a/panikweb_templates/templates/player/detail.html b/panikweb_templates/templates/player/detail.html
index a539d6afe31204a12cfdc1d1d4eff6bd7bb26d25..ffe2ed2d130ba52bc3199cda23a294a88be162d1 100644 (file)
--- a/panikweb_templates/templates/player/detail.html
+++ b/panikweb_templates/templates/player/detail.html
@@ -1,48 +1,39 @@
-
-    <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>
Site web de Radio Panik (base commune)