From 3a3b30d4fd8c53cdfd2b396861912fb43fe8f604 Mon Sep 17 00:00:00 2001
From: SirStendec <sir@stendec.me>
Date: Tue, 18 Oct 2016 14:06:20 -0400
Subject: [PATCH] 3.5.339. Minimize Navigation. Room-specific badge CSS
 generation. More logviewer fixes. Don't tab-complete short commands. CSS
 tweaks.

---
 changelog.html               | 15 +++++++
 dark.css                     |  1 +
 src/badges.js                |  5 +--
 src/ember/chat-input.js      | 15 ++++---
 src/ember/layout.js          | 76 ++++++++++++++++++++++++------------
 src/ember/moderation-card.js | 16 ++++----
 src/ember/room.js            | 20 +++++++++-
 src/ext/betterttv.js         |  8 ++++
 src/main.js                  |  2 +-
 src/ui/logviewer.js          | 11 +++++-
 src/utils.js                 | 17 ++++++--
 style.css                    | 48 +++++++++++++++++++++--
 12 files changed, 182 insertions(+), 52 deletions(-)

diff --git a/changelog.html b/changelog.html
index ba946537..1dcca515 100644
--- a/changelog.html
+++ b/changelog.html
@@ -1,3 +1,18 @@
+<div class="list-header">3.5.339 <time datetime="2016-10-18">(2016-10-18)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Changed: Generate proper CSS for room-specific badges to avoid having to use inline styles.</li>
+	<li>Changed: Make Minimize Navigation work for the expanded navigation bar as well.</li>
+	<li>Fixed: CSS tweaks.</li>
+</ul>
+
+<div class="list-header">3.5.338 <time datetime="2016-10-18">(2016-10-18)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Added: Minimize Navigation setting to slide the navigation bar out of view when it's not being used.</li>
+	<li>Changed: Do not tab-complete short commands. They're already one character, so it's pointless. Also don't automatically start to complete a username as the behavior can be annoying right now. Tab completion needs a lot of work.</li>
+	<li>Fixed: Subscription notices weren't being displayed properly in logviewer chat history.</li>
+	<li>Fixed: Layout tweaks.</li>
+</ul>
+
 <div class="list-header">3.5.337 <time datetime="2016-10-17">(2016-10-17)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Added: Show chatter count on the dashboard.</li>
diff --git a/dark.css b/dark.css
index f5ede8a5..ac5e637b 100644
--- a/dark.css
+++ b/dark.css
@@ -1100,6 +1100,7 @@ body.ffz-dark:not([data-page="teams#show"]),
 
 .ffz-dark .new-header-search input {
 	color: #fff;
+	background-color: rgba(255,255,255,0.05);
 	box-shadow: rgba(255,255,255,0.2) 0 0 0 1px inset;
 }
 
diff --git a/src/badges.js b/src/badges.js
index 04ce7e81..a4d018ac 100644
--- a/src/badges.js
+++ b/src/badges.js
@@ -3,8 +3,7 @@ var FFZ = window.FrankerFaceZ,
 	utils = require('./utils'),
 
 	SPECIAL_BADGES = ['staff', 'admin', 'global_mod'],
-	NOT_KNOWN = ['subscriber'],
-	OTHER_KNOWN = ['turbo', 'warcraft', 'bits', 'premium'],
+	OTHER_KNOWN = ['turbo', 'bits', 'premium'],
 
 	CSS_BADGES = {
 		staff: { 1: { color: "#200f33", use_svg: true } },
@@ -466,7 +465,7 @@ FFZ.prototype.get_twitch_badges = function(badge_tag, room_id) {
 			had_last = true;
 		}
 
-		var is_known = NOT_KNOWN.indexOf(badge) === -1 && (BADGE_POSITIONS.hasOwnProperty(badge) || OTHER_KNOWN.indexOf(badge) !== -1);
+		var is_known = BADGE_POSITIONS.hasOwnProperty(badge) || OTHER_KNOWN.indexOf(badge) !== -1;
 
 		badges[last_id] = {
 			klass: (BADGE_KLASSES[badge] || badge) + (is_known ? '' : ' unknown-badge') + ' version-' + version,
diff --git a/src/ember/chat-input.js b/src/ember/chat-input.js
index 4b8483de..214ba859 100644
--- a/src/ember/chat-input.js
+++ b/src/ember/chat-input.js
@@ -647,7 +647,7 @@ FFZ.prototype.modify_chat_input = function(component) {
 				move_selection(area, prefix.length);
 				area.focus();
 
-				var text = t.get('textareaValue'),
+				/*var text = t.get('textareaValue'),
 					ind = text.indexOf(' '),
 					start = ind !== -1 && text.substr(0, ind);
 
@@ -660,7 +660,7 @@ FFZ.prototype.modify_chat_input = function(component) {
 						t.set("ffz_suggestions_visible", true);
 						t.ffzSetPartialWord();
 					}
-				}
+				}*/
 			});
 		},
 
@@ -686,7 +686,7 @@ FFZ.prototype.modify_chat_input = function(component) {
 
 			for(var cmd in FFZ.chat_commands) {
 				var data = FFZ.chat_commands[cmd];
-				if ( commands[cmd] )
+				if ( commands[cmd] || ! data || data.short )
 					continue;
 
 				var enabled = data.hasOwnProperty('enabled') ? data.enabled : true;
@@ -704,8 +704,7 @@ FFZ.prototype.modify_chat_input = function(component) {
 				commands[cmd] = {
 					label: data.label,
 					info: data.info,
-					alias: false,
-					short: data.short
+					alias: false
 				}
 			}
 
@@ -850,7 +849,7 @@ FFZ.prototype.modify_chat_input = function(component) {
 						alternate_match: command_name.toLowerCase(),
 						content: data.content || cmd,
 						label: data.label || cmd,
-						info: data.alias ? 'Alias: ' + data.info : (data.short ? 'Short ' : '') + 'Command' + (data.info ? ': ' + data.info : '')
+						info: data.alias ? 'Alias: ' + data.info : 'Command' + (data.info ? ': ' + data.info : '')
 					});
 				}
 			}
@@ -1364,7 +1363,7 @@ FFZ.prototype.modify_chat_input = function(component) {
 								});
 							}
 
-						} else if ( f.settings.input_complete_commands && (start.charAt(0) === '/' || start.charAt(0) === '.') ) {
+						} /* else if ( f.settings.input_complete_commands && (start.charAt(0) === '/' || start.charAt(0) === '.') ) {
 							var commands = t.get('ffz_commands'),
 								cmd = commands[start.substr(1)];
 
@@ -1373,7 +1372,7 @@ FFZ.prototype.modify_chat_input = function(component) {
 								t.set("ffz_suggestions_visible", true);
 								t.ffzSetPartialWord();
 							}
-						}
+						}*/
 					});
 			}
 		},
diff --git a/src/ember/layout.js b/src/ember/layout.js
index 8659d7df..56676159 100644
--- a/src/ember/layout.js
+++ b/src/ember/layout.js
@@ -98,33 +98,59 @@ FFZ.settings_info.right_column_width = {
 	help: "Set the width of the right sidebar for chat.",
 
 	method: function() {
-			var f = this,
-				old_val = this.settings.right_column_width || 340;
+		var f = this,
+			old_val = this.settings.right_column_width || 340;
 
-			utils.prompt("Right Sidebar Width", "Please enter a new width for the right sidebar, in pixels.</p><p><b>Minimum:</b> 250<br><b>Default:</b> 340", old_val, function(new_val) {
-				if ( new_val === null || new_val === undefined )
-					return;
+		utils.prompt("Right Sidebar Width", "Please enter a new width for the right sidebar, in pixels.</p><p><b>Minimum:</b> 250<br><b>Default:</b> 340", old_val, function(new_val) {
+			if ( new_val === null || new_val === undefined )
+				return;
 
-				var width = parseInt(new_val);
-				if ( ! width || Number.isNaN(width) || ! Number.isFinite(width) )
-					width = 340;
+			var width = parseInt(new_val);
+			if ( ! width || Number.isNaN(width) || ! Number.isFinite(width) )
+				width = 340;
 
-				f.settings.set('right_column_width', Math.max(250, width));
-			});
-		},
+			f.settings.set('right_column_width', Math.max(250, width));
+		});
+	},
 
 	on_update: function(val) {
-			if ( this.has_bttv )
-				return;
+		if ( this.has_bttv )
+			return;
 
-			var Layout = utils.ember_lookup('service:layout');
-			if ( ! Layout )
-				return;
+		var Layout = utils.ember_lookup('service:layout');
+		if ( ! Layout )
+			return;
 
-			Layout.set('rightColumnWidth', val);
-			Ember.propertyDidChange(Layout, 'contentWidth');
-		}
-	};
+		Layout.set('rightColumnWidth', val);
+		Ember.propertyDidChange(Layout, 'contentWidth');
+	}
+};
+
+
+FFZ.settings_info.minimize_navigation = {
+	type: "boolean",
+	value: false,
+
+	category: "Sidebar",
+	no_mobile: true,
+	no_bttv: true,
+
+	name: "Minimize Navigation",
+	help: "Slide the navigation bar mostly out of view when it's not being used.",
+
+	on_update: function(val) {
+		if ( this.has_bttv )
+			return;
+
+		var Layout = utils.ember_lookup('service:layout');
+		if ( ! Layout )
+			return;
+
+		utils.toggle_cls('ffz-sidebar-minimize')(val);
+		Layout.set('ffzMinimizeNavigation', val);
+		//Ember.propertyDidChange(Layout, 'contentWidth');
+	}
+}
 
 
 // --------------------
@@ -135,7 +161,8 @@ FFZ.prototype.setup_layout = function() {
 	if ( this.has_bttv )
 		return;
 
-	document.body.classList.toggle("ffz-sidebar-swap", this.settings.swap_sidebars);
+	utils.toggle_cls("ffz-sidebar-swap")(this.settings.swap_sidebars);
+	utils.toggle_cls('ffz-sidebar-minimize')(this.settings.minimize_navigation);
 
 	this.log("Creating layout style element.");
 	var s = this._layout_style = document.createElement('style');
@@ -186,12 +213,12 @@ FFZ.prototype.setup_layout = function() {
 		}.property("ffzExtraHeight", "windowWidth", "rightColumnWidth", "fullSizePlayerDimensions", "windowHeight"),
 
 		contentWidth: function() {
-			var left_width = this.get("isLeftColumnClosed") ? 50 : 240,
+			var left_width = this.get('ffzMinimizeNavigation') ? 10 : this.get("isLeftColumnClosed") ? 50 : 240,
 				right_width = ! f.has_bttv && this.get('portraitMode') ? 0 : this.get("isRightColumnClosed") ? 0 : this.get("rightColumnWidth");
 
 			return this.get("windowWidth") - left_width - right_width - 60;
 
-		}.property("windowWidth", "portraitMode", "isRightColumnClosed", "isLeftColumnClosed", "rightColumnWidth"),
+		}.property("windowWidth", 'ffzMinimizeNavigation', "portraitMode", "isRightColumnClosed", "isLeftColumnClosed", "rightColumnWidth"),
 
 		ffzExtraHeight: function() {
 			return (f.settings.channel_bar_collapse ? 10 : 60) + 15 +
@@ -223,7 +250,7 @@ FFZ.prototype.setup_layout = function() {
 
 		}.property("ffzExtraHeight", "contentWidth", "windowHeight", "portraitMode", "PLAYER_CONTROLS_HEIGHT"),
 
-		fullSizePlayerStyle: function() {
+		playerStyle: function() {
 			var size = this.get('fullSizePlayerDimensions');
 
 			return '<style>' +
@@ -392,6 +419,7 @@ FFZ.prototype.setup_layout = function() {
 	// Force the layout to update.
 	Layout.set('rightColumnWidth', this.settings.right_column_width);
 	Layout.set('rawPortraitMode', this.settings.portrait_mode);
+	Layout.set('ffzMinimizeNavigation', this.settings.minimize_navigation);
 
 	// Force re-calculation of everything.
 	Ember.propertyDidChange(Layout, 'windowWidth');
diff --git a/src/ember/moderation-card.js b/src/ember/moderation-card.js
index 739a0b8d..c97d6468 100644
--- a/src/ember/moderation-card.js
+++ b/src/ember/moderation-card.js
@@ -828,7 +828,10 @@ FFZ.prototype.modify_moderation_card = function(component) {
 				// Parse the message. Store the data.
 				var message = f.lv_parse_message(data);
 				this._lv_logs.data.before.push(message);
-				this._lv_logs.data.user[message.is_ban ? 'timeouts' : 'messages'] += 1;
+				if ( message.is_ban )
+					this._lv_logs.data.user.timeouts++;
+				else if ( ! message.is_admin && (! message.is_notice || message.message.indexOf('Message: ') !== -1) )
+					this._lv_logs.data.user.messages++;
 
 				// If we're viewing the chat history, update it.
 				var el = this.get('element'),
@@ -1434,10 +1437,11 @@ FFZ.prototype.modify_moderation_card = function(component) {
 
 
 FFZ.prototype._build_mod_card_history = function(msg, modcard, show_from, ts_click, mod_icons) {
-	var l_el = document.createElement('li'),
+	var l_el = utils.createElement('li', 'message-line chat-line clearfix'),
 		out = [],
-		f = this;
+		f = this,
 
+		is_notice = msg.style === 'admin' || msg.style === 'notification',
 		style = '', colored = '';
 
 	if ( helpers && helpers.getTime )
@@ -1453,7 +1457,7 @@ FFZ.prototype._build_mod_card_history = function(msg, modcard, show_from, ts_cli
 		out.push('</span>');
 	}
 
-	if ( show_from ) {
+	if ( show_from && ! is_notice ) {
 		// Badges
 		out.push('<span class="badges">');
 		out.push(this.render_badges(this.get_line_badges(msg, false)));
@@ -1484,7 +1488,7 @@ FFZ.prototype._build_mod_card_history = function(msg, modcard, show_from, ts_cli
 			+ results[0] + '</span>');
 
 		out.push(msg.style !== 'action' ? '<span class="colon">:</span> ' : ' ');
-	} else if ( msg.style !== 'admin' )
+	} else if ( ! is_notice )
 		out.push('<span class="cp-hidden"> ' + results[0] + (msg.style === 'action' ? '' : ':') + ' </span>');
 
 
@@ -1505,8 +1509,6 @@ FFZ.prototype._build_mod_card_history = function(msg, modcard, show_from, ts_cli
 
 
 	// Line attributes and classes.
-	l_el.className = 'message-line chat-line clearfix';
-
 	if ( msg.style )
 		l_el.classList.add(msg.style);
 
diff --git a/src/ember/room.js b/src/ember/room.js
index 42fbefaf..f6c2b79d 100644
--- a/src/ember/room.js
+++ b/src/ember/room.js
@@ -862,6 +862,21 @@ FFZ.prototype.update_room_important = function(id, controller) {
 };
 
 
+FFZ.prototype._update_room_badge_css = function(room_id) {
+	var room = this.rooms[room_id],
+		badges = room && room.badges || {},
+		output = [];
+
+	for(var badge_id in badges) {
+		var versions = badges[badge_id] && badges[badge_id].versions || {};
+		for(var version in versions)
+			output.push(utils.room_badge_css(room_id, badge_id, version, versions[version]));
+	}
+
+	utils.update_css(this._badge_style, 'twitch-room-' + room_id, output.join(''));
+}
+
+
 FFZ.prototype.add_room = function(id, room) {
 	if ( this.rooms[id] )
 		return this.log("Tried to add existing room: " + id);
@@ -894,8 +909,10 @@ FFZ.prototype.add_room = function(id, room) {
 
 	// Store the badges for this room now if we have them.
 	var bs = utils.ember_lookup('service:badges');
-	if ( bs && bs.badgeCollection && bs.badgeCollection.channel && bs.badgeCollection.channel.broadcasterName === id )
+	if ( bs && bs.badgeCollection && bs.badgeCollection.channel && bs.badgeCollection.channel.broadcasterName === id ) {
 		data.badges = bs.badgeCollection.channel;
+		this._update_room_badge_css(id);
+	}
 
 	// Look up if the room has moderation logs.
 	var f = this;
@@ -1068,6 +1085,7 @@ FFZ.prototype._modify_room = function(room) {
 				}
 			}).then(utils.json).then(function(data) {
 				ffz_room.badges = data && data.badge_sets;
+				f._update_room_badge_css(room_name);
 			});
 
 		}.observes('roomProperties._id'),
diff --git a/src/ext/betterttv.js b/src/ext/betterttv.js
index 059d6a1c..829a65b4 100644
--- a/src/ext/betterttv.js
+++ b/src/ext/betterttv.js
@@ -112,6 +112,14 @@ FFZ.prototype.setup_bttv = function(delay) {
 	cl.remove('ffz-minimal-channel-bar');
 	cl.remove('ffz-channel-bar-bottom');
 	cl.remove('ffz-channel-title-top');
+	cl.remove('ffz-sidebar-minimize');
+
+	// Update the layout service.
+	var Layout = utils.ember_lookup('service:layout');
+	if ( Layout ) {
+		Layout.set('ffzMinimizeNavigation', false);
+		Layout.set('rawPortraitMode', 0);
+	}
 
 	// Remove Following Count
 	if ( this.settings.following_count ) {
diff --git a/src/main.js b/src/main.js
index 9de795cd..b70a80c3 100644
--- a/src/main.js
+++ b/src/main.js
@@ -35,7 +35,7 @@ FFZ.channel_metadata = {};
 
 // Version
 var VER = FFZ.version_info = {
-	major: 3, minor: 5, revision: 337,
+	major: 3, minor: 5, revision: 339,
 	toString: function() {
 		return [VER.major, VER.minor, VER.revision].join(".") + (VER.extra || "");
 	}
diff --git a/src/ui/logviewer.js b/src/ui/logviewer.js
index b07845e4..10053701 100644
--- a/src/ui/logviewer.js
+++ b/src/ui/logviewer.js
@@ -103,9 +103,18 @@ FFZ.prototype.lv_parse_message = function(message) {
 	parsed.is_admin = parsed.tags['display-name'] === 'jtv';
 	if ( parsed.is_admin ) {
 		parsed.style = 'admin';
-		parsed.tags['display-name'] = undefined;
+		delete parsed.tags['display-name'];
 	}
 
+
+	// Is this a notification?
+	parsed.is_notice = parsed.tags['display-name'] === 'twitchnotify';
+	if ( parsed.is_notice ) {
+		parsed.style = 'notification';
+		delete parsed.tags['display-name'];
+	}
+
+
 	// Is this a ban?
 	var match = parsed.is_admin && BAN_REGEX.exec(parsed.message);
 	if ( match ) {
diff --git a/src/utils.js b/src/utils.js
index 3f5b4e70..8867d421 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -982,7 +982,18 @@ module.exports = FFZ.utils = {
 		return out;
 	},
 
-	cdn_badge_css: function(badge_id, version, data) {
+	room_badge_css: function(room_id, badge_id, version, data) {
+		var img_1x = data.image_url_1x,
+			img_2x = data.image_url_2x,
+			img_4x = data.image_url_4x;
+
+		return '.from-display-preview[data-room="' + room_id + '"] .badge.' + badge_id + '.version-' + version +
+				',.chat-line[data-room="' + room_id + '"] .badge.' + badge_id + '.version-' + version + '{' +
+			'background-image:url("' + img_1x + '");' +
+			'background-image:' + (constants.IS_WEBKIT ? '-webkit-' : '') + 'image-set(url("' + img_1x + '") 1x' + (img_2x ? ',url("' + img_2x + '") 2x' : '') + (img_4x ? ',url("' + img_4x + '") 4x' : '') + ')}';
+	},
+
+	cdn_badge_css: function(badge_id, version, data, room) {
 		var color = data.color,
 			base_image = data.image || ("https://cdn.frankerfacez.com/badges/twitch/" + badge_id + (data.use_svg ? '.svg' : "/" + version + "/")),
 			is_svg = base_image.substr(-4) === '.svg',
@@ -990,11 +1001,11 @@ module.exports = FFZ.utils = {
 			image_2x = base_image + (is_svg ? '' : "2.png"),
 			image_4x = base_image + (is_svg ? '' : "4.png");
 
-		return '.badge.' + badge_id + '.version-' + version + (data.no_color ? '' : ':not(.colored)') + ' {' +
+		return '.badge.' + badge_id + '.version-' + version + (room ? '[data-room="' + room + '"]' : '') + (data.no_color ? '' : ':not(.colored)') + ' {' +
 				'background: url("' + image_1x + '") ' + color + ';' +
 				(is_svg ? '}' : 'background-image: -webkit-image-set(url("' + image_1x + '") 1x, url("' + image_2x + '") 2x, url("' + image_4x + '") 4x);' +
 				'background-image: image-set(url("' + image_1x + '") 1x, url("' + image_2x + '") 2x, url("' + image_4x + '") 4x); }') +
-			(data.no_color ? '' : '.badge.' + badge_id + '.version-' + version + '.colored {' +
+			(data.no_color ? '' : '.badge.' + badge_id + '.version-' + version + (room ? '[data-room="' + room + '"]' : '') + '.colored {' +
 				'background: linear-gradient(' + color + ',' + color + ');' +
 				(is_svg ? '-webkit-mask-size: 18px 18px;mask-size: 18px 18px;' : '') +
 				'-webkit-mask-image: url("' + image_1x + '");' +
diff --git a/style.css b/style.css
index 0c867936..619e34a3 100644
--- a/style.css
+++ b/style.css
@@ -2085,9 +2085,12 @@ body.ffz-minimal-chat-input .ember-chat .chat-interface .textarea-contain textar
 	margin-right: 0px;
 }
 
+.chat-history .chat-line.notification .from,
+.chat-history .chat-line.notification .colon,
 .chat-history .chat-line.admin .from,
 .chat-history .chat-line.admin .colon { display: none }
 
+.chat-history .chat-line.notification .message,
 .chat-history .chat-line.admin .message { color: #666; }
 
 .chat-history .timestamp {
@@ -2261,11 +2264,11 @@ body:not([data-current-path^="user."]) .ffz-sidebar-swap .ember-chat .chat-inter
 	left: 20px;
 }
 
-.ffz-sidebar-swap #main_col .cn-bar-fixed {
+.ffz-sidebar-swap .cn-bar-fixed {
 	right: 50px;
 }
 
-.ffz-sidebar-swap #left_col.open ~ #main_col .cn-bar-fixed {
+.ffz-sidebar-swap:not(.ffz-sidebar-minimize) #left_col.open ~ #main_col .cn-bar-fixed {
 	right: 240px;
 }
 
@@ -2361,13 +2364,31 @@ body:not([data-current-path^="user."]) .ffz-sidebar-swap .ember-chat .chat-inter
 
 /* No Blue */
 
+.ffz-no-blue .form--theme-dark .form__input {
+	background-color: rgba(255,255,255,0.05);
+	box-shadow: rgba(255,255,255,0.1) 0 0 0 1px inset;
+}
+
+.ffz-no-blue .form--theme-dark .form__input:focus {
+	box-shadow: rgba(255,255,255,0.3) 0 0 0 1px inset;
+}
+
 .ffz-no-blue .theatre .ember-chat .chat-interface .textarea-contain textarea {
 	background-color: rgba(255,255,255,0.05);
 	border-color: rgba(255,255,255,0.1);
 }
 
 .ffz-no-blue #carousel .nav {
-    background-color: rgba(25,25,25,.5);
+	background-color: rgba(25,25,25,.5);
+}
+
+.ffz-no-blue .warp__item a:hover {
+	background-color: #2b2b2b;
+}
+
+.ffz-no-blue .warp__item--toggled > a {
+	background-color: #2b2b2b;
+	box-shadow: 3px 0 0 #a3a3a3 inset;
 }
 
 .ffz-no-blue .theatre .conversations-list-bottom-bar,
@@ -3639,6 +3660,13 @@ body:not(.ffz-channel-bar-bottom).ffz-small-player.ffz-minimal-channel-bar #play
 
 /* Ban Notices */
 
+.theatre .chat-history .chat-line.notification .message,
+.dark .chat-history .chat-line.notification .message,
+.force-dark .chat-history .chat-line.notification .message,
+.theatre .chat-history .chat-line.admin .message,
+.dark .chat-history .chat-line.admin .message,
+.force-dark .chat-history .chat-line.admin .message,
+
 .theatre .chat-messages .chat-line.admin .message,
 .dark .chat-messages .chat-line.admin .message,
 .force-dark .chat-messages .chat-line.admin .message,
@@ -3699,4 +3727,16 @@ body:not(.ffz-channel-bar-bottom).ffz-small-player.ffz-minimal-channel-bar #play
 .ffz-following-row .switch {
 	float: right;
 	margin: 7px 1rem 0 0;
-}
\ No newline at end of file
+}
+
+/* Hidden Navigation */
+
+.ffz-sidebar-minimize:not(.ffz-sidebar-swap) #left_col.closed:not(:hover) { left: -40px }
+.ffz-sidebar-minimize:not(.ffz-sidebar-swap) #left_col.open:not(:hover) { left: -230px }
+.ffz-sidebar-minimize:not(.ffz-sidebar-swap) #main_col { margin-left: 10px }
+.ffz-sidebar-minimize:not(.ffz-sidebar-swap) #left_col ~ #main_col .cn-bar-fixed { left: 10px }
+
+.ffz-sidebar-minimize.ffz-sidebar-swap #left_col.closed:not(:hover) { right: -40px }
+.ffz-sidebar-minimize.ffz-sidebar-swap #left_col.open:not(:hover) { right: -230px }
+.ffz-sidebar-minimize.ffz-sidebar-swap #main_col { margin-right: 10px }
+.ffz-sidebar-minimize.ffz-sidebar-swap .cn-bar-fixed { right: 10px }
\ No newline at end of file