improves profile editing display

README.md

@@ -1,30 +1,45 @@
 # Mystic Forest
 
-Thème pour le portail SSOWat
-
+Thème pour le portail SSOWat.
 
 ## Description
 
-Un thème personnalisé pour le portail SSOWat qui tire grand profit des propriétés CSS Flex. La répartition des éléments est modifiée de la manière suivante :
+Ce thème est basé sur le thème par défaut et tire profit de CSS Flex pour personnaliser l'interface.
 
-  1. Page d'identification : le logo est collé au formulaire. Avec une image sur mesure et quelques couleurs modifiée, cela rend plutôt bien.
-  2. Page du portail : la boîte utilisateur reprend la structure de la boîte d'identification. La liste des applications est placée en vis-à-vis de la boite utilisateur.
+  1. Page d'identification : utilise un bloc visuel pour l'identification, avec une image personnalisée en entête.
+  2. Page du portail : la boîte utilisateur est semblable au bloc d'identification. La liste des applications est placée en vis-à-vis de la boite utilisateur.
 
-## Personnaliser l'image
+L'image est un simple collage à partir des créations de Gabsond, disponibles ici : https://opengameart.org/content/190-pixel-art-assets-sci-fi-forest
+
+Un grand merci à Gabsond ! 
+
+## Personnaliser le thème
 
 Les sources contiennent une base pour le logo. Pour mon usage personnel, j'ai ajouté le nom de mon instance (cf captures d'écran).  
-Il ne devrait pas être trop difficile d'utiliser une image complètement différente. 
+L'utilisation de variables devraient faciliter l'utilisation d'une image différente. *Normalement,* il devrait être possible d'avoir l'affichage désiré en modifiant seulement la valeur des variables.
+Ceci **n'a pas été testé**, n'hésitez pas à proposer les modifications nécessaires si ce n'est pas le cas.
 
-**Voici quelques notes si vous souhaitez vous y essayer.**
+### Explication des variables
+
+```text
+    --background-color: couleur d'arrière-plan du document
+    --primary-color: couleur utilisée pour le fond des blocs et les boutons avec la classe .classic
+    --primary-hover-color: couleur de survol pour les boutons concernés
+    --logo-url: chemin vers l'image utilisée comme entête (defaut: url("./forest.png"))
+    --logo-width: largeur de l'image
+    --logo-height: hauteur de l'image
+    --box-width: largeur des boîtes (defaut: 21em)
+```
+
+### Notes sur l'image
 
 Nous avons conservé la taille originale de la boîte d'authentification, soit *21em ou 336px*. Ainsi, l'image utilisée en entête doit avoir une base de 336px pour conserver l'effet de bloc.  
 L'image peut être plus large, comme c'est le cas ici par exemple, mais il faut alors faire attention à bien centrer les 336 pixels de la dernière ligne qui seront collés aux autres éléments d'interface.  
-
-Une fois l'image modifiée, il faut adapter les dimensions de la boîte.
-  1. Renseigner la taille exacte `{ width: ...px, height: ...px }` pour la page d'identification et c'est bon.
-  2. Pour la boîte "utilisateur", c'est un peu plus complexe.
-      a. Changer l'url de l'image de fond et renseigner la hauteur de l'image dans l'attribut `padding-top` au lieu de `height`. Il faut également adapter la largeur de manière classique (`width`)
-      b. Il faut également modifier l'attribut `margin-left` des éléments de la boîte utilisateur. La valeur de celui-ci correspond à la distance entre le bord gauche de l'image de fond et le début de la ligne de base de 336px. Pour peu qu'elle soit bien centrée, ce qui est de toute façon nécessaire, c'est simplement 
-      ```(largeur de l'image - 336) / 2```
+De plus, il sera nécessaire d'adapter la couleur du bloc (--primary-color).  
 
 Le conteneur flex de l'image est paramétré pour ne pas rétrécir (flex-shrink: 0), afin de ne pas casser l'interface quand l'écran est trop petit.
+
+## License
+
+CC0 pour le fichier 'mystical_forest/forest.png'  
+GNU Affero Public Licence v3.0 pour le reste des sources.  

mystic_forest/custom_portal.css

@@ -1,21 +1,53 @@
 /*
 ===============================================================================
- This file contain extra CSS rules to customize the YunoHost user portal and
- can be used to customize app tiles, buttons, etc...
+    Mystic Forest (based on Default theme)  -  version 0.1
 ===============================================================================
 */
 
+/* Defines theme variables */
+:root {
+    --background-color: #141709;
+    --primary-color: #525c2e;
+    --primary-hover-color: #708a00;
+    --logo-url: url("./forest.png");
+    --logo-width: 412px;
+    --logo-height: 175px;
+    --box-width: 21em;
+}
+
+/*
+    Global styling
+*/
+
 .ynh-user-portal {
-	background: #141709;
 	display: flex;
 	flex-flow: column nowrap;
 	justify-content: center;
 	align-items: center;
+	background: var(--background-color);
 }
 
-.content { 
-	padding: 0%;
-	width: 21em;
+.classic-btn { 
+    background: var(--primary-color); 
+}
+.classic-btn:hover { 
+    background: var(--primary-hover-color); 
+}
+
+.messages { 
+    margin: 0; 
+}
+.messages.info { 
+    background: var(--primary-color);
+}
+
+
+/* 
+    Styling specific to portal view 
+*/
+
+.logged .messages {
+    flex: 1 1 100%;
 }
 
 .logged .content {
@@ -26,67 +58,75 @@
 }
 
 .user {
-	background: url("./forest.png");
-	background-repeat: no-repeat;
-	padding-top: 175px;
-	width: 412px;
-	flex: 0 1 auto;
 	display: flex;
 	flex-flow: column-reverse nowrap;
+	flex: 0 1 auto;
+	background: var(--logo-url) no-repeat;
+	width: var(--logo-width);
+	padding-top: var(--logo-height);
 	margin: 2%;
 	margin-left: 4%;
 }
 
-.user-menu, .user-container {
-	background-color: #525c2e;
-	max-width: 21em;
-	margin-left: 38px;
+.user-menu, 
+.user-container {
+	background-color: var(--primary-color);
+	max-width: var(--box-width);
+	margin-left: calc(
+        (var(--logo-width) - var(--box-width)) 
+        / 2
+    );
 }
 
-.apps {
-	width: 50%;
+.apps, 
+.edit, 
+.password {
+	flex: 1 1 auto;
+	width: 50%; /* Hack to force footer to wrap on another row */
+	margin: 4%;
+}
+
+.footer { 
     flex: 1 1 auto; 
     margin: 4%; 
 }
 
-.footer { flex: 1 1 auto; margin: 4%; }
+/* 
+    Styling specific to the login view 
+*/
+
+.content { 
+	width: var(--box-width);
+	padding: 0;
+}
 
-/* Select only non-logged in view */
 :not(.logged) > .ynh-logo{
-    background-image: url("./forest.png");
-    width: 412px;
-    height: 175px;
-    opacity: 1;
     flex: 0 0 auto;
+    background-image: var(--logo-url);
+    width: var(--logo-width);
+    height: var(--logo-height);
+    opacity: 1;
     margin-top: 0;
 }
 
-.ynh-wrapper.login { margin: 0; width: 100%;}
+.ynh-wrapper.login { 
+    width: 100%;
+    margin: 0; 
+}
 
 .login-form .form-group { 
-	margin:0; 
-	border: 0.4em solid #525c2e;
+	border: 0.4em solid var(--primary-color);
 	border-top: none;
+	margin: 0; 
 }
-.login-form .btn { margin-top: 0.4em; }
 
-.classic-btn { background: #525c2e; }
-.classic-btn:hover { background: #708a00; }
-
-.messages { margin: 0 auto; width: 100%; }
-.messages.info { background: #525c2e;}
+.login-form .btn { 
+    margin-top: 0.4em; 
+}
 
 /* 
-.login-form {
-    max-width: 21em;
-    margin: 0;
-    display: flex;
-    flex-flow: column wrap;
-    align-items: stretch;
-}
-.login-form label::before { background: #f0f1f5; }
-
-.content { padding: 1em; }
+   End of custom theme
+   Tiles colors are copied from default theme 
 */
 
 .bluebg {