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.
65 lines
3.6 KiB
65 lines
3.6 KiB
/* -------------------------------------------------------------------- */
|
|
|
|
#panel-scenario { display: flex ; flex-direction: column ; }
|
|
|
|
#panel-scenario .row { display: flex ; align-items: center ; }
|
|
#panel-scenario input { flex-grow: 1 ; }
|
|
#panel-scenario input[name='SCENARIO_ID'] { margin-left: 0.25em ; width: 80px ; flex-grow: 0 ; }
|
|
#panel-scenario #search-roar { width: 25px ; height: 22px ; margin: 0 0 0 0.25em ; padding: 0 ; margin-top:-4px; }
|
|
#panel-scenario #search-roar img { margin-top: 2px ; width: 16px ; }
|
|
#panel-scenario input[name='SCENARIO_DATE'] { width: 6em ; flex-grow: 0 ; }
|
|
|
|
#panel-scenario label[for='PLAYER_1'] { margin-top: 2px ; }
|
|
#panel-scenario label[for='PLAYER_2'] { margin-top: 2px ; }
|
|
|
|
#panel-scenario label { font-weight: bold ; width: 5em ; }
|
|
#panel-scenario label.header { font-weight: bold ; width: 3em ; text-align: center ; }
|
|
#panel-scenario input { margin-bottom: 0.25em ; }
|
|
|
|
#panel-scenario .select2-container { margin: 2px ; }
|
|
#panel-scenario .select2-selection__rendered { height: 24px ; margin-top: -3px ; }
|
|
#panel-scenario .select2-selection__arrow { margin-top: -3px ; }
|
|
#panel-scenario .select2-selection { height: 24px !important ; border-radius: 0 !important ; }
|
|
|
|
#panel-scenario .select2-container[name="SCENARIO_THEATER"] .select2-selection { height: 22px !important ; margin-top: -4px ;}
|
|
#panel-scenario .select2-container[name="SCENARIO_THEATER"] .select2-selection__arrow { margin-top: -6px ; }
|
|
|
|
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
|
|
|
|
#roar-info { position: relative ; margin-top: 0.75em ; border: 1px dotted #ccc ; border-radius: 3px ; padding: 0.5em ; background: #fcfcfc ; }
|
|
#roar-info .name { font-size: 90% ; }
|
|
#roar-info .count { font-size: 70% ; font-style: italic ; color: #666 ; }
|
|
#roar-info .progressbar { width: 4em ; height: 1em ; }
|
|
#roar-info .progressbar.player1 { background: #ffffcc ; border-top-right-radius: 0 ; border-bottom-right-radius: 0 ; border-right: 0 !important ; }
|
|
#roar-info .progressbar.player1 .ui-progressbar-value { background: #fff ; border-right: 1px solid #eee ; }
|
|
#roar-info .progressbar.player2 { background: #fff ; border-top-left-radius: 0 ; border-bottom-left-radius: 0 ; }
|
|
#roar-info .progressbar.player2 .ui-progressbar-value { background: #ffffcc ; border-right: 1px solid #eee ; }
|
|
|
|
#roar-info .progressbar { position: relative ; }
|
|
#roar-info .progressbar .label { position: absolute ; font-size: 80% ; font-style: italic ; color: #666 ; left: 35% ; }
|
|
|
|
input[name='ROAR_ID'] { flex-grow: 0 !important ; width: 3em ; }
|
|
|
|
button#go-to-roar { height: 2em ; width: 4em ; margin-right: 0.5em ; padding: 2px 5px ; background: #ffffcc ; font-weight: bold ; }
|
|
button#disconnect-roar { background: #fcfcfc ; width: 20px ; height: 19px ; padding: 0 ; border: none ;
|
|
position: absolute ; right: -2px ; top: 0 ;
|
|
}
|
|
button#disconnect-roar img { width: 12px ; }
|
|
|
|
/* -------------------------------------------------------------------- */
|
|
|
|
#panel-vc { height: 100% ; display: flex ; flex-direction: column ; }
|
|
#panel-vc textarea { width: 100% ; resize: none ; flex-grow: 1 ; }
|
|
#panel-vc .footer { margin-top: 0.5em ; display: flex ; align-items: center ; }
|
|
|
|
/* -------------------------------------------------------------------- */
|
|
|
|
#panel-scenario_notes { height: 100% ; display: flex ; flex-direction: column ; }
|
|
#panel-scenario_notes .content { flex-grow: 1 ; }
|
|
#panel-scenario_notes .footer { margin-top: 0.5em ; display: flex ; }
|
|
|
|
/* -------------------------------------------------------------------- */
|
|
|
|
#panel-ssr { height: 100% ; display: flex ; flex-direction: column ; }
|
|
#panel-ssr .content { flex-grow: 1 ; }
|
|
#panel-ssr .footer { margin-top: 0.5em ; display: flex ; align-items: center ; }
|
|
|