tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge commit '4aea3f88a6d30f102a79c2da7fcfac96465ba1a8' into merging-upstream

Browse Source
This commit is contained in:
Ondřej Hruška
2017-09-28 09:12:17 +02:00
parent 06e299cef5 4aea3f88a6
commit 9330ea1f4d
282 changed files with 4626 additions and 1622 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/javascript/styles/about.scss
View File

@@ -137,7 +137,7 @@
padding-bottom: 15px;
.hero .heading {
padding-bottom: 30px;
padding-bottom: 20px;
font-family: 'mastodon-font-sans-serif', sans-serif;
font-size: 16px;
font-weight: 400;
@@ -327,7 +327,7 @@
.about-short {
background: darken($ui-base-color, 4%);
padding: 50px 0;
padding: 50px 0 30px;
font-family: 'mastodon-font-sans-serif', sans-serif;
font-size: 16px;
font-weight: 400;
@@ -640,8 +640,11 @@
.header-wrapper {
padding-top: 0;
&.compact {
padding-bottom: 0;
}
&.compact .hero .heading {
padding-bottom: 20px;
text-align: initial;
}
}

8
app/javascript/styles/admin.scss
View File

@@ -97,6 +97,14 @@
margin-bottom: 40px;
}
h3 {
color: $ui-secondary-color;
font-size: 20px;
line-height: 28px;
font-weight: 400;
margin-bottom: 30px;
}
h6 {
font-size: 16px;
color: $ui-secondary-color;

195
app/javascript/styles/components.scss
View File

@@ -631,6 +631,10 @@
opacity: 1;
animation: fade 150ms linear;
.video-player {
margin-top: 8px;
}
&.status-direct {
background: lighten($ui-base-color, 8%);
@@ -867,6 +871,10 @@
height: 22px;
}
}
.video-player {
margin-top: 8px;
}
}
.detailed-status__meta {
@@ -1610,9 +1618,8 @@
.column,
.drawer {
@supports(display: grid) { // hack to fix Chrome <57
contain: strict;
}
flex: 1 1 100%;
overflow: hidden;
}
@include limited-single-column('screen and (max-width: 360px)', $parent: null) {
@@ -1790,9 +1797,7 @@
overflow-x: hidden;
flex: 1 1 auto;
-webkit-overflow-scrolling: touch;
@supports(display: grid) { // hack to fix Chrome <57
contain: strict;
}
will-change: transform; // improves perf in mobile Chrome
&.optionally-scrollable {
overflow-y: auto;
@@ -2642,7 +2647,7 @@ button.icon-button.active i.fa-retweet {
.media-spoiler {
background: $base-overlay-background;
color: $primary-text-color;
color: $ui-primary-color;
border: 0;
width: 100%;
height: 100%;
@@ -4206,6 +4211,182 @@ button.icon-button.active i.fa-retweet {
z-index: 5;
}
.video-player {
overflow: hidden;
position: relative;
background: $base-shadow-color;
max-width: 100%;
video {
height: 100%;
width: 100%;
z-index: 1;
}
&.fullscreen {
width: 100% !important;
height: 100% !important;
margin: 0;
video {
max-width: 100% !important;
max-height: 100% !important;
}
}
&.inline {
video {
object-fit: cover;
position: relative;
top: 50%;
transform: translateY(-50%);
}
}
&__controls {
position: absolute;
z-index: 2;
bottom: 0;
left: 0;
right: 0;
box-sizing: border-box;
background: linear-gradient(0deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 60%, transparent);
padding: 0 10px;
opacity: 0;
transition: opacity .1s ease;
&.active {
opacity: 1;
}
}
&.inactive {
video,
.video-player__controls {
visibility: hidden;
}
}
&__spoiler {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 4;
border: 0;
background: $base-shadow-color;
color: $ui-primary-color;
transition: none;
pointer-events: none;
&.active {
display: block;
pointer-events: auto;
&:hover,
&:active,
&:focus {
color: lighten($ui-primary-color, 8%);
}
}
&__title {
display: block;
font-size: 14px;
}
&__subtitle {
display: block;
font-size: 11px;
font-weight: 500;
}
}
&__buttons {
padding-bottom: 10px;
font-size: 16px;
&.left {
float: left;
button {
padding-right: 10px;
}
}
&.right {
float: right;
button {
padding-left: 10px;
}
}
button {
background: transparent;
padding: 0;
border: 0;
color: $white;
&:active,
&:hover,
&:focus {
color: $ui-highlight-color;
}
}
}
&__seek {
cursor: pointer;
height: 24px;
position: relative;
&::before {
content: "";
width: 100%;
background: rgba($white, 0.35);
display: block;
position: absolute;
height: 4px;
top: 10px;
}
&__progress {
display: block;
position: absolute;
height: 4px;
top: 10px;
background: $ui-highlight-color;
}
&__handle {
position: absolute;
z-index: 3;
opacity: 0;
border-radius: 50%;
width: 12px;
height: 12px;
top: 6px;
margin-left: -6px;
transition: opacity .1s ease;
background: $ui-highlight-color;
pointer-events: none;
&.active {
opacity: 1;
}
}
&:hover {
.video-player__seek__handle {
opacity: 1;
}
}
}
}
.media-spoiler-video {
background-size: cover;
background-repeat: no-repeat;

37
app/javascript/styles/forms.scss
View File

@@ -349,9 +349,46 @@ code {
box-shadow: 0 0 5px rgba($base-shadow-color, 0.2);
text-align: center;
p {
margin-bottom: 15px;
}
.oauth-code {
color: $ui-secondary-color;
outline: 0;
box-sizing: border-box;
display: block;
width: 100%;
border: none;
padding: 10px;
font-family: 'mastodon-font-monospace', monospace;
background: $ui-base-color;
color: $ui-primary-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%);
}
}
strong {
font-weight: 500;
}
@media screen and (max-width: 740px) and (min-width: 441px) {
margin-top: 40px;
}
}
.form-footer {

147
app/javascript/styles/stream_entries.scss
View File

@@ -140,19 +140,6 @@
}
}
}
.status__attachments {
margin-top: 8px;
overflow: hidden;
width: 100%;
box-sizing: border-box;
position: relative;
.status__attachments__inner {
display: flex;
height: 214px;
}
}
}
.detailed-status.light {
@@ -233,139 +220,35 @@
}
}
.detailed-status__attachments {
margin-top: 8px;
overflow: hidden;
width: 100%;
box-sizing: border-box;
position: relative;
.status-card {
border-color: lighten($ui-secondary-color, 4%);
color: darken($ui-primary-color, 4%);
.status__attachments__inner {
display: flex;
height: 360px;
&:hover {
background: lighten($ui-secondary-color, 4%);
}
}
.video-player {
margin-top: 8px;
height: 300px;
overflow: hidden;
position: relative;
video {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
object-fit: cover;
top: 50%;
transform: translateY(-50%);
}
}
}
.media-item,
.video-item {
box-sizing: border-box;
position: relative;
left: auto;
top: auto;
right: auto;
bottom: auto;
float: left;
border: medium none;
display: block;
flex: 1 1 auto;
width: 100%;
height: 100%;
overflow: hidden;
margin-right: 2px;
&:last-child {
margin-right: 0;
.status-card__title,
.status-card__description {
color: $ui-base-color;
}
a {
display: block;
width: 100%;
height: 100%;
background: no-repeat scroll center center / cover;
text-decoration: none;
cursor: zoom-in;
}
video {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
object-fit: cover;
top: 50%;
transform: translateY(-50%);
}
}
.video-item {
a {
cursor: pointer;
}
.video-item__play {
position: absolute;
top: 50%;
left: 50%;
font-size: 36px;
transform: translate(-50%, -50%);
padding: 5px;
border-radius: 100px;
color: rgba($primary-text-color, 0.8);
z-index: 1;
.status-card__image {
background: $ui-secondary-color;
}
}
.media-spoiler {
background: $ui-primary-color;
width: 100%;
height: 100%;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
color: $white;
transition: all 100ms linear;
z-index: 2;
&:hover {
&:hover,
&:active,
&:focus {
background: darken($ui-primary-color, 5%);
}
span {
display: block;
&:first-child {
font-size: 14px;
}
&:last-child {
font-size: 11px;
font-weight: 500;
}
}
}
.media-spoiler-wrapper {
&.media-spoiler-wrapper__visible {
.media-spoiler {
display: none;
}
.spoiler-button {
display: block;
}
color: unset;
}
}