diff --git a/app/javascript/flavours/glitch/styles/admin.scss b/app/javascript/flavours/glitch/styles/admin.scss index 0f0a785ea3..c2426944be 100644 --- a/app/javascript/flavours/glitch/styles/admin.scss +++ b/app/javascript/flavours/glitch/styles/admin.scss @@ -31,23 +31,17 @@ $content-width: 840px; &__toggle { display: none; - background: lighten($ui-base-color, 8%); - height: 48px; + background: darken($ui-base-color, 4%); + border-bottom: 1px solid lighten($ui-base-color, 4%); + align-items: center; &__logo { flex: 1 1 auto; a { - display: inline-block; + display: block; padding: 15px; } - - svg { - fill: $primary-text-color; - height: 20px; - position: relative; - bottom: -2px; - } } &__icon { @@ -55,15 +49,27 @@ $content-width: 840px; color: $darker-text-color; text-decoration: none; flex: 0 0 auto; - font-size: 20px; - padding: 15px; - } + font-size: 18px; + padding: 10px; + margin: 5px 10px; + border-radius: 4px; - a { - &:hover, - &:focus, - &:active { - background: lighten($ui-base-color, 12%); + &:focus { + background: $ui-base-color; + } + + .fa-times { + display: none; + } + + &.active { + .fa-times { + display: block; + } + + .fa-bars { + display: none; + } } } } @@ -79,7 +85,7 @@ $content-width: 840px; display: inherit; margin: inherit; width: inherit; - height: 20px; + height: 25px; } @media screen and (max-width: $no-columns-breakpoint) { @@ -189,10 +195,7 @@ $content-width: 840px; } &__heading { - padding-bottom: 36px; - border-bottom: 1px solid lighten($ui-base-color, 8%); - - margin-bottom: 40px; + margin-bottom: 45px; &__row { display: flex; @@ -209,46 +212,43 @@ $content-width: 840px; &__tabs { margin-top: 30px; - margin-bottom: -31px; + width: 100%; & > div { display: flex; - gap: 10px; + flex-wrap: wrap; + gap: 5px; } a { font-size: 14px; display: inline-flex; align-items: center; - padding: 7px 15px; + padding: 7px 10px; border-radius: 4px; color: $darker-text-color; text-decoration: none; - position: relative; font-weight: 500; gap: 5px; white-space: nowrap; - &.selected { - font-weight: 700; - color: $primary-text-color; - - &::after { - content: ""; - display: block; - width: 100%; - border-bottom: 1px solid $ui-highlight-color; - position: absolute; - bottom: -5px; - left: 0; - } - } - &:hover, &:focus, &:active { background: lighten($ui-base-color, 4%); } + + &.selected { + font-weight: 700; + color: $primary-text-color; + background: $ui-highlight-color; + + &:hover, + &:focus, + &:active { + background: lighten($ui-highlight-color, 4%); + } + } } } @@ -383,6 +383,14 @@ $content-width: 840px; &.visible { display: block; + position: fixed; + z-index: 10; + width: 100%; + height: calc(100vh - 56px); + left: 0; + bottom: 0; + overflow-y: auto; + background: $ui-base-color; } }