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;
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 {
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%;
padding: 4px 0;
border-radius: 4px;
box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
+ z-index: 9999;
ul {
list-style: none;
}
.column {
- width: 330px;
+ width: 350px;
position: relative;
box-sizing: border-box;
display: flex;
@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 {
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;
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 {
}
.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;
-
- &::-moz-focus-inner {
- border: 0;
- }
-
- &::-moz-focus-inner,
- &:focus,
- &:active {
- outline: 0 !important;
- }
-
- &:focus {
- background: lighten($ui-base-color, 4%);
- }
-
- @media screen and (max-width: 600px) {
- font-size: 16px;
- }
+ @include search-input();
}
.search__icon {
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;
}
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;
&__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;
}
}
+.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;
}
}
+.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;
git-æsc / mastodon.git / blobdiff