imported>카페인러브: 새 CSS

2017-02-09T10:15:40Z

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

미디어위키:Project.css - 편집 역사

imported>카페인러브: 새 CSS