@finsemble/finsemble-ui 6.3.0 → 6.4.0-beta.2

package/react/assets/css/windowTitleBar.css

@@ -1,652 +1,653 @@
-/*!
- * windowTitleBar.css
- * Copyright 2017 - 2020 by ChartIQ, Inc.
- * All rights reserved.
- */
-@import url("./linkerWindow.css");
-
-.fsbl-drag-handle {
-	z-index: 2147483641;
-	/* use below with window scrollbar hack */
-	position: fixed;
-	top: 5px !important;
-	margin-top: 0px !important;
-	/* use below without window scrollbar hack */
-	/* position: absolute; */
-	/* top: 0px!important; */
-	/* background-color: red; */
-}
-
-.fsbl-drag-handle-native-movement {
-	z-index: 2147483641;
-	/* use below with window scrollbar hack */
-	position: fixed;
-	top: 5px !important;
-	margin-top: 0px !important;
-	-webkit-app-region: drag;
-}
-
-.fsbl-drag-handle.hidden {
-	display: none;
-}
-
-.fsbl-drag-handle-native-movement.hidden {
-	display: none;
-}
-
-.fsbl-tabs-multiple .fsbl-header-right {
-	padding-left: 80px; /* leave some space for a user to grab */
-}
-
-html:before,
-html:after,
-body:before,
-body:after {
-	content: "";
-	position: fixed;
-	display: block;
-	z-index: 2147483640;
-	background-color: var(--window-border-color);
-}
-
-/* 
-* The next few items give the border of windows 
-* thickness so that the user can see them
-*/
-html:before {
-	height: 1px;
-	left: 0;
-	right: 0;
-	top: 0;
-}
-
-html:after {
-	width: 1px;
-	top: 0;
-	right: 0;
-	bottom: 0;
-}
-
-body:before {
-	height: 1px;
-	right: 0;
-	bottom: 0;
-	left: 0;
-}
-
-body:after {
-	width: 1px;
-	top: 0;
-	bottom: 0;
-	left: 0;
-}
-
-.fsbl-header {
-	font-family: var(--font-family);
-	font-size: var(--titleBar-font-size);
-	font-weight: var(--titleBar-font-weight);
-	text-align: center;
-	display: flex;
-	height: var(--titleBar-height);
-	position: fixed;
-	align-items: flex-end;
-	flex-direction: row;
-	justify-content: space-between;
-	background: var(--titleBar-background-inactive-color);
-	width: 100%;
-	left: 0;
-	z-index: 2147483639;
-	top: 0;
-	color: var(--titleBar-inactive-font-color);
-}
-
-html.desktop-active .title-text {
-	background: transparent;
-	color: var(--titleBar-active-font-color);
-}
-
-.fsbl-header-title {
-	position: relative;
-	height: 100%;
-	padding-left: 8px;
-	overflow: hidden;
-	align-items: center;
-	display: flex;
-	padding-right: 14px;
-	transition: background-color 0.2s ease;
-	border-top-left-radius: 10px;
-	border-top-right-radius: 10px;
-	background-color: var(--titlebar-tab-inactive-background-color);
-}
-
-.fsbl-header-title[data-hover="true"] {
-	background-color: var(--core-primary-2);
-}
-
-html.desktop-active .fsbl-header-title .fsbl-tab-title {
-	color: var(--titlebar-tab-active-font-color);
-}
-
-html.desktop-active .fsbl-header-title[data-hover="true"] {
-	background-color: var(--titlebar-tab-active-background-color);
-	color: var(--titlebar-tab-active-font-color);
-}
-
-.fsbl-header-left {
-	height: calc(100% - 5px); /* leave some space for the resize cursor */
-	margin-left: 2px;
-	left: 0px;
-	align-content: center;
-	align-items: center;
-	justify-content: flex-start;
-	display: flex;
-}
-
-.fsbl-header-center {
-	height: calc(100% - 10px);
-	align-content: center;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 80%;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	--webkit-user-select: none;
-	user-select: none;
-	position: relative;
-	padding-bottom: 3px; /* This needs to be half of the thing subtracted from the height. e.g. height = 100% - 6px, then this is 3px) */
-}
-
-.fsbl-tabs-enabled .fsbl-header-center {
-	height: 100%;
-	width: 100%;
-	padding-bottom: 0px;
-}
-
-html.desktop-active .fsbl-header-right {
-	background: var(--titleBar-background-active-color);
-}
-
-.fsbl-header-right {
-	margin-right: 2px;
-	height: calc(100% - 5px); /* leave some space for the resize cursor */
-	align-content: center;
-	display: flex;
-	justify-content: flex-end;
-	z-index: 5;
-}
-
-/* Offset the contents back up, to make up for half the resize cursor offset */
-.fsbl-header-right > * {
-	margin-top: -2px;
-}
-
-html.desktop-active .fsbl-tab-region-drag-area {
-	background-color: var(--titleBar-background-inactive-color);
-}
-
-.tab-drop-region {
-	width: 100%;
-	height: 100%;
-	position: absolute;
-	z-index: 30000;
-}
-
-.fsbl-icon {
-	position: relative;
-	color: var(--titleBar-inactive-font-color);
-	font-size: var(--titleBar-icon-font-size);
-	width: 10px;
-	padding: 0px 6px;
-	height: calc(100% + 1px);
-	margin-top: -3px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	transition: background 0.2s ease;
-	cursor: pointer;
-	box-sizing: content-box !important;
-}
-
-.fsbl-icon svg path {
-	fill: var(--titlebar-icon-color);
-}
-
-.fsbl-icon[data-hover="true"] {
-	color: var(--titlebar-icon-hover-color);
-}
-
-/* So it sits over the border*/
-.fsbl-icon.fsbl-close {
-	margin-right: -1px;
-}
-
-.fsbl-icon.fsbl-close[data-hover="true"] {
-	color: var(--titleBar-button-hover-negative-color);
-}
-
-html.desktop-active .fsbl-icon.fsbl-close[data-hover="true"] {
-	color: var(--titleBar-button-hover-negative-color);
-}
-
-.fsbl-icon-highlighted {
-	-webkit-transition: background-color 300ms ease-in-out;
-	transition: background-color 300ms ease-in-out;
-	background-color: var(--titleBar-button-highlight-inactive-color);
-	border-radius: 25px;
-	color: var(--titlebar-icon-hover-color);
-}
-
-html.desktop-active .fsbl-icon-highlighted {
-	background-color: var(--titleBar-button-highlight-active-color);
-}
-
-.fsbl-minimize {
-	align-items: center;
-	margin-top: -2px;
-	transition: 0.2s all;
-}
-
-.fsbl-ejector {
-	-webkit-transition: background-color 300ms ease-in-out;
-	transition: background-color 300ms ease-in-out;
-	background-color: var(--titleBar-button-highlight-active-color);
-}
-
-.linkerSection {
-	display: flex;
-	height: 100%;
-	cursor: pointer;
-}
-
-.linker-groups {
-	height: 100%;
-	display: flex;
-	flex-direction: row;
-	align-items: flex-start;
-	margin-top: -2px;
-}
-
-.linker-group {
-	width: 3px;
-	height: 13px;
-	margin-left: 3px;
-	border-radius: 4px;
-	border: 1px solid transparent;
-	box-sizing: content-box; /* otherwise any box-sizing on the page can override how our linker appears */
-}
-
-.linker-group-accessible {
-	width: 1em !important;
-	padding-bottom: 4px;
-	margin-bottom: 4px;
-	color: var(--titleBar-linker-font-color);
-}
-
-.linkerContainer {
-	justify-content: center;
-	align-items: flex-start;
-}
-
-.linker-group:hover {
-	cursor: pointer;
-	border: 1px solid var(--content-button-neutral-hover-color);
-}
-
-.linker-group:nth-last-child(1) {
-	margin-right: 5px;
-}
-
-.fsbl-linker {
-	cursor: pointer;
-	display: flex;
-	/* So it sits over the border*/
-	align-items: center;
-	justify-content: center;
-	align-content: center;
-	transition: background 0.3s ease;
-	position: relative;
-	width: 12px;
-	border-radius: 20px;
-	margin-right: 2px;
-}
-
-.fsbl-share {
-	cursor: pointer;
-	display: flex;
-	/* So it sits over the border*/
-	align-items: center;
-	justify-content: center;
-	align-content: center;
-	transition: background 0.3s ease;
-	position: relative;
-	width: 14px;
-	border-radius: 20px;
-	margin-right: 2px;
-}
-
-.fsbl-share > svg {
-	margin-top: 1px;
-}
-
-.fsbl-linker svg #prefix__a {
-	fill: var(--titleBar-linker-font-color);
-}
-
-.fsbl-linker svg #prefix__b {
-	fill: var(--titleBar-linker-font-color-blur);
-}
-
-.fsbl-linker:hover,
-.fsbl-linker[data-hover="true"], /* deprecated */
-.fsbl-share[data-hover="true"] {
-	background-color: var(--titleBar-button-hover-active-color);
-}
-
-.ff-minimize {
-	padding-bottom: 3px;
-}
-
-.ff-linker:before {
-	padding-top: 3px;
-}
-
-.ff-share:before {
-	padding-top: 3px;
-}
-
-.ff-maximize,
-.ff-close,
-.ff-detached,
-.ff-attached {
-	padding-top: 2px;
-	transition: 0.2s all;
-}
-
-.ff-always-on-top {
-	padding-top: 3px;
-	font-size: 11px;
-}
-
-.ff-restore {
-	padding-top: 4px;
-}
-
-.fsbl-tab {
-	height: 100%;
-	padding-left: 8px;
-	position: relative;
-	display: inline-flex;
-	align-content: center;
-	align-items: center;
-	vertical-align: top;
-	background-color: var(--titlebar-tab-inactive-background-color);
-	color: var(--titlebar-tab-inactive-font-color);
-	border-top-right-radius: 10px;
-	border-top-left-radius: 10px;
-	user-select: none;
-	box-sizing: border-box;
-	justify-content: flex-start;
-	transition: color 0.2s ease;
-}
-
-.fsbl-active-tab {
-	background-color: var(--titlebar-tab-active-background-color);
-	color: var(--titlebar-tab-active-font-color);
-}
-
-.fsbl-tab[data-hover="true"] {
-	background-color: var(--titlebar-tab-hover-background-color);
-	color: var(--titlebar-tab-hover-font-color);
-}
-
-.tab-region-wrapper {
-	max-width: 75%; /* make sure there's always some space to grab and move the window */
-}
-
-/* When there are multiple tabs, no border for the last tab on the right side. */
-.fsbl-tabs-multiple .tab-region-wrapper > div:last-child {
-	border-right: none;
-}
-
-.fsbl-tab-area {
-	height: 100%;
-	display: flex;
-	width: 100%;
-	position: absolute;
-	left: 0;
-	overflow: scroll;
-}
-
-.fsbl-tab-area::-webkit-scrollbar {
-	display: none;
-}
-
-.fsbl-tab-title {
-	text-align: left;
-	padding-left: 1px;
-	min-width: 0;
-	color: var(--titlebar-tab-inactive-font-color);
-	display: flex;
-	align-items: center;
-}
-
-/* The block below allows for a flex-child to have text truncated with an ellipsis. */
-.fsbl-tab-title .title-text {
-	flex: 1;
-	overflow: hidden;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-}
-
-html.desktop-active .fsbl-active-tab .fsbl-tab-title {
-	color: var(--titlebar-tab-active-font-color);
-}
-
-.fsbl-tab-close {
-	font-size: 8px;
-	padding: 0px 10px;
-	visibility: hidden;
-	cursor: pointer;
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	position: absolute;
-	right: 0;
-	z-index: 30001;
-}
-
-.fsbl-tab-close:hover {
-	-webkit-text-stroke: 1px;
-}
-
-.fsbl-tab:hover > .fsbl-tab-close {
-	visibility: visible;
-}
-
-.fsbl-tab-logo {
-	margin: 0px 7px;
-	padding-top: 3px;
-	width: auto;
-	height: auto;
-	color: var(--titlebar-tab-icon-font-color);
-}
-
-.fsbl-tab-logo i {
-	font-size: 14px;
-}
-
-.fsbl-tab-logo img {
-	height: 18px;
-	width: 18px;
-}
-
-.fsbl-tab .fsbl-tab-style {
-	position: relative;
-	height: 100%;
-	left: 0px;
-}
-.fsbl-tab-region-drag-area:before {
-	content: "a";
-	visibility: hidden;
-}
-
-/* Without content, the ghost-tab caused really strange sizing behaviors. */
-.ghost-tab:before {
-	content: "a";
-	visibility: hidden;
-}
-
-.ghost-tab {
-	background-color: var(--titlebar-tab-ghost-background-color);
-	border-right: 1px solid var(--titlebar-tab-ghost-border-colorcolor);
-	border-top: 1px solid var(--titlebar-tab-ghost-border-color);
-	width: 175px;
-	opacity: 0.7;
-	position: relative;
-	height: 100%;
-	left: 0px;
-}
-
-/* Styles the zoom pop up */
-.fsbl-zoom-popup {
-	display: none;
-	position: absolute;
-	top: -15px;
-	right: 10px;
-	background-color: var(--tertiary-background-color);
-	padding: 5px;
-	color: var(--font-color);
-	opacity: 0.8;
-	font-size: 0.9em;
-}
-
-.fsbl-zoom-popup button {
-	width: unset;
-	font-size: unset;
-	padding: 1px 5px 1px 5px;
-	margin: 0px 2px 0px 2px;
-}
-
-.fsbl-zoom-popup-text {
-	margin-left: 3px;
-}
-
-.fsbl-zoom-popup-title {
-	margin-left: 0px;
-}
-
-.fsbl-zoom-popup-heading {
-	margin-left: 4px;
-	margin-bottom: 4px;
-}
-
-/* Responsive Sizing */
-/* At 345px, the Drag-to-Share icon will be removed. */
-@media screen and (min-width: 0px) and (max-width: 345px) {
-	.fsbl-icon.ff-share {
-		display: none !important;
-	}
-	.fsbl-tabs-multiple .fsbl-header-right {
-		padding-left: 70px; /* leave some space for a user to grab */
-	}
-	.fsbl-header-title {
-		max-width: 50%;
-	}
-}
-
-/* At 310px, the left section of the header will be removed. */
-@media screen and (min-width: 0px) and (max-width: 310px) {
-	.fsbl-header-left {
-		display: none !important;
-	}
-	.fsbl-tabs-multiple .fsbl-header-right {
-		padding-left: 60px; /* leave some space for a user to grab */
-	}
-}
-
-/* At 280px, the docking icon will be removed. */
-@media screen and (min-width: 0px) and (max-width: 280px) {
-	.fsbl-icon.ff-detached,
-	.fsbl-icon.ff-attached {
-		display: none !important;
-	}
-	.fsbl-tabs-multiple .fsbl-header-right {
-		padding-left: 50px; /* this will leave some space for window dragging */
-	}
-}
-
-/* At 245px, the maximize icon will be removed. */
-@media screen and (min-width: 0px) and (max-width: 245px) {
-	.fsbl-icon.fsbl-maximize {
-		display: none !important;
-	}
-	.fsbl-tabs-multiple .fsbl-header-right {
-		padding-left: 40px; /* this will leave some space for window dragging */
-	}
-}
-
-/* At 210px, all other icons icon will be removed. */
-@media screen and (min-width: 0px) and (max-width: 210px) {
-	.fsbl-icon.fsbl-minimize {
-		display: none !important;
-	}
-	.fsbl-icon.fsbl-always-on-top {
-		display: none !important;
-	}
-	.icon-avatar-wrapper {
-		display: none !important;
-	}
-
-	.fsbl-tabs-multiple .fsbl-header-right {
-		padding-left: 30px; /* this will leave some space for window dragging */
-	}
-	.fsbl-header-title {
-		max-width: 25%;
-	}
-}
-
-.finsemble-toolbar .icon-avatar {
-	padding: 3px;
-	font-size: 7px;
-	position: relative;
-	top: -1px;
-}
-
-.finsemble-toolbar .icon-avatar > i {
-	position: relative;
-	top: 1px;
-}
-
-.tab__input {
-	font-size: 12px;
-	padding: 2px 10px;
-	width: 80%;
-	border: none;
-	border-bottom: 2px solid #73c3ff;
-	color: white;
-	transition: none;
-	background: transparent;
-}
-
-input:focus {
-	outline: none;
-	animation: inputHighlighter 0.3s ease;
-}
-
-@keyframes inputHighlighter {
-	from {
-		background: #527bae;
-		width: 0;
-	}
-
-	to {
-		width: 80%;
-		background: transparent;
-	}
-}
-
-.tab-region-wrapper {
-	display: flex;
-}
+/*!
+ * windowTitleBar.css
+ * Copyright 2017 - 2020 by ChartIQ, Inc.
+ * All rights reserved.
+ */
+@import url("./linkerWindow.css");
+
+.fsbl-drag-handle {
+	z-index: 2147483641;
+	/* use below with window scrollbar hack */
+	position: fixed;
+	top: 5px !important;
+	margin-top: 0px !important;
+	/* use below without window scrollbar hack */
+	/* position: absolute; */
+	/* top: 0px!important; */
+	/* background-color: red; */
+}
+
+.fsbl-drag-handle-native-movement {
+	z-index: 2147483641;
+	/* use below with window scrollbar hack */
+	position: fixed;
+	top: 5px !important;
+	margin-top: 0px !important;
+	-webkit-app-region: drag;
+}
+
+.fsbl-drag-handle.hidden {
+	display: none;
+}
+
+.fsbl-drag-handle-native-movement.hidden {
+	display: none;
+}
+
+.fsbl-tabs-multiple .fsbl-header-right {
+	padding-left: 80px; /* leave some space for a user to grab */
+}
+
+html:before,
+html:after,
+body:before,
+body:after {
+	content: "";
+	position: fixed;
+	display: block;
+	z-index: 2147483640;
+	background-color: var(--window-border-color);
+}
+
+/* 
+* The next few items give the border of windows 
+* thickness so that the user can see them
+*/
+html:before {
+	height: 1px;
+	left: 0;
+	right: 0;
+	top: 0;
+}
+
+html:after {
+	width: 1px;
+	top: 0;
+	right: 0;
+	bottom: 0;
+}
+
+body:before {
+	height: 1px;
+	right: 0;
+	bottom: 0;
+	left: 0;
+}
+
+body:after {
+	width: 1px;
+	top: 0;
+	bottom: 0;
+	left: 0;
+}
+
+.fsbl-header {
+	font-family: var(--font-family);
+	font-size: var(--titleBar-font-size);
+	font-weight: var(--titleBar-font-weight);
+	text-align: center;
+	display: flex;
+	height: var(--titleBar-height);
+	position: fixed;
+	align-items: flex-end;
+	flex-direction: row;
+	justify-content: space-between;
+	background: var(--titleBar-background-inactive-color);
+	width: 100%;
+	left: 0;
+	z-index: 2147483639;
+	top: 0;
+	color: var(--titleBar-inactive-font-color);
+}
+
+html.desktop-active .title-text {
+	background: transparent;
+	color: var(--titleBar-active-font-color);
+}
+
+.fsbl-header-title {
+	position: relative;
+	height: 100%;
+	padding-left: 8px;
+	overflow: hidden;
+	align-items: center;
+	display: flex;
+	padding-right: 14px;
+	transition: background-color 0.2s ease;
+	border-top-left-radius: 10px;
+	border-top-right-radius: 10px;
+	background-color: var(--titlebar-tab-inactive-background-color);
+}
+
+.fsbl-header-title[data-hover="true"] {
+	background-color: var(--core-primary-2);
+}
+
+html.desktop-active .fsbl-header-title .fsbl-tab-title {
+	color: var(--titlebar-tab-active-font-color);
+}
+
+html.desktop-active .fsbl-header-title[data-hover="true"] {
+	background-color: var(--titlebar-tab-active-background-color);
+	color: var(--titlebar-tab-active-font-color);
+}
+
+.fsbl-header-left {
+	height: calc(100% - 5px); /* leave some space for the resize cursor */
+	margin-left: 2px;
+	left: 0px;
+	align-content: center;
+	align-items: center;
+	justify-content: flex-start;
+	display: flex;
+}
+
+.fsbl-header-center {
+	height: calc(100% - 10px);
+	align-content: center;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 80%;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	--webkit-user-select: none;
+	user-select: none;
+	position: relative;
+	padding-bottom: 3px; /* This needs to be half of the thing subtracted from the height. e.g. height = 100% - 6px, then this is 3px) */
+}
+
+.fsbl-tabs-enabled .fsbl-header-center {
+	height: 100%;
+	width: 100%;
+	padding-bottom: 0px;
+}
+
+html.desktop-active .fsbl-header-right {
+	background: var(--titleBar-background-active-color);
+}
+
+.fsbl-header-right {
+	margin-right: 2px;
+	height: calc(100% - 5px); /* leave some space for the resize cursor */
+	align-content: center;
+	display: flex;
+	justify-content: flex-end;
+	z-index: 5;
+}
+
+/* Offset the contents back up, to make up for half the resize cursor offset */
+.fsbl-header-right > * {
+	margin-top: -2px;
+}
+
+html.desktop-active .fsbl-tab-region-drag-area {
+	background-color: var(--titleBar-background-inactive-color);
+}
+
+.tab-drop-region {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	z-index: 30000;
+}
+
+.fsbl-icon {
+	position: relative;
+	color: var(--titleBar-inactive-font-color);
+	font-size: var(--titleBar-icon-font-size);
+	width: 10px;
+	padding: 0px 6px;
+	height: calc(100% + 1px);
+	margin-top: -3px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: background 0.2s ease;
+	cursor: pointer;
+	box-sizing: content-box !important;
+}
+
+.fsbl-icon svg path {
+	fill: var(--titlebar-icon-color);
+}
+
+.fsbl-icon[data-hover="true"] {
+	color: var(--titlebar-icon-hover-color);
+}
+
+/* So it sits over the border*/
+.fsbl-icon.fsbl-close {
+	margin-right: -1px;
+}
+
+.fsbl-icon.fsbl-close[data-hover="true"] {
+	color: var(--titleBar-button-hover-negative-color);
+}
+
+html.desktop-active .fsbl-icon.fsbl-close[data-hover="true"] {
+	color: var(--titleBar-button-hover-negative-color);
+}
+
+.fsbl-icon-highlighted {
+	-webkit-transition: background-color 300ms ease-in-out;
+	transition: background-color 300ms ease-in-out;
+	background-color: var(--titleBar-button-highlight-inactive-color);
+	border-radius: 25px;
+	color: var(--titlebar-icon-hover-color);
+}
+
+html.desktop-active .fsbl-icon-highlighted {
+	background-color: var(--titleBar-button-highlight-active-color);
+}
+
+.fsbl-minimize {
+	align-items: center;
+	margin-top: -2px;
+	transition: 0.2s all;
+}
+
+.fsbl-ejector {
+	-webkit-transition: background-color 300ms ease-in-out;
+	transition: background-color 300ms ease-in-out;
+	background-color: var(--titleBar-button-highlight-active-color);
+}
+
+.linkerSection {
+	display: flex;
+	height: 100%;
+	cursor: pointer;
+}
+
+.linker-groups {
+	height: 100%;
+	display: flex;
+	flex-direction: row;
+	align-items: flex-start;
+	margin-top: -2px;
+}
+
+.linker-group {
+	width: 3px;
+	height: 13px;
+	margin-left: 3px;
+	border-radius: 4px;
+	border: 1px solid transparent;
+	box-sizing: content-box; /* otherwise any box-sizing on the page can override how our linker appears */
+}
+
+.linker-group-accessible {
+	width: 1em !important;
+	padding-bottom: 4px;
+	margin-bottom: 4px;
+	color: var(--titleBar-linker-font-color);
+}
+
+.linkerContainer {
+	justify-content: center;
+	align-items: flex-start;
+}
+
+.linker-group:hover {
+	cursor: pointer;
+	border: 1px solid var(--content-button-neutral-hover-color);
+}
+
+.linker-group:nth-last-child(1) {
+	margin-right: 5px;
+}
+
+.fsbl-linker {
+	cursor: pointer;
+	display: flex;
+	/* So it sits over the border*/
+	align-items: center;
+	justify-content: center;
+	align-content: center;
+	transition: background 0.3s ease;
+	position: relative;
+	width: 12px;
+	border-radius: 20px;
+	margin-right: 2px;
+}
+
+.fsbl-share {
+	cursor: pointer;
+	display: flex;
+	/* So it sits over the border*/
+	align-items: center;
+	justify-content: center;
+	align-content: center;
+	transition: background 0.3s ease;
+	position: relative;
+	width: 14px;
+	border-radius: 20px;
+	margin-right: 2px;
+}
+
+.fsbl-share > svg {
+	margin-top: 1px;
+}
+
+.fsbl-linker svg #prefix__a {
+	fill: var(--titleBar-linker-font-color);
+}
+
+.fsbl-linker svg #prefix__b {
+	fill: var(--titleBar-linker-font-color-blur);
+}
+
+.fsbl-linker:hover,
+.fsbl-linker[data-hover="true"], /* deprecated */
+.fsbl-share[data-hover="true"] {
+	background-color: var(--titleBar-button-hover-active-color);
+}
+
+.ff-minimize {
+	padding-bottom: 3px;
+}
+
+.ff-linker:before {
+	padding-top: 3px;
+}
+
+.ff-share:before {
+	padding-top: 3px;
+}
+
+.ff-maximize,
+.ff-close,
+.ff-detached,
+.ff-attached {
+	padding-top: 2px;
+	transition: 0.2s all;
+}
+
+.ff-always-on-top {
+	padding-top: 3px;
+	font-size: 11px;
+}
+
+.ff-restore {
+	padding-top: 4px;
+}
+
+.fsbl-tab {
+	height: 100%;
+	padding-left: 8px;
+	position: relative;
+	display: inline-flex;
+	align-content: center;
+	align-items: center;
+	vertical-align: top;
+	background-color: var(--titlebar-tab-inactive-background-color);
+	color: var(--titlebar-tab-inactive-font-color);
+	border-top-right-radius: 10px;
+	border-top-left-radius: 10px;
+	user-select: none;
+	box-sizing: border-box;
+	justify-content: flex-start;
+	transition: color 0.2s ease;
+}
+
+.fsbl-active-tab {
+	background-color: var(--titlebar-tab-active-background-color);
+	color: var(--titlebar-tab-active-font-color);
+}
+
+.fsbl-tab[data-hover="true"] {
+	background-color: var(--titlebar-tab-hover-background-color);
+	color: var(--titlebar-tab-hover-font-color);
+}
+
+.tab-region-wrapper {
+	display: flex;
+}
+
+/* When there are multiple tabs, no border for the last tab on the right side. */
+.fsbl-tabs-multiple .tab-region-wrapper > div:last-child {
+	border-right: none;
+}
+
+.fsbl-tab-area {
+	height: 100%;
+	display: flex;
+	width: 100%;
+	position: absolute;
+	left: 0;
+	overflow: scroll;
+}
+
+.fsbl-tab-area::-webkit-scrollbar {
+	display: none;
+}
+
+.fsbl-tab-editor {
+	position: relative;
+	z-index: 29999;
+}
+
+.fsbl-tab-title {
+	text-align: left;
+	padding-left: 1px;
+	min-width: 0;
+	color: var(--titlebar-tab-inactive-font-color);
+	display: flex;
+	align-items: center;
+}
+
+/* The block below allows for a flex-child to have text truncated with an ellipsis. */
+.fsbl-tab-title .title-text {
+	flex: 1;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+html.desktop-active .fsbl-active-tab .fsbl-tab-title {
+	color: var(--titlebar-tab-active-font-color);
+}
+
+.fsbl-tab-close {
+	font-size: 8px;
+	padding: 0px 10px;
+	visibility: hidden;
+	cursor: pointer;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	position: absolute;
+	right: 0;
+	z-index: 30001;
+}
+
+.fsbl-tab-close:hover {
+	-webkit-text-stroke: 1px;
+}
+
+.fsbl-tab:hover > .fsbl-tab-close {
+	visibility: visible;
+}
+
+.fsbl-tab-logo {
+	margin: 0px 7px;
+	padding-top: 3px;
+	width: auto;
+	height: auto;
+	color: var(--titlebar-tab-icon-font-color);
+}
+
+.fsbl-tab-logo i {
+	font-size: 14px;
+}
+
+.fsbl-tab-logo img {
+	height: 18px;
+	width: 18px;
+}
+
+.fsbl-tab .fsbl-tab-style {
+	position: relative;
+	height: 100%;
+	left: 0px;
+}
+.fsbl-tab-region-drag-area:before {
+	content: "a";
+	visibility: hidden;
+}
+
+/* Without content, the ghost-tab caused really strange sizing behaviors. */
+.ghost-tab:before {
+	content: "a";
+	visibility: hidden;
+}
+
+.ghost-tab {
+	background-color: var(--titlebar-tab-ghost-background-color);
+	border-right: 1px solid var(--titlebar-tab-ghost-border-colorcolor);
+	border-top: 1px solid var(--titlebar-tab-ghost-border-color);
+	width: 175px;
+	opacity: 0.7;
+	position: relative;
+	height: 100%;
+	left: 0px;
+}
+
+/* Styles the zoom pop up */
+.fsbl-zoom-popup {
+	display: none;
+	position: absolute;
+	top: -15px;
+	right: 10px;
+	background-color: var(--tertiary-background-color);
+	padding: 5px;
+	color: var(--font-color);
+	opacity: 0.8;
+	font-size: 0.9em;
+}
+
+.fsbl-zoom-popup button {
+	width: unset;
+	font-size: unset;
+	padding: 1px 5px 1px 5px;
+	margin: 0px 2px 0px 2px;
+}
+
+.fsbl-zoom-popup-text {
+	margin-left: 3px;
+}
+
+.fsbl-zoom-popup-title {
+	margin-left: 0px;
+}
+
+.fsbl-zoom-popup-heading {
+	margin-left: 4px;
+	margin-bottom: 4px;
+}
+
+/* Responsive Sizing */
+/* At 345px, the Drag-to-Share icon will be removed. */
+@media screen and (min-width: 0px) and (max-width: 345px) {
+	.fsbl-icon.ff-share {
+		display: none !important;
+	}
+	.fsbl-tabs-multiple .fsbl-header-right {
+		padding-left: 70px; /* leave some space for a user to grab */
+	}
+	.fsbl-header-title {
+		max-width: 50%;
+	}
+}
+
+/* At 310px, the left section of the header will be removed. */
+@media screen and (min-width: 0px) and (max-width: 310px) {
+	.fsbl-header-left {
+		display: none !important;
+	}
+	.fsbl-tabs-multiple .fsbl-header-right {
+		padding-left: 60px; /* leave some space for a user to grab */
+	}
+}
+
+/* At 280px, the docking icon will be removed. */
+@media screen and (min-width: 0px) and (max-width: 280px) {
+	.fsbl-icon.ff-detached,
+	.fsbl-icon.ff-attached {
+		display: none !important;
+	}
+	.fsbl-tabs-multiple .fsbl-header-right {
+		padding-left: 50px; /* this will leave some space for window dragging */
+	}
+}
+
+/* At 245px, the maximize icon will be removed. */
+@media screen and (min-width: 0px) and (max-width: 245px) {
+	.fsbl-icon.fsbl-maximize {
+		display: none !important;
+	}
+	.fsbl-tabs-multiple .fsbl-header-right {
+		padding-left: 40px; /* this will leave some space for window dragging */
+	}
+}
+
+/* At 210px, all other icons icon will be removed. */
+@media screen and (min-width: 0px) and (max-width: 210px) {
+	.fsbl-icon.fsbl-minimize {
+		display: none !important;
+	}
+	.fsbl-icon.fsbl-always-on-top {
+		display: none !important;
+	}
+	.icon-avatar-wrapper {
+		display: none !important;
+	}
+
+	.fsbl-tabs-multiple .fsbl-header-right {
+		padding-left: 30px; /* this will leave some space for window dragging */
+	}
+	.fsbl-header-title {
+		max-width: 25%;
+	}
+}
+
+.finsemble-toolbar .icon-avatar {
+	padding: 3px;
+	font-size: 7px;
+	position: relative;
+	top: -1px;
+}
+
+.finsemble-toolbar .icon-avatar > i {
+	position: relative;
+	top: 1px;
+}
+
+.tab__input {
+	font-size: 12px;
+	padding: 2px 10px;
+	width: 80%;
+	border: none;
+	border-bottom: 2px solid #73c3ff;
+	color: white;
+	transition: none;
+	background: transparent;
+}
+
+input:focus {
+	outline: none;
+	animation: inputHighlighter 0.3s ease;
+}
+
+@keyframes inputHighlighter {
+	from {
+		background: #527bae;
+		width: 0;
+	}
+
+	to {
+		width: 80%;
+		background: transparent;
+	}
+}