.messageTabMenu { > .messageTabMenuContent { display: none; &:not(.messageTabMenu) { > nav.menu { display: none; } } &.active { background-color: $wcfContentBackground; display: block; margin-top: 0; } > .section:first-child { margin-top: 0; } } // prevent double formatting with nested tab menus &:not(.messageTabMenuContent) > .messageTabMenuContent.active { border: 1px solid $wcfContentBorderInner; border-top-width: 0; padding: 20px; } // sub tab menu &.messageTabMenuContent > nav { border-bottom: 1px solid $wcfContentBorderInner; margin: -20px -20px 20px -20px; padding: 5px 20px; > ul { @include inlineList; border: 0; > li { outline: 0; &:not(:last-child) { margin-right: 20px; } &.active > a { color: $wcfContentLinkActive; } > a { display: block; outline: 0; @include userSelectNone; @include wcfFontSmall; } } } } } .messageTabMenu + .innerError, .messageTabMenu + .innerSuccess, .messageTabMenu + .innerWarning { margin-top: -1px; width: 100%; } .messageTabMenu > nav.tabMenu, .messageTabMenuNavigation { > ul { background-color: $wcfContentBackground; border: 1px solid $wcfContentBorderInner; border-top-width: 0; @include inlineList; > li { border-right: 1px solid $wcfContentBorderInner; &:not(:last-child) { margin-right: 0; } &.active > a { color: $wcfContentLinkActive; position: relative; &::after { border-bottom: 1px solid $wcfContentBackground; bottom: -1px; content: ""; display: block; left: 0; position: absolute; right: 0; } } > a { display: block; padding: 10px 20px; @include userSelectNone; @include wcfFontDefault; @include screen-md-up { > .icon { display: none; } } @include screen-sm-down { > .icon { display: block; } > span:not(.icon) { display: none; } } } } } > span { display: none; } } /* fix for Firefox - fieldsets are set to display: table-column which cause an odd gap between the fieldset and the next element, similar to gaps with display: inline-block and font-size > 0 */ @-moz-document url-prefix() { fieldset + .messageTabMenu { margin-top: -3px; } } .uploadButton { overflow: hidden; position: relative; > input { bottom: 0; left: 0; opacity: 0; position: absolute; top: 0; } }