wcfsetup/install/files/style/ui/tabMenuMessage.scss

   1 .messageTabMenu {
   2         > .messageTabMenuContent {
   3                 display: none;
   4
   5                 &:not(.messageTabMenu) {
   6                         > nav.menu {
   7                                 display: none;
   8                         }
   9                 }
  10
  11                 &.active {
  12                         background-color: $wcfContentBackground;
  13                         display: block;
  14                         margin-top: 0;
  15                 }
  16
  17                 > .section:first-child {
  18                         margin-top: 0;
  19                 }
  20         }
  21
  22         // prevent double formatting with nested tab menus
  23         &:not(.messageTabMenuContent) > .messageTabMenuContent.active {
  24                 border: 1px solid $wcfContentBorderInner;
  25                 border-top-width: 0;
  26                 padding: 20px;
  27         }
  28
  29         // sub tab menu
  30         &.messageTabMenuContent > nav {
  31                 border-bottom: 1px solid $wcfContentBorderInner;
  32                 margin: -20px -20px 20px -20px;
  33                 padding: 5px 20px;
  34
  35                 > ul {
  36                         @include inlineList;
  37
  38                         border: 0;
  39
  40                         > li {
  41                                 outline: 0;
  42
  43                                 &:not(:last-child) {
  44                                         margin-right: 20px;
  45                                 }
  46
  47                                 &.active > a {
  48                                         color: $wcfContentLinkActive;
  49                                 }
  50
  51                                 > a {
  52                                         display: block;
  53                                         outline: 0;
  54
  55                                         @include userSelectNone;
  56                                         @include wcfFontSmall;
  57                                 }
  58                         }
  59                 }
  60         }
  61 }
  62
  63 .messageTabMenu + .innerError,
  64 .messageTabMenu + .innerSuccess,
  65 .messageTabMenu + .innerWarning {
  66         margin-top: -1px;
  67         width: 100%;
  68 }
  69
  70 .messageTabMenu > nav.tabMenu,
  71 .messageTabMenuNavigation {
  72         > ul {
  73                 background-color: $wcfContentBackground;
  74                 border: 1px solid $wcfContentBorderInner;
  75                 border-top-width: 0;
  76
  77                 @include inlineList;
  78
  79                 > li {
  80                         border-right: 1px solid $wcfContentBorderInner;
  81
  82                         &:not(:last-child) {
  83                                 margin-right: 0;
  84                         }
  85
  86                         &.active > a {
  87                                 color: $wcfContentLinkActive;
  88                                 position: relative;
  89
  90                                 &::after {
  91                                         border-bottom: 1px solid $wcfContentBackground;
  92                                         bottom: -1px;
  93                                         content: "";
  94                                         display: block;
  95                                         left: 0;
  96                                         position: absolute;
  97                                         right: 0;
  98                                 }
  99                         }
 100
 101                         > a {
 102                                 display: block;
 103                                 padding: 10px 20px;
 104
 105                                 @include userSelectNone;
 106                                 @include wcfFontDefault;
 107
 108                                 @include screen-md-up {
 109                                         > .icon {
 110                                                 display: none;
 111                                         }
 112                                 }
 113
 114                                 @include screen-sm-down {
 115                                         > .icon {
 116                                                 display: block;
 117                                         }
 118
 119                                         > span:not(.icon) {
 120                                                 display: none;
 121                                         }
 122                                 }
 123                         }
 124                 }
 125         }
 126
 127         > span {
 128                 display: none;
 129         }
 130 }
 131
 132 /* fix for Firefox - fieldsets are set to display: table-column which cause an odd gap between the fieldset
 133    and the next element, similar to gaps with display: inline-block and font-size > 0 */
 134 @-moz-document url-prefix() {
 135         fieldset + .messageTabMenu {
 136                 margin-top: -3px;
 137         }
 138 }
 139
 140 .uploadButton {
 141         overflow: hidden;
 142         position: relative;
 143
 144         > input {
 145                 bottom: 0;
 146                 left: 0;
 147                 opacity: 0;
 148                 position: absolute;
 149                 top: 0;
 150         }
 151 }