[outdated] Rounder: Round more stuff!

Share your Projects! Dashboards & Frontend
1

Note: This will slow down your client side HA, due to some stuff. I recommend commenting out setInterval(roundPaperDialogs, 30);, or using card-mod's new theme feature.
In HA, you can use the ha-card-border-radius property to round corners. The problem is that the popup more-info cards don’t change.
This is a JS script I threw together to round the more info dialogs:

var radiusAmount = (document.documentElement.style.getPropertyValue("--ha-card-border-radius")
                    || '10px');
console.log("%cRounder!%c\n%cround amount: " +
            String(radiusAmount) +
            "%c\n%creport bug: http://v.ht/RAGz",
            "background-color: lightgrey; color: purple; font-weight: bold; padding: 10px;",
            "",
            "background-color: #224; color: white; font-weight: bold; padding: 4px;",
            "",
            "background-color: #DDD; background-color: red; color: white; font-weight: bold; padding: 4px;")
document.documentElement.style.setProperty('--ha-card-border-radius', radiusAmount);
function roundInfos() {
    var dialog = document.body.children[0].shadowRoot.querySelector("ha-more-info-dialog");
    if (dialog !== null) {
        dialog.style.setProperty('border-radius', radiusAmount);
        dialog = dialog.shadowRoot.querySelector("more-info-controls");
        var toolbar = dialog.shadowRoot.querySelector("app-toolbar");
        toolbar.style.setProperty('border-radius', radiusAmount);
    }
}
function allElems() {
    var elemList = document.body.querySelectorAll("*");
    elemList = [...elemList.values()];
    var prevList = [];
    while (elemList.length != prevList.length) {
        prevList = elemList.slice();
        var elcopy = elemList.slice();
        for (var i = 0; i < elcopy.length; i++) {
            if (elcopy[i].shadowRoot) {
                var theseelems = elcopy[i].shadowRoot.querySelectorAll("*");
                theseelems = [...theseelems.values()];
                if (theseelems && theseelems.length > 0) {
                    elemList = [...new Set(elemList.concat(theseelems))];
                }
            } else {
                var theseelems = elcopy[i].querySelectorAll("*");
                theseelems = [...theseelems.values()];
                if (theseelems && theseelems.length > 0) {
                    elemList = [...new Set(elemList.concat(theseelems))];
                }
            }
        }
    }
    return elemList;
}
function roundPaperDialogs() {
    var elems = allElems();
    for (var i = 0; i < elems.length; i++) {
        if (elems[i].tagName.toLowerCase() == "ha-paper-dialog") {
            elems[i].style.setProperty('border-radius', radiusAmount);
        }
    }
}
setInterval(roundInfos, 30);
setInterval(roundPaperDialogs, 30);
  • If you already have ha-card-border-radius set in your theme, then you don’t need to do anything.
  • If you don’t, change the part where it says || '10px' to || 'youramountpx'

Changelog:

  • Move to auto-detect radius
  • Remove syntax-error if and log message
  • Update message with shortlink to here (for bugs)
  • Add styling to message
  • Remove unnecessary style
  • Round paper popups
  • Round even more ha-paper-dialog popups!
  • Fix undefined error

Put it in your www folder and add it as a module. That should work.
Please give me feedback on this (this is my first script thing!)

1 Like