hometown/app/javascript/styles/mastodon/components.scss

5144 lines
87 KiB
SCSS
Raw Normal View History

.app-body {
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
2016-08-31 20:58:10 +00:00
.button {
background-color: darken($ui-highlight-color, 3%);
2016-09-27 21:12:33 +00:00
border: 10px none;
border-radius: 4px;
box-sizing: border-box;
color: $primary-text-color;
cursor: pointer;
display: inline-block;
font-family: inherit;
2016-09-27 21:12:33 +00:00
font-size: 14px;
font-weight: 500;
height: 36px;
letter-spacing: 0;
2016-09-27 21:12:33 +00:00
line-height: 36px;
overflow: hidden;
padding: 0 16px;
position: relative;
text-align: center;
text-transform: uppercase;
2016-09-27 21:12:33 +00:00
text-decoration: none;
text-overflow: ellipsis;
2017-03-24 23:01:43 +00:00
transition: all 100ms ease-in;
white-space: nowrap;
width: auto;
2016-08-31 20:58:10 +00:00
&:active,
&:focus,
&:hover {
background-color: lighten($ui-highlight-color, 7%);
2017-03-24 23:01:43 +00:00
transition: all 200ms ease-out;
2016-08-31 20:58:10 +00:00
}
&:disabled {
background-color: $ui-primary-color;
2016-10-02 13:28:47 +00:00
cursor: default;
2016-08-31 20:58:10 +00:00
}
&.button-primary,
&.button-alternative,
&.button-secondary,
&.button-alternative-2 {
font-size: 16px;
line-height: 36px;
height: auto;
text-transform: none;
padding: 4px 16px;
}
&.button-alternative {
color: $ui-base-color;
background: $ui-primary-color;
&:active,
&:focus,
&:hover {
background-color: lighten($ui-primary-color, 4%);
}
}
&.button-alternative-2 {
background: $ui-base-lighter-color;
&:active,
&:focus,
&:hover {
background-color: lighten($ui-base-lighter-color, 4%);
}
}
&.button-secondary {
color: $ui-primary-color;
background: transparent;
padding: 3px 15px;
border: 1px solid $ui-primary-color;
&:active,
&:focus,
&:hover {
border-color: lighten($ui-primary-color, 4%);
color: lighten($ui-primary-color, 4%);
}
}
&.button--block {
display: block;
width: 100%;
}
}
.column__wrapper {
display: flex;
flex: 1 1 auto;
position: relative;
2016-08-31 20:58:10 +00:00
}
.column-icon {
background: lighten($ui-base-color, 4%);
color: $ui-primary-color;
cursor: pointer;
font-size: 16px;
padding: 15px;
position: absolute;
right: 0;
top: -48px;
z-index: 3;
&:hover {
color: lighten($ui-primary-color, 7%);
}
}
2016-08-31 20:58:10 +00:00
.icon-button {
2017-03-24 23:01:43 +00:00
display: inline-block;
padding: 0;
color: $ui-base-lighter-color;
border: none;
background: transparent;
cursor: pointer;
transition: color 100ms ease-in;
2016-08-31 20:58:10 +00:00
&:hover,
&:active,
&:focus {
color: lighten($ui-base-color, 33%);
transition: color 200ms ease-out;
2016-08-31 20:58:10 +00:00
}
&.disabled {
color: lighten($ui-base-color, 13%);
2016-08-31 20:58:10 +00:00
cursor: default;
}
&.active {
color: $ui-highlight-color;
}
2017-02-28 23:53:11 +00:00
2017-03-24 23:01:43 +00:00
&::-moz-focus-inner {
border: 0;
}
&::-moz-focus-inner,
&:focus,
&:active {
2017-03-24 23:01:43 +00:00
outline: 0 !important;
}
&.inverted {
color: lighten($ui-base-color, 33%);
2017-03-24 23:01:43 +00:00
&:hover,
&:active,
&:focus {
color: $ui-base-lighter-color;
2017-03-24 23:01:43 +00:00
}
&.disabled {
color: $ui-primary-color;
}
2017-03-24 23:01:43 +00:00
&.active {
color: $ui-highlight-color;
2017-03-24 23:01:43 +00:00
&.disabled {
color: lighten($ui-highlight-color, 13%);
}
2017-03-24 23:01:43 +00:00
}
}
&.overlayed {
box-sizing: content-box;
background: rgba($base-overlay-background, 0.6);
color: rgba($primary-text-color, 0.7);
border-radius: 4px;
padding: 2px;
&:hover {
background: rgba($base-overlay-background, 0.9);
}
}
2017-03-24 23:01:43 +00:00
}
.text-icon-button {
color: lighten($ui-base-color, 33%);
2017-03-24 23:01:43 +00:00
border: none;
background: transparent;
cursor: pointer;
font-weight: 600;
2017-03-26 11:08:15 +00:00
font-size: 11px;
2017-03-24 23:01:43 +00:00
padding: 0 3px;
line-height: 27px;
outline: 0;
transition: color 100ms ease-in;
2017-03-24 23:01:43 +00:00
&:hover,
&:active,
&:focus {
color: $ui-base-lighter-color;
transition: color 200ms ease-out;
2017-03-24 23:01:43 +00:00
}
&.disabled {
color: lighten($ui-base-color, 13%);
2017-03-24 23:01:43 +00:00
cursor: default;
}
&.active {
color: $ui-highlight-color;
2017-03-24 23:01:43 +00:00
}
&::-moz-focus-inner {
border: 0;
}
&::-moz-focus-inner,
&:focus,
&:active {
2017-03-24 23:01:43 +00:00
outline: 0 !important;
2017-02-28 23:53:11 +00:00
}
2016-08-31 20:58:10 +00:00
}
.dropdown-menu {
position: absolute;
transform-origin: 50% 0;
}
2017-03-01 23:57:55 +00:00
.dropdown--active .icon-button {
color: $ui-highlight-color;
2017-03-01 23:57:55 +00:00
}
.dropdown--active::after {
@media screen and (min-width: 631px) {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 4.5px 7.8px;
border-color: transparent transparent $ui-secondary-color;
bottom: 8px;
right: 104px;
}
}
.invisible {
font-size: 0;
line-height: 0;
2017-01-24 19:07:46 +00:00
display: inline-block;
width: 0;
height: 0;
position: absolute;
img,
svg {
margin: 0 !important;
border: 0 !important;
padding: 0 !important;
width: 0 !important;
height: 0 !important;
}
}
.ellipsis {
&::after {
content: "";
}
}
.lightbox .icon-button {
color: $ui-base-color;
}
.compose-form {
padding: 10px;
.compose-form__warning {
color: darken($ui-secondary-color, 65%);
margin-bottom: 15px;
background: $ui-primary-color;
box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3);
padding: 8px 10px;
border-radius: 4px;
font-size: 13px;
font-weight: 400;
strong {
color: darken($ui-secondary-color, 65%);
font-weight: 500;
@each $lang in $cjk-langs {
&:lang(#{$lang}) {
font-weight: 700;
}
}
}
a {
color: darken($ui-primary-color, 33%);
font-weight: 500;
text-decoration: underline;
&:hover,
&:active,
&:focus {
text-decoration: none;
}
}
}
.compose-form__autosuggest-wrapper {
position: relative;
.emoji-picker-dropdown {
position: absolute;
right: 5px;
top: 5px;
}
}
.autosuggest-textarea,
.spoiler-input {
position: relative;
}
.autosuggest-textarea__textarea,
.spoiler-input__input {
display: block;
box-sizing: border-box;
width: 100%;
margin: 0;
color: $ui-base-color;
background: $simple-background-color;
padding: 10px;
font-family: inherit;
font-size: 14px;
resize: vertical;
border: 0;
outline: 0;
&:focus {
outline: 0;
}
@media screen and (max-width: 600px) {
font-size: 16px;
}
}
.spoiler-input__input {
border-radius: 4px;
}
2017-03-24 23:01:43 +00:00
.autosuggest-textarea__textarea {
min-height: 100px;
border-radius: 4px 4px 0 0;
padding-bottom: 0;
padding-right: 10px + 22px;
resize: none;
@media screen and (max-width: 600px) {
height: 100px !important; // prevent auto-resize textarea
resize: vertical;
}
}
.autosuggest-textarea__suggestions {
box-sizing: border-box;
display: none;
position: absolute;
top: 100%;
width: 100%;
z-index: 99;
box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
background: $ui-secondary-color;
border-radius: 0 0 4px 4px;
color: $ui-base-color;
font-size: 14px;
padding: 6px;
2017-03-24 23:01:43 +00:00
&.autosuggest-textarea__suggestions--visible {
display: block;
}
2017-03-24 23:01:43 +00:00
}
.autosuggest-textarea__suggestions__item {
padding: 10px;
cursor: pointer;
border-radius: 4px;
&:hover,
&:focus,
&:active,
&.selected {
background: darken($ui-secondary-color, 10%);
}
}
.autosuggest-account,
.autosuggest-emoji {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
line-height: 18px;
font-size: 14px;
}
.autosuggest-account-icon,
.autosuggest-emoji img {
display: block;
margin-right: 8px;
width: 16px;
height: 16px;
}
.autosuggest-account .display-name__account {
color: lighten($ui-base-color, 36%);
}
.compose-form__modifiers {
color: $ui-base-color;
font-family: inherit;
font-size: 14px;
background: $simple-background-color;
.compose-form__upload-wrapper {
overflow: hidden;
}
.compose-form__uploads-wrapper {
display: flex;
flex-direction: row;
padding: 5px;
flex-wrap: wrap;
}
.compose-form__upload {
flex: 1 1 0;
min-width: 40%;
margin: 5px;
&__actions {
background: linear-gradient(180deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent);
display: flex;
align-items: flex-start;
justify-content: space-between;
opacity: 0;
transition: opacity .1s ease;
.icon-button {
flex: 0 1 auto;
color: $ui-secondary-color;
font-size: 14px;
font-weight: 500;
padding: 10px;
font-family: inherit;
&:hover,
&:focus,
&:active {
color: lighten($ui-secondary-color, 4%);
}
}
&.active {
opacity: 1;
}
}
&-description {
position: absolute;
z-index: 2;
bottom: 0;
left: 0;
right: 0;
box-sizing: border-box;
background: linear-gradient(0deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent);
padding: 10px;
opacity: 0;
transition: opacity .1s ease;
input {
background: transparent;
color: $ui-secondary-color;
border: 0;
padding: 0;
margin: 0;
width: 100%;
font-family: inherit;
font-size: 14px;
font-weight: 500;
&:focus {
color: $white;
}
&::placeholder {
opacity: 0.54;
color: $ui-secondary-color;
}
}
&.active {
opacity: 1;
}
}
}
.compose-form__upload-thumbnail {
border-radius: 4px;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 140px;
width: 100%;
overflow: hidden;
}
}
.compose-form__buttons-wrapper {
padding: 10px;
background: darken($simple-background-color, 8%);
border-radius: 0 0 4px 4px;
display: flex;
justify-content: space-between;
.compose-form__buttons {
display: flex;
.compose-form__upload-button-icon {
line-height: 27px;
}
.compose-form__sensitive-button {
display: none;
&.compose-form__sensitive-button--visible {
display: block;
}
.compose-form__sensitive-button__icon {
line-height: 27px;
}
}
}
2016-08-31 20:58:10 +00:00
.icon-button {
box-sizing: content-box;
padding: 0 3px;
}
2016-08-31 20:58:10 +00:00
.character-counter__wrapper {
align-self: center;
margin-right: 4px;
.character-counter {
cursor: default;
font-family: 'mastodon-font-sans-serif', sans-serif;
font-size: 14px;
font-weight: 600;
color: lighten($ui-base-color, 12%);
&.character-counter--over {
color: $warning-red;
}
}
}
}
.compose-form__publish {
display: flex;
justify-content: flex-end;
min-width: 0;
.compose-form__publish-button-wrapper {
overflow: hidden;
padding-top: 10px;
}
}
}
2016-11-08 20:45:51 +00:00
.emojione {
display: inline-block;
font-size: inherit;
vertical-align: middle;
object-fit: contain;
2016-11-08 20:45:51 +00:00
margin: -.2ex .15em .2ex;
2016-11-15 17:38:57 +00:00
width: 16px;
height: 16px;
2016-11-08 20:45:51 +00:00
img {
width: auto;
}
}
.reply-indicator {
2017-03-24 23:01:43 +00:00
border-radius: 4px 4px 0 0;
position: relative;
bottom: -2px;
background: $ui-primary-color;
padding: 10px;
}
.reply-indicator__header {
margin-bottom: 5px;
overflow: hidden;
}
.reply-indicator__cancel {
float: right;
line-height: 24px;
}
.reply-indicator__display-name {
color: $ui-base-color;
display: block;
max-width: 100%;
line-height: 24px;
overflow: hidden;
padding-right: 25px;
text-decoration: none;
}
.reply-indicator__display-avatar {
float: left;
margin-right: 5px;
}
.status__content--with-action {
cursor: pointer;
}
.status__content,
.reply-indicator__content {
2016-08-31 14:48:21 +00:00
font-size: 15px;
line-height: 20px;
word-wrap: break-word;
2017-01-26 22:34:40 +00:00
font-weight: 400;
overflow: hidden;
white-space: pre-wrap;
padding-top: 2px;
2016-08-31 14:48:21 +00:00
2017-12-07 23:03:25 +00:00
&:focus {
outline: 0;
}
&.status__content--with-spoiler {
white-space: normal;
.status__content__text {
white-space: pre-wrap;
}
}
2016-11-08 20:45:51 +00:00
.emojione {
width: 20px;
height: 20px;
margin: -3px 0 0;
2016-11-08 20:45:51 +00:00
}
2016-09-10 08:14:36 +00:00
p {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
2016-08-24 19:08:00 +00:00
a {
color: $ui-secondary-color;
2016-08-24 19:08:00 +00:00
text-decoration: none;
&:hover {
text-decoration: underline;
.fa {
color: lighten($ui-base-color, 40%);
}
2016-08-24 19:08:00 +00:00
}
&.mention {
&:hover {
text-decoration: none;
span {
text-decoration: underline;
}
}
}
.fa {
color: lighten($ui-base-color, 30%);
}
2016-08-24 19:08:00 +00:00
}
.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__text--visible {
display: block;
}
}
2016-08-24 19:08:00 +00:00
}
2016-08-31 20:58:10 +00:00
.status__content__spoiler-link {
display: inline-block;
border-radius: 2px;
background: transparent;
border: 0;
color: lighten($ui-base-color, 8%);
font-weight: 700;
font-size: 11px;
padding: 0 6px;
text-transform: uppercase;
line-height: 20px;
cursor: pointer;
vertical-align: middle;
}
.status__prepend-icon-wrapper {
left: -26px;
position: absolute;
}
.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;
padding-left: 68px;
position: relative;
min-height: 48px;
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%);
.icon-button.disabled {
color: lighten($ui-base-color, 16%);
}
}
2017-04-11 19:24:17 +00:00
&.light {
.status__relative-time {
color: $ui-primary-color;
2017-04-11 19:24:17 +00:00
}
.status__display-name {
color: $ui-base-color;
2017-04-11 19:24:17 +00:00
}
.display-name {
strong {
color: $ui-base-color;
2017-04-11 19:24:17 +00:00
}
span {
color: $ui-primary-color;
2017-04-11 19:24:17 +00:00
}
}
.status__content {
color: $ui-base-color;
2017-04-11 19:24:17 +00:00
a {
color: $ui-highlight-color;
2017-04-11 19:24:17 +00:00
}
a.status__content__spoiler-link {
color: $primary-text-color;
background: $ui-primary-color;
2017-04-11 19:24:17 +00:00
&:hover {
background: lighten($ui-primary-color, 8%);
2017-04-11 19:24:17 +00:00
}
}
}
}
}
.notification-favourite {
.status.status-direct {
background: transparent;
.icon-button.disabled {
color: lighten($ui-base-color, 13%);
}
}
}
.status__relative-time {
color: $ui-base-lighter-color;
float: right;
font-size: 14px;
}
.status__display-name {
color: $ui-base-lighter-color;
}
.status__info .status__display-name {
display: block;
max-width: 100%;
padding-right: 25px;
}
.status__info {
font-size: 15px;
}
.status-check-box {
border-bottom: 1px solid $ui-secondary-color;
display: flex;
2018-03-04 19:29:12 +00:00
.status-check-box__status {
margin: 10px 0 10px 10px;
flex: 1;
.media-gallery {
max-width: 250px;
}
.status__content {
padding: 0;
white-space: normal;
}
.video-player {
margin-top: 8px;
max-width: 250px;
}
.media-gallery__item-thumbnail {
cursor: default;
}
}
}
.status-check-box-toggle {
align-items: center;
display: flex;
flex: 0 0 auto;
justify-content: center;
padding: 10px;
}
.status__prepend {
margin-left: 68px;
color: $ui-base-lighter-color;
padding: 8px 0;
padding-bottom: 2px;
font-size: 14px;
position: relative;
.status__display-name strong {
color: $ui-base-lighter-color;
}
> 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;
2016-11-08 20:45:51 +00:00
.emojione {
width: 24px;
height: 24px;
margin: -1px 0 0;
2016-11-08 20:45:51 +00:00
}
.status__content__spoiler-link {
line-height: 24px;
margin: -1px 0 0;
}
}
.video-player {
margin-top: 8px;
}
}
.detailed-status__meta {
margin-top: 15px;
color: $ui-base-lighter-color;
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;
}
2016-08-31 20:58:10 +00:00
.reply-indicator__content {
color: $ui-base-color;
2016-08-31 20:58:10 +00:00
font-size: 14px;
a {
color: lighten($ui-base-color, 20%);
2016-08-31 20:58:10 +00:00
}
}
.account {
padding: 10px;
border-bottom: 1px solid lighten($ui-base-color, 8%);
.account__display-name {
flex: 1 1 auto;
display: block;
color: $ui-primary-color;
overflow: hidden;
text-decoration: none;
font-size: 14px;
}
}
.account__wrapper {
display: flex;
}
.account__avatar-wrapper {
float: left;
margin-left: 12px;
margin-right: 12px;
}
.account__avatar {
@include avatar-radius();
position: relative;
cursor: pointer;
&-inline {
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}
}
.account__avatar-overlay {
@include avatar-size(48px);
&-base {
@include avatar-radius();
@include avatar-size(36px);
}
&-overlay {
@include avatar-radius();
@include avatar-size(24px);
position: absolute;
bottom: 0;
right: 0;
z-index: 1;
}
}
.account__relationship {
height: 18px;
padding: 10px;
Optional notification muting (#5087) * Add a hide_notifications column to mutes * Add muting_notifications? and a notifications argument to mute! * block notifications in notify_service from hard muted accounts * Add specs for how mute! interacts with muting_notifications? * specs testing that hide_notifications in mutes actually hides notifications * Add support for muting notifications in MuteService * API support for muting notifications (and specs) * Less gross passing of notifications flag * Break out a separate mute modal with a hide-notifications checkbox. * Convert profile header mute to use mute modal * Satisfy eslint. * specs for MuteService notifications params * add trailing newlines to files for Pork :) * Put the label for the hide notifications checkbox in a label element. * Add a /api/v1/mutes/details route that just returns the array of mutes. * Define a serializer for /api/v1/mutes/details * Add more specs for the /api/v1/mutes/details endpoint * Expose whether a mute hides notifications in the api/v1/relationships endpoint * Show whether muted users' notifications are muted in account lists * Allow modifying the hide_notifications of a mute with the /api/v1/accounts/:id/mute endpoint * make the hide/unhide notifications buttons work * satisfy eslint * In probably dead code, replace a dispatch of muteAccount that was skipping the modal with launching the mute modal. * fix a missing import * add an explanatory comment to AccountInteractions * Refactor handling of default params for muting to make code cleaner * minor code style fixes oops * Fixed a typo that was breaking the account mute API endpoint * Apply white-space: nowrap to account relationships icons * Fix code style issues * Remove superfluous blank line * Rename /api/v1/mutes/details -> /api/v2/mutes * Don't serialize "account" in MuteSerializer Doing so is somewhat unnecessary since it's always the current user's account. * Fix wrong variable name in api/v2/mutes * Use Toggle in place of checkbox in the mute modal. * Make the Toggle in the mute modal look better * Code style changes in specs and removed an extra space * Code review suggestions from akihikodaki Also fixed a syntax error in tests for AccountInteractions. * Make AddHideNotificationsToMute Concurrent It's not clear how much this will benefit instances in practice, as the number of mutes tends to be pretty small, but this should prevent any blocking migrations nonetheless. * Fix up migration things * Remove /api/v2/mutes
2017-11-15 02:56:41 +00:00
white-space: nowrap;
}
.account__header {
flex: 0 0 auto;
background: lighten($ui-base-color, 4%);
text-align: center;
background-size: cover;
background-position: center;
position: relative;
&.inactive {
opacity: 0.5;
.account__header__avatar {
filter: grayscale(100%);
}
.account__header__username {
color: $ui-primary-color;
}
}
& > div {
background: rgba(lighten($ui-base-color, 4%), 0.9);
padding: 20px 10px;
}
.account__header__content {
color: $ui-secondary-color;
}
.account__header__display-name {
color: $primary-text-color;
display: inline-block;
width: 100%;
font-size: 20px;
line-height: 27px;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
}
.account__header__username {
color: $ui-highlight-color;
font-size: 14px;
font-weight: 400;
display: block;
margin-bottom: 10px;
overflow: hidden;
text-overflow: ellipsis;
}
}
.account__disclaimer {
padding: 10px;
border-top: 1px solid lighten($ui-base-color, 8%);
color: $ui-base-lighter-color;
strong {
font-weight: 500;
@each $lang in $cjk-langs {
&:lang(#{$lang}) {
font-weight: 700;
}
}
}
a {
font-weight: 500;
color: inherit;
text-decoration: underline;
&:hover,
&:focus,
&:active {
text-decoration: none;
}
}
}
.account__header__content {
color: $ui-primary-color;
font-size: 14px;
2017-01-26 22:34:40 +00:00
font-weight: 400;
overflow: hidden;
word-break: normal;
word-wrap: break-word;
p {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
a {
color: inherit;
text-decoration: underline;
&:hover {
text-decoration: none;
}
}
}
2016-11-15 17:38:57 +00:00
.account__header__display-name {
.emojione {
width: 25px;
height: 25px;
}
}
.account__action-bar {
border-top: 1px solid lighten($ui-base-color, 8%);
border-bottom: 1px solid lighten($ui-base-color, 8%);
line-height: 36px;
overflow: hidden;
flex: 0 0 auto;
display: flex;
}
.account__action-bar-dropdown {
flex: 0 1 calc(50% - 140px);
padding: 10px;
.dropdown--active {
.dropdown__content.dropdown__right {
left: 6px;
right: initial;
}
&::after {
bottom: initial;
margin-left: 11px;
margin-top: -7px;
right: initial;
}
}
}
.account__action-bar-links {
display: flex;
flex: 1 1 auto;
line-height: 18px;
}
.account__action-bar__tab {
text-decoration: none;
overflow: hidden;
flex: 0 1 80px;
border-left: 1px solid lighten($ui-base-color, 8%);
padding: 10px 5px;
& > span {
display: block;
text-transform: uppercase;
font-size: 11px;
color: $ui-primary-color;
}
strong {
display: block;
font-size: 15px;
font-weight: 500;
color: $primary-text-color;
@each $lang in $cjk-langs {
&:lang(#{$lang}) {
font-weight: 700;
}
}
}
abbr {
color: $ui-base-lighter-color;
}
}
.account__header__avatar {
background-size: 90px 90px;
display: block;
height: 90px;
margin: 0 auto 10px;
overflow: hidden;
width: 90px;
}
.account-authorize {
padding: 14px 10px;
.detailed-status__display-name {
display: block;
margin-bottom: 15px;
overflow: hidden;
}
}
.account-authorize__avatar {
float: left;
margin-right: 10px;
}
.status__display-name,
.status__relative-time,
.detailed-status__display-name,
.detailed-status__datetime,
.detailed-status__application,
.account__display-name {
2016-08-31 20:58:10 +00:00
text-decoration: none;
}
.status__display-name,
.account__display-name {
2016-09-01 12:12:11 +00:00
strong {
color: $primary-text-color;
2016-09-01 12:12:11 +00:00
}
}
.muted {
.emojione {
opacity: 0.5;
}
2016-09-01 12:12:11 +00:00
}
.status__display-name,
.reply-indicator__display-name,
.detailed-status__display-name,
.account__display-name {
&:hover strong {
text-decoration: underline;
2016-08-31 20:58:10 +00:00
}
}
.account__display-name strong {
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
.detailed-status__application,
.detailed-status__datetime {
color: inherit;
}
.detailed-status__display-name {
color: $ui-secondary-color;
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 {
height: 48px;
left: 10px;
position: absolute;
top: 10px;
width: 48px;
}
2016-11-20 18:39:18 +00:00
.muted {
.status__content p,
.status__content a {
color: $ui-base-lighter-color;
2016-11-20 18:39:18 +00:00
}
.status__display-name strong {
color: $ui-base-lighter-color;
2016-11-20 18:39:18 +00:00
}
.status__avatar {
opacity: 0.5;
}
a.status__content__spoiler-link {
background: $ui-base-lighter-color;
color: lighten($ui-base-color, 4%);
&:hover {
background: lighten($ui-base-color, 29%);
text-decoration: none;
}
}
2016-11-20 18:39:18 +00:00
}
.notification__message {
margin-left: 68px;
padding: 8px 0;
padding-bottom: 0;
cursor: default;
color: $ui-primary-color;
font-size: 15px;
position: relative;
.fa {
color: $ui-highlight-color;
}
> span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
}
.notification__favourite-icon-wrapper {
left: -26px;
position: absolute;
.star-icon {
color: $gold-star;
}
}
.star-icon.active {
color: $gold-star;
}
2016-11-20 18:39:18 +00:00
.notification__display-name {
color: inherit;
font-weight: 500;
2016-11-20 18:39:18 +00:00
text-decoration: none;
&:hover {
color: $primary-text-color;
2016-11-20 18:39:18 +00:00
text-decoration: underline;
}
}
.display-name {
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.display-name__html {
font-weight: 500;
}
.display-name__account {
font-size: 14px;
}
.status__relative-time,
.detailed-status__datetime {
2016-08-31 20:58:10 +00:00
&:hover {
text-decoration: underline;
}
}
.image-loader {
position: relative;
width: 100%;
height: 100%;
2016-09-29 22:00:45 +00:00
&.image-loader--loading {
display: flex;
align-content: center;
.image-loader__preview-canvas {
filter: blur(2px);
}
}
&.image-loader--amorphous .image-loader__preview-canvas {
display: none;
}
}
.zoomable-image {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-content: center;
2017-01-28 03:04:09 +00:00
}
.navigation-bar {
padding: 10px;
display: flex;
flex-shrink: 0;
cursor: default;
color: $ui-primary-color;
strong {
color: $primary-text-color;
}
a {
color: inherit;
}
.permalink {
text-decoration: none;
}
.icon-button {
pointer-events: none;
opacity: 0;
}
}
.navigation-bar__profile {
flex: 1 1 auto;
margin-left: 8px;
overflow: hidden;
}
.navigation-bar__profile-account {
display: block;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
}
.navigation-bar__profile-edit {
color: inherit;
text-decoration: none;
}
2016-09-29 22:00:45 +00:00
.dropdown {
display: inline-block;
}
.dropdown__content {
display: none;
position: absolute;
}
.dropdown-menu__separator {
border-bottom: 1px solid darken($ui-secondary-color, 8%);
2017-02-28 23:53:11 +00:00
margin: 5px 7px 6px;
height: 0;
}
.dropdown-menu {
background: $ui-secondary-color;
padding: 4px 0;
border-radius: 4px;
box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
ul {
list-style: none;
}
}
.dropdown-menu__arrow {
position: absolute;
width: 0;
height: 0;
border: 0 solid transparent;
&.left {
right: -5px;
margin-top: -5px;
border-width: 5px 0 5px 5px;
border-left-color: $ui-secondary-color;
}
&.top {
bottom: -5px;
margin-left: -13px;
border-width: 5px 7px 0;
border-top-color: $ui-secondary-color;
}
&.bottom {
top: -5px;
margin-left: -13px;
border-width: 0 7px 5px;
border-bottom-color: $ui-secondary-color;
}
&.right {
left: -5px;
margin-top: -5px;
border-width: 5px 5px 5px 0;
border-right-color: $ui-secondary-color;
}
}
.dropdown-menu__item {
a {
font-size: 13px;
line-height: 18px;
display: block;
padding: 4px 14px;
box-sizing: border-box;
text-decoration: none;
background: $ui-secondary-color;
color: $ui-base-color;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
&:focus,
&:hover,
&:active {
background: $ui-highlight-color;
color: $ui-secondary-color;
outline: 0;
}
}
2017-02-28 23:53:11 +00:00
}
2016-09-29 22:00:45 +00:00
.dropdown--active .dropdown__content {
display: block;
line-height: 18px;
max-width: 311px;
right: 0;
text-align: left;
2016-09-29 22:00:45 +00:00
z-index: 9999;
2017-03-01 23:57:55 +00:00
& > ul {
2016-09-29 22:00:45 +00:00
list-style: none;
background: $ui-secondary-color;
padding: 4px 0;
border-radius: 4px;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.4);
2017-02-28 23:53:11 +00:00
min-width: 140px;
position: relative;
}
&.dropdown__right {
right: 0;
2017-02-28 23:53:11 +00:00
}
&.dropdown__left {
2017-03-01 23:57:55 +00:00
& > ul {
2017-02-28 23:53:11 +00:00
left: -98px;
}
2016-09-29 22:00:45 +00:00
}
2017-03-01 23:57:55 +00:00
& > ul > li > a {
2016-09-29 22:00:45 +00:00
font-size: 13px;
2017-02-28 23:53:11 +00:00
line-height: 18px;
2016-09-29 22:00:45 +00:00
display: block;
2017-02-28 23:53:11 +00:00
padding: 4px 14px;
box-sizing: border-box;
2016-09-29 22:00:45 +00:00
text-decoration: none;
background: $ui-secondary-color;
color: $ui-base-color;
2017-02-28 23:53:11 +00:00
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
2017-02-28 23:53:11 +00:00
&:focus {
2017-03-24 23:01:43 +00:00
outline: 0;
2017-02-28 23:53:11 +00:00
}
2016-09-29 22:00:45 +00:00
&:hover {
background: $ui-highlight-color;
color: $ui-secondary-color;
2016-09-29 22:00:45 +00:00
}
}
}
.dropdown__icon {
vertical-align: middle;
}
.static-content {
padding: 10px;
padding-top: 20px;
color: $ui-base-lighter-color;
h1 {
font-size: 16px;
font-weight: 500;
margin-bottom: 40px;
text-align: center;
}
p {
font-size: 13px;
margin-bottom: 20px;
}
}
.columns-area {
display: flex;
flex: 1 1 auto;
2016-10-12 17:14:47 +00:00
flex-direction: row;
justify-content: flex-start;
overflow-x: auto;
position: relative;
&.unscrollable {
overflow-x: hidden;
}
}
@media screen and (min-width: 360px) {
.columns-area {
padding: 10px;
}
.react-swipeable-view-container .columns-area {
height: calc(100% - 20px) !important;
}
}
.react-swipeable-view-container {
&,
.columns-area,
.drawer,
.column {
height: 100%;
}
}
.react-swipeable-view-container > * {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.column {
width: 330px;
position: relative;
box-sizing: border-box;
display: flex;
flex-direction: column;
> .scrollable {
background: $ui-base-color;
}
}
.ui {
flex: 0 0 auto;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
background: darken($ui-base-color, 7%);
}
.drawer {
2017-03-26 11:08:15 +00:00
width: 300px;
box-sizing: border-box;
display: flex;
flex-direction: column;
overflow-y: hidden;
}
.drawer__tab {
display: block;
flex: 1 1 auto;
padding: 15px 5px 13px;
color: $ui-primary-color;
text-decoration: none;
text-align: center;
font-size: 16px;
border-bottom: 2px solid transparent;
}
.column,
.drawer {
flex: 1 1 100%;
overflow: hidden;
}
@media screen and (min-width: 360px) {
.tabs-bar {
margin: 10px;
margin-bottom: 0;
}
.search {
margin-bottom: 10px;
}
}
@media screen and (max-width: 630px) {
.column,
.drawer {
width: 100%;
padding: 0;
}
.columns-area {
flex-direction: column;
}
.search__input,
.autosuggest-textarea__textarea {
font-size: 16px;
}
}
@media screen and (min-width: 631px) {
.columns-area {
padding: 0;
}
.column,
.drawer {
flex: 0 0 auto;
padding: 10px;
padding-left: 5px;
padding-right: 5px;
&:first-child {
padding-left: 10px;
}
&:last-child {
padding-right: 10px;
}
}
2017-04-26 02:40:27 +00:00
.columns-area > div {
.column,
.drawer {
2017-04-26 02:40:27 +00:00
padding-left: 5px;
padding-right: 5px;
}
}
}
2017-03-31 17:59:54 +00:00
.drawer__pager {
box-sizing: border-box;
padding: 0;
flex-grow: 1;
position: relative;
overflow: hidden;
display: flex;
}
.drawer__inner {
2017-03-31 17:59:54 +00:00
position: absolute;
top: 0;
left: 0;
2018-02-02 09:32:41 +00:00
background: lighten($ui-base-color, 13%);
box-sizing: border-box;
padding: 0;
display: flex;
flex-direction: column;
overflow: hidden;
overflow-y: auto;
2017-03-31 17:59:54 +00:00
width: 100%;
height: 100%;
&.darker {
background: $ui-base-color;
2017-03-31 17:59:54 +00:00
}
2018-02-02 09:32:41 +00:00
}
.drawer__inner__mastodon {
2018-02-02 09:32:41 +00:00
background: lighten($ui-base-color, 13%) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-color)}"/></svg>') no-repeat bottom / 100% auto;
flex: 1;
min-height: 47px;
> img {
display: block;
object-fit: contain;
object-position: bottom left;
width: 100%;
height: 100%;
pointer-events: none;
user-drag: none;
user-select: none;
}
}
.pseudo-drawer {
background: lighten($ui-base-color, 13%);
font-size: 13px;
text-align: left;
}
.drawer__header {
flex: 0 0 auto;
font-size: 16px;
background: lighten($ui-base-color, 8%);
margin-bottom: 10px;
display: flex;
flex-direction: row;
a {
transition: background 100ms ease-in;
&:hover {
background: lighten($ui-base-color, 3%);
transition: background 200ms ease-out;
}
}
}
.tabs-bar {
display: flex;
background: lighten($ui-base-color, 8%);
flex: 0 0 auto;
overflow-y: auto;
}
.tabs-bar__link {
display: block;
flex: 1 1 auto;
padding: 15px 10px;
color: $primary-text-color;
text-decoration: none;
text-align: center;
font-size: 14px;
font-weight: 500;
border-bottom: 2px solid lighten($ui-base-color, 8%);
transition: all 50ms linear;
2017-04-01 13:17:35 +00:00
.fa {
font-weight: 400;
font-size: 16px;
2017-04-01 13:17:35 +00:00
}
&.active {
border-bottom: 2px solid $ui-highlight-color;
color: $ui-highlight-color;
}
2017-04-01 13:17:35 +00:00
&:hover,
&:focus,
&:active {
@media screen and (min-width: 631px) {
background: lighten($ui-base-color, 14%);
}
2017-04-01 13:17:35 +00:00
}
span {
margin-left: 5px;
2017-04-01 13:17:35 +00:00
display: none;
}
}
2017-04-01 13:17:35 +00:00
@media screen and (min-width: 600px) {
.tabs-bar__link {
span {
display: inline;
}
}
}
@media screen and (min-width: 631px) {
.tabs-bar {
display: none;
}
}
.scrollable {
overflow-y: scroll;
overflow-x: hidden;
flex: 1 1 auto;
-webkit-overflow-scrolling: touch;
will-change: transform; // improves perf in mobile Chrome
&.optionally-scrollable {
overflow-y: auto;
}
@supports(display: grid) { // hack to fix Chrome <57
contain: strict;
}
}
.scrollable.fullscreen {
@supports(display: grid) { // hack to fix Chrome <57
contain: none;
}
}
.column-back-button {
background: lighten($ui-base-color, 4%);
color: $ui-highlight-color;
cursor: pointer;
flex: 0 0 auto;
font-size: 16px;
border: 0;
text-align: unset;
padding: 15px;
margin: 0;
2017-02-23 01:14:35 +00:00
z-index: 3;
&:hover {
text-decoration: underline;
}
}
.column-header__back-button {
background: lighten($ui-base-color, 4%);
border: 0;
font-family: inherit;
color: $ui-highlight-color;
cursor: pointer;
white-space: nowrap;
font-size: 16px;
padding: 0 5px 0 0;
z-index: 3;
&:hover {
text-decoration: underline;
}
&:last-child {
padding: 0 15px 0 0;
}
}
.column-back-button__icon {
display: inline-block;
margin-right: 5px;
}
.column-back-button--slim {
position: relative;
}
.column-back-button--slim-button {
cursor: pointer;
flex: 0 0 auto;
font-size: 16px;
padding: 15px;
position: absolute;
right: 0;
top: -48px;
}
.react-toggle {
display: inline-block;
position: relative;
cursor: pointer;
background-color: transparent;
border: 0;
padding: 0;
user-select: none;
-webkit-tap-highlight-color: rgba($base-overlay-background, 0);
-webkit-tap-highlight-color: transparent;
}
.react-toggle-screenreader-only {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.react-toggle--disabled {
cursor: not-allowed;
opacity: 0.5;
transition: opacity 0.25s;
}
.react-toggle-track {
width: 50px;
height: 24px;
padding: 0;
border-radius: 30px;
background-color: $ui-base-color;
transition: all 0.2s ease;
}
.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
background-color: darken($ui-base-color, 10%);
}
.react-toggle--checked .react-toggle-track {
background-color: $ui-highlight-color;
}
.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
background-color: lighten($ui-highlight-color, 10%);
}
.react-toggle-track-check {
position: absolute;
width: 14px;
height: 10px;
top: 0;
bottom: 0;
margin-top: auto;
margin-bottom: auto;
line-height: 0;
left: 8px;
opacity: 0;
transition: opacity 0.25s ease;
}
.react-toggle--checked .react-toggle-track-check {
opacity: 1;
transition: opacity 0.25s ease;
}
.react-toggle-track-x {
position: absolute;
width: 10px;
height: 10px;
top: 0;
bottom: 0;
margin-top: auto;
margin-bottom: auto;
line-height: 0;
right: 10px;
opacity: 1;
transition: opacity 0.25s ease;
}
.react-toggle--checked .react-toggle-track-x {
opacity: 0;
}
.react-toggle-thumb {
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
position: absolute;
top: 1px;
left: 1px;
width: 22px;
height: 22px;
border: 1px solid $ui-base-color;
border-radius: 50%;
background-color: darken($simple-background-color, 2%);
box-sizing: border-box;
transition: all 0.25s ease;
}
.react-toggle--checked .react-toggle-thumb {
left: 27px;
border-color: $ui-highlight-color;
}
.column-link {
background: lighten($ui-base-color, 8%);
color: $primary-text-color;
display: block;
font-size: 16px;
padding: 15px;
text-decoration: none;
&:hover {
background: lighten($ui-base-color, 11%);
}
}
.column-link__icon {
display: inline-block;
margin-right: 5px;
}
.column-link__badge {
display: inline-block;
border-radius: 4px;
font-size: 12px;
line-height: 19px;
font-weight: 500;
background: $ui-base-color;
padding: 4px 8px;
margin: -6px 10px;
}
.column-subheading {
background: $ui-base-color;
color: $ui-base-lighter-color;
padding: 8px 20px;
2017-04-26 02:40:27 +00:00
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
cursor: default;
}
.getting-started__wrapper,
.getting_started {
background: $ui-base-color;
}
.getting-started__wrapper {
position: relative;
overflow-y: auto;
}
.getting-started {
background: $ui-base-color;
flex: 1 0 auto;
2017-01-26 02:17:48 +00:00
p {
color: $ui-secondary-color;
2017-01-26 02:17:48 +00:00
}
a {
color: $ui-base-lighter-color;
}
2017-01-01 18:52:25 +00:00
}
.keyboard-shortcuts {
padding: 8px 0 0;
overflow: hidden;
thead {
position: absolute;
left: -9999px;
}
td {
padding: 0 10px 8px;
}
kbd {
display: inline-block;
padding: 3px 5px;
background-color: lighten($ui-base-color, 8%);
border: 1px solid darken($ui-base-color, 4%);
}
}
2017-01-10 16:25:10 +00:00
.setting-text {
color: $ui-primary-color;
2017-01-10 16:25:10 +00:00
background: transparent;
border: none;
border-bottom: 2px solid $ui-primary-color;
box-sizing: border-box;
display: block;
font-family: inherit;
margin-bottom: 10px;
padding: 7px 0;
width: 100%;
2017-01-10 16:25:10 +00:00
&:focus,
&:active {
color: $primary-text-color;
border-bottom-color: $ui-highlight-color;
2017-01-10 16:25:10 +00:00
}
@media screen and (max-width: 600px) {
font-size: 16px;
}
&.light {
color: $ui-base-color;
border-bottom: 2px solid lighten($ui-base-color, 27%);
&:focus,
&:active {
color: $ui-base-color;
border-bottom-color: $ui-highlight-color;
}
}
2017-01-10 16:25:10 +00:00
}
.no-reduce-motion button.icon-button i.fa-retweet {
background-position: 0 0;
height: 19px;
transition: background-position 0.9s steps(10);
transition-duration: 0s;
vertical-align: middle;
width: 22px;
&::before {
display: none !important;
}
}
.no-reduce-motion button.icon-button.active i.fa-retweet {
transition-duration: 0.9s;
background-position: 0 100%;
}
.reduce-motion button.icon-button i.fa-retweet {
color: $ui-base-lighter-color;
transition: color 100ms ease-in;
}
.reduce-motion button.icon-button.active i.fa-retweet {
color: $ui-highlight-color;
}
.status-card {
display: flex;
font-size: 14px;
border: 1px solid lighten($ui-base-color, 8%);
border-radius: 4px;
color: $ui-base-lighter-color;
margin-top: 14px;
text-decoration: none;
overflow: hidden;
&__actions {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
& > div {
background: rgba($base-shadow-color, 0.6);
border-radius: 4px;
padding: 12px 9px;
flex: 0 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
button,
a {
display: inline;
color: $primary-text-color;
background: transparent;
border: 0;
padding: 0 5px;
text-decoration: none;
opacity: 0.6;
font-size: 18px;
line-height: 18px;
&:hover,
&:active,
&:focus {
opacity: 1;
}
}
a {
font-size: 19px;
position: relative;
bottom: -1px;
}
}
}
a.status-card {
cursor: pointer;
&:hover {
background: lighten($ui-base-color, 8%);
}
}
.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: $ui-primary-color;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-decoration: none;
}
.status-card__content {
flex: 1 1 auto;
overflow: hidden;
padding: 14px 14px 14px 8px;
}
.status-card__description {
color: $ui-primary-color;
}
2017-05-04 13:52:08 +00: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%);
position: relative;
}
.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;
background-size: cover;
background-position: center center;
}
.load-more {
display: block;
color: $ui-base-lighter-color;
background-color: transparent;
border: 0;
font-size: inherit;
text-align: center;
line-height: inherit;
margin: 0;
padding: 15px;
width: 100%;
clear: both;
&:hover {
background: lighten($ui-base-color, 2%);
}
}
.regeneration-indicator {
text-align: center;
font-size: 16px;
font-weight: 500;
color: lighten($ui-base-color, 16%);
background: $ui-base-color;
cursor: default;
display: flex;
flex: 1 1 auto;
align-items: center;
justify-content: center;
padding: 20px;
& > div {
width: 100%;
background: transparent;
padding-top: 0;
}
&__figure {
background: url('../images/elephant_ui_working.svg') no-repeat center 0;
width: 100%;
height: 160px;
background-size: contain;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
&.missing-indicator {
padding-top: 20px + 48px;
.regeneration-indicator__figure {
background-image: url('../images/elephant_ui_disappointed.svg');
}
}
&__label {
margin-top: 200px;
strong {
display: block;
margin-bottom: 10px;
color: lighten($ui-base-color, 34%);
}
span {
font-size: 15px;
font-weight: 400;
}
}
}
.column-header__wrapper {
position: relative;
flex: 0 0 auto;
&.active {
&::before {
display: block;
content: "";
position: absolute;
top: 35px;
left: 0;
right: 0;
margin: 0 auto;
width: 60%;
pointer-events: none;
height: 28px;
z-index: 1;
background: radial-gradient(ellipse, rgba($ui-highlight-color, 0.23) 0%, rgba($ui-highlight-color, 0) 60%);
}
}
}
.column-header {
display: flex;
font-size: 16px;
background: lighten($ui-base-color, 4%);
flex: 0 0 auto;
cursor: pointer;
2017-02-23 01:14:35 +00:00
position: relative;
z-index: 2;
outline: 0;
overflow: hidden;
& > button {
margin: 0;
border: none;
padding: 15px 0 15px 15px;
color: inherit;
background: transparent;
font: inherit;
text-align: left;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
2018-02-02 12:31:28 +00:00
flex: 1;
}
2017-02-23 01:14:35 +00:00
& > .column-header__back-button {
color: $ui-highlight-color;
}
2017-02-23 01:14:35 +00:00
&.active {
box-shadow: 0 1px 0 rgba($ui-highlight-color, 0.3);
.column-header__icon {
color: $ui-highlight-color;
text-shadow: 0 0 10px rgba($ui-highlight-color, 0.4);
}
}
&:focus,
&:active {
outline: 0;
}
}
.column-header__buttons {
height: 48px;
display: flex;
}
.column-header__links .text-btn {
margin-right: 10px;
}
.column-header__button {
background: lighten($ui-base-color, 4%);
border: 0;
color: $ui-primary-color;
cursor: pointer;
font-size: 16px;
padding: 0 15px;
&:hover {
color: lighten($ui-primary-color, 7%);
}
&.active {
color: $primary-text-color;
background: lighten($ui-base-color, 8%);
&:hover {
color: $primary-text-color;
background: lighten($ui-base-color, 8%);
}
}
}
.column-header__collapsible {
max-height: 70vh;
overflow: hidden;
overflow-y: auto;
color: $ui-primary-color;
transition: max-height 150ms ease-in-out, opacity 300ms linear;
opacity: 1;
&.collapsed {
max-height: 0;
opacity: 0.5;
}
&.animating {
overflow-y: hidden;
}
hr {
height: 0;
background: transparent;
border: 0;
border-top: 1px solid lighten($ui-base-color, 12%);
margin: 10px 0;
}
}
.column-header__collapsible-inner {
background: lighten($ui-base-color, 8%);
padding: 15px;
}
.column-header__setting-btn {
&:hover {
color: lighten($ui-primary-color, 4%);
text-decoration: underline;
}
}
.column-header__setting-arrows {
float: right;
.column-header__setting-btn {
padding: 0 10px;
&:last-child {
padding-right: 0;
}
}
}
.text-btn {
display: inline-block;
padding: 0;
font-family: inherit;
font-size: inherit;
color: inherit;
border: 0;
background: transparent;
cursor: pointer;
}
.column-header__icon {
display: inline-block;
margin-right: 5px;
}
2017-02-10 15:35:19 +00:00
.loading-indicator {
color: lighten($ui-base-color, 26%);
font-size: 12px;
font-weight: 400;
text-transform: uppercase;
overflow: visible;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
span {
display: block;
float: left;
margin-left: 50%;
transform: translateX(-50%);
margin: 82px 0 0 50%;
white-space: nowrap;
animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
}
.loading-indicator__figure {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
box-sizing: border-box;
border: 0 solid lighten($ui-base-color, 26%);
border-radius: 50%;
animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
@keyframes loader-figure {
0% {
width: 0;
height: 0;
background-color: lighten($ui-base-color, 26%);
}
29% {
background-color: lighten($ui-base-color, 26%);
}
30% {
width: 42px;
height: 42px;
background-color: transparent;
border-width: 21px;
opacity: 1;
}
100% {
width: 42px;
height: 42px;
border-width: 0;
opacity: 0;
background-color: transparent;
}
}
@keyframes loader-label {
0% { opacity: 0.25; }
30% { opacity: 1; }
100% { opacity: 0.25; }
2017-02-10 15:35:19 +00:00
}
.video-error-cover {
align-items: center;
background: $base-overlay-background;
color: $primary-text-color;
cursor: pointer;
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
margin-top: 8px;
position: relative;
text-align: center;
z-index: 100;
}
.media-spoiler {
background: $base-overlay-background;
color: $ui-primary-color;
border: 0;
padding: 0;
width: 100%;
height: 100%;
border-radius: 4px;
appearance: none;
&:hover,
&:active,
&:focus {
padding: 0;
color: lighten($ui-primary-color, 8%);
}
}
.media-spoiler__warning {
display: block;
font-size: 14px;
}
.media-spoiler__trigger {
display: block;
font-size: 11px;
font-weight: 700;
}
.spoiler-button {
display: none;
left: 4px;
position: absolute;
text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color;
top: 4px;
z-index: 100;
&.spoiler-button--visible {
display: block;
}
2017-02-10 16:30:06 +00:00
}
.modal-container--preloader {
background: lighten($ui-base-color, 8%);
2017-02-10 16:30:06 +00:00
}
.account--panel {
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;
}
.account--panel__button,
.detailed-status__button {
flex: 1 1 auto;
text-align: center;
2017-02-10 16:30:06 +00:00
}
.column-settings__outer {
background: lighten($ui-base-color, 8%);
padding: 15px;
2017-02-10 16:30:06 +00:00
}
.column-settings__section {
color: $ui-primary-color;
cursor: default;
display: block;
font-weight: 500;
margin-bottom: 10px;
2017-02-10 15:35:19 +00:00
}
2017-02-10 16:30:06 +00:00
.column-settings__row {
.text-btn {
margin-bottom: 15px;
}
}
2017-02-10 16:30:06 +00:00
.account--follows-info {
color: $primary-text-color;
position: absolute;
top: 10px;
left: 10px;
opacity: 0.7;
display: inline-block;
vertical-align: top;
background-color: rgba($base-overlay-background, 0.4);
text-transform: uppercase;
font-size: 11px;
font-weight: 500;
padding: 4px;
border-radius: 4px;
}
.account--muting-info {
color: $primary-text-color;
position: absolute;
top: 40px;
left: 10px;
opacity: 0.7;
display: inline-block;
vertical-align: top;
background-color: rgba($base-overlay-background, 0.4);
text-transform: uppercase;
font-size: 11px;
font-weight: 500;
padding: 4px;
border-radius: 4px;
}
.account--action-button {
position: absolute;
top: 10px;
right: 20px;
2017-02-10 16:30:06 +00:00
}
.setting-toggle {
display: block;
line-height: 24px;
}
Web Push Notifications (#3243) * feat: Register push subscription * feat: Notify when mentioned * feat: Boost, favourite, reply, follow, follow request * feat: Notification interaction * feat: Handle change of public key * feat: Unsubscribe if things go wrong * feat: Do not send normal notifications if push is enabled * feat: Focus client if open * refactor: Move push logic to WebPushSubscription * feat: Better title and body * feat: Localize messages * chore: Fix lint errors * feat: Settings * refactor: Lazy load * fix: Check if push settings exist * feat: Device-based preferences * refactor: Simplify logic * refactor: Pull request feedback * refactor: Pull request feedback * refactor: Create /api/web/push_subscriptions endpoint * feat: Spec PushSubscriptionController * refactor: WebPushSubscription => Web::PushSubscription * feat: Spec Web::PushSubscription * feat: Display first media attachment * feat: Support direction * fix: Stuff broken while rebasing * refactor: Integration with session activations * refactor: Cleanup * refactor: Simplify implementation * feat: Set VAPID keys via environment * chore: Comments * fix: Crash when no alerts * fix: Set VAPID keys in testing environment * fix: Follow link * feat: Notification actions * fix: Delete previous subscription * chore: Temporary logs * refactor: Move migration to a later date * fix: Fetch the correct session activation and misc bugs * refactor: Move migration to a later date * fix: Remove follow request (no notifications) * feat: Send administrator contact to push service * feat: Set time-to-live * fix: Do not show sensitive images * fix: Reducer crash in error handling * feat: Add badge * chore: Fix lint error * fix: Checkbox label overlap * fix: Check for payload support * fix: Rename action "type" (crash in latest Chrome) * feat: Action to expand notification * fix: Lint errors * fix: Unescape notification body * fix: Do not allow boosting if the status is hidden * feat: Add VAPID keys to the production sample environment * fix: Strip HTML tags from status * refactor: Better error messages * refactor: Handle browser not implementing the VAPID protocol (Samsung Internet) * fix: Error when target_status is nil * fix: Handle lack of image * fix: Delete reference to invalid subscriptions * feat: Better error handling * fix: Unescape HTML characters after tags are striped * refactor: Simpify code * fix: Modify to work with #4091 * Sort strings alphabetically * i18n: Updated Polish translation it annoys me that it's not fully localized :P * refactor: Use current_session in PushSubscriptionController * fix: Rebase mistake * fix: Set cacheName to mastodon * refactor: Pull request feedback * refactor: Remove logging statements * chore(yarn): Fix conflicts with master * chore(yarn): Copy latest from master * chore(yarn): Readd offline-plugin * refactor: Use save! and update! * refactor: Send notifications async * fix: Allow retry when push fails * fix: Save track for failed pushes * fix: Minify sw.js * fix: Remove account_id from fabricator
2017-07-13 20:15:32 +00:00
.setting-toggle__label,
.setting-meta__label {
color: $ui-primary-color;
display: inline-block;
margin-bottom: 14px;
margin-left: 8px;
vertical-align: middle;
}
Web Push Notifications (#3243) * feat: Register push subscription * feat: Notify when mentioned * feat: Boost, favourite, reply, follow, follow request * feat: Notification interaction * feat: Handle change of public key * feat: Unsubscribe if things go wrong * feat: Do not send normal notifications if push is enabled * feat: Focus client if open * refactor: Move push logic to WebPushSubscription * feat: Better title and body * feat: Localize messages * chore: Fix lint errors * feat: Settings * refactor: Lazy load * fix: Check if push settings exist * feat: Device-based preferences * refactor: Simplify logic * refactor: Pull request feedback * refactor: Pull request feedback * refactor: Create /api/web/push_subscriptions endpoint * feat: Spec PushSubscriptionController * refactor: WebPushSubscription => Web::PushSubscription * feat: Spec Web::PushSubscription * feat: Display first media attachment * feat: Support direction * fix: Stuff broken while rebasing * refactor: Integration with session activations * refactor: Cleanup * refactor: Simplify implementation * feat: Set VAPID keys via environment * chore: Comments * fix: Crash when no alerts * fix: Set VAPID keys in testing environment * fix: Follow link * feat: Notification actions * fix: Delete previous subscription * chore: Temporary logs * refactor: Move migration to a later date * fix: Fetch the correct session activation and misc bugs * refactor: Move migration to a later date * fix: Remove follow request (no notifications) * feat: Send administrator contact to push service * feat: Set time-to-live * fix: Do not show sensitive images * fix: Reducer crash in error handling * feat: Add badge * chore: Fix lint error * fix: Checkbox label overlap * fix: Check for payload support * fix: Rename action "type" (crash in latest Chrome) * feat: Action to expand notification * fix: Lint errors * fix: Unescape notification body * fix: Do not allow boosting if the status is hidden * feat: Add VAPID keys to the production sample environment * fix: Strip HTML tags from status * refactor: Better error messages * refactor: Handle browser not implementing the VAPID protocol (Samsung Internet) * fix: Error when target_status is nil * fix: Handle lack of image * fix: Delete reference to invalid subscriptions * feat: Better error handling * fix: Unescape HTML characters after tags are striped * refactor: Simpify code * fix: Modify to work with #4091 * Sort strings alphabetically * i18n: Updated Polish translation it annoys me that it's not fully localized :P * refactor: Use current_session in PushSubscriptionController * fix: Rebase mistake * fix: Set cacheName to mastodon * refactor: Pull request feedback * refactor: Remove logging statements * chore(yarn): Fix conflicts with master * chore(yarn): Copy latest from master * chore(yarn): Readd offline-plugin * refactor: Use save! and update! * refactor: Send notifications async * fix: Allow retry when push fails * fix: Save track for failed pushes * fix: Minify sw.js * fix: Remove account_id from fabricator
2017-07-13 20:15:32 +00:00
.setting-meta__label {
color: $ui-primary-color;
float: right;
}
.empty-column-indicator,
.error-column {
color: lighten($ui-base-color, 20%);
background: $ui-base-color;
text-align: center;
padding: 20px;
font-size: 15px;
font-weight: 400;
cursor: default;
display: flex;
flex: 1 1 auto;
align-items: center;
justify-content: center;
@supports(display: grid) { // hack to fix Chrome <57
contain: strict;
}
a {
color: $ui-highlight-color;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
.error-column {
flex-direction: column;
}
@keyframes heartbeat {
from {
transform: scale(1);
animation-timing-function: ease-out;
}
10% {
transform: scale(0.91);
animation-timing-function: ease-in;
}
17% {
transform: scale(0.98);
animation-timing-function: ease-out;
}
33% {
transform: scale(0.87);
animation-timing-function: ease-in;
}
45% {
transform: scale(1);
animation-timing-function: ease-out;
}
}
.no-reduce-motion .pulse-loading {
transform-origin: center center;
animation: heartbeat 1.5s ease-in-out infinite both;
}
@keyframes shake-bottom {
0%,
100% {
transform: rotate(0deg);
transform-origin: 50% 100%;
}
10% {
transform: rotate(2deg);
}
20%,
40%,
60% {
transform: rotate(-4deg);
}
30%,
50%,
70% {
transform: rotate(4deg);
}
80% {
transform: rotate(-2deg);
}
90% {
transform: rotate(2deg);
}
}
.no-reduce-motion .shake-bottom {
transform-origin: 50% 100%;
animation: shake-bottom 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) 2s 2 both;
}
.emoji-picker-dropdown__menu {
background: $simple-background-color;
position: absolute;
box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
border-radius: 4px;
margin-top: 5px;
2017-03-01 23:57:55 +00:00
.emoji-mart-scroll {
transition: opacity 200ms ease;
2017-03-01 23:57:55 +00:00
}
&.selecting .emoji-mart-scroll {
opacity: 0.5;
2017-03-01 23:57:55 +00:00
}
}
2017-03-01 23:57:55 +00:00
.emoji-picker-dropdown__modifiers {
position: absolute;
top: 60px;
right: 11px;
cursor: pointer;
}
2017-03-01 23:57:55 +00:00
.emoji-picker-dropdown__modifiers__menu {
position: absolute;
z-index: 4;
top: -4px;
left: -8px;
background: $simple-background-color;
border-radius: 4px;
box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
overflow: hidden;
2017-03-01 23:57:55 +00:00
button {
display: block;
cursor: pointer;
border: 0;
padding: 4px 8px;
background: transparent;
&:hover,
&:focus,
&:active {
background: rgba($ui-secondary-color, 0.4);
}
2017-03-01 23:57:55 +00:00
}
.emoji-mart-emoji {
2017-03-01 23:57:55 +00:00
height: 22px;
}
}
.emoji-mart-emoji {
span {
background-repeat: no-repeat;
}
}
.upload-area {
align-items: center;
background: rgba($base-overlay-background, 0.8);
display: flex;
height: 100%;
justify-content: center;
left: 0;
opacity: 0;
position: absolute;
top: 0;
visibility: hidden;
width: 100%;
z-index: 2000;
* {
pointer-events: none;
}
}
.upload-area__drop {
width: 320px;
height: 160px;
display: flex;
box-sizing: border-box;
position: relative;
padding: 8px;
}
.upload-area__background {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
border-radius: 4px;
background: $ui-base-color;
box-shadow: 0 0 5px rgba($base-shadow-color, 0.2);
}
.upload-area__content {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
color: $ui-secondary-color;
font-size: 18px;
font-weight: 500;
border: 2px dashed $ui-base-lighter-color;
border-radius: 4px;
}
.upload-progress {
2017-03-24 23:01:43 +00:00
padding: 10px;
color: $ui-base-lighter-color;
overflow: hidden;
display: flex;
.fa {
font-size: 34px;
margin-right: 10px;
}
span {
font-size: 12px;
text-transform: uppercase;
font-weight: 500;
display: block;
}
}
.upload-progess__message {
flex: 1 1 auto;
}
.upload-progress__backdrop {
width: 100%;
height: 6px;
border-radius: 6px;
background: $ui-base-lighter-color;
position: relative;
margin-top: 5px;
}
.upload-progress__tracker {
position: absolute;
left: 0;
top: 0;
height: 6px;
background: $ui-highlight-color;
border-radius: 6px;
}
.emoji-button {
display: block;
font-size: 24px;
line-height: 24px;
margin-left: 2px;
width: 24px;
2017-03-24 23:01:43 +00:00
outline: 0;
cursor: pointer;
2017-03-24 23:01:43 +00:00
&:active,
&:focus {
2017-03-24 23:01:43 +00:00
outline: 0 !important;
}
img {
filter: grayscale(100%);
2017-03-24 23:01:43 +00:00
opacity: 0.8;
display: block;
margin: 0;
width: 22px;
height: 22px;
margin-top: 2px;
}
&:hover,
&:active,
&:focus {
img {
opacity: 1;
filter: none;
}
}
}
.dropdown--active .emoji-button img {
opacity: 1;
filter: none;
}
2017-03-24 23:01:43 +00:00
.privacy-dropdown__dropdown {
position: absolute;
background: $simple-background-color;
box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
border-radius: 4px;
margin-left: 40px;
2017-03-24 23:01:43 +00:00
overflow: hidden;
transform-origin: 50% 0;
2017-03-24 23:01:43 +00:00
}
.privacy-dropdown__option {
color: $ui-base-color;
2017-03-24 23:01:43 +00:00
padding: 10px;
cursor: pointer;
display: flex;
&:hover,
&.active {
background: $ui-highlight-color;
color: $primary-text-color;
2017-03-24 23:01:43 +00:00
.privacy-dropdown__option__content {
color: $primary-text-color;
2017-03-24 23:01:43 +00:00
strong {
color: $primary-text-color;
2017-03-24 23:01:43 +00:00
}
}
}
&.active:hover {
background: lighten($ui-highlight-color, 4%);
2017-03-24 23:01:43 +00:00
}
}
.privacy-dropdown__option__icon {
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
}
.privacy-dropdown__option__content {
flex: 1 1 auto;
color: darken($ui-primary-color, 24%);
2017-03-24 23:01:43 +00:00
strong {
font-weight: 500;
display: block;
color: $ui-base-color;
@each $lang in $cjk-langs {
&:lang(#{$lang}) {
font-weight: 700;
}
}
2017-03-24 23:01:43 +00:00
}
}
.privacy-dropdown.active {
.privacy-dropdown__value {
background: $simple-background-color;
2017-03-24 23:01:43 +00:00
border-radius: 4px 4px 0 0;
box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1);
.icon-button {
transition: none;
}
&.active {
background: $ui-highlight-color;
.icon-button {
color: $primary-text-color;
}
}
2017-03-24 23:01:43 +00:00
}
.privacy-dropdown__dropdown {
display: block;
box-shadow: 2px 4px 6px rgba($base-shadow-color, 0.1);
2017-03-24 23:01:43 +00:00
}
}
2017-03-31 17:59:54 +00:00
.search {
position: relative;
}
.search__input {
outline: 0;
box-sizing: border-box;
display: block;
width: 100%;
border: none;
padding: 10px;
padding-right: 30px;
font-family: inherit;
background: $ui-base-color;
color: $ui-primary-color;
2017-03-31 17:59:54 +00:00
font-size: 14px;
margin: 0;
&::-moz-focus-inner {
border: 0;
}
&::-moz-focus-inner,
&:focus,
&:active {
2017-03-31 17:59:54 +00:00
outline: 0 !important;
}
&:focus {
background: lighten($ui-base-color, 4%);
2017-03-31 17:59:54 +00:00
}
@media screen and (max-width: 600px) {
font-size: 16px;
}
2017-03-31 17:59:54 +00:00
}
.search__icon {
.fa {
position: absolute;
top: 10px;
right: 10px;
z-index: 2;
display: inline-block;
opacity: 0;
transition: all 100ms linear;
font-size: 18px;
width: 18px;
height: 18px;
color: $ui-secondary-color;
2017-03-31 17:59:54 +00:00
cursor: default;
pointer-events: none;
&.active {
pointer-events: auto;
opacity: 0.3;
}
}
.fa-search {
transform: rotate(90deg);
2017-03-31 17:59:54 +00:00
&.active {
pointer-events: none;
transform: rotate(0deg);
2017-03-31 17:59:54 +00:00
}
}
.fa-times-circle {
top: 11px;
transform: rotate(0deg);
2017-03-31 17:59:54 +00:00
cursor: pointer;
&.active {
transform: rotate(90deg);
2017-03-31 17:59:54 +00:00
}
2017-03-31 20:44:12 +00:00
&:hover {
color: $primary-text-color;
2017-03-31 20:44:12 +00:00
}
2017-03-31 17:59:54 +00:00
}
}
.search-results__header {
color: $ui-base-lighter-color;
background: lighten($ui-base-color, 2%);
border-bottom: 1px solid darken($ui-base-color, 4%);
2017-03-31 17:59:54 +00:00
padding: 15px 10px;
font-size: 14px;
font-weight: 500;
}
.search-results__section {
margin-bottom: 20px;
h5 {
position: relative;
&::before {
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
top: 50%;
width: 100%;
height: 0;
border-top: 1px solid lighten($ui-base-color, 8%);
}
span {
display: inline-block;
background: $ui-base-color;
color: $ui-primary-color;
font-size: 14px;
font-weight: 500;
padding: 10px;
position: relative;
z-index: 1;
cursor: default;
}
}
.account:last-child,
& > div:last-child .status {
border-bottom: 0;
}
}
2017-03-31 17:59:54 +00:00
.search-results__hashtag {
display: block;
padding: 10px;
color: $ui-secondary-color;
2017-03-31 17:59:54 +00:00
text-decoration: none;
&:hover,
&:active,
&:focus {
color: lighten($ui-secondary-color, 4%);
2017-03-31 17:59:54 +00:00
text-decoration: underline;
}
}
2017-04-01 20:11:28 +00:00
.modal-root {
transition: opacity 0.3s linear;
will-change: opacity;
z-index: 9999;
}
2017-04-01 20:11:28 +00:00
.modal-root__overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba($base-overlay-background, 0.7);
2017-04-01 20:11:28 +00:00
}
.modal-root__container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
align-content: space-around;
z-index: 9999;
pointer-events: none;
user-select: none;
}
.modal-root__modal {
pointer-events: auto;
display: flex;
z-index: 9999;
2017-04-01 20:11:28 +00:00
}
.video-modal {
max-width: 100vw;
max-height: 100vh;
position: relative;
}
2017-04-01 20:11:28 +00:00
.media-modal {
width: 100%;
height: 100%;
2017-04-01 20:11:28 +00:00
position: relative;
img,
canvas,
video {
max-width: 100%;
/*
put margins on top and bottom of image to avoid the screen coverd by
image.
*/
max-height: 80%;
width: auto;
height: auto;
margin: auto;
2017-04-01 20:11:28 +00:00
}
img,
canvas {
display: block;
background: url('../images/void.png') repeat;
object-fit: contain;
}
2017-04-01 20:11:28 +00:00
}
2017-04-11 02:28:52 +00:00
.media-modal__closer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.media-modal__navigation {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
transition: opacity 0.3s linear;
will-change: opacity;
* {
pointer-events: auto;
}
&.media-modal__navigation--hidden {
opacity: 0;
* {
pointer-events: none;
}
}
}
.media-modal__nav {
background: rgba($base-overlay-background, 0.5);
box-sizing: border-box;
border: 0;
color: $primary-text-color;
cursor: pointer;
display: flex;
align-items: center;
font-size: 24px;
height: 20vmax;
margin: auto 0;
padding: 30px 15px;
position: absolute;
top: 0;
bottom: 0;
}
.media-modal__nav--left {
left: 0;
}
.media-modal__nav--right {
right: 0;
2017-07-23 18:28:31 +00:00
}
.media-modal__pagination {
width: 100%;
text-align: center;
position: absolute;
left: 0;
bottom: 20px;
pointer-events: none;
}
.media-modal__page-dot {
display: inline-block;
}
.media-modal__button {
background-color: $white;
height: 12px;
width: 12px;
border-radius: 6px;
margin: 10px;
padding: 0;
border: 0;
font-size: 0;
}
.media-modal__button--active {
background-color: $ui-highlight-color;
}
.media-modal__close {
position: absolute;
right: 8px;
top: 8px;
z-index: 100;
}
.onboarding-modal,
.error-modal,
.embed-modal {
background: $ui-secondary-color;
color: $ui-base-color;
border-radius: 8px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.onboarding-modal__pager {
height: 80vh;
width: 80vw;
max-width: 520px;
max-height: 470px;
.react-swipeable-view-container > div {
width: 100%;
height: 100%;
box-sizing: border-box;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
display: flex;
user-select: text;
}
}
.error-modal__body {
height: 80vh;
width: 80vw;
max-width: 520px;
max-height: 420px;
position: relative;
& > div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 25px;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
display: flex;
opacity: 0;
user-select: text;
}
}
.error-modal__body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
@media screen and (max-width: 550px) {
.onboarding-modal {
width: 100%;
height: 100%;
border-radius: 0;
}
.onboarding-modal__pager {
width: 100%;
height: auto;
max-width: none;
max-height: none;
flex: 1 1 auto;
}
}
.onboarding-modal__paginator,
.error-modal__footer {
flex: 0 0 auto;
background: darken($ui-secondary-color, 8%);
display: flex;
padding: 25px;
& > div {
min-width: 33px;
}
.onboarding-modal__nav,
.error-modal__nav {
color: darken($ui-secondary-color, 34%);
border: 0;
font-size: 14px;
font-weight: 500;
padding: 10px 25px;
line-height: inherit;
height: auto;
margin: -10px;
border-radius: 4px;
background-color: transparent;
&:hover,
&:focus,
&:active {
color: darken($ui-secondary-color, 38%);
background-color: darken($ui-secondary-color, 16%);
}
&.onboarding-modal__done,
&.onboarding-modal__next {
color: $ui-base-color;
&:hover,
&:focus,
&:active {
color: darken($ui-base-color, 4%);
}
}
}
}
.error-modal__footer {
justify-content: center;
}
.onboarding-modal__dots {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
}
.onboarding-modal__dot {
width: 14px;
height: 14px;
border-radius: 14px;
background: darken($ui-secondary-color, 16%);
margin: 0 3px;
cursor: pointer;
&:hover {
background: darken($ui-secondary-color, 18%);
}
&.active {
cursor: default;
background: darken($ui-secondary-color, 24%);
}
}
.onboarding-modal__page__wrapper {
pointer-events: none;
padding: 25px;
padding-bottom: 0;
&.onboarding-modal__page__wrapper--active {
pointer-events: auto;
}
}
.onboarding-modal__page {
cursor: default;
line-height: 21px;
h1 {
font-size: 18px;
font-weight: 500;
color: $ui-base-color;
margin-bottom: 20px;
}
a {
color: $ui-highlight-color;
&:hover,
&:focus,
&:active {
color: lighten($ui-highlight-color, 4%);
}
}
.navigation-bar a {
color: inherit;
}
p {
font-size: 16px;
color: lighten($ui-base-color, 8%);
margin-top: 10px;
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
strong {
font-weight: 500;
background: $ui-base-color;
color: $ui-secondary-color;
border-radius: 4px;
font-size: 14px;
padding: 3px 6px;
@each $lang in $cjk-langs {
&:lang(#{$lang}) {
font-weight: 700;
}
}
}
}
}
.onboarding-modal__page__wrapper-0 {
background: url('../images/elephant_ui_greeting.svg') no-repeat left bottom / auto 250px;
height: 100%;
padding: 0;
}
.onboarding-modal__page-one {
&__lead {
padding: 65px;
padding-top: 45px;
padding-bottom: 0;
margin-bottom: 10px;
h1 {
font-size: 26px;
line-height: 36px;
margin-bottom: 8px;
}
p {
margin-bottom: 0;
}
}
&__extra {
padding-right: 65px;
padding-left: 185px;
text-align: center;
}
}
.display-case {
text-align: center;
font-size: 15px;
margin-bottom: 15px;
&__label {
font-weight: 500;
color: $ui-base-color;
margin-bottom: 5px;
text-transform: uppercase;
font-size: 12px;
}
&__case {
background: $ui-base-color;
color: $ui-secondary-color;
font-weight: 500;
padding: 10px;
border-radius: 4px;
}
}
.onboarding-modal__page-two,
.onboarding-modal__page-three,
.onboarding-modal__page-four,
.onboarding-modal__page-five {
p {
text-align: left;
}
.figure {
background: darken($ui-base-color, 8%);
color: $ui-secondary-color;
margin-bottom: 20px;
border-radius: 4px;
padding: 10px;
text-align: center;
font-size: 14px;
box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.3);
.onboarding-modal__image {
border-radius: 4px;
margin-bottom: 10px;
}
&.non-interactive {
pointer-events: none;
text-align: left;
}
}
}
.onboarding-modal__page-four__columns {
.row {
display: flex;
margin-bottom: 20px;
& > div {
flex: 1 1 0;
margin: 0 10px;
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
}
p {
text-align: center;
}
}
&:last-child {
margin-bottom: 0;
}
}
.column-header {
color: $primary-text-color;
}
}
@media screen and (max-width: 320px) and (max-height: 600px) {
.onboarding-modal__page p {
font-size: 14px;
line-height: 20px;
}
.onboarding-modal__page-two .figure,
.onboarding-modal__page-three .figure,
.onboarding-modal__page-four .figure,
.onboarding-modal__page-five .figure {
font-size: 12px;
margin-bottom: 10px;
}
.onboarding-modal__page-four__columns .row {
margin-bottom: 10px;
}
.onboarding-modal__page-four__columns .column-header {
padding: 5px;
font-size: 12px;
}
}
.onboard-sliders {
display: inline-block;
max-width: 30px;
max-height: auto;
margin-left: 10px;
}
.boost-modal,
.confirmation-modal,
.report-modal,
Optional notification muting (#5087) * Add a hide_notifications column to mutes * Add muting_notifications? and a notifications argument to mute! * block notifications in notify_service from hard muted accounts * Add specs for how mute! interacts with muting_notifications? * specs testing that hide_notifications in mutes actually hides notifications * Add support for muting notifications in MuteService * API support for muting notifications (and specs) * Less gross passing of notifications flag * Break out a separate mute modal with a hide-notifications checkbox. * Convert profile header mute to use mute modal * Satisfy eslint. * specs for MuteService notifications params * add trailing newlines to files for Pork :) * Put the label for the hide notifications checkbox in a label element. * Add a /api/v1/mutes/details route that just returns the array of mutes. * Define a serializer for /api/v1/mutes/details * Add more specs for the /api/v1/mutes/details endpoint * Expose whether a mute hides notifications in the api/v1/relationships endpoint * Show whether muted users' notifications are muted in account lists * Allow modifying the hide_notifications of a mute with the /api/v1/accounts/:id/mute endpoint * make the hide/unhide notifications buttons work * satisfy eslint * In probably dead code, replace a dispatch of muteAccount that was skipping the modal with launching the mute modal. * fix a missing import * add an explanatory comment to AccountInteractions * Refactor handling of default params for muting to make code cleaner * minor code style fixes oops * Fixed a typo that was breaking the account mute API endpoint * Apply white-space: nowrap to account relationships icons * Fix code style issues * Remove superfluous blank line * Rename /api/v1/mutes/details -> /api/v2/mutes * Don't serialize "account" in MuteSerializer Doing so is somewhat unnecessary since it's always the current user's account. * Fix wrong variable name in api/v2/mutes * Use Toggle in place of checkbox in the mute modal. * Make the Toggle in the mute modal look better * Code style changes in specs and removed an extra space * Code review suggestions from akihikodaki Also fixed a syntax error in tests for AccountInteractions. * Make AddHideNotificationsToMute Concurrent It's not clear how much this will benefit instances in practice, as the number of mutes tends to be pretty small, but this should prevent any blocking migrations nonetheless. * Fix up migration things * Remove /api/v2/mutes
2017-11-15 02:56:41 +00:00
.actions-modal,
.mute-modal {
background: lighten($ui-secondary-color, 8%);
color: $ui-base-color;
2017-04-11 19:24:17 +00:00
border-radius: 8px;
overflow: hidden;
2017-04-11 02:28:52 +00:00
max-width: 90vw;
width: 480px;
position: relative;
2017-04-11 19:24:17 +00:00
flex-direction: column;
.status__display-name {
display: block;
max-width: 100%;
padding-right: 25px;
}
.status__avatar {
height: 28px;
left: 10px;
position: absolute;
top: 10px;
width: 48px;
}
2017-04-11 19:24:17 +00:00
}
2017-04-11 02:28:52 +00:00
2017-07-28 13:30:53 +00:00
.actions-modal {
.status {
background: $white;
border-bottom-color: $ui-secondary-color;
padding-top: 10px;
padding-bottom: 10px;
}
.dropdown-menu__separator {
border-bottom-color: $ui-secondary-color;
}
2017-07-28 13:30:53 +00:00
}
2017-04-11 19:24:17 +00:00
.boost-modal__container {
overflow-x: scroll;
2017-04-11 19:24:17 +00:00
padding: 10px;
.status {
user-select: text;
border-bottom: 0;
2017-04-11 02:28:52 +00:00
}
2017-04-11 19:24:17 +00:00
}
2017-04-11 02:28:52 +00:00
.boost-modal__action-bar,
.confirmation-modal__action-bar,
.mute-modal__action-bar {
2017-04-11 19:24:17 +00:00
display: flex;
justify-content: space-between;
background: $ui-secondary-color;
2017-04-11 19:24:17 +00:00
padding: 10px;
line-height: 36px;
2017-04-11 02:28:52 +00:00
2017-04-11 19:24:17 +00:00
& > div {
flex: 1 1 auto;
text-align: right;
color: lighten($ui-base-color, 33%);
2017-04-11 19:24:17 +00:00
padding-right: 10px;
}
.button {
flex: 0 0 auto;
2017-04-11 02:28:52 +00:00
}
}
.boost-modal__status-header {
font-size: 15px;
}
.boost-modal__status-time {
float: right;
font-size: 14px;
}
.confirmation-modal {
max-width: 85vw;
@media screen and (min-width: 480px) {
max-width: 380px;
}
}
Optional notification muting (#5087) * Add a hide_notifications column to mutes * Add muting_notifications? and a notifications argument to mute! * block notifications in notify_service from hard muted accounts * Add specs for how mute! interacts with muting_notifications? * specs testing that hide_notifications in mutes actually hides notifications * Add support for muting notifications in MuteService * API support for muting notifications (and specs) * Less gross passing of notifications flag * Break out a separate mute modal with a hide-notifications checkbox. * Convert profile header mute to use mute modal * Satisfy eslint. * specs for MuteService notifications params * add trailing newlines to files for Pork :) * Put the label for the hide notifications checkbox in a label element. * Add a /api/v1/mutes/details route that just returns the array of mutes. * Define a serializer for /api/v1/mutes/details * Add more specs for the /api/v1/mutes/details endpoint * Expose whether a mute hides notifications in the api/v1/relationships endpoint * Show whether muted users' notifications are muted in account lists * Allow modifying the hide_notifications of a mute with the /api/v1/accounts/:id/mute endpoint * make the hide/unhide notifications buttons work * satisfy eslint * In probably dead code, replace a dispatch of muteAccount that was skipping the modal with launching the mute modal. * fix a missing import * add an explanatory comment to AccountInteractions * Refactor handling of default params for muting to make code cleaner * minor code style fixes oops * Fixed a typo that was breaking the account mute API endpoint * Apply white-space: nowrap to account relationships icons * Fix code style issues * Remove superfluous blank line * Rename /api/v1/mutes/details -> /api/v2/mutes * Don't serialize "account" in MuteSerializer Doing so is somewhat unnecessary since it's always the current user's account. * Fix wrong variable name in api/v2/mutes * Use Toggle in place of checkbox in the mute modal. * Make the Toggle in the mute modal look better * Code style changes in specs and removed an extra space * Code review suggestions from akihikodaki Also fixed a syntax error in tests for AccountInteractions. * Make AddHideNotificationsToMute Concurrent It's not clear how much this will benefit instances in practice, as the number of mutes tends to be pretty small, but this should prevent any blocking migrations nonetheless. * Fix up migration things * Remove /api/v2/mutes
2017-11-15 02:56:41 +00:00
.mute-modal {
line-height: 24px;
}
.mute-modal .react-toggle {
vertical-align: middle;
}
.report-modal {
width: 90vw;
max-width: 700px;
}
.report-modal__container {
display: flex;
border-top: 1px solid $ui-secondary-color;
@media screen and (max-width: 480px) {
flex-wrap: wrap;
overflow-y: auto;
}
}
.report-modal__statuses,
.report-modal__comment {
box-sizing: border-box;
width: 50%;
@media screen and (max-width: 480px) {
width: 100%;
}
}
.report-modal__statuses {
flex: 1 1 auto;
min-height: 20vh;
2017-07-01 12:50:10 +00:00
max-height: 40vh;
overflow-y: auto;
overflow-x: hidden;
@media screen and (max-width: 480px) {
max-height: 10vh;
}
}
.report-modal__comment {
padding: 20px;
border-right: 1px solid $ui-secondary-color;
max-width: 320px;
p {
font-size: 14px;
line-height: 20px;
margin-bottom: 20px;
}
.setting-text {
display: block;
box-sizing: border-box;
width: 100%;
margin: 0;
color: $ui-base-color;
background: $white;
padding: 10px;
font-family: inherit;
font-size: 14px;
resize: vertical;
border: 0;
outline: 0;
border-radius: 4px;
border: 1px solid $ui-secondary-color;
margin-bottom: 20px;
&:focus {
border: 1px solid darken($ui-secondary-color, 8%);
}
}
.setting-toggle {
margin-top: 20px;
margin-bottom: 24px;
&__label {
color: $ui-base-color;
font-size: 14px;
}
}
@media screen and (max-width: 480px) {
padding: 10px;
max-width: 100%;
order: 2;
.setting-toggle {
margin-bottom: 4px;
}
}
}
.actions-modal {
.status {
overflow-y: auto;
max-height: 300px;
}
max-height: 80vh;
max-width: 80vw;
.actions-modal__item-label {
font-weight: 500;
}
ul {
overflow-y: auto;
flex-shrink: 0;
li:empty {
margin: 0;
}
li:not(:empty) {
a {
color: $ui-base-color;
display: flex;
padding: 12px 16px;
font-size: 15px;
align-items: center;
text-decoration: none;
&,
button {
transition: none;
}
&.active,
&:hover,
&:active,
&:focus {
&,
button {
background: $ui-highlight-color;
color: $primary-text-color;
}
}
button:first-child {
margin-right: 10px;
}
}
}
}
}
Optional notification muting (#5087) * Add a hide_notifications column to mutes * Add muting_notifications? and a notifications argument to mute! * block notifications in notify_service from hard muted accounts * Add specs for how mute! interacts with muting_notifications? * specs testing that hide_notifications in mutes actually hides notifications * Add support for muting notifications in MuteService * API support for muting notifications (and specs) * Less gross passing of notifications flag * Break out a separate mute modal with a hide-notifications checkbox. * Convert profile header mute to use mute modal * Satisfy eslint. * specs for MuteService notifications params * add trailing newlines to files for Pork :) * Put the label for the hide notifications checkbox in a label element. * Add a /api/v1/mutes/details route that just returns the array of mutes. * Define a serializer for /api/v1/mutes/details * Add more specs for the /api/v1/mutes/details endpoint * Expose whether a mute hides notifications in the api/v1/relationships endpoint * Show whether muted users' notifications are muted in account lists * Allow modifying the hide_notifications of a mute with the /api/v1/accounts/:id/mute endpoint * make the hide/unhide notifications buttons work * satisfy eslint * In probably dead code, replace a dispatch of muteAccount that was skipping the modal with launching the mute modal. * fix a missing import * add an explanatory comment to AccountInteractions * Refactor handling of default params for muting to make code cleaner * minor code style fixes oops * Fixed a typo that was breaking the account mute API endpoint * Apply white-space: nowrap to account relationships icons * Fix code style issues * Remove superfluous blank line * Rename /api/v1/mutes/details -> /api/v2/mutes * Don't serialize "account" in MuteSerializer Doing so is somewhat unnecessary since it's always the current user's account. * Fix wrong variable name in api/v2/mutes * Use Toggle in place of checkbox in the mute modal. * Make the Toggle in the mute modal look better * Code style changes in specs and removed an extra space * Code review suggestions from akihikodaki Also fixed a syntax error in tests for AccountInteractions. * Make AddHideNotificationsToMute Concurrent It's not clear how much this will benefit instances in practice, as the number of mutes tends to be pretty small, but this should prevent any blocking migrations nonetheless. * Fix up migration things * Remove /api/v2/mutes
2017-11-15 02:56:41 +00:00
.confirmation-modal__action-bar,
.mute-modal__action-bar {
.confirmation-modal__cancel-button,
.mute-modal__cancel-button {
background-color: transparent;
color: darken($ui-secondary-color, 34%);
font-size: 14px;
font-weight: 500;
&:hover,
&:focus,
&:active {
color: darken($ui-secondary-color, 38%);
}
}
}
.confirmation-modal__container,
Optional notification muting (#5087) * Add a hide_notifications column to mutes * Add muting_notifications? and a notifications argument to mute! * block notifications in notify_service from hard muted accounts * Add specs for how mute! interacts with muting_notifications? * specs testing that hide_notifications in mutes actually hides notifications * Add support for muting notifications in MuteService * API support for muting notifications (and specs) * Less gross passing of notifications flag * Break out a separate mute modal with a hide-notifications checkbox. * Convert profile header mute to use mute modal * Satisfy eslint. * specs for MuteService notifications params * add trailing newlines to files for Pork :) * Put the label for the hide notifications checkbox in a label element. * Add a /api/v1/mutes/details route that just returns the array of mutes. * Define a serializer for /api/v1/mutes/details * Add more specs for the /api/v1/mutes/details endpoint * Expose whether a mute hides notifications in the api/v1/relationships endpoint * Show whether muted users' notifications are muted in account lists * Allow modifying the hide_notifications of a mute with the /api/v1/accounts/:id/mute endpoint * make the hide/unhide notifications buttons work * satisfy eslint * In probably dead code, replace a dispatch of muteAccount that was skipping the modal with launching the mute modal. * fix a missing import * add an explanatory comment to AccountInteractions * Refactor handling of default params for muting to make code cleaner * minor code style fixes oops * Fixed a typo that was breaking the account mute API endpoint * Apply white-space: nowrap to account relationships icons * Fix code style issues * Remove superfluous blank line * Rename /api/v1/mutes/details -> /api/v2/mutes * Don't serialize "account" in MuteSerializer Doing so is somewhat unnecessary since it's always the current user's account. * Fix wrong variable name in api/v2/mutes * Use Toggle in place of checkbox in the mute modal. * Make the Toggle in the mute modal look better * Code style changes in specs and removed an extra space * Code review suggestions from akihikodaki Also fixed a syntax error in tests for AccountInteractions. * Make AddHideNotificationsToMute Concurrent It's not clear how much this will benefit instances in practice, as the number of mutes tends to be pretty small, but this should prevent any blocking migrations nonetheless. * Fix up migration things * Remove /api/v2/mutes
2017-11-15 02:56:41 +00:00
.mute-modal__container,
.report-modal__target {
padding: 30px;
font-size: 16px;
text-align: center;
strong {
font-weight: 500;
@each $lang in $cjk-langs {
&:lang(#{$lang}) {
font-weight: 700;
}
}
}
}
.report-modal__target {
padding: 20px;
.media-modal__close {
top: 19px;
right: 15px;
}
}
.loading-bar {
background-color: $ui-highlight-color;
height: 3px;
position: absolute;
top: 0;
left: 0;
}
2017-04-17 23:57:50 +00:00
.media-gallery__gifv__label {
display: block;
position: absolute;
color: $primary-text-color;
background: rgba($base-overlay-background, 0.5);
2017-04-17 23:57:50 +00:00
bottom: 6px;
left: 6px;
padding: 2px 6px;
border-radius: 2px;
font-size: 11px;
font-weight: 600;
z-index: 1;
pointer-events: none;
opacity: 0.9;
transition: opacity 0.1s ease;
}
.media-gallery__gifv {
&.autoplay {
.media-gallery__gifv__label {
display: none;
}
}
&:hover {
.media-gallery__gifv__label {
opacity: 1;
}
}
}
.attachment-list {
display: flex;
font-size: 14px;
border: 1px solid lighten($ui-base-color, 8%);
border-radius: 4px;
margin-top: 14px;
overflow: hidden;
&__icon {
flex: 0 0 auto;
color: $ui-base-lighter-color;
padding: 8px 18px;
cursor: default;
border-right: 1px solid lighten($ui-base-color, 8%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 26px;
.fa {
display: block;
}
}
&__list {
list-style: none;
padding: 4px 0;
padding-left: 8px;
display: flex;
flex-direction: column;
justify-content: center;
li {
display: block;
padding: 4px 0;
}
a {
text-decoration: none;
color: $ui-base-lighter-color;
font-weight: 500;
&:hover {
text-decoration: underline;
}
}
}
&.compact {
border: 0;
margin-top: 4px;
.attachment-list__list {
padding: 0;
display: block;
}
.fa {
color: $ui-base-lighter-color;
}
}
}
/* Media Gallery */
.media-gallery {
box-sizing: border-box;
margin-top: 8px;
overflow: hidden;
border-radius: 4px;
position: relative;
width: 100%;
}
.media-gallery__item {
border: none;
box-sizing: border-box;
display: block;
float: left;
position: relative;
border-radius: 4px;
overflow: hidden;
&.standalone {
.media-gallery__item-gifv-thumbnail {
transform: none;
top: 0;
}
}
}
.media-gallery__item-thumbnail {
cursor: zoom-in;
display: block;
text-decoration: none;
color: $ui-secondary-color;
line-height: 0;
&,
img {
height: 100%;
width: 100%;
}
img {
object-fit: cover;
}
}
.media-gallery__gifv {
height: 100%;
overflow: hidden;
position: relative;
width: 100%;
}
.media-gallery__item-gifv-thumbnail {
cursor: zoom-in;
height: 100%;
object-fit: cover;
position: relative;
top: 50%;
transform: translateY(-50%);
width: 100%;
z-index: 1;
}
.media-gallery__item-thumbnail-label {
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
position: absolute;
}
/* End Media Gallery */
/* Status Video Player */
.status__video-player {
background: $base-overlay-background;
box-sizing: border-box;
cursor: default; /* May not be needed */
margin-top: 8px;
overflow: hidden;
position: relative;
}
.status__video-player-video {
height: 100%;
object-fit: cover;
position: relative;
top: 50%;
transform: translateY(-50%);
width: 100%;
z-index: 1;
}
.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;
}
.video-player {
overflow: hidden;
position: relative;
background: $base-shadow-color;
max-width: 100%;
border-radius: 4px;
video {
height: 100%;
width: 100%;
z-index: 1;
}
&.fullscreen {
width: 100% !important;
height: 100% !important;
margin: 0;
video {
max-width: 100% !important;
max-height: 100% !important;
}
}
&.inline {
video {
object-fit: contain;
position: relative;
top: 50%;
transform: translateY(-50%);
}
}
&__controls {
position: absolute;
z-index: 2;
bottom: 0;
left: 0;
right: 0;
box-sizing: border-box;
background: linear-gradient(0deg, rgba($base-shadow-color, 0.85) 0, rgba($base-shadow-color, 0.45) 60%, transparent);
padding: 0 15px;
opacity: 0;
transition: opacity .1s ease;
&.active {
opacity: 1;
}
}
&.inactive {
video,
.video-player__controls {
visibility: hidden;
}
}
&__spoiler {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 4;
border: 0;
background: $base-shadow-color;
color: $ui-primary-color;
transition: none;
pointer-events: none;
&.active {
display: block;
pointer-events: auto;
&:hover,
&:active,
&:focus {
color: lighten($ui-primary-color, 8%);
}
}
&__title {
display: block;
font-size: 14px;
}
&__subtitle {
display: block;
font-size: 11px;
font-weight: 500;
}
}
&__buttons-bar {
display: flex;
justify-content: space-between;
padding-bottom: 10px;
}
&__buttons {
font-size: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&.left {
button {
padding-left: 0;
}
}
&.right {
button {
padding-right: 0;
}
}
button {
background: transparent;
padding: 2px 10px;
font-size: 16px;
border: 0;
color: rgba($white, 0.75);
&:active,
&:hover,
&:focus {
color: $white;
}
}
}
&__time-sep,
&__time-total,
&__time-current {
font-size: 14px;
font-weight: 500;
}
&__time-current {
color: $white;
margin-left: 10px;
}
&__time-sep {
display: inline-block;
margin: 0 6px;
}
&__time-sep,
&__time-total {
color: $white;
}
&__seek {
cursor: pointer;
height: 24px;
position: relative;
&::before {
content: "";
width: 100%;
background: rgba($white, 0.35);
border-radius: 4px;
display: block;
position: absolute;
height: 4px;
top: 10px;
}
2017-10-08 00:33:08 +00:00
&__progress,
&__buffer {
display: block;
position: absolute;
height: 4px;
border-radius: 4px;
top: 10px;
background: lighten($ui-highlight-color, 8%);
}
2017-10-08 00:33:08 +00:00
&__buffer {
background: rgba($white, 0.2);
}
&__handle {
position: absolute;
z-index: 3;
opacity: 0;
border-radius: 50%;
width: 12px;
height: 12px;
top: 6px;
margin-left: -6px;
transition: opacity .1s ease;
background: lighten($ui-highlight-color, 8%);
box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
pointer-events: none;
&.active {
opacity: 1;
}
}
&:hover {
.video-player__seek__handle {
opacity: 1;
}
}
}
&.detailed,
&.fullscreen {
.video-player__buttons {
button {
padding-top: 10px;
padding-bottom: 10px;
}
}
}
}
.media-spoiler-video {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
margin-top: 8px;
position: relative;
border: 0;
display: block;
}
.media-spoiler-video-play-icon {
border-radius: 100px;
color: rgba($primary-text-color, 0.8);
font-size: 36px;
left: 50%;
padding: 5px;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
/* End Video Player */
.account-gallery__container {
2017-09-23 22:33:26 +00:00
display: flex;
justify-content: center;
2017-09-23 22:33:26 +00:00
flex-wrap: wrap;
padding: 2px;
}
.account-gallery__item {
flex-grow: 1;
width: 50%;
overflow: hidden;
position: relative;
&::before {
content: "";
display: block;
padding-top: 100%;
}
a {
display: block;
width: calc(100% - 4px);
height: calc(100% - 4px);
margin: 2px;
top: 0;
left: 0;
background-color: $base-overlay-background;
background-size: cover;
background-position: center;
position: absolute;
color: $ui-primary-color;
2017-09-23 22:33:26 +00:00
text-decoration: none;
border-radius: 4px;
2017-09-23 22:33:26 +00:00
&:hover,
&:active,
&:focus {
outline: 0;
color: $ui-secondary-color;
&::before {
content: "";
display: block;
width: 100%;
height: 100%;
background: rgba($base-overlay-background, 0.3);
border-radius: 4px;
}
2017-09-23 22:33:26 +00:00
}
}
&__icons {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
}
}
.account__section-headline {
background: darken($ui-base-color, 4%);
border-bottom: 1px solid lighten($ui-base-color, 8%);
cursor: default;
display: flex;
a {
display: block;
flex: 1 1 auto;
color: $ui-primary-color;
padding: 15px 0;
font-size: 14px;
font-weight: 500;
text-align: center;
text-decoration: none;
position: relative;
&.active {
color: $ui-secondary-color;
&::before,
&::after {
display: block;
content: "";
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
transform: translateX(-50%);
border-style: solid;
border-width: 0 10px 10px;
border-color: transparent transparent lighten($ui-base-color, 8%);
}
&::after {
bottom: -1px;
border-color: transparent transparent $ui-base-color;
}
}
}
}
::-webkit-scrollbar-thumb {
border-radius: 0;
}
2017-10-02 16:24:05 +00:00
.search-popout {
background: $simple-background-color;
border-radius: 4px;
padding: 10px 14px;
padding-bottom: 14px;
margin-top: 10px;
color: $ui-primary-color;
box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
h4 {
text-transform: uppercase;
color: $ui-primary-color;
font-size: 13px;
font-weight: 500;
margin-bottom: 10px;
}
li {
padding: 4px 0;
}
ul {
margin-bottom: 10px;
}
em {
font-weight: 500;
color: $ui-base-color;
}
}
noscript {
text-align: center;
img {
width: 200px;
opacity: 0.5;
animation: flicker 4s infinite;
}
div {
font-size: 14px;
margin: 30px auto;
color: $ui-secondary-color;
max-width: 400px;
a {
color: $ui-highlight-color;
text-decoration: underline;
&:hover {
text-decoration: none;
}
}
}
}
@keyframes flicker {
0% { opacity: 1; }
30% { opacity: 0.75; }
100% { opacity: 1; }
}
@media screen and (max-width: 630px) and (max-height: 400px) {
$duration: 400ms;
$delay: 100ms;
.tabs-bar,
.search {
will-change: margin-top;
transition: margin-top $duration $delay;
}
.navigation-bar {
will-change: padding-bottom;
transition: padding-bottom $duration $delay;
}
.navigation-bar {
& > a:first-child {
will-change: margin-top, margin-left, width;
transition: margin-top $duration $delay, margin-left $duration ($duration + $delay);
}
& > .navigation-bar__profile-edit {
will-change: margin-top;
transition: margin-top $duration $delay;
}
& > .icon-button {
will-change: opacity;
transition: opacity $duration $delay;
}
}
.is-composing {
.tabs-bar,
.search {
margin-top: -50px;
}
.navigation-bar {
padding-bottom: 0;
& > a:first-child {
margin-top: -50px;
margin-left: -40px;
}
.navigation-bar__profile {
padding-top: 2px;
}
.navigation-bar__profile-edit {
position: absolute;
margin-top: -50px;
}
.icon-button {
pointer-events: auto;
opacity: 1;
}
}
}
}
.embed-modal {
max-width: 80vw;
max-height: 80vh;
h4 {
padding: 30px;
font-weight: 500;
font-size: 16px;
text-align: center;
}
.embed-modal__container {
padding: 10px;
.hint {
margin-bottom: 15px;
}
.embed-modal__html {
color: $ui-secondary-color;
outline: 0;
box-sizing: border-box;
display: block;
width: 100%;
border: none;
padding: 10px;
font-family: 'mastodon-font-monospace', monospace;
background: $ui-base-color;
color: $ui-primary-color;
font-size: 14px;
margin: 0;
margin-bottom: 15px;
&::-moz-focus-inner {
border: 0;
}
&::-moz-focus-inner,
&:focus,
&:active {
outline: 0 !important;
}
&:focus {
background: lighten($ui-base-color, 4%);
}
@media screen and (max-width: 600px) {
font-size: 16px;
}
}
.embed-modal__iframe {
width: 400px;
max-width: 100%;
overflow: hidden;
border: 0;
}
}
}
.account__moved-note {
padding: 14px 10px;
padding-bottom: 16px;
background: lighten($ui-base-color, 4%);
border-top: 1px solid lighten($ui-base-color, 8%);
border-bottom: 1px solid lighten($ui-base-color, 8%);
&__message {
position: relative;
margin-left: 58px;
color: $ui-base-lighter-color;
padding: 8px 0;
padding-top: 0;
padding-bottom: 4px;
font-size: 14px;
> span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
}
&__icon-wrapper {
left: -26px;
position: absolute;
}
.detailed-status__display-avatar {
position: relative;
}
.detailed-status__display-name {
margin-bottom: 0;
}
}
.column-inline-form {
padding: 7px 15px;
padding-right: 5px;
display: flex;
justify-content: flex-start;
align-items: center;
background: lighten($ui-base-color, 4%);
label {
flex: 1 1 auto;
input {
width: 100%;
margin-bottom: 6px;
&:focus {
outline: 0;
}
}
}
.icon-button {
flex: 0 0 auto;
margin-left: 5px;
}
}
.drawer__backdrop {
cursor: pointer;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba($base-overlay-background, 0.5);
}
.list-editor {
background: $ui-base-color;
flex-direction: column;
border-radius: 8px;
box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
width: 380px;
overflow: hidden;
@media screen and (max-width: 420px) {
width: 90%;
}
h4 {
padding: 15px 0;
background: lighten($ui-base-color, 13%);
font-weight: 500;
font-size: 16px;
text-align: center;
border-radius: 8px 8px 0 0;
}
.drawer__pager {
height: 50vh;
}
.drawer__inner {
border-radius: 0 0 8px 8px;
&.backdrop {
width: calc(100% - 60px);
box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
border-radius: 0 0 0 8px;
}
}
&__accounts {
overflow-y: auto;
}
.account__display-name {
&:hover strong {
text-decoration: none;
}
}
.account__avatar {
cursor: default;
}
.search {
margin-bottom: 0;
}
}
.focal-point-modal {
max-width: 80vw;
max-height: 80vh;
position: relative;
}
.focal-point {
position: relative;
cursor: pointer;
overflow: hidden;
&.dragging {
cursor: move;
}
img {
max-width: 80vw;
max-height: 80vh;
width: auto;
height: auto;
margin: auto;
}
&__reticle {
position: absolute;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
background: url('../images/reticle.png') no-repeat 0 0;
border-radius: 50%;
box-shadow: 0 0 0 9999em rgba($base-shadow-color, 0.35);
}
&__overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
}
.floating-action-button {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
width: 3.9375rem;
height: 3.9375rem;
bottom: 1.3125rem;
right: 1.3125rem;
background: darken($ui-highlight-color, 3%);
color: $white;
border-radius: 50%;
font-size: 21px;
line-height: 21px;
text-decoration: none;
box-shadow: 2px 3px 9px rgba($base-shadow-color, 0.4);
&:hover,
&:focus,
&:active {
background: lighten($ui-highlight-color, 7%);
}
}