Gave profile page a facelift in perperation for email/password update pop-ups.

www/css/global.css

@@ -65,7 +65,7 @@ input.control-prompt{
     flex: 1;
 }
 
-div.dynamic-container{
+div.dynamic-container, div.nested-dynamic-container{
     overflow: auto;
 }
 

www/css/profile.css

@@ -13,53 +13,96 @@ GNU Affero General Public License for more details.
 
 You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <https://www.gnu.org/licenses/>.*/
+#account{
+    display: flex;
+    margin-top: 2em;
+    justify-content: space-evenly;
+}
 
-p.profile-item-edit{
-    display: inline;
+#profile-div{
+    display: flex;
+    padding: 1em;
+    flex-direction: row;
+    overflow-y: hidden;
+}
+
+#profile-info{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex: 1;
+}
+
+#profile-info-aux{
+    flex: 2;
+    margin: 0 1em;
+}
+
+#account-settings-div{
+    display: flex;
+    flex-direction: column;
+    padding: 1em;
+}
+
+#account-settings-buttons{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    flex: 1;
+}
+
+#profile-username{
+    margin: 0;
+}
+
+#profile-img{
+    position: relative;
+}
+
+#profile-img-content{
+    margin: 1em 0;
+}
+
+#profile-img-prompt{
+    position: absolute;
+    left: -2em;
+    right: -2em;
+    top: calc(50% - 1.3em);
+}
+
+.profile-toke-count{
+    margin: 0;
 }
 
 span.profile-item{
-    display: block;
-    margin-top: 1em;
-    margin-bottom: 1em;
-}
-
-p.profile-item-label{
-    display: inline;
-}
-
-span.account-settings{
-    display: block;
-    margin-top: 1em;
-    margin-bottom: 1em;
-}
-
-input.account-settings-password-reset{
-    display: block;
-}
-
-a#account-settings-delete-button{
-    font-weight: bold;
-}
-
-span.profile-toke-count{
     display: flex;
     flex-direction: row;
     width: fit-content;
+    margin: 0.2em;
 }
 
-p.profile-toke-count{
+p.profile-item{
     margin: 0;
 }
 
+span.profile-item-oneliner{
+    text-wrap: nowrap
+}
+
+.profile-item-prompt{
+    display: none;
+}
+
 #profile-tokes{
     resize: vertical;
-    max-width: fit-content;
+    width: fit-content;
     height: fit-content;
     min-height: 1.5em;
     max-height: 5.8em;
-    display: none;
+    padding: 0.5em 0;
     border-bottom-right-radius: 0;
+    text-wrap: nowrap;
+    visibility: collapse;
 }
 
 /*Little hacky but this keeps initial max-height from fucking up resizing*/
@@ -69,4 +112,23 @@ p.profile-toke-count{
 
 .profile-toke{
     margin: 0.2em 1em;
+}
+
+#profile-bio-label{
+    margin-bottom: 0.2em;
+}
+
+#profile-bio-content{
+    width: 30VW;
+}
+
+#profile-bio-prompt{
+    width: 30VW;
+    height: 11em;
+    resize: vertical;
+}
+
+/* temp */
+input:not([type="checkbox"]):not(.navbar-item):not(.profile-item-prompt){
+    display: block;
 }

www/css/theme/movie-night.css

@@ -187,10 +187,23 @@ textarea{
 .dynamic-container{
     background-color: var(--bg1);
     color: var(--accent1);
+}
+
+.nested-dynamic-container{
+    border: 1px var(--accent1) solid;
+    background-color: var(--bg0);
+    color: var(--accent0);
+}
+
+.dynamic-container, .nested-dynamic-container{
     box-shadow: 3px 3px 1px var(--bg1-alt0) inset;
     border-radius: 1em;
 }
 
+.dynamic-container a{
+    color: var(--accent1);
+}
+
 
 tr{
     box-shadow: var(--accent1) 0px 1em 1px -2em, var(--accent1) 0px -1em 1px -1em;