upd: rework threading/post ui 1/2

Co-authored-by: Gaspard Wierzbinski <contact@cpluspatch.com>
Co-authored-by: Marie <marie@kaifa.ch>
This commit is contained in:
Insert5StarName 2023-12-02 01:39:29 +01:00
parent ad5a6c1e41
commit 1a4bff7698
8 changed files with 327 additions and 81 deletions

View file

@ -35,51 +35,48 @@ const faviconUrl = $computed(() => props.instance ? getProxiedImageUrlNullable(p
const themeColor = instance.themeColor ?? '#777777';
const bg = {
background: `linear-gradient(90deg, ${themeColor}, ${themeColor}00)`,
//background: `linear-gradient(90deg, ${themeColor}, ${themeColor}00)`,
background: `${themeColor}`,
};
</script>
<style lang="scss" module>
$height: 2ex;
.root {
display: flex;
align-items: center;
height: $height;
border-radius: var(--radius-xs) 0 0 var(--radius-xs);
height: 1.5ex;
border-radius: var(--radius-xl);
margin-top: 5px;
padding: 4px;
overflow: clip;
color: #fff;
text-shadow: /* .866 ≈ sin(60deg) */
1px 0 1px #000,
.866px .5px 1px #000,
.5px .866px 1px #000,
0 1px 1px #000,
-.5px .866px 1px #000,
-.866px .5px 1px #000,
-1px 0 1px #000,
-.866px -.5px 1px #000,
-.5px -.866px 1px #000,
0 -1px 1px #000,
.5px -.866px 1px #000,
.866px -.5px 1px #000;
mask-image: linear-gradient(90deg,
rgb(0,0,0),
rgb(0,0,0) calc(100% - 16px),
rgba(0,0,0,0) 100%
);
text-shadow: -1px -1px 0 var(--bg),1px -1px 0 var(--bg),-1px 1px 0 var(--bg),1px 1px 0 var(--bg)
}
.icon {
height: $height;
height: 2ex;
flex-shrink: 0;
}
.name {
margin-left: 4px;
line-height: 1;
font-size: 0.9em;
font-size: 0.8em;
font-weight: bold;
white-space: nowrap;
overflow: visible;
overflow: hidden;
overflow-wrap: anywhere;
max-width: 300px;
text-overflow: ellipsis;
&::-webkit-scrollbar {
display: none;
}
}
@container (max-width: 400px) {
.name {
max-width: 50px;
}
}
</style>