update main.css (back-end dashboard buttons and gui-links).

static/css/main.css

@@ -46,6 +46,30 @@ a:hover {
     color: white;
 }
 
+.be-gui-link-no-text,
+.be-section-entry .be-gui-button-no-text {
+    width: 44px;
+    height: 44px;
+    padding: 2px;
+    border-radius: 8px;
+    background: #905da1;
+    border: none;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 4px;
+}
+
+.be-section-entry .be-gui-button-no-text {
+    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;
     height: 36px;
@@ -115,7 +139,6 @@ a:hover {
 
 .be-user-info span {
     font-weight: normal;
-    color: silver;
 }
 
 .be-site-side-menu {
@@ -150,10 +173,20 @@ a:hover {
     margin: 0px 12px;
 }
 
-.be-site-side-menu .be-gui-link,
-.be-site-side-menu .be-gui-button {
+.be-main {
+    max-width: 880px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    margin: 0px auto;
+}
+
+.be-gui-link,
+.be-gui-button {
     padding: 0px;
     width: 100%;
+    max-width: 600px;
     color: white;
     display: flex;
     justify-content: flex-start;
@@ -163,19 +196,125 @@ a:hover {
     text-decoration: none;
 }
 
-.be-site-side-menu .be-gui-link:hover ,
-.be-site-side-menu .be-gui-button:hover,
+.be-gui-link:hover ,
+.be-gui-button:hover,
 .be-site-header button:hover {
     background: #905da1;
 }
 
-.be-site-side-menu .be-gui-link img,
-.be-site-side-menu .be-gui-button img {
+.be-gui-link img,
+.be-gui-button img {
     width: 34px;
     padding: 5px;
     margin-right: 12px;
 }
 
+
+.be-dashboard-header {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    justify-content: space-between;
+    padding: 0px;
+    margin: 0px;
+}
+
+.be-dashboard-header .profile-cat {
+    height: 75px;
+}
+
+.be-dashboard-header div {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    margin: 0px;
+}
+
+.be-dashboard-header .be-gui-link,
+.be-dashboard-section .be-gui-link {
+    background: #905da1;
+    /* margin-right: 12px; */
+}
+
+.be-dashboard-header .be-gui-link:hover,
+.be-dashboard-section .be-gui-link:hover{
+    background: #473951;
+}
+
+.be-dashboard-section {
+    display: flex;
+    flex-direction: column;
+    margin: 0px;
+    padding: 0px;
+}
+
+.be-dashboard-section form input[type=file] {
+    border: 1px solid silver;
+    border-radius: 8px;
+    margin: 4px 4px 4px 0px;
+    padding: 12px;
+    display: inline-block;
+}
+
+.be-dashboard-section h2 {
+    margin: 20px 0px 20px 0px;
+    padding: 0px;
+}
+
+.be-section-controls {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.be-section-controls .be-gui-link {
+    max-width: 175px;
+}
+
+.be-section-entries {
+    display: flex;
+    flex-direction: column;
+    border-top: 1px solid black;
+}
+
+.be-section-entry {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    border-bottom: 1px solid black;
+}
+
+.be-section-entry form {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin: 0px;
+}
+
+.be-section-entry p {
+    max-width: 800px;
+    white-space: nowrap;
+    overflow-x: clip;
+    text-overflow: ellipsis;
+    /* font-weight: bold; */
+    
+}
+
+.be-section-entry:hover {
+    background: #fff6d2;
+}
+
+.be-entry-controls {
+    display: flex;
+    flex-direction: row;
+}
+
+.be-dashboard-section-list .be-gui-link {
+    margin: 6px 0px;
+}
+
 .fe-site-header {
     display: flex;
     flex-direction: row;
@@ -191,7 +330,7 @@ a:hover {
 }
 
 #fe-main {
-
+    margin: 8px;
 }
 
 /* big landscape tablets, laptops, and desktops */