Moved LESS for tab menus into a separate file

diff --git a/wcfsetup/install/files/style/tabMenu.less b/wcfsetup/install/files/style/tabMenu.less
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0d92174364a6b1de6da875f7fa2ec3488f974d98 100644 (file)
--- a/wcfsetup/install/files/style/tabMenu.less
+++ b/wcfsetup/install/files/style/tabMenu.less
@@ -0,0 +1,194 @@
+.tabMenu {
+       display: block;
+       margin-top: @wcfGapLarge;
+       position: relative;
+       text-align: left;
+       
+       > ul {
+               background-color: @wcfContainerAccentBackgroundColor;
+               border-color: @wcfContainerBorderColor;
+               border-style: solid;
+               border-width: 1px 1px 0 1px;
+               display: inline-block;
+               font-size: 0;
+               position: relative;
+               white-space: nowrap;
+               word-wrap: normal;
+               
+               .textShadow(@wcfContainerBackgroundColor);
+               
+               > li {
+                       display: inline-block;
+                       outline: 0;
+                       
+                       &.ui-state-active {
+                               > a {
+                                       background-color: @wcfContainerBackgroundColor;
+                                       border-color: @wcfContainerBorderColor @wcfContainerBorderColor @wcfContainerBackgroundColor;
+                                       border-style: solid;
+                                       border-width: 1px;
+                                       color: @wcfLinkColor;
+                                       font-weight: bold;
+                                       z-index: 30;
+                               }
+                       }
+                       
+                       > a {
+                               color: @wcfDimmedColor;
+                               display: inline-block;
+                               font-size: 1.1rem;
+                               outline: 0;
+                               padding: 7px 10px;
+                               position: relative;
+                               text-decoration: none;
+                               z-index: 10;
+                               
+                               > .badge {
+                                       top: -1px;
+                               }
+                       }
+                       
+                       &:not(.ui-state-active) {
+                               > a:hover {
+                                       color: @wcfLinkColor;
+                               }
+                       }
+               }
+       }
+}
+
+@media only screen and (max-width: 800px) {
+       .tabMenu {
+               > ul > li.ui-state-active {
+                       margin-top: -1px;
+                       
+                       &:first-child {
+                               margin-left: -1px;
+                       }
+                       
+                       &:last-child {
+                               margin-right: -1px;
+                       }
+               }
+       
+       }
+}
+
+@media all and (min-width: 801px) {
+       .tabMenu > ul {
+               padding: 0 5px 3px 5px;
+               
+               > li {
+                       > a {
+                               bottom: -3px;
+                               padding: 1px 10px 3px;
+                       }
+                       
+                       &.ui-state-active {
+                               > a {
+                                       font-size: 1.3rem;
+                                       margin-top: -10px;
+                                       padding: 10px 15px 5px;
+                               }
+                               
+                               &:first-child {
+                                       margin-left: -6px;
+                               }
+                               
+                               &:last-child {
+                                       margin-right: -6px;
+                               }
+                       }
+               }
+       }
+}
+
+.tabMenu > ul > li.ui-state-active > a,
+.tabMenu > ul > li.ui-state-disabled > a,
+.tabMenu > ul > li.ui-state-processing > a {
+       cursor: default;
+}
+
+.tabMenuContent {
+       display: block;
+       margin-top: -1px;
+       min-height: @wcfGapLarge;
+       position: relative;
+       z-index: 20; /* Prevents border overlay during transition */
+       
+       &.hidden {
+               display: none;
+       }
+}
+
+/* sub tabs */
+.tabMenuContainer {
+       &.containerPadding > .menu {
+               margin: -@wcfGapMedium -@wcfGapLarge @wcfGapMedium -@wcfGapLarge; /* reverse paddings from .containerPadding */
+       }
+       
+       > .menu {
+               border-bottom: 1px solid @wcfContainerBorderColor;
+               padding: @wcfGapTiny @wcfGapSmall;
+               
+               .linearGradient(@wcfContainerBackgroundColor, @wcfContainerBackgroundColor, @wcfContainerAccentBackgroundColor);
+               
+               ul {
+                       display: inline-block;
+                       font-size: 0;
+                       white-space: nowrap;
+                       
+                       li {
+                               display: inline-block;
+                               outline: 0;
+                               vertical-align: bottom;
+                               
+                               &.ui-state-active a,
+                               &.ui-state-active a:hover {
+                                       background-color: @wcfButtonPrimaryBackgroundColor;
+                                       border-color: @wcfButtonPrimaryBorderColor;
+                                       color: @wcfButtonPrimaryColor;
+                                       cursor: default;
+                               }
+                               
+                               a {
+                                       background-color: @wcfContainerBackgroundColor;
+                                       border: 1px solid @wcfContainerBorderColor;
+                                       border-radius: @wcfButtonBorderRadius;
+                                       color: @wcfButtonColor;
+                                       display: block;
+                                       font-size: @wcfSmallFontSize;
+                                       margin: @wcfGapTiny 0;
+                                       outline: 0;
+                                       padding: @wcfGapTiny @wcfGapSmall;
+                                       
+                                       &:hover {
+                                               background-color: @wcfButtonHoverBackgroundColor;
+                                               border-color: @wcfButtonHoverBorderColor;
+                                               color: @wcfButtonHoverColor;
+                                               text-decoration: none;
+                                       }
+                               }
+                               
+                               &:not(:last-child) {
+                                       padding-right: @wcfGapTiny;
+                               }
+                               
+                               &.dropdown > a {
+                                       font-size: 1.0rem;
+                                       padding: 4px 7px 2px;
+                               }
+                       }
+               }
+       }
+}
+
+@media only screen and (max-width: 800px) {
+       .tabMenuContainer.containerPadding > .menu {
+               margin: -@wcfGapSmall -@wcfGapMedium @wcfGapSmall -@wcfGapMedium; /* reverse paddings from .containerPadding */
+       }
+}
+
+.containerPadding > .tabMenuContainer:last-child {
+       margin-bottom: @wcfGapSmall;
+}