From 45198c57145f8083859d94eefee23baf621ba915 Mon Sep 17 00:00:00 2001
From: Serghei Mihai <smihai@entrouvert.com>
Date: Mon, 30 Jan 2023 16:36:30 +0100
Subject: [PATCH] villejuif: update theme (#73989)

---
 static/villejuif/_custom.scss              | 207 ++++++++-------------
 static/villejuif/_vars.scss                |  17 +-
 static/villejuif/config.json               |   9 +-
 static/villejuif/{ => images}/required.png | Bin
 4 files changed, 100 insertions(+), 133 deletions(-)
 rename static/villejuif/{ => images}/required.png (100%)

diff --git a/static/villejuif/_custom.scss b/static/villejuif/_custom.scss
index 8e1afc43..583cfb5a 100644
--- a/static/villejuif/_custom.scss
+++ b/static/villejuif/_custom.scss
@@ -1,14 +1,32 @@
-$header-width: 1140px;
+$header-width: 1650px;
 $header-height: 109px;
 
+%button {
+	@extends %button;
+	height: 40px;
+	border-bottom: 4px solid $secondary-color;
+	font-weight: 600;
+	font-family: 'Open Sans', sans-serif;
+	text-shadow: 1px 1px 1px rgba(0,0,0,.4);
+	&:hover {
+		border-bottom: 4px solid $primary-color;
+	}
+	&::before {
+		margin-right: 5px;
+	}
+	&::after {
+		margin-left: 5px;
+	}
+}
+
 body {
-	font-family: 'Open Sans', Helvetica, sans-serif;
-	background: #fff;
+	font-family: $font-family;
+	background: $third-color;
 }
 
 div#main-content-wrapper,
 div#nav{
-	max-width: 1140px;
+	max-width: $header-width;
 }
 
 div#header {
@@ -26,19 +44,32 @@ div#header {
         }
 
         @media screen and ($max-mobile-viewport) {
-                height: $header-height +10px;
+                height: $header-height + 51px;
                 left: -78px;
         }
 }
 
-#logo a {
-	display: inline-block;
-	background: url(header.png) no-repeat;
-	padding-top: 70px;
-	min-width: 421px;
-	color: white;
-	font-weight: normal;
-	text-indent: -9999px;
+#logo {
+	display: flex;
+	align-items: center;
+	height: $header-height;
+	a {
+		display: inline-block;
+		padding-left: 130px;
+		height: $header-height - 20px;
+		max-width: 421px;
+		color: $primary-color;
+		font-weight: normal;
+		display: flex;
+		align-items: center;
+		&:hover {
+			text-decoration: none;
+			font-weight: bold;
+		}
+	}
+	&.has-logo a {
+		text-indent: 0;
+	}
 }
 
 div#nav {
@@ -48,33 +79,28 @@ div#nav {
 		margin-top: 0;
 		margin-bottom: 0;
 	}
-	/*background-color: #fff;*/
 	background-color: $primary-color;
 	border-top: 2px solid $primary-color;
 	border-left: 1px solid $primary-color;
 }
 
 div#nav #nav-button .icon-bar{
-	background-color: $primary-color;
+	background-color: $third-color;
 }
 
 div#nav #nav-button + ul li a{
 	font-style: normal;
 	font-weight: 700;
 	line-height: 1;
+	text-transform: uppercase;
 	transition: background-color 0.2s ease, color 0.2s ease;
-	font-size: 1rem;
+	font-size: 1.1rem;
 	padding: 15px 15px 15px;
-	color: #fff;
+	color: $third-color;
 	background-color: $primary-color;
 	border-left: 1px solid $primary-color;
 	border-right: 1px solid $primary-color;
-	-webkit-border-radius: 0px 25px 0px 0px;
-	-moz-border-radius: 0px 25px 0px 0px;
-	border-radius: 0px 25px 0px 0px;
-}
-div#nav #nav-button + ul li.selected > a, div#nav #nav-button + ul li:hover > a {
-	background-color: $primary-color;
+	border-bottom: 1px dotted $third-color;
 }
 
 #main-content {
@@ -86,9 +112,8 @@ div#nav #nav-button + ul li.selected > a, div#nav #nav-button + ul li:hover > a
 }
 
 span.required {
-	background: transparent url(required.png) 0px 0.5ex no-repeat;
+	background: transparent url(images/required.png) 0px 0.5ex no-repeat;
 	color: transparent;
-	padding: 0 0 0 24px;
 	margin-left: 1ex;
 }
 
@@ -101,11 +126,17 @@ div.widget div.title{
 	font-weight: bold;
 }
 
-div#nav #nav-button + ul li.selected > a, div#nav #nav-button + ul li:hover > a{
-	/*background-color: $primary-color;
-	color:#fff;*/
-	background-color: #fff;
-	color:$primary-color;
+div#nav #nav-button + ul li {
+	&.selected > a {
+		background-color: $third-color;
+		color:$primary-color;
+	}
+	&:hover > a {
+		background-color: $secondary-color;
+		color:$third-color;
+		border: 1px dotted $third-color;
+		border-top: none;
+	}
 }
 
 div.message{
@@ -122,21 +153,26 @@ form h4{
 
 div.gru-content div#rub_service h3,
 div#rub_service h3 {
-	background-color: #1ba39c;
-	color: #fff;
+	background-color: $secondary-color;
+	color: $third-color;
 	padding: 5px;
-	font-size: 1em;
+	font-size: 1.1em;
+	margin-top: 0;
 }
 
 #footer-wrapper{
 	box-sizing: content-box;
 	background-color: $primary-color;
 	height: 50px;
-	padding: 30px 0;
-	color: #fff;
+	color: $third-color;
+	a {
+		color: $third-color;
+	}
 }
-#footer-wrapper	a{
-	color:#fff;
+
+div#rub_service div.dataview, div#rub_service dl#evolutions,
+div#rub_service .drafts-recall, div#rub_service form {
+	padding: 0 0.5rem;
 }
 
 div.infonotice::before, div.warningnotice::before, div.errornotice::before {
@@ -199,119 +235,34 @@ div.PasswordWidget + br.content {
 	display: none;
 }
 
-div.buttons .submit-button button,
-div.buttons .previous-button button,
-div.buttons .cancel-button button,
-div.gru-content button,
-div.SubmitWidget .content button ,
-div#login-page button,
-div#frontend-registration-email button,
-div.wcs-tracking-code-input button {
-	height: 40px;
-	background: linear-gradient(to bottom, #23a7a0 0%,$primary-color 100%);
-	border: none;
-	-webkit-border-radius: 5px;
-	-moz-border-radius: 5px;
-	border-radius: 5px;
-	position: relative;
-	border-bottom: 4px solid #045d58;
-	color: #ffffff;
-	font-weight: 600;
-	font-family: 'Open Sans', sans-serif;
-	text-shadow: 1px 1px 1px rgba(0,0,0,.4);
-	text-align: left;
-	transition: none;
-	text-indent: 5px;
-	cursor: pointer;
-	margin: 0 auto;
-	padding: 0px;
-	padding-right: 30px;
-}
-
-div.buttons .submit-button button::after,
-div.buttons .previous-button button::before,
-div.buttons .cancel-button button::before,
-div#login-page button::before,
-div#frontend-registration-email button.submit-button::before,
-div.wcs-tracking-code-input button::before {
-	display: block;
-	position: absolute;
-	-webkit-border-radius: 5px;
-	-moz-border-radius: 5px;
-	border-radius: 5px;
-	padding: 0px;
-	padding-right: 5px;
-	top: 9px;
-}
 div.a2-block form button {
 	min-width: 0px;
 }
-div.buttons .submit-button button::after ,
-div.buttons .previous-button button::before,
-div#login-page button.submit-button::before,
-div#frontend-registration-email button.submit-button::before,
-div.wcs-tracking-code-input button::before {
-	background-color: #045d58;
-}
+
 div.buttons .submit-button button::after {
 	content: "➡️";
-	right: 2px;
 }
 div.buttons .previous-button button::before {
 	content: "⬅️";
-	left: 2px;
 }
 div.buttons .cancel-button button::before {
-	content: "❌";
-	left: 2px;
+	content: "⏹️";
 }
 div#login-page button.cancel-button::before {
-	content: "🛑";
-	left: 2px;
+	content: "⏹️";
 }
 div#login-page button.submit-button::before {
 	content: "↪️";
-	left: 2px;
 }
 div.wcs-tracking-code-input button::before,
 div#frontend-registration-email button.submit-button::before {
 	content: "➡️";
-	left: 2px;
 }
 div.widget-optional .content button {
 	content: "➕";
 	padding-right: 10px;
 }
 
-div.buttons .cancel-button button,
-div.buttons .previous-button button,
-div#login-page button,
-div#frontend-registration-email button,
-div.wcs-tracking-code-input button {
-	padding-left: 25px;
-	padding-right: 10px;
-}
-
-form.quixote div.buttons {
-	display: flex;
-}
-
-div.buttons div.cancel-button {
-	order: 1;
-}
-
-div.buttons div.submit-button {
-	order: 2;
-}
-
-div.buttons div.previous-button {
-	order: 0;
-}
-div.buttons div.savedraft-button {
-	order: 4;
-}
-
-
 /* Bloc & widget */
 div.gru-content div.blocChamp button {
 	padding-left: 5px;
@@ -346,10 +297,10 @@ div.blocChamp div.content div.SubmitWidget div.content {
 
 div#toplinks {
 	background-color: $primary-color;
-	color: #ffffff;
+	color: $third-color;
 }
 div#toplinks a {
-	color: #ffffff;
+	color: $third-color;
 	font-weight: bold;
 }
 .gru-content #columns > .cell[class*="grid-"] {
@@ -410,7 +361,7 @@ div.catalogue div.code,
 div.ateliers div.code {
 	float: left;
 	background-color: $primary-color;
-	color: #ffffff;
+	color: $third-color;
 	padding: 12px;
 	font-weight: bold;
 	margin-right: 10px;
diff --git a/static/villejuif/_vars.scss b/static/villejuif/_vars.scss
index 29774425..500aa22a 100644
--- a/static/villejuif/_vars.scss
+++ b/static/villejuif/_vars.scss
@@ -1,9 +1,11 @@
-$primary-color: #1ba39c;
+$primary-color: #e0005a;
+$secondary-color: #94053f;
+$third-color: #ffffff;
 
 $width: 980px;
 $font-color: #222;
-$font-size: 0.875em;
-$font-family: Helvetica, sans-serif;
+$font-size: 1em;
+$font-family: Arial, sans-serif;
 $button-background: $primary-color;
 $title-background: $primary-color;
 $title-weight: bold;
@@ -12,9 +14,16 @@ $border-radius: 0;
 $nav-background: $primary-color;
 $nav-color: white;
 $nav-active-color: lighten($primary-color, 10%);
-$nav-item-transform: uppercase;
 $footer-background: #636361;
 $link-color: darken($primary-color, 20%);
 $nav-button-background: transparent;
 
+$button-background: $primary-color;
+$button-hover-background: $secondary-color;
+$button-color: $third-color;
+$button-border: 0;
+$button-border-radius: 5px;
+
+$buttons-order: previous, cancel, submit;
+
 $widget-unique-checkbox-position: left;
diff --git a/static/villejuif/config.json b/static/villejuif/config.json
index 86aa91b8..1ca5ded7 100644
--- a/static/villejuif/config.json
+++ b/static/villejuif/config.json
@@ -1,6 +1,13 @@
 {
   "label": "Villejuif",
   "variables": {
-    "theme_color": "#1ba39c"
+    "theme_color": "#e0005a"
+  },
+  "settings": {
+      "combo": {
+          "COMBO_ASSET_SLOTS.update": {
+            "header:logo": { "label": "Têtière : logo" }
+          }
+      }
   }
 }
diff --git a/static/villejuif/required.png b/static/villejuif/images/required.png
similarity index 100%
rename from static/villejuif/required.png
rename to static/villejuif/images/required.png