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 {
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;
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;
}
}
}
-.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 {
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 {
}
}
-.star-icon.active {
+.icon-button.star-icon.active {
color: $gold-star;
}
-.bookmark-icon.active {
+.icon-button.bookmark-icon.active {
color: $red-bookmark;
}
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;
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 {
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%);
flex: 1 1 auto;
overflow: hidden;
padding: 14px 14px 14px 8px;
-
- &--blurred {
- filter: blur(2px);
- pointer-events: none;
- }
}
.status-card__description {
}
}
+.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;
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;
.modal-root {
position: relative;
- transition: opacity 0.3s linear;
- will-change: opacity;
z-index: 9999;
}
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 {
- pointer-events: auto;
- 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 {
}
}
+.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;
}
}
}
+
+ 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,
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%);
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;
}
- &__wave-placeholder {
- background-color: lighten($ui-base-color, 16%);
+ .video-player__seek::before,
+ .video-player__seek__buffer,
+ .video-player__seek__progress {
+ top: 0;
+ }
+
+ .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;
}
}
border-radius: 4px;
box-sizing: border-box;
direction: ltr;
+ color: $white;
&.editable {
border-radius: 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;
}
}
}
+.column-settings__row .radio-button {
+ display: block;
+}
+
.radio-button {
font-size: 14px;
position: relative;
&__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 {
}
}
}
+
+ &__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 {
}
}
}
+
+.notification,
+.status__wrapper {
+ position: relative;
+
+ &.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: 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