From ff17865f6b96cbade80b0554f0e128244c950ad7 Mon Sep 17 00:00:00 2001
From: Edward Loper <edloper@gmail.com>
Date: Tue, 3 Dec 2024 00:00:21 -0500
Subject: [PATCH] style.css

---
 style.css | 239 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 239 insertions(+)
 create mode 100644 style.css

diff --git a/style.css b/style.css
new file mode 100644
index 0000000..9c8eeb2
--- /dev/null
+++ b/style.css
@@ -0,0 +1,239 @@
+    /* Add some basic styling */
+    body {
+      font-family: sans-serif;
+    }
+    .ui-tabs .ui-tabs-nav li {
+      list-style: none;
+      float: left;
+      margin-right: 10px;
+    }
+    .ui-tabs .ui-tabs-nav li a {
+      padding: 5px 10px;
+      text-decoration: none;
+    }
+    .slider {
+	margin: 0px 20px 0px 0px;
+    }
+    .actionButton {
+	width: 60px;
+	height: 60px;
+	background: #fff;
+	padding: 5px;
+	margin: 10px 10px 20px 10px;
+	border: 1px solid #888;
+	border-radius: 8px;
+	display: inline-block;
+	vertical-align: middle;
+    }
+    .actionButton img {
+	height: 40px;
+    }
+    .actionButton:hover {
+	background: #ccc;
+    }
+    .actionButton:active {
+	background: #cfc;
+    }
+    .actionButton div.label {
+	margin: 12px auto 0 auto;
+	color: #666;
+    }
+    table.controls th {
+	padding: 0 10px;
+    }
+    .controls .textInput td {
+	width: 100%;
+	padding-right: 20px;
+    }
+    .controls .textInput input {
+	width: 100%;
+    }
+    #editorBackgroundOpacitySlider {
+	background-image: linear-gradient(to right, #eee, #000);
+    }
+    .levelTitle {
+	font-size: 140%;
+	font-weight: bold;
+	text-align: center;
+	font-style: italic;
+	margin-bottom: 5px;
+    }
+
+    .gameBackButton {
+	width: 40px;
+	height: 40px;
+	background-image: url('images/back.svg');
+	background-repeat: no-repeat;
+	background-size: cover;
+	background-position: center;
+	border-radius: 40px;
+	border: 0px solid black;
+	position: absolute;
+	left: 20px;
+	top: 20px;
+	background-color: #fff;
+    }
+    .gameBackButton:hover {
+	background-color: #ccc;
+        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
+    }
+    .gameBackButton:active {
+	background-color: #cfc;
+    }
+    h1 {
+	text-align: center;
+	font-size: 50px;
+	font-family: 'Brush Script MT';
+	margin-bottom: 10px;
+	margin-top: 5px;
+    }
+    #gameEasyMode {
+	float: right;
+    }
+    #gameHint {
+	float: right;
+    }
+    #gameLoadFromFile {
+	display: none;
+    }
+    .missingLinkTitle {
+	display: block;
+	margin: 0 auto;
+	
+	/*box-shadow: 0 0 20px 20px #f0f0f0;*/
+    }
+    #levelPicker {
+	z-index: 10;
+	position: relative;
+    }
+    .missingLinkGame svg {
+	z-index: 10;
+	position: relative;
+    }
+    /* =========== Level Picker =========== */
+    .levelPickerGrid {
+	background: #eee;
+	border: 1px solid #888;
+	border-radius: 10px;
+        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
+	margin: 0 auto;
+	padding: 10px;
+    }
+    .levelPickerGrid .row {
+	/*text-align: center;*/
+    }
+    .thumbnail {
+	position: relative;
+	padding: 5px;
+	margin: 5px;
+	display: inline-block;
+	vertical-align: middle;
+	width: 100px;
+	height: 100px;
+	border: 4px solid #888;
+	border-radius: 8px;
+	background: #fff;
+    }
+    .thumbnail:hover {
+	border-color: #080;
+        box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);
+	margin: 2px 8px 8px 2px;
+    }
+    .thumbnail:active {
+	border-color: #0f0;
+        box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);
+    }
+    .controls {
+	background: #eee;
+    }
+    .controls, svg.graph {
+	display: block;
+	border: 1px solid #888;
+	border-radius: 10px;
+        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
+	margin: 0 auto 10px auto;
+    }
+    .colorPicker {
+	border: 1px solid black;
+	border-radius: 5px;
+	background: white;
+	padding: 5px;
+	margin-bottom: 5px;
+	box-shadow: 3px 3px 5px grey;
+    }
+    .colorPicker .cpSwatch {
+	width: 60px;
+	height: 60px;
+	border: 1px solid black;
+	border-radius: 5px;
+    }
+    .colorPicker td {
+	padding-left: 10px;
+    }
+    .colorPicker .ui-slider-vertical {
+	height: 60px;
+	width: 5px;
+    }
+    .colorPicker .ui-slider-handle {
+	height: 10px;
+	width: 12px;
+    }
+    .missingLinkTitle {
+	height: 100px;
+    }
+    #game .youWon {
+	position: absolute;
+	top: 200px;  /* height(missingLinkTitle) + 100px */
+	left: 25%;
+	width: 50%;
+	height: 100px;
+	font-size: 30px;
+	background: white;
+	text-align: center;
+	padding: 20px 0;
+	z-index: 100;
+	box-shadow: 3px 3px 5px grey;
+		    
+		    
+    }
+    #resetProgress {
+	display: block;
+	margin: 10px auto;
+	color: #666;
+	background: #bbb;
+	border: 1px solid #444;
+	border-radius: 5px;
+	
+    }
+    #resetConfirm {
+	display: none;
+    }
+    .levelProgressBar {
+	display: block;
+	position: absolute;
+	border: 1px solid #aaa;
+	background: white;
+	bottom: 2px;
+	height: 4px;
+	width: 80px;
+    }
+    .levelProgressBar .progress {
+	height: 4px;
+	float: left;
+	background: #cfc;
+    }
+    .levelLocked {
+	display: block;
+	position: absolute;
+	background-color: rgba(200,200,200,0.8);
+	background-image: url('images/locked.png');
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: 50px 50px;
+	border: 1px solid #888;
+	top: 0px;
+	left: 0px;
+	height: 91px;
+	width: 91px;
+	box-shadow: 0px 0px 5px grey;
+    }