1 /* This Source Code Form is subject to the terms of the Mozilla Public
2 * License, v. 2.0. If a copy of the MPL was not distributed with this
3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
5 /***************** GENERAL *****************/
10 box-sizing: border-box;
20 background-color: #000000;
21 font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
23 flex-direction: column;
49 background-size: 100%;
61 /***************** APP BUTTONS *****************/
76 background-color: #C09070;
77 text-transform: uppercase;
82 .app-buttons > button {
86 .app-buttons > button:not([disabled]):hover {
87 background-color: #FFCF00;
91 .app-buttons > button[disabled] {
92 background-color: #402858;
97 .app[running="false"] > .app-buttons > .button-start,
98 .app[running="true"] > .app-buttons > .button-stop,
99 .app[running="true"] > .app-buttons > .button-debug {
100 display: inline-block;
107 .button-debug:hover {
108 background-color: #3498DB;
112 .button-debug[disabled] {
120 .button-start:hover {
121 background-color: #18BC9C;
125 .button-start[disabled] {
134 background-color: #E74C3C;
138 .button-stop[disabled] {
144 /***************** PERMISSIONS *****************/
151 flex-direction: column;
155 .permission-table-body {
159 flex-direction: column;
162 .permission-table-header,
163 .permission-table-footer {
166 border-top: 1px solid #9C9CFF;
171 .permission-table-header > div,
172 .permission-table-footer > div {
175 background-color: #000000;
181 background: transparent;
186 .permission-table-header > div {
190 .permission-table-header > div:first-child {
196 .permission-table-header {
198 border-bottom: 1px solid #9C9CFF;
199 /* box-shadow: 0 1px 4px rgba(0,0,0,0.3);*/
202 .permission-table-footer {
203 /* box-shadow: 0 -1px 4px rgba(0,0,0,0.3);*/
211 .permission:nth-child(odd) {
212 background-color: #404000;
216 background-color: #FFCF00;
225 border-right: 1px solid #9C9CFF;
226 border-bottom: 1px solid #9C9CFF;
229 .permission > div:first-child {
236 .permission > div[permission="1"]:before, .allow-label:after {
241 .permission > div[permission="2"]:before, .deny-label:after {
246 .permission > div[permission="3"]:before, .prompt-label:after {
254 /***************** SIDEBAR *****************/
263 flex-direction: column;
270 background-color: #000000;
286 .sidebar-item.selected:hover {
287 background-color: #FFCF00;
291 .sidebar-item.selected {
292 background-color: #008484;
301 /***************** HEADER *****************/
311 /***************** APPS & BROWSER TABS *****************/
316 .apps, .browser-tabs {
318 flex-direction: column;
328 .app-name, .browser-tab-details {
335 border-bottom: 1px solid #9C9CFF;
338 .app:hover, .browser-tab:hover {
339 background-color: #404000;
348 .browser-tab-url-subheading {
354 /***************** NOT CONNECTED *****************/
358 body:not(.notconnected) > #notConnectedMessage,
359 body.notconnected > #content {
363 #notConnectedMessage {
365 flex-direction: column;
369 #notConnectedMessage > span {
371 border: 1px solid #9C9CFF;
375 #notConnectedMessage > span:before {
377 background: url('error.svg') no-repeat;
378 background-size: 18px;
383 display: inline-block;
388 /***************** TABS *****************/
395 .tabpanel:not(.selected) {
402 flex-direction: column;