Restyled settings popup

less/mobile.less

@@ -52,3 +52,9 @@
   }
 }
 
+/*
+  SETTINGS POPUP
+*/
+#popupSettings {
+  margin: 2% 2%;
+}

less/mobile_settingspopup.less

@@ -1,14 +0,0 @@
-/*
-
-  SETTINGS POPUP - MOBILE
-
-*/
-#popupSettings {
-  width: 87%;
-  height: 82%;
-  margin: 6% 4%;
-
-  > .right {
-    width: 14%;
-  }
-}

less/popup.less

@@ -2,8 +2,6 @@
 
 #popupMask {
   background-color: rgba(255, 255, 255, 0.65);
-  // z-index: 20;
-  // border: 10px solid red;
   position: absolute;
   top: 0;
   left: 0;
@@ -16,18 +14,18 @@
 }
 
 .popup {
-	background-color: white;
+	background-color: #fff;
-	border: 2px solid black;
+	border: 2px solid #222;
 	border-radius: 15px;
-	top: 30%;	
+	box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
 	position: absolute;
 	left: 50%;
-  // margin-left: -@popup-width/2;
+	top:50%;
-  // width: @popup-width;
 }
 
 .popup .content {
-	margin: 5%;
+	/*margin: 5%;*/
+	margin: 15px;
 }
 
 .popup {
@@ -35,21 +33,26 @@
 }
 
 #popupWordArt {
-  width: 50%;
+  width: 330px;
-	margin-left: -50%/2;
+	height:210px;
+	margin-left: -165px;
+	margin-top: -105px;
 	
 	input[type="text"] {
-		width: 100%;
+		width: 98%;
 	}
 	#btnWordArtOk {
 		float: right;
-		margin: 15px 0 18px 0;
+		margin: 15px 0 0 0;
 	}
 }
 
 #popupShape {
-	width: 30%;
+	width: 310px;
-	margin-left: -30%/2;
+	margin-left: -155px;
+	height: 230px;
+	margin-top: -115px;
+	top: 50%;
 	
 	#shapePreview {
 		// width: 150px;

less/settingsPopup.less

@@ -4,27 +4,22 @@
 
 */
 #popupSettings {
-  background-color: #fff;
-  position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  z-index: 15;
+  //z-index: 15;
   max-width: 775px;
   max-height: 540px;
-  width: 80%;
+  //width: 80%;
-  height: 75%;
+  //height: 75%;
   margin: 7% 8%;
-  box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
-  border: 2px solid #222;
-  border-radius: 15px;
   padding: 2%;
 
   .toppanel {
     height: 10%;
 
-    #settingsLabelContainer {
+    /*#settingsLabelContainer {
       width: 100%;
       height: auto;
       margin-bottom: 1%;
@@ -34,6 +29,12 @@
         max-width: 373px;
         height: auto;
       }
+    }*/
+    .title {
+    	height: 100%;
+    	max-height: 44px;
+    	width: auto;
+    	margin: 0 0 1% 0;
     }
   }
   .bottompanel {

less/styles.less

@@ -14,7 +14,6 @@
         only screen and (max-width: 720px) and (min-device-pixel-ratio : 1.5),
         only screen and (max-width: 720px) and (-webkit-min-device-pixel-ratio : 1.5) {
   @import "mobile.less";
-  @import "mobile_settingspopup.less";
 }
 
 // FULL

www/index.html

@@ -142,9 +142,7 @@
 
   <div id="popupSettings" class="popup">
     <div class="toppanel">
-      <div id="settingsLabelContainer">
+      <img class="title" src="img/settings_title.png" alt="settings" />
-        <img id="settingsLabelImg" src="img/settings_lable.png" alt="settings" />
-      </div>
     </div>
     <div class="bottompanel">
       <div id="settingsContainer"></div>