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: Consolas, 'Courier New', monospace !important;
  32 }
  33
  34 /* boxes with an image */
  35 .box16 { @include box(16px, 5px); }
  36 .box24 { @include box(24px, 8px); }
  37 .box32 { @include box(32px, 10px); }
  38 .box48 { @include box(48px, 12px); }
  39 .box64 { @include box(64px, 15px); }
  40 .box96 { @include box(96px, 15px); }
  41 .box128 { @include box(128px, 20px); }
  42 .box256 { @include box(256px, 30px); }
  43
  44 small, .small {
  45         @include wcfFontSmall;
  46 }
  47
  48 strong {
  49         @include wcfFontBold;
  50 }
  51
  52 img {
  53         vertical-align: middle;
  54 }
  55
  56 .elementPointer {
  57         pointer-events: none;
  58         position: absolute;
  59         top: 0;
  60         transform: translateY(-100%);
  61
  62         &.center {
  63                 left: 50%;
  64                 transform: translateX(-50%) translateY(-100%);
  65         }
  66
  67         &.left {
  68                 left: 4px;
  69         }
  70
  71         &.right {
  72                 right: 4px;
  73         }
  74
  75         &.flipVertical {
  76                 bottom: 0;
  77                 top: auto;
  78                 transform: translateY(100%);
  79
  80                 &.center {
  81                         transform: translateX(-50%) translateY(100%);
  82                 }
  83         }
  84 }
  85
  86 .nativeList {
  87         @include nativeList;
  88 }
  89
  90 ul.nativeList {
  91         list-style-type: disc;
  92 }
  93 ol.nativeList {
  94         list-style-type: decimal;
  95 }
  96
  97 /* simulate native HTML styles for certain elements */
  98 .htmlContent {
  99         @include clearfix;
 100
 101         img {
 102                 max-width: 100%;
 103         }
 104
 105         > :first-child {
 106                 margin-top: 0 !important;
 107         }
 108
 109         > :last-child {
 110                 margin-bottom: 0 !important;
 111         }
 112
 113         p {
 114                 //margin: 1em 0;
 115                 margin: 0;
 116         }
 117
 118         h1 {
 119                 @include wcfFontTitle;
 120         }
 121
 122         h2 {
 123                 @include wcfFontSection;
 124         }
 125
 126         h3 {
 127                 @include wcfFontHeadline;
 128         }
 129
 130         h1, h2, h3, h4, h5, h6 {
 131                 margin: 1.5em 0 1em 0;
 132         }
 133
 134         ul, ol {
 135                 @include nativeList;
 136         }
 137
 138         ul {
 139                 list-style-type: disc;
 140         }
 141
 142         ol {
 143                 list-style-type: decimal;
 144         }
 145
 146         em {
 147                 /* slight margin to prevent visual merge with adjacent words */
 148                 margin-right: 2px;
 149         }
 150 }
 151
 152 .containerContent,
 153 .htmlContent {
 154         hr {
 155                 border: 0;
 156                 border-top: 1px solid $wcfContentBorderInner;
 157                 height: 0;
 158         }
 159 }
 160
 161 .separatorLeft::before {
 162         color: $wcfContentText;
 163         content: "\00b7";
 164         margin-right: 0.25em;
 165 }
 166
 167 .separatorRight::after {
 168         color: $wcfContentText;
 169         content: "\00b7";
 170         margin-left: 0.25em;
 171 }
 172
 173 .pointer {
 174         cursor: pointer;
 175 }
 176
 177 a.externalURL::after {
 178         content: $fa-var-external-link;
 179         display: inline-block;
 180         font-family: FontAwesome !important;
 181         font-size: 14px !important;
 182         font-weight: normal !important;
 183         font-style: normal !important;
 184         margin-left: 4px;
 185         vertical-align: -1px;
 186 }
 187
 188 .visuallyHidden {
 189         clip: rect(1px, 1px, 1px, 1px);
 190         height: 1px !important;
 191         overflow: hidden !important;
 192         position: absolute !important;
 193         width: 1px !important;
 194 }
 195
 196 /* Hide the focus ring for mouse interactions, but support them for keyboard navigation.
 197    See https://github.com/WICG/focus-visible and https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */
 198 .js-focus-visible :focus:not(.focus-visible) {
 199         outline: none;
 200 }