스타일리시
| '''Stylish''' | |
[image] | |
| 제작자 | Jason Barnabe |
| 제작사 | SimilarWeb |
| 제작일 | 2005년 10월 9일 |
| 종류 | 브라우저 확장 기능 |
| 사이트 | 공식 홈페이지 |
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]
혹은 우클릭 - 검사
흰색:#fff, 검정:#000, 빨강:#f00, 초록:#0f0, 파랑:#00f 등
Styles 오른쪽에 Computed항목을 클릭하면 보기 편하고, 해당 값을 변경하면 색상,모양이 바뀐것을 바로 확인할수 있다.
2. 편집하고 싶은 해당 css를 복사,
3. Stylish아이콘 클릭 - 점3개(⫶) 단추 클릭 - Create New Style 클릭 - Sections에 붙여넣기하여 편집하면 된다.[6]
그리고 편집한 값{}의 오른쪽에 !important;를 삽입해야 적용된다.
재편집 하고 싶다면 Stylish아이콘 클릭 - Edit(연필모양) 단추를 클릭한다.
Sections안의 ⨂표시는 적용이 안된다는 뜻이고 그 아래 것들까지 적용이 안될수도 있으니 주의한다.
편집하면 탭 이름 앞에 *표시[7]
저장(Ctrl+S) 혹은 실행취소(Ctrl+Z)시 *표시가 사라진다.
중복 적용되는 것이 있다면 그중에 아래에 있는 것으로 적용된다.
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.liveSpecify - URLs starting with
내부링크/게시판:주황→초록, 외부링크:파랑→보라
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.newsSpecify - URLs starting with
내부링크/게시판:주황→초록, 외부링크:파랑→보라
4.4. 나무위키 게시판 [d] DarkReader 적용이 불가능해서 Stylish로만 다크모드로 만들수 있다.
DarkReader 적용이 불가능해서 Stylish로만 다크모드로 만들수 있다.
| #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.wikiSpecify - URLs starting with
내부링크/게시판:주황→초록, 외부링크:파랑→보라
4.5. 나무위키
|
| .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.wikiSpecify - URLs starting with
혹은 '다크테마사용' 해제 + '시스템다크테마가져오지않기' 해제해도 된다. (둘중 차이점은 없는듯)
※문단크기 축소, 광고+외부링크 기본아이콘+번쩍임 현상[9]
다크모드에서 나무위키를 새로 켜거나 새로고침/복구 등을 할때 일시적으로 약1초(글이 많을수록 더 오래걸림) 동안 화이트 배경이 나타나는 현상.
내부링크/게시판:주황→초록, 외부링크:파랑→보라
이로써 일반 다크모드에서 일부 표 안의 배경or글씨가 보기 불편하던 문제점이 없다.
우측의 링크 색상을 노랑/빨강으로 변경.
4.6. 위키백과
|
| #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.netSpecify - URLs starting with
※불필요한 빈 공간 제거, 본문 글씨크기 20%[12]
15→18px
# 위키백과 - 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_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.comSpecify - URLs starting with
※빈 공간을 줄이고, '작은창번역'단추가 제거된다.
# 파파고 - 웹사이트 번역 (위키백과)
| .box_inner_2n_6d, .header_Ke5jM, .mw-notification, .website_1E-JL{background:#000!important;}.active_3VPGL{color:#0f0!important;} |
- url[s]: https://papago.naver.netSpecify - URLs starting with
4.8. 유튜브
|
| 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.comSpecify - URLs starting with
※적용 효과: 동영상 재생바 밑에 불필요한 단추[13]
다음(우측 사이드바에 있으므로 불필요), 소형플레이어(별 쓸일 없음), 전체화면(화면을 더블클릭하면 되므로 불필요)
이로써 재생시간 위치를 변경하려고 클릭하다 실수로 밑의 단추를 클릭하는것이 방지된다.
내부링크/게시판:주황→초록, 외부링크:파랑→보라
유튜브의 방문 링크는 드믈게 해제되는 현상이 있다.
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.comSpecify - URLs starting with
※광고+불필요한 빈 공간 제거, 방문한 링크/게시판 색상 변경[l]
내부링크/게시판:주황→초록, 외부링크:파랑→보라
4.10. 스타일리시 [d] DarkReader 적용이 불가능해서 Stylish로만 다크모드로 만들수 있다.
DarkReader 적용이 불가능해서 Stylish로만 다크모드로 만들수 있다.
| .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://fjnbnpbmkenffdnngjfgmeleoegfcffeSpecify - URLs starting with
5. 관련 문서
[d] A B C D DarkReader 적용이 불가능해서 Stylish로만 다크모드로 만들수 있다.[1] 혹은 특정 웹페이지[2] 불필요한 이미지, 아이콘, 단추, 광고, 빈 공간 등[3] 혹은 우클릭 - 검사[4] 흰색:#fff, 검정:#000, 빨강:#f00, 초록:#0f0, 파랑:#00f 등[5] Styles 오른쪽에 Computed항목을 클릭하면 보기 편하고, 해당 값을 변경하면 색상,모양이 바뀐것을 바로 확인할수 있다.[6] 그리고 편집한 값{}의 오른쪽에 !important;를 삽입해야 적용된다.[7] 저장(Ctrl+S) 혹은 실행취소(Ctrl+Z)시 *표시가 사라진다.[s] A B C D E F G H I J Specify - URLs starting with[l] A B C D E F 내부링크/게시판:주황→초록, 외부링크:파랑→보라[8] 혹은 '다크테마사용' 해제 + '시스템다크테마가져오지않기' 해제해도 된다. (둘중 차이점은 없는듯)[9] 다크모드에서 나무위키를 새로 켜거나 새로고침/복구 등을 할때 일시적으로 약1초(글이 많을수록 더 오래걸림) 동안 화이트 배경이 나타나는 현상.[10] 이로써 일반 다크모드에서 일부 표 안의 배경or글씨가 보기 불편하던 문제점이 없다.[11] 우측의 링크 색상을 노랑/빨강으로 변경.[12] 15→18px[13] 다음(우측 사이드바에 있으므로 불필요), 소형플레이어(별 쓸일 없음), 전체화면(화면을 더블클릭하면 되므로 불필요)[14] 이로써 재생시간 위치를 변경하려고 클릭하다 실수로 밑의 단추를 클릭하는것이 방지된다.[15] 유튜브의 방문 링크는 드믈게 해제되는 현상이 있다.