Current File : /home/kelaby89/kayautoparts.com/wp-content/plugins/meta-box/src/Dashboard/assets/css/dashboard.scss

// Overwrite general WordPress styles

body.wp-admin {
	background: #f8fafc; // slate-50
}

div#wpcontent {
	padding-left: 0;
}

// Do not show any notices here.
#wpwrap .notice {
	display: none;
}


// Our dashboard

.mb-dashboard {
	--mb-color-accent: #00b1b3;
	--mb-color-link: var(--mb-color-accent);
	--mb-border: 1px solid #cbd5e1; // slate-300

	font-size: 14px;
	color: #334155; // slate-700


	// Common elements

	a {
		text-decoration: none;
		color: var(--mb-color-link);

		&:hover {
			color: var(--mb-color-link);
			text-decoration: underline;
		}

		&:focus,
		&:active {
			outline: none;
			box-shadow: none;
		}
	}

	p {
		font-size: 14px;
	}

	table {
		width: 100%;
		border-collapse: collapse;
	}

	tr {
		border-bottom: 1px solid #e2e8f0; // slate-200

		&:hover {
			background: #f8fafc; // slate-50
		}
	}

	th,
	td {
		padding-block: 12px;
	}

	&__button {
		--mb-color-link: #fff;

		display: inline-block;
		background: var(--mb-color-accent);
		padding: 16px;
		text-transform: uppercase;
		font-weight: 700;
		font-size: 16px;
		line-height: 1;
		letter-spacing: .025em;
		white-space: nowrap;
		border-radius: 4px;
		text-decoration: none;

		&.mb-dashboard__button:hover {
			color: #fff;
			opacity: .9;
			text-decoration: none;
		}

		&:focus,
		&:active {
			color: #fff;
		}
	}

	&__hidden {
		display: none;
	}

	&__external {
		display: inline-flex;
		align-items: center;
		gap: 4px;

		svg {
			width: 1em;
			height: 1em;
			fill: currentColor;
		}
	}

	&__tooltip {
		position: relative;

		&:after {
			content: attr(data-tooltip);
			background-color: #0f172a; // slate-900
			color: #fff;
			padding: 4px 8px;
			border-radius: 4px;
			white-space: nowrap;

			// Positioning
			position: absolute;
			top: calc(100% + 8px);
			left: 50%;
			transform: translateX(-50%);

			visibility: hidden;
			opacity: 0;
			transition: opacity 0.3s ease-in-out;
		}

		&[data-position="top"]:after {
			bottom: calc(100% + 8px);
			top: auto;
		}

		&[data-position="bottom-right"]:after {
			left: auto;
			transform: none;
			right: 0;
		}

		&:hover:after {
			visibility: visible;
			opacity: 1;
		}
	}

	&__body {
		display: flex;
		gap: 48px;
		padding: 48px;
		max-width: 1280px;
		margin-inline: auto;
	}


	// Header

	&__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 24px;
		padding: 12px;
		background: #fff;
		border-bottom: 1px solid #e2e8f0; // slate-200

		&__search {
			flex: 1;

			&__inner {
				position: relative;
				max-width: 480px;
				margin-inline: auto;
			}

			input[type="text"] {
				width: 100%;
				background: #f1f5f9; // slate-100
				border-color: #e2e8f0;
				padding: 2px 16px;
				margin: 0;

				&:focus,
				&:hover {
					border-color: #cbd5e1;
					box-shadow: none;
				}
			}

			&:has(.mb-dashboard__header__search-results:not([data-type="empty"])) input {
				border-radius: 4px 4px 0 0;
			}

			&-results {
				position: absolute;
				top: 33px;
				left: 0;
				right: 0;
				background: #fff;
				z-index: 9;
				border: var(--mb-border);
				border-radius: 0 0 4px 4px;
				box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); // shadow-lg

				a {
					display: flex;
					align-items: flex-start;
					justify-content: space-between;
					gap: 24px;
					color: inherit;
					padding: 8px 16px;
					transition: all .2s ease-in-out;

					&:hover {
						color: inherit;
						text-decoration: none;
						background: #f1f5f9; // slate-100
					}

					&:last-child {
						border-radius: 0 0 4px 4px;
					}
				}

				span {
					display: inline-block;
					padding: 2px 8px;
					background: #e2e8f0; // slate-200
					border: var(--mb-border);
					border-radius: 4px;
					font-size: 12px;
				}

				&[data-type="empty"] {
					display: none;
				}

				&[data-type="text"] {
					padding: 16px;
				}
			}
		}

		&__icons {
			display: flex;
			align-items: center;

			a {
				display: inline-flex;
				align-items: center;
				justify-content: center;
			}
		}

		&__social {
			display: flex;
			align-items: center;
			gap: 12px;

			border-right: var(--mb-border);
			padding-right: 12px;
			margin-right: 12px;

			svg {
				width: 16px;
				height: 16px;
				fill: #64748b;
				transition: all .2s ease-in-out;
			}

			a {
				width: 24px;
				height: 24px;

				&:hover svg {
					fill: #334155;
				}
			}
		}

		&__links {
			display: flex;
			align-items: center;
			gap: 12px;

			a {
				color: #64748b;
				width: 36px;
				height: 36px;
				border: var(--mb-border);
				border-radius: 50%;

				&:hover {
					color: #334155;
					border-color: #94a3b8;
				}
			}

			svg {
				width: 20px;
				height: 20px;
			}
		}

		.mb-dashboard__logo {
			svg {
				display: block;
				width: auto;
				height: 46px;
			}
		}
	}

	// Main area
	&__main {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 48px;
	}

	// Actions
	&__actions {
		&__title {
			font-size: 14px;
			font-weight: 600;
			text-transform: uppercase;
			letter-spacing: .025em;
			line-height: 1;
			margin-bottom: 16px;
		}

		&__inner {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
			gap: 24px;
		}
	}

	&__action {
		display: flex;
		gap: 16px;
		align-items: center;
		border-radius: 8px;
		border: 1px solid var(--mb-color-accent);
		padding: 24px;
		background: #fff;
		box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); // shadow-lg
		position: relative;
		top: 0;
		transition: all .2s ease;

		svg {
			width: 32px;
			height: 32px;
			fill: var(--mb-color-accent);
		}

		&__title {
			display: block;
			margin-bottom: 4px;
			color: #0f172a; // slate-900
			font-weight: 600;
			font-size: 16px;
		}

		&__description {
			color: #64748b; // slate-500;
		}
	}

	&__action.mb-dashboard__action:hover {
		text-decoration: none;
		top: -8px;
	}


	// Intro
	&__intro {
		&__subtitle {
			font-size: 16px;
		}

		&__title {
			font-size: 24px;
			color: #0f172a; // slate-900
			font-weight: 600;
			margin-top: 12px;
		}

		&__text {
			margin-top: 24px;
			font-size: 18px;
			line-height: 1.6;
		}

		.mb-dashboard__button {
			margin-top: 24px;
		}
	}


	// Tabs
	&__info {
		background: #fff;
		border-radius: 8px;
		border: var(--mb-border);
	}

	&__tabs {
		display: flex;
		gap: 24px;
		border-bottom: var(--mb-border);
		font-size: 14px;
		padding-inline: 24px;
	}

	&__tab {
		display: block;
		padding-block: 16px;
		border-bottom: 3px solid transparent;
		font-weight: 600;
		color: #0f172a; // slate-900
		cursor: pointer;

		&--active {
			border-color: var(--mb-color-accent);
		}

		&__badge {
			background: var(--mb-color-accent);
			color: #fff;
			font-size: 10px;
			display: inline-block;
			line-height: 1;
			padding: 4px;
			border-radius: 2px;
			position: relative;
			top: -12px;
		}
	}

	&__tab-pane {
		padding: 24px;
	}

	// Tutorials
	&__tutorials {
		&__inner {
			display: grid;
			gap: 16px;
			grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
			margin-bottom: 24px;
		}
	}

	&__tutorial {
		display: flex;
		align-items: flex-start;
		gap: 16px;

		a {
			color: inherit;
		}

		&__image {
			position: relative;

			.tobii-zoom__icon {
				display: none;
			}

			&:before {
				position: absolute;
				top: calc(50% - 9px);
				left: calc(50% - 16px);
				content: "\f19b";
				font-family: "dashicons";
				font-size: 32px;
				color: #ff0000;
			}
		}

		img {
			width: 90px;
			height: auto;
			display: block;
			border-radius: 8px;
		}

		.mb-dashboard__tutorial__title {
			font-size: 16px;
			font-weight: 600;
			color: #0f172a; // slate-900
			margin-bottom: 8px;
			display: block;
		}

		&__description {
			font-size: 12px;
			color: #64748b;
		}
	}

	// Comparing tab and table
	&__compare {
		container-type: inline-size;

		&__header {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			gap: 24px;
			margin-block: 24px;

			p {
				margin-bottom: 0;
			}
		}

		&__title {
			font-size: 20px;
			font-weight: 600;
			color: #0f172a; // slate-900
		}

		tbody svg {
			width: 20px;
			height: 20px;
		}

		&__footer {
			margin-top: 48px;
			background: #f1f5f9; // slate-50
			padding: 48px;
			text-align: center;
			border-radius: 8px;

			p {
				font-size: 16px;
				margin-bottom: 24px;
			}
		}
	}

	// Sidebar

	&__sidebar {
		flex-basis: 360px;
		display: flex;
		flex-direction: column;
		gap: 24px;
	}

	&__widget {
		border: var(--mb-border);
		border-radius: 8px;
		background: #fff;
		padding: 24px;

		&-title {
			font-weight: 600;
			font-size: 16px;
			color: #0f172a; // slate-900
			margin-bottom: 18px;
			margin-top: -4px;
		}

		&-body {
			>p:last-child {
				margin-bottom: 0;
			}
		}
	}

	// Upgrade widget
	&__upgrade {
		border: none;
		background: linear-gradient(135deg, rgba(0, 182, 182, 1) 0%, rgba(43, 68, 91, 1) 100%);
		color: #fff;
		position: relative;

		.mb-dashboard__widget-title {
			color: inherit;
		}

		ul {
			margin-bottom: 24px;
		}

		li {
			display: flex;
			gap: 4px;
			align-items: center;
		}

		svg {
			width: 16px;
			height: 16px;
			fill: #fff;
		}

		a {
			display: block;
			text-align: center;
		}

		img {
			position: absolute;
			top: -30px;
			right: -10px;
			width: 60px;
			transform: rotate(-30deg);
		}
	}

	// Recommended plugins widget
	&__plugins .mb-dashboard__widget-body {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	&__plugin {
		display: flex;
		align-items: center;
		gap: 8px;
		position: relative;

		img {
			width: 32px;
			height: 32px;
		}

		&__text {
			flex: 1;
		}

		.mb-dashboard__plugin__title {
			font-weight: 600;
			color: #0f172a; // slate-900
		}

		&__description {
			font-size: 12px;
			color: #64748b; // slate-500
		}

		&__status {
			font-size: 12px;
			font-weight: 600;
			display: inline-flex;
			align-items: center;
			gap: 4px;
			position: absolute;
			right: 0;
			top: -4px;
			padding: 2px 6px;
			border-radius: 4px;
			border: 1px solid transparent;

			&:before {
				display: inline-block;
				content: "";
				width: 6px;
				height: 6px;
				border-radius: 50%;
				background: currentColor;
			}

			&[data-action="install"] {
				color: #64748b; // slate-500
				border-color: currentColor;
				cursor: pointer;
			}

			&[data-action="activate"] {
				color: #f59e0b; // amber-500
				border-color: currentColor;
				cursor: pointer;
			}

			&[data-action=""] {
				color: var(--mb-color-accent);
			}
		}
	}

	// Support widget
	&__support {
		position: relative;

		&__icon {
			position: absolute;
			top: 0;
			right: 0;
			width: 48px;
			height: 48px;
			fill: #f8fafc;
			z-index: 0;
		}
	}


	// News flyout sidebar
	&__news-icon {
		position: relative;

		&:before {
			content: "";
			display: inline-block;
			width: 10px;
			height: 10px;
			position: absolute;
			top: 0;
			right: 0;
			background: #ef4444;
			border-radius: 50%;
		}
	}

	&__news {
		--mb-news-width: 360px;

		position: fixed;
		top: 32px;
		right: calc(0px - var(--mb-news-width));
		width: var(--mb-news-width);
		bottom: 0;
		background: #fff;
		transition: all .2s ease-in-out;
		overflow-x: auto;
		border-left: var(--mb-border);

		&--active {
			right: 0;
		}

		&__header {
			padding: 12px 24px;
			border-bottom: var(--mb-border);
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 24px;
		}

		&__heading {
			font-size: 16px;
			font-weight: 600;
			color: #0f172a; // slate-900
		}

		&__close {
			width: 32px;
			height: 32px;
			padding: 0;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			border: none;
			background: none;
			cursor: pointer;

			svg {
				width: 24px;
				height: 24px;
			}
		}

		&__date {
			font-size: 10px;
			text-transform: uppercase;
			letter-spacing: .025em;
			font-weight: 600;
			margin-bottom: 8px;
			color: #94a3b8;
		}

		.mb-dashboard__news__title {
			display: block;
			font-size: 16px;
			font-weight: 600;
			color: #0f172a; // slate-900
			margin-bottom: 16px;
		}

		&__content p {
			display: none;
		}

		&__item {
			padding-inline: 24px;
		}

		&__item:not(:first-child) {
			margin-top: 24px;
			padding-top: 24px;
			border-top: var(--mb-border);
		}
	}
}

@media (max-width:1023px) {
	.mb-dashboard__header__search {
		display: none;
	}

	.mb-dashboard__body {
		flex-direction: column;
	}
}

@media (max-width: 782px) {
	.mb-dashboard__news {
		top: 46px;
	}
}

@media (max-width:599px) {
	.mb-dashboard__header__social {
		display: none;
	}

	.mb-dashboard__body {
		padding: 24px;
	}
}

@container (max-width: 599px) {
	.mb-dashboard__compare__header {
		flex-direction: column;
	}
}