Re-enable window dragging (macOS)

[colineberly]

I decided to make this a dedicated post so as to get visibility to anyone that comes across the issue looking for a simple fix. Hope this is OK. This is in reference to #1471.

---

If you are having an issue dragging your window in the macOS version, you can add the following CSS fix. This tweak enables draggable areas in the app window.

I've added 2 draggable regions, one being the top area of the sidebar above the search box, and the other area is the header in the main chat window, where the username is along with call and info buttons. I've also thrown in a couple positioning tweaks to the top area of the sidebar as well as removed search in collapsed sidebar view (under 900px). Note: In collapsed view, sidebar area is no longer a draggable region.

Place the following into the top of your custom.css file:

.rq0escxv.l9j0dhe7.du4w35lb.j83agx80.pfnyh3mw.i1fnvgqd.bp9cbjyn.owycx6da.btwxx1t3.jei6r52m.wkznzc2l.n851cfcs.dhix69tm.ahb00how,
.rq0escxv.l9j0dhe7.du4w35lb.j83agx80.pfnyh3mw.i1fnvgqd.bp9cbjyn.owycx6da.btwxx1t3.hv4rvrfc.dati1w0a.f10w8fjw.pybr56ya.b5q2rw42.lq239pai.mysgfdmx.hddg9phg {
		-webkit-app-region: drag !important;
}

.rq0escxv.l9j0dhe7.du4w35lb.j83agx80.pfnyh3mw.i1fnvgqd.bp9cbjyn.owycx6da.btwxx1t3.jei6r52m.wkznzc2l.n851cfcs.dhix69tm.ahb00how {
		margin: 0 !important;
		padding: 12px 16px 0 !important;
}

.rq0escxv.l9j0dhe7.du4w35lb.j83agx80.cbu4d94t.g5gj957u.d2edcug0.hpfvmrgz.kud993qy.buofh1pr {
    margin-top: 24px !important;
}

@media (max-width: 900px) {
	.rq0escxv.l9j0dhe7.du4w35lb.n851cfcs.aahdfvyu {
	    display: none !important;
	}
	.hybvsw6c.cjfnh4rs.j83agx80.cbu4d94t.dp1hu0rb.l9j0dhe7.kr520xx4.iyyx5f41.jyyn76af.ow71b3p4.pnfry9he.so2p5rfc.owhy4gn4.wrtwqps9 {
			padding-top: 36px !important;
	}
}

The custom.css file can be loaded by going to the main menu... Caprine > Caprine Preferences > Advanced > Custom Styles. Save your file and reload (Ctrl/Command+R) Caprine.

[scrack26]

Thank you! this fixed the issue of not moving the window

[massayoshi]

Thank you! It worked.

[dusansimic]

Hi @incace! Thanks for the fix. Are you interested in making a pull request to add this to the Caprine? I created a PR (#1489) that enabled dynamic switching of CSS that's being injected based on the the UI (separate css is being injected for the old and new design). You can use that to add draggable area for the new design. You should just edit browser.css in new-design dir.

[colineberly]

@dusansimic no worries. I can't get to it right at the moment. I will try over the weekend.

[dusansimic]

I'm also thinking if we should remove user profile icon from top bar and keep window buttons next to chats label. That way the top bar above contact list and top bar above messages would be the same height. What do you think about that?

You can also see that is the case in old design.

[stamatgeorge]

It's not working for me. When I go to Caprine > Caprine Preferences > Advanced > Custom Styles -- it launched Tor Browser (which I have installed) but not able to edit anything.

[massayoshi]

@stamatgeorge It’s because Tor is set to be the default CSS file opener. You need to change that to notepad or another text editor.

[realsircodesalot]

Thanks for that!

Also I have sidebar vibrancy enabled. If I add the following to my custom css it's back:

.wrtwqps9,
.hop1g133 {
	background: transparent !important;
}

Edit: simplified CSS.