From 3fa98a1507b3ec7586b1c1fbdb51b5b55c71e0ed Mon Sep 17 00:00:00 2001 From: Michael Howell Date: Tue, 8 Apr 2025 11:18:08 -0700 Subject: rustdoc: add a handle that makes sidebar resizing more obvious This change is based on some discussion on [lolbinarycat's idea], but with a more "traditional" design. Specifically, this is the closest thing I could find to a consensus across many systems I looked at for inspiration: - In Jira, resizable sidebars have a stack of four dots. - In The GIMP, resizable sidebars have a stack of three dots. - In [old Windows], "panes" are defined to have the same border style as a window, which has a raised appearance. - In [NeXT], a drag point usually had an innie, whether the line in a slider or the circle in a scroller; I can also hide and show the favorites bar in Workspace by dragging on a circular "grip spot" - In [old Mac], drag handles for things usually had a "grip track" of parallel lines. - [OSX] kept that, but the "Source List" part of the Finder still had the circle grip for a time the same way Workspace did [lolbinarycat's idea]: https://github.com/rust-lang/rust/pull/139420 [old Windows]: https://archive.org/details/windowsinterface00micr/page/n9/mode/2up [old Mac]: https://archive.org/details/apple-hig/1996_Human_Interface_Guidelines_for_Mac_OS_8_%28WWDC_Release%29/page/16/mode/2up [NeXT]: https://archive.org/details/apple-hig/1993%20NeXTSTEP%20User%20Interface%20Guidelines%20-%20Release%203/page/145/mode/2up [OSX]: https://dn721903.ca.archive.org/0/items/apple-hig/MacOSX_HIG_2005_09_08.pdf#page=267 --- src/librustdoc/html/static/css/noscript.css | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'src/librustdoc/html/static/css/noscript.css') diff --git a/src/librustdoc/html/static/css/noscript.css b/src/librustdoc/html/static/css/noscript.css index 477a79d63e9..03201336cde 100644 --- a/src/librustdoc/html/static/css/noscript.css +++ b/src/librustdoc/html/static/css/noscript.css @@ -43,6 +43,7 @@ nav.sub { --settings-button-border-focus: #717171; --sidebar-background-color: #f5f5f5; --sidebar-background-color-hover: #e0e0e0; + --sidebar-border-color: #ddd; --code-block-background-color: #f5f5f5; --scrollbar-track-background-color: #dcdcdc; --scrollbar-thumb-background-color: rgba(36, 37, 39, 0.6); @@ -135,6 +136,8 @@ nav.sub { --scrape-example-code-wrapper-background-end: rgba(255, 255, 255, 0); --sidebar-resizer-hover: hsl(207, 90%, 66%); --sidebar-resizer-active: hsl(207, 90%, 54%); + --sidebar-resizer-img-filter: opacity(66%); + --sidebar-resizer-img-hover-filter: none; } /* End theme: light */ @@ -149,6 +152,7 @@ nav.sub { --settings-button-border-focus: #ffb900; --sidebar-background-color: #505050; --sidebar-background-color-hover: #676767; + --sidebar-border-color: #2A2A2A; --code-block-background-color: #2A2A2A; --scrollbar-track-background-color: #717171; --scrollbar-thumb-background-color: rgba(32, 34, 37, .6); @@ -244,6 +248,8 @@ nav.sub { --scrape-example-code-wrapper-background-end: rgba(53, 53, 53, 0); --sidebar-resizer-hover: hsl(207, 30%, 54%); --sidebar-resizer-active: hsl(207, 90%, 54%); + --sidebar-resizer-img-filter: opacity(66%); + --sidebar-resizer-img-hover-filter: none; } /* End theme: dark */ } -- cgit 1.4.1-3-g733a5 From e6e52063dfb23a16a0217689613e83888b18ccf9 Mon Sep 17 00:00:00 2001 From: Michael Howell Date: Thu, 10 Apr 2025 21:44:35 -0700 Subject: rustdoc: use a different style of grip track --- src/librustdoc/html/static/css/noscript.css | 4 --- src/librustdoc/html/static/css/rustdoc.css | 54 ++++++++++------------------- 2 files changed, 19 insertions(+), 39 deletions(-) (limited to 'src/librustdoc/html/static/css/noscript.css') diff --git a/src/librustdoc/html/static/css/noscript.css b/src/librustdoc/html/static/css/noscript.css index 03201336cde..a3c6bf98161 100644 --- a/src/librustdoc/html/static/css/noscript.css +++ b/src/librustdoc/html/static/css/noscript.css @@ -136,8 +136,6 @@ nav.sub { --scrape-example-code-wrapper-background-end: rgba(255, 255, 255, 0); --sidebar-resizer-hover: hsl(207, 90%, 66%); --sidebar-resizer-active: hsl(207, 90%, 54%); - --sidebar-resizer-img-filter: opacity(66%); - --sidebar-resizer-img-hover-filter: none; } /* End theme: light */ @@ -248,8 +246,6 @@ nav.sub { --scrape-example-code-wrapper-background-end: rgba(53, 53, 53, 0); --sidebar-resizer-hover: hsl(207, 30%, 54%); --sidebar-resizer-active: hsl(207, 90%, 54%); - --sidebar-resizer-img-filter: opacity(66%); - --sidebar-resizer-img-hover-filter: none; } /* End theme: dark */ } diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index a874b87dfe1..a81d5c9c49b 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -1,5 +1,5 @@ +/* ignore-tidy-filelength */ /* -// ignore-tidy-filelength When static files are updated, their suffixes need to be updated. 1. In the top directory run: ./x.py doc --stage 1 library/core @@ -525,25 +525,20 @@ img { left: var(--desktop-sidebar-width); display: flex; align-items: center; - justify-content: center; + justify-content: flex-start; + color: var(--right-side-color); } - -.sidebar-resizer::after { - content: url('data:image/svg+xml,\ - \ - \ - \ - \ - \ - \ - \ - '); - width: 8px; - height: 24px; - filter: var(--sidebar-resizer-img-filter); +.sidebar-resizer::before { + content: ""; + border-right: dotted 2px currentColor; + width: 2px; + height: 12px; } -.sidebar-resizer:hover::after { - filter: var(--sidebar-resizer-img-hover-filter); +.sidebar-resizer::after { + content: ""; + border-right: dotted 2px currentColor; + width: 2px; + height: 16px; } .rustdoc.src .sidebar-resizer { @@ -571,6 +566,7 @@ img { .sidebar-resizing .sidebar { position: fixed; + border-right: solid 2px var(--sidebar-resizer-active); } .sidebar-resizing > body { padding-left: var(--resizing-sidebar-width); @@ -586,6 +582,7 @@ img { on top of, the scrollbar) */ left: calc(var(--desktop-sidebar-width) - 1px); border-left: solid 1px var(--sidebar-resizer-hover); + color: var(--sidebar-resizer-hover); } .src-sidebar-expanded .rustdoc.src .sidebar-resizer:hover, @@ -611,17 +608,10 @@ img { /* make the resize tool bigger when actually resizing, to avoid :hover styles on other stuff while resizing */ padding: 0 140px; - width: 2px; + width: calc(140px + 140px + 9px + 2px); margin-left: -140px; border-left: none; -} -.sidebar-resizer.active::before { - border-left: solid 2px var(--sidebar-resizer-active); - margin-left: 8px; - padding-left: 1px; - display: block; - height: 100%; - content: ""; + color: var(--sidebar-resizer-active); } .sidebar, .mobile-topbar, .sidebar-menu-toggle, @@ -3021,8 +3011,6 @@ by default. --scrape-example-code-wrapper-background-end: rgba(255, 255, 255, 0); --sidebar-resizer-hover: hsl(207, 90%, 66%); --sidebar-resizer-active: hsl(207, 90%, 54%); - --sidebar-resizer-img-filter: opacity(66%); - --sidebar-resizer-img-hover-filter: none; } /* End theme: light */ @@ -3036,7 +3024,7 @@ by default. --settings-button-border-focus: #ffb900; --sidebar-background-color: #505050; --sidebar-background-color-hover: #676767; - --sidebar-border-color: #2A2A2A; + --sidebar-border-color: #999; --code-block-background-color: #2A2A2A; --scrollbar-track-background-color: #717171; --scrollbar-thumb-background-color: rgba(32, 34, 37, .6); @@ -3132,8 +3120,6 @@ by default. --scrape-example-code-wrapper-background-end: rgba(53, 53, 53, 0); --sidebar-resizer-hover: hsl(207, 30%, 54%); --sidebar-resizer-active: hsl(207, 90%, 54%); - --sidebar-resizer-img-filter: opacity(66%); - --sidebar-resizer-img-hover-filter: none; } /* End theme: dark */ @@ -3151,7 +3137,7 @@ Original by Dempfi (https://github.com/dempfi/ayu) --settings-button-border-focus: #e0e0e0; --sidebar-background-color: #14191f; --sidebar-background-color-hover: rgba(70, 70, 70, 0.33); - --sidebar-border-color: #000; + --sidebar-border-color: #5c6773; --code-block-background-color: #191f26; --scrollbar-track-background-color: transparent; --scrollbar-thumb-background-color: #5c6773; @@ -3247,8 +3233,6 @@ Original by Dempfi (https://github.com/dempfi/ayu) --scrape-example-code-wrapper-background-end: rgba(15, 20, 25, 0); --sidebar-resizer-hover: hsl(34, 50%, 33%); --sidebar-resizer-active: hsl(34, 100%, 66%); - --sidebar-resizer-img-filter: opacity(66%); - --sidebar-resizer-img-hover-filter: none; } :root[data-theme="ayu"] h1, -- cgit 1.4.1-3-g733a5