Merge branch 'origin/master' into sync/upstream
Conflicts: app/javascript/mastodon/components/status_list.js app/javascript/mastodon/features/notifications/index.js app/javascript/mastodon/features/ui/components/modal_root.js app/javascript/mastodon/features/ui/components/onboarding_modal.js app/javascript/mastodon/features/ui/index.js app/javascript/styles/about.scss app/javascript/styles/accounts.scss app/javascript/styles/components.scss app/presenters/instance_presenter.rb app/services/post_status_service.rb app/services/reblog_service.rb app/views/about/more.html.haml app/views/about/show.html.haml app/views/accounts/_header.html.haml config/webpack/loaders/babel.js spec/controllers/api/v1/accounts/credentials_controller_spec.rb
This commit is contained in:
David Yip
File diff suppressed because it is too large
Load Diff
@ -1,34 +1,48 @@
|
||||
.card {
|
||||
display: flex;
|
||||
background: $ui-base-color;
|
||||
background-color: lighten($ui-base-color, 4%);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
border-radius: 4px 4px 0 0;
|
||||
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
&::after {
|
||||
background: rgba(darken($ui-base-color, 8%), 0.5);
|
||||
display: block;
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 740px) {
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.details {
|
||||
.card__illustration {
|
||||
padding: 60px 0;
|
||||
position: relative;
|
||||
padding: 60px 0 0;
|
||||
text-align: center;
|
||||
flex: auto;
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&::after {
|
||||
background: linear-gradient(rgba($base-shadow-color, 0.5), rgba($base-shadow-color, 0.8));
|
||||
display: block;
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
.card__bio {
|
||||
max-width: 260px;
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background: rgba(darken($ui-base-color, 8%), 0.8);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&.compact {
|
||||
@ -46,14 +60,15 @@
|
||||
|
||||
.name {
|
||||
display: block;
|
||||
position: relative;
|
||||
font-size: 20px;
|
||||
line-height: 18px * 1.5;
|
||||
color: $primary-text-color;
|
||||
padding: 10px 15px;
|
||||
padding-bottom: 0;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
text-shadow: 0 0 2px $base-shadow-color;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin-bottom: 30px;
|
||||
|
||||
small {
|
||||
display: block;
|
||||
@ -64,58 +79,104 @@
|
||||
}
|
||||
|
||||
.avatar {
|
||||
position: relative;
|
||||
@include avatar-size(120px);
|
||||
width: 120px;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 15px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
img {
|
||||
@include avatar-radius();
|
||||
@include avatar-size(120px);
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
display: block;
|
||||
border-radius: 120px;
|
||||
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.controls {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
z-index: 2;
|
||||
|
||||
.icon-button {
|
||||
color: rgba($white, 0.8);
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
line-height: 13px;
|
||||
font-weight: 500;
|
||||
|
||||
.fa {
|
||||
font-weight: 400;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.roles {
|
||||
margin-bottom: 30px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.details-counters {
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 15px 0;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.counter {
|
||||
width: 80px;
|
||||
width: 33.3%;
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
color: $ui-primary-color;
|
||||
padding: 5px 10px 0;
|
||||
margin-bottom: 10px;
|
||||
border-right: 1px solid lighten($ui-base-color, 4%);
|
||||
cursor: default;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
|
||||
& + .counter {
|
||||
border-left: 1px solid $ui-primary-color;
|
||||
}
|
||||
|
||||
& > * {
|
||||
opacity: .7;
|
||||
transition: opacity .3s ease;
|
||||
}
|
||||
|
||||
&.active > *, &:hover > * {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: block;
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
border-bottom: 4px solid $ui-primary-color;
|
||||
opacity: 0.5;
|
||||
transition: all 400ms ease;
|
||||
}
|
||||
|
||||
&.active {
|
||||
&::after {
|
||||
border-bottom: 4px solid $ui-highlight-color;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::after {
|
||||
opacity: 1;
|
||||
transition-duration: 100ms;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
@ -123,87 +184,40 @@
|
||||
|
||||
.counter-label {
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
text-shadow: 0 0 2px $base-shadow-color;
|
||||
}
|
||||
|
||||
.counter-number {
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
color: $primary-text-color;
|
||||
font-family: 'mastodon-font-display', sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
.bio {
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
margin: 15px 0;
|
||||
padding: 5px 10px;
|
||||
padding: 0 15px;
|
||||
color: $ui-secondary-color;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.metadata {
|
||||
position: relative;
|
||||
min-width: 180px;
|
||||
max-width: 40%;
|
||||
background: rgba($base-shadow-color, 0.8);
|
||||
color: $primary-text-color;
|
||||
text-align: left;
|
||||
overflow-y: auto;
|
||||
white-space: pre-wrap;
|
||||
z-index: 3;
|
||||
|
||||
.metadata-item {
|
||||
border-bottom: 1px $ui-primary-color solid;
|
||||
padding: 15px 10px;
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
a {
|
||||
color: $ui-highlight-color;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
b {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
color: $ui-primary-color;
|
||||
|
||||
a {
|
||||
color: $ui-primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
|
||||
.card {
|
||||
@media screen and (max-width: 480px) {
|
||||
display: block;
|
||||
|
||||
.metadata {
|
||||
.card__bio {
|
||||
max-width: none;
|
||||
background: $base-shadow-color;
|
||||
border-top: 1px $ui-primary-color solid;
|
||||
}
|
||||
|
||||
.metadata-item {
|
||||
padding: 15px 20px;
|
||||
}
|
||||
.name,
|
||||
.roles {
|
||||
text-align: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.bio {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -282,7 +296,9 @@
|
||||
}
|
||||
|
||||
.next,
|
||||
.prev {
|
||||
.prev,
|
||||
.next a,
|
||||
.prev a {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
@ -290,13 +306,15 @@
|
||||
|
||||
.accounts-grid {
|
||||
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
|
||||
background: $simple-background-color;
|
||||
background: darken($simple-background-color, 8%);
|
||||
border-radius: 0 0 4px 4px;
|
||||
padding: 20px 10px;
|
||||
padding: 20px 5px;
|
||||
padding-bottom: 10px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
|
||||
@media screen and (max-width: 740px) {
|
||||
border-radius: 0;
|
||||
@ -306,35 +324,64 @@
|
||||
.account-grid-card {
|
||||
box-sizing: border-box;
|
||||
width: 335px;
|
||||
border: 1px solid $ui-secondary-color;
|
||||
background: $simple-background-color;
|
||||
border-radius: 4px;
|
||||
color: $ui-base-color;
|
||||
margin-bottom: 10px;
|
||||
margin: 0 5px 10px;
|
||||
position: relative;
|
||||
|
||||
&:nth-child(odd) {
|
||||
margin-right: 10px;
|
||||
@media screen and (max-width: 740px) {
|
||||
width: calc(100% - 10px);
|
||||
}
|
||||
|
||||
.account-grid-card__header {
|
||||
overflow: hidden;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid $ui-secondary-color;
|
||||
height: 100px;
|
||||
border-radius: 4px 4px 0 0;
|
||||
background-color: lighten($ui-base-color, 4%);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
background: rgba(darken($ui-base-color, 8%), 0.5);
|
||||
display: block;
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.account-grid-card__avatar {
|
||||
box-sizing: border-box;
|
||||
padding: 15px;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 100px - (40px + 2px);
|
||||
left: -2px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
@include avatar-size(60px);
|
||||
float: left;
|
||||
margin-right: 15px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
|
||||
img {
|
||||
@include avatar-radius();
|
||||
@include avatar-size(60px);
|
||||
display: block;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 80px;
|
||||
border: 2px solid $simple-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
padding: 15px;
|
||||
padding-top: 10px;
|
||||
padding-left: 15px + 80px + 15px;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
@ -342,6 +389,7 @@
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
.display_name {
|
||||
@ -352,30 +400,38 @@
|
||||
}
|
||||
|
||||
.display_name {
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
display: block;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.username {
|
||||
color: $ui-highlight-color;
|
||||
color: lighten($ui-base-color, 34%);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.note {
|
||||
padding: 10px;
|
||||
padding: 10px 15px;
|
||||
padding-top: 15px;
|
||||
color: $ui-primary-color;
|
||||
box-sizing: border-box;
|
||||
color: lighten($ui-base-color, 26%);
|
||||
word-wrap: break-word;
|
||||
min-height: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nothing-here {
|
||||
width: 100%;
|
||||
display: block;
|
||||
color: $ui-primary-color;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
padding: 15px 0;
|
||||
padding-bottom: 25px;
|
||||
padding: 60px 0;
|
||||
padding-top: 55px;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
@ -396,14 +452,15 @@
|
||||
}
|
||||
|
||||
& > div {
|
||||
@include avatar-size(48px);
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
@include avatar-radius();
|
||||
display: block;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.display-name {
|
||||
@ -439,3 +496,43 @@
|
||||
color: $ui-base-color;
|
||||
}
|
||||
}
|
||||
|
||||
.activity-stream-tabs {
|
||||
background: $simple-background-color;
|
||||
border-bottom: 1px solid $ui-secondary-color;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
padding: 15px;
|
||||
text-decoration: none;
|
||||
color: $ui-highlight-color;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: lighten($ui-highlight-color, 8%);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $ui-base-color;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account-role {
|
||||
display: inline-block;
|
||||
padding: 4px 6px;
|
||||
cursor: default;
|
||||
border-radius: 3px;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
font-weight: 500;
|
||||
color: $success-green;
|
||||
background-color: rgba($success-green, 0.1);
|
||||
border: 1px solid rgba($success-green, 0.5);
|
||||
}
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 15px 25px;
|
||||
padding: 15px;
|
||||
color: rgba($primary-text-color, 0.7);
|
||||
text-decoration: none;
|
||||
transition: all 200ms linear;
|
||||
@ -61,6 +61,7 @@
|
||||
|
||||
a {
|
||||
border: 0;
|
||||
padding: 15px 35px;
|
||||
|
||||
&.selected {
|
||||
color: $primary-text-color;
|
||||
@ -98,7 +99,7 @@
|
||||
|
||||
h6 {
|
||||
font-size: 16px;
|
||||
color: $ui-primary-color;
|
||||
color: $ui-secondary-color;
|
||||
line-height: 28px;
|
||||
font-weight: 400;
|
||||
}
|
||||
@ -123,10 +124,10 @@
|
||||
}
|
||||
|
||||
.muted-hint {
|
||||
color: lighten($ui-base-color, 27%);
|
||||
color: $ui-primary-color;
|
||||
|
||||
a {
|
||||
color: $ui-primary-color;
|
||||
color: $ui-highlight-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -139,15 +140,23 @@
|
||||
.simple_form {
|
||||
max-width: 400px;
|
||||
|
||||
.label_input {
|
||||
label.select {
|
||||
width: 50%;
|
||||
}
|
||||
&.edit_user,
|
||||
&.new_form_admin_settings,
|
||||
&.new_form_two_factor_confirmation,
|
||||
&.new_form_delete_confirmation,
|
||||
&.new_import,
|
||||
&.new_domain_block,
|
||||
&.edit_domain_block {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
select {
|
||||
width: 50%;
|
||||
float: right;
|
||||
}
|
||||
.form_two_factor_confirmation_code,
|
||||
.form_delete_confirmation_password {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
max-width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -227,27 +236,25 @@
|
||||
|
||||
.report-accounts {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.report-accounts__item {
|
||||
flex: 1 1 0;
|
||||
display: flex;
|
||||
flex: 250px;
|
||||
flex-direction: column;
|
||||
margin: 0 5px;
|
||||
|
||||
& > strong {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
margin: 0 0 10px -5px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
color: $ui-secondary-color;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.account-card {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
@ -261,6 +268,11 @@
|
||||
.activity-stream {
|
||||
flex: 2 0 0;
|
||||
margin-right: 20px;
|
||||
max-width: calc(100% - 60px);
|
||||
|
||||
.entry {
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -280,18 +292,25 @@
|
||||
|
||||
.batch-form-box {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 5px;
|
||||
|
||||
#form_status_batch_action {
|
||||
margin-right: 5px;
|
||||
margin: 0 5px 5px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
input.button {
|
||||
margin: 0 5px 5px 0;
|
||||
}
|
||||
|
||||
.media-spoiler-toggle-buttons {
|
||||
margin-left: auto;
|
||||
|
||||
.button {
|
||||
overflow: visible;
|
||||
margin: 0 0 5px 5px;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,13 +7,28 @@ body {
|
||||
line-height: 18px;
|
||||
font-weight: 400;
|
||||
color: $primary-text-color;
|
||||
padding-bottom: 140px;
|
||||
padding-bottom: 20px;
|
||||
text-rendering: optimizelegibility;
|
||||
font-feature-settings: "kern";
|
||||
text-size-adjust: none;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
|
||||
&.system-font {
|
||||
// system-ui => standard property (Chrome/Android WebView 56+, Opera 43+, Safari 11+)
|
||||
// -apple-system => Safari <11 specific
|
||||
// BlinkMacSystemFont => Chrome <56 on macOS specific
|
||||
// Segoe UI => Windows 7/8/10
|
||||
// Oxygen => KDE
|
||||
// Ubuntu => Unity/Ubuntu
|
||||
// Cantarell => GNOME
|
||||
// Fira Sans => Firefox OS
|
||||
// Droid Sans => Older Androids (<4.0)
|
||||
// Helvetica Neue => Older macOS <10.11
|
||||
// mastodon-font-sans-serif => web-font (Roboto) fallback and newer Androids (>=4.0)
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", mastodon-font-sans-serif, sans-serif;
|
||||
}
|
||||
|
||||
&.app-body {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
@ -46,10 +61,6 @@ body {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 400px) {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
@ -68,18 +79,3 @@ button {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.system-font {
|
||||
// system-ui => standard property (Chrome/Android WebView 56+, Opera 43+, Safari 11+)
|
||||
// -apple-system => Safari <11 specific
|
||||
// BlinkMacSystemFont => Chrome <56 on macOS specific
|
||||
// Segoe UI => Windows 7/8/10
|
||||
// Oxygen => KDE
|
||||
// Ubuntu => Unity/Ubuntu
|
||||
// Cantarell => GNOME
|
||||
// Fira Sans => Firefox OS
|
||||
// Droid Sans => Older Androids (<4.0)
|
||||
// Helvetica Neue => Older macOS <10.11
|
||||
// mastodon-font-sans-serif => web-font (Roboto) fallback and newer Androids (>=4.0)
|
||||
font-family: system-ui, -apple-system,BlinkMacSystemFont, "Segoe UI","Oxygen", "Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",mastodon-font-sans-serif, sans-serif;
|
||||
}
|
||||
|
||||
@ -238,6 +238,8 @@
|
||||
line-height: 0;
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.ellipsis {
|
||||
@ -395,6 +397,11 @@
|
||||
bottom: -1px;
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track:hover,
|
||||
::-webkit-scrollbar-track:active {
|
||||
background-color: rgba($base-overlay-background, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1288,6 +1295,8 @@
|
||||
strong,
|
||||
span {
|
||||
display: block;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
strong {
|
||||
@ -2130,7 +2139,7 @@
|
||||
|
||||
.character-counter__wrapper {
|
||||
line-height: 36px;
|
||||
margin-right: 16px;
|
||||
margin: 0 16px 0 8px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
@ -2313,6 +2322,18 @@ button.icon-button.active i.fa-retweet {
|
||||
background: lighten($ui-base-color, 8%);
|
||||
}
|
||||
|
||||
.status-card.horizontal {
|
||||
display: block;
|
||||
|
||||
.status-card__image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.status-card__image-image {
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.status-card__image-image {
|
||||
border-radius: 4px 0 0 4px;
|
||||
display: block;
|
||||
@ -2671,12 +2692,8 @@ button.icon-button.active i.fa-retweet {
|
||||
}
|
||||
|
||||
.media-spoiler {
|
||||
align-items: center;
|
||||
background: $base-overlay-background;
|
||||
color: $primary-text-color;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -3533,7 +3550,8 @@ button.icon-button.active i.fa-retweet {
|
||||
}
|
||||
|
||||
.onboarding-modal,
|
||||
.error-modal {
|
||||
.error-modal,
|
||||
.embed-modal {
|
||||
background: $ui-secondary-color;
|
||||
color: $ui-base-color;
|
||||
border-radius: 8px;
|
||||
@ -4348,6 +4366,15 @@ noscript {
|
||||
margin: 30px auto;
|
||||
color: $ui-secondary-color;
|
||||
max-width: 400px;
|
||||
|
||||
a {
|
||||
color: $ui-highlight-color;
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -4455,3 +4482,61 @@ noscript {
|
||||
height: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.embed-modal__html {
|
||||
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;
|
||||
margin-bottom: 15px;
|
||||
|
||||
&::-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;
|
||||
}
|
||||
}
|
||||
|
||||
.embed-modal {
|
||||
h4 {
|
||||
padding: 30px;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hint {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.embed-modal__container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.embed-modal__iframe {
|
||||
width: 100%;
|
||||
min-width: 400px;
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@ -44,6 +44,22 @@
|
||||
}
|
||||
}
|
||||
|
||||
.compose-standalone {
|
||||
.compose-form {
|
||||
width: 400px;
|
||||
margin: 0 auto;
|
||||
padding: 20px 0;
|
||||
margin-top: 40px;
|
||||
box-sizing: border-box;
|
||||
|
||||
@media screen and (max-width: 400px) {
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account-header {
|
||||
width: 400px;
|
||||
margin: 0 auto;
|
||||
@ -56,7 +72,7 @@
|
||||
margin-bottom: -30px;
|
||||
margin-top: 40px;
|
||||
|
||||
@media screen and (max-width: 400px) {
|
||||
@media screen and (max-width: 440px) {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
margin-bottom: 10px;
|
||||
@ -81,10 +97,13 @@
|
||||
.name {
|
||||
flex: 1 1 auto;
|
||||
color: $ui-secondary-color;
|
||||
width: calc(100% - 88px);
|
||||
|
||||
.username {
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@ -92,5 +111,6 @@
|
||||
display: block;
|
||||
font-size: 32px;
|
||||
line-height: 40px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -24,7 +24,7 @@ code {
|
||||
|
||||
p.hint {
|
||||
margin-bottom: 15px;
|
||||
color: lighten($ui-base-color, 32%);
|
||||
color: $ui-primary-color;
|
||||
|
||||
&.subtle-hint {
|
||||
text-align: center;
|
||||
@ -32,10 +32,10 @@ code {
|
||||
line-height: 18px;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 0;
|
||||
color: $ui-base-lighter-color;
|
||||
color: $ui-primary-color;
|
||||
|
||||
a {
|
||||
color: $ui-primary-color;
|
||||
color: $ui-highlight-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -53,7 +53,6 @@ code {
|
||||
|
||||
label {
|
||||
flex: 0 0 auto;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
input {
|
||||
@ -65,12 +64,37 @@ code {
|
||||
padding: 15px 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
.label_input {
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
&.select .label_input {
|
||||
align-items: initial;
|
||||
}
|
||||
|
||||
.label_input > label {
|
||||
font-family: inherit;
|
||||
font-size: 16px;
|
||||
color: $primary-text-color;
|
||||
display: block;
|
||||
padding-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
flex: 1;
|
||||
min-width: 150px;
|
||||
word-wrap: break-word;
|
||||
|
||||
&.select {
|
||||
flex: 0;
|
||||
}
|
||||
|
||||
& ~ * {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
flex: 390px;
|
||||
}
|
||||
|
||||
&.boolean {
|
||||
@ -359,17 +383,23 @@ code {
|
||||
color: $ui-secondary-color;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 740px) and (min-width: 441px) {
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.qr-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.qr-code {
|
||||
flex: 0 0 auto;
|
||||
background: $simple-background-color;
|
||||
padding: 4px;
|
||||
margin-bottom: 20px;
|
||||
margin: 0 10px 20px 0;
|
||||
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
|
||||
display: inline-block;
|
||||
|
||||
@ -380,8 +410,9 @@ code {
|
||||
}
|
||||
|
||||
.qr-alternative {
|
||||
margin-left: 10px;
|
||||
color: $ui-primary-color;
|
||||
margin-bottom: 20px;
|
||||
color: $ui-secondary-color;
|
||||
flex: 150px;
|
||||
|
||||
samp {
|
||||
display: block;
|
||||
@ -391,7 +422,6 @@ code {
|
||||
|
||||
.table-form {
|
||||
p {
|
||||
max-width: 400px;
|
||||
margin-bottom: 15px;
|
||||
|
||||
strong {
|
||||
@ -403,7 +433,6 @@ code {
|
||||
.simple_form,
|
||||
.table-form {
|
||||
.warning {
|
||||
max-width: 400px;
|
||||
box-sizing: border-box;
|
||||
background: rgba($error-value-color, 0.5);
|
||||
color: $primary-text-color;
|
||||
|
||||
@ -5,6 +5,8 @@
|
||||
padding: 14px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
strong,
|
||||
a {
|
||||
@ -15,4 +17,15 @@
|
||||
color: inherit;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
flex: 0 0 auto;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 740px) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,7 +8,7 @@ body.rtl {
|
||||
}
|
||||
|
||||
.character-counter__wrapper {
|
||||
margin-right: 0;
|
||||
margin-right: 8px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
@ -32,6 +32,11 @@ body.rtl {
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.column-header__back-button {
|
||||
padding-left: 5px;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.column-header__setting-arrows {
|
||||
float: left;
|
||||
}
|
||||
@ -54,25 +59,64 @@ body.rtl {
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.status {
|
||||
.status,
|
||||
.activity-stream .status.light {
|
||||
padding-left: 10px;
|
||||
padding-right: 68px;
|
||||
}
|
||||
|
||||
.status__info .status__display-name {
|
||||
.status__info .status__display-name,
|
||||
.activity-stream .status.light .status__display-name {
|
||||
padding-left: 25px;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.activity-stream .pre-header {
|
||||
padding-right: 68px;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.status__prepend {
|
||||
margin-left: 0;
|
||||
margin-right: 68px;
|
||||
}
|
||||
|
||||
.status__prepend-icon-wrapper {
|
||||
left: auto;
|
||||
right: -26px;
|
||||
}
|
||||
|
||||
.activity-stream .pre-header .pre-header__icon {
|
||||
left: auto;
|
||||
right: 42px;
|
||||
}
|
||||
|
||||
.account__avatar-overlay-overlay {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.column-back-button--slim-button {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.status__relative-time {
|
||||
.status__relative-time,
|
||||
.activity-stream .status.light .status__header .status__meta {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.activity-stream .detailed-status.light .detailed-status__display-name > div {
|
||||
float: right;
|
||||
margin-right: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.activity-stream .detailed-status.light .detailed-status__meta span > span {
|
||||
margin-left: 0;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.status__action-bar-button {
|
||||
float: right;
|
||||
margin-right: 0;
|
||||
@ -129,6 +173,78 @@ body.rtl {
|
||||
right: -2.14285714em;
|
||||
}
|
||||
|
||||
.admin-wrapper .sidebar ul a i.fa,
|
||||
a.table-action-link i.fa {
|
||||
margin-right: 0;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.simple_form .check_boxes .checkbox label,
|
||||
.simple_form .input.with_label.boolean label.checkbox {
|
||||
padding-left: 0;
|
||||
padding-right: 25px;
|
||||
}
|
||||
|
||||
.simple_form .check_boxes .checkbox input[type="checkbox"],
|
||||
.simple_form .input.boolean input[type="checkbox"] {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.simple_form .input-with-append .input input {
|
||||
padding-left: 127px;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.simple_form .input-with-append .append {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.table th,
|
||||
.table td {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.filters .filter-subset {
|
||||
margin-right: 0;
|
||||
margin-left: 45px;
|
||||
}
|
||||
|
||||
.landing-page .header-wrapper .mascot {
|
||||
right: 60px;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.landing-page .header .hero .floats .float-1 {
|
||||
left: -120px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.landing-page .header .hero .floats .float-2 {
|
||||
left: 210px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.landing-page .header .hero .floats .float-3 {
|
||||
left: 110px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.landing-page .header .links .brand img {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.landing-page .fa-external-link {
|
||||
padding-right: 5px;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
.landing-page .features #mastodon-timeline {
|
||||
margin-right: 0;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.column,
|
||||
.drawer {
|
||||
@ -139,11 +255,6 @@ body.rtl {
|
||||
padding-left: 5px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.columns-area > div {
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
.detailed-status.light,
|
||||
.status.light {
|
||||
border-bottom: 1px solid $ui-secondary-color;
|
||||
animation: none;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@ -34,6 +35,14 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 740px) {
|
||||
&,
|
||||
.detailed-status.light,
|
||||
.status.light {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.with-header {
|
||||
@ -44,6 +53,14 @@
|
||||
.status.light {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
&,
|
||||
.detailed-status.light,
|
||||
.status.light {
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -400,3 +417,33 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button.button-secondary.logo-button {
|
||||
position: absolute;
|
||||
right: 14px;
|
||||
top: 14px;
|
||||
font-size: 14px;
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: auto;
|
||||
vertical-align: middle;
|
||||
margin-right: 5px;
|
||||
|
||||
path:first-child {
|
||||
fill: $ui-primary-color;
|
||||
}
|
||||
|
||||
path:last-child {
|
||||
fill: $simple-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
svg path:first-child {
|
||||
fill: lighten($ui-primary-color, 4%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -46,7 +46,7 @@
|
||||
&.inline-table {
|
||||
td,
|
||||
th {
|
||||
padding: 8px 0;
|
||||
padding: 8px 2px;
|
||||
}
|
||||
|
||||
& > tbody > tr:nth-child(odd) > td,
|
||||
|
||||
Reference in New Issue
Block a user