Update styles

src/styles.ts

@@ -1,5 +1,9 @@
 import { css } from 'lit-element';
 
+export const styleVariables = {
+  '--time-picker-card-background-color': 'rgb(37, 47, 68)',
+};
+
 export const styles = css`
   .time-picker-ha-card {
     padding: 16px;
@@ -16,27 +20,19 @@ export const styles = css`
     padding: 0 8px;
   }
 
-  .time-picker-icon-up,
-  .time-picker-icon-down {
+  .time-picker-icon {
+    width: 30px;
+    padding: 8px;
+    text-align: center;
     cursor: pointer;
   }
 
-  .time-picker-icon-up {
-    padding: 8px;
-  }
-
-  .time-picker-icon-down {
-    margin-top: 8px;
-    padding: 8px;
-  }
-
   .time-input {
     width: 30px;
     padding: 8px;
-    background: var(--card-background-color, transparent);
+    background: var(--time-picker-card-background-color);
     border: 0;
     color: var(--text-color, #fff);
-    border-bottom: 1px solid var(--text-color, #fff);
     text-align: center;
     font-size: 1em;
   }

src/time-picker-card.ts

@@ -4,12 +4,12 @@ import { CSSResult, customElement, html, LitElement, property, TemplateResult }
 import { CARD_VERSION } from './const';
 import { Hour, Minute, TimeUnit } from './models';
 import { Partial } from './partials';
-import { styles } from './styles';
+import { styles, styleVariables } from './styles';
 import { Direction, TimePickerCardConfig } from './types';
 
 console.info(
-  `%c  TIME-PICKER-CARD \n%c  Version ${CARD_VERSION}    `,
-  'color: darkgreen; font-weight: bold; background: black',
+  `%c  TIME-PICKER-CARD  \n%c  Version ${CARD_VERSION}    `,
+  'color: orange; font-weight: bold; background: black',
   'color: white; font-weight: bold; background: dimgray'
 );
 
@@ -44,6 +44,7 @@ export class TimePickerCard extends LitElement {
       );
     }
 
+    this.setStyleVarialbes();
     this.hour = new Hour(this.entity?.attributes.hour ?? 0, this.config.hour_step);
     this.minute = new Minute(this.entity?.attributes.minute ?? 0, this.config.minute_step);
 
@@ -114,10 +115,8 @@ export class TimePickerCard extends LitElement {
       this.callService();
     };
 
-    const className = `time-picker-icon-${direction}`;
-
     return html`
-      <div class=${className} @click=${onIconClick}>
+      <div class="time-picker-icon" @click=${onIconClick}>
         <ha-icon .icon="mdi:arrow-${direction}"></ha-icon>
         <mwc-ripple id="ripple"></mwc-ripple>
       </div>
@@ -137,6 +136,12 @@ export class TimePickerCard extends LitElement {
     });
   }
 
+  private setStyleVarialbes(): void {
+    Object.entries(styleVariables).forEach(([variable, value]) =>
+      this.style.setProperty(variable, value)
+    );
+  }
+
   static get styles(): CSSResult {
     return styles;
   }