Fix video rendering on docs (#14764)

Conrad Irwin created 2 years ago

Release Notes:

- N/A

Change summary

docs/src/multibuffers.md   |   9 +
docs/theme/css/general.css | 313 ++++++++++++++++++++-------------------
2 files changed, 171 insertions(+), 151 deletions(-)

Detailed changes

docs/src/multibuffers.md

@@ -4,7 +4,14 @@ One of the superpowers Zed gives you is the ability to edit multiple files simul
 
 ## Editing in a multibuffer
 
-![Editing the results of a search multibuffer.](https://customer-snccc0j9v3kfzkif.cloudflarestream.com/bda0a6584c19f4b39e58a263c0ae4358/downloads/default.mp4)
+<div class="video" style="position: relative; padding-top: 71.71314741035857%;">
+  <iframe
+    src="https://customer-snccc0j9v3kfzkif.cloudflarestream.com/bda0a6584c19f4b39e58a263c0ae4358/iframe?muted=true&preload=true&loop=true&autoplay=true&poster=https%3A%2F%2Fcustomer-snccc0j9v3kfzkif.cloudflarestream.com%2Fbda0a6584c19f4b39e58a263c0ae4358%2Fthumbnails%2Fthumbnail.jpg%3Ftime%3D%26height%3D600&controls=false"
+    style="border: none; position: absolute; top: 0; left: 0; height: 100%; width: 100%;"
+    allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
+    allowfullscreen="true"
+  ></iframe>
+</div>
 
 Editing a multibuffer is the same as editing a normal file. Changes you make will be reflected in the open copies of that file in the rest of the editor, and you can save all files with `editor: Save` (bound to `cmd-s` on macOS, `ctrl-s` on Windows/Linux, or `:w` in Vim mode).
 

docs/theme/css/general.css

@@ -3,43 +3,43 @@
 @import "variables.css";
 
 :root {
-  /* Browser default font-size is 16px, this way 1 rem = 10px */
-  font-size: 62.5%;
-  color-scheme: var(--color-scheme);
+    /* Browser default font-size is 16px, this way 1 rem = 10px */
+    font-size: 62.5%;
+    color-scheme: var(--color-scheme);
 }
 
 html {
-  font-family: var(--font);
-  color: var(--fg);
-  background-color: var(--bg);
-  text-size-adjust: none;
-  -webkit-text-size-adjust: none;
+    font-family: var(--font);
+    color: var(--fg);
+    background-color: var(--bg);
+    text-size-adjust: none;
+    -webkit-text-size-adjust: none;
 
-  text-rendering: geometricPrecision !important;
-  -webkit-font-smoothing: antialiased !important;
-  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.005);
+    text-rendering: geometricPrecision !important;
+    -webkit-font-smoothing: antialiased !important;
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.005);
 }
 
 body {
-  margin: 0;
-  font-size: 1.6rem;
-  overflow-x: hidden;
+    margin: 0;
+    font-size: 1.6rem;
+    overflow-x: hidden;
 }
 
 code {
-  font-family: var(--mono-font) !important;
-  font-size: var(--code-font-size);
-  direction: ltr !important;
+    font-family: var(--mono-font) !important;
+    font-size: var(--code-font-size);
+    direction: ltr !important;
 }
 
 /* make long words/inline code not x overflow */
 main {
-  overflow-wrap: break-word;
+    overflow-wrap: break-word;
 }
 
 /* make wide tables scroll if they overflow */
 .table-wrapper {
-  overflow-x: auto;
+    overflow-x: auto;
 }
 
 h1,
@@ -48,9 +48,9 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--title-font);
-  font-weight: normal;
-  color: var(--title-color);
+    font-family: var(--title-font);
+    font-weight: normal;
+    color: var(--title-color);
 }
 
 /* Don't change font size in headers. */
@@ -60,39 +60,39 @@ h3 code,
 h4 code,
 h5 code,
 h6 code {
-  font-size: unset;
+    font-size: unset;
 }
 
 .left {
-  float: left;
+    float: left;
 }
 .right {
-  float: right;
+    float: right;
 }
 .boring {
-  opacity: 0.6;
+    opacity: 0.6;
 }
 .hide-boring .boring {
-  display: none;
+    display: none;
 }
 .hidden {
-  display: none !important;
+    display: none !important;
 }
 
 h2,
 h3 {
-  margin-block-start: 2em;
-  margin-block-end: 0;
+    margin-block-start: 2em;
+    margin-block-end: 0;
 }
 h4,
 h5 {
-  margin-block-start: 2em;
+    margin-block-start: 2em;
 }
 
 .header + .header h3,
 .header + .header h4,
 .header + .header h5 {
-  margin-block-start: 1em;
+    margin-block-start: 1em;
 }
 
 h1:target::before,
@@ -101,10 +101,10 @@ h3:target::before,
 h4:target::before,
 h5:target::before,
 h6:target::before {
-  display: inline-block;
-  content: "»";
-  margin-inline-start: -30px;
-  width: 30px;
+    display: inline-block;
+    content: "»";
+    margin-inline-start: -30px;
+    width: 30px;
 }
 
 /* This is broken on Safari as of version 14, but is fixed
@@ -112,214 +112,227 @@ h6:target::before {
    https://bugs.webkit.org/show_bug.cgi?id=218076
 */
 :target {
-  /* Safari does not support logical properties */
-  scroll-margin-top: calc(var(--menu-bar-height) + 0.5em);
+    /* Safari does not support logical properties */
+    scroll-margin-top: calc(var(--menu-bar-height) + 0.5em);
 }
 
 .page {
-  outline: 0;
-  padding: 0 var(--page-padding);
-  margin-block-start: calc(0px - var(--menu-bar-height)); /* Compensate for the #menu-bar-hover-placeholder */
+    outline: 0;
+    padding: 0 var(--page-padding);
+    margin-block-start: calc(
+        0px - var(--menu-bar-height)
+    ); /* Compensate for the #menu-bar-hover-placeholder */
 }
 .page-wrapper {
-  box-sizing: border-box;
-  background-color: var(--bg);
+    box-sizing: border-box;
+    background-color: var(--bg);
 }
 .no-js .page-wrapper,
 .js:not(.sidebar-resizing) .page-wrapper {
-  transition:
-    margin-left 0.3s ease,
-    transform 0.3s ease; /* Animation: slide away */
+    transition:
+        margin-left 0.3s ease,
+        transform 0.3s ease; /* Animation: slide away */
 }
 [dir="rtl"] .js:not(.sidebar-resizing) .page-wrapper {
-  transition:
-    margin-right 0.3s ease,
-    transform 0.3s ease; /* Animation: slide away */
+    transition:
+        margin-right 0.3s ease,
+        transform 0.3s ease; /* Animation: slide away */
 }
 
 .content {
-  overflow-y: auto;
-  padding: 24px 4px 48px 4px;
+    overflow-y: auto;
+    padding: 24px 4px 48px 4px;
 }
 .content main {
-  margin-inline-start: auto;
-  margin-inline-end: auto;
-  max-width: var(--content-max-width);
+    margin-inline-start: auto;
+    margin-inline-end: auto;
+    max-width: var(--content-max-width);
 }
 .content p {
-  line-height: 1.625em;
+    line-height: 1.625em;
+}
+.content div.video {
+    margin-top: 0.5rem;
+    margin-bottom: 3rem;
 }
 .content ol {
-  line-height: 1.625em;
+    line-height: 1.625em;
 }
 .content ul {
-  line-height: 1.625em;
+    line-height: 1.625em;
 }
 .content a {
-  text-decoration: underline;
-  text-decoration-color: hsl(219, 93%, 42%, 0.2);
+    text-decoration: underline;
+    text-decoration-color: hsl(219, 93%, 42%, 0.2);
 }
 .content a:hover {
-  text-decoration-color: hsl(219, 93%, 42%, 0.5);
+    text-decoration-color: hsl(219, 93%, 42%, 0.5);
 }
 .content img,
 .content video {
-  max-width: 100%;
+    max-width: 100%;
 }
 .content .header:link,
 .content .header:visited {
-  color: var(--title-color);
+    color: var(--title-color);
 }
 .content .header:link,
 .content .header:visited:hover {
-  text-decoration: none;
+    text-decoration: none;
+}
+
+iframe {
+    margin-top: 1rem;
+    margin-bottom: 10rem;
 }
 
 table {
-  margin: 0 auto;
-  border-collapse: collapse;
+    margin: 0 auto;
+    border-collapse: collapse;
 }
 table td {
-  padding: 3px 20px;
-  border: 1px var(--table-border-color) solid;
+    padding: 3px 20px;
+    border: 1px var(--table-border-color) solid;
 }
 table thead {
-  background: var(--table-header-bg);
+    background: var(--table-header-bg);
 }
 table thead td {
-  font-weight: 700;
-  border: none;
+    font-weight: 700;
+    border: none;
 }
 table thead th {
-  padding: 3px 20px;
+    padding: 3px 20px;
 }
 table thead tr {
-  border: 1px var(--table-header-bg) solid;
+    border: 1px var(--table-header-bg) solid;
 }
 /* Alternate background colors for rows */
 table tbody tr:nth-child(2n) {
-  background: var(--table-alternate-bg);
+    background: var(--table-alternate-bg);
 }
 
 blockquote {
-  margin: auto;
-  margin-top: 1rem;
-  padding: 1rem 1.25rem;
-  color: var(--fg);
-  background-color: var(--quote-bg);
-  border: 1px solid var(--quote-border);
+    margin: auto;
+    margin-top: 1rem;
+    padding: 1rem 1.25rem;
+    color: var(--fg);
+    background-color: var(--quote-bg);
+    border: 1px solid var(--quote-border);
 }
 
 blockquote > p {
-  margin: 0;
-  padding-left: 2.6rem;
-  font-size: 1.4rem;
+    margin: 0;
+    padding-left: 2.6rem;
+    font-size: 1.4rem;
 }
 
 blockquote:before {
-  position: absolute;
-  content: "ⓘ";
-  margin: 0.3rem 0;
-  width: 1.6rem;
-  height: 1.6rem;
-  font-size: 1.6rem;
-  font-weight: bold;
-  color: var(--icons);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  line-height: 1.625em;
+    position: absolute;
+    content: "ⓘ";
+    margin: 0.3rem 0;
+    width: 1.6rem;
+    height: 1.6rem;
+    font-size: 1.6rem;
+    font-weight: bold;
+    color: var(--icons);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1.625em;
 }
 
 blockquote .warning:before {
-  background-color: var(--quote-bg);
+    background-color: var(--quote-bg);
 }
 
 .warning {
-  margin: auto;
-  padding: 1rem 1.25rem;
-  background-color: var(--warning-bg);
-  border: 1px solid var(--warning-border);
+    margin: auto;
+    padding: 1rem 1.25rem;
+    background-color: var(--warning-bg);
+    border: 1px solid var(--warning-border);
 }
 
 .warning > p {
-  margin: 0;
-  padding-left: 2.6rem;
-  font-size: 1.4rem;
+    margin: 0;
+    padding-left: 2.6rem;
+    font-size: 1.4rem;
 }
 
 .warning:before {
-  position: absolute;
-  content: "ⓘ";
-  margin: 0.3rem 0;
-  width: 1.6rem;
-  height: 1.6rem;
-  font-size: 1.6rem;
-  font-weight: bold;
-  color: var(--warning-icon);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  line-height: 1.625em;
+    position: absolute;
+    content: "ⓘ";
+    margin: 0.3rem 0;
+    width: 1.6rem;
+    height: 1.6rem;
+    font-size: 1.6rem;
+    font-weight: bold;
+    color: var(--warning-icon);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1.625em;
 }
 
 kbd {
-  background-color: rgba(8, 76, 207, 0.1);
-  border-radius: 4px;
-  border: solid 1px var(--theme-popup-border);
-  box-shadow: inset 0 -1px 0 var(--theme-hover);
-  display: inline-block;
-  font-size: var(--code-font-size);
-  font-family: var(--mono-font);
-  line-height: 10px;
-  padding: 4px 5px;
-  vertical-align: middle;
+    background-color: rgba(8, 76, 207, 0.1);
+    border-radius: 4px;
+    border: solid 1px var(--theme-popup-border);
+    box-shadow: inset 0 -1px 0 var(--theme-hover);
+    display: inline-block;
+    font-size: var(--code-font-size);
+    font-family: var(--mono-font);
+    line-height: 10px;
+    padding: 4px 5px;
+    vertical-align: middle;
 }
 
 :not(.footnote-definition) + .footnote-definition,
 .footnote-definition + :not(.footnote-definition) {
-  margin-block-start: 2em;
+    margin-block-start: 2em;
 }
 .footnote-definition {
-  font-size: 0.9em;
-  margin: 0.5em 0;
+    font-size: 0.9em;
+    margin: 0.5em 0;
 }
 .footnote-definition p {
-  display: inline;
+    display: inline;
 }
 
 .tooltiptext {
-  position: absolute;
-  visibility: hidden;
-  color: #fff;
-  background-color: #333;
-  transform: translateX(-50%); /* Center by moving tooltip 50% of its width left */
-  left: -8px; /* Half of the width of the icon */
-  top: -35px;
-  font-size: 0.8em;
-  text-align: center;
-  border-radius: 6px;
-  padding: 5px 8px;
-  margin: 5px;
-  z-index: 1000;
+    position: absolute;
+    visibility: hidden;
+    color: #fff;
+    background-color: #333;
+    transform: translateX(
+        -50%
+    ); /* Center by moving tooltip 50% of its width left */
+    left: -8px; /* Half of the width of the icon */
+    top: -35px;
+    font-size: 0.8em;
+    text-align: center;
+    border-radius: 6px;
+    padding: 5px 8px;
+    margin: 5px;
+    z-index: 1000;
 }
 .tooltipped .tooltiptext {
-  visibility: visible;
+    visibility: visible;
 }
 
 .chapter li.part-title {
-  font-size: 18px;
-  font-family: var(--title-font);
-  color: var(--title-color);
-  margin: 5px 0;
-  margin-top: 2rem;
+    font-size: 18px;
+    font-family: var(--title-font);
+    color: var(--title-color);
+    margin: 5px 0;
+    margin-top: 2rem;
 }
 
 .result-no-output {
-  font-style: italic;
+    font-style: italic;
 }
 
 code.hljs {
-  color: rgb(75, 83, 97) !important;
-  background-color: rgba(8, 76, 207, 0.1);
+    color: rgb(75, 83, 97) !important;
+    background-color: rgba(8, 76, 207, 0.1);
 }