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

   1 .layoutBoundary {
   2         margin: 0 auto;
   3
   4         @include screen-md-down {
   5                 padding: 0 10px;
   6                 width: 100%;
   7         }
   8
   9         @include screen-lg {
  10                 padding: 0 20px;
  11
  12                 @if $useFluidLayout == 1 {
  13                         min-width: var(--wcfLayoutMinWidth);
  14                         max-width: var(--wcfLayoutMaxWidth);
  15                 } @else {
  16                         width: var(--wcfLayoutFixedWidth);
  17                 }
  18         }
  19 }
  20
  21 .invisible {
  22         display: none;
  23 }
  24
  25 .grayscale {
  26         -webkit-filter: grayscale(1);
  27         filter: gray;
  28 }
  29
  30 .monospace {
  31         font-family: var(--wcfFontFamilyMonospace) !important;
  32         font-size: 14px;
  33 }
  34
  35 /* boxes with an image */
  36 .box16 {
  37         @include box(16px, 5px);
  38 }
  39 .box24 {
  40         @include box(24px, 8px);
  41 }
  42 .box32 {
  43         @include box(32px, 10px);
  44 }
  45 .box48 {
  46         @include box(48px, 12px);
  47 }
  48 .box64 {
  49         @include box(64px, 15px);
  50 }
  51 .box96 {
  52         @include box(96px, 15px);
  53 }
  54 .box128 {
  55         @include box(128px, 20px);
  56 }
  57 .box256 {
  58         @include box(256px, 30px);
  59 }
  60
  61 small,
  62 .small {
  63         @include wcfFontSmall;
  64 }
  65
  66 strong {
  67         @include wcfFontBold;
  68 }
  69
  70 img {
  71         vertical-align: middle;
  72 }
  73
  74 .elementPointer {
  75         pointer-events: none;
  76         position: absolute;
  77         top: 0;
  78         transform: translateY(-100%);
  79
  80         &.center {
  81                 left: 50%;
  82                 transform: translateX(-50%) translateY(-100%);
  83         }
  84
  85         &.left {
  86                 left: 4px;
  87         }
  88
  89         &.right {
  90                 right: 4px;
  91         }
  92
  93         &.flipVertical {
  94                 bottom: 0;
  95                 top: auto;
  96                 transform: translateY(100%);
  97
  98                 &.center {
  99                         transform: translateX(-50%) translateY(100%);
 100                 }
 101         }
 102 }
 103
 104 .nativeList {
 105         @include nativeList;
 106 }
 107
 108 ul.nativeList {
 109         list-style-type: disc;
 110 }
 111 ol.nativeList {
 112         list-style-type: decimal;
 113 }
 114
 115 /* simulate native HTML styles for certain elements */
 116 .htmlContent {
 117         @include clearfix;
 118
 119         img {
 120                 height: auto;
 121                 max-width: 100%;
 122         }
 123
 124         > :first-child {
 125                 margin-top: 0 !important;
 126
 127                 &:is(.messageFloatObjectLeft, .image-style-side-left, .messageFloatObjectRight, .image-style-side) {
 128                         + :is(p, ul ,ol, h1, h2, h3, h4, h4, h6) {
 129                                 margin-top: 0 !important;
 130                         }
 131                 }
 132         }
 133
 134         > :last-child {
 135                 margin-bottom: 0 !important;
 136         }
 137
 138         p {
 139                 margin: 1em 0;
 140         }
 141
 142         h1 {
 143                 @include wcfFontTitle;
 144         }
 145
 146         h2 {
 147                 @include wcfFontSection;
 148         }
 149
 150         h3 {
 151                 @include wcfFontHeadline;
 152
 153                 font-weight: 600;
 154         }
 155
 156         h4 {
 157                 @include wcfFontHeadline;
 158
 159                 font-weight: 600;
 160         }
 161
 162         h1,
 163         h2,
 164         h3,
 165         h4,
 166         h5,
 167         h6 {
 168                 margin: 1.5em 0 1em 0;
 169         }
 170
 171         ul,
 172         ol {
 173                 @include nativeList;
 174         }
 175
 176         ul {
 177                 list-style-type: disc;
 178         }
 179
 180         ol {
 181                 list-style-type: decimal;
 182         }
 183
 184         td,
 185         th {
 186                 > :first-child {
 187                         margin-top: 0 !important;
 188                 }
 189
 190                 > :last-child {
 191                         margin-bottom: 0 !important;
 192                 }
 193         }
 194
 195         figure.image {
 196                 clear: both;
 197                 display: block;
 198                 margin: 1em auto;
 199                 min-width: 50px;
 200                 text-align: center;
 201
 202                 &.image-style-side-left {
 203                         float: left;
 204                         margin: 0 20px 20px 0;
 205                 }
 206
 207                 &.image-style-side {
 208                         float: right;
 209                         margin: 0 0 20px 20px;
 210                 }
 211         }
 212 }
 213
 214 .containerContent,
 215 .htmlContent {
 216         hr {
 217                 border: 0;
 218                 border-top: 1px solid var(--wcfContentBorderInner);
 219                 height: 0;
 220         }
 221 }
 222
 223 .separatorLeft::before {
 224         color: var(--wcfContentText);
 225         content: "\00b7";
 226         margin-right: 0.25em;
 227 }
 228
 229 .separatorRight::after {
 230         color: var(--wcfContentText);
 231         content: "\00b7";
 232         margin-left: 0.25em;
 233 }
 234
 235 .pointer {
 236         cursor: pointer;
 237 }
 238
 239 a.externalURL::after {
 240         // 2197 = NORTH EAST ARROW
 241         content: "\00a0\2197";
 242         font-weight: normal !important;
 243         font-style: normal !important;
 244 }
 245
 246 .visuallyHidden {
 247         clip: rect(1px, 1px, 1px, 1px);
 248         height: 1px !important;
 249         overflow: hidden !important;
 250         position: absolute !important;
 251         width: 1px !important;
 252 }
 253
 254 /* Hide the focus ring for mouse interactions, but support them for keyboard navigation.
 255    See https://github.com/WICG/focus-visible and https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */
 256 :focus:not(:focus-visible) {
 257         outline: none;
 258 }
 259
 260 summary {
 261         cursor: pointer;
 262         -webkit-user-select: none;
 263         user-select: none;
 264 }