commit d0881d36dfac9ed9351a0f40610a0255588d7893 parent dbe7205f0a2fb54838978022129ab7aff89756d8 Author: Lou Woell <lou.woell@posteo.de> Date: Wed, 15 Oct 2025 17:32:49 +0200 restructure TabContainer css Diffstat:
| M | assets/css/tabbedContainer.scss | | | 97 | ++++++++++++++++++++++++++++++++++++++++++------------------------------------- |
1 file changed, 51 insertions(+), 46 deletions(-)
diff --git a/assets/css/tabbedContainer.scss b/assets/css/tabbedContainer.scss @@ -1,52 +1,57 @@ -.tabContainer > .tabs > div:not(:first-child) { - display: none; -} +.tabContainer { + .tabBar { -.tabContainer > .tabs * { - margin-top: 0px; - padding-top: 0.25em; -} + overflow: hidden; + width: 100%; + margin: 0; + padding: 0; + list-style: none; + display: flex; -.tabContainer > .tabBar { - overflow: hidden; - width: 100%; - margin: 0; - padding: 0; - list-style: none; - display: flex; -} + button { + color: $color; + opacity: .5; + border: 0px solid $background; + border-bottom: 1px solid $background; + text-decoration: none; + margin: 0 .1em 0 0; + font: inherit; + font-weight: normal; + font-size: 1em; + flex: 1; + transition: all .35s ease; + background: $background; -.tabContainer > .tabBar button { - color: $color; - opacity: .5; - border: 0px solid $background; - border-bottom: 1px solid $background; - text-decoration: none; - margin: 0 .1em 0 0; - font: inherit; - font-weight: normal; - font-size: 1em; - flex: 1; - transition: all .35s ease; - background: $background; - - - &:focus { - border: 2px solid $accent !important; - outline: 0px solid $accent; - color: $color !important; - opacity: 1 !important; - } -} + &.active { + border-bottom: 1px solid $accent; + background: inherit; + opacity: .5; + } -.tabContainer > .tabBar button.active { - border-bottom: 1px solid $accent; - background: inherit; - opacity: .5; -} + &:focus { + border: 0 1px 0 0 solid $accent !important; + outline: 0px solid $accent; + color: $color !important; + opacity: 1 !important; + } + + &:hover { + background: inherit; + color: $accent; + opacity: 1; + } + } + } + + .tabs { + * { + margin-top: 0px; + padding-top: 0.25em; + } + + div:not(:first-child) { + display: none; + } + } -.tabContainer > .tabBar button:hover { - background: inherit; - color: $accent; - opacity: 1; }