src/css/components/Sidebar.css

@@ -14,23 +14,20 @@
 }
 
 .sidebar-menu-item {
-    margin: 5px 0px 5px -20px;
+    margin: 5px;
-    padding: 10px 0px 10px 35px;
+    margin-right: 10px;
+    padding: 10px;
     background-color: var(--dark-blue);
     color: var(--text-primary);
     border-radius: 6px;
     text-decoration: none;
     font-weight: bold;
-    border-radius: 0;
-    border-color: var(--color-primary);
-    width: calc(100% + 40px);
 }
 .sidebar-menu-item.active {
+    opacity: .75;
     border-right: solid 3px var(--color-primary);
+    width: calc(100% + 15px);
     border-radius: 0;
-    box-shadow: 0px 0px 12px #00000070;
-    transition: ease-in-out 0.05s;
-    font-size: 1.61rem;
 }
 .active {
     background-color: var(--light-blue);

src/css/index.css

@@ -18,11 +18,6 @@
   --font-family-mono: monaco, "Consolas", "Lucida Console", monospace;
 }
 
-a:hover:not(.button){
-  opacity: 1 !important;
-  color: #C4C4C4;
-}
-
 details[open] summary ~ * {
   animation: sweep .15s ease-in-out;
 }
@@ -73,7 +68,7 @@ body{
 }
 
 .pageTitle{
-  margin: 4px;
+  margin: 0;
 }
 
 .flex {

src/css/pages/Users.css

@@ -50,6 +50,3 @@ li input {
 .tree > li:first-child:before {
     display: none;
 }
-.tree input{
-    width: 60px;
-}

src/pages/Users.js

@@ -8,7 +8,7 @@ import { Table, TableListEntry } from "../components/Table";
 const Permission = ({name, value}) => {
     return <li className="flex is-vertical-align">
         <label>{name}</label>
-        <input max={10} min={0} type='number' defaultValue={value}></input>
+        <input max={10} min={0} type='number' style={{maxWidth: '60px'}} defaultValue={value}></input>
     </li>;
 };