mastodon/app/javascript/flavours/glitch/styles/components/status.scss

737 lines
12 KiB
SCSS
Raw Normal View History

2018-01-13 23:48:18 +01:00
.status__content--with-action {
cursor: pointer;
}
.status__content {
2018-01-14 00:47:59 +01:00
position: relative;
margin: 10px 0;
padding: 0 12px;
2018-01-13 23:48:18 +01:00
font-size: 15px;
line-height: 20px;
word-wrap: break-word;
font-weight: 400;
2018-01-14 00:47:59 +01:00
overflow: visible;
padding-top: 5px;
2018-01-13 23:48:18 +01:00
&:focus {
outline: 0;
}
.emojione {
width: 20px;
height: 20px;
margin: -3px 0 0;
}
p {
margin-bottom: 20px;
2018-01-15 00:31:00 +01:00
white-space: pre-wrap;
2018-01-13 23:48:18 +01:00
&:last-child {
margin-bottom: 0;
}
}
a {
color: $secondary-text-color;
2018-01-13 23:48:18 +01:00
text-decoration: none;
&:hover {
text-decoration: underline;
.fa {
color: lighten($dark-text-color, 7%);
2018-01-13 23:48:18 +01:00
}
}
&.mention {
&:hover {
text-decoration: none;
span {
text-decoration: underline;
}
}
}
.fa {
color: $dark-text-color;
2018-01-13 23:48:18 +01:00
}
}
2018-01-14 00:47:59 +01:00
.status__content__spoiler {
2018-01-15 00:31:00 +01:00
display: none;
&.status__content__spoiler--visible {
display: block;
2018-01-14 00:47:59 +01:00
}
}
2018-01-13 23:48:18 +01:00
.status__content__spoiler-link {
background: lighten($ui-base-color, 30%);
&:hover {
background: lighten($ui-base-color, 33%);
text-decoration: none;
}
}
}
.status__content__spoiler-link {
display: inline-block;
border-radius: 2px;
2018-01-14 00:47:59 +01:00
background: lighten($ui-base-color, 30%);
border: none;
color: $inverted-text-color;
2018-01-13 23:48:18 +01:00
font-weight: 500;
font-size: 11px;
2018-01-14 00:47:59 +01:00
padding: 0 5px;
2018-01-13 23:48:18 +01:00
text-transform: uppercase;
line-height: inherit;
cursor: pointer;
2018-01-14 00:47:59 +01:00
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;
}
}
.notif-cleaning {
.status, .notification-follow {
padding-right: ($dismiss-overlay-width + 0.5rem);
}
2018-01-13 23:48:18 +01:00
}
.status__prepend-icon-wrapper {
2018-01-14 00:47:59 +01:00
float: left;
margin: 0 10px 0 -58px;
width: 48px;
text-align: right;
}
.notification-follow {
position: relative;
// same like Status
border-bottom: 1px solid lighten($ui-base-color, 8%);
.account {
border-bottom: 0 none;
}
2018-01-13 23:48:18 +01:00
}
.focusable {
&:focus {
outline: 0;
background: lighten($ui-base-color, 4%);
.status.status-direct {
background: lighten($ui-base-color, 12%);
&.muted {
background: transparent;
}
}
.detailed-status,
.detailed-status__action-bar {
background: lighten($ui-base-color, 8%);
}
}
}
.status {
padding: 8px 10px;
position: relative;
2018-01-14 00:47:59 +01:00
height: auto;
2018-01-13 23:48:18 +01:00
border-bottom: 1px solid lighten($ui-base-color, 8%);
cursor: default;
@supports (-ms-overflow-style: -ms-autohiding-scrollbar) {
// Add margin to avoid Edge auto-hiding scrollbar appearing over content.
// On Edge 16 this is 16px and Edge <=15 it's 12px, so aim for 16px.
padding-right: 26px; // 10px + 16px
}
@keyframes fade {
0% { opacity: 0; }
100% { opacity: 1; }
}
opacity: 1;
animation: fade 150ms linear;
.video-player {
margin-top: 8px;
}
&.status-direct {
background: lighten($ui-base-color, 8%);
}
&.light {
.status__relative-time {
color: $lighter-text-color;
2018-01-13 23:48:18 +01:00
}
.status__display-name {
color: $inverted-text-color;
2018-01-13 23:48:18 +01:00
}
.display-name {
strong {
color: $inverted-text-color;
2018-01-13 23:48:18 +01:00
}
span {
color: $lighter-text-color;
2018-01-13 23:48:18 +01:00
}
}
.status__content {
color: $inverted-text-color;
2018-01-13 23:48:18 +01:00
a {
color: $highlight-text-color;
2018-01-13 23:48:18 +01:00
}
a.status__content__spoiler-link {
color: $primary-text-color;
background: $ui-primary-color;
&:hover {
background: lighten($ui-primary-color, 8%);
}
}
}
2018-01-14 03:13:55 +01:00
}
2018-01-14 00:47:59 +01:00
2018-01-14 03:13:55 +01:00
&.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: "";
}
.display-name:hover .display-name__html {
text-decoration: none;
}
.status__content {
height: 20px;
overflow: hidden;
text-overflow: ellipsis;
padding-top: 0;
2018-01-14 03:13:55 +01:00
&:after {
content: "";
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
background: linear-gradient(rgba($ui-base-color, 0), rgba($ui-base-color, 1));
pointer-events: none;
}
2018-01-14 03:13:55 +01:00
a:hover {
2018-01-14 00:47:59 +01:00
text-decoration: none;
}
}
&:focus > .status__content:after {
background: linear-gradient(rgba(lighten($ui-base-color, 4%), 0), rgba(lighten($ui-base-color, 4%), 1));
}
&.status-direct> .status__content:after {
background: linear-gradient(rgba(lighten($ui-base-color, 8%), 0), rgba(lighten($ui-base-color, 8%), 1));
}
.notification__message {
margin-bottom: 0;
}
.status__info .notification__message > span {
white-space: nowrap;
}
2018-01-14 03:13:55 +01:00
}
2018-01-14 00:47:59 +01:00
2018-01-14 03:13:55 +01:00
.notification__message {
2018-03-13 01:57:28 +01:00
margin: -10px 0px 10px 0;
2018-01-13 23:48:18 +01:00
}
}
.notification-favourite {
.status.status-direct {
background: transparent;
.icon-button.disabled {
color: lighten($action-button-color, 13%);
2018-01-13 23:48:18 +01:00
}
}
}
.status__relative-time {
2018-01-14 00:47:59 +01:00
display: inline-block;
margin-left: auto;
padding-left: 18px;
width: 120px;
color: $dark-text-color;
2018-01-13 23:48:18 +01:00
font-size: 14px;
2018-01-14 00:47:59 +01:00
text-align: right;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
2018-01-13 23:48:18 +01:00
}
.status__display-name {
2018-01-14 00:47:59 +01:00
margin: 0 auto 0 0;
color: $dark-text-color;
2018-01-14 00:47:59 +01:00
overflow: hidden;
2018-01-13 23:48:18 +01:00
}
2018-03-13 01:57:28 +01:00
.status__info__account .status__display-name {
2018-01-13 23:48:18 +01:00
display: block;
max-width: 100%;
}
.status__info {
display: flex;
2018-01-13 23:48:18 +01:00
font-size: 15px;
2018-03-19 04:49:30 +01:00
> span {
text-overflow: ellipsis;
2018-03-19 04:49:30 +01:00
overflow: hidden;
}
.notification__message > span {
word-wrap: break-word;
}
2018-01-14 00:47:59 +01:00
}
.status__info__icons {
margin-left: auto;
2018-03-19 04:49:30 +01:00
display: flex;
align-items: center;
height: 1em;
color: transparentize($lighter-text-color, 0.1);
2018-01-14 00:47:59 +01:00
.status__visibility-icon {
padding-left: 6px;
}
2018-01-13 23:48:18 +01:00
}
2018-03-13 01:57:28 +01:00
.status__info__account {
display: flex;
}
2018-01-13 23:48:18 +01:00
.status-check-box {
border-bottom: 1px solid $ui-secondary-color;
display: flex;
.status-check-box__status {
margin: 10px 0 10px 10px;
flex: 1;
.media-gallery {
max-width: 250px;
}
2018-01-14 00:47:59 +01:00
.status__content {
padding: 0;
white-space: normal;
}
.video-player {
margin-top: 8px;
max-width: 250px;
}
.media-gallery__item-thumbnail {
cursor: default;
2018-01-14 00:47:59 +01:00
}
2018-01-13 23:48:18 +01:00
}
}
.status-check-box-toggle {
align-items: center;
display: flex;
flex: 0 0 auto;
justify-content: center;
padding: 10px;
}
.status__prepend {
2018-01-14 00:47:59 +01:00
margin: -10px -10px 10px;
color: $dark-text-color;
2018-01-14 00:47:59 +01:00
padding: 8px 10px 0 68px;
2018-01-13 23:48:18 +01:00
font-size: 14px;
position: relative;
.status__display-name strong {
color: $dark-text-color;
2018-01-13 23:48:18 +01:00
}
> span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
}
.status__action-bar {
align-items: center;
display: flex;
margin-top: 8px;
}
.status__action-bar-button {
float: left;
margin-right: 18px;
}
.status__action-bar-dropdown {
float: left;
height: 23.15px;
width: 23.15px;
}
.detailed-status__action-bar-dropdown {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.detailed-status {
background: lighten($ui-base-color, 4%);
padding: 14px 10px;
.status__content {
font-size: 19px;
line-height: 24px;
.emojione {
width: 24px;
height: 24px;
margin: -1px 0 0;
}
}
.video-player {
margin-top: 8px;
}
}
.detailed-status__meta {
margin-top: 15px;
color: $dark-text-color;
2018-01-13 23:48:18 +01:00
font-size: 14px;
line-height: 18px;
}
.detailed-status__action-bar {
background: lighten($ui-base-color, 4%);
border-top: 1px solid lighten($ui-base-color, 8%);
border-bottom: 1px solid lighten($ui-base-color, 8%);
display: flex;
flex-direction: row;
padding: 10px 0;
}
.detailed-status__link {
color: inherit;
text-decoration: none;
}
.detailed-status__favorites,
.detailed-status__reblogs {
display: inline-block;
font-weight: 500;
font-size: 12px;
margin-left: 6px;
}
.status__display-name,
.status__relative-time,
.detailed-status__display-name,
.detailed-status__datetime,
.detailed-status__application,
.account__display-name {
text-decoration: none;
}
.status__display-name,
.account__display-name {
strong {
color: $primary-text-color;
}
}
.muted {
.emojione {
opacity: 0.5;
}
}
.status__display-name,
.reply-indicator__display-name,
.detailed-status__display-name,
.account__display-name {
&:hover strong {
text-decoration: underline;
}
}
.account__display-name strong {
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
.detailed-status__application,
.detailed-status__datetime {
color: inherit;
}
.detailed-status__display-name {
color: $secondary-text-color;
2018-01-13 23:48:18 +01:00
display: block;
line-height: 24px;
margin-bottom: 15px;
overflow: hidden;
strong,
span {
display: block;
text-overflow: ellipsis;
overflow: hidden;
}
strong {
font-size: 16px;
color: $primary-text-color;
}
}
.detailed-status__display-avatar {
float: left;
margin-right: 10px;
}
.status__avatar {
2018-01-14 00:47:59 +01:00
flex: none;
margin: 0 10px 0 0;
2018-01-13 23:48:18 +01:00
height: 48px;
width: 48px;
}
.muted {
.status__content p,
.status__content a {
color: $dark-text-color;
2018-01-13 23:48:18 +01:00
}
.status__display-name strong {
color: $dark-text-color;
2018-01-13 23:48:18 +01:00
}
.status__avatar {
opacity: 0.5;
}
a.status__content__spoiler-link {
background: $ui-base-lighter-color;
color: $inverted-text-color;
2018-01-13 23:48:18 +01:00
&:hover {
background: lighten($ui-base-color, 29%);
text-decoration: none;
}
}
}
.status__relative-time,
.detailed-status__datetime {
&:hover {
text-decoration: underline;
}
}
.status-card {
display: flex;
cursor: pointer;
font-size: 14px;
border: 1px solid lighten($ui-base-color, 8%);
border-radius: 4px;
color: $dark-text-color;
2018-01-13 23:48:18 +01:00
margin-top: 14px;
text-decoration: none;
overflow: hidden;
&:hover {
background: lighten($ui-base-color, 8%);
}
}
.status-card-video,
.status-card-rich,
.status-card-photo {
margin-top: 14px;
overflow: hidden;
iframe {
width: 100%;
height: auto;
}
}
.status-card-photo {
cursor: zoom-in;
display: block;
text-decoration: none;
width: 100%;
height: auto;
margin: 0;
}
.status-card-video {
iframe {
width: 100%;
height: 100%;
}
}
.status-card__title {
display: block;
font-weight: 500;
margin-bottom: 5px;
color: $darker-text-color;
2018-01-13 23:48:18 +01:00
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.status-card__content {
flex: 1 1 auto;
overflow: hidden;
padding: 14px 14px 14px 8px;
}
.status-card__description {
color: $darker-text-color;
2018-01-13 23:48:18 +01:00
}
.status-card__host {
display: block;
margin-top: 5px;
font-size: 13px;
}
.status-card__image {
flex: 0 0 100px;
background: lighten($ui-base-color, 8%);
}
.status-card.horizontal {
display: block;
.status-card__image {
width: 100%;
}
.status-card__image-image {
border-radius: 4px 4px 0 0;
}
.status-card__title {
white-space: inherit;
}
}
.status-card__image-image {
border-radius: 4px 0 0 4px;
display: block;
margin: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.status__video-player {
display: flex;
align-items: center;
background: $base-shadow-color;
box-sizing: border-box;
cursor: default; /* May not be needed */
margin-top: 8px;
overflow: hidden;
position: relative;
@include fullwidth-gallery;
}
.status__video-player-video {
height: 100%;
object-fit: cover;
position: relative;
top: 50%;
transform: translateY(-50%);
width: 100%;
z-index: 1;
&:not(.letterbox) {
height: 100%;
object-fit: cover;
}
}
.status__video-player-expand,
.status__video-player-mute {
color: $primary-text-color;
opacity: 0.8;
position: absolute;
right: 4px;
text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color;
}
.status__video-player-spoiler {
display: none;
color: $primary-text-color;
left: 4px;
position: absolute;
text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color;
top: 4px;
z-index: 100;
&.status__video-player-spoiler--visible {
display: block;
}
}
.status__video-player-expand {
bottom: 4px;
z-index: 100;
}
.status__video-player-mute {
top: 4px;
z-index: 5;
}