closable: true,
closeButtonLabel: WCF.Language.get('wcf.global.button.close'),
closeConfirmMessage: '',
+ disableContentPadding: false,
disposeOnClose: false,
title: '',
var contentContainer = document.createElement('div');
contentContainer.classList.add('dialogContent');
+ if (options.disableContentPadding) contentContainer.classList.add('dialogContentNoPadding');
dialog.appendChild(contentContainer);
var content;
WCF.DOMNodeInsertedHandler.execute();
},
+ /**
+ * Rebuilds dialog identified by given id.
+ *
+ * @param {string} id element id
+ */
rebuild: function(id) {
var data = _dialogs.get(id);
if (typeof data === 'undefined') {
// fix for a calculation bug in Chrome causing the scrollbar to overlap the border
if ($.browser.chrome) {
- data.content.style.setProperty('margin-right', '-1px');
+ if (data.content.scrollHeight > data.content.clientHeight) {
+ data.content.style.setProperty('margin-right', '-1px');
+ }
}
var contentContainer = data.content.parentNode;
-.tabMenu {
- display: block;
- margin-top: @wcfGapLarge;
- position: relative;
- text-align: left;
+.tabMenuContainer {
+ line-height: @wcfBaseLineHeight;
- > 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;
- }
- }
+ > .tabMenu {
+ > ul {
+ font-size: 0;
+ white-space: nowrap;
- > a {
- color: @wcfDimmedColor;
+ > li {
+ border: 1px solid @wcfContainerBorderColor;
+ border-bottom-color: transparent;
display: inline-block;
- font-size: 1.1rem;
- outline: 0;
- padding: 7px 10px;
- position: relative;
- text-decoration: none;
- z-index: 10;
+ margin-bottom: -2px;
- > .badge {
- top: -1px;
+ &:first-child {
+ border-top-left-radius: @wcfContainerBorderRadius;
+
+ > a {
+ border-top-left-radius: @wcfContainerBorderRadius - 1;
+ }
}
- }
-
- &:not(.ui-state-active) {
- > a:hover {
- color: @wcfLinkColor;
+
+ &:last-child {
+ border-top-right-radius: @wcfContainerBorderRadius;
+
+ > a {
+ border-top-right-radius: @wcfContainerBorderRadius - 1;
+ }
}
- }
- }
- }
-}
-
-@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;
+
+ &:not(:first-child) {
+ border-left-width: 0;
}
- &:first-child {
- margin-left: -6px;
+ > a {
+ color: @wcfButtonColor;
+ display: block;
+ font-size: 1rem;
+ line-height: @wcfBaseLineHeight;
+ padding: 7px 14px 8px 14px;
+ text-decoration: none;
+
+ .userSelectNone;
+
+ &:hover {
+ color: @wcfLinkColor;
+ }
}
- &:last-child {
- margin-right: -6px;
+ &.active {
+ > a {
+ background-color: @wcfContainerBackgroundColor;
+ color: @wcfLinkColor;
+ }
}
}
}
}
-}
-
-.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 {
+ > div,
+ > fieldset{
+ background-color: @wcfContainerBackgroundColor;
+ border-width: 0;
+ border-radius: 0;
+ border: 1px solid @wcfContainerBorderColor;
display: none;
- }
-}
-
-/* sub tabs */
-.tabMenuContainer {
- &.containerPadding > .menu {
- margin: -@wcfGapMedium -@wcfGapLarge @wcfGapMedium -@wcfGapLarge; /* reverse paddings from .containerPadding */
+ position: static;
+
+ &.active {
+ display: block;
+ }
}
- > .menu {
- border-bottom: 1px solid @wcfContainerBorderColor;
- padding: @wcfGapTiny @wcfGapSmall;
-
- .linearGradient(@wcfContainerBackgroundColor, @wcfContainerBackgroundColor, @wcfContainerAccentBackgroundColor);
-
- ul {
- display: inline-block;
- font-size: 0;
- white-space: nowrap;
+ > div {
+ > nav {
+ background-color: @wcfContainerBackgroundColor;
+ border-bottom: 1px solid @wcfContainerBorderColor;
+ margin: -14px -21px 14px -21px;
+ padding: @wcfGapTiny @wcfGapSmall;
- li {
+ ul {
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;
- }
+ font-size: 0;
+ white-space: nowrap;
- a {
- background-color: @wcfContainerBackgroundColor;
- border: 1px solid @wcfContainerBorderColor;
- border-radius: @wcfButtonBorderRadius;
- color: @wcfButtonColor;
- display: block;
- font-size: @wcfSmallFontSize;
- margin: @wcfGapTiny 0;
+ li {
+ display: inline-block;
outline: 0;
- padding: @wcfGapTiny @wcfGapSmall;
+ vertical-align: baseline;
- &:hover {
- background-color: @wcfButtonHoverBackgroundColor;
- border-color: @wcfButtonHoverBorderColor;
- color: @wcfButtonHoverColor;
- text-decoration: none;
+ &.active a,
+ &.active a:hover {
+ color: @wcfButtonPrimaryColor;
+ cursor: default;
+ }
+
+ a {
+ color: @wcfButtonColor;
+ display: block;
+ font-size: @wcfSmallFontSize;
+ outline: 0;
+ padding: 0 @wcfGapSmall;
+
+ .userSelectNone;
+
+ &:hover {
+ color: @wcfButtonHoverColor;
+ text-decoration: none;
+ }
+ }
+
+ &:not(:last-child) {
+ padding-right: @wcfGapTiny;
+ }
+
+ &.dropdown > a {
+ font-size: 1.0rem;
+ padding: 4px 7px 2px;
}
- }
-
- &:not(:last-child) {
- padding-right: @wcfGapTiny;
- }
-
- &.dropdown > a {
- font-size: 1.0rem;
- padding: 4px 7px 2px;
}
}
}
+
+ > div,
+ > fieldset {
+ border-top-width: 0;
+ }
}
}
@media only screen and (max-width: 800px) {
- .tabMenuContainer.containerPadding > .menu {
- margin: -@wcfGapSmall -@wcfGapMedium @wcfGapSmall -@wcfGapMedium; /* reverse paddings from .containerPadding */
+ .messageTabMenu > div > nav {
+ margin: (@wcfGapTiny - @wcfGapSmall) -@wcfGapSmall @wcfGapSmall -@wcfGapSmall;
}
}
-.containerPadding > .tabMenuContainer:last-child {
- margin-bottom: @wcfGapSmall;
+.dialogContentNoPadding .tabMenuContainer {
+ > nav > ul > li {
+ border-top-width: 0;
+
+ &:first-child {
+ border-left-width: 0;
+ }
+ }
+
+ > div,
+ > fieldset {
+ border-width: 1px 0 0 0;
+ }
}
projects / GitHub / WoltLab / WCF.git / commitdiff