AD

여러분의 일상을 공유해보자냥! 트게더 CSS 커스텀 (랄라냥님)

Moderator 꼬미꼬미오
2020-02-25 11:06:24 275 1 0

html {
background: linear-gradient(to bottom, #00ad95, #00f1ff);
height: auto !important;
}

body {
letter-spacing: -0.05em !important;
background: transparent;
font-family: 'Nanum Gothic', sans-serif;
}

/* 전체 쉐도우 */

header #header-bar>.row,
#main .menu-wrapper,
#main #main-content>div.frame {
box-shadow: 3px 0px 10px rgba(0, 0, 0, 0.2);
}

/* 로고밑 NAV bar */

header #header-bar>.row {
border-top: 4px solid #519D9E;
border-right: none;
border-bottom: none;
}

/* 헤더 배너 */

header .row>div:nth-child(1)>a {
display: block;
width: 145px;
height: 50px;
background: url() no-repeat;
background-size: auto 50px;
}

header .row>div:nth-child(1)>a>img {
display: block;

filter: grayscale(100%);
opacity: 0.8;
}

/* 검색폼 보더 */

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

/* 트게더 전체메뉴 / 유용한링크 / 트위치 스케쥴 */

#main .menu-wrapper>.header {
background: #519D9E;
}

.fa-navicon:before,
.fa-reorder:before,
.fa-bars:before {
color: white;
}

.fa-square:before {
color: #D1B6E1;
}

header #header-bar>.row,
#main .menu-wrapper,
#main #main-content>div.frame {
border-right: none;
border-bottom: none;
}

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

/* 헤더 검색 버튼 */

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

/* 헤더 [광고]배경색 */

header #header-bar #header-top-notice strong.notice-badge {
background: #519D9E;
}

/* fa색상 */

header #header-bar .fa {
color: #58C9B9;
}

/* 스트리머 게시판 상단 정보 글씨색상 */

#board-info #board-info-bottom a {
color: #519D9E;
}

/* 좌측메뉴 숏컷링크 글씨 색상 */

#main .menu-wrapper>a>em {
color: #D1B6E1;
}

/* 좌측메뉴 메뉴사이의 공간 색상 */

#main .menu-wrapper .spacer {
background: #D1B6E1;
height: 0.15em;
}

/* 게시글 관련부분 */

#article-list>.article-list-row>.item>.list-title>.list-writer>span {
width: 120px !important;
}

#article-list #article-list-category {
border-top: 2px solid #519D9E;
background: white;
}

#article-list #article-list-category>a {
background: white;
}

#article-list>.article-list-row>.item>.list-header>span {
background-color: #519D9E;
}

#article-list>.article-list-row>.item>.list-title>small.comment-count {
color: #519D9E;
}

#article-list>.article-list-row>.item>.list-title>.list-writer.logged>span {
color: #519D9E;
}

.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: #519D9E;
}

.pagination>li>a:focus,
.pagination>li>a:hover,
.pagination>li>span:focus,
.pagination>li>span:hover {
color: #519D9E;
}

.pagination>li>a,
.pagination>li>span {
color: #519D9E;
}

#article-content-wrapper>.header {
border-top: 2px solid #519D9E;
}

#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: #519D9E;
}

#article-info>h2 {
font-weight: bold;
}

#article-info>h2>span.category {
color: #519D9E !important;
}

#article-reply-area>.header h5 {
color: #519D9E;
}

#main .menu-wrapper>a {
padding: 0.5em 1.4em 0.5em 0.7em !important;
}

a {
color: #519D9E;
}

span.a-badge i.fa.fa-info-circle {
color: #519D9E;
}

/* 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: #58C9B9 !important;
}
/* 프로필 이미지 */
#board-info #board-info-profile-img {
width: 96px;
border: 1px solid #000000;
border-radius: 100px;
position: absolute;
top: -10px;
z-index: 1;
}

#board-info h1 {
margin-left: 101px;
}

#board-info #board-info-bottom {
margin-left: 101px;
}
/* 글 작성자 닉네임 색상 변경
#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: #0404B4;
}*/

/* 테두리 */


header #header-bar>.row, #main .menu-wrapper, #main #main-content>div.frame {

    border-radius: 15px;

}


#main .menu-wrapper>.header {

    border-radius: 15px 15px 0 0;

}

#main .menu-wrapper a:nth-last-child(1) {

    border-radius: 0px 0px 15px 15px;

}

/*시청수*/
#board-info #viewers-area #viewers:before {


    content: "현재  ";

    cursor: text;

}

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

    content: " 명이 둘러보시는중!";

    cursor: text;
}

@font-face { font-family: 'yg-jalnan'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/JalnanOTF00.woff') format('woff'); font-weight: normal; font-style: normal; }
*{font-family:'yg-jalnan'} 

body {
letter-spacing: -0.05em !important;
background: transparent;
  font-family: 'Nanum Gothic', Arial, Helvetica, sans-serif;

}

#article-list>.article-list-row>.item>.list-title>.list-writer>span {
width: 120px !important;
}

#article-list #article-list-category {
border-top: 2px solid #fe6357;
background: white;
}

#article-list #article-list-category>a {
background: white;
}

#article-list>.article-list-row>.item>.list-header>span {
background-color: #fe6357;
}

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

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

.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover {
background-color: #fe6357;
border-color: #fe6357;
}

.pagination>li>a:focus,
.pagination>li>a:hover,
.pagination>li>span:focus,
.pagination>li>span:hover {
color: #fe6357;
}

.pagination>li>a,
.pagination>li>span {
color: #fe6357;
}

#article-content-wrapper>.header {
border-top: 2px solid #fe6357;
}

#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: #fe6357;
}

#article-info>h2 {
font-weight: bold;
}

#article-info>h2>span.category {
color: #fe6357 !important;
}

#article-reply-area>.header h5 {
color: #fe6357;
}

#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: #fe6357;
}

.btn-primary {
background: #fef256 !important;
}

@keyframes greenblue
{
0% { background-color: rgb(255,255,255); }
25% { background-color: rgb(125,255,255); }
50% { background-color: rgb(255,125,255); }
75% { background-color: rgb(255,255,125); }
100% { background-color: rgb(255,255,255); }
}

/* 마우스 커서 링크 */
#right-search-form>#right-search-btn,
#board-info #board-info-bottom #addFavoriteBtn,
#article-list #article-option-area>#article-option-area-toggle-btn,
#article-list>.article-list-row>.item>.list-title>.list-writer>span,
.reply > .reply-header > .reply-writer.logged,
.reply-menu,
.btn,
.fr-toolbar .fr-command.fr-btn,
.fr-popup .fr-command.fr-btn,
.fr-view img,
.pull-left,
a {
cursor: url(https://cdn.discordapp.com/attachments/631986543845834755/649234048010420255/50a1c0c15cc4593a.png) 0 0, auto !important;
}

/* 컬러, 로고 설정 부분 */

:root {

 --bgColor: #f3edf5;  /* 배경 색 */

 --mainColor: #c3a7cc;  /* 메인 컬러 */

 --mainColor2: #f7f3f8; /* 트게더 메뉴, 게시글 hover */

 --mainColor3: #f3edf5; /* 공지, 인기글 */

 --mainColor5: #ebe2ee; /* 공지, 인기글 hover */

 --logoURL: url(./logo/logo1.png); /* 로고 이미지 주소 */

 --logoWidth: 160px;  /* 로고 너비 */

 --toTopURL: url(./logo/toTop.png); /* 위로 이미지 주소*/

 --toTopHeight: 100px; /* 위로 이미지 높이 */

 --toTopWidth: 113px; /* 위로 이미지 너비 */

 --before: "꼬냉을 향해 뛰는 ";   /* 접속자 수 앞 */

 --after: "개의 심장";   /* 접속자 수 뒤 */

}/* 컬러, 로고 설정 부분 */

:root {

 --bgColor: #f3edf5;  /* 배경 색 */

 --mainColor: #c3a7cc;  /* 메인 컬러 */

 --mainColor2: #f7f3f8; /* 트게더 메뉴, 게시글 hover */

 --mainColor3: #f3edf5; /* 공지, 인기글 */

 --mainColor5: #ebe2ee; /* 공지, 인기글 hover */

 --logoURL: url(./logo/logo1.png); /* 로고 이미지 주소 */

 --logoWidth: 160px;  /* 로고 너비 */

 --toTopURL: url(./logo/toTop.png); /* 위로 이미지 주소*/

 --toTopHeight: 100px; /* 위로 이미지 높이 */

 --toTopWidth: 113px; /* 위로 이미지 너비 */

 --before: "꼬냉을 향해 뛰는 ";   /* 접속자 수 앞 */

 --after: "개의 심장";   /* 접속자 수 뒤 */

}

footer a{color:#fd0000;}

#article-list #article-list-category{border-top:0}

#board-info #board-info-profile-img:hover {
transform: scale(1.10); /* 크기가 커짐 */
transition: .20s; /* 0.2초에 걸쳐서 부드럽게 애니메이션이 진행 */
}

#board-info {
overflow: visible;
}

#board-info #board-info-profile-img{
float: left !important;
margin-right: 5px;
border-radius: 100px;
border: solid 1px #fdafab;
}

#board-info #viewers-area {
float: right;
}

#article-list>.article-list-row:hover {
transform: scale(1.01);
}

header #header-bar>.row {
border: 0;
background: linear-gradient(to right, #007fff, #34b3ff, #007fff) 0%/200% repeat-x;
animation: gradient 3s linear normal infinite;
}

header #header-bar a.dropdown-toggle,
header #header-bar #header-top-notice a{
color: white;
}

@keyframes gradient {
0% {
background-position: 0%;
}
100% {
background-position: 200%;
}
}

/* dropdown transition */
.dropdown.open .dropdown-menu,
.input-group-btn.open .dropdown-menu {
opacity: unset;
transform: unset;
border: 1px solid #000000;
border-radius: 10px;
box-shadow: 0 2px 2px rgba(0,0,0,.3);
}
.dropdown .dropdown-menu,
.input-group-btn .dropdown-menu {
display: block !important;
opacity: 0;
transform: scale(0);
transform-origin: top;
transition: all 0.3s cubic-bezier(0.2, 1.5, 0, 1);
padding: 8px 0 3px 0px;
}
.dropdown-menu>li>a {
transition: .1s;
}
.dropdown-menu>li>a:hover {
background: transparent;
transform: scaleX(1.04);
transition: .1s;
}

html {
background: linear-gradient(to bottom, #8c83af, #FFFFFF);
height: auto !important;
}

body {
background: transparent;
animation: snow 20s linear infinite;

/*백그라운드 이미지 원근감느낌 이미지*/
background-image:url('https://cdn.discordapp.com/attachments/460145928850898945/515694458633846831/snow.png'), url("https://cdn.discordapp.com/attachments/460145928850898945/515694460668084274/snow3.png"), url("https://cdn.discordapp.com/attachments/460145928850898945/515694462278828073/snow2.png");
}


/*뒷배경 움직이는 애니메이션*/
@keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

/* 검색 버튼 */
#right-search-form > #right-search-btn{
color : #666;
position: absolute;
transform: translateX(-40px) translateY(-1px);
}

/* 검색 버튼 텍스트 아이콘 */
#right-search-form > #right-search-btn>i{
border: 3px solid #58ff00;
border-radius: 50%;
width: 40px;
height: 40px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
color: #58ff00;
}

#right-search-form:hover > #right-search-btn>i{
background: #58ff00;
color: #fff;
transition: 0.4s;
}

/* 검색 창 */
#right-search-form > #right-search-input{
border: 0px solid #58ff00;
border-radius: 0px;
width: 0px;
height: 40px;
background: #fff;
padding: 0;
}

#right-search-form:hover > #right-search-input{
border: 3px solid #58ff00;
border-radius: 30px;
width: 240px;
transition: 0.4s;
}

.vote-btn[data-type="up"] {
border: none;
font-size: 0;
outline: 0 !important;
}

.vote-btn[data-type="up"]:hover {
background: none !important;
}

.vote-btn[data-type="up"]::before {
display: inline-block;
background: white;
border: solid #5cb85c 1px;
float: left;
width: 60px;
height: 60px;
border-radius: 60px;
font-size: 26pt;
content: "\f164";
padding-top: 17px;
padding-left: 2px;
font: normal 22px/1 FontAwesome;
-moz-transition:color .2s ease;
-o-transition:color .2s ease;
-ms-transition:color .2s ease;
-webkit-transition:color .2s ease;
transition:color .2s ease;
}

.vote-btn[data-type="up"]:hover::before {
background: #5cb85c;
color: white;
}


.vote-btn[data-type="up"]:focus::before {
color: #5cb85c;
}

.vote-btn[data-type="up"]:focus:hover::before {
color: white;
}

.vote-btn[data-type="up"] span {
float: left;
padding-top: 14px;
padding-left: 15px;
font-size: 22px;
color: #5cb85c;
}

#main .menu-wrapper,
#main #main-content > div.frame {
border: 2px solid #6441a5;
border-radius: 15px;
}

#main .menu-wrapper::before {
background: linear-gradient(135deg, #6441a5 24px, transparent 0), linear-gradient(225deg, #6441a5 24px, transparent 0);
background-repeat: repeat-x;
background-size: 12px 33px;
border-radius: 13px 13px 0 0;
position: absolute;
color: white;
padding: 0.4em 1em 0 1em;
text-align: center;
font-weight: bold;
left: 0px;
width: calc(100%);
height: 34px;
}

#main .menu-wrapper:nth-child(1)::before {
content: "트게더 메뉴";
}

#main .menu-wrapper:nth-child(2)::before {
content: "유용한 링크";
}

#main .menu-wrapper:nth-child(3)::before {
content: "트위치 스케줄";
}

#main .menu-wrapper a:nth-last-child(1) {
border-radius: 0px 0px 15px 15px;
}

#main .menu-wrapper > .header {
background: white;
border-radius: 12px 12px 0 0;
}

#main #main-content:before {
background: linear-gradient(135deg, #6441a5 24px, transparent 0), linear-gradient(225deg, #6441a5 24px, transparent 0);
background-repeat: repeat-x;
background-size: 12px 33px;
border-radius: 13px 13px 0 0;
position: absolute;
content: " ";
left: 0px;
margin-left: 15px;
margin-top: 2px;
width: calc(100% - 15px);
height: calc(100%);
pointer-events: none;
}

#main #main-content > div.frame {
padding-top: 25px;
}

#article-list>.article-list-row>.item>.list-title>a  {
color: #색상코드 !important;
}

#main .menu-wrapper>a>em {
color: #색상코드;
}

#main .menu-wrapper .spacer {
display: none;
}

#board-info h1 { border-bottom:0; padding-bottom:3px; }

#article-list > .article-list-row > .item > div { border-bottom:0 !important; }

#movetotop {opacity:1 !important;}

#article-list #article-list-menu>.btn.write {transform:scale(1.3)}

후원댓글 0
댓글 0개  
이전 댓글 더 보기
TWIP 잔액: 확인중
▲윗글 내 첫경험 글로__
▼아랫글 제목을 보고
여러분의 일상을 공유해보자냥!그림자랑!고민 있으면 말해라냥자유! 자유가 최고!계시물인것이다
0
여러분의 일상을 공유해보자냥!
데헷☆
쿠밀
07-17
1
여러분의 일상을 공유해보자냥!
내 첫경험 [1]
글로__
03-18
»
여러분의 일상을 공유해보자냥!
트게더 CSS 커스텀 (랄라냥님)
Moderator 꼬미꼬미오
02-25
0
여러분의 일상을 공유해보자냥!
제목을 보고 [2]
랄라냥
02-16
0
여러분의 일상을 공유해보자냥!
그냥 [2]
기역이
02-15
인기글 글 쓰기