---
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"
  ha-dialog-border-radius: "10px"
  # fix added border-lines in 2022.11
  ha-card-border-width: "0px"

  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))"