From d3449eaddde6447664abe908fa68a8b15d0663ed Mon Sep 17 00:00:00 2001 From: tretrauit Date: Wed, 25 Oct 2023 00:33:27 +0700 Subject: [PATCH] userstyles: update messenger-dynamic-sidebar --- userstyles/README.md | 4 +- userstyles/messenger-dynamic-sidebar.user.css | 106 +++++++++--------- .../update-messenger-dynamic-sidebar.py | 68 +++++++++++ 3 files changed, 122 insertions(+), 56 deletions(-) create mode 100644 userstyles/scripts/update-messenger-dynamic-sidebar.py diff --git a/userstyles/README.md b/userstyles/README.md index d752345..2ca40f3 100644 --- a/userstyles/README.md +++ b/userstyles/README.md @@ -5,4 +5,6 @@ Contains random UserStyles. ## UserStyles list - [Messenger Dynamic Sidebar](./messenger-dynamic-sidebar.user.css): [reizumi](https://codeberg.org/reizumi)'s Messenger Dynamic Sidebar ported to pure CSS for Ferdium support - > Ported from commit [`1cb2a5b12ad2d04d8c3932892108b6be05528c6f`](https://codeberg.org/reizumi/userstyles/commit/1cb2a5b12ad2d04d8c3932892108b6be05528c6f) + > Ported from commit [`9df0607a9c709ba5a1e8e3d12e98c36e64928981`](https://codeberg.org/reizumi/userstyles/commit/9df0607a9c709ba5a1e8e3d12e98c36e64928981) using [update-messenger-dynamic-sidebar.py](./scripts/update-messenger-dynamic-sidebar.py) + + > If the CSS isn't working as expected, try pasting it into `darkmode.css` and Enable Dark mode in Ferdium. diff --git a/userstyles/messenger-dynamic-sidebar.user.css b/userstyles/messenger-dynamic-sidebar.user.css index 583bd7e..b68d885 100644 --- a/userstyles/messenger-dynamic-sidebar.user.css +++ b/userstyles/messenger-dynamic-sidebar.user.css @@ -5,21 +5,20 @@ --sidebarEase: "ease"; --sidebarWidth: 360px; } - -.bdao358l.om3e55n1.g4tp4svg.alzwoclg.cqf1kptm.jez8cy9q.gvxzyvdx.aeinzg81.qp72b3h3.oxkhqvkx.nch0832m.srn514ro.rl78xhln { +/* Hide action bar */ +.x9f619.x1n2onr6.x1ja2u2z.x78zum5.xdt5ytf.x2lah0s.x193iq5w.xeuugli.x1y71gwh.xu3j5b3.xm81vs4.xexx8yu.x18d9i69.xkhd6sd.x4uap5 { max-width: 0; overflow: hidden; border-right-color: var(--web-wash); transition: max-width var(--sidebarSpeed); transition-delay: var(--actionBarDelay); } -.bdao358l.om3e55n1.g4tp4svg.alzwoclg.cqf1kptm.jez8cy9q.gvxzyvdx.aeinzg81.qp72b3h3.oxkhqvkx.nch0832m.srn514ro.rl78xhln:hover { +.x9f619.x1n2onr6.x1ja2u2z.x78zum5.xdt5ytf.x2lah0s.x193iq5w.xeuugli.x1y71gwh.xu3j5b3.xm81vs4.xexx8yu.x18d9i69.xkhd6sd.x4uap5:hover { max-width: 211px; border-right-color: var(--media-inner-border); } /* Header */ -.mm98tyaj - .bdao358l.om3e55n1.g4tp4svg.alzwoclg.jez8cy9q.sl27f92c.i85zmo3j.sr926ui1.jl2a5g8c.anf3k8p9.rj0o91l8.qjfq86k5.p9ctufpz.lth9pzmp { +.x9f619.x1n2onr6.x1ja2u2z.x78zum5.x2lah0s.x1qughib.x6s0dn4.xozqiw3.x1q0g3np.x1sy10c2.xktsk01.xod5an3.x1d52u69 { opacity: 0; height: 0; margin: 0 16px; @@ -27,78 +26,75 @@ transition: var(--sidebarSpeed); } /* Search */ -.mm98tyaj .bdao358l.om3e55n1.g4tp4svg.r227ecj6.gt60zsk1.rj2hsocd.f9xcifuu { +.x9f619.x1n2onr6.x1ja2u2z.xsag5q8.x1yrsyyn { opacity: 0; height: 0; overflow: hidden; transition: var(--sidebarSpeed); } /* Text Header */ -.mm98tyaj .jxuftiz4.jwegzro5.hl4rid49.icdlwmnq { +.x1cvmir6 .x1heor9g.x1qlqyl8.x1pd3egz.x1a2a7pz { width: 150px; } /* Unread Message Indicator */ -.mm98tyaj .nmlomj2f[data-visualcompletion="ignore"] { +.x1cvmir6 .x1fsd2vl[data-visualcompletion="ignore"] { position: relative; right: 83px; transition-delay: var(--sidebarDelay); } /* Notification bell */ -.mm98tyaj .sr926ui1.alzwoclg.i85zmo3j svg, -.mm98tyaj .sr926ui1.alzwoclg.i85zmo3j .i1ozlmoo { +.x1cvmir6 .xozqiw3.x78zum5.x6s0dn4 svg { display: none; } -/* Scrollbar */ -.mm98tyaj - .alzwoclg.cqf1kptm.cgu29s5g.i15ihif8.sl4bvocy.lq84ybu9.efm7ts3d.om3e55n1.mfclru0v { - overflow-y: hidden; -} -/* Hide contents (workaround) */ -.i85zmo3j.alzwoclg.rtxb060y.p4zypb3t { +/* Hide contents */ +.x9f619.x1n2onr6.x1ja2u2z.x78zum5.x1iyjqo2.xs83m0k.xeuugli.x1qughib.x6s0dn4.x1a02dak.x1q0g3np.xdl72j9 { overflow: hidden; } /* Sidebar (not focused) */ -.mm98tyaj { +.x1cvmir6 { width: 80px; min-width: 80px; transition: width var(--sidebarSpeed) var(--sidebarEase); transition-delay: var(--sidebarDelay); } -/* Sidebar (focused) */ -.b0ur3jhr:hover .mm98tyaj { - width: var(--sidebarWidth); - transition-delay: 0s; -} -/* Header (focused) */ -.b0ur3jhr:hover - .mm98tyaj - .bdao358l.om3e55n1.g4tp4svg.alzwoclg.jez8cy9q.sl27f92c.i85zmo3j.sr926ui1.jl2a5g8c.anf3k8p9.rj0o91l8.qjfq86k5.p9ctufpz.lth9pzmp { - opacity: 1; - height: auto; - overflow: visible; - margin: 20px 16px 12px 16px; -} -/* Search (focused) */ -.b0ur3jhr:hover - .mm98tyaj - .bdao358l.om3e55n1.g4tp4svg.r227ecj6.gt60zsk1.rj2hsocd.f9xcifuu { - opacity: 1; - height: auto; - overflow: visible; -} -/* Unread Message Indicator (focused) */ -.b0ur3jhr:hover .mm98tyaj .nmlomj2f[data-visualcompletion="ignore"] { - right: 0; - transition-delay: 0s; -} -/* Notification bell (focused) */ -.b0ur3jhr:hover .mm98tyaj .sr926ui1.alzwoclg.i85zmo3j svg, -.b0ur3jhr:hover .mm98tyaj .sr926ui1.alzwoclg.i85zmo3j .i1ozlmoo { - display: block; -} -/* Scrollbar (focused) */ -.b0ur3jhr:hover - .mm98tyaj - .alzwoclg.cqf1kptm.cgu29s5g.i15ihif8.sl4bvocy.lq84ybu9.efm7ts3d.om3e55n1.mfclru0v { - overflow-y: scroll; +@media only screen and (min-width: 900px) { + /* Sidebar (focused) */ +.x1vjfegm:hover .x1cvmir6 { + width: var(--sidebarWidth); + transition-delay: 0s; + } + /* Header (focused) */ +.x1vjfegm:hover .x1cvmir6 .x9f619.x1n2onr6.x1ja2u2z.x78zum5.x2lah0s.x1qughib.x6s0dn4.xozqiw3.x1q0g3np.x1sy10c2.xktsk01.xod5an3.x1d52u69 { + opacity: 1; + height: auto; + overflow: visible; + margin: 20px 16px 12px 16px; + } + /* Search (focused) */ +.x1vjfegm:hover .x9f619.x1n2onr6.x1ja2u2z.xsag5q8.x1yrsyyn { + opacity: 1; + height: auto; + overflow: visible; + } + /* Unread Message Indicator (focused) */ +.x1vjfegm:hover .x1cvmir6 .x1fsd2vl[data-visualcompletion="ignore"] { + right: 0; + transition-delay: 0s; + } + /* Notification bell (focused) */ +.x1vjfegm:hover .x1cvmir6 .xozqiw3.x78zum5.x6s0dn4 svg { + display: block; + } + /* Scrollbar */ +.x1cvmir6 .x78zum5.xdt5ytf.x1iyjqo2.xs83m0k.x1xzczws.x6ikm8r.x1rife3k.x1n2onr6.xh8yej3 { + overflow-y: hidden; + } + /* Scrollbar (focused) */ +.x1vjfegm:hover .x78zum5.xdt5ytf.x1iyjqo2.xs83m0k.x1xzczws.x6ikm8r.x1rife3k.x1n2onr6.xh8yej3 { + overflow-y: scroll; + } + /* Hide contents (focused) */ +.x1vjfegm:hover .x1cvmir6 .x9f619.x1n2onr6.x1ja2u2z.x78zum5.x1iyjqo2.xs83m0k.xeuugli.x1qughib.x6s0dn4.x1a02dak.x1q0g3np.xdl72j9 { + overflow: visible; + } } diff --git a/userstyles/scripts/update-messenger-dynamic-sidebar.py b/userstyles/scripts/update-messenger-dynamic-sidebar.py new file mode 100644 index 0000000..0a3b26e --- /dev/null +++ b/userstyles/scripts/update-messenger-dynamic-sidebar.py @@ -0,0 +1,68 @@ +import requests +from pathlib import Path + + +URL = "https://codeberg.org/reizumi/userstyles/raw/branch/master/messenger-dynamic-sidebar.user.css" + + +def find_line(source: str, content: str) -> int: + for line, text in enumerate(source.splitlines()): + if content in text: + return line + return -1 + + +def main(): + print("Reading our CSS file...") + my_css = (Path.cwd() / "messenger-dynamic-sidebar.user.css").read_text() + my_css_lines = my_css.splitlines() + print("Reading the source CSS file...") + r = requests.get(URL) + r.raise_for_status() + source_css = r.text + source_css_lines = source_css.splitlines() + my_new_css = "" + # Update CSS addresses + skip_lines = [] + for line, text in enumerate(my_css_lines): + if line in skip_lines: + print("Skipping line", line) + continue + elif text.strip() == "/* Hide action bar */": + print("Fixing hide action bar CSS...") + hide_action_line = find_line(source_css, "if hideActionBar {") + if hide_action_line != -1: + my_new_css += text + "\n" + source_css_lines[hide_action_line + 1].strip() + "\n" + hover_line = hide_action_line + 8 + skip_lines.append(line + 1) + for i in range(2, 8): + my_new_css += my_css_lines[line + i] + "\n" + skip_lines.append(line + i) + my_new_css += source_css_lines[hover_line].strip() + "\n" + skip_lines.append(line + 8) + elif text.strip().startswith("/*"): + source_line = find_line(source_css, text) + if source_line != -1: + my_new_css += text + "\n" + source_css_lines[source_line + 1].strip() + "\n" + next_line = line + 1 + skip_lines.append(next_line) + while not my_css_lines[next_line].endswith("{"): + next_line += 1 + skip_lines.append(next_line) + else: + print(f"Couldn't find line for {text}") + my_new_css += text + "\n" + else: + my_new_css += text + "\n" + print() + print("=== OUTPUT CSS ===") + print() + print(my_new_css) + print("=== END OUTPUT CSS ===") + print() + print("Writing new CSS file...") + (Path.cwd() / "messenger-dynamic-sidebar.user.css").write_text(my_new_css) + + +if __name__ == "__main__": + main()