Update CSS
Now it's mostly CSS 2.1 compliant. All the images now use the height attribute to limit the size on browsers that don't support CSS.
This commit is contained in:
r
parent
7a59d010f6
commit
79d4ff4b08
|
|
@ -41,7 +41,7 @@ func emojiFilter(content string, emojis []mastodon.Emoji) string {
|
|||
var replacements []string
|
||||
var r string
|
||||
for _, e := range emojis {
|
||||
r = fmt.Sprintf("<img class=\"emoji\" src=\"%s\" alt=\":%s:\" title=\":%s:\" />",
|
||||
r = fmt.Sprintf("<img class=\"emoji\" src=\"%s\" alt=\":%s:\" title=\":%s:\" height=\"24\" />",
|
||||
e.URL, e.ShortCode, e.ShortCode)
|
||||
replacements = append(replacements, ":"+e.ShortCode+":", r)
|
||||
}
|
||||
|
|
@ -57,7 +57,7 @@ func statusContentFilter(spoiler string, content string,
|
|||
content = spoiler + "<br />" + content
|
||||
}
|
||||
for _, e := range emojis {
|
||||
r = fmt.Sprintf("<img class=\"emoji\" src=\"%s\" alt=\":%s:\" title=\":%s:\" />",
|
||||
r = fmt.Sprintf("<img class=\"emoji\" src=\"%s\" alt=\":%s:\" title=\":%s:\" height=\"32\" />",
|
||||
e.URL, e.ShortCode, e.ShortCode)
|
||||
replacements = append(replacements, ":"+e.ShortCode+":", r)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,13 +12,8 @@
|
|||
background-color: #cccccc;
|
||||
}
|
||||
|
||||
.status-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.status-content {
|
||||
margin: 4px 0;
|
||||
word-wrap: anywhere;
|
||||
max-height: 600px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
|
@ -30,6 +25,8 @@
|
|||
.status-content img,
|
||||
.status-image,
|
||||
.status-video {
|
||||
height: auto;
|
||||
width: auto;
|
||||
max-height: 240px;
|
||||
max-width: 280px;
|
||||
width: auto;
|
||||
|
|
@ -42,18 +39,17 @@
|
|||
|
||||
.status-profile-img-container {
|
||||
margin-right: 8px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.status-profile-img {
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
object-fit: contain;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.status {
|
||||
flex: 1;
|
||||
overflow-x: auto;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.status-dname {
|
||||
|
|
@ -61,16 +57,10 @@
|
|||
}
|
||||
|
||||
.status-uname {
|
||||
user-select: all;
|
||||
font-style: italic;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
.name-emoji {
|
||||
height: 20px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.status-action-container {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
|
@ -80,7 +70,7 @@
|
|||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.status-action:last-child {
|
||||
.status-action-last {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
|
|
@ -105,7 +95,7 @@
|
|||
}
|
||||
|
||||
.post-form {
|
||||
margin: 8px 0;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.post-form>div {
|
||||
|
|
@ -159,14 +149,14 @@
|
|||
border-color: #777777;
|
||||
}
|
||||
|
||||
.notification-follow-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.notification-info-text span {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.notification-follow {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.notification-follow-uname {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
|
@ -232,9 +222,8 @@
|
|||
}
|
||||
|
||||
.user-profile-img {
|
||||
max-height: 100px;
|
||||
max-width: 100px;
|
||||
object-fit: contain;
|
||||
height: 96px;
|
||||
width: 96px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
|
|
@ -263,7 +252,7 @@ a, .btn-link {
|
|||
|
||||
a:hover,
|
||||
.btn-link:hover {
|
||||
opacity: 0.6;
|
||||
color: #9899c4;
|
||||
}
|
||||
|
||||
.status-visibility {
|
||||
|
|
@ -284,10 +273,6 @@ a:hover,
|
|||
margin: 2.5px 0;
|
||||
}
|
||||
|
||||
.img-link:hover {
|
||||
opacity: initial;
|
||||
}
|
||||
|
||||
.status-profile-img-container .img-link {
|
||||
width: 48px;
|
||||
overflow: hidden;
|
||||
|
|
@ -327,8 +312,10 @@ a:hover,
|
|||
}
|
||||
|
||||
img.emoji {
|
||||
height: 32px;
|
||||
object-fit: contain;
|
||||
height: auto;
|
||||
width: auto;
|
||||
max-height: 32px;
|
||||
max-width: 32px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
|
@ -337,7 +324,6 @@ img.emoji {
|
|||
}
|
||||
|
||||
.emoji-shortcode {
|
||||
user-select: all;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -346,27 +332,19 @@ img.emoji {
|
|||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.post-form-emoji-link i {
|
||||
font-size: 14pt !important;
|
||||
}
|
||||
|
||||
.post-form-title {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.user-info-img {
|
||||
max-height: 64px;
|
||||
max-width: 64px;
|
||||
object-fit: contain;
|
||||
height: 64px;
|
||||
width: 64px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.user-info-img-container {
|
||||
float: left;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.user-info-details-container {
|
||||
margin-left: 8px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.user-info-details-container>div {
|
||||
|
|
@ -375,7 +353,6 @@ img.emoji {
|
|||
|
||||
.nav-link {
|
||||
margin-right: 2px;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.user-list-container {
|
||||
|
|
@ -442,7 +419,7 @@ img.emoji {
|
|||
}
|
||||
|
||||
.more-container:hover .more-content {
|
||||
display: initial;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.more-link {
|
||||
|
|
@ -514,6 +491,11 @@ img.emoji {
|
|||
color: #81a2be;
|
||||
}
|
||||
|
||||
.dark a:hover,
|
||||
.dark .btn-link:hover {
|
||||
color: #497091;
|
||||
}
|
||||
|
||||
.dark .status-visibility {
|
||||
color: #eaeaea;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<div class="emoji-list-container">
|
||||
{{range .Emojis}}
|
||||
<div class="emoji-item">
|
||||
<img class="emoji" src="{{.URL}}" alt="{{.ShortCode}}" />
|
||||
<img class="emoji" src="{{.URL}}" alt="{{.ShortCode}}" height="32" />
|
||||
<div class="emoji-shortcode">:{{.ShortCode}}:</div>
|
||||
</div>
|
||||
{{end}}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<div class="user-info">
|
||||
<div class="user-info-img-container">
|
||||
<a class="img-link" href="/timeline/home" title="home">
|
||||
<img class="user-info-img" src="{{.User.AvatarStatic}}" alt="profile-avatar" />
|
||||
<img class="user-info-img" src="{{.User.AvatarStatic}}" alt="profile-avatar" height="64" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="user-info-details-container">
|
||||
|
|
|
|||
|
|
@ -19,13 +19,13 @@
|
|||
{{range .Notifications}}
|
||||
<div class="notification-container {{if .Pleroma}}{{if not .Pleroma.IsSeen}}unread{{end}}{{end}}">
|
||||
{{if eq .Type "follow"}}
|
||||
<div class="notification-follow-container">
|
||||
<div>
|
||||
<div class="status-profile-img-container">
|
||||
<a class="img-link" href="/user/{{.Account.ID}}">
|
||||
<img class="status-profile-img" src="{{.Account.AvatarStatic}}" title="{{.Account.Acct}}" alt="profile-avatar" />
|
||||
<img class="status-profile-img" src="{{.Account.AvatarStatic}}" title="{{.Account.Acct}}" alt="profile-avatar" height="48" />
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<div class="notification-follow">
|
||||
<div class="notification-info-text">
|
||||
<span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span>
|
||||
<span> followed you </span>
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
{{else if eq .Type "reblog"}}
|
||||
<div class="retweet-info">
|
||||
<a class="img-link" href="/user/{{.Account.ID}}">
|
||||
<img class="status-profile-img" src="{{.Account.AvatarStatic}}" title="{{.Account.Acct}}" alt="avatar" />
|
||||
<img class="status-profile-img" src="{{.Account.AvatarStatic}}" title="{{.Account.Acct}}" alt="avatar" height="48" />
|
||||
</a>
|
||||
<span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span>
|
||||
<span> retweeted your post </span>
|
||||
|
|
@ -58,7 +58,7 @@
|
|||
{{else if eq .Type "favourite"}}
|
||||
<div class="retweet-info">
|
||||
<a class="img-link" href="/user/{{.Account.ID}}">
|
||||
<img class="status-profile-img" src="{{.Account.AvatarStatic}}" title="{{.Account.Acct}}" alt="avatar" />
|
||||
<img class="status-profile-img" src="{{.Account.AvatarStatic}}" title="{{.Account.Acct}}" alt="avatar" height="48" />
|
||||
</a>
|
||||
<span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span>
|
||||
<span> liked your post </span>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
{{if .Reblog}}
|
||||
<div class="retweet-info">
|
||||
<a class="img-link" href="/user/{{.Account.ID}}">
|
||||
<img class="status-profile-img" src="{{.Account.AvatarStatic}}" title="{{.Account.Acct}}" alt="avatar" />
|
||||
<img class="status-profile-img" src="{{.Account.AvatarStatic}}" title="{{.Account.Acct}}" alt="avatar" height="24" />
|
||||
</a>
|
||||
<span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span>
|
||||
retweeted
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
<div class="status-container status-{{.ID}}" data-id="{{.ID}}">
|
||||
<div class="status-profile-img-container">
|
||||
<a class="img-link" href="/user/{{.Account.ID}}">
|
||||
<img class="status-profile-img" src="{{.Account.AvatarStatic}}" title="{{.Account.Acct}}" alt="avatar" />
|
||||
<img class="status-profile-img" src="{{.Account.AvatarStatic}}" title="{{.Account.Acct}}" alt="avatar" height="48" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="status">
|
||||
|
|
@ -81,7 +81,7 @@
|
|||
<a href="{{.URL}}" target="_blank" title="{{.Description}}"> [image] </a>
|
||||
{{else}}
|
||||
<a class="img-link" href="{{.URL}}" target="_blank" title="{{.Description}}">
|
||||
<img class="status-image" src="{{.URL}}" alt="status-image" />
|
||||
<img class="status-image" src="{{.URL}}" alt="status-image" height="240" />
|
||||
{{if (and $.Ctx.MaskNSFW $s.Sensitive)}}
|
||||
<div class="status-nsfw-overlay"></div>
|
||||
{{end}}
|
||||
|
|
@ -103,7 +103,7 @@
|
|||
<a href="{{.URL}}" target="_blank" title="{{.Description}}"> [video] </a>
|
||||
{{else}}
|
||||
<div class="status-video-container" title="{{.Description}}">
|
||||
<video class="status-video" controls>
|
||||
<video class="status-video" controls height="240">
|
||||
<source src="{{.URL}}">
|
||||
<a href="{{.URL}}" target="_blank"> [video] </a>
|
||||
</video>
|
||||
|
|
@ -211,7 +211,7 @@
|
|||
{{end}}
|
||||
</a>
|
||||
</div>
|
||||
<div class="status-action">
|
||||
<div class="status-action status-action-last">
|
||||
<a class="status-time" href="{{if not .ShowReplies}}/thread/{{.ID}}{{end}}#status-{{.ID}}"
|
||||
{{if $.Ctx.ThreadInNewTab}}target="_blank"{{end}}>
|
||||
<time datetime="{{FormatTimeRFC3339 .CreatedAt}}" title="{{FormatTimeRFC822 .CreatedAt}}">
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<div>
|
||||
<div class="user-profile-img-container">
|
||||
<a class="img-link" href="{{.User.AvatarStatic}}" target="_blank">
|
||||
<img class="user-profile-img" src="{{.User.AvatarStatic}}" alt="profile-avatar" />
|
||||
<img class="user-profile-img" src="{{.User.AvatarStatic}}" alt="profile-avatar" height="96" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="user-profile-details-container">
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<div class="user-list-item">
|
||||
<div>
|
||||
<a class="img-link" href="/user/{{.ID}}">
|
||||
<img class="status-profile-img" src="{{.AvatarStatic}}" title="{{.Acct}}" alt="avatar" />
|
||||
<img class="status-profile-img" src="{{.AvatarStatic}}" title="{{.Acct}}" alt="avatar" height="48" />
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue