hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve comments styles, use more fitting cursors

Browse Source
This commit is contained in:
daudix
2024-08-30 06:42:22 +03:00
parent c821824635
commit 31a84473ba
9 changed files with 141 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
sass/_comments.scss
View File

@ -1,18 +1,15 @@
#comments {
#qrcode {
float: right;
float: inline-end;
box-sizing: content-box;
margin: 3rem 0 0 1rem;
margin-inline-start: 1rem;
margin-block-start: 3rem;
margin-block-end: 0;
background-color: white;
padding: 0.75rem;
width: 7.8125rem;
height: 7.8125rem;
:root[dir*="rtl"] & {
float: left;
margin: 3rem 1rem 0 0;
}
@media only screen and (max-width: 720px) {
display: none;
}
@ -22,6 +19,36 @@
justify-content: start;
gap: 0.25rem;
margin-block-start: 2rem;
#load-comments {
background-image: linear-gradient(to right,
var(--fg-muted-1) 50%,
var(--primary-color-alpha) 75%,
var(--fg-muted-1) 100%);
background-size: 200%;
background-color: transparent;
&:disabled {
animation: loading-fill var(--transition-long) ease-in-out alternate infinite;
transition: none;
cursor: not-allowed;
&:hover {
background-color: transparent;
color: var(--fg-muted-5);
}
&:active {
transform: none;
}
@keyframes loading-fill {
to {
background-position-x: -200%;
}
}
}
}
}
#comments-wrapper {
@ -111,7 +138,7 @@
&.op {
background-color: var(--primary-color-alpha);
padding: 0.375rem 0.75rem 0.375rem 0.5rem;
padding-inline-start: 0.625rem;
color: var(--primary-color);
&:hover {
@ -151,18 +178,59 @@
display: inline-block;
vertical-align: middle;
transition: var(--transition);
cursor: zoom-in;
width: 1.5em;
height: 1.5em;
&:hover {
transform: scale(2);
cursor: zoom-in;
}
}
.mention {
display: inline-block;
transition: var(--transition);
box-shadow: var(--edge-highlight);
border-radius: var(--rounded-corner-small);
background-color: var(--primary-color-alpha);
padding: 0.125rem 0.375rem;
line-height: 1.25;
text-decoration: none;
&:hover {
background-color: var(--primary-color);
color: var(--contrast-color);
}
&:active {
transform: scale(var(--active));
}
&.hashtag {
background-color: var(--fg-muted-1);
color: var(--fg-muted-5);
&:hover {
background-color: var(--fg-muted-5);
color: var(--fg-contrast);
}
}
}
time {
grid-area: time;
margin-block-start: 0.5rem;
font-size: 0.875rem;
line-height: 1.25;
a {
color: var(--fg-muted-5);
&:after {
background-color: var(--fg-muted-5);
}
}
}
main {