roundabout,
created on Sunday, 16 February 2025, 09:45:49 (1739699149),
received on Sunday, 16 February 2025, 09:45:51 (1739699151)
Author identity: vlad <vlad.muntoiu@gmail.com>
4b1598760f1bfa547dc11e119ca47745c905848a
static/style.css
@@ -165,7 +165,7 @@ iconify-icon {
pointer-events: none;
}
.shape-container-viewonly > .shape, .thumbnail-list > li .shape {
.shape-container-viewonly > .shape, :is(.thumbnail-list > li, .thumbnail-card) .shape {
fill: var(--color-info);
stroke: var(--color-info);
fill-opacity: 0;
@@ -174,11 +174,11 @@ iconify-icon {
stroke-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1);
}
.shape-container-viewonly > .shape-polyline, .thumbnail-list > li .shape-polyline {
.shape-container-viewonly > .shape-polyline, :is(.thumbnail-list > li, .thumbnail-card) .shape-polyline {
fill: none;
}
.shape-container-viewonly > .shape-point, .thumbnail-list > li .shape-point {
.shape-container-viewonly > .shape-point, :is(.thumbnail-list > li, .thumbnail-card) .shape-point {
stroke: var(--color-info);
transition: r 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
stroke-width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
@@ -412,20 +412,20 @@ small {
gap: 16px;
}
.thumbnail-list > li {
.thumbnail-list > li, .thumbnail-card {
transition: box-shadow 0.25s cubic-bezier(0.61, 1, 0.88, 1);
box-shadow: var(--shadow-card);
background: var(--color-card);
}
.thumbnail-list > li > a, .thumbnail-list > li {
:is(.thumbnail-list > li, .thumbnail-card) > a, :is(.thumbnail-list > li, .thumbnail-card) {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.thumbnail-list > li > .list-more {
:is(.thumbnail-list > li, .thumbnail-card) > .list-more {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
@@ -433,23 +433,23 @@ small {
padding: 8px;
}
.thumbnail-list > li:is(:hover, :focus, :has(:focus)) {
:is(.thumbnail-list > li, .thumbnail-card):is(:hover, :focus, :has(:focus)) {
box-shadow: var(--shadow-card), 0 4px 32px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08);
}
.thumbnail-list > li .annotation-zone {
:is(.thumbnail-list > li, .thumbnail-card) .annotation-zone {
transition: transform 0.25s cubic-bezier(0.61, 1, 0.88, 1),
box-shadow 0.25s cubic-bezier(0.61, 1, 0.88, 1);
}
.thumbnail-list > li .annotation-zone:hover {
:is(.thumbnail-list > li, .thumbnail-card):not(.thumbnail-card-no-zoom) .annotation-zone:hover {
position: relative;
transform: scale(2);
z-index: 1;
box-shadow: var(--shadow-textarea-active);
}
.thumbnail-list > li .list-detail {
:is(.thumbnail-list > li, .thumbnail-card) .list-detail {
padding: 8px;
display: block;
}
@@ -928,3 +928,16 @@ input[type="file"] {
display: flex;
font-style: italic;
}
.thumbnail-card-small > a > .annotation-zone {
flex: 0 0 auto;
max-width: 384px;
}
.thumbnail-card-small, .thumbnail-card-small > a {
align-items: center;
}
.thumbnail-card-small {
margin: auto;
}
templates/picture.html
@@ -261,6 +261,20 @@
{% endif %}
</x-vbox>
</x-hbox>
{% if resource.copied_from %}
<h2>Original</h2>
<div class="thumbnail-card thumbnail-card-small">
<a href="/picture/{{ resource.copied_from.id }}">
{{ annotation_display.annotation_display(resource.copied_from) }}
<div class="list-detail">
{{ resource.copied_from.title }}
</div>
</a>
<div class="list-more">
<span class="picture-author">by <a href="/profile/{{ resource.copied_from.author.username }}">{{ resource.copied_from.author.formatted_name }}</a></span>
</div>
</div>
{% endif %}
<h2>Copies</h2>
{% if resource.copies %}
<ul class="thumbnail-list">