X-Git-Url: https://jasonwoof.com/gitweb/?p=hexbog.git;a=blobdiff_plain;f=style.less;fp=style.less;h=d74086584dacb300b88e642ed34bd3eec536b4d9;hp=0000000000000000000000000000000000000000;hb=5c9ec279c15c135b7e84501a5b2426e8f06fde60;hpb=b3436798065033afc95e9b0c3e7952b9d447d818

diff --git a/style.less b/style.less
new file mode 100644
index 0000000..d740865
--- /dev/null
+++ b/style.less
@@ -0,0 +1,224 @@
+@board-inner-width: 358px;
+@board-inner-height: 410px;
+@board-pad: 15px; // also in main.coffee
+@board-width: @board-inner-width + @board-pad * 2;
+@board-height: @board-inner-height + @board-pad * 2;
+@column-pad: 10px;
+@right-width: 250px;
+@tabs-top: 120px;
+@tabtab-height: 20px; // also in main.coffee
+@tab-height: 150px; // also in main.coffee
+@row-pad: 10px;
+@copyright-height: 20px;
+
+@tab-color: #ddf;
+@tabtab-color: darken(@tab-color, 3%);
+
+body {
+	background: #eef;
+	color: black;
+	font: 14px Verdana, Arial, free-sans, sans-serif;
+	margin: 0;
+	padding: 0;
+}
+#centerer {
+	margin: auto auto;
+	width: @board-width + @column-pad + @right-width;
+	height: @board-height;
+	position: relative;
+}
+#boarder {
+	background: #f5f5ff;
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	width: @board-width;
+	height: @board-height;
+	border-radius: 3px;
+	box-shadow: inset 1px 1px 4px #888;
+	overflow: hidden;
+}
+#board {
+	position: absolute;
+	top: @board-pad;
+	left: @board-pad;
+	width: @board-inner-width;
+	height: @board-inner-height;
+}
+#right {
+	position: absolute;
+	top: 0px;
+	left: @board-width + @column-pad;
+	width: @right-width;
+	height: @board-height;
+	h1 {
+		font-size: 28px;
+		color: #55f;
+		margin: 0;
+		text-align: center;
+	}
+	#subhead {
+		margin-bottom: 10px;
+		text-align: center;
+	}
+	#tabs {
+		position: absolute;
+		top: @tabs-top;
+		height: @tabtab-height * 4 + @tab-height;
+	}
+	.tab + .tab, .selected-tab + .tab, .tab + .selected-tab {
+		margin-top: 5px;
+	}
+	.tabtab {
+		height: @tabtab-height;
+		padding: 0 0 0 3px;
+		background: @tabtab-color;
+	}
+	.selected-tab, .tab {
+		overflow: hidden;
+		box-shadow: 1px 1px 3px #888;
+		background: @tab-color;
+		border-radius: 3px;
+	}
+	.selected-tab {
+		.tabtab:before {
+			content: "▼ ";
+		}
+	}
+	.tab {
+		.tabtab:before {
+			content: "▶ ";
+		}
+		.tabtab {
+			cursor: pointer;
+		}
+		.tabtab:hover {
+			color: darken(@tab-color, 50%);
+		}
+		.tabtab:hover:before {
+			content: "▼ ";
+		}
+	}
+	#copyright {
+		position: absolute;
+		top: @board-height - @row-pad - @copyright-height;
+		left: 0px;
+		font-size: 85%;
+	}
+}
+.tile {
+	padding-top: 4px;
+	height: 38px;
+	width: 42px;
+	background-color: #aaf;
+	color: #000;
+	font-size: 30px;
+	display: block;
+	position: absolute;
+	border-radius: 13px;
+	text-align: center;
+	cursor: pointer;
+	user-select: none;
+	-khtml-user-select: none;
+	-o-user-select: none;
+	-moz-user-select: -moz-none;
+	-webkit-user-select: none;
+	box-shadow: 1px 1px 2px #666;
+}
+.tile.selected, .tile.selected_word {
+	background-color: #ffa;
+	box-shadow: inset 1px 1px 5px #444;
+}
+.tile.selected_word {
+	background-color: #cfc;
+}
+#loading {
+	position: absolute;
+	top: 140px;
+	right: 140px;
+	font-size: 32px;
+}
+.head {
+	margin-top: -4px;
+	height: 42px;
+	width: 42px;
+	position: relative;
+	border-radius: 13px;
+}
+.eye1, .eye2 {
+	width: 6px;
+	height: 6px;
+	border: 2px solid #a83;
+	border-radius: 9px;
+	background-color: white;
+	position: absolute;
+}
+.eye1 {
+	top: -8px;
+	right: -1px;
+	width: 5px;
+	border-width: 4px 4px 3px 4px;
+}
+.eye2 {
+	right: -9px;
+	top: 1px;
+	border-width: 3px 4px 4px 2px;
+}
+.tooth1, .tooth2, .tooth3, .tooth4 {
+	width: 6px;
+	height: 6px;
+	border: 2px solid #a83;
+	background-color: white;
+	position: absolute;
+}
+.tooth1 {
+	top: -2px;
+	left: 22px;
+	width: 7px;
+	border-width: 2px 0 2px 2px;
+}
+.tooth2 {
+	height: 7px;
+	top: 12px;
+	right: -3px;
+	border-width: 0 2px 2px 2px;
+}
+.pate {
+	position: absolute;
+	top: -2px;
+	right: -3px;
+	width: 12px;
+	height: 12px;
+	background: white;
+	border: 2px solid #a83;
+	border-radius: 0 13px 0 0;
+}
+.tooth3 {
+	width: 7px;
+	bottom: -3px;
+	left: 12px;
+	border-width: 2px 2px 2px 0;
+}
+.tooth4 {
+	height: 7px;
+	bottom: 11px;
+	left: -2px;
+	border-width: 2px 2px 0 2px;
+}
+.chin {
+	position: absolute;
+	bottom: -3px;
+	left: -2px;
+	width: 12px;
+	height: 12px;
+	background: white;
+	border: 2px solid #a83;
+	border-radius: 0 0 0 13px;
+}
+#definition {
+	overflow: auto;
+}
+#definition_credit {
+	margin-top: 15px;
+	font-size: 12px;
+}