@finsemble/finsemble-ui 6.6.1 → 7.0.0-beta-X

package/react/assets/css/linkerWindow.css

@@ -5,7 +5,7 @@
  */
 
 body .linkerContainer {
-	margin: 0px;
+	margin: 0;
 	border: 0;
 	font-size: var(--menu-font-size);
 	font-weight: var(--font-weight);
@@ -95,6 +95,18 @@ body .linkerContainer {
 	border: 1px solid #f29a01;
 }
 
+.channel7 .linker-glyph,
+.linker-group.channel7 {
+	background-color: #3c1d5f;
+	border: 1px solid #341853;
+}
+
+.channel8 .linker-glyph,
+.linker-group.channel8 {
+	background-color: #690f2d;
+	border: 1px solid #5c0d27;
+}
+
 /* To reduce the number of channels in the linker simply hide them with CSS!
 .channel6, .channel5 {
 	display: none;
@@ -113,12 +125,12 @@ body .linkerContainer {
     display: block;
     visibility: visible;
     top: -10px;
-    position: relative;	
+    position: relative;
 }
 */
 
 .active-linker-group {
 	color: var(--menu-linker-selected-font-color);
 	font-size: var(--menu-linker-selected-font-size);
-	margin: 2px 2px 0px 0px;
+	margin: 2px 2px 0 0;
 }

package/react/assets/css/menus.css

@@ -30,8 +30,8 @@ This attribute is never set for menus with a fixed height (e.g. <MenuShell heigh
 
 html.menu-portal body {
 	overflow-y: auto;
-	padding: 0px;
-	margin: 0px;
+	padding: 0;
+	margin: 0;
 	background: var(--toolbar-background-color);
 }
 
@@ -64,9 +64,9 @@ html.menu-portal body.menu-no-scroll {
 	overflow-y: auto;
 	list-style-type: none;
 	width: 100%;
-	padding-left: 0px;
-	margin-top: 0px;
-	margin-bottom: 0px;
+	padding-left: 0;
+	margin-top: 0;
+	margin-bottom: 0;
 }
 
 .menu-secondary {
@@ -80,10 +80,9 @@ html.menu-portal body.menu-no-scroll {
 The "focused" attribute is set during keyboard navigation.
 */
 
-.menu-item[focused],
-.menu-item-icon[focused],
-.menu-item:hover,
 .menu-item:focus,
+.menu-item-icon:focus,
+.menu-item:hover,
 .finsemble-toolbar-button:hover {
 	background: var(--menu-content-hover-color);
 	outline: none;
@@ -98,7 +97,7 @@ The "focused" attribute is set during keyboard navigation.
 	flex-direction: row;
 	align-items: center;
 	padding-left: 14px;
-	margin: 0px 5px;
+	margin: 0 5px;
 	cursor: pointer;
 	position: relative;
 	border-radius: 20px;
@@ -111,7 +110,7 @@ The "focused" attribute is set during keyboard navigation.
 
 .menu-item .ff-adp-hamburger {
 	color: var(--menu-dragHandle-color);
-	padding: 3px 7px 0px 0px;
+	padding: 3px 7px 0 0;
 	cursor: grab;
 }
 
@@ -169,7 +168,7 @@ The "focused" attribute is set during keyboard navigation.
 
 /* padding for favorite makers and trashcans */
 .menu-item-row-push-right > * {
-	padding: 0px 10px;
+	padding: 0 10px;
 }
 
 .ff-adp-trash-outline:hover {
@@ -184,6 +183,7 @@ The "focused" attribute is set during keyboard navigation.
 	.menu-toggle-small {
 		display: inline-flex;
 	}
+
 	.menu-toggle-large {
 		display: none;
 	}
@@ -191,5 +191,5 @@ The "focused" attribute is set during keyboard navigation.
 
 /* Remove border around system tray menu */
 .system-tray {
-	margin: 0px;
+	margin: 0;
 }

package/react/assets/css/notificationsCenter.css

@@ -1,15 +1,16 @@
 @import url("https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap");
-
 @import "./shared/animations.css";
 
 body.notifications-center-body {
 	background-color: transparent;
 	bottom: 0;
 	margin: 0;
-	overflow: hidden;
+	/* stylelint-disable-next-line declaration-no-important */
+	overflow: hidden !important; /* necessary to hide default scrollbar, cause the parent html element is restyled at the `hackScrollbar()` function */
 }
 
 body.notifications-center-body.notifications-popped-in {
+	/* stylelint-disable-next-line declaration-no-important */
 	margin-top: 0 !important; /* necessary to push the window up to take over the hidden titlebar when the center is popped in */
 }
 
@@ -38,7 +39,7 @@ body.notifications-center-body.notifications-popped-in {
 
 .cards-container {
 	/* Full window minus Search and Filter rows height  */
-	height: Calc(100vh - 91px);
+	height: calc(100vh - 91px);
 	overflow-y: auto;
 	overflow-x: hidden;
 }
@@ -103,8 +104,7 @@ body.notifications-center-body.notifications-popped-in {
 
 #notifications-center-controls {
 	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
+	flex-flow: row wrap;
 	align-items: center;
 	padding: 10px 0; /* change to margin when notifications search is implemented */
 }
@@ -113,7 +113,11 @@ body.notifications-center-body.notifications-popped-in {
 	display: flex;
 	flex-direction: row;
 	width: 100%;
-	padding: 2px 0;
+	padding: 5px 0;
+}
+
+.notifications-center-controls__row.center {
+	justify-content: center;
 }
 
 .notifications-center-controls__filter-btn {
@@ -125,9 +129,10 @@ body.notifications-center-body.notifications-popped-in {
 	font-family: var(--notification-font-family);
 	font-size: 11px;
 	color: var(--font-color);
-	padding: 0px 7px;
+	padding: 0 7px;
 	margin: 0 3px;
 	cursor: pointer;
+	white-space: nowrap;
 }
 
 .notifications-center-controls__filter-btn.active {
@@ -168,35 +173,24 @@ body.notifications-center-body.notifications-popped-in {
 	fill: var(--accent-primary);
 }
 
-@keyframes slideBackAndForth {
-	0% {
-		transform: translateX(0);
-	}
-	50% {
-		transform: translateX(5px);
-	}
-	100% {
-		transform: translateX(0);
-	}
-}
-
 .drawer-enter {
 	animation: slide-in-right 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
 }
+
 .drawer-exit {
 	animation: slide-out-right 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
 }
 
-/* Notification card and views*/
+/* Notification card and views */
 .notification-card {
 	background-color: var(--core-primary);
-	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.5);
+	box-shadow: 0 0 8px 0 rgb(0 0 0 / 50%);
 	display: flex;
 	flex-direction: column;
 	font-family: var(--notification-font-family);
 	min-height: 120px;
 	padding: 8px 10px;
-	margin: 0 5px 0 5px;
+	margin: 0 5px;
 }
 
 .notification-card.read {
@@ -259,6 +253,9 @@ i.default-img.large {
 	display: grid;
 	grid-template-rows: 30px;
 	align-items: center;
+	grid-template-columns: minmax(80px, auto);
+	justify-items: end;
+	margin-left: 2px;
 }
 
 .notifications-toast__offscreen .notification-card__more-options__no-toggle,
@@ -266,13 +263,6 @@ i.default-img.large {
 	grid-template-columns: 25px 20px;
 }
 
-.notification-card__more-options__no-toggle,
-.notification-card__more-options__toggle {
-	grid-template-columns: minmax(80px, auto);
-	justify-items: end;
-	margin-left: 2px;
-}
-
 .notification-card__more-options__toggle .notification-card_overflow_menu,
 .notification-card__more-options__toggle:hover .notification-card_timestamp {
 	display: none;
@@ -302,7 +292,7 @@ i.default-img.large {
 	-webkit-box-orient: vertical;
 	-webkit-line-clamp: 4;
 	color: var(--core-primary-5);
-	display: -webkit-box;
+	display: box;
 	overflow: hidden;
 }
 
@@ -472,7 +462,7 @@ i.default-img.large {
 
 .finsemble-icon {
 	display: grid;
-	margin: 0px 7px;
+	margin: 0 7px;
 }
 
 .finsemble-icon i {
@@ -577,7 +567,7 @@ body.notifications-toasts-body {
 	bottom: 0;
 	overflow: hidden;
 	width: 100%;
-	background-color: rgba(0, 0, 0, 0);
+	background-color: rgb(0 0 0 / 0%);
 }
 
 .opaque body.notifications-toasts-body {
@@ -587,7 +577,7 @@ body.notifications-toasts-body {
 }
 
 .notifications-toast__offscreen {
-	-webkit-transform: translateX(1000px);
+	transform: translateX(1000px);
 	transform: translateX(1000px);
 	animation: slide-in-right-opaque 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
 }
@@ -595,3 +585,29 @@ body.notifications-toasts-body {
 .notifications-toast-exit-active {
 	animation: slide-out-right-opaque 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
 }
+
+.notifications-center-controls__filter-btn i {
+	padding-right: 5px;
+}
+
+.notifications-center-controls__filter-btn i.icon_active {
+	color: var(--accent-positive);
+}
+
+.visible {
+	display: flex;
+}
+
+.invisible {
+	display: none;
+}
+
+.enabled {
+	cursor: pointer;
+	opacity: 1;
+}
+
+.disabled {
+	cursor: default;
+	opacity: 0.4;
+}

package/react/assets/css/processMonitor.css

@@ -5,7 +5,7 @@
  */
 
 body.process-monitor {
-	margin: 0px;
+	margin: 0;
 	overflow: hidden;
 	font-size: var(--procMonitor-font-size);
 	font-weight: var(--procMonitor-font-weight);
@@ -67,7 +67,8 @@ body.process-monitor {
 	border-bottom: 1px solid var(--procMonitor-list-border-color);
 	padding-right: 15px;
 	align-items: center;
-	/*Account for scrollbar.*/
+
+	/* Account for scrollbar. */
 }
 
 .process-name,
@@ -98,7 +99,7 @@ body.process-monitor {
 }
 
 .list-header-name {
-	border-left: 0px;
+	border-left: 0;
 }
 
 .statistic {
@@ -117,9 +118,11 @@ body.process-monitor {
 .child-window-name {
 	font-weight: var(--procMonitor-component-name-font-weight);
 }
+
 .advanced .child-window-name {
 	cursor: pointer;
 }
+
 .child-window-actions {
 	width: 26px;
 	display: inline-flex;
@@ -209,5 +212,5 @@ body.process-monitor {
 .process-monitor ::-webkit-scrollbar-thumb {
 	cursor: pointer;
 	border-radius: inherit;
-	background-color: rgba(0, 0, 0, 0.2);
+	background-color: rgb(0 0 0 / 20%);
 }

package/react/assets/css/search.css

@@ -54,7 +54,7 @@
 	flex-direction: row;
 	position: relative;
 	padding: 10px 10px 10px 14px;
-	margin: 0px 5px;
+	margin: 0 5px;
 	font-weight: var(--font-weight-2);
 	color: var(--search-menu-header-color);
 	background: transparent;

package/react/assets/css/shared/animations.css

@@ -15,6 +15,7 @@
 		transform: translateZ(-1400px) translateY(800px);
 		opacity: 0;
 	}
+
 	100% {
 		transform: translateZ(0) translateY(0);
 		opacity: 1;
@@ -35,6 +36,7 @@
 		transform: translateX(0);
 		opacity: 1;
 	}
+
 	100% {
 		transform: translateX(1000px);
 		opacity: 0;
@@ -53,16 +55,18 @@
 
 @keyframes slide-in-right {
 	0% {
-		-webkit-transform: translateX(1000px);
+		transform: translateX(1000px);
 		transform: translateX(1000px);
 		opacity: 0;
 	}
+
 	100% {
-		-webkit-transform: translateX(0);
+		transform: translateX(0);
 		transform: translateX(0);
 		opacity: 1;
 	}
 }
+
 .slide-in-right {
 	animation: slide-in-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
 }
@@ -76,6 +80,7 @@
 	0% {
 		transform: translateX(0);
 	}
+
 	100% {
 		transform: translateX(1000px);
 	}
@@ -89,11 +94,12 @@
 
 @keyframes slide-in-right-opaque {
 	0% {
-		-webkit-transform: translateX(1000px);
+		transform: translateX(1000px);
 		transform: translateX(1000px);
 	}
+
 	100% {
-		-webkit-transform: translateX(0);
+		transform: translateX(0);
 		transform: translateX(0);
 	}
 }

package/react/assets/css/shared/common.css

@@ -0,0 +1,40 @@
+/* chverons */
+.chevron-container {
+	display: flex;
+	align-items: center;
+}
+
+.ff-chevron-left::before {
+	padding-right: 2px;
+}
+
+.ff-chevron-right::before {
+	padding-left: 2px;
+}
+
+.scroll-button {
+	color: var(--toolbar-scroll-button-color);
+	margin: 8px 3px;
+	padding: 5px;
+	font-size: 10px;
+	border: 1px solid transparent;
+	border-radius: 50px;
+	height: 10px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.scroll-button:hover {
+	background: var(--toolbar-button-hover-color);
+	cursor: pointer;
+}
+
+.greyedOut {
+	opacity: 0.3;
+}
+
+.greyedOut:hover {
+	background: transparent;
+	cursor: default;
+}

package/react/assets/css/tags.css

@@ -9,7 +9,7 @@
 	border-radius: 12px;
 	background: var(--tag-background-color);
 	color: var(--tag-font-color);
-	padding: 0px 5px 0px 9px;
+	padding: 0 5px 0 9px;
 	display: flex;
 	justify-content: center;
 	align-items: center;
@@ -43,7 +43,7 @@
 }
 
 .tags-menu-wrapper span i {
-	padding: 0px 5px;
+	padding: 0 5px;
 	font-size: 6px;
 }
 
@@ -56,13 +56,13 @@
 	overflow-y: auto;
 	border-radius: 3px;
 	background-color: var(--tag-background-color);
-	padding: 5px 0px;
+	padding: 5px 0;
 	margin-top: 5px;
 }
 
 .tags-menu ul {
-	padding: 0px;
-	margin: 0px;
+	padding: 0;
+	margin: 0;
 }
 
 .tags-menu li {
@@ -71,7 +71,7 @@
 	font-size: 11px;
 	list-style: none;
 	color: var(--tag-font-color);
-	padding: 0px 6px;
+	padding: 0 6px;
 	display: flex;
 	align-items: center;
 }
@@ -89,8 +89,8 @@
 	border-radius: 12px;
 	background-color: var(--tag-background-color);
 	user-select: none;
-	margin: 0px 4px 4px 0px;
-	padding: 5px 7px 0px 9px;
+	margin: 0 4px 4px 0;
+	padding: 5px 7px 0 9px;
 }
 
 .app-tag .tag-content {
@@ -110,7 +110,7 @@
 
 .tag-delete {
 	cursor: pointer;
-	padding: 0px 2px;
+	padding: 0 2px;
 	font-size: 8px;
 }
 
@@ -127,7 +127,7 @@
 }
 
 .tag-content .ff-close {
-	padding-top: 0px;
+	padding-top: 0;
 }
 
 .label-bar .ff-close {

package/react/assets/css/toolbar.css

@@ -6,13 +6,13 @@
 
 .finsemble-toolbar-body {
 	height: 100%;
-	margin: 0px;
+	margin: 0;
 	font-weight: var(--toolbar-font-weight);
 	font-size: var(--toolbar-font-size);
 	color: var(--toolbar-font-color);
 	line-height: 1.3em;
 	vertical-align: middle;
-	-webkit-user-select: none;
+	user-select: none;
 	overflow: hidden;
 }
 
@@ -72,8 +72,8 @@
 }
 
 .finsemble-toolbar-button {
-	padding: 0px 8px 2px 8px;
-	margin: 5px 0px;
+	padding: 0 8px 2px;
+	margin: 5px 0;
 	border: 1px solid var(--toolbar-background-color);
 	display: flex;
 	align-items: center;
@@ -98,6 +98,7 @@
 }
 
 .finsemble-toolbar-button.selected {
+	/* stylelint-disable-next-line declaration-no-important */
 	background-color: var(--accent-primary-1) !important;
 }
 
@@ -113,6 +114,7 @@
 
 @media screen and (max-width: 270px) {
 	#advanced-app-launcher {
+		/* stylelint-disable-next-line declaration-no-important */
 		display: none !important;
 	}
 
@@ -173,11 +175,11 @@
 	align-self: center;
 }
 
-.divider:before {
+.divider::before {
 	height: 24px;
 	border-right: var(--toolbar-separator);
 	content: "";
-	margin: 0em 0.25em;
+	margin: 0 0.25em;
 }
 
 img.pinned-icon {
@@ -195,6 +197,7 @@ img.pinned-icon {
 }
 
 .pinned-workspace-icon {
+	/* stylelint-disable-next-line declaration-no-important */
 	color: var(--toolbar-icon-workspace-color) !important;
 }
 
@@ -247,7 +250,7 @@ img.pinned-icon {
 .finsemble-toolbar-drag-handle {
 	margin-left: 3px;
 	padding-left: 2px;
-	padding-right: 0px;
+	padding-right: 0;
 	padding-top: 15px;
 	cursor: grab;
 }
@@ -260,18 +263,20 @@ img.pinned-icon {
 .finsemble-toolbar-drag-handle-native-movement {
 	margin-left: 3px;
 	padding-left: 2px;
-	padding-right: 0px;
+	padding-right: 0;
 	padding-top: 15px;
 	-webkit-app-region: drag;
 	cursor: grab;
 }
 
 .fsbl-share-scrim {
+	/* stylelint-disable-next-line declaration-no-important */
 	display: none !important;
 }
 
 .first-pinned-component {
-	margin-left: 0px !important;
+	/* stylelint-disable-next-line declaration-no-important */
+	margin-left: 0 !important;
 }
 
 .icon-only > i {
@@ -303,7 +308,7 @@ img.pinned-icon {
 
 .searchContainer {
 	display: flex;
-	margin: 0px 2px;
+	margin: 0 2px;
 	margin-top: -1px;
 }
 
@@ -320,10 +325,11 @@ img.pinned-icon {
 	overflow: hidden;
 	white-space: nowrap;
 	transition-timing-function: ease-in-out -0.1;
+	/* stylelint-disable-next-line declaration-block-no-shorthand-property-overrides */
 	transition: width 0.5s, background-color 0s 0s;
 }
 
-.searchInput.full[contenteditable="true"]:empty:before {
+.searchInput.full[contenteditable="true"]:empty::before {
 	content: attr(placeholder);
 }
 
@@ -333,7 +339,8 @@ img.pinned-icon {
 	width: 31px;
 	cursor: pointer;
 	color: transparent; /* hide the text when in compact mode */
-	/*transition: width .5s,background-color 0s .5s;*/
+
+	/* transition: width .5s,background-color 0s .5s; */
 }
 
 .searchInput.compact::before {
@@ -360,7 +367,7 @@ img.pinned-icon {
 
 .searchInput.active {
 	display: inline-block;
-	left: 0px;
+	left: 0;
 	width: 349px;
 	text-align: left;
 	background-color: var(--search-input-background-color);
@@ -370,12 +377,8 @@ img.pinned-icon {
 }
 
 img {
-	user-drag: none;
-	user-select: none;
-	-moz-user-select: none;
 	-webkit-user-drag: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
+	user-select: none;
 }
 
 .finsemble-toolbar .ff-chevron-down {
@@ -390,7 +393,7 @@ img {
 }
 
 .overflow .ff-chevron-down {
-	padding-left: 0px;
+	padding-left: 0;
 	padding-right: 1px;
 }