zenn/tier-maker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

릴리스: v1.2.0 피그마 기반 앱 셸 1차 리디자인

Browse Source
This commit is contained in:
zenn
2026-03-30 14:37:30 +09:00
parent 2bee78ba5e
commit b15398761b
11 changed files with 819 additions and 535 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
frontend/src/views/FavoriteTierListsView.vue
View File

@@ -108,7 +108,7 @@ onMounted(loadFavorites)
<style scoped>
.wrap {
display: grid;
gap: 14px;
gap: 18px;
}
.head {
display: flex;
@@ -119,11 +119,13 @@ onMounted(loadFavorites)
}
.title {
margin: 0;
font-size: 28px;
font-size: 30px;
color: rgba(255, 255, 255, 0.96);
letter-spacing: -0.04em;
}
.desc {
margin-top: 6px;
opacity: 0.78;
color: rgba(255, 255, 255, 0.58);
}
.toolbar {
display: flex;
@@ -133,15 +135,15 @@ onMounted(loadFavorites)
.input,
.select {
padding: 10px 12px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(0, 0, 0, 0.18);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.92);
}
.btn {
padding: 10px 12px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.92);
font-weight: 800;
@@ -152,13 +154,13 @@ onMounted(loadFavorites)
}
.list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
.row {
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.04);
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.16);
background: rgba(62, 62, 62, 0.82);
overflow: hidden;
display: grid;
gap: 10px;
@@ -176,7 +178,7 @@ onMounted(loadFavorites)
.row__thumbWrap {
width: 100%;
aspect-ratio: 16 / 9;
background: rgba(255, 255, 255, 0.03);
background: #555;
}
.row__thumb,
.row__thumbPlaceholder {
@@ -188,7 +190,7 @@ onMounted(loadFavorites)
object-fit: cover;
}
.row__thumbPlaceholder {
background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
background: #555;
}
.row__head {
padding: 14px 14px 0;
@@ -241,6 +243,11 @@ onMounted(loadFavorites)
font-weight: 800;
}
@media (max-width: 1100px) {
.list {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 960px) {
.list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}