Fix up timeout, improve contrast on "show more", add responsive style

for extremely wide monitors

1 files changed, 25 insertions, 2 deletions

diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss
index 663969c32..f8f1b9d6c 100644
--- a/app/assets/stylesheets/components.scss
+++ b/app/assets/stylesheets/components.scss
@@ -139,10 +139,10 @@
   }
 
   .status__content__spoiler-link {
-    background: lighten($color1, 26%);
+    background: lighten($color1, 30%);
 
     &:hover {
-      background: lighten($color1, 29%);
+      background: lighten($color1, 33%);
       text-decoration: none;
     }
   }
@@ -261,6 +261,15 @@
   .status__avatar {
     opacity: 0.5;
   }
+
+  .status__content__spoiler-link {
+    background: lighten($color1, 26%);
+
+    &:hover {
+      background: lighten($color1, 29%);
+      text-decoration: none;
+    }
+  }
 }
 
 .notification__display-name {
@@ -354,6 +363,7 @@
 
 .columns-area {
   flex-direction: row;
+  justify-content: flex-start;
 }
 
 @media screen and (min-width: 360px) {
@@ -371,6 +381,19 @@
   width: 280px;
 }
 
+@media screen and (min-width: 2560px) {
+  .columns-area {
+    justify-content: center;
+  }
+
+  .column, .drawer {
+    width: 350px;
+    border-radius: 4px;
+    height: 90vh;
+    margin-top: 5vh;
+  }
+}
+
 .drawer__inner {
   background: linear-gradient(rgba(lighten($color1, 13%), 1), rgba(lighten($color1, 13%), 0.65));
 }