New design

common.css

@@ -0,0 +1,125 @@
+:root {
+    font-size: 0.5em;
+}
+
+
+
+/* Connect */
+
+.connect {
+	position: absolute;
+	top: 0;
+	left: 5rem;
+    width: 30rem;
+    z-index: 100;
+
+	box-sizing: border-box;
+	padding: 4rem 2rem 0;
+
+	background: #fff;
+	border-bottom-left-radius: 2rem;
+	border-bottom-right-radius: 2rem;
+
+	color: #000;
+	font-size: 1.6rem;
+	line-height: 140%;
+	text-align: left;
+
+	display: flex;
+	flex-direction: column;
+
+	will-change: transform;
+	transition: transform .3s ease-in-out;
+}
+body.connected .connect {
+	transform: translateY(-50rem);
+	pointer-events: none;
+}
+.connect h1 {
+	color: #000;
+	font-size: 4rem;
+	font-weight: bold;
+	text-transform: lowercase;
+	margin-bottom: 2rem;
+}
+.connect h1 em {
+	color: #aaa;
+}
+.connect h1 svg {
+    position: relative;
+	top: -1rem;
+	width: 5rem;
+	vertical-align: middle;
+	fill: #367ebd;
+}
+.connect button {
+	background: #367ebd;
+	border-color: #367ebd;
+	color: #fff;
+
+	margin: 3rem 0 2rem;
+	padding: 1rem 2rem;
+	font-size: 3rem;
+	text-transform: lowercase;
+}
+.connect a {
+	color: #367ebd;
+	cursor: pointer;
+}
+
+
+
+
+/* Checkbox */
+
+input[type=checkbox] {
+	-webkit-appearance: none;
+	position: relative;
+	height: 5vh;
+	width: 7vh;
+	margin-top: -0.5vh;
+	outline: none;
+
+	margin-right: 1vh;
+	vertical-align: middle;
+	cursor: pointer;
+}
+
+input[type=checkbox]::before {
+	position: absolute;
+    display: block;
+	content: '';
+
+	height: 100%;
+	width: 100%;
+	box-sizing: border-box;
+	border: .3vh solid #888;
+	border-radius: 1vh;
+	pointer-events: none;
+}
+input[type=checkbox]::after {
+	position: absolute;
+    display: block;
+    content: '';
+	border-radius: 0.4vh;
+	top: .58vh;
+	left: .65vh;
+	height: 3.8vh;
+	width: 3.8vh;
+	pointer-events: none;
+
+	transform: translateX(0);
+	background: #888;
+
+	transition: all .3s ease-in-out;
+}
+input[type=checkbox]:checked::after {
+	transform: translateX(1.8vh);
+    background: #367ebd;
+}
+
+
+label {
+	font-size: 2vh;
+	color: #ddd;
+}

index.css

@@ -1,6 +1,10 @@
 
 /* Basic layout */
 
+:root {
+	--settings-height: 25vh;
+}
+
 * {
 	margin: 0;
 	padding: 0;
@@ -13,31 +17,6 @@ html {
 body {
 	background: #444;
 	text-align: center;
-
-	display: grid;
-	grid-template-columns: auto minmax(100vw,60vh) auto;
-	grid-template-rows: 60vh auto;
-}
-
-
-body > svg {
-	grid-column: 2;
-	grid-row: 1;
-
-	width: 100%;
-	height: 100%;
-	padding: 5vh;
-	box-sizing: border-box;
-}
-
-body > div {
-	grid-column: 2;
-	grid-row: 2;
-	padding: 0 5vw;
-}
-
-body > div > div:first-child {
-	min-height: 40vh;
 }
 
 button {
@@ -52,77 +31,150 @@ button {
 
 
 
+/* Content */
 
+.content {
+	opacity: 0.3;
+	transition: opacity .5s, fill .5s;
+}
 
+body.connected .content {
+	opacity: 1;
+}
 
-/* Color input */
 
 
-#color {
-	display: none;
+
+/* Glasses */
+
+.content .lightbulb {
+	position: absolute;
+	top: 10vh;
+	left: 10vw;
+	width: 80vw;
+	height: calc(100vh - var(--settings-height) - 20vh);
+}
+
+.content svg {
 	position: absolute;
-	top: 0;
 	left: 0;
-	height: 60vh;
 	width: 100%;
-	opacity: 0;
-}
-.connected #color {
-	display: block;
+	height: 100%;
 }
 
 
 
+/* Settings */
 
+.settings {
+	position: absolute;
+	top: calc(100vh - var(--settings-height));
+	width: 100%;
+	min-height: var(--settings-height);
+	background: #333;
 
-
-/* Animated bulb */
-
-body > svg {
+	transition: opacity .3s ease-in-out;
 	opacity: 0.3;
-
-	transition: opacity .5s;
+	pointer-events: none;
 }
-body.connected > svg {
+body.connected .settings {
 	opacity: 1;
+	pointer-events: auto;
 }
 
 
 
+/* Pills */
 
+.pills {
+	margin-top: -2.4vh;
+	margin-bottom: 0;
+	display: flex;
+}
+.pills button {
+	margin: 0;
+	padding: 1vh 2vh;
+	border-radius: 0;
+	border-left: none;
+	font-size: 2vh;
+	background: #333;
+}
+.pills button:first-of-type {
+	border-left: .3vh solid #888;
+	border-top-left-radius: 1vh;
+	border-bottom-left-radius: 1vh;
+	margin-left: auto;
+}
+.pills button:last-of-type {
+	border-top-right-radius: 1vh;
+	border-bottom-right-radius: 1vh;
+	margin-right: auto;
+}
 
+body.color button#color,
+body.customize button#customize {
+	background: #888;
+	color: #fff;
+}
 
 
 
 
 
-/* Buttons */
-
-button#connect {
-	margin: 2vh 0;
-	padding: 1vh 2vh;
-	font-size: 3vh;
-
-}
+/* Views */
 
-button#emulate {
-	color: #aaa;
-	border: none;
-	background: none;
-	font-size: 1.3vh;
+.views {
+	padding: 6vh 0;
+	min-height: 6vh;
+	display: block;
 }
-
-body.connected div.buttons {
+.views > div {
 	display: none;
 }
 
+body.color div#colorView,
+body.customize div#customizeView {
+	display: block;
+}
 
 
 
+/* Colors */
 
+.swatches {
+	display: inline-block;
+	white-space: nowrap;
+}
 
-
-
+#colorView button.color {
+	width: 6vh;
+	height: 6vh;
+	margin: -1vh 1vh 4vh;
+}
+#colorView button.red {
+	background: #ff0000;
+}
+#colorView button.green {
+	background: #00ff00;
+}
+#colorView button.blue {
+	background: #0000ff;
+}
+#colorView button.yellow {
+	background: #ffff00;
+}
+#colorView button.cyan {
+	background: #00ffff;
+}
+#colorView button.magenta {
+	background: #ff00ff;
+}
+#colorView button.white {
+	background: #ffffff;
+}
+#colorView button.black {
+	background: #000000;
+}
 
 
 /* Style editor */
@@ -134,7 +186,7 @@ style[contenteditable] {
 
 	font-size: 2vh;
 	text-align: left;
-	margin: 10vh;
+	margin: 0 10vh 10vh;
 	outline: none;
 }
 
@@ -146,26 +198,3 @@ style[contenteditable] {
 
 
 
-/* Github link */
-
-#about {
-	display: block;
-	padding: 2vh 0;
-}
-#about a {
-	font-size: 1vh;
-	text-decoration: none;
-	color: #999;
-}
-#about svg {
-	display: inline-block;
-	height: 1.3em;
-	vertical-align: bottom
-}
-#about svg path {
-	fill: currentColor;
-	fill-rule: evenodd;
-}
-#about:hover svg path {
-	color: #cc174d;
-}