2022-08-30 16:42:25 +00:00
|
|
|
---
|
|
|
|
|
minimalist-ios-tapbar:
|
|
|
|
|
# version 1.0.1
|
|
|
|
|
# By LRvdLinden
|
|
|
|
|
# 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)"
|
2022-11-29 18:10:30 +00:00
|
|
|
ha-dialog-border-radius: "10px"
|
|
|
|
|
# fix added border-lines in 2022.11
|
|
|
|
|
ha-card-border-width: "0px"
|
|
|
|
|
|
2022-08-30 16:42:25 +00:00
|
|
|
card-mod-theme: "minimalist-ios-tapbar"
|
|
|
|
|
card-mod-root: |
|
|
|
|
|
app-toolbar {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
header-height: "78px"
|
|
|
|
|
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-height) !important;
|
|
|
|
|
padding: 10px 0px !important;
|
|
|
|
|
background: var( --ha-card-background, var(--card-background-color) );
|
|
|
|
|
}
|
|
|
|
|
#view {
|
|
|
|
|
margin-top: calc(-1 * var(--header-height)) !important;
|
|
|
|
|
padding-bottom: 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:50px;
|
|
|
|
|
padding: 0 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(--primary-background-color)"
|
|
|
|
|
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(--google-blue))"
|
|
|
|
|
slider-bar-color: "rgba(var(--google-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(--primary-background-color)"
|
|
|
|
|
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))"
|
