mirror of
https://github.com/zed-industries/zed.git
synced 2025-01-09 02:44:49 +00:00
986e0113e5
Some checks are pending
CI / Check formatting and spelling (push) Waiting to run
CI / (macOS) Run Clippy and tests (push) Waiting to run
CI / (Linux) Run Clippy and tests (push) Waiting to run
CI / (Windows) Run Clippy and tests (push) Waiting to run
CI / Create a macOS bundle (push) Blocked by required conditions
CI / Create a Linux bundle (push) Blocked by required conditions
CI / Create arm64 Linux bundle (push) Blocked by required conditions
Deploy Docs / Deploy Docs (push) Waiting to run
Docs / Check formatting (push) Waiting to run
Follow up to https://github.com/zed-industries/zed/pull/17505. This one contains a bit more copywriting adjustments. Figured we were using the "You can do x..." sentence shape quite frequently, so tried to kickstart reducing that slightly. There are also more images not loading in complement to the one I removed, but I'm not fully sure why that's the case. --- Release Notes: - N/A
361 lines
6.5 KiB
CSS
361 lines
6.5 KiB
CSS
/* Base styles and content styles */
|
|
|
|
@import "variables.css";
|
|
|
|
:root {
|
|
/* 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;
|
|
|
|
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;
|
|
}
|
|
|
|
code {
|
|
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;
|
|
}
|
|
|
|
/* make wide tables scroll if they overflow */
|
|
.table-wrapper {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-family: var(--title-font);
|
|
font-weight: 480;
|
|
color: var(--title-color);
|
|
}
|
|
|
|
/* Don't change font size in headers. */
|
|
h1 code,
|
|
h2 code,
|
|
h3 code,
|
|
h4 code,
|
|
h5 code,
|
|
h6 code {
|
|
font-size: unset;
|
|
}
|
|
|
|
.left {
|
|
float: left;
|
|
}
|
|
.right {
|
|
float: right;
|
|
}
|
|
.boring {
|
|
opacity: 0.6;
|
|
}
|
|
.hide-boring .boring {
|
|
display: none;
|
|
}
|
|
.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
h2,
|
|
h3 {
|
|
margin-block-start: 1.5em;
|
|
margin-block-end: 0;
|
|
}
|
|
h4,
|
|
h5 {
|
|
margin-block-start: 2em;
|
|
}
|
|
|
|
.header + .header h3,
|
|
.header + .header h4,
|
|
.header + .header h5 {
|
|
margin-block-start: 1em;
|
|
}
|
|
|
|
h1:target::before,
|
|
h2:target::before,
|
|
h3:target::before,
|
|
h4:target::before,
|
|
h5:target::before,
|
|
h6:target::before {
|
|
display: inline-block;
|
|
content: "»";
|
|
margin-inline-start: -30px;
|
|
width: 30px;
|
|
}
|
|
|
|
/* This is broken on Safari as of version 14, but is fixed
|
|
in Safari Technology Preview 117 which I think will be Safari 14.2.
|
|
https://bugs.webkit.org/show_bug.cgi?id=218076
|
|
*/
|
|
:target {
|
|
/* Safari does not support logical properties */
|
|
scroll-margin-top: calc(var(--menu-bar-height) + 2rem);
|
|
}
|
|
|
|
.page {
|
|
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);
|
|
}
|
|
.no-js .page-wrapper,
|
|
.js:not(.sidebar-resizing) .page-wrapper {
|
|
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 */
|
|
}
|
|
|
|
.content {
|
|
overflow-y: auto;
|
|
padding: 48px 4px;
|
|
}
|
|
.content main {
|
|
margin-inline-start: auto;
|
|
margin-inline-end: auto;
|
|
max-width: var(--content-max-width);
|
|
}
|
|
.content p {
|
|
line-height: 1.625em;
|
|
}
|
|
.content div.video {
|
|
margin-top: 1rem;
|
|
border: 1px solid;
|
|
border-color: var(--border);
|
|
border-radius: 8px;
|
|
overflow: clip;
|
|
}
|
|
.content div.video iframe {
|
|
margin: 0;
|
|
}
|
|
.content ol {
|
|
line-height: 1.8;
|
|
padding-left: 1.8em;
|
|
}
|
|
.content ul {
|
|
line-height: 1.8;
|
|
padding-left: 1.8em;
|
|
}
|
|
.content li {
|
|
padding-left: 0.5em;
|
|
}
|
|
.content a {
|
|
text-decoration: underline;
|
|
text-decoration-color: hsl(219, 93%, 42%, 0.2);
|
|
}
|
|
.content a:hover {
|
|
text-decoration-color: hsl(219, 93%, 42%, 0.5);
|
|
}
|
|
.content img,
|
|
.content video {
|
|
max-width: 100%;
|
|
border: 1px solid;
|
|
border-color: var(--border);
|
|
border-radius: 8px;
|
|
overflow: clip;
|
|
}
|
|
.content .header:link,
|
|
.content .header:visited {
|
|
color: var(--title-color);
|
|
}
|
|
.content .header:link,
|
|
.content .header:visited:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
iframe {
|
|
margin-top: 1rem;
|
|
margin-bottom: 10rem;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 1.4rem;
|
|
}
|
|
table td {
|
|
padding: 4px 12px;
|
|
border: 1px var(--table-border-color) solid;
|
|
}
|
|
table thead {
|
|
background: var(--table-header-bg);
|
|
}
|
|
table thead td {
|
|
font-weight: 700;
|
|
border: none;
|
|
}
|
|
table thead th {
|
|
padding: 6px 12px;
|
|
color: #000;
|
|
text-align: left;
|
|
border: 1px var(--table-border-color) solid;
|
|
}
|
|
table thead tr {
|
|
border: 1px var(--table-border-color) solid;
|
|
}
|
|
/* Alternate background colors for rows */
|
|
table tbody tr:nth-child(2n) {
|
|
background: var(--table-alternate-bg);
|
|
}
|
|
|
|
blockquote {
|
|
margin: auto;
|
|
margin-top: 1rem;
|
|
padding: 1rem 1.25rem;
|
|
color: #000;
|
|
background-color: var(--quote-bg);
|
|
border: 1px solid var(--quote-border);
|
|
}
|
|
|
|
blockquote > p {
|
|
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;
|
|
}
|
|
|
|
blockquote .warning:before {
|
|
background-color: var(--quote-bg);
|
|
}
|
|
|
|
.warning {
|
|
margin: auto;
|
|
padding: 1rem 1.25rem;
|
|
color: #000;
|
|
background-color: var(--warning-bg);
|
|
border: 1px solid var(--warning-border);
|
|
}
|
|
|
|
.warning > p {
|
|
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;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
:not(.footnote-definition) + .footnote-definition,
|
|
.footnote-definition + :not(.footnote-definition) {
|
|
margin-block-start: 2em;
|
|
}
|
|
.footnote-definition {
|
|
font-size: 1.4rem;
|
|
margin: 0.5em 0;
|
|
border-bottom: 1px solid;
|
|
border-color: var(--border-light);
|
|
}
|
|
.footnote-definition p {
|
|
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;
|
|
}
|
|
.tooltipped .tooltiptext {
|
|
visibility: visible;
|
|
}
|
|
|
|
.chapter li.part-title {
|
|
font-size: 18px;
|
|
font-family: var(--title-font);
|
|
font-weight: 520;
|
|
color: var(--title-color);
|
|
margin: 5px 0;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.result-no-output {
|
|
font-style: italic;
|
|
}
|
|
|
|
code.hljs {
|
|
color: hsl(221, 13%, 10%) !important;
|
|
background-color: hsla(221, 93%, 42%, 0.1);
|
|
}
|