import{s as tl,ae as ve,af as Xe,f as n,a as r,l as kt,g as s,D as c,c as i,h as _,d as e,m as yt,G as el,j as de,i as o,r as f}from"./scheduler.2f9f1739.js";import{S as ll,i as ol,b as C,d as $,m as g,a as w,t as k,e as y}from"./index.f9f1dac6.js";import{g as nl,a as Ye}from"./styles.a749dd55.js";import{M as sl}from"./MarkdownLayout.50a9a114.js";import{I as _t}from"./image.a4587660.js";import{L as be}from"./link.4e908ad9.js";function rl(b){let a;return{c(){a=kt("Download the extension")},l(u){a=yt(u,"Download the extension")},m(u,h){o(u,a,h)},d(u){u&&e(a)}}}function il(b){let a;return{c(){a=kt("MIT License")},l(u){a=yt(u,"MIT License")},m(u,h){o(u,a,h)},d(u){u&&e(a)}}}function al(b){let a;return{c(){a=kt("SleekScroll")},l(u){a=yt(u,"SleekScroll")},m(u,h){o(u,a,h)},d(u){u&&e(a)}}}function cl(b){let a,u="At some point, I begin to notice the ugly and super orthodox scrollbars of the Chromium-based browsers more than ever. Everyone maybe does, or is it just me?",h,x,p="I guess not!",v,S,T,St,z,xe="and …",Lt,it,M,It,q,_e="then 😂",Pt,at,A,Et,B,Ce="It breaks our amazing designs so many times, that we sometimes customize it, if it happens to be a side project of ours, otherwise, we just ignore it.",jt,G,$e="Also, accessibility is another reason to keep it. But it doesn’t have to be as ugly 🤢.",Ht,O,ge="In this article, We’re going to go through scrollbars and their properties that we can edit/customize. I’m also going to Introduce SleekScroll, which is a Chrome extension that gives you the ability to customize your browser scrollbar look.",Tt,D,we="Scrollbars",zt,F,ke="Scrollbars can be styled and customized using CSS properties, although the level of customization varies across different browsers and their versions. Here are some of the properties that can be edited or styled for scrollbars:",Mt,N,ye="<li><p><strong>Scrollbar Width and Height:</strong></p> <ul><li><code>width</code> and <code>height</code> properties to adjust the size of the scrollbar.</li></ul></li> <li><p><strong>Scrollbar Colors:</strong></p> <ul><li><code>scrollbar-color</code> or <code>-webkit-scrollbar-color</code> to set the color of the scrollbar thumb (not widely supported).</li></ul></li> <li><p><strong>Scrollbar Track and Thumb:</strong></p> <ul><li><code>scrollbar-track-color</code> or <code>-webkit-scrollbar-track-color</code> to set the color of the scrollbar track.</li> <li><code>scrollbar-thumb-color</code> or <code>-webkit-scrollbar-thumb-color</code> to set the color of the scrollbar thumb.</li></ul></li> <li><p><strong>Scrollbar Corner:</strong></p> <ul><li><code>scrollbar-corner</code> or <code>-webkit-scrollbar-corner</code> to set the color of the scrollbar corner (where horizontal and vertical bars meet).</li></ul></li> <li><p><strong>Scrollbar Shadow:</strong></p> <ul><li><code>scrollbar-shadow-color</code> or <code>-webkit-scrollbar-shadow-color</code> to set the color of the scrollbar shadow.</li></ul></li> <li><p><strong>Scrollbar Borders:</strong></p> <ul><li><code>scrollbar-width</code> or <code>-webkit-scrollbar-width</code> to set the width of the scrollbar.</li> <li><code>scrollbar-border-color</code> or <code>-webkit-scrollbar-border-color</code> to set the color of the scrollbar border.</li></ul></li> <li><p><strong>Scrollbar Behavior:</strong></p> <ul><li><code>scrollbar-autohide</code> or <code>-webkit-scrollbar-autohide</code> to control the auto-hiding behavior of the scrollbar.</li></ul></li> <li><p><strong>Scrollbar Pseudo-elements:</strong></p> <ul><li><code>::-webkit-scrollbar</code> pseudo-element to target the entire scrollbar.</li> <li><code>::-webkit-scrollbar-thumb</code> pseudo-element to target the scrollbar thumb.</li> <li><code>::-webkit-scrollbar-track</code> pseudo-element to target the scrollbar track.</li></ul></li>",qt,U,Se="Here is an example of a customized scrollbar on devCanvas",At,L,Le,Bt,W,Ie="The accessibility bros are going to yell at you if you try to get rid of it, or even give you a convincing argument that it is perfect. But for me, it is super-duper ugly.",Gt,R,Pe="Till that is fixed, here is ‘sleek scroll’.",Ot,J,Ee="SleekScroll",Dt,K,je="Bid farewell to the ugly-looking scrollbar. With a focus on modern aesthetics, SleekScroll empowers you to create a browsing experience that’s as elegant as it is functional.",Ft,ct,Q,Nt,V,He="Features",Ut,X,Te="<li>Escape the ugly scrollbars with ease.</li> <li>Choose from a range of predefined themes or customize your own.</li> <li>Enjoy a smooth and engaging scrolling experience.</li> <li>Compatible with all Chromium-based browsers.</li>",Wt,ut,Y,Rt,Z,ze="Enjoy an experience that suits you better!",Jt,pt,tt,Kt,et,Me="Installation",Qt,m,Ct,I,re,mt,qe="Goto step 4, if you just clone the repository.",ie,ft,Ae="Unzip the package.",ae,ht,Be="Open your Chromium-based browser (e.g., Chrome, Brave).",ce,dt,Ge="Go to the extension tab (e.g <code>chrome://extensions/</code>).",ue,bt,Oe="Enable “Developer mode”.",pe,vt,De="Click “Load unpacked” and select the unzipped folder.",Vt,lt,Fe="Contributing",Xt,ot,Ne="Contributions are welcome! If you’d like to contribute to SleekScroll, follow these steps:",Yt,nt,Ue="<li>Fork the repository.</li> <li>Create a new branch.</li> <li>Make your changes and commit them.</li> <li>Push your changes to your forked repository.</li> <li>Create a pull request explaining your changes.</li>",Zt,st,We="License",te,P,me,E,fe,ee,rt,Re="I might be taking this too far 😅.",le,j,xt,Je="Get Started",he,H,oe;return T=new _t({props:{src:"https://cdn.hashnode.com/res/hashnode/image/upload/v1703694840260/cf0473c9-be0c-4557-b138-e478810f59d3.png"}}),M=new _t({props:{src:"https://cdn.hashnode.com/res/hashnode/image/upload/v1703696023314/549d0914-6d85-4c7a-90c3-7e056ae35486.png"}}),A=new _t({props:{src:"https://cdn.hashnode.com/res/hashnode/image/upload/v1703695940441/d119f5c2-ec26-438e-b73f-c36b02c9b699.png"}}),Q=new _t({props:{src:"https://cdn.hashnode.com/res/hashnode/image/upload/v1703694636952/84645a5a-3f7b-4833-af64-96ad83c11304.png"}}),Y=new _t({props:{src:"https://cdn.hashnode.com/res/hashnode/image/upload/v1703694684840/083b4274-4eb4-43be-8439-5416de846814.png"}}),tt=new _t({props:{src:"https://cdn.hashnode.com/res/hashnode/image/upload/v1703694724380/de7fda5e-9022-47af-b337-6f21a4398762.png"}}),I=new be({props:{href:"https://github.com/Abdumumin1/sleek-scroll",rel:"nofollow",$$slots:{default:[rl]},$$scope:{ctx:b}}}),E=new be({props:{href:"https://github.com/Abdulmumin1/sleek-scroll/LICENSE",rel:"nofollow",$$slots:{default:[il]},$$scope:{ctx:b}}}),H=new be({props:{href:"https://github.com/Abdulmumin1/sleek-scroll/LICENSE",rel:"nofollow",$$slots:{default:[al]},$$scope:{ctx:b}}}),{c(){a=n("p"),a.textContent=u,h=r(),x=n("p"),x.textContent=p,v=r(),S=n("p"),C(T.$$.fragment),St=r(),z=n("p"),z.textContent=xe,Lt=r(),it=n("p"),C(M.$$.fragment),It=r(),q=n("p"),q.textContent=_e,Pt=r(),at=n("p"),C(A.$$.fragment),Et=r(),B=n("p"),B.textContent=Ce,jt=r(),G=n("p"),G.textContent=$e,Ht=r(),O=n("p"),O.textContent=ge,Tt=r(),D=n("h2"),D.textContent=we,zt=r(),F=n("p"),F.textContent=ke,Mt=r(),N=n("ol"),N.innerHTML=ye,qt=r(),U=n("p"),U.textContent=Se,At=r(),L=n("iframe"),Bt=r(),W=n("p"),W.textContent=Ie,Gt=r(),R=n("p"),R.textContent=Pe,Ot=r(),J=n("h2"),J.textContent=Ee,Dt=r(),K=n("p"),K.textContent=je,Ft=r(),ct=n("p"),C(Q.$$.fragment),Nt=r(),V=n("h3"),V.textContent=He,Ut=r(),X=n("ul"),X.innerHTML=Te,Wt=r(),ut=n("p"),C(Y.$$.fragment),Rt=r(),Z=n("h3"),Z.textContent=ze,Jt=r(),pt=n("p"),C(tt.$$.fragment),Kt=r(),et=n("h3"),et.textContent=Me,Qt=r(),m=n("ol"),Ct=n("li"),C(I.$$.fragment),re=r(),mt=n("li"),mt.textContent=qe,ie=r(),ft=n("li"),ft.textContent=Ae,ae=r(),ht=n("li"),ht.textContent=Be,ce=r(),dt=n("li"),dt.innerHTML=Ge,ue=r(),bt=n("li"),bt.textContent=Oe,pe=r(),vt=n("li"),vt.textContent=De,Vt=r(),lt=n("h3"),lt.textContent=Fe,Xt=r(),ot=n("p"),ot.textContent=Ne,Yt=r(),nt=n("ol"),nt.innerHTML=Ue,Zt=r(),st=n("h3"),st.textContent=We,te=r(),P=n("p"),me=kt("This project is licensed under the "),C(E.$$.fragment),fe=kt("."),ee=r(),rt=n("p"),rt.textContent=Re,le=r(),j=n("p"),xt=n("strong"),xt.textContent=Je,he=r(),C(H.$$.fragment),this.h()},l(t){a=s(t,"P",{"data-svelte-h":!0}),c(a)!=="svelte-1pk4ank"&&(a.textContent=u),h=i(t),x=s(t,"P",{"data-svelte-h":!0}),c(x)!=="svelte-1raasle"&&(x.textContent=p),v=i(t),S=s(t,"P",{});var l=_(S);$(T.$$.fragment,l),l.forEach(e),St=i(t),z=s(t,"P",{"data-svelte-h":!0}),c(z)!=="svelte-1hywxtv"&&(z.textContent=xe),Lt=i(t),it=s(t,"P",{});var $t=_(it);$(M.$$.fragment,$t),$t.forEach(e),It=i(t),q=s(t,"P",{"data-svelte-h":!0}),c(q)!=="svelte-1wjmz56"&&(q.textContent=_e),Pt=i(t),at=s(t,"P",{});var gt=_(at);$(A.$$.fragment,gt),gt.forEach(e),Et=i(t),B=s(t,"P",{"data-svelte-h":!0}),c(B)!=="svelte-1g36je2"&&(B.textContent=Ce),jt=i(t),G=s(t,"P",{"data-svelte-h":!0}),c(G)!=="svelte-1gbo772"&&(G.textContent=$e),Ht=i(t),O=s(t,"P",{"data-svelte-h":!0}),c(O)!=="svelte-1tjn1wc"&&(O.textContent=ge),Tt=i(t),D=s(t,"H2",{"data-svelte-h":!0}),c(D)!=="svelte-10y8j91"&&(D.textContent=we),zt=i(t),F=s(t,"P",{"data-svelte-h":!0}),c(F)!=="svelte-9w7hy3"&&(F.textContent=ke),Mt=i(t),N=s(t,"OL",{"data-svelte-h":!0}),c(N)!=="svelte-ji3m67"&&(N.innerHTML=ye),qt=i(t),U=s(t,"P",{"data-svelte-h":!0}),c(U)!=="svelte-cboudo"&&(U.textContent=Se),At=i(t),L=s(t,"IFRAME",{src:!0,height:!0,width:!0}),_(L).forEach(e),Bt=i(t),W=s(t,"P",{"data-svelte-h":!0}),c(W)!=="svelte-f80sdb"&&(W.textContent=Ie),Gt=i(t),R=s(t,"P",{"data-svelte-h":!0}),c(R)!=="svelte-1tdoqno"&&(R.textContent=Pe),Ot=i(t),J=s(t,"H2",{"data-svelte-h":!0}),c(J)!=="svelte-1oijr7z"&&(J.textContent=Ee),Dt=i(t),K=s(t,"P",{"data-svelte-h":!0}),c(K)!=="svelte-ha5ers"&&(K.textContent=je),Ft=i(t),ct=s(t,"P",{});var wt=_(ct);$(Q.$$.fragment,wt),wt.forEach(e),Nt=i(t),V=s(t,"H3",{"data-svelte-h":!0}),c(V)!=="svelte-1mt6x5z"&&(V.textContent=He),Ut=i(t),X=s(t,"UL",{"data-svelte-h":!0}),c(X)!=="svelte-4di52l"&&(X.innerHTML=Te),Wt=i(t),ut=s(t,"P",{});var Ke=_(ut);$(Y.$$.fragment,Ke),Ke.forEach(e),Rt=i(t),Z=s(t,"H3",{"data-svelte-h":!0}),c(Z)!=="svelte-130667f"&&(Z.textContent=ze),Jt=i(t),pt=s(t,"P",{});var Qe=_(pt);$(tt.$$.fragment,Qe),Qe.forEach(e),Kt=i(t),et=s(t,"H3",{"data-svelte-h":!0}),c(et)!=="svelte-1ae8k70"&&(et.textContent=Me),Qt=i(t),m=s(t,"OL",{});var d=_(m);Ct=s(d,"LI",{});var Ve=_(Ct);$(I.$$.fragment,Ve),Ve.forEach(e),re=i(d),mt=s(d,"LI",{"data-svelte-h":!0}),c(mt)!=="svelte-16t0o9n"&&(mt.textContent=qe),ie=i(d),ft=s(d,"LI",{"data-svelte-h":!0}),c(ft)!=="svelte-12nuegp"&&(ft.textContent=Ae),ae=i(d),ht=s(d,"LI",{"data-svelte-h":!0}),c(ht)!=="svelte-1t8ady2"&&(ht.textContent=Be),ce=i(d),dt=s(d,"LI",{"data-svelte-h":!0}),c(dt)!=="svelte-dfqar"&&(dt.innerHTML=Ge),ue=i(d),bt=s(d,"LI",{"data-svelte-h":!0}),c(bt)!=="svelte-sumqvh"&&(bt.textContent=Oe),pe=i(d),vt=s(d,"LI",{"data-svelte-h":!0}),c(vt)!=="svelte-s3qlu7"&&(vt.textContent=De),d.forEach(e),Vt=i(t),lt=s(t,"H3",{"data-svelte-h":!0}),c(lt)!=="svelte-su7nog"&&(lt.textContent=Fe),Xt=i(t),ot=s(t,"P",{"data-svelte-h":!0}),c(ot)!=="svelte-jr2okd"&&(ot.textContent=Ne),Yt=i(t),nt=s(t,"OL",{"data-svelte-h":!0}),c(nt)!=="svelte-u030f0"&&(nt.innerHTML=Ue),Zt=i(t),st=s(t,"H3",{"data-svelte-h":!0}),c(st)!=="svelte-ul4exb"&&(st.textContent=We),te=i(t),P=s(t,"P",{});var ne=_(P);me=yt(ne,"This project is licensed under the "),$(E.$$.fragment,ne),fe=yt(ne,"."),ne.forEach(e),ee=i(t),rt=s(t,"P",{"data-svelte-h":!0}),c(rt)!=="svelte-rof1u6"&&(rt.textContent=Re),le=i(t),j=s(t,"P",{});var se=_(j);xt=s(se,"STRONG",{"data-svelte-h":!0}),c(xt)!=="svelte-lkzvup"&&(xt.textContent=Je),he=i(se),$(H.$$.fragment,se),se.forEach(e),this.h()},h(){el(L.src,Le="https://snippet-bice.vercel.app/play/vs8OLm/embed")||de(L,"src",Le),de(L,"height","500px"),de(L,"width","100%")},m(t,l){o(t,a,l),o(t,h,l),o(t,x,l),o(t,v,l),o(t,S,l),g(T,S,null),o(t,St,l),o(t,z,l),o(t,Lt,l),o(t,it,l),g(M,it,null),o(t,It,l),o(t,q,l),o(t,Pt,l),o(t,at,l),g(A,at,null),o(t,Et,l),o(t,B,l),o(t,jt,l),o(t,G,l),o(t,Ht,l),o(t,O,l),o(t,Tt,l),o(t,D,l),o(t,zt,l),o(t,F,l),o(t,Mt,l),o(t,N,l),o(t,qt,l),o(t,U,l),o(t,At,l),o(t,L,l),o(t,Bt,l),o(t,W,l),o(t,Gt,l),o(t,R,l),o(t,Ot,l),o(t,J,l),o(t,Dt,l),o(t,K,l),o(t,Ft,l),o(t,ct,l),g(Q,ct,null),o(t,Nt,l),o(t,V,l),o(t,Ut,l),o(t,X,l),o(t,Wt,l),o(t,ut,l),g(Y,ut,null),o(t,Rt,l),o(t,Z,l),o(t,Jt,l),o(t,pt,l),g(tt,pt,null),o(t,Kt,l),o(t,et,l),o(t,Qt,l),o(t,m,l),f(m,Ct),g(I,Ct,null),f(m,re),f(m,mt),f(m,ie),f(m,ft),f(m,ae),f(m,ht),f(m,ce),f(m,dt),f(m,ue),f(m,bt),f(m,pe),f(m,vt),o(t,Vt,l),o(t,lt,l),o(t,Xt,l),o(t,ot,l),o(t,Yt,l),o(t,nt,l),o(t,Zt,l),o(t,st,l),o(t,te,l),o(t,P,l),f(P,me),g(E,P,null),f(P,fe),o(t,ee,l),o(t,rt,l),o(t,le,l),o(t,j,l),f(j,xt),f(j,he),g(H,j,null),oe=!0},p(t,l){const $t={};l&2&&($t.$$scope={dirty:l,ctx:t}),I.$set($t);const gt={};l&2&&(gt.$$scope={dirty:l,ctx:t}),E.$set(gt);const wt={};l&2&&(wt.$$scope={dirty:l,ctx:t}),H.$set(wt)},i(t){oe||(w(T.$$.fragment,t),w(M.$$.fragment,t),w(A.$$.fragment,t),w(Q.$$.fragment,t),w(Y.$$.fragment,t),w(tt.$$.fragment,t),w(I.$$.fragment,t),w(E.$$.fragment,t),w(H.$$.fragment,t),oe=!0)},o(t){k(T.$$.fragment,t),k(M.$$.fragment,t),k(A.$$.fragment,t),k(Q.$$.fragment,t),k(Y.$$.fragment,t),k(tt.$$.fragment,t),k(I.$$.fragment,t),k(E.$$.fragment,t),k(H.$$.fragment,t),oe=!1},d(t){t&&(e(a),e(h),e(x),e(v),e(S),e(St),e(z),e(Lt),e(it),e(It),e(q),e(Pt),e(at),e(Et),e(B),e(jt),e(G),e(Ht),e(O),e(Tt),e(D),e(zt),e(F),e(Mt),e(N),e(qt),e(U),e(At),e(L),e(Bt),e(W),e(Gt),e(R),e(Ot),e(J),e(Dt),e(K),e(Ft),e(ct),e(Nt),e(V),e(Ut),e(X),e(Wt),e(ut),e(Rt),e(Z),e(Jt),e(pt),e(Kt),e(et),e(Qt),e(m),e(Vt),e(lt),e(Xt),e(ot),e(Yt),e(nt),e(Zt),e(st),e(te),e(P),e(ee),e(rt),e(le),e(j)),y(T),y(M),y(A),y(Q),y(Y),y(tt),y(I),y(E),y(H)}}}function ul(b){let a,u;const h=[b[0],Ze];let x={$$slots:{default:[cl]},$$scope:{ctx:b}};for(let p=0;p<h.length;p+=1)x=ve(x,h[p]);return a=new sl({props:x}),{c(){C(a.$$.fragment)},l(p){$(a.$$.fragment,p)},m(p,v){g(a,p,v),u=!0},p(p,[v]){const S=v&1?nl(h,[v&1&&Ye(p[0]),v&0&&Ye(Ze)]):{};v&2&&(S.$$scope={dirty:v,ctx:p}),a.$set(S)},i(p){u||(w(a.$$.fragment,p),u=!0)},o(p){k(a.$$.fragment,p),u=!1},d(p){y(a,p)}}}const Ze={title:"Goodbye Ugly Scrollbars",description:`At some point, I noticed the chromium scrollbar more than ever. Everyone maybe does, or is it just me? I guess not!`,date:"2023-12-27",lastmod:"2024-01-12",categories:["product launch","chrome","extension","js"],label:'<a href="/category/product%20launch">product launch</a>',thumbnail:"https://cdn.hashnode.com/res/hashnode/image/upload/v1703704767703/f10479c5-a422-4b08-897f-57ff35b98bc2.png",published:!0};function pl(b,a,u){return b.$$set=h=>{u(0,a=ve(ve({},a),Xe(h)))},a=Xe(a),[a]}class xl extends ll{constructor(a){super(),ol(this,a,pl,ul,tl,{})}}export{xl as default,Ze as metadata};