bring up to date, add better source scheme, remove localization edits

Author: Yogpod

html/css/Workshop.css

@@ -56,7 +56,7 @@ workshopicon name
 	color: #DDD;
 }
 
-workshopicon author, workshopicon votes
+workshopicon author, workshopicon votes, workshopicon size
 {
 	position: absolute;
 	bottom: 0px;
@@ -76,14 +76,20 @@ workshopicon author, workshopicon votes
 	padding: 3px 6px;
 
 }
+workshopicon size
+{
+	top: 22px;
+	bottom: auto;
+	border-radius: 0 0 0 4px;
+}
 
-workshopicon author
+workshopicon author, workshopicon size
 {
 	right: 0px;
 	-webkit-transition: right 100ms ease-out 200ms;
 }
 
-workshopicon:hover author
+workshopicon:hover author, workshopicon:hover size
 {
 	right: -200px;
 	-webkit-transition: right 100ms ease-in 0ms;
@@ -92,9 +98,15 @@ workshopicon:hover author
 workshopicon votes
 {
 	left: 0px;
+	color: #4a4;
 	-webkit-transition: left 100ms ease-out 200ms;
 }
 
+workshopicon votes.negative
+{
+	color: #a44;
+}
+
 workshopicon:hover votes
 {
 	left: -200px;
@@ -106,7 +118,6 @@ workshopicon votes
 	bottom: 0px;
 	right: inherit;
 	border-radius: 0 4px 0 0;
-	color: #DDD !important;
 }
 
 workshopicon description
@@ -118,10 +129,11 @@ workshopicon description
 	right: 0;
 	text-align: justify;
 	background-color: #777;
-	font-size: 12px;
+	font-size: 11px;
 	padding: 32px 8px;
 	color: #DDD;
 	cursor: default;
+
 	opacity: 0;
 	-webkit-transition: opacity 100ms ease-in 0ms;
 }
@@ -153,6 +165,13 @@ workshopmessage
 	margin: 64px;
 }
 
+@media screen and (max-height: 800px) {
+	workshopmessage
+	{
+		margin: 16px;
+	}
+}
+
 workshopcontainer
 {
 	position: absolute;
@@ -178,7 +197,7 @@ controls
 
 controls control
 {
-	font-size: 12px;
+	font-size: 11px;
 	display: inline-block;
 	background-color: #333;
 	padding: 2px 4px;
@@ -200,19 +219,149 @@ controls control:hover
 	background-color: #666;
 }
 
-pagnation
+.ugc_settings_button
+{
+	height: 44px;
+	width: 44px;
+
+	padding: 6px;
+	background: #666;
+	border-radius: 4px;
+	box-sizing: border-box;
+
+	position: absolute;
+	bottom: 4px;
+	right: 4px;
+	cursor: default;
+}
+.ugc_settings_button:hover
+{
+	background: rgb(33, 33, 33);
+}
+
+.ugc_settings
+{
+	width: 100%;
+
+	padding: 10px;
+	background: rgb(33, 33, 33);
+
+	z-index: 128;
+	position: absolute;
+	bottom: 52px;
+	left: 0;
+	box-sizing: border-box;
+
+	visibility: hidden;
+	overflow: hidden;
+}
+.ugc_settings.active
+{
+	visibility: visible;
+}
+
+.ugc_settings span
+{
+	display: block;
+	font-weight: bold;
+}
+.ugc_settings label
+{
+	position: relative;
+	top: -2px;
+}
+
+.ugc_settings a
 {
-	background-color: #222;
+	font-weight: bold;
+	color: #000;
+	padding: 4px 15px;
+	background: rgb(90, 90, 90);
+	display: block;
+	margin-top: 2px;
+	text-align: center;
+	border-radius: 4px;
+	cursor: default;
+}
+.ugc_settings a:hover
+{
+	colo2r: #ff7;
+	background: rgb(151, 15, 15);
+}
+
+.ugc_settings_cat
+{
+	vertical-align: top;
+	display: inline-block;
+	color: rgb(252, 252, 252);
+	padding: 0px 1%;
+	margin: 0 auto;
+}
+
+.create_preset
+{
+	min-width: 350px;
+}
+
+.preset_content
+{
+	min-width: 500px;
+	margin-bottom: 5px;
+}
+.preset_list
+{
+	background: rgb(58, 58, 58, 255);
+	width: 150px;
+	display: inline-block;
+	max-height: 400px;
+	min-height: 230px;
+	overflow-y: scroll;
+	overflow-x: hidden;
+}
+.preset_list font
+{
+	display: block;
+	padding: 5px;
+	cursor: default;
+}
+.preset_list font:hover
+{
+	background: #ddd;
+}
+.preset_list font.active
+{
+	background: #ccc;
+}
+.preset_data
+{
+	width: 345px;
+	padding-left: 5px;
+	display: inline-block;
+	vertical-align: top;
+	cursor: default;
+}
+
+pagination
+{
+	background-color: rgb(36, 36, 36);
 	border-radius: 4px;
 	margin: 0 auto;
 	padding: 4px 4px;
-	white-space: nowrap;
-	margin-left: 10%;
-	margin-right: 10%;
+	/*white-space: nowrap;*/
+	max-width: 500px;
+	z-index: 64; /* Ensure it is above other elements in case something goes wrong */
 }
 
+@media screen and (max-width: 840px)
+{
+	pagination
+	{
+		margin: 0;
+		margin-right: 48px;
+	}
+}
 
-pagnation .back, pagnation .next
+pagination .back, pagination .next
 {
 	display: block;
 	float: left;
@@ -224,49 +373,66 @@ pagnation .back, pagnation .next
 	background-position: center center;
 }
 
-pagnation .next
+pagination .next
 {
 	float: right;
 	background-image: url('../img/arrow_right.png');
 }
 
-workshopicon.installed
+pagination .pages
 {
-	border-color: #676;
+	overflow: hidden;
+	margin-top: 6px;
 }
 
-workshopicon.installed name
+pagination span.pagenum
 {
-	background-color: #676;
+	font-size: 14px;
 }
-
-workshopicon.installed author
+pagination a.page
 {
-	background-color: #676;
+	opacity: 0.5;
+}
+pagination a.page.active
+{
+	opacity: 1;
 }
 
-workshopicon.installed votes
+workshopicon.installed
+{
+	border-color: #676;
+}
+workshopicon.installed name, workshopicon.installed author, workshopicon.installed votes, workshopicon.installed size
 {
-	background-color: #676;
+	background: #676;
 }
 
 workshopicon.disabled
 {
 	border-color: #766;
 }
-
-workshopicon.disabled name
+workshopicon.disabled name, workshopicon.disabled author, workshopicon.disabled votes, workshopicon.disabled size
 {
-	background-color: #766;
+	background: #766;
 }
 
-workshopicon.disabled author
+workshopicon.invalid
+{
+	border-color: #d22;
+}
+workshopicon.invalid name, workshopicon.invalid author, workshopicon.invalid votes, workshopicon.invalid size
 {
-	background-color: #766;
+	background: #d22;
+	color: #fff;
 }
 
-workshopicon.disabled votes
+workshopicon.invalid.disabled
+{
+	border-color: #922;
+}
+workshopicon.invalid.disabled name, workshopicon.invalid.disabled author, workshopicon.invalid.disabled votes, workshopicon.invalid.disabled size
 {
-	background-color: #766;
+	background: #922;
+	color: #766;
 }