Omphaloskepsis/plugins/jetpack/scss/templates/_settings.scss

// ==========================================================================
// Settings
// ==========================================================================

.jetpack_page_jetpack_modules {
	.wrap {
		@include breakpoint(phone){
			padding: 0 0 1em;
		}
	}
}

.page-content.configure {
	margin-top: 0;
}

.configure .frame {

	&.top {
		border: none;
		box-shadow: none;
		padding-top: em(20px);
		position: relative;
		top: auto;

		&.fixed {
			background: #f9f9f9;
			border-bottom: 1px solid #e9e9e9;
			padding-left: 160px;
			margin-top: -6px;
			position: fixed;
			right: 0;
			top: 32px;
			width: 100%;
			z-index: 4;
			box-shadow: 0 2px 2px -2px #eee;

			@media (max-width: 782px) {
				border: none;
				box-shadow: none;
				padding-top: em(20px);
				position: relative;
				top: auto;
			}
			@media (max-width: 600px) {
				top: 0;
			}
		}

		.tablenav.top {
			float: left;

			.actions {
				@media (max-width: 900px) {
					display: block;
				}
				@media (max-width: 782px) {
					margin-top: 6px;
				}
			}
		}
	}
}

.jp-frame-top-fixed .configure {
	padding-top: 94px;
}

.filter-search {
	display: none;
	float: right;
	margin-top: 10px;
	@media (max-width: 782px) {
		display: block;
	}
	@media (max-width: 530px) {
		display: none;
	}
}

.module-actions.landing-page {
	float: right;
	margin-right: 15px;

	a {
		font-size: 0.6em;
	}
}

.table-bordered.jetpack-modules {
	border: none;
	margin-bottom: 0;
	tr.jetpack-module {

		th {
			border-left: 0;
			padding: 14px 4px 0;
			input {
				display: block;
			}
		}
		&:hover {
			.genericon {
				display: inline-block;
			}
			td .row-actions span a {
				opacity: 1;
			}
		}
		&.active {
			th,
			td {
				background: #f7fcfe;
			}
			th {
				border-left: 4px solid #2ea2cc;
				padding-left: 0px;
			}
			td {
				&:first-child {
					border-left: 4px solid #2ea2cc;
				}
			}
		}
		&.unavailable {
			opacity: 0.3;
			input {
				display: none;
			}
		}
		&#vaultpress {
			opacity: 1;
		}
		&.deprecated {
			span {
				color: #888;
			}
			.dep-msg {
				margin-right: 10px;
				color: #555;
			}
		}
		th,
		td {
			background: #fff;
			margin: 0;
			-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);
			box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);

		}
		td {
			padding: 10px 10px 8px 14px;
			line-height: 25px;

			&:first-child {
				border-left: 4px solid #fff;
			}
			.row-actions {
				float: right;
				padding: 0 0 1px;
				visibility: visible;

				span {
					margin-left: 5px;
					a {
						opacity: 0;
						&:focus {
							opacity: 1;
						}
					}
				}

				@media (max-width: 530px) {
					display: none;
				}
				@include breakpoint(tablet){
					display: block;
					padding-left: 10px;
					visibility: visible;
				};

			}
		}
	}
	&>thead>tr>th {
		border: 0;
		vertical-align: middle;

		&:last-child {
			padding-right: 0;

			@include breakpoint(tablet){
				padding-left: 0;
			}
		}
	}
	td {
		background: #fff;
	}
	#doaction {
		margin-top: 0;

		@media (max-width: 782px) {
			padding: 10px 7px;
		}
	}
	.checkall {
		margin-top: 1px;
	}
	.filter-search {
		margin-top: 8px;
	}
	.genericon {
		color: #999;
		display: none;
		margin: 7px 3px 0;

		@include breakpoint(desktop){
			display: inline-block;
		};
	}
	.med {
		width: 70px;
	}
	.sm {
		width: 30px;
	}
	@media (max-width: 782px) {
		.check-column {
			width: 50px;
		}
	}
}
.fixed-top .check-column {
	padding: 8px 10px 0 10px;
	width: 2.2em;
}
.wrap {
	margin: 0;
	padding: 0 1.5em 1em;
	overflow: hidden;

	h2 {
		font-size: 24px;
		font-weight: 400;
	}
	.manage-left {
		float: left;
		margin: 0;
		padding: 0;
		width: 63%;

		table {
			width: 100%;
		}
		th {
			font-weight: 400;
		}

		@media (max-width: 782px) {
			width: 100%;
		}
	}
	.manage-right {
		margin: 0;
		padding: 0;
		/*position: absolute;
		right: 0;*/
		float: right;
		width: 35%;
		z-index: 1;

		p {
			font-size: 12px;
			font-weight: bold;
			color: #bbb;
			padding-top: 2px;
			text-transform: uppercase;
			letter-spacing: 1px;
			clear: left;
		}
		.bumper {
			margin-left: 33px;
		}
		&.show {
			display: block;
			// position: fixed;
			overflow-y: auto;
			overflow-x: hidden;
			position: absolute;
			z-index: 100000; // sits on top of wp-admin bar
		}
		.search-bar {
			margin-bottom: 18px;
			max-width: 300px;
		}
		p.search-box {
			float: none;
			height: auto;
			margin-bottom: 0;
			position: relative;

			input[type='search'] {
				padding: 0 8px;
				width: 90%;
				line-height: initial;

				@media (max-width: 782px) {
					float: left;
					padding: 9px 8px;
				}
			}
			input[type="submit"] {
				display: none;
			}
		}
		.button-group {
			.button {
				outline: none;
			}
		}
		.subsubsub {
			margin: 0;
			padding: 0;

			a {
				padding: 0;
				line-height: inherit;
			}
			.current{
				padding:1px 5px;
				border-radius:2px;
				margin-left:-5px;
				background: #0D72B2;
				color: #fff;

				.count{
					color: #BCD7E7;
					font-weight:200;
				}
			}

			li {
				display: block;
				text-align: left;
			}
		}

		@media (max-width: 782px) {
			background: #fff;
			bottom: 0;
			display: none;
			min-width: 300px;
			position: fixed;
			right: 0;
			top: 0;
			z-index: 13;
			box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1);

			.bumper {
				margin: 13px;
			}
			.navbar-form {
				margin: 0;
				padding: 0;
			}
		} // < 782
	}
}

@media (max-width: 782px) {

		// Fix to override particular wp-list-table changes in core - July 2015
		.wp-list-table tr:not(.inline-edit-row):not(.no-items) td:not(.column-primary):not(.check-column) {
			padding: 11px 10px;
			display: block;
		}

		.jetpack_page_jetpack_modules {
			#doaction {
				padding: 7px 14px;
			}
			.fixed-top thead .check-column {
				padding: 28px 10px 0 10px;
			}
			.filter-search {
				margin-top: 28px;
				.button {
					padding: 7px 14px;
				}
			}
		}
		.manage-right.show .subsubsub li {
				padding: 5px;
			}

} // < 782

@media (max-width: 650px) {

	.table-bordered.jetpack-modules tr.jetpack-module.deprecated td .row-actions {
		float: none;
		padding-left: 18px;
	}
}

@media (max-width: 430px) {

		// Hide activate / config links on really small screens. Users can still utlize these actions by tapping on the title of the module
		.table-bordered.jetpack-modules tr.jetpack-module td .row-actions {
			display: none;
		}

		.table-bordered.jetpack-modules tr.jetpack-module.deprecated td .row-actions {
			display: block;
		}
} // < 430