Catheedral.css

html, body {
  background-color: black;
  font-family: "Cairo" !important;
  overflow: hidden;

  /* Normally we don't want anything to be selectable */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


/* CSS Variables are used throughout to help make it a little easier
** to make wholesale changes without having to track down every little
** property definition.  These are also read directly into TMS WEB Core.
*/

:root {

  /* Ring Colors - at most 5 rings (usually 3) and a background color */
  /* Ring Filter - applied to each set of rings */

  --TxRing1: darkred;
  --TxRing2: darkgreen;
  --TxRing3: royalblue;
  --TxRing4: orange;
  --TxRing5: yellow;
  --TxRingB: #FFFFFF40;
  --TxRingF: drop-shadow(0px 0px 1px black) drop-shadow(0px 0px 1px black);

  --CxRing1: yellow;
  --CxRing2: orange;
  --CxRing3: royalblue;
  --CxRing4: white;
  --CxRing5: white;
  --CxRingB: #FFFFFF40;
  --CxRingF: drop-shadow(0px 0px 1px black) drop-shadow(0px 0px 1px black);

  --WxRing1: orange;
  --WxRing2: yellow;
  --WxRing3: royalblue;
  --WxRing4: white;
  --WxRing5: white;
  --WxRingB: #FFFFFF40;
  --WxRingF: drop-shadow(0px 0px 1px black) drop-shadow(0px 0px 1px black);

  --ExRing1: darkgreen;
  --ExRing2: darkred;
  --ExRing3: royalblue;
  --ExRing4: white;
  --ExRing5: white;
  --ExRingB: #FFFFFF40;
  --ExRingF: drop-shadow(0px 0px 1px black) drop-shadow(0px 0px 1px black);

  /* Assorted Delays */

  --Delay-Short: 0.4s;
  --Delay-Medium: 1.0s;
  --Delay-Long: 1.5s;

  /* Color Swatches */

  --Swatch-0:  white;
  --Swatch-1:  #CCCCCC;
  --Swatch-2:  #999999;
  --Swatch-3:  #666666;
  --Swatch-4:  #333333;
  --Swatch-5:  black;

  --Swatch-6:  lightpink;
  --Swatch-7:  lightyellow;
  --Swatch-8:  lightgreen;
  --Swatch-9:  lightsalmon;
  --Swatch-10: lightskyblue;
  --Swatch-11: paleturquoise;

  --Swatch-12: maroon;
  --Swatch-13: olive;
  --Swatch-14: green;
  --Swatch-15: teal;
  --Swatch-16: navy;
  --Swatch-17: purple;

  --Swatch-18: red;
  --Swatch-19: yellow;
  --Swatch-20: lime;
  --Swatch-21: aqua;
  --Swatch-22: blue;
  --Swatch-23: fuchsia;

  --Swatch-Name-0:  "White";
  --Swatch-Name-1:  "Gray-80%";
  --Swatch-Name-2:  "Gray-60%";
  --Swatch-Name-3:  "Gray-40%";
  --Swatch-Name-4:  "Gray-20%";
  --Swatch-Name-5:  "Black";

  --Swatch-Name-6:  "Light Pink";
  --Swatch-Name-7:  "Light Yellow";
  --Swatch-Name-8:  "Light Green";
  --Swatch-Name-9:  "Light Salmon";
  --Swatch-Name-10: "Light Sky Blue";
  --Swatch-Name-11: "Pale Turquoise";

  --Swatch-Name-12: 'Maroon';
  --Swatch-Name-13: 'Olive';
  --Swatch-Name-14: 'Green';
  --Swatch-Name-15: 'Teal';
  --Swatch-Name-16: 'Navy';
  --Swatch-Name-17: 'Purple';

  --Swatch-Name-18: 'Red';
  --Swatch-Name-19: 'Yellow';
  --Swatch-Name-20: 'Lime';
  --Swatch-Name-21: 'Aqua';
  --Swatch-Name-22: 'Blue';
  --Swatch-Name-23: 'Fuchsia';

  --sl-font-serif: "Cairo";

}


/* Make sure error messages appear on top of everything else */
/* so that they can both be seen and be dismissed */
#tmserrormessage {
  z-index: 9999999 !important;
}


/* Dunno why Bootstrap only declares 1-5? */
.order-6  {order:  6; }
.order-7  {order:  7; }
.order-8  {order:  8; }
.order-9  {order:  9; }
.order-10 {order: 10; }



/* Style input elements - Configuration pages usually */
input {
  color: white !important;
}
input[type=password]:focus-visible.ConfigEdit,
input[type=text]:focus-visible.ConfigEdit  {
  border: 2px solid #FF0;
  outline-offset: 0px;
  outline: 1px solid #FF0;
  filter: drop-shadow(0px 0px 2px blue) drop-shadow(0px 0px 2px blue);
}


/* Background
** Generally, this will only work when the background changes from one image to another
** or from one color to another.  Switching from image to color, or color to image
** does not get the benefit of the transition. But it's fun when it works.
*/
#divBackground {
  opacity: 0;
  background-color: black;
  transition: background-image var(--Delay-Long) ease, background-color var(--Delay-Long) ease, opacity var(--Delay-Long) ease;
}

/* Main TWebPageControl Component */
#pages {
  top: 0px !important;
  left: 0px !important;
  transition: opacity 1.5s ease;
}
/* Individual TWebTabSheet Components */
.Page {
  opacity: 0;
  top: 0px !important;
  left: 0px !important;
  width: 1280px !important;
  height: 400px !important;
  overflow: hidden;
  transition: opacity var(--Delay-Medium) ease 0.1s;
}



/*  Main Left/Right Page Navigation Components */
.Nav {
  z-index: 100;
  background: black;
  width: 40px;
  height: 300px;
  opacity: 0.25;
  left: 0px;
  transition: left var(--Delay-Long) ease, opacity var(--Delay-Short) ease;
}
.Nav:hover {
  opacity: 0.75;
}
.NavLeft {
  left: -40px;
  clip-path: polygon(0% 0%, 100% 50%, 0 100%);
}
.NavRight {
  left: 1320px;
  clip-path: polygon(100% 0%, 0% 50%, 100% 100%);
}
.NavLeftInner {
  top: 1px !important;
  left: 0px !important;
  width: 38px !important;
  height: 299px !important;
  background: white;
  clip-path: polygon(0% 0%, 100% 50%, 0 100%);
}
.NavRightInner {
  top: 1px !important;
  left: 2px !important;
  width: 38px !important;
  height: 299px !important;
  background: white;
  clip-path: polygon(100% 0%, 0% 50%, 100% 100%);
}


/* Main Buttons */
.MainButton {
  z-index: 100;
  opacity: 0;
  color: white !important;
  padding: 0px !important;
  transition: opacity var(--Delay-Short) ease, left var(--Delay-Long) ease, top var(--Delay-Long) ease;
  filter: drop-shadow(0px 0px 2px black) drop-shadow(0px 0px 2px black);
}
.MainButton:hover {
  color: white !important;
  opacity: 0.75 !important;
}
.MainButton > i,
.MainButton > div {
  position: absolute;
  display: flex;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}
.icon-default {
  transition: opacity var(--Delay-Medium) ease;
}
.icon-alternate {
  opacity: 0;
  transition: opacity var(--Delay-Medium) ease;
}
.icon-third {
  opacity: 0;
  transition: opacity var(--Delay-Medium) ease;
}

/* Title Text */
.Title {
  overflow: visible;
  font-size: 40px;
  padding: 2px 8px 2px 8px;
  color: white;
  filter: drop-shadow(0px 0px 4px royalblue) drop-shadow(0px 0px 4px royalblue);
}
.Title.Status {
  filter: drop-shadow(0px 0px 4px teal) drop-shadow(0px 0px 4px teal);
}
.Title.StatusGood {
  filter: drop-shadow(0px 0px 4px green) drop-shadow(0px 0px 4px green);
}
.Title.StatusBad {
  filter: drop-shadow(0px 0px 4px red) drop-shadow(0px 0px 4px red);
}
.Title.Splash {
  opacity: 0;
  transition: opacity 2.5s ease;
}
.Title.SplashSub {
  opacity: 0;
  font-size: 20px;
  transition: opacity 3.5s ease;
  filter: drop-shadow(0px 0px 4px teal) drop-shadow(0px 0px 4px teal);
}
.Title.SplashEnd {
  opacity: 1;
  font-size: 20px;
  transition: opacity 3.5s ease 1.5s;
  filter: drop-shadow(0px 0px 4px teal) drop-shadow(0px 0px 4px teal);
}

/* Splash Image */
.SplashImage {
  background: url("images/Catheedral-1280X400-Trio-White.png");
  top: 0px !important;
  left: 0px !important;
  width: 1280px !important;
  height: 400px !important;
  opacity: 0.25;
}

/* Configuration Page Styles */
.ConfigEdit {
  font-size: 20px;
  margin: 3px;
  height: 36px !important;
  padding-left: 8px;
  padding-bottom: 5px;
  border-top: 2px solid white !important;
  border-left: 2px solid white !important;
  border-bottom: 2px solid white !important;
  border-right: 2px solid white !important;
  border-radius: 6px;
  background: black;
  color: white;
  overflow-x: hidden !important;
  filter: drop-shadow(0px 0px 2px black) drop-shadow(0px 0px 2px black);
}
.ConfigDropdown > input {
  font-size: 20px;
  margin: 3px;
  padding-left: 8px;
  border: 2px solid white;
  border-radius: 6px;
  background: black;
  color: white;
}
.ConfigList {
  font-size: 20px;
  margin: 3px;
  padding-left: 8px;
  border: 2px solid white;
  border-radius: 6px;
  background: black;
  color: white;
  overflow-x: hidden !important;
  filter: drop-shadow(0px 0px 2px black) drop-shadow(0px 0px 2px black);
  opacity: 0;
  transition: height var(--Delay-Short) ease, opacity var(--Delay-Short) ease;
}
.ConfigList option:checked {
  border-radius: 6px;
}
.ConfigListButton {
  width: 25px !important;
  height: 36px !important;
  padding: 0px !important;
  margin: 3px 0px 0px 8px !importAnt;
  font-size: 22px;
  filter: drop-shadow(0px 0px 2px black) drop-shadow(0px 0px 2px black);
}
.ConfigListButton > i {
  transition: transform var(--Delay-Short) ease;
}
.ConfigButton {
  filter: drop-shadow(0px 0px 2px black) drop-shadow(0px 0px 2px black);
}
.Label {
  overflow: visible;
  font-size: 24px;
  padding: 2px 8px 2px 8px;
  color: white;
  filter: drop-shadow(0px 0px 2px black) drop-shadow(0px 0px 2px black);
}
.Data {
  color: lightblue;
}
.HAData {
  color: lime;
}


/* Help System */
.Help {
  top: 2px !important;
  left: 40px !important;
  width: 1190px !important;
  height: 396px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
.HelpTitle {
  padding: 0px 4px 8px 16px;
  color: white;
  font-size: 30px;
  width: 100%;
  filter: drop-shadow(0px 0px 2px royalblue) drop-shadow(0px 0px 2px royalblue);
  white-space: normal;
}
.HelpBody {
  padding: 0px 4px 8px 16px;
  font-size: 24px;
  line-height: 1.15;
  white-space: normal;
  color: white;
  filter: drop-shadow(0px 0px 2px black) drop-shadow(0px 0px 2px black);
}
.HelpHighlight {
  font-weigth: 700;
  color: royalblue;
}


/* Custom Content URL pages (usually <iframe> elements) */
.CustomPage {
  width: 100%;
  height: 100%;
  background: none;
  overflow: hidden;
}


/* Used for drawing rings on the Home Page */
.Ring {
  z-index: 3;
  opacity: 0.65;
  pointer-events: none;
}
.TxRing {
  filter: var(--TxRingF);
}
.CxRing {
  filter: var(--CxRingF);
}
.WxRing {
  filter: var(--WxRingF);
}
.ExRing {
  filter: var(--ExRingF);
}

/* Want faster (outer?) moving markers to appear on top of slower (inner?) moving circles */
#ringDayMarker { z-index: 4; }
#ringMinutesMarker { z-index: 5; }
#ringSecondsMarker { z-index: 6; }

#ringClimateHumidityMarker { z-index: 4; }
#ringSetPointMarker { z-index: 5; }
#ringClimateTemperatureMarker { z-index: 6; }

#ringWeatherHumidityMarker { z-index: 4; }
#ringWeatherPressureMarker { z-index: 5; }
#ringWeatherTemperatureMarker { z-index: 6; }

#ringEnergyYesterdayMarker { z-index: 4; }
#ringEnergyTodayMarker { z-index: 5; }
#ringEnergyUseMarker { z-index: 6; }


/* Used for displaying various bits of Text on Home Page and elsewhere */
.Text {
  overflow: visible;
  filter: drop-shadow(0px 0px 1px black) drop-shadow(0px 0px 1px black);
}
.TextCover {
  z-index: 15;
}
.TextXS {
  font-size: 12px;
  z-index: 10;
}
.TextSM {
  font-size: 18px;
  z-index: 10;
}
.TextRG {
  font-size: 24px;
  z-index: 11;
}
.TextBG {
  font-size: 26px;
  z-index: 11;
}
.TextLG {
  font-size: 32px;
  font-weight: 700;
  z-index: 12;
}
.TextXL {
  font-size: 48px;
  font-weight: 700;
  z-index: 13;
}

/* Used so we can assign arbitrary colors via CSS classes */
.White {
  color: white;
}
.Grey {
  color: silver;
}
.Gray {
  color: silver;
}
.Yellow {
  color: yellow;
}
.Orange {
  color: darkorange;
}
.Red {
  color: red;
}
.Green {
  color: green;
}
.Blue {
  color: royalblue;
}
.Lime {
  color: lime;
}
.DarkGray {
  color: darkslategray;
}


/* Tabulator settings (Configuration) */
.tabulator {
  font-family: Cairo !important;
  font-size: 20px !important;
  border-radius: 6px;
  border: 2px solid rgba(255,255,255,0.5);
  opacity: 0.9;
  filter: drop-shadow(0px 0px 2px black) drop-shadow(0px 0px 2px black);
  background-color: rgba(64,64,64,0.5)  !important;
}
.tabulator-table {
  background-color: rgba(0,0,0,0) !important;
}
.tabulator-tableholder {
  overflow-y: scroll !important;
  overflow-x: hidden !important;
}
.tabulator-row.tabulator-row-even {
 background-color: rgba(128,128,128,0.2) !important;
}
.tabulator-row.tabulator-row-odd {
  background-color: rgba(64,64,64,0.2) !important;
}
.tabulator-cell {
  filter: drop-shadow(0px 0px 2px black) drop-shadow(0px 0px 2px black);
  border: none !important;
}
.tabulator-row > div:nth-child(1) {
  color: deepskyblue;
}
.tabulator-row > div:nth-child(2) {
  color: white;
}
.tabulator-row > div:nth-child(3) {
  color: deepskyblue;
}
.tabulator-row > div:nth-child(4) {
  color: white;
}
div.tabulator-cell.tabulator-editing {
  border: 2px solid white !important;
  border-radius: 6px;
  background: black;
  color: white !important;
  outline-offset: 0px;
  outline: 1px solid #FF0;
  filter: drop-shadow(0px 0px 2px black) drop-shadow(0px 0px 2px black);
}
.tabulator-edit-list {
  border: 2px solid white;
  border-radius: 6px;
  opacity: 0.9;
  margin-top: -1px;
  background: black;
  min-width: 608px;
  max-width: 608px;
  width: 608px;
  overflow-x: hidden;
  transform: translate(-2px, 0px);
}
.tabulator-edit-list-item {
  color: white !important;
  font-size: 18px;
  height: 28px;
  padding: 0px 4px !important;
}
div.tabulator-row.tabulator-selected {
  background-color: #4169E1B0 !important; /* royal blue @ 75% */
  border-radius: 4px;
}

/* Customize scrollbars */
::-webkit-scrollbar {
  width: 30px;
  height: 30px;
}
::-webkit-scrollbar-corner {
  background-color: #00000040;
}
::-webkit-scrollbar-track {
  background-color: #00000040;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb {
  background-color: #4169E1B0; /* royal blue @ 75% */
  border-radius: 200px;
  border: 3px solid #00000080;
}

/* Lights Page */
.LightButton {
  position: relative;
  font-size: 20px;
  line-height: 1.1;
  white-space: normal;
  width: 140px;
  height: 68px;
  border-radius: 15px;
  filter: drop-shadow(0px 0px 2px black) drop-shadow(0px 0px 2px black);
  background-color: royalblue;
  border: 2px solid royalblue;
  color: white;
  cursor: pointer;
  opacity: 0.6;
}
.LightButtonLabel {
  position: relative;
  font-size: 20px;
  line-height: 1.1;
  white-space: normal;
  width: 320px !important;
  height: 68px;
  border-radius: 15px;
  filter: drop-shadow(0px 0px 2px black) drop-shadow(0px 0px 2px black);
  background-color: royalblue;
  border: 1px solid royalblue;
  color: white;
  cursor: pointer;
  opacity: 1;
}
.LightText {
  display: flex;
  position: absolute;
  white-space: pre-line;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  padding-right: 10px;
  text-align: right;
  justify-content: end;
  align-items: center;
  filter: drop-shadow(0px 0px 1px black);
  pointer-events: none;
  z-index: 2;
}
.LightButton:hover {
  opacity: 1;
}
.LightOn {
  border: 2px solid white;
  color: black;
  background-color: white;
}
.LightOff {
  border: 2px solid darkgray;
  color: white;
  background-color: #101010;
}
.LightOther {
  border: 2px solid darkgray;
  color: white;
  background-color: #101010;
  opacity: 0.25;
}
.LightIcon {
  display: flex;
  position:absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  font-size: 64px;
  opacity: 0.15;
  justify-content: start;
  align-items: center;
  pointer-events: none;
  z-index: 1;
}
.LightBtnIcon {
  display: flex;
  position:absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  font-size: 64px;
  opacity: 0.75;
  justify-content: start;
  align-items: center;
  pointer-events: none;
  z-index: 1;
}
#divAllLights {
  gap: 5px;
  padding-left:5px;
  padding-bottom: 2px;
  overflow-x: hidden;
  overflow-y: auto;
  height: auto !important;
  max-height: 398px;
  transition: opacity var(--Delay-Short) ease;
}

.Popup {
  opacity: 0;
  z-index: 20;
  top: 410px;
  left: 340px !important;
  width: 600px  !important;;
  height: 380px  !important;;
  border: none;
  border-radius: 15px;
  background-color:  #4169E180; /* royal blue @ 50% */
  filter: drop-shadow(0px 0px 2px black) drop-shadow(0px 0px 2px black);
  transition: opacity var(--Delay-Short) ease, top var(--Delay-Short) ease;
}
#divDimmerThumb {
  border-radius: 50%;
  border: 5px solid royalblue;
  background-color: white;
  width: 75px !important;
  height: 75px !important;
  position: absolute;
  top: 190px;
  left: 100px;
  z-index: 21;
  pointer-events: none;
  filter: drop-shadow(0px 0px 2px black) drop-shadow(0px 0px 2px black);
}
#labelDimmerValue {
  font-size: 40px;
  color: white;
  filter: drop-shadow(0px 0px 2px teal) drop-shadow(0px 0px 2px teal);
}
.Swatch {
  border-radius: 12px !important;
  border: none !important;
  filter: drop-shadow(0px 0px 2px black) drop-shadow(0px 0px 2px black);
}


/* Hourly/Daily Weather Panels */
.WxPanel {
  background: rgba(0,0,0,0.5);
  border-radius: 16px !important;
  justify-content: space-between;
  padding-bottom: 10px !important;
}

/* Fancier Fading Foto */
#divPerson1,
#divPerson2,
#divPersonPhoto {
  -webkit-mask-image: radial-gradient(white 50%, rgba(255, 255, 255, 0) 70%);
  mask-image: radial-gradient(white 50%, rgba(255, 255, 255, 0) 70%);
  z-index: 20;
  opacity: 0;
  transition: opacity var(--Delay-Short) ease;
}

#divPersonPhoto {
  pointer-events: none;
}
#divPersonInfo {
  pointer-events: none;
  z-index: 20;
  opacity: 0;
  transition: opacity var(--Delay-Short) ease;
}

#divLocations {
  z-index: 20;
  opacity: 0;
  transition: opacity var(--Delay-Short) ease;
}

#divLocations .tabulator-row > div:nth-child(0) { color: white;}
#divLocations .tabulator-row > div:nth-child(1) { color: royalblue;}
#divLocations .tabulator-row > div:nth-child(2) { color: white;}
#divLocations .tabulator-row > div:nth-child(3) { color: royalblue;}
#divLocations .tabulator-row > div:nth-child(4) { color: white;}

#divLocationMap {
  z-index: 10 !important;
}
.leaflet-control-container {
  position: absolute;
  top: -6px;
  left: 714px;
  z-index: 500 !important;
}
.leaflet-control-attribution {
  position: absolute;
  left: -134px;
  border-radius: 6px;
  top: 377px;
  padding: 2px 8px;
  border: 2px solid rgba(128,128,128,.5);
}

.extra-marker i.fa-solid {
    font-size: 18px;
    margin-top: 10px;
}
.extra-marker i.md-20 {
    font-size: 20px;
    margin-top: 2px;
}

.SceneButton {
  position: relative;
  font-size: 20px;
  line-height: 1.1;
  white-space: normal;
  width: 290px;
  height: 68px;
  border-radius: 15px;
  filter: drop-shadow(0px 0px 2px black) drop-shadow(0px 0px 2px black);
  background-color: royalblue;
  border: 2px solid royalblue;
  color: white;
  cursor: pointer;
  opacity: 0.6;
}
.SceneText {
  display: flex;
  position: absolute;
  white-space: pre-line;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  padding-right: 10px;
  padding-left: 64px;
  text-align: center;
  justify-content: center;
  align-items: center;
  filter: drop-shadow(0px 0px 1px black);
  pointer-events: none;
  z-index: 2;
  font-size: 24px;
}
.SceneButton:hover {
  opacity: 1;
}
.SceneIcon {
  display: flex;
  position:absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  font-size: 64px;
  opacity: 0.5;
  justify-content: start;
  align-items: center;
  pointer-events: none;
  z-index: 1;
}
#divScenes {
  transition: opacity var(--Delay-Short) ease;
}

@keyframes jigglysmall {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(1deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-1deg); }
  100% { transform: rotate(0deg); }
}