mirror of
https://github.com/zombieFox/nightTab.git
synced 2025-01-11 16:38:42 +01:00
[design] improve overflow for long letter and name lengths
This commit is contained in:
parent
2bd6aad056
commit
ff56cec78e
@ -158,22 +158,25 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.link-letter {
|
.link-letter {
|
||||||
text-align: center;
|
|
||||||
font-family: var(--font-fjalla);
|
font-family: var(--font-fjalla);
|
||||||
color: rgb(var(--accent));
|
color: rgb(var(--accent));
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
||||||
.is-link-block .link-letter {
|
.is-link-block .link-letter {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
overflow: hidden;
|
text-align: center;
|
||||||
text-overflow: ellipsis;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.is-link-list .link-letter {
|
.is-link-list .link-letter {
|
||||||
margin: 0 0.5em 0 0;
|
margin: 0 0.5em 0 0;
|
||||||
font-size: 1.5em;
|
font-size: 1.5em;
|
||||||
|
flex-shrink: 0;
|
||||||
|
max-width: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.link-item:hover .link-letter,
|
.link-item:hover .link-letter,
|
||||||
@ -184,15 +187,20 @@
|
|||||||
.link-name {
|
.link-name {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
text-align: center;
|
|
||||||
font-family: var(--font-regular);
|
font-family: var(--font-regular);
|
||||||
color: var(--gray-08);
|
color: var(--gray-08);
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
opacity: 1;
|
max-width: 100%;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.is-link-block .link-name {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-link-list .link-name {}
|
||||||
|
|
||||||
.link-item:hover .link-name,
|
.link-item:hover .link-name,
|
||||||
.link-item:focus .link-name {
|
.link-item:focus .link-name {
|
||||||
color: var(--white);
|
color: var(--white);
|
||||||
|
Loading…
Reference in New Issue
Block a user