Commit | Line | Data |
---|---|---|
f6e330bf AE |
1 | .layoutBoundary { |
2 | margin: 0 auto; | |
8a52619a | 3 | |
f216765b | 4 | @include screen-md-down { |
431e4cb4 AE |
5 | padding: 0 10px; |
6 | width: 100%; | |
f6e330bf | 7 | } |
8a52619a | 8 | |
f216765b | 9 | @include screen-lg { |
431e4cb4 | 10 | padding: 0 20px; |
8a52619a | 11 | |
4a72b06c MW |
12 | @if $useFluidLayout == 1 { |
13 | min-width: $wcfLayoutMinWidth; | |
431e4cb4 AE |
14 | max-width: $wcfLayoutMaxWidth; |
15 | } @else { | |
16 | width: $wcfLayoutFixedWidth; | |
17 | } | |
f6e330bf | 18 | } |
b8eab696 AE |
19 | } |
20 | ||
b8eab696 AE |
21 | .invisible { |
22 | display: none; | |
23 | } | |
24 | ||
954d51cf AE |
25 | .grayscale { |
26 | filter: gray; | |
27 | -webkit-filter: grayscale(1); | |
28 | } | |
29 | ||
7b83aa87 | 30 | .monospace { |
8a52619a | 31 | font-family: Consolas, "Courier New", monospace !important; |
7b83aa87 AE |
32 | } |
33 | ||
b8eab696 | 34 | /* boxes with an image */ |
8a52619a TD |
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 { | |
5908f54f | 62 | @include wcfFontSmall; |
b3ac08d1 AE |
63 | } |
64 | ||
65 | strong { | |
5908f54f | 66 | @include wcfFontBold; |
b3ac08d1 AE |
67 | } |
68 | ||
487db634 MW |
69 | img { |
70 | vertical-align: middle; | |
71 | } | |
72 | ||
b8eab696 AE |
73 | .elementPointer { |
74 | pointer-events: none; | |
75 | position: absolute; | |
76 | top: 0; | |
77 | transform: translateY(-100%); | |
8a52619a | 78 | |
b8eab696 AE |
79 | &.center { |
80 | left: 50%; | |
81 | transform: translateX(-50%) translateY(-100%); | |
82 | } | |
8a52619a | 83 | |
b8eab696 AE |
84 | &.left { |
85 | left: 4px; | |
86 | } | |
8a52619a | 87 | |
b8eab696 AE |
88 | &.right { |
89 | right: 4px; | |
90 | } | |
8a52619a | 91 | |
b8eab696 AE |
92 | &.flipVertical { |
93 | bottom: 0; | |
94 | top: auto; | |
95 | transform: translateY(100%); | |
8a52619a | 96 | |
b8eab696 AE |
97 | &.center { |
98 | transform: translateX(-50%) translateY(100%); | |
99 | } | |
100 | } | |
101 | } | |
3295fb92 AE |
102 | |
103 | .nativeList { | |
5908f54f | 104 | @include nativeList; |
3295fb92 AE |
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 { | |
e712bc20 | 116 | @include clearfix; |
8a52619a | 117 | |
e712bc20 MW |
118 | img { |
119 | max-width: 100%; | |
120 | } | |
8a52619a | 121 | |
e5359fe5 AE |
122 | > :first-child { |
123 | margin-top: 0 !important; | |
124 | } | |
8a52619a | 125 | |
e5359fe5 AE |
126 | > :last-child { |
127 | margin-bottom: 0 !important; | |
128 | } | |
8a52619a | 129 | |
3295fb92 | 130 | p { |
6b61417b AE |
131 | //margin: 1em 0; |
132 | margin: 0; | |
3295fb92 | 133 | } |
8a52619a | 134 | |
3295fb92 | 135 | h1 { |
5908f54f | 136 | @include wcfFontTitle; |
3295fb92 | 137 | } |
8a52619a | 138 | |
3295fb92 | 139 | h2 { |
5908f54f | 140 | @include wcfFontSection; |
95961bdf | 141 | } |
8a52619a | 142 | |
95961bdf | 143 | h3 { |
5908f54f | 144 | @include wcfFontHeadline; |
3295fb92 | 145 | } |
8a52619a TD |
146 | |
147 | h1, | |
148 | h2, | |
149 | h3, | |
150 | h4, | |
151 | h5, | |
152 | h6 { | |
95961bdf | 153 | margin: 1.5em 0 1em 0; |
3295fb92 | 154 | } |
8a52619a TD |
155 | |
156 | ul, | |
157 | ol { | |
5908f54f | 158 | @include nativeList; |
3295fb92 | 159 | } |
8a52619a | 160 | |
3295fb92 AE |
161 | ul { |
162 | list-style-type: disc; | |
163 | } | |
8a52619a | 164 | |
3295fb92 AE |
165 | ol { |
166 | list-style-type: decimal; | |
167 | } | |
dac928e6 MS |
168 | } |
169 | ||
170 | .containerContent, | |
171 | .htmlContent { | |
a485cb5b MW |
172 | hr { |
173 | border: 0; | |
174 | border-top: 1px solid $wcfContentBorderInner; | |
175 | height: 0; | |
176 | } | |
3295fb92 | 177 | } |
929f7e47 MW |
178 | |
179 | .separatorLeft::before { | |
e3bc74d8 | 180 | color: $wcfContentText; |
929f7e47 | 181 | content: "\00b7"; |
b1676884 | 182 | margin-right: 0.25em; |
929f7e47 MW |
183 | } |
184 | ||
185 | .separatorRight::after { | |
e3bc74d8 | 186 | color: $wcfContentText; |
929f7e47 | 187 | content: "\00b7"; |
b1676884 | 188 | margin-left: 0.25em; |
dcc58b43 MW |
189 | } |
190 | ||
191 | .pointer { | |
192 | cursor: pointer; | |
193 | } | |
68b767c7 MW |
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 | } | |
02b5fe34 MW |
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 | } | |
385a3e64 AE |
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 | } |