Hi everyone,
Fairly new to HA so thanks for any help!
Im having an issue with the spacing in the bottom nav bar - it’s a few pixels indented from the right. I am using this theme here: GitHub - jimmy-landry/HA-Mobile-Dashboard-Config: A mobile Home Assistant dashboard inspired by LE0N's Rounded theme
I also want to reduce the margins on both side of the dashboard itself, quite big.
Thanks again!
Rounded:
########################################################
############### Default global variables ###############
########################################################
# Spacings and radius
horizontal-stack-card-margin: 0px 8px
vertical-stack-card-margin: 8px 0px
grid-card-gap: 16px
ha-card-border-width: "0px" # Removes default 1px line
ha-card-border-radius: 24px
masonry-view-card-margin: 40px 20px
# Main Interface Colors
primary-color: var(--blue)
accent-color: var(--blue)
primary-background-color: var(--contrast1)
secondary-background-color: var(--contrast2)
divider-color: var(--contrast3)
# Text
primary-text-color: var(--contrast20)
secondary-text-color: var(--contrast9)
text-primary-color: var(--contrast20)
disabled-text-color: var(--contrast6)
text-accent-color: var(--contrast1)
# Header:
app-header-background-color: var(--contrast1)
app-header-text-color: var(--contrast20)
app-header-selection-bar-color: transparant
app-header-edit-background-color: var(--contrast2)
app-header-edit-text-color: var(--contrast20)
# Cards
card-background-color: var(--contrast2)
ha-card-background: var(--contrast2)
ha-card-border-color: var(--contrast6)
paper-listbox-background-color: var(--contrast3)
# Tile card
state-unavailable-color: var(--contrast6)
state-light-off-color: var(--contrast10)
state-light-on-color: var(--yellow)
# Sidebar Menu
sidebar-icon-color: var(--contrast6)
sidebar-text-color: var(--contrast20)
sidebar-background-color: var(--contrast2)
sidebar-selected-icon-color: var(--blue)
sidebar-selected-text-color: var(--blue)
# Buttons
paper-item-icon-color: var(--contrast9)
mdc-button-outline-color: var(--contrast6)
# States and Badges
state-icon-color: var(--contrast9)
# Sliders
paper-slider-knob-color: var(--contrast20)
paper-slider-knob-start-color: var(--contrast15)
paper-slider-pin-color: var(--contrast5)
paper-slider-pin-start-color: var(--contrast4)
paper-slider-active-color: var(--contrast15)
paper-slider-secondary-color: var(--contrast7)
paper-slider-container-color: var(--contrast5)
# Switches
switch-checked-button-color: var(--green)
switch-checked-track-color: var(--green)
switch-unchecked-button-color: var(--contrast9)
switch-unchecked-track-color: var(--contrast6)
# Toggles
paper-toggle-button-checked-button-color: var(--switch-checked-button-color)
paper-toggle-button-checked-bar-color: var(--switch-checked-track-color)
paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color)
paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color)
# Table
table-row-background-color: var(--contrast2)
table-row-alternative-background-color: var(--contrast3)
data-table-background-color: var(--contrast1)
mdc-text-field-fill-color: var(--contrast3)
# Input
input-fill-color: var(--contrast3)
input-dropdown-icon-color: var(--contrast9)
material-background-color: var(--contrast2)
input-ink-color: var(--contrast20)
input-label-ink-color: var(--contrast9)
input-idle-line-color: var(--contrast7)
input-hover-line-color: var(--contrast20)
mdc-select-fill-color: var(--input-fill-color)
mdc-select-ink-color: var(--input-ink-color)
mdc-select-label-ink-color: var(--input-label-ink-color)
mdc-select-idle-line-color: var(--input-idle-line-color)
mdc-select-dropdown-icon-color: var(--input-dropdown-icon-color)
mdc-select-hover-line-color: var(--input-hover-line-color)
mdc-text-field-disabled-fill-color: var(--contrast3)
# Modal screen
mdc-theme-surface: var(--contrast2)
# Checkboxes
mdc-checkbox-unchecked-color: var(--contrast15)
# Colors
orange-color: var(--orange)
green-color: var(--green)
blue-color: var(--blue)
red-color: var(--red)
purple-color: var(--purple)
yellow-color: var(--yellow)
grey-color: var(--contrast10)
#######################################################
############### Custom global variables ###############
#######################################################
# Black / White
black: "#000000"
white: "#FFFFFF"
# Colors
purple: rgb(var(--purple-rgb))
yellow: rgb(var(--yellow-rgb))
orange: rgb(var(--orange-rgb))
red: rgb(var(--red-rgb))
green: rgb(var(--green-rgb))
blue: rgb(var(--blue-rgb))
# Color tints
purple-tint: rgba(var(--purple-rgb),var(--color-tint))
yellow-tint: rgba(var(--yellow-rgb),var(--color-tint))
orange-tint: rgba(var(--orange-rgb),var(--color-tint))
red-tint: rgba(var(--red-rgb),var(--color-tint))
green-tint: rgba(var(--green-rgb),var(--color-tint))
blue-tint: rgba(var(--blue-rgb),var(--color-tint))
# Gradients
brightness: linear-gradient(90deg, rgba(var(--brightness-low-rgb), 0.4) 0%, rgba(var(--brightness-high-rgb), 1) 100%)
brightness-tint: linear-gradient(90deg, rgba(var(--brightness-low-rgb), 0.06) 0%, rgba(var(--brightness-high-rgb), var(--color-tint)) 100%)
temperature: linear-gradient(90deg, rgba(var(--temperature-low-rgb), 01) 0%, rgba(var(--temperature-high-rgb), 1) 100%)
temperature-tint: linear-gradient(90deg, rgba(var(--temperature-low-rgb), var(--color-tint)) 0%, rgba(var(--temperature-high-rgb), var(--color-tint)) 100%)
# Color RGB variables
purple-rgb: 239, 177, 255
yellow-rgb: 255, 218, 120
orange-rgb: 255, 181, 129
red-rgb: 255, 145, 138
green-rgb: 206, 245, 149
blue-rgb: 144, 191, 255
# Gradient RGB variables
brightness-low-rgb: 232, 176, 29
brightness-high-rgb: 255, 211, 94
temperature-low-rgb: 177, 197, 255
temperature-high-rgb: 255, 175, 131
# Contrast variables
black1: "#000000"
black2: "#111318"
black3: "#171A21"
black4: "#1C1F27"
black5: "#262A35"
black6: "#353946"
black7: "#434856"
black8: "#535865"
black9: "#636774"
black10: "#777A83"
white10: "#898C94"
white9: "#969AA6"
white8: "#A4A9B6"
white7: "#B3B8C6"
white6: "#C3C8D5"
white5: "#D4D8E2"
white4: "#E1E5EF"
white3: "#EAEDF6"
white2: "#F4F6FB"
white1: "#FFFFFF"
########################################################
############### Variables based on modes ###############
########################################################
modes:
dark:
# Black white contrats
contrast1: var(--black1)
contrast2: var(--black2)
contrast3: var(--black3)
contrast4: var(--black4)
contrast5: var(--black5)
contrast6: var(--black6)
contrast7: var(--black7)
contrast8: var(--black8)
contrast9: var(--black9)
contrast10: var(--black10)
contrast11: var(--white10)
contrast12: var(--white9)
contrast13: var(--white8)
contrast14: var(--white7)
contrast15: var(--white6)
contrast16: var(--white5)
contrast17: var(--white4)
contrast18: var(--white3)
contrast19: var(--white2)
contrast20: var(--white1)
# Color tint transparancy
color-tint: "0.15"
# Contrast RGB variables
contrast1-RGB: 0,0,0
# Header / Footer
header-active-tab-color: "var(--orange)"
header-active-tab-bg-color: "rgba(255, 181, 129, 0.3)"
header-all-tabs-color: "var(--paper-item-icon-color)"
header-tab-indicator-color: "rgba(0, 0, 0, 0)"
app-header-text-color: "var(--primary-text-color)"
app-header-background-color: "var(--primary-background-color)"
paper-tabs-selection-bar-color: "var(--primary-text-color)"
footer-shadow: "0px -1px 3px 0px rgba(0,0,0,0.12)"
light:
# Black white contrats
contrast1: var(--white1)
contrast2: var(--white2)
contrast3: var(--white3)
contrast4: var(--white4)
contrast5: var(--white5)
contrast6: var(--white6)
contrast7: var(--white7)
contrast8: var(--white8)
contrast9: var(--white9)
contrast10: var(--white10)
contrast11: var(--black10)
contrast12: var(--black9)
contrast13: var(--black8)
contrast14: var(--black7)
contrast15: var(--black6)
contrast16: var(--black5)
contrast17: var(--black4)
contrast18: var(--black3)
contrast19: var(--black2)
contrast20: var(--black1)
# Color tint transparancy
color-tint: "0.20"
# Contrast RGB variables
contrast1-RGB: 255,255,255
# Header and footer
header-active-tab-color: "var(--blue)"
header-active-tab-bg-color: "rgba(144, 191, 255, 0.3)"
header-all-tabs-color: "var(--paper-item-icon-color)"
header-tab-indicator-color: "rgba(0, 0, 0, 0)"
app-header-text-color: "var(--primary-text-color)"
app-header-background-color: "var(--primary-background-color)"
paper-tabs-selection-bar-color: "var(--primary-text-color)"
footer-shadow: "0px -1px 3px 0px rgba(0,0,0,0.12)"
card-mod-theme: Rounded
header-height: 78px
card-mod-root-yaml: |
ha-tabs$: |
#tabsContent {
width: 97%;
}
paper-icon-button {
display: none;
}
.: |
@media (orientation: portrait) {
a.menu-link[target="_blank"], ha-button-menu, ha-menu-button, [main-title] {
display: none !important;
}
div#view{
transform: initial;
padding: 0 !important;
margin: 0 !important;
width: 100%;
padding-bottom: var(--header-height) !important;
}
.header {
top: auto !important;
bottom: 0px !important;
box-shadow: var(--footer-shadow);
height: var(--header-height) !important;
}
.toolbar {
height: var(--header-height) !important;
padding: 10px 0px !important;
background: var( --ha-card-background, var(--card-background-color) );
}
#view {
padding-top: calc(-1 * var(--header-height)) !important;
}
ha-tabs {
--paper-tabs-selection-bar-color: var(--header-tab-indicator-color) !important;
--mdc-icon-size: 26px;
display: flex;
justify-content: space-between;
padding: 10px;
margin-top:15px;
height:var(--header-height) !important;
}
paper-tab[aria-selected=true] {
color: var(--header-active-tab-color);
background-color: var(--header-active-tab-bg-color);
}
paper-tab {
color: var(--header-all-tabs-color);
border-radius: 25px;
height:40px;
padding: 0 22px;
}
card-mod-view-yaml: |
hui-masonry-view:
$: |
/* Swipe-card full width on mobile */
@media screen and (max-width: 599px) {
#columns .column swipe-card {
margin-left: -4px;
margin-right: -4px;
}
}
ha-fab {
margin-bottom: 80px;
}
.: |
/* Correct spaces top and bottom for bottom tabbar */
###
card-mod-card-yaml: |
.: |
/* General changes */
ha-card {
transition: none !important;
font-family: 'Quicksand', sans-serif !important;
}
/* Vacuum card load transition disabled */
.type-custom-xiaomi-vacuum-map-card {
transition: none !important;
}
/* Graph card style */
.graph {
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;
}
/* Entities card style */
.type-entities {
background: none;
}
.type-entities .card-header {
padding: 0 0 12px 0;
}
.type-entities .card-content {
padding: 0;
}
card-mod-row: |
/* Entities card row style */
:host {
display: block;
background: var(--contrast2);
border-radius: 24px;
padding: 6px 12px 6px 6px;
}