From 6926fca8edb7f18d07544d8e1dc30f71ae8777b7 Mon Sep 17 00:00:00 2001 From: chr Date: Sat, 21 Jul 2018 15:47:19 -0700 Subject: [PATCH] Base SCSS for 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..b950faa54 --- /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, +.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); +} + +