From 4a29767a31e69dfe7a4f856a031816dda9bcaca3 Mon Sep 17 00:00:00 2001
From: FreddleSpl0it <75116288+FreddleSpl0it@users.noreply.github.com>
Date: Thu, 15 Oct 2026 15:23:29 +0200
Subject: [PATCH] [Web] Add role color marker and icons to login pages

---
 data/web/css/build/014-mailcow.css        | 23 +++++++++++++++++++++++
 data/web/css/themes/servercow/theme.css   |  7 +++----
 data/web/templates/admin_index.twig       |  4 ++--
 data/web/templates/domainadmin_index.twig |  4 ++--
 data/web/templates/user_index.twig        |  2 +-
 5 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/data/web/css/build/014-mailcow.css b/data/web/css/build/014-mailcow.css
index 52c087a34..52a34f8b5 100644
--- a/data/web/css/build/014-mailcow.css
+++ b/data/web/css/build/014-mailcow.css
@@ -62,6 +62,9 @@
   --mc-dtr-color: #fff;
   --mc-dtr-hover-bg: #5e5e5e;
   --mc-dtr-active-bg: #979797;
+  --mc-login-user: #28b62c;
+  --mc-login-domainadmin: #ffc107;
+  --mc-login-admin: #ff4136;
 }
 
 body {
@@ -439,6 +442,26 @@ button[aria-expanded='true'] > .caret {
     text-decoration: none;
 }
 
+/* role marker on login pages, header icons differ too (color blindness) */
+.login-card::before {
+  content: "";
+  display: block;
+  height: 5px;
+  background: var(--mc-login-color);
+  border-radius: inherit;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.login-user {
+  --mc-login-color: var(--mc-login-user);
+}
+.login-domainadmin {
+  --mc-login-color: var(--mc-login-domainadmin);
+}
+.login-admin {
+  --mc-login-color: var(--mc-login-admin);
+}
+
 .hr-title {
   display: flex;
   align-items: center;
diff --git a/data/web/css/themes/servercow/theme.css b/data/web/css/themes/servercow/theme.css
index 9d01a5326..14bcecd1a 100644
--- a/data/web/css/themes/servercow/theme.css
+++ b/data/web/css/themes/servercow/theme.css
@@ -116,6 +116,9 @@
   --mc-dtr-color: var(--sc-brown);
   --mc-dtr-hover-bg: var(--sc-brown-tint);
   --mc-dtr-active-bg: var(--sc-brown-soft);
+  --mc-login-user: var(--sc-green);
+  --mc-login-domainadmin: #f5c400;
+  --mc-login-admin: var(--sc-danger);
 }
 
 /* base */
@@ -571,10 +574,6 @@ table.dataTable.table-hover > tbody > tr:hover > * {
   background-color: var(--sc-warning) !important;
 }
 
-/* login pages (no navbar), green line on top */
-body:not(:has(> .navbar)) {
-  border-top: 5px solid var(--sc-green);
-}
 
 /* footer */
 .footer, .footer a {
diff --git a/data/web/templates/admin_index.twig b/data/web/templates/admin_index.twig
index 44b3564cc..0507786cb 100644
--- a/data/web/templates/admin_index.twig
+++ b/data/web/templates/admin_index.twig
@@ -6,9 +6,9 @@
 <div class="row mb-4" style="margin-top: 60px">
   <div class="col-12 col-md-7 col-lg-6 col-xl-5 ms-auto me-auto">
 
-    <div class="card">
+    <div class="card login-card login-admin">
       <div class="card-header d-flex align-items-center text-break">
-        <i class="bi bi-person-fill me-2"></i> {{ lang.login.login_admin }}
+        <i class="bi bi-shield-lock-fill me-2"></i> {{ lang.login.login_admin }}
         <div class="ms-auto form-check form-switch my-auto d-flex align-items-center">
           <label class="form-check-label"><i class="bi bi-moon-fill"></i></label>
           <input class="form-check-input ms-2" type="checkbox" id="dark-mode-toggle">
diff --git a/data/web/templates/domainadmin_index.twig b/data/web/templates/domainadmin_index.twig
index af667756a..b0d70c949 100644
--- a/data/web/templates/domainadmin_index.twig
+++ b/data/web/templates/domainadmin_index.twig
@@ -6,9 +6,9 @@
 <div class="row mb-4" style="margin-top: 60px">
   <div class="col-12 col-md-7 col-lg-6 col-xl-5 ms-auto me-auto">
 
-    <div class="card">
+    <div class="card login-card login-domainadmin">
       <div class="card-header d-flex align-items-center text-break">
-        <i class="bi bi-person-fill me-2"></i> {{ lang.login.login_dadmin }}
+        <i class="bi bi-globe2 me-2"></i> {{ lang.login.login_dadmin }}
         <div class="ms-auto form-check form-switch my-auto d-flex align-items-center">
           <label class="form-check-label"><i class="bi bi-moon-fill"></i></label>
           <input class="form-check-input ms-2" type="checkbox" id="dark-mode-toggle">
diff --git a/data/web/templates/user_index.twig b/data/web/templates/user_index.twig
index a06cdb3f6..9354a81c0 100644
--- a/data/web/templates/user_index.twig
+++ b/data/web/templates/user_index.twig
@@ -6,7 +6,7 @@
 <div class="row mb-4" style="margin-top: 60px">
   <div class="col-12 col-md-7 col-lg-6 col-xl-5 ms-auto me-auto">
 
-    <div class="card">
+    <div class="card login-card login-user">
       <div class="card-header d-flex align-items-center text-break">
         <i class="bi bi-person-fill me-2"></i> {{ lang.login.login_user }}
         <div class="ms-auto form-check form-switch my-auto d-flex align-items-center">