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: * {
michael@0:   margin: 0;
michael@0:   padding: 0;
michael@0:   box-sizing: border-box;
michael@0:   font-family: Lucida Grande, Helvetica, Helvetica Neue, sans-serif;
michael@0: }
michael@0: 
michael@0: #tabs {
michael@0:   box-shadow: inset -4px 0 0 rgba(0,0,0,0.3);
michael@0:   background: #252C33;
michael@0: }
michael@0: 
michael@0: #toolbox-tabs {
michael@0:   overflow-y: auto;
michael@0: }
michael@0: 
michael@0: .button {
michael@0:   width: 80px;
michael@0:   height: 85px;
michael@0:   padding-bottom: 5px;
michael@0:   -moz-appearance: none;
michael@0:   border: none;
michael@0:   border-bottom: 1px solid #121214;
michael@0:   background-color: transparent;
michael@0:   color: #B5B8BB;
michael@0:   cursor: pointer;
michael@0:   text-align: center;
michael@0:   -moz-box-align: end;
michael@0:   font-size: 10px;
michael@0:   text-shadow: 0 1px 0 #333;
michael@0:   color: #9FA6AD;
michael@0: }
michael@0: 
michael@0: .button:first-child {
michael@0:   border-top: none;
michael@0: }
michael@0: 
michael@0: .button[selected] {
michael@0:   box-shadow: inset -4px 0 0 rgba(0,0,0,0.3), inset 2px 0 0 #DEFFFF, inset 3px 0 0 #8DC7E8, inset 4px 0 1px #1D6496;
michael@0:   color: #DCE8F3;
michael@0:   background-color: #1A4766;
michael@0:   border-color: #191B1E;
michael@0: }
michael@0: 
michael@0: .button::-moz-focus-inner {
michael@0:   border-width: 0;
michael@0: }
michael@0: 
michael@0: .panel {
michael@0:   border-width: 0;
michael@0: }
michael@0: 
michael@0: .panel:not([selected="true"]) {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: .button.toolbox {
michael@0:   background-repeat: no-repeat;
michael@0:   background-position: center 15px;
michael@0:   background-size: 40px 40px;
michael@0: }
michael@0: 
michael@0: .projects-button {
michael@0:   background: url('chrome://browser/skin/devtools/app-manager/index-icons.svg') no-repeat;
michael@0:   background-position: left -5px;
michael@0: }
michael@0: 
michael@0: .projects-button[selected] {
michael@0:   background-position: right -5px;
michael@0: }
michael@0: 
michael@0: .device-button {
michael@0:   background-image: url('chrome://browser/skin/devtools/app-manager/index-icons.svg');
michael@0:   background-position: left -85px, top left;
michael@0:   background-repeat: no-repeat, no-repeat;
michael@0:   background-size: 160px 240px, 2px 80px;
michael@0: }
michael@0: 
michael@0: .device-button[selected] {
michael@0:   background-position: right -85px, top left;
michael@0: }
michael@0: 
michael@0: .help-button {
michael@0:   border-bottom: 0;
michael@0:   background-image: url('chrome://browser/skin/devtools/app-manager/index-icons.svg');
michael@0:   background-position: left -165px, top left;
michael@0:   background-repeat: no-repeat, no-repeat;
michael@0:   background-size: 160px 240px, 2px 80px;
michael@0: }
michael@0: 
michael@0: .help-button[selected] {
michael@0:   background-position: right -165px, top left;
michael@0: }
michael@0: 
michael@0: #connection-footer {
michael@0:   border-width: 0;
michael@0:   height: 50px;
michael@0:   min-height: 50px;
michael@0: }