skin: Convert table of contents from <table> to <div>

[lhc/web/wiklou.git] / skins / common / commonContent.css

diff --git a/skins/common/commonContent.css b/skins/common/commonContent.css
index 0fe8489..ee102f7 100644 (file)
--- a/skins/common/commonContent.css
+++ b/skins/common/commonContent.css
@@ -1,6 +1,9 @@
-/*
-** MediaWiki style sheet for general styles on complex content
-*/
+/**
+ * MediaWiki style sheet for general styles on complex content
+ *
+ * Styles for complex things which are a standard part of page content
+ * (ie: the CSS classing built into the system), like the TOC.
+ */
 
 /* Table of Contents */
 #toc,
@@ -11,6 +14,36 @@
        padding: 5px;
        font-size: 95%;
 }
+
+/**
+ * We want to display the ToC element with intrinsic width. There are a few good
+ * old ways of making it this way, including floating it or making it a table.
+ * Both are clearly suboptimal.
+ *
+ * Thus we use display: inline-block. It is treated as an inline element with
+ * regard to text flow, but this isn't an issue here as the ToC is always
+ * sandwiched between other block-level elements.
+ */
+#toc,
+.toc {
+       display: -moz-inline-block;
+       display: inline-block;
+       zoom: 1;
+       *display: inline;
+       padding: 7px;
+}
+
+/* CSS for backwards-compatibility with cached page renders and creative uses in wikitext */
+table#toc,
+table.toc {
+       border-collapse: collapse;
+}
+/* Remove additional paddings inside table-cells that are not present in <div>s */
+table#toc td,
+table.toc td {
+       padding: 0;
+}
+
 #toc h2,
 .toc h2 {
        display: inline;
@@ -109,12 +142,29 @@ img.thumbborder {
        border: 1px solid #dddddd;
 }
 
+/**
+ * Edit forms
+ */
+#editform textarea {
+       display: block;
+       -moz-box-sizing: border-box;
+       -webkit-box-sizing: border-box;
+       box-sizing: border-box;
+}
+
 /**
  * Basic styles for the user login and create account forms
  */
 #userlogin, #userloginForm {
        border: solid 1px #cccccc;
        padding: 1.2em;
-       margin: .5em;
-       float: left;
+       margin: 0.5em;
+}
+
+#loginend {
+       margin: 0.5em;
+}
+
+#loginend table {
+       width: 100%;
 }