미디어위키:Project.css 문서 원본 보기

/**
 * 틀 관련 스타일링
 *
 * 작성자: wiki-chan.net
 * 저작권: CC-BY-SA 3.0
 */
/* 내비게이션 메뉴
 ----------------------------------------*/
.nav-menu {
    list-style: none !important;
    margin: 1em 0 !important;
    text-align: center !important;
}
.nav-menu li {
    display: inline-block;
    background-color: #50A8E1;
    border: 1px solid #3791CC;
    color: #FFF;
    margin: 0 1em;
    text-align: center;
    cursor: pointer;
}
.nav-menu li:hover {
    background-color: #449ED8;
    border-color: #3791CC;
    box-shadow: inset 0px 0px 4px rgba(144, 167, 177, 0.3);
}
.nav-menu li:active {
    outline: 0;
    box-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
}
.nav-menu li a {
    display: block;
    padding: .6em 1em;
    color: #FFF !important;
    text-decoration: none !important;
}

/* 체크박스 타입 */
.nav-checkbox {
    list-style: none !important;
    margin: 1em 0 !important;
    text-align: center !important;
}
.nav-checkbox li {
    display: inline-block;
    margin: 0 1em;
    cursor: pointer;
}
.nav-checkbox span {
    display: inline-block;
    vertical-align: middle;    
}
.nav-checkbox span.box {
    width: 20px;
    height: 20px;
    border: 2px solid #DDD;
    border-radius: 50%;
    margin-right: .5em;
    font: normal normal 14px/1 'FontAwesome';
    color: #999;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    position: relative;
}
.nav-checkbox li.checked span.box:before {
    content: '\f00c';
    position: absolute;
    top: 3px;
    left: 3px;
}
.nav-checkbox span.label { text-align: left; }
.nav-checkbox span.num {
    color: #AAA;
    margin-left: .5em;
}
.nav-checkbox span.num:before { content: '('; }
.nav-checkbox span.num:after { content: ')'; }

/* 사각 버튼 */
ul.navi-menu {
    list-style: none !important;
    margin: 0 auto !important;
    font-family: '맑은 고딕';
}
ul.navi-menu > li {
    float: left;
    background-color: #57BAE8;
    color: #FFF;
    width: 60px;
    height: 60px;
    font-size: 15px;
    line-height: 60px;
    text-align: center;
    cursor: pointer;
    margin: 3px;
}
ul.navi-menu > li.selected, ul.navi-menu > li:hover {
    background-color: #008CCF;
    box-shadow: inset 0px 0px 4px rgba(144, 167, 177, 0.3);
}

/* 편성표
 ----------------------------------------*/
#anitable > ul {
    display: table;
    width: 100%;
    padding: 0 !important;
    margin: 0 0 2em !important;
    list-style: none !important;
    border-top: 2px solid #4C9ED9;
}

/* 각 요일 */
#anitable > ul > li {
    display: table-cell;
    border: solid #EEE;
    border-width: 0 0 0 1px;
}
#anitable > ul > li:not(.current) {
    width: 14%;
}
#anitable > ul > li:last-child { border-width: 0 1px; }

/* 요일 제목 */
#anitable .heading {
    font-size: 140%;
    color: #BBB;
    text-align: center;
    padding: .4em 0 .2em;
}

/* 현재 요일 */
#anitable .current {
    background-color: #F2F4F6;
}
#anitable .current .heading {
    background-color: #4C9ED9;
    color: #FFF;
    cursor: default;
}

/* 각 시간대 */
#anitable .item {
    clear: both;
    text-align: left;
    padding: 1em 1em 1.3em;
    cursor: pointer;
}

#anitable .item .title {
    line-height: normal;
    word-break: keep-all;
}
#anitable .item .time {
    color: #AAA;
}
#anitable .item:hover .title, #anitable .item:hover .time { color: #1DADE2; }
#anitable .item.new .title:before {
    content: 'N';
    font: normal normal 10px/1 Arial, sans-serif;
    background-color: #ffad50;
    color: #FFF;
    padding: 1px 3px 1px 2px;
    margin-right: .35em;
}

/* 요일 미정 */
#anitable > ul.alpha > li {
    clear: both;
    float: none;
    width: auto;
}
#anitable > ul.alpha .item {
    float: left;
    clear: none;
    width: 14.285%;
    box-sizing: border-box;
}
#anitable > ul.alpha > li > div:nth-child(7n+2) { clear: left; }

.js-table .detail {
    display: none;
}

/* 클릭했을 때 팝업하는 부가정보 */
.modal .miscellaneous { margin-top: .5em; }
.modal .title-kr, .profiles .title-kr {
    font-size: 1.35rem;
    font-weight: bold;
}
.modal .title-jp, .profiles .title-jp {
    font-size: 1.1rem;
    color: #999;
    font-family: 'Meiryo', 'MS Gothic', sans-serif;
}
.modal .website, .profiles .website { margin-top: .5em; }

.modal .img, .profiles .img {
    float: left;
    width: 180px;
    min-height: 100px;
    overflow: hidden;
    position: relative;
}
.modal .thumbcap, .profiles .thumbcap {
    position: absolute;
    bottom: 0;
    width: 100%;
    line-height: 1.5;
    padding: .2em 0;
    background-color: rgba(0,0,0,0.7);
    color: #FFF;
    text-align: center;
}

.modal .cast, .profiles .cast {
    margin-left: 200px;
}
.modal .cast {
    max-height: 320px;
    overflow-y: auto;
}
.modal .cast ul, .profiles .cast ul {
    list-style: none;
    margin: 0;
    line-height: 1.75;
}
.modal .cast li a:last-child:before, .profiles .cast li a:last-child:before {
    display: inline-block; /* to disable text-decoration */
    content: '・';
    color: #CCC;
    margin: 0 .3em 0 .1em;
}

.modal .miscellaneous { margin-top: .5em; }
.modal span + span:before, .profiles span + span:before {
    content: '|';
    display: inline-block;
    vertical-align: middle;
    margin: 0 1em;
    line-height: 10px;
    color: #CCC;
    overflow: hidden;
}

@media screen and (max-width: 969px) {
    .profiles .thumb { float: none; margin: 0 auto; }
    .profiles .cast { display: none; }
}

/* 필터링 후 모아 보여주기 */
.profiles {
    border-collapse: separate;
    border-spacing: 10px;
    margin: auto;
}
.profiles td {
    width: 550px;
    vertical-align: top;
    background-color: #FFF;
    border-radius: 6px;
    text-align: center;
    position: relative; /* for "close" */
}

.profiles .head {
    padding: 20px 50px 15px;
    border-bottom: 1px dotted #EAEAEA;
    text-align: center;
}
.profiles .body {
    padding: 10px 30px;
}
.profiles .foot {
    padding: 10px 30px 15px;
    border-top: 1px dotted #EAEAEA;
    text-align: center;
}

/* Close profiles */
.profiles + .modal-close {
    position: fixed;
    top: 20px;
    right: 40px;
    color: rgba(255,255,255, .5);
}
.profiles + .modal-close:hover { color: rgba(255,255,255, .8); }

/* Dim table cell */
.profiles span.toggle {
    position: absolute;
    top: 15px;
    right: 20px;
    font: bold 25px/1 'Arial';
    padding: 5px;
    background-color: none !important;
    border: 0 !important;
    cursor: pointer;
}
.profiles span.bright { color: rgba(243,206,0,1); }
.profiles span.bright:hover { color: rgba(243,206,0,0.6); }
.profiles span.dim { color: rgba(0,0,0,0.15); }
.profiles span.dim:hover { color: rgba(0,0,0,0.25); }

.profiles td.dim { opacity: 0.75; }

/* Selected item list */
#selected-items {
    width: 80%;
    max-width: 1000px;
    margin: 2em auto 3.5em;
    background-color: rgba(0,0,0, .25);
    position: relative;
}
#selected-items-list {
    display: block;
    resize: vertical;
    min-height: 18em;
    font-family: 'Malgun Gothic', '맑은 고딕', sans-serif;
    font-size: inherit;
    line-height: 1.6;
    border: none;
    background-color: transparent;
    color: #FFF;
    padding: 1em 8em 1em 1em;
}
#selected-items-length {
    position: absolute;
    bottom: 5px;
    right: 10px;
    font-size: 5em;
    line-height: 1;
    color: #fcfcfc;
    -webkit-user-select: none;
    -moz-    user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 게임 발매표
 ----------------------------------------*/
/* 발매표 달력 */
#gametable {
    clear: both;
}
#gametable .month  {
    float: left;
    width: 320px;
    padding: 15px 10px;
    margin-bottom: 1em;
    box-sizing: border-box;
}
#gametable .month + .month { margin-left: 10px; }
#gametable .month.current { background-color: #D9F2FA; }

/* 1월 ~ 12월 글자 */
#gametable .heading {
    font-size: 140%;
    line-height: 1.2;
    margin-bottom: .5em;
    position: relative;
}

/* 펼치기 접기 버튼 */
#gametable span.more {
    font: normal normal 18px/1 'FontAwesome';
    position: absolute;
    top: 2px;
    right: 2px;
    color: #373737;
    cursor: pointer;
}
#gametable span.more:before { content: '\f067'; }

/* 각 목록의 구성 */
#gametable .item {
    padding: 4px 3px;
    cursor: pointer;
}
#gametable .item:nth-child(odd) { background-color: #efefef; }
#gametable .month.current .item:nth-child(odd) { background-color: transparent; }

#gametable span.date {
    display: inline-block;
    vertical-align: top;
    width: 80px;
    font-size: 0.9rem;
    line-height: 20px;
    letter-spacing: -1px;
    color: #AAA;
    margin-right: 4px;
}
#gametable span.date:before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 9px;
    margin-right: 4px;
}
.item.otome span.date:before { background: url(skins/ModernSkylight/resources/images/bullet-pink.png); }
.item.bl span.date:before { background: url(skins/ModernSkylight/resources/images/bullet-red.png); }

#gametable span.title {
    display: inline-block;
    vertical-align: top;
    width: 200px;
    line-height: 20px;
}

/* 팝업 정보 (달력에선 보이지 않음) */
#gametable .detail {
    display: none;
}

/* 캘린더 (사용하지 않음)
 ----------------------------------------*/
.calendar-control {
    position: relative;
}

/* 슬라이드 쇼 & 플레인 모드 */
.calendar-mode {
    position: absolute;
    top: 17px;
    right: 8px;
    width: 32px;
    height: 32px;
    background: url(skins/ModernSkylight/resources/images/view-mode.png) no-repeat 0 0;
    cursor: pointer;
}
.calendar-mode.plain {
    background-position: 0 -32px;
}

/* 캘린더의 스위치 버튼 */
.calendar-navi {
    width: 792px;
    padding: 0 0 30px !important;
    position: relative;
}
.calendar-navi ul.days {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 792px;
    text-align: center;
}
.calendar-navi ul.days li {
    display: inline-block;
    padding: 0 6px;
    color: #555;
}
.calendar-navi ul.days li:hover {
    color: #1DADE2;
    text-decoration: underline;
}
.calendar-navi li.selected ul.days {
    display: block;
}

/* 캘린더의 컨테이너 */
.calendar-container {
    position: relative;
    margin-bottom: 10px;
}
#calendar {
    width: 920px;
    min-height: 237px;
    padding-top: 25px; /* 편집 버튼을 위한 공간 */
    margin: auto;
    background: url(/skins/ModernSkylight/resources/images/throbber.gif) no-repeat center center;
    position: relative;
    overflow-x: hidden;
}
#calendar-prev, #calendar-next {
    font: bold 48px/225px Arial;
    text-align: center;
    width: 25px;
    height: 225px;
    color: #FFF;
    background-color: #57BAE8;
    cursor: pointer;
    position: absolute;
    top: 25px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
#calendar-prev:hover, #calendar-next:hover {
    background-color: #008CCF;
}
#calendar-prev { left: 0; }
#calendar-next { right: 0; }

#calendar .editsection {
    float: none !important;
    position: absolute;
    top: 0;
    right: 0;
}
p .editsection {
    display: none;
}

/* 캘린더 */
.calendar {
    background-color: #FFF;
}
#calendar:not(.plain) .calendar {
    width: 10000px;
    height: 237px;
    position: absolute;
    top: 25px;
    left: 920px;
}

.calendar .day {
    float: left;
    min-width: 100px;
    height: 200px;
    padding: 35px 2px 2px;
    position: relative;
}
.calendar .day .head {
    font: bold 15px/20px '맑은 고딕';
    padding: 5px;
    position: absolute;
    top: 0;
    left: 2px;
    right: 2px;
    background-color: #EAEAEA;
}
.calendar .day .body {
    padding: 10px;
    height: 180px;
}
.calendar.current .today .head, .calendar.current .today .body {
    background-color: #DCECFC;
}

/* 생일인 사람의 사진과 캡션 */
.birth-profile {
    float: left;
    width: 120px;
    height: 180px;
    overflow: hidden;
    text-align: center;
    position: relative;
}
.birth-profile + .birth-profile {
    margin-left: 5px;
}
.birth-profile > a.image {
    line-height: 0;
}
.birth-profile > a.new {
    bottom: 45px;
}
.birth-caption {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 120px;
    background-color: rgba(87, 186, 232, 0.87);
    font-size: 12px;
    line-height: 16px;
    padding: 5px 0;
    text-align: center;
}
.calendar.current .today .birth-caption {
    background-color: rgba(0, 140, 207, 0.87);
}
.birth-caption a {
    color: #FFF !important;
}