1 files changed, 189 insertions, 0 deletions
diff --git a/devtools/startup/aboutdevtools/aboutdevtools.css b/devtools/startup/aboutdevtools/aboutdevtools.css
new file mode 100644
index 0000000000..e054b7566f
--- /dev/null
+++ b/devtools/startup/aboutdevtools/aboutdevtools.css
@@ -0,0 +1,189 @@
+/* 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/. */
+
+:root {
+  --white: #ffffff;
+
+  /* Shared variables */
+  --line-height: 1.5em;
+}
+
+html, body {
+  min-width: 600px;
+}
+
+body {
+  margin-top: 17vh;
+}
+
+p {
+  line-height: var(--line-height);
+}
+
+.box {
+  max-width: 850px;
+  display: flex;
+  flex-shrink: 0;
+  padding: 0 0 50px 0;
+  /* Compensate for the optional scrollbar. */
+  margin-right: calc(100% - 100vw);
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.left-pane {
+  width: 300px;
+  height: 300px;
+  margin-inline-end: 20px;
+  background-image: url(images/otter.svg);
+  background-size: 100%;
+  background-position: 50%;
+  background-repeat: no-repeat;
+  flex-shrink: 0;
+}
+
+.features {
+  max-width: 980px;
+  border-top: 1px solid var(--in-content-border-color);
+}
+
+.features-list {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 40px 20px;
+  margin: 60px 20px;
+  padding: 0;
+}
+
+.feature-icon {
+  width: 60%;
+  max-width: 180px;
+  margin-bottom: 10px;
+}
+
+.feature {
+  list-style: none;
+  text-align: center;
+  margin: 10px 0;
+}
+
+.feature-name {
+  display: block;
+  margin: 10px 0;
+  font-size: 28px;
+  font-weight: 300;
+}
+
+.feature-name span {
+  display: block;
+}
+
+.feature-desc {
+  margin: 1em 20px;
+}
+
+.feature-link {
+  display: block;
+  color: inherit;
+}
+
+.feature-more-link {
+  display: block;
+  margin-top: 10px;
+}
+
+.external::after {
+  content: "";
+
+  display: inline-block;
+  height: 16px;
+  width: 16px;
+
+  margin: -.3rem .15rem 0 0.25rem;
+  vertical-align: middle;
+
+  background-image: url(images/external-link.svg);
+  background-repeat: no-repeat;
+  background-size: 16px 16px;
+
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+.title {
+  font-weight: 300;
+  font-size: 32px;
+  margin-top: 16px;
+  line-height: 44px;
+}
+
+.buttons-container {
+  display: flex;
+  margin-top: 5px;
+}
+
+.buttons-container button:not(:last-child) {
+  margin-right: 10px;
+}
+
+button {
+  margin: 20px 0 0 0;
+  padding: 10px 20px;
+
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 21px;
+  cursor: pointer;
+}
+
+/* Remove light gray outline when clicking on the button */
+button::-moz-focus-inner {
+  border: 0;
+}
+
+[hidden="true"] {
+  display: none;
+}
+
+footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 300px;
+  flex-grow: 1;
+  padding-bottom: 15px;
+  color: var(--white);
+  background: linear-gradient(0, var(--blue-60), var(--blue-80));
+}
+
+.dev-edition-logo {
+  flex-shrink: 0;
+  width: 165px;
+  margin: 20px 50px 0 0;
+}
+
+.footer-message {
+  max-width: 460px;
+}
+
+.footer-message-title {
+  color: var(--white);
+}
+
+.footer-link {
+  display: block;
+  margin-top: 10px;
+}
+
+.footer-link,
+.footer-link:hover,
+.footer-link:visited,
+.footer-link:hover:active {
+  color: var(--white);
+}