moon
/
bloat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix CSS issues

This commit is contained in:
r 2020-10-19 05:20:57 +00:00
parent 7d989d56e5
commit d7e0db7498
3 changed files with 54 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
static/style.css
View File

@ -9,7 +9,11 @@
} }
.status-container-container.highlight { .status-container-container.highlight {
background-color: #cccccc; background-color: #eeeeee;
}
.status-container {
display: flex;
} }
.status-content { .status-content {
@ -30,9 +34,9 @@
width: auto; width: auto;
max-height: 240px; max-height: 240px;
max-width: 280px; max-width: 280px;
width: auto;
vertical-align: bottom; vertical-align: bottom;
object-fit: contain; object-fit: contain;
margin-bottom: 5px;
} }
.status-media-container { .status-media-container {
@ -41,18 +45,25 @@
.status-profile-img-container { .status-profile-img-container {
margin-right: 8px; margin-right: 8px;
float: left; display: inline-block;
vertical-align: top;
} }
.status-profile-img { .status-profile-img {
height: 48px; height: 48px;
width: 48px; width: 48px;
min-height: 48px;
min-width: 48px;
max-height: 48px;
max-width: 48px;
vertical-align: top; vertical-align: top;
object-fit: contain; object-fit: contain;
margin-top: 2px;
} }
.status { .status {
overflow: auto; display: inline-block;
vertical-align: top;
} }
.status-dname { .status-dname {
@ -114,24 +125,29 @@
} }
.retweet-info { .retweet-info {
margin: 0 0 2px 24px; margin: 0 0 4px 24px;
} }
.retweet-info .status-profile-img { .retweet-info .status-profile-img {
height: 24px; height: 24px;
width: 24px; width: 24px;
min-height: 24px;
min-width: 24px;
max-height: 24px;
max-width: 24px;
vertical-align: middle; vertical-align: middle;
} }
.retweet-info .status-dname{ .retweet-info .status-dname {
margin-left: 4px margin-left: 4px;
} }
.post-content { .post-content {
padding: 4px; padding: 4px;
font-size: 11pt; font-size: 11pt;
font-family: initial; font-family: initial;
max-width: 100%; width: 100%;
box-sizing: border-box;
} }
.pagination { .pagination {
@ -159,6 +175,8 @@
.notification-follow-container { .notification-follow-container {
overflow: auto; overflow: auto;
display: flex;
align-items: center;
} }
.notification-follow { .notification-follow {
@ -230,6 +248,7 @@
width: 96px; width: 96px;
vertical-align: top; vertical-align: top;
object-fit: contain; object-fit: contain;
margin-top: 2px;
} }
.user-profile-decription { .user-profile-decription {
@ -275,12 +294,10 @@ a:hover,
.img-link { .img-link {
display: inline-block; display: inline-block;
position: relative; position: relative;
margin: 2.5px 0;
} }
.status-profile-img-container .img-link { .status-profile-img-container .img-link {
width: 48px; width: 48px;
overflow: hidden;
} }
.status-nsfw-overlay { .status-nsfw-overlay {
@ -307,30 +324,39 @@ a:hover,
} }
.post-form-field>* { .post-form-field>* {
vertical-align: middle; vertical-align: middle;
} }
.emoji-item { .emoji-item-container {
min-width: 220px; min-width: 220px;
display: inline-block; display: inline-block;
margin: 4px 0; margin: 4px 0;
} }
.emoji-item {
display: flex;
align-items: center;
}
img.emoji { img.emoji {
height: auto; height: auto;
width: auto; width: auto;
max-height: 32px; max-height: 32px;
max-width: 32px; max-width: 32px;
min-height: 32px;
min-width: 32px;
vertical-align: middle; vertical-align: middle;
object-fit: contain;
} }
.status-dname img.emoji { .status-dname img.emoji {
height: 24px; height: 24px;
min-height: 24px;
min-width: 24px;
} }
.emoji-shortcode { .emoji-shortcode {
vertical-align: middle; margin-left: 4px;
display: inline-block;
} }
.post-form-emoji-link { .post-form-emoji-link {
@ -342,6 +368,7 @@ img.emoji {
width: 64px; width: 64px;
vertical-align: middle; vertical-align: middle;
object-fit: contain; object-fit: contain;
margin-top: 2px;
} }
.user-info-img-container { .user-info-img-container {
@ -353,7 +380,8 @@ img.emoji {
overflow: auto; overflow: auto;
} }
.user-info-details-container>div { .user-info-details-name,
.user-info-details-nav {
margin-bottom: 4px; margin-bottom: 4px;
} }
@ -367,11 +395,14 @@ img.emoji {
.user-list-item { .user-list-item {
overflow: auto; overflow: auto;
margin: 0 0 12px 0;
display: flex;
align-items: center;
} }
.user-list-profile-img { .user-list-profile-img {
float: left; float: left;
margin: 0 8px 8px 0; margin: 0 8px 0 0;
} }
.user-list-name { .user-list-name {

8
templates/emoji.tmpl
View File

@ -4,9 +4,11 @@
<div class="emoji-list-container"> <div class="emoji-list-container">
{{range .Emojis}} {{range .Emojis}}
<div class="emoji-item"> <div class="emoji-item-container">
<img class="emoji" src="{{.URL}}" alt="{{.ShortCode}}" height="32" /> <div class="emoji-item">
<div class="emoji-shortcode">:{{.ShortCode}}:</div> <img class="emoji" src="{{.URL}}" alt="{{.ShortCode}}" height="32" />
<span class="emoji-shortcode">:{{.ShortCode}}:</span>
</div>
</div> </div>
{{end}} {{end}}
</div> </div>

4
templates/nav.tmpl
View File

@ -7,13 +7,13 @@
</a> </a>
</div> </div>
<div class="user-info-details-container"> <div class="user-info-details-container">
<div> <div class="user-info-details-name">
<span class="status-dname"> {{EmojiFilter .User.DisplayName .User.Emojis}} </span> <span class="status-dname"> {{EmojiFilter .User.DisplayName .User.Emojis}} </span>
<a class="nav-link" href="/user/{{.User.ID}}"> <a class="nav-link" href="/user/{{.User.ID}}">
<span class="status-uname"> @{{.User.Acct}} </span> <span class="status-uname"> @{{.User.Acct}} </span>
</a> </a>
</div> </div>
<div> <div class="user-info-details-nav">
<a class="nav-link" href="/timeline/home">home</a> <a class="nav-link" href="/timeline/home">home</a>
<a class="nav-link" href="/timeline/direct">direct</a> <a class="nav-link" href="/timeline/direct">direct</a>
<a class="nav-link" href="/timeline/local">local</a> <a class="nav-link" href="/timeline/local">local</a>