Happy 100th commit! For the 100th commit, I've revamped a good portion of the user interface, and we don't plan on stopping! There's more to come!

Each theme has more of a distinct feel in the control panel now. I moved a large portion of the inline CSS into global.css, tweaked some core code which didn't line up, and added CSS text insertions to make things more flexible.

Revamped the alerts interface. We have more changes coming up!
Added screenshots for Tempra Cursive and Tempra Conflux Mobile to the README.
Added a .htaccess file, just in case someone plops Gosora in Apache's /www/ folder to stop the contents of config.go from becoming publically visible. Never put Gosora in your /www/ folder, Gosora is a standalone program which does NOT use Apache or any other webserver.
Fixed a bug in the inline forum editor.
Added a hand-written Markdown parser which is much faster than the previous Regex based one. This is still a work in progress.
Added support for strikethrough and underline elements to the Markdown parser.
Fixed the missing semicolons in global.js
Revamped the form CSS.
Author bits on the theme manager now link to the author's website.
Improved the profiles a little.
The code in the stylesheets now have a more consistent style.
Fixed a bug in the Cosmo theme relating to the fact that Gosora doesn't have sidebars yet.

There are many more changes which aren't listed here.
If weirdness regarding lines or spacing occurs, I'm experimenting with a new text editor. I hope to have this fixed by the next commit.

.htaccess

@@ -0,0 +1,3 @@
+# Gosora doesn't use Apache, this file is just here to stop Apache from blindly serving our config files, etc. when this program isn't intended to be served in such a manner at all
+
+deny from all

README.md

@@ -104,10 +104,14 @@ We're looking for ways to clean-up the plugin system so that all of them (except
 
 ![Tempra Simple Mobile](https://github.com/Azareal/Gosora/blob/master/images/tempra-simple-mobile-375px.png)
 
+![Tempra Cursive Theme](https://github.com/Azareal/Gosora/blob/master/images/tempra-cursive.png)
+
 ![Tempra Conflux Theme](https://github.com/Azareal/Gosora/blob/master/images/tempra-conflux.png)
 
 ![Tempra Conflux Mobile](https://github.com/Azareal/Gosora/blob/master/images/tempra-conflux-mobile-320px.png)
 
+![Tempra Conflux Mobile](https://github.com/Azareal/Gosora/blob/master/images/tempra-conflux-control-panel.png)
+
 ![Cosmo Conflux Theme](https://github.com/Azareal/Gosora/blob/master/images/cosmo-conflux.png)
 
 ![Cosmo Theme](https://github.com/Azareal/Gosora/blob/master/images/cosmo.png)

forum.go

@@ -13,9 +13,7 @@ type ForumAdmin struct
 	Active bool
 	Preset string
 	TopicCount int
-	
 	PresetLang string
-	PresetEmoji string
 }
 
 type Forum struct

gen_router.go

@@ -1,5 +1,6 @@
 // Code generated by. DO NOT EDIT.
 /* This file was automatically generated by the software. Please don't edit it as your changes may be overwritten at any moment. */
+// The router generator might be discontinued in favour of syncmaps in Go 1.9, it will be temporarily used for a couple of months as a lockless alternative to maps
 package main
 
 //import "fmt"

group.go

@@ -12,7 +12,7 @@ type GroupAdmin struct
 	ID int
 	Name string
 	Rank string
-	RankEmoji string
+	RankClass string
 	CanEdit bool
 	CanDelete bool
 }

panel_routes.go

@@ -206,12 +206,18 @@ func route_panel_forums(w http.ResponseWriter, r *http.Request){
 	var forumList []interface{}
 	for _, forum := range forums {
 		if forum.Name != "" {
-			fadmin := ForumAdmin{forum.ID,forum.Name,forum.Active,forum.Preset,forum.TopicCount,preset_to_lang(forum.Preset),preset_to_emoji(forum.Preset)}
+			fadmin := ForumAdmin{forum.ID,forum.Name,forum.Active,forum.Preset,forum.TopicCount,preset_to_lang(forum.Preset)}
+			if fadmin.Preset == "" {
+				fadmin.Preset = "custom"
+			}
 			forumList = append(forumList,fadmin)
 		}
 	}
 	pi := Page{"Forum Manager",user,noticeList,forumList,nil}
-	templates.ExecuteTemplate(w,"panel-forums.html",pi)
+	err := templates.ExecuteTemplate(w,"panel-forums.html",pi)
+	if err != nil {
+		InternalError(err,w,r)
+	}
 }
 
 func route_panel_forums_create_submit(w http.ResponseWriter, r *http.Request){
@@ -372,9 +378,9 @@ func route_panel_forums_edit_submit(w http.ResponseWriter, r *http.Request, sfid
 		return
 	}
 
-	forum_name := r.PostFormValue("forum-name")
-	forum_preset := strip_invalid_preset(r.PostFormValue("forum-preset"))
-	forum_active := r.PostFormValue("forum-active")
+	forum_name := r.PostFormValue("forum_name")
+	forum_preset := strip_invalid_preset(r.PostFormValue("forum_preset"))
+	forum_active := r.PostFormValue("forum_active")
     if !forum_exists(fid) {
 		LocalErrorJSQ("The forum you're trying to edit doesn't exist.",w,r,user,is_js)
 		return
@@ -921,30 +927,30 @@ func route_panel_groups(w http.ResponseWriter, r *http.Request){
 	var groupList []interface{}
 	for _, group := range groups[1:] {
 		var rank string
-		var rank_emoji string
+		var rank_class string
 		var can_edit bool
 		var can_delete bool = false
 
 		if group.Is_Admin {
 			rank = "Admin"
-			rank_emoji = "👑"
+			rank_class = "admin"
 		} else if group.Is_Mod {
 			rank = "Mod"
-			rank_emoji = "👮"
+			rank_class = "mod"
 		} else if group.Is_Banned {
 			rank = "Banned"
-			rank_emoji = "⛓️"
+			rank_class = "banned"
 		} else if group.ID == 6 {
 			rank = "Guest"
-			rank_emoji = "👽"
+			rank_class = "guest"
 		} else {
 			rank = "Member"
-			rank_emoji = "👪"
+			rank_class = "member"
 		}
 
 		can_edit = user.Perms.EditGroup && (!group.Is_Admin || user.Perms.EditGroupAdmin) && (!group.Is_Mod || user.Perms.EditGroupSuperMod)
 
-		groupList = append(groupList, GroupAdmin{group.ID,group.Name,rank,rank_emoji,can_edit,can_delete})
+		groupList = append(groupList, GroupAdmin{group.ID,group.Name,rank,rank_class,can_edit,can_delete})
 	}
 	//fmt.Printf("%+v\n", groupList)
 

permissions.go

@@ -1,4 +1,5 @@
 package main
+
 import "log"
 import "fmt"
 import "sync"
@@ -375,7 +376,7 @@ func build_forum_permissions() error {
 
 func strip_invalid_preset(preset string) string {
 	switch(preset) {
-		case "all","announce","members","staff","admins","archive":
+		case "all","announce","members","staff","admins","archive","custom":
 			break
 		default: return ""
 	}
@@ -384,17 +385,18 @@ func strip_invalid_preset(preset string) string {
 
 func preset_to_lang(preset string) string {
 	switch(preset) {
-		case "all": return ""//return "Everyone"
+		case "all": return "Public"
 		case "announce": return "Announcements"
 		case "members": return "Member Only"
 		case "staff": return "Staff Only"
 		case "admins": return "Admin Only"
 		case "archive": return "Archive"
+		case "custom": return "Custom"
 	}
 	return ""
 }
 
-func preset_to_emoji(preset string) string {
+/*func preset_to_emoji(preset string) string {
 	switch(preset) {
 		case "all": return ""//return "Everyone"
 		case "announce": return "📣"
@@ -404,7 +406,7 @@ func preset_to_emoji(preset string) string {
 		case "archive": return "☠️"
 	}
 	return ""
-}
+}*/
 
 func rebuild_group_permissions(gid int) error {
 	var permstr []byte

plugin_bbcode.go

@@ -172,6 +172,7 @@ func bbcode_parse_without_code(data interface{}) interface{} {
 		msg = bbcode_url_label.ReplaceAllString(msg,"<a href=\"$1$2//$3\" rel=\"nofollow\">$4</i>")
 		msg = bbcode_quotes.ReplaceAllString(msg,"<span class=\"postQuote\">$1</span>")
 	}
+	
 	return string(msgbytes)
 }
 
@@ -181,6 +182,7 @@ func bbcode_full_parse(data interface{}) interface{} {
 	//fmt.Println("BBCode PrePre String:")
 	//fmt.Println("`"+msg+"`")
 	//fmt.Println("----")
+	
 	msgbytes := []byte(msg)
 	has_u := false
 	has_b := false
@@ -189,6 +191,7 @@ func bbcode_full_parse(data interface{}) interface{} {
 	has_c := false
 	complex_bbc := false
 	msgbytes = append(msgbytes,space_gap...)
+	
 	//fmt.Println("BBCode Simple Pre:")
 	//fmt.Println("`"+string(msgbytes)+"`")
 	//fmt.Println("----")
@@ -272,8 +275,7 @@ func bbcode_full_parse(data interface{}) interface{} {
 	
 	if complex_bbc {
 		i := 0
-		var start int
-		var lastTag int
+		var start, lastTag int
 		var outbytes []byte
 		//fmt.Println("BBCode Pre:")
 		//fmt.Println("`"+string(msgbytes)+"`")
@@ -366,5 +368,6 @@ func bbcode_full_parse(data interface{}) interface{} {
 	} else {
 		msg = string(msgbytes[0:len(msgbytes) - 10])
 	}
+	
 	return msg
 }

plugin_markdown.go

@@ -1,29 +1,373 @@
 package main
+
+//import "fmt"
 import "regexp"
+//import "strings"
+
+var markdown_max_depth int = 25 // How deep the parser will go when parsing Markdown strings
+var markdown_unclosed_element []byte
+
+var markdown_bold_tag_open []byte
+var markdown_bold_tag_close []byte
+var markdown_italic_tag_open []byte
+var markdown_italic_tag_close []byte
+var markdown_underline_tag_open []byte
+var markdown_underline_tag_close []byte
+var markdown_strike_tag_open []byte
+var markdown_strike_tag_close []byte
 
 var markdown_bold_italic *regexp.Regexp
 var markdown_bold *regexp.Regexp
 var markdown_italic *regexp.Regexp
+var markdown_strike *regexp.Regexp
+var markdown_underline *regexp.Regexp
 
 func init() {
 	plugins["markdown"] = NewPlugin("markdown","Markdown","Azareal","http://github.com/Azareal","","","",init_markdown,nil,deactivate_markdown)
 }
 
 func init_markdown() {
+	//plugins["markdown"].AddHook("parse_assign", markdown_regex_parse)
 	plugins["markdown"].AddHook("parse_assign", markdown_parse)
+	
+	markdown_unclosed_element = []byte("<span style='color: red;'>[Unclosed Element]</span>")
+	
+	markdown_bold_tag_open = []byte("<b>")
+	markdown_bold_tag_close = []byte("</b>")
+	markdown_italic_tag_open = []byte("<i>")
+	markdown_italic_tag_close = []byte("</i>")
+	markdown_underline_tag_open = []byte("<u>")
+	markdown_underline_tag_close = []byte("</u>")
+	markdown_strike_tag_open = []byte("<s>")
+	markdown_strike_tag_close = []byte("</s>")
+	
 	markdown_bold_italic = regexp.MustCompile(`\*\*\*(.*)\*\*\*`)
 	markdown_bold = regexp.MustCompile(`\*\*(.*)\*\*`)
 	markdown_italic = regexp.MustCompile(`\*(.*)\*`)
+	//markdown_strike = regexp.MustCompile(`\~\~(.*)\~\~`)
+	markdown_strike = regexp.MustCompile(`\~(.*)\~`)
+	//markdown_underline = regexp.MustCompile(`\_\_(.*)\_\_`)
+	markdown_underline = regexp.MustCompile(`\_(.*)\_`)
 }
 
 func deactivate_markdown() {
+	//plugins["markdown"].RemoveHook("parse_assign", markdown_regex_parse)
 	plugins["markdown"].RemoveHook("parse_assign", markdown_parse)
 }
 
-func markdown_parse(data interface{}) interface{} {
+func markdown_regex_parse(data interface{}) interface{} {
 	msg := data.(string)
 	msg = markdown_bold_italic.ReplaceAllString(msg,"<i><b>$1</b></i>")
 	msg = markdown_bold.ReplaceAllString(msg,"<b>$1</b>")
 	msg = markdown_italic.ReplaceAllString(msg,"<i>$1</i>")
+	msg = markdown_strike.ReplaceAllString(msg,"<s>$1</s>")
+	msg = markdown_underline.ReplaceAllString(msg,"<u>$1</u>")
 	return msg
 }
+
+
+// An adapter for the parser, so that the parser can call itself recursively.
+// This is less for the simple Markdown elements like bold and italics and more for the really complicated ones I plan on adding at some point.
+func markdown_parse(data interface{}) interface{} {
+	return _markdown_parse(data.(string) + " ",0)
+}
+
+// Under Construction!
+func _markdown_parse(msg string, n int) string {
+	if n > markdown_max_depth {
+		return "<span style='color: red;'>[Markdown Error: Overflowed the max depth of 20]</span>"
+	}
+	
+	var outbytes []byte
+	var lastElement int
+	//fmt.Println("enter message loop")
+	//fmt.Printf("Message: %v\n",strings.Replace(msg,"\r","\\r",-1))
+	
+	for index := 0; index < len(msg); index++ {
+		/*//fmt.Println("--OUTER MARKDOWN LOOP START--")
+		//fmt.Println("index",index)
+		//fmt.Println("msg[index]",msg[index])
+		//fmt.Println("string(msg[index])",string(msg[index]))
+		//fmt.Println("--OUTER MARKDOWN LOOP END--")
+		//fmt.Println(" ")*/
+		
+		switch(msg[index]) {
+			case '_':
+				var startIndex int = index
+				if (index + 1) >= len(msg) {
+					break
+				}
+				
+				index++
+				index = markdown_skip_until_char(msg, index, '_')
+				if (index - (startIndex + 1)) < 2 || index >= len(msg) {
+					break
+				}
+				
+				sIndex := startIndex + 1
+				lIndex := index
+				index++
+				
+				outbytes = append(outbytes, msg[lastElement:startIndex]...)
+				outbytes = append(outbytes, markdown_underline_tag_open...)
+				outbytes = append(outbytes, msg[sIndex:lIndex]...)
+				outbytes = append(outbytes, markdown_underline_tag_close...)
+				
+				lastElement = index
+				index--
+			case '~':
+				var startIndex int = index
+				if (index + 1) >= len(msg) {
+					break
+				}
+				
+				index++
+				index = markdown_skip_until_char(msg, index, '~')
+				if (index - (startIndex + 1)) < 2 || index >= len(msg) {
+					break
+				}
+				
+				sIndex := startIndex + 1
+				lIndex := index
+				index++
+				
+				outbytes = append(outbytes, msg[lastElement:startIndex]...)
+				outbytes = append(outbytes, markdown_strike_tag_open...)
+				outbytes = append(outbytes, msg[sIndex:lIndex]...)
+				outbytes = append(outbytes, markdown_strike_tag_close...)
+				
+				lastElement = index
+				index--
+			case '*':
+				//fmt.Println("------")
+				//fmt.Println("[]byte(msg):",[]byte(msg))
+				//fmt.Println("len(msg)",len(msg))
+				//fmt.Println("start index",index)
+				//fmt.Println("start msg[index]",msg[index])
+				//fmt.Println("start string(msg[index])",string(msg[index]))
+				//fmt.Println("start []byte(msg[:index])",[]byte(msg[:index]))
+				
+				var startIndex int = index
+				var italic bool = true
+				var bold bool
+				if (index + 2) < len(msg) {
+					//fmt.Println("start index + 1",index + 1)
+					//fmt.Println("start msg[index]",msg[index + 1])
+					//fmt.Println("start string(msg[index])",string(msg[index + 1]))
+					
+					if msg[index + 1] == '*' {
+						//fmt.Println("two asterisks")
+						bold = true
+						index++
+						if msg[index + 1] != '*' {
+							italic = false
+						} else {
+							//fmt.Println("three asterisks")
+							index++
+						}
+					}
+				}
+				
+				//fmt.Println("lastElement",lastElement)
+				//fmt.Println("startIndex:",startIndex)
+				//fmt.Println("msg[startIndex]",msg[startIndex])
+				//fmt.Println("string(msg[startIndex])",string(msg[startIndex]))
+				
+				//fmt.Println("preabrupt index",index)
+				//fmt.Println("preabrupt msg[index]",msg[index])
+				//fmt.Println("preabrupt string(msg[index])",string(msg[index]))
+				//fmt.Println("preabrupt []byte(msg[:index])",[]byte(msg[:index]))
+				//fmt.Println("preabrupt msg[:index]",msg[:index])
+				
+				// Does the string terminate abruptly?
+				if (index + 1) >= len(msg) {
+					break
+				}
+				
+				index++
+				
+				//fmt.Println("preskip index",index)
+				//fmt.Println("preskip msg[index]",msg[index])
+				//fmt.Println("preskip string(msg[index])",string(msg[index]))
+				
+				index = markdown_skip_until_asterisk(msg,index)
+				
+				if index >= len(msg) {
+					break
+				}
+				
+				//fmt.Println("index",index)
+				//fmt.Println("[]byte(msg[:index])",[]byte(msg[:index]))
+				//fmt.Println("msg[index]",msg[index])
+				
+				sIndex := startIndex
+				lIndex := index
+				if bold && italic {
+					//fmt.Println("bold & italic final code")
+					if (index + 3) >= len(msg) {
+						//fmt.Println("unclosed markdown element @ exit element")
+						outbytes = append(outbytes, msg[lastElement:startIndex]...)
+						outbytes = append(outbytes, markdown_unclosed_element...)
+						lastElement = startIndex
+						break
+					}
+					index += 3
+					sIndex += 3
+				} else if bold {
+					//fmt.Println("bold final code")
+					if (index + 2) >= len(msg) {
+						//fmt.Println("true unclosed markdown element @ exit element")
+						outbytes = append(outbytes, msg[lastElement:startIndex]...)
+						outbytes = append(outbytes, markdown_unclosed_element...)
+						lastElement = startIndex
+						break
+					}
+					index += 2
+					sIndex += 2
+				} else {
+					//fmt.Println("italic final code")
+					if (index + 1) >= len(msg) {
+						//fmt.Println("true unclosed markdown element @ exit element")
+						outbytes = append(outbytes, msg[lastElement:startIndex]...)
+						outbytes = append(outbytes, markdown_unclosed_element...)
+						lastElement = startIndex
+						break
+					}
+					index++
+					sIndex++
+				}
+				
+				//fmt.Println("sIndex",sIndex)
+				//fmt.Println("lIndex",lIndex)
+				
+				if lIndex <= sIndex {
+					//fmt.Println("unclosed markdown element @ lIndex <= sIndex")
+					outbytes = append(outbytes, msg[lastElement:startIndex]...)
+					outbytes = append(outbytes, markdown_unclosed_element...)
+					lastElement = startIndex
+					break
+				}
+				
+				if sIndex < 0 || lIndex < 0 {
+					//fmt.Println("unclosed markdown element @ sIndex < 0 || lIndex < 0")
+					outbytes = append(outbytes, msg[lastElement:startIndex]...)
+					outbytes = append(outbytes, markdown_unclosed_element...)
+					lastElement = startIndex
+					break
+				}
+				
+				//fmt.Println("final sIndex",sIndex)
+				//fmt.Println("final lIndex",lIndex)
+				//fmt.Println("final index",index)
+				//fmt.Println("final msg[index]",msg[index])
+				//fmt.Println("final string(msg[index])",string(msg[index]))
+				
+				//fmt.Println("final msg[sIndex]",msg[sIndex])
+				//fmt.Println("final string(msg[sIndex])",string(msg[sIndex]))
+				//fmt.Println("final msg[lIndex]",msg[lIndex])
+				//fmt.Println("final string(msg[lIndex])",string(msg[lIndex]))
+				
+				//fmt.Println("[]byte(msg[:sIndex])",[]byte(msg[:sIndex]))
+				//fmt.Println("[]byte(msg[:lIndex])",[]byte(msg[:lIndex]))
+				
+				outbytes = append(outbytes, msg[lastElement:startIndex]...)
+				
+				if bold {
+					outbytes = append(outbytes, markdown_bold_tag_open...)
+				}
+				if italic {
+					outbytes = append(outbytes, markdown_italic_tag_open...)
+				}
+				
+				outbytes = append(outbytes, msg[sIndex:lIndex]...)
+				
+				if bold {
+					outbytes = append(outbytes, markdown_bold_tag_close...)
+				}
+				if italic {
+					outbytes = append(outbytes, markdown_italic_tag_close...)
+				}
+				
+				lastElement = index
+				index--
+			//case '`':
+			//case '_':
+			//case '~':
+			//case 10: // newline
+		}
+	}
+	
+	//fmt.Println("exit message loop")
+	//fmt.Println(" ")
+	
+	if len(outbytes) == 0 {
+		return msg
+	} else if lastElement < (len(msg) - 1) {
+		return string(outbytes) + msg[lastElement:]
+	}
+	return string(outbytes)
+}
+
+func markdown_find_char(data string ,index int ,char byte) bool {
+	for ; index < len(data); index++ {
+		item := data[index]
+		if item > 32 {
+			return (item == char)
+		}
+	}
+	return false
+}
+
+func markdown_skip_until_char(data string, index int, char byte) int {
+	for ; index < len(data); index++ {
+		if data[index] == char {
+			break
+		}
+	}
+	return index
+}
+
+func markdown_skip_until_asterisk(data string, index int) int {
+SwitchLoop:
+	for ; index < len(data); index++ {
+		switch(data[index]) {
+			case 10:
+				if ((index+1) < len(data)) && markdown_find_char(data,index,'*') {
+					index = markdown_skip_list(data,index)
+				}
+			case '*': break SwitchLoop
+		}
+	}
+	return index
+}
+
+// plugin_markdown doesn't support lists yet, but I want it to be easy to have nested lists when we do have them
+func markdown_skip_list(data string, index int) int {
+	var lastNewline int
+	var datalen int = len(data)
+	
+	for ; index < datalen; index++ {
+	SkipListInnerLoop:
+		if data[index] == 10 {
+			lastNewline = index
+			for ; index < datalen; index++ {
+				if data[index] > 32 {
+					break
+				} else if data[index] == 10 {
+					goto SkipListInnerLoop
+				}
+			}
+			
+			if index >= datalen {
+				if data[index] != '*' && data[index] != '-' {
+					if (lastNewline + 1) < datalen {
+						return lastNewline + 1
+					}
+					return lastNewline
+				}
+			}
+		}
+	}
+	
+	return index
+}

public/global.js

@@ -49,9 +49,7 @@ function load_alerts(menu_alerts)
 					//console.log(mmsg);
 				}
 
-				if(alist == "") {
-					alist = "<div class='alertItem'>You don't have any alerts</div>"
-				}
+				if(alist == "") alist = "<div class='alertItem'>You don't have any alerts</div>";
 				menu_alerts.find(".alertList").html(alist);
 				if(data.msgs.length != 0) {
 					menu_alerts.find(".alert_counter").text(data.msgs.length);
@@ -65,7 +63,7 @@ function load_alerts(menu_alerts)
 						console.log(data.errmsg);
 						errtxt = data.errmsg;
 					}
-					else errtxt = "Unable to get the alerts"
+					else errtxt = "Unable to get the alerts";
 				} catch(e) { errtxt = "Unable to get the alerts"; }
 				menu_alerts.find(".alertList").html("<div class='alertItem'>"+errtxt+"</div>");
 			}
@@ -74,58 +72,54 @@ function load_alerts(menu_alerts)
 
 $(document).ready(function(){
 	function SplitN(data,ch,n) {
-		var out = []
-		if(data.length == 0) {
-			return out
-		}
+		var out = [];
+		if(data.length == 0) return out;
 
-		var lastIndex = 0
-		var j = 0
-		var lastN = 1
+		var lastIndex = 0;
+		var j = 0;
+		var lastN = 1;
 		for(var i = 0; i < data.length; i++) {
 			if(data[i] == ch) {
-				out[j++] = data.substring(lastIndex,i)
-				lastIndex = i
-				if(lastN == n) {
-					break
-				}
-				lastN++
+				out[j++] = data.substring(lastIndex,i);
+				lastIndex = i;
+				if(lastN == n) break;
+				lastN++;
 			}
 		}
 		if(data.length > lastIndex) {
-			out[out.length - 1] += data.substring(lastIndex)
+			out[out.length - 1] += data.substring(lastIndex);
 		}
-		return out
+		return out;
 	}
 
 	if(window["WebSocket"]) {
-		conn = new WebSocket("ws://" + document.location.host + "/ws/")
+		conn = new WebSocket("ws://" + document.location.host + "/ws/");
 		conn.onopen = function() {
-			conn.send("page " + document.location.pathname + '\r')
+			conn.send("page " + document.location.pathname + '\r');
 		}
 		conn.onclose = function() {
-			conn = false
+			conn = false;
 		}
 		conn.onmessage = function(event) {
-			//console.log("WS_Message:")
-			//console.log(event.data)
-			var messages = event.data.split('\r')
+			//console.log("WS_Message:");
+			//console.log(event.data);
+			var messages = event.data.split('\r');
 			for(var i = 0; i < messages.length; i++) {
-				//console.log("Message:")
-				//console.log(messages[i])
+				//console.log("Message:");
+				//console.log(messages[i]);
 				if(messages[i].startsWith("set ")) {
-					//msgblocks = messages[i].split(' ',3)
-					msgblocks = SplitN(messages[i]," ",3)
+					//msgblocks = messages[i].split(' ',3);
+					msgblocks = SplitN(messages[i]," ",3);
 					if(msgblocks.length < 3) {
-						continue
+						continue;
 					}
-					document.querySelector(msgblocks[1]).innerHTML = msgblocks[2]
+					document.querySelector(msgblocks[1]).innerHTML = msgblocks[2];
 				} else if(messages[i].startsWith("set-class ")) {
-					msgblocks = SplitN(messages[i]," ",3)
+					msgblocks = SplitN(messages[i]," ",3);
 					if(msgblocks.length < 3) {
-						continue
+						continue;
 					}
-					document.querySelector(msgblocks[1]).className = msgblocks[2]
+					document.querySelector(msgblocks[1]).className = msgblocks[2];
 				}
 			}
 		}
@@ -158,14 +152,14 @@ $(document).ready(function(){
 		//console.log("Form Action: " + form_action);
 		$.ajax({
 			url: form_action,
+			type: "POST",
+			dataType: "json",
 			data: {
 				topic_name: topic_name_input,
 				topic_status: topic_status_input,
 				topic_content: topic_content_input,
 				topic_js: 1
-			},
-			type: "POST",
-			dataType: "json"
+			}
 		});
 	});
 
@@ -227,21 +221,34 @@ $(document).ready(function(){
 	$(".edit_fields").click(function(event)
 	{
 		event.preventDefault();
+		//console.log("clicked .edit_fields");
 		var block_parent = $(this).closest('.editable_parent');
+		//console.log(block_parent);
 		block_parent.find('.hide_on_edit').hide();
 		block_parent.find('.editable_block').show();
 		block_parent.find('.editable_block').each(function(){
 			var field_name = this.getAttribute("data-field");
 			var field_type = this.getAttribute("data-type");
-			if(field_type=="list") {
+			if(field_type=="list")
+			{
 				var field_value = this.getAttribute("data-value");
 				if(field_name in form_vars) var it = form_vars[field_name];
 				else var it = ['No','Yes'];
 				var itLen = it.length;
 				var out = "";
+				//console.log("Field Name '" + field_name + "'")
+				//console.log("Field Type",field_type)
+				//console.log("Field Value '" + field_value + "'")
 				for (var i = 0; i < itLen; i++){
-					if(field_value==i) sel = "selected ";
-					else sel = "";
+					//console.log("Field Possibility '" + it[i] + "'");
+					if(field_value == i || field_value == it[i]) {
+						sel = "selected ";
+						//console.log("Class List: ",this.classList)
+						this.classList.remove(field_name + '_' + it[i]);
+						//console.log("Removing " + field_name + '_' + it[i]);
+						//console.log(this.classList)
+						this.innerHTML = "";
+					} else sel = "";
 					out += "<option "+sel+"value='"+i+"'>"+it[i]+"</option>";
 				}
 				this.innerHTML = "<select data-field='"+field_name+"' name='"+field_name+"'>" + out + "</select>";
@@ -250,19 +257,32 @@ $(document).ready(function(){
 		});
 		block_parent.find('.show_on_edit').eq(0).show();
 
+		// Remove any handlers already attached to the submitter
+		$(".submit_edit").unbind("click");
+
 		$(".submit_edit").click(function(event)
 		{
 			event.preventDefault();
+			//console.log("running .submit_edit event");
 			var out_data = {is_js: "1"}
 			var block_parent = $(this).closest('.editable_parent');
 			var block = block_parent.find('.editable_block').each(function(){
 				var field_name = this.getAttribute("data-field");
 				var field_type = this.getAttribute("data-type");
-				if(field_type == "list") var newContent = $(this).find('select :selected').text();
-				else var newContent = $(this).find('input').eq(0).val();
-				
+				if(field_type == "list") {
+					var newContent = $(this).find('select :selected').text();
+					this.classList.add(field_name + '_' + newContent);
+					this.innerHTML = "";
+				} else {
+					var newContent = $(this).find('input').eq(0).val();
 					this.innerHTML = newContent;
-				out_data[field_name] = newContent
+				}
+				//console.log(".submit_edit");
+				//console.log("field_name",field_name);
+				//console.log("field_type",field_type);
+				//console.log("newContent",newContent);
+				this.setAttribute("data-value",newContent);
+				out_data[field_name] = newContent;
 			});
 
 			var form_action = $(this).closest('a').attr("href");

router_gen/main.go

@@ -1,4 +1,5 @@
 /* WIP Under Construction */
+// The router generator might be discontinued in favour of syncmaps in Go 1.9, it will be temporarily used for a couple of months as a lockless alternative to maps
 package main
 
 import "log"
@@ -16,7 +17,7 @@ func main() {
 	routes()
 	
 	var out string
-	var fdata string = "// Code generated by. DO NOT EDIT.\n/* This file was automatically generated by the software. Please don't edit it as your changes may be overwritten at any moment. */\n"
+	var fdata string = "// Code generated by. DO NOT EDIT.\n/* This file was automatically generated by the software. Please don't edit it as your changes may be overwritten at any moment. */\n// The router generator might be discontinued in favour of syncmaps in Go 1.9, it will be temporarily used for a couple of months as a lockless alternative to maps\n"
 	
 	for _, route := range route_list {
 		var end int

template_list.go

@@ -60,10 +60,13 @@ var topic_2 []byte = []byte(`">&lt;</a></div>`)
 var topic_3 []byte = []byte(`<link rel="prerender" href="/topic/`)
 var topic_4 []byte = []byte(`?page=`)
 var topic_5 []byte = []byte(`" />
-<div id="nextFloat" class="next_button"><a class="next_link" href="/topic/`)
+<div id="nextFloat" class="next_button">
+	<a class="next_link" href="/topic/`)
 var topic_6 []byte = []byte(`?page=`)
-var topic_7 []byte = []byte(`">&gt;</a></div>`)
+var topic_7 []byte = []byte(`">&gt;</a>
+</div>`)
 var topic_8 []byte = []byte(`
+
 <div class="rowblock topic_block">
 	<form action='/topic/edit/submit/`)
 var topic_9 []byte = []byte(`' method="post">
@@ -101,34 +104,43 @@ var topic_24 []byte = []byte(`">
 var topic_25 []byte = []byte(`</p>
 		<textarea name="topic_content" class="show_on_edit topic_content_input">`)
 var topic_26 []byte = []byte(`</textarea>
+		
+		<span class="controls">
+		
 		<a href="/user/`)
 var topic_27 []byte = []byte(`" class="username real_username">`)
-var topic_28 []byte = []byte(`</a>&nbsp;
+var topic_28 []byte = []byte(`</a>&nbsp;&nbsp;
+		
 		`)
 var topic_29 []byte = []byte(`<a href="/topic/like/submit/`)
-var topic_30 []byte = []byte(`" class="mod_button" title="Love it" style="color:#202020;"><button class="username" style="`)
+var topic_30 []byte = []byte(`" class="mod_button" title="Love it" style="color:#202020;">
+		<button class="username like_label" style="`)
 var topic_31 []byte = []byte(`background-color:/*#eaffea*/#D6FFD6;`)
-var topic_32 []byte = []byte(`">😀</button></a>&nbsp;`)
+var topic_32 []byte = []byte(`"></button></a>`)
 var topic_33 []byte = []byte(`<a href='/topic/edit/`)
-var topic_34 []byte = []byte(`' class="mod_button open_edit" style="font-weight:normal;" title="Edit Topic"><button class="username">🖊️</button></a>&nbsp;`)
+var topic_34 []byte = []byte(`' class="mod_button open_edit" style="font-weight:normal;" title="Edit Topic"><button class="username edit_label"></button></a>`)
 var topic_35 []byte = []byte(`<a href='/topic/delete/submit/`)
-var topic_36 []byte = []byte(`' class="mod_button" style="font-weight:normal;" title="Delete Topic"><button class="username">🗑️</button></a>&nbsp;`)
+var topic_36 []byte = []byte(`' class="mod_button" style="font-weight:normal;" title="Delete Topic"><button class="username trash_label"></button></a>`)
 var topic_37 []byte = []byte(`<a class="mod_button" href='/topic/unstick/submit/`)
-var topic_38 []byte = []byte(`' style="font-weight:normal;" title="Unpin Topic"><button class="username" style="background-color:/*#eaffea*/#D6FFD6;">📌</button></a>`)
+var topic_38 []byte = []byte(`' style="font-weight:normal;" title="Unpin Topic"><button class="username unpin_label"></button></a>`)
 var topic_39 []byte = []byte(`<a href='/topic/stick/submit/`)
-var topic_40 []byte = []byte(`' class="mod_button" style="font-weight:normal;" title="Pin Topic"><button class="username">📌</button></a>&nbsp;`)
+var topic_40 []byte = []byte(`' class="mod_button" style="font-weight:normal;" title="Pin Topic"><button class="username pin_label"></button></a>`)
 var topic_41 []byte = []byte(`
-		<a href="/report/submit/`)
+		
+		<a class="mod_button" href="/report/submit/`)
 var topic_42 []byte = []byte(`?session=`)
-var topic_43 []byte = []byte(`&type=topic" class="mod_button report_item" style="font-weight:normal;" title="Flag Topic"><button class="username">🚩</button></a>&nbsp;
+var topic_43 []byte = []byte(`&type=topic" class="mod_button report_item" style="font-weight:normal;" title="Flag Topic"><button class="username flag_label"></button></a>
+		
 		`)
-var topic_44 []byte = []byte(`<a class="username hide_on_micro" style="float: right;color:#505050;border-left:none;padding-left:5px;padding-right:5px;font-size:17px;">`)
-var topic_45 []byte = []byte(`</a><a class="username hide_on_micro" style="color:#505050;float:right;opacity:0.85;margin-left:5px;" title="Like Count">😀</a>`)
+var topic_44 []byte = []byte(`<a class="username hide_on_micro like_count">`)
+var topic_45 []byte = []byte(`</a><a class="username hide_on_micro like_count_label" title="Like Count"></a>`)
 var topic_46 []byte = []byte(`<a class="username hide_on_micro" style="float:right;color:#505050;font-size:16px;">`)
 var topic_47 []byte = []byte(`</a>`)
 var topic_48 []byte = []byte(`<a class="username hide_on_micro level">`)
-var topic_49 []byte = []byte(`</a><a class="username hide_on_micro" style="color:#505050;float:right;opacity:0.85;" title="Level">👑</a>`)
+var topic_49 []byte = []byte(`</a><a class="username hide_on_micro level_label" style="color:#505050;float:right;opacity:0.85;" title="Level"></a>`)
 var topic_50 []byte = []byte(`
+		
+		</span>
 	</div>
 </div>
 <div class="rowblock post_container" style="overflow: hidden;">`)
@@ -149,30 +161,38 @@ var topic_58 []byte = []byte(`0px;background-repeat:no-repeat, repeat-y;backgrou
 var topic_59 []byte = []byte(`">
 		<p class="editable_block user_content" style="margin:0;padding:0;">`)
 var topic_60 []byte = []byte(`</p>
+		
+		<span class="controls">
+		
 		<a href="/user/`)
 var topic_61 []byte = []byte(`" class="username real_username">`)
-var topic_62 []byte = []byte(`</a>&nbsp;
+var topic_62 []byte = []byte(`</a>&nbsp;&nbsp;
+		
 		`)
 var topic_63 []byte = []byte(`<a href="/reply/like/submit/`)
-var topic_64 []byte = []byte(`" class="mod_button" title="Love it" style="color:#202020;"><button class="username" style="`)
+var topic_64 []byte = []byte(`" class="mod_button" title="Love it" style="color:#202020;"><button class="username like_label" style="`)
 var topic_65 []byte = []byte(`background-color:/*#eaffea*/#D6FFD6;`)
-var topic_66 []byte = []byte(`">😀</button></a>&nbsp;`)
+var topic_66 []byte = []byte(`"></button></a>`)
 var topic_67 []byte = []byte(`<a href="/reply/edit/submit/`)
-var topic_68 []byte = []byte(`" class="mod_button" title="Edit Reply"><button class="username edit_item">🖊️</button></a>&nbsp;`)
+var topic_68 []byte = []byte(`" class="mod_button" title="Edit Reply"><button class="username edit_item edit_label"></button></a>`)
 var topic_69 []byte = []byte(`<a href="/reply/delete/submit/`)
-var topic_70 []byte = []byte(`" class="mod_button" title="Delete Reply"><button class="username delete_item">🗑️</button></a>&nbsp;`)
+var topic_70 []byte = []byte(`" class="mod_button" title="Delete Reply"><button class="username delete_item trash_label"></button></a>`)
 var topic_71 []byte = []byte(`
-		<a href="/report/submit/`)
+		
+		<a class="mod_button" href="/report/submit/`)
 var topic_72 []byte = []byte(`?session=`)
-var topic_73 []byte = []byte(`&type=reply" class="mod_button" title="Flag Reply"><button class="username report_item">🚩</button></a>&nbsp;
+var topic_73 []byte = []byte(`&type=reply" class="mod_button report_item" title="Flag Reply"><button class="username report_item flag_label"></button></a>
+		
 		`)
-var topic_74 []byte = []byte(`<a class="username hide_on_micro" style="float: right;color:#505050;border-left:none;padding-left:5px;padding-right:5px;font-size:17px;">`)
-var topic_75 []byte = []byte(`</a><a class="username hide_on_micro" style="color:#505050;float:right;opacity:0.85;margin-left:5px;" title="Like Count">😀</a>`)
+var topic_74 []byte = []byte(`<a class="username hide_on_micro like_count">`)
+var topic_75 []byte = []byte(`</a><a class="username hide_on_micro like_count_label" title="Like Count"></a>`)
 var topic_76 []byte = []byte(`<a class="username hide_on_micro" style="float: right;color:#505050;font-size:16px;">`)
 var topic_77 []byte = []byte(`</a>`)
 var topic_78 []byte = []byte(`<a class="username hide_on_micro level">`)
-var topic_79 []byte = []byte(`</a><a class="username hide_on_micro" style="color:#505050;float:right;opacity:0.85;" title="Level">👑`)
+var topic_79 []byte = []byte(`</a><a class="username hide_on_micro level_label" style="color:#505050;float:right;opacity:0.85;" title="Level">`)
 var topic_80 []byte = []byte(`</a>
+		
+		</span>
 	</div>
 `)
 var topic_81 []byte = []byte(`</div>
@@ -192,10 +212,10 @@ var topic_83 []byte = []byte(`' type="hidden" />
 	</form>
 </div>
 `)
-var footer_0 []byte = []byte(`			<!--<link rel="stylesheet" href="https://use.fontawesome.com/8670aa03ca.css">-->
-		</div><div style="clear: both;"></div></div></div>
+var footer_0 []byte = []byte(`		</div><div style="clear: both;"></div></div></div>
 	</body>
-</html>`)
+</html>
+`)
 var topic_alt_0 []byte = []byte(`<div id="prevFloat" class="prev_button"><a class="prev_link" href="/topic/`)
 var topic_alt_1 []byte = []byte(`?page=`)
 var topic_alt_2 []byte = []byte(`">&lt;</a></div>`)
@@ -353,10 +373,13 @@ var topic_alt_83 []byte = []byte(`' type="hidden" />
 </div>
 `)
 var profile_0 []byte = []byte(`
-<div class="colblock_left" style="max-width: 220px;">
-	<div class="rowitem" style="padding: 0;"><img src="`)
-var profile_1 []byte = []byte(`" style="max-width: 100%;margin: 0;display: block;" /></div>
-	<div class="rowitem" style="text-transform: capitalize;">
+
+<div id="profile_left_pane" class="colblock_left" style="max-width: 220px;">
+	<div class="rowitem" style="padding: 0;">
+		<img src="`)
+var profile_1 []byte = []byte(`" style="max-width: 100%;margin: 0;display: block;" />
+	</div>
+	<div class="rowitem">
 	<span style="font-size: 18px;">`)
 var profile_2 []byte = []byte(`</span>`)
 var profile_3 []byte = []byte(`<span class="username" style="float: right;font-weight: normal;">`)
@@ -364,7 +387,9 @@ var profile_4 []byte = []byte(`</span>`)
 var profile_5 []byte = []byte(`
 	</div>
 	<div class="rowitem passive">
-		<a class="username">Add Friend</a>
+		<a class="profile_menu_item">Add Friend</a>
+	</div>
+	<div class="rowitem passive"
 		`)
 var profile_6 []byte = []byte(`<a href="/users/unban/`)
 var profile_7 []byte = []byte(`?session=`)
@@ -375,13 +400,14 @@ var profile_11 []byte = []byte(`" class="username">Ban</a>`)
 var profile_12 []byte = []byte(`
 		<a href="/report/submit/`)
 var profile_13 []byte = []byte(`?session=`)
-var profile_14 []byte = []byte(`&type=user" class="username report_item">Report</a>
+var profile_14 []byte = []byte(`&type=user" class="profile_menu_item report_item">Report</a>
 	</div>
 </div>
-<div class="colblock_right">
+
+<div class="colblock_right" style="width: calc(95% - 210px);">
 	<div class="rowitem rowhead"><a>Comments</a></div>
 </div>
-<div class="colblock_right" style="overflow: hidden;border-top: none;">`)
+<div id="profile_comments" class="colblock_right" style="overflow: hidden;border-top: none;width:calc(95% - 210px);">`)
 var profile_15 []byte = []byte(`
 <div class="rowitem passive deletable_block editable_parent simple" style="`)
 var profile_16 []byte = []byte(`background-image: url(`)
@@ -390,20 +416,23 @@ var profile_18 []byte = []byte(`-1`)
 var profile_19 []byte = []byte(`0px;background-repeat: no-repeat, repeat-y;background-size: 128px;padding-left: 136px;`)
 var profile_20 []byte = []byte(`">
 		<span class="editable_block user_content simple">`)
-var profile_21 []byte = []byte(`</span>
-		<br /><br />
+var profile_21 []byte = []byte(`</span><br /><br />
 		<a href="/user/`)
-var profile_22 []byte = []byte(`" class="username">`)
-var profile_23 []byte = []byte(`</a>&nbsp;
+var profile_22 []byte = []byte(`" class="real_username username">`)
+var profile_23 []byte = []byte(`</a>&nbsp;&nbsp;
+
 		`)
 var profile_24 []byte = []byte(`<a href="/profile/reply/edit/submit/`)
-var profile_25 []byte = []byte(`" class="mod_button" title="Edit Item"><button class="username edit_item">Edit</button></a>&nbsp;
+var profile_25 []byte = []byte(`" class="mod_button" title="Edit Item"><button class="username edit_item edit_label"></button></a>
+
 		<a href="/profile/reply/delete/submit/`)
-var profile_26 []byte = []byte(`" class="mod_button" title="Delete Item"><button class="username delete_item">Delete</button></a>&nbsp;`)
+var profile_26 []byte = []byte(`" class="mod_button" title="Delete Item"><button class="username delete_item trash_label"></button></a>`)
 var profile_27 []byte = []byte(`
-		<a href="/report/submit/`)
+
+		<a class="mod_button" href="/report/submit/`)
 var profile_28 []byte = []byte(`?session=`)
-var profile_29 []byte = []byte(`&type=user-reply"><button class="username report_item">Report</button></a>
+var profile_29 []byte = []byte(`&type=user-reply"><button class="username report_item flag_label"></button></a>
+
 		`)
 var profile_30 []byte = []byte(`<a class="username hide_on_mobile" style="float: right;">`)
 var profile_31 []byte = []byte(`</a>`)
@@ -411,7 +440,8 @@ var profile_32 []byte = []byte(`
 	</div>
 `)
 var profile_33 []byte = []byte(`</div>
-<div class="colblock_right" style="border-top: none;">
+
+<div class="colblock_right" style="border-top: none;width: calc(95% - 210px);">
 `)
 var profile_34 []byte = []byte(`
 <form action="/profile/reply/create/" method="post">
@@ -427,6 +457,7 @@ var profile_35 []byte = []byte(`' type="hidden" />
 `)
 var profile_36 []byte = []byte(`
 </div>
+
 `)
 var forums_0 []byte = []byte(`
 <div class="rowblock opthead">
@@ -436,10 +467,10 @@ var forums_0 []byte = []byte(`
 	`)
 var forums_1 []byte = []byte(`<div class="rowitem">
 		<a href="/forum/`)
-var forums_2 []byte = []byte(`" style="font-size: 20px;position:relative;top: -2px;font-weight: normal;text-transform: none;">`)
+var forums_2 []byte = []byte(`" class="panel_upshift">`)
 var forums_3 []byte = []byte(`</a>
 		<a href="/topic/`)
-var forums_4 []byte = []byte(`" style="font-weight: normal;text-transform: none;float: right;">`)
+var forums_4 []byte = []byte(`" style="float: right;">`)
 var forums_5 []byte = []byte(` <small style="font-size: 12px;">`)
 var forums_6 []byte = []byte(`</small></a>
 	</div>
@@ -488,13 +519,14 @@ var forum_5 []byte = []byte(`" />
 var forum_6 []byte = []byte(`?page=`)
 var forum_7 []byte = []byte(`">&gt;</a></div>`)
 var forum_8 []byte = []byte(`
+
 <div class="rowblock">
 	<div class="rowitem rowhead"><a>`)
 var forum_9 []byte = []byte(`</a>
     `)
-var forum_10 []byte = []byte(`<span class='username' title='No Permissions' style="font-weight:normal;float: right;position:relative;top:-5px;">&#x1F512;&#xFE0E</span>`)
+var forum_10 []byte = []byte(`<span class='username head_tag_upshift' title='No Permissions'>&#x1F512;&#xFE0E</span>`)
 var forum_11 []byte = []byte(`<a href="/topics/create/`)
-var forum_12 []byte = []byte(`" class='username' style="float: right;position:relative;top:-5px;">New Topic</a>`)
+var forum_12 []byte = []byte(`" class='username head_tag_upshift'>New Topic</a>`)
 var forum_13 []byte = []byte(`</div>
 </div>
 <div class="rowblock">

templates/account-own-edit-avatar.html

@@ -12,7 +12,7 @@
 	<div class="colstack_item">
 		<form action="/user/edit/avatar/submit/" method="post" enctype="multipart/form-data">
 			<div class="formrow">
-				<div class="formitem"><a>Upload Avatar</a></div>
+				<div class="formitem formlabel"><a>Upload Avatar</a></div>
 				<div class="formitem"><input name="account-avatar" type="file" /></div>
 			</div>
 			<div class="formrow">

templates/account-own-edit-username.html

@@ -7,11 +7,11 @@
 	<div class="colstack_item">
 		<form action="/user/edit/username/submit/" method="post">
 			<div class="formrow">
-				<div class="formitem"><a>Current Username</a></div>
-				<div class="formitem">{{.CurrentUser.Name}}</div>
+				<div class="formitem formlabel"><a>Current Username</a></div>
+				<div class="formitem formlabel">{{.CurrentUser.Name}}</div>
 			</div>
 			<div class="formrow">
-				<div class="formitem"><a>New Username</a></div>
+				<div class="formitem formlabel"><a>New Username</a></div>
 				<div class="formitem"><input name="account-new-username" type="text" /></div>
 			</div>
 			<div class="formrow">

templates/account-own-edit.html

@@ -7,15 +7,15 @@
 	<div class="colstack_item">
 		<form action="/user/edit/critical/submit/" method="post">
 			<div class="formrow">
-				<div class="formitem"><a>Current Password</a></div>
+				<div class="formitem formlabel"><a>Current Password</a></div>
 				<div class="formitem"><input name="account-current-password" type="password" placeholder="*****" /></div>
 			</div>
 			<div class="formrow">
-				<div class="formitem"><a>New Password</a></div>
+				<div class="formitem formlabel"><a>New Password</a></div>
 				<div class="formitem"><input name="account-new-password" type="password" placeholder="*****" /></div>
 			</div>
 			<div class="formrow">
-				<div class="formitem"><a>Confirm Password</a></div>
+				<div class="formitem formlabel"><a>Confirm Password</a></div>
 				<div class="formitem"><input name="account-confirm-password" type="password" placeholder="*****" /></div>
 			</div>
 			<div class="formrow">

templates/create-topic.html

@@ -5,13 +5,13 @@
 <div class="rowblock">
 	<form action="/topic/create/submit/" method="post">
 		<div class="formrow">
-			<div class="formitem"><a>Board</a></div>
+			<div class="formitem formlabel"><a>Board</a></div>
 			<div class="formitem"><select name="topic-board">
                 {{range .ItemList}}<option {{if eq .ID $.FID}}selected{{end}} value="{{.ID}}">{{.Name}}</option>{{end}}
             </select></div>
 		</div>
         <div class="formrow">
-			<div class="formitem"><a>Topic Name</a></div>
+			<div class="formitem formlabel"><a>Topic Name</a></div>
 			<div class="formitem"><input name="topic-name" type="text" placeholder="Topic Name" /></div>
 		</div>
 		<div class="formrow">

templates/footer.html

@@ -1,4 +1,3 @@
-			<!--<link rel="stylesheet" href="https://use.fontawesome.com/8670aa03ca.css">-->
 		</div><div style="clear: both;"></div></div></div>
 	</body>
 </html>

templates/forum.html

@@ -1,10 +1,12 @@
 {{template "header.html" . }}
+
 {{if gt .Page 1}}<div id="prevFloat" class="prev_button"><a class="prev_link" href="/forum/{{.Forum.ID}}?page={{subtract .Page 1}}">&lt;</a></div>{{end}}
 {{if ne .LastPage .Page}}<link rel="prerender" href="/forum/{{.Forum.ID}}?page={{add .Page 1}}" />
 <div id="nextFloat" class="next_button"><a class="next_link" href="/forum/{{.Forum.ID}}?page={{add .Page 1}}">&gt;</a></div>{{end}}
+
 <div class="rowblock">
 	<div class="rowitem rowhead"><a>{{.Title}}</a>
-    {{if ne .CurrentUser.ID 0}}{{if not .CurrentUser.Perms.CreateTopic}}<span class='username' title='No Permissions' style="font-weight:normal;float: right;position:relative;top:-5px;">&#x1F512;&#xFE0E</span>{{else}}<a href="/topics/create/{{.Forum.ID}}" class='username' style="float: right;position:relative;top:-5px;">New Topic</a>{{end}}{{end}}</div>
+    {{if ne .CurrentUser.ID 0}}{{if not .CurrentUser.Perms.CreateTopic}}<span class='username head_tag_upshift' title='No Permissions'>&#x1F512;&#xFE0E</span>{{else}}<a href="/topics/create/{{.Forum.ID}}" class='username head_tag_upshift'>New Topic</a>{{end}}{{end}}</div>
 </div>
 <div class="rowblock">
 	{{range .ItemList}}<div class="rowitem passive" style="{{if .Avatar}}background-image: url({{.Avatar}});background-position: left;background-repeat: no-repeat;background-size: 64px;padding-left: 72px;{{end}}{{if .Sticky}}background-color: #FFFFCC;{{else if .Is_Closed}}background-color: #eaeaea;{{end}}">

templates/forums.html

@@ -4,8 +4,8 @@
 </div>
 <div class="rowblock">
 	{{range .ItemList}}<div class="rowitem">
-		<a href="/forum/{{.ID}}" style="font-size: 20px;position:relative;top: -2px;font-weight: normal;text-transform: none;">{{.Name}}</a>
-		<a href="/topic/{{.LastTopicID}}" style="font-weight: normal;text-transform: none;float: right;">{{.LastTopic}} <small style="font-size: 12px;">{{.LastTopicTime}}</small></a>
+		<a href="/forum/{{.ID}}" class="panel_upshift">{{.Name}}</a>
+		<a href="/topic/{{.LastTopicID}}" style="float: right;">{{.LastTopic}} <small style="font-size: 12px;">{{.LastTopicTime}}</small></a>
 	</div>
 	{{else}}<div class="rowitem passive">You don't have access to any forums.</div>{{end}}
 </div>

templates/login.html

@@ -5,11 +5,11 @@
 <div class="rowblock">
 	<form action="/accounts/login/submit/" method="post">
 		<div class="formrow">
-			<div class="formitem"><a>Account Name</a></div>
+			<div class="formitem formlabel"><a>Account Name</a></div>
 			<div class="formitem"><input name="username" type="text" placeholder="Account Name" /></div>
 		</div>
 		<div class="formrow">
-			<div class="formitem"><a>Password</a></div>
+			<div class="formitem formlabel"><a>Password</a></div>
 			<div class="formitem"><input name="password" type="password" autocomplete="current-password" placeholder="*****" /></div>
 		</div>
 		<div class="formrow">

templates/panel-adminlogs.html

@@ -14,7 +14,7 @@
 	<div class="colstack_item colstack_head">
 		<div class="rowitem rowhead"><a>Administration Logs</a></div>
 	</div>
-	<div class="colstack_item">
+	<div id="panel_adminlogs" class="colstack_item">
 		{{range .Logs}}
 		<div class="rowitem" style="font-weight: normal;text-transform: none;">
 			<a style="font-size: 17px;">{{.Action}}</a><br />

templates/panel-dashboard.html

@@ -1,7 +1,7 @@
 {{template "header.html" . }}
 {{template "panel-menu.html" . }}
 <div class="colstack_right">
-	<div class="colstack_grid">
+	<div id="panel_dashboard" class="colstack_grid">
 {{range .GridItems}}
 		<div id="{{.ID}}" class="grid_item {{.Class}}" title="{{.Note}}" style="{{if .TextColour}}color: {{.TextColour}};{{end}}
 		{{if .Background}}background-color: {{.Background}};{{end}}">{{.Body}}</div>

templates/panel-forums.html

@@ -1,48 +1,50 @@
 {{template "header.html" . }}
 {{template "panel-menu.html" . }}
 <script>var form_vars = {
-	'forum-active': ['Hide','Show'],
-	'forum-preset': ['all','announce','members','staff','admins','archive','custom']};
+	'forum_active': ['Hide','Show'],
+	'forum_preset': ['all','announce','members','staff','admins','archive','custom']};
 </script>
+
 <div class="colstack_right">
 	<div class="colstack_item colstack_head">
 		<div class="rowitem rowhead"><a>Forums</a></div>
 	</div>
-	<div class="colstack_item">
+	<div id="panel_forums" class="colstack_item">
 		{{range .ItemList}}
-		<div class="rowitem editable_parent" style="font-weight: normal;{{if eq .ID 1}}border-bottom-style:solid;{{end}}">
-			<a data-field="forum-name" data-type="text" class="editable_block" style="font-size: 20px;position:relative;top: -2px;text-transform: none;{{if not .Active}}color:#707070;{{end}}">{{.Name}}</a>
-			<span style="float: right;">
-			<span data-field="forum-active" data-type="list" class="username editable_block hide_on_zero" title="Hidden" style="color: black;{{if .Active}}display:none;" data-value="1"{{else}}" data-value="0"{{end}}>🕵️</span>
+		<div class="rowitem editable_parent" style="{{if eq .ID 1}}border-bottom-style:solid;{{end}}">
+			<a data-field="forum_name" data-type="text" class="editable_block panel_upshift" style="{{if not .Active}}color:#707070;{{end}}">{{.Name}}</a>
+			<span class="panel_floater">
+			<span data-field="forum_active" data-type="list" class="panel_tag editable_block forum_active {{if .Active}}forum_active_Show" data-value="1{{else}}forum_active_Hide" data-value="0{{end}}" title="Hidden"></span>
 
-			{{if .PresetEmoji}}<span data-field="forum-preset" data-type="list" data-value="{{.Preset}}" class="username editable_block" title="{{.PresetLang}}">{{.PresetEmoji}}</span>
-			{{else if .PresetLang}}<span data-field="forum-preset" data-type="list" data-value="{{.Preset}}" class="username editable_block">{{.PresetLang}}</span>{{else}}<span data-field="forum-preset" data-type="list" data-value="{{.Preset}}" class="username editable_block" style="display:none;">{{.PresetLang}}</span>{{end}}
-			
-			{{if gt .ID 0}}<a class="username edit_fields hide_on_edit">Edit</a>
-			<a href="/panel/forums/edit/submit/{{.ID}}"><button class='username submit_edit show_on_edit' type='submit'>Update</button></a>{{end}}
-			{{if gt .ID 1}}<a href="/panel/forums/delete/{{.ID}}?session={{$.CurrentUser.Session}}" class="username">Delete</a>{{end}}
+			<span data-field="forum_preset" data-type="list" data-value="{{.Preset}}" class="panel_tag editable_block forum_preset forum_preset_{{.Preset}}" title="{{.PresetLang}}"></span>
+			<span class="panel_buttons">
+				{{if gt .ID 0}}<a class="panel_tag edit_fields hide_on_edit panel_right_button">Edit</a>
+				<a class="panel_right_button" href="/panel/forums/edit/submit/{{.ID}}"><button class='panel_tag submit_edit show_on_edit' type='submit'>Update</button></a>{{end}}
+				{{if gt .ID 1}}<a href="/panel/forums/delete/{{.ID}}?session={{$.CurrentUser.Session}}" class="panel_tag panel_right_button">Delete</a>{{end}}
+			</span>
 			</span>
 		</div>
 		{{end}}
 	</div>
+
 	<div class="colstack_item colstack_head">
 		<div class="rowitem rowhead"><a>Add Forum</a></div>
 	</div>
 	<div class="colstack_item">
 		<form action="/panel/forums/create/?session={{.CurrentUser.Session}}" method="post">
 			<div class="formrow">
-				<div class="formitem"><a>Forum Name</a></div>
-				<div class="formitem"><input name="forum-name" type="text" /></div>
+				<div class="formitem formlabel"><a>Forum Name</a></div>
+				<div class="formitem"><input name="forum-name" type="text" placeholder="Super Secret Forum" /></div>
 			</div>
 			<div class="formrow">
-				<div class="formitem"><a>Hidden?</a></div>
+				<div class="formitem formlabel"><a>Hidden?</a></div>
 				<div class="formitem"><select name="forum-active">
 					<option value="1">Yes</option>
 					<option value="0">No</option>
 				</select></div>
 			</div>
 			<div class="formrow">
-				<div class="formitem"><a>Preset</a></div>
+				<div class="formitem formlabel"><a>Preset</a></div>
 				<div class="formitem"><select name="forum-preset">
 					<option selected value="all">Everyone</option>
 					<option value="announce">Announcements</option>
@@ -59,4 +61,5 @@
 		</form>
 	</div>
 </div>
+
 {{template "footer.html" . }}

templates/panel-group-edit-perms.html

@@ -15,7 +15,7 @@
 		<div class="rowitem rowhead"><a>{{.Name}} Group</a></div>
 	</div>
 	<form action="/panel/groups/edit/perms/submit/{{.ID}}?session={{.CurrentUser.Session}}" method="post">
-	<div class="colstack_item">
+	<div id="panel_group" class="colstack_item">
 		{{if .CurrentUser.Perms.EditGroupLocalPerms}}
 		{{range .LocalPerms}}
 		<div class="formrow">

templates/panel-group-edit.html

@@ -14,15 +14,15 @@
 	<div class="colstack_item colstack_head">
 		<div class="rowitem rowhead"><a>{{.Name}} Group</a></div>
 	</div>
-	<div class="colstack_item">
+	<div id="panel_group" class="colstack_item">
 		<form action="/panel/groups/edit/submit/{{.ID}}?session={{.CurrentUser.Session}}" method="post">
 		<div class="formrow">
-			<div class="formitem"><a>Name</a></div>
+			<div class="formitem formlabel"><a>Name</a></div>
 			<div class="formitem"><input name="group-name" type="text" value="{{.Name}}" placeholder="General Forum" /></div>
 		</div>
 		{{if .CurrentUser.Perms.EditGroup}}
 		<div class="formrow">
-			<div class="formitem"><a>Type</a></div>
+			<div class="formitem formlabel"><a>Type</a></div>
 			<div class="formitem">
 				<select name="group-type"{{if .DisableRank}} disabled{{end}}>
 					<option{{if eq .Rank "Guest"}} selected{{end}} disabled>Guest</option>
@@ -34,7 +34,7 @@
 			</div>
 		</div>{{end}}
 		<div class="formrow">
-			<div class="formitem"><a>Tag</a></div>
+			<div class="formitem formlabel"><a>Tag</a></div>
 			<div class="formitem"><input name="group-tag" type="text" value="{{.Tag}}" placeholder="VIP" /></div>
 		</div>
 		<div class="formrow">

templates/panel-groups.html

@@ -1,18 +1,19 @@
 {{template "header.html" . }}
 {{template "panel-menu.html" . }}
+
 <div class="colstack_right">
 	<div class="colstack_item colstack_head">
 		<div class="rowitem rowhead"><a>Groups</a></div>
 	</div>
-	<div class="colstack_item">
+	<div id="panel_groups" class="colstack_item">
 		{{range .ItemList}}
-		<div class="rowitem editable_parent" style="font-weight: normal;text-transform: none;">
-			<a href="/panel/groups/edit/{{.ID}}" style="font-size: 20px;position:relative;top: -2px;text-transform: none;">{{.Name}}</a>
-			<span style="float: right;">
-				{{if .RankEmoji}}<a class="username" title="{{.Rank}}">{{.RankEmoji}}</a>
-				{{else}}<span class="username">{{.Rank}}</span>{{end}}
+		<div class="rowitem editable_parent">
+			<a href="/panel/groups/edit/{{.ID}}" class="panel_upshift">{{.Name}}</a>
+			<span class="panel_floater">
+				{{if .RankClass}}<a class="panel_tag panel_rank_tag panel_rank_tag_{{.RankClass}}" title="{{.Rank}}"></a>
+				{{else}}<span class="panel_tag">{{.Rank}}</span>{{end}}
 
-				{{if .CanEdit}}<a href="/panel/groups/edit/{{.ID}}" class="username">Edit</a>{{end}}
+				{{if .CanEdit}}<a href="/panel/groups/edit/{{.ID}}" class="panel_tag panel_right_button">Edit</a>{{end}}
 			</span>
 		</div>
 		{{end}}
@@ -23,11 +24,11 @@
 	<div class="colstack_item">
 		<form action="/panel/groups/create/?session={{.CurrentUser.Session}}" method="post">
 			<div class="formrow">
-				<div class="formitem"><a>Name</a></div>
+				<div class="formitem formlabel"><a>Name</a></div>
 				<div class="formitem"><input name="group-name" type="text" /></div>
 			</div>
 			<div class="formrow">
-				<div class="formitem"><a>Type</a></div>
+				<div class="formitem formlabel"><a>Type</a></div>
 				<div class="formitem">
 					<select name="group-type"{{if not .CurrentUser.Perms.EditGroupGlobalPerms}} disabled{{end}}>
 						<option selected>Member</option>
@@ -38,7 +39,7 @@
 				</div>
 			</div>
 			<div class="formrow">
-				<div class="formitem"><a>Tag</a></div>
+				<div class="formitem formlabel"><a>Tag</a></div>
 				<div class="formitem"><input name="group-tag" type="text" /></div>
 			</div>
 			<div class="formrow">

templates/panel-modlogs.html

@@ -14,7 +14,7 @@
 	<div class="colstack_item colstack_head">
 		<div class="rowitem rowhead"><a>Moderation Logs</a></div>
 	</div>
-	<div class="colstack_item">
+	<div id="panel_modlogs" class="colstack_item">
 		{{range .Logs}}
 		<div class="rowitem" style="font-weight: normal;text-transform: none;">
 			<a style="font-size: 17px;">{{.Action}}</a><br />

templates/panel-plugins.html

@@ -4,15 +4,15 @@
 	<div class="colstack_item colstack_head">
 		<div class="rowitem rowhead"><a>Plugins</a></div>
 	</div>
-	<div class="colstack_item">
+	<div id="panel_plugins" class="colstack_item">
 		{{range .ItemList}}
-		<div class="rowitem editable_parent" style="font-weight: normal;text-transform: none;">
-			<a {{if .URL}}href="{{.URL}}" {{end}}class="editable_block" style="font-size: 20px;position:relative;top: -2px;">{{.Name}}</a><br />
+		<div class="rowitem editable_parent">
+			<a {{if .URL}}href="{{.URL}}" {{end}}class="editable_block" class="panel_upshift">{{.Name}}</a><br />
 			<small style="margin-left: 2px;">Author: {{.Author}}</small>
 			<span style="float: right;">
-				{{if .Settings}}<a href="/panel/settings/" class="username">Settings</a>{{end}}
-				{{if .Active}}<a href="/panel/plugins/deactivate/{{.UName}}?session={{$.CurrentUser.Session}}" class="username">Deactivate</a>
-				{{else}}<a href="/panel/plugins/activate/{{.UName}}?session={{$.CurrentUser.Session}}" class="username">Activate</a>{{end}}
+				{{if .Settings}}<a href="/panel/settings/" class="panel_tag">Settings</a>{{end}}
+				{{if .Active}}<a href="/panel/plugins/deactivate/{{.UName}}?session={{$.CurrentUser.Session}}" class="panel_tag">Deactivate</a>
+				{{else}}<a href="/panel/plugins/activate/{{.UName}}?session={{$.CurrentUser.Session}}" class="panel_tag">Activate</a>{{end}}
 			</span>
 		</div>
 		{{end}}

templates/panel-setting.html

@@ -4,15 +4,15 @@
 	<div class="colstack_item colstack_head">
 		<div class="rowitem rowhead"><a>Edit Setting</a></div>
 	</div>
-	<div class="colstack_item">
+	<div id="panel_setting" class="colstack_item">
 		<form action="/panel/settings/edit/submit/{{.Something.Name}}?session={{.CurrentUser.Session}}" method="post">
 			<div class="formrow">
-				<div class="formitem"><a>Setting Name</a></div>
-				<div class="formitem">{{.Something.Name}}</div>
+				<div class="formitem formlabel"><a>Setting Name</a></div>
+				<div class="formitem formlabel">{{.Something.Name}}</div>
 			</div>
 			{{if eq .Something.Type "list"}}
 			<div class="formrow">
-				<div class="formitem"><a>Setting Value</a></div>
+				<div class="formitem formlabel"><a>Setting Value</a></div>
 				<div class="formitem">
 					<select name="setting-value">
 					{{range .ItemList}}<option{{if .Selected}} selected{{end}} value="{{.Value}}">{{.Label}}</option>{{end}}
@@ -21,11 +21,11 @@
 			</div>
 			{{else if eq .Something.Type "bool"}}
 			<div class="formrow">
-				<div class="formitem"><a>Setting Value</a></div>
+				<div class="formitem formlabel"><a>Setting Value</a></div>
 				<div class="formitem"><input name="setting-value" type="checkbox"{{if eq .Something.Content "1"}} checked{{end}} /></div>
 			</div>
 			{{else}}<div class="formrow">
-				<div class="formitem"><a>Setting Value</a></div>
+				<div class="formitem formlabel"><a>Setting Value</a></div>
 				<div class="formitem"><input name="setting-value" type="text" value="{{.Something.Content}}" /></div>
 			</div>{{end}}
 			<div class="formrow">

templates/panel-settings.html

@@ -4,10 +4,10 @@
 	<div class="colstack_item colstack_head">
 		<div class="rowitem rowhead"><a>Settings</a></div>
 	</div>
-	<div class="colstack_item">
+	<div id="panel_settings" class="colstack_item">
 		{{range $key, $value := .Something}}
-		<div class="rowitem editable_parent" style="font-weight: normal;text-transform: none;">
-			<a href="/panel/settings/edit/{{$key}}" class="editable_block" style="font-size: 20px;position:relative;top: -2px;">{{$key}}</a>
+		<div class="rowitem editable_parent">
+			<a href="/panel/settings/edit/{{$key}}" class="editable_block panel_upshift">{{$key}}</a>
 			<a style="float: right;">{{$value}}</a>
 		</div>
 		{{end}}

templates/panel-themes.html

@@ -1,21 +1,28 @@
 {{template "header.html" . }}
 {{template "panel-menu.html" . }}
-<style type="text/css">.rowitem::after {content:"";display:block;clear:both;}</style>
+<style type="text/css">
+.rowitem::after {
+	content: "";
+	display: block;
+	clear: both;
+}
+</style>
+
 <div class="colstack_right">
 	<div class="colstack_item colstack_head">
 		<div class="rowitem rowhead"><a>Primary Themes</a></div>
 	</div>
-	<div class="colstack_item">
+	<div id="panel_primary_themes" class="colstack_item panel_themes">
 		{{range .PrimaryThemes}}
-		<div class="rowitem editable_parent" style="font-weight: normal;text-transform: none;{{if .FullImage}}background-image: url('/static/{{.FullImage}}');background-position: center;background-size: 50%;background-repeat: no-repeat;{{end}}">
+		<div class="theme_row rowitem editable_parent" style="{{if .FullImage}}background-image: url('/static/{{.FullImage}}');background-position: center;background-size: 50%;background-repeat: no-repeat;{{end}}">
 			<span style="float: left;">
-				<a href="/panel/themes/{{.Name}}" class="editable_block" style="font-size: 20px;">{{.FriendlyName}}</a><br />
-				<small style="margin-left: 2px;">Author: {{.Creator}}</small>
+				<a href="/panel/themes/{{.Name}}" class="editable_block" style="font-size: 17px;">{{.FriendlyName}}</a><br />
+				<small class="panel_theme_author" style="margin-left: 2px;">Author: <a href="//{{.URL}}">{{.Creator}}</a></small>
 			</span>
-			<span style="float: right;">
-				{{if .MobileFriendly}}<span class="username" title="Mobile Friendly">📱</span>{{end}}
-				{{if .Tag}}<span class="username">{{.Tag}}</span>{{end}}
-				{{if .Active}}<span class="username">Default</span>{{else}}<a href="/panel/themes/default/{{.Name}}?session={{$.CurrentUser.Session}}" class="username">Make Default</a>{{end}}
+			<span class="panel_floater">
+				{{if .MobileFriendly}}<span class="panel_tag panel_theme_mobile" title="Mobile Friendly">📱</span>{{end}}
+				{{if .Tag}}<span class="panel_tag panel_theme_tag">{{.Tag}}</span>{{end}}
+				{{if .Active}}<span class="panel_tag panel_right_button">Default</span>{{else}}<a href="/panel/themes/default/{{.Name}}?session={{$.CurrentUser.Session}}" class="panel_tag panel_right_button">Make Default</a>{{end}}
 			</span>
 		</div>
 		{{end}}
@@ -23,17 +30,17 @@
 	<div class="colstack_item colstack_head">
 		<div class="rowitem rowhead"><a>Variant Themes</a></div>
 	</div>
-	<div class="colstack_item">
+	<div id="panel_variant_themes" class="colstack_item panel_themes">
 		{{range .VariantThemes}}
-		<div class="rowitem editable_parent" style="font-weight: normal;text-transform: none;{{if .FullImage}}background-image: url('/static/{{.FullImage}}');background-position: center;background-size: 50%;background-repeat: no-repeat;{{end}}">
+		<div class="theme_row rowitem editable_parent" style="{{if .FullImage}}background-image: url('/static/{{.FullImage}}');background-position: center;background-size: 50%;background-repeat: no-repeat;{{end}}">
 			<span style="float: left;">
-				<a href="/panel/themes/{{.Name}}" class="editable_block" style="font-size: 20px;">{{.FriendlyName}}</a><br />
-				<small style="margin-left: 2px;">Author: {{.Creator}}</small>
+				<a href="/panel/themes/{{.Name}}" class="editable_block" style="font-size: 17px;">{{.FriendlyName}}</a><br />
+				<small class="panel_theme_author" style="margin-left: 2px;">Author: <a href="//{{.URL}}">{{.Creator}}</a></small>
 			</span>
-			<span style="float: right;">
-				{{if .MobileFriendly}}<span class="username" title="Mobile Friendly">📱</span>{{end}}
-				{{if .Tag}}<span class="username">{{.Tag}}</span>{{end}}
-				{{if .Active}}<span class="username">Default</span>{{else}}<a href="/panel/themes/default/{{.Name}}?session={{$.CurrentUser.Session}}" class="username">Make Default</a>{{end}}
+			<span class="panel_floater">
+				{{if .MobileFriendly}}<span class="panel_tag panel_theme_mobile" title="Mobile Friendly">📱</span>{{end}}
+				{{if .Tag}}<span class="panel_tag panel_theme_tag">{{.Tag}}</span>{{end}}
+				{{if .Active}}<span class="panel_tag panel_right_button">Default</span>{{else}}<a href="/panel/themes/default/{{.Name}}?session={{$.CurrentUser.Session}}" class="panel_tag panel_right_button">Make Default</a>{{end}}
 			</span>
 		</div>
 		{{end}}

templates/panel-user-edit.html

@@ -4,23 +4,23 @@
 	<div class="colstack_item colstack_head">
 		<div class="rowitem rowhead"><a>User Editor</a></div>
 	</div>
-	<div class="colstack_item">
+	<div id="panel_user" class="colstack_item">
 		<form action="/panel/users/edit/submit/{{.Something.ID}}?session={{.CurrentUser.Session}}" method="post">
 		<div class="formrow">
-			<div class="formitem"><a>Name</a></div>
+			<div class="formitem formlabel"><a>Name</a></div>
 			<div class="formitem"><input name="user-name" type="text" value="{{.Something.Name}}" placeholder="Jane Doe" /></div>
 		</div>
 		{{if .CurrentUser.Perms.EditUserPassword}}<div class="formrow">
-			<div class="formitem"><a>Password</a></div>
+			<div class="formitem formlabel"><a>Password</a></div>
 			<div class="formitem"><input name="user-password" type="password" placeholder="*****" /></div>
 		</div>{{end}}
 		{{if .CurrentUser.Perms.EditUserEmail}}<div class="formrow">
-			<div class="formitem"><a>Email</a></div>
+			<div class="formitem formlabel"><a>Email</a></div>
 			<div class="formitem"><input name="user-email" type="email" value="{{.Something.Email}}" placeholder="example@localhost" /></div>
 		</div>{{end}}
 		{{if .CurrentUser.Perms.EditUserGroup}}
 		<div class="formrow">
-			<div class="formitem"><a>Group</a></div>
+			<div class="formitem formlabel"><a>Group</a></div>
 			<div class="formitem">
 				<select name="user-group">
 				{{range .ItemList}}<option {{if eq .ID $.Something.Group}}selected {{end}}value="{{.ID}}">{{.Name}}</option>{{end}}

templates/panel-users.html

@@ -1,18 +1,20 @@
 {{template "header.html" . }}
 {{template "panel-menu.html" . }}
+
 <div class="colstack_right">
 	<div class="colstack_item colstack_head">
 		<div class="rowitem rowhead"><a>Users</a></div>
 	</div>
-	<div class="colstack_item">
+	<div id="panel_users" class="colstack_item">
 		{{range .ItemList}}
 		<div class="rowitem editable_parent" style="font-weight: normal;text-transform: none;">
-			<a {{if $.CurrentUser.Perms.EditUser}}href="/panel/users/edit/{{.ID}}?session={{$.CurrentUser.Session}} "{{end}}class="editable_block" style="font-size: 20px;position:relative;top: -2px;">{{.Name}}</a>
-			<a href="/user/{{.ID}}" class="tag-mini" style="margin-left: 3px;position: relative;top:-5px;color: #505050;">Profile</a>
-			{{if .Tag}}<span class="username" style="margin-left 4px;{{if (.Is_Super_Mod) and (.Active)}}float: right;{{end}}">{{.Tag}}</span>{{end}}
-			<span style="float: right;">
-				{{if .Is_Banned}}<a href="/users/unban/{{.ID}}?session={{$.CurrentUser.Session}}" class="username">Unban</a>{{else if not .Is_Super_Mod}}<a href="/users/ban/{{.ID}}?session={{$.CurrentUser.Session}}" class="username">Ban</a>{{end}}
-				{{if not .Active}}<a href="/users/activate/{{.ID}}?session={{$.CurrentUser.Session}}" class="username">Activate</a>{{end}}
+			<a {{if $.CurrentUser.Perms.EditUser}}href="/panel/users/edit/{{.ID}}?session={{$.CurrentUser.Session}} "{{end}}class="editable_block">{{.Name}}</a>
+			<a href="/user/{{.ID}}" class="tag-mini">Profile</a>
+			{{if .Tag}}<span class="panel_tag" style="margin-left 4px;{{if (.Is_Super_Mod) and (.Active)}}float: right;{{end}}">{{.Tag}}</span>{{end}}
+
+			<span class="panel_floater">
+				{{if .Is_Banned}}<a href="/users/unban/{{.ID}}?session={{$.CurrentUser.Session}}" class="panel_tag panel_right_button">Unban</a>{{else if not .Is_Super_Mod}}<a href="/users/ban/{{.ID}}?session={{$.CurrentUser.Session}}" class="panel_tag panel_right_button">Ban</a>{{end}}
+				{{if not .Active}}<a href="/users/activate/{{.ID}}?session={{$.CurrentUser.Session}}" class="panel_tag panel_right_button">Activate</a>{{end}}
 			</span>
 		</div>
 		{{end}}

templates/profile.html

@@ -1,32 +1,42 @@
 {{template "header.html" . }}
-<div class="colblock_left" style="max-width: 220px;">
-	<div class="rowitem" style="padding: 0;"><img src="{{.ProfileOwner.Avatar}}" style="max-width: 100%;margin: 0;display: block;" /></div>
-	<div class="rowitem" style="text-transform: capitalize;">
+
+<div id="profile_left_pane" class="colblock_left" style="max-width: 220px;">
+	<div class="rowitem" style="padding: 0;">
+		<img src="{{.ProfileOwner.Avatar}}" style="max-width: 100%;margin: 0;display: block;" />
+	</div>
+	<div class="rowitem">
 	<span style="font-size: 18px;">{{.ProfileOwner.Name}}</span>{{if .ProfileOwner.Tag}}<span class="username" style="float: right;font-weight: normal;">{{.ProfileOwner.Tag}}</span>{{end}}
 	</div>
 	<div class="rowitem passive">
-		<a class="username">Add Friend</a>
+		<a class="profile_menu_item">Add Friend</a>
+	</div>
+	<div class="rowitem passive"
 		{{if (.CurrentUser.Is_Super_Mod) and not (.ProfileOwner.Is_Super_Mod) }}
 		{{if .ProfileOwner.Is_Banned }}<a href="/users/unban/{{.ProfileOwner.ID}}?session={{.CurrentUser.Session}}" class="username">Unban</a>{{else}}<a href="/users/ban/{{.ProfileOwner.ID}}?session={{.CurrentUser.Session}}" class="username">Ban</a>{{end}}
 		{{end}}
-		<a href="/report/submit/{{.ProfileOwner.ID}}?session={{.CurrentUser.Session}}&type=user" class="username report_item">Report</a>
+		<a href="/report/submit/{{.ProfileOwner.ID}}?session={{.CurrentUser.Session}}&type=user" class="profile_menu_item report_item">Report</a>
 	</div>
 </div>
-<div class="colblock_right">
+
+<div class="colblock_right" style="width: calc(95% - 210px);">
 	<div class="rowitem rowhead"><a>Comments</a></div>
 </div>
-<div class="colblock_right" style="overflow: hidden;border-top: none;">{{range .ItemList}}
+<div id="profile_comments" class="colblock_right" style="overflow: hidden;border-top: none;width:calc(95% - 210px);">{{range .ItemList}}
 <div class="rowitem passive deletable_block editable_parent simple" style="{{if .Avatar}}background-image: url({{.Avatar}}), url(/static/white-dot.jpg);background-position: 0px {{if le .ContentLines 5}}-1{{end}}0px;background-repeat: no-repeat, repeat-y;background-size: 128px;padding-left: 136px;{{.Css}}{{end}}">
-		<span class="editable_block user_content simple">{{.ContentHtml}}</span>
-		<br /><br />
-		<a href="/user/{{.CreatedBy}}" class="username">{{.CreatedByName}}</a>&nbsp;
-		{{if $.CurrentUser.Is_Mod}}<a href="/profile/reply/edit/submit/{{.ID}}" class="mod_button" title="Edit Item"><button class="username edit_item">Edit</button></a>&nbsp;
-		<a href="/profile/reply/delete/submit/{{.ID}}" class="mod_button" title="Delete Item"><button class="username delete_item">Delete</button></a>&nbsp;{{end}}
-		<a href="/report/submit/{{.ID}}?session={{$.CurrentUser.Session}}&type=user-reply"><button class="username report_item">Report</button></a>
+		<span class="editable_block user_content simple">{{.ContentHtml}}</span><br /><br />
+		<a href="/user/{{.CreatedBy}}" class="real_username username">{{.CreatedByName}}</a>&nbsp;&nbsp;
+
+		{{if $.CurrentUser.Is_Mod}}<a href="/profile/reply/edit/submit/{{.ID}}" class="mod_button" title="Edit Item"><button class="username edit_item edit_label"></button></a>
+
+		<a href="/profile/reply/delete/submit/{{.ID}}" class="mod_button" title="Delete Item"><button class="username delete_item trash_label"></button></a>{{end}}
+
+		<a class="mod_button" href="/report/submit/{{.ID}}?session={{$.CurrentUser.Session}}&type=user-reply"><button class="username report_item flag_label"></button></a>
+
 		{{if .Tag}}<a class="username hide_on_mobile" style="float: right;">{{.Tag}}</a>{{end}}
 	</div>
 {{end}}</div>
-<div class="colblock_right" style="border-top: none;">
+
+<div class="colblock_right" style="border-top: none;width: calc(95% - 210px);">
 {{if not .CurrentUser.Is_Banned}}
 <form action="/profile/reply/create/" method="post">
 	<input name="uid" value='{{.ProfileOwner.ID}}' type="hidden" />
@@ -39,4 +49,5 @@
 </form>
 {{end}}
 </div>
+
 {{template "footer.html" . }}

templates/register.html

@@ -5,19 +5,19 @@
 <div class="rowblock">
 	<form action="/accounts/create/submit/" method="post">
 		<div class="formrow">
-			<div class="formitem"><a>Account Name</a></div>
+			<div class="formitem formlabel"><a>Account Name</a></div>
 			<div class="formitem"><input name="username" type="text" placeholder="Account Name" /></div>
 		</div>
 		<div class="formrow">
-			<div class="formitem"><a>Email</a></div>
+			<div class="formitem formlabel"><a>Email</a></div>
 			<div class="formitem"><input name="email" type="email" placeholder="joe.doe@example.com" /></div>
 		</div>
 		<div class="formrow">
-			<div class="formitem"><a>Password</a></div>
+			<div class="formitem formlabel"><a>Password</a></div>
 			<div class="formitem"><input name="password" type="password" autocomplete="new-password" placeholder="*****" /></div>
 		</div>
 		<div class="formrow">
-			<div class="formitem"><a>Confirm Password</a></div>
+			<div class="formitem formlabel"><a>Confirm Password</a></div>
 			<div class="formitem"><input name="confirm_password" type="password" placeholder="*****" /></div>
 		</div>
 		<div class="formrow">

templates/topic.html

@@ -1,7 +1,12 @@
 {{template "header.html" . }}
+
 {{if gt .Page 1}}<div id="prevFloat" class="prev_button"><a class="prev_link" href="/topic/{{.Topic.ID}}?page={{subtract .Page 1}}">&lt;</a></div>{{end}}
+
 {{if ne .LastPage .Page}}<link rel="prerender" href="/topic/{{.Topic.ID}}?page={{add .Page 1}}" />
-<div id="nextFloat" class="next_button"><a class="next_link" href="/topic/{{.Topic.ID}}?page={{add .Page 1}}">&gt;</a></div>{{end}}
+<div id="nextFloat" class="next_button">
+	<a class="next_link" href="/topic/{{.Topic.ID}}?page={{add .Page 1}}">&gt;</a>
+</div>{{end}}
+
 <div class="rowblock topic_block">
 	<form action='/topic/edit/submit/{{.Topic.ID}}' method="post">
 		<div class="rowitem rowhead topic_item"{{if .Topic.Sticky}} style="background-color:#FFFFEA;"{{else if .Topic.Is_Closed}} style="background-color:#eaeaea;"{{end}}>
@@ -22,14 +27,27 @@
 	<div class="rowitem passive editable_parent post_item" style="border-bottom: none;{{if .Topic.Avatar}}background-image:url({{.Topic.Avatar}}), url(/static/white-dot.jpg);background-position: 0px {{if le .Topic.ContentLines 5}}-1{{end}}0px;background-repeat:no-repeat, repeat-y;background-size:128px;padding-left:136px;{{.Topic.Css}}{{end}}">
 		<p class="hide_on_edit topic_content user_content" style="margin:0;padding:0;">{{.Topic.Content}}</p>
 		<textarea name="topic_content" class="show_on_edit topic_content_input">{{.Topic.Content}}</textarea>
-		<a href="/user/{{.Topic.CreatedBy}}" class="username real_username">{{.Topic.CreatedByName}}</a>&nbsp;
-		{{if .CurrentUser.Perms.LikeItem}}<a href="/topic/like/submit/{{.Topic.ID}}" class="mod_button" title="Love it" style="color:#202020;"><button class="username" style="{{if .Topic.Liked}}background-color:/*#eaffea*/#D6FFD6;{{end}}">😀</button></a>&nbsp;{{end}}
-		{{if .CurrentUser.Perms.EditTopic}}<a href='/topic/edit/{{.Topic.ID}}' class="mod_button open_edit" style="font-weight:normal;" title="Edit Topic"><button class="username">🖊️</button></a>&nbsp;{{end}}
-		{{if .CurrentUser.Perms.DeleteTopic}}<a href='/topic/delete/submit/{{.Topic.ID}}' class="mod_button" style="font-weight:normal;" title="Delete Topic"><button class="username">🗑️</button></a>&nbsp;{{end}}
-		{{if .CurrentUser.Perms.PinTopic}}{{if .Topic.Sticky}}<a class="mod_button" href='/topic/unstick/submit/{{.Topic.ID}}' style="font-weight:normal;" title="Unpin Topic"><button class="username" style="background-color:/*#eaffea*/#D6FFD6;">📌</button></a>{{else}}<a href='/topic/stick/submit/{{.Topic.ID}}' class="mod_button" style="font-weight:normal;" title="Pin Topic"><button class="username">📌</button></a>&nbsp;{{end}}{{end}}
-		<a href="/report/submit/{{.Topic.ID}}?session={{.CurrentUser.Session}}&type=topic" class="mod_button report_item" style="font-weight:normal;" title="Flag Topic"><button class="username">🚩</button></a>&nbsp;
-		{{if .Topic.LikeCount}}<a class="username hide_on_micro" style="float: right;color:#505050;border-left:none;padding-left:5px;padding-right:5px;font-size:17px;">{{.Topic.LikeCount}}</a><a class="username hide_on_micro" style="color:#505050;float:right;opacity:0.85;margin-left:5px;" title="Like Count">😀</a>{{end}}
-		{{if .Topic.Tag}}<a class="username hide_on_micro" style="float:right;color:#505050;font-size:16px;">{{.Topic.Tag}}</a>{{else}}<a class="username hide_on_micro level">{{.Topic.Level}}</a><a class="username hide_on_micro" style="color:#505050;float:right;opacity:0.85;" title="Level">👑</a>{{end}}
+		
+		<span class="controls">
+		
+		<a href="/user/{{.Topic.CreatedBy}}" class="username real_username">{{.Topic.CreatedByName}}</a>&nbsp;&nbsp;
+		
+		{{if .CurrentUser.Perms.LikeItem}}<a href="/topic/like/submit/{{.Topic.ID}}" class="mod_button" title="Love it" style="color:#202020;">
+		<button class="username like_label" style="{{if .Topic.Liked}}background-color:/*#eaffea*/#D6FFD6;{{end}}"></button></a>{{end}}
+		
+		{{if .CurrentUser.Perms.EditTopic}}<a href='/topic/edit/{{.Topic.ID}}' class="mod_button open_edit" style="font-weight:normal;" title="Edit Topic"><button class="username edit_label"></button></a>{{end}}
+		
+		{{if .CurrentUser.Perms.DeleteTopic}}<a href='/topic/delete/submit/{{.Topic.ID}}' class="mod_button" style="font-weight:normal;" title="Delete Topic"><button class="username trash_label"></button></a>{{end}}
+		
+		{{if .CurrentUser.Perms.PinTopic}}{{if .Topic.Sticky}}<a class="mod_button" href='/topic/unstick/submit/{{.Topic.ID}}' style="font-weight:normal;" title="Unpin Topic"><button class="username unpin_label"></button></a>{{else}}<a href='/topic/stick/submit/{{.Topic.ID}}' class="mod_button" style="font-weight:normal;" title="Pin Topic"><button class="username pin_label"></button></a>{{end}}{{end}}
+		
+		<a class="mod_button" href="/report/submit/{{.Topic.ID}}?session={{.CurrentUser.Session}}&type=topic" class="mod_button report_item" style="font-weight:normal;" title="Flag Topic"><button class="username flag_label"></button></a>
+		
+		{{if .Topic.LikeCount}}<a class="username hide_on_micro like_count">{{.Topic.LikeCount}}</a><a class="username hide_on_micro like_count_label" title="Like Count"></a>{{end}}
+		
+		{{if .Topic.Tag}}<a class="username hide_on_micro" style="float:right;color:#505050;font-size:16px;">{{.Topic.Tag}}</a>{{else}}<a class="username hide_on_micro level">{{.Topic.Level}}</a><a class="username hide_on_micro level_label" style="color:#505050;float:right;opacity:0.85;" title="Level"></a>{{end}}
+		
+		</span>
 	</div>
 </div>
 <div class="rowblock post_container" style="overflow: hidden;">{{range .ItemList}}{{if .ActionType}}
@@ -40,13 +58,24 @@
 {{else}}
 	<div class="rowitem passive deletable_block editable_parent post_item" style="{{if .Avatar}}background-image:url({{.Avatar}}), url(/static/white-dot.jpg);background-position: 0px {{if le .ContentLines 5}}-1{{end}}0px;background-repeat:no-repeat, repeat-y;background-size:128px;padding-left:136px;{{.Css}}{{end}}">
 		<p class="editable_block user_content" style="margin:0;padding:0;">{{.ContentHtml}}</p>
-		<a href="/user/{{.CreatedBy}}" class="username real_username">{{.CreatedByName}}</a>&nbsp;
-		{{if $.CurrentUser.Perms.LikeItem}}<a href="/reply/like/submit/{{.ID}}" class="mod_button" title="Love it" style="color:#202020;"><button class="username" style="{{if .Liked}}background-color:/*#eaffea*/#D6FFD6;{{end}}">😀</button></a>&nbsp;{{end}}
-		{{if $.CurrentUser.Perms.EditReply}}<a href="/reply/edit/submit/{{.ID}}" class="mod_button" title="Edit Reply"><button class="username edit_item">🖊️</button></a>&nbsp;{{end}}
-		{{if $.CurrentUser.Perms.DeleteReply}}<a href="/reply/delete/submit/{{.ID}}" class="mod_button" title="Delete Reply"><button class="username delete_item">🗑️</button></a>&nbsp;{{end}}
-		<a href="/report/submit/{{.ID}}?session={{$.CurrentUser.Session}}&type=reply" class="mod_button" title="Flag Reply"><button class="username report_item">🚩</button></a>&nbsp;
-		{{if .LikeCount}}<a class="username hide_on_micro" style="float: right;color:#505050;border-left:none;padding-left:5px;padding-right:5px;font-size:17px;">{{.LikeCount}}</a><a class="username hide_on_micro" style="color:#505050;float:right;opacity:0.85;margin-left:5px;" title="Like Count">😀</a>{{end}}
-		{{if .Tag}}<a class="username hide_on_micro" style="float: right;color:#505050;font-size:16px;">{{.Tag}}</a>{{else}}<a class="username hide_on_micro level">{{.Level}}</a><a class="username hide_on_micro" style="color:#505050;float:right;opacity:0.85;" title="Level">👑{{end}}</a>
+		
+		<span class="controls">
+		
+		<a href="/user/{{.CreatedBy}}" class="username real_username">{{.CreatedByName}}</a>&nbsp;&nbsp;
+		
+		{{if $.CurrentUser.Perms.LikeItem}}<a href="/reply/like/submit/{{.ID}}" class="mod_button" title="Love it" style="color:#202020;"><button class="username like_label" style="{{if .Liked}}background-color:/*#eaffea*/#D6FFD6;{{end}}"></button></a>{{end}}
+		
+		{{if $.CurrentUser.Perms.EditReply}}<a href="/reply/edit/submit/{{.ID}}" class="mod_button" title="Edit Reply"><button class="username edit_item edit_label"></button></a>{{end}}
+		
+		{{if $.CurrentUser.Perms.DeleteReply}}<a href="/reply/delete/submit/{{.ID}}" class="mod_button" title="Delete Reply"><button class="username delete_item trash_label"></button></a>{{end}}
+		
+		<a class="mod_button" href="/report/submit/{{.ID}}?session={{$.CurrentUser.Session}}&type=reply" class="mod_button report_item" title="Flag Reply"><button class="username report_item flag_label"></button></a>
+		
+		{{if .LikeCount}}<a class="username hide_on_micro like_count">{{.LikeCount}}</a><a class="username hide_on_micro like_count_label" title="Like Count"></a>{{end}}
+		
+		{{if .Tag}}<a class="username hide_on_micro" style="float: right;color:#505050;font-size:16px;">{{.Tag}}</a>{{else}}<a class="username hide_on_micro level">{{.Level}}</a><a class="username hide_on_micro level_label" style="color:#505050;float:right;opacity:0.85;" title="Level">{{end}}</a>
+		
+		</span>
 	</div>
 {{end}}{{end}}</div>
 

themes.go

@@ -1,16 +1,18 @@
-/* Copyright Azareal 2016 - 2017 */
+/* Copyright Azareal 2016 - 2018 */
 package main
 
-//import "fmt"
-import "log"
-import "io"
-import "os"
-import "strings"
-import "mime"
-import "io/ioutil"
-import "path/filepath"
-import "encoding/json"
-import "net/http"
+import (
+	//"fmt"
+	"log"
+	"io"
+	"os"
+	"strings"
+	"mime"
+	"io/ioutil"
+	"path/filepath"
+	"encoding/json"
+	"net/http"
+)
 
 var defaultTheme string
 var themes map[string]Theme = make(map[string]Theme)
@@ -29,6 +31,7 @@ type Theme struct
 	HideFromThemes bool
 	ForkOf string
 	Tag string
+	URL string
 	Settings map[string]ThemeSetting
 	Templates []TemplateMapping
 

themes/cosmo-classic/theme.json

@@ -6,6 +6,7 @@
 	"Disabled": true,
 	"HideFromThemes": true,
 	"Tag": "🏗️",
+	"URL": "github.com/Azareal/Gosora",
 	"Templates": [
 		{
 			"Name": "topic",

themes/cosmo-conflux/public/main.css

@@ -7,22 +7,19 @@
 	-webkit-box-sizing: border-box;
 }
 
-h1
-{
+h1 {
 	text-shadow: 0 1px 0 black;
 	color: darkgray;
 	height: 60px;
 }
 
-a
-{
+a {
 	text-decoration: none;
 	color: black;
 }
 a img { border: 0; /* IE fix..*/ }
 
-body
-{
+body {
 	background: url('/static/atombb-small.png') no-repeat left, url('/static/stars-mk1.png');
 	color: black;
 	background-color: #141414;
@@ -31,15 +28,13 @@ body
 	font-family: Arial;
 }
 
-ul
-{
+ul {
 	background: darkgray;
 	padding-top: 0px;
 	padding-bottom: 0px;
 	list-style-type: none;
 }
-li
-{
+li {
 	display: block;
 	float: left;
 	text-align: center;
@@ -58,27 +53,23 @@ li
 }
 li:first-child { border-left: 1px solid #7a7a7a; }
 
-li a
-{
+li a {
 	color: white;
 	text-decoration: none;
 }
 
-li:hover a, li a:hover, li a:link, li a:visited
-{
+li:hover a, li a:hover, li a:link, li a:visited {
 	color: white;
 	text-decoration: none;
 }
 
-li:hover
- {
+li:hover {
 	background: rgba(10,10,10,0.5);
 	font-weight: normal;
 	color: white;
 }
 
-.menu_right
-{
+.menu_right {
 	float: right;
 	color: white;
 	font-size: 25px;
@@ -144,7 +135,6 @@ li:hover
 	text-overflow: ellipsis;
 }
 .alertItem.withAvatar {
-	/*background-image: url('/uploads/avatar_1.jpg');*/
 	background-size: 36px;
 	background-repeat: no-repeat;
 	text-align: center;
@@ -166,8 +156,7 @@ li:hover
 	font-size: 9px;
 }
 
-#footer
-{
+#footer {
 	clear: left;
 	margin: 0px auto;
 	width: 300px;
@@ -176,14 +165,12 @@ li:hover
 
 hr { color: silver; border: 1px solid silver; }
 
-.rowhead
-{
+.rowhead {
 	border-top: none;
 	font-weight: bold;
 	color: white;
 }
-.rowhead:hover
-{
+.rowhead:hover {
 	color: rgba(200,200,200,1);
 	transition: color 1s;
 	-moz-transition: color 1s;
@@ -240,44 +227,37 @@ hr { color: silver; border: 1px solid silver; }
 .rowhead .topic_status_e { display: none !important; }
 .topic_button { float: right; position: relative; top: -22px; margin-right: 2px; border-style: solid !important; }
 
-.colblock_left
-{
+.colblock_left {
 	padding: 0px;
 	padding-top: 0px;
 	width: 30%;
 	float: left;
 	margin-right: 8px;
 }
-.colblock_right
-{
+.colblock_right {
 	padding: 0px;
 	padding-top: 0px;
 	width: 65%;
 	overflow: hidden;
 	word-wrap: break-word;
 }
-.colblock_left:empty { display: none; }
-.colblock_right:empty { display: none; }
-.colblock_left:first-of-type { margin-top: 8px; }
-.colblock_right:first-of-type { margin-top: 8px; }
+.colblock_left:empty, .colblock_right:empty { display: none; }
+.colblock_left:first-of-type, .colblock_right:first-of-type { margin-top: 8px; }
 
 /* The new method of doing columns layouts, colblock is now deprecated :( */
-.colstack_left
-{
+.colstack_left {
 	float: left;
 	width: 30%;
 	margin-right: 8px;
 	margin-top: 12px;
 }
-.colstack_right
-{
+.colstack_right {
 	float: left;
 	width: 65%;
 	width: calc(70% - 15px);
 	margin-top: 12px;
 }
-.colstack_item
-{
+.colstack_item {
 	padding: 0px;
 	padding-top: 0px;
 	margin-bottom: 16px;
@@ -311,92 +291,61 @@ hr { color: silver; border: 1px solid silver; }
 	padding-bottom: 12px;
 	font-size: 16px;
 }
-.grid_istat {
-	/*margin-bottom: 10px;*/
-	margin-bottom: 5px;
-}
+.grid_istat { margin-bottom: 5px; }
 
 .stat_green { background-color: lightgreen; border-color: green; }
 .stat_orange { background-color: #ffe4b3; border-color: orange; }
 .stat_red { background-color: #ffb2b2; border-color: red; }
 .stat_disabled { background-color: lightgray; border-color: gray; }
 
-.colitem
-{
-	padding-left: 8px;
-	padding-right: 8px;
-	padding-top: 17px;
-	padding-bottom: 12px;
-	font-weight: bold;
-	text-transform: uppercase;
-}
-.colitem.passive
-{
-	font-weight: normal;
-	text-transform: none;
-}
-.colitem a
-{
-	text-decoration: none;
-	color: black;
-}
-.colitem a:hover { color: silver; }
-.col_left
-{
-	width: 30%;
-	float: left;
-}
-.col_right
-{
-	width: 69%;
-	overflow: hidden;
-}
-
-.formrow
-{
-	/*height: 40px;*/
-	width: 100%;
-}
+.formrow { width: 100%; }
 /* Clearfix */
-.formrow:before,
-.formrow:after {
+.formrow:before, .formrow:after {
 	content: " ";
 	display: table;
 }
 .formrow:after { clear: both; }
 .formrow:not(:last-child) { border-bottom: 1px dotted #ccc; }
 
-.formitem
-{
+.formitem {
 	float: left;
-	padding-left: 8px;
-	padding-right: 8px;
-	padding-top: 13px;
-	padding-bottom: 8px;
-	font-weight: bold;
+	padding: 10px;
+	min-width: 20%;
+	/*font-size: 17px;*/
+	font-weight: normal;
 }
-.formitem:first-child { font-weight: bold; }
 .formitem:not(:last-child) { border-right: 1px dotted #ccc; }
 .formitem.invisible_border { border: none; }
 
 /* Mostly for textareas */
 .formitem:only-child { width: 100%; }
-.formitem textarea
-{
+.formitem textarea {
 	width: 100%;
 	height: 100px;
 	outline-color: #8e8e8e;
 }
+.formitem:not(:only-child) input, .formitem:not(:only-child) select { padding: 3px;/*5px;*/ }
+.formitem:not(:only-child).formlabel {
+	padding-top: 15px;/*18px;*/
+	padding-bottom: 12px;/*16px;*/
+	/*padding-left: 15px;*/
+}
+.formbutton {
+	padding: 7px;
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+	font-size: 14px;
+	border-color: #ccc;
+}
 
-.tbody
-{
+.tbody {
 	border-top: 1px solid silver;
 	margin: 8px;
 	padding: 8px;
 }
 
-.error
-{
+.error {
 	padding: 5px;
 	margin: 5px;
 	width: 90%;
@@ -406,8 +355,7 @@ hr { color: silver; border: 1px solid silver; }
 	border-radius: 5px;
 }
 
-.success
-{
+.success {
 	padding: 5px;
 	padding-left: 24px;
 	margin: 5px;
@@ -421,8 +369,7 @@ hr { color: silver; border: 1px solid silver; }
 	border-radius: 5px;
 }
 
-.notice
-{
+.notice {
 	padding: 5px;
 	padding-left: 24px;
 	margin: 5px;
@@ -436,8 +383,7 @@ hr { color: silver; border: 1px solid silver; }
 	box-sizing: border-box;
 }
 
-/*button
-{
+/*button {
 	background: #ce2424;
 	background: linear-gradient(#f97779, #ce2424);
 	border: 1px solid #be2424;
@@ -451,8 +397,7 @@ hr { color: silver; border: 1px solid silver; }
 }
 button .big { padding: 6px; }*/
 
-.formbutton
-{
+.formbutton {
 	background: white;
 	border: 1px solid #8e8e8e;
 	color: #505050;
@@ -462,8 +407,7 @@ button .big { padding: 6px; }*/
 	border-radius: 0px;
 }
 
-.username
-{
+.username {
 	text-transform: none;
 	text-shadow: none;
 	margin-left: 0px;
@@ -488,22 +432,17 @@ button .big { padding: 6px; }*/
 	background: rgb(250,250,250);
 }
 
-.mention {
-	font-weight: bold;
-}
-
+.mention { font-weight: bold; }
 .threadHidden { background: orange; }
 .threadDeleted { background: rgba(255,0,0,0.5); }
 
-.pagination
-{
+.pagination {
     margin-top: 8px;
     margin-left: 5px;
 }
 .pagination a { color: #717171; }
 
-.page
-{
+.page {
     display: inline-block;
     margin-right: 5px;
     text-decoration: none;
@@ -516,8 +455,7 @@ button .big { padding: 6px; }*/
     border-radius: 5px;
 }
 
-blockquote
-{
+blockquote {
 	border: solid 1px darkgray;
 	background-color: #f8fafd;
 	color: #758fa3;
@@ -527,8 +465,7 @@ blockquote
 	margin: 5px;
 }
 
-blockquote .head
-{
+blockquote .head {
 	display: block;
 	font-weight: bold;
 	font-size: 13px;
@@ -539,23 +476,20 @@ blockquote .head
 	border-bottom: solid 1px #dde5ed;
 }
 
-blockquote p
-{
+blockquote p {
 	line-height: 20px;
 	margin-bottom: 10px;
 	padding-left: 15px;
 }
 
 .rep-upvote { font-size: 13.5px !important; }
-.rep-upvote span
-{
+.rep-upvote span {
 	position: relative;
 	top: -4px;
 	letter-spacing: 0.02em;
 }
 
-.action
-{
+.action {
 	background-color: #A0CFEC;
 	font-style: italic;
 	padding: 15px;
@@ -564,8 +498,7 @@ blockquote p
 }
 
 .post-content { word-wrap: break-word; }
-.sidebar 
-{
+.sidebar {
 	position: -moz-sticky;
 	position: -ms-sticky;
 	position: -o-sticky;
@@ -576,8 +509,7 @@ blockquote p
 .gadget { padding-bottom: 20px; }
 
 /* Topic */
-.post_avatar
-{
+.post_avatar {
 	border-radius: 5px;
 	margin-left: auto;
 	margin-right: auto;
@@ -612,22 +544,6 @@ blockquote p
 	height: 20px;
 }
 
-.tag-mini
-{
-	text-transform: none;
-	margin-left: 0px;
-	padding-left: 3px;
-	padding-right: 3px;
-	padding-top: 1.5px;
-	padding-bottom: 0px;
-	color: #505050; /* 80,80,80 */
-	background-color: #FFFFFF;
-	border-style: dotted;
-	border-color: #505050; /* 232,232,232. All three RGB colours being the same seems to create a shade of gray */
-	border-width: 1px;
-	font-size: 10px;
-}
-
 .action_button {
 	display: block;
 	float: left;
@@ -643,6 +559,24 @@ blockquote p
 	float: right;
 	border-left: solid 1px #eaeaea;
 }
+
+.like_label:before {
+	content: "😀";
+}
+.edit_label:before {
+	content: "🖊️";
+}
+.trash_label:before {
+	content: "🗑️";
+}
+.flag_label:before {
+	content: "🚩";
+}
+
+.mod_button {
+	margin-right: 4px;
+}
+
 .post_item:not(.simple) {
 	background-color: #eaeaea;
 }
@@ -733,13 +667,101 @@ blockquote p
 }
 .prev_button { left: 14px; }
 .next_button { right: 14px; }
+.head_tag_upshift { display: none; }
+
+/* Control Panel */
+.tag-mini {
+	margin-left: 0px;
+	padding-left: 0px;
+	padding-right: 0px;
+	padding-top: 2px;
+	padding-bottom: 2px;
+
+	color: black;
+	font-size: 12px;
+}
+
+.panel_tag {
+	padding-left: 0px;
+	padding-right: 0px;
+	border: none;
+	background: none;
+	color: #202020;
+	font-size: 14px;
+}
+
+.panel_floater {
+	float: right;
+}
+#panel_groups > .rowitem > .panel_floater {
+	float: none;
+}
+#panel_groups > .rowitem > .panel_floater > .panel_right_button {
+	float: right;
+}
+#panel_forums > .rowitem > .panel_floater {
+	float: none;
+}
+#panel_forums > .rowitem > .panel_floater > .panel_buttons {
+	float: right;
+}
+
+.panel_rank_tag, .forum_preset, .forum_active {
+	float: none;
+	color: #202020 !important;
+	font-size: 11px;
+}
+.panel_rank_tag_admin:before {
+	content: "Admins";
+}
+.panel_rank_tag_mod:before {
+	content: "Mods";
+}
+.panel_rank_tag_banned:before {
+	content: "Banned";
+}
+.panel_rank_tag_guest:before {
+	content: "Guests";
+}
+.panel_rank_tag_member:before {
+	content: "Members";
+}
+
+.forum_preset_announce:after {
+	content: "Announcements";
+}
+.forum_preset_members:after {
+	content: "Member Only";
+}
+.forum_preset_staff:after {
+	content: "Staff Only";
+}
+.forum_preset_admins:after {
+	content: "Admin Only";
+}
+.forum_preset_archive:after {
+	content: "Archive";
+}
+.forum_preset_all:after {
+	content: "Public";
+}
+.forum_preset_custom, .forum_preset_ {
+	display: none !important;
+}
+.forum_active_Hide:before {
+	content: "Hidden";
+}
+.forum_active_Hide + .forum_preset:before {
+	content: " | ";
+}
+.forum_active_Show {
+	display: none !important;
+}
 
 /* Responsive Layout */
 /* Anything that isn't a small mobile */
-@media(min-width: 501px)
-{	
-	.options
-	{
+@media(min-width: 501px) {
+	.options {
 		float: right;
 		position: relative;
 		top: -50px;
@@ -759,8 +781,7 @@ blockquote p
 	.options:last-child { border-left: 1px solid rgba(100,100,110,0.75); }
 	.right_most { margin-right: 10%; border-right: 1px solid rgba(100,100,110,0.75); }
 
-	/*.options > .counter
-	{
+	/*.options > .counter {
 		background: red;
 		border-radius: 5px;
 		color: #FFFFFF;
@@ -776,11 +797,9 @@ blockquote p
 	}*/
 }
 
-@media (max-width: 800px)
-{
+@media (max-width: 800px) {
 	body { background: #505050; margin-bottom: 10px;}
-	#main
-	{
+	#main {
 		width: 100%;
 		min-width: 300px;
 		margin-top: 0px;
@@ -789,8 +808,7 @@ blockquote p
 		box-sizing: border-box;
 	}
 
-	ul
-	{
+	ul {
 		margin-top: 0px;
 		margin-bottom: 0px;
 		margin-left: 0px;
@@ -807,15 +825,13 @@ blockquote p
 		background-image: -ms-linear-gradient(bottom, #2e2e2e, #4c4c4c);
 		background-image: -webkit-linear-gradient(bottom, #2e2e2e, #4c4c4c);
 	}
-	li
-	{
+	li {
 		font-size: 14px;
 		padding-left: 12px;
 		padding-right: 12px;
 		height: 30px;
 	}
-	li:hover
-	{
+	li:hover {
 		background-image: linear-gradient(bottom, #4c4c4c, #2e2e2e);
 		background-image: -moz-linear-gradient(bottom, #4c4c4c, #2e2e2e);
 		background-image: -o-linear-gradient(bottom, #4c4c4c, #2e2e2e);
@@ -829,16 +845,12 @@ blockquote p
 	.tbody { border-left: none; border-right: none; }
 }
 
-@media(max-width: 620px)
-{
-	.menu_create_topic { display: none;}
-	.menu_overview { display: none; }
-	.hide_on_mobile { display: none; }
+@media(max-width: 620px) {
+	.menu_create_topic, .menu_overview, .hide_on_mobile { display: none; }
 }
 
 /* This one is specifically for small mobiles.. */
-@media(max-width: 500px)
-{
+@media(max-width: 500px) {
 	#main { margin-top: 20px; }
 	.rowblock { box-sizing: border-box; }
 	.rowblock:first-of-type { margin-top: 2px; }
@@ -847,8 +859,7 @@ blockquote p
 	.topic_name { text-align: left; margin-left: 8px; width: 50%; text-overflow: ellipsis; overflow: hidden; }
 	.menu_profile { display: none; }
 	.options { display: none !important; }
-	ul
-	{
+	ul {
 		line-height: 30px;
 		min-height: 30px;
 		padding-left: 4px;
@@ -862,27 +873,23 @@ blockquote p
 		clear: left;
 		width: 100%;
 	}
-	li
-	{
+	li {
 		font-size: 15px;
 		padding-left: 6px;
 		padding-right: 6px;
 		height: 28px;
 	}
 
-	#back
-	{
+	#back {
 		position: relative;
 		top: -25px;
 	}
-	#main
-	{
+	#main {
 		padding-left: 4px;
 		padding-right: 6px;
 	}
 
-	.notice
-	{
+	.notice {
 		width: 100%;
 		margin-left: 0px;
 		margin-right: 0px;
@@ -897,8 +904,7 @@ blockquote p
 
 	.post-content { word-wrap: normal; }
 	.post-meta { white-space: normal; }
-	.post_avatar
-	{
+	.post_avatar {
 		max-height: 80px;
 		max-width: 80px;
 	}
@@ -923,27 +929,22 @@ blockquote p
 	.colstack_grid { grid-template-columns: none; grid-gap: 8px; }
 	.grid_istat { margin-bottom: 0px; }
 }
-@media (min-width: 800px)
-{
-	@-webkit-keyframes slidein
-	{
+@media (min-width: 800px) {
+	@-webkit-keyframes slidein {
 		from { transform: translate(0,-50px) scale(0.75); }
 		to {}
 	}
-	@-moz-keyframes slidein
-	{
+	@-moz-keyframes slidein {
 		from { transform: translate(0,-50px) scale(0.75); }
 		to {}
 	}
-	@keyframes slidein
-	{
+	@keyframes slidein {
 		from { transform: translate(0,-50px) scale(0.75); }
 		to {}
 	}
 	.right_most { margin-right: 15%; }
 
-	#back
-	{
+	#back {
 		width: 800px;
 		margin-top: 15px;
 		margin-left: auto;
@@ -965,8 +966,7 @@ blockquote p
 		transition-timing-function: linear;
 	}
 
-	#main
-	{
+	#main {
 		float: left;
 		clear: left;
 		width: 765px;
@@ -977,8 +977,7 @@ blockquote p
 		margin-bottom: 15px;
 	}
 
-	.nav
-	{
+	.nav {
 		position: sticky;
 		top: 0px;
 		width: 800px;
@@ -988,8 +987,7 @@ blockquote p
 		z-index: 20;
 	}
 
-	ul
-	{
+	ul {
 		line-height: 40px;
 		min-height: 40px;
 		padding-left: 20px;
@@ -1002,24 +1000,20 @@ blockquote p
 		border: 1px solid rgba(90,90,90,0.75);
 		transition: transform 0.7s;
 	}
-	ul:hover
-	{
+	ul:hover {
 		transform: rotateX(-15deg);
 	}
 
-	li
-	{
+	li {
 		font-size: 15px;
 		padding-left: 15px;
 		padding-right: 15px;
 		height: 38px;
 	}
 }
-@media (max-width: 1023px) { .left_sidebar { display: none; } .right_sidebar { display: none; } }
-@media (min-width: 1024px)
-{
-	#back
-	{
+@media (max-width: 1023px) { .right_sidebar { display: none; } }
+@media (min-width: 1024px) {
+	#back {
 		width: 1000px;
 		margin-top: 15px;
 		margin-left: auto;
@@ -1036,8 +1030,7 @@ blockquote p
 		border: 1px solid rgba(100,100,110,0.75);
 		box-shadow: -1px -1px 1px rgba(0, 0, 0, 1), 1px 1px 1px rgba(0,0,0,0.5);
 	}
-	#main
-	{
+	#main {
 		float: left;
 		clear: left;
 		width: 700px;
@@ -1047,8 +1040,8 @@ blockquote p
 		margin-right: 12px;
 		margin-bottom: 15px;
 	}
+	#main:not(.shrink_main) { width: calc(100% - 30px); }
 
-	.left_sidebar { display: none; } /* This theme only supports right sidebars, at the moment.. */
 	.right_sidebar {
 		float: left;
 		width: 250px;
@@ -1061,30 +1054,27 @@ blockquote p
 	.nav { width: 1000px; }
 }
 
-@media (min-width: 1603px)
-{
-	#back
-	{
+@media (min-width: 1603px) {
+	#back {
 		width: 1548px;
 		margin-left: auto;
 		margin-right: auto;
 	}
 
 	#main { width: 1250px; }
+	#main:not(.shrink_main) { width: calc(100% - 30px); }
 }
 
-@media (min-width: 2400px)
-{
-	#back
-	{
+@media (min-width: 2400px) {
+	#back {
 		width: 2000px;
 		margin-left: auto;
 		margin-right: auto;
 	}
 
 	#main { width: 1690px; }
-	.index_category
-	{
+	#main:not(.shrink_main) { width: calc(100% - 30px); }
+	.index_category {
 		float: left;
 		width: 835px;
 	}
@@ -1093,10 +1083,10 @@ blockquote p
 	.index_category:only-child { width: 100%; }
 }
 
-@media (min-width: 3000px)
-{
+@media (min-width: 3000px) {
 	#back { width: 2900px; }
 	#main { width: 2490px; }
+	#main:not(.shrink_main) { width: calc(100% - 30px); }
 	.index_category { width: 1230px; }
 	.index_category:only-child { width: 100%; }
 

themes/cosmo-conflux/theme.json

@@ -6,6 +6,8 @@
 	"FullImage": "cosmo-conflux.png",
 	"ForkOf": "cosmo",
 	"MobileFriendly": true,
+	"Tag": "🏗️",
+	"URL": "github.com/Azareal/Gosora",
 	"Templates": [
 		{
 			"Name": "topic",

themes/cosmo/public/main.css

@@ -7,22 +7,19 @@
 	-webkit-box-sizing: border-box;
 }
 
-h1
-{
+h1 {
 	text-shadow: 0 1px 0 black;
 	color: darkgray;
 	height: 60px;
 }
 
-a
-{
+a {
 	text-decoration: none;
 	color: black;
 }
 a img { border: 0; /* IE fix..*/ }
 
-body
-{
+body {
 	background: url('/static/atombb-small.png') no-repeat left, url('/static/stars-mk1.png');
 	color: black;
 	background-color: #141414;
@@ -31,16 +28,14 @@ body
 	font-family: Arial;
 }
 
-ul
-{
+ul {
 	background: darkgray;
 	padding-top: 0px;
 	padding-bottom: 0px;
 	list-style-type: none;
 }
 
-li
-{
+li {
 	display: block;
 	float: left;
 	text-align: center;
@@ -55,19 +50,16 @@ li
 	color: white;
 }
 li:first-child { border-left: 1px solid #7a7a7a; }
-li a
-{
+li a {
 	color: white;
 	text-decoration: none;
 }
-li:hover
- {
+li:hover {
 	background: rgba(10,10,10,0.5);
 	font-weight: normal;
 }
 
-.menu_right
-{
+.menu_right {
 	float: right;
 	color: white;
 	font-size: 25px;
@@ -133,7 +125,6 @@ li:hover
 	text-overflow: ellipsis;
 }
 .alertItem.withAvatar {
-	/*background-image: url('/uploads/avatar_1.jpg');*/
 	background-size: 36px;
 	background-repeat: no-repeat;
 	text-align: center;
@@ -155,24 +146,14 @@ li:hover
 	font-size: 9px;
 }
 
-#footer
-{
-	clear: left;
-	margin: 0px auto;
-	width: 300px;
-	text-align: center;
-}
-
 hr { color: silver; border: 1px solid silver; }
 
-.rowhead
-{
+.rowhead {
 	border-top: none;
 	font-weight: bold;
 	color: white;
 }
-.rowhead:hover
-{
+.rowhead:hover {
 	color: rgba(200,200,200,1);
 	transition: color 1s;
 	-moz-transition: color 1s;
@@ -228,45 +209,37 @@ hr { color: silver; border: 1px solid silver; }
 .rowhead .topic_status_e { display: none !important; }
 .topic_button { float: right; position: relative; top: -22px; margin-right: 2px; border-style: solid !important; }
 
-.colblock_left
-{
+.colblock_left {
 	padding: 0px;
 	padding-top: 0px;
 	width: 30%;
 	float: left;
 	margin-right: 8px;
 }
-.colblock_right
-{
+.colblock_right {
 	padding: 0px;
 	padding-top: 0px;
 	width: 65%;
 	overflow: hidden;
 	word-wrap: break-word;
 }
-.colblock_left:empty { display: none; }
-.colblock_right:empty
-{ display: none; }
-.colblock_left:first-of-type { margin-top: 8px; }
-.colblock_right:first-of-type { margin-top: 8px; }
+.colblock_left:empty, .colblock_right:empty { display: none; }
+.colblock_left:first-of-type, .colblock_right:first-of-type { margin-top: 8px; }
 
-/* The new method of doing columns layouts, colblock is now deprecated */
-.colstack_left
-{
+/* The new method of doing columns layouts, colblock is now deprecated :( */
+.colstack_left {
 	float: left;
 	width: 30%;
 	margin-right: 8px;
 	margin-top: 12px;
 }
-.colstack_right
-{
+.colstack_right {
 	float: left;
 	width: 65%;
 	width: calc(70% - 15px);
 	margin-top: 12px;
 }
-.colstack_item
-{
+.colstack_item {
 	padding: 0px;
 	padding-top: 0px;
 	margin-bottom: 16px;
@@ -300,107 +273,63 @@ hr { color: silver; border: 1px solid silver; }
 	padding-bottom: 12px;
 	font-size: 16px;
 }
-.grid_istat {
-	/*margin-bottom: 10px;*/
-	margin-bottom: 5px;
-}
+.grid_istat { margin-bottom: 5px; }
 
 .stat_green { background-color: lightgreen; border-color: green; }
 .stat_orange { background-color: #ffe4b3; border-color: orange; }
 .stat_red { background-color: #ffb2b2; border-color: red; }
 .stat_disabled { background-color: lightgray; border-color: gray; }
 
-.colitem
-{
-	padding-left: 8px;
-	padding-right: 8px;
-	padding-top: 17px;
-	padding-bottom: 12px;
-	font-weight: bold;
-	text-transform: uppercase;
-}
-.colitem.passive
-{
-	font-weight: normal;
-	text-transform: none;
-}
-.colitem a
-{
-	text-decoration: none;
-	color: black;
-}
-.colitem a:hover { color: silver; }
-
-.col_left
-{
-	width: 30%;
-	float: left;
-}
-.col_right
-{
-	width: 69%;
-	overflow: hidden;
-}
-
-.formrow
-{
-	/*height: 40px;*/
+.formrow {
 	width: 100%;
 }
 /* Clearfix */
-.formrow:before,
-.formrow:after {
+.formrow:before, .formrow:after {
   content: " ";
   display: table;
 }
-.formrow:after {
-  clear: both;
-}
-.formrow:not(:last-child)
-{
-	border-bottom: 1px dotted #ccc;
-}
+.formrow:after { clear: both; }
+.formrow:not(:last-child) { border-bottom: 1px dotted #ccc; }
 
-.formitem
-{
+.formitem {
 	float: left;
-	padding-left: 8px;
-	padding-right: 8px;
-	padding-top: 13px;
-	padding-bottom: 8px;
-	font-weight: bold;
-}
-.formitem:first-child
-{
-	font-weight: bold;
-}
-.formitem:not(:last-child)
-{
-	border-right: 1px dotted #ccc;
-}
-.formitem.invisible_border
-{
-	border: none;
+	padding: 10px;
+	min-width: 20%;
+	/*font-size: 17px;*/
+	font-weight: normal;
 }
+.formitem:not(:last-child) { border-right: 1px dotted #ccc; }
+.formitem.invisible_border { border: none; }
 
 /* Mostly for textareas */
 .formitem:only-child { width: 100%; }
-.formitem textarea
-{
+.formitem textarea {
 	width: 100%;
 	height: 100px;
 	outline-color: #8e8e8e;
 }
+.formitem:not(:only-child) input, .formitem:not(:only-child) select { padding: 3px;/*5px;*/ }
+.formitem:not(:only-child).formlabel {
+	padding-top: 15px;/*18px;*/
+	padding-bottom: 12px;/*16px;*/
+	/*padding-left: 15px;*/
+}
+.formbutton {
+	padding: 7px;
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+	font-size: 14px;
+	border-color: #ccc;
+}
 
-.tbody
-{
+.tbody {
 	border-top: 1px solid silver;
 	margin: 8px;
 	padding: 8px;
 }
 
-.error
-{
+.error {
 	padding: 5px;
 	margin: 5px;
 	width: 90%;
@@ -410,8 +339,7 @@ hr { color: silver; border: 1px solid silver; }
 	border-radius: 5px;
 }
 
-.success
-{
+.success {
 	padding: 5px;
 	padding-left: 24px;
 	margin: 5px;
@@ -425,8 +353,7 @@ hr { color: silver; border: 1px solid silver; }
 	border-radius: 5px;
 }
 
-.notice
-{
+.notice {
 	padding: 5px;
 	padding-left: 24px;
 	margin: 5px;
@@ -440,8 +367,7 @@ hr { color: silver; border: 1px solid silver; }
 	box-sizing: border-box;
 }
 
-/*button
-{
+/*button {
 	background: #ce2424;
 	background: linear-gradient(#f97779, #ce2424);
 	border: 1px solid #be2424;
@@ -455,8 +381,7 @@ hr { color: silver; border: 1px solid silver; }
 }
 button .big { padding: 6px; }*/
 
-.formbutton
-{
+.formbutton {
 	background: white;
 	border: 1px solid #8e8e8e;
 	color: #505050;
@@ -466,8 +391,7 @@ button .big { padding: 6px; }*/
 	border-radius: 0px;
 }
 
-.username
-{
+.username {
 	text-transform: none;
 	text-shadow: none;
 	margin-left: 0px;
@@ -493,22 +417,17 @@ button .big { padding: 6px; }*/
 	background: rgb(250,250,250);
 }
 
-.mention {
-	font-weight: bold;
-}
-
+.mention { font-weight: bold; }
 .threadHidden { background: orange; }
 .threadDeleted { background: rgba(255,0,0,0.5); }
 
-.pagination
-{
+.pagination {
     margin-top: 8px;
     margin-left: 5px;
 }
 .pagination a { color: #717171; }
 
-.page
-{
+.page {
     display: inline-block;
     margin-right: 5px;
     text-decoration: none;
@@ -521,8 +440,7 @@ button .big { padding: 6px; }*/
     border-radius: 5px;
 }
 
-blockquote
-{
+blockquote {
 	border: solid 1px darkgray;
 	background-color: #f8fafd;
 	color: #758fa3;
@@ -532,8 +450,7 @@ blockquote
 	margin: 5px;
 }
 
-blockquote .head
-{
+blockquote .head {
 	display: block;
 	font-weight: bold;
 	font-size: 13px;
@@ -544,23 +461,20 @@ blockquote .head
 	border-bottom: solid 1px #dde5ed;
 }
 
-blockquote p
-{
+blockquote p {
 	line-height: 20px;
 	margin-bottom: 10px;
 	padding-left: 15px;
 }
 
 .rep-upvote { font-size: 13.5px !important; }
-.rep-upvote span
-{
+.rep-upvote span {
 	position: relative;
 	top: -4px;
 	letter-spacing: 0.02em;
 }
 
-.action
-{
+.action {
 	background-color: #A0CFEC;
 	font-style: italic;
 	padding: 15px;
@@ -569,8 +483,7 @@ blockquote p
 }
 
 .post-content { word-wrap: break-word; }
-.sidebar 
-{
+.sidebar {
 	position: -moz-sticky;
 	position: -ms-sticky;
 	position: -o-sticky;
@@ -584,8 +497,7 @@ blockquote p
 .cell_last img { margin-right: 8px; }
 
 /* User Postbit */
-.tag_block
-{
+.tag_block {
 	background: url('/static/fabric-base-simple-alpha.png'), linear-gradient(#DF5B5A,#D93636);
 	background-color: red;
 	border-bottom-left-radius: 4px;
@@ -607,8 +519,7 @@ blockquote p
 }
 
 .tag_block:last-child { margin-bottom: 10px; }
-.tag_block .tag_pre, .tag_block .tag_post
-{
+.tag_block .tag_pre, .tag_block .tag_post {
 	background-color: #EA9090;
 	height: 4px;
 	position: absolute;
@@ -616,27 +527,23 @@ blockquote p
 	top: -4px;
 }
 
-.tag_block .tag_pre
-{
+.tag_block .tag_pre {
 	border-top-left-radius: 3px;
 	left: -1px;
 }
-.post_tag
-{
+.post_tag {
 	color: white;
 	font-size: 13px;
 	font-style: normal;
 	text-overflow: ellipsis;
 	font-weight: bold;
 }
-.tag_block .tag_post
-{
+.tag_block .tag_post {
 	border-top-right-radius: 3px;
 	right: -1px;
 }
 
-.tag_block.groupRibbon
-{
+.tag_block.groupRibbon {
 	display: none;
 }
 
@@ -681,6 +588,24 @@ blockquote p
 	float: right;
 	border-left: solid 1px #eaeaea;
 }
+
+.like_label:before {
+	content: "😀";
+}
+.edit_label:before {
+	content: "🖊️";
+}
+.trash_label:before {
+	content: "🗑️";
+}
+.flag_label:before {
+	content: "🚩";
+}
+
+.mod_button {
+	margin-right: 4px;
+}
+
 .post_item:not(.simple) {
 	background-color: #eaeaea;
 }
@@ -769,13 +694,101 @@ blockquote p
 }
 .prev_button { left: 14px; }
 .next_button { right: 14px; }
+.head_tag_upshift { display: none !important; }
+
+/* Control Panel */
+.tag-mini {
+	margin-left: 0px;
+	padding-left: 0px;
+	padding-right: 0px;
+	padding-top: 2px;
+	padding-bottom: 2px;
+
+	color: black;
+	font-size: 12px;
+}
+
+.panel_tag {
+	padding-left: 0px;
+	padding-right: 0px;
+	border: none;
+	background: none;
+	color: #202020;
+	font-size: 14px;
+}
+
+.panel_floater {
+	float: right;
+}
+#panel_groups > .rowitem > .panel_floater {
+	float: none;
+}
+#panel_groups > .rowitem > .panel_floater > .panel_right_button {
+	float: right;
+}
+#panel_forums > .rowitem > .panel_floater {
+	float: none;
+}
+#panel_forums > .rowitem > .panel_floater > .panel_buttons {
+	float: right;
+}
+
+.panel_rank_tag, .forum_preset, .forum_active {
+	float: none;
+	color: #202020 !important;
+	font-size: 11px;
+}
+.panel_rank_tag_admin:before {
+	content: "Admins";
+}
+.panel_rank_tag_mod:before {
+	content: "Mods";
+}
+.panel_rank_tag_banned:before {
+	content: "Banned";
+}
+.panel_rank_tag_guest:before {
+	content: "Guests";
+}
+.panel_rank_tag_member:before {
+	content: "Members";
+}
+
+.forum_preset_announce:after {
+	content: "Announcements";
+}
+.forum_preset_members:after {
+	content: "Member Only";
+}
+.forum_preset_staff:after {
+	content: "Staff Only";
+}
+.forum_preset_admins:after {
+	content: "Admin Only";
+}
+.forum_preset_archive:after {
+	content: "Archive";
+}
+.forum_preset_all:after {
+	content: "Public";
+}
+.forum_preset_custom, .forum_preset_ {
+	display: none !important;
+}
+.forum_active_Hide:before {
+	content: "Hidden";
+}
+.forum_active_Hide + .forum_preset:before {
+	content: " | ";
+}
+.forum_active_Show {
+	display: none !important;
+}
 
 /* Responsive Layout */
 /* Anything that isn't a small mobile */
-@media(min-width: 501px)
-{
-	.options
-	{
+@media(min-width: 501px) {
+	.options {
 		float: right;
 		position: relative;
 		top: -50px;
@@ -794,29 +807,11 @@ blockquote p
 
 	.options:last-child { border-left: 1px solid rgba(100,100,110,0.75); }
 	.right_most { margin-right: 10%; border-right: 1px solid rgba(100,100,110,0.75); }
-	
-	/*.options > .counter
-	{
-		background: red;
-		border-radius: 5px;
-		color: #FFFFFF;
-		display: inline-block;
-		font-weight: bold;
-		text-align: center;
-		line-height: 16px;
-		font-size: 10px;
-		width: 16px;
-		
-		position: absolute;
-		right: 0px;
-	}*/
 }
 
-@media (max-width: 800px)
-{
+@media (max-width: 800px) {
 	body { background: #505050; margin-bottom: 10px; }
-	#main
-	{
+	#main {
 		width: 100%;
 		min-width: 300px;
 		margin-top: 0px;
@@ -825,8 +820,7 @@ blockquote p
 		box-sizing: border-box;
 	}
 
-	ul
-	{
+	ul {
 		margin-top: 0px;
 		margin-bottom: 0px;
 		margin-left: 0px;
@@ -843,15 +837,13 @@ blockquote p
 		background-image: -ms-linear-gradient(bottom, #2e2e2e, #4c4c4c);
 		background-image: -webkit-linear-gradient(bottom, #2e2e2e, #4c4c4c);
 	}
-	li
-	{
+	li {
 		font-size: 14px;
 		padding-left: 12px;
 		padding-right: 12px;
 		height: 30px;
 	}
-	li:hover
-	{
+	li:hover {
 		background-image: linear-gradient(bottom, #4c4c4c, #2e2e2e);
 		background-image: -moz-linear-gradient(bottom, #4c4c4c, #2e2e2e);
 		background-image: -o-linear-gradient(bottom, #4c4c4c, #2e2e2e);
@@ -869,16 +861,12 @@ blockquote p
 	.cell_last img { display: none; }
 }
 
-@media(max-width: 620px)
-{
-	.menu_create_topic { display: none;}
-	.menu_overview { display: none; }
-	.hide_on_mobile { display: none; }
+@media(max-width: 620px) {
+	.menu_create_topic, .menu_overview, .hide_on_mobile { display: none; }
 }
 
 /* This one is specifically for small mobiles.. */
-@media(max-width: 500px)
-{
+@media(max-width: 500px) {
 	#main { margin-top: 20px; }
 	.rowblock { box-sizing: border-box; }
 	.rowblock:first-of-type { margin-top: 2px; }
@@ -887,8 +875,7 @@ blockquote p
 	.topic_name { text-align: left; margin-left: 8px; width: 50%; text-overflow: ellipsis; overflow: hidden; }
 	.menu_profile { display: none; }
 	.options { display: none !important; }
-	ul
-	{
+	ul {
 		line-height: 30px;
 		min-height: 30px;
 		padding-left: 4px;
@@ -902,26 +889,22 @@ blockquote p
 		clear: left;
 		width: 100%;
 	}
-	li
-	{
+	li {
 		font-size: 15px;
 		padding-left: 6px;
 		padding-right: 6px;
 		height: 28px;
 	}
 
-	#back
-	{
+	#back {
 		position: relative;
 		top: -25px;
 	}
-	#main
-	{
+	#main {
 		padding-left: 4px;
 		padding-right: 6px;
 	}
-	.notice
-	{
+	.notice {
 		width: 100%;
 		margin-left: 0px;
 		margin-right: 0px;
@@ -936,8 +919,7 @@ blockquote p
 
 	.post-content { word-wrap: normal; }
 	.post-meta { white-space: normal; }
-	.post_avatar
-	{
+	.post_avatar {
 		max-height: 80px;
 		max-width: 80px;
 	}
@@ -964,27 +946,22 @@ blockquote p
 	.colstack_grid { grid-template-columns: none; grid-gap: 8px; }
 	.grid_istat { margin-bottom: 0px; }
 }
-@media (min-width: 800px)
-{
-	@-webkit-keyframes slidein
-	{
+@media (min-width: 800px) {
+	@-webkit-keyframes slidein {
 		from { transform: translate(0,-50px) scale(0.75); }
 		to {}
 	}
-	@-moz-keyframes slidein
-	{
+	@-moz-keyframes slidein {
 		from { transform: translate(0,-50px) scale(0.75); }
 		to {}
 	}
-	@keyframes slidein
-	{
+	@keyframes slidein {
 		from { transform: translate(0,-50px) scale(0.75); }
 		to {}
 	}
 	.right_most { margin-right: 15%; }
 
-	#back
-	{
+	#back {
 		width: 800px;
 		margin-top: 15px;
 		margin-left: auto;
@@ -1006,8 +983,7 @@ blockquote p
 		transition-timing-function: linear;
 	}
 
-	#main
-	{
+	#main {
 		float: left;
 		clear: left;
 		width: 765px;
@@ -1018,8 +994,7 @@ blockquote p
 		margin-bottom: 15px;
 	}
 
-	.nav
-	{
+	.nav {
 		position: sticky;
 		top: 0px;
 		width: 800px;
@@ -1029,8 +1004,7 @@ blockquote p
 		z-index: 20;
 	}
 
-	ul
-	{
+	ul {
 		line-height: 40px;
 		min-height: 40px;
 		padding-left: 20px;
@@ -1045,19 +1019,16 @@ blockquote p
 	}
 	ul:hover { transform: rotateX(-15deg); }
 
-	li
-	{
+	li {
 		font-size: 15px;
 		padding-left: 15px;
 		padding-right: 15px;
 		height: 38px;
 	}
 }
-@media (max-width: 1023px) { .left_sidebar { display: none; } .right_sidebar { display: none; } }
-@media (min-width: 1024px)
-{
-	#back
-	{
+@media (max-width: 1023px) { .right_sidebar { display: none; } }
+@media (min-width: 1024px) {
+	#back {
 		width: 1000px;
 		margin-top: 15px;
 		margin-left: auto;
@@ -1075,8 +1046,7 @@ blockquote p
 		box-shadow: -1px -1px 1px rgba(0, 0, 0, 1), 1px 1px 1px rgba(0,0,0,0.5);
 	}
 
-	#main
-	{
+	#main {
 		float: left;
 		clear: left;
 		width: 700px;
@@ -1087,7 +1057,8 @@ blockquote p
 		margin-bottom: 15px;
 	}
 
-	.left_sidebar { display: none; } /* This theme only supports right sidebars, at the moment.. */
+	#main:not(.shrink_main) { width: calc(100% - 30px); }
+
 	.right_sidebar {
 		float: left;
 		width: 250px;
@@ -1100,28 +1071,26 @@ blockquote p
 	.nav { width: 1000px; }
 }
 
-@media (min-width: 1603px)
-{
-	#back
-	{
+@media (min-width: 1603px) {
+	#back {
 		width: 1548px;
 		margin-left: auto;
 		margin-right: auto;
 	}
 	#main { width: 1250px; }
+	#main:not(.shrink_main) { width: calc(100% - 30px); }
 	.forumLastposter .title { width: 280px; }
 }
 
-@media (min-width: 2400px)
-{
-	#back
-	{
+@media (min-width: 2400px) {
+	#back {
 		width: 2000px;
 		margin-left: auto;
 		margin-right: auto;
 	}
 
 	#main { width: 1690px; }
+	#main:not(.shrink_main) { width: calc(100% - 30px); }
 	.index_category { float: left; width: 835px; }
 	.index_category:nth-child(even) { margin-left: 10px; }
 	.index_category:nth-child(odd) { overflow: hidden; }
@@ -1130,10 +1099,10 @@ blockquote p
 	.forumLastposter .title { width: 200px; }
 }
 
-@media (min-width: 3000px)
-{
+@media (min-width: 3000px) {
 	#back { width: 2900px; }
 	#main { width: 2490px; }
+	#main:not(.shrink_main) { width: calc(100% - 30px); }
 	.index_category { width: 1230px; }
 	.index_category:only-child { width: 100%; }
 	.forumLastposter .title { width: 300px; }

themes/cosmo/theme.json

@@ -5,6 +5,8 @@
 	"Creator": "Azareal",
 	"FullImage": "cosmo.png",
 	"MobileFriendly": true,
+	"Tag": "🏗️",
+	"URL": "github.com/Azareal/Gosora",
 	"Templates": [
 		{
 			"Name": "topic",

themes/shadow/theme.json

@@ -4,5 +4,6 @@
 	"Version": "0.0.1",
 	"Creator": "Azareal",
 	"Disabled": true,
-	"HideFromThemes": true
+	"HideFromThemes": true,
+	"URL": "github.com/Azareal/Gosora"
 }

themes/tempra-conflux/public/main.css

@@ -4,8 +4,7 @@
 	-webkit-box-sizing: border-box;
 }
 
-body
-{
+body {
 	font-family: arial;
 	padding-bottom: 8px;
 	background-image: url('/static/test_bg2.svg');
@@ -17,10 +16,7 @@ body
 .user_content { font-family: Segoe UI Emoji, arial; }
 }
 
-/*.move_left{float: left;position: relative;left: 50%;}
-.move_right{float: left;position: relative;left: -50%;}*/
-ul
-{
+ul {
 	padding-left: 0px;
 	padding-right: 0px;
 	height: 36px;
@@ -29,29 +25,25 @@ ul
 	background-color: white;
 	margin-bottom: 12px;
 }
-li
-{
+li {
 	height: 35px;
 	padding-left: 10px;
 	padding-top: 8px;
 	padding-bottom: 8px;
 }
 li:hover { background: rgb(250,250,250); }
-li a
-{
+li a {
 	text-decoration: none;
 	/*color: #515151;*/
 	color: black;
 	font-size: 17px;
 }
-.menu_left
-{
+.menu_left {
 	float: left;
 	border-right: 1px solid #ccc;
 	padding-right: 10px;
 }
-.menu_right
-{
+.menu_right {
 	float: right;
 	border-left: 1px solid #ccc;
 	padding-right: 10px;
@@ -90,13 +82,8 @@ li a
 	color: black;
 	font-weight: bold;
 }
-.selectedAlert .alert_counter {
-	display: none;
-}
-.menu_alerts .alertList {
-	display: none;
-	text-transform: none;
-}
+.selectedAlert .alert_counter { display: none; }
+.menu_alerts .alertList { display: none; }
 .selectedAlert .alertList {
 	position: absolute;
 	top: 51px;
@@ -104,26 +91,27 @@ li a
 	background: white;
 	font-size: 10px;
 	line-height: 16px;
-	width: 156px;
+	width: 300px;
 	right: calc(5% + 7px);
 	border-top: 1px solid #ccc;
 	border-left: 1px solid #ccc;
 	border-right: 1px solid #ccc;
 	border-bottom: 1px solid #ccc;
+	margin-bottom: 10px;
 }
 .alertItem {
 	padding: 8px;
 	overflow: hidden;
 	text-overflow: ellipsis;
+	padding-top: 15px;
+	padding-bottom: 16px;
 }
 .alertItem.withAvatar {
-	/*background-image: url('/uploads/avatar_1.jpg');*/
-	background-size: 36px;
+	background-size: 60px;
 	background-repeat: no-repeat;
-	text-align: center;
 	padding-right: 12px;
-	padding-left: 42px;
-	height: 46px;
+	padding-left: 68px;
+	height: 50px;
 }
 .alertItem.withAvatar:not(:last-child) {
 	border-bottom: 1px solid rgb(230,230,230);
@@ -131,26 +119,25 @@ li a
 .alertItem .text {
 	overflow: hidden;
 	text-overflow: ellipsis;
-	height: 30px;
+	height: 40px;
 	width: 100%;
 	color: black;
-	font-size: 10px;
-	font-weight: bold;
+	font-size: 13px;
+	white-space: nowrap;
+	font-weight: normal;
 }
-.alertItem .text.smaller {
-	font-size: 9px;
+.alertItem:not(.withAvatar) {
+	margin-left: 5px;
 }
 
-.container
-{
+.container {
 	width: 90%;
 	padding: 0px;
 	margin-left: auto;
 	margin-right: auto;
 }
 
-.rowblock
-{
+.rowblock {
 	border: 1px solid #ccc;
 	width: 100%;
 	padding: 0px;
@@ -158,8 +145,7 @@ li a
 }
 .rowblock:empty { display: none; }
 
-.colblock_left
-{
+.colblock_left {
 	border: 1px solid #ccc;
 	padding: 0px;
 	padding-top: 0px;
@@ -167,8 +153,7 @@ li a
 	float: left;
 	margin-right: 8px;
 }
-.colblock_right
-{
+.colblock_right {
 	border: 1px solid #ccc;
 	padding: 0px;
 	padding-top: 0px;
@@ -176,24 +161,20 @@ li a
 	overflow: hidden;
 	word-wrap: break-word;
 }
-.colblock_left:empty { display: none; }
-.colblock_right:empty { display: none; }
+.colblock_left:empty, .colblock_right:empty { display: none; }
 
 /* The new method of doing columns layouts, colblock is now deprecated :( */
-.colstack_left
-{
+.colstack_left {
 	float: left;
 	width: 30%;
 	margin-right: 8px;
 }
-.colstack_right
-{
+.colstack_right {
 	float: left;
 	width: 65%;
 	width: calc(70% - 15px);
 }
-.colstack_item
-{
+.colstack_item {
 	border: 1px solid #ccc;
 	padding: 0px;
 	padding-top: 0px;
@@ -211,6 +192,7 @@ li a
 	grid-template-columns: repeat(3, 1fr);
 	grid-gap: 12px;
 	margin-left: 5px;
+	margin-top: 2px;
 }
 .grid_item {
 	border: 1px solid #ccc;
@@ -225,76 +207,42 @@ li a
 	padding-bottom: 12px;
 	font-size: 16px;
 }
-.grid_istat {
-	margin-bottom: 5px;
-}
+.grid_istat { margin-bottom: 5px; }
 
 .stat_green { background-color: lightgreen; border-color: green; }
 .stat_orange { background-color: #ffe4b3; border-color: orange; }
 .stat_red { background-color: #ffb2b2; border-color: red; }
 .stat_disabled { background-color: lightgray; border-color: gray; }
 
-.rowitem
-{
+.rowitem {
 	width: 100%;
-	padding-left: 8px;
+	/*padding-left: 8px;
 	padding-right: 8px;
 	padding-top: 17px;
 	padding-bottom: 12px;
 	font-weight: bold;
-	text-transform: uppercase;
+	text-transform: uppercase;*/
+	padding-left: 10px;
+	padding-top: 14px;
+	padding-bottom: 12px;
+	padding-right: 10px;
 	background-color: white;
 }
-.rowitem.passive
-{
+.rowitem.passive {
 	font-weight: normal;
 	text-transform: none;
 }
-.rowitem:not(:last-child)
-{
+.rowitem:not(:last-child) {
 	border-bottom: 1px dotted #ccc;
 }
-.rowitem a
-{
+.rowitem a {
 	text-decoration: none;
 	color: black;
 }
 .rowitem a:hover { color: silver; }
 .opthead { display: none; }
 
-.col_left
-{
-	width: 30%;
-	float: left;
-}
-.col_right
-{
-	width: 69%;
-	overflow: hidden;
-}
-.colitem
-{
-	padding-left: 8px;
-	padding-right: 8px;
-	padding-top: 17px;
-	padding-bottom: 12px;
-	font-weight: bold;
-	text-transform: uppercase;
-}
-.colitem.passive
-{
-	font-weight: normal;
-	text-transform: none;
-}
-.colitem a
-{
-	text-decoration: none;
-	color: black;
-}
-.colitem a:hover { color: silver; }
-
-.formrow
-{
+.formrow {
 	width: 100%;
 	background-color: white;
 }
@@ -307,42 +255,49 @@ li a
 .formrow:after { clear: both; }
 .formrow:not(:last-child) { border-bottom: 1px dotted #ccc; }
 
-.formitem
-{
+.formitem {
 	float: left;
-	padding-left: 8px;
-	padding-right: 8px;
-	padding-top: 13px;
-	padding-bottom: 8px;
-	font-weight: bold;
+	padding: 10px;
+	min-width: 20%;
+	/*font-size: 17px;*/
+	font-weight: normal;
 }
-.formitem:first-child { font-weight: bold; }
 .formitem:not(:last-child) { border-right: 1px dotted #ccc; }
 .formitem.invisible_border { border: none; }
 
 /* Mostly for textareas */
 .formitem:only-child { width: 100%; }
-.formitem textarea
-{
+.formitem textarea {
 	width: 100%;
 	height: 100px;
 	outline-color: #8e8e8e;
 }
-.formitem:has-child()
-{
+.formitem:has-child() {
 	margin: 0 auto;
 	float: none;
 }
+.formitem:not(:only-child) input, .formitem:not(:only-child) select { padding: 3px;/*5px;*/ }
+.formitem:not(:only-child).formlabel {
+	padding-top: 15px;/*18px;*/
+	padding-bottom: 12px;/*16px;*/
+	/*padding-left: 15px;*/
+}
+.formbutton {
+	padding: 7px;
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+	font-size: 15px;
+	border-color: #ccc;
+}
 
-button
-{
+button {
 	background: white;
 	border: 1px solid #8e8e8e;
 }
 
 /* Topics */
-.topic_status
-{
+.topic_status {
 	text-transform: none;
 	margin-left: 8px;
 	padding-left: 2px;
@@ -367,8 +322,7 @@ button
 	background: linear-gradient(to bottom, #eaeaea, hsl(0,0%,79%));
 }
 
-.username
-{
+.username, .panel_tag {
 	text-transform: none;
 	margin-left: 0px;
 	padding-left: 4px;
@@ -382,12 +336,19 @@ button
 	border-width: 1px;
 	font-size: 15px;
 }
-button.username
-{
+button.username {
 	position: relative;
 	top: -0.25px;
 }
 
+/* We'll be rewriting the profiles soon too! */
+/*.username.real_username {
+	color: #404040;
+	font-size: 16px;
+	padding-right: 4px;
+}
+.username.real_username:hover { color: black; }*/
+
 .postQuote {
 	border: rgb(200,200,210);
 	background: rgb(245,245,255);
@@ -400,42 +361,23 @@ button.username
 	border-width: 1px;
 }
 
-.tag-mini
-{
-	text-transform: none;
-	margin-left: 0px;
-	padding-left: 3px;
-	padding-right: 3px;
-	padding-top: 1.5px;
-	padding-bottom: 0px;
-	color: #505050; /* 80,80,80 */
-	background-color: #FFFFFF;
-	border-style: dotted;
-	border-color: #505050; /* 232,232,232. All three RGB colours being the same seems to create a shade of gray */
-	border-width: 1px;
-	font-size: 10px;
-}
-
 .mention { font-weight: bold; }
 .show_on_edit { display: none; }
 
-.alert
-{
+.alert {
 	display: block;
 	padding: 5px;
 	margin-bottom: 10px;
 	border: 1px solid #ccc;
 }
-.alert_success
-{
+.alert_success {
 	display: block;
 	padding: 5px;
-	border: 1px solid A2FC00;
+	border: 1px solid #A2FC00;
 	margin-bottom: 10px;
-	background-color: DAF7A6;
+	background-color: #DAF7A6;
 }
-.alert_error
-{
+.alert_error {
 	display: block;
 	padding: 5px;
 	border: 1px solid #FF004B;
@@ -484,6 +426,25 @@ button.username
 	border-left: solid 1px #eaeaea;
 }
 
+.like_label:before {
+	content: "😀";
+}
+.edit_label:before {
+	content: "🖊️";
+}
+.trash_label:before {
+	content: "🗑️";
+}
+.flag_label:before {
+	content: "🚩";
+}
+
+.mod_button {
+	margin-right: 4px;
+}
+.simple > .real_username { color: #404040; font-size: 17px; }
+.simple > .user_content { background: none; }
+
 .simple { background-color: white; }
 .post_item:not(.simple) {
 	background-color: #eaeaea;
@@ -576,7 +537,116 @@ button.username
 .prev_button { left: 14px; }
 .next_button { right: 14px; }
 
-/* Media Queries from Simple. Probably useless in Conflux */
+.head_tag_upshift {
+	float: right;
+	position: relative;
+	top: -2px;
+}
+
+/* Control Panel */
+.panel_upshift:visited {
+	color: black;
+}
+
+.tag-mini {
+	margin-left: 0px;
+	padding-left: 0px;
+	padding-right: 0px;
+	padding-top: 2px;
+	padding-bottom: 2px;
+
+	color: black;
+	font-size: 12px;
+}
+
+.panel_tag {
+	padding-left: 0px;
+	padding-right: 0px;
+	border: none;
+	background: none;
+	color: #202020;
+	font-size: 14px;
+}
+
+.panel_floater {
+	float: right;
+}
+#panel_groups > .rowitem > .panel_floater {
+	float: none;
+}
+#panel_groups > .rowitem > .panel_floater > .panel_right_button {
+	float: right;
+}
+#panel_forums > .rowitem > .panel_floater {
+	float: none;
+}
+#panel_forums > .rowitem > .panel_floater > .panel_buttons {
+	float: right;
+}
+
+.panel_rank_tag, .forum_preset, .forum_active {
+	float: none;
+	color: #202020 !important;
+	font-size: 11px;
+}
+.panel_rank_tag_admin:before {
+	content: "Admins";
+}
+.panel_rank_tag_mod:before {
+	content: "Mods";
+}
+.panel_rank_tag_banned:before {
+	content: "Banned";
+}
+.panel_rank_tag_guest:before {
+	content: "Guests";
+}
+.panel_rank_tag_member:before {
+	content: "Members";
+}
+
+.forum_preset_announce:after {
+	content: "Announcements";
+}
+.forum_preset_members:after {
+	content: "Member Only";
+}
+.forum_preset_staff:after {
+	content: "Staff Only";
+}
+.forum_preset_admins:after {
+	content: "Admin Only";
+}
+.forum_preset_archive:after {
+	content: "Archive";
+}
+.forum_preset_all:after {
+	content: "Public";
+}
+.forum_preset_custom, .forum_preset_ {
+	display: none !important;
+}
+.forum_active_Hide:before {
+	content: "Hidden";
+}
+.forum_active_Hide + .forum_preset:before {
+	content: " | ";
+}
+.forum_active_Show {
+	display: none !important;
+}
+
+.theme_row > .panel_floater > .panel_right_button {
+	margin-left: 5px;
+}
+
+@media(max-width: 1300px) {
+	.theme_row {
+			background-image: none !important;
+	}
+}
+
+/* The Media Queries */
 @media (max-width: 880px) {
 	li {
 		height: 29px;
@@ -589,23 +659,25 @@ button.username
 		height: 30px;
 		margin-top: 8px;
 	}
-	.menu_left { padding-right: 9px; }
-	.menu_right { padding-right: 9px; }
+	.menu_left, .menu_right { padding-right: 9px; }
 	.menu_alerts {
 		padding-left: 7px;
 		padding-right: 7px;
 		font-size: 18px;
 	}
 
-	body { padding-left: 4px; padding-right: 4px; margin: 0px !important; width: 100% !important; height: 100% !important; overflow-x: hidden; }
+	body {
+		padding-left: 4px;
+		padding-right: 4px;
+		margin: 0px !important;
+		width: 100% !important;
+		height: 100% !important;
+		overflow-x: hidden;
+	}
 	.container { width: auto; }
 	.selectedAlert .alertList { top: 37px; right: 4px; }
 }
 
-@media (max-width: 810px) {
-	.rowitem { text-transform: none; }
-}
-
 @media (max-width: 680px) {
 	li {
 		padding-left: 5px;
@@ -615,8 +687,7 @@ button.username
 	}
 	li a { font-size: 14px; }
 	ul { height: 26px; }
-	.menu_left { padding-right: 7px; }
-	.menu_right { padding-right: 7px; }
+	.menu_left, .menu_right { padding-right: 7px; }
 	.menu_create_topic { display: none; }
 
 	.menu_alerts {
@@ -636,6 +707,28 @@ button.username
 @media (max-width: 470px) {
 	ul { margin-bottom: 10px; }
 	.menu_overview, .menu_profile, .hide_on_micro { display: none; }
+	.selectedAlert .alertList {
+		width: 156px;
+		margin-bottom: 5px;
+	}
+	.alertItem.withAvatar {
+		background-size: 36px;
+		text-align: center;
+		padding-left: 42px;
+		height: 46px;
+	}
+	.alertItem {
+		padding: 8px;
+	}
+	.alertItem .text {
+		height: 30px;
+		font-size: 10px;
+		font-weight: bold;
+		white-space: normal;
+	}
+	.alertItem .text.smaller {
+		font-size: 9px;
+	}
 	.post_container { overflow: visible !important; }
 
 	.post_item {

themes/tempra-conflux/theme.json

@@ -1,10 +1,11 @@
 {
 	"Name": "tempra-conflux",
 	"FriendlyName": "Tempra Conflux",
-	"Version": "0.0.1",
+	"Version": "0.1.0-dev",
 	"Creator": "Azareal",
 	"FullImage": "tempra-conflux.png",
 	"MobileFriendly": true,
+	"URL": "github.com/Azareal/Gosora",
 	"Templates": [
 		{
 			"Name": "topic",

themes/tempra-cursive/public/main.css

@@ -4,8 +4,7 @@
 	-webkit-box-sizing: border-box;
 }
 
-body
-{
+body {
 	font-family: cursive;
 	padding-bottom: 8px;
 }
@@ -15,8 +14,7 @@ body
 .user_content { font-family: Segoe UI Emoji, arial; }
 }
 
-ul
-{
+ul {
 	padding-left: 0px;
 	padding-right: 0px;
 	height: 36px;
@@ -25,31 +23,27 @@ ul
 	background-color: white;
 	margin-bottom: 12px;
 }
-li
-{
+li {
 	height: 35px;
 	padding-left: 10px;
 	padding-top: 8px;
 	padding-bottom: 8px;
 }
 li:hover { background: rgb(250,250,250); }
-li a
-{
+li a {
 	text-decoration: none;
 	/*color: #515151;*/
 	color: black;
 	font-size: 17px;
 }
-.menu_left
-{
+.menu_left {
 	float: left;
 	border-right: 1px solid #ccc;
 	padding-right: 10px;
 	font-family: cursive;
 	padding-top: 4px;
 }
-.menu_right
-{
+.menu_right {
 	float: right;
 	border-left: 1px solid #ccc;
 	padding-right: 10px;
@@ -74,25 +68,16 @@ li a
 	padding-top: 2.5px;
 	height: 14px;
 	text-align: center;
-	
 	border: white solid 1px;
 }
-.menu_alerts .alert_counter:empty {
-	display: none;
-}
+.menu_alerts .alert_counter:empty { display: none; }
 
-.selectedAlert {
+.selectedAlert, .selectedAlert:hover {
 	background: white;
 	color: black;
 }
-.selectedAlert:hover {
-	background: white;
-	color: black;
-}
-.menu_alerts .alertList {
-	display: none;
-	text-transform: none;
-}
+.menu_alerts .alertList { display: none; }
+
 .selectedAlert .alertList {
 	position: absolute;
 	top: 51px;
@@ -100,24 +85,27 @@ li a
 	background: white;
 	font-size: 10px;
 	line-height: 16px;
-	width: 135px;
+	width: 300px;
 	right: calc(5% + 7px);
 	border-top: 1px solid #ccc;
 	border-left: 1px solid #ccc;
 	border-right: 1px solid #ccc;
 	border-bottom: 1px solid #ccc;
+	margin-bottom: 10px;
 }
 .alertItem {
 	padding: 8px;
 	overflow: hidden;
 	text-overflow: ellipsis;
+	padding-top: 15px;
+	padding-bottom: 16px;
 }
 .alertItem.withAvatar {
-	background-size: auto 56px;
+	background-size: 60px;
 	background-repeat: no-repeat;
-	text-align: right;
 	padding-right: 12px;
-	height: 46px;
+	padding-left: 68px;
+	height: 50px;
 }
 .alertItem.withAvatar:not(:last-child) {
 	border-bottom: 1px solid rgb(230,230,230);
@@ -126,24 +114,24 @@ li a
 	overflow: hidden;
 	text-overflow: ellipsis;
 	float: right;
-	width: calc(100% - 20px);
-	height: 30px;
+	height: 40px;
+	width: 100%;
+	white-space: nowrap;
 }
 .alertItem .text {
-	font-size: 10px;
-	font-weight: bold;
+	font-size: 13px;
+	font-weight: normal;
+	margin-left: 5px;
 }
 
-.container
-{
+.container {
 	width: 90%;
 	padding: 0px;
 	margin-left: auto;
 	margin-right: auto;
 }
 
-.rowblock
-{
+.rowblock {
 	border: 1px solid #ccc;
 	width: 100%;
 	padding: 0px;
@@ -151,8 +139,7 @@ li a
 }
 .rowblock:empty { display: none; }
 
-.colblock_left
-{
+.colblock_left {
 	border: 1px solid #ccc;
 	padding: 0px;
 	padding-top: 0px;
@@ -160,8 +147,7 @@ li a
 	float: left;
 	margin-right: 8px;
 }
-.colblock_right
-{
+.colblock_right {
 	border: 1px solid #ccc;
 	padding: 0px;
 	padding-top: 0px;
@@ -169,24 +155,20 @@ li a
 	overflow: hidden;
 	word-wrap: break-word;
 }
-.colblock_left:empty { display: none; }
-.colblock_right:empty { display: none; }
+.colblock_left:empty, .colblock_right:empty { display: none; }
 
 /* The new method of doing columns layouts, colblock is now deprecated :( */
-.colstack_left
-{
+.colstack_left {
 	float: left;
 	width: 30%;
 	margin-right: 8px;
 }
-.colstack_right
-{
+.colstack_right {
 	float: left;
 	width: 65%;
 	width: calc(70% - 15px);
 }
-.colstack_item
-{
+.colstack_item {
 	border: 1px solid #ccc;
 	padding: 0px;
 	padding-top: 0px;
@@ -205,6 +187,7 @@ li a
 	/*grid-gap: 15px;*/
 	grid-gap: 12px;
 	margin-left: 5px;
+	margin-top: 2px;
 }
 .grid_item {
 	border: 1px solid #ccc;
@@ -224,7 +207,7 @@ li a
 }
 .grid_istat {
 	/*margin-bottom: 10px;*/
-	margin-bottom: 5px;
+	margin-bottom: 3px;
 }
 
 .stat_green { background-color: lightgreen; border-color: lightgreen; }
@@ -232,29 +215,19 @@ li a
 .stat_red { background-color: #ffb2b2; border-color: #ffb2b2; }
 .stat_disabled { background-color: lightgray; border-color: lightgray; }
 
-.rowhead { font-family: cursive; }
-.rowitem
-{
+.rowitem {
 	width: 100%;
 	padding-left: 8px;
 	padding-right: 8px;
 	padding-top: 12px;
 	padding-bottom: 12px;
-	font-weight: bold;
-	text-transform: uppercase;
 	background-color: white;
+	font-family: cursive;
 }
-.rowitem.passive
-{
-	font-weight: normal;
-	text-transform: none;
-}
-.rowitem:not(:last-child)
-{
+.rowitem:not(:last-child) {
 	border-bottom: 1px dotted #ccc;
 }
-.rowitem a
-{
+.rowitem a {
 	text-decoration: none;
 	color: black;
 }
@@ -262,39 +235,7 @@ li a
 .top_post { margin-bottom: 16px; }
 .opthead { display: none; }
 
-.col_left
-{
-	width: 30%;
-	float: left;
-}
-.col_right
-{
-	width: 69%;
-	overflow: hidden;
-}
-.colitem
-{
-	padding-left: 8px;
-	padding-right: 8px;
-	padding-top: 17px;
-	padding-bottom: 12px;
-	font-weight: bold;
-	text-transform: uppercase;
-}
-.colitem.passive
-{
-	font-weight: normal;
-	text-transform: none;
-}
-.colitem a
-{
-	text-decoration: none;
-	color: black;
-}
-.colitem a:hover { color: silver; }
-
-.formrow
-{
+.formrow {
 	width: 100%;
 	background-color: white;
 }
@@ -305,49 +246,51 @@ li a
 	display: table;
 }
 .formrow:after { clear: both; }
+.formrow:not(:last-child) { border-bottom: 1px dotted #ccc; }
 
-.formrow:not(:last-child)
-{
-	border-bottom: 1px dotted #ccc;
-}
-
-.formitem
-{
+.formitem {
 	float: left;
-	padding-left: 8px;
-	padding-right: 8px;
-	padding-top: 13px;
-	padding-bottom: 8px;
-	font-weight: bold;
+	padding: 10px;
+	min-width: 20%;
+	/*font-size: 17px;*/
+	font-weight: normal;
 }
-
-.formitem:first-child { font-weight: bold; }
 .formitem:not(:last-child) { border-right: 1px dotted #ccc; }
 .formitem.invisible_border { border: none; }
 
 /* Mostly for textareas */
 .formitem:only-child { width: 100%; }
-.formitem textarea
-{
+.formitem textarea {
 	width: 100%;
 	height: 100px;
 	outline-color: #8e8e8e;
 }
-.formitem:has-child()
-{
+.formitem:has-child() {
 	margin: 0 auto;
 	float: none;
 }
+.formitem:not(:only-child) input, .formitem:not(:only-child) select { padding: 3px;/*5px;*/ }
+.formitem:not(:only-child).formlabel {
+	padding-top: 15px;/*18px;*/
+	padding-bottom: 12px;/*16px;*/
+	/*padding-left: 15px;*/
+}
+.formbutton {
+	padding: 7px;
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+	font-size: 15px;
+	border-color: #ccc;
+}
 
-button
-{
+button {
 	background: white;
 	border: 1px solid #8e8e8e;
 }
 
 /* Topics */
-.topic_status
-{
+.topic_status {
 	text-transform: none;
 	margin-left: 8px;
 	padding-left: 2px;
@@ -360,8 +303,7 @@ button
 }
 .topic_status:empty { display: none; }
 
-.username
-{
+.username, .panel_tag {
 	text-transform: none;
 	margin-left: 0px;
 	padding-left: 0px;
@@ -372,13 +314,16 @@ button
 	font-size: 15px;
 	background: none;
 }
-button.username
-{
+button.username {
 	position: relative;
 	top: -0.25px;
 }
 .username.level { color: #303030; }
-.username.real_username { color: #404040; font-size: 17px; padding-right: 4px; }
+.username.real_username {
+	color: #404040;
+	font-size: 16px;
+	padding-right: 4px;
+}
 .username.real_username:hover { color: black; }
 
 .tag-text {
@@ -386,29 +331,18 @@ button.username
 	display: inline-block;
 }
 
-.post_item > .username {
-	padding-top: 23px;
+.controls > .username {
 	display: inline-block;
-}
-
-.tag-mini
-{
-	text-transform: none;
-	margin-left: 0px;
-	padding-left: 3px;
-	padding-right: 3px;
-	padding-top: 1.5px;
 	padding-bottom: 0px;
-	color: #505050; /* 80,80,80 */
-	background-color: #FFFFFF;
-	border-style: dotted;
-	border-color: #505050; /* 232,232,232. All three RGB colours being the same seems to create a shade of gray */
-	border-width: 1px;
-	font-size: 10px;
 }
 
-.post_item > .mod_button > button {
-	font-size: 15px;
+.real_username {
+	margin-right: -8px;
+}
+
+.mod_button > button {
+	font-family: cursive;
+	font-size: 12px;
 	color: #202020;
 	opacity: 0.7;
 	border: none;
@@ -417,6 +351,60 @@ button.username
 	opacity: 0.9;
 }
 
+.mod_button:not(:last-child) {
+	margin-right: 4px;
+}
+
+.like_label:before {
+	content: "+1";
+}
+.like_count_label:before {
+	content: "likes";
+}
+.like_count_label {
+	color: #202020;
+	opacity: 0.7;
+	font-size: 12px;
+}
+.like_count {
+	color: #202020;
+	opacity: 0.7;
+	padding-left: 1px;
+	padding-right: 2px;
+	font-size: 12px;
+}
+.like_count:before {
+	content: "|";
+	margin-right: 5px;
+}
+.edit_label:before {
+	content: "Edit";
+}
+.trash_label:before {
+	content: "Delete";
+}
+.pin_label:before {
+	content: "Pin";
+}
+.unpin_label:before {
+	content: "Unpin";
+}
+.flag_label:before {
+	content: "Flag";
+}
+.level_label {
+	margin-right: 1px;
+}
+.level_label:before {
+	content: "Level";
+}
+
+.controls {
+	margin-top: 23px;
+	display: inline-block;
+	width: 100%;
+}
+
 .action_item {
 	padding: 14px;
 	text-align: center;
@@ -433,37 +421,34 @@ button.username
 	margin-bottom: 8px;
 }
 
-.mention {
-	font-weight: bold;
-}
-
 .level {
 	float: right;
-	color: #505050;
 	border-left: none;
 	padding-left: 3px;
 	padding-right: 5px;
-	font-size: 16px;
+	font-family: cursive;
+	font-size: 15px;
+	color: #202020;
+	opacity: 0.7;
+	border: none;
 }
 
+.mention { font-weight: bold; }
 .show_on_edit { display: none; }
-.alert
-{
+.alert {
 	display: block;
 	padding: 5px;
 	margin-bottom: 10px;
 	border: 1px solid #ccc;
 }
-.alert_success
-{
+.alert_success {
 	display: block;
 	padding: 5px;
 	border: 1px solid A2FC00;
 	margin-bottom: 10px;
 	background-color: DAF7A6;
 }
-.alert_error
-{
+.alert_error {
 	display: block;
 	padding: 5px;
 	border: 1px solid #FF004B;
@@ -495,6 +480,104 @@ button.username
 .prev_button { left: 14px; }
 .next_button { right: 14px; }
 
+.head_tag_upshift {
+	color: #202020;
+	opacity: 0.7;
+	font-size: 12px;
+}
+
+/* Control Panel */
+
+.tag-mini {
+	margin-left: 0px;
+	padding-left: 0px;
+	padding-right: 0px;
+	padding-top: 2px;
+	padding-bottom: 2px;
+
+	font-family: cursive;
+	font-size: 12px;
+	color: #202020;
+	opacity: 0.7;
+}
+
+.panel_floater {
+	float: right;
+}
+#panel_groups > .rowitem > .panel_floater {
+	float: none;
+}
+#panel_groups > .rowitem > .panel_floater > .panel_right_button {
+	float: right;
+}
+#panel_forums > .rowitem > .panel_floater {
+	float: none;
+}
+#panel_forums > .rowitem > .panel_floater > .panel_buttons {
+	float: right;
+}
+#panel_forums > .rowitem > .panel_floater > .panel_buttons > .panel_right_button {
+	color: #505050;
+	font-size: 14px;
+}
+.panel_rank_tag, .forum_preset, .forum_active {
+	float: none;
+	color: #202020;
+	opacity: 0.7;
+	font-size: 10px;
+}
+.panel_rank_tag_admin:before {
+	content: "Admin Group";
+}
+.panel_rank_tag_mod:before {
+	content: "Mod Group";
+}
+.panel_rank_tag_banned:before {
+	content: "Banned Group";
+}
+.panel_rank_tag_guest:before {
+	content: "Guest Group";
+}
+.panel_rank_tag_member:before {
+	content: "Member Group";
+}
+
+.forum_preset_announce:after {
+	content: "Announcements";
+}
+.forum_preset_members:after {
+	content: "Member Only";
+}
+.forum_preset_staff:after {
+	content: "Staff Only";
+}
+.forum_preset_admins:after {
+	content: "Admin Only";
+}
+.forum_preset_archive:after {
+	content: "Archive";
+}
+.forum_preset_all:after {
+	content: "Public";
+}
+.forum_preset_custom, .forum_preset_ {
+	display: none !important;
+}
+.forum_active_Hide:before {
+	content: "Hidden";
+}
+.forum_active_Hide + .forum_preset:before {
+	content: " | ";
+}
+.forum_active_Show {
+	display: none !important;
+}
+@media(max-width: 1300px) {
+	.theme_row {
+			background-image: none !important;
+	}
+}
+
 @media (max-width: 880px) {
 	li {
 		height: 29px;
@@ -515,17 +598,20 @@ button.username
 		font-size: 18px;
 	}
 
-	body { padding-left: 4px; padding-right: 4px; margin: 0px !important; width: 100% !important; height: 100% !important; overflow-x: hidden; }
+	body {
+		padding-left: 4px;
+		padding-right: 4px;
+		margin: 0px !important;
+		width: 100% !important;
+		height: 100% !important;
+		overflow-x: hidden;
+	}
 	.container { width: auto; }
 	.selectedAlert .alertList { top: 37px; right: 4px; }
 }
 
 @media (max-width: 810px) {
-	.rowitem { text-transform: none; }
-	/*.rowhead { font-family: arial; }
-	.menu_left { font-family: arial; }*/
 	body { font-family: arial; }
-	.level { font-size: 17px; }
 }
 
 @media (max-width: 700px) {
@@ -547,10 +633,7 @@ button.username
 		font-size: 16px;
 		padding-top: 1px;
 	}
-	.menu_alerts .alert_counter {
-		top: -23px;
-		left: 8px;
-	}
+	.menu_alerts .alert_counter { top: -23px; left: 8px; }
 	.selectedAlert .alertList { top: 33px; }
 
 	.hide_on_mobile { display: none; }
@@ -559,16 +642,40 @@ button.username
 	.grid_istat { margin-bottom: 0px; }
 }
 
-@media (max-width: 470px) {
-	.menu_overview { display: none; }
-	.menu_profile { display: none; }
-	.hide_on_micro { display: none; }
-	.post_container {
-		overflow: visible !important;
+@media (max-width: 350px) {
+	.hide_on_micro { display: none !important; }
 }
+
+@media (max-width: 470px) {
+	.menu_overview, .menu_profile, .hide_on_micro { display: none; }
+	.selectedAlert .alertList {
+		width: 135px;
+		margin-bottom: 5px;
+	}
+	.alertItem.withAvatar {
+		background-size: 36px;
+		text-align: right;
+		padding-left: 10px;
+		height: 46px;
+	}
+	.alertItem {
+		padding: 8px;
+	}
+	.alertItem.withAvatar .text {
+		width: calc(100% - 20px);
+		height: 30px;
+		white-space: normal;
+	}
+	.alertItem .text {
+		font-size: 10px;
+		font-weight: bold;
+		margin-left: 0px;
+	}
+
+	.post_container { overflow: visible !important; }
 	.post_item {
 		background-position: 0px 2px !important;
-		background-size: 64px 64px !important;
+		background-size: 64px auto !important;
 		padding-left: 2px !important;
 		min-height: 96px;
 		position: relative !important;
@@ -576,6 +683,7 @@ button.username
 	.post_item > .user_content {
 		margin-left: 75px !important;
 		width: 100% !important;
+		min-height: 45px;
 	}
 	.post_item > .mod_button {
 		float: right !important;
@@ -583,9 +691,7 @@ button.username
 		position: relative;
 		top: -14px;
 	}
-	.post_item > .mod_button > button {
-		opacity: 1;
-	}
+	.post_item > .mod_button > button { opacity: 1; }
 	.post_item > .real_username {
 		position: absolute;
 		top: 70px;
@@ -597,6 +703,11 @@ button.username
 		font-size: 15px;
 		text-align: center;
 	}
+	.post_item > .controls {
+		margin-top: 0px;
+		margin-left: 74px;
+		width: calc(100% - 74px);
+	}
 	.container { width: 100% !important; }
 }
 

themes/tempra-cursive/theme.json

@@ -1,10 +1,10 @@
 {
 	"Name": "tempra-cursive",
 	"FriendlyName": "Tempra Cursive",
-	"Version": "0.0.1",
+	"Version": "0.1.0-dev",
 	"Creator": "Azareal",
 	"FullImage": "tempra-cursive.png",
 	"ForkOf": "tempra-simple",
-	"Tag": "🏗️",
-	"MobileFriendly": true
+	"MobileFriendly": true,
+	"URL": "github.com/Azareal/Gosora"
 }

themes/tempra-simple/public/main.css

@@ -4,8 +4,7 @@
 	-webkit-box-sizing: border-box;
 }
 
-body
-{
+body {
 	font-family: arial;
 	padding-bottom: 8px;
 }
@@ -15,10 +14,7 @@ body
 .user_content { font-family: Segoe UI Emoji, arial; }
 }
 
-/*.move_left{float: left;position: relative;left: 50%;}
-.move_right{float: left;position: relative;left: -50%;}*/
-ul
-{
+ul {
 	padding-left: 0px;
 	padding-right: 0px;
 	height: 36px;
@@ -27,29 +23,25 @@ ul
 	background-color: white;
 	margin-bottom: 12px;
 }
-li
-{
+li {
 	height: 35px;
 	padding-left: 10px;
 	padding-top: 8px;
 	padding-bottom: 8px;
 }
 li:hover { background: rgb(250,250,250); }
-li a
-{
+li a {
 	text-decoration: none;
 	/*color: #515151;*/
 	color: black;
 	font-size: 17px;
 }
-.menu_left
-{
+.menu_left {
 	float: left;
 	border-right: 1px solid #ccc;
 	padding-right: 10px;
 }
-.menu_right
-{
+.menu_right {
 	float: right;
 	border-left: 1px solid #ccc;
 	padding-right: 10px;
@@ -89,7 +81,6 @@ li a
 }
 .menu_alerts .alertList {
 	display: none;
-	text-transform: none;
 }
 .selectedAlert .alertList {
 	position: absolute;
@@ -98,24 +89,27 @@ li a
 	background: white;
 	font-size: 10px;
 	line-height: 16px;
-	width: 135px;
+	width: 300px;
 	right: calc(5% + 7px);
 	border-top: 1px solid #ccc;
 	border-left: 1px solid #ccc;
 	border-right: 1px solid #ccc;
 	border-bottom: 1px solid #ccc;
+	margin-bottom: 10px;
 }
 .alertItem {
 	padding: 8px;
 	overflow: hidden;
 	text-overflow: ellipsis;
+	padding-top: 15px;
+	padding-bottom: 16px;
 }
 .alertItem.withAvatar {
-	background-size: auto 56px;
+	background-size: 60px;
 	background-repeat: no-repeat;
-	text-align: right;
 	padding-right: 12px;
-	height: 46px;
+	padding-left: 68px;
+	height: 50px;
 }
 .alertItem.withAvatar:not(:last-child) {
 	border-bottom: 1px solid rgb(230,230,230);
@@ -124,24 +118,24 @@ li a
 	overflow: hidden;
 	text-overflow: ellipsis;
 	float: right;
-	width: calc(100% - 20px);
-	height: 30px;
+	height: 40px;
+	width: 100%;
+	white-space: nowrap;
 }
 .alertItem .text {
-	font-size: 10px;
-	font-weight: bold;
+	font-size: 13px;
+	font-weight: normal;
+	margin-left: 5px;
 }
 
-.container
-{
+.container {
 	width: 90%;
 	padding: 0px;
 	margin-left: auto;
 	margin-right: auto;
 }
 
-.rowblock
-{
+.rowblock {
 	border: 1px solid #ccc;
 	width: 100%;
 	padding: 0px;
@@ -149,8 +143,7 @@ li a
 }
 .rowblock:empty { display: none; }
 
-.colblock_left
-{
+.colblock_left {
 	border: 1px solid #ccc;
 	padding: 0px;
 	padding-top: 0px;
@@ -158,8 +151,7 @@ li a
 	float: left;
 	margin-right: 8px;
 }
-.colblock_right
-{
+.colblock_right {
 	border: 1px solid #ccc;
 	padding: 0px;
 	padding-top: 0px;
@@ -167,24 +159,20 @@ li a
 	overflow: hidden;
 	word-wrap: break-word;
 }
-.colblock_left:empty { display: none; }
-.colblock_right:empty { display: none; }
+.colblock_left:empty, .colblock_right:empty { display: none; }
 
 /* The new method of doing columns layouts, colblock is now deprecated :( */
-.colstack_left
-{
+.colstack_left {
 	float: left;
 	width: 30%;
 	margin-right: 8px;
 }
-.colstack_right
-{
+.colstack_right {
 	float: left;
 	width: 65%;
 	width: calc(70% - 15px);
 }
-.colstack_item
-{
+.colstack_item {
 	border: 1px solid #ccc;
 	padding: 0px;
 	padding-top: 0px;
@@ -203,6 +191,7 @@ li a
 	/*grid-gap: 15px;*/
 	grid-gap: 12px;
 	margin-left: 5px;
+	margin-top: 2px;
 }
 .grid_item {
 	border: 1px solid #ccc;
@@ -230,28 +219,26 @@ li a
 .stat_red { background-color: #ffb2b2; border-color: #ffb2b2; }
 .stat_disabled { background-color: lightgray; border-color: lightgray; }
 
-.rowitem
-{
+.rowitem {
 	width: 100%;
-	padding-left: 8px;
+	/*padding-left: 8px;
 	padding-right: 8px;
 	padding-top: 17px;
+	padding-bottom: 12px;*/
+	padding-left: 10px;
+	padding-top: 14px;
 	padding-bottom: 12px;
-	font-weight: bold;
-	text-transform: uppercase;
+	padding-right: 10px;
+	/*font-weight: bold;*/
 	background-color: white;
 }
-.rowitem.passive
-{
-	font-weight: normal;
-	text-transform: none;
-}
-.rowitem:not(:last-child)
-{
+/*.rowitem:not(.passive) {
+	font-size: 17px;
+}*/
+.rowitem:not(:last-child) {
 	border-bottom: 1px dotted #ccc;
 }
-.rowitem a
-{
+.rowitem a {
 	text-decoration: none;
 	color: black;
 }
@@ -259,31 +246,7 @@ li a
 .top_post { margin-bottom: 12px; }
 .opthead { display: none; }
 
-.col_left
-{
-	width: 30%;
-	float: left;
-}
-.col_right
-{
-	width: 69%;
-	overflow: hidden;
-}
-.colitem
-{
-	padding-left: 8px;
-	padding-right: 8px;
-	padding-top: 17px;
-	padding-bottom: 12px;
-	font-weight: bold;
-	text-transform: uppercase;
-}
-.colitem.passive { font-weight: normal; text-transform: none; }
-.colitem a { text-decoration: none; color: black; }
-.colitem a:hover { color: silver; }
-
-.formrow
-{
+.formrow {
 	width: 100%;
 	background-color: white;
 }
@@ -296,43 +259,49 @@ li a
 .formrow:after { clear: both; }
 .formrow:not(:last-child) { border-bottom: 1px dotted #ccc; }
 
-.formitem
-{
+.formitem {
 	float: left;
-	padding-left: 8px;
-	padding-right: 8px;
-	padding-top: 13px;
-	padding-bottom: 8px;
-	font-weight: bold;
+	padding: 10px;
+	min-width: 20%;
+	/*font-size: 17px;*/
+	font-weight: normal;
 }
-
-.formitem:first-child { font-weight: bold; }
 .formitem:not(:last-child) { border-right: 1px dotted #ccc; }
 .formitem.invisible_border { border: none; }
 
 /* Mostly for textareas */
 .formitem:only-child { width: 100%; }
-.formitem textarea
-{
+.formitem textarea {
 	width: 100%;
 	height: 100px;
 	outline-color: #8e8e8e;
 }
-.formitem:has-child()
-{
+.formitem:has-child() {
 	margin: 0 auto;
 	float: none;
 }
+.formitem:not(:only-child) input, .formitem:not(:only-child) select { padding: 3px;/*5px;*/ }
+.formitem:not(:only-child).formlabel {
+	padding-top: 15px;/*18px;*/
+	padding-bottom: 12px;/*16px;*/
+	/*padding-left: 15px;*/
+}
+.formbutton {
+	padding: 7px;
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+	font-size: 15px;
+	border-color: #ccc;
+}
 
-button
-{
+button {
 	background: white;
 	border: 1px solid #8e8e8e;
 }
 
 /* Topics */
-.topic_status
-{
+.topic_status {
 	text-transform: none;
 	margin-left: 8px;
 	padding-left: 2px;
@@ -345,8 +314,7 @@ button
 }
 .topic_status:empty { display: none; }
 
-.username
-{
+.username, .panel_tag {
 	text-transform: none;
 	margin-left: 0px;
 	padding-left: 4px;
@@ -370,8 +338,7 @@ button.username { position: relative; top: -0.25px; }
     display: inline-block;
 }
 
-.tag-mini
-{
+.tag-mini {
 	text-transform: none;
 	margin-left: 0px;
 	padding-left: 3px;
@@ -395,6 +362,55 @@ button.username { position: relative; top: -0.25px; }
 	opacity: 0.9;
 }
 
+.mod_button {
+	margin-right: 4px;
+}
+
+.like_label:before, .like_count_label:before {
+	content: "😀";
+}
+.like_count_label {
+	color: #505050;
+	float: right;
+	opacity: 0.85;
+	margin-left: 5px;
+}
+.like_count {
+	float: right;
+	color: #505050;
+	border-left: none;
+	padding-left: 5px;
+	padding-right: 5px;
+	font-size: 17px;
+}
+.edit_label:before {
+	content: "🖊️";
+}
+.trash_label:before {
+	content: "🗑️";
+}
+.pin_label:before {
+	content: "📌";
+}
+.unpin_label:before {
+	content: "📌";
+}
+.unpin_label {
+	background-color: #D6FFD6;
+}
+.flag_label:before {
+	content: "🚩";
+}
+.level_label:before {
+	content: "👑";
+}
+
+.controls {
+	margin-top: 23px;
+	display: inline-block;
+	width: 100%;
+}
+
 .action_item {
 	padding: 14px;
 	text-align: center;
@@ -411,10 +427,6 @@ button.username { position: relative; top: -0.25px; }
 	margin-bottom: 8px;
 }
 
-.mention {
-	font-weight: bold;
-}
-
 .level {
 	float: right;
 	color: #505050;
@@ -424,24 +436,23 @@ button.username { position: relative; top: -0.25px; }
 	font-size: 17px;
 }
 
+.mention { font-weight: bold; }
 .show_on_edit { display: none; }
-.alert
-{
+
+.alert {
 	display: block;
 	padding: 5px;
 	margin-bottom: 10px;
 	border: 1px solid #ccc;
 }
-.alert_success
-{
+.alert_success {
 	display: block;
 	padding: 5px;
 	border: 1px solid A2FC00;
 	margin-bottom: 10px;
 	background-color: DAF7A6;
 }
-.alert_error
-{
+.alert_error {
 	display: block;
 	padding: 5px;
 	border: 1px solid #FF004B;
@@ -472,6 +483,72 @@ button.username { position: relative; top: -0.25px; }
 }
 .prev_button { left: 14px; }
 .next_button { right: 14px; }
+.head_tag_upshift {
+	float: right;
+	position: relative;
+	top: -2px;
+}
+
+/* Control Panel */
+
+.panel_upshift {
+	font-size: 18px;
+	position: relative;
+	top: -2px;
+}
+.panel_upshift:visited {
+	color: black;
+}
+/*.panel_tag_upshift {
+	margin-left: 2px;
+	position: relative;
+	top:-3px;
+	color: #505050;
+}*/
+
+.panel_floater {
+	float: right;
+}
+.panel_rank_tag_admin:before {
+	content: "👑";
+}
+.panel_rank_tag_mod:before {
+	content: "👮";
+}
+.panel_rank_tag_banned:before {
+	content: "⛓️";
+}
+.panel_rank_tag_guest:before {
+	content: "👽";
+}
+.panel_rank_tag_member:before {
+	content: "👪";
+}
+
+.forum_preset_announce:before {
+	content: "📣";
+}
+.forum_preset_members:before {
+	content: "👪";
+}
+.forum_preset_staff:before {
+	content: "👮";
+}
+.forum_preset_admins:before {
+	content: "👑";
+}
+.forum_preset_archive:before {
+	content: "☠️";
+}
+.forum_preset_all, .forum_preset_custom, .forum_preset_ {
+	display: none !important;
+}
+.forum_active_Hide:before {
+	content: "🕵️";
+}
+.forum_active_Show {
+	display: none !important;
+}
 
 @media (max-width: 880px) {
 	li {
@@ -505,10 +582,6 @@ button.username { position: relative; top: -0.25px; }
 	.selectedAlert .alertList { top: 37px; right: 4px; }
 }
 
-@media (max-width: 810px) {
-	.rowitem { text-transform: none; }
-}
-
 @media (max-width: 680px) {
 	li {
 		padding-left: 5px;
@@ -538,6 +611,30 @@ button.username { position: relative; top: -0.25px; }
 
 @media (max-width: 470px) {
 	.menu_overview, .menu_profile { display: none; }
+	.selectedAlert .alertList {
+		width: 135px;
+		margin-bottom: 5px;
+	}
+	.alertItem.withAvatar {
+		background-size: 36px;
+		text-align: right;
+		padding-left: 10px;
+		height: 46px;
+	}
+	.alertItem {
+		padding: 8px;
+	}
+	.alertItem.withAvatar .text {
+		width: calc(100% - 20px);
+		height: 30px;
+		white-space: normal;
+	}
+	.alertItem .text {
+		font-size: 10px;
+		font-weight: bold;
+		margin-left: 0px;
+	}
+
 	.hide_on_micro { display: none !important; }
 	.post_container { overflow: visible !important; }
 	.post_item:not(.action_item) {
@@ -552,33 +649,49 @@ button.username { position: relative; top: -0.25px; }
 		width: 100% !important;
 		min-height: 45px;
 	}
-	.post_item > .mod_button {
+	.post_item > .controls > .mod_button {
 		float: right !important;
 		margin-left: 2px !important;
+		margin-right: 3px;
 	}
-	.post_item > .mod_button > button { opacity: 1; }
-	.post_item > .real_username {
-		/*position: absolute;
-		top: 70px;
-		float: left;
-		margin-top: -2px;*/
+	.post_item > .controls > .mod_button > button {
+		opacity: 1;
+		padding-left: 3px;
+		padding-right: 3px;
+	}
+	.post_item > .controls > .real_username {
 		margin-top: 0px;
-		/*padding-top: 3px !important;
-		margin-right: 2px;
-		width: 60px;*/
-		margin-left: 74px;
 		margin-right: 0px;
 		font-size: 15px;
-		/*text-align: center;*/
 		color: black;
 		max-width: 61px;
-		/*overflow: hidden;*/
 		text-overflow: ellipsis;
 	}
+	.post_item > .controls {
+		margin-top: 0px;
+		margin-left: 74px;
+		width: calc(100% - 74px);
+	}
 	.container { width: 100% !important; }
 }
 
 @media (max-width: 330px) {
 	li { padding-left: 6px; }
 	.menu_left { padding-right: 6px; }
+	.post_item > .controls > .real_username {
+		display: inline-block;
+		overflow: hidden;
+		margin-right: -3px;
+		text-overflow: clip;
+		max-width: 84px;
+	}
+	.post_item > .controls {
+		margin-left: 72px;
+	}
+	.top_post > .post_item > .controls > .real_username {
+		max-width: 57px;
+	}
+	.top_post > .post_item {
+		padding-right: 4px;
+	}
 }

themes/tempra-simple/theme.json

@@ -1,8 +1,9 @@
 {
 	"Name": "tempra-simple",
 	"FriendlyName": "Tempra Simple",
-	"Version": "0.0.1",
+	"Version": "0.1.0-dev",
 	"Creator": "Azareal",
 	"FullImage": "tempra-simple.png",
-	"MobileFriendly": true
+	"MobileFriendly": true,
+	"URL": "github.com/Azareal/Gosora"
 }