appdaemon/custom_css/modern/variables.yaml
# Core styles. Reference these wherever possible rather than making custom
# versions of red, green, etc. This will make it easier to quickly change the
# overall pallette of the dashboard just by overriding these variables.
# This file contains the application "defaults".
# IF YOU WANT TO CUSTOMIZE styleS FOR YOUR OWN INSTANCE, DO NOT EDIT THIS FILE.
# ----------------------------------------------------------------------------
# Custom styles instructions
# 1. Create a new directory under custom_css
# 2. copy these files over
# 3. EDIT
# 4. Select the new dir as the "skin" argument of any
# dashboards you want to use it
# ----------------------------------------------------------------------------
#
# Custom head includes - should be a YAML List, e.g.:
#
#head_includes:
# - some include
# - some other include
#
# Text will be included verbatim in the head section of the doc, use for styles,
# javascript or 3rd party css etc. etc.
#
# It is your responsibility to ensure the HTML is correct
#
head_includes:
- <! head tags go here ->
# - <! Refresh every 15 minutes to avoid memory issues with slideshows. ->
# - <meta http-equiv="Refresh" content="900">
#
# Custom body includes - should be a YAML List, e.g.:
#
#body_includes:
# - some include
# - some other include
#
# Text will be included verbatim in the body section of the doc, use it for JavaScript
#
# It is your responsibility to ensure the HTML is correct
#
body_includes:
- <! body tags go here ->
- !secret appdaemon_hass_token_js
- !secret appdaemon_hass_url_motion_js
- |
<script>
/**
* Send motion detection event to Home Assistant API
*
* It turns off the sensor before turning it on again, to make sure that
* any change is registered. A bit dirty, but it works!
*
* Variable `appdaemon_hass_token_js` contains a long lived access token
* generated through Home Assistant's profile UI. It is defined in the
* secrets file.
*
* Variable `appdaemon_hass_url_motion_js` is defined in the secrets file,
* with the format:
* [HOST]:[PORT]/api/states/binary_sensor.kiosk_motion
*/
function reportKioskMotion() {
var xhttp = new XMLHttpRequest();
xhttp.open('POST', appdaemon_hass_url_motion_js, false);
xhttp.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
xhttp.setRequestHeader('Authorization', 'Bearer ' + appdaemon_hass_token_js);
xhttp.send(JSON.stringify({
'state': 'off',
'attributes': {
'friendly_name': 'Kiosk Motion'
}
}));
xhttp.open('POST', appdaemon_hass_url_motion_js, false);
xhttp.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
xhttp.setRequestHeader('Authorization', 'Bearer ' + appdaemon_hass_token_js);
xhttp.send(JSON.stringify({
'state': 'on',
'attributes': {
'friendly_name': 'Kiosk Motion'
}
}));
}
if (typeof fully != 'undefined') {
fully.bind('onMotion', 'reportKioskMotion();');
}
// else {
// $(window).on('load', reportKioskMotion);
// }
</script>
#
# Styles
#
white: "#fff"
red: "#ff0055"
green: "#aaff00"
blue: "#00aaff"
purple: "#aa00ff"
yellow: "#ffff00"
orange: "#ffaa00"
gray_very_dark: "#333"
gray_dark: "#444"
gray_medium: "#666"
gray_light: "#888"
#Page and widget defaults
background_style: "background-color: #444"
text_style: "color: #fff"
#These are used for icons and indicators
style_inactive: "color: $gray_light"
style_active: "color: $green"
style_active_warn: "color: $red"
style_info: "color: $blue"
# style_title: "color: $white"
style_title2: "color: $white"
# Widget Default Definitions
scene_icon_on: fas-square
scene_icon_off: fas-square
scene_icon_style_active: $style_active
scene_icon_style_inactive: $style_inactive
scene_title_style: $style_title
scene_title2_style: $style_title2
scene_widget_style: $background_style
scene_state_text_style: "color: $white"
sequence_icon_on: fas-square
sequence_icon_off: fas-square
sequence_icon_style_active: $style_active
sequence_icon_style_inactive: $style_inactive
sequence_title_style: $style_title
sequence_title2_style: $style_title2
sequence_widget_style: $background_style
sequence_state_text_style: "color: $white"
mode_icon_on: fas-arrows-alt
mode_icon_off: fas-arrows-alt
mode_icon_style_active: $style_active
mode_icon_style_inactive: $style_inactive
mode_title_style: $style_title
mode_title2_style: $style_title2
mode_widget_style: $background_style
mode_state_text_style: "color: $white"
script_icon_on: fas-th-large
script_icon_off: fas-th-large
script_icon_style_active: $style_active
script_icon_style_inactive: $style_inactive
script_title_style: $style_title
script_title2_style: $style_title2
script_widget_style: $background_style
script_state_text_style: "color: $white"
binary_sensor_icon_on: fas-bullseye
binary_sensor_icon_off: fas-minus
binary_sensor_icon_style_active: $style_active_warn
binary_sensor_icon_style_inactive: $style_inactive
binary_sensor_title_style: $style_title
binary_sensor_title2_style: $style_title2
binary_sensor_widget_style: $background_style
binary_sensor_state_text_style: "color: $white"
icon_title_style: $style_title
icon_title2_style: $style_title2
icon_widget_style: $background_style
icon_state_text_style: "color: $white"
device_tracker_icon_on: fas-user
device_tracker_icon_off: fas-user
device_tracker_icon_style_active: $style_active
device_tracker_icon_style_inactive: $style_inactive
device_tracker_title_style: $style_title
device_tracker_title2_style: $style_title2
device_tracker_widget_style: $background_style
device_tracker_state_text_style: "color: $white"
person_icon_on: fas-user
person_icon_off: fas-user
person_icon_style_active: $style_active
person_icon_style_inactive: $style_inactive
person_title_style: $style_title
person_title2_style: $style_title2
person_widget_style: $background_style
person_state_text_style: "color: $white"
input_boolean_icon_on: fas-sliders-h
input_boolean_icon_off: fas-sliders-h
input_boolean_icon_style_active: $style_active
input_boolean_icon_style_inactive: $style_inactive
input_boolean_title_style: $style_title
input_boolean_title2_style: $style_title2
input_boolean_widget_style: $background_style
input_boolean_state_text_style: "color: $white"
switch_icon_on: fas-circle
switch_icon_off: far-circle
switch_icon_style_active: $style_active
switch_icon_style_inactive: $style_inactive
switch_title_style: $style_title
switch_title2_style: $style_title2
switch_widget_style: $background_style
switch_state_text_style: "color: $white"
lock_icon_on: fas-unlock-alt
lock_icon_off: fas-lock
lock_icon_style_active: $style_active_warn
lock_icon_style_inactive: $style_inactive
lock_title_style: $style_title
lock_title2_style: $style_title2
lock_widget_style: $background_style
lock_state_text_style: "color: $white"
cover_icon_on: fas-arrows-alt-v
cover_icon_off: fas-arrows-alt-v
cover_icon_style_active: $style_active_warn
cover_icon_style_inactive: $style_inactive
cover_title_style: $style_title
cover_title2_style: $style_title2
cover_widget_style: $background_style
cover_state_text_style: "color: $white"
clock_date_style: "color: $white"
clock_time_style: "color: $purple"
clock_widget_style: $background_style
weather_main_style: "color: $orange"
weather_unit_style: "color: $orange"
weather_sub_style: "color: $blue"
weather_widget_style: $background_style
weather_summary_title_style: $style_title
weather_summary_text_style: "font-family: Climacons-Font; font-size: 100px"
weather_summary_state_text_style: "color: $white"
weather_summary_widget_style: $background_style
weather_summary_container_style: ""
london_underground_title_style: "color: $white"
london_underground_text_style: "color: $white"
london_underground_state_text_style: "color: $white;"
london_underground_widget_style: $background_style
london_underground_container_style: ""
label_title_style: $style_title
label_title2_style: $style_title2
label_text_style: "color: $white"
label_state_text_style: "color: $white"
label_widget_style: $background_style
label_container_style: ""
sensor_title_style: $style_title
sensor_title2_style: $style_title2
sensor_value_style: "color: $blue; font-size: 250%"
sensor_text_style: "color: $white; font-size: 100%"
# sensor_state_text_style: "color: $white; font-size: 100%"
sensor_unit_style: "color: $blue; font-size: 100%"
sensor_widget_style: $background_style
sensor_container_style: ""
reload_icon_active: fas-spinner fa-spin
reload_icon_inactive: fas-sync
reload_icon_active_style: "color: $white"
reload_icon_inactive_style: "color: $white"
reload_title_style: $style_title
reload_title2_style: $style_title2
reload_widget_style: $background_style
javascript_icon_active: fas-asterisk
javascript_icon_inactive: fas-asterisk
javascript_icon_active_style: "color: $white"
javascript_icon_inactive_style: "color: $white"
javascript_title_style: $style_title
javascript_title2_style: $style_title2
javascript_widget_style: $background_style
navigate_icon_active: fas-spinner fa-spin
navigate_icon_inactive: fas-cog
navigate_icon_active_style: "color: $white"
navigate_icon_inactive_style: "color: $white"
navigate_title_style: $style_title
navigate_title2_style: $style_title2
navigate_widget_style: $background_style
media_player_icon_play: fas-play
media_player_icon_pause: fas-pause
media_player_icon_up: fas-plus
media_player_icon_down: fas-minus
media_player_title_style: $style_title
media_player_media_title_style: $style_title2
media_player_album_style: $style_title2
media_player_artist_style: $style_title2
media_player_icon_style_active: "color: $green"
media_player_icon_style_inactive: "color: $gray_light"
media_player_state_text_style: "color: $white"
media_player_units_style: "color: $white"
media_player_level_style: "color: $white"
media_player_level_up_style: "color: $gray_light"
media_player_level_down_style: "color: $gray_light"
media_player_widget_style: $background_style
media_player_icon_previous: fas-step-backward
media_player_icon_next: fas-step-forward
media_player_icon_style_previous: "color: $gray_light"
media_player_icon_style_next: "color: $gray_light"
light_icon_on: fas-circle
light_icon_off: far-circle
light_icon_up: fas-plus
light_icon_down: fas-minus
light_title_style: $style_title
light_title2_style: $style_title2
light_icon_style_active: $style_active
light_icon_style_inactive: $style_inactive
light_state_text_style: "color: $white"
light_level_style: "color: $white"
light_unit_style: "color: $white"
# light_level_up_style: "color: $gray_light"
# light_level_down_style: "color: $gray_light"
light_widget_style: $background_style
input_number_title_style: $style_title
input_number_title2_style: $style_title2
input_number_minvalue_style: $style_title
input_number_maxvalue_style: $style_title
input_number_value_style: $style_title
input_number_slider_style: "-webkit-appearance: none"
input_number_container_style: ""
input_number_widget_style: $background_style
climate_icon_up: fas-plus
climate_icon_down: fas-minus
climate_title_style: $style_title
climate_title2_style: $style_title2
climate_level_style: "color: $blue"
climate_unit_style: "color: $blue"
climate_level_up_style: "color: $gray_light"
climate_level_down_style: "color: $gray_light"
climate_widget_style: $background_style
climate_level2_style: "color: $blue"
climate_unit2_style: "color: $blue"
group_icon_on: fas-circle
group_icon_off: far-circle
group_icon_up: fas-plus
group_icon_down: fas-minus
group_title_style: $style_title
group_title2_style: $style_title2
group_icon_style_active: $style_active
group_icon_style_inactive: $style_inactive
group_state_text_style: "color: $white"
group_level_style: "color: $white"
group_level_up_style: "color: $gray_light"
group_level_down_style: "color: $gray_light"
group_widget_style: $background_style
group_unit_style: "color: $white"
iframe_title_style: "$style_title; background-color: rgba(0, 0, 0, 0.5)"
iframe_widget_style: $background_style
alarm_title_style: "color: $blue"
alarm_widget_style: $background_style
alarm_title2_style: $style_title2
alarm_state_style: "color: $white; font-size: 100%"
alarm_panel_state_style: "color: $white"
alarm_panel_code_style: "color: $white"
alarm_panel_background_style: "background-color: $gray_dark"
alarm_panel_button_style: "background-color: $gray_medium"
camera_widget_style: $background_style
camera_title_style: "$style_title; background-color: rgba(0, 0, 0, 0.5)"
gauge_widget_style: $background_style
gauge_title_style: $style_title
gauge_title2_style: $style_title2
gauge_low_value_color: "$blue"
gauge_med_value_color: "$blue"
gauge_high_value_color: "$blue"
gauge_value_bgcolor: "$gray_medium"
gauge_text_color: "$blue"
rss_title_style: $style_title
rss_title2_style: $style_title2
rss_text_style: "color: $blue"
rss_widget_style: $background_style
input_select_title_style: $style_title
input_select_title2_style: $style_title2
input_select_widget_style: $background_style
# input_select_select_style: "background-color: #999;color:black"
input_select_container_style: ""
input_slider_icon_up: fas-plus
input_slider_icon_down: fas-minus
input_slider_title_style: $style_title
input_slider_title2_style: $style_title2
input_slider_level_style: "color: $blue"
input_slider_unit_style: "color: $blue"
input_slider_level_up_style: "color: $gray_light"
input_slider_level_down_style: "color: $gray_light"
input_slider_widget_style: $background_style
new_input_number_title_style: $style_title
new_input_number_title2_style: $style_title2
new_input_number_minvalue_style: $style_title
new_input_number_maxvalue_style: $style_title
new_input_number_value_style: $style_title
new_input_number_slider_style: "-webkit-appearance: none"
new_input_number_container_style: ""
new_input_number_widget_style: $background_style
vertical_input_number_title_style: $style_title
vertical_input_number_title2_style: $style_title2
vertical_input_number_minvalue_style: $style_title
vertical_input_number_maxvalue_style: $style_title
vertical_input_number_value_style: $style_title
vertical_input_number_slider_style: ""
vertical_input_number_container_style: ""
vertical_input_number_widget_style: $background_style
light_with_brightness_icon_on: mdi-lightbulb
light_with_brightness_icon_off: mdi-lightbulb
light_with_brightness_title_style: $style_title
light_with_brightness_title2_style: $style_title2
light_with_brightness_slider_style: ""
light_with_brightness_widget_style: $background_style
light_with_brightness_icon_style_active: $style_active
light_with_brightness_icon_style_inactive: $style_inactive
light_with_colorpicker_icon_on: mdi-lightbulb
light_with_colorpicker_icon_off: mdi-lightbulb
light_with_colorpicker_title_style: $style_title
light_with_colorpicker_title2_style: $style_title2
light_with_colorpicker_button_style: ""
light_with_colorpicker_widget_style: $background_style
light_with_colorpicker_icon_style_active: $style_active
light_with_colorpicker_icon_style_inactive: $style_inactive
radial_widget_style: "background: none"
thermo_widget_style: "background: none"
heater_icon_on: fas-fire
heater_icon_off: fas-fire
heater_title_style: $style_title
heater_title2_style: $style_title2
heater_slider_style: ""
heater_widget_style: $background_style
heater_icon_style_active: $style_active
heater_icon_style_inactive: $style_inactive
input_text_title_style: $style_title
input_text_title2_style: $style_title2
input_text_text_style: "color: $white; font-size: 100%"
input_text_widget_style: $background_style
input_text_container_style: ""
input_datetime_title_style: $style_title
input_datetime_title2_style: $style_title2
input_datetime_date_style: "color: $white; font-size: 100%"
input_datetime_time_style: "color: $white; font-size: 100%"
input_datetime_widget_style: $background_style
input_datetime_container_style: ""
#
# Overrides
#
style_state_text: "color: $white; font-size: 100%; opacity: 0.8; font-weight: 500; margin-bottom: 3px; padding: 3px 0; border-radius: 0 0 5px 5px"
style_title: "color: $white; font-weight: 500; opacity: 0.6;"
sensor_state_text_style: $style_state_text
input_select_select_style: ""
input_select_state_text_style: $style_state_text
light_level_up_style: "color: $white; opacity:0.7;"
light_level_down_style: "color: $white; opacity:0.7;"
#
# Custom sensors
#
entitycamera_widget_style: $camera_widget_style
entitycamera_title_style: $camera_title_style
iconsensor_icon_style_active: $style_active
iconsensor_title_style: $style_title
iconsensor_title2_style: $style_title2
iconsensor_widget_style: $background_style
iconsensor_state_text_style: $style_state_text
multisensor_title_style: $style_title
multisensor_title2_style: $style_title2
multisensor_valueunit_style: ""
multisensor_valueunit2_style: ""
multisensor_value_style: "color: $orange; font-size: 175%;"
multisensor_value2_style: "color: $blue; font-size: 175%;"
multisensor_text_style: "color: $white; font-size: 100%;"
multisensor_state_text_style: $style_state_text
multisensor_unit_style: "color: $orange; font-size: 85%;"
multisensor_unit2_style: "color: $blue; font-size: 85%;"
multisensor_widget_style: $background_style
slideshow_widget_style: $background_style
slideshow_title_style: "$style_title; background-color: rgba(0, 0, 0, 0.5); border-radius: 0 0 5px 5px; line-height: 2em; opacity: 0.8;"