deepStateMirrors/tabi
1
0
Fork 1
mirror of https://github.com/welpo/tabi.git synced 2026-04-26 09:57:20 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

💄 style(webmentions): update dynamic webmentions css & js templates

Browse source
This commit is contained in:
Henri Bourcereau 2025-05-08 16:27:43 +02:00
parent fab267f0a7
commit 0fac9e4a8d
3 changed files with 338 additions and 302 deletions
Download patch file Download diff file Expand all files Collapse all files

214
sass/parts/_webmention.scss
View file

@ -1,96 +1,132 @@
#webmentions {
margin: 0;
position: relative;
z-index: 100;
line-height: 1.2em;
color: var(--text-color);
background-color: var(--background-color);
}
margin: 0;
position: relative;
z-index: 100;
line-height: 1.2em;
color: var(--text-color);
background-color: var(--background-color);
#webmentions .comments {
max-height: 20em;
overflow-x: hidden;
overflow-y: scroll;
h2 {
font-size: 1.1em;
margin-bottom: 1.5em;
}
h3 {
font-size: 0.9em;
display: flex;
align-items: center;
.svg-icon, span {
margin-right: .375rem;
}
}
ol {
padding: 0;
}
li, p {
font-family: inherit;
}
.likes {
display: flex;
flex-wrap: wrap;
list-style: none;
padding-left: 1rem;
li {
margin-bottom: .375rem;
// margin-left: -1rem;
position: relative;
img {
border-radius: 50%;
height: 3rem;
-o-object-fit: cover;
object-fit: cover;
display: block;
height: auto;
max-width: 100%;
}
}
}
.comment {
font-size: 80%;
}
#webmentions h2 {
font-size: medium;
margin: 0;
margin-top: 1.4em;
margin-bottom: 1.2em;
padding: 2px;
background: var(--background-color);
}
#webmentions .reacts img {
margin: 3px -1ex 1px 0;
display: inline;
}
#webmentions img.missing {
background: white;
border: dashed black 1px;
}
#webmentions ul {
list-style-type: none;
margin: 0;
padding: 4px;
}
#webmentions li {
text-indent: -1em;
padding-left: 1em;
}
#webmentions a.reaction {
position: relative;
text-decoration: none;
text-shadow: 0px 0px 3px white;
margin-right: 0;
letter-spacing: -1ex;
margin-right: 1ex;
}
#webmentions a.source {
margin-right: 1ex;
text-decoration: none;
color: var(--primary-color);
background-color: var(--background-color);
}
#webmentions a.reaction img {
max-height: 1.3em;
display: inline;
width: auto;
margin-right: -1ex;
border-radius: 25%;
}
#webmentions a.reaction sub {
font-size: 50%;
}
#webmentions .comments li {
white-space: nowrap;
text-overflow: ellipsis;
box-shadow: rgba(50,50,93,.25) 0px 2px 5px -1px,rgba(0,0,0,.3) 0px 1px 3px -1px;
border-radius: 0.5rem;
padding: 0.5rem;
padding-bottom: 0;
background: var(--bg-1);
min-height: 100px;
overflow: hidden;
}
margin-bottom: 0.5em;
#webmentions .comments li .text {
color: var(--meta-color);
font-style: italic;
text-decoration: none;
text-wrap: wrap;
padding-left: 0.5em;
}
#webmentions .comments li .name {
color: var(--meta-color);
padding-left: 0.5em;
}
div {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
}
#webmentions .comments li .emoji {
display: none;
}
p {
line-height: 1.5em;
}
.p-author {
font-size: 1.3em;
font-style: bold;
}
.u-url {
font-style: italic;
text-decoration: underline;
}
.u-author {
display: flex;
align-items: center;
img {
height: 2rem;
margin-right: .625rem;
width: 2rem;
display: block;
max-width: 100%;
}
}
}
form {
input {
flex: 1;
border: 1px solid var(--divider-color);
border-radius: 20px 0px 0px 20px;
background-color: var(--input-background-color);
color: var(--text-color);
font-size: 1rem;
padding-inline: 1rem 1rem;
padding-block: .75rem;
width: calc(60% - 2rem);
}
button {
flex: 1;
border: 1px solid var(--divider-color);
border-radius: 0px 20px 20px 0px;
background-color: var(--input-background-color);
color: var(--text-color);
font-size: 1rem;
padding-inline: 0.7rem 0.7rem;
padding-block: .75rem;
width: 7rem;
}
button:hover {
background-color: var(--primary-color);
color: var(--hover-color);
cursor: pointer;
}
}
}