michael@0: /* This Source Code Form is subject to the terms of the Mozilla Public
michael@0:  * License, v. 2.0. If a copy of the MPL was not distributed with this
michael@0:  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
michael@0: 
michael@0: %include listbox.css
michael@0: %filter substitution
michael@0: %define selectedBorderColor rgb(217,217,217)
michael@0: %define hoverAndFocusBorderColor rgb(125,162,206)
michael@0: %define selectedFocusBorderColor rgb(132,172,221)
michael@0: %define selectedGradientColor1 rgba(190,190,190,.1)
michael@0: %define selectedGradientColor2 rgba(190,190,190,.4)
michael@0: %define selectedFocusGradientColor1 rgba(131,183,249,.16)
michael@0: %define selectedFocusGradientColor2 rgba(131,183,249,.375)
michael@0: 
michael@0: @media (-moz-windows-default-theme) {
michael@0:   listitem {
michael@0:     color: -moz-FieldText;
michael@0:     -moz-margin-start: 1px;
michael@0:     -moz-margin-end: 1px;
michael@0:     padding-top: 1px;
michael@0:     padding-bottom: 1px;
michael@0:     border-width: 1px;
michael@0:     border-radius: 3px;
michael@0:     background-repeat: no-repeat;
michael@0:     background-size: 100% 100%;
michael@0:     box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), inset 0 -1px 0 1px rgba(255,255,255,.2);
michael@0:   }
michael@0: 
michael@0:   listitem[selected="true"] {
michael@0:     border-color: @selectedBorderColor@;
michael@0:     background-image: linear-gradient(@selectedGradientColor1@, @selectedGradientColor2@);
michael@0:     background-color: rgba(190,190,190,.15);
michael@0:     color: -moz-DialogText;
michael@0:   }
michael@0: 
michael@0:   listbox:focus > listitem[selected="true"] {
michael@0:     border-color: @selectedFocusBorderColor@;
michael@0:     background-image: linear-gradient(@selectedFocusGradientColor1@, @selectedFocusGradientColor2@);
michael@0:     background-color: rgba(131,183,249,.02);
michael@0:     color: -moz-DialogText;
michael@0:   }
michael@0: 
michael@0:   listbox:focus > listitem[current="true"] {
michael@0:     border-color: @hoverAndFocusBorderColor@;
michael@0:     outline: none;
michael@0:   }
michael@0: 
michael@0:   listbox:focus > listitem[selected="true"][current="true"] {
michael@0:     background-color: rgba(131,183,249,.15);
michael@0:     outline: none;
michael@0:   }
michael@0: 
michael@0:   @media (-moz-os-version: windows-win8) {
michael@0:     listitem {
michael@0:       border-radius: 0;
michael@0:       box-shadow: none;
michael@0:     }
michael@0: 
michael@0:     listitem[selected="true"] {
michael@0:       background-image: linear-gradient(@selectedGradientColor2@, @selectedGradientColor2@);
michael@0:     }
michael@0: 
michael@0:     listbox:focus > listitem[selected="true"] {
michael@0:       background-image: linear-gradient(@selectedFocusGradientColor2@, @selectedFocusGradientColor2@);
michael@0:     }
michael@0:   }
michael@0: }