From f38a43506ce2a962150da1342d3e28c09bd5a008 Mon Sep 17 00:00:00 2001 From: chr Date: Sat, 21 Jul 2018 15:47:19 -0700 Subject: [PATCH 1/6] Base SCSS for cybrespace themes Performs some baseline tweaks to the mastodon application scss that are shared between all the cybrespace themes --- app/javascript/styles/cybre-base.scss | 63 ++++++++++++++++++++++ app/javascript/styles/fullwidth-media.scss | 48 +++++++++++++++++ 2 files changed, 111 insertions(+) create mode 100644 app/javascript/styles/cybre-base.scss create mode 100644 app/javascript/styles/fullwidth-media.scss diff --git a/app/javascript/styles/cybre-base.scss b/app/javascript/styles/cybre-base.scss new file mode 100644 index 000000000..98b68b997 --- /dev/null +++ b/app/javascript/styles/cybre-base.scss @@ -0,0 +1,63 @@ + +@import 'application'; + +/* Allow columns to grow wider as the screen gets + * wider, but don't ever let them get more than + * 400px (some people have a bunch of columns!) */ +@media screen and (min-width: 1300px) { + .column { + flex-grow: 1 !important; + max-width: 400px; + } + + .drawer { + width: 17%; /* Not part of the flex fun */ + max-width: 400px; + min-width: 330px; + } +} + +/* Cap the column height at 100vh (fixed an old + * bug someone encountered in safari, but which + * I've seen resurface from time to time) */ +.column { + max-height:100vh; +} + +/* Don't show outline around statuses if we're in + * mouse or touch mode (rather than keyboard) */ +[data-whatinput="mouse"], [data-whatinput="touch"] { + .status__content:focus, .status:focus, + .status__wrapper:focus, .status__content__text:focus { + outline: none; + } +} + +/* Show a little arrowey thing after the time in a + * status to signal that you can click it to see + * a detailed view */ +.status time:after, +.detailed-status__datetime span:after { + font: normal normal normal 14px/1 FontAwesome; + content: "\00a0\00a0\f08e"; +} + +/* Don't display the elephant mascot (we have our + * own, thanks) */ +.drawer__inner__mastodon { + display: none; +} + +/* Let the compose area/drawer be short, but + * expand if necessary */ +.drawer .drawer__inner { + overflow: visible; + height:inherit; + background-image: none; +} +.drawer__pager { + overflow-y:auto; +} + +@import 'fullwidth-media'; + diff --git a/app/javascript/styles/fullwidth-media.scss b/app/javascript/styles/fullwidth-media.scss new file mode 100644 index 000000000..a8420694c --- /dev/null +++ b/app/javascript/styles/fullwidth-media.scss @@ -0,0 +1,48 @@ + +/* So we can position things absolute to it*/ +.status__content { + position:relative; +} + +/* Use 30% of the viewport height always*/ +.detailed-status > .media-spoiler, +.status > .media-spoiler, +.status .video-player, +.media-gallery { + max-height:30vh; + height:30vh !important; + position:relative; + margin-top:20px; + margin-left:-68px; + width: calc(100% + 80px); +} + +/* Unset max-width for spoilers and the video + * player */ +.detailed-status > .media-spoiler, +.status > .media-spoiler, +.video-player { + max-width: none; +} + + +.detailed-status .media-spoiler, +.status .media-spoiler { + height:30vh !important; + vertical-align:middle; +} + + +.status__video-player-video { + transform:unset; + top:unset; +} + + +/* Adjust offset and width for detail view */ +.detailed-status .media-gallery { + margin-left:-10px; + width: calc(100% + 22px); +} + + From 739e64d2a924d3961c019b7f13c259b71f20ddcb Mon Sep 17 00:00:00 2001 From: chr Date: Sat, 17 Nov 2018 12:55:42 -0800 Subject: [PATCH 2/6] Fix media height weirdness, handle new status cards --- app/javascript/styles/fullwidth-media.scss | 43 ++++++++++++---------- 1 file changed, 24 insertions(+), 19 deletions(-) diff --git a/app/javascript/styles/fullwidth-media.scss b/app/javascript/styles/fullwidth-media.scss index a8420694c..a681a3535 100644 --- a/app/javascript/styles/fullwidth-media.scss +++ b/app/javascript/styles/fullwidth-media.scss @@ -1,38 +1,31 @@ -/* So we can position things absolute to it*/ -.status__content { - position:relative; -} - -/* Use 30% of the viewport height always*/ +/* Use 100% of the viewport width always*/ .detailed-status > .media-spoiler, .status > .media-spoiler, .status .video-player, -.media-gallery { - max-height:30vh; - height:30vh !important; - position:relative; +.media-gallery, +.status .status-card { margin-top:20px; margin-left:-68px; width: calc(100% + 80px); } -/* Unset max-width for spoilers and the video - * player */ +/* Unset max-width for spoilers and the video player */ .detailed-status > .media-spoiler, .status > .media-spoiler, .video-player { max-width: none; } - -.detailed-status .media-spoiler, -.status .media-spoiler { - height:30vh !important; - vertical-align:middle; +/* If there's no status text, add an extra margin on top */ +.status .status__info + .media-gallery, +.status .status__info + .media-spoiler, +.status .status__info + .video-player, +.status .status__info + .status-card { + margin-top: 40px; } - +/* Undo transforms on videos inside the video player */ .status__video-player-video { transform:unset; top:unset; @@ -45,4 +38,16 @@ width: calc(100% + 22px); } - +.public-layout .status { + .status__content { + min-height: 15px; + } + & > .media-spoiler, + .video-player, + .media-gallery, + .status-card { + margin-top:20px; + width: calc(100% + 94px); + margin-left: -78px; + } +} From d902bbab25bfa9fc1bfa564e9ec220153fe99b99 Mon Sep 17 00:00:00 2001 From: chr Date: Sat, 17 Nov 2018 20:01:11 -0800 Subject: [PATCH 3/6] Fix unnecessary scrollbar on compose drawer --- app/javascript/styles/cybre-base.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/app/javascript/styles/cybre-base.scss b/app/javascript/styles/cybre-base.scss index 98b68b997..1e3c9a958 100644 --- a/app/javascript/styles/cybre-base.scss +++ b/app/javascript/styles/cybre-base.scss @@ -59,5 +59,14 @@ overflow-y:auto; } +/* Use display: none instead of visibility:hidden + * to hide the suggested follows list on non-mobile */ +@media screen and (min-width: 630px) { + .search-results .trends { + display:none; + } +} + + @import 'fullwidth-media'; From d3de5513c81200bb77cfd31f258209d60dcd5675 Mon Sep 17 00:00:00 2001 From: chr Date: Sun, 20 Jan 2019 20:29:21 -0800 Subject: [PATCH 4/6] Use lighter text for show thread link --- app/javascript/styles/cybre-base.scss | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/app/javascript/styles/cybre-base.scss b/app/javascript/styles/cybre-base.scss index 1e3c9a958..b9bb4ecb8 100644 --- a/app/javascript/styles/cybre-base.scss +++ b/app/javascript/styles/cybre-base.scss @@ -33,6 +33,16 @@ } } +/* Less emphatic show more */ +.status__content__read-more-button { + font-size: 14px; + color: $dark-text-color; + + .status__prepend-icon { + padding-right: 4px; + } +} + /* Show a little arrowey thing after the time in a * status to signal that you can click it to see * a detailed view */ @@ -67,6 +77,5 @@ } } - @import 'fullwidth-media'; From 7a141e6522d26df6b7570d3da923b0d3b4b2797f Mon Sep 17 00:00:00 2001 From: chr Date: Wed, 22 May 2019 16:18:47 -0700 Subject: [PATCH 5/6] fix full-width embeds --- app/javascript/styles/fullwidth-media.scss | 19 +++++++------------ 1 file changed, 7 insertions(+), 12 deletions(-) diff --git a/app/javascript/styles/fullwidth-media.scss b/app/javascript/styles/fullwidth-media.scss index a681a3535..f6a036d4f 100644 --- a/app/javascript/styles/fullwidth-media.scss +++ b/app/javascript/styles/fullwidth-media.scss @@ -1,16 +1,14 @@ -/* Use 100% of the viewport width always*/ .detailed-status > .media-spoiler, .status > .media-spoiler, .status .video-player, .media-gallery, -.status .status-card { - margin-top:20px; - margin-left:-68px; +.status .status-card.interactive { + margin-top: 20px; + margin-left: -68px; width: calc(100% + 80px); } -/* Unset max-width for spoilers and the video player */ .detailed-status > .media-spoiler, .status > .media-spoiler, .video-player { @@ -25,16 +23,13 @@ margin-top: 40px; } -/* Undo transforms on videos inside the video player */ .status__video-player-video { - transform:unset; - top:unset; + transform: unset; + top: unset; } - -/* Adjust offset and width for detail view */ .detailed-status .media-gallery { - margin-left:-10px; + margin-left: -10px; width: calc(100% + 22px); } @@ -46,7 +41,7 @@ .video-player, .media-gallery, .status-card { - margin-top:20px; + margin-top: 20px; width: calc(100% + 94px); margin-left: -78px; } From d74455b0aa9630a0d3456b45529bec53aea5458f Mon Sep 17 00:00:00 2001 From: nightpool Date: Sun, 18 Nov 2018 18:36:06 -0500 Subject: [PATCH 6/6] remove duplicate border radi --- app/javascript/styles/mastodon/components.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index cdf3b3b13..833d9acb8 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -2567,10 +2567,6 @@ a.status-card { width: 100%; } - .status-card__image-image { - border-radius: 4px 4px 0 0; - } - .status-card__title { white-space: inherit; } @@ -2602,7 +2598,6 @@ a.status-card.compact:hover { } .status-card__image-image { - border-radius: 4px 0 0 4px; display: block; margin: 0; width: 100%;