HoovesSocial/hippofish
2
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

style: don't truncate URL's

Browse source
This commit is contained in:
freeplay 2023-07-10 19:02:31 -04:00
parent 4176328b8e
commit a37daacc56
3 changed files with 28 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/client/src/components/MkUrlPreview.vue
View file

@ -255,7 +255,7 @@ onUnmounted(() => {
margin-bottom: 0.2em; margin-bottom: 0.2em;
text-decoration: underline; text-decoration: underline;
text-decoration-color: transparent; text-decoration-color: transparent;
transition: text-decoration-color .2s; transition: text-decoration-color 0.2s;
} }
p { p {
margin-bottom: -0.5em; margin-bottom: -0.5em;

14
packages/client/src/components/global/MkUrl.vue
View file

@ -75,13 +75,11 @@ const target = self ? null : "_blank";
<style lang="scss" scoped> <style lang="scss" scoped>
.url { .url {
white-space: nowrap;
max-width: 80%;
display: inline-block;
overflow: clip;
text-overflow: ellipsis;
text-decoration: none !important; text-decoration: none !important;
line-height: 1.05; > span {
text-decoration: underline var(--fgTransparent);
transition: text-decoration-color 0.2s;
}
> .icon { > .icon {
padding-left: 2px; padding-left: 2px;
@ -111,5 +109,9 @@ const target = self ? null : "_blank";
> .hash { > .hash {
font-style: italic; font-style: italic;
} }
&:hover span {
text-decoration-color: var(--link);
}
} }
</style> </style>

37
packages/client/src/style.scss
View file

@ -147,7 +147,7 @@ a {
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
text-decoration: underline; text-decoration: underline;
text-decoration-color: transparent; text-decoration-color: transparent;
transition: text-decoration-color .2s; transition: text-decoration-color 0.2s;
&:hover { &:hover {
text-decoration-color: currentColor; text-decoration-color: currentColor;
} }
@ -635,24 +635,25 @@ hr {
._link { ._link {
position: relative; position: relative;
color: var(--link); color: var(--link);
text-decoration: none !important;
&::before, &::after { // &::before,
content: ""; // &::after {
position: absolute; // content: "";
bottom: 0; // position: absolute;
left: 0; // bottom: 0;
width: 0%; // left: 0;
border-bottom: 1px solid currentColor; // width: 0%;
transition: 0.3s ease-in-out; // border-bottom: 1px solid currentColor;
} // transition: 0.3s ease-in-out;
&::before { // }
width: 100%; // &::before {
opacity: .4; // width: 100%;
} // opacity: 0.4;
&:hover:after, &:focus:after { // }
width: 100%; // &:hover:after,
} // &:focus:after {
// width: 100%;
// }
} }
._caption { ._caption {