Added projects features

This commit is contained in:
Laux Dev
2026-02-26 11:59:16 +08:00
parent b1a79b90a1
commit 7b99f73a7e
11 changed files with 904 additions and 151 deletions

View File

@@ -8,9 +8,18 @@
}
.title {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
align-items: center;
gap: 24px;
}
.title > div {
display: flex;
padding: 6px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 100px;
border: 0.5px solid #8187ff;
cursor: pointer;
}
.title > p {
color: #d2d3e1;
@@ -92,3 +101,85 @@
border: 1px solid #8e98e7;
background: linear-gradient(180deg, #8e98e6 0%, #4d537e 100%);
}
.menu {
display: flex;
width: 36px;
height: 36px;
gap: 10px;
flex-direction: column;
align-items: flex-end;
aspect-ratio: 1/1;
position: relative;
}
.dotMenu {
display: flex;
padding: 8px;
align-items: center;
gap: 12px;
border-radius: 6px;
border: 1px solid #8187ff;
cursor: pointer;
}
.dotMenu:hover {
background: linear-gradient(180deg, #5359f2 0%, #2e3288 100%);
}
.dotMenu:hover path {
stroke: white;
}
.dropDown {
display: flex;
width: 200px;
padding: 8px;
flex-direction: column;
align-items: flex-start;
gap: 6px;
z-index: 2;
border-radius: 6px;
background: #2d3144;
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.25);
animation-name: dropDownAnimation;
animation-duration: 200ms;
}
@keyframes dropDownAnimation {
0% {
opacity: 0;
transform: translateY(-10%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.dropDown > div:hover {
border-radius: 4px;
background: #3c4159;
background: color(display-p3 0.2392 0.2549 0.3412);
color: white;
}
.dropDown > div:hover p {
color: white;
}
.dropDown > div:hover path {
stroke: white;
}
.dropDown > div {
display: flex;
padding: 6px;
align-items: center;
gap: 10px;
align-self: stretch;
border-radius: 4px;
}
.dropDown > div > div {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
color: #d2d3e1;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
}