hootform styling and fixing

1 files changed, 81 insertions, 26 deletions

diff --git a/public/assets/css/hootstream.css b/public/assets/css/hootstream.css
index 97d1a77..c06ec13 100644
--- a/public/assets/css/hootstream.css
+++ b/public/assets/css/hootstream.css
@@ -9,26 +9,6 @@
 #audio {
   display: none;
 }
-#hootstream form {
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-  align-items: center;
-  flex-direction: row;
-  margin-bottom: 0.75rem;
-}
-#hootstream form input {
-  flex: 1;
-  font-size: 16px;
-  padding: 0.25rem;
-  margin-bottom: 0;
-}
-#hootstream form button {
-  margin: 0;
-  padding: 0.25rem;
-  margin-left: 0.5rem;
-  min-width: 2.5rem;
-}
 #hootevents {
   font-size: 14px;
   padding-right: 3rem;
@@ -54,6 +34,42 @@
 .hoot:hover > .text {
   opacity: 1 !important;
 }
+#hootevents .threadTitle .text {
+  display: flex;
+  flex-direction: row;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  align-items: center;
+}
+#hootevents .threadTitle .text .actions {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  transition: opacity 0.1s;
+  opacity: 0.8;
+  user-select: none;
+}
+#hootevents .threadTitle:hover .text .actions {
+  opacity: 1;
+}
+#hootevents .threadTitle .text .actions div {
+  cursor: default;
+  margin-left: 0.5rem;
+}
+#hootevents .threadTitle .text .actions .action {
+  cursor: pointer;
+  color: #48f;
+  opacity: 0.9;
+  transition: opacity 0.1s;
+}
+#hootevents .threadTitle .text .actions .action:hover {
+  text-decoration: underline;
+  opacity: 1;
+}
+#hootevents .threadTitle .text .actions .action[data-action="play"] {
+  color: #8df;
+}
 
 /** ImAgeS and other image lISTS!! */
 #hootevents .imageList {
@@ -174,8 +190,10 @@
   text-shadow: 0 0 3px rgba(192, 192, 192, 0.2);
 }
 #hootevents .hoot .threadLink {
-  color: #38f;
+  color: #6bf;
   font-size: 16px;
+  text-decoration: none;
+  border-bottom: 1px solid;
 }
 
 /** DiViDErZ */
@@ -319,34 +337,70 @@
 /** HOOT FORM */
 
 #hootform {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  max-width: 100%;
+  width: 720px;
+  padding: 8px;
   margin-bottom: 0.5rem;
   padding: 0.5rem;
+  margin-left: 3.5rem;
+}
+#hootform form {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: row;
+  margin-bottom: 0.75rem;
+}
+#hootform form input {
+  flex: 1;
+  font-size: 16px;
+  padding: 0.25rem;
+  margin-bottom: 0;
+}
+#hootform form button {
+  margin: 0;
+  padding: 0.25rem;
+  padding: 0.25rem;
+  margin-left: 0.5rem;
+  min-width: 3rem;
+  font-size: 0.75rem;
+  opacity: 0.6;
+  transition: opacity 0.1s;
 }
 #hootform input[type="text"] {
   border-top: 0;
   border-left: 0;
   border-right: 0;
   border-bottom: 1px solid rgba(127, 127, 127, 0.5);
-  padding-bottom: 3px;
+  padding: 0.5rem;
   font-size: 14px;
   font-family: "Trebuchet MS", sans-serif;
   background: transparent;
   outline: 0;
-  width: 270px;
+  flex: 1;
   transition: background 200ms;
-  background: white;
+  background: rgba(127, 127, 127, 0.1);
+  color: white;
 }
 #hootform input[type="text"]:invalid {
-  background: transparent;
+  background: rgba(127, 127, 127, 0.2);
 }
 #hootform input[type="text"]:focus {
   border-bottom: 1px solid rgba(40, 20, 20, 0.2);
   border-radius: 2px 2px 0 0;
-  color: #211;
+  /*color: #211;*/
 }
 #hootform input[type="text"]:focus {
   border-bottom-color: rgba(127, 127, 127, 0.2);
 }
+#hootform input[type="text"]:not(:invalid):focus + button {
+  opacity: 1;
+}
 #hootform input[type="text"]:invalid {
   caret-color: #888;
 }
@@ -480,6 +534,7 @@
   }
   #hootform {
     margin-bottom: 0rem;
+    margin-left: 0;
   }
   #hootevents {
     padding-right: 0;