Feat/mac (#109)

* chore: upgrade dependencies * feat/mac: draft pipeline * feat/mac: use public folder for transient files * feat/mac: set app fullscreen * feat/mac: cmd + , toggles menu * feat/mac: update readme * refact: easier login process * refact prevent style issues with safari * refact reduce css download * style: cleanup paginator design * style: studio clock is responsive * style: fix spacing style issues with safari
2026-08-17 05:13:32 +00:00 · 2022-04-17 20:30:39 +02:00
parent 20d3ddbc18
commit db0eee3b9c
140 changed files with 10160 additions and 2139 deletions
@@ -0,0 +1,190 @@
+@use './main' as *;
+
+@mixin viewer-container {
+  margin: 0;
+  box-sizing: border-box; /* reset */
+  overflow: hidden;
+  width: 100%; /* restrict the page width to viewport */
+  background: $bg-black;
+  height: 100vh;
+  color: $title-white;
+  font-weight: 300;
+}
+
+@mixin viewer-event-title {
+  font-size: 3vw;
+  font-weight: 600;
+  text-decoration: underline $ontime-pink 0.5vh;
+  padding-top: 0.2vh;
+  padding-left: 1vw;
+}
+
+@mixin viewer-info-messages {
+  font-size: 1.5vw;
+  line-height: 2vw;
+  white-space: pre-line;
+}
+
+////////////////////////////// Specifics
+
+.label {
+  font-size: 1.3vw;
+  color: $ontime-pink;
+}
+
+.infoContainer > div {
+  overflow: hidden;
+}
+
+.nextContainer > div,
+.nowContainer > div {
+  @include ellipsis;
+}
+
+.nowContainer,
+.nextContainer,
+.todayContainer {
+  background-color: $bg-gray-1000;
+  padding: 1vh 2vw;
+  overflow: hidden;
+}
+
+.clockContainer,
+.countdownContainer,
+.publicContainer,
+.publicContainerHidden {
+  background-color: $bg-gray-1000;
+  padding: 1vh 1vw;
+}
+
+.publicContainer {
+  opacity: 1;
+  transition: 0.5s;
+  transition-property: opacity;
+}
+
+.publicContainerHidden {
+  opacity: 0;
+  transition: 0.5s;
+  transition-property: opacity;
+}
+
+.todayContainer,
+.infoContainer {
+  background-color: $bg-gray-1100;
+  padding: 2.5vh 2vw;
+}
+
+.infoContainer,
+.todayContainer,
+.publicContainer,
+.publicContainerHidden {
+  border-radius: 1vw;
+}
+
+.nowContainer,
+.nextContainer {
+  margin-left: -1vw;
+}
+
+.qr {
+  align-self: center;
+  justify-self: center;
+  grid-area: qr;
+}
+
+.clock {
+  font-family: 'Open Sans', sans-serif;
+  font-size: 3vw;
+  line-height: 3vw;
+  text-align: center;
+  letter-spacing: 0.25vw;
+  color: $clocks;
+}
+
+.infoContainer {
+  grid-area: info;
+  display: grid;
+
+  grid-template-rows: 3vh minmax(0, 1fr);
+  grid-template-columns: 3fr 1fr;
+  grid-template-areas:
+    'titl .'
+    'binf qr';
+  gap: 0.5vw;
+}
+
+.infoMessages {
+  grid-area: binf;
+  font-size: 1.5vw;
+  line-height: 2vw;
+  white-space: pre-line;
+}
+
+.clockContainer {
+  grid-area: time;
+  border-radius: 1vw;
+}
+
+.message {
+  font-size: 3vw;
+  line-height: 3vw;
+  padding: 0.5vh 0 0.5vh 1vw;
+}
+
+.todayContainer {
+  margin-top: 3vh;
+  height: 95%;
+
+  .todayHeaderBlock {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 1.5vh;
+
+    .navItem,
+    .navItemSelected {
+      background-color: $bg-gray-700;
+      width: 0.7vw;
+      height: 0.7vw;
+      border-radius: 0.35vw;
+    }
+
+    .navItemSelected {
+      background-color: $bg-gray-100;
+    }
+
+    .nav {
+      align-self: center;
+      justify-content: flex-end;
+      display: flex;
+      margin-bottom: 2.5vh;
+    }
+
+    .nav > div {
+      margin-left: 0.5vw;
+    }
+  }
+}
+
+.infoContainer {
+  display: grid;
+
+  grid-template-rows: 3vh minmax(0, 1fr);
+  grid-template-columns: 3fr 1fr;
+  grid-template-areas:
+    'titl .'
+    'binf qr';
+  gap: 0.5vw;
+
+  .infoMessages {
+    grid-area: binf;
+    font-size: 1.5vw;
+    line-height: 2vw;
+    white-space: pre-line;
+  }
+
+  .clockContainer {
+    grid-area: time;
+    border-radius: 1vw;
+  }
+}