Merge tag 'v3.2.0' into hometown-dev
This commit is contained in:
Darius Kazemi
@ -1,14 +1,13 @@
|
||||
$black-emojis: '8ball' 'ant' 'back' 'black_circle' 'black_heart' 'black_large_square' 'black_medium_small_square' 'black_medium_square' 'black_nib' 'black_small_square' 'bomb' 'bowling' 'bust_in_silhouette' 'busts_in_silhouette' 'camera' 'camera_with_flash' 'clubs' 'copyright' 'curly_loop' 'currency_exchange' 'dark_sunglasses' 'eight_pointed_black_star' 'electric_plug' 'end' 'female-guard' 'film_projector' 'fried_egg' 'gorilla' 'guardsman' 'heavy_check_mark' 'heavy_division_sign' 'heavy_dollar_sign' 'heavy_minus_sign' 'heavy_multiplication_x' 'heavy_plus_sign' 'hocho' 'hole' 'joystick' 'kaaba' 'lower_left_ballpoint_pen' 'lower_left_fountain_pen' 'male-guard' 'microphone' 'mortar_board' 'movie_camera' 'musical_score' 'on' 'registered' 'soon' 'spades' 'speaking_head_in_silhouette' 'spider' 'telephone_receiver' 'tm' 'top' 'tophat' 'turkey' 'vhs' 'video_camera' 'video_game' 'water_buffalo' 'waving_black_flag' 'wavy_dash';
|
||||
$emojis-requiring-inversion: 'back' 'copyright' 'curly_loop' 'currency_exchange' 'end' 'heavy_check_mark' 'heavy_division_sign' 'heavy_dollar_sign' 'heavy_minus_sign' 'heavy_multiplication_x' 'heavy_plus_sign' 'on' 'registered' 'soon' 'spider' 'telephone_receiver' 'tm' 'top' 'wavy_dash' !default;
|
||||
|
||||
%white-emoji-outline {
|
||||
filter: drop-shadow(1px 1px 0 $white) drop-shadow(-1px 1px 0 $white) drop-shadow(1px -1px 0 $white) drop-shadow(-1px -1px 0 $white);
|
||||
transform: scale(.71);
|
||||
%emoji-color-inversion {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
.emojione {
|
||||
@each $emoji in $black-emojis {
|
||||
@each $emoji in $emojis-requiring-inversion {
|
||||
&[title=':#{$emoji}:'] {
|
||||
@extend %white-emoji-outline;
|
||||
@extend %emoji-color-inversion;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -76,6 +76,10 @@
|
||||
margin-left: 15px;
|
||||
text-align: left;
|
||||
|
||||
i[data-hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-size: 15px;
|
||||
color: $primary-text-color;
|
||||
|
||||
@ -194,9 +194,7 @@ $content-width: 840px;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 20px 15px;
|
||||
padding-top: 60px;
|
||||
padding-left: 25px;
|
||||
padding: 55px 15px 20px 25px;
|
||||
|
||||
@media screen and (max-width: $no-columns-breakpoint) {
|
||||
max-width: none;
|
||||
@ -207,7 +205,7 @@ $content-width: 840px;
|
||||
&-heading {
|
||||
display: flex;
|
||||
|
||||
padding-bottom: 40px;
|
||||
padding-bottom: 36px;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
|
||||
margin: -15px -15px 40px 0;
|
||||
@ -238,7 +236,7 @@ $content-width: 840px;
|
||||
h2 {
|
||||
color: $secondary-text-color;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
line-height: 36px;
|
||||
font-weight: 400;
|
||||
|
||||
@media screen and (max-width: $no-columns-breakpoint) {
|
||||
@ -535,6 +533,16 @@ body,
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.simple_form {
|
||||
.actions {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.button {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.batch-form-box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@ -68,7 +68,32 @@ body {
|
||||
}
|
||||
|
||||
&.player {
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
& > div {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.video-player video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
.media-gallery {
|
||||
margin-top: 0;
|
||||
height: 100% !important;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.media-gallery__item {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.embed {
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -11,6 +11,15 @@
|
||||
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;
|
||||
@ -1053,7 +1062,7 @@
|
||||
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.
|
||||
@ -1080,7 +1089,8 @@
|
||||
}
|
||||
|
||||
&.light {
|
||||
.status__relative-time {
|
||||
.status__relative-time,
|
||||
.status__visibility-icon {
|
||||
color: $light-text-color;
|
||||
}
|
||||
|
||||
@ -1126,12 +1136,18 @@
|
||||
}
|
||||
|
||||
.status__relative-time,
|
||||
.status__visibility-icon,
|
||||
.notification__relative_time {
|
||||
color: $dark-text-color;
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.status__visibility-icon {
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.status__display-name {
|
||||
color: $dark-text-color;
|
||||
}
|
||||
@ -3063,7 +3079,7 @@ label[for="is-exclusive-checkbox"] {
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
@ -3077,21 +3093,18 @@ label[for="is-exclusive-checkbox"] {
|
||||
|
||||
}
|
||||
|
||||
.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%);
|
||||
@ -3223,7 +3236,8 @@ a.status-card {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.status-card__image-image {
|
||||
.status-card__image-image,
|
||||
.status-card__image-preview {
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
@ -3268,6 +3282,24 @@ a.status-card.compact:hover {
|
||||
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;
|
||||
@ -3292,6 +3324,31 @@ a.status-card.compact:hover {
|
||||
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;
|
||||
@ -3878,7 +3935,6 @@ a.status-card.compact:hover {
|
||||
color: $primary-text-color;
|
||||
margin-bottom: 4px;
|
||||
display: block;
|
||||
vertical-align: top;
|
||||
background-color: $base-overlay-background;
|
||||
text-transform: uppercase;
|
||||
font-size: 11px;
|
||||
@ -4906,6 +4962,15 @@ a.status-card.compact:hover {
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
@ -5243,6 +5308,7 @@ a.status-card.compact:hover {
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 64px;
|
||||
}
|
||||
|
||||
.media-gallery__item {
|
||||
@ -5336,6 +5402,7 @@ a.status-card.compact:hover {
|
||||
}
|
||||
|
||||
.audio-player {
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
background: darken($ui-base-color, 8%);
|
||||
@ -5348,37 +5415,49 @@ a.status-card.compact:hover {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -5390,6 +5469,7 @@ a.status-card.compact:hover {
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
direction: ltr;
|
||||
color: $white;
|
||||
|
||||
&.editable {
|
||||
border-radius: 0;
|
||||
@ -5401,6 +5481,7 @@ a.status-card.compact:hover {
|
||||
}
|
||||
|
||||
video {
|
||||
display: block;
|
||||
max-width: 100vw;
|
||||
max-height: 80vh;
|
||||
z-index: 1;
|
||||
@ -5501,6 +5582,10 @@ a.status-card.compact:hover {
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: flex;
|
||||
flex: 0 1 auto;
|
||||
min-width: 30px;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
@ -5519,6 +5604,7 @@ a.status-card.compact:hover {
|
||||
}
|
||||
|
||||
button {
|
||||
flex: 0 0 auto;
|
||||
background: transparent;
|
||||
padding: 2px 10px;
|
||||
font-size: 16px;
|
||||
@ -5533,6 +5619,13 @@ a.status-card.compact:hover {
|
||||
}
|
||||
}
|
||||
|
||||
&__time {
|
||||
display: inline;
|
||||
flex: 0 1 auto;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&__time-sep,
|
||||
&__time-total,
|
||||
&__time-current {
|
||||
@ -5542,7 +5635,6 @@ a.status-card.compact:hover {
|
||||
|
||||
&__time-current {
|
||||
color: $white;
|
||||
margin-left: 60px;
|
||||
}
|
||||
|
||||
&__time-sep {
|
||||
@ -5556,9 +5648,22 @@ a.status-card.compact:hover {
|
||||
}
|
||||
|
||||
&__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: "";
|
||||
@ -5568,8 +5673,9 @@ a.status-card.compact:hover {
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 4px;
|
||||
left: 70px;
|
||||
bottom: 20px;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
|
||||
&__current {
|
||||
@ -5577,8 +5683,9 @@ a.status-card.compact:hover {
|
||||
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%);
|
||||
}
|
||||
|
||||
@ -5588,12 +5695,21 @@ a.status-card.compact:hover {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -5653,10 +5769,12 @@ a.status-card.compact:hover {
|
||||
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;
|
||||
|
||||
.no-reduce-motion & {
|
||||
transition: opacity .1s ease;
|
||||
}
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
@ -6476,7 +6594,7 @@ noscript {
|
||||
&__tabs {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 7px 5px;
|
||||
padding: 7px 10px;
|
||||
margin-top: -55px;
|
||||
|
||||
&__buttons {
|
||||
@ -6498,7 +6616,7 @@ noscript {
|
||||
}
|
||||
|
||||
&__name {
|
||||
padding: 5px;
|
||||
padding: 5px 10px;
|
||||
|
||||
.account-role {
|
||||
vertical-align: top;
|
||||
@ -6542,6 +6660,11 @@ noscript {
|
||||
padding: 20px 15px;
|
||||
padding-bottom: 5px;
|
||||
color: $primary-text-color;
|
||||
|
||||
.columns-area--mobile & {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.account__header__fields {
|
||||
@ -6584,6 +6707,54 @@ noscript {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__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 {
|
||||
|
||||
@ -587,7 +587,7 @@ code {
|
||||
|
||||
&.alert {
|
||||
border: 1px solid rgba($error-value-color, 0.5);
|
||||
background: rgba($error-value-color, 0.25);
|
||||
background: rgba($error-value-color, 0.1);
|
||||
color: $error-value-color;
|
||||
}
|
||||
|
||||
|
||||
@ -158,6 +158,7 @@ body.rtl {
|
||||
}
|
||||
|
||||
.status__relative-time,
|
||||
.status__visibility-icon,
|
||||
.activity-stream .status.light .status__header .status__meta {
|
||||
float: left;
|
||||
}
|
||||
|
||||
@ -140,6 +140,11 @@
|
||||
|
||||
.detailed-status {
|
||||
padding: 15px;
|
||||
|
||||
.detailed-status__display-avatar .account__avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
|
||||
Reference in New Issue
Block a user