The part of code in the slider-button-card that I think is relevant (maybe not, let me know):
ha-card {
box-sizing: border-box;
height: 100%;
width: 100%;
min-height: 7rem;
display: flex;
flex-direction: column;
justify-content: space-between;
touch-action: pan-y;
overflow: hidden;
--mdc-icon-size: 2.2em;
}
ha-card.square {
aspect-ratio: 1 / 1;
}
ha-card.compact {
min-height: 3rem !important;
}
:host {
--slider-bg-default-color: var(--primary-color, rgb(95, 124, 171));
--slider-bg: var(--slider-color);
--slider-bg-filter: brightness(100%);
--slider-bg-direction: to right;
--slider-track-color: #2b374e;
--slider-tracker-color: transparent;
--slider-value: 0%;
--slider-transition-duration: 0.2s;
/*--label-text-shadow: rgb(255 255 255 / 10%) -1px -1px 1px, rgb(0 0 0 / 50%) 1px 1px 1px;*/
/*--label-color-on: var(--primary-text-color, white);*/
/*--label-color-off: var(--primary-text-color, white);*/
--icon-filter: brightness(100%);
--icon-color: var(--paper-item-icon-color);
--icon-rotate-speed: 0s;
/*--state-color-on: #BAC0C6; */
/*--state-color-off: var(--disabled-text-color);*/
/*--state-text-shadow: rgb(255 255 255 / 10%) -1px -1px 1px, rgb(0 0 0 / 50%) 1px 1px 1px;*/
--btn-bg-color-off: rgba(43,55,78,1);
--btn-bg-color-on: #20293c;
/*--action-icon-color-on: var(--paper-item-icon-color, black);*/
/*--action-icon-color-off: var(--paper-item-icon-color, black);*/
/*--action-spinner-color: var(--label-badge-text-color, white);*/
}
/* --- BUTTON --- */
.button {
position: relative;
padding: 0.8rem;
box-sizing: border-box;
height: 100%;
min-height: 7rem;
width: 100%;
display: block;
overflow: hidden;
transition: all 0.2s ease-in-out;
touch-action: pan-y;
}
ha-card.compact .button {
min-height: 3rem !important;
}
.button.off {
background-color: var(--btn-bg-color-off);
}
/* --- ICON --- */
.icon {
position: relative;
cursor: pointer;
width: var(--mdc-icon-size, 24px);
height: var(--mdc-icon-size, 24px);
box-sizing: border-box;
padding: 0;
outline: none;
animation: var(--icon-rotate-speed, 0s) linear 0s infinite normal both running rotate;
-webkit-tap-highlight-color: transparent;
}
.icon ha-icon {
filter: var(--icon-filter, brightness(100%));
color: var(--icon-color);
transition: color 0.4s ease-in-out 0s, filter 0.2s linear 0s;
}
.icon.has-picture {
background-size: cover;
border-radius: 50%;
}
.icon.has-picture ha-icon{
display: none;
}
.unavailable .icon ha-icon {
color: var(--disabled-text-color);
}
.compact .icon {
float: left;
}
/* --- TEXT --- */
.text {
position: absolute;
bottom: 0;
left: 0;
padding: 0.8rem;
pointer-events: none;
user-select: none;
font-size: 1.1rem;
line-height: 1.3rem;
max-width: calc(100% - 2em);
/*text-shadow: rgb(255 255 255 / 10%) -1px -1px 1px, rgb(0 0 0 / 50%) 1px 1px 1px;*/
}
.compact .text {
position: relative;
top: 0.5rem;
left: 0.5rem;
display: inline-block;
padding: 0;
height: 1.3rem;
width: 100%;
overflow: hidden;
max-width: calc(100% - 4em);
}
.compact.hide-action .text {
max-width: calc(100% - 2em);
}
/* --- LABEL --- */
.name {
color: var(--label-color-on, var(--primary-text-color, white));
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
text-shadow: var(--label-text-shadow, none);
}
.off .name {
color: var(--label-color-off, var(--primary-text-color, white));
}
.unavailable.off .name,
.unavailable .name {
color: var(--disabled-text-color);
}
.compact .name {
display: inline-block;
max-width: calc(100% - 3.5em);
}
/* --- STATE --- */
.state {
color: var(--state-color-on, var(--label-badge-text-color, white));
text-overflow: ellipsis;
white-space: nowrap;
text-shadow: var(--state-text-shadow);
transition: font-size 0.1s ease-in-out;
}
.changing .state {
font-size: 150%;
}
.off .state {
color: var(--state-color-off, var(--disabled-text-color));
}
.unavailable .state {
color: var(--disabled-text-color);
}
.compact .state {
display: inline-block;
max-width: calc(100% - 0em);
overflow: hidden;
}
/* --- SLIDER --- */
.slider {
position: absolute;
top: 0px;
left: 0px;
height: 10%0;
width: 100%;
background-color: var( --ha-card-background, var(--card-background-color, var(--btn-bg-color-on, black)) );
cursor: ew-resize;
z-index: 0;
}
.slider[data-mode="bottom-top"] {
cursor: ns-resize;
}
.slider[data-mode="top-bottom"] {
cursor: ns-resize;
}
.slider:active {
cursor: grabbing;
}
/* --- SLIDER OVERLAY --- */
.slider .toggle-overlay {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
cursor: pointer;
opacity: 1;
z-index: 999;
}
/* --- SLIDER BACKGROUND --- */
.slider-bg {
position: absolute;
top: 0;
left: 0px;
height: 100%;
width: 100%;
background: var(--slider-bg);
background-size: var(--slider-bg-size, 100% 100%);
background-color: var(--slider-bg-color, transparent);
background-position: var(--slider-bg-position, 0 0);
filter: var(--slider-bg-filter, brightness(100%));
}
.off .slider .slider-bg {
background-color: var( --ha-card-background, var(--card-background-color, var(--btn-bg-color-off, black)) );
}
.slider[data-background="solid"] .slider-bg {
--slider-bg-color: var(--slider-color);
}
.slider[data-background="triangle"] .slider-bg {
--slider-bg-direction: to bottom right;
--slider-bg: linear-gradient(var(--slider-bg-direction), transparent 0%, transparent 50%, var(--slider-color) 50%, var(--slider-color) 100%);
border-right: 0px solid;
}
.slider[data-background="triangle"][data-mode="bottom-top"] .slider-bg {
--slider-bg-direction: to top left;
}
.slider[data-background="triangle"][data-mode="top-bottom"] .slider-bg {
--slider-bg-direction: to bottom left;
}
.slider[data-background="custom"] .slider-bg {
--slider-bg: repeating-linear-gradient(-45deg, var(--slider-color) 0, var(--slider-color) 1px, var(--slider-color) 0, transparent 10%);
--slider-bg-size: 30px 30px;
}
.slider[data-background="gradient"] .slider-bg {
--slider-bg: linear-gradient(var(--slider-bg-direction), rgba(0, 0, 0, 0) -10%, var(--slider-color) 100%);
}
.slider[data-background="striped"] .slider-bg {
--slider-bg: linear-gradient(var(--slider-bg-direction), var(--slider-color), var(--slider-color) 50%, transparent 50%, transparent);
--slider-bg-size: 4px 100%;
}
.slider[data-background="striped"][data-mode="bottom-top"] .slider-bg,
.slider[data-background="striped"][data-mode="top-bottom"] .slider-bg {
--slider-bg-size: 100% 4px;
}
.slider[data-mode="bottom-top"] .slider-bg {
--slider-bg-direction: to top;
}
.slider[data-mode="top-bottom"] .slider-bg {
--slider-bg-direction: to bottom;
}
/* --- SLIDER THUMB --- */
.slider-thumb {
position: relative;
width: 100%;
height: 100%;
transform: translateX(var(--slider-value));
background: transparent;
transition: transform var(--slider-transition-duration) ease-in;
}
.changing .slider .slider-thumb {
transition: none;
}
.slider[data-mode="top-bottom"] .slider-thumb {
transform: translateY(var(--slider-value)) !important;
}
.slider[data-mode="bottom-top"] .slider-thumb {
transform: translateY(calc(var(--slider-value) * -1)) !important;
}
.slider-thumb:before {
content: '';
position: absolute;
top: 0;
left: -2px;
height: 100%;
width: 2px;
background: var(--slider-color);
opacity: 0;
transition: opacity 0.2s ease-in-out 0s;
box-shadow: var(--slider-color) 0px 1px 5px 1px;
z-index: 999;
}
.slider[data-mode="top-bottom"] .slider-thumb:before {
top: -2px;
left: 0px;
height: 2px;
width: 100%;
}
.changing .slider-thumb:before {
opacity: 0.5;
}
.off.changing .slider-thumb:before {
opacity: 0;
}
.slider-thumb:after {
content: '';
position: absolute;
top: 0;
left: 0px;
height: 100%;
width: 100%;
background: var( --ha-card-background, var(--card-background-color, var(--btn-bg-color-on, black)) );
opacity: 1;
}
.slider[data-show-track="true"] .slider-thumb:after {
opacity: 0.9;
}
.off .slider[data-show-track="true"] .slider-thumb:after {
opacity: 1;
}
/* --- ACTION BUTTON --- */
.action {
position: relative;
float: right;
width: var(--mdc-icon-size, 24px);
height: var(--mdc-icon-size, 24px);
color: var(--action-icon-color-on, var(--paper-item-icon-color, black));
cursor: pointer;
outline: none;
-webkit-tap-highlight-color: transparent;
}
.action ha-switch {
position: absolute;
right: 0;
top: 5px;
}
.off .action {
color: var(--action-icon-color-off, var(--paper-item-icon-color, black));
}
.unavailable .action {
color: var(--disabled-text-color);
}
.circular-loader {
position: absolute;
left: -8px;
top: -8px;
width: calc(var(--mdc-icon-size, 24px) + 16px);
height: calc(var(--mdc-icon-size, 24px) + 16px);
opacity: 0;
transition: opacity 0.2s ease-in-out;
animation: rotate 2s linear infinite;
}
.action.loading .circular-loader {
opacity: 1;
}
.loader-path {
fill: none;
stroke-width: 2px;
stroke: var(--action-spinner-color, var(--label-badge-text-color, white));
animation: animate-stroke 1.5s ease-in-out infinite both;
stroke-linecap: round;
}
/* --- MISC --- */
.unavailable .slider .toggle-overlay,
.unavailable .action,
.unavailable .action ha-switch,
.unavailable .slider {
cursor: not-allowed !important;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes animate-stroke {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124;
}
}
`}};t([Zt({attribute:!1})],kr.prototype,"hass",void 0),t([Kt()],kr.prototype,"config",void 0),t([Jt(".state")],kr.prototype,"stateText",void 0),t([Jt(".button")],kr.prototype,"button",void 0),t([Jt(".action")],kr.prototype,"action",void 0),t([Jt(".slider")],kr.prototype,"slider",void 0),t([te({passive:!0})],kr.prototype,"onPointerDown",null),t([te({passive:!0})],kr.prototype,"onPointerUp",null),t([te({passive:!0})],kr.prototype,"onPointerMove",null),kr=t([Yt("slider-button-card")],kr);export{kr as SliderButtonCard};
