From c3e29ea5e9054c0e3fc0c6b80d7ab32e106c3294 Mon Sep 17 00:00:00 2001 From: Michael Howell Date: Mon, 18 Dec 2023 13:30:47 -0700 Subject: [PATCH] Stop using the trigram of heaven as a hamburger button It doesn't look quite right, because the lines are too far apart, and it's not going to be announced by screenreaders as a menu button, since that's not what the symbol means. This adds a real tooltip and uses a better drawing of the icon. --- src/librustdoc/html/static/css/noscript.css | 2 ++ src/librustdoc/html/static/css/rustdoc.css | 27 ++++++++++++++----- src/librustdoc/html/templates/page.html | 2 +- .../sidebar-source-code-display.goml | 4 +-- tests/rustdoc/logo-class-rust.rs | 1 - tests/rustdoc/logo-class.rs | 3 --- 6 files changed, 25 insertions(+), 14 deletions(-) diff --git a/src/librustdoc/html/static/css/noscript.css b/src/librustdoc/html/static/css/noscript.css index e63502160fa..f425f3ec95c 100644 --- a/src/librustdoc/html/static/css/noscript.css +++ b/src/librustdoc/html/static/css/noscript.css @@ -54,6 +54,7 @@ nav.sub { --code-attribute-color: #999; --toggles-color: #999; --toggle-filter: none; + --mobile-sidebar-menu-filter: none; --search-input-focused-border-color: #66afe9; --copy-path-button-color: #999; --copy-path-img-filter: invert(50%); @@ -159,6 +160,7 @@ nav.sub { --code-attribute-color: #999; --toggles-color: #999; --toggle-filter: invert(100%); + --mobile-sidebar-menu-filter: invert(100%); --search-input-focused-border-color: #008dfd; --copy-path-button-color: #999; --copy-path-img-filter: invert(50%); diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index ecb80075695..a837ef4be13 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -1548,6 +1548,7 @@ a.tooltip:hover::after { } #sidebar-button { display: none; + line-height: 0; } .hide-sidebar #sidebar-button, .src #sidebar-button { @@ -1925,11 +1926,8 @@ in src-script.js and main.js .sidebar-menu-toggle { width: 45px; - /* Rare exception to specifying font sizes in rem. Since this is acting - as an icon, it's okay to specify its sizes in pixels. */ - font-size: 32px; border: none; - color: var(--main-color); + line-height: 0; } .hide-sidebar .sidebar-menu-toggle { @@ -1964,13 +1962,25 @@ in src-script.js and main.js width: 22px; height: 22px; } + .sidebar-menu-toggle:before { + filter: var(--mobile-sidebar-menu-filter); + } + .sidebar-menu-toggle:hover { + background: var(--main-background-color); + } - /* src sidebar button opens modal + /* sidebar button opens modal use hamburger button */ - .src #sidebar-button > a:before { + .src #sidebar-button > a:before, .sidebar-menu-toggle:before { content: url('data:image/svg+xml,\ - '); + '); + opacity: 0.75; + } + .src #sidebar-button > a:hover:before, .sidebar-menu-toggle:hover:before, + .src #sidebar-button > a:active:before, .sidebar-menu-toggle:active:before, + .src #sidebar-button > a:focus:before, .sidebar-menu-toggle:focus:before { + opacity: 1; } /* Display an alternating layout on tablets and phones */ @@ -2303,6 +2313,7 @@ in src-script.js and main.js --code-attribute-color: #999; --toggles-color: #999; --toggle-filter: none; + --mobile-sidebar-menu-filter: none; --search-input-focused-border-color: #66afe9; --copy-path-button-color: #999; --copy-path-img-filter: invert(50%); @@ -2407,6 +2418,7 @@ in src-script.js and main.js --code-attribute-color: #999; --toggles-color: #999; --toggle-filter: invert(100%); + --mobile-sidebar-menu-filter: invert(100%); --search-input-focused-border-color: #008dfd; --copy-path-button-color: #999; --copy-path-img-filter: invert(50%); @@ -2518,6 +2530,7 @@ Original by Dempfi (https://github.com/dempfi/ayu) --code-attribute-color: #999; --toggles-color: #999; --toggle-filter: invert(100%); + --mobile-sidebar-menu-filter: invert(100%); --search-input-focused-border-color: #5c6773; /* Same as `--border-color`. */ --copy-path-button-color: #fff; --copy-path-img-filter: invert(70%); diff --git a/src/librustdoc/html/templates/page.html b/src/librustdoc/html/templates/page.html index c4d8796623d..e5bb8e6d19c 100644 --- a/src/librustdoc/html/templates/page.html +++ b/src/librustdoc/html/templates/page.html @@ -77,7 +77,7 @@ {{ layout.external_html.before_content|safe }} {% if page.css_class != "src" %}