build

frontend/src/style.css

@@ -1,44 +1,6 @@
 :root {
-	font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-	line-height: 1.5;
-	font-weight: 400;
-
-	color-scheme: light dark;
-	color: rgba(255, 255, 255, 0.87);
-	background-color: #242424;
-
-	font-synthesis: none;
-	text-rendering: optimizeLegibility;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-}
-
-h1 {
-	font-size: 3.2em;
-	line-height: 1.1;
-}
-
-button {
-	border-radius: 8px;
-	border: 1px solid transparent;
-	padding: 0.6em 1.2em;
-	font-size: 1em;
-	font-weight: 500;
-	font-family: inherit;
-	background-color: #1a1a1a;
-	cursor: pointer;
-	transition: border-color 0.25s;
-}
-button:hover {
-	border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-	outline: 4px auto -webkit-focus-ring-color;
-}
-
-.card {
-	padding: 2em;
+	--primary-text-color: #ffffff;
+	--secondary-background-color: #669084;
 }
 
 #custom-ui-app {
@@ -49,15 +11,43 @@ button:focus-visible {
 	text-align: center;
 }
 
-@media (prefers-color-scheme: light) {
-	:root {
-		color: #213547;
-		background-color: #ffffff;
-	}
-	a:hover {
-		color: #747bff;
-	}
-	button {
-		background-color: #f9f9f9;
-	}
+.page-turn-button {
+	border-radius: 5px;
+	border: none;
+}
+
+.page-num-button {
+	border: none;
+	background-color: Transparent;
+}
+
+.interaction-button {
+	border: none;
+	border-radius: 5px;
+	/*background-color: mediumseagreen;*/
+	color: white;
+	background-color: rgb(69, 112, 101);
+}
+
+.interaction-button:hover {
+	background-color: rgb(82, 132, 119);
+}
+
+#client-content {
+	display: flex;
+	flex-direction: column;
+	width: 95%;
+	justify-content: center;
+}
+
+#filter-container {
+	display: flex;
+	flex-direction: row;
+	gap: 5px 5px;
+}
+
+#paging-controls {
+	display: flex;
+	justify-content: flex-end;
+	gap: 5px;
 }