diff options
Diffstat (limited to 'css/chrome.css')
-rw-r--r-- | css/chrome.css | 35 |
1 files changed, 27 insertions, 8 deletions
diff --git a/css/chrome.css b/css/chrome.css index 2314f7a1..8b78255d 100644 --- a/css/chrome.css +++ b/css/chrome.css @@ -269,8 +269,14 @@ pre > .buttons button { /* On mobile, make it easier to tap buttons. */ padding: 0.3rem 1rem; } + + .sidebar-resize-indicator { + /* Hide resize indicator on devices with limited accuracy */ + display: none; + } } pre > code { + display: block; padding: 1rem; } @@ -422,22 +428,35 @@ ul#searchresults span.teaser em { position: absolute; cursor: col-resize; width: 0; - right: 0; + right: calc(var(--sidebar-resize-indicator-width) * -1); top: 0; bottom: 0; + display: flex; + align-items: center; +} + +.sidebar-resize-handle .sidebar-resize-indicator { + width: 100%; + height: 12px; + background-color: var(--icons); + margin-inline-start: var(--sidebar-resize-indicator-space); +} + +[dir=rtl] .sidebar .sidebar-resize-handle { + left: calc(var(--sidebar-resize-indicator-width) * -1); + right: unset; } -[dir=rtl] .sidebar .sidebar-resize-handle { right: unset; left: 0; } .js .sidebar .sidebar-resize-handle { cursor: col-resize; - width: 5px; + width: calc(var(--sidebar-resize-indicator-width) - var(--sidebar-resize-indicator-space)); } /* sidebar-hidden */ #sidebar-toggle-anchor:not(:checked) ~ .sidebar { - transform: translateX(calc(0px - var(--sidebar-width))); + transform: translateX(calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width))); z-index: -1; } [dir=rtl] #sidebar-toggle-anchor:not(:checked) ~ .sidebar { - transform: translateX(var(--sidebar-width)); + transform: translateX(calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width))); } .sidebar::-webkit-scrollbar { background: var(--sidebar-bg); @@ -448,15 +467,15 @@ ul#searchresults span.teaser em { /* sidebar-visible */ #sidebar-toggle-anchor:checked ~ .page-wrapper { - transform: translateX(var(--sidebar-width)); + transform: translateX(calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width))); } [dir=rtl] #sidebar-toggle-anchor:checked ~ .page-wrapper { - transform: translateX(calc(0px - var(--sidebar-width))); + transform: translateX(calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width))); } @media only screen and (min-width: 620px) { #sidebar-toggle-anchor:checked ~ .page-wrapper { transform: none; - margin-inline-start: var(--sidebar-width); + margin-inline-start: calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width)); } [dir=rtl] #sidebar-toggle-anchor:checked ~ .page-wrapper { transform: none; |