From 424a9d9c6301b438626c6641d9626f70b8830436 Mon Sep 17 00:00:00 2001 From: Nimit1705 Date: Thu, 2 Jan 2025 16:01:49 +0000 Subject: [PATCH] Add theme: Sidebar animation --- .../chrome.css | 81 ++++++++++++++++++ .../image.png | Bin 0 -> 7934 bytes .../readme.md | 10 +++ .../theme.json | 14 +++ 4 files changed, 105 insertions(+) create mode 100644 themes/f5de8fbe-1d14-4e73-a806-cecc8e2c6af7/chrome.css create mode 100644 themes/f5de8fbe-1d14-4e73-a806-cecc8e2c6af7/image.png create mode 100644 themes/f5de8fbe-1d14-4e73-a806-cecc8e2c6af7/readme.md create mode 100644 themes/f5de8fbe-1d14-4e73-a806-cecc8e2c6af7/theme.json diff --git a/themes/f5de8fbe-1d14-4e73-a806-cecc8e2c6af7/chrome.css b/themes/f5de8fbe-1d14-4e73-a806-cecc8e2c6af7/chrome.css new file mode 100644 index 00000000..27511042 --- /dev/null +++ b/themes/f5de8fbe-1d14-4e73-a806-cecc8e2c6af7/chrome.css @@ -0,0 +1,81 @@ + +@keyframes bounce { + 0% { + left: calc(-1 * var(--zen-sidebar-width)); + opacity: 1; + } + + 50% { + left: 0; + } + + 100% { + left:-8px; + } + } + + @keyframes right-bounce { + 0% { + right: calc(-1 * var(--zen-sidebar-width)); + opacity: 1; + } + + 50% { + right: 0; + } + + 100% { + right: -14px; + } + } + + @keyframes fadeout { + 0% { + left: -8px; + opacity: 1; + } + + 100% { + left: calc(-1 * var(--zen-sidebar-width) + 5px); + opacity: 1; + } + } + + @keyframes fadeout-right { + 0% { + right: -8px; + opacity: 1; + } + + 100% { + right: calc(-1 * var(--zen-sidebar-width)); + opacity: 1; + } + } + + @media (-moz-bool-pref: "zen.view.compact") { + #navigator-toolbox { + box-sizing: content-box !important; + animation: fadeout 0.2s cubic-bezier(0.25, 0.8, 0.5, 1) !important; + animation-fill-mode: forwards !important; + padding-left: 14px !important; + + @media (-moz-bool-pref: "zen.tabs.vertical.right-side") { + padding-left: 6px !important; + padding-right: 14px !important; + + animation: fadeout-right 0.2s cubic-bezier(0.25, 0.8, 0.5, 1) !important; + animation-fill-mode: forwards !important; + } + + &:is([zen-user-show], [zen-has-hover]), &:hover { + animation: bounce 0.3s cubic-bezier(0.25, 0.8, 0.5, 1) !important; + animation-fill-mode: forwards !important; + + @media (-moz-bool-pref: "zen.tabs.vertical.right-side") { + animation: right-bounce 0.3s cubic-bezier(0.25, 0.8, 0.5, 1) !important; + animation-fill-mode: forwards !important; + } + } + } + } diff --git a/themes/f5de8fbe-1d14-4e73-a806-cecc8e2c6af7/image.png b/themes/f5de8fbe-1d14-4e73-a806-cecc8e2c6af7/image.png new file mode 100644 index 0000000000000000000000000000000000000000..b8b9e919cbfeb69bfb3e47f35f7ac5e9e24908b0 GIT binary patch literal 7934 zcmVLPE%5ZFKhilL48C-em*^V0}>_%6fHqOdl5bR zNl1S*b^RDm{48bsBY6J{A3-W{{u4s{7gPH=IBX9%^%qI{HgNq43Jx88|7>fR4m0Rb zPJ$ki{~Uw=AC3PUi2om$|5sLs9$NizaGeY;*dL$&A9MW*D8@>i`DSI3DroUEaPb#Q z?jB+MB2>F8U-dGC{U>7NN0R&;RnZ6|wKHnv7eweCYx^Kq^B-5{Gko|59-};n_A6Y& zC|=ZGU5qt1X&z0yKz;r)X4X)u_#hx51sRVSOWY$%sVYgCNrwI=rv89`rbu1mlZKyn3%XNXuSgvXs)ZlF<+q(5fLU-nHVBzA1Fu|GJ{lA zh#5U@AxeKpmf5+)&Lbl$GBQQoAWihhut0>zHgmFYaBomhPxh0E^H2qC0012!NklQ?PD1Y2o=ZnT6<6wmiTWp0b zzp}mi)T=hKh>Xj|Q%z1W+4vc9QPy0&(WDp;if=?VAgcjcy@eMCwoS*HExTn%I*Ygk z8c(sXxNU`>X0=>F2dneqZO4gCW~vroI3%;GIglYXe_UYs={=Ag*3klBt$IiDBAZ8l z+*s$y%}HKWW3?j-HcK&!jp(I?i<%p|C zQfQ1W%Z9ccqN9wD{3O?bxqKK_=TTPL++_`Uhy)9Q~0MXL%mku82)% zU2woGhRZI<7;HS%WM1pP%I-#NY>c)Tv+Z)5r<@o zw$0Z}2y7Q}NH=GowPOdl0zt$3l30$Ec}?W1HP(Kn(bk;(k)xTDPIE&$50isN0b8~b zJBXnofD|JhDv3oKzp}Bqku`RgWkKU;#vw96&EcNDBGHJQcVi@Ti(+%gkvdsQ zW{$JXbxj~aGRStlkRj2!IgHl$?Hx`hSy*tk%vN%w;j-3l{*)ctBkgFmJi=7X2`%bw z&tEQHBeX{2yo+K^&y}0NdPhSD3dR_&zi;LQE8?1m< zcmc9HCOd4QVNUh9?t{%7Y*hAN=cAe6?D>CJxL`kgxu^kIPZlI=Sj2n*rIW$p{&-Q-pNd>z$5nZ*MP~(xPbF zqRm0I0Qe(S*|=zMh}BPSvxnPrnLdVT(Z0@l*k-WNY&I{^a(UUD^)7D>YxbG|)N5WM zF7!^ZZHlttJYo(u3!4dTdF$hQp1m~|v=TG+-_MVrgXv)+k%+@jVwi{%`yG~NI2cdD ziY%UhO*oKDN(p>CDeZ6u091}l*#|bP9BFkt#1?wL_kS_Oyax+e_x9fI8N2gi5;yBbIbw zu>CliZfU#_i@*QpKU_>Q8WJbj>^YK|N33isFU>~TTVXa4+2&Q7okvU_8Txy%iIq0e zkXX|Hx>dDM$PmuN1{rJ~JxQNICnfcd!|IpKhPJxMk-T2Zj2688*VmeUjYCyS zxW`s{9%P0o#iBY)qW5v|F)qNi!*Ia~VXx)>Z|qNH*&EZ(^3W~c=U zD#U@4nkq@E246A$aQ9)H_Q&QVTY&ON{a*d@G7F73rS6mE@pybq1W2pbH;=CImN0xW zVZ>%!g?NjjKhE8!yGO|_%UKL zn|58iE-#gXs;0t<7HBiHN3>B4!cj$4jZ<(&Rm)3gXQ_<$gZL9m==Deo7FA6XVzZPs zfoOB|Nb^l7nr$2$1DhHw9>IE4RErw4P)o&|n_>_)RHX=z#bQuBf|uY?P%9VJBUMq4 zf!CwM2gpZL`^TB4i*JitE&+kYq!DdXVLd4Oz1cy->ttha{dUTc1mVN-A zME*z)EEzAx_WXC3yt47iHWh6fuCguI@@BRdt^uCeOtQ&N`G3P9M`A4Ucr4QxcW^iX+W%ShhX7}4gG{}-b+t8DYf+P7C$rleO+ysX6~PizsI zZJ!@)>+5uBv*gId^U?WG^!Xu)*m&27$J3m1=ueVK%3t8FK-cBLgA-7i9bXb zI^@vy~jqd8q-Zlz9S3{z)v_ z*f|nC`W>Fm&IY5)S?}L_;%vI7zBC(ExAjb7^2mT&w3%hYqD@W)qu$ji@<~B9MZ5d( z;lnkDZSOOf;)g9IT-#hr8}i8MeXTRPygD1)TG>i}fMwWh*MEY2(wJ<@e?Ncw{;#)> zKG>)vX_C!LwB?Ox+kKi;2ZKIR&dT=q2R0^KX^hzZ)D#w5>GQX5-@d>1!G@wO!fLlX zMBBWyMIR>Z!QiUfX^nVnC8lm;qMHMo58V(~ial;~7`Abmt?8`R8JtdPb@Vig%_lRy zee%0MpG?US$4ufDZTc(%&XLc^AFnQ|^%iEke6Z92Iu(lNlD8irmy|r`k`#Wn)kQWN zn?*JpY+KR$8u;T`mpl|V8Z|xD0Lxqv#a8xL15mVa1~=@MgcWUgXhZz5dw`zsYYj$& zey{13&0M>sAFgjHYXR8br(_E-N85I^t?={YxIQ?!h-DAa|3tP1S68Q(z?P0X^<4bE zD&sKjE5!xbQub(LvpLC@*ZuKb13fNWucPM}`-Dx(l-Q%N67y!=btMjgnDJ_ zznWR|cCUnF%Y#4G|Hs_9IHi$gahTeS##oz*F_tqW2$7-%yWAQU2StI>AT3YFC|wP% z!W1S#r*IWY)>-2tsWox_?LFr{nr>(ig@}h_$_!SD&)<36bMC#JVo{Pqczhji4{kNs zEY4|Dqq`vH?@f1l&)HRvgIsUl-Zhi#T-$IQd2!_4z)-`p`5V8^;)&r@YLl@!?QQlf zNZZ=xz3HC!agfb80-9;d)>gK;$untZqnMFxv-I-WdGMq8@b(J=8?l=-L51rAoag5N_bZnxX5La=niC)VzIdQ z?`F299?jUl1%rnEt!K8Mx@Bt@ZI?$OiZ%~i+sq^$Z%ymTe|-V_uho>z8a_R(HkQi0 zv+1)WM;mQKo7UTyvrUY@Ig{q0P)h=Et*xzjJn$c2i^WozR4$jzo*DaqudtrK{bI^y zT|fQnum7F)Q8(Rs%Xqcfm?TG+S9L@8)dK<6K`C^gYfGWoynP&Er;r_Und-Xi6XuK;4LNYn<&}Gut1xw_krY*DZJo zvQ@18%#&|TZ-BMPhICD`P1O)>HYNxjG#_|naydy%mgQ(_v$Z$1<4ETpZSv%9rKM zPMJi{HZszjBmoVp^!E0eM-W8O7UP$7$xS<~-Nnsp{KEii_gz_1k7i(-tcxV=gD27e z!z-?}G#SH-Gy!tYiPybA97zKec4Z=BG93Gs&yE41VZaUM4AIiSj{N z!@Ihy%Yn}O6WI^2*vo!%gXOT()#g2y^Rd{PWjj;kWMFZH7|r}XR4DCcor&rQUwMFWcPyl3E@Oo`v?kMI-NRzlO85r9GWE*-mm6IVg5|zk83(%5+ z&CQ=m0R}w|>G_y+Aqoeo!Ed756JcwUCG~74R{~{f81u}AUnX|&=^IeH2d~?xG2Aql ze9;pSn`K6wN^AQNLm26eFXFhO>RlOG6l6QQ)FzoC)@{v=H2Be`(0(L)#bP>gU6kpDPk-6W*6Mv?o3_}?4v@{i8}tWvt(KnHUbNfcn5v}< zh4jaL;+33^kwvL)38Gu(=;r2Iy>IocY_&|IaIk8_Go=q@`@6}en>M?fJ2^@MT_K|E z?{lxzRRYuvpXsAqUES0gJx=dtx8FOLw8@ff1|?+g=1fT@m2?F8A|T+tK!w9}Vv9M-a8tDa8H_7w0!S=EjD4xdQZzxl%Fe&Xq|*j^gh%qqa#)E+rIA|D>&xZEHf$3yRI*3Dj4%TS=o>Tb|QZk?=`g06Mz zk7k?cj*W)f$tHBxSezpWx4PO&=ONlLwgblITvw~=y3^sWmefk6R9Sae$rpcfJc4e+ zt!yJE)$KeJ+93;%{L$edq0`{>o+-8H=5(ocr^Vq{0W4gtt~>mtO0`njeOxvzmFNy| zv32sR<3uP#*Hrm@L=V>-b}eiy-t6UaIY>6%?EYZzb8y=7NNg{g*^DkZG|A8sh(?7o zg#+EzDBIpaOPs*%nwnpRG~h4h=EKh1=%GCkMJm)x1z1YnLXc z;xQsx)QxEQY?cal$hQ{*ExIAwKxcT}RBp287I()I*uzArY}t60M;sGwnXgheILw)JxNxkSIEIA(Gfl%SzWHc6B1!|@T# zC4{Z9a7Hv4nz${z`haI=TnpjX{k8D=beC*1!=0-eq7k#%fNiV6cCgZjH^RoEO^Fl~ zDU}B{axTb^p9ZWySmZBSaP`KCFq`u~VxCfeADyiY_*+x6FO=UTnm!L7(fbINv(NF>aZ7EWS zC;~)flztmyt5hmL2aMO1Y6(pZS5D!7o|f*(rj}q8s)l>gtuau36Srxi0bIi+f$hAe zH3I}KP$)!_0(`4PQjW&90Bc8h!H@m=l-PCkwR&2`KdAR*tDcrhU9-*17|@#7h7LrI z=0)8QEl0x**v^$k0SH72g*5INi(KDq_JHeFg`YR-Mt~~U*A;M6yzh2@wtML|Gpz4R z$C~~z!Aptk{&F<#l8o)-fG#Ejffbxs3WQ7)cvx!jR;pHcyp_~a7=H5brHan^fOvyI z1-AeE^A58ZkIWmwjj)|;*)-9b!wuQak03=Zt`>-7c!WVDyF8qY>-Jg&({bXw%5JNqRPm6Z+78+GoGTavwIch4RP+JC;B;-1hb1 z7Ow#p2NRhI9(Xa`wsdUTnUcO)muwwYTq9>PLxa~oF9ErHo^YiB30t2JE z8Q6Y+b;mZ-fi20mQcQ!n-hhF6{8in&v z-EbBZ-y5)QW^DZE#q)`SWSZfn(+a(h;!FC_Jiaz$PzSuw3Z?#E-TA$=kwtO*L81|q zh8SFsytI<2Gom6PPDElHvS_EXQrqe5Les9@^`#+ONpW3D^hy8lJ?GrtcQV!&nd^vu zz=!YmoO{mwaq>s;Y|N93@`pT)rh9Jr_jP=Yf?tRJ_abOzB7E?`K7}St=|N=n`@r^_ zTWoR(;9UR|T>yY@i13v|5aGq^h;Eew;+`oWka?sU=+<{bw`?lW*k)!X2|kYs=!4QR zU~j=XicUI`!0`LEj%QT3tz0bI?8|IbQr6#1ZCrKmWlCFoL0hBKbn5{eDm6wW1G!c0`xtu5t8lii>D5(r|F2J8%73-ty4Kk=fiZg_#W8)ae%F2q!Q~E z*L9nt9ZEXECOwJArW_3KWAyv4-;-`n<;ho%=y4vywlX3xzU?ELQKs7-m#rsiO0Vt_ z8lH!Y$5&6cXa38-KlvWTR=bvHY7;pyJlT_MC|Vsa(2Pc(PM*+{kJwYN!);;8c!APo zdZ?qBY~rZ2$2F^aNt&kkj_M1bxx=9L)+jkR)%uAr;Y|w@u z#9J~N;rq8A#j{n+a5L_e;F;;9Z6-?d(hOZHfueeVdt%TM4bn7u^X2Q;qtnyk*(!N# z;yL%ySS$lpxbX`!Ju)Nit6-m(^xwUG+v;|YPCq!zCVxP166|Z0iDpSg77`gYuyMNc zZhLiWtK|&a;?LNY$Fl5d8D{CE&`ccalW7!G>nruKe;A9u|O&~+nlqJs#XRGA0X}@|iNdi8j zgm*aDvxZ?r+eDE4>rEdu(_|~0Z8lf88C|zpt#(a)T%hKZ?8RZ4C1YqzHmBI;^VzB^ zBYMg$RNHGqpfv^;Su#zw^Z$xxt5|7rnr_t_@lqXwEkHXeGJ&Sc25duT*dEXg;g(Nm zlLW~+cu}6*7<-$(Z>z>-bAc_>y;-F)AA483{DgCJ-~&4j1|(VnS>HlaZ0D}Al`~7X zVB4rodf3&VXhar9$2u9Hu~nO)Im1@b(`2Tc6jLUb{_d^swm-*=j0GAkX$(yz5@E?_ z#P(wOWS5B+hjC+*M9ajQF5CCw*(#NX*h+F1@5b^~C`3EvWM-_fV0(sawaa@D4as7! zX_KuA*#w#+Y>SGmT+WorlI`X;COe88V&;)7+wi%tRafp+r1>VA@*_v%mUNNLv?Q@r zCwF1QBdzJ%Y|M~6*pww5W1GIdm6ooBANgvXm8~V0HWhA#vdvCqvxKXbR%8;vCJq1c z9Z9me!d5XoId8su#!vZit!b#{8(D5p5G9!>;hx;6FHZOdqEWd3(ew*{N6dY^jiun>Zc4?E?_MCm4LEtN?q z+O&B4QM_&oc5iweH|QYrA_hkuA3&NEiBiRzwP;hcY4L`hJpbmJC+8L>DWM@7IP#d{ oZPQoOV literal 0 HcmV?d00001 diff --git a/themes/f5de8fbe-1d14-4e73-a806-cecc8e2c6af7/readme.md b/themes/f5de8fbe-1d14-4e73-a806-cecc8e2c6af7/readme.md new file mode 100644 index 00000000..13237fa9 --- /dev/null +++ b/themes/f5de8fbe-1d14-4e73-a806-cecc8e2c6af7/readme.md @@ -0,0 +1,10 @@ + +# Compact Sidebar Micro-Animation + +Enhance the user experience of the [Zen Browser](https://zen-browser.app/) with a refined animation for the sidebar in compact mode. This mod introduces smooth, visually pleasing reveal and fadeout effects for the sidebar when hovered over. + +--- + +Thumbnail + +![image](https://github.com/Nimit1705/Zen-sidebar-animation/blob/main/sidebar-animation-thumbnail.png?raw=tr \ No newline at end of file diff --git a/themes/f5de8fbe-1d14-4e73-a806-cecc8e2c6af7/theme.json b/themes/f5de8fbe-1d14-4e73-a806-cecc8e2c6af7/theme.json new file mode 100644 index 00000000..149ab0aa --- /dev/null +++ b/themes/f5de8fbe-1d14-4e73-a806-cecc8e2c6af7/theme.json @@ -0,0 +1,14 @@ +{ + "id": "f5de8fbe-1d14-4e73-a806-cecc8e2c6af7", + "name": "Sidebar animation", + "description": "Refines Zen's compact sidebar with smooth reveal and fadeout animation on hover.", + "homepage": "https://github.com/Nimit1705/Zen-sidebar-animation", + "style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/f5de8fbe-1d14-4e73-a806-cecc8e2c6af7/chrome.css", + "readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/f5de8fbe-1d14-4e73-a806-cecc8e2c6af7/readme.md", + "image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/f5de8fbe-1d14-4e73-a806-cecc8e2c6af7/image.png", + "author": "Nimit1705", + "version": "1.0.0", + "tags": [], + "createdAt": "2025-01-02", + "updatedAt": "2025-01-02" +} \ No newline at end of file