diff --git a/app/javascript/flavours/glitch/features/drawer/index.js b/app/javascript/flavours/glitch/features/drawer/index.js
index 038a2513e8..ffb18c5a06 100644
--- a/app/javascript/flavours/glitch/features/drawer/index.js
+++ b/app/javascript/flavours/glitch/features/drawer/index.js
@@ -121,10 +121,17 @@ class Drawer extends React.Component {
submitted={submitted}
value={searchValue}
/> }
-
- {!isSearchPage &&
}
- {!isSearchPage &&
}
- {multiColumn &&
}
+
+ {!isSearchPage &&
+
+
+ {multiColumn && (
+
+
+
+ )}
+
}
+
{(multiColumn || isSearchPage) &&
.contents {
- display: flex;
- position: relative;
- flex-direction: column;
- padding: 0;
- flex-grow: 1;
- background: lighten($ui-base-color, 13%);
- overflow-x: hidden;
- overflow-y: auto;
-
- & > .mastodon {
- flex: 1;
- border: none;
- cursor: inherit;
- }
- }
-
- @for $i from 0 through 3 {
- &.mbstobon-#{$i} > .contents {
- @if $i == 3 {
- background: url('~flavours/glitch/images/wave-drawer.png') no-repeat bottom / 100% auto, lighten($ui-base-color, 13%);
- } @else {
- background: url('~flavours/glitch/images/wave-drawer-glitched.png') no-repeat bottom / 100% auto, lighten($ui-base-color, 13%);
- }
-
- & > .mastodon {
- background: url("~flavours/glitch/images/mbstobon-ui-#{$i}.png") no-repeat left bottom / contain;
-
- @if $i != 3 {
- filter: contrast(50%) brightness(50%);
- }
- }
- }
- }
}
.drawer--header {
@@ -341,6 +307,31 @@
}
}
+.drawer__inner__mastodon {
+ background: lighten($ui-base-color, 13%) url('data:image/svg+xml;utf8,') no-repeat bottom / 100% auto;
+ flex: 1;
+ min-height: 47px;
+
+ > img {
+ display: block;
+ object-fit: contain;
+ object-position: bottom left;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ user-drag: none;
+ user-select: none;
+ }
+
+ > .mastodon {
+ display: block;
+ width: 100%;
+ height: 100%;
+ border: none;
+ cursor: inherit;
+ }
+}
+
.pseudo-drawer {
background: lighten($ui-base-color, 13%);
font-size: 13px;
@@ -356,3 +347,21 @@
height: 100%;
background: rgba($base-overlay-background, 0.5);
}
+
+@for $i from 0 through 3 {
+ .mbstobon-#{$i} .drawer__inner__mastodon {
+ @if $i == 3 {
+ background: url('~flavours/glitch/images/wave-drawer.png') no-repeat bottom / 100% auto, lighten($ui-base-color, 13%);
+ } @else {
+ background: url('~flavours/glitch/images/wave-drawer-glitched.png') no-repeat bottom / 100% auto, lighten($ui-base-color, 13%);
+ }
+
+ & > .mastodon {
+ background: url("~flavours/glitch/images/mbstobon-ui-#{$i}.png") no-repeat left bottom / contain;
+
+ @if $i != 3 {
+ filter: contrast(50%) brightness(50%);
+ }
+ }
+ }
+}
diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
index 55a8983e52..339ee7cf08 100644
--- a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
+++ b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
@@ -58,7 +58,7 @@
background: $ui-base-color;
}
-.drawer > .contents {
+.drawer__inner__mastodon {
background: $ui-base-color url('data:image/svg+xml;utf8,') no-repeat bottom / 100% auto !important;
.mastodon {