Compact Header for card-mod
Iām currently using the below card-mod code for my theme (since itās slightly more compact than the native compact header for Home Assistant). Thereās only one small issueā¦ the microphone icon is a little too close to the 3 dots:
Could someone please let me know what I need to change to make the microphone icon and 3 dots icon spaced further apart?
card-mod-theme: MyCustomTheme
# Header
card-mod-root-yaml: |
paper-tabs$: |
.not-visible {
display: none;
}
/*Uncomment this if you want the header on the bottom
#selectionBar {
bottom: unset !important;
}
*/
ha-app-layout$: |
/* This corrects top padding for the view. */
#contentContainer {
/* Change this to 0px if you want the header on the bottom */
padding-top: 48px !important;
}
ha-button-menu$mwc-menu$mwc-menu-surface$: |
.mdc-menu-surface {
margin: 10px;
box-shadow: var(--ha-card-box-shadow, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12));
}
.: |
/* This hides the unused portion of the header. */
app-toolbar {
height: 0;
}
/* This forces background-color and text-color. */
.edit-mode, app-header, app-toolbar {
background-color: var(--app-header-background-color) !important;
color: var(--primary-text-color) !important;
}
/* Uncomment this if you want the header on the bottom
app-header {
top: calc(100vh - 60px) !important;
bottom: 0 !important;
transform: unset !important;
}
hui-masonry-view {
padding-bottom: 60px !important;
}
*/
/* This gives the header in edit mode a different look from the standard header. */
app-header.edit-mode {
border-bottom: 2px var(--primary-color) solid;
padding-bottom: 10px;
}
/* Make the color of the plus white instead of black. */
#add-view ha-svg-icon {
color: #EEE !important;
}
/* Bring voice button back down */
app-toolbar:not([class="edit-mode"]) mwc-icon-button[label] {
top: 0;
right: calc(48px * 1);
z-index: 2;
position: absolute;
}
/* Bring help button back in */
a[href="https://www.home-assistant.io/lovelace/"] > mwc-icon-button {
right: calc(48px * 2);
position: absolute;
z-index: 2;
}
/* Bring close button back in */
mwc-icon-button[title="Close"] {
top: 0;
left: 0;
position: absolute;
z-index: 2;
}
/* Bring add view button back in */
mwc-icon-button#add-view {
position: fixed;
right: 48px;
}
/* Bring edit UI overflow menu back in */
ha-button-menu {
top: 0;
right: 0;
z-index: 2;
position: absolute;
/*Uncomment this out to hide the overflow menu
display: none;
*/
}
/* Hide the title */
app-toolbar > [main-title] {
display: none;
}
/* Hide buttons that are taking up space, but invisible */
menu-button[style="visibility: hidden;"] {
display: none;
}
/* Bring sidebar button back in */
ha-menu-button {
z-index: 2;
top: 24px;
}
/* Set margin on left to be smaller,
and set the bar color to be the primary color
instead of white */
paper-tabs {
--paper-tabs-selection-bar-color: var(--primary-color) !important;
margin-left: 48px !important;
}
/* When not in edit mode, shrink the left margin */
app-toolbar:not(.edit-mode) > div > paper-tabs {
margin-left: 6px !important;
}
/* Color selected tabs */
paper-tab[aria-selected="true"] > ha-icon {
color: var(--primary-color) !important;
}
paper-tab[aria-selected="true"] {
color: var(--primary-color) !important;
}
/* Styles for mobile */
@media (orientation: portrait) {
/* Hide sidebar button and keep room for the overflow menu button */
paper-tabs {
margin-left: 5px !important;
margin-right: 48px !important;
}
/* Hide voice button */
mwc-icon-button[label="Start conversation"] {
display: none !important;
}
/* Hide sidebar button */
ha-menu-button {
display: none !important;
}
}
/* Make help button have contrast */
app-toolbar a {
color: var(--primary-text-color) !important;
}
# Badges and columns
card-mod-view-yaml: |
hui-masonry-view$: |
/*Uncomment this if you want the header on the bottom
mwc-fab[title="Add Card"] {
bottom: 96px !important;
}
*/
sign): 
