skin: Convert table of contents from <table> to <div>
[lhc/web/wiklou.git] / skins / common / commonContent.css
1 /**
2 * MediaWiki style sheet for general styles on complex content
3 *
4 * Styles for complex things which are a standard part of page content
5 * (ie: the CSS classing built into the system), like the TOC.
6 */
7
8 /* Table of Contents */
9 #toc,
10 .toc,
11 .mw-warning {
12 border: 1px solid #aaa;
13 background-color: #f9f9f9;
14 padding: 5px;
15 font-size: 95%;
16 }
17
18 /**
19 * We want to display the ToC element with intrinsic width. There are a few good
20 * old ways of making it this way, including floating it or making it a table.
21 * Both are clearly suboptimal.
22 *
23 * Thus we use display: inline-block. It is treated as an inline element with
24 * regard to text flow, but this isn't an issue here as the ToC is always
25 * sandwiched between other block-level elements.
26 */
27 #toc,
28 .toc {
29 display: -moz-inline-block;
30 display: inline-block;
31 zoom: 1;
32 *display: inline;
33 padding: 7px;
34 }
35
36 /* CSS for backwards-compatibility with cached page renders and creative uses in wikitext */
37 table#toc,
38 table.toc {
39 border-collapse: collapse;
40 }
41 /* Remove additional paddings inside table-cells that are not present in <div>s */
42 table#toc td,
43 table.toc td {
44 padding: 0;
45 }
46
47 #toc h2,
48 .toc h2 {
49 display: inline;
50 border: none;
51 padding: 0;
52 font-size: 100%;
53 font-weight: bold;
54 }
55 #toc #toctitle,
56 .toc #toctitle,
57 #toc .toctitle,
58 .toc .toctitle {
59 text-align: center;
60 }
61 #toc ul,
62 .toc ul {
63 list-style-type: none;
64 list-style-image: none;
65 margin-left: 0;
66 padding: 0;
67 text-align: left;
68 }
69 #toc ul ul,
70 .toc ul ul {
71 margin: 0 0 0 2em;
72 }
73 #toc .toctoggle,
74 .toc .toctoggle {
75 font-size: 94%;
76 }
77
78 .toccolours {
79 border: 1px solid #aaa;
80 background-color: #f9f9f9;
81 padding: 5px;
82 font-size: 95%;
83 }
84
85 /* Warning */
86 .mw-warning {
87 margin-left: 50px;
88 margin-right: 50px;
89 text-align: center;
90 }
91
92 /* Images */
93 /* @noflip */div.floatright, table.floatright {
94 margin: 0 0 .5em .5em;
95 border: 0;
96 }
97 div.floatright p { font-style: italic; }
98 /* @noflip */div.floatleft, table.floatleft {
99 margin: 0 .5em .5em 0;
100 border: 0;
101 }
102 div.floatleft p { font-style: italic; }
103 /* Thumbnails */
104 div.thumb {
105 margin-bottom: .5em;
106 width: auto;
107 background-color: transparent;
108 }
109 div.thumbinner {
110 border: 1px solid #ccc;
111 padding: 3px !important;
112 background-color: #f9f9f9;
113 font-size: 94%;
114 text-align: center;
115 overflow: hidden;
116 }
117 html .thumbimage {
118 border: 1px solid #ccc;
119 }
120 html .thumbcaption {
121 border: none;
122 line-height: 1.4em;
123 padding: 3px !important;
124 font-size: 94%;
125 }
126 div.magnify {
127 border: none !important;
128 background: none !important;
129 }
130 div.magnify a, div.magnify img {
131 display: block;
132 border: none !important;
133 background: none !important;
134 }
135 /* @noflip */div.tright {
136 margin: .5em 0 1.3em 1.4em;
137 }
138 /* @noflip */div.tleft {
139 margin: .5em 1.4em 1.3em 0;
140 }
141 img.thumbborder {
142 border: 1px solid #dddddd;
143 }
144
145 /**
146 * Edit forms
147 */
148 #editform textarea {
149 display: block;
150 -moz-box-sizing: border-box;
151 -webkit-box-sizing: border-box;
152 box-sizing: border-box;
153 }
154
155 /**
156 * Basic styles for the user login and create account forms
157 */
158 #userlogin, #userloginForm {
159 border: solid 1px #cccccc;
160 padding: 1.2em;
161 margin: 0.5em;
162 }
163
164 #loginend {
165 margin: 0.5em;
166 }
167
168 #loginend table {
169 width: 100%;
170 }