diff --git a/css/sideMenu.css b/css/sideMenu.css index b66e53a..8a63202 100644 --- a/css/sideMenu.css +++ b/css/sideMenu.css @@ -83,6 +83,12 @@ padding-left: 12px !important; margin-left: 5px !important; margin-left: 3px !important; + overflow: hidden; +} + +.side-menu-opener span { + position: relative; + left: 50px; } .side-menu-opener:active, .side-menu-opener:focus { diff --git a/package.json b/package.json index 05e2ef7..8609660 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "stylelint:fix": "./node_modules/.bin/stylelint src --fix" }, "dependencies": { - "axios": "^0.24.0", + "axios": "^1.6.7", "trim": "^1.0.1", "vue": "^2.6.11" }, diff --git a/src/AppMenu.vue b/src/AppMenu.vue index f90ebad..4e31f12 100644 --- a/src/AppMenu.vue +++ b/src/AppMenu.vue @@ -168,6 +168,7 @@ $header-icon-size: 20px; flex-shrink: 1; flex-wrap: wrap; } + .app-menu-main { display: flex; flex-wrap: nowrap; @@ -177,7 +178,6 @@ $header-icon-size: 20px; height: 50px; position: relative; display: flex; - opacity: .7; &.app-menu-entry__active { opacity: 1; @@ -217,6 +217,7 @@ $header-icon-size: 20px; width: $header-icon-size; height: $header-icon-size; padding: calc((100% - $header-icon-size) / 2); + box-sizing: content-box; filter: var(--background-image-invert-if-bright, var(--primary-invert-if-bright)); } @@ -226,8 +227,8 @@ $header-icon-size: 20px; font-size: 12px; color: var(--color-primary-text); text-align: center; - bottom: -5px; left: 50%; + top: 45%; display: block; min-width: 100%; transform: translateX(-50%); @@ -235,6 +236,7 @@ $header-icon-size: 20px; width: 100%; text-overflow: ellipsis; overflow: hidden; + letter-spacing: -0.5px; } &:not(.app-menu-entry__hidden-label):not(.app-menu-entry__show-hovered):hover, @@ -242,11 +244,11 @@ $header-icon-size: 20px; opacity: 1; .app-menu-entry--label { opacity: 1; - font-weight: bold; - font-size: 14px; + font-weight: bolder; bottom: 0; - width: auto; - overflow: visible; + width: 100%; + text-overflow: ellipsis; + overflow: hidden; } } } @@ -263,8 +265,10 @@ $header-icon-size: 20px; &:not(.app-menu-main__hidden-label):not(.app-menu-main__show-hovered):focus-within, .app-menu-entry:not(.app-menu-entry__hidden-label):hover, .app-menu-entry:not(.app-menu-entry__hidden-label):focus { + opacity: 1; + img { - margin-top: -6px; + margin-top: -8px; } .app-menu-entry--label { @@ -280,7 +284,7 @@ $header-icon-size: 20px; &.app-menu-main__show-hovered .app-menu-entry:hover, &.app-menu-main__show-hovered .app-menu-entry:focus { img { - margin-top: -6px; + margin-top: -8px; } .app-menu-entry--label { @@ -295,38 +299,42 @@ $header-icon-size: 20px; } ::v-deep .app-menu-more .button-vue--vue-tertiary { - color: var(--color-primary-text); opacity: .7; margin: 3px; + filter: var(--background-image-invert-if-bright, var(--primary-invert-if-bright)); - &:hover { - opacity: 1; - background-color: transparent !important; + &:not([aria-expanded="true"]) { + color: var(--color-primary-element-text); + + &:hover { + opacity: 1; + background-color: transparent !important; + } } - &:focus-visible { - opacity: 1; - background-color: transparent !important; - border-radius: var(--border-radius); - outline: none; - box-shadow: 0 0 0 2px var(--color-primary-text); - } + &:focus-visible { + opacity: 1; + outline: none !important; + } } .app-menu-popover-entry { .app-icon { position: relative; height: 44px; + width: 48px; + display: flex; + align-items: center; + justify-content: center; + filter: var(--background-invert-if-bright, var(--primary-invert-if-bright)); &.has-unread::after { background-color: var(--color-main-text); } img { - filter: var(--background-invert-if-bright, var(--primary-invert-if-bright)); width: $header-icon-size; height: $header-icon-size; - padding: calc((50px - $header-icon-size) / 2); } } } @@ -335,7 +343,7 @@ $header-icon-size: 20px; content: ""; width: 8px; height: 8px; - background-color: var(--color-primary-text); + background-color: var(--color-primary-element-text); border-radius: 50%; position: absolute; display: block; diff --git a/src/CloserButton.vue b/src/CloserButton.vue index 99779f8..80ed747 100644 --- a/src/CloserButton.vue +++ b/src/CloserButton.vue @@ -15,11 +15,18 @@ You should have received a copy of the GNU Affero General Public License along with this program. If not, see . --> diff --git a/src/OpenerButton.vue b/src/OpenerButton.vue index 58298ae..538291c 100644 --- a/src/OpenerButton.vue +++ b/src/OpenerButton.vue @@ -15,7 +15,9 @@ You should have received a copy of the GNU Affero General Public License along with this program. If not, see . -->