initial play icon

1 files changed, 63 insertions, 2 deletions

diff --git a/public/assets/css/hootstream.css b/public/assets/css/hootstream.css
index 22405c8..ad51f3f 100644
--- a/public/assets/css/hootstream.css
+++ b/public/assets/css/hootstream.css
@@ -3,9 +3,12 @@
  */
 
 #hootstream {
-  margin-top: 3rem;
+  margin-top: 1.5rem;
   font-size: 16px;
 }
+#hootstream #audio {
+  display: none;
+}
 #hootstream form {
   display: flex;
   width: 100%;
@@ -179,6 +182,9 @@
   margin-left: 8rem;
   margin-bottom: 1rem;
 }
+#hootevents .fileList .playing:before {
+  content: "▷  ";
+}
 #hootevents .fileRow {
   width: 100%;
   display: flex;
@@ -273,6 +279,62 @@
   caret-color: #888;
 }
 
+/** HOOT FILTERS */
+
+#hootfilters {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  font-size: 11px;
+  margin-top: 0.5rem;
+  margin-bottom: 1rem;
+}
+#hootfilters label,
+#hootfilters div {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  min-width: auto;
+  margin-right: 0.25rem;
+}
+#hootfilters label {
+  cursor: pointer;
+}
+#hootfilters input[type="checkbox"],
+#hootfilters input[type="radio"] {
+  width: 0.75rem;
+  height: 0.75rem;
+  margin: 0.25rem;
+  opacity: 0.8;
+  transition: opacity 0.1s;
+}
+#hootfilters input[type="radio"] {
+  display: none;
+}
+#hootfilters input[type="checkbox"] + span,
+#hootfilters input[type="radio"] + span {
+  opacity: 0.6;
+  transition: opacity 0.1s;
+  font-style: italic;
+}
+#hootfilters label:hover span {
+  opacity: 1;
+}
+#hootfilters input[type="checkbox"]:checked,
+#hootfilters input[type="radio"]:checked {
+  opacity: 1;
+}
+#hootfilters input[type="checkbox"]:checked + span,
+#hootfilters input[type="radio"]:checked + span {
+  text-decoration: underline;
+  opacity: 1;
+}
+#hootfilters .sortDesc input[type="radio"]:checked + span {
+  text-decoration: overline;
+}
+
 /** Read more */
 #hootevents .readMore {
   opacity: 0.7;
@@ -343,7 +405,6 @@
   }
   #hootstream {
     padding-right: 0;
-    margin-top: 1rem;
   }
   #hootevents .userLink {
     display: none;