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

리버티게임(개발), 모두가 만들어가는 자유로운 게임
둘러보기로 이동 검색으로 이동
시각위키텍스트
>BANIP
(상세내용 백그라운드 필드 지원)
>BANIP
(clearfix 추가/css 여백 탭으로 대체)
1번째 줄: 1번째 줄:
<includeonly><onlyinclude>{{#css:
<includeonly><onlyinclude>{{#css:
    .template-badges-param{
.template-badges-param{
        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);
    }
}
   
    .template-badge .tooltip, .template-badge .descript{
.template-badge .image{
        position: absolute;
width: 100%; height: 100%;
        right: 0; bottom: 0;
object-fit: cover;
        visibility: hidden;
border-radius: 8px;
        transition: all 0.2s ease-in-out;
}
   
    }
.template-badge .tooltip, .template-badge .descript{
    .template-badge .tooltip{
position: absolute;
        background: #000;
right: 0; bottom: 0;
        color: #fff;
visibility: hidden;
        width: 400%;
transition: all 0.2s ease-in-out;
        padding: 4px;
        font-size: 0.7rem;
}
        opacity: 0;
.template-badge .tooltip{
        transform: translateY(100%);
background: #000;
    }
color: #fff;
   
width: 400%;
    .template-badge:hover:not(.active) .tooltip{
padding: 4px;
        opacity: 0.8;
font-size: 0.7rem;
        visibility: visible;
opacity: 0;
        transform: translateY(calc(100% + 8px));
transform: translateY(100%);
    }
}
   
    .template-badge .descript{
.template-badge:hover:not(.active) .tooltip{
        width: 600%;
opacity: 0.8;
        font-size: 0.7rem;
visibility: visible;
        opacity: 0;
transform: translateY(calc(100% + 8px));
        background:#fff;
}
        box-shadow:0px 4px 4px rgba(0,0,0,0.25);
        transform: translateY(calc(100%));
.template-badge .descript{
        cursor:initial;
width: 600%;
    }
font-size: 0.7rem;
   
opacity: 0;
    .template-badge.active .descript{
background:#fff;
        opacity: 1;
box-shadow:0px 4px 4px rgba(0,0,0,0.25);
        visibility: visible;
transform: translateY(calc(100%));
        transform: translateY(calc(100% + var(--width-arrow) + 6px));
cursor:initial;
    }
}
   
   
.template-badge.active .descript{
    .template-badge .descript .title{
opacity: 1;
        height:1.3rem;
visibility: visible;
        vertical-align:middle;
transform: translateY(calc(100% + var(--width-arrow) + 6px));
        padding-left:4px;
}
        background:var(--color-theme);
    }
   
.template-badge .descript .title{
    .template-badge .descript::before {
height:1.3rem;
        content: '';
vertical-align:middle;
        position: absolute;
padding-left:4px;
        top: calc(var(--width-arrow) * -1 + 2px);
background:var(--color-theme);
        right: 0px;
}
        transform: translateX(-50%);
        width: 0; height: 0;
.template-badge .descript::before {
        border-left: var(--width-arrow) solid transparent;
content: '';
        border-right: var(--width-arrow) solid transparent;
position: absolute;
        border-bottom: var(--width-arrow) solid var(--color-theme);
top: calc(var(--width-arrow) * -1 + 2px);
    }
right: 0px;
   
transform: translateX(-50%);
    .template-badge .descript .title *{
width: 0; height: 0;
        vertical-align: middle;
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 .content{
}
        padding:4px;
        background: var(--color-background);
.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}}
{{소도구|badge}}

2023년 8월 19일 (토) 01:23 판


이 틀은 소도구의 지배를 받고 있습니다.
스크립트가 없으면 이 틀은 껍데기일 뿐입니다. 마치 당신처럼...

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

예시

code_blocks 코드
{{틀:뱃지그룹|{{소도구}}{{잼 없음}}{{고대유물}}{{흑역사}}}}
code
낙서장에서 확인
description 결과
이 틀은 소도구의 지배를 받고 있습니다.
스크립트가 없으면 이 틀은 껍데기일 뿐입니다. 마치 당신처럼...
이 게임은 잼이 없습니다.
잼이 듬뿍 들어간 게임을 만드는 데는 우리 모두의 노력이 필요합니다.
이 녀석의 흑역사를 들추지 마십시오!!
이 문서는 부끄러운 흑역사로 가득찼습니다! 절대 들추지 마십시오!!
뱃지그룹 가젯 활성화 후 문서 하단을 봐주세요
원본 주소 "https://dev.libertygame.work/index.php?title=틀:뱃지그룹&oldid=18304"