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/device.css | 410 +++++++++++++++++++++ 1 file changed, 410 insertions(+) create mode 100644 arc-firefox-theme/chrome/browser/devtools/app-manager/device.css (limited to 'arc-firefox-theme/chrome/browser/devtools/app-manager/device.css') 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; +} -- cgit v1.2.3