made small bar big

src/App.js

@@ -209,10 +209,7 @@ function TableEditor(p) {
 	},[update,p.path,p.BACKENDURL,p.password])
 	
 	return <>
-	{!loading?
-		<div>
-			<table>
-			  {importAllowed&&<caption><label className="buttonLabel" htmlFor="uploads">Import CSV</label><input onChange={(f)=>{
+	{!loading?<>			  {importAllowed&&<caption><label className="buttonLabel" htmlFor="uploads">Import CSV</label><input onChange={(f)=>{
 				const reader = new FileReader()
 				reader.onload=(ev)=>{
 					var promises=[]
@@ -231,6 +228,8 @@ function TableEditor(p) {
 				}
 				reader.readAsText(f.target.files[0])
 			  }} style={{opacity:0}} id="uploads" type="file" accept=".txt,.csv"/></caption>}
+		<div>
+			<table>
 			  <thead>
 				<tr>
 					<th className="table-padding"><TrashFill onClick={()=>{SubmitDeletion()}} className="trashButton"/></th>
@@ -245,7 +244,7 @@ function TableEditor(p) {
 						<InputBox lockSubmission={lockSubmission} data={dependencies[col.name]} callback={(value)=>patchValue(value,p,col,dat)} callback2={(f,value)=>{if (f.key==='Enter') {f.currentTarget.blur()} else {return 'Chill'}}} value={String(dat[col.name])}/></td>)}</tr>)}
 			  </tbody>
 			</table>
-		</div>:<><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/></>}
+		</div></>:<><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/></>}
 	</>
 }
 
@@ -446,7 +445,7 @@ function AdminPanel(p) {
 			<div className="box boxAdminContent">
 		<div className="boxTitleBar">
 		<h1>{nav.page}</h1></div>
-		<div className="adminContainer customScrollbar">
+		<div className="adminContainer adminScrollbar">
 		<Helmet>
 					<title>{APP_TITLE+" - Admin Panel: "+nav.page}</title>
 				</Helmet>

src/style.css

@@ -462,7 +462,7 @@ border-bottom: 1px solid rgba(128,128,128,0.5);
 	"img properties controls controls";
 }
 .itemWrapperActive {
-	background: linear-gradient(135deg,#60461b,#b0a34e);
+	background-color: rgba(255,192,0,0.25);
 	border-bottom: 4px solid #ffd602;
 }
 .itemImgWrapper {
@@ -608,6 +608,9 @@ li.selected:hover {
 	background-color: rgba(113,169,189,0.33);
 	outline: 2px solid rgba(54,255,255,0.66);
 }
+.itemWrapperActive:hover {
+	outline: 2px solid rgba(54,255,255,0.66);
+}
 .boxmenu {
 	font-size: 12pt;
 	margin: 0 10px 0 10px;
@@ -716,13 +719,17 @@ option {
 	width: 4px;
 	height: 4px;
 }
+.adminScrollbar::-webkit-scrollbar {
+	width: 16px;
+	height: 16px;
+}
 /* Track */
-.customScrollbar::-webkit-scrollbar-track {
+.customScrollbar::-webkit-scrollbar-track,.adminScrollbar::-webkit-scrollbar-track {
   background: rgba(128,128,128,0.8); 
 }
  
 /* Handle */
-.customScrollbar::-webkit-scrollbar-thumb {
+.customScrollbar::-webkit-scrollbar-thumb, .adminScrollbar::-webkit-scrollbar-thumb {
 	background-color: rgba(245, 245, 245,0.66);
 }
 .customScrollbar::-webkit-scrollbar-button {
@@ -730,7 +737,12 @@ option {
 	height:4px;
 	width:4px;
 }
-.customScrollbar::-webkit-scrollbar-corner  {
+adminScrollbar::-webkit-scrollbar-button {
+	background-color: rgba(162,162,162,0.8); 
+	height:16px;
+	width:16px;
+}
+.customScrollbar::-webkit-scrollbar-corner,.adminScrollbar::-webkit-scrollbar-corner  {
 	background-color: transparent;
 }
 /* Handle on hover
@@ -1007,16 +1019,16 @@ input#editBoxInput {
 	background-color:rgba(64,64,96,0.9);
 	color:rgba(210,210,210,1);
 }
-button{
+button {
+	cursor: pointer;
 	padding:0px 3px 0px 3px;
 	border: 1px black solid;
-	background-color:gray;
+	background-color: rgba(128,128,128,0.5);
 	color:white;
-    	font-family: ngs,sans-serif;
+    font-family: ngs,sans-serif;
 	font-size: 16px;
 	font-weight: normal;
 	text-align: center;
-   	 -webkit-font-smoothing: antialiased;
 	text-shadow: -1px 1px 0 #000,1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000;
 }
 .table-responsive{
@@ -1268,9 +1280,16 @@ p.adminNav hr {
 	margin: 10px 0;
 }
 .buttonLabel{
-	border: 2px solid black;
-	background:white;
-	color:black;
+	cursor: pointer;
+	padding:5px 10px;
+
+	background-color: rgba(128,128,128,0.5);
+	color:white;
+    font-family: ngs,sans-serif;
+	font-size: 16px;
+	font-weight: normal;
+	text-align: center;
+	text-shadow: -1px 1px 0 #000,1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000;
 }
 .react-toggle {
 	touch-action: pan-x;