Sid Gifari File Manager Pro v10.0.3

✏️ Editing: dashboard.scss Writable

// 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);
		}
	}

// Sale widget
	&__sale {
		.mb-dashboard__widget-title {
			margin: -25px -25px 0;
			background: var(--mb-color-accent);
			color: #fff;
			padding: 16px 24px;
			border-radius: 4px 4px 0 0;
			position: relative;
		}

&__badge {
			background: url(../img/hot.svg) no-repeat center center;
			background-size: 64px 64px;
			font-weight: 700;
			font-size: 12px;
			text-transform: uppercase;
			display: inline-block;
			width: 64px;
			height: 64px;
			line-height: 64px;
			text-align: center;
			position: absolute;
			top: -24px;
			color: #0f172a;
		}

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

display: block;
			margin-inline: auto;
			text-align: center;

background: var(--mb-color-accent);
			padding: 16px 24px;
			line-height: 1;

white-space: nowrap;
			border-radius: 4px;
			text-decoration: none;

&.mb-dashboard__sale__button:hover {
				opacity: .9;
				text-decoration: none;
			}

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

&-text--large {
				font-size: 16px;
				font-weight: 700;
				letter-spacing: .025em;
				text-transform: uppercase;
				// color: rgb(251 191 36);
				display: block;
				margin-bottom: 4px;
			}

&-text--small {
				font-size: 14px;
				display: block;
				color: #fff;
			}
		}
	}

&__countdown {
		list-style: none;
		padding: 0;
		margin-inline: 0;
		margin-top: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 16px;
		text-align: center;

li {
			border: 1px solid var(--mb-color-accent);
			border-radius: 4px;
			padding: 12px 16px;
			margin: 0;
		}

&-number {
			font-size: 24px;
			font-weight: 600;
			margin-bottom: 8px;
		}
	}
}

@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;
	}
}