crous-bfc: add initial theme (#89720 )

naoned: new theme (#88161 )
css: introduce --border-color css var for %button (#89724 )
2024-04-18 17:09:37 +02:00 · 2024-04-18 17:01:44 +02:00 · 2024-04-18 12:22:00 +02:00 · 2024-04-16 13:48:27 +02:00 · 2024-04-16 12:13:29 +02:00 · 2024-04-16 10:19:45 +02:00
25 changed files with 1248 additions and 53 deletions
--- a/static/crous-bfc/_custom.scss
+++ b/static/crous-bfc/_custom.scss
@ -0,0 +1,169 @@
+// Headers
+#toplinks {
+    font-weight: 700;
+}
+@media screen and ($max-mobile-viewport) {
+    #logo a {
+	display: block;
+	height: 60px;
+	overflow: hidden;
+	padding-top: 6px;
+    }
+    #logo.has-logo a::before { height: 50px; }
+}
+@media screen and (max-width: $very-small-limit) {
+    #logo {
+	padding-left: 40px;
+    }
+}
+
+// Nav
+#nav-wrapper {
+    div.gru-nav > ul {
+	margin: 0;
+    }
+    div.gru-nav > ul > li {
+	padding-top: 1.125rem;
+	padding-bottom: 1.125rem;
+    }
+    @media screen and ($min-desktop-viewport) {
+	#nav-wrapper {
+	    border-top: .1rem solid #f3f3f5;
+	}
+    }
+}
+
+// Shadow bellow hearders or nav
+@media screen and ($min-desktop-viewport) {
+    #nav-wrapper {
+	border-top: .1rem solid #f3f3f5;
+	box-shadow: .4rem .6rem .9rem rgba(0,0,0,.22);
+    }
+}
+@media screen and ($max-mobile-viewport) {
+    #header-wrapper {
+	box-shadow: .4rem .6rem .9rem rgba(0,0,0,.22);
+    }
+}
+#main-content-wrapper {
+    margin-top: 0.65rem;
+}
+
+// Text cell
+.textcell {
+    h3 {
+	color: black;
+	font-size: $fz-h3;
+	font-weight: 700;
+	margin-block-end: 1.6rem;
+	border-bottom: .2rem solid $parent-color;
+	padding-block-end: 1.4rem;
+    }
+    strong {
+	color: $parent-color;
+    }
+}
+
+// WCS simple demand cell
+.wcs-form-cell {
+    div div {
+	padding: 1rem;
+	a {
+	    text-decoration: none;
+	    &:hover {
+		text-decoration: underline;
+		text-decoration-color: $primary-color;
+	    }
+	}
+    }
+}
+
+// Links
+div#rub_service div.category ul > li > a,
+div.links-list ul > li > a,
+div.menucell ul > li > a,
+div.wcsformcell > li > a,
+div.categoriescell ul > li > a,
+div.wcsformsofcategorycell ul > li > a,
+div.wcscurrentdraftscell ul > li > a,
+div.wcscurrentformscell ul > li > a {
+    &:hover {
+	text-decoration: underline;
+	text-decoration-color: $primary-color;
+    }
+}
+
+// Buttons
+.gru-content button.cancel-button,
+div.buttons .cancel-button button,
+.gru-content button.submit-button,
+div.buttons .submit-button button,
+div.buttons .previous-button button,
+a.pk-button {
+    padding: .27rem .86rem;
+    font-size: $nav-font-size;
+    font-weight: 700;
+    color: $parent-color;
+}
+
+// Footer
+#footer-wrapper {
+    border-top: .6rem solid $primary-color;
+    a {
+	font-weight: 700;
+	text-decoration: none;
+    }
+}
+
+// WCS form
+div#rub_service {
+    background: white;
+    border-radius: 1rem;
+}
+.form-content--title {
+    background: white;
+    border: 1px solid #ccc;
+    border-radius: 1rem;
+    color: black;
+}
+
+// WCS steps
+.form-content--sidebox {
+    background: white;
+    border: 1px solid #ccc;
+    border-radius: 1rem;
+    border-radius: 1rem;
+    box-shadow: .4rem .6rem .9rem rgba(0,0,0,.22);
+    margin-bottom: 0.65rem;
+}
+.wcs-step {
+    font-weight: 700;
+    border-radius: 0;
+    @media screen and ($min-desktop-viewport) {
+	border-left: 3px solid #b2b2b2;
+	border-bottom: none;
+    }
+    &.current {
+	@media screen and ($min-desktop-viewport) {
+	    border-left: 3px solid #e01020;
+	    border-bottom: none;
+	}
+    }
+}
+
+// Additionnals CSS classes to set parent color
+$colors:
+    red $primary-color,
+    peach #E28B76,
+    greenwater #34C4B5,
+    lilablue #7AB1E8,
+    orange #FF732C,
+    green #34CB6A,
+    purple #CE70CC,
+    yellow #C3992A,
+    grey #e8e8e8;
+@each $name, $color in $colors {
+    .parent-color-#{$name} {
+	--parent-color: #{$color};
+    }
+}
--- a/static/crous-bfc/_vars.scss
+++ b/static/crous-bfc/_vars.scss
@ -0,0 +1,82 @@
+@import '../includes/fonts/marianne';
+
+// Crous: 1.6rem == 16px
+// EO: 1rem == 16px
+// eo_rem = crous_rem / 1.6
+// eo_rem = crous_px / 16
+$fz-h2: 1.75rem;
+$fz-h3: 1.75rem;
+$primary-color: #e01020;
+// get color from parent-color-XXX additionnals CSS classe
+$parent-color: var(--parent-color, $primary-color);
+
+// Généralités
+$body-background: #e8e8e8;
+$font-color: black;
+$link-color: black;
+$font-family: Marianne, Arial, sans-serif;
+$width: 1200px;
+$header-background-color: white;
+$header-logo-size: 100px 100px;
+$footer-background: #f3f3f5;
+$footer-color: black;
+$cell-border-radius: 1rem;
+$columns-gutter: 30px;
+$border-radius: 4px;
+
+// Titres
+$title-background: none;
+$title-color: $parent-color;
+$title-font-size: $fz-h2;
+$title-weight: 700;
+
+// Navigation
+$nav-background: white;
+$nav-full-width-background: true;
+$nav-color: black;
+$nav-item-selected-mode: bottom-border;
+$nav-item-selected-border: 2px solid $primary-color;
+$nav-font-size: 1.1rem;
+$nav-submenu-background: #eee;
+$nav-submenu-color: #333;
+
+// Menu mobile
+$nav-mobile-mode: hamburger;
+$responsive-menu: left-to-right;
+$nav-button-background: white;
+$nav-mobile-menu-background: #eee;
+$nav-mobile-menu-item-color: black;
+$nav-mobile-menu-item-hover-background: $nav-mobile-menu-background;
+$nav-mobile-menu-item-hover-color: $nav-mobile-menu-item-color;
+$nav-button-color: black;
+$nav-border-color: black;
+
+// Cellule démarches d'un catégorie
+$cell-image-position: top;
+$cell-image-padding: none;
+
+// Boutons
+$button-background: white;
+$button-color: $primary-color;
+$button-hover-background: $parent-color;
+$button-hover-color: white;
+$button-border: .17rem solid $parent-color;
+$button-border-radius: 2.58rem;
+$button-focus-outline: none;
+
+// Retour en haut
+$back-top-display: block;
+$back-top-icon-character: "\f139";
+$back-top-icon-size: 1rem;
+
+// Formulaires
+$widget-focus-border: 2px solid black;
+$widget-focus-outline: 2px solid black;
+$button-focus-outline-offset: 1px;
+
+// WCS, étapes
+$wcs-step-color: #b2b2b2;
+$wcs-step-border-bottom: 3px solid #b2b2b2;
+$wcs-step-current-color: black;
+$wcs-step-current-border-bottom: 3px solid #e01020;
+$wcs-steps-spacing: 0;
--- a/static/crous-bfc/config.json
+++ b/static/crous-bfc/config.json
@ -0,0 +1,14 @@
+{
+    "label": "Crous BFC",
+    "variables": {
+	"theme_color": "#e01020",
+	"favicon": "crous-bfc/img/favicon.png"
+    },
+    "settings": {
+	"combo": {
+	    "COMBO_ASSET_SLOTS.update": {
+		"header:logo": { "label": "Têtière : logo" }
+	    }
+	}
+    }
+}
--- a/static/crous-bfc/img/favicon.png
+++ b/static/crous-bfc/img/favicon.png
--- a/static/crous-bfc/style.scss
+++ b/static/crous-bfc/style.scss
@ -0,0 +1,5 @@
+@charset "UTF-8";
+
+@import 'vars';
+@import '../includes/publik';
+@import 'custom';
--- a/static/grand-bourg/_wcs.scss
+++ b/static/grand-bourg/_wcs.scss
@ -21,10 +21,9 @@
 }

 .form-content {
-	display: grid;
-	gap: 0 $form-sidebar-gutter;
-
 	@media($min-desktop-viewport) {
+		display: grid;
+		gap: 0 $form-sidebar-gutter;
 		grid-template-columns: $form-sidebar-width 1fr;
 	}

--- a/static/includes/_cells.scss
+++ b/static/includes/_cells.scss
@ -832,3 +832,9 @@ div.gallerycell {
 div.links-list ul > li.latest-page-updates-cell--item a {
 	display: block;
 }
+
+div.notifications-cell li.combo-notification:not(.combo-notification-acked) {
+	&, & > a {
+		font-weight: bolder;
+	}
+}
--- a/static/includes/_forms.scss
+++ b/static/includes/_forms.scss
@ -189,8 +189,10 @@ div.buttons div {
 %button {
 	--color: #{$button-color};
 	--background: #{$button-background};
+	--border-color: #{extract-color($button-border)};
 	--hover-color: #{$button-hover-color};
 	--hover-background: #{$button-hover-background};
+	--hover-border-color: var(--border-color);

 	background: var(--background);
 	text-align: center;
@ -198,6 +200,7 @@ div.buttons div {
 	padding: $button-padding;
 	cursor: pointer;
 	border: $button-border;
+	border-color: var(--border-color);
 	border-radius: $button-border-radius;
 	transition: background 0.5s ease, color 0.5s ease, border 0.5s ease;
 	margin-right: 1.5em;
@ -210,6 +213,7 @@ div.buttons div {
 		box-shadow: 0px 0px 5px #777;
 		background: var(--hover-background);
 		color: var(--hover-color);
+		border-color: var(--hover-border-color);
 	}

 	&:disabled {
@ -232,7 +236,7 @@ div.buttons div {
 	@extend %button;
 	background-color: $button-color;
 	color: $button-background;
-	@if (extract-color($button-border) == transparent) 
+	@if (type-of($button-border) == color and extract-color($button-border) == transparent) 
 		and (lightness($button-color) > 90%) {
 		border: 1px solid $button-background;
 	} @else {
--- a/static/includes/_layout.scss
+++ b/static/includes/_layout.scss
@ -34,6 +34,12 @@ html, body {
 	min-height: 100vh;
 }

+@if variable-exists(primary-color) {
+	html {
+		--primary-color: #{$primary-color};
+	}
+}
+
 div#page {
 	display: flex;
 	min-height: 100vh;
@ -238,11 +244,6 @@ div#main-content {
 }

 body.pk-mini-page {
-	@if variable-exists(primary-color) {
-		--primary-color: #{$primary-color};
-	} @else {
-		--primary-color: #ccc;
-	}
 	margin: 0;
 	padding: 0;
 	background: #F2F2F2;
@ -260,34 +261,4 @@ body.pk-mini-page {
 	.pk-mini-page--content {
 		padding: 1em
 	}
-	.loader {
-		margin: 2em auto;
-		width: 40px;
-		height: 30px;
-		aspect-ratio: 1;
-		--c: linear-gradient(var(--primary-color) 0 0);
-		--r1: radial-gradient(farthest-side at bottom, var(--primary-color) 93%, var(--primary-color));
-		--r2: radial-gradient(farthest-side at top   , var(--primary-color) 93%, var(--primary-color));
-		background: var(--c), var(--r1), var(--r2), var(--c), var(--r1), var(--r2), var(--c), var(--r1), var(--r2);
-		background-repeat: no-repeat;
-		animation: l2 1s infinite alternate;
-	}
-	@keyframes l2 {
-		0%,25% {
-			background-size: 8px 0, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px;
-			background-position: 0 50%, 0 calc(50% - 2px), 0 calc(50% + 2px), 50% 50%, 50% calc(50% - 2px), 50% calc(50% + 2px), 100% 50%, 100% calc(50% - 2px), 100% calc(50% + 2px);
-		}
-		50% {
-			background-size: 8px 100%, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px;
-			background-position: 0 50%, 0 calc(0% - 2px), 0 calc(100% + 2px), 50% 50%, 50% calc(50% - 2px), 50% calc(50% + 2px), 100% 50%, 100% calc(50% - 2px), 100% calc(50% + 2px);
-		}
-		75% {
-			background-size: 8px 100%, 8px 4px, 8px 4px, 8px 100%, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px;
-			background-position: 0 50%, 0 calc(0% - 2px), 0 calc(100% + 2px), 50% 50%, 50% calc(0% - 2px), 50% calc(100% + 2px), 100% 50%, 100% calc(50% - 2px), 100% calc(50% + 2px);
-		}
-		95%,100% {
-			background-size: 8px 100%, 8px 4px,  8px 4px, 8px 100%, 8px 4px, 8px 4px, 8px 100%, 8px 4px, 8px 4px;
-			background-position: 0 50%, 0 calc(0% - 2px), 0 calc(100% + 2px), 50% 50%, 50% calc(0% - 2px), 50% calc(100% + 2px), 100% 50%, 100% calc(0% - 2px), 100% calc(100% + 2px);
-		}
-	}
 }
--- a/static/includes/_misc.scss
+++ b/static/includes/_misc.scss
@ -847,3 +847,35 @@ div.leaflet-bottom, div.leaflet-top {
 .leaflet-attribution-flag {
 	display: none !important;
 }
+
+.loader {
+	--loader-color: var(--primary-color, black);
+	margin: 2em auto;
+	width: 40px;
+	height: 30px;
+	aspect-ratio: 1;
+	--c: linear-gradient(var(--loader-color) 0 0);
+	--r1: radial-gradient(farthest-side at bottom, var(--loader-color) 93%, var(--loader-color));
+	--r2: radial-gradient(farthest-side at top   , var(--loader-color) 93%, var(--loader-color));
+	background: var(--c), var(--r1), var(--r2), var(--c), var(--r1), var(--r2), var(--c), var(--r1), var(--r2);
+	background-repeat: no-repeat;
+	animation: l2 1s infinite alternate;
+}
+@keyframes l2 {
+	0%,25% {
+		background-size: 8px 0, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px;
+		background-position: 0 50%, 0 calc(50% - 2px), 0 calc(50% + 2px), 50% 50%, 50% calc(50% - 2px), 50% calc(50% + 2px), 100% 50%, 100% calc(50% - 2px), 100% calc(50% + 2px);
+	}
+	50% {
+		background-size: 8px 100%, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px;
+		background-position: 0 50%, 0 calc(0% - 2px), 0 calc(100% + 2px), 50% 50%, 50% calc(50% - 2px), 50% calc(50% + 2px), 100% 50%, 100% calc(50% - 2px), 100% calc(50% + 2px);
+	}
+	75% {
+		background-size: 8px 100%, 8px 4px, 8px 4px, 8px 100%, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px;
+		background-position: 0 50%, 0 calc(0% - 2px), 0 calc(100% + 2px), 50% 50%, 50% calc(0% - 2px), 50% calc(100% + 2px), 100% 50%, 100% calc(50% - 2px), 100% calc(50% + 2px);
+	}
+	95%,100% {
+		background-size: 8px 100%, 8px 4px,  8px 4px, 8px 100%, 8px 4px, 8px 4px, 8px 100%, 8px 4px, 8px 4px;
+		background-position: 0 50%, 0 calc(0% - 2px), 0 calc(100% + 2px), 50% 50%, 50% calc(0% - 2px), 50% calc(100% + 2px), 100% 50%, 100% calc(0% - 2px), 100% calc(100% + 2px);
+	}
+}
--- a/static/landes-cd40/config.json
+++ b/static/landes-cd40/config.json
@ -134,6 +134,12 @@
              "url": "{{ passerelle_url }}proxy/transmlph/request/api_publik.php?sub={{ user_nameid }}",
              "cache_duration": 5,
              "log_errors": false
+            },
+            {
+              "key": "aiden",
+              "url": "{{ passerelle_url }}mgdis/aiden/demands/NameID={{ user|user_id_for_service:\"mgdis\" }}",
+              "cache_duration": 5,
+              "log_errors": false
            }
          ]
        }
--- a/static/naoned/_custom.scss
+++ b/static/naoned/_custom.scss
@ -0,0 +1,535 @@
+//
+// Typo
+//
+
+html {
+	@media ($max-mobile-viewport) {
+		font-size: 100% / ( 16 / 15 );
+	}
+}
+
+h1, h2, label {
+	color: black;
+}
+
+h1, .h1 {
+	font-size: $fz-1;
+	font-weight: 600;
+	line-height: 1.2;
+	display: inline-block;
+	color: black;
+	padding: 0.5em 0;
+	border-bottom: 2px solid;
+}
+h2, .h2 {
+	font-size: $fz-2;
+	line-height: 1.2;
+	font-weight: bold;
+}
+h3, .h3 {
+	font-size: $fz-3;
+	line-height: 1.3;
+	font-weight: bold;
+}
+h4, .h4 {
+	font-size: $fz-4;
+	line-height: 1.3;
+	font-weight: 600;
+}
+
+
+//
+//	Buttons
+//
+
+%button {
+	border: 2px solid currentColor;
+	font-weight: 600;
+	&, &:hover {
+		box-shadow: none !important;
+	}
+	&:hover {
+		outline: $button-focus-outline;
+	}
+}
+
+.white-btn {
+	@extend %button;
+	--color: #{$font-color};
+	--background: white;
+	--hover-color: #{$button-color};
+	--hover-background: var(--background);
+	&:not(:hover) {
+		border-color: transparent;
+	}
+}
+
+.black-btn {
+	@extend %button;
+	--color: white;
+	--background: #{$font-color};
+	--hover-color: var(--color);
+	--hover-background: #{$button-color};
+}
+
+%inverted-button {
+	&:hover {
+		background-image: linear-gradient(
+			hsla(0, 0%, 0%, 0.5),
+			hsla(0, 0%, 0%, 0.5)
+		);
+	}
+}
+
+%delete-button {
+	--color: #{$error-color};
+	--hover-color: var(--color);
+	&:hover, &:focus {
+		outline-color: var(--color);
+	}
+}
+
+
+//
+//	HEADER
+//
+
+$naoned-mobile-logo-width: var(--naoned-mobile_logo_width, #{nth($header-logo-size, 1)});
+$naoned-mobile-logo-height: var(--naoned-mobile_logo_height, #{nth($header-logo-size, 2)});
+$naoned-header-vertical-padding: 1em;
+
+.header-width {
+	--edge-gutter: 1em;
+	box-sizing: border-box;
+}
+#top {
+	display: flex;
+	padding: $naoned-header-vertical-padding 0;
+	align-items: center;
+}
+#logo {
+	border: none;
+	padding-top: 0;
+	padding-bottom: 0;
+	font-size: 1.2em;
+	font-weight: normal;
+	line-height: 1;
+	flex-grow: 1;
+
+	@media ($max-mobile-viewport) {
+		&.has-logo a {
+			&::before {
+				width: $naoned-mobile-logo-width;
+				height: $naoned-mobile-logo-height;
+			}
+		}
+	}
+}
+
+// toplinks
+#toplinks {
+	position: static;
+	font-weight: 600;
+	text-align: right;
+	a {
+		margin-right: 0 !important;
+		padding: .33em .66em !important;
+	}
+	.login-link {
+		@extend .black-btn;
+		vertical-align: bottom;
+	}
+	.registration, .logout {
+		@extend .white-btn;
+		vertical-align: bottom;
+	}
+	.account-link {
+		@extend .white-btn;
+		vertical-align: bottom;
+		background-color: transparent;
+		text-align: center;
+		font-weight: 400;
+		.user-icon::before {
+			content: "\f2be"; // user-circle-o
+			display: block;
+			font-family: "fontAwesome", sans-serif;
+			font-size: $fz-3;
+			color: $button-color;
+		}
+	}
+}
+
+.site-title {
+	margin-top: 0;
+	@extend .h4;
+	font-style: italic;
+	color: $lighten-font-color;
+	font-weight: 600;
+	@media ($max-mobile-viewport) {
+		text-align: center;
+	}
+}
+
+// nav
+div.gru-nav {
+	$active-border-height: extract-width($nav-item-selected-border);
+	@media ($min-desktop-viewport) {
+		text-align: center;
+		margin-bottom: -1*$active-border-height;
+
+		.submenu {
+			transform: translateY(-1*$active-border-height);
+			border: 1px solid $nav-active-color;
+
+			&--link {
+				border-bottom: none !important;
+			}
+		}
+	}
+	.menu{
+		margin: 0;
+	}
+	.menu--link {
+		position: relative;
+	}
+
+	li.selected > a,
+	li:focus-within > a,
+	li:hover > a {
+		color: $nav-item-hover-color;
+	}
+
+}
+@media ($max-mobile-viewport) {
+	div.gru-nav {
+		--edge-gutter: 1em;
+		position: fixed;
+		z-index: 2000;
+		top: 0;
+		width: auto;
+		font-size: 1rem;
+		height: $naoned-mobile-logo-height;
+		padding-top: $naoned-header-vertical-padding;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		.gru-nav-button {
+			position: relative;
+			top: unset;
+			left: unset;
+
+			+ ul::before {
+				height: calc( #{$naoned-mobile-logo-height} + #{$naoned-header-vertical-padding} );
+			}
+
+			&.toggled {
+				.icon-bar {
+					background: $font-color;
+				}
+				~ div.gru-nav-mask {
+					opacity: 0.6;
+				}
+			}
+		}
+
+		li > a {
+			border-bottom: none !important;
+		}
+	}
+}
+
+//
+//	MAIN
+//
+
+main {
+	background-color: $body-background;
+	border-top: 1px solid $primary-color;
+}
+
+div#main-content-wrapper {
+	position: static;
+}
+
+// Page title
+.theme-page-header {
+	.cell {
+		text-align: center;
+		@extend .pk-transparent;
+	}
+	h1 {
+		font-weight: 300;
+	}
+}
+
+// sidebar
+#sidebar {
+	@media ($min-desktop-viewport) {
+		padding-right: $columns-gutter / 2;
+		border-right: 1px solid $gray;
+		align-self: baseline;
+	}
+}
+
+//
+//	CELLS
+//
+
+%cell {
+	// --cell-background: #{$cell-background};
+	margin-bottom: 1.4em;
+	overflow: hidden;
+}
+
+.gru-content %cell-links-list {
+	& > li > a {
+		border-radius: 0 !important;
+		flex-wrap: nowrap;
+		border: solid transparent;
+		transition: transform 0.2s;
+		border-width: 0 0.2em 0 0;
+
+		&::before {
+			content: "";
+			display: block;
+			align-items: flex-start;
+			width: .5em;
+			height: .5em;
+			border: solid currentColor;
+			border-width: 0.15em 0.15em 0 0;
+			transform: rotate(45deg);
+			transform-origin: right;
+			margin-right: .66em;
+
+		}
+		&:hover {
+			transform: translateX(.33em);
+			filter: brightness(0.6);
+		}
+	}
+	li div.description {
+		color: $lighten-font-color;
+		p {
+			margin-left: 0;
+			margin-right: 0;
+			margin-bottom: 1rem;
+		}
+	}
+}
+
+div.cell.foldable {
+	> div > h2:first-child:hover {
+		color: $button-color;
+		background-color: white;
+	}
+}
+
+.white-cell {
+	&%cell {
+		background-color: white;
+		.links-list ul {
+			border-top: $cell-entry-border;
+			border-color: $body-background;
+			> li {
+				border-color: $body-background
+			}
+		}
+	}
+}
+
+.gru-content div.list-of-forms {
+	ul > li > a {
+		flex-wrap: wrap;
+	}
+	span.form-number,
+	span.form-status {
+		color: $font-color;
+	}
+	span.form-number {
+		font-size: $font-size-small;
+	}
+}
+
+// Image position (left of cell title)
+.gru-content .cell.has-asset-picture {
+    $image-size: 3rem;
+    > div {
+	    display: flex;
+	    flex-wrap: wrap;
+	    align-items: center;
+	    > * {
+		    flex: 0 0 100%;
+	    }
+	    > h2:first-child {
+		    flex: 1 0 50%;
+		    margin-left: -1 * ($image-size + 1);
+		    padding-left: $image-size + 2;
+	    }
+	    > picture {
+		    display: block;
+		    order: -1;
+		    flex: 0 0 $image-size;
+		    align-self: center;
+		    margin-left: 1rem;
+		    position: relative;
+		    z-index: 1;
+		    img {
+			    height: $image-size;
+			    width: $image-size;
+			    object-fit: contain;
+			    // background-color: white;
+			    border-radius: $cell-border-radius;
+		    }
+	    }
+    }
+}
+
+//
+//	WCS
+//
+
+.form-content {
+	padding-left: 1em;
+	padding-right: 1em;
+}
+
+div#side {
+	align-items: center;
+}
+
+div#tracking-code {
+	text-align: center;
+	.tracking-code-part {
+		background-color: white;
+		border-radius: $cell-border-radius;
+	}
+	h3 {
+		@media ($min-desktop-viewport) {
+			padding-bottom: 0;
+		}
+	}
+	a {
+		@extend %title;
+		color: $link-color;
+
+		&:hover {
+			text-decoration: underline;
+		}
+	}
+}
+
+.wcs-step {
+	&:not(.current) &--marker {
+		border: 1px solid currentColor;
+	}
+}
+
+div#rub_service {
+	form {
+		padding-top: 0;
+		padding-left: 0;
+		padding-right: 0;
+	}
+}
+
+*[readonly] {
+	background-color: transparent;
+}
+
+ul#evolutions li div.msg div.comment {
+	background-color: white;
+}
+ul#evolutions span.time {
+	color: $lighten-font-color;
+}
+ul#evolutions span.user {
+	font-style: italic;
+	opacity: 1;
+}
+ul#evolutions li span.item {
+	background-color: white !important;
+}
+
+
+//
+//	A2
+//
+
+#account-management, #account-management-fc {
+	@extend .white-cell;
+}
+
+
+//
+//	FOOTER
+//
+
+footer {
+	background-color: var(--naoned-footer_background, #{$primary-color});
+	margin-top: 1rem;
+}
+
+.footer-width {
+	// --edge-gutter: 1em;
+}
+
+#footer-wrapper a {
+	font-weight: 600;
+}
+
+#footer {
+	.cell {
+		margin-bottom: 1em;
+		h2:first-child {
+			@extend .h4;
+			color: $footer-color;
+		}
+		.links-list ul {
+			list-style: inside disc;
+			& > li {
+				border: none;
+			}
+			& > li > a {
+				display: unset;
+				padding: 0;
+				&:hover {
+					text-decoration: underline;
+				}
+			}
+		}
+	}
+	.menucell li a {
+		padding-top: 0;
+		padding-bottom: 0;
+		color: $footer-link-color;
+	}
+}
+
+// PWA
+.pwa-navigation {
+	padding-top: 8px;
+	div > ul li a {
+		background-size: auto 25px;
+		background-position: center 7px;
+		padding-top: 40px;
+		font-size: $font-size-xsmall;
+		text-transform: uppercase;
+		line-height: 1.2;
+		background-color: white;
+	}
+	div > ul li {
+		margin: 0 1px;
+		&.selected {
+			&::before {
+				content: "";
+				width: 100%;
+				height: 8px;
+				background-color: $nav-active-color;
+				position: absolute;
+				bottom: 100%;
+				left: 0;
+			}
+		}
+	}
+}
--- a/static/naoned/_vars.scss
+++ b/static/naoned/_vars.scss
@ -0,0 +1,129 @@
+// Colors
+$gray-xlight: #f1f1f1;
+$gray-light: #ccc;
+$gray: #6E6E6E;
+$gray-dark: #444;
+$gray-xdark: #333;
+
+$lighten-font-color: $gray-dark;
+
+// typo
+$base-font: 18;
+
+$font-ratio: 1.16;
+$fz-5: $font-ratio*1em;
+$fz-4: $fz-5*$font-ratio;
+$fz-3: $fz-4*$font-ratio;
+$fz-2: $fz-3*$font-ratio;
+$fz-1: $fz-2*$font-ratio*$font-ratio;
+$fz-small: 1em/$font-ratio;
+$fz-xsmall: $fz-small/$font-ratio;
+
+// Core vars
+$mobile-limit: 64em;
+$very-small-limit: 35em;
+$width: 1280em / $base-font;
+$columns-gutter: 3em;
+$sidebar-columns-gutter: $columns-gutter / 2;
+$edge-gutter: 0em;
+$sidebar-width: 16em;
+$form-sidebar-width: $sidebar-width;
+
+$font-size: 100% / ( 16 / $base-font );
+$font-size-small: $fz-small;
+$font-size-xsmall: $fz-xsmall;
+$font-family: var(--naoned-font, sans-serif), sans-serif;
+
+$primary-color: var(--naoned-primary_color, #117187);
+$font-color: $gray-xdark;
+$body-background: $gray-xlight;
+$link-color: var(--naoned-link_color, #{$primary-color});
+$error-color: #DA0000;
+
+$header-background-color: var(--naoned-header_background_color, transparent);
+$header-logo-size: var(--naoned-logo_width, 100px) var(--naoned-logo_height, 100px);
+$toplinks-style: none;
+
+$nav-after-image: false;
+$responsive-menu: left-to-right;
+$responsive-menu-mask: true;
+$responsive-menu-mask-background: $primary-color;
+$nav-full-width-background: true;
+$nav-active-color: $primary-color;
+$nav-border-color: none;
+$nav-menu-color: $font-color;
+$nav-font-weight: 600;
+$nav-font-size: $font-size-small;
+$nav-text-transform: uppercase;
+$nav-item-selected-mode: bottom-border;
+$nav-item-hover-background: white;
+$nav-item-selected-background: white;
+$nav-item-selected-border: 8px solid $nav-active-color;
+$nav-item-selected-color: $primary-color;
+$nav-menu-side: 40px;
+$nav-mobile-menu-background: white;
+$nav-mobile-menu-item-hover-background: $body-background;
+$nav-button-color: $body-background;
+
+$nav-mobile-bottom-bar-background: $body-background;
+
+$title-background: transparent;
+$title-font-size: $fz-3;
+$title-transform: uppercase;
+
+$cell-background: transparent;
+$cell-border-radius: 5px;
+$cell-border: 2px solid transparent;
+$cell-image-padding: 0.33em;
+$cell-entry-border: 3px solid white;
+$cell-entry-hover-background: transparent;
+$cell-entry-color: $link-color;
+$cell-entry-hover-color: $primary-color;
+$required-authentification-icon: "\f023";
+
+$button-background: white;
+$button-color: var(--naoned-button_color, #{$primary-color});
+$button-hover-background: $button-background;
+$button-hover-color: $button-color;
+$button-border-radius: 5px;
+$buttons-with-icons: true;
+$submit-button-style: '%inverted-button';
+$cancel-button-style: '.white-btn';
+$buttons-order: previous, cancel (grow), submit;
+$button-focus-outline: 2px solid $button-color;
+
+$wcs-steps-spacing: 1em;
+$wcs-step-color: $gray-dark;
+$wcs-step-current-color: $primary-color;
+$wcs-step-border-bottom: none;
+$wcs-step-marker-color: $gray;
+$wcs-step-marker-background: white;
+$wcs-step-current-marker-background: $wcs-step-current-color;
+$wcs-step-current-marker-color: white;
+$wcs-step-marker-type: disc tied;
+$wcs-step-marker-size: 1.9em;
+$wcs-step-marker-tie-color: $gray-light;
+$wcs-step-marker-tie-width: 4px;
+
+$widget-unique-checkbox-position: left;
+$widget-custom-radio-checkbox-color: blue;
+$form-title-style: none;
+$form-sidebar-gutter: $columns-gutter;
+$form-accent-color: $primary-color;
+$timetable-cell-background: white;
+$timetable-cell-hover-color: $button-background;
+$timetable-cell-hover-background: $button-color;
+$widget-background: hsla(0, 0%, 100%, 0.5);
+$widget-focus-background: white;
+$widget-border: 1px solid $gray;
+$widget-focus-outline: 2px solid $primary-color;
+
+$notification-style: border-bar;
+$notification_base_color: $error-color;
+
+$table-wrapper-background: $body-background;
+
+$footer-background: hsla(0, 0%, 0%, 0.5);
+$footer-color: $gray-xlight;
+$footer-link-color: var(--naoned-footer_link_color, white);
+$footer-menucell-separator: 1px solid;
--- a/static/naoned/config.json
+++ b/static/naoned/config.json
@ -0,0 +1,15 @@
+{
+  "label": "Naoned",
+  "variables": {
+    "theme_color": "#CC65FD",
+    "email_header_asset": "emails:logo"
+  },
+  "settings": {
+    "combo": {
+      "COMBO_ASSET_SLOTS.update": {
+        "header:logo": { "label": "Têtière : logo" },
+        "emails:logo": {"label": "Emails : logo"}
+      }
+    }
+  }
+}
--- a/static/naoned/style.scss
+++ b/static/naoned/style.scss
@ -0,0 +1,13 @@
+@charset "UTF-8";
+@import '../includes/fonts/asap';
+@import '../includes/fonts/firasans';
+@import '../includes/fonts/ibm-plex-serif';
+@import '../includes/fonts/inter';
+@import '../includes/fonts/krub';
+@import '../includes/fonts/lato';
+@import '../includes/fonts/montserrat';
+@import '../includes/fonts/source-sans-pro';
+
+@import 'vars';
+@import '../includes/publik';
+@import 'custom';
--- a/static/nice-metropole/_custom.scss
+++ b/static/nice-metropole/_custom.scss
@ -30,8 +30,8 @@
 		&::after {
 			content: "";
 			display: block;
-			height: 3px;
-			width: 100px;
+			height: 2px;
+			width: 50px;
 			background-color: currentColor;
 			margin-top: 1rem;
 		}
@ -59,6 +59,23 @@
 	}
 }

+@supports (mask-size: contain) {
+	a.external-link {
+		&::after {
+			content: "";
+			display: inline-block;
+			width: 0.625em;
+			height: 0.625em;
+			transform: translateY(-0.25em);
+			background-color: currentColor;
+			margin-left: 0.25em;
+			mask-image: url(img/icon-lien-externe.svg);
+			mask-size: contain;
+		}
+	}
+}
+
+
 //
 //	BUTTONS
 //
@ -148,6 +165,52 @@
 	}
 }

+//
+// Detail / summary / for FAQ
+//
+
+details {
+	background-color: $gray-xlight;
+	padding: 1em;
+	padding-left: 3em;
+	border: 1px solid transparent;
+}
+summary {
+	display: block;
+	color: $blue;
+	font-weight: 500;
+	font-size: $fz-3;
+	list-style-position: outside;
+	position: relative;
+
+	&:hover {
+		cursor: pointer;
+	}
+
+	&::before {
+		content: "+";
+		font-size: $fz-2;
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		right: calc(100% + .33em);
+		font-weight: 600;
+		margin: auto;
+		line-height: 1;
+		height: 1em;
+	}
+}
+
+details[open] {
+		border-color: $blue;
+		summary::before {
+			content: "-";
+		}
+}
+
+details + details {
+	margin-top: 0.5em;
+}

 //
 //	LAYOUT
@ -208,10 +271,10 @@ $top-mobile-height : calc( #{nth($header-logo-size, 2)} + 2rem);
 		border: 2px solid transparent;
 		@media ($min-desktop-viewport) {
 			&:not(.account-link) {
-				color: hsla(0, 0%, 100%, 0.85);
+				color: white;
 				background-color: $red;
 				&:hover, &:focus	 {
-					color: white;
+					color: hsla(0, 0%, 100%, 0.85);
 					text-decoration: none;
 				}
 				&:focus-visible {
@ -272,11 +335,11 @@ $top-mobile-height : calc( #{nth($header-logo-size, 2)} + 2rem);
 			&::after {
 				content: "";
 				display: block;
-				height: 3px;
+				height: 2px;
 				width: 25px;
 				background-color: currentColor;
 				margin-top: 1rem;
-				transition: width 400ms;
+				transition: width 200ms;
 			}
 		}
 		&--item {
@ -447,6 +510,13 @@ main {
 		}
 	}
 }
+.cell-small-title {
+	&%cell {
+		h2:first-child {
+			@extend .h3;
+		}
+	}	
+}
 .cell-blue-border {
 	&%cell {
 		border: 1px solid $blue;
@ -455,7 +525,6 @@ main {
 .cell-gray {
 	&%cell {
 		background-color: $gray-xlight;
-		@extend .cell-blue-title;
 	}
 }
 .cell-list {
--- a/static/nice-metropole/img/icon-lien-externe.svg
+++ b/static/nice-metropole/img/icon-lien-externe.svg
@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="10.917" height="10.875" version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <path d="m7.3965-0.0039062c-0.75743 0.083867-0.78129 1.2741-0.024829 1.3844 0.37655 0.014477 0.75641 0.0020737 1.1342 0.0062072l-3.3262 3.3262c-0.45043 0.46838 0.090657 1.3578 0.71057 1.1372 0.38072-0.16491 0.61551-0.53756 0.92252-0.80544l2.6677-2.6677c0.015956 0.41626-0.035051 0.83948 0.031728 1.2506 0.14547 0.5373 0.94137 0.66346 1.2428 0.19339 0.22367-0.35422 0.09588-0.79193 0.12974-1.1876-0.0088-0.69221 0.01814-1.3867-0.01443-2.0774-0.0766-0.43242-0.53662-0.61441-0.93101-0.55988-0.84755-2.734e-5 -1.6955 5.468e-5 -2.5428-4.1e-5zm-6.1152 1.291c-0.74639-0.02059-1.3694 0.70202-1.2812 1.4351 0.0043341 2.3338-0.0086791 4.6682 0.0065255 7.0016 0.055558 0.71023 0.76417 1.2388 1.4593 1.1511 2.2067-0.0056 4.4141 0.01133 6.6203-0.0086 0.90249-0.07114 1.5993-0.95881 1.5017-1.8499-0.0014857-1.3228 0.0029742-2.6457-0.0022346-3.9684-0.010837-0.61323-0.88952-0.84211-1.241-0.37322-0.189 0.26505-0.14125 0.49316-0.14736 0.79603v3.7323c-0.034341 0.38614-0.47654 0.25665-0.74097 0.2793h-6.0656v-6.8047h4.3789c0.50912 0.053954 0.92301-0.71072 0.5293-1.1484-0.33597-0.36911-0.86724-0.20559-1.3066-0.24219-1.237 5.3e-6 -2.4741-1.07e-5 -3.7111 8e-6z"/>
+</svg>
--- a/static/nimes/_custom.scss
+++ b/static/nimes/_custom.scss
@ -1,15 +1,43 @@
 // Header
+#top {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: end;
+	align-items: center;
+}
+
+h1#logo.has-logo {
+	flex-grow: 1;
+}
+
 #toplinks {
+	position: static;
+	padding: 0;
+
 	@media($max-mobile-viewport) {
 		display: none;
 	}
+
+	a {
+		@extend %button;
+		border-color: white;
+		margin: 0.5rem;
+		padding: 0.2rem 0.5rem;
+	}
 }

-#toplinks a {
-	@extend %button;
-	border-color: white;
-	padding: 0.2rem 0.5rem;
-	margin-right: 0.5rem;
+.toplinks {
+	&--list {
+		display: flex;
+		justify-content: center;
+		flex-wrap: wrap;
+	}
+}
+
+.gru-nav-wrapper {
+	position: absolute;
+	top: 0;
+	margin-top: 15px;
 }

 div#nav {
--- a/static/vaucluse-cd84/_custom.scss
+++ b/static/vaucluse-cd84/_custom.scss
@ -0,0 +1,25 @@
+#logo a {
+	height: 100px;
+	line-height: 100px;
+	color: $primary-color;
+	text-transform: uppercase;
+	font-weight: normal;
+}
+
+#nav-wrapper {
+	background: $nav-background;
+	border-top: 1px solid #EAEAEA;
+	border-bottom: 1px solid #EAEAEA;
+	margin-bottom: 10px;
+	div#nav > ul > li > a {
+		border-radius: $border-radius;
+	}
+}
+
+@media screen and ($max-mobile-viewport) {
+	#logo a {
+		display: block;
+		height: 75px;
+		overflow: hidden;
+	}
+}
--- a/static/vaucluse-cd84/_vars.scss
+++ b/static/vaucluse-cd84/_vars.scss
@ -0,0 +1,25 @@
+$primary-color: #0073cb;
+
+$width: 1160px;
+$font-color: #666;
+$font-size: 0.938em;
+$nav-background: #fafafa;
+$nav-submenu-background: #eee;
+$nav-submenu-color: #333;
+$nav-color: $font-color;
+$nav-active-color: $primary-color;
+$nav-item-selected-color: white;
+$nav-item-hover-color: white;
+$border-radius: 4px;
+$widget-focus-border: 1px solid $primary-color;
+$widget-focus-outline: 2px solid $primary-color;
+$widget-unique-checkbox-position: left;
+$button-background: $primary-color;
+$button-focus-outline-offset: 1px;
+$buttons-order: cancel (grow), previous, submit;
+$title-background: $primary-color;
+$title-color: white;
+$nav-mobile-mode: bottom-bar;
+
+$cell-image-position: top;
+$cell-image-padding: none;
--- a/static/vaucluse-cd84/config.json
+++ b/static/vaucluse-cd84/config.json
@ -0,0 +1,14 @@
+{
+  "label": "Vaucluse (CD84)",
+  "variables": {
+    "theme_color": "#0073cb"
+  },
+  "settings": {
+    "combo": {
+      "COMBO_ASSET_SLOTS.update": {
+        "header:background": { "label": "Têtière : fond" },
+        "header:logo": { "label": "Têtière : logo" }
+      }
+    }
+  }
+}
--- a/static/vaucluse-cd84/style.scss
+++ b/static/vaucluse-cd84/style.scss
@ -0,0 +1,5 @@
+@charset "UTF-8";
+
+@import 'vars';
+@import '../includes/publik';
+@import 'custom';
--- a/templates/variants/landes-cd40/combo/json/department-demands.html
+++ b/templates/variants/landes-cd40/combo/json/department-demands.html
@ -2,12 +2,12 @@
  <h2 class="cell--title">{{ title }}</h2>
 {% endif %}

-{% if json.err and extranet.err and transmlph.err %}
+{% if json.err and extranet.err and transmlph.err and aiden.err %}
  <div class="cell--body">
    <p class="empty-message">Informations indisponibles.</p>
  </div>
 {% else %}
-  {% with json.data|add:extranet.data|add:transmlph.data as data %}
+  {% with json.data|add:extranet.data|add:transmlph.data|add:aiden.data as data %}
    {% if data %}
      <div class="links-list current-forms list-of-forms">
        <ul>
--- a/templates/variants/naoned/includes/user-info-user-name.html
+++ b/templates/variants/naoned/includes/user-info-user-name.html
@ -0,0 +1,7 @@
+<span class="user-icon" aria-hidden="true"></span>
+<span class="connected-user--first-name">
+  {{ user.first_name }}
+</span>
+<span class="connected-user--last-name">
+  {{ user.last_name|slice:"1" }}.
+</span>
--- a/templates/variants/naoned/theme.html
+++ b/templates/variants/naoned/theme.html
@ -0,0 +1,38 @@
+{% extends "theme.html" %}
+{% load assets static %}
+
+{% block extra_css %}
+  {% if theme_customization %}
+    <style>
+      html {
+        {% for varName, varValue in theme_customization.items %}
+          --naoned-{{ varName }}: {{varValue}};
+        {% endfor %}
+      }
+    </style>
+  {% endif %}
+{% endblock %}
+
+{% block header-bottom %}
+  <p class="site-title">
+    {% firstof global_title site_title "Compte Citoyen" %}
+  </p>
+{% endblock %}
+
+
+{% block content-pre %}
+  {% if custom_page_title != "None" %}
+    {% firstof custom_page_title page.title title as page_title %}
+    {% if page_title %}
+      <header class="theme-page-header gru-content">
+        <div class="cell">
+          <div class="cell--body">
+            <h1 class="theme-page-title">
+              {{ page_title }}
+            </h1>
+          </div>
+        </div>
+      </header>
+    {% endif %}
+  {% endif %}
+{% endblock %}
Author	SHA1	Message	Date
Nicolas Roche	7f9a6e183f	crous-bfc: add initial theme (#89720 ) gitea/publik-base-theme/pipeline/head This commit looks good Details	2024-04-18 17:09:37 +02:00
Thomas Jund	845776da3d	naoned: new theme (#88161 ) gitea/publik-base-theme/pipeline/head This commit looks good Details	2024-04-18 17:01:44 +02:00
Thomas Jund	38f2c4ab38	css: introduce --border-color css var for %button (#89724 ) gitea/publik-base-theme/pipeline/head This commit looks good Details	2024-04-18 12:22:00 +02:00
Corentin Sechet	f7bf983a36	nimes: fix toplinks hiding logo in low resolutions (#77680 ) gitea/publik-base-theme/pipeline/head This commit looks good Details	2024-04-16 13:48:27 +02:00
Paul Marillonnet	50cf847ddb	vaucluse-cd84: start minimalistic v1 theme (#89154 ) gitea/publik-base-theme/pipeline/head This commit looks good Details As a shameless clapotis-les-canards ripoff; just changing the main color and adding a couple of minor tweaks (buttons order, checkbox alignment).	2024-04-16 12:13:29 +02:00
Thomas Jund	3ca54baf36	nice-metropole: add cell-small-title class for cell (#89452 ) gitea/publik-base-theme/pipeline/head This commit looks good Details	2024-04-16 10:19:45 +02:00
Thomas Jund	1e4af827d6	nice-metropole: add details summary for FAQ (#89436 )	2024-04-16 10:19:45 +02:00
Thomas Jund	c4d57d9afd	nice-metropole: remove blue title on gray cell (#89425 )	2024-04-16 10:19:45 +02:00
Thomas Jund	61f0f9e377	nice-metropole: change item underline size and transition duration (#89422 )	2024-04-16 10:19:45 +02:00
Thomas Jund	1ae09fa2bd	nice-metropole: add external-link class (#89420 )	2024-04-16 10:19:45 +02:00
Thomas Jund	e3148035bf	nice-metropole: invert toplinks :hover and default colors (#89418 )	2024-04-16 10:19:45 +02:00
Thomas Jund	c98bcb3734	nice-metropole: change h1 underline size (#89423 )	2024-04-16 10:19:45 +02:00
Corentin Sechet	672a4556f2	grand-bourg: fix form textareas width in mobile (#88450 ) gitea/publik-base-theme/pipeline/head This commit looks good Details	2024-04-16 10:01:58 +02:00
Thomas Jund	803e1aa884	scss: check if $button-color is a color in %inverted-button (#89370 ) gitea/publik-base-theme/pipeline/head This commit looks good Details	2024-04-15 15:04:15 +02:00
Lauréline Guérin	41ad6b323b	css: style for acked notifications in notifications cell (#78314 ) gitea/publik-base-theme/pipeline/head This commit looks good Details	2024-04-13 12:11:24 +02:00
serghei	932bfe3a6a	landes-cd40: add data from MGDIS Aiden connector (#89268 ) gitea/publik-base-theme/pipeline/head This commit looks good Details	2024-04-12 09:53:46 +02:00
Frédéric Péters	9912b1795e	scss: make .loader class available in all pages (#89221 ) gitea/publik-base-theme/pipeline/head This commit looks good Details	2024-04-12 07:15:28 +02:00