From fb06c192600fe99db0c7ee2d413090c2d45ac5ce Mon Sep 17 00:00:00 2001
From: Marvin Matuschek <mmatuschek@databay.de>
Date: Mon, 2 Feb 2026 13:29:32 +0100
Subject: [PATCH] fix styling of mail page component

---
 .gitignore                     |  1 +
 templates/default/mail.css     | 34 +++++++++++++++++----------
 templates/default/mail.css.map |  1 -
 templates/default/mail.scss    | 43 ++++++++++++++++++++--------------
 4 files changed, 47 insertions(+), 32 deletions(-)
 delete mode 100644 templates/default/mail.css.map

diff --git a/.gitignore b/.gitignore
index 733cee9c9d6d..8725a143f4bc 100755
--- a/.gitignore
+++ b/.gitignore
@@ -12,6 +12,7 @@
 /components/ILIAS/PHPUnit/config/cfg.phpunit.php
 /nbproject
 /templates/default/delos.css.map
+/templates/default/mail.css.map
 
 # General Patterns
 *.bak
diff --git a/templates/default/mail.css b/templates/default/mail.css
index e0d087ed06d2..24e0de25a7de 100644
--- a/templates/default/mail.css
+++ b/templates/default/mail.css
@@ -1,3 +1,9 @@
+@charset "UTF-8";
+/*
+ATTENTION!
+This file belongs to the new ‘UI/Layout/Page/Mail’ component.
+This will be used to generate emails starting with ILIAS 12 and currently does NOT affect the styling of emails.
+*/
 .table {
   background-color: #f0f0f0;
   width: 100%;
@@ -13,7 +19,7 @@
 }
 
 .image-data {
-  width: 90px;
+  width: 60px;
 }
 
 td.spacing {
@@ -41,33 +47,32 @@ td.spacing {
 }
 
 .content .spacing {
-  padding: 80px 0;
+  padding: 60px 0;
 }
 
 .content td td {
   background-color: white;
 }
 
-.text-color {
-  color: #4c6586;
-}
-
 .footer .font-definition {
   color: #161616;
 }
 
 .font-definition {
   font-family: "Open Sans", Arial, Helvetica, sans-serif;
-  font-size: 16px;
-  line-height: 22px;
   padding: 30px;
 }
+.font-definitionp {
+  line-height: 22px;
+  font-size: 16px;
+}
 
 body {
   height: 100% !important;
   margin: 0;
   padding: 0;
   width: 100% !important;
+  color: #161616;
   mso-margin-top-alt: 0px;
   mso-margin-bottom-alt: 0px;
   mso-padding-alt: 0px 0px 0px 0px;
@@ -81,11 +86,11 @@ body {
   margin-right: auto;
 }
 
-.w-750 {
-  width: 750px;
+.w-mail {
+  width: 80%;
 }
 
-.link-color {
+a {
   color: #4c6586;
 }
 
@@ -114,8 +119,11 @@ body, table, td, th, p, a, li {
 }
 
 @media only screen and (max-width: 760px) {
-  .w-750 {
-    width: 100%;
+  .w-mail {
+    width: 90%;
+  }
+  .content .spacing {
+    padding: 40px 0;
   }
 }
 
diff --git a/templates/default/mail.css.map b/templates/default/mail.css.map
deleted file mode 100644
index 121e093d822d..000000000000
--- a/templates/default/mail.css.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["mail.scss","010-settings/_settings_color-palette.scss","010-settings/_settings_header.scss"],"names":[],"mappings":"AAKA;EACE,kBC4BkB;ED3BlB;;;AAGF;EACE,kBCiBW;EDhBX;;;AAGF;EACE,kBCYW;;;ADTb;EACE;;;AAGF;EACE;;;AAEF;EACE,OEvB4B;EFwB5B,QEzB6B;EF0B7B;EACA;EACA;EACA;;;AAGF;EACE;;AACA;EACE;EACA,OCCY;EDAZ;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE,kBCvBW;;;AD0Bb;EACE,OChDc;;;ADmDhB;EACE,OCnBc;;;ADsBhB;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE,OCrFc;;;ADyFhB;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAIF;EACE;EACA;;;AAIF;EACE;IACE","file":"mail.css"}
\ No newline at end of file
diff --git a/templates/default/mail.scss b/templates/default/mail.scss
index a1b75cfc2d50..3e005c1c14b3 100644
--- a/templates/default/mail.scss
+++ b/templates/default/mail.scss
@@ -1,4 +1,10 @@
-@use "010-settings/"as *;
+/*
+ATTENTION!
+This file belongs to the new ‘UI/Layout/Page/Mail’ component.
+This will be used to generate emails starting with ILIAS 12 and currently does NOT affect the styling of emails.
+*/
+
+@use "010-settings/" as *;
 
 $il-mail-page-logo-width: $il-standard-page-logo-width !default;
 $il-mail-page-logo-height: $il-standard-page-logo-height !default;
@@ -18,7 +24,7 @@ $il-mail-page-logo-height: $il-standard-page-logo-height !default;
 }
 
 .image-data {
-  width: 90px;
+  width: calc($il-mail-page-logo-width + 15px);
 }
 
 td.spacing {
@@ -45,26 +51,25 @@ td.spacing {
 }
 
 .content .spacing {
-  padding: 80px 0;
+  padding: 60px 0;
 }
 
 .content td td {
   background-color: $il-main-bg;
 }
 
-.text-color {
-  color: $il-main-color;
-}
-
 .footer .font-definition {
   color:   $il-text-color;
 }
 
 .font-definition {
   font-family:'Open Sans', Arial, Helvetica, sans-serif;
-  font-size:16px;
-  line-height:22px;
   padding:30px;
+
+  &p {
+    line-height:22px;
+    font-size:16px;
+  }
 }
 
 body {
@@ -72,6 +77,7 @@ body {
   margin: 0;
   padding: 0;
   width: 100% !important;
+  color: $il-text-color;
   mso-margin-top-alt: 0px;
   mso-margin-bottom-alt: 0px;
   mso-padding-alt: 0px 0px 0px 0px;
@@ -85,15 +91,14 @@ body {
   margin-right: auto;
 }
 
-.w-750 {
-  width: 750px;
+.w-mail {
+  width: 80%;
 }
 
-.link-color {
+a {
   color: $il-link-color;
 }
 
-
 table {
   mso-table-lspace: 0pt;
   mso-table-rspace: 0pt;
@@ -113,15 +118,17 @@ img {
   -ms-interpolation-mode: bicubic;
 }
 
-
 body, table, td, th, p, a, li {
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
 }
 
-
 @media only screen and (max-width: 760px) {
-  .w-750 {
-    width: 100%;
+  .w-mail {
+    width: 90%;
   }
-}
\ No newline at end of file
+
+  .content .spacing {
+    padding: 40px 0;
+  }
+}