feat: introduce styling and refactor styles

src/styles.css

@@ -0,0 +1,260 @@
+:host {
+  --pc-background: var(
+    --ha-card-background,
+    var(--card-background-color, white)
+  );
+  --pc-primary-text-color: var(--primary-text-color);
+  --pc-secondary-text-color: var(--secondary-text-color);
+  --pc-icon-color: var(--secondary-text-color);
+  --pc-slider-path-color: var(--round-slider-path-color);
+  --pc-slider-bar-color: var(--round-slider-bar-color);
+  --pc-toolbar-background: var(--vc-background);
+  --pc-toolbar-icon-color: var(--secondary-text-color);
+  --pc-divider-color: var(--entities-divider-color, var(--divider-color));
+  --pc-spacing: 10px;
+
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
+
+ha-card {
+  flex-direction: column;
+  flex: 1;
+  position: relative;
+  padding: 0px;
+  overflow: hidden;
+}
+
+.fill-gap {
+  flex-grow: 1;
+}
+
+.preview {
+  background-color: var(--pc-background);
+  overflow: hidden;
+  position: relative;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  color: var(--pc-primary-text-color);
+}
+
+.tips {
+  display: flex;
+  gap: var(--pc-spacing);
+  flex-grow: 1;
+  flex-wrap: wrap;
+  padding: var(--pc-spacing);
+
+  & .tip {
+    cursor: pointer;
+  }
+}
+
+.preset-mode ha-icon {
+  display: inline-block;
+}
+
+.more-info {
+  color: var(--pc-primary-text-color);
+}
+
+.controls {
+  display: flex;
+  justify-content: center;
+}
+
+.slider {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  max-width: 250px;
+  min-width: 100px;
+}
+
+.slider round-slider {
+  --round-slider-path-color: var(--pc-slider-path-color);
+  --round-slider-bar-color: var(--pc-slider-bar-color);
+}
+
+.slider-center {
+  position: absolute;
+  width: calc(100% - 90px);
+  height: calc(100% - 10px);
+  box-sizing: border-box;
+  border-radius: 100%;
+  left: 45px;
+  top: 20px;
+  text-align: center;
+  overflow-wrap: break-word;
+  pointer-events: none;
+}
+
+.slider-content {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  top: 50%;
+  left: 50%;
+}
+
+.slider-value {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  transform: translateY(-50%);
+  font-size: 16px;
+  color: var(--pc-primary-text-color);
+}
+
+.image {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  object-fit: contain;
+  pointer-events: none;
+}
+
+.preview.not-available {
+  filter: grayscale(1);
+}
+
+.number-off {
+  opacity: 0.2;
+}
+
+.current-aqi {
+  font-size: 48px;
+  font-weight: bold;
+  line-height: 48px;
+  padding: var(--pc-spacing);
+  border-radius: 4px;
+  background: rgba(0, 0, 0, 0.6);
+  color: var(--text-primary-color);
+}
+
+.current-aqi sup {
+  font-size: 16px;
+  line-height: 16px;
+  font-weight: normal;
+}
+
+.state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.state-text {
+  color: var(--pc-secondary-text-color);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  margin-left: calc(28px + var(--pc-spacing)); /* size + margin of spinner */
+}
+
+.state mwc-circular-progress {
+  --mdc-theme-primary: var(--pc-secondary-text-color) !important;
+  margin-left: var(--pc-spacing);
+}
+
+.friendly-name {
+  text-align: center;
+  font-weight: bold;
+  color: var(--pc-primary-text-colo);
+  font-size: 16px;
+}
+
+.not-available {
+  text-align: center;
+  color: var(--pc-primary-text-colo);
+  font-size: 16px;
+}
+
+.metadata {
+  margin: var(--pc-spacing) auto;
+}
+
+.stats {
+  border-top: 1px solid var(--pc-divider-color);
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  color: var(--pc-secondary-text-color);
+}
+
+.stats-block {
+  cursor: pointer;
+  margin: var(--pc-spacing) 0px;
+  text-align: center;
+  border-right: 1px solid var(--pc-divider-color);
+  flex-grow: 1;
+
+  &:last-of-type {
+    border-right: 0px;
+  }
+}
+
+.stats-value {
+  font-size: 20px;
+  color: var(--pc-primary-text-color);
+}
+
+ha-icon {
+  display: flex;
+  color: var(--pc-icon-color);
+}
+
+.toolbar {
+  background: var(--pc-toolbar-background);
+  min-height: 30px;
+  display: flex;
+  flex-direction: row;
+  flex-flow: row wrap;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  padding: 5px;
+  border-top: 1px solid var(--pc-divider-color);
+}
+
+.toolbar ha-icon-button {
+  color: var(--pc-toolbar-text-color);
+  flex-direction: column;
+  width: 44px;
+  height: 44px;
+  --mdc-icon-button-size: 44px;
+  opacity: 0.5;
+}
+
+.toolbar ha-icon-button.active {
+  opacity: 1;
+}
+
+.toolbar paper-button {
+  color: var(--pc-toolbar-icon-color);
+  flex-direction: column;
+  margin-right: 10px;
+  padding: 15px 10px;
+  cursor: pointer;
+}
+
+.toolbar ha-icon-button:active,
+.toolbar paper-button:active {
+  opacity: 0.4;
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.toolbar paper-button {
+  color: var(--pc-toolbar-icon-color);
+  flex-direction: row;
+}
+
+.toolbar ha-icon {
+  color: var(--pc-toolbar-icon-color);
+}