This repository has been archived on 2023-06-10. You can view files and clone it, but cannot push or open issues or pull requests.
homeassistant-config/themes/minimalist-mobile-tapbar/minimalist-mobile-tapbar.yaml
darthsandmann 853c1d1716 updates
2022-08-30 18:42:25 +02:00

207 lines
7.1 KiB
YAML
Executable File

---
minimalist-mobile-tapbar:
# Journal
state-icon-color: "rgb(var(--color-theme))"
border-radius: "20px"
ha-card-border-radius: "var(--border-radius)"
error-color: "var(--google-red)"
warning-color: "var(--google-yellow)"
success-color: "var(--google-green)"
info-color: "var(--google-blue)"
divider-color: "rgba(var(--color-theme),.12)"
accent-color: "var(--google-yellow)"
card-mod-theme: "minimalist-mobile-tapbar"
header-height: "calc(var(--header-base-height) + env(safe-area-inset-bottom))"
header-base-height: "70px"
app-header-selection-bar-color: "transparent"
card-mod-view-yaml: |
"*:first-child$": |
#columns .column > * {
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
}
# Move navbar
card-mod-root-yaml: |
ha-tabs$: |
#tabsContent {
width: 97%;
}
.: |
@media (orientation: portrait) {
a.menu-link[target="_blank"], ha-button-menu, ha-menu-button, [main-title] {
display: none !important;
}
app-toolbar {
padding-right: 0px;
padding-left: 0px;
}
}
ha-app-layout{
transform: initial;
padding: 0 !important;
margin: 0 !important;
width: 100%;
height: 100% !important;
}
app-header {
top: auto;
bottom: 0;
box-shadow: var(--footer-shadow);
position: fixed;
height: var(--header-height) !important;
}
app-toolbar {
height: var(--header-base-height) !important;
padding-bottom: env(safe-area-inset-bottom) !important;
}
#view {
margin-top: calc(-1 * var(--header-height)) !important;
padding-bottom: var(--header-height);
}
ha-tabs {
--paper-tabs-selection-bar-color: var(--header-tab-indicator-color);
--mdc-icon-size: 26px;
display: flex;
justify-content: space-between;
padding: 0 10px;
height:50px !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:50px;
/*width: calc(100% / 4);
padding: 0;*/
padding-left: 20px;
padding-right: 20px;
}
# Color themes
modes:
light:
# main interface colors
primary-color: "#434343"
google-red: "#F54436"
google-green: "#01C852"
google-yellow: "#FF9101"
google-blue: "#3D5AFE"
google-violet: "#661FFF"
google-grey: "#BBBBBB"
color-red: "245, 68, 54"
color-green: "1, 200, 82"
color-yellow: "255, 145, 1"
color-blue: "61, 90, 254"
color-purple: "102, 31, 255"
color-grey: "187, 187, 187"
color-pink: "233, 30, 99"
color-theme: "51,51,51"
color-background-yellow: "250, 250, 250"
color-background-blue: "250, 250, 250"
color-background-green: "250, 250, 250"
color-background-red: "250, 250, 250"
color-background-pink: "250, 250, 250"
color-background-purple: "250, 250, 250"
color-yellow-text: "var(--primary-text-color)"
color-blue-text: "var(--primary-text-color)"
color-green-text: "var(--primary-text-color)"
color-red-text: "var(--primary-text-color)"
color-pink-text: "var(--primary-text-color)"
color-purple-text: "var(--primary-text-color)"
opacity-bg: "1"
# Header / Footer
header-active-tab-color: "rgb(var(--color-blue))"
header-active-tab-bg-color: "rgba(var(--color-blue), .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( --ha-card-background, var(--card-background-color, white) )"
paper-tabs-selection-bar-color: "var(--primary-text-color)"
footer-shadow: "0px -1px 3px 0px rgba(0,0,0,0.12)"
# background and sidebar
card-background-color: "#FAFAFA"
primary-background-color: "#EFEFEF"
secondary-background-color: "#EFEFEF"
# text
primary-text-color: "#212121"
# slider
slider-color: "rgb(var(--color-blue))"
slider-bar-color: "rgba(var(--color-blue),0.38)"
# cards
box-shadow: "0px 2px 4px 0px rgba(0,0,0,0.16)"
ha-card-box-shadow: "var(--box-shadow)"
# sidebar
sidebar-selected-text-color: "rgb(var(--color-blue))"
sidebar-selected-icon-color: "rgb(var(--color-blue))"
sidebar-text-color: "#80868b"
# switch
switch-checked-color: "rgb(var(--color-blue))"
# media player
mini-media-player-accent-color: "rgb(var(--color-blue))"
dark:
# main interface colors
primary-color: "#89B3F8"
google-red: "#F18B82"
google-green: "#80C994"
google-yellow: "#FCD663"
google-blue: "#89B3F8"
google-violet: "#BB86FC"
google-grey: "#BBBBBB"
color-red: "241, 139, 130"
color-green: "128, 201, 148"
color-yellow: "252, 214, 99"
color-blue: "137, 179, 248"
color-theme: "221,221,221"
color-purple: "102, 31, 255"
color-grey: "187, 187, 187"
color-pink: "233, 30, 99"
color-amber: "255, 145, 1"
color-background-yellow: "var(--color-yellow)"
color-background-blue: "var(--color-blue)"
color-background-green: "var(--color-green)"
color-background-red: "var(--color-red)"
color-background-pink: "var(--color-pink)"
color-background-purple: "var(--color-purple)"
color-yellow-text: "var(--color-yellow)"
color-blue-text: "var(--color-blue)"
color-green-text: "var(--color-green)"
color-red-text: "var(--color-red)"
color-pink-text: "var(--color-pink)"
color-purple-text: "var(--color-purple)"
opacity-bg: "0.1"
# Header / Footer
header-active-tab-color: "rgb(var(--color-amber))"
header-active-tab-bg-color: "rgba(var(--color-amber), .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( --ha-card-background, var(--card-background-color, rgb(29, 29, 29)) )"
paper-tabs-selection-bar-color: "var(--primary-text-color)"
footer-shadow: "0px -1px 3px 0px rgba(0,0,0,0.12)"
# background and sidebar
card-background-color: "#1D1D1D"
primary-background-color: "#121212"
secondary-background-color: "#121212"
# text
primary-text-color: "#DDDDDD"
# floating button text color
mdc-theme-on-secondary: "var(--card-background-color)"
# Sidebar
sidebar-selected-text-color: "rgb(var(--color-amber))"
sidebar-selected-icon-color: "rgb(var(--color-amber))"
# Slider
slider-color: "rgb(var(--color-blue))"
slider-bar-color: "rgba(var(--color-blue),0.38)"
# card
box-shadow: "none"
# media player
mini-media-player-accent-color: "var(--google-blue)"
# Journal
state-icon-color: "rgb(var(--color-theme))"