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.
88 lines
5.6 KiB
88 lines
5.6 KiB
/* scenario card */
|
|
.scenario-card { display: flex ; flex-direction: column ; position: relative ; }
|
|
.scenario-card a { text-decoration: none ; }
|
|
|
|
/* scenario card - header */
|
|
.scenario-card .header {
|
|
position: relative ;
|
|
border: 1px solid #b0b080 ; border-radius: 5px ;
|
|
background: #f0f0c0 ; padding: 0.25em 0.5em ;
|
|
margin-bottom: 0.35em ;
|
|
}
|
|
.scenario-card .scenario-name { font-size: 150% ; font-weight: bold ; }
|
|
.scenario-card .scenario-name a:focus { outline: 0 ; }
|
|
.scenario-card .scenario-id { font-style: italic ; }
|
|
.scenario-card .scenario-date { font-size: 80% ; font-style: italic ; }
|
|
.scenario-card .info {
|
|
position: absolute ;
|
|
border: 1px solid #c0c0a0 ; border-radius: 4px ;
|
|
padding: 0.25em 0.5em ;
|
|
background: #fff ;
|
|
font-size: 80% ;
|
|
}
|
|
.scenario-card .icons { margin-top: 0.25em ; opacity: 0.75 ; }
|
|
.scenario-card .icons img { height: 0.8em ; }
|
|
.scenario-card .icons img.oba { height: 0.7em ; margin-left: -3px ; }
|
|
|
|
/* scenario card - sub-header */
|
|
.scenario-card .header2 { margin: 0 0.5em ; font-size: 90% ; color: #666 ; }
|
|
.scenario-card .header2 a { color: #666 ; }
|
|
.scenario-card .publisher { font-size: 90% ; font-style: italic ; }
|
|
.scenario-card .publication-date { font-size: 90% ; font-style: italic ; }
|
|
|
|
/* scenario card - content */
|
|
.scenario-card .content { margin: 0.5em 0.5em 0 0.5em ; padding-right: 0.5em ; overflow-y: auto ; }
|
|
.scenario-card .overview { margin-bottom: 1em ; text-align: justify ; }
|
|
.scenario-card .overview .more { display: inline-block ; font-size: 80% ; font-style: italic ; color: #666 ; cursor: pointer ; }
|
|
.scenario-card .map { float: right ; width: 30% ; min-width: 200px ; margin: 0 0 0.25em 1.5em ; }
|
|
.scenario-card .map iframe { width: 100% ; border: 0 ; }
|
|
|
|
/* scenario card - player info */
|
|
.scenario-card .player-info { margin-bottom: 1em ; }
|
|
.scenario-card .player-info .players td { vertical-align: top ; }
|
|
.scenario-card .player-info .players .label { font-weight: bold ; padding-right: 0.25em ; }
|
|
.scenario-card .player-info .players .flag { width: 1px ; text-align: center ; }
|
|
.scenario-card .player-info .players .name { padding-left: 0.1em ; }
|
|
.scenario-card .player-info .players .desc { font-size: 90% ; font-style: italic ; padding-bottom: 0.25em ; }
|
|
|
|
.scenario-card .player-info .oba { clear: both ; float: right ; font-size: 90% ; border: 1px solid #c0c0a0 ; border-radius: 5px ; }
|
|
.scenario-card .player-info .oba .oba-header { border-bottom: 1px dotted #c0c0a0 ; padding: 2px 5px 5px 5px ; font-weight: bold ; text-align: center ; white-space: nowrap ; }
|
|
.scenario-card .player-info .oba td { line-height: 1em ; }
|
|
.scenario-card .player-info .oba .name { width: 1px ; padding-left: 5px ; font-size: 90% ; font-weight: bold ; white-space: nowrap ; }
|
|
.scenario-card .player-info .oba .count { width: 1px ; padding-left: 0.5em ; text-align: right ; }
|
|
.scenario-card .player-info .oba .comments { padding-left: 10px ; font-size: 80% ; font-style: italic ; color: #444 ; }
|
|
.scenario-card .player-info .oba .date-warning { padding-top: 0.5em ; font-size: 80% ; font-style: italic ; }
|
|
.scenario-card .player-info .oba .date-warning img { float: left ; height: 1.25em ; margin: -2px 0.5em 0 0 ; }
|
|
|
|
.scenario-card .balance-graphs { display: inline-block ; border: 1px solid #c0c0a0 ; border-radius: 5px ; padding: 4px 8px ; }
|
|
.scenario-card .balance-graph { display: table-row ; font-size: 90% ; }
|
|
.scenario-card .balance-graph .player { display: table-cell ; }
|
|
.scenario-card .balance-graph .player.player1 { text-align: right ; }
|
|
.scenario-card .balance-graph .wins { display: table-cell ; text-align: right ; font-size: 70% ; font-style: italic ; color: #666 ; }
|
|
.scenario-card .balance-graph .wrapper { display: table-cell ; }
|
|
.scenario-card .balance-graph .progressbar { display: inline-block ; position: relative ; width: 4em ; height: 0.8em ; margin-bottom: -2px ; border: 1px solid #c0c0a0 ; background: #f0f0c0 ; }
|
|
.scenario-card .balance-graph a:focus { outline: 0 ; }
|
|
.scenario-card .balance-graph .progressbar.player1 { background: #f0f0c0 ; border-top-right-radius: 0 ; border-bottom-right-radius: 0 ; border-right: 0 ; }
|
|
.scenario-card .balance-graph .progressbar.player1 .ui-progressbar-value { background: #fff ; border-right: 1px solid #eee ; }
|
|
.scenario-card .balance-graph .progressbar.player2 { background: #fff ; border-top-left-radius: 0 ; border-bottom-left-radius: 0 ; }
|
|
.scenario-card .balance-graph .progressbar.player2 .ui-progressbar-value { background: #f0f0c0 ; border-right: 1px solid #eee ; }
|
|
.scenario-card .balance-graph .progressbar .score { position: absolute ; font-size: 70% ; font-style: italic ; color: #666 ; left: 35% ; }
|
|
|
|
/* scenario card - misc */
|
|
.scenario-card .boards img.map-previews { height: 0.75em ; margin-left: 0.5em ; cursor: pointer ; }
|
|
.scenario-card .boards .map-preview-count { font-size: 80% ; font-style: italic ; color: #888 ; }
|
|
.scenario-card .extra-rules { margin-top: 0.25em ; }
|
|
.scenario-card .errata ul { margin-top: 0 ; }
|
|
.scenario-card .errata .source { font-size: 90% ; font-style: italic ; color: #666 ; }
|
|
|
|
/* scenario info dialog */
|
|
.ui-dialog.scenario-info { border-radius: 10px ; }
|
|
.ui-dialog.scenario-info .ui-dialog-titlebar { display: none ; }
|
|
#scenario-info-dialog { padding: 8px !important ; }
|
|
#scenario-info-dialog .scenario-card { height: 100% ; overflow-y: hidden ; }
|
|
#scenario-info-dialog .connect-roar { display: inline-block ; margin-top: 0.25em ; font-size: 80% ; color: #444 ; cursor: pointer ; }
|
|
#scenario-info-dialog .connect-roar img { height: 0.75em ; Xmargin-right: 0.25em ; opacity: 0.7 ; }
|
|
#scenario-info-dialog .disconnect-roar img { height: 0.5em ; margin-left: 0.5em ; cursor: pointer ; }
|
|
|
|
/* lightgallery */
|
|
.lg-backdrop.in { opacity: 0.85 ; }
|
|
|