틀:뱃지그룹: 두 판 사이의 차이
(css 작성) |
(툴팁화살표 추가) |
||
| 5번째 줄: | 5번째 줄: | ||
.template-badge{ | .template-badge{ | ||
--width-arrow:12px; | |||
float:right; | float:right; | ||
width:48px; | width:48px; | ||
height:48px; | height:48px; | ||
cursor:pointer; | cursor:pointer; | ||
outline | outline: 2px solid var(--color-theme); | ||
border: 4px solid #fff; | border: 4px solid #fff; | ||
position:relative; | position:relative; | ||
| 58번째 줄: | 58번째 줄: | ||
cursor:initial; | cursor:initial; | ||
} | } | ||
.template-badge .descript.active{ | |||
opacity: 1; | |||
visibility: visible; | |||
transform: translateY(calc(100% + var(--width-arrow) + 6px)); | |||
} | |||
.template-badge .descript .title{ | .template-badge .descript .title{ | ||
| 63번째 줄: | 70번째 줄: | ||
vertical-align:middle; | vertical-align:middle; | ||
padding-left:4px; | padding-left:4px; | ||
background:var(--color-theme); | |||
} | |||
.template-badge .descript::before { | |||
content: ''; | |||
position: absolute; | |||
top: calc(var(--width-arrow) * -1 + 2px); | |||
right: 0px; | |||
transform: translateX(-50%); | |||
width: 0; | |||
height: 0; | |||
border-left: var(--width-arrow) solid transparent; | |||
border-right: var(--width-arrow) solid transparent; | |||
border-bottom: var(--width-arrow) solid var(--color-theme); | |||
} | } | ||
| 72번째 줄: | 93번째 줄: | ||
padding:4px; | padding:4px; | ||
} | } | ||
}}<div class='template-badges'>{{{1|}}}</div></onlyinclude></includeonly> | }}<div class='template-badges'>{{{1|}}}</div></onlyinclude></includeonly> | ||
파라미터로 넣은 모든 머릿글틀을 보기좋은 형태로 바꿔서 푸터에 넣어줍니다. | 파라미터로 넣은 모든 머릿글틀을 보기좋은 형태로 바꿔서 푸터에 넣어줍니다. | ||
2023년 8월 19일 (토) 00:44 판
파라미터로 넣은 모든 머릿글틀을 보기좋은 형태로 바꿔서 푸터에 넣어줍니다.