update filter style

src/pages/event/EventRecordList.vue

@@ -1,6 +1,6 @@
 <template>
 	<div v-can="permissionCodes.eventRecord.read" class="registration-record-list">
-		<div class="search-bar">
+		<div class="filters glass">
 			<div class="search-date">
 				<t-input
 					v-model.trim="keyword"
@@ -684,12 +684,11 @@ onUnmounted(() => {
 
 <style scoped lang="less">
 .registration-record-list {
-	gap: 1rem;
 	display: flex;
-	padding: calc(var(--app-nav-height)) 0 6rem 0;
+	padding: var(--app-nav-height) 0 6rem 0;
 	flex-direction: column;
 
-	.search-bar {
+	.filters {
 		top: var(--app-nav-height);
 		left: 0;
 		right: 0;
@@ -697,8 +696,6 @@ onUnmounted(() => {
 		display: flex;
 		padding: .75rem 1rem;
 		position: sticky;
-		background: #F5F5F8;
-		box-shadow: var(--td-shadow-1);
 		flex-direction: column;
 
 		.search-date {
@@ -709,9 +706,8 @@ onUnmounted(() => {
 				--td-input-vertical-padding: .25rem 1rem;
 
 				flex: 1;
-				border: 1px solid rgba(148, 163, 184, .28);
+				border: 1px solid var(--td-component-border);
 				z-index: 2;
-				background: #f8fbff;
 				padding-right: .3rem;
 				border-radius: 1rem;
 			}
@@ -720,7 +716,7 @@ onUnmounted(() => {
 				--td-spacer: 4px;
 				--td-spacer-1: 6px;
 
-				border: 1px solid rgba(148, 163, 184, .18);
+				border: 1px solid var(--td-component-border);
 				z-index: 1;
 				margin-left: -2.5rem;
 				padding-left: 3rem;
@@ -737,11 +733,10 @@ onUnmounted(() => {
 			--td-spacer-1: 6px;
 
 			width: 100%;
+			border: 1px solid rgba(148, 163, 184, .18);
 			overflow: hidden;
 			margin-top: -1rem;
 			padding-top: .8rem;
-			background: #fff;
-			border: 1px solid rgba(148, 163, 184, .18);
 			border-top: none;
 			border-radius: 0 0 1rem 1rem;