From 9e7150c6fa3f4edca1327db3855e3969be83f1d6 Mon Sep 17 00:00:00 2001 From: ncls7615 Date: Sun, 14 Jan 2018 03:41:20 +0900 Subject: [PATCH 01/12] Initial scss refactor --- .../features/ui/components/video_modal.js | 1 + .../flavours/glitch/features/video/index.js | 65 +- .../flavours/glitch/styles/about.scss | 11 +- .../flavours/glitch/styles/accounts.scss | 85 +- .../flavours/glitch/styles/admin.scss | 18 + .../glitch/styles/components/composer.scss | 15 +- .../styles/components/emoji_picker.scss | 5 + .../glitch/styles/components/glitch.scss | 656 ++++++++ .../glitch/styles/components/index.scss | 1367 ++++++++++------- .../glitch/styles/components/metadata.scss | 52 + .../flavours/glitch/styles/forms.scss | 30 + .../flavours/glitch/styles/index.scss | 1 + .../flavours/glitch/styles/landing_strip.scss | 75 + .../flavours/glitch/styles/metadata.scss | 43 + .../flavours/glitch/styles/modal.scss | 20 + .../flavours/glitch/styles/rtl.scss | 2 +- .../glitch/styles/stream_entries.scss | 27 +- .../flavours/glitch/styles/tables.scss | 6 + .../flavours/glitch/styles/variables.scss | 3 + 19 files changed, 1865 insertions(+), 617 deletions(-) create mode 100644 app/javascript/flavours/glitch/styles/components/glitch.scss create mode 100644 app/javascript/flavours/glitch/styles/components/metadata.scss create mode 100644 app/javascript/flavours/glitch/styles/metadata.scss create mode 100644 app/javascript/flavours/glitch/styles/modal.scss diff --git a/app/javascript/flavours/glitch/features/ui/components/video_modal.js b/app/javascript/flavours/glitch/features/ui/components/video_modal.js index 22fa998fb3..4412fd0f79 100644 --- a/app/javascript/flavours/glitch/features/ui/components/video_modal.js +++ b/app/javascript/flavours/glitch/features/ui/components/video_modal.js @@ -23,6 +23,7 @@ export default class VideoModal extends ImmutablePureComponent { src={media.get('url')} startTime={time} onCloseVideo={onClose} + detailed description={media.get('description')} /> diff --git a/app/javascript/flavours/glitch/features/video/index.js b/app/javascript/flavours/glitch/features/video/index.js index 97c1c27fab..7c75b271a1 100644 --- a/app/javascript/flavours/glitch/features/video/index.js +++ b/app/javascript/flavours/glitch/features/video/index.js @@ -17,6 +17,17 @@ const messages = defineMessages({ exit_fullscreen: { id: 'video.exit_fullscreen', defaultMessage: 'Exit full screen' }, }); +const formatTime = secondsNum => { + let hours = Math.floor(secondsNum / 3600); + let minutes = Math.floor((secondsNum - (hours * 3600)) / 60); + let seconds = secondsNum - (hours * 3600) - (minutes * 60); + + if (hours < 10) hours = '0' + hours; + if (minutes < 10) minutes = '0' + minutes; + if (seconds < 10) seconds = '0' + seconds; + return (hours === '00' ? '' : `${hours}:`) + `${minutes}:${seconds}`; +}; + const findElementPosition = el => { let box; @@ -85,11 +96,13 @@ export default class Video extends React.PureComponent { onCloseVideo: PropTypes.func, letterbox: PropTypes.bool, fullwidth: PropTypes.bool, + detailed: PropTypes.bool, intl: PropTypes.object.isRequired, }; state = { - progress: 0, + currentTime: 0, + duration: 0, paused: true, dragging: false, fullscreen: false, @@ -119,7 +132,10 @@ export default class Video extends React.PureComponent { } handleTimeUpdate = () => { - this.setState({ progress: 100 * (this.video.currentTime / this.video.duration) }); + this.setState({ + currentTime: Math.floor(this.video.currentTime), + duration: Math.floor(this.video.duration), + }); } handleMouseDown = e => { @@ -145,8 +161,10 @@ export default class Video extends React.PureComponent { handleMouseMove = throttle(e => { const { x } = getPointerPosition(this.seek, e); - this.video.currentTime = this.video.duration * x; - this.setState({ progress: x * 100 }); + const currentTime = Math.floor(this.video.duration * x); + + this.video.currentTime = currentTime; + this.setState({ currentTime }); }, 60); togglePlay = () => { @@ -228,11 +246,12 @@ export default class Video extends React.PureComponent { } render () { - const { preview, src, width, height, startTime, onOpenVideo, onCloseVideo, intl, alt, letterbox, fullwidth } = this.props; - const { progress, buffer, dragging, paused, fullscreen, hovered, muted, revealed } = this.state; + const { preview, src, width, height, startTime, onOpenVideo, onCloseVideo, intl, alt, letterbox, fullwidth, detailed } = this.props; + const { currentTime, duration, buffer, dragging, paused, fullscreen, hovered, muted, revealed } = this.state; + const progress = (currentTime / duration) * 100; return ( -
+
-
- - - {!onCloseVideo && } -
- -
- {(!fullscreen && onOpenVideo) && } - {onCloseVideo && } - +
+
+ + + + {!onCloseVideo && } + + {(detailed || fullscreen) && + + {formatTime(currentTime)} + / + {formatTime(duration)} + + } +
+ +
+ {(!fullscreen && onOpenVideo) && } + {onCloseVideo && } + +
); } - } diff --git a/app/javascript/flavours/glitch/styles/about.scss b/app/javascript/flavours/glitch/styles/about.scss index 4ec6894279..31c079cc57 100644 --- a/app/javascript/flavours/glitch/styles/about.scss +++ b/app/javascript/flavours/glitch/styles/about.scss @@ -19,7 +19,7 @@ display: inline; margin: 0; padding: 0; - font-weight: 500; + font-weight: 700; background: transparent; font-family: inherit; font-size: inherit; @@ -424,14 +424,19 @@ text-align: center; .avatar { - @include avatar-size(80px); + width: 80px; + height: 80px; margin: 0 auto; margin-bottom: 15px; + @include avatar-size(80px); img { + display: block; + width: 80px; + height: 80px; + border-radius: 48px; @include avatar-radius(); @include avatar-size(80px); - display: block; } } diff --git a/app/javascript/flavours/glitch/styles/accounts.scss b/app/javascript/flavours/glitch/styles/accounts.scss index 2cf98c642c..497ee9ba64 100644 --- a/app/javascript/flavours/glitch/styles/accounts.scss +++ b/app/javascript/flavours/glitch/styles/accounts.scss @@ -68,7 +68,7 @@ font-weight: 500; position: relative; z-index: 2; - margin-bottom: 30px; + margin-bottom: 15px; overflow: hidden; text-overflow: ellipsis; @@ -83,16 +83,20 @@ } .avatar { - @include avatar-size(120px); + width: 120px; margin: 0 auto; position: relative; z-index: 2; + @include avatar-size(120px); img { - @include avatar-radius(); - @include avatar-size(120px); + width: 120px; + height: 120px; display: block; + border-radius: 120px; box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); + @include avatar-radius(); + @include avatar-size(120px); } } @@ -123,7 +127,7 @@ } .roles { - margin-bottom: 30px; + margin-bottom: 15px; padding: 0 15px; } @@ -203,53 +207,10 @@ font-size: 14px; line-height: 18px; padding: 0 15px; + text-align: center; color: $ui-secondary-color; } - .metadata { - $meta-table-border: darken($classic-highlight-color, 20%);//#174f77; - - border-collapse: collapse; - padding: 0; - margin: 15px -15px -10px -15px; - border: 0 none; - border-top: 1px solid $meta-table-border; - border-bottom: 1px solid $meta-table-border; - - td, th { - padding: 10px; - border: 0 none; - border-bottom: 1px solid $meta-table-border; - vertical-align: middle; - } - - tr:last-child { - td, th { - border-bottom: 0 none; - } - } - - td { - color: $ui-primary-color; - width:100%; // makes it stretch - padding-left: 0; - } - - th { - padding-left: 15px; - font-weight: bold; - text-align: left; - width: 94px; - color: $ui-secondary-color; - background: darken($ui-base-color, 8%); - //background: #131415; - } - - a { - color: $classic-highlight-color; - } - } - @media screen and (max-width: 480px) { display: block; @@ -260,7 +221,7 @@ .name, .roles { text-align: center; - margin-bottom: 15px; + margin-bottom: 5px; } .bio { @@ -407,14 +368,19 @@ } .avatar { + width: 80px; + height: 80px; @include avatar-size(80px); img { display: block; - @include avatar-radius(); - @include avatar-size(80px); + width: 80px; + height: 80px; + border-radius: 80px; border: 2px solid $simple-background-color; background: $simple-background-color; + @include avatar-radius(); + @include avatar-size(80px); } } @@ -492,14 +458,17 @@ } & > div { - @include avatar-size(48px); float: left; margin-right: 10px; + width: 48px; + height: 48px; + @include avatar-size(48px); } .avatar { - @include avatar-radius(); display: block; + border-radius: 4px; + @include avatar-radius(); } .display-name { @@ -513,6 +482,12 @@ strong { font-weight: 500; color: $ui-base-color; + + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + font-weight: 700; + } + } } span { @@ -587,3 +562,5 @@ border-color: rgba(lighten($error-red, 12%), 0.5); } } + +@import 'metadata'; diff --git a/app/javascript/flavours/glitch/styles/admin.scss b/app/javascript/flavours/glitch/styles/admin.scss index bdfa508147..f9245e1346 100644 --- a/app/javascript/flavours/glitch/styles/admin.scss +++ b/app/javascript/flavours/glitch/styles/admin.scss @@ -121,6 +121,12 @@ strong { color: $primary-text-color; font-weight: 500; + + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + font-weight: 700; + } + } } } @@ -222,6 +228,12 @@ font-weight: 500; text-transform: uppercase; font-size: 12px; + + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + font-weight: 700; + } + } } a { @@ -281,6 +293,12 @@ font-size: 14px; line-height: 18px; color: $ui-secondary-color; + + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + font-weight: 700; + } + } } .account-card { diff --git a/app/javascript/flavours/glitch/styles/components/composer.scss b/app/javascript/flavours/glitch/styles/components/composer.scss index 52d9ed1055..7112400f41 100644 --- a/app/javascript/flavours/glitch/styles/components/composer.scss +++ b/app/javascript/flavours/glitch/styles/components/composer.scss @@ -1,4 +1,6 @@ -.composer { padding: 10px } +.composer { + padding: 10px; +} .composer--spoiler { input { @@ -102,6 +104,17 @@ } } +.emoji-picker-dropdown { + position: absolute; + right: 5px; + top: 5px; + + ::-webkit-scrollbar-track:hover, + ::-webkit-scrollbar-track:active { + background-color: rgba($base-overlay-background, 0.3); + } +} + .composer--textarea { position: relative; diff --git a/app/javascript/flavours/glitch/styles/components/emoji_picker.scss b/app/javascript/flavours/glitch/styles/components/emoji_picker.scss index 2b46d30fce..4161cc0456 100644 --- a/app/javascript/flavours/glitch/styles/components/emoji_picker.scss +++ b/app/javascript/flavours/glitch/styles/components/emoji_picker.scss @@ -95,6 +95,11 @@ padding: 0 6px 6px; background: $simple-background-color; will-change: transform; + + &::-webkit-scrollbar-track:hover, + &::-webkit-scrollbar-track:active { + background-color: rgba($base-overlay-background, 0.3); + } } .emoji-mart-search { diff --git a/app/javascript/flavours/glitch/styles/components/glitch.scss b/app/javascript/flavours/glitch/styles/components/glitch.scss new file mode 100644 index 0000000000..cad93821ec --- /dev/null +++ b/app/javascript/flavours/glitch/styles/components/glitch.scss @@ -0,0 +1,656 @@ +.status__content { + //reset + overflow: initial; + padding-top: inherit; + //glitch + position: relative; + margin: 10px 0; + padding: 0 12px; + font-size: 15px; + line-height: 20px; + color: $primary-text-color; + word-wrap: break-word; + font-weight: 400; + overflow: visible; + white-space: pre-wrap; + padding-top: 5px; +} + +.status-check-box { + .status__content { + color: #3a3a3a; + a { + color: #005aa9; + } + } +} + +.status__content__spoiler { + background: lighten($ui-base-color, 30%); + + &:hover { + background: lighten($ui-base-color, 33%); + text-decoration: none; + } +} + +.status__content__text { + display: none; + + &.status__content__spoiler--visible { + display: block; + } +} + +.status__content__spoiler-link { + //reset + background: initial; + border: initial; + padding: initial; + //glitch + background: lighten($ui-base-color, 30%); + border: none; + padding: 0 5px; + vertical-align: bottom; + + &:hover { + background: lighten($ui-base-color, 33%); + text-decoration: none; + } + + .status__content__spoiler-icon { + display: inline-block; + margin: 0 0 0 5px; + border-left: 1px solid currentColor; + padding: 0 0 0 4px; + font-size: 16px; + vertical-align: -2px; + } +} + +.status__prepend-icon-wrapper { + //reset + left: initial; + position: initial; + //glitch + float: left; + margin: 0 10px 0 -58px; + width: 48px; + text-align: right; +} + +.notif-cleaning { + .status, .notification-follow { + padding-right: ($dismiss-overlay-width + 0.5rem); + } +} + +.notification-follow { + position: relative; + + // same like Status + border-bottom: 1px solid lighten($ui-base-color, 8%); + + .account { + border-bottom: 0 none; + } +} + +.status { + //reset + padding-left: initial; + //glitch + padding: 8px 10px; + position: relative; + height: auto; + min-height: 48px; + border-bottom: 1px solid lighten($ui-base-color, 8%); + cursor: default; + + &.collapsed { + background-position: center; + background-size: cover; + user-select: none; + + &.has-background::before { + display: block; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + background-image: linear-gradient(to bottom, rgba($base-shadow-color, .75), rgba($base-shadow-color, .65) 24px, rgba($base-shadow-color, .8)); + content: ""; + } + + .display-name:hover .display-name__html { + text-decoration: none; + } + + .status__content { + height: 20px; + overflow: hidden; + text-overflow: ellipsis; + + a:hover { + text-decoration: none; + } + } + } + + .notification__message { + margin: -10px -10px 10px; + } +} + +.status__relative-time { + //reset + float: initial; + //glitch + display: inline-block; + margin-left: auto; + padding-left: 18px; + width: 120px; + color: $ui-base-lighter-color; + font-size: 14px; + text-align: right; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.status__display-name { + margin: 0 auto 0 0; + color: $ui-base-lighter-color; + overflow: hidden; +} + +.status__info { + display: flex; + margin: 2px 0 5px; + font-size: 15px; + line-height: 24px; +} + +.status__info__icons { + flex: none; + position: relative; + color: lighten($ui-base-color, 26%); + + .status__visibility-icon { + padding-left: 6px; + } +} + +.status__prepend { + //reset + margin-left: initial; + padding: initial; + padding-bottom: initial; + //glitch + margin: -10px -10px 10px; + color: $ui-base-lighter-color; + padding: 8px 10px 0 68px; + font-size: 14px; + position: relative; +} + +.account { + color: inherit; + text-decoration: none; + + &.small { + border: none; + padding: 0; + + & > .account__avatar-wrapper { margin: 0 8px 0 0 } + + & > .display-name { + height: 24px; + line-height: 24px; + } + } +} + +.account__avatar-wrapper { + //reset + margin-left: initial; + margin-right: initial; + //glitch + margin: 6px 16px 6px 6px; +} + +.account__header__wrapper { + flex: 0 0 auto; + background: lighten($ui-base-color, 4%); +} + +.account__header { + .account__avatar { + @include avatar-radius(); + @include avatar-size(90px); + display: block; + margin: 0 auto 10px; + overflow: hidden; + } +} + +.status__avatar { + //reset + left: initial; + position: initial; + top: initial; + //glitch + flex: none; + margin: 0 10px 0 0; + height: 48px; + width: 48px; +} + +.display-name { + display: block; + padding: 6px 0; + max-width: 100%; + height: 36px; + overflow: hidden; + + strong { + display: block; + height: 18px; + font-size: 16px; + font-weight: 500; + line-height: 18px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } + + span { + display: block; + height: 18px; + font-size: 15px; + line-height: 18px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } + + &:hover { + strong { + text-decoration: underline; + } + } + + &.inline { + padding: 0; + height: 18px; + font-size: 15px; + line-height: 18px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + + strong { + display: inline; + height: auto; + font-size: inherit; + line-height: inherit; + } + + span { + display: inline; + height: auto; + font-size: inherit; + line-height: inherit; + } + } +} + +.column { + width: 330px; + position: relative; + box-sizing: border-box; + display: flex; + flex-direction: column; + overflow: hidden; + + .wide & { + flex: auto; + min-width: 330px; + max-width: 400px; + } + + > .scrollable { + background: $ui-base-color; + } +} + +.column-header__button { + // glitch - added focus ring for keyboard navigation + &:focus { + text-shadow: 0 0 4px darken($ui-highlight-color, 5%); + } +} + +.scrollable > div > :first-child .notification__dismiss-overlay > .wrappy { + border-top: 1px solid $ui-base-color; +} + +.notification__dismiss-overlay { + overflow: hidden; + position: absolute; + top: 0; + right: 0; + bottom: -1px; + padding-left: 15px; // space for the box shadow to be visible + + z-index: 999; + align-items: center; + justify-content: flex-end; + cursor: pointer; + + display: flex; + + .wrappy { + width: $dismiss-overlay-width; + align-self: stretch; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background: lighten($ui-base-color, 8%); + border-left: 1px solid lighten($ui-base-color, 20%); + box-shadow: 0 0 5px black; + border-bottom: 1px solid $ui-base-color; + } + + .ckbox { + border: 2px solid $ui-primary-color; + border-radius: 2px; + width: 30px; + height: 30px; + font-size: 20px; + color: $ui-primary-color; + text-shadow: 0 0 5px black; + display: flex; + justify-content: center; + align-items: center; + } + + &:focus { + outline: 0 !important; + + .ckbox { + box-shadow: 0 0 1px 1px $ui-highlight-color; + } + } +} + +.column-header__notif-cleaning-buttons { + display: flex; + align-items: stretch; + justify-content: space-around; + + button { + @extend .column-header__button; + background: transparent; + text-align: center; + padding: 10px 0; + white-space: pre-wrap; + } + + b { + font-weight: bold; + } +} + +// The notifs drawer with no padding to have more space for the buttons +.column-header__collapsible-inner.nopad-drawer { + padding: 0; +} + +.column-header__collapsible { + // notif cleaning drawer + &.ncd { + transition: none; + &.collapsed { + max-height: 0; + opacity: 0.7; + } + } +} + +.media-spoiler { + .status__content > & { + margin-top: 15px; // Add margin when used bare for NSFW video player + } + @include fullwidth-gallery; +} + +.sensitive-info { + display: flex; + flex-direction: row; + align-items: center; + position: absolute; + top: 4px; + left: 4px; + z-index: 100; +} + +.sensitive-marker { + margin: 0 3px; + border-radius: 2px; + padding: 2px 6px; + color: rgba($primary-text-color, 0.8); + background: rgba($base-overlay-background, 0.5); + font-size: 12px; + line-height: 15px; + text-transform: uppercase; + opacity: .9; + transition: opacity .1s ease; + + .media-gallery:hover & { opacity: 1 } +} + +.boost-modal, +.favourite-modal, +.confirmation-modal, +.report-modal, +.actions-modal, +.mute-modal { + background: lighten($ui-secondary-color, 8%); + color: $ui-base-color; + border-radius: 8px; + overflow: hidden; + max-width: 90vw; + width: 480px; + position: relative; + flex-direction: column; + + .status__display-name { + //reset + display: initial; + max-width: initial; + padding-right: initial; + //glitch + display: flex; + } +} + +.boost-modal__container, +.favourite-modal__container { + overflow-x: scroll; + padding: 10px; + + .status { + user-select: text; + border-bottom: 0; + } +} + +.boost-modal__action-bar, +.favourite-modal__action-bar, +.confirmation-modal__action-bar, +.mute-modal__action-bar, +.report-modal__action-bar { + display: flex; + justify-content: space-between; + background: $ui-secondary-color; + padding: 10px; + line-height: 36px; + + & > div { + flex: 1 1 auto; + text-align: right; + color: lighten($ui-base-color, 33%); + padding-right: 10px; + } + + .button { + flex: 0 0 auto; + } +} + +.boost-modal__status-header, +.favourite-modal__status-header { + font-size: 15px; +} + +.boost-modal__status-time, +.favourite-modal__status-time { + float: right; + font-size: 14px; +} + +.actions-modal { + strong { + display: block; + font-weight: 500; + } +} + +.media-gallery { + box-sizing: border-box; + margin-top: 8px; + overflow: hidden; + position: relative; + background: $base-shadow-color; + width: 100%; + + .detailed-status & { + margin-left: -12px; + width: calc(100% + 24px); + height: 250px; + } + + @include fullwidth-gallery; +} + +.media-gallery__item-thumbnail { + cursor: zoom-in; + display: block; + text-decoration: none; + height: 100%; + line-height: 0; + + &, + img { + //reset + height: initial; + object-fit: initial; + //glitch + width: 100%; + object-fit: contain; + + &:not(.letterbox) { + height: 100%; + object-fit: cover; + } + } +} + +.media-gallery__gifv { + display: flex; + justify-content: center; +} + +.media-gallery__item-gifv-thumbnail { + //reset + object-fit: initial; + top: initial; + transform: initial; + width: initial; + z-index: initial; + //glitch + cursor: zoom-in; + height: 100%; + width: 100%; + position: relative; + z-index: 1; + object-fit: contain; + + &:not(.letterbox) { + height: 100%; + object-fit: cover; + } +} + +.status__video-player { + //reset + background: initial; + //glitch + display: flex; + align-items: center; + background: $base-shadow-color; + box-sizing: border-box; + cursor: default; /* May not be needed */ + margin-top: 8px; + overflow: hidden; + position: relative; + + @include fullwidth-gallery; +} + +.status__video-player-video { + position: relative; + width: 100%; + z-index: 1; + + &:not(.letterbox) { + height: 100%; + object-fit: cover; + } +} + +.video-player { + //reset + border-radius: initial; + //glitch + .detailed-status & { + margin-left: -12px; + width: calc(100% + 24px); + height: 250px; + } + + @include fullwidth-gallery; + + video { + object-fit: cover; + position: relative; + } +} + +.media-spoiler-video { + background-size: cover; + background-repeat: no-repeat; + background-position: center; + cursor: pointer; + margin-top: 8px; + position: relative; + width: 100%; + + @include fullwidth-gallery; + + border: 0; + display: block; +} diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index ca6fd9e996..d35dd7e076 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -264,22 +264,287 @@ color: $ui-base-color; } -.follow-form__input { - background: $simple-background-color; +.compose-form { + padding: 10px; - &:disabled { + .compose-form__warning { + color: darken($ui-secondary-color, 65%); + margin-bottom: 15px; + background: $ui-primary-color; + box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3); + padding: 8px 10px; + border-radius: 4px; + font-size: 13px; + font-weight: 400; + + strong { + color: darken($ui-secondary-color, 65%); + font-weight: 500; + + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + font-weight: 700; + } + } + } + + a { + color: darken($ui-primary-color, 33%); + font-weight: 500; + text-decoration: underline; + + &:hover, + &:active, + &:focus { + text-decoration: none; + } + } + } + + .compose-form__autosuggest-wrapper { + position: relative; + + .emoji-picker-dropdown { + position: absolute; + right: 5px; + top: 5px; + } + } + + .autosuggest-textarea, + .spoiler-input { + position: relative; + } + + .autosuggest-textarea__textarea, + .spoiler-input__input { + display: block; + box-sizing: border-box; + width: 100%; + margin: 0; + color: $ui-base-color; + background: $simple-background-color; + padding: 10px; + font-family: inherit; + font-size: 14px; + resize: vertical; + border: 0; + outline: 0; + + &:focus { + outline: 0; + } + + @media screen and (max-width: 600px) { + font-size: 16px; + } + } + + .spoiler-input__input { + border-radius: 4px; + } + + .autosuggest-textarea__textarea { + min-height: 100px; + border-radius: 4px 4px 0 0; + padding-bottom: 0; + padding-right: 10px + 22px; + resize: none; + + @media screen and (max-width: 600px) { + height: 100px !important; // prevent auto-resize textarea + resize: vertical; + } + } + + .autosuggest-textarea__suggestions { + box-sizing: border-box; + display: none; + position: absolute; + top: 100%; + width: 100%; + z-index: 99; + box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4); background: $ui-secondary-color; + border-radius: 0 0 4px 4px; + color: $ui-base-color; + font-size: 14px; + padding: 6px; + + &.autosuggest-textarea__suggestions--visible { + display: block; + } } -} -.emoji-picker-dropdown { - position: absolute; - right: 5px; - top: 5px; + .autosuggest-textarea__suggestions__item { + padding: 10px; + cursor: pointer; + border-radius: 4px; - ::-webkit-scrollbar-track:hover, - ::-webkit-scrollbar-track:active { - background-color: rgba($base-overlay-background, 0.3); + &:hover, + &:focus, + &:active, + &.selected { + background: darken($ui-secondary-color, 10%); + } + } + + .autosuggest-account, + .autosuggest-emoji { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + line-height: 18px; + font-size: 14px; + } + + .autosuggest-account-icon, + .autosuggest-emoji img { + display: block; + margin-right: 8px; + width: 16px; + height: 16px; + } + + .autosuggest-account .display-name__account { + color: lighten($ui-base-color, 36%); + } + + .compose-form__modifiers { + color: $ui-base-color; + font-family: inherit; + font-size: 14px; + background: $simple-background-color; + + .compose-form__upload-wrapper { + overflow: hidden; + } + + .compose-form__uploads-wrapper { + display: flex; + flex-direction: row; + padding: 5px; + flex-wrap: wrap; + } + + .compose-form__upload { + flex: 1 1 0; + min-width: 40%; + margin: 5px; + + &-description { + position: absolute; + z-index: 2; + bottom: 0; + left: 0; + right: 0; + box-sizing: border-box; + background: linear-gradient(0deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent); + padding: 10px; + opacity: 0; + transition: opacity .1s ease; + + input { + background: transparent; + color: $ui-secondary-color; + border: 0; + padding: 0; + margin: 0; + width: 100%; + font-family: inherit; + font-size: 14px; + font-weight: 500; + + &:focus { + color: $white; + } + + &::placeholder { + opacity: 0.54; + color: $ui-secondary-color; + } + } + + &.active { + opacity: 1; + } + } + + .icon-button { + mix-blend-mode: difference; + } + } + + .compose-form__upload-thumbnail { + border-radius: 4px; + background-position: center; + background-size: cover; + background-repeat: no-repeat; + height: 100px; + width: 100%; + } + } + + .compose-form__buttons-wrapper { + padding: 10px; + background: darken($simple-background-color, 8%); + border-radius: 0 0 4px 4px; + display: flex; + justify-content: space-between; + + .compose-form__buttons { + display: flex; + + .compose-form__upload-button-icon { + line-height: 27px; + } + + .compose-form__sensitive-button { + display: none; + + &.compose-form__sensitive-button--visible { + display: block; + } + + .compose-form__sensitive-button__icon { + line-height: 27px; + } + } + } + + .icon-button { + box-sizing: content-box; + padding: 0 3px; + } + + .character-counter__wrapper { + align-self: center; + margin-right: 4px; + + .character-counter { + cursor: default; + font-family: 'mastodon-font-sans-serif', sans-serif; + font-size: 14px; + font-weight: 600; + color: lighten($ui-base-color, 12%); + + &.character-counter--over { + color: $warning-red; + } + } + } + } + + .compose-form__publish { + display: flex; + justify-content: flex-end; + min-width: 0; + + .compose-form__publish-button-wrapper { + overflow: hidden; + padding-top: 10px; + } } } @@ -297,31 +562,52 @@ } } -.status__content--with-action { - cursor: pointer; +.reply-indicator { + border-radius: 4px 4px 0 0; + position: relative; + bottom: -2px; + background: $ui-primary-color; + padding: 10px; } -.status-check-box { - .status__content { - color: #3a3a3a; - a { - color: #005aa9; - } - } +.reply-indicator__header { + margin-bottom: 5px; + overflow: hidden; } -.status__content { - position: relative; - margin: 10px 0; - padding: 0 12px; +.reply-indicator__cancel { + float: right; + line-height: 24px; +} + +.reply-indicator__display-name { + color: $ui-base-color; + display: block; + max-width: 100%; + line-height: 24px; + overflow: hidden; + padding-right: 25px; + text-decoration: none; +} + +.reply-indicator__display-avatar { + float: left; + margin-right: 5px; +} + +.status__content--with-action { + cursor: pointer; +} + +.status__content, +.reply-indicator__content { font-size: 15px; line-height: 20px; - color: $primary-text-color; word-wrap: break-word; font-weight: 400; - overflow: visible; + overflow: hidden; white-space: pre-wrap; - padding-top: 5px; + padding-top: 2px; &:focus { outline: 0; @@ -338,7 +624,7 @@ .emojione { width: 20px; height: 20px; - margin: -5px 0 0; + margin: -3px 0 0; } p { @@ -376,10 +662,19 @@ } } - .status__content__spoiler { + .status__content__spoiler-link { + background: lighten($ui-base-color, 30%); + + &:hover { + background: lighten($ui-base-color, 33%); + text-decoration: none; + } + } + + .status__content__text { display: none; - &.status__content__spoiler--visible { + &.status__content__text--visible { display: block; } } @@ -388,54 +683,20 @@ .status__content__spoiler-link { display: inline-block; border-radius: 2px; - background: lighten($ui-base-color, 30%); - border: none; + background: transparent; + border: 0; color: lighten($ui-base-color, 8%); font-weight: 500; font-size: 11px; - padding: 0 5px; + padding: 0 6px; text-transform: uppercase; line-height: inherit; cursor: pointer; - vertical-align: bottom; - - &:hover { - background: lighten($ui-base-color, 33%); - text-decoration: none; - } - - .status__content__spoiler-icon { - display: inline-block; - margin: 0 0 0 5px; - border-left: 1px solid currentColor; - padding: 0 0 0 4px; - font-size: 16px; - vertical-align: -2px; - } } .status__prepend-icon-wrapper { - float: left; - margin: 0 10px 0 -58px; - width: 48px; - text-align: right; -} - -.notif-cleaning { - .status, .notification-follow { - padding-right: ($dismiss-overlay-width + 0.5rem); - } -} - -.notification-follow { - position: relative; - - // same like Status - border-bottom: 1px solid lighten($ui-base-color, 8%); - - .account { - border-bottom: 0 none; - } + left: -26px; + position: absolute; } .focusable { @@ -460,8 +721,8 @@ .status { padding: 8px 10px; + padding-left: 68px; position: relative; - height: auto; min-height: 48px; border-bottom: 1px solid lighten($ui-base-color, 8%); cursor: default; @@ -528,41 +789,6 @@ } } } - - &.collapsed { - background-position: center; - background-size: cover; - user-select: none; - - &.has-background::before { - display: block; - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - background-image: linear-gradient(to bottom, rgba($base-shadow-color, .75), rgba($base-shadow-color, .65) 24px, rgba($base-shadow-color, .8)); - content: ""; - } - - .display-name:hover .display-name__html { - text-decoration: none; - } - - .status__content { - height: 20px; - overflow: hidden; - text-overflow: ellipsis; - - a:hover { - text-decoration: none; - } - } - } - - .notification__message { - margin: -10px -10px 10px; - } } .notification-favourite { @@ -576,39 +802,23 @@ } .status__relative-time { - display: inline-block; - margin-left: auto; - padding-left: 18px; - width: 120px; color: $ui-base-lighter-color; + float: right; font-size: 14px; - text-align: right; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; } .status__display-name { - margin: 0 auto 0 0; color: $ui-base-lighter-color; - overflow: hidden; } -.status__info { - display: flex; - margin: 2px 0 5px; - font-size: 15px; - line-height: 24px; +.status__info .status__display-name { + display: block; + max-width: 100%; + padding-right: 25px; } -.status__info__icons { - flex: none; - position: relative; - color: lighten($ui-base-color, 26%); - - .status__visibility-icon { - padding-left: 6px; - } +.status__info { + font-size: 15px; } .status-check-box { @@ -633,9 +843,10 @@ } .status__prepend { - margin: -10px -10px 10px; + margin-left: 68px; color: $ui-base-lighter-color; - padding: 8px 10px 0 68px; + padding: 8px 0; + padding-bottom: 2px; font-size: 14px; position: relative; @@ -653,36 +864,18 @@ .status__action-bar { align-items: center; display: flex; - margin: 10px 4px 0; + margin-top: 8px; } .status__action-bar-button { float: left; margin-right: 18px; - flex: 0 0 auto; } .status__action-bar-dropdown { float: left; height: 23.15px; width: 23.15px; - - // Dropdown style override for centering on the icon - .dropdown--active { - position: relative; - - .dropdown__content.dropdown__right { - left: calc(50% + 3px); - right: initial; - transform: translate(-50%, 0); - top: 22px; - } - - &::after { - right: 1px; - bottom: -2px; - } - } } .detailed-status__action-bar-dropdown { @@ -704,7 +897,7 @@ .emojione { width: 24px; height: 24px; - margin: -5px 0 0; + margin: -1px 0 0; } } @@ -742,11 +935,18 @@ margin-left: 6px; } +.reply-indicator__content { + color: $ui-base-color; + font-size: 14px; + + a { + color: lighten($ui-base-color, 20%); + } +} + .account { padding: 10px; border-bottom: 1px solid lighten($ui-base-color, 8%); - color: inherit; - text-decoration: none; .account__display-name { flex: 1 1 auto; @@ -756,18 +956,6 @@ text-decoration: none; font-size: 14px; } - - &.small { - border: none; - padding: 0; - - & > .account__avatar-wrapper { margin: 0 8px 0 0 } - - & > .display-name { - height: 24px; - line-height: 24px; - } - } } .account__wrapper { @@ -776,7 +964,8 @@ .account__avatar-wrapper { float: left; - margin: 6px 16px 6px 6px; + margin-left: 12px; + margin-right: 12px; } .account__avatar { @@ -792,7 +981,6 @@ } .account__avatar-overlay { - position: relative; @include avatar-size(48px); &-base { @@ -813,21 +1001,30 @@ .account__relationship { height: 18px; - padding: 12px 10px; + padding: 10px; white-space: nowrap; } -.account__header__wrapper { +.account__header { flex: 0 0 auto; background: lighten($ui-base-color, 4%); -} - -.account__header { text-align: center; background-size: cover; background-position: center; position: relative; + &.inactive { + opacity: 0.5; + + .account__header__avatar { + filter: grayscale(100%); + } + + .account__header__username { + color: $ui-primary-color; + } + } + & > div { background: rgba(lighten($ui-base-color, 4%), 0.9); padding: 20px 10px; @@ -837,14 +1034,6 @@ color: $ui-secondary-color; } - .account__avatar { - @include avatar-radius(); - @include avatar-size(90px); - display: block; - margin: 0 auto 10px; - overflow: hidden; - } - .account__header__display-name { color: $primary-text-color; display: inline-block; @@ -874,6 +1063,12 @@ strong { font-weight: 500; + + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + font-weight: 700; + } + } } a { @@ -892,86 +1087,33 @@ .account__header__content { color: $ui-primary-color; font-size: 14px; - font-weight: 400; - overflow: hidden; - word-break: normal; - word-wrap: break-word; - - p { - margin-bottom: 20px; - - &:last-child { - margin-bottom: 0; - } - } - - a { - color: inherit; - text-decoration: underline; - - &:hover { - text-decoration: none; - } - } -} - -.account__header__display-name { - .emojione { - width: 25px; - height: 25px; - } -} - -.account__metadata { - width: 100%; - font-size: 15px; - line-height: 20px; - overflow: hidden; - border-collapse: collapse; - - a { - text-decoration: none; - - &:hover{ - text-decoration: underline; - } - } - - tr { - border-top: 1px solid lighten($ui-base-color, 8%); - } + font-weight: 400; + overflow: hidden; + word-break: normal; + word-wrap: break-word; - th, td { - padding: 14px 20px; - vertical-align: middle; + p { + margin-bottom: 20px; - & > div { - max-height: 40px; - overflow-y: auto; - white-space: pre-wrap; - text-overflow: ellipsis; + &:last-child { + margin-bottom: 0; } } - th { - color: $ui-primary-color; - background: lighten($ui-base-color, 13%); - font-variant: small-caps; - max-width: 120px; + a { + color: inherit; + text-decoration: underline; - a { - color: $primary-text-color; + &:hover { + text-decoration: none; } } +} - td { - flex: auto; - color: $primary-text-color; - background: $ui-base-color; - - a { - color: $ui-highlight-color; - } +.account__header__display-name { + .emojione { + width: 25px; + height: 25px; } } @@ -1028,6 +1170,12 @@ font-size: 15px; font-weight: 500; color: $primary-text-color; + + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + font-weight: 700; + } + } } abbr { @@ -1081,6 +1229,15 @@ } } +.status__display-name, +.reply-indicator__display-name, +.detailed-status__display-name, +.account__display-name { + &:hover strong { + text-decoration: underline; + } +} + .account__display-name strong { display: block; overflow: hidden; @@ -1118,9 +1275,10 @@ } .status__avatar { - flex: none; - margin: 0 10px 0 0; height: 48px; + left: 10px; + position: absolute; + top: 10px; width: 48px; } @@ -1134,7 +1292,7 @@ color: $ui-base-lighter-color; } - .status__avatar, .emojione { + .status__avatar { opacity: 0.5; } @@ -1150,7 +1308,9 @@ } .notification__message { - padding: 8px 10px 0 68px; + margin-left: 68px; + padding: 8px 0; + padding-bottom: 0; cursor: default; color: $ui-primary-color; font-size: 15px; @@ -1168,10 +1328,8 @@ } .notification__favourite-icon-wrapper { - float: left; - margin: 0 10px 0 -58px; - width: 48px; - text-align: right; + left: -26px; + position: absolute; .star-icon { color: $gold-star; @@ -1195,61 +1353,18 @@ .display-name { display: block; - padding: 6px 0; max-width: 100%; - height: 36px; overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} - strong { - display: block; - height: 18px; - font-size: 16px; - font-weight: 500; - line-height: 18px; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - } - - span { - display: block; - height: 18px; - font-size: 15px; - line-height: 18px; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - } - - &:hover { - strong { - text-decoration: underline; - } - } - - &.inline { - padding: 0; - height: 18px; - font-size: 15px; - line-height: 18px; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - - strong { - display: inline; - height: auto; - font-size: inherit; - line-height: inherit; - } +.display-name__html { + font-weight: 500; +} - span { - display: inline; - height: auto; - font-size: inherit; - line-height: inherit; - } - } +.display-name__account { + font-size: 14px; } .status__relative-time, @@ -1293,6 +1408,45 @@ } } +.navigation-bar { + padding: 10px; + display: flex; + flex-shrink: 0; + cursor: default; + color: $ui-primary-color; + + strong { + color: $primary-text-color; + } + + .permalink { + text-decoration: none; + } + + .icon-button { + pointer-events: none; + opacity: 0; + } +} + +.navigation-bar__profile { + flex: 1 1 auto; + margin-left: 8px; + overflow: hidden; +} + +.navigation-bar__profile-account { + display: block; + font-weight: 500; + overflow: hidden; + text-overflow: ellipsis; +} + +.navigation-bar__profile-edit { + color: inherit; + text-decoration: none; +} + .dropdown { display: inline-block; } @@ -1459,12 +1613,11 @@ justify-content: flex-start; overflow-x: auto; position: relative; - padding: 10px; } @include limited-single-column('screen and (max-width: 360px)', $parent: null) { .columns-area { - padding: 0; + padding: 10px; } .react-swipeable-view-container .columns-area { @@ -1475,6 +1628,7 @@ .react-swipeable-view-container { &, .columns-area, + .drawer, .column { height: 100%; } @@ -1493,13 +1647,6 @@ box-sizing: border-box; display: flex; flex-direction: column; - overflow: hidden; - - .wide & { - flex: auto; - min-width: 330px; - max-width: 400px; - } > .scrollable { background: $ui-base-color; @@ -1515,6 +1662,25 @@ background: darken($ui-base-color, 7%); } +.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: $ui-primary-color; + text-decoration: none; + text-align: center; + font-size: 16px; + border-bottom: 2px solid transparent; +} + .column { overflow: hidden; } @@ -1538,6 +1704,11 @@ .columns-area { flex-direction: column; } + + .search__input, + .autosuggest-textarea__textarea { + font-size: 16px; + } } } @@ -1547,6 +1718,7 @@ } .column { + flex: 0 0 auto; padding: 10px; padding-left: 5px; padding-right: 5px; @@ -1607,13 +1779,29 @@ text-align: left; } +.drawer__header { + flex: 0 0 auto; + font-size: 16px; + background: lighten($ui-base-color, 8%); + margin-bottom: 10px; + display: flex; + flex-direction: row; + + a { + transition: background 100ms ease-in; + + &:hover { + background: lighten($ui-base-color, 3%); + transition: background 200ms ease-out; + } + } +} + .tabs-bar { display: flex; background: lighten($ui-base-color, 8%); flex: 0 0 auto; overflow-y: auto; - margin: 10px; - margin-bottom: 0; } .tabs-bar__link { @@ -1858,8 +2046,6 @@ font-size: 16px; padding: 15px; text-decoration: none; - cursor: pointer; - outline: none; &:hover { background: lighten($ui-base-color, 11%); @@ -1891,14 +2077,8 @@ overflow-y: auto; } -.getting-started__footer { - display: flex; - flex-direction: column; -} - .getting-started { - box-sizing: border-box; - padding-bottom: 235px; + background: $ui-base-color; flex: 1 0 auto; p { @@ -2023,15 +2203,12 @@ } .status-card-photo { + cursor: zoom-in; display: block; text-decoration: none; - - img { - display: block; width: 100%; height: auto; margin: 0; - } } .status-card-video { @@ -2082,14 +2259,19 @@ .status-card__image-image { border-radius: 4px 4px 0 0; } + + .status-card__title { + white-space: inherit; + } } .status-card__image-image { border-radius: 4px 0 0 4px; display: block; - height: auto; margin: 0; width: 100%; + height: 100%; + object-fit: cover; } .load-more { @@ -2209,88 +2391,6 @@ background: lighten($ui-base-color, 8%); } } - - // glitch - added focus ring for keyboard navigation - &:focus { - text-shadow: 0 0 4px darken($ui-highlight-color, 5%); - } -} - -.scrollable > div > :first-child .notification__dismiss-overlay > .wrappy { - border-top: 1px solid $ui-base-color; -} - -.notification__dismiss-overlay { - overflow: hidden; - position: absolute; - top: 0; - right: 0; - bottom: -1px; - padding-left: 15px; // space for the box shadow to be visible - - z-index: 999; - align-items: center; - justify-content: flex-end; - cursor: pointer; - - display: flex; - - .wrappy { - width: $dismiss-overlay-width; - align-self: stretch; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - background: lighten($ui-base-color, 8%); - border-left: 1px solid lighten($ui-base-color, 20%); - box-shadow: 0 0 5px black; - border-bottom: 1px solid $ui-base-color; - } - - .ckbox { - border: 2px solid $ui-primary-color; - border-radius: 2px; - width: 30px; - height: 30px; - font-size: 20px; - color: $ui-primary-color; - text-shadow: 0 0 5px black; - display: flex; - justify-content: center; - align-items: center; - } - - &:focus { - outline: 0 !important; - - .ckbox { - box-shadow: 0 0 1px 1px $ui-highlight-color; - } - } -} - -.column-header__notif-cleaning-buttons { - display: flex; - align-items: stretch; - justify-content: space-around; - - button { - @extend .column-header__button; - background: transparent; - text-align: center; - padding: 10px 0; - white-space: pre-wrap; - } - - b { - font-weight: bold; - } -} - -// The notifs drawer with no padding to have more space for the buttons -.column-header__collapsible-inner.nopad-drawer { - padding: 0; } .column-header__collapsible { @@ -2317,15 +2417,6 @@ border-top: 1px solid lighten($ui-base-color, 12%); margin: 10px 0; } - - // notif cleaning drawer - &.ncd { - transition: none; - &.collapsed { - max-height: 0; - opacity: 0.7; - } - } } .column-header__collapsible-inner { @@ -2466,19 +2557,12 @@ border: 0; width: 100%; height: 100%; - justify-content: center; - position: relative; - text-align: center; - z-index: 100; - display: flex; - flex-direction: column; - align-items: stretch; - .status__content > & { - margin-top: 15px; // Add margin when used bare for NSFW video player + &:hover, + &:active, + &:focus { + color: lighten($ui-primary-color, 8%); } - - @include fullwidth-gallery; } .media-spoiler__warning { @@ -2492,29 +2576,17 @@ font-weight: 500; } -.sensitive-info { - display: flex; - flex-direction: row; - align-items: center; +.spoiler-button { + display: none; + left: 4px; position: absolute; + text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color; top: 4px; - left: 4px; z-index: 100; -} - -.sensitive-marker { - margin: 0 3px; - border-radius: 2px; - padding: 2px 6px; - color: rgba($primary-text-color, 0.8); - background: rgba($base-overlay-background, 0.5); - font-size: 12px; - line-height: 15px; - text-transform: uppercase; - opacity: .9; - transition: opacity .1s ease; - .media-gallery:hover & { opacity: 1 } + &.spoiler-button--visible { + display: block; + } } .modal-container--preloader { @@ -2792,6 +2864,47 @@ border-radius: 4px; } +.upload-progress { + padding: 10px; + color: $ui-base-lighter-color; + overflow: hidden; + display: flex; + + .fa { + font-size: 34px; + margin-right: 10px; + } + + span { + font-size: 12px; + text-transform: uppercase; + font-weight: 500; + display: block; + } +} + +.upload-progess__message { + flex: 1 1 auto; +} + +.upload-progress__backdrop { + width: 100%; + height: 6px; + border-radius: 6px; + background: $ui-base-lighter-color; + position: relative; + margin-top: 5px; +} + +.upload-progress__tracker { + position: absolute; + left: 0; + top: 0; + height: 6px; + background: $ui-highlight-color; + border-radius: 6px; +} + .emoji-button { display: block; font-size: 24px; @@ -2831,6 +2944,90 @@ filter: none; } +.privacy-dropdown__dropdown { + position: absolute; + background: $simple-background-color; + box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); + border-radius: 4px; + margin-left: 40px; + overflow: hidden; + transform-origin: 50% 0; +} + +.privacy-dropdown__option { + color: $ui-base-color; + padding: 10px; + cursor: pointer; + display: flex; + + &:hover, + &.active { + background: $ui-highlight-color; + color: $primary-text-color; + + .privacy-dropdown__option__content { + color: $primary-text-color; + + strong { + color: $primary-text-color; + } + } + } + + &.active:hover { + background: lighten($ui-highlight-color, 4%); + } +} + +.privacy-dropdown__option__icon { + display: flex; + align-items: center; + justify-content: center; + margin-right: 10px; +} + +.privacy-dropdown__option__content { + flex: 1 1 auto; + color: darken($ui-primary-color, 24%); + + strong { + font-weight: 500; + display: block; + color: $ui-base-color; + + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + font-weight: 700; + } + } + } +} + +.privacy-dropdown.active { + .privacy-dropdown__value { + background: $simple-background-color; + border-radius: 4px 4px 0 0; + box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1); + + .icon-button { + transition: none; + } + + &.active { + background: $ui-highlight-color; + + .icon-button { + color: $primary-text-color; + } + } + } + + .privacy-dropdown__dropdown { + display: block; + box-shadow: 2px 4px 6px rgba($base-shadow-color, 0.1); + } +} + .search { position: relative; } @@ -3237,6 +3434,12 @@ border-radius: 4px; font-size: 14px; padding: 3px 6px; + + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + font-weight: 700; + } + } } } } @@ -3371,7 +3574,6 @@ } .boost-modal, -.favourite-modal, .confirmation-modal, .report-modal, .actions-modal, @@ -3386,7 +3588,17 @@ flex-direction: column; .status__display-name { - display: flex; + display: block; + max-width: 100%; + padding-right: 25px; + } + + .status__avatar { + height: 28px; + left: 10px; + position: absolute; + top: 10px; + width: 48px; } } @@ -3403,8 +3615,7 @@ } } -.boost-modal__container, -.favourite-modal__container{ +.boost-modal__container { overflow-x: scroll; padding: 10px; @@ -3415,7 +3626,6 @@ } .boost-modal__action-bar, -.favourite-modal__action-bar, .confirmation-modal__action-bar, .mute-modal__action-bar, .report-modal__action-bar { @@ -3437,13 +3647,11 @@ } } -.boost-modal__status-header, -.favourite-modal__status-header { +.boost-modal__status-header { font-size: 15px; } -.boost-modal__status-time, -.favourite-modal__status-time { +.boost-modal__status-time { float: right; font-size: 14px; } @@ -3491,8 +3699,7 @@ max-height: 80vh; max-width: 80vw; - strong { - display: block; + .actions-modal__item-label { font-weight: 500; } @@ -3505,25 +3712,33 @@ } li:not(:empty) { - & > .link { + a { color: $ui-base-color; display: flex; padding: 12px 16px; font-size: 15px; align-items: center; text-decoration: none; - transition: none; + + &, + button { + transition: none; + } &.active, &:hover, &:active, &:focus { + &, + button { background: $ui-highlight-color; color: $primary-text-color; + } } & > .react-toggle, - & > .icon { + & > .icon, + button:first-child { margin-right: 10px; } } @@ -3557,6 +3772,12 @@ strong { font-weight: 500; + + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + font-weight: 700; + } + } } } @@ -3652,20 +3873,10 @@ /* Media Gallery */ .media-gallery { box-sizing: border-box; - margin-top: 15px; + margin-top: 8px; overflow: hidden; position: relative; - background: $base-shadow-color; width: 100%; - height: 110px; - - .detailed-status & { - margin-left: -12px; - width: calc(100% + 24px); - height: 250px; - } - - @include fullwidth-gallery; } .media-gallery__item { @@ -3684,20 +3895,16 @@ .media-gallery__item-thumbnail { cursor: zoom-in; + display: block; text-decoration: none; - width: 100%; height: 100%; line-height: 0; - display: flex; + &, img { width: 100%; - object-fit: contain; - - &:not(.letterbox) { - height: 100%; - object-fit: cover; - } + height: 100%; + object-fit: cover; } } @@ -3706,21 +3913,17 @@ overflow: hidden; position: relative; width: 100%; - display: flex; - justify-content: center; } .media-gallery__item-gifv-thumbnail { cursor: zoom-in; height: 100%; + object-fit: cover; position: relative; + top: 50%; + transform: translateY(-50%); + width: 100%; z-index: 1; - object-fit: contain; - - &:not(.letterbox) { - height: 100%; - object-fit: cover; - } } .media-gallery__item-thumbnail-label { @@ -3733,28 +3936,22 @@ /* Status Video Player */ .status__video-player { - display: flex; - align-items: center; - background: $base-shadow-color; + background: $base-overlay-background; box-sizing: border-box; cursor: default; /* May not be needed */ - margin-top: 15px; + margin-top: 8px; overflow: hidden; position: relative; - width: 100%; - - @include fullwidth-gallery; } .status__video-player-video { + height: 100%; + object-fit: cover; position: relative; + top: 50%; + transform: translateY(-50%); width: 100%; z-index: 1; - - &:not(.letterbox) { - height: 100%; - object-fit: cover; - } } .status__video-player-expand, @@ -3794,17 +3991,8 @@ overflow: hidden; position: relative; background: $base-shadow-color; - width: 100%; max-width: 100%; - height: 110px; - - .detailed-status & { - margin-left: -12px; - width: calc(100% + 24px); - height: 250px; - } - - @include fullwidth-gallery; + border-radius: 4px; video { height: 100%; @@ -3839,8 +4027,8 @@ left: 0; right: 0; box-sizing: border-box; - background: linear-gradient(0deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 60%, transparent); - padding: 0 10px; + 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; @@ -3893,40 +4081,67 @@ } } - &__buttons { + &__buttons-bar { + display: flex; + justify-content: space-between; padding-bottom: 10px; + } + + &__buttons { font-size: 16px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; &.left { - float: left; - button { - padding-right: 10px; + padding-left: 0; } } &.right { - float: right; - button { - padding-left: 10px; + padding-right: 0; } } button { background: transparent; - padding: 0; + padding: 2px 10px; + font-size: 16px; border: 0; - color: $white; + color: rgba($white, 0.75); &:active, &:hover, &:focus { - color: $ui-highlight-color; + color: $white; } } } + &__time-sep, + &__time-total, + &__time-current { + font-size: 14px; + font-weight: 500; + } + + &__time-current { + color: $white; + margin-left: 10px; + } + + &__time-sep { + display: inline-block; + margin: 0 6px; + } + + &__time-sep, + &__time-total { + color: $white; + } + &__seek { cursor: pointer; height: 24px; @@ -3936,6 +4151,7 @@ content: ""; width: 100%; background: rgba($white, 0.35); + border-radius: 4px; display: block; position: absolute; height: 4px; @@ -3947,8 +4163,9 @@ display: block; position: absolute; height: 4px; + border-radius: 4px; top: 10px; - background: $ui-highlight-color; + background: lighten($ui-highlight-color, 8%); } &__buffer { @@ -3965,7 +4182,8 @@ top: 6px; margin-left: -6px; transition: opacity .1s ease; - background: $ui-highlight-color; + background: lighten($ui-highlight-color, 8%); + box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); pointer-events: none; &.active { @@ -3979,6 +4197,16 @@ } } } + +&.detailed, +&.fullscreen { + .video-player__buttons { + button { + padding-top: 10px; + padding-bottom: 10px; + } + } +} } .media-spoiler-video { @@ -3986,12 +4214,8 @@ background-repeat: no-repeat; background-position: center; cursor: pointer; - margin-top: 15px; + margin-top: 8px; position: relative; - width: 100%; - - @include fullwidth-gallery; - border: 0; display: block; } @@ -4074,6 +4298,37 @@ border-radius: 0; } +.search-popout { + background: $simple-background-color; + border-radius: 4px; + padding: 10px 14px; + padding-bottom: 14px; + margin-top: 10px; + color: $ui-primary-color; + box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); + + h4 { + text-transform: uppercase; + color: $ui-primary-color; + font-size: 13px; + font-weight: 500; + margin-bottom: 10px; + } + + li { + padding: 4px 0; + } + + ul { + margin-bottom: 10px; + } + + em { + font-weight: 500; + color: $ui-base-color; + } +} + noscript { text-align: center; @@ -4192,6 +4447,42 @@ noscript { } } +.account__moved-note { + padding: 14px 10px; + padding-bottom: 16px; + background: lighten($ui-base-color, 4%); + border-top: 1px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid lighten($ui-base-color, 8%); + + &__message { + position: relative; + margin-left: 58px; + color: $ui-base-lighter-color; + padding: 8px 0; + padding-top: 0; + padding-bottom: 4px; + font-size: 14px; + + > span { + display: block; + overflow: hidden; + text-overflow: ellipsis; + } + } + + &__icon-wrapper { + left: -26px; + position: absolute; + } + + .detailed-status__display-avatar { + position: relative; + } + + .detailed-status__display-name { + margin-bottom: 0; + } +} .column-inline-form { padding: 7px 15px; @@ -4284,6 +4575,8 @@ noscript { } } +@import 'glitch'; +@import 'metadata'; @import 'composer'; @import 'doodle'; @import 'drawer'; diff --git a/app/javascript/flavours/glitch/styles/components/metadata.scss b/app/javascript/flavours/glitch/styles/components/metadata.scss new file mode 100644 index 0000000000..d56de19ea1 --- /dev/null +++ b/app/javascript/flavours/glitch/styles/components/metadata.scss @@ -0,0 +1,52 @@ +.account__metadata { + width: 100%; + font-size: 15px; + line-height: 20px; + overflow: hidden; + border-collapse: collapse; + + a { + text-decoration: none; + + &:hover{ + text-decoration: underline; + } + } + + tr { + border-top: 1px solid lighten($ui-base-color, 8%); + text-align: center; + } + + th, td { + padding: 14px 20px; + vertical-align: middle; + + & > div { + max-height: 40px; + overflow-y: auto; + white-space: pre-wrap; + text-overflow: ellipsis; + } + } + + th { + color: $ui-primary-color; + background: lighten($ui-base-color, 13%); + max-width: 120px; + + a { + color: $primary-text-color; + } + } + + td { + flex: auto; + color: $primary-text-color; + background: $ui-base-color; + + a { + color: $ui-highlight-color; + } + } +} diff --git a/app/javascript/flavours/glitch/styles/forms.scss b/app/javascript/flavours/glitch/styles/forms.scss index 61fcf286ff..2bef53cff7 100644 --- a/app/javascript/flavours/glitch/styles/forms.scss +++ b/app/javascript/flavours/glitch/styles/forms.scss @@ -56,6 +56,12 @@ code { strong { font-weight: 500; + + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + font-weight: 700; + } + } } .label_input { @@ -395,6 +401,12 @@ code { strong { font-weight: 500; + + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + font-weight: 700; + } + } } @media screen and (max-width: 740px) and (min-width: 441px) { @@ -430,6 +442,12 @@ code { strong { color: $ui-secondary-color; font-weight: 500; + + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + font-weight: 700; + } + } } @media screen and (max-width: 740px) and (min-width: 441px) { @@ -474,6 +492,12 @@ code { strong { font-weight: 500; + + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + font-weight: 700; + } + } } } } @@ -506,6 +530,12 @@ code { display: block; margin-bottom: 5px; + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + font-weight: 700; + } + } + .fa { font-weight: 400; } diff --git a/app/javascript/flavours/glitch/styles/index.scss b/app/javascript/flavours/glitch/styles/index.scss index a5169f8813..a8ce129530 100644 --- a/app/javascript/flavours/glitch/styles/index.scss +++ b/app/javascript/flavours/glitch/styles/index.scss @@ -8,6 +8,7 @@ @import 'basics'; @import 'containers'; @import 'lists'; +@import 'modal'; @import 'footer'; @import 'compact_header'; @import 'landing_strip'; diff --git a/app/javascript/flavours/glitch/styles/landing_strip.scss b/app/javascript/flavours/glitch/styles/landing_strip.scss index 0bf9daafd4..ffa1e149da 100644 --- a/app/javascript/flavours/glitch/styles/landing_strip.scss +++ b/app/javascript/flavours/glitch/styles/landing_strip.scss @@ -12,6 +12,12 @@ strong, a { font-weight: 500; + + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + font-weight: 700; + } + } } a { @@ -34,3 +40,72 @@ .memoriam-strip { background: rgba($base-shadow-color, 0.7); } + +.moved-strip { + padding: 14px; + border-radius: 4px; + background: rgba(darken($ui-base-color, 7%), 0.8); + color: $ui-secondary-color; + font-weight: 400; + margin-bottom: 20px; + + strong, + a { + font-weight: 500; + + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + font-weight: 700; + } + } + } + + a { + color: inherit; + text-decoration: underline; + + &.mention { + text-decoration: none; + + span { + text-decoration: none; + } + + &:focus, + &:hover, + &:active { + text-decoration: none; + + span { + text-decoration: underline; + } + } + } + } + + &__message { + margin-bottom: 15px; + + .fa { + margin-right: 5px; + color: $ui-primary-color; + } + } + + &__card { + .detailed-status__display-avatar { + position: relative; + cursor: pointer; + } + + .detailed-status__display-name { + margin-bottom: 0; + text-decoration: none; + + span { + color: $ui-highlight-color; + font-weight: 400; + } + } + } +} diff --git a/app/javascript/flavours/glitch/styles/metadata.scss b/app/javascript/flavours/glitch/styles/metadata.scss new file mode 100644 index 0000000000..484410befc --- /dev/null +++ b/app/javascript/flavours/glitch/styles/metadata.scss @@ -0,0 +1,43 @@ +.metadata { + $meta-table-border: lighten($ui-base-color, 8%); + + border-collapse: collapse; + padding: 0; + margin: 15px -15px -15px -15px; + border: 0 none; + border-top: 1px solid $meta-table-border; + border-bottom: 1px solid $meta-table-border; + + td, th { + padding: 15px; + border: 0 none; + border-bottom: 1px solid $meta-table-border; + vertical-align: middle; + } + + tr:last-child { + td, th { + border-bottom: 0 none; + } + } + + td { + color: $ui-primary-color; + text-align: center; + width:100%; + padding-left: 0; + } + + th { + padding-left: 15px; + font-weight: bold; + text-align: center; + width: 94px; + color: $ui-secondary-color; + background: darken($ui-base-color, 8%); + } + + a { + color: $classic-highlight-color; + } +} diff --git a/app/javascript/flavours/glitch/styles/modal.scss b/app/javascript/flavours/glitch/styles/modal.scss new file mode 100644 index 0000000000..a17476ccb5 --- /dev/null +++ b/app/javascript/flavours/glitch/styles/modal.scss @@ -0,0 +1,20 @@ +.modal-layout { + background: $ui-base-color url('~images/wave-modal.png') repeat-x bottom fixed; + display: flex; + flex-direction: column; + height: 100vh; + padding: 0; +} + +.modal-layout__mastodon { + display: flex; + flex: 1; + flex-direction: column; + justify-content: flex-end; + + > * { + flex: 1; + max-height: 235px; + background: url('~images/mastodon-ui.png') no-repeat left bottom / contain; + } +} diff --git a/app/javascript/flavours/glitch/styles/rtl.scss b/app/javascript/flavours/glitch/styles/rtl.scss index f4c566936f..77420c84b9 100644 --- a/app/javascript/flavours/glitch/styles/rtl.scss +++ b/app/javascript/flavours/glitch/styles/rtl.scss @@ -8,7 +8,7 @@ body.rtl { } .compose-form .compose-form__buttons-wrapper .character-counter__wrapper { - margin-right: 0px; + margin-right: 0; margin-left: 4px; } diff --git a/app/javascript/flavours/glitch/styles/stream_entries.scss b/app/javascript/flavours/glitch/styles/stream_entries.scss index 453070b7c3..343e3591f7 100644 --- a/app/javascript/flavours/glitch/styles/stream_entries.scss +++ b/app/javascript/flavours/glitch/styles/stream_entries.scss @@ -93,16 +93,22 @@ .status__avatar { position: absolute; + left: 14px; + top: 14px; + width: 48px; + height: 48px; @include avatar-size(48px); - margin-left: -62px; & > div { + width: 48px; + height: 48px; @include avatar-size(48px); } img { - @include avatar-radius(); display: block; + border-radius: 4px; + @include avatar-radius(); } } @@ -116,6 +122,12 @@ strong { font-weight: 500; color: $ui-base-color; + + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + font-weight: 700; + } + } } span { @@ -167,6 +179,12 @@ strong { font-weight: 500; color: $ui-base-color; + + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + font-weight: 700; + } + } } span { @@ -177,11 +195,14 @@ } .avatar { + width: 48px; + height: 48px; @include avatar-size(48px); img { - @include avatar-radius(); display: block; + border-radius: 4px; + @include avatar-radius(); } } diff --git a/app/javascript/flavours/glitch/styles/tables.scss b/app/javascript/flavours/glitch/styles/tables.scss index ad46f5f9f5..92870e6790 100644 --- a/app/javascript/flavours/glitch/styles/tables.scss +++ b/app/javascript/flavours/glitch/styles/tables.scss @@ -40,6 +40,12 @@ strong { font-weight: 500; + + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + font-weight: 700; + } + } } &.inline-table > tbody > tr:nth-child(odd) > td, diff --git a/app/javascript/flavours/glitch/styles/variables.scss b/app/javascript/flavours/glitch/styles/variables.scss index f42d9c8c54..e8e2bc9e3e 100644 --- a/app/javascript/flavours/glitch/styles/variables.scss +++ b/app/javascript/flavours/glitch/styles/variables.scss @@ -28,6 +28,9 @@ $ui-primary-color: $classic-primary-color !default; // Lighter $ui-secondary-color: $classic-secondary-color !default; // Lightest $ui-highlight-color: $classic-highlight-color !default; // Vibrant +// Language codes that uses CJK fonts +$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW; + // Avatar border size (8% default, 100% for rounded avatars) $ui-avatar-border-size: 8%; From 75af54925a94eb2225d6493e087e8a294fdf8bfb Mon Sep 17 00:00:00 2001 From: ncls7615 Date: Sun, 14 Jan 2018 04:12:41 +0900 Subject: [PATCH 02/12] Fix padded-blocks error --- app/javascript/flavours/glitch/features/video/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/app/javascript/flavours/glitch/features/video/index.js b/app/javascript/flavours/glitch/features/video/index.js index 7c75b271a1..ef19a85ec5 100644 --- a/app/javascript/flavours/glitch/features/video/index.js +++ b/app/javascript/flavours/glitch/features/video/index.js @@ -314,4 +314,5 @@ export default class Video extends React.PureComponent { ); } + } From 4d9133003f946e38238dba880dedb799625b538b Mon Sep 17 00:00:00 2001 From: ncls7615 Date: Sun, 14 Jan 2018 07:18:50 +0900 Subject: [PATCH 03/12] Improve scss refactor 1 --- .../glitch/styles/components/glitch.scss | 151 ------ .../glitch/styles/components/index.scss | 466 +---------------- .../glitch/styles/components/media.scss | 471 ++++++++++++++++++ .../glitch/styles/components/sensitive.scss | 24 + 4 files changed, 497 insertions(+), 615 deletions(-) create mode 100644 app/javascript/flavours/glitch/styles/components/media.scss create mode 100644 app/javascript/flavours/glitch/styles/components/sensitive.scss diff --git a/app/javascript/flavours/glitch/styles/components/glitch.scss b/app/javascript/flavours/glitch/styles/components/glitch.scss index cad93821ec..b30f26cd89 100644 --- a/app/javascript/flavours/glitch/styles/components/glitch.scss +++ b/app/javascript/flavours/glitch/styles/components/glitch.scss @@ -427,31 +427,6 @@ @include fullwidth-gallery; } -.sensitive-info { - display: flex; - flex-direction: row; - align-items: center; - position: absolute; - top: 4px; - left: 4px; - z-index: 100; -} - -.sensitive-marker { - margin: 0 3px; - border-radius: 2px; - padding: 2px 6px; - color: rgba($primary-text-color, 0.8); - background: rgba($base-overlay-background, 0.5); - font-size: 12px; - line-height: 15px; - text-transform: uppercase; - opacity: .9; - transition: opacity .1s ease; - - .media-gallery:hover & { opacity: 1 } -} - .boost-modal, .favourite-modal, .confirmation-modal, @@ -528,129 +503,3 @@ font-weight: 500; } } - -.media-gallery { - box-sizing: border-box; - margin-top: 8px; - overflow: hidden; - position: relative; - background: $base-shadow-color; - width: 100%; - - .detailed-status & { - margin-left: -12px; - width: calc(100% + 24px); - height: 250px; - } - - @include fullwidth-gallery; -} - -.media-gallery__item-thumbnail { - cursor: zoom-in; - display: block; - text-decoration: none; - height: 100%; - line-height: 0; - - &, - img { - //reset - height: initial; - object-fit: initial; - //glitch - width: 100%; - object-fit: contain; - - &:not(.letterbox) { - height: 100%; - object-fit: cover; - } - } -} - -.media-gallery__gifv { - display: flex; - justify-content: center; -} - -.media-gallery__item-gifv-thumbnail { - //reset - object-fit: initial; - top: initial; - transform: initial; - width: initial; - z-index: initial; - //glitch - cursor: zoom-in; - height: 100%; - width: 100%; - position: relative; - z-index: 1; - object-fit: contain; - - &:not(.letterbox) { - height: 100%; - object-fit: cover; - } -} - -.status__video-player { - //reset - background: initial; - //glitch - display: flex; - align-items: center; - background: $base-shadow-color; - box-sizing: border-box; - cursor: default; /* May not be needed */ - margin-top: 8px; - overflow: hidden; - position: relative; - - @include fullwidth-gallery; -} - -.status__video-player-video { - position: relative; - width: 100%; - z-index: 1; - - &:not(.letterbox) { - height: 100%; - object-fit: cover; - } -} - -.video-player { - //reset - border-radius: initial; - //glitch - .detailed-status & { - margin-left: -12px; - width: calc(100% + 24px); - height: 250px; - } - - @include fullwidth-gallery; - - video { - object-fit: cover; - position: relative; - } -} - -.media-spoiler-video { - background-size: cover; - background-repeat: no-repeat; - background-position: center; - cursor: pointer; - margin-top: 8px; - position: relative; - width: 100%; - - @include fullwidth-gallery; - - border: 0; - display: block; -} diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index d35dd7e076..b7190c7ad1 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -2536,46 +2536,6 @@ 100% { opacity: 0.25; } } -.video-error-cover { - align-items: center; - background: $base-overlay-background; - color: $primary-text-color; - cursor: pointer; - display: flex; - flex-direction: column; - height: 100%; - justify-content: center; - margin-top: 8px; - position: relative; - text-align: center; - z-index: 100; -} - -.media-spoiler { - background: $base-overlay-background; - color: $ui-primary-color; - border: 0; - width: 100%; - height: 100%; - - &:hover, - &:active, - &:focus { - color: lighten($ui-primary-color, 8%); - } -} - -.media-spoiler__warning { - display: block; - font-size: 14px; -} - -.media-spoiler__trigger { - display: block; - font-size: 11px; - font-weight: 500; -} - .spoiler-button { display: none; left: 4px; @@ -3789,37 +3749,6 @@ left: 0; } -.media-gallery__gifv__label { - display: block; - position: absolute; - color: $primary-text-color; - background: rgba($base-overlay-background, 0.5); - bottom: 6px; - left: 6px; - padding: 2px 6px; - border-radius: 2px; - font-size: 11px; - font-weight: 600; - z-index: 1; - pointer-events: none; - opacity: 0.9; - transition: opacity 0.1s ease; -} - -.media-gallery__gifv { - &.autoplay { - .media-gallery__gifv__label { - display: none; - } - } - - &:hover { - .media-gallery__gifv__label { - opacity: 1; - } - } -} - .attachment-list { display: flex; font-size: 14px; @@ -3870,368 +3799,6 @@ } } -/* Media Gallery */ -.media-gallery { - box-sizing: border-box; - margin-top: 8px; - overflow: hidden; - position: relative; - width: 100%; -} - -.media-gallery__item { - border: none; - box-sizing: border-box; - display: block; - float: left; - position: relative; - - &.standalone { - .media-gallery__item-gifv-thumbnail { - transform: none; - } - } -} - -.media-gallery__item-thumbnail { - cursor: zoom-in; - display: block; - text-decoration: none; - height: 100%; - line-height: 0; - - &, - img { - width: 100%; - height: 100%; - object-fit: cover; - } -} - -.media-gallery__gifv { - height: 100%; - overflow: hidden; - position: relative; - width: 100%; -} - -.media-gallery__item-gifv-thumbnail { - cursor: zoom-in; - height: 100%; - object-fit: cover; - position: relative; - top: 50%; - transform: translateY(-50%); - width: 100%; - z-index: 1; -} - -.media-gallery__item-thumbnail-label { - clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ - clip: rect(1px, 1px, 1px, 1px); - overflow: hidden; - position: absolute; -} -/* End Media Gallery */ - -/* Status Video Player */ -.status__video-player { - background: $base-overlay-background; - box-sizing: border-box; - cursor: default; /* May not be needed */ - margin-top: 8px; - overflow: hidden; - position: relative; -} - -.status__video-player-video { - height: 100%; - object-fit: cover; - position: relative; - top: 50%; - transform: translateY(-50%); - width: 100%; - z-index: 1; -} - -.status__video-player-expand, -.status__video-player-mute { - color: $primary-text-color; - opacity: 0.8; - position: absolute; - right: 4px; - text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color; -} - -.status__video-player-spoiler { - display: none; - color: $primary-text-color; - left: 4px; - position: absolute; - text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color; - top: 4px; - z-index: 100; - - &.status__video-player-spoiler--visible { - display: block; - } -} - -.status__video-player-expand { - bottom: 4px; - z-index: 100; -} - -.status__video-player-mute { - top: 4px; - z-index: 5; -} - -.video-player { - overflow: hidden; - position: relative; - background: $base-shadow-color; - max-width: 100%; - border-radius: 4px; - - video { - height: 100%; - width: 100%; - z-index: 1; - } - - &.fullscreen { - width: 100% !important; - height: 100% !important; - margin: 0; - - video { - max-width: 100% !important; - max-height: 100% !important; - } - } - - &.inline { - video { - object-fit: cover; - position: relative; - top: 50%; - transform: translateY(-50%); - } - } - - &__controls { - position: absolute; - z-index: 2; - bottom: 0; - left: 0; - right: 0; - box-sizing: border-box; - background: linear-gradient(0deg, rgba($base-shadow-color, 0.85) 0, rgba($base-shadow-color, 0.45) 60%, transparent); - padding: 0 15px; - opacity: 0; - transition: opacity .1s ease; - - &.active { - opacity: 1; - } - } - - &.inactive { - video, - .video-player__controls { - visibility: hidden; - } - } - - &__spoiler { - display: none; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 4; - border: 0; - background: $base-shadow-color; - color: $ui-primary-color; - transition: none; - pointer-events: none; - - &.active { - display: block; - pointer-events: auto; - - &:hover, - &:active, - &:focus { - color: lighten($ui-primary-color, 8%); - } - } - - &__title { - display: block; - font-size: 14px; - } - - &__subtitle { - display: block; - font-size: 11px; - font-weight: 500; - } - } - - &__buttons-bar { - display: flex; - justify-content: space-between; - padding-bottom: 10px; - } - - &__buttons { - font-size: 16px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - &.left { - button { - padding-left: 0; - } - } - - &.right { - button { - padding-right: 0; - } - } - - button { - background: transparent; - padding: 2px 10px; - font-size: 16px; - border: 0; - color: rgba($white, 0.75); - - &:active, - &:hover, - &:focus { - color: $white; - } - } - } - - &__time-sep, - &__time-total, - &__time-current { - font-size: 14px; - font-weight: 500; - } - - &__time-current { - color: $white; - margin-left: 10px; - } - - &__time-sep { - display: inline-block; - margin: 0 6px; - } - - &__time-sep, - &__time-total { - color: $white; - } - - &__seek { - cursor: pointer; - height: 24px; - position: relative; - - &::before { - content: ""; - width: 100%; - background: rgba($white, 0.35); - border-radius: 4px; - display: block; - position: absolute; - height: 4px; - top: 10px; - } - - &__progress, - &__buffer { - display: block; - position: absolute; - height: 4px; - border-radius: 4px; - top: 10px; - background: lighten($ui-highlight-color, 8%); - } - - &__buffer { - background: rgba($white, 0.2); - } - - &__handle { - position: absolute; - z-index: 3; - opacity: 0; - border-radius: 50%; - width: 12px; - height: 12px; - top: 6px; - margin-left: -6px; - transition: opacity .1s ease; - background: lighten($ui-highlight-color, 8%); - box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); - pointer-events: none; - - &.active { - opacity: 1; - } - } - - &:hover { - .video-player__seek__handle { - opacity: 1; - } - } - } - -&.detailed, -&.fullscreen { - .video-player__buttons { - button { - padding-top: 10px; - padding-bottom: 10px; - } - } -} -} - -.media-spoiler-video { - background-size: cover; - background-repeat: no-repeat; - background-position: center; - cursor: pointer; - margin-top: 8px; - position: relative; - border: 0; - display: block; -} - -.media-spoiler-video-play-icon { - border-radius: 100px; - color: rgba($primary-text-color, 0.8); - font-size: 36px; - left: 50%; - padding: 5px; - position: absolute; - top: 50%; - transform: translate(-50%, -50%); -} -/* End Video Player */ - .account-gallery__container { margin: -2px; padding: 4px; @@ -4298,37 +3865,6 @@ border-radius: 0; } -.search-popout { - background: $simple-background-color; - border-radius: 4px; - padding: 10px 14px; - padding-bottom: 14px; - margin-top: 10px; - color: $ui-primary-color; - box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); - - h4 { - text-transform: uppercase; - color: $ui-primary-color; - font-size: 13px; - font-weight: 500; - margin-bottom: 10px; - } - - li { - padding: 4px 0; - } - - ul { - margin-bottom: 10px; - } - - em { - font-weight: 500; - color: $ui-base-color; - } -} - noscript { text-align: center; @@ -4580,5 +4116,7 @@ noscript { @import 'composer'; @import 'doodle'; @import 'drawer'; +@import 'media'; +@import 'sensitive'; @import 'emoji_picker'; @import 'local_settings'; diff --git a/app/javascript/flavours/glitch/styles/components/media.scss b/app/javascript/flavours/glitch/styles/components/media.scss new file mode 100644 index 0000000000..048b6bf28e --- /dev/null +++ b/app/javascript/flavours/glitch/styles/components/media.scss @@ -0,0 +1,471 @@ +.video-error-cover { + align-items: center; + background: $base-overlay-background; + color: $primary-text-color; + cursor: pointer; + display: flex; + flex-direction: column; + height: 100%; + justify-content: center; + margin-top: 8px; + position: relative; + text-align: center; + z-index: 100; +} + +.media-spoiler { + background: $base-overlay-background; + color: $ui-primary-color; + border: 0; + width: 100%; + height: 100%; + + &:hover, + &:active, + &:focus { + color: lighten($ui-primary-color, 8%); + } + + .status__content > & { + margin-top: 15px; // Add margin when used bare for NSFW video player + } + @include fullwidth-gallery; +} + +.media-spoiler__warning { + display: block; + font-size: 14px; +} + +.media-spoiler__trigger { + display: block; + font-size: 11px; + font-weight: 500; +} + +.media-gallery__gifv__label { + display: block; + position: absolute; + color: $primary-text-color; + background: rgba($base-overlay-background, 0.5); + bottom: 6px; + left: 6px; + padding: 2px 6px; + border-radius: 2px; + font-size: 11px; + font-weight: 600; + z-index: 1; + pointer-events: none; + opacity: 0.9; + transition: opacity 0.1s ease; +} + +.media-gallery__gifv { + &.autoplay { + .media-gallery__gifv__label { + display: none; + } + } + + &:hover { + .media-gallery__gifv__label { + opacity: 1; + } + } +} + +.media-gallery { + box-sizing: border-box; + margin-top: 8px; + overflow: hidden; + position: relative; + background: $base-shadow-color; + width: 100%; + height: 100%; + + .detailed-status & { + width: 100%; + height: 100%; + } + + @include fullwidth-gallery; +} + +.media-gallery__item { + border: none; + box-sizing: border-box; + display: block; + float: left; + position: relative; + + &.standalone { + .media-gallery__item-gifv-thumbnail { + transform: none; + } + } +} + +.media-gallery__item-thumbnail { + cursor: zoom-in; + display: block; + text-decoration: none; + height: 100%; + line-height: 0; + + &, + img { + width: 100%; + object-fit: contain; + + &:not(.letterbox) { + height: 100%; + object-fit: cover; + } + } +} + +.media-gallery__gifv { + height: 100%; + overflow: hidden; + position: relative; + width: 100%; + display: flex; + justify-content: center; +} + +.media-gallery__item-gifv-thumbnail { + cursor: zoom-in; + height: 100%; + width: 100%; + position: relative; + z-index: 1; + object-fit: contain; + + &:not(.letterbox) { + height: 100%; + object-fit: cover; + } +} + +.media-gallery__item-thumbnail-label { + clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); + overflow: hidden; + position: absolute; +} + +.status__video-player { + display: flex; + align-items: center; + background: $base-shadow-color; + box-sizing: border-box; + cursor: default; /* May not be needed */ + margin-top: 8px; + overflow: hidden; + position: relative; + + @include fullwidth-gallery; +} + +.status__video-player-video { + height: 100%; + object-fit: cover; + position: relative; + top: 50%; + transform: translateY(-50%); + width: 100%; + z-index: 1; + + &:not(.letterbox) { + height: 100%; + object-fit: cover; + } +} + +.status__video-player-expand, +.status__video-player-mute { + color: $primary-text-color; + opacity: 0.8; + position: absolute; + right: 4px; + text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color; +} + +.status__video-player-spoiler { + display: none; + color: $primary-text-color; + left: 4px; + position: absolute; + text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color; + top: 4px; + z-index: 100; + + &.status__video-player-spoiler--visible { + display: block; + } +} + +.status__video-player-expand { + bottom: 4px; + z-index: 100; +} + +.status__video-player-mute { + top: 4px; + z-index: 5; +} + +.video-player { + overflow: hidden; + position: relative; + background: $base-shadow-color; + max-width: 100%; + + .detailed-status & { + width: 100%; + height: 100%; + } + + @include fullwidth-gallery; + + video { + height: 100%; + width: 100%; + z-index: 1; + object-fit: cover; + position: relative; + } + + &.fullscreen { + width: 100% !important; + height: 100% !important; + margin: 0; + + video { + max-width: 100% !important; + max-height: 100% !important; + } + } + + &.inline { + video { + object-fit: cover; + position: relative; + top: 50%; + transform: translateY(-50%); + } + } + + &__controls { + position: absolute; + z-index: 2; + bottom: 0; + left: 0; + right: 0; + box-sizing: border-box; + background: linear-gradient(0deg, rgba($base-shadow-color, 0.85) 0, rgba($base-shadow-color, 0.45) 60%, transparent); + padding: 0 15px; + opacity: 0; + transition: opacity .1s ease; + + &.active { + opacity: 1; + } + } + + &.inactive { + video, + .video-player__controls { + visibility: hidden; + } + } + + &__spoiler { + display: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 4; + border: 0; + background: $base-shadow-color; + color: $ui-primary-color; + transition: none; + pointer-events: none; + + &.active { + display: block; + pointer-events: auto; + + &:hover, + &:active, + &:focus { + color: lighten($ui-primary-color, 8%); + } + } + + &__title { + display: block; + font-size: 14px; + } + + &__subtitle { + display: block; + font-size: 11px; + font-weight: 500; + } + } + + &__buttons-bar { + display: flex; + justify-content: space-between; + padding-bottom: 10px; + } + + &__buttons { + font-size: 16px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + &.left { + button { + padding-left: 0; + } + } + + &.right { + button { + padding-right: 0; + } + } + + button { + background: transparent; + padding: 2px 10px; + font-size: 16px; + border: 0; + color: rgba($white, 0.75); + + &:active, + &:hover, + &:focus { + color: $white; + } + } + } + + &__time-sep, + &__time-total, + &__time-current { + font-size: 14px; + font-weight: 500; + } + + &__time-current { + color: $white; + margin-left: 10px; + } + + &__time-sep { + display: inline-block; + margin: 0 6px; + } + + &__time-sep, + &__time-total { + color: $white; + } + + &__seek { + cursor: pointer; + height: 24px; + position: relative; + + &::before { + content: ""; + width: 100%; + background: rgba($white, 0.35); + border-radius: 4px; + display: block; + position: absolute; + height: 4px; + top: 10px; + } + + &__progress, + &__buffer { + display: block; + position: absolute; + height: 4px; + border-radius: 4px; + top: 10px; + background: lighten($ui-highlight-color, 8%); + } + + &__buffer { + background: rgba($white, 0.2); + } + + &__handle { + position: absolute; + z-index: 3; + opacity: 0; + border-radius: 50%; + width: 12px; + height: 12px; + top: 6px; + margin-left: -6px; + transition: opacity .1s ease; + background: lighten($ui-highlight-color, 8%); + box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); + pointer-events: none; + + &.active { + opacity: 1; + } + } + + &:hover { + .video-player__seek__handle { + opacity: 1; + } + } + } + +&.detailed, +&.fullscreen { + .video-player__buttons { + button { + padding-top: 10px; + padding-bottom: 10px; + } + } +} +} + +.media-spoiler-video { + background-size: cover; + background-repeat: no-repeat; + background-position: center; + cursor: pointer; + margin-top: 8px; + position: relative; + + @include fullwidth-gallery; + + border: 0; + display: block; +} + +.media-spoiler-video-play-icon { + border-radius: 100px; + color: rgba($primary-text-color, 0.8); + font-size: 36px; + left: 50%; + padding: 5px; + position: absolute; + top: 50%; + transform: translate(-50%, -50%); +} diff --git a/app/javascript/flavours/glitch/styles/components/sensitive.scss b/app/javascript/flavours/glitch/styles/components/sensitive.scss new file mode 100644 index 0000000000..b0a7dfe037 --- /dev/null +++ b/app/javascript/flavours/glitch/styles/components/sensitive.scss @@ -0,0 +1,24 @@ +.sensitive-info { + display: flex; + flex-direction: row; + align-items: center; + position: absolute; + top: 4px; + left: 4px; + z-index: 100; +} + +.sensitive-marker { + margin: 0 3px; + border-radius: 2px; + padding: 2px 6px; + color: rgba($primary-text-color, 0.8); + background: rgba($base-overlay-background, 0.5); + font-size: 12px; + line-height: 15px; + text-transform: uppercase; + opacity: .9; + transition: opacity .1s ease; + + .media-gallery:hover & { opacity: 1 } +} From 090d7c1807a39e5826fa5ee3cb60d422583232ee Mon Sep 17 00:00:00 2001 From: ncls7615 Date: Sun, 14 Jan 2018 07:48:18 +0900 Subject: [PATCH 04/12] Improve scss refactor 2 --- .../glitch/styles/components/account.scss | 437 ++ .../glitch/styles/components/index.scss | 4321 ++++------------- .../glitch/styles/components/list.scss | 103 + .../glitch/styles/components/media.scss | 98 +- .../glitch/styles/components/modal.scss | 661 +++ .../glitch/styles/components/status.scss | 606 +++ 6 files changed, 2849 insertions(+), 3377 deletions(-) create mode 100644 app/javascript/flavours/glitch/styles/components/account.scss create mode 100644 app/javascript/flavours/glitch/styles/components/list.scss create mode 100644 app/javascript/flavours/glitch/styles/components/modal.scss create mode 100644 app/javascript/flavours/glitch/styles/components/status.scss diff --git a/app/javascript/flavours/glitch/styles/components/account.scss b/app/javascript/flavours/glitch/styles/components/account.scss new file mode 100644 index 0000000000..e6f71fd30f --- /dev/null +++ b/app/javascript/flavours/glitch/styles/components/account.scss @@ -0,0 +1,437 @@ +.account { + padding: 10px; + border-bottom: 1px solid lighten($ui-base-color, 8%); + + .account__display-name { + flex: 1 1 auto; + display: block; + color: $ui-primary-color; + overflow: hidden; + text-decoration: none; + font-size: 14px; + } +} + +.account__wrapper { + display: flex; +} + +.account__avatar-wrapper { + float: left; + margin-left: 12px; + margin-right: 12px; +} + +.account__avatar { + @include avatar-radius(); + position: relative; + cursor: pointer; + + &-inline { + display: inline-block; + vertical-align: middle; + margin-right: 5px; + } +} + +.account__avatar-overlay { + @include avatar-size(48px); + + &-base { + @include avatar-radius(); + @include avatar-size(36px); + } + + &-overlay { + @include avatar-radius(); + @include avatar-size(24px); + + position: absolute; + bottom: 0; + right: 0; + z-index: 1; + } +} + +.account__relationship { + height: 18px; + padding: 10px; + white-space: nowrap; +} + +.account__header { + flex: 0 0 auto; + background: lighten($ui-base-color, 4%); + text-align: center; + background-size: cover; + background-position: center; + position: relative; + + &.inactive { + opacity: 0.5; + + .account__header__avatar { + filter: grayscale(100%); + } + + .account__header__username { + color: $ui-primary-color; + } + } + + & > div { + background: rgba(lighten($ui-base-color, 4%), 0.9); + padding: 20px 10px; + } + + .account__header__content { + color: $ui-secondary-color; + } + + .account__header__display-name { + color: $primary-text-color; + display: inline-block; + width: 100%; + font-size: 20px; + line-height: 27px; + font-weight: 500; + overflow: hidden; + text-overflow: ellipsis; + } + + .account__header__username { + color: $ui-highlight-color; + font-size: 14px; + font-weight: 400; + display: block; + margin-bottom: 10px; + overflow: hidden; + text-overflow: ellipsis; + } +} + +.account__disclaimer { + padding: 10px; + border-top: 1px solid lighten($ui-base-color, 8%); + color: $ui-base-lighter-color; + + strong { + font-weight: 500; + + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + font-weight: 700; + } + } + } + + a { + font-weight: 500; + color: inherit; + text-decoration: underline; + + &:hover, + &:focus, + &:active { + text-decoration: none; + } + } +} + +.account__header__content { + color: $ui-primary-color; + font-size: 14px; + font-weight: 400; + overflow: hidden; + word-break: normal; + word-wrap: break-word; + + p { + margin-bottom: 20px; + + &:last-child { + margin-bottom: 0; + } + } + + a { + color: inherit; + text-decoration: underline; + + &:hover { + text-decoration: none; + } + } +} + +.account__header__display-name { + .emojione { + width: 25px; + height: 25px; + } +} + +.account__action-bar { + border-top: 1px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid lighten($ui-base-color, 8%); + line-height: 36px; + overflow: hidden; + flex: 0 0 auto; + display: flex; +} + +.account__action-bar-dropdown { + flex: 0 1 calc(50% - 140px); + padding: 10px; + + .dropdown--active { + .dropdown__content.dropdown__right { + left: 6px; + right: initial; + } + + &::after { + bottom: initial; + margin-left: 11px; + margin-top: -7px; + right: initial; + } + } +} + +.account__action-bar-links { + display: flex; + flex: 1 1 auto; + line-height: 18px; +} + +.account__action-bar__tab { + text-decoration: none; + overflow: hidden; + flex: 0 1 80px; + border-left: 1px solid lighten($ui-base-color, 8%); + padding: 10px 5px; + + & > span { + display: block; + text-transform: uppercase; + font-size: 11px; + color: $ui-primary-color; + } + + strong { + display: block; + font-size: 15px; + font-weight: 500; + color: $primary-text-color; + + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + font-weight: 700; + } + } + } + + abbr { + color: $ui-base-lighter-color; + } +} + +.account__header__avatar { + background-size: 90px 90px; + display: block; + height: 90px; + margin: 0 auto 10px; + overflow: hidden; + width: 90px; +} + +.account-authorize { + padding: 14px 10px; + + .detailed-status__display-name { + display: block; + margin-bottom: 15px; + overflow: hidden; + } +} + +.account-authorize__avatar { + float: left; + margin-right: 10px; +} + +.notification__message { + margin-left: 68px; + padding: 8px 0; + padding-bottom: 0; + cursor: default; + color: $ui-primary-color; + font-size: 15px; + position: relative; + + .fa { + color: $ui-highlight-color; + } + + > span { + display: block; + overflow: hidden; + text-overflow: ellipsis; + } +} + +.account--panel { + background: lighten($ui-base-color, 4%); + border-top: 1px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid lighten($ui-base-color, 8%); + display: flex; + flex-direction: row; + padding: 10px 0; +} + +.account--panel__button, +.detailed-status__button { + flex: 1 1 auto; + text-align: center; +} + +.column-settings__outer { + background: lighten($ui-base-color, 8%); + padding: 15px; +} + +.column-settings__section { + color: $ui-primary-color; + cursor: default; + display: block; + font-weight: 500; + margin-bottom: 10px; +} + +.column-settings__row { + .text-btn { + margin-bottom: 15px; + } +} + +.account--follows-info { + color: $primary-text-color; + position: absolute; + top: 10px; + left: 10px; + opacity: 0.7; + display: inline-block; + vertical-align: top; + background-color: rgba($base-overlay-background, 0.4); + text-transform: uppercase; + font-size: 11px; + font-weight: 500; + padding: 4px; + border-radius: 4px; +} + +.account--action-button { + position: absolute; + top: 10px; + right: 20px; +} + +.account-gallery__container { + margin: -2px; + padding: 4px; + display: flex; + flex-wrap: wrap; +} + +.account-gallery__item { + flex: 1 1 auto; + width: calc(100% / 3 - 4px); + height: 95px; + margin: 2px; + + a { + display: block; + width: 100%; + height: 100%; + background-color: $base-overlay-background; + background-size: cover; + background-position: center; + position: relative; + color: inherit; + text-decoration: none; + + &:hover, + &:active, + &:focus { + outline: 0; + } + } +} + +.account-section-headline { + color: $ui-base-lighter-color; + background: lighten($ui-base-color, 2%); + border-bottom: 1px solid lighten($ui-base-color, 4%); + padding: 15px 10px; + font-size: 14px; + font-weight: 500; + position: relative; + cursor: default; + + &::before, + &::after { + display: block; + content: ""; + position: absolute; + bottom: 0; + left: 18px; + width: 0; + height: 0; + border-style: solid; + border-width: 0 10px 10px; + border-color: transparent transparent lighten($ui-base-color, 4%); + } + + &::after { + bottom: -1px; + border-color: transparent transparent $ui-base-color; + } +} + +.account__moved-note { + padding: 14px 10px; + padding-bottom: 16px; + background: lighten($ui-base-color, 4%); + border-top: 1px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid lighten($ui-base-color, 8%); + + &__message { + position: relative; + margin-left: 58px; + color: $ui-base-lighter-color; + padding: 8px 0; + padding-top: 0; + padding-bottom: 4px; + font-size: 14px; + + > span { + display: block; + overflow: hidden; + text-overflow: ellipsis; + } + } + + &__icon-wrapper { + left: -26px; + position: absolute; + } + + .detailed-status__display-avatar { + position: relative; + } + + .detailed-status__display-name { + margin-bottom: 0; + } +} diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index b7190c7ad1..8910d000d3 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -264,290 +264,6 @@ color: $ui-base-color; } -.compose-form { - padding: 10px; - - .compose-form__warning { - color: darken($ui-secondary-color, 65%); - margin-bottom: 15px; - background: $ui-primary-color; - box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3); - padding: 8px 10px; - border-radius: 4px; - font-size: 13px; - font-weight: 400; - - strong { - color: darken($ui-secondary-color, 65%); - font-weight: 500; - - @each $lang in $cjk-langs { - &:lang(#{$lang}) { - font-weight: 700; - } - } - } - - a { - color: darken($ui-primary-color, 33%); - font-weight: 500; - text-decoration: underline; - - &:hover, - &:active, - &:focus { - text-decoration: none; - } - } - } - - .compose-form__autosuggest-wrapper { - position: relative; - - .emoji-picker-dropdown { - position: absolute; - right: 5px; - top: 5px; - } - } - - .autosuggest-textarea, - .spoiler-input { - position: relative; - } - - .autosuggest-textarea__textarea, - .spoiler-input__input { - display: block; - box-sizing: border-box; - width: 100%; - margin: 0; - color: $ui-base-color; - background: $simple-background-color; - padding: 10px; - font-family: inherit; - font-size: 14px; - resize: vertical; - border: 0; - outline: 0; - - &:focus { - outline: 0; - } - - @media screen and (max-width: 600px) { - font-size: 16px; - } - } - - .spoiler-input__input { - border-radius: 4px; - } - - .autosuggest-textarea__textarea { - min-height: 100px; - border-radius: 4px 4px 0 0; - padding-bottom: 0; - padding-right: 10px + 22px; - resize: none; - - @media screen and (max-width: 600px) { - height: 100px !important; // prevent auto-resize textarea - resize: vertical; - } - } - - .autosuggest-textarea__suggestions { - box-sizing: border-box; - display: none; - position: absolute; - top: 100%; - width: 100%; - z-index: 99; - box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4); - background: $ui-secondary-color; - border-radius: 0 0 4px 4px; - color: $ui-base-color; - font-size: 14px; - padding: 6px; - - &.autosuggest-textarea__suggestions--visible { - display: block; - } - } - - .autosuggest-textarea__suggestions__item { - padding: 10px; - cursor: pointer; - border-radius: 4px; - - &:hover, - &:focus, - &:active, - &.selected { - background: darken($ui-secondary-color, 10%); - } - } - - .autosuggest-account, - .autosuggest-emoji { - display: flex; - flex-direction: row; - align-items: center; - justify-content: flex-start; - line-height: 18px; - font-size: 14px; - } - - .autosuggest-account-icon, - .autosuggest-emoji img { - display: block; - margin-right: 8px; - width: 16px; - height: 16px; - } - - .autosuggest-account .display-name__account { - color: lighten($ui-base-color, 36%); - } - - .compose-form__modifiers { - color: $ui-base-color; - font-family: inherit; - font-size: 14px; - background: $simple-background-color; - - .compose-form__upload-wrapper { - overflow: hidden; - } - - .compose-form__uploads-wrapper { - display: flex; - flex-direction: row; - padding: 5px; - flex-wrap: wrap; - } - - .compose-form__upload { - flex: 1 1 0; - min-width: 40%; - margin: 5px; - - &-description { - position: absolute; - z-index: 2; - bottom: 0; - left: 0; - right: 0; - box-sizing: border-box; - background: linear-gradient(0deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent); - padding: 10px; - opacity: 0; - transition: opacity .1s ease; - - input { - background: transparent; - color: $ui-secondary-color; - border: 0; - padding: 0; - margin: 0; - width: 100%; - font-family: inherit; - font-size: 14px; - font-weight: 500; - - &:focus { - color: $white; - } - - &::placeholder { - opacity: 0.54; - color: $ui-secondary-color; - } - } - - &.active { - opacity: 1; - } - } - - .icon-button { - mix-blend-mode: difference; - } - } - - .compose-form__upload-thumbnail { - border-radius: 4px; - background-position: center; - background-size: cover; - background-repeat: no-repeat; - height: 100px; - width: 100%; - } - } - - .compose-form__buttons-wrapper { - padding: 10px; - background: darken($simple-background-color, 8%); - border-radius: 0 0 4px 4px; - display: flex; - justify-content: space-between; - - .compose-form__buttons { - display: flex; - - .compose-form__upload-button-icon { - line-height: 27px; - } - - .compose-form__sensitive-button { - display: none; - - &.compose-form__sensitive-button--visible { - display: block; - } - - .compose-form__sensitive-button__icon { - line-height: 27px; - } - } - } - - .icon-button { - box-sizing: content-box; - padding: 0 3px; - } - - .character-counter__wrapper { - align-self: center; - margin-right: 4px; - - .character-counter { - cursor: default; - font-family: 'mastodon-font-sans-serif', sans-serif; - font-size: 14px; - font-weight: 600; - color: lighten($ui-base-color, 12%); - - &.character-counter--over { - color: $warning-red; - } - } - } - } - - .compose-form__publish { - display: flex; - justify-content: flex-end; - min-width: 0; - - .compose-form__publish-button-wrapper { - overflow: hidden; - padding-top: 10px; - } - } -} - .emojione { display: inline-block; font-size: inherit; @@ -562,3305 +278,1390 @@ } } -.reply-indicator { - border-radius: 4px 4px 0 0; - position: relative; - bottom: -2px; - background: $ui-primary-color; - padding: 10px; +.notification__favourite-icon-wrapper { + left: -26px; + position: absolute; + + .star-icon { + color: $gold-star; + } } -.reply-indicator__header { - margin-bottom: 5px; - overflow: hidden; +.star-icon.active { + color: $gold-star; } -.reply-indicator__cancel { - float: right; - line-height: 24px; +.notification__display-name { + color: inherit; + font-weight: 500; + text-decoration: none; + + &:hover { + color: $primary-text-color; + text-decoration: underline; + } } -.reply-indicator__display-name { - color: $ui-base-color; +.display-name { display: block; max-width: 100%; - line-height: 24px; overflow: hidden; - padding-right: 25px; - text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; } -.reply-indicator__display-avatar { - float: left; - margin-right: 5px; +.display-name__html { + font-weight: 500; } -.status__content--with-action { - cursor: pointer; +.display-name__account { + font-size: 14px; } -.status__content, -.reply-indicator__content { - font-size: 15px; - line-height: 20px; - word-wrap: break-word; - font-weight: 400; - overflow: hidden; - white-space: pre-wrap; - padding-top: 2px; - - &: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; +.image-loader { + position: relative; - &:last-child { - margin-bottom: 0; + &.image-loader--loading { + .image-loader__preview-canvas { + filter: blur(2px); } } - a { - color: $ui-secondary-color; - text-decoration: none; - - &:hover { - text-decoration: underline; - - .fa { - color: lighten($ui-base-color, 40%); - } - } - - &.mention { - &:hover { - text-decoration: none; - - span { - text-decoration: underline; - } - } - } - - .fa { - color: lighten($ui-base-color, 30%); - } + .image-loader__img { + position: absolute; + top: 0; + left: 0; + right: 0; + max-width: 100%; + max-height: 100%; + background-image: none; } - .status__content__spoiler-link { - background: lighten($ui-base-color, 30%); + &.image-loader--amorphous { + position: static; - &:hover { - background: lighten($ui-base-color, 33%); - text-decoration: none; + .image-loader__preview-canvas { + display: none; } - } - .status__content__text { - display: none; - - &.status__content__text--visible { - display: block; + .image-loader__img { + position: static; + width: auto; + height: auto; } } } -.status__content__spoiler-link { +.dropdown { display: inline-block; - border-radius: 2px; - background: transparent; - border: 0; - color: lighten($ui-base-color, 8%); - font-weight: 500; - font-size: 11px; - padding: 0 6px; - text-transform: uppercase; - line-height: inherit; - cursor: pointer; } -.status__prepend-icon-wrapper { - left: -26px; +.dropdown__content { + display: none; position: absolute; } -.focusable { - &:focus { - outline: 0; - background: lighten($ui-base-color, 4%); - - .status.status-direct { - background: lighten($ui-base-color, 12%); - - &.muted { - background: transparent; - } - } - - .detailed-status, - .detailed-status__action-bar { - background: lighten($ui-base-color, 8%); - } - } +.dropdown-menu__separator { + border-bottom: 1px solid darken($ui-secondary-color, 8%); + margin: 5px 7px 6px; + height: 0; } -.status { - padding: 8px 10px; - padding-left: 68px; - position: relative; - min-height: 48px; - border-bottom: 1px solid lighten($ui-base-color, 8%); - cursor: default; +.dropdown-menu { + background: $ui-secondary-color; + padding: 4px 0; + border-radius: 4px; + box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); - @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 + ul { + list-style: none; } +} - @keyframes fade { - 0% { opacity: 0; } - 100% { opacity: 1; } - } - - opacity: 1; - animation: fade 150ms linear; +.dropdown-menu__arrow { + position: absolute; + width: 0; + height: 0; + border: 0 solid transparent; - .video-player { - margin-top: 8px; + &.left { + right: -5px; + margin-top: -5px; + border-width: 5px 0 5px 5px; + border-left-color: $ui-secondary-color; } - &.status-direct { - background: lighten($ui-base-color, 8%); - - .icon-button.disabled { - color: lighten($ui-base-color, 16%); - } + &.top { + bottom: -5px; + margin-left: -13px; + border-width: 5px 7px 0; + border-top-color: $ui-secondary-color; } - &.light { - .status__relative-time { - color: $ui-primary-color; - } - - .status__display-name { - color: $ui-base-color; - } - - .display-name { - strong { - color: $ui-base-color; - } - - span { - color: $ui-primary-color; - } - } - - .status__content { - color: $ui-base-color; - - a { - color: $ui-highlight-color; - } - - a.status__content__spoiler-link { - color: $primary-text-color; - background: $ui-primary-color; + &.bottom { + top: -5px; + margin-left: -13px; + border-width: 0 7px 5px; + border-bottom-color: $ui-secondary-color; + } - &:hover { - background: lighten($ui-primary-color, 8%); - } - } - } + &.right { + left: -5px; + margin-top: -5px; + border-width: 5px 5px 5px 0; + border-right-color: $ui-secondary-color; } } -.notification-favourite { - .status.status-direct { - background: transparent; +.dropdown-menu__item { + a { + font-size: 13px; + line-height: 18px; + display: block; + padding: 4px 14px; + box-sizing: border-box; + text-decoration: none; + background: $ui-secondary-color; + color: $ui-base-color; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; - .icon-button.disabled { - color: lighten($ui-base-color, 13%); + &:focus, + &:hover, + &:active { + background: $ui-highlight-color; + color: $ui-secondary-color; + outline: 0; } } } -.status__relative-time { - color: $ui-base-lighter-color; - float: right; - font-size: 14px; -} - -.status__display-name { - color: $ui-base-lighter-color; -} - -.status__info .status__display-name { +.dropdown--active .dropdown__content { display: block; - max-width: 100%; - padding-right: 25px; -} + line-height: 18px; + max-width: 311px; + right: 0; + text-align: left; + z-index: 9999; -.status__info { - font-size: 15px; -} + & > ul { + list-style: none; + background: $ui-secondary-color; + padding: 4px 0; + border-radius: 4px; + box-shadow: 0 0 15px rgba($base-shadow-color, 0.4); + min-width: 140px; + position: relative; + } -.status-check-box { - border-bottom: 1px solid $ui-secondary-color; - display: flex; + &.dropdown__right { + right: 0; + } - .status__content { - flex: 1 1 auto; - padding: 10px; + &.dropdown__left { + & > ul { + left: -98px; + } + } + + & > ul > li > a { + font-size: 13px; + line-height: 18px; + display: block; + padding: 4px 14px; + box-sizing: border-box; + text-decoration: none; + background: $ui-secondary-color; + color: $ui-base-color; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + + &:focus { + outline: 0; + } + + &:hover { + background: $ui-highlight-color; + color: $ui-secondary-color; + } } } -.status-check-box-toggle { - align-items: center; - display: flex; - flex: 0 0 auto; - justify-content: center; - padding: 10px; +.dropdown__icon { + vertical-align: middle; } -.status__prepend { - margin-left: 68px; +.static-content { + padding: 10px; + padding-top: 20px; color: $ui-base-lighter-color; - padding: 8px 0; - padding-bottom: 2px; - font-size: 14px; - position: relative; - .status__display-name strong { - color: $ui-base-lighter-color; + h1 { + font-size: 16px; + font-weight: 500; + margin-bottom: 40px; + text-align: center; } - > span { - display: block; - overflow: hidden; - text-overflow: ellipsis; + p { + font-size: 13px; + margin-bottom: 20px; } } -.status__action-bar { - align-items: center; +.columns-area { display: flex; - margin-top: 8px; -} - -.status__action-bar-button { - float: left; - margin-right: 18px; -} - -.status__action-bar-dropdown { - float: left; - height: 23.15px; - width: 23.15px; -} - -.detailed-status__action-bar-dropdown { flex: 1 1 auto; - display: flex; - align-items: center; - justify-content: center; + flex-direction: row; + justify-content: flex-start; + overflow-x: auto; position: relative; } -.detailed-status { - background: lighten($ui-base-color, 4%); - padding: 14px 10px; - - .status__content { - font-size: 19px; - line-height: 24px; - - .emojione { - width: 24px; - height: 24px; - margin: -1px 0 0; - } +@include limited-single-column('screen and (max-width: 360px)', $parent: null) { + .columns-area { + padding: 10px; } - .video-player { - margin-top: 8px; + .react-swipeable-view-container .columns-area { + height: calc(100% - 20px) !important; } } -.detailed-status__meta { - margin-top: 15px; - color: $ui-base-lighter-color; - font-size: 14px; - line-height: 18px; +.react-swipeable-view-container { + &, + .columns-area, + .drawer, + .column { + height: 100%; + } } -.detailed-status__action-bar { - background: lighten($ui-base-color, 4%); - border-top: 1px solid lighten($ui-base-color, 8%); - border-bottom: 1px solid lighten($ui-base-color, 8%); +.react-swipeable-view-container > * { display: flex; - flex-direction: row; - padding: 10px 0; -} - -.detailed-status__link { - color: inherit; - text-decoration: none; -} - -.detailed-status__favorites, -.detailed-status__reblogs { - display: inline-block; - font-weight: 500; - font-size: 12px; - margin-left: 6px; -} - -.reply-indicator__content { - color: $ui-base-color; - font-size: 14px; - - a { - color: lighten($ui-base-color, 20%); - } + align-items: center; + justify-content: center; + height: 100%; } -.account { - padding: 10px; - border-bottom: 1px solid lighten($ui-base-color, 8%); +.column { + width: 330px; + position: relative; + box-sizing: border-box; + display: flex; + flex-direction: column; - .account__display-name { - flex: 1 1 auto; - display: block; - color: $ui-primary-color; - overflow: hidden; - text-decoration: none; - font-size: 14px; + > .scrollable { + background: $ui-base-color; } } -.account__wrapper { +.ui { + flex: 0 0 auto; display: flex; + flex-direction: column; + width: 100%; + height: 100%; + background: darken($ui-base-color, 7%); } -.account__avatar-wrapper { - float: left; - margin-left: 12px; - margin-right: 12px; +.column { + overflow: hidden; } -.account__avatar { - @include avatar-radius(); - position: relative; - cursor: pointer; - - &-inline { - display: inline-block; - vertical-align: middle; - margin-right: 5px; +@include limited-single-column('screen and (max-width: 360px)', $parent: null) { + .tabs-bar { + margin: 0; } } -.account__avatar-overlay { - @include avatar-size(48px); - - &-base { - @include avatar-radius(); - @include avatar-size(36px); - } +:root { // Overrides .wide stylings for mobile view + @include single-column('screen and (max-width: 630px)', $parent: null) { + .column { + flex: auto; + width: 100%; + min-width: 0; + max-width: none; + padding: 0; + } - &-overlay { - @include avatar-radius(); - @include avatar-size(24px); + .columns-area { + flex-direction: column; + } - position: absolute; - bottom: 0; - right: 0; - z-index: 1; + .search__input, + .autosuggest-textarea__textarea { + font-size: 16px; + } } } -.account__relationship { - height: 18px; - padding: 10px; - white-space: nowrap; -} - -.account__header { - flex: 0 0 auto; - background: lighten($ui-base-color, 4%); - text-align: center; - background-size: cover; - background-position: center; - position: relative; - - &.inactive { - opacity: 0.5; - - .account__header__avatar { - filter: grayscale(100%); - } - - .account__header__username { - color: $ui-primary-color; - } - } - - & > div { - background: rgba(lighten($ui-base-color, 4%), 0.9); - padding: 20px 10px; - } - - .account__header__content { - color: $ui-secondary-color; - } - - .account__header__display-name { - color: $primary-text-color; - display: inline-block; - width: 100%; - font-size: 20px; - line-height: 27px; - font-weight: 500; - overflow: hidden; - text-overflow: ellipsis; - } - - .account__header__username { - color: $ui-highlight-color; - font-size: 14px; - font-weight: 400; - display: block; - margin-bottom: 10px; - overflow: hidden; - text-overflow: ellipsis; - } -} - -.account__disclaimer { - padding: 10px; - border-top: 1px solid lighten($ui-base-color, 8%); - color: $ui-base-lighter-color; - - strong { - font-weight: 500; - - @each $lang in $cjk-langs { - &:lang(#{$lang}) { - font-weight: 700; - } - } +@include multi-columns('screen and (min-width: 631px)', $parent: null) { + .columns-area { + padding: 0; } - a { - font-weight: 500; - color: inherit; - text-decoration: underline; + .column { + flex: 0 0 auto; + padding: 10px; + padding-left: 5px; + padding-right: 5px; - &:hover, - &:focus, - &:active { - text-decoration: none; + &:first-child { + padding-left: 10px; } - } -} - -.account__header__content { - color: $ui-primary-color; - font-size: 14px; - font-weight: 400; - overflow: hidden; - word-break: normal; - word-wrap: break-word; - - p { - margin-bottom: 20px; &:last-child { - margin-bottom: 0; + padding-right: 10px; } } - a { - color: inherit; - text-decoration: underline; - - &:hover { - text-decoration: none; + .columns-area > div { + .column { + padding-left: 5px; + padding-right: 5px; } } } -.account__header__display-name { - .emojione { - width: 25px; - height: 25px; - } -} - -.account__action-bar { - border-top: 1px solid lighten($ui-base-color, 8%); - border-bottom: 1px solid lighten($ui-base-color, 8%); - line-height: 36px; +.drawer__pager { + box-sizing: border-box; + padding: 0; + flex-grow: 1; + position: relative; overflow: hidden; - flex: 0 0 auto; display: flex; } -.account__action-bar-dropdown { - flex: 0 1 calc(50% - 140px); - padding: 10px; +.drawer__inner { + position: absolute; + top: 0; + left: 0; + background: lighten($ui-base-color, 13%) url('~images/wave-drawer.png') no-repeat bottom / 100% auto; + box-sizing: border-box; + padding: 0; + display: flex; + flex-direction: column; + overflow: hidden; + overflow-y: auto; + width: 100%; + height: 100%; - .dropdown--active { - .dropdown__content.dropdown__right { - left: 6px; - right: initial; - } + &.darker { + background: $ui-base-color; + } - &::after { - bottom: initial; - margin-left: 11px; - margin-top: -7px; - right: initial; - } + > .mastodon { + background: url('~images/mastodon-ui.png') no-repeat left bottom / contain; + flex: 1; } } -.account__action-bar-links { +.pseudo-drawer { + background: lighten($ui-base-color, 13%); + font-size: 13px; + text-align: left; +} + +.tabs-bar { display: flex; - flex: 1 1 auto; - line-height: 18px; + background: lighten($ui-base-color, 8%); + flex: 0 0 auto; + overflow-y: auto; } -.account__action-bar__tab { +.tabs-bar__link { + display: block; + flex: 1 1 auto; + padding: 15px 10px; + color: $primary-text-color; text-decoration: none; - overflow: hidden; - flex: 0 1 80px; - border-left: 1px solid lighten($ui-base-color, 8%); - padding: 10px 5px; + text-align: center; + font-size: 14px; + font-weight: 500; + border-bottom: 2px solid lighten($ui-base-color, 8%); + transition: all 200ms linear; - & > span { - display: block; - text-transform: uppercase; - font-size: 11px; - color: $ui-primary-color; + .fa { + font-weight: 400; + font-size: 16px; } - strong { - display: block; - font-size: 15px; - font-weight: 500; - color: $primary-text-color; + &.active { + border-bottom: 2px solid $ui-highlight-color; + color: $ui-highlight-color; + } - @each $lang in $cjk-langs { - &:lang(#{$lang}) { - font-weight: 700; - } + &:hover, + &:focus, + &:active { + @include multi-columns('screen and (min-width: 631px)') { + background: lighten($ui-base-color, 14%); + transition: all 100ms linear; } } - abbr { - color: $ui-base-lighter-color; + span { + margin-left: 5px; + display: none; } } -.account__header__avatar { - background-size: 90px 90px; - display: block; - height: 90px; - margin: 0 auto 10px; - overflow: hidden; - width: 90px; -} - -.account-authorize { - padding: 14px 10px; - - .detailed-status__display-name { - display: block; - margin-bottom: 15px; - overflow: hidden; +@include limited-single-column('screen and (max-width: 600px)', $parent: null) { + .tabs-bar__link { + span { + display: inline; + } } } -.account-authorize__avatar { - float: left; - margin-right: 10px; +@include multi-columns('screen and (min-width: 631px)', $parent: null) { + .tabs-bar { + display: none; + } } -.status__display-name, -.status__relative-time, -.detailed-status__display-name, -.detailed-status__datetime, -.detailed-status__application, -.account__display-name { - text-decoration: none; -} +.scrollable { + overflow-y: scroll; + overflow-x: hidden; + flex: 1 1 auto; + -webkit-overflow-scrolling: touch; + will-change: transform; // improves perf in mobile Chrome -.status__display-name, -.account__display-name { - strong { - color: $primary-text-color; + &.optionally-scrollable { + overflow-y: auto; } -} -.muted { - .emojione { - opacity: 0.5; + @supports(display: grid) { // hack to fix Chrome <57 + contain: strict; } } -.status__display-name, -.reply-indicator__display-name, -.detailed-status__display-name, -.account__display-name { - &:hover strong { - text-decoration: underline; +.scrollable.fullscreen { + @supports(display: grid) { // hack to fix Chrome <57 + contain: none; } } -.account__display-name strong { - display: block; - overflow: hidden; - text-overflow: ellipsis; -} +.column-back-button { + background: lighten($ui-base-color, 4%); + color: $ui-highlight-color; + cursor: pointer; + flex: 0 0 auto; + font-size: 16px; + border: 0; + text-align: unset; + padding: 15px; + margin: 0; + z-index: 3; -.detailed-status__application, -.detailed-status__datetime { - color: inherit; + &:hover { + text-decoration: underline; + } } -.detailed-status__display-name { - color: $ui-secondary-color; - display: block; - line-height: 24px; - margin-bottom: 15px; - overflow: hidden; +.column-header__back-button { + background: lighten($ui-base-color, 4%); + border: 0; + font-family: inherit; + color: $ui-highlight-color; + cursor: pointer; + flex: 0 0 auto; + font-size: 16px; + padding: 0 5px 0 0; + z-index: 3; - strong, - span { - display: block; - text-overflow: ellipsis; - overflow: hidden; + &:hover { + text-decoration: underline; } - strong { - font-size: 16px; - color: $primary-text-color; + &:last-child { + padding: 0 15px 0 0; } } -.detailed-status__display-avatar { - float: left; - margin-right: 10px; +.column-back-button__icon { + display: inline-block; + margin-right: 5px; } -.status__avatar { - height: 48px; - left: 10px; +.column-back-button--slim { + position: relative; +} + +.column-back-button--slim-button { + cursor: pointer; + flex: 0 0 auto; + font-size: 16px; + padding: 15px; position: absolute; - top: 10px; - width: 48px; + right: 0; + top: -48px; } -.muted { - .status__content p, - .status__content a { - color: $ui-base-lighter-color; - } +.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; +} - .status__display-name strong { - color: $ui-base-lighter-color; - } +.react-toggle-screenreader-only { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} - .status__avatar { - opacity: 0.5; - } +.react-toggle--disabled { + cursor: not-allowed; + opacity: 0.5; + transition: opacity 0.25s; +} - a.status__content__spoiler-link { - background: $ui-base-lighter-color; - color: lighten($ui-base-color, 4%); +.react-toggle-track { + width: 50px; + height: 24px; + padding: 0; + border-radius: 30px; + background-color: $ui-base-color; + transition: all 0.2s ease; +} - &:hover { - background: lighten($ui-base-color, 29%); - text-decoration: none; - } - } +.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track { + background-color: darken($ui-base-color, 10%); } -.notification__message { - margin-left: 68px; - padding: 8px 0; - padding-bottom: 0; - cursor: default; - color: $ui-primary-color; - font-size: 15px; - position: relative; +.react-toggle--checked .react-toggle-track { + background-color: $ui-highlight-color; +} - .fa { - color: $ui-highlight-color; - } +.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { + background-color: lighten($ui-highlight-color, 10%); +} - > span { - display: block; - overflow: hidden; - text-overflow: ellipsis; - } +.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; } -.notification__favourite-icon-wrapper { - left: -26px; +.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; +} - .star-icon { - color: $gold-star; - } +.react-toggle--checked .react-toggle-track-x { + opacity: 0; } -.star-icon.active { - color: $gold-star; +.react-toggle-thumb { + transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms; + position: absolute; + top: 1px; + left: 1px; + width: 22px; + height: 22px; + border: 1px solid $ui-base-color; + border-radius: 50%; + background-color: darken($simple-background-color, 2%); + box-sizing: border-box; + transition: all 0.25s ease; } -.notification__display-name { - color: inherit; - font-weight: 500; +.react-toggle--checked .react-toggle-thumb { + left: 27px; + border-color: $ui-highlight-color; +} + +.column-link { + background: lighten($ui-base-color, 8%); + color: $primary-text-color; + display: block; + font-size: 16px; + padding: 15px; text-decoration: none; &:hover { - color: $primary-text-color; - text-decoration: underline; + background: lighten($ui-base-color, 11%); } } -.display-name { - display: block; - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; +.column-link__icon { + display: inline-block; + margin-right: 5px; } -.display-name__html { +.column-subheading { + background: $ui-base-color; + color: $ui-base-lighter-color; + padding: 8px 20px; + font-size: 12px; font-weight: 500; + text-transform: uppercase; + cursor: default; } -.display-name__account { - font-size: 14px; +.getting-started__wrapper, +.getting_started { + background: $ui-base-color; } -.status__relative-time, -.detailed-status__datetime { - &:hover { - text-decoration: underline; - } +.getting-started__wrapper { + position: relative; + overflow-y: auto; } -.image-loader { - position: relative; +.getting-started { + background: $ui-base-color; + flex: 1 0 auto; - &.image-loader--loading { - .image-loader__preview-canvas { - filter: blur(2px); - } + p { + color: $ui-secondary-color; } - .image-loader__img { - position: absolute; - top: 0; - left: 0; - right: 0; - max-width: 100%; - max-height: 100%; - background-image: none; + a { + color: $ui-base-lighter-color; } +} - &.image-loader--amorphous { - position: static; +.keyboard-shortcuts { + padding: 8px 0 0; + overflow: hidden; - .image-loader__preview-canvas { - display: none; - } + thead { + position: absolute; + left: -9999px; + } - .image-loader__img { - position: static; - width: auto; - height: auto; - } + td { + padding: 0 10px 8px; + } + + kbd { + display: inline-block; + padding: 3px 5px; + background-color: lighten($ui-base-color, 8%); + border: 1px solid darken($ui-base-color, 4%); } } -.navigation-bar { - padding: 10px; - display: flex; - flex-shrink: 0; - cursor: default; +.setting-text { color: $ui-primary-color; + background: transparent; + border: none; + border-bottom: 2px solid $ui-primary-color; + box-sizing: border-box; + display: block; + font-family: inherit; + margin-bottom: 10px; + padding: 7px 0; + width: 100%; - strong { + &:focus, + &:active { color: $primary-text-color; + border-bottom-color: $ui-highlight-color; } - .permalink { - text-decoration: none; + @include limited-single-column('screen and (max-width: 600px)') { + font-size: 16px; } - .icon-button { - pointer-events: none; - opacity: 0; + &.light { + color: $ui-base-color; + border-bottom: 2px solid lighten($ui-base-color, 27%); + + &:focus, + &:active { + color: $ui-base-color; + border-bottom-color: $ui-highlight-color; + } } } -.navigation-bar__profile { - flex: 1 1 auto; - margin-left: 8px; - overflow: hidden; -} +@import 'boost'; -.navigation-bar__profile-account { - display: block; - font-weight: 500; - overflow: hidden; - text-overflow: ellipsis; -} +.no-reduce-motion button.icon-button i.fa-retweet { + background-position: 0 0; + height: 19px; + transition: background-position 0.9s steps(10); + transition-duration: 0s; + vertical-align: middle; + width: 22px; -.navigation-bar__profile-edit { - color: inherit; - text-decoration: none; + &::before { + display: none !important; + } } -.dropdown { - display: inline-block; -} - -.dropdown__content { - display: none; - position: absolute; -} - -.dropdown-menu__separator { - border-bottom: 1px solid darken($ui-secondary-color, 8%); - margin: 5px 7px 6px; - height: 0; -} - -.dropdown-menu { - background: $ui-secondary-color; - padding: 4px 0; - border-radius: 4px; - box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); - - ul { - list-style: none; - } +.no-reduce-motion button.icon-button.active i.fa-retweet { + transition-duration: 0.9s; + background-position: 0 100%; } -.dropdown-menu__arrow { - position: absolute; - width: 0; - height: 0; - border: 0 solid transparent; - - &.left { - right: -5px; - margin-top: -5px; - border-width: 5px 0 5px 5px; - border-left-color: $ui-secondary-color; - } - - &.top { - bottom: -5px; - margin-left: -13px; - border-width: 5px 7px 0; - border-top-color: $ui-secondary-color; - } - - &.bottom { - top: -5px; - margin-left: -13px; - border-width: 0 7px 5px; - border-bottom-color: $ui-secondary-color; - } - - &.right { - left: -5px; - margin-top: -5px; - border-width: 5px 5px 5px 0; - border-right-color: $ui-secondary-color; - } +.reduce-motion button.icon-button i.fa-retweet { + color: $ui-base-lighter-color; + transition: color 100ms ease-in; } -.dropdown-menu__item { - a { - font-size: 13px; - line-height: 18px; - display: block; - padding: 4px 14px; - box-sizing: border-box; - text-decoration: none; - background: $ui-secondary-color; - color: $ui-base-color; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - - &:focus, - &:hover, - &:active { - background: $ui-highlight-color; - color: $ui-secondary-color; - outline: 0; - } - } +.reduce-motion button.icon-button.active i.fa-retweet { + color: $ui-highlight-color; } -.dropdown--active .dropdown__content { +.load-more { display: block; - line-height: 18px; - max-width: 311px; - right: 0; - text-align: left; - z-index: 9999; - - & > ul { - list-style: none; - background: $ui-secondary-color; - padding: 4px 0; - border-radius: 4px; - box-shadow: 0 0 15px rgba($base-shadow-color, 0.4); - min-width: 140px; - position: relative; - } - - &.dropdown__right { - right: 0; - } - - &.dropdown__left { - & > ul { - left: -98px; - } - } - - & > ul > li > a { - font-size: 13px; - line-height: 18px; - display: block; - padding: 4px 14px; - box-sizing: border-box; - text-decoration: none; - background: $ui-secondary-color; - color: $ui-base-color; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - - &:focus { - outline: 0; - } - - &:hover { - background: $ui-highlight-color; - color: $ui-secondary-color; - } - } -} - -.dropdown__icon { - vertical-align: middle; -} - -.static-content { - padding: 10px; - padding-top: 20px; color: $ui-base-lighter-color; + background-color: transparent; + border: 0; + font-size: inherit; + text-align: center; + line-height: inherit; + margin: 0; + padding: 15px; + width: 100%; + clear: both; - h1 { - font-size: 16px; - font-weight: 500; - margin-bottom: 40px; - text-align: center; - } - - p { - font-size: 13px; - margin-bottom: 20px; + &:hover { + background: lighten($ui-base-color, 2%); } } -.columns-area { +.missing-indicator { + text-align: center; + font-size: 16px; + font-weight: 500; + color: lighten($ui-base-color, 16%); + background: $ui-base-color; + cursor: default; display: flex; flex: 1 1 auto; - flex-direction: row; - justify-content: flex-start; - overflow-x: auto; - position: relative; -} - -@include limited-single-column('screen and (max-width: 360px)', $parent: null) { - .columns-area { - padding: 10px; - } - - .react-swipeable-view-container .columns-area { - height: calc(100% - 20px) !important; - } -} - -.react-swipeable-view-container { - &, - .columns-area, - .drawer, - .column { - height: 100%; - } -} - -.react-swipeable-view-container > * { - display: flex; align-items: center; justify-content: center; - height: 100%; -} - -.column { - width: 330px; - position: relative; - box-sizing: border-box; - display: flex; - flex-direction: column; - > .scrollable { - background: $ui-base-color; + & > div { + background: url('~images/mastodon-not-found.png') no-repeat center -50px; + padding-top: 210px; + width: 100%; } } -.ui { +.column-header__wrapper { + position: relative; flex: 0 0 auto; - display: flex; - flex-direction: column; - width: 100%; - height: 100%; - background: darken($ui-base-color, 7%); -} - -.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: $ui-primary-color; - text-decoration: none; - text-align: center; - font-size: 16px; - border-bottom: 2px solid transparent; -} - -.column { - overflow: hidden; -} - -@include limited-single-column('screen and (max-width: 360px)', $parent: null) { - .tabs-bar { - margin: 0; - } -} -:root { // Overrides .wide stylings for mobile view - @include single-column('screen and (max-width: 630px)', $parent: null) { - .column { - flex: auto; - width: 100%; - min-width: 0; - max-width: none; - padding: 0; - } - - .columns-area { - flex-direction: column; - } - - .search__input, - .autosuggest-textarea__textarea { - font-size: 16px; - } - } -} - -@include multi-columns('screen and (min-width: 631px)', $parent: null) { - .columns-area { - padding: 0; - } - - .column { - 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 { - padding-left: 5px; - padding-right: 5px; - } - } -} - -.drawer__pager { - box-sizing: border-box; - padding: 0; - flex-grow: 1; - position: relative; - overflow: hidden; - display: flex; -} - -.drawer__inner { - position: absolute; - top: 0; - left: 0; - background: lighten($ui-base-color, 13%) url('~images/wave-drawer.png') no-repeat bottom / 100% auto; - box-sizing: border-box; - padding: 0; - display: flex; - flex-direction: column; - overflow: hidden; - overflow-y: auto; - width: 100%; - height: 100%; - - &.darker { - background: $ui-base-color; - } - - > .mastodon { - background: url('~images/mastodon-ui.png') no-repeat left bottom / contain; - flex: 1; - } -} - -.pseudo-drawer { - background: lighten($ui-base-color, 13%); - font-size: 13px; - text-align: left; -} - -.drawer__header { - flex: 0 0 auto; - font-size: 16px; - background: lighten($ui-base-color, 8%); - margin-bottom: 10px; - display: flex; - flex-direction: row; - - a { - transition: background 100ms ease-in; - - &:hover { - background: lighten($ui-base-color, 3%); - transition: background 200ms ease-out; - } - } -} - -.tabs-bar { - display: flex; - background: lighten($ui-base-color, 8%); - flex: 0 0 auto; - overflow-y: auto; -} - -.tabs-bar__link { - display: block; - flex: 1 1 auto; - padding: 15px 10px; - color: $primary-text-color; - text-decoration: none; - text-align: center; - font-size: 14px; - font-weight: 500; - border-bottom: 2px solid lighten($ui-base-color, 8%); - transition: all 200ms linear; - - .fa { - font-weight: 400; - font-size: 16px; - } - - &.active { - border-bottom: 2px solid $ui-highlight-color; - color: $ui-highlight-color; - } - - &:hover, - &:focus, - &:active { - @include multi-columns('screen and (min-width: 631px)') { - background: lighten($ui-base-color, 14%); - transition: all 100ms linear; - } - } - - span { - margin-left: 5px; - display: none; - } -} - -@include limited-single-column('screen and (max-width: 600px)', $parent: null) { - .tabs-bar__link { - span { - display: inline; - } - } -} - -@include multi-columns('screen and (min-width: 631px)', $parent: null) { - .tabs-bar { - display: none; - } -} - -.scrollable { - overflow-y: scroll; - overflow-x: hidden; - flex: 1 1 auto; - -webkit-overflow-scrolling: touch; - will-change: transform; // improves perf in mobile Chrome - - &.optionally-scrollable { - overflow-y: auto; - } - - @supports(display: grid) { // hack to fix Chrome <57 - contain: strict; - } -} - -.scrollable.fullscreen { - @supports(display: grid) { // hack to fix Chrome <57 - contain: none; - } -} - -.column-back-button { - background: lighten($ui-base-color, 4%); - color: $ui-highlight-color; - cursor: pointer; - flex: 0 0 auto; - font-size: 16px; - border: 0; - text-align: unset; - padding: 15px; - margin: 0; - z-index: 3; - - &:hover { - text-decoration: underline; - } -} - -.column-header__back-button { - background: lighten($ui-base-color, 4%); - border: 0; - font-family: inherit; - color: $ui-highlight-color; - cursor: pointer; - flex: 0 0 auto; - font-size: 16px; - padding: 0 5px 0 0; - z-index: 3; - - &:hover { - text-decoration: underline; - } - - &:last-child { - padding: 0 15px 0 0; - } -} - -.column-back-button__icon { - display: inline-block; - margin-right: 5px; -} - -.column-back-button--slim { - position: relative; -} - -.column-back-button--slim-button { - cursor: pointer; - flex: 0 0 auto; - font-size: 16px; - padding: 15px; - position: absolute; - right: 0; - top: -48px; -} - -.react-toggle { - display: inline-block; - position: relative; - cursor: pointer; - background-color: transparent; - border: 0; - padding: 0; - user-select: none; - -webkit-tap-highlight-color: rgba($base-overlay-background, 0); - -webkit-tap-highlight-color: transparent; -} - -.react-toggle-screenreader-only { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; -} - -.react-toggle--disabled { - cursor: not-allowed; - opacity: 0.5; - transition: opacity 0.25s; -} - -.react-toggle-track { - width: 50px; - height: 24px; - padding: 0; - border-radius: 30px; - background-color: $ui-base-color; - transition: all 0.2s ease; -} - -.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track { - background-color: darken($ui-base-color, 10%); -} - -.react-toggle--checked .react-toggle-track { - background-color: $ui-highlight-color; -} - -.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { - background-color: lighten($ui-highlight-color, 10%); -} - -.react-toggle-track-check { - position: absolute; - width: 14px; - height: 10px; - top: 0; - bottom: 0; - margin-top: auto; - margin-bottom: auto; - line-height: 0; - left: 8px; - opacity: 0; - transition: opacity 0.25s ease; -} - -.react-toggle--checked .react-toggle-track-check { - opacity: 1; - transition: opacity 0.25s ease; -} - -.react-toggle-track-x { - position: absolute; - width: 10px; - height: 10px; - top: 0; - bottom: 0; - margin-top: auto; - margin-bottom: auto; - line-height: 0; - right: 10px; - opacity: 1; - transition: opacity 0.25s ease; -} - -.react-toggle--checked .react-toggle-track-x { - opacity: 0; -} - -.react-toggle-thumb { - transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms; - position: absolute; - top: 1px; - left: 1px; - width: 22px; - height: 22px; - border: 1px solid $ui-base-color; - border-radius: 50%; - background-color: darken($simple-background-color, 2%); - box-sizing: border-box; - transition: all 0.25s ease; -} - -.react-toggle--checked .react-toggle-thumb { - left: 27px; - border-color: $ui-highlight-color; -} - -.column-link { - background: lighten($ui-base-color, 8%); - color: $primary-text-color; - display: block; - font-size: 16px; - padding: 15px; - text-decoration: none; - - &:hover { - background: lighten($ui-base-color, 11%); - } -} - -.column-link__icon { - display: inline-block; - margin-right: 5px; -} - -.column-subheading { - background: $ui-base-color; - color: $ui-base-lighter-color; - padding: 8px 20px; - font-size: 12px; - font-weight: 500; - text-transform: uppercase; - cursor: default; -} - -.getting-started__wrapper, -.getting_started { - background: $ui-base-color; -} - -.getting-started__wrapper { - position: relative; - overflow-y: auto; -} - -.getting-started { - background: $ui-base-color; - flex: 1 0 auto; - - p { - color: $ui-secondary-color; - } - - a { - color: $ui-base-lighter-color; - } -} - -.keyboard-shortcuts { - padding: 8px 0 0; - overflow: hidden; - - thead { - position: absolute; - left: -9999px; - } - - td { - padding: 0 10px 8px; - } - - kbd { - display: inline-block; - padding: 3px 5px; - background-color: lighten($ui-base-color, 8%); - border: 1px solid darken($ui-base-color, 4%); - } -} - -.setting-text { - color: $ui-primary-color; - background: transparent; - border: none; - border-bottom: 2px solid $ui-primary-color; - box-sizing: border-box; - display: block; - font-family: inherit; - margin-bottom: 10px; - padding: 7px 0; - width: 100%; - - &:focus, - &:active { - color: $primary-text-color; - border-bottom-color: $ui-highlight-color; - } - - @include limited-single-column('screen and (max-width: 600px)') { - font-size: 16px; - } - - &.light { - color: $ui-base-color; - border-bottom: 2px solid lighten($ui-base-color, 27%); - - &:focus, - &:active { - color: $ui-base-color; - border-bottom-color: $ui-highlight-color; - } - } -} - -@import 'boost'; - -.no-reduce-motion button.icon-button i.fa-retweet { - background-position: 0 0; - height: 19px; - transition: background-position 0.9s steps(10); - transition-duration: 0s; - vertical-align: middle; - width: 22px; - - &::before { - display: none !important; - } -} - -.no-reduce-motion button.icon-button.active i.fa-retweet { - transition-duration: 0.9s; - background-position: 0 100%; -} - -.reduce-motion button.icon-button i.fa-retweet { - color: $ui-base-lighter-color; - transition: color 100ms ease-in; -} - -.reduce-motion button.icon-button.active i.fa-retweet { - color: $ui-highlight-color; -} - -.status-card { - display: flex; - cursor: pointer; - font-size: 14px; - border: 1px solid lighten($ui-base-color, 8%); - border-radius: 4px; - color: $ui-base-lighter-color; - margin-top: 14px; - text-decoration: none; - overflow: hidden; - - &:hover { - background: lighten($ui-base-color, 8%); - } -} - -.status-card-video, -.status-card-rich, -.status-card-photo { - margin-top: 14px; - overflow: hidden; - - iframe { - width: 100%; - height: auto; - } -} - -.status-card-photo { - cursor: zoom-in; - display: block; - text-decoration: none; - width: 100%; - height: auto; - margin: 0; -} - -.status-card-video { - iframe { - width: 100%; - height: 100%; - } -} - -.status-card__title { - display: block; - font-weight: 500; - margin-bottom: 5px; - color: $ui-primary-color; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.status-card__content { - flex: 1 1 auto; - overflow: hidden; - padding: 14px 14px 14px 8px; -} - -.status-card__description { - color: $ui-primary-color; -} - -.status-card__host { - display: block; - margin-top: 5px; - font-size: 13px; -} - -.status-card__image { - flex: 0 0 100px; - background: lighten($ui-base-color, 8%); -} - -.status-card.horizontal { - display: block; - - .status-card__image { - width: 100%; - } - - .status-card__image-image { - border-radius: 4px 4px 0 0; - } - - .status-card__title { - white-space: inherit; - } -} - -.status-card__image-image { - border-radius: 4px 0 0 4px; - display: block; - margin: 0; - width: 100%; - height: 100%; - object-fit: cover; -} - -.load-more { - display: block; - color: $ui-base-lighter-color; - background-color: transparent; - border: 0; - font-size: inherit; - text-align: center; - line-height: inherit; - margin: 0; - padding: 15px; - width: 100%; - clear: both; - - &:hover { - background: lighten($ui-base-color, 2%); - } -} - -.missing-indicator { - text-align: center; - font-size: 16px; - font-weight: 500; - color: lighten($ui-base-color, 16%); - background: $ui-base-color; - cursor: default; - display: flex; - flex: 1 1 auto; - align-items: center; - justify-content: center; - - & > div { - background: url('~images/mastodon-not-found.png') no-repeat center -50px; - padding-top: 210px; - width: 100%; - } -} - -.column-header__wrapper { - position: relative; - flex: 0 0 auto; - - &.active { - &::before { - display: block; - content: ""; - position: absolute; - top: 35px; - left: 0; - right: 0; - margin: 0 auto; - width: 60%; - pointer-events: none; - height: 28px; - z-index: 1; - background: radial-gradient(ellipse, rgba($ui-highlight-color, 0.23) 0%, rgba($ui-highlight-color, 0) 60%); - } - } -} - -.column-header { - display: flex; - padding: 15px; - font-size: 16px; - background: lighten($ui-base-color, 4%); - flex: 0 0 auto; - cursor: pointer; - position: relative; - z-index: 2; - outline: 0; - - &.active { - box-shadow: 0 1px 0 rgba($ui-highlight-color, 0.3); - - .column-header__icon { - color: $ui-highlight-color; - text-shadow: 0 0 10px rgba($ui-highlight-color, 0.4); - } - } - - &:focus, - &:active { - outline: 0; - } -} - -.column-header__buttons { - height: 48px; - display: flex; - margin: -15px; - margin-left: 0; -} - -.column-header__links .text-btn { - margin-right: 10px; -} - -.column-header__button { - background: lighten($ui-base-color, 4%); - border: 0; - color: $ui-primary-color; - cursor: pointer; - font-size: 16px; - padding: 0 15px; - - &:hover { - color: lighten($ui-primary-color, 7%); - } - - &.active { - color: $primary-text-color; - background: lighten($ui-base-color, 8%); - - &:hover { - color: $primary-text-color; - background: lighten($ui-base-color, 8%); - } - } -} - -.column-header__collapsible { - max-height: 70vh; - overflow: hidden; - overflow-y: auto; - color: $ui-primary-color; - transition: max-height 150ms ease-in-out, opacity 300ms linear; - opacity: 1; - - &.collapsed { - max-height: 0; - opacity: 0.5; - } - - &.animating { - overflow-y: hidden; - } - - hr { - height: 0; - background: transparent; - border: 0; - border-top: 1px solid lighten($ui-base-color, 12%); - margin: 10px 0; - } -} - -.column-header__collapsible-inner { - background: lighten($ui-base-color, 8%); - padding: 15px; -} - -.column-header__setting-btn { - &:hover { - color: lighten($ui-primary-color, 4%); - text-decoration: underline; - } -} - -.column-header__setting-arrows { - float: right; - - .column-header__setting-btn { - padding: 0 10px; - - &:last-child { - padding-right: 0; - } - } -} - -.column-header__title { - display: inline-block; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - flex: 1; -} - -.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: lighten($ui-base-color, 26%); - font-size: 12px; - font-weight: 400; - text-transform: uppercase; - overflow: visible; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - - span { - display: block; - float: left; - margin-left: 50%; - transform: translateX(-50%); - margin: 82px 0 0 50%; - white-space: nowrap; - animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000); - } -} - -.loading-indicator__figure { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 0; - height: 0; - box-sizing: border-box; - border: 0 solid lighten($ui-base-color, 26%); - border-radius: 50%; - animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000); -} - -@keyframes loader-figure { - 0% { - width: 0; - height: 0; - background-color: lighten($ui-base-color, 26%); - } - - 29% { - background-color: lighten($ui-base-color, 26%); - } - - 30% { - width: 42px; - height: 42px; - background-color: transparent; - border-width: 21px; - opacity: 1; - } - - 100% { - width: 42px; - height: 42px; - border-width: 0; - opacity: 0; - background-color: transparent; - } -} - -@keyframes loader-label { - 0% { opacity: 0.25; } - 30% { opacity: 1; } - 100% { opacity: 0.25; } -} - -.spoiler-button { - display: none; - left: 4px; - position: absolute; - text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color; - top: 4px; - z-index: 100; - - &.spoiler-button--visible { - display: block; - } -} - -.modal-container--preloader { - background: lighten($ui-base-color, 8%); -} - -.account--panel { - background: lighten($ui-base-color, 4%); - border-top: 1px solid lighten($ui-base-color, 8%); - border-bottom: 1px solid lighten($ui-base-color, 8%); - display: flex; - flex-direction: row; - padding: 10px 0; -} - -.account--panel__button, -.detailed-status__button { - flex: 1 1 auto; - text-align: center; -} - -.column-settings__outer { - background: lighten($ui-base-color, 8%); - padding: 15px; -} - -.column-settings__section { - color: $ui-primary-color; - cursor: default; - display: block; - font-weight: 500; - margin-bottom: 10px; -} - -.column-settings__row { - .text-btn { - margin-bottom: 15px; - } -} - -.modal-container__nav { - align-items: center; - background: rgba($base-overlay-background, 0.5); - box-sizing: border-box; - border: 0; - color: $primary-text-color; - cursor: pointer; - display: flex; - font-size: 24px; - height: 100%; - padding: 30px 15px; - position: absolute; - top: 0; -} - -.modal-container__nav--left { - left: -61px; -} - -.modal-container__nav--right { - right: -61px; -} - -.account--follows-info { - color: $primary-text-color; - position: absolute; - top: 10px; - left: 10px; - opacity: 0.7; - display: inline-block; - vertical-align: top; - background-color: rgba($base-overlay-background, 0.4); - text-transform: uppercase; - font-size: 11px; - font-weight: 500; - padding: 4px; - border-radius: 4px; -} - -.account--action-button { - position: absolute; - top: 10px; - right: 20px; -} - -.setting-toggle { - display: block; - line-height: 24px; -} - -.setting-toggle__label, -.setting-meta__label { - color: $ui-primary-color; - display: inline-block; - margin-bottom: 14px; - margin-left: 8px; - vertical-align: middle; -} - -.setting-meta__label { - color: $ui-primary-color; - float: right; -} - -.empty-column-indicator, -.error-column { - color: lighten($ui-base-color, 20%); - background: $ui-base-color; - text-align: center; - padding: 20px; - font-size: 15px; - font-weight: 400; - cursor: default; - display: flex; - flex: 1 1 auto; - align-items: center; - justify-content: center; - @supports(display: grid) { // hack to fix Chrome <57 - contain: strict; - } - - a { - color: $ui-highlight-color; - text-decoration: none; - - &:hover { - text-decoration: underline; - } - } -} - -.error-column { - flex-direction: column; -} - -@keyframes heartbeat { - from { - transform: scale(1); - transform-origin: center center; - 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; - } -} - -.pulse-loading { - animation: heartbeat 1.5s ease-in-out infinite both; -} - -.emoji-picker-dropdown__menu { - background: $simple-background-color; - position: absolute; - box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4); - border-radius: 4px; - margin-top: 5px; - - .emoji-mart-scroll { - transition: opacity 200ms ease; - } - - &.selecting .emoji-mart-scroll { - opacity: 0.5; - } -} - -.emoji-picker-dropdown__modifiers { - position: absolute; - top: 60px; - right: 11px; - cursor: pointer; -} - -.emoji-picker-dropdown__modifiers__menu { - position: absolute; - z-index: 4; - top: -4px; - left: -8px; - background: $simple-background-color; - border-radius: 4px; - box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); - overflow: hidden; - - button { - display: block; - cursor: pointer; - border: 0; - padding: 4px 8px; - background: transparent; - - &:hover, - &:focus, - &:active { - background: rgba($ui-secondary-color, 0.4); - } - } - - .emoji-mart-emoji { - height: 22px; - } -} - -.emoji-mart-emoji { - span { - background-repeat: no-repeat; - } -} - -.upload-area { - align-items: center; - background: rgba($base-overlay-background, 0.8); - display: flex; - height: 100%; - justify-content: center; - left: 0; - opacity: 0; - position: absolute; - top: 0; - visibility: hidden; - width: 100%; - z-index: 2000; - - * { - pointer-events: none; - } -} - -.upload-area__drop { - width: 320px; - height: 160px; - display: flex; - box-sizing: border-box; - position: relative; - padding: 8px; -} - -.upload-area__background { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: -1; - border-radius: 4px; - background: $ui-base-color; - box-shadow: 0 0 5px rgba($base-shadow-color, 0.2); -} - -.upload-area__content { - flex: 1; - display: flex; - align-items: center; - justify-content: center; - color: $ui-secondary-color; - font-size: 18px; - font-weight: 500; - border: 2px dashed $ui-base-lighter-color; - border-radius: 4px; -} - -.upload-progress { - padding: 10px; - color: $ui-base-lighter-color; - overflow: hidden; - display: flex; - - .fa { - font-size: 34px; - margin-right: 10px; - } - - span { - font-size: 12px; - text-transform: uppercase; - font-weight: 500; - display: block; - } -} - -.upload-progess__message { - flex: 1 1 auto; -} - -.upload-progress__backdrop { - width: 100%; - height: 6px; - border-radius: 6px; - background: $ui-base-lighter-color; - position: relative; - margin-top: 5px; -} - -.upload-progress__tracker { - position: absolute; - left: 0; - top: 0; - height: 6px; - background: $ui-highlight-color; - border-radius: 6px; -} - -.emoji-button { - display: block; - font-size: 24px; - line-height: 24px; - margin-left: 2px; - width: 24px; - 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 { - position: absolute; - background: $simple-background-color; - box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); - border-radius: 4px; - margin-left: 40px; - overflow: hidden; - transform-origin: 50% 0; -} - -.privacy-dropdown__option { - color: $ui-base-color; - padding: 10px; - cursor: pointer; - display: flex; - - &:hover, &.active { - background: $ui-highlight-color; - color: $primary-text-color; - - .privacy-dropdown__option__content { - color: $primary-text-color; - - strong { - color: $primary-text-color; - } - } - } - - &.active:hover { - background: lighten($ui-highlight-color, 4%); - } -} - -.privacy-dropdown__option__icon { - display: flex; - align-items: center; - justify-content: center; - margin-right: 10px; -} - -.privacy-dropdown__option__content { - flex: 1 1 auto; - color: darken($ui-primary-color, 24%); - - strong { - font-weight: 500; - display: block; - color: $ui-base-color; - - @each $lang in $cjk-langs { - &:lang(#{$lang}) { - font-weight: 700; - } - } - } -} - -.privacy-dropdown.active { - .privacy-dropdown__value { - background: $simple-background-color; - border-radius: 4px 4px 0 0; - box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1); - - .icon-button { - transition: none; - } - - &.active { - background: $ui-highlight-color; - - .icon-button { - color: $primary-text-color; - } - } - } - - .privacy-dropdown__dropdown { - display: block; - box-shadow: 2px 4px 6px rgba($base-shadow-color, 0.1); - } -} - -.search { - position: relative; -} - -.search__input { - outline: 0; - box-sizing: border-box; - display: block; - width: 100%; - border: none; - padding: 10px; - padding-right: 30px; - font-family: inherit; - background: $ui-base-color; - color: $ui-primary-color; - font-size: 14px; - margin: 0; - - &::-moz-focus-inner { - border: 0; - } - - &::-moz-focus-inner, - &:focus, - &:active { - outline: 0 !important; - } - - &:focus { - background: lighten($ui-base-color, 4%); - } - - @media screen and (max-width: 600px) { - font-size: 16px; - } -} - -.search__icon { - .fa { - position: absolute; - top: 10px; - right: 10px; - z-index: 2; - display: inline-block; - opacity: 0; - transition: all 100ms linear; - font-size: 18px; - width: 18px; - height: 18px; - color: $ui-secondary-color; - cursor: default; - pointer-events: none; - - &.active { - pointer-events: auto; - opacity: 0.3; - } - } - - .fa-search { - transform: rotate(90deg); - - &.active { - pointer-events: none; - transform: rotate(0deg); - } - } - - .fa-times-circle { - top: 11px; - transform: rotate(0deg); - cursor: pointer; - - &.active { - transform: rotate(90deg); - } - - &:hover { - color: $primary-text-color; - } - } -} - -.search-results__header { - color: $ui-base-lighter-color; - background: lighten($ui-base-color, 2%); - border-bottom: 1px solid darken($ui-base-color, 4%); - padding: 15px 10px; - font-size: 14px; - font-weight: 500; -} - -.search-results__hashtag { - display: block; - padding: 10px; - color: $ui-secondary-color; - text-decoration: none; - - &:hover, - &:active, - &:focus { - color: lighten($ui-secondary-color, 4%); - text-decoration: underline; - } -} - -.modal-root { - transition: opacity 0.3s linear; - will-change: opacity; - z-index: 9999; -} - -.modal-root__overlay { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba($base-overlay-background, 0.7); -} - -.modal-root__container { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - align-content: space-around; - z-index: 9999; - pointer-events: none; - user-select: none; + &::before { + display: block; + content: ""; + position: absolute; + top: 35px; + left: 0; + right: 0; + margin: 0 auto; + width: 60%; + pointer-events: none; + height: 28px; + z-index: 1; + background: radial-gradient(ellipse, rgba($ui-highlight-color, 0.23) 0%, rgba($ui-highlight-color, 0) 60%); + } + } } -.modal-root__modal { - pointer-events: auto; +.column-header { display: flex; - z-index: 9999; -} - -.media-modal { - max-width: 80vw; - max-height: 80vh; + padding: 15px; + font-size: 16px; + background: lighten($ui-base-color, 4%); + flex: 0 0 auto; + cursor: pointer; position: relative; + z-index: 2; + outline: 0; - .extended-video-player, - img, - canvas, - video { - max-width: 80vw; - max-height: 80vh; - width: auto; - height: auto; - margin: auto; - } - - .extended-video-player, - video { - display: flex; - width: 80vw; - height: 80vh; - } + &.active { + box-shadow: 0 1px 0 rgba($ui-highlight-color, 0.3); - img, - canvas { - display: block; - background: url('~images/void.png') repeat; - object-fit: contain; + .column-header__icon { + color: $ui-highlight-color; + text-shadow: 0 0 10px rgba($ui-highlight-color, 0.4); + } } - .react-swipeable-view-container { - max-width: 80vw; + &:focus, + &:active { + outline: 0; } } -.media-modal__content { - background: $base-overlay-background; -} - -.media-modal__pagination { - width: 100%; - text-align: center; - position: absolute; - left: 0; - bottom: -40px; +.column-header__buttons { + height: 48px; + display: flex; + margin: -15px; + margin-left: 0; } -.media-modal__page-dot { - display: inline-block; +.column-header__links .text-btn { + margin-right: 10px; } -.media-modal__button { - background-color: $white; - height: 12px; - width: 12px; - border-radius: 6px; - margin: 10px; - padding: 0; +.column-header__button { + background: lighten($ui-base-color, 4%); border: 0; - font-size: 0; -} - -.media-modal__button--active { - background-color: $ui-highlight-color; -} - -.media-modal__close { - position: absolute; - right: 4px; - top: 4px; - z-index: 100; -} + color: $ui-primary-color; + cursor: pointer; + font-size: 16px; + padding: 0 15px; -.onboarding-modal, -.error-modal, -.embed-modal { - background: $ui-secondary-color; - color: $ui-base-color; - border-radius: 8px; - overflow: hidden; - display: flex; - flex-direction: column; -} + &:hover { + color: lighten($ui-primary-color, 7%); + } -.onboarding-modal__pager { - height: 80vh; - width: 80vw; - max-width: 520px; - max-height: 420px; + &.active { + color: $primary-text-color; + background: lighten($ui-base-color, 8%); - .react-swipeable-view-container > div { - width: 100%; - height: 100%; - box-sizing: border-box; - padding: 25px; - display: none; - flex-direction: column; - align-items: center; - justify-content: center; - display: flex; - user-select: text; + &:hover { + color: $primary-text-color; + background: lighten($ui-base-color, 8%); + } } } -.error-modal__body { - height: 80vh; - width: 80vw; - max-width: 520px; - max-height: 420px; - position: relative; +.column-header__collapsible { + max-height: 70vh; + overflow: hidden; + overflow-y: auto; + color: $ui-primary-color; + transition: max-height 150ms ease-in-out, opacity 300ms linear; + opacity: 1; - & > div { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - box-sizing: border-box; - padding: 25px; - display: none; - flex-direction: column; - align-items: center; - justify-content: center; - display: flex; - opacity: 0; - user-select: text; + &.collapsed { + max-height: 0; + opacity: 0.5; } -} - -.error-modal__body { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - text-align: center; -} -@media screen and (max-width: 550px) { - .onboarding-modal { - width: 100%; - height: 100%; - border-radius: 0; + &.animating { + overflow-y: hidden; } - .onboarding-modal__pager { - width: 100%; - height: auto; - max-width: none; - max-height: none; - flex: 1 1 auto; + hr { + height: 0; + background: transparent; + border: 0; + border-top: 1px solid lighten($ui-base-color, 12%); + margin: 10px 0; } } -.onboarding-modal__paginator, -.error-modal__footer { - flex: 0 0 auto; - background: darken($ui-secondary-color, 8%); - display: flex; - padding: 25px; +.column-header__collapsible-inner { + background: lighten($ui-base-color, 8%); + padding: 15px; +} - & > div { - min-width: 33px; +.column-header__setting-btn { + &:hover { + color: lighten($ui-primary-color, 4%); + text-decoration: underline; } +} - .onboarding-modal__nav, - .error-modal__nav { - color: darken($ui-secondary-color, 34%); - background-color: transparent; - border: 0; - font-size: 14px; - font-weight: 500; - padding: 0; - line-height: inherit; - height: auto; +.column-header__setting-arrows { + float: right; - &:hover, - &:focus, - &:active { - color: darken($ui-secondary-color, 38%); - } + .column-header__setting-btn { + padding: 0 10px; - &.onboarding-modal__done, - &.onboarding-modal__next { - color: $ui-highlight-color; + &:last-child { + padding-right: 0; } } } -.error-modal__footer { - justify-content: center; -} - -.onboarding-modal__dots { - flex: 1 1 auto; - display: flex; - align-items: center; - justify-content: center; +.column-header__title { + display: inline-block; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + flex: 1; } -.onboarding-modal__dot { - width: 14px; - height: 14px; - border-radius: 14px; - background: darken($ui-secondary-color, 16%); - margin: 0 3px; +.text-btn { + display: inline-block; + padding: 0; + font-family: inherit; + font-size: inherit; + color: inherit; + border: 0; + background: transparent; cursor: pointer; +} - &:hover { - background: darken($ui-secondary-color, 18%); - } - - &.active { - cursor: default; - background: darken($ui-secondary-color, 24%); - } +.column-header__icon { + display: inline-block; + margin-right: 5px; } -.onboarding-modal__page__wrapper { - pointer-events: none; +.loading-indicator { + color: lighten($ui-base-color, 26%); + font-size: 12px; + font-weight: 400; + text-transform: uppercase; + overflow: visible; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); - &.onboarding-modal__page__wrapper--active { - pointer-events: auto; + span { + display: block; + float: left; + margin-left: 50%; + transform: translateX(-50%); + margin: 82px 0 0 50%; + white-space: nowrap; + animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000); } } -.onboarding-modal__page { - cursor: default; - line-height: 21px; +.loading-indicator__figure { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 0; + height: 0; + box-sizing: border-box; + border: 0 solid lighten($ui-base-color, 26%); + border-radius: 50%; + animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000); +} - h1 { - font-size: 18px; - font-weight: 500; - color: $ui-base-color; - margin-bottom: 20px; +@keyframes loader-figure { + 0% { + width: 0; + height: 0; + background-color: lighten($ui-base-color, 26%); } - a { - color: $ui-highlight-color; + 29% { + background-color: lighten($ui-base-color, 26%); + } - &:hover, - &:focus, - &:active { - color: lighten($ui-highlight-color, 4%); - } + 30% { + width: 42px; + height: 42px; + background-color: transparent; + border-width: 21px; + opacity: 1; } - p { - font-size: 16px; - color: lighten($ui-base-color, 8%); - margin-top: 10px; - margin-bottom: 10px; + 100% { + width: 42px; + height: 42px; + border-width: 0; + opacity: 0; + background-color: transparent; + } +} - &:last-child { - margin-bottom: 0; - } +@keyframes loader-label { + 0% { opacity: 0.25; } + 30% { opacity: 1; } + 100% { opacity: 0.25; } +} - strong { - font-weight: 500; - background: $ui-base-color; - color: $ui-secondary-color; - border-radius: 4px; - font-size: 14px; - padding: 3px 6px; - - @each $lang in $cjk-langs { - &:lang(#{$lang}) { - font-weight: 700; - } - } - } +.spoiler-button { + display: none; + left: 4px; + position: absolute; + text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color; + top: 4px; + z-index: 100; + + &.spoiler-button--visible { + display: block; } } -.onboarding-modal__page-one { - display: flex; - align-items: center; +.setting-toggle { + display: block; + line-height: 24px; } -.onboarding-modal__page-one__elephant-friend { - background: url('~images/elephant-friend-1.png') no-repeat center center / contain; - width: 155px; - height: 193px; - margin-right: 15px; +.setting-toggle__label, +.setting-meta__label { + color: $ui-primary-color; + display: inline-block; + margin-bottom: 14px; + margin-left: 8px; + vertical-align: middle; } -@media screen and (max-width: 400px) { - .onboarding-modal__page-one { - flex-direction: column; - align-items: normal; - } - - .onboarding-modal__page-one__elephant-friend { - width: 100%; - height: 30vh; - max-height: 160px; - margin-bottom: 5vh; - } +.setting-meta__label { + color: $ui-primary-color; + float: right; } -.onboarding-modal__page-two, -.onboarding-modal__page-three, -.onboarding-modal__page-four, -.onboarding-modal__page-five { - p { - text-align: left; +.empty-column-indicator, +.error-column { + color: lighten($ui-base-color, 20%); + background: $ui-base-color; + text-align: center; + padding: 20px; + font-size: 15px; + font-weight: 400; + cursor: default; + display: flex; + flex: 1 1 auto; + align-items: center; + justify-content: center; + @supports(display: grid) { // hack to fix Chrome <57 + contain: strict; } - .figure { - background: darken($ui-base-color, 8%); - color: $ui-secondary-color; - margin-bottom: 20px; - border-radius: 4px; - padding: 10px; - text-align: center; - font-size: 14px; - box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.3); - - .onboarding-modal__image { - border-radius: 4px; - margin-bottom: 10px; - } + a { + color: $ui-highlight-color; + text-decoration: none; - &.non-interactive { - pointer-events: none; - text-align: left; + &:hover { + text-decoration: underline; } } } -.onboarding-modal__page-four__columns { - .row { - display: flex; - margin-bottom: 20px; - - & > div { - flex: 1 1 0; - margin: 0 10px; +.error-column { + flex-direction: column; +} - &:first-child { - margin-left: 0; - } +@keyframes heartbeat { + from { + transform: scale(1); + transform-origin: center center; + animation-timing-function: ease-out; + } - &:last-child { - margin-right: 0; - } + 10% { + transform: scale(0.91); + animation-timing-function: ease-in; + } - p { - text-align: center; - } - } + 17% { + transform: scale(0.98); + animation-timing-function: ease-out; + } - &:last-child { - margin-bottom: 0; - } + 33% { + transform: scale(0.87); + animation-timing-function: ease-in; } - .column-header { - color: $primary-text-color; + 45% { + transform: scale(1); + animation-timing-function: ease-out; } } -@media screen and (max-width: 320px) and (max-height: 600px) { - .onboarding-modal__page p { - font-size: 14px; - line-height: 20px; - } +.pulse-loading { + animation: heartbeat 1.5s ease-in-out infinite both; +} - .onboarding-modal__page-two .figure, - .onboarding-modal__page-three .figure, - .onboarding-modal__page-four .figure, - .onboarding-modal__page-five .figure { - font-size: 12px; - margin-bottom: 10px; - } +.emoji-picker-dropdown__menu { + background: $simple-background-color; + position: absolute; + box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4); + border-radius: 4px; + margin-top: 5px; - .onboarding-modal__page-four__columns .row { - margin-bottom: 10px; + .emoji-mart-scroll { + transition: opacity 200ms ease; } - .onboarding-modal__page-four__columns .column-header { - padding: 5px; - font-size: 12px; + &.selecting .emoji-mart-scroll { + opacity: 0.5; } } -.onboarding-modal__image { - border-radius: 8px; - width: 70vw; - max-width: 450px; - max-height: auto; - display: block; - margin: auto; - margin-bottom: 20px; -} - -.onboard-sliders { - display: inline-block; - max-width: 30px; - max-height: auto; - margin-left: 10px; +.emoji-picker-dropdown__modifiers { + position: absolute; + top: 60px; + right: 11px; + cursor: pointer; } -.boost-modal, -.confirmation-modal, -.report-modal, -.actions-modal, -.mute-modal { - background: lighten($ui-secondary-color, 8%); - color: $ui-base-color; - border-radius: 8px; +.emoji-picker-dropdown__modifiers__menu { + position: absolute; + z-index: 4; + top: -4px; + left: -8px; + background: $simple-background-color; + border-radius: 4px; + box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); overflow: hidden; - max-width: 90vw; - width: 480px; - position: relative; - flex-direction: column; - .status__display-name { + button { display: block; - max-width: 100%; - padding-right: 25px; - } - - .status__avatar { - height: 28px; - left: 10px; - position: absolute; - top: 10px; - width: 48px; - } -} + cursor: pointer; + border: 0; + padding: 4px 8px; + background: transparent; -.actions-modal { - .status { - background: $white; - border-bottom-color: $ui-secondary-color; - padding-top: 10px; - padding-bottom: 10px; + &:hover, + &:focus, + &:active { + background: rgba($ui-secondary-color, 0.4); + } } - .dropdown-menu__separator { - border-bottom-color: $ui-secondary-color; + .emoji-mart-emoji { + height: 22px; } } -.boost-modal__container { - overflow-x: scroll; - padding: 10px; - - .status { - user-select: text; - border-bottom: 0; +.emoji-mart-emoji { + span { + background-repeat: no-repeat; } } -.boost-modal__action-bar, -.confirmation-modal__action-bar, -.mute-modal__action-bar, -.report-modal__action-bar { +.upload-area { + align-items: center; + background: rgba($base-overlay-background, 0.8); display: flex; - justify-content: space-between; - background: $ui-secondary-color; - padding: 10px; - line-height: 36px; - - & > div { - flex: 1 1 auto; - text-align: right; - color: lighten($ui-base-color, 33%); - padding-right: 10px; - } + height: 100%; + justify-content: center; + left: 0; + opacity: 0; + position: absolute; + top: 0; + visibility: hidden; + width: 100%; + z-index: 2000; - .button { - flex: 0 0 auto; + * { + pointer-events: none; } } -.boost-modal__status-header { - font-size: 15px; +.upload-area__drop { + width: 320px; + height: 160px; + display: flex; + box-sizing: border-box; + position: relative; + padding: 8px; } -.boost-modal__status-time { - float: right; - font-size: 14px; +.upload-area__background { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: -1; + border-radius: 4px; + background: $ui-base-color; + box-shadow: 0 0 5px rgba($base-shadow-color, 0.2); } -.confirmation-modal { - max-width: 85vw; - - @media screen and (min-width: 480px) { - max-width: 380px; - } +.upload-area__content { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + color: $ui-secondary-color; + font-size: 18px; + font-weight: 500; + border: 2px dashed $ui-base-lighter-color; + border-radius: 4px; } -.mute-modal { +.emoji-button { + display: block; + font-size: 24px; line-height: 24px; -} - -.mute-modal .react-toggle { - vertical-align: middle; -} - -.report-modal__statuses, -.report-modal__comment { - padding: 10px; -} - -.report-modal__statuses { - min-height: 20vh; - max-height: 40vh; - overflow-y: auto; - overflow-x: hidden; -} - -.report-modal__comment { - .setting-text { - margin-top: 10px; - } -} - -.actions-modal { - .status { - overflow-y: auto; - max-height: 300px; - } - - max-height: 80vh; - max-width: 80vw; - - .actions-modal__item-label { - font-weight: 500; - } - - ul { - overflow-y: auto; - flex-shrink: 0; - - li:empty { - margin: 0; - } - - li:not(:empty) { - a { - color: $ui-base-color; - display: flex; - padding: 12px 16px; - font-size: 15px; - align-items: center; - text-decoration: none; + margin-left: 2px; + width: 24px; + outline: 0; + cursor: pointer; - &, - button { - transition: none; - } - - &.active, - &:hover, - &:active, - &:focus { - &, - button { - background: $ui-highlight-color; - color: $primary-text-color; - } - } - - & > .react-toggle, - & > .icon, - button:first-child { - margin-right: 10px; - } - } - } + &:active, + &:focus { + outline: 0 !important; } -} -.confirmation-modal__action-bar, -.mute-modal__action-bar { - .confirmation-modal__cancel-button, - .mute-modal__cancel-button { - background-color: transparent; - color: darken($ui-secondary-color, 34%); - font-size: 14px; - font-weight: 500; + img { + filter: grayscale(100%); + opacity: 0.8; + display: block; + margin: 0; + width: 22px; + height: 22px; + margin-top: 2px; + } - &:hover, - &:focus, - &:active { - color: darken($ui-secondary-color, 38%); + &:hover, + &:active, + &:focus { + img { + opacity: 1; + filter: none; } } } -.confirmation-modal__container, -.mute-modal__container, -.report-modal__target { - padding: 30px; - font-size: 16px; - text-align: center; - - strong { - font-weight: 500; - - @each $lang in $cjk-langs { - &:lang(#{$lang}) { - font-weight: 700; - } - } - } +.dropdown--active .emoji-button img { + opacity: 1; + filter: none; } -.loading-bar { - background-color: $ui-highlight-color; - height: 3px; - position: absolute; - top: 0; - left: 0; +.search { + position: relative; } -.attachment-list { - display: flex; +.search__input { + outline: 0; + box-sizing: border-box; + display: block; + width: 100%; + border: none; + padding: 10px; + padding-right: 30px; + font-family: inherit; + background: $ui-base-color; + color: $ui-primary-color; font-size: 14px; - border: 1px solid lighten($ui-base-color, 8%); - border-radius: 4px; - margin-top: 14px; - overflow: hidden; -} + margin: 0; -.attachment-list__icon { - flex: 0 0 auto; - color: $ui-base-lighter-color; - padding: 8px 18px; - cursor: default; - border-right: 1px solid lighten($ui-base-color, 8%); - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: 26px; + &::-moz-focus-inner { + border: 0; + } - .fa { - display: block; + &::-moz-focus-inner, + &:focus, + &:active { + outline: 0 !important; } -} -.attachment-list__list { - list-style: none; - padding: 4px 0; - padding-left: 8px; - display: flex; - flex-direction: column; - justify-content: center; + &:focus { + background: lighten($ui-base-color, 4%); + } - li { - display: block; - padding: 4px 0; + @media screen and (max-width: 600px) { + font-size: 16px; } +} - a { - text-decoration: none; - color: $ui-base-lighter-color; - font-weight: 500; +.search__icon { + .fa { + position: absolute; + top: 10px; + right: 10px; + z-index: 2; + display: inline-block; + opacity: 0; + transition: all 100ms linear; + font-size: 18px; + width: 18px; + height: 18px; + color: $ui-secondary-color; + cursor: default; + pointer-events: none; - &:hover { - text-decoration: underline; + &.active { + pointer-events: auto; + opacity: 0.3; } } -} -.account-gallery__container { - margin: -2px; - padding: 4px; - display: flex; - flex-wrap: wrap; -} + .fa-search { + transform: rotate(90deg); -.account-gallery__item { - flex: 1 1 auto; - width: calc(100% / 3 - 4px); - height: 95px; - margin: 2px; + &.active { + pointer-events: none; + transform: rotate(0deg); + } + } - a { - display: block; - width: 100%; - height: 100%; - background-color: $base-overlay-background; - background-size: cover; - background-position: center; - position: relative; - color: inherit; - text-decoration: none; + .fa-times-circle { + top: 11px; + transform: rotate(0deg); + cursor: pointer; - &:hover, - &:active, - &:focus { - outline: 0; + &.active { + transform: rotate(90deg); + } + + &:hover { + color: $primary-text-color; } } } -.account-section-headline { +.search-results__header { color: $ui-base-lighter-color; background: lighten($ui-base-color, 2%); - border-bottom: 1px solid lighten($ui-base-color, 4%); + border-bottom: 1px solid darken($ui-base-color, 4%); padding: 15px 10px; font-size: 14px; font-weight: 500; - position: relative; - cursor: default; +} - &::before, - &::after { - display: block; - content: ""; - position: absolute; - bottom: 0; - left: 18px; - width: 0; - height: 0; - border-style: solid; - border-width: 0 10px 10px; - border-color: transparent transparent lighten($ui-base-color, 4%); - } +.search-results__hashtag { + display: block; + padding: 10px; + color: $ui-secondary-color; + text-decoration: none; - &::after { - bottom: -1px; - border-color: transparent transparent $ui-base-color; + &:hover, + &:active, + &:focus { + color: lighten($ui-secondary-color, 4%); + text-decoration: underline; } } +.loading-bar { + background-color: $ui-highlight-color; + height: 3px; + position: absolute; + top: 0; + left: 0; +} + ::-webkit-scrollbar-thumb { border-radius: 0; } @@ -3922,104 +1723,6 @@ noscript { } } -.embed-modal { - max-width: 80vw; - max-height: 80vh; - - h4 { - padding: 30px; - font-weight: 500; - font-size: 16px; - text-align: center; - } - - .embed-modal__container { - padding: 10px; - - .hint { - margin-bottom: 15px; - } - - .embed-modal__html { - color: $ui-secondary-color; - outline: 0; - box-sizing: border-box; - display: block; - width: 100%; - border: none; - padding: 10px; - font-family: 'mastodon-font-monospace', monospace; - background: $ui-base-color; - color: $ui-primary-color; - font-size: 14px; - margin: 0; - margin-bottom: 15px; - - &::-moz-focus-inner { - border: 0; - } - - &::-moz-focus-inner, - &:focus, - &:active { - outline: 0 !important; - } - - &:focus { - background: lighten($ui-base-color, 4%); - } - - @media screen and (max-width: 600px) { - font-size: 16px; - } - } - - .embed-modal__iframe { - width: 400px; - max-width: 100%; - overflow: hidden; - border: 0; - } - } -} - -.account__moved-note { - padding: 14px 10px; - padding-bottom: 16px; - background: lighten($ui-base-color, 4%); - border-top: 1px solid lighten($ui-base-color, 8%); - border-bottom: 1px solid lighten($ui-base-color, 8%); - - &__message { - position: relative; - margin-left: 58px; - color: $ui-base-lighter-color; - padding: 8px 0; - padding-top: 0; - padding-bottom: 4px; - font-size: 14px; - - > span { - display: block; - overflow: hidden; - text-overflow: ellipsis; - } - } - - &__icon-wrapper { - left: -26px; - position: absolute; - } - - .detailed-status__display-avatar { - position: relative; - } - - .detailed-status__display-name { - margin-bottom: 0; - } -} - .column-inline-form { padding: 7px 15px; padding-right: 5px; @@ -4057,66 +1760,16 @@ noscript { background: rgba($base-overlay-background, 0.5); } -.list-editor { - background: $ui-base-color; - flex-direction: column; - border-radius: 8px; - box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); - width: 380px; - overflow: hidden; - - @media screen and (max-width: 420px) { - width: 90%; - } - - h4 { - padding: 15px 0; - background: lighten($ui-base-color, 13%); - font-weight: 500; - font-size: 16px; - text-align: center; - border-radius: 8px 8px 0 0; - } - - .drawer__pager { - height: 50vh; - } - - .drawer__inner { - border-radius: 0 0 8px 8px; - - &.backdrop { - width: calc(100% - 60px); - box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); - border-radius: 0 0 0 8px; - } - } - - &__accounts { - overflow-y: auto; - } - - .account__display-name { - &:hover strong { - text-decoration: none; - } - } - - .account__avatar { - cursor: default; - } - - .search { - margin-bottom: 0; - } -} - -@import 'glitch'; +@import 'account'; +@import 'status'; +@import 'modal'; @import 'metadata'; @import 'composer'; @import 'doodle'; @import 'drawer'; @import 'media'; @import 'sensitive'; +@import 'list'; @import 'emoji_picker'; @import 'local_settings'; +@import 'glitch'; diff --git a/app/javascript/flavours/glitch/styles/components/list.scss b/app/javascript/flavours/glitch/styles/components/list.scss new file mode 100644 index 0000000000..de0783b6d1 --- /dev/null +++ b/app/javascript/flavours/glitch/styles/components/list.scss @@ -0,0 +1,103 @@ +.attachment-list { + display: flex; + font-size: 14px; + border: 1px solid lighten($ui-base-color, 8%); + border-radius: 4px; + margin-top: 14px; + overflow: hidden; +} + +.attachment-list__icon { + flex: 0 0 auto; + color: $ui-base-lighter-color; + padding: 8px 18px; + cursor: default; + border-right: 1px solid lighten($ui-base-color, 8%); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: 26px; + + .fa { + display: block; + } +} + +.attachment-list__list { + list-style: none; + padding: 4px 0; + padding-left: 8px; + display: flex; + flex-direction: column; + justify-content: center; + + li { + display: block; + padding: 4px 0; + } + + a { + text-decoration: none; + color: $ui-base-lighter-color; + font-weight: 500; + + &:hover { + text-decoration: underline; + } + } +} + +.list-editor { + background: $ui-base-color; + flex-direction: column; + border-radius: 8px; + box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); + width: 380px; + overflow: hidden; + + @media screen and (max-width: 420px) { + width: 90%; + } + + h4 { + padding: 15px 0; + background: lighten($ui-base-color, 13%); + font-weight: 500; + font-size: 16px; + text-align: center; + border-radius: 8px 8px 0 0; + } + + .drawer__pager { + height: 50vh; + } + + .drawer__inner { + border-radius: 0 0 8px 8px; + + &.backdrop { + width: calc(100% - 60px); + box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); + border-radius: 0 0 0 8px; + } + } + + &__accounts { + overflow-y: auto; + } + + .account__display-name { + &:hover strong { + text-decoration: none; + } + } + + .account__avatar { + cursor: default; + } + + .search { + margin-bottom: 0; + } +} diff --git a/app/javascript/flavours/glitch/styles/components/media.scss b/app/javascript/flavours/glitch/styles/components/media.scss index 048b6bf28e..785edf9ffd 100644 --- a/app/javascript/flavours/glitch/styles/components/media.scss +++ b/app/javascript/flavours/glitch/styles/components/media.scss @@ -154,65 +154,77 @@ position: absolute; } -.status__video-player { - display: flex; - align-items: center; - background: $base-shadow-color; - box-sizing: border-box; - cursor: default; /* May not be needed */ - margin-top: 8px; - overflow: hidden; +.media-modal { + max-width: 80vw; + max-height: 80vh; position: relative; - @include fullwidth-gallery; -} + .extended-video-player, + img, + canvas, + video { + max-width: 80vw; + max-height: 80vh; + width: auto; + height: auto; + margin: auto; + } -.status__video-player-video { - height: 100%; - object-fit: cover; - position: relative; - top: 50%; - transform: translateY(-50%); - width: 100%; - z-index: 1; + .extended-video-player, + video { + display: flex; + width: 80vw; + height: 80vh; + } - &:not(.letterbox) { - height: 100%; - object-fit: cover; + img, + canvas { + display: block; + background: url('~images/void.png') repeat; + object-fit: contain; + } + + .react-swipeable-view-container { + max-width: 80vw; } } -.status__video-player-expand, -.status__video-player-mute { - color: $primary-text-color; - opacity: 0.8; - position: absolute; - right: 4px; - text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color; +.media-modal__content { + background: $base-overlay-background; } -.status__video-player-spoiler { - display: none; - color: $primary-text-color; - left: 4px; +.media-modal__pagination { + width: 100%; + text-align: center; position: absolute; - text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color; - top: 4px; - z-index: 100; + left: 0; + bottom: -40px; +} - &.status__video-player-spoiler--visible { - display: block; - } +.media-modal__page-dot { + display: inline-block; } -.status__video-player-expand { - bottom: 4px; - z-index: 100; +.media-modal__button { + background-color: $white; + height: 12px; + width: 12px; + border-radius: 6px; + margin: 10px; + padding: 0; + border: 0; + font-size: 0; } -.status__video-player-mute { +.media-modal__button--active { + background-color: $ui-highlight-color; +} + +.media-modal__close { + position: absolute; + right: 4px; top: 4px; - z-index: 5; + z-index: 100; } .video-player { diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss new file mode 100644 index 0000000000..1f283b9afa --- /dev/null +++ b/app/javascript/flavours/glitch/styles/components/modal.scss @@ -0,0 +1,661 @@ +.modal-container--preloader { + background: lighten($ui-base-color, 8%); +} + +.modal-container__nav { + align-items: center; + background: rgba($base-overlay-background, 0.5); + box-sizing: border-box; + border: 0; + color: $primary-text-color; + cursor: pointer; + display: flex; + font-size: 24px; + height: 100%; + padding: 30px 15px; + position: absolute; + top: 0; +} + +.modal-container__nav--left { + left: -61px; +} + +.modal-container__nav--right { + right: -61px; +} + +.modal-root { + transition: opacity 0.3s linear; + will-change: opacity; + z-index: 9999; +} + +.modal-root__overlay { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba($base-overlay-background, 0.7); +} + +.modal-root__container { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + align-content: space-around; + z-index: 9999; + pointer-events: none; + user-select: none; +} + +.modal-root__modal { + pointer-events: auto; + display: flex; + z-index: 9999; +} + +.onboarding-modal, +.error-modal, +.embed-modal { + background: $ui-secondary-color; + color: $ui-base-color; + border-radius: 8px; + overflow: hidden; + display: flex; + flex-direction: column; +} + +.onboarding-modal__pager { + height: 80vh; + width: 80vw; + max-width: 520px; + max-height: 420px; + + .react-swipeable-view-container > div { + width: 100%; + height: 100%; + box-sizing: border-box; + padding: 25px; + display: none; + flex-direction: column; + align-items: center; + justify-content: center; + display: flex; + user-select: text; + } +} + +.error-modal__body { + height: 80vh; + width: 80vw; + max-width: 520px; + max-height: 420px; + position: relative; + + & > div { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + box-sizing: border-box; + padding: 25px; + display: none; + flex-direction: column; + align-items: center; + justify-content: center; + display: flex; + opacity: 0; + user-select: text; + } +} + +.error-modal__body { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; +} + +@media screen and (max-width: 550px) { + .onboarding-modal { + width: 100%; + height: 100%; + border-radius: 0; + } + + .onboarding-modal__pager { + width: 100%; + height: auto; + max-width: none; + max-height: none; + flex: 1 1 auto; + } +} + +.onboarding-modal__paginator, +.error-modal__footer { + flex: 0 0 auto; + background: darken($ui-secondary-color, 8%); + display: flex; + padding: 25px; + + & > div { + min-width: 33px; + } + + .onboarding-modal__nav, + .error-modal__nav { + color: darken($ui-secondary-color, 34%); + background-color: transparent; + border: 0; + font-size: 14px; + font-weight: 500; + padding: 0; + line-height: inherit; + height: auto; + + &:hover, + &:focus, + &:active { + color: darken($ui-secondary-color, 38%); + } + + &.onboarding-modal__done, + &.onboarding-modal__next { + color: $ui-highlight-color; + } + } +} + +.error-modal__footer { + justify-content: center; +} + +.onboarding-modal__dots { + flex: 1 1 auto; + display: flex; + align-items: center; + justify-content: center; +} + +.onboarding-modal__dot { + width: 14px; + height: 14px; + border-radius: 14px; + background: darken($ui-secondary-color, 16%); + margin: 0 3px; + cursor: pointer; + + &:hover { + background: darken($ui-secondary-color, 18%); + } + + &.active { + cursor: default; + background: darken($ui-secondary-color, 24%); + } +} + +.onboarding-modal__page__wrapper { + pointer-events: none; + + &.onboarding-modal__page__wrapper--active { + pointer-events: auto; + } +} + +.onboarding-modal__page { + cursor: default; + line-height: 21px; + + h1 { + font-size: 18px; + font-weight: 500; + color: $ui-base-color; + margin-bottom: 20px; + } + + a { + color: $ui-highlight-color; + + &:hover, + &:focus, + &:active { + color: lighten($ui-highlight-color, 4%); + } + } + + p { + font-size: 16px; + color: lighten($ui-base-color, 8%); + margin-top: 10px; + margin-bottom: 10px; + + &:last-child { + margin-bottom: 0; + } + + strong { + font-weight: 500; + background: $ui-base-color; + color: $ui-secondary-color; + border-radius: 4px; + font-size: 14px; + padding: 3px 6px; + + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + font-weight: 700; + } + } + } + } +} + +.onboarding-modal__page-one { + display: flex; + align-items: center; +} + +.onboarding-modal__page-one__elephant-friend { + background: url('~images/elephant-friend-1.png') no-repeat center center / contain; + width: 155px; + height: 193px; + margin-right: 15px; +} + +@media screen and (max-width: 400px) { + .onboarding-modal__page-one { + flex-direction: column; + align-items: normal; + } + + .onboarding-modal__page-one__elephant-friend { + width: 100%; + height: 30vh; + max-height: 160px; + margin-bottom: 5vh; + } +} + +.onboarding-modal__page-two, +.onboarding-modal__page-three, +.onboarding-modal__page-four, +.onboarding-modal__page-five { + p { + text-align: left; + } + + .figure { + background: darken($ui-base-color, 8%); + color: $ui-secondary-color; + margin-bottom: 20px; + border-radius: 4px; + padding: 10px; + text-align: center; + font-size: 14px; + box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.3); + + .onboarding-modal__image { + border-radius: 4px; + margin-bottom: 10px; + } + + &.non-interactive { + pointer-events: none; + text-align: left; + } + } +} + +.onboarding-modal__page-four__columns { + .row { + display: flex; + margin-bottom: 20px; + + & > div { + flex: 1 1 0; + margin: 0 10px; + + &:first-child { + margin-left: 0; + } + + &:last-child { + margin-right: 0; + } + + p { + text-align: center; + } + } + + &:last-child { + margin-bottom: 0; + } + } + + .column-header { + color: $primary-text-color; + } +} + +@media screen and (max-width: 320px) and (max-height: 600px) { + .onboarding-modal__page p { + font-size: 14px; + line-height: 20px; + } + + .onboarding-modal__page-two .figure, + .onboarding-modal__page-three .figure, + .onboarding-modal__page-four .figure, + .onboarding-modal__page-five .figure { + font-size: 12px; + margin-bottom: 10px; + } + + .onboarding-modal__page-four__columns .row { + margin-bottom: 10px; + } + + .onboarding-modal__page-four__columns .column-header { + padding: 5px; + font-size: 12px; + } +} + +.onboarding-modal__image { + border-radius: 8px; + width: 70vw; + max-width: 450px; + max-height: auto; + display: block; + margin: auto; + margin-bottom: 20px; +} + +.onboard-sliders { + display: inline-block; + max-width: 30px; + max-height: auto; + margin-left: 10px; +} + +.boost-modal, +.confirmation-modal, +.report-modal, +.actions-modal, +.mute-modal { + background: lighten($ui-secondary-color, 8%); + color: $ui-base-color; + border-radius: 8px; + overflow: hidden; + max-width: 90vw; + width: 480px; + position: relative; + flex-direction: column; + + .status__display-name { + display: block; + max-width: 100%; + padding-right: 25px; + } + + .status__avatar { + height: 28px; + left: 10px; + position: absolute; + top: 10px; + width: 48px; + } +} + +.actions-modal { + .status { + background: $white; + border-bottom-color: $ui-secondary-color; + padding-top: 10px; + padding-bottom: 10px; + } + + .dropdown-menu__separator { + border-bottom-color: $ui-secondary-color; + } +} + +.boost-modal__container { + overflow-x: scroll; + padding: 10px; + + .status { + user-select: text; + border-bottom: 0; + } +} + +.boost-modal__action-bar, +.confirmation-modal__action-bar, +.mute-modal__action-bar, +.report-modal__action-bar { + display: flex; + justify-content: space-between; + background: $ui-secondary-color; + padding: 10px; + line-height: 36px; + + & > div { + flex: 1 1 auto; + text-align: right; + color: lighten($ui-base-color, 33%); + padding-right: 10px; + } + + .button { + flex: 0 0 auto; + } +} + +.boost-modal__status-header { + font-size: 15px; +} + +.boost-modal__status-time { + float: right; + font-size: 14px; +} + +.confirmation-modal { + max-width: 85vw; + + @media screen and (min-width: 480px) { + max-width: 380px; + } +} + +.mute-modal { + line-height: 24px; +} + +.mute-modal .react-toggle { + vertical-align: middle; +} + +.report-modal__statuses, +.report-modal__comment { + padding: 10px; +} + +.report-modal__statuses { + min-height: 20vh; + max-height: 40vh; + overflow-y: auto; + overflow-x: hidden; +} + +.report-modal__comment { + .setting-text { + margin-top: 10px; + } +} + +.actions-modal { + .status { + overflow-y: auto; + max-height: 300px; + } + + max-height: 80vh; + max-width: 80vw; + + .actions-modal__item-label { + font-weight: 500; + } + + ul { + overflow-y: auto; + flex-shrink: 0; + + li:empty { + margin: 0; + } + + li:not(:empty) { + a { + color: $ui-base-color; + display: flex; + padding: 12px 16px; + font-size: 15px; + align-items: center; + text-decoration: none; + + &, + button { + transition: none; + } + + &.active, + &:hover, + &:active, + &:focus { + &, + button { + background: $ui-highlight-color; + color: $primary-text-color; + } + } + + & > .react-toggle, + & > .icon, + button:first-child { + margin-right: 10px; + } + } + } + } +} + +.confirmation-modal__action-bar, +.mute-modal__action-bar { + .confirmation-modal__cancel-button, + .mute-modal__cancel-button { + background-color: transparent; + color: darken($ui-secondary-color, 34%); + font-size: 14px; + font-weight: 500; + + &:hover, + &:focus, + &:active { + color: darken($ui-secondary-color, 38%); + } + } +} + +.confirmation-modal__container, +.mute-modal__container, +.report-modal__target { + padding: 30px; + font-size: 16px; + text-align: center; + + strong { + font-weight: 500; + + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + font-weight: 700; + } + } + } +} + +.embed-modal { + max-width: 80vw; + max-height: 80vh; + + h4 { + padding: 30px; + font-weight: 500; + font-size: 16px; + text-align: center; + } + + .embed-modal__container { + padding: 10px; + + .hint { + margin-bottom: 15px; + } + + .embed-modal__html { + color: $ui-secondary-color; + outline: 0; + box-sizing: border-box; + display: block; + width: 100%; + border: none; + padding: 10px; + font-family: 'mastodon-font-monospace', monospace; + background: $ui-base-color; + color: $ui-primary-color; + font-size: 14px; + margin: 0; + margin-bottom: 15px; + + &::-moz-focus-inner { + border: 0; + } + + &::-moz-focus-inner, + &:focus, + &:active { + outline: 0 !important; + } + + &:focus { + background: lighten($ui-base-color, 4%); + } + + @media screen and (max-width: 600px) { + font-size: 16px; + } + } + + .embed-modal__iframe { + width: 400px; + max-width: 100%; + overflow: hidden; + border: 0; + } + } +} diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss new file mode 100644 index 0000000000..453923901e --- /dev/null +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -0,0 +1,606 @@ +.status__content--with-action { + cursor: pointer; +} + +.status__content { + font-size: 15px; + line-height: 20px; + word-wrap: break-word; + font-weight: 400; + overflow: hidden; + white-space: pre-wrap; + padding-top: 2px; + + &: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; + + &:last-child { + margin-bottom: 0; + } + } + + a { + color: $ui-secondary-color; + text-decoration: none; + + &:hover { + text-decoration: underline; + + .fa { + color: lighten($ui-base-color, 40%); + } + } + + &.mention { + &:hover { + text-decoration: none; + + span { + text-decoration: underline; + } + } + } + + .fa { + color: lighten($ui-base-color, 30%); + } + } + + .status__content__spoiler-link { + background: lighten($ui-base-color, 30%); + + &:hover { + background: lighten($ui-base-color, 33%); + text-decoration: none; + } + } + + .status__content__text { + display: none; + + &.status__content__text--visible { + display: block; + } + } +} + +.status__content__spoiler-link { + display: inline-block; + border-radius: 2px; + background: transparent; + border: 0; + color: lighten($ui-base-color, 8%); + font-weight: 500; + font-size: 11px; + padding: 0 6px; + text-transform: uppercase; + line-height: inherit; + cursor: pointer; +} + +.status__prepend-icon-wrapper { + left: -26px; + position: absolute; +} + +.focusable { + &:focus { + outline: 0; + background: lighten($ui-base-color, 4%); + + .status.status-direct { + background: lighten($ui-base-color, 12%); + + &.muted { + background: transparent; + } + } + + .detailed-status, + .detailed-status__action-bar { + background: lighten($ui-base-color, 8%); + } + } +} + +.status { + padding: 8px 10px; + padding-left: 68px; + position: relative; + min-height: 48px; + border-bottom: 1px solid lighten($ui-base-color, 8%); + cursor: default; + + @supports (-ms-overflow-style: -ms-autohiding-scrollbar) { + // Add margin to avoid Edge auto-hiding scrollbar appearing over content. + // On Edge 16 this is 16px and Edge <=15 it's 12px, so aim for 16px. + padding-right: 26px; // 10px + 16px + } + + @keyframes fade { + 0% { opacity: 0; } + 100% { opacity: 1; } + } + + opacity: 1; + animation: fade 150ms linear; + + .video-player { + margin-top: 8px; + } + + &.status-direct { + background: lighten($ui-base-color, 8%); + + .icon-button.disabled { + color: lighten($ui-base-color, 16%); + } + } + + &.light { + .status__relative-time { + color: $ui-primary-color; + } + + .status__display-name { + color: $ui-base-color; + } + + .display-name { + strong { + color: $ui-base-color; + } + + span { + color: $ui-primary-color; + } + } + + .status__content { + color: $ui-base-color; + + a { + color: $ui-highlight-color; + } + + a.status__content__spoiler-link { + color: $primary-text-color; + background: $ui-primary-color; + + &:hover { + background: lighten($ui-primary-color, 8%); + } + } + } + } +} + +.notification-favourite { + .status.status-direct { + background: transparent; + + .icon-button.disabled { + color: lighten($ui-base-color, 13%); + } + } +} + +.status__relative-time { + color: $ui-base-lighter-color; + float: right; + font-size: 14px; +} + +.status__display-name { + color: $ui-base-lighter-color; +} + +.status__info .status__display-name { + display: block; + max-width: 100%; + padding-right: 25px; +} + +.status__info { + font-size: 15px; +} + +.status-check-box { + border-bottom: 1px solid $ui-secondary-color; + display: flex; + + .status__content { + flex: 1 1 auto; + padding: 10px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } +} + +.status-check-box-toggle { + align-items: center; + display: flex; + flex: 0 0 auto; + justify-content: center; + padding: 10px; +} + +.status__prepend { + margin-left: 68px; + color: $ui-base-lighter-color; + padding: 8px 0; + padding-bottom: 2px; + font-size: 14px; + position: relative; + + .status__display-name strong { + color: $ui-base-lighter-color; + } + + > span { + display: block; + overflow: hidden; + text-overflow: ellipsis; + } +} + +.status__action-bar { + align-items: center; + display: flex; + margin-top: 8px; +} + +.status__action-bar-button { + float: left; + margin-right: 18px; +} + +.status__action-bar-dropdown { + float: left; + height: 23.15px; + width: 23.15px; +} + +.detailed-status__action-bar-dropdown { + flex: 1 1 auto; + display: flex; + align-items: center; + justify-content: center; + position: relative; +} + +.detailed-status { + background: lighten($ui-base-color, 4%); + padding: 14px 10px; + + .status__content { + font-size: 19px; + line-height: 24px; + + .emojione { + width: 24px; + height: 24px; + margin: -1px 0 0; + } + } + + .video-player { + margin-top: 8px; + } +} + +.detailed-status__meta { + margin-top: 15px; + color: $ui-base-lighter-color; + font-size: 14px; + line-height: 18px; +} + +.detailed-status__action-bar { + background: lighten($ui-base-color, 4%); + border-top: 1px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid lighten($ui-base-color, 8%); + display: flex; + flex-direction: row; + padding: 10px 0; +} + +.detailed-status__link { + color: inherit; + text-decoration: none; +} + +.detailed-status__favorites, +.detailed-status__reblogs { + display: inline-block; + font-weight: 500; + font-size: 12px; + margin-left: 6px; +} + +.status__display-name, +.status__relative-time, +.detailed-status__display-name, +.detailed-status__datetime, +.detailed-status__application, +.account__display-name { + text-decoration: none; +} + +.status__display-name, +.account__display-name { + strong { + color: $primary-text-color; + } +} + +.muted { + .emojione { + opacity: 0.5; + } +} + +.status__display-name, +.reply-indicator__display-name, +.detailed-status__display-name, +.account__display-name { + &:hover strong { + text-decoration: underline; + } +} + +.account__display-name strong { + display: block; + overflow: hidden; + text-overflow: ellipsis; +} + +.detailed-status__application, +.detailed-status__datetime { + color: inherit; +} + +.detailed-status__display-name { + color: $ui-secondary-color; + display: block; + line-height: 24px; + margin-bottom: 15px; + overflow: hidden; + + strong, + span { + display: block; + text-overflow: ellipsis; + overflow: hidden; + } + + strong { + font-size: 16px; + color: $primary-text-color; + } +} + +.detailed-status__display-avatar { + float: left; + margin-right: 10px; +} + +.status__avatar { + height: 48px; + left: 10px; + position: absolute; + top: 10px; + width: 48px; +} + +.muted { + .status__content p, + .status__content a { + color: $ui-base-lighter-color; + } + + .status__display-name strong { + color: $ui-base-lighter-color; + } + + .status__avatar { + opacity: 0.5; + } + + a.status__content__spoiler-link { + background: $ui-base-lighter-color; + color: lighten($ui-base-color, 4%); + + &:hover { + background: lighten($ui-base-color, 29%); + text-decoration: none; + } + } +} + +.status__relative-time, +.detailed-status__datetime { + &:hover { + text-decoration: underline; + } +} + +.status-card { + display: flex; + cursor: pointer; + font-size: 14px; + border: 1px solid lighten($ui-base-color, 8%); + border-radius: 4px; + color: $ui-base-lighter-color; + margin-top: 14px; + text-decoration: none; + overflow: hidden; + + &:hover { + background: lighten($ui-base-color, 8%); + } +} + +.status-card-video, +.status-card-rich, +.status-card-photo { + margin-top: 14px; + overflow: hidden; + + iframe { + width: 100%; + height: auto; + } +} + +.status-card-photo { + cursor: zoom-in; + display: block; + text-decoration: none; + width: 100%; + height: auto; + margin: 0; +} + +.status-card-video { + iframe { + width: 100%; + height: 100%; + } +} + +.status-card__title { + display: block; + font-weight: 500; + margin-bottom: 5px; + color: $ui-primary-color; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.status-card__content { + flex: 1 1 auto; + overflow: hidden; + padding: 14px 14px 14px 8px; +} + +.status-card__description { + color: $ui-primary-color; +} + +.status-card__host { + display: block; + margin-top: 5px; + font-size: 13px; +} + +.status-card__image { + flex: 0 0 100px; + background: lighten($ui-base-color, 8%); +} + +.status-card.horizontal { + display: block; + + .status-card__image { + width: 100%; + } + + .status-card__image-image { + border-radius: 4px 4px 0 0; + } + + .status-card__title { + white-space: inherit; + } +} + +.status-card__image-image { + border-radius: 4px 0 0 4px; + display: block; + margin: 0; + width: 100%; + height: 100%; + object-fit: cover; +} + +.status__video-player { + display: flex; + align-items: center; + background: $base-shadow-color; + box-sizing: border-box; + cursor: default; /* May not be needed */ + margin-top: 8px; + overflow: hidden; + position: relative; + + @include fullwidth-gallery; +} + +.status__video-player-video { + height: 100%; + object-fit: cover; + position: relative; + top: 50%; + transform: translateY(-50%); + width: 100%; + z-index: 1; + + &:not(.letterbox) { + height: 100%; + object-fit: cover; + } +} + +.status__video-player-expand, +.status__video-player-mute { + color: $primary-text-color; + opacity: 0.8; + position: absolute; + right: 4px; + text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color; +} + +.status__video-player-spoiler { + display: none; + color: $primary-text-color; + left: 4px; + position: absolute; + text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color; + top: 4px; + z-index: 100; + + &.status__video-player-spoiler--visible { + display: block; + } +} + +.status__video-player-expand { + bottom: 4px; + z-index: 100; +} + +.status__video-player-mute { + top: 4px; + z-index: 5; +} From 25f7568a7e0f8e287dc40ad7705e1403d3d7d61a Mon Sep 17 00:00:00 2001 From: ncls7615 Date: Sun, 14 Jan 2018 08:47:59 +0900 Subject: [PATCH 05/12] Improve scss refactor 3 --- .../glitch/styles/components/account.scss | 30 +- .../glitch/styles/components/glitch.scss | 505 ------------------ .../glitch/styles/components/index.scss | 164 +++++- .../glitch/styles/components/modal.scss | 20 +- .../glitch/styles/components/status.scss | 141 ++++- 5 files changed, 330 insertions(+), 530 deletions(-) delete mode 100644 app/javascript/flavours/glitch/styles/components/glitch.scss diff --git a/app/javascript/flavours/glitch/styles/components/account.scss b/app/javascript/flavours/glitch/styles/components/account.scss index e6f71fd30f..efeea836c9 100644 --- a/app/javascript/flavours/glitch/styles/components/account.scss +++ b/app/javascript/flavours/glitch/styles/components/account.scss @@ -1,6 +1,8 @@ .account { padding: 10px; border-bottom: 1px solid lighten($ui-base-color, 8%); + color: inherit; + text-decoration: none; .account__display-name { flex: 1 1 auto; @@ -10,6 +12,18 @@ text-decoration: none; font-size: 14px; } + + &.small { + border: none; + padding: 0; + + & > .account__avatar-wrapper { margin: 0 8px 0 0 } + + & > .display-name { + height: 24px; + line-height: 24px; + } + } } .account__wrapper { @@ -18,8 +32,7 @@ .account__avatar-wrapper { float: left; - margin-left: 12px; - margin-right: 12px; + margin: 6px 16px 6px 6px; } .account__avatar { @@ -59,6 +72,11 @@ white-space: nowrap; } +.account__header__wrapper { + flex: 0 0 auto; + background: lighten($ui-base-color, 4%); +} + .account__header { flex: 0 0 auto; background: lighten($ui-base-color, 4%); @@ -67,6 +85,14 @@ background-position: center; position: relative; + .account__avatar { + @include avatar-radius(); + @include avatar-size(90px); + display: block; + margin: 0 auto 10px; + overflow: hidden; + } + &.inactive { opacity: 0.5; diff --git a/app/javascript/flavours/glitch/styles/components/glitch.scss b/app/javascript/flavours/glitch/styles/components/glitch.scss deleted file mode 100644 index b30f26cd89..0000000000 --- a/app/javascript/flavours/glitch/styles/components/glitch.scss +++ /dev/null @@ -1,505 +0,0 @@ -.status__content { - //reset - overflow: initial; - padding-top: inherit; - //glitch - position: relative; - margin: 10px 0; - padding: 0 12px; - font-size: 15px; - line-height: 20px; - color: $primary-text-color; - word-wrap: break-word; - font-weight: 400; - overflow: visible; - white-space: pre-wrap; - padding-top: 5px; -} - -.status-check-box { - .status__content { - color: #3a3a3a; - a { - color: #005aa9; - } - } -} - -.status__content__spoiler { - background: lighten($ui-base-color, 30%); - - &:hover { - background: lighten($ui-base-color, 33%); - text-decoration: none; - } -} - -.status__content__text { - display: none; - - &.status__content__spoiler--visible { - display: block; - } -} - -.status__content__spoiler-link { - //reset - background: initial; - border: initial; - padding: initial; - //glitch - background: lighten($ui-base-color, 30%); - border: none; - padding: 0 5px; - vertical-align: bottom; - - &:hover { - background: lighten($ui-base-color, 33%); - text-decoration: none; - } - - .status__content__spoiler-icon { - display: inline-block; - margin: 0 0 0 5px; - border-left: 1px solid currentColor; - padding: 0 0 0 4px; - font-size: 16px; - vertical-align: -2px; - } -} - -.status__prepend-icon-wrapper { - //reset - left: initial; - position: initial; - //glitch - float: left; - margin: 0 10px 0 -58px; - width: 48px; - text-align: right; -} - -.notif-cleaning { - .status, .notification-follow { - padding-right: ($dismiss-overlay-width + 0.5rem); - } -} - -.notification-follow { - position: relative; - - // same like Status - border-bottom: 1px solid lighten($ui-base-color, 8%); - - .account { - border-bottom: 0 none; - } -} - -.status { - //reset - padding-left: initial; - //glitch - padding: 8px 10px; - position: relative; - height: auto; - min-height: 48px; - border-bottom: 1px solid lighten($ui-base-color, 8%); - cursor: default; - - &.collapsed { - background-position: center; - background-size: cover; - user-select: none; - - &.has-background::before { - display: block; - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - background-image: linear-gradient(to bottom, rgba($base-shadow-color, .75), rgba($base-shadow-color, .65) 24px, rgba($base-shadow-color, .8)); - content: ""; - } - - .display-name:hover .display-name__html { - text-decoration: none; - } - - .status__content { - height: 20px; - overflow: hidden; - text-overflow: ellipsis; - - a:hover { - text-decoration: none; - } - } - } - - .notification__message { - margin: -10px -10px 10px; - } -} - -.status__relative-time { - //reset - float: initial; - //glitch - display: inline-block; - margin-left: auto; - padding-left: 18px; - width: 120px; - color: $ui-base-lighter-color; - font-size: 14px; - text-align: right; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.status__display-name { - margin: 0 auto 0 0; - color: $ui-base-lighter-color; - overflow: hidden; -} - -.status__info { - display: flex; - margin: 2px 0 5px; - font-size: 15px; - line-height: 24px; -} - -.status__info__icons { - flex: none; - position: relative; - color: lighten($ui-base-color, 26%); - - .status__visibility-icon { - padding-left: 6px; - } -} - -.status__prepend { - //reset - margin-left: initial; - padding: initial; - padding-bottom: initial; - //glitch - margin: -10px -10px 10px; - color: $ui-base-lighter-color; - padding: 8px 10px 0 68px; - font-size: 14px; - position: relative; -} - -.account { - color: inherit; - text-decoration: none; - - &.small { - border: none; - padding: 0; - - & > .account__avatar-wrapper { margin: 0 8px 0 0 } - - & > .display-name { - height: 24px; - line-height: 24px; - } - } -} - -.account__avatar-wrapper { - //reset - margin-left: initial; - margin-right: initial; - //glitch - margin: 6px 16px 6px 6px; -} - -.account__header__wrapper { - flex: 0 0 auto; - background: lighten($ui-base-color, 4%); -} - -.account__header { - .account__avatar { - @include avatar-radius(); - @include avatar-size(90px); - display: block; - margin: 0 auto 10px; - overflow: hidden; - } -} - -.status__avatar { - //reset - left: initial; - position: initial; - top: initial; - //glitch - flex: none; - margin: 0 10px 0 0; - height: 48px; - width: 48px; -} - -.display-name { - display: block; - padding: 6px 0; - max-width: 100%; - height: 36px; - overflow: hidden; - - strong { - display: block; - height: 18px; - font-size: 16px; - font-weight: 500; - line-height: 18px; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - } - - span { - display: block; - height: 18px; - font-size: 15px; - line-height: 18px; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - } - - &:hover { - strong { - text-decoration: underline; - } - } - - &.inline { - padding: 0; - height: 18px; - font-size: 15px; - line-height: 18px; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - - strong { - display: inline; - height: auto; - font-size: inherit; - line-height: inherit; - } - - span { - display: inline; - height: auto; - font-size: inherit; - line-height: inherit; - } - } -} - -.column { - width: 330px; - position: relative; - box-sizing: border-box; - display: flex; - flex-direction: column; - overflow: hidden; - - .wide & { - flex: auto; - min-width: 330px; - max-width: 400px; - } - - > .scrollable { - background: $ui-base-color; - } -} - -.column-header__button { - // glitch - added focus ring for keyboard navigation - &:focus { - text-shadow: 0 0 4px darken($ui-highlight-color, 5%); - } -} - -.scrollable > div > :first-child .notification__dismiss-overlay > .wrappy { - border-top: 1px solid $ui-base-color; -} - -.notification__dismiss-overlay { - overflow: hidden; - position: absolute; - top: 0; - right: 0; - bottom: -1px; - padding-left: 15px; // space for the box shadow to be visible - - z-index: 999; - align-items: center; - justify-content: flex-end; - cursor: pointer; - - display: flex; - - .wrappy { - width: $dismiss-overlay-width; - align-self: stretch; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - background: lighten($ui-base-color, 8%); - border-left: 1px solid lighten($ui-base-color, 20%); - box-shadow: 0 0 5px black; - border-bottom: 1px solid $ui-base-color; - } - - .ckbox { - border: 2px solid $ui-primary-color; - border-radius: 2px; - width: 30px; - height: 30px; - font-size: 20px; - color: $ui-primary-color; - text-shadow: 0 0 5px black; - display: flex; - justify-content: center; - align-items: center; - } - - &:focus { - outline: 0 !important; - - .ckbox { - box-shadow: 0 0 1px 1px $ui-highlight-color; - } - } -} - -.column-header__notif-cleaning-buttons { - display: flex; - align-items: stretch; - justify-content: space-around; - - button { - @extend .column-header__button; - background: transparent; - text-align: center; - padding: 10px 0; - white-space: pre-wrap; - } - - b { - font-weight: bold; - } -} - -// The notifs drawer with no padding to have more space for the buttons -.column-header__collapsible-inner.nopad-drawer { - padding: 0; -} - -.column-header__collapsible { - // notif cleaning drawer - &.ncd { - transition: none; - &.collapsed { - max-height: 0; - opacity: 0.7; - } - } -} - -.media-spoiler { - .status__content > & { - margin-top: 15px; // Add margin when used bare for NSFW video player - } - @include fullwidth-gallery; -} - -.boost-modal, -.favourite-modal, -.confirmation-modal, -.report-modal, -.actions-modal, -.mute-modal { - background: lighten($ui-secondary-color, 8%); - color: $ui-base-color; - border-radius: 8px; - overflow: hidden; - max-width: 90vw; - width: 480px; - position: relative; - flex-direction: column; - - .status__display-name { - //reset - display: initial; - max-width: initial; - padding-right: initial; - //glitch - display: flex; - } -} - -.boost-modal__container, -.favourite-modal__container { - overflow-x: scroll; - padding: 10px; - - .status { - user-select: text; - border-bottom: 0; - } -} - -.boost-modal__action-bar, -.favourite-modal__action-bar, -.confirmation-modal__action-bar, -.mute-modal__action-bar, -.report-modal__action-bar { - display: flex; - justify-content: space-between; - background: $ui-secondary-color; - padding: 10px; - line-height: 36px; - - & > div { - flex: 1 1 auto; - text-align: right; - color: lighten($ui-base-color, 33%); - padding-right: 10px; - } - - .button { - flex: 0 0 auto; - } -} - -.boost-modal__status-header, -.favourite-modal__status-header { - font-size: 15px; -} - -.boost-modal__status-time, -.favourite-modal__status-time { - float: right; - font-size: 14px; -} - -.actions-modal { - strong { - display: block; - font-weight: 500; - } -} diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index 8910d000d3..21c2b89de9 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -304,10 +304,63 @@ .display-name { display: block; + padding: 6px 0; max-width: 100%; + height: 36px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + + strong { + display: block; + height: 18px; + font-size: 16px; + font-weight: 500; + line-height: 18px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } + + span { + display: block; + height: 18px; + font-size: 15px; + line-height: 18px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } + + &:hover { + strong { + text-decoration: underline; + } + } + + &.inline { + padding: 0; + height: 18px; + font-size: 15px; + line-height: 18px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + + strong { + display: inline; + height: auto; + font-size: inherit; + line-height: inherit; + } + + span { + display: inline; + height: auto; + font-size: inherit; + line-height: inherit; + } + } } .display-name__html { @@ -1127,6 +1180,25 @@ } } +.column { + width: 330px; + position: relative; + box-sizing: border-box; + display: flex; + flex-direction: column; + overflow: hidden; + + .wide & { + flex: auto; + min-width: 330px; + max-width: 400px; + } + + > .scrollable { + background: $ui-base-color; + } +} + .column-header__buttons { height: 48px; display: flex; @@ -1159,6 +1231,88 @@ background: lighten($ui-base-color, 8%); } } + + // glitch - added focus ring for keyboard navigation + &:focus { + text-shadow: 0 0 4px darken($ui-highlight-color, 5%); + } +} + +.scrollable > div > :first-child .notification__dismiss-overlay > .wrappy { + border-top: 1px solid $ui-base-color; +} + +.notification__dismiss-overlay { + overflow: hidden; + position: absolute; + top: 0; + right: 0; + bottom: -1px; + padding-left: 15px; // space for the box shadow to be visible + + z-index: 999; + align-items: center; + justify-content: flex-end; + cursor: pointer; + + display: flex; + + .wrappy { + width: $dismiss-overlay-width; + align-self: stretch; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background: lighten($ui-base-color, 8%); + border-left: 1px solid lighten($ui-base-color, 20%); + box-shadow: 0 0 5px black; + border-bottom: 1px solid $ui-base-color; + } + + .ckbox { + border: 2px solid $ui-primary-color; + border-radius: 2px; + width: 30px; + height: 30px; + font-size: 20px; + color: $ui-primary-color; + text-shadow: 0 0 5px black; + display: flex; + justify-content: center; + align-items: center; + } + + &:focus { + outline: 0 !important; + + .ckbox { + box-shadow: 0 0 1px 1px $ui-highlight-color; + } + } +} + +.column-header__notif-cleaning-buttons { + display: flex; + align-items: stretch; + justify-content: space-around; + + button { + @extend .column-header__button; + background: transparent; + text-align: center; + padding: 10px 0; + white-space: pre-wrap; + } + + b { + font-weight: bold; + } +} + +// The notifs drawer with no padding to have more space for the buttons +.column-header__collapsible-inner.nopad-drawer { + padding: 0; } .column-header__collapsible { @@ -1185,6 +1339,15 @@ border-top: 1px solid lighten($ui-base-color, 12%); margin: 10px 0; } + + // notif cleaning drawer + &.ncd { + transition: none; + &.collapsed { + max-height: 0; + opacity: 0.7; + } + } } .column-header__collapsible-inner { @@ -1772,4 +1935,3 @@ noscript { @import 'list'; @import 'emoji_picker'; @import 'local_settings'; -@import 'glitch'; diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss index 1f283b9afa..764f1ad6b9 100644 --- a/app/javascript/flavours/glitch/styles/components/modal.scss +++ b/app/javascript/flavours/glitch/styles/components/modal.scss @@ -392,6 +392,7 @@ } .boost-modal, +.favourite-modal, .confirmation-modal, .report-modal, .actions-modal, @@ -406,9 +407,7 @@ flex-direction: column; .status__display-name { - display: block; - max-width: 100%; - padding-right: 25px; + display: flex; } .status__avatar { @@ -433,7 +432,8 @@ } } -.boost-modal__container { +.boost-modal__container, +.favourite-modal__container { overflow-x: scroll; padding: 10px; @@ -444,6 +444,7 @@ } .boost-modal__action-bar, +.favourite-modal__action-bar, .confirmation-modal__action-bar, .mute-modal__action-bar, .report-modal__action-bar { @@ -465,11 +466,13 @@ } } -.boost-modal__status-header { +.boost-modal__status-header, +.favourite-modal__status-header { font-size: 15px; } -.boost-modal__status-time { +.boost-modal__status-time, +.favourite-modal__status-time { float: right; font-size: 14px; } @@ -514,6 +517,11 @@ max-height: 300px; } + strong { + display: block; + font-weight: 500; + } + max-height: 80vh; max-width: 80vw; diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index 453923901e..22787ea94a 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -3,13 +3,17 @@ } .status__content { + position: relative; + margin: 10px 0; + padding: 0 12px; font-size: 15px; line-height: 20px; + color: $primary-text-color; word-wrap: break-word; font-weight: 400; - overflow: hidden; + overflow: visible; white-space: pre-wrap; - padding-top: 2px; + padding-top: 5px; &:focus { outline: 0; @@ -64,6 +68,15 @@ } } + .status__content__spoiler { + background: lighten($ui-base-color, 30%); + + &:hover { + background: lighten($ui-base-color, 33%); + text-decoration: none; + } + } + .status__content__spoiler-link { background: lighten($ui-base-color, 30%); @@ -76,7 +89,7 @@ .status__content__text { display: none; - &.status__content__text--visible { + &.status__content__spoiler--visible { display: block; } } @@ -85,20 +98,54 @@ .status__content__spoiler-link { display: inline-block; border-radius: 2px; - background: transparent; - border: 0; + background: lighten($ui-base-color, 30%); + border: none; color: lighten($ui-base-color, 8%); font-weight: 500; font-size: 11px; - padding: 0 6px; + padding: 0 5px; text-transform: uppercase; line-height: inherit; cursor: pointer; + vertical-align: bottom; + + &:hover { + background: lighten($ui-base-color, 33%); + text-decoration: none; + } + + .status__content__spoiler-icon { + display: inline-block; + margin: 0 0 0 5px; + border-left: 1px solid currentColor; + padding: 0 0 0 4px; + font-size: 16px; + vertical-align: -2px; + } +} + +.notif-cleaning { + .status, .notification-follow { + padding-right: ($dismiss-overlay-width + 0.5rem); + } } .status__prepend-icon-wrapper { - left: -26px; - position: absolute; + float: left; + margin: 0 10px 0 -58px; + width: 48px; + text-align: right; +} + +.notification-follow { + position: relative; + + // same like Status + border-bottom: 1px solid lighten($ui-base-color, 8%); + + .account { + border-bottom: 0 none; + } } .focusable { @@ -123,8 +170,8 @@ .status { padding: 8px 10px; - padding-left: 68px; position: relative; + height: auto; min-height: 48px; border-bottom: 1px solid lighten($ui-base-color, 8%); cursor: default; @@ -190,6 +237,41 @@ } } } + + &.collapsed { + background-position: center; + background-size: cover; + user-select: none; + + &.has-background::before { + display: block; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + background-image: linear-gradient(to bottom, rgba($base-shadow-color, .75), rgba($base-shadow-color, .65) 24px, rgba($base-shadow-color, .8)); + content: ""; + } + + .display-name:hover .display-name__html { + text-decoration: none; + } + + .status__content { + height: 20px; + overflow: hidden; + text-overflow: ellipsis; + + a:hover { + text-decoration: none; + } + } + } + + .notification__message { + margin: -10px -10px 10px; + } } } @@ -204,13 +286,22 @@ } .status__relative-time { + display: inline-block; + margin-left: auto; + padding-left: 18px; + width: 120px; color: $ui-base-lighter-color; - float: right; font-size: 14px; + text-align: right; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .status__display-name { + margin: 0 auto 0 0; color: $ui-base-lighter-color; + overflow: hidden; } .status__info .status__display-name { @@ -220,7 +311,20 @@ } .status__info { + display: flex; + margin: 2px 0 5px; font-size: 15px; + line-height: 24px; +} + +.status__info__icons { + flex: none; + position: relative; + color: lighten($ui-base-color, 26%); + + .status__visibility-icon { + padding-left: 6px; + } } .status-check-box { @@ -233,6 +337,13 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + + .status__content { + color: #3a3a3a; + a { + color: #005aa9; + } + } } } @@ -245,10 +356,9 @@ } .status__prepend { - margin-left: 68px; + margin: -10px -10px 10px; color: $ui-base-lighter-color; - padding: 8px 0; - padding-bottom: 2px; + padding: 8px 10px 0 68px; font-size: 14px; position: relative; @@ -405,10 +515,9 @@ } .status__avatar { + flex: none; + margin: 0 10px 0 0; height: 48px; - left: 10px; - position: absolute; - top: 10px; width: 48px; } From a263178cf3d6c94abf6ccf1f2e0d002e364f4bcd Mon Sep 17 00:00:00 2001 From: ncls7615 Date: Sun, 14 Jan 2018 09:12:10 +0900 Subject: [PATCH 06/12] Improve scss refactor 4 --- .../{account.scss => accounts.scss} | 0 .../glitch/styles/components/columns.scss | 503 ++++++++++++ .../glitch/styles/components/emoji.scss | 105 +++ .../glitch/styles/components/index.scss | 727 +----------------- .../components/{list.scss => lists.scss} | 0 .../glitch/styles/components/search.scss | 105 +++ 6 files changed, 719 insertions(+), 721 deletions(-) rename app/javascript/flavours/glitch/styles/components/{account.scss => accounts.scss} (100%) create mode 100644 app/javascript/flavours/glitch/styles/components/columns.scss create mode 100644 app/javascript/flavours/glitch/styles/components/emoji.scss rename app/javascript/flavours/glitch/styles/components/{list.scss => lists.scss} (100%) create mode 100644 app/javascript/flavours/glitch/styles/components/search.scss diff --git a/app/javascript/flavours/glitch/styles/components/account.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss similarity index 100% rename from app/javascript/flavours/glitch/styles/components/account.scss rename to app/javascript/flavours/glitch/styles/components/accounts.scss diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss new file mode 100644 index 0000000000..6e03650edc --- /dev/null +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -0,0 +1,503 @@ +.column__wrapper { + display: flex; + flex: 1 1 auto; + position: relative; +} + +.column-icon { + background: lighten($ui-base-color, 4%); + color: $ui-primary-color; + cursor: pointer; + font-size: 16px; + padding: 15px; + position: absolute; + right: 0; + top: -48px; + z-index: 3; + + &:hover { + color: lighten($ui-primary-color, 7%); + } +} + +.columns-area { + display: flex; + flex: 1 1 auto; + flex-direction: row; + justify-content: flex-start; + overflow-x: auto; + position: relative; +} + +@include limited-single-column('screen and (max-width: 360px)', $parent: null) { + .columns-area { + padding: 10px; + } + + .react-swipeable-view-container .columns-area { + height: calc(100% - 20px) !important; + } +} + +.react-swipeable-view-container { + &, + .columns-area, + .column { + height: 100%; + } +} + +.react-swipeable-view-container > * { + display: flex; + align-items: center; + justify-content: center; + height: 100%; +} + +.column { + width: 330px; + position: relative; + box-sizing: border-box; + display: flex; + flex-direction: column; + + > .scrollable { + background: $ui-base-color; + } +} + +.ui { + flex: 0 0 auto; + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + background: darken($ui-base-color, 7%); +} + +.column { + overflow: hidden; +} + +@include limited-single-column('screen and (max-width: 360px)', $parent: null) { + .tabs-bar { + margin: 0; + } +} + +:root { // Overrides .wide stylings for mobile view + @include single-column('screen and (max-width: 630px)', $parent: null) { + .column { + flex: auto; + width: 100%; + min-width: 0; + max-width: none; + padding: 0; + } + + .columns-area { + flex-direction: column; + } + + .search__input, + .autosuggest-textarea__textarea { + font-size: 16px; + } + } +} + +@include multi-columns('screen and (min-width: 631px)', $parent: null) { + .columns-area { + padding: 0; + } + + .column { + 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 { + padding-left: 5px; + padding-right: 5px; + } + } +} + +.column-back-button { + background: lighten($ui-base-color, 4%); + color: $ui-highlight-color; + cursor: pointer; + flex: 0 0 auto; + font-size: 16px; + border: 0; + text-align: unset; + padding: 15px; + margin: 0; + z-index: 3; + + &:hover { + text-decoration: underline; + } +} + +.column-header__back-button { + background: lighten($ui-base-color, 4%); + border: 0; + font-family: inherit; + color: $ui-highlight-color; + cursor: pointer; + flex: 0 0 auto; + font-size: 16px; + padding: 0 5px 0 0; + z-index: 3; + + &:hover { + text-decoration: underline; + } + + &:last-child { + padding: 0 15px 0 0; + } +} + +.column-back-button__icon { + display: inline-block; + margin-right: 5px; +} + +.column-back-button--slim { + position: relative; +} + +.column-back-button--slim-button { + cursor: pointer; + flex: 0 0 auto; + font-size: 16px; + padding: 15px; + position: absolute; + right: 0; + top: -48px; +} + +.column-link { + background: lighten($ui-base-color, 8%); + color: $primary-text-color; + display: block; + font-size: 16px; + padding: 15px; + text-decoration: none; + + &:hover { + background: lighten($ui-base-color, 11%); + } +} + +.column-link__icon { + display: inline-block; + margin-right: 5px; +} + +.column-subheading { + background: $ui-base-color; + color: $ui-base-lighter-color; + padding: 8px 20px; + font-size: 12px; + font-weight: 500; + text-transform: uppercase; + cursor: default; +} + +.column-header__wrapper { + position: relative; + flex: 0 0 auto; + + &.active { + &::before { + display: block; + content: ""; + position: absolute; + top: 35px; + left: 0; + right: 0; + margin: 0 auto; + width: 60%; + pointer-events: none; + height: 28px; + z-index: 1; + background: radial-gradient(ellipse, rgba($ui-highlight-color, 0.23) 0%, rgba($ui-highlight-color, 0) 60%); + } + } +} + +.column-header { + display: flex; + padding: 15px; + font-size: 16px; + background: lighten($ui-base-color, 4%); + flex: 0 0 auto; + cursor: pointer; + position: relative; + z-index: 2; + outline: 0; + + &.active { + box-shadow: 0 1px 0 rgba($ui-highlight-color, 0.3); + + .column-header__icon { + color: $ui-highlight-color; + text-shadow: 0 0 10px rgba($ui-highlight-color, 0.4); + } + } + + &:focus, + &:active { + outline: 0; + } +} + +.column { + width: 330px; + position: relative; + box-sizing: border-box; + display: flex; + flex-direction: column; + overflow: hidden; + + .wide & { + flex: auto; + min-width: 330px; + max-width: 400px; + } + + > .scrollable { + background: $ui-base-color; + } +} + +.column-header__buttons { + height: 48px; + display: flex; + margin: -15px; + margin-left: 0; +} + +.column-header__links .text-btn { + margin-right: 10px; +} + +.column-header__button { + background: lighten($ui-base-color, 4%); + border: 0; + color: $ui-primary-color; + cursor: pointer; + font-size: 16px; + padding: 0 15px; + + &:hover { + color: lighten($ui-primary-color, 7%); + } + + &.active { + color: $primary-text-color; + background: lighten($ui-base-color, 8%); + + &:hover { + color: $primary-text-color; + background: lighten($ui-base-color, 8%); + } + } + + // glitch - added focus ring for keyboard navigation + &:focus { + text-shadow: 0 0 4px darken($ui-highlight-color, 5%); + } +} + +.column-header__notif-cleaning-buttons { + display: flex; + align-items: stretch; + justify-content: space-around; + + button { + @extend .column-header__button; + background: transparent; + text-align: center; + padding: 10px 0; + white-space: pre-wrap; + } + + b { + font-weight: bold; + } +} + +// The notifs drawer with no padding to have more space for the buttons +.column-header__collapsible-inner.nopad-drawer { + padding: 0; +} + +.column-header__collapsible { + max-height: 70vh; + overflow: hidden; + overflow-y: auto; + color: $ui-primary-color; + transition: max-height 150ms ease-in-out, opacity 300ms linear; + opacity: 1; + + &.collapsed { + max-height: 0; + opacity: 0.5; + } + + &.animating { + overflow-y: hidden; + } + + hr { + height: 0; + background: transparent; + border: 0; + border-top: 1px solid lighten($ui-base-color, 12%); + margin: 10px 0; + } + + // notif cleaning drawer + &.ncd { + transition: none; + &.collapsed { + max-height: 0; + opacity: 0.7; + } + } +} + +.column-header__collapsible-inner { + background: lighten($ui-base-color, 8%); + padding: 15px; +} + +.column-header__setting-btn { + &:hover { + color: lighten($ui-primary-color, 4%); + text-decoration: underline; + } +} + +.column-header__setting-arrows { + float: right; + + .column-header__setting-btn { + padding: 0 10px; + + &:last-child { + padding-right: 0; + } + } +} + +.column-header__title { + display: inline-block; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + flex: 1; +} + +.column-header__icon { + display: inline-block; + margin-right: 5px; +} + +.empty-column-indicator, +.error-column { + color: lighten($ui-base-color, 20%); + background: $ui-base-color; + text-align: center; + padding: 20px; + font-size: 15px; + font-weight: 400; + cursor: default; + display: flex; + flex: 1 1 auto; + align-items: center; + justify-content: center; + @supports(display: grid) { // hack to fix Chrome <57 + contain: strict; + } + + a { + color: $ui-highlight-color; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } +} + +.error-column { + flex-direction: column; +} + +// more fixes for the navbar-under mode +@mixin fix-margins-for-navbar-under { + .tabs-bar { + margin-top: 0 !important; + margin-bottom: -6px !important; + } +} + +.single-column.navbar-under { + @include fix-margins-for-navbar-under; +} + +.auto-columns.navbar-under { + @media screen and (max-width: 360px) { + @include fix-margins-for-navbar-under; + } +} + +.auto-columns.navbar-under .react-swipeable-view-container .columns-area, +.single-column.navbar-under .react-swipeable-view-container .columns-area { + @media screen and (max-width: 360px) { + height: 100% !important; + } +} + +.column-inline-form { + padding: 7px 15px; + padding-right: 5px; + display: flex; + justify-content: flex-start; + align-items: center; + background: lighten($ui-base-color, 4%); + + label { + flex: 1 1 auto; + + input { + width: 100%; + margin-bottom: 6px; + + &:focus { + outline: 0; + } + } + } + + .icon-button { + flex: 0 0 auto; + margin-left: 5px; + } +} diff --git a/app/javascript/flavours/glitch/styles/components/emoji.scss b/app/javascript/flavours/glitch/styles/components/emoji.scss new file mode 100644 index 0000000000..c91964810e --- /dev/null +++ b/app/javascript/flavours/glitch/styles/components/emoji.scss @@ -0,0 +1,105 @@ +.emojione { + display: inline-block; + font-size: inherit; + vertical-align: middle; + object-fit: contain; + margin: -.2ex .15em .2ex; + width: 16px; + height: 16px; + + img { + width: auto; + } +} + +.emoji-picker-dropdown__menu { + background: $simple-background-color; + position: absolute; + box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4); + border-radius: 4px; + margin-top: 5px; + + .emoji-mart-scroll { + transition: opacity 200ms ease; + } + + &.selecting .emoji-mart-scroll { + opacity: 0.5; + } +} + +.emoji-picker-dropdown__modifiers { + position: absolute; + top: 60px; + right: 11px; + cursor: pointer; +} + +.emoji-picker-dropdown__modifiers__menu { + position: absolute; + z-index: 4; + top: -4px; + left: -8px; + background: $simple-background-color; + border-radius: 4px; + box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); + overflow: hidden; + + button { + display: block; + cursor: pointer; + border: 0; + padding: 4px 8px; + background: transparent; + + &:hover, + &:focus, + &:active { + background: rgba($ui-secondary-color, 0.4); + } + } + + .emoji-mart-emoji { + height: 22px; + } +} + +.emoji-mart-emoji { + span { + background-repeat: no-repeat; + } +} + +.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; + } + } +} diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index 21c2b89de9..5bc1c98e05 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -81,28 +81,6 @@ } } -.column__wrapper { - display: flex; - flex: 1 1 auto; - position: relative; -} - -.column-icon { - background: lighten($ui-base-color, 4%); - color: $ui-primary-color; - cursor: pointer; - font-size: 16px; - padding: 15px; - position: absolute; - right: 0; - top: -48px; - z-index: 3; - - &:hover { - color: lighten($ui-primary-color, 7%); - } -} - .icon-button { display: inline-block; padding: 0; @@ -264,20 +242,6 @@ color: $ui-base-color; } -.emojione { - display: inline-block; - font-size: inherit; - vertical-align: middle; - object-fit: contain; - margin: -.2ex .15em .2ex; - width: 16px; - height: 16px; - - img { - width: auto; - } -} - .notification__favourite-icon-wrapper { left: -26px; position: absolute; @@ -564,121 +528,6 @@ } } -.columns-area { - display: flex; - flex: 1 1 auto; - flex-direction: row; - justify-content: flex-start; - overflow-x: auto; - position: relative; -} - -@include limited-single-column('screen and (max-width: 360px)', $parent: null) { - .columns-area { - padding: 10px; - } - - .react-swipeable-view-container .columns-area { - height: calc(100% - 20px) !important; - } -} - -.react-swipeable-view-container { - &, - .columns-area, - .drawer, - .column { - height: 100%; - } -} - -.react-swipeable-view-container > * { - display: flex; - align-items: center; - justify-content: center; - height: 100%; -} - -.column { - width: 330px; - position: relative; - box-sizing: border-box; - display: flex; - flex-direction: column; - - > .scrollable { - background: $ui-base-color; - } -} - -.ui { - flex: 0 0 auto; - display: flex; - flex-direction: column; - width: 100%; - height: 100%; - background: darken($ui-base-color, 7%); -} - -.column { - overflow: hidden; -} - -@include limited-single-column('screen and (max-width: 360px)', $parent: null) { - .tabs-bar { - margin: 0; - } -} - -:root { // Overrides .wide stylings for mobile view - @include single-column('screen and (max-width: 630px)', $parent: null) { - .column { - flex: auto; - width: 100%; - min-width: 0; - max-width: none; - padding: 0; - } - - .columns-area { - flex-direction: column; - } - - .search__input, - .autosuggest-textarea__textarea { - font-size: 16px; - } - } -} - -@include multi-columns('screen and (min-width: 631px)', $parent: null) { - .columns-area { - padding: 0; - } - - .column { - 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 { - padding-left: 5px; - padding-right: 5px; - } - } -} - .drawer__pager { box-sizing: border-box; padding: 0; @@ -798,62 +647,6 @@ } } -.column-back-button { - background: lighten($ui-base-color, 4%); - color: $ui-highlight-color; - cursor: pointer; - flex: 0 0 auto; - font-size: 16px; - border: 0; - text-align: unset; - padding: 15px; - margin: 0; - z-index: 3; - - &:hover { - text-decoration: underline; - } -} - -.column-header__back-button { - background: lighten($ui-base-color, 4%); - border: 0; - font-family: inherit; - color: $ui-highlight-color; - cursor: pointer; - flex: 0 0 auto; - font-size: 16px; - padding: 0 5px 0 0; - z-index: 3; - - &:hover { - text-decoration: underline; - } - - &:last-child { - padding: 0 15px 0 0; - } -} - -.column-back-button__icon { - display: inline-block; - margin-right: 5px; -} - -.column-back-button--slim { - position: relative; -} - -.column-back-button--slim-button { - cursor: pointer; - flex: 0 0 auto; - font-size: 16px; - padding: 15px; - position: absolute; - right: 0; - top: -48px; -} - .react-toggle { display: inline-block; position: relative; @@ -960,34 +753,6 @@ border-color: $ui-highlight-color; } -.column-link { - background: lighten($ui-base-color, 8%); - color: $primary-text-color; - display: block; - font-size: 16px; - padding: 15px; - text-decoration: none; - - &:hover { - background: lighten($ui-base-color, 11%); - } -} - -.column-link__icon { - display: inline-block; - margin-right: 5px; -} - -.column-subheading { - background: $ui-base-color; - color: $ui-base-lighter-color; - padding: 8px 20px; - font-size: 12px; - font-weight: 500; - text-transform: uppercase; - cursor: default; -} - .getting-started__wrapper, .getting_started { background: $ui-base-color; @@ -1066,8 +831,6 @@ } } -@import 'boost'; - .no-reduce-motion button.icon-button i.fa-retweet { background-position: 0 0; height: 19px; @@ -1132,112 +895,6 @@ } } -.column-header__wrapper { - position: relative; - flex: 0 0 auto; - - &.active { - &::before { - display: block; - content: ""; - position: absolute; - top: 35px; - left: 0; - right: 0; - margin: 0 auto; - width: 60%; - pointer-events: none; - height: 28px; - z-index: 1; - background: radial-gradient(ellipse, rgba($ui-highlight-color, 0.23) 0%, rgba($ui-highlight-color, 0) 60%); - } - } -} - -.column-header { - display: flex; - padding: 15px; - font-size: 16px; - background: lighten($ui-base-color, 4%); - flex: 0 0 auto; - cursor: pointer; - position: relative; - z-index: 2; - outline: 0; - - &.active { - box-shadow: 0 1px 0 rgba($ui-highlight-color, 0.3); - - .column-header__icon { - color: $ui-highlight-color; - text-shadow: 0 0 10px rgba($ui-highlight-color, 0.4); - } - } - - &:focus, - &:active { - outline: 0; - } -} - -.column { - width: 330px; - position: relative; - box-sizing: border-box; - display: flex; - flex-direction: column; - overflow: hidden; - - .wide & { - flex: auto; - min-width: 330px; - max-width: 400px; - } - - > .scrollable { - background: $ui-base-color; - } -} - -.column-header__buttons { - height: 48px; - display: flex; - margin: -15px; - margin-left: 0; -} - -.column-header__links .text-btn { - margin-right: 10px; -} - -.column-header__button { - background: lighten($ui-base-color, 4%); - border: 0; - color: $ui-primary-color; - cursor: pointer; - font-size: 16px; - padding: 0 15px; - - &:hover { - color: lighten($ui-primary-color, 7%); - } - - &.active { - color: $primary-text-color; - background: lighten($ui-base-color, 8%); - - &:hover { - color: $primary-text-color; - background: lighten($ui-base-color, 8%); - } - } - - // glitch - added focus ring for keyboard navigation - &:focus { - text-shadow: 0 0 4px darken($ui-highlight-color, 5%); - } -} - .scrollable > div > :first-child .notification__dismiss-overlay > .wrappy { border-top: 1px solid $ui-base-color; } @@ -1292,96 +949,6 @@ } } -.column-header__notif-cleaning-buttons { - display: flex; - align-items: stretch; - justify-content: space-around; - - button { - @extend .column-header__button; - background: transparent; - text-align: center; - padding: 10px 0; - white-space: pre-wrap; - } - - b { - font-weight: bold; - } -} - -// The notifs drawer with no padding to have more space for the buttons -.column-header__collapsible-inner.nopad-drawer { - padding: 0; -} - -.column-header__collapsible { - max-height: 70vh; - overflow: hidden; - overflow-y: auto; - color: $ui-primary-color; - transition: max-height 150ms ease-in-out, opacity 300ms linear; - opacity: 1; - - &.collapsed { - max-height: 0; - opacity: 0.5; - } - - &.animating { - overflow-y: hidden; - } - - hr { - height: 0; - background: transparent; - border: 0; - border-top: 1px solid lighten($ui-base-color, 12%); - margin: 10px 0; - } - - // notif cleaning drawer - &.ncd { - transition: none; - &.collapsed { - max-height: 0; - opacity: 0.7; - } - } -} - -.column-header__collapsible-inner { - background: lighten($ui-base-color, 8%); - padding: 15px; -} - -.column-header__setting-btn { - &:hover { - color: lighten($ui-primary-color, 4%); - text-decoration: underline; - } -} - -.column-header__setting-arrows { - float: right; - - .column-header__setting-btn { - padding: 0 10px; - - &:last-child { - padding-right: 0; - } - } -} - -.column-header__title { - display: inline-block; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - flex: 1; -} - .text-btn { display: inline-block; padding: 0; @@ -1393,11 +960,6 @@ cursor: pointer; } -.column-header__icon { - display: inline-block; - margin-right: 5px; -} - .loading-indicator { color: lighten($ui-base-color, 26%); font-size: 12px; @@ -1499,37 +1061,6 @@ float: right; } -.empty-column-indicator, -.error-column { - color: lighten($ui-base-color, 20%); - background: $ui-base-color; - text-align: center; - padding: 20px; - font-size: 15px; - font-weight: 400; - cursor: default; - display: flex; - flex: 1 1 auto; - align-items: center; - justify-content: center; - @supports(display: grid) { // hack to fix Chrome <57 - contain: strict; - } - - a { - color: $ui-highlight-color; - text-decoration: none; - - &:hover { - text-decoration: underline; - } - } -} - -.error-column { - flex-direction: column; -} - @keyframes heartbeat { from { transform: scale(1); @@ -1562,64 +1093,6 @@ animation: heartbeat 1.5s ease-in-out infinite both; } -.emoji-picker-dropdown__menu { - background: $simple-background-color; - position: absolute; - box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4); - border-radius: 4px; - margin-top: 5px; - - .emoji-mart-scroll { - transition: opacity 200ms ease; - } - - &.selecting .emoji-mart-scroll { - opacity: 0.5; - } -} - -.emoji-picker-dropdown__modifiers { - position: absolute; - top: 60px; - right: 11px; - cursor: pointer; -} - -.emoji-picker-dropdown__modifiers__menu { - position: absolute; - z-index: 4; - top: -4px; - left: -8px; - background: $simple-background-color; - border-radius: 4px; - box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); - overflow: hidden; - - button { - display: block; - cursor: pointer; - border: 0; - padding: 4px 8px; - background: transparent; - - &:hover, - &:focus, - &:active { - background: rgba($ui-secondary-color, 0.4); - } - } - - .emoji-mart-emoji { - height: 22px; - } -} - -.emoji-mart-emoji { - span { - background-repeat: no-repeat; - } -} - .upload-area { align-items: center; background: rgba($base-overlay-background, 0.8); @@ -1672,151 +1145,11 @@ border-radius: 4px; } -.emoji-button { - display: block; - font-size: 24px; - line-height: 24px; - margin-left: 2px; - width: 24px; - outline: 0; - cursor: pointer; - - &:active, - &:focus { - outline: 0 !important; - } - - img { - filter: grayscale(100%); - opacity: 0.8; - display: block; - margin: 0; - width: 22px; - height: 22px; - margin-top: 2px; - } - - &:hover, - &:active, - &:focus { - img { - opacity: 1; - filter: none; - } - } -} - .dropdown--active .emoji-button img { opacity: 1; filter: none; } -.search { - position: relative; -} - -.search__input { - outline: 0; - box-sizing: border-box; - display: block; - width: 100%; - border: none; - padding: 10px; - padding-right: 30px; - font-family: inherit; - background: $ui-base-color; - color: $ui-primary-color; - font-size: 14px; - margin: 0; - - &::-moz-focus-inner { - border: 0; - } - - &::-moz-focus-inner, - &:focus, - &:active { - outline: 0 !important; - } - - &:focus { - background: lighten($ui-base-color, 4%); - } - - @media screen and (max-width: 600px) { - font-size: 16px; - } -} - -.search__icon { - .fa { - position: absolute; - top: 10px; - right: 10px; - z-index: 2; - display: inline-block; - opacity: 0; - transition: all 100ms linear; - font-size: 18px; - width: 18px; - height: 18px; - color: $ui-secondary-color; - cursor: default; - pointer-events: none; - - &.active { - pointer-events: auto; - opacity: 0.3; - } - } - - .fa-search { - transform: rotate(90deg); - - &.active { - pointer-events: none; - transform: rotate(0deg); - } - } - - .fa-times-circle { - top: 11px; - transform: rotate(0deg); - cursor: pointer; - - &.active { - transform: rotate(90deg); - } - - &:hover { - color: $primary-text-color; - } - } -} - -.search-results__header { - color: $ui-base-lighter-color; - background: lighten($ui-base-color, 2%); - border-bottom: 1px solid darken($ui-base-color, 4%); - padding: 15px 10px; - font-size: 14px; - font-weight: 500; -} - -.search-results__hashtag { - display: block; - padding: 10px; - color: $ui-secondary-color; - text-decoration: none; - - &:hover, - &:active, - &:focus { - color: lighten($ui-secondary-color, 4%); - text-decoration: underline; - } -} - .loading-bar { background-color: $ui-highlight-color; height: 3px; @@ -1861,58 +1194,6 @@ noscript { 100% { opacity: 1; } } -// more fixes for the navbar-under mode -@mixin fix-margins-for-navbar-under { - .tabs-bar { - margin-top: 0 !important; - margin-bottom: -6px !important; - } -} - -.single-column.navbar-under { - @include fix-margins-for-navbar-under; -} - -.auto-columns.navbar-under { - @media screen and (max-width: 360px) { - @include fix-margins-for-navbar-under; - } -} - -.auto-columns.navbar-under .react-swipeable-view-container .columns-area, -.single-column.navbar-under .react-swipeable-view-container .columns-area { - @media screen and (max-width: 360px) { - height: 100% !important; - } -} - -.column-inline-form { - padding: 7px 15px; - padding-right: 5px; - display: flex; - justify-content: flex-start; - align-items: center; - background: lighten($ui-base-color, 4%); - - label { - flex: 1 1 auto; - - input { - width: 100%; - margin-bottom: 6px; - - &:focus { - outline: 0; - } - } - } - - .icon-button { - flex: 0 0 auto; - margin-left: 5px; - } -} - .drawer__backdrop { cursor: pointer; position: absolute; @@ -1923,15 +1204,19 @@ noscript { background: rgba($base-overlay-background, 0.5); } -@import 'account'; +@import 'boost'; +@import 'accounts'; @import 'status'; @import 'modal'; @import 'metadata'; @import 'composer'; +@import 'columns'; +@import 'search'; +@import 'emoji'; @import 'doodle'; @import 'drawer'; @import 'media'; @import 'sensitive'; -@import 'list'; +@import 'lists'; @import 'emoji_picker'; @import 'local_settings'; diff --git a/app/javascript/flavours/glitch/styles/components/list.scss b/app/javascript/flavours/glitch/styles/components/lists.scss similarity index 100% rename from app/javascript/flavours/glitch/styles/components/list.scss rename to app/javascript/flavours/glitch/styles/components/lists.scss diff --git a/app/javascript/flavours/glitch/styles/components/search.scss b/app/javascript/flavours/glitch/styles/components/search.scss new file mode 100644 index 0000000000..5466971767 --- /dev/null +++ b/app/javascript/flavours/glitch/styles/components/search.scss @@ -0,0 +1,105 @@ +.search { + position: relative; +} + +.search__input { + outline: 0; + box-sizing: border-box; + display: block; + width: 100%; + border: none; + padding: 10px; + padding-right: 30px; + font-family: inherit; + background: $ui-base-color; + color: $ui-primary-color; + font-size: 14px; + margin: 0; + + &::-moz-focus-inner { + border: 0; + } + + &::-moz-focus-inner, + &:focus, + &:active { + outline: 0 !important; + } + + &:focus { + background: lighten($ui-base-color, 4%); + } + + @media screen and (max-width: 600px) { + font-size: 16px; + } +} + +.search__icon { + .fa { + position: absolute; + top: 10px; + right: 10px; + z-index: 2; + display: inline-block; + opacity: 0; + transition: all 100ms linear; + font-size: 18px; + width: 18px; + height: 18px; + color: $ui-secondary-color; + cursor: default; + pointer-events: none; + + &.active { + pointer-events: auto; + opacity: 0.3; + } + } + + .fa-search { + transform: rotate(90deg); + + &.active { + pointer-events: none; + transform: rotate(0deg); + } + } + + .fa-times-circle { + top: 11px; + transform: rotate(0deg); + cursor: pointer; + + &.active { + transform: rotate(90deg); + } + + &:hover { + color: $primary-text-color; + } + } +} + +.search-results__header { + color: $ui-base-lighter-color; + background: lighten($ui-base-color, 2%); + border-bottom: 1px solid darken($ui-base-color, 4%); + padding: 15px 10px; + font-size: 14px; + font-weight: 500; +} + +.search-results__hashtag { + display: block; + padding: 10px; + color: $ui-secondary-color; + text-decoration: none; + + &:hover, + &:active, + &:focus { + color: lighten($ui-secondary-color, 4%); + text-decoration: underline; + } +} From 80c899153fdafaa68a29b50e8bcc78fa4ff7f92d Mon Sep 17 00:00:00 2001 From: ncls7615 Date: Sun, 14 Jan 2018 09:17:38 +0900 Subject: [PATCH 07/12] Improve scss refactor 5 --- .../glitch/styles/components/drawer.scss | 49 +++++++++++++++++++ .../glitch/styles/components/index.scss | 49 ------------------- 2 files changed, 49 insertions(+), 49 deletions(-) diff --git a/app/javascript/flavours/glitch/styles/components/drawer.scss b/app/javascript/flavours/glitch/styles/components/drawer.scss index 865ab4343d..407dae7555 100644 --- a/app/javascript/flavours/glitch/styles/components/drawer.scss +++ b/app/javascript/flavours/glitch/styles/components/drawer.scss @@ -256,3 +256,52 @@ } } } + +.drawer__pager { + box-sizing: border-box; + padding: 0; + flex-grow: 1; + position: relative; + overflow: hidden; + display: flex; +} + +.drawer__inner { + position: absolute; + top: 0; + left: 0; + background: lighten($ui-base-color, 13%) url('~images/wave-drawer.png') no-repeat bottom / 100% auto; + box-sizing: border-box; + padding: 0; + display: flex; + flex-direction: column; + overflow: hidden; + overflow-y: auto; + width: 100%; + height: 100%; + + &.darker { + background: $ui-base-color; + } + + > .mastodon { + background: url('~images/mastodon-ui.png') no-repeat left bottom / contain; + flex: 1; + } +} + +.pseudo-drawer { + background: lighten($ui-base-color, 13%); + font-size: 13px; + text-align: left; +} + +.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/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index 5bc1c98e05..e8cc1f504e 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -528,45 +528,6 @@ } } -.drawer__pager { - box-sizing: border-box; - padding: 0; - flex-grow: 1; - position: relative; - overflow: hidden; - display: flex; -} - -.drawer__inner { - position: absolute; - top: 0; - left: 0; - background: lighten($ui-base-color, 13%) url('~images/wave-drawer.png') no-repeat bottom / 100% auto; - box-sizing: border-box; - padding: 0; - display: flex; - flex-direction: column; - overflow: hidden; - overflow-y: auto; - width: 100%; - height: 100%; - - &.darker { - background: $ui-base-color; - } - - > .mastodon { - background: url('~images/mastodon-ui.png') no-repeat left bottom / contain; - flex: 1; - } -} - -.pseudo-drawer { - background: lighten($ui-base-color, 13%); - font-size: 13px; - text-align: left; -} - .tabs-bar { display: flex; background: lighten($ui-base-color, 8%); @@ -1194,16 +1155,6 @@ noscript { 100% { opacity: 1; } } -.drawer__backdrop { - cursor: pointer; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba($base-overlay-background, 0.5); -} - @import 'boost'; @import 'accounts'; @import 'status'; From 3ccbe066f05bd87623497717d9bf15938be18567 Mon Sep 17 00:00:00 2001 From: ncls7615 Date: Sun, 14 Jan 2018 09:25:35 +0900 Subject: [PATCH 08/12] Fix letterbox bug --- app/javascript/flavours/glitch/styles/components/media.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/app/javascript/flavours/glitch/styles/components/media.scss b/app/javascript/flavours/glitch/styles/components/media.scss index 785edf9ffd..3427fd5194 100644 --- a/app/javascript/flavours/glitch/styles/components/media.scss +++ b/app/javascript/flavours/glitch/styles/components/media.scss @@ -114,6 +114,7 @@ &, img { + height: 100%; width: 100%; object-fit: contain; From 8709608e10e183ddb352dd3cf4147b49e1d7cc71 Mon Sep 17 00:00:00 2001 From: ncls7615 Date: Sun, 14 Jan 2018 09:51:01 +0900 Subject: [PATCH 09/12] Fix confirmation modal bug --- app/javascript/flavours/glitch/styles/components/modal.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss index 764f1ad6b9..c12f568285 100644 --- a/app/javascript/flavours/glitch/styles/components/modal.scss +++ b/app/javascript/flavours/glitch/styles/components/modal.scss @@ -413,7 +413,6 @@ .status__avatar { height: 28px; left: 10px; - position: absolute; top: 10px; width: 48px; } From 75ab24dcea5d6f6c0783698e72b0e178cd3255d8 Mon Sep 17 00:00:00 2001 From: ncls7615 Date: Sun, 14 Jan 2018 10:38:51 +0900 Subject: [PATCH 10/12] Fix media detailed style --- app/javascript/flavours/glitch/styles/components/media.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/app/javascript/flavours/glitch/styles/components/media.scss b/app/javascript/flavours/glitch/styles/components/media.scss index 3427fd5194..75496faa22 100644 --- a/app/javascript/flavours/glitch/styles/components/media.scss +++ b/app/javascript/flavours/glitch/styles/components/media.scss @@ -84,8 +84,9 @@ height: 100%; .detailed-status & { - width: 100%; - height: 100%; + margin-left: -22px; + width: calc(100% + 44px); + height: 250px; } @include fullwidth-gallery; From 3a5ecab1839be93e7d74e3d47e4cc240ab841158 Mon Sep 17 00:00:00 2001 From: ncls7615 Date: Sun, 14 Jan 2018 11:07:32 +0900 Subject: [PATCH 11/12] Fix un-fullwidth media style --- app/javascript/flavours/glitch/styles/components/media.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/javascript/flavours/glitch/styles/components/media.scss b/app/javascript/flavours/glitch/styles/components/media.scss index 75496faa22..81d4692a8c 100644 --- a/app/javascript/flavours/glitch/styles/components/media.scss +++ b/app/javascript/flavours/glitch/styles/components/media.scss @@ -81,7 +81,7 @@ position: relative; background: $base-shadow-color; width: 100%; - height: 100%; + height: 110px; .detailed-status & { margin-left: -22px; From 808ace389f1bd59922ee2d21c696f2c9366d1274 Mon Sep 17 00:00:00 2001 From: ncls7615 Date: Sun, 14 Jan 2018 11:13:55 +0900 Subject: [PATCH 12/12] Fix collapsed toot style --- .../glitch/styles/components/status.scss | 60 +++++++++---------- 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index 22787ea94a..4f19042c85 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -237,41 +237,41 @@ } } } + } - &.collapsed { - background-position: center; - background-size: cover; - user-select: none; - - &.has-background::before { - display: block; - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - background-image: linear-gradient(to bottom, rgba($base-shadow-color, .75), rgba($base-shadow-color, .65) 24px, rgba($base-shadow-color, .8)); - content: ""; - } - - .display-name:hover .display-name__html { + &.collapsed { + background-position: center; + background-size: cover; + user-select: none; + + &.has-background::before { + display: block; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + background-image: linear-gradient(to bottom, rgba($base-shadow-color, .75), rgba($base-shadow-color, .65) 24px, rgba($base-shadow-color, .8)); + content: ""; + } + + .display-name:hover .display-name__html { + text-decoration: none; + } + + .status__content { + height: 20px; + overflow: hidden; + text-overflow: ellipsis; + + a:hover { text-decoration: none; } - - .status__content { - height: 20px; - overflow: hidden; - text-overflow: ellipsis; - - a:hover { - text-decoration: none; - } - } } + } - .notification__message { - margin: -10px -10px 10px; - } + .notification__message { + margin: -10px -10px 10px; } }