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

← 이전 편집

시각위키텍스트

2025년 2월 26일 (수) 22:05 기준 최신판

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

예시

code_blocks 코드

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

description 결과

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

@@ 1번째 줄: / 1번째 줄: @@
 <includeonly><onlyinclude>{{#css:
-    .template-badges-param{
+	.template-badges-param .template-ambox, .template-badges-param .template-userbox{
-        display:none;
+		display:none;
-    }
+	}
+	#template-badges-output{
+		margin-top:8px;
+	}
+	#template-badges-output::after {
+		content: "";
+		display: table;
+		clear: both;
+	}
+	.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;
+		outline: 2px solid var(--color-theme);
+		box-shadow:0px 4px 4px rgba(0,0,0,0.25);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+	.template-badge .image{
+		height: 100%;
+		width: 100%;
+		object-fit: contain;
+		border-radius: 8px;
+	}
+	.template-badge .tooltip, .template-badge .descript{
+		position: absolute;
+		right: 0; bottom: 0;
+		visibility: hidden;
+		transition: all 0.2s ease-in-out;
+	}
+	.template-badge .tooltip{
+		background: #000;
+		color: #fff;
+		width: 400%;
+		padding: 4px;
+		font-size: 0.7rem;
+		opacity: 0;
+		transform: translateY(100%);
+	}
+	.template-badge:hover:not(.active) .tooltip{
+		opacity: 0.8;
+		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);
+		transform: translateY(calc(100%));
+		cursor:initial;
+	}
+	.template-badge.active .descript{
+		opacity: 1;
+		visibility: visible;
+		transform: translateY(calc(100% + var(--width-arrow) + 6px));
+	}
+	.template-badge .descript .title{
+        line-height: 1em;
+		vertical-align:middle;
+		padding:4px;
+		background:var(--color-theme);
+	    color: var(--color-theme-inverted);
+	    font-weight: bold;
+	}
-    #template-badges-output{
+	.template-badge .descript::before {
-        margin-top:8px;
+		content: '';
-    }
+		position: absolute;
+		top: calc(var(--width-arrow) * -1 + 2px);
-    .template-badge{
+		right: 0px;
-        --width-arrow:12px;
+		transform: translateX(-50%);
-        position:relative;
+		width: 0; height: 0;
-        float:right;
+		border-left: var(--width-arrow) solid transparent;
-        cursor:pointer;
+		border-right: var(--width-arrow) solid transparent;
-        width:48px; height:48px;
+		border-bottom: var(--width-arrow) solid var(--color-theme);
-        margin-left:8px;
+	}
-        border: 4px solid #fff;
-        border-radius:8px;
+	.template-badge .descript .title *{
-        outline: 2px solid var(--color-theme);
+		vertical-align: middle;
-        box-shadow:0px 4px 4px rgba(0,0,0,0.25);
+	}
-    }
+	.template-badge .descript .content, .template-badge .descript .footer {
-    .template-badge .image{
+		padding:4px;
-        width: 100%; height: 100%;
+		background: var(--color-background);
-        object-fit: cover;
+         color: var(--color);
-        border-radius: 8px;
+	}
-    }
-    .template-badge .tooltip, .template-badge .descript{
-        position: absolute;
-        right: 0; bottom: 0;
-        visibility: hidden;
-        transition: all 0.2s ease-in-out;
-    }
-    .template-badge .tooltip{
-        background: #000;
-        color: #fff;
-        width: 400%;
-        padding: 4px;
-        font-size: 0.7rem;
-        opacity: 0;
-        transform: translateY(100%);
-    }
-    .template-badge:hover .tooltip{
-        opacity: 0.8;
-        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);
-         transform: translateY(calc(100%));
-        cursor:initial;
-    }
-     .template-badge .descript.active{
+     .template-badge .descript .footer {
-         opacity: 1;
+         background: light-dark(lightgray, dimgray);
-        visibility: visible;
+         padding: 2px 4px;
-         transform: translateY(calc(100% + var(--width-arrow) + 6px));
      }
+}}<div class='template-badges-param'>{{{1|}}}</div>[[분류:소도구를 사용하는 문서/defaultTemplate]]</onlyinclude></includeonly>
+{{소도구|defaultTemplate}}
-    .template-badge .descript .title{
+파라미터로 넣은 모든 머릿글틀이나 유저박스 틀을 보기좋은 형태로 바꿔서 푸터에 넣어줍니다. 아직 프로토타입이기에 지원되지 않는 유저박스 틀이 일부 있습니다.
-        height:1.3rem;
-        vertical-align:middle;
-        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;
-        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;
-    }
-}}<div class='template-badges-param'>{{{1|}}}</div></onlyinclude></includeonly>
-{{소도구|badge}}
-파라미터로 넣은 모든 머릿글틀을 보기좋은 형태로 바꿔서 푸터에 넣어줍니다.
 == 예시 ==
-{{예시|<nowiki>{{</nowiki>{{FULLPAGENAME}}<nowiki>|{{소도구}}{{잼 없음}}{{고대유물}}{{소도구}}}}</nowiki>|{{:{{FULLPAGENAME}}|{{소도구}}{{잼 없음}}{{고대유물}}{{소도구}}}} 뱃지그룹 가젯 활성화 후 문서 하단을 봐주세요
+{{예시|<nowiki>{{</nowiki>{{FULLPAGENAME}}<nowiki>|{{소도구}}{{잼 없음}}{{고대유물}}{{흑역사}}}}</nowiki>|{{:{{FULLPAGENAME}}|{{소도구}}{{잼 없음}}{{고대유물}}{{흑역사}}{{편집금지}}}} 뱃지그룹 가젯 활성화 후 문서 하단을 봐주세요
 }}
-[[분류:편의 틀|{{SUBPAGENAME}}]][[분류:목록 틀|{{SUBPAGENAME}}]]
+[[분류:편의 틀]][[분류:목록 틀]][[분류:유저박스 관리용 틀]]