diff options
Diffstat (limited to 'app/javascript/styles/components.scss')
-rw-r--r-- | app/javascript/styles/components.scss | 705 |
1 files changed, 611 insertions, 94 deletions
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index 7fd16f6b3..557355260 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -1,4 +1,5 @@ @import 'variables'; +@import 'variables-glitch'; .app-body { -webkit-overflow-scrolling: touch; @@ -464,13 +465,97 @@ cursor: pointer; } +// --- Extra clickable area in the status gutter --- +.ui.wide { + @mixin xtraspaces-full { + height: calc(100% + 10px); + bottom: -40px; + } + @mixin xtraspaces-short { + height: calc(100% - 35px); + bottom: 0; + } + + // Avi must go on top if the toot is too short + .status__avatar { + z-index: 10; + } + + // Base styles + .status__content--with-action > div::after { + content: ''; + display: block; + width: 64px; + position: absolute; + left: -68px; + + // more than 4 never fit on FullHD, short + @include xtraspaces-short; + } + + @media screen and (min-width: 1800px) { + // 4, very wide screen + .column:nth-child(2):nth-last-child(4) { + &, & ~ .column { + .status__content--with-action > div::after { + @include xtraspaces-full; + } + } + } + } + + // 1 or 2, always fit + .column:nth-child(2):nth-last-child(1), + .column:nth-child(2):nth-last-child(2), + .column:nth-child(2):nth-last-child(3) { + &, & ~ .column { + .status__content--with-action > div::after { + @include xtraspaces-full; + } + } + } + + @media screen and (max-width: 1440px) { + // 3, small screen + .column:nth-child(2):nth-last-child(3) { + &, & ~ .column { + .status__content--with-action > div::after { + @include xtraspaces-short; + } + } + } + } + + // Phone or iPad + @media screen and (max-width: 1060px) { + .status__content--with-action > div::after { + display: none; + } + } + + // I am very sorry +} +// --- end extra clickable spaces --- + +.status-check-box { + .status__content, + .reply-indicator__content { + color: #3a3a3a; + a { + color: #005aa9; + } + } +} + .status__content, .reply-indicator__content { + position: relative; 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; .emojione { @@ -513,19 +598,10 @@ } } - .status__content__spoiler-link { - background: lighten($ui-base-color, 30%); - - &:hover { - background: lighten($ui-base-color, 33%); - text-decoration: none; - } - } - - .status__content__text { + .status__content__spoiler { display: none; - &.status__content__text--visible { + &.status__content__spoiler--visible { display: block; } } @@ -534,15 +610,30 @@ .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; + } } .status__prepend-icon-wrapper { @@ -550,10 +641,28 @@ position: absolute; } +.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 { padding: 8px 10px; padding-left: 68px; position: relative; + height: auto; min-height: 48px; border-bottom: 1px solid lighten($ui-base-color, 8%); cursor: default; @@ -610,6 +719,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: ""; + } + + .status__display-name:hover strong { + text-decoration: none; + } + + .status__content { + height: 20px; + overflow: hidden; + text-overflow: ellipsis; + + a:hover { + text-decoration: none; + } + } + } + + .notification__message { + margin: -10px 0 10px; + } } .notification-favourite { @@ -623,9 +767,16 @@ } .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 { @@ -635,11 +786,24 @@ .status__info .status__display-name { display: block; max-width: 100%; - padding-right: 25px; } .status__info { + margin: 2px 0 0; font-size: 15px; + line-height: 24px; +} + +.status__info__icons { + display: inline-block; + position: relative; + float: right; + color: lighten($ui-base-color, 26%); + z-index: 5; // to make it clickable + + .status__visibility-icon { + padding-left: 6px; + } } .status-check-box { @@ -664,10 +828,9 @@ } .status__prepend { - margin-left: 68px; + margin: -10px 0 10px; color: $ui-base-lighter-color; - padding: 8px 0; - padding-bottom: 2px; + padding: 8px 0 2px; font-size: 14px; position: relative; @@ -680,17 +843,43 @@ align-items: center; display: flex; margin-top: 10px; + margin-left: -58px; + + &::before { + display: block; + flex: 1 1 0; + max-width: 58px; + content: ""; + } } .status__action-bar-button { float: left; margin-right: 18px; + flex: 0 0 auto; } .status__action-bar-dropdown { float: left; height: 18px; width: 18px; + + // 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 { @@ -834,9 +1023,12 @@ padding: 10px; } -.account__header { +.account__header__wrapper { flex: 0 0 auto; background: lighten($ui-base-color, 4%); +} + +.account__header { text-align: center; background-size: cover; background-position: center; @@ -923,6 +1115,59 @@ } } +.account__metadata { + width: 100%; + font-size: 15px; + line-height: 20px; + overflow: hidden; + border-collapse: collapse; + + a { + text-decoration: none; + + &:hover{ + text-decoration: underline; + } + } + + tr { + border-top: 1px solid lighten($ui-base-color, 8%); + } + + th, td { + padding: 14px 20px; + vertical-align: middle; + + & > div { + max-height: 40px; + overflow-y: auto; + white-space: pre-wrap; + text-overflow: ellipsis; + } + } + + th { + color: $ui-primary-color; + background: lighten($ui-base-color, 13%); + font-variant: small-caps; + max-width: 120px; + + a { + color: $primary-text-color; + } + } + + td { + flex: auto; + color: $primary-text-color; + background: $ui-base-color; + + a { + color: $ui-highlight-color; + } + } +} + .account__action-bar { border-top: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid lighten($ui-base-color, 8%); @@ -984,12 +1229,11 @@ } .account__header__avatar { - background-size: 90px 90px; + @include avatar-radius(); + @include avatar-size(90px); display: block; - height: 90px; margin: 0 auto 10px; overflow: hidden; - width: 90px; } .account-authorize { @@ -1021,12 +1265,6 @@ strong { color: $primary-text-color; } - - &.muted { - .emojione { - opacity: 0.5; - } - } } .status__display-name, @@ -1073,10 +1311,9 @@ } .status__avatar { - height: 48px; - left: 10px; position: absolute; - top: 10px; + margin-left: -58px; + height: 48px; width: 48px; } @@ -1090,7 +1327,7 @@ color: $ui-base-lighter-color; } - .status__avatar { + .status__avatar, .emojione { opacity: 0.5; } @@ -1145,10 +1382,11 @@ .display-name { display: block; + position: relative; max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + //overflow: hidden; + //text-overflow: ellipsis; + //white-space: nowrap; } .display-name__html { @@ -1157,6 +1395,15 @@ .display-name__account { font-size: 14px; + display: block; + line-height: 1.1; // reduce the distance from the display name + padding-bottom: 3px; + + // block ellipsis + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } .status__relative-time, @@ -1332,11 +1579,12 @@ justify-content: flex-start; overflow-x: auto; position: relative; + padding: 10px; } -@media screen and (min-width: 360px) { +@include limited-single-column('screen and (max-width: 360px)', $parent: null) { .columns-area { - padding: 10px; + padding: 0; } .react-swipeable-view-container .columns-area { @@ -1366,6 +1614,13 @@ 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; @@ -1386,7 +1641,13 @@ box-sizing: border-box; display: flex; flex-direction: column; - overflow-y: hidden; + overflow-y: auto; + + .wide & { + flex: 1 1 200px; + min-width: 300px; + max-width: 400px; + } } .drawer__tab { @@ -1398,53 +1659,56 @@ text-align: center; font-size: 16px; border-bottom: 2px solid transparent; + outline: none; + cursor: pointer; } .column, .drawer { - flex: 1 1 100%; - overflow: hidden; @supports(display: grid) { // hack to fix Chrome <57 contain: strict; } } -@media screen and (min-width: 360px) { +@include limited-single-column('screen and (max-width: 360px)', $parent: null) { .tabs-bar { - margin: 10px; - margin-bottom: 0; + margin: 0; } .search { - margin-bottom: 10px; + margin-bottom: 0; } } -@media screen and (max-width: 1024px) { - .column, - .drawer { - width: 100%; - padding: 0; - } +:root { // Overrides .wide stylings for mobile view + @include single-column('screen and (max-width: 1024px)', $parent: null) { + .column, + .drawer { + flex: auto; + width: 100%; + min-width: 0; + max-width: none; + padding: 0; + } - .columns-area { - flex-direction: column; - } + .columns-area { + flex-direction: column; + } - .search__input, - .autosuggest-textarea__textarea { - font-size: 16px; + .search__input, + .autosuggest-textarea__textarea { + font-size: 16px; + } } } -@media screen and (min-width: 1025px) { +@include multi-columns('screen and (min-width: 1025px)', $parent: null) { .columns-area { padding: 0; } .column, .drawer { - flex: 0 0 auto; padding: 10px; padding-left: 5px; padding-right: 5px; @@ -1470,28 +1734,25 @@ .drawer__pager { box-sizing: border-box; padding: 0; - flex-grow: 1; + flex: 1 1 auto; position: relative; - overflow: hidden; - display: flex; } .drawer__inner { - position: absolute; - top: 0; - left: 0; background: lighten($ui-base-color, 13%); box-sizing: border-box; padding: 0; - display: flex; - flex-direction: column; - overflow: hidden; - overflow-y: auto; - width: 100%; + position: absolute; height: 100%; + width: 100%; &.darker { + position: absolute; + top: 0; + left: 0; background: $ui-base-color; + width: 100%; + height: 100%; } } @@ -1524,6 +1785,8 @@ background: lighten($ui-base-color, 8%); flex: 0 0 auto; overflow-y: auto; + margin: 10px; + margin-bottom: 0; } .tabs-bar__link { @@ -1551,7 +1814,7 @@ &:hover, &:focus, &:active { - @media screen and (min-width: 1025px) { + @include multi-columns('screen and (min-width: 1025px)') { background: lighten($ui-base-color, 14%); transition: all 100ms linear; } @@ -1563,7 +1826,7 @@ } } -@media screen and (min-width: 600px) { +@include limited-single-column('screen and (max-width: 600px)', $parent: null) { .tabs-bar__link { span { display: inline; @@ -1571,7 +1834,7 @@ } } -@media screen and (min-width: 1025px) { +@include multi-columns('screen and (min-width: 1025px)', $parent: null) { .tabs-bar { display: none; } @@ -1760,6 +2023,8 @@ font-size: 16px; padding: 15px; text-decoration: none; + cursor: pointer; + outline: none; &:hover { background: lighten($ui-base-color, 11%); @@ -1805,7 +2070,7 @@ outline: 0; } - @media screen and (max-width: 600px) { + @include limited-single-column('screen and (max-width: 600px)') { font-size: 16px; } } @@ -1821,7 +2086,7 @@ padding-right: 10px + 22px; resize: none; - @media screen and (max-width: 600px) { + @include limited-single-column('screen and (max-width: 600px)') { height: 100px !important; // prevent auto-resize textarea resize: vertical; } @@ -1934,7 +2199,7 @@ border-bottom-color: $ui-highlight-color; } - @media screen and (max-width: 600px) { + @include limited-single-column('screen and (max-width: 600px)') { font-size: 16px; } @@ -2195,6 +2460,88 @@ button.icon-button.active i.fa-retweet { 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 { @@ -2213,6 +2560,15 @@ button.icon-button.active i.fa-retweet { &.animating { overflow-y: hidden; } + + // notif cleaning drawer + &.ncd { + transition: none; + &.collapsed { + max-height: 0; + opacity: 0.7; + } + } } .column-header__collapsible-inner { @@ -2345,6 +2701,19 @@ button.icon-button.active i.fa-retweet { border: 0; width: 100%; height: 100%; + justify-content: center; + position: relative; + text-align: center; + z-index: 100; + + .status__content > & { + margin-top: 15px; // Add margin when used bare for NSFW video player + } + + &.full-width { + margin-left: -68px; + width: calc(100% + 80px); + } } .media-spoiler__video { @@ -2933,8 +3302,82 @@ button.icon-button.active i.fa-retweet { } } +.advanced-options-dropdown { + position: relative; +} + +.advanced-options-dropdown__dropdown { + display: none; + position: absolute; + left: 0; + top: 27px; + width: 210px; + background: $simple-background-color; + border-radius: 0 4px 4px; + z-index: 2; + overflow: hidden; +} + +.advanced-options-dropdown__option { + color: $ui-base-color; + padding: 10px; + cursor: pointer; + display: flex; + + &:hover, + &.active { + background: $ui-highlight-color; + color: $primary-text-color; + + .advanced-options-dropdown__option__content { + color: $primary-text-color; + + strong { + color: $primary-text-color; + } + } + } + + &.active:hover { + background: lighten($ui-highlight-color, 4%); + } +} + +.advanced-options-dropdown__option__toggle { + display: flex; + align-items: center; + justify-content: center; + margin-right: 10px; +} + +.advanced-options-dropdown__option__content { + flex: 1 1 auto; + color: darken($ui-primary-color, 24%); + + strong { + font-weight: 500; + display: block; + color: $ui-base-color; + } +} + +.advanced-options-dropdown.open { + .advanced-options-dropdown__value { + background: $simple-background-color; + border-radius: 4px 4px 0 0; + box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1); + } + + .advanced-options-dropdown__dropdown { + display: block; + box-shadow: 2px 4px 6px rgba($base-shadow-color, 0.1); + } +} + + .search { position: relative; + margin-bottom: 10px; } .search__input { @@ -2967,7 +3410,7 @@ button.icon-button.active i.fa-retweet { background: lighten($ui-base-color, 4%); } - @media screen and (max-width: 600px) { + @include limited-single-column('screen and (max-width: 600px)') { font-size: 16px; } } @@ -3027,6 +3470,10 @@ button.icon-button.active i.fa-retweet { font-weight: 500; } +.search-results__section { + background: $ui-base-color; +} + .search-results__hashtag { display: block; padding: 10px; @@ -3707,10 +4154,21 @@ button.icon-button.active i.fa-retweet { /* Media Gallery */ .media-gallery { box-sizing: border-box; - margin-top: 8px; + margin-top: 15px; overflow: hidden; position: relative; + background: $base-shadow-color; width: 100%; + + &.full-width { + margin-left: -68px; + width: calc(100% + 80px); + } + + .detailed-status & { + margin-left:-10px; + width: calc(100% + 22px); + } } .media-gallery__item { @@ -3723,15 +4181,19 @@ button.icon-button.active i.fa-retweet { .media-gallery__item-thumbnail { cursor: zoom-in; - display: block; text-decoration: none; + width: 100%; height: 100%; + display: flex; - &, img { width: 100%; - height: 100%; - object-fit: cover; + object-fit: contain; + + &:not(.letterbox) { + height: 100%; + object-fit: cover; + } } } @@ -3740,17 +4202,21 @@ button.icon-button.active i.fa-retweet { 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 { @@ -3763,22 +4229,31 @@ button.icon-button.active i.fa-retweet { /* Status Video Player */ .status__video-player { - background: $base-overlay-background; + display: flex; + align-items: center; + background: $base-shadow-color; box-sizing: border-box; cursor: default; /* May not be needed */ - margin-top: 8px; + margin-top: 15px; overflow: hidden; position: relative; + width: 100%; + + &.full-width { + margin-left: -68px; + width: calc(100% + 80px); + } } .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, @@ -3819,8 +4294,14 @@ button.icon-button.active i.fa-retweet { background-repeat: no-repeat; background-position: center; cursor: pointer; - margin-top: 8px; + margin-top: 15px; position: relative; + width: 100%; + + &.full-width { + margin-left: -68px; + width: calc(100% + 80px); + } } .media-spoiler-video-play-icon { @@ -3984,6 +4465,42 @@ noscript { } } } + + // fixes for the navbar-under mode + .is-composing.navbar-under { + .search { + margin-top: -20px; + margin-bottom: -20px; + .search__icon { + display: none; + } + } + } +} + +// more fixes for the navbar-under mode +@mixin fix-margins-for-navbar-under { + .tabs-bar { + margin-top: 0 !important; + margin-bottom: -6px !important; + } +} + +.single-column.navbar-under { + @include fix-margins-for-navbar-under; +} + +.auto-columns.navbar-under { + @media screen and (max-width: 360px) { + @include fix-margins-for-navbar-under; + } +} + +.auto-columns.navbar-under .react-swipeable-view-container .columns-area, +.single-column.navbar-under .react-swipeable-view-container .columns-area { + @media screen and (max-width: 360px) { + height: 100% !important; + } } .embed-modal { |