From beaa169c2063ad9d680c4e13df18f784b5888bf4 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Wed, 20 Jul 2022 00:20:04 +0900 Subject: [PATCH] Fix: Sidebar - Works with right sidebar(`positionend`) --- css/leptonChrome.css | 49 +++++++++++++++++++++++++----- src/autohide/sidebar/_overlap.scss | 20 +++++++++--- src/autohide/sidebar/_static.scss | 24 ++++++++++++--- src/sidebar/_overlap.scss | 13 +++++++- 4 files changed, 88 insertions(+), 18 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index ea214b9..296b27c 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -5343,6 +5343,7 @@ */ --uc-sidebar-width: 40px; --uc-sidebar-activate-width: 18em; + --uc-sidebar-activate-width-reverse: calc(-1 * var(--uc-sidebar-activate-width)); --uc-sidebar-fullscreen-width: 4px; --uc-sidebar-shadow-color: #28282f; --uc-autohide-sidebar-delay: 600ms; @@ -5351,22 +5352,32 @@ position: relative !important; box-shadow: 1px 0px 15px -10px var(--uc-sidebar-shadow-color); } + #sidebar-box[positionend="true"] { + box-shadow: -1px 0px 15px -10px var(--uc-sidebar-shadow-color); + } #sidebar-splitter { display: none !important; } } @supports -moz-bool-pref("userChrome.sidebar.overlap") { + #sidebar-box[positionend="true"] { + direction: rtl; + } + @supports not -moz-bool-pref("userChrome.autohide.sidebar") { #sidebar-box { min-width: var(--uc-sidebar-activate-width) !important; max-width: var(--uc-sidebar-activate-width) !important; - margin-inline-start: calc(-1 * var(--uc-sidebar-activate-width)) !important; + margin-inline-start: var(--uc-sidebar-activate-width-reverse) !important; will-change: transform; } #sidebar-box:not([hidden="true"]) { transform: translateX(var(--uc-sidebar-activate-width)); } + #sidebar-box[positionend="true"]:not([hidden="true"]) { + transform: translateX(var(--uc-sidebar-activate-width-reverse)); + } @media (prefers-reduced-motion: no-preference) { #sidebar-box { transition: transform 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out, visibility 0s linear !important; @@ -5669,13 +5680,24 @@ } :root[inFullscreen="true"] #sidebar-box { - margin-inline-start: calc(-1 * var(--uc-sidebar-activate-width)) !important; - transform: translateX(var(--uc-sidebar-fullscreen-width)) !important; will-change: transform; } - :root[inFullscreen="true"] #sidebar-box:hover { + :root[inFullscreen="true"] #sidebar-box:not([positionend="true"]) { + margin-inline-start: var(--uc-sidebar-activate-width-reverse) !important; + transform: translateX(var(--uc-sidebar-fullscreen-width)) !important; + } + :root[inFullscreen="true"] #sidebar-box:not([positionend="true"]):hover { transform: translateX(var(--uc-sidebar-activate-width)) !important; } + :root[inFullscreen="true"] #sidebar-box[positionend="true"] { + margin-inline-end: var(--uc-sidebar-activate-width-reverse) !important; + transform: translateX( + calc(var(--uc-sidebar-activate-width) + -1 * var(--uc-sidebar-fullscreen-width)) + ) !important; + } + :root[inFullscreen="true"] #sidebar-box[positionend="true"]:hover { + transform: translateX(0) !important; + } :root[inFullscreen="true"] #sidebar-box #sidebar-header, :root[inFullscreen="true"] #sidebar-box #sidebar { min-width: calc(var(--uc-sidebar-activate-width)) !important; @@ -5702,6 +5724,9 @@ } @supports not -moz-bool-pref("userChrome.sidebar.overlap") { #sidebar-box { + --uc-sidebar-fullscreen-margin: calc( + var(--uc-sidebar-fullscreen-width) + var(--uc-sidebar-activate-width-reverse) + ); overflow: hidden; will-change: min-width, max-width; } @@ -5710,13 +5735,20 @@ max-width: var(--uc-sidebar-activate-width) !important; } - :root[inFullscreen="true"] #sidebar-box { - margin-inline-start: calc(var(--uc-sidebar-fullscreen-width) + -1 * var(--uc-sidebar-activate-width)) !important; + :root[inFullscreen="true"] #sidebar-box:not([positionend="true"]) { + margin-inline-start: var(--uc-sidebar-fullscreen-margin) !important; will-change: margin-inline-start; } - :root[inFullscreen="true"] #sidebar-box:hover { + :root[inFullscreen="true"] #sidebar-box:not([positionend="true"]):hover { margin-inline-start: 0 !important; } + :root[inFullscreen="true"] #sidebar-box[positionend="true"] { + margin-inline-end: var(--uc-sidebar-fullscreen-margin) !important; + will-change: margin-inline-end; + } + :root[inFullscreen="true"] #sidebar-box[positionend="true"]:hover { + margin-inline-end: 0 !important; + } @media (prefers-reduced-motion: no-preference) { #sidebar-box { @@ -5729,6 +5761,9 @@ :root[inFullscreen="true"] #sidebar-box { transition: margin-inline-start 1s var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important; } + :root[inFullscreen="true"] #sidebar-box[positionend="true"] { + transition-property: margin-inline-end !important; + } :root[inFullscreen="true"] #sidebar-box:hover { transition-delay: 0ms !important; } diff --git a/src/autohide/sidebar/_overlap.scss b/src/autohide/sidebar/_overlap.scss index cd3ec0b..cad04cc 100644 --- a/src/autohide/sidebar/_overlap.scss +++ b/src/autohide/sidebar/_overlap.scss @@ -17,13 +17,23 @@ } :root[inFullscreen="true"] #sidebar-box { - margin-inline-start: calc(-1 * var(--uc-sidebar-activate-width)) !important; - - transform: translateX(var(--uc-sidebar-fullscreen-width)) !important; will-change: transform; - &:hover { - transform: translateX(var(--uc-sidebar-activate-width)) !important; + &:not([positionend="true"]) { + margin-inline-start: var(--uc-sidebar-activate-width-reverse) !important; + transform: translateX(var(--uc-sidebar-fullscreen-width)) !important; + + &:hover { + transform: translateX(var(--uc-sidebar-activate-width)) !important; + } + } + &[positionend="true"] { + margin-inline-end: var(--uc-sidebar-activate-width-reverse) !important; + transform: translateX(calc(var(--uc-sidebar-activate-width) + (-1 * var(--uc-sidebar-fullscreen-width)))) !important; + + &:hover { + transform: translateX(0) !important; + } } #sidebar-header, diff --git a/src/autohide/sidebar/_static.scss b/src/autohide/sidebar/_static.scss index 01516f1..22f2986 100644 --- a/src/autohide/sidebar/_static.scss +++ b/src/autohide/sidebar/_static.scss @@ -1,8 +1,8 @@ #sidebar-box { + --uc-sidebar-fullscreen-margin: calc(var(--uc-sidebar-fullscreen-width) + var(--uc-sidebar-activate-width-reverse)); overflow: hidden; will-change: min-width, max-width; - &:hover { min-width: var(--uc-sidebar-activate-width) !important; max-width: var(--uc-sidebar-activate-width) !important; @@ -10,11 +10,22 @@ } :root[inFullscreen="true"] #sidebar-box { - margin-inline-start: calc(var(--uc-sidebar-fullscreen-width) + (-1 * var(--uc-sidebar-activate-width))) !important; - will-change: margin-inline-start; + &:not([positionend="true"]) { + margin-inline-start: var(--uc-sidebar-fullscreen-margin) !important; + will-change: margin-inline-start; - &:hover { - margin-inline-start: 0 !important; + &:hover { + margin-inline-start: 0 !important; + } + } + + &[positionend="true"] { + margin-inline-end: var(--uc-sidebar-fullscreen-margin) !important; + will-change: margin-inline-end; + + &:hover { + margin-inline-end: 0 !important; + } } } @@ -31,6 +42,9 @@ :root[inFullscreen="true"] #sidebar-box { transition: margin-inline-start 1s var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important; + &[positionend="true"] { + transition-property: margin-inline-end !important; + } &:hover { transition-delay: 0ms !important; } diff --git a/src/sidebar/_overlap.scss b/src/sidebar/_overlap.scss index baa0157..1cd575f 100644 --- a/src/sidebar/_overlap.scss +++ b/src/sidebar/_overlap.scss @@ -8,6 +8,7 @@ --uc-sidebar-width: 40px; --uc-sidebar-activate-width: 18em; + --uc-sidebar-activate-width-reverse: calc(-1 * var(--uc-sidebar-activate-width)); --uc-sidebar-fullscreen-width: 4px; --uc-sidebar-shadow-color: #28282F; --uc-autohide-sidebar-delay: 600ms; /* Wait 0.6s before hiding sidebar */ @@ -16,6 +17,9 @@ position: relative !important; box-shadow: 1px 0px 15px -10px var(--uc-sidebar-shadow-color); + &[positionend="true"] { + box-shadow: -1px 0px 15px -10px var(--uc-sidebar-shadow-color); + } } #sidebar-splitter { @@ -24,17 +28,24 @@ } @include Option("userChrome.sidebar.overlap") { + #sidebar-box[positionend="true"] { + direction: rtl; + } + @include NotOption("userChrome.autohide.sidebar") { #sidebar-box { min-width: var(--uc-sidebar-activate-width) !important; max-width: var(--uc-sidebar-activate-width) !important; - margin-inline-start: calc(-1 * var(--uc-sidebar-activate-width)) !important; + margin-inline-start: var(--uc-sidebar-activate-width-reverse) !important; will-change: transform; &:not([hidden="true"]) { transform: translateX(var(--uc-sidebar-activate-width)); } + &[positionend="true"]:not([hidden="true"]) { + transform: translateX(var(--uc-sidebar-activate-width-reverse)); + } @include Animate { transition: transform 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out,