From 89cafe1f6c5e085979ab4a26332f333a07d6301d Mon Sep 17 00:00:00 2001
From: Vincent <vincent@enhydra.fr>
Date: Tue, 24 Nov 2020 15:44:17 +0100
Subject: [PATCH] .

---
 .idea/workspace.xml  |  30 +--
 js/home.js           |   8 +-
 scripts/lib/lib.php  |  21 +-
 scripts/lib/tmdb.php |  20 +-
 style/style.css      | 255 ++++++++++++++++++++
 style/style.less     | 538 +++++++++++++++++++++++--------------------
 6 files changed, 594 insertions(+), 278 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 6d14800..a2360b8 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -3,8 +3,11 @@
   <component name="ChangeListManager">
     <list default="true" id="352ce63a-b52a-41a2-979b-becda7920939" name="Default" comment=".">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/scripts/lib/mediarasp.php" beforeDir="false" afterPath="$PROJECT_DIR$/scripts/lib/mediarasp.php" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/scripts/lib/remoteinfos.php" beforeDir="false" afterPath="$PROJECT_DIR$/scripts/lib/remoteinfos.php" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/js/home.js" beforeDir="false" afterPath="$PROJECT_DIR$/js/home.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/scripts/lib/lib.php" beforeDir="false" afterPath="$PROJECT_DIR$/scripts/lib/lib.php" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/scripts/lib/tmdb.php" beforeDir="false" afterPath="$PROJECT_DIR$/scripts/lib/tmdb.php" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/style/style.css" beforeDir="false" afterPath="$PROJECT_DIR$/style/style.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/style/style.less" beforeDir="false" afterPath="$PROJECT_DIR$/style/style.less" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -907,14 +910,8 @@
       <workItem from="1605973078856" duration="4741000" />
       <workItem from="1606049944658" duration="4067000" />
       <workItem from="1606074617916" duration="1140000" />
-      <workItem from="1606112202214" duration="661000" />
-    </task>
-    <task id="LOCAL-00362" summary=".">
-      <created>1604253174045</created>
-      <option name="number" value="00362" />
-      <option name="presentableId" value="LOCAL-00362" />
-      <option name="project" value="LOCAL" />
-      <updated>1604253174045</updated>
+      <workItem from="1606112202214" duration="1742000" />
+      <workItem from="1606161139379" duration="7238000" />
     </task>
     <task id="LOCAL-00363" summary=".">
       <created>1604304768803</created>
@@ -1252,7 +1249,14 @@
       <option name="project" value="LOCAL" />
       <updated>1606074001062</updated>
     </task>
-    <option name="localTasksCounter" value="411" />
+    <task id="LOCAL-00411" summary=".">
+      <created>1606116203597</created>
+      <option name="number" value="00411" />
+      <option name="presentableId" value="LOCAL-00411" />
+      <option name="project" value="LOCAL" />
+      <updated>1606116203597</updated>
+    </task>
+    <option name="localTasksCounter" value="412" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -1299,12 +1303,12 @@
     </state>
     <state x="740" y="229" key="#com.jetbrains.php.refactoring.extractMethod.PhpExtractMethodDialog#function0/0.0.1707.920@0.0.1707.920" timestamp="1604146905948" />
     <state x="1110" y="259" key="#com.jetbrains.php.refactoring.extractMethod.PhpExtractMethodDialog#function0/0.0.2560.1040@0.0.2560.1040" timestamp="1605437484620" />
-    <state x="198" y="0" width="737" height="502" key="CommitChangelistDialog2" timestamp="1606073997479">
+    <state x="198" y="0" width="737" height="502" key="CommitChangelistDialog2" timestamp="1606116200017">
       <screen x="0" y="0" width="2560" height="1040" />
     </state>
     <state x="132" y="0" width="737" height="502" key="CommitChangelistDialog2/0.0.1707.920@0.0.1707.920" timestamp="1605086955514" />
     <state x="701" y="75" key="CommitChangelistDialog2/0.0.1920.1160@0.0.1920.1160" timestamp="1605188136787" />
-    <state x="198" y="0" width="745" height="567" key="CommitChangelistDialog2/0.0.2560.1040@0.0.2560.1040" timestamp="1606073997479" />
+    <state x="198" y="0" width="745" height="567" key="CommitChangelistDialog2/0.0.2560.1040@0.0.2560.1040" timestamp="1606116200017" />
     <state x="952" y="244" key="FileChooserDialogImpl" timestamp="1605726960903">
       <screen x="0" y="0" width="2560" height="1040" />
     </state>
diff --git a/js/home.js b/js/home.js
index 61eb1f3..50eb430 100644
--- a/js/home.js
+++ b/js/home.js
@@ -156,7 +156,13 @@ $(function () {
     $(document).on(clickevent, '.back', function () {
         window.history.back();
         return false;
-    })
+    });
+
+    $(document).on(clickevent, 'accordion>a', function () {
+        $(this).closest('accordion').toggleClass('closed');
+        resize();
+        return false;
+    });
 
     $(document).on(clickevent, 'a.ajax', function () {
         displayLoader($(this));
diff --git a/scripts/lib/lib.php b/scripts/lib/lib.php
index e7fd0b8..6d08054 100644
--- a/scripts/lib/lib.php
+++ b/scripts/lib/lib.php
@@ -145,13 +145,24 @@ function shortcutDir($allshortcuts)
             $section .= '<div class="fit">';
         }
         foreach ($shortcuts as $k => $s) {
-
-            if ($s['type'] == 'clear') {
+            if ($s['type'] == 'accordion-end') {
+                $html = '</accordion>';
+            } else if ($s['type'] == 'accordion') {
+                $html = '<accordion class="accordion ' . (isset($s['closed']) && $s['closed'] ? 'closed' : '') . '"><a><span>' . $s['label'] . '</span></a>';
+            }
+            if ($s['type'] == 'clear' || $s['type'] == 'accordion' || $s['type'] == 'accordion-end') {
                 if ($i % 2 == 1) {
                     $section .= '</div>';
                     $i = 0;
                 }
-                $section .= '<div class="clearcol"></div>';
+
+                if ($s['type'] === 'clear') {
+                    $section .= '<div class="clearcol"></div>';
+                } else if ($s['type'] === 'accordion') {
+                    $section .= '<accordion class="accordion ' . (isset($s['closed']) && $s['closed'] ? 'closed' : '') . '"><a><span>' . $s['label'] . '</span></a>';
+                } else if ($s['type'] === 'accordion-end') {
+                    $section .= '</accordion>';
+                }
 
                 continue;
             }
@@ -442,9 +453,9 @@ function volume($volume, $increase = '')
     switch ($d) {
         case 'shield':
             if ($increase == '-') {
-                return shieldKey('volume-down',$device);
+                return shieldKey('volume-down', $device);
             } else {
-                return shieldKey('volume-up',$device);
+                return shieldKey('volume-up', $device);
             }
         case 'raspberry':
         case 'raspberrypi':
diff --git a/scripts/lib/tmdb.php b/scripts/lib/tmdb.php
index 64d0719..463138d 100644
--- a/scripts/lib/tmdb.php
+++ b/scripts/lib/tmdb.php
@@ -232,9 +232,14 @@ class tvShowLibrary extends mediaLibrary
 
         $seasons = $tvShow['data']['seasons'];
 
-        $seasons = array_reverse($seasons, true);
+        if (isset($seasons[0]['season_number']) && !$seasons[0]['season_number']) {
+            $s = array_shift($seasons);
+            array_push($seasons, $s);
+        }
 
         foreach ($seasons as $season) {
+            $closed = false;
+            $missing = false;
             $ns = $this->_n($season['season_number'], 's');
             if ($season['season_number'] == 0) {
                 if (file_exists($tvShow['dir'] . '/S00')) {
@@ -242,6 +247,7 @@ class tvShowLibrary extends mediaLibrary
                 } else {
                     $dir = $tvShow['dir'] . '/Specials';
                 }
+                $closed = true;
             } else {
                 $dir = $tvShow['dir'] . '/' . $ns;
             }
@@ -250,8 +256,9 @@ class tvShowLibrary extends mediaLibrary
                 continue;
             }
 
-            $res['subs']['sub-' . $subname][] = ['type' => 'clear'];
-            $res['subs']['sub-' . $subname][] = ['label' => $ns, 'type' => 'separator'];
+            $res['subs']['sub-' . $subname][] = ['label' => $ns, 'type' => 'accordion'];
+            $startIndex = count($res['subs']['sub-' . $subname]) - 2;
+            $lastSeen = true;
             for ($i = 1; $i <= $season['episode_count']; $i++) {
                 $es = $this->_n($i, 'e');
                 $exists = false;
@@ -272,10 +279,17 @@ class tvShowLibrary extends mediaLibrary
                 if ($exists) {
                     $path = $this->_path($exists);
                     $res['subs']['sub-' . $subname][] = ['label' => $es, 'type' => 'media', 'srt' => hasSRT($path), 'seen' => $this->_seen($path), 'path' => $path];
+                    $missing = false;
                 } else {
                     $res['subs']['sub-' . $subname][] = ['label' => $es, 'type' => 'missing'];
                 }
+                $lastSeen = $this->_seen($path);
+            }
+            if ($lastSeen || $missing) {
+                $closed = true;
             }
+            $res['subs']['sub-' . $subname][$startIndex]['closed'] = $closed;
+            $res['subs']['sub-' . $subname][] = ['type' => 'accordion-end'];
         }
     }
 
diff --git a/style/style.css b/style/style.css
index 478e3e8..61a8eec 100644
--- a/style/style.css
+++ b/style/style.css
@@ -389,6 +389,261 @@ section .col > * span {
 section .col > * span .fa {
   font-size: 3em;
 }
+section accordion {
+  display: inline-block;
+  overflow: hidden;
+}
+section accordion > a {
+  background-color: rgba(255, 255, 255, 0.5);
+  width: 6em;
+  height: 6em;
+  margin: 0.2em;
+  display: inline-block;
+  border-radius: 0.1em;
+  color: #000000;
+  text-transform: uppercase;
+  text-decoration: none;
+  text-align: center;
+  vertical-align: middle;
+  padding: 0 0.5em 0 0.5em;
+  font-weight: 700;
+  overflow: hidden;
+  position: relative;
+  width: 2.5em;
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.5);
+  height: 12.4em;
+}
+section accordion > a img {
+  max-width: 100%;
+}
+section accordion > a .sw-corner {
+  position: absolute;
+  left: 0.7em;
+  bottom: 0.6em;
+}
+section accordion > a .sw-corner span {
+  margin-right: 0.05em;
+}
+section accordion > a.poster {
+  background-size: 100% 100%;
+  background-position: 50% 50%;
+}
+section accordion > a.poster:after,
+section accordion > a.poster:before {
+  mix-blend-mode: exclusion;
+  color: #fff;
+}
+section accordion > a .fav {
+  position: absolute;
+  bottom: 0.5em;
+  left: 0.5em;
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  font-size: 0.5em;
+}
+section accordion > a .fav.fav-on:before {
+  font-family: Font Awesome\ 5 Pro;
+  font-weight: 400;
+  content: "\f005";
+}
+section accordion > a .fav.fav-off {
+  display: none;
+}
+section accordion > a .loading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url(/images/loader.svg);
+  background-size: 100% 100%;
+  z-index: 2;
+  display: block;
+}
+section accordion > a[data-menu]:after {
+  position: absolute;
+  content: "+";
+  font-family: Arial, Helvetica, sans-serif;
+  right: 0.2em;
+  bottom: -0.1em;
+  font-weight: 400;
+}
+section accordion > a.media:after,
+section accordion > a.music:after,
+section accordion > a.shield:after,
+section accordion > a.netflix:after,
+section accordion > a.play:after {
+  position: absolute;
+  content: "\f04b";
+  font-family: Font Awesome\ 5 Pro;
+  right: 0.7em;
+  bottom: 0.6em;
+  font-size: 0.5em;
+}
+section accordion > a[data-seen]:before {
+  position: absolute;
+  content: "\f06e";
+  font-family: Font Awesome\ 5 Pro;
+  right: 0.7em;
+  top: 0.6em;
+  font-size: 0.5em;
+}
+section accordion > a.back:before {
+  position: absolute;
+  content: "\f060";
+  font-family: Font Awesome\ 5 Pro;
+  left: 0.2em;
+  top: 0.2em;
+  font-size: 0.6em;
+}
+section accordion > a.missing {
+  color: #aaa;
+  opacity: 0.5;
+}
+section accordion > a.info {
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+section accordion > a.time {
+  position: relative;
+}
+section accordion > a.time .hour {
+  font-size: 2.2em;
+}
+section accordion > a.time .date {
+  position: absolute;
+  bottom: 0.2em;
+  left: 0;
+  text-align: center;
+  width: 100%;
+  font-size: 0.6em;
+}
+section accordion > a.velib .dtime:before {
+  font-family: Font Awesome\ 5 Pro;
+  content: "\f206";
+  margin-right: 0.3em;
+}
+section accordion > a.velib li {
+  text-align: left;
+  list-style: none;
+  font-size: 0.55em;
+  margin-top: 0.3em;
+  clear: both;
+}
+section accordion > a.velib li .l {
+  max-width: 7.2em;
+  display: inline-block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  vertical-align: top;
+}
+section accordion > a.velib li .n {
+  float: right;
+  vertical-align: top;
+  margin-left: 0.2em;
+  border-radius: 50%;
+  display: inline-block;
+  height: 1.6em;
+  width: 1.6em;
+  border: 0.1em solid #fff;
+  text-align: center;
+  position: relative;
+  line-height: 1.4em;
+  font-size: 0.8em;
+  color: #fff;
+}
+section accordion > a.velib li .n.green {
+  background-color: #a2b43a;
+}
+section accordion > a.velib li .n.blue {
+  background-color: #59b0e3;
+}
+section accordion > a.traffic {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+section accordion > a.traffic ul {
+  padding: 0.1em 0.5em;
+  text-align: left;
+}
+section accordion > a.traffic ul li {
+  list-style: none;
+  text-align: right;
+  position: relative;
+  text-transform: lowercase;
+}
+section accordion > a.traffic ul li:before {
+  font-family: Font Awesome\ 5 Pro;
+  position: absolute;
+  top: 0.2em;
+  left: 0;
+  width: 1.2em;
+  display: inline-block;
+  text-align: center;
+}
+section accordion > a.traffic ul li.car:before {
+  content: "\f1b9";
+}
+section accordion > a.traffic ul li.bike:before {
+  content: "\f206";
+}
+section accordion > a.traffic ul li.subway:before {
+  content: "\f239";
+}
+section accordion > a.traffic div {
+  font-size: 0.6em;
+}
+section accordion > a.traffic div span {
+  font-size: 1em !important;
+}
+section accordion > a.weather {
+  position: relative;
+}
+section accordion > a.weather .temp {
+  font-size: 1.3em;
+  text-align: center;
+  display: block;
+}
+section accordion > a.weather .icons span {
+  width: 50%;
+  display: inline-block;
+  text-align: left;
+}
+section accordion > a.weather .icons span.icon-night {
+  text-align: right;
+}
+section accordion > a.weather .icons span img {
+  width: 2.2em;
+  height: 2.2em;
+  position: relative;
+  top: -0.3em;
+}
+section accordion > a.weather .temperatures {
+  font-size: 0.7em;
+}
+section accordion > a.weather .temperatures span {
+  width: 50%;
+  display: inline-block;
+  text-align: center;
+}
+section accordion > a.weather .temperatures span.temp-min {
+  color: cornflowerblue;
+}
+section accordion > a.weather .temperatures span.temp-max {
+  color: orangered;
+}
+section accordion > a span {
+  display: inline-block;
+}
+section accordion > a span .fa {
+  font-size: 3em;
+}
+section accordion.closed {
+  max-width: 2.9em;
+}
 .screensaver {
   display: none;
 }
diff --git a/style/style.less b/style/style.less
index caf6e6b..9e446f5 100644
--- a/style/style.less
+++ b/style/style.less
@@ -62,7 +62,7 @@ body {
   bottom: @o;
   width: @w;
   height: @w;
-  background-color:var(--theme-color);
+  background-color: var(--theme-color);
   border-radius: 50% 50%;
   z-index: 2;
 
@@ -176,319 +176,344 @@ section {
     vertical-align: top;
 
     > * {
-      background-color: rgba(255, 255, 255, 0.5);
-      width: 6em;
-      height: 6em;
-      margin: 0.2em;
-      display: inline-block;
-      border-radius: 0.1em;
-      color: #000000;
-      text-transform: uppercase;
-      text-decoration: none;
-      text-align: center;
-      vertical-align: middle;
-      padding: 0 0.5em 0 0.5em;
-      font-weight: 700;
-      overflow: hidden;
-      position: relative;
-
-      img {
-        max-width: 100%;
-      }
+      .shortcut();
+    }
+  }
 
-      .sw-corner {
-        position: absolute;
-        left: 0.7em;
-        bottom: 0.6em;
+  accordion {
+    display: inline-block;
+    overflow: hidden;
+
+    > a {
+      .shortcut();
+      width: 2.5em;
+      color: #fff;
+      background-color: rgba(0, 0, 0, 0.5);
+      height: 12.4em;
+    }
 
-        span {
-          margin-right: 0.05em;
-        }
+    &.closed {
+      max-width: 2.9em;
+    }
+  }
 
-      }
 
-      &.poster {
-        background-size: 100% 100%;
-        background-position: 50% 50%;
+}
 
-        &:after, &:before {
-          mix-blend-mode: exclusion;
-          color: #fff;
-        }
-      }
+.shortcut() {
+
+  background-color: rgba(255, 255, 255, 0.5);
+  width: 6em;
+  height: 6em;
+  margin: 0.2em;
+  display: inline-block;
+  border-radius: 0.1em;
+  color: #000000;
+  text-transform: uppercase;
+  text-decoration: none;
+  text-align: center;
+  vertical-align: middle;
+  padding: 0 0.5em 0 0.5em;
+  font-weight: 700;
+  overflow: hidden;
+  position: relative;
 
-      .fav {
-        position: absolute;
-        bottom: 0.5em;
-        left: 0.5em;
-        display: inline-block;
-        width: 1em;
-        height: 1em;
-        font-size: 0.5em;
+  img {
+    max-width: 100%;
+  }
 
-        &.fav-on:before {
-          font-family: @font-awesome;
-          font-weight: 400;
-          content: "\f005"
-        }
+  .sw-corner {
+    position: absolute;
+    left: 0.7em;
+    bottom: 0.6em;
 
-        &.fav-off {
-          display: none;
-        }
-      }
+    span {
+      margin-right: 0.05em;
+    }
 
-      .loading {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background-image: url(/images/loader.svg);
-        background-size: 100% 100%;
-        z-index: 2;
-        display: block;
-      }
+  }
 
-      &[data-menu] {
-        &:after {
-          position: absolute;
-          content: "+";
-          font-family: Arial, Helvetica, sans-serif;
-          right: 0.2em;
-          bottom: -0.1em;
-          font-weight: 400;
-        }
-      }
+  &.poster {
+    background-size: 100% 100%;
+    background-position: 50% 50%;
 
-      &.media, &.music, &.shield, &.netflix, &.play {
-        &:after {
-          position: absolute;
-          content: "\f04b";
-          font-family: @font-awesome;
-          right: 0.7em;
-          bottom: 0.6em;
-          font-size: 0.5em;
-        }
-      }
+    &:after, &:before {
+      mix-blend-mode: exclusion;
+      color: #fff;
+    }
+  }
 
-      &[data-seen] {
-        &:before {
-          position: absolute;
-          content: "\f06e";
-          font-family: @font-awesome;
-          right: 0.7em;
-          top: 0.6em;
-          font-size: 0.5em;
-        }
-      }
+  .fav {
+    position: absolute;
+    bottom: 0.5em;
+    left: 0.5em;
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    font-size: 0.5em;
+
+    &.fav-on:before {
+      font-family: @font-awesome;
+      font-weight: 400;
+      content: "\f005"
+    }
 
-      &.back {
-        &:before {
-          position: absolute;
-          content: "\f060";
-          font-family: @font-awesome;
-          left: 0.2em;
-          top: 0.2em;
-          font-size: 0.6em;
-        }
-      }
+    &.fav-off {
+      display: none;
+    }
+  }
+
+  .loading {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: url(/images/loader.svg);
+    background-size: 100% 100%;
+    z-index: 2;
+    display: block;
+  }
+
+  &[data-menu] {
+    &:after {
+      position: absolute;
+      content: "+";
+      font-family: Arial, Helvetica, sans-serif;
+      right: 0.2em;
+      bottom: -0.1em;
+      font-weight: 400;
+    }
+  }
+
+  &.media, &.music, &.shield, &.netflix, &.play {
+    &:after {
+      position: absolute;
+      content: "\f04b";
+      font-family: @font-awesome;
+      right: 0.7em;
+      bottom: 0.6em;
+      font-size: 0.5em;
+    }
+  }
+
+  &[data-seen] {
+    &:before {
+      position: absolute;
+      content: "\f06e";
+      font-family: @font-awesome;
+      right: 0.7em;
+      top: 0.6em;
+      font-size: 0.5em;
+    }
+  }
+
+  &.back {
+    &:before {
+      position: absolute;
+      content: "\f060";
+      font-family: @font-awesome;
+      left: 0.2em;
+      top: 0.2em;
+      font-size: 0.6em;
+    }
+  }
+
+  &.missing {
+    color: #aaa;
+    opacity: 0.5;
+  }
+
+  &.info {
+    color: #fff;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  &.time {
+    position: relative;
+
+    .hour {
+      font-size: 2.2em;
+    }
 
-      &.missing {
-        color: #aaa;
-        opacity: 0.5;
+    .date {
+      position: absolute;
+      bottom: 0.2em;
+      left: 0;
+      text-align: center;
+      width: 100%;
+      font-size: 0.6em;
+    }
+  }
+
+  &.velib {
+    .dtime {
+      &:before {
+        font-family: @font-awesome;
+        content: "\f206";
+        margin-right: 0.3em;
       }
+    }
 
-      &.info {
-        color: #fff;
-        background-color: rgba(0, 0, 0, 0.5);
+    ul {
+
+    }
+
+    li {
+      text-align: left;
+      list-style: none;
+      font-size: 0.55em;
+      margin-top: 0.3em;
+      clear: both;
+
+      .l {
+        max-width: 7.2em;
+        display: inline-block;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        vertical-align: top;
       }
 
-      &.time {
+      .n {
+        float: right;
+        vertical-align: top;
+        margin-left: 0.2em;
+        border-radius: 50%;
+        display: inline-block;
+        height: 1.6em;
+        width: 1.6em;
+        border: 0.1em solid #fff;
+        text-align: center;
         position: relative;
+        line-height: 1.4em;
+        font-size: 0.8em;
+        color: #fff;
 
-        .hour {
-          font-size: 2.2em;
+        &.green {
+          background-color: #a2b43a;
         }
 
-        .date {
-          position: absolute;
-          bottom: 0.2em;
-          left: 0;
-          text-align: center;
-          width: 100%;
-          font-size: 0.6em;
+        &.blue {
+          background-color: #59b0e3;
         }
       }
+    }
+  }
 
-      &.velib {
-        .dtime {
-          &:before {
-            font-family: @font-awesome;
-            content: "\f206";
-            margin-right: 0.3em;
-          }
-        }
+  &.traffic {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
 
-        ul {
+    ul {
+      padding: 0.1em 0.5em;
+      text-align: left;
 
-        }
+      li {
+        list-style: none;
+        text-align: right;
+        position: relative;
+        text-transform: lowercase;
 
-        li {
-          text-align: left;
-          list-style: none;
-          font-size: 0.55em;
-          margin-top: 0.3em;
-          clear: both;
-
-          .l {
-            max-width: 7.2em;
-            display: inline-block;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
-            vertical-align: top;
-          }
+        &:before {
+          font-family: @font-awesome;
+          position: absolute;
+          top: 0.2em;
+          left: 0;
+          width: 1.2em;
+          display: inline-block;
+          text-align: center;
+        }
 
-          .n {
-            float: right;
-            vertical-align: top;
-            margin-left: 0.2em;
-            border-radius: 50%;
-            display: inline-block;
-            height: 1.6em;
-            width: 1.6em;
-            border: 0.1em solid #fff;
-            text-align: center;
-            position: relative;
-            line-height: 1.4em;
-            font-size: 0.8em;
-            color: #fff;
-
-            &.green {
-              background-color: #a2b43a;
-            }
-
-            &.blue {
-              background-color: #59b0e3;
-            }
+        &.car {
+          &:before {
+            content: "\f1b9";
           }
         }
-      }
 
-      &.traffic {
-        padding-left: 0 !important;
-        padding-right: 0 !important;
-
-        ul {
-          padding: 0.1em 0.5em;
-          text-align: left;
-
-          li {
-            list-style: none;
-            text-align: right;
-            position: relative;
-            text-transform: lowercase;
-
-            &:before {
-              font-family: @font-awesome;
-              position: absolute;
-              top: 0.2em;
-              left: 0;
-              width: 1.2em;
-              display: inline-block;
-              text-align: center;
-            }
-
-            &.car {
-              &:before {
-                content: "\f1b9";
-              }
-            }
-
-            &.bike {
-              &:before {
-                content: "\f206";
-              }
-            }
-
-            &.subway {
-              &:before {
-                content: "\f239";
-              }
-            }
+        &.bike {
+          &:before {
+            content: "\f206";
           }
         }
 
-        div {
-          font-size: 0.6em;
-
-          span {
-            font-size: 1em !important;
+        &.subway {
+          &:before {
+            content: "\f239";
           }
         }
       }
+    }
 
-      &.weather {
-        position: relative;
-
-        .temp {
-          font-size: 1.3em;
-          text-align: center;
-          display: block;
-        }
-
-        .icons {
-          span {
-            width: 50%;
-            display: inline-block;
-            text-align: left;
-
-            &.icon-night {
-              text-align: right;
-            }
-
-            img {
-              width: 2.2em;
-              height: 2.2em;
-              position: relative;
-              top: -0.3em;
-            }
-          }
-        }
+    div {
+      font-size: 0.6em;
 
-        .temperatures {
-          font-size: 0.7em;
+      span {
+        font-size: 1em !important;
+      }
+    }
+  }
 
-          span {
-            width: 50%;
-            display: inline-block;
-            text-align: center;
+  &.weather {
+    position: relative;
 
-            &.temp-min {
-              color: cornflowerblue;
-            }
+    .temp {
+      font-size: 1.3em;
+      text-align: center;
+      display: block;
+    }
 
-            &.temp-max {
-              color: orangered;
-            }
+    .icons {
+      span {
+        width: 50%;
+        display: inline-block;
+        text-align: left;
 
-          }
+        &.icon-night {
+          text-align: right;
+        }
 
+        img {
+          width: 2.2em;
+          height: 2.2em;
+          position: relative;
+          top: -0.3em;
         }
       }
+    }
+
+    .temperatures {
+      font-size: 0.7em;
 
       span {
+        width: 50%;
         display: inline-block;
+        text-align: center;
+
+        &.temp-min {
+          color: cornflowerblue;
+        }
 
-        .fa {
-          font-size: 3em;
+        &.temp-max {
+          color: orangered;
         }
+
       }
+
     }
   }
 
+  span {
+    display: inline-block;
+
+    .fa {
+      font-size: 3em;
+    }
+
+  }
 }
 
+
 .screensaver {
   display: none;
 }
@@ -513,6 +538,7 @@ section {
   }
 }
 
+
 @import "menu";
 
 @import "remote";
\ No newline at end of file
-- 
2.39.5