diff --git a/changelog.html b/changelog.html index a8174241..4f2cdc06 100644 --- a/changelog.html +++ b/changelog.html @@ -2,6 +2,7 @@ diff --git a/dark.css b/dark.css index 30d8ec98..f5ede8a5 100644 --- a/dark.css +++ b/dark.css @@ -1537,4 +1537,9 @@ body.ffz-dark:not([data-page="teams#show"]), .ffz-dark .subscription-modal__right, .ffz-dark .subscription-modal__bar { border-color: rgba(255,255,255,0.2); +} + +.ffz-dark .balloon .filter-bar__balloon-link--active { + color: #fff !important; + background-color: #6441a5 !important; } \ No newline at end of file diff --git a/src/badges.js b/src/badges.js index 9f3f2001..7cfc9fb0 100644 --- a/src/badges.js +++ b/src/badges.js @@ -156,15 +156,7 @@ FFZ.settings_info.legacy_badges = { name: "Legacy Badges", help: "Use the old, pre-vector chat badges from Twitch in place of the new.", - process_value: function(val) { - if ( val === false ) - return 0; - else if ( val === true ) - return 3; - else if ( typeof val === "string" ) - return parseInt(val || "0"); - return val; - }, + process_value: utils.process_int(0, 0, 3), on_update: function(val) { this.toggle_style('badges-legacy', val === 3); @@ -193,15 +185,7 @@ FFZ.settings_info.transparent_badges = { name: "Badge Style", help: "Make badges appear rounded, completely circular, or transparent with no background at all.", - process_value: function(val) { - if ( val === false ) - return 0; - else if ( val === true ) - return 5; - else if ( typeof val === "string" ) - return parseInt(val || "0"); - return val; - }, + process_value: utils.process_int(0, 0, 5), on_update: function(val) { if ( this.has_bttv ) diff --git a/src/colors.js b/src/colors.js index 19eb6500..90a3810c 100644 --- a/src/colors.js +++ b/src/colors.js @@ -57,20 +57,7 @@ FFZ.settings_info.fix_color = { name: "Username Colors", help: "Ensure that username colors contrast with the background enough to be readable.", - process_value: function(val) { - // Load legacy setting. - if ( val === false ) - return 0; - else if ( val === true ) - return 1; - else if ( typeof val === "string" ) { - val = parseInt(val); - if ( Number.isNaN(val) || ! Number.isFinite(val) ) - val = 6; - } - - return val; - }, + process_value: utils.process_int(6, 0, 6), on_update: function(val) { this.toggle_style('chat-colors-gray', !this.has_bttv && val === -1); diff --git a/src/ember/channel.js b/src/ember/channel.js index aa868e6b..d66380d7 100644 --- a/src/ember/channel.js +++ b/src/ember/channel.js @@ -1236,15 +1236,7 @@ FFZ.settings_info.stream_uptime = { }, value: 1, - process_value: function(val) { - if ( val === false ) - return 0; - if ( val === true ) - return 2; - if ( typeof val === "string" ) - return parseInt(val || "0") || 0; - return val; - }, + process_value: utils.process_int(1, 0, 2), no_mobile: true, category: "Channel Metadata", @@ -1370,14 +1362,7 @@ FFZ.settings_info.channel_title_top = { }, value: 0, - process_value: function(val) { - if ( typeof val === "string" ) { - val = parseInt(val); - if ( isNaN(val) || ! isFinite(val) ) - val = 0; - } - return val; - }, + process_value: utils.process_int(0), no_bttv: true, no_mobile: true, diff --git a/src/ember/chat-input.js b/src/ember/chat-input.js index 87119fe7..300fc564 100644 --- a/src/ember/chat-input.js +++ b/src/ember/chat-input.js @@ -100,13 +100,9 @@ FFZ.settings_info.input_complete_emotes = { 2: "All Emoticons" }, - value: 1, + value: 2, - process_value: function(val) { - if ( typeof val === 'string' ) - return parseInt(val) || 0; - return val; - }, + process_value: utils.process_int(2), category: "Chat Input", no_bttv: true, @@ -131,11 +127,7 @@ FFZ.settings_info.input_complete_aliases = { value: 1, - process_value: function(val) { - if ( typeof val === 'string' ) - return parseInt(val) || 0; - return val; - }, + process_value: utils.process_int(1), category: "Chat Input", no_bttv: true, diff --git a/src/ember/chatview.js b/src/ember/chatview.js index e6e6b4c8..ff3b1a44 100644 --- a/src/ember/chatview.js +++ b/src/ember/chatview.js @@ -61,15 +61,7 @@ FFZ.settings_info.minimal_chat = { name: "Minimalistic Chat", help: "Hide all of the chat user interface, only showing messages and an input box.", - process_value: function(val) { - if ( val === false ) - return 0; - else if ( val === true ) - return 3; - else if ( typeof val === "string" ) - return parseInt(val) || 0; - return val; - }, + process_value: utils.process_int(0, 0, 3), on_update: function(val) { document.body.classList.toggle("ffz-minimal-chat-head", val === 1 || val === 3); @@ -122,11 +114,7 @@ FFZ.settings_info.chat_batching = { name: "Chat Message Batching", help: "Display chat messages in batches to improve performance in extremely fast chats.", - process_value: function(val) { - if ( typeof val === "string" ) - return parseInt(val) || 0; - return val; - }, + process_value: utils.process_int(0), on_update: function(val) { if ( this._roomv ) @@ -158,11 +146,7 @@ FFZ.settings_info.chat_delay = { name: "Artificial Chat Delay", help: "Delay the appearance of chat messages to allow for moderation before you see them.", - process_value: function(val) { - if ( typeof val === "string" ) - return parseInt(val || "0"); - return val; - }, + process_value: utils.process_int(-1), on_update: function (val) { for(var room_id in this.rooms) { @@ -288,15 +272,7 @@ FFZ.settings_info.group_tabs = { value: 0, - process_value: function(val) { - if ( val === false ) - return 0; - else if ( val === true ) - return 3; - else if ( typeof val === "string" ) - return parseInt(val) || 0; - return val; - }, + process_value: utils.process_int(0, 0, 3), no_bttv: true, diff --git a/src/ember/directory.js b/src/ember/directory.js index 8d6fba57..2b0aabd2 100644 --- a/src/ember/directory.js +++ b/src/ember/directory.js @@ -157,11 +157,7 @@ FFZ.settings_info.directory_host_menus = { }, value: 1, - process_value: function(val) { - if ( typeof val === "string" ) - return parseInt(val) || 0; - return val; - }, + process_value: utils.process_int(1), category: "Directory", no_mobile: true, diff --git a/src/ember/layout.js b/src/ember/layout.js index 91e05e0d..1709c355 100644 --- a/src/ember/layout.js +++ b/src/ember/layout.js @@ -17,16 +17,7 @@ FFZ.settings_info.portrait_mode = { }, value: 0, - - process_value: function(val) { - if ( val === false ) - return 0; - if ( val === true ) - return 1; - if ( typeof val === "string" ) - return parseInt(val) || 0; - return val; - }, + process_value: utils.process_int(0, 0, 1), category: "Appearance", no_mobile: true, diff --git a/src/ember/line.js b/src/ember/line.js index 0b7e93b0..da5595c1 100644 --- a/src/ember/line.js +++ b/src/ember/line.js @@ -41,16 +41,7 @@ FFZ.settings_info.username_display = { help: "How a user's name should be rendered when their display name differs from the username.", value: 3, - - process_value: function(val) { - if ( typeof val === "string" ) { - val = parseInt(val); - if ( isNaN(val) || ! isFinite(val) ) - val = 3; - } - - return val; - }, + process_value: utils.process_int(3), on_update: function(val) { var CL = utils.ember_resolve('component:chat/chat-line'), @@ -119,16 +110,7 @@ FFZ.settings_info.parse_emoji = { }, value: 1, - - process_value: function(val) { - if ( val === false ) - return 0; - if ( val === true ) - return 1; - if ( typeof val === "string" ) - return parseInt(val || "0"); - return val; - }, + process_value: utils.process_int(1, 0, 1), category: "Chat Appearance", @@ -375,21 +357,13 @@ FFZ.settings_info.chat_separators = { 3: "3D Line (2px groove inset)", 4: "Wide Line (2px solid)" }, - value: 0, - category: "Chat Appearance", + value: 0, + process_value: utils.process_int(0, 0, 1), + no_bttv: true, - process_value: function(val) { - if ( val === false ) - return 0; - else if ( val === true ) - return 1; - else if ( typeof val === "string" ) - return parseInt(val) || 0; - return val; - }, - + category: "Chat Appearance", name: "Chat Line Separators", help: "Display thin lines between chat messages for further visual separation.", @@ -455,13 +429,8 @@ FFZ.settings_info.high_contrast_chat = { '112': "Background + Bold", '111': 'All' }, + value: '222', - - category: "Chat Appearance", - - name: "High Contrast", - help: "Display chat using white and black for maximum contrast. This is suitable for capturing and chroma keying chat to display on stream.", - process_value: function(val) { if ( val === false ) return '222'; @@ -470,6 +439,11 @@ FFZ.settings_info.high_contrast_chat = { return val; }, + category: "Chat Appearance", + + name: "High Contrast", + help: "Display chat using white and black for maximum contrast. This is suitable for capturing and chroma keying chat to display on stream.", + on_update: function(val) { this.toggle_style('chat-hc-text', val[2] === '1'); this.toggle_style('chat-hc-bold', val[1] === '1'); diff --git a/src/ember/moderation-card.js b/src/ember/moderation-card.js index 7e4167af..6f014c76 100644 --- a/src/ember/moderation-card.js +++ b/src/ember/moderation-card.js @@ -104,11 +104,7 @@ FFZ.settings_info.chat_mod_icon_visibility = { return this.settings.get_twitch("showModIcons") ? 1 : 0; }, - process_value: function(val) { - if ( typeof val === "string" ) - return parseInt(val) || 0; - return val; - }, + process_value: utils.process_int(0), no_bttv: true, @@ -139,17 +135,9 @@ FFZ.settings_info.chat_hover_pause = { 8: "Alt or Hover", 9: "Shift or Hover" }, - value: 0, - process_value: function(val) { - if ( val === true ) - return 1; - else if ( val === false ) - return 0; - else if ( typeof val === "string" ) - return parseInt(val) || 0; - return val; - }, + value: 0, + process_value: utils.process_int(0, 0, 1), no_bttv: true, @@ -180,11 +168,11 @@ FFZ.settings_info.short_commands = { value: true, no_bttv: true, - category: "Chat Moderation", + category: "Chat Moderation", name: "Short Moderation Commands", help: "Use /t, /b, and /u in chat in place of /timeout, /ban, /unban for quicker moderation, and use /p for 1 second timeouts." - }; +}; FFZ.settings_info.mod_card_hotkeys = { @@ -192,11 +180,11 @@ FFZ.settings_info.mod_card_hotkeys = { value: false, no_bttv: true, - category: "Chat Moderation", + category: "Chat Moderation", name: "Moderation Card Hotkeys", help: "With a moderation card selected, press B to ban the user, T to time them out for 10 minutes, P to time them out for 1 second, or U to unban them. ESC closes the card." - }; +}; FFZ.settings_info.mod_card_info = { @@ -204,11 +192,11 @@ FFZ.settings_info.mod_card_info = { value: true, no_bttv: true, - category: "Chat Moderation", + category: "Chat Moderation", name: "Moderation Card Additional Information", help: "Display a channel's follower count, view count, and account age on moderation cards." - }; +}; FFZ.settings_info.timeout_notices = { @@ -220,18 +208,14 @@ FFZ.settings_info.timeout_notices = { }, value: 1, - process_value: function(val) { - if ( typeof val === "string" ) - return parseInt(val) || 0; - return val; - }, + process_value: utils.process_int(1), no_bttv: true, - category: "Chat Moderation", + category: "Chat Moderation", name: "Display Timeout / Ban Notices", help: "Display notices in chat when a user is timed out or banned. (You always see your own bans.)" - }; +}; FFZ.settings_info.mod_card_history = { @@ -245,17 +229,17 @@ FFZ.settings_info.mod_card_history = { help: "Display a few of the user's previously sent messages on moderation cards.", on_update: function(val) { - if ( val || ! this.rooms ) - return; + if ( val || ! this.rooms ) + return; - // Delete all history~! - for(var room_id in this.rooms) { - var room = this.rooms[room_id]; - if ( room ) - room.user_history = undefined; - } + // Delete all history~! + for(var room_id in this.rooms) { + var room = this.rooms[room_id]; + if ( room ) + room.user_history = undefined; } - }; + } +}; FFZ.settings_info.mod_button_context = { @@ -268,21 +252,14 @@ FFZ.settings_info.mod_button_context = { }, value: 3, - process_value: function(val) { - if ( typeof val === "string" ) { - val = parseInt(val); - if ( isNaN(val) || ! isFinite(val) ) - val = 3; - } - return val; - }, + process_value: utils.process_int(3), - category: "Chat Moderation", no_bttv: true, + category: "Chat Moderation", name: "Mod Icon Context Menus", help: "Choose the available options when right-clicking an in-line moderation icon." -} +}; FFZ.settings_info.mod_card_reasons = { @@ -340,146 +317,146 @@ FFZ.settings_info.mod_buttons = { // integer = Timeout (that amount of time) value: [['', false, false], ['',600, false]], //, ['', 1, false]], - category: "Chat Moderation", no_bttv: true, + category: "Chat Moderation", name: "Custom In-Line Moderation Icons", help: "Change out the different in-line moderation icons to use any command quickly.", method: function() { - var f = this, - old_val = "", - input = utils.createElement('textarea'); + var f = this, + old_val = "", + input = utils.createElement('textarea'); - input.style.marginBottom = '20px'; - input.placeholder = '/ban\n600'; + input.style.marginBottom = '20px'; + input.placeholder = '/ban\n600'; - for(var i=0; i < this.settings.mod_buttons.length; i++) { - var pair = this.settings.mod_buttons[i], - prefix = pair[0], cmd = pair[1], had_prefix = pair[2]; + for(var i=0; i < this.settings.mod_buttons.length; i++) { + var pair = this.settings.mod_buttons[i], + prefix = pair[0], cmd = pair[1], had_prefix = pair[2]; - if ( cmd === false ) - cmd = "/ban"; - else if ( cmd === 600 ) - cmd = "/timeout"; - else if ( typeof cmd !== "string" ) - cmd = '' + cmd; + if ( cmd === false ) + cmd = "/ban"; + else if ( cmd === 600 ) + cmd = "/timeout"; + else if ( typeof cmd !== "string" ) + cmd = '' + cmd; - prefix = had_prefix ? 'name:' + prefix + '=' : ''; - old_val += (old_val.length ? '\n' : '') + prefix + cmd; - } - - utils.prompt( - "Custom In-Line Moderation Icons", - "Please enter a list of commands to be displayed as moderation buttons within chat lines. " + - "One item per line. As a shortcut for specific duration timeouts, you can enter the number of seconds by itself. " + - " To send multiple commands, separate them with <LINE>. " + - "Variables, such as the target user's name, can be inserted into your commands. If no variables are detected " + - "in a line, {user} will be added to the end of the first command.
" + - - "To set a custom label for the button, start your line with name: followed by the " + - "name of the button. End the name with an equals sign. Only the first character will be displayed.
" + - "Example: name:B=/ban {user}
" + - - "Allowed Variables
" + - "" + - "" + - "" + - "" + - "" + - "" + - "" + - "" + - "" + - "
{user}target user's name{user_name}target user's name
{user_display_name}target user's display name{user_id}target user's numeric ID
{room}chat room's name{room_name}chat room's name
{room_display_name}chat room's display name{room_id}chat room's numeric ID
{id}message's UUID
", - - old_val, - function(new_val) { - if ( new_val === null || new_val === undefined ) - return; - - var vals = new_val.trim().split(/\s*\n\s*/g), - output = []; - - for(var i=0; i < vals.length; i++) { - var cmd = vals[i], - prefix, - is_emoji = false, - name_match = /^name:([^=]+)=/.exec(cmd); - - if ( ! cmd || ! cmd.length ) - continue; - - if ( name_match ) { - label = name_match[1]; - - if ( window.punycode && punycode.ucs2 ) - label = punycode.ucs2.encode([punycode.ucs2.decode(label)[0]]); - - // Check for an emoji - var tokens = f.tokenize_emoji(label); - if ( tokens && tokens[0] && tokens[0].ffzEmoji ) - is_emoji = tokens[0].ffzEmoji; - - cmd = cmd.substr(name_match[0].length).trim(); - } else - label = undefined; - - // Check for a plain ban. - if ( /^\/b(?:an)?(?:\s+{user(?:_name)?})?\s*$/.test(cmd) ) - cmd = false; - - // Numeric Timeout - else if ( /^\d+$/.test(cmd) ) - cmd = parseInt(cmd); - - // Command Timeout - else if ( /^\/t(?:imeout)?(?:\s+{user(?:_name)?}(?:\s+(\d+))?)?\s*$/.test(cmd) ) { - cmd = parseInt(/^\/t(?:imeout)?(?:\s+{user(?:_name)?}(?:\s+(\d+))?)?\s*$/.exec(cmd)[1]); - if ( isNaN(cmd) || ! isFinite(cmd) ) - cmd = 600; - } - - - // Okay. Do we still need a prefix? - if ( label === undefined ) { - var tmp; - if ( typeof cmd === "string" ) - tmp = /\w/.exec(cmd); - else - tmp = utils.duration_string(cmd); - - label = tmp && tmp.length ? tmp[0].toUpperCase() : 'C'; - } - - // Add {user} to the first command if it's a custom command and missing. - if ( typeof cmd === "string" ) { - utils.CMD_VAR_REGEX.lastIndex = 0; - if ( ! utils.CMD_VAR_REGEX.test(cmd) ) { - var lines = cmd.split(/\s*\s*/g); - lines[0] += ' {user}'; - cmd = lines.join(""); - } - } - - output.push([label, cmd, name_match != null, is_emoji]); - } - - f.settings.set('mod_buttons', output); - - // Update existing chat lines. - var CL = utils.ember_resolve('component:chat/chat-line'), - views = CL ? utils.ember_views() : []; - - for(var vid in views) { - var view = views[vid]; - if ( view instanceof CL && view.buildModIconsHTML ) - view.$('.mod-icons').replaceWith(view.buildModIconsHTML()); - } - - }, 600, input); + prefix = had_prefix ? 'name:' + prefix + '=' : ''; + old_val += (old_val.length ? '\n' : '') + prefix + cmd; } - }; + + utils.prompt( + "Custom In-Line Moderation Icons", + "Please enter a list of commands to be displayed as moderation buttons within chat lines. " + + "One item per line. As a shortcut for specific duration timeouts, you can enter the number of seconds by itself. " + + " To send multiple commands, separate them with <LINE>. " + + "Variables, such as the target user's name, can be inserted into your commands. If no variables are detected " + + "in a line, {user} will be added to the end of the first command.
" + + + "To set a custom label for the button, start your line with name: followed by the " + + "name of the button. End the name with an equals sign. Only the first character will be displayed.
" + + "Example: name:B=/ban {user}
" + + + "Allowed Variables
" + + "" + + "" + + "" + + "" + + "" + + "" + + "" + + "" + + "" + + "
{user}target user's name{user_name}target user's name
{user_display_name}target user's display name{user_id}target user's numeric ID
{room}chat room's name{room_name}chat room's name
{room_display_name}chat room's display name{room_id}chat room's numeric ID
{id}message's UUID
", + + old_val, + function(new_val) { + if ( new_val === null || new_val === undefined ) + return; + + var vals = new_val.trim().split(/\s*\n\s*/g), + output = []; + + for(var i=0; i < vals.length; i++) { + var cmd = vals[i], + prefix, + is_emoji = false, + name_match = /^name:([^=]+)=/.exec(cmd); + + if ( ! cmd || ! cmd.length ) + continue; + + if ( name_match ) { + label = name_match[1]; + + if ( window.punycode && punycode.ucs2 ) + label = punycode.ucs2.encode([punycode.ucs2.decode(label)[0]]); + + // Check for an emoji + var tokens = f.tokenize_emoji(label); + if ( tokens && tokens[0] && tokens[0].ffzEmoji ) + is_emoji = tokens[0].ffzEmoji; + + cmd = cmd.substr(name_match[0].length).trim(); + } else + label = undefined; + + // Check for a plain ban. + if ( /^\/b(?:an)?(?:\s+{user(?:_name)?})?\s*$/.test(cmd) ) + cmd = false; + + // Numeric Timeout + else if ( /^\d+$/.test(cmd) ) + cmd = parseInt(cmd); + + // Command Timeout + else if ( /^\/t(?:imeout)?(?:\s+{user(?:_name)?}(?:\s+(\d+))?)?\s*$/.test(cmd) ) { + cmd = parseInt(/^\/t(?:imeout)?(?:\s+{user(?:_name)?}(?:\s+(\d+))?)?\s*$/.exec(cmd)[1]); + if ( isNaN(cmd) || ! isFinite(cmd) ) + cmd = 600; + } + + + // Okay. Do we still need a prefix? + if ( label === undefined ) { + var tmp; + if ( typeof cmd === "string" ) + tmp = /\w/.exec(cmd); + else + tmp = utils.duration_string(cmd); + + label = tmp && tmp.length ? tmp[0].toUpperCase() : 'C'; + } + + // Add {user} to the first command if it's a custom command and missing. + if ( typeof cmd === "string" ) { + utils.CMD_VAR_REGEX.lastIndex = 0; + if ( ! utils.CMD_VAR_REGEX.test(cmd) ) { + var lines = cmd.split(/\s*\s*/g); + lines[0] += ' {user}'; + cmd = lines.join(""); + } + } + + output.push([label, cmd, name_match != null, is_emoji]); + } + + f.settings.set('mod_buttons', output); + + // Update existing chat lines. + var CL = utils.ember_resolve('component:chat/chat-line'), + views = CL ? utils.ember_views() : []; + + for(var vid in views) { + var view = views[vid]; + if ( view instanceof CL && view.buildModIconsHTML ) + view.$('.mod-icons').replaceWith(view.buildModIconsHTML()); + } + + }, 600, input); + } +}; FFZ.settings_info.mod_card_buttons = { diff --git a/src/ember/player.js b/src/ember/player.js index 87b84f71..eb984cae 100644 --- a/src/ember/player.js +++ b/src/ember/player.js @@ -68,11 +68,7 @@ FFZ.settings_info.player_pause_hosts = { }, value: 1, - process_value: function(val) { - if ( typeof val === "string" ) - return parseInt(val) || 0; - return val; - }, + process_value: utils.process_int(1), category: "Player", name: "Auto-Pause Hosted Channels", diff --git a/src/ember/sidebar.js b/src/ember/sidebar.js index 0414fde2..42a2c492 100644 --- a/src/ember/sidebar.js +++ b/src/ember/sidebar.js @@ -20,15 +20,11 @@ FFZ.settings_info.sidebar_followed_games = { }, value: 5, - process_value: function(val) { - if ( typeof val === "string" ) - return parseInt(val) || 0; - return val; - }, + process_value: utils.process_int(5), - category: "Sidebar", no_mobile: true, + category: "Sidebar", name: "Followed Games", help: "Display this number of followed games on the sidebar.", @@ -63,18 +59,11 @@ FFZ.settings_info.sidebar_hide_prime = { }, value: 0, - process_value: function(val) { - if ( typeof val === "string" ) { - val = parseInt(val); - if ( isNaN(val) || ! isFinite(val) ) - val = 0; - } - return val; - }, + process_value: utils.process_int(0), - category: "Sidebar", no_mobile: true, + category: "Sidebar", name: "Hide Twitch Prime Offers", help: "Hide the Free with Prime section from the sidebar.", diff --git a/src/utils.js b/src/utils.js index ca29a56b..e04fc3dd 100644 --- a/src/utils.js +++ b/src/utils.js @@ -328,9 +328,13 @@ module.exports = FFZ.utils = { // Other Stuff - process_int: function(default_value) { + process_int: function(default_value, false_value, true_value) { return function(val) { - if ( typeof val === "string" ) { + if ( val === false && false_value !== undefined ) + val = false_value; + else if ( val === true && true_value !== undefined ) + val = true_value; + else if ( typeof val === "string" ) { val = parseInt(val); if ( isNaN(val) || ! isFinite(val) ) val = default_value; diff --git a/style.css b/style.css index 36ae8d54..08cc7a62 100644 --- a/style.css +++ b/style.css @@ -2908,6 +2908,7 @@ body:not(.ffz-top-conversations) .conversations-list-bottom-bar { body:not(.ffz-tags-on-channel) .tw-title--tall { height: 60px } body:not(.ffz-tags-on-channel) #broadcast-meta .ct-tags, +.cn-metabar__title .ct-tags, /*body:not(.ffz-creative-showcase) .ct-banner-handler .tower > div:last-child,*/ body:not(.ffz-creative-showcase) .ct-spotlight-container { display: none; }