1 files changed, 60 insertions, 9 deletions

diff --git a/assets/css/default.css b/assets/css/default.css
index 80bf6a20..88ec6ef1 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -145,6 +145,24 @@ img.thumbnail {
   object-fit: cover;
 }
 
+div.watched-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255,255,255,.4);
+}
+
+div.watched-indicator {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  height: 4px;
+  width: 100%;
+  background-color: red;
+}
+
 .length {
   z-index: 100;
   position: absolute;
@@ -490,13 +508,17 @@ hr {
 }
 
 /* Description Expansion Styling*/
-#descexpansionbutton {
-  display: none
+#descexpansionbutton,
+#music-desc-expansion {
+  display: none;
 }
 
 #descexpansionbutton ~ div {
   overflow: hidden;
-  height: 8.3em;
+}
+
+#descexpansionbutton:not(:checked) ~ div {
+  max-height: 8.3em;
 }
 
 #descexpansionbutton:checked ~ div {
@@ -509,7 +531,8 @@ hr {
   margin-top: 20px;
 }
 
-label[for="descexpansionbutton"]:hover {
+label[for="descexpansionbutton"]:hover,
+label[for="music-desc-expansion"]:hover {
   cursor: pointer;
 }
 
@@ -521,14 +544,38 @@ h4,
 h5,
 p,
 #descriptionWrapper,
-#description-box {
-	unicode-bidi: plaintext;
-	text-align: start;
+#description-box,
+#music-description-box {
+  unicode-bidi: plaintext;
+  text-align: start;
 }
 
 #descriptionWrapper {
-	max-width: 600px;
-	white-space: pre-wrap;
+  max-width: 600px;
+  white-space: pre-wrap;
+}
+
+#music-description-box {
+  display: none;
+}
+
+#music-desc-expansion:checked ~ #music-description-box {
+  display: block;
+}
+
+#music-desc-expansion ~ label > h3 > .ion-ios-arrow-up,
+#music-desc-expansion:checked ~ label > h3 > .ion-ios-arrow-down {
+  display: none;
+}
+
+#music-desc-expansion:checked ~ label > h3 > .ion-ios-arrow-up,
+#music-desc-expansion ~ label > h3 > .ion-ios-arrow-down {
+  display: inline;
+}
+
+/* Select all the music items except the first one */
+.music-item + .music-item {
+  border-top: 1px solid #ffffff;
 }
 
 /* Center the "invidious" logo on the search page */
@@ -539,3 +586,7 @@ p,
 
 /* Wider settings name to less word wrap */
 .pure-form-aligned .pure-control-group label { width: 19em; }
+
+.channel-emoji {
+  margin: 0 2px;
+}