틀:뱃지그룹: 두 판 사이의 차이
둘러보기로 이동
검색으로 이동
>BANIP 잔글 (BANIP님이 사용자:BANIP/낙서장/뱃지그룹 문서를 넘겨주기를 만들지 않고 틀:뱃지그룹 문서로 이동했습니다) |
>BANIP (기본값 숨김) |
||
1번째 줄: | 1번째 줄: | ||
<includeonly><onlyinclude>{{#css: | <includeonly><onlyinclude>{{#css: | ||
.template-badges-param{ | |||
display:none; | |||
} | } | ||
.template-badge{ | #template-badges-output{ | ||
margin-top:8px; | |||
} | |||
.template-badge{ | |||
--width-arrow:12px; | |||
position:relative; | |||
float:right; | |||
cursor:pointer; | |||
width:48px; height:48px; | |||
margin-left:8px; | |||
} | border: 4px solid #fff; | ||
border-radius:8px; | |||
.template-badge .image{ | outline: 2px solid var(--color-theme); | ||
box-shadow:0px 4px 4px rgba(0,0,0,0.25); | |||
} | |||
} | .template-badge .image{ | ||
width: 100%; height: 100%; | |||
.template-badge .tooltip, .template-badge .descript{ | object-fit: cover; | ||
border-radius: 8px; | |||
} | |||
.template-badge .tooltip, .template-badge .descript{ | |||
position: absolute; | |||
} | right: 0; bottom: 0; | ||
.template-badge .tooltip{ | visibility: hidden; | ||
transition: all 0.2s ease-in-out; | |||
} | |||
.template-badge .tooltip{ | |||
background: #000; | |||
color: #fff; | |||
width: 400%; | |||
} | padding: 4px; | ||
font-size: 0.7rem; | |||
.template-badge:hover .tooltip{ | opacity: 0; | ||
transform: translateY(100%); | |||
} | |||
} | .template-badge:hover .tooltip{ | ||
opacity: 0.8; | |||
.template-badge .descript{ | visibility: visible; | ||
transform: translateY(calc(100% + 8px)); | |||
} | |||
.template-badge .descript{ | |||
width: 600%; | |||
font-size: 0.7rem; | |||
opacity: 0; | |||
} | background:#fff; | ||
box-shadow:0px 4px 4px rgba(0,0,0,0.25); | |||
.template-badge .descript.active{ | transform: translateY(calc(100%)); | ||
cursor:initial; | |||
} | |||
} | .template-badge .descript.active{ | ||
opacity: 1; | |||
visibility: visible; | |||
.template-badge .descript .title{ | transform: translateY(calc(100% + var(--width-arrow) + 6px)); | ||
} | |||
.template-badge .descript .title{ | |||
} | height:1.3rem; | ||
vertical-align:middle; | |||
.template-badge .descript::before { | 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; | |||
.template-badge .descript .title *{ | border-right: var(--width-arrow) solid transparent; | ||
border-bottom: var(--width-arrow) solid var(--color-theme); | |||
} | } | ||
.template-badge .descript .content{ | .template-badge .descript .title *{ | ||
vertical-align: middle; | |||
} | } | ||
}}<div class='template-badges'>{{{1|}}}</div></onlyinclude></includeonly> | |||
.template-badge .descript .content{ | |||
padding:4px; | |||
} | |||
}}<div class='template-badges-param'>{{{1|}}}</div></onlyinclude></includeonly> | |||
{{소도구|badge}} | {{소도구|badge}} | ||
파라미터로 넣은 모든 머릿글틀을 보기좋은 형태로 바꿔서 푸터에 넣어줍니다. | 파라미터로 넣은 모든 머릿글틀을 보기좋은 형태로 바꿔서 푸터에 넣어줍니다. |
2023년 8월 19일 (토) 01:01 판
파라미터로 넣은 모든 머릿글틀을 보기좋은 형태로 바꿔서 푸터에 넣어줍니다.
예시
code_blocks 코드
{{틀:뱃지그룹|{{소도구}}{{잼 없음}}{{고대유물}}{{소도구}}}}
code
description 결과