@imposium-hub/components 2.16.0-0 → 3.0.0-0

package/dist/styles.less

@@ -376,10 +376,6 @@ body{
         align-items: center;
         justify-content: space-between;
         padding: 5px;
-
-        .form-field {
-            min-width: 140px !important;
-        }
     }
 
     .uploads-list {
@@ -416,6 +412,9 @@ body{
 
     .form-field {
         vertical-align: top;
+        label {
+            width: 120px;
+        }
 
         .form-field-content {
             width: calc(100% - 120px);
@@ -463,7 +462,7 @@ body{
         align-items: center;
 
         .jump-to-page {
-            .inputMixin();
+            .inputMixin;
             width: 30px;
             margin: 0 3px;
         }
@@ -654,7 +653,7 @@ body{
     background-color: @background;
 
     &.transparent {
-        .chess();
+        .chess;
     }
 
     &.hidden {
@@ -680,7 +679,7 @@ body{
 }
 
 .auth-gate {
-  .layer();
+  .layer;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -733,7 +732,7 @@ body{
 @buttonMargin:2px;
 
 .imposium-btn{
- 
+
 	display: inline-block;
 	box-sizing: border-box;
 	border-radius:2px;
@@ -770,10 +769,6 @@ body{
 		pointer-events:none;
 	}
 
-	&.icon-toggle {
-		padding-top: 4px;
-	}
-
 	.loading-icon{
 
 		svg{
@@ -1025,137 +1020,28 @@ body{
 		}
 	}
 }
-.override_variable {
-
-	&.color,
-	&.text,
-	&.number {
-		.controlled-list {
-			.item {
-				margin-top: unset;
-				margin-bottom: unset;
-				color: rgba(223, 223, 223, 0.4);
-				width: 100%;
-				.buttons {
-					right: 0px;
-					top: 0px !important;
-				}
-			}
-		}
-	}
-
-	&.text, &.number {
-		.item {
-			width: fit-content;
-			input {
-				opacity: 0.6;
-				cursor: default;
-			}
-		}
-	}
-
-	&.boolean {
-		min-width: unset !important;
-
-		.item.checkbox {
-			margin-top: unset;
-			margin-bottom: unset;
-			background: #1d1d1d;
-			color: rgba(223, 223, 223, 0.4);
-			font-size: 12px;
-			box-sizing: border-box;
-			vertical-align: top;
-			font-family: 'Roboto Condensed', sans-serif;
-			appearance: none;
-			display: flex;
-			border: 1px solid #353535;
-			border-radius: 2px;
-			width: 18px;
-			height: 18px;
-			padding: 2px;
-
-			svg {
-				margin-left: 1px;
-			}
-
-			.buttons svg {
-				margin-left: 2px;
-			}
-
-			&:hover {
-				.buttons {
-					top: -2px;
-					right: -3px;
-					background: unset;
-				}
-			}
-		}
-	}
-
-	&.textarea {
-		.item {
-			margin: 0;
-
-			.buttons {
-				right: 0px;
-			}
-		}
-	}
-
-	&.number,
-	&.text,
-	&.color {
-		.item {
-			background-color: @backgroundDark;
-
-			p {
-				padding: 0 4px;
-				white-space: nowrap;
-			}
-		}
-
-	}
-
-}
-
-.controlled-list {
 
-	width: 100%;
+.controlled-list{
 
-	.item {
-		position: relative;
-		width: 100%;
-		height: @inputHeight;
-		margin-top: @fieldMargin / 2;
-		margin-bottom: @fieldMargin / 2;
-
-		&.icon-toggle {
-			color: rgba(223, 223, 223, 0.4);
-			position: absolute !important;
-			width: 100% !important;
-			height: 96% !important;
-			margin-top: unset;
-			svg {
-				padding-bottom: 1px;
-			}
-			.buttons {
-				right: -1px;
-			}
-		}
+	width:100%;
 
-		&:hover {
-			.imposium-btn {
-				background: unset;
-			}
+	.item{
+		position:relative;
+		width:100%;
+		height:@inputHeight;
+		margin-top:@fieldMargin / 2;
+		margin-bottom:@fieldMargin / 2;
 
-			.buttons {
+		&:hover{
+			background:@background;
+			.buttons{
 				display: block;
 			}
 		}
 
-		.buttons {
+		.buttons{
 			display: none;
-			position: absolute;
+			position:absolute;
 			right: 10px;
 			top: 2px;
 		}
@@ -1245,7 +1131,6 @@ body{
             .filterable-cell-wrapper {
                 display: flex;
                 align-items: center;
-                justify-content: space-between;
             }
 
             .filterable-cell-wrapper {
@@ -1324,7 +1209,7 @@ body{
     }
 
     .ip-table-loader {
-        .layer();
+        .layer;
         display: flex;
         align-items: center;
         justify-content: center;
@@ -1376,7 +1261,7 @@ body{
         }
         
         .paginator-input {
-            .inputMixin();
+            .inputMixin;
             width: 60px;
         }
 
@@ -1411,7 +1296,7 @@ body{
     border-radius: 5px;
 
     .progress-bg {
-        .layer();
+        .layer;
         background-color: @backgroundHighlight;
         transform-origin: left;
         border-radius: 5px;
@@ -1419,7 +1304,7 @@ body{
     }
 
     .progress-copy {
-        .layer();
+        .layer;
         text-align: center;
         line-height: 20px;
         border-radius: 5px;
@@ -1436,174 +1321,161 @@ body{
     border-radius: 2px;
     transition: transform 190ms @easeOutQuint, opacity 160ms @easeOutQuart;
     z-index: 2147483647;
-    &.variables {
-        border: unset;
-    }
 }
 
 
 .font-preview{
-	.layer();
+	.layer;
 	text-align: center;
 	background: white;
 	color:black;
 	font-weight: normal;
 	font-size:80px;
 }
-@labelWidth: 100px;
-@inputHeight: 20px;
-@labelHeight: 20px;
-@fieldMargin: 4px;
-@labelPadding: 4px;
-@inputPadding: 30px;
 
-.inputMixin {
+@labelWidth:100px;
+@inputHeight:20px;
+@labelHeight:20px;
+@fieldMargin:4px;
+@labelPadding:5px;
+@inputPadding:30px;
+
+.inputMixin{
 	display: inline-block;
-	background: @inputBackground;
-	border: none;
-	color: @textDefault;
-	font-size: @fontSizeSmall;
-	box-sizing: border-box;
+	background:@inputBackground;
+	border:none;
+	color:@textDefault;
+	font-size:@fontSizeSmall;
+	box-sizing:border-box;
 	vertical-align: top;
-	height: @inputHeight;
-	width: 100%;
+	height:@inputHeight;
+	width:100%;
 	font-family: 'Roboto Condensed', sans-serif;
 	border-radius: 0;
-	appearance: none;
-
-	&:hover {
-		background: darken(@inputBackground, 3%);
+	appearance:none;
+	
+	&:hover{
+		background:darken(@inputBackground, 3%);
 	}
 
-	&:focus {
-		background: darken(@inputBackground, 3%);
+	&:focus{
+		background:darken(@inputBackground, 3%);	
 	}
 
-	&:disabled {
-
-		color: fadeout(@textDefault, 60%);
-		background: @inputBackground;
+	&:disabled{
+		
+		color:fadeout(@textDefault, 60%);
+		background:@inputBackground;
 		pointer-events: none;
-
-		&:focus {
-			background: @inputBackground;
-		}
-
-		&:hover {
-			background: @inputBackground;
+		&:focus{
+			background:@inputBackground;
 		}
+		&:hover{
+			background:@inputBackground;
+		}	
 	}
 }
 
-.form-field {
-
-	width: 100%;
-	position: relative;
+.form-field{
+	
+	width:100%;
+	position:relative;
 	display: inline-block;
 	vertical-align: top;
-	margin-bottom: @fieldMargin;
-
-	input,
-	textarea {
-		.inputMixin();
-		padding: 4px;
+	margin-bottom:@fieldMargin;
+	
+	input, textarea{
+		.inputMixin;
+		padding:4px;
 	}
 
 	.caret {
-		top: -2px;
-	}
+        top: -2px;
+    }
 
 	select {
-		.inputMixin();
-		padding: 4px 15px 4px 4px;
-	}
+        .inputMixin;
+        padding: 4px 15px 4px 4px;
+    }
 
 	input[type=number] {
 		-moz-appearance: textfield;
 	}
-
-	textarea {
-		height: @inputHeight * 3;
-		resize: none;
-		padding-right: 25px;
+	
+	textarea{
+		height:@inputHeight * 3;
+		resize:none;
+		padding-right:25px;
 	}
 
-	&.invalid {
+	&.invalid{
 		color: @danger;
 	}
 
-	label {
-		font-size: @fontSizeSmall;
-		line-height: 21px;
+	label{
+		font-size:@fontSizeSmall;
+		line-height:21px;
 		display: inline-block;
 		vertical-align: top;
-		height: @labelHeight;
-		text-align: right;
-		padding-right: @labelPadding;
+		height:@labelHeight;
+		text-align:right;
+		padding-right:@labelPadding;
 		box-sizing: border-box;
 		width: @labelWidth;
-
-		&.label-top {
-			width: unset;
+		
+		&.label-top{
+			width:unset;
 			text-align: left;
-			padding-right: @labelPadding/2;
-			padding-left: @labelPadding/2;
+			padding-right:@labelPadding/2;
+			padding-left:@labelPadding/2;
 		}
 	}
 
-	.form-field-content {
-		width: calc(100% - @labelWidth);
+	.form-field-content{
+		width:calc(100% - @labelWidth);
 		display: inline-block;
 		vertical-align: top;
-		box-sizing: border-box;
+		box-sizing:border-box;
 
-		&.label-top {
-			padding-left: @labelPadding/2;
-			padding-right: @labelPadding/2;
-			width: 100%;
+		&.label-top{
+			padding-left:@labelPadding/2;
+			padding-right:@labelPadding/2;
+			width:100%;
 
-			.form-field-buttons {
-				top: @labelHeight;
+			.form-field-buttons{
+				top:@labelHeight;
 			}
 		}
 	}
 
-	.form-field-buttons {
-		position: absolute;
-		height: @inputHeight;
-		top: 0px;
-		right: 0px;
-		background: @inputBackground;
+	.form-field-buttons{
+		position:absolute;
+		height:@inputHeight;
+		top:0px;
+		right:0px;
+		background:@inputBackground;
 		z-index: 1000;
 	}
 
-	&.no-label {
-		.form-field-content {
-			width: calc(100% - @labelPadding);
-			margin-left: @labelPadding;
+	&.no-label{
+		.form-field-content{
+			width:calc(100% - @labelPadding);
+			margin-left:@labelPadding;
 		}
 	}
 }
 
-.filterable-cell-wrapper .form-field-buttons {
-	position: absolute;
-	height: 18px;
-	top: 4px;
-	right: 0px;
-	background: @inputBackground;
-	z-index: 1000;
-}
-
-.checkbox-field {
 
-	.checkbox {
-		.inputMixin();
-		display: flex;
+.checkbox-field{
+	
+	.checkbox{
+		.inputMixin;
+		display:flex;
 		border: 1px solid @backgroundLight;
 		border-radius: 2px;
-		width: 18px;
-		height: 18px;
-		padding: 2px;
+		width:18px;
+		height:18px;
+		padding:2px;
 		cursor: pointer;
 
 		.fa-check {
@@ -1612,212 +1484,153 @@ body{
 	}
 }
 
-.button-group-field {
-	.override_variable {
-		cursor: not-allowed;
+.button-group-field{
 
-		&:hover {
-			.item {
-				.buttons {
-					display: block;
-				}
-			}
-		}
-
-		.item {
-			top: 20px;
-			position: absolute;
-			background-color: transparent;
-			width: 100%;
-
-			.buttons {
-				display: none;
-				height: 20px;
-				float: right;
-				padding-right: 5px;
-			}
-		}
-	}
-
-	.button-group {
+	.button-group{
 
-		.inputMixin();
+		.inputMixin;
 
-		&:hover {
-			background: @inputBackground;
+		&:hover{
+			background:@inputBackground;
 		}
-
-		.button-group-option {
-			height: 100%;
+		
+		.button-group-option{
+			height:100%;
 			user-select: none;
 			display: inline-block;
-			text-align: center;
+			text-align:center;
 			cursor: pointer;
 			padding-top: 1px;
 			box-sizing: border-box;
-			color: darken(@textDefault, 30%);
+			color:darken(@textDefault, 30%);
 			background: #373737;
-
-			&:hover {
-				background: darken(@inputBackground, 5%);
+			&:hover{
+				background:darken(@inputBackground, 5%);
 			}
 
-			&.active {
-				cursor: auto;
-				background: unset;
-				color: unset;
-			}
-
-			&.disabled {
-				cursor: not-allowed;
-				background: unset;
-				user-select: none;
+			&.active{
+				cursor:auto;
+				background:unset;
+				color:unset;
 			}
 
+			&.disabled svg {
+				color: gray;
+				}
 		}
 	}
 }
 
-.text-area-field {
+.text-area-field{
 
-	.form-field-buttons {
-		right: 10px;
-		background: none;
+	.form-field-buttons{
+		right:10px;
+		background:none;
 	}
 }
 
-.select-field {
-	&.override_variable {
-		.form-field-buttons {
-			display: none;
-		}
-
-		.item {
-			width: fit-content !important;
-		}
-	}
+.select-field{
 
-	select {
+	select{
 		line-height: 12px;
 	}
 }
 
-.text-field {
+.text-field{
 
-	.controlled-input {
-		padding-right: 25px;
+	.controlled-input{
+		padding-right:25px;
 	}
 }
 
-@sliderValWidth: 30px;
-
-.slider-field {
-
-	input {
-		width: calc(100% - @sliderValWidth);
-		margin: 0px;
-
-		&.toggle {
-			width: calc(100% - @sliderValWidth - 18px);
-		}
+@sliderValWidth:30px;
+.slider-field{
+	
+	input{
+		width:calc(100% - @sliderValWidth);
+		margin:0px;
 	}
 
-	.val {
+	.val{
 		display: inline-block;
 		vertical-align: top;
-		width: @sliderValWidth;
-		text-align: right;
-		padding: 2px;
+		width:@sliderValWidth;
+		text-align:right;
+		padding:2px;
 		line-height: 14px;
-		border-top: 2px solid @inputBackground;
-		border-right: 2px solid @inputBackground;
-		border-bottom: 2px solid @inputBackground;
-		height: @inputHeight;
-		box-sizing: border-box;
-		background: lighten(@inputBackground, 4%);
-	}
-
-	.checkbox {
-		.inputMixin();
-		line-height: 10px;
-		border: 1px solid @backgroundLight;
-		border-radius: 2px;
-		width: 18px;
-		height: 18px;
-		padding: 2px;
-		cursor: pointer;
-
-		.fa-check {
-			margin-left: 1px;
-		}
+		border-top:2px solid @inputBackground;
+		border-right:2px solid @inputBackground;
+		border-bottom:2px solid @inputBackground;
+		height:@inputHeight;
+		box-sizing:border-box;
+		background:lighten(@inputBackground, 4%);
 	}
 }
 
-.color-field {
-
-	.form-field-content {
-
-		&.label-top {
-
-			.picker {
-				top: @inputHeight + @labelHeight;
-
-				&.picker-left {
-					left: 0px;
+.color-field{
+	
+	.form-field-content{
+
+		&.label-top{
+			
+			.picker{
+				top:@inputHeight + @labelHeight;
+				&.picker-left{
+					left:0px;
 					top: -200px;
 				}
 
-				&.picker-right {
-					right: 0px;
+				&.picker-right{
+					right:0px;
 					top: -200px;
 				}
 			}
 		}
 
-		.swatch {
+		.swatch{
 			display: inline-block;
-			height: @inputHeight;
-			width: 100%;
+			height:@inputHeight;
+			width:100%;
 		}
+		
+		.picker{
+			position:absolute;
+			top:@inputHeight + 3px;
+			z-index:15000;
 
-		.picker {
-			position: absolute;
-			top: @inputHeight + 3px;
-			z-index: 15000;
-
-			&.picker-left {
-				left: @labelWidth
+			&.picker-left{
+				left:@labelWidth
 			}
 
-			&.picker-right {
-				right: 0px;
+			&.picker-right{
+				right:0px;
 			}
 
-			.sketch-picker {
+			.sketch-picker{
+			
+				background:@backgroundLight !important;
 
-				background: @backgroundLight !important;
-
-				input {
-					box-shadow: none !important;
+				input{
+					box-shadow:none !important;
 				}
-
-				span {
-					color: @textDefault !important;
+				
+				span{
+					color:@textDefault !important;
 				}
 
-				label {
-					width: unset;
+				label{
+					width:unset;
 				}
 
-				.flexbox-fix {
-					border-top: none !important;
+				.flexbox-fix{
+					border-top:none !important;
 				}
 			}
 		}
 	}
 }
 
-.caret {
+.caret{
 	display: block;
 	width: 18px;
 	height: 100%;
@@ -1826,10 +1639,11 @@ body{
 	box-sizing: border-box;
 	user-select: none;
 	pointer-events: none;
-	color: lighten(@inputBackground, 10%);
-	position: absolute;
-	left: -18px;
+	color:lighten(@inputBackground, 10%);
+    position: absolute;
+    left: -18px;
 }
+
 @headerHeight: 50px;
 @defaultBGColor: #212124;
 @defaultBorderColor: #494949;
@@ -1904,7 +1718,7 @@ body{
 }
 
 .anchor {
-    .font-style();
+    .font-style;
     cursor: pointer;
     font-size: @fontSizeDefault;
     text-decoration: none;
@@ -1919,7 +1733,7 @@ body{
 }
 
 .circle-style {
-    .no-select();
+    .no-select;
     border-radius: 50%;
     width: 28px;
     height: 28px;
@@ -1937,12 +1751,12 @@ body{
     cursor: pointer;
     outline: none;
     box-sizing: border-box;
-    .no-select();
-    .font-style();
+    .no-select;
+    .font-style;
 }
 
 .faux-select {
-    .btn-reset();
+    .btn-reset;
     display: flex;
     align-items: center;
     font-size: 14px;
@@ -1960,7 +1774,7 @@ body{
 }
 
 .imposium-header {
-    .flex-row();
+    .flex-row;
     z-index: 100000;
     position: absolute;
     top: 0px;
@@ -1973,17 +1787,17 @@ body{
     line-height: 1.5;
 
     .inner-content {
-        .flex-row();
+        .flex-row;
         width: 100%;
         max-width: @defaultMaxWidth;
         justify-content: space-between;
         margin: 0px 15px;
 
         .inner-left {
-            .flex-row();
+            .flex-row;
 
             .title {
-                .flex-row();
+                .flex-row;
                 margin-right: 20px;
                 text-decoration: none;
 
@@ -2006,7 +1820,7 @@ body{
                 }
 
                 .heading {
-                    .font-style();
+                    .font-style;
                     margin: 0;
                     font-size: 20px;
                     font-weight: normal;
@@ -2014,44 +1828,43 @@ body{
             }
 
             .btn-toggle-services {
-                .faux-select();
+                .faux-select;
             }
         }
 
         .inner-right {
-            .flex-row();
+            .flex-row;
 
             a{
                 border:none;
             }
 
-            .creativeMgrBtn {
-                position: relative;
-                top: 1px;
-                margin-right:10px;
-            }
-
             .additional-buttons{
                 margin-right:10px;
+
+                .creativeMgrBtn {
+                    position: relative;
+                    top: 1px;
+                }
             }
             
             .btn-help {
-                .circle-style();
+                .circle-style;
                 margin-left: 15px;
                 font-size:28px;
             }
             
             .btn-toggle-orgs {
-                .btn-reset();
-                .circle-style();
+                .btn-reset;
+                .circle-style;
                 margin-left: 15px;
             }
             
             .btn-toggle-story {
-                .faux-select();
+                .faux-select;
 
                 .story-name {
-                    .ellipsis();
+                    .ellipsis;
                     text-transform: none;
                     font-size: 17px;
                     max-width: 220px;
@@ -2059,7 +1872,7 @@ body{
             }
 
             .btn-logout {
-                .btn-reset();
+                .btn-reset;
                 padding: 10px 0px;
                 font-size: 14px;
             }
@@ -2080,7 +1893,7 @@ body{
             box-sizing: border-box;
 
             .service-menu-heading {
-                .secondary-font-style();
+                .secondary-font-style;
                 font-size: @fontSizeDefault;
                 text-transform: uppercase;
                 color: #b1b1b1;
@@ -2105,7 +1918,7 @@ body{
                     }
 
                     a {
-                        .anchor();
+                        .anchor;
                         display: flex;
                         align-items: center;
                         color: white;
@@ -2166,14 +1979,14 @@ body{
             color: white
         }
         .orgs-menu-active-org {
-            .font-style();
-            .flex-row();
+            .font-style;
+            .flex-row;
             padding: 10px;
             border-bottom: 1px solid @defaultBorderColor;
             background-color: @defaultBorderColor;
 
             .active-first-char {
-                .circle-style();
+                .circle-style;
                 width: 40px;
                 height: 40px;
                 font-size: 18px;
@@ -2185,7 +1998,7 @@ body{
             color: white;
         }
         .menu-item, .react-select__option {
-            .btn-reset();
+            .btn-reset;
             width: 100%;
             padding: 10px;
             font-size: 12px;
@@ -2195,12 +2008,12 @@ body{
                 background-color: #494949
             }
             .inactive-first-char {
-               .circle-style();
+               .circle-style;
                margin-right: 10px;
             }
 
             &.inactive-org-button {
-                .flex-row();
+                .flex-row;
                 box-sizing: border-box;
                 padding: 10px;
             }
@@ -2211,13 +2024,13 @@ body{
         }
 
         .orgs-menu-footer {
-            .flex-row();
+            .flex-row;
             justify-content: space-between;
             border-top: 1px solid @defaultBorderColor;
 
             .email {
-                .secondary-font-style();
-                .ellipsis();
+                .secondary-font-style;
+                .ellipsis;
                 color: #b1b1b1;
                 font-size: 12px;
                 text-transform: lowercase;
@@ -2225,7 +2038,7 @@ body{
             }
 
             .btn-logout {
-                .btn-reset();
+                .btn-reset;
                 font-size: 12px;
                 padding: 10px 15px;
             }
@@ -2260,10 +2073,10 @@ body{
 .modal{
 	
 	z-index:10000;
-	.layer();
+	.layer;
 
 	.modal-bg{
-		.layer();
+		.layer;
 		background: fadeout(@backgroundDark, 20%);
 	}
 
@@ -2328,7 +2141,7 @@ body{
 
 .media-player{
 
-	.layer();
+	.layer;
 
 	.inner-viewer{
 		position:absolute;
@@ -2337,7 +2150,7 @@ body{
 			width:100%;
 			height:100%;
 			outline:1px solid darken(@backgroundDark, 10%);
-			.chess()
+			.chess
 		}
 
 		video{
@@ -2396,33 +2209,8 @@ body{
 
 
 .publish-wizard{
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    padding-top: 30px;
-    box-sizing: border-box;
-    overflow: hidden;
 
-    > div:last-of-type {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-    }
-
-    .publish-wizard-step--review {
-        flex: 1;
-        overflow-y: auto;
-        min-height: 0;
-    }
-
-    .lower-buttons {
-        flex-shrink: 0;
-        padding-bottom: 5px;
-        padding-top: 5px;
-        width: 100%;
-        text-align: center;
-    }
+    padding-top:30px;
 
     .missingColumns{
         margin: 15px;
@@ -2495,46 +2283,16 @@ body{
         background-color: @backgroundLight;
     }
 
-    .link-wrapper{
-        display: flex;
-        flex-wrap: wrap;
+    .lower-buttons{
+        margin-top:10px;
+        left:0px;
+        width:100%;
+        text-align: center;
     }
 
-    .publish-notes-wrapper {
+    .link-wrapper{
         display: flex;
-        flex-direction: column;
-        gap: 6px;
-        margin-top: 14px;
-        width: 100%;
-    }
-
-    .publish-notes-label {
-        font-size: @sectionFontSize;
-        color: white;
-        font-weight: 600;
-    }
-
-    .publish-notes-textarea {
-        width: 100%;
-        min-height: 72px;
-        box-sizing: border-box;
-        padding: 8px 10px;
-        background: @backgroundDark;
-        color: white;
-        border: 1px solid @backgroundHighlight;
-        border-radius: 3px;
-        font-family: inherit;
-        font-size: @sectionFontSize;
-        resize: vertical;
-
-        &::placeholder {
-            color: @backgroundHighlight;
-        }
-
-        &:focus {
-            outline: none;
-            border-color: @primary;
-        }
+        flex-wrap: wrap;
     }
 
     .big-link{
@@ -2632,179 +2390,6 @@ body{
     }
 }
 
-.crm-publish-name{
-    background: @backgroundDark;
-    width: 100%;
-    padding-left: 5px;
-
-    &.disabled{
-       opacity: 0.5;
-    }
-}
-
-.change-report-tree {
-    background: @inputBackground;
-    border-radius: 4px;
-    padding: 14px;
-    box-sizing: border-box;
-    overflow-y: auto;
-    margin-bottom: 12px;
-    color: @textDefault;
-
-    &--loading,
-    &--empty {
-        color: @secondary;
-        font-style: italic;
-        padding: 10px;
-    }
-}
-
-.change-report-section {
-    margin-bottom: 6px;
-
-    &-heading {
-        text-transform: uppercase;
-        font-size: 11px;
-        font-weight: bold;
-        color: @secondary;
-        letter-spacing: 0.05em;
-        padding: 3px 0 2px;
-        border-bottom: 1px solid @backgroundHighlight;
-        margin-bottom: 3px;
-    }
-}
-
-.change-report-node {
-    &-row {
-        display: flex;
-        align-items: center;
-        padding: 1px 0;
-        border-radius: 3px;
-    }
-}
-
-.change-report-toggle {
-    display: inline-block;
-    width: 16px;
-    font-size: 10px;
-    color: @secondary;
-    cursor: pointer;
-    transition: transform 0.15s ease;
-    flex-shrink: 0;
-
-    &--expanded {
-        transform: rotate(90deg);
-    }
-}
-
-.change-report-toggle-placeholder {
-    display: inline-block;
-    width: 16px;
-    flex-shrink: 0;
-}
-
-.change-report-status {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 11px;
-    font-weight: bold;
-    border-radius: 3px;
-    padding: 2px 6px;
-    margin-right: 6px;
-    flex-shrink: 0;
-    text-align: center;
-    line-height: 1;
-
-    &--added {
-        background: rgba(86, 176, 94, 0.2);
-        color: @info;
-    }
-
-    &--removed {
-        background: rgba(175, 17, 38, 0.2);
-        color: @danger;
-    }
-
-    &--modified {
-        background: rgba(143, 123, 37, 0.25);
-        color: @warning;
-    }
-
-    &--updated {
-        background: rgba(45, 140, 235, 0.2);
-        color: @primary;
-    }
-}
-
-.change-report-layer-icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 18px;
-    margin-right: 4px;
-    font-size: 11px;
-    color: @secondary;
-    flex-shrink: 0;
-}
-
-.change-report-label {
-    font-size: 12px;
-    flex-shrink: 0;
-    margin-right: 6px;
-}
-
-.change-report-values {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    font-size: 11px;
-    color: @secondary;
-    flex-wrap: wrap;
-}
-
-.change-report-value {
-    background: @backgroundHighlight;
-    color: @textDefault;
-    border-radius: 3px;
-    padding: 1px 6px;
-}
-
-.change-report-value-arrow {
-    color: @backgroundHighlight;
-}
-
-.change-report-color-chip-wrapper {
-    display: inline-block;
-    position: relative;
-    width: 12px;
-    height: 12px;
-    border-radius: 2px;
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    margin-right: 4px;
-    vertical-align: middle;
-    overflow: hidden;
-}
-
-.change-report-color-chip-checkerboard {
-    position: absolute;
-    inset: 0;
-    background-image:
-        linear-gradient(45deg, #808080 25%, transparent 25%),
-        linear-gradient(-45deg, #808080 25%, transparent 25%),
-        linear-gradient(45deg, transparent 75%, #808080 75%),
-        linear-gradient(-45deg, transparent 75%, #808080 75%);
-    background-size: 6px 6px;
-    background-position: 0 0, 0 3px, 3px -3px, -3px 0;
-    background-color: #fff;
-}
-
-.change-report-color-chip-color {
-    position: absolute;
-    inset: 0;
-}
-
-
 @sectionPadding:7px 5px 5px 5px;
 @sectionHeaderHeight:25px;
 @loaderHeight:6px;
@@ -2812,7 +2397,7 @@ body{
 @headerPadding:2px;
 
 .section{
-	.layer();
+	.layer;
 
 	.section-header{
 		background:lighten(@backgroundLight, 10%);
@@ -2871,7 +2456,7 @@ body{
 	}
 
 	.section-content{
-		.layer();
+		.layer;
 		top:@sectionHeaderHeight;
 		height:calc(100% - @sectionHeaderHeight);
 		padding:@sectionPadding;
@@ -2905,29 +2490,24 @@ body{
 	}
 }
 
-.shortcuts-dropdown {
-  overflow: auto;
-  height: 90%;
-  .shortcuts-menu {
+.shortcuts-menu {
     padding: 5px;
     box-sizing: border-box;
     background: @background;
     width: 235px;
-
     table {
-      tr {
-        td {
-          font-size: 12px;
-          padding: 0.2em;
+    tr {
+      td {
+        font-size: 12px;
+        padding: 0.2em;
 
-          &.hotkey-cell {
-            font-weight: 600;
-            text-align: right;
-          }
+        &.hotkey-cell {
+          font-weight: 600;
+          text-align: right;
+        }
 
-          &.shortcut-desc {
-            padding: 0.2em 0.2em 0.2em 1.2em;
-          }
+        &.shortcut-desc {
+          padding: 0.2em 0.2em 0.2em 1.2em;
         }
       }
     }
@@ -2972,7 +2552,7 @@ body{
 
 .static-composition-editor{
 
-	.layer();
+	.layer;
 
 	.composition-config{
 		position: absolute;
@@ -2987,14 +2567,14 @@ body{
 	}
 
 	.composition-preview{
-		.layer();
+		.layer;
 		left:@compConfigWidth;
 		width:calc(100% - @compConfigWidth);
 	}
 }
 
 .static-composition-renderer{
-	.layer();
+	.layer;
 	font-family:'Arial';
 	border:2px solid @backgroundLight;
 }
@@ -3006,7 +2586,7 @@ body{
 
 .composition-text-layer{
 	will-change:transform;
-	.layer();
+	.layer;
 
 	.inner-text{
 		display: inline-block;
@@ -3174,7 +2754,7 @@ body{
 
 .story-viewer{
     
-    .layer();
+    .layer;
     
     background:@backgroundDark;
 
@@ -3190,7 +2770,7 @@ body{
     }
     
     .log{
-        .layer();
+        .layer;
         overflow-y: scroll;
         padding:10px;
         box-sizing:border-box;
@@ -3230,7 +2810,7 @@ body{
         width:calc(100% - @storyViewerVarWidth);
 
         .content-header{
-            .layer();
+            .layer;
             box-sizing: border-box;
             padding-top:4px;
             padding-left:4px;
@@ -3266,7 +2846,7 @@ body{
         }
 
         .content-wrapper{
-            .layer();
+            .layer;
             background-color: rgb(35,35,35);
             top:@storyViewerHeaderHeight;
             height:calc(100% - @storyViewerHeaderHeight);
@@ -3279,7 +2859,7 @@ body{
 @tabWidth:80px;
 
 .tabs{
-    .layer();
+    .layer;
     .tab-header{
         white-space: nowrap;
         position: absolute;
@@ -3325,12 +2905,12 @@ body{
     }
     .tab-content{
         overflow-y: auto;
-        .layer();
+        .layer;
         top:@tabHeight;
         height:calc(100% - @tabHeight);
 
         .tab-content-wrapper{
-            .layer();
+            .layer;
         }
     }
 }
@@ -3601,19 +3181,18 @@ h3{
         // }
     }
 }
+
 #font-picker {
 	position: relative;
 	display: inline-block;
-	width: 100%;
-	box-sizing: border-box;
-	-webkit-appearance: none;
-	-moz-appearance: none;
-	appearance: none;
-	box-shadow: none;
-
-	ul {
-		width: inherit !important;
-	}
+	width: 200px;
+    width: 100%;
+    box-sizing: border-box;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    padding: 0 2px;
+    box-shadow: none;
 
 	* {
 		box-sizing: border-box;
@@ -3641,9 +3220,8 @@ h3{
 		height: 20px;
 		padding: 0 4px;
 		background: #1d1d1d;
-
-		&:hover,
-		&:focus {
+        
+		&:hover, &:focus {
 			background: #151515;
 		}
 
@@ -3714,10 +3292,8 @@ h3{
 				height: 100%;
 				padding-left: 3px;
 				white-space: nowrap;
-
-				&:hover,
-				&:focus,
-				&.active-font {
+                
+				&:hover, &:focus, &.active-font {
 					background: #2d8ceb;
 				}
 			}
@@ -3736,6 +3312,7 @@ h3{
 		max-height: 200px;
 	}
 }
+
 .contextmenu {
 	background: #161616;
     position: absolute;