akkoma-fe/src/components/mention_link/mention_link.scss

120 lines
2.1 KiB
SCSS
Raw Normal View History

2021-06-07 13:16:10 +00:00
.MentionLink {
position: relative;
white-space: normal;
display: inline-block;
2021-06-07 20:42:04 +00:00
color: var(--link);
2021-06-07 13:16:10 +00:00
& .new,
2021-06-07 20:42:04 +00:00
& .original {
2021-06-07 13:16:10 +00:00
display: inline-block;
border-radius: 2px;
}
.original {
opacity: 0.5;
}
.full {
position: absolute;
2021-06-07 20:42:04 +00:00
display: inline-block;
pointer-events: none;
2021-06-07 13:16:10 +00:00
opacity: 0;
2021-06-07 20:42:04 +00:00
top: 100%;
2021-06-07 13:16:10 +00:00
left: 0;
2021-06-07 20:42:04 +00:00
height: 100%;
2021-06-07 13:16:10 +00:00
word-wrap: normal;
white-space: nowrap;
transition: opacity 0.2s ease;
z-index: 1;
2021-06-07 20:42:04 +00:00
margin-top: 0.25em;
padding: 0.5em;
2021-06-07 13:16:10 +00:00
}
2021-06-07 20:42:04 +00:00
& .short,
& .full {
&::before {
content: '@';
}
}
& .new {
&,
&.-striped,
&.-solid,
&.-side {
.full {
}
.short {
&::before {
display: inline-block;
height: 50%;
font-size: 90%;
line-height: 1;
vertical-align: 6%;
}
}
.you {
padding-right: 0.25em;
}
.short {
padding-left: 0.25em;
padding-right: 0;
padding-top: 0;
padding-bottom: 0;
}
.userName {
color: var(--link);
margin-left: 0.25em;
padding-left: 0.25em;
padding-right: 0.25em;
padding-top: 0;
padding-bottom: 0;
}
}
&.-striped {
& .userName,
& .full {
background-image:
repeating-linear-gradient(
135deg,
var(--____highlight-tintColor),
var(--____highlight-tintColor) 5px,
var(--____highlight-tintColor2) 5px,
var(--____highlight-tintColor2) 10px
);
}
}
2021-06-07 13:16:10 +00:00
2021-06-07 20:42:04 +00:00
&.-solid {
& .userName,
& .full {
background-image: linear-gradient(var(--____highlight-tintColor2), var(--____highlight-tintColor2));
}
}
&.-side {
& .userName,
& .userNameFull {
box-shadow: 0 -5px 3px -4px inset var(--____highlight-solidColor);
}
}
}
.new {
2021-06-07 13:16:10 +00:00
&.-you {
& .shortName,
& .full {
font-weight: 600;
}
}
}
&:hover .new .full {
opacity: 1;
2021-06-07 20:42:04 +00:00
pointer-events: initial;
2021-06-07 13:16:10 +00:00
}
}