1/********************************************************************
2Screen and Print Styles for the Wrap Plugin
3********************************************************************/
4
5.dokuwiki {
6
7/* resetting the box model to something more sane makes life a whole lot easier */
8.plugin_wrap {
9    -moz-box-sizing: border-box;
10    -webkit-box-sizing: border-box;
11    box-sizing: border-box;
12}
13
14/* emulate a headline
15   (only with 'emulatedHeadlines' config option set)
16   @deprecated 2018-03-20 */
17.plugin_wrap.wrap__emuhead em strong {
18    font-size: 130%;
19    font-weight: bold;
20    font-style: normal;
21    display: block;
22}
23/* emulate a bigger headline with a bottom border */
24.plugin_wrap.wrap__emuhead em strong em.u {
25    font-size: 115%;
26    border-bottom: 1px solid @ini_border;
27    font-style: normal;
28    text-decoration: none;
29    display: block;
30}
31/* different bigger headline for safety notes */
32.wrap_danger.wrap__emuhead em strong em.u,
33.wrap_warning.wrap__emuhead em strong em.u,
34.wrap_caution.wrap__emuhead em strong em.u,
35.wrap_notice.wrap__emuhead em strong em.u,
36.wrap_safety.wrap__emuhead em strong em.u {
37    text-transform: uppercase;
38    border-bottom-width: 0;
39}
40/* change border colour of emulated headlines inside boxes to something more neutral
41   (to match all the different background colours) */
42.wrap_box.wrap__emuhead em strong em.u,
43.wrap_info.wrap__emuhead em strong em.u,
44.wrap_important.wrap__emuhead em strong em.u,
45.wrap_alert.wrap__emuhead em strong em.u,
46.wrap_tip.wrap__emuhead em strong em.u,
47.wrap_help.wrap__emuhead em strong em.u,
48.wrap_todo.wrap__emuhead em strong em.u,
49.wrap_download.wrap__emuhead em strong em.u {
50    border-bottom-color: #999;
51}
52
53/* real headlines should not be indented inside a wrap */
54.plugin_wrap h1,
55.plugin_wrap h2,
56.plugin_wrap h3,
57.plugin_wrap h4,
58.plugin_wrap h5 {
59    margin-left: 0;
60    margin-right: 0;
61}
62
63/* columns
64********************************************************************/
65
66.wrap_left,
67.wrap_column {
68    float: left;
69    margin-right: 1.5em;
70}
71[dir=rtl] .wrap_column {
72    float: right;
73    margin-left: 1.5em;
74    margin-right: 0;
75}
76.wrap_right {
77    float: right;
78    margin-left: 1.5em;
79}
80.wrap_center {
81    display: block;
82    margin-left: auto;
83    margin-right: auto;
84}
85
86/*____________ CSS3 columns  ____________*/
87
88.wrap_col2, .wrap_col3, .wrap_col4, .wrap_col5,
89.wrap_colsmall, .wrap_colmedium, .wrap_collarge {
90    -moz-column-gap: 1.5em;
91    -webkit-column-gap: 1.5em;
92    column-gap: 1.5em;
93    -moz-column-rule: 1px dotted #666;
94    -webkit-column-rule: 1px dotted #666;
95    column-rule: 1px dotted #666;
96}
97.wrap_col2 {
98    -moz-column-count: 2;
99    -webkit-column-count: 2;
100    column-count: 2;
101}
102.wrap_col3 {
103    -moz-column-count: 3;
104    -webkit-column-count: 3;
105    column-count: 3;
106}
107.wrap_col4 {
108    -moz-column-count: 4;
109    -webkit-column-count: 4;
110    column-count: 4;
111}
112.wrap_col5 {
113    -moz-column-count: 5;
114    -webkit-column-count: 5;
115    column-count: 5;
116}
117
118.wrap_colsmall {
119    -moz-column-width: 10em;
120    -webkit-column-width: 10em;
121    column-width: 10em;
122}
123.wrap_colmedium {
124    -moz-column-width: 20em;
125    -webkit-column-width: 20em;
126    column-width: 20em;
127}
128.wrap_collarge {
129    -moz-column-width: 30em;
130    -webkit-column-width: 30em;
131    column-width: 30em;
132}
133
134
135/* widths
136********************************************************************/
137
138.wrap_twothirds {
139    width: 65%;
140    margin-right: 5%;
141}
142
143.wrap_half {
144    width: 48%;
145    margin-right: 4%;
146}
147
148.wrap_third {
149    width: 30%;
150    margin-right: 5%;
151}
152
153.wrap_quarter {
154    width: 22%;
155    margin-right: 4%;
156}
157
158[dir=rtl] .wrap_half,
159[dir=rtl] .wrap_quarter {
160    margin-right: 0;
161    margin-left: 4%;
162}
163[dir=rtl] .wrap_twothirds,
164[dir=rtl] .wrap_third {
165    margin-right: 0;
166    margin-left: 5%;
167}
168
169/* this doesn't always work when third and twothirds are mixed across rows
170   but can be fixed by adding any div (e.g. <WRAP clear/>) after a row */
171.wrap_half + .wrap_half,
172.wrap_third + .wrap_twothirds,
173.wrap_twothirds + .wrap_third,
174.wrap_third + .wrap_third + .wrap_third,
175.wrap_quarter + .wrap_quarter + .wrap_quarter + .wrap_quarter {
176    margin-right: 0;
177
178    [dir=rtl] & {
179        margin-left: 0;
180    }
181
182    + * {
183        clear: left;
184        [dir=rtl] & {
185            clear: right;
186        }
187    }
188}
189
190/* show 2 instead 4 columns on medium sized screens (mobile, etc) */
191@media only screen and (max-width: 950px) {
192
193.wrap_quarter {
194    width: 48%;
195}
196.wrap_quarter:nth-of-type(2n) {
197    margin-right: 0;
198}
199[dir=rtl] .wrap_quarter:nth-of-type(2n) {
200    margin-left: 0;
201}
202.wrap_quarter:nth-of-type(2n+1) {
203    clear: left;
204}
205[dir=rtl] .wrap_quarter:nth-of-type(2n) {
206    clear: right;
207}
208
209} /* /@media */
210
211/* show full width on smaller screens (mobile, etc) */
212@media only screen and (max-width: 600px) {
213
214.wrap_twothirds,
215.wrap_half,
216.wrap_third,
217.wrap_quarter {
218    width: auto;
219    margin-right: 0;
220    margin-left: 0;
221    float: none;
222}
223
224} /* /@media */
225
226
227/* alignments
228********************************************************************/
229
230.wrap_leftalign {
231    text-align: left;
232}
233.wrap_centeralign {
234    text-align: center;
235}
236.wrap_rightalign {
237    text-align: right;
238}
239.wrap_justify {
240    text-align: justify;
241}
242
243
244/* box
245********************************************************************/
246
247/* see styles for boxes and notes with icons in style.css */
248
249/*____________ rounded corners ____________*/
250/* (only for modern browsers) */
251
252div.wrap_round {
253    border-radius: 1.4em;
254}
255span.wrap_round {
256    border-radius: .14em;
257}
258
259
260/* mark
261********************************************************************/
262
263.wrap_lo {
264    color: @ini_text_neu;
265    font-size: 85%;
266}
267.wrap_em {
268    color: #c00;
269    font-weight: bold;
270}
271.wrap__dark.wrap_em {
272    color: #f66;
273}
274
275/* see styles for highlighted text in style.css */
276
277
278/* miscellaneous
279********************************************************************/
280
281/*____________ tablewidth ____________*/
282
283.wrap_tablewidth table {
284    width: 100%;
285}
286
287/*____________ indent ____________*/
288
289.wrap_indent {
290    padding-left: 1.5em;
291}
292[dir=rtl] .wrap_indent {
293    padding-right: 1.5em;
294    padding-left: 0;
295}
296
297
298/*____________ outdent ____________*/
299
300.wrap_outdent {
301    margin-left: -1.5em;
302}
303[dir=rtl] .wrap_outdent {
304    margin-right: -1.5em;
305    margin-left: 0;
306}
307
308/*____________ word wrapping in pre ____________*/
309
310div.wrap_prewrap pre {
311    white-space: pre-wrap;
312    word-wrap: break-word;/* for IE < 8 */
313}
314
315/*____________ spoiler ____________*/
316
317div.wrap_spoiler {
318    margin-bottom: 1.5em;
319}
320/* see rest of spoiler styles in style.css */
321
322/*____________ clear float ____________*/
323
324.wrap_clear {
325    clear: both;
326    line-height: 0;
327    height: 0;
328    font-size: 1px;
329    visibility: hidden;
330    overflow: hidden;
331}
332
333/*____________ hide ____________*/
334
335.wrap_hide {
336    display: none;
337}
338
339
340/*____________ button-style link ____________*/
341
342.wrap_button a:link,
343.wrap_button a:visited {
344    background-image: none;
345    border: 1px solid @ini_border;
346    border-radius: .3em;
347    padding: .5em .7em;
348    text-decoration: none;
349}
350/* see rest of button link styles in style.css */
351
352} /* /.dokuwiki */
353