summaryrefslogtreecommitdiff
path: root/src/battlemap/www/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'src/battlemap/www/style.css')
-rw-r--r--src/battlemap/www/style.css175
1 files changed, 90 insertions, 85 deletions
diff --git a/src/battlemap/www/style.css b/src/battlemap/www/style.css
index 4f56b76..dfbfdc4 100644
--- a/src/battlemap/www/style.css
+++ b/src/battlemap/www/style.css
@@ -1,7 +1,6 @@
/******************************************************************************/
/** LAYOUT ********************************************************************/
/******************************************************************************/
-
.fullscreen-module
{
display: grid;
@@ -21,13 +20,9 @@
flex-direction: row;
flex-wrap: wrap;
- border: 1px solid #502D16;
+ border: 3px solid #502D16;
border-top: none;
border-radius: 0 0 15px 15px;
- box-shadow:
- -1px 0px 2px #502D16,
- 1px 0px 2px #502D16,
- 0px 1px 2px #502D16;
padding: 0.5em;
@@ -41,13 +36,9 @@
grid-column: col 1 / span 3;
grid-row: row 3;
- border: 1px solid #502D16;
+ border: 3px solid #502D16;
border-radius: 15px 15px 0 0;
border-bottom: none;
- box-shadow:
- -1px 0px 2px #502D16,
- 1px 0px 2px #502D16,
- 0px -1px 2px #502D16;
padding: 0.5em;
margin: 0 1em 0 1em;
@@ -55,12 +46,7 @@
background-color: rgba(145,124,111,1);
}
-.battlemap-error
-{
- background-color: rgba(85,0,0,1);
-}
-/** Main Content **************************************************************/
.battlemap-container
{
grid-column: col 2;
@@ -74,13 +60,8 @@
margin: auto;
- border: 1px solid #502D16;
+ border: 3px solid #502D16;
border-radius: 15px;
- box-shadow:
- -1px 0px 2px #502D16,
- 1px 0px 2px #502D16,
- 0px -1px 2px #502D16,
- 0px 1px 2px #502D16;
}
.battlemap-controlled
@@ -91,18 +72,13 @@
display: flex;
flex-flow: column;
- align-items: center;
- justify-content: center;
+ justify-content: space-between;
padding: 0.5em;
- border: 1px solid #502D16;
+ border: 3px solid #502D16;
border-radius: 0 15px 15px 0;
border-left: none;
- box-shadow:
- 1px 0px 2px #502D16,
- 0px -1px 2px #502D16,
- 0px 1px 2px #502D16;
background-color: rgba(145,124,111,1);
}
@@ -115,103 +91,121 @@
padding: 0.5em;
overflow: auto;
- border: 1px solid #502D16;
+ border: 3px solid #502D16;
border-radius: 15px 0 0 15px;
border-right: none;
- box-shadow:
- -1px 0px 2px #502D16,
- 0px -1px 2px #502D16,
- 0px 1px 2px #502D16;
background-color: rgba(145,124,111,1);
}
-/*** Main View ****************************************************************/
-.battlemap-actual
+/******************************************************************************/
+/** HELP PANEL ****************************************************************/
+/******************************************************************************/
+.battlemap-error
{
- display: inline-block;
- transform-origin: top left;
-
- /*** Otherwise, it won't display correctly without 'transform: scale' ***/
- position: relative;
- background-color: rgba(145,124,111,1);
+ background-color: rgba(85,0,0,1);
}
-/******************************************************************************/
-/** RIGHT PANEL ***************************************************************/
-/******************************************************************************/
-.battlemap-side-bar
+.battlemap-manual-controls
{
- flex-grow: 1;
- overflow-y: auto;
+ max-height: 30%;
width: inherit;
- height: inherit;
- word-wrap: break-word;
+ flex: initial;
+
display: flex;
- flex-direction: column;
- padding: 0.5em;
- color: #FFEEAA;
- border-left: 1px solid #502D16;
- box-shadow: -1px 0px 2px #502D16;
+ flex-direction: row;
+ flex-wrap: wrap;
}
-.battlemap-tabmenu
+/******************************************************************************/
+/** CONTROLLED PANEL **********************************************************/
+/******************************************************************************/
+.battlemap-controlled-actions
{
- flex-grow: 1;
display: flex;
- flex-direction: column;
- flex-wrap: wrap;
- width: inherit;
+ flex-flow: row wrap;
+
+ align-items: center;
+ justify-content: center;
}
-/** Tab Menu Specifics ********************************************************/
-.battlemap-main-menu
+.battlemap-character-card
{
display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- justify-content: space-between;
+ flex-flow: column;
}
-.battlemap-main-menu button
+.battlemap-character-card-top
{
- flex: 1;
+ display: grid;
+ grid-template-columns: [col] auto [col] auto;
+ grid-template-rows: [row] 1fr [row] 1fr [row] 1fr;
- text-transform: uppercase;
+ align-items: center;
+ justify-content: left;
}
-.battlemap-tabmenu-content
+.battlemap-character-card-portrait
{
- flex: 1;
+ grid-column: col 1;
+ grid-row: row 1 / span 3;
}
-/** General *******************************************************************/
-.battlemap-side-bar-targets
+.battlemap-character-card-name
{
- flex-grow: 1;
- display: flex;
- flex-direction: column;
- flex-wrap: wrap;
- width: inherit;
+ grid-column: col 2;
+ grid-row: row 1;
+}
+
+.battlemap-character-card-health
+{
+ grid-column: col 2;
+ grid-row: row 2;
}
-.battlemap-float-left { float: left; }
-.battlemap-float-right { float: right; }
+.battlemap-character-card-weapon
+{
+ display: grid;
-.battlemap-manual-controls
+ border-radius: 5px;
+ background-color: #6C5D53;
+
+ padding: 0.3em;
+}
+
+.battlemap-character-card-stats
{
- max-height: 30%;
- width: inherit;
- flex: initial;
+ display: grid;
+ grid-template-columns: [col] 25% [col] 25% [col] 25% [col] 25%;
+ border-radius: 5px;
+ background-color: #6C5D53;
+
+ padding: 0.3em;
+ margin-top: 0.3em;
+}
+
+/******************************************************************************/
+/** MAIN MENU *****************************************************************/
+/******************************************************************************/
+.battlemap-main-menu
+{
display: flex;
flex-direction: row;
flex-wrap: wrap;
+ justify-content: space-between;
}
-/** Tabs **********************************************************************/
+.battlemap-main-menu button
+{
+ flex: 1;
+
+ text-transform: uppercase;
+}
-/**** Characters Tab */
+/******************************************************************************/
+/** SUB-MENU ******************************************************************/
+/******************************************************************************/
.battlemap-tabmenu-characters-tab
{
display: flex;
@@ -256,9 +250,20 @@
width: 36px;
height: 36px;
}
+
/******************************************************************************/
/** Main View Elements ********************************************************/
/******************************************************************************/
+.battlemap-actual
+{
+ display: inline-block;
+ transform-origin: top left;
+
+ /*** Otherwise, it won't display correctly without 'transform: scale' ***/
+ position: relative;
+ background-color: rgba(145,124,111,1);
+}
+
.battlemap-tiled
{
height: 32px;