틀:게임카드/css: 두 판 사이의 차이

2023년 8월 3일 (목) 16:05 판

하위문서의 디자인을 담당하는 부분을 분리해둔 문서입니다.

도보시오

하위 문서로

@@ 1번째 줄: / 1번째 줄: @@
-<onlyinclude>{{#css:
+<onlyinclude> {{#css:
-    .gamecard{
+	.gamecard {
-        border-color: hsl(320,95%,80%);
+		border-color: hsl(320, 95%, 80%);
-        background: #fff;
+		background: #fff;
-        margin: 8px;
+		margin: 8px;
-		box-shadow: 0 2px 2px rgba(0,0,0,0.3);
+		box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-    }
+	}
-    .gamecard .theme{
-        height: 8px;
+	.gamecard .theme {
-    }
+		height: 8px;
-    .gamecard .content{
+	}
-        padding:8px 16px;
-    }
+	.gamecard .content {
-    .gamecard .title{
+		padding: 8px 16px;
-        font-size: 1.2em;
+	}
-        font-weight: bold;
-        margin-left: 8px;
+	.gamecard .content .genres{
-    }
+		margin-bottom:8px;
-    .gamecard .title a{
+	}
-        color:#6480b6;
-    }
+	.gamecard .content .genres .genre{
-    .gamecard .summary{
+		background: hsl(132,68%,50%);
-        font-size: 0.8em;
+		font-size: 0.8em;
-        margin-left: 8px;
+		color: #fff;
-        color: #999;
+		padding: 2px 6px;
-        margin-bottom: 8px;
+		border-radius: 1em;
-    }
+	}
+	.gamecard .gamecard .title {
+		font-size: 1.2em;
+		font-weight: bold;
+		margin-left: 8px;
+	}
+	.gamecard .title a {
+		color: #6480b6;
+	}
+	.gamecard .summary {
+		font-size: 0.8em;
+		margin-left: 8px;
+		color: #999;
+		margin-bottom: 8px;
+	}
+	.gamecard .content>.description {
+		font-size: 0.8em;
+	}
+	.gamecard .icon-wrapper {
+		position: relative;
+		user-select: none;
+	}
+	.gamecard .icon-wrapper .icon {
+		color: #999;
+		transition: opacity 0.2s ease-in-out;
+		opacity: 0.5;
+	}
+	.gamecard .icon-wrapper:hover .icon {
+		opacity: 1;
+	}
-    .gamecard .content > .description{
+	.gamecard .icon-wrapper .description {
-        font-size: 0.8em;
+		visibility: hidden;
-    }
+		position: absolute;
+		bottom: 0;
+		right: 0;
+		text-wrap: nowrap;
+		transition: opacity 0.2s ease-in-out;
+		opacity: 0;
+		background: #000;
+		color: #fff;
+		padding: 2px 6px;
+		font-size: 0.8em;
+		transform: translateY(100%);
+	}
-    .gamecard .icon-wrapper{
+	.gamecard .icon-wrapper:hover .description {
-        position: relative;
+		visibility: visible;
-        user-select: none;
+		opacity: 0.6;
-    }
-    .gamecard .icon-wrapper .icon{
-        color:#999;
-        transition: opacity 0.2s ease-in-out;
-        opacity: 0.5;
-    }
-    .gamecard .icon-wrapper:hover .icon{
-        opacity: 1;
-    }
-    .gamecard .icon-wrapper .description{
-        visibility: hidden;
-        position: absolute;
-        bottom: 0;
-        right: 0;
-        text-wrap: nowrap;
-        transition: opacity 0.2s ease-in-out;
-        opacity: 0;
-        background: #000;
-        color: #fff;
-        padding: 2px 6px;
-        font-size:0.8em;
-        transform: translateY(100%);
-    }
-    .gamecard .icon-wrapper:hover .description{
-        visibility: visible;
-        opacity: 0.6;
-    }
-    .gamecard .badges{
-        float:right;
-        display:flex;
-    }
-    .gamecard .badges > *{
-        margin-left: 4px;
-    }
-    .gamecard .detail{
+	}
-        font-size: 0.8em;
-        margin-top: 8px;
+	.gamecard .badges {
-        display: flex;
+		float: right;
-        align-items: center;
+		display: flex;
-        justify-content: space-between;
+	}
-    }
+	.gamecard .badges>* {
+		margin-left: 4px;
+	}
+	.gamecard .detail {
+		font-size: 0.8em;
+		margin-top: 8px;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
 	/* nth1부터 좌측 마진 왼쪽 구분자 */
-	.gamecard .author a:nth-child(n+1){
+	.gamecard .author a:nth-child(n+1) {
 		margin-left: 4px;
 	}
-	.gamecard .author a:nth-child(n+2):before{
+	.gamecard .author a:nth-child(n+2):before {
 		content: "•";
 		margin-right: 4px;
 	}
-    .gamecard .detail .created, .gamecard .detail .metapage{
+	.gamecard .detail .created,
-        float:right;
+	.gamecard .detail .metapage {
+		float: right;
-    }
+	}
 }}</onlyinclude>