diff options
Diffstat (limited to 'css')
| -rw-r--r-- | css/chrome.css | 54 | ||||
| -rw-r--r-- | css/general.css | 10 | ||||
| -rw-r--r-- | css/variables.css | 36 |
3 files changed, 88 insertions, 12 deletions
diff --git a/css/chrome.css b/css/chrome.css index 83b7969..4cd7308 100644 --- a/css/chrome.css +++ b/css/chrome.css @@ -40,9 +40,9 @@ a > .hljs { border-block-end-style: solid; } #menu-bar.sticky, -.js #menu-bar-hover-placeholder:hover + #menu-bar, -.js #menu-bar:hover, -.js.sidebar-visible #menu-bar { +#menu-bar-hover-placeholder:hover + #menu-bar, +#menu-bar:hover, +html.sidebar-visible #menu-bar { position: -webkit-sticky; position: sticky; top: 0 !important; @@ -91,7 +91,7 @@ a > .hljs { display: flex; margin: 0 5px; } -.no-js .left-buttons button { +html:not(.js) .left-buttons button { display: none; } @@ -107,7 +107,7 @@ a > .hljs { overflow: hidden; text-overflow: ellipsis; } -.js .menu-title { +.menu-title { cursor: pointer; } @@ -250,8 +250,8 @@ pre > .buttons i { pre > .buttons button { cursor: inherit; margin: 0px 5px; - padding: 3px 5px; - font-size: 14px; + padding: 4px 4px 3px 5px; + font-size: 23px; border-style: solid; border-width: 1px; @@ -262,6 +262,27 @@ pre > .buttons button { transition-property: color,border-color,background-color; color: var(--icons); } + +pre > .buttons button.clip-button { + padding: 2px 4px 0px 6px; +} +pre > .buttons button.clip-button::before { + /* clipboard image from octicons (https://github.com/primer/octicons/tree/v2.0.0) MIT license + */ + content: url('data:image/svg+xml,<svg width="21" height="20" viewBox="0 0 24 25" \ +xmlns="http://www.w3.org/2000/svg" aria-label="Copy to clipboard">\ +<path d="M18 20h2v3c0 1-1 2-2 2H2c-.998 0-2-1-2-2V5c0-.911.755-1.667 1.667-1.667h5A3.323 3.323 0 \ +0110 0a3.323 3.323 0 013.333 3.333h5C19.245 3.333 20 4.09 20 5v8.333h-2V9H2v14h16v-3zM3 \ +7h14c0-.911-.793-1.667-1.75-1.667H13.5c-.957 0-1.75-.755-1.75-1.666C11.75 2.755 10.957 2 10 \ +2s-1.75.755-1.75 1.667c0 .911-.793 1.666-1.75 1.666H4.75C3.793 5.333 3 6.09 3 7z"/>\ +<path d="M4 19h6v2H4zM12 11H4v2h8zM4 17h4v-2H4zM15 15v-3l-4.5 4.5L15 21v-3l8.027-.032L23 15z"/>\ +</svg>'); + filter: var(--copy-button-filter); +} +pre > .buttons button.clip-button:hover::before { + filter: var(--copy-button-filter-hover); +} + @media (pointer: coarse) { pre > .buttons button { /* On mobile, make it easier to tap buttons. */ @@ -399,6 +420,22 @@ ul#searchresults span.teaser em { background-color: var(--sidebar-bg); color: var(--sidebar-fg); } +.sidebar-iframe-inner { + background-color: var(--sidebar-bg); + color: var(--sidebar-fg); + padding: 10px 10px; + margin: 0; + font-size: 1.4rem; +} +.sidebar-iframe-outer { + border: none; + height: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; +} [dir=rtl] .sidebar { left: unset; right: 0; } .sidebar-resizing { -moz-user-select: none; @@ -406,8 +443,7 @@ ul#searchresults span.teaser em { -ms-user-select: none; user-select: none; } -.no-js .sidebar, -.js:not(.sidebar-resizing) .sidebar { +html:not(.sidebar-resizing) .sidebar { transition: transform 0.3s; /* Animation: slide away */ } .sidebar code { diff --git a/css/general.css b/css/general.css index 7670b08..0862b51 100644 --- a/css/general.css +++ b/css/general.css @@ -190,6 +190,16 @@ kbd { vertical-align: middle; } +sup { + /* Set the line-height for superscript and footnote references so that there + isn't an awkward space appearing above lines that contain the footnote. + + See https://github.com/rust-lang/mdBook/pull/2443#discussion_r1813773583 + for an explanation. + */ + line-height: 0; +} + :not(.footnote-definition) + .footnote-definition, .footnote-definition + :not(.footnote-definition) { margin-block-start: 2em; diff --git a/css/variables.css b/css/variables.css index 0da55e8..12d1db7 100644 --- a/css/variables.css +++ b/css/variables.css @@ -56,6 +56,11 @@ --search-mark-bg: #e3b171; --color-scheme: dark; + + /* Same as `--icons` */ + --copy-button-filter: invert(45%) sepia(6%) saturate(621%) hue-rotate(198deg) brightness(99%) contrast(85%); + /* Same as `--sidebar-active` */ + --copy-button-filter-hover: invert(68%) sepia(55%) saturate(531%) hue-rotate(341deg) brightness(104%) contrast(101%); } .coal { @@ -100,9 +105,14 @@ --search-mark-bg: #355c7d; --color-scheme: dark; + + /* Same as `--icons` */ + --copy-button-filter: invert(26%) sepia(8%) saturate(575%) hue-rotate(169deg) brightness(87%) contrast(82%); + /* Same as `--sidebar-active` */ + --copy-button-filter-hover: invert(36%) sepia(70%) saturate(503%) hue-rotate(167deg) brightness(98%) contrast(89%); } -.light { +.light, html:not(.js) { --bg: hsl(0, 0%, 100%); --fg: hsl(0, 0%, 0%); @@ -144,6 +154,11 @@ --search-mark-bg: #a2cff5; --color-scheme: light; + + /* Same as `--icons` */ + --copy-button-filter: invert(45.49%); + /* Same as `--sidebar-active` */ + --copy-button-filter-hover: invert(14%) sepia(93%) saturate(4250%) hue-rotate(243deg) brightness(99%) contrast(130%); } .navy { @@ -188,6 +203,11 @@ --search-mark-bg: #a2cff5; --color-scheme: dark; + + /* Same as `--icons` */ + --copy-button-filter: invert(51%) sepia(10%) saturate(393%) hue-rotate(198deg) brightness(86%) contrast(87%); + /* Same as `--sidebar-active` */ + --copy-button-filter-hover: invert(46%) sepia(20%) saturate(1537%) hue-rotate(156deg) brightness(85%) contrast(90%); } .rust { @@ -231,11 +251,14 @@ --searchresults-li-bg: #dec2a2; --search-mark-bg: #e69f67; - --color-scheme: light; + /* Same as `--icons` */ + --copy-button-filter: invert(51%) sepia(10%) saturate(393%) hue-rotate(198deg) brightness(86%) contrast(87%); + /* Same as `--sidebar-active` */ + --copy-button-filter-hover: invert(77%) sepia(16%) saturate(1798%) hue-rotate(328deg) brightness(98%) contrast(83%); } @media (prefers-color-scheme: dark) { - .light.no-js { + html:not(.js) { --bg: hsl(200, 7%, 8%); --fg: #98a3ad; @@ -275,5 +298,12 @@ --searchresults-border-color: #98a3ad; --searchresults-li-bg: #2b2b2f; --search-mark-bg: #355c7d; + + --color-scheme: dark; + + /* Same as `--icons` */ + --copy-button-filter: invert(26%) sepia(8%) saturate(575%) hue-rotate(169deg) brightness(87%) contrast(82%); + /* Same as `--sidebar-active` */ + --copy-button-filter-hover: invert(36%) sepia(70%) saturate(503%) hue-rotate(167deg) brightness(98%) contrast(89%); } } |