ctucx.git: trainsearch

style.css: sane input/button/selector margins

diff --git a/src/overlays.js b/src/overlays.js
@@ -8,7 +8,7 @@ export const showAlertModal = (text) => {
 			<div class="modal">
 				<div class="box alert">
 					${text}
-					<br><button @click=${() => { hideOverlay(); resolve(); }}>OK</button>
+					<br><button class="color" @click=${() => { hideOverlay(); resolve(); }}>OK</button>
 				</div>
 			</div>
 		`, ElementById('overlay'));

@@ -22,7 +22,7 @@ export const showSelectModal = (content) => {
 			<div class="modal">
 				<div class="box select">
 					${content}
-					<a @click=${() => { hideOverlay(); resolve(); }}>Close</a>
+					<a class="button color" @click=${() => { hideOverlay(); resolve(); }}>Close</a>
 				</div>
 			</div>
 		`, ElementById('overlay'));

diff --git a/src/settingsView.js b/src/settingsView.js
@@ -43,8 +43,8 @@ const settingsTemplate = () => html`
 		</div>
 
 		<div class="row">
-			<button id="clear" @click=${clearStorage}>${t('clearstorage')}</button>
-			<button style="float:right;" id="save" @click=${saveSettings}>${t('save')}</button>
+			<button class="color" id="clear" @click=${clearStorage}>${t('clearstorage')}</button>
+			<button class="color" id="save" @click=${saveSettings}>${t('save')}</button>
 		</div>
 	</div>
 `;

diff --git a/static/style.css b/static/style.css
@@ -178,6 +178,7 @@ header {
 
 	.row:last-child {
 		border-bottom: unset;
+	    justify-content: right;
 	}
 
 	select {

@@ -222,10 +223,6 @@ header {
 		}
 	}
 
-	.row {
-		margin-top: 8px;
-	}
-
 	form {
 		color: white;
 		display: flex;

@@ -256,16 +253,11 @@ header {
 		.button.icon-arrow2,
 		.button.icon-swap {
 			padding: 0;
-			margin-left: 8px;
 		}
 		
 		.button.go,
 		.button.icon-settings {
-			float: right;
 			height: 32px;
-			display: flex;
-			justify-content: center;
-			align-items: center;
 		}
 
 		.filler {

@@ -274,13 +266,14 @@ header {
 
 		.button.icon-settings {
 			width: 32px;
-			margin-right: 8px;
 			padding: 3px;
 		}
 		
-		.btn.go {
-			margin: 8px 0;
+		.button.go {
+			display: flex;
+			align-items: center;
 			font-size: 20px;
+			padding: 8px;
 		
 			svg {
 				margin-left: 5px;

@@ -632,6 +625,13 @@ header {
 	}
 }
 
+input,
+button,
+.button,
+.selector {
+	margin: 4px;
+}
+
 input[type="date"],
 input[type="time"],
 input[type="text"] {

@@ -655,20 +655,34 @@ input[type="text"]:focus {
 	border-bottom: 1px solid rgba(0, 0, 0, .2);
 }
 
-button {
-	border-radius: 4px;
-	background-color: rgba(20, 30, 255, .7);
-	color: white;
+button,
+.button,
+.selector label {
+	background-color: white;
+	color: black;
+	cursor: pointer;
+	user-select: none;
+	display: inline-block;
+}
+
+button, .button {
 	width: max-content;
 	padding: 8px 20px;
-	margin-left: auto;
 	transition: background-color 300ms;
 	border: none;
 }
 
-button:hover {
+button:hover, .button:hover {
+	background-color: #d3d3d3;
+}
+
+button.color, .button.color {
+	background-color: rgba(20, 30, 255, .7);
+	color: white;
+}
+
+button.color:hover, .button.color:hover {
 	background-color: rgba(70, 100, 255, .8);
-	cursor: pointer;
 }
 
 button:not(:first-child) {

@@ -679,19 +693,8 @@ button:not(:last-child) {
 	margin-right: .2em;
 }
 
-.button,
-.selector label {
-	cursor: pointer;
-	background-color: white;
-	display: inline-block;
-	user-select: none;
-	color: black;
-	padding: 0 10px;
-}
-
 .selector {
 	display: flex;
-	margin-right: 8px;
 
 	input {
 		display: none;

@@ -710,6 +713,7 @@ button:not(:last-child) {
 		justify-content: center;
 		align-items: center;
 		user-select: none;
+		padding: 0 10px;
 	}
 
 	label:after {

@@ -768,12 +772,6 @@ button:not(:last-child) {
 		flex: unset !important;
 	}
 
-	.selector.rectangular,
-	.button.icon-settings,
-	.button.go {
-		margin-bottom: 8px;
-	}
-
 	.button.go {
 		flex-basis: 100%;
 		margin-right: auto;

@@ -793,12 +791,6 @@ button:not(:last-child) {
 
 	#searchView {
 		padding: 10px;
-
-		#time {
-			margin-top: 8px;
-			width: 100%;
-			flex-shrink: 0;
-		}
 	}
 
 	.row {

@@ -809,8 +801,10 @@ button:not(:last-child) {
 		flex-wrap: unset;
 	}
 
-	.loadMore.flipped {
-		margin-top: 15px;
+	#journeysView {
+		.loadMore.flipped {
+			margin-top: 15px;
+		}
 	}
 
 	.loadMore {

@@ -838,7 +832,6 @@ button:not(:last-child) {
 		}
 
 		#date {
-			margin-right: 8px;
 			width: 50%;
 		}