diff options
Diffstat (limited to 'app/javascript/styles/components.scss')
-rw-r--r-- | app/javascript/styles/components.scss | 629 |
1 files changed, 379 insertions, 250 deletions
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index af85b6b50..2f02af098 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -222,12 +222,16 @@ } } +.dropdown-menu { + position: absolute; +} + .dropdown--active .icon-button { color: $ui-highlight-color; } .dropdown--active::after { - @media screen and (min-width: 1025px) { + @media screen and (min-width: 631px) { content: ""; display: block; position: absolute; @@ -395,17 +399,11 @@ .compose-form__autosuggest-wrapper { position: relative; - .emoji-picker__dropdown { + .emoji-picker-dropdown { position: absolute; right: 5px; top: 5px; - &.dropdown--active::after { - border-color: transparent transparent $base-border-color; - bottom: -1px; - right: 8px; - } - ::-webkit-scrollbar-track:hover, ::-webkit-scrollbar-track:active { background-color: rgba($base-overlay-background, 0.3); @@ -444,6 +442,7 @@ display: inline-block; font-size: inherit; vertical-align: middle; + object-fit: contain; margin: -.2ex .15em .2ex; width: 16px; height: 16px; @@ -631,6 +630,10 @@ opacity: 1; animation: fade 150ms linear; + .video-player { + margin-top: 8px; + } + &.status-direct { background: lighten($ui-base-color, 8%); @@ -805,8 +808,8 @@ .status__action-bar-dropdown { float: left; - height: 18px; - width: 18px; + height: 23.15px; + width: 23.15px; // Dropdown style override for centering on the icon .dropdown--active { @@ -832,26 +835,6 @@ align-items: center; justify-content: center; position: relative; - - .dropdown { - display: block; - width: 18px; - height: 18px; - } - - .dropdown--active { - .dropdown__content.dropdown__left { - left: 20px; - right: initial; - } - - &::after { - bottom: initial; - margin-left: 7px; - margin-top: -7px; - right: initial; - } - } } .detailed-status { @@ -867,6 +850,10 @@ height: 22px; } } + + .video-player { + margin-top: 8px; + } } .detailed-status__meta { @@ -1123,7 +1110,7 @@ } .account__action-bar-dropdown { - flex: 1 1 auto; + flex: 0 1 calc(50% - 140px); padding: 10px; .dropdown--active { @@ -1150,7 +1137,7 @@ .account__action-bar__tab { text-decoration: none; overflow: hidden; - width: 80px; + flex: 0 1 80px; border-left: 1px solid lighten($ui-base-color, 8%); padding: 10px 5px; @@ -1437,10 +1424,80 @@ position: absolute; } -.dropdown__sep { +.dropdown-menu__separator { border-bottom: 1px solid darken($ui-secondary-color, 8%); margin: 5px 7px 6px; - padding-top: 1px; + height: 0; +} + +.dropdown-menu { + background: $ui-secondary-color; + padding: 4px 0; + border-radius: 4px; + box-shadow: 0 0 15px rgba($base-shadow-color, 0.4); + + ul { + list-style: none; + } +} + +.dropdown-menu__arrow { + position: absolute; + width: 0; + height: 0; + border: 0 solid transparent; + + &.left { + right: -5px; + margin-top: -5px; + border-width: 5px 0 5px 5px; + border-left-color: $ui-secondary-color; + } + + &.top { + bottom: -5px; + margin-left: -13px; + border-width: 5px 7px 0; + border-top-color: $ui-secondary-color; + } + + &.bottom { + top: -5px; + margin-left: -13px; + border-width: 0 7px 5px; + border-bottom-color: $ui-secondary-color; + } + + &.right { + left: -5px; + margin-top: -5px; + border-width: 5px 5px 5px 0; + border-right-color: $ui-secondary-color; + } +} + +.dropdown-menu__item { + a { + font-size: 13px; + line-height: 18px; + display: block; + padding: 4px 14px; + box-sizing: border-box; + text-decoration: none; + background: $ui-secondary-color; + color: $ui-base-color; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + + &:focus, + &:hover, + &:active { + background: $ui-highlight-color; + color: $ui-secondary-color; + outline: 0; + } + } } .dropdown--active .dropdown__content { @@ -1610,9 +1667,8 @@ .column, .drawer { - @supports(display: grid) { // hack to fix Chrome <57 - contain: strict; - } + flex: 1 1 100%; + overflow: hidden; } @include limited-single-column('screen and (max-width: 360px)', $parent: null) { @@ -1626,7 +1682,7 @@ } :root { // Overrides .wide stylings for mobile view - @include single-column('screen and (max-width: 1024px)', $parent: null) { + @include single-column('screen and (max-width: 630px)', $parent: null) { .column, .drawer { flex: auto; @@ -1647,7 +1703,7 @@ } } -@include multi-columns('screen and (min-width: 1025px)', $parent: null) { +@include multi-columns('screen and (min-width: 631px)', $parent: null) { .columns-area { padding: 0; } @@ -1759,7 +1815,7 @@ &:hover, &:focus, &:active { - @include multi-columns('screen and (min-width: 1025px)') { + @include multi-columns('screen and (min-width: 631px)') { background: lighten($ui-base-color, 14%); transition: all 100ms linear; } @@ -1779,7 +1835,7 @@ } } -@include multi-columns('screen and (min-width: 1025px)', $parent: null) { +@include multi-columns('screen and (min-width: 631px)', $parent: null) { .tabs-bar { display: none; } @@ -1790,9 +1846,7 @@ overflow-x: hidden; flex: 1 1 auto; -webkit-overflow-scrolling: touch; - @supports(display: grid) { // hack to fix Chrome <57 - contain: strict; - } + will-change: transform; // improves perf in mobile Chrome &.optionally-scrollable { overflow-y: auto; @@ -2038,17 +2092,18 @@ } .autosuggest-textarea__suggestions { + box-sizing: border-box; display: none; position: absolute; - max-height: 300px; - overflow-y: auto; top: 100%; width: 100%; z-index: 99; - box-shadow: 0 0 15px rgba($base-shadow-color, 0.4); + 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; @@ -2058,34 +2113,36 @@ .autosuggest-textarea__suggestions__item { padding: 10px; cursor: pointer; + border-radius: 4px; - &:hover { - background: darken($ui-secondary-color, 10%); - } - + &:hover, + &:focus, + &:active, &.selected { - background: $ui-highlight-color; - color: $base-border-color; + background: darken($ui-secondary-color, 10%); } } -.autosuggest-account { - overflow: hidden; +.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 { - float: left; - margin-right: 5px; +.autosuggest-account-icon, +.autosuggest-emoji img { + display: block; + margin-right: 8px; + width: 16px; + height: 16px; } -.autosuggest-status { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - - strong { - font-weight: 500; - } +.autosuggest-account .display-name__account { + color: lighten($ui-base-color, 36%); } .character-counter__wrapper { @@ -2644,7 +2701,7 @@ button.icon-button.active i.fa-retweet { .media-spoiler { background: $base-overlay-background; - color: $primary-text-color; + color: $ui-primary-color; border: 0; width: 100%; height: 100%; @@ -2834,197 +2891,61 @@ button.icon-button.active i.fa-retweet { animation-direction: alternate; } -.emoji-dialog { - width: 245px; - height: 270px; +.emoji-picker-dropdown__menu { background: $simple-background-color; - box-sizing: border-box; + position: absolute; + box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4); border-radius: 4px; - overflow: hidden; - position: relative; - box-shadow: 0 0 8px rgba($base-shadow-color, 0.2); - - .emojione { - margin: 0; - width: 100%; - height: auto; - } - - .emoji-dialog-header { - padding: 0 10px; - - ul { - padding: 0; - margin: 0; - list-style: none; - } - - li { - display: inline-block; - box-sizing: border-box; - padding: 10px 5px; - cursor: pointer; - border-bottom: 2px solid transparent; - - .emoji { - width: 18px; - height: 18px; - } - - img, - svg { - width: 18px; - height: 18px; - filter: grayscale(100%); - } - - &:hover { - img, - svg { - filter: grayscale(0); - } - } - - &.active { - border-bottom-color: $ui-highlight-color; - - img, - svg { - filter: grayscale(0); - } - } - } - } - - .emoji-row { - box-sizing: border-box; - overflow-y: hidden; - padding-left: 10px; - - .emoji { - display: inline-block; - padding: 2.5px; - border-radius: 4px; - } - } - - .emoji-category-header { - box-sizing: border-box; - overflow-y: hidden; - padding: 10px 8px 10px 16px; - display: table; - - > * { - display: table-cell; - vertical-align: middle; - } - } + margin-top: 5px; - .emoji-category-title { - font-size: 12px; - text-transform: uppercase; - font-weight: 500; - color: darken($ui-secondary-color, 18%); - cursor: default; + .emoji-mart-scroll { + transition: opacity 200ms ease; } - .emoji-category-heading-decoration { - text-align: right; + &.selecting .emoji-mart-scroll { + opacity: 0.5; } +} - .modifiers { - list-style: none; - padding: 0; - margin: 0; - vertical-align: middle; - white-space: nowrap; - margin-top: 4px; - - li { - display: inline-block; - padding: 0 2px; - - &:last-of-type { - padding-right: 0; - } - } - - .modifier { - display: inline-block; - border-radius: 10px; - width: 15px; - height: 15px; - position: relative; - cursor: pointer; - - &.active::after { - content: ""; - display: block; - position: absolute; - width: 7px; - height: 7px; - border-radius: 10px; - border: 2px solid $base-border-color; - top: 2px; - left: 2px; - } - } - } +.emoji-picker-dropdown__modifiers { + position: absolute; + top: 60px; + right: 11px; + cursor: pointer; +} - .emoji-search-wrapper { - padding: 10px; - border-bottom: 1px solid lighten($ui-secondary-color, 4%); - } +.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; - .emoji-search { - font-size: 14px; - font-weight: 400; - padding: 7px 9px; - font-family: inherit; + button { display: block; - width: 100%; - background: rgba($ui-secondary-color, 0.3); - color: darken($ui-secondary-color, 18%); - border: 1px solid $ui-secondary-color; - border-radius: 4px; - } - - .emoji-categories-wrapper { - position: absolute; - top: 42px; - bottom: 0; - left: 0; - right: 0; - } - - .emoji-search-wrapper + .emoji-categories-wrapper { - top: 93px; - } - - .emoji-row .emoji { - img, - svg { - transition: transform 60ms ease-in-out; - } - - &:hover { - background: lighten($ui-secondary-color, 3%); + cursor: pointer; + border: 0; + padding: 4px 8px; + background: transparent; - img, - svg { - transform: translateZ(0) scale(1.2); - } + &:hover, + &:focus, + &:active { + background: rgba($ui-secondary-color, 0.4); } } - .emoji { - width: 22px; + .emoji-mart-emoji { height: 22px; - cursor: pointer; + } +} - &:focus { - outline: 0; - } +.emoji-mart-emoji { + span { + background-repeat: no-repeat; } } @@ -3311,8 +3232,6 @@ button.icon-button.active i.fa-retweet { } .search__input { - padding-right: 30px; - color: $ui-secondary-color; outline: 0; box-sizing: border-box; display: block; @@ -3848,6 +3767,10 @@ button.icon-button.active i.fa-retweet { padding-top: 10px; padding-bottom: 10px; } + + .dropdown-menu__separator { + border-bottom-color: $ui-secondary-color; + } } .boost-modal__container { @@ -3926,6 +3849,10 @@ button.icon-button.active i.fa-retweet { max-height: 80vh; max-width: 80vw; + .actions-modal__item-label { + font-weight: 500; + } + ul { overflow-y: auto; flex-shrink: 0; @@ -3938,11 +3865,20 @@ button.icon-button.active i.fa-retweet { a { color: $ui-base-color; display: flex; - padding: 10px; + padding: 12px 16px; + font-size: 15px; align-items: center; text-decoration: none; - &.active { + &, + button { + transition: none; + } + + &.active, + &:hover, + &:active, + &:focus { &, button { background: $ui-highlight-color; @@ -4099,6 +4035,12 @@ button.icon-button.active i.fa-retweet { display: block; float: left; position: relative; + + &.standalone { + .media-gallery__item-gifv-thumbnail { + transform: none; + } + } } .media-gallery__item-thumbnail { @@ -4106,6 +4048,7 @@ button.icon-button.active i.fa-retweet { text-decoration: none; width: 100%; height: 100%; + line-height: 0; display: flex; img { @@ -4208,6 +4151,182 @@ button.icon-button.active i.fa-retweet { z-index: 5; } +.video-player { + overflow: hidden; + position: relative; + background: $base-shadow-color; + max-width: 100%; + + video { + height: 100%; + width: 100%; + z-index: 1; + } + + &.fullscreen { + width: 100% !important; + height: 100% !important; + margin: 0; + + video { + max-width: 100% !important; + max-height: 100% !important; + } + } + + &.inline { + video { + object-fit: cover; + position: relative; + top: 50%; + transform: translateY(-50%); + } + } + + &__controls { + position: absolute; + z-index: 2; + bottom: 0; + left: 0; + right: 0; + box-sizing: border-box; + background: linear-gradient(0deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 60%, transparent); + padding: 0 10px; + opacity: 0; + transition: opacity .1s ease; + + &.active { + opacity: 1; + } + } + + &.inactive { + video, + .video-player__controls { + visibility: hidden; + } + } + + &__spoiler { + display: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 4; + border: 0; + background: $base-shadow-color; + color: $ui-primary-color; + transition: none; + pointer-events: none; + + &.active { + display: block; + pointer-events: auto; + + &:hover, + &:active, + &:focus { + color: lighten($ui-primary-color, 8%); + } + } + + &__title { + display: block; + font-size: 14px; + } + + &__subtitle { + display: block; + font-size: 11px; + font-weight: 500; + } + } + + &__buttons { + padding-bottom: 10px; + font-size: 16px; + + &.left { + float: left; + + button { + padding-right: 10px; + } + } + + &.right { + float: right; + + button { + padding-left: 10px; + } + } + + button { + background: transparent; + padding: 0; + border: 0; + color: $white; + + &:active, + &:hover, + &:focus { + color: $ui-highlight-color; + } + } + } + + &__seek { + cursor: pointer; + height: 24px; + position: relative; + + &::before { + content: ""; + width: 100%; + background: rgba($white, 0.35); + display: block; + position: absolute; + height: 4px; + top: 10px; + } + + &__progress { + display: block; + position: absolute; + height: 4px; + top: 10px; + background: $ui-highlight-color; + } + + &__handle { + position: absolute; + z-index: 3; + opacity: 0; + border-radius: 50%; + width: 12px; + height: 12px; + top: 6px; + margin-left: -6px; + transition: opacity .1s ease; + background: $ui-highlight-color; + pointer-events: none; + + &.active { + opacity: 1; + } + } + + &:hover { + .video-player__seek__handle { + opacity: 1; + } + } + } +} + .media-spoiler-video { background-size: cover; background-repeat: no-repeat; @@ -4238,12 +4357,14 @@ button.icon-button.active i.fa-retweet { .account-gallery__container { margin: -2px; padding: 4px; + display: flex; + flex-wrap: wrap; } .account-gallery__item { - float: left; - width: 96px; - height: 96px; + flex: 1 1 auto; + width: calc(100% / 3 - 4px); + height: 95px; margin: 2px; a { @@ -4254,6 +4375,14 @@ button.icon-button.active i.fa-retweet { background-size: cover; background-position: center; position: relative; + color: inherit; + text-decoration: none; + + &:hover, + &:active, + &:focus { + outline: 0; + } } } @@ -4323,7 +4452,7 @@ noscript { 100% { opacity: 1; } } -@media screen and (max-width: 1024px) and (max-height: 400px) { +@media screen and (max-width: 630px) and (max-height: 400px) { $duration: 400ms; $delay: 100ms; |