1#@!#!123s

: / var / www / oems / wp-content / plugins / tablepress / admin / css /
Filename : common.scss
back
/**
 * CSS code for all TablePress admin screens
 *
 * @package TablePress
 * @subpackage Views CSS
 * @author Tobias Bäthge
 * @since 1.0.0
 */

// Load the Sass string module, for use in the `unicode` function.
@use "sass:string";

/* Load WordPress color schemes, which normally are only loaded on WP admin screens that use the block editor. This and the dependency in package.json are only needed for WP < 6.9. */
@use "~@wordpress/base-styles/colors";
@use "~@wordpress/base-styles/mixins";
@include mixins.wordpress-admin-schemes();

// Ensure that Unicode characters are embedded in ASCII-encoded form.
@function unicode($str) {
	@return string.unquote("\"") + string.unquote(string.insert($str, "\\", 1)) + string.unquote("\"");
}

/* Hour glass cursor, while waiting for AJAX requests. */
body.wait * {
	cursor: wait !important;
}

/* Move down the header when the Screen Options or Help tabs are opened. */
#screen-meta[style$="block;"] ~ #tablepress-page {
	margin-top: 40px;
}

/* Move the Screen Options and Help link to their original position. Needed due to the full-width header. */
#screen-meta-links {
	position: absolute;
	right: 0;
	z-index: 10001; /* Ensure that the tab is always above the arrow of WP feature pointers. */
}

#tablepress-page {
	margin: 0 0 0 -20px;

	/* Add space between WP core update nag and header navigation. */
	.update-nag ~ & {
		margin-top: 25px;
	}

	#tablepress-body {
		padding: 0 20px;
	}

	/* Metabox titles should have the same height, with and without the "?" button. */
	.postbox-header h2 {
		line-height: 24px;
	}

	.header {
		background: #ffffff;
		border-bottom: 1px solid #dedae6;
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		padding-right: 260px; /* Space for the screen meta links. */

		.name {
			border-right: 1px solid #dedae6;
			padding: 7px 20px;
			line-height: 0;
		}
	}

	#tablepress-nav {
		background: #ffffff;
		padding: 0 0 0 20px;
	}

	.nav-menu {
		margin: 0;
		padding: 0;
		list-style-type: none;
		list-style-image: none;
		display: flex;
		flex-wrap: wrap;

		.nav-item {
			margin-bottom: 0;
		}

		li:hover > a,
		li > a:focus {
			border-bottom-color: var(--wp-admin-theme-color);
			background-color: #f9f9f9;
		}
	}

	.nav-link {
		white-space: nowrap;
		border-bottom: 5px solid #ffffff;
		padding: 18px 18px 12px;
		font-size: 14px;
		display: inline-block;
		text-decoration: none;
		color: #1e1e1e;

		&.active {
			border-bottom-color: var(--wp-admin-theme-color);
		}

		&.separator {
			margin-right: 20px;
		}
	}

	.buttons {
		padding: 0 12px;

		.tablepress-button {
			cursor: pointer;
			border: 1px solid #ffffff;
			border-radius: 3px;
			align-items: center;
			margin: 10px 12px;
			padding: 6px 4px 6px 12px;
			font-size: 14px;
			line-height: 1;
			text-decoration: none;
			display: inline-flex;
			color: #ffffff;
			background-color: #16a34a;
			border-color: #16a34a;

			&:hover,
			&:active,
			&:focus {
				span:first-child {
					text-decoration: underline;
				}
			}

			&.renew {
				background-color: #ff5100;
				border-color: #ff5100;
			}

			.dashicons {
				margin: 0 6px 0 4px;
			}
		}
	}

	.postbox ul {
		list-style: disc inside;
		margin: 0;

		> li {
			margin: 0;
		}
	}

	/* Styling for the "Info" icon next to descriptions/notices. */
	.components-h-stack {
		svg {
			min-width: 24px;
		}
	}

	.code input,
	.code textarea {
		font-family: Consolas, Monaco, monospace;
		direction: ltr;
		unicode-bidi: embed;
	}

	/* Reset style from postboxes that pollute components' styles. */
	.components-panel__body {
		> .components-panel__body-title {
			padding: 0;
		}

		&.is-opened > .components-panel__body-title {
			margin: -16px -16px 5px;
		}
	}

	.components-card {
		box-shadow: none;
		border-radius: 0;
		border: 1px solid #c3c4c7;

		.components-card-header {
			padding: 0;
			border-bottom: 1px solid #c3c4c7;

			h2 {
				line-height: 24px;
			}
		}

		.components-card-body {
			padding: 16px;
		}

		.card-title {
			font-size: 13px;
			font-weight: 500;
			padding: 0 0 16px;
		}
	}

	.components-checkbox-control__input,
	.components-radio-control__input {
		&:checked:disabled {
			opacity: 0.4;
		}

		&:not(:checked):disabled {
			background: #f0f0f0;
			border-color: #cccccc;
		}
	}

	.components-text-control__input:disabled,
	.components-textarea-control__input:disabled {
		background: #f0f0f0;
		border-color: #cccccc;
		box-shadow: none;
	}

	/* Alignment of selects inside of checkbox labels. */
	.checkbox-select-in-label {
		.components-h-stack {
			align-items: center;
		}
		.components-checkbox-control__label {
			display: flex;
			gap: 8px;
			align-items: center;
		}
	}

	.notice {
		margin: 20px 0 0;
	}

	.components-notice {
		@at-root body[class*="branch-6-"] &.notice {
			box-shadow: none;
			padding: 8px 12px;
			border-top: none;
			border-right: none;
			border-bottom: none;


			&.is-dismissible {
				padding-right: 38px;

				.notice-dismiss {
					&:before {
						content: unicode("f335");
						content: unicode("f335") / "";
						font-size: 24px;
						padding-right: 4px;
					}

					&:hover:before {
						color: #1e1e1e;
					}
				}
			}
		}

		&.notice-info {
			border-left-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
		}
		.components-notice__content {
			margin: 0;
		}
	}

	/* Notices for "Preview" and "Save Changes" buttons. */
	.components-notice-list {
		display: flex;
		flex-direction: column;
		gap: 8px;

		@keyframes fadeIn {
			from {
				opacity: 0;
			}
			to {
				opacity: 1;
			}
		}

		.components-notice {
			animation: fadeIn 1s; /* Fade in new notices. */
			transition: opacity 1s; /* Fade out notices before removing them. */
			scroll-margin-bottom: 50px; /* Scroll into view offset for error notices. */
		}

	}

	.components-snackbar-list {
		position: fixed;
		bottom: 24px;
		padding-left: 4px;
	}
}

/* Table Preview (CSS for actual preview is directly in the preview HTML). */
.table-preview-modal {
	.components-modal__content {
		padding: 0 16px 26px;
	}

	iframe {
		width: 100%;
		height: 100%;
	}

	.components-modal__header {
		padding: 20px 26px 8px;

		+ div {
			height: 100%;
		}
	}
}

/* Width of the columns on the "All Tables" list. */
.tablepress-all-tables {
	thead {
		.column-table_id {
			width: 50px;
		}
		.column-table_name {
			width: 30%;
		}
		.column-table_author {
			width: 12%;
		}
		.column-table_last_modified {
			width: 15%;
		}
	}

	/* Font weight for the table ID column. */
	tbody .column-table_id {
		font-weight: bold;
	}

	/* Responsiveness on the All Tables screen. */
	@media screen and (max-width: 782px) {
		.column-table_id {
			display: none !important;
			padding: 3px 8px 3px 35%;
		}
	}
}

/* Layout adjustments for the header row. */
table.widefat {
	thead,
	tfoot {
		td.check-column {
			padding-top: 0;

			@media screen and (max-width: 782px) {
				padding-top: 6px;
			}
		}
	}
	th {
		&.sortable,
		&.sorted {
			a {
				line-height: 24px;
			}
		}
	}
	.sorting-indicators {
		margin-top: 2px;
	}
}

/* Positioning of Search results of WP_List_Tables. */
#tablepress-page .subtitle {
	float: left;
	padding: 8px 0 0 0;
}

/* Tables in postboxes (on the "Edit" and "Plugin Options" screens). */
.tablepress-postbox-table {
	border-spacing: 0;
	max-width: 1000px;
	width: 100%;

	/* Default column widths. */
	.column-1 {
		width: 25%;
	}
	.column-2 {
		width: 75%;
	}

	th {
		text-align: left;
		font-weight: normal;
	}
	th,
	td {
		padding: 2px;
	}
	.top-border {
		th,
		td {
			padding-top: 6px;
		}
	}
	.bottom-border {
		th,
		td {
			padding-bottom: 6px;
			border-bottom: 1px solid #eeeeee;
		}
	}
	.top-align {
		vertical-align: top;
		padding-top: 6px;
	}
}

/* Select dropdown alignment. */
#tablepress-page select {
	vertical-align: baseline;
}

/* Alignment of textareas and buttons in postboxes. */
#tablepress-page textarea:not(.components-textarea-control__input),
.tablepress-postbox-table .button {
	margin: 1px;
}

/* Styling of pills in postbox headings. */
.postbox .postbox-header .hndle:not(:has(> .help-container)) {
	display: inline;

	.pill-label {
		display: inline-block;
		vertical-align: top;
		box-sizing: border-box;
		margin: 1px 0 -1px 6px;
		padding: 0 5px;
		min-width: 18px;
		height: 18px;
		border-radius: 9px;
		background-color: var(--wp-admin-theme-color);
		color: #ffffff;
		font-size: 11px;
		line-height: 1.6;
		text-align: center;
		z-index: 26;
	}
}