Styles for dev mode

Author: afonsosousah

assets/style.css

@@ -884,6 +884,11 @@ input:-webkit-autofill:active{
 	font-weight: normal;
 	font-size: 0.7rem;
 }
+.bike-list-element #content #bikeInfo #serialNum {
+	color: var(--black);
+	font-weight: normal;
+	font-size: 0.7rem;
+}
 .bike-list-element #content #reserveBikeIcon {
 	margin-left: auto;
 	margin-right: 20px;
@@ -1497,6 +1502,66 @@ input:-webkit-autofill:active{
 	top: 35%;
 }
 
+.user-settings #settingsContainer #devMode {
+	width: calc(85vw - 2vh);
+	padding: 2vh;
+	color: var(--green);
+	border-radius: 25px;
+	display: flex;
+	justify-content: center;
+	position: relative;
+	/*outline: 1px solid var(--green);*/
+	box-shadow:
+		0px 1px 6px 0px var(--green),
+		0px 0px 5px 0px var(--shadow-green) inset;
+	justify-content: space-between;
+}
+
+.user-settings #settingsContainer #devMode input[type="checkbox"] {
+	/* Add if not using autoprefixer */
+	-webkit-appearance: none;
+	/* Remove most all native input styles */
+	appearance: none;
+	/* For iOS < 15 */
+	background-color: var(--form-background);
+	/* Not removed via appearance */
+	margin: 0;
+  
+	font: inherit;
+	color: currentColor;
+	width: 1.5em;
+	height: 1.5em;
+	border: 0.15em solid currentColor;
+	border-radius: 0.15em;
+  
+	display: grid;
+	place-content: center;
+}
+  
+.user-settings #settingsContainer #devMode input[type="checkbox"]::before {
+	content: "";
+	width: 0.65em;
+	height: 0.65em;
+	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+	transform: scale(0);
+	transform-origin: bottom left;
+	transition: 120ms transform ease-in-out;
+	box-shadow: inset 1em 1em var(--green);
+	/* Windows High Contrast Mode */
+	background-color: CanvasText;
+}
+
+.user-settings #settingsContainer #devMode input[type="checkbox"]:checked::before {
+	transform: scale(1);
+}
+
+.user-settings #settingsContainer #devMode input[type="checkbox"]:disabled {
+	--form-control-color: var(--gray);
+
+	color: var(--gray);
+	cursor: not-allowed;
+}
+
 #bottom {
 	margin-top: 3vh;
 	display: flex;