scalie-business
/
mastodon
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Base SCSS for cybrespace themes 

Performs some baseline tweaks to the mastodon application scss that are
shared between all the cybrespace themes
This commit is contained in:
chr 2018-07-21 15:47:19 -07:00 committed by chr
parent 370ec7e771
commit f38a43506c
2 changed files with 111 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
app/javascript/styles/cybre-base.scss Normal file
View File

@ -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';

48
app/javascript/styles/fullwidth-media.scss Normal file
View File

@ -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);
}