UtilitechAS.amsreader-firmware/lib/SvelteUi/app/src/app.postcss

@tailwind base;
@tailwind components;
@tailwind utilities;

.hdr {
  @apply bg-violet-600 p-1 rounded-md mx-2 dark:bg-violet-900
}

.logo {
  width: 2rem;
  height: 2rem;
}

.cnt {
  @apply m-2 p-2 rounded dark:bg-gray-800 bg-white dark:text-white shadow-lg dark:shadow-gray-900 dark:drop-shadow-md;
  min-height: 268px;
}

.gwf {
  @apply 2xl:col-span-6 xl:col-span-5 lg:col-span-4 md:col-span-3 sm:col-span-2 h-64
}

.in-pre {
  @apply flex items-center bg-gray-100 dark:bg-gray-600 rounded-l-md border border-r-0 dark:border-gray-800 border-gray-300 px-3 whitespace-nowrap text-sm
}

.in-post {
  @apply flex items-center bg-gray-100 dark:bg-gray-600 rounded-r-md border border-l-0 dark:border-gray-800 border-gray-300 px-3 whitespace-nowrap text-sm
}

.in-txt {
  @apply h-10 shadow-sm border-gray-300 dark:border-gray-800 disabled:bg-gray-200 dark:disabled:bg-gray-700 disabled:text-white
  disabled:cursor-not-allowed dark:text-white dark:bg-gray-700 dark:shadow-lg dark:border dark:focus:ring-4 dark:drop-shadow-lg
}
.in-f {
  @apply in-txt rounded-l-md dark:placeholder:text-gray-400 dark:default:text-white disabled:text-white default:text-white
}
.in-m {
  @apply in-txt border-l-0
}
.in-l {
  @apply in-txt border-l-0 rounded-r-md dark:placeholder-white
}
.in-s {
  @apply in-txt rounded-md w-full dark:text-white placeholder:text-gray-400
}
.tr {
  @apply text-right
}

.bd-green {
  @apply my-auto bg-green-600 text-green-100 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded
}
.bd-yellow {
  @apply my-auto bg-yellow-600 text-yellow-100 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded
}
.bd-red {
  @apply my-auto bg-red-600 text-red-100 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded
}
.bd-blue {
  @apply my-auto bg-blue-600 text-blue-100 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded
}
.bd-gray {
  @apply my-auto bg-gray-600 text-gray-100 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded
}

.bd-on {
  @apply my-auto bg-green-600 text-green-100 text-xs font-semibold mr-1 px-1 py-0.5 rounded
}
.bd-off {
  @apply my-auto bg-gray-600 text-gray-100 text-xs font-semibold mr-1 px-1 py-0.5 rounded
}

.btn-pri {
  @apply py-2 px-4 rounded bg-blue-600 text-white mr-3
}
.btn-red {
  @apply py-2 px-4 rounded bg-red-600 text-white ml-2
}
.btn-yellow {
  @apply py-2 px-4 rounded bg-yellow-600 text-white ml-2
}
.btn-pri-sm {
  @apply text-xs py-1 px-2 rounded bg-blue-600 text-white mr-3
}
.btn-yellow-sm {
  @apply text-xs py-1 px-2 rounded bg-yellow-600 text-white mr-3
}

.pl-root {
    position: relative;
}
.pl-ov {
    position: absolute;
    top: 27%;
    left: 25%;
    width: 50%;
    text-align: center;
}
.pl-val {
    font-size: 1.7rem;
}
.pl-unt {
    font-size: 1.0rem;
    color: grey;
    @apply dark:text-gray-200
}
.pl-sub {
    padding-top: 10px;
    font-size: 1.0rem;
}
.pl-snt {
    font-size: 0.7rem;
    color: grey;
    @apply dark:text-gray-200
}
.pl-lab {
    font-size: 1.0rem;
}

.chart {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

svg {
  position: relative;
  width: 100%;
}

.tick {
  font-family: Helvetica, Arial;
  font-size: 0.85em;
  font-weight: 200;
  @apply dark:fill-white text-white
}

.tick line {
  stroke: #e2e2e2;
  stroke-dasharray: 2;
}

.tick text {
  fill: #999;
  text-anchor: start;
  @apply dark:fill-white
}

.tick.tick-0 line {
  stroke-dasharray: 0;
}

.tick.tick-green line {
  stroke: #23ac05 !important;
}

.tick.tick-green text {
  fill: #23ac05 !important;
}

.tick.tick-orange line {
  stroke: #b19601 !important;
}

.tick.tick-orange text {
  fill: #b19601 !important;
}

.x-axis .tick text {
  text-anchor: middle;
}

.bars rect {
  stroke: rgb(0,0,0);
  stroke-opacity: 0.25;
  opacity: 0.9;
}

.bars text {
  font-family: Helvetica, Arial;
  font-size: 0.85em;
  display: block;
  text-align: center;
}