/* pour les alignements verticaux */

#theme-new,
#theme-activate,
#theme-deactivate,
#theme-update {
	margin-left: -10px;
	margin-right: -10px;
}

.box.theme {
	margin: 5px;
	padding: 10px 10px 5px 10px;
	border: 1px solid $theme-box-border;
	position: relative;
	&:hover {
		background: $theme-box-over;
	}
	input {
		margin-bottom: 1em;
	}
}

.module-name,
.module-name label {
	margin-bottom: .5em;
	color: $theme-name-color;
}

.module-sshot {
	text-align: center;
	img {
		padding: 5px;
		background: $theme-img-background;
		box-shadow: 1px 1px 2px $theme-img-shadow;
		border: 3px solid $theme-img-border;
		max-width: 100%;
	}
}

.module-actions {
	margin-top: 1em;
}

.bloc-toggler {
	text-align: right;
	img {
		opacity: .4;
		&:hover {
			opacity: 1;
		}
	}
	a:focus img {
		opacity: 1;
	}
}

span.module-version:before {
	content: "- ";
}

.toggle-bloc .mod-more {
	display: block;
	margin-left: 0;
}

.module-name input[type="checkbox"] {
	margin-bottom: 0;
}


/**
Les screenshots des thèmes ont deux tailles possibles :
- dans Ajouter des thèmes : 240px (+ 10 padding image + 20 padding boîte + 6 bordure + 2 ombrage = 278)
- dans Thèmes installés : 280px (+ 10 padding-image + 20 padding-boîte + 2 ombrage = 318)
On adapte largeur et hauteur en fonction
*/

#theme-new .box.theme,
#theme-update .box.theme {
	/* Ajouter un thème */
	width: 278px;
	min-height: 275px;
}

#theme-new .module-sshot img {
	/* Pour ceux qui n'ont pas de miniature on contraint l'image */
	max-width: 240px;
	max-height: 210px;
	overflow: hidden;
}

#theme-deactivate .box.theme {
	/* Thèmes désactivés */
	width: 278px;
	&:hover {
		background: transparent url(dc_logos/sq-logo-32.png) no-repeat top right;
	}
}

#theme-activate .box.theme {
	/* Thèmes installés */
	width: 318px;
	min-height: 304px;
	max-width: 100%;
}


/* si js est là, les infos viennent par dessus le screenshot */

.with-js #theme-new {
	.module-infos.toggle-bloc,
	.module-actions.toggle-bloc {
		position: absolute;
		left: 10px;
		width: 239px;
		margin: 0;
		padding: 10px;
		background: $theme-action-background;
	}
	.module-infos.toggle-bloc {
		top: 128px;
		height: 80px;
		border-top: 1px solid $theme-action-border;
	}
	.module-actions.toggle-bloc {
		top: 208px;
		height: 40px;
		border-bottom: 1px solid $theme-action-border;
	}
}

.with-js .module-sshot:hover {
	cursor: pointer;
}


/* mise en forme pour la boîte du thème courant */

.box.current-theme {
	/* Thème courant */
	width: 646px;
	margin: 5px;
	padding: 20px 18px 6px;
	background: $theme-current-background;
	border: 1px solid $theme-current-border;
	border-radius: .5em;
	min-height: 326px;
	box-shadow: 1px 1px 2px $theme-current-shadow;
	position: relative;
	.module-sshot:hover {
		cursor: auto;
	}
	.module-sshot img {
		float: left;
		margin-right: 2em;
		border: 9px solid $theme-current-img-border;
		padding: 5px;
		max-width: 308px;
		max-height: 273px;
	}
	.module-name {
		color: $theme-current-name-color;
		font-size: 1.5em;
		margin-bottom: 1em;
	}
	.module-actions {
		display: flex;
		flex-wrap: wrap;
	}
}

.current-actions {
	width: auto;
	overflow: hidden;
	padding-top: 2em;
	background: transparent url(../images/minus-theme.png) no-repeat left top;
}