98 lines
1.9 KiB
SCSS
98 lines
1.9 KiB
SCSS
.skill_name {
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-image-source: linear-gradient(90deg, #7d5f07 0%, #2e302e 100%);
|
|
border-image-slice: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
height: 20px;
|
|
z-index: 5;
|
|
transform-style: preserve-3d;
|
|
color: #c1a238;
|
|
&::before {
|
|
width: 100%;
|
|
position: absolute;
|
|
content: '';
|
|
height: 50%;
|
|
bottom: 0;
|
|
background: linear-gradient(90deg, #281e06 0%, #121212 100%);
|
|
transform: translateZ(-1px);
|
|
}
|
|
|
|
&::after {
|
|
width: 100%;
|
|
position: absolute;
|
|
content: '';
|
|
height: 50%;
|
|
top: 0;
|
|
background: linear-gradient(90deg, #563e02 0%, #121212 100%);
|
|
transform: translateZ(-1px);
|
|
}
|
|
}
|
|
|
|
.skill_vp_title {
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-image-source: linear-gradient(90deg, #691b86 0%, #2e302e 100%);
|
|
border-image-slice: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
height: 20px;
|
|
z-index: 5;
|
|
transform-style: preserve-3d;
|
|
color: #9443BE;
|
|
&::before {
|
|
width: 100%;
|
|
position: absolute;
|
|
content: '';
|
|
height: 50%;
|
|
bottom: 0;
|
|
background: linear-gradient(90deg, #3a0f47 0%, #121212 100%);
|
|
transform: translateZ(-1px);
|
|
}
|
|
|
|
&::after {
|
|
width: 100%;
|
|
position: absolute;
|
|
content: '';
|
|
height: 50%;
|
|
top: 0;
|
|
background: linear-gradient(90deg, #1e0b24 0%, #171717 100%);
|
|
transform: translateZ(-1px);
|
|
}
|
|
}
|
|
|
|
.skill_title{
|
|
border: 1px solid #3e4040;
|
|
color: #c1a238;
|
|
background: linear-gradient(180deg, #2b292b 0%, #0b0b0b 100%);
|
|
height: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0px 5px;
|
|
}
|
|
|
|
.item{
|
|
background-color: #171616;
|
|
padding: 0px 5px;
|
|
.label{
|
|
color: #907B54;
|
|
}
|
|
.value{
|
|
color:#4AA256;
|
|
}
|
|
}
|
|
|
|
.skill_info_value{
|
|
white-space: nowrap;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left:auto;
|
|
margin-top: auto;
|
|
color:#4AA256;
|
|
}
|