silverstripe-framework/admin/scss/_style.scss

 /**
 * This file defines most styles of the CMS: Colors, fonts, backgrounds,
 * alignments, dimensions.
 *
 * Use SCSS variable definitions in screen.css to avoid repeating styles
 * like background colours or padding dimensions. See themes/_default.scss
 * to get started.
 *
 * To avoid this file getting too large and complicated, it is encouraged to
 * create new SCSS files for larger components like the CMS menu or tree
 * (see _tree.scss and _menu.scss).
 */

/** ----------------------------------------------------
 * Core Styles.
 * ---------------------------------------------------- */

html,body {
	width: 100%;
	height: 100%;
	/* Removes RHS whitespace on iPad */
	overflow-x: hidden;
}

body.cms {
	overflow: hidden;
}

.cms {
	a {
		color: $color-text-blue-link;
		text-decoration: none;

		&:hover,
		&:focus {
			text-decoration: underline;
		}
	}

	strong {
		font-weight: bold;
	}
}

/** --------------------------------------------
 * Helpers
 * -------------------------------------------- */

.hide {
	display: none;
}

.cms-helper-hide-actions {
	.Actions {
		@extend .hide;
	}
}



/** --------------------------------------------
 * Panels Styles
 * -------------------------------------------- */
.cms-container {
	height: 100%;
	background: $tab-panel-texture-color;
}

.cms-preview,
.cms-menu,
.cms-content,
.cms-content-header,
/**
 * DEPRECATED:
 * .cms-content-tools will be removed in 4.0
 * Use .cms-content-filters instead.
 */
.cms-content-tools,
.cms-content-fields,
.cms-edit-form,
.cms-preview,
.cms-preview iframe,
.cms-preview-controls
 {
	display: inline-block;
}

.cms-content-header {
	z-index: 60;
	min-height: 52px;
	background: {
		image: url(../images/textures/cms_content_header.png);
		repeat: repeat;
		position: left bottom;
		color: $color-darker-bg;
	}

	a {
		color: $color-text-blue-link;
	}

	.backlink {
		span.btn-icon-back {
			height:16px;
		}
	}

	h2 {
		font-size: $font-size-h4;
		font-weight: bold;
		margin: 0;
		margin-bottom: $grid-x;

		* {
			vertical-align: middle;
		}
	}

	.cms-content-header-info {
		float:left;
		padding-top: $grid-y - 1;
		padding-left: $grid-x * 2;

		& * {
			display: inline-block; // align back button and breadcrumbs
		}

		.section-icon {
			opacity: 0.2;
			margin-right: 4px;
			background-repeat: no-repeat;
		}

		.cms_backlink {
			vertical-align: middle;
		}
	}

	// Reset to default styles
	.ss-ui-button {
		line-height: $grid-x*3;

		.ui-button-text {
			line-height: 1.4;
		}
	}
}

.cms-edit-form.CMSMain {
	padding: 0;
}

// Hide threeColumnCompressor column.
.cms-container {
	.column-hidden {
		display: none;
	}
}

.cms-content-header-top {
	display: inline-block;
	width: 100%;
}

// We have a faux three column layout when displaying Page content in the CMS.
.has-panel {
	.cms-tree-view-sidebar,
	.cms-versions-form {
		padding: 0 $grid-x*1.5 $grid-y*1.5 $grid-x*2;
	}

	.cms-content-header.north {
		&.collapsed {
			.cms-content-header-info {
				width: 60px;
				text-align: center;
				padding-left: 8px;
				padding-right: 8px;
			}

			.view-controls,
			.section-label {
				display: none;
			}

			.cms-content-header-nav {
				margin-left: 61px;
			}
		}
	}

	.cms-content-header-info {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 1px;
		width: 300px;
		padding-bottom: $grid-y;
		padding-left: $grid-x * 2;
		padding-right: $grid-x*2;
		box-shadow: 1px 0 0 0 $color-separator;
	}

	.cms-content-header-nav {
		margin-left: 300px;
	}

	.section-heading {
		margin-top: 8px;
		padding-left: 4px;
	}

	.section-icon {
		vertical-align: middle;
	}

	.section-label {
		vertical-align: middle;
		font-size: 1.2em;
		font-weight: normal;
	}

	.breadcrumbs-wrapper {
		float: left;
		padding-top: $grid-y - 1;
		padding-left: $grid-x*2;
	}

	.cms-content-header-tabs {
		margin-top: $grid-y;
	}

	.view-controls {
		float: right;
		margin-top: 4px;

		.icon-button-group {
			.icon-button {
				padding: 6px 8px;
				height: 26px;
			}
		}
	}

	.cms-content-tools {
		.cms-panel-content {
			padding-top: 0;
			overflow-x: hidden;
		}
	}
}

#page-title-heading {
	line-height: 1.2em;
}

/** ------------------------------------------------------------------
 * CMS Breadcrumbs
 * ----------------------------------------------------------------- */
.breadcrumbs-wrapper {
	.crumb,
	.sep {
		font-size: .8em;
		line-height: 1.2em;
		font-weight: normal;
	}

	.crumb {
		&.last {
			display: block;
			padding: 8px 0;
			font-size: 1.2em;
		}
	}

	.sep {
		+ .crumb.last {
			padding-top: 0;
			padding-bottom: 0;
		}
	}
}

/** ------------------------------------------------------------------
 * Filters available in the top bar.
 * This is a togglable element that displays a form
 * used for filtering content.
 * ----------------------------------------------------------------- */
.cms-content-filters {
	display: none;
	width: 100%;
	padding: 12px 16px;
	border-bottom: 1px solid $color-light-separator;

	.cms-search-form {
		margin-bottom: 0;
	}
}

.cms-tabset-nav-primary {
	display: inline-block;
	vertical-align: middle;
}

/** ------------------------------------------------------------------
 * Buttons that use font icons.
 * There are !important rules here because we need to override some Tab styling.
 * It's tidier to have some !important rules here than have the Tab styles
 * littered with load of context specific rules for icon-buttons.
 * Icon buttons styles should always take presedence over Tab styles.
 * Tabs should be refactored to use weaker selectors.
 * ----------------------------------------------------------------- */
.cms {
	a.icon-button,
	button.ss-ui-button.icon-button {
		vertical-align: middle;
		margin: 0 2px 0 0;
		padding: 5px 8px;
		font-size: 14px;
		text-indent: 0;
		text-shadow: none;
		line-height: 1em;
		color: $color-text;
		background-color: transparent;
		background-image: none;
		border: 0;

		&:hover,
		&:active,
		&:focus {
			border: 0;
			box-shadow: none;
			background-image: none;
			text-decoration: none;
		}

		&:hover {
			background-color: #d4dbe1;
		}

		&.active,
		&:active {
			background-color: #d4dbe1;
		}

		&.font-icon-search {
			padding: 5px 6px;
			color:lighten($color-text, 10%);

			&.active,
			&:active,
			&:focus,
			&:hover {
				background: none;
				box-shadow: none;
				color: darken($color-text, 10%);
			}


			&:before {
				font-size: 18px;
				margin-left: 1px;
				margin-right: 0;
			}
		}

		.ui-button-text {
			display: none;
		}

		.ModelAdmin & {
			margin-top: -11px;
		}
	}
}

// Context specific overrides for Tabs.
.ui-tabs.ui-tabs-nav li.cms-tabset-icon.ui-corner-top.ui-state-active a.icon-button.cms-panel-link,
.ui-tabs.ui-tabs-nav li.cms-tabset-icon.ui-corner-top.ui-state-default a.icon-button.cms-panel-link {
	padding: 5px 8px 6px;
	line-height: 1em;
	background-color: transparent;
	background-image: none;
	border: 0;

	&:before {
		vertical-align: middle;
	}
}

.icon-button-group {
	display: inline-block;
	margin-top: 1px;
	vertical-align: middle;
	border: 1px solid #CDCCD0;
	border-radius: 4px;

	a.icon-button,
	button.ss-ui-button.icon-button {
		margin-right: 0;
		line-height: 13px;
		border-radius: 0;

		&:first-child {
			border-radius: 3px 0 0 3px;
		}

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

		&:hover {
			background: $tab-panel-texture-color;
		}

		&.active:hover {
			background: #d4dbe1;
		}

		+ a.icon-button,
		+ button.ss-ui-button.icon-button {
			border-left: 1px solid #CDCCD0;
		}

		&.font-icon-thumbnails {
			&::before {
				margin-left: -2px;
			}
	}
	}

	// Context specific overrides for Tabs.
	.ui-tabs.ui-tabs-nav {
		border-left: 0 !important;
		padding-right: 0 !important;
		margin-bottom: 0;
		overflow: hidden;

		.cms-tabset-icon.ui-state-default {
			background-color: transparent;
			background-image: none;
			margin: 0;
			padding: 0;
			border-left: 0;
			border-right: 0;
			box-shadow: none;

			+ .cms-tabset-icon.ui-state-default {
				border-left: 1px solid #CDCCD0;
			}

			&:hover {
				background: $tab-panel-texture-color;
			}

			&.ui-state-active:hover {
				background: #d4dbe1;
			}
		}

		.cms-tabset-icon.ui-state-active {
			background-color: #d4dbe1;
		}
	}

	.cms-content-header-tabs & {
		overflow: hidden;
	}
}

/** --------------------------------------------
 * Tabs
 * -------------------------------------------- */

.ui-tabs {
	padding: 0;
	background: none;

	.ui-tabs {
		position: static;
	}

	.ui-tabs-panel {
		padding: $grid-y*1.5 $grid-x*2;
		background: transparent; // default it's white
		border: 0; // suppress default borders

		&.cms-edit-form {
			padding: 0;
		}
	}

	.ui-widget-header {
		border: 0;
		background: none;
	}

	.ui-tabs-nav {
		float: right;
		margin: $grid-x*2 0 -1px 0;
		padding: 0 $grid-x*2 0 0;
		border-bottom: 0;

		~ .ui-tabs-panel {
			clear: both;
		}

		li {
			top: 0;
			float: left;
			margin-top: 0;

			&:active {
				outline: none;
			}

			a {
				display: inline-block;
				outline: none;
				float: none;
				font-weight: normal;
				color: $color-text;
				line-height: $grid-y * 4;
				padding: 0 $grid-x*1.5 0;

				&.icon-button {
					@extend a.icon-button;
				}
			}

			&:last-child {
				// correctly right-align last tab
				margin-right: 0;
			}
		}

		.ui-state-default {
			border: 0;
			background: transparent;

			a {
				line-height: 28px;
				padding-top: 12px;
				padding-bottom: 8px;
				color: lighten($color-text, 10%);

				&:hover {
					color: $color-text;
				}
			}
		}

		.ui-state-active {
			padding-bottom: 1px;
			background-color: transparent;
			cursor: text;

			a {
				border-bottom: 3px solid #66727d;
				padding-left: 0;
				padding-right: 0;
				margin: 0 12px 0;
				color: $color-text;
			}
		}

		&.ui-state-active {
			border-color: $color-medium-separator;
		}

		li.cms-tabset-icon.ui-corner-top {
			text-indent:-9999em;

			a {
				display: block;
				padding-left: 40px; // icon width
				padding-right: 0;
				margin: 0;
			}
		}
	}

	.cms-panel-padded {
		.ui-tabs-panel {
			padding: 0; // Avoid double padding with parent

			.ui-tabs-panel {
				padding: $grid-x 0 0 0;
			}
		}

		.Actions {
			padding: 0; // Avoid double padding with parent
		}
	}

	&.ss-tabset-tabshidden .ui-tabs-panel {
		border-top: none;
	}
}

/**
 * SilverStripe 4 tabs.
 * Tab styles built on top of Bootstrap 4 tab functionality
 */

.nav-tabs {
	margin-bottom: 20px;

	.nav-item {

	}

	.nav-link {
		margin-right: 4px;
		color: $body-color-light;

		&:hover {
			text-decoration: none;
			background: transparent;
		}

		&.active,
		&.active:hover {
			border-bottom: 2px solid $body-color;
			color: $body-color;
		}
	}
}

/**
 * Primary styles which sit on top of screen, with different tab colors.
 * TODO Only use one "primary" selector and fix HTMLEditorField TabSet addExtraClass()
 */
.ui-tabs.cms-tabset-primary .ui-tabs-nav,
.ui-tabs .ui-tabs-nav.cms-tabset-nav-primary,
.ui-tabs .cms-content-header-tabs .ui-tabs-nav {
	margin-top: 0;
	float: none; // parent container is already right floated

	li {
		margin-right: 0; // tabs are directly adjacent
		margin-top: 0;
			a {
			margin: 0;
			// overlap divider line below
			line-height: 40px - 1px;
			padding-top: 0;
			padding-bottom: 0;
			}
		}

	.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr, .ui-corner-tl {
		border-radius:0;
	}

	.ui-state-default {
		background: none;
		border-top: none;
		border: none;
	}

	.ui-state-active {
		box-shadow: none;
		background: transparent;
		border-top: none;
		border: none;
		z-index:2;

		a {
			border-bottom: 4px solid #66727d;
			padding: 0;
			margin: 0 12px 0;
		}
	}
}

.cms-content-header-tabs {
	float: right;
	margin-top: $grid-y*1.5;

	&.icon-button-group-tabs {
		margin-top: 12px;
		margin-bottom: 13px;
	}

	.icon-button-group {
		margin-right: $grid-x*2;
	}
}

.cms-content-fields .ui-tabs-nav {
	float: none;
	padding: 0;
	border-bottom: 1px solid $color-button-generic-border;
	margin: 0 16px 0;

	li {
		margin-bottom: -1px;

		&.first a {
			margin-left: 0;
			padding-left: 0;
		}
	}
}

/** -------------------------------------------------------
 * Loading Interface
 * ------------------------------------------------------- */

.cms-content-loading-overlay {
	position: absolute; // z-index doesn't apply properly without that
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9998;
	// Further styling by .ui-widget-overlay-light which is usually applied at the same time
}

.cms-content-loading-spinner {
	position: absolute; // z-index doesn't apply properly without that
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url(../images/spinner.gif) no-repeat 50% 50%;
}

/** -----------------------------------------------
 * Loading Screen
 * ------------------------------------------------ */
.ss-loading-screen {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	z-index: 100000;
	// TODO Convert to compass gradient include
	background: #fff;
	background: -moz-radial-gradient(50% 50% 180deg, circle cover, #FFFFFF, #EFEFEF, #C7C7C7 100%);
	background: -webkit-gradient(radial, 50% 50%, 350, 50% 50%, 0, from(#E3E3E3), to(white));

	.loading-logo {
		width: 100%;
		height: 100%;
		overflow: hidden;
		position: absolute;
		background: transparent url(../images/silverstripe_logo.png) no-repeat 50% 50%;
	}

	p {
		width: 100%;
		text-align: center;
		position: absolute;
		bottom: 80px;
		z-index: 100001;

		span.notice {
			width: 300px;
			font-size: 14px;
			padding: 10px 20px;
			color: #dc7f00;
			border: none;
			background: none;
			border-radius: 5px;
			display: inline-block;
			zoom: 1;
      		*display: inline;
		}
	}

	.loading-animation {
		display: none;
		position: absolute;
		left: 50%;
		margin-left: -21.5px; // Half of spinner size
		top: 80%;
	}
}

/** --------------------------------------------
 * Actions
 * -------------------------------------------- */

.cms-content-actions, .cms-preview-controls {
	margin: 0;
	z-index: 999;
	border-top: 1px solid $color-light-separator;
	height: 53px;
	max-height: 53px;
	background-color: $tab-panel-texture-color;

	&.south .Actions {
		height: 52px;
		padding: $grid-y+2 $grid-x*2;
	}
}


/** --------------------------------------------
 * Messages
 * -------------------------------------------- */

.message {												// White
	display: block;
	clear: both;
	margin: 0 0 $grid-y;
	padding: $grid-y + $grid-x/4 $grid-x + $grid-x/2;
	font-weight: normal;
	border: 1px #ccc solid;
	background: #fff;									// for browsers that don't understand rgba
	background: rgba(#fff,0.5);
	text-shadow: none;
	border-radius: 3px;

	&.notice {
		background-color: lighten($color-notice,22%);	// Blue
		border-color: $color-notice;
	}
	&.warning {											// Yellow
		background-color: lighten($color-warning,47%);
		border-color: $color-warning;
	}
	&.error, &.bad, &.required, &.validation {			// Red
		background-color: lighten($color-error,24%);
		border-color: $color-error;
	}
	&.good {											// Green
		background-color: lighten($color-good,40%);
		border-color: $color-good;
	}

	p {
		margin: 0;
	}
}


.cms-edit-form {
	.message {
		margin: $grid-x*2; // TODO Remove double padding when adjacent to a padded tabs panel
	}
	.ui-tabs-panel {
		.message {
			margin: $grid-x*2 0; // gets padding from tab panel
		}
	}
}


.notice-item {
	border-radius: 3px;
	font-family: inherit;
	font-size: inherit;
	padding: 6px 24px 8px 10px;
	word-wrap: break-word;
	min-height: 60px;
	height: auto;
	border: 0;
	border-left: 3px solid;
	color: #666;
	left: 300px;
	background: #fff;

	&.success,
	&.good,
	&.green {
		border-color: $color-good;
	}

	&.notice,
	&.info,
	&.blue {
		border-color: $color-notice;
	}

	&.warning,
	&.caution,
	&.yellow {
		border-color: $color-warning;
	}

	&.bad,
	&.error,
	&.red {
		border-color: $color-error;
	}

	p {
		margin-bottom: 0;
	}
}

.notice-item-close {
	font-size: 0; // hide the textNode "x" that jquery.notice.js inserts
	opacity: .8;

	&:hover {
		opacity: 1;
	}

	// apply relevant styles from .font-icon-cancel
	&::before {
		content: "\44";
		font-size: 15px;
		font-family: silverstripe, sans-serif;
		font-weight: normal;
		-webkit-font-smoothing: antialiased;
	}
}



/** --------------------------------------------
 * Page icons
 * -------------------------------------------- */

.page-icon, a .jstree-pageicon {
	display: block;
	width: 16px;
	height: 16px;
	background: transparent url(../images/sitetree_ss_pageclass_icons_default.png) no-repeat;
}

.page-icon {
	&.class-HomePage {
		background-position: 0 -48px;
	}
	&.class-RedirectorPage {
		background-position: 0 -16px;
	}
	&.class-VirtualPage {
		background-position: 0 -32px;
	}
	&.class-ErrorPage {
		background-position: 0 -112px;
	}
}

/** --------------------------------------------
 * "Add page" dialog
 * -------------------------------------------- */

.cms-page-add-form-dialog {

	display: none;
}

.cms-add-form {
	.step-label {
		opacity:0.9;
		.flyout {
			height: 26px; //centres number within the grey arrow
			padding-top:5px;
		}
		.title {
			padding-top:5px; //aligns label with point of arrow
			font-weight:bold; //to match pagetype label
			text-shadow: 1px 1px 0 $color-text-shadow;
		}
	}
	ul.SelectionGroup {
		padding-left:28px;
		overflow: visible;
		@include legacy-pie-clearfix;
	}
	.parent-mode {
		padding: $grid-x;
		overflow: auto;
	}
}

#PageType {
	ul {
		padding-left: 20px;
		li {
			float: none;
			width: 100%;
			padding: 9px 0 9px 15px;
			overflow: hidden;
			border-bottom-width: 2px;
			border-bottom: 2px groove lighten($color-shadow-light, 95%);
			-webkit-border-image: url(../images/textures/bg_fieldset_elements_border.png) 2 stretch stretch;
			border-image: url(../images/textures/bg_fieldset_elements_border.png) 2 stretch stretch;

			&:last-child {
				border-bottom: none;
			}

			&:hover, &.selected {
				background-color: $color-highlight-opacity;
			}

			&.disabled {
				color: $color-text-disabled;
				opacity: 0.5;

				&:hover {
					background: none;
				}
			}

			input {
				margin: inherit;
			}

			label {
				padding-left: 0;
				padding-bottom: 0;
			}

			input, label, .page-icon, .title {
				float: left;
				line-height: 1.3em;
			}

			.page-icon {
				margin: 0 4px;
			}

			.title {
				width: 120px;
				font-weight: bold;
				padding-right: 10px;
			}

			.description {
				font-style: italic;
				// Undo some generic styles from tooltips
				display: inline;
				clear: none;
				margin: 0;
			}
		}
	}
}

/** --------------------------------------------
 * Content toolbar
 * -------------------------------------------- */

.cms-content-toolbar {
	min-height: 29px;
	display: block;
	margin: $grid-y*1.5 0 0;
	padding-bottom: 0;
	@include legacy-pie-clearfix();
	border-bottom: 0;
	box-shadow: none;

	.cms-tree-view-modes {
		float:right;
		padding-top:$grid-y - 3;
		* {
			display: inline-block;
			label {
				color:$color-text-blue-link;
			}
		}
	}

	.cms-actions-tools-row {
		clear: both;
	}

	.tool-action {
		display: none;
	}
}

/**
 * DEPRECATED:
 * .cms-content-tools will be removed in 4.0
 * Use .cms-content-filters instead.
 *
 * Content Tools is the sidebar on the left of the main content
 * panel
 */
.cms-content-tools {
	background: $tab-panel-texture-color;
	width: $grid-x * 36;
	overflow-y: auto;
	overflow-x: hidden;
	z-index: 70;
	box-shadow: 1px 0 0 0 $color-separator;
	z-index: 1000;
	float: left;
	position: relative;

	&.filter{
		padding:0 !important;
	}

	.cms-panel-header {
		clear: both;
		margin: 10px 0 $grid-y - 1;
		padding-bottom: 2px;
		line-height: $grid-y * 3;
		border-bottom: 1px solid $color-light-separator;
	}

	.cms-panel-content {
		width: 300px;
		overflow: auto;
		height:100%;

		.Actions .ss-ui-action-constructive {
			margin-right:5px; //accounts for the scrollbar in the filter - keeps the actions on one line instead of wrapping onto two.
		}
	}

	.cms-content-header {
		background-color: darken($color-widget-bg, 40%);
		background-image: linear-gradient(darken($color-widget-bg, 20%), darken($color-widget-bg, 40%));

		h2 {
			text-shadow: darken($color-widget-bg, 50%) -1px -1px 0;
			width: $grid-x * 22 /* 24 - (padding on each side + margin) */;
			color: lighten($color-widget-bg, 60%);
			@include hide-text-overflow();
		}
	}

	h3,h4,h5 {
		font-weight: bold;
		line-height: $grid-y * 2;
	}
	h3 {
		font-size: $font-size-h5;
	}

	h4 {
		font-size: $font-size-h5;
		margin:5px 0;
	}

	.ui-widget-content {
		background: none;
	}

	.field {
		/*
		 * Fields are more compressed in the sidebar compared to the
		 * main content editing window so the below alters the internal
		 * spacing of the fields so we can move that spacing to between
		 * the form fields rather than padding
		 */
		label {
			float: none;
			width: auto;
			font-size: $font-size-root;
			padding: 0 $grid-x 4px 0;
		}

		.middleColumn {
			margin: 0;
		}

		input.text,
		select,
		textarea {
			padding: 5px;
			font-size: 11px;
		}

		&.checkbox {
			padding: 0 0 8px;

			input {
				margin: 2px 0;
			}
		}

		.description {
			margin-left: 0;
		}
	}

	.fieldgroup {
		.fieldgroup-field {
			padding: 0;

			.field {
				margin: 0;
				padding: 0;
			}
		}
	}

	table {
		margin: 8px -4px;
		thead {
			th {
				color: $color-text-dark;
				font-weight: bold;
				line-height: 16px;
				font-size: 11px;
				padding: 4px;
			}
		}

		tr {
			&.active {
				background-color: $color-menu-button;
				color: $color-text-light;

				td.first-column {
					border-radius: 6px 0 0 6px;
				}
				td.last-column {
					border-radius: 0 6px 6px 0;
				}
			}
		}

		td {
			padding: 4px;
			line-height: 16px;
			vertical-align: top;
		}
	}

	td {
		border-bottom: 1px solid darken($color-widget-bg, 10%);
		padding: $grid-y - 1 2px;
		font-size: 11px;
	}
}

/** ------------------------------------------------------------------
* CMS notice, used for filter messages, but generic enough to use elsewhere
* ----------------------------------------------------------------- */

.cms-notice {
	display: block;
	margin: 0 0 8px;
	padding: 10px 12px;
	font-weight: normal;
	border: 1px $color-light-separator solid;
	background: #fff; //for browsers that don't understand rgba
	background: rgba(#fff,0.5);
	text-shadow: none;
}

.cms-tree-filtered {
	position: absolute;
	margin: 0;
	width: 100%;
	box-sizing: border-box;
	margin-left: -$grid-x*2;
	padding: $grid-y*2 $grid-x*2;
	background: #D4E2EC;
	text-shadow: none;
	border: 0;

	> strong,
	> a {
		font-size: 14px;
	}
}

/**
 * CMS Batch actions
 */
.cms-content-batchactions-button {
	display: inline-block;
	padding: 4px 6px;
	vertical-align: middle;
	background-image: linear-gradient(to bottom, #fff, #D9D9D9);
	border: 1px solid #aaa;
	border-radius: 4px;
}

.cms-content-batchactions {
	float: left;
	position:  relative;
	display: block;

	.view-mode-batchactions-wrapper {
		height: 18px;
		float: left;
		padding: 4px 6px;
		border: 1px solid #aaa;
		margin-bottom: 8px;
		margin-right:-1px;
		background-color: #D9D9D9;
		background-image: linear-gradient(to bottom, #fff, #D9D9D9);
		border-top-left-radius: 4px;
		border-bottom-left-radius: 4px;

		input {
			vertical-align: middle;
		}

		.view-mode-batchactions-label {
			vertical-align: middle;
			display: none;
		}
	}

	.checkbox {
		margin-top: 2px;
		vertical-align: middle;
	}
}
.cms-content-batchactions-dropdown {
	display: inline-block;

	// Context specific rules for when batch actions are in the SiteTree panel.
	.cms-content-tools & {
		width: 100%;
	}

	fieldset { // The dropdown element wrapper
		display: inline-block;
		width: 200px;

		.view-mode-batchactions-label {
			display: inline;
		}

		// Context specific rules for when batch actions are in the SiteTree panel.
		.cms-content-tools & {
			width: 82%;
		}
	}

	.dropdown { // The 'select' element
		width: 100%;
		height: 32px;

		.chosen-single {
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
			box-shadow: none;
		}
	}

	.Actions {
		display: inline-block;
		padding: 0;
		margin-left: -4px;
		min-height: auto;

		// Context specific rules for when batch actions are in the SiteTree panel.
		.cms-content-tools & {
			width: 16%;
		}
	}

	.action {
		width: 100%;
		height: 32px;
		margin-bottom: 0;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}
}

/** --------------------------------------------
 * Preview
 * -------------------------------------------- */
.cms-switch-view {
	a {
		padding-right: 1em;
	}
}

/** --------------------------------------------
 * Member Profile
 * -------------------------------------------- */

form.member-profile-form {
	padding: 0 $grid-x*2 0 0;

	#Root_Permissions {
		clear:both;
		border-top: 1px solid darken($color-tab, 20%);
	}

	#Root_Main {
		clear:both;
		border-top: 1px solid darken($color-tab, 20%);
		.cms-help-toggle {
			text-indent: -9999em;
			display: inline-block;
			width: 20px;
			background:url(../images/question.png) no-repeat 0px 0px;
		}
	}

	#FavouritePageID {
		margin-top:$grid-y;
	}

	#CsvFile .middleColumn {
		background: none !important;
	}

	.advanced h4 {
		margin-bottom: .5em;
	}
	.Actions {
		text-align: left;
		border: 0;
	}
	input.customFormat {
		width: $grid-x * 10;
		border: 1px solid #ccc !important;
		padding: 3px;
		display: inline-block;
		margin-left: 1em;
	}
	.formattingHelpToggle {
		display: block;
		font-size: 11px;
	}
	.formattingHelpText {
		margin: 5px 0 0 -5px;
		color: #333;
		padding: 5px 10px;
		background: #fff;
		border: 1px solid #ccc;
	}
	.formattingHelpText ul {
		padding: 0;
	}
	.formattingHelpText li {
		font-size: 11px;
		color: #333;
		margin-bottom: 2px;
		padding-bottom: 0;
		float: none;
		width: auto;
	}
	#Groups .middleColumn {
		margin-left: 0;
		width: 100%;
		.TreeDropdownField {
			width: 90%;
			max-width: 90%;
		}
	}

	// Same rules in .SecurityAdmin
	#Permissions {
		.optionset {
			li {
				float: none;
				width: auto;
			}
		}
	}
}

.memberdatetimeoptionset {
	.description {
		font-style: normal;
	}
	.toggle {
		font-size: $font-size-sm;
	}
}

.cms {
	.cms-content {
		border-right: 1px solid #BBB;
		border-radius: 0;
		background: $tab-panel-texture-color;
		width: 800px;
		z-index: 40;
	}

	.cms-content-fields {
		// always show a y scroll bar as popups like TreeDropdowns
		// can trigger longer pages and the extra scroll bar doesn't fire our sizing bar
		overflow-y: auto;
		overflow-x: auto;
		background: $tab-panel-texture-color;
		width: 100%;
		#Root_Main {
			.confirmedpassword {
				border-bottom:none;
				box-shadow:none;
			}
			.customFormat {
				max-width:80px;
			}
			.cms-help-toggle {
				text-indent: -9999em;
				display: inline-block;
				width: 20px;
				background:url(../images/question.png) no-repeat 0px 0px;
			}
		}
		#Root_Permissions{
			ul.optionset li {
				float:none;
			}
		}
				}
	form.member-profile-form {
		#Root .ui-tabs-nav {
			display: none;
			}

		#Root_Main, #Root_Permissions {
			border: none;
			}
		}
	}

/** --------------------------------------------
 * "Settings" Form
 * -------------------------------------------- */
#CanViewType, #CanEditType, #CanCreateTopLevelType {
	.optionset li {
		// All options on their own line
		float: none;
		width: auto;
		white-space: nowrap;
	}
}
#ViewerGroups, #EditorGroups, #CreateTopLevelGroups {
	select {
		// Fix for chosen.js width detection on hidden elements.
		// TODO Remove once .field styling in _form.scss is refactored to allow flexible field widths
		width: $grid-x * 64;
	}
}

/** --------------------------------------------
 * Panels
 * -------------------------------------------- */

/* Panel close */
.cms {
	.btn--close {
		float: right;
		margin: 0;
		padding: 5px;
		right: 6px;
		position: absolute;

		&:hover {
			text-decoration: none;
		}

		&[class*="font-icon-"]::before {
			font-size: 20px;
			color: $body-color-light;
		}
	}
	.btn-toolbar {
		margin-top: 20px;
		margin-bottom: 20px;
	}
}

.cms-panel {

	.cms-panel-toggle {
		&.south {
			box-shadow: inset $color-light-separator 0 1px 0; // #C1C7CC
			position: absolute;
			bottom: 0;
			width: 100%;
			min-height: 53px;
		}

		a {
			display: block;
			text-align: right;
			padding: 14px 0;
			width: 100%;
			text-decoration: none;
			line-height: 20px;
			height: 52px;

			span {
				display: inline-block;
				margin: 0 8px;
				color: #555d60;
				font-size: 16px;
			}

			&.toggle-expand {
				width: 60px; // will set the collapsed width
				display: none;
			}
		}
	}

	&.collapsed {
		cursor: pointer;
		.cms-panel-header *,
		.cms-panel-content,
		.cms-panel-toggle a.toggle-collapse{
			display:none;
		}
		.cms-panel-toggle a.toggle-expand {
			display: block;
		}

	}

	.cms-panel-header {
		width: 100%;
	}

	&#cms-content-tools-CMSPageEditController {
		.cms-panel-content-collapsed {
			width: 60px;
			display: none; // Avoids FOUC

			h2, h3 {
				border-bottom: 0;
				margin-left: $grid-y;
				transform-origin: bottom, right;
				transform: rotate(270deg);
			}
			.cms-panel-header {
				width: 600px;
				position: relative;
				top: 24px;
				right: 577px;
				text-align: right;
			}
		}
	}

	.cms-panel-content-collapsed {
		width: 60px;
		display: none; // Avoids FOUC
		height: calc(100% - 52px);
		overflow: hidden;

		h2, h3 {
			border-bottom: 0;
			margin-left: 18px;
			transform-origin: bottom right;
			transform: rotate(270deg);
		}

		.cms-panel-header {
			width: 600px;
			position: relative;
			right: 574px;
			text-align: right;
			border-bottom: none;
			box-shadow: none;
			margin-top: -5px;
		}
	}
}

.cms {
	.cms-panel-padded {
		&.ReportAdmin {
			> fieldset {
				padding: 12px 16px;
			}
		}

		.cms-content-view {
			padding: 0 $grid-x*2 $grid-y*1.5;
		}
	}
}

.CMSPageAddController {
	.cms-panel-padded {
		padding: $grid-y*2 $grid-x*2;
	}
}
/** ------------------------------------------------------------------
* Dialog
*
* Contained in a jQuery UI dialog ('.ui-dialog'), with either inline
* markup (for the "insert" dialogs), or an iframe (for member profile).
* ----------------------------------------------------------------- */

// overlay for switching between CMS panes
.cms .ui-widget-overlay-light {
	background: #aaaaaa url(../../thirdparty/jquery-ui-themes/smoothness/images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;
	opacity: 0.3;
}

// Adjusting the color of the background overlay to be darker for pop-up dialogs (created by jQuery-UI)
.cms .ui-widget-overlay {
	background-color: #000;
	background-image: none;
}

.cms .ui-dialog{
	.ss-ui-dialog.ui-dialog-content {
		padding-top: 0px; //removes padding so that tabs are flush with header
	}
}

// Elements with this class can either frame inline markup or an iframe,
// most styles should be applied to .cms-dialog instead (which declares the content in the frame)
.ui-dialog {
	background: $tab-panel-texture-color;
	background-clip: content-box;
	border: 1px solid #666 !important;
	border-radius: $grid-y;
	overflow: visible;
	padding: 0;
	box-shadow: 0px 0px 30px 10px rgba(0,0,0,.3);

  	// Titlebar for pop-up dialog.
	.ui-dialog-titlebar.ui-widget-header {
	  	font-size: $font-size-root +1;
		padding: 0;
		border:none;
		background: transparent url(../images/textures/cms_content_header.png) repeat;
		box-shadow: $color-shadow-dark 0 0 ($grid-x / 2) inset;

		.ui-dialog-title {
			position:absolute;
		}
	}

	.ui-dialog-content {
		border-radius: $grid-y;
		overflow: auto; // TODO Replace with proper $.layout grid

		&.loading {
			background-image: url(../images/spinner.gif);
			background-position: 50% 50%;
			background-repeat: no-repeat;
		}
	}

	.cms-dialog-content {
		background: $tab-panel-texture-color;
		padding-bottom: $grid-y;
		padding-top:0px;

		.Actions {
			overflow: auto;
			margin: $grid-y 0;
			padding-bottom: $grid-y;
			float: right;
		}

		.ui-tabs{
			position:static;
			// Shift navigation upwards to be horizontally centered with dialog title.
			// Can't use floats since this title is in a different DOM parent sibling
			// Note: Does NOT apply to member profile form (unnecessary, since it doesn't have a dialog title)
			.ui-tabs-nav {
				position:absolute;
				top: 9px;
				// Tabs nav is included in scollbar. By absolutely positioning it off the edge,
				// we avoid tabs shifting position when scrollbar toggles
				right: 40px;
			}

			// Don't show top border, since these styles already have a title bar
			.ui-tabs-panel {
				border: 0;
			}
		}

		.clear {
			clear: both;
		}

	}

	&.loading {
		background-image: url(../images/spinner.gif);
		background-position: 50% 50%;
		background-repeat: no-repeat;
	}

	.ui-dialog-buttonpane {
		margin: 0;
		background: $color-darker-bg;
		border-top: 1px solid $color-light-separator;
		border-bottom-left-radius: 8px;
		border-bottom-right-radius: 8px;
}
}

body.cms-dialog {
	overflow: auto;
	background: $tab-panel-texture-color;
	position:relative;
}

/** --------------------------------------------
 * "Insert X" forms
 * -------------------------------------------- */
.htmleditorfield-dialog{
	&.ui-dialog-content{
		padding:0;
		position:relative;
	}

	.htmleditorfield-from-web {
		text-align: center;
		margin-bottom: $grid-y;

		&.CompositeField{
			@include clearfix;
		}

		.url-description {
			text-align: left;
			margin-bottom: $grid-y*1.5;
		}

		div.remoteurl{
			border:none;
			@include box-shadow-none;
			width: 80%; //Fallback for IE 8
			width: calc(100% - 80px);
			position: relative;
			display: inline-block;
			padding: 0;
			margin: 0;

			label {
				position: absolute;
				left: 8px;
				top: 0;
				font-weight: normal;
				color: #888;
				width: 35px;
				padding-right: 0;
				z-index: 1;
			}

			.middleColumn {
				margin-left: 0;
				max-width: none;
			}

			input.remoteurl {
				padding-left: 44px;
				max-width: none;
			}
		}

		button.add-url{
			display: inline-block;;
			float: none;
			margin: 2px 0 0;
			vertical-align: top;

			&:hover, &:active{
				opacity:1;
			}

			&.ui-state-disabled {
				&, &:hover, &:active {
					opacity: 0.35;
					filter: Alpha(Opacity=35);
				}
			}
		}

		&.loading button.add-url::before {
			content: '';
			background: url(../images/throbber.gif) no-repeat center center;
			padding: 8px;
		}
	}

	.cms-content-header{
		padding:0;
		width:100%;
		height: 53px;

		h3{
			padding: $grid-y*1.5 0 $grid-y*1.5 $grid-x*2;
			margin: 0;
			line-height: 28px;
			display: inline-block;
			font-weight: normal;

			&.insert {
				.back-button {
					margin: 0;
					padding: 0;
					cursor: pointer;

					&::before {
						margin-right: 4px;
						font-size: 18px;
						vertical-align: text-bottom;
					}
		}
	}
		}
	}

	.ss-insert-media, .ss-insert-link {
		padding: $grid-y*1.5 $grid-x*2;

		.ui-tabs-panel {
			padding: 0;
		}
	}

	.Actions {
		padding:$grid-y $grid-x*2 ;

		.ui-tabs-panel {
			padding: 0;
		}
	}
	.details{
		.file-url{
			display:block;
			width:300px;
			@include hide-text-overflow;
		}
		.cms-file-info{
			.field{
				border:none;
				box-shadow: 0 0 0 rgba(0, 0, 0, 0);
			}
		}
		.field{
			border-bottom: 1px solid $color-shadow-light;
    		box-shadow: 0 1px 0 lighten($color-shadow-light, 95%);
    		&.last{
				border-bottom:none;
				box-shadow: 0 0 0 rgba(0, 0, 0, 0);
				margin-bottom:0;
			}
		}
	}

	.CompositeField{
		.text{
			select{
				margin: 5px 0 0 0;
			}
		}
	}
}

.htmleditorfield-linkform {
	.step2 {
		margin-bottom: $grid-x*2;
	}
	.ss-uploadfield {
		.middleColumn {
			width: auto;
		}
	}
}

.htmleditorfield-mediaform {
	.ss-gridfield {
		.gridfield-button-delete {
			// TODO Remove from PHP instead of hiding
			display: none; // delete action shouldn't be allowed here
		}
	}

	.htmleditorfield-from-web, .htmleditorfield-from-cms {
		&.ss-uploadfield {
			.middleColumn {
				width:auto;
				background:none;
				border:none;
				min-width: 0;
			}
		}
	}

	.htmleditorfield-from-cms {
		&.ss-uploadfield {
			h4 {
				float: left; // headline and dropdown on same line
				margin-top: $grid-y/2; // bring to same baseline as dropdown
				margin-bottom: 0;
			}

			.middleColumn {
				min-width: 0; // fit within available space
				clear: none; // headline and dropdown on same line
			}

			.field.treedropdown {
				border-bottom: 0; // don't show border, dropdown and gridfield visually belong together
				padding: 0;
				position: absolute;
				margin: 0;
				top: 12px;
				left: 160px;
				width: auto;
				min-width: 200px;
			}

			.treedropdownfield-title {
				width: auto;
				padding: 5px 2px 5px 4px;
				max-width: 200px;
				font-size: 14px;
				font-weight: bold;
			}

			.treedropdownfield-toggle-panel-link {
				padding: 5px 4px 5px 0;

				a {
					background: url(../images/sitetree_ss_default_icons.png);
					background-position: -18px -4px;
					height: 14px;
					opacity: .8;
		}
	}

			.TreeDropdownField {
				background: 0;
				box-shadow: none;
				border: 0;
			}
		}
	}

	.ss-assetuploadfield .ss-uploadfield-editandorganize {
		.ss-uploadfield-files {
			.ss-uploadfield-item-info {
				background-color: grayscale(#5db4df);
				background-image: linear-gradient(to bottom,  grayscale(#5db4df) 0%, grayscale(#5db1dd) 8%, grayscale(#439bcb) 50%, grayscale(#3f99cd) 54%, grayscale(#207db6) 96%, grayscale(#1e7cba) 100%);
			}
		}
	}
}

/** --------------------------------------------
 * Search forms (used in AssetAdmin, ModelAdmin, etc)
 * -------------------------------------------- */
.cms-search-form {
	margin-bottom: $grid-y*2;
	.filter &{
		margin-bottom:0;
	}
	.Actions {
		padding: 0;
	}
}

/** --------------------------------------------
 * Step labels
 * -------------------------------------------- */
.step-label {

	& > * {
		display: inline-block;
		vertical-align: top;
	}

	.flyout {
		height: 26px - 2*4px; // minus padding
		font-size: $font-size-root +1;
		font-weight: bold;
		border-top-left-radius: 3px;
		border-bottom-left-radius: 3px;
		background-color: #667980; // hardcoding colour since its tied to the sprite
		padding: 4px 3px 4px 6px;
		text-align: center;
		text-shadow: none;
		color: #fff;
	}

	.arrow {
		height: 26px;
		width: 10px;
		margin-right: 4px;
		@extend .icon-sprites-32x32;
		@include sprite($sprites-32x32-numeric-label);
		display: inline-block;
	}

	.title {
		height: 26px - 2*4px; // minus padding
		padding: 4px;
	}
}


/** --------------------------------------------
 * Item Edit Form
 * -------------------------------------------- */

.cms-file-info {
	overflow: auto;
	// Emulate .field bottom border styling without applying .field class,
	// as it messes up the nested .field element styling (blocklevel labels)
	border-bottom: 1px solid $color-shadow-light;
	box-shadow: 0 1px 0 lighten($color-shadow-light, 95%);
	margin-bottom: $grid-x;

	// Preview might not always be available
	.cms-file-info-preview {
		float: left;
		width: $grid-x * 22; // Same as ".field label"
		margin-right: $grid-x;

		img {
			max-width: $grid-x * 22; // Same as ".field label"
			max-height: $grid-x * 16; // Fitting typical info displayed (~5 rows)
		}
	}
	.cms-file-info-data {
		float: left;
		width: 55%;

		.field {
			// Unsetting styles from .field, make it more compact visually
			margin: 0;
			padding-bottom: $grid-x;
			border: none;
			box-shadow: none;
			label.left {
				width: $grid-x*12;
			}
			.middleColumn {
				margin-left: $grid-x*13;
			}
			label, span {
				padding: 0;
			}
		}
	}
}

form.small {
	.cms-file-info-preview {
		width: $grid-x*14;

		img {
			max-width: $grid-x*14;
		}
	}

	.cms-file-info-data {
		// Ensure it fits beside the image preview, increased size for long url
		max-width: 550px;


		// Reduced label widths to fit everything in smaller space
		.field {
			padding-bottom: 0;

			label {
				width: $grid-x*14;
			}
			.middleColumn {
				margin-left: $grid-x*15;
			}
		}
	}
}

/** --------------------------------------------
 * Users Members Admin
 * -------------------------------------------- */

 .members_grid {
 	span button#action_gridfield_relationfind {
 		display:none; //hides find button - redundant functionality
 	}
 	p button#action_export {
		span.btn-icon-download-csv {
			height:17px; //exact height of icon
		}
 	}
}

/**
 * Import forms
 */

form.import-form {
	ul {
		list-style: disc;
		li {
			margin-left: 20px;
		}
	}
	p {
		margin-bottom: 5px;
	}
	label.left {
		width: 250px;
	}

}

/** --------------------------------------------
 * Page Edit Controller
 * -------------------------------------------- */

/*.cms-container {
	.CMSPageEditController, .CMSPageSettingsController, .CMSPageHistoryController {
		// Fix pixel gap between nav tree and main page header
	 	margin-left: -1px; // Removed to close gap far right of right tabs?
	}
}*/

/** --------------------------------------------
 * Page Settings Controller
 * -------------------------------------------- */

.cms-container .CMSMain.CMSPageSettingsController {
	.tab#Root_Settings {
		.optionset li {
			white-space:nowrap;
			label {
				padding-left:2px;
			}
		}
		.fieldgroup .fieldgroup-field {
			width:$grid-x*27;
			padding-left:0;
		}
	}
}

/** --------------------------------------------
 * Buttons for FileUpload
 * -------------------------------------------- */
.ss-uploadfield-item-edit-all .ui-button-text{
	padding-right:0;
}

.toggle-details-icon {
	@extend .icon-sprites-32x32;
	@include sprite($sprites-32x32-menu-arrow-down);

	.ss-uploadfield-item-edit-all & {
		@extend .icon-sprites-32x32;
		@include sprite($sprites-32x32-menu-arrow-deselected-down);

		display:inline-block;
		width:8px;
		height:8px;
		padding-left:5px;
	}

	&.opened {
		@extend .icon-sprites-32x32;
		@include sprite($sprites-32x32-menu-arrow-up);

		.ss-uploadfield-item-edit-all &{
			@extend .icon-sprites-32x32;
			@include sprite($sprites-32x32-menu-arrow-deselected-up);

			display:inline-block;
		}
	}
}

/** --------------------------------------------
 * Hide preview toggle link by default.
 * May be shown js if needed.
 * -------------------------------------------- */
.cms .Actions > .cms-preview-toggle-link,
.cms .cms-navigator > .cms-preview-toggle-link{
	display:none;
}