fix videoplaylist desing

4 files changed, 17 insertions, 7 deletions

diff --git a/dist/css/style.css b/dist/css/style.css
index ede4720..867eace 100644
--- a/dist/css/style.css
+++ b/dist/css/style.css
@@ -124,6 +124,11 @@ video {
   color: white;
 }
 
+.play-menu a:hover {
+  background-color: #484848;
+  color: #fff;
+}
+
 .is-active-play {
   color: #dd7325;
   background-color: #dd7325;
diff --git a/dist/css/style.min.css b/dist/css/style.min.css
index f7b03a1..f085f80 100644
--- a/dist/css/style.min.css
+++ b/dist/css/style.min.css
@@ -4,4 +4,4 @@
  * Author: jesus e.
  * Version: 1.0.2
  * Licensed under MIT (https://github.com/jgthms/bulma/blob/master/LICENSE)
- */@font-face{font-family:'Roboto Condensed';font-style:normal;font-weight:400;font-display:swap;src:local("Roboto Condensed"),local("RobotoCondensed-Regular"),url(../fonts/roboto/roboto-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}body,input,textarea,.button{font-family:'Roboto Condensed', Nimbus Sans, sans-serif}#navbar-toggle-cbox{display:none}label[for=navbar-toggle-cbox]{cursor:pointer}#navbar-toggle-cbox:checked ~ .navbar-menu{display:block}.navbar{background-color:#0c0f0f}.navbar a{color:whitesmoke}.navbar.is-social-center{align-items:stretch;background-color:transparent;display:-webkit-box;display:-ms-flexbox;display:flex;flex-grow:0;flex-shrink:0;justify-content:center;margin-left:auto;margin-right:auto;-webkit-box-align:stretch;-webkit-box-pack:center;-webkit-box-flex:0;-ms-flex-pack:center;-ms-flex-align:stretch;-ms-flex-negative:0;-ms-flex-positive:0}.navbar.is-social-center>a.navbar-item{color:#4a4a4a;background-color:transparent}.navbar.is-social-center>a.navbar-item:hover{color:#dd7325}.main-header{box-shadow:0 2px 3px rgba(10,10,10,0.1)}.main-header .title{color:whitesmoke}.main-header .subtitle{color:#dd7325}.main-header .hero{background-color:#161c1c}code{background-color:#282828;color:#73d1ed}li{color:white}pre{background-color:#282828;color:#78dcfa}strong{color:white}video{width:100%;height:auto}.is-cyan{color:#0dd3ff}.is-table{display:table}.play-menu{height:200px;overflow-y:auto}.play-menu a{color:white}.is-active-play{color:#dd7325;background-color:#dd7325}.highlight{background:#000000;color:#cccccc}.highlight pre{font-size:75%}.highlight .hll{background-color:#222222}.highlight .c{color:#4E4F8E}.highlight .err{color:#cccccc;border:1px solid #FF0000}.highlight .esc,.highlight .g{color:#cccccc}.highlight .k{color:#cdcd00}.highlight .l,.highlight .n{color:#cccccc}.highlight .o{color:#3399cc}.highlight .x{color:#cccccc}.highlight .p{color:#fac0ba}.highlight .ch,.highlight .cm,.highlight .cp,.highlight .cpf,.highlight .c1{color:#4E4F8E}.highlight .cs{color:#cd0000;font-weight:bold}.highlight .gd{color:#cd0000}.highlight .ge{color:#cccccc;font-style:italic}.highlight .gr{color:#FF0000}.highlight .gh{color:#4E4F8E;font-weight:bold}.highlight .gi{color:#00cd00}.highlight .go{color:#888888}.highlight .gp{color:#4E4F8E;font-weight:bold}.highlight .gs{color:#cccccc;font-weight:bold}.highlight .gu{color:#800080;font-weight:bold}.highlight .gt{color:#0044DD}.highlight .kc{color:#cdcd00}.highlight .kd{color:#00cd00}.highlight .kn{color:#cd00cd}.highlight .kp,.highlight .kr{color:#cdcd00}.highlight .kt{color:#00cd00}.highlight .ld{color:#cccccc}.highlight .m{color:#cd00cd}.highlight .s{color:#cd0000}.highlight .na{color:#cccccc}.highlight .nb{color:#cd00cd}.highlight .nc{color:#00cdcd}.highlight .no,.highlight .nd,.highlight .ni{color:#cccccc}.highlight .ne{color:#666699;font-weight:bold}.highlight .nf,.highlight .nl,.highlight .nn,.highlight .nx,.highlight .py{color:#cccccc}.highlight .nt{color:orange}.highlight .nv{color:#00cdcd}.highlight .ow{color:#cdcd00}.highlight .w{color:#cccccc}.highlight .mb,.highlight .mf,.highlight .mh,.highlight .mi,.highlight .mo{color:#cd00cd}.highlight .sb,.highlight .sc,.highlight .sd,.highlight .s2,.highlight .se,.highlight .sh,.highlight .si,.highlight .sx,.highlight .sr,.highlight .s1,.highlight .ss{color:#cd0000}.highlight .bp{color:#cd00cd}.highlight .vc,.highlight .vg,.highlight .vi{color:#00cdcd}.highlight .il{color:#cd00cd}.soumaicon{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-line-pack:center;align-content:center}.soumaicon svg{width:.8rem;height:.8rem;fill:currentcolor}.soumaicon:hover svg{fill:#dd7325}.main-content{background-color:#363636;padding:1rem 1.5rem}.card{background-color:#161c1c}.card .card-content-footer{color:#7a7a7a}.card-content-footer i{padding-right:10px;padding-top:2px}.card-content-header,.comments-header{background-color:#dd7325;padding:10px;box-shadow:0 2px 3px rgba(10,10,10,0.1)}.card-content-header .title,.card-content-header a{color:whitesmoke}.card-inner-wrapper{padding:25px}.card-content-text{padding-bottom:30px;border-bottom:1px solid #dd7325}.card-content-text p{color:whitesmoke;font-size:1em}.card-content-text label{color:whitesmoke;font-weight:100}.card-content-nav{padding-top:10px}.card-content-footer{padding-top:15px;padding-bottom:15px}.card-content-footer-small{padding-top:20px;margin-bottom:-25px}.card-content-footer-cols{padding-top:20px;margin-bottom:-20px}.card-content-form{padding-top:20px}.content blockquote{background:black;color:white;border-left:4px solid #dbdbdb;margin:1.5rem 1rem;padding:1.5rem 1rem}.content blockquote p{display:contents}.content blockquote:before{opacity:0.5;content:open-quote;font-size:4rem;line-height:.1em;margin-right:.25em;vertical-align:-0.4em}*{box-sizing:border-box}*:after,*:before{box-sizing:border-box}legend{box-sizing:border-box}.content dl,.content dt,.content dd,.content h2,.content h3,.content h4,.content h5,.content h6{color:white}.content.social{margin-bottom:0rem}a{color:#0099e5}a:hover{text-decoration:none;color:#ffc20e}a.navbar-item.is-tab.is-active{border-bottom-color:#dd7325;border-width:2px;color:whitesmoke}a.navbar-item.is-tab:hover{border-bottom-color:#dd7325;border-width:2px;color:#dd7325}a.navbar-item:hover{color:#dd7325;background-color:transparent}a.pagination-previous.disabled,a.pagination-next.disabled{background:#0c0f0f;color:white;cursor:not-allowed;border-color:#dbdbdb;box-shadow:none;color:#7a7a7a;opacity:.5}.pagination-list{margin-bottom:1.5rem}h4>a:hover{color:white}.is-button-grey,.pagination-link{background-color:#7a7a7a;border-color:transparent;color:rgba(0,0,0,0.7)}.button:hover,.pagination .is-current,.pagination-link:hover{background-color:#dd7325;border-color:transparent;color:whitesmoke}.button:focus{box-shadow:none;border-color:transparent}.comments-content{background-color:#161c1c;padding-bottom:10px}.pagination-style-custom{padding-top:50px}.footer{background-color:#0c0f0f;color:whitesmoke}.footer a{color:#dd7325}.footer-top-shadow{box-shadow:0 1px 3px rgba(10,10,10,0.1)}.comments-wrapper{padding:25px}.comments-header .title{color:whitesmoke}.comments-wrapper p{color:whitesmoke}.comments-wrapper small{color:#7a7a7a}.comments-wrapper strong{color:whitesmoke;font-weight:100}.comments-wrapper a{color:#dd7325}.comments-wrapper .media .media,.comments-wrapper .media+.media{border-top:1px solid #dd7325}@media screen and (max-width: 1087px){.navbar-menu{background-color:transparent}}@media screen and (max-width: 600px){.main-content{padding:0rem}}
+ */@font-face{font-family:'Roboto Condensed';font-style:normal;font-weight:400;font-display:swap;src:local("Roboto Condensed"),local("RobotoCondensed-Regular"),url(../fonts/roboto/roboto-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}body,input,textarea,.button{font-family:'Roboto Condensed', Nimbus Sans, sans-serif}#navbar-toggle-cbox{display:none}label[for=navbar-toggle-cbox]{cursor:pointer}#navbar-toggle-cbox:checked ~ .navbar-menu{display:block}.navbar{background-color:#0c0f0f}.navbar a{color:whitesmoke}.navbar.is-social-center{align-items:stretch;background-color:transparent;display:-webkit-box;display:-ms-flexbox;display:flex;flex-grow:0;flex-shrink:0;justify-content:center;margin-left:auto;margin-right:auto;-webkit-box-align:stretch;-webkit-box-pack:center;-webkit-box-flex:0;-ms-flex-pack:center;-ms-flex-align:stretch;-ms-flex-negative:0;-ms-flex-positive:0}.navbar.is-social-center>a.navbar-item{color:#4a4a4a;background-color:transparent}.navbar.is-social-center>a.navbar-item:hover{color:#dd7325}.main-header{box-shadow:0 2px 3px rgba(10,10,10,0.1)}.main-header .title{color:whitesmoke}.main-header .subtitle{color:#dd7325}.main-header .hero{background-color:#161c1c}code{background-color:#282828;color:#73d1ed}li{color:white}pre{background-color:#282828;color:#78dcfa}strong{color:white}video{width:100%;height:auto}.is-cyan{color:#0dd3ff}.is-table{display:table}.play-menu{height:200px;overflow-y:auto}.play-menu a{color:white}.play-menu a:hover{background-color:#484848;color:#fff}.is-active-play{color:#dd7325;background-color:#dd7325}.highlight{background:#000000;color:#cccccc}.highlight pre{font-size:75%}.highlight .hll{background-color:#222222}.highlight .c{color:#4E4F8E}.highlight .err{color:#cccccc;border:1px solid #FF0000}.highlight .esc,.highlight .g{color:#cccccc}.highlight .k{color:#cdcd00}.highlight .l,.highlight .n{color:#cccccc}.highlight .o{color:#3399cc}.highlight .x{color:#cccccc}.highlight .p{color:#fac0ba}.highlight .ch,.highlight .cm,.highlight .cp,.highlight .cpf,.highlight .c1{color:#4E4F8E}.highlight .cs{color:#cd0000;font-weight:bold}.highlight .gd{color:#cd0000}.highlight .ge{color:#cccccc;font-style:italic}.highlight .gr{color:#FF0000}.highlight .gh{color:#4E4F8E;font-weight:bold}.highlight .gi{color:#00cd00}.highlight .go{color:#888888}.highlight .gp{color:#4E4F8E;font-weight:bold}.highlight .gs{color:#cccccc;font-weight:bold}.highlight .gu{color:#800080;font-weight:bold}.highlight .gt{color:#0044DD}.highlight .kc{color:#cdcd00}.highlight .kd{color:#00cd00}.highlight .kn{color:#cd00cd}.highlight .kp,.highlight .kr{color:#cdcd00}.highlight .kt{color:#00cd00}.highlight .ld{color:#cccccc}.highlight .m{color:#cd00cd}.highlight .s{color:#cd0000}.highlight .na{color:#cccccc}.highlight .nb{color:#cd00cd}.highlight .nc{color:#00cdcd}.highlight .no,.highlight .nd,.highlight .ni{color:#cccccc}.highlight .ne{color:#666699;font-weight:bold}.highlight .nf,.highlight .nl,.highlight .nn,.highlight .nx,.highlight .py{color:#cccccc}.highlight .nt{color:orange}.highlight .nv{color:#00cdcd}.highlight .ow{color:#cdcd00}.highlight .w{color:#cccccc}.highlight .mb,.highlight .mf,.highlight .mh,.highlight .mi,.highlight .mo{color:#cd00cd}.highlight .sb,.highlight .sc,.highlight .sd,.highlight .s2,.highlight .se,.highlight .sh,.highlight .si,.highlight .sx,.highlight .sr,.highlight .s1,.highlight .ss{color:#cd0000}.highlight .bp{color:#cd00cd}.highlight .vc,.highlight .vg,.highlight .vi{color:#00cdcd}.highlight .il{color:#cd00cd}.soumaicon{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-line-pack:center;align-content:center}.soumaicon svg{width:.8rem;height:.8rem;fill:currentcolor}.soumaicon:hover svg{fill:#dd7325}.main-content{background-color:#363636;padding:1rem 1.5rem}.card{background-color:#161c1c}.card .card-content-footer{color:#7a7a7a}.card-content-footer i{padding-right:10px;padding-top:2px}.card-content-header,.comments-header{background-color:#dd7325;padding:10px;box-shadow:0 2px 3px rgba(10,10,10,0.1)}.card-content-header .title,.card-content-header a{color:whitesmoke}.card-inner-wrapper{padding:25px}.card-content-text{padding-bottom:30px;border-bottom:1px solid #dd7325}.card-content-text p{color:whitesmoke;font-size:1em}.card-content-text label{color:whitesmoke;font-weight:100}.card-content-nav{padding-top:10px}.card-content-footer{padding-top:15px;padding-bottom:15px}.card-content-footer-small{padding-top:20px;margin-bottom:-25px}.card-content-footer-cols{padding-top:20px;margin-bottom:-20px}.card-content-form{padding-top:20px}.content blockquote{background:black;color:white;border-left:4px solid #dbdbdb;margin:1.5rem 1rem;padding:1.5rem 1rem}.content blockquote p{display:contents}.content blockquote:before{opacity:0.5;content:open-quote;font-size:4rem;line-height:.1em;margin-right:.25em;vertical-align:-0.4em}*{box-sizing:border-box}*:after,*:before{box-sizing:border-box}legend{box-sizing:border-box}.content dl,.content dt,.content dd,.content h2,.content h3,.content h4,.content h5,.content h6{color:white}.content.social{margin-bottom:0rem}a{color:#0099e5}a:hover{text-decoration:none;color:#ffc20e}a.navbar-item.is-tab.is-active{border-bottom-color:#dd7325;border-width:2px;color:whitesmoke}a.navbar-item.is-tab:hover{border-bottom-color:#dd7325;border-width:2px;color:#dd7325}a.navbar-item:hover{color:#dd7325;background-color:transparent}a.pagination-previous.disabled,a.pagination-next.disabled{background:#0c0f0f;color:white;cursor:not-allowed;border-color:#dbdbdb;box-shadow:none;color:#7a7a7a;opacity:.5}.pagination-list{margin-bottom:1.5rem}h4>a:hover{color:white}.is-button-grey,.pagination-link{background-color:#7a7a7a;border-color:transparent;color:rgba(0,0,0,0.7)}.button:hover,.pagination .is-current,.pagination-link:hover{background-color:#dd7325;border-color:transparent;color:whitesmoke}.button:focus{box-shadow:none;border-color:transparent}.comments-content{background-color:#161c1c;padding-bottom:10px}.pagination-style-custom{padding-top:50px}.footer{background-color:#0c0f0f;color:whitesmoke}.footer a{color:#dd7325}.footer-top-shadow{box-shadow:0 1px 3px rgba(10,10,10,0.1)}.comments-wrapper{padding:25px}.comments-header .title{color:whitesmoke}.comments-wrapper p{color:whitesmoke}.comments-wrapper small{color:#7a7a7a}.comments-wrapper strong{color:whitesmoke;font-weight:100}.comments-wrapper a{color:#dd7325}.comments-wrapper .media .media,.comments-wrapper .media+.media{border-top:1px solid #dd7325}@media screen and (max-width: 1087px){.navbar-menu{background-color:transparent}}@media screen and (max-width: 600px){.main-content{padding:0rem}}
diff --git a/post.html b/post.html
index ef0833c..c18aece 100644
--- a/post.html
+++ b/post.html
@@ -406,7 +406,7 @@
              var tracks = playlist.getElementsByTagName('a');
              video.volume = 0.50;
 
-             //Agregamos los eventos a los links que nos permitirán cambiar de canción
+             //Cuenta los tracks
              for(var track in tracks) {
                  var link = tracks[track];
                  if(typeof link === "function" || typeof link === "number") continue;
@@ -416,8 +416,7 @@
                      run(song, video, this);
                  });
              }
-             //agregamos evento para reproducir la siguiente canción en la lista
-             //si la canción es la ultima reproducir la primera otra vez
+             //Agregamos evento para reproducir el siguiente items
              video.addEventListener('ended',function(e) {
                  for(var track in tracks) {
                      var link = tracks[track];
@@ -437,17 +436,17 @@
 
          function run(song, video, link){
              var parent = link.parentElement;
-             //quitar el active de todos los elementos de la lista
+             //Quita el active de todos los elementos de la lista
              var items = parent.parentElement.getElementsByTagName('li');
              for(var item in items) {
                  if(items[item].classList)
                      items[item].classList.remove("is-active-play");
              }
 
-             //agregar active a este elemento
+             //Agrega active a este elemento
              parent.classList.add("is-active-play");
 
-             //tocar la cancion
+             //Inicia la reproducción
              video.src = song;
              video.load();
              video.play();
diff --git a/src/scss/custom/_elements.scss b/src/scss/custom/_elements.scss
index 24322f0..1086bae 100644
--- a/src/scss/custom/_elements.scss
+++ b/src/scss/custom/_elements.scss
@@ -37,6 +37,12 @@ video {
 .play-menu a {
     color: white;
 }
+
+.play-menu a:hover {
+    background-color: #484848;
+    color: #fff;
+}
+
 .is-active-play {
     color: #dd7325;
     background-color: #dd7325;