docs: Add tweaks to the outline panel page (#18697)

Thought we could be extra clear here with the meaning of "singleton
buffers".

Release Notes:

- N/A

docs/src/outline-panel.md

@@ -2,25 +2,30 @@
 
 In addition to the modal outline (`cmd-shift-o`), Zed offers an outline panel. The outline panel can be deployed via `cmd-shift-b` (`outline panel: toggle focus` via the command palette), or by clicking the `Outline Panel` button in the status bar.
 
-When viewing a "singleton" buffer, the outline panel works similarly to that of the outline modal - it displays the outline of the current buffer's symbols, as reported by tree-sitter. Clicking on an entry allows you to jump to the associated section in the file. The outline view will also automatically scroll to the section associated with the current cursor position within the file.
+When viewing a "singleton" buffer (i.e., a single file on a tab), the outline panel works similarly to that of the outline modal－it displays the outline of the current buffer's symbols, as reported by tree-sitter. Clicking on an entry allows you to jump to the associated section in the file. The outline view will also automatically scroll to the section associated with the current cursor position within the file.
 
 ![Using the outline panel in a singleton buffer](https://zed.dev/img/outline-panel/singleton.png)
 
+## Usage with multibuffers
+
 The outline panel truly excels when used with multi-buffers. Here are some examples of its versatility:
 
-1. Project Search Results:
+### Project Search Results
 
 Get an overview of search results across your project.
+
 ![Using the outline panel in a project search multi-buffer](https://zed.dev/img/outline-panel/project-search.png)
 
-2. Project Diagnostics:
+### Project Diagnostics
 
 View a summary of all errors and warnings reported by the language server.
+
 ![Using the outline panel while viewing project diagnostics multi-buffer](https://zed.dev/img/outline-panel/project-diagnostics.png)
 
-3. Find All References:
+### Find All References
 
 Quickly navigate through all references when using the `editor: find all references` action.
+
 ![Using the outline panel while viewing `find all references` multi-buffer](https://zed.dev/img/outline-panel/find-all-references.png)
 
 The outline view provides a great way to quickly navigate to specific parts of your code and helps you maintain context when working with large result sets in multi-buffers.

docs/theme/css/general.css

@@ -182,6 +182,7 @@ h6:target::before {
 .content img,
 .content video {
   max-width: 100%;
+  background-color: var(--media-bg);
   border: 1px solid;
   border-color: var(--border);
   border-radius: 8px;

docs/theme/css/variables.css

@@ -26,6 +26,8 @@
   --border-light: hsl(220, 13%, 90%);
   --border-hover: hsl(220, 13%, 70%);
 
+  --media-bg: hsl(50, 25%, 92%);
+
   --sidebar-fg: hsl(0, 0%, 0%);
   --sidebar-non-existant: #aaaaaa;
   --sidebar-active: hsl(220, 93%, 42%);
@@ -98,6 +100,8 @@
   --border-light: hsl(220, 13%, 90%);
   --border-hover: hsl(220, 13%, 40%);
 
+  --media-bg: hsl(220, 13%, 8%);
+
   --sidebar-bg: hsl(220, 13%, 10%);
   --sidebar-fg: hsl(220, 14%, 71%);
   --sidebar-non-existant: #505254;