diff --git a/app/javascript/flavours/glitch/features/drawer/index.js b/app/javascript/flavours/glitch/features/drawer/index.js
index 375954cb653..e6a6895755f 100644
--- a/app/javascript/flavours/glitch/features/drawer/index.js
+++ b/app/javascript/flavours/glitch/features/drawer/index.js
@@ -73,14 +73,11 @@ class Drawer extends React.Component {
searchValue,
submitted,
} = this.props;
-
- let innerDrawerAttrs = {
- className: classNames('drawer--inner', 'mbstobon-' + elefriend),
- };
+ const computedClass = classNames('drawer', `mbstobon-${elefriend}`);
// The result.
return (
-
+
{multiColumn ? (
-
-
- {multiColumn && }
-
+
+ {multiColumn &&
}
.contents {
+ display: flex;
position: relative;
+ flex-direction: column;
padding: 0;
width: 100%;
height: 100%;
@@ -48,22 +50,8 @@
overflow-x: hidden;
overflow-y: auto;
contain: strict;
- }
- .drawer--inner {
- position: absolute;
- top: 0;
- left: 0;
- box-sizing: border-box;
- padding: 0;
- display: flex;
- flex-direction: column;
- overflow: hidden;
- overflow-y: auto;
- width: 100%;
- height: 100%;
-
- .mastodon {
+ & > .mastodon {
flex: 1;
border: none;
cursor: inherit;
@@ -71,14 +59,14 @@
}
@for $i from 0 through 3 {
- .drawer--inner.mbstobon-#{$i} {
+ &.mbstobon-#{$i} > .contents {
@if $i == 3 {
- background: lighten($ui-base-color, 13%) url('~flavours/glitch/images/wave-drawer.png') no-repeat bottom / 100% auto;
+ background: url('~flavours/glitch/images/wave-drawer.png') no-repeat bottom / 100% auto, lighten($ui-base-color, 13%);
} @else {
- background: lighten($ui-base-color, 13%) url('~flavours/glitch/images/wave-drawer-glitched.png') no-repeat bottom / 100% auto;
+ background: url('~flavours/glitch/images/wave-drawer-glitched.png') no-repeat bottom / 100% auto, lighten($ui-base-color, 13%);
}
- .mastodon {
+ & > .mastodon {
background: url("~flavours/glitch/images/mbstobon-ui-#{$i}.png") no-repeat left bottom / contain;
@if $i != 3 {
diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss
index 4f19042c85b..9d52e8b0876 100644
--- a/app/javascript/flavours/glitch/styles/components/status.scss
+++ b/app/javascript/flavours/glitch/styles/components/status.scss
@@ -12,21 +12,12 @@
word-wrap: break-word;
font-weight: 400;
overflow: visible;
- white-space: pre-wrap;
padding-top: 5px;
&:focus {
outline: 0;
}
- &.status__content--with-spoiler {
- white-space: normal;
-
- .status__content__text {
- white-space: pre-wrap;
- }
- }
-
.emojione {
width: 20px;
height: 20px;
@@ -35,6 +26,7 @@
p {
margin-bottom: 20px;
+ white-space: pre-wrap;
&:last-child {
margin-bottom: 0;
@@ -69,11 +61,10 @@
}
.status__content__spoiler {
- background: lighten($ui-base-color, 30%);
-
- &:hover {
- background: lighten($ui-base-color, 33%);
- text-decoration: none;
+ display: none;
+
+ &.status__content__spoiler--visible {
+ display: block;
}
}
@@ -85,14 +76,6 @@
text-decoration: none;
}
}
-
- .status__content__text {
- display: none;
-
- &.status__content__spoiler--visible {
- display: block;
- }
- }
}
.status__content__spoiler-link {