틀:게임카드/css

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

@container (width > 540px){ .gamecards{ columns: 2 auto; column-gap: 12px; } }

.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;

   column-count: 2;

}

.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; }

.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; } /**/