Update Stylesheet

Mantan21 · Feb 13, 2023 · cc341a0 · cc341a0
1 parent fdd1ddd
commit cc341a0
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 8 deletions.
diff --git a/src/lib/components/gachainfo/history/_filter.svelte b/src/lib/components/gachainfo/history/_filter.svelte
@@ -25,14 +25,16 @@
 	</span>
 	{#if showTableFilterOption}
 		<div class="options" transition:fade={{ duration: 200 }}>
-			<span on:click={() => filter('All')}>{$t('history.filterAll')}</span>
-			<span on:click={() => filter(5)}>
+			<span on:click={() => filter('All')} class:active={isNaN(filterBy)}>
+				{$t('history.filterAll')}
+			</span>
+			<span on:click={() => filter(5)} class:active={filterBy === 5}>
 				{$t('history.filter', { values: { rarity: 5 } })}
 			</span>
-			<span on:click={() => filter(4)}>
+			<span on:click={() => filter(4)} class:active={filterBy === 4}>
 				{$t('history.filter', { values: { rarity: 4 } })}
 			</span>
-			<span on:click={() => filter(3)}>
+			<span on:click={() => filter(3)} class:active={filterBy === 3}>
 				{$t('history.filter', { values: { rarity: 3 } })}
 			</span>
 		</div>
@@ -93,8 +95,28 @@
 	.v2 .options span {
 		border: 0;
 		padding: calc(0.015 * var(--content-width)) calc(0.02 * var(--content-width));
+		position: relative;
+		margin: 1%;
 	}
 	.v2 .options span:hover {
 		background-color: #717887;
 	}
+
+	.v2 .options span.active,
+	.v2 .options span:hover {
+		background-color: #717887;
+		border-radius: 3rem;
+	}
+
+	.v2 .options span.active::after {
+		content: '✔';
+		color: #eee;
+		position: absolute;
+		display: block;
+		top: 50%;
+		right: 10%;
+		font-size: 170%;
+		line-height: 0;
+		transform: translateY(-50%);
+	}
 </style>
diff --git a/src/lib/components/gachainfo/history/_select-banner.svelte b/src/lib/components/gachainfo/history/_select-banner.svelte
@@ -174,13 +174,28 @@
 		overflow: hidden;
 	}
 	.v2 .item {
-		color: #fff;
+		color: #eee;
 		padding: calc(0.02 * var(--content-width)) calc(0.03 * var(--content-width));
+		position: relative;
+		margin: 0.5% 1%;
 	}
 
 	.v2 .item.active,
 	.v2 .item:hover {
 		background-color: #717887;
+		border-radius: 3rem;
+	}
+
+	.v2 .item.active::after {
+		content: '✔';
+		color: #eee;
+		position: absolute;
+		display: block;
+		top: 50%;
+		right: 5%;
+		font-size: 170%;
+		line-height: 0;
+		transform: translateY(-50%);
 	}
 
 	.selectType.v2 .reset {

diff --git a/src/lib/components/inventory/MainInventory.svelte b/src/lib/components/inventory/MainInventory.svelte
@@ -635,20 +635,36 @@
 		background-color: #565a64;
 		transform: translateY(-100%);
 		border-radius: 1rem;
-		padding: 0.2rem 0;
+		padding: 1% 1.5%;
 		z-index: +10;
 		overflow: hidden;
 	}
 
 	.order-list a {
+		position: relative;
 		padding: 0.85rem 1rem;
+		margin: 0.5% 0;
 		text-decoration: none;
 		color: #eee;
 		transition: all 0.2s;
 	}
+
 	.order-list a.selected,
 	.order-list a:hover {
 		background-color: #717887;
+		border-radius: 2rem;
+	}
+
+	.order-list a.selected::after {
+		content: '✔';
+		color: #eee;
+		position: absolute;
+		display: block;
+		top: 50%;
+		right: 8%;
+		font-size: 170%;
+		line-height: 0;
+		transform: translateY(-50%);
 	}
 
 	.showAll {

diff --git a/src/lib/components/menu/_options.svelte b/src/lib/components/menu/_options.svelte
@@ -215,7 +215,7 @@
 
 	.option-select button,
 	.option-select {
-		font-size: 0.8rem !important;
+		font-size: 0.7rem !important;
 	}
 
 	.select {
@@ -229,17 +229,35 @@
 		z-index: +1;
 		border-radius: 1rem;
 		overflow-y: auto;
+		padding: 1% 2%;
 	}
+
 	.select button {
 		display: block;
 		width: 100%;
 		padding: 6%;
 		color: #eee;
+		margin: 1% 0;
+		transition: all 0.2s;
+		position: relative;
 	}
 
 	.select button:hover,
 	.select button.selected {
 		background-color: #717887;
+		border-radius: 2rem;
+	}
+
+	.select button.selected::after {
+		content: '✔';
+		color: #eee;
+		position: absolute;
+		display: block;
+		top: 50%;
+		right: 8%;
+		font-size: 170%;
+		line-height: 0;
+		transform: translateY(-50%);
 	}
 
 	.locale {
@@ -250,7 +268,7 @@
 		justify-content: center;
 		align-items: center;
 		line-height: 0%;
-		padding: 8%;
+		padding: 6% 8%;
 	}
 
 	.flag {