From 232542ef4b073803e3151cb335c24e125a84ea0c Mon Sep 17 00:00:00 2001 From: nsensfel Date: Tue, 9 Jan 2018 12:38:24 +0100 Subject: Reorganizes the CSS. --- src/battlemap/www/style.css | 163 ++++++++++++++++++++++++-------------------- 1 file changed, 88 insertions(+), 75 deletions(-) (limited to 'src') 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; -} -- cgit v1.2.3-70-g09d2