diff --git a/client/assets/css/ChanStrip.css b/client/assets/css/ChanStrip.css index 6dda62f1..3048f67e 100644 --- a/client/assets/css/ChanStrip.css +++ b/client/assets/css/ChanStrip.css @@ -133,6 +133,9 @@ margin-top: 5px; border-radius: 7px; } +.input-buttons > .input-select.active { + background-color: #2f475b; +} .parameters > .monitor-sends { list-style-type: none; diff --git a/client/assets/css/Channel.css b/client/assets/css/Channel.css index e359b35a..4696d782 100644 --- a/client/assets/css/Channel.css +++ b/client/assets/css/Channel.css @@ -183,6 +183,9 @@ border-radius: 7px; border-color: rgba(99, 99, 99, 0.301); } +.channel-strip-button.active { + background-color: #2f475b; +} .channel-volume-fader { width: 10px; diff --git a/client/assets/css/Channels.css b/client/assets/css/Channels.css index 0d05a6b2..51604b87 100644 --- a/client/assets/css/Channels.css +++ b/client/assets/css/Channels.css @@ -23,7 +23,13 @@ width: 100px; min-height: 950px; color: white; - background: linear-gradient(#2f2f2f 0px,#2f2f2f 790px, rgb(0, 0, 0) 1px, #2f2f2f 800px, #2f2f2f 100%); + background: linear-gradient( + #2f2f2f 0px, + #2f2f2f 790px, + rgb(0, 0, 0) 1px, + #2f2f2f 800px, + #2f2f2f 100% + ); margin: 4px; border-radius: 9px; border-color: rgb(80, 80, 80); @@ -32,8 +38,8 @@ } .channels-show-mixer-online { - outline : none; - -moz-outline : none; + outline: none; + -moz-outline: none; color: rgb(255, 255, 255); height: 60px; width: 90px; @@ -51,8 +57,8 @@ } .channels-show-snaps-button { - outline : none; - -moz-outline : none; + outline: none; + -moz-outline: none; color: white; height: 60px; width: 90px; @@ -64,10 +70,9 @@ border-radius: 7px; } - .channels-show-settings-button { - outline : none; - -moz-outline : none; + outline: none; + -moz-outline: none; color: white; height: 60px; width: 90px; @@ -78,11 +83,13 @@ margin-top: 10px; border-radius: 7px; } - +.channels-show-settings-button.active { + background-color: #2f475b; +} .channels-show-storage-button { - outline : none; - -moz-outline : none; + outline: none; + -moz-outline: none; color: white; height: 60px; width: 90px; @@ -94,10 +101,9 @@ border-radius: 7px; } - .channels-mix-button { - outline : none; - -moz-outline : none; + outline: none; + -moz-outline: none; color: white; height: 90px; width: 90px; @@ -109,10 +115,9 @@ border-radius: 7px; } - .channels-clear-button { - outline : none; - -moz-outline : none; + outline: none; + -moz-outline: none; color: white; height: 90px; width: 90px; @@ -134,8 +139,8 @@ } .channels-snap-mix-button { - outline : none; - -moz-outline : none; + outline: none; + -moz-outline: none; background-color: rgb(199, 202, 0); color: rgb(44, 44, 44); margin-left: 20px; diff --git a/client/components/ChanStrip.tsx b/client/components/ChanStrip.tsx index a325954d..bed21478 100644 --- a/client/components/ChanStrip.tsx +++ b/client/components/ChanStrip.tsx @@ -148,9 +148,11 @@ class ChanStrip extends React.PureComponent< } inputSelectorButton(index: number) { + const isActive = + this.props.fader[this.props.faderIndex].inputSelector === index + 1 return (