-ms-overflow-style: -ms-autohiding-scrollbar;
}
+.animated-number {
+ display: inline-flex;
+ flex-direction: column;
+ align-items: stretch;
+ overflow: hidden;
+ position: relative;
+}
+
+.inline-alert {
+ color: $valid-value-color;
+ font-weight: 400;
+
+ .no-reduce-motion & {
+ transition: opacity 200ms ease;
+ }
+}
+
.link-button {
display: block;
font-size: 15px;
display: block;
width: 100%;
}
+
+ .layout-multiple-columns &.button--with-bell {
+ font-size: 12px;
+ padding: 0 8px;
+ }
}
.column__wrapper {
cursor: pointer;
transition: all 100ms ease-in;
transition-property: background-color, color;
+ text-decoration: none;
&:hover,
&:active,
background: rgba($base-overlay-background, 0.9);
}
}
+
+ &--with-counter {
+ display: inline-flex;
+ align-items: center;
+ width: auto !important;
+ }
+
+ &__counter {
+ display: inline-block;
+ width: 14px;
+ margin-left: 4px;
+ font-size: 12px;
+ font-weight: 500;
+ }
}
.text-icon-button {
.emoji-picker-dropdown {
position: absolute;
- top: 5px;
- right: 5px;
+ top: 0;
+ right: 0;
}
.compose-form__autosuggest-wrapper {
.autosuggest-input,
.spoiler-input {
position: relative;
+ width: 100%;
}
.spoiler-input {
cursor: pointer;
}
+.status__content {
+ clear: both;
+}
+
.status__content,
.reply-indicator__content {
position: relative;
p {
margin-bottom: 20px;
white-space: pre-wrap;
+ unicode-bidi: plaintext;
&:last-child {
margin-bottom: 0;
a {
color: $secondary-text-color;
text-decoration: none;
+ unicode-bidi: isolate;
&:hover {
text-decoration: underline;
}
}
+.announcements__item__content {
+ word-wrap: break-word;
+ overflow-y: auto;
+
+ .emojione {
+ width: 20px;
+ height: 20px;
+ margin: -3px 0 0;
+ }
+
+ p {
+ margin-bottom: 10px;
+ white-space: pre-wrap;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ a {
+ color: $secondary-text-color;
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: underline;
+ }
+
+ &.mention {
+ &:hover {
+ text-decoration: none;
+
+ span {
+ text-decoration: underline;
+ }
+ }
+ }
+
+ &.unhandled-link {
+ color: lighten($ui-highlight-color, 8%);
+ }
+ }
+}
+
.status__content.status__content--collapsed {
max-height: 20px * 15; // 15 lines is roughly above 500 characters
}
background: transparent;
padding: 0;
padding-top: 8px;
+ text-decoration: none;
&:hover,
&:active {
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%);
position: relative;
min-height: 54px;
border-bottom: 1px solid lighten($ui-base-color, 8%);
- cursor: default;
+ cursor: auto;
@supports (-ms-overflow-style: -ms-autohiding-scrollbar) {
// Add margin to avoid Edge auto-hiding scrollbar appearing over content.
margin-top: 8px;
}
- &.status-direct:not(.read) {
- background: lighten($ui-base-color, 8%);
- border-bottom-color: lighten($ui-base-color, 12%);
- }
-
&.light {
- .status__relative-time {
+ .status__relative-time,
+ .status__visibility-icon {
color: $light-text-color;
}
}
.display-name {
+ color: $light-text-color;
+
strong {
color: $inverted-text-color;
}
-
- span {
- color: $light-text-color;
- }
}
.status__content {
}
}
-.notification-favourite {
- .status.status-direct {
- background: transparent;
-
- .icon-button.disabled {
- color: lighten($action-button-color, 13%);
- }
- }
-}
-
.status__relative-time,
.notification__relative_time {
color: $dark-text-color;
float: right;
font-size: 14px;
+ padding-bottom: 1px;
+}
+
+.status__visibility-icon {
+ padding: 0 4px;
}
.status__display-name {
.status-check-box__status {
margin: 10px 0 10px 10px;
flex: 1;
+ overflow: hidden;
.media-gallery {
max-width: 250px;
align-items: center;
display: flex;
margin-top: 8px;
-
- &__counter {
- display: inline-flex;
- margin-right: 11px;
- align-items: center;
-
- .status__action-bar-button {
- margin-right: 4px;
- }
-
- &__label {
- display: inline-block;
- width: 14px;
- font-size: 12px;
- font-weight: 500;
- color: $action-button-color;
- }
- }
}
.status__action-bar-button {
margin-right: 18px;
+
+ &.icon-button--with-counter {
+ margin-right: 14px;
+ }
}
.status__action-bar-dropdown {
.account__avatar {
@include avatar-radius;
+ display: block;
position: relative;
+ width: 36px;
+ height: 36px;
+ background-size: 36px 36px;
+
&-inline {
display: inline-block;
vertical-align: middle;
&-composite {
@include avatar-radius;
+ border-radius: 50%;
overflow: hidden;
+ position: relative;
& > div {
- @include avatar-radius;
float: left;
position: relative;
box-sizing: border-box;
}
+
+ &__label {
+ display: block;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ color: $primary-text-color;
+ text-shadow: 1px 1px 2px $base-shadow-color;
+ font-weight: 700;
+ font-size: 15px;
+ }
}
}
&-base {
@include avatar-radius;
@include avatar-size(36px);
+
+ img {
+ @include avatar-radius;
+ width: 100%;
+ height: 100%;
+ }
}
&-overlay {
bottom: 0;
right: 0;
z-index: 1;
+
+ img {
+ @include avatar-radius;
+ width: 100%;
+ height: 100%;
+ }
}
}
color: inherit;
}
+.detailed-status .button.logo-button {
+ margin-bottom: 15px;
+}
+
.detailed-status__display-name {
color: $secondary-text-color;
display: block;
}
.muted {
+ .status__content,
.status__content p,
.status__content a {
color: $dark-text-color;
}
}
-.star-icon.active {
+.icon-button.star-icon.active {
color: $gold-star;
}
+.icon-button.bookmark-icon.active {
+ color: $red-bookmark;
+}
+
+.no-reduce-motion .icon-button.star-icon {
+ &.activate {
+ & > .fa-star {
+ animation: spring-rotate-in 1s linear;
+ }
+ }
+
+ &.deactivate {
+ & > .fa-star {
+ animation: spring-rotate-out 1s linear;
+ }
+ }
+}
+
.notification__display-name {
color: inherit;
font-weight: 500;
align-items: center;
justify-content: center;
flex-direction: column;
+ scrollbar-width: none; /* Firefox */
+ -ms-overflow-style: none; /* IE 10+ */
+
+ * {
+ scrollbar-width: none; /* Firefox */
+ -ms-overflow-style: none; /* IE 10+ */
+ }
+
+ &::-webkit-scrollbar,
+ *::-webkit-scrollbar {
+ width: 0;
+ height: 0;
+ background: transparent; /* Chrome/Safari/Webkit */
+ }
.image-loader__preview-canvas {
max-width: $media-modal-media-max-width;
pointer-events: none;
display: flex;
justify-content: flex-end;
+ min-width: 285px;
&--start {
justify-content: flex-start;
box-sizing: border-box;
width: 100%;
max-width: 600px;
+ flex: 0 0 auto;
display: flex;
flex-direction: column;
line-height: 14px;
color: $primary-text-color;
}
+
+ &__issue-badge {
+ position: absolute;
+ left: 11px;
+ bottom: 1px;
+ display: block;
+ background: $error-red;
+ border-radius: 50%;
+ width: 0.625rem;
+ height: 0.625rem;
+ }
}
.column-link--transparent .icon-with-badge__badge {
display: block;
object-fit: contain;
object-position: bottom left;
- width: 100%;
+ width: 85%;
height: 100%;
pointer-events: none;
user-drag: none;
overflow-x: hidden;
flex: 1 1 auto;
-webkit-overflow-scrolling: touch;
- will-change: transform; // improves perf in mobile Chrome
&.optionally-scrollable {
overflow-y: auto;
flex: 0 0 auto;
padding: 10px;
padding-top: 20px;
+ z-index: 1;
ul {
margin-bottom: 10px;
}
}
-.no-reduce-motion button.icon-button i.fa-retweet {
+button.icon-button i.fa-retweet {
background-position: 0 0;
height: 19px;
transition: background-position 0.9s steps(10);
&::before {
display: none !important;
}
-
}
-.no-reduce-motion button.icon-button.active i.fa-retweet {
+button.icon-button.active i.fa-retweet {
transition-duration: 0.9s;
background-position: 0 100%;
}
-.reduce-motion button.icon-button i.fa-retweet {
- color: $action-button-color;
- transition: color 100ms ease-in;
-}
-
+.reduce-motion button.icon-button i.fa-retweet,
.reduce-motion button.icon-button.active i.fa-retweet {
- color: $highlight-text-color;
+ transition: none;
}
.status-card {
+ position: relative;
display: flex;
font-size: 14px;
border: 1px solid lighten($ui-base-color, 8%);
width: 100%;
}
- .status-card__image-image {
+ .status-card__image-image,
+ .status-card__image-preview {
border-radius: 4px 4px 0 0;
}
background-position: center center;
}
+.status-card__image-preview {
+ border-radius: 4px 0 0 4px;
+ display: block;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: fill;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 0;
+ background: $base-overlay-background;
+
+ &--hidden {
+ display: none;
+ }
+}
+
.load-more {
display: block;
color: $dark-text-color;
border-bottom: 1px solid lighten($ui-base-color, 8%);
}
+.timeline-hint {
+ text-align: center;
+ color: $darker-text-color;
+ padding: 15px;
+ box-sizing: border-box;
+ width: 100%;
+ cursor: default;
+
+ strong {
+ font-weight: 500;
+ }
+
+ a {
+ color: lighten($ui-highlight-color, 8%);
+ text-decoration: none;
+
+ &:hover,
+ &:focus,
+ &:active {
+ text-decoration: underline;
+ color: lighten($ui-highlight-color, 12%);
+ }
+ }
+}
+
.regeneration-indicator {
text-align: center;
font-size: 16px;
cursor: default;
display: flex;
flex: 1 1 auto;
+ flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
- & > div {
- width: 100%;
- background: transparent;
- padding-top: 0;
- }
-
&__figure {
- background: url('../images/elephant_ui_working.svg') no-repeat center 0;
- width: 100%;
- height: 160px;
- background-size: contain;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
+ &,
+ img {
+ display: block;
+ width: auto;
+ height: 160px;
+ margin: 0;
+ }
}
- &.missing-indicator {
+ &--without-header {
padding-top: 20px + 48px;
-
- .regeneration-indicator__figure {
- background-image: url('../images/elephant_ui_disappointed.svg');
- }
}
&__label {
- margin-top: 200px;
+ margin-top: 30px;
strong {
display: block;
.column-header__wrapper {
position: relative;
flex: 0 0 auto;
+ z-index: 1;
&.active {
+ box-shadow: 0 1px 0 rgba($highlight-text-color, 0.3);
+
&::before {
display: block;
content: "";
position: absolute;
- top: 35px;
+ bottom: -13px;
left: 0;
right: 0;
margin: 0 auto;
background: radial-gradient(ellipse, rgba($ui-highlight-color, 0.23) 0%, rgba($ui-highlight-color, 0) 60%);
}
}
+
+ .announcements {
+ z-index: 1;
+ position: relative;
+ }
}
.column-header {
}
&.active {
- box-shadow: 0 1px 0 rgba($highlight-text-color, 0.3);
-
.column-header__icon {
color: $highlight-text-color;
text-shadow: 0 0 10px rgba($highlight-text-color, 0.4);
color: $darker-text-color;
transition: max-height 150ms ease-in-out, opacity 300ms linear;
opacity: 1;
+ z-index: 1;
+ position: relative;
&.collapsed {
max-height: 0;
}
}
+.column-header__permission-btn {
+ display: inline;
+ font-weight: inherit;
+ text-decoration: underline;
+}
+
.column-header__setting-arrows {
float: right;
cursor: pointer;
}
+.column-header__issue-btn {
+ color: $warning-red;
+
+ &:hover {
+ color: $error-red;
+ text-decoration: underline;
+ }
+}
+
.column-header__icon {
display: inline-block;
margin-right: 5px;
animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}
-@keyframes loader-figure {
+@keyframes spring-rotate-in {
0% {
- width: 0;
- height: 0;
- background-color: lighten($ui-base-color, 26%);
+ transform: rotate(0deg);
}
- 29% {
- background-color: lighten($ui-base-color, 26%);
+ 30% {
+ transform: rotate(-484.8deg);
}
- 30% {
- width: 42px;
+ 60% {
+ transform: rotate(-316.7deg);
+ }
+
+ 90% {
+ transform: rotate(-375deg);
+ }
+
+ 100% {
+ transform: rotate(-360deg);
+ }
+}
+
+@keyframes spring-rotate-out {
+ 0% {
+ transform: rotate(-360deg);
+ }
+
+ 30% {
+ transform: rotate(124.8deg);
+ }
+
+ 60% {
+ transform: rotate(-43.27deg);
+ }
+
+ 90% {
+ transform: rotate(15deg);
+ }
+
+ 100% {
+ transform: rotate(0deg);
+ }
+}
+
+@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;
margin-bottom: 10px;
}
+.column-settings__row--with-margin {
+ margin-bottom: 15px;
+}
+
.column-settings__hashtags {
.column-settings__row {
margin-bottom: 15px;
}
.column-settings__row {
- .text-btn {
+ .text-btn:not(.column-header__permission-btn) {
margin-bottom: 15px;
}
}
color: $primary-text-color;
margin-bottom: 4px;
display: block;
- vertical-align: top;
background-color: $base-overlay-background;
text-transform: uppercase;
font-size: 11px;
}
.empty-column-indicator,
-.error-column {
+.error-column,
+.follow_requests-unlocked_explanation {
color: $dark-text-color;
background: $ui-base-color;
text-align: center;
}
}
+.follow_requests-unlocked_explanation {
+ background: darken($ui-base-color, 4%);
+ contain: initial;
+}
+
.error-column {
flex-direction: column;
}
.emoji-button {
display: block;
- font-size: 24px;
- line-height: 24px;
- margin-left: 2px;
- width: 24px;
+ padding: 5px 5px 2px 2px;
outline: 0;
cursor: pointer;
margin: 0;
width: 22px;
height: 22px;
- margin-top: 2px;
}
&:hover,
.modal-root {
position: relative;
- transition: opacity 0.3s linear;
- will-change: opacity;
z-index: 9999;
}
z-index: 9999;
}
-.video-modal {
+.video-modal__container {
max-width: 100vw;
max-height: 100vh;
- position: relative;
+}
+
+.audio-modal__container {
+ width: 50vw;
}
.media-modal {
height: 100%;
position: relative;
- .extended-video-player {
- width: 100%;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
+ &__close,
+ &__zoom-button {
+ color: rgba($white, 0.7);
- video {
- max-width: $media-modal-media-max-width;
- max-height: $media-modal-media-max-height;
+ &:hover,
+ &:focus,
+ &:active {
+ color: $white;
+ background-color: rgba($white, 0.15);
+ }
+
+ &:focus {
+ background-color: rgba($white, 0.3);
}
}
}
}
.media-modal__nav {
- background: rgba($base-overlay-background, 0.5);
+ background: transparent;
box-sizing: border-box;
border: 0;
- color: $primary-text-color;
+ color: rgba($primary-text-color, 0.7);
cursor: pointer;
display: flex;
align-items: center;
position: absolute;
top: 0;
bottom: 0;
+
+ &:hover,
+ &:focus,
+ &:active {
+ color: $primary-text-color;
+ }
}
.media-modal__nav--left {
right: 0;
}
-.media-modal__pagination {
- width: 100%;
- text-align: center;
+.media-modal__overlay {
+ max-width: 600px;
position: absolute;
left: 0;
- bottom: 20px;
- pointer-events: none;
-}
+ right: 0;
+ bottom: 0;
+ margin: 0 auto;
-.media-modal__meta {
- text-align: center;
- position: absolute;
- left: 0;
- bottom: 20px;
- width: 100%;
- pointer-events: none;
+ .picture-in-picture__footer {
+ border-radius: 0;
+ background: transparent;
+ padding: 20px 0;
- &--shifted {
- bottom: 62px;
- }
+ .icon-button {
+ color: $white;
- a {
- text-decoration: none;
- font-weight: 500;
- color: $ui-secondary-color;
+ &:hover,
+ &:focus,
+ &:active {
+ color: $white;
+ background-color: rgba($white, 0.15);
+ }
- &:hover,
- &:focus,
- &:active {
- text-decoration: underline;
+ &:focus {
+ background-color: rgba($white, 0.3);
+ }
+
+ &.active {
+ color: $highlight-text-color;
+
+ &:hover,
+ &:focus,
+ &:active {
+ background: rgba($highlight-text-color, 0.15);
+ }
+
+ &:focus {
+ background: rgba($highlight-text-color, 0.3);
+ }
+ }
+
+ &.star-icon.active {
+ color: $gold-star;
+
+ &:hover,
+ &:focus,
+ &:active {
+ background: rgba($gold-star, 0.15);
+ }
+
+ &:focus {
+ background: rgba($gold-star, 0.3);
+ }
+ }
}
}
}
-.media-modal__page-dot {
- display: inline-block;
+.media-modal__pagination {
+ display: flex;
+ justify-content: center;
+ margin-bottom: 20px;
}
-.media-modal__button {
- background-color: $primary-text-color;
- height: 12px;
- width: 12px;
- border-radius: 6px;
- margin: 10px;
+.media-modal__page-dot {
+ flex: 0 0 auto;
+ background-color: $white;
+ opacity: 0.4;
+ height: 6px;
+ width: 6px;
+ border-radius: 50%;
+ margin: 0 4px;
padding: 0;
border: 0;
font-size: 0;
-}
+ transition: opacity .2s ease-in-out;
-.media-modal__button--active {
- background-color: $highlight-text-color;
+ &.active {
+ opacity: 1;
+ }
}
.media-modal__close {
z-index: 100;
}
+.media-modal__zoom-button {
+ position: absolute;
+ right: 64px;
+ top: 8px;
+ z-index: 100;
+ pointer-events: auto;
+ transition: opacity 0.3s linear;
+ will-change: opacity;
+}
+
+.media-modal__zoom-button--hidden {
+ pointer-events: none;
+ opacity: 0;
+}
+
.onboarding-modal,
.error-modal,
.embed-modal {
.confirmation-modal,
.report-modal,
.actions-modal,
-.mute-modal {
+.mute-modal,
+.block-modal {
background: lighten($ui-secondary-color, 8%);
color: $inverted-text-color;
border-radius: 8px;
.boost-modal__action-bar,
.confirmation-modal__action-bar,
-.mute-modal__action-bar {
+.mute-modal__action-bar,
+.block-modal__action-bar {
display: flex;
justify-content: space-between;
background: $ui-secondary-color;
font-size: 14px;
}
-.mute-modal {
+.mute-modal,
+.block-modal {
line-height: 24px;
}
-.mute-modal .react-toggle {
+.mute-modal .react-toggle,
+.block-modal .react-toggle {
vertical-align: middle;
}
}
}
+.setting-divider {
+ background: transparent;
+ border: 0;
+ margin: 0;
+ width: 100%;
+ height: 1px;
+ margin-bottom: 29px;
+}
+
.report-modal__comment {
padding: 20px;
border-right: 1px solid $ui-secondary-color;
}
.confirmation-modal__action-bar,
-.mute-modal__action-bar {
- .confirmation-modal__secondary-button,
- .confirmation-modal__cancel-button,
- .mute-modal__cancel-button {
- background-color: transparent;
- color: $lighter-text-color;
- font-size: 14px;
- font-weight: 500;
-
- &:hover,
- &:focus,
- &:active {
- color: darken($lighter-text-color, 4%);
- }
- }
-
+.mute-modal__action-bar,
+.block-modal__action-bar {
.confirmation-modal__secondary-button {
flex-shrink: 1;
}
}
+.confirmation-modal__secondary-button,
+.confirmation-modal__cancel-button,
+.mute-modal__cancel-button,
+.block-modal__cancel-button {
+ background-color: transparent;
+ color: $lighter-text-color;
+ font-size: 14px;
+ font-weight: 500;
+
+ &:hover,
+ &:focus,
+ &:active {
+ color: darken($lighter-text-color, 4%);
+ background-color: transparent;
+ }
+}
+
.confirmation-modal__container,
.mute-modal__container,
+.block-modal__container,
.report-modal__target {
padding: 30px;
font-size: 16px;
- text-align: center;
strong {
font-weight: 500;
}
}
}
+
+ select {
+ appearance: none;
+ box-sizing: border-box;
+ font-size: 14px;
+ color: $inverted-text-color;
+ display: inline-block;
+ width: auto;
+ outline: 0;
+ font-family: inherit;
+ background: $simple-background-color url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(darken($simple-background-color, 14%))}'/></svg>") no-repeat right 8px center / auto 16px;
+ border: 1px solid darken($simple-background-color, 14%);
+ border-radius: 4px;
+ padding: 6px 10px;
+ padding-right: 30px;
+ }
+}
+
+.confirmation-modal__container,
+.report-modal__target {
+ text-align: center;
+}
+
+.block-modal,
+.mute-modal {
+ &__explanation {
+ margin-top: 20px;
+ }
+
+ .setting-toggle {
+ margin-top: 20px;
+ margin-bottom: 24px;
+ display: flex;
+ align-items: center;
+
+ &__label {
+ color: $inverted-text-color;
+ margin: 0;
+ margin-left: 8px;
+ }
+ }
}
.report-modal__target {
}
.media-gallery__gifv {
- &.autoplay {
- .media-gallery__gifv__label {
- display: none;
- }
- }
-
&:hover {
.media-gallery__gifv__label {
opacity: 1;
border-radius: 4px;
position: relative;
width: 100%;
+ min-height: 64px;
}
.media-gallery__item {
}
.audio-player {
+ overflow: hidden;
box-sizing: border-box;
position: relative;
background: darken($ui-base-color, 8%);
border-radius: 4px;
padding-bottom: 44px;
+ direction: ltr;
&.editable {
border-radius: 0;
height: 100%;
}
- &__waveform {
- padding: 15px 0;
- position: relative;
- overflow: hidden;
+ .video-player__volume::before,
+ .video-player__seek::before {
+ background: currentColor;
+ opacity: 0.15;
+ }
- &::before {
- content: "";
- display: block;
- position: absolute;
- border-top: 1px solid lighten($ui-base-color, 4%);
- width: 100%;
- height: 0;
- left: 0;
- top: calc(50% + 1px);
+ .video-player__seek__buffer {
+ background: currentColor;
+ opacity: 0.2;
+ }
+
+ .video-player__buttons button {
+ color: currentColor;
+ opacity: 0.75;
+
+ &:active,
+ &:hover,
+ &:focus {
+ color: currentColor;
+ opacity: 1;
}
}
- &__progress-placeholder {
- background-color: rgba(lighten($ui-highlight-color, 8%), 0.5);
+ .video-player__time-sep,
+ .video-player__time-total,
+ .video-player__time-current {
+ color: currentColor;
+ }
+
+ .video-player__seek::before,
+ .video-player__seek__buffer,
+ .video-player__seek__progress {
+ top: 0;
}
- &__wave-placeholder {
- background-color: lighten($ui-base-color, 16%);
+ .video-player__seek__handle {
+ top: -4px;
}
.video-player__controls {
- padding: 0 15px;
padding-top: 10px;
- background: darken($ui-base-color, 8%);
- border-top: 1px solid lighten($ui-base-color, 4%);
- border-radius: 0 0 4px 4px;
+ background: transparent;
}
}
max-width: 100%;
border-radius: 4px;
box-sizing: border-box;
+ direction: ltr;
+ color: $white;
&.editable {
border-radius: 0;
}
video {
+ display: block;
max-width: 100vw;
max-height: 80vh;
z-index: 1;
max-height: 100% !important;
width: 100% !important;
height: 100% !important;
+ outline: 0;
}
}
&__buttons-bar {
display: flex;
justify-content: space-between;
- padding-bottom: 10px;
+ padding-bottom: 8px;
+ margin: 0 -5px;
+
+ .video-player__download__icon {
+ color: inherit;
+ }
}
&__buttons {
+ display: flex;
+ flex: 0 1 auto;
+ min-width: 30px;
+ align-items: center;
font-size: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
- &.left {
- button {
- padding-left: 0;
- }
- }
-
- &.right {
- button {
- padding-right: 0;
- }
- }
+ .player-button {
+ display: inline-block;
+ outline: 0;
- button {
+ flex: 0 0 auto;
background: transparent;
- padding: 2px 10px;
+ padding: 5px;
font-size: 16px;
border: 0;
color: rgba($white, 0.75);
}
}
+ &__time {
+ display: inline;
+ flex: 0 1 auto;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ margin: 0 5px;
+ }
+
&__time-sep,
&__time-total,
&__time-current {
&__time-current {
color: $white;
- margin-left: 60px;
}
&__time-sep {
}
&__volume {
+ flex: 0 0 auto;
+ display: inline-flex;
cursor: pointer;
height: 24px;
- display: inline;
+ position: relative;
+ overflow: hidden;
+
+ .no-reduce-motion & {
+ transition: all 100ms linear;
+ }
+
+ &.active {
+ overflow: visible;
+ width: 50px;
+ margin-right: 16px;
+ }
&::before {
content: "";
display: block;
position: absolute;
height: 4px;
- left: 70px;
- bottom: 20px;
+ left: 0;
+ top: 50%;
+ transform: translate(0, -50%);
}
&__current {
position: absolute;
height: 4px;
border-radius: 4px;
- left: 70px;
- bottom: 20px;
+ left: 0;
+ top: 50%;
+ transform: translate(0, -50%);
background: lighten($ui-highlight-color, 8%);
}
border-radius: 50%;
width: 12px;
height: 12px;
- bottom: 16px;
- left: 70px;
- transition: opacity .1s ease;
+ top: 50%;
+ left: 0;
+ margin-left: -6px;
+ transform: translate(0, -50%);
background: lighten($ui-highlight-color, 8%);
box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
- pointer-events: none;
+ opacity: 0;
+
+ .no-reduce-motion & {
+ transition: opacity 100ms linear;
+ }
+ }
+
+ &.active &__handle {
+ opacity: 1;
}
}
display: block;
position: absolute;
height: 4px;
- top: 10px;
+ top: 14px;
}
&__progress,
position: absolute;
height: 4px;
border-radius: 4px;
- top: 10px;
+ top: 14px;
background: lighten($ui-highlight-color, 8%);
}
border-radius: 50%;
width: 12px;
height: 12px;
- top: 6px;
+ top: 10px;
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;
+
+ .no-reduce-motion & {
+ transition: opacity .1s ease;
+ }
&.active {
opacity: 1;
&.detailed,
&.fullscreen {
.video-player__buttons {
- button {
+ .player-button {
padding-top: 10px;
padding-bottom: 10px;
}
}
}
+.gifv {
+ video {
+ max-width: 100vw;
+ max-height: 80vh;
+ }
+}
+
.directory {
&__list {
width: 100%;
text-align: center;
text-decoration: none;
position: relative;
+ width: 100%;
+ white-space: nowrap;
&.active {
color: $secondary-text-color;
}
}
+.column-settings__row .radio-button {
+ display: block;
+}
+
.radio-button {
font-size: 14px;
position: relative;
}
.embed-modal {
+ width: auto;
max-width: 80vw;
max-height: 80vh;
font-size: 14px;
margin: 0;
margin-bottom: 15px;
+ border-radius: 4px;
&::-moz-focus-inner {
border: 0;
max-width: 100%;
overflow: hidden;
border: 0;
+ border-radius: 4px;
}
}
}
background: $base-shadow-color;
img,
- video {
+ video,
+ canvas {
display: block;
max-height: 80vh;
width: 100%;
&__tabs {
display: flex;
align-items: flex-start;
- padding: 7px 5px;
+ padding: 7px 10px;
margin-top: -55px;
&__buttons {
padding: 2px;
}
+ & > .icon-button {
+ margin-right: 8px;
+ }
+
.button {
margin: 0 8px;
}
}
&__name {
- padding: 5px;
+ padding: 5px 10px;
.account-role {
vertical-align: top;
padding: 20px 15px;
padding-bottom: 5px;
color: $primary-text-color;
+
+ .columns-area--mobile & {
+ padding-left: 20px;
+ padding-right: 20px;
+ }
}
.account__header__fields {
&__links {
font-size: 14px;
color: $darker-text-color;
+ padding: 10px 0;
a {
display: inline-block;
color: $darker-text-color;
text-decoration: none;
- padding: 10px;
- padding-top: 20px;
+ padding: 5px 10px;
font-weight: 500;
strong {
}
}
}
+
+ &__account-note {
+ padding: 15px;
+ padding-bottom: 10px;
+ color: $primary-text-color;
+ font-size: 14px;
+ font-weight: 400;
+ border-bottom: 1px solid lighten($ui-base-color, 12%);
+
+ .columns-area--mobile & {
+ padding-left: 20px;
+ padding-right: 20px;
+ }
+
+ label {
+ display: block;
+ font-size: 12px;
+ font-weight: 500;
+ color: $darker-text-color;
+ text-transform: uppercase;
+ margin-bottom: 5px;
+ }
+
+ textarea {
+ display: block;
+ box-sizing: border-box;
+ width: calc(100% + 20px);
+ color: $secondary-text-color;
+ background: transparent;
+ padding: 10px;
+ margin: 0 -10px;
+ font-family: inherit;
+ font-size: 14px;
+ resize: none;
+ border: 0;
+ outline: 0;
+ border-radius: 4px;
+
+ &::placeholder {
+ color: $dark-text-color;
+ opacity: 1;
+ }
+
+ &:focus {
+ background: $ui-base-color;
+ }
+ }
+ }
}
.trends {
path:last-child {
stroke: lighten($highlight-text-color, 6%) !important;
+ fill: none !important;
}
}
}
}
-.layout-toggle {
+.conversation {
display: flex;
+ border-bottom: 1px solid lighten($ui-base-color, 8%);
padding: 5px;
+ padding-bottom: 0;
- button {
+ &:focus {
+ background: lighten($ui-base-color, 2%);
+ outline: 0;
+ }
+
+ &__avatar {
+ flex: 0 0 auto;
+ padding: 10px;
+ padding-top: 12px;
+ position: relative;
+ cursor: pointer;
+ }
+
+ &__unread {
+ display: inline-block;
+ background: $highlight-text-color;
+ border-radius: 50%;
+ width: 0.625rem;
+ height: 0.625rem;
+ margin: -.1ex .15em .1ex;
+ }
+
+ &__content {
+ flex: 1 1 auto;
+ padding: 10px 5px;
+ padding-right: 15px;
+ overflow: hidden;
+
+ &__info {
+ overflow: hidden;
+ display: flex;
+ flex-direction: row-reverse;
+ justify-content: space-between;
+ }
+
+ &__relative-time {
+ font-size: 15px;
+ color: $darker-text-color;
+ padding-left: 15px;
+ }
+
+ &__names {
+ color: $darker-text-color;
+ font-size: 15px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ margin-bottom: 4px;
+ flex-basis: 90px;
+ flex-grow: 1;
+
+ a {
+ color: $primary-text-color;
+ text-decoration: none;
+
+ &:hover,
+ &:focus,
+ &:active {
+ text-decoration: underline;
+ }
+ }
+ }
+
+ a {
+ word-break: break-word;
+ }
+ }
+
+ &--unread {
+ background: lighten($ui-base-color, 2%);
+
+ &:focus {
+ background: lighten($ui-base-color, 4%);
+ }
+
+ .conversation__content__info {
+ font-weight: 700;
+ }
+
+ .conversation__content__relative-time {
+ color: $primary-text-color;
+ }
+ }
+}
+
+.announcements {
+ background: lighten($ui-base-color, 8%);
+ font-size: 13px;
+ display: flex;
+ align-items: flex-end;
+
+ &__mastodon {
+ width: 124px;
+ flex: 0 0 auto;
+
+ @media screen and (max-width: 124px + 300px) {
+ display: none;
+ }
+ }
+
+ &__container {
+ width: calc(100% - 124px);
+ flex: 0 0 auto;
+ position: relative;
+
+ @media screen and (max-width: 124px + 300px) {
+ width: 100%;
+ }
+ }
+
+ &__item {
box-sizing: border-box;
- flex: 0 0 50%;
- background: transparent;
- padding: 5px;
- border: 0;
+ width: 100%;
+ padding: 15px;
position: relative;
+ font-size: 15px;
+ line-height: 20px;
+ word-wrap: break-word;
+ font-weight: 400;
+ max-height: 50vh;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+
+ &__range {
+ display: block;
+ font-weight: 500;
+ margin-bottom: 10px;
+ padding-right: 18px;
+ }
+
+ &__unread {
+ position: absolute;
+ top: 19px;
+ right: 19px;
+ display: block;
+ background: $highlight-text-color;
+ border-radius: 50%;
+ width: 0.625rem;
+ height: 0.625rem;
+ }
+ }
+
+ &__pagination {
+ padding: 15px;
+ color: $darker-text-color;
+ position: absolute;
+ bottom: 3px;
+ right: 0;
+ }
+}
+
+.layout-multiple-columns .announcements__mastodon {
+ display: none;
+}
+
+.layout-multiple-columns .announcements__container {
+ width: 100%;
+}
+
+.reactions-bar {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ margin-top: 15px;
+ margin-left: -2px;
+ width: calc(100% - (90px - 33px));
+
+ &__item {
+ flex-shrink: 0;
+ background: lighten($ui-base-color, 12%);
+ border: 0;
+ border-radius: 3px;
+ margin: 2px;
+ cursor: pointer;
+ user-select: none;
+ padding: 0 6px;
+ display: flex;
+ align-items: center;
+ transition: all 100ms ease-in;
+ transition-property: background-color, color;
+
+ &__emoji {
+ display: block;
+ margin: 3px 0;
+ width: 16px;
+ height: 16px;
+
+ img {
+ display: block;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ min-width: auto;
+ min-height: auto;
+ vertical-align: bottom;
+ object-fit: contain;
+ }
+ }
+
+ &__count {
+ display: block;
+ min-width: 9px;
+ font-size: 13px;
+ font-weight: 500;
+ text-align: center;
+ margin-left: 6px;
+ color: $darker-text-color;
+ }
&:hover,
&:focus,
&:active {
- svg path:first-child {
- fill: lighten($ui-base-color, 16%);
+ background: lighten($ui-base-color, 16%);
+ transition: all 200ms ease-out;
+ transition-property: background-color, color;
+
+ &__count {
+ color: lighten($darker-text-color, 4%);
+ }
+ }
+
+ &.active {
+ transition: all 100ms ease-in;
+ transition-property: background-color, color;
+ background-color: mix(lighten($ui-base-color, 12%), $ui-highlight-color, 80%);
+
+ .reactions-bar__item__count {
+ color: lighten($highlight-text-color, 8%);
}
}
}
- svg {
- width: 100%;
- height: auto;
+ .emoji-picker-dropdown {
+ margin: 2px;
+ }
+
+ &:hover .emoji-button {
+ opacity: 0.85;
+ }
+
+ .emoji-button {
+ color: $darker-text-color;
+ margin: 0;
+ font-size: 16px;
+ width: auto;
+ flex-shrink: 0;
+ padding: 0 6px;
+ height: 22px;
+ display: flex;
+ align-items: center;
+ opacity: 0.5;
+ transition: all 100ms ease-in;
+ transition-property: background-color, color;
- path:first-child {
- fill: lighten($ui-base-color, 12%);
+ &:hover,
+ &:active,
+ &:focus {
+ opacity: 1;
+ color: lighten($darker-text-color, 4%);
+ transition: all 200ms ease-out;
+ transition-property: background-color, color;
}
+ }
- path:last-child {
- fill: darken($ui-base-color, 14%);
+ &--empty {
+ .emoji-button {
+ padding: 0;
}
}
+}
+
+.notification,
+.status__wrapper {
+ position: relative;
- &__active {
- color: $ui-highlight-color;
+ &.unread {
+ &::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ pointer-events: 0;
+ width: 100%;
+ height: 100%;
+ border-left: 2px solid $highlight-text-color;
+ pointer-events: none;
+ }
+ }
+}
+
+.picture-in-picture {
+ position: fixed;
+ bottom: 20px;
+ right: 20px;
+ width: 300px;
+
+ &__footer {
+ border-radius: 0 0 4px 4px;
+ background: lighten($ui-base-color, 4%);
+ padding: 10px;
+ padding-top: 12px;
+ display: flex;
+ justify-content: space-between;
+ }
+
+ &__header {
+ border-radius: 4px 4px 0 0;
+ background: lighten($ui-base-color, 4%);
+ padding: 10px;
+ display: flex;
+ justify-content: space-between;
+
+ &__account {
+ display: flex;
+ text-decoration: none;
+ }
+
+ .account__avatar {
+ margin-right: 10px;
+ }
+
+ .display-name {
+ color: $primary-text-color;
+ text-decoration: none;
+
+ strong,
+ span {
+ display: block;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ }
+
+ span {
+ color: $darker-text-color;
+ }
+ }
+ }
+
+ .video-player,
+ .audio-player {
+ border-radius: 0;
+ }
+}
+
+.picture-in-picture-placeholder {
+ box-sizing: border-box;
+ border: 2px dashed lighten($ui-base-color, 8%);
+ background: $base-shadow-color;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin-top: 10px;
+ font-size: 16px;
+ font-weight: 500;
+ cursor: pointer;
+ color: $darker-text-color;
+
+ i {
+ display: block;
+ font-size: 24px;
+ font-weight: 400;
+ margin-bottom: 10px;
+ }
+
+ &:hover,
+ &:focus,
+ &:active {
+ border-color: lighten($ui-base-color, 12%);
+ }
+}
+
+.notifications-permission-banner {
+ padding: 30px;
+ border-bottom: 1px solid lighten($ui-base-color, 8%);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+
+ &__close {
position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- background: lighten($ui-base-color, 12%);
- border-radius: 50%;
- padding: 0.35rem;
+ top: 10px;
+ right: 10px;
+ }
+
+ h2 {
+ font-size: 16px;
+ font-weight: 500;
+ margin-bottom: 15px;
+ text-align: center;
+ }
+
+ p {
+ color: $darker-text-color;
+ margin-bottom: 15px;
+ text-align: center;
}
}
git-æsc / mastodon.git / blobdiff