Make sure most app names don’t ellipsize, fix #22845, fix #22219

Signed-off-by: Jan C. Borchardt <hey@jancborchardt.net>
This commit is contained in:
Jan C. Borchardt 2020-09-17 19:56:53 +02:00 committed by backportbot[bot]
parent 5d81cb36b5
commit ada7ad6930
1 changed files with 15 additions and 3 deletions

View File

@ -433,7 +433,7 @@ nav[role='navigation'] {
li {
position: relative;
cursor: pointer;
margin: 0 2px;
padding: 0 2px;
display: flex;
justify-content: center;
@ -446,6 +446,9 @@ nav[role='navigation'] {
align-items: center;
justify-content: center;
opacity: .6;
// Make sure most app names dont ellipsize
letter-spacing: -0.5px;
font-size: 12px;
}
/* focused app visual feedback */
@ -453,19 +456,28 @@ nav[role='navigation'] {
a:focus,
a.active {
opacity: 1;
font-weight: bold;
}
// Text size back to normal for hover/focus
&:hover a,
a:focus {
font-size: 14px;
}
&:hover a + span,
a:focus + span,
&:hover span,
&:focus span,
a:focus span {
a:focus span,
a.active span {
display: inline-block;
text-overflow: initial;
width: auto;
overflow: hidden;
padding: 0 5px;
z-index: 2;
margin-bottom: -1px; // for vertical alignment
}
/* hidden apps menu */
@ -482,7 +494,7 @@ nav[role='navigation'] {
position: absolute;
color: var(--color-primary-text);
bottom: 2px;
width: calc(100% - 4px);
width: 100%;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;