zen-browser / theme-store

🎨 Theme repository for @zen-browser!
https://zen-browser.github.io/theme-store/themes.json
MIT License
89 stars 27 forks source link

[update-theme]: Zen Sidebar At Right Side #313

Closed AntonioSTM closed 3 weeks ago

AntonioSTM commented 3 weeks ago

Hi, I fixed the floating behavior of My theme Zen Sidebar At Right Side with the commit 88c8662 .

Only the chrome.css file was affected changing from:

/*#region  ZEN SIDEBAR AT RIGHT SIDE  */
    /*#region  RIGHT SIDE PINNED ZEN SIDEBAR  */
        @media (-moz-bool-pref: "uc.zen-sidebar.pin-at-right-side") {
            #zen-sidebar-web-panel-wrapper:not(:has(#zen-sidebar-web-panel[pinned="true"])) {
                order: 2 !important;
                margin-left: 10px !important;
            }
        }
    /*#endregion*/
    /*#region  RIGHT SIDE FLOATING ZEN SIDEBAR  */
        @media (-moz-bool-pref: "uc.zen-sidebar.float-at-right-side") {
-           #zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned="true"]) {
-               flex-direction: row-reverse;
-           }
        }
    /*#endregion*/
/*#endregion*/

to:

/*#region  ZEN SIDEBAR AT RIGHT SIDE  */
    /*#region  RIGHT SIDE PINNED ZEN SIDEBAR  */
        @media (-moz-bool-pref: "uc.zen-sidebar.pin-at-right-side") {
            #zen-sidebar-web-panel-wrapper:not(:has(#zen-sidebar-web-panel[pinned="true"])) {
                order: 2 !important;
                margin-left: 10px !important;
            }
        }
    /*#endregion*/
    /*#region  RIGHT SIDE FLOATING ZEN SIDEBAR  */
        @media (-moz-bool-pref: "uc.zen-sidebar.float-at-right-side") {
+           #tabbrowser-tabbox:has(#zen-sidebar-web-panel[pinned="true"]) {
+               position: relative !important;
+           }
+           #zen-sidebar-web-panel[pinned="true"] {
+               right: var(--zen-element-separation) !important;
+               animation: none !important;
+               opacity: 100 !important;
+           }
+           /* DONT DISPLAY WRAPPER WHEN SIDEBAR HIDDEN */
+           #zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[hidden="true"]) {
+               display: none !important;
+           }
+           /* DISPLAY WRAPPER WHEN SIDEBAR SHOWN */
+           #zen-sidebar-web-panel-wrapper:not(:has(#zen-sidebar-web-panel[hidden="true"])) {
+               display: flex !important;
+           }
        }
    /*#endregion*/
/*#endregion*/

I apologize beforehand, didn't updated the theme.json file. Included comit af7d904 changing file themes.json from:

{
    "id": "6a51c7de-3796-4aa8-a2e4-46274f0b59a8",
    "name": "Zen Sidebar At Right Side",
    "description": "Pin or float the Zen Sidebar at the right side.",
    "homepage": "",
    "style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/6a51c7de-3796-4aa8-a2e4-46274f0b59a8/chrome.css",
    "readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/6a51c7de-3796-4aa8-a2e4-46274f0b59a8/readme.md",
    "image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/6a51c7de-3796-4aa8-a2e4-46274f0b59a8/image.png",
    "author": "AntonioSTM",
-   "version": "1.0.0",
    "preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/6a51c7de-3796-4aa8-a2e4-46274f0b59a8/preferences.json"
}

to:

{
    "id": "6a51c7de-3796-4aa8-a2e4-46274f0b59a8",
    "name": "Zen Sidebar At Right Side",
    "description": "Pin or float the Zen Sidebar at the right side.",
    "homepage": "",
    "style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/6a51c7de-3796-4aa8-a2e4-46274f0b59a8/chrome.css",
    "readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/6a51c7de-3796-4aa8-a2e4-46274f0b59a8/readme.md",
    "image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/6a51c7de-3796-4aa8-a2e4-46274f0b59a8/image.png",
    "author": "AntonioSTM",
+   "version": "1.0.1",
    "preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/6a51c7de-3796-4aa8-a2e4-46274f0b59a8/preferences.json"
}

Sorry for causing more work and many thanks in advance!

AntonioSTM commented 3 weeks ago

Sorry, just realized that the GUID of the theme had changed making My changes incorrect. Will close this issue and request for its deletion.

No2515 commented 3 weeks ago

Pin option works great for me, but floating option doesn't. Float seems to produce no noticeable changes. I would love to get this to work.

Another related sidebar feature recommendation, if I may, auto hide.

AntonioSTM commented 3 weeks ago

Thanks for the feedback.

If You could share a screenshot or share what other themes/mods are You using could be helpful.

Just to confirm, in the settings the option to float on the right side was checked and the sidebar was unpinned?

No2515 commented 3 weeks ago

image image

The sidebar pins to the right as expected, but it doesn't float. As in, the webpage automatically resizes itself once I try to access/exit the sidebar.

I need the sidebar to float over the webpage without resizing. Similar to the theme, Only top bar in compact.

AntonioSTM commented 3 weeks ago

Again thanks for the feedback.

I just tried Your setup with the latest unpublished version of the theme and its working but I will keep testing to make sure no more glitches/bugs arise.

BTW, the zen11 theme is no longer in the theme store, had to download it from the repo and manually install it.

No2515 commented 3 weeks ago

I took screenshots.

image image