Merge branch 'instance_only_statuses' of https://github.com/masto-donte-com-br/mastodon into hometown-dev
This commit is contained in:
Darius Kazemi
@ -204,18 +204,44 @@ $content-width: 840px;
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
&-heading {
|
||||
display: flex;
|
||||
|
||||
padding-bottom: 40px;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
|
||||
margin: -15px -15px 40px 0;
|
||||
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
& > * {
|
||||
margin-top: 15px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
&-actions {
|
||||
display: inline-flex;
|
||||
|
||||
& > :not(:first-child) {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $no-columns-breakpoint) {
|
||||
border-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: $secondary-text-color;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
font-weight: 400;
|
||||
padding-bottom: 40px;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
margin-bottom: 40px;
|
||||
|
||||
@media screen and (max-width: $no-columns-breakpoint) {
|
||||
border-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
@ -880,3 +906,50 @@ a.name-tag,
|
||||
color: $primary-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.center-text {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.announcements-list {
|
||||
border: 1px solid lighten($ui-base-color, 4%);
|
||||
border-radius: 4px;
|
||||
|
||||
&__item {
|
||||
padding: 15px 0;
|
||||
background: $ui-base-color;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 4%);
|
||||
|
||||
&__title {
|
||||
padding: 0 15px;
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
color: $secondary-text-color;
|
||||
text-decoration: none;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $primary-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__meta {
|
||||
padding: 0 15px;
|
||||
color: $dark-text-color;
|
||||
}
|
||||
|
||||
&__action-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,6 +3,14 @@
|
||||
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||
}
|
||||
|
||||
.animated-number {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.link-button {
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
@ -386,6 +394,7 @@
|
||||
.autosuggest-input,
|
||||
.spoiler-input {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.spoiler-input {
|
||||
@ -920,6 +929,48 @@
|
||||
}
|
||||
}
|
||||
|
||||
.announcements__item__content {
|
||||
word-wrap: break-word;
|
||||
|
||||
.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
|
||||
}
|
||||
@ -933,6 +984,7 @@
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
padding-top: 8px;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
@ -1102,6 +1154,7 @@
|
||||
.status-check-box__status {
|
||||
margin: 10px 0 10px 10px;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
||||
.media-gallery {
|
||||
max-width: 250px;
|
||||
@ -1653,6 +1706,24 @@ a.account__display-name {
|
||||
color: $gold-star;
|
||||
}
|
||||
|
||||
.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;
|
||||
@ -2532,8 +2603,8 @@ a.account__display-name {
|
||||
display: block;
|
||||
object-fit: contain;
|
||||
object-position: bottom left;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
width: 85%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
user-drag: none;
|
||||
user-select: none;
|
||||
@ -2573,7 +2644,6 @@ a.account__display-name {
|
||||
overflow-x: hidden;
|
||||
flex: 1 1 auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
will-change: transform; // improves perf in mobile Chrome
|
||||
|
||||
&.optionally-scrollable {
|
||||
overflow-y: auto;
|
||||
@ -3254,13 +3324,16 @@ a.status-card.compact:hover {
|
||||
.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;
|
||||
@ -3271,6 +3344,11 @@ a.status-card.compact:hover {
|
||||
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 {
|
||||
@ -3303,8 +3381,6 @@ a.status-card.compact:hover {
|
||||
}
|
||||
|
||||
&.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);
|
||||
@ -3360,6 +3436,8 @@ a.status-card.compact:hover {
|
||||
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;
|
||||
@ -3462,6 +3540,50 @@ a.status-card.compact:hover {
|
||||
animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
@keyframes spring-rotate-in {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: rotate(-484.8deg);
|
||||
}
|
||||
|
||||
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;
|
||||
@ -5283,6 +5405,7 @@ a.status-card.compact:hover {
|
||||
max-height: 100% !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -5360,6 +5483,10 @@ a.status-card.compact:hover {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 10px;
|
||||
|
||||
.video-player__download__icon {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
@ -5724,6 +5851,8 @@ a.status-card.compact:hover {
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
|
||||
&.active {
|
||||
color: $secondary-text-color;
|
||||
@ -6421,13 +6550,13 @@ noscript {
|
||||
&__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 {
|
||||
@ -6538,6 +6667,16 @@ noscript {
|
||||
flex: 0 0 auto;
|
||||
padding: 10px;
|
||||
padding-top: 12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__unread {
|
||||
display: inline-block;
|
||||
background: $highlight-text-color;
|
||||
border-radius: 50%;
|
||||
width: 0.625rem;
|
||||
height: 0.625rem;
|
||||
margin: -.1ex .15em .1ex;
|
||||
}
|
||||
|
||||
&__content {
|
||||
@ -6585,6 +6724,205 @@ noscript {
|
||||
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;
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
padding-right: 15px + 18px;
|
||||
position: relative;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
word-wrap: break-word;
|
||||
font-weight: 400;
|
||||
|
||||
&__range {
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
&__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 {
|
||||
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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
color: lighten($darker-text-color, 4%);
|
||||
transition: all 200ms ease-out;
|
||||
transition-property: background-color, color;
|
||||
}
|
||||
}
|
||||
|
||||
&--empty {
|
||||
.emoji-button {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.drawer__inner__mastodon svg#hometownlogo {
|
||||
|
||||
@ -704,7 +704,7 @@
|
||||
}
|
||||
|
||||
.counter {
|
||||
width: 33.3%;
|
||||
min-width: 33.3%;
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
color: $darker-text-color;
|
||||
|
||||
@ -222,6 +222,12 @@ code {
|
||||
}
|
||||
}
|
||||
|
||||
.input.datetime .label_input select {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
flex: 0;
|
||||
}
|
||||
|
||||
.required abbr {
|
||||
text-decoration: none;
|
||||
color: lighten($error-value-color, 12%);
|
||||
@ -513,6 +519,10 @@ code {
|
||||
&__overlay-area {
|
||||
position: relative;
|
||||
|
||||
&__blurred form {
|
||||
filter: blur(2px);
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -523,8 +533,10 @@ code {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: rgba($ui-base-color, 0.65);
|
||||
backdrop-filter: blur(2px);
|
||||
border-radius: 4px;
|
||||
margin-left: -4px;
|
||||
margin-top: -4px;
|
||||
padding: 4px;
|
||||
|
||||
&__content {
|
||||
text-align: center;
|
||||
|
||||
@ -91,6 +91,23 @@
|
||||
border-color: $valid-value-color;
|
||||
background: $valid-value-color;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
border-width: 4px;
|
||||
background: none;
|
||||
}
|
||||
|
||||
&::-moz-focus-inner {
|
||||
outline: 0 !important;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
outline: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&__number {
|
||||
@ -160,6 +177,10 @@
|
||||
button,
|
||||
select {
|
||||
flex: 1 1 50%;
|
||||
|
||||
&:focus {
|
||||
border-color: $highlight-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -149,10 +149,6 @@ a.table-action-link {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $no-gap-breakpoint) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__actions,
|
||||
@ -174,10 +170,6 @@ a.table-action-link {
|
||||
text-align: right;
|
||||
padding-right: 16px - 5px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $no-gap-breakpoint) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__form {
|
||||
@ -198,7 +190,7 @@ a.table-action-link {
|
||||
background: darken($ui-base-color, 4%);
|
||||
|
||||
@media screen and (max-width: $no-gap-breakpoint) {
|
||||
&:first-child {
|
||||
.optional &:first-child {
|
||||
border-top: 1px solid darken($ui-base-color, 8%);
|
||||
}
|
||||
}
|
||||
@ -264,6 +256,13 @@ a.table-action-link {
|
||||
}
|
||||
}
|
||||
|
||||
&.optional .batch-table__toolbar,
|
||||
&.optional .batch-table__row__select {
|
||||
@media screen and (max-width: $no-gap-breakpoint) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.status__content {
|
||||
padding-top: 0;
|
||||
|
||||
|
||||
@ -6,6 +6,8 @@ $error-red: #df405a !default; // Cerise
|
||||
$warning-red: #ff5050 !default; // Sunset Orange
|
||||
$gold-star: #ca8f04 !default; // Dark Goldenrod
|
||||
|
||||
$red-bookmark: $warning-red;
|
||||
|
||||
// Values from the classic Mastodon UI
|
||||
$classic-base-color: #282c37; // Midnight Express
|
||||
$classic-primary-color: #9baec8; // Echo Blue
|
||||
|
||||
Reference in New Issue
Block a user