Cleanup CSS

FossilOrigin-Name: 5b0b2a45cdf060c6603cd0cfee5d9362fa2ad02fdf6c692eb97c814717362b07

dist/treebird20.css

@@ -1,9 +1,26 @@
+
+
+/* Look, I tried my best to make this theme compatible with browsers like Netsurf and stuff, I HATE
+   the modern web and flexboxes and stuff, so as a result, you WILL see some fugly things in here
+   that you will probably want to cleanup or throw out completely, this CSS is a big hack. 
+
+   Other themes do not need to be compatible with Netsurf and older browsers or use tables,
+   I just wanted this to be as compatible as possible, go wild with your own themes */
+
 body
 {
     font-family: Arial, Helvetica, sans-serif;
     background-color: #f6f6f6;
 }
 
+/* Cleans up most of the tables */
+td
+{
+    padding: 0;
+    margin: 0;
+    border-collapse: collapse !important;
+    vertical-align: top;
+}
 
 #display
 {
@@ -30,14 +47,14 @@ body
 #navbar img
 {
     display: inline-block;
-    margin: 2px 2px 2px 8px;
+    margin: 4px 3px 2px 10px;
 }
 
 #navbar span.info
 {
     margin-left: 15px;
     color: #202020;
-    font-variant: small-caps;
+    /* font-variant: small-caps; */
     font-size: 28px;
 }
 
@@ -70,7 +87,6 @@ body
     max-width: 640px !important;
     min-width: 640px;
     overflow: hidden;
-    min-height: 600px;
     border-collapse: collapse !important;
     padding: 0;
 }
@@ -78,16 +94,13 @@ body
 #content
 {
     border-collapse: collapse !important;
-}
-
-td
-{
-    vertical-align: top;
+    min-height: 600px;
 }
 
 .sidebar
 {
     width: 180px;
+    min-height: 600px;
     max-width: 180px;
     min-width: 180px;
     background-color: #fcfcfc;
@@ -195,7 +208,13 @@ ul li:first-child a.sidebarbtn
 {
     width: 56px;
     border-collapse: collapse !important;
-    padding: 0;
+    padding: 6px;
+}
+
+.pfp-td img
+{
+    border-radius: 3px;
+
 }
 
 .status tr
@@ -206,12 +225,16 @@ ul li:first-child a.sidebarbtn
 
 .status .status-info
 {
-    display: flex;
     margin: 0 5px 0px;
     min-width: 0;
-    flex-direction: column;
     width: auto;
-    padding: 0;
+    padding: 5px 5px 0 5px;
+    display: flex;
+}
+
+.status .status-info > table
+{
+    width: 100%;
 }
 
 .status .status-info table, .status .status-info td, .status .status-info tr
@@ -225,7 +248,7 @@ ul li:first-child a.sidebarbtn
 {
     font-style: italic;
     text-decoration: none;
-    margin: 0 4px;
+    margin: 0 4px 0 6px;
     font-size: 14px;
     padding-top: 1px;
 }
@@ -233,6 +256,9 @@ ul li:first-child a.sidebarbtn
 .status .poster-stats
 {
     display: flex;
+    /* To maintain compatibility while keeping it a flexbox, we have to 
+     * hardcode the width, sorry! Tables are just weird and I hate CSS */
+    max-width: 550px;
 }
 
 .status .username
@@ -240,6 +266,7 @@ ul li:first-child a.sidebarbtn
     font-weight: bold;
     text-overflow: ellipsis;
     overflow: hidden;
+    min-width: 0;
     white-space: nowrap;
 }
 
@@ -257,12 +284,14 @@ ul li:first-child a.sidebarbtn
 .status-visibility
 {
     color: #808080;
+    display: inline;
+    font-size: 12px;
+    margin: 3px 0 0 3px;
 }
 
 .status-interact
 {
     margin: 8px 0 0 0;
-    display: flex;
 }
 
 .status-interact table
@@ -534,9 +563,6 @@ ul li:first-child a.sidebarbtn
 .attachments img
 {
     min-width: 100px;
-    max-width: 300px;
-    min-height: 100px;
-    max-height: 300px;
 }
 
 .attachments
@@ -546,12 +572,12 @@ ul li:first-child a.sidebarbtn
 
 .zoom
 {
-    transition: transform .1s;
-    transition-timing-function: cubic-bezier(0, 1, 1, 1);
 }
 
 .zoom:hover
 {
+    transition: transform .5s;
+    transition-timing-function: cubic-bezier(1, 0, 1, 0);
     transform: scaleX(1.8) scaleY(1.8);
 }