endoflife.date: Left scrollbar presence, text overlap

[back2themoon]

https://endoflife.date/

endoflifedate.png

Couldn't reproduce an error. Looks similar to this recent issue.

[adoxa]

It wants max; try this userstyle.

Code: Select all

@-moz-document domain("endoflife.date") {
  .side-bar + .main {
    margin-left: calc((100% - 66.5rem) / 2 + 16.5rem)
  }
}

[back2themoon]

Thank you adoxa, it works. I'm sure keeping you busy.

It is the first time that the CSS to userscript result fails to work:

Code: Select all

// ==UserScript==
// @name endoflife.date fix (wants "max")
// @author adoxa
// @homepage https://forum.palemoon.org/viewtopic.php?f=70&t=32378&e=1#p262610
// @match https://*.endoflife.date/*
// @grant none
// @version 1.0	       
// ==/UserScript==

(function() {var css = ["@-moz-document domain('endoflife.date') {",
"  .side-bar + .main {",
"    margin-left: calc((100% - 66.5rem) / 2 + 16.5rem)",
"  }",
"}"
].join("\n");
if (typeof GM_addStyle != 'undefined') {
 GM_addStyle(css);
 } else if (typeof PRO_addStyle != 'undefined') {
 PRO_addStyle(css);
 } else if (typeof addStyle != 'undefined') {
 addStyle(css);
 } else {
 var node = document.createElement('style');
 node.type = 'text/css';
 node.appendChild(document.createTextNode(css));
 var heads = document.getElementsByTagName('head');
 if (heads.length > 0) { heads[0].appendChild(node);
 } else {
 // no head yet, stick it whereever
 document.documentElement.appendChild(node);
 }
}})();

Not expecting you are anyone else to fix this too, of course (or fix anything, for that matter). But I put the code here, just in case. It is impressive how verbose userscripts are in comparison.

[vannilla]

The userscript can be simplified to:

Code: Select all

// ==UserScript==
// @name endoflife.date fix (wants "max")
// @author adoxa
// @homepage https://forum.palemoon.org/viewtopic.php?f=70&t=32378&e=1#p262610
// @match https://*.endoflife.date/*
// @grant none
// @version 1.0
// @run-at document-end
// ==/UserScript==
(function() {
  const css = `.side-bar + .main {
    margin-left: calc((100% - 66.5rem) / 2 + 16.5rem);
}`;

  const node = document.createElement('style');
  node.type = 'text/css';
  node.innerText = css;
  document.head.append(node);
})();

[back2themoon]

Thank you, vanillia. Tried it but it doesn't work. In any case, I've decided to switch to Stylem/userstyles for these hopefully temporary fixes. It even seems to perform faster than GM. That old CSS to UserScript Converter can be dodgy I guess, and if adoxa uses/prefers userstyles, I certainly won't disagree!

[Moonchild]

I've decided to switch to Stylem/userstyles for these hopefully temporary fixes. It even seems to perform faster than GM.

Using the browser's native user style overrides plugging in CSS directly will always be more performant than injecting nodes via JS and forcing repaints for them to take effect. So not only is the converter dodgy but you're also choosing a much less optimal method to change styles.