From 077278b7dcd6ca5d7001afe01649f2c6c38cf097 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Tue, 2 Jun 2020 21:11:01 -0500 Subject: [PATCH] Break out components.scss --- app/styles/accounts.scss | 333 ++ app/styles/application.scss | 52 +- app/styles/basics.scss | 154 +- app/styles/components.scss | 5212 ----------------- app/styles/components/account-header.scss | 33 + app/styles/components/badge.scss | 35 + app/styles/components/columns.scss | 662 +++ app/styles/components/compose-form.scss | 227 + app/styles/components/detailed-status.scss | 35 + app/styles/components/display-name.scss | 61 + app/styles/components/drawer.scss | 81 + app/styles/components/error-boundary.scss | 18 + app/styles/components/getting-started.scss | 77 + app/styles/components/list-forms.scss | 119 + app/styles/components/media-gallery.scss | 145 + app/styles/components/media-spoiler.scss | 28 + app/styles/components/modal.scss | 227 + app/styles/components/navigation-bar.scss | 138 + app/styles/components/notification.scss | 53 + app/styles/components/profile-info-panel.scss | 135 + app/styles/components/promo-panel.scss | 51 + app/styles/components/react-toggle.scss | 105 + app/styles/components/reply-indicator.scss | 51 + app/styles/components/search.scss | 162 + app/styles/components/setting-toggle.scss | 12 + app/styles/components/spoiler-button.scss | 46 + app/styles/components/status.scss | 558 ++ .../components/timeline-queue-header.scss | 32 + app/styles/components/trends.scss | 78 + app/styles/components/video-player.scss | 388 ++ app/styles/components/wtf-panel.scss | 128 + app/styles/emoji_picker.scss | 58 + app/styles/loading.scss | 210 + app/styles/modal.scss | 13 - app/styles/ui.scss | 749 +++ 35 files changed, 5218 insertions(+), 5248 deletions(-) delete mode 100644 app/styles/components.scss create mode 100644 app/styles/components/badge.scss create mode 100644 app/styles/components/columns.scss create mode 100644 app/styles/components/display-name.scss create mode 100644 app/styles/components/drawer.scss create mode 100644 app/styles/components/error-boundary.scss create mode 100644 app/styles/components/getting-started.scss create mode 100644 app/styles/components/list-forms.scss create mode 100644 app/styles/components/media-gallery.scss create mode 100644 app/styles/components/media-spoiler.scss create mode 100644 app/styles/components/navigation-bar.scss create mode 100644 app/styles/components/notification.scss create mode 100644 app/styles/components/profile-info-panel.scss create mode 100644 app/styles/components/promo-panel.scss create mode 100644 app/styles/components/react-toggle.scss create mode 100644 app/styles/components/reply-indicator.scss create mode 100644 app/styles/components/search.scss create mode 100644 app/styles/components/setting-toggle.scss create mode 100644 app/styles/components/spoiler-button.scss create mode 100644 app/styles/components/status.scss create mode 100644 app/styles/components/timeline-queue-header.scss create mode 100644 app/styles/components/trends.scss create mode 100644 app/styles/components/video-player.scss create mode 100644 app/styles/components/wtf-panel.scss create mode 100644 app/styles/loading.scss delete mode 100644 app/styles/modal.scss create mode 100644 app/styles/ui.scss diff --git a/app/styles/accounts.scss b/app/styles/accounts.scss index f54595588..30528f2dd 100644 --- a/app/styles/accounts.scss +++ b/app/styles/accounts.scss @@ -319,3 +319,336 @@ margin-top: 10px; } } + +.account { + padding: 10px; + + &:not(:last-of-type) { + border-bottom: 1px solid var(--brand-color-med); + } + + &.compact { + padding: 0; + border-bottom: 0; + + .account__avatar-wrapper { + margin-left: 0; + } + } + + .account__display-name { + flex: 1 1 auto; + display: block; + color: var(--primary-text-color-faint); + overflow: hidden; + text-decoration: none; + font-size: 14px; + } +} + +.account__wrapper { + display: flex; +} + +.account__avatar-wrapper { + float: left; + margin-right: 12px; +} + +.account__avatar { + @include avatar-radius; + position: relative; + background-color: var(--brand-color-faint); + + &-inline { + display: inline-block; + vertical-align: middle; + margin-right: 5px; + } + + &-composite { + @include avatar-radius; + overflow: hidden; + + & > div { + @include avatar-radius; + float: left; + position: relative; + box-sizing: border-box; + } + } +} + +a .account__avatar { + cursor: pointer; +} + +.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: auto; + padding: 0 0 0 5px; + position: relative; + + .dismiss-account-btn { + display: block; + margin-bottom: 5px; + } +} + +.account__reciprocal_follow_message { + padding: 0 5px; + color: var(--primary-text-color-faint); + text-align: center; +} + +.account__disclaimer { + padding: 10px; + border-top: 1px solid var(--brand-color-med); + color: var(--primary-text-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__action-bar { + border-top: 1px solid var(--brand-color-med); + border-bottom: 1px solid var(--brand-color-med); + line-height: 36px; + overflow: hidden; + flex: 0 0 auto; + display: flex; +} + +.account__action-bar-dropdown { + padding: 10px; + + .icon-button { + vertical-align: middle; + } + + .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; + text-align: center; +} + +.account__action-bar__tab { + text-decoration: none; + overflow: hidden; + flex: 0 1 100%; + border-right: 1px solid var(--brand-color-med); + padding: 10px 0; + border-bottom: 4px solid transparent; + + &.active { + border-bottom: 4px solid var(--brand-color); + } + + & > span { + display: block; + text-transform: uppercase; + font-size: 11px; + color: var(--primary-text-color-faint); + } + + strong { + display: block; + font-size: 15px; + font-weight: 500; + color: var(--primary-text-color); + + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + font-weight: 700; + } + } + } +} + +.account-authorize { + padding: 14px 10px; + + .detailed-status__display-name { + display: block; + margin-bottom: 15px; + overflow: hidden; + } +} + +.account-authorize__avatar { + float: left; + margin-right: 10px; +} + +// TEMPORARY - need a default size for the avatars for now +// They are sized individually all over the application and need to change with breakpoints as well +// Might create a mixin to accept the size attribute and apply the various properties where necessary +.account__avatar { + width: 56px; + height: 56px; + background-size: cover; +} + +.account-gallery__container { + display: flex; + flex-wrap: wrap; + padding: 4px 2px; +} + +.account-gallery__item { + border: 0; + box-sizing: border-box; + display: block; + position: relative; + border-radius: 4px; + overflow: hidden; + margin: 2px; + + a { + background: var(--brand-color-faint); + } + + &__icons { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 24px; + } +} + +.account--panel { + background: var(--brand-color-faint); + border-top: 1px solid var(--brand-color-med); + border-bottom: 1px solid var(--brand-color-med); + display: flex; + flex-direction: row; + padding: 10px 0; +} + +.account__section-headline { + background: var(--brand-color-faint); + + button, + a { + flex: none; + padding: 18px 15px; + font-size: 16px; + font-weight: 600; + + &.active { + &::before, + &::after { + border-color: transparent transparent var(--foreground-color); + } + } + } +} + +.account__moved-note { + padding: 14px 10px; + padding-bottom: 16px; + background: var(--brand-color-faint); + border-top: 1px solid var(--brand-color-med); + border-bottom: 1px solid var(--brand-color-med); + + &__message { + position: relative; + margin-left: 58px; + color: var(--primary-text-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; + } +} + +.relationship-tag { + color: var(--primary-text-color); + margin-bottom: 4px; + display: block; + vertical-align: top; + background-color: var(--background-color); + text-transform: uppercase; + font-size: 11px; + font-weight: 500; + padding: 4px; + border-radius: 4px; + opacity: 0.7; + + &:hover { + opacity: 1; + } +} diff --git a/app/styles/application.scss b/app/styles/application.scss index 3b5222fe1..8c32a2289 100644 --- a/app/styles/application.scss +++ b/app/styles/application.scss @@ -13,9 +13,20 @@ @import 'accounts'; @import 'stream_entries'; @import 'boost'; - -// NOTE - In the process of stripping this giant file into individual components (below) -@import 'components'; +@import 'loading'; +@import 'ui'; +@import 'polls'; +@import 'introduction'; +@import 'emoji_picker'; +@import 'about'; +@import 'tables'; +@import 'dashboard'; +@import 'rtl'; +@import 'accessibility'; +@import 'donations'; +@import 'dyslexic'; +@import 'demetricator'; +@import 'pro'; // COMPONENTS @import 'components/buttons'; @@ -33,17 +44,26 @@ @import 'components/sidebar-menu'; @import 'components/hotkeys-modal'; @import 'components/emoji-reacts'; +@import 'components/status'; +@import 'components/reply-indicator'; @import 'components/detailed-status'; - -@import 'polls'; -@import 'introduction'; -@import 'emoji_picker'; -@import 'about'; -@import 'tables'; -@import 'dashboard'; -@import 'rtl'; -@import 'accessibility'; -@import 'donations'; -@import 'dyslexic'; -@import 'demetricator'; -@import 'pro'; +@import 'components/list-forms'; +@import 'components/media-gallery'; +@import 'components/notification'; +@import 'components/display-name'; +@import 'components/columns'; +@import 'components/search'; +@import 'components/react-toggle'; +@import 'components/getting-started'; +@import 'components/navigation-bar'; +@import 'components/promo-panel'; +@import 'components/drawer'; +@import 'components/timeline-queue-header'; +@import 'components/badge'; +@import 'components/trends'; +@import 'components/wtf-panel'; +@import 'components/profile-info-panel'; +@import 'components/setting-toggle'; +@import 'components/spoiler-button'; +@import 'components/media-spoiler'; +@import 'components/error-boundary'; diff --git a/app/styles/basics.scss b/app/styles/basics.scss index fd7f33ac1..c2f448c42 100644 --- a/app/styles/basics.scss +++ b/app/styles/basics.scss @@ -126,13 +126,9 @@ body { } } -button { - font-family: inherit; - cursor: pointer; - - &:focus { - outline: none; - } +.app-body { + -webkit-overflow-scrolling: touch; + -ms-overflow-style: -ms-autohiding-scrollbar; } .app-holder { @@ -193,3 +189,147 @@ button { } } } + +button { + font-family: inherit; + cursor: pointer; + + &:focus { + outline: none; + } +} + +.button { + background-color: var(--brand-color); + border: 10px none; + border-radius: 4px; + box-sizing: border-box; + color: #fff; + cursor: pointer; + display: inline-block; + font-family: inherit; + font-size: 14px; + font-weight: 500; + height: 36px; + letter-spacing: 0; + line-height: 36px; + overflow: hidden; + padding: 0 16px; + position: relative; + text-align: center; + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; + width: auto; + transition: 0.2s; + + &:active, + &:focus, + &:hover { + background-color: var(--brand-color-hicontrast); + } + + &--destructive { + transition: none; + + &:active, + &:focus, + &:hover { + background-color: $error-red; + transition: none; + } + } + + &--small { + font-size: 13px; + height: auto; + line-height: normal; + padding: 4px 8px; + } + + &:disabled, + &.disabled { + background-color: var(--brand-color-med); + cursor: default; + } + + &::-moz-focus-inner { + border: 0; + } + + &::-moz-focus-inner, + &:focus, + &:active { + outline: 0 !important; + } + + &.button-alternative { + color: var(--primary-text-color); + background: var(--brand-color); + + &:active, + &:focus, + &:hover { + background-color: var(--brand-color); + } + } + + &.button-alternative-2 { + background: var(--brand-color-med); + + &:active, + &:focus, + &:hover { + background-color: var(--brand-color-faint); + } + } + + &.button-secondary { + color: var(--primary-text-color-faint); + background: transparent; + padding: 3px 15px; + border: 1px solid var(--brand-color); + + &:active, + &:focus, + &:hover { + border-color: var(--brand-color); + color: var(--primary-text-color); + } + + &:disabled { + opacity: 0.5; + } + } + + &.button--block { + display: block; + width: 100%; + } +} + +noscript { + text-align: center; + + img { + width: 200px; + opacity: 0.5; + animation: flicker 4s infinite; + } + + div { + font-size: 14px; + margin: 30px auto; + color: var(--primary-text-color-faint); + max-width: 400px; + + a { + color: var(--highlight-text-color); + text-decoration: underline; + + &:hover { + text-decoration: none; + } + } + } +} diff --git a/app/styles/components.scss b/app/styles/components.scss deleted file mode 100644 index 8f10df23e..000000000 --- a/app/styles/components.scss +++ /dev/null @@ -1,5212 +0,0 @@ -.app-body { - -webkit-overflow-scrolling: touch; - -ms-overflow-style: -ms-autohiding-scrollbar; -} - -.button { - background-color: var(--brand-color); - border: 10px none; - border-radius: 4px; - box-sizing: border-box; - color: #fff; - cursor: pointer; - display: inline-block; - font-family: inherit; - font-size: 14px; - font-weight: 500; - height: 36px; - letter-spacing: 0; - line-height: 36px; - overflow: hidden; - padding: 0 16px; - position: relative; - text-align: center; - text-decoration: none; - text-overflow: ellipsis; - white-space: nowrap; - width: auto; - transition: 0.2s; - - &:active, - &:focus, - &:hover { - background-color: var(--brand-color-hicontrast); - } - - &--destructive { - transition: none; - - &:active, - &:focus, - &:hover { - background-color: $error-red; - transition: none; - } - } - - &--small { - font-size: 13px; - height: auto; - line-height: normal; - padding: 4px 8px; - } - - &:disabled, - &.disabled { - background-color: var(--brand-color-med); - cursor: default; - } - - &::-moz-focus-inner { - border: 0; - } - - &::-moz-focus-inner, - &:focus, - &:active { - outline: 0 !important; - } - - &.button-alternative { - color: var(--primary-text-color); - background: var(--brand-color); - - &:active, - &:focus, - &:hover { - background-color: var(--brand-color); - } - } - - &.button-alternative-2 { - background: var(--brand-color-med); - - &:active, - &:focus, - &:hover { - background-color: var(--brand-color-faint); - } - } - - &.button-secondary { - color: var(--primary-text-color-faint); - background: transparent; - padding: 3px 15px; - border: 1px solid var(--brand-color); - - &:active, - &:focus, - &:hover { - border-color: var(--brand-color); - color: var(--primary-text-color); - } - - &:disabled { - opacity: 0.5; - } - } - - &.button--block { - display: block; - width: 100%; - } -} - -.column__wrapper { - display: flex; - flex: 1 1 auto; - position: relative; -} - -.icon-button { - display: inline-block; - padding: 0; - color: rgba(var(--primary-text-color-rgb), 0.4); - border: 0; - background: transparent; - cursor: pointer; - transition: color 100ms ease-in; - - i.fa { - margin: 0; - } - - &:hover, - &:active, - &:focus { - color: rgba(var(--primary-text-color-rgb), 0.6); - transition: color 200ms ease-out; - } - - &.disabled { - color: rgba(var(--primary-text-color-rgb), 0.2); - cursor: default; - } - - &.active { - color: var(--highlight-text-color); - } - - &::-moz-focus-inner { - border: 0; - } - - &::-moz-focus-inner, - &:focus, - &:active { - outline: 0 !important; - } - - &.inverted { - color: var(--primary-text-color-faint); - - &:hover, - &:active, - &:focus { - color: var(--primary-text-color-faint); - } - - &.disabled { - color: var(--primary-text-color-faint); - } - - &.active { - color: var(--highlight-text-color); - - &.disabled { - color: var(--highlight-text-color); - } - } - } - - &.overlayed { - box-sizing: content-box; - background: var(--foreground-color); - color: var(--primary-text-color-faint); - border-radius: 4px; - padding: 2px; - - &:hover { - background: var(--background-color); - } - } -} - -.text-icon-button { - color: var(--primary-text-color-faint); - border: 0; - background: transparent; - cursor: pointer; - font-weight: 600; - font-size: 11px; - padding: 0 3px; - line-height: 27px; - outline: 0; - transition: color 100ms ease-in; - - &:hover, - &:active, - &:focus { - color: var(--primary-text-color-faint); - transition: color 200ms ease-out; - } - - &.disabled { - color: var(--primary-text-color-faint); - cursor: default; - } - - &.active { - color: var(--highlight-text-color); - } - - &::-moz-focus-inner { - border: 0; - } - - &::-moz-focus-inner, - &:focus, - &:active { - outline: 0 !important; - } -} - -.invisible { - font-size: 0 !important; - line-height: 0 !important; - 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: "…";} - -.timeline-compose-block { - @include standard-panel; - display: flex; - align-items: flex-start; - padding: 20px; - margin-bottom: 20px; - - .emoji-picker-wrapper { - .emoji-picker-dropdown {top: 10px;} - } - - .compose-form { - flex: 1 1; - padding: 0 0 0 20px !important; - position: relative; - - @media(max-width: 405px) { - padding: 0 !important; - } - - .compose-form__autosuggest-wrapper { - &::before { - content: ""; - display: block; - position: absolute; - height: 0; - width: 0; - border-top: 11px solid transparent; - border-right: 12px solid var(--background-color); - border-bottom: 11px solid transparent; - border-left: 11px solid transparent; - left: -22px; - top: 13px; - } - - .autosuggest-textarea__textarea { - padding: 14px 32px 13px 10px !important; - } - } - } - - &__avatar { - @media(max-width: 405px) { display: none; } - } -} - -.no-reduce-motion .spoiler-input { - transition: height 0.4s ease, opacity 0.4s ease; -} - -.emojione { - font-size: inherit; - vertical-align: middle; - object-fit: contain; - margin: -.2ex .15em .2ex; - width: 16px; - height: 16px; - - img { - width: auto; - } -} - -.reply-indicator { - border-radius: 4px; - margin-bottom: 10px; - background: var(--brand-color-faint); - padding: 10px; - min-height: 23px; - overflow-y: auto; - flex: 0 2 auto; - max-height: 500px; - @media screen and (min-width: 320px) and (max-width: 375px) {max-height: 220px;} - @media screen and (max-width: 320px) {max-height: 130px;} -} - -.reply-indicator__header { - margin-bottom: 5px; - overflow: hidden; -} - -.reply-indicator__cancel { - float: right; - line-height: 24px; -} - -.reply-indicator__display-name { - color: var(--primary-text-color); - display: block; - max-width: 100%; - line-height: 24px; - overflow: hidden; - padding-right: 25px; - text-decoration: none; - - .display-name__account { - color: var(--primary-text-color-faint); - } -} - -.reply-indicator__display-avatar { - float: left; - margin-right: 5px; -} - -.status__content--with-action { - cursor: pointer; -} - -.status__content, -.reply-indicator__content { - position: relative; - font-size: 15px; - line-height: 20px; - word-wrap: break-word; - font-weight: 400; - overflow: hidden; - text-overflow: ellipsis; - padding-top: 2px; - color: var(--primary-text-color); - - &:focus { - outline: 0; - } - - &.status__content--with-spoiler { - white-space: normal; - - .status__content__text { - white-space: pre-wrap; - } - } - - .emojione { - width: 20px; - height: 20px; - margin: -3px 0 0; - } - - p { - margin-bottom: 20px; - white-space: pre-wrap; - - &:last-child { - margin-bottom: 2px; - } - } - - a { - color: var(--highlight-text-color); - text-decoration: none; - - &:hover { - text-decoration: underline; - - .fa { - color: var(--primary-text-color); - } - } - - &.mention { - &:hover { - text-decoration: none; - - span { - text-decoration: underline; - } - } - } - - .fa { - color: var(--primary-text-color); - } - } - - .status__content__spoiler-link { - background: var(--brand-color-med); - transition: 0.2s; - - &:hover { - background: rgba(var(--brand-color-rgb), 0.5); - text-decoration: none; - } - - &::-moz-focus-inner { - border: 0; - } - - &::-moz-focus-inner, - &:focus, - &:active { - outline: 0 !important; - } - } - - .status__content__text { - display: none; - - &.status__content__text--visible { - display: block; - } - } -} - -.status__content.status__content--collapsed { - max-height: 20px * 15; // 15 lines is roughly above 500 characters -} - -.status__content__read-more-button { - display: block; - font-size: 15px; - line-height: 20px; - color: var(--highlight-text-color); - border: 0; - background: transparent; - padding: 0; - padding-top: 8px; - - &:hover, - &:active { - text-decoration: underline; - } -} - -.status__content__spoiler-link { - display: inline-block; - border-radius: 2px; - background: transparent; - border: 0; - color: var(--primary-text-color); - font-weight: 700; - font-size: 11px; - padding: 0 6px; - text-transform: uppercase; - line-height: 20px; - cursor: pointer; - vertical-align: middle; -} - -.status__wrapper--filtered { - color: var(--primary-text-color); - border: 0; - font-size: inherit; - text-align: center; - line-height: inherit; - margin: 0; - padding: 15px; - box-sizing: border-box; - width: 100%; - clear: both; - border-bottom: 1px solid var(--brand-color-med); -} - -.status__prepend-icon-wrapper { - left: -26px; - position: absolute; -} - -.focusable { - &:focus { - outline: 0; - background: var(--brand-color-faint); - - .status.status-direct { - background: var(--brand-color-med); - - &.muted { - background: transparent; - } - } - - .detailed-status, - .detailed-status__action-bar { - background: var(--brand-color-med); - } - } -} - -.status { - padding: 8px 10px; - padding-left: 68px; - position: relative; - min-height: 54px; - border-bottom: 1px solid var(--brand-color-faint); - 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:not(.read) { - background: var(--brand-color-med); - border-bottom-color: var(--brand-color-med); - - .status__content a { - color: var(--brand-color-hicontrast); - } - } - - &.light { - .status__relative-time { - color: var(--primary-text-color-faint); - } - - .status__display-name { - color: var(--primary-text-color-faint); - } - - .display-name { - strong { - color: var(--primary-text-color); - } - - span { - color: var(--primary-text-color-faint); - } - } - - .status__content { - color: var(--primary-text-color); - - a { - color: var(--highlight-text-color); - } - - a.status__content__spoiler-link { - color: var(--primary-text-color); - background: var(--brand-color); - - &:hover { - background: var(--brand-color); - } - } - } - } - - &__meta { - font-size: 14px; - color: var(--primary-text-color-faint); - - a { - color: var(--brand-color); - font-weight: bold; - text-decoration: none; - - &:hover { - text-decoration: underline; - } - } - } -} - -.notification-favourite { - .status.status-direct { - background: transparent; - - .icon-button.disabled { - color: rgba(var(--brand-color-rgb), 0.2); - } - } -} - -.status__relative-time, -.notification__relative_time { - color: var(--primary-text-color-faint); - float: right; - font-size: 14px; -} - -.status__display-name { - color: var(--primary-text-color-faint); -} - -.status__info .status__display-name { - display: block; - max-width: 100%; - padding-right: 25px; -} - -.status__info { - font-size: 15px; - z-index: 4; -} - -.status-check-box { - border-bottom: 1px solid var(--background-color); - display: flex; - - .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: var(--primary-text-color); - padding: 8px 0; - padding-bottom: 2px; - font-size: 14px; - position: relative; - - .status__display-name strong { - color: var(--primary-text-color); - } - - > span { - display: block; - overflow: hidden; - text-overflow: ellipsis; - } -} - -.status__action-bar { - align-items: center; - display: flex; - margin-top: 25px; - z-index: 4; - - &__counter { - display: inline-flex; - margin-right: 22px; - align-items: center; - - .status__action-bar-button { - margin-right: 4px; - } - - &__label { - display: inline-block; - width: 14px; - font-size: 12px; - font-weight: 500; - color: var(--brand-color); - } - } -} - -.status__action-bar-button { - margin-right: 18px; -} - -.status__action-bar-dropdown { - height: 23.15px; - width: 23.15px; -} - -.reply-indicator__content { - color: var(--primary-text-color); - font-size: 14px; - user-select: text; - - a { - color: var(--highlight-text-color); - } -} - -.domain { - padding: 10px; - border-bottom: 1px solid var(--brand-color-med); - - .domain__domain-name { - flex: 1 1 auto; - display: block; - color: var(--primary-text-color); - text-decoration: none; - font-size: 14px; - font-weight: 500; - } -} - -.domain__wrapper { - display: flex; -} - -.domain_buttons { - height: 18px; - padding: 10px; - white-space: nowrap; -} - -.account { - padding: 10px; - - &:not(:last-of-type) { - border-bottom: 1px solid var(--brand-color-med); - } - - &.compact { - padding: 0; - border-bottom: 0; - - .account__avatar-wrapper { - margin-left: 0; - } - } - - .account__display-name { - flex: 1 1 auto; - display: block; - color: var(--primary-text-color-faint); - overflow: hidden; - text-decoration: none; - font-size: 14px; - } -} - -.account__wrapper { - display: flex; -} - -.account__avatar-wrapper { - float: left; - margin-right: 12px; -} - -.account__avatar { - @include avatar-radius; - position: relative; - background-color: var(--brand-color-faint); - - &-inline { - display: inline-block; - vertical-align: middle; - margin-right: 5px; - } - - &-composite { - @include avatar-radius; - overflow: hidden; - - & > div { - @include avatar-radius; - float: left; - position: relative; - box-sizing: border-box; - } - } -} - -a .account__avatar { - cursor: pointer; -} - -.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: auto; - padding: 0 0 0 5px; - position: relative; - - .dismiss-account-btn { - display: block; - margin-bottom: 5px; - } -} - -.account__reciprocal_follow_message { - padding: 0 5px; - color: var(--primary-text-color-faint); - text-align: center; -} - -.account__disclaimer { - padding: 10px; - border-top: 1px solid var(--brand-color-med); - color: var(--primary-text-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__action-bar { - border-top: 1px solid var(--brand-color-med); - border-bottom: 1px solid var(--brand-color-med); - line-height: 36px; - overflow: hidden; - flex: 0 0 auto; - display: flex; -} - -.account__action-bar-dropdown { - padding: 10px; - - .icon-button { - vertical-align: middle; - } - - .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; - text-align: center; -} - -.account__action-bar__tab { - text-decoration: none; - overflow: hidden; - flex: 0 1 100%; - border-right: 1px solid var(--brand-color-med); - padding: 10px 0; - border-bottom: 4px solid transparent; - - &.active { - border-bottom: 4px solid var(--brand-color); - } - - & > span { - display: block; - text-transform: uppercase; - font-size: 11px; - color: var(--primary-text-color-faint); - } - - strong { - display: block; - font-size: 15px; - font-weight: 500; - color: var(--primary-text-color); - - @each $lang in $cjk-langs { - &:lang(#{$lang}) { - font-weight: 700; - } - } - } -} - -.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: var(--primary-text-color); - } -} - -.muted { - .emojione { - opacity: 0.5; - } -} - -.status__display-name, -.reply-indicator__display-name, -.detailed-status__display-name, -a.account__display-name { - &:hover strong { - text-decoration: underline; - } -} - -.account__display-name strong { - display: block; - overflow: hidden; - text-overflow: ellipsis; -} - -.detailed-status__application, -.detailed-status__datetime { - color: inherit; -} - -.detailed-status__display-name { - color: var(--primary-text-color-faint); - display: flex; - line-height: 24px; - margin-bottom: 15px; - overflow: hidden; - - strong, - span { - display: inline-block; - text-overflow: ellipsis; - overflow: hidden; - } - - strong { - font-size: 16px; - color: var(--primary-text-color); - } - - .display-name__account { - display: block; - margin-top: -10px; - } -} - -.detailed-status__display-avatar { - float: left; - margin-right: 10px; -} - -.status__avatar { - height: 48px; - left: 10px; - position: absolute; - top: 10px; - width: 48px; -} - -.status__expand { - width: 68px; - position: absolute; - left: 0; - top: 0; - height: 100%; - cursor: pointer; -} - -.muted { - .status__content p, - .status__content a { - color: var(--primary-text-color); - } - - .status__display-name strong { - color: var(--primary-text-color); - } - - .status__avatar { - opacity: 0.5; - } - - a.status__content__spoiler-link { - background: var(--brand-color-med); - color: var(--primary-text-color); - - &:hover { - background: var(--brand-color-faint); - text-decoration: none; - } - } -} - -.notification__message { - margin: 0 10px 0 68px; - padding: 8px 0 0; - cursor: default; - color: var(--primary-text-color-faint); - font-size: 15px; - line-height: 22px; - position: relative; - - .fa { - color: var(--highlight-text-color); - } - - > span { - display: inline; - overflow: hidden; - text-overflow: ellipsis; - } -} - -.notification__favourite-icon-wrapper { - left: -26px; - position: absolute; - - .star-icon { - color: $gold-star; - } -} - -.star-icon.active { - color: $gold-star; -} - -.notification__display-name { - color: inherit; - font-weight: 500; - text-decoration: none; - - &:hover { - color: var(--primary-text-color); - text-decoration: underline; - } -} - -.notification__relative_time { - float: right; -} - -.display-name { - display: block; - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.display-name__html { - font-weight: 600; - padding-right: 4px; -} - -.display-name__account { - font-size: 14px; -} - -// Hide "verified" emoji to avoid confusion -.display-name, -.notification__display-name { - .emojione[alt*="verified"] { - display: none; - } -} - -.status__relative-time, -.detailed-status__datetime { - &:hover { - text-decoration: underline; - } -} - -.image-loader { - position: relative; - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - - .image-loader__preview-canvas { - max-width: $media-modal-media-max-width; - max-height: $media-modal-media-max-height; - background: url('../images/void.png') repeat; - object-fit: contain; - } - - .loading-bar { - position: relative; - } - - &.image-loader--amorphous .image-loader__preview-canvas { - display: none; - } -} - -.zoomable-image { - position: relative; - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - - img { - max-width: $media-modal-media-max-width; - max-height: $media-modal-media-max-height; - width: auto; - height: auto; - object-fit: contain; - box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.5); - } -} - -.navigation-bar { - padding: 10px; - display: flex; - align-items: center; - flex-shrink: 0; - cursor: default; - color: var(--primary-text-color-faint); - - strong { - color: var(--primary-text-color-faint); - } - - a { - color: inherit; - } - - .permalink { - text-decoration: none; - } - - .navigation-bar__actions { - position: relative; - - .icon-button.close { - position: absolute; - pointer-events: none; - transform: scale(0, 1) translate(-100%, 0); - opacity: 0; - } - - .compose__action-bar .icon-button { - pointer-events: auto; - transform: scale(1, 1) translate(0, 0); - opacity: 1; - } - } -} - -.navigation-bar__profile { - flex: 1 1 auto; - margin-left: 8px; - line-height: 20px; - margin-top: -1px; - 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; -} - -.columns-area { - display: flex; - flex: 1 1 auto; - flex-direction: row; - justify-content: flex-start; - position: relative; - - &__panels { - display: flex; - justify-content: center; - width: 100%; - height: 100%; - - &__pane { - height: 100%; - pointer-events: none; - display: flex; - justify-content: flex-end; - padding-top: 15px; - - &--start { - justify-content: flex-start; - } - - &__inner { - width: 265px; - pointer-events: auto; - height: 100%; - } - } - - &__main { - display: flex; - flex-direction: column; - box-sizing: border-box; - width: 100%; - max-width: 600px; - padding: 0 20px; - @media screen and (max-width: 375px) { - padding: 0 10px; - } - @media screen and (min-width: 895px) { - margin: 0 20px; - padding: 0; - } - } - } -} - -.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: 350px; - position: relative; - box-sizing: border-box; - display: flex; - flex-direction: column; -} - -.ui { - display: block; - width: 100%; - padding: 0 0 100px; - - .page { - display: flex; - flex-direction: column; - width: 100%; - - &__top { - display: flex; - width: 100%; - height: auto; - z-index: 105; - background: var(--foreground-color); - - @media (min-width: 895px) { - top: -290px; - position: sticky; - } - } - - &__columns { - display: flex; - flex-direction: column; - width: 100%; - height: 100%; - } - } -} - -.drawer { - 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: var(--primary-text-color-faint); - 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: 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; - } - } - - .columns-area > div { - .column, - .drawer { - padding-left: 5px; - padding-right: 5px; - } - } -} - -// TEMPORARY - need a default size for the avatars for now -// They are sized individually all over the application and need to change with breakpoints as well -// Might create a mixin to accept the size attribute and apply the various properties where necessary -.account__avatar { - width: 56px; - height: 56px; - background-size: cover; -} - -.columns-area--mobile { - display: block; - flex-direction: column; - width: 100%; - margin: 0 auto; - padding: 15px 0; - - .column, - .drawer { - width: 100%; - height: 100%; - padding: 0; - } - - .autosuggest-textarea__textarea {font-size: 16px;} - - .search__input { - line-height: 18px; - font-size: 16px; - padding: 15px; - padding-right: 30px; - } - .search__icon .fa {top: 15px;} - @media screen and (min-width: 630px) { - .detailed-status { - padding: 15px; - - .media-gallery, - .video-player { - margin-top: 15px; - } - } - .account__header__bar {padding: 5px 10px;} - - .navigation-bar, - .compose-form { - padding: 15px; - } - .compose-form .compose-form__publish .compose-form__publish-button-wrapper {padding-top: 15px;} - - .status { - padding: 15px 15px 15px (48px + 15px * 2); - min-height: 48px + 2px; - - &__avatar { - left: 15px; - top: 17px; - } - - &__content { - padding-top: 5px; - } - - &__prepend { - margin-left: 48px + 15px * 2; - padding-top: 15px; - } - - &__prepend-icon-wrapper { - left: -32px; - } - - .media-gallery, - .video-player { - margin-top: 10px; - } - } - - .account { - padding: 15px 10px; - } - - .notification { - &__message { - margin-left: 48px + 15px * 2; - padding-top: 15px; - } - - &__favourite-icon-wrapper { - left: -32px; - } - - .status { - padding-top: 8px; - } - - .account { - padding-top: 8px; - } - - .account__avatar-wrapper { - margin-left: 17px; - margin-right: 15px; - } - } - } -} - -.floating-action-button { - z-index: 1000; - display: none; - position: fixed; - bottom: 14px; - right: 14px; - width: 61px; - height: 61px; - background-color: var(--brand-color); - border: 0; - border-radius: 999px; - box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.5); - font-size: 30px; - align-items: center; - justify-content: center; - transition: 0.2s; - - @media screen and (max-width: 895px) { - display: flex; - } - - &:hover, - &:focus, - &:active { - background-color: var(--brand-color-hicontrast); - } - - i.fa { - display: flex; - align-items: center; - justify-content: center; - color: #fff; - margin: 0; - } -} - -@media screen and (min-width: 360px) { - .getting-started__wrapper, - .getting-started__trends { - margin-bottom: 10px; - } -} - -// NOTE - Remove all of these weird breakpoint calculations which just spit out an integer. -// This controls where the left column breaks. -@media screen and (max-width: 600px + (285px * 1) + (10px * 1)) { - .columns-area__panels__pane--left { - display: none; - } -} - -// NOTE - Remove all of these weird breakpoint calculations which just spit out an integer. -@media screen and (min-width: 600px + (285px * 1) + (10px * 1)) { - .search-page .search { - display: none; - } -} - -// NOTE - Remove all of these weird breakpoint calculations which just spit out an integer. -@media screen and (max-width: 600px + (285px * 2) + (10px * 2)) { - .columns-area__panels__pane--right { - display: none; - } -} - -.icon-with-badge { - position: relative; - height: 100%; - - &__badge { - @include font-montserrat; - @include font-size(14); - @include line-height(14); - position: absolute; - box-sizing: border-box; - left: -10px; - top: 3px; - min-width: 16px; - height: 16px; - padding: 1px 3px 0; - border-radius: 8px; - text-align: center; - color: #fff; - background: var(--brand-color); - - @media screen and (max-width: 895px) { - top: 0; - } - } -} - -.column-link--transparent .icon-with-badge__badge { - border-color: var(--background-color); -} - -.promo-panel { - margin-top: 10px; - background-color: transparent !important; - overflow: hidden; -} - -.promo-panel-item { - @include standard-panel-shadow; - display: block; - height: 42px; - line-height: 42px; - border-bottom: 1px solid var(--brand-color-med); - background: var(--foreground-color); - - &--highlighted { - background-color: #30ce7d; - border-radius: 10px; - font-weight: 600; - margin-bottom: 10px; - } - - &--top-rounded { - border-top-right-radius: 10px; - border-top-left-radius: 10px; - } - - &:last-of-type { - border-bottom: 0; - } - - &__btn { - display: block; - text-align: left; - color: var(--primary-text-color); - text-decoration: none; - font-size: 15px; - padding: 0 20px; - - &:hover { - color: var(--primary-text-color-faint); - - span { - text-decoration: underline; - } - } - } - - &__icon { - margin-right: 12px; - } -} - -.drawer__pager { - box-sizing: border-box; - padding: 0; - flex-grow: 1; - position: relative; - overflow: hidden; - display: flex; -} - -.drawer__inner { - top: 0; - left: 0; - background: var(--foreground-color); - box-sizing: border-box; - padding: 0; - display: flex; - flex-direction: column; - overflow: hidden; - overflow-y: auto; - width: 100%; - height: 100%; -} - -.pseudo-drawer { - background: var(--background-color); - font-size: 13px; - text-align: left; -} - -.drawer__header { - flex: 0 0 auto; - font-size: 16px; - background: var(--brand-color-med); - margin-bottom: 10px; - display: flex; - flex-direction: row; - - a { - transition: background 100ms ease-in; - - &:hover { - background: var(--background-color); - transition: background 200ms ease-out; - } - } -} - -.slist { - &--flex { - display: flex; - flex-direction: column; - } - - &__append { - flex: 1 1 auto; - position: relative; - min-height: 120px; - } -} - -.column-back-button { - background: var(--brand-color-med); - color: var(--highlight-text-color); - cursor: pointer; - flex: 0 0 auto; - font-size: 16px; - line-height: inherit; - border: 0; - text-align: unset; - padding: 15px; - margin: 0; - z-index: 3; - outline: 0; - - &:hover { - text-decoration: underline; - } -} - -.column-header__back-button { - background: var(--brand-color-faint); - border: 0; - font-family: inherit; - color: var(--highlight-text-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: var(--brand-color-med); - transition: background-color 0.2s ease; -} - -.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track { - background-color: var(--background-color); -} - -.react-toggle--checked .react-toggle-track { - background-color: var(--brand-color); -} - -.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { - background-color: var(--brand-color-hicontrast); -} - -.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 { - position: absolute; - top: 1px; - left: 1px; - width: 22px; - height: 22px; - border: 1px solid var(--brand-color-med); - border-radius: 50%; - background-color: var(--background-color); - box-sizing: border-box; - transition: all 0.25s ease; - transition-property: border-color, left; -} - -.react-toggle--checked .react-toggle-thumb { - left: 27px; - border-color: var(--brand-color); -} - -.column-link { - background: var(--brand-color-med); - color: var(--primary-text-color); - display: block; - font-size: 16px; - padding: 15px; - text-decoration: none; - - &:hover, - &:focus, - &:active { - background: var(--brand-color-faint); - } - - &:focus { - outline: 0; - } - - &--transparent { - background: transparent; - color: var(--background-color); - - &:hover, - &:focus, - &:active { - background: transparent; - color: var(--primary-text-color); - } - - &.active { - color: var(--brand-color); - } - } -} - -.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: var(--brand-color-med); - padding: 4px 8px; - margin: -6px 10px; -} - -.column-subheading { - background: var(--brand-color-med); - color: var(--primary-text-color-faint); - padding: 8px 20px; - font-size: 12px; - font-weight: 500; - text-transform: uppercase; - cursor: default; -} - -.getting-started__wrapper, -.getting-started, -.flex-spacer { - background: var(--brand-color-med); -} - -.getting-started__wrapper { - flex: 0 0 auto; -} - -.flex-spacer { - flex: 1 1 auto; -} - -.getting-started { - overflow: auto; - - &__footer { - flex: 0 0 auto; - padding: 10px; - padding-top: 20px; - opacity: 0.7; - - ul { - margin-bottom: 10px; - } - - ul li { - display: inline; - } - - p { - color: var(--primary-text-color); - font-size: 13px; - margin-bottom: 20px; - - a { - color: var(--primary-text-color-faint); - text-decoration: underline; - opacity: 0.8; - } - } - - a { - text-decoration: none; - color: var(--primary-text-color-faint); - opacity: 0.8; - - &:hover, - &:focus, - &:active { - text-decoration: underline; - } - } - } - - &__trends { - background: var(--brand-color-med); - flex: 0 1 auto; - - @media screen and (max-height: 810px) { - .trends__item:nth-child(3) { - display: none; - } - } - - @media screen and (max-height: 720px) { - .trends__item:nth-child(2) { - display: none; - } - } - - @media screen and (max-height: 670px) { - display: none; - } - } -} - -.setting-text { - color: var(--primary-text-color-faint); - background: transparent; - border: 0; - border-bottom: 2px solid var(--brand-color); - box-sizing: border-box; - display: block; - font-family: inherit; - margin-bottom: 10px; - padding: 7px 0; - width: 100%; - - &:focus, - &:active { - color: var(--primary-text-color); - border-bottom-color: var(--highlight-text-color); - } - - @media screen and (max-width: 600px) { - font-size: 16px; - } -} - -.status-card { - display: flex; - font-size: 14px; - border: 1px solid var(--brand-color-med); - border-radius: 4px; - color: var(--primary-text-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: 8px; - padding: 12px 9px; - flex: 0 0 auto; - display: flex; - justify-content: center; - align-items: center; - } - - button, - a { - display: inline; - color: var(--primary-text-color-faint); - background: transparent; - border: 0; - padding: 0 8px; - text-decoration: none; - font-size: 18px; - line-height: 18px; - - &:hover, - &:active, - &:focus { - color: var(--primary-text-color); - } - } - - a { - font-size: 19px; - position: relative; - bottom: -1px; - } - } -} - -a.status-card { - cursor: pointer; - - &:hover { - background: var(--brand-color-med); - } -} - -.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: var(--primary-text-color-faint); - 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: var(--primary-text-color-faint); -} - -.status-card__host { - display: block; - margin-top: 5px; - font-size: 13px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.status-card__image { - flex: 0 0 100px; - background: var(--brand-color-med); - position: relative; - - & > .fa { - font-size: 21px; - position: absolute; - transform-origin: 50% 50%; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - } -} - -.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.compact { - border-color: var(--brand-color-faint); - - &.interactive { - border: 0; - } - - .status-card__content { - padding: 8px; - padding-top: 10px; - } - - .status-card__title { - white-space: nowrap; - } - - .status-card__image { - flex: 0 0 60px; - } -} - -a.status-card.compact:hover { - background-color: var(--brand-color-faint); -} - -.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: var(--primary-text-color); - background-color: transparent; - border: 0; - font-size: inherit; - text-align: center; - line-height: inherit; - margin: 0; - padding: 15px; - box-sizing: border-box; - width: 100%; - clear: both; - text-decoration: none; - - &:hover { - background: var(--brand-color-faint); - } -} - -.load-gap { - border-bottom: 1px solid var(--brand-color-med); -} - -.regeneration-indicator { - text-align: center; - font-size: 16px; - font-weight: 500; - color: var(--primary-text-color); - background: var(--brand-color-med); - cursor: default; - display: flex; - flex: 1 1 auto; - align-items: center; - justify-content: center; - padding: 20px; - - & > div { - width: 100%; - background: transparent; - padding-top: 0; - } - - &__label { - strong { - display: block; - margin-bottom: 10px; - color: var(--primary-text-color); - } - - span { - font-size: 15px; - font-weight: 400; - } - } -} - -.morefollows-indicator { - text-align: center; - font-size: 16px; - font-weight: 500; - color: var(--primary-text-color); - background: var(--brand-color-med); - cursor: default; - display: flex; - flex: 1 1 auto; - align-items: center; - justify-content: center; - padding: 20px; - - & > div { - width: 100%; - background: transparent; - padding-top: 0; - } - - &__label { - strong { - display: block; - margin-bottom: 10px; - color: var(--primary-text-color); - } - } -} - -.columns-area--mobile .column { - @include standard-panel; -} - -.column-header__wrapper { - position: relative; - flex: 0 0 auto; - overflow: hidden; - - &.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(var(--brand-color), 0.23) 0%, rgba(var(--brand-color), 0) 60%); - } - } -} - -.column-header { - display: flex; - font-size: 16px; - flex: 0 0 auto; - cursor: pointer; - position: relative; - z-index: 2; - outline: 0; - overflow-x: auto; - - & > button, - & > .btn { - margin: 0; - border: 0; - padding: 15px; - color: inherit; - background: transparent; - font: inherit; - text-align: left; - text-decoration: none; - white-space: nowrap; - - &--sub { - font-size: 14px; - padding: 6px 10px; - } - - &.grouped { - margin: 6px; - color: var(--primary-text-color-faint); - } - - &.active { - color: var(--primary-text-color); - border-radius: 10px; - background-color: var(--brand-color-faint); - } - - @media screen and (max-width: $nav-breakpoint-2) { - padding: 8px; - font-size: 14px; - - &.grouped { - margin: 6px 2px 6px 6px; - } - - &.active { - border-radius: 5px; - } - } - } - - & > .column-header__back-button { - color: var(--highlight-text-color); - } - - &.active { - box-shadow: 0 1px 0 rgba(var(--highlight-text-color), 0.3); - - .column-header__icon { - color: var(--highlight-text-color); - text-shadow: 0 0 10px rgba(var(--highlight-text-color), 0.4); - } - } - - &:focus, - &:active { - outline: 0; - } -} - -.column-header__buttons { - height: 48px; - display: flex; - margin-left: auto; -} - -.column-header__links .text-btn { - margin-right: 10px; -} - -.column-header__button { - cursor: pointer; - border: 0; - padding: 0 15px; - font-size: 16px; - color: var(--primary-text-color-faint); - background: transparent; - - &:hover { - color: rgba(var(--primary-text-color-rgb), 0.8); - } - - &.active { - color: var(--primary-text-color); - background: var(--brand-color-med); - - &:hover { - color: var(--primary-text-color); - background: var(--brand-color-med); - } - } -} - -.column-header__collapsible { - max-height: 70vh; - overflow: hidden; - overflow-y: auto; - color: var(--primary-text-color-faint); - 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 var(--brand-color-med); - margin: 10px 0; - } -} - -.column-header__collapsible-inner { - background: var(--background-color); - padding: 15px; -} - -.column-header__setting-btn { - &--link { - text-decoration: none; - - .fa { - margin-left: 10px; - } - } - - &:hover { - color: var(--primary-text-color-faint); - text-decoration: underline; - } -} - -.column-header__setting-arrows { - float: right; - - .column-header__setting-btn { - padding: 0 10px; - - &:last-child { - padding-right: 0; - } - } -} - -.column-header__expansion { - overflow-x: scroll; - overflow-y: hidden; - white-space: nowrap; -} - -.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; -} - -.loading-indicator { - color: var(--primary-text-color-faint); - 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; - } -} - -.loading-indicator__figure { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 42px; - height: 42px; - box-sizing: border-box; - background-color: transparent; - border: 0 solid rgba(var(--brand-color-rgb), 0.5); - border-width: 6px; - border-radius: 50%; -} - -.no-reduce-motion .loading-indicator span { - animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1); -} - -.no-reduce-motion .loading-indicator__figure { - animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1); -} - -@keyframes loader-figure { - 0% { - width: 0; - height: 0; - background-color: rgba(var(--brand-color-rgb), 0.5); - } - - 29% { - background-color: rgba(var(--brand-color-rgb), 0.5); - } - - 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; } -} - -.video-error-cover { - align-items: center; - background: var(--background-color); - color: var(--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: var(--background-color); - color: var(--primary-text-color-faint); - border: 0; - padding: 0; - width: 100%; - height: 100%; - border-radius: 4px; - appearance: none; - - &:hover, - &:active, - &:focus { - padding: 0; - color: var(--primary-text-color); - } -} - -.media-spoiler__warning { - display: block; - font-size: 14px; -} - -.media-spoiler__trigger { - display: block; - font-size: 11px; - font-weight: 700; -} - -.spoiler-button { - top: 0; - left: 0; - width: 100%; - height: 100%; - position: absolute; - z-index: 100; - - &--minified { - display: block; - left: 4px; - top: 4px; - width: auto; - height: auto; - } - - &--hidden { - display: none; - } - - &__overlay { - display: block; - background: transparent; - width: 100%; - height: 100%; - border: 0; - - &__label { - display: inline-block; - background: rgba($base-overlay-background, 0.5); - border-radius: 8px; - padding: 8px 12px; - color: var(--primary-text-color); - font-weight: 500; - font-size: 14px; - } - - &:hover, - &:focus, - &:active { - .spoiler-button__overlay__label { - background: rgba($base-overlay-background, 0.8); - } - } - } -} - -.modal-container--preloader { - background: var(--brand-color-med); -} - -.account--panel { - background: var(--brand-color-faint); - border-top: 1px solid var(--brand-color-med); - border-bottom: 1px solid var(--brand-color-med); - 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: var(--brand-color-med); - padding: 15px; -} - -.column-settings__section { - color: var(--primary-text-color-faint); - cursor: default; - display: block; - font-weight: 500; - margin-bottom: 10px; -} - -.column-settings__hashtags { - .column-settings__row { - margin-bottom: 15px; - } - - .column-select { - &__control { - @include search-input; - } - - &__placeholder { - color: var(--primary-text-color); - padding-left: 2px; - font-size: 12px; - } - - &__value-container { - padding-left: 6px; - } - - &__multi-value { - background: var(--brand-color-med); - - &__remove { - cursor: pointer; - - &:hover, - &:active, - &:focus { - background: var(--brand-color-med); - color: var(--primary-text-color); - } - } - } - - &__multi-value__label, - &__input { - color: var(--primary-text-color-faint); - } - - &__clear-indicator, - &__dropdown-indicator { - cursor: pointer; - transition: none; - color: var(--primary-text-color); - - &:hover, - &:active, - &:focus { - color: var(--primary-text-color); - } - } - - &__indicator-separator { - background-color: var(--brand-color-med); - } - - &__menu { - @include search-popout; - padding: 0; - background: var(--background-color); - } - - &__menu-list { - padding: 6px; - } - - &__option { - color: var(--primary-text-color); - border-radius: 4px; - font-size: 14px; - - &--is-focused, - &--is-selected { - background: var(--background-color); - } - } - } -} - -.column-settings__row { - .text-btn { - margin-bottom: 15px; - } -} - -.relationship-tag { - color: var(--primary-text-color); - margin-bottom: 4px; - display: block; - vertical-align: top; - background-color: var(--background-color); - text-transform: uppercase; - font-size: 11px; - font-weight: 500; - padding: 4px; - border-radius: 4px; - opacity: 0.7; - - &:hover { - opacity: 1; - } -} - -.setting-toggle { - display: block; - line-height: 24px; -} - -.setting-toggle__label { - color: var(--primary-text-color-faint); - display: inline-block; - margin-bottom: 14px; - margin-left: 8px; - vertical-align: middle; -} - -.empty-column-indicator, -.error-column { - color: var(--primary-text-color); - background: var(--brand-color-med); - text-align: center; - padding: 40px; - font-size: 15px; - font-weight: 400; - cursor: default; - display: flex; - flex: 1 1 auto; - align-items: center; - justify-content: center; - min-height: 160px; - - @supports(display: grid) { // hack to fix Chrome <57 - contain: strict; - } - - & > span { - max-width: 400px; - } - - a { - color: var(--highlight-text-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.03, 0.515, 0.955) 2s 2 both; -} - -.emoji-picker-dropdown__menu { - @include standard-panel; - background: var(--foreground-color); - position: absolute; - margin-top: 5px; - z-index: 20000; - - .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: var(--foreground-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(var(--background-color-rgb), 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); - 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: var(--brand-color-med); - 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: var(--primary-text-color-faint); - font-size: 18px; - font-weight: 500; - border: 2px dashed var(--brand-color-med); - border-radius: 4px; -} - -.upload-progress { - padding: 10px; - color: var(--highlight-text-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: var(--brand-color-med); - position: relative; - margin-top: 5px; -} - -.upload-progress__tracker { - position: absolute; - left: 0; - top: 0; - height: 6px; - background: var(--brand-color); - border-radius: 6px; -} - -.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; -} - -.privacy-dropdown__dropdown { - font-size: 14px; - position: absolute; - background: var(--foreground-color); - box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); - border-radius: 4px; - margin-left: 40px; - overflow: hidden; - z-index: 10000; - - &.top { - transform-origin: 50% 100%; - } - - &.bottom { - transform-origin: 50% 0; - } -} - -.privacy-dropdown__option { - color: var(--primary-text-color); - padding: 10px; - cursor: pointer; - display: flex; - - &:hover, - &.active { - background: var(--brand-color-med); - color: var(--primary-text-color); - outline: 0; - - .privacy-dropdown__option__content { - color: var(--primary-text-color); - - strong { - color: var(--primary-text-color); - } - } - } - - &.active:hover { - background: rgba(var(--brand-color-rgb), 0.5); - } -} - -.privacy-dropdown__option__icon { - display: flex; - align-items: center; - justify-content: center; - margin-right: 10px; -} - -.privacy-dropdown__option__content { - flex: 1 1 auto; - color: var(--highlight-text-color); - - strong { - font-weight: 500; - display: block; - color: var(--primary-text-color); - - @each $lang in $cjk-langs { - &:lang(#{$lang}) { - font-weight: 700; - } - } - } -} - -.privacy-dropdown.active { - .privacy-dropdown__value { - background: var(--foreground-color); - border-radius: 4px 4px 0 0; - box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1); - - .icon-button { - transition: none; - } - - &.active { - background: var(--brand-color); - - .icon-button { - color: var(--primary-text-color); - } - } - } - - &.top .privacy-dropdown__value { - border-radius: 0 0 4px 4px; - } - - .privacy-dropdown__dropdown { - display: block; - box-shadow: 2px 4px 6px rgba($base-shadow-color, 0.1); - } -} - -.search { - position: relative; -} - -.search__input { - @include search-input; - display: block; - padding: 7px 30px 6px 10px; -} - -.search__icon { - &::-moz-focus-inner { - border: 0; - } - - &::-moz-focus-inner, - &:focus { - outline: 0 !important; - } - - .fa { - @include font-size(16); - cursor: default; - display: inline-block; - position: absolute; - top: 8px; - right: 8px; - z-index: 2; - width: 18px; - height: 18px; - color: var(--primary-text-color-faint); - opacity: 0; - pointer-events: none; - - &.active { - pointer-events: auto; - opacity: 1; - } - } - .fa-search.active {pointer-events: none;} - - .fa-times-circle { - @include font-size(17); - cursor: pointer; - color: var(--highlight-text-color); - &:hover {color: var(--brand-color);} - } -} - -.search-results__header { - color: var(--primary-text-color); - background: var(--brand-color-med); - padding: 15px; - font-weight: 500; - font-size: 16px; - cursor: default; - - .fa { - display: inline-block; - margin-right: 5px; - } -} - -.search-results__section { - margin-bottom: 5px; - - h5 { - background: var(--brand-color-faint); - border-bottom: 1px solid var(--brand-color-faint); - cursor: default; - display: flex; - padding: 15px; - font-weight: 500; - font-size: 16px; - color: var(--primary-text-color); - - .fa { - display: inline-block; - margin-right: 5px; - } - } - - .account:last-child, - & > div:last-child .status { - border-bottom: 0; - } -} - -.search-results__hashtag { - display: block; - padding: 10px; - color: var(--primary-text-color-faint); - text-decoration: none; - - &:hover, - &:active, - &:focus { - color: var(--primary-text-color); - text-decoration: underline; - } -} - -//////////////////////////////////////////////////////////////////////////////////////////////// - - -//////////////////////////////////////////////////////////////////////////////////////////////// - - -.loading-bar { - background-color: var(--highlight-text-color); - height: 3px; - position: absolute; - top: 0; - left: 0; -} - -.media-gallery__gifv__label { - display: block; - position: absolute; - color: var(--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; - line-height: 18px; -} - -.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 var(--brand-color-med); - border-radius: 4px; - margin-top: 14px; - overflow: hidden; - - &__icon { - flex: 0 0 auto; - color: var(--primary-text-color); - padding: 8px 18px; - cursor: default; - border-right: 1px solid var(--brand-color-med); - 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: var(--primary-text-color); - font-weight: 500; - - &:hover { - text-decoration: underline; - } - } - } - - &.compact { - border: 0; - margin-top: 4px; - - .attachment-list__list { - padding: 0; - display: block; - } - - .fa { - color: var(--primary-text-color); - } - } -} - -/* Media Gallery */ -.media-gallery { - box-sizing: border-box; - margin-top: 8px; - overflow: hidden; - border-radius: 4px; - position: relative; - width: 100%; - background-color: var(--brand-color-faint); -} - -.media-gallery__item { - border: 0; - box-sizing: border-box; - display: block; - float: left; - position: relative; - border-radius: 4px; - overflow: hidden; -} - -.media-gallery__item-thumbnail { - cursor: zoom-in; - display: block; - text-decoration: none; - color: var(--primary-text-color-faint); - line-height: 0; - position: relative; - z-index: 1; - - &, - img, - canvas { - height: 100%; - width: 100%; - } - - img, - canvas { - object-fit: cover; - } - - &--play-on-hover { - &::before { - content: 'GIF'; - position: absolute; - color: var(--primary-text-color); - background: var(--foreground-color); - bottom: 6px; - left: 6px; - padding: 2px 6px; - border-radius: 2px; - font-size: 11px; - font-weight: 600; - pointer-events: none; - opacity: 0.9; - transition: opacity 0.1s ease; - line-height: 18px; - } - - img { - position: absolute; - } - - img, - &:hover::before { - visibility: hidden; - } - - &:hover img { - visibility: visible; - } - } -} - -.media-gallery__preview { - width: 100%; - height: 100%; - object-fit: cover; - position: absolute; - top: 0; - left: 0; - z-index: 0; - background: var(--background-color); - - &--hidden { - display: none; - } -} - -.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; - width: 100%; - z-index: 1; - transform: none; - top: 0; -} - -.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: var(--background-color); - 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: var(--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: var(--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; -} - -.detailed, -.fullscreen { - .video-player__volume__current, - .video-player__volume::before { - bottom: 27px; - } - - .video-player__volume__handle { - bottom: 23px; - } - -} - -.video-player { - overflow: hidden; - position: relative; - background: $base-shadow-color; - max-width: 100%; - border-radius: 4px; - - &:focus { - outline: 0; - } - - video { - max-width: 100vw; - max-height: 80vh; - min-height: 120px; - object-fit: contain; - z-index: 1; - } - - &.fullscreen { - width: 100% !important; - height: 100% !important; - margin: 0; - - video { - max-width: 100% !important; - max-height: 100% !important; - width: 100% !important; - height: 100% !important; - } - } - - &.inline { - video { - object-fit: contain; - position: relative; - } - } - - &__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: var(--background-color); - color: var(--primary-text-color-faint); - transition: none; - pointer-events: none; - - &.active { - display: block; - pointer-events: auto; - - &:hover, - &:active, - &:focus { - color: var(--primary-text-color); - } - } - - &__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(#ffffff, 0.75); - - &:active, - &:hover, - &:focus { - color: #ffffff; - } - } - } - - &__time-sep, - &__time-total, - &__time-current { - font-size: 14px; - font-weight: 500; - } - - &__time-current { - color: #ffffff; - margin-left: 60px; - } - - &__time-sep { - display: inline-block; - margin: 0 6px; - } - - &__time-sep, - &__time-total { - color: #ffffff; - } - - &__volume { - cursor: pointer; - height: 24px; - display: inline; - - &::before { - content: ""; - width: 50px; - background: rgba(#ffffff, 0.35); - border-radius: 4px; - display: block; - position: absolute; - height: 4px; - left: 70px; - bottom: 20px; - } - - &__current { - display: block; - position: absolute; - height: 4px; - border-radius: 4px; - left: 70px; - bottom: 20px; - background: var(--brand-color); - } - - &__handle { - position: absolute; - z-index: 3; - border-radius: 50%; - width: 12px; - height: 12px; - bottom: 16px; - left: 70px; - transition: opacity .1s ease; - background: var(--brand-color); - box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); - pointer-events: none; - } - } - - &__link { - padding: 2px 10px; - - a { - text-decoration: none; - font-size: 14px; - font-weight: 500; - color: #ffffff; - - &:hover, - &:active, - &:focus { - text-decoration: underline; - } - } - } - - &__seek { - cursor: pointer; - height: 24px; - position: relative; - - &::before { - content: ""; - width: 100%; - background: rgba(#ffffff, 0.35); - border-radius: 4px; - display: block; - position: absolute; - height: 4px; - top: 10px; - } - - &__progress, - &__buffer { - display: block; - position: absolute; - height: 4px; - border-radius: 4px; - top: 10px; - background: var(--brand-color); - } - - &__buffer { - background: rgba(#ffffff, 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: var(--brand-color); - 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: var(--primary-text-color-faint); - font-size: 36px; - left: 50%; - padding: 5px; - position: absolute; - top: 50%; - transform: translate(-50%, -50%); -} -/* End Video Player */ - -.account-gallery__container { - display: flex; - flex-wrap: wrap; - padding: 4px 2px; -} - -.account-gallery__item { - border: 0; - box-sizing: border-box; - display: block; - position: relative; - border-radius: 4px; - overflow: hidden; - margin: 2px; - - a { - background: var(--brand-color-faint); - } - - &__icons { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-size: 24px; - } -} - -.notification__filter-bar, -.account__section-headline { - border-bottom: 1px solid var(--brand-color-faint); - cursor: default; - display: flex; - flex-shrink: 0; - - button { - border: 0; - margin: 0; - } - - button, - a { - display: block; - flex: 1 1 auto; - color: var(--primary-text-color-faint); - padding: 15px 0; - font-size: 14px; - font-weight: 500; - text-align: center; - text-decoration: none; - position: relative; - background: transparent; - - &.active { - color: var(--primary-text-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 var(--brand-color-faint); - } - - &::after { - bottom: -1px; - } - } - } -} - -.account__section-headline { - background: var(--brand-color-faint); - - button, - a { - flex: none; - padding: 18px 15px; - font-size: 16px; - font-weight: 600; - - &.active { - &::before, - &::after { - border-color: transparent transparent var(--foreground-color); - } - } - } -} - -::-webkit-scrollbar-thumb { - border-radius: 0; -} - -.search-popout-container { - width: 251px; - @media screen and (max-width: $nav-breakpoint-2) {width: 100%;} -} - -.search-popout { - @include search-popout; -} - -noscript { - text-align: center; - - img { - width: 200px; - opacity: 0.5; - animation: flicker 4s infinite; - } - - div { - font-size: 14px; - margin: 30px auto; - color: var(--primary-text-color-faint); - max-width: 400px; - - a { - color: var(--highlight-text-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, margin-right, width; - transition: margin-top $duration $delay, margin-left $duration ($duration + $delay), margin-right $duration ($duration + $delay); - } - - & > .navigation-bar__profile-edit { - will-change: margin-top; - transition: margin-top $duration $delay; - } - - .navigation-bar__actions { - & > .icon-button.close { - will-change: opacity transform; - transition: opacity $duration * 0.5 $delay, - transform $duration $delay; - } - - & > .compose__action-bar .icon-button { - will-change: opacity transform; - transition: opacity $duration * 0.5 $delay + $duration * 0.5, - transform $duration $delay; - } - } - } - - .is-composing { - .tabs-bar, - .search { - margin-top: -50px; - } - - .navigation-bar { - padding-bottom: 0; - - & > a:first-child { - margin: -100px 10px 0 -50px; - } - - .navigation-bar__profile { - padding-top: 2px; - } - - .navigation-bar__profile-edit { - position: absolute; - margin-top: -60px; - } - - .navigation-bar__actions { - .icon-button.close { - pointer-events: auto; - opacity: 1; - transform: scale(1, 1) translate(0, 0); - bottom: 5px; - } - - .compose__action-bar .icon-button { - pointer-events: none; - opacity: 0; - transform: scale(0, 1) translate(100%, 0); - } - } - } - } -} - -.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 { - outline: 0; - box-sizing: border-box; - display: block; - width: 100%; - border: 0; - border-radius: 5px; - padding: 10px; - font-family: var(--font-monospace), monospace; - background: var(--brand-color-med); - color: var(--primary-text-color); - font-size: 14px; - margin: 0; - margin-bottom: 15px; - - &::-moz-focus-inner { - border: 0; - } - - &::-moz-focus-inner, - &:focus, - &:active { - outline: 0 !important; - } - - &:focus { - background: var(--brand-color-faint); - } - - @media screen and (max-width: 600px) { - font-size: 16px; - } - } - - .embed-modal__iframe { - width: 100%; - max-width: 100%; - overflow: hidden; - border: 0; - - iframe { - width: 100%; - } - } - } -} - -.account__moved-note { - padding: 14px 10px; - padding-bottom: 16px; - background: var(--brand-color-faint); - border-top: 1px solid var(--brand-color-med); - border-bottom: 1px solid var(--brand-color-med); - - &__message { - position: relative; - margin-left: 58px; - color: var(--primary-text-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: var(--brand-color-faint); - - label { - flex: 1 1 auto; - - input { - width: 100%; - margin-bottom: 6px; - - &:focus { - outline: 0; - } - } - } - - .icon-button { - flex: 0 0 auto; - margin: 0 5px; - } -} - -.drawer__backdrop { - cursor: pointer; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba($base-overlay-background, 0.5); -} - -.list-editor { - flex-direction: column; - width: 100%; - overflow: hidden; - height: 100%; - overflow-y: scroll; - - @media screen and (max-width: 420px) { - width: 90%; - } - - h4 { - padding: 15px 0; - background: var(--background-color); - font-weight: 500; - font-size: 16px; - text-align: center; - border-radius: 8px 8px 0 0; - } - - .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 { - background: var(--background-color); - overflow-y: auto; - max-height: 200px; - } - - .account__display-name { - &:hover strong { - text-decoration: none; - } - } - - .account__avatar { - cursor: default; - } - - .search { - display: flex; - flex-direction: row; - margin: 10px 0; - - > label { - flex: 1 1; - } - - > .search__icon .fa { - right: 102px !important; - } - - > .button { - width: 80px; - margin-left: 10px; - } - } -} - -.list-adder { - flex-direction: column; - width: 100%; - overflow: hidden; - height: 100%; - overflow-y: scroll; - - @media screen and (max-width: 420px) { - width: 90%; - } - - &__account { - background: var(--background-color); - border-radius: 4px; - } - - &__lists { - background: var(--background-color); - } - - .list { - padding: 4px; - border-bottom: 1px solid var(--brand-color-med); - } - - .list__wrapper { - display: flex; - - .account__relationship { - padding: 8px 5px 0; - } - } - - .list__display-name { - flex: 1 1 auto; - overflow: hidden; - text-decoration: none; - font-size: 16px; - padding: 10px; - } -} - -.new-list-form, -.edit-list-form { - &__btn { - margin-left: 6px; - width: 112px; - } - - &__input { - height: 36px; - } -} - -.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; - } -} - -.account__header__content { - color: var(--primary-text-color-faint); - 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; - } - } -} - -.trends { - &__header { - color: var(--primary-text-color); - background: var(--brand-color-faint); - border-bottom: 1px solid var(--brand-color-med); - font-weight: 500; - padding: 15px; - font-size: 16px; - cursor: default; - - .fa { - display: inline-block; - margin-right: 5px; - } - } - - &__item { - display: flex; - align-items: center; - padding: 15px; - border-bottom: 1px solid var(--brand-color-med); - - &:last-child { - border-bottom: 0; - } - - &__name { - flex: 1 1 auto; - color: var(--primary-text-color); - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - font-size: 13px; - - strong { - font-weight: bold; - } - - a { - color: var(--primary-text-color-faint); - text-decoration: none; - font-size: 14px; - font-weight: 500; - display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - - &:hover, - &:focus, - &:active { - span { - text-decoration: underline; - } - } - } - } - - &__current { - flex: 0 0 auto; - width: 100px; - font-size: 24px; - line-height: 36px; - font-weight: 500; - text-align: center; - color: var(--primary-text-color-faint); - } - - &__sparkline { - flex: 0 0 auto; - width: 50px; - - path { - stroke: var(--highlight-text-color) !important; - } - } - } -} - -.layout-toggle { - display: flex; - padding: 5px; - - button { - box-sizing: border-box; - flex: 0 0 50%; - background: transparent; - padding: 5px; - border: 0; - position: relative; - - &:hover, - &:focus, - &:active { - svg path:first-child { - fill: var(--background-color); - } - } - } - - svg { - width: 100%; - height: auto; - - path:first-child { - fill: var(--brand-color-med); - } - - path:last-child { - fill: var(--background-color); - } - } - - &__active { - color: var(--brand-color); - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - background: var(--brand-color-med); - border-radius: 50%; - padding: 0.35rem; - } -} - -.wtf-panel { - @include standard-panel-shadow; - display: flex; - width: 100%; - border-radius: 10px; - flex-direction: column; - height: auto; - box-sizing: border-box; - background: var(--foreground-color); - - &:not(:last-of-type) { - margin-bottom: 10px; - } - - .wtf-panel-header { - display: flex; - align-items: baseline; - margin-bottom: 10px; - padding: 15px 15px 0; - - &__icon { - margin-right: 10px; - } - - &__label { - flex: 1 1; - color: var(--primary-text-color); - font-size: 16px; - font-weight: bold; - line-height: 19px; - } - } - - &__content { - width: 100%; - padding-top: 8px; - } - - &__list { - padding: 0 5px; - } - - &__subtitle { - display: block; - padding: 0 15px; - color: var(--primary-text-color-faint); - } - - &__form { - display: block; - padding: 15px; - - &.button { - width: 100%; - } - } - - .wtf-panel-list-item { - display: block; - padding-bottom: 10px; - - &:not(:first-of-type) { - margin-top: 12px; - } - - &:not(:last-of-type) { - border-bottom: 1px solid var(--brand-color-med); - } - - &__content { - display: flex; - flex-direction: row; - min-height: 46px; - margin-left: 58px; - } - - &__account-block { - display: flex; - position: relative; - align-items: baseline; - padding-right: 10px; - - &__avatar { - height: 46px; - width: 46px; - background-color: #ff0000; - left: -58px; - position: absolute; - } - - &__name { - display: flex; - flex-wrap: wrap; - flex-direction: column; - margin-top: 6px; - - &__name { - color: var(--primary-text-color); - font-size: 14px; - font-weight: bold; - line-height: 16px; - margin-bottom: 2px; - max-height: 32px; //2 lines of text - overflow: hidden; - } - - &__username { - color: var(--highlight-text-color); - font-size: 12px; - line-height: 14px; - } - } - } - - &__follow-block { - margin-left: auto; - padding-top: 6px; - - &__button { - display: flex; - } - - &__icon { - color: var(--primary-text-color); - } - } - } -} - -.verified-icon { - display: inline-block; - margin: 0 4px 0 1px; - vertical-align: top; - position: relative; - width: 15px; - height: 15px; - - &::before { - display: block; - content: ""; - position: absolute; - background-color: #00a3ed; - top: 0; - right: 0; - left: 0; - bottom: 0; - border-radius: 50%; - } - - &::after { - display: block; - position: absolute; - content: '\f00c'; - font: normal normal normal 14px/1 FontAwesome; - font-size: inherit; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - color: #fff; - font-size: 0.6em; - line-height: 15px; - width: 15px; - height: 15px; - text-align: center; - } -} - -.compose-modal { - padding: 8px 0 0; - overflow: hidden; - background-color: var(--background-color); - border-radius: 6px; - flex-direction: column; - width: 600px; - margin: 10px 0; - - &__header { - display: block; - position: relative; - padding: 5px 0; - - &__title { - display: block; - width: 80%; - margin: 0 auto; - font-size: 18px; - font-weight: bold; - line-height: 24px; - color: var(--primary-text-color); - text-align: center; - } - } - - &__close { - position: absolute; - right: 10px; - top: 5px; - color: #999; - } - - &__content { - display: flex; - flex-direction: row; - flex: 1; - padding: 10px; - overflow-y: hidden; - - &--scroll { - display: block; - overflow-y: auto; - } - - .timeline-compose-block { - background: transparent !important; - width: 100%; - padding: 0; - margin-bottom: 0; - - .compose-form { - max-height: 100%; - max-width: 100%; - display: flex; - flex-direction: column; - padding: 0 !important; - - .compose-form__autosuggest-wrapper .autosuggest-textarea__textarea { - max-height: 160px !important; - } - - .compose-form__autosuggest-wrapper::before { - content: none !important; - } - } - } - } - - @media screen and (max-width: 895px) { - margin: 0; - border-radius: 0; - height: 100vh; - width: 100vw; - } -} - -.account-timeline { - &__header { - display: block; - width: 100%; - } -} - -.profile-info-panel { - display: block; - position: relative; - - &__content { - display: flex; - flex-direction: column; - flex: 1 1; - - @media (min-width: 895px) { - padding-top: 60px; - } - } - - .profile-info-panel-content { - display: flex; - - &__badges { - display: flex; - margin: 5px 0; - flex-direction: row; - flex-wrap: wrap; - - &__join-date { - display: block; - margin-top: 5px; - - .fa { - margin-right: 8px; - } - - span { - color: var(--primary-text-color); - font-size: 15px; - line-height: 1.25; - } - } - } - - &__name { - display: block; - - .account-role { - vertical-align: top; - } - - .emojione { - width: 22px; - height: 22px; - } - - // Hide "verified" emoji to avoid confusion - .emojione[alt*="verified"] { - display: none; - } - - h1 { - span:first-of-type { - font-size: 20px !important; - line-height: 1.25; - color: var(--primary-text-color); - font-weight: 600 !important; - max-width: 260px; - } - - small { - display: block; - font-size: 16px; - line-height: 1.5; - color: var(--primary-text-color-faint); - font-weight: 400; - overflow: hidden; - text-overflow: ellipsis; - } - } - } - - &__bio { - display: block; - flex: 1 1; - color: var(--primary-text-color); - margin: 15px 0; - font-size: 15px; - line-height: 1.25; - - a { - color: var(--highlight-text-color); - } - } - - &__fields { - display: flex; - flex-direction: column; - border-top: 1px solid var(--brand-color-med); - padding: 10px 0; - margin: 5px 0; - - @media screen and (max-width: 895px) { - border-bottom: 1px solid var(--brand-color-med); - } - - a { - color: var(--highlight-text-color); - } - - dl:first-child .verified { - border-radius: 0 4px 0 0; - } - - .verified a { - color: $valid-value-color; - } - - &__item { - display: block; - padding: 2px 0; - margin: 2px 0; - flex: 1 1; - - * { - font-size: 15px; - line-height: 24px; - } - - dt { - min-width: 26px; - } - - dd { - padding-left: 4px; - } - } - } - } -} - -.unauthorized-modal { - width: 440px !important; - - &__content { - display: flex; - width: 100%; - height: 150px; - justify-content: center; - align-items: center; - flex-direction: column; - } - - .unauthorized-modal-content { - &__text { - display: block; - margin-bottom: 18px; - color: #fff; - font-size: 14px; - } - - &__button { - width: 200px; - } - } - - &__footer { - display: flex; - border-top: 1px solid #666; - padding: 10px; - justify-content: center; - align-items: center; - - > span { - font-size: 14px; - color: var(--primary-text-color-faint); - - a { - color: var(--brand-color) !important; - } - } - } - - @media screen and (max-width: 895px) { - height: 270px !important; - width: 330px !important; - } -} - -.error-boundary { - > div { - margin: auto; - - span { - display: block; - text-align: center; - color: var(--primary-text-color-faint); - } - - a { - display: block; - margin: 15px auto; - text-align: center; - color: var(--brand-color); - } - } -} - -.search-header { - display: block; - width: 100%; - - &__text-container { - display: none; - padding: 25px 0; - background-color: var(--brand-color-med); - - @media (min-width: 895px) { - display: block; - } - } - - &__title-text { - color: var(--primary-text-color); - font-size: 27px; - font-weight: bold; - line-height: 32px; - overflow: hidden; - padding-left: 20px; - text-overflow: ellipsis; - white-space: nowrap; - max-width: 1200px; - margin: 0 auto; - } - - &__type-filters-tabs { - display: flex; - width: 100%; - max-width: 1200px; - margin: 0 auto; - - @media screen and (max-width: 895px) { - max-width: 580px; - } - } - - @media (min-width: 895px) and (max-width: 1190px) { - &__title-text, - &__type-filters-tabs { - max-width: 900px; - } - } -} - -.timeline-queue-header { - display: block; - width: 100%; - max-height: 46px; - position: relative; - border-bottom: 1px solid; - border-top: 1px solid; - border-color: var(--brand-color-faint); - transition: max-height 150ms ease; - overflow: hidden; - opacity: 1; - - &.hidden { - max-height: 0; - opacity: 0; - } - - &__btn { - display: block; - width: 100%; - height: 100%; - text-align: center; - line-height: 46px; - font-size: 14px; - cursor: pointer; - color: var(--primary-text-color-faint); - - span { - height: 46px; - } - } -} - -.badge { - background-color: var(--brand-color); - color: #fff; - font-size: 12px; - font-weight: normal; - text-transform: uppercase; - padding: 2px 6px; - border-radius: 2px; - margin: 0 5px 5px 0; - - &--pro { - background-color: #8a2be2; - color: #fff; - } - - &--investor { - background-color: #ffd700; - color: #000; - } - - &--donor { - background-color: #90ee90; - color: #000; - } - - &--admin { - background-color: #000; - color: #fff; - } - - &--moderator { - background-color: #048ba8; - color: #fff; - } -} diff --git a/app/styles/components/account-header.scss b/app/styles/components/account-header.scss index 06b08a8aa..a6fcb7d82 100644 --- a/app/styles/components/account-header.scss +++ b/app/styles/components/account-header.scss @@ -170,3 +170,36 @@ } } } // end .account__header + +.account-timeline { + &__header { + display: block; + width: 100%; + } +} + +.account__header__content { + color: var(--primary-text-color-faint); + 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; + } + } +} diff --git a/app/styles/components/badge.scss b/app/styles/components/badge.scss new file mode 100644 index 000000000..e700875e0 --- /dev/null +++ b/app/styles/components/badge.scss @@ -0,0 +1,35 @@ +.badge { + background-color: var(--brand-color); + color: #fff; + font-size: 12px; + font-weight: normal; + text-transform: uppercase; + padding: 2px 6px; + border-radius: 2px; + margin: 0 5px 5px 0; + + &--pro { + background-color: #8a2be2; + color: #fff; + } + + &--investor { + background-color: #ffd700; + color: #000; + } + + &--donor { + background-color: #90ee90; + color: #000; + } + + &--admin { + background-color: #000; + color: #fff; + } + + &--moderator { + background-color: #048ba8; + color: #fff; + } +} diff --git a/app/styles/components/columns.scss b/app/styles/components/columns.scss new file mode 100644 index 000000000..df27b3921 --- /dev/null +++ b/app/styles/components/columns.scss @@ -0,0 +1,662 @@ +.column__wrapper { + display: flex; + flex: 1 1 auto; + position: relative; +} + +.columns-area { + display: flex; + flex: 1 1 auto; + flex-direction: row; + justify-content: flex-start; + position: relative; + + &__panels { + display: flex; + justify-content: center; + width: 100%; + height: 100%; + + &__pane { + height: 100%; + pointer-events: none; + display: flex; + justify-content: flex-end; + padding-top: 15px; + + &--start { + justify-content: flex-start; + } + + &__inner { + width: 265px; + pointer-events: auto; + height: 100%; + } + } + + &__main { + display: flex; + flex-direction: column; + box-sizing: border-box; + width: 100%; + max-width: 600px; + padding: 0 20px; + @media screen and (max-width: 375px) { + padding: 0 10px; + } + @media screen and (min-width: 895px) { + margin: 0 20px; + padding: 0; + } + } + } +} + +.column { + width: 350px; + position: relative; + box-sizing: border-box; + display: flex; + flex-direction: column; +} + +@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; + } + } + + .columns-area > div { + .column, + .drawer { + padding-left: 5px; + padding-right: 5px; + } + } +} + +.columns-area--mobile { + display: block; + flex-direction: column; + width: 100%; + margin: 0 auto; + padding: 15px 0; + + .column, + .drawer { + width: 100%; + height: 100%; + padding: 0; + } + + .autosuggest-textarea__textarea {font-size: 16px;} + + .search__input { + line-height: 18px; + font-size: 16px; + padding: 15px; + padding-right: 30px; + } + .search__icon .fa {top: 15px;} + @media screen and (min-width: 630px) { + .detailed-status { + padding: 15px; + + .media-gallery, + .video-player { + margin-top: 15px; + } + } + .account__header__bar {padding: 5px 10px;} + + .navigation-bar, + .compose-form { + padding: 15px; + } + .compose-form .compose-form__publish .compose-form__publish-button-wrapper {padding-top: 15px;} + + .status { + padding: 15px 15px 15px (48px + 15px * 2); + min-height: 48px + 2px; + + &__avatar { + left: 15px; + top: 17px; + } + + &__content { + padding-top: 5px; + } + + &__prepend { + margin-left: 48px + 15px * 2; + padding-top: 15px; + } + + &__prepend-icon-wrapper { + left: -32px; + } + + .media-gallery, + .video-player { + margin-top: 10px; + } + } + + .account { + padding: 15px 10px; + } + + .notification { + &__message { + margin-left: 48px + 15px * 2; + padding-top: 15px; + } + + &__favourite-icon-wrapper { + left: -32px; + } + + .status { + padding-top: 8px; + } + + .account { + padding-top: 8px; + } + + .account__avatar-wrapper { + margin-left: 17px; + margin-right: 15px; + } + } + } +} + +// This controls where the left column breaks. +@media screen and (max-width: 600px + (285px * 1) + (10px * 1)) { + .columns-area__panels__pane--left { + display: none; + } +} + +@media screen and (max-width: 600px + (285px * 2) + (10px * 2)) { + .columns-area__panels__pane--right { + display: none; + } +} + +.column-back-button { + background: var(--brand-color-med); + color: var(--highlight-text-color); + cursor: pointer; + flex: 0 0 auto; + font-size: 16px; + line-height: inherit; + border: 0; + text-align: unset; + padding: 15px; + margin: 0; + z-index: 3; + outline: 0; + + &:hover { + text-decoration: underline; + } +} + +.column-header__back-button { + background: var(--brand-color-faint); + border: 0; + font-family: inherit; + color: var(--highlight-text-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; +} + +.column-link { + background: var(--brand-color-med); + color: var(--primary-text-color); + display: block; + font-size: 16px; + padding: 15px; + text-decoration: none; + + &:hover, + &:focus, + &:active { + background: var(--brand-color-faint); + } + + &:focus { + outline: 0; + } + + &--transparent { + background: transparent; + color: var(--background-color); + + &:hover, + &:focus, + &:active { + background: transparent; + color: var(--primary-text-color); + } + + &.active { + color: var(--brand-color); + } + } +} + +.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: var(--brand-color-med); + padding: 4px 8px; + margin: -6px 10px; +} + +.column-subheading { + background: var(--brand-color-med); + color: var(--primary-text-color-faint); + padding: 8px 20px; + font-size: 12px; + font-weight: 500; + text-transform: uppercase; + cursor: default; +} + +.columns-area--mobile .column { + @include standard-panel; +} + +.column-header__wrapper { + position: relative; + flex: 0 0 auto; + overflow: hidden; + + &.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(var(--brand-color), 0.23) 0%, rgba(var(--brand-color), 0) 60%); + } + } +} + +.column-header { + display: flex; + font-size: 16px; + flex: 0 0 auto; + cursor: pointer; + position: relative; + z-index: 2; + outline: 0; + overflow-x: auto; + + & > button, + & > .btn { + margin: 0; + border: 0; + padding: 15px; + color: inherit; + background: transparent; + font: inherit; + text-align: left; + text-decoration: none; + white-space: nowrap; + + &--sub { + font-size: 14px; + padding: 6px 10px; + } + + &.grouped { + margin: 6px; + color: var(--primary-text-color-faint); + } + + &.active { + color: var(--primary-text-color); + border-radius: 10px; + background-color: var(--brand-color-faint); + } + + @media screen and (max-width: $nav-breakpoint-2) { + padding: 8px; + font-size: 14px; + + &.grouped { + margin: 6px 2px 6px 6px; + } + + &.active { + border-radius: 5px; + } + } + } + + & > .column-header__back-button { + color: var(--highlight-text-color); + } + + &.active { + box-shadow: 0 1px 0 rgba(var(--highlight-text-color), 0.3); + + .column-header__icon { + color: var(--highlight-text-color); + text-shadow: 0 0 10px rgba(var(--highlight-text-color), 0.4); + } + } + + &:focus, + &:active { + outline: 0; + } +} + +.column-header__buttons { + height: 48px; + display: flex; + margin-left: auto; +} + +.column-header__links .text-btn { + margin-right: 10px; +} + +.column-header__button { + cursor: pointer; + border: 0; + padding: 0 15px; + font-size: 16px; + color: var(--primary-text-color-faint); + background: transparent; + + &:hover { + color: rgba(var(--primary-text-color-rgb), 0.8); + } + + &.active { + color: var(--primary-text-color); + background: var(--brand-color-med); + + &:hover { + color: var(--primary-text-color); + background: var(--brand-color-med); + } + } +} + +.column-header__collapsible { + max-height: 70vh; + overflow: hidden; + overflow-y: auto; + color: var(--primary-text-color-faint); + 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 var(--brand-color-med); + margin: 10px 0; + } +} + +.column-header__collapsible-inner { + background: var(--background-color); + padding: 15px; +} + +.column-header__setting-btn { + &--link { + text-decoration: none; + + .fa { + margin-left: 10px; + } + } + + &:hover { + color: var(--primary-text-color-faint); + text-decoration: underline; + } +} + +.column-header__setting-arrows { + float: right; + + .column-header__setting-btn { + padding: 0 10px; + + &:last-child { + padding-right: 0; + } + } +} + +.column-header__expansion { + overflow-x: scroll; + overflow-y: hidden; + white-space: nowrap; +} + +.column-header__icon { + display: inline-block; + margin-right: 5px; +} + +.column-settings__outer { + background: var(--brand-color-med); + padding: 15px; +} + +.column-settings__section { + color: var(--primary-text-color-faint); + cursor: default; + display: block; + font-weight: 500; + margin-bottom: 10px; +} + +.column-settings__hashtags { + .column-settings__row { + margin-bottom: 15px; + } + + .column-select { + &__control { + @include search-input; + } + + &__placeholder { + color: var(--primary-text-color); + padding-left: 2px; + font-size: 12px; + } + + &__value-container { + padding-left: 6px; + } + + &__multi-value { + background: var(--brand-color-med); + + &__remove { + cursor: pointer; + + &:hover, + &:active, + &:focus { + background: var(--brand-color-med); + color: var(--primary-text-color); + } + } + } + + &__multi-value__label, + &__input { + color: var(--primary-text-color-faint); + } + + &__clear-indicator, + &__dropdown-indicator { + cursor: pointer; + transition: none; + color: var(--primary-text-color); + + &:hover, + &:active, + &:focus { + color: var(--primary-text-color); + } + } + + &__indicator-separator { + background-color: var(--brand-color-med); + } + + &__menu { + @include search-popout; + padding: 0; + background: var(--background-color); + } + + &__menu-list { + padding: 6px; + } + + &__option { + color: var(--primary-text-color); + border-radius: 4px; + font-size: 14px; + + &--is-focused, + &--is-selected { + background: var(--background-color); + } + } + } +} + +.column-settings__row { + .text-btn { + margin-bottom: 15px; + } +} + +.empty-column-indicator, +.error-column { + color: var(--primary-text-color); + background: var(--brand-color-med); + text-align: center; + padding: 40px; + font-size: 15px; + font-weight: 400; + cursor: default; + display: flex; + flex: 1 1 auto; + align-items: center; + justify-content: center; + min-height: 160px; + + @supports(display: grid) { // hack to fix Chrome <57 + contain: strict; + } + + & > span { + max-width: 400px; + } + + a { + color: var(--highlight-text-color); + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } +} + +.error-column { + flex-direction: column; +} + +.column-link--transparent .icon-with-badge__badge { + border-color: var(--background-color); +} diff --git a/app/styles/components/compose-form.scss b/app/styles/components/compose-form.scss index 95dee51e7..6e0c54174 100644 --- a/app/styles/components/compose-form.scss +++ b/app/styles/components/compose-form.scss @@ -339,3 +339,230 @@ } } } // end .compose-form + +.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: var(--brand-color-med); + 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: var(--primary-text-color-faint); + font-size: 18px; + font-weight: 500; + border: 2px dashed var(--brand-color-med); + border-radius: 4px; +} + +.upload-progress { + padding: 10px; + color: var(--highlight-text-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: var(--brand-color-med); + position: relative; + margin-top: 5px; +} + +.upload-progress__tracker { + position: absolute; + left: 0; + top: 0; + height: 6px; + background: var(--brand-color); + border-radius: 6px; +} + +.privacy-dropdown__dropdown { + font-size: 14px; + position: absolute; + background: var(--foreground-color); + box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); + border-radius: 4px; + margin-left: 40px; + overflow: hidden; + z-index: 10000; + + &.top { + transform-origin: 50% 100%; + } + + &.bottom { + transform-origin: 50% 0; + } +} + +.privacy-dropdown__option { + color: var(--primary-text-color); + padding: 10px; + cursor: pointer; + display: flex; + + &:hover, + &.active { + background: var(--brand-color-med); + color: var(--primary-text-color); + outline: 0; + + .privacy-dropdown__option__content { + color: var(--primary-text-color); + + strong { + color: var(--primary-text-color); + } + } + } + + &.active:hover { + background: rgba(var(--brand-color-rgb), 0.5); + } +} + +.privacy-dropdown__option__icon { + display: flex; + align-items: center; + justify-content: center; + margin-right: 10px; +} + +.privacy-dropdown__option__content { + flex: 1 1 auto; + color: var(--highlight-text-color); + + strong { + font-weight: 500; + display: block; + color: var(--primary-text-color); + + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + font-weight: 700; + } + } + } +} + +.privacy-dropdown.active { + .privacy-dropdown__value { + background: var(--foreground-color); + border-radius: 4px 4px 0 0; + box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1); + + .icon-button { + transition: none; + } + + &.active { + background: var(--brand-color); + + .icon-button { + color: var(--primary-text-color); + } + } + } + + &.top .privacy-dropdown__value { + border-radius: 0 0 4px 4px; + } + + .privacy-dropdown__dropdown { + display: block; + box-shadow: 2px 4px 6px rgba($base-shadow-color, 0.1); + } +} + +.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; + } +} diff --git a/app/styles/components/detailed-status.scss b/app/styles/components/detailed-status.scss index 807c1638a..99e378b94 100644 --- a/app/styles/components/detailed-status.scss +++ b/app/styles/components/detailed-status.scss @@ -92,3 +92,38 @@ .detailed-status__wrapper { position: relative; } + +.detailed-status__application, +.detailed-status__datetime { + color: inherit; +} + +.detailed-status__display-name { + color: var(--primary-text-color-faint); + display: flex; + line-height: 24px; + margin-bottom: 15px; + overflow: hidden; + + strong, + span { + display: inline-block; + text-overflow: ellipsis; + overflow: hidden; + } + + strong { + font-size: 16px; + color: var(--primary-text-color); + } + + .display-name__account { + display: block; + margin-top: -10px; + } +} + +.detailed-status__display-avatar { + float: left; + margin-right: 10px; +} diff --git a/app/styles/components/display-name.scss b/app/styles/components/display-name.scss new file mode 100644 index 000000000..2337a3239 --- /dev/null +++ b/app/styles/components/display-name.scss @@ -0,0 +1,61 @@ +.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: var(--primary-text-color); + } +} + +.muted { + .emojione { + opacity: 0.5; + } +} + +.status__display-name, +.reply-indicator__display-name, +.detailed-status__display-name, +a.account__display-name { + &:hover strong { + text-decoration: underline; + } +} + +.account__display-name strong { + display: block; + overflow: hidden; + text-overflow: ellipsis; +} + +.display-name { + display: block; + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.display-name__html { + font-weight: 600; + padding-right: 4px; +} + +.display-name__account { + font-size: 14px; +} + +// Hide "verified" emoji to avoid confusion +.display-name, +.notification__display-name { + .emojione[alt*="verified"] { + display: none; + } +} diff --git a/app/styles/components/drawer.scss b/app/styles/components/drawer.scss new file mode 100644 index 000000000..5b107b85e --- /dev/null +++ b/app/styles/components/drawer.scss @@ -0,0 +1,81 @@ +.drawer { + 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: var(--primary-text-color-faint); + text-decoration: none; + text-align: center; + font-size: 16px; + border-bottom: 2px solid transparent; +} + +.column, +.drawer { + flex: 1 1 100%; + overflow: hidden; +} + +.drawer__pager { + box-sizing: border-box; + padding: 0; + flex-grow: 1; + position: relative; + overflow: hidden; + display: flex; +} + +.drawer__inner { + top: 0; + left: 0; + background: var(--foreground-color); + box-sizing: border-box; + padding: 0; + display: flex; + flex-direction: column; + overflow: hidden; + overflow-y: auto; + width: 100%; + height: 100%; +} + +.pseudo-drawer { + background: var(--background-color); + font-size: 13px; + text-align: left; +} + +.drawer__header { + flex: 0 0 auto; + font-size: 16px; + background: var(--brand-color-med); + margin-bottom: 10px; + display: flex; + flex-direction: row; + + a { + transition: background 100ms ease-in; + + &:hover { + background: var(--background-color); + transition: background 200ms ease-out; + } + } +} + +.drawer__backdrop { + cursor: pointer; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba($base-overlay-background, 0.5); +} diff --git a/app/styles/components/error-boundary.scss b/app/styles/components/error-boundary.scss new file mode 100644 index 000000000..bedd0daf5 --- /dev/null +++ b/app/styles/components/error-boundary.scss @@ -0,0 +1,18 @@ +.error-boundary { + > div { + margin: auto; + + span { + display: block; + text-align: center; + color: var(--primary-text-color-faint); + } + + a { + display: block; + margin: 15px auto; + text-align: center; + color: var(--brand-color); + } + } +} diff --git a/app/styles/components/getting-started.scss b/app/styles/components/getting-started.scss new file mode 100644 index 000000000..a99a3c2d3 --- /dev/null +++ b/app/styles/components/getting-started.scss @@ -0,0 +1,77 @@ +.getting-started__wrapper, +.getting-started, +.flex-spacer { + background: var(--brand-color-med); +} + +.getting-started__wrapper { + flex: 0 0 auto; +} + +.flex-spacer { + flex: 1 1 auto; +} + +.getting-started { + overflow: auto; + + &__footer { + flex: 0 0 auto; + padding: 10px; + padding-top: 20px; + opacity: 0.7; + + ul { + margin-bottom: 10px; + } + + ul li { + display: inline; + } + + p { + color: var(--primary-text-color); + font-size: 13px; + margin-bottom: 20px; + + a { + color: var(--primary-text-color-faint); + text-decoration: underline; + opacity: 0.8; + } + } + + a { + text-decoration: none; + color: var(--primary-text-color-faint); + opacity: 0.8; + + &:hover, + &:focus, + &:active { + text-decoration: underline; + } + } + } + + &__trends { + background: var(--brand-color-med); + flex: 0 1 auto; + + @media screen and (max-height: 810px) { + .trends__item:nth-child(3) { + display: none; + } + } + + @media screen and (max-height: 720px) { + .trends__item:nth-child(2) { + display: none; + } + } + + @media screen and (max-height: 670px) { + display: none; + } + } +} diff --git a/app/styles/components/list-forms.scss b/app/styles/components/list-forms.scss new file mode 100644 index 000000000..5b70d99b0 --- /dev/null +++ b/app/styles/components/list-forms.scss @@ -0,0 +1,119 @@ +.list-editor { + flex-direction: column; + width: 100%; + overflow: hidden; + height: 100%; + overflow-y: scroll; + + @media screen and (max-width: 420px) { + width: 90%; + } + + h4 { + padding: 15px 0; + background: var(--background-color); + font-weight: 500; + font-size: 16px; + text-align: center; + border-radius: 8px 8px 0 0; + } + + .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 { + background: var(--background-color); + overflow-y: auto; + max-height: 200px; + } + + .account__display-name { + &:hover strong { + text-decoration: none; + } + } + + .account__avatar { + cursor: default; + } + + .search { + display: flex; + flex-direction: row; + margin: 10px 0; + + > label { + flex: 1 1; + } + + > .search__icon .fa { + right: 102px !important; + } + + > .button { + width: 80px; + margin-left: 10px; + } + } +} + +.list-adder { + flex-direction: column; + width: 100%; + overflow: hidden; + height: 100%; + overflow-y: scroll; + + @media screen and (max-width: 420px) { + width: 90%; + } + + &__account { + background: var(--background-color); + border-radius: 4px; + } + + &__lists { + background: var(--background-color); + } + + .list { + padding: 4px; + border-bottom: 1px solid var(--brand-color-med); + } + + .list__wrapper { + display: flex; + + .account__relationship { + padding: 8px 5px 0; + } + } + + .list__display-name { + flex: 1 1 auto; + overflow: hidden; + text-decoration: none; + font-size: 16px; + padding: 10px; + } +} + +.new-list-form, +.edit-list-form { + &__btn { + margin-left: 6px; + width: 112px; + } + + &__input { + height: 36px; + } +} diff --git a/app/styles/components/media-gallery.scss b/app/styles/components/media-gallery.scss new file mode 100644 index 000000000..e94285fc3 --- /dev/null +++ b/app/styles/components/media-gallery.scss @@ -0,0 +1,145 @@ +.media-gallery { + box-sizing: border-box; + margin-top: 8px; + overflow: hidden; + border-radius: 4px; + position: relative; + width: 100%; + background-color: var(--brand-color-faint); +} + +.media-gallery__item { + border: 0; + box-sizing: border-box; + display: block; + float: left; + position: relative; + border-radius: 4px; + overflow: hidden; +} + +.media-gallery__item-thumbnail { + cursor: zoom-in; + display: block; + text-decoration: none; + color: var(--primary-text-color-faint); + line-height: 0; + position: relative; + z-index: 1; + + &, + img, + canvas { + height: 100%; + width: 100%; + } + + img, + canvas { + object-fit: cover; + } + + &--play-on-hover { + &::before { + content: 'GIF'; + position: absolute; + color: var(--primary-text-color); + background: var(--foreground-color); + bottom: 6px; + left: 6px; + padding: 2px 6px; + border-radius: 2px; + font-size: 11px; + font-weight: 600; + pointer-events: none; + opacity: 0.9; + transition: opacity 0.1s ease; + line-height: 18px; + } + + img { + position: absolute; + } + + img, + &:hover::before { + visibility: hidden; + } + + &:hover img { + visibility: visible; + } + } +} + +.media-gallery__preview { + width: 100%; + height: 100%; + object-fit: cover; + position: absolute; + top: 0; + left: 0; + z-index: 0; + background: var(--background-color); + + &--hidden { + display: none; + } +} + +.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; + width: 100%; + z-index: 1; + transform: none; + top: 0; +} + +.media-gallery__item-thumbnail-label { + clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); + overflow: hidden; + position: absolute; +} + +.media-gallery__gifv__label { + display: block; + position: absolute; + color: var(--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; + line-height: 18px; +} + +.media-gallery__gifv { + &.autoplay { + .media-gallery__gifv__label { + display: none; + } + } + + &:hover { + .media-gallery__gifv__label { + opacity: 1; + } + } +} diff --git a/app/styles/components/media-spoiler.scss b/app/styles/components/media-spoiler.scss new file mode 100644 index 000000000..61f19e0e6 --- /dev/null +++ b/app/styles/components/media-spoiler.scss @@ -0,0 +1,28 @@ +.media-spoiler { + background: var(--background-color); + color: var(--primary-text-color-faint); + border: 0; + padding: 0; + width: 100%; + height: 100%; + border-radius: 4px; + appearance: none; + + &:hover, + &:active, + &:focus { + padding: 0; + color: var(--primary-text-color); + } +} + +.media-spoiler__warning { + display: block; + font-size: 14px; +} + +.media-spoiler__trigger { + display: block; + font-size: 11px; + font-weight: 700; +} diff --git a/app/styles/components/modal.scss b/app/styles/components/modal.scss index f515ef9d9..939f79ed5 100644 --- a/app/styles/components/modal.scss +++ b/app/styles/components/modal.scss @@ -619,3 +619,230 @@ margin-top: 0; } } + +.compose-modal { + padding: 8px 0 0; + overflow: hidden; + background-color: var(--background-color); + border-radius: 6px; + flex-direction: column; + width: 600px; + margin: 10px 0; + + &__header { + display: block; + position: relative; + padding: 5px 0; + + &__title { + display: block; + width: 80%; + margin: 0 auto; + font-size: 18px; + font-weight: bold; + line-height: 24px; + color: var(--primary-text-color); + text-align: center; + } + } + + &__close { + position: absolute; + right: 10px; + top: 5px; + color: #999; + } + + &__content { + display: flex; + flex-direction: row; + flex: 1; + padding: 10px; + overflow-y: hidden; + + &--scroll { + display: block; + overflow-y: auto; + } + + .timeline-compose-block { + background: transparent !important; + width: 100%; + padding: 0; + margin-bottom: 0; + + .compose-form { + max-height: 100%; + max-width: 100%; + display: flex; + flex-direction: column; + padding: 0 !important; + + .compose-form__autosuggest-wrapper .autosuggest-textarea__textarea { + max-height: 160px !important; + } + + .compose-form__autosuggest-wrapper::before { + content: none !important; + } + } + } + } + + @media screen and (max-width: 895px) { + margin: 0; + border-radius: 0; + height: 100vh; + width: 100vw; + } +} + +.unauthorized-modal { + width: 440px !important; + + &__content { + display: flex; + width: 100%; + height: 150px; + justify-content: center; + align-items: center; + flex-direction: column; + } + + .unauthorized-modal-content { + &__text { + display: block; + margin-bottom: 18px; + color: #fff; + font-size: 14px; + } + + &__button { + width: 200px; + } + } + + &__footer { + display: flex; + border-top: 1px solid #666; + padding: 10px; + justify-content: center; + align-items: center; + + > span { + font-size: 14px; + color: var(--primary-text-color-faint); + + a { + color: var(--brand-color) !important; + } + } + } + + @media screen and (max-width: 895px) { + height: 270px !important; + width: 330px !important; + } +} + +.focal-point-modal { + max-width: 80vw; + max-height: 80vh; + position: relative; +} + +.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 { + outline: 0; + box-sizing: border-box; + display: block; + width: 100%; + border: 0; + border-radius: 5px; + padding: 10px; + font-family: var(--font-monospace), monospace; + background: var(--brand-color-med); + color: var(--primary-text-color); + font-size: 14px; + margin: 0; + margin-bottom: 15px; + + &::-moz-focus-inner { + border: 0; + } + + &::-moz-focus-inner, + &:focus, + &:active { + outline: 0 !important; + } + + &:focus { + background: var(--brand-color-faint); + } + + @media screen and (max-width: 600px) { + font-size: 16px; + } + } + + .embed-modal__iframe { + width: 100%; + max-width: 100%; + overflow: hidden; + border: 0; + + iframe { + width: 100%; + } + } + } +} + +.modal-container--preloader { + background: var(--brand-color-med); +} + +.column-inline-form { + padding: 7px 15px; + padding-right: 5px; + display: flex; + justify-content: flex-start; + align-items: center; + background: var(--brand-color-faint); + + label { + flex: 1 1 auto; + + input { + width: 100%; + margin-bottom: 6px; + + &:focus { + outline: 0; + } + } + } + + .icon-button { + flex: 0 0 auto; + margin: 0 5px; + } +} diff --git a/app/styles/components/navigation-bar.scss b/app/styles/components/navigation-bar.scss new file mode 100644 index 000000000..5fab3883d --- /dev/null +++ b/app/styles/components/navigation-bar.scss @@ -0,0 +1,138 @@ +.navigation-bar { + padding: 10px; + display: flex; + align-items: center; + flex-shrink: 0; + cursor: default; + color: var(--primary-text-color-faint); + + strong { + color: var(--primary-text-color-faint); + } + + a { + color: inherit; + } + + .permalink { + text-decoration: none; + } + + .navigation-bar__actions { + position: relative; + + .icon-button.close { + position: absolute; + pointer-events: none; + transform: scale(0, 1) translate(-100%, 0); + opacity: 0; + } + + .compose__action-bar .icon-button { + pointer-events: auto; + transform: scale(1, 1) translate(0, 0); + opacity: 1; + } + } +} + +.navigation-bar__profile { + flex: 1 1 auto; + margin-left: 8px; + line-height: 20px; + margin-top: -1px; + 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; +} + +@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, margin-right, width; + transition: margin-top $duration $delay, margin-left $duration ($duration + $delay), margin-right $duration ($duration + $delay); + } + + & > .navigation-bar__profile-edit { + will-change: margin-top; + transition: margin-top $duration $delay; + } + + .navigation-bar__actions { + & > .icon-button.close { + will-change: opacity transform; + transition: opacity $duration * 0.5 $delay, + transform $duration $delay; + } + + & > .compose__action-bar .icon-button { + will-change: opacity transform; + transition: opacity $duration * 0.5 $delay + $duration * 0.5, + transform $duration $delay; + } + } + } + + .is-composing { + .tabs-bar, + .search { + margin-top: -50px; + } + + .navigation-bar { + padding-bottom: 0; + + & > a:first-child { + margin: -100px 10px 0 -50px; + } + + .navigation-bar__profile { + padding-top: 2px; + } + + .navigation-bar__profile-edit { + position: absolute; + margin-top: -60px; + } + + .navigation-bar__actions { + .icon-button.close { + pointer-events: auto; + opacity: 1; + transform: scale(1, 1) translate(0, 0); + bottom: 5px; + } + + .compose__action-bar .icon-button { + pointer-events: none; + opacity: 0; + transform: scale(0, 1) translate(100%, 0); + } + } + } + } +} diff --git a/app/styles/components/notification.scss b/app/styles/components/notification.scss new file mode 100644 index 000000000..7cef280da --- /dev/null +++ b/app/styles/components/notification.scss @@ -0,0 +1,53 @@ +.notification-favourite { + .status.status-direct { + background: transparent; + + .icon-button.disabled { + color: rgba(var(--brand-color-rgb), 0.2); + } + } +} + +.notification__message { + margin: 0 10px 0 68px; + padding: 8px 0 0; + cursor: default; + color: var(--primary-text-color-faint); + font-size: 15px; + line-height: 22px; + position: relative; + + .fa { + color: var(--highlight-text-color); + } + + > span { + display: inline; + overflow: hidden; + text-overflow: ellipsis; + } +} + +.notification__favourite-icon-wrapper { + left: -26px; + position: absolute; + + .star-icon { + color: $gold-star; + } +} + +.notification__display-name { + color: inherit; + font-weight: 500; + text-decoration: none; + + &:hover { + color: var(--primary-text-color); + text-decoration: underline; + } +} + +.notification__relative_time { + float: right; +} diff --git a/app/styles/components/profile-info-panel.scss b/app/styles/components/profile-info-panel.scss new file mode 100644 index 000000000..91deaa2e3 --- /dev/null +++ b/app/styles/components/profile-info-panel.scss @@ -0,0 +1,135 @@ +.profile-info-panel { + display: block; + position: relative; + + &__content { + display: flex; + flex-direction: column; + flex: 1 1; + + @media (min-width: 895px) { + padding-top: 60px; + } + } + + .profile-info-panel-content { + display: flex; + + &__badges { + display: flex; + margin: 5px 0; + flex-direction: row; + flex-wrap: wrap; + + &__join-date { + display: block; + margin-top: 5px; + + .fa { + margin-right: 8px; + } + + span { + color: var(--primary-text-color); + font-size: 15px; + line-height: 1.25; + } + } + } + + &__name { + display: block; + + .account-role { + vertical-align: top; + } + + .emojione { + width: 22px; + height: 22px; + } + + // Hide "verified" emoji to avoid confusion + .emojione[alt*="verified"] { + display: none; + } + + h1 { + span:first-of-type { + font-size: 20px !important; + line-height: 1.25; + color: var(--primary-text-color); + font-weight: 600 !important; + max-width: 260px; + } + + small { + display: block; + font-size: 16px; + line-height: 1.5; + color: var(--primary-text-color-faint); + font-weight: 400; + overflow: hidden; + text-overflow: ellipsis; + } + } + } + + &__bio { + display: block; + flex: 1 1; + color: var(--primary-text-color); + margin: 15px 0; + font-size: 15px; + line-height: 1.25; + + a { + color: var(--highlight-text-color); + } + } + + &__fields { + display: flex; + flex-direction: column; + border-top: 1px solid var(--brand-color-med); + padding: 10px 0; + margin: 5px 0; + + @media screen and (max-width: 895px) { + border-bottom: 1px solid var(--brand-color-med); + } + + a { + color: var(--highlight-text-color); + } + + dl:first-child .verified { + border-radius: 0 4px 0 0; + } + + .verified a { + color: $valid-value-color; + } + + &__item { + display: block; + padding: 2px 0; + margin: 2px 0; + flex: 1 1; + + * { + font-size: 15px; + line-height: 24px; + } + + dt { + min-width: 26px; + } + + dd { + padding-left: 4px; + } + } + } + } +} diff --git a/app/styles/components/promo-panel.scss b/app/styles/components/promo-panel.scss new file mode 100644 index 000000000..8fdceb7ed --- /dev/null +++ b/app/styles/components/promo-panel.scss @@ -0,0 +1,51 @@ +.promo-panel { + margin-top: 10px; + background-color: transparent !important; + overflow: hidden; +} + +.promo-panel-item { + @include standard-panel-shadow; + display: block; + height: 42px; + line-height: 42px; + border-bottom: 1px solid var(--brand-color-med); + background: var(--foreground-color); + + &--highlighted { + background-color: #30ce7d; + border-radius: 10px; + font-weight: 600; + margin-bottom: 10px; + } + + &--top-rounded { + border-top-right-radius: 10px; + border-top-left-radius: 10px; + } + + &:last-of-type { + border-bottom: 0; + } + + &__btn { + display: block; + text-align: left; + color: var(--primary-text-color); + text-decoration: none; + font-size: 15px; + padding: 0 20px; + + &:hover { + color: var(--primary-text-color-faint); + + span { + text-decoration: underline; + } + } + } + + &__icon { + margin-right: 12px; + } +} diff --git a/app/styles/components/react-toggle.scss b/app/styles/components/react-toggle.scss new file mode 100644 index 000000000..2cef9254c --- /dev/null +++ b/app/styles/components/react-toggle.scss @@ -0,0 +1,105 @@ +.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: var(--brand-color-med); + transition: background-color 0.2s ease; +} + +.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track { + background-color: var(--background-color); +} + +.react-toggle--checked .react-toggle-track { + background-color: var(--brand-color); +} + +.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { + background-color: var(--brand-color-hicontrast); +} + +.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 { + position: absolute; + top: 1px; + left: 1px; + width: 22px; + height: 22px; + border: 1px solid var(--brand-color-med); + border-radius: 50%; + background-color: var(--background-color); + box-sizing: border-box; + transition: all 0.25s ease; + transition-property: border-color, left; +} + +.react-toggle--checked .react-toggle-thumb { + left: 27px; + border-color: var(--brand-color); +} diff --git a/app/styles/components/reply-indicator.scss b/app/styles/components/reply-indicator.scss new file mode 100644 index 000000000..a5b9c4bc9 --- /dev/null +++ b/app/styles/components/reply-indicator.scss @@ -0,0 +1,51 @@ +.reply-indicator { + border-radius: 4px; + margin-bottom: 10px; + background: var(--brand-color-faint); + padding: 10px; + min-height: 23px; + overflow-y: auto; + flex: 0 2 auto; + max-height: 500px; + @media screen and (min-width: 320px) and (max-width: 375px) {max-height: 220px;} + @media screen and (max-width: 320px) {max-height: 130px;} +} + +.reply-indicator__header { + margin-bottom: 5px; + overflow: hidden; +} + +.reply-indicator__cancel { + float: right; + line-height: 24px; +} + +.reply-indicator__display-name { + color: var(--primary-text-color); + display: block; + max-width: 100%; + line-height: 24px; + overflow: hidden; + padding-right: 25px; + text-decoration: none; + + .display-name__account { + color: var(--primary-text-color-faint); + } +} + +.reply-indicator__display-avatar { + float: left; + margin-right: 5px; +} + +.reply-indicator__content { + color: var(--primary-text-color); + font-size: 14px; + user-select: text; + + a { + color: var(--highlight-text-color); + } +} diff --git a/app/styles/components/search.scss b/app/styles/components/search.scss new file mode 100644 index 000000000..69945b302 --- /dev/null +++ b/app/styles/components/search.scss @@ -0,0 +1,162 @@ +@media screen and (min-width: 600px + (285px * 1) + (10px * 1)) { + .search-page .search { + display: none; + } +} + +.search { + position: relative; +} + +.search__input { + @include search-input; + display: block; + padding: 7px 30px 6px 10px; +} + +.search__icon { + &::-moz-focus-inner { + border: 0; + } + + &::-moz-focus-inner, + &:focus { + outline: 0 !important; + } + + .fa { + @include font-size(16); + cursor: default; + display: inline-block; + position: absolute; + top: 8px; + right: 8px; + z-index: 2; + width: 18px; + height: 18px; + color: var(--primary-text-color-faint); + opacity: 0; + pointer-events: none; + + &.active { + pointer-events: auto; + opacity: 1; + } + } + .fa-search.active {pointer-events: none;} + + .fa-times-circle { + @include font-size(17); + cursor: pointer; + color: var(--highlight-text-color); + &:hover {color: var(--brand-color);} + } +} + +.search-results__header { + color: var(--primary-text-color); + background: var(--brand-color-med); + padding: 15px; + font-weight: 500; + font-size: 16px; + cursor: default; + + .fa { + display: inline-block; + margin-right: 5px; + } +} + +.search-results__section { + margin-bottom: 5px; + + h5 { + background: var(--brand-color-faint); + border-bottom: 1px solid var(--brand-color-faint); + cursor: default; + display: flex; + padding: 15px; + font-weight: 500; + font-size: 16px; + color: var(--primary-text-color); + + .fa { + display: inline-block; + margin-right: 5px; + } + } + + .account:last-child, + & > div:last-child .status { + border-bottom: 0; + } +} + +.search-results__hashtag { + display: block; + padding: 10px; + color: var(--primary-text-color-faint); + text-decoration: none; + + &:hover, + &:active, + &:focus { + color: var(--primary-text-color); + text-decoration: underline; + } +} + +.search-header { + display: block; + width: 100%; + + &__text-container { + display: none; + padding: 25px 0; + background-color: var(--brand-color-med); + + @media (min-width: 895px) { + display: block; + } + } + + &__title-text { + color: var(--primary-text-color); + font-size: 27px; + font-weight: bold; + line-height: 32px; + overflow: hidden; + padding-left: 20px; + text-overflow: ellipsis; + white-space: nowrap; + max-width: 1200px; + margin: 0 auto; + } + + &__type-filters-tabs { + display: flex; + width: 100%; + max-width: 1200px; + margin: 0 auto; + + @media screen and (max-width: 895px) { + max-width: 580px; + } + } + + @media (min-width: 895px) and (max-width: 1190px) { + &__title-text, + &__type-filters-tabs { + max-width: 900px; + } + } +} + +.search-popout-container { + width: 251px; + @media screen and (max-width: $nav-breakpoint-2) {width: 100%;} +} + +.search-popout { + @include search-popout; +} diff --git a/app/styles/components/setting-toggle.scss b/app/styles/components/setting-toggle.scss new file mode 100644 index 000000000..2c04e5fae --- /dev/null +++ b/app/styles/components/setting-toggle.scss @@ -0,0 +1,12 @@ +.setting-toggle { + display: block; + line-height: 24px; +} + +.setting-toggle__label { + color: var(--primary-text-color-faint); + display: inline-block; + margin-bottom: 14px; + margin-left: 8px; + vertical-align: middle; +} diff --git a/app/styles/components/spoiler-button.scss b/app/styles/components/spoiler-button.scss new file mode 100644 index 000000000..75427e536 --- /dev/null +++ b/app/styles/components/spoiler-button.scss @@ -0,0 +1,46 @@ +.spoiler-button { + top: 0; + left: 0; + width: 100%; + height: 100%; + position: absolute; + z-index: 100; + + &--minified { + display: block; + left: 4px; + top: 4px; + width: auto; + height: auto; + } + + &--hidden { + display: none; + } + + &__overlay { + display: block; + background: transparent; + width: 100%; + height: 100%; + border: 0; + + &__label { + display: inline-block; + background: rgba($base-overlay-background, 0.5); + border-radius: 8px; + padding: 8px 12px; + color: var(--primary-text-color); + font-weight: 500; + font-size: 14px; + } + + &:hover, + &:focus, + &:active { + .spoiler-button__overlay__label { + background: rgba($base-overlay-background, 0.8); + } + } + } +} diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss new file mode 100644 index 000000000..4c42c8c2b --- /dev/null +++ b/app/styles/components/status.scss @@ -0,0 +1,558 @@ +.status__content--with-action { + cursor: pointer; +} + +.status__content.status__content--collapsed { + max-height: 20px * 15; // 15 lines is roughly above 500 characters +} + +.status__content__read-more-button { + display: block; + font-size: 15px; + line-height: 20px; + color: var(--highlight-text-color); + border: 0; + background: transparent; + padding: 0; + padding-top: 8px; + + &:hover, + &:active { + text-decoration: underline; + } +} + +.status__content__spoiler-link { + display: inline-block; + border-radius: 2px; + background: transparent; + border: 0; + color: var(--primary-text-color); + font-weight: 700; + font-size: 11px; + padding: 0 6px; + text-transform: uppercase; + line-height: 20px; + cursor: pointer; + vertical-align: middle; +} + +.status__wrapper--filtered { + color: var(--primary-text-color); + border: 0; + font-size: inherit; + text-align: center; + line-height: inherit; + margin: 0; + padding: 15px; + box-sizing: border-box; + width: 100%; + clear: both; + border-bottom: 1px solid var(--brand-color-med); +} + +.status__prepend-icon-wrapper { + left: -26px; + position: absolute; +} + +.status { + padding: 8px 10px; + padding-left: 68px; + position: relative; + min-height: 54px; + border-bottom: 1px solid var(--brand-color-faint); + 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:not(.read) { + background: var(--brand-color-med); + border-bottom-color: var(--brand-color-med); + + .status__content a { + color: var(--brand-color-hicontrast); + } + } + + &.light { + .status__relative-time { + color: var(--primary-text-color-faint); + } + + .status__display-name { + color: var(--primary-text-color-faint); + } + + .display-name { + strong { + color: var(--primary-text-color); + } + + span { + color: var(--primary-text-color-faint); + } + } + + .status__content { + color: var(--primary-text-color); + + a { + color: var(--highlight-text-color); + } + + a.status__content__spoiler-link { + color: var(--primary-text-color); + background: var(--brand-color); + + &:hover { + background: var(--brand-color); + } + } + } + } + + &__meta { + font-size: 14px; + color: var(--primary-text-color-faint); + + a { + color: var(--brand-color); + font-weight: bold; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } + } +} + +.status__display-name { + color: var(--primary-text-color-faint); +} + +.status__info .status__display-name { + display: block; + max-width: 100%; + padding-right: 25px; +} + +.status__info { + font-size: 15px; + z-index: 4; +} + +.status-check-box { + border-bottom: 1px solid var(--background-color); + display: flex; + + .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: var(--primary-text-color); + padding: 8px 0; + padding-bottom: 2px; + font-size: 14px; + position: relative; + + .status__display-name strong { + color: var(--primary-text-color); + } + + > span { + display: block; + overflow: hidden; + text-overflow: ellipsis; + } +} + +.status__action-bar { + align-items: center; + display: flex; + margin-top: 25px; + z-index: 4; + + &__counter { + display: inline-flex; + margin-right: 22px; + align-items: center; + + .status__action-bar-button { + margin-right: 4px; + } + + &__label { + display: inline-block; + width: 14px; + font-size: 12px; + font-weight: 500; + color: var(--brand-color); + } + } +} + +.status__action-bar-button { + margin-right: 18px; +} + +.status__action-bar-dropdown { + height: 23.15px; + width: 23.15px; +} + +.status__avatar { + height: 48px; + left: 10px; + position: absolute; + top: 10px; + width: 48px; +} + +.status__expand { + width: 68px; + position: absolute; + left: 0; + top: 0; + height: 100%; + cursor: pointer; +} + +.status__content, +.reply-indicator__content { + position: relative; + font-size: 15px; + line-height: 20px; + word-wrap: break-word; + font-weight: 400; + overflow: hidden; + text-overflow: ellipsis; + padding-top: 2px; + color: var(--primary-text-color); + + &:focus { + outline: 0; + } + + &.status__content--with-spoiler { + white-space: normal; + + .status__content__text { + white-space: pre-wrap; + } + } + + .emojione { + width: 20px; + height: 20px; + margin: -3px 0 0; + } + + p { + margin-bottom: 20px; + white-space: pre-wrap; + + &:last-child { + margin-bottom: 2px; + } + } + + a { + color: var(--highlight-text-color); + text-decoration: none; + + &:hover { + text-decoration: underline; + + .fa { + color: var(--primary-text-color); + } + } + + &.mention { + &:hover { + text-decoration: none; + + span { + text-decoration: underline; + } + } + } + + .fa { + color: var(--primary-text-color); + } + } + + .status__content__spoiler-link { + background: var(--brand-color-med); + transition: 0.2s; + + &:hover { + background: rgba(var(--brand-color-rgb), 0.5); + text-decoration: none; + } + + &::-moz-focus-inner { + border: 0; + } + + &::-moz-focus-inner, + &:focus, + &:active { + outline: 0 !important; + } + } + + .status__content__text { + display: none; + + &.status__content__text--visible { + display: block; + } + } +} + +.focusable { + &:focus { + outline: 0; + background: var(--brand-color-faint); + + .status.status-direct { + background: var(--brand-color-med); + + &.muted { + background: transparent; + } + } + + .detailed-status, + .detailed-status__action-bar { + background: var(--brand-color-med); + } + } +} + +.status-card { + display: flex; + font-size: 14px; + border: 1px solid var(--brand-color-med); + border-radius: 4px; + color: var(--primary-text-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: 8px; + padding: 12px 9px; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + } + + button, + a { + display: inline; + color: var(--primary-text-color-faint); + background: transparent; + border: 0; + padding: 0 8px; + text-decoration: none; + font-size: 18px; + line-height: 18px; + + &:hover, + &:active, + &:focus { + color: var(--primary-text-color); + } + } + + a { + font-size: 19px; + position: relative; + bottom: -1px; + } + } +} + +a.status-card { + cursor: pointer; + + &:hover { + background: var(--brand-color-med); + } +} + +.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: var(--primary-text-color-faint); + 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: var(--primary-text-color-faint); +} + +.status-card__host { + display: block; + margin-top: 5px; + font-size: 13px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.status-card__image { + flex: 0 0 100px; + background: var(--brand-color-med); + position: relative; + + & > .fa { + font-size: 21px; + position: absolute; + transform-origin: 50% 50%; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } +} + +.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.compact { + border-color: var(--brand-color-faint); + + &.interactive { + border: 0; + } + + .status-card__content { + padding: 8px; + padding-top: 10px; + } + + .status-card__title { + white-space: nowrap; + } + + .status-card__image { + flex: 0 0 60px; + } +} + +a.status-card.compact:hover { + background-color: var(--brand-color-faint); +} + +.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; +} diff --git a/app/styles/components/timeline-queue-header.scss b/app/styles/components/timeline-queue-header.scss new file mode 100644 index 000000000..de71d4529 --- /dev/null +++ b/app/styles/components/timeline-queue-header.scss @@ -0,0 +1,32 @@ +.timeline-queue-header { + display: block; + width: 100%; + max-height: 46px; + position: relative; + border-bottom: 1px solid; + border-top: 1px solid; + border-color: var(--brand-color-faint); + transition: max-height 150ms ease; + overflow: hidden; + opacity: 1; + + &.hidden { + max-height: 0; + opacity: 0; + } + + &__btn { + display: block; + width: 100%; + height: 100%; + text-align: center; + line-height: 46px; + font-size: 14px; + cursor: pointer; + color: var(--primary-text-color); + + span { + height: 46px; + } + } +} diff --git a/app/styles/components/trends.scss b/app/styles/components/trends.scss new file mode 100644 index 000000000..88abcf5bc --- /dev/null +++ b/app/styles/components/trends.scss @@ -0,0 +1,78 @@ +.trends { + &__header { + color: var(--primary-text-color); + background: var(--brand-color-faint); + border-bottom: 1px solid var(--brand-color-med); + font-weight: 500; + padding: 15px; + font-size: 16px; + cursor: default; + + .fa { + display: inline-block; + margin-right: 5px; + } + } + + &__item { + display: flex; + align-items: center; + padding: 15px; + border-bottom: 1px solid var(--brand-color-med); + + &:last-child { + border-bottom: 0; + } + + &__name { + flex: 1 1 auto; + color: var(--primary-text-color); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 13px; + + strong { + font-weight: bold; + } + + a { + color: var(--primary-text-color-faint); + text-decoration: none; + font-size: 14px; + font-weight: 500; + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + + &:hover, + &:focus, + &:active { + span { + text-decoration: underline; + } + } + } + } + + &__current { + flex: 0 0 auto; + width: 100px; + font-size: 24px; + line-height: 36px; + font-weight: 500; + text-align: center; + color: var(--primary-text-color-faint); + } + + &__sparkline { + flex: 0 0 auto; + width: 50px; + + path { + stroke: var(--highlight-text-color) !important; + } + } + } +} diff --git a/app/styles/components/video-player.scss b/app/styles/components/video-player.scss new file mode 100644 index 000000000..eb2d7090e --- /dev/null +++ b/app/styles/components/video-player.scss @@ -0,0 +1,388 @@ +.video-error-cover { + align-items: center; + background: var(--background-color); + color: var(--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; +} + +.status__video-player { + background: var(--background-color); + 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: var(--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: var(--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; +} + +.detailed, +.fullscreen { + .video-player__volume__current, + .video-player__volume::before { + bottom: 27px; + } + + .video-player__volume__handle { + bottom: 23px; + } + +} + +.video-player { + overflow: hidden; + position: relative; + background: $base-shadow-color; + max-width: 100%; + border-radius: 4px; + + &:focus { + outline: 0; + } + + video { + max-width: 100vw; + max-height: 80vh; + min-height: 120px; + object-fit: contain; + z-index: 1; + } + + &.fullscreen { + width: 100% !important; + height: 100% !important; + margin: 0; + + video { + max-width: 100% !important; + max-height: 100% !important; + width: 100% !important; + height: 100% !important; + } + } + + &.inline { + video { + object-fit: contain; + position: relative; + } + } + + &__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: var(--background-color); + color: var(--primary-text-color-faint); + transition: none; + pointer-events: none; + + &.active { + display: block; + pointer-events: auto; + + &:hover, + &:active, + &:focus { + color: var(--primary-text-color); + } + } + + &__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(#ffffff, 0.75); + + &:active, + &:hover, + &:focus { + color: #ffffff; + } + } + } + + &__time-sep, + &__time-total, + &__time-current { + font-size: 14px; + font-weight: 500; + } + + &__time-current { + color: #ffffff; + margin-left: 60px; + } + + &__time-sep { + display: inline-block; + margin: 0 6px; + } + + &__time-sep, + &__time-total { + color: #ffffff; + } + + &__volume { + cursor: pointer; + height: 24px; + display: inline; + + &::before { + content: ""; + width: 50px; + background: rgba(#ffffff, 0.35); + border-radius: 4px; + display: block; + position: absolute; + height: 4px; + left: 70px; + bottom: 20px; + } + + &__current { + display: block; + position: absolute; + height: 4px; + border-radius: 4px; + left: 70px; + bottom: 20px; + background: var(--brand-color); + } + + &__handle { + position: absolute; + z-index: 3; + border-radius: 50%; + width: 12px; + height: 12px; + bottom: 16px; + left: 70px; + transition: opacity .1s ease; + background: var(--brand-color); + box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); + pointer-events: none; + } + } + + &__link { + padding: 2px 10px; + + a { + text-decoration: none; + font-size: 14px; + font-weight: 500; + color: #ffffff; + + &:hover, + &:active, + &:focus { + text-decoration: underline; + } + } + } + + &__seek { + cursor: pointer; + height: 24px; + position: relative; + + &::before { + content: ""; + width: 100%; + background: rgba(#ffffff, 0.35); + border-radius: 4px; + display: block; + position: absolute; + height: 4px; + top: 10px; + } + + &__progress, + &__buffer { + display: block; + position: absolute; + height: 4px; + border-radius: 4px; + top: 10px; + background: var(--brand-color); + } + + &__buffer { + background: rgba(#ffffff, 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: var(--brand-color); + 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: var(--primary-text-color-faint); + font-size: 36px; + left: 50%; + padding: 5px; + position: absolute; + top: 50%; + transform: translate(-50%, -50%); +} diff --git a/app/styles/components/wtf-panel.scss b/app/styles/components/wtf-panel.scss new file mode 100644 index 000000000..79674c1d8 --- /dev/null +++ b/app/styles/components/wtf-panel.scss @@ -0,0 +1,128 @@ +.wtf-panel { + @include standard-panel-shadow; + display: flex; + width: 100%; + border-radius: 10px; + flex-direction: column; + height: auto; + box-sizing: border-box; + background: var(--foreground-color); + + &:not(:last-of-type) { + margin-bottom: 10px; + } + + .wtf-panel-header { + display: flex; + align-items: baseline; + margin-bottom: 10px; + padding: 15px 15px 0; + + &__icon { + margin-right: 10px; + } + + &__label { + flex: 1 1; + color: var(--primary-text-color); + font-size: 16px; + font-weight: bold; + line-height: 19px; + } + } + + &__content { + width: 100%; + padding-top: 8px; + } + + &__list { + padding: 0 5px; + } + + &__subtitle { + display: block; + padding: 0 15px; + color: var(--primary-text-color-faint); + } + + &__form { + display: block; + padding: 15px; + + &.button { + width: 100%; + } + } + + .wtf-panel-list-item { + display: block; + padding-bottom: 10px; + + &:not(:first-of-type) { + margin-top: 12px; + } + + &:not(:last-of-type) { + border-bottom: 1px solid var(--brand-color-med); + } + + &__content { + display: flex; + flex-direction: row; + min-height: 46px; + margin-left: 58px; + } + + &__account-block { + display: flex; + position: relative; + align-items: baseline; + padding-right: 10px; + + &__avatar { + height: 46px; + width: 46px; + background-color: #ff0000; + left: -58px; + position: absolute; + } + + &__name { + display: flex; + flex-wrap: wrap; + flex-direction: column; + margin-top: 6px; + + &__name { + color: var(--primary-text-color); + font-size: 14px; + font-weight: bold; + line-height: 16px; + margin-bottom: 2px; + max-height: 32px; //2 lines of text + overflow: hidden; + } + + &__username { + color: var(--highlight-text-color); + font-size: 12px; + line-height: 14px; + } + } + } + + &__follow-block { + margin-left: auto; + padding-top: 6px; + + &__button { + display: flex; + } + + &__icon { + color: var(--primary-text-color); + } + } + } +} diff --git a/app/styles/emoji_picker.scss b/app/styles/emoji_picker.scss index 474766a66..b8697002d 100644 --- a/app/styles/emoji_picker.scss +++ b/app/styles/emoji_picker.scss @@ -200,3 +200,61 @@ .emoji-mart-preview { display: none; } + +.emoji-picker-dropdown__menu { + @include standard-panel; + background: var(--foreground-color); + position: absolute; + margin-top: 5px; + z-index: 20000; + + .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: var(--foreground-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(var(--background-color-rgb), 0.4); + } + } + + .emoji-mart-emoji { + height: 22px; + } +} + +.emoji-mart-emoji { + span { + background-repeat: no-repeat; + } +} diff --git a/app/styles/loading.scss b/app/styles/loading.scss new file mode 100644 index 000000000..9d61770e4 --- /dev/null +++ b/app/styles/loading.scss @@ -0,0 +1,210 @@ +.loading-indicator { + color: var(--primary-text-color-faint); + 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; + } +} + +.loading-indicator__figure { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 42px; + height: 42px; + box-sizing: border-box; + background-color: transparent; + border: 0 solid rgba(var(--brand-color-rgb), 0.5); + border-width: 6px; + border-radius: 50%; +} + +.no-reduce-motion .loading-indicator span { + animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1); +} + +.no-reduce-motion .loading-indicator__figure { + animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1); +} + +@keyframes loader-figure { + 0% { + width: 0; + height: 0; + background-color: rgba(var(--brand-color-rgb), 0.5); + } + + 29% { + background-color: rgba(var(--brand-color-rgb), 0.5); + } + + 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; } +} + +@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.03, 0.515, 0.955) 2s 2 both; +} + +.loading-bar { + background-color: var(--highlight-text-color); + height: 3px; + position: absolute; + top: 0; + left: 0; +} + +.load-more { + display: block; + color: var(--primary-text-color); + background-color: transparent; + border: 0; + font-size: inherit; + text-align: center; + line-height: inherit; + margin: 0; + padding: 15px; + box-sizing: border-box; + width: 100%; + clear: both; + text-decoration: none; + + &:hover { + background: var(--brand-color-faint); + } +} + +.load-gap { + border-bottom: 1px solid var(--brand-color-med); +} + +.regeneration-indicator { + text-align: center; + font-size: 16px; + font-weight: 500; + color: var(--primary-text-color); + background: var(--brand-color-med); + cursor: default; + display: flex; + flex: 1 1 auto; + align-items: center; + justify-content: center; + padding: 20px; + + & > div { + width: 100%; + background: transparent; + padding-top: 0; + } + + &__label { + strong { + display: block; + margin-bottom: 10px; + color: var(--primary-text-color); + } + + span { + font-size: 15px; + font-weight: 400; + } + } +} diff --git a/app/styles/modal.scss b/app/styles/modal.scss deleted file mode 100644 index edfc214c2..000000000 --- a/app/styles/modal.scss +++ /dev/null @@ -1,13 +0,0 @@ -.modal-layout { - background: var(--background-color) url('data:image/svg+xml;utf8,') repeat-x bottom fixed; - display: flex; - flex-direction: column; - height: 100vh; - padding: 0; -} - -@media screen and (max-width: 600px) { - .account-header { - margin-top: 0; - } -} diff --git a/app/styles/ui.scss b/app/styles/ui.scss new file mode 100644 index 000000000..b70154d5e --- /dev/null +++ b/app/styles/ui.scss @@ -0,0 +1,749 @@ +.icon-button { + display: inline-block; + padding: 0; + color: rgba(var(--primary-text-color-rgb), 0.4); + border: 0; + background: transparent; + cursor: pointer; + transition: color 100ms ease-in; + + i.fa { + margin: 0; + } + + &:hover, + &:active, + &:focus { + color: rgba(var(--primary-text-color-rgb), 0.6); + transition: color 200ms ease-out; + } + + &.disabled { + color: rgba(var(--primary-text-color-rgb), 0.2); + cursor: default; + } + + &.active { + color: var(--highlight-text-color); + } + + &::-moz-focus-inner { + border: 0; + } + + &::-moz-focus-inner, + &:focus, + &:active { + outline: 0 !important; + } + + &.inverted { + color: var(--primary-text-color-faint); + + &:hover, + &:active, + &:focus { + color: var(--primary-text-color-faint); + } + + &.disabled { + color: var(--primary-text-color-faint); + } + + &.active { + color: var(--highlight-text-color); + + &.disabled { + color: var(--highlight-text-color); + } + } + } + + &.overlayed { + box-sizing: content-box; + background: var(--foreground-color); + color: var(--primary-text-color-faint); + border-radius: 4px; + padding: 2px; + + &:hover { + background: var(--background-color); + } + } +} + +.text-icon-button { + color: var(--primary-text-color-faint); + border: 0; + background: transparent; + cursor: pointer; + font-weight: 600; + font-size: 11px; + padding: 0 3px; + line-height: 27px; + outline: 0; + transition: color 100ms ease-in; + + &:hover, + &:active, + &:focus { + color: var(--primary-text-color-faint); + transition: color 200ms ease-out; + } + + &.disabled { + color: var(--primary-text-color-faint); + cursor: default; + } + + &.active { + color: var(--highlight-text-color); + } + + &::-moz-focus-inner { + border: 0; + } + + &::-moz-focus-inner, + &:focus, + &:active { + outline: 0 !important; + } +} + +.invisible { + font-size: 0 !important; + line-height: 0 !important; + 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: "…";} + +.timeline-compose-block { + @include standard-panel; + display: flex; + align-items: flex-start; + padding: 20px; + margin-bottom: 20px; + + .emoji-picker-wrapper { + .emoji-picker-dropdown {top: 10px;} + } + + .compose-form { + flex: 1 1; + padding: 0 0 0 20px !important; + position: relative; + + @media(max-width: 405px) { + padding: 0 !important; + } + + .compose-form__autosuggest-wrapper { + &::before { + content: ""; + display: block; + position: absolute; + height: 0; + width: 0; + border-top: 11px solid transparent; + border-right: 12px solid var(--background-color); + border-bottom: 11px solid transparent; + border-left: 11px solid transparent; + left: -22px; + top: 13px; + } + + .autosuggest-textarea__textarea { + padding: 14px 32px 13px 10px !important; + } + } + } + + &__avatar { + @media(max-width: 405px) { display: none; } + } +} + +.no-reduce-motion .spoiler-input { + transition: height 0.4s ease, opacity 0.4s ease; +} + +.emojione { + font-size: inherit; + vertical-align: middle; + object-fit: contain; + margin: -.2ex .15em .2ex; + width: 16px; + height: 16px; + + img { + width: auto; + } +} + +.status__relative-time, +.notification__relative_time { + color: var(--primary-text-color-faint); + float: right; + font-size: 14px; +} + +.domain { + padding: 10px; + border-bottom: 1px solid var(--brand-color-med); + + .domain__domain-name { + flex: 1 1 auto; + display: block; + color: var(--primary-text-color); + text-decoration: none; + font-size: 14px; + font-weight: 500; + } +} + +.domain__wrapper { + display: flex; +} + +.domain_buttons { + height: 18px; + padding: 10px; + white-space: nowrap; +} + +.muted { + .status__content p, + .status__content a { + color: var(--primary-text-color); + } + + .status__display-name strong { + color: var(--primary-text-color); + } + + .status__avatar { + opacity: 0.5; + } + + a.status__content__spoiler-link { + background: var(--brand-color-med); + color: var(--primary-text-color); + + &:hover { + background: var(--brand-color-faint); + text-decoration: none; + } + } +} + +.star-icon.active { + color: $gold-star; +} + +.status__relative-time, +.detailed-status__datetime { + &:hover { + text-decoration: underline; + } +} + +.image-loader { + position: relative; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + + .image-loader__preview-canvas { + max-width: $media-modal-media-max-width; + max-height: $media-modal-media-max-height; + background: url('../images/void.png') repeat; + object-fit: contain; + } + + .loading-bar { + position: relative; + } + + &.image-loader--amorphous .image-loader__preview-canvas { + display: none; + } +} + +.zoomable-image { + position: relative; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + + img { + max-width: $media-modal-media-max-width; + max-height: $media-modal-media-max-height; + width: auto; + height: auto; + object-fit: contain; + box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.5); + } +} + +.react-swipeable-view-container { + &, + .columns-area, + .drawer, + .column { + height: 100%; + } +} + +.react-swipeable-view-container > * { + display: flex; + align-items: center; + justify-content: center; + height: 100%; +} + +.ui { + display: block; + width: 100%; + padding: 0 0 100px; + + .page { + display: flex; + flex-direction: column; + width: 100%; + + &__top { + display: flex; + width: 100%; + height: auto; + z-index: 105; + background: var(--foreground-color); + + @media (min-width: 895px) { + top: -290px; + position: sticky; + } + } + + &__columns { + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + } + } +} + +.floating-action-button { + z-index: 1000; + display: none; + position: fixed; + bottom: 14px; + right: 14px; + width: 61px; + height: 61px; + background-color: var(--brand-color); + border: 0; + border-radius: 999px; + box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.5); + font-size: 30px; + align-items: center; + justify-content: center; + transition: 0.2s; + + @media screen and (max-width: 895px) { + display: flex; + } + + &:hover, + &:focus, + &:active { + background-color: var(--brand-color-hicontrast); + } + + i.fa { + display: flex; + align-items: center; + justify-content: center; + color: #fff; + margin: 0; + } +} + +@media screen and (min-width: 360px) { + .getting-started__wrapper, + .getting-started__trends { + margin-bottom: 10px; + } +} + +.icon-with-badge { + position: relative; + height: 100%; + + &__badge { + @include font-montserrat; + @include font-size(14); + @include line-height(14); + position: absolute; + box-sizing: border-box; + left: -10px; + top: 3px; + min-width: 16px; + height: 16px; + padding: 1px 3px 0; + border-radius: 8px; + text-align: center; + color: #fff; + background: var(--brand-color); + + @media screen and (max-width: 895px) { + top: 0; + } + } +} + +.slist { + &--flex { + display: flex; + flex-direction: column; + } + + &__append { + flex: 1 1 auto; + position: relative; + min-height: 120px; + } +} + +.setting-text { + color: var(--primary-text-color-faint); + background: transparent; + border: 0; + border-bottom: 2px solid var(--brand-color); + box-sizing: border-box; + display: block; + font-family: inherit; + margin-bottom: 10px; + padding: 7px 0; + width: 100%; + + &:focus, + &:active { + color: var(--primary-text-color); + border-bottom-color: var(--highlight-text-color); + } + + @media screen and (max-width: 600px) { + font-size: 16px; + } +} + +.morefollows-indicator { + text-align: center; + font-size: 16px; + font-weight: 500; + color: var(--primary-text-color); + background: var(--brand-color-med); + cursor: default; + display: flex; + flex: 1 1 auto; + align-items: center; + justify-content: center; + padding: 20px; + + & > div { + width: 100%; + background: transparent; + padding-top: 0; + } + + &__label { + strong { + display: block; + margin-bottom: 10px; + color: var(--primary-text-color); + } + } +} + +.text-btn { + display: inline-block; + padding: 0; + font-family: inherit; + font-size: inherit; + color: inherit; + border: 0; + background: transparent; + cursor: pointer; +} + +.account--panel__button, +.detailed-status__button { + flex: 1 1 auto; + text-align: center; +} + +.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; +} + +.attachment-list { + display: flex; + font-size: 14px; + border: 1px solid var(--brand-color-med); + border-radius: 4px; + margin-top: 14px; + overflow: hidden; + + &__icon { + flex: 0 0 auto; + color: var(--primary-text-color); + padding: 8px 18px; + cursor: default; + border-right: 1px solid var(--brand-color-med); + 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: var(--primary-text-color); + font-weight: 500; + + &:hover { + text-decoration: underline; + } + } + } + + &.compact { + border: 0; + margin-top: 4px; + + .attachment-list__list { + padding: 0; + display: block; + } + + .fa { + color: var(--primary-text-color); + } + } +} + +.notification__filter-bar, +.account__section-headline { + border-bottom: 1px solid var(--brand-color-faint); + cursor: default; + display: flex; + flex-shrink: 0; + + button { + border: 0; + margin: 0; + } + + button, + a { + display: block; + flex: 1 1 auto; + color: var(--primary-text-color-faint); + padding: 15px 0; + font-size: 14px; + font-weight: 500; + text-align: center; + text-decoration: none; + position: relative; + background: transparent; + + &.active { + color: var(--primary-text-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 var(--brand-color-faint); + } + + &::after { + bottom: -1px; + } + } + } +} + +::-webkit-scrollbar-thumb { + border-radius: 0; +} + +@keyframes flicker { + 0% { opacity: 1; } + 30% { opacity: 0.75; } + 100% { opacity: 1; } +} + +.layout-toggle { + display: flex; + padding: 5px; + + button { + box-sizing: border-box; + flex: 0 0 50%; + background: transparent; + padding: 5px; + border: 0; + position: relative; + + &:hover, + &:focus, + &:active { + svg path:first-child { + fill: var(--background-color); + } + } + } + + svg { + width: 100%; + height: auto; + + path:first-child { + fill: var(--brand-color-med); + } + + path:last-child { + fill: var(--background-color); + } + } + + &__active { + color: var(--brand-color); + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background: var(--brand-color-med); + border-radius: 50%; + padding: 0.35rem; + } +} + +.verified-icon { + display: inline-block; + margin: 0 4px 0 1px; + vertical-align: top; + position: relative; + width: 15px; + height: 15px; + + &::before { + display: block; + content: ""; + position: absolute; + background-color: #00a3ed; + top: 0; + right: 0; + left: 0; + bottom: 0; + border-radius: 50%; + } + + &::after { + display: block; + position: absolute; + content: '\f00c'; + font: normal normal normal 14px/1 FontAwesome; + font-size: inherit; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + color: #fff; + font-size: 0.6em; + line-height: 15px; + width: 15px; + height: 15px; + text-align: center; + } +}