PIP + style consistency

small style changes to make screens consistent
2026-08-17 05:13:32 +00:00 · 2021-04-27 22:29:14 +02:00
parent 8834b9933d
commit 5115581098
10 changed files with 275 additions and 26 deletions
@@ -0,0 +1,137 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;800&display=swap');
+
+.container__gray,
+.container__grayFinished {
+  margin: 0;
+  box-sizing: border-box; /* reset */
+  overflow: hidden;
+  width: 100%; /* restrict the page width to viewport */
+
+  background: linear-gradient(90deg, #252525 0%, #121212 100%);
+  height: 100vh;
+  color: #fffd;
+  font-weight: 300;
+  display: grid;
+  grid-template-columns: 20vw 20vw 18vw 3vw 1fr;
+  grid-template-rows: 60vh 1fr 1fr 1fr;
+  grid-template-areas:
+    ' pip  pip  pip  . schd'
+    ' titl titl titl . schd'
+    ' info info clck . schd'
+    ' info info time . schd';
+  gap: 1vw;
+  padding: 1vw;
+}
+
+.label {
+  font-size: 1.3vw;
+  color: #ff7597;
+}
+
+.eventTitle {
+  grid-area: titl;
+  font-size: 3vw;
+  font-weight: 600;
+  text-decoration: underline #ff7597 0.5vh;
+  padding-top: 0.2vh;
+  padding-left: 1vw;
+}
+
+.pip {
+  grid-area: pip;
+  background-color: rgba(0, 0, 0, 0.5);
+  border: 1px solid rgba(255, 255, 2555, 0.07);
+  width: 100%;
+  text-align: center;
+  display: grid;
+  place-content: center;
+}
+
+.empty {
+  opacity: 0.5;
+}
+
+.piptext {
+  color: rgba(255, 255, 255, 0.13);
+  font-weight: 600;
+  font-size: 4vh;
+}
+
+
+/* =================== TITLES ===================*/
+
+.infoContainer > div {
+  overflow: hidden;
+}
+
+.infoContainer,
+.clockContainer,
+.countdownContainer {
+  background-color: rgba(255, 255, 255, 0.05);
+  padding: 1vh 1vw;
+}
+
+.todayContainer {
+  background-color: rgba(255, 255, 255, 0.07);
+  padding: 2.5vh 2vw;
+}
+
+.infoContainer,
+.todayContainer {
+  border-radius: 1vw;
+}
+
+.infoContainer {
+  grid-area: info;
+  display: grid;
+
+  grid-template-rows: 3vh minmax(0, 1fr);
+  grid-template-columns: 3fr 1fr;
+  grid-template-areas:
+    'titl qr'
+    'binf qr';
+  gap: 0.5vw;
+}
+
+.infoMessages {
+  grid-area: binf;
+  font-size: 1.5vw;
+  line-height: 2vw;
+  white-space: pre-line;
+}
+
+.qr {
+  align-self: center;
+  justify-self: center;
+  grid-area: qr;
+}
+
+/* =================== SCHEDULE ===================*/
+
+.todayContainer {
+  grid-area: schd;
+  display: grid;
+  grid-template-rows: 5vh 1fr 3vh;
+  height: 100%;
+}
+
+/* =================== MAIN ===================*/
+
+.clockContainer {
+  grid-area: time;
+  border-radius: 0 0 1vw 1vw;
+}
+
+.countdownContainer {
+  grid-area: clck;
+  border-radius: 1vw 1vw 0 0;
+}
+
+.clock {
+  font-family: 'Open Sans', sans-serif;
+  font-size: 3vw;
+  line-height: 3vw;
+  text-align: center;
+  letter-spacing: 0.25vw;
+  color: #ddd;
+}