mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2026-03-26 05:39:45 +08:00
💄 调整UI
This commit is contained in:
@@ -8,26 +8,20 @@
|
||||
.tsl-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
margin: 5px 0;
|
||||
background: var(--box-bg-3);
|
||||
color: var(--box-text-4);
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
background: var(--box-bg-1);
|
||||
color: var(--box-text-1);
|
||||
font-family: var(--font-title);
|
||||
gap: 5px;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.tsl-box :first-child {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
box-sizing: border-box;
|
||||
padding: 2px;
|
||||
border-radius: 5px;
|
||||
filter: invert(22%) sepia(7%) saturate(1241%) hue-rotate(182deg) brightness(95%) contrast(99%);
|
||||
}
|
||||
|
||||
.dark .tsl-box {
|
||||
background: #2c313a;
|
||||
color: #faf7e8;
|
||||
filter: invert(0.75);
|
||||
}
|
||||
|
||||
.dark .tsl-box :first-child {
|
||||
|
||||
@@ -54,7 +54,7 @@ function getBoxData(avatar: TGApp.Sqlite.Abyss.CharacterInfo): TItemBoxData {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
gap: 10px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.tud-db-time {
|
||||
|
||||
@@ -28,11 +28,13 @@ const props = defineProps<TuaDetailLevelProps>();
|
||||
<style lang="css" scoped>
|
||||
.tua-dl-box {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
margin-top: 10px;
|
||||
padding: 8px;
|
||||
border: 1px solid var(--common-shadow-1);
|
||||
border-radius: 4px;
|
||||
margin-top: 8px;
|
||||
background: var(--box-bg-2);
|
||||
gap: 10px;
|
||||
gap: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -24,15 +24,15 @@ const props = defineProps<TuaDetailProps>();
|
||||
</script>
|
||||
<style lang="css" scoped>
|
||||
.tuad-box {
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
background: var(--box-bg-1);
|
||||
}
|
||||
|
||||
.tuad-index-box {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
grid-gap: 10px;
|
||||
grid-gap: 8px;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -70,6 +70,7 @@ function getBoxData(avatar: TGApp.Sqlite.Abyss.Character): TItemBoxData {
|
||||
color: var(--tgc-yellow-1);
|
||||
font-family: var(--font-text);
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tuao-val-icons {
|
||||
|
||||
@@ -48,12 +48,12 @@ function getItemBox(item: TGApp.Game.Combat.Avatar): TItemBoxData {
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 10px;
|
||||
gap: 4px;
|
||||
|
||||
&.grid {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
grid-gap: 10px;
|
||||
grid-gap: 4px;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -31,7 +31,7 @@ const columnCnt = computed<number>(() => {
|
||||
.tuc-buff-box {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
grid-gap: 5px;
|
||||
grid-gap: 4px;
|
||||
grid-template-columns: repeat(v-bind(columnCnt), 1fr);
|
||||
}
|
||||
|
||||
@@ -42,8 +42,8 @@ const columnCnt = computed<number>(() => {
|
||||
height: 80px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
background-color: var(--box-bg-3);
|
||||
|
||||
img {
|
||||
@@ -56,14 +56,14 @@ const columnCnt = computed<number>(() => {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 0 5px;
|
||||
padding: 0 4px;
|
||||
background: var(--common-shadow-2);
|
||||
border-bottom-right-radius: 5px;
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-right-radius: 4px;
|
||||
border-top-left-radius: 4px;
|
||||
color: var(--tgc-white-2);
|
||||
font-family: var(--font-title);
|
||||
font-size: 14px;
|
||||
text-shadow: 0 0 5px rgb(0 0 0 / 20%);
|
||||
text-shadow: 0 0 4px rgb(0 0 0 / 20%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -46,7 +46,7 @@ function getTime(): string {
|
||||
.tuco-box {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
grid-gap: 10px;
|
||||
grid-gap: 8px;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -35,10 +35,10 @@ defineProps<{ modelValue: TGApp.Game.Combat.RoundData }>();
|
||||
height: fit-content;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
background: var(--box-bg-1);
|
||||
row-gap: 5px;
|
||||
row-gap: 4px;
|
||||
}
|
||||
|
||||
.tucr-title {
|
||||
@@ -46,7 +46,7 @@ defineProps<{ modelValue: TGApp.Game.Combat.RoundData }>();
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
margin-right: auto;
|
||||
column-gap: 5px;
|
||||
column-gap: 4px;
|
||||
|
||||
img {
|
||||
width: 30px;
|
||||
@@ -67,13 +67,10 @@ defineProps<{ modelValue: TGApp.Game.Combat.RoundData }>();
|
||||
.tucr-content {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
column-gap: 10px;
|
||||
|
||||
.main {
|
||||
width: 180px;
|
||||
}
|
||||
column-gap: 8px;
|
||||
|
||||
.sub {
|
||||
width: 100%;
|
||||
|
||||
@@ -11,12 +11,14 @@ defineProps<{ title: string }>();
|
||||
.tuc-sub-box {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 200px;
|
||||
height: 205px;
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
padding: 8px;
|
||||
border: 1px solid var(--common-shadow-1);
|
||||
border-radius: 4px;
|
||||
background: var(--box-bg-2);
|
||||
}
|
||||
|
||||
|
||||
@@ -22,8 +22,8 @@ defineProps<{ title: string; val: string | number | Array<number> }>();
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
background: var(--box-bg-1);
|
||||
}
|
||||
|
||||
@@ -37,6 +37,7 @@ defineProps<{ title: string; val: string | number | Array<number> }>();
|
||||
color: var(--tgc-yellow-1);
|
||||
font-family: var(--font-text);
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tuct-icons {
|
||||
|
||||
Reference in New Issue
Block a user