Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- techleech:
- # Global
- background-image: center / cover no-repeat fixed url("/local/backgrounds/download.jfif")
- # Main colors
- primary-color: '#4685BF' # Header
- # primary-color: '#3477BA'
- accent-color: '#722F2F' # Accent color
- # accent-color: '#9b741d' # Accent color
- dark-primary-color: 'var(--accent-color)' # Hyperlinks
- light-primary-color: 'var(--accent-color)' # Horizontal line in about
- ha-card-border-radius: '15px'
- # ha-card-background: 'rgba(150, 150, 150, 0.1)'
- cch-background: 'rgba(150, 150, 150, 0.1)' #Attempt at changes Custom Compact Header to transparent
- custom_header-background: 'rgba(150, 150, 150, 0.1)' #Attempt at changes Custom Compact Header to transparent
- card-background-color: 'var(--paper-card-background-color)' #Attempt at making unused entities table visible
- sidebar-background-color: 'var(--primary-background-color)'
- # sidebar-background-color: '#252525'
- # sidebar-selected-background-color: '#383C45'
- # Text
- primary-font-family: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif"
- paper-font-common-base_-_font-family: "var(--primary-font-family)"
- paper-font-common-code_-_font-family: "var(--primary-font-family)"
- paper-font-body1_-_font-family: "var(--primary-font-family)"
- paper-font-subhead_-_font-family: "var(--primary-font-family)"
- paper-font-headline_-_font-family: "var(--primary-font-family)"
- paper-font-caption_-_font-family: "var(--primary-font-family)"
- paper-font-title_-_font-family: "var(--primary-font-family)"
- primary-text-color: '#FFFFFF' # Primary text colour, here is referencing dark-primary-color
- text-primary-color: 'var(--primary-text-color)' # Primary text colour
- text-light-primary-color: '#898989'
- secondary-text-color: '#9EB8D1' #this is secondary text on the weather card for eg. was '#5294E2'
- disabled-text-color: '#7F848E' # Disabled text colour
- label-badge-border-color: 'green' # Label badge border, just a reference value
- #sidebar-text-color: '#9EB8D1'
- # Background colors
- primary-background-color: "#1C1C1C" # systemGray5 dark mode
- # primary-background-color: "#333333"
- # Settings background
- secondary-background-color: '#383C45' # Main card UI background
- divider-color: 'rgba(0, 0, 0, .12)' # Divider
- # Table rows
- table-row-background-color: var(--primary-background-color)
- table-row-alternative-background-color: '#3E424B' # Table row alternative
- # Nav Menu
- paper-listbox-color: 'var(--primary-color)' # Navigation menu selection hoover
- paper-listbox-background-color: var(--primary-background-color)
- #material-background-color: 'var(--primary-background-color)'
- #data-table-background-color: 'var(--primary-background-color)'
- paper-grey-50: 'var(--primary-text-color)'
- paper-grey-200: '#414A59' # Navigation menu selection
- # Paper card
- paper-card-header-color: '#FFFFFF' #'var(--accent-color)' # Card header text colour
- paper-card-background-color: 'rgba(115, 115, 115, 0.1)' # Card background colour
- paper-dialog-background-color: '#434954' # Card dialog background colour
- paper-item-icon-color: 'var(--primary-text-color)' # Icon color
- paper-item-icon-active-color: '#F9C536' # Icon color active
- paper-item-icon_-_color: 'green'
- paper-item-selected_-_background-color: '#434954' # Popup item select
- paper-tabs-selection-bar-color: 'green'
- mini-media-player-base-color: '#414A59' #'#33515b' #attempt to make media player black text for sky media
- paper-input-container-color: '#383C45'
- # Labels
- label-badge-red: 'var(--accent-color)' # References the brand colour label badge border
- label-badge-text-color: 'var(--primary-text-color)' # Now same as label badge border but that's a matter of taste
- label-badge-background-color: '#2E333A' # Same, but can also be set to transparent here
- label-badge-background: 'rgba(255, 255, 255, 0.1)'
- # Switches
- paper-toggle-button-checked-button-color: 'var(--accent-color)'
- paper-toggle-button-checked-bar-color: 'var(--accent-color)'
- paper-toggle-button-checked-ink-color: 'var(--accent-color)'
- paper-toggle-button-unchecked-button-color: 'var(--disabled-text-color)'
- paper-toggle-button-unchecked-bar-color: 'var(--disabled-text-color)'
- paper-toggle-button-unchecked-ink-color: 'var(--disabled-text-color)'
- # Sliders
- paper-slider-knob-color: 'var(--accent-color)'
- paper-slider-knob-start-color: 'var(--accent-color)'
- paper-slider-pin-color: 'var(--accent-color)'
- paper-slider-active-color: 'var(--accent-color)'
- paper-slider-container-color: 'linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat'
- paper-slider-secondary-color: 'var(--secondary-background-color)'
- paper-slider-disabled-active-color: 'var(--disabled-text-color)'
- paper-slider-disabled-secondary-color: 'var(--disabled-text-color)'
- # app-header-background-color: "#136DCB"
- app-header-background-color: rgba(32, 49, 73, 0.9)
- # app-header-background-color: rgba(8, 55, 96, 0.9)
- # app-header-background-color: rgba(40, 52, 86, 0.9)
- # app-header-background-color: rgba(0, 128, 235, 0.3)
- # app-header-background-color: rgba(17, 116, 221, 0.7)
- # Google colors
- google-red-500: '#E45E65'
- google-green-500: '#39E949'
- # Custom
- mcg-title-letter-spacing: .15em
- compact-header:
- card-mod-theme: techleech
- header-height: 48px # 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;
- }
- */
- .: |
- /* This moves the header up. */
- app-header {
- transform: translate3d(0px, -48px, 0px);
- }
- /* Let's change the background. */
- app-header, app-toolbar {
- background: var(--app-header-background-color) !important;
- color: var(--primary-text-color) !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: var(--primary-color) !important;
- }
- paper-tab[aria-selected=true] {
- color: var(--primary-color) !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;
- }
- */
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
