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                 font-weight: 600;
 158         }
 159
 160         h1,
 161         h2,
 162         h3,
 163         h4,
 164         h5,
 165         h6 {
 166                 margin: 1.5em 0 1em 0;
 167         }
 168
 169         ul,
 170         ol {
 171                 @include nativeList;
 172         }
 173
 174         ul {
 175                 list-style-type: disc;
 176         }
 177
 178         ol {
 179                 list-style-type: decimal;
 180         }
 181
 182         td,
 183         th {
 184                 > :first-child {
 185                         margin-top: 0 !important;
 186                 }
 187
 188                 > :last-child {
 189                         margin-bottom: 0 !important;
 190                 }
 191         }
 192
 193         figure.image {
 194                 clear: both;
 195                 display: block;
 196                 margin: 1em auto;
 197                 min-width: 50px;
 198                 text-align: center;
 199
 200                 &.image-style-side-left {
 201                         float: left;
 202                         margin: 0 20px 20px 0;
 203                 }
 204
 205                 &.image-style-side {
 206                         float: right;
 207                         margin: 0 0 20px 20px;
 208                 }
 209         }
 210 }
 211
 212 .containerContent,
 213 .htmlContent {
 214         hr {
 215                 border: 0;
 216                 border-top: 1px solid var(--wcfContentBorderInner);
 217                 height: 0;
 218         }
 219 }
 220
 221 .separatorLeft::before {
 222         color: var(--wcfContentText);
 223         content: "\00b7";
 224         margin-right: 0.25em;
 225 }
 226
 227 .separatorRight::after {
 228         color: var(--wcfContentText);
 229         content: "\00b7";
 230         margin-left: 0.25em;
 231 }
 232
 233 .pointer {
 234         cursor: pointer;
 235 }
 236
 237 a.externalURL::after {
 238         // 2197 = NORTH EAST ARROW
 239         content: "\00a0\2197";
 240         font-weight: normal !important;
 241         font-style: normal !important;
 242 }
 243
 244 .visuallyHidden {
 245         clip: rect(1px, 1px, 1px, 1px);
 246         height: 1px !important;
 247         overflow: hidden !important;
 248         position: absolute !important;
 249         width: 1px !important;
 250 }
 251
 252 /* Hide the focus ring for mouse interactions, but support them for keyboard navigation.
 253    See https://github.com/WICG/focus-visible and https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */
 254 :focus:not(:focus-visible) {
 255         outline: none;
 256 }
 257
 258 summary {
 259         cursor: pointer;
 260         -webkit-user-select: none;
 261         user-select: none;
 262 }