FileMaster

Edit File: editor.lazy.scss

// Quick acton bar Editor CSS.
.srfm-ee-quick-access-container {
	z-index: 999999;
}
.srfm-ee-quick-access {
	// This is applied to the element directly inside the interface skeleton body.
	display: flex;
	height: auto;
	width: 60px;
	background: #1e1e1e;
	color: #fff;
	justify-content: center;

.srfm-ee-quick-access__sidebar--tabs-container {
		position: fixed;
		bottom: 35px;
	}

.srfm-ee-quick-access__sidebar--blocks .srfm-ee-quick-access__sidebar--blocks--block--icon {
		fill: #fff;
	}

// The sidebar inside the Quick Access area.
	&__sidebar {
		width: 60px;
		height: 100%;
		background: #1e1e1e;
		display: flex;
		flex-direction: column;
		position: absolute;
		overflow: auto;

::-webkit-scrollbar {
			width: 0;
			background: transparent;
		}

// The block buttons area.
		&--blocks,
		&--actions {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			overflow-y: overlay;
			overflow-x: hidden;
			cursor: pointer;
			max-height: calc( 100vh - 212px );
			flex-grow: 1;

// Scrolling will need to be added in the future.
			&--block {
				display: flex;
				cursor: grab;
				border-radius: 6px;
				gap: 8px;
				padding: 12px;

&--icon {
					display: flex;
					width: 24px;
					height: 24px;
					justify-content: center;
					align-items: center;

&--name {
						display: flex;
						flex-direction: row;
						align-content: center;
						justify-content: center;
						align-items: center;

.components-popover__content {
							background: none;
							border: none;
							box-shadow: none;
							width: auto;
						}

.block-title {
							display: flex;
							align-content: center;
							justify-content: center;
							align-items: center;
							font-size: 14px;
							border-radius: 4px;
							margin-right: 20px;
							margin-left: 15px;
							background: #1e1e1e;
							color: #fff;
							padding: 5px 10px;
							cursor: pointer;

.srfm-ee-quick-access__sidebar--blocks--block--name {
								padding-right: 4px;

.block-title-svg {
									cursor: pointer;
									margin-top: 5px;
									width: 15px;
									height: 15px;
								}
							}
						}
					}
				}

span:not( .dashicon ) {
					display: none;
				}

&:hover {
					span:not( .dashicon ) {
						display: none;
					}

background: #1d2939;
				}
			}
		}

// The sidebar actions area.
		&--actions {
			cursor: pointer;
			position: relative;
			bottom: 6px;
			left: 0;
			margin-top: 10px;

.srfm-quick-action-sidebar-wrap {
				#plus-icon,
				#rearrange-icon {
					display: flex;
					align-content: center;
					justify-content: center;
					align-items: center;
					padding: 12px 12px;
					flex-direction: column;
				}
			}
		}

&--tab {
			display: inline-block;
			cursor: pointer;
		}

&--tabs {
			display: flex;
			flex-direction: column;

.tab.active {
				#plus-icon,
				#rearrange-icon {
					background-color: #1d2939;
					color: #fff;
				}
			}
		}
	}
}
.edit-site-layout.is-full-canvas.is-edit-mode .edit-site-layout__view-mode-toggle.components-button {
	border-bottom: #1e1e1e;
}

.srfm-quick-action-block-popover {
	margin-left: 15px;

::-webkit-scrollbar {
		width: 0;
		background: transparent;
	}

.components-popover__content {
		width: 348px;
		height: 279px;
		background: #fff;
		padding: 16px;
		border-radius: 6px;
		gap: 16px;

.srfm-quick-action-block-popover-search {
			input.components-search-control__input {
				width: 316px;
				height: 40px;
				padding: 10px 14px;
				border-radius: 4px;
				border: 1px solid #007cba;
				background: #fff;

&:focus {
					border: 1px solid #007cba;
					box-shadow: none;
				}

&::placeholder {
					color: #aaa;
					font-size: 12px;
					font-weight: 500;
				}
			}

svg {
				fill: #aaa;
			}
		}

.srfm-block-container {
			display: flex;
			flex-wrap: wrap;
			overflow: hidden;
			flex-direction: row;
			align-items: stretch;

.srfm-quick-action-block-popover-header {
				&__already-present-in-quick-action-bar,
				&__add-to-quick-action-bar {
					width: 316px;
					padding: 16px 0 8px 0;

.block-editor-inserter__panel-title {
						color: #50575e;
						font-size: 13px;
						font-weight: 400;
						text-transform: capitalize;
					}
				}
			}

.srfm-block-wrap {
				margin: 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				position: relative;
				transition: all 0.05s ease-in-out;
				align-content: stretch;
				width: 105.33px;
				height: 100px;
				border-radius: 4px;

.srfm-ee-quick-access__sidebar--blocks--block--icon {
					width: 64px;
					height: 48px;
					padding: 12px 20px;
					gap: 10px;
				}

svg.uagb-editor-icons {
					rect,
					path {
						stroke: #0063a1;
					}
				}

.block-title {
					color: #1e1e1e;
					text-align: center;
					width: 57px;
					height: 28px;
					padding: 4px 0 8px 0;
					gap: 10px;
					font-size: 12px;
					line-height: 16px;
					letter-spacing: 0;
				}

&:hover {
					&::after {
						background: #007cba;
						content: "";
						border-radius: 2px;
						bottom: 0;
						left: 0;
						opacity: 0.04;
						pointer-events: none;
						position: absolute;
						right: 0;
						top: 0;
					}
					.block-title {
						color: #007cba;
						filter: brightness( 0.95 );
					}
				}
			}

.block-editor-inserter__no-results {
				padding: 50px 105px;
			}
		}
	}
}

.components-popover__fallback-container {
	svg.block-title-svg {
		width: 10px;
		height: 10px;
		fill: #fff;
		&:hover {
			fill: #f00;
		}
	}
}

.edit-site-layout__canvas {
	.srfm-ee-quick-access__sidebar {
		padding-top: 1px;
	}
}

div#widgets-editor {
	.srfm-ee-quick-access__sidebar--blocks,
	.srfm-ee-quick-access__sidebar--actions {
		max-height: calc( 100vh - 180px );
	}
}

.srfm-ee-quick-access-container {
	.srfm-ee-quick-access__sidebar {
		.srfm-ee-quick-access__sidebar--blocks {
			.srfm-ee-quick-access__sidebar--blocks--block {
				.srfm-ee-quick-access__sidebar--blocks--block--icon {
					&.srfm-ee-quick-access__sidebar-icon {
						&__core,
						&__wcfb,
						&__wpsp {
							svg {
								path,
								rect,
								circle {
									fill: #fff;
									stroke-width: 1.4px;
								}
							}
						}

&__woocommerce {
							&--cart,
							&--checkout,
							&--mini-cart-contents,
							&--product-top-rated,
							&--store-notices,
							&--featured-category,
							&--active-filters {
								svg {
									path:first-child {
										fill: none;
									}
								}
							}

svg {
								path,
								rect,
								circle {
									fill: #fff;
									stroke-width: 1.4px;
								}
							}
						}

&__jetpack {
							&--gif,
							&--map,
							&--markdown {
								path:last-child {
									fill: #fff;
								}
							}

&--business-hours,
							&--button,
							&--calendly,
							&--contact-info,
							&--donations,
							&--eventbrite,
							&--google-calendar,
							&--image-compare,
							&--like,
							&--opentable,
							&--pinterest,
							&--podcast-player,
							&--rating-star,
							&--repeat-visitor,
							&--send-a-message,
							&--slideshow,
							&--story,
							&--tiled-gallery,
							&--tock,
							&--payments-intro,
							&--blogroll,
							&--nextdoor,
							&--sharing-buttons {
								svg {
									path,
									rect,
									circle {
										fill: #fff;
										stroke-width: 1.4px;
									}
								}
							}
						}

&__premium-content {
							&--container,
							&--buttons,
							&--login-button {
								svg {
									path,
									rect,
									circle {
										fill: #fff;
										stroke-width: 1.4px;
									}
								}
							}
						}

&__mailpoet {
							svg {
								path,
								rect,
								circle {
									fill: #fff;
									stroke-width: 1.4px;
								}
							}
						}

&__surecart {
							svg {
								path,
								rect,
								circle {
									fill: #fff;
									stroke-width: 1.4px;
								}
							}

&--cart-menu-icon,
							&--order-confirmation,
							&--cart {
								svg {
									path,
									rect,
									circle {
										fill: none;
										stroke-width: 1.4px;
									}
								}
							}
						}
					}
				}
			}
		}
	}
}

.srfm-ee-quick-access__sidebar--blocks-sortable {
	display: flex;
	flex-direction: column;
	overflow: auto; /* Prevent horizontal scrolling */

&--block {
		margin-bottom: 10px; /* Adjust as needed */
	}
}

.srfm-ee-quick-access__sidebar--prevent-editor-interactions {
	pointer-events: none;
}

Back