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

리버티게임(개발), 모두가 만들어가는 자유로운 게임
둘러보기로 이동 검색으로 이동
시각위키텍스트
>BANIP
(새 문서: <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 .title{ font-size: 1.2em; font-weight: bold; margin-left: 8px; } .gamecard .title a{ color:#6480b6; } .gamecard .summary{ font-size: 0.8em...)
 
>BANIP
(스페이스 탭으로 변경, 장르 디자인 추가)
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부터 좌측 마진 왼쪽 구분자 */
/* nth1부터 좌측 마진 왼쪽 구분자 */
.gamecard .author a:nth-child(n+1){
.gamecard .author a:nth-child(n+1) {
margin-left: 4px;
margin-left: 4px;
}
}


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


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


    }
}


}}</onlyinclude>
}}</onlyinclude>

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

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

도보시오

원본 주소 "https://dev.libertygame.work/index.php?title=틀:게임카드/css&oldid=18186"