틀:뱃지그룹: 두 판 사이의 차이
(툴팁화살표 추가) |
(css 정리) |
||
6번째 줄: | 6번째 줄: | ||
.template-badge{ | .template-badge{ | ||
--width-arrow:12px; | --width-arrow:12px; | ||
position:relative; | |||
float:right; | float:right; | ||
cursor:pointer; | cursor:pointer; | ||
width:48px; height:48px; | |||
margin-left:8px; | |||
border: 4px solid #fff; | border: 4px solid #fff; | ||
border-radius:8px; | border-radius:8px; | ||
outline: 2px solid var(--color-theme); | |||
box-shadow:0px 4px 4px rgba(0,0,0,0.25); | box-shadow:0px 4px 4px rgba(0,0,0,0.25); | ||
} | } | ||
.template-badge .image{ | .template-badge .image{ | ||
width: 100%; | width: 100%; height: 100%; | ||
object-fit: cover; | object-fit: cover; | ||
border-radius: 8px; | border-radius: 8px; | ||
27번째 줄: | 25번째 줄: | ||
.template-badge .tooltip, .template-badge .descript{ | .template-badge .tooltip, .template-badge .descript{ | ||
position: absolute; | position: absolute; | ||
right: 0; | right: 0; bottom: 0; | ||
visibility: hidden; | visibility: hidden; | ||
transition: all 0.2s ease-in-out; | transition: all 0.2s ease-in-out; | ||
79번째 줄: | 76번째 줄: | ||
right: 0px; | right: 0px; | ||
transform: translateX(-50%); | transform: translateX(-50%); | ||
width: 0; | width: 0; height: 0; | ||
border-left: var(--width-arrow) solid transparent; | border-left: var(--width-arrow) solid transparent; | ||
border-right: var(--width-arrow) solid transparent; | border-right: var(--width-arrow) solid transparent; |
2023년 8월 19일 (토) 00:44 판
파라미터로 넣은 모든 머릿글틀을 보기좋은 형태로 바꿔서 푸터에 넣어줍니다.