feat(character): made responsive

static/css/character-talents.css

@@ -41,6 +41,7 @@
 	left: 30px;
 	font-size: 14px;
 	padding: 0px 2px;
+	z-index: 4;
 }
 
 .iconmedium.empty::after {

static/css/character.css

@@ -1,27 +1,22 @@
-#item-slot-template,
-#mount-template {
-	display: none;
-}
-
-.iconlarge .inventory-slot {
-	width: 56px;
-	height: 56px;
-	left: 6px;
-	top: 6px;
-	position: absolute;
-	background-repeat: no-repeat;
-	z-index: 1;
-}
-
 .wowhead-tooltip .whtt-sellprice {
 	display: none;
 }
 
-#mounts {
-	max-width: 400px;
+#model-container,
+#equipment-bottom {
+	display: flex;
+	justify-content: center;
 }
 
-#char-options td {
-	vertical-align: top;
-	padding-right: 32px;
+#equipment-col-left,
+#equipment-col-right {
+	display: flex;
+	flex-direction: column;
+}
+
+#model,
+#model canvas {
+	touch-action: none;
+	height: 100% !important;
+	width: 100% !important;
 }

static/css/icons.css

@@ -13,6 +13,7 @@
 	top: 4px;
 	position: absolute;
 	background-repeat: no-repeat;
+	z-index: 2;
 }
 
 .iconmedium .border {
@@ -29,12 +30,23 @@
 	position: absolute;
 	left: 3px;
 	top: 3px;
+	z-index: 3;
 }
 
 .iconmedium a:hover {
 	background-position: 0 0;
 }
 
+.iconmedium .inventory-slot {
+	width: 36px;
+	height: 36px;
+	left: 4px;
+	top: 4px;
+	position: absolute;
+	background-repeat: no-repeat;
+	z-index: 1;
+}
+
 .iconlarge {
 	width: 68px;
 	height: 68px;
@@ -74,6 +86,16 @@
 	background-position: 0 0;
 }
 
+.iconlarge .inventory-slot {
+	width: 56px;
+	height: 56px;
+	left: 6px;
+	top: 6px;
+	position: absolute;
+	background-repeat: no-repeat;
+	z-index: 1;
+}
+
 .iconmedium a,
 .iconlarge a {
 	transition: none;