Refactor out all CSS rules.

src/main.css

@@ -21,3 +21,102 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 
 @TFDCLERK_HEADER_END@ */
+
+/* General */
+
+.tfdclerk-hooks {
+    margin-left: 1em;
+}
+
+.tfdclerk-hook-divider {
+    display: inline;
+}
+
+.tfdclerk-error {
+    color: #A00;
+}
+
+.tfdclerk-error-extra {
+    font-family: monospace;
+}
+
+.tfdclerk-box {
+    position: relative;
+    margin: 0.5em 0;
+    padding: 1em;
+    border: 1px solid #AAA;
+    color: #000;
+    background-color: #F9F9F9;
+}
+
+.tfdclerk-box-info {
+    position: absolute;
+    right: 1em;
+    top: 0.5em;
+    font-size: 75%;
+    color: #777;
+}
+
+.tfdclerk-box-heading {
+    margin: 0;
+    padding: 0 0 0.25em 0;
+}
+
+.tfdclerk-submit {
+    margin-right: 0.5em;
+}
+
+.tfdclerk-options {
+    border-spacing: 0;
+}
+
+.tfdclerk-option-name {
+    padding-bottom: 0.75em;
+    padding-right: 0.5em;
+}
+
+.tfdclerk-option-value {
+    padding-bottom: 0.75em;
+}
+
+.tfdclerk-loading {
+    font-style: italic;
+    color: #777;
+}
+
+/* Relisting */
+
+.tfdclerk-discussion-info {
+    vertical-align: middle;
+    margin-left: 0.5em;
+}
+
+.tfdclerk-bad-date {
+    color: #A00;
+}
+
+/* Closing */
+
+.tfdclerk-result-option {
+    margin: 0 1.25em 0 0.25em;
+}
+
+.tfdclerk-result-other {
+    margin: 0 0.25em;
+}
+
+.tfdclerk-close-actions {
+    margin: 0 0 0 1em;
+}
+
+.tfdclerk-action-page {
+    font-weight: bold;
+}
+
+.tfdclerk-backlink-sum-list {
+    display: inline;
+}
+
+.tfdclerk-backlink-sum-div {
+    display: inline;
+}

src/tfd.js

@@ -52,13 +52,12 @@ TFD.prototype._unblock_submit = function(reason) {
 TFD.prototype._error = function(msg, extra) {
     var elem = $("<span/>", {
         addClass: "tfdclerk-error",
-        html: "<strong>Error:</strong> " + (extra ? msg + ": " : msg),
-        style: "color: #A00;"
+        html: "<strong>Error:</strong> " + (extra ? msg + ": " : msg)
     });
     if (extra)
         elem.append($("<span/>", {
-            text: extra,
-            style: "font-family: monospace;"
+            addClass: "tfdclerk-error-extra",
+            text: extra
         }));
 
     var contact = $("<a/>", {
@@ -146,20 +145,9 @@ TFD.prototype._add_option_box = function(verb, title, callback, options) {
     var self = this;
     this.box = $("<div/>", {
         id: "tfdclerk-" + verb + "-box-" + this.id,
-        addClass: "tfdclerk-" + verb + "-box"
+        addClass: "tfdclerk-box tfdclerk-" + verb + "-box"
     })
-        .css("position", "relative")
-        .css("border", "1px solid #AAA")
-        .css("color", "#000")
-        .css("background-color", "#F9F9F9")
-        .css("margin", "0.5em 0")
-        .css("padding", "1em")
-        .append($("<div/>")
-            .css("position", "absolute")
-            .css("right", "1em")
-            .css("top", "0.5em")
-            .css("font-size", "75%")
-            .css("color", "#777")
+        .append($("<div/>", {addClass: "tfdclerk-box-info"})
             .append($("<a/>", {
                 href: TFDClerk.script_url,
                 title: "tfdclerk.js",
@@ -167,15 +155,14 @@ TFD.prototype._add_option_box = function(verb, title, callback, options) {
             }))
             .append($("<span/>", {text: " version " + TFDClerk.version})))
         .append($("<h5/>", {
-            text: title,
-            style: "margin: 0; padding: 0 0 0.25em 0;"
+            addClass: "tfdclerk-box-heading",
+            text: title
         }));
 
     options.call(this);
     this.box.append($("<button/>", {
             text: verb.charAt(0).toUpperCase() + verb.slice(1),
             addClass: "tfdclerk-submit mw-ui-button mw-ui-progressive",
-            style: "margin-right: 0.5em;",
             disabled: this._submit_blockers.length > 0,
             click: function() {
                 self._block_submit("submitting");
@@ -192,17 +179,13 @@ TFD.prototype._add_option_box = function(verb, title, callback, options) {
 };
 
 TFD.prototype._add_option_table = function(options) {
-    var table = $("<table/>", {style: "border-spacing: 0;"});
+    var table = $("<table/>", {addClass: "tfdclerk-options"});
     $.each(options, function(i, opt) {
         table.append($("<tr/>")
             .append(
-                $("<td/>", {
-                    style: "padding-bottom: 0.75em; padding-right: 0.5em;"
-                }).append(opt[0]))
+                $("<td/>", {addClass: "tfdclerk-option-name"}).append(opt[0]))
             .append(
-                $("<td/>", {
-                    style: "padding-bottom: 0.75em;"
-                }).append(opt[1]))
+                $("<td/>", {addClass: "tfdclerk-option-value"}).append(opt[1]))
         );
     });
     this.box.append(table);
@@ -210,8 +193,8 @@ TFD.prototype._add_option_table = function(options) {
 
 TFD.prototype._build_loading_node = function(node, text) {
     return $("<" + node + "/>", {
-        text: text + "...",
-        style: "font-style: italic; color: #777;"
+        addClass: "tfdclerk-loading",
+        text: text + "..."
     });
 };
 
@@ -230,14 +213,13 @@ TFD.prototype._build_hook = function(verb, callback) {
 
 TFD.prototype._build_hook_divider = function() {
     return $("<span/>", {
-        addClass: "mw-editsection-divider",
-        style: "display: inline;",
+        addClass: "tfdclerk-hook-divider mw-editsection-divider",
         text: " | "
     });
 };
 
 TFD.prototype.add_hooks = function() {
-    $("<span/>", {addClass: "tfdclerk-hooks", style: "margin-left: 1em;"})
+    $("<span/>", {addClass: "tfdclerk-hooks"})
         .append($("<span/>", {addClass: "mw-editsection-bracket", text: "["}))
         .append(this._build_hook("close", this.close))
         .append(this._build_hook_divider())

src/tfd_close.js

@@ -44,7 +44,7 @@ TFD.prototype._is_merge = function() {
 
 TFD.prototype._get_close_action_choices = function() {
     // TODO: disable action options until transcluion info loads...
-    // TODO: restrictions for close reason
+    // TODO: restrictions for close result
     return [{
         id: "none",
         name: "Do nothing",
@@ -132,8 +132,8 @@ TFD.prototype._build_close_results = function() {
             type: "checkbox",
             value: "true"
         })).append($("<span/>", {
-            text: "Speedy",
-            style: "margin: 0 1.25em 0 0.25em;"
+            addClass: "tfdclerk-result-option",
+            text: "Speedy"
         })).appendTo(elems);
 
     $.each(choices, function(i, choice) {
@@ -143,13 +143,13 @@ TFD.prototype._build_close_results = function() {
                 value: choice.toLowerCase(),
                 change: function() { self._on_close_result_change(); }
             })).append($("<span/>", {
-                text: choice,
-                style: "margin: 0 1.25em 0 0.25em;"
+                addClass: "tfdclerk-result-option",
+                text: choice
             })).appendTo(elems);
     });
 
     var other = elems.children().last();
-    other.find("span").text("Other:").css("margin", "0 0.25em");
+    other.find("span").addClass("tfdclerk-result-other").text("Other:");
     other.append($("<input/>", {
         name: "result-other",
         type: "text"
@@ -243,7 +243,7 @@ TFD.prototype._build_close_action_entry = function(page) {
         .find("a").filter(function() { return $(this).text() == page; })
         .hasClass("new");
 
-    var tlinfo = $("<ul/>", {style: "display: inline;"})
+    var tlinfo = $("<ul/>", {addClass: "tfdclerk-backlink-sum-list"})
         .append(this._build_loading_node("li", "Fetching transclusions"));
     this._load_backlink_summary(page, tlinfo);
 
@@ -277,15 +277,14 @@ TFD.prototype._build_close_action_entry = function(page) {
         href: mw.util.getUrl(page),
         title: page,
         text: page,
-        addClass: redlink ? "new" : "",
-        style: "font-weight: bold;"
+        addClass: "tfdclerk-action-page" + (redlink ? "new" : "")
     })).append($("<span/>", {text: ": "}))
         .append(select)
         .append(select_extra)
         .append($("<span/>", {text: " ("}))
         .append(help)
         .append($("<span/>", {text: ") ("}))
-        .append($("<div/>", {addClass: "hlist", style: "display: inline;"})
+        .append($("<div/>", {addClass: "tfdclerk-backlink-sum-div hlist"})
             .append(tlinfo))
         .append($("<span/>", {text: ")"}));
 };
@@ -298,7 +297,7 @@ TFD.prototype._add_close_actions = function() {
         if (match === null)
             return this._error("no templates found in section");
 
-        var list = $("<ul/>", {style: "margin: 0 0 0 1em;"});
+        var list = $("<ul/>", {addClass: "tfdclerk-close-actions"});
         do {
             var page = "Template:" + match[1];
             this._build_close_action_entry(page).appendTo(list);

src/tfd_relist.js

@@ -60,8 +60,8 @@ TFD.prototype._on_date_change = function() {
     if (date == null || date == this_date) {
         this._block_submit("bad-date");
         info.append($("<span/>", {
-            text: date == this_date ? "Same as current date" : "Invalid date",
-            style: "color: #A00;"
+            addClass: "tfdclerk-bad-date",
+            text: date == this_date ? "Same as current date" : "Invalid date"
         }));
         return;
     }
@@ -109,8 +109,7 @@ TFD.prototype.relist = function() {
                         value: new Date().toDatePickerFormat(),
                         change: function() { self._on_date_change(); }
                     }).add($("<span/>", {
-                        addClass: "tfdclerk-discussion-info",
-                        style: "margin-left: 0.5em; vertical-align: middle;"
+                        addClass: "tfdclerk-discussion-info"
                     }))
                 ],
                 [