update main.css -- focus on dashboard.html and storage.html.

static/css/main.css

@@ -32,27 +32,44 @@ a:hover {
   /* text-decoration: underline; */
 }
 
+input[type=file],
+input[type=text] {
+    border: 1px solid silver;
+    border-radius: 8px;
+    margin: 0px;
+    padding: 4px;
+    display: inline-block;
+}
+
 #main {
   text-align: center;
 }
 
+.be-gui-link ,
+.be-gui-button,
+.be-gui-link-no-text,
+.be-gui-button-no-text {
+    background: #905da1;
+}
+.be-gui-link-no-text {
+    width: 40px;
+    height: 40px;
+}
+
 .be-gui-button-no-text {
     width: 44px;
     height: 44px;
-    padding: 2px;
+}
-    border-radius: 22px;
+
-    background: #473951;
+.be-gui-link-no-text img,
-    border: none;
+.be-gui-button-no-text img {
-    color: white;
+    width: 32px;
 }
 
 .be-gui-link-no-text,
-.be-section-entry .be-gui-button-no-text {
+.be-gui-button-no-text {
-    width: 44px;
+    padding: 4px;
-    height: 44px;
-    padding: 2px;
     border-radius: 8px;
-    background: #905da1;
     border: none;
     color: white;
     display: flex;
@@ -61,26 +78,39 @@ a:hover {
     margin: 4px;
 }
 
-.be-section-entry .be-gui-button-no-text {
+.be-gui-link,
-    padding: 24px;
-}
-
-.be-gui-link-no-text img,
-.be-section-entry .be-gui-button-no-text img {
-    width: 36px;
-}
-
 .be-gui-button {
-    max-width: 100px;
+    padding: 0px;
+    width: 100%;
     height: 36px;
     padding: 8px 12px;
-    border-radius: 6px;
-    background: #473951;
     border: none;
+    max-width: 600px;
     color: white;
     display: flex;
+    justify-content: flex-start;
     align-items: center;
-    font-size: 18px;
+    border-radius: 6px;
+    max-width: initial;
+    text-decoration: none;
+}
+
+.be-gui-link:hover ,
+.be-gui-button:hover,
+.be-gui-link-no-text:hover,
+.be-gui-button-no-text:hover {
+    background: #473951;
+}
+
+.be-gui-link img,
+.be-gui-button img {
+    width: 34px;
+    padding: 5px;
+    margin-right: 12px;
+}
+
+.be-section-entry .be-gui-button-no-text {
+    padding: 24px;
 }
 
 .be-gui-button p {
@@ -115,7 +145,7 @@ a:hover {
     align-items: center;
     font-size: 18px;
     margin: 0px 4px;
-    padding: 0px 12px;
+    padding: 6px 12px;
     border-radius: 6px;
 }
 
@@ -169,8 +199,27 @@ a:hover {
 .be-site-side-menu div {
     display: flex;
     flex-direction: column;
-    padding: 12px 0px;
+    padding: 0px;
-    margin: 0px 12px;
+    margin: 12px;
+}
+
+.be-site-side-menu .be-gui-link,
+.be-site-side-menu .be-gui-button {
+    padding: 8px;
+    margin: 0px;
+    width: auto;
+    background: #473951;
+}
+
+.be-site-side-menu .be-gui-button {
+    padding: 28px 8px;
+    width: 276px;
+    font-size: 16px;
+}
+
+.be-site-side-menu .be-gui-link:hover,
+.be-site-side-menu .be-gui-button:hover {
+    background: #905da1;;
 }
 
 .be-main {
@@ -182,34 +231,6 @@ a:hover {
     margin: 0px auto;
 }
 
-.be-gui-link,
-.be-gui-button {
-    padding: 0px;
-    width: 100%;
-    max-width: 600px;
-    color: white;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    border-radius: 6px;
-    max-width: initial;
-    text-decoration: none;
-}
-
-.be-gui-link:hover ,
-.be-gui-button:hover,
-.be-site-header button:hover {
-    background: #905da1;
-}
-
-.be-gui-link img,
-.be-gui-button img {
-    width: 34px;
-    padding: 5px;
-    margin-right: 12px;
-}
-
-
 .be-dashboard-header {
     display: flex;
     flex-direction: column;
@@ -315,6 +336,76 @@ a:hover {
     margin: 6px 0px;
 }
 
+.be-dashboard-section-quicklist {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.be-dashboard-section-quicklist .be-gui-link {
+    max-width: 110px;
+    margin: 4px;
+}
+
+.be-dashboard-section-quicklist .be-gui-link img {
+    margin-right: 0px;
+}
+
+.be-storage-section {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.be-storage-section-upload {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-bottom: 12px;
+}
+
+.be-storage-section-upload form  {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+}
+
+.be-storage-section-upload form [type=file]  {
+    padding: 10px 12px;
+}
+
+.be-storage-entry {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.be-storage-entry .file-thumbnail {
+    max-width: 50px;
+    max-height: 50px;
+    width: 100%;
+}
+
+.be-storage-rename {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+}
+
+.be-storage-rename input[type=text] {
+    width: 100%;
+    height: 30px;
+}
+
+/* .be-storage-rename .be-gui-button-no-text { */
+/*     width: 58px; */
+/* } */
+
 .fe-site-header {
     display: flex;
     flex-direction: row;