From 610bf4186a1406e7aa852681b09c8cb788443e0b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Milo=C5=A1=20Jovanovi=C4=87?= Date: Tue, 10 Mar 2015 14:44:51 -0500 Subject: [PATCH] Fix menu dynamic resize, padding, private icon pixelation --- images/private.png | Bin 2636 -> 813 bytes inc/shaarli.css | 95 ++++++++++++++++++++++++++++----------------- 2 files changed, 59 insertions(+), 36 deletions(-) diff --git a/images/private.png b/images/private.png index 1364b355f3f32832a0a6a02b026cf2ebb453f36f..8919d658c305ba29310253bfc6efd1ac4ee05f4b 100644 GIT binary patch delta 779 zcmV+m1N8jN6s-m!iBL{Q4GJ0x0000DNk~Le0000G0000G2nGNE03Y-JVUZy)f8PTM z7B?7<)YhN?00O#6L_t(I%Z-!oYZ7rB$3OQAcc*uG{+ZWARAUXRy&rzy{rddi^TyyG znwy)W=I7__JkK*2hG8U0PKLwbe{g$y`#S(YI-LgWqA3=OL7`9pQ52a-ByuYp4&P=N zCO}aXu4&qrcDr3El}c~(`TPg~fV>DO6bitytZjLDS&GNwn+ppI5z{nn0B~wq*2wSo zf3hsgL(}w&TrM{zri~s7g|4oxtv!fFqxV~_7O}UtCm$al7Y2iY!{hNpe_Sq?Q`hyc zUa$8vISt@;yRYy(f1PDnp67W*Q53RVF7MDZot;c3&w|0=q9}?XgisNm22d1*8jVJv zY1*mZ@8_e@=uMx`_fXgM8C6xwmSr&*hF$CT`^+BzNs<5n03p;H3sj^765=y6lFreuC6{xrBW$P)AX&at=Fomwogt@-pR7O|Eo#!{K3=dG-NUvAUTf1 zyk0LailTos8VwD@VKA!I>YH}E{ZiNU?%#5f$z%Wker6#M2)JD?*FD292)EmfHJi<9 zyqT z1aD6W05AZc_uqdX9zA-bpFDYDe^W}$dc9VTXO+F;h!)|OkZ*BkYEz1C{AN?PlZQmSm* zHe-xIp68j?I--=OS(d3F2+p58dGZ|q=wAzr?(OYW9mnZ6o6XT+FlaTKe@!0%Jgv1` zE||9<-Er(XkrdfQ-hXJ^MRl}cNUM&t0#ojY6m z`}^Hyv)L$$!qr+kwOY+a2*GN#ij`7pN@);9(bZ%!Sm*73i!t`q#~*+EFL2f` zP2c9`W|dO9Rj=0{4hDn6f5XGWo$c-IKIh!avdq$2vud@<0l-+66)U9@N~ze`*oZji z-xfu2CZ+7=d2RsUfBwa^zW@r?YPGWO`@?p-{a`d29o@fw|Nj2|{!YDK?2$i5Wx1D^m&wV= z$^7NZm#gdR>)B$le>hvMR;NJ_Tm(TNk|aS|YlksbW{f$EF+vDQ@;pznEF+`QC_Fhi zS^pxBd7g)BwOXmwYSn$;Z@I2pvn;EmwFW7r5<=)SP33yM&XiI!gwQc#Y^k+wFPF=s zEX$OXa%*#Q)3a^6*=#lkd7fV?rAip%?uQ?KxPJWj@$%Lle|zt}_bf{3$oKt&Mx(Lg z`+l!nE|)FKLI40-Ya@g(LI{;4$vREbQz_-wLWoycmI*1PV~pV#W5zkRT-UX<*6Tda zr$td*aL%)%qod^3U_yw7>$*eF^LA>r+NjZJv^>vqIOi6nlrY9Dj4{dc+>%lvrBtG| zzEDb?13-u|e`WwsBZQPFrBo?ZBuSDj7K?eBrWcgb3){Bi+osY|N|7{8i4X$vJU3EG zBc(J-DIkQ9N~L1=dOeiqxuvzn#uynzkpKXolm=SsE3NgVlyYEnJ)ju6raA)X}3T1sgbMd74r zDiJ~^ilQt{Qz3*9VHk>c-gzg#HP~b_!2p2sJjaZ&qTOzbD2gQK90?&%nx>HFIbe)| zbB-Oyq3w3NgfaGSBF-(#vTn>zFvbZ0qyP|Gf0h*ifcX6L&+)CzKNt*rV@xm0vaS%q z&-0uMAuvMdO%b4?D2&z`wARRVUE;bfCxmzapc!L?Qi|K{cBN9OaD>p>vaA>YLalX@ zrm1}T^y#e{EFF)>bxP@h>$(pcjmCbz-|x5E?S|tx4#t?=JXr=~Y>Y7=r35J@vTd7q zf1YPkN}*P(af~tXecvX8WMLSFi^XETSS(hn)he0IW;p=-Y>(05aM-jg>z?O%f7saA zcsLvm_YV#ZTI2D!Mk%Ffnj!!&2qDcmH#b56fDuBNF-90;w(GhaV+_WaEC_rBnzZgfRw$kdjg+>-BnZc6K(IOeX&~olZ}KAebx`i}|Zp zuYOj<=x8)*P)hHY%jI`lt=4~x$K$*A?%mty^?Dx080UEoLI{ZC*j!v(T+Qe6e;MaI z_kG{N7?(NcCD(O{F-BpGHO4p*LM+eE&!=Z+XQ!8!m(Sujeij75tJBld_{~K7V_>x1 zZr6=5hpy}XzR_qr9F0ah+uPd>-}iYKh9U@pTq&iEG5GrWI)C}{<>l4Y)whhXMYGwY zuIp9_Aujuy5XQJL#;n6IoK2_Gf9ciL)ypV~o-3tJJpM`MqSsfF~;^i&--1c z(|Ir+kGFPrciWqro33S9`1R}8tCN$HsgyG0oLkG~5~kDX#cVcvPAUCPDWzQ3tpGq3 zA!KvTfiadTrGn*hxt!1Ev(;*KRuskSB$oeEwCd)yk73sf1y;7DD{D*7{`-1WGC83L&almX%AT zlB`rJNl_HZY&H`?5Cl@n#ZCI;PtE+6>$-KvaSnXnf2Z5+J{XV3`-g{z-N9hsODXkw zy-pcptWv31{eE9ZQS>57f0D0~B%yhp$CXOu?29kHi0<6EgZlkGiR0KwlEg{VR5^|l zFBS_TgfPd)#{~e0A6nu5aZADg;MZ!k!)mqq$Kh~zw7SXpP&EdYPI@H9LMKT6eTxRrM~xFe6!$wAL0j>e_rb!09mWmsyU7` z>h*fN2L}gt@7=rC?Q}YoQmMqlFwADN+2Z;0=U-!tSBx=lKA(#q2vihB`8VHu69GW} zZ+@nKY_a`GuxhpH_`dIXp63n*gWC4?cC*{<`nGLTV+U#+b{Ci;FKQrCA)u zG>+p*5Cn@GpP09Ge+YR4rU@a+w(Y7hri>7BY};l^DgFBO>riVA)oPUzLR`){)mne2 zl=>PW1fJ&wySuybC!c)s)}a2${ENjR^nL#V01l6jk4ucPZ#~b;CzFX_jN#4AO&*4! zo=hfWu~;|&kc~#8)n}i5rr=l5_fG_*+wK0zah#8Q-`AF9f6eFfxx^SlyWJ*QYnaVu zS78`_d2w;^4FH61GkrhSF4Xz?`JX$T&I$nf#+Y!qT#7f-B|^vqL9kBK^fdq^zZTSw z9aV6r(`isj>2kTu5kjV1E~7Y(^?JP)0FeFAmFE9Nj~+ex`+E1$M<3x2KKKB`Z~9HQ b(_aB%byD%m51{~I00000NkvXXu0mjfVmBnV diff --git a/inc/shaarli.css b/inc/shaarli.css index a88143c..56e2d8b 100644 --- a/inc/shaarli.css +++ b/inc/shaarli.css @@ -84,21 +84,14 @@ h1 { .linkeditbuttons { position: absolute; - left: -1px; + left: 2px; padding: 4px 2px 2px 2px; - background-color: #f0f0f0; -webkit-border-radius: 0px 6px 6px 0px; -moz-border-radius: 0px 6px 6px 0px; -o-border-radius: 0px 6px 6px 0px; -ms-border-radius: 0px 6px 6px 0px; border-radius: 0px 6px 6px 0px; - - -webkit-box-shadow: 0px 0px 3px 0px #333333; - -moz-box-shadow: 0px 0px 3px 0px #333333; - -o-box-shadow: 0px 0px 3px 0px #333333; - -ms-box-shadow: 0px 0px 3px 0px #333333; - box-shadow: 0px 0px 3px 0px #333333; } #pageheader #logo { @@ -111,26 +104,21 @@ h1 { cursor: pointer; } -#pageheader #linkcount { - float: right; - font-style: italic; - color: #bbb; - text-align: right; - padding-right: 5px; +#pageheader #menu { + width: 100%; } -#pageheader { - background-color: #333333; - background: -webkit-gradient(linear, 0 0, 0 bottom, from(#333333), to(#111111)); - background: -webkit-linear-gradient(#333333, #111111); - background: -moz-linear-gradient(#333333, #111111); - background: -ms-linear-gradient(#333333, #111111); - background: -o-linear-gradient(#333333, #111111); - background: linear-gradient(#333333, #111111); - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); - width: auto; - padding: 0 10px 5px 10px; +#pageheader #menu ul { margin: auto; + padding: 7px 0px 0px 0px; + float: none; +} + +#pageheader #menu ul li { + list-style: none; + display: inline; + position: relative; + box-sizing: border-box; } #pageheader a { @@ -146,8 +134,32 @@ h1 { border-radius: 5px 5px 5px 5px; margin: 10px 3px 3px 3px; color: #A2DD42; - float: left; text-decoration: none; + line-height: 2.5; + white-space: nowrap; +} + +#pageheader #linkcount { + float: right; + font-style: italic; + color: #bbb; + text-align: right; + padding-right: 5px; + margin: 3px 3px 0px 0px; +} + +#pageheader { + background-color: #333333; + background: -webkit-gradient(linear, 0 0, 0 bottom, from(#333333), to(#111111)); + background: -webkit-linear-gradient(#333333, #111111); + background: -moz-linear-gradient(#333333, #111111); + background: -ms-linear-gradient(#333333, #111111); + background: -o-linear-gradient(#333333, #111111); + background: linear-gradient(#333333, #111111); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); + width: auto; + padding: 0 10px 5px 10px; + margin: auto; } #pageheader .search { @@ -291,6 +303,7 @@ h1 { .paging_linksperpage { float: right; padding-right: 5px; + margin: 0px 10px 2px 0px; } .paging_linksperpage form.linksperpage { @@ -388,12 +401,12 @@ a.qrcode img { } #linklist li.private { - background: url('../images/private.png') no-repeat 10px center; - padding-left: 60px; + background: url('../images/private.png') no-repeat 4px center; + padding-left: 30px; } #linklist li { - padding-left: 26px; + padding-left: 30px; } .private .linktitle a { @@ -468,9 +481,9 @@ a.qrcode img { background: -o-linear-gradient(#F2F2F2, #ffffff); background: linear-gradient(#F2F2F2, #ffffff); box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); - padding: 3px 3px 3px 20px; + padding: 3px 5px 3px 20px; height: 20px; - border-radius: 3px 3px 3px 3px; + border-radius: 5px; cursor: pointer; background-image: url('../images/tag_blue.png'); background-repeat: no-repeat; @@ -515,9 +528,10 @@ a.qrcode img { #footer { font-size: 8pt; text-align: center; - border-top: 1px solid #ddd; color: #888; clear: both; + max-width: 30em; + margin: 15px auto 15px auto; } #footer a { @@ -613,7 +627,12 @@ a.qrcode img { .thumbnail { float: right; - margin-left: 10px; + margin: 0px 10px 0px 10px; +} + +.thumbnail img { + border-radius: 5px; + box-shadow: 0.5px 0.5px 0.5px 1px #dde4e6; } /* If you want thumbnails on the left: @@ -938,7 +957,11 @@ div.dailyNoEntry { display: none; } - #pageheader a { + #pageheader #menu ul { + text-align: center; + } + + #pageheader #menu a { padding: 5px; border-radius: 5px 5px 5px 5px; margin: 3px; @@ -946,9 +969,9 @@ div.dailyNoEntry { .searchform, .tagfilter { display: block !important; - margin: 0px !important; + margin: 0px 3px 7px 0px !important; padding: 0px !important; - width: 100% !important; + width: 97% !important; } .searchform input, .tagfilter input {