|
@@ -1,8 +1,8 @@
|
|
|
@import 'variables';
|
|
|
|
|
|
.app-body {
|
|
|
- -webkit-overflow-scrolling: touch;
|
|
|
- -ms-overflow-style: -ms-autohiding-scrollbar;
|
|
|
+ -webkit-overflow-scrolling: touch;
|
|
|
+ -ms-overflow-style: -ms-autohiding-scrollbar;
|
|
|
}
|
|
|
|
|
|
.button {
|
|
@@ -91,7 +91,9 @@
|
|
|
cursor: pointer;
|
|
|
transition: color 100ms ease-in;
|
|
|
|
|
|
- &:hover, &:active, &:focus {
|
|
|
+ &:hover,
|
|
|
+ &:active,
|
|
|
+ &:focus {
|
|
|
color: lighten($color1, 33%);
|
|
|
transition: color 200ms ease-out;
|
|
|
}
|
|
@@ -109,14 +111,18 @@
|
|
|
border: 0;
|
|
|
}
|
|
|
|
|
|
- &::-moz-focus-inner, &:focus, &:active {
|
|
|
+ &::-moz-focus-inner,
|
|
|
+ &:focus,
|
|
|
+ &:active {
|
|
|
outline: 0 !important;
|
|
|
}
|
|
|
|
|
|
&.inverted {
|
|
|
color: lighten($color1, 33%);
|
|
|
|
|
|
- &:hover, &:active, &:focus {
|
|
|
+ &:hover,
|
|
|
+ &:active,
|
|
|
+ &:focus {
|
|
|
color: lighten($color1, 26%);
|
|
|
}
|
|
|
|
|
@@ -154,7 +160,9 @@
|
|
|
outline: 0;
|
|
|
transition: color 100ms ease-in;
|
|
|
|
|
|
- &:hover, &:active, &:focus {
|
|
|
+ &:hover,
|
|
|
+ &:active,
|
|
|
+ &:focus {
|
|
|
color: lighten($color1, 26%);
|
|
|
transition: color 200ms ease-out;
|
|
|
}
|
|
@@ -172,7 +180,9 @@
|
|
|
border: 0;
|
|
|
}
|
|
|
|
|
|
- &::-moz-focus-inner, &:focus, &:active {
|
|
|
+ &::-moz-focus-inner,
|
|
|
+ &:focus,
|
|
|
+ &:active {
|
|
|
outline: 0 !important;
|
|
|
}
|
|
|
}
|
|
@@ -181,15 +191,15 @@
|
|
|
color: $color4;
|
|
|
}
|
|
|
|
|
|
-.dropdown--active:after {
|
|
|
+.dropdown--active::after {
|
|
|
content: "";
|
|
|
display: block;
|
|
|
position: absolute;
|
|
|
width: 0;
|
|
|
height: 0;
|
|
|
border-style: solid;
|
|
|
- border-width: 0 4.5px 7.8px 4.5px;
|
|
|
- border-color: transparent transparent $color2 transparent;
|
|
|
+ border-width: 0 4.5px 7.8px;
|
|
|
+ border-color: transparent transparent $color2;
|
|
|
bottom: 8px;
|
|
|
right: 104px;
|
|
|
}
|
|
@@ -202,7 +212,7 @@
|
|
|
}
|
|
|
|
|
|
.ellipsis {
|
|
|
- &:after {
|
|
|
+ &::after {
|
|
|
content: "…";
|
|
|
}
|
|
|
}
|
|
@@ -235,7 +245,9 @@
|
|
|
font-weight: 500;
|
|
|
text-decoration: underline;
|
|
|
|
|
|
- &:hover, &:active, &:focus {
|
|
|
+ &:hover,
|
|
|
+ &:active,
|
|
|
+ &:focus {
|
|
|
text-decoration: none;
|
|
|
}
|
|
|
}
|
|
@@ -246,7 +258,7 @@
|
|
|
font-family: inherit;
|
|
|
font-size: 14px;
|
|
|
background: $color5;
|
|
|
- border-radius: 0 0 4px 0;
|
|
|
+ border-radius: 0 0 4px;
|
|
|
}
|
|
|
|
|
|
.compose-form__buttons-wrapper {
|
|
@@ -320,7 +332,8 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.compose-form__textarea, .follow-form__input {
|
|
|
+.compose-form__textarea,
|
|
|
+.follow-form__input {
|
|
|
background: $color5;
|
|
|
|
|
|
&:disabled {
|
|
@@ -331,8 +344,8 @@
|
|
|
.compose-form__autosuggest-wrapper {
|
|
|
position: relative;
|
|
|
|
|
|
- .dropdown--active:after {
|
|
|
- border-color: transparent transparent $color5 transparent;
|
|
|
+ .dropdown--active::after {
|
|
|
+ border-color: transparent transparent $color5;
|
|
|
bottom: -1px;
|
|
|
right: 8px;
|
|
|
}
|
|
@@ -467,7 +480,7 @@ a.status__content__spoiler-link {
|
|
|
color: lighten($color1, 8%);
|
|
|
font-weight: 500;
|
|
|
font-size: 11px;
|
|
|
- padding: 0px 6px;
|
|
|
+ padding: 0 6px;
|
|
|
text-transform: uppercase;
|
|
|
line-height: inherit;
|
|
|
}
|
|
@@ -784,7 +797,7 @@ a.status__content__spoiler-link {
|
|
|
right: initial;
|
|
|
}
|
|
|
|
|
|
- &:after {
|
|
|
+ &::after {
|
|
|
bottom: initial;
|
|
|
margin-left: 11px;
|
|
|
margin-top: -7px;
|
|
@@ -964,12 +977,12 @@ a.status__content__spoiler-link {
|
|
|
position: absolute;
|
|
|
|
|
|
.star-icon {
|
|
|
- color: #ca8f04;
|
|
|
+ color: $color10;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.star-icon.active {
|
|
|
- color: #ca8f04;
|
|
|
+ color: $color10;
|
|
|
}
|
|
|
|
|
|
.notification__display-name {
|
|
@@ -1006,7 +1019,8 @@ a.status__content__spoiler-link {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.transparent-background, .imageloader {
|
|
|
+.transparent-background,
|
|
|
+.imageloader {
|
|
|
background: url('../images/void.png');
|
|
|
}
|
|
|
|
|
@@ -1140,7 +1154,7 @@ a.status__content__spoiler-link {
|
|
|
flex-direction: row;
|
|
|
justify-content: flex-start;
|
|
|
overflow-x: auto;
|
|
|
- position: relative;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
|
|
|
@media screen and (min-width: 360px) {
|
|
@@ -1190,7 +1204,8 @@ a.status__content__spoiler-link {
|
|
|
border-bottom: 2px solid transparent;
|
|
|
}
|
|
|
|
|
|
-.column, .drawer {
|
|
|
+.column,
|
|
|
+.drawer {
|
|
|
flex: 1 1 100%;
|
|
|
overflow: hidden;
|
|
|
}
|
|
@@ -1207,7 +1222,8 @@ a.status__content__spoiler-link {
|
|
|
}
|
|
|
|
|
|
@media screen and (max-width: 1024px) {
|
|
|
- .column, .drawer {
|
|
|
+ .column,
|
|
|
+ .drawer {
|
|
|
width: 100%;
|
|
|
padding: 0;
|
|
|
}
|
|
@@ -1216,7 +1232,8 @@ a.status__content__spoiler-link {
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
|
|
|
- .search__input, .autosuggest-textarea__textarea {
|
|
|
+ .search__input,
|
|
|
+ .autosuggest-textarea__textarea {
|
|
|
font-size: 16px;
|
|
|
}
|
|
|
}
|
|
@@ -1226,7 +1243,8 @@ a.status__content__spoiler-link {
|
|
|
padding: 0;
|
|
|
}
|
|
|
|
|
|
- .column, .drawer {
|
|
|
+ .column,
|
|
|
+ .drawer {
|
|
|
flex: 0 0 auto;
|
|
|
padding: 10px;
|
|
|
padding-left: 5px;
|
|
@@ -1242,7 +1260,8 @@ a.status__content__spoiler-link {
|
|
|
}
|
|
|
|
|
|
.columns-area > div {
|
|
|
- .column, .drawer {
|
|
|
+ .column,
|
|
|
+ .drawer {
|
|
|
padding-left: 5px;
|
|
|
padding-right: 5px;
|
|
|
}
|
|
@@ -1257,7 +1276,8 @@ a.status__content__spoiler-link {
|
|
|
}
|
|
|
|
|
|
@media screen and (min-width: 1900px) {
|
|
|
- .column, .drawer {
|
|
|
+ .column,
|
|
|
+ .drawer {
|
|
|
width: 400px;
|
|
|
border-radius: 4px;
|
|
|
height: 96vh;
|
|
@@ -1346,7 +1366,9 @@ a.status__content__spoiler-link {
|
|
|
color: $color4;
|
|
|
}
|
|
|
|
|
|
- &:hover, &:focus, &:active {
|
|
|
+ &:hover,
|
|
|
+ &:focus,
|
|
|
+ &:active {
|
|
|
background: lighten($color1, 14%);
|
|
|
transition: all 100ms linear;
|
|
|
}
|
|
@@ -1508,8 +1530,8 @@ a.status__content__spoiler-link {
|
|
|
position: absolute;
|
|
|
width: 14px;
|
|
|
height: 10px;
|
|
|
- top: 0px;
|
|
|
- bottom: 0px;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
margin-top: auto;
|
|
|
margin-bottom: auto;
|
|
|
line-height: 0;
|
|
@@ -1527,8 +1549,8 @@ a.status__content__spoiler-link {
|
|
|
position: absolute;
|
|
|
width: 10px;
|
|
|
height: 10px;
|
|
|
- top: 0px;
|
|
|
- bottom: 0px;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
margin-top: auto;
|
|
|
margin-bottom: auto;
|
|
|
line-height: 0;
|
|
@@ -1696,7 +1718,7 @@ a.status__content__spoiler-link {
|
|
|
}
|
|
|
|
|
|
.character-counter--over {
|
|
|
- color: #ff5050;
|
|
|
+ color: $color9;
|
|
|
}
|
|
|
|
|
|
.getting-started__wrapper {
|
|
@@ -1706,7 +1728,7 @@ a.status__content__spoiler-link {
|
|
|
.getting-started {
|
|
|
box-sizing: border-box;
|
|
|
padding-bottom: 235px;
|
|
|
- background: url('../images/mastodon-getting-started.png') no-repeat 0 100%/contain local;
|
|
|
+ background: url('../images/mastodon-getting-started.png') no-repeat 0 100% / contain local;
|
|
|
flex: 1 0 auto;
|
|
|
|
|
|
p {
|
|
@@ -1727,10 +1749,11 @@ a.status__content__spoiler-link {
|
|
|
display: block;
|
|
|
font-family: inherit;
|
|
|
margin-bottom: 10px;
|
|
|
- padding: 7px 0px;
|
|
|
+ padding: 7px 0;
|
|
|
width: 100%;
|
|
|
|
|
|
- &:focus, &:active {
|
|
|
+ &:focus,
|
|
|
+ &:active {
|
|
|
color: $color5;
|
|
|
border-bottom-color: $color4;
|
|
|
}
|
|
@@ -1776,7 +1799,9 @@ button.icon-button.active i.fa-retweet {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.status-card-video, .status-card-rich, .status-card-photo {
|
|
|
+.status-card-video,
|
|
|
+.status-card-rich,
|
|
|
+.status-card-photo {
|
|
|
margin-top: 14px;
|
|
|
overflow: hidden;
|
|
|
|
|
@@ -1850,7 +1875,7 @@ button.icon-button.active i.fa-retweet {
|
|
|
}
|
|
|
|
|
|
.status-card__image-image {
|
|
|
- border-radius: 4px 0px 0px 4px;
|
|
|
+ border-radius: 4px 0 0 4px;
|
|
|
display: block;
|
|
|
height: auto;
|
|
|
margin: 0;
|
|
@@ -1913,7 +1938,8 @@ button.icon-button.active i.fa-retweet {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- &:focus, &:active {
|
|
|
+ &:focus,
|
|
|
+ &:active {
|
|
|
outline: 0;
|
|
|
}
|
|
|
}
|
|
@@ -1989,7 +2015,7 @@ button.icon-button.active i.fa-retweet {
|
|
|
.spoiler-button {
|
|
|
left: 4px;
|
|
|
position: absolute;
|
|
|
- text-shadow: 0px 1px 1px #000, 1px 0px 1px #000;
|
|
|
+ text-shadow: 0 1px 1px $color8, 1px 0 1px $color8;
|
|
|
top: 4px;
|
|
|
z-index: 100;
|
|
|
}
|
|
@@ -2004,7 +2030,7 @@ button.icon-button.active i.fa-retweet {
|
|
|
border-bottom: 1px solid lighten($color1, 8%);
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
- padding: 10px 0px;
|
|
|
+ padding: 10px 0;
|
|
|
}
|
|
|
|
|
|
.account--panel__button,
|
|
@@ -2028,7 +2054,7 @@ button.icon-button.active i.fa-retweet {
|
|
|
|
|
|
.modal-container__nav {
|
|
|
align-items: center;
|
|
|
- background: rgba(0, 0, 0, 0.5);
|
|
|
+ background: rgba($color8, 0.5);
|
|
|
box-sizing: border-box;
|
|
|
color: $color5;
|
|
|
cursor: pointer;
|
|
@@ -2111,7 +2137,8 @@ button.icon-button.active i.fa-retweet {
|
|
|
resize: vertical;
|
|
|
width: 100%;
|
|
|
|
|
|
- &:active, &:focus {
|
|
|
+ &:active,
|
|
|
+ &:focus {
|
|
|
border-bottom-color: $color4;
|
|
|
background: rgba($color8, 0.1);
|
|
|
}
|
|
@@ -2148,7 +2175,8 @@ button.icon-button.active i.fa-retweet {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.status-list__unread-indicator, .notifications__unread-indicator {
|
|
|
+.status-list__unread-indicator,
|
|
|
+.notifications__unread-indicator {
|
|
|
position: absolute;
|
|
|
top: 35px;
|
|
|
left: 0;
|
|
@@ -2165,6 +2193,7 @@ button.icon-button.active i.fa-retweet {
|
|
|
0% {
|
|
|
opacity: 1;
|
|
|
}
|
|
|
+
|
|
|
100% {
|
|
|
opacity: 0.5;
|
|
|
}
|
|
@@ -2212,14 +2241,16 @@ button.icon-button.active i.fa-retweet {
|
|
|
height: 18px;
|
|
|
}
|
|
|
|
|
|
- img, svg {
|
|
|
+ img,
|
|
|
+ svg {
|
|
|
width: 18px;
|
|
|
height: 18px;
|
|
|
filter: grayscale(100%);
|
|
|
}
|
|
|
|
|
|
&:hover {
|
|
|
- img, svg {
|
|
|
+ img,
|
|
|
+ svg {
|
|
|
filter: grayscale(0);
|
|
|
}
|
|
|
}
|
|
@@ -2227,7 +2258,8 @@ button.icon-button.active i.fa-retweet {
|
|
|
&.active {
|
|
|
border-bottom-color: $color4;
|
|
|
|
|
|
- img, svg {
|
|
|
+ img,
|
|
|
+ svg {
|
|
|
filter: grayscale(0);
|
|
|
}
|
|
|
}
|
|
@@ -2295,7 +2327,7 @@ button.icon-button.active i.fa-retweet {
|
|
|
position: relative;
|
|
|
cursor: pointer;
|
|
|
|
|
|
- &.active:after {
|
|
|
+ &.active::after {
|
|
|
content: "";
|
|
|
display: block;
|
|
|
position: absolute;
|
|
@@ -2340,14 +2372,16 @@ button.icon-button.active i.fa-retweet {
|
|
|
}
|
|
|
|
|
|
.emoji-row .emoji {
|
|
|
- img, svg {
|
|
|
+ img,
|
|
|
+ svg {
|
|
|
transition: transform 60ms ease-in-out;
|
|
|
}
|
|
|
|
|
|
&:hover {
|
|
|
background: lighten($color2, 3%);
|
|
|
|
|
|
- img, svg {
|
|
|
+ img,
|
|
|
+ svg {
|
|
|
transform: translateZ(0) scale(1.2);
|
|
|
}
|
|
|
}
|
|
@@ -2460,7 +2494,8 @@ button.icon-button.active i.fa-retweet {
|
|
|
.emoji-button {
|
|
|
outline: 0;
|
|
|
|
|
|
- &:active, &:focus {
|
|
|
+ &:active,
|
|
|
+ &:focus {
|
|
|
outline: 0 !important;
|
|
|
}
|
|
|
|
|
@@ -2474,7 +2509,9 @@ button.icon-button.active i.fa-retweet {
|
|
|
margin-top: 2px;
|
|
|
}
|
|
|
|
|
|
- &:hover, &:active, &:focus {
|
|
|
+ &:hover,
|
|
|
+ &:active,
|
|
|
+ &:focus {
|
|
|
img {
|
|
|
opacity: 1;
|
|
|
filter: none;
|
|
@@ -2498,7 +2535,7 @@ button.icon-button.active i.fa-retweet {
|
|
|
top: 27px;
|
|
|
width: 230px;
|
|
|
background: $color5;
|
|
|
- border-radius: 0 4px 4px 4px;
|
|
|
+ border-radius: 0 4px 4px;
|
|
|
z-index: 2;
|
|
|
overflow: hidden;
|
|
|
}
|
|
@@ -2509,7 +2546,8 @@ button.icon-button.active i.fa-retweet {
|
|
|
cursor: pointer;
|
|
|
display: flex;
|
|
|
|
|
|
- &:hover, &.active {
|
|
|
+ &:hover,
|
|
|
+ &.active {
|
|
|
background: $color4;
|
|
|
color: $color5;
|
|
|
|
|
@@ -2582,7 +2620,9 @@ button.icon-button.active i.fa-retweet {
|
|
|
border: 0;
|
|
|
}
|
|
|
|
|
|
- &::-moz-focus-inner, &:focus, &:active {
|
|
|
+ &::-moz-focus-inner,
|
|
|
+ &:focus,
|
|
|
+ &:active {
|
|
|
outline: 0 !important;
|
|
|
}
|
|
|
|
|
@@ -2656,7 +2696,9 @@ button.icon-button.active i.fa-retweet {
|
|
|
color: $color2;
|
|
|
text-decoration: none;
|
|
|
|
|
|
- &:hover, &:active, &:focus {
|
|
|
+ &:hover,
|
|
|
+ &:active,
|
|
|
+ &:focus {
|
|
|
color: lighten($color2, 4%);
|
|
|
text-decoration: underline;
|
|
|
}
|
|
@@ -2671,7 +2713,7 @@ button.icon-button.active i.fa-retweet {
|
|
|
z-index: 9999;
|
|
|
opacity: 0;
|
|
|
background: rgba($color8, 0.7);
|
|
|
- transform: translateZ(0px);
|
|
|
+ transform: translateZ(0);
|
|
|
}
|
|
|
|
|
|
.modal-root__container {
|
|
@@ -2702,7 +2744,8 @@ button.icon-button.active i.fa-retweet {
|
|
|
max-height: 80vh;
|
|
|
position: relative;
|
|
|
|
|
|
- img, video {
|
|
|
+ img,
|
|
|
+ video {
|
|
|
max-width: 80vw;
|
|
|
max-height: 80vh;
|
|
|
}
|
|
@@ -2781,11 +2824,14 @@ button.icon-button.active i.fa-retweet {
|
|
|
font-size: 14px;
|
|
|
font-weight: 500;
|
|
|
|
|
|
- &:hover, &:focus, &:active {
|
|
|
+ &:hover,
|
|
|
+ &:focus,
|
|
|
+ &:active {
|
|
|
color: darken($color2, 38%);
|
|
|
}
|
|
|
|
|
|
- &.onboarding-modal__done, &.onboarding-modal__next {
|
|
|
+ &.onboarding-modal__done,
|
|
|
+ &.onboarding-modal__next {
|
|
|
color: $color4;
|
|
|
}
|
|
|
}
|
|
@@ -2830,7 +2876,9 @@ button.icon-button.active i.fa-retweet {
|
|
|
a {
|
|
|
color: $color4;
|
|
|
|
|
|
- &:hover, &:focus, &:active {
|
|
|
+ &:hover,
|
|
|
+ &:focus,
|
|
|
+ &:active {
|
|
|
color: lighten($color4, 4%);
|
|
|
}
|
|
|
}
|
|
@@ -2861,7 +2909,7 @@ button.icon-button.active i.fa-retweet {
|
|
|
}
|
|
|
|
|
|
.onboarding-modal__page-one__elephant-friend {
|
|
|
- background: url('../images/elephant-friend.png') no-repeat center center/contain;
|
|
|
+ background: url('../images/elephant-friend.png') no-repeat center center / contain;
|
|
|
width: 147px;
|
|
|
height: 160px;
|
|
|
margin-right: 10px;
|
|
@@ -2983,7 +3031,8 @@ button.icon-button.active i.fa-retweet {
|
|
|
margin-left: 10px;
|
|
|
}
|
|
|
|
|
|
-.boost-modal, .confirmation-modal {
|
|
|
+.boost-modal,
|
|
|
+.confirmation-modal {
|
|
|
background: lighten($color2, 8%);
|
|
|
color: $color1;
|
|
|
border-radius: 8px;
|
|
@@ -3018,7 +3067,8 @@ button.icon-button.active i.fa-retweet {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.boost-modal__action-bar, .confirmation-modal__action-bar {
|
|
|
+.boost-modal__action-bar,
|
|
|
+.confirmation-modal__action-bar {
|
|
|
display: flex;
|
|
|
background: $color2;
|
|
|
padding: 10px;
|
|
@@ -3065,7 +3115,9 @@ button.icon-button.active i.fa-retweet {
|
|
|
font-size: 14px;
|
|
|
font-weight: 500;
|
|
|
|
|
|
- &:hover, &:focus, &:active {
|
|
|
+ &:hover,
|
|
|
+ &:focus,
|
|
|
+ &:active {
|
|
|
color: darken($color2, 38%);
|
|
|
}
|
|
|
}
|
|
@@ -3226,7 +3278,7 @@ button.icon-button.active i.fa-retweet {
|
|
|
|
|
|
/* Status Video Player */
|
|
|
.status__video-player {
|
|
|
- background: #000;
|
|
|
+ background: $color8;
|
|
|
box-sizing: border-box;
|
|
|
cursor: default; /* May not be needed */
|
|
|
margin-top: 8px;
|
|
@@ -3246,18 +3298,18 @@ button.icon-button.active i.fa-retweet {
|
|
|
|
|
|
.status__video-player-expand,
|
|
|
.status__video-player-mute {
|
|
|
- color: #fff;
|
|
|
+ color: $color5;
|
|
|
opacity: 0.8;
|
|
|
position: absolute;
|
|
|
right: 4px;
|
|
|
- text-shadow: 0px 1px 1px #000, 1px 0px 1px #000;
|
|
|
+ text-shadow: 0 1px 1px $color8, 1px 0 1px $color8;
|
|
|
}
|
|
|
|
|
|
.status__video-player-spoiler {
|
|
|
- color: #fff;
|
|
|
+ color: $color5;
|
|
|
left: 4px;
|
|
|
position: absolute;
|
|
|
- text-shadow: 0px 1px 1px #000, 1px 0px 1px #000;
|
|
|
+ text-shadow: 0 1px 1px $color8, 1px 0 1px $color8;
|
|
|
top: 4px;
|
|
|
z-index: 100;
|
|
|
}
|
|
@@ -3281,7 +3333,7 @@ button.icon-button.active i.fa-retweet {
|
|
|
|
|
|
.media-spoiler-video-play-icon {
|
|
|
border-radius: 100px;
|
|
|
- color: rgba(255, 255, 255, 0.8);
|
|
|
+ color: rgba($color5, 0.8);
|
|
|
font-size: 36px;
|
|
|
left: 50%;
|
|
|
padding: 5px;
|