diff options
Diffstat (limited to 'app/javascript/flavours/glitch/styles/components/index.scss')
| -rw-r--r-- | app/javascript/flavours/glitch/styles/components/index.scss | 3174 |
1 files changed, 28 insertions, 3146 deletions
diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index ca6fd9e99..e8cc1f504 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -81,28 +81,6 @@ } } -.column__wrapper { - display: flex; - flex: 1 1 auto; - position: relative; -} - -.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%); - } -} - .icon-button { display: inline-block; padding: 0; @@ -264,914 +242,9 @@ color: $ui-base-color; } -.follow-form__input { - background: $simple-background-color; - - &:disabled { - background: $ui-secondary-color; - } -} - -.emoji-picker-dropdown { - position: absolute; - right: 5px; - top: 5px; - - ::-webkit-scrollbar-track:hover, - ::-webkit-scrollbar-track:active { - background-color: rgba($base-overlay-background, 0.3); - } -} - -.emojione { - display: inline-block; - font-size: inherit; - vertical-align: middle; - object-fit: contain; - margin: -.2ex .15em .2ex; - width: 16px; - height: 16px; - - img { - width: auto; - } -} - -.status__content--with-action { - cursor: pointer; -} - -.status-check-box { - .status__content { - color: #3a3a3a; - a { - color: #005aa9; - } - } -} - -.status__content { - position: relative; - margin: 10px 0; - padding: 0 12px; - font-size: 15px; - line-height: 20px; - color: $primary-text-color; - word-wrap: break-word; - font-weight: 400; - overflow: visible; - white-space: pre-wrap; - padding-top: 5px; - - &:focus { - outline: 0; - } - - &.status__content--with-spoiler { - white-space: normal; - - .status__content__text { - white-space: pre-wrap; - } - } - - .emojione { - width: 20px; - height: 20px; - margin: -5px 0 0; - } - - p { - margin-bottom: 20px; - - &:last-child { - margin-bottom: 0; - } - } - - a { - color: $ui-secondary-color; - text-decoration: none; - - &:hover { - text-decoration: underline; - - .fa { - color: lighten($ui-base-color, 40%); - } - } - - &.mention { - &:hover { - text-decoration: none; - - span { - text-decoration: underline; - } - } - } - - .fa { - color: lighten($ui-base-color, 30%); - } - } - - .status__content__spoiler { - display: none; - - &.status__content__spoiler--visible { - display: block; - } - } -} - -.status__content__spoiler-link { - display: inline-block; - border-radius: 2px; - background: lighten($ui-base-color, 30%); - border: none; - color: lighten($ui-base-color, 8%); - font-weight: 500; - font-size: 11px; - padding: 0 5px; - text-transform: uppercase; - line-height: inherit; - cursor: pointer; - vertical-align: bottom; - - &:hover { - background: lighten($ui-base-color, 33%); - text-decoration: none; - } - - .status__content__spoiler-icon { - display: inline-block; - margin: 0 0 0 5px; - border-left: 1px solid currentColor; - padding: 0 0 0 4px; - font-size: 16px; - vertical-align: -2px; - } -} - -.status__prepend-icon-wrapper { - float: left; - margin: 0 10px 0 -58px; - width: 48px; - text-align: right; -} - -.notif-cleaning { - .status, .notification-follow { - padding-right: ($dismiss-overlay-width + 0.5rem); - } -} - -.notification-follow { - position: relative; - - // same like Status - border-bottom: 1px solid lighten($ui-base-color, 8%); - - .account { - border-bottom: 0 none; - } -} - -.focusable { - &:focus { - outline: 0; - background: lighten($ui-base-color, 4%); - - .status.status-direct { - background: lighten($ui-base-color, 12%); - - &.muted { - background: transparent; - } - } - - .detailed-status, - .detailed-status__action-bar { - background: lighten($ui-base-color, 8%); - } - } -} - -.status { - padding: 8px 10px; - position: relative; - height: auto; - 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%); - } - } - - &.light { - .status__relative-time { - color: $ui-primary-color; - } - - .status__display-name { - color: $ui-base-color; - } - - .display-name { - strong { - color: $ui-base-color; - } - - span { - color: $ui-primary-color; - } - } - - .status__content { - color: $ui-base-color; - - a { - color: $ui-highlight-color; - } - - a.status__content__spoiler-link { - color: $primary-text-color; - background: $ui-primary-color; - - &:hover { - background: lighten($ui-primary-color, 8%); - } - } - } - } - - &.collapsed { - background-position: center; - background-size: cover; - user-select: none; - - &.has-background::before { - display: block; - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - background-image: linear-gradient(to bottom, rgba($base-shadow-color, .75), rgba($base-shadow-color, .65) 24px, rgba($base-shadow-color, .8)); - content: ""; - } - - .display-name:hover .display-name__html { - text-decoration: none; - } - - .status__content { - height: 20px; - overflow: hidden; - text-overflow: ellipsis; - - a:hover { - text-decoration: none; - } - } - } - - .notification__message { - margin: -10px -10px 10px; - } -} - -.notification-favourite { - .status.status-direct { - background: transparent; - - .icon-button.disabled { - color: lighten($ui-base-color, 13%); - } - } -} - -.status__relative-time { - display: inline-block; - margin-left: auto; - padding-left: 18px; - width: 120px; - color: $ui-base-lighter-color; - font-size: 14px; - text-align: right; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.status__display-name { - margin: 0 auto 0 0; - color: $ui-base-lighter-color; - overflow: hidden; -} - -.status__info { - display: flex; - margin: 2px 0 5px; - font-size: 15px; - line-height: 24px; -} - -.status__info__icons { - flex: none; - position: relative; - color: lighten($ui-base-color, 26%); - - .status__visibility-icon { - padding-left: 6px; - } -} - -.status-check-box { - border-bottom: 1px solid $ui-secondary-color; - display: flex; - - .status__content { - flex: 1 1 auto; - padding: 10px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } -} - -.status-check-box-toggle { - align-items: center; - display: flex; - flex: 0 0 auto; - justify-content: center; - padding: 10px; -} - -.status__prepend { - margin: -10px -10px 10px; - color: $ui-base-lighter-color; - padding: 8px 10px 0 68px; - 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: 10px 4px 0; -} - -.status__action-bar-button { - float: left; - margin-right: 18px; - flex: 0 0 auto; -} - -.status__action-bar-dropdown { - float: left; - height: 23.15px; - width: 23.15px; - - // Dropdown style override for centering on the icon - .dropdown--active { - position: relative; - - .dropdown__content.dropdown__right { - left: calc(50% + 3px); - right: initial; - transform: translate(-50%, 0); - top: 22px; - } - - &::after { - right: 1px; - bottom: -2px; - } - } -} - -.detailed-status__action-bar-dropdown { - flex: 1 1 auto; - display: flex; - align-items: center; - justify-content: center; - position: relative; -} - -.detailed-status { - background: lighten($ui-base-color, 4%); - padding: 14px 10px; - - .status__content { - font-size: 19px; - line-height: 24px; - - .emojione { - width: 24px; - height: 24px; - margin: -5px 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; -} - -.account { - padding: 10px; - border-bottom: 1px solid lighten($ui-base-color, 8%); - color: inherit; - text-decoration: none; - - .account__display-name { - flex: 1 1 auto; - display: block; - color: $ui-primary-color; - overflow: hidden; - text-decoration: none; - font-size: 14px; - } - - &.small { - border: none; - padding: 0; - - & > .account__avatar-wrapper { margin: 0 8px 0 0 } - - & > .display-name { - height: 24px; - line-height: 24px; - } - } -} - -.account__wrapper { - display: flex; -} - -.account__avatar-wrapper { - float: left; - margin: 6px 16px 6px 6px; -} - -.account__avatar { - @include avatar-radius(); - position: relative; - cursor: pointer; - - &-inline { - display: inline-block; - vertical-align: middle; - margin-right: 5px; - } -} - -.account__avatar-overlay { - position: relative; - @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: 12px 10px; - white-space: nowrap; -} - -.account__header__wrapper { - flex: 0 0 auto; - background: lighten($ui-base-color, 4%); -} - -.account__header { - text-align: center; - background-size: cover; - background-position: center; - position: relative; - - & > div { - background: rgba(lighten($ui-base-color, 4%), 0.9); - padding: 20px 10px; - } - - .account__header__content { - color: $ui-secondary-color; - } - - .account__avatar { - @include avatar-radius(); - @include avatar-size(90px); - display: block; - margin: 0 auto 10px; - overflow: hidden; - } - - .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; - } - - 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; - 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; - } - } -} - -.account__header__display-name { - .emojione { - width: 25px; - height: 25px; - } -} - -.account__metadata { - width: 100%; - font-size: 15px; - line-height: 20px; - overflow: hidden; - border-collapse: collapse; - - a { - text-decoration: none; - - &:hover{ - text-decoration: underline; - } - } - - tr { - border-top: 1px solid lighten($ui-base-color, 8%); - } - - th, td { - padding: 14px 20px; - vertical-align: middle; - - & > div { - max-height: 40px; - overflow-y: auto; - white-space: pre-wrap; - text-overflow: ellipsis; - } - } - - th { - color: $ui-primary-color; - background: lighten($ui-base-color, 13%); - font-variant: small-caps; - max-width: 120px; - - a { - color: $primary-text-color; - } - } - - td { - flex: auto; - color: $primary-text-color; - background: $ui-base-color; - - a { - color: $ui-highlight-color; - } - } -} - -.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; - } - - 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 { - text-decoration: none; -} - -.status__display-name, -.account__display-name { - strong { - color: $primary-text-color; - } -} - -.muted { - .emojione { - opacity: 0.5; - } -} - -.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 { - flex: none; - margin: 0 10px 0 0; - height: 48px; - width: 48px; -} - -.muted { - .status__content p, - .status__content a { - color: $ui-base-lighter-color; - } - - .status__display-name strong { - color: $ui-base-lighter-color; - } - - .status__avatar, .emojione { - 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; - } - } -} - -.notification__message { - padding: 8px 10px 0 68px; - 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 { - float: left; - margin: 0 10px 0 -58px; - width: 48px; - text-align: right; + left: -26px; + position: absolute; .star-icon { color: $gold-star; @@ -1199,6 +272,8 @@ max-width: 100%; height: 36px; overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; strong { display: block; @@ -1252,11 +327,12 @@ } } -.status__relative-time, -.detailed-status__datetime { - &:hover { - text-decoration: underline; - } +.display-name__html { + font-weight: 500; +} + +.display-name__account { + font-size: 14px; } .image-loader { @@ -1452,168 +528,11 @@ } } -.columns-area { - display: flex; - flex: 1 1 auto; - flex-direction: row; - justify-content: flex-start; - overflow-x: auto; - position: relative; - padding: 10px; -} - -@include limited-single-column('screen and (max-width: 360px)', $parent: null) { - .columns-area { - padding: 0; - } - - .react-swipeable-view-container .columns-area { - height: calc(100% - 20px) !important; - } -} - -.react-swipeable-view-container { - &, - .columns-area, - .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; - overflow: hidden; - - .wide & { - flex: auto; - min-width: 330px; - max-width: 400px; - } - - > .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%); -} - -.column { - overflow: hidden; -} - -@include limited-single-column('screen and (max-width: 360px)', $parent: null) { - .tabs-bar { - margin: 0; - } -} - -:root { // Overrides .wide stylings for mobile view - @include single-column('screen and (max-width: 630px)', $parent: null) { - .column { - flex: auto; - width: 100%; - min-width: 0; - max-width: none; - padding: 0; - } - - .columns-area { - flex-direction: column; - } - } -} - -@include multi-columns('screen and (min-width: 631px)', $parent: null) { - .columns-area { - padding: 0; - } - - .column { - padding: 10px; - padding-left: 5px; - padding-right: 5px; - - &:first-child { - padding-left: 10px; - } - - &:last-child { - padding-right: 10px; - } - } - - .columns-area > div { - .column { - padding-left: 5px; - padding-right: 5px; - } - } -} - -.drawer__pager { - box-sizing: border-box; - padding: 0; - flex-grow: 1; - position: relative; - overflow: hidden; - display: flex; -} - -.drawer__inner { - position: absolute; - top: 0; - left: 0; - background: lighten($ui-base-color, 13%) url('~images/wave-drawer.png') no-repeat bottom / 100% auto; - box-sizing: border-box; - padding: 0; - display: flex; - flex-direction: column; - overflow: hidden; - overflow-y: auto; - width: 100%; - height: 100%; - - &.darker { - background: $ui-base-color; - } - - > .mastodon { - background: url('~images/mastodon-ui.png') no-repeat left bottom / contain; - flex: 1; - } -} - -.pseudo-drawer { - background: lighten($ui-base-color, 13%); - font-size: 13px; - text-align: left; -} - .tabs-bar { display: flex; background: lighten($ui-base-color, 8%); flex: 0 0 auto; overflow-y: auto; - margin: 10px; - margin-bottom: 0; } .tabs-bar__link { @@ -1689,62 +608,6 @@ } } -.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; - 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; - flex: 0 0 auto; - 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; @@ -1851,36 +714,6 @@ 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; - cursor: pointer; - outline: none; - - &:hover { - background: lighten($ui-base-color, 11%); - } -} - -.column-link__icon { - display: inline-block; - margin-right: 5px; -} - -.column-subheading { - background: $ui-base-color; - color: $ui-base-lighter-color; - padding: 8px 20px; - font-size: 12px; - font-weight: 500; - text-transform: uppercase; - cursor: default; -} - .getting-started__wrapper, .getting_started { background: $ui-base-color; @@ -1891,14 +724,8 @@ overflow-y: auto; } -.getting-started__footer { - display: flex; - flex-direction: column; -} - .getting-started { - box-sizing: border-box; - padding-bottom: 235px; + background: $ui-base-color; flex: 1 0 auto; p { @@ -1965,8 +792,6 @@ } } -@import 'boost'; - .no-reduce-motion button.icon-button i.fa-retweet { background-position: 0 0; height: 19px; @@ -1994,104 +819,6 @@ color: $ui-highlight-color; } -.status-card { - display: flex; - cursor: pointer; - 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; - - &:hover { - background: lighten($ui-base-color, 8%); - } -} - -.status-card-video, -.status-card-rich, -.status-card-photo { - margin-top: 14px; - overflow: hidden; - - iframe { - width: 100%; - height: auto; - } -} - -.status-card-photo { - display: block; - text-decoration: none; - - img { - display: block; - 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; -} - -.status-card__content { - flex: 1 1 auto; - overflow: hidden; - padding: 14px 14px 14px 8px; -} - -.status-card__description { - color: $ui-primary-color; -} - -.status-card__host { - display: block; - margin-top: 5px; - font-size: 13px; -} - -.status-card__image { - flex: 0 0 100px; - background: lighten($ui-base-color, 8%); -} - -.status-card.horizontal { - display: block; - - .status-card__image { - width: 100%; - } - - .status-card__image-image { - border-radius: 4px 4px 0 0; - } -} - -.status-card__image-image { - border-radius: 4px 0 0 4px; - display: block; - height: auto; - margin: 0; - width: 100%; -} - .load-more { display: block; color: $ui-base-lighter-color; @@ -2129,93 +856,6 @@ } } -.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; - padding: 15px; - font-size: 16px; - background: lighten($ui-base-color, 4%); - flex: 0 0 auto; - cursor: pointer; - position: relative; - z-index: 2; - outline: 0; - - &.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; - margin: -15px; - margin-left: 0; -} - -.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%); - } - } - - // glitch - added focus ring for keyboard navigation - &:focus { - text-shadow: 0 0 4px darken($ui-highlight-color, 5%); - } -} - .scrollable > div > :first-child .notification__dismiss-overlay > .wrappy { border-top: 1px solid $ui-base-color; } @@ -2270,96 +910,6 @@ } } -.column-header__notif-cleaning-buttons { - display: flex; - align-items: stretch; - justify-content: space-around; - - button { - @extend .column-header__button; - background: transparent; - text-align: center; - padding: 10px 0; - white-space: pre-wrap; - } - - b { - font-weight: bold; - } -} - -// The notifs drawer with no padding to have more space for the buttons -.column-header__collapsible-inner.nopad-drawer { - padding: 0; -} - -.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; - } - - // notif cleaning drawer - &.ncd { - transition: none; - &.collapsed { - max-height: 0; - opacity: 0.7; - } - } -} - -.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; - } - } -} - -.column-header__title { - display: inline-block; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - flex: 1; -} - .text-btn { display: inline-block; padding: 0; @@ -2371,11 +921,6 @@ cursor: pointer; } -.column-header__icon { - display: inline-block; - margin-right: 5px; -} - .loading-indicator { color: lighten($ui-base-color, 26%); font-size: 12px; @@ -2445,161 +990,19 @@ 100% { opacity: 0.25; } } -.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; - width: 100%; - height: 100%; - justify-content: center; - position: relative; - text-align: center; - z-index: 100; - display: flex; - flex-direction: column; - align-items: stretch; - - .status__content > & { - margin-top: 15px; // Add margin when used bare for NSFW video player - } - - @include fullwidth-gallery; -} - -.media-spoiler__warning { - display: block; - font-size: 14px; -} - -.media-spoiler__trigger { - display: block; - font-size: 11px; - font-weight: 500; -} - -.sensitive-info { - display: flex; - flex-direction: row; - align-items: center; +.spoiler-button { + display: none; + left: 4px; position: absolute; + text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color; top: 4px; - left: 4px; z-index: 100; -} - -.sensitive-marker { - margin: 0 3px; - border-radius: 2px; - padding: 2px 6px; - color: rgba($primary-text-color, 0.8); - background: rgba($base-overlay-background, 0.5); - font-size: 12px; - line-height: 15px; - text-transform: uppercase; - opacity: .9; - transition: opacity .1s ease; - - .media-gallery:hover & { opacity: 1 } -} - -.modal-container--preloader { - background: lighten($ui-base-color, 8%); -} - -.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; -} - -.column-settings__outer { - background: lighten($ui-base-color, 8%); - padding: 15px; -} - -.column-settings__section { - color: $ui-primary-color; - cursor: default; - display: block; - font-weight: 500; - margin-bottom: 10px; -} -.column-settings__row { - .text-btn { - margin-bottom: 15px; + &.spoiler-button--visible { + display: block; } } -.modal-container__nav { - align-items: center; - background: rgba($base-overlay-background, 0.5); - box-sizing: border-box; - border: 0; - color: $primary-text-color; - cursor: pointer; - display: flex; - font-size: 24px; - height: 100%; - padding: 30px 15px; - position: absolute; - top: 0; -} - -.modal-container__nav--left { - left: -61px; -} - -.modal-container__nav--right { - right: -61px; -} - -.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--action-button { - position: absolute; - top: 10px; - right: 20px; -} - .setting-toggle { display: block; line-height: 24px; @@ -2619,37 +1022,6 @@ 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); @@ -2682,64 +1054,6 @@ animation: heartbeat 1.5s ease-in-out infinite 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; - - .emoji-mart-scroll { - transition: opacity 200ms ease; - } - - &.selecting .emoji-mart-scroll { - opacity: 0.5; - } -} - -.emoji-picker-dropdown__modifiers { - position: absolute; - top: 60px; - right: 11px; - cursor: pointer; -} - -.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; - - button { - display: block; - cursor: pointer; - border: 0; - padding: 4px 8px; - background: transparent; - - &:hover, - &:focus, - &:active { - background: rgba($ui-secondary-color, 0.4); - } - } - - .emoji-mart-emoji { - height: 22px; - } -} - -.emoji-mart-emoji { - span { - background-repeat: no-repeat; - } -} - .upload-area { align-items: center; background: rgba($base-overlay-background, 0.8); @@ -2792,774 +1106,11 @@ border-radius: 4px; } -.emoji-button { - display: block; - font-size: 24px; - line-height: 24px; - margin-left: 2px; - width: 24px; - outline: 0; - cursor: pointer; - - &:active, - &:focus { - outline: 0 !important; - } - - img { - filter: grayscale(100%); - 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; } -.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; - font-size: 14px; - margin: 0; - - &::-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; - } -} - -.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; - cursor: default; - pointer-events: none; - - &.active { - pointer-events: auto; - opacity: 0.3; - } - } - - .fa-search { - transform: rotate(90deg); - - &.active { - pointer-events: none; - transform: rotate(0deg); - } - } - - .fa-times-circle { - top: 11px; - transform: rotate(0deg); - cursor: pointer; - - &.active { - transform: rotate(90deg); - } - - &:hover { - color: $primary-text-color; - } - } -} - -.search-results__header { - color: $ui-base-lighter-color; - background: lighten($ui-base-color, 2%); - border-bottom: 1px solid darken($ui-base-color, 4%); - padding: 15px 10px; - font-size: 14px; - font-weight: 500; -} - -.search-results__hashtag { - display: block; - padding: 10px; - color: $ui-secondary-color; - text-decoration: none; - - &:hover, - &:active, - &:focus { - color: lighten($ui-secondary-color, 4%); - text-decoration: underline; - } -} - -.modal-root { - transition: opacity 0.3s linear; - will-change: opacity; - z-index: 9999; -} - -.modal-root__overlay { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba($base-overlay-background, 0.7); -} - -.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; -} - -.media-modal { - max-width: 80vw; - max-height: 80vh; - position: relative; - - .extended-video-player, - img, - canvas, - video { - max-width: 80vw; - max-height: 80vh; - width: auto; - height: auto; - margin: auto; - } - - .extended-video-player, - video { - display: flex; - width: 80vw; - height: 80vh; - } - - img, - canvas { - display: block; - background: url('~images/void.png') repeat; - object-fit: contain; - } - - .react-swipeable-view-container { - max-width: 80vw; - } -} - -.media-modal__content { - background: $base-overlay-background; -} - -.media-modal__pagination { - width: 100%; - text-align: center; - position: absolute; - left: 0; - bottom: -40px; -} - -.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: 4px; - top: 4px; - 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: 420px; - - .react-swipeable-view-container > div { - width: 100%; - height: 100%; - box-sizing: border-box; - padding: 25px; - 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%); - background-color: transparent; - border: 0; - font-size: 14px; - font-weight: 500; - padding: 0; - line-height: inherit; - height: auto; - - &:hover, - &:focus, - &:active { - color: darken($ui-secondary-color, 38%); - } - - &.onboarding-modal__done, - &.onboarding-modal__next { - color: $ui-highlight-color; - } - } -} - -.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; - - &.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%); - } - } - - 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; - } - } -} - -.onboarding-modal__page-one { - display: flex; - align-items: center; -} - -.onboarding-modal__page-one__elephant-friend { - background: url('~images/elephant-friend-1.png') no-repeat center center / contain; - width: 155px; - height: 193px; - margin-right: 15px; -} - -@media screen and (max-width: 400px) { - .onboarding-modal__page-one { - flex-direction: column; - align-items: normal; - } - - .onboarding-modal__page-one__elephant-friend { - width: 100%; - height: 30vh; - max-height: 160px; - margin-bottom: 5vh; - } -} - -.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; - } -} - -.onboarding-modal__image { - border-radius: 8px; - width: 70vw; - max-width: 450px; - max-height: auto; - display: block; - margin: auto; - margin-bottom: 20px; -} - -.onboard-sliders { - display: inline-block; - max-width: 30px; - max-height: auto; - margin-left: 10px; -} - -.boost-modal, -.favourite-modal, -.confirmation-modal, -.report-modal, -.actions-modal, -.mute-modal { - background: lighten($ui-secondary-color, 8%); - color: $ui-base-color; - border-radius: 8px; - overflow: hidden; - max-width: 90vw; - width: 480px; - position: relative; - flex-direction: column; - - .status__display-name { - display: flex; - } -} - -.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; - } -} - -.boost-modal__container, -.favourite-modal__container{ - overflow-x: scroll; - padding: 10px; - - .status { - user-select: text; - border-bottom: 0; - } -} - -.boost-modal__action-bar, -.favourite-modal__action-bar, -.confirmation-modal__action-bar, -.mute-modal__action-bar, -.report-modal__action-bar { - display: flex; - justify-content: space-between; - background: $ui-secondary-color; - padding: 10px; - line-height: 36px; - - & > div { - flex: 1 1 auto; - text-align: right; - color: lighten($ui-base-color, 33%); - padding-right: 10px; - } - - .button { - flex: 0 0 auto; - } -} - -.boost-modal__status-header, -.favourite-modal__status-header { - font-size: 15px; -} - -.boost-modal__status-time, -.favourite-modal__status-time { - float: right; - font-size: 14px; -} - -.confirmation-modal { - max-width: 85vw; - - @media screen and (min-width: 480px) { - max-width: 380px; - } -} - -.mute-modal { - line-height: 24px; -} - -.mute-modal .react-toggle { - vertical-align: middle; -} - -.report-modal__statuses, -.report-modal__comment { - padding: 10px; -} - -.report-modal__statuses { - min-height: 20vh; - max-height: 40vh; - overflow-y: auto; - overflow-x: hidden; -} - -.report-modal__comment { - .setting-text { - margin-top: 10px; - } -} - -.actions-modal { - .status { - overflow-y: auto; - max-height: 300px; - } - - max-height: 80vh; - max-width: 80vw; - - strong { - display: block; - font-weight: 500; - } - - ul { - overflow-y: auto; - flex-shrink: 0; - - li:empty { - margin: 0; - } - - li:not(:empty) { - & > .link { - color: $ui-base-color; - display: flex; - padding: 12px 16px; - font-size: 15px; - align-items: center; - text-decoration: none; - transition: none; - - &.active, - &:hover, - &:active, - &:focus { - background: $ui-highlight-color; - color: $primary-text-color; - } - - & > .react-toggle, - & > .icon { - margin-right: 10px; - } - } - } - } -} - -.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, -.mute-modal__container, -.report-modal__target { - padding: 30px; - font-size: 16px; - text-align: center; - - strong { - font-weight: 500; - } -} - .loading-bar { background-color: $ui-highlight-color; height: 3px; @@ -3568,508 +1119,6 @@ left: 0; } -.media-gallery__gifv__label { - display: block; - position: absolute; - color: $primary-text-color; - background: rgba($base-overlay-background, 0.5); - 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; -} - -.attachment-list__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; - } -} - -.attachment-list__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; - } - } -} - -/* Media Gallery */ -.media-gallery { - box-sizing: border-box; - margin-top: 15px; - overflow: hidden; - position: relative; - background: $base-shadow-color; - width: 100%; - height: 110px; - - .detailed-status & { - margin-left: -12px; - width: calc(100% + 24px); - height: 250px; - } - - @include fullwidth-gallery; -} - -.media-gallery__item { - border: none; - box-sizing: border-box; - display: block; - float: left; - position: relative; - - &.standalone { - .media-gallery__item-gifv-thumbnail { - transform: none; - } - } -} - -.media-gallery__item-thumbnail { - cursor: zoom-in; - text-decoration: none; - width: 100%; - height: 100%; - line-height: 0; - display: flex; - - img { - width: 100%; - object-fit: contain; - - &:not(.letterbox) { - height: 100%; - object-fit: cover; - } - } -} - -.media-gallery__gifv { - height: 100%; - overflow: hidden; - position: relative; - width: 100%; - display: flex; - justify-content: center; -} - -.media-gallery__item-gifv-thumbnail { - cursor: zoom-in; - height: 100%; - position: relative; - z-index: 1; - object-fit: contain; - - &:not(.letterbox) { - height: 100%; - object-fit: cover; - } -} - -.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 { - display: flex; - align-items: center; - background: $base-shadow-color; - box-sizing: border-box; - cursor: default; /* May not be needed */ - margin-top: 15px; - overflow: hidden; - position: relative; - width: 100%; - - @include fullwidth-gallery; -} - -.status__video-player-video { - position: relative; - width: 100%; - z-index: 1; - - &:not(.letterbox) { - height: 100%; - object-fit: cover; - } -} - -.status__video-player-expand, -.status__video-player-mute { - color: $primary-text-color; - opacity: 0.8; - position: absolute; - right: 4px; - text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color; -} - -.status__video-player-spoiler { - display: none; - color: $primary-text-color; - left: 4px; - position: absolute; - text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color; - top: 4px; - z-index: 100; - - &.status__video-player-spoiler--visible { - display: block; - } -} - -.status__video-player-expand { - bottom: 4px; - z-index: 100; -} - -.status__video-player-mute { - top: 4px; - z-index: 5; -} - -.video-player { - overflow: hidden; - position: relative; - background: $base-shadow-color; - width: 100%; - max-width: 100%; - height: 110px; - - .detailed-status & { - margin-left: -12px; - width: calc(100% + 24px); - height: 250px; - } - - @include fullwidth-gallery; - - 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: cover; - 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.8) 0, rgba($base-shadow-color, 0.35) 60%, transparent); - padding: 0 10px; - 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 { - padding-bottom: 10px; - font-size: 16px; - - &.left { - float: left; - - button { - padding-right: 10px; - } - } - - &.right { - float: right; - - button { - padding-left: 10px; - } - } - - button { - background: transparent; - padding: 0; - border: 0; - color: $white; - - &:active, - &:hover, - &:focus { - color: $ui-highlight-color; - } - } - } - - &__seek { - cursor: pointer; - height: 24px; - position: relative; - - &::before { - content: ""; - width: 100%; - background: rgba($white, 0.35); - display: block; - position: absolute; - height: 4px; - top: 10px; - } - - &__progress, - &__buffer { - display: block; - position: absolute; - height: 4px; - top: 10px; - background: $ui-highlight-color; - } - - &__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: $ui-highlight-color; - pointer-events: none; - - &.active { - opacity: 1; - } - } - - &:hover { - .video-player__seek__handle { - opacity: 1; - } - } - } -} - -.media-spoiler-video { - background-size: cover; - background-repeat: no-repeat; - background-position: center; - cursor: pointer; - margin-top: 15px; - position: relative; - width: 100%; - - @include fullwidth-gallery; - - 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 { - margin: -2px; - padding: 4px; - display: flex; - flex-wrap: wrap; -} - -.account-gallery__item { - flex: 1 1 auto; - width: calc(100% / 3 - 4px); - height: 95px; - margin: 2px; - - a { - display: block; - width: 100%; - height: 100%; - background-color: $base-overlay-background; - background-size: cover; - background-position: center; - position: relative; - color: inherit; - text-decoration: none; - - &:hover, - &:active, - &:focus { - outline: 0; - } - } -} - -.account-section-headline { - color: $ui-base-lighter-color; - background: lighten($ui-base-color, 2%); - border-bottom: 1px solid lighten($ui-base-color, 4%); - padding: 15px 10px; - font-size: 14px; - font-weight: 500; - position: relative; - cursor: default; - - &::before, - &::after { - display: block; - content: ""; - position: absolute; - bottom: 0; - left: 18px; - width: 0; - height: 0; - border-style: solid; - border-width: 0 10px 10px; - border-color: transparent transparent lighten($ui-base-color, 4%); - } - - &::after { - bottom: -1px; - border-color: transparent transparent $ui-base-color; - } -} - ::-webkit-scrollbar-thumb { border-radius: 0; } @@ -4106,186 +1155,19 @@ noscript { 100% { opacity: 1; } } -// more fixes for the navbar-under mode -@mixin fix-margins-for-navbar-under { - .tabs-bar { - margin-top: 0 !important; - margin-bottom: -6px !important; - } -} - -.single-column.navbar-under { - @include fix-margins-for-navbar-under; -} - -.auto-columns.navbar-under { - @media screen and (max-width: 360px) { - @include fix-margins-for-navbar-under; - } -} - -.auto-columns.navbar-under .react-swipeable-view-container .columns-area, -.single-column.navbar-under .react-swipeable-view-container .columns-area { - @media screen and (max-width: 360px) { - height: 100% !important; - } -} - -.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; - } - } -} - - -.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; - } -} - +@import 'boost'; +@import 'accounts'; +@import 'status'; +@import 'modal'; +@import 'metadata'; @import 'composer'; +@import 'columns'; +@import 'search'; +@import 'emoji'; @import 'doodle'; @import 'drawer'; +@import 'media'; +@import 'sensitive'; +@import 'lists'; @import 'emoji_picker'; @import 'local_settings'; |