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.
131 lines
5.1 KiB
131 lines
5.1 KiB
/* jQuery dialog */
|
|
.ui-dialog.lfa {
|
|
width: calc(100% - 10px) !important ;
|
|
height: calc(100% - 10px) !important ;
|
|
left: 5px ;
|
|
top: 5px ;
|
|
border-radius: 5px ;
|
|
}
|
|
.ui-dialog.lfa .ui-dialog-titlebar { display: none ; }
|
|
|
|
#lfa {
|
|
height: 100% !important ;
|
|
display: flex ; flex-direction: column ;
|
|
overflow-y: auto ;
|
|
/* style the HTML elements to match the charts */
|
|
font-size: 80% ; font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif ; color: #333 ;
|
|
}
|
|
#lfa ::selection {}
|
|
#lfa ::-moz-selection {}
|
|
#lfa { user-select: none ; }
|
|
|
|
/* splitter */
|
|
#lfa .split.top-pane { display: flex ; min-height: 350px ; }
|
|
#lfa .split.top-pane .right { position: relative ; }
|
|
#lfa .split.bottom-pane { min-height: 200px ; position: relative ; }
|
|
#lfa .gutter { position: relative ; min-height: 3px ; background-color: #f0f0f0 ; cursor: row-resize ; z-index: 49 ; }
|
|
#lfa .gutter img { position: absolute ; left: 40% ; top: -2px ; }
|
|
|
|
/* top pane: dr/DR distribution & pie charts */
|
|
#lfa .distrib { position: relative ; }
|
|
#lfa .pie { display: inline-block ; width: 200px ; height: 90px ; }
|
|
#lfa .pie canvas { margin: -20px 0 0 -40px ; }
|
|
#lfa .hotness { position: absolute ; bottom: 20px ; right: 5px ; }
|
|
#lfa .banner { position: relative ; display: inline-block ; }
|
|
#lfa .options { position: absolute ; top: 0 ; right: 25px ; }
|
|
|
|
/* bottom pane: time-plot chart */
|
|
#lfa .time-plot-options {
|
|
display: inline-block ; position: absolute ; top: -14px ; right: 0 ;
|
|
z-index: 50 ;
|
|
padding-left: 0.5em ;
|
|
background: white ;
|
|
}
|
|
#lfa .time-plot { overflow-x: auto ; }
|
|
|
|
/* banner */
|
|
#lfa .banner {
|
|
min-width: 20em ;
|
|
margin: 0 1em 0.5em 0 ;
|
|
border: 1px solid #aaa ; border-radius: 5px ;
|
|
padding: 0.5em 1em ;
|
|
background: #ffffe0 ; color: #444 ;
|
|
}
|
|
#lfa .banner .title { font-size: 150% ; }
|
|
#lfa .banner .title2 { font-style: italic ; }
|
|
#lfa .banner .roll-type { font-size: 110% ; font-style: italic ; color: #666 ; }
|
|
#lfa .banner .select-file { position: absolute ; bottom: 2px ; right: 2px ; font-style: italic ; color: #444 ; cursor: pointer ; }
|
|
#lfa .banner .select-file .caption { line-height: 18px ; vertical-align: middle ; margin-right: 0.15em ; }
|
|
|
|
/* dice hotness */
|
|
#lfa .hotness {
|
|
width: 300px ;
|
|
border: 1px solid #ffc030 ; border-radius: 5px ; background: #fffcfc ;
|
|
padding: 2px 5px ;
|
|
}
|
|
#lfa .hotness img.dice { position: absolute ; left: -10px ; top : -25px ; height: 50px ; cursor: pointer ; }
|
|
|
|
/* hotness popup */
|
|
#lfa .hotness-popup {
|
|
position: absolute ;
|
|
border: 1px solid #888 ; border-radius: 5px ;
|
|
padding: 0.5em ;
|
|
background: #f8f8f8 ;
|
|
z-index: 100 ;
|
|
}
|
|
#lfa .hotness-popup th { padding: 0.2em 0.5em 0 0.5em ; background: #ddd ; border: 1px dotted #ccc ; font-weight: normal ; }
|
|
#lfa .hotness-popup td.player { white-space: nowrap ; }
|
|
#lfa .hotness-popup .val { border: none ; text-align: center ; color: #444 ; }
|
|
#lfa .hotness-popup td.icon { width: 50px ; }
|
|
#lfa .hotness-popup img.die { height: 1.5em ; margin: 2px 0.2em 0 0 ; }
|
|
#lfa .hotness-popup img.sniper { height: 1.75em ; margin-top: 3px ; }
|
|
|
|
/* options panel */
|
|
#lfa .options {
|
|
border: 1px solid #ccc ; border-radius: 5px ; padding: 0.5em ;
|
|
background: #fffff8 ;
|
|
}
|
|
#lfa .options input[type=checkbox] { vertical-align: middle ; }
|
|
#lfa .options button.download { position: absolute ; right: 5px ; bottom: 6px ; padding: 0 !important ; }
|
|
#lfa .options button.player-colors { padding: 3px 6px 2px 5px !important ; }
|
|
.ui-dialog.lfa input[type=checkbox][disabled] { opacity: 0.5 ; }
|
|
.ui-dialog.lfa input[type=checkbox][disabled] + label { opacity: 0.5 ; }
|
|
|
|
/* time-plot options */
|
|
#lfa .time-plot-options button.zoom-in, #lfa .time-plot-options button.zoom-out { padding: 4px 6px 2px 6px !important ; }
|
|
|
|
/* player colors popup */
|
|
#lfa .player-colors-popup, #lfa .select-file-popup {
|
|
position: absolute ;
|
|
border: 1px solid #aaa ; border-radius: 5px ;
|
|
background: #f8f8f8 ;
|
|
z-index: 100 ;
|
|
}
|
|
#lfa .player-colors-popup .row { margin: 0.5em ; padding-top: 3px ; }
|
|
#lfa .player-colors-popup .sp-replacer { width: 40px ; height: 17px ; margin: -3px 0.5em 0 0 ; }
|
|
#lfa .player-colors-popup .sp-preview { width: 20px ; height: 15px ; }
|
|
|
|
/* file selection popup */
|
|
#lfa .select-file-popup .row { margin: 6px 8px ; }
|
|
#lfa .select-file-popup input[type="radio"] { margin: -2px 0.5em 0 0 ; vertical-align: middle ; }
|
|
|
|
/* "no data" marker */
|
|
#lfa .no-data {
|
|
width: 5em ;
|
|
border: 1px dotted #aaa ; border-radius: 5px ;
|
|
padding: 0.15em 0.25em 0.1em 0.25em ;
|
|
background: rgba(128,128,128,0.1) ;
|
|
color: #888 ; font-size: 150% ; text-align: center ;
|
|
}
|
|
|
|
/* tabular chart data (for testing porpoises) */
|
|
#lfa table.chart-data { border: 1px solid #888 ; font-size: 80% ; }
|
|
#lfa table.chart-data th { padding: 2px 5px ; border-bottom: 1px dotted #888 ; }
|
|
#lfa table.chart-data td { padding: 2px 5px ; text-align: center ; }
|
|
#lfa table.chart-data td.label { border-right: 1px dotted #888 ; min-width: 1em ; }
|
|
|
|
/* miscellaneous */
|
|
#lfa button.ui-dialog-titlebar-close { position: fixed ; top: 15px ; right: 5px ; }
|
|
#lfa .ui-selectmenu-button { padding: 2px 5px ; }
|
|
#lfa input[type="checkbox"] { margin-bottom: 0.2em ; }
|
|
#lfa label[disabled] { color: #aaa ; }
|
|
|