ADD: Workshop collection management screen override

css/steamcommunity.com/managecollection.css

@@ -0,0 +1,226 @@
+.manageCollectionItemsBody {
+	margin-top: 24px;
+}
+
+.item-list-master-container {
+	display: flex;
+}
+
+.item-list-container {
+	border: 1px solid #66C0F4;
+	padding: 15px;
+	flex: 1 1 0;
+}
+
+.button-divider {
+	align-self: center;
+}
+
+.button-divider .es-btn {
+	display: block;
+
+	height: 32px;
+	width: 32px;
+	margin: 8px;
+
+	color: #A4D7F5;
+	border: 1px solid #22648A;
+	background: linear-gradient(to bottom, rgba(33,101,138,1) 5%, rgba(23,67,92,1) 95%);
+	border-radius: 3px;
+}
+
+.button-divider .es-btn span {
+	font-size: 200%;
+	display: block;
+	text-align: center;
+}
+
+.button-divider .es-btn:hover {
+	background: linear-gradient(to bottom, rgba(102,192,244,1) 5%, rgba(47,137,188,1) 95%);
+}
+
+.item-list-container:not(:first-child) { margin-left: 4px; }
+.item-list-container:not(:last-child) { margin-right: 4px; }
+
+.managedCollectionItem {
+	width: auto !important;
+}
+
+.item-list {
+	list-style: none;
+	height: 600px;
+	margin: 0;
+	padding: 0;
+	overflow-y: scroll;
+	overflow-x: hidden;
+	user-select: none;
+}
+
+.item-list li {
+	background-color: rgba( 84, 133, 183, 0.2);
+	border: 1px solid transparent;
+	margin: 4px 4px 4px 0;
+	padding: 6px 12px 10px;
+	cursor: pointer;
+}
+
+.item-list li .item-author,
+.item-list li .item-title {
+	color: #FFF;
+}
+
+.item-list li .item-title {
+	display: block;
+	font-size: 16px;
+}
+
+.item-list li.item-selected {
+	background-color: rgba( 84, 133, 183, 0.4);
+	border-color: #66C0F4;
+}
+
+
+.dim-text {
+	color: #A9A9A9;
+}
+
+[data-list-in-collection="true"] ul li {
+	position: relative;
+    padding-left: 50px; /* Space for drag icon */
+	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAAilBMVEX////MzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMx4hUDnAAAALXRSTlMAAggMEhUWGRocHSIoNT5ETmFkda3BycrLzM7R1dne4eLm5+jp7/Dx+fr7/P2FwlUzAAAAmklEQVR42u3Qyw6CMBQE0LE8WigICPgAikJVRO3//54xgbgwhuvORM5mZjkZzGZf8Q8+qOzc5DZo3KLrusIFBS/18rjUJQdBXHnsyrwqBsECEL14Jg27MExJVoPUpGNN8IHaD+p1PVaF3/bavHnbTHxjCusZyMRNgCbMHOtuOVkIAt7u5FluWw4KqdVJaQmaoDFNAKrIRJj9uwcl8w5nWVSJbQAAAABJRU5ErkJggg==);
+	background-position: 1px;
+	background-repeat: no-repeat;
+}
+
+[data-list-in-collection="true"] ul li:not(.drag-destination):not(.loading-overlay)::after {
+    content: " ";
+    display: block;
+    position: absolute;
+    background: transparent;
+    width: 46px;
+    height: 48px;
+    top: 0;
+    left: 0;
+	cursor: row-resize;
+}
+
+[data-list-in-collection="true"] ul li.drag-destination {
+	position: relative;
+	padding: 0;
+    height: 1px;
+    background: #B2BCC7;
+
+	margin-top: 8px;
+    margin-bottom: 8px;
+}
+
+[data-list-in-collection="true"] ul li.drag-destination::before,
+[data-list-in-collection="true"] ul li.drag-destination::after {
+	content: " ";
+	display: block;
+	position: absolute;
+
+	border: 10px solid #B2BCC7;
+    border-top-color: transparent;
+    border-left-color: transparent;
+
+	top: 50%;
+}
+
+[data-list-in-collection="true"] ul li.drag-destination::before {
+    transform: translateY(-50%) rotate(-45deg);
+	left: -11px;
+}
+
+[data-list-in-collection="true"] ul li.drag-destination::after {
+    transform: translateY(-50%) rotate(135deg);
+	right: -11px;
+}
+
+
+.item-filter-input {
+	width: 100%;
+	box-sizing: border-box;
+	margin-bottom: 12px;
+	padding: 6px;
+
+	/* Copied from Steam input[type="text"] so that this works for input[type="search"] */
+	color: #909090;
+    background-color: rgba( 0, 0, 0, 0.2 );
+    border: 1px solid #000;
+    box-shadow: 1px 1px 0 0 rgba( 91, 132, 181, 0.2 );
+    border-radius: 3px;
+}
+
+
+/* --------------- */
+/* Loading spinner */
+/* --------------- */
+.loading-overlay { 
+	position: relative;
+}
+
+.loading-overlay::before, .loading-overlay::after {
+	content: " ";
+	display: block;
+	position: absolute;
+}
+
+.loading-overlay::before {
+	top: 0; bottom: 0;
+	left: 0; right: 0;
+	background-color: rgba(0, 0, 0, 0.6);
+}
+
+.loading-overlay::after {
+	top: 50%; left: 50%;
+	width: 14px; height: 14px;
+
+	border-radius: 50%;
+	border: 3px solid #FFF;
+	border-bottom-color: transparent;
+
+	animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+	0% { transform: translate(-50%, -50%) rotate(0deg); }
+	100% { transform: translate(-50%, -50%) rotate(360deg); }
+}
+
+/* --------- */
+/* Scrollbar */
+/* --------- */
+.item-list::-webkit-scrollbar {
+	width: 13px;
+	height: 13px;
+}
+.item-list::-webkit-scrollbar-button {
+	width: 0px;
+	height: 0px;
+}
+.item-list::-webkit-scrollbar-thumb {
+	background: #aeb1b7;
+	border: 0px none #ffffff;
+	border-radius: 0px;
+}
+.item-list::-webkit-scrollbar-thumb:hover {
+	background: #cfd2d8;
+}
+.item-list::-webkit-scrollbar-thumb:active {
+	background: #d1d3d8;
+}
+.item-list::-webkit-scrollbar-track {
+	background: #1b2838;
+	border: 0px none #ffffff;
+	border-radius: 0px;
+}
+.item-list::-webkit-scrollbar-track:hover {
+	background: #1b2838;
+}
+.item-list::-webkit-scrollbar-track:active {
+	background: #26384f;
+}
+.item-list::-webkit-scrollbar-corner {
+	background: transparent;
+}

js/options.js

@@ -147,6 +147,7 @@ var settings_defaults = {
 	"profile_custom_name": "Google",
 	"profile_custom_url": "google.com/search?q=[ID]",
 	"profile_custom_icon": "www.google.com/images/branding/product/ico/googleg_lodp.ico",
+	"overrideworkshopcollection": true,
 	"steamcardexchange": true,
 	"purchase_dates": true,
 	"add_wallet_balance": true,