Reorganizes the CSS.

1 files changed, 88 insertions, 75 deletions

diff --git a/src/battlemap/www/style.css b/src/battlemap/www/style.css
index c8d8fab..17dd289 100644
--- a/src/battlemap/www/style.css
+++ b/src/battlemap/www/style.css
@@ -1,3 +1,6 @@
+/******************************************************************************/
+/** LAYOUT ********************************************************************/
+/******************************************************************************/
 .battlemap-left-panel
 {
    flex-grow: 1;
@@ -14,6 +17,7 @@
    display: flex;
 }
 
+/** Left Panel ****************************************************************/
 .battlemap-container
 {
    flex-grow: 1;
@@ -23,6 +27,26 @@
    width: inherit;
 }
 
+.battlemap-footer
+{
+   max-height: 30%;
+
+   overflow-y: auto;
+   width: inherit;
+   word-wrap: break-word;
+   padding-bottom: 1em;
+}
+
+/*** Main View ****************************************************************/
+.battlemap-actual
+{
+   display: inline-block;
+   transform-origin: top left;
+}
+
+/******************************************************************************/
+/** RIGHT PANEL ***************************************************************/
+/******************************************************************************/
 .battlemap-side-bar
 {
    flex-grow: 1;
@@ -34,23 +58,78 @@
    flex-direction: column;
 }
 
-.battlemap-footer
+.battlemap-tabmenu
 {
-   max-height: 30%;
+   flex-grow: 1;
+   display: flex;
+   flex-direction: column;
+   flex-wrap: wrap;
+   width: inherit;
+}
 
-   overflow-y: auto;
+/** Tab Menu Specifics ********************************************************/
+.battlemap-tabmenu-selector
+{
+   display: flex;
+   flex-direction: row;
+   flex-wrap: wrap;
+   justify-content: space-between;
+}
+
+.battlemap-tabmenu-selector button
+{
+   flex: 1;
+}
+
+.battlemap-tabmenu-content
+{
+   flex: initial;
+}
+
+/** General *******************************************************************/
+.battlemap-side-bar-targets
+{
+   flex-grow: 1;
+   display: flex;
+   flex-direction: column;
+   flex-wrap: wrap;
    width: inherit;
-   word-wrap: break-word;
-   padding-bottom: 1em;
 }
 
-.battlemap-actual
+.battlemap-manual-controls
 {
-   display: inline-block;
-   transform-origin: top left;
+   max-height: 30%;
+   width: inherit;
+   flex: initial;
+
+   display: flex;
+   flex-direction: row;
+   flex-wrap: wrap;
 }
 
-/** Inside the container ******************************************************/
+/** Tabs **********************************************************************/
+
+/**** Characters Tab */
+.battlemap-tabmenu-characters-tab
+{
+   display: flex;
+   flex-direction: row;
+   flex-wrap: wrap;
+}
+
+.battlemap-character-portrait
+{
+   margin: 0.5em;
+   box-sizing: border-box;
+   border: 2px solid rgba(0,0,0,0.5);
+   border-radius: 25px 25px 0 25px;
+   width: 100px;
+   height: 100px;
+}
+
+/******************************************************************************/
+/** Main View Elements ********************************************************/
+/******************************************************************************/
 .battlemap-tiled
 {
    height: 32px;
@@ -149,69 +228,3 @@
 {
    content: "x";
 }
-
-/** Footer ********************************************************************/
-.battlemap-tabmenu
-{
-   flex-grow: 1;
-   display: flex;
-   flex-direction: column;
-   flex-wrap: wrap;
-   width: inherit;
-}
-
-.battlemap-side-bar-targets
-{
-   flex-grow: 1;
-   display: flex;
-   flex-direction: column;
-   flex-wrap: wrap;
-   width: inherit;
-}
-
-.battlemap-manual-controls
-{
-   max-height: 30%;
-   width: inherit;
-   flex: initial;
-
-   display: flex;
-   flex-direction: row;
-   flex-wrap: wrap;
-}
-/**** Tabmenu *****************************************************************/
-.battlemap-tabmenu-selector
-{
-   display: flex;
-   flex-direction: row;
-   flex-wrap: wrap;
-   justify-content: space-between;
-}
-
-.battlemap-tabmenu-selector button
-{
-   flex: 1;
-}
-
-.battlemap-tabmenu-content
-{
-   flex: initial;
-}
-
-/******************************************************************************/
-.battlemap-character-portrait
-{
-   margin: 0.5em;
-   box-sizing: border-box;
-   border: 2px solid rgba(0,0,0,0.5);
-   border-radius: 25px 25px 0 25px;
-   width: 128px;
-   height: 128px;
-}
-
-.battlemap-tabmenu-characters-tab
-{
-   display: flex;
-   flex-direction: row;
-   flex-wrap: wrap;
-}