Styles basic HTML UIs (#7001)

code/modules/client/asset_cache.dm

@@ -196,31 +196,10 @@ var/list/asset_datums = list()
 
 /datum/asset/simple/changelog
 	assets = list(
-		"88x31.png" = 'html/88x31.png',
-		"bug-minus.png" = 'html/bug-minus.png',
-		"cross-circle.png" = 'html/cross-circle.png',
-		"hard-hat-exclamation.png" = 'html/hard-hat-exclamation.png',
-		"image-minus.png" = 'html/image-minus.png',
-		"image-plus.png" = 'html/image-plus.png',
-		"map-pencil.png" = 'html/map-pencil.png',
-		"music-minus.png" = 'html/music-minus.png',
-		"music-plus.png" = 'html/music-plus.png',
-		"tick-circle.png" = 'html/tick-circle.png',
-		"wrench-screwdriver.png" = 'html/wrench-screwdriver.png',
-		"spell-check.png" = 'html/spell-check.png',
-		"burn-exclamation.png" = 'html/burn-exclamation.png',
-		"scales.png" = 'html/scales.png',
-		"chevron.png" = 'html/chevron.png',
-		"chevron-expand.png" = 'html/chevron-expand.png',
 		"changelog.css" = 'html/changelog.css',
 		"changelog.js" = 'html/changelog.js'
 	)
 
-/datum/asset/simple/vueui_theming
-	assets = list(
-		"vueui.css" = 'vueui/dist/app.css'
-	)
-
 /datum/asset/simple/vueui
 	assets = list(
 		"vueui.js" = 'vueui/dist/app.js',

code/modules/client/preference_setup/loadout/loadout.dm

@@ -134,12 +134,12 @@ var/list/gear_datums = list()
 			. += " [category] "
 		else
 			var/datum/loadout_category/LC = loadout_categories[category]
-			var/tcolor =  "#3366CC"
+			var/style = ""
 			for(var/thing in LC.gear)
 				if(thing in pref.gear)
-					tcolor = "#E67300"
+					style = "style='color: #FF8000;'"
 					break
-			. += " <a href='?src=\ref[src];select_category=[category]'><font color = '[tcolor]'>[category]</font></a> "
+			. += " <a href='?src=\ref[src];select_category=[category]'><font [style]>[category]</font></a> "
 	. += "</b></center></td></tr>"
 
 	var/datum/loadout_category/LC = loadout_categories[current_tab]
@@ -151,7 +151,10 @@ var/list/gear_datums = list()
 			continue
 		var/datum/gear/G = LC.gear[gear_name]
 		var/ticked = (G.display_name in pref.gear)
-		. += "<tr style='vertical-align:top'><td width=25%><a href='?src=\ref[src];toggle_gear=[G.display_name]'><font color='[ticked ? "#E67300" : "#3366CC"]'>[G.display_name]</font></a></td>"
+		var/style = ""
+		if(ticked)
+			style = "style='color: #FF8000;'"
+		. += "<tr style='vertical-align:top'><td width=25%><a href='?src=\ref[src];toggle_gear=[G.display_name]'><font [style]>[G.display_name]</font></a></td>"
 		. += "<td width = 10% style='vertical-align:top'>[G.cost]</td>"
 		. += "<td><font size=2><i>[G.description]</i></font></td></tr>"
 		if(ticked)

code/modules/client/preference_setup/occupation/occupation.dm

@@ -165,15 +165,10 @@
 	for(var/datum/job/job in faction.get_occupations())
 		index += 1
 		if((index >= limit) || (job.title in splitJobs))
-			if((index < limit) && (lastJob != null))
-				//If the cells were broken up by a job in the splitJob list then it will fill in the rest of the cells with
-				//the last job's selection color. Creating a rather nice effect.
-				for(var/i = 0, i < (limit - index), i += 1)
-					dat += "<tr bgcolor='[lastJob.selection_color]'><td width='60%' align='right'><a>&nbsp</a></td><td><a>&nbsp</a></td></tr>"
 			dat += "</table></td><td width='20%'><table width='100%' cellpadding='1' cellspacing='0'>"
 			index = 0
 
-		dat += "<tr bgcolor='[job.selection_color]'><td width='60%' align='right'>"
+		dat += "<tr style='background-color: [hex2cssrgba(job.selection_color, 0.4)];'><td width='60%' align='right'>"
 		var/rank = job.title
 		lastJob = job
 		var/ban_reason = jobban_isbanned(user, rank)
@@ -205,7 +200,7 @@
 			else
 				dat += " <font color=red>\[No]</font>"
 			if(job.alt_titles) //Blatantly cloned from a few lines down.
-				dat += "</a></td></tr><tr bgcolor='[lastJob.selection_color]'><td width='60%' align='center'>&nbsp</td><td><a href='?src=\ref[src];select_alt_title=\ref[job]'>\[[pref.GetPlayerAltTitle(job)]\]</a></td></tr>"
+				dat += "</a></td></tr><tr style='background-color: [hex2cssrgba(lastJob.selection_color, 0.4)];'><td width='60%' align='center'>&nbsp</td><td><a href='?src=\ref[src];select_alt_title=\ref[job]'>\[[pref.GetPlayerAltTitle(job)]\]</a></td></tr>"
 			dat += "</a></td></tr>"
 			continue
 
@@ -218,7 +213,7 @@
 		else
 			dat += " <font color=red>\[NEVER]</font>"
 		if(job.alt_titles)
-			dat += "</a></td></tr><tr bgcolor='[lastJob.selection_color]'><td width='60%' align='center'>&nbsp</td><td><a href='?src=\ref[src];select_alt_title=\ref[job]'>\[[pref.GetPlayerAltTitle(job)]\]</a></td></tr>"
+			dat += "</a></td></tr><tr style='background-color: [hex2cssrgba(lastJob.selection_color, 0.4)];'><td width='60%' align='center'>&nbsp</td><td><a href='?src=\ref[src];select_alt_title=\ref[job]'>\[[pref.GetPlayerAltTitle(job)]\]</a></td></tr>"
 		dat += "</a></td></tr>"
 
 	dat += "</td'></tr></table>"

code/modules/client/preference_setup/skills/skills.dm

@@ -78,14 +78,14 @@
 			var/level = pref.skills[S.ID]
 			dat += "<tr style='text-align:left;'>"
 			dat += "<th><a href='?src=\ref[src];skillinfo=\ref[S]'>[S.name]</a></th>"
-			dat += "<th><a href='?src=\ref[src];setskill=\ref[S];newvalue=[SKILL_NONE]'><font color=[(level == SKILL_NONE) ? "red" : "black"]>\[Untrained\]</font></a></th>"
+			dat += "<th><a href='?src=\ref[src];setskill=\ref[S];newvalue=[SKILL_NONE]'><font color=[(level == SKILL_NONE) ? "red" : ""]>\[Untrained\]</font></a></th>"
 			// secondary skills don't have an amateur level
 			if(S.secondary)
 				dat += "<th></th>"
 			else
-				dat += "<th><a href='?src=\ref[src];setskill=\ref[S];newvalue=[SKILL_BASIC]'><font color=[(level == SKILL_BASIC) ? "red" : "black"]>\[Amateur\]</font></a></th>"
-			dat += "<th><a href='?src=\ref[src];setskill=\ref[S];newvalue=[SKILL_ADEPT]'><font color=[(level == SKILL_ADEPT) ? "red" : "black"]>\[Trained\]</font></a></th>"
-			dat += "<th><a href='?src=\ref[src];setskill=\ref[S];newvalue=[SKILL_EXPERT]'><font color=[(level == SKILL_EXPERT) ? "red" : "black"]>\[Professional\]</font></a></th>"
+				dat += "<th><a href='?src=\ref[src];setskill=\ref[S];newvalue=[SKILL_BASIC]'><font color=[(level == SKILL_BASIC) ? "red" : ""]>\[Amateur\]</font></a></th>"
+			dat += "<th><a href='?src=\ref[src];setskill=\ref[S];newvalue=[SKILL_ADEPT]'><font color=[(level == SKILL_ADEPT) ? "red" : ""]>\[Trained\]</font></a></th>"
+			dat += "<th><a href='?src=\ref[src];setskill=\ref[S];newvalue=[SKILL_EXPERT]'><font color=[(level == SKILL_EXPERT) ? "red" : ""]>\[Professional\]</font></a></th>"
 			dat += "</tr>"
 	dat += "</table>"
 	. = dat.Join()

code/modules/client/preferences.dm

@@ -224,7 +224,7 @@ datum/preferences
 
 /datum/preferences/proc/ShowChoices(mob/user)
 	if(!user || !user.client)	return
-	var/dat = "<html><body><center>"
+	var/dat = "<center>"
 
 	if(path)
 		dat += "<a href='?src=\ref[src];load=1'>Load slot</a> - "
@@ -240,9 +240,8 @@ datum/preferences
 	dat += player_setup.header()
 	dat += "<br><HR></center>"
 	dat += player_setup.content(user)
-
-	dat += "</html></body>"
-	user << browse(dat, "window=preferences;size=800x800")
+	send_theme_resources(user)
+	user << browse(enable_ui_theme(user, dat), "window=preferences;size=800x800")
 
 /datum/preferences/proc/process_link(mob/user, list/href_list)
 	if(!user)	return
@@ -391,8 +390,7 @@ datum/preferences
 		character.update_icons()
 
 /datum/preferences/proc/open_load_dialog_sql(mob/user)
-	var/dat = "<body>"
-	dat += "<tt><center>"
+	var/dat = "<tt><center>"
 
 	for(var/ckey in preferences_datums)
 		var/datum/preferences/D = preferences_datums[ckey]
@@ -426,12 +424,12 @@ datum/preferences
 	dat += "<hr>"
 	dat += "<a href='?src=\ref[src];close_load_dialog=1'>Close</a><br>"
 	dat += "</center></tt>"
-	user << browse(dat, "window=saves;size=300x390")
+	send_theme_resources(user)
+	user << browse(enable_ui_theme(user, dat), "window=saves;size=300x390")
 
 
 /datum/preferences/proc/open_load_dialog_file(mob/user)
-	var/dat = "<body>"
-	dat += "<tt><center>"
+	var/dat = "<tt><center>"
 
 	var/savefile/S = new /savefile(path)
 	if(S)
@@ -447,7 +445,8 @@ datum/preferences
 
 	dat += "<hr>"
 	dat += "</center></tt>"
-	user << browse(dat, "window=saves;size=300x390")
+	send_theme_resources(user)
+	user << browse(enable_ui_theme(user, dat), "window=saves;size=300x390")
 
 /datum/preferences/proc/close_load_dialog(mob/user)
 	user << browse(null, "window=saves")

code/modules/mob/abstract/new_player/new_player.dm

@@ -63,8 +63,8 @@ INITIALIZE_IMMEDIATE(/mob/abstract/new_player)
 				output += "<p><a href='byond://?src=\ref[src];showpoll=1'>Show Player Polls</A></p>"
 
 	output += "</div>"
-
-	src << browse(output,"window=playersetup;size=310x350;can_close=0")
+	send_theme_resources(src)
+	src << browse(enable_ui_theme(src, output),"window=playersetup;size=310x350;can_close=0")
 
 /mob/abstract/new_player/Stat()
 	..()

code/modules/mob/mob.dm

@@ -494,7 +494,8 @@
 	set category = "OOC"
 	var/datum/asset/changelog = get_asset_datum(/datum/asset/simple/changelog)
 	changelog.send(src)
-	src << browse('html/changelog.html', "window=changes;size=675x650")
+	send_theme_resources(src)
+	src << browse(enable_ui_theme(src, file2text("html/changelog.html"), file2text("html/templates/changelog_extra_header.html")), "window=changes;size=675x650")
 	if(prefs.lastchangelog != changelog_hash)
 		prefs.lastchangelog = changelog_hash
 		prefs.save_preferences()

code/modules/vueui/ui.dm

@@ -172,13 +172,7 @@ main ui datum.
   * @return nothing
   */
 /datum/vueui/proc/send_resources_and_assets(var/client/cl)
-#ifdef UIDEBUG
-	cl << browse_rsc(file("vueui/dist/app.js"), "vueui.js")
-	cl << browse_rsc(file("vueui/dist/app.css"), "vueui.css")
-#else
-	var/datum/asset/assets = get_asset_datum(/datum/asset/simple/vueui)
-	assets.send(cl)
-#endif
+	send_theme_resources(cl)
 	for(var/asset_name in assets)
 		var/asset = assets[asset_name]
 		if (!QDELETED(asset["img"]))