🟣 Rounded - Dashboard guide

[Nemu]

By the way. You do not need to add the scaler, width and color to the theme. You can apply it in button card.
I ve just noticed the mistake. Usennn

:host {
    --assistant-width: 50;
    --assistant-scaler: calc(var(--assistant-width); / 200);
    --assistant-color: white;
  }

so here the complete code.

type: custom:button-card
show_name: false
show_state: false
show_icon: false
show_label: false
tap_action:
  action: none
styles:
  grid:
    - grid-template-areas: '"."'
    - grid-template-columns: min-content
    - grid-template-rows: min-content
  card:
    - padding: 32px
    - background: var(--background-color)
    - height: max-content
custom_fields:
  custom_html: |
    [[[
      return `
      <div class="assistant-container">
          <div id="assistant">
              <div class="assistant-dot"></div>
              <div class="assistant-dot"></div>
              <div class="assistant-dot"></div>
          </div>
          <div id="assistant-corner"></div>
          <div id="assistant-antenna">
              <div id="assistant-beam"></div>
              <div id="assistant-beam-pulsar"></div>
          </div>
      </div>
      `
    ]]]
extra_styles: |
  :host {
    --assistant-width: 50;
    --assistant-scaler: calc(var(--assistant-width) / 200);
    --assistant-color: white;
  }
  .assistant-container {
    margin: auto;
    position: absolute;
    bottom: 0;
    left: 0;
    top: 0;
    right: 0;
    height: calc(200px * var(--assistant-scaler));
    width: calc(200px * var(--assistant-scaler));
    animation: up-down 7.5s infinite ease-in-out;
    background-color: var(--background-color);
  }
  .assistant-container #assistant {
    margin: auto;
    position: absolute;
    bottom: 0;
    left: 0;
    top: 0;
    right: 0;
    width: calc(150px * var(--assistant-scaler));
    height: calc(85px * var(--assistant-scaler));
    border: calc(12px * var(--assistant-scaler)) solid var(--assistant-color);
    border-radius: 5rem;
  }
  .assistant-container #assistant-corner {
    margin: auto;
    position: absolute;
    bottom: 0;
    left: 0;
    top: 0;
    right: 0;
    top: calc(105px * var(--assistant-scaler));
    left: calc(-65px * var(--assistant-scaler));
    width: 0;
    height: 0;
    border-left: calc(20px * var(--assistant-scaler)) solid transparent;
    border-right: calc(20px * var(--assistant-scaler)) solid transparent;
    border-top: calc(25px * var(--assistant-scaler)) solid var(--assistant-color);
    transform: rotate(140deg);
  }
  .assistant-container #assistant-antenna {
    margin: auto;
    position: absolute;
    bottom: 0;
    left: 0;
    top: 0;
    right: 0;
    top: calc(-125px * var(--assistant-scaler));
    height: calc(20px * var(--assistant-scaler));
    width: calc(10px * var(--assistant-scaler));
    background-color: var(--assistant-color);
    animation: antenna-appear 7.5s infinite ease-in-out;
  }
  .assistant-container #assistant-antenna #assistant-beam {
    position: absolute;
    top: calc(-12.5px * var(--assistant-scaler));
    left: calc(-5px * var(--assistant-scaler));
    height: calc(20px * var(--assistant-scaler));
    width: calc(20px * var(--assistant-scaler));
    border-radius: 50%;
    background-color: var(--assistant-color);
    animation: beam-appear 7.5s infinite ease-in-out;
  }
  .assistant-container #assistant-antenna #assistant-beam-pulsar {
    position: absolute;
    top: calc(-12.5px * var(--assistant-scaler));
    left: calc(-5px * var(--assistant-scaler));
    height: calc(20px * var(--assistant-scaler));
    width: calc(20px * var(--assistant-scaler));
    border-radius: 50%;
    background-color: var(--assistant-color);
    animation: beam-pulsar-appear 7.5s infinite ease-in-out;
  }
  .assistant-container .assistant-dot {
    height: calc(17.5px * var(--assistant-scaler));
    width: calc(17.5px * var(--assistant-scaler));
    margin: auto;
    position: absolute;
    bottom: 0;
    left: 0;
    top: 0;
    right: 0;
    left: calc(-65px * var(--assistant-scaler));
    background-color: var(--assistant-color);
    border-radius: 50%;
    animation: pulse-outer 7.5s infinite ease-in-out;
  }
  .assistant-container .assistant-dot:nth-child(2) {
    left: 0;
    animation: pulse-inner 7.5s infinite ease-in-out;
    animation-delay: 0.2s;
  }
  .assistant-container .assistant-dot:nth-child(3) {
    left: calc(65px * var(--assistant-scaler));
    animation: pulse-outer 7.5s infinite ease-in-out;
    animation-delay: 0.4s;
  }
  @keyframes pulse-inner {
      0% { transform: scale(1); }
      7.5% { transform: scale(1.5); }
      15% { transform: scale(1); }
      22.5% { transform: scale(1.5); }
      30% { transform: scale(1); }
      37.5% { transform: scale(1.5); }
      45% { top: 0; transform: scale(1); height: calc(17.5px * var(--assistant-scaler)); border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; transform: rotate(-370deg); }
      50% { top: calc(22.5px * var(--assistant-scaler)); height: calc(10px * var(--assistant-scaler)); border-top-left-radius: 50%; border-top-right-radius: 50%; border-bottom-left-radius: 3rem; border-bottom-right-radius: 3rem; transform: rotate(10deg); }
      55% { transform: rotate(-10deg); }
      60% { transform: rotate(10deg); }
      65% { transform: rotate(-10deg); }
      85% { top: calc(22.5px * var(--assistant-scaler)); height: calc(10px * var(--assistant-scaler)); border-top-left-radius: 50%; border-top-right-radius: 50%; border-bottom-left-radius: 3rem; border-bottom-right-radius: 3rem; transform: rotate(0deg); }
      92.5% { top: calc(22.5px * var(--assistant-scaler)); height: calc(10px * var(--assistant-scaler)); border-top-left-radius: 50%; border-top-right-radius: 50%; border-bottom-left-radius: 2.5rem; border-bottom-right-radius: 2.5rem; transform: rotate(0deg); }
      100% { top: 0; height: calc(17.5px * var(--assistant-scaler)); border-radius: 50%; transform: rotate(-360deg); }
  }
  @keyframes pulse-outer {
      0% { transform: scale(1); }
      7.5% { transform: scale(1.5); }
      15% { transform: scale(1);  }
      22.5% { transform: scale(1.5); }
      30% { transform: scale(1); }
      37.5% {transform: scale(1.5); }
      45% { transform: scale(1); height: calc(17.5px * var(--assistant-scaler)); }
      55% { tranform: scale(1); height: calc(5px * var(--assistant-scaler)); }
      60% { height: calc(17.5px * var(--assistant-scaler)); }
      75% { height: calc(17.5px * var(--assistant-scaler)); }
      80% { tranform: scale(1); height: calc(5px * var(--assistant-scaler)); }
      85% { height: calc(17.5px * var(--assistant-scaler)); }
      100% { height: calc(17.5px * var(--assistant-scaler)); }
  }
  @keyframes antenna-appear {
      0% { visibility: hidden; top: calc(-100px * var(--assistant-scaler)); height: 0; } 
      50% { visibility: hidden; top: calc(-100px * var(--assistant-scaler)); height: 0; }
      55% { visibility: visible; top: calc(-125px * var(--assistant-scaler)); height: calc(20px * var(--assistant-scaler)); }
      95% { visibility: visible; top: calc(-125px * var(--assistant-scaler)); height: calc(20px * var(--assistant-scaler)); }
      100% { top: calc(-100px * var(--assistant-scaler)); height: 0; }
  }
  @keyframes beam-appear {
      0% { visibility: hidden; top: calc(-12.5px * var(--assistant-scaler)); height: 0; }
      50% { visibility: hidden; top: calc(-12.5px * var(--assistant-scaler)); height: 0; }
      55% { visibility: visible; top: calc(-12.5px * var(--assistant-scaler)); height: calc(20px * var(--assistant-scaler)); width: calc(20px * var(--assistant-scaler)); }
      100% { visibility: visible; top: calc(-12.5px * var(--assistant-scaler)); height: calc(20px * var(--assistant-scaler)); width: calc(20px * var(--assistant-scaler)); }
  }
  @keyframes beam-pulsar-appear {
      0% { visibility: hidden; top: calc(-12.5px * var(--assistant-scaler)); height: 0; }
      50% { visibility: hidden; top: calc(-12.5px * var(--assistant-scaler)); height: 0; }
      55% { visibility: visible; top: calc(-12.5px * var(--assistant-scaler)); left: calc(-5px * var(--assistant-scaler)); height: calc(20px * var(--assistant-scaler)); width: cal(20px * var(--assistant-scaler)); opacity: 1; }
      65% { top: calc(-25px * var(--assistant-scaler)); left: calc(-15px * var(--assistant-scaler)); height: calc(40px * var(--assistant-scaler)); width: calc(40px * var(--assistant-scaler)); opacity: 0; visibility: visible; }
      74% { visibility: hidden; opacity: 0; }
      75% { visibility: visible; top: calc(-12.5px * var(--assistant-scaler)); left: calc(-5px * var(--assistant-scaler)); height: calc(20px * var(--assistant-scaler)); width: calc(20px * var(--assistant-scaler)); opacity: 1; }
      85% { top: calc(-25px * var(--assistant-scaler)); left: calc(-15px * var(--assistant-scaler)); height: calc(40px * var(--assistant-scaler)); width: calc(40px * var(--assistant-scaler)); opacity: 0; visibility: visible; }
      94% { visibility: hidden; opacity: 0; }
      100% { visibility: hidden; opacity: 0; }
  }
  @keyframes up-down {
      0% { transform: translate(0); }
      2.5% { transform: translate(0, 2%); }
      25% { transform: translate(0); }
      37.5% { transform: translate(0, 2%); }
      50% { transform: translate(0); }
      62.5% { transform: translate(0, 2%); }
      75% { transform: translate(0); }
      87.5% { transform: translate(0, 2%); }
      100% { transform: translate(0); }
  }

[Nemu]

So, here my second swipe card for those, who want to test.

Lovelace Swipe-Button-Card

Hello Community, here is my next card Swipe-Button-Card. Swipe-Button-Card is a minimalist and customizable card, that lets you toggle 3 buttons with swipe gestures. swipe-button-card is a container for 3 cards, which can be any Home Assistant card. Swiping to the left - right (or top - bottom) triggers a click on the specified sub-card. This card is written in CSS and Java Script and not using any third party library for the swipe feature. [1000065454] Swipe-Button-Card As I´m not a full t…

[laurens362]

Uhmm got a question… You know how to fix the background of bubble popup with your theme? With your theme the popups got a terrible background

[Nemu]

My theme??? I guess you meant Leon?
Regarding bubble card, Cloos postet following code to change the background.
use it under the pop-up card.

styles: |
      .pop-up {
        background-color: your color !important;
      }

[18yt8zhg]

Hi,

Thanks for sharing your themes, I try to create mine with yours and Bubble. But one question, how it’s possible to move the top bar to the bottom bar ?

Thanks

EDIT : it’s done, i didn’t define Rounded by default…

[gabriele_1007 (Gabriele)]

@LE0N

Apply theme

1. Go to Developer Tools → Services.
2. Run the service named “Home Assistant Frontend: Reload themes”.
3. Next, open the service named “Home Assistant Frontend: Set theme” and run the service twice with both the “Dark” and “Light” modes checked.
4. Now go to your profile and set the Theme to “Backend-selected”. You can also skip step 3 and directly set the theme to “Rounded” in your profile.

Hi everybody, I can’t find the services section in developer tools. Could someone help me?

[gabriele_1007 (Gabriele)]

@LE0N

This appears at the top of every screen. It provides some breathing space for each screen and immediately shows where you are located.

The title card is created using a custom button-card. See the code below. My dashboard also uses a custom font, which I repeat in the custom button-card for reliability, so it always loads correctly.

type: custom:button-card
name: Title here
styles:
  card:
    - font-family: In case of a custom font, otherwise you can remove this line
    - background: none
    - padding: 16px 0
    - '--mdc-ripple-press-opacity': 0
  name:
    - font-size: 32px
    - color: var(--contrast20)

And where should I put this code here? In rounded.yaml or configuration.yaml?

[matmann]

neither
it’s a title card, it goes with your other cards

[gabriele_1007 (Gabriele)]

And where should I find them?

[CM000n (Simon)]

You need to create a new Dashboard in yaml mode Multiple dashboards - Home Assistant

Then you can place your cards in the dashboard File you are using.
For example my configuration looks like this:

• homeassistant/configuration.yaml at 68ceab26c8c28e99eadbfac972c297ae65868d5f · CM000n/homeassistant · GitHub
• homeassistant/dashboard/rounded at main · CM000n/homeassistant · GitHub

[Nemu]

Just as information. Home assistant changed services to actions in the newest release. Thats why you cant find service.

[Faecon (Jo)]

You can use both…

[Bobsilvio (Silvio)]

thanks for the ideas and codes, i’m creating my own dash with some modifications and mesh with andy’s
In the end I chose the one on the bottom right.

[rodrigojoszt1 (Rodrigo)]

Can anyone explain to me what is wrong with the graph card being like this? I copied the codes exactly the same.

  /* Graph card style */

  .graph {
    background: var(--blue-tint);
    display: flex;
    overflow: hidden; /* Temporary fix for graph overflow bug */
  }
  
  .graph .name {
    font-size: 12px;
    line-height: 18px;
    background: var(--black);
    color: var(--white);
    padding: 6px 10px;
    border-radius: 100px;
    z-index: 1;
  }

  .graph .icon {
    display: none;
  }

  .graph .info {
    margin-top: 0;
    padding: 24px 24px 0 24px;
    order: 1;
  }

  .graph hui-graph-header-footer {
    order: 3;
  }

  .graph .header {
    padding: 0 24px;
    order: 2;
    margin: 4px 0 -16px 0;
    z-index: 1;
  }

[diblaze]

Newest HA update seems to have broken the CSS. I noticed it today as well…

[jeells102]

Hi all,

I want to try and replicate the design below for notifications but in the rounded style. I’ve been trying my best to do so, and using ChatGPT hasn’t yielded any results. I’m thinking someone smarter and better than I am can come up with something.

Any help?

I want to replace my current design which is a bit clunky and if you have a lot, can get messy.

EDIT:

I’ve continued to play around and I’ve made some headway with it.

Here’s my code;

type: custom:button-card
entity: input_boolean.black_bin_needs_taking_out
name: Take Black Bin Out
show_icon: false
tap_action:
  action: toggle
styles:
  card:
    - border-radius: 25px
    - border-style: none
    - box-shadow: 0px 0px 10px -9px black
    - background: |
        [[[
            return 'var(--primary-text-color)';
        ]]]
  grid:
    - grid-template-areas: '"icon_cells n"'
    - grid-template-rows: 2px 16px
    - grid-template-columns: 1fr
  custom_fields:
    icon_cells:
      - justify-self: start
      - margin-top: 15px
      - margin-left: 15px
    icon1:
      - position: absolute
      - width: 3em
      - opacity: 20%
      - color: |
          [[[
            if (entity.state == 'on') {
              return 'var(--black)';
            } else {
              return 'var(--primary-background-color)';
            }
          ]]]
      - transform: rotate(-20deg)
      - justify-self: end
      - margin-top: 20px
  name:
    - font-size: 100%
    - font-weight: bold
    - justify-self: start
    - margin-top: 10%
    - color: black
    - white-space: normal
    - word-wrap: break-word
    - text-align: left
custom_fields:
  icon_cells: |
    [[[
        return `<ha-icon
        icon="mdi:trash-can-outline"
        style="width: 25px; height: 25px; color: black;">
        </ha-icon>`;
    ]]]
  icon1: |
    [[[
      return '<ha-icon icon="mdi:trash-can-outline"></ha-icon>';
    ]]]

But this is what it looks like currently;

I feel like I’m so close with this but I don’t know why the text is only displaying on the right and not next to the icon. Again, any help would be appreciated

[caolten (Colten)]

Might have something to do with this

But I’m not experience enough to fix this. Maybe this will help someone else!

This line is in the themes yaml file.

      .graph hui-graph-header-footer {
        order: 3;
      }

[matmann]

solution in this post

Rounded - Dashboard guide

I had the same problem since the update. Fixed it by adding .graph .footer { order: 3; } below .graph hui-graph-header-footer { order: 3; } in Rounded.yaml. @CM000n

[caolten (Colten)]

Didn’t catch this! Thanks!

[ValeMelis]

Is there a way to have both the brightness and the hue slider in your colored light cards?
I really don’t know how to do this