Merge branch 'blackle-master'

2 files changed, 43 insertions, 4 deletions

diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss
index de6a45963..dee53dcc7 100644
--- a/app/assets/stylesheets/components.scss
+++ b/app/assets/stylesheets/components.scss
@@ -597,21 +597,20 @@
   }
 }
 
-.autosuggest-textarea {
+.autosuggest-textarea, .spoiler-input {
   position: relative;
 }
 
-.autosuggest-textarea__textarea {
+.autosuggest-textarea__textarea, .spoiler-input__input {
   display: block;
   box-sizing: border-box;
   width: 100%;
-  height: 100px;
   resize: none;
+  margin: 0;
   color: $color1;
   padding: 7px;
   font-family: inherit;
   font-size: 14px;
-  margin: 0;
   resize: vertical;
 
   border: 3px dashed transparent;
@@ -622,6 +621,10 @@
   }
 }
 
+.autosuggest-textarea__textarea {
+  height: 100px;
+}
+
 .autosuggest-textarea__suggestions {
   position: absolute;
   top: 100%;
@@ -676,8 +679,42 @@
   }
 }
 
+.spoiler-helper {
+  margin-bottom: -20px !important;
+}
+
+.spoiler {
+  &::before {
+    margin-top: 20px;
+    display: block;
+    content: '';
+  }
+
+  display: inline;
+  cursor: pointer;
+  border-bottom: 1px dashed white;
+  .light & {
+    border-bottom: 1px dashed black;
+  }
+
+  &.spoiler-on {
+    &, & * {
+      color: transparent !important;
+    }
+    background: white;
+    .light & {
+      background: black;
+    }
+
+    .emojione {
+      opacity: 0;
+    }
+  }
+}
+
 @import 'boost';
 
+
 button i.fa-retweet {
   height: 19px;
   width: 22px;
diff --git a/app/assets/stylesheets/stream_entries.scss b/app/assets/stylesheets/stream_entries.scss
index ccae88ec7..2d3cb1436 100644
--- a/app/assets/stylesheets/stream_entries.scss
+++ b/app/assets/stylesheets/stream_entries.scss
@@ -249,6 +249,7 @@
       padding: 5px;
       border-radius: 100px;
       color: rgba($color5, 0.8);
+      z-index: 1;
     }
   }
 
@@ -263,6 +264,7 @@
     flex-direction: column;
     text-align: center;
     transition: all 100ms linear;
+    z-index: 2;
 
     &:hover {
       background: darken($color3, 5%);