can i get a motherfucking seaside?

2 files changed, 39 insertions, 14 deletions

diff --git a/public/assets/css/bucky.css b/public/assets/css/bucky.css
index 7dc23b0..c1013e7 100644
--- a/public/assets/css/bucky.css
+++ b/public/assets/css/bucky.css
@@ -1656,7 +1656,7 @@ audio {
   }
   a,
   a:link {
-    color: #38f;
+    color: #68f;
   }
   a:visited {
     color: #77f;
diff --git a/public/assets/css/hootstream.css b/public/assets/css/hootstream.css
index 23ccb50..5230ed7 100644
--- a/public/assets/css/hootstream.css
+++ b/public/assets/css/hootstream.css
@@ -25,7 +25,7 @@
   width: 100%;
 }
 #hootevents .hoot.threadTitle {
-  align-items: flex-end;
+  align-items: center;
 }
 #hootevents .hootText {
   max-width: 60rem;
@@ -58,7 +58,7 @@
 #hootevents .threadTitle .actions .action {
   font-size: 0.75rem;
   cursor: pointer;
-  color: #bef;
+  color: #fee;
   transition: opacity 0.1s;
   display: flex;
   flex-direction: row;
@@ -70,9 +70,6 @@
   text-decoration: underline;
   opacity: 1;
 }
-#hootevents .threadTitle .actions .action[data-action="play"] {
-  color: #8df;
-}
 
 .icon:not(:root) {
   overflow: hidden;
@@ -143,10 +140,14 @@
   text-decoration: none;
   opacity: 0.8;
   transition: opacity 0.1s;
-  font-size: 13px;
+  color: #fef;
+  padding: 0.25rem 0.5rem;
+  background: rgba(127, 127, 127, 0.2);
+  border-radius: 0.75rem;
+  font-size: 14px;
 }
 #hootevents a.keywordLink:not(:hover) {
-  color: #77c;
+  color: #fef;
 }
 #hootevents .keywordLink:hover {
   text-decoration: none;
@@ -182,7 +183,7 @@
   justify-content: flex-end;
   align-items: center;
   margin-top: 0.175rem;
-  align-self: flex-start;
+  /*align-self: flex-start;*/
 }
 #hootevents .avatar {
   width: 1.5rem;
@@ -239,16 +240,16 @@
   background: linear-gradient(
     90deg,
     rgba(127, 127, 127, 0.01),
-    rgba(127, 127, 127, 0.08),
+    rgba(127, 127, 127, 0.1),
     rgba(127, 127, 127, 0.01)
   );
 }
 #hootevents .thread:nth-child(even) {
   background: linear-gradient(
     90deg,
-    rgba(96, 96, 96, 0.01),
-    rgba(96, 96, 96, 0.1),
-    rgba(96, 96, 96, 0.01)
+    rgba(96, 96, 106, 0.01),
+    rgba(96, 96, 96, 0.12),
+    rgba(96, 96, 106, 0.01)
   );
 }
 #hootevents .thread + .thread {
@@ -489,9 +490,18 @@
   opacity: 0.9;
 }
 #hootevents .threadTitle .actions {
+  order: 1000;
   margin: 0.5rem;
   justify-content: flex-end;
-  flex: 1;
+}
+#hootevents .threadTitle .age {
+  order: 999;
+}
+#hootevents .threadTitle .count {
+  order: 997;
+}
+#hootevents .threadTitle .keyword {
+  order: 996;
 }
 #hootevents .threadTitle .actions .action {
   background: rgba(127, 127, 167, 0.4);
@@ -720,8 +730,23 @@
     max-height: calc(80vmin - 1rem);
     display: block;
   }
+
+  #hootevents .threadTitle .age {
+    order: 999;
+  }
   #hootevents .threadTitle .actions {
+    min-width: 5rem;
+    order: 996;
   }
+  #hootevents .threadTitle .count {
+    order: 998;
+  }
+  #hootevents .threadTitle .keyword {
+    display: flex;
+    justify-content: flex-start;
+    order: 997;
+  }
+
   .stream header .search_form {
     padding: 0.5rem 1.25rem 0.5rem 1.25rem;
   }