update casing for some components

src/components/nowPlayingBar/nowPlayingBar.css

@@ -0,0 +1,171 @@
+.nowPlayingBarInfoContainer {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    width: 40%;
+    overflow: hidden;
+}
+
+/* Now playing bar */
+.nowPlayingBar {
+    /* Above everything, except for the video player and popup overlays */
+    text-align: center;
+    will-change: transform;
+    contain: layout style;
+    transition: transform 200ms ease-out;
+}
+
+.nowPlayingBar-hidden {
+    transform: translate3d(0, 100%, 0);
+}
+
+.nowPlayingBarTop {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 4.2em;
+    position: relative;
+    justify-content: center;
+}
+
+.mediaButton,
+.nowPlayingBarUserDataButtons .btnUserItemRating {
+    vertical-align: middle;
+    margin: 0;
+    text-align: center;
+}
+
+.mediaButton {
+    font-size: 120%;
+}
+
+.nowPlayingBar .nowPlayingImage {
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: contain;
+    height: 70%;
+    width: 4.2em;
+    flex-shrink: 0;
+}
+
+.nowPlayingBarText {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+    text-align: left;
+    flex-grow: 1;
+    font-size: 92%;
+    margin-right: 2.4em;
+    margin-left: 1em;
+}
+
+.nowPlayingBarCenter {
+    vertical-align: middle;
+    text-align: center;
+
+    /* Need this to make sure it's on top of nowPlayingBarPositionContainer so that buttons are fully clickable */
+    z-index: 2;
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+}
+
+.nowPlayingBarPositionContainer {
+    position: absolute !important;
+    left: 0;
+    top: -0.56em;
+    right: 0;
+    z-index: 1;
+}
+
+.headroom--unpinned .nowPlayingBarPositionContainer {
+    display: none;
+}
+
+.noMediaProgress .nowPlayingBarPositionContainer {
+    display: none;
+}
+
+.nowPlayingBarRight {
+    position: relative;
+    margin: 0 0.5em 0 auto;
+
+    /* Need this to make sure it's on top of nowPlayingBarPositionContainer so that buttons are fully clickable */
+    z-index: 2;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    flex-shrink: 0;
+}
+
+.nowPlayingBarCurrentTime {
+    vertical-align: middle;
+    text-align: center;
+    display: inline-block;
+    padding-left: 1.5em;
+}
+
+.nowPlayingBarVolumeSliderContainer {
+    margin-right: 2em;
+}
+
+.nowPlayingBarUserDataButtons {
+    display: inline-block;
+    margin-left: 1em;
+    margin-right: 1em;
+}
+
+.nowPlayingBarPositionSlider::-webkit-slider-thumb {
+    width: 1.2em !important;
+    height: 1.2em !important;
+}
+
+@media all and (max-width: 70em) {
+    .nowPlayingBarRight .nowPlayingBarUserDataButtons {
+        display: none;
+    }
+}
+
+@media all and (max-width: 66em) {
+    .toggleRepeatButton {
+        display: none !important;
+    }
+}
+
+@media all and (max-width: 62em) {
+    .nowPlayingBarCenter .nowPlayingBarCurrentTime {
+        display: none !important;
+    }
+}
+
+@media all and (max-width: 56em) {
+    .nowPlayingBarCenter {
+        display: none !important;
+    }
+}
+
+@media all and (min-width: 56em) {
+    .nowPlayingBarRight .playPauseButton {
+        display: none;
+    }
+}
+
+@media all and (max-width: 36em) {
+    .nowPlayingBarRight .nowPlayingBarVolumeSliderContainer {
+        display: none !important;
+    }
+
+    .nowPlayingBarInfoContainer {
+        width: 70%;
+    }
+}
+
+@media all and (max-width: 24em) {
+    .nowPlayingBar .muteButton,
+    .nowPlayingBar .unmuteButton {
+        display: none;
+    }
+}