* Adjust status embeds Adjust styles of embed code. Adjust styles of embed pages. Fix overflow of embed-modal. * Remove trailing whitespace * Using width from the variablemaster
@@ -3966,41 +3966,10 @@ noscript { | |||
} | |||
} | |||
.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 { | |||
max-width: 80vw; | |||
max-height: 80vh; | |||
h4 { | |||
padding: 30px; | |||
font-weight: 500; | |||
@@ -4008,18 +3977,52 @@ noscript { | |||
text-align: center; | |||
} | |||
.hint { | |||
margin-bottom: 15px; | |||
} | |||
} | |||
.embed-modal__container { | |||
padding: 10px; | |||
.embed-modal__container { | |||
padding: 10px; | |||
} | |||
.hint { | |||
margin-bottom: 15px; | |||
} | |||
.embed-modal__iframe { | |||
width: 100%; | |||
min-width: 400px; | |||
overflow: hidden; | |||
border: 0; | |||
.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__iframe { | |||
width: 400px; | |||
max-width: 100%; | |||
overflow: hidden; | |||
border: 0; | |||
} | |||
} | |||
} |
@@ -403,51 +403,54 @@ | |||
.embed { | |||
.activity-stream { | |||
border-radius: 4px; | |||
box-shadow: none; | |||
.entry { | |||
&:last-child { | |||
border-radius: 0 0 4px 4px; | |||
} | |||
&:first-child { | |||
border-radius: 4px 4px 0 0; | |||
.detailed-status.light { | |||
display: flex; | |||
flex-wrap: wrap; | |||
justify-content: space-between; | |||
align-items: flex-start; | |||
&:last-child { | |||
border-radius: 4px; | |||
.detailed-status__display-name { | |||
flex: 1; | |||
margin: 0 5px 15px 0; | |||
} | |||
} | |||
} | |||
} | |||
} | |||
.button.button-secondary.logo-button { | |||
position: absolute; | |||
right: 14px; | |||
top: 14px; | |||
font-size: 14px; | |||
.button.button-secondary.logo-button { | |||
flex: 0 auto; | |||
font-size: 14px; | |||
svg { | |||
width: 20px; | |||
height: auto; | |||
vertical-align: middle; | |||
margin-right: 5px; | |||
svg { | |||
width: 20px; | |||
height: auto; | |||
vertical-align: middle; | |||
margin-right: 5px; | |||
path:first-child { | |||
fill: $ui-primary-color; | |||
} | |||
path:first-child { | |||
fill: $ui-primary-color; | |||
} | |||
path:last-child { | |||
fill: $simple-background-color; | |||
} | |||
} | |||
path:last-child { | |||
fill: $simple-background-color; | |||
} | |||
} | |||
&:active, | |||
&:focus, | |||
&:hover { | |||
svg path:first-child { | |||
fill: lighten($ui-primary-color, 4%); | |||
&:active, | |||
&:focus, | |||
&:hover { | |||
svg path:first-child { | |||
fill: lighten($ui-primary-color, 4%); | |||
} | |||
} | |||
} | |||
.status__content, | |||
.detailed-status__meta { | |||
flex: 100%; | |||
} | |||
} | |||
} | |||
} | |||
} |
@@ -40,8 +40,7 @@ class OEmbedSerializer < ActiveModel::Serializer | |||
attributes = { | |||
src: embed_short_account_status_url(object.account, object), | |||
class: 'mastodon-embed', | |||
frameborder: '0', | |||
scrolling: 'no', | |||
style: 'max-width: 100%; border: none;', | |||
width: width, | |||
height: height, | |||
} | |||
@@ -1,9 +1,4 @@ | |||
.detailed-status.light | |||
- if embedded_view? | |||
= link_to "web+mastodon://follow?uri=#{status.account.local_username_and_domain}", class: 'button button-secondary logo-button', target: '_new' do | |||
= render file: Rails.root.join('app', 'javascript', 'images', 'logo.svg') | |||
= t('accounts.follow') | |||
= link_to TagManager.instance.url_for(status.account), class: 'detailed-status__display-name p-author h-card', target: stream_link_target, rel: 'noopener' do | |||
%div | |||
.avatar | |||
@@ -12,6 +7,11 @@ | |||
%strong.p-name.emojify= display_name(status.account) | |||
%span= acct(status.account) | |||
- if embedded_view? | |||
= link_to "web+mastodon://follow?uri=#{status.account.local_username_and_domain}", class: 'button button-secondary logo-button', target: '_new' do | |||
= render file: Rails.root.join('app', 'javascript', 'images', 'logo.svg') | |||
= t('accounts.follow') | |||
.status__content.p-name.emojify< | |||
- if status.spoiler_text? | |||
%p{ style: 'margin-bottom: 0' }< | |||