transition: all 200ms ease-out;
}
+ &--destructive {
+ transition: none;
+
+ &:active,
+ &:focus,
+ &:hover {
+ background-color: $error-red;
+ transition: none;
+ }
+ }
+
&:disabled {
background-color: $ui-primary-color;
cursor: default;
.dropdown-menu {
position: absolute;
- transform-origin: 50% 0;
}
.invisible {
.compose-form__warning {
color: $inverted-text-color;
- margin-bottom: 15px;
+ margin-bottom: 10px;
background: $ui-primary-color;
box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3);
padding: 8px 10px;
position: relative;
}
+ .spoiler-input {
+ height: 0;
+ transform-origin: bottom;
+ opacity: 0.0;
+
+ &.spoiler-input--visible {
+ height: 47px;
+ opacity: 1.0;
+ }
+ }
+
.autosuggest-textarea__textarea,
.spoiler-input__input {
display: block;
.character-counter {
cursor: default;
- font-family: 'mastodon-font-sans-serif', sans-serif;
+ font-family: $font-sans-serif, sans-serif;
font-size: 14px;
font-weight: 600;
color: $lighter-text-color;
}
}
+.no-reduce-motion .spoiler-input {
+ transition: height 0.4s ease, opacity 0.4s ease;
+}
+
.emojione {
font-size: inherit;
vertical-align: middle;
}
.reply-indicator {
- border-radius: 4px 4px 0 0;
- position: relative;
- bottom: -2px;
+ border-radius: 4px;
+ margin-bottom: 10px;
background: $ui-primary-color;
padding: 10px;
}
.status__content,
.reply-indicator__content {
+ position: relative;
font-size: 15px;
line-height: 20px;
word-wrap: break-word;
font-weight: 400;
overflow: hidden;
+ text-overflow: ellipsis;
white-space: pre-wrap;
padding-top: 2px;
+ color: $primary-text-color;
&:focus {
outline: 0;
}
}
+.status__content.status__content--collapsed {
+ max-height: 20px * 15; // 15 lines is roughly above 500 characters
+}
+
+.status__content__read-more-button {
+ display: block;
+ font-size: 15px;
+ line-height: 20px;
+ color: lighten($ui-highlight-color, 8%);
+ border: 0;
+ background: transparent;
+ padding: 0;
+ padding-top: 8px;
+
+ &:hover,
+ &:active {
+ text-decoration: underline;
+ }
+}
+
.status__content__spoiler-link {
display: inline-block;
border-radius: 2px;
vertical-align: middle;
}
+.status__wrapper--filtered {
+ color: $dark-text-color;
+ border: 0;
+ font-size: inherit;
+ text-align: center;
+ line-height: inherit;
+ margin: 0;
+ padding: 15px;
+ box-sizing: border-box;
+ width: 100%;
+ clear: both;
+ border-bottom: 1px solid lighten($ui-base-color, 8%);
+}
+
.status__prepend-icon-wrapper {
left: -26px;
position: absolute;
padding: 8px 10px;
padding-left: 68px;
position: relative;
- min-height: 48px;
+ min-height: 54px;
border-bottom: 1px solid lighten($ui-base-color, 8%);
cursor: default;
margin-top: 8px;
}
- &.status-direct {
+ &.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,
+.notification__relative_time {
color: $dark-text-color;
float: right;
font-size: 14px;
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 {
- float: left;
margin-right: 18px;
}
.status__action-bar-dropdown {
- float: left;
height: 23.15px;
width: 23.15px;
}
background: lighten($ui-base-color, 4%);
padding: 14px 10px;
+ &--flex {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ align-items: flex-start;
+
+ .status__content,
+ .detailed-status__meta {
+ flex: 100%;
+ }
+ }
+
.status__content {
font-size: 19px;
line-height: 24px;
vertical-align: middle;
margin-right: 5px;
}
+
+ &-composite {
+ @include avatar-radius();
+ overflow: hidden;
+
+ & > div {
+ @include avatar-radius();
+ float: left;
+ position: relative;
+ box-sizing: border-box;
+ }
+ }
}
a .account__avatar {
}
.account__action-bar-dropdown {
- flex: 0 1 calc(50% - 140px);
padding: 10px;
+ .icon-button {
+ vertical-align: middle;
+ }
+
.dropdown--active {
.dropdown__content.dropdown__right {
left: 6px;
display: flex;
flex: 1 1 auto;
line-height: 18px;
+ text-align: center;
}
.account__action-bar__tab {
text-decoration: none;
overflow: hidden;
- flex: 0 1 80px;
- border-left: 1px solid lighten($ui-base-color, 8%);
- padding: 10px 5px;
+ flex: 0 1 100%;
+ border-right: 1px solid lighten($ui-base-color, 8%);
+ padding: 10px 0;
+ border-bottom: 4px solid transparent;
+
+ &.active {
+ border-bottom: 4px solid $ui-highlight-color;
+ }
& > span {
display: block;
cursor: default;
color: $darker-text-color;
font-size: 15px;
+ line-height: 22px;
position: relative;
.fa {
}
> span {
- display: block;
+ display: inline;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
+.notification__relative_time {
+ float: right;
+}
+
.display-name {
display: block;
max-width: 100%;
display: flex;
align-items: center;
justify-content: center;
+ flex-direction: column;
.image-loader__preview-canvas {
max-width: $media-modal-media-max-width;
object-fit: contain;
}
- &.image-loader--loading .image-loader__preview-canvas {
- filter: blur(2px);
+ .loading-bar {
+ position: relative;
}
&.image-loader--amorphous .image-loader__preview-canvas {
.navigation-bar {
padding: 10px;
display: flex;
+ align-items: center;
flex-shrink: 0;
cursor: default;
color: $darker-text-color;
text-decoration: none;
}
- .icon-button {
- pointer-events: none;
- opacity: 0;
+ .navigation-bar__actions {
+ position: relative;
+
+ .icon-button.close {
+ position: absolute;
+ pointer-events: none;
+ transform: scale(0.0, 1.0) translate(-100%, 0);
+ opacity: 0;
+ }
+
+ .compose__action-bar .icon-button {
+ pointer-events: auto;
+ transform: scale(1.0, 1.0) translate(0, 0);
+ opacity: 1;
+ }
}
}
.navigation-bar__profile {
flex: 1 1 auto;
margin-left: 8px;
+ line-height: 20px;
+ margin-top: -1px;
overflow: hidden;
}
padding: 4px 0;
border-radius: 4px;
box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
+ z-index: 9999;
ul {
list-style: none;
}
+
+ &.left {
+ transform-origin: 100% 50%;
+ }
+
+ &.top {
+ transform-origin: 50% 100%;
+ }
+
+ &.bottom {
+ transform-origin: 50% 0;
+ }
+
+ &.right {
+ transform-origin: 0 50%;
+ }
}
.dropdown-menu__arrow {
&.top {
bottom: -5px;
- margin-left: -13px;
+ margin-left: -7px;
border-width: 5px 7px 0;
border-top-color: $ui-secondary-color;
}
&.bottom {
top: -5px;
- margin-left: -13px;
+ margin-left: -7px;
border-width: 0 7px 5px;
border-bottom-color: $ui-secondary-color;
}
vertical-align: middle;
}
-.static-content {
- padding: 10px;
- padding-top: 20px;
- color: $dark-text-color;
-
- h1 {
- font-size: 16px;
- font-weight: 500;
- margin-bottom: 40px;
- text-align: center;
- }
-
- p {
- font-size: 13px;
- margin-bottom: 20px;
- }
-}
-
.columns-area {
display: flex;
flex: 1 1 auto;
}
.column {
- width: 330px;
+ width: 350px;
position: relative;
box-sizing: border-box;
display: flex;
margin-bottom: 0;
}
+ .getting-started__wrapper,
+ .getting-started__trends,
.search {
margin-bottom: 10px;
}
@supports(display: grid) { // hack to fix Chrome <57
contain: strict;
}
+
+ &--flex {
+ display: flex;
+ flex-direction: column;
+ }
+
+ &__append {
+ flex: 1 1 auto;
+ position: relative;
+ min-height: 120px;
+ }
}
.scrollable.fullscreen {
cursor: pointer;
flex: 0 0 auto;
font-size: 16px;
+ line-height: inherit;
border: 0;
text-align: unset;
padding: 15px;
}
.getting-started__wrapper,
-.getting_started {
+.getting-started,
+.flex-spacer {
background: $ui-base-color;
}
.getting-started__wrapper {
- position: relative;
- overflow-y: auto;
+ flex: 0 0 auto;
+}
+
+.flex-spacer {
+ flex: 1 1 auto;
}
.getting-started {
- background: $ui-base-color;
- flex: 1 0 auto;
+ color: $dark-text-color;
- p {
- color: $secondary-text-color;
+ &__footer {
+ flex: 0 0 auto;
+ padding: 10px;
+ padding-top: 20px;
+
+ ul {
+ margin-bottom: 10px;
+ }
+
+ ul li {
+ display: inline;
+ }
+
+ p {
+ color: $dark-text-color;
+ font-size: 13px;
+ margin-bottom: 20px;
+
+ a {
+ color: $dark-text-color;
+ text-decoration: underline;
+ }
+ }
+
+ a {
+ text-decoration: none;
+ color: $darker-text-color;
+
+ &:hover,
+ &:focus,
+ &:active {
+ text-decoration: underline;
+ }
+ }
}
- a {
- color: $dark-text-color;
+ &__trends {
+ background: $ui-base-color;
+ flex: 0 1 auto;
+
+ @media screen and (max-height: 810px) {
+ .trends__item:nth-child(3) {
+ display: none;
+ }
+ }
+
+ @media screen and (max-height: 720px) {
+ .trends__item:nth-child(2) {
+ display: none;
+ }
+ }
+
+ @media screen and (max-height: 670px) {
+ display: none;
+ }
+ }
+
+ &__scrollable {
+ max-height: 100%;
+ overflow-y: auto;
}
}
display: block;
margin-top: 5px;
font-size: 13px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
.status-card__image {
flex: 0 0 100px;
background: lighten($ui-base-color, 8%);
position: relative;
+
+ .fa {
+ font-size: 21px;
+ position: absolute;
+ transform-origin: 50% 50%;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
}
.status-card.horizontal {
}
}
+.status-card.compact {
+ border-color: lighten($ui-base-color, 4%);
+
+ &.interactive {
+ border: 0;
+ }
+
+ .status-card__content {
+ padding: 8px;
+ padding-top: 10px;
+ }
+
+ .status-card__title {
+ white-space: nowrap;
+ }
+
+ .status-card__image {
+ flex: 0 0 60px;
+ }
+}
+
+a.status-card.compact:hover {
+ background-color: lighten($ui-base-color, 4%);
+}
+
.status-card__image-image {
border-radius: 4px 0 0 4px;
display: block;
line-height: inherit;
margin: 0;
padding: 15px;
+ box-sizing: border-box;
width: 100%;
clear: both;
+ text-decoration: none;
&:hover {
background: lighten($ui-base-color, 2%);
transform: translateX(-50%);
margin: 82px 0 0 50%;
white-space: nowrap;
- animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
}
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
- width: 0;
- height: 0;
+ width: 42px;
+ height: 42px;
box-sizing: border-box;
+ background-color: transparent;
border: 0 solid lighten($ui-base-color, 26%);
+ border-width: 6px;
border-radius: 50%;
+}
+
+.no-reduce-motion .loading-indicator span {
+ animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000);
+}
+
+.no-reduce-motion .loading-indicator__figure {
animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
display: block;
font-weight: 500;
margin-bottom: 10px;
+
+ .column-settings__hashtag-select {
+ &__control {
+ @include search-input();
+ }
+
+ &__multi-value {
+ background: lighten($ui-base-color, 8%);
+ }
+
+ &__multi-value__label,
+ &__input {
+ color: $darker-text-color;
+ }
+
+ &__indicator-separator,
+ &__dropdown-indicator {
+ display: none;
+ }
+ }
}
.column-settings__row {
line-height: 24px;
}
-.setting-toggle__label,
-.setting-meta__label {
+.setting-toggle__label {
color: $darker-text-color;
display: inline-block;
margin-bottom: 14px;
vertical-align: middle;
}
-.setting-meta__label {
- float: right;
-}
-
.empty-column-indicator,
.error-column {
color: $dark-text-color;
border-radius: 4px;
margin-left: 40px;
overflow: hidden;
- transform-origin: 50% 0;
-}
+
+ &.top {
+ transform-origin: 50% 100%;
+ }
+
+ &.bottom {
+ transform-origin: 50% 0;
+ }
+}
.privacy-dropdown__option {
color: $inverted-text-color;
}
}
+ &.top .privacy-dropdown__value {
+ border-radius: 0 0 4px 4px;
+ }
+
.privacy-dropdown__dropdown {
display: block;
box-shadow: 2px 4px 6px rgba($base-shadow-color, 0.1);
}
.search__input {
- outline: 0;
- box-sizing: border-box;
display: block;
- width: 100%;
- border: none;
padding: 10px;
padding-right: 30px;
- font-family: inherit;
- background: $ui-base-color;
- color: $darker-text-color;
- font-size: 14px;
- margin: 0;
+ @include search-input();
+}
+.search__icon {
&::-moz-focus-inner {
border: 0;
}
&::-moz-focus-inner,
- &:focus,
- &:active {
- outline: 0 !important;
- }
-
&:focus {
- background: lighten($ui-base-color, 4%);
+ outline: 0 !important;
}
- @media screen and (max-width: 600px) {
- font-size: 16px;
- }
-}
-
-.search__icon {
.fa {
position: absolute;
top: 10px;
.search-results__header {
color: $dark-text-color;
background: lighten($ui-base-color, 2%);
- border-bottom: 1px solid darken($ui-base-color, 4%);
padding: 15px;
font-weight: 500;
font-size: 16px;
}
.search-results__section {
- margin-bottom: 20px;
+ margin-bottom: 5px;
h5 {
- position: relative;
-
- &::before {
- content: "";
- display: block;
- position: absolute;
- left: 0;
- right: 0;
- top: 50%;
- width: 100%;
- height: 0;
- border-top: 1px solid lighten($ui-base-color, 8%);
- }
+ background: darken($ui-base-color, 4%);
+ border-bottom: 1px solid lighten($ui-base-color, 8%);
+ cursor: default;
+ display: flex;
+ padding: 15px;
+ font-weight: 500;
+ font-size: 16px;
+ color: $dark-text-color;
- span {
+ .fa {
display: inline-block;
- background: $ui-base-color;
- color: $darker-text-color;
- font-size: 14px;
- font-weight: 500;
- padding: 10px;
- position: relative;
- z-index: 1;
- cursor: default;
+ margin-right: 5px;
}
}
flex-direction: column;
}
-.onboarding-modal__pager {
- height: 80vh;
- width: 80vw;
- max-width: 520px;
- max-height: 470px;
-
- .react-swipeable-view-container > div {
- width: 100%;
- height: 100%;
- box-sizing: border-box;
- display: none;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- display: flex;
- user-select: text;
- }
-}
-
.error-modal__body {
height: 80vh;
width: 80vw;
text-align: center;
}
-@media screen and (max-width: 550px) {
- .onboarding-modal {
- width: 100%;
- height: 100%;
- border-radius: 0;
- }
-
- .onboarding-modal__pager {
- width: 100%;
- height: auto;
- max-width: none;
- max-height: none;
- flex: 1 1 auto;
- }
-}
-
.onboarding-modal__paginator,
.error-modal__footer {
flex: 0 0 auto;
justify-content: center;
}
-.onboarding-modal__dots {
- flex: 1 1 auto;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.onboarding-modal__dot {
- width: 14px;
- height: 14px;
- border-radius: 14px;
- background: darken($ui-secondary-color, 16%);
- margin: 0 3px;
- cursor: pointer;
-
- &:hover {
- background: darken($ui-secondary-color, 18%);
- }
-
- &.active {
- cursor: default;
- background: darken($ui-secondary-color, 24%);
- }
-}
-
-.onboarding-modal__page__wrapper {
- pointer-events: none;
- padding: 25px;
- padding-bottom: 0;
-
- &.onboarding-modal__page__wrapper--active {
- pointer-events: auto;
- }
-}
-
-.onboarding-modal__page {
- cursor: default;
- line-height: 21px;
-
- h1 {
- font-size: 18px;
- font-weight: 500;
- color: $inverted-text-color;
- margin-bottom: 20px;
- }
-
- a {
- color: $highlight-text-color;
-
- &:hover,
- &:focus,
- &:active {
- color: lighten($highlight-text-color, 4%);
- }
- }
-
- .navigation-bar a {
- color: inherit;
- }
-
- p {
- font-size: 16px;
- color: $lighter-text-color;
- margin-top: 10px;
- margin-bottom: 10px;
-
- &:last-child {
- margin-bottom: 0;
- }
-
- strong {
- font-weight: 500;
- background: $ui-base-color;
- color: $secondary-text-color;
- border-radius: 4px;
- font-size: 14px;
- padding: 3px 6px;
-
- @each $lang in $cjk-langs {
- &:lang(#{$lang}) {
- font-weight: 700;
- }
- }
- }
- }
-}
-
-.onboarding-modal__page__wrapper-0 {
- background: url('../images/elephant_ui_greeting.svg') no-repeat left bottom / auto 250px;
- height: 100%;
- padding: 0;
-}
-
-.onboarding-modal__page-one {
- &__lead {
- padding: 65px;
- padding-top: 45px;
- padding-bottom: 0;
- margin-bottom: 10px;
-
- h1 {
- font-size: 26px;
- line-height: 36px;
- margin-bottom: 8px;
- }
-
- p {
- margin-bottom: 0;
- }
- }
-
- &__extra {
- padding-right: 65px;
- padding-left: 185px;
- text-align: center;
- }
-}
-
.display-case {
text-align: center;
font-size: 15px;
}
}
-.onboarding-modal__page-two,
-.onboarding-modal__page-three,
-.onboarding-modal__page-four,
-.onboarding-modal__page-five {
- p {
- text-align: left;
- }
-
- .figure {
- background: darken($ui-base-color, 8%);
- color: $secondary-text-color;
- margin-bottom: 20px;
- border-radius: 4px;
- padding: 10px;
- text-align: center;
- font-size: 14px;
- box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.3);
-
- .onboarding-modal__image {
- border-radius: 4px;
- margin-bottom: 10px;
- }
-
- &.non-interactive {
- pointer-events: none;
- text-align: left;
- }
- }
-}
-
-.onboarding-modal__page-four__columns {
- .row {
- display: flex;
- margin-bottom: 20px;
-
- & > div {
- flex: 1 1 0;
- margin: 0 10px;
-
- &:first-child {
- margin-left: 0;
- }
-
- &:last-child {
- margin-right: 0;
- }
-
- p {
- text-align: center;
- }
- }
-
- &:last-child {
- margin-bottom: 0;
- }
- }
-
- .column-header {
- color: $primary-text-color;
- }
-}
-
-@media screen and (max-width: 320px) and (max-height: 600px) {
- .onboarding-modal__page p {
- font-size: 14px;
- line-height: 20px;
- }
-
- .onboarding-modal__page-two .figure,
- .onboarding-modal__page-three .figure,
- .onboarding-modal__page-four .figure,
- .onboarding-modal__page-five .figure {
- font-size: 12px;
- margin-bottom: 10px;
- }
-
- .onboarding-modal__page-four__columns .row {
- margin-bottom: 10px;
- }
-
- .onboarding-modal__page-four__columns .column-header {
- padding: 5px;
- font-size: 12px;
- }
-}
-
.onboard-sliders {
display: inline-block;
max-width: 30px;
color: $highlight-text-color;
}
+ .status__content,
+ .status__content p {
+ color: $inverted-text-color;
+ }
+
@media screen and (max-width: 480px) {
max-height: 10vh;
}
z-index: 5;
}
+.detailed,
+.fullscreen {
+ .video-player__volume__current,
+ .video-player__volume::before {
+ bottom: 27px;
+ }
+
+ .video-player__volume__handle {
+ bottom: 23px;
+ }
+
+}
+
.video-player {
overflow: hidden;
position: relative;
height: 100%;
z-index: 4;
border: 0;
- background: $base-shadow-color;
+ background: $base-overlay-background;
color: $darker-text-color;
transition: none;
pointer-events: none;
&__time-current {
color: $white;
- margin-left: 10px;
+ margin-left: 60px;
}
&__time-sep {
color: $white;
}
+ &__volume {
+ cursor: pointer;
+ height: 24px;
+ display: inline;
+
+ &::before {
+ content: "";
+ width: 50px;
+ background: rgba($white, 0.35);
+ border-radius: 4px;
+ display: block;
+ position: absolute;
+ height: 4px;
+ left: 70px;
+ bottom: 20px;
+ }
+
+ &__current {
+ display: block;
+ position: absolute;
+ height: 4px;
+ border-radius: 4px;
+ left: 70px;
+ bottom: 20px;
+ background: lighten($ui-highlight-color, 8%);
+ }
+
+ &__handle {
+ position: absolute;
+ z-index: 3;
+ border-radius: 50%;
+ width: 12px;
+ height: 12px;
+ bottom: 16px;
+ left: 70px;
+ transition: opacity .1s ease;
+ background: lighten($ui-highlight-color, 8%);
+ box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
+ pointer-events: none;
+ }
+ }
+
&__seek {
cursor: pointer;
height: 24px;
}
}
-.community-timeline__section-headline,
-.public-timeline__section-headline,
+.notification__filter-bar,
.account__section-headline {
background: darken($ui-base-color, 4%);
border-bottom: 1px solid lighten($ui-base-color, 8%);
cursor: default;
display: flex;
+ flex-shrink: 0;
+ button {
+ background: darken($ui-base-color, 4%);
+ border: 0;
+ margin: 0;
+ }
+
+ button,
a {
display: block;
flex: 1 1 auto;
.navigation-bar {
& > a:first-child {
- will-change: margin-top, margin-left, width;
- transition: margin-top $duration $delay, margin-left $duration ($duration + $delay);
+ will-change: margin-top, margin-left, margin-right, width;
+ transition: margin-top $duration $delay, margin-left $duration ($duration + $delay), margin-right $duration ($duration + $delay);
}
& > .navigation-bar__profile-edit {
transition: margin-top $duration $delay;
}
- & > .icon-button {
- will-change: opacity;
- transition: opacity $duration $delay;
+ .navigation-bar__actions {
+ & > .icon-button.close {
+ will-change: opacity transform;
+ transition: opacity $duration * 0.5 $delay,
+ transform $duration $delay;
+ }
+
+ & > .compose__action-bar .icon-button {
+ will-change: opacity transform;
+ transition: opacity $duration * 0.5 $delay + $duration * 0.5,
+ transform $duration $delay;
+ }
}
}
padding-bottom: 0;
& > a:first-child {
- margin-top: -50px;
- margin-left: -40px;
+ margin: -100px 10px 0 -50px;
}
.navigation-bar__profile {
.navigation-bar__profile-edit {
position: absolute;
- margin-top: -50px;
+ margin-top: -60px;
}
- .icon-button {
- pointer-events: auto;
- opacity: 1;
+ .navigation-bar__actions {
+ .icon-button.close {
+ pointer-events: auto;
+ opacity: 1;
+ transform: scale(1.0, 1.0) translate(0, 0);
+ bottom: 5px;
+ }
+
+ .compose__action-bar .icon-button {
+ pointer-events: none;
+ opacity: 0;
+ transform: scale(0.0, 1.0) translate(100%, 0);
+ }
}
}
}
width: 100%;
border: none;
padding: 10px;
- font-family: 'mastodon-font-monospace', monospace;
+ font-family: $font-monospace, monospace;
background: $ui-base-color;
color: $primary-text-color;
font-size: 14px;
}
}
+.list-adder {
+ background: $ui-base-color;
+ flex-direction: column;
+ border-radius: 8px;
+ box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
+ width: 380px;
+ overflow: hidden;
+
+ @media screen and (max-width: 420px) {
+ width: 90%;
+ }
+
+ &__account {
+ background: lighten($ui-base-color, 13%);
+ }
+
+ &__lists {
+ background: lighten($ui-base-color, 13%);
+ height: 50vh;
+ border-radius: 0 0 8px 8px;
+ overflow-y: auto;
+ }
+
+ .list {
+ padding: 10px;
+ border-bottom: 1px solid lighten($ui-base-color, 8%);
+ }
+
+ .list__wrapper {
+ display: flex;
+ }
+
+ .list__display-name {
+ flex: 1 1 auto;
+ overflow: hidden;
+ text-decoration: none;
+ font-size: 16px;
+ padding: 10px;
+ }
+}
+
.focal-point-modal {
max-width: 80vw;
max-height: 80vh;
overflow: hidden;
margin: 20px -10px -20px;
border-bottom: 0;
+ border-top: 0;
dl {
- border-top: 1px solid lighten($ui-base-color, 8%);
+ border-top: 1px solid lighten($ui-base-color, 4%);
+ border-bottom: 0;
display: flex;
}
dt,
dd {
box-sizing: border-box;
- padding: 14px 20px;
+ padding: 14px 5px;
text-align: center;
max-height: 48px;
overflow: hidden;
flex: 1 1 auto;
color: $primary-text-color;
background: $ui-base-color;
+
+ &.verified {
+ border: 1px solid rgba($valid-value-color, 0.5);
+ background: rgba($valid-value-color, 0.25);
+ }
}
}
font-size: 14px;
font-weight: 500;
display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
&:hover,
&:focus,
}
&__current {
+ flex: 0 0 auto;
width: 100px;
font-size: 24px;
line-height: 36px;
}
&__sparkline {
+ flex: 0 0 auto;
width: 50px;
path {
git-æsc / mastodon.git / blobdiff