reverting lights to the initial state when pausing music, adding a new slider to control the brightness on/off beat
This commit is contained in:
Egor
parent
685e788e31
commit
e019b58ca2
17 changed files with 156 additions and 66 deletions
|
|
@ -189,6 +189,7 @@ export default Component.extend({
|
|||
intro: 'These are the settings for the music tab:<br>' +
|
||||
'<b>Sensitivity</b> - The sensitivity of the beat detector ( more sensitivity results in more registered beats )<br>' +
|
||||
'<b>Hue Range</b> - The hue range that the lights may change to on beat.<br>' +
|
||||
'<b>Brightness Range</b> - The minimum ( off-beat ) and maximum ( on-beat ) brightness of the lights.<br>' +
|
||||
'<b>Flashing Transitions</b> - Quickly flash the lights on beat<br>' +
|
||||
'<b>Colorloop</b> - Slowly cycle the lights through all the colors while the music is playing<br>' +
|
||||
'<i><b>TIP</b>: Your sensitivity settings are saved per song as indicated by the red star icon in the top left corner. These settings they will be restored if you ever listen to the same song again.</i>',
|
||||
|
|
|
|||
|
|
@ -106,6 +106,7 @@ export default Component.extend(helperMixin, visualizerMixin, {
|
|||
lightsData = this.get('lightsData'),
|
||||
color = null,
|
||||
transitiontime = this.get('flashingTransitions'),
|
||||
brightnessRange = this.get('brightnessRange'),
|
||||
stimulateLight = (light, brightness, hue) => {
|
||||
let options = {'bri': brightness};
|
||||
|
||||
|
|
@ -134,7 +135,6 @@ export default Component.extend(helperMixin, visualizerMixin, {
|
|||
if(activeLights.length > 0){
|
||||
let lastLightBopIndex = this.get('lastLightBopIndex'),
|
||||
lightBopIndex,
|
||||
brightnessOnBeat = 254,
|
||||
light;
|
||||
|
||||
lightBopIndex = Math.floor(Math.random() * activeLights.length);
|
||||
|
|
@ -159,8 +159,8 @@ export default Component.extend(helperMixin, visualizerMixin, {
|
|||
timeToBriOff = 80;
|
||||
}
|
||||
|
||||
stimulateLight(light, brightnessOnBeat, color);
|
||||
later(this, stimulateLight, light, 1, timeToBriOff);
|
||||
stimulateLight(light, brightnessRange[1], color);
|
||||
later(this, stimulateLight, light, brightnessRange[0], timeToBriOff);
|
||||
}
|
||||
|
||||
this.set('paused', true);
|
||||
|
|
@ -198,7 +198,7 @@ export default Component.extend(helperMixin, visualizerMixin, {
|
|||
kick: kick
|
||||
});
|
||||
|
||||
['shuffle', 'repeat', 'threshold', 'playerBottomDisplayed', 'audioMode', 'songBeatPreferences', 'firstVisit', 'currentVisName', 'playQueue', 'playQueuePointer', 'flashingTransitions', 'colorloopMode', 'hueRange'].forEach((item)=>{
|
||||
['shuffle', 'repeat', 'threshold', 'playerBottomDisplayed', 'audioMode', 'songBeatPreferences', 'firstVisit', 'currentVisName', 'playQueue', 'playQueuePointer', 'flashingTransitions', 'colorloopMode', 'hueRange', 'brightnessRange'].forEach((item)=>{
|
||||
if (!isNone(storage.get('huegasm.' + item))) {
|
||||
let itemVal = storage.get('huegasm.' + item);
|
||||
|
||||
|
|
@ -444,12 +444,32 @@ export default Component.extend(helperMixin, visualizerMixin, {
|
|||
play(replayPause) {
|
||||
let dancer = this.get('dancer'),
|
||||
playQueuePointer = this.get('playQueuePointer'),
|
||||
playing = this.get('playing');
|
||||
playing = this.get('playing'),
|
||||
lightsData = this.get('lightsData');
|
||||
|
||||
if(playQueuePointer !== -1 ) {
|
||||
if (playing) {
|
||||
dancer.pause();
|
||||
|
||||
let preMusicLightsDataCache = this.get('preMusicLightsDataCache'),
|
||||
updateLight = (lightIndex)=> {
|
||||
$.ajax(this.get('apiURL') + '/lights/' + lightIndex + '/state', {
|
||||
data: JSON.stringify({
|
||||
'on': preMusicLightsDataCache[lightIndex].state.on,
|
||||
'hue': preMusicLightsDataCache[lightIndex].state.hue,
|
||||
'bri': preMusicLightsDataCache[lightIndex].state.bri
|
||||
}),
|
||||
contentType: 'application/json',
|
||||
type: 'PUT'
|
||||
});
|
||||
};
|
||||
|
||||
for (let key in lightsData) {
|
||||
if (lightsData.hasOwnProperty(key)) {
|
||||
later(this, updateLight, key, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
if(!replayPause){
|
||||
this.set('timeElapsed', Math.floor(dancer.getTime()));
|
||||
}
|
||||
|
|
@ -464,6 +484,7 @@ export default Component.extend(helperMixin, visualizerMixin, {
|
|||
|
||||
$(window).trigger('resize'); // workaround to redraw the canvas for the vitualizer
|
||||
|
||||
this.set('preMusicLightsDataCache', lightsData);
|
||||
dancer.play();
|
||||
}
|
||||
|
||||
|
|
@ -574,6 +595,9 @@ export default Component.extend(helperMixin, visualizerMixin, {
|
|||
thresholdChanged(value) {
|
||||
this.changePlayerControl('threshold', value, true);
|
||||
},
|
||||
brightnessRangeChanged(value) {
|
||||
this.changePlayerControl('brightnessRange', value);
|
||||
},
|
||||
hueRangeChanged(value) {
|
||||
this.changePlayerControl('hueRange', value);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -68,11 +68,26 @@ export default Mixin.create({
|
|||
from: function ( value ) { return value; }
|
||||
}
|
||||
}
|
||||
},
|
||||
brightnessRange: {
|
||||
range: {min: 1, max: 254},
|
||||
step: 1,
|
||||
defaultValue: 0,
|
||||
pips: {
|
||||
mode: 'values',
|
||||
values: [1, 50, 100, 150, 200, 254],
|
||||
density: 10,
|
||||
format: {
|
||||
to: function ( value ) { return value; },
|
||||
from: function ( value ) { return value; }
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
threshold: 0.3,
|
||||
hueRange: [0, 65535],
|
||||
brightnessRange: [1, 254],
|
||||
oldThreshold: null,
|
||||
|
||||
playQueuePointer: -1,
|
||||
|
|
@ -278,7 +293,7 @@ export default Mixin.create({
|
|||
this.set('colorLoopOn', this.get('playing') && this.get('colorloopMode'));
|
||||
}),
|
||||
|
||||
onOptionChange: observer('flashingTransitions', 'playQueue.[]', 'playQueuePointer', 'colorloopMode', 'ambienceMode', function(self, option){
|
||||
onOptionChange: observer('flashingTransitions', 'playQueue.[]', 'playQueuePointer', 'colorloopMode', function(self, option){
|
||||
option = option.replace('.[]', '');
|
||||
let value = this.get(option);
|
||||
|
||||
|
|
|
|||
|
|
@ -127,7 +127,7 @@
|
|||
{{/if}}
|
||||
|
||||
<div class="row" id="beat-option-row">
|
||||
<div class="beat-option col-xs-6">
|
||||
<div class="beat-option col-xs-4">
|
||||
<span class="option-description">
|
||||
Hue Range
|
||||
</span>
|
||||
|
|
@ -135,13 +135,21 @@
|
|||
{{range-slider start=hueRange orientation="vertical" step=beatOptions.hueRange.step range=beatOptions.hueRange.range connect=hueRangeConnect on-change="hueRangeChanged" pips=beatOptions.hueRange.pips}}
|
||||
</div>
|
||||
|
||||
<div class="beat-option col-xs-6">
|
||||
<div class="beat-option col-xs-4">
|
||||
<span data-toggle="tooltip" data-placement="top" data-title="The minimum ( off-beat ) and maximum ( on-beat ) brightness of the lights" class="option-description bootstrap-tooltip">
|
||||
Brightness Range
|
||||
</span>
|
||||
|
||||
{{range-slider start=brightnessRange orientation="vertical" step=beatOptions.brightnessRange.step range=beatOptions.brightnessRange.range on-change="brightnessRangeChanged" pips=beatOptions.brightnessRange.pips}}
|
||||
</div>
|
||||
|
||||
<div id="sensitivity-settings" class="beat-option col-xs-4">
|
||||
<span class="option-description">
|
||||
Sensitivity
|
||||
</span>
|
||||
|
||||
{{range-slider start=threshold orientation="vertical" step=beatOptions.threshold.step range=beatOptions.threshold.range on-change="thresholdChanged" pips=beatOptions.threshold.pips}}
|
||||
</div>
|
||||
{{range-slider start=threshold orientation="vertical" step=beatOptions.threshold.step range=beatOptions.threshold.range on-change="thresholdChanged" pips=beatOptions.threshold.pips}}
|
||||
</div>
|
||||
|
||||
{{#if usingMicAudio}}
|
||||
<div class="beat-option col-xs-4">
|
||||
|
|
|
|||
|
|
@ -55,8 +55,6 @@ $bezelsize: 240px;
|
|||
position: relative;
|
||||
background-color: #A8A8A8;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.8), inset 3px 3px 10px rgba(0, 0, 0, 0.8), 0 0 2px rgba(0, 0, 0, 0.8), inset 0 0 30px -5px rgba(0, 0, 0, 0.8);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.rivet1 {
|
||||
@extend %rivet;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
$playerHeight: 400px;
|
||||
$playerDefaultIconColor: #BBBBBB;
|
||||
$playerBottomHeight: 255px;
|
||||
$secondaryThemeColor: #F12B24;
|
||||
$glowingText: 0 0 2px #fff, 0 0 4px #fff, 0 0 20px #228DFF;
|
||||
$dimmerOnButtonColor: #404040;
|
||||
|
|
|
|||
|
|
@ -8,12 +8,12 @@
|
|||
}
|
||||
|
||||
#slide-toggle {
|
||||
font-size: 26px;
|
||||
font-size: 22px;
|
||||
color: $playerDefaultIconColor;
|
||||
background: #730B07;
|
||||
div .paper-icon {
|
||||
color: inherit !important;
|
||||
font-size: 26px;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
|
@ -230,7 +230,7 @@
|
|||
#beat-area {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#beat-option-button-group {
|
||||
|
|
@ -245,6 +245,9 @@
|
|||
}
|
||||
.option-description {
|
||||
font-size: 18px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
button {
|
||||
margin-top: 0;
|
||||
|
|
@ -264,9 +267,8 @@
|
|||
}
|
||||
|
||||
#beat-container {
|
||||
padding: 0;
|
||||
height: $playerBottomHeight;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#add-music-choices {
|
||||
|
|
@ -352,3 +354,10 @@
|
|||
#soundcloud-tutorial {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media(max-width: 500px) {
|
||||
#sensitivity-settings .noUi-value-vertical {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<?xml version='1.0' encoding='utf-8'?>
|
||||
<widget id="com.hoboman313.huegasm" version="1.1.5" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
|
||||
<widget id="com.hoboman313.huegasm" version="1.1.6" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
|
||||
<name>Huegasm</name>
|
||||
<content src="index.html" />
|
||||
<plugin name="cordova-plugin-inappbrowser" spec="~1.6.1" />
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
"devDependencies": {
|
||||
"broccoli-asset-rev": "^2.2.0",
|
||||
"ember-ajax": "^2.0.1",
|
||||
"ember-cli": "^2.8.0",
|
||||
"ember-cli": "^2.11.0",
|
||||
"ember-cli-app-version": "^2.0.0",
|
||||
"ember-cli-babel": "^5.1.5",
|
||||
"ember-cli-dependency-checker": "^1.2.0",
|
||||
|
|
|
|||
|
|
@ -168,6 +168,7 @@ export default Component.extend({
|
|||
intro: 'These are the settings for the music tab:<br>' +
|
||||
'<b>Sensitivity</b> - The sensitivity of the beat detector ( more sensitivity results in more registered beats )<br>' +
|
||||
'<b>Hue Range</b> - The hue range that the lights may change to on beat.<br>' +
|
||||
'<b>Brightness Range</b> - The minimum ( off-beat ) and maximum ( on-beat ) brightness of the lights.<br>' +
|
||||
'<b>Flashing Transitions</b> - Quickly flash the lights on beat<br>' +
|
||||
'<b>Colorloop</b> - Slowly cycle the lights through all the colors while the music is playing<br>' +
|
||||
'<i><b>TIP</b>: Your sensitivity settings are saved per song as indicated by the red star icon in the top left corner. These settings they will be restored if you ever listen to the same song again.</i>',
|
||||
|
|
|
|||
|
|
@ -119,6 +119,7 @@ export default Component.extend(helperMixin, visualizerMixin, {
|
|||
let activeLights = this.get('activeLights'),
|
||||
lightsData = this.get('lightsData'),
|
||||
color = null,
|
||||
|
||||
transitiontime = this.get('flashingTransitions'),
|
||||
stimulateLight = (light, brightness, hue) => {
|
||||
let options = {'bri': brightness};
|
||||
|
|
@ -145,10 +146,10 @@ export default Component.extend(helperMixin, visualizerMixin, {
|
|||
},
|
||||
timeToBriOff = 100;
|
||||
|
||||
if(activeLights.length > 0 && !this.get('ambienceMode')){
|
||||
if(activeLights.length > 0){
|
||||
let lastLightBopIndex = this.get('lastLightBopIndex'),
|
||||
lightBopIndex,
|
||||
brightnessOnBeat = 254,
|
||||
brightnessRange = this.get('brightnessRange'),
|
||||
light;
|
||||
|
||||
lightBopIndex = Math.floor(Math.random() * activeLights.length);
|
||||
|
|
@ -173,8 +174,8 @@ export default Component.extend(helperMixin, visualizerMixin, {
|
|||
timeToBriOff = 80;
|
||||
}
|
||||
|
||||
stimulateLight(light, brightnessOnBeat, color);
|
||||
later(this, stimulateLight, light, 1, timeToBriOff);
|
||||
stimulateLight(light, brightnessRange[1], color);
|
||||
later(this, stimulateLight, light, brightnessRange[0], timeToBriOff);
|
||||
}
|
||||
|
||||
this.set('paused', true);
|
||||
|
|
@ -212,7 +213,7 @@ export default Component.extend(helperMixin, visualizerMixin, {
|
|||
kick: kick
|
||||
});
|
||||
|
||||
['volume', 'shuffle', 'repeat', 'volumeMuted', 'threshold', 'playerBottomDisplayed', 'songBeatPreferences', 'firstVisit', 'currentVisName', 'playQueue', 'playQueuePointer', 'flashingTransitions', 'colorloopMode', 'ambienceMode', 'hueRange'].forEach((item)=>{
|
||||
['volume', 'shuffle', 'repeat', 'volumeMuted', 'threshold', 'playerBottomDisplayed', 'songBeatPreferences', 'firstVisit', 'currentVisName', 'playQueue', 'playQueuePointer', 'flashingTransitions', 'colorloopMode', 'hueRange', 'brightnessRange'].forEach((item)=>{
|
||||
if (!isNone(storage.get('huegasm.' + item))) {
|
||||
let itemVal = storage.get('huegasm.' + item);
|
||||
|
||||
|
|
@ -477,12 +478,32 @@ export default Component.extend(helperMixin, visualizerMixin, {
|
|||
play(replayPause) {
|
||||
let dancer = this.get('dancer'),
|
||||
playQueuePointer = this.get('playQueuePointer'),
|
||||
playing = this.get('playing');
|
||||
playing = this.get('playing'),
|
||||
lightsData = this.get('lightsData');
|
||||
|
||||
if(playQueuePointer !== -1 ) {
|
||||
if (playing) {
|
||||
dancer.pause();
|
||||
|
||||
let preMusicLightsDataCache = this.get('preMusicLightsDataCache'),
|
||||
updateLight = (lightIndex)=> {
|
||||
$.ajax(this.get('apiURL') + '/lights/' + lightIndex + '/state', {
|
||||
data: JSON.stringify({
|
||||
'on': preMusicLightsDataCache[lightIndex].state.on,
|
||||
'hue': preMusicLightsDataCache[lightIndex].state.hue,
|
||||
'bri': preMusicLightsDataCache[lightIndex].state.bri
|
||||
}),
|
||||
contentType: 'application/json',
|
||||
type: 'PUT'
|
||||
});
|
||||
};
|
||||
|
||||
for (let key in lightsData) {
|
||||
if (lightsData.hasOwnProperty(key)) {
|
||||
later(this, updateLight, key, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
if(!replayPause){
|
||||
this.set('timeElapsed', Math.floor(dancer.getTime()));
|
||||
}
|
||||
|
|
@ -503,6 +524,7 @@ export default Component.extend(helperMixin, visualizerMixin, {
|
|||
|
||||
$(window).trigger('resize'); // workaround to redraw the canvas for the vitualizer
|
||||
|
||||
this.set('preMusicLightsDataCache', lightsData);
|
||||
dancer.play();
|
||||
}
|
||||
|
||||
|
|
@ -637,6 +659,9 @@ export default Component.extend(helperMixin, visualizerMixin, {
|
|||
thresholdChanged(value) {
|
||||
this.changePlayerControl('threshold', value, true);
|
||||
},
|
||||
brightnessRangeChanged(value) {
|
||||
this.changePlayerControl('brightnessRange', value);
|
||||
},
|
||||
hueRangeChanged(value) {
|
||||
this.changePlayerControl('hueRange', value);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -69,11 +69,26 @@ export default Mixin.create({
|
|||
from: function ( value ) { return value; }
|
||||
}
|
||||
}
|
||||
},
|
||||
brightnessRange: {
|
||||
range: {min: 1, max: 254},
|
||||
step: 1,
|
||||
defaultValue: 0,
|
||||
pips: {
|
||||
mode: 'values',
|
||||
values: [1, 50, 100, 150, 200, 254],
|
||||
density: 10,
|
||||
format: {
|
||||
to: function ( value ) { return value; },
|
||||
from: function ( value ) { return value; }
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
threshold: 0.3,
|
||||
hueRange: [0, 65535],
|
||||
brightnessRange: [1, 254],
|
||||
oldThreshold: null,
|
||||
|
||||
playQueuePointer: -1,
|
||||
|
|
@ -298,7 +313,7 @@ export default Mixin.create({
|
|||
this.set('colorLoopOn', this.get('playing') && this.get('colorloopMode'));
|
||||
}),
|
||||
|
||||
onOptionChange: observer('flashingTransitions', 'playQueue.[]', 'playQueuePointer', 'colorloopMode', 'ambienceMode', function(self, option){
|
||||
onOptionChange: observer('flashingTransitions', 'playQueue.[]', 'playQueuePointer', 'colorloopMode', function(self, option){
|
||||
option = option.replace('.[]', '');
|
||||
let value = this.get(option);
|
||||
|
||||
|
|
|
|||
|
|
@ -128,7 +128,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div id="player-bottom" class="row {{if dimmerOn "dimmerOn"}}">
|
||||
<div id="player-bottom" class="row {{if dimmerOn "dimmerOn"}} {{if playerBottomDisplayed "display-flex"}}">
|
||||
<div id="beat-area" class="col-sm-7 col-xs-12">
|
||||
{{#if usingBeatPreferences}}
|
||||
<span data-toggle="tooltip" data-placement="top" data-title="Using the saved sensitivity preference from the last time you listened to this song" class="bootstrap-tooltip" id="save-beat-preferences-star">
|
||||
|
|
@ -137,7 +137,7 @@
|
|||
{{/if}}
|
||||
|
||||
<div class="row" id="beat-option-row">
|
||||
<div class="beat-option col-sm-4 col-xs-6">
|
||||
<div class="beat-option col-xs-4">
|
||||
<span data-toggle="tooltip" data-placement="top" data-title="The range of hues ( colors ) that the lights may change to on beat." class="option-description bootstrap-tooltip">
|
||||
Hue Range
|
||||
</span>
|
||||
|
|
@ -145,7 +145,15 @@
|
|||
{{range-slider start=hueRange orientation="vertical" step=beatOptions.hueRange.step range=beatOptions.hueRange.range connect=hueRangeConnect on-change="hueRangeChanged" pips=beatOptions.hueRange.pips}}
|
||||
</div>
|
||||
|
||||
<div class="beat-option col-sm-4 col-xs-6">
|
||||
<div class="beat-option col-xs-4">
|
||||
<span data-toggle="tooltip" data-placement="top" data-title="The minimum ( off-beat ) and maximum ( on-beat ) brightness of the lights" class="option-description bootstrap-tooltip">
|
||||
Brightness Range
|
||||
</span>
|
||||
|
||||
{{range-slider start=brightnessRange orientation="vertical" step=beatOptions.brightnessRange.step range=beatOptions.brightnessRange.range on-change="brightnessRangeChanged" pips=beatOptions.brightnessRange.pips}}
|
||||
</div>
|
||||
|
||||
<div class="beat-option col-xs-4">
|
||||
<span data-toggle="tooltip" data-placement="top" data-title="The sensitivity of the beat detector ( more sensitivity results in more registered beats )" class="option-description bootstrap-tooltip">
|
||||
Sensitivity
|
||||
</span>
|
||||
|
|
@ -153,7 +161,7 @@
|
|||
{{range-slider start=threshold orientation="vertical" step=beatOptions.threshold.step range=beatOptions.threshold.range on-change="thresholdChanged" pips=beatOptions.threshold.pips}}
|
||||
</div>
|
||||
|
||||
<div id="light-option" class="beat-option col-sm-4 col-xs-12">
|
||||
<div id="light-option" class="col-xs-12">
|
||||
<span data-toggle="tooltip" data-placement="top auto" data-title="Quickly flash the lights on beat" class="bootstrap-tooltip" {{action "hideTooltip" on="mouseLeave"}}>
|
||||
{{paper-checkbox value=flashingTransitions onChange=(action (mut flashingTransitions)) label="Flashing Transitions"}}
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -84,18 +84,8 @@ div.ember-modal-dialog {
|
|||
}
|
||||
}
|
||||
|
||||
#github-ribbon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@media(max-width:500px) {
|
||||
#github-ribbon {
|
||||
top: -20px;
|
||||
right: -20px;
|
||||
}
|
||||
.display-flex {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
// fancy webkit scrollbars
|
||||
|
|
|
|||
|
|
@ -57,8 +57,6 @@ $bezelsize: 240px;
|
|||
position: relative;
|
||||
background-color: #A8A8A8;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.8), inset 3px 3px 10px rgba(0, 0, 0, 0.8), 0 0 2px rgba(0, 0, 0, 0.8), inset 0 0 30px -5px rgba(0, 0, 0, 0.8);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.rivet1 {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
$playerHeight: 400px;
|
||||
$playerDefaultIconColor: #BBBBBB;
|
||||
$playerBottomHeight: 255px;
|
||||
$secondaryThemeColor: #F12B24;
|
||||
$glowingText: 0 0 2px #fff, 0 0 4px #fff, 0 0 20px #228DFF;
|
||||
$dimmerOnButtonColor: #404040;
|
||||
|
|
|
|||
|
|
@ -9,12 +9,12 @@
|
|||
}
|
||||
|
||||
#slide-toggle {
|
||||
font-size: 28px;
|
||||
font-size: 22px;
|
||||
color: $playerDefaultIconColor;
|
||||
background: #730B07;
|
||||
div .paper-icon {
|
||||
color: inherit !important;
|
||||
font-size: 28px;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
|
@ -265,10 +265,8 @@
|
|||
}
|
||||
|
||||
#beat-area {
|
||||
height: $playerBottomHeight;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.star {
|
||||
|
|
@ -280,8 +278,12 @@
|
|||
}
|
||||
|
||||
#light-option {
|
||||
margin-top: 67px;
|
||||
transform: translateY(25%);
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
.md-label {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.beat-option {
|
||||
|
|
@ -295,6 +297,9 @@
|
|||
}
|
||||
.option-description {
|
||||
font-size: 20px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
button {
|
||||
margin-top: 0;
|
||||
|
|
@ -310,14 +315,15 @@
|
|||
width: 100%;
|
||||
background: white;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px
|
||||
border-bottom-right-radius: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#beat-container {
|
||||
padding: 0;
|
||||
height: $playerBottomHeight;
|
||||
margin: 0;
|
||||
}
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#beat-area .light-group {
|
||||
margin: 10px 20px 0 40px;
|
||||
|
|
@ -450,11 +456,8 @@
|
|||
|
||||
// mobile overrides
|
||||
@media(max-width:767px) {
|
||||
#light-option {
|
||||
margin-top: 0;
|
||||
.md-label {
|
||||
width: auto;
|
||||
}
|
||||
div#player-bottom {
|
||||
display: block !important;
|
||||
}
|
||||
#beat-area {
|
||||
height: initial;
|
||||
|
|
@ -468,9 +471,6 @@
|
|||
#seek-slider {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.beat-option {
|
||||
text-align: center !important;
|
||||
}
|
||||
.close {
|
||||
display: block;
|
||||
}
|
||||
|
|
|
|||
Reference in a new issue