틀:뱃지그룹: 두 판 사이의 차이

리버티게임(개발), 모두가 만들어가는 자유로운 게임
둘러보기로 이동 검색으로 이동
>BANIP
잔글 (.active 추가위치 변경)
>Hsl0
편집 요약 없음
 
(사용자 2명의 중간 판 17개는 보이지 않습니다)
1번째 줄: 1번째 줄:
<includeonly><onlyinclude>{{#css:
<includeonly><onlyinclude>{{#css:
    .template-badges-param{
.template-badges-param .template-ambox, .template-badges-param .template-userbox{
        display:none;
display:none;
    }
}


    #template-badges-output{
#template-badges-output{
        margin-top:8px;
margin-top:8px;
    }
}
   
    .template-badge{
#template-badges-output::after {
        --width-arrow:12px;
content: "";
        position:relative;
display: table;
        float:right;
clear: both;
        cursor:pointer;
}
        width:48px; height:48px;
 
        margin-left:8px;
.template-badge{
        border: 4px solid #fff;
--width-arrow:12px;
        border-radius:8px;
position:relative;
        outline: 2px solid var(--color-theme);
float:right;
        box-shadow:0px 4px 4px rgba(0,0,0,0.25);
cursor:pointer;
    }
width:48px; height:48px;
   
margin-left:8px;
    .template-badge .image{
border: 4px solid #fff;
        width: 100%; height: 100%;
border-radius:8px;
        object-fit: cover;
outline: 2px solid var(--color-theme);
        border-radius: 8px;
box-shadow:0px 4px 4px rgba(0,0,0,0.25);
    }
display: flex;
   
justify-content: center;
    .template-badge .tooltip, .template-badge .descript{
align-items: center;
        position: absolute;
}
        right: 0; bottom: 0;
        visibility: hidden;
.template-badge .image{
        transition: all 0.2s ease-in-out;
height: 100%;
   
width: 100%;
    }
object-fit: contain;
    .template-badge .tooltip{
border-radius: 8px;
        background: #000;
}
        color: #fff;
        width: 400%;
.template-badge .tooltip, .template-badge .descript{
        padding: 4px;
position: absolute;
        font-size: 0.7rem;
right: 0; bottom: 0;
        opacity: 0;
visibility: hidden;
        transform: translateY(100%);
transition: all 0.2s ease-in-out;
    }
   
}
    .template-badge:hover:not(.active) .tooltip{
.template-badge .tooltip{
        opacity: 0.8;
background: #000;
        visibility: visible;
color: #fff;
        transform: translateY(calc(100% + 8px));
width: 400%;
    }
padding: 4px;
   
font-size: 0.7rem;
    .template-badge .descript{
opacity: 0;
        width: 600%;
transform: translateY(100%);
        font-size: 0.7rem;
}
        opacity: 0;
        background:#fff;
.template-badge:hover:not(.active) .tooltip{
        box-shadow:0px 4px 4px rgba(0,0,0,0.25);
opacity: 0.8;
        transform: translateY(calc(100%));
visibility: visible;
        cursor:initial;
transform: translateY(calc(100% + 8px));
    }
}
   
    .template-badge.active .descript{
.template-badge .descript{
        opacity: 1;
width: 600%;
        visibility: visible;
font-size: 0.7rem;
        transform: translateY(calc(100% + var(--width-arrow) + 6px));
opacity: 0;
    }
background:#fff;
   
box-shadow:0px 4px 4px rgba(0,0,0,0.25);
   
transform: translateY(calc(100%));
    .template-badge .descript .title{
cursor:initial;
         height:1.3rem;
}
        vertical-align:middle;
        padding-left:4px;
.template-badge.active .descript{
        background:var(--color-theme);
opacity: 1;
    }
visibility: visible;
   
transform: translateY(calc(100% + var(--width-arrow) + 6px));
    .template-badge .descript::before {
}
        content: '';
        position: absolute;
.template-badge .descript .title{
        top: calc(var(--width-arrow) * -1 + 2px);
         line-height: 1em;
        right: 0px;
vertical-align:middle;
        transform: translateX(-50%);
padding:4px;
        width: 0; height: 0;
background:var(--color-theme);
        border-left: var(--width-arrow) solid transparent;
    color: var(--color-theme-inverted);
        border-right: var(--width-arrow) solid transparent;
    font-weight: bold;
        border-bottom: var(--width-arrow) solid var(--color-theme);
}
    }
 
   
.template-badge .descript::before {
    .template-badge .descript .title *{
content: '';
        vertical-align: middle;
position: absolute;
    }
top: calc(var(--width-arrow) * -1 + 2px);
   
right: 0px;
    .template-badge .descript .content{
transform: translateX(-50%);
        padding:4px;
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);
}
.template-badge .descript .title *{
vertical-align: middle;
}
.template-badge .descript .content{
padding:4px;
background: var(--color-background);
}
}}<div class='template-badges-param'>{{{1|}}}</div></onlyinclude></includeonly>
}}<div class='template-badges-param'>{{{1|}}}</div></onlyinclude></includeonly>
{{소도구|badge}}
{{소도구|defaultTemplate}}
파라미터로 넣은 모든 머릿글틀을 보기좋은 형태로 바꿔서 푸터에 넣어줍니다.
파라미터로 넣은 모든 머릿글틀이나 유저박스 틀을 보기좋은 형태로 바꿔서 푸터에 넣어줍니다. 아직 프로토타입이기에 지원되지 않는 유저박스 틀이 일부 있습니다.


== 예시 ==
== 예시 ==
{{예시|<nowiki>{{</nowiki>{{FULLPAGENAME}}<nowiki>|{{소도구}}{{잼 없음}}{{고대유물}}{{흑역사}}}}</nowiki>|{{:{{FULLPAGENAME}}|{{소도구}}{{잼 없음}}{{흑역사}}}} 뱃지그룹 가젯 활성화 후 문서 하단을 봐주세요
{{예시|<nowiki>{{</nowiki>{{FULLPAGENAME}}<nowiki>|{{소도구}}{{잼 없음}}{{고대유물}}{{흑역사}}}}</nowiki>|{{:{{FULLPAGENAME}}|{{소도구}}{{잼 없음}}{{고대유물}}{{흑역사}}{{편집금지}}}} 뱃지그룹 가젯 활성화 후 문서 하단을 봐주세요
}}
}}
[[분류:편의 틀|{{SUBPAGENAME}}]][[분류:목록 틀|{{SUBPAGENAME}}]]
 
[[분류:편의 틀]][[분류:목록 틀]][[분류:유저박스 관리용 틀]]

2024년 2월 10일 (토) 12:29 기준 최신판


스크립트가 없으면 이 틀은 껍데기일 뿐입니다. 마치 당신처럼...

파라미터로 넣은 모든 머릿글틀이나 유저박스 틀을 보기좋은 형태로 바꿔서 푸터에 넣어줍니다. 아직 프로토타입이기에 지원되지 않는 유저박스 틀이 일부 있습니다.

예시

code_blocks 코드
{{틀:뱃지그룹|{{소도구}}{{잼 없음}}{{고대유물}}{{흑역사}}}}
code
낙서장에서 확인
description 결과
스크립트가 없으면 이 틀은 껍데기일 뿐입니다. 마치 당신처럼...
이 게임은 이 없습니다.
잼이 듬뿍 들어간 게임을 만드는 데는 우리 모두의 노력이 필요합니다.
이 게임은 고대유물입니다.
이 게임은 여전히 있지만, 유통기한이 지났을 수도 있으니, 섭취시 주의를 해야할 것 같기도 합니다.
이 녀석의 흑역사를 들추지 마십시오!!
이 문서는 부끄러운 흑역사로 가득찼습니다! 절대 들추지 마십시오!!
원개발자 이외에는 편집을 할 수 없는 게임
이 게임은 원개발자 이외에는 편집을 할 수 없는 게임입니다.
이 게임을 잘못 수정하면 게임을 망치거나 오류가 날 수 있으므로 편집하지 마십시오.
버그가 있으면 수정하지 마시고 게임 토론이나 해당 개발자의 사용자 토론에 알려주세요.
뱃지그룹 가젯 활성화 후 문서 하단을 봐주세요