문서:스타일리시

||<-2><table align=right><table width=300> '''{{{+1 Stylish}}}''' ||
||<-2> {{{#!wiki style="margin: -5px -10px"
[[파일:stylish.png|width=222]]}}} ||
|| 제작자 ||Jason Barnabe||
|| 제작사 ||SimilarWeb||
|| 제작일 ||[[2005년]] 10월 9일||
|| 종류 ||브라우저 확장 기능||
|| 사이트 ||[[http://userstyles.org|공식 홈페이지]]||
[목차]
== 개요 ==
[[CSS]] 편집을 통해 [[웹사이트]][* 혹은 특정 [[웹페이지]]]를 사용자가 원하는 색상, 모양으로 자유롭게 변경이 가능한 [[웹 브라우저]] 확장 프로그램이다.[br]
사용자가 원하지 않는 요소[* 불필요한 이미지, 아이콘, 단추, 광고, 빈 공간 등]를 제거할 수도 있다.

== 지원하는 [[웹 브라우저]] ==
 * [[Chrome|구글 크롬]] - [[http://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe|다운로드]]
 * [[Safari|사파리]]
 * [[오페라(웹 브라우저)|오페라]]
 * [[Firefox|파이어폭스]]

== Edit 사용 방법 및 [[CSS]] ==
[[http://youtu.be/fCVvGwoF5cQ|How to make a custom theme with stylus for userstyles (Basics)]] {{{-1 (2017.3)}}}[br]
1. 웹사이트에서 Ctrl+Shift+C를 눌러 변경하고싶은 항목에 클릭[* 혹은 우클릭 - 검사]하면 색상[* 흰색:#fff, 검정:#000, 빨강:#f00, 초록:#0f0, 파랑:#00f 등], 모양 등의 css를 확인한다.[* Styles 오른쪽에 Computed항목을 클릭하면 보기 편하고, 해당 값을 변경하면 색상,모양이 바뀐것을 바로 확인할수 있다.]
2. 편집하고 싶은 해당 css를 복사,
3. Stylish아이콘 클릭 - 점3개(⫶) 단추 클릭 - Create New Style 클릭 - Sections에 붙여넣기하여 편집하면 된다.[* 그리고 편집한 값{}의 오른쪽에 !important;를 삽입해야 적용된다.][br]
재편집 하고 싶다면 Stylish아이콘 클릭 - Edit(연필모양) 단추를 클릭한다.
Sections안의 {{{#f00 ⨂}}}표시는 적용이 안된다는 뜻이고 그 아래 것들까지 적용이 안될수도 있으니 주의한다.
편집하면 탭 이름 앞에 *표시[* 저장(Ctrl+S) 혹은 실행취소(Ctrl+Z)시 *표시가 사라진다.]가 나타나서 편집/저장 여부를 확인가능하고 저장 안하고 종료하려할경우 경고메시지가 뜬다.
중복 적용되는 것이 있다면 그중에 아래에 있는 것으로 적용된다.[br]
Specify버튼을 눌러 URLs starting with에 웹사이트 url를 삽입한다.
웹사이트마다 css의 구성 요소가 많이 다르기 때문에 각 웹사이트마다 따로 만들어서 적용해야한다.(하위 문단 참조)
----
 *css 색상: {{{#f00 f00}}} / {{{#f70 f70}}} / {{{#ff0 ff0}}} / {{{#0f0 0f0}}} / {{{#00f 00f}}} / {{{#fff fff}}} / {{{#000 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%); || 색상 반전. ||

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

=== 모든 사이트 ===
||{{{-2 .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;}
}}}||
※(적용효과)스크롤바 두께가 절반으로 줄어듬, 스타일리시 미니창 색상을 어둡게함.

=== [[아카이브]] ===
||{{{-3 .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 Specify - URLs starting with]: https://arca.live | https://sm.arca.live
※광고+불필요한 빈 공간 제거, 방문한 링크/게시판 색상 변경[*l 내부링크/게시판:주황→초록, 외부링크:파랑→보라], 편집창의 세로길이 45% 증가, 게시판 목록의 댓글수 폰트크기 37% 증가+회색에서 노랑색으로 변경, 추천/비추 버튼 거리두기, 최하단 불필요한 글 삭제 및 접속회원수 표시줄을 우측사이드바로 이동.

=== [[나무뉴스]] ===
||{{{-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], 줄간격 대폭 축소.

=== [[나무위키 게시판]] [*d [[DarkReader]] 적용이 불가능해서 Stylish로만 다크모드로 만들수 있다.] ===
||{{{-3 #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], 게시판 목록에 서로붙어있는 번호와 제목 거리두기, 글씨크기 증가.

=== 나무위키 ===
||{{{#!folding 나무위키의 CSS 값에 대한 설명 [펼치기/접기]
article / .wiki-heading-content>.wiki-paragraph / .wiki-table td / span.wiki-color = 본문의 내용/문단/표/색깔있는 글씨
.wiki-link-internal / .w .wiki-paragraph .wiki-link-external = 본문의 내부/외부 링크.[* 기본값-내부/외부: #ec9f19/#090]
.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 앞에 ".theseed-dark-mode"가 붙어야 다크모드에서 적용된다.]
div.r div.h / div.r div.b / div.r div.w = 토론의 사용자 / 내용.[* div.r.v로 하면 0.01(?)초마다 적용이 됫다 안됫다 반복하는 버그가 생긴다.]
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).
}}}||

||{{{-3 .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
나무위키 설정에서 '다크 테마 사용'하고[* 혹은 '다크테마사용' 해제 + '시스템다크테마가져오지않기' 해제해도 된다. (둘중 차이점은 없는듯)], DarkReader는 해제한다.
※[[문단]]크기 축소, 광고+외부링크 기본아이콘+번쩍임 현상[* 다크모드에서 나무위키를 새로 켜거나 새로고침/복구 등을 할때 일시적으로 약1초(글이 많을수록 더 오래걸림) 동안 화이트 배경이 나타나는 현상.]+불필요한 빈 공간 제거, 편집창+미리보기창 세로길이 60% 증가, 역링크+분류 3줄에서 4줄로 증가, 편집+역사에서 드래그 할필요없이 한눈에 다 볼수있도록 공간최적화, 방문한 링크 색상 변경[*l], 표 안의 배경,색상을 검정,초록으로 통일[* 이로써 일반 다크모드에서 일부 표 안의 배경or글씨가 보기 불편하던 문제점이 없다.], 변경내역+토론내역에서 중복된 링크 색상을 서로 다른 색상으로 분리[* 우측의 링크 색상을 노랑/빨강으로 변경.].

=== [[위키백과]] ===
||{{{#!folding 위키백과의 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 = 검색결과의 고급선택,검색위치 선택창. / 자매 프로젝트에서의 결과.
}}}||

||{{{-3 #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%[* 15→18px]증가, 좌측 사이드바 '다른 언어' 항목의 자주 쓰는 언어(영어,한국어,중국어,일본어) 글씨크기 대폭 증가.
----
# 위키백과 - Main page (영문판 대문)
||{{{-2 #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

=== [[파파고]] (번역기) ===
||{{{-2 .btn_dropdown___2P-vM, .btn_window___3Mlxv, 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_area___2iv-G{padding:3px 9px 52px!important;}
.wrap___1rX6i .container___3EGm5{margin-top:-345px!important;}
}}}||
 * url[*s]: https://papago.naver.com
DarkReader와 같이 사용해도 된다.
※빈 공간을 줄이고, '작은창번역'단추가 제거된다.

----
# 파파고 - 웹사이트 번역 (위키백과)
||{{{-2 .box_inner___2n_6d, .header___Ke5jM, .mw-notification, .website___1E-JL{background:#000!important;}
.active___3VPGL{color:#0f0!important;}
}}}||
 * url[*s]: https://papago.naver.net
DarkReader는 해제한다.

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

||{{{-3 a#video-title-link:visited #video-title{color:#0e0!important;}
#contents, .ytp-ad-action-interstitial, :not(.style-scope)[dark], #guide-content, #savefrom__yt_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;}
#savefrom__yt_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는 해제한다.
※적용 효과: 동영상 재생바 밑에 불필요한 단추[* 다음(우측 사이드바에 있으므로 불필요), 소형플레이어(별 쓸일 없음), 전체화면(화면을 더블클릭하면 되므로 불필요)]가 제거되고 재생바와 단추 사이 공간 늘림[* 이로써 재생시간 위치를 변경하려고 클릭하다 실수로 밑의 단추를 클릭하는것이 방지된다.], 저장-재생목록 창 크기 증가, 광고차단앱으로인해 일시적으로 첫 재생화면에 화이트배경이 나타나는 현상 제거, 방문한 링크 색상 변경[*l][* 유튜브의 방문 링크는 드믈게 해제되는 현상이 있다.].

=== [[일베저장소]] ===
||{{{-3 #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].

=== 스타일리시 [*d] ===
||{{{-3 .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

== 관련 문서 ==
 * [[다크 모드]]
  * [[Dark Reader]]
  * [[블루라이트]]
 * [[문서편집기]] - css를 편집할때 유용한 기능이 많은 편집기를 쓰면 편리하고 작업영역 자동저장으로 안전하게 백업 해놓을 수 있다.
[[분류:컴퓨터]]