colorswip-ui-rework

1 files changed, 34 insertions, 57 deletions

diff --git a/play2.css b/play2.css
index 52cc061..07f0ab1 100644
--- a/play2.css
+++ b/play2.css
@@ -23,17 +23,10 @@ main {
 	position: absolute;
 }
 
-.card {
-	background-size: 100% 100%;
-	width: 206px;
-	height: 281px;
-	border-radius: 10px;
-	box-shadow: 0 0 0 1px black, 1px 1px 4px #0006;
-}
+/* SPACES */
 
 .track {
 	position: absolute;
-	background-color: #fff4;
 	border: 3px solid transparent;
 	width: 52px;
 	height: 54px;
@@ -45,11 +38,14 @@ main {
 
 .front {
 	position: absolute;
-	background-color: #fff4;
 	border: 6px solid transparent;
 	border-radius: 34px;
+}
 
+.front_container {
+	position: absolute;
 	display: flex;
+	justify-content: center;
 	flex-wrap: wrap;
 	gap: 4px;
 }
@@ -58,67 +54,34 @@ main {
 	border-color: white;
 }
 
-.front div {
+.front_container div {
 	margin-right: -30px;
+	margin-bottom: -30px;
 }
 
+/* TOKENS */
+
 .token {
-	background-color: #fff4;
 	border: 3px solid black;
 	width: 45px;
 	height: 45px;
-	box-shadow: 0 0 0 1px black, 1px 1px 4px #0006;
 }
 
+.token.white { background-color: hsl(0,0%,80%); border-color: hsl(0,0%,90%) hsl(0,0%,70%) hsl(0,0%,70%) hsl(0,0%,90%); box-shadow: 0 0 0 1px hsl(0,0%,26%), 0px 1px 4px #0008; }
+.token.red { background-color: hsl(1,100%,47%); border-color: hsl(1,100%,57%) hsl(1,100%,37%) hsl(1,100%,37%) hsl(1,100%,57%); box-shadow: 0 0 0 1px hsl(1,100%,15%), 0px 1px 4px #0008; }
+.token.pink { background-color: hsl(19,56%,67%); border-color: hsl(19,56%,77%) hsl(19,56%,57%) hsl(19,56%,57%) hsl(19,56%,77%); box-shadow: 0 0 0 1px hsl(19,56%,22%), 0px 1px 4px #0008; }
+.token.brown { background-color: hsl(50,33%,60%); border-color: hsl(50,33%,70%) hsl(50,33%,50%) hsl(50,33%,50%) hsl(50,33%,70%); box-shadow: 0 0 0 1px hsl(50,33%,20%), 0px 1px 4px #0008; }
+.token.gray { background-color: hsl(240,1%,65%); border-color: hsl(240,1%,75%) hsl(240,1%,55%) hsl(240,1%,55%) hsl(240,1%,75%); box-shadow: 0 0 0 1px hsl(240,1%,22%), 0px 1px 4px #0008; }
+
+.token.blank { width: 45px; height: 45px; }
 .token.round { width: 58px; height: 58px; }
 .token.square { width: 45px; height: 45px; }
 .token.standee { width: 44px; height: 54px; }
 .token.medallion { width: 53px; height: 53px; }
 
-.token.blank {
-	width: 45px;
-	height: 45px;
-	background-color: red;
-	border-radius: 50%;
-}
-
-.token.round, .token.blank {
-	background-color: red;
-	border-radius: 50%;
-	border-color: pink darkred darkred pink;
-}
-
-.token.round.off {
-	background-color: gray;
-	border-color: silver gray gray silver;
-}
-
-.token.standee {
-	background-color: white;
-	border-radius: 10px;
-	border-color: #ddd #888 #888 #ddd;
-}
-
-.player {
-	border-color: pink darkred darkred pink;
-}
-
-.token.front_plus,
-.token.front_minus {
-	background-color: tan;
-	border-color: tan brown brown tan;
-}
-
-.front_minus + .front_minus,
-.front_plus + .front_plus {
-	Xmargin-left: -30px;
-}
-
-.token.medallion {
-	background-color: tan;
-	border-radius: 10px;
-	border-color: wheat brown brown wheat;
-}
+.token.round, .token.blank { border-radius: 50%; }
+.token.standee { border-radius: 10px; }
+.token.medallion { border-radius: 10px; }
 
 .medallion_container {
 	position: absolute;
@@ -152,11 +115,25 @@ main {
 	box-shadow: 0 0 0 3px white;
 }
 
+.card.selected {
+	box-shadow: 0 0 0 3px aqua;
+}
+
+/* CARDS */
+
+.card {
+	background-size: 100% 100%;
+	width: 206px;
+	height: 281px;
+	border-radius: 10px;
+	box-shadow: 0 0 0 1px black, 1px 1px 4px #0006;
+}
+
 .card.action {
 	box-shadow: 0 0 0 3px white;
 }
 
-.selected {
+.card.selected {
 	box-shadow: 0 0 0 3px aqua;
 }