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: $wcfLayoutMinWidth;
  14                         max-width: $wcfLayoutMaxWidth;
  15                 } @else {
  16                         width: $wcfLayoutFixedWidth;
  17                 }
  18         }
  19 }
  20
  21 .invisible {
  22         display: none;
  23 }
  24
  25 .grayscale {
  26         filter: gray;
  27         -webkit-filter: grayscale(1);
  28 }
  29
  30 .monospace {
  31         font-family: $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
 128         > :last-child {
 129                 margin-bottom: 0 !important;
 130         }
 131
 132         p {
 133                 //margin: 1em 0;
 134                 margin: 0;
 135         }
 136
 137         h1 {
 138                 @include wcfFontTitle;
 139         }
 140
 141         h2 {
 142                 @include wcfFontSection;
 143         }
 144
 145         h3 {
 146                 @include wcfFontHeadline;
 147         }
 148
 149         h1,
 150         h2,
 151         h3,
 152         h4,
 153         h5,
 154         h6 {
 155                 margin: 1.5em 0 1em 0;
 156         }
 157
 158         ul,
 159         ol {
 160                 @include nativeList;
 161         }
 162
 163         ul {
 164                 list-style-type: disc;
 165         }
 166
 167         ol {
 168                 list-style-type: decimal;
 169         }
 170 }
 171
 172 .containerContent,
 173 .htmlContent {
 174         hr {
 175                 border: 0;
 176                 border-top: 1px solid $wcfContentBorderInner;
 177                 height: 0;
 178         }
 179 }
 180
 181 .separatorLeft::before {
 182         color: $wcfContentText;
 183         content: "\00b7";
 184         margin-right: 0.25em;
 185 }
 186
 187 .separatorRight::after {
 188         color: $wcfContentText;
 189         content: "\00b7";
 190         margin-left: 0.25em;
 191 }
 192
 193 .pointer {
 194         cursor: pointer;
 195 }
 196
 197 a.externalURL::after {
 198         content: $fa-var-external-link;
 199         display: inline-block;
 200         font-family: FontAwesome !important;
 201         font-size: 14px !important;
 202         font-weight: normal !important;
 203         font-style: normal !important;
 204         margin-left: 4px;
 205         vertical-align: -1px;
 206 }
 207
 208 .visuallyHidden {
 209         clip: rect(1px, 1px, 1px, 1px);
 210         height: 1px !important;
 211         overflow: hidden !important;
 212         position: absolute !important;
 213         width: 1px !important;
 214 }
 215
 216 /* Hide the focus ring for mouse interactions, but support them for keyboard navigation.
 217    See https://github.com/WICG/focus-visible and https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */
 218 .js-focus-visible :focus:not(.focus-visible) {
 219         outline: none;
 220 }