example to override plugin styles?

[Mariusthvdb]

we talked about overriding the plugin styles before, but never got to the actual technique how to do that.

I need my notification font size to be set to 14px in expanded mode, and can do that in the Inspector.
However, I am not aware of the syntax in the sidebar config file.

please hope me out

currently setting it in card-mod theme, but this is an attempt to do away with all of that, so we can do it completely inside this plugin

the top notification now is in sidebar, the others are made in card-mod theme

my eyes really need that bigger font-size ;-(

btw, look what happens on the non expanded notification:

native plugin styling makes it practically useless like this. There must be some fine-tuning to allow us to see a non expanded notification?

check the other larger notifications that still are perfectly readable.

my regular card-mod theme setting:

guess an override of the non expanded notification is required also, but how?

[elchininet]

Just add the styles to the styles option, something like this should do the work:

styles: |
  :host paper-icon-item > .notification-badge {
    font-size: 14px;
  }
  :host paper-icon-item > .notification-badge-collapsed {
    max-width: none;
    overflow: visible;
  }

Just adding :host paper-icon-item > to make it as specific as the plugin styles, you can do the same only with .notification-badge and .notification-badge-collapsed selectors and adding !important.

[Mariusthvdb]

and pasting my card-mod mod to the styling of the collapsed, not expanded notification:

styles: |
  :host paper-icon-item > .notification-badge-collapsed {
    left: 26px;
    font-size: 0.65em;
    bottom: 14px;
    padding: 0px 2px;
    transform: translateX(-25%)
  }

is working fine, so Ill keep that for now, and probably override on some individual badges if that would be possible (seems not documented for the individual order items?)

[elchininet]

If you set a style to notification-badge it applies to both notifications (the expanded and the collapsed), if you set styles to notification-badge-collapsed it only applies to the collapsed one. You already figured it out, if you want to add styles to the expanded one you would need to use not(.notification-badge-collapsed).

[elchininet]

its a bit confusing your plugin uses collapsed where card-mod uses :not([expanded])

The same element can be selected in an unlimited number of ways. You can use the selector that you want as long as it is more specific than the styles of the plugin.

[Mariusthvdb]

If you set a style to notification-badge it applies to both notifications (the expanded and the collapsed)

well, apparently it doesnt, if you also set a specific style to the notification-badge-collapsed, which I figured was the overriding of the generic notification-badge

so, the logic is:

either set it for both, using notification-badge

or set it for it for specific, in which case one needs to reference both notification-badge-collapsed and not(.notification-badge-collapsed) explicitly?

[elchininet]

Yes, that's one of the solutions, you can also use the [expanded] selector that you asked before if you prefer and it will apply to both but as only one is visible it will do the work in the expanded one.

[Mariusthvdb]

guess dynamic animation is too specific for the plugin too?

I did give:

  :host a[data-panel='ui-data'] paper-icon-item ha-icon {
    animation:
      [[[ @partial data
          return !lek ? 'spin 3s infinite linear' : 'none'; ]]]
  }
  @keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
  }

a try to replicate what I do in card-mod:

      a[data-panel='ui-data'] paper-icon-item ha-icon {
        animation: {{'spin 3s infinite linear' if lek else 'none'}};
      }

it works without the template

  :host a[data-panel='ui-data'] paper-icon-item ha-icon {
    animation: spin 3s infinite linear
  }
  @keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
  }

but I see no way to add the condition

[Mariusthvdb]

ok thanks,

will keep it in card-mod.
Until you feel the itch, and add templates there ;-)

hahah
cool plugin it is!

btw, we can declare the keyframes like this, and use them all over in the styles:

styles: |
  @keyframes marquee {
    from {transform: translateX(0%);}
    to {transform: translateX(35%);}
  }
  @keyframes blink {
    50% {opacity: 0.2;}
  }
  @keyframes blinkhard {
    0%,49% {opacity:0;}
    50%,100% {opacity:1;}
  }
  @keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
  }
  :host paper-icon-item > .notification-badge:not(.notification-badge-collapsed) {
    font-size: 14px;
    left: calc(var(--app-drawer-width,248px) - 32px);
    transform: translateX(-50%);
    border-radius: 24px;
    padding: 0px 6px;
  }
  :host paper-icon-item > .notification-badge-collapsed {
    left: 26px;
    font-size: 0.65em;
    bottom: 14px;
    padding: 0px 2px;
    min-width: 20px;
    transform: translateX(-25%);
    border-radius: 24px;
    max-width: 100px;
  }
  .menu .title:after {
    font-weight: bold;
    animation: marquee 4s alternate infinite;
  }
  a:hover paper-icon-item {
    background: var(--hover-color);
  }
  :host a[data-panel='ui-data'] paper-icon-item ha-icon {
    animation: spin 3s infinite linear;
  }

conifeer this an somewhat fleshed out example to override the styles, as I opened the discussion

[elchininet]

Until you feel the itch, and add templates there ;-)

Let's see, it would be hard to implement it without replicating a high part of card_mod there.

btw, we can declare the keyframes like this, and use them all over in the styles:

Yep, that should work, if it is static styles it is OK.

[Mariusthvdb]

Let's see, it would be hard to implement it without replicating a high part of card_mod there.

that would only be the case if it would be implemented in the styles section wouldn't it?

if you would add 2 options in the item config, animation and background and allow the same templates as the other options use, we could do it all inside the config?

eg:

  - item: ui-data
    match: data-panel
    order: 2
    <<: *keep
    animation: >
    icon: >
      [[[ @partial data
          return lek ? 'mdi:pipe-leak' : 'mdi:home-analytics'; ]]]
    icon_color: >
      [[[ @partial data
          return gevaar ? 'var(--alert-color)' : 'var(--ok-color)'; ]]]

    background: >
      [[[ @partial data
          return gevaar ? 'var(--alert-background)' : 'var(--ok-background)'; ]]]
    animation: >
        [[[ @partial data
            return lek ? 'spin 3s infinite linear' : 'none'; ]]]

[elchininet]

if you would add 2 options in the item config, animation and background and allow the same templates as the other options use, we could do it all inside the config?

Those are options that are too specific so they are out of the scope of the plugin. Everybody has their own setup and personalisations, if every option that every user has in their card_mod styles is added to the plugin it would become slow, buggy, hard to scalate and hard to mantain, something that would lead eventually to its death. As I mentioned, there is no anything wrong with having a card_mod set up, I have it for myself and it does its work pretty well to keep things like I want, but most of the styles there are not generic enough to convert them in a plugin so it is better to keep them where they should be. :)

[Mariusthvdb]

btw, we can declare the keyframes like this, and use them all over in the styles:

Yep, that should work, if it is static styles it is OK.

just as a fyi, Ive found that we can declare those keyframes in the plugin, and use them in the card-mod theme, without declaring them there too....
and vice versa too probably.

Anyways, closing as the examples are plenty now ;-)