/* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ * { margin: 0; padding: 0; box-sizing: border-box; font-size: 0.9rem; } html, body { height: 100%; } template { display: none; } body { display: flex; color: #FF9F00; background-color: #000000; font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; overflow: hidden; } body:not(.connected) button.device-action { display: none; } strong { color: #FFCF00; } /********* SIDEBAR ***********/ #sidebar { display: flex; flex-direction: column; flex: 0 0 350px; overflow: hidden; z-index: 100; background-color: #000000; position: relative; border-right: 1px solid #9C9CFF; } #project-list { height: 100%; overflow: auto; } #project-list:not([projects-count="0"]) > #no-project { display: none; } #no-project { padding: 100px 20px 0; font-weight: bold; color: #A09090; font-size: 22px; } /********* PROJECT MENU ***********/ .project-item { padding: 10px 0; background-color: #000000; border-top: 1px solid #9C9CFF; color: #FF9F00; line-height: 120%; cursor: pointer; display: flex; position: relative; } .project-item:hover { background-color: #FFCF00; color: #000000; } .project-item:hover strong, .project-item:hover p, .project-item:hover span { color: #000000; } .project-item > * { flex-shrink: 0; } .project-item.selected { background-color: #008484; } .project-item.selected strong { color: #FFCF00; } .project-item.selected p, .project-item.selected span { color: #000000; } .button-remove { background-image: url('remove.svg'); background-size: 20px; width: 20px; height: 20px; position: absolute; right: 5px; bottom: 5px; visibility: hidden; } .project-item:hover .button-remove { visibility: visible; } .project-item-status { width: 6px; margin: -10px 0; border-right: 1px solid #9C9CFF; } .project-item-status[status="valid"] { background-color: #008484; } .project-item-status[status~="warning"] { background-color: #FFCF00; } .project-item-status[status~="error"] { background-color: #FF0000; } .project-item-icon { width: 32px; height: 32px; margin: 0 10px; } .project-item-meta { flex-grow: 1; flex-shrink: 1 !important; } .project-item-type { font-size: 10px; line-height: 20px; float: right; padding-right: 10px; color: #9C9CFF; text-transform: uppercase; } .project-item-description { color: #A09090; font-size: 90%; } /********* ADD PROJECT ***********/ #new-packaged-project { background-position: calc(100% - 10px) 10px; } #new-packaged-project, #new-hosted-project { background-color: #000000; border: none; border-top: 1px solid #9C9CFF; padding: 10px; font-weight: bold; } #new-packaged-project:hover, #new-hosted-project:hover { background-color: #FFCF00; color: #000000; } #new-hosted-project-wrapper { display: flex; align-items: center; } #new-packaged-project, #new-hosted-project-click { background-image: url('plus.svg'); background-size: 20px; background-repeat: no-repeat; cursor: pointer; } #new-hosted-project-click { background-position: top right; width: 20px; height: 20px; margin-left: 5px; } #url-input { flex-grow: 1; width: 90%; box-shadow: none; border-radius: 3px; border: 1px solid #9C9CFF; padding: 4px; margin-top: 4px; } /********* LENSE ***********/ #lense { height: 100%; flex-grow: 1; display: flex; z-index: 1; overflow: hidden; background-color: #000000; background-image: url('rocket.svg'); background-repeat: no-repeat, repeat; background-size: 35%, auto; background-position: center center, top left; } #lense > div { display: flex; flex-grow: 1; flex-direction: column; } /********* PROJECT ***********/ .project-details { background-color: #000000; padding: 10px; line-height: 160%; display: flex; flex-direction: column; } .project-metadata { flex-grow: 1; } .project-status { display: flex; } .project-title { flex-direction: row; display: flex; align-items: flex-start; padding-bottom: 10px; border-bottom: 1px solid #A09090; margin-bottom: 10px; } .project-title > h1 { flex-grow: 1; font-size: 24px; } .project-location { color: gray; font-size: 10px; cursor: pointer; font-family: monospace; } .project-location:hover { text-decoration: underline; } .project-header { display: flex; border-bottom: 1px solid #A09090; margin: 10px 20px 10px 20px; padding-bottom: 10px; } .project-icon { flex-shrink: 0; width: 64px; height: 64px; margin-right: 10px; } .project-location { font-size: 11px; color: #9C9CFF; } .project-description { font-style: italic; color: #A09090; } .project-status > p { text-transform: uppercase; font-size: 10px; padding: 2px 10px; border-radius: 2px; margin-top: 6px; line-height: 10px; } .project-validation { color: #000000; display: none; margin-left: 10px; } .project-validation.valid { background-color: #008484; } .project-validation.warning { background-color: #FF9F00; } .project-validation.error { background-color: #FF0000; } [status="valid"] > .project-validation.valid, [status~="warning"] > .project-validation.warning, [status~="error"] > .project-validation.error { display: inline; } .project-type { display: none; margin-left: 10px; } [type="hosted"] > .project-type.hosted, [type="packaged"] > .project-type.packaged { display: inline; } /********* PROJECT BUTTONS ***********/ .project-buttons { display: flex; margin-left: 20px; color: #FF9F00; } .project-buttons > button { margin: 0; font-size: 11px; border-left-width: 0; padding-top: 1px; padding-bottom: 2px; -moz-padding-start: .5em; -moz-padding-end: calc(.5em + 1px); border: none; border-radius: 300px; cursor: pointer; background-color: #C09070; text-transform: uppercase; } .project-buttons > button:hover:active { padding-top: 2px; padding-bottom: 1px; -moz-padding-start: calc(.5em + 1px); -moz-padding-end: .5em; } .project-buttons > button:not([disabled]):hover { background-color: #FFCF00; color: #000000; } .project-buttons > button[disabled] { background-color: #402858; color: #000000; pointer-events: none; } .project-buttons > button:first-child { border-left-width: 1px; } /* .project-button-debug { color: #3498DB; } .project-button-debug:hover { background-color: #3498DB; color: #FFF; } .project-button-debug[disabled] { color: #3498DB; } .project-button-update { color: #777; } .project-button-update:hover { background-color: #777; color: #FFF; } .project-button-update[disabled] { color: #777; } */ /********* ERRORS AND WARNINGS ***********/ .project-warnings, .project-errors, .project-item-warnings, .project-item-errors { display: none; } [status~="warning"] .project-item-warnings, [status~="error"] .project-item-errors { display: inline-block; } [status~="warning"] > .project-warnings, [status~="error"] > .project-errors { display: block; } .project-warnings, .project-errors { margin: 20px 20px 0; padding: 10px 10px; font-family: monospace; color: #000000; } .project-warnings { border-left: 3px solid #9C9CFF; background-color: #FF9F00; } .project-errors { border-left: 3px solid #9C9CFF; background-color: #FF0000; } .project-item-warnings { background-image: url('warning.svg'); color: #FFCF00; } .project-item-errors { background-image: url('error.svg'); color: #FF0000; } .project-item-warnings, .project-item-errors { background-repeat: no-repeat; background-size: 12px; background-position: left center; margin-top: 6px; } .project-item-warnings > span, .project-item-errors > span { font-size: 11px; padding-left: 16px; font-weight: bold; } /********* MANIFEST EDITOR ***********/ .manifest-editor { display: flex; flex-direction: column; flex-grow: 1; background-color: #000000; } .manifest-header { display: flex; flex-direction: row; } .manifest-header > h2 { font-size: 18px; margin: 1em 15px 1em 30px; display: none; } .manifest-header > button { margin: 18px 0; font-size: 11px; border-right-width: 0; padding-top: 1px; padding-bottom: 2px; -moz-padding-start: .5em; -moz-padding-end: calc(.5em + 1px); border: none; border-radius: 300px; cursor: pointer; background-color: #C09070; text-transform: uppercase; display: none; } .manifest-header > button:hover:active { padding-top: 2px; padding-bottom: 1px; -moz-padding-start: calc(.5em + 1px); -moz-padding-end: .5em; } .manifest-header > button:not([disabled]):hover { background-color: #FFCF00; color: #000000; } .manifest-header > button[disabled] { background-color: #402858; color: #000000; pointer-events: none; } .manifest-header > button:last-child { border-right-width: 1px; } [type="packaged"] > .editable { display: block; } [type="hosted"] > .viewable { display: block; } /* .manifest-button-save { color: #777; } .manifest-button-save:hover { background-color: #777; color: #FFF; } .manifest-button-save[disabled] { color: #777; } */ .variables-view { flex-grow: 1; border: 0; border-top: 5px solid #9C9CFF; } /* Bug 925921: Remove when the manifest editor is always on */ .manifest-editor { display: none; } .project-details { flex-grow: 1; } #lense[manifest-editable] .manifest-editor { display: flex; } #lense[manifest-editable] .project-details { flex-grow: 0; } /* End blocks to remove */