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

   1 /*
   2  * Special styles for changes introduced in WoltLab Suite 3.1 that
   3  * are not compatible with styles created for earlier versions.
   4  */
   5 @include requireApiVersion(31) {
   6         .main {
   7                 @include screen-lg {
   8                         padding: 30px 0;
   9                 }
  10         }
  11
  12         // reduced margin-top
  13         .paginationTop {
  14                 margin-top: 30px;
  15         }
  16
  17         // sheet-like presentation of content containers
  18         .content > .section,
  19         .content > form,
  20         .sectionContainer {
  21                 border: 1px solid $wcfContentContainerBorder;
  22                 background-color: $wcfContentContainerBackground;
  23                 padding: 20px;
  24
  25                 @include screen-sm-down {
  26                         border-left-width: 0;
  27                         border-right-width: 0;
  28                         margin-left: -10px;
  29                         margin-right: -10px;
  30                         padding: 10px;
  31                 }
  32
  33                 > .section:first-child {
  34                         margin-top: 0;
  35                 }
  36
  37                 .section {
  38                         &:not(:first-child) {
  39                                 margin-top: 0;
  40                         }
  41
  42                         & + .section {
  43                                 margin-top: 40px;
  44                         }
  45                 }
  46         }
  47
  48         .content > .section + .sectionContainer,
  49         .content > form + .sectionContainer {
  50                 margin-top: 40px;
  51         }
  52
  53         .content > form {
  54                 margin-top: 40px;
  55         }
  56
  57         .contentHeader + .section,
  58         .contentHeader + form,
  59         .contentHeader + .sectionContainer {
  60                 margin-top: 30px;
  61         }
  62
  63         .content > .section .tabMenuContent > .section:first-child,
  64         .content > .section .tabMenuContent > form > .section:first-child {
  65                 margin-top: 20px;
  66         }
  67
  68         // borders used to visually separate lists from adjacent containers
  69         .content > .section {
  70                 > .messageList {
  71                         border-top-width: 0;
  72
  73                         @include screen-sm-down {
  74                                 &:first-child {
  75                                         margin-top: -11px;
  76                                 }
  77                         }
  78
  79                         > :first-child {
  80                                 padding-top: 0;
  81
  82                                 // 30px added to account for `padding-top: 0` above
  83                                 &.anchorFixedHeader:target {
  84                                         margin-top: -79px;
  85
  86                                         &::after {
  87                                                 height: 80px;
  88                                         }
  89
  90                                         > .message {
  91                                                 transform: translateY(79px);
  92                                         }
  93                                 }
  94                         }
  95
  96                         > :last-child {
  97                                 border-bottom-width: 0;
  98                                 padding-bottom: 0;
  99                         }
 100                 }
 101
 102                 > .tabularList:last-child {
 103                         border-bottom-width: 0;
 104                 }
 105
 106                 > .containerList {
 107                         > :first-child {
 108                                 border-top-width: 0;
 109                         }
 110
 111                         > :last-child {
 112                                 border-bottom-width: 0;
 113                         }
 114                 }
 115         }
 116
 117         // drop-shadow for submenu lists
 118         .mainMenu .boxMenu .boxMenuDepth1 {
 119                 box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 4px 6px rgba(0, 0, 0, 0.23);
 120         }
 121
 122         // individual variables for the editor toolbar
 123         .redactor-toolbar {
 124                 background-color: $wcfEditorButtonBackground;
 125
 126                 > li {
 127                         > a {
 128                                 color: $wcfEditorButtonText;
 129
 130                                 &.redactor-button-disabled {
 131                                         color: $wcfEditorButtonTextDisabled !important;
 132                                 }
 133
 134                                 &.redactor-act,
 135                                 &.dropact {
 136                                         background-color: $wcfEditorButtonBackgroundActive;
 137                                         color: $wcfEditorButtonTextActive;
 138                                 }
 139
 140                                 @include screen-lg {
 141                                         &:hover {
 142                                                 background-color: $wcfEditorButtonBackgroundActive;
 143                                                 color: $wcfEditorButtonTextActive;
 144                                         }
 145                                 }
 146                         }
 147
 148                         @include screen-sm-up {
 149                                 &.redactor-toolbar-separator::before {
 150                                         border-left: 1px solid $wcfEditorButtonText;
 151                                 }
 152                         }
 153                 }
 154
 155                 @include screen-xs {
 156                         &.redactorToolbarOverride > .redactor-toolbar-separator::before {
 157                                 border-left: 1px solid $wcfEditorButtonText;
 158                         }
 159
 160                         .redactorToolbarToggle::before {
 161                                 border-left: 1px solid $wcfEditorButtonText;
 162                         }
 163                 }
 164         }
 165
 166         // adjust editor and message tab menu background color
 167         .redactor-box,
 168         .messageTabMenuNavigation > ul,
 169         .messageTabMenu > .messageTabMenuContent.active,
 170         .messageContent.loading > .messageContentLoadingOverlay {
 171                 background-color: $wcfContentContainerBackground;
 172         }
 173
 174         .messageTabMenuNavigation > ul > li.active > a::after {
 175                 border-bottom-color: $wcfContentContainerBackground;
 176         }
 177
 178         // use the `alert` variables rather than fixed values
 179         .innerError {
 180                 background-color: $wcfStatusErrorBackground;
 181                 color: $wcfStatusErrorText;
 182
 183                 &::before {
 184                         border-bottom-color: $wcfStatusErrorBackground;
 185                 }
 186         }
 187
 188         // adjust color values to account for a significant darker sidebar background
 189         .interactiveDropdownHeader .icon {
 190                 color: inherit;
 191         }
 192         .sidebar,
 193         .messageSidebar {
 194                 dl:not(.plain) > dt,
 195                 dl.dataList > dt,
 196                 .separatorLeft::before {
 197                         color: $wcfSidebarDimmedText;
 198                 }
 199         }
 200         .messageReduced {
 201                 .messageTitle a {
 202                         color: $wcfSidebarText;
 203                 }
 204
 205                 .messageHeaderMetaData {
 206                         .messagePublicationTime,
 207                         > li:not(:last-child)::after {
 208                                 color: $wcfSidebarDimmedText;
 209                         }
 210                 }
 211         }
 212         .userMention {
 213                 color: $wcfSidebarLink;
 214
 215                 &:hover {
 216                         color: $wcfSidebarLinkActive;
 217                 }
 218         }
 219         .boxesSidebarLeft .box,
 220         .boxesSidebarRight .box {
 221                 &.boxError,
 222                 &.boxInfo,
 223                 &.boxSuccess,
 224                 &.boxWarning {
 225                         .boxTitle {
 226                                 color: inherit;
 227                         }
 228                 }
 229         }
 230
 231         // message clipboard checkbox
 232         @include screen-sm-down {
 233                 .messageQuickOptions > .jsMessageClipboardCheckbox {
 234                         display: initial;
 235                         position: relative;
 236                         right: 30px;
 237                         top: -1px;
 238                 }
 239         }
 240
 241         // tab menu overflow
 242         .tabMenuOverlayLeft {
 243                 background: linear-gradient(
 244                         to left,
 245                         transparentize($wcfContentContainerBackground, 100%) 0%,
 246                         $wcfContentContainerBackground 50%
 247                 );
 248         }
 249         .tabMenuOverlayRight {
 250                 background: linear-gradient(
 251                         to right,
 252                         transparentize($wcfContentContainerBackground, 100%) 0%,
 253                         $wcfContentContainerBackground 50%
 254                 );
 255         }
 256
 257         // background-color when saving messages
 258         .messageContent.loading > .messageContentLoadingOverlay {
 259                 background-color: $wcfContentContainerBackground;
 260         }
 261 }