Leatherface/mastodon
1
0
Fork 0
mirror of https://github.com/glitch-soc/mastodon.git synced 2025-12-25 20:06:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

[WIP] Initial status work

Browse Source
This commit is contained in:
kibigo!
2017-08-14 15:07:22 -07:00
parent 4dc0ddc601
commit 866e441df3
64 changed files with 4237 additions and 2260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
app/javascript/styles/components.scss
View File

@@ -458,78 +458,6 @@
cursor: pointer;
}
// --- Extra clickable area in the status gutter ---
.ui.wide {
@mixin xtraspaces-full {
height: calc(100% + 10px);
bottom: -40px;
}
@mixin xtraspaces-short {
height: calc(100% - 35px);
bottom: 0;
}
// Avi must go on top if the toot is too short
.status__avatar {
z-index: 10;
}
// Base styles
.status__content--with-action > div::after {
content: '';
display: block;
width: 64px;
position: absolute;
left: -68px;
// more than 4 never fit on FullHD, short
@include xtraspaces-short;
}
@media screen and (min-width: 1800px) {
// 4, very wide screen
.column:nth-child(2):nth-last-child(4) {
&, & ~ .column {
.status__content--with-action > div::after {
@include xtraspaces-full;
}
}
}
}
// 1 or 2, always fit
.column:nth-child(2):nth-last-child(1),
.column:nth-child(2):nth-last-child(2),
.column:nth-child(2):nth-last-child(3) {
&, & ~ .column {
.status__content--with-action > div::after {
@include xtraspaces-full;
}
}
}
@media screen and (max-width: 1440px) {
// 3, small screen
.column:nth-child(2):nth-last-child(3) {
&, & ~ .column {
.status__content--with-action > div::after {
@include xtraspaces-short;
}
}
}
}
// Phone or iPad
@media screen and (max-width: 1060px) {
.status__content--with-action > div::after {
display: none;
}
}
// I am very sorry
}
// --- end extra clickable spaces ---
.status-check-box {
.status__content,
.reply-indicator__content {
@@ -542,13 +470,11 @@
.status__content,
.reply-indicator__content {
position: relative;
font-size: 15px;
line-height: 20px;
color: $primary-text-color;
word-wrap: break-word;
font-weight: 400;
overflow: visible;
overflow: hidden;
white-space: pre-wrap;
.emojione {
@@ -591,10 +517,19 @@
}
}
.status__content__spoiler {
.status__content__spoiler-link {
background: lighten($ui-base-color, 30%);
&:hover {
background: lighten($ui-base-color, 33%);
text-decoration: none;
}
}
.status__content__text {
display: none;
&.status__content__spoiler--visible {
&.status__content__text--visible {
display: block;
}
}
@@ -603,30 +538,15 @@
.status__content__spoiler-link {
display: inline-block;
border-radius: 2px;
background: lighten($ui-base-color, 30%);
border: none;
background: transparent;
border: 0;
color: lighten($ui-base-color, 8%);
font-weight: 500;
font-size: 11px;
padding: 0 5px;
padding: 0 6px;
text-transform: uppercase;
line-height: inherit;
cursor: pointer;
vertical-align: bottom;
&:hover {
background: lighten($ui-base-color, 33%);
text-decoration: none;
}
.status__content__spoiler-icon {
display: inline-block;
margin: 0 0 0 5px;
border-left: 1px solid currentColor;
padding: 0 0 0 4px;
font-size: 16px;
vertical-align: -2px;
}
}
.status__prepend-icon-wrapper {
@@ -712,41 +632,6 @@
}
}
}
&.collapsed {
background-position: center;
background-size: cover;
user-select: none;
&.has-background::before {
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-image: linear-gradient(to bottom, rgba($base-shadow-color, .75), rgba($base-shadow-color, .65) 24px, rgba($base-shadow-color, .8));
content: "";
}
.status__display-name:hover strong {
text-decoration: none;
}
.status__content {
height: 20px;
overflow: hidden;
text-overflow: ellipsis;
a:hover {
text-decoration: none;
}
}
}
.notification__message {
margin: -10px 0 10px;
}
}
.notification-favourite {

45
app/javascript/styles/variables.scss
View File

@@ -28,5 +28,48 @@ $ui-primary-color: $classic-primary-color !default; // Lighter
$ui-secondary-color: $classic-secondary-color !default; // Lightest
$ui-highlight-color: $classic-highlight-color !default; // Vibrant
// Avatar border size (8% default, 100% for rounded avatars)
// Avatar border radius
// If you use this to mandate circular avatars for everybody, your
// users will probably hate you. It's gonna be a user setting.
$ui-avatar-border-size: 8%;
// * * * * * * * //
// Glitch shit
// -----------
$glitch-animation-speed: 1; // Multiplier for glitch CSS
// animations and transitions. A
// value of 0 disables animations;
// the default value provides slow
// animations that last .9s and
// fast ones that last .3s.
$glitch-aside-color: // This is used for the background
darken($white, 8%); // of aside content in eg preview
// cards. Counterpoint to
// $glitch-texture-color for use
// with white backgrounds.
$glitch-darker-color: // This is used for things which
darken($ui-base-color, 7%); // need a darker color than the
// "darkest" base color and matches
// the default UI color.
// Counterpoint to
// $glitch-lighter-color for use
// with dark elements.
$glitch-disabled-opacity: .35; // For disabled buttons
$glitch-texture-color: // This is used for shit that is
lighten($ui-base-color, 8%); // purely presentational and
// conveys no real information,
// like the borders at the bottom
// of statuses. It's also used as
// the background for direct toots.
$glitch-lighter-color: // This is used for hovered
lighten($ui-primary-color, 7%); // buttons and the like where we
// need something lighter than
// $ui-primary-color but darker
// than $ui-secondary-color.