Split stylesheet into separate file.

author: Tor Andersson <tor@ccxvii.net> 2023-01-31 12:43:45 +0100
committer: Tor Andersson <tor@ccxvii.net> 2023-01-31 12:43:45 +0100
commit: 708f37b2fdf35cd44db30c370198c49761d4bf80 (patch)
tree: 3be022ee5c9af9b7bbd975bdc83032ff00a73629 /play.html
parent: 2255fd0a4bfa61e164c07952127f0f43a6ffe2eb (diff)
download: rommel-in-the-desert-708f37b2fdf35cd44db30c370198c49761d4bf80.tar.gz
1 files changed, 2 insertions, 631 deletions
diff --git a/play.html b/play.html
index 14d9f8c..736a975 100644
--- a/play.html
+++ b/play.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <!-- vim:set nowrap: -->
-<html>
+<html lang="en">
 <head>
 <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
 <meta charset="utf-8">
@@ -8,639 +8,10 @@
 <link rel="icon" href="favicon.png">
 <link rel="stylesheet" href="/fonts/fonts.css">
 <link rel="stylesheet" href="/common/play.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>
-<style>
-
-main { background-color: dimgray; }
-#roles { background-color: silver; }
-header { background-color: silver; }
-header.your_turn { background-color: orange; }
-#role_Axis .role_name { background-color: darkseagreen; }
-#role_Allied .role_name { background-color: tan; }
-.role_supply { float: right; }
-
-#log { background-color: ghostwhite; }
-#log .h1 { background-color: dimgray; color: ghostwhite; font-weight: bold; padding-top:2px; padding-bottom:2px; text-align: center; }
-#log .h2 { background-color: gainsboro; padding-top:2px; padding-bottom:2px; text-align: center; }
-#log .h3 { background-color: gainsboro; text-align: center; }
-#log .h4 { text-decoration: underline; font-style: italic; }
-#log .axis { background-color: hsl(120, 25%, 75%) }
-#log .allied { background-color: hsl(35, 45%, 80%) }
-#log > .i { padding-left: 20px; }
-#log > .ii { padding-left: 32px; }
-#log > div > .i { padding-left: 12px; }
-#log .hex:hover { cursor: pointer; text-decoration: underline; }
-
-.action {
-	cursor: pointer;
-}
-
-#log {
-	font-variant-numeric: tabular-nums;
-}
-
-/* CARDS */
-
-.hand {
-	margin: 24px;
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: center;
-	min-height: 170px;
-	max-width: 2672px;
-	gap: 20px;
-}
-
-.card {
-	background-size: cover;
-	background-repeat: no-repeat;
-	background-color: ivory;
-	width: 124px;
-	height: 170px;
-	border-radius: 8px;
-	box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
-	transition: 100ms;
-}
-
-.card.real {
-	background-image: url(card_real.svg);
-}
-
-.card.dummy {
-	background-image: url(card_dummy.svg);
-}
-
-.card.action:hover {
-	transform: scale(1.1);
-}
-
-
-/* BATTLE DIALOG */
-
-#battle { background-color: #d6c4a9; background: url(texture_clear.png); }
-#battle_header { background-color: brown; color: gold }
-#battle_hits { background-color: #c4ab8b; }
-#battle_buttons { background-color: #c4ab8b; }
-#battle_message { background-color: #d6c4a9; }
-
-#battle {
-	position: fixed;
-	min-width: 524px; /* 6 blocks wide */
-	left: 12px;
-	top: 56px;
-	z-index: 100;
-	box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5);
-	border: 1px solid black;
-	user-select: none;
-}
-
-#battle_header {
-	cursor: move;
-	padding: 2px 8px;
-	line-height: 24px;
-	min-height: 24px;
-	text-align: center;
-	font-weight: bold;
-	border-bottom: 1px solid black;
-}
-
-#battle_message {
-	padding: 2px 8px;
-	line-height: 24px;
-	min-height: 24px;
-	text-align: center;
-	border-top: 1px solid black;
-}
-
-#battle_hits {
-	padding: 4px;
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: center;
-	gap: 6px;
-	border-bottom: 1px solid black;
-}
-
-#battle_hits .hits_text {
-	width: 24px;
-}
-
-#battle_hits .hits_icon {
-	display: block;
-	vertical-align: middle
-}
-
-.battle_line {
-	margin: 24px;
-	min-height: 60px;
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: center;
-	gap: 16px;
-}
-
-#battle_buttons {
-	padding: 12px;
-	min-height: 28px;
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: center;
-	gap: 12px;
-	border-top: 1px solid black;
-}
-
-/* PURSUIT FIRE DIALOG */
-
-#pursuit { background-color: #d6c4a9; background: url(texture_mountain.png); }
-#pursuit_header { background-color: brown; color: gold }
-#pursuit_hits { background-color: #c4ab8b; }
-#pursuit_buttons { background-color: #c4ab8b; }
-#pursuit_message { background-color: #d6c4a9; }
-
-#pursuit {
-	position: fixed;
-	min-width: 524px; /* 6 blocks wide */
-	left: 12px;
-	top: 56px;
-	z-index: 100;
-	box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5);
-	border: 1px solid black;
-	user-select: none;
-}
-
-#pursuit_header {
-	cursor: move;
-	padding: 2px 8px;
-	line-height: 24px;
-	min-height: 24px;
-	text-align: center;
-	font-weight: bold;
-	border-bottom: 1px solid black;
-}
-
-#pursuit_hits {
-	padding: 4px;
-	text-align: center;
-	border-bottom: 1px solid black;
-}
-
-#pursuit_message {
-	padding: 2px 8px;
-	line-height: 24px;
-	min-height: 24px;
-	text-align: center;
-	border-top: 1px solid black;
-}
-
-#pursuit_buttons {
-	padding: 12px;
-	min-height: 28px;
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: center;
-	gap: 12px;
-	border-top: 1px solid black;
-}
-
-/* TABLES */
-
-table { border-collapse: collapse; font-size: 12px; user-select: none; }
-td.blank { background-color: transparent; border: none }
-td,th { border: 1px solid #222; text-align: center; padding: 2px 4px; }
-td { min-width: 16px; height: 19px; }
-th { background-color: #222; color: oldlace; }
-td { background-color: oldlace; }
-table .required_target { background-color: #b8d9ca }
-table .must_fire_first { background-color: #f7dc68 }
-table .only_unsupported { background-color: #f0b0af }
-td span { padding: 0 4px }
-td img { vertical-align: middle }
-
-/* MAP */
-
-#mapwrap {
-	width: 2672px;
-	height: 960px;
-	box-shadow: 0px 1px 10px rgba(0,0,0,0.5);
-}
-
-#map {
-	background-repeat: no-repeat;
-	width: 2672px;
-	height: 960px;
-	overflow: clip;
-}
-
-#mapsvg {
-	display: block;
-	position: absolute;
-	user-select: none;
-}
-
-#calendar, #calendar2 {
-	user-select: none;
-	position: absolute;
-	display: flex;
-	top: 24px;
-	left: 1956px;
-	gap: 20px;
-}
-
-.month {
-	visibility: hidden;
-	width: 46px;
-	height: 46px;
-	background-color: #fee0bf;
-	background-color: wheat;
-	font-size: 28px;
-	line-height: 46px;
-	font-weight: bold;
-	text-align: center;
-	border: 2px solid #222;
-	color: #222;
-}
-
-.month.show {
-	visibility: visible;
-}
-
-.month.now {
-	background-color: tan;
-	box-shadow: 0 0 0 4px #fff4;
-}
-
-/* MAP */
-
-svg .hex {
-	stroke-width: 2;
-}
-
-svg .hex.exit {
-	fill: black;
-	fill-opacity: 0.125;
-}
-
-svg .hex.refit.action {
-	stroke: lightskyblue;
-}
-
-svg .hex.action {
-	stroke: ivory;
-	stroke-dasharray: 2 2;
-	stroke-dashoffset: 1;
-}
-
-svg .hex.action.forced_march {
-	stroke: crimson;
-}
-
-svg .hex.selected {
-	stroke: yellow;
-	stroke-dasharray: none;
-}
-
-svg .hex.tip {
-	stroke: yellow;
-	stroke-width: 3;
-	stroke-dasharray: 4 4;
-}
-
-/* HEX CONTROL */
-
-svg .fortress.allied {
-	fill: firebrick;
-	stroke: darkred;
-}
-
-svg .fortress.axis {
-	fill: forestgreen;
-	stroke: darkgreen;
-}
-
-svg .side {
-	stroke-linecap: round;
-	stroke-dasharray: 54 100;
-	stroke-dashoffset: -8;
-	stroke-width: 4;
-}
-
-svg .side.axis_control {
-	stroke: darkgreen;
-}
-
-svg .side.allied_control {
-	stroke: darkred;
-}
-
-body.Allied svg .side.axis_control { stroke: #222 }
-body.Axis svg .side.allied_control { stroke: #222 }
-body.Allied svg .side.allied_control { stroke: none }
-body.Axis svg .side.axis_control { stroke: none }
-
-/* SUPPLY LINES */
-
-svg #lines line {
-	pointer-events: none;
-	stroke: none;
-	stroke-width: 6px;
-	stroke-linecap: round;
-}
-
-svg .hex.axis_supply {
-	fill: forestgreen;
-	fill-opacity: 0.4;
-}
-
-svg .hex.allied_supply {
-	fill: firebrick;
-	fill-opacity: 0.4;
-}
-
-svg .hex.axis_supply.allied_supply {
-	fill: blue;
-	fill-opacity: 0.4;
-}
-
-svg #lines line.axis_supply {
-	stroke: darkgreen;
-}
-
-svg #lines line.allied_supply {
-	stroke: darkred;
-}
-
-svg #lines line.axis_supply.allied_supply {
-	stroke: navy;
-}
-
-/* UNITS */
-
-.minefield {
-	position: absolute;
-	pointer-events: none;
-	width: 48px;
-	height: 48px;
-	background-image: url(minefield.svg);
-	opacity: 0.5;
-}
-
-#map .unit {
-	position: absolute;
-}
-
-.unit {
-	background-size: 1000%;
-	background-repeat: no-repeat;
-	border-style: solid;
-	transition: top 200ms, left 200ms, transform 200ms;
-}
-
-.unit {
-	width: 51px;
-	height: 51px;
-	border-width: 4px;
-}
-
-.unit.m {
-	width: 42px;
-	height: 42px;
-	border-width: 4px;
-}
-
-.unit.revealed {
-	background-image: url(units.svg);
-}
-
-#mapwrap.fit .unit.revealed {
-	background-image: url(units-simple.svg);
-}
-
-.unit.axis {
-	background-color: hsl(80, 20%, 60%);
-	border-color: hsl(80, 20%, 50%);
-	box-shadow: 0 0 2px 1px hsl(80, 20%, 20%);
-}
-
-.unit.axis.eliminated,
-.unit.axis.fired,
-.unit.axis.moved:not(.disrupted):not(.unsupplied) {
-	border-color: hsl(80, 20%, 40%);
-}
-
-.unit.axis.eliminated:not(.revealed),
-.unit.axis.fired:not(.revealed),
-.unit.axis.moved:not(.revealed) {
-	background-color: hsl(80, 20%, 50%);
-}
-
-.unit.allied {
-	background-color: hsl(35, 40%, 60%);
-	border-color: hsl(35, 40%, 50%);
-	box-shadow: 0 0 2px 1px hsl(30, 40%, 20%);
-}
-
-.unit.allied.eliminated,
-.unit.allied.fired,
-.unit.allied.moved:not(.disrupted):not(.unsupplied) {
-	border-color: hsl(35, 40%, 40%);
-}
-
-.unit.allied.eliminated:not(.revealed),
-.unit.allied.fired:not(.revealed),
-.unit.allied.moved:not(.revealed) {
-	background-color: hsl(35, 40%, 50%);
-}
-
-.unit.moved:not(.revealed) {
-	background-image: url(moved.svg);
-	background-size: 75%;
-	background-position: center bottom;
-}
-
-.unit.eliminated:not(.revealed) {
-	background-image: url(eliminated.svg);
-	background-size: 60%;
-	background-position: center;
-}
-
-.unit.axis.revealed {
-	background-color: #abba8e;
-}
-
-.unit.axis.italian.revealed {
-	background-color: #f9e3b3;
-}
-
-.unit.allied.revealed {
-	background-color: #e4d1ab;
-}
-
-.unit.disrupted {
-	border-color: #222;
-	box-shadow: 0 0 2px 1px black;
-}
-
-.unit.disrupted:not(.revealed) {
-	background-image: url(disrupted.svg);
-	background-size: 75%;
-	background-position: center;
-}
-
-.unit.unsupplied {
-	border-color: #c00;
-	box-shadow: 0 0 2px 1px darkred;
-}
-
-.unit.unsupplied:not(.revealed) {
-	background-image: url(unsupplied.svg);
-	background-size: 75%;
-	background-position: center;
-}
-
-.unit.disrupted.unsupplied {
-	border-color: #222 #c00;
-}
-
-.unit.disrupted.unsupplied.r1, .unit.disrupted.unsupplied.r3 {
-	border-color: #c00 #222;
-}
-
-.unit.disrupted.unsupplied:not(.revealed) {
-	background-image: url(unsupplied.svg), url(disrupted.svg);
-	background-size: 50%, 50%;
-	background-position: 0% 90%, 90% 10%;
-}
-
-.unit.action {
-	box-shadow: 0 0 0 2px white;
-}
-
-.unit.action.hit {
-	box-shadow: 0 0 0 2px white, 0 0 0 4px black;
-}
-
-.unit.selected {
-	box-shadow: 0 0 0 2px yellow;
-}
-
-.unit.r0 { transform: rotate(0deg); }
-.unit.r1 { transform: rotate(-90deg); }
-.unit.r2 { transform: rotate(-180deg); }
-.unit.r3 { transform: rotate(-270deg); }
-
-.unit.r0.hit1 { transform: rotate(-15deg); }
-.unit.r1.hit1 { transform: rotate(-105deg); }
-.unit.r2.hit1 { transform: rotate(-195deg); }
-.unit.r3.hit1 { transform: rotate(-285deg); }
-
-.unit.r0.hit2 { transform: rotate(-30deg); }
-.unit.r1.hit2 { transform: rotate(-120deg); }
-.unit.r2.hit2 { transform: rotate(-210deg); }
-.unit.r3.hit2 { transform: rotate(-300deg); }
-
-.unit.r0.hit3 { transform: rotate(-45deg); }
-.unit.r1.hit3 { transform: rotate(-135deg); }
-.unit.r2.hit3 { transform: rotate(-225deg); }
-.unit.r3.hit3 { transform: rotate(-315deg); }
-
-.unit.u0{background-position:0% 0%}
-.unit.u1{background-position:11.11111111111111% 0%}
-.unit.u2{background-position:22.22222222222222% 0%}
-.unit.u3{background-position:33.33333333333333% 0%}
-.unit.u4{background-position:44.44444444444444% 0%}
-.unit.u5{background-position:55.55555555555556% 0%}
-.unit.u6{background-position:66.66666666666666% 0%}
-.unit.u7{background-position:77.77777777777777% 0%}
-.unit.u8{background-position:88.88888888888889% 0%}
-.unit.u9{background-position:100% 0%}
-.unit.u10{background-position:0% 11.11111111111111%}
-.unit.u11{background-position:11.11111111111111% 11.11111111111111%}
-.unit.u12{background-position:22.22222222222222% 11.11111111111111%}
-.unit.u13{background-position:33.33333333333333% 11.11111111111111%}
-.unit.u14{background-position:44.44444444444444% 11.11111111111111%}
-.unit.u15{background-position:55.55555555555556% 11.11111111111111%}
-.unit.u16{background-position:66.66666666666666% 11.11111111111111%}
-.unit.u17{background-position:77.77777777777777% 11.11111111111111%}
-.unit.u18{background-position:88.88888888888889% 11.11111111111111%}
-.unit.u19{background-position:100% 11.11111111111111%}
-.unit.u20{background-position:0% 22.22222222222222%}
-.unit.u21{background-position:11.11111111111111% 22.22222222222222%}
-.unit.u22{background-position:22.22222222222222% 22.22222222222222%}
-.unit.u23{background-position:33.33333333333333% 22.22222222222222%}
-.unit.u24{background-position:44.44444444444444% 22.22222222222222%}
-.unit.u25{background-position:55.55555555555556% 22.22222222222222%}
-.unit.u26{background-position:66.66666666666666% 22.22222222222222%}
-.unit.u27{background-position:77.77777777777777% 22.22222222222222%}
-.unit.u28{background-position:88.88888888888889% 22.22222222222222%}
-.unit.u29{background-position:100% 22.22222222222222%}
-.unit.u30{background-position:0% 33.33333333333333%}
-.unit.u31{background-position:11.11111111111111% 33.33333333333333%}
-.unit.u32{background-position:22.22222222222222% 33.33333333333333%}
-.unit.u33{background-position:33.33333333333333% 33.33333333333333%}
-.unit.u34{background-position:44.44444444444444% 33.33333333333333%}
-.unit.u35{background-position:55.55555555555556% 33.33333333333333%}
-.unit.u36{background-position:66.66666666666666% 33.33333333333333%}
-.unit.u37{background-position:77.77777777777777% 33.33333333333333%}
-.unit.u38{background-position:88.88888888888889% 33.33333333333333%}
-.unit.u39{background-position:100% 33.33333333333333%}
-.unit.u40{background-position:0% 44.44444444444444%}
-.unit.u41{background-position:11.11111111111111% 44.44444444444444%}
-.unit.u42{background-position:22.22222222222222% 44.44444444444444%}
-.unit.u43{background-position:33.33333333333333% 44.44444444444444%}
-.unit.u44{background-position:44.44444444444444% 44.44444444444444%}
-.unit.u45{background-position:55.55555555555556% 44.44444444444444%}
-.unit.u46{background-position:66.66666666666666% 44.44444444444444%}
-.unit.u47{background-position:77.77777777777777% 44.44444444444444%}
-.unit.u48{background-position:88.88888888888889% 44.44444444444444%}
-.unit.u49{background-position:100% 44.44444444444444%}
-.unit.u50{background-position:0% 55.55555555555556%}
-.unit.u51{background-position:11.11111111111111% 55.55555555555556%}
-.unit.u52{background-position:22.22222222222222% 55.55555555555556%}
-.unit.u53{background-position:33.33333333333333% 55.55555555555556%}
-.unit.u54{background-position:44.44444444444444% 55.55555555555556%}
-.unit.u55{background-position:55.55555555555556% 55.55555555555556%}
-.unit.u56{background-position:66.66666666666666% 55.55555555555556%}
-.unit.u57{background-position:77.77777777777777% 55.55555555555556%}
-.unit.u58{background-position:88.88888888888889% 55.55555555555556%}
-.unit.u59{background-position:100% 55.55555555555556%}
-.unit.u60{background-position:0% 66.66666666666666%}
-.unit.u61{background-position:11.11111111111111% 66.66666666666666%}
-.unit.u62{background-position:22.22222222222222% 66.66666666666666%}
-.unit.u63{background-position:33.33333333333333% 66.66666666666666%}
-.unit.u64{background-position:44.44444444444444% 66.66666666666666%}
-.unit.u65{background-position:55.55555555555556% 66.66666666666666%}
-.unit.u66{background-position:66.66666666666666% 66.66666666666666%}
-.unit.u67{background-position:77.77777777777777% 66.66666666666666%}
-.unit.u68{background-position:88.88888888888889% 66.66666666666666%}
-.unit.u69{background-position:100% 66.66666666666666%}
-.unit.u70{background-position:0% 77.77777777777777%}
-.unit.u71{background-position:11.11111111111111% 77.77777777777777%}
-.unit.u72{background-position:22.22222222222222% 77.77777777777777%}
-.unit.u73{background-position:33.33333333333333% 77.77777777777777%}
-.unit.u74{background-position:44.44444444444444% 77.77777777777777%}
-.unit.u75{background-position:55.55555555555556% 77.77777777777777%}
-.unit.u76{background-position:66.66666666666666% 77.77777777777777%}
-.unit.u77{background-position:77.77777777777777% 77.77777777777777%}
-.unit.u78{background-position:88.88888888888889% 77.77777777777777%}
-.unit.u79{background-position:100% 77.77777777777777%}
-.unit.u80{background-position:0% 88.88888888888889%}
-.unit.u81{background-position:11.11111111111111% 88.88888888888889%}
-.unit.u82{background-position:22.22222222222222% 88.88888888888889%}
-.unit.u83{background-position:33.33333333333333% 88.88888888888889%}
-.unit.u84{background-position:44.44444444444444% 88.88888888888889%}
-.unit.u85{background-position:55.55555555555556% 88.88888888888889%}
-.unit.u86{background-position:66.66666666666666% 88.88888888888889%}
-.unit.u87{background-position:77.77777777777777% 88.88888888888889%}
-.unit.u88{background-position:88.88888888888889% 88.88888888888889%}
-.unit.u89{background-position:100% 88.88888888888889%}
-.unit.u90{background-position:0% 100%}
-.unit.u91{background-position:11.11111111111111% 100%}
-.unit.u92{background-position:22.22222222222222% 100%}
-.unit.u93{background-position:33.33333333333333% 100%}
-
-</style>
 </head>
 <body>
author	Tor Andersson <tor@ccxvii.net>	2023-01-31 12:43:45 +0100
committer	Tor Andersson <tor@ccxvii.net>	2023-01-31 12:43:45 +0100
commit	708f37b2fdf35cd44db30c370198c49761d4bf80 (patch)
tree	3be022ee5c9af9b7bbd975bdc83032ff00a73629 /play.html
parent	2255fd0a4bfa61e164c07952127f0f43a6ffe2eb (diff)
download	rommel-in-the-desert-708f37b2fdf35cd44db30c370198c49761d4bf80.tar.gz