틀:게임카드/css 문서 원본 보기

<onlyinclude> {{#css:
	
	/* 게임카드 컨테이너 스타일 */
	.gamecard {
		border-color: hsl(320, 95%, 80%);
		background: #fff;
		margin: 8px;
		box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
	}

	/* 헤더 컬러, 일반적으로 장르를 따라감 */
	.gamecard .theme {
		height: 8px;
	}

	/* 헤더 컬러를 제외한 나머지부분 여백 추가 */
	.gamecard .content {
		padding: 8px 16px;
	}

	/* 장르 단추들 하단 마진 추가 */
	.gamecard .content .genres{
		margin-bottom:8px;
	} 
	
	.gamecard .content .genres .genre{
		background: hsl(132,68%,50%);
		font-size: 0.8em;
		padding: 2px 6px;
		border-radius: 1em;
	} 

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

	.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 .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;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	/* nth1부터 좌측 마진 왼쪽 구분자 */
	.gamecard .author a:nth-child(n+1) {
		margin-left: 4px;
	}

	.gamecard .author a:nth-child(n+2):before {
		content: "•";
		margin-right: 4px;
	}

	.gamecard .detail .created,
	.gamecard .detail .metapage {
		float: right;

	}

}}</onlyinclude>
하위문서의 디자인을 담당하는 부분을 분리해둔 문서입니다.
== 도보시오 ==
* [[../|하위 문서로]]