AD

*소통* 1차 리뉴얼 (버튼 둥글게 / 기타 색깔 변경)

고둑님
2018-11-23 23:58:47 431 2 4

@import url(http://fonts.googleapis.com/earlyaccess/nan@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);


html,p,div,table,body,a,ul,li,td{ font-family: NanumGothicBold; font-style: normal; font-weight: normal;}


/*헤더*/


html,body{


background:#DFEFEF;


}


header .row>div:nth-child(1)>a img { opacity: 0}


header #header-bar #header-top-notice strong.notice-badge {background: #5a6255;  padding: 4px 8px;  color: #fff;  font-weight: bold;}




#board-info #board-info-profile-img {


    height: auto;


    position: absolute;


    right: 10px;


    top: 4px;


    border-radius: 50%;


    width: 7em;


    animation: doongdoong 0.5s infinite linear


}




/*로고*/


header #header-bar>.row {  padding-top: 0.3em;  padding-bottom: 0.3em;  border-top: 5px solid #5a6255;  background: #fff; border-bottom: 2px solid #5a6255;border-right: 2px solid #5c6255;border-radius: 8px 8px 0 0;}


header .row>div:nth-child(1)>a {


  display: block;


  width: 200px;


  height: 50px;


  background: url(https://upload.tgd.kr/20180906/f5237217171fc1f1583ad51ccb3a22f2.png) no-repeat;


  background-size: auto 50px;


  position:relative;


  top:14px;


  animation: blink 4.5s linear 0s 2 alternate-reverse backwards;


}




/*검색*/


header #right-search-form{


    position: relative;


    top: 20px;


}


header #right-search-form:before{


   color:rgba(10,59,84,0);


    position: absolute;


    top: 19px;


    left: 415px;


    z-index:999


}


header #right-search-form>input[type=text]{border: 3px solid #ffffff;}


header #right-search-form>#right-search-btn { color: #ffffff;}






/*사이드바*/


#main .menu-wrapper>.header{


       background:#663399;


       border-radius: 5px 5px 0 0;


       box-shadow: inset 0px 0px 13px 2px rgba(173, 159, 159, 0.5);


}


#main .menu-wrapper{border-right:none; border-bottom:none}


#main .menu-wrapper>a>em { color: #663399; text-decoration: none; font-style: normal;  width: 24px;  text-align: center;  display: inline-block;  font-weight: bold;}


#main .menu-wrapper>a>i.fa.fa-square { width: 24px; display: inline-block; text-align: center; font-size: 0.1em;  color: #663399; vertical-align: 0.2em;}


#main .menu-wrapper .spacer {


    background: #663399;


}




/*info*/


#board-info h1>a{


animation:text-shadow 1.5s ease-in-out infinite;


font-weight: bold;


}


#board-info h1>a:hover{


animation-play-state: paused;


}


/*컨텐츠*/


#article-list>.article-list-row>.item>.list-header>span{background-color:#5a6255}


#article-list>.article-list-row.notice{animation: notic 3s linear 0s infinite alternate backwards;}


#article-list #article-list-category{border-top: 2px solid #5a6255; }


.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover{background-color: #5a6255;


    border-color: #5a6255;}


#article-list>.article-list-row>.item>.list-title>small.comment-count{color:#5a6255;


animation: re 3s linear 0s infinite alternate backwards;}


#article-list>.article-list-row>.item>.list-title>.list-writer.logged>span{color:#5a6255}




/*게시판*/


#main #main-content>div.frame{


border-radius:8px;


border-top:5px solid;


animation: border 3s linear 0s infinite alternate backwards;


border-right:0px solid;


border-bottom:0px solid;


}






/*나누기*/


.container>span>a{color: #cccaca}


.container>span{color: #cccaca}




#article-reply-area > .header h5{color:#5a6255}


#article-reply-area #reply-real-area .reply > .reply-header > .reply-writer.logged, #article-reply-area #reply-best-area .reply>.reply-header>.reply-writer.logged{color:#f14c4c}




/*드래그*/


::selection{color:#fff;background:#3E3E3E}




/* 애니메이션 */


@keyframes change-color {


 0%{


    background-color:#5a6255;


  }


  100%{


    background-color:#5a6255;


  }


}




@keyframes notic {


 0%{


    background-color:#ffecec;


  }


50%{


    background-color:#ecf2ff;


  }


  100%{


    background-color:#fdffec;


  }


}


@keyframes blink {


  0%{


    opacity: 1;


  }


  25%{


    opacity: 0;


  }


  50%{


    opacity: 1;


  }


  75%{


    opacity: 0;


  }


  100%{


    opacity: 1;


  }


}


@keyframes ong{


 0%{


    color:#5a6255;


  }


  100%{


    color:#8386ff;


  }


}




/*라인반짝*/


@keyframes  border{


 0%{


    border-color:#663399;


  }


50%{


    border-color:#5a6255;


  }


  100%{


    border-color:#ffcf7c;


  }


}




#board-info #viewers-area .fa-user:before{


     


}




#board-info #viewers-area #viewers:before{


content: "남산에서";


cursor: text;


}


#board-info #viewers-area #viewers:after {


    content: "만명 존버 중";


    cursor: text;


}










@keyframes bounceInUp{


  0%,60%,75%,90%,to{


    animation-timing-function:cubic-bezier(.215,.61,.355,1)


  }


  0%{


    opacity:0;transform:translate3d(0,3000px,0)


  }


  60%{


    opacity:1;transform:translate3d(0,-20px,0)


  }


  75%{


    transform:translate3d(0,10px,0)


  }


  90%{


    transform:translate3d(0,-5px,0)


  }


  to{


    transform:translateZ(0)


  }


}




@keyframes doongdoong{


    0% {


        top: -10px


    }




    50% {


        top: -2px


    }




    100% {


        top:-10px


    }


}




@keyframes text-shadow {


    0% {  


        transform: translateY(0);


        text-shadow:


            0 0 0 #f7a6fb,


            0 0 0 #94a1fe,


            0 0 0 #fbc7cd,


            0 0 0 #7d7c03;


    }




    20% {  


        transform: translateY(-0.5em);


        text-shadow:


            0 0.125em 0 #f7a6fb,


            0 0.25em 0 #94a1fe,


            0 -0.125em 0 #fbc7cd,


            0 -0.25em 0 #7d7c03;


    }




    40% {  


        transform: translateY(0.25em);


        text-shadow:


            0 -0.0625em 0 #f7a6fb,


            0 -0.125em 0 #94a1fe,


            0 0.0625em 0 #fbc7cd,


            0 0.125em 0 #7d7c03;


    }


   


   60% {


        transform: translateY(-0.25em);


        text-shadow:


            0 0.03125em 0 #f7a6fb,


            0 0.0625em 0 #94a1fe,


            0 -0.03125em 0 #fbc7cd,


            0 -0.0625em 0 #7d7c03;


    }




    80% {  


        transform: translateY(0);


        text-shadow:


            0 0 0 #f7a6fb,


            0 0 0 #94a1fe,


            0 0 0 #fbc7cd,


            0 0 0 #7d7c03;


    }


}




@keyframes move{


0%{


background-position:left


}


100%{


background-position:right


}


}


 header .row>div:nth-child(1)>a {






  display: block;






  width: 145px;






  height: 50px;






  background: url(https://user-images.githubusercontent.com/44055669/46845014-7efd5700-ce14-11e8-87bc-b5d9621dd0ad.png) no-repeat;






  background-size: auto 50px;






}








img[src="https://static-cdn.jtvnw.net/chat-badges/broadcaster.png"] {




    content: url("https://user-images.githubusercontent.com/44055669/46847971-1917cc00-ce22-11e8-9ca0-7964821dbec5.png?raw=true");






}




img[src="https://static-cdn.jtvnw.net/chat-badges/mod.png"] {






    content: url("https://user-images.githubusercontent.com/44055669/46899487-f2fc3580-cece-11e8-972b-de5928102c18.png?raw=true");






}




/* 추천게시물(별) 제거후 이미지 삽임 */










span.a-badge i.fa.fa-star {






    color: rgba(0, 0, 0, 0);






    width:15px;






    height:21px;


    


    top: 3px;






        animation: test 0.1s linear infinite alternate;






    background-repeat: no-repeat;




}




/* 별 애니메이션 */










@keyframes test{






    from{transform:translate(0,5px);}






    to{transform:translate(0,0px);}






}




/* 스트리머명 굵게 */










h1{






    font-weight: 900;






    color: #5a6255;






}




#board-info h1>a{


color: #5a6255;




}










.fa-star:before {






    content: url("https://upload.tgd.kr/20181010/18515ea48242b0338d9d7b471bada776.png");






    filter:drop-shadow(1px 1px 1px rgba(1,0,0,0));






    position: relative;






    top: 3px;


    


    animation: test 0.1s linear infinite alternate;






}


/* 상단 배경화면 */




header .row {




    background-repeat: no-repeat;




    display: block;




    height: 50px;




    background-image: url(https://user-images.githubusercontent.com/44055669/46945322-6ceb1500-d0af-11e8-8c6a-dea2984a0f23.png);




}






* {


    -webkit-box-sizing: border-box;


    -moz-box-sizing: border-box;


    box-sizing: border-box;


    border-radius: 5px;


}

/* 게시글 관련부분 */


#article-list>.article-list-row>.item>.list-title>.list-writer>span {


  width: 120px !important;


}


#article-list #article-list-category {


  border-top: 2px solid #5a6255;


  background: white;


}


#article-list #article-list-category>a {


  background: white;


}


#article-list>.article-list-row>.item>.list-header>span {


  background-color: #5a6255;


}


#article-list>.article-list-row>.item>.list-title>small.comment-count {


  color: #5a6255;


}


#article-list>.article-list-row>.item>.list-title>.list-writer.logged>span {


  color: #5a6255;


}


.pagination>.active>a,


.pagination>.active>a:focus,


.pagination>.active>a:hover,


.pagination>.active>span,


.pagination>.active>span:focus,


.pagination>.active>span:hover {


  background-color: #519D9E;


  border-color: #5a6255;


}


.pagination>li>a:focus,


.pagination>li>a:hover,


.pagination>li>span:focus,


.pagination>li>span:hover {


  color: #5a6255;


}


.pagination>li>a,


.pagination>li>span {


  color: #5a6255;


}


#article-content-wrapper>.header {


  border-top: 2px solid #5a6255;


}


#article-reply-area #reply-real-area .reply>.reply-header>.reply-writer.logged,


#article-reply-area #reply-best-area .reply>.reply-header>.reply-writer.logged {


  color: #5a6255;


}


#article-info>h2 {


  font-weight: bold;


}


#article-info>h2>span.category {


  color: #5a6255 !important;


}


#article-reply-area>.header h5 {


  color: #5a6255;


}


#main .menu-wrapper>a {


  padding: 0.5em 1.4em 0.5em 0.7em !important;


}


a {


  color: #5a6255;


}


span.a-badge i.fa.fa-info-circle {


  color: #5a6255;


}




/* footer */


#article-list>.article-list-row {


  border-right: none;


}


#article-list #article-list-menu {


  box-sizing: border-box;


  width: unset;


  margin: 20px;


}


#article-list #boardSearchForm {


  padding-bottom: 20px;


  height: unset;


}


.btn-primary {


  background: #5a6255 !important;


}


#board-info h1 > a.badge.badge-live {

 position: absolute;

 top: 30px;

 left: 255px;

 line-height: 12px;

 font-size: 15px;

 width: 84px;

 height: 20px;

}

/*글쓰기*/

#article-list #article-list-menu > .btn.write {

 color: #fff;

 text-align: center;

 transition: border 0.25s linear, color 0.25s linear, background-color 0.25s linear;

 background-color: #5a6255;

 border-color: #5a6255;

 box-shadow: 0 3px 0 #5a6255;

 border-radius: 6px 6px 6px 6px;

}

/* 인기글, 페이지 넘버, 글쓰기*/

#article-list #article-list-menu > .btn.best {

 color: #f0953a;

 border-color: #f0953a;

 border-radius: 6px 6px 6px 6px;

}

.pagination > li > a, .pagination > li > span {

 border: none;

}

.pagination > .active > a {

 background-color: #5a6255;

 border-color: #5a6225;

 border-radius: 20px;

}

.pagination > li > a {

 color: #f50707;

}

/*작성취소*/

.btn-default {

 color: #fff;

 text-align: center;

 transition: border 0.25s linear, color 0.25s linear, background-color 0.25s linear;

 background-color: #67d721;

 border-color: #67d721;

 border-radius: 6px 6px 6px 6px;

}

.btn-default:hover {

 background-color: #f334b2;

}

.btn-default:active {

 top: 3px;

 outline: none;

 box-shadow: none;

} /*설문 추가*/

.btn-info {

 color: #fff;

 text-align: center;

 transition: border 0.25s linear, color 0.25s linear, background-color 0.25s linear;

 background-color: #d6bb31;

 border-color: #d6bb31;

 box-shadow: 0 3px 0 #75661a;

 border-radius: 6px 6px 6px 6px;

}

.btn-info:active {

 top: 3px;

 outline: none;

 box-shadow: none;

}

.input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn-group {

 border-radius: 6px 6px 6px 6px;

}

.btn-default:active {

 top: 3px;

 outline: none;

 box-shadow: none;

}

.btn.square {

 border-radius: 6px 6px 6px 6px;;

}


.fa-search:before {

 color: #fff;

}

#article-reply-area #reply-best-area .reply > .reply-content, #article-reply-area #reply-real-area .reply > .reply-content {

 border-right: 2px solid #32f5fb;

 border-left: 2px solid #32f5fb;

 border-bottom: 2px solid #32f5fb;

 border-radius: 0 0 10px 10px;

}

#article-reply-area #reply-best-area .reply, #article-reply-area #reply-real-area .reply {

 border: none;


목록
후원댓글 4개
댓글 4개   ▼
이전 댓글 더 보기
TWIP 잔액: 확인중원
원
▲윗글 아니 오킹님아 제발 좀.. 라이킴
▼아랫글 와 고둑
*공지**소통*군머썰팬아트*유머게시판**비밀글**게임 추천*당첨 인증
0
*소통*
오킹님 다음에만나면
궁슈
11-24
2
*소통*
눈이....눈치없게 많이 오네요 [1]
폰테인_
11-24
0
*소통*
눈이 온다고요?
투디다스
11-24
0
*소통*
연탄봉사하고 눈싸움각이네요 [5]
궁슈
11-24
0
*소통*
오킹니임 [1]
에너지절약
11-24
0
*소통*
와우 대설주의보!
성가시는아이
11-24
0
*소통*
눈이 좀. . . 너무 오는데. .
joinjun94
11-24
0
*소통*
약 2시간 10분
지안쿤
11-24
3
*소통*
Wow it's the [1]
라이킴
11-24
2
*소통*
눈이와요 눈이와 당고개에 눈이와요 [4]
음게식
11-24
2
*소통*
첫눈 [1]
에너지절약
11-24
2
*소통*
지금 오늘 봉사하는 곳에 눈와여 [2]
음게식
11-24
1
*소통*
아니 지금 당고개역인데 눈 내리는데요?? [1]
리제전용피주머니
11-24
7
*소통*
지금 혹시 서울에 눈오나요?? [2]
당푸지요
11-24
1
*소통*
예에 [1]
가연_
11-24
2
*소통*
나, 컨텐츠 왕 오병민. 오킹이라 하지! [1]
블루라이프_9602
11-24
2
*소통*
아 이런....놓쳤다 [3]
휘슬파람
11-24
2
*소통*
일찍 퇴근합니다 [1]
라이킴
11-24
2
*소통*
결국 생성제한 걸리셨구만.. [1]
옥보단남자
11-24
2
*소통*
아니 오킹님아 제발 좀.. [1]
라이킴
11-24
»
*소통*
1차 리뉴얼 (버튼 둥글게 / 기타 색깔 변경) [4]
고둑
11-23
2
*소통*
와 [3]
고둑
11-23
2
*소통*
오킹님이 피파를 잘 한 EU. [2]
라이킴
11-23
3
*소통*
나눔킹 [2]
토레타상위호환포카리
11-23
2
*소통*
방송 잘보고 있어여 [1]
피와제_
11-23
4
*소통*
트게더 재 보수 비용 좀 비싼데 [1]
고둑
11-23
2
*소통*
서버는 크라테르다 왜냐하면 [2]
라이킴
11-23
3
*소통*
간만에 시간이 붕 떠서 트위치를 켰는데 [5]
홀리몰리과카몰리할리갈리
11-23
1
*소통*
옆집 찐씨네 김장컨텐츠 하는데 훈수질 쌉가능인가? [2]
투디다스
11-23
2
*소통*
서버는 크라테르다 왜냐하면 [4]
가야워터
11-23
인기글 글 쓰기
  • 제목+내용
  • 닉네임
    •