Merge pull request #280 from Paroxity/game-sync

Author: DaPigGuy

src/App.scss

@@ -7,6 +7,7 @@ button {
 }
 
 @media (max-height: 720px) {
+
 	html,
 	input,
 	button {
@@ -63,14 +64,17 @@ h6 {
 }
 
 .masonry-grid {
-	display: -webkit-box; /* Not needed if autoprefixing */
-	display: -ms-flexbox; /* Not needed if autoprefixing */
+	display: -webkit-box;
+	/* Not needed if autoprefixing */
+	display: -ms-flexbox;
+	/* Not needed if autoprefixing */
 	display: flex;
 	width: auto;
 }
 
 .masonry-grid_column {
-	padding: 0 15px; /* gutter size */
+	padding: 0 15px;
+	/* gutter size */
 	background-clip: padding-box;
 }
 
@@ -113,18 +117,47 @@ button::before {
 	bottom: 0;
 	left: 0;
 	width: 100%;
-	background: linear-gradient(
-		180deg,
-		rgba(0, 0, 0, 0) 0%,
-		rgba(245, 227, 173, 0.25) 100%
-	);
+	background: linear-gradient(180deg,
+			rgba(0, 0, 0, 0) 0%,
+			rgba(245, 227, 173, 0.25) 100%);
 	transition: all 0.2s ease-out;
 }
 
 button:hover::before {
 	height: 100%;
 }
 
+/* Styled select to match button */
+select {
+	font-family: "Roboto", sans-serif;
+	text-transform: uppercase;
+	color: #bea966;
+	font-weight: 700;
+	font-size: 1.25em;
+	display: inline-block;
+	position: relative;
+	background-color: rgba(245, 227, 173, 0.05);
+	border: 1px solid rgba(245, 227, 173, 0);
+	padding: 3px 10px;
+	transition: all 0.2s ease-out;
+	appearance: none;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	background-image: none;
+}
+
+select:focus {
+	outline: none;
+}
+
+select:hover {
+	border: 1px solid rgba(245, 227, 173, 0.25);
+}
+
+select:disabled {
+	pointer-events: none;
+}
+
 .button {
 	position: relative;
 	width: fit-content;
@@ -204,7 +237,8 @@ button:hover::before {
 	margin-top: 1em;
 	width: auto;
 
-	button {
+	button,
+	select {
 		width: 100%;
 		height: 100%;
 	}
@@ -287,11 +321,9 @@ input::placeholder {
 	bottom: 0;
 	left: 0;
 	width: 100%;
-	background: linear-gradient(
-		180deg,
-		rgba(0, 0, 0, 0) 0%,
-		rgba(245, 227, 173, 0.25) 90%
-	);
+	background: linear-gradient(180deg,
+			rgba(0, 0, 0, 0) 0%,
+			rgba(245, 227, 173, 0.25) 90%);
 	transition: all 0.2s ease-out;
 }
 
@@ -340,6 +372,91 @@ input:disabled {
 	pointer-events: none;
 }
 
+.custom-select {
+	background-color: rgba(245, 227, 173, 0.05);
+	border: 1px solid rgba(245, 227, 173, 0);
+	padding: 5px 0.75em 0.1em;
+	font-size: 1.25em;
+	cursor: url("icons/cursor.png"), auto !important;
+	color: #bea966;
+	font-family: "Roboto", sans-serif;
+	text-align: left;
+}
+
+.select-container:focus-within::before {
+	height: 0;
+}
+
+.custom-select:focus-within::after {
+	visibility: hidden;
+	transform: scaleX(0);
+}
+
+.custom-select .select-label {
+	color: #bea966;
+	display: block;
+	text-align: left;
+}
+
+.custom-select .select-arrow {
+	position: absolute;
+	right: 0.75em;
+	top: 50%;
+	transform: translateY(-50%);
+	color: #bea966;
+	pointer-events: none;
+}
+
+.custom-select.disabled {
+	opacity: 0.5;
+	pointer-events: none;
+}
+
+.select-dropdown {
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: calc(100% + 6px);
+	z-index: 10;
+}
+
+.select-dropdown-box {
+	background-color: rgba(8, 6, 21, 1);
+	position: relative;
+	padding: 0;
+	color: white;
+}
+
+.select-dropdown-box::before {
+	content: "";
+	position: absolute;
+	width: calc(100% + 2px);
+	height: calc(100% + 2px);
+	right: -1px;
+	top: -1px;
+	background: linear-gradient(60deg, #f5e3ad, #bea966, #f5e3ad, #f5e3ad, #bea966);
+	z-index: -1;
+	animation: animatedgradient 3s ease alternate infinite;
+	background-size: 300% 300%;
+}
+
+.select-option {
+	padding: 0.375em 0.5em;
+	text-align: left;
+	white-space: nowrap;
+	cursor: url("icons/cursor.png"), auto !important;
+	font-size: 1em;
+}
+
+.select-option:hover {
+	background-color: rgba(64, 57, 45, 0.4);
+}
+
+.select-option.selected,
+.select-option.selected:hover {
+	background-color: #40392d;
+}
+
 /* Loading Screen */
 .loading {
 	font-size: 35px;
@@ -354,6 +471,17 @@ input:disabled {
 	animation: spin 0.4s ease-out infinite;
 }
 
+.spinner-small {
+	border: 2px solid transparent;
+	border-top: 2px solid #c9ba8f;
+	border-radius: 50%;
+	width: 16px;
+	height: 16px;
+	animation: spin 0.4s ease-out infinite;
+	display: inline-block;
+	margin: 0;
+}
+
 @keyframes spin {
 	100% {
 		transform: rotate(360deg);
@@ -462,6 +590,88 @@ input:disabled {
 	.input {
 		margin-top: 1em;
 	}
+
+	/* Make form inputs and custom select full-width in popups */
+	.form-bg {
+		width: 100%;
+	}
+
+	.input {
+		width: 100%;
+	}
+
+	.input input {
+		width: 100%;
+		box-sizing: border-box;
+	}
+
+	.custom-select {
+		width: 100%;
+		box-sizing: border-box;
+	}
+}
+
+/* LinkPrompt popup adjustments */
+.link-popup {
+	text-align: left;
+}
+
+/* Reduce left-right padding for LinkPrompt */
+.popup-box.link-popup {
+	padding: 3em 3em;
+	/* was 3em 6em */
+}
+
+/* Make LinkPrompt header gold and slightly smaller */
+.link-popup .mastery-rank {
+	font-size: 1.25em;
+	/* smaller than default */
+	color: #bea966;
+	/* gold */
+	padding-bottom: 16px;
+	/* adjust per request */
+}
+
+/* Reduce space between header and first form control */
+.popup-box.link-popup .input:first-of-type {
+	margin-top: 0.33em;
+	/* was 1em */
+}
+
+/* Inline error box for LinkPrompt */
+.link-popup .error-box {
+	border: 1px solid #ff4d4f;
+	background-color: rgba(255, 77, 79, 0.12);
+	color: #ff8082;
+	padding: 0.5em 0.75em;
+	margin-top: 0.5em;
+	margin-bottom: 0.5em;
+	text-transform: none;
+}
+
+.link-popup .button-row {
+	display: flex;
+	justify-content: space-between;
+	gap: 1em;
+	flex-wrap: nowrap;
+	margin-top: 1em;
+}
+
+.link-popup .button-row .button {
+	flex: 1 1 0;
+	/* equal width buttons in a row */
+	margin: 0;
+	/* override default center margins */
+	width: 100%;
+}
+
+.link-popup .button-row .button.center {
+	margin: 0;
+	/* ensure not centered in flex row */
+}
+
+.link-popup .button-row .button button {
+	width: 100%;
 }
 
 .popup-box::before {
@@ -471,14 +681,12 @@ input:disabled {
 	height: calc(100% + 2px);
 	right: -1px;
 	top: -1px;
-	background: linear-gradient(
-		60deg,
-		#f5e3ad,
-		#bea966,
-		#f5e3ad,
-		#f5e3ad,
-		#bea966
-	);
+	background: linear-gradient(60deg,
+			#f5e3ad,
+			#bea966,
+			#f5e3ad,
+			#f5e3ad,
+			#bea966);
 	z-index: -1;
 	animation: animatedgradient 3s ease alternate infinite;
 	background-size: 300% 300%;
@@ -690,12 +898,10 @@ input:disabled {
 		color: white;
 		font-weight: 400;
 		margin: 10px 10px 0;
-		background: linear-gradient(
-			90deg,
-			rgba(0, 0, 0, 0) 0%,
-			rgba(129, 107, 62, 1) 50%,
-			rgba(0, 0, 0, 0) 100%
-		);
+		background: linear-gradient(90deg,
+				rgba(0, 0, 0, 0) 0%,
+				rgba(129, 107, 62, 1) 50%,
+				rgba(0, 0, 0, 0) 100%);
 	}
 }
 
@@ -738,7 +944,7 @@ input:disabled {
 	padding-top: 5px;
 }
 
-.mastery-info > span {
+.mastery-info>span {
 	display: block;
 }
 
@@ -806,11 +1012,11 @@ input:disabled {
 }
 
 .item-tooltip {
-	& > :not(:last-child) {
+	&> :not(:last-child) {
 		margin-bottom: 1em;
 	}
 
-	& > span {
+	&>span {
 		display: block;
 	}
 }
@@ -842,7 +1048,7 @@ input:disabled {
 }
 
 .relics {
-	& > span {
+	&>span {
 		display: block;
 		padding-left: 1em;
 	}
@@ -890,4 +1096,3 @@ input:disabled {
 	width: 1em;
 	display: inline-block;
 }
-