e-inkdashboardextended/public/common.css

E-InkDashboardExtended is a signalK dashboard aimed at devices with e-ink screen. This application is based on the work of Vladimir Kalachikhin.

body {
  --out-width: 78vmin; /* * 1% of the viewport's smaller dimension */
  --font-size: calc(
    var(--out-width) / 9
  ); /* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries */
  --small-font-size: calc(
    var(--font-size) * 0.7
  ); /* If you say EM, then the value will be the value, and not the value calculated at this moment.Therefore, it is calculated*/
  --ltl-font-size: calc(var(--font-size) * 0.4);
  --ltl1-font-size: calc(var(--font-size) * 0.3);
  --pico-font-size: calc(var(--font-size) * 0.2);

  display: grid;
  grid-template-columns: 5% 30% 30% 30% 5%; /* This is the percentage of the available Body width */

  /* For some reason, if you specify % in the extreme lines, then the space disappears,
	If there is no object.And if you indicate the number, it remains.
	In addition, 1FR works as written in the specification, only in Firefox, and in Chrome and Opera
	The height of the line does not change.
	*/
  grid-template-rows: calc(100vh * 0.055) 30% 30% 30% calc(100vh * 0.055) calc(
      100vh * 0.045
    );
  /*grid-template-rows: calc(100vh*0.045) 1fr 1fr 1fr calc(100vh*0.045);*/

  /* And this is a percentage of compass calculated, although they should coincide with the height of the landscape screen. */
  /*grid-template-rows: calc(var(--out-width)*0.05) calc(var(--out-width)*0.3) calc(var(--out-width)*0.3) calc(var(--out-width)*0.3) calc(var(--out-width)*0.05);*/

  font-size: var(--font-size);
  font-family: "Lucida Console";
}
/* Data blocks*/

#leftTopBlock {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
  font-size: calc(var(--font-size) * 1.4);
  text-align: left;
  line-height: 0.7;
  height: fit-content;
  /*align-self: start;	This is a silent meaning */
  margin-top: 0.1em;

  /*border:solid green;*/
}
.leftTopBlockBig {
  grid-column-end: 4 !important;
  grid-row-end: 4 !important;
  /*font-size: calc(var(--font-size)*2.8) !important;*/
  font-size: 3em !important;

  /*border:solid green;*/
}
#rightTopBlock {
  grid-column-start: 4;
  grid-column-end: 6;
  grid-row-start: 1;
  grid-row-end: 3;
  /*font-size: var(--font-size);*/
  font-size: calc(var(--font-size) * 1.4);
  text-align: right;
  line-height: 0.7;
  height: fit-content;
  /*align-self: start;	This is a silent meaning */
  margin-top: 0.1em;

  /*border:solid green;*/
}
.rightTopBlockBig {
  grid-column-start: 3 !important;
  grid-row-end: 4 !important;
  font-size: 3em !important;

  /*border:solid green;*/
}

#leftBottomBlock {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 4;
  grid-row-end: 6;
  font-size: calc(var(--font-size) * 1.4);
  text-align: left;
  display: inherit;
  line-height: 0.7;
  height: fit-content;
  align-self: end;
  margin-bottom: 0.1em;

  /*border:solid green;*/
}
.leftBottomBlockBig {
  grid-column-end: 4 !important;
  grid-row-start: 3 !important;
  font-size: 3em !important;

  /*border:solid green;*/
}
#rightBottomBlock {
  grid-column-start: 4;
  grid-column-end: 6;
  grid-row-start: 4;
  grid-row-end: 6;
  font-size: calc(var(--font-size) * 1.4);
  text-align: right;
  display: inherit;
  line-height: 0.7;
  height: fit-content;
  align-self: end;
  margin-bottom: 0.1em;

  /*border:solid green;*/
}
.rightBottomBlockBig {
  grid-column-start: 3 !important;
  grid-column-end: 6;
  grid-row-start: 3 !important;
  grid-row-end: 5;
  font-size: 3em !important;
  /*border:solid green;*/
}

.rightBottomFrameBlinker {
  padding: 0 0.05em 0.05em 0;
  border-width: 0 0.1em 0.1em 0;
  border-style: none solid solid none;
  animation: frameblinker 3s step-start infinite;
}
.leftBottomFrameBlinker {
  padding: 0 0 0.05em 0.05em;
  border-width: 0 0 0.1em 0.1em;
  border-style: none none solid solid;
  animation: frameblinker 3s step-start infinite;
}
@keyframes frameblinker {
  50% {
    border-color: white;
  }
}

/* Compass styles */
#compass {
  --center-icon-size: calc(var(--out-width) / 10);

  /*border: solid red;*/

  position: relative;
  container-type: inline-size; /*  */
  width: var(--out-width);
  height: var(--out-width);
  grid-column-start: 2;
  grid-column-end: 5;
  grid-row-start: 2;
  grid-row-end: 5;
  margin: auto;
}
/* Styles of the compass cartoon */
.compass-card {
  border: solid black;
  container-type: inline-size;
  width: var(--out-width);
  height: var(--out-width);
  border-radius: 50%;
  font-family: MonoSpace;
}
.compas-face-scale {
  position: static !important;
  height: fit-content !important;
  width: auto !important;
  font-size: var(--pico-font-size);
}
.compass-face div {
  position: absolute;

  height: calc(var(--out-width) / 2);
  width: calc(
    var(--font-size) * 2
  ); /* Three symbol widths: (--font-size * 2 / 3) * 3 */
  top: 0; /*Since the height is equal to the radius, the bottom of the "knitting needle" will be in the center of the circle .compass*/
  left: calc(
    var(--out-width) / 2 - var(--font-size)
  ); /*width - 1/2 width of the line*/
  text-align: center;
  transform-origin: bottom center; /* regarding what to rotate */
}

.charN {
}
.charNNE {
  font-size: var(--ltl-font-size);
  transform: rotate(22.5deg);
}
.charNE {
  font-size: var(--small-font-size);
  transform: rotate(45deg);
}
.charENE {
  font-size: var(--ltl-font-size);
  transform: rotate(67.5deg);
}
.charE {
  transform: rotate(90deg);
}
.charESE {
  font-size: var(--ltl-font-size);
  transform: rotate(112.5deg);
}
.charSE {
  font-size: var(--small-font-size);
  transform: rotate(135deg);
}
.charSSE {
  font-size: var(--ltl-font-size);
  transform: rotate(157.5deg);
}
.charS {
  transform: rotate(180deg);
}
.charSSW {
  font-size: var(--ltl-font-size);
  transform: rotate(202.5deg);
}
.charSW {
  font-size: var(--small-font-size);
  transform: rotate(225deg);
}
.charWSW {
  font-size: var(--ltl-font-size);
  transform: rotate(247.5deg);
}
.charW {
  transform: rotate(270deg);
}
.charWNW {
  font-size: var(--ltl-font-size);
  transform: rotate(292.5deg);
}
.charNW {
  font-size: var(--small-font-size);
  transform: rotate(315deg);
}
.charNNW {
  font-size: var(--ltl-font-size);
  transform: rotate(337.5deg);
}

#center_marc_streak {
  height: var(--out-width);
  width: auto;

  position: absolute;
  top: 2px;
  left: 50%;
  transform-origin: center;
}

#center_marc_static {
  height: var(--out-width);
  width: auto;

  position: absolute;
  top: 0px;
  left: 50%;
  transform-origin: center;
  transform: translate(-25%, 0%);
}

#max_upwind_angle_streak_l {
  height: var(--out-width);
  width: auto;

  position: absolute;
  top: 2px;
  left: calc(var(--out-width) / 2);
  transform: translate(-25%, 0%) rotate(30deg);
}

#max_upwind_angle_streak_r {
  height: var(--out-width);
  width: auto;

  position: absolute;
  top: 2px;
  left: calc(var(--out-width) / 2);
  transform: translate(-25%, 0%) rotate(-30deg);
}

#max_downwind_angle_streak_l {
  height: var(--out-width);
  width: auto;

  position: absolute;
  top: 2px;
  left: calc(var(--out-width) / 2);
  transform: translate(-25%, 0%) rotate(160deg);
}

#max_downwind_angle_streak_r {
  height: var(--out-width);
  width: auto;

  position: absolute;
  top: 2px;
  left: calc(var(--out-width) / 2);
  transform: translate(-25%, 0%) rotate(-160deg);
}

/* Central picture */
#center_icon {
  height: var(--center-icon-size);
  width: var(--center-icon-size);

  position: absolute;
  top: calc(var(--out-width) / 2 - var(--center-icon-size) / 2);
  left: calc(var(--out-width) / 2 - var(--center-icon-size) / 2);
}

#windSVGimage_container {
  position: absolute;
  top: 2px;
  left: calc(var(--out-width) / 2);
  transform: translate(-50%);
}

#windSVGimage {
  height: var(--out-width);
  width: auto;
}

.blink {
  animation: blinker 1s step-start infinite;
}
@keyframes blinker {
  50% {
    opacity: 0;
  }
}

.opa {
  opacity: 25%;
}