문서:스타일리시

역사 raw
대문 랜덤 문서 최근 토론
분류
Stylish
제작자
Jason Barnabe
제작사
SimilarWeb
제작일
2005년 10월 9일
종류
브라우저 확장 기능
사이트
공식 홈페이지
1. 개요2. 지원하는 [[웹 브라우저]]3. Edit 사용 방법 및 [[CSS]]4. 적용 예시 ([[다크모드]]+공간최적화)
4.1. 모든 사이트4.2. [[아카이브]]4.3. [[나무뉴스]]4.4. [[나무위키 게시판]] [*d [[DarkReader]] 적용이 불가능해서 Stylish로만 다크모드로 만들수 있다.]4.5. 나무위키4.6. [[위키백과]]4.7. [[파파고]] (번역기)4.8. [[유튜브]]4.9. [[일베저장소]]4.10. 스타일리시 [*d]
5. 관련 문서

1. 개요

CSS 편집을 통해 웹사이트[1]를 사용자가 원하는 색상, 모양으로 자유롭게 변경이 가능한 웹 브라우저 확장 프로그램이다.

사용자가 원하지 않는 요소[2]를 제거할 수도 있다.

2. 지원하는 웹 브라우저


3. Edit 사용 방법 및 CSS

How to make a custom theme with stylus for userstyles (Basics) (2017.3)

1. 웹사이트에서 Ctrl+Shift+C를 눌러 변경하고싶은 항목에 클릭[3]하면 색상[4], 모양 등의 css를 확인한다.[5]
2. 편집하고 싶은 해당 css를 복사,
3. Stylish아이콘 클릭 - 점3개(⫶) 단추 클릭 - Create New Style 클릭 - Sections에 붙여넣기하여 편집하면 된다.[6]

재편집 하고 싶다면 Stylish아이콘 클릭 - Edit(연필모양) 단추를 클릭한다.
Sections안의 ⨂표시는 적용이 안된다는 뜻이고 그 아래 것들까지 적용이 안될수도 있으니 주의한다.
편집하면 탭 이름 앞에 *표시[7]가 나타나서 편집/저장 여부를 확인가능하고 저장 안하고 종료하려할경우 경고메시지가 뜬다.
중복 적용되는 것이 있다면 그중에 아래에 있는 것으로 적용된다.

Specify버튼을 눌러 URLs starting with에 웹사이트 url를 삽입한다.
웹사이트마다 css의 구성 요소가 많이 다르기 때문에 각 웹사이트마다 따로 만들어서 적용해야한다.(하위 문단 참조)
  • css 색상: f00 / f70 / ff0 / 0f0 / 00f / fff / 000
    color / background / fill / stroke
    글씨/배경/아이콘 색상.
  • css 크기 종류: {◇} / {ᛨ↔} / {↑ ↔ ↓} / {↑ → ↓ ←} / -top/right/bottom/left
    css 크기 단위: px=고정된 크기. / em,rem=부모 요소의 배율을 조정한 크기.
    font-size
    글씨 크기.
    width / height / min-height
    창 크기.
    border
    테두리/커서 두께, 모양, 색상.
    padding
    내부 공간.
    margin
    외부 공간/크기/위치 변경.
display:none;
표시 안함.(제거)
filter:invert(100%);
색상 반전.

4. 적용 예시 (다크모드+공간최적화)

아래의 각 웹사이트에 적용되는 다크모드 배경색은 완전한 검정색(블랙), 글씨는 기존 흰색에서 초록,노랑,주황 등으로 바꿔 블루라이트를 최소화 하였다.
※Stylish를 열어서 Sections에 박스(네모상자) 안의 css값을 복사해서 붙여넣기 하면 적용된다.

4.1. 모든 사이트

.find-styles, .entry, ::-webkit-scrollbar, ::-webkit-scrollbar-track-piece, body{background:#000!important;}
.tabs-container{background:#020!important;}
::-webkit-scrollbar-thumb{background:#0a0!important;}
body#stylish-popup .thumbnail{max-height:30px!important;}
::-webkit-scrollbar{width:9px!important; height:9px!important;}
※(적용효과)스크롤바 두께가 절반으로 줄어듬, 스타일리시 미니창 색상을 어둡게함.

4.2. 아카이브

.board-article, .dialog, .form-control, .fr-wrapper, .fr-toolbar, .fr-second-toolbar, .navbar-wrapper, .sidebar-item, footer, input{background:#000!important;}
.dropdown-menu, .info-row, .title-row, a.page-link, button{background:#010!important;}
.page-item.active .page-link, a.vrow:hover{background:#090!important;}
.leaf-info{background:#222!important; font-size: .79rem!important;}
.board-title>.desc+.desc, .form-control, .fr-box, .leaf-info, .col-author, .col-date>time, .col-time, .message pre, .text-muted, p{color:#cf7!important;}
.board-title>.desc, .col-view, .col-rate, .comment-count{color:#ee0!important;}
#rateUp, .board-title>a:visited, .col-id, .col-title>a:visited, .link-list>a:visited, .nav-link, .reply-link, .title-row, a.vrow:not(.active):visited, span.head{color:#0e0!important;}
.article-comment, .body>time, .sub-row, .write-head, div.item-title, h4{color:#0b0!important;}
.board-title>a, .link-list>a, a.vrow:not(.active){color:#e90!important;}
.user-info>a{color:#e50!important;}
#rateDown{color:#e00!important;}
.board-category>li a, a.item-title, label{color:#7d0!important;}
.board-category>li.active a{color:#ffe!important;}
.article-wrapper a:visited{color:#a4d!important;}
.subscribe-btn{border:1px solid #a00!important;}
.subscribe-btn.active{border:2px solid #ee0!important;}
.containe-fluid, .board-article{margin:0 19rem 0 0!important;}
.board-title{margin:0 8rem 0 9rem!important;}
.form-group{margin-bottom:4px!important;}
.pagination-wrapper{margin:-30px 300px 12px 0!important;}
.search-form{margin:-30px 150px 0 0!important;}
#vote{margin:1rem 0 -2rem!important;}
.dialog{margin:0!important; padding:2px!important;}
footer{margin:-80px 0 0 1500px!important; padding:5px!important; max-width:150px!important;}
.board-article>div, .write-head, label{padding:0!important;}
#rateDown, #rateUp{padding:0 1rem!important;}
#rateUpForm{padding:0 2rem!important;}
.fr-element{padding:0 0 0 3px!important;}
.board-article, .sidebar-item, .sub-row{padding:2px 0 0 5px!important;}
.article-body, .item-title{padding-bottom:0!important;}
.right-sidebar{padding:.1rem 0 .1rem 0!important; width:18.5rem!important;}
.fr-wrapper{height:650px!important;}
.content-wrapper{max-width:1500px!important;}
.col-title{width:80%!important;}
.col-date{width:20%!important;}
.col-md-8{flex:0 0 80%!important; max-width:80%!important;}
.comment-count{font-size:1.1em!important;}
.ad, footer>p, footer>p+p{display:none!important;}
.ion-android-list{filter:invert(50%)!important;}
.navbar-brand{filter:invert(80%)!important;}
  • url[s]: https://arca.live | https://sm.arca.live
※광고+불필요한 빈 공간 제거, 방문한 링크/게시판 색상 변경[l], 편집창의 세로길이 45% 증가, 게시판 목록의 댓글수 폰트크기 37% 증가+회색에서 노랑색으로 변경, 추천/비추 버튼 거리두기, 최하단 불필요한 글 삭제 및 접속회원수 표시줄을 우측사이드바로 이동.

4.3. 나무뉴스

.gsc-search-button, div, input, table{background:#000!important;}
#nnMainArea button:not(:disabled):not(.disabled).active{background:#000!important; border-color:#ffe!important;}
#nnMainArea span, #nnMainArea>div+div>div+div>div>div+div{padding:0!important;}
#ad-sidebar, article>#article-b, article>#article-c{display:none!important;}
.gsc-selected-option-container{max-width:100%!important;}
.gsc-result{padding:1px 0!important;}
.hljbsw, a>div>div>div+div{color:#cc0!important;}
.dQptdp{padding:0 0 0 20px!important;}
div+article+div+div>div>div+div+div, div>div+article, .hQwcry, .iFdeGl{margin:0!important;}
.dQptdp .gtYtei{margin:2px 80px 0 0!important;}
.hdDYJJ{margin-bottom:0!important;}
.gtYtei{margin-top:3px!important;}
.dQptdp .iFdeGl span{margin-top:-30px!important;}
.kJKNYI{margin-right:200px!important;}
#nnMainArea button, .cERjxQ, .kzCPGY{background:#010!important;}
.sticky-inner-wrapper div>a, .xmbqsi-0, a.gs-title{color:#e90!important;}
.bsnSrG, .buSMaV, .cmNKop, .ewIkQi, .hQwfkf, .kBskAR, .kGkgSt>div, .kzCPGY, .sticky-inner-wrapper div>a:visited, .xmbqsi-0:visited, a:visited div, a.cdetun-3, a.gs-title:visited{color:#0e0!important;}
.fGFPDP, .fGFPDP a, .LQfau{color:#0b0!important;}
#nnMainArea button, .cfHLwa, .edTfYy article, .edTfYy div, .gmmEWL, .gs-snippet, .gtYtei, .ibLyOc, .kgfrrU, input, table{color:#cf7!important;}
#nnMainArea button:not(:disabled):not(.disabled).active, .cERjxQ, .gs-title>b{color:#ffe!important;}
.cdetun-3.active a, .gsc-tabhActive{color:#ff0!important;}
#nnMainArea button, .feDSQT{border-color:#ff0!important;}
.kBskAR, .kPyRAQ{padding:0!important;}
.AFcMR{padding:10px!important;}
.dWJbDM>img{filter:invert(50%)!important;}
.EKBTz{padding:0 8px!important;}
div>div+article{line-height:1.3em!important;}
br{display:flex; content:""; margin:4px 0!important;}
  • url[s]: https://namu.news
※광고+불필요한 빈 공간 제거, 방문한 링크/게시판 색상 변경[l], 줄간격 대폭 축소.

4.4. 나무위키 게시판 [d]

#navbar.navbar-default, .comment_body div, .comment_body span, .panel, .read_body div, .read_body span, a, button, footer, h2, h3, h4, ol, option, p, table, td, th, ul{background:#000!important;}
#smart_content{background:#010!important;}
.widgetBoxC .widgetBoxHeader{background:0!important;}
.comment_body li, .comment_body p, .comment_body div, .read_body li, .read_body p, .read_body div, body, span, td{color:#cf7!important;}
.container a, .title>a:visited, a.num{color:#0e0!important;}
.title>a{color:#e90!important;}
strong{color:#ffe!important;}
.comment_body a, .read_body a{color:#5bd!important;}
.comment_body a:visited, .read_body a:visited{color:#a4d!important;}
.fbHeader, .viewDocument{border-top:1px solid #0c0!important;}
.btnArea{border-bottom:1px solid #0c0!important;}
.list_footer>.btnArea, .write_author, .write_form{padding:0!important;}
div.b, div.h{padding:3px!important;}
#content, ul.category a{padding:0 5px!important;}
#footer, .btnArea, .fbHeader, .fbMeta, .read_body{padding:5px 0!important;}
td.title{padding:0 0 0 5px!important;}
ul.category a{padding-bottom:4px!important;}
div.r{padding-bottom:9px!important;}
#smart_content, .btnArea, .input_area, .panel, .row, form, ul{margin:0!important;}
.pagination{margin:4px 0 0!important;}
h2{margin:.4em 0 0!important;}
span.d{margin:-25px 0 0!important;}
.board_read{margin-bottom:2px!important;}
.widgetBoxC .rc{height:1px!important;}
td.notice{width:120px!important;}
td.author{width:180px!important;}
td.time{width:200px!important;}
.xe_content{line-height:1.3!important;}
.board_list table{line-height:2!important;}
ul.category{line-height:28px!important;}
#board_list td{font-size:15px!important;}
#scrollLeft, #scrollRight, ul.list-inline{display:none!important;}
  • url[s]: https://board.namu.wiki
※불필요한 빈 공간 제거, 방문한 링크/게시판 색상 변경[l], 게시판 목록에 서로붙어있는 번호와 제목 거리두기, 글씨크기 증가.

4.5. 나무위키

나무위키의 CSS 값에 대한 설명 [펼치기/접기]
article / .wiki-heading-content>.wiki-paragraph / .wiki-table td / span.wiki-color = 본문의 내용/문단/표/색깔있는 글씨
.wiki-link-internal / .w .wiki-paragraph .wiki-link-external = 본문의 내부/외부 링크.[22]
.wiki-link-external:before = 본문의 외부링크 기본 아이콘.
.wiki-macro-toc / .wiki-hr-4 = 본문의 목차 공간 / 표 사이 공간.
.toc-indent / .wiki-macro-toc:before = 목차의 내부공간 / 제목("목차").
.app:not(.senkawa-hide-sidebar).senkawa-left-sidebar article = 본문과 사이드바 사이의 공간.
article>h1>a>span = 대문 제목 좌측 이름("나무위키:").
.monaco-editor-background / form div.a>textarea = 편집의 편집기(기본)/RAW편집 공간.
div>div.c = 역사,역링크.
article>table / .equal = 역사 - 비교 테이블 / 내용.
aside>div.c / aside h5 / aside>div>div>a / aside>div>a / aside span = 좌측 사이드바의 배경/제목/내용/더보기/시간.
.senkawa-left-sidebar aside = 촤즉 사이드바 공간.
article>div>form / section>div.search-item / section>div>h4 / div.l = 검색창의 검색바/항목/문서이름/안내문("찾는 문서가 ~").
.theseed-dark-mode div.r>div.g>a = 우측 상단 박스의 내용.(역링크,토론,편집 등) [t]
div.r div.h / div.r div.b / div.r div.w = 토론의 사용자 / 내용.[24]
nav span = 최상단 메뉴 제목.(최근변경,최근기록,아카이브)
div>span.r>button / form>div>span.l>a = 최상단의 검색바 주변 아이콘.
.i.arcalive / a::after = 최상단의 아카이브 ● / 특수기능 ▼ 아이콘.
aside>div>iframe, div[data-google-query-id] = 좌측 사이드바 광고.
article>div.c / article>div>div.p = 본문 상단/하단의 광고.
#search-ad = 검색 페이지에 나오는 검색단어와 관련된 광고.
#app>div>ul a = 좌측 하단 네이게이션 컨트롤.
div.s / div.s>h1 / div.s>header / div.s div / div.s label = 설정의 내용/제목/목록/항목.
div.cl / div.cl h3 / div.cl ul / div.cl h2.wiki-heading = 분류의 배경/상위/하위항목/~에속하는문서.
input[type=radio] / input[type=checkbox] = 역사/설정의 ○/□ 선택 단추.
.theseed-dark-mode a[data-v-193fc2b2] = 최상단 특수기능 클릭시 나오는 메뉴 내용. [t]
a[data-v-decdc61a] = 좌측 최상단 나무위키 로고.
div[data-v-b1ee5ece] = 본문 상단의 분류.
footer / div[data-v-21b51625] = 최하단 공간/내용(영어로 표시).
article>div[data-v-7468636f] / article>div[data-v-9a63e4c4] = 최근 변경내역 / 사용자 기여 목록.
a[data-v-fcf44970] = 역링크,역사,기여목록의 이전/다음 박스.
h3[data-v-3d0656be] = 역링크의 첫단어 상위 항목.
[data-v-a250e2c8] / div.a[data-v-4188c549] = 역사의 항목 / 본문 상단의 리다이렉트 표시, 리그베다 설명문(-v-89e6db06).

.monaco-editor, .theseed-dark-mode .wiki-table td, .wiki-table-wrap td, article, aside>div.c, button, div.a, div.app, div.monaco-editor-background, div.r div.b, footer, form>div>span.l>a, input, nav, table, td.skip, textarea, thead, tr>th, .v--modal{background:#000!important;}
.w .wiki-table-wrap.table-center{margin:3px 2px 3px 0!important;}
div.popper{background:#020!important;}
form>div.c>div.a.p, form>div.c>div.a>textarea{padding:0 0 0 4px!important;}
div.r div.b, div.r div.h{padding:3px!important;}
article>div>h3, div.r div.w{margin:0!important;}
article>div>div>h2{margin-block-start:.4em!important; margin-block-end:.1em!important;}
form.c>button{margin:3px 130px 8px 0!important;}
form.c>textarea{padding:0 0 0 2px!important;}
.monaco-scrollable-element editor-scrollable vs-dark{width:1500px!important;}
.wiki-quote, div.g>a, a[data-v-fcf44970], ol[data-v-9a63e4c4], select, td.insert{background:#010!important;}
#tchikaa5c3adc8, div.margin-view-overlays{background:#020!important;}
ins.diff{background:#060!important;}
td.delete{background:#200!important;}
del.diff{background:#600!important;}
span.search-highlight, table>td[data-v-9a63e4c4]:hover{background:#550!important;}
header>ul>li.a{background:#aa0!important;}
td>div>a img{background:#0d0!important;}
.wiki-heading-folded, div.r div.h{background:#111!important;}
article, blockquote, div.wiki-paragraph, div[data-v-d98eedd8], input, span.l[data-v-71af95b6], textarea{color:#cf7!important;}
.theseed-dark-mode a[data-v-193fc2b2], .wiki-paragraph>a>font, .wiki-table-wrap span, div>a[data-v-fcf44970], h1, option, select{color:#0e0!important;}
#app>div>ul a, .theseed-dark-mode div.r>div.g>a, .wiki-link-internal:visited, a::after, a[data-v-a250e2c8]:visited, aside>div>div>a:visited, div>span.r>button, form>div>span.l>a, nav span, td>a:visited, ul>li>a:visited{color:#0e0!important;}
button.s, td>time, ul>li>button{color:#0b0!important;}
article>h1>a>span, aside>div>a, aside>div>h5{color:#080!important;}
.wiki-fn-content{color:#840!important; font-size:.7em!important;}
a[data-v-3d0656be], ul>li>a{color:#e90!important;}
h2.wiki-heading{color:#9e0!important; font-size:1.3em!important;}
h3.wiki-heading, .wiki-macro-toc:before{color:#dd0!important;}
h4.wiki-heading{color:#dab!important; font-size:1.2em!important;}
h5.wiki-heading{color:#b96!important; font-size:1.15em!important;}
.w .wiki-paragraph .wiki-link-external, .w .wiki-macro-footnote .wiki-link-external{color:#5bd!important;}
.w .wiki-paragraph .wiki-link-external:visited, .w .wiki-macro-footnote .wiki-link-external:visited{color:#a4d!important;}
div[data-v-21b51625]{color:#aaa!important;}
div.a[data-v-4188c549], aside span{color:#665!important;}
div.app[data-v-351e9323], div.s{color:#ee0!important;}
.w .wiki-link-internal span, article>div>table>tbody>tr>td>a+a, article>footer>p{color:#cc0!important;}
.wiki-link-internal:visited span, article>div>table>tbody>tr>td>a+a:visited{color:#dab!important;}
th{color:#aa0!important;}
article{border:0!important; padding:.3rem .3rem 0 .3rem!important;}
a[data-v-fcf44970], div.g>a{border:1px solid #333!important;}
.wiki-heading, .wiki-hr-4, div>span.r>button[data-v-d98eedd8], fieldset, form>div>span.l>a[data-v-d98eedd8], input[data-v-3e364047], input[data-v-d98eedd8], section>div[data-v-3e364047], select[data-v-3e364047]{border:1px solid #090!important;}
.wiki-macro-toc{border:1px solid #040!important;}
.wiki-table td{border:1px solid #660!important;}
div[data-v-b1ee5ece]{border:1px solid #665!important; padding:0 0 0 4px!important;}
.wiki-macro-footnote{border:2px dotted #333!important; padding:4px 1px 4px 3px!important;}
.wiki-quote{border:2px dashed #080!important; padding:5px 5px 0!important; margin:14px 0!important;}
h2[data-v-0e28be7a], h3[data-v-0e28be7a]{border-bottom:1px solid #5d4!important;}
div.cl, div.cl h3, div.cl ul, div.cl h2.wiki-heading{padding:0!important; margin:0!important;}
article>div>div.a, fieldset, tbody>tr>th{padding:0!important;}
.wiki-table td, .wiki-table div{padding:2px 5px!important;}
article>div>table td, th[data-v-7468636f], th[data-v-9a63e4c4]{padding:1px 0 1px 3px!important;}
article>div>ol, .equal{padding:3px 0 3px 4px!important;}
td>.wiki-paragraph>div{padding:1px 0 1px 6px!important;}
.wiki-macro-toc{padding:2px 8px 2px 0!important;}
#tchikacb1f1316>div>a{padding:4px 0 4px 2px!important;}
aside>div.c>div>a{padding:3px 0 3px 0!important;}
.toc-indent{padding-left:6px!important;}
.wiki-heading{padding-bottom:0!important; margin:.9em 0 .2em!important;}
h2+div.c>div.r, section>div.search-item{padding-bottom:.4rem!important;}
.toc-indent, article, article>div>form, article>div>ol, article>h1, div.a, div.a.p, div.s>h1, div.s>header, div.s label, div.wiki-paragraph>span, ul[data-v-a250e2c8]{margin:0!important;}
aside h5{margin:1rem!important;}
.wiki-table-wrap{margin:3px 2px!important;}
.wiki-hr-4, h2+div.c>div.r blockquote{margin:.4em 0!important;}
form>div.g{margin:.4em 0 0!important;}
button.s{margin:-34px 9px 0 0!important;}
div.s div{margin:0 0 9px!important;}
section>div>h4{margin:5px 5px 0!important;}
h3[data-v-3d0656be]{margin:20px 0 -28px!important;}
article>div>div.a{margin:-9px 40% -14px!important;}
article>div[data-v-9489f048], article>div[data-v-c9bdc782]{margin:0 230px 0!important;}
article>div[data-v-7468636f]{margin:0 260px 0!important;}
article>div[data-v-9a63e4c4]{margin:0 300px 0!important;}
p[data-v-a250e2c8]{margin:2px 130px -29px!important;}
form[data-v-a250e2c8]{margin-left:6em!important;}
aside span{margin-right:-28px!important;}
article>table, fieldset{margin-top:2px!important;}
div.w, div[data-v-b1ee5ece]{margin-top:12px!important;}
div.main-pane-right{margin-top:-115px}
article>p, form>label, h2+div.c>div.r div{margin-bottom:0!important;}
.wiki-heading-content>.wiki-paragraph, div[data-v-b1ee5ece]{margin-bottom:3px!important;}
aside{margin:0 0 0 .2rem!important; width:10rem!important;}
div.a[data-v-3e364047]{margin:0 580px 0 0!important; min-height:0!important;}
div.monaco-scrollable-element{left:33px!important; width:97.5%!important;}
div.wiki-paragraph>span>a{width:0!important;}
#logInput{width:50%!important;}
div.line-numbers{width:25px!important;}
div.margin-view-overlays{width:33px!important;}
fieldset[data-v-5e8f0398]{width:480px!important;}
article>div[data-v-9489f048], article>div[data-v-c9bdc782]{max-width:940px!important; min-width:900px!important;}
article>div[data-v-7468636f]{max-width:840px!important; min-width:800px!important;}
article>div[data-v-9a63e4c4]{max-width:700px!important; min-width:700px!important;}
div.a.p, div.editor, div.editor, form div.a>textarea{height:48rem!important;}
aside>div>a, aside>div>h5{line-height:0!important;}
.wiki-paragraph>br{line-height:.5!important;}
article>h1{line-height:.9!important;}
h3.wiki-heading, h3[data-v-3d0656be]{font-size:1.25em!important;}
.wiki-heading-content, h2+div.c>div.r{line-height:1.3!important;}
form[data-v-a250e2c8], td[data-v-9a63e4c4]{line-height:1.4!important;}
.wiki-paragraph>div, aside a, aside span, span>time{font-size:.9em!important;}
form>label>span{font-size:.7em!important;}
#search-ad, .wiki-link-external:before, article>div.c, article>div>div.p, article>div.a[data-v-89e6db06], aside>div>iframe, div[data-google-query-id], footer, form+div.force-font-size-13{display:none!important;}
h2+div.c>div.r br+br{display:flex; content:""; margin:5px 0!important;}
.i.arcalive, .wiki-dynamic-6b1992b734713ed10676430ef78bdf4d>tbody>tr>td>div>div>a, a[data-v-decdc61a]{filter:invert(50%)!important;}
i.ion-md-document:before, input[type=radio], input[type=checkbox]{filter:invert(100%)!important;}
div.c[data-v-3d0656be], div.c[data-v-0e28be7a]{column-count:4!important;}
  • url[s]: https://namu.wiki
나무위키 설정에서 '다크 테마 사용'하고[28], DarkReader는 해제한다.
※문단크기 축소, 광고+외부링크 기본아이콘+번쩍임 현상[29]+불필요한 빈 공간 제거, 편집창+미리보기창 세로길이 60% 증가, 역링크+분류 3줄에서 4줄로 증가, 편집+역사에서 드래그 할필요없이 한눈에 다 볼수있도록 공간최적화, 방문한 링크 색상 변경[l], 표 안의 배경,색상을 검정,초록으로 통일[31], 변경내역+토론내역에서 중복된 링크 색상을 서로 다른 색상으로 분리[32].

4.6. 위키백과

위키백과의 CSS 값에 대한 설명 [펼치기/접기]
.mw-body / #toc / h1 / h2 / h3 / .mw-parser-output>p = 본문의 전체공간/목차/문서이름/제목/부제목/내용.
.main-box / .main-shortcut-item / .navbox = 본문의 박스/내부 박스/관련문서 박스.
.vector-menu-tabs / .tocnumber = 본문 상단의 탭 / 목차 차례.
.oo-ui-buttonElement-button / .iw-resultset = 검색결과의 고급선택,검색위치 선택창. / 자매 프로젝트에서의 결과.

#catlinks, #content, #mw-normal-catlinks, #mw-page-base, #sidebarCollapse, #toc, .main-box, .main-top-left, .mw-prefs-buttons, .navbox, .navpopup, .oo-ui-buttonElement-button, .oo-ui-toolbar-bar, .oo-ui-widget, .thumbinner, button, code, input, kbd, li>a, pre, table, th{background:#000!important;}
.documentation, .iw-resultset, .mw-advancedSearch-fieldContainer, .module-shortcutboxplain, .mw-advancedSearch-namespace-selection, .navbox-list, .NavHead, .oo-ui-dropdownWidget-handle, .oo-ui-labelElement-label, .shortcutbox, .suggestions-special, .template-documentation, td{background:#010!important;}
.documentation-metadata, .suggestions-results, div.wikipedia-ko>span, span.mw-ui-button{background:#020!important;}
.highlight, .oo-ui-popupWidget-popup{background:#050!important;}
.ve-ui-toolbar-saveButton, img{background:#0a0!important;}
.vector-menu-tabs{background:0!important;}
code, div, input, pre, td{color:#cf7!important;}
.main-top-left>p>span>a>span, .mw-ui-button, .tocnumber, h1, th{color:#0e0!important;}
.oo-ui-labelElement-label, h2{color:#9e0!important;}
h3, ul>li{color:#dd0!important;}
h4{color:#dab!important;}
a, span.toctext{color:#e80!important;}
a:visited{color:#0b9!important;}
#toc{border:1px solid #060!important;}
.main-box, .navbox{border:1px solid #0a0!important;}
.main-shortcut-item{border:1px solid #aa0!important;}
.mw-body{border:1px solid #333!important;}
.navbox-group, .navbox-list{border-color:#090!important;}
h1{border-bottom:1px solid #050!important;}
h2{border-bottom:1px solid #0a0!important; margin:.8em 0 .1em!important;}
.mw-parser-output .main-top-left{padding:0 0 0 .5rem!important;}
#content{padding:0 .8em 0 .4em!important; margin-left:9em!important;}
#mw-panel{padding-left:0!important; width:9em!important;}
.main-top-left>p{margin:0!important;}
.mw-parser-output>p{margin:.2em 0 .4em!important;}
#mw-panel>nav{margin:0!important; padding:0!important;}
div.main-pane-right{margin-top:-115px!important;}
div.main-box.main-top{margin-top:-15px!important; width:33%!important;}
#sidebarCollapse{left:125px!important;}
#bodyContent{font-size:18px!important;}
#t-recentchangeslinked, div.main-top-left>p>span>a>span{font-size:.7em!important;}
#n-mainpage-description, .interwiki-en, .interwiki-ko{font-size:1.3em!important;}
.interwiki-ja, .interwiki-zh{font-size:1.1em!important;}
#p-logo, #siteNotice, #siteSub{display:none;}
.oo-ui-iconElement-icon, .oo-ui-indicatorElement-indicator{filter:invert(100%)!important;}
div.main-pane-left{flex:2!important;}
  • url[s]: https://en.wikipedia.org | https://ko.wikipedia.org | https://ja.wikipedia.org | https://zh.wikipedia.org | https://papago.naver.net
DarkReader는 해제한다.
※불필요한 빈 공간 제거, 본문 글씨크기 20%[35]증가, 좌측 사이드바 '다른 언어' 항목의 자주 쓰는 언어(영어,한국어,중국어,일본어) 글씨크기 대폭 증가.
# 위키백과 - Main page (영문판 대문)
#mp-left, #mp-lower, #mp-right, #mp-topbanner, #mp-welcomecount, .itn-special{background:#000!important;}
.mp-h2, #mp-middle{background:#010!important;}
  • url(URL): https://en.wikipedia.org/wiki/Main_Page

4.7. 파파고 (번역기)

.btn_dropdown2P-vM, .btn_window3Mlxv, div, div>button{background:#000!important;}
a, button, h3, img, label, p, strong{color:#0f0!important;}
body, div, li>span, li>span>span, textarea{color:#cf7!important;}
.edit_area2iv-G{padding:3px 9px 52px!important;}
.wrap1rX6i .container___3EGm5{margin-top:-345px!important;}
  • url[s]: https://papago.naver.com
DarkReader와 같이 사용해도 된다.
※빈 공간을 줄이고, '작은창번역'단추가 제거된다.

# 파파고 - 웹사이트 번역 (위키백과)
.box_inner2n_6d, .headerKe5jM, .mw-notification, .website1E-JL{background:#000!important;}
.active3VPGL{color:#0f0!important;}
  • url[s]: https://papago.naver.net
DarkReader는 해제한다.

4.8. 유튜브

유튜브의 CSS 값에 대한 설명 [펼치기/접기]
h1 = 영상 제목.
span = 영상 내용, 댓글, 조회수, 우측 사이드바 제목,조회,시간.
.paper-input-container = 댓글입력창 밑줄.
#author-text>span = 댓글 등록 유저.
a#author-text span / #content-text.ytd-comment-renderer = 댓글 사용자 / 내용.
circle.style-scope = ⫶ 아이콘.

a#video-title-link:visited #video-title{color:#0e0!important;}
#contents, .ytp-ad-action-interstitial, :not(.style-scope)[dark], #guide-content, #savefromyt_btn .sf-quick-dl-btn, #sf-popupMenu, .sbsb_a, paper-button, paper-dialog, ytd-menu-renderer>div>div>button, yt-live-chat-header-renderer{background:#000!important;}
ytd-browse, ytd-mini-guide-renderer, ytd-page-manager, ytd-watch-flexy{background:#060605!important;}
.unfocused-line, ytd-sentiment-bar-renderer[activated_] #like-bar.ytd-sentiment-bar-renderer{background:#060!important;}
.ytp-volume-slider-handle{background:#0e0!important;}
#like-bar.ytd-sentiment-bar-renderer{background:#a00!important;}
#content-text.ytd-comment-renderer, .ytd-video-secondary-info-renderer, input, span, yt-formatted-string#label{color:#cf7!important;}
#author-text>span, #video-title, .title.style-scope.ytd-guide-entry-renderer, a.yt-formatted-string, h3>a, yt-formatted-string#video-title, yt-formatted-string.style-scope.ytd-video-renderer{color:#da0!important;}
#guide-icon, #video-title:visited, a.sf-menu-item, a:visited span#video-title, div, h3>a:visited, yt-formatted-string:visited, yt-formatted-string#video-title:visited, yt-formatted-string.style-scope.ytd-video-renderer:visited{color:#0e0!important;}
#submit-button, .style-default-active, h1{color:#0c0!important;}
.style-default.size-default, h2>yt-formatted-string, yt-formatted-string.more-button.style-scope.ytd-video-secondary-info-renderer, yt-icon.ytd-badge-supported-renderer, yt-icon.yt-live-chat-header-renderer{color:#0a0!important;}
#reply-button-end #button, circle.style-scope{color:#080!important;}
#corrected.style-scope.yt-search-query-correction, .style-scope.ytd-c4-tabbed-header-renderer, .style-scope.ytd-video-owner-renderer{color:#ee0!important;}
.ytd-subscribe-button-renderer, ytd-subscription-notification-toggle-button-renderer>a>yt-icon-button>button>yt-icon>svg>g.style-scope.yt-icon{color:#bb0!important;}
#cancel-button, #reply-button-end, yt-formatted-string#text.style-scope.ytd-toggle-button-renderer.style-text{color:#d00!important;}
.ytd-channel-name, .ytd-channel-name>a, a#author-text span{color:#e60!important;}
.ytd-channel-name>a, a#author-text:visited span{color:#dab!important;}
ytd-toggle-button-renderer.style-text[is-icon-button] #text.ytd-toggle-button-renderer{color:#999!important;}
.style-scope.ytd-comment-simplebox-renderer, .style-scope.ytd-message-renderer, .yt-formatted-string:empty:before, paper-button.ytd-toggle-button-renderer{color:#666!important;}
#label-icon.yt-dropdown-menu, ytd-toggle-button-renderer.style-text[is-icon-button]{color:#333!important;}
#label-icon{fill:#090!important;}
#ytp-id-14, #ytp-id-16, #ytp-id-18, #ytp-id-21, #ytp-id-22{fill:#aa0!important;}
#youtube-paths{stroke:#a00!important;}
.paper-input-container{border-color:#090!important;}
#savefromyt_btn>button{border:1px solid #080!important;}
a.sf-quick-dl-btn>i{width:0!important;}
a.ytp-next-button, button.ytp-fullscreen-button, button.ytp-miniplayer-button{height:0!important;}
.ytp-chrome-controls{height:80%!important;}
#playlists.ytd-add-to-playlist-renderer{max-height:700px!important;}
#rich-shelf-header{margin:2px!important;}
.ytp-chrome-controls{margin-top:14px!important;}
ytd-rich-item-renderer{margin-bottom:9px!important;}
#avatar-link.ytd-rich-grid-media{margin:3px 3px 0 0!important;}
h3.ytd-rich-grid-media{margin:1px 0 1px 0!important;}
ytd-rich-item-renderer a:visited{border:1px solid #a00!important;}
  • url[s]: https://www.youtube.com
유튜브 디자인 설정을 '어두운테마'로 하고, DarkReader는 해제한다.
※적용 효과: 동영상 재생바 밑에 불필요한 단추[42]가 제거되고 재생바와 단추 사이 공간 늘림[43], 저장-재생목록 창 크기 증가, 광고차단앱으로인해 일시적으로 첫 재생화면에 화이트배경이 나타나는 현상 제거, 방문한 링크 색상 변경[l][45].

4.9. 일베저장소

#aside-wrap, #board-cate, #comment, #container, .aside-section, .board-body, .btn-vote, .btn-default>span, .cke_editable, .comment-write, .comment-write-box, .gnb-fix-area, .member-service>a, .search-window, .title-line>span, input, select, textarea{background:#000!important;}
.board-body .notice-line, .logout, .reply-item{background:#100!important;}
.board-body li:nth-of-type(odd), .reply-item:nth-of-type(odd){background:#010!important;}
.board-body li:hover{background:#090!important;}
span[style='background:white']{background:#333!important;}
.attached-file, .list-current-doc, span[style='background:yellow']{background:#660!important;}
#board-cate, .board-sort>option, .cke_editable, .cmt, .date, .date-line, .post-content, .post-content>span, input, select, textarea{color:#cf7!important;}
.aside-list-rank a:visited, .board-body .title-line>span, .btn-default>span, a.subject:visited, a.title:visited, div>a, h2>a, li>a{color:#0e0!important;}
.aside-section span>a, .member-connect, div>h3, h3>a, span.count{color:#0b0!important;}
button.logout{color:#d00!important;}
span.view, span[style='color:blue']{color:#dd0!important;}
.aside-list-rank a, a.subject, a.title{color:#f90!important;}
.comment-num>a, .global-nick{color:#e00!important;}
.nick>a{color:#e50!important;}
.post-content div>a, .post-content span>a{color:#5bd!important;}
.post-content div>a:visited, .post-content span>a:visited{color:#a4d!important;}
#aside-wrap>div+div+div, #aside-wrap>div+div+div+div, #oa-360-1606948500981_qz1flamh7, #oa-360-1606948500981_xkqnqjwzg, #sky-banner-wrap, .cutin-banner, .main-top-banner, .mgbox, .top-banner, body>script+script+div, body>script+script+embed, body>script+script+embed+div{display:none!important;}
.board-sort button span, .comment>img, .nick img, .scrap, img.on{filter:invert(100%)!important;}
  • url[s]: https://www.ilbe.com
DarkReader와 같이 사용해도 된다.
※광고+불필요한 빈 공간 제거, 방문한 링크/게시판 색상 변경[l].

4.10. 스타일리시 [d]

.CodeMirror-gutters, .CodeMirror-scroll, button, input, select{background:#000!important;}
.CodeMirror-activeline-background{background:#020!important;}
.cm-atom, input, p.applies-to{color:#cf7!important;}
button, div, select{color:#0f0!important;}
tr>td{color:#0b0!important;}
.cm-keyword{color:#060!important;}
.cm-builtin{color:#f00!important;}
.cm-number{color:#ffe!important;}
.cm-qualifier{color:#e60!important;}
.cm-tag{color:#de0!important;}
.CodeMirror-cursor{border-left:2px solid white!important;}
.CodeMirror{height:870px!important;}
.CodeMirror-sizer{min-height:860px!important;}
.CodeMirror-line>span{font-size:1.1em!important;}
#sections>h2{font-size:.9em!important;}
#header, #lint td, section>div{padding:0!important;}
#options{padding-right:0!important;}
#sections{padding-left:10rem!important;}
#sections>h2, section>div{margin:0!important;}
h2.style-name{margin:3px 0 0 -20px!important;}
p.applies-to{margin:-20px 0 0 99px!important;}
p.actions{margin:9px 9px 0 9px!important;}
div.enabled{margin:9px 9px 0 9px!important;}
.applies-to{margin:-9px 333px 0 0!important;}
#lint>h2{margin-block-end:0!important;}
#lint caption{line-height:0!important;}
#stylish-edit>#header{width:9rem!important;}
  • url[s]: chrome-extension://fjnbnpbmkenffdnngjfgmeleoegfcffe

5. 관련 문서

[1] 혹은 특정 웹페이지[2] 불필요한 이미지, 아이콘, 단추, 광고, 빈 공간 등[3] 혹은 우클릭 - 검사[4] 흰색:#fff, 검정:#000, 빨강:#f00, 초록:#0f0, 파랑:#00f 등[5] Styles 오른쪽에 Computed항목을 클릭하면 보기 편하고, 해당 값을 변경하면 색상,모양이 바뀐것을 바로 확인할수 있다.[6] 그리고 편집한 값{}의 오른쪽에 !important;를 삽입해야 적용된다.[7] 저장(Ctrl+S) 혹은 실행취소(Ctrl+Z)시 *표시가 사라진다.[s] 8.1 8.2 8.3 8.4 8.5 8.6 8.7 8.8 8.9 8.10 8.11 8.12 8.13 8.14 8.15 8.16 8.17 8.18 8.19 8.20 Specify - URLs starting with[l] 9.1 9.2 9.3 9.4 9.5 9.6 내부링크/게시판:주황→초록, 외부링크:파랑→보라[d] 10.1 10.2 DarkReader 적용이 불가능해서 Stylish로만 다크모드로 만들수 있다.[18] 기본값-내부/외부: #ec9f19/#090[t] 12.1 12.2 12.3 12.4 앞에 ".theseed-dark-mode"가 붙어야 다크모드에서 적용된다.[20] div.r.v로 하면 0.01(?)초마다 적용이 됫다 안됫다 반복하는 버그가 생긴다.[22] 기본값-내부/외부: #ec9f19/#090[24] div.r.v로 하면 0.01(?)초마다 적용이 됫다 안됫다 반복하는 버그가 생긴다.[28] 혹은 '다크테마사용' 해제 + '시스템다크테마가져오지않기' 해제해도 된다. (둘중 차이점은 없는듯)[29] 다크모드에서 나무위키를 새로 켜거나 새로고침/복구 등을 할때 일시적으로 약1초(글이 많을수록 더 오래걸림) 동안 화이트 배경이 나타나는 현상.[31] 이로써 일반 다크모드에서 일부 표 안의 배경or글씨가 보기 불편하던 문제점이 없다.[32] 우측의 링크 색상을 노랑/빨강으로 변경.[35] 15→18px[42] 다음(우측 사이드바에 있으므로 불필요), 소형플레이어(별 쓸일 없음), 전체화면(화면을 더블클릭하면 되므로 불필요)[43] 이로써 재생시간 위치를 변경하려고 클릭하다 실수로 밑의 단추를 클릭하는것이 방지된다.[45] 유튜브의 방문 링크는 드믈게 해제되는 현상이 있다.