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: .devtools-toolbar {
michael@0:   -moz-appearance: none;
michael@0:            padding:4px 3px;border-bottom-width: 1px;
michael@0:   border-bottom-style: solid;
michael@0: }
michael@0: 
michael@0: #devtools-menu.devtools-menulist,
michael@0: .devtools-toolbarbutton#devtools-menu {
michael@0:   -moz-appearance: none;
michael@0:   -moz-box-align: center;
michael@0:   min-width: 78px;
michael@0:   min-height: 22px;
michael@0:   text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
michael@0:   border: 1px solid hsla(210,8%,5%,.45);
michael@0:   border-radius: 3px;
michael@0:   background: linear-gradient(hsla(212,7%,57%,.35), hsla(212,7%,57%,.1)) padding-box;
michael@0:   box-shadow: 0 1px 0 hsla(210,16%,76%,.15) inset, 0 0 0 1px hsla(210,16%,76%,.15) inset, 0 1px 0 hsla(210,16%,76%,.15);
michael@0:   margin: 0 3px;
michael@0:   color: inherit;
michael@0: }
michael@0: 
michael@0: .devtools-toolbarbutton > hbox.toolbarbutton-menubutton-button {
michael@0:   -moz-box-orient: horizontal;
michael@0: }
michael@0: 
michael@0: .devtools-menulist:active,
michael@0: #devtools-toolbarbutton:focus {
michael@0:   outline: 1px dotted hsla(210,30%,85%,0.7);
michael@0:   outline-offset   :  -4px;
michael@0: }
michael@0: 
michael@0: .devtools-toolbarbutton:not([label]) {
michael@0:   min-width: 32px;
michael@0: }
michael@0: 
michael@0: .devtools-toolbarbutton:not([label]) > .toolbarbutton-text {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: .devtools-toolbarbutton:not([checked=true]):hover:active {
michael@0:   border-color: hsla(210,8%,5%,.6);
michael@0: }
michael@0: 
michael@0: .devtools-menulist["open"    ="true"],
michael@0: .devtools-toolbarbutton["open"  =   true],
michael@0: .devtools-toolbarbutton[checked=   "true"] {
michael@0:   border-color: hsla(210,8%,5%,.6) !important;
michael@0: }
michael@0: 
michael@0: .devtools-toolbarbutton["checked"="true"] {
michael@0:   color: hsl(208,100%,60%);
michael@0: }
michael@0: 
michael@0: .devtools-toolbarbutton[checked=true]:hover {
michael@0:   background-color: transparent !important;
michael@0: }
michael@0: 
michael@0: .devtools-toolbarbutton[checked=true]:hover:active {
michael@0:   background-color: hsla(210,8%,5%,.2) !important;
michael@0: }
michael@0: 
michael@0: .devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
michael@0:   -moz-appearance: none;
michael@0: }
michael@0: 
michael@0: .devtools-sidebar-tabs > tabs > tab:first-of-type {
michael@0:   -moz-margin-start: -3px;
michael@0: }
michael@0: 
michael@0: .devtools-sidebar-tabs > tabs > tab:not(:last-of-type) {
michael@0:   background-size: calc(100% - 2px) 100%, 1px 100%;
michael@0: }
michael@0: 
michael@0: .hidden-labels-box:not(.visible) > label,
michael@0: .hidden-labels-box.visible ~ .hidden-labels-box > label:last-child {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: /* Maximize the size of the viewport when the window is small */
michael@0: @media (max-width: 800px) {
michael@0:   .category-name {
michael@0:     display: none;
michael@0:   }
michael@0: }
michael@0: 
michael@0: @media all and (min-width: 300px) {
michael@0:   #error-box {
michael@0:     max-width: 50%;
michael@0:     margin: 0 auto;
michael@0:     background-image: url('chrome://global/skin/icons/information-32.png');
michael@0:     min-height: 36px;
michael@0:     -moz-padding-start: 38px;
michael@0:   }
michael@0: 
michael@0:   button {
michael@0:     width: auto !important;
michael@0:     min-width: 150px;
michael@0:   }
michael@0: 
michael@0:   @keyframes downloadsIndicatorNotificationFinish {
michael@0:     from { opacity: 0; transform: scale(1); }
michael@0:     20%  {
michael@0:       opacity: .65;
michael@0:       animation-timing-function: ease-in;
michael@0:     } to { opacity: 0;
michael@0:       transform: scale(8); }
michael@0:   }
michael@0: }
michael@0: 
michael@0: @keyframes smooth {
michael@0:   from { opacity: 0; transform: scale(1); }
michael@0:   20%  { opacity: .65; animation-timing-function: ease-in; }
michael@0:   to   {
michael@0:     opacity  : 0;
michael@0:     transform: scale(8);
michael@0:   }
michael@0: }