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: /************** LAYOUT **************/
michael@0: 
michael@0: #connection-footer {
michael@0:   display: flex;
michael@0:   flex-direction: column;
michael@0:   height: 50px;
michael@0: }
michael@0: 
michael@0: #banners-and-logs {
michael@0:   display: flex;
michael@0:   flex-grow: 1;
michael@0: }
michael@0: 
michael@0: #logs {
michael@0:   display: flex;
michael@0:   width: 40%;
michael@0:   padding: 0;
michael@0:   width: 100%;
michael@0: }
michael@0: 
michael@0: .banner {
michael@0:   display: none;
michael@0:   width: 60%;
michael@0: }
michael@0: 
michael@0: #connection-footer[status="connected"]     #banner-connected,
michael@0: #connection-footer[status="connecting"]    #banner-connecting,
michael@0: #connection-footer[status="disconnected"]  #banner-disconnected,
michael@0: #connection-footer[status="disconnecting"] #banner-disconnecting {
michael@0:   display: flex;
michael@0: }
michael@0: 
michael@0: body.show-simulators .banner,
michael@0: body.edit-connection .banner {
michael@0:   display: none !important;
michael@0: }
michael@0: 
michael@0: body.show-simulators #banner-simulators,
michael@0: body.edit-connection #banner-editing {
michael@0:   display: flex !important;
michael@0: }
michael@0: 
michael@0: #banner-logs {
michael@0:   width: 40%;
michael@0:   display: flex;
michael@0: }
michael@0: 
michael@0: #logs > pre {
michael@0:   overflow: auto;
michael@0:   white-space: pre-line;
michael@0: }
michael@0: 
michael@0: #status.banner-box {
michael@0:   width: 100% !important;
michael@0: }
michael@0: 
michael@0: .banner-box {
michael@0:   display: flex;
michael@0:   flex-direction: column;
michael@0:   justify-content: center;
michael@0:   width: 100%;
michael@0: }
michael@0: 
michael@0: #banner-connected > .banner-box {
michael@0:   align-items: flex-start;
michael@0: }
michael@0: 
michael@0: #start-simulator-box {
michael@0:   display: inline;
michael@0: }
michael@0: 
michael@0: /************** PIXELS **************/
michael@0: 
michael@0: * {
michael@0:   margin: 0;
michael@0:   padding: 0;
michael@0:   box-sizing: border-box;
michael@0:   font-size: 0.9rem;
michael@0: }
michael@0: 
michael@0: body {
michael@0:   color: #333;
michael@0:   background-color: white;
michael@0:   font-family: Lucida Grande, Helvetica, Helvetica Neue, sans-serif;
michael@0: }
michael@0: 
michael@0: button {
michael@0:   background: linear-gradient(to bottom, #49535C, #394148);
michael@0:   box-shadow: 0px 1px 1px #3C444D, inset 0 1px 0px rgba(255,255,255,0.1);
michael@0:   color: #9FA6AD;
michael@0:   text-shadow: 0px 1px 1px rgba(0,0,0,0.6);
michael@0:   border: 1px solid #111;
michael@0:   cursor: pointer;
michael@0:   border-radius: 3px;
michael@0:   padding: 3px 10px;
michael@0: }
michael@0: 
michael@0: button.left {
michael@0:   margin-right: 0px;
michael@0:   border-top-right-radius: 0;
michael@0:   border-bottom-right-radius: 0;
michael@0: }
michael@0: 
michael@0: button.right {
michael@0:   margin-left: -6px;
michael@0:   border-top-left-radius: 0;
michael@0:   border-bottom-left-radius: 0;
michael@0: }
michael@0: 
michael@0: button.action-primary {
michael@0:   background: linear-gradient(to bottom, #276DA3, #1E5580);
michael@0:   color: #EEE;
michael@0: }
michael@0: 
michael@0: button.action-cancel {
michael@0:   background: linear-gradient(to bottom, #B32B02, #942300);
michael@0:   color: #EEE;
michael@0: }
michael@0: 
michael@0: #banners-and-logs {
michael@0:   border-top: #111 solid;
michael@0:   border-width: 1px 0;
michael@0:   background: linear-gradient(to bottom, #323A42, #29313A);
michael@0:   color: #A8BABF;
michael@0:   box-shadow: inset 0 0 1px #424A51;
michael@0: }
michael@0: 
michael@0: #status {
michael@0:   background: linear-gradient(to bottom, #454F59, #404952);
michael@0:   box-shadow: inset 0 0 1px #606D78, inset 0 1px 0 #5E6973;
michael@0: }
michael@0: 
michael@0: #logs > pre {
michael@0:   border: 1px solid #111;
michael@0:   box-shadow: 0px 1px 1px #49525A, inset 0 0 5px rgba(0,0,0,0.3);
michael@0:   font-size: 10px;
michael@0:   background: #22272D;
michael@0:   padding: 5px;
michael@0:   height: 100%;
michael@0:   padding-left: 20px;
michael@0:   position: relative;
michael@0: }
michael@0: 
michael@0: #logs > pre span{
michael@0:   text-shadow: 0 1px 2px #000;
michael@0:   color: #3195FB;
michael@0:   position: fixed;
michael@0:   right: calc(30% - 15px);
michael@0:   bottom: -1px;
michael@0: }
michael@0: 
michael@0: #logs > pre b {
michael@0:   font-size: 10px;
michael@0:   color: #70C4FF;
michael@0: }
michael@0: 
michael@0: .banner-box {
michael@0:   box-shadow: inset 0 0 1px #667480, inset 0 1px 0 #5E6973;
michael@0:   border-right: 1px solid #111;
michael@0:   background-position: center right;
michael@0:   background-size: 1px 100%;
michael@0:   background-repeat: no-repeat;
michael@0:   padding: 10px 20px;
michael@0:   position: relative;
michael@0: }
michael@0: 
michael@0: .connected-status {
michael@0:   color: #B3BFC9;
michael@0:   text-shadow: 0px 1px 2px rgba(0,0,0,0.9);
michael@0:   padding-bottom: 10px;
michael@0: }
michael@0: 
michael@0: .connected-status {
michael@0:   font-size: 150%;
michael@0:   top: 10%;
michael@0:   padding-right: 3px;
michael@0:   position: relative;
michael@0: }
michael@0: 
michael@0: .connected-indicator {
michael@0:   box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 0px 1px rgba(255,255,255,0.3);
michael@0:   height: 100%;
michael@0:   flex: 0 0 10px;
michael@0: }
michael@0: 
michael@0: #banner-connected .connected-indicator,
michael@0: #banner-connecting .connected-indicator {
michael@0:   background: linear-gradient(to bottom, #69B8FF, #339FFF );
michael@0: }
michael@0: 
michael@0: #banner-simulators .connected-indicator,
michael@0: #banner-disconnected .connected-indicator,
michael@0: #banner-editing .connected-indicator,
michael@0: #banner-disconnecting .connected-indicator {
michael@0:   background: linear-gradient(to bottom, #375A87, #1C4375 );
michael@0: }
michael@0: 
michael@0: #banner-simulators .banner-content > * {
michael@0:   display: inline-block;
michael@0: }
michael@0: 
michael@0: #banner-simulators[simulator-count="0"] .found-simulator,
michael@0: #banner-simulators:not([simulator-count="0"]) .no-simulator {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: #connection-no-device,
michael@0: [device-count="0"] > #connection-found-device,
michael@0: #connection-manual,
michael@0: #connection-assisted {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: #connection-found-device,
michael@0: [device-count="0"] > #connection-no-device,
michael@0: [adb-available="true"] > #connection-assisted,
michael@0: [adb-available="false"] > #connection-manual {
michael@0:   display: inline;
michael@0: }