More CSS fixes

FossilOrigin-Name: f34213e149b5f45b25463680335149a6fa9f1b4865b8680157118f21828d949e
This commit is contained in:
nekobit 2022-07-07 06:06:31 +00:00
parent 510e97aeeb
commit 05c0407ced
4 changed files with 58 additions and 32 deletions

4
dist/js/main.js vendored
View file

@ -177,7 +177,7 @@ function status_interact_props(e)
let type = interact.parentNode.querySelector(".itype");
if (type === null)
return true;
let status = interact.closest(".status-table");
let status = interact.closest(".status");
send_request("/treebird_api/v1/interact",
{
@ -202,7 +202,7 @@ function status_interact_props(e)
function create_reply_form(e)
{
e.preventDefault();
let status = e.target.closest(".status-table");
let status = e.target.closest(".status");
if (status.nextSibling.className === "statusbox-quickreply")
{

78
dist/treebird20.css vendored
View file

@ -71,12 +71,9 @@ a, a:visited, a:hover, a:active
.mention
{
color: #cc0000;
color: #808080;
text-decoration: none;
background-color: #ffcccc;
border-radius: 3px;
padding-left: 2px;
padding-right: 2px;
}
.greentext
@ -95,7 +92,6 @@ table.ui-table td
#content
{
overflow: hidden;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
@ -416,7 +412,14 @@ table.present th, table.present td
box-sizing: border-box;
}
select
{
background: linear-gradient(#f8f8f8, #d8d8d8);
border: 1px solid #aaa;
border-radius: 3px;
padding: 3px;
min-width: 100px;
}
/*************************************************
* BUTTONS *
@ -641,8 +644,10 @@ svg.in-reply-to-icon
stroke: #606060;
}
.in-reply-to
.in-reply-to,
.in-reply-to a
{
font-size: 0.9rem;
color: #606060;
}
@ -682,13 +687,13 @@ svg.in-reply-to-icon
.notification-info
{
margin-top: 9px;
margin-left: 28px;
margin-bottom: 7px;
}
.notification-info img,
.notification-info-format img
{
margin-left: 41px;
width: 24px;
height: 24px;
margin-right: 6px;
@ -712,12 +717,16 @@ svg.in-reply-to-icon
/***************************
* Statuses *
**************************/
.status
{
padding: 11px 0px 0px 11px;
border-bottom: 1px dashed #cacaca;
}
.status .status-table,
.notification-regular,
.scrobble
{
padding: 10px 10px 0 10px;
border-bottom: 1px dashed #cacaca;
width: 100%;
border-spacing: 0px;
}
@ -727,8 +736,8 @@ svg.in-reply-to-icon
padding: 5px 10px;
}
.status-table.focused,
.status-table:target
.status.focused,
.status:target
{
background-color: #ffdddd;
border-left: 3px solid #aa0000;
@ -745,9 +754,9 @@ svg.in-reply-to-icon
.account-sidebar .acct-pfp
{
display: inline-block;
width: 52px;
min-width: 52px;
height: 52px;
width: 48px;
min-width: 48px;
height: 48px;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
@ -765,6 +774,7 @@ svg.in-reply-to-icon
height: 12px;
font-size: 10px;
text-align: center;
vertical-align: middle;
cursor: pointer;
}
@ -797,7 +807,7 @@ svg.in-reply-to-icon
.pfp-td
{
width: 56px;
width: 52px;
border-collapse: collapse !important;
padding: 6px;
}
@ -805,8 +815,8 @@ svg.in-reply-to-icon
.pfp-td img
{
border-radius: 5px;
width: 56px;
height: 56px;
width: 52px;
height: 52px;
object-fit: cover;
}
@ -868,24 +878,23 @@ svg.in-reply-to-icon
.status .instance-info
{
font-style: italic;
text-decoration: none;
font-size: 14px;
vertical-align: middle;
padding: 0 6px;
color: #303030;
color: #505050;
}
.status .poster-stats
{
position: relative;
display: block;
max-width: 480px;
max-width: 490px;
}
.status-hide:checked + .status .poster-stats
{
max-width: 540px;
max-width: 550px;
}
.poster-stats .alignend
@ -897,6 +906,12 @@ svg.in-reply-to-icon
position: absolute;
}
.static.focused .poster-stats .alignend,
.status:target .poster-stats .alignend
{
background-color: #ffdddd;
}
.status .username,
.notification-regular .username
{
@ -909,9 +924,10 @@ svg.in-reply-to-icon
.status .status-content
{
margin: 2px 0 0 0;
margin: 4px 0 0 0;
overflow-wrap: anywhere;
width: 480px;
width: 490px;
line-height: 1.2;
display: block;
}
@ -1222,7 +1238,6 @@ p}
overflow: hidden;
}
.acct-displayname
{
font-size: 26px;
@ -1348,6 +1363,12 @@ p}
min-width: 42px;
}
.status-interact .statbtn svg
{
width: 18px;
height: 18px;
}
.view-btn
{
min-width: 25px !important;
@ -1358,6 +1379,11 @@ p}
min-width: 0px !important;
}
.status-interact svg
{
stroke: #303030;
}
.active-anim
{
animation: interact .7s 1;

View file

@ -1,6 +1,6 @@
<table class="account-stub">
<table class="chat-contact">
<tr>
<td class="pfp-td">
<td>
<a href="{{%s:prefix}}/@{{%s:acct}}"><img src="{{%s:avatar}}"></a>
</td>
<td class="account-stub-info-wrapper">

View file

@ -1,7 +1,7 @@
<input type="checkbox" class="status-hide" id="status-toggle-{{%s:status_id}}" {{ %s:thread_hidden }}>
<div class="status">
<div class="status" id="{{%s:status_id}}">
{{ %s : notif_info }}
<table id="{{%s:status_id}}" class="status-table ui-table">
<table class="status-table ui-table">
<tr>
<td class="pfp-td {{%s:is_cat}} {{%s:is_bun}}">
<img src="{{%s:avatar}}" loading="lazy">