스타일리시

이름	Stylish
제작자	Jason Barnabe
제작사	SimilarWeb
제작일	2005년 10월 9일
종류	브라우저 확장 기능
라이선스	프리웨어
웹사이트	http://userstyles.org

CSS 편집을 통해 웹사이트 및 특정 웹페이지를 사용자가 원하는 색상, 모양으로 인터페이스를 자유롭게 편집 가능한 웹 브라우저 확장 프로그램이다.
사용자가 원하지 않는 요소(불필요한 이미지, 아이콘, 단추, 빈 공간, 광고 등)를 제거할 수도 있다.

2017년에 후속작인 스타일러스(Stylus)를 제작했다. 파폭에서 스타일리시로 적용불가능한 일부 웹사이트가 적용 가능하고 이름,url자동생성 등 기능이 훨씬 좋아졌다.

사용 방법

• 1. 웹사이트에서 Ctrl+Shift+C를 눌러 변경하고 싶은 항목에 클릭(혹은 우클릭 - 검사)하여 CSS를 복사한다. (혹은 아래 '적용 예시'의 CSS값을 복사)
• 2. 스타일리시 아이콘 클릭 - ⫶(점 3개) 단추 클릭 - 'Create New Style' 클릭 - Sections에 붙여넣기한다.
• 3. 'Specify' 버튼을 눌러 URLs starting with에 웹사이트 URL을 지정 - 이름 설정 - 저장한다.

웹사이트마다 CSS의 구성 요소가 많이 다르기 때문에 각 웹사이트마다 따로 만들어서 적용해야 한다. (아래 적용 예시 참조)
또한 사이트 업데이트로 인해 CSS가 변경되면 일부가 적용이 안되거나 충돌이 생겨서 다시 수정해야 할수도 있다.

파이어폭스의 경우 설정-일반-언어와모양-색상-~덮어씀:'안함'으로 설정해야 스타일러스가 제대로 적용된다.

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

아래의 각 웹사이트에 적용되는 다크모드 배경색은 완전한 검정색(블랙), 글씨는 기존 흰색에서 초록,노랑,주황 등으로 바꿔 블루라이트+눈부심 현상을 최소화 하였다. 적용하기에 앞서 바탕화면 우클릭 - 개인설정 - 고대비를 다크모드로 설정해야 한다.

Extension - Stylish

.CodeMirror-gutters, .CodeMirror-scroll, button, input, select{background:#000!important;}
.CodeMirror-activeline-background{background:#020!important;}
.CodeMirror-selected{background:#550!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:#f33!important;}
.cm-number{color:#ffd!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 140px!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 (스타일리시는 파이어폭스에선 적용 불가능)

스크롤바+스타일리시 (크롬 전용)

::-webkit-scrollbar{width:9px!important; height:9px!important; background:#000!important;}
::-webkit-scrollbar-thumb{background:rgba(0,255,0,.6)!important;}
#stylish-popup .entry, ::-webkit-scrollbar-track-piece{background:#000!important;}
#stylish-popup .tabs-container{background:#020!important;}
#stylish-popup .find-styles{box-shadow:0 0 0 0 rgb(0 0 0 / 30%), inset 1px 1px 6px 6px #666!important; background:#000!important;}
#stylish-popup .thumbnail{max-height:30px!important;}

URL: All(전부) (Only Chrome; 크롬 전용) ※적용효과: 스크롤바 색상이 검정/초록으로 바뀌고 두께가 절반으로 줄어듬, 스타일리시 미니창 색상을 어둡게함.

---

• 위키피디아, 디시위키, 나무위키, 유튜브, 네이버, 일간베스트 등의 사이트 적용 예시는 스타일러스 문서 참고 바람.

같이 보기

• 다크모드
• 블루라이트
• 위키피디아