From 89b6322ef459e5eba55d2bd49f683d034f2daa14 Mon Sep 17 00:00:00 2001 From: chr Date: Sat, 12 Oct 2019 09:45:17 -0700 Subject: [PATCH] cybrespace base theme --- app/javascript/styles/cybre-base.scss | 81 +++++++++++++++++++ app/javascript/styles/fullwidth-media.scss | 48 +++++++++++ .../styles/mastodon/components.scss | 5 -- 3 files changed, 129 insertions(+), 5 deletions(-) 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..b9bb4ecb8 --- /dev/null +++ b/app/javascript/styles/cybre-base.scss @@ -0,0 +1,81 @@ + +@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; + } +} + +/* 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 */ +.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; +} + +/* 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'; + diff --git a/app/javascript/styles/fullwidth-media.scss b/app/javascript/styles/fullwidth-media.scss new file mode 100644 index 000000000..f6a036d4f --- /dev/null +++ b/app/javascript/styles/fullwidth-media.scss @@ -0,0 +1,48 @@ + +.detailed-status > .media-spoiler, +.status > .media-spoiler, +.status .video-player, +.media-gallery, +.status .status-card.interactive { + margin-top: 20px; + margin-left: -68px; + width: calc(100% + 80px); +} + +.detailed-status > .media-spoiler, +.status > .media-spoiler, +.video-player { + max-width: none; +} + +/* 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; +} + +.status__video-player-video { + transform: unset; + top: unset; +} + +.detailed-status .media-gallery { + margin-left: -10px; + 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; + } +} diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 86425c47c..eb6fc9786 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -3049,10 +3049,6 @@ a.status-card { width: 100%; } - .status-card__image-image { - border-radius: 4px 4px 0 0; - } - .status-card__title { white-space: inherit; } @@ -3084,7 +3080,6 @@ a.status-card.compact:hover { } .status-card__image-image { - border-radius: 4px 0 0 4px; display: block; margin: 0; width: 100%;