franzz/spot
1
0
Fork 0
Code Issues Pull Requests Actions Releases Wiki Activity

Harmonize comment CSS

Browse Source
This commit is contained in:
Franzz
2026-05-09 07:54:50 +02:00
parent 415bd9d0cf
commit 3c8cdbaad6
2 changed files with 35 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/projectMediaLink.vue
View File

@@ -53,7 +53,9 @@ export default {
class="clickable" class="clickable"
/> />
<span class="drill-icon"><spotIcon :icon="'drill-'+options.subtype" /></span> <span class="drill-icon"><spotIcon :icon="'drill-'+options.subtype" /></span>
<span v-if="options.comment && type == 'post'" class="comment">{{ options.comment }}</span> <div v-if="options.comment && type == 'post'" class="comment">
<p>{{ options.comment }}</p>
</div>
</a> </a>
<div style="display:none"> <div style="display:none">
<span v-if="options.comment" ref="comment" class="lb-caption-line comment desktop"> <span v-if="options.comment" ref="comment" class="lb-caption-line comment desktop">

63
src/styles/_page.project.feed.scss
View File

@@ -109,21 +109,40 @@
} }
} }
.comment { .drill {
position: absolute; &:hover .comment {
left: 0; opacity: 0.3;
bottom: 0; }
width: 100%;
margin: 0; .comment {
padding: var.$elem-spacing; position: absolute;
line-height: normal; left: 0;
box-sizing: border-box; bottom: 0;
border-radius: 0 0 var.$block-radius var.$block-radius; width: 100%;
transition: opacity 0.3s; margin: 0;
cursor: auto; padding: var.$elem-spacing;
font-size: 0.9em; line-height: normal;
box-sizing: border-box;
border-radius: 0 0 var.$block-radius var.$block-radius;
transition: opacity 0.3s;
cursor: auto;
font-size: 0.9em;
&:hover {
opacity: 1;
}
p {
margin: 0;
}
p + p {
margin-top: var.$elem-spacing;
}
}
} }
&.message { &.message {
background: color.$message-bg; background: color.$message-bg;
color: color.$message; color: color.$message;
@@ -152,24 +171,10 @@
.drill-hover-icon { .drill-hover-icon {
color: color.$message-flashy; color: color.$message-flashy;
} }
.comment {
opacity: 0.3;
}
} }
.comment { .comment {
background: color.$message-bg-light; background: color.$message-bg-light;
&:hover {
opacity: 1;
}
p {
margin: 0;
}
p + p {
margin-top: var.$elem-spacing;
}
} }
} }
@@ -272,10 +277,6 @@
filter: drop-shadow(0px 1px 1px color.$over-img-shadow); filter: drop-shadow(0px 1px 1px color.$over-img-shadow);
} }
} }
.comment {
opacity: 0;
}
} }
} }