diff --git a/client/src/features/viewers/backstage/Paginator.module.css b/client/src/features/viewers/backstage/Paginator.module.css index 9a23ae659..de283765e 100644 --- a/client/src/features/viewers/backstage/Paginator.module.css +++ b/client/src/features/viewers/backstage/Paginator.module.css @@ -1,7 +1,8 @@ +@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;800&display=swap'); + .entries { display: flex; flex-direction: column; - gap: 1.5vh; } .navItem, @@ -20,5 +21,47 @@ align-self: center; justify-content: flex-end; display: flex; - gap: 1vw; + margin-bottom: 2.5vh; +} + +.nav > div { + margin-left: 0.5vw; +} + +.entryStart, +.entryEnd { + font-family: 'Open Sans', sans-serif; + min-width: 5vw; + opacity: 0.9; +} + +.entryTitle { + align-self: center; +} + +.entryPast, +.entryNow, +.entryFuture { + background-color: rgba(255, 255, 255, 0.03); + display: flex; + font-size: 1.3vw; + padding: 0.2vh 1vw; + margin-bottom: 1.5vh; +} + +.entryPast { + color: #aaa; + font-size: 1.2vw; +} + +.entryFuture { + color: #ddd; +} + +.entryNow { + color: #fff; + line-height: 5vh; + background-color: rgba(255, 255, 255, 0.09); + border-bottom: 0.5vh solid #ff7597aa; + margin-left: -0.5vw; } diff --git a/client/src/features/viewers/backstage/StageManager.module.css b/client/src/features/viewers/backstage/StageManager.module.css index 93e18faa7..f836c4b3b 100644 --- a/client/src/features/viewers/backstage/StageManager.module.css +++ b/client/src/features/viewers/backstage/StageManager.module.css @@ -42,7 +42,7 @@ /* =================== TITLES ===================*/ .infoContainer > div { - overflow:hidden; + overflow: hidden; } .nextContainer > div, @@ -164,44 +164,6 @@ height: 95%; } - -.entryStart, -.entryEnd { - font-size: 1.5vw; - min-width: 3.5vw; -} - - -.entryTitle { - align-self: center; -} -.entryPast, -.entryNow, -.entryFuture { - background-color: rgba(255, 255, 255, 0.03); - display: flex; - gap: 1.5vw; - font-size: 1.3vw; - padding: 0.2vh 1vw; -} - -.entryPast { - color: #aaa; - font-size: 1.2vw; -} - -.entryFuture { - color: #ddd; -} -.entryNow { - font-size: 1.3vw; - color: #fff; - line-height: 4vh; - background-color: rgba(255, 255, 255, 0.09); - border-bottom: 0.5vh solid #ff7597aa; - margin-left: -0.5vw; -} - /* =================== OVERLAY ===================*/ .message { diff --git a/client/src/features/viewers/backstage/TodayItem.jsx b/client/src/features/viewers/backstage/TodayItem.jsx index 939a11ce5..f8b2b59ba 100644 --- a/client/src/features/viewers/backstage/TodayItem.jsx +++ b/client/src/features/viewers/backstage/TodayItem.jsx @@ -1,5 +1,5 @@ import { stringFromMillis } from '../../../common/dateConfig'; -import style from './StageManager.module.css'; +import style from './Paginator.module.css'; export default function TodayItem(props) { const { selected, timeStart, timeEnd, title } = props; diff --git a/client/src/features/viewers/lower/Lower.module.css b/client/src/features/viewers/lower/Lower.module.css index bf74b9402..8cc77c631 100644 --- a/client/src/features/viewers/lower/Lower.module.css +++ b/client/src/features/viewers/lower/Lower.module.css @@ -18,7 +18,6 @@ display: flex; flex-direction: column; width: 45vw; - gap: 3vh; border-radius: 0 1vh 1vh 0; } @@ -42,6 +41,7 @@ .titleContainer, .subtitleContainer { + margin-bottom: 1vh; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;