From 1d5f9f7aa7ac0bfe6a091b7c1395cafa33d52c43 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Wed, 19 Aug 2015 19:38:44 +0200 Subject: add firefox theme --- .../chrome/browser/devtools/app-manager/add.svg | 12 + .../devtools/app-manager/connection-footer.css | 224 +++++++++ .../devtools/app-manager/default-app-icon.png | Bin 0 -> 5208 bytes .../chrome/browser/devtools/app-manager/device.css | 410 +++++++++++++++ .../chrome/browser/devtools/app-manager/error.svg | 13 + .../chrome/browser/devtools/app-manager/help.css | 40 ++ .../browser/devtools/app-manager/index-icons.svg | 80 +++ .../chrome/browser/devtools/app-manager/index.css | 103 ++++ .../chrome/browser/devtools/app-manager/noise.png | Bin 0 -> 6216 bytes .../chrome/browser/devtools/app-manager/plus.svg | 12 + .../browser/devtools/app-manager/projects.css | 556 +++++++++++++++++++++ .../chrome/browser/devtools/app-manager/remove.svg | 10 + .../chrome/browser/devtools/app-manager/rocket.svg | 30 ++ .../browser/devtools/app-manager/warning.svg | 13 + 14 files changed, 1503 insertions(+) create mode 100644 arc-firefox-theme/chrome/browser/devtools/app-manager/add.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/app-manager/connection-footer.css create mode 100644 arc-firefox-theme/chrome/browser/devtools/app-manager/default-app-icon.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/app-manager/device.css create mode 100644 arc-firefox-theme/chrome/browser/devtools/app-manager/error.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/app-manager/help.css create mode 100644 arc-firefox-theme/chrome/browser/devtools/app-manager/index-icons.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/app-manager/index.css create mode 100644 arc-firefox-theme/chrome/browser/devtools/app-manager/noise.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/app-manager/plus.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/app-manager/projects.css create mode 100644 arc-firefox-theme/chrome/browser/devtools/app-manager/remove.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/app-manager/rocket.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/app-manager/warning.svg (limited to 'arc-firefox-theme/chrome/browser/devtools/app-manager') diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/add.svg b/arc-firefox-theme/chrome/browser/devtools/app-manager/add.svg new file mode 100644 index 0000000..f1b5594 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/add.svg @@ -0,0 +1,12 @@ + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/connection-footer.css b/arc-firefox-theme/chrome/browser/devtools/app-manager/connection-footer.css new file mode 100644 index 0000000..dc51832 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/connection-footer.css @@ -0,0 +1,224 @@ +/* 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/. */ + +/************** LAYOUT **************/ + +#connection-footer { + display: flex; + flex-direction: column; + height: 50px; +} + +#banners-and-logs { + display: flex; + flex-grow: 1; + max-height: 100%; +} + +#logs { + display: flex; + width: 40%; + padding: 0; + width: 100%; +} + +.banner { + display: none; + width: 60%; +} + +#connection-footer[status="connected"] #banner-connected, +#connection-footer[status="connecting"] #banner-connecting, +#connection-footer[status="disconnected"] #banner-disconnected, +#connection-footer[status="disconnecting"] #banner-disconnecting { + display: flex; +} + +body.show-simulators .banner, +body.edit-connection .banner { + display: none !important; +} + +body.show-simulators #banner-simulators, +body.edit-connection #banner-editing { + display: flex !important; +} + +#banner-logs { + width: 40%; + display: flex; +} + +#logs > pre { + overflow: auto; + white-space: pre-line; +} + +#status.banner-box { + width: 100% !important; +} + +.banner-box { + display: flex; + flex-direction: column; + justify-content: center; + width: 100%; +} + +#banner-connected > .banner-box { + align-items: flex-start; +} + +#start-simulator-box { + display: inline; +} + +/************** PIXELS **************/ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-size: 0.9rem; +} + +body { + color: #333; + background-color: white; + font-family: Lucida Grande, Helvetica, Helvetica Neue, sans-serif; +} + +button { + background: linear-gradient(to bottom, #49535C, #394148); + box-shadow: 0px 1px 1px #3C444D, inset 0 1px 0px rgba(255,255,255,0.1); + color: #9FA6AD; + text-shadow: 0px 1px 1px rgba(0,0,0,0.6); + border: 1px solid #111; + cursor: pointer; + border-radius: 3px; + padding: 3px 10px; +} + +button.left { + margin-right: 0px; + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +button.right { + margin-left: -6px; + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +button.action-primary { + background: linear-gradient(to bottom, #276DA3, #1E5580); + color: #EEE; +} + +button.action-cancel { + background: linear-gradient(to bottom, #B32B02, #942300); + color: #EEE; +} + +#banners-and-logs { + border-top: #111 solid; + border-width: 1px 0; + background: linear-gradient(to bottom, #323A42, #29313A); + color: #A8BABF; + box-shadow: inset 0 0 1px #424A51; +} + +#status { + background: linear-gradient(to bottom, #454F59, #404952); + box-shadow: inset 0 0 1px #606D78, inset 0 1px 0 #5E6973; +} + +#logs > pre { + border: 1px solid #111; + box-shadow: 0px 1px 1px #49525A, inset 0 0 5px rgba(0,0,0,0.3); + font-size: 10px; + background: #22272D; + padding: 5px; + height: 100%; + padding-left: 20px; + position: relative; +} + +#logs > pre span{ + text-shadow: 0 1px 2px #000; + color: #3195FB; + position: fixed; + right: calc(30% - 15px); + bottom: -1px; +} + +#logs > pre b { + font-size: 10px; + color: #70C4FF; +} + +.banner-box { + box-shadow: inset 0 0 1px #667480, inset 0 1px 0 #5E6973; + border-right: 1px solid #111; + background-position: center right; + background-size: 1px 100%; + background-repeat: no-repeat; + padding: 10px 20px; + position: relative; +} + +.connected-status { + color: #B3BFC9; + text-shadow: 0px 1px 2px rgba(0,0,0,0.9); + padding-bottom: 10px; +} + +.connected-status { + font-size: 150%; + top: 10%; + padding-right: 3px; + position: relative; +} + +.connected-indicator { + box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 0px 1px rgba(255,255,255,0.3); + height: 100%; + flex: 0 0 10px; +} + +#banner-connected .connected-indicator, +#banner-connecting .connected-indicator { + background: linear-gradient(to bottom, #69B8FF, #339FFF ); +} + +#banner-simulators .connected-indicator, +#banner-disconnected .connected-indicator, +#banner-editing .connected-indicator, +#banner-disconnecting .connected-indicator { + background: linear-gradient(to bottom, #375A87, #1C4375 ); +} + +#banner-simulators .banner-content > * { + display: inline-block; +} + +#banner-simulators[simulator-count="0"] .found-simulator, +#banner-simulators:not([simulator-count="0"]) .no-simulator { + display: none; +} + +#connection-no-device, +[device-count="0"] > #connection-found-device, +#connection-manual, +#connection-assisted { + display: none; +} + +#connection-found-device, +[device-count="0"] > #connection-no-device, +[adb-available="true"] > #connection-assisted, +[adb-available="false"] > #connection-manual { + display: inline; +} diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/default-app-icon.png b/arc-firefox-theme/chrome/browser/devtools/app-manager/default-app-icon.png new file mode 100644 index 0000000..f186d9c Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/app-manager/default-app-icon.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/device.css b/arc-firefox-theme/chrome/browser/devtools/app-manager/device.css new file mode 100644 index 0000000..fc6efd9 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/device.css @@ -0,0 +1,410 @@ +/* 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/. */ + +/***************** GENERAL *****************/ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html, body { + height: 100%; +} + +body { + font-size: 0.9rem; + color: #333; + background-color: rgb(225, 225, 225); + font-family: Lucida Grande, Helvetica, Helvetica Neue, sans-serif; + display: flex; + flex-direction: column; +} + +template { + display: none; +} + +h1 { + font-size: 20px; +} + +#content { + display: flex; + flex-direction: row; + height: 100%; + overflow: hidden; +} + +#detail { + background-image: url('noise.png'); + display: flex; + flex-grow: 1; + z-index: 1; + overflow: hidden; +} + +#meta { + background-size: 100%; + padding-top: 50px; +} + +#connection-footer { + border-width: 0; + height: 50px; + min-height: 50px; +} + + +#root-actor-debug { + background: white; +} + +/***************** APP BUTTONS *****************/ + + + +.app-buttons { + display: block; + margin-left: 20px; + color: #BBB; +} + +button { + margin: 0; + font-size: 11px; + border: 1px solid #CCC; + padding: 5px 15px; + cursor: pointer; + background: rgba(255,255,255,0.4); + text-transform: uppercase; + border-radius: 3px; + border-width: 1px; +} + +.app-buttons > button { + display: none; +} + +.app-buttons > button[disabled] { + background-color: transparent; + opacity: 0.4; + pointer-events: none; +} + +.app[running="false"] > .app-buttons > .button-start, +.app[running="true"] > .app-buttons > .button-stop, +.app[running="true"] > .app-buttons > .button-debug { + display: inline-block; +} + +.button-debug { + color: #3498DB; +} + +.button-debug:hover { + background-color: #3498DB; + color: #FFF; +} + +.button-debug[disabled] { + color: #3498DB; +} + +.button-start { + color: #18BC9C +} + +.button-start:hover { + background-color: #18BC9C; + color: #FFF; +} + +.button-start[disabled] { + color: #18BC9C +} + +.button-stop { + color: #E74C3C; +} + +.button-stop:hover { + background-color: #E74C3C; + color: #FFF; +} + +.button-stop[disabled] { + color: #E74C3C; +} + + + +/***************** PERMISSIONS *****************/ + + + + +.permission-table { + display: flex; + flex-direction: column; + height: 100%; +} + +.permission-table-body { + overflow: auto; + display: flex; + flex-grow: 1; + flex-direction: column; +} + +.permission-table-header, +.permission-table-footer { + display: flex; + background: #FFF; + border-top: 1px solid #CCC; + z-index: 2; + flex-shrink: 0; +} + +.permission-table-header > div, +.permission-table-footer > div { + z-index: 2; + flex-grow: 1; + background: linear-gradient(to bottom, #49535C, #394148); + box-shadow: 0px 1px 3px rgba(12, 20, 30, 0.5), inset 0 1px 0px rgba(255,255,255,0.1); + color: #9FA6AD; + text-shadow: 0px 1px 1px rgba(0,0,0,0.6); + border: 0; + margin: auto 0; + padding: 5px; + text-align: center; + background: transparent; + box-shadow: none; + text-shadow: none; +} + +.permission-table-header > div { + flex-basis: 20%; +} + +.permission-table-header > div:first-child { + text-align: start; + padding-left: 10px; + flex-basis: 30%; +} + +.permission-table-header { + border: 0; + border-bottom: 1px solid #CCC; + box-shadow: 0 1px 4px rgba(0,0,0,0.3); +} + +.permission-table-footer { + box-shadow: 0 -1px 4px rgba(0,0,0,0.3); +} + +.permission { + display: flex; + flex-grow: 1; +} + +.permission:nth-child(odd) { + background: #E4E4E4; +} + +.permission:hover { + background: #EEE; +} + +.permission > div { + flex-grow: 1; + flex-basis: 20%; + text-align: center; + padding: 3px; + border-right: 1px solid #CCC; + border-bottom: 1px solid #CCC; +} + +.permission > div:first-child { + text-align: start; + padding: 3px 10px; + flex-basis: 30%; + font-weight: bold; +} + +.permission > div[permission="1"]:before, .allow-label:after { + color: #98CF39; + content: ' \2713'; +} + +.permission > div[permission="2"]:before, .deny-label:after { + color: #CC4908; + content: ' \2715'; +} + +.permission > div[permission="3"]:before, .prompt-label:after { + color: #009EED; + content: ' !'; +} + + + + +/***************** SIDEBAR *****************/ + + + + +#sidebar { + background: #EEE; + position: relative; + box-shadow: 0 1px 6px rgba(0,0,0,0.3); + display: flex; + flex-direction: column; + flex: 0 0 350px; + overflow: hidden; + z-index: 100; +} + +.sidebar-item { + background-color: #F6F6F6; + box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1); + color: #666; + line-height: 120%; + cursor: pointer; + display: flex; + padding: 15px 10px; + display: block; + text-align: start; + flex-grow: 1; +} + +.sidebar-item > * { + flex-shrink: 0; +} + +.sidebar-item:hover { + background-color: #EEE; +} + +.sidebar-item.selected { + background-color: #46AFE3; + color: #FFF; +} + +.help { + float: right; + padding: 0 5px; +} + +/***************** HEADER *****************/ + +header { + padding-top: 140px; + background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,0.7)); + color: #FFF; + text-shadow: 0 1px 2px rgba(0,0,0,0.8); + padding: 10px; +} + + + +/***************** APPS & BROWSER TABS *****************/ + + + + +.apps, .browser-tabs { + display: flex; + flex-direction: column; + overflow: auto; +} + +.browser-tabs.hidden { + display: none; +} + +.app, .browser-tab { + display: flex; + align-items: center; + order: 1; +} + +.app-name, .browser-tab-details { + flex-grow: 1; + font-weight: bold; +} + +.app, .browser-tab { + padding: 10px 20px; + border-bottom: 1px solid #CCC; +} + +.app:hover, .browser-tab:hover { + background-color: #EFEFEF; +} + +.app-icon { + width: 32px; + height: 32px; + margin-right: 10px; +} + +.browser-tab-url-subheading { + font-size: 10px; +} + + + +/***************** NOT CONNECTED *****************/ + + + +body:not(.notconnected) > #notConnectedMessage, +body.notconnected > #content { + display: none; +} + +#notConnectedMessage { + flex-grow: 1; + flex-direction: column; + margin: 50px auto; +} + +#notConnectedMessage > span { + padding: 20px; + border: 1px solid #CCC; + border-radius: 5px; +} + +#notConnectedMessage > span:before { + content: ''; + background: url('error.svg') no-repeat; + background-size: 18px; + height: 24px; + width: 24px; + position: relative; + top: 10px; + display: inline-block; +} + + + +/***************** TABS *****************/ + +#tabs { + flex-grow: 1; + overflow: auto; +} + +.tabpanel:not(.selected) { + display: none; +} + +#tabs-headers { + flex-shrink: 0; + display: flex; + flex-direction: column; +} diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/error.svg b/arc-firefox-theme/chrome/browser/devtools/app-manager/error.svg new file mode 100644 index 0000000..21261cd --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/error.svg @@ -0,0 +1,13 @@ + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/help.css b/arc-firefox-theme/chrome/browser/devtools/app-manager/help.css new file mode 100644 index 0000000..087819e --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/help.css @@ -0,0 +1,40 @@ +/* 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/. */ + +html, body { + margin: 0; + height: 100%; +} + +body { + color: #555; + font-family: Lucida Grande, Helvetica, Helvetica Neue, sans-serif; + overflow: hidden; + max-width: 600px; + margin: auto; + padding: 20px 0; + background-color: #FFF; +} + +button { + border: 1px solid #CCC; + padding: 5px 15px; + cursor: pointer; + background: rgba(255,255,255,0.4); + text-transform: uppercase; + color: #3498DB; +} + +button:hover { + background-color: #3498DB; + color: #FFF; +} + +a, a:visited { + color: rgb(39,109,163); +} + +#close-button { + float: right; +} diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/index-icons.svg b/arc-firefox-theme/chrome/browser/devtools/app-manager/index-icons.svg new file mode 100644 index 0000000..b0a414d --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/index-icons.svg @@ -0,0 +1,80 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/index.css b/arc-firefox-theme/chrome/browser/devtools/app-manager/index.css new file mode 100644 index 0000000..cb3f876 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/index.css @@ -0,0 +1,103 @@ +/* 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-family: Lucida Grande, Helvetica, Helvetica Neue, sans-serif; +} + +#tabs { + box-shadow: inset -4px 0 0 rgba(0,0,0,0.3); + background: #252C33; +} + +#toolbox-tabs { + overflow-y: auto; +} + +.button { + width: 80px; + height: 85px; + padding-bottom: 5px; + -moz-appearance: none; + border: none; + border-bottom: 1px solid #121214; + background-color: transparent; + color: #B5B8BB; + cursor: pointer; + text-align: center; + -moz-box-align: end; + font-size: 10px; + text-shadow: 0 1px 0 #333; + color: #9FA6AD; +} + +.button:first-child { + border-top: none; +} + +.button[selected] { + box-shadow: inset -4px 0 0 rgba(0,0,0,0.3), inset 2px 0 0 #DEFFFF, inset 3px 0 0 #8DC7E8, inset 4px 0 1px #1D6496; + color: #DCE8F3; + background-color: #1A4766; + border-color: #191B1E; +} + +.button::-moz-focus-inner { + border-width: 0; +} + +.panel { + border-width: 0; +} + +.panel:not([selected="true"]) { + display: none; +} + +.button.toolbox { + background-repeat: no-repeat; + background-position: center 15px; + background-size: 40px 40px; +} + +.projects-button { + background: url('chrome://browser/skin/devtools/app-manager/index-icons.svg') no-repeat; + background-position: left -5px; +} + +.projects-button[selected] { + background-position: right -5px; +} + +.device-button { + background-image: url('chrome://browser/skin/devtools/app-manager/index-icons.svg'); + background-position: left -85px, top left; + background-repeat: no-repeat, no-repeat; + background-size: 160px 240px, 2px 80px; +} + +.device-button[selected] { + background-position: right -85px, top left; +} + +.help-button { + border-bottom: 0; + background-image: url('chrome://browser/skin/devtools/app-manager/index-icons.svg'); + background-position: left -165px, top left; + background-repeat: no-repeat, no-repeat; + background-size: 160px 240px, 2px 80px; +} + +.help-button[selected] { + background-position: right -165px, top left; +} + +#connection-footer { + border-width: 0; + height: 50px; + min-height: 50px; +} diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/noise.png b/arc-firefox-theme/chrome/browser/devtools/app-manager/noise.png new file mode 100644 index 0000000..b3c42ac Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/app-manager/noise.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/plus.svg b/arc-firefox-theme/chrome/browser/devtools/app-manager/plus.svg new file mode 100644 index 0000000..10e8d2b --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/plus.svg @@ -0,0 +1,12 @@ + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/projects.css b/arc-firefox-theme/chrome/browser/devtools/app-manager/projects.css new file mode 100644 index 0000000..98b2289 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/projects.css @@ -0,0 +1,556 @@ +/* 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: #333; + background-color: white; + font-family: Lucida Grande, Helvetica, Helvetica Neue, sans-serif; + overflow: hidden; +} + +body:not(.connected) button.device-action { + display: none; +} + +strong { + color: #111; +} + + +/********* SIDEBAR ***********/ + + + +#sidebar { + display: flex; + flex-direction: column; + flex: 0 0 350px; + overflow: hidden; + z-index: 100; + background-color: #E9EAEB; + position: relative; + box-shadow: 3px 0 1.5px rgba(0,0,0,0.08); +} + +#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: #BBB; + font-size: 22px; +} + + +/********* PROJECT MENU ***********/ + + +.project-item { + padding: 10px 0; + background-color: #F0F1F2; + box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1); + color: #666; + line-height: 120%; + cursor: pointer; + display: flex; + position: relative; +} + +.project-item:hover { + background-color: #EEE; +} + +.project-item > * { + flex-shrink: 0; +} + +.project-item.selected { + background-color: #46AFE3; +} + +.project-item.selected strong { + color: #FFF; +} + +.project-item.selected p, +.project-item.selected span { + color: #C1DCF0; +} + +.button-remove { + background-image: url('remove.svg'); + background-size: 20px; + width: 20px; + height: 20px; + position: absolute; + right: 5px; + bottom: 5px; + visibility: hidden; + opacity: 0.5; +} + +.project-item:hover .button-remove { + visibility: visible; +} + +.project-item-status { + width: 6px; + margin: -10px 0; + border-right: 1px solid rgba(0,0,0,0.1); + box-shadow: inset 0 0 1px 1px rgba(255,255,255,0.2), inset 0 -1px 0 0 rgba(0,0,0,0.2); +} + +.project-item-status[status="valid"] { + background-color: #70BF53; +} + +.project-item-status[status~="warning"] { + background-color: #F2B33F; +} + +.project-item-status[status~="error"] { + background-color: #ED4C62; +} + +.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: #7597B9; + text-transform: uppercase; +} + +.project-item-description { + color: #888; + font-size: 90%; +} + +/********* ADD PROJECT ***********/ + +#new-packaged-project { + box-shadow: 0 -1px 5px rgba(0,0,0,0.1); + background-position: calc(100% - 10px) 10px; +} + +#new-packaged-project, +#new-hosted-project { + background-color: #EEE; + border: none; + border-top: 1px solid #DDD; + padding: 10px; + font-weight: bold; +} + +#new-packaged-project:hover, +#new-hosted-project:hover { + background-color: #DDD; +} + +#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 #DDD; + padding: 4px; + margin-top: 4px; +} + + +/********* LENSE ***********/ + + +#lense { + height: 100%; + flex-grow: 1; + display: flex; + z-index: 1; + overflow: hidden; + background-color: rgb(225, 225, 225); + background-image: url('rocket.svg'), url('noise.png'); + 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: rgb(225, 225, 225); + 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 #CCC; + 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 #CCC; + 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: #999; +} + +.project-description { + font-style: italic; + color: #333; +} + +.project-status > p { + text-transform: uppercase; + font-size: 10px; + padding: 2px 10px; + border-radius: 2px; + margin-top: 6px; + line-height: 10px; +} + +.project-validation { + color: #FFF; + display: none; + margin-left: 10px; +} + +.project-validation.valid { + background-color: #70BF53; +} + +.project-validation.warning { + background-color: #F2B33F; +} + +.project-validation.error { + background-color: #ED4C62; +} + +[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: #BBB; +} + +.project-buttons > button { + margin: 0; + font-size: 11px; + border: 1px solid #CCC; + border-left-width: 0; + padding: 5px 15px; + cursor: pointer; + background: rgba(255,255,255,0.4); + text-transform: uppercase; +} + +.project-buttons > button[disabled] { + background-color: transparent; + opacity: 0.4; + 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; +} + +.project-warnings { + border-left: 3px solid #ECB51E; + background-color: rgba(236, 181, 20, 0.1); +} + +.project-errors { + border-left: 3px solid #ED4C62; + background-color: rgba(237,76,98,0.1); +} + +.project-item-warnings { + background-image: url('warning.svg'); +} + +.project-item-errors { + background-image: url('error.svg'); + color: rgb(227, 79, 34); +} + +.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: #E1E1E1; +} + +.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: 1px solid #CCC; + border-right-width: 0; + padding: 2px; + cursor: pointer; + background: rgba(255,255,255,0.4); + text-transform: uppercase; + display: none; +} + +.manifest-header > button[disabled] { + background-color: transparent; + opacity: 0.4; + 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 #C9C9C9; +} + +/* 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 */ diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/remove.svg b/arc-firefox-theme/chrome/browser/devtools/app-manager/remove.svg new file mode 100644 index 0000000..3d36871 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/remove.svg @@ -0,0 +1,10 @@ + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/rocket.svg b/arc-firefox-theme/chrome/browser/devtools/app-manager/rocket.svg new file mode 100644 index 0000000..95c42a4 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/rocket.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/warning.svg b/arc-firefox-theme/chrome/browser/devtools/app-manager/warning.svg new file mode 100644 index 0000000..89e7c6f --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/warning.svg @@ -0,0 +1,13 @@ + + + + + + + -- cgit v1.2.3