Current oav website

dotclear._no/admin/style/scss/partials/_blog_theme.scss

@@ -0,0 +1,178 @@
+/* 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;
+}