diff options
Diffstat (limited to 'devtools/client/webide/themes')
20 files changed, 1063 insertions, 0 deletions
diff --git a/devtools/client/webide/themes/addons.css b/devtools/client/webide/themes/addons.css new file mode 100644 index 000000000..1ae41f2d9 --- /dev/null +++ b/devtools/client/webide/themes/addons.css @@ -0,0 +1,79 @@ +/* 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/. */ + +button { + line-height: 20px; + font-size: 1em; + height: 30px; + max-height: 30px; + min-width: 120px; + padding: 3px; + color: #737980; + border: 1px solid rgba(23,50,77,.4); + border-radius: 5px; + background-color: #f1f1f1; + background-image: linear-gradient(#fff, rgba(255,255,255,.1)); + box-shadow: 0 1px 1px 0 #fff, inset 0 2px 2px 0 #fff; + text-shadow: 0 1px 1px #fefffe; + -moz-appearance: none; + -moz-border-top-colors: none !important; + -moz-border-right-colors: none !important; + -moz-border-bottom-colors: none !important; + -moz-border-left-colors: none !important; +} + +button:hover { + background-image: linear-gradient(#fff, rgba(255,255,255,.6)); + cursor: pointer; +} + +button:hover:active { + background-image: linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.6)); +} + +progress { + height: 30px; + vertical-align: middle; + padding: 0; + width: 120px; +} + +li { + margin: 20px 0; +} + +.name { + display: inline-block; + min-width: 280px; +} + +.status { + display: inline-block; + min-width: 120px; +} + +.warning { + color: #F06; + margin: 0; + font-size: 0.9em; +} + +li[status="unknown"], +li > .uninstall-button, +li > .install-button, +li > progress { + display: none; +} + +li[status="installed"] > .uninstall-button, +li[status="uninstalled"] > .install-button, +li[status="preparing"] > progress, +li[status="downloading"] > progress, +li[status="installing"] > progress { + display: inline; +} + +li:not([status="uninstalled"]) > .warning { + display: none; +} diff --git a/devtools/client/webide/themes/config-view.css b/devtools/client/webide/themes/config-view.css new file mode 100644 index 000000000..019e735df --- /dev/null +++ b/devtools/client/webide/themes/config-view.css @@ -0,0 +1,80 @@ +/* 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 { + background: white; +} + +.action { + display: inline; +} + +.action[hidden] { + display: none; +} + +#device-fields { + font-family: sans-serif; + padding-left: 6px; + width: 100%; + table-layout: auto; + margin-top: 110px; +} + +#custom-value-name { + width: 50%; +} + +header { + background-color: rgba(255, 255, 255, 0.8); + border-bottom: 1px solid #EEE; + position: fixed; + top: 0; + left: 0; + right: 0; + height: 90px; + padding: 10px 20px; +} + +#device-fields td { + background-color: #F9F9F9; + border-bottom: 1px solid #CCC; + border-right: 1px solid #FFF; + font-size: 0.75em; +} + +#device-fields td:first-child { + max-width: 250px; + min-width: 150px; +} + +#device-fields td.preference-name, #device-fields td.setting-name { + width: 50%; + min-width: 400px; + word-break: break-all; +} + +#device-fields button { + display: inline-block; + font-family: sans-serif; + font-size: 0.7rem; + white-space: nowrap; +} + +#device-fields tr.hide, #device-fields button.hide { + display: none; +} + +#device-fields .custom-input { + width: 130px; +} + +#search { + margin-bottom: 20px; + width: 100%; +} + +#search-bar { + width: 80%; +} diff --git a/devtools/client/webide/themes/deck.css b/devtools/client/webide/themes/deck.css new file mode 100644 index 000000000..30537f612 --- /dev/null +++ b/devtools/client/webide/themes/deck.css @@ -0,0 +1,91 @@ +/* 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 { + font: message-box; + font-size: 0.9em; + font-weight: normal; + margin: 0; + height: 100%; + color: #737980; + background-color: #ededed; +} + +body { + margin: 0; + padding: 20px; + background-image: linear-gradient(#fff, #ededed 100px); +} + +.text-input { + display: flex; +} + +.text-input input { + flex: 0.5; + margin-left: 5px; +} + +h1 { + font-size: 2em; + font-weight: lighter; + line-height: 1.2; + margin: 0; + margin-bottom: .5em; +} + +#controls { + float: right; + position: relative; + top: -10px; + right: -10px; +} + +#controls > a { + color: #4C9ED9; + font-size: small; + cursor: pointer; + border-bottom: 1px dotted; + margin-left: 10px; +} + +table { + font-family: monospace; + border-collapse: collapse; +} + +th, td { + padding: 5px; + border: 1px solid #eee; +} + +th { + min-width: 100px; +} + +th:first-of-type, td:first-of-type { + text-align: left; +} + +li { + list-style: none; + padding: 2px; +} + +li > label:hover { + background-color: rgba(0,0,0,0.02); +} + +li > label > span { + display: inline-block; +} + +input, select { + box-sizing: border-box; +} + +select { + padding-top: 2px; + padding-bottom: 2px; +} diff --git a/devtools/client/webide/themes/default-app-icon.png b/devtools/client/webide/themes/default-app-icon.png Binary files differnew file mode 100644 index 000000000..f186d9c62 --- /dev/null +++ b/devtools/client/webide/themes/default-app-icon.png diff --git a/devtools/client/webide/themes/details.css b/devtools/client/webide/themes/details.css new file mode 100644 index 000000000..dc73d5357 --- /dev/null +++ b/devtools/client/webide/themes/details.css @@ -0,0 +1,138 @@ +/* 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/. */ + +body { + margin: 0; + background-color: white; + font: message-box; +} + +.hidden { + display: none; +} + +h1, h3, p { + margin: 0; +} + +#toolbar { + background-color: #D8D8D8; + border-bottom: 1px solid #AAA; +} + +#toolbar > button { + -moz-appearance: none; + background-color: transparent; + border-width: 0 1px 0 0; + border-color: #AAA; + border-style: solid; + margin: 0; + padding: 0 12px; + font-family: inherit; + font-weight: bold; + height: 24px; +} + +#toolbar > button:hover { + background-color: #CCC; + cursor: pointer; +} + +#validation_status { + float: right; + text-transform: uppercase; + font-size: 10px; + line-height: 24px; + padding: 0 12px; + color: white; +} + + +header { + padding: 20px 0; +} + +header > div { + vertical-align: top; + display: flex; + flex-direction: column; +} + +#icon { + height: 48px; + width: 48px; + float: left; + margin: 0 20px; +} + +h1, #type { + line-height: 24px; + height: 24px; /* avoid collapsing if empty */ + display: block; +} + +h1 { + font-size: 20px; + overflow-x: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +#type { + font-size: 10px; + text-transform: uppercase; + color: #777; +} + +main { + padding-left: 88px; +} + +h3 { + color: #999; + font-size: 10px; + font-weight: normal; +} + +main > p { + margin-bottom: 20px; +} + +.validation_messages { + margin-left: 74px; + list-style: none; + border-left: 4px solid transparent; + padding: 0 10px;; +} + + +body.valid #validation_status { + background-color: #81D135; +} + +body.warning #validation_status { + background-color: #FFAC00; +} + +body.error #validation_status { + background-color: #ED4C62; +} + +#warningslist { + border-color: #FFAC00 +} + +#errorslist { + border-color: #ED4C62; +} + +#validation_status > span { + display: none; +} + +body.valid #validation_status > .valid, +body.warning #validation_status > .warning, +body.error #validation_status > .error { + display: inline; +} diff --git a/devtools/client/webide/themes/icons.png b/devtools/client/webide/themes/icons.png Binary files differnew file mode 100644 index 000000000..5e1dd5c64 --- /dev/null +++ b/devtools/client/webide/themes/icons.png diff --git a/devtools/client/webide/themes/jar.mn b/devtools/client/webide/themes/jar.mn new file mode 100644 index 000000000..4235278da --- /dev/null +++ b/devtools/client/webide/themes/jar.mn @@ -0,0 +1,24 @@ +# 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/. + +webide.jar: +% skin webide classic/1.0 %skin/ +* skin/webide.css (webide.css) + skin/icons.png (icons.png) + skin/details.css (details.css) + skin/newapp.css (newapp.css) + skin/throbber.svg (throbber.svg) + skin/deck.css (deck.css) + skin/addons.css (addons.css) + skin/runtimedetails.css (runtimedetails.css) + skin/permissionstable.css (permissionstable.css) + skin/monitor.css (monitor.css) + skin/config-view.css (config-view.css) + skin/wifi-auth.css (wifi-auth.css) + skin/logs.css (logs.css) + skin/panel-listing.css (panel-listing.css) + skin/simulator.css (simulator.css) + skin/rocket.svg (rocket.svg) + skin/noise.png (noise.png) + skin/default-app-icon.png (default-app-icon.png) diff --git a/devtools/client/webide/themes/logs.css b/devtools/client/webide/themes/logs.css new file mode 100644 index 000000000..446b6e41c --- /dev/null +++ b/devtools/client/webide/themes/logs.css @@ -0,0 +1,18 @@ +html, body { + background: var(--theme-body-background); + color: var(--theme-body-color); +} + +h1 { + font-size: 1.2em; +} + +ul { + padding: 0; + font-size: 1em; +} + +li { + list-style: none; + margin: 0; +} diff --git a/devtools/client/webide/themes/monitor.css b/devtools/client/webide/themes/monitor.css new file mode 100644 index 000000000..ba4b298ed --- /dev/null +++ b/devtools/client/webide/themes/monitor.css @@ -0,0 +1,86 @@ +/* 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/. */ + +/* Graph */ +.graph { + height: 500px; + width: 100%; + padding-top: 20px; + padding-bottom: 20px; + margin-bottom: 30px; + background-color: white; +} +.graph > svg, .sidebar { + display: inline-block; + vertical-align: top; +} +.disabled { + opacity: 0.5; +} +.graph.disabled { + height: 30px; +} +.graph.disabled > svg { + visibility: hidden; +} +.curve path, .event-slot line { + fill: none; + stroke-width: 1.5px; +} +.axis line { + fill: none; + stroke: #000; + shape-rendering: crispEdges; +} +.axis path { + fill: none; + stroke: black; + stroke-width: 1px; + shape-rendering: crispEdges; +} +.tick text, .x.ruler text, .y.ruler text { + font-size: 0.9em; +} +.x.ruler text { + text-anchor: middle; +} +.y.ruler text { + text-anchor: end; +} + +/* Sidebar */ +.sidebar { + width: 150px; + overflow-x: hidden; +} +.sidebar label { + cursor: pointer; + display: block; +} +.sidebar span:not(.color) { + vertical-align: 13%; +} +.sidebar input { + visibility: hidden; +} +.sidebar input:hover { + visibility: visible; +} +.graph-title { + margin-top: 5px; + font-size: 1.2em; +} +.legend-color { + display: inline-block; + height: 10px; + width: 10px; + margin-left: 1px; + margin-right: 3px; +} +.legend-id { + font-size: .9em; +} +.graph.disabled > .sidebar > .legend { + display: none; +} diff --git a/devtools/client/webide/themes/moz.build b/devtools/client/webide/themes/moz.build new file mode 100644 index 000000000..aac3a838c --- /dev/null +++ b/devtools/client/webide/themes/moz.build @@ -0,0 +1,7 @@ +# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- +# vim: set filetype=python: +# 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/. + +JAR_MANIFESTS += ['jar.mn'] diff --git a/devtools/client/webide/themes/newapp.css b/devtools/client/webide/themes/newapp.css new file mode 100644 index 000000000..0b351a40a --- /dev/null +++ b/devtools/client/webide/themes/newapp.css @@ -0,0 +1,54 @@ +/* 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/. */ + +dialog { + -moz-appearance: none; + background-image: linear-gradient(rgb(255, 255, 255), rgb(237, 237, 237) 100px); + font-family: "Clear Sans", sans-serif; + color: #424E5A; + overflow-y: scroll; +} + +.header-name { + font-size: 1.5rem; + font-weight: normal; + margin: 15px 0; +} + +richlistbox { + -moz-appearance: none; + overflow-y: auto; + border: 1px solid #424E5A; +} + +richlistitem { + padding: 6px 0; +} + +richlistitem:not([selected="true"]):hover { + background-color: rgba(0,0,0,0.04); +} + +richlistitem > vbox > label { + margin: 0; + font-size: 1.1em; +} + +richlistbox > description { + margin: 8px; +} + +richlistitem { + -moz-box-align: start; +} + +richlistitem > image { + height: 24px; + width: 24px; + margin: 0 6px; +} + +textbox { + font-size: 1.2rem; +} diff --git a/devtools/client/webide/themes/noise.png b/devtools/client/webide/themes/noise.png Binary files differnew file mode 100644 index 000000000..b3c42acae --- /dev/null +++ b/devtools/client/webide/themes/noise.png diff --git a/devtools/client/webide/themes/panel-listing.css b/devtools/client/webide/themes/panel-listing.css new file mode 100644 index 000000000..06e51211c --- /dev/null +++ b/devtools/client/webide/themes/panel-listing.css @@ -0,0 +1,150 @@ +/* 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 { + font: message-box; + font-size: 11px; + font-weight: 400; +} + +label, +.panel-item, +#project-panel-projects, +#runtime-panel-projects { + display: block; + float: left; + width: 100%; + text-align: left; +} + +.project-image, +.panel-item span { + display: inline-block; + float: left; + line-height: 20px; +} + +.project-image { + margin-right: 10px; + max-height: 20px; +} + +.panel-header { + color: #ACACAC; + text-transform: uppercase; + line-height: 200%; + margin: 5px 5px 0 5px; + font-weight: 700; + width: 100%; +} + +.panel-header:first-child { + margin-top: 0; +} + +.panel-header[hidden], .panel-item[hidden] { + display: none; +} + +#runtime-panel-simulator, +.panel-item-complex { + clear: both; + position: relative; +} + +.panel-item span { + display: block; + float: left; + overflow: hidden; + text-overflow: ellipsis; + width: 75%; + white-space: nowrap; +} + +.panel-item { + -moz-appearance: none; + -moz-box-align: center; + padding: 3%; + display: block; + width: 94%; + cursor: pointer; + border-top: 1px solid transparent; + border-left: 0; + border-bottom: 1px solid #CCC; + border-right: 0; + background-color: transparent; +} + +button.panel-item { + background-position: 5px 5px; + background-repeat: no-repeat; + background-size: 14px 14px; + padding-left: 25px; + width: 100%; +} + +.panel-item:disabled { + background-color: #FFF; + color: #5A5A5A; + opacity: 0.5; + cursor: default; +} + +.refresh-icon { + background-image: url("chrome://devtools/skin/images/reload.svg"); + height: 14px; + width: 14px; + border: 0; + opacity: 0.6; + display: inline-block; + margin: 3px; + float: right; +} + +.panel-item:not(:disabled):hover, +button.panel-item:not(:disabled):hover { + background-color: #CCF0FD; + border-top: 1px solid #EDEDED; +} + +.configure-button { + display: inline-block; + height: 30px; + width: 30px; + background-color: transparent; + background-image: -moz-image-rect(url("icons.png"), 104, 462, 129, 438); + background-position: center center; + background-repeat: no-repeat; + background-size: 14px 14px; + position: absolute; + top: -2px; + right: 0; + border: 0; +} + +.configure-button:hover { + cursor: pointer; +} + +.project-panel-item-openpackaged { background-image: -moz-image-rect(url("icons.png"), 260, 438, 286, 412); } +.runtime-panel-item-simulator { background-image: -moz-image-rect(url("icons.png"), 0, 438, 26, 412); } +.runtime-panel-item-other { background-image: -moz-image-rect(url("icons.png"), 26, 438, 52, 412); } +#runtime-permissions { background-image: -moz-image-rect(url("icons.png"), 105, 438, 131, 412); } +#runtime-screenshot { background-image: -moz-image-rect(url("icons.png"), 131, 438, 156, 412); } + +#runtime-preferences, +#runtime-settings { background-image: -moz-image-rect(url("icons.png"), 105, 464, 131, 438); } + +#runtime-panel-nousbdevice, +#runtime-details { background-image: -moz-image-rect(url("icons.png"), 156, 438, 182, 412); } + +.runtime-panel-item-usb, +#runtime-disconnect { background-image: -moz-image-rect(url("icons.png"), 52, 438, 78, 412); } + +.runtime-panel-item-wifi, +.project-panel-item-openhosted { background-image: -moz-image-rect(url("icons.png"), 208, 438, 234, 412); } + +.project-panel-item-newapp, +#runtime-panel-noadbhelper, +#runtime-panel-installsimulator { background-image: -moz-image-rect(url("icons.png"), 234, 438, 260, 412); } diff --git a/devtools/client/webide/themes/permissionstable.css b/devtools/client/webide/themes/permissionstable.css new file mode 100644 index 000000000..3a45e0d74 --- /dev/null +++ b/devtools/client/webide/themes/permissionstable.css @@ -0,0 +1,23 @@ +/* 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 { + background: white; +} + +.permissionstable td { + text-align: center; +} + +.permallow { + color: rgb(152,207,57); +} + +.permprompt { + color: rgb(0,158,237); +} + +.permdeny { + color: rgb(204,73,8); +} diff --git a/devtools/client/webide/themes/rocket.svg b/devtools/client/webide/themes/rocket.svg new file mode 100644 index 000000000..a0cca5c21 --- /dev/null +++ b/devtools/client/webide/themes/rocket.svg @@ -0,0 +1,12 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24"> + <g opacity="0.1"> + <path fill="#fff" d="M12,2.3c-1.127,0-3.333,3.721-4.084,7.411l-2.535,2.535v6.619l1.767,0l2.464-2.464 c0.252,0.264,0.529,0.486,0.827,0.662h3.118c0.299-0.175,0.579-0.397,0.831-0.662l2.464,2.464l1.767,0v-6.619l-2.535-2.535 C15.333,6.021,13.127,2.3,12,2.3z M12.003,6.181c0.393,0,1.084,1.103,1.515,2.423c-0.466-0.087-0.963-0.135-1.481-0.135 c-0.545,0-1.066,0.054-1.553,0.15C10.914,7.292,11.608,6.181,12.003,6.181z"/> + <path fill="#fff" d="M12.792,18.755c0,0.778-0.603,1.408-0.805,1.408c-0.201,0-0.805-0.631-0.805-1.408 c0-0.301,0.055-0.579,0.147-0.809h-0.932c-0.109,0.403-0.171,0.854-0.171,1.33c0,1.714,1.33,3.104,1.774,3.104 s1.774-1.389,1.774-3.103c0-0.477-0.062-0.927-0.171-1.331l-0.957,0C12.738,18.175,12.792,18.453,12.792,18.755z"/> + <path fill="#414042" d="M12,2c-1.127,0-3.333,3.721-4.084,7.411l-2.535,2.535v6.619l1.767,0l2.464-2.464 c0.252,0.264,0.529,0.486,0.827,0.662h3.118c0.299-0.175,0.579-0.397,0.831-0.662l2.464,2.464l1.767,0v-6.619l-2.535-2.535 C15.333,5.721,13.127,2,12,2z M12.003,5.881c0.393,0,1.084,1.103,1.515,2.423c-0.466-0.087-0.963-0.135-1.481-0.135 c-0.545,0-1.066,0.054-1.553,0.15C10.914,6.992,11.608,5.881,12.003,5.881z"/> + <path fill="#414042" d="M12.792,18.455c0,0.778-0.603,1.408-0.805,1.408c-0.201,0-0.805-0.631-0.805-1.408 c0-0.301,0.055-0.579,0.147-0.809h-0.932c-0.109,0.403-0.171,0.854-0.171,1.33c0,1.714,1.33,3.104,1.774,3.104 s1.774-1.389,1.774-3.103c0-0.477-0.062-0.927-0.171-1.331l-0.957,0C12.738,17.875,12.792,18.153,12.792,18.455z"/> + </g> +</svg> diff --git a/devtools/client/webide/themes/runtimedetails.css b/devtools/client/webide/themes/runtimedetails.css new file mode 100644 index 000000000..91ced5bff --- /dev/null +++ b/devtools/client/webide/themes/runtimedetails.css @@ -0,0 +1,25 @@ +/* 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 { + background: white; +} + +#devicePrivileges { + font-family: monospace; + padding-left: 6px; +} + +#devtools-check > a { + color: #4C9ED9; + cursor: pointer; +} + +.action { + display: inline; +} + +.action[hidden] { + display: none; +} diff --git a/devtools/client/webide/themes/simulator.css b/devtools/client/webide/themes/simulator.css new file mode 100644 index 000000000..036cfcdb4 --- /dev/null +++ b/devtools/client/webide/themes/simulator.css @@ -0,0 +1,41 @@ +/* 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/. */ + +select:not(.custom) > option[value="custom"] { + display: none; +} + +select, input[type="text"] { + width: 13rem; +} + +input[name="name"] { + height: 1.8rem; +} + +input[type="number"] { + width: 6rem; +} + +input[type="text"], input[type="number"] { + padding-left: 0.2rem; +} + +li > label:hover { + background-color: transparent; +} + +ul { + padding-left: 0; +} + +.label { + width: 6rem; + padding: 0.2rem; + text-align: right; +} + +.hidden { + display: none; +} diff --git a/devtools/client/webide/themes/throbber.svg b/devtools/client/webide/themes/throbber.svg new file mode 100644 index 000000000..d89fb3851 --- /dev/null +++ b/devtools/client/webide/themes/throbber.svg @@ -0,0 +1,22 @@ +<!-- 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/. --> + +<svg xmlns="http://www.w3.org/2000/svg" + width="24" height="24" viewBox="0 0 64 64"> + <g> + <rect x="30" y="4" width="4" height="15" transform="rotate(0, 32, 32)" fill="#BBB"/> + <rect x="30" y="4" width="4" height="15" transform="rotate(30, 32, 32)" fill="#AAA"/> + <rect x="30" y="4" width="4" height="15" transform="rotate(60, 32, 32)" fill="#999"/> + <rect x="30" y="4" width="4" height="15" transform="rotate(90, 32, 32)" fill="#888"/> + <rect x="30" y="4" width="4" height="15" transform="rotate(120, 32, 32)" fill="#777"/> + <rect x="30" y="4" width="4" height="15" transform="rotate(150, 32, 32)" fill="#666"/> + <rect x="30" y="4" width="4" height="15" transform="rotate(180, 32, 32)" fill="#555"/> + <rect x="30" y="4" width="4" height="15" transform="rotate(210, 32, 32)" fill="#444"/> + <rect x="30" y="4" width="4" height="15" transform="rotate(240, 32, 32)" fill="#333"/> + <rect x="30" y="4" width="4" height="15" transform="rotate(270, 32, 32)" fill="#222"/> + <rect x="30" y="4" width="4" height="15" transform="rotate(300, 32, 32)" fill="#111"/> + <rect x="30" y="4" width="4" height="15" transform="rotate(330, 32, 32)" fill="#000"/> + <animateTransform attributeName="transform" type="rotate" calcMode="discrete" values="0 32 32;30 32 32;60 32 32;90 32 32;120 32 32;150 32 32;180 32 32;210 32 32;240 32 32;270 32 32;300 32 32;330 32 32" dur="0.8s" repeatCount="indefinite"/> + </g> +</svg> diff --git a/devtools/client/webide/themes/webide.css b/devtools/client/webide/themes/webide.css new file mode 100644 index 000000000..0dea91a5f --- /dev/null +++ b/devtools/client/webide/themes/webide.css @@ -0,0 +1,149 @@ +/* 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/. */ + +/* + * + * Icons.png: + * + * actions icons: 100x100. Starts at 0x0. + * menu icons: 26x26. Starts at 312x0. + * anchors icons: 27x16. Starts at 364x0. + * + */ + +#main-toolbar { + padding: 0 12px; +} + +#action-buttons-container { + -moz-box-pack: center; + height: 50px; +} + +#panel-buttons-container { + height: 50px; + margin-top: -50px; + pointer-events: none; +} + +#panel-buttons-container > .panel-button { + pointer-events: auto; +} + +#action-busy-undetermined { + height: 24px; + width: 24px; +} + +window.busy .action-button, +window:not(.busy) #action-busy, +window.busy-undetermined #action-busy-determined, +window.busy-determined #action-busy-undetermined { + display: none; +} + +/* Panel buttons - runtime */ + +#runtime-panel-button > .panel-button-image { + list-style-image: url('icons.png'); + -moz-image-region: rect(78px,438px,104px,412px); + width: 13px; + height: 13px; +} + +#runtime-panel-button[active="true"] > .panel-button-image { + -moz-image-region: rect(78px,464px,104px,438px); +} + +/* Action buttons */ + +.action-button { + -moz-appearance: none; + border-width: 0; + margin: 0; + padding: 0; + list-style-image: url('icons.png'); +} + +.action-button[disabled="true"] { + opacity: 0.4; +} + +.action-button > .toolbarbutton-icon { + width: 40px; + height: 40px; +} + +.action-button > .toolbarbutton-text { + display: none; +} + +#action-button-play { -moz-image-region: rect(0,100px,100px,0) } +#action-button-stop { -moz-image-region: rect(0,200px,100px,100px) } +#action-button-debug { -moz-image-region: rect(0,300px,100px,200px) } + +#action-button-play:not([disabled="true"]):hover { -moz-image-region: rect(200px,100px,300px,0) } +#action-button-stop:not([disabled="true"]):hover { -moz-image-region: rect(200px,200px,300px,100px) } +#action-button-debug:not([disabled="true"]):not([active="true"]):hover { -moz-image-region: rect(200px,300px,300px,200px) } + +#action-button-play.reload { -moz-image-region: rect(0,400px,100px,303px) } +#action-button-play.reload:hover { -moz-image-region: rect(200px,400px,300px,303px) } + +#action-button-debug[active="true"] { -moz-image-region: rect(100px,300px,200px,200px) } + +/* Panels */ + +.panel-list { + display: none; + position: relative; + max-width: 190px; + overflow: hidden; +} + +#project-listing-panel { + max-width: 165px; +} + +.panel-list-wrapper { + height: 100%; + width: 100%; + min-width: 100px; + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; +} + +.panel-list-wrapper > iframe { + height: inherit; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; +} + +[sidebar-displayed] { + display: block; +} + +/* Main view */ + +#deck { + 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; +%ifndef XP_MACOSX + border-top: 1px solid #AAA; +%endif +} + +.devtools-horizontal-splitter { + position: relative; + border-bottom: 1px solid #aaa; +} diff --git a/devtools/client/webide/themes/wifi-auth.css b/devtools/client/webide/themes/wifi-auth.css new file mode 100644 index 000000000..de6afc94e --- /dev/null +++ b/devtools/client/webide/themes/wifi-auth.css @@ -0,0 +1,64 @@ +/* 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 { + background: white; +} + +body { + display: flex; + flex-direction: column; + height: 90%; +} + +div { + margin-bottom: 1em; +} + +#qr-code { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; +} + +#qr-code-wrapper { + flex: 1; + width: 100%; + margin: 2em 0; + text-align: center; +} + +#qr-code img { + height: 100%; +} + +.toggle-scanner { + color: #4C9ED9; + font-size: small; + cursor: pointer; + border-bottom: 1px dotted; +} + +#token { + display: none; +} + +body[token] > #token { + display: flex; + flex-direction: column; +} + +body[token] > #qr-code { + display: none; +} + +#token pre, +#token a { + align-self: center; +} + +#qr-size-note { + text-align: center +} |
