AD

건의사항 스피드소닉님 트게더 CSS 건의사항

장석훈님
2022-08-17 17:15:33 318 0 0

아래 표에 있는 걸 그대로 복붙하시면 되요

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

html {
  background:  #F5F5DC;
  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);
}

/* 헤더 배너 */

header .row>div:nth-child(1)>a {
  display: block;
  width: 145px;
  height: 50px;
  background: url(https://upload.tgd.kr/20220817/c961fa8e1bda670ed0cea3e4825c77bf.png) no-repeat;
  background-size: auto 50px;
}

header .row>div:nth-child(1)>a>img {
  display: none;
    filter: grayscale(100%);
  opacity: 0.8;
}

/* 검색폼 보더 */

header #right-search-form>input[type='text'],
html.darkmode header #right-search-form>input[type='text'] {
  border: 3px solid #339900;
}

/* 헤더 검색 버튼 */

header #right-search-form>#right-search-btn,
html.darkmode header #right-search-form>#right-search-btn {
  color: #339900;
}

/* 헤더 홈 버튼 */

header #tgd-home-nav {
  color: #339900;
}

/* 로고밑 NAV bar */

header #header-bar>.row,
html.darkmode header #header-bar>.row {
  border-top: 4px solid #339900;
  border-right: none;
  border-bottom: none;
}

/* fa색상 */

header #header-bar .fa {
  color: #339900;
}

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

header #header-bar #header-top-notice strong.notice-badge,
html.darkmode header #header-bar #header-top-notice strong.notice-badge {
  background: #339900;
}

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

#main .menu-wrapper>.header,
html.darkmode #main .menu-wrapper>.header {
  background: #339900;
}

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

.fa-square:before,
html.darkmode .fa-square:before {
  color: #339900;
}

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

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

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

#main-menu>.menu-wrapper>a:hover,
#main-menu>.menu-wrapper #fav-shortcut-area>a:hover {
  background-color: #EEEEEE
}
html.darkmode #main-menu>.menu-wrapper>a:hover,
html.darkmode #main-menu>.menu-wrapper #fav-shortcut-area>a:hover {
  background-color: #454545
}

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

#main .menu-wrapper>a>em,
html.darkmode #main .menu-wrapper>a>em {
  color: #339900;
}

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

#main .menu-wrapper .spacer,
html.darkmode #main .menu-wrapper .spacer {
  background: #339900;
  height: 0.15em;
}

/* 접속자수 아이콘 이미지 */

#board-info #viewers-area .fa-user:before {
 color: rgba(10, 59, 84, 0);
 content: url(https://upload.tgd.kr/20190601/33350e63ec09ca5de9c9d0fe65a2b8b1.png)/;
}

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

#board-info #board-info-bottom a,
html.darkmode #board-info #board-info-bottom a {
  color: #339900;
}

/* 게시글 목록 관련부분 */

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

#article-list #article-list-category,
#article-list #article-list-category.can-float {
  border-top: 2px solid #339900;
  background-color: #DDFFCC;
}
#article-list #article-list-category>a,
#article-list #article-list-category.can-float>a {
  background-color: #DDFFCC;
}
#article-list #article-list-category>a:hover,
#article-list #article-list-category.can-float>a:hover,
#article-list #article-list-category>#board-home-link-btn,
#article-list #article-list-category.can-float>#board-home-link-btn {
  background: white;
}
html.darkmode #article-list #article-list-category,
html.darkmode #article-list #article-list-category.can-float {
  border-top: 2px solid #339900;
  background-color: #226600;
}
html.darkmode #article-list #article-list-category>a,
html.darkmode #article-list #article-list-category.can-float>a {
  background-color: #226600;
}
html.darkmode #article-list #article-list-category>a:hover,
html.darkmode #article-list #article-list-category.can-float>a:hover,
html.darkmode #article-list #article-list-category>#board-home-link-btn,
html.darkmode #article-list #article-list-category.can-float>#board-home-link-btn {
  background: black;
}

span.a-badge i.fa.fa-info-circle,
#article-list>.article-list-row>.item>.list-header>b,
#article-list>.article-list-row>.item>.list-header>strong {
  color: #000000;
}
html.darkmode span.a-badge i.fa.fa-info-circle,
html.darkmode #article-list>.article-list-row>.item>.list-header>b,
html.darkmode #article-list>.article-list-row>.item>.list-header>strong{
  color: #FFFFFF;
}

#article-list>.article-list-row>.item>.list-header>span,
html.darkmode #article-list>.article-list-row>.item>.list-header>span {
  background-color: #339900;
}

#article-list>.article-list-row>.item>.list-title>small.comment-count,
#article-list>.article-list-row>.item>.list-title>.list-writer.logged>span,
html.darkmode #article-list>.article-list-row>.item>.list-title>small.comment-count,
html.darkmode #article-list>.article-list-row>.item>.list-title>.list-writer.logged>span {
  color: #339900;
}

#article-list>.article-list-row>.item:hover {
  background-color: #EEEEEE;
}
html.darkmode #article-list>.article-list-row>.item:hover {
  background-color: #454545;
}

/* 개시글 내용 관련부분*/

#article-info>h2,
html.darkmode #article-info>h2 {
  font-weight: bold;
}
#article-info>h2>span.category,
html.darkmode #article-info>h2>span.category {
  color: #339900 !important;
}

#article-content-wrapper>.header,
html.darkmode #article-content-wrapper>.header {
  border-top: 2px solid #339900;
}

html.darkmode #article-content-wrapper>.header>#article-comment>a {
  color: #FFFFFF;
}

#article-reply-area>.header h5,
html.darkmode #article-reply-area>.header h5 {
  color: #339900;
}

#article-reply-area #reply-real-area .reply>.reply-header>.reply-writer.logged,
#article-reply-area #reply-best-area .reply>.reply-header>.reply-writer.logged,
html.darkmode #article-reply-area #reply-real-area .reply>.reply-header>.reply-writer.logged,
html.darkmode #article-reply-area #reply-best-area .reply>.reply-header>.reply-writer.logged {
  color: #339900;
}

#article-reply-area>.header h5>a,
#article-reply-area #reply-real-area .reply>a,
#article-reply-area #reply-real-area .reply>.reply-header>.reply-menu>a,
#article-reply-area #reply-best-area .reply>.reply-header>.reply-menu>a,
#article-reply-area>a>i.fa.fa-share,
#article-reply-area>a {
  color: #000000;
}
html.darkmode #article-reply-area>.header h5>a,
html.darkmode #article-reply-area #reply-real-area .reply>a,
html.darkmode #article-reply-area #reply-real-area .reply>.reply-header>.reply-menu>a,
html.darkmode #article-reply-area #reply-best-area .reply>.reply-header>.reply-menu>a,
html.darkmode #article-reply-area>a>i.fa.fa-share,
html.darkmode #article-reply-area>a {
  color: #FFFFFF;
}

html.darkmode #article-reply-area #reply-best-area .reply>.reply-content {
  background-color: #2E2319;
}

html.darkmode #comment-write-form>.fr-box.fr-ltr.fr-basic.fr-top>.fr-toolbar.fr-ltr.fr-desktop.fr-top.fr-basic.fr-sticky-off {
  border-top: 4px solid #FFFFFF;
}

/* 하단 검색 / 페이지 관련 */

#article-list>.article-list-row,
html.darkmode #article-list>.article-list-row {
  border-right: none;
}

#article-list #article-list-menu,
html.darkmode #article-list #article-list-menu {
  box-sizing: border-box;
  width: unset;
  margin: 20px;
}

#article-list #boardSearchForm,
html.darkmode #article-list #boardSearchForm {
  padding-bottom: 20px;
  height: unset;
}

.pagination>.active>a,
.pagination>.active>span,
html.darkmode .pagination>.active>a,
html.darkmode .pagination>.active>span {
  background-color: #339900;
  border-color: #339900;
  color: #FFFFFF;
}
.pagination>.active>a:focus,
.pagination>.active>span:focus,
.pagination>.active>a:hover,
.pagination>.active>span:hover,
html.darkmode .pagination>.active>a:focus,
html.darkmode .pagination>.active>span:focus,
html.darkmode .pagination>.active>a:hover,
html.darkmode .pagination>.active>span:hover {
  background-color: #226600;
  border-color: #339900;
  color: #FFFFFF;
}

.pagination>li>a,
.pagination>li>span,
.pagination>li>a:focus,
.pagination>li>span:focus,
.pagination>li>a:hover,
.pagination>li>span:hover,
html.darkmode .pagination>li>a,
html.darkmode .pagination>li>span,
html.darkmode .pagination>li>a:focus,
html.darkmode .pagination>li>span:focus,
html.darkmode .pagination>li>a:hover,
html.darkmode .pagination>li>span:hover {
  color: #339900;
}
.pagination>li>a:hover,
.pagination>li>span:hover {
  background-color: #EEEEEE;
}
html.darkmode .pagination>li>a:hover,
html.darkmode .pagination>li>span:hover {
  background-color: #454545;
}

#article-list>form>span>button {
  color: #000000;
}
#article-list>form>span>button:focus,
#article-list>form>span>button:hover {
  color: #000000;
  background-color: #EEEEEE;
}
html.darkmode #article-list>form>span>button {
  color: #FFFFFF;
}
html.darkmode span.input-group-btn i.fa.fa-search,
html.darkmode #article-list>form>span>button:focus,
html.darkmode #article-list>form>span>button:hover {
  color: #FFFFFF;
  background-color: #454545;
}

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

.container>span>a {
  color: #000000;
}
html.darkmode .container>span>a {
  color: #FFFFFF;
}





CSS를 적용하면 이런 식으로 보여집니다.


라이트모드에서 바뀌는 점은 다음과 같습니다.
1. 전체 배경색 그라데이션(#F5F5DC~#F5F5DC)에서 단색(#F5F5DC)로 변경
2. 트게더 홈 버튼을 녹색(#339900)으로 변경
3. 카테고리 배경색을 밝은 녹색(#DDFFCC)로 변경
4. 좌측메뉴/게시글 위에 커서를 띄울 시 글 배경을 밝은 회색(#EEEEEE)으로 변경
5. 하단 페이지 목록에서 현재 페이지에 커서를 띄우거나 클릭 시 어두운 녹색(#226600)으로 변경
나머지는 현재 소닉님 트게더에서 바꾸지 않고 그대로 두었습니다.


다크모드에서 바뀌는 점은 다음과 같습니다.
1. 검색창 테두리, 검색버튼, 홈 버튼 타이틀 아래 하단 바, 즐겨찾기 등 글씨, 좌측 메뉴, 소닉님 트게더 상세정보, 게시글 추천 수, 댓글 수, 작성자 닉네임, 하단 페이지 목록 중 현재 페이지 배경색, 나머지 페이지 글씨색을 녹색(#339900)으로 변경
2. 카테고리 배경색을 어두운 녹색(#226600)으로 변경
3. 각 카테고리에 커서를 띄울 시 배경색을 검은색(#000000)으로 변경
4. 공지, 공지 뒤 i , 인기 글자색, 하단 검색창 글씨, 댓글 최하단으로 이동, 댓글 좋아요, 답글, 댓글 신고, 댓글 링크로 이동, 이용약관~고객센터 링크를 흰색(#FFFFFF)로 변경
5. 좌측메뉴, 게시글 위에 커서를 띄울 시 글 배경을 어두운 회색(#454545)로 변경
6. 하단 페이지 목록에서 현재 페이지에 커서를 띄우거나 클릭 시 어두운 녹색(#226600)으로 변경

목록
후원댓글 0개
댓글 0개   ▼
이전 댓글 더 보기
이 글에 댓글을 달 권한이 없습니다. 로그인해 보세요.
공지사항방송영상자유공간게임정보게임추천게임관련 자료질문팬아트유머게시판건의사항
0
건의사항
트윕에서 클립도네 설정방법 [1]
triiloz
11-06
2
건의사항
방송보다 걱정되서 글을 남겨봅니다 [3]
purimcast
01-13
0
건의사항
트위치 다시보기 활성화 하는 방법
장석훈
10-08
»
건의사항
스피드소닉님 트게더 CSS 건의사항
장석훈
08-17
1
건의사항
건의 사항이 있습니다! [1]
장석훈
07-02
3
건의사항
이거도 시그니쳐 추가해주세요 [2]
wjkad127
03-06
2
건의사항
사소한거긴한데.. [2]
wjkad127
02-27
3
건의사항
그냥 당분간만 유튜브로 방송하면 안됩니까? [3]
ㅇㅇ
11-20
0
건의사항
1
FOS417
04-30
0
건의사항
안녕하세요 바쁘신데 제보 하나 하려고 합니다
일묘
04-15
2
건의사항
저번에 오타 있다고 한부분 [1]
장롱이네이장님
02-03
0
건의사항
비밀글입니다. [2]
다크라인
12-28
3
건의사항
헤드셋 대용 제품 추천 [1]
데드라이즈
12-10
2
건의사항
메가리자몽 X, Y 도트 [2]
데드라이즈
10-05
0
건의사항
자급제폰 추천 [11]
데드라이즈
09-14
0
건의사항
분탕으로 보이는 분 신고
후락소나제
09-06
1
건의사항
소닉물음표콘 관련 [1]
DK99
12-08
2
건의사항
아조시 캠 관련 [3]
DK99
11-26
0
건의사항
로아 1섭 캐릭생성하세염 [3]
카린의하루
11-07
1
건의사항
어제 방송 끊긴 이유가 xsplit때문
가리깃겟
10-17
1
건의사항
제휴 / 파트너 구독 미국 세금에 관한 꿀팁
LaNuovaDolceVita
09-08
4
건의사항
신규 아이콘 건의드림 [2]
카카로트임
09-01
1
건의사항
명령어 추가 해주세요~ [3]
똥겜조아
06-18
0
건의사항
빨리 스플래툰2 해주세욧! [2]
멘도쿠
05-26
3
건의사항
아조시 클립따다 보니까 마이크 클리핑 뜨길래 [3]
DK99
01-23
1
건의사항
싹둑이 명령어 추천 [1]
DK99
12-22
0
건의사항
않이 사진올려줘여어어 [1]
Key_Maker_
10-28
0
건의사항
게시글에 태그를 붙일수 있음 하네요. [3]
ㅅㅊㅂ
10-19
인기글 글 쓰기
  • 제목+내용
  • 닉네임
    •