/**
 * @file colors.js
 *
 * (C) Copyright 2024 Amplex, fm@amplex.dk
 */

body {
  --nav-background: #f0f0f0; /* grey-2' */
  --nav-backgrd-2:  #f8f8f8; /* grey-2'' */
  --node-select:    #b0bec5; /* blue-grey-3 */
  --fab-color:      #90a4ae; /* blue-grey-4 */
  --text-faded:     #757575; /* grey-7 */
  --text-dim:       rgba(0, 0, 0, 0.6);
  --tabbar-fg:      #fff;    /* white */
  --tab-bar:        #202020;    /* black */
  --body-fg:        #000;
  --body-bg:        #fff;
  --darktitle-fg:   #fff;
  --darktitle-bg:   #000;
  --chevron-fg:     #757575;
  --separator-bg:   rgba(0, 0, 0, 0.12); /* from q-separator */
  --state-on:       #e1e109;
  --state-dim1:     #77e042;
  --state-dim2:     #55aa2b;
  --state-man:      #fbbb08;
  --state-off:      #202020;
  --state-off2:     #202020;
  --day:            #fafafa;
  --activation:     #c3c3c3;
  --twilight_off:   #ef6343;
  --off-chart:      #ef6343;
  --off-chart2:     #94696f;
  --act-chart:      #c3c3c3;
  --state-unknown:  rgb(166,166,166);
  --state-manual:   rgb(251,187,8);
  --state-unassigned:#78add3;
  --state-sensor:   #66E6F8;
  --entry-dynamic:  hsl(57, 65%, 95%);
  --entry-updated:  hsl(55, 32%, 97%);
  --entry-removing: hsl(330, 40%, 90%);
  --entry-pending:  hsl(100, 40%, 90%);
  --entry-dynamic2: hsl(57, 45%, 91%);
  --entry-updated2: hsl(55, 11%, 96%);
  --alarm-ok:       #357f11;
  --alarm-low:      #b1b216;
  --alarm-medium:   #bf771a;
  --alarm-high:     #b12025;
  --blue-grey:      #617e8c;
  --blue-grey-4:    #90a4ad;
  --blue-grey-7:    #546e7a;

}
body.body--dark {
  --nav-background: #414141; /* grey-9 */
  --nav-backgrd-2:  #2e2e2e; /* grey-9' */
  --node-select:    #617e8c; /* blue-grey-6 */
  --fab-color:      #90a4ae; /* blue-grey-4 */
  --text-faded:     #9e9e9e; /* grey-6 */
  --text-dim:       rgba(255, 255, 255, 0.6);
  --tabbar-fg:      #f0f0f0;    /* white */
  --tab-bar:        #101010; 
  --body-fg:        #fff;
  --body-bg:        #000;
  --chevron-fg:     #c7c7c7;
  --state-off2:     #202020;
  --darktitle-bg:   #3f3f3f;
  --separator-bg:   rgba(255, 255, 255, 0.28); /* from q-separator */
  --entry-dynamic:  hsl(57, 42%, 12%);
  --entry-updated:  hsl(55, 9%, 19%);
  --entry-removing: hsl(330, 33%, 26%);
  --entry-pending:  hsl(100, 33%, 26%);
  --entry-dynamic2: hsl(57, 42%, 12%);
  --entry-updated2: hsl(55, 9%, 19%);
}
.bg-nav-background   { background: var(--nav-background) !important; }
.text-nav-background { color: var(--nav-background) !important; }
.bg-nav-backgrd-2    { background: var(--nav-backgrd-2) !important; }
.text-nav-backgrd-2  { color: var(--nav-backgrd-2) !important; }
.bg-node-select      { background: var(--node-select) !important; }
.text-node-select    { color: var(--node-select) !important; }
.bg-fab-color        { background: var(--fab-color) !important; }
.text-fab-color      { color: var(--fab-color) !important; }
.bg-text-faded       { background: var(--text-faded) !important; }
.text-text-faded     { color: var(--text-faded) !important; }
.text-dim            { color: var(--text-dim) !important; }
.text-chevron-fg     { color: var(--chevron-fg) !important; }
.bg-text-fg          { background: var(--text-fg) !important; }
.text-text-fg        { color: var(--text-fg) !important; }
.text-tabbar-fg      { color: var(--tabbar-fg) !important; }
.bg-tab-bar          { background: var(--tab-bar) !important; }
.text-tab-bar        { color: var(--tab-bar) !important; }
.bg-darktitle        { background: var(--darktitle-bg) !important; }
.text-darktitle      { color: var(--darktitle-fg) !important; }
.bg-body             { background: var(--body-bg) !important; }
.text-body           { color: var(--body-fg) !important; }
.text-transparent    { color: rgba(255, 255, 255, 0) !important; }
.text-label          { color: rgba(0, 0, 0, 0.6) !important; }

.on_color         { color: var(--state-on); }
.dim1_color       { color: var(--state-dim1); }
.dim2_color       { color: var(--state-dim2); }
.man_color        { color: var(--state-man); }
.off_color        { color: var(--state-off); }
.day_color        { color: var(--day); }
.black_color      { color: #000; }
.manual_color     { color: var(--state-manual); }
.unknown_color    { color: var(--state-unknown); }
.activation_color { color: var(--activation); }
.unassigned_color { color: var(--state-unassigned); }
.sensor_color     { color: var(--state-sensor); }

.bg-on_color      { background: var(--state-on); }
.bg-dim1_color    { background: var(--state-dim1); }
.bg-dim2_color    { background: var(--state-dim2); }
.bg-man_color     { background: var(--state-man); }
.bg-off_color     { background: var(--state-off); }
.bg-dark_color    { background: var(--state-off); }
.bg-day_color     { background: var(--day); }
.bg-black_color   { background: #000; }
.bg-manual_color  { background: var(--state-manual); }
.bg-unknown_color { background: var(--state-unknown); }
.bg-activation_color { background: var(--activation); }
.bg-twilight_off_color { background: var(--twilight_off); }
.bg-unassigned_color { color: var(--state-unassigned); }
.bg-sensor_color  { color: var(--state-sensor); }

.text-on_color      { color: var(--state-on); }
.text-dim1_color    { color: var(--state-dim1); }
.text-dim2_color    { color: var(--state-dim2); }
.text-man_color     { color: var(--state-man); }
.text-off_color     { color: var(--state-off); }
.text-dark_color    { color: var(--state-off); }
.text-manual_color  { color: var(--state-manual); }
.text-unknown_color { color: var(--state-unknown); }

.lightFunction{
  background-image: url('/common-ui/theme/main/css/default/images/gridlight-grey.png') !important;
  background-size:24px 24px !important;
  width:24px; height:24px;
  transform: scale(0.8);
}
.sensorFunction{
  background-image: url('/common-ui/theme/main/css/default/images/modules-grey.png') !important;
  background-size:24px 24px !important;
  width:24px; height:24px;
  transform: scale(0.8);
}
.config_error {
    color: red !important;
}
.config_pending {
    color: darkblue !important;
}
.entry-dynamic { background-color: var(--entry-dynamic)  !important; }
.entry-updated { background-color: var(--entry-updated)  !important; }
.entry-removing{ background-color: var(--entry-removing) !important; }
.entry-pending { background-color: var(--entry-pending)  !important; }

.text-alarm_ok_color, .alarm_ok_color {
  color: var(--alarm-ok) !important;
}
.text-alarm_low_color, .alarm_low_color {
  color: var(--alarm-low) !important;
}
.text-alarm_medium_color, .alarm_medium_color {
  color: var(--alarm-medium) !important;
}
.text-alarm_high_color, .alarm_high_color {
  color: var(--alarm-high) !important;
}

.comm_ok_color {
  color:#449922 !important;
}
.comm_offline_color {
  color:#c32c1c !important;
}
.comm_disconnected_color {
  color:#b86409 !important;
}

.bg-alarm_open_color {
  background:#a11015 !important;
}
.bg-alarm_pending_color {
  background:#a85409 !important;
}
.bg-alarm_closed_color {
  background:#348912 !important;
}
.text-alarm_open_color {
  color:#a11015 !important;
}
.text-alarm_pending_color {
  color:#a85409 !important;
}
.text-alarm_closed_color {
  color:#348912 !important;
}
.bg-alarm_ok_color {
  background:#66cc33 !important;
}
.bg-alarm_low_color {
  background:#e2e418 !important;
}
.bg-alarm_medium_color {
  background:#f37122 !important;
}
.bg-alarm_high_color {
  background: #b12025 !important;
}

.bg-comm_ok_color {
  background:#66cc33 !important;
}
.bg-comm_offline_color {
  background:#c32c1c !important;
}
.bg-comm_disconnected_color {
  background:#b86409 !important;
}

.summary_green, .summary_positive{
  color:#498850;
}
.summary_red, .summary_negative{
  color:#c32c1c;
}

.hc-primary {
  fill: var(--q-primary) !important;
  stroke: var(--q-primary) !important;
}
.hc-secondary {
  fill: var(--q-secondary) !important;
  stroke: var(--q-secondary) !important;
}
.hc-text-dim {
  fill: var(--text-dim) !important;
  stroke: var(--text-dim) !important;
}
.hc-text-faded {
  fill: var(--text-faded) !important;
  stroke: var(--text-faded) !important;
}
.hc-nav-backgrd-2 {
  fill: var(--nav-backgrd-2) !important;
  stroke: var(--nav-backgrd-2) !important;
}
.hc-act-chart {
  fill: var(--act-chart) !important;
  stroke: var(--act-chart) !important;
}
.hc-off-chart {
  fill: var(--off-chart) !important;
  stroke: var(--off-chart) !important;
}
.hc-activation {
  fill: var(--activation) !important;
  stroke: var(--activation) !important;
}
.hc-twilight-off {
  fill: var(--twilight-off) !important;
  stroke: var(--twilight-off) !important;
}
.hc-state-on {
  fill: var(--state-on) !important;
  stroke: var(--state-on) !important;
}
.hc-state-off {
  fill: var(--state-off) !important;
  stroke: var(--state-off) !important;
}
.hc-state-dim1 {
  fill: var(--state-dim1) !important;
  stroke: var(--state-dim1) !important;
}
.hc-state-dim2 {
  fill: var(--state-dim2) !important;
  stroke: var(--state-dim2) !important;
}

/* Other, non color, css stuff. Stuff it in a different file at some point .. */

/* From https://stackoverflow.com/a/14270832/3697584 */
html, body {
  overflow: hidden;
}

@media (max-width: 500px) {
  .q-toolbar .q-input.q-mr-xl { margin-right: 5px; }
  .q-toolbar .usermenu { white-space: nowrap; overflow:hidden}
}

/* From Quasar website index.css. Colors adjusted */
::-webkit-scrollbar {
    height: 10px;
    width: 10px;
    background: transparent;
    z-index: 12;
    overflow: visible;
}

::-webkit-scrollbar-thumb {
    width: 6px;
    background-color: #90a4ae;
    border-radius: 8px;
    z-index: 12;
    border: 2px solid rgba(0,0,0,0);
    background-clip: padding-box;
    -webkit-transition: background-color .28s ease-in-out;
    transition: background-color .28s ease-in-out;
    margin: 2px;
    min-height: 32px;
    min-width: 32px
}

::-webkit-scrollbar-thumb:hover {
    background: #90a4ae;
}

.hovered {
  background: #e8e8e8 !important; /* By inspection! */
}

i.q-icon.q-tabs__arrow {
  margin-top: 5px;
}

.pencil-on-hover       {
  opacity: 0;
  cursor:pointer;
}
.pencil-on-hover:hover { opacity: 0.8 }
.pencil-on-hover.highlight:hover { 
  background: #999;
}

.dense-menu-center {
  padding-top: 5px !important;
}

.hrefpointer {
  cursor:pointer;
}


p.footnote {
  margin-left: 0.8em; 
  text-indent: -0.8em;
  position: relative;
}

.gl-div-control {
  border: 1px solid !important;
  border-radius: 2px !important;
  color: rgba(0, 0, 0, 0.74);
  border-color: rgba(0, 0, 0, 0.24);
}

.body--dark .gl-div-control {
  color: rgba(255, 255, 255, 0.74);
  border-color: rgba(255, 255, 255, 0.24);
}

.gl-div-control:hover {
  color: var(--body-fg);
  border-color: var(--body-fg);
}

.editable-chip {
  margin: 0px;
  padding: 0px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--body-fg);
}

.sticky-tableheader {
  max-width: 100%;
  max-height: 100%;
}
.sticky-tableheader .q-table__top, .sticky-tableheader .q-table__bottom, .sticky-tableheader thead tr {
  /* bg color is important for th; just specify one */
  background-color: var(--nav-backgrd-2);
}
.sticky-tableheader thead tr {
  position: sticky;
  z-index: 1;
  top: 0;
}

.q-tree__arrow { /* align items */
  font-size: 16px;
}

fieldset {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 5px;
  position: relative;
  color: rgba(0, 0, 0, 0.87);
}
fieldset legend {
  font-size: 11px;
  padding: 6px;
  background: white;
  position: absolute;
  top: -15px;
  color: rgba(0, 0, 0, 0.87);
}

/* For Vue <Transition/>  "fade" & "slide-fade" */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.scaley-enter-active,
.scaley-leave-active {
  transition: transform 0.5s ease;
}
.scaley-enter-from,
.scaley-leave-to {
  transform: scale(1, 0);
}

.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}
.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateY(20px);
  opacity: 0;
}

/* Support glico in q-icon by substituting the "glico-" prefix with "ti-". Content from gridlight-icons.css */
.themify-icon {
	font-family: 'gridlight-icons';
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
}
.ti-light-sensor-1:before {
  content: "\e940";
}
.ti-module {
  top: 2px;
}
.ti-module:before {
  content: "\e93e";
}
.ti-pole {
  top: 2px;
}
.ti-pole:before {
  content: "\e93f";
}
.ti-hammer:before {
  content: "\e996";
}
.ti-alert-acked-open:before {
  content: "\e901";
}
.ti-circle-solid:before {
  content: "\e902";
}
.ti-alert-nonstick-closed:before {
  content: "\e935";
}
.ti-alert-nonstick-open:before {
  content: "\e903";
}
.ti-circle-open:before {
  content: "\e936";
}
.ti-alert-noack-open:before {
  content: "\e904";
}
.glico-notification:before {
  content: "\ea08";
}
.glico-alerts:before,.ti-alarm-open:before {
  content: "\e90b";
}
.ti-alert-noack-closed:before,.ti-alarm-pending:before {
  content: "\e900";
}
.ti-alert-acked-closed:before,.ti-alarm-closed:before {
  content: "\e905";
}
.ti-switch-bulb-black:before {
  content: "\e941";
}
.ti-switch-bulb-light:before {
  content: "\e942";
}
.ti-lever-1:before {
  content: "\e943";
}
.ti-lever-2:before {
  content: "\e944";
}
.ti-lever-3:before {
  content: "\e945";
}

/* vim: set sw=2 sts=2 et: */