The new mail icon is too obtrusive

[Impagliazzo]

I don't see the necessity for a large light grey box around the mail icon next to the minimize, maximize, close buttons.

Just the mail icon alone would suffice.

What do you guys say?

[Victorspain]

In the file "steamrootdialog.layout" in the "Steam\resource\layout" folder, edit this part

inbox_button
{
font-family=basefont
font-size=14
font-weight=1000
font-style=none
textcolor=white
padding-left=2
padding-right=10
padding-top=6

inset="-8 -3 8 0"
render {}
render_bg {
0="fill( x0, y0, x1, y1+1, inbox_inactive )"
1="image( x1-20, y0+6, x1, y1, graphics/inbox_notification )"
2="image( x0, y0, x0, y1, graphics/flag_inactive_left )"
3="image( x1, y0, x1, y1, graphics/flag_inactive_right )"
4="image_scale( x0+3, y0, x1, y0+3, graphics/flag_inactive_top )"
5="image_scale( x0+3, y1, x1, y1+3, graphics/flag_inactive_bottom )"
}
}

To this

inbox_button
{
font-family=basefont
font-size=14
font-weight=1000
font-style=none
textcolor=white
padding-left=2
padding-right=10
padding-top=6

inset="-8 -3 8 0"
render {}
}

To only show the icon if you hover over it.

Or remove this all

inbox_button
{
font-family=basefont
font-size=14
font-weight=1000
font-style=none
textcolor=white
padding-left=2
padding-right=10
padding-top=6

inset="-8 -3 8 0"
render {}
render_bg {
0="fill( x0, y0, x1, y1+1, inbox_inactive )"
1="image( x1-20, y0+6, x1, y1, graphics/inbox_notification )"
2="image( x0, y0, x0, y1, graphics/flag_inactive_left )"
3="image( x1, y0, x1, y1, graphics/flag_inactive_right )"
4="image_scale( x0+3, y0, x1, y0+3, graphics/flag_inactive_top )"
5="image_scale( x0+3, y1, x1, y1+3, graphics/flag_inactive_bottom )"
}
}

inbox_button:hover
{
render_bg {
0="gradient( x0, y0, x1, y1+1, inbox_inactive_hover1, inbox_inactive_hover2 )"
1="image( x1-20, y0+6, x1, y1, graphics/inbox_notification )"
2="image( x0, y0, x0, y1, graphics/flag_inactive_left_hover )"
3="image( x1, y0, x1, y1, graphics/flag_inactive_right_hover )"
4="image_scale( x0+3, y0, x1, y0+3, graphics/flag_inactive_top_hover )"
5="image_scale( x0+3, y1, x1, y1+3, graphics/flag_inactive_bottom_hover )"
}
}

inbox_button:selected
{
render_bg {
0="gradient( x0, y0, x1, y1, inbox_inactive_hover1, inbox_inactive_hover2 )"
1="image( x1-20, y0+6, x1, y1, graphics/inbox_notification )"
2="image( x0, y0, x0, y1, graphics/flag_inactive_left_hover )"
3="image( x1, y0, x1, y1, graphics/flag_inactive_right_hover )"
4="image_scale( x0+3, y0, x1, y0+3, graphics/flag_inactive_top_hover )"
5="image_scale( x0+3, y1, x1, y1+3, graphics/flag_inactive_bottom_hover )"
}
}

To make the button to only show up when you have new notifications.

Or change this

inbox_button
{
font-family=basefont
font-size=14
font-weight=1000
font-style=none
textcolor=white
padding-left=2
padding-right=10
padding-top=6

inset="-8 -3 8 0"
render {}
render_bg {
0="fill( x0, y0, x1, y1+1, inbox_inactive )"
1="image( x1-20, y0+6, x1, y1, graphics/inbox_notification )"
2="image( x0, y0, x0, y1, graphics/flag_inactive_left )"
3="image( x1, y0, x1, y1, graphics/flag_inactive_right )"
4="image_scale( x0+3, y0, x1, y0+3, graphics/flag_inactive_top )"
5="image_scale( x0+3, y1, x1, y1+3, graphics/flag_inactive_bottom )"
}
}

inbox_button:hover
{
render_bg {
0="gradient( x0, y0, x1, y1+1, inbox_inactive_hover1, inbox_inactive_hover2 )"
1="image( x1-20, y0+6, x1, y1, graphics/inbox_notification )"
2="image( x0, y0, x0, y1, graphics/flag_inactive_left_hover )"
3="image( x1, y0, x1, y1, graphics/flag_inactive_right_hover )"
4="image_scale( x0+3, y0, x1, y0+3, graphics/flag_inactive_top_hover )"
5="image_scale( x0+3, y1, x1, y1+3, graphics/flag_inactive_bottom_hover )"
}
}

inbox_button:selected
{
render_bg {
0="gradient( x0, y0, x1, y1, inbox_inactive_hover1, inbox_inactive_hover2 )"
1="image( x1-20, y0+6, x1, y1, graphics/inbox_notification )"
2="image( x0, y0, x0, y1, graphics/flag_inactive_left_hover )"
3="image( x1, y0, x1, y1, graphics/flag_inactive_right_hover )"
4="image_scale( x0+3, y0, x1, y0+3, graphics/flag_inactive_top_hover )"
5="image_scale( x0+3, y1, x1, y1+3, graphics/flag_inactive_bottom_hover )"
}
}

into this

inbox_button
{
font-family=basefont
font-size=14
font-weight=1000
font-style=none
textcolor=white
padding-left=2
padding-right=10
padding-top=6

inset="-8 -3 8 0"
render {}
render_bg {
1="image( x1-20, y0+6, x1, y1, graphics/inbox_notification )"
}
}

inbox_button:hover
{
render_bg {
1="image( x1-20, y0+6, x1, y1, graphics/inbox_notification )"
}
}

inbox_button:selected
{
render_bg {
1="image( x1-20, y0+6, x1, y1, graphics/inbox_notification )"
}
}

To make the background of the button disappear, so only the little mail icon appears, like you can view here: http://img580.imageshack.us/img580/2615/steamxj.png

P.S.: +rep appreciated