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