틀:게임카드/css

/* 하위문서의 디자인을 담당하는 부분을 분리해둔 문서입니다. */
#mw-content-text:has(.gamecards) {
	container-type: inline-size;
}

@container (width > 540px){
	.gamecards{
	    column-count: 2;
	}
}

.gamecard {
	border-color: hsl(320, 95%, 80%);
	background: #fff;
	margin: 8px 0; 
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
	break-inside: avoid;
}

.gamecard .theme {
	height: 8px;
}

.gamecard .image-wrapper img{
    width: 100%;
    max-height: 5em;
    object-fit: cover;
}

.gamecard .content {
	padding: 8px 12px;
}

.gamecard .content .genres{
	margin-bottom:8px;
	margin-left: 4px;
} 

.gamecard .content .genres .genre{
	background: hsl(132,68%,50%);
	font-size: 0.8em;
	padding: 2px 6px;
	border-radius: 1em;
	white-space: nowrap;
} 

.gamecard .content .genres .genre:not(:last-child){
	margin-right: 4px;
}

.gamecard .content .genres .genre a{
	color: #fff;
}

.gamecard .title {
	font-size: 1.2em;
	font-weight: bold;
	text-align: center;
}

.gamecard .title a {
	color: #6480b6;
}

.gamecard .summary {
	font-size: 0.8em;
	color: #999;
	margin-bottom: 8px;
}

.gamecard .content>.description {
	font-size: 0.8em;
	margin-left: 8px;
}

.gamecard.설명감춤 .content>.description {
	display:none;
}

.gamecard .icon-wrapper {
	position: relative;
	user-select: none;
}

.gamecard .icon-wrapper .icon {
    color: #777;
	transition: opacity 0.2s ease-in-out;
	opacity: 0.5;
    font-size: 1.7em;
}

.gamecard .icon-wrapper .icon a{
    color: inherit;
    text-decoration: none;
}

.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.6rem;
	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;
	display: flex;
	align-items: center;
	justify-content: space-between;
    line-break: anywhere; /* 이게 없으면 IP 유저 사용자 이름이 게임카드 레이아웃의 폭을 상위 엘리먼트 너머로 넓힐 가능성 있음 */
}

.gamecard .detail .created{
	font-size: 0.5em;
    color: #999;
}
.gamecard .detail .author .separator{
	margin:0 2px;
	color: #999;
}
/*<onlyinclude>{{#css:틀:게임카드/css}}</onlyinclude>*/