1 files changed, 176 insertions, 0 deletions
diff --git a/toolkit/themes/shared/aboutSupport.css b/toolkit/themes/shared/aboutSupport.css
new file mode 100644
index 0000000000..b2fb5ed9b6
--- /dev/null
+++ b/toolkit/themes/shared/aboutSupport.css
@@ -0,0 +1,176 @@
+/* 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/. */
+
+@import url("chrome://global/skin/in-content/info-pages.css");
+
+#contents {
+  clear: both;
+}
+
+.major-section {
+  margin-block: 2em 1em;
+  font-size: large;
+  text-align: start;
+  font-weight: bold;
+}
+
+button {
+  margin-inline: 0 8px;
+}
+
+th.title-column {
+  white-space: nowrap;
+  width: 0;
+  font-size: medium;
+}
+
+td.integer {
+  text-align: end;
+  font-family: monospace;
+}
+
+/* Codec support table w/ zebra striping */
+:root {
+  --codec-bg-header: #bfbfc9;
+  --codec-bg-supported-even: #b3ffe3;
+  --codec-bg-supported-odd: #54ffbd;
+  --codec-bg-unsupported-even: #ffdfe7;
+  --codec-bg-unsupported-odd: #ffbdc5;
+  --codec-text-name-even: var(--in-content-box-background);
+  --codec-text-name-odd: var(--in-content-box-background-odd);
+  --codec-text-other: var(--in-content-text-color);
+  --codec-text-supported: #15141a;
+  --codec-text-unsupported: #15141a;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --codec-bg-header: #42414d;
+  }
+}
+
+#codec-table {
+  text-align: center;
+  white-space: nowrap;
+  width: auto;
+}
+
+#codec-table tr {
+  color: var(--codec-text-other);
+}
+
+#codec-table th {
+  color: var(--codec-text-other);
+  background-color: var(--codec-bg-header);
+}
+
+#codec-table td:first-child {
+  text-align: start;
+  unicode-bidi: normal;
+  font-weight: 600;
+}
+
+#codec-table tr:nth-child(even) {
+  background-color: var(--codec-text-name-even);
+}
+
+#codec-table tr:nth-child(odd) {
+  background-color: var(--codec-text-name-odd);
+}
+
+#codec-table tr > td.unsupported {
+  color: var(--codec-text-unsupported);
+}
+
+#codec-table tr > td.supported {
+  color: var(--codec-text-supported);
+}
+
+#codec-table tr > td.lack-of-extension {
+  font-weight: var(--font-weight-bold);
+}
+
+#codec-table tr:nth-child(even) > td.unsupported {
+  background-color: var(--codec-bg-unsupported-even);
+}
+
+#codec-table tr:nth-child(odd) > td.unsupported {
+  background-color: var(--codec-bg-unsupported-odd);
+}
+
+#codec-table tr:nth-child(even) > td.supported {
+  background-color: var(--codec-bg-supported-even);
+}
+
+#codec-table tr:nth-child(odd) > td.supported {
+  background-color: var(--codec-bg-supported-odd);
+}
+
+#codec-table tr:nth-child(even) > td.lack-of-extension {
+  background-color: var(--in-content-box-background-even);
+}
+
+#codec-table tr:nth-child(odd) > td.lack-of-extension {
+  background-color: var(--in-content-box-background-odd);
+}
+
+#update-dir-row > td:dir(rtl),
+#profile-row > td:dir(rtl) {
+  /* Overrides info-pages.css to display the buttons in the right order compared to the text */
+  unicode-bidi: normal;
+}
+
+.prefs-table {
+  table-layout: fixed;
+}
+
+.pref-name {
+  width: 70%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.pref-value {
+  width: 30%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+#crashes-table th:first-child {
+  width: 50%;
+}
+
+#features-table th:first-child,
+#remote-processes-table th:first-child {
+  width: 30%;
+}
+
+#features-table th:nth-child(2) {
+  width: 20%;
+}
+
+#reset-box,
+#safe-mode-box {
+  display: none;
+}
+
+#reset-box > h3 {
+  margin-top: 0;
+}
+
+.action-box button {
+  display: block;
+}
+
+#enumerate-database-result,
+#verify-place-result {
+  max-height: 200px;
+  overflow: auto;
+  text-align: left;
+  direction: ltr;
+}
+
+.hidden {
+  display: none;
+}