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

리버티게임(개발), 모두가 만들어가는 자유로운 게임
둘러보기로 이동 검색으로 이동
>BANIP
잔글 (BANIP님이 사용자:BANIP/낙서장/뱃지그룹 문서를 넘겨주기를 만들지 않고 틀:뱃지그룹 문서로 이동했습니다)
>BANIP
(기본값 숨김)
1번째 줄: 1번째 줄:
<includeonly><onlyinclude>{{#css:
<includeonly><onlyinclude>{{#css:
#template-badges-output{
    .template-badges-param{
    margin-top:8px;
        display:none;
}
    }


.template-badge{
    #template-badges-output{
    --width-arrow:12px;
        margin-top:8px;
    position:relative;
    }
    float:right;
   
    cursor:pointer;
    .template-badge{
    width:48px; height:48px;
        --width-arrow:12px;
    margin-left:8px;
        position:relative;
    border: 4px solid #fff;
        float:right;
    border-radius:8px;
        cursor:pointer;
    outline: 2px solid var(--color-theme);
        width:48px; height:48px;
    box-shadow:0px 4px 4px rgba(0,0,0,0.25);
        margin-left:8px;
}
        border: 4px solid #fff;
 
        border-radius:8px;
.template-badge .image{
        outline: 2px solid var(--color-theme);
    width: 100%; height: 100%;
        box-shadow:0px 4px 4px rgba(0,0,0,0.25);
    object-fit: cover;
    }
    border-radius: 8px;
   
}
    .template-badge .image{
 
        width: 100%; height: 100%;
.template-badge .tooltip, .template-badge .descript{
        object-fit: cover;
    position: absolute;
        border-radius: 8px;
    right: 0; bottom: 0;
    }
    visibility: hidden;
   
    transition: all 0.2s ease-in-out;
    .template-badge .tooltip, .template-badge .descript{
 
        position: absolute;
}
        right: 0; bottom: 0;
.template-badge .tooltip{
        visibility: hidden;
    background: #000;
        transition: all 0.2s ease-in-out;
    color: #fff;
   
    width: 400%;
    }
    padding: 4px;
    .template-badge .tooltip{
    font-size: 0.7rem;
        background: #000;
    opacity: 0;
        color: #fff;
    transform: translateY(100%);
        width: 400%;
}
        padding: 4px;
 
        font-size: 0.7rem;
.template-badge:hover .tooltip{
        opacity: 0;
    opacity: 0.8;
        transform: translateY(100%);
    visibility: visible;
    }
    transform: translateY(calc(100% + 8px));
   
}
    .template-badge:hover .tooltip{
 
        opacity: 0.8;
.template-badge .descript{
        visibility: visible;
    width: 600%;
        transform: translateY(calc(100% + 8px));
    font-size: 0.7rem;
    }
    opacity: 0;
   
    background:#fff;
    .template-badge .descript{
    box-shadow:0px 4px 4px rgba(0,0,0,0.25);
        width: 600%;
    transform: translateY(calc(100%));
        font-size: 0.7rem;
    cursor:initial;
        opacity: 0;
}
        background:#fff;
 
        box-shadow:0px 4px 4px rgba(0,0,0,0.25);
.template-badge .descript.active{
        transform: translateY(calc(100%));
    opacity: 1;
        cursor:initial;
    visibility: visible;
    }
    transform: translateY(calc(100% + var(--width-arrow) + 6px));
   
}
    .template-badge .descript.active{
 
        opacity: 1;
 
        visibility: visible;
.template-badge .descript .title{
        transform: translateY(calc(100% + var(--width-arrow) + 6px));
    height:1.3rem;
    }
    vertical-align:middle;
   
    padding-left:4px;
   
    background:var(--color-theme);
    .template-badge .descript .title{
}
        height:1.3rem;
 
        vertical-align:middle;
.template-badge .descript::before {
        padding-left:4px;
    content: '';
        background:var(--color-theme);
    position: absolute;
    }
    top: calc(var(--width-arrow) * -1 + 2px);
   
    right: 0px;
    .template-badge .descript::before {
    transform: translateX(-50%);
        content: '';
    width: 0; height: 0;
        position: absolute;
    border-left: var(--width-arrow) solid transparent;
        top: calc(var(--width-arrow) * -1 + 2px);
    border-right: var(--width-arrow) solid transparent;
        right: 0px;
    border-bottom: var(--width-arrow) solid var(--color-theme);
        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;
    vertical-align: middle;
        border-bottom: var(--width-arrow) solid var(--color-theme);
}
    }
 
   
.template-badge .descript .content{
    .template-badge .descript .title *{
    padding:4px;
        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 결과
스크립트가 없으면 이 틀은 껍데기일 뿐입니다. 마치 당신처럼...
이 게임은 이 없습니다.
잼이 듬뿍 들어간 게임을 만드는 데는 우리 모두의 노력이 필요합니다.
이 게임은 고대유물입니다.
이 게임은 여전히 있지만, 유통기한이 지났을 수도 있으니, 섭취시 주의를 해야할 것 같기도 합니다.
스크립트가 없으면 이 틀은 껍데기일 뿐입니다. 마치 당신처럼...
뱃지그룹 가젯 활성화 후 문서 하단을 봐주세요