From aeb78030171d1076ef5e523f1021dffa0ecd368a Mon Sep 17 00:00:00 2001 From: neufke Date: Tue, 4 Feb 2014 20:29:28 +0100 Subject: [PATCH] [ticket/12155] CSS-ing of the mini post buttons Created a css version of the mini post buttons with the use of language vars and no fixed width of height. PHPBB3-12155 --- .../prosilver/template/overall_header.html | 6 +- .../prosilver/template/viewtopic_body.html | 6 +- phpBB/styles/prosilver/theme/buttons.css | 195 +++++++++++++++--- .../styles/prosilver/theme/en/stylesheet.css | 5 - .../prosilver/theme/images/mini-buttons.png | Bin 0 -> 2804 bytes 5 files changed, 173 insertions(+), 39 deletions(-) create mode 100644 phpBB/styles/prosilver/theme/images/mini-buttons.png diff --git a/phpBB/styles/prosilver/template/overall_header.html b/phpBB/styles/prosilver/template/overall_header.html index 8c63ce9cea..2e4f6ce025 100644 --- a/phpBB/styles/prosilver/template/overall_header.html +++ b/phpBB/styles/prosilver/template/overall_header.html @@ -30,8 +30,10 @@ --> - - + + + + diff --git a/phpBB/styles/prosilver/template/viewtopic_body.html b/phpBB/styles/prosilver/template/viewtopic_body.html index 18fa7ce783..cdeb14170a 100644 --- a/phpBB/styles/prosilver/template/viewtopic_body.html +++ b/phpBB/styles/prosilver/template/viewtopic_body.html @@ -199,12 +199,12 @@ diff --git a/phpBB/styles/prosilver/theme/buttons.css b/phpBB/styles/prosilver/theme/buttons.css index 9ca04516cc..3df604394c 100644 --- a/phpBB/styles/prosilver/theme/buttons.css +++ b/phpBB/styles/prosilver/theme/buttons.css @@ -118,22 +118,22 @@ ul.linklist.bulletin li.small-icon:before { display: none; } -/* Poster profile icons +/* Poster contact icons ----------------------------------------*/ -ul.profile-icons { +ul.contact-icons { padding-top: 10px; list-style: none; } /* Rollover state */ -ul.profile-icons li { +ul.contact-icons li { float: left; margin: 0 6px 3px 0; background-position: 0 100%; } /* Rolloff state */ -ul.profile-icons li a { +ul.contact-icons li a { display: block; width: 100%; height: 100%; @@ -141,26 +141,26 @@ ul.profile-icons li a { } /* Hide text and hide off-state image when rolling over (prevents flicker in IE) */ -ul.profile-icons li span { display:none; } -ul.profile-icons li a:hover { background: none; } +ul.contact-icons li span { display:none; } +ul.contact-icons li a:hover { background: none; } /* Positioning of moderator icons */ -.postbody ul.profile-icons { +.postbody ul.contact-icons { float: right; width: auto; padding: 0; } -.postbody ul.profile-icons li { +.postbody ul.contact-icons li { margin: 0 3px; } /* Responsive icons in postbody */ -.postbody ul.profile-icons.responsive .responsive-menu { +.postbody ul.contact-icons.responsive .responsive-menu { position: relative; } -ul.profile-icons.responsive a.responsive-menu-link { +ul.contact-icons.responsive a.responsive-menu-link { display: inline-block; position: relative; margin: 0 5px; @@ -170,11 +170,11 @@ ul.profile-icons.responsive a.responsive-menu-link { background: none top left no-repeat; } -ul.profile-icons.responsive a.responsive-menu-link:hover { +ul.contact-icons.responsive a.responsive-menu-link:hover { background-position: 0 -20px; } -ul.profile-icons.responsive a.responsive-menu-link:before { +ul.contact-icons.responsive a.responsive-menu-link:before { content: ''; position: absolute; left: 0; @@ -185,13 +185,13 @@ ul.profile-icons.responsive a.responsive-menu-link:before { border-top: 0.375em double transparent; } -.postbody ul.profile-icons.responsive .popup-pointer { +.postbody ul.contact-icons.responsive .popup-pointer { left: auto; right: 7px; top: 20px; } -.postbody ul.profile-icons .dropdown li, .postbody ul.profile-icons .dropdown li a { +.postbody ul.contact-icons .dropdown li, .postbody ul.contact-icons .dropdown li a { display: block; background: transparent none; width: auto; @@ -202,7 +202,7 @@ ul.profile-icons.responsive a.responsive-menu-link:before { list-style-type: none; } -.postbody ul.profile-icons .dropdown li span { +.postbody ul.contact-icons .dropdown li span { display: block; text-align: right; font-size: 1.2em; @@ -210,7 +210,7 @@ ul.profile-icons.responsive a.responsive-menu-link:before { white-space: nowrap; } -.hasjs .postbody ul.profile-icons { +.hasjs .postbody ul.contact-icons { max-width: 40%; } @@ -271,19 +271,6 @@ ul.profile-icons.responsive a.responsive-menu-link:before { .info-icon, .info-icon a { background: none top left no-repeat; } /* Set profile icon dimensions */ -ul.profile-icons li.email-icon { width: 20px; height: 20px; } -ul.profile-icons li.phpbb_aol-icon { width: 20px; height: 20px; } -ul.profile-icons li.aim-icon { width: 20px; height: 20px; } -ul.profile-icons li.yahoo-icon { width: 20px; height: 20px; } -ul.profile-icons li.phpbb_yahoo-icon { width: 20px; height: 20px; } -ul.profile-icons li.web-icon { width: 20px; height: 20px; } -ul.profile-icons li.phpbb_website-icon { width: 20px; height: 20px; } -ul.profile-icons li.msnm-icon { width: 20px; height: 20px; } -ul.profile-icons li.phpbb_wlm-icon { width: 20px; height: 20px; } -ul.profile-icons li.icq-icon { width: 20px; height: 20px; } -ul.profile-icons li.phpbb_icq-icon { width: 20px; height: 20px; } -ul.profile-icons li.jabber-icon { width: 20px; height: 20px; } -ul.profile-icons li.pm-icon { width: 28px; height: 20px; } ul.profile-icons li.quote-icon { width: 54px; height: 20px; } ul.profile-icons li.report-icon { width: 20px; height: 20px; } ul.profile-icons li.edit-icon { width: 42px; height: 20px; } @@ -297,3 +284,153 @@ ul.profile-icons li.edit-icon { margin: 0 0 0 3px; } ul.profile-icons li.quote-icon { margin: 0 0 0 10px; } ul.profile-icons li.info-icon, ul.profile-icons li.report-icon { margin: 0 3px 0 0; } +/* mini profile buttons +--------------------------------------------- */ +ul.profile-icons { + float: right; + list-style: none; + width: auto; + height: auto; + margin-top: 2px; +} + +ul.profile-icons li { + float: left; + margin: 0 5px 0 0; +} + +ul.profile-icons li a { + font-weight: bold; + display: inline-block; + font-family: 'Noto Sans', sans-serif, Verdana, Arial, Helvetica; + font-size: 9px; + line-height: 10px; + height: 12px; + text-decoration: none !important; + outline-style: none !important; + vertical-align: bottom; + white-space: nowrap; + border: 1px solid transparent; + border-radius: 3px; + background: transparent none 0 0 repeat-x; + padding: 3px 5px 1px 8px; + position: relative; + border-color: #858585; + background: #e3e3e3; + /*background: url(data:image/svg+xml; base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlM2UzZTMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);*/ + background: -moz-linear-gradient(top, #ffffff 0%, #e3e3e3 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e3e3e3)); + background: -webkit-linear-gradient(top, #ffffff 0%,#e3e3e3 100%); + background: -o-linear-gradient(top, #ffffff 0%,#e3e3e3 100%); + background: -ms-linear-gradient(top, #ffffff 0%,#e3e3e3 100%); + background: linear-gradient(to bottom, #ffffff 0%,#e3e3e3 100%); + -m-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e3e3e3',GradientType=0 ); + box-shadow: 0 0 0 1px #FFFFFF inset; + -webkit-box-shadow: 0 0 0 1px #FFFFFF inset; + color: #BC2A4D !important; +} + +ul.profile-icons li a:hover { + border-color: #0a8ed0; + background: #ffffff; + /*background: url(data:image/svg+xml; base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iI2UzZTNlMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);*/ + background: -moz-linear-gradient(top, #e3e3e3 1%, #ffffff 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#e3e3e3), color-stop(100%,#ffffff)); + background: -webkit-linear-gradient(top, #e3e3e3 1%,#ffffff 100%); + background: -o-linear-gradient(top, #e3e3e3 1%,#ffffff 100%); + background: -ms-linear-gradient(top, #e3e3e3 1%,#ffffff 100%); + background: linear-gradient(to bottom, #e3e3e3 1%,#ffffff 100%); + -m-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e3e3e3', endColorstr='#ffffff',GradientType=0 ); + text-shadow: 1px 1px 0 #FFFFFF, -1px -1px 0 #FFFFFF, -1px -1px 0 rgba(188, 42, 77, 0.2); + box-shadow: 0 0 0 1px #FFFFFF inset; + -webkit-box-shadow: 0 0 0 1px #FFFFFF inset; + color: #BC2A4D !important; +} + +ul.profile-icons li a:after { + content: ''; + display: block; + position: absolute; + top: 50%; + left: -4px; + width: 12px; + height: 16px; + margin-top: -10px; + background: transparent 0 0 no-repeat; + background-image: url("images/mini-buttons.png"); +} + + /* Mini profile button images */ +ul.profile-icons li.quote-icon a:after { + background-position: 0px 0px; +} + +ul.profile-icons li.quote-icon a:hover:after { + background-position: 0px -21px; +} + +ul.profile-icons li.edit-icon a:after { + background-position: -24px 0; +} + +ul.profile-icons li.edit-icon a:hover:after { + background-position: -24px -21px; +} + +ul.profile-icons li.warn-icon span { + display: none; +} + +ul.profile-icons li.warn-icon a:after { + background-position: -48px 0px; +} + +ul.profile-icons li.warn-icon a:hover:after { + background-position: -48px -21px; +} + +ul.profile-icons li.delete-icon span { + display: none; +} + +ul.profile-icons li.delete-icon a { + width: 12px; + padding: 3px 3px 1px 3px; +} + +ul.profile-icons li.delete-icon a:after { + background-position: -36px 0px; + left: 3px; + margin-top: -6px; +} + +ul.profile-icons li.delete-icon a:hover:after { + background-position: -36px -21px; +} + +ul.profile-icons li.report-icon span { + display: none; +} + +ul.profile-icons li.report-icon a { + width: 12px; + padding: 3px 3px 1px 3px; +} + +ul.profile-icons li.report-icon a:after { + background-position: -48px 0px; + left: 3px; + margin-top: -6px; +} + +ul.profile-icons li.report-icon a:hover:after { + background-position: -48px -21px; +} + +ul.profile-icons li.info-icon a { + padding: 3px 5px 1px 6px; +} + +ul.profile-icons li.info-icon a:after { + background: none; +} diff --git a/phpBB/styles/prosilver/theme/en/stylesheet.css b/phpBB/styles/prosilver/theme/en/stylesheet.css index d8ca2558e5..4ddf271cfd 100644 --- a/phpBB/styles/prosilver/theme/en/stylesheet.css +++ b/phpBB/styles/prosilver/theme/en/stylesheet.css @@ -1,8 +1,3 @@ -/* Set profile icon dimensions */ -ul.profile-icons li.pm-icon { width: 28px; height: 20px; } -ul.profile-icons li.quote-icon { width: 54px; height: 20px; } -ul.profile-icons li.edit-icon { width: 42px; height: 20px; } - /* Online image */ .online { background-image: url("./icon_user_online.gif"); } diff --git a/phpBB/styles/prosilver/theme/images/mini-buttons.png b/phpBB/styles/prosilver/theme/images/mini-buttons.png new file mode 100644 index 0000000000000000000000000000000000000000..1a885e0dccf99b85df6fcf7d3feaca226bb92999 GIT binary patch literal 2804 zcmaJ@dpuO>8z1)xgL0QLMzs~@%3v}yW5#6}hOtPC#>`=+%%z#ZFfL_jQ6aWgbP=^= zf5S>DQ7lQR&`KAf)CgNHxvpDwwAKFp`1N}~=bZO)zTfZjywCHz=W{Zs-fj?e6Lk;> z1o3bu`N?~C`3(iD%AZx=I`QS5v4|WbqVXa`v2+0dA~1R30Mvs+j|BVxIx}wnUBD3p zQi8GlgG50TFC2r%fzwwpa4~0<4FWkji}`fMK0pKw2O`;AJZ!wK0S09=@vuN!3X;Ni z0a$GJcmY6*_x5MR?_)SHVa`raM=?$=zyU;bsF)MQ72?Er*hgKQe7w4hfI&Y(MEmft zf1C=UP@yh70RXjyW2_lS6bg#P!cjK1SS-p4ibkT)2&DYNTBB@mwpbk64*IFVS4)Azms=(Q0(K0*bQSP8(2rZjvA^z%{a5uq zahYHD#o?=5gxnd#YGVH@(Vv&()w4SMQnvERm%<0Q@@f~z%epGoB?$ylV|kDW{^Fi@ zyC7b)Ks_gxZ>r)I^_1}aK8K3S?iVvq;N5M=X3EKnmtKa0p9cTTxu37M zmP1;GCyqfzOf%Yk@>Q8PKIWS|p{C|X0*c^J=i;?P&u>)DMRyEYrsPCDi_fi`o0+a( z99tf980wGxlhkFi)JjS#A|YW$u6^sbq&F%N4pUPnw!588r}_lz?9}2MH~mA+QOTml zY>mIZzW#L9h8?WlSK}q4G?G}I(5Yu&P+m}2Xl`u{dE2%YT~JUUlFW^z$z-zn#>PgW zd*qfmcd!i`<1#SA8Q<4r$75MoMy?IgD7-;Dci{Z_O_cAyKNTXW2|l{sIz`bu^YsQJ z-`d*RKE)2|8CPh!wZax#IUfiz~p4- zzZMpP_1CRoymYJ_q?Q?=70hgwJO^ubC}w>h9Jj!H)HnWgIzT8k0H@ibQET zu*l|4P8%^d%?6n9@i@nXzjXX)wBPUDv&?vnZ}W7cP%lxmJzq17$$_H|Wy`ZVz1X@cl~+|sZ^RDbqKoc(u-^REi^SXCq{QYBZCLNeWWvm zDzO1&n>j}iHFdE)rbqGV=1pB)y5;5N^6%hIeFKAt-*Htzn(giFdyqyuOS=ZXb84)3 z^={&VFL>c>xUFFPOsH$^&SfpJ8=`q2w`Kh)_WM^YzTo&r*`{-cf$s9}pg-SBd$;SM zz){V9AR>Dcjn7A7#vFui4uEQ1-ayZtVruw%DW5oWNOh<3-P-F{u3)bThq6qijx8Q# znP)K#IZqz1s2ASsQ5p?1ba_3Sh(rymoGy)8P&l~8a&mG~79Aa(bMoXG005{|Dkv!_ z2`9Tiob5GbzLG&z*xic4$yT$sPb!C!?6kiz)*d7*K9TM&-Le0batT;lyY;BTIH*fiAhgw?a` zbq%Tzy&r!Ik>viM=a}ug_C^kCa%$>aeZ6UMNs0O9%_@@R?2gw2?7F+VQt^eq4e9>p zMP?^a1b}%Or*vhqcd3g-_D^Qp_2q|Z+q9bY#`A%dp%gQx1f%TT&OJ`_BiegcY?k8G zd{-XMj!c^+bQ{r(hl&~rIX^(v2wEwo$_`+GjtqLoe8n)u|NN$6lf3>9Eo4cIW3M65 zjk#UCuuOs^#ypR-;kFjDIzm&SvOkYTUq(-XDeg@RM;6|A2Y;X|9Nj&MZSS`*=gBU! z`wORQ>djba^S1Wps9BvUhofg_G#5>Khfdz|zfzDRtRA*c44z+$f7<0XWpJzo@Y33- z&AppQOw`ECnflHA7vE&I-vwEqf~{wSWlv#c{~zQF8x{Fym@1{($jEp6B0weF{pZ7Cx3?ET~WN`EklLy^>FOU~{t3BA6F^r3E+GZ0wV@I~r@|zh3 z;B%@`Xoxc+R9pNpt=W`-A$F|2!q2N`sizYd<_zI>Z<%8_U8DZ|_}_zuXaTtQ_?W zWaVKLbiUFmMWwE03)=OjCeA13>ZJ1uxsJTp+1Ytae-zS+09~_~3~`JiOKi;5rSJoR zMV*Ns@|F^e1W4b2l=dI)&@`)aA2(VYEXEIFjQx3O2dlavd(>5avBcjGbM8q!-ie<` z=VkwzadzRG3Oab8%`#?5H@th}1$mv$w?M491V7zu?bY=~#L7>Gd z0d{PzfL&~4CiG~TUW(JQ+}iuJDiwUclz4qB_*CNN1G^<;NqqjK42!t*VUSVJ*R~T> zv?nZY3>xcg#bwe+4e7nfj_qsi4E~;&1j<`a)#_1fN*>rs&B`l$5LvVpr6WVzQImNJ z_oPmz58SX;tD>hFG{3pH^|F49pc4{t&PiO%TKUNyLJPuTCbAR@x3ixvX@oo$8|Ia= zMy`3%?z$PDhArlHX63w)RGsX*!PV{^-cyNr*In}7yUaNu?b)l{I0<{XDnK&(?UGWY zVcijDaa~Y)V`8aW_2Kt7e(Za5_9`p;>QdCD?+~P?wztWPJ~{;s9k(M3_JJdRv{$RS rqNj&Z9(e3~`D!wFLv`_Tn4%`AAtHRVK#Q*_%{B+>`P*X2+we literal 0 HcmV?d00001