스타일러스: 두 판 사이의 차이

{| align='right' border='1'

|colspan='2' style='text-align: center;'|[[파일:stylus128.png]]

 

== 적용 예시 ==

{{youtube|lP2kbvwuzXA}} 스타일러스 CSS코드 적용 방법 및 트위터+유튜브+위키백과+디시위키+나무위키+아카이브+네이버에 대한 적용 예시 영상.

=== 적용 효과 (다크모드+공간최적화+광고제거 등) ===

|}

<pre>@-moz-document url-prefix(chrome-extension), url-prefix(moz-extension){

.CodeMirror, .dropdown-content, .style-edit-link{background-color:rgba(0,0,0,0)!important} button{background-color:#000!important} #message-box>div{background-color:#000!important; border:1px solid #060!important}

#message-box-buttons{background-color:#010!important} #installed .main-controls:hover, .CodeMirror-activeline-background, .dropdown-content a:hover, button:active{background-color:#030!important}

#help-popup{background-color:#333!important} .CodeMirror-selected{background-color:#660!important} .actions>a:hover{background-color:#900!important}

#toc>li[data-focused-via-click]{color:#2f2!important; font-size:12px} #toc>li[data-focused-via-click]:hover{box-shadow:rgba(0,255,0,.4) 0 0 9px, rgba(0,255,0,.4) 0 0 3px 1px}

#toc>li.current[data-focused-via-click]{color:#f44!important; box-shadow:rgba(255,0,0,.4) 0 0 9px, rgba(255,0,0,.4) 0 0 3px 1px; font-size:12px} #toc{font-size:10px; padding:0 0 .5rem!important}

/* Mozilla-Developer - 좌측 사이드바 */

aside{max-width:250px; padding:0} nav.sidebar{max-width:290px; margin:0 -40px; padding:0} .sidebar li{margin-bottom:2px}

nav li.toggle ol a{min-width:230px; line-height:1; display:inline-block} nav li.toggle ol a:first-child{min-width:240px; margin-left:-10px}

li>svg+a{min-width:200px} li>a:not([href='#']):hover{box-shadow:rgba(255,0,0,.3) 0 0 9px, rgba(255,0,0,.3) 0 0 3px 1px; text-decoration:none!important}

/* Twit - 사용자페이지 사이드바 */

[class='css-1dbjc4n r-obd0qt r-16y2uox']{display:none}

/* Twit - All - 타사용자 팝업창 - 팔로우/언팔 */

[data-testid$=-follow]{border-color:#666} [data-testid$=unfollow]{border-color:#040} [data-testid$=unfollow] span:not([style]){color:#080!important}

ytd-masthead>#container{box-shadow:rgba(255,255,255,.2) 0 0 0 1px; height:40px!important}

/* Youtu - Video */

button.ytp-large-play-button{top:99%} button.ytp-large-play-button path[fill='#fff']{fill:rgba(0,255,0,.5)} path.ytp-large-play-button-bg{fill:rgba(0,0,0,.3)}

#movie_player.paused-mode .ytp-progress-bar-container{animation:o2 1s linear infinite}

/* Youtu - Video - 진행바 */

.ytp-scrubber-container{height:6px!important; background:#ee0!important; box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 0 4px 1px rgba(0,0,0,.8); width:2px!important; left:0!important; top:-2px!important} #player .ytp-scrubber-container>div{background-color:rgba(0,0,0,0)!important}

.ytp-preview{font-size:14px!important} .ytp-big-mode .ytp-preview .ytp-tooltip-text{top:45px!important} body>#player .ytp-preview .ytp-tooltip-bg{margin-bottom:-20px}

#ytd-player .ytp-preview .ytp-tooltip-bg{box-shadow:rgba(99,99,99,.5) 0 0 9px, rgba(9,9,9,.8) 0 0 3px 1px} #movie_player:not(.ytp-big-mode) .ytp-preview .ytp-tooltip-bg{transform:scale(1.5)!important}

.ytp-tooltip.ytp-preview:not(.ytp-text-detail){background-color:rgba(0,0,0,.3)!important}

/* Youtu - Video - 일부영상에서 영상 끝날떄쯤 뜨는 링크 */

.ytp-chrome-top-buttons>button.ytp-watch-later-button{margin:0!important; min-width:30px!important} .ytp-chrome-top-buttons>button.ytp-share-button{margin:0 -9px 0 2px!important; min-width:30px!important}

/* Yout - All (Feed+Home) - Video renderer - Details menu */

/* Youtu - All - Popup - System menu */

ytd-multi-page-menu-renderer[menu-style$=system]{width:240px} ytd-multi-page-menu-renderer[menu-style$=system] #container.ytd-multi-page-menu-renderer{margin-right:0; padding:0}

ytd-comment-video-thumbnail-header-renderer+ytd-comments{padding:3px!important}

ytd-notification-renderer{padding:2px 2px 2px 0!important; background-color:rgba(0,0,0,.8)!important} ytd-notification-renderer+ytd-notification-renderer{border-top:1px solid #050}

a.yt-simple-endpoint.ytd-notification-renderer:hover{background-color:#020!important}

.text.ytd-notification-renderer{display:-webkit-box!important} .message.ytd-notification-renderer{max-width:660px; line-height:1.13!important; margin:0!important; -webkit-line-clamp:4; display:-webkit-box; -webkit-box-orient:vertical; white-space:normal}

ytd-popup-container #pinned-comment-badge.ytd-comment-renderer{margin-bottom:-4px}

/* Youtu - Comment+Reply (댓글+답글) */

ytd-comment-video-thumbnail-header-renderer{padding:3px!important; border-bottom:1px solid #444!important}

yt-next-continuation.ytd-comment-replies-renderer, #button.ytd-continuation-item-renderer>ytd-button-renderer{display:block}

tp-yt-paper-button.yt-next-continuation{text-align:left; display:block} tp-yt-paper-button.yt-next-continuation:hover{background-color:rgba(255,0,0,.2)}

ytd-continuation-item-renderer>#button>ytd-button-renderer>a>tp-yt-paper-button{display:flex; justify-content:start}

#expander>ytd-button-renderer>a>tp-yt-paper-button{user-select:text} tp-yt-paper-button:hover{box-shadow:rgba(255,0,0,.3) 0 0 14px, rgba(255,0,0,.3) 0 0 3px 1px}

ytd-comment-renderer{overflow:visible!important} #header.ytd-comment-renderer{margin:0!important}

ytd-comments ytd-expander>#content{margin:-38px -20px 0 220px; padding:2px 0 0; line-height:1.8rem} #author-text{min-width:80px} ytd-comments ytd-expander>#less{width:400px; right:-40px; padding-right:9px!important; float:right; text-align:right; animation:o4 1s linear infinite} ytd-comments ytd-expander>#less:hover{animation:none}

#replies ytd-expander>#content{margin:-25px -20px 3px 220px!important}

#sponsor-comment-badge:not([hidden])+yt-formatted-string{margin:-5px 0 0 16px}

#header-author h3{max-width:190px; overflow:hidden; white-space:nowrap}

#author-thumbnail yt-img-shadow{border-radius:0!important; overflow:visible!important}

#author-thumbnail:hover yt-img-shadow>img{transform:scale(1.4) translate(-6px); transition:transform .1s ease-in; box-shadow:rgba(155,155,155,.3) 0 0 15px, rgba(55,55,55,.4) 0 0 3px 1px; z-index:999; position:relative}

#replies #action-buttons>#toolbar{margin:18px 0 -6px 99px!important} #header-badge{margin:0 0 -16px -120px!important; width:78px; height:15px; overflow:hidden; display:-webkit-box!important}

#comment yt-icon-button#button, #replies yt-icon-button#button{padding:0 6px 0 2px!important; width:24px!important; height:24px!important}

ytd-toggle-button-renderer#like-button+#vote-count-middle{position:absolute; margin-left:15px!important; text-shadow:0 0 9px #000, 0 0 8px #000, 0 0 7px #000, 0 0 6px #000, 0 0 5px #000, 0 0 4px #000, 0 0 3px #000, 0 0 2px #000}

span#vote-count-middle{margin:0!important; min-width:20px}

/* Yout-Watch - Post (Info) */

ytd-video-primary-info-renderer{padding:0 0 0 40px!important}

ytd-video-primary-info-renderer #button{padding:0 6px 0 2px!important; width:24px!important; height:24px!important}

ytd-video-primary-info-renderer>#container{padding-right:12px!important}

ytd-statement-banner-renderer, ytd-video-masthead-ad-v3-renderer{display:none!important}

/* Yout-Home + Hashtag */

/* Yout-Hashtag (해시태그) */

a#avatar-link.ytd-rich-grid-media{margin:3px 3px 0 0} h3.ytd-rich-grid-media{margin:3px 0} #meta.ytd-rich-grid-media{padding:0}

/* Wiki - Head menu - Personal (사용자 메뉴) */

#p-personal li{font-size:1em; padding:0} #t-upload{font-size:1em!important} #p-personal{top:10px} #pt-userpage a{padding:.3em 0 0 20px!important}

/* Wiki - Head menu - Tabs (문서 메뉴탭) */

.vector-menu-tabs, .vector-menu-tabs a{background-image:linear-gradient(to bottom,#000 0,#0c0 100%)!important} .vector-menu-tabs .selected a{color:#ccc!important}

.vector-menu-tabs a{width:65px!important; padding-left:0!important; padding-right:0!important; text-align:center!important} ul>li[id^=ca-] a:not([href='#']){box-shadow:none}

/* Wiki - Panel menu (패널) */

#mw-panel #p- a{display:inline!important} #p-{margin-bottom:-9px!important} #p-lang ul{margin-left:9px}

#p-logo{height:90px!important; margin:4px!important} #p-logo a{height:90px!important; background-size:50%!important; filter:invert(100%)}

body>.navpopup{padding:8px; border-color:#880; max-width:500px!important; font-size:16px!important; text-align:center} body>.navpopup span{font-size:16px!important}

body>.navpopup .popupTopLinks, body>.navpopup .mw-cite-backlink, body>.navpopup hr{display:none!important}

/* Wiki - Popups (링크문서내용 미리보기 팝업창) */

a.mwe-popups-extract{line-height:16px; margin:5px 2px 0 4px!important; padding-top:5px!important; letter-spacing:-.5px; word-spacing:-.5px; overflow:visible!important} .mwe-popups-extract::after{display:none}

.mw-search-results{width:100%!important; max-width:100%!important} .searchresults{margin:.1em 0 1em .2em}

.mw-search-results li{width:33%; padding:3px 0; margin:0 1px 1px 0; list-style:a; float:left} .searchResultImage a[title]{display:block}

.searchalttitle{display:none} .mw-search-result-heading:hover>.searchalttitle{padding:1px 5px 2px; margin-top:-120px; left:0; z-index:9; display:inline; position:absolute; border:1px solid #aa0; box-shadow:rgba(255,0,0,.4) 0 0 15px, rgba(255,0,0,.4) 0 0 3px 1px!important; background-color:#200!important}

li:nth-child(3n-1) .mw-search-result-heading:hover+.searchresult{left:250px} li:nth-child(3n-1) .mw-search-result-heading:hover>.searchalttitle{left:500px}

 

<pre>@-moz-document domain(wikibooks.org){

@keyframes o4{50%{opacity:.4}} }

</pre>

#mw-panel{text-shadow:0 0 5px #000, 0 0 4px #000, 0 0 3px #000, 0 0 2px #000; user-select:none}

#p-personal li{margin-top:.2em; font-size:1em!important} li#pt-mycontris{margin-right:9px} li#pt-mycontris>a{width:90px}

#mw-panel li>a{display:block!important} #mw-panel #p- a{display:inline!important} #p-{margin-bottom:-9px!important}

ul>li[id^=ca-] a:not([href='#']){box-shadow:none}

#toc>ul>li>a:hover{background:#030!important; box-shadow:none!important} #toc>ul>li>ul>li>a:hover{background:#330!important; box-shadow:none!important} #toc>ul>li>ul>li>ul>li>a:hover{background:#400!important; box-shadow:none!important} #toc>ul>li>ul>li>ul>li>ul>li>a:hover{background:#403!important; box-shadow:none!important}

#toc>ul>li>a>.toctext:not([style]){color:#af0!important} #toc>ul>li>ul>li>a>.toctext:not([style]){color:#ee0!important} #toc>ul>li>ul>li>ul>li>a>.toctext:not([style]){color:#f90!important} #toc>ul>li>ul>li>ul>li>ul>li>a>.toctext:not([style]){color:#d0a!important}

/* 디키 - 문서 - 문단 */

h2 span:not([style]){color:#af0!important} h3 span:not([style]){color:#dd0!important} h4 span:not([style]){color:#f90!important} h5 span:not([style]){color:#e7a!important}

 

<pre>@-moz-document domain(rigvedawiki.net){

a.more{background-color:rgba(0,0,0,0)!important} nav{background-color:rgba(0,0,0,.2)!important} ul.list>li>ul{background-color:#000!important} form:hover>div, ul[id^=ui]{background:#000!important}

#toc1{max-width:500px; padding:3px 9px 3px!important; border:1px solid #040!important; background:0!important} #toc1 dt>a:not([id]){position:relative}

#toc1 dt>a[id^=t]{display:block} #toc1 dt>a[id^=t]>span{margin:0 0 -20px -20px; position:relative; display:block} #toc1 a:hover .num{text-decoration:underline!important}

#toc1>dl>dd>dl>dd>dl>dt>a[id^=t]>span{margin-left:-30px} #toc1>dl>dd>dl>dd>dl>dd>dl>dt>a[id^=t]>span{margin-left:-40px} #toc1>dl>dd>dl>dd>dl>dd>dl>dd>dl>dt>a[id^=t]>span{margin-left:-60px}

div[id]{color:#cf7!important} #toc1>dl>dd>dl>dt, h2>.tocnumber>a{color:#af0!important} #toc1>dl>dd>dl>dd>dl>dt, h3>.tocnumber>a{color:#ee0!important} #toc1>dl>dd>dl>dd>dl>dd>dl>dt, h4>.tocnumber>a{color:#f90!important} #toc1>dl>dd>dl>dd>dl>dd>dl>dd>dl>dt, h5>.tocnumber>a{color:#d0a!important}

#toc~h2{border-bottom:1px solid #070!important} #toc~h3{border-bottom:1px solid #770!important; margin:25px 0 6.5px!important} #toc~h1{margin-top:1em!important}

/* 남간-문서 - 각주 */

span.footnote-list{border-bottom:1px solid #333; width:100%; line-height:1.5!important; display:table!important}

.w .popper a.wiki-link-external{color:#5bd!important} .w .popper a.wiki-link-external:visited{color:#a4d!important} .popper a[href^='#rfn']{display:none}

a.wiki-fn-content{color:#0fb!important; font-size:.7em!important; letter-spacing:-.8px} a.wiki-fn-content:hover{color:#eee!important}

h6.wiki-heading{font-size:1.1em!important; border-color:#705!important} h5.wiki-heading *:not([id=i]){color:#c09!important}

/* 남간-문서 - 사진 */

@keyframes o4{50%{opacity:.4}} }

</pre>

/* 다음 - 카페 */

span:is([style*='rgb(0, 85,'],[style*='rgb(9, 0,'],[style*='rgb(28, 29,'],[style*='rgb(32, 33,'],[style*='rgb(34, 34,']){color:#ee0!important}

</pre>

----

 

<pre>@-moz-document domain(www.dcinside.com), domain(edu.dcinside.com), domain(gall.dcinside.com), domain(search.dcinside.com){

.gnb_bar, .left_content{background-color:rgba(0,0,0,0)!important} .reply_box{background-color:#010!important}

.comment_wrap, .view_content_wrap{color:#cf7!important} .gnb_list li a, h3{color:#4c6!important} .gnb_list li a.on{color:#cc0!important}

 

<pre>@-moz-document domain(systemclub.co.kr){

#stx, a[id$=button], li{background:0!important} li.on{background:#036!important} #container{padding:5px; width:1045px} #bo_v_act, #container_title{margin-bottom:5px}

#bo_v_atc{letter-spacing:0} #bo_v_con{line-height:1.5em; margin-bottom:5px} #bo_v_top{margin:-75px 0 10px} #bo_v_act .bo_v_act_gng a{padding:3px 9px} table>tbody>tr>td:not([id]){padding:2px 5px}

 

<pre>@-moz-document domain(reddit.com){

:root{--newCommunityTheme-activeTinted05:rgba(0,0,0,0); --newCommunityTheme-body:rgba(0,0,0,0); --newCommunityTheme-field:rgba(0,0,0,0); --newRedditTheme-body:rgba(0,0,0,0)}

[style^=--pseudo-before-backgr]{--pseudo-before-background:0!important}

 

<pre>@-moz-document domain(11st.co.kr), domain(esmplus.com){

#tSearch, body>div>div>div>div>div, body>div>div>div>div>div>div>div, body>div>div>div>div>div>div>div>div:not([style^=z-index]), button.btn_sale, button.c_btn_wishlist, div[class^=c-card],div[class^=c_content], form, form>div>div>div>div>div>div>div>div>div, tr>th[scope=col], ul.smt_auto, .c_order_amount, .c_order_btn, .c_product_buy_btn>div>*, .prdc_bbs td .state{background:0!important} .c_product_check.c_product_check_style3>span{background:0}

body>.l_product_drawer_wrap>div.active[style*='display: block'][role=dialog][ aria-hidden=false]:not([id=i]){background-color:rgba(0,0,0,.3)!important}

 

<pre>@-moz-document domain(aliexpress.com){

.add-store-list, .ask-buyers, .box-sizing>div, .f-filter-list label, .image-viewer, .mobile-app, .next-affix, .next-affix-top, .product-more div, .product-description, .product-detail-tab, .product-pagination-wrap, .sort-by-wrapper, .store-categories, .tab-content, .top-sell{background-color:rgba(0,0,0,0)!important}

div.user-account-main, ul.ng-sub-list{background-color:#000!important; box-shadow:rgba(155,155,155,.3) 0 0 15px, rgba(55,55,55,.4) 0 0 3px 1px}

 

<pre>@-moz-document domain(wish.com){

[class*=Search], [class*=Wrapper], [class^=FeedBrandCollectionTile]{background-color:rgba(0,0,0,0)!important}

[class^=BaseModal__BasicModal], [class^=ProductModal__MainContent], [class*=SearchSuggestions]{background:#000!important; box-shadow:rgba(155,155,155,.3) 0 0 15px, rgba(55,55,55,.4) 0 0 3px 1px!important}

img.img2, .img-wrap, i.arrows-to-top{filter:invert(100%)} a.white{background-color:rgba(0,0,0,0)!important}

/* Microsoft */

section .m-card{box-shadow:rgba(0,255,0,.2) 0 0 0 1px!important; background-color:rgba(0,0,0,0)!important}

section [aria-expanded]{box-shadow:rgba(255,255,255,.1) 0 0 0 1px; background-color:rgba(0,0,0,0)!important}

<br>위의 CSS코드를 쓰다가 문제점, 버그, 개선사항 등이 있다면 알려주기 바란다. ([https://wiki.dcinside.com/wiki/사용자토론:Uin1 사용자토론]에서 해도 된다)

== 같이 보기 ==

*[[다크모드]]: [[블루라이트]]를 크게 감소시켜 야간에 장시간 작업시 눈에 부담이 적다.

*[[엠에디터]]: CSS편집할때 유용한 기능이 많은 문서편집기를 쓰면 편리하고 작업영역 자동저장으로 안전하게 백업해 놓을 수 있다.

*[[램]]: 인터넷이 느리고 메모리 부족으로 자주 꺼진다면 메모리 최적화 프로그램을 사용해보자.

{{각주}}