Touchups.

css/layout.css

@@ -1434,8 +1434,6 @@ a:only-of-type > .remove {
 .sections-list > a {
   cursor: pointer;
   #{if _conf["Rounded Edges"] then "border-radius: 3px 3px 0 0;" else ""}
-}
-.sections-list > a {
   position: relative;
   padding: 0 4px;
   z-index: 1;
@@ -1479,10 +1477,12 @@ article li {
 .rice + .optionlabel {
   padding-left: 0;
 }
-#appchanx-settings .section-style fieldset,
+.section-style fieldset,
-#appchanx-settings .section-main fieldset {
+.section-main fieldset {
   vertical-align: top;
   #{if _conf["Single Column Mode"] then "margin: 0 auto 6px;" else "margin: 0 3px 6px;\n display: inline-block;"}
+  padding: 0;
+  border: 0;
 }
 .section-main fieldset > div,
 .styleoption {

css/theme.css

@@ -56,7 +56,7 @@ html {
   border: 1px solid #{theme["Reply Border"]};
   padding: 5px;
 }
-.tab-selected {
+.sections-list > a.tab-selected {
   background: #{backgroundC};
   border-color: #{theme["Reply Border"]};
   border-style: solid;

lib/ui.coffee

@@ -189,7 +189,6 @@ UI = do ->
         @parseEntry subEntry
       return
 
-
   dragstart = (e) ->
     return if e.type is 'mousedown' and e.button isnt 0 # not LMB
     # prevent text selection
@@ -223,11 +222,13 @@ UI = do ->
       o.up   = dragend.bind o
       $.on d, 'mousemove', o.move
       $.on d, 'mouseup',   o.up
+
   touchmove = (e) ->
     for touch in e.changedTouches
       if touch.identifier is @identifier
         drag.call @, touch
         return
+
   drag = (e) ->
     {clientX, clientY} = e
 
@@ -261,11 +262,13 @@ UI = do ->
     style.right  = right
     style.top    = top
     style.bottom = bottom
+
   touchend = (e) ->
     for touch in e.changedTouches
       if touch.identifier is @identifier
         dragend.call @
         return
+
   dragend = ->
     if @isTouching
       $.off d, 'touchmove', @move
@@ -275,12 +278,13 @@ UI = do ->
       $.off d, 'mouseup',   @up
     localStorage.setItem "#{g.NAMESPACE}#{@id}.position", @style.cssText
 
-  hoverstart = ({root, el, latestEvent, endEvents, asapTest, cb}) ->
+  hoverstart = ({root, el, latestEvent, endEvents, asapTest, cb, close}) ->
     o = {
       root:   root
       el:     el
       style:  el.style
       cb:     cb
+      close:  close
       endEvents:    endEvents
       latestEvent:  latestEvent
       clientHeight: doc.clientHeight
@@ -296,12 +300,13 @@ UI = do ->
 
     $.on root, endEvents,   o.hoverend
     $.on root, 'mousemove', o.hover
+
   hover = (e) ->
     @latestEvent = e
     height = @el.offsetHeight
     {clientX, clientY} = e
 
-    top = clientY - 120
+    top = clientY + (if close then 0 else -120)
     top = if @clientHeight <= height or top <= 0
       0
     else if top + height >= @clientHeight
@@ -310,7 +315,7 @@ UI = do ->
       top
 
     [left, right] = if clientX <= @clientWidth - 400
-      [clientX + 45 + 'px', null]
+      [clientX + (if @close then 15 else 45) + 'px', null]
     else
       [null, @clientWidth - clientX + 45 + 'px']
 
@@ -318,6 +323,7 @@ UI = do ->
     style.top   = top + 'px'
     style.left  = left
     style.right = right
+
   hoverend = ->
     $.rm @el
     $.off @root, @endEvents,  @hoverend

src/config.coffee

@@ -485,10 +485,6 @@ Config =
         false
         'Make checkboxes circular.'
       ]
-      'Custom CSS': [
-        false
-        'Add (more) custom CSS to Appchan X'
-      ]
       'Emoji': [
         'enabled'
         'Enable emoji'
@@ -724,7 +720,30 @@ http://iqdb.org/?url=%TURL
 
   favicon: 'ferongr'
 
-  usercss: ''
+  usercss: """
+/* Tripcode Italics: */
+/*
+span.postertrip {
+font-style: italic;
+}
+*/
+
+/* Add a rounded border to thumbnails (but not expanded images): */
+/*
+.fileThumb > img:first-child {
+border: solid 2px rgba(0,0,100,0.5);
+border-radius: 10px;
+}
+*/
+
+/* Make highlighted posts look inset on the page: */
+/*
+div.post:target,
+div.post.highlight {
+box-shadow: inset 2px 2px 2px rgba(0,0,0,0.2);
+}
+*/
+"""
 
   hotkeys:
     # QR & Options

src/features.coffee

@@ -245,12 +245,15 @@ CustomCSS =
   init: ->
     return unless Conf['Custom CSS']
     @addStyle()
+
   addStyle: ->
     @style = $.addStyle Conf['usercss']
+
   rmStyle: ->
     if @style
       $.rm @style
       delete @style
+
   update: ->
     unless @style
       @addStyle()

src/globals.coffee

@@ -1159,7 +1159,7 @@ a.pointer{
   margin-top:-16px !important;
   padding-left:150px !important;
 }
-.file{
+.file {
   margin-top: 2px;
 }
 a.backlink{

src/settings.coffee

@@ -517,6 +517,7 @@ Settings =
       <img src=#{Favicon.unreadNSFW}>
       <img src=#{Favicon.unreadDead}>
       """
+
   togglecss: ->
     if $('textarea', @parentNode.parentNode).disabled = !@checked
       CustomCSS.rmStyle()
@@ -582,12 +583,12 @@ Settings =
 
           if type is 'text'
 
-            div.innerHTML = "<div class=option><span class=optionlabel>#{key}</span><div style=display: none>#{description}</div></div><div class=option><input name='#{key}' style=width: 100%></div>"
+            div.innerHTML = "<div class=option><span class=optionlabel>#{key}</span></div><div style='display:none;'>#{description}</div><div class=option><input name='#{key}' style=width: 100%></div>"
             input = $ "input[name='#{key}']", div
 
           else
 
-            html = "<label><span class=optionlabel>#{key}</span><div style=display: none>#{description}</div></div><div class=option><select name='#{key}'></label>"
+            html = "<div class=option><span class=optionlabel>#{key}</span></div><div style='display:none;'>#{description}</div><div class=option><select name='#{key}'></div>"
             for name, val in type
               html += "<option value='#{val}'>#{name}</option>"
             html += "</select>"
@@ -597,11 +598,13 @@ Settings =
         else
           inputtype = 'checked'
 
-          div.innerHTML = "<label><input type=checkbox name='#{key}'>#{key}</label><span class=description>: #{description}</span>"
+          div.innerHTML = "<div class=option><label><input type=checkbox name='#{key}'>#{key}</label></div><span style='display:none;'>#{description}</span>"
           input = $ 'input', div
 
         Settings.sandbox input, key, value, inputtype
 
+        $.on $('.option', div), 'mouseover', Settings.mouseover
+
         $.on input, 'change', ->
           $.cb[inputtype].call @
           Style.addStyle()
@@ -827,33 +830,20 @@ Settings =
     Style.addStyle()
 
   mouseover: (e) ->
-    if mouseover = $.id 'mouseover'
+    mouseover = $.el 'div',
-      if children = mouseover.childNodes
+      id:        'mouseover'
-        for child in children
+      className: 'dialog'
-          $.rm child
+
-    else
+    $.add Header.hover, mouseover
-      mouseover = $.el 'div',
-        id:        'mouseover'
-        className: 'dialog'
 
-      $.add d.body, mouseover
-      
     mouseover.innerHTML = @nextElementSibling.innerHTML
 
-    UI.el = mouseover
+    UI.hover
+      root:         @
+      el:           mouseover
+      latestEvent:  e
+      endEvents:    'mouseout'
+      asapTest: ->  true
+      close:        true
 
-    $.on @, 'mousemove',      Settings.hover
+    return
-    $.on @, 'mouseout',       Settings.mouseout
-
-    return
-
-  hover: (e) ->
-    UI.hover e, "menu"
-
-  mouseout: (e) ->
-    mouseover = UI.el
-    for child in mouseover.childNodes
-      $.rm child
-    delete UI.el
-
-    $.off @, 'mousemove',     Settings.hover