Better header navigation display

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

diff --git a/core/css/header.scss b/core/css/header.scss
index 72863696d6a83d3dfa1f508962961ea69ec04c61..bf36084370749bd2b3c3ee264020952299e6a85b 100644 (file)
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -461,6 +461,9 @@ nav[role='navigation'] {
        li {
                position: relative;
                cursor: pointer;
+               margin: 0 2px;
+               display: flex;
+               justify-content: center;
 
                a {
                        position: relative;
@@ -472,82 +475,73 @@ nav[role='navigation'] {
                        justify-content: center;
                        opacity: .6;
                }
-       }
 
-       .app-loading {
-               > svg {
-                       display: none;
+               /* focused app visual feedback */
+               &:hover a,
+               a:focus,
+               a.active {
+                       opacity: 1;
                }
-               .icon-loading-small-dark {
-                       width: 20px;
-                       height: 20px;
-                       display: block !important;
+       
+               &:hover a + span,
+               a:focus + span,
+               &:hover span,
+               &:focus span,
+               a:focus span {
+                       display: inline-block;
+                       text-overflow: initial;
+                       width: auto;
+                       overflow: hidden;
+                       background-color: var(--color-primary-element);
+                       padding: 0 5px;
                }
-       }
 
-       /* focused app visual feedback */
-       li:hover a,
-       li a:focus,
-       li a.active {
-               opacity: 1;
-       }
-
-       li:hover a,
-       li a:focus {
-               + span {
+               /* hidden apps menu */
+               img,
+               .icon-more-white {
                        display: inline-block;
+                       width: 20px;
+                       height: 20px;
+               }
+       
+               /* App title */
+               span {
+                       opacity: 0;
+                       position: absolute;
+                       color: var(--color-primary-text);
+                       bottom: -5px;
+                       width: calc(100% - 4px);
+                       text-align: center;
+                       overflow: hidden;
+                       text-overflow: ellipsis;
+                       transition: all var(--animation-quick) ease;
                }
-       }
-
-       li:hover span,
-       li:focus span,
-       li a:focus span {
-               display: inline-block;
-       }
-
-       /* hidden apps menu */
-       li img,
-       .icon-more-white {
-               display: inline-block;
-               width: 20px;
-               height: 20px;
-       }
-
-       /* App title */
-       li span {
-               opacity: 0;
-               position: absolute;
-               color: var(--color-primary-text);
-               bottom: -5px;
-               width: 100%;
-               text-align: center;
-               overflow: hidden;
-               text-overflow: ellipsis;
-       }
-
-
-       /* Set up transitions for showing app titles on hover */
-       li {
-               /* Prevent flicker effect because of low-hanging span element */
-               overflow-y: hidden;
 
+               /* Set up transitions for showing app titles on hover */
                /* App icon */
                svg,
                .icon-more-white {
                        transition: transform var(--animation-quick) ease;
                }
 
-               /* App title */
-               span {
-                       transition: all var(--animation-quick) ease;
-               }
-
                /* Triangle */
                a::before {
                        transition: border var(--animation-quick) ease;
                }
        }
 
+       .app-loading {
+               > svg {
+                       display: none;
+               }
+               .icon-loading-small-dark {
+                       width: 20px;
+                       height: 20px;
+                       display: block !important;
+               }
+       }
+
+
        /* Show all app titles on hovering app menu area */
        &:hover {
                li {