style: go dark

client/src/features/viewers/backstage/StageManager.jsx

@@ -74,7 +74,11 @@ export default function StageManager() {
           <div className={style.info}>Have a nice day</div>
         </div>
         <div className={style.qr}>
-          <QRCode value='www.carlosvalente.com' size={180} level='L' />
+          <QRCode
+            value='www.carlosvalente.com'
+            size={window.innerWidth / 10}
+            level='L'
+          />
         </div>
       </div>
     </div>

client/src/features/viewers/backstage/StageManager.module.css

@@ -1,13 +1,12 @@
 .container__gray,
 .container__grayFinished {
   background: linear-gradient(90deg, #252525 0%, #121212 100%);
-  height: 100%;
+  height: 100vh;
   color: #fffd;
-  font-size: 16px;
   font-weight: 300;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 3vw 2fr 1vw;
-  grid-template-rows: 5em 1fr 1fr 1fr 1fr 1fr;
+  grid-template-rows: 5vh 1fr 1fr 1fr 1fr 1fr;
   grid-template-areas:
     ' titl titl titl . schd .'
     ' titl titl titl . schd .'
@@ -15,7 +14,7 @@
     ' next next .... . schd .'
     ' .... .... .... . info .'
     ' time clck pres . info .';
-  gap: 1em;
+  gap: 1vw;
 }
 
 .label {
@@ -27,8 +26,8 @@
   grid-area: titl;
   font-size: 5vw;
   font-weight: 600;
-  padding-top: 0.1em;
-  padding-left: 0.5em;
+  padding-top: 0.2vh;
+  padding-left: 2vw;
 }
 
 /* =================== TITLES ===================*/
@@ -39,29 +38,29 @@
 .clockContainer,
 .countdownContainer {
   background-color: rgba(255, 255, 255, 0.05);
-  padding: 1em 2.5em;
+  padding: 1vh 2vw;
 }
 
 .todayContainer,
 .infoContainer {
   background-color: rgba(255, 255, 255, 0.07);
-  padding: 1.5em 2.5em;
+  padding: 2.5vh 2vw;
 }
 
 .infoContainer,
 .todayContainer {
-  border-radius: 1em;
+  border-radius: 1vw;
 }
 
 .nowContainer {
   background-color: rgba(255, 255, 255, 0.09);
 
   grid-area: now;
-  border-radius: 0 2em 2em 0;
+  border-radius: 0 2vw 2vw 0;
 }
 .nextContainer {
   grid-area: next;
-  border-radius: 0 2em 2em 0;
+  border-radius: 0 2vw 2vw 0;
 }
 
 .nowTitle,
@@ -101,7 +100,7 @@
 .todayContainer {
   grid-area: schd;
   display: grid;
-  grid-template-rows: 3em 1fr 2em;
+  grid-template-rows: 5vh 1fr 3vh;
   margin-top: 3vh;
   height: 95%;
 }
@@ -109,30 +108,37 @@
 .entries {
   display: flex;
   flex-direction: column;
-  gap: 0.8em;
+  gap: 1.5vh;
 }
 
 .navItem,
 .navItemSelected {
   background-color: rgba(255, 255, 255, 0.39);
-  width: 16px;
-  height: 16px;
-  border-radius: 10px;
+  width: 1vw;
+  height: 1vw;
+  border-radius: 1vw;
 }
 
 .navItemSelected {
   background-color: rgba(255, 255, 255, 0.79);
 }
 
+.entryStart,
+.entryEnd {
+font-size: 1.5vw;
+}
+
+.entryTitle {
+  align-self: center;
+}
 .entryPast,
 .entryNow,
 .entryFuture {
   background-color: rgba(255, 255, 255, 0.03);
   display: flex;
-  gap: 1em;
+  gap: 1.5vw;
   font-size: 1.3vw;
-  padding: 0.2em 1em;
-  border-radius: 8px;
+  padding: 0.2vh 1vw;
 }
 
 .entryPast {
@@ -144,8 +150,9 @@
 .entryNow {
   font-size: 1.3vw;
   color: #fff;
-  line-height: 3em;
+  line-height: 7vh;
   background-color: rgba(255, 255, 255, 0.09);
+  border-bottom: 3px solid #ff7597aa;
 }
 
 /* =================== OVERLAY ===================*/
@@ -167,7 +174,7 @@
 
 .infoMessages {
   grid-area: info;
-  font-size: 2em;
+  font-size: 1.5vw;
 }
 
 .qr {
@@ -181,19 +188,19 @@
 .clockContainer {
   grid-area: time;
   margin-bottom: 2vh;
-  border-radius: 1em 0em 0em 1em;
+  border-radius: 1vw 0 0 1vw;
 }
 
 .countdownContainer {
   grid-area: clck;
   margin-bottom: 2vh;
-  border-radius: 0em 1em 1em 0em;
+  border-radius: 0 1vw 1vw 0;
 }
 
 .clock {
   font-size: 3vw;
   text-align: center;
-  letter-spacing: 0.1em;
+  letter-spacing: 0.25vw;
   color: #ddd;
 }
 
@@ -201,6 +208,6 @@
   align-self: center;
   justify-self: flex-end;
   display: flex;
-  gap: 1em;
+  gap: 1vw;
   margin-bottom: auto;
 }

client/src/features/viewers/presenter/PresenterSimple.jsx

@@ -2,17 +2,17 @@ import style from './PresenterView.module.css';
 
 export default function PresenterSimple() {
   return (
-    <div className={style.container__gray}>
-
+    <div className={style.container__graySimple}>
       {/* <div className={style.messageOverlayActive}>
         <div className={style.message}>Remember to smile</div>
       </div> */}
 
-      <div className={style.mainContainer}>
+      <div className={style.timerContainer}>
         <div className={style.countdownBig}>01:03</div>
-        <div className={style.progress}>
-          <div className={style.progressed}></div>
-        </div>
+      </div>
+
+      <div className={style.progress}>
+        <div className={style.progressed}></div>
       </div>
 
       {/* <div className={style.mainContainer}>

client/src/features/viewers/presenter/PresenterView.jsx

@@ -21,15 +21,13 @@ export default function PresenterView() {
         <div className={style.message}>Remember to smile</div>
       </div> */}
 
-      <div className={style.mainContainer}>
+      <div className={style.timerContainer}>
         <div className={style.countdown}>01:03</div>
-        <div className={style.progress}>
-          <div className={style.progressed}></div>
-        </div>
+        {/* <div className={style.finished}>TIME UP</div> */}
       </div>
 
-      <div className={style.mainContainer}>
-        <div className={style.finished}>TIME UP</div>
+      <div className={style.progress}>
+        <div className={style.progressed}></div>
       </div>
 
       <div className={style.clockContainer}>

client/src/features/viewers/presenter/PresenterView.module.css

@@ -3,12 +3,33 @@
   background: radial-gradient(circle, #202020 0%, #121212 80%);
   height: 100vh;
   color: #fffd;
-  font-size: 16px;
-  padding: 1em;
+  display: grid;
+  grid-template-columns: 1fr 1fr 5vw 1fr 1fr;
+  grid-template-rows: auto 1fr auto auto;
+  grid-template-areas:
+    ' clck .... .... .... ....'
+    ' timr timr timr timr timr'
+    ' prog prog prog prog prog'
+    ' now  now  .... next next';
+  gap: 1vw;
+}
+.container__graySimple,
+.container__grayFinishedSimple {
+  background: radial-gradient(circle, #202020 0%, #121212 80%);
+  height: 100vh;
+  color: #fffd;
+  display: grid;
+  grid-template-columns: 1fr 1fr 5vw 1fr 1fr;
+  grid-template-rows: auto 1fr 30vh;
+  grid-template-areas:
+    ' clck .... .... .... ....'
+    ' timr timr timr timr timr'
+    ' prog prog prog prog prog';
+  gap: 1vw;
 }
 
 .label {
-  font-size: 1.5vw;
+  font-size: 1.3vw;
   color: #ff7597;
 }
 /* =================== TITLES ===================*/
@@ -16,30 +37,26 @@
 .nowContainer,
 .nextContainer {
   background-color: rgba(255, 255, 255, 0.05);
-  padding: 1em 3em;
-  border-radius: 4px;
-  width: 40vw;
+  padding: 1vh 2vw;
+  border-radius: 1vw;
 }
 
 .nowContainer {
-  position: absolute;
-  bottom: 1em;
-  left: 1em;
+  grid-area: now;
 }
 .nextContainer {
-  position: absolute;
-  bottom: 1em;
-  left: calc(50% + 1em);
+  grid-area: next;
 }
 
 .title {
   color: #ddd;
   font-size: 2.5vw;
 }
+
 .subtitle,
 .presenter {
   color: #aaa;
-  font-size: 1.8vw;
+  font-size: 2vw;
 }
 
 .title:after,
@@ -50,49 +67,12 @@
 
 /* =================== MAIN ===================*/
 
-.mainContainer,
-.mainContainerFinished {
-  margin: auto;
-  width: 100%;
-  text-align: center;
-  position: absolute;
-  top: 40%;
-  left: 50%;
+.timerContainer,
+.timerContainerFinished {
+  grid-area: timr;
+  justify-self: center;
+  align-self: center;
   color: white;
-  transform: translate(-50%, -50%);
-  -ms-transform: translate(-50%, -50%);
-}
-
-.countdown,
-.countdownBig {
-  line-height: 1em;
-  letter-spacing: 0.1em;
-}
-
-.countdown {
-  font-size: 25vw;
-}
-
-.countdownBig {
-  padding-top: 10vh;
-  font-size: 30vw;
-}
-
-.progress {
-  width: 80%;
-  margin: auto;
-  height: 1em;
-  background-color: #333;
-}
-
-.progressed {
-  width: 30%;
-  height: 1em;
-  background-color: #ddd;
-}
-
-.container__grayFinished {
-  border: 1em solid #ff5353;
 }
 
 .finished {
@@ -101,6 +81,41 @@
   color: #ff5353;
 }
 
+.countdown,
+.countdownBig {
+  letter-spacing: 4vw;
+}
+
+.countdown {
+  font-size: 23vw;
+  line-height: 23vw;
+}
+
+.countdownBig {
+  font-size: 30vw;
+  line-height: 30vw;
+}
+
+.progress {
+  grid-area: prog;
+  width: 80%;
+  margin: 0 auto;
+  height: 2vh;
+  background-color: rgba(255, 255, 255, 0.13);
+  border-radius: 4px;
+}
+
+.progressed {
+  width: 30%;
+  height: 2vh;
+  background-color: rgba(255, 255, 255, 0.79);
+  border-radius: 4px;
+}
+
+.container__grayFinished {
+  border: 1vw solid #ff5353;
+}
+
 /* =================== OVERLAY ===================*/
 
 .messageOverlay,
@@ -129,7 +144,7 @@
   transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   font-size: 15vw;
-  line-height: 1.1em;
+  line-height: 30vh;
   text-align: center;
   font-weight: 600;
 }
@@ -137,13 +152,12 @@
 /* =================== MAIN ===================*/
 
 .clockContainer {
-  position: absolute;
-  top: 2em;
-  left: 2em;
+  grid-area: clck;
+  padding: 1vh 2vw;
 }
 
 .clock {
   font-size: 4vw;
-  letter-spacing: 0.1em;
+  letter-spacing: 0.4vw;
   color: #ddd;
 }