feat: add advanced context actions and optional translation

options/options.css

@@ -1,7 +1,7 @@
 :root {
   --fg: #15141a;
-  --fg-dim: #5b5b66;
-  --bg: transparent;
+  --fg-dim: #38383d;
+  --bg: #ffffff;
   --border: #8f8f9d;
   --field-bg: #ffffff;
   --accent: #0060df;
@@ -10,7 +10,8 @@
 @media (prefers-color-scheme: dark) {
   :root {
     --fg: #fbfbfe;
-    --fg-dim: #b1b1bd;
+    --fg-dim: #e0e0e6;
+    --bg: #23222b;
     --border: #8f8f9d;
     --field-bg: #2b2a33;
     --accent: #0df;
@@ -28,6 +29,10 @@ body {
   max-width: 42rem;
 }
 
+.intro {
+  margin: 0 0 1.5rem;
+}
+
 .field {
   margin-bottom: 1.15rem;
 }
@@ -118,6 +123,47 @@ kbd {
   font-size: 0.9em;
 }
 
+.note h2 {
+  margin: 0 0 0.5rem;
+  color: var(--fg);
+  font-size: 1rem;
+}
+
+.note p {
+  margin: 0 0 0.75rem;
+}
+
+.note code {
+  overflow-wrap: anywhere;
+}
+
+.project-links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem 0.65rem;
+  margin-top: 1rem;
+}
+
+.project-link {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.65rem;
+}
+
+.link-separator {
+  color: var(--fg-dim);
+}
+
+a {
+  color: var(--accent);
+  text-decoration: underline;
+}
+
+a:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
 /* The inline about:addons surface can be very narrow. */
 @media (max-width: 26rem) {
   .actions {
@@ -125,3 +171,10 @@ kbd {
     flex-direction: column;
   }
 }
+
+[hidden] { display: none !important; }
+.dependent-settings {
+  border-inline-start: 2px solid var(--border);
+  padding-inline-start: 1rem;
+  margin-bottom: 1.15rem;
+}