Improve comments styles, use more fitting cursors
This commit is contained in:
daudix
16
CHANGELOG.md
16
CHANGELOG.md
@ -7,6 +7,22 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
||||
|
||||
## [Unreleased](https://codeberg.org/daudix/duckquill/compare/v4.7.1...main)
|
||||
|
||||
### Added
|
||||
|
||||
- Add `external` class to comment timestamp.
|
||||
- Add hover state to slider thumb.
|
||||
- Add loading animation to "Load Comments" button.
|
||||
- Add zoom-on-hover to custom comment emojis.
|
||||
- Style mentions and hashtags.
|
||||
|
||||
### Changed
|
||||
|
||||
- Add margin between comment author name and timestamp.
|
||||
- Make comment timestamp more subtle.
|
||||
- Set socials icons as CSS variables and not inline styles.
|
||||
- Tweak padding of verified instance badge.
|
||||
- Use more fitting cursors in some contexts.
|
||||
|
||||
## [4.8.0](https://codeberg.org/daudix/duckquill/compare/v4.7.1...v4.8.0)
|
||||
|
||||
### Added
|
||||
|
||||
@ -155,6 +155,7 @@ Files named `favicon.png` and `apple-touch-icon.png` are used as favicon and app
|
||||
- [enriquekesslerm.com](https://enriquekesslerm.com)
|
||||
- [gregorni.gitlab.io](https://gregorni.gitlab.io)
|
||||
- [ikergimenez.neocities.org](https://ikergimenez.neocities.org)
|
||||
- [kaipeacock.com](https://kaipeacock.com)
|
||||
- [luciengheerbrant.com](https://luciengheerbrant.com)
|
||||
- [lukoktonos.com](http://www.lukoktonos.com)
|
||||
- [mourelask.xyz](https://mourelask.xyz)
|
||||
|
||||
@ -17,6 +17,17 @@ disclaimer = """
|
||||
- Don't interact with asbestos and moon rocks.
|
||||
"""
|
||||
[extra.comments]
|
||||
# Long thread with image
|
||||
#
|
||||
# host = "mastodon.social"
|
||||
# user = "brownpau"
|
||||
# id = "104529877688537579"
|
||||
#
|
||||
# Thread with multiple images per post
|
||||
#
|
||||
# host = "mastodon.blaede.family"
|
||||
# user = "cassidy"
|
||||
# id = "112774854109302186"
|
||||
host = "toot.community"
|
||||
user = "sungsphinx"
|
||||
id = "111789185826519979"
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -97,6 +97,8 @@
|
||||
}
|
||||
|
||||
.icon {
|
||||
-webkit-mask-image: var(--icon);
|
||||
mask-image: var(--icon);
|
||||
transition: var(--transition);
|
||||
background-color: var(--fg-muted-4);
|
||||
width: 1.5rem;
|
||||
|
||||
@ -5,6 +5,7 @@ input[type="color"] {
|
||||
position: relative;
|
||||
appearance: none;
|
||||
transition: var(--transition);
|
||||
cursor: pointer;
|
||||
border: 0.15rem solid var(--fg-muted-2);
|
||||
background-color: var(--fg-muted-1);
|
||||
width: 1rem;
|
||||
@ -119,6 +120,7 @@ input[type="range"] {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
transition: var(--transition);
|
||||
cursor: pointer;
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: 999px;
|
||||
background: var(--primary-color);
|
||||
@ -128,23 +130,42 @@ input[type="range"] {
|
||||
&::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
cursor: grab;
|
||||
box-shadow: var(--shadow);
|
||||
border-radius: 999px;
|
||||
background-color: white;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: var(--shadow-raised);
|
||||
}
|
||||
|
||||
&:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
cursor: grab;
|
||||
box-shadow: var(--shadow);
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
background-color: white;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: var(--shadow-raised);
|
||||
}
|
||||
|
||||
&:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -34,6 +34,7 @@
|
||||
background-color: transparent;
|
||||
padding: 0.5rem;
|
||||
line-height: 0;
|
||||
cursor: copy;
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--edge-highlight);
|
||||
|
||||
@ -81,6 +81,7 @@
|
||||
|
||||
let loadCommentsButton = document.getElementById("load-comments");
|
||||
loadCommentsButton.innerHTML = "{{ macros_translate::translate(key='loading', default='Loading', language_strings=language_strings) }}…";
|
||||
loadCommentsButton.disabled = true;
|
||||
|
||||
fetch("https://{{ host }}/api/v1/statuses/{{ id }}/context")
|
||||
.then(function (response) {
|
||||
@ -200,6 +201,7 @@
|
||||
let timestamp = document.createElement("time");
|
||||
timestamp.setAttribute("datetime", status.created_at);
|
||||
timestamp.appendChild(permalink);
|
||||
permalink.classList.add("external");
|
||||
|
||||
let main = document.createElement("main");
|
||||
main.setAttribute("itemprop", "text");
|
||||
@ -351,6 +353,12 @@
|
||||
}
|
||||
|
||||
loadCommentsButton.innerHTML = "{{ macros_translate::translate(key='reload', default='Reload', language_strings=language_strings) }}";
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.error('Error loading comments:', error);
|
||||
})
|
||||
.finally(function () {
|
||||
loadCommentsButton.disabled = false;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -58,7 +58,7 @@
|
||||
{%- for link in config.extra.footer.socials %}
|
||||
<li>
|
||||
<a href="{{ link.url | safe }}" rel="{{ rel_attributes }} me" title="{{ link.name }}">
|
||||
<i class="icon" style='mask-image: url("data:image/svg+xml,{{ link.icon }}"); -webkit-mask-image: url("data:image/svg+xml,{{ link.icon }}")'></i>
|
||||
<i class="icon" style='--icon: url("data:image/svg+xml,{{ link.icon }}")'></i>
|
||||
<span>{{ link.name }}</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
Reference in New Issue
Block a user