added search bar + platform select + refresh btn

2024-04-10 18:53:16 +02:00
parent acb585b47a
commit 8cc2c7b019
3 changed files with 256 additions and 9 deletions
--- a/index.css
+++ b/index.css
@@ -10,8 +10,11 @@

 :root {
 	--blue: #2D327D;
+	--granite: #686868;
+	--graphite: #B7B7B7;
 	--cloud: #E5E5E5;
 	--white: #FFFFFF;
+	--black: #000000;
 	--red: #EB0000;
 	--red125: #C60018;
 	--red150: #A20013;
@@ -35,7 +38,48 @@ body {
 }

 #station {
-	color: black;
+	display: flex;
+	gap: 1em;
+	align-items: flex-end;
+	color: var(--black);
+	margin: 1em 0;
+}
+
+#refresh {
+	width: 3.4em;
+	height: 3.4em;
+	cursor: pointer;
+	position: relative;
+	background-color: var(--white);
+	border: none;
+	transition: background-color 0.2s;
+}
+
+#refresh::after {
+	content: "";
+	position: absolute;
+	inset: 0;
+	width: 100%;
+	height: 100%;
+	background-color: var(--granite);
+	mask-image: url(icons/arrows-circle-medium.svg);
+	-webkit-mask-image: url(icons/arrows-circle-medium.svg);
+	mask-size: contain;
+	-webkit-mask-size: contain;
+	mask-position: center;
+	-webkit-mask-position: center;
+	mask-repeat: no-repeat;
+	-webkit-mask-repeat: no-repeat;
+	transition: transform 0.2s;
+	will-change: transform;
+}
+
+#refresh:hover {
+	background-color: var(--cloud);
+}
+
+#refresh:hover::after {
+	transform: rotate(90deg);
 }

 #grid {
@@ -210,4 +254,109 @@ body {
 	-webkit-mask-repeat: no-repeat;
 	mask-position: center;
 	-webkit-mask-position: center;
+}
+
+#search {
+	display: flex;
+	gap: 0.5em;
+}
+
+#search-input {
+	font-family: inherit;
+	font-size: 80%;
+	padding: 6px 8px 6px 8px;
+	border: solid var(--graphite) 1px;
+}
+
+#search-input:focus-visible {
+	outline: none;
+	border-color: var(--granite);
+}
+
+#search-btn {
+	font-family: inherit;
+	font-size: 80%;
+	padding: 11px 40px 11px 40px;
+	background-color: var(--red);
+	color: var(--white);
+	border: none;
+	cursor: pointer;
+}
+
+#search-btn:hover {
+	background-color: var(--red125);
+}
+
+#stations {
+	display: flex;
+	flex-direction: column;
+}
+
+#stations .station {
+	padding: 0.5em 2em;
+	border-bottom: solid var(--graphite) 1px;
+	cursor: pointer;
+	color: var(--black);
+}
+
+#stations .station:last-child {
+	border-bottom: none;
+}
+
+#stations .station:hover {
+	background-color: var(--cloud);
+}
+
+.select-wrapper {
+	position: relative;
+	width: 10em;
+}
+.select-wrapper select {
+	font-family: inherit;
+	font-size: inherit;
+	background-color: var(--white);
+	border: solid var(--graphite) 1px;
+	border-radius: 0;
+	padding: 11px 40px 11px 40px;
+	color: var(--granite);
+	text-align: left;
+	appearance: none;
+	-webkit-appearance: none;
+	width: 100%;
+	cursor: pointer;
+}
+
+.select-wrapper .select-arrow {
+	width: 2em;
+	height: 100%;
+	position: absolute;
+	right: 0;
+	background-color: var(--granite);
+	mask-image: url(icons/chevron-small-down-medium.svg);
+	-webkit-mask-image: url(icons/chevron-small-down-medium.svg);
+	mask-size: contain;
+	-webkit-mask-size: contain;
+	mask-position: center;
+	-webkit-mask-position: center;
+	mask-repeat: no-repeat;
+	-webkit-mask-repeat: no-repeat;
+	pointer-events: none;
+}
+
+.select-wrapper select:focus-visible {
+	outline: none;
+	border-color: var(--granite);
+}
+
+.field {
+	display: flex;
+	flex-direction: column;
+	gap: 0.2em;
+}
+
+.field label {
+	font-family: inherit;
+	font-size: 80%;
+	color: var(--granite);
+	padding-left: 0.5em;
 }