1 files changed, 112 insertions, 0 deletions
diff --git a/devtools/client/framework/connect/connect.css b/devtools/client/framework/connect/connect.css
new file mode 100644
index 000000000..23959b93b
--- /dev/null
+++ b/devtools/client/framework/connect/connect.css
@@ -0,0 +1,112 @@
+:root {
+  font: caption;
+}
+
+html {
+  background-color: #111;
+}
+
+body {
+  font-family: Arial, sans-serif;
+  color: white;
+  max-width: 600px;
+  margin: 30px auto 0;
+  box-shadow: 0 2px 3px black;
+  background-color: #3C3E40;
+}
+
+h1 {
+  margin: 0;
+  padding: 20px;
+  background-color: rgba(0,0,0,0.12);
+  background-image: radial-gradient(ellipse farthest-corner at center top , rgb(159, 223, 255), rgba(101, 203, 255, 0.3)), radial-gradient(ellipse farthest-side at center top , rgba(101, 203, 255, 0.4), rgba(101, 203, 255, 0));
+  background-size: 100% 2px, 100% 5px;
+  background-repeat: no-repeat;
+  border-bottom: 1px solid rgba(0,0,0,0.1);
+}
+
+form {
+  display: inline-block;
+}
+
+label {
+  display: block;
+  margin: 10px;
+}
+
+label > span {
+  display: inline-block;
+  min-width: 150px;
+  text-align: right;
+  margin-right: 10px;
+}
+
+#submit {
+  float: right;
+}
+
+input:invalid {
+  box-shadow: 0 0 2px 2px #F06;
+}
+
+section {
+  min-height: 160px;
+  margin: 60px 20px;
+  display: none; /* By default, hidden */
+}
+
+.error-message {
+  color: red;
+}
+
+.error-message:not(.active) {
+  display: none;
+}
+
+body:not(.actors-mode):not(.connecting) > #connection-form {
+  display: block;
+}
+
+body.actors-mode > #actors-list {
+  display: block;
+}
+
+body.connecting > #connecting {
+  display: block;
+}
+
+#connecting {
+  text-align: center;
+}
+
+#connecting > p > img {
+  vertical-align: top;
+}
+
+.actors {
+  padding-left: 0;
+}
+
+.actors > a {
+  display: block;
+  margin: 5px;
+  padding: 5px;
+  color: white;
+}
+
+.remote-process {
+  font-style: italic;
+  opacity: 0.8;
+}
+
+footer {
+  padding: 10px;
+  background-color: rgba(0,0,0,0.12);
+  border-top: 1px solid rgba(0,0,0,0.1);
+  font-size: small;
+}
+
+footer > a,
+footer > a:visited {
+  color: white;
+}