diff options
Diffstat (limited to 'app/javascript/flavours/glitch/styles/components')
5 files changed, 22 insertions, 25 deletions
diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index b354e7acf..7f3c21163 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -43,7 +43,7 @@ display: flex; flex-direction: column; - @media screen and (min-width: 360px) { + @media screen and (min-width: $no-gap-breakpoint) { padding: 0 10px; } } @@ -466,14 +466,14 @@ } .auto-columns.navbar-under { - @media screen and (max-width: 360px) { + @media screen and (max-width: $no-gap-breakpoint) { @include fix-margins-for-navbar-under; } } .auto-columns.navbar-under .react-swipeable-view-container .columns-area, .single-column.navbar-under .react-swipeable-view-container .columns-area { - @media screen and (max-width: 360px) { + @media screen and (max-width: $no-gap-breakpoint) { height: 100% !important; } } diff --git a/app/javascript/flavours/glitch/styles/components/composer.scss b/app/javascript/flavours/glitch/styles/components/composer.scss index 3eb5551c6..1044b13c1 100644 --- a/app/javascript/flavours/glitch/styles/components/composer.scss +++ b/app/javascript/flavours/glitch/styles/components/composer.scss @@ -605,7 +605,7 @@ & > .side_arm { display: inline-block; - margin: 0 2px 0 0; + margin: 0 2px; padding: 0; width: 36px; text-align: center; diff --git a/app/javascript/flavours/glitch/styles/components/drawer.scss b/app/javascript/flavours/glitch/styles/components/drawer.scss index 0994a9b43..93a3f62ed 100644 --- a/app/javascript/flavours/glitch/styles/components/drawer.scss +++ b/app/javascript/flavours/glitch/styles/components/drawer.scss @@ -78,7 +78,7 @@ margin-bottom: 10px; flex: none; - @include limited-single-column('screen and (max-width: 360px)') { margin-bottom: 0 } + @include limited-single-column('screen and (max-width: #{$no-gap-breakpoint})') { margin-bottom: 0 } @include single-column('screen and (max-width: 630px)') { font-size: 16px } } diff --git a/app/javascript/flavours/glitch/styles/components/single_column.scss b/app/javascript/flavours/glitch/styles/components/single_column.scss index e0f3d62a7..83c5d351b 100644 --- a/app/javascript/flavours/glitch/styles/components/single_column.scss +++ b/app/javascript/flavours/glitch/styles/components/single_column.scss @@ -98,7 +98,7 @@ top: 15px; } - @media screen and (min-width: 360px) { + @media screen and (min-width: $no-gap-breakpoint) { padding: 10px 0; } @@ -184,7 +184,7 @@ } } -@media screen and (min-width: 360px) { +@media screen and (min-width: $no-gap-breakpoint) { .tabs-bar { margin: 10px auto; margin-bottom: 0; diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index 4ffbb2c21..ccc6da594 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -193,10 +193,8 @@ } .status__prepend-icon-wrapper { - float: left; - margin: 0 10px 0 -58px; - width: 48px; - text-align: right; + left: -26px; + position: absolute; } .notification-follow { @@ -370,9 +368,7 @@ .status__relative-time { display: inline-block; - margin-left: auto; - padding-left: 18px; - width: 120px; + flex-grow: 1; color: $dark-text-color; font-size: 14px; text-align: right; @@ -382,7 +378,6 @@ } .status__display-name { - margin: 0 auto 0 0; color: $dark-text-color; overflow: hidden; } @@ -394,6 +389,7 @@ .status__info { display: flex; + justify-content: space-between; font-size: 15px; > span { @@ -407,25 +403,23 @@ } .status__info__icons { - margin-left: auto; display: flex; align-items: center; height: 1em; color: $action-button-color; - .status__media-icon { - padding-left: 6px; - padding-right: 1px; - } - - .status__visibility-icon { - padding-left: 4px; + .status__media-icon, + .status__visibility-icon, + .status__reply-icon { + padding-left: 2px; + padding-right: 2px; } } .status__info__account { display: flex; align-items: center; + justify-content: flex-start; } .status-check-box { @@ -465,9 +459,12 @@ } .status__prepend { - margin: -10px -10px 10px; + margin-top: -10px; + margin-bottom: 10px; + margin-left: 58px; color: $dark-text-color; - padding: 8px 10px 0 68px; + padding: 8px 0; + padding-bottom: 2px; font-size: 14px; position: relative; |