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: body {
michael@0:   margin: 0;
michael@0:   font-family: "Lucida Grande", sans-serif;
michael@0:   font-size: 11px;
michael@0: }
michael@0: #mainarea {
michael@0:   position: absolute;
michael@0:   top: 0;
michael@0:   left: 0px;
michael@0:   bottom: 0;
michael@0:   right: 0;
michael@0: }
michael@0: .finishedProfilePane,
michael@0: .finishedProfilePaneBackgroundCover,
michael@0: .profileEntryPane,
michael@0: .profileProgressPane {
michael@0:   position: absolute;
michael@0:   top: 0;
michael@0:   left: 0;
michael@0:   bottom: 0;
michael@0:   right: 0;
michael@0: }
michael@0: .profileEntryPane {
michael@0:   overflow: auto;
michael@0: }
michael@0: .profileEntryPane,
michael@0: .profileProgressPane {
michael@0:   padding: 20px;
michael@0:   background-color: rgb(229,229,229);
michael@0:   background-image: url(../images/noise.png),
michael@0:                     linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.2));
michael@0:   text-shadow: rgba(255, 255, 255, 0.4) 0 1px;
michael@0: }
michael@0: .profileEntryPane h1 {
michael@0:   margin-top: 0;
michael@0:   font-size: 13px;
michael@0:   font-weight: normal;
michael@0: }
michael@0: .profileEntryPane input[type="file"] {
michael@0:   margin-bottom: 1em;
michael@0: }
michael@0: .profileProgressPane a {
michael@0:   position: absolute;
michael@0:   top: 30%;
michael@0:   left: 30%;
michael@0:   width: 40%;
michael@0:   height: 16px;
michael@0: }
michael@0: .profileProgressPane progress {
michael@0:   position: absolute;
michael@0:   top: 40%;
michael@0:   left: 30%;
michael@0:   width: 40%;
michael@0:   height: 16px;
michael@0: }
michael@0: .finishedProfilePaneBackgroundCover {
michael@0:   animation: darken 300ms cubic-bezier(0, 0, 1, 0);
michael@0:   background-color: rgba(0, 0, 0, 0.5);
michael@0: }
michael@0: 
michael@0: .finishedProfilePane {
michael@0:   animation: appear 300ms ease-out;
michael@0: }
michael@0: 
michael@0: @keyframes darken {
michael@0:   from {
michael@0:     opacity: 0;
michael@0:   }
michael@0:   to {
michael@0:     opacity: 1;
michael@0:   }
michael@0: }
michael@0: @keyframes appear {
michael@0:   from {
michael@0:     transform: scale(0.3);
michael@0:     opacity: 0;
michael@0:     pointer-events: none;
michael@0:   }
michael@0:   to {
michael@0:     transform: scale(1);
michael@0:     opacity: 1;
michael@0:     pointer-events: auto;
michael@0:   }
michael@0: }
michael@0: .breadcrumbTrail {
michael@0:   top: 0;
michael@0:   right: 0;
michael@0:   height: 29px;
michael@0:   left: 0;
michael@0:   background: linear-gradient(#FFF 50%, #F3F3F3 55%);
michael@0:   border-bottom: 1px solid #CCC;
michael@0:   margin: 0;
michael@0:   padding: 0;
michael@0:   overflow: hidden;
michael@0: }
michael@0: .breadcrumbTrailItem {
michael@0:   background: linear-gradient(#FFF 50%, #F3F3F3 55%);
michael@0:   display: block;
michael@0:   margin: 0;
michael@0:   padding: 0;
michael@0:   float: left;
michael@0:   line-height: 29px;
michael@0:   padding: 0 10px;
michael@0:   font-size: 12px;
michael@0:   -moz-user-select: none;
michael@0:   user-select: none;
michael@0:   cursor: default;
michael@0:   border-right: 1px solid #CCC;
michael@0:   max-width: 250px;
michael@0:   overflow: hidden;
michael@0:   text-overflow: ellipsis;
michael@0:   white-space: nowrap;
michael@0:   position: relative;
michael@0: }
michael@0: @keyframes slide-out {
michael@0:   from {
michael@0:     margin-left: -270px;
michael@0:     opacity: 0;
michael@0:   }
michael@0:   to {
michael@0:     margin-left: 0;
michael@0:     opacity: 1;
michael@0:   }
michael@0: }
michael@0: @keyframes slide-out {
michael@0:   from {
michael@0:     margin-left: -270px;
michael@0:     opacity: 0;
michael@0:   }
michael@0:   to {
michael@0:     margin-left: 0;
michael@0:     opacity: 1;
michael@0:   }
michael@0: }
michael@0: .breadcrumbTrailItem:not(:first-child) {
michael@0:   animation: slide-out;
michael@0:   animation-duration: 400ms;
michael@0:   animation-timing-function: ease-out;
michael@0: }
michael@0: .breadcrumbTrailItem.selected {
michael@0:   background: linear-gradient(#E5E5E5 50%, #DADADA 55%);
michael@0: }
michael@0: .breadcrumbTrailItem:not(.selected):active:hover {
michael@0:   background: linear-gradient(#F2F2F2 50%, #E6E6E6 55%);
michael@0: }
michael@0: .breadcrumbTrailItem.deleted {
michael@0:   transition: 400ms ease-out;
michael@0:   transition-property: opacity, margin-left;
michael@0:   opacity: 0;
michael@0:   margin-left: -270px;
michael@0: }
michael@0: .treeContainer {
michael@0:   /*For asbolute position child*/
michael@0:   position: relative;
michael@0: }
michael@0: .tree {
michael@0:   height: 100%;
michael@0: }
michael@0: #sampleBar {
michael@0:   position: absolute;
michael@0:   float: right;
michael@0:   left: auto;
michael@0:   top: 0;
michael@0:   right: 0;
michael@0:   height: 100%;
michael@0: }
michael@0: #fileList {
michael@0:   position: absolute;
michael@0:   top: 0;
michael@0:   left: 0;
michael@0:   bottom: 360px;
michael@0:   width: 199px;
michael@0:   overflow: auto;
michael@0:   padding: 0;
michael@0:   margin: 0;
michael@0:   background: #DBDFE7;
michael@0:   border-right: 1px solid #BBB;
michael@0:   cursor: pointer;
michael@0: }
michael@0: #infoBar dl {
michael@0:   margin: 0;
michael@0: }
michael@0: #infoBar dt,
michael@0: #infoBar dd {
michael@0:   display: inline;
michael@0: }
michael@0: #infoBar dt {
michael@0:   font-weight: bold;
michael@0: }
michael@0: #infoBar dt::after {
michael@0:   content: " ";
michael@0:   white-space: pre;
michael@0: }
michael@0: #infoBar dd {
michael@0:   margin-left: 0;
michael@0: }
michael@0: #infoBar dd::after {
michael@0:   content: "\a";
michael@0:   white-space:pre;
michael@0: }
michael@0: .sideBar {
michael@0:   box-sizing: border-box;
michael@0:   position: absolute;
michael@0:   left: 0;
michael@0:   bottom: 0;
michael@0:   width: 200px;
michael@0:   height: 480px;
michael@0:   overflow: auto;
michael@0:   padding: 3px;
michael@0:   background: #EEE;
michael@0:   border-top: 1px solid #BBB;
michael@0:   border-right: 1px solid #BBB;
michael@0: }
michael@0: .sideBar h2 {
michael@0:   font-size: 1em;
michael@0:   padding: 1px 3px;
michael@0:   margin: 3px -3px;
michael@0:   background: rgba(255, 255, 255, 0.6);
michael@0:   border: solid #CCC;
michael@0:   border-width: 1px 0;
michael@0: }
michael@0: .sideBar h2:first-child {
michael@0:   margin-top: -4px;
michael@0: }
michael@0: .sideBar ul {
michael@0:   margin: 2px 0;
michael@0:   padding-left: 18px;
michael@0: }
michael@0: .pluginview {
michael@0:   position: absolute;
michael@0:   right: 0;
michael@0:   bottom: 0;
michael@0:   left: 0;
michael@0:   z-index: 1;
michael@0:   background-color: white;
michael@0: }
michael@0: .pluginviewIFrame {
michael@0:   border-style: none;
michael@0:   width: 100%;
michael@0:   height: 100%;
michael@0: }
michael@0: .histogram {
michael@0:   position: relative;
michael@0:   height: 60px;
michael@0:   right: 0;
michael@0:   left: 0;
michael@0:   border-bottom: 1px solid #CCC;
michael@0:   background: linear-gradient(#EEE, #CCC);
michael@0: }
michael@0: .histogramHilite {
michael@0:   position: absolute;
michael@0:   pointer-events: none;
michael@0: }
michael@0: .histogramHilite:not(.collapsed) {
michael@0:   background: rgba(150, 150, 150, 0.5);
michael@0: }
michael@0: .histogramMouseMarker {
michael@0:   position: absolute;
michael@0:   pointer-events: none;
michael@0:   top: 0;
michael@0:   width: 1px;
michael@0:   height: 100%;
michael@0: }
michael@0: .histogramMouseMarker:not(.collapsed) {
michael@0:     background: rgba(0, 0, 150, 0.7);
michael@0: }
michael@0: #iconbox {
michael@0:   display: none;
michael@0: }
michael@0: #filter, #showall {
michael@0:   cursor: pointer;
michael@0: }
michael@0: .markers {
michael@0:   display: none;
michael@0: }
michael@0: .hidden {
michael@0:   display: none !important;
michael@0: }
michael@0: .fileListItem {
michael@0:   display: block;
michael@0:   margin: 0;
michael@0:   padding: 0;
michael@0:   height: 40px;
michael@0:   text-indent: 8px;
michael@0: }
michael@0: .fileListItem.selected {
michael@0:   background: linear-gradient(#4B91D7 1px, #5FA9E4 1px, #5FA9E4 2px, #58A0DE 3px, #2B70C7 39px, #2763B4 39px);
michael@0:   color: #FFF;
michael@0:   text-shadow: 0 1px rgba(0, 0, 0, 0.3);
michael@0: }
michael@0: .fileListItemTitle {
michael@0:   display: block;
michael@0:   padding-top: 6px;
michael@0:   font-size: 12px;
michael@0: }
michael@0: .fileListItemDescription {
michael@0:   display: block;
michael@0:   line-height: 15px;
michael@0:   font-size: 9px;
michael@0: }
michael@0: .busyCover {
michael@0:   position: absolute;
michael@0:   top: 0;
michael@0:   right: 0;
michael@0:   bottom: 0;
michael@0:   left: 0;
michael@0:   visibility: hidden;
michael@0:   opacity: 0;
michael@0:   pointer-events: none;
michael@0:   background: rgba(120, 120, 120, 0.2);
michael@0:   transition: 200ms ease-in-out;
michael@0:   transition-property: visibility, opacity;
michael@0: }
michael@0: .busyCover.busy {
michael@0:   visibility: visible;
michael@0:   opacity: 1;
michael@0: }
michael@0: .busyCover::before {
michael@0:   content: url(../images/throbber.svg);
michael@0:   position: absolute;
michael@0:   top: 50%;
michael@0:   left: 50%;
michael@0:   margin: -12px;
michael@0: }
michael@0: label {
michael@0:   -moz-user-select: none;
michael@0: }
michael@0: .videoPane {
michael@0:   background-color: white;
michael@0:   width: 100%;
michael@0: }
michael@0: .video {
michael@0:   display: block;
michael@0:   margin-left: auto;
michael@0:   margin-right: auto;
michael@0: }