Set color of AppBarCommand?and gap?

Question

How to set icon color of AppBarCommand , I can set font color.

<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{icon:'contact', label:'登陆'}" style="color: #fff;"></button>

And how to set the interval between them? Or set their size?

Answer 1

Set the border-color also:

/* CSS - Appbar style */
.win-appbar {
    background-color: #7C007C;
    color: #FFFFFF;
}
.win-appbar .win-label,
.win-appbar .win-commandimage, 
.win-appbar button:hover:active .win-commandring,
.win-appbar button:hover .win-commandring,
.win-appbar .win-commandring {
    color: #FFFFFF;
    border-color: #FFFFFF;
} 

 

---

Bob Bao [MSFT]
MSDN Community Support | Feedback to us

Answer 2

change
    .win-appbar button {
        margin-left: -20px;     /* or margin-right */   
    }

to decrease their interval.

---

Bob Bao [MSFT]
MSDN Community Support | Feedback to us

Answer 3

Set the border-color also:

/* CSS - Appbar style */
.win-appbar {
    background-color: #7C007C;
    color: #FFFFFF;
}
.win-appbar .win-label,
.win-appbar .win-commandimage, 
.win-appbar button:hover:active .win-commandring,
.win-appbar button:hover .win-commandring,
.win-appbar .win-commandring {
    color: #FFFFFF;
    border-color: #FFFFFF;
} 

 

---

Bob Bao [MSFT]
MSDN Community Support | Feedback to us

Also, if your style choices mean the 0.13 alpha on the hover for the ring isn't strong enough anymore, then the rule to change it is

button:hover .win-commandring { background-color: red; }

Obviously, specifically red is probably a bad choice, but it makes it easy to confirm that it's working.  I use the color rgba(255,255,255, 0.25) when I need a stronger hover.