wcfsetup/install/files/style/layout/layout.scss

   1 html.disableScrolling {
   2         overflow: hidden !important;
   3
   4         body {
   5                 overflow: hidden !important;
   6         }
   7 }
   8
   9 @include screen-lg {
  10         html.disableScrolling {
  11                 padding-right: var(--scrollbar-width, 0);
  12         }
  13 }
  14
  15 @include screen-md-down {
  16         html.disableScrolling {
  17                 /* Fix for the gap when using fullscreen dialogs and the navbar collapses.
  18                    See https://stackoverflow.com/questions/69589924/ios-15-minimized-address-bar-issue-with-fixed-position-full-screen-content */
  19                 height: 100vh !important;
  20
  21                 body {
  22                         position: fixed !important;
  23                 }
  24         }
  25 }
  26
  27 html,
  28 body {
  29         font-weight: 400;
  30         min-height: 100vh;
  31         overflow-x: clip;
  32         width: 100%;
  33
  34         @include wcfLineHeight;
  35         @include wcfFontDefault;
  36 }
  37
  38 html {
  39         overflow-y: scroll;
  40 }
  41
  42 body {
  43         background-color: var(--wcfContentBackground);
  44         color: var(--wcfContentText);
  45         font-family: var(--wcfFontFamily);
  46         position: relative;
  47         word-wrap: break-word;
  48 }
  49
  50 a {
  51         color: var(--wcfContentLink);
  52         cursor: pointer;
  53         text-decoration: none;
  54
  55         &:hover {
  56                 color: var(--wcfContentLinkActive);
  57                 text-decoration: none;
  58         }
  59 }
  60
  61 .pageContainer {
  62         display: flex;
  63         flex-direction: column;
  64         min-height: 100vh;
  65 }
  66
  67 /* <select> fields placed inside a flexbox parent while containing
  68    long select options will cause an invisible page overflow, when
  69    one such option is selected. The <select> itself stays within the
  70    boundaries, but a scrollbar will appear. */
  71 html.iOS select {
  72         overflow: hidden;
  73 }
  74
  75 /* COLUMN LAYOUT */
  76 .pageHeaderContainer,
  77 .boxesHeaderBoxes,
  78 .pageNavigation,
  79 .pageFooter,
  80 .boxesTop,
  81 .boxesBottom,
  82 .boxesFooterBoxes {
  83         flex: 0 0 auto;
  84 }
  85
  86 .main {
  87         flex: 1 0 auto;
  88
  89         @include screen-xs {
  90                 padding: 20px 0;
  91                 width: 100%;
  92         }
  93
  94         @include screen-sm-md {
  95                 padding: 40px 0;
  96                 width: 100%;
  97         }
  98
  99         @include screen-lg {
 100                 padding: 60px 0;
 101         }
 102 }
 103
 104 /* use flex-box to enforce a proper side-by-side layout on desktop */
 105 @include screen-lg {
 106         .main > div {
 107                 display: flex;
 108         }
 109
 110         .content {
 111                 flex: 1 1 0px;
 112
 113                 &.content--sidebar-right {
 114                         flex-basis: calc(100% - 340px);
 115                         max-width: calc(100% - 340px);
 116
 117                         & + .sidebar {
 118                                 margin-left: 30px;
 119                         }
 120                 }
 121         }
 122
 123         .sidebar {
 124                 flex: 0 0 310px;
 125                 overflow: hidden;
 126
 127                 &:first-child {
 128                         margin-right: 30px;
 129                 }
 130
 131                 & + .content {
 132                         flex-basis: calc(100% - 340px);
 133                         max-width: calc(100% - 340px); // IE fix
 134
 135                         // sidebar follows
 136                         &:not(:last-child) {
 137                                 flex-basis: calc(100% - 680px);
 138                                 max-width: calc(100% - 680px); // IE fix
 139                         }
 140                 }
 141         }
 142 }
 143
 144 /* mobile arranges the sidebar and content vertically:
 145
 146    <leftSidebar> <content> <rightSidebar>
 147
 148    becomes:
 149
 150    <leftSidebar>
 151    <content>
 152    <rightSidebar>
 153 */
 154 @include screen-md-down {
 155         .sidebar + .content,
 156         .content + .sidebar {
 157                 // gap between sidebars and content
 158                 margin-top: 30px;
 159         }
 160 }
 161
 162 .sideBySide {
 163         margin-top: 20px;
 164
 165         @include screen-md-up {
 166                 display: table;
 167                 table-layout: fixed;
 168                 width: 100%;
 169
 170                 > .section {
 171                         display: table-cell;
 172                         vertical-align: top;
 173                         width: 49%;
 174
 175                         & + .section {
 176                                 padding-left: 2%;
 177                         }
 178                 }
 179         }
 180 }
 181
 182 .sideBySide.templateDiff {
 183         --templateDiff-added-background: #90ee90;
 184         --templateDiff-added-color: inherit;
 185         --templateDiff-removed-background: #ffb6c1;
 186         --templateDiff-removed-color: inherit;
 187
 188         li {
 189                 margin: 0;
 190         }
 191
 192         .templateDiff--added {
 193                 background-color: var(--templateDiff-added-background);
 194                 color: var(--templateDiff-added-color);
 195         }
 196
 197         .templateDiff--removed {
 198                 background-color: var(--templateDiff-removed-background);
 199                 color: var(--templateDiff-removed-color);
 200         }
 201 }
 202
 203 html[data-color-scheme="dark"] .sideBySide.templateDiff {
 204         --templateDiff-added-background: #172810;
 205         --templateDiff-added-color: #4f9c51;
 206         --templateDiff-removed-background: #281010;
 207         --templateDiff-removed-color: #d95654;
 208 }
 209
 210 .inlineItems {
 211         display: flex;
 212         flex-wrap: wrap;
 213
 214         .inlineItem {
 215                 flex: 0 1 auto;
 216
 217                 &:not(:last-child) {
 218                         margin-right: 5px;
 219                 }
 220         }
 221
 222         &.commaSeparated {
 223                 .inlineItem:not(:last-child)::after {
 224                         content: ",";
 225                         padding-left: 1px;
 226                 }
 227         }
 228
 229         &.dotSeparated {
 230                 .inlineItem:not(:last-child)::after {
 231                         content: "\00b7";
 232                         margin-left: 5px;
 233                 }
 234         }
 235 }
 236
 237 #pageOverlayContainer {
 238         pointer-events: none;
 239 }
 240
 241 #pageOverlayContainer > *:not(.dropdownMenuContainer) {
 242         pointer-events: all;
 243 }