styling settings

css/popup.css

@@ -30,6 +30,14 @@ body {
     border: 0px
 }
 
+.settingsbut:focus {
+    outline: 0;
+}
+
+ul{
+        margin-bottom: 20px;
+}
+
 .settings {
     position: absolute;
     bottom: 0;
@@ -37,7 +45,10 @@ body {
     float: right;
     display: flex;
     vertical-align: middle;
-    margin-right: 5px;
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+    transition: 0.3s;
+    padding: 7px 7px 5px 7px;
+    border-radius: 7px;
 }
 .matbut {
     border: none;
@@ -154,7 +165,7 @@ body {
 
 input{
     width: 80px;
-    font-weight: bold;
+    border-radius: 5px;
 }
 input[type=number]::-webkit-inner-spin-button, 
 input[type=number]::-webkit-outer-spin-button { 
@@ -163,3 +174,32 @@ input[type=number]::-webkit-outer-spin-button {
     appearance: none;
     margin: 0; 
 }
+
+::placeholder{
+    color:#ff691a;
+}
+
+.select-style {
+    border: 1.5px solid #ff691a;
+    width: 60px;
+    margin-right: 5px;
+    border-radius: 5px;
+    overflow: hidden;
+    display: none;
+    background: transparent no-repeat 90% 50%;
+}
+
+.select-style select {
+    padding: 5px 8px;
+    width: 130%;
+    border: none;
+    color:#ff691a;
+    box-shadow: none;
+    background: transparent;
+    background-image: none;
+    -webkit-appearance: none;
+}
+
+.select-style select:focus {
+    outline: none;
+}

js/popup.js

@@ -165,9 +165,11 @@ $(document).ready(function () {
 		if($("#impexp>i").text() == 'close'){
 			$('#import').hide();
 			$('#export').hide();
+			$("#impexp>i").css('font-size', '');
 			$("#impexp>i").text('import_export');
 		} else{
 			$("#impexp>i").text('close');
+			$("#impexp>i").css('font-size', '17px');
 			$('#import').show();
 			$('#export').show();
 		}
@@ -175,12 +177,16 @@ $(document).ready(function () {
 	$("#search").click(function(){
 		if($("#search>i").text() == 'close') {
 			$("#search>i").text('search');
+			$("#search>i").css('font-size', '');
 			$("#class_id").hide();
+			$("#semcon").hide();
 			$("#semesters").hide();
 		} else{
 			$("#search>i").text('close');
 			$("#class_id").show();
 			$("#semesters").show();
+			$("#search>i").css('font-size', '17px');
+			$("#semcon").show();
 		}
 	});
 	$('#import').click(function () {

popup.html

@@ -27,10 +27,12 @@
     <div style=" margin-bottom: 0px; display:inline-block"></div>
     <input type="file" id="importOrig" accept=".json" style="display:none"/>
     <div class="settings">
-      <select id="semesters" style="display: none;margin-right: 5px; border-color: #FF9800; margin-top: 3px;">
+      <div id='semcon' class="select-style">
+      <select id="semesters" style="display: none;margin-right: 5px; border-color: #ff691a; margin-top: 3px;">
       </select>
+    </div>
         <input type="text" id="class_id" name="class_id" maxlength="5" 
-         style="display:none;text-indent: 10px;border-style: solid; border-color: #FF9800;" placeholder="Unique #?"></input>
+         style="display:none;text-indent: 10px;border-style: solid; border-color:#ff691a;" placeholder="Unique #?"></input>
 
        <button title='Search' style="background-color:white;" class="settingsbut" id='search'>
           <i style='color:#FF9800' class="material-icons">
@@ -39,12 +41,12 @@
         </button>
 
      <button title='Import' style="background-color:white; display:none;" class="settingsbut" id='import'>
-          <i style='color:#FF9800' class="material-icons">
+          <i style='color:#ff691a'; class="material-icons">
             arrow_upward
           </i>
         </button>
         <button title='Export' style="background-color:white; display:none;" class="settingsbut"id='export'>
-          <i style='color:#FF9800' class="material-icons">
+          <i style='color:#ff691a' class="material-icons">
             arrow_downward
           </i>
         </button>