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: /*****************      GENERAL      *****************/
michael@0: 
michael@0: * {
michael@0:   margin: 0;
michael@0:   padding: 0;
michael@0:   box-sizing: border-box;
michael@0: }
michael@0: 
michael@0: html, body {
michael@0:   height: 100%;
michael@0: }
michael@0: 
michael@0: body {
michael@0:   font-size: 0.9rem;
michael@0:   color: #333;
michael@0:   background-color:  rgb(225, 225, 225);
michael@0:   font-family: Lucida Grande, Helvetica, Helvetica Neue, sans-serif;
michael@0:   display: flex;
michael@0:   flex-direction: column;
michael@0: }
michael@0: 
michael@0: template {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: h1 {
michael@0:   font-size: 20px;
michael@0: }
michael@0: 
michael@0: #content {
michael@0:   display: flex;
michael@0:   flex-direction: row;
michael@0:   height: 100%;
michael@0:   overflow: hidden;
michael@0: }
michael@0: 
michael@0: #detail {
michael@0:   background-image: url('noise.png');
michael@0:   display: flex;
michael@0:   flex-grow: 1;
michael@0:   z-index: 1;
michael@0:   overflow: hidden;
michael@0: }
michael@0: 
michael@0: #meta {
michael@0:   background-size: 100%;
michael@0:   padding-top: 50px;
michael@0: }
michael@0: 
michael@0: #connection-footer {
michael@0:   border-width: 0;
michael@0:   height: 50px;
michael@0:   min-height: 50px;
michael@0: }
michael@0: 
michael@0: 
michael@0: #root-actor-debug {
michael@0:   background: white;
michael@0: }
michael@0: 
michael@0: /*****************     APP BUTTONS      *****************/
michael@0: 
michael@0: 
michael@0: 
michael@0: .app-buttons {
michael@0:   display: block;
michael@0:   margin-left: 20px;
michael@0:   color: #BBB;
michael@0: }
michael@0: 
michael@0: button {
michael@0:   margin: 0;
michael@0:   font-size: 11px;
michael@0:   border: 1px solid #CCC;
michael@0:   padding: 5px 15px;
michael@0:   cursor: pointer;
michael@0:   background: rgba(255,255,255,0.4);
michael@0:   text-transform: uppercase;
michael@0:   border-radius: 3px;
michael@0:   border-width: 1px;
michael@0: }
michael@0: 
michael@0: .app-buttons > button {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: .app-buttons > button[disabled] {
michael@0:   background-color: transparent;
michael@0:   opacity: 0.4;
michael@0:   pointer-events: none;
michael@0: }
michael@0: 
michael@0: .app[running="false"] > .app-buttons > .button-start,
michael@0: .app[running="true"] > .app-buttons > .button-stop,
michael@0: .app[running="true"] > .app-buttons > .button-debug {
michael@0:   display: inline-block;
michael@0: }
michael@0: 
michael@0: .button-debug {
michael@0:   color: #3498DB;
michael@0: }
michael@0: 
michael@0: .button-debug:hover {
michael@0:   background-color: #3498DB;
michael@0:   color: #FFF;
michael@0: }
michael@0: 
michael@0: .button-debug[disabled] {
michael@0:   color: #3498DB;
michael@0: }
michael@0: 
michael@0: .button-start {
michael@0:   color: #18BC9C
michael@0: }
michael@0: 
michael@0: .button-start:hover {
michael@0:   background-color: #18BC9C;
michael@0:   color: #FFF;
michael@0: }
michael@0: 
michael@0: .button-start[disabled] {
michael@0:   color: #18BC9C
michael@0: }
michael@0: 
michael@0: .button-stop {
michael@0:   color: #E74C3C;
michael@0: }
michael@0: 
michael@0: .button-stop:hover {
michael@0:   background-color: #E74C3C;
michael@0:   color: #FFF;
michael@0: }
michael@0: 
michael@0: .button-stop[disabled] {
michael@0:   color: #E74C3C;
michael@0: }
michael@0: 
michael@0: 
michael@0: 
michael@0: /*****************     PERMISSIONS     *****************/
michael@0: 
michael@0: 
michael@0: 
michael@0: 
michael@0: .permission-table {
michael@0:   display: flex;
michael@0:   flex-direction: column;
michael@0:   height: 100%;
michael@0: }
michael@0: 
michael@0: .permission-table-body {
michael@0:   overflow: auto;
michael@0:   display: flex;
michael@0:   flex-grow: 1;
michael@0:   flex-direction: column;
michael@0: }
michael@0: 
michael@0: .permission-table-header,
michael@0: .permission-table-footer {
michael@0:   display: flex;
michael@0:   background: #FFF;
michael@0:   border-top: 1px solid #CCC;
michael@0:   z-index: 2;
michael@0:   flex-shrink: 0;
michael@0: }
michael@0: 
michael@0: .permission-table-header > div,
michael@0: .permission-table-footer > div {
michael@0:   z-index: 2;
michael@0:   flex-grow: 1;
michael@0:   background: linear-gradient(to bottom, #49535C, #394148);
michael@0:   box-shadow: 0px 1px 3px rgba(12, 20, 30, 0.5), 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: 0;
michael@0:   margin: auto 0;
michael@0:   padding: 5px;
michael@0:   text-align: center;
michael@0:   background: transparent;
michael@0:   box-shadow: none;
michael@0:   text-shadow: none;
michael@0: }
michael@0: 
michael@0: .permission-table-header > div {
michael@0:   flex-basis: 20%;
michael@0: }
michael@0: 
michael@0: .permission-table-header > div:first-child {
michael@0:   text-align: left;
michael@0:   padding-left: 10px;
michael@0:   flex-basis: 30%;
michael@0: }
michael@0: 
michael@0: .permission-table-header {
michael@0:   border: 0;
michael@0:   border-bottom: 1px solid #CCC;
michael@0:   box-shadow: 0 1px 4px rgba(0,0,0,0.3);
michael@0: }
michael@0: 
michael@0: .permission-table-footer {
michael@0:   box-shadow: 0 -1px 4px rgba(0,0,0,0.3);
michael@0: }
michael@0: 
michael@0: .permission {
michael@0:   display: flex;
michael@0:   flex-grow: 1;
michael@0: }
michael@0: 
michael@0: .permission:nth-child(odd) {
michael@0:   background: #E4E4E4;
michael@0: }
michael@0: 
michael@0: .permission:hover {
michael@0:   background: #EEE;
michael@0: }
michael@0: 
michael@0: .permission > div {
michael@0:   flex-grow: 1;
michael@0:   flex-basis: 20%;
michael@0:   text-align: center;
michael@0:   padding: 3px;
michael@0:   border-right: 1px solid #CCC;
michael@0:   border-bottom: 1px solid #CCC;
michael@0: }
michael@0: 
michael@0: .permission > div:first-child {
michael@0:   text-align: left;
michael@0:   padding: 3px 10px;
michael@0:   flex-basis: 30%;
michael@0:   font-weight: bold;
michael@0: }
michael@0: 
michael@0: .permission > div[permission="1"]:before, .allow-label:after {
michael@0:   color: #98CF39;
michael@0:   content: '   \2713';
michael@0: }
michael@0: 
michael@0: .permission > div[permission="2"]:before, .deny-label:after {
michael@0:   color: #CC4908;
michael@0:   content: '   \2715';
michael@0: }
michael@0: 
michael@0: .permission > div[permission="3"]:before, .prompt-label:after {
michael@0:   color: #009EED;
michael@0:   content: '   !';
michael@0: }
michael@0: 
michael@0: 
michael@0: 
michael@0: 
michael@0: /*****************     SIDEBAR      *****************/
michael@0: 
michael@0: 
michael@0: 
michael@0: 
michael@0: #sidebar {
michael@0:   background: #EEE;
michael@0:   position: relative;
michael@0:   box-shadow: 0 1px 6px rgba(0,0,0,0.3);
michael@0:   display: flex;
michael@0:   flex-direction: column;
michael@0:   flex: 0 0 350px;
michael@0:   overflow: hidden;
michael@0:   z-index: 100;
michael@0: }
michael@0: 
michael@0: .sidebar-item {
michael@0:   background-color: #F6F6F6;
michael@0:   box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);
michael@0:   color: #666;
michael@0:   line-height: 120%;
michael@0:   cursor: pointer;
michael@0:   display: flex;
michael@0:   padding: 15px 10px;
michael@0:   display: block;
michael@0:   text-align: left;
michael@0:   flex-grow: 1;
michael@0: }
michael@0: 
michael@0: .sidebar-item > * {
michael@0:   flex-shrink: 0;
michael@0: }
michael@0: 
michael@0: .sidebar-item:hover {
michael@0:   background-color: #EEE;
michael@0: }
michael@0: 
michael@0: .sidebar-item.selected {
michael@0:   background-color: #46AFE3;
michael@0:   color: #FFF;
michael@0: }
michael@0: 
michael@0: .help {
michael@0:   float: right;
michael@0:   padding: 0 5px;
michael@0: }
michael@0: 
michael@0: /*****************     HEADER      *****************/
michael@0: 
michael@0: header {
michael@0:   padding-top: 140px;
michael@0:   background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.7));
michael@0:   color: #FFF;
michael@0:   text-shadow: 0 1px 2px rgba(0,0,0,0.8);
michael@0:   padding: 10px;
michael@0: }
michael@0: 
michael@0: 
michael@0: 
michael@0: /*****************      APPS & BROWSER TABS      *****************/
michael@0: 
michael@0: 
michael@0: 
michael@0: 
michael@0: .apps, .browser-tabs {
michael@0:   display: flex;
michael@0:   flex-direction: column;
michael@0:   overflow: auto;
michael@0: }
michael@0: 
michael@0: .app, .browser-tab {
michael@0:   display: flex;
michael@0:   align-items: center;
michael@0:   order: 1;
michael@0: }
michael@0: 
michael@0: .app-name, .browser-tab-details {
michael@0:   flex-grow: 1;
michael@0:   font-weight: bold;
michael@0: }
michael@0: 
michael@0: .app, .browser-tab {
michael@0:   padding: 10px 20px;
michael@0:   border-bottom: 1px solid #CCC;
michael@0: }
michael@0: 
michael@0: .app:hover, .browser-tab:hover {
michael@0:   background-color: #EFEFEF;
michael@0: }
michael@0: 
michael@0: .app-icon {
michael@0:   width: 32px;
michael@0:   height: 32px;
michael@0:   margin-right: 10px;
michael@0: }
michael@0: 
michael@0: .browser-tab-url-subheading {
michael@0:   font-size: 10px;
michael@0: }
michael@0: 
michael@0: 
michael@0: 
michael@0: /*****************      NOT CONNECTED      *****************/
michael@0: 
michael@0: 
michael@0: 
michael@0: body:not(.notconnected) > #notConnectedMessage,
michael@0: body.notconnected > #content {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: #notConnectedMessage {
michael@0:   flex-grow: 1;
michael@0:   flex-direction: column;
michael@0:   margin: 50px auto;
michael@0: }
michael@0: 
michael@0: #notConnectedMessage > span {
michael@0:   padding: 20px;
michael@0:   border: 1px solid #CCC;
michael@0:   border-radius: 5px;
michael@0: }
michael@0: 
michael@0: #notConnectedMessage > span:before {
michael@0:   content: '';
michael@0:   background: url('error.svg') no-repeat;
michael@0:   background-size: 18px;
michael@0:   height: 24px;
michael@0:   width: 24px;
michael@0:   position: relative;
michael@0:   top: 10px;
michael@0:   display: inline-block;
michael@0: }
michael@0: 
michael@0: 
michael@0: 
michael@0: /*****************      TABS       *****************/
michael@0: 
michael@0: #tabs {
michael@0:   flex-grow: 1;
michael@0:   overflow: auto;
michael@0: }
michael@0: 
michael@0: .tabpanel:not(.selected) {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: #tabs-headers {
michael@0:   flex-shrink: 0;
michael@0:   display: flex;
michael@0:   flex-direction: column;
michael@0: }