Create attractive VASL scenarios, with loads of useful information embedded to assist with game play.
https://vasl-templates.org
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
89 lines
3.0 KiB
89 lines
3.0 KiB
* { margin: 0 ; padding: 0 }
|
|
html { height: 100% ; }
|
|
body { height: 100% ; }
|
|
|
|
/* -------------------------------------------------------------------- */
|
|
|
|
#tabs {
|
|
display: none ;
|
|
position: absolute ; top: 5px ; bottom: 5px ; left: 5px ; right: 5px ;
|
|
}
|
|
|
|
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
|
|
|
|
#tabs-scenario {
|
|
display: grid ; display: -ms-grid ;
|
|
grid-template-rows: 2fr 3fr ; -ms-grid-rows: 2fr 3fr ;
|
|
grid-template-columns: 25em 1fr ; -ms-grid-columns: 25em 1fr ;
|
|
}
|
|
#panel-scenario {
|
|
height: 100% ;
|
|
grid-row-start: 1 ; -ms-grid-row: 1 ;
|
|
grid-row-end: 3 ; -ms-grid-row-span: 2 ;
|
|
}
|
|
#panel-vc {
|
|
-ms-grid-row: 1 ; -ms-grid-column: 2 ;
|
|
}
|
|
#panel-ssr {
|
|
height: 100% ;
|
|
-ms-grid-row: 2 ; -ms-grid-column: 2 ;
|
|
}
|
|
|
|
#tabs-ob1, #tabs-ob2 {
|
|
display: grid ; display: -ms-grid ;
|
|
grid-template-rows: 10em 1fr ; -ms-grid-rows: 10em 1fr ;
|
|
grid-template-columns: 1fr 1fr ; -ms-grid-columns: 1fr 1fr ;
|
|
}
|
|
#panel-obsetup1, #panel-obsetup2 {
|
|
grid-row-start: 1 ; -ms-grid-row: 1 ;
|
|
grid-column-start: 1 ; -ms-grid-row: 1 ;
|
|
}
|
|
#panel-obvehicles1, #panel-obvehicles2 {
|
|
height: 100% ;
|
|
grid-row-start: 1 ; -ms-grid-row: 1 ;
|
|
grid-row-end: 3 ; -ms-grid-row-span: 2 ;
|
|
-ms-grid-column: 2 ;
|
|
}
|
|
#panel-obordnance1, #panel-obordnance2 {
|
|
height: 100% ;
|
|
-ms-grid-row: 2 ; -ms-grid-column: 1 ;
|
|
}
|
|
|
|
#tabs-other {
|
|
display: grid ; display: -ms-grid ;
|
|
grid-template-rows: 1fr ; -ms-grid-rows: 1fr ;
|
|
grid-template-columns: 1fr ; -ms-grid-columns: 1fr ;
|
|
}
|
|
#panel-other {
|
|
height: 100% ;
|
|
}
|
|
|
|
fieldset { height: calc(100% - 30px) ; margin: 0 5px 5px 5px ; padding: 10px ; }
|
|
#tabs-other fieldset { border: none ; }
|
|
fieldset legend { padding: 0 0.2em 0 0.2em ; font-style: italic ; font-weight: bold ; }
|
|
|
|
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
|
|
|
|
.label { font-weight: bold ; }
|
|
input[type="text"] { margin-bottom: 0.25em ; }
|
|
|
|
#panel-scenario .form-grid {
|
|
display: grid ; display: -ms-grid ;
|
|
grid-template-columns: 5em 1fr ; -ms-grid-columns: 5em 1fr ;
|
|
}
|
|
#panel-scenario input[type="button"] { float: right ; }
|
|
/* FUDGE! IE hackamathon follows (nb: <label> doesn't work, we use <div> for labels instead :-/) */
|
|
#panel-scenario div[data-labelfor="scenario_name"] { -ms-grid-row: 1 ; -ms-grid-column: 1 ; }
|
|
#panel-scenario input[name="scenario_name"] { -ms-grid-row: 1 ; -ms-grid-column: 2 ; }
|
|
#panel-scenario div[data-labelfor="scenario_location"] { -ms-grid-row: 2 ; -ms-grid-column: 1 ; }
|
|
#panel-scenario input[name="scenario_location"] { -ms-grid-row: 2 ; -ms-grid-column: 2 ; }
|
|
#panel-scenario div[data-labelfor="scenario_date"] { -ms-grid-row: 3 ; -ms-grid-column: 1 ; }
|
|
#panel-scenario div.scenario_date { -ms-grid-row: 3 ; -ms-grid-column: 2 ; }
|
|
|
|
#panel-vc textarea[name="victory_conditions"] { width: calc(100% - 2px) ; height: calc(100% - 1.5em) ; resize: none ; }
|
|
#panel-vc input[type="button"] { float: right ; }
|
|
|
|
/* -------------------------------------------------------------------- */
|
|
|
|
.growl-title { display: none ; }
|
|
.growl ul { margin-left: 1em ; }
|
|
|