Appreciated the work here, but I am running into a few issues. With 0.116.4 I use this theme file to get this result:
But, with 0.117.1 (and using your latest code snippet above), it now looks like this:
Issues:
- Sidebar header is really compressed on top
- View container goes on behind the paper tabs bar
- The top header in de main window has a very persistent 64px top padding that disappears with a hard refresh, but is back as soon as you change tabs once and go back to the previous tab.
Google Light Theme:
# Card mod stuff
card-mod-theme: Google Light Theme
header-height: 0px # Change this to 0px for header on the bottom. You're 1/3 there.
card-mod-root-yaml: |
paper-tabs$: |
/* Uncomment this for header on the bottom. You're 2/3 there. */
#selectionBar {
bottom: unset !important;
}
ha-app-layout$: |
#contentContainer {
padding-top: 0px;
}
.: |
ha-tabs {
height: var(--header-height);
}
app-header {
--header-height: 48px;
}
/* This moves the header up. */
app-header {
transform: translate3d(0px, -48px, 0px);
}
/* Let's change the background. */
app-header, app-toolbar {
background: transparent !important;
color: #A9A9A9 !important;
}
/* We're still going to need a way to see that we're in edit mode. */
app-header.edit-mode {
padding-bottom: calc(var(--ha-card-border-width, 2px) * 2);
border-bottom: var(--ha-card-border-width, 2px) solid var(--primary-color);
}
/* This changes the color of the currently selected tab. */
ha-tabs {
--paper-tabs-selection-bar-color: #D2691E !important;
}
paper-tab[aria-selected=true] > ha-icon {
color: #FF8C00 !important;
}
paper-tab[aria-selected=true] {
color: #D2691E !important;
}
/* This hides the help button. */
a.menu-link[target="_blank"] {
display: none;
}
/* This makes the plus color the same as the background. */
#add-view {
color: var(--primary-background-color);
}
/* This hides the title. */
[main-title] {
display: none;
}
/* This hides the app-toolbar in edit mode. */
app-toolbar.edit-mode {
height: 0;
}
/* This moves the edit mode buttons back in. */
app-toolbar.edit-mode > mwc-icon-button {
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
app-toolbar.edit-mode > ha-button-menu {
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
/* This adds a bit more padding, mainly for unused entities. */
app-header.edit-mode > div {
padding-left: 5px;
}
/* Uncomment this for header on the bottom. You're 3/3 there. */
app-header {
top: calc(100vh - 60px) !important;
bottom: 0 !important;
transform: unset !important;
}
#and everything of the original theme
