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

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

파라미터로 넣은 모든 머릿글틀을 보기좋은 형태로 바꿔서 푸터에 넣어줍니다.

예시

code_blocks 코드

{{틀:뱃지그룹|{{소도구}}{{잼 없음}}{{고대유물}}{{소도구}}}}

description 결과

뱃지그룹 가젯 활성화 후 문서 하단을 봐주세요

@@ 1번째 줄: / 1번째 줄: @@
 <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}}
 파라미터로 넣은 모든 머릿글틀을 보기좋은 형태로 바꿔서 푸터에 넣어줍니다.