diff options
Diffstat (limited to 'play.html')
| -rw-r--r-- | play.html | 223 |
1 files changed, 1 insertions, 222 deletions
@@ -7,232 +7,11 @@ <link rel="icon" href="favicon.png"> <link rel="stylesheet" href="/fonts/fonts.css"> <link rel="stylesheet" href="/common/play.css"> -<link rel="stylesheet" href="/common/columbia.css"> +<link rel="stylesheet" href="play.css"> <script defer src="/common/play.js"></script> <script defer src="data.js"></script> <script defer src="play.js"></script> </head> -<style> - -#log { background-color: whitesmoke; } -#log .h1 { font-weight: bold; padding-top:2px; padding-bottom:2px; margin: 8px 0; text-align: center; } -#log .h2 { padding-top:1px; padding-bottom:1px; text-align: center; } -#log .h1 { border-bottom: 1px solid #444; border-top: 1px solid #444; } -#log .h2 { border-bottom: 1px solid #444; border-top: 1px solid #444; } -#log .h1 { background-color: silver; } -#log .h2 { background-color: gainsboro; } -#log div { padding-left: 20px; text-indent: -12px; } -#log div.i { padding-left: 32px; text-indent: -12px; } - -main { - background-color: dimgray; -} - -#mapwrap { - margin: 0 auto; - width: 2550px; - height: 1900px; -} - -#map { - position: absolute; - width: 2550px; - height: 1900px; -} - -#board, #tracks, #hexes, #pieces { - position: absolute; -} - -#board { - top: 0px; - left: 0px; - width: 2550px; - height: 1650px; - background-color: #803a3b; - background-image: url(map75.png); - background-size: 2550px 1650px; - box-shadow: 0 0 8px #0008; -} - -#tracks { - top: 1650px; - left: 0px; - width: 600px; - height: 250px; - background-color: #d0c5b1; - background-size: 600px 250px; - background-image: url(tracks75.png); - box-shadow: 0 0 8px #0008; -} - -#hexes, #pieces { position: absolute } - -.hex { - box-sizing: border-box; - position: absolute; - border-radius: 50%; - border: 2px solid transparent; -} - -.hex.town { background-color: #F006; } -.hex.stream { background-color: #00F6; } -.hex.town.stream { background-color: #F0F6; } - -.hex.action { - border: 4px solid #fff6; - background-color: #fff2; - box-shadow: 0 0 3px #0008; - z-index: 100; -} - -.hex.action.stop { - background-color: #f002; -} - -.hexside { - position: absolute; - display: none; - transform-origin: 0 0; - width: 58px; - height: 4px; -} - -.hexside.s1 { transform: rotate(-60deg) } -.hexside.s2 { transform: rotate(-120deg) } - -.hexside.road { - display: block; - background-color: brown; -} - -.hexside.river { - display: block; - background-color: blue; -} - -.hexside.road.river { - display: block; - background-color: green; -} - -.large { - position: absolute; - background-size: 84px auto; - width: 42px; - height: 42px; -} - -.small { - position: absolute; - background-size: 68px auto; - width: 34px; - height: 34px; -} - -.large, .small { - transition-property: top, left; - transition-duration: 500ms; - transition-timing-function: ease; - border-width: 2px; - border-style: solid; - box-shadow: 0 0 0 1px #444, 0 0 4px #0008; -} - -.large.action, .small.action { - box-shadow: 0 0 0 1px #444, 0 0 0 4px white; -} - -.large.selected, .small.selected { - box-shadow: 0 0 0 1px #444, 0 0 0 4px yellow; -} - -.large.target, .small.target { - box-shadow: 0 0 0 1px #444, 0 0 0 4px red; -} - -.marker { border-color: hsl(199,65%,85%) hsl(199,55%,50%) hsl(199,55%,50%) hsl(199,65%,85%) } -.large.french, .small.french { border-color: hsl(199,85%,90%) hsl(199,75%,70%) hsl(199,75%,70%) hsl(199,85%,90%) } -.large.anglo, .small.anglo { border-color: hsl(0,0%,90%) hsl(0,0%,70%) hsl(0,0%,70%) hsl(0,0%,90%) } -.large.prussian, .small.prussian { border-color: hsl(202,10%,70%) hsl(202,10%,50%) hsl(202,10%,50%) hsl(202,10%,70%) } - -.large.french { background-image: url(sheet_french1_75.png) } -.large.anglo { background-image: url(sheet_anglo1_75.png) } -.large.prussian { background-image: url(sheet_prussian1_75.png) } -.large.marker { background-image: url(sheet_misc_75.png) } -.small.french { background-image: url(sheet_french2_75.png) } -.small.anglo { background-image: url(sheet_anglo2_75.png) } -.small.prussian { background-image: url(sheet_prussian2_75.png) } - -@media (min-resolution:97dpi) { -.large.french { background-image: url(sheet_french1_150.png) } -.large.anglo { background-image: url(sheet_anglo1_150.png) } -.large.prussian { background-image: url(sheet_prussian1_150.png) } -.large.marker { background-image: url(sheet_misc_150.png) } -.small.french { background-image: url(sheet_french2_150.png) } -.small.anglo { background-image: url(sheet_anglo2_150.png) } -.small.prussian { background-image: url(sheet_prussian2_150.png) } -} - -.large.y1 { background-position: -0px -0px } -.large.y2 { background-position: -0px -42px } -.large.y3 { background-position: -0px -84px } -.large.y4 { background-position: -0px -126px } -.large.y5 { background-position: -0px -168px } -.large.y6 { background-position: -0px -210px } -.large.y7 { background-position: -0px -252px } -.large.y8 { background-position: -0px -294px } -.large.y9 { background-position: -0px -336px } -.large.y10 { background-position: -0px -378px } -.large.y11 { background-position: -0px -420px } - -.large.flip.y1 { background-position: -42px -0px } -.large.flip.y2 { background-position: -42px -42px } -.large.flip.y3 { background-position: -42px -84px } -.large.flip.y4 { background-position: -42px -126px } -.large.flip.y5 { background-position: -42px -168px } -.large.flip.y6 { background-position: -42px -210px } -.large.flip.y7 { background-position: -42px -252px } -.large.flip.y8 { background-position: -42px -294px } -.large.flip.y9 { background-position: -42px -336px } -.large.flip.y10 { background-position: -42px -378px } -.large.flip.y11 { background-position: -42px -420px } - -.small.y1 { background-position: 0px 0px } -.small.y2 { background-position: 0px -34px } -.small.y3 { background-position: 0px -68px } -.small.y4 { background-position: 0px -102px } -.small.y5 { background-position: 0px -136px } -.small.y6 { background-position: 0px -170px } - -.small.flip.y1 { background-position: -34px -0px } -.small.flip.y2 { background-position: -34px -34px } -.small.flip.y3 { background-position: -34px -68px } -.small.flip.y4 { background-position: -34px -102px } -.small.flip.y5 { background-position: -34px -136px } -.small.flip.y6 { background-position: -34px -170px } - -#log .dice { - display: inline-block; - vertical-align: -2px; - width: 12px; - height: 12px; - background-size: 600% 100%; - background-repeat: no-repeat; - background-image: url(die_black_pips.svg); - background-color: #fff; - border: 1px solid #444; -} - -.d0 { background-position: -100% 0 } -.d1 { background-position: 0% 0; } -.d2 { background-position: 20% 0; } -.d3 { background-position: 40% 0; } -.d4 { background-position: 60% 0; } -.d5 { background-position: 80% 0; } -.d6 { background-position: 100% 0; } - -</style> <body> <header> |