[Web] move domain-wide-footer vars info to lang files

Signed-off-by: milkmaker <milkmaker@mailcow.de>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.github/workflows/image_builds.yml

@@ -28,7 +28,7 @@ jobs:
           - "watchdog-mailcow"
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Setup Docker
         run: |
           curl -sSL https://get.docker.com/ | CHANNEL=stable sudo sh

.github/workflows/pr_to_nightly.yml

@@ -8,7 +8,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
       - name: Run the Action

.github/workflows/rebuild_backup_image.yml

@@ -11,24 +11,25 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v2
+        uses: docker/setup-qemu-action@v3
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
+        uses: docker/setup-buildx-action@v3
 
       - name: Login to Docker Hub
-        uses: docker/login-action@v2
+        uses: docker/login-action@v3
         with:
           username: ${{ secrets.BACKUPIMAGEBUILD_ACTION_DOCKERHUB_USERNAME }}
           password: ${{ secrets.BACKUPIMAGEBUILD_ACTION_DOCKERHUB_TOKEN }}
 
       - name: Build and push
-        uses: docker/build-push-action@v4
+        uses: docker/build-push-action@v5
         with:
           context: .
+          platforms: linux/amd64,linux/arm64
           file: data/Dockerfiles/backup/Dockerfile
           push: true
           tags: mailcow/backup:latest

.github/workflows/update_postscreen_access_list.yml

@@ -15,7 +15,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
     - name: Checkout
-      uses: actions/checkout@v3
+      uses: actions/checkout@v4
 
     - name: Generate postscreen_access.cidr
       run: |

data/conf/rspamd/lua/rspamd.local.lua

@@ -522,3 +522,146 @@ rspamd_config:register_symbol({
     end
   end
 })
+
+rspamd_config:register_symbol({
+  name = 'MOO_FOOTER',
+  type = 'prefilter',
+  callback = function(task)
+    local lua_mime = require "lua_mime"
+    local lua_util = require "lua_util"
+    local rspamd_logger = require "rspamd_logger"
+    local rspamd_redis = require "rspamd_redis"
+    local ucl = require "ucl"
+    local redis_params = rspamd_parse_redis_server('footer')
+    local envfrom = task:get_from(1)
+    local uname = task:get_user()
+    if not envfrom or not uname then
+      return false
+    end
+    local uname = uname:lower()
+    local env_from_domain = envfrom[1].domain:lower() -- get smtp from domain in lower case
+
+    local function newline(task)
+      local t = task:get_newlines_type()
+    
+      if t == 'cr' then
+        return '\r'
+      elseif t == 'lf' then
+        return '\n'
+      end
+    
+      return '\r\n'
+    end
+    local function redis_cb_footer(err, data)
+      if err or type(data) ~= 'string' then
+        rspamd_logger.infox(rspamd_config, "domain wide footer request for user %s returned invalid or empty data (\"%s\") or error (\"%s\")", uname, data, err)
+      else
+        -- parse json string
+        local parser = ucl.parser()
+        local res,err = parser:parse_string(data)
+        if not res then
+          rspamd_logger.infox(rspamd_config, "parsing domain wide footer for user %s returned invalid or empty data (\"%s\") or error (\"%s\")", uname, data, err)
+        else
+          local footer = parser:get_object()
+
+          if footer and type(footer) == "table" and (footer.html or footer.plain) then
+            rspamd_logger.infox(rspamd_config, "found domain wide footer for user %s: html=%s, plain=%s", uname, footer.html, footer.plain)
+
+            local envfrom_mime = task:get_from(2)
+            local from_name = ""
+            if envfrom_mime and envfrom_mime[1].name then
+              from_name = envfrom_mime[1].name
+            elseif envfrom and envfrom[1].name then
+              from_name = envfrom[1].name
+            end
+
+            local replacements = {
+              auth_user = uname,
+              from_user = envfrom[1].user,
+              from_name = from_name,
+              from_addr = envfrom[1].addr,
+              from_domain = envfrom[1].domain:lower()
+            }
+            if footer.html then
+              footer.html = lua_util.jinja_template(footer.html, replacements, true)
+            end
+            if footer.plain then
+              footer.plain = lua_util.jinja_template(footer.plain, replacements, true)
+            end
+  
+            -- add footer
+            local out = {}
+            local rewrite = lua_mime.add_text_footer(task, footer.html, footer.plain) or {}
+        
+            local seen_cte
+            local newline_s = newline(task)
+        
+            local function rewrite_ct_cb(name, hdr)
+              if rewrite.need_rewrite_ct then
+                if name:lower() == 'content-type' then
+                  local nct = string.format('%s: %s/%s; charset=utf-8',
+                      'Content-Type', rewrite.new_ct.type, rewrite.new_ct.subtype)
+                  out[#out + 1] = nct
+                  return
+                elseif name:lower() == 'content-transfer-encoding' then
+                  out[#out + 1] = string.format('%s: %s',
+                      'Content-Transfer-Encoding', 'quoted-printable')
+                  seen_cte = true
+                  return
+                end
+              end
+              out[#out + 1] = hdr.raw:gsub('\r?\n?$', '')
+            end
+        
+            task:headers_foreach(rewrite_ct_cb, {full = true})
+        
+            if not seen_cte and rewrite.need_rewrite_ct then
+              out[#out + 1] = string.format('%s: %s', 'Content-Transfer-Encoding', 'quoted-printable')
+            end
+        
+            -- End of headers
+            out[#out + 1] = newline_s
+        
+            if rewrite.out then
+              for _,o in ipairs(rewrite.out) do
+                out[#out + 1] = o
+              end
+            else
+              out[#out + 1] = task:get_rawbody()
+            end
+            local out_parts = {}
+            for _,o in ipairs(out) do
+               if type(o) ~= 'table' then
+                 out_parts[#out_parts + 1] = o
+                 out_parts[#out_parts + 1] = newline_s
+               else
+                 out_parts[#out_parts + 1] = o[1]
+                 if o[2] then
+                   out_parts[#out_parts + 1] = newline_s
+                 end
+               end
+            end
+            task:set_message(out_parts)
+          else
+            rspamd_logger.infox(rspamd_config, "domain wide footer request for user %s returned invalid or empty data (\"%s\")", uname, data)
+          end
+        end
+      end
+    end
+
+    local redis_ret_footer = rspamd_redis_make_request(task,
+      redis_params, -- connect params
+      env_from_domain, -- hash key
+      false, -- is write
+      redis_cb_footer, --callback
+      'HGET', -- command
+      {"DOMAIN_WIDE_FOOTER", env_from_domain} -- arguments
+    )
+    if not redis_ret_footer then
+      rspamd_logger.infox(rspamd_config, "cannot make request to load footer for domain")
+    end
+
+    return true
+  end,
+  priority = 1
+})

data/web/admin.php

@@ -108,6 +108,7 @@ $template_data = [
   'rsettings' => $rsettings,
   'rspamd_regex_maps' => $rspamd_regex_maps,
   'logo_specs' => customize('get', 'main_logo_specs'),
+  'logo_dark_specs' => customize('get', 'main_logo_dark_specs'),
   'ip_check' => customize('get', 'ip_check'),
   'password_complexity' => password_complexity('get'),
   'show_rspamd_global_filters' => @$_SESSION['show_rspamd_global_filters'],

data/web/css/build/013-datatables.css

@@ -42,11 +42,6 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th.dtr-control:before,
 table.dataTable td.dt-control:before {
     background-color: #979797 !important;
 }
-table.dataTable.dtr-inline.collapsed>tbody>tr>td.child, 
-table.dataTable.dtr-inline.collapsed>tbody>tr>th.child, 
-table.dataTable.dtr-inline.collapsed>tbody>tr>td.dataTables_empty {
-    background-color: #fbfbfb;
-}
 table.dataTable.table-striped>tbody>tr>td {
     vertical-align: middle;
 }

data/web/css/build/014-mailcow.css

@@ -357,6 +357,7 @@ button[aria-expanded='true'] > .caret {
 }
 
 .progress {
+  height: 16px;
   background-color: #d5d5d5;
 }
 
@@ -370,3 +371,22 @@ button[aria-expanded='true'] > .caret {
 .btn-check:checked+.btn-outline-secondary, .btn-check:active+.btn-outline-secondary, .btn-outline-secondary:active, .btn-outline-secondary.active, .btn-outline-secondary.dropdown-toggle.show {
     background-color: #f0f0f0 !important;
 }
+.btn-check:checked+.btn-light, .btn-check:active+.btn-light, .btn-light:active, .btn-light.active, .show>.btn-light.dropdown-toggle {    
+    color: #fff;
+    background-color: #555;
+    background-image: none;
+    border-color: #4d4d4d;
+}
+.btn-check:checked+.btn-light:focus, .btn-check:active+.btn-light:focus, .btn-light:active:focus, .btn-light.active:focus, .show>.btn-light.dropdown-toggle:focus,
+.btn-check:focus+.btn-light, .btn-light:focus {
+    box-shadow: none;
+}
+.btn-group>.btn:not(:last-of-type) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+.badge.bg-info > a,
+.badge.bg-danger > a {
+    color: #fff !important;
+    text-decoration: none;
+}

data/web/css/build/015-responsive.css

@@ -38,7 +38,7 @@
 
 
 @media (max-width: 767px) {
-  .responsive-tabs .tab-pane {
+  .responsive-tabs .tab-pane:not(.rsettings) {
       display: block !important;
       opacity: 1;
   }
@@ -206,6 +206,19 @@
   .senders-mw220 {
     max-width: 100% !important;
   }
+  
+  table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before,
+  table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before,
+  table.dataTable td.dt-control:before {
+      height: 2rem;
+      width: 2rem;
+      line-height: 2rem;
+      margin-top: -15px;
+  }
+  
+  li .dtr-data {
+      padding: 0;
+  }
 }
 
 @media (max-width: 350px) {

data/web/css/themes/mailcow-darkmode.css

@@ -1,90 +1,128 @@
 body {
-    background-color: #414141;
+    background-color: #1c1c1e;
-    color: #e0e0e0;
+    color: #f2f2f7;
 }
 
 .card {
-    border: 1px solid #1c1c1c;
+    border: 1px solid #2c2c2e;
-    background-color: #3a3a3a;
+    background-color: #2c2c2e;
 }
+
 legend {
-    color: #f5f5f5;
+    color: #f2f2f7;
 }
+
 .card-header {
-    color: #bbb;
+    color: #8e8e93;
-    background-color: #2c2c2c;
+    background-color: #1c1c1e;
     border-color: transparent;
 }
+
+.card-body {
+    --bs-card-color: #bbb;
+}
+
 .btn-secondary, .paginate_button, .page-link, .btn-light {
-    color: #fff !important;
+    color: #f2f2f7 !important;
-    background-color: #7a7a7a !important;
+    background-color: #5e5e5e !important;
-    border-color: #5c5c5c !important;
+    border-color: #4c4c4e !important;
 }
+
 .btn-dark {
-  color: #000 !important;;
+    color: #f2f2f7 !important;
-  background-color: #f6f6f6 !important;;
+    background-color: #242424 !important;
-  border-color: #ddd !important;;
+    border-color: #1c1c1e !important;
-}
-.btn-check:checked+.btn-secondary, .btn-check:active+.btn-secondary, .btn-secondary:active, .btn-secondary.active, .show>.btn-secondary.dropdown-toggle {
-    border-color: #7a7a7a !important;
-}
-.alert-secondary {
-    color: #fff !important;
-    background-color: #7a7a7a !important;
-    border-color: #5c5c5c !important;
-}
-.bg-secondary {
-    color: #fff !important;
-    background-color: #7a7a7a !important;
-}
-.alert-secondary, .alert-secondary a, .alert-secondary .alert-link {
-    color: #fff;
-}
-.page-item.active .page-link {
-    background-color: #158cba !important;
-    border-color: #127ba3 !important;
 }
+
 .btn-secondary:focus, .btn-secondary:hover, .btn-group.open .dropdown-toggle.btn-secondary {
-    background-color: #7a7a7a;
+    background-color: #444444;
-    border-color: #5c5c5c !important;
+    border-color: #4c4c4e !important;
-    color: #fff;
+    color: #f2f2f7;
 }
+
+.btn-check:checked+.btn-secondary, .btn-check:active+.btn-secondary, .btn-secondary:active, .btn-secondary.active, .show>.btn-secondary.dropdown-toggle {
+    border-color: #5e5e5e !important;
+}
+
+.alert-secondary {
+    color: #f2f2f7 !important;
+    background-color: #5e5e5e !important;
+    border-color: #4c4c4e !important;
+}
+
+.bg-secondary {
+    color: #f2f2f7 !important;
+    background-color: #5e5e5e !important;
+}
+
+.alert-secondary, .alert-secondary a, .alert-secondary .alert-link {
+    color: #f2f2f7;
+}
+
+.page-item.active .page-link {
+    background-color: #3e3e3e !important;
+    border-color: #3e3e3e !important;
+}
+
+.btn-secondary:focus, .btn-secondary:hover, .btn-group.open .dropdown-toggle.btn-secondary {
+    background-color: #5e5e5e;
+    border-color: #4c4c4e !important;
+    color: #f2f2f7;
+}
+
 .btn-secondary:disabled, .btn-secondary.disabled {
-    border-color: #7a7a7a !important;
+    border-color: #5e5e5e !important;
 }
+
 .modal-content {
-    background-color: #414141;
+    --bs-modal-color: #bbb;
+    background-color: #2c2c2e;
 }
+
 .modal-header {
-    border-bottom: 1px solid #161616;
+    border-bottom: 1px solid #999;
 }
+
 .modal-title {
-    color: white;
+    color: #bbb;
 }
+
 .modal .btn-close {
     filter: invert(1) grayscale(100%) brightness(200%);
 }
+
 .navbar.bg-light {
-    background-color: #222222 !important;
+    background-color: #1c1c1e !important;
-    border-color: #181818;
+    border-color: #2c2c2e;
 }
+
 .nav-link {
-    color: #ccc !important;
+    color: #8e8e93 !important;
 }
+
 .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
     background: none;
 }
+
+.nav-tabs, .nav-tabs .nav-link {
+    border-color: #444444 !important;
+}
+
 .nav-tabs .nav-link:not(.disabled):hover, .nav-tabs .nav-link:not(.disabled):focus, .nav-tabs .nav-link.active {
-    border-bottom-color: #414141;
+    border-bottom-color: #1c1c1e !important;
+}
+
+.card .nav-tabs .nav-link:not(.disabled):hover, .card .nav-tabs .nav-link:not(.disabled):focus, .card .nav-tabs .nav-link.active {
+    border-bottom-color: #2c2c2e !important;
 }
 
 .table, .table-striped>tbody>tr:nth-of-type(odd)>*, tbody tr {
-    color: #ccc !important;
+    color: #f2f2f7 !important;
 }
 
 .dropdown-menu {
-    background-color: #585858;
+    background-color: #424242;
-    border: 1px solid #333;
+    border: 1px solid #282828;
 }
 .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
     color: #fafafa;
@@ -97,7 +135,7 @@ legend {
     color: #d4d4d4 !important;
 }
 tbody tr {
-    color: #555;
+    color: #ccc;
 }
 .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
     color: #ccc;
@@ -106,18 +144,15 @@ tbody tr {
     color: #ccc;
 }
 .list-group-item {
-    background-color: #333;
+    background-color: #282828;
     border: 1px solid #555;
 }
 .table-striped>tbody>tr:nth-of-type(odd) {
-    background-color: #333;
+    background-color: #424242;
 }
 table.dataTable>tbody>tr.child ul.dtr-details>li {
     border-bottom: 1px solid rgba(255, 255, 255, 0.13);
 }
-tbody tr {
-    color: #ccc;
-}
 .label.label-last-login {
     color: #ccc !important;
     background-color: #555 !important;
@@ -133,20 +168,20 @@ div.numberedtextarea-number {
 }
 .well {
     border: 1px solid #555;
-    background-color: #333;
+    background-color: #282828;
 }
 pre {
     color: #ccc;
-    background-color: #333;
+    background-color: #282828;
     border: 1px solid #555;
 }
 input.form-control, textarea.form-control {
     color: #e2e2e2 !important;
-    background-color: #555 !important;
+    background-color: #424242 !important;
     border: 1px solid #999;
 }
 input.form-control:focus, textarea.form-control {
-    background-color: #555 !important;
+    background-color: #424242 !important;
 }
 input.form-control:disabled, textarea.form-disabled {
     color: #a8a8a8 !important;
@@ -154,16 +189,14 @@ input.form-control:disabled, textarea.form-disabled {
 }
 .input-group-addon {
     color: #ccc;
-    background-color: #555 !important;
+    background-color: #424242 !important;
     border: 1px solid #999;
 }
 .input-group-text {
     color: #ccc;
-    background-color: #242424;
+    background-color: #1c1c1c;
 }
 
-
-
 .list-group-item {
     color: #ccc;
 }
@@ -175,11 +208,11 @@ input.form-control:disabled, textarea.form-disabled {
 }
 .dropdown-item.active:hover {
     color: #fff !important;
-    background-color: #31b1e4;
+    background-color: #007aff;
 }
 .form-select {
     color: #e2e2e2!important;
-    background-color: #555!important;
+    background-color: #424242!important;
     border: 1px solid #999;
 }
 
@@ -191,31 +224,6 @@ input.form-control:disabled, textarea.form-disabled {
     color: #fff !important;
 }
 
-
-.table-secondary {
-    --bs-table-bg: #7a7a7a;
-    --bs-table-striped-bg: #e4e4e4;
-    --bs-table-striped-color: #000;
-    --bs-table-active-bg: #d8d8d8;
-    --bs-table-active-color: #000;
-    --bs-table-hover-bg: #dedede;
-    --bs-table-hover-color: #000;
-    color: #000;
-    border-color: #d8d8d8;
-}
-
-.table-light {
-    --bs-table-bg: #f6f6f6;
-    --bs-table-striped-bg: #eaeaea;
-    --bs-table-striped-color: #000;
-    --bs-table-active-bg: #dddddd;
-    --bs-table-active-color: #000;
-    --bs-table-hover-bg: #e4e4e4;
-    --bs-table-hover-color: #000;
-    color: #000;
-    border-color: #dddddd;
-}
-
 .form-control-plaintext {
     color: #e0e0e0;
 }
@@ -289,12 +297,12 @@ a:hover {
 }
 
 .tag-box {
-    background-color: #555;
+    background-color: #282828;
-    border: 1px solid #999;
+    border: 1px solid #555;
 }
 .tag-input {
     color: #fff;
-    background-color: #555;
+    background-color: #282828;
 }
 .tag-add {
     color: #ccc;
@@ -303,43 +311,24 @@ a:hover {
     color: #d1d1d1;
 }
 
-
-table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before:hover,
-table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before:hover {
-  background-color: #7a7a7a !important;
-}
-table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before,
-table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before {
-  background-color: #7a7a7a !important;
-  border: 1.5px solid #5c5c5c !important;
-  color: #fff !important;
-}
-table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td.dtr-control:before,
-table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th.dtr-control:before {
-  background-color: #949494;
-}
-table.dataTable.dtr-inline.collapsed>tbody>tr>td.child,
-table.dataTable.dtr-inline.collapsed>tbody>tr>th.child,
-table.dataTable.dtr-inline.collapsed>tbody>tr>td.dataTables_empty {
-  background-color: #444444;
-}
-
 .btn-check-label {
   color: #fff;
 }
 .btn-outline-secondary:hover {
-    background-color: #c3c3c3;
+    background-color: #5c5c5c;
 }
 .btn.btn-outline-secondary {
-  color: #fff !important;
+  color: #e0e0e0 !important;
   border-color: #7a7a7a !important;
 }
 .btn-check:checked+.btn-outline-secondary, .btn-check:active+.btn-outline-secondary, .btn-outline-secondary:active, .btn-outline-secondary.active, .btn-outline-secondary.dropdown-toggle.show {
-    background-color: #9b9b9b !important;
+    background-color: #7a7a7a !important;
+}
+.btn-check:checked+.btn-light, .btn-check:active+.btn-light, .btn-light:active, .btn-light.active, .show>.btn-light.dropdown-toggle {
+    color: #f2f2f7 !important;
+    background-color: #242424 !important;
+    border-color: #1c1c1e !important;
 }
-
-
-
 .btn-input-missing,
 .btn-input-missing:hover,
 .btn-input-missing:active,
@@ -347,27 +336,119 @@ table.dataTable.dtr-inline.collapsed>tbody>tr>td.dataTables_empty {
 .btn-input-missing:active:hover,
 .btn-input-missing:active:focus {
   color: #fff !important;
-  background-color: #ff2f24 !important;
+  background-color: #ff3b30 !important;
-  border-color: #e21207 !important;
+  border-color: #ff3b30 !important;
 }
 
 .inputMissingAttr {
-    border-color: #FF4136 !important;
+    border-color: #ff4136 !important;
 }
 
-
 .list-group-details {
-    background: #444444;
+    background: #555;
 }
 .list-group-header {
-    background: #333;
+    background: #444;
 }
 
 span.mail-address-item {
-    background-color: #333;
+    background-color: #444;
     border-radius: 4px;
     border: 1px solid #555;
     padding: 2px 7px;
     display: inline-block;
     margin: 2px 6px 2px 0;
 }
+
+table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before:hover,
+table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before:hover {
+  background-color: #7a7a7a !important;
+}
+
+table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before,
+table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before {
+  background-color: #7a7a7a !important;
+  border: 1.5px solid #5c5c5c !important;
+  color: #e0e0e0 !important;
+}
+
+table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td.dtr-control:before,
+table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th.dtr-control:before {
+  background-color: #949494;
+}
+
+table.dataTable.dtr-inline.collapsed>tbody>tr>td.child,
+table.dataTable.dtr-inline.collapsed>tbody>tr>th.child,
+table.dataTable.dtr-inline.collapsed>tbody>tr>td.dataTables_empty {
+  background-color: #414141;
+}
+
+table.table, .table-striped>tbody>tr:nth-of-type(odd)>*, tbody tr {
+    color: #ccc !important;
+}
+
+.table-secondary {
+    --bs-table-bg: #282828;
+    --bs-table-striped-bg: #343434;
+    --bs-table-striped-color: #f2f2f7;
+    --bs-table-active-bg: #4c4c4c;
+    --bs-table-active-color: #f2f2f7;
+    --bs-table-hover-bg: #3a3a3a;
+    --bs-table-hover-color: #f2f2f7;
+    color: #ccc;
+    border-color: #3a3a3a;
+}
+
+.table-light {
+    --bs-table-bg: #3a3a3a;
+    --bs-table-striped-bg: #444444;
+    --bs-table-striped-color: #f2f2f7;
+    --bs-table-active-bg: #5c5c5c;
+    --bs-table-active-color: #f2f2f7;
+    --bs-table-hover-bg: #4c4c4c;
+    --bs-table-hover-color: #f2f2f7;
+    color: #ccc;
+    border-color: #4c4c4c;
+}
+
+.table-bordered {
+    border-color: #3a3a3a;
+}
+
+.table-bordered th,
+.table-bordered td {
+    border-color: #3a3a3a !important;
+}
+
+.table-bordered thead th,
+.table-bordered thead td {
+    border-bottom-width: 2px;
+}
+
+.table-striped>tbody>tr:nth-of-type(odd)>td,
+.table-striped>tbody>tr:nth-of-type(odd)>th {
+    background-color: #282828;
+}
+
+.table-hover>tbody>tr:hover {
+    background-color: #343434;
+}
+
+.table>:not(caption)>*>* {
+    border-color: #5c5c5c;
+    --bs-table-color-state:#bbb;
+    --bs-table-bg: #3a3a3a;
+}
+.text-muted {
+    --bs-secondary-color: #8e8e93;
+}
+input::placeholder {
+    color: #8e8e93 !important;
+}
+
+.form-select {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238e8e93' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
+}
+.btn-light, .btn-light:hover {
+    background-image: none;
+}

data/web/edit.php

@@ -47,6 +47,7 @@ if (isset($_SESSION['mailcow_cc_role'])) {
           $quota_notification_bcc = quota_notification_bcc('get', $domain);
           $rl = ratelimit('get', 'domain', $domain);
           $rlyhosts = relayhost('get');
+          $domain_footer = mailbox('get', 'domain_wide_footer', $domain);
           $template = 'edit/domain.twig';
           $template_data = [
             'acl' => $_SESSION['acl'],
@@ -56,23 +57,26 @@ if (isset($_SESSION['mailcow_cc_role'])) {
             'rlyhosts' => $rlyhosts,
             'dkim' => dkim('details', $domain),
             'domain_details' => $result,
+            'domain_footer' => $domain_footer,
           ];
       }
     }
-    elseif (isset($_GET["template"])){
+    elseif (isset($_GET['template'])){
-      $domain_template = mailbox('get', 'domain_templates', $_GET["template"]);
+      $domain_template = mailbox('get', 'domain_templates', $_GET['template']);
       if ($domain_template){
         $template_data = [
-          'template' => $domain_template
+          'template' => $domain_template,
+          'rl' => ['frame' => $domain_template['attributes']['rl_frame']],
         ];
         $template = 'edit/domain-templates.twig';
         $result = true;
       }
       else {
-        $mailbox_template = mailbox('get', 'mailbox_templates', $_GET["template"]);
+        $mailbox_template = mailbox('get', 'mailbox_templates', $_GET['template']);
         if ($mailbox_template){
           $template_data = [
-            'template' => $mailbox_template
+            'template' => $mailbox_template,
+            'rl' => ['frame' => $mailbox_template['attributes']['rl_frame']],
           ];
           $template = 'edit/mailbox-templates.twig';
           $result = true;

data/web/inc/functions.customize.inc.php

@@ -24,9 +24,10 @@ function customize($_action, $_item, $_data = null) {
       }
       switch ($_item) {
         case 'main_logo':
-          if (in_array($_data['main_logo']['type'], array('image/gif', 'image/jpeg', 'image/pjpeg', 'image/x-png', 'image/png', 'image/svg+xml'))) {
+        case 'main_logo_dark':
+          if (in_array($_data[$_item]['type'], array('image/gif', 'image/jpeg', 'image/pjpeg', 'image/x-png', 'image/png', 'image/svg+xml'))) {
             try {
-              if (file_exists($_data['main_logo']['tmp_name']) !== true) {
+              if (file_exists($_data[$_item]['tmp_name']) !== true) {
                 $_SESSION['return'][] = array(
                   'type' => 'danger',
                   'log' => array(__FUNCTION__, $_action, $_item, $_data),
@@ -34,7 +35,7 @@ function customize($_action, $_item, $_data = null) {
                 );
                 return false;
               }
-              $image = new Imagick($_data['main_logo']['tmp_name']);
+              $image = new Imagick($_data[$_item]['tmp_name']);
               if ($image->valid() !== true) {
                 $_SESSION['return'][] = array(
                   'type' => 'danger',
@@ -63,7 +64,7 @@ function customize($_action, $_item, $_data = null) {
             return false;
           }
           try {
-            $redis->Set('MAIN_LOGO', 'data:' . $_data['main_logo']['type'] . ';base64,' . base64_encode(file_get_contents($_data['main_logo']['tmp_name'])));
+            $redis->Set(strtoupper($_item), 'data:' . $_data[$_item]['type'] . ';base64,' . base64_encode(file_get_contents($_data[$_item]['tmp_name'])));
           }
           catch (RedisException $e) {
             $_SESSION['return'][] = array(
@@ -201,8 +202,9 @@ function customize($_action, $_item, $_data = null) {
       }
       switch ($_item) {
         case 'main_logo':
+        case 'main_logo_dark':
           try {
-            if ($redis->del('MAIN_LOGO')) {
+            if ($redis->del(strtoupper($_item))) {
               $_SESSION['return'][] = array(
                 'type' => 'success',
                 'log' => array(__FUNCTION__, $_action, $_item, $_data),
@@ -239,8 +241,9 @@ function customize($_action, $_item, $_data = null) {
           return ($app_links) ? $app_links : false;
         break;
         case 'main_logo':
+        case 'main_logo_dark':
           try {
-            return $redis->get('MAIN_LOGO');
+            return $redis->get(strtoupper($_item));
           }
           catch (RedisException $e) {
             $_SESSION['return'][] = array(
@@ -277,9 +280,14 @@ function customize($_action, $_item, $_data = null) {
           }
         break;
         case 'main_logo_specs':
+        case 'main_logo_dark_specs':
           try {
             $image = new Imagick();
+            if($_item == 'main_logo_specs') {
               $img_data = explode('base64,', customize('get', 'main_logo'));
+            } else {
+              $img_data = explode('base64,', customize('get', 'main_logo_dark'));
+            }
             if ($img_data[1]) {
               $image->readImageBlob(base64_decode($img_data[1]));
               return $image->identifyImage();

data/web/inc/functions.mailbox.inc.php

@@ -3320,6 +3320,45 @@ function mailbox($_action, $_type, $_data = null, $_extra = null) {
             );
           }
         break;
+        case 'domain_wide_footer':
+          $domain = idn_to_ascii(strtolower(trim($_data['domain'])), 0, INTL_IDNA_VARIANT_UTS46);
+          if (!is_valid_domain_name($domain)) {
+            $_SESSION['return'][] = array(
+              'type' => 'danger',
+              'log' => array(__FUNCTION__, $_action, $_type, $_data_log, $_attr),
+              'msg' => 'domain_invalid'
+            );
+            return false;
+          }
+          if (!hasDomainAccess($_SESSION['mailcow_cc_username'], $_SESSION['mailcow_cc_role'], $domain)) {
+            $_SESSION['return'][] = array(
+              'type' => 'danger',
+              'log' => array(__FUNCTION__, $_action, $_type, $_data_log, $_attr),
+              'msg' => 'access_denied'
+            );
+            return false;
+          }
+
+          $footers = array();
+          $footers['html'] = isset($_data['footer_html']) ? $_data['footer_html'] : '';
+          $footers['plain'] = isset($_data['footer_plain']) ? $_data['footer_plain'] : '';
+          try {
+            $redis->hSet('DOMAIN_WIDE_FOOTER', $domain, json_encode($footers));
+          }
+          catch (RedisException $e) {
+            $_SESSION['return'][] = array(
+              'type' => 'danger',
+              'log' => array(__FUNCTION__, $_action, $_type, $_data_log, $_attr),
+              'msg' => array('redis_error', $e)
+            );
+            return false;
+          }
+          $_SESSION['return'][] = array(
+            'type' => 'success',
+            'log' => array(__FUNCTION__, $_action, $_type, $_data_log, $_attr),
+            'msg' => array('domain_footer_modified', htmlspecialchars($domain))
+          );
+        break;
       }
     break;
     case 'get':
@@ -4432,6 +4471,40 @@ function mailbox($_action, $_type, $_data = null, $_extra = null) {
           }
           return $resourcedata;
         break;
+        case 'domain_wide_footer':
+          $domain = idn_to_ascii(strtolower(trim($_data)), 0, INTL_IDNA_VARIANT_UTS46);
+          if (!is_valid_domain_name($domain)) {
+            $_SESSION['return'][] = array(
+              'type' => 'danger',
+              'log' => array(__FUNCTION__, $_action, $_type, $_data_log, $_attr),
+              'msg' => 'domain_invalid'
+            );
+            return false;
+          }
+          if (!hasDomainAccess($_SESSION['mailcow_cc_username'], $_SESSION['mailcow_cc_role'], $_data)) {
+            $_SESSION['return'][] = array(
+              'type' => 'danger',
+              'log' => array(__FUNCTION__, $_action, $_type, $_data_log, $_attr),
+              'msg' => 'access_denied'
+            );
+            return false;
+          }
+
+          try {
+            $footers = $redis->hGet('DOMAIN_WIDE_FOOTER', $domain);
+            $footers = json_decode($footers, true);
+          }
+          catch (RedisException $e) {
+            $_SESSION['return'][] = array(
+              'type' => 'danger',
+              'log' => array(__FUNCTION__, $_action, $_type, $_data_log, $_attr),
+              'msg' => array('redis_error', $e)
+            );
+            return false;
+          }
+
+          return $footers;
+        break;
       }
     break;
     case 'delete':

data/web/inc/header.inc.php

@@ -40,6 +40,7 @@ $globalVariables = [
   'ui_texts' => $UI_TEXTS,
   'css_path' => '/cache/'.basename($CSSPath),
   'logo' => customize('get', 'main_logo'),
+  'logo_dark' => customize('get', 'main_logo_dark'),
   'available_languages' => $AVAILABLE_LANGUAGES,
   'lang' => $lang,
   'skip_sogo' => (getenv('SKIP_SOGO') == 'y'),

data/web/inc/triggers.inc.php

@@ -120,10 +120,14 @@ if (isset($_SESSION['mailcow_cc_role']) && $_SESSION['mailcow_cc_role'] == "admi
 	if (isset($_POST["submit_main_logo"])) {
     if ($_FILES['main_logo']['error'] == 0) {
       customize('add', 'main_logo', $_FILES);
+    }
+    if ($_FILES['main_logo_dark']['error'] == 0) {
+      customize('add', 'main_logo_dark', $_FILES);
     }
 	}
 	if (isset($_POST["reset_main_logo"])) {
     customize('delete', 'main_logo');
+    customize('delete', 'main_logo_dark');
 	}
   // Some actions will not be available via API
 	if (isset($_POST["license_validate_now"])) {

data/web/js/build/004-datatables.js

@@ -15801,7 +15801,7 @@ DataTable.ext.renderer.pageButton.bootstrap = function ( settings, host, idx, bu
 		paginationEl.empty();
 	}
 	else {
-		paginationEl = hostEl.html('<ul/>').children('ul').addClass('pagination');
+		paginationEl = hostEl.html('<ul/>').children('ul').addClass('pagination pagination-sm');
 	}
 
 	attach(

data/web/js/build/013-mailcow.js

@@ -121,11 +121,22 @@ $(document).ready(function() {
         if (lastTab) {
           $('[data-bs-target="#' + lastTab + '"]').click();
           var tab = $('[id^="' + lastTab + '"]');
-          $(tab).find('.card-body.collapse').collapse('show');
+          $(tab).find('.card-body.collapse:first').collapse('show');
         }
       });
   })();
   
+  // responsive tabs, scroll to opened tab
+  $(document).on("shown.bs.collapse shown.bs.tab", function (e) {
+	  var target = $(e.target);
+	  if($(window).width() <= 767) {
+		  var offset = target.offset().top - 60;
+		  $("html, body").stop().animate({
+		    scrollTop: offset
+		  }, 100);
+	  }
+  });
+
   // IE fix to hide scrollbars when table body is empty
   $('tbody').filter(function (index) {
     return $(this).children().length < 1;
@@ -314,19 +325,28 @@ $(document).ready(function() {
   $('#dark-mode-toggle').click(toggleDarkMode);
   if ($('#dark-mode-theme').length) {
     $('#dark-mode-toggle').prop('checked', true);
+    $('.main-logo').addClass('d-none');
+    $('.main-logo-dark').removeClass('d-none');
     if ($('#rspamd_logo').length) $('#rspamd_logo').attr('src', '/img/rspamd_logo_light.png');
     if ($('#rspamd_logo_sm').length) $('#rspamd_logo_sm').attr('src', '/img/rspamd_logo_light.png');
+  } else {
+    $('.main-logo').removeClass('d-none');
+    $('.main-logo-dark').addClass('d-none');
   }
   function toggleDarkMode(){
     if($('#dark-mode-theme').length){
       $('#dark-mode-theme').remove();
       $('#dark-mode-toggle').prop('checked', false);
+      $('.main-logo').removeClass('d-none');
+      $('.main-logo-dark').addClass('d-none');
       if ($('#rspamd_logo').length) $('#rspamd_logo').attr('src', '/img/rspamd_logo_dark.png');
       if ($('#rspamd_logo_sm').length) $('#rspamd_logo_sm').attr('src', '/img/rspamd_logo_dark.png');
       localStorage.setItem('theme', 'light');
     }else{
       $('head').append('<link id="dark-mode-theme" rel="stylesheet" type="text/css" href="/css/themes/mailcow-darkmode.css">');
       $('#dark-mode-toggle').prop('checked', true);
+      $('.main-logo').addClass('d-none');
+      $('.main-logo-dark').removeClass('d-none');
       if ($('#rspamd_logo').length) $('#rspamd_logo').attr('src', '/img/rspamd_logo_light.png');
       if ($('#rspamd_logo_sm').length) $('#rspamd_logo_sm').attr('src', '/img/rspamd_logo_light.png');
       localStorage.setItem('theme', 'dark');

data/web/js/site/admin.js

@@ -510,14 +510,14 @@ jQuery(function($){
     if (table == 'relayhoststable') {
       $.each(data, function (i, item) {
         item.action = '<div class="btn-group">' +
-          '<a href="#" data-bs-toggle="modal" data-bs-target="#testTransportModal" data-transport-id="' + encodeURI(item.id) + '" data-transport-type="sender-dependent" class="btn btn-xs btn-xs-third btn-secondary"><i class="bi bi-caret-right-fill"></i> Test</a>' +
+          '<a href="#" data-bs-toggle="modal" data-bs-target="#testTransportModal" data-transport-id="' + encodeURI(item.id) + '" data-transport-type="sender-dependent" class="btn btn-xs btn-xs-lg btn-xs-third btn-secondary"><i class="bi bi-caret-right-fill"></i> Test</a>' +
-          '<a href="/edit/relayhost/' + encodeURI(item.id) + '" class="btn btn-xs btn-xs-third btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+          '<a href="/edit/relayhost/' + encodeURI(item.id) + '" class="btn btn-xs btn-xs-lg btn-xs-third btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
-          '<a href="#" data-action="delete_selected" data-id="single-rlyhost" data-api-url="delete/relayhost" data-item="' + encodeURI(item.id) + '" class="btn btn-xs btn-xs-third btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
+          '<a href="#" data-action="delete_selected" data-id="single-rlyhost" data-api-url="delete/relayhost" data-item="' + encodeURI(item.id) + '" class="btn btn-xs btn-xs-lg btn-xs-third btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
           '</div>';
         if (item.used_by_mailboxes == '') { item.in_use_by = item.used_by_domains; }
         else if (item.used_by_domains == '') { item.in_use_by = item.used_by_mailboxes; }
         else { item.in_use_by = item.used_by_mailboxes + '<hr style="margin:5px 0px 5px 0px;">' + item.used_by_domains; }
-        item.chkbox = '<input type="checkbox" data-id="rlyhosts" name="multi_select" value="' + item.id + '" />';
+        item.chkbox = '<input type="checkbox" class="form-check-input" data-id="rlyhosts" name="multi_select" value="' + item.id + '" />';
       });
     } else if (table == 'transportstable') {
       $.each(data, function (i, item) {
@@ -528,49 +528,49 @@ jQuery(function($){
           item.username = '<i style="color:#' + intToRGB(hashCode(item.nexthop)) + ';" class="bi bi-square-fill"></i> ' + item.username;
         }
         item.action = '<div class="btn-group">' +
-          '<a href="#" data-bs-toggle="modal" data-bs-target="#testTransportModal" data-transport-id="' + encodeURI(item.id) + '" data-transport-type="transport-map" class="btn btn-xs btn-xs-third btn-secondary"><i class="bi bi-caret-right-fill"></i> Test</a>' +
+          '<a href="#" data-bs-toggle="modal" data-bs-target="#testTransportModal" data-transport-id="' + encodeURI(item.id) + '" data-transport-type="transport-map" class="btn btn-xs btn-xs-lg btn-xs-third btn-secondary"><i class="bi bi-caret-right-fill"></i> Test</a>' +
-          '<a href="/edit/transport/' + encodeURI(item.id) + '" class="btn btn-xs btn-xs-third btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+          '<a href="/edit/transport/' + encodeURI(item.id) + '" class="btn btn-xs btn-xs-lg btn-xs-third btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
-          '<a href="#" data-action="delete_selected" data-id="single-transport" data-api-url="delete/transport" data-item="' + encodeURI(item.id) + '" class="btn btn-xs btn-xs-third btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
+          '<a href="#" data-action="delete_selected" data-id="single-transport" data-api-url="delete/transport" data-item="' + encodeURI(item.id) + '" class="btn btn-xs btn-xs-lg btn-xs-third btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
           '</div>';
-        item.chkbox = '<input type="checkbox" data-id="transports" name="multi_select" value="' + item.id + '" />';
+        item.chkbox = '<input type="checkbox" class="form-check-input" data-id="transports" name="multi_select" value="' + item.id + '" />';
       });
     } else if (table == 'queuetable') {
       $.each(data, function (i, item) {
-        item.chkbox = '<input type="checkbox" data-id="mailqitems" name="multi_select" value="' + item.queue_id + '" />';
+        item.chkbox = '<input type="checkbox" class="form-check-input" data-id="mailqitems" name="multi_select" value="' + item.queue_id + '" />';
         rcpts = $.map(item.recipients, function(i) {
           return escapeHtml(i);
         });
         item.recipients = rcpts.join('<hr style="margin:1px!important">');
         item.action = '<div class="btn-group">' +
-          '<a href="#" data-bs-toggle="modal" data-bs-target="#showQueuedMsg" data-queue-id="' + encodeURI(item.queue_id) + '" class="btn btn-xs btn-secondary">' + lang.queue_show_message + '</a>' +
+          '<a href="#" data-bs-toggle="modal" data-bs-target="#showQueuedMsg" data-queue-id="' + encodeURI(item.queue_id) + '" class="btn btn-xs btn-xs-lg btn-secondary">' + lang.queue_show_message + '</a>' +
           '</div>';
       });
     } else if (table == 'forwardinghoststable') {
       $.each(data, function (i, item) {
         item.action = '<div class="btn-group">' +
-          '<a href="#" data-action="delete_selected" data-id="single-fwdhost" data-api-url="delete/fwdhost" data-item="' + encodeURI(item.host) + '" class="btn btn-xs btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
+          '<a href="#" data-action="delete_selected" data-id="single-fwdhost" data-api-url="delete/fwdhost" data-item="' + encodeURI(item.host) + '" class="btn btn-xs btn-xs-lg btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
           '</div>';
-        item.chkbox = '<input type="checkbox" data-id="fwdhosts" name="multi_select" value="' + item.host + '" />';
+        item.chkbox = '<input type="checkbox" class="form-check-input" data-id="fwdhosts" name="multi_select" value="' + item.host + '" />';
       });
     } else if (table == 'oauth2clientstable') {
       $.each(data, function (i, item) {
         item.action = '<div class="btn-group">' +
-          '<a href="/edit.php?oauth2client=' + encodeURI(item.id) + '" class="btn btn-xs btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+          '<a href="/edit.php?oauth2client=' + encodeURI(item.id) + '" class="btn btn-xs btn-xs-lg btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
-          '<a href="#" data-action="delete_selected" data-id="single-oauth2-client" data-api-url="delete/oauth2-client" data-item="' + encodeURI(item.id) + '" class="btn btn-xs btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
+          '<a href="#" data-action="delete_selected" data-id="single-oauth2-client" data-api-url="delete/oauth2-client" data-item="' + encodeURI(item.id) + '" class="btn btn-xs btn-xs-lg btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
           '</div>';
         item.scope = "profile";
         item.grant_types = 'refresh_token password authorization_code';
-        item.chkbox = '<input type="checkbox" data-id="oauth2_clients" name="multi_select" value="' + item.id + '" />';
+        item.chkbox = '<input type="checkbox" class="form-check-input" data-id="oauth2_clients" name="multi_select" value="' + item.id + '" />';
       });
     } else if (table == 'domainadminstable') {
       $.each(data, function (i, item) {
         item.selected_domains = escapeHtml(item.selected_domains);
         item.selected_domains = item.selected_domains.toString().replace(/,/g, "<br>");
-        item.chkbox = '<input type="checkbox" data-id="domain_admins" name="multi_select" value="' + item.username + '" />';
+        item.chkbox = '<input type="checkbox" class="form-check-input" data-id="domain_admins" name="multi_select" value="' + item.username + '" />';
         item.action = '<div class="btn-group">' +
-          '<a href="/edit/domainadmin/' + encodeURI(item.username) + '" class="btn btn-xs btn-xs-third btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+          '<a href="/edit/domainadmin/' + encodeURI(item.username) + '" class="btn btn-xs btn-xs-lg btn-xs-third btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
-          '<a href="#" data-action="delete_selected" data-id="single-domain-admin" data-api-url="delete/domain-admin" data-item="' + encodeURI(item.username) + '" class="btn btn-xs btn-xs-third btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
+          '<a href="#" data-action="delete_selected" data-id="single-domain-admin" data-api-url="delete/domain-admin" data-item="' + encodeURI(item.username) + '" class="btn btn-xs btn-xs-lg btn-xs-third btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
-          '<a href="/index.php?duallogin=' + encodeURIComponent(item.username) + '" class="btn btn-xs btn-xs-third btn-success"><i class="bi bi-person-fill"></i> Login</a>' +
+          '<a href="/index.php?duallogin=' + encodeURIComponent(item.username) + '" class="btn btn-xs btn-xs-lg btn-xs-third btn-success"><i class="bi bi-person-fill"></i> Login</a>' +
           '</div>';
       });
     } else if (table == 'adminstable') {
@@ -580,10 +580,10 @@ jQuery(function($){
         } else {
           item.usr = item.username;
         }
-        item.chkbox = '<input type="checkbox" data-id="admins" name="multi_select" value="' + item.username + '" />';
+        item.chkbox = '<input type="checkbox" class="form-check-input" data-id="admins" name="multi_select" value="' + item.username + '" />';
         item.action = '<div class="btn-group">' +
-          '<a href="/edit/admin/' + encodeURI(item.username) + '" class="btn btn-xs btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+          '<a href="/edit/admin/' + encodeURI(item.username) + '" class="btn btn-xs btn-xs-lg btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
-          '<a href="#" data-action="delete_selected" data-id="single-admin" data-api-url="delete/admin" data-item="' + encodeURI(item.username) + '" class="btn btn-xs btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
+          '<a href="#" data-action="delete_selected" data-id="single-admin" data-api-url="delete/admin" data-item="' + encodeURI(item.username) + '" class="btn btn-xs btn-xs-lg btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
           '</div>';
       });
     }

data/web/js/site/edit.js

@@ -93,10 +93,10 @@ jQuery(function($){
         dataSrc: function(data){
           $.each(data, function (i, item) {
             if (!validateEmail(item.object)) {
-              item.chkbox = '<input type="checkbox" data-id="policy_wl_domain" name="multi_select" value="' + item.prefid + '" />';
+              item.chkbox = '<input type="checkbox" class="form-check-input" data-id="policy_wl_domain" name="multi_select" value="' + item.prefid + '" />';
             }
             else {
-              item.chkbox = '<input type="checkbox" disabled title="' + lang_user.spamfilter_table_domain_policy + '" />';
+              item.chkbox = '<input type="checkbox" class="form-check-input" disabled title="' + lang_user.spamfilter_table_domain_policy + '" />';
             }
           });
 
@@ -154,10 +154,10 @@ jQuery(function($){
         dataSrc: function(data){
           $.each(data, function (i, item) {
             if (!validateEmail(item.object)) {
-              item.chkbox = '<input type="checkbox" data-id="policy_bl_domain" name="multi_select" value="' + item.prefid + '" />';
+              item.chkbox = '<input type="checkbox" class="form-check-input" data-id="policy_bl_domain" name="multi_select" value="' + item.prefid + '" />';
             }
             else {
-              item.chkbox = '<input type="checkbox" disabled tooltip="' + lang_user.spamfilter_table_domain_policy + '" />';
+              item.chkbox = '<input type="checkbox" class="form-check-input" disabled tooltip="' + lang_user.spamfilter_table_domain_policy + '" />';
             }
           });
 

data/web/js/site/mailbox.js

@@ -466,16 +466,16 @@ jQuery(function($){
 
             item.def_quota_for_mbox = humanFileSize(item.def_quota_for_mbox);
             item.max_quota_for_mbox = humanFileSize(item.max_quota_for_mbox);
-            item.chkbox = '<input type="checkbox" data-id="domain" name="multi_select" value="' + encodeURIComponent(item.domain_name) + '" />';
+            item.chkbox = '<input type="checkbox" class="form-check-input" data-id="domain" name="multi_select" value="' + encodeURIComponent(item.domain_name) + '" />';
             item.action = '<div class="btn-group">';
             if (role == "admin") {
-              item.action += '<a href="/edit/domain/' + encodeURIComponent(item.domain_name) + '" class="btn btn-sm btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+              item.action += '<a href="/edit/domain/' + encodeURIComponent(item.domain_name) + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
-                '<a href="#" data-action="delete_selected" data-id="single-domain" data-api-url="delete/domain" data-item="' + encodeURIComponent(item.domain_name) + '" class="btn btn-sm btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
+                '<a href="#" data-action="delete_selected" data-id="single-domain" data-api-url="delete/domain" data-item="' + encodeURIComponent(item.domain_name) + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
-                  '<a href="#dnsInfoModal" class="btn btn-sm btn-info" data-bs-toggle="modal" data-domain="' + encodeURIComponent(item.domain_name) + '"><i class="bi bi-globe2"></i> DNS</a></div>';
+                  '<a href="#dnsInfoModal" class="btn btn-sm btn-xs-lg btn-info" data-bs-toggle="modal" data-domain="' + encodeURIComponent(item.domain_name) + '"><i class="bi bi-globe2"></i> DNS</a></div>';
             }
             else {
-              item.action += '<a href="/edit/domain/' + encodeURIComponent(item.domain_name) + '" class="btn btn-xs btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+              item.action += '<a href="/edit/domain/' + encodeURIComponent(item.domain_name) + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
-              '<a href="#dnsInfoModal" class="btn btn-xs btn-xs-half btn-info" data-bs-toggle="modal" data-domain="' + encodeURIComponent(item.domain_name) + '"><i class="bi bi-globe2"></i> DNS</a></div>';
+              '<a href="#dnsInfoModal" class="btn btn-sm btn-xs-lg btn-xs-half btn-info" data-bs-toggle="modal" data-domain="' + encodeURIComponent(item.domain_name) + '"><i class="bi bi-globe2"></i> DNS</a></div>';
             }
 
             if (Array.isArray(item.tags)){
@@ -650,7 +650,7 @@ jQuery(function($){
         url: "/api/v1/get/domain/template/all",
         dataSrc: function(json){
           $.each(json, function (i, item) {
-            item.chkbox = '<input type="checkbox" data-id="domain_template" name="multi_select" value="' + encodeURIComponent(item.id) + '" />';
+            item.chkbox = '<input type="checkbox" class="form-check-input" data-id="domain_template" name="multi_select" value="' + encodeURIComponent(item.id) + '" />';
 
             item.attributes.def_quota_for_mbox = humanFileSize(item.attributes.def_quota_for_mbox);
             item.attributes.max_quota_for_mbox = humanFileSize(item.attributes.max_quota_for_mbox);
@@ -671,13 +671,13 @@ jQuery(function($){
 
             if (item.template.toLowerCase() == "default"){
               item.action = '<div class="btn-group">' +
-              '<a href="/edit/template/' + encodeURIComponent(item.id) + '" class="btn btn-xs btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+              '<a href="/edit/template/' + encodeURIComponent(item.id) + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
               '</div>';
             }
             else {
               item.action = '<div class="btn-group">' +
-              '<a href="/edit/template/' + encodeURIComponent(item.id) + '" class="btn btn-xs btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+              '<a href="/edit/template/' + encodeURIComponent(item.id) + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
-              '<a href="#" data-action="delete_selected" data-id="single-template" data-api-url="delete/domain/template" data-item="' + encodeURIComponent(item.id) + '" class="btn btn-xs btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
+              '<a href="#" data-action="delete_selected" data-id="single-template" data-api-url="delete/domain/template" data-item="' + encodeURIComponent(item.id) + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
               '</div>';
             }
 
@@ -851,8 +851,9 @@ jQuery(function($){
            "tr" +
            "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
       language: lang_datatables,
-      initComplete: function(){
+      initComplete: function(settings, json){
         hideTableExpandCollapseBtn('#tab-mailboxes', '#mailbox_table');
+        filterByDomain(json, 8, table);
       },
       ajax: {
         type: "GET",
@@ -880,7 +881,7 @@ jQuery(function($){
               }
             }
             */
-            item.chkbox = '<input type="checkbox" data-id="mailbox" name="multi_select" value="' + encodeURIComponent(item.username) + '" />';
+            item.chkbox = '<input type="checkbox" class="form-check-input" data-id="mailbox" name="multi_select" value="' + encodeURIComponent(item.username) + '" />';
             if (item.attributes.passwd_update != '0') {
               var last_pw_change = new Date(item.attributes.passwd_update.replace(/-/g, "/"));
               item.last_pw_change = last_pw_change.toLocaleDateString(undefined, {year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit"});
@@ -912,18 +913,18 @@ jQuery(function($){
             if (acl_data.login_as === 1) {
 
               item.action = '<div class="btn-group">' +
-              '<a href="/edit/mailbox/' + encodeURIComponent(item.username) + '" class="btn btn-sm btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+              '<a href="/edit/mailbox/' + encodeURIComponent(item.username) + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
-              '<a href="#" data-action="delete_selected" data-id="single-mailbox" data-api-url="delete/mailbox" data-item="' + encodeURIComponent(item.username) + '" class="btn btn-sm btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
+              '<a href="#" data-action="delete_selected" data-id="single-mailbox" data-api-url="delete/mailbox" data-item="' + encodeURIComponent(item.username) + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
-              '<a href="/index.php?duallogin=' + encodeURIComponent(item.username) + '" class="login_as btn btn-sm btn-xs-half btn-success"><i class="bi bi-person-fill"></i> Login</a>';
+              '<a href="/index.php?duallogin=' + encodeURIComponent(item.username) + '" class="login_as btn btn-sm btn-xs-lg btn-xs-half btn-success"><i class="bi bi-person-fill"></i> Login</a>';
               if (ALLOW_ADMIN_EMAIL_LOGIN) {
-                item.action += '<a href="/sogo-auth.php?login=' + encodeURIComponent(item.username) + '" class="login_as btn btn-sm btn-xs-half btn-primary" target="_blank"><i class="bi bi-envelope-fill"></i> SOGo</a>';
+                item.action += '<a href="/sogo-auth.php?login=' + encodeURIComponent(item.username) + '" class="login_as btn btn-sm btn-xs-lg btn-xs-half btn-primary" target="_blank"><i class="bi bi-envelope-fill"></i> SOGo</a>';
               }
               item.action += '</div>';
             }
             else {
             item.action = '<div class="btn-group">' +
-              '<a href="/edit/mailbox/' + encodeURIComponent(item.username) + '" class="btn btn-xs btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+              '<a href="/edit/mailbox/' + encodeURIComponent(item.username) + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
-              '<a href="#" data-action="delete_selected" data-id="single-mailbox" data-api-url="delete/mailbox" data-item="' + encodeURIComponent(item.username) + '" class="btn btn-xs btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
+              '<a href="#" data-action="delete_selected" data-id="single-mailbox" data-api-url="delete/mailbox" data-item="' + encodeURIComponent(item.username) + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
               '</div>';
             }
             item.in_use = {
@@ -1148,7 +1149,7 @@ jQuery(function($){
         url: "/api/v1/get/mailbox/template/all",
         dataSrc: function(json){
           $.each(json, function (i, item) {
-            item.chkbox = '<input type="checkbox" data-id="mailbox_template" name="multi_select" value="' + encodeURIComponent(item.id) + '" />';
+            item.chkbox = '<input type="checkbox" class="form-check-input" data-id="mailbox_template" name="multi_select" value="' + encodeURIComponent(item.id) + '" />';
 
             item.template = escapeHtml(item.template);
             if (item.attributes.rl_frame === "s"){
@@ -1190,13 +1191,13 @@ jQuery(function($){
 
             if (item.template.toLowerCase() == "default"){
               item.action = '<div class="btn-group">' +
-                '<a href="/edit/template/' + encodeURIComponent(item.id) + '" class="btn btn-xs btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+                '<a href="/edit/template/' + encodeURIComponent(item.id) + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
                 '</div>';
             }
             else {
               item.action = '<div class="btn-group">' +
-                '<a href="/edit/template/' + encodeURIComponent(item.id) + '" class="btn btn-xs btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+                '<a href="/edit/template/' + encodeURIComponent(item.id) + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
-                '<a href="#" data-action="delete_selected" data-id="single-template" data-api-url="delete/mailbox/template" data-item="' + encodeURIComponent(item.id) + '" class="btn btn-xs btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
+                '<a href="#" data-action="delete_selected" data-id="single-template" data-api-url="delete/mailbox/template" data-item="' + encodeURIComponent(item.id) + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
                 '</div>';
             }
 
@@ -1362,8 +1363,9 @@ jQuery(function($){
            "tr" +
            "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
       language: lang_datatables,
-      initComplete: function(){
+      initComplete: function(settings, json){
         hideTableExpandCollapseBtn('#tab-resources', '#resource_table');
+        filterByDomain(json, 5, table);
       },
       ajax: {
         type: "GET",
@@ -1378,10 +1380,10 @@ jQuery(function($){
               item.multiple_bookings = '<span id="active-script" class="badge fs-6 bg-danger">' + lang.booking_custom_short + ' (' + item.multiple_bookings + ')</span>';
             }
             item.action = '<div class="btn-group">' +
-              '<a href="/edit/resource/' + encodeURIComponent(item.name) + '" class="btn btn-sm btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+              '<a href="/edit/resource/' + encodeURIComponent(item.name) + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
-              '<a href="#" data-action="delete_selected" data-id="single-resource" data-api-url="delete/resource" data-item="' + item.name + '" class="btn btn-sm btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
+              '<a href="#" data-action="delete_selected" data-id="single-resource" data-api-url="delete/resource" data-item="' + item.name + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
               '</div>';
-            item.chkbox = '<input type="checkbox" data-id="resource" name="multi_select" value="' + encodeURIComponent(item.name) + '" />';
+            item.chkbox = '<input type="checkbox" class="form-check-input" data-id="resource" name="multi_select" value="' + encodeURIComponent(item.name) + '" />';
             item.name = escapeHtml(item.name);
             item.description = escapeHtml(item.description);
           });
@@ -1509,8 +1511,9 @@ jQuery(function($){
            "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
       language: lang_datatables,
       order: [[2, 'desc']],
-      initComplete: function(){
+      initComplete: function(settings, json){
         hideTableExpandCollapseBtn('#collapse-tab-bcc', '#bcc_table');
+        filterByDomain(json, 6, table);
       },
       ajax: {
         type: "GET",
@@ -1518,10 +1521,10 @@ jQuery(function($){
         dataSrc: function(json){
           $.each(json, function (i, item) {
             item.action = '<div class="btn-group">' +
-              '<a href="/edit/bcc/' + item.id + '" class="btn btn-sm btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+              '<a href="/edit/bcc/' + item.id + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
-              '<a href="#" data-action="delete_selected" data-id="single-bcc" data-api-url="delete/bcc" data-item="' + item.id + '" class="btn btn-sm btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
+              '<a href="#" data-action="delete_selected" data-id="single-bcc" data-api-url="delete/bcc" data-item="' + item.id + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
               '</div>';
-            item.chkbox = '<input type="checkbox" data-id="bcc" name="multi_select" value="' + item.id + '" />';
+            item.chkbox = '<input type="checkbox" class="form-check-input" data-id="bcc" name="multi_select" value="' + item.id + '" />';
             item.local_dest = escapeHtml(item.local_dest);
             item.bcc_dest = escapeHtml(item.bcc_dest);
             if (item.type == 'sender') {
@@ -1632,10 +1635,10 @@ jQuery(function($){
             item.recipient_map_old = escapeHtml(item.recipient_map_old);
             item.recipient_map_new = escapeHtml(item.recipient_map_new);
             item.action = '<div class="btn-group">' +
-              '<a href="/edit/recipient_map/' + item.id + '" class="btn btn-sm btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+              '<a href="/edit/recipient_map/' + item.id + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
-              '<a href="#" data-action="delete_selected" data-id="single-recipient_map" data-api-url="delete/recipient_map" data-item="' + item.id + '" class="btn btn-sm btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
+              '<a href="#" data-action="delete_selected" data-id="single-recipient_map" data-api-url="delete/recipient_map" data-item="' + item.id + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
               '</div>';
-            item.chkbox = '<input type="checkbox" data-id="recipient_map" name="multi_select" value="' + item.id + '" />';
+            item.chkbox = '<input type="checkbox" class="form-check-input" data-id="recipient_map" name="multi_select" value="' + item.id + '" />';
           });
 
           return json;
@@ -1734,10 +1737,10 @@ jQuery(function($){
               item.parameters = '<code>' + escapeHtml(item.parameters) + '</code>';
             }
             item.action = '<div class="btn-group">' +
-              '<a href="/edit/tls_policy_map/' + item.id + '" class="btn btn-sm btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+              '<a href="/edit/tls_policy_map/' + item.id + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
-              '<a href="#" data-action="delete_selected" data-id="single-tls-policy-map" data-api-url="delete/tls-policy-map" data-item="' + item.id + '" class="btn btn-sm btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
+              '<a href="#" data-action="delete_selected" data-id="single-tls-policy-map" data-api-url="delete/tls-policy-map" data-item="' + item.id + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
               '</div>';
-            item.chkbox = '<input type="checkbox" data-id="tls-policy-map" name="multi_select" value="' + item.id + '" />';
+            item.chkbox = '<input type="checkbox" class="form-check-input" data-id="tls-policy-map" name="multi_select" value="' + item.id + '" />';
           });
 
           return json;
@@ -1823,8 +1826,9 @@ jQuery(function($){
            "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
       language: lang_datatables,
       order: [[2, 'desc']],
-      initComplete: function(){
+      initComplete: function(settings, json){
         hideTableExpandCollapseBtn('#tab-mbox-aliases', '#alias_table');
+        filterByDomain(json, 5, table);
       },
       ajax: {
         type: "GET",
@@ -1832,10 +1836,10 @@ jQuery(function($){
         dataSrc: function(json){
           $.each(json, function (i, item) {
             item.action = '<div class="btn-group">' +
-              '<a href="/edit/alias/' + encodeURIComponent(item.id) + '" class="btn btn-sm btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+              '<a href="/edit/alias/' + encodeURIComponent(item.id) + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
-              '<a href="#" data-action="delete_selected" data-id="single-alias" data-api-url="delete/alias" data-item="' + encodeURIComponent(item.id) + '" class="btn btn-sm btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
+              '<a href="#" data-action="delete_selected" data-id="single-alias" data-api-url="delete/alias" data-item="' + encodeURIComponent(item.id) + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
               '</div>';
-            item.chkbox = '<input type="checkbox" data-id="alias" name="multi_select" value="' + encodeURIComponent(item.id) + '" />';
+            item.chkbox = '<input type="checkbox" class="form-check-input" data-id="alias" name="multi_select" value="' + encodeURIComponent(item.id) + '" />';
             item.goto = escapeHtml(item.goto.replace(/,/g, " "));
             if (item.public_comment !== null) {
               item.public_comment = escapeHtml(item.public_comment);
@@ -1991,11 +1995,11 @@ jQuery(function($){
             item.alias_domain = escapeHtml(item.alias_domain);
 
             item.action = '<div class="btn-group">' +
-              '<a href="/edit/aliasdomain/' + encodeURIComponent(item.alias_domain) + '" class="btn btn-sm btn-xs-third btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+              '<a href="/edit/aliasdomain/' + encodeURIComponent(item.alias_domain) + '" class="btn btn-sm btn-xs-lg btn-xs-third btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
-              '<a href="#" data-action="delete_selected" data-id="single-alias-domain" data-api-url="delete/alias-domain" data-item="' + encodeURIComponent(item.alias_domain) + '" class="btn btn-sm btn-xs-third btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
+              '<a href="#" data-action="delete_selected" data-id="single-alias-domain" data-api-url="delete/alias-domain" data-item="' + encodeURIComponent(item.alias_domain) + '" class="btn btn-sm btn-xs-lg btn-xs-third btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
-              '<a href="#dnsInfoModal" class="btn btn-sm btn-xs-third btn-info" data-bs-toggle="modal" data-domain="' + encodeURIComponent(item.alias_domain) + '"><i class="bi bi-globe2"></i> DNS</a></div>' +
+              '<a href="#dnsInfoModal" class="btn btn-sm btn-xs-lg btn-xs-third btn-info" data-bs-toggle="modal" data-domain="' + encodeURIComponent(item.alias_domain) + '"><i class="bi bi-globe2"></i> DNS</a></div>' +
               '</div>';
-            item.chkbox = '<input type="checkbox" data-id="alias-domain" name="multi_select" value="' + encodeURIComponent(item.alias_domain) + '" />';
+            item.chkbox = '<input type="checkbox" class="form-check-input" data-id="alias-domain" name="multi_select" value="' + encodeURIComponent(item.alias_domain) + '" />';
             if(item.parent_is_backupmx == '1') {
               item.target_domain = '<span><a href="/edit/domain/' + item.target_domain + '">' + item.target_domain + '</a> <div class="badge fs-6 bg-warning">' + lang.alias_domain_backupmx + '</div></span>';
             } else {
@@ -2093,10 +2097,10 @@ jQuery(function($){
             }
             item.server_w_port = escapeHtml(item.user1) + '@' + escapeHtml(item.host1) + ':' + escapeHtml(item.port1);
             item.action = '<div class="btn-group">' +
-              '<a href="/edit/syncjob/' + item.id + '" class="btn btn-sm btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+              '<a href="/edit/syncjob/' + item.id + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
-              '<a href="#" data-action="delete_selected" data-id="single-syncjob" data-api-url="delete/syncjob" data-item="' + item.id + '" class="btn btn-sm btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
+              '<a href="#" data-action="delete_selected" data-id="single-syncjob" data-api-url="delete/syncjob" data-item="' + item.id + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
               '</div>';
-            item.chkbox = '<input type="checkbox" data-id="syncjob" name="multi_select" value="' + item.id + '" />';
+            item.chkbox = '<input type="checkbox" class="form-check-input" data-id="syncjob" name="multi_select" value="' + item.id + '" />';
             if (item.is_running == 1) {
               item.is_running = '<span id="active-script" class="badge fs-6 bg-success">' + lang.running + '</span>';
             } else {
@@ -2247,10 +2251,10 @@ jQuery(function($){
             item.script_data = '<pre class="text-break" style="margin:0px">' + escapeHtml(item.script_data) + '</pre>'
             item.filter_type = '<div class="badge fs-6 bg-secondary">' + item.filter_type.charAt(0).toUpperCase() + item.filter_type.slice(1).toLowerCase() + '</div>'
             item.action = '<div class="btn-group">' +
-              '<a href="/edit/filter/' + item.id + '" class="btn btn-sm btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+              '<a href="/edit/filter/' + item.id + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
-              '<a href="#" data-action="delete_selected" data-id="single-filter" data-api-url="delete/filter" data-item="' + encodeURIComponent(item.id) + '" class="btn btn-sm btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
+              '<a href="#" data-action="delete_selected" data-id="single-filter" data-api-url="delete/filter" data-item="' + encodeURIComponent(item.id) + '" class="btn btn-sm btn-xs-lg btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
               '</div>';
-            item.chkbox = '<input type="checkbox" data-id="filter_item" name="multi_select" value="' + item.id + '" />'
+            item.chkbox = '<input type="checkbox" class="form-check-input" data-id="filter_item" name="multi_select" value="' + item.id + '" />'
           });
 
           return json;
@@ -2330,6 +2334,40 @@ jQuery(function($){
       $(tab).find(".table_collapse_option").hide();
   }
   
+  function filterByDomain(json, column, table){
+    var tableId = $(table.table().container()).attr('id');
+    // Create the `select` element
+    var select = $('<select class="btn btn-sm btn-xs-lg btn-light text-start mx-2"><option value="">'+lang.all_domains+'</option></select>')
+      .insertBefore(
+        $('#'+tableId+' .dataTables_filter > label > input')
+      )
+      .on( 'change', function(){
+        table.column(column)
+          .search($(this).val())
+          .draw();
+      });
+
+    // get all domains
+    var domains = [];
+    json.forEach(obj => {
+      Object.entries(obj).forEach(([key, value]) => {
+        if(key === 'domain') {
+          domains.push(value)
+        }
+      });
+    });
+    
+    // get unique domain list
+    domains = domains.filter(function(value, index, array) {
+      return array.indexOf(value) === index;
+    });
+    
+    // add domains to select
+    domains.forEach(function(domain) {
+        select.append($('<option>' + domain + '</option>'));
+    });
+  }
+
   // detect element visibility changes
   function onVisible(element, callback) {
     $(document).ready(function() {

data/web/js/site/quarantine.js

@@ -77,7 +77,7 @@ jQuery(function($){
               '<a href="#" data-item="' + encodeURI(item.id) + '" class="btn btn-xs btn-info show_qid_info"><i class="bi bi-file-earmark-text"></i> ' + lang.show_item + '</a>' +
               '</div>';
             }
-            item.chkbox = '<input type="checkbox" data-id="qitems" name="multi_select" value="' + item.id + '" />';
+            item.chkbox = '<input type="checkbox" class="form-check-input" data-id="qitems" name="multi_select" value="' + item.id + '" />';
           });
 
           return data;

data/web/js/site/queue.js

@@ -48,7 +48,7 @@ jQuery(function($){
       url: "/api/v1/get/mailq/all",
       dataSrc: function(data){
         $.each(data, function (i, item) {
-          item.chkbox = '<input type="checkbox" data-id="mailqitems" name="multi_select" value="' + item.queue_id + '" />';
+          item.chkbox = '<input type="checkbox" class="form-check-input" data-id="mailqitems" name="multi_select" value="' + item.queue_id + '" />';
           rcpts = $.map(item.recipients, function(i) {
             return escapeHtml(i);
           });

data/web/js/site/user.js

@@ -169,11 +169,11 @@ jQuery(function($){
               item.action = '<div class="btn-group">' +
                 '<a href="#" data-action="delete_selected" data-id="single-tla" data-api-url="delete/time_limited_alias" data-item="' + encodeURIComponent(item.address) + '" class="btn btn-xs btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
                 '</div>';
-              item.chkbox = '<input type="checkbox" data-id="tla" name="multi_select" value="' + encodeURIComponent(item.address) + '" />';
+              item.chkbox = '<input type="checkbox" class="form-check-input" data-id="tla" name="multi_select" value="' + encodeURIComponent(item.address) + '" />';
               item.address = escapeHtml(item.address);
             }
             else {
-              item.chkbox = '<input type="checkbox" disabled />';
+              item.chkbox = '<input type="checkbox" class="form-check-input" disabled />';
               item.action = '<span>-</span>';
             }
           });
@@ -263,11 +263,11 @@ jQuery(function($){
                 '<a href="/edit/syncjob/' + item.id + '" class="btn btn-xs btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
                 '<a href="#" data-action="delete_selected" data-id="single-syncjob" data-api-url="delete/syncjob" data-item="' + item.id + '" class="btn btn-xs btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
                 '</div>';
-              item.chkbox = '<input type="checkbox" data-id="syncjob" name="multi_select" value="' + item.id + '" />';
+              item.chkbox = '<input type="checkbox" class="form-check-input" data-id="syncjob" name="multi_select" value="' + item.id + '" />';
             }
             else {
               item.action = '<span>-</span>';
-              item.chkbox = '<input type="checkbox" disabled />';
+              item.chkbox = '<input type="checkbox" class="form-check-input" disabled />';
             }
             if (item.is_running == 1) {
               item.is_running = '<span id="active-script" class="badge fs-6 bg-success">' + lang.running + '</span>';
@@ -420,11 +420,11 @@ jQuery(function($){
                 '<a href="/edit/app-passwd/' + item.id + '" class="btn btn-xs btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
                 '<a href="#" data-action="delete_selected" data-id="single-apppasswd" data-api-url="delete/app-passwd" data-item="' + item.id + '" class="btn btn-xs btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
                 '</div>';
-              item.chkbox = '<input type="checkbox" data-id="apppasswd" name="multi_select" value="' + item.id + '" />';
+              item.chkbox = '<input type="checkbox" class="form-check-input" data-id="apppasswd" name="multi_select" value="' + item.id + '" />';
             }
             else {
               item.action = '<span>-</span>';
-              item.chkbox = '<input type="checkbox" disabled />';
+              item.chkbox = '<input type="checkbox" class="form-check-input" disabled />';
             }
           });
 
@@ -503,13 +503,13 @@ jQuery(function($){
           console.log(data);
           $.each(data, function (i, item) {
             if (validateEmail(item.object)) {
-              item.chkbox = '<input type="checkbox" data-id="policy_wl_mailbox" name="multi_select" value="' + item.prefid + '" />';
+              item.chkbox = '<input type="checkbox" class="form-check-input" data-id="policy_wl_mailbox" name="multi_select" value="' + item.prefid + '" />';
             }
             else {
-              item.chkbox = '<input type="checkbox" disabled title="' + lang.spamfilter_table_domain_policy + '" />';
+              item.chkbox = '<input type="checkbox" class="form-check-input" disabled title="' + lang.spamfilter_table_domain_policy + '" />';
             }
             if (acl_data.spam_policy === 0) {
-              item.chkbox = '<input type="checkbox" disabled />';
+              item.chkbox = '<input type="checkbox" class="form-check-input" disabled />';
             }
           });
 
@@ -574,13 +574,13 @@ jQuery(function($){
           console.log(data);
           $.each(data, function (i, item) {
             if (validateEmail(item.object)) {
-              item.chkbox = '<input type="checkbox" data-id="policy_bl_mailbox" name="multi_select" value="' + item.prefid + '" />';
+              item.chkbox = '<input type="checkbox" class="form-check-input" data-id="policy_bl_mailbox" name="multi_select" value="' + item.prefid + '" />';
             }
             else {
-              item.chkbox = '<input type="checkbox" disabled tooltip="' + lang.spamfilter_table_domain_policy + '" />';
+              item.chkbox = '<input type="checkbox" class="form-check-input" disabled tooltip="' + lang.spamfilter_table_domain_policy + '" />';
             }
             if (acl_data.spam_policy === 0) {
-              item.chkbox = '<input type="checkbox" disabled />';
+              item.chkbox = '<input type="checkbox" class="form-check-input" disabled />';
             }
           });
 

data/web/json_api.php

@@ -1867,6 +1867,9 @@ if (isset($_GET['query'])) {
         case "quota_notification_bcc":
           process_edit_return(quota_notification_bcc('edit', $attr));
         break;
+        case "domain-wide-footer":
+          process_edit_return(mailbox('edit', 'domain_wide_footer', $attr));
+        break;
         case "mailq":
           process_edit_return(mailq('edit', array_merge(array('qid' => $items), $attr)));
         break;

data/web/lang/lang.cs-cz.json

@@ -41,6 +41,7 @@
         "alias_domain": "Doménový alias",
         "alias_domain_info": "<small>Platné názvy domén (oddělené čárkami).</small>",
         "app_name": "Název aplikace",
+        "app_passwd_protocols": "Povolené protokoly pro hesla aplikací",
         "app_password": "Přidat heslo aplikace",
         "automap": "Pokusit se automaticky mapovat složky (\"Sent items\", \"Sent\" => \"Sent\" atd.)",
         "backup_mx_options": "Možnosti záložního MX",
@@ -459,6 +460,29 @@
         "value_missing": "Prosím, uveďte všechny hodnoty",
         "yotp_verification_failed": "Yubico OTP ověření selhalo: %s"
     },
+    "datatables": {
+      "emptyTable": "Tabulka neobsahuje žádná data",
+      "info": "Zobrazuji _START_ až _END_ z celkem _TOTAL_ záznamů",
+      "infoEmpty": "Zobrazuji 0 až 0 z 0 záznamů",
+      "infoFiltered": "(filtrováno z celkem _MAX_ záznamů)",
+      "loadingRecords": "Načítám...",
+      "zeroRecords": "Žádné záznamy nebyly nalezeny",
+      "paginate": {
+        "first": "První",
+        "last": "Poslední",
+        "next": "Další",
+        "previous": "Předchozí"
+      },
+      "aria": {
+        "sortAscending": ": aktivujte pro seřazení vzestupně",
+        "sortDescending": ": aktivujte pro seřazení sestupně"
+      },
+      "lengthMenu": "Zobrazit _MENU_ výsledků",
+      "processing": "Zpracovávání...",
+      "search": "Vyhledávání:",
+      "decimal": ",",
+      "thousands": " "
+    },
     "debug": {
         "chart_this_server": "Graf (tento server)",
         "containers_info": "Informace o kontejnerech",
@@ -498,6 +522,7 @@
         "optional": "Tento záznam je volitelný."
     },
     "edit": {
+        "acl": "ACL (Oprávnění)",
         "active": "Aktivní",
         "admin": "Upravit administrátora",
         "advanced_settings": "Pokročilá nastavení",
@@ -507,6 +532,7 @@
         "allowed_protocols": "Povolené protokoly",
         "app_name": "Název aplikace",
         "app_passwd": "Heslo aplikace",
+        "app_passwd_protocols": "Povolené protokoly pro hesla aplikací",
         "automap": "Pokusit se automaticky mapovat složky (\"Sent items\", \"Sent\" => \"Sent\" atd.)",
         "backup_mx_options": "Možnosti záložního MX",
         "bcc_dest_format": "Cíl kopie musí být jedna platná email adresa. Pokud potřebujete posílat kopie na více adres, vytvořte Alias a použijte jej zde.",
@@ -590,6 +616,8 @@
         "sieve_desc": "Krátký popis",
         "sieve_type": "Typ filtru",
         "skipcrossduplicates": "Přeskočit duplicitní zprávy (\"první přijde, první mele\")",
+        "sogo_access": "Udělit přímý přihlašovací přístup do služby SOGo",
+        "sogo_access_info": "Jednotné přihlášení (SSO) z mail UI zůstává funkční. Toto nastavení neovlivňuje přístup ke všem ostatním službám ani neodstraňuje či nemění stávající profil uživatele SOGo.",
         "sogo_visible": "Alias dostupný v SOGo",
         "sogo_visible_info": "Tato volba určuje objekty, jež lze zobrazit v SOGo (sdílené nebo nesdílené aliasy, jež ukazuje alespoň na jednu schránku).",
         "spam_alias": "Vytvořit nebo změnit dočasné aliasy",
@@ -1027,13 +1055,16 @@
         "alias_valid_until": "Platný do",
         "aliases_also_send_as": "Smí odesílat také jako uživatel",
         "aliases_send_as_all": "Nekontrolovat přístup odesílatele pro následující doménu(y) a jejich aliasy domény:",
+        "allowed_protocols": "Povolené protokoly",
         "app_hint": "Hesla aplikací jsou alternativní heslo pro přihlášení k IMAP, SMTP, CalDAV, CardDAV a EAS. Uživatelské jméno zůstává stejné.<br>SOGo však nelze s heslem aplikace použít.",
         "app_name": "Název aplikace",
         "app_passwds": "Hesla aplikací",
         "apple_connection_profile": "Profil připojení Apple",
         "apple_connection_profile_complete": "Tento profil obsahuje parametry připojení k IMAP, SMTP, CalDAV (kalendáře) a CardDAV (kontakty) pro zařízení Apple.",
         "apple_connection_profile_mailonly": "Tento profil obsahuje parametry připojení k IMAP a SMTP pro zařízení Apple.",
+        "apple_connection_profile_with_app_password": "Nové heslo aplikace se vygeneruje a přidá do profilu, takže při nastavování zařízení není třeba zadávat žádné heslo. Soubor nesdílejte, protože poskytuje plný přístup k vaší poštovní schránce.",
         "change_password": "Změnit heslo",
+        "change_password_hint_app_passwords": "Váš účet má %d hesel aplikací, která nebudou změněna. Chcete-li je spravovat, přejděte na kartu Hesla aplikací.",
         "clear_recent_successful_connections": "Vymazat nedávné úspěšné přihlášení",
         "client_configuration": "Zobrazit průvodce nastavením e-mailových klientů a smartphonů",
         "create_app_passwd": "Vytvořit heslo aplikace",
@@ -1044,6 +1075,7 @@
         "delete_ays": "Potvrďte odstranění.",
         "direct_aliases": "Přímé aliasy",
         "direct_aliases_desc": "Na přímé aliasy se uplatňuje filtr spamu a nastavení pravidel TLS",
+        "direct_protocol_access": "Tento uživatel mailové schránky má <b>přímý externí přístup</b> k následujícím protokolům a aplikacím. Toto nastavení je řízeno správcem. Pro udělení přístupu k jednotlivým protokolům a aplikacím lze vytvořit hesla aplikací.<br>Tlačítko \" Přihlaste se do webmailu\" zajišťuje jednotné přihlášení k SOGo a je vždy k dispozici.",
         "eas_reset": "Smazat mezipaměť zařízení ActiveSync",
         "eas_reset_help": "Obnovení mezipaměti zařízení pomůže zpravidla obnovit poškozený profil služby ActiveSync.<br><b>Upozornění:</b> Všechna data budou opětovně stažena!",
         "eas_reset_now": "Smazat",
@@ -1137,15 +1169,15 @@
         "spamfilter_yellow": "Žlutá: tato zpráva může být spam, bude označena jako spam a přesunuta do složky nevyžádané pošty",
         "status": "Stav",
         "sync_jobs": "Synchronizační úlohy",
+        "syncjob_EXIT_AUTHENTICATION_FAILURE": "Problém s autentifikací",
+        "syncjob_EXIT_AUTHENTICATION_FAILURE_USER1": "Chybné uživatelské jméno nebo heslo",
+        "syncjob_EXIT_CONNECTION_FAILURE": "Problém se spojením",
+        "syncjob_EXIT_CONNECTION_FAILURE_HOST1": "Nelze se připojit ke vzdálenému serveru",
+        "syncjob_EXIT_OVERQUOTA": "Cílová schránka je plná",
+        "syncjob_EXIT_TLS_FAILURE": "Problém se šifrovaným spojením",
+        "syncjob_EX_OK": "Úspěch",
         "syncjob_check_log": "Zkontrolujte záznam",
         "syncjob_last_run_result": "Výsledek posledního spuštění",
-        "syncjob_EX_OK": "Úspěch",
-        "syncjob_EXIT_CONNECTION_FAILURE": "Problém se spojením",
-        "syncjob_EXIT_TLS_FAILURE": "Problém se šifrovaným spojením",
-        "syncjob_EXIT_AUTHENTICATION_FAILURE": "Problém s autentifikací",
-        "syncjob_EXIT_OVERQUOTA": "Cílová schránka je plná",
-        "syncjob_EXIT_CONNECTION_FAILURE_HOST1": "Nelze se připojit ke vzdálenému serveru",
-        "syncjob_EXIT_AUTHENTICATION_FAILURE_USER1": "Chybné uživatelské jméno nebo heslo",
         "tag_handling": "Zacházení s označkovanou poštou",
         "tag_help_example": "Příklad e-mailové adresy se značkou: me<b>+Facebook</b>@example.org",
         "tag_help_explain": "V podsložce: v doručené poště bude vytvořena nová podsložka pojmenovaná po značce zprávy (\"INBOX / Facebook\").<br>\r\nV předmětu: název značky bude přidáván k předmětu mailu, například: \"[Facebook] Moje zprávy\".",
@@ -1165,6 +1197,7 @@
         "week": "týden",
         "weekly": "Každý týden",
         "weeks": "týdny",
+        "with_app_password": "s heslem aplikace",
         "year": "rok",
         "years": "let"
     },

data/web/lang/lang.de-de.json

@@ -484,7 +484,7 @@
         "info": "_START_ bis _END_ von _TOTAL_ Einträgen",
         "infoEmpty": "0 bis 0 von 0 Einträgen",
         "infoFiltered": "(gefiltert von _MAX_ Einträgen)",
-        "infoPostFix": "datatables.infoPostFix",
+        "infoPostFix": "",
         "thousands": ".",
         "lengthMenu": "_MENU_ Einträge anzeigen",
         "loadingRecords": "Wird geladen...",
@@ -581,6 +581,10 @@
         "disable_login": "Login verbieten (Mails werden weiterhin angenommen)",
         "domain": "Domain bearbeiten",
         "domain_admin": "Domain-Administrator bearbeiten",
+        "domain_footer": "Domain wide footer",
+        "domain_footer_html": "HTML footer",
+        "domain_footer_info": "Domain wide footer werden allen ausgehenden E-Mails hinzugefügt, die einer Adresse innerhalb dieser Domain gehört.<br>Die folgenden Variablen können für den Footer benutzt werden:",
+        "domain_footer_plain": "PLAIN footer",
         "domain_quota": "Domain Speicherplatz gesamt (MiB)",
         "domains": "Domains",
         "dont_check_sender_acl": "Absender für Domain %s u. Alias-Domain nicht prüfen",
@@ -966,7 +970,7 @@
     "queue": {
         "delete": "Queue löschen",
         "flush": "Queue flushen",
-        "info": "In der Mailqueue befinden sich alle E-Mails, welche auf eine Zustellung warten. Sollte eine E-Mail eine längere Zeit innerhalb der Mailqueue stecken wird diese automatisch vom System gelöscht.<br>Die Fehlermeldung der jeweiligen Mail gibt aufschluss darüber, warum diese nicht zugestellt werden konnte",
+        "info": "In der Mailqueue befinden sich alle E-Mails, welche auf eine Zustellung warten. Sollte eine E-Mail eine längere Zeit innerhalb der Mailqueue stecken wird diese automatisch vom System gelöscht.<br>Die Fehlermeldung der jeweiligen Mail gibt Aufschluss darüber, warum diese nicht zugestellt werden konnte",
         "legend": "Funktionen der Mailqueue Aktionen:",
         "ays": "Soll die derzeitige Queue wirklich komplett bereinigt werden?",
         "deliver_mail": "Ausliefern",
@@ -1017,6 +1021,7 @@
         "domain_admin_added": "Domain-Administrator %s wurde angelegt",
         "domain_admin_modified": "Änderungen an Domain-Administrator %s wurden gespeichert",
         "domain_admin_removed": "Domain-Administrator %s wurde entfernt",
+        "domain_footer_modified": "Änderungen an Domain Footer %s wurden gespeichert",
         "domain_modified": "Änderungen an Domain %s wurden gespeichert",
         "domain_removed": "Domain %s wurde entfernt",
         "dovecot_restart_success": "Dovecot wurde erfolgreich neu gestartet",
@@ -1120,7 +1125,7 @@
         "apple_connection_profile_mailonly": "Dieses Verbindungsprofil beinhaltet IMAP- und SMTP-Konfigurationen für ein Apple-Gerät.",
         "apple_connection_profile_with_app_password": "Es wird ein neues App-Passwort erzeugt und in das Profil eingefügt, damit bei der Einrichtung kein Passwort eingegeben werden muss. Geben Sie das Profil nicht weiter, da es einen vollständigen Zugriff auf Ihr Postfach ermöglicht.",
         "change_password": "Passwort ändern",
-        "change_password_hint_app_passwords": "Ihre Mailbox hat {{number_of_app_passwords}} App-Passwörter, die nicht geändert werden. Um diese zu verwalten, gehen Sie bitte zum App-Passwörter-Tab.",
+        "change_password_hint_app_passwords": "Ihre Mailbox hat %d App-Passwörter, die nicht geändert werden. Um diese zu verwalten, gehen Sie bitte zum App-Passwörter-Tab.",
         "clear_recent_successful_connections": "Alle erfolgreichen Verbindungen bereinigen",
         "client_configuration": "Konfigurationsanleitungen für E-Mail-Programme und Smartphones anzeigen",
         "create_app_passwd": "Erstelle App-Passwort",

data/web/lang/lang.en-gb.json

@@ -149,6 +149,8 @@
         "ays": "Are you sure you want to proceed?",
         "ban_list_info": "See a list of banned IPs below: <b>network (remaining ban time) - [actions]</b>.<br />IPs queued to be unbanned will be removed from the active ban list within a few seconds.<br />Red labels indicate active permanent bans by blacklisting.",
         "change_logo": "Change logo",
+        "logo_normal_label": "Normal",
+        "logo_dark_label": "Inverted for dark mode",
         "configuration": "Configuration",
         "convert_html_to_text": "Convert HTML to plain text",
         "cors_settings": "CORS Settings",
@@ -484,7 +486,7 @@
         "info": "Showing _START_ to _END_ of _TOTAL_ entries",
         "infoEmpty": "Showing 0 to 0 of 0 entries",
         "infoFiltered": "(filtered from _MAX_ total entries)",
-        "infoPostFix": "datatables.infoPostFix",
+        "infoPostFix": "",
         "thousands": ",",
         "lengthMenu": "Show _MENU_ entries",
         "loadingRecords": "Loading...",
@@ -581,6 +583,17 @@
         "disable_login": "Disallow login (incoming mail is still accepted)",
         "domain": "Edit domain",
         "domain_admin": "Edit domain administrator",
+        "domain_footer": "Domain wide footer",
+        "domain_footer_html": "HTML footer",
+        "domain_footer_info": "Domain-wide footers are added to all outgoing emails associated with an address within this domain. <br> The following variables can be used for the footer:",
+        "domain_footer_info_vars": {
+            "auth_user": "{= auth_user =}   - Authenticated Username specified by an MTA",
+            "from_user": "{= from_user =}   - From user part of envelope, e.g for \"moo@mailcow.tld\" it returns \"moo\"",
+            "from_name": "{= from_name =}   - From name of envelope, e.g for \"Mailcow &lt;moo@mailcow.tld&gt;\" it returns \"Mailcow\"",
+            "from_addr": "{= from_addr =}   - From address part of envelope",
+            "from_domain": "{= from_domain =} - From domain part of envelope"
+        },
+        "domain_footer_plain": "PLAIN footer",
         "domain_quota": "Domain quota",
         "domains": "Domains",
         "dont_check_sender_acl": "Disable sender check for domain %s (+ alias domains)",
@@ -1024,6 +1037,7 @@
         "domain_admin_added": "Domain administrator %s has been added",
         "domain_admin_modified": "Changes to domain administrator %s have been saved",
         "domain_admin_removed": "Domain administrator %s has been removed",
+        "domain_footer_modified": "Changes to domain footer %s have been saved",
         "domain_modified": "Changes to domain %s have been saved",
         "domain_removed": "Domain %s has been removed",
         "dovecot_restart_success": "Dovecot was restarted successfully",
@@ -1127,7 +1141,7 @@
         "apple_connection_profile_mailonly": "This connection profile includes IMAP and SMTP configuration parameters for an Apple device.",
         "apple_connection_profile_with_app_password": "A new app password is generated and added to the profile so that no password needs to be entered when setting up your device. Please do not share the file as it grants full access to your mailbox.",
         "change_password": "Change password",
-        "change_password_hint_app_passwords": "Your account has {{number_of_app_passwords}} app passwords that will not be changed. To manage these, go to the App passwords tab.",
+        "change_password_hint_app_passwords": "Your account has %d app passwords that will not be changed. To manage these, go to the App passwords tab.",
         "clear_recent_successful_connections": "Clear seen successful connections",
         "client_configuration": "Show configuration guides for email clients and smartphones",
         "create_app_passwd": "Create app password",

data/web/lang/lang.it-it.json

@@ -1195,7 +1195,7 @@
         "weeks": "settimane",
         "year": "anno",
         "years": "anni",
-        "change_password_hint_app_passwords": "Il tuo account ha {{number_of_app_passwords}} password delle app che non verranno modificate. Per gestirle, vai alla scheda App passwords.",
+        "change_password_hint_app_passwords": "Il tuo account ha %d password delle app che non verranno modificate. Per gestirle, vai alla scheda App passwords.",
         "syncjob_check_log": "Controlla i log",
         "syncjob_last_run_result": "Risultato dell'ultima esecuzione",
         "open_logs": "Apri i log",

data/web/lang/lang.ro-ro.json

@@ -1056,7 +1056,7 @@
         "apple_connection_profile_mailonly": "Acest profil de conexiune include parametrii de configurare IMAP și SMTP pentru dispozitivele Apple.",
         "apple_connection_profile_with_app_password": "O nouă parolă pentru aplicație este generată și adăugată la profil, astfel încât să nu fie necesară introducerea unei parole la configurarea dispozitivului. Vă rugăm să nu partajați fișierul, deoarece oferă acces deplin la căsuța dvs. poștală.",
         "change_password": "Schimbă parola",
-        "change_password_hint_app_passwords": "Contul dvs. are {{number_of_app_passwords}} parole de aplicație care nu vor fi modificate. Pentru a le gestiona, accesați secțiunea Parole aplicație.",
+        "change_password_hint_app_passwords": "Contul dvs. are %d parole de aplicație care nu vor fi modificate. Pentru a le gestiona, accesați secțiunea Parole aplicație.",
         "clear_recent_successful_connections": "Ștergeți conexiunile reușite văzute",
         "client_configuration": "Afișează ghidurile de configurare pentru clienții de email și smartphone-uri",
         "create_app_passwd": "Crează parola aplicației",

data/web/lang/lang.ru-ru.json

@@ -1202,6 +1202,6 @@
         "session_ua": "Неверный токен формы: ошибка проверки User-Agent"
     },
     "datatables": {
-        "infoPostFix": "datatables.infoPostFix"
+        "infoPostFix": ""
     }
 }

data/web/lang/lang.sk-sk.json

@@ -41,6 +41,7 @@
         "alias_domain": "Alias doména",
         "alias_domain_info": "<small>Len platné mená domén (oddelené čiarkou).</small>",
         "app_name": "Meno aplikácie",
+        "app_passwd_protocols": "Povolené protokoly pre heslá aplikácií",
         "app_password": "Pridať heslo aplikácie",
         "automap": "Skúsiť automaticky mapovať priečinky (\"Sent items\", \"Sent\" => \"Sent\" atd.)",
         "backup_mx_options": "Možnosti preposielania",
@@ -456,6 +457,29 @@
         "value_missing": "Prosím poskytnite všetky hodnoty",
         "yotp_verification_failed": "Overenie cez OTP Yubico zlyhalo: %s"
     },
+    "datatables": {
+        "info": "Záznamy _START_ až _END_ z celkom _TOTAL_",
+        "infoEmpty": "Záznamy 0 až 0 z celkom 0 ",
+        "infoFiltered": "(vyfiltrované spomedzi _MAX_ záznamov)",
+        "lengthMenu": "Zobraz _MENU_ záznamov",
+        "loadingRecords": "Načítavam...",
+        "processing": "Spracúvam...",
+        "search": "Hľadať:",
+        "zeroRecords": "Nenašli sa žiadne vyhovujúce záznamy",
+        "paginate": {
+            "first": "Prvá",
+            "last": "Posledná",
+            "next": "Nasledujúca",
+            "previous": "Predchádzajúca"
+        },
+        "aria": {
+            "sortAscending": ": aktivujte na zoradenie stĺpca vzostupne",
+            "sortDescending": ": aktivujte na zoradenie stĺpca zostupne"
+        },
+        "emptyTable": "Nie sú k dispozícii žiadne dáta.",
+        "decimal": ",",
+        "thousands": " "
+    },
     "debug": {
         "chart_this_server": "Graf (tento server)",
         "containers_info": "Informácie o kontajneroch",
@@ -505,6 +529,7 @@
         "allowed_protocols": "Povolené protokoly",
         "app_name": "Meno aplikácie",
         "app_passwd": "Heslo aplikácie",
+        "app_passwd_protocols": "Povolené protokoly pre heslá aplikácií",
         "automap": "Skúsiť automapovať priečinky (\"Sent items\", \"Sent\" => \"Sent\" atd.)",
         "backup_mx_options": "Možnosti preposielania",
         "bcc_dest_format": "Cieľ kópie musí byť jedna platná emailová adresa. Pokiaľ potrebujete posielať kópie na viac adries, vytvorte Alias a použite ho tu.",
@@ -589,6 +614,8 @@
         "sieve_desc": "Krátky popis",
         "sieve_type": "Typ filtru",
         "skipcrossduplicates": "Preskočiť duplikované správy naprieč priečinkami (akceptuje sa prvý nález)",
+        "sogo_access": "Udeliť priamy prístup k prihláseniu do služby SOGo",
+        "sogo_access_info": "Jednotné prihlásenie (SSO) z mail UI zostáva funkčné. Toto nastavenie nemá vplyv na prístup k všetkým ostatným službám, ani neodstraňuje alebo nemení existujúci profil používateľa SOGo.",
         "sogo_visible": "Alias je viditeľný v SOGo",
         "sogo_visible_info": "Táto voľba ovplyvňuje len objekty, ktoré dokážu byť zobrazené v SOGo (zdieľané alebo nezdieľané alias adresy ukazujúc na minimálne jednu lokálnu mailovú schránku). Ak je skrytý, alias nebude prezentovaný ako voliteľný odosielateľ v SOGo.",
         "spam_alias": "Vytvoriť alebo zmeniť časovo limitované alias adresy",
@@ -1031,13 +1058,16 @@
         "alias_valid_until": "Platné do",
         "aliases_also_send_as": "Môže odosielať ako používateľ",
         "aliases_send_as_all": "Nekontrolovať prístup odosielateľa pre nasledujúcu doménu/y a jej alias domény",
+        "allowed_protocols": "Povolené protokoly",
         "app_hint": "Heslá aplikácií sú alternatívne heslá pre vaše IMAP, SMTP, CalDAV, CardDAV a EAS prihlásenie. Používateľské meno zostáva nezmenené.<br>SOGo nie je momentálne podporovaný.",
         "app_name": "Meno aplikácie",
         "app_passwds": "Heslá aplikácií",
         "apple_connection_profile": "Apple konfiguračný profil",
         "apple_connection_profile_complete": "Tento profil zahŕňa IMAP a SMTP parametre, ako aj CalDAV (kalendáre) a CardDAV (kontakty) pre zariadenia Apple.",
         "apple_connection_profile_mailonly": "Tento profil zahŕňa IMAP a SMTP konfiguračné parametre pre zariadenia Apple.",
+        "apple_connection_profile_with_app_password": "Nové heslo aplikácie sa vygeneruje a pridá do profilu, takže pri nastavovaní zariadenia nie je potrebné zadávať žiadne heslo. Súbor nezdieľajte, pretože poskytuje úplný prístup k vašej poštovej schránke.",
         "change_password": "Zmeniť heslo",
+        "change_password_hint_app_passwords": "Váš účet má %d hesiel aplikácií, ktoré nebudú zmenené. Ak ich chcete spravovať, prejdite na kartu Heslá aplikácií.",
         "clear_recent_successful_connections": "Vymazať nedávne úspešné prihlásenia",
         "client_configuration": "Zobraziť konfiguračné pokyny pre emailových klientov a smartfóny",
         "create_app_passwd": "Vytvoriť heslo aplikácie",
@@ -1048,6 +1078,7 @@
         "delete_ays": "Potvrďte zmazanie.",
         "direct_aliases": "Priame alias adresy",
         "direct_aliases_desc": "Priame aliasy sú ovplyvnené spam filtrom a nastavením TLS pravidiel.",
+        "direct_protocol_access": "Tento používateľ mailovej schránky má <b>priamy, externý prístup</b> k nasledujúcim protokolom a aplikáciám. Toto nastavenie má pod kontrolou Váš správca. Na udelenie prístupu k jednotlivým protokolom a aplikáciám je možné vytvoriť heslá aplikácií.<br>Tlačidlo \" Prihláste sa do webmailu\" poskytuje jednotné prihlásenie do systému SOGo a je vždy k dispozícii.",
         "eas_reset": "Resetovať medzipamäť u ActiveSync zariadení",
         "eas_reset_help": "Vo väčšine prípadov, reset medzipamäte ActiveSync pomôže opravit nefunkčný profil.<br><b>Pozor:</b> Všetky potrebné dáta budú opäť stiahnuté!",
         "eas_reset_now": "Reset ActiveSync",
@@ -1141,15 +1172,15 @@
         "spamfilter_yellow": "Žltá: Táto správa môže byť spam, bude označená ako spam a presunutá do priečinku nevyžiadanej pošty",
         "status": "Status",
         "sync_jobs": "Synchronizačné úlohy",
+        "syncjob_EXIT_AUTHENTICATION_FAILURE": "Problém s autentifikáciou",
+        "syncjob_EXIT_AUTHENTICATION_FAILURE_USER1": "Chybné uživateľské meno alebo heslo",
+        "syncjob_EXIT_CONNECTION_FAILURE": "Problém so spojením",
+        "syncjob_EXIT_CONNECTION_FAILURE_HOST1": "Nedá sa pripojiť k vzdialenému serveru",
+        "syncjob_EXIT_OVERQUOTA": "Cieľová schránka je plná",
+        "syncjob_EXIT_TLS_FAILURE": "Problém so šifrovaným spojením",
+        "syncjob_EX_OK": "Úspech",
         "syncjob_check_log": "Skontrolujte záznam",
         "syncjob_last_run_result": "Výsledok posledného spustenia",
-        "syncjob_EX_OK": "Úspech",
-        "syncjob_EXIT_CONNECTION_FAILURE": "Problém so spojením",
-        "syncjob_EXIT_TLS_FAILURE": "Problém so šifrovaným spojením",
-        "syncjob_EXIT_AUTHENTICATION_FAILURE": "Problém s autentifikáciou",
-        "syncjob_EXIT_OVERQUOTA": "Cieľová schránka je plná",
-        "syncjob_EXIT_CONNECTION_FAILURE_HOST1": "Nedá sa pripojiť k vzdialenému serveru",
-        "syncjob_EXIT_AUTHENTICATION_FAILURE_USER1": "Chybné uživateľské meno alebo heslo",
         "tag_handling": "Zaobchádzanie s označenou poštou",
         "tag_help_example": "Príklad tagu e-mailovej adresy: me<b>+Facebook</b>@example.org",
         "tag_help_explain": "V podadresári: nový podadresár s menom tag-u bude vytvorený nižšie INBOX (\"INBOX/Facebook\").<br>\r\nIn subject: meno štítka bude pridané pred predmet pošty, napríklad: \"[Facebook] My News\".",
@@ -1169,10 +1200,11 @@
         "week": "týždeň",
         "weekly": "Týždenne",
         "weeks": "týždne",
+        "with_app_password": "s heslom aplikácie",
         "year": "rok",
         "years": "rokov",
         "apple_connection_profile_with_app_password": "Nové heslo aplikácie sa vygeneruje a pridá do profilu, takže pri nastavovaní zariadenia nie je potrebné zadávať žiadne heslo. Súbor nezdieľajte, pretože poskytuje úplný prístup k vašej mail schránke.",
-        "change_password_hint_app_passwords": "Vaše konto má {{number_of_app_passwords}} hesiel aplikácií, ktoré nebudú zmenené. Ak ich chcete spravovať, prejdite na kartu Heslá aplikácií.",
+        "change_password_hint_app_passwords": "Vaše konto má %d hesiel aplikácií, ktoré nebudú zmenené. Ak ich chcete spravovať, prejdite na kartu Heslá aplikácií.",
         "direct_protocol_access": "Tento používateľ mailovej schránky má <b>priamy, externý prístup</b> k nasledujúcim protokolom a aplikáciám. Toto nastavenie kontroluje administrátor. Na udelenie prístupu k jednotlivým protokolom a aplikáciám je možné vytvoriť heslá aplikácií.<br>Tlačidlo \"Prihlásenie do webmailu\" poskytuje jednotné prihlásenie do systému SOGo a je vždy k dispozícii."
     },
     "warning": {

data/web/lang/lang.uk-ua.json

@@ -1097,7 +1097,7 @@
         "apple_connection_profile_complete": "Цей профіль включає налаштування IMAP та SMTP, а також CalDAV (календарів) та CardDAV (контактів) для пристрою Apple.",
         "apple_connection_profile_mailonly": "Цей профіль включає лише налаштування IMAP та SMTP для пристрою Apple.",
         "change_password": "Змінити пароль",
-        "change_password_hint_app_passwords": "Ваш обліковий запис містить {{number_of_app_passwords}} паролів додатків, які не змінюватимуться. Щоб керувати ними, перейдіть на вкладку \"Паролі додатків\".",
+        "change_password_hint_app_passwords": "Ваш обліковий запис містить %d паролів додатків, які не змінюватимуться. Щоб керувати ними, перейдіть на вкладку \"Паролі додатків\".",
         "clear_recent_successful_connections": "Очистити історію успішних підключень",
         "create_app_passwd": "Створити новий пароль",
         "create_syncjob": "Створити нове завдання синхронізації",
@@ -1254,7 +1254,7 @@
     },
     "datatables": {
         "decimal": ".",
-        "infoPostFix": "datatables.infoPostFix",
+        "infoPostFix": "",
         "zeroRecords": "Відповідних записів не знайдено",
         "aria": {
             "sortAscending": ": активувати для сортування стовпців за зростанням",

data/web/lang/lang.zh-cn.json

@@ -1042,7 +1042,7 @@
         "apple_connection_profile_mailonly": "此连接描述文件包括提供给 Apple 设备的 IMAP 和 SMTP 配置参数。",
         "apple_connection_profile_with_app_password": "一个新的应用程序密码将会被生成并添加到该配置文件中，因此在设备设置时不需要输入密码。请不要随意分享该文件，因为它包含你的邮箱的完全访问权限。",
         "change_password": "更改密码",
-        "change_password_hint_app_passwords": "你的账户有 {{number_of_app_passwords}} 个应用密码，这些密码将不会被更改。如果需要管理这些密码，请访问应用密码标签。",
+        "change_password_hint_app_passwords": "你的账户有 %d 个应用密码，这些密码将不会被更改。如果需要管理这些密码，请访问应用密码标签。",
         "clear_recent_successful_connections": "清除成功匹配的连接",
         "client_configuration": "显示邮箱客户端和智能手机的配置指南",
         "create_app_passwd": "添加应用密码",

data/web/lang/lang.zh-tw.json

@@ -1036,7 +1036,7 @@
         "apple_connection_profile_mailonly": "此連接描述檔案包括提供給 Apple 裝置的 IMAP 和 SMTP 組態參數。",
         "apple_connection_profile_with_app_password": "應用程式密碼已產生並加入到連接描述檔案中，因此裝置在設定時不需要輸入密碼。請勿分享這個檔案，因為它擁有存取信箱的所有權限。",
         "change_password": "更改密碼",
-        "change_password_hint_app_passwords": "你的帳號有 {{number_of_app_passwords}} 個應用程式密碼不會被更動。要管理這些密碼，請至應用程式密碼分頁。",
+        "change_password_hint_app_passwords": "你的帳號有 %d 個應用程式密碼不會被更動。要管理這些密碼，請至應用程式密碼分頁。",
         "clear_recent_successful_connections": "中斷成功的連線",
         "client_configuration": "顯示電子信箱程式和智慧型手機的設定指南",
         "create_app_passwd": "新增應用程式密碼",

data/web/templates/admin/customize/logo.twig

@@ -0,0 +1,9 @@
+<div class="thumbnail mb-4">
+  <img class="img-thumbnail mb-4{% if dark %} bg-black{% endif %}" src="{{ logo }}" alt="mailcow logo">
+  <div class="caption">
+    <span class="badge fs-5 bg-info">{{ logo_specs.geometry.width }}x{{ logo_specs.geometry.height }} px</span>
+    <span class="badge fs-5 bg-info">{{ logo_specs.mimetype }}</span>
+    <span class="badge fs-5 bg-info">{{ logo_specs.fileSize }}</span>
+  </div>
+</div>
+

data/web/templates/admin/tab-config-admins.twig

@@ -122,8 +122,8 @@
                     </div>
                   </div>
                   <div class="row mb-4">
-                    <div class="offset-sm-2 col-sm-9">
+                    <div class="offset-sm-2 col-sm-9 d-grid d-sm-block">
-                      <button class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-item="cors" data-api-url="edit/cors" data-id="editcors" data-action="edit_selected" href="#"><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
+                      <button class="btn btn-sm btn-xs-lg btn-success" data-item="cors" data-api-url="edit/cors" data-id="editcors" data-action="edit_selected" href="#"><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
                     </div>
                   </div>
                 </form>
@@ -146,7 +146,7 @@
                   <div class="row mb-2">
                     <div class="offset-sm-3 col-sm-9">
                       <label>
-                        <input type="checkbox" name="skip_ip_check" id="skip_ip_check_ro" {% if api.ro.skip_ip_check %}checked{% endif %}> {{ lang.admin.api_skip_ip_check }}
+                        <input type="checkbox" class="form-check-input" name="skip_ip_check" id="skip_ip_check_ro" {% if api.ro.skip_ip_check %}checked{% endif %}> {{ lang.admin.api_skip_ip_check }}
                       </label>
                     </div>
                   </div>
@@ -159,15 +159,15 @@
                   <div class="row mb-2">
                     <div class="offset-sm-3 col-sm-9">
                       <label>
-                        <input type="checkbox" name="active" {% if api.ro.active %}checked{% endif %}> {{ lang.admin.activate_api }}
+                        <input type="checkbox" class="form-check-input" name="active" {% if api.ro.active %}checked{% endif %}> {{ lang.admin.activate_api }}
                       </label>
                     </div>
                   </div>
                   <div class="row mb-2">
                     <div class="offset-sm-3 col-sm-9">
                       <div class="btn-group">
-                        <button class="btn btn-sm btn-xs-half d-block d-sm-inline btn-success" name="admin_api[ro]" type="submit" href="#"><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
+                        <button class="btn btn-sm btn-xs-lg btn-xs-half d-block d-sm-inline btn-success" name="admin_api[ro]" type="submit" href="#"><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
-                        <button class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary admin-ays-dialog" name="admin_api_regen_key[ro]" type="submit" href="#" {% if not api.ro.api_key %}disabled{% endif %}>{{ lang.admin.regen_api_key }}</button>
+                        <button class="btn btn-sm btn-xs-lg btn-xs-half d-block d-sm-inline btn-secondary admin-ays-dialog" name="admin_api_regen_key[ro]" type="submit" href="#" {% if not api.ro.api_key %}disabled{% endif %}>{{ lang.admin.regen_api_key }}</button>
                       </div>
                     </div>
                   </div>
@@ -191,7 +191,7 @@
                   <div class="row mb-2">
                     <div class="offset-sm-3 col-sm-9">
                       <label>
-                        <input type="checkbox" name="skip_ip_check" id="skip_ip_check_rw" {% if api.rw.skip_ip_check %}checked{% endif %}> {{ lang.admin.api_skip_ip_check }}
+                        <input type="checkbox" class="form-check-input" name="skip_ip_check" id="skip_ip_check_rw" {% if api.rw.skip_ip_check %}checked{% endif %}> {{ lang.admin.api_skip_ip_check }}
                       </label>
                     </div>
                   </div>
@@ -204,7 +204,7 @@
                   <div class="row mb-2">
                     <div class="offset-sm-3 col-sm-9">
                       <label>
-                        <input type="checkbox" name="active" {% if api.rw.active %}checked{% endif %}> {{ lang.admin.activate_api }}
+                        <input type="checkbox" class="form-check-input" name="active" {% if api.rw.active %}checked{% endif %}> {{ lang.admin.activate_api }}
                       </label>
                     </div>
                   </div>

data/web/templates/admin/tab-config-customize.twig

@@ -10,22 +10,26 @@
       <legend><i class="bi bi-file-image"></i> {{ lang.admin.change_logo }}</legend><hr />
       <p class="text-muted">{{ lang.admin.logo_info }}</p>
       <form class="form-inline" role="form" method="post" enctype="multipart/form-data">
-        <p>
+        <div class="mb-4">
-          <input class="mb-4" type="file" name="main_logo" accept="image/gif, image/jpeg, image/pjpeg, image/x-png, image/png, image/svg+xml"><br>
+          <label for="main_logo_input" class="form-label">{{ lang.admin.logo_normal_label }}</label>
+          <input class="form-control" id="main_logo_input" type="file" name="main_logo" accept="image/gif, image/jpeg, image/pjpeg, image/x-png, image/png, image/svg+xml">
+        </div>
+        <div class="mb-4">
+          <label for="main_logo_dark_input" class="form-label">{{ lang.admin.logo_dark_label }}</label>
+          <input class="form-control" id="main_logo_dark_input" type="file" name="main_logo_dark" accept="image/gif, image/jpeg, image/pjpeg, image/x-png, image/png, image/svg+xml">
+        </div>
+
         <button name="submit_main_logo" type="submit" class="btn btn-sm d-block d-sm-inline btn-secondary"><i class="bi bi-upload"></i> {{ lang.admin.upload }}</button>
-        </p>
       </form>
-      {% if logo %}
+      {% if logo or logo_dark %}
-        <div class="row">
+        <div class="row mt-4">
           <div class="col-sm-4">
-            <div class="thumbnail">
+            {% if logo %}
-              <img class="img-thumbnail" src="{{ logo }}" alt="mailcow logo">
+              {% include 'admin/customize/logo.twig' %}
-              <div class="caption">
+            {% endif %}
-                <span class="badge fs-5 bg-info">{{ logo_specs.geometry.width }}x{{ logo_specs.geometry.height }} px</span>
+            {% if logo_dark %}
-                <span class="badge fs-5 bg-info">{{ logo_specs.mimetype }}</span>
+              {% include 'admin/customize/logo.twig' with {'logo': logo_dark, 'logo_specs': logo_dark_specs, 'dark': 1} %}
-                <span class="badge fs-5 bg-info">{{ logo_specs.fileSize }}</span>
+            {% endif %}
-              </div>
-            </div>
             <hr>
             <form class="form-inline" role="form" method="post">
               <p><button name="reset_main_logo" type="submit" class="btn btn-sm d-block d-sm-inline btn-secondary">{{ lang.admin.reset_default }}</button></p>
@@ -111,7 +115,7 @@
               </div>
             </div>
             <p><textarea class="form-control" id="ui_announcement_text" name="ui_announcement_text" rows="7">{{ ui_texts.ui_announcement_text }}</textarea></p>
-            <div class="checkbox">
+            <div class="form-check">
               <label>
                 <input type="checkbox" name="ui_announcement_active" class="form-check-input" {% if ui_texts.ui_announcement_active == 1 %}checked{% endif %}> {{ lang.admin.ui_header_announcement_active }}
               </label>

data/web/templates/admin/tab-config-dkim.twig

@@ -20,7 +20,7 @@
       {% for domain, domain_data in dkim_domains %}
         {% if domain_data.dkim %}
           <div class="row collapse show dkim_key_valid">
-            <div class="col-md-1"><input type="checkbox" data-id="dkim" name="multi_select" value="{{ domain }}"></div>
+            <div class="col-md-1"><input type="checkbox" class="form-check-input" data-id="dkim" name="multi_select" value="{{ domain }}"></div>
             <div class="col-md-3">
               <p>{{ lang.admin.domain }}: <strong>{{ domain }}</strong>
               <p class="dkim-label"><span class="badge fs-6 bg-success">{{ lang.admin.dkim_key_valid }}</span></p>
@@ -50,7 +50,7 @@
         {% for alias_domain, alias_domain_data in domain_data.alias_domains %}
           {% if alias_domain_data.dkim %}
             <div class="row collapse in dkim_key_valid">
-              <div class="col-md-1"><input type="checkbox" data-id="dkim" name="multi_select" value="{{ alias_domain }}"></div>
+              <div class="col-md-1"><input type="checkbox" class="form-check-input" data-id="dkim" name="multi_select" value="{{ alias_domain }}"></div>
               <div class="col-md-2 offset-md-1">
                 <p><small>↳ Alias-Domain: <strong>{{ alias_domain }}</strong></small>
                 <p class="dkim-label"><span class="badge fs-6 bg-success">{{ lang.admin.dkim_key_valid }}</span></p>
@@ -78,7 +78,7 @@
       {% endfor %}
       {% for blind, data in dkim_blind_domains|filter(data => data.dkim is not null) %}
         <div class="row collapse in dkim_key_unused">
-          <div class="col-md-1"><input type="checkbox" data-id="dkim" name="multi_select" value="{{ blind }}"></div>
+          <div class="col-md-1"><input type="checkbox" class="form-check-input" data-id="dkim" name="multi_select" value="{{ blind }}"></div>
           <div class="col-md-3">
             <p>{{ lang.admin.domain }}: <strong>{{ blind }}</strong>
             <p class="dkim-label"><span class="badge fs-6 bg-warning">{{ lang.admin.dkim_key_unused }}</span></p>
@@ -114,7 +114,7 @@
         </div>
         <div class="row mb-4">
           <div class="col-12 col-md-6 col-lg-4 col-xl-3">
-            <select data-style="btn btn-secondary btn-sm" class="form-control" id="key_size" name="key_size" title="{{ lang.admin.dkim_key_length }}" required>
+            <select data-style="btn btn-light btn-sm" class="form-control" id="key_size" name="key_size" title="{{ lang.admin.dkim_key_length }}" required>
               <option data-subtext="bits">1024</option>
               <option data-subtext="bits">2048</option>
             </select>
@@ -143,7 +143,7 @@
           </div>
           <div class="mb-2">
             <label>
-              <input type="checkbox" name="overwrite_existing" value="1"> {{ lang.admin.dkim_overwrite_key }}
+              <input type="checkbox" class="form-check-input" name="overwrite_existing" value="1"> {{ lang.admin.dkim_overwrite_key }}
             </label>
           </div>
           <button class="btn btn-sm d-block d-sm-inline btn-secondary" data-action="add_item" data-id="dkim_import" data-api-url='add/dkim_import' data-api-attr='{}' href="#"><i class="bi bi-plus-lg"></i> {{ lang.admin.import }}</button>
@@ -159,7 +159,7 @@
           <div class="row mb-2">
             <label class="control-label col-sm-2 text-sm-end" for="from_domain">{{ lang.admin.dkim_from }}:</label>
             <div class="col-sm-10 col-md-6 col-lg-4 col-xl-3">
-              <select data-style="btn btn-secondary btn-sm"
+              <select data-style="btn btn-light btn-sm"
                       data-live-search="true"
                       data-id="dkim_duplicate"
                       title="{{ lang.admin.dkim_from_title }}"
@@ -175,7 +175,7 @@
             <div class="col-sm-10 col-md-6 col-lg-4 col-xl-3">
               <select
                 data-live-search="true"
-                data-style="btn btn-secondary btn-sm"
+                data-style="btn btn-light btn-sm"
                 data-id="dkim_duplicate"
                 title="{{ lang.admin.dkim_to_title }}"
                 name="to_domain" id="to_domain" class="full-width-select form-control" multiple required>

data/web/templates/admin/tab-config-f2b.twig

@@ -92,28 +92,29 @@
       {% endif %}
       {% for active_ban in f2b_data.active_bans %}
         <p>
-          <span class="badge fs-5 bg-info py-0">
+          <span class="badge fs-7 bg-info d-block d-sm-inline-block">
             <i class="bi bi-funnel-fill"></i>
-            <a href="https://bgp.he.net/ip/{{ active_ban.ip }}" target="_blank" style="color:white">
+            <a href="https://bgp.he.net/ip/{{ active_ban.ip }}" target="_blank">
               {{ active_ban.network }}
             </a>
-            ({{ active_ban.banned_until }}) -
+            ({{ active_ban.banned_until }})
+          </span>
+          <span class="d-none d-sm-inline"> - </span>
             {% if active_ban.queued_for_unban == 0 %}
-            <a class="btn btn-lg btn-link p-0 text-info" data-action="edit_selected" data-item="{{ active_ban.network }}" data-id="f2b-quick" data-api-url='edit/fail2ban' data-api-attr='{"action":"unban"}' href="#">[{{ lang.admin.queue_unban }}]</a>
+            <a data-action="edit_selected" data-item="{{ active_ban.network }}" data-id="f2b-quick" data-api-url='edit/fail2ban' data-api-attr='{"action":"unban"}' href="#">[{{ lang.admin.queue_unban }}]</a>
-            <a class="btn btn-lg btn-link p-0 text-info" data-action="edit_selected" data-item="{{ active_ban.network }}" data-id="f2b-quick" data-api-url='edit/fail2ban' data-api-attr='{"action":"whitelist"}' href="#">[whitelist]</a>
+            <a data-action="edit_selected" data-item="{{ active_ban.network }}" data-id="f2b-quick" data-api-url='edit/fail2ban' data-api-attr='{"action":"whitelist"}' href="#">[whitelist]</a>
-            <a class="btn btn-lg btn-link p-0 text-info" data-action="edit_selected" data-item="{{ active_ban.network }}" data-id="f2b-quick" data-api-url='edit/fail2ban' data-api-attr='{"action":"blacklist"}' href="#">[blacklist (<b>needs restart</b>)]</a>
+            <a data-action="edit_selected" data-item="{{ active_ban.network }}" data-id="f2b-quick" data-api-url='edit/fail2ban' data-api-attr='{"action":"blacklist"}' href="#">[blacklist (<b>needs restart</b>)]</a>
             {% else %}
             <i>{{ lang.admin.unban_pending }}</i>
             {% endif %}
-          </span>
         </p>
       {% endfor %}
       <hr>
       {% for perm_ban in f2b_data.perm_bans %}
         <p>
-          <span class="badge fs-5 bg-danger" style="padding: 0.1em 0.4em 0.1em;">
+          <span class="badge fs-7 bg-danger d-block d-sm-inline-block">
             <i class="bi bi-funnel-fill"></i>
-            <a href="https://bgp.he.net/ip/{{ perm_ban.ip }}" target="_blank" style="color:white">
+            <a href="https://bgp.he.net/ip/{{ perm_ban.ip }}" target="_blank">
               {{ perm_ban.network }}
             </a>
           </span>

data/web/templates/admin/tab-config-fwdhosts.twig

@@ -9,7 +9,7 @@
     <div id="collapse-tab-config-fwdhosts" class="card-body collapse" data-bs-parent="#admin-content">
       <p style="margin-bottom:40px">{{ lang.admin.forwarding_hosts_hint }}</p>
       <table id="forwardinghoststable" class="table table-striped dt-responsive w-100"></table>
-      <div class="mass-actions-admin">
+      <div class="mass-actions-admin mb-4">
         <div class="btn-group btn-group-sm">
           <button type="button" id="toggle_multi_select_all" data-id="fwdhosts" class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary">{{ lang.mailbox.toggle_all }}</button>
           <a class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>

data/web/templates/admin/tab-config-password-policy.twig

@@ -21,7 +21,7 @@
             <div class="row mb-2">
               <div class="offset-sm-3 col-sm-9">
                 <label>
-                  <input type="checkbox" name="{{ name }}" id="{{ name }}" value="1" {% if value == 1 %}checked{% endif %}> {{ lang.admin['password_policy_'~name] }}
+                  <input type="checkbox" class="form-check-input" name="{{ name }}" id="{{ name }}" value="1" {% if value == 1 %}checked{% endif %}> {{ lang.admin['password_policy_'~name] }}
                 </label>
               </div>
             </div>

data/web/templates/admin/tab-config-rsettings.twig

@@ -44,7 +44,7 @@
                   <p class="text-muted">{{ lang.admin.rsetting_no_selection }}</p>
                 </div>
                 {% for rsetting in rsettings %}
-                  <div id="settings_tab{{ rsetting.details.id }}" class="tab-pane">
+                  <div id="settings_tab{{ rsetting.details.id }}" class="tab-pane rsettings">
                     <form class="form" data-id="rsettings" role="form" method="post">
                       <input type="hidden" name="active" value="0">
                       <div>
@@ -57,11 +57,13 @@
                       </div>
                       <div class="mt-4 mb-2">
                         <label>
-                          <input type="checkbox" name="active" value="1" {% if rsetting.details.active %}checked{% endif %}> {{ lang.admin.active }}
+                          <input type="checkbox" class="form-check-input" name="active" value="1" {% if rsetting.details.active %}checked{% endif %}> {{ lang.admin.active }}
                         </label>
                       </div>
-                      <button class="btn btn-sm btn-success" data-action="edit_selected" data-item="{{ rsetting.details.id }}" data-id="rsettings" data-api-url='edit/rsetting' data-api-attr='{}' href="#"><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
+                      <div class="btn-group">
-                      <button class="btn btn-sm btn-danger" data-action="delete_selected" data-item="{{ rsetting.details.id }}" data-id="rsettings" data-api-url="delete/rsetting" data-api-attr='{}' href="#">{{ lang.admin.remove }}</button>
+                      <button class="btn btn-sm btn-xs-lg btn-success" data-action="edit_selected" data-item="{{ rsetting.details.id }}" data-id="rsettings" data-api-url='edit/rsetting' data-api-attr='{}' href="#"><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
+                      <button class="btn btn-sm btn-xs-lg btn-danger" data-action="delete_selected" data-item="{{ rsetting.details.id }}" data-id="rsettings" data-api-url="delete/rsetting" data-api-attr='{}' href="#">{{ lang.admin.remove }}</button>
+                      </div>
                     </form>
                   </div>
                 {% endfor %}

data/web/templates/admin/tab-globalfilter-regex.twig

@@ -12,7 +12,7 @@
         <div class="row">
           <div class="offset-sm-2 col-sm-10">
             <label>
-              <input type="checkbox" id="show_rspamd_global_filters"> {{ lang.admin.rspamd_global_filters_agree }}
+              <input type="checkbox" class="form-check-input" id="show_rspamd_global_filters"> {{ lang.admin.rspamd_global_filters_agree }}
             </label>
           </div>
         </div>

data/web/templates/admin/tab-routing.twig

@@ -55,7 +55,7 @@
     <div id="collapse-tab-maps" class="card-body collapse" data-bs-parent="#admin-content">
       <p style="margin-bottom:40px">{{ lang.admin.transports_hint|raw }}</p>
       <table id="transportstable" class="table table-striped dt-responsive w-100"></table>
-      <div class="mass-actions-admin">
+      <div class="mass-actions-admin mb-4">
         <div class="btn-group btn-group-sm">
           <button type="button" id="toggle_multi_select_all" data-id="transports" class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary">{{ lang.mailbox.toggle_all }}</button>
           <a class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
@@ -90,12 +90,12 @@
             </div>
             <div class="mb-2">
               <label>
-                <input type="checkbox" name="is_mx_based" value="1"> {{ lang.admin.lookup_mx|raw }}
+                <input type="checkbox" class="form-check-input" name="is_mx_based" value="1"> {{ lang.admin.lookup_mx|raw }}
               </label>
             </div>
             <div class="mb-4">
               <label>
-                <input type="checkbox" name="active" value="1"> {{ lang.admin.active }}
+                <input type="checkbox" class="form-check-input" name="active" value="1"> {{ lang.admin.active }}
               </label>
             </div>
             <p class="text-muted">{{ lang.admin.credentials_transport_warning|raw }}</p>

data/web/templates/admin/tab-sys-mails.twig

@@ -60,7 +60,7 @@
         <div class="row mb-2">
           <div class="offset-sm-2 col-sm-10">
             <label>
-              <input type="checkbox" id="mass_disarm"> {{ lang.admin.activate_send }}
+              <input type="checkbox" class="form-check-input" id="mass_disarm"> {{ lang.admin.activate_send }}
             </label>
           </div>
         </div>

data/web/templates/base.twig

@@ -31,7 +31,10 @@
 {% block navbar %}
 <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-fixed-top p-0">
   <div class="container-fluid">
-    <a class="navbar-brand" href="/"><img alt="mailcow-logo" src="{{ logo|default('/img/cow_mailcow.svg') }}"></a>
+    <a class="navbar-brand" href="/">
+      <img class="main-logo" alt="mailcow-logo" src="{{ logo|default('/img/cow_mailcow.svg') }}">
+      <img class="main-logo-dark" alt="mailcow-logo-dark" src="{{ logo_dark|default('/img/cow_mailcow.svg') }}">
+    </a>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
       <i class="bi bi-list fs-3"></i>
     </button>

data/web/templates/debug.twig

@@ -37,7 +37,8 @@
           <div class="card-body">
             <div class="row">
               <div class="col-sm-12 col-md-4 d-flex flex-column">
-                <img class="img-responsive my-auto m-auto" alt="mailcow-logo" style="max-width: 85%; max-height: 85%;" src="{{ logo|default('/img/cow_mailcow.svg') }}">
+                <img class="main-logo img-responsive my-auto m-auto" alt="mailcow-logo" style="max-width: 85%; max-height: 85%;" src="{{ logo|default('/img/cow_mailcow.svg') }}">
+                <img class="main-logo-dark img-responsive my-auto m-auto" alt="mailcow-logo-dark" style="max-width: 85%; max-height: 85%;" src="{{ logo_dark|default('/img/cow_mailcow.svg') }}">
               </div>
               <div class="col-sm-12 col-md-8">
                 <div class="table-responsive" style="margin-top: 10px;">

data/web/templates/edit/admin.twig

@@ -27,15 +27,15 @@
   </div>
   <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
-      <div class="checkbox">
+      <div class="form-check">
-        <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
+        <label><input type="checkbox" class="form-check-input" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
   <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
-      <div class="checkbox">
+      <div class="form-check">
-        <label><input type="checkbox" value="1" name="disable_tfa"> {{ lang.tfa.disable_tfa }}</label>
+        <label><input type="checkbox" class="form-check-input" value="1" name="disable_tfa"> {{ lang.tfa.disable_tfa }}</label>
       </div>
     </div>
   </div>

data/web/templates/edit/alias.twig

@@ -19,19 +19,19 @@
     <label class="control-label col-sm-2" for="goto">{{ lang.edit.target_address|raw }}</label>
     <div class="col-sm-10">
       <textarea id="textarea_alias_goto" class="form-control mb-4" autocapitalize="none" autocorrect="off" rows="10" id="goto" name="goto" required>{{ goto|replace({',': ', '}) }}</textarea>
-      <div class="checkbox">
+      <div class="form-check">
-        <label><input class="goto_checkbox" type="checkbox" value="1" name="goto_null"{% if result.goto == 'null@localhost' %} checked{% endif %}> {{ lang.add.goto_null }}</label>
+        <label><input class="form-check-input goto_checkbox" type="checkbox" value="1" name="goto_null"{% if result.goto == 'null@localhost' %} checked{% endif %}> {{ lang.add.goto_null }}</label>
       </div>
-      <div class="checkbox">
+      <div class="form-check">
-        <label><input class="goto_checkbox" type="checkbox" value="1" name="goto_spam"{% if result.goto == 'spam@localhost' %} checked{% endif %}> {{ lang.add.goto_spam|raw }}</label>
+        <label><input class="form-check-input goto_checkbox" type="checkbox" value="1" name="goto_spam"{% if result.goto == 'spam@localhost' %} checked{% endif %}> {{ lang.add.goto_spam|raw }}</label>
       </div>
-      <div class="checkbox">
+      <div class="form-check">
-        <label><input class="goto_checkbox" type="checkbox" value="1" name="goto_ham"{% if result.goto == 'ham@localhost' %} checked{% endif %}> {{ lang.add.goto_ham|raw }}</label>
+        <label><input class="form-check-input goto_checkbox" type="checkbox" value="1" name="goto_ham"{% if result.goto == 'ham@localhost' %} checked{% endif %}> {{ lang.add.goto_ham|raw }}</label>
       </div>
       {% if not skip_sogo %}
       <hr>
-      <div class="checkbox">
+      <div class="form-check">
-        <label><input type="checkbox" value="1" name="sogo_visible"{% if result.sogo_visible == '1' %} checked{% endif %}> {{ lang.edit.sogo_visible }}</label>
+        <label><input type="checkbox" class="form-check-input" value="1" name="sogo_visible"{% if result.sogo_visible == '1' %} checked{% endif %}> {{ lang.edit.sogo_visible }}</label>
       </div>
       <p class="text-muted">{{ lang.edit.sogo_visible_info }}</p>
       {% endif %}
@@ -53,8 +53,8 @@
   <hr>
   <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
-      <div class="checkbox">
+      <div class="form-check">
-        <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
+        <label><input type="checkbox" class="form-check-input" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>

data/web/templates/edit/aliasdomain.twig

@@ -2,7 +2,7 @@
 
 {% block inner_content %}
 {% if result %}
-<h4>{{ lang.edit.edit_alias_domain }}</h4>
+<h4 class="mb-4">{{ lang.edit.edit_alias_domain }}</h4>
 <form class="form-horizontal" data-id="editaliasdomain" role="form" method="post">
   <input type="hidden" value="0" name="active">
   <div class="row mb-2">
@@ -17,8 +17,8 @@
   </div>
   <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
-      <div class="checkbox">
+      <div class="form-check">
-        <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
+        <label><input type="checkbox" class="form-check-input" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
@@ -31,17 +31,19 @@
 <hr>
 <form data-id="domratelimit" class="form-inline well" method="post">
   <label class="control-label mb-2">{{ lang.acl.ratelimit }}</label>
-  <input name="rl_value" type="number" value="{{ rl.value }}" autocomplete="off" class="form-control mb-4" placeholder="{{ lang.ratelimit.disabled }}">
+  <div class="input-group mb-4">
+    <input name="rl_value" type="number" value="{{ rl.value }}" autocomplete="off" class="form-control" placeholder="{{ lang.ratelimit.disabled }}">
     <select name="rl_frame" class="form-control">
     {% include 'mailbox/rl-frame.twig' %}
     </select>
+  </div>
   <button class="btn btn-xs-lg d-block d-sm-inline btn-secondary" data-action="edit_selected" data-id="domratelimit" data-item="{{ alias_domain }}" data-api-url='edit/rl-domain' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
 </form>
 {% if dkim %}
 <hr>
 <div class="row">
   <div class="col-12 col-sm-2">
-    <p>Domain: <strong>{{ result.alias_domain }}</strong> ({{ dkim.dkim_selector }}._domainkey)</p>
+    <p>{{ lang.add.domain }}: <strong>{{ result.alias_domain }}</strong> ({{ dkim.dkim_selector }}._domainkey)</p>
   </div>
   <div class="col-12 col-sm-10">
     <pre class="p-2">{{ dkim.dkim_txt }}</pre>

data/web/templates/edit/app-passwd.twig

@@ -26,8 +26,8 @@
   </div>
   <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
-      <div class="checkbox">
+      <div class="form-check">
-        <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
+        <label><input type="checkbox" class="form-check-input" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>

data/web/templates/edit/bcc.twig

@@ -24,8 +24,8 @@
   </div>
   <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
-      <div class="checkbox">
+      <div class="form-check">
-        <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
+        <label><input type="checkbox" class="form-check-input" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>

data/web/templates/edit/domain-templates.twig

@@ -64,16 +64,16 @@
     </div>
     <div class="row">
       <div class="offset-sm-2 col-sm-10">
-        <div class="checkbox">
+        <div class="form-check">
-          <label><input type="checkbox" value="1" name="gal"{% if template.attributes.gal == '1' %} checked{% endif %}> {{ lang.edit.gal }}</label>
+          <label><input type="checkbox" class="form-check-input" value="1" name="gal"{% if template.attributes.gal == '1' %} checked{% endif %}> {{ lang.edit.gal }}</label>
           <small class="text-muted">{{ lang.edit.gal_info|raw }}</small>
         </div>
       </div>
     </div>
     <div class="row mb-2">
       <div class="offset-sm-2 col-sm-10">
-        <div class="checkbox">
+        <div class="form-check">
-          <label><input type="checkbox" value="1" name="active"{% if template.attributes.active == '1' %} checked{% endif %}{% if mailcow_cc_role != 'admin' %} disabled{% endif %}> {{ lang.edit.active }}</label>
+          <label><input type="checkbox" class="form-check-input" value="1" name="active"{% if template.attributes.active == '1' %} checked{% endif %}{% if mailcow_cc_role != 'admin' %} disabled{% endif %}> {{ lang.edit.active }}</label>
         </div>
       </div>
     </div>
@@ -81,15 +81,14 @@
     <div class="row">
       <label class="control-label col-sm-2">{{ lang.edit.ratelimit }}</label>
       <div class="col-sm-10">
+        <div class="input-group">
           <input name="rl_value" type="number" value="{{ template.attributes.rl_value }}" autocomplete="off" class="form-control mb-4" placeholder="{{ lang.ratelimit.disabled }}">
           <select name="rl_frame" class="form-control">
-          <option value="s"{% if template.attributes.rl_frame == 's' %} selected{% endif %}>{{ lang.ratelimit.second }}</option>
+          {% include 'mailbox/rl-frame.twig' %}
-          <option value="m"{% if template.attributes.rl_frame == 'm' %} selected{% endif %}>{{ lang.ratelimit.minute }}</option>
-          <option value="h"{% if template.attributes.rl_frame == 'h' %} selected{% endif %}>{{ lang.ratelimit.hour }}</option>
-          <option value="d"{% if template.attributes.rl_frame == 'd' %} selected{% endif %}>{{ lang.ratelimit.day }}</option>
           </select>
         </div>
       </div>
+    </div>
     {% endif %}
     <hr>
     <div class="row mb-2">
@@ -101,7 +100,7 @@
     <div class="row mb-4">
       <label class="control-label col-sm-2" for="key_size">{{ lang.admin.dkim_key_length }}</label>
       <div class="col-sm-10">
-        <select data-style="btn btn-secondary btn-sm" class="form-control" id="key_size" name="key_size">
+        <select data-style="btn btn-light" class="form-control" id="key_size" name="key_size">
           <option value="1024" data-subtext="bits" {% if template.attributes.key_size == 1024 %} selected{% endif %}>1024</option>
           <option value="2048" data-subtext="bits" {% if template.attributes.key_size == 2048 %} selected{% endif %}>2048</option>
         </select>
@@ -111,12 +110,12 @@
     <div class="row mb-2">
       <label class="control-label col-sm-2">{{ lang.edit.backup_mx_options }}</label>
       <div class="col-sm-10">
-        <div class="checkbox">
+        <div class="form-check">
-          <label><input type="checkbox" value="1" name="backupmx"{% if template.attributes.backupmx == '1' %} checked{% endif %}> {{ lang.edit.relay_domain }}</label>
+          <label><input type="checkbox" class="form-check-input" value="1" name="backupmx"{% if template.attributes.backupmx == '1' %} checked{% endif %}> {{ lang.edit.relay_domain }}</label>
           <br>
-          <label><input type="checkbox" value="1" name="relay_all_recipients"{% if template.attributes.relay_all_recipients == '1' %} checked{% endif %}> {{ lang.edit.relay_all }}</label>
+          <label><input type="checkbox" class="form-check-input" value="1" name="relay_all_recipients"{% if template.attributes.relay_all_recipients == '1' %} checked{% endif %}> {{ lang.edit.relay_all }}</label>
           <p>{{ lang.edit.relay_all_info|raw }}</p>
-          <label><input type="checkbox" value="1" name="relay_unknown_only"{% if template.attributes.relay_unknown_only == '1' %} checked{% endif %}> {{ lang.edit.relay_unknown_only }}</label>
+          <label><input type="checkbox" class="form-check-input" value="1" name="relay_unknown_only"{% if template.attributes.relay_unknown_only == '1' %} checked{% endif %}> {{ lang.edit.relay_unknown_only }}</label>
           <br>
           <p>{{ lang.edit.relay_transport_info|raw }}</p>
         </div>

data/web/templates/edit/domain.twig

@@ -2,15 +2,24 @@
 
 {% block inner_content %}
 {% if result %}
+<div id="domain-content" class="responsive-tabs">
     <ul class="nav nav-tabs" role="tablist">
       <li role="presentation" class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#dedit">{{ lang.edit.domain }}</button></li>
       <li role="presentation" class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#dratelimit">{{ lang.edit.ratelimit }}</button></li>
       <li role="presentation" class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#dspamfilter">{{ lang.edit.spam_filter }}</button></li>
       <li role="presentation" class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#dqwbcc">{{ lang.edit.quota_warning_bcc }}</button></li>
+      <li role="presentation" class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#dfooter">{{ lang.edit.domain_footer }}</button></li>
     </ul>
-<hr>
+    <hr class="d-none d-md-block">
     <div class="tab-content">
       <div id="dedit" class="tab-pane fade show active" role="tabpanel" aria-labelledby="domain-edit">
+        <div class="card mb-4">
+            <div class="card-header d-flex d-md-none fs-5">
+              <button class="btn flex-grow-1 text-start" data-bs-target="#collapse-tab-dedit" data-bs-toggle="collapse" aria-controls="collapse-tab-dedit">
+                {{ lang.edit.domain }} <span class="badge bg-info table-lines"></span>
+              </button>
+            </div>
+            <div id="collapse-tab-dedit" class="card-body collapse show" data-bs-parent="#domain-content">
                 <form data-id="editdomain" class="form-horizontal" role="form" method="post">
                   <input type="hidden" value="0" name="active">
                   <input type="hidden" value="0" name="backupmx">
@@ -91,12 +100,12 @@
                   <div class="row mb-2">
                     <label class="control-label col-sm-2">{{ lang.edit.backup_mx_options }}</label>
                     <div class="col-sm-10">
-          <div class="checkbox">
+                      <div class="form-check">
-            <label><input type="checkbox" value="1" name="backupmx"{% if result.backupmx == '1' %} checked{% endif %}> {{ lang.edit.relay_domain }}</label>
+                        <label><input type="checkbox" class="form-check-input" value="1" name="backupmx"{% if result.backupmx == '1' %} checked{% endif %}> {{ lang.edit.relay_domain }}</label>
                         <br>
-            <label><input type="checkbox" value="1" name="relay_all_recipients"{% if result.relay_all_recipients == '1' %} checked{% endif %}> {{ lang.edit.relay_all }}</label>
+                        <label><input type="checkbox" class="form-check-input" value="1" name="relay_all_recipients"{% if result.relay_all_recipients == '1' %} checked{% endif %}> {{ lang.edit.relay_all }}</label>
                         <p>{{ lang.edit.relay_all_info|raw }}</p>
-            <label><input type="checkbox" value="1" name="relay_unknown_only"{% if result.relay_unknown_only == '1' %} checked{% endif %}> {{ lang.edit.relay_unknown_only }}</label>
+                        <label><input type="checkbox" class="form-check-input" value="1" name="relay_unknown_only"{% if result.relay_unknown_only == '1' %} checked{% endif %}> {{ lang.edit.relay_unknown_only }}</label>
                         <br>
                         <p>{{ lang.edit.relay_transport_info|raw }}</p>
                         <hr style="margin:25px 0px 0px 0px">
@@ -106,8 +115,8 @@
                   {% endif %}
                   <div class="row">
                     <div class="offset-sm-2 col-sm-10">
-          <div class="checkbox">
+                      <div class="form-check">
-            <label><input type="checkbox" value="1" name="gal"{% if result.gal == '1' %} checked{% endif %}> {{ lang.edit.gal }}</label>
+                        <label><input type="checkbox" class="form-check-input" value="1" name="gal"{% if result.gal == '1' %} checked{% endif %}> {{ lang.edit.gal }}</label>
                         <small class="text-muted">{{ lang.edit.gal_info|raw }}</small>
                       </div>
                     </div>
@@ -115,8 +124,8 @@
                   <hr>
                   <div class="row mb-2">
                     <div class="offset-sm-2 col-sm-10">
-          <div class="checkbox">
+                      <div class="form-check">
-            <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}{% if mailcow_cc_role != 'admin' %} disabled{% endif %}> {{ lang.edit.active }}</label>
+                        <label><input type="checkbox" class="form-check-input" value="1" name="active"{% if result.active == '1' %} checked{% endif %}{% if mailcow_cc_role != 'admin' %} disabled{% endif %}> {{ lang.edit.active }}</label>
                       </div>
                     </div>
                   </div>
@@ -136,7 +145,7 @@
                 <hr>
                 <div class="row">
                   <div class="col-12 col-sm-2">
-        <p>Domain: <strong>{{ result.domain_name }}</strong> ({{ dkim.dkim_selector }}._domainkey)</p>
+                    <p>{{ lang.add.domain }}: <strong>{{ result.domain_name }}</strong> ({{ dkim.dkim_selector }}._domainkey)</p>
                   </div>
                   <div class="col-12 col-sm-10">
                     <pre class="p-2">{{ dkim.dkim_txt }}</pre>
@@ -144,21 +153,45 @@
                 </div>
                 {% endif %}
             </div>
+        </div>
+      </div>
       <div id="dratelimit" class="tab-pane fade" role="tabpanel" aria-labelledby="domain-ratelimit">
-    <form data-id="domratelimit" class="form-inline well" method="post">
+        <div class="card mb-4">
-      <div class="row">
+            <div class="card-header d-flex d-md-none fs-5">
-        <div class="col-12">
+              <button class="btn flex-grow-1 text-start" data-bs-target="#collapse-tab-ratelimit" data-bs-toggle="collapse" aria-controls="collapse-tab-ratelimit">
-          <label class="control-label mb-2">{{ lang.edit.ratelimit }}</label>
+                {{ lang.edit.ratelimit }} <span class="badge bg-info table-lines"></span>
-          <input name="rl_value" type="number" value="{{ rl.value }}" autocomplete="off" class="form-control mb-4" placeholder="{{ lang.ratelimit.disabled }}">
+              </button>
+            </div>
+            <div id="collapse-tab-ratelimit" class="card-body collapse" data-bs-parent="#domain-content">
+                <form data-id="domratelimit" class="well" method="post">
+                  <div class="row mb-2">
+                    <label class="control-label col-sm-2">{{ lang.edit.ratelimit }}</label>
+                    <div class="col-sm-10">
+                      <div class="input-group">
+                        <input name="rl_value" type="number" value="{{ rl.value }}" autocomplete="off" class="form-control placeholder="{{ lang.ratelimit.disabled }}">
                         <select name="rl_frame" class="form-control">
                         {% include 'mailbox/rl-frame.twig' %}
                         </select>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="row mb-2">
+                    <div class="offset-sm-2 col-sm-10">
                       <button data-acl="{{ acl.ratelimit }}" class="btn btn-xs-lg d-block d-sm-inline btn-secondary" data-action="edit_selected" data-id="domratelimit" data-item="{{ domain }}" data-api-url='edit/rl-domain' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
                     </div>
                   </div>
                 </form>
             </div>
+        </div>
+      </div>
       <div id="dspamfilter" class="tab-pane fade" role="tabpanel" aria-labelledby="domain-spamfilter">
+        <div class="card mb-4">
+            <div class="card-header d-flex d-md-none fs-5">
+              <button class="btn flex-grow-1 text-start" data-bs-target="#collapse-tab-spamfilter" data-bs-toggle="collapse" aria-controls="collapse-tab-spamfilter">
+                {{ lang.edit.spam_filter }} <span class="badge bg-info table-lines"></span>
+              </button>
+            </div>
+            <div id="collapse-tab-spamfilter" class="card-body collapse" data-bs-parent="#domain-content">
                 <div class="row">
                   <div class="col-sm-6">
                     <h4>{{ lang.user.spamfilter_wl }}</h4>
@@ -166,9 +199,7 @@
                     <form class="form-inline mb-4" data-id="add_wl_policy_domain">
                       <div class="input-group" data-acl="{{ acl.spam_policy }}">
                         <input type="text" class="form-control" name="object_from" placeholder="*@example.org" required>
-            <span class="input-group-btn">
                         <button class="btn btn-secondary" data-action="add_item" data-id="add_wl_policy_domain" data-api-url='add/domain-policy' data-api-attr='{"domain":"{{ domain }}","object_list":"wl"}' href="#">{{ lang.user.spamfilter_table_add }}</button>
-                    </span>
                       </div>
                     </form>
                     <table id="wl_policy_domain_table" class="table table-striped dt-responsive w-100"></table>
@@ -185,9 +216,7 @@
                     <form class="form-inline mb-4" data-id="add_bl_policy_domain">
                       <div class="input-group" data-acl="{{ acl.spam_policy }}">
                         <input type="text" class="form-control" name="object_from" placeholder="*@example.org" required>
-            <span class="input-group-btn">
                         <button class="btn btn-secondary" data-action="add_item" data-id="add_bl_policy_domain" data-api-url='add/domain-policy' data-api-attr='{"domain":"{{ domain }}","object_list":"bl"}' href="#">{{ lang.user.spamfilter_table_add }}</button>
-                    </span>
                       </div>
                     </form>
                     <table id="bl_policy_domain_table" class="table table-striped dt-responsive w-100"></table>
@@ -200,7 +229,16 @@
                   </div>
                 </div>
             </div>
+        </div>
+      </div>
       <div id="dqwbcc" class="tab-pane fade" role="tabpanel" aria-labelledby="domain-qwbcc">
+        <div class="card mb-4">
+            <div class="card-header d-flex d-md-none fs-5">
+              <button class="btn flex-grow-1 text-start" data-bs-target="#collapse-tab-qwbcc" data-bs-toggle="collapse" aria-controls="collapse-tab-qwbcc">
+                {{ lang.edit.quota_warning_bcc }} <span class="badge bg-info table-lines"></span>
+              </button>
+            </div>
+            <div id="collapse-tab-qwbcc" class="card-body collapse" data-bs-parent="#domain-content">
                 <div class="row">
                   <div class="col-sm-12">
                     <h4>{{ lang.edit.quota_warning_bcc }}</h4>
@@ -215,8 +253,8 @@
                       </div>
                       <div class="row mb-4">
                         <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
+                          <div class="form-check">
-                <label><input type="checkbox" value="1" name="active"{% if quota_notification_bcc.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
+                            <label><input type="checkbox" class="form-check-input" value="1" name="active"{% if quota_notification_bcc.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
                           </div>
                         </div>
                       </div>
@@ -230,6 +268,50 @@
                 </div>
             </div>
         </div>
+      </div>
+      <div id="dfooter" class="tab-pane fade" role="tabpanel" aria-labelledby="domain-footer">
+        <div class="card mb-4">
+            <div class="card-header d-flex d-md-none fs-5">
+              <button class="btn flex-grow-1 text-start" data-bs-target="#collapse-tab-footer" data-bs-toggle="collapse" aria-controls="collapse-tab-footer">
+                {{ lang.edit.domain_footer }} <span class="badge bg-info table-lines"></span>
+              </button>
+            </div>
+            <div id="collapse-tab-footer" class="card-body collapse" data-bs-parent="#domain-content">
+                <div class="row">
+                  <div class="col-sm-12">
+                    <h4>{{ lang.edit.domain_footer }}</h4>
+                    <p>{{ lang.edit.domain_footer_info|raw }}</p>
+                    <pre>{{ lang.edit.domain_footer_info_vars.auth_user }}
+{{ lang.edit.domain_footer_info_vars.from_user }}
+{{ lang.edit.domain_footer_info_vars.from_name }}
+{{ lang.edit.domain_footer_info_vars.from_addr }}
+{{ lang.edit.domain_footer_info_vars.from_domain }}</pre>
+                    <form class="form-horizontal mt-4" data-id="domain_footer">
+                      <div class="row mb-2">
+                        <label class="control-label col-sm-2" for="domain_footer_html">{{ lang.edit.domain_footer_html }}:</label>
+                        <div class="col-sm-10">
+                          <textarea spellcheck="false" autocorrect="off" autocapitalize="none" class="form-control" rows="10" id="domain_footer_html" name="footer_html">{{ domain_footer.html }}</textarea>
+                        </div>
+                      </div>
+                      <div class="row mb-4">
+                        <label class="control-label col-sm-2" for="domain_footer_plain">{{ lang.edit.domain_footer_plain }}:</label>
+                        <div class="col-sm-10">
+                          <textarea spellcheck="false" autocorrect="off" autocapitalize="none" class="form-control" rows="10" id="domain_footer_plain" name="footer_plain">{{ domain_footer.plain }}</textarea>
+                        </div>
+                      </div>
+                      <div class="row">
+                        <div class="offset-sm-2 col-sm-10">
+                          <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="domain_footer" data-item="domain_footer" data-api-url='edit/domain-wide-footer' data-api-attr='{"domain":"{{ domain }}"}' href="#">{{ lang.edit.save }}</button>
+                        </div>
+                      </div>
+                    </form>
+                  </div>
+                </div>
+            </div>
+        </div>
+      </div>
+    </div>
+</div>
 {% else %}
   {{ parent() }}
 {% endif %}

data/web/templates/edit/domainadmin.twig

@@ -40,15 +40,15 @@
   </div>
   <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
-      <div class="checkbox">
+      <div class="form-check">
-        <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
+        <label><input type="checkbox" class="form-check-input" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
   <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
-      <div class="checkbox">
+      <div class="form-check">
-        <label><input type="checkbox" value="1" name="disable_tfa"> {{ lang.tfa.disable_tfa }}</label>
+        <label><input type="checkbox" class="form-check-input" value="1" name="disable_tfa"> {{ lang.tfa.disable_tfa }}</label>
       </div>
     </div>
   </div>

data/web/templates/edit/filter.twig

@@ -28,8 +28,8 @@
   </div>
   <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
-      <div class="checkbox">
+      <div class="form-check">
-        <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
+        <label><input type="checkbox" class="form-check-input" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>

data/web/templates/edit/mailbox-templates.twig

@@ -41,16 +41,16 @@
       <div class="col-sm-10">
         <div class="btn-group">
           <input type="radio" class="btn-check" name="quarantine_notification" id="quarantine_notification_never" autocomplete="off" value="never" {% if template.attributes.quarantine_notification == 'never' %}checked{% endif %}>
-          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_notification_never">{{ lang.user.never }}</label>
+          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="quarantine_notification_never">{{ lang.user.never }}</label>
 
           <input type="radio" class="btn-check" name="quarantine_notification" id="quarantine_notification_hourly" autocomplete="off" value="hourly" {% if template.attributes.quarantine_notification == 'hourly' %}checked{% endif %}>
-          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_notification_hourly">{{ lang.user.hourly }}</label>
+          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="quarantine_notification_hourly">{{ lang.user.hourly }}</label>
 
           <input type="radio" class="btn-check" name="quarantine_notification" id="quarantine_notification_daily" autocomplete="off" value="daily" {% if template.attributes.quarantine_notification == 'daily' %}checked{% endif %}>
-          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_notification_daily">{{ lang.user.daily }}</label>
+          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="quarantine_notification_daily">{{ lang.user.daily }}</label>
 
           <input type="radio" class="btn-check" name="quarantine_notification" id="quarantine_notification_weekly" autocomplete="off" value="weekly" {% if template.attributes.quarantine_notification == 'weekly' %}checked{% endif %}>
-          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_notification_weekly">{{ lang.user.weekly }}</label>
+          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="quarantine_notification_weekly">{{ lang.user.weekly }}</label>
         </div>
         <p class="text-muted"><small>{{ lang.user.quarantine_notification_info }}</small></p>
       </div>
@@ -60,13 +60,13 @@
       <div class="col-sm-10">
         <div class="btn-group">
           <input type="radio" class="btn-check" name="quarantine_category" id="quarantine_category_reject" autocomplete="off" value="reject" {% if template.attributes.quarantine_category == 'reject' %}checked{% endif %}>
-          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_category_reject">{{ lang.user.q_reject }}</label>
+          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="quarantine_category_reject">{{ lang.user.q_reject }}</label>
 
           <input type="radio" class="btn-check" name="quarantine_category" id="quarantine_category_add_header" autocomplete="off" value="add_header" {% if template.attributes.quarantine_category == 'add_header' %}checked{% endif %}>
-          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_category_add_header">{{ lang.user.q_add_header }}</label>
+          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="quarantine_category_add_header">{{ lang.user.q_add_header }}</label>
 
           <input type="radio" class="btn-check" name="quarantine_category" id="quarantine_category_all" autocomplete="off" value="all" {% if template.attributes.quarantine_category == 'all' %}checked{% endif %}>
-          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_category_all">{{ lang.user.q_all }}</label>
+          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="quarantine_category_all">{{ lang.user.q_all }}</label>
         </div>
         <p class="text-muted"><small>{{ lang.user.quarantine_category_info }}</small></p>
       </div>
@@ -76,10 +76,10 @@
       <div class="col-sm-10">
         <div class="btn-group">
           <input type="checkbox" class="btn-check" name="tls_enforce_in" id="tls_enforce_in" autocomplete="off" value="1" {% if template.attributes.tls_enforce_in == '1' %}checked{% endif %}>
-          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="tls_enforce_in">{{ lang.user.tls_enforce_in }}</label>
+          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="tls_enforce_in">{{ lang.user.tls_enforce_in }}</label>
 
           <input type="checkbox" class="btn-check" name="tls_enforce_out" id="tls_enforce_out" autocomplete="off" value="1" {% if template.attributes.tls_enforce_out == '1' %}checked{% endif %}>
-          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="tls_enforce_out">{{ lang.user.tls_enforce_out }}</label>
+          <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="tls_enforce_out">{{ lang.user.tls_enforce_out }}</label>
         </div>
       </div>
     </div>
@@ -118,14 +118,13 @@
     <div class="row mb-4">
       <label class="control-label col-sm-2">{{ lang.acl.ratelimit }}</label>
       <div class="col-sm-10">
+        <div class="input-group">
           <input name="rl_value" type="number" autocomplete="off" value="{{ template.attributes.rl_value }}" class="form-control mb-2" placeholder="{{ lang.ratelimit.disabled }}">
           <select name="rl_frame" class="form-control">
-          <option value="s"{% if template.attributes.rl_frame == 's' %} selected{% endif %}>{{ lang.ratelimit.second }}</option>
+          {% include 'mailbox/rl-frame.twig' %}
-          <option value="m"{% if template.attributes.rl_frame == 'm' %} selected{% endif %}>{{ lang.ratelimit.minute }}</option>
-          <option value="h"{% if template.attributes.rl_frame == 'h' %} selected{% endif %}>{{ lang.ratelimit.hour }}</option>
-          <option value="d"{% if template.attributes.rl_frame == 'd' %} selected{% endif %}>{{ lang.ratelimit.day }}</option>
           </select>
-        <p class="text-muted mt-3">{{ lang.edit.mbox_rl_info }}</p>
+        </div>
+        <p class="text-muted mt-1">{{ lang.edit.mbox_rl_info }}</p>
       </div>
     </div>
     <hr>
@@ -140,8 +139,8 @@
     </div>
     <div class="row">
       <div class="offset-sm-2 col-sm-10">
-        <div class="checkbox">
+        <div class="form-check">
-          <label><input type="checkbox" value="1" name="force_pw_update"{% if template.attributes.force_pw_update == '1' %} checked{% endif %}> {{ lang.edit.force_pw_update }}</label>
+          <label><input type="checkbox" class="form-check-input" value="1" name="force_pw_update"{% if template.attributes.force_pw_update == '1' %} checked{% endif %}> {{ lang.edit.force_pw_update }}</label>
           <small class="text-muted">{{ lang.edit.force_pw_update_info|format(ui_texts.main_name) }}</small>
         </div>
       </div>
@@ -149,8 +148,8 @@
     {% if not skip_sogo %}
     <div class="row">
       <div class="offset-sm-2 col-sm-10">
-        <div class="checkbox">
+        <div class="form-check">
-          <label><input type="checkbox" value="1" name="sogo_access"{% if template.attributes.sogo_access == '1' %} checked{% endif %}> {{ lang.edit.sogo_access }}</label>
+          <label><input type="checkbox" class="form-check-input" value="1" name="sogo_access"{% if template.attributes.sogo_access == '1' %} checked{% endif %}> {{ lang.edit.sogo_access }}</label>
           <small class="text-muted">{{ lang.edit.sogo_access_info }}</small>
         </div>
       </div>

data/web/templates/edit/mailbox.twig

@@ -2,15 +2,23 @@
 
 {% block inner_content %}
 {% if result %}
+<div id="mailbox-content" class="responsive-tabs">
     <ul class="nav nav-tabs" role="tablist">
       <li role="presentation" class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#medit">{{ lang.edit.mailbox }}</button></li>
       <li role="presentation" class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#mpushover">{{ lang.edit.pushover }}</button></li>
       <li role="presentation" class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#macl">{{ lang.edit.acl }}</button></li>
       <li role="presentation" class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#mrl">{{ lang.edit.ratelimit }}</button></li>
     </ul>
-<hr>
+    <hr class="d-none d-md-block">
     <div class="tab-content">
       <div id="medit" class="tab-pane fade show active" role="tabpanel" aria-labelledby="mailbox-edit">
+        <div class="card mb-4">
+            <div class="card-header d-flex d-md-none fs-5">
+              <button class="btn flex-grow-1 text-start" data-bs-target="#collapse-tab-medit" data-bs-toggle="collapse" aria-controls="collapse-tab-medit">
+                {{ lang.edit.mailbox }} <span class="badge bg-info table-lines"></span>
+              </button>
+            </div>
+            <div id="collapse-tab-medit" class="card-body collapse show" data-bs-parent="#mailbox-content">
                 <form class="form-horizontal" data-id="editmailbox" role="form" method="post">
                   <input type="hidden" value="default" name="sender_acl">
                   <input type="hidden" value="0" name="force_pw_update">
@@ -109,25 +117,25 @@
                     <label class="control-label col-sm-2">{{ lang.user.quarantine_notification }}</label>
                     <div class="col-sm-10">
                       <div class="btn-group" data-acl="{{ acl.quarantine_notification }}">
-            <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light{% if quarantine_notification == 'never' %} btn-dark{% endif %}"
+                        <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline{% if quarantine_notification == 'never' %} btn-dark{% else %} btn-light{% endif %}"
                         data-action="edit_selected"
                         data-item="{{ mailbox }}"
                         data-id="quarantine_notification"
                         data-api-url='edit/quarantine_notification'
                         data-api-attr='{"quarantine_notification":"never"}'>{{ lang.user.never }}</button>
-            <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light{% if quarantine_notification == 'hourly' %} btn-dark{% endif %}"
+                        <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline{% if quarantine_notification == 'hourly' %} btn-dark{% else %} btn-light{% endif %}"
                         data-action="edit_selected"
                         data-item="{{ mailbox }}"
                         data-id="quarantine_notification"
                         data-api-url='edit/quarantine_notification'
                         data-api-attr='{"quarantine_notification":"hourly"}'>{{ lang.user.hourly }}</button>
-            <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light{% if quarantine_notification == 'daily' %} btn-dark{% endif %}"
+                        <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline{% if quarantine_notification == 'daily' %} btn-dark{% else %} btn-light{% endif %}"
                         data-action="edit_selected"
                         data-item="{{ mailbox }}"
                         data-id="quarantine_notification"
                         data-api-url='edit/quarantine_notification'
                         data-api-attr='{"quarantine_notification":"daily"}'>{{ lang.user.daily }}</button>
-            <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light{% if quarantine_notification == 'weekly' %} btn-dark{% endif %}"
+                        <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline{% if quarantine_notification == 'weekly' %} btn-dark{% else %} btn-light{% endif %}"
                         data-action="edit_selected"
                         data-item="{{ mailbox }}"
                         data-id="quarantine_notification"
@@ -141,19 +149,19 @@
                     <label class="control-label col-sm-2">{{ lang.user.quarantine_category }}</label>
                     <div class="col-sm-10">
                       <div class="btn-group" data-acl="{{ acl.quarantine_category }}">
-            <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline btn-light{% if quarantine_category == 'reject' %} btn-dark{% endif %}"
+                        <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline{% if quarantine_category == 'reject' %} btn-dark{% else %} btn-light{% endif %}"
                         data-action="edit_selected"
                         data-item="{{ mailbox }}"
                         data-id="quarantine_category"
                         data-api-url='edit/quarantine_category'
                         data-api-attr='{"quarantine_category":"reject"}'>{{ lang.user.q_reject }}</button>
-            <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline btn-light{% if quarantine_category == 'add_header' %} btn-dark{% endif %}"
+                        <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline{% if quarantine_category == 'add_header' %} btn-dark{% else %} btn-light{% endif %}"
                         data-action="edit_selected"
                         data-item="{{ mailbox }}"
                         data-id="quarantine_category"
                         data-api-url='edit/quarantine_category'
                         data-api-attr='{"quarantine_category":"add_header"}'>{{ lang.user.q_add_header }}</button>
-            <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline btn-light{% if quarantine_category == 'all' %} btn-dark{% endif %}"
+                        <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline{% if quarantine_category == 'all' %} btn-dark{% else %} btn-light{% endif %}"
                         data-action="edit_selected"
                         data-item="{{ mailbox }}"
                         data-id="quarantine_category"
@@ -167,13 +175,13 @@
                     <label class="control-label col-sm-2" for="sender_acl">{{ lang.user.tls_policy }}</label>
                     <div class="col-sm-10">
                       <div class="btn-group" data-acl="{{ acl.tls_policy }}">
-            <button type="button" class="btn btn-sm btn-xs-half d-block d-sm-inline btn-light{% if get_tls_policy.tls_enforce_in == '1' %} btn-dark"{% endif %}"
+                        <button type="button" class="btn btn-sm btn-xs-half d-block d-sm-inline{% if get_tls_policy.tls_enforce_in == '1' %} btn-dark{% else %} btn-light{% endif %}"
                           data-action="edit_selected"
                           data-item="{{ mailbox }}"
                           data-id="tls_policy"
                           data-api-url='edit/tls_policy'
                           data-api-attr='{"tls_enforce_in": {% if get_tls_policy.tls_enforce_in == '1' %}0{% else %}1{% endif %} }'>{{ lang.user.tls_enforce_in }}</button>
-            <button type="button" class="btn btn-sm btn-xs-half d-block d-sm-inline btn-light{% if get_tls_policy.tls_enforce_out == '1' %} btn-dark"{% endif %}"
+                        <button type="button" class="btn btn-sm btn-xs-half d-block d-sm-inline{% if get_tls_policy.tls_enforce_out == '1' %} btn-dark{% else %} btn-light{% endif %}"
                           data-action="edit_selected"
                           data-item="{{ mailbox }}"
                           data-id="tls_policy"
@@ -234,10 +242,10 @@
                       </select>
                     </div>
                   </div>
-      <div class="row">
+                  <div class="row mt-2">
                     <div class="offset-sm-2 col-sm-10">
-          <div class="checkbox">
+                      <div class="form-check">
-            <label><input type="checkbox" value="1" name="force_pw_update"{% if result.attributes.force_pw_update == '1' %} checked{% endif %}> {{ lang.edit.force_pw_update }}</label>
+                        <label><input type="checkbox" class="form-check-input" value="1" name="force_pw_update"{% if result.attributes.force_pw_update == '1' %} checked{% endif %}> {{ lang.edit.force_pw_update }}</label>
                         <small class="text-muted">{{ lang.edit.force_pw_update_info|format(ui_texts.main_name) }}</small>
                       </div>
                     </div>
@@ -245,14 +253,14 @@
                   {% if not skip_sogo %}
                   <div data-acl="{{ acl.sogo_access }}" class="row">
                     <div class="offset-sm-2 col-sm-10">
-          <div class="checkbox">
+                      <div class="form-check">
-            <label><input type="checkbox" value="1" name="sogo_access"{% if result.attributes.sogo_access == '1' %} checked{% endif %}> {{ lang.edit.sogo_access }}</label>
+                        <label><input type="checkbox" class="form-check-input" value="1" name="sogo_access"{% if result.attributes.sogo_access == '1' %} checked{% endif %}> {{ lang.edit.sogo_access }}</label>
                         <small class="text-muted">{{ lang.edit.sogo_access_info }}</small>
                       </div>
                     </div>
                   </div>
                   {% endif %}
-      <div class="row mb-2">
+                  <div class="row mt-2 mb-2">
                     <div class="offset-sm-2 col-sm-10">
                       <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="editmailbox" data-item="{{ result.username }}" data-api-url='edit/mailbox' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
                     </div>
@@ -265,7 +273,16 @@
                   </div>
                 </form>
             </div>
+        </div>
+      </div>
       <div id="mpushover" class="tab-pane fade" role="tabpanel" aria-labelledby="mailbox-pushover">
+        <div class="card mb-4">
+            <div class="card-header d-flex d-md-none fs-5">
+              <button class="btn flex-grow-1 text-start" data-bs-target="#collapse-tab-mpushover" data-bs-toggle="collapse" aria-controls="collapse-tab-mpushover">
+                {{ lang.edit.pushover }} <span class="badge bg-info table-lines"></span>
+              </button>
+            </div>
+            <div id="collapse-tab-mpushover" class="card-body collapse" data-bs-parent="#mailbox-content">
                 <form data-id="pushover" class="form well" method="post">
                   <input type="hidden" value="0" name="evaluate_x_prio">
                   <input type="hidden" value="0" name="only_x_prio">
@@ -329,8 +346,8 @@
                             </div>
                           </div>
                           <div class="col-sm-12">
-              <div class="checkbox">
+                          <div class="form-check">
-                <label><input type="checkbox" value="1" name="active"{% if pushover_data.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
+                            <label><input type="checkbox" class="form-check-input" value="1" name="active"{% if pushover_data.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
                           </div>
                         </div>
                         <div class="col-sm-12">
@@ -343,11 +360,11 @@
                           <div id="po_advanced" class="collapse">
                             <label for="text">{{ lang.edit.pushover_sender_regex }}</label>
                             <input type="text" class="form-control mt-2" name="senders_regex" value="{{ pushover_data.senders_regex }}" placeholder="/(.*@example\.org$|^foo@example\.com$)/i" regex="true">
-                <div class="checkbox mt-4">
+                            <div class="form-check mt-4">
-                  <label><input type="checkbox" value="1" name="evaluate_x_prio"{% if pushover_data.attributes.evaluate_x_prio == '1' %} checked{% endif %}> {{ lang.edit.pushover_evaluate_x_prio|raw }}</label>
+                              <label><input type="checkbox" class="form-check-input" value="1" name="evaluate_x_prio"{% if pushover_data.attributes.evaluate_x_prio == '1' %} checked{% endif %}> {{ lang.edit.pushover_evaluate_x_prio|raw }}</label>
                             </div>
-                <div class="checkbox mt-2">
+                            <div class="form-check mt-2">
-                  <label><input type="checkbox" value="1" name="only_x_prio"{% if pushover_data.attributes.only_x_prio == '1' %} checked{% endif %}> {{ lang.edit.pushover_only_x_prio|raw }}</label>
+                              <label><input type="checkbox" class="form-check-input" value="1" name="only_x_prio"{% if pushover_data.attributes.only_x_prio == '1' %} checked{% endif %}> {{ lang.edit.pushover_only_x_prio|raw }}</label>
                             </div>
                           </div>
                         </div>
@@ -361,7 +378,16 @@
                   </div>
                 </form>
             </div>
+        </div>
+      </div>
       <div id="macl" class="tab-pane fade" role="tabpanel" aria-labelledby="mailbox-acl">
+        <div class="card mb-4">
+            <div class="card-header d-flex d-md-none fs-5">
+              <button class="btn flex-grow-1 text-start" data-bs-target="#collapse-tab-macl" data-bs-toggle="collapse" aria-controls="collapse-tab-macl">
+                {{ lang.edit.acl }} <span class="badge bg-info table-lines"></span>
+              </button>
+            </div>
+            <div id="collapse-tab-macl" class="card-body collapse" data-bs-parent="#mailbox-content">
                 <form data-id="useracl" class="form-inline well" method="post">
                   <div class="row">
                     <div class="col-sm-1">
@@ -378,24 +404,42 @@
                   </div>
                 </form>
             </div>
+        </div>
+      </div>
       <div id="mrl" class="tab-pane fade" role="tabpanel" aria-labelledby="mailbox-rl">
-    <form data-id="mboxratelimit" class="form-inline well" method="post">
+        <div class="card mb-4">
-      <div class="row">
+            <div class="card-header d-flex d-md-none fs-5">
-        <div class="col-sm-1">
+              <button class="btn flex-grow-1 text-start" data-bs-target="#collapse-tab-mrl" data-bs-toggle="collapse" aria-controls="collapse-tab-mrl">
+                {{ lang.edit.ratelimit }} <span class="badge bg-info table-lines"></span>
+              </button>
+            </div>
+            <div id="collapse-tab-mrl" class="card-body collapse" data-bs-parent="#mailbox-content">
+                <form data-id="mboxratelimit" class="well" method="post">
+                  <div class="row mb-2">
+                    <div class="col-sm-2">
                       <p class="text-muted">{{ lang.acl.ratelimit }}</p>
                     </div>
                     <div class="col-sm-10">
-          <input name="rl_value" type="number" autocomplete="off" value="{{ rl.value }}" class="form-control mb-4" placeholder="{{ lang.ratelimit.disabled }}">
+                      <div class="input-group">
+                        <input name="rl_value" type="number" autocomplete="off" value="{{ rl.value }}" class="form-control" placeholder="{{ lang.ratelimit.disabled }}">
                         <select name="rl_frame" class="form-control">
                         {% include 'mailbox/rl-frame.twig' %}
                         </select>
+                      </div>
+                    </div>  
+                  </div>
+                  <div class="row mb-2">
+                    <div class="offset-sm-2 col-sm-10">  
                       <button class="btn btn-xs-lg d-block d-sm-inline btn-secondary" data-action="edit_selected" data-id="mboxratelimit" data-item="{{ mailbox }}" data-api-url='edit/rl-mbox' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
-          <p class="text-muted mt-3">{{ lang.edit.mbox_rl_info }}</p>
+                      <p class="text-muted mt-2">{{ lang.edit.mbox_rl_info }}</p>
                     </div>
                   </div>
                 </form>
             </div>
         </div>
+      </div>
+    </div>
+</div>
 {% else %}
   {{ parent() }}
 {% endif %}

data/web/templates/edit/recipient_map.twig

@@ -22,8 +22,8 @@
   </div>
   <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
-      <div class="checkbox">
+      <div class="form-check">
-        <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
+        <label><input type="checkbox" class="form-check-input" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>

data/web/templates/edit/relayhost.twig

@@ -26,8 +26,8 @@
   </div>
   <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
-      <div class="checkbox">
+      <div class="form-check">
-        <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
+        <label><input type="checkbox" class="form-check-input" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>

data/web/templates/edit/resource.twig

@@ -38,8 +38,8 @@
   </div>
   <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
-      <div class="checkbox">
+      <div class="form-check">
-        <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
+        <label><input type="checkbox" class="form-check-input" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>

data/web/templates/edit/syncjob.twig

@@ -2,7 +2,7 @@
 
 {% block inner_content %}
 {% if result %}
-  <h4>{{ lang.edit.syncjob }}</h4>
+  <h4 class="mb-4">{{ lang.edit.syncjob }}</h4>
   <form class="form-horizontal" data-id="editsyncjob" role="form" method="post">
     <input type="hidden" value="0" name="delete2duplicates">
     <input type="hidden" value="0" name="delete1">
@@ -101,50 +101,50 @@
     </div>
     <div class="row mb-2">
       <div class="offset-sm-2 col-sm-10">
-        <div class="checkbox">
+        <div class="form-check">
-          <label><input type="checkbox" value="1" name="delete2duplicates"{% if result.delete2duplicates == '1' %} checked{% endif %}> {{ lang.edit.delete2duplicates }} (--delete2duplicates)</label>
+          <label><input type="checkbox" class="form-check-input" value="1" name="delete2duplicates"{% if result.delete2duplicates == '1' %} checked{% endif %}> {{ lang.edit.delete2duplicates }} (--delete2duplicates)</label>
         </div>
       </div>
     </div>
     <div class="row mb-2">
       <div class="offset-sm-2 col-sm-10">
-        <div class="checkbox">
+        <div class="form-check">
-          <label><input type="checkbox" value="1" name="delete1"{% if result.delete1 == '1' %} checked{% endif %}> {{ lang.edit.delete1 }} (--delete1)</label>
+          <label><input type="checkbox" class="form-check-input" value="1" name="delete1"{% if result.delete1 == '1' %} checked{% endif %}> {{ lang.edit.delete1 }} (--delete1)</label>
         </div>
       </div>
     </div>
     <div class="row mb-2">
       <div class="offset-sm-2 col-sm-10">
-        <div class="checkbox">
+        <div class="form-check">
-          <label><input type="checkbox" value="1" name="delete2"{% if result.delete2 == '1' %} checked{% endif %}> {{ lang.edit.delete2 }} (--delete2)</label>
+          <label><input type="checkbox" class="form-check-input" value="1" name="delete2"{% if result.delete2 == '1' %} checked{% endif %}> {{ lang.edit.delete2 }} (--delete2)</label>
         </div>
       </div>
     </div>
     <div class="row mb-2">
       <div class="offset-sm-2 col-sm-10">
-        <div class="checkbox">
+        <div class="form-check">
-          <label><input type="checkbox" value="1" name="automap"{% if result.automap == '1' %} checked{% endif %}> {{ lang.edit.automap }} (--automap)</label>
+          <label><input type="checkbox" class="form-check-input" value="1" name="automap"{% if result.automap == '1' %} checked{% endif %}> {{ lang.edit.automap }} (--automap)</label>
         </div>
       </div>
     </div>
     <div class="row mb-2">
       <div class="offset-sm-2 col-sm-10">
-        <div class="checkbox">
+        <div class="form-check">
-          <label><input type="checkbox" value="1" name="skipcrossduplicates"{% if result.skipcrossduplicates == '1' %} checked{% endif %}> {{ lang.edit.skipcrossduplicates }} (--skipcrossduplicates)</label>
+          <label><input type="checkbox" class="form-check-input" value="1" name="skipcrossduplicates"{% if result.skipcrossduplicates == '1' %} checked{% endif %}> {{ lang.edit.skipcrossduplicates }} (--skipcrossduplicates)</label>
         </div>
       </div>
     </div>
     <div class="row mb-2">
       <div class="offset-sm-2 col-sm-10">
-        <div class="checkbox">
+        <div class="form-check">
-          <label><input type="checkbox" value="1" name="subscribeall"{% if result.subscribeall == '1' %} checked{% endif %}> {{ lang.add.subscribeall }} (--subscribeall)</label>
+          <label><input type="checkbox" class="form-check-input" value="1" name="subscribeall"{% if result.subscribeall == '1' %} checked{% endif %}> {{ lang.add.subscribeall }} (--subscribeall)</label>
         </div>
       </div>
     </div>
     <div class="row mb-4">
       <div class="offset-sm-2 col-sm-10">
-        <div class="checkbox">
+        <div class="form-check">
-          <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
+          <label><input type="checkbox" class="form-check-input" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
         </div>
       </div>
     </div>

data/web/templates/edit/tls_policy_map.twig

@@ -32,8 +32,8 @@
   </div>
   <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
-      <div class="checkbox">
+      <div class="form-check">
-        <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
+        <label><input type="checkbox" class="form-check-input" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>

data/web/templates/edit/transport.twig

@@ -32,15 +32,15 @@
   </div>
   <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
-      <div class="checkbox">
+      <div class="form-check">
-        <label><input type="checkbox" value="1" name="is_mx_based"{% if result.is_mx_based == '1' %} checked{% endif %}> {{ lang.edit.lookup_mx|raw }}</label>
+        <label><input type="checkbox" class="form-check-input" value="1" name="is_mx_based"{% if result.is_mx_based == '1' %} checked{% endif %}> {{ lang.edit.lookup_mx|raw }}</label>
       </div>
     </div>
   </div>
   <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
-      <div class="checkbox">
+      <div class="form-check">
-        <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
+        <label><input type="checkbox" class="form-check-input" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>

data/web/templates/fido2.twig

@@ -15,10 +15,10 @@
         <form style="display:inline;" method="post">
           <input type="hidden" name="unset_fido2_key" value="{{ key_info.cid }}">
           <div class="btn-group">
-            <a href="#" class="btn btn-xs btn-secondary" data-cid="{{ key_info.cid }}" data-subject="{{ key_info.subject|base64_encode }}" data-bs-toggle="modal" data-bs-target="#fido2ChangeFn">
+            <a href="#" class="btn btn-sm btn-xs-lg btn-secondary" data-cid="{{ key_info.cid }}" data-subject="{{ key_info.subject|base64_encode }}" data-bs-toggle="modal" data-bs-target="#fido2ChangeFn">
               <i class="bi bi-pencil-fill"></i> {{ lang.fido2.rename }}
             </a>
-            <a href="#" onClick='return confirm("{{ lang.admin.ays }}")?$(this).closest("form").submit():"";' class="btn btn-xs btn-danger">
+            <a href="#" onClick='return confirm("{{ lang.admin.ays }}")?$(this).closest("form").submit():"";' class="btn btn-sm btn-xs-lg btn-danger">
               <i class="bi bi-trash"></i> {{ lang.admin.remove }}
             </a>
           </div>

data/web/templates/index.twig

@@ -14,7 +14,10 @@
         </div>
       </div>
       <div class="card-body">
-        <div class="text-center mailcow-logo mb-4"><img src="{{ logo|default('/img/cow_mailcow.svg') }}" alt="mailcow"></div>
+        <div class="text-center mailcow-logo mb-4">
+          <img class="main-logo" src="{{ logo|default('/img/cow_mailcow.svg') }}" alt="mailcow">
+          <img class="main-logo-dark" src="{{ logo_dark|default('/img/cow_mailcow.svg') }}" alt="mailcow-logo-dark">
+        </div>
         {% if ui_texts.ui_announcement_text and ui_texts.ui_announcement_active %}
         <div class="my-4 alert alert-{{ ui_texts.ui_announcement_type }} rot-enc ui-announcement-alert">{{ ui_texts.ui_announcement_text|rot13 }}</div>
         {% endif %}
@@ -37,11 +40,14 @@
               <input name="pass_user" type="password" id="pass_user" class="form-control" placeholder="{{ lang.login.password }}" required="" autocomplete="current-password">
             </div>
           </div>
-          <div class="d-flex mt-4" style="position: relative">
+          <div class="d-flex justify-content-between mt-4" style="position: relative">
+            <div class="d-grid gap-2 d-sm-block">
               <button type="submit" class="btn btn-xs-lg btn-success" value="Login">{{ lang.login.login }}</button>
-            <button type="button" class="btn btn-xs-lg btn-success ms-2" id="fido2-login"><i class="bi bi-shield-fill-check"></i> {{ lang.login.fido2_webauthn }}</button>
+              <button type="button" class="btn btn-xs-lg btn-success" id="fido2-login"><i class="bi bi-shield-fill-check"></i> {{ lang.login.fido2_webauthn }}</button>
+            </div>
             {% if not oauth2_request %}
-            <button type="button" {% if available_languages|length == 1 %}disabled="true"{% endif %} class="btn btn-xs-lg btn-secondary ms-auto dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <div class="d-grid d-sm-block">
+            <button type="button" {% if available_languages|length == 1 %}disabled="true"{% endif %} class="btn btn-secondary ms-auto dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               <span class="flag-icon flag-icon-{{ mailcow_locale[-2:] }}"></span>
             </button>
             <ul class="dropdown-menu ms-auto login">
@@ -53,6 +59,7 @@
                 </li>
               {% endfor %}
             </ul>
+            </div>
             {% endif %}
           </div>
         </form>
@@ -62,19 +69,15 @@
         <div class="my-4" id="fido2-alerts"></div>
         {% if not oauth2_request and (mailcow_apps or app_links) %}
         <legend><i class="bi bi-link-45deg"></i> {{ ui_texts.apps_name|raw }}</legend><hr />
-        <div class="my-2 d-flex flex-wrap apps">
+        <div class="my-2 d-grid gap-2 d-sm-block apps">
           {% for app in mailcow_apps %}
             {% if not skip_sogo or not is_uri('SOGo', app.link) %}
-            <div class="m-2">
+              <a href="{{ app.link }}" role="button" {% if app.description %}title="{{ app.description }}"{% endif %} class="btn btn-primary">{{ app.name }}</a>
-              <a href="{{ app.link }}" role="button" {% if app.description %}title="{{ app.description }}"{% endif %} class="btn btn-primary btn-block">{{ app.name }}</a>
-            </div>
             {% endif %}
           {% endfor %}
           {% for row in app_links %}
             {% for key, val in row %}
-              <div class="m-2">
+              <a href="{{ val }}" role="button" class="btn btn-primary">{{ key }}</a>
-                <a href="{{ val }}" role="button" class="btn btn-primary btn-block">{{ key }}</a>
-              </div>
             {% endfor %}
           {% endfor %}
         </div>

data/web/templates/mailbox.twig

@@ -3,20 +3,28 @@
 {% block content %}
 <div id="mail-content" class="responsive-tabs">
   <ul class="nav nav-tabs" role="tablist">
+    {% if mailcow_cc_role == 'admin' %}
     <li class="nav-item dropdown" role="presentation">
       <a class="nav-link dropdown-toggle active" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.domains }}</a>
       <ul class="dropdown-menu">
         <li><button class="dropdown-item" aria-selected="false" aria-controls="tab-domains" role="tab" data-bs-toggle="tab" data-bs-target="#tab-domains">{{ lang.mailbox.domains }}</button></li>
-        <li><button class="dropdown-item {% if mailcow_cc_role != 'admin' %} d-none{% endif %}" aria-selected="false" aria-controls="tab-templates-domains" role="tab" data-bs-toggle="tab" data-bs-target="#tab-templates-domains">{{ lang.mailbox.templates }}</button></li>
+        <li><button class="dropdown-item" aria-selected="false" aria-controls="tab-templates-domains" role="tab" data-bs-toggle="tab" data-bs-target="#tab-templates-domains">{{ lang.mailbox.templates }}</button></li>
       </ul>
     </li>
+    {% else %}
+    <li class="nav-item" role="presentation"><button class="nav-link" aria-controls="tab-domains" role="tab" data-bs-toggle="tab" data-bs-target="#tab-domains">{{ lang.mailbox.domains }}</button></li>
+    {% endif %}
+    {% if mailcow_cc_role == 'admin' %}
     <li class="nav-item dropdown" role="presentation">
       <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.mailboxes }}</a>
       <ul class="dropdown-menu">
         <li><button class="dropdown-item" aria-selected="false" aria-controls="tab-mailboxes" role="tab" data-bs-toggle="tab" data-bs-target="#tab-mailboxes">{{ lang.mailbox.mailboxes }}</button></li>
-        <li><button class="dropdown-item {% if mailcow_cc_role != 'admin' %} d-none{% endif %}" aria-selected="false" aria-controls="tab-templates-mbox" role="tab" data-bs-toggle="tab" data-bs-target="#tab-templates-mbox">{{ lang.mailbox.templates }}</button></li>
+        <li><button class="dropdown-item" aria-selected="false" aria-controls="tab-templates-mbox" role="tab" data-bs-toggle="tab" data-bs-target="#tab-templates-mbox">{{ lang.mailbox.templates }}</button></li>
       </ul>
     </li>
+    {% else %}
+    <li class="nav-item" role="presentation"><button class="nav-link" aria-controls="tab-mailboxes" role="tab" data-bs-toggle="tab" data-bs-target="#tab-mailboxes">{{ lang.mailbox.mailboxes }}</button></li>
+    {% endif %}
     <li class="nav-item" role="presentation"><button class="nav-link" aria-controls="tab-resources" role="tab" data-bs-toggle="tab" data-bs-target="#tab-resources">{{ lang.mailbox.resources }}</button></li>
     <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.aliases }}</a>
@@ -35,9 +43,13 @@
     <div class="col-md-12">
       <div class="tab-content" style="padding-top:20px">
         {% include 'mailbox/tab-domains.twig' %}
+        {% if mailcow_cc_role == 'admin' %}
         {% include 'mailbox/tab-templates-domains.twig' %}
+        {% endif %}
         {% include 'mailbox/tab-mailboxes.twig' %}
+        {% if mailcow_cc_role == 'admin' %}
         {% include 'mailbox/tab-templates-mbox.twig' %}
+        {% endif %}
         {% include 'mailbox/tab-resources.twig' %}
         {% include 'mailbox/tab-domain-aliases.twig' %}
         {% include 'mailbox/tab-mbox-aliases.twig' %}

data/web/templates/mailbox/tab-bcc.twig

@@ -11,7 +11,7 @@
       </div>
     </div>
     <div id="collapse-tab-bcc" class="card-body collapse" data-bs-parent="#mail-content">
-      <div class="mass-actions-mailbox mb-4">
+      <div class="mass-actions-mailbox mb-4 d-none d-sm-block">
         <div class="btn-group" data-acl="{{ acl.bcc_maps }}">
           <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="bcc" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
           <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
@@ -34,8 +34,8 @@
       <table id="bcc_table" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-mailbox mt-4">
         <div class="btn-group" data-acl="{{ acl.bcc_maps }}">
-          <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="bcc" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="bcc" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-          <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
           <ul class="dropdown-menu">
             <li><a class="dropdown-item" data-action="edit_selected" data-id="bcc" data-api-url='edit/bcc' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
             <li><a class="dropdown-item" data-action="edit_selected" data-id="bcc" data-api-url='edit/bcc' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
@@ -48,7 +48,7 @@
             <li class="table_collapse_option"><a class="dropdown-item" data-datatables-expand="bcc_table">{{ lang.datatables.expand_all }}</a></li>
             <li class="table_collapse_option"><a class="dropdown-item" data-datatables-collapse="bcc_table">{{ lang.datatables.collapse_all }}</a></li>
           </ul>
-          <a class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addBCCModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_bcc_entry }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addBCCModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_bcc_entry }}</a>
         </div>
       </div>
     </div>
@@ -65,7 +65,7 @@
       </div>
     </div>
     <div id="collapse-tab-bcc-filters" class="card-body collapse" data-bs-parent="#mail-content">
-      <div class="mass-actions-mailbox mb-4">
+      <div class="mass-actions-mailbox mb-4 d-none d-sm-block">
         <div class="btn-group">
           <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="recipient_map" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
           <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
@@ -85,8 +85,8 @@
       <table id="recipient_map_table" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-mailbox mt-4">
         <div class="btn-group">
-          <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="recipient_map" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="recipient_map" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-          <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
           <ul class="dropdown-menu">
             <li><a class="dropdown-item" data-action="edit_selected" data-id="recipient_map" data-api-url='edit/recipient_map' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
             <li><a class="dropdown-item" data-action="edit_selected" data-id="recipient_map" data-api-url='edit/recipient_map' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
@@ -96,7 +96,7 @@
             <li class="table_collapse_option"><a class="dropdown-item" data-datatables-expand="recipient_map_table">{{ lang.datatables.expand_all }}</a></li>
             <li class="table_collapse_option"><a class="dropdown-item" data-datatables-collapse="recipient_map_table">{{ lang.datatables.collapse_all }}</a></li>
           </ul>
-          <a class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addRecipientMapModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_recipient_map_entry }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addRecipientMapModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_recipient_map_entry }}</a>
         </div>
       </div>
     </div>

data/web/templates/mailbox/tab-domain-aliases.twig

@@ -11,7 +11,7 @@
       </div>
     </div>
     <div id="collapse-tab-domain-aliases" class="card-body collapse" data-bs-parent="#mail-content">
-      <div class="mass-actions-mailbox mb-4">
+      <div class="mass-actions-mailbox mb-4 d-none d-sm-block">
         <div class="btn-group">
           <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="alias-domain" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
           <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
@@ -30,8 +30,8 @@
       <table id="aliasdomain_table" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-mailbox mt-4">
         <div class="btn-group">
-          <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="alias-domain" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="alias-domain" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-          <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
           <ul class="dropdown-menu">
             <li><a class="dropdown-item" data-action="edit_selected" data-id="alias-domain" data-api-url='edit/alias-domain' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
             <li><a class="dropdown-item" data-action="edit_selected" data-id="alias-domain" data-api-url='edit/alias-domain' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
@@ -41,7 +41,7 @@
             <li class="table_collapse_option"><a class="dropdown-item" data-datatables-expand="aliasdomain_table">{{ lang.datatables.expand_all }}</a></li>
             <li class="table_collapse_option"><a class="dropdown-item" data-datatables-collapse="aliasdomain_table">{{ lang.datatables.collapse_all }}</a></li>
           </ul>
-          <a class="btn btn-sm btn-success" href="#" data-acl="{{ acl.alias_domains }}" data-bs-toggle="modal" data-bs-target="#addAliasDomainModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_domain_alias }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-success" href="#" data-acl="{{ acl.alias_domains }}" data-bs-toggle="modal" data-bs-target="#addAliasDomainModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_domain_alias }}</a>
         </div>
       </div>
     </div>

data/web/templates/mailbox/tab-domains.twig

@@ -12,7 +12,7 @@
     </div>
     <div id="collapse-tab-domains" class="card-body collapse show" data-bs-parent="#mail-content">
       {#<div class="mass-actions-mailbox" data-actions-header="true"></div>#}      
-      <div class="mass-actions-mailbox mb-4">
+      <div class="mass-actions-mailbox mb-4 d-none d-sm-block">
         <div class="btn-group">
           <button class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="domain" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</button>
           <button class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</button>
@@ -28,15 +28,15 @@
             <li class="table_collapse_option"><a class="dropdown-item" data-datatables-collapse="domain_table">{{ lang.datatables.collapse_all }}</a></li>
           </ul>
           {% if mailcow_cc_role == 'admin' %}
-          <a class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addDomainModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_domain }}</a>
+          <button class="btn btn-sm btn-success" data-bs-toggle="modal" data-bs-target="#addDomainModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_domain }}</button>
           {% endif %}
         </div>
       </div>
       <table id="domain_table" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-mailbox mt-4">
         <div class="btn-group">
-          <button class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="domain" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</button>
+          <button class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="domain" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</button>
-          <button class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</button>
+          <button class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</button>
           <ul class="dropdown-menu">
             {% if mailcow_cc_role == 'admin' %}
               <li><a class="dropdown-item" data-action="edit_selected" data-id="domain" data-api-url='edit/domain' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
@@ -49,7 +49,7 @@
             <li class="table_collapse_option"><a class="dropdown-item" data-datatables-collapse="domain_table">{{ lang.datatables.collapse_all }}</a></li>
           </ul>
           {% if mailcow_cc_role == 'admin' %}
-            <button class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addDomainModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_domain }}</button>
+            <button class="btn btn-sm btn-xs-lg btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addDomainModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_domain }}</button>
           {% endif %}
         </div>
       </div>

data/web/templates/mailbox/tab-filters.twig

@@ -11,7 +11,7 @@
       </div>
     </div>
     <div id="collapse-tab-filters" class="card-body collapse" data-bs-parent="#mail-content">
-      <div class="mass-actions-mailbox mb-4">
+      <div class="mass-actions-mailbox mb-4 d-none d-sm-block">
         <div class="btn-group" data-acl="{{ acl.filters }}">
           <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="filter_item" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
           <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
@@ -34,8 +34,8 @@
       <table id="filter_table" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-mailbox mt-4 mb-4">
         <div class="btn-group" data-acl="{{ acl.filters }}">
-          <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="filter_item" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="filter_item" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-          <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
           <ul class="dropdown-menu">
             <li><a class="dropdown-item" data-action="edit_selected" data-id="filter_item" data-api-url='edit/filter' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
             <li><a class="dropdown-item" data-action="edit_selected" data-id="filter_item" data-api-url='edit/filter' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
@@ -48,7 +48,7 @@
             <li class="table_collapse_option"><a class="dropdown-item" data-datatables-expand="filter_table">{{ lang.datatables.expand_all }}</a></li>
             <li class="table_collapse_option"><a class="dropdown-item" data-datatables-collapse="filter_table">{{ lang.datatables.collapse_all }}</a></li>
           </ul>
-          <a class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addFilterModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_filter }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addFilterModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_filter }}</a>
         </div>
       </div>
       <div class="{% if mailcow_cc_role != 'admin' %}hidden{% endif %}">
@@ -64,8 +64,8 @@
               <div class="row mt-2">
                 <div class="col-sm-10 add_filter_btns">
                   <div class="btn-group">
-                    <button class="btn btn-sm btn-xs-half btn-secondary validate_sieve" href="#">{{ lang.add.validate }}</button>
+                    <button class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary validate_sieve" href="#">{{ lang.add.validate }}</button>
-                    <button class="btn btn-sm btn-xs-half btn-success add_sieve_script" data-action="add_item" data-id="add_prefilter" data-api-url='add/global-filter' data-api-attr='{"filter_type":"prefilter"}' href="#" disabled><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
+                    <button class="btn btn-sm btn-xs-lg btn-xs-half btn-success add_sieve_script" data-action="add_item" data-id="add_prefilter" data-api-url='add/global-filter' data-api-attr='{"filter_type":"prefilter"}' href="#" disabled><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
                   </div>
                 </div>
               </div>
@@ -82,8 +82,8 @@
               <div class="row mt-2">
                 <div class="col-sm-10 add_filter_btns">
                   <div class="btn-group">
-                    <button class="btn btn-sm btn-xs-half btn-secondary validate_sieve" href="#">{{ lang.add.validate }}</button>
+                    <button class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary validate_sieve" href="#">{{ lang.add.validate }}</button>
-                    <button class="btn btn-sm btn-xs-half btn-success add_sieve_script" data-action="add_item" data-id="add_postfilter" data-api-url='add/global-filter' data-api-attr='{"filter_type":"postfilter"}' href="#" disabled><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
+                    <button class="btn btn-sm btn-xs-lg btn-xs-half btn-success add_sieve_script" data-action="add_item" data-id="add_postfilter" data-api-url='add/global-filter' data-api-attr='{"filter_type":"postfilter"}' href="#" disabled><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
                   </div>
                 </div>
               </div>

data/web/templates/mailbox/tab-mailboxes.twig

@@ -11,7 +11,7 @@
       </div>
     </div>
     <div id="collapse-tab-mailboxes" class="card-body collapse" data-bs-parent="#mail-content">
-      <div class="mass-actions-mailbox mb-4">
+      <div class="mass-actions-mailbox mb-4 d-none d-sm-block">
         <div class="btn-group d-flex d-lg-none">
           <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="mailbox" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
           <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
@@ -128,8 +128,8 @@
       <table id="mailbox_table" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-mailbox mt-4">
         <div class="btn-group d-flex d-lg-none">
-          <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="mailbox" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="mailbox" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-          <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
           <ul class="dropdown-menu">
             <li class="table_collapse_option"><a class="dropdown-item" data-datatables-expand="mailbox_table">{{ lang.datatables.expand_all }}</a></li>
             <li class="table_collapse_option"><a class="dropdown-item" data-datatables-collapse="mailbox_table">{{ lang.datatables.collapse_all }}</a></li>
@@ -173,7 +173,7 @@
             <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"sieve_access":1}' href="#">{{ lang.mailbox.activate }}</a></li>
             <li><a class="dropdown-item" data-action="edit_selected" data-id="mailbox" data-api-url='edit/mailbox' data-api-attr='{"sieve_access":0}' href="#">{{ lang.mailbox.deactivate }}</a></li>
           </ul>
-          <a class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addMailboxModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_mailbox }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addMailboxModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_mailbox }}</a>
         </div>
         <div class="btn-group d-none d-lg-flex">
           <a class="btn btn-sm btn-secondary" id="toggle_multi_select_all" data-id="mailbox" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>

data/web/templates/mailbox/tab-mbox-aliases.twig

@@ -11,7 +11,7 @@
       </div>
     </div>
     <div id="collapse-tab-mbox-aliases" class="card-body collapse" data-bs-parent="#mail-content">
-      <div class="mass-actions-mailbox mb-4">
+      <div class="mass-actions-mailbox mb-4 d-none d-sm-block">
         <div class="btn-group">
           <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="alias" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
           <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
@@ -37,8 +37,8 @@
       <table id="alias_table" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-mailbox mt-4">
         <div class="btn-group">
-          <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="alias" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="alias" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-          <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
           <ul class="dropdown-menu top33">
             <li><a class="dropdown-item" data-action="edit_selected" data-id="alias" data-api-url='edit/alias' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
             <li><a class="dropdown-item" data-action="edit_selected" data-id="alias" data-api-url='edit/alias' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
@@ -53,8 +53,8 @@
             <li><a class="dropdown-item" data-action="edit_selected" data-id="alias" data-api-url='edit/alias' data-api-attr='{"sogo_visible":"0"}' href="#">{{ lang.mailbox.sogo_visible_n }}</a></li>
             {% endif %}
           </ul>
-          <a class="btn btn-sm btn-secondary" data-action="edit_selected" data-id="alias" data-api-url='edit/alias' data-api-attr='{"expand_alias":true}' ><i class="bi bi-arrows-angle-expand"></i> {{ lang.mailbox.add_alias_expand }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-secondary" data-action="edit_selected" data-id="alias" data-api-url='edit/alias' data-api-attr='{"expand_alias":true}' ><i class="bi bi-arrows-angle-expand"></i> {{ lang.mailbox.add_alias_expand }}</a>
-          <a class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addAliasModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_alias }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addAliasModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_alias }}</a>
         </div>
       </div>
     </div>

data/web/templates/mailbox/tab-resources.twig

@@ -11,7 +11,7 @@
       </div>
     </div>
     <div id="collapse-tab-resources" class="card-body collapse" data-bs-parent="#mail-content">      
-      <div class="mass-actions-mailbox mb-4">
+      <div class="mass-actions-mailbox mb-4 d-none d-sm-block">
         <div class="btn-group">
           <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="resource" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
           <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
@@ -34,8 +34,8 @@
       <table id="resource_table" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-mailbox mt-4">
         <div class="btn-group">
-          <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="resource" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="resource" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-          <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
           <ul class="dropdown-menu">
             <li><a class="dropdown-item" data-action="edit_selected" data-id="resource" data-api-url='edit/resource' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
             <li><a class="dropdown-item" data-action="edit_selected" data-id="resource" data-api-url='edit/resource' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
@@ -45,7 +45,7 @@
             <li class="table_collapse_option"><a class="dropdown-item" data-datatables-expand="resource_table">{{ lang.datatables.expand_all }}</a></li>
             <li class="table_collapse_option"><a class="dropdown-item" data-datatables-collapse="resource_table">{{ lang.datatables.collapse_all }}</a></li>
           </ul>
-          <a class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addResourceModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_resource }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addResourceModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_resource }}</a>
         </div>
       </div>
     </div>

data/web/templates/mailbox/tab-syncjobs.twig

@@ -11,7 +11,7 @@
       </div>
     </div>
     <div id="collapse-tab-syncjobs" class="card-body collapse" data-bs-parent="#mail-content">
-      <div class="mass-actions-mailbox mb-4">
+      <div class="mass-actions-mailbox mb-4 d-none d-sm-block">
         <div class="btn-group" data-acl="{{ acl.syncjobs }}">
           <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="syncjob" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
           <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
@@ -32,8 +32,8 @@
       <table id="sync_job_table" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-mailbox mt-4">
         <div class="btn-group" data-acl="{{ acl.syncjobs }}">
-          <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="syncjob" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="syncjob" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-          <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
           <ul class="dropdown-menu">
             <li><a class="dropdown-item" data-action="edit_selected" data-id="syncjob" data-api-url='edit/syncjob' data-api-attr='{"last_run":"","success":""}' href="#">{{ lang.mailbox.last_run_reset }}</a></li>
             <li><hr class="dropdown-divider"></li>
@@ -45,7 +45,7 @@
             <li class="table_collapse_option"><a class="dropdown-item" data-datatables-expand="sync_job_table">{{ lang.datatables.expand_all }}</a></li>
             <li class="table_collapse_option"><a class="dropdown-item" data-datatables-collapse="sync_job_table">{{ lang.datatables.collapse_all }}</a></li>
           </ul>
-          <a class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addSyncJobModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.user.create_syncjob }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addSyncJobModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.user.create_syncjob }}</a>
         </div>
       </div>
     </div>

data/web/templates/mailbox/tab-templates-domains.twig

@@ -1,4 +1,4 @@
-<div class="tab-pane fade show" id="tab-templates-domains" role="tabpanel" aria-labelledby="tab-templates-domains">
+<div class="tab-pane fade" id="tab-templates-domains" role="tabpanel" aria-labelledby="tab-templates-domains">
   <div class="card mb-4">
     <div class="card-header d-flex fs-5">
       <button class="btn d-sm-block d-md-none flex-grow-1 text-start" data-bs-target="#collapse-tab-templates-domains" data-bs-toggle="collapse" aria-controls="collapse-tab-templates-domains">
@@ -10,8 +10,8 @@
         <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_templates_domain_table" data-table="templates_domain_table">{{ lang.admin.refresh }}</button>
       </div>
     </div>
-    <div id="collapse-tab-templates-domains" class="card-body collapse show" data-bs-parent="#mail-content">  
+    <div id="collapse-tab-templates-domains" class="card-body collapse" data-bs-parent="#mail-content">  
-      <div class="mass-actions-mailbox mb-4">
+      <div class="mass-actions-mailbox mb-4 d-none d-sm-block">
         <div class="btn-group">
           <button class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="domain_template" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</button>
           <button class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</button>
@@ -24,15 +24,15 @@
             {% endif %}
           </ul>
           {% if mailcow_cc_role == 'admin' %}
-          <a class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addDomainTemplateModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_template }}</a>
+          <button class="btn btn-sm btn-success" data-bs-toggle="modal" data-bs-target="#addDomainTemplateModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_template }}</button>
           {% endif %}
         </div>
       </div>
       <table id="templates_domain_table" class="table table-striped dt-responsive w-100"></table>  
       <div class="mass-actions-mailbox mt-4">
         <div class="btn-group">
-          <button class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="domain_template" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</button>
+          <button class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="domain_template" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</button>
-          <button class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</button>
+          <button class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</button>
           <ul class="dropdown-menu">
             {% if mailcow_cc_role == 'admin' %}
               <li><a class="dropdown-item" data-action="delete_selected" data-id="domain_template" data-api-url='delete/domain/template' href="#">{{ lang.mailbox.remove }}</a></li>
@@ -42,7 +42,7 @@
             {% endif %}
           </ul>
           {% if mailcow_cc_role == 'admin' %}
-          <a class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addDomainTemplateModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_template }}</a>
+          <button class="btn btn-sm btn-xs-lg btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addDomainTemplateModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_template }}</button>
           {% endif %}
         </div>
       </div>

data/web/templates/mailbox/tab-templates-mbox.twig

@@ -1,4 +1,4 @@
-<div class="tab-pane fade show" id="tab-templates-mbox" role="tabpanel" aria-labelledby="tab-templates-mbox">
+<div class="tab-pane fade" id="tab-templates-mbox" role="tabpanel" aria-labelledby="tab-templates-mbox">
   <div class="card mb-4">
     <div class="card-header d-flex fs-5">
       <button class="btn d-sm-block d-md-none flex-grow-1 text-start" data-bs-target="#collapse-tab-templates-mbox" data-bs-toggle="collapse" aria-controls="collapse-tab-templates-mbox">
@@ -10,8 +10,8 @@
         <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_templates_mbox_table" data-table="templates_mbox_table">{{ lang.admin.refresh }}</button>
       </div>
     </div>
-    <div id="collapse-tab-templates-mbox" class="card-body collapse show" data-bs-parent="#mail-content">
+    <div id="collapse-tab-templates-mbox" class="card-body collapse" data-bs-parent="#mail-content">
-      <div class="mass-actions-mailbox mb-4">
+      <div class="mass-actions-mailbox mb-4 d-none d-sm-block">
         <div class="btn-group">
           <button class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="mailbox_template" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</button>
           <button class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</button>
@@ -24,15 +24,15 @@
             {% endif %}
           </ul>
           {% if mailcow_cc_role == 'admin' %}
-          <a class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addMailboxTemplateModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_template }}</a>
+          <button class="btn btn-sm btn-success" data-bs-toggle="modal" data-bs-target="#addMailboxTemplateModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_template }}</button>
           {% endif %}
         </div>
       </div>
       <table id="templates_mbox_table" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-mailbox mt-4">
         <div class="btn-group">
-          <button class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="mailbox_template" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</button>
+          <button class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="mailbox_template" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</button>
-          <button class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</button>
+          <button class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</button>
           <ul class="dropdown-menu">
             {% if mailcow_cc_role == 'admin' %}
               <li><a class="dropdown-item" data-action="delete_selected" data-id="mailbox_template" data-api-url='delete/mailbox/template' href="#">{{ lang.mailbox.remove }}</a></li>
@@ -42,7 +42,7 @@
             {% endif %}
           </ul>
           {% if mailcow_cc_role == 'admin' %}
-          <a class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addMailboxTemplateModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_template }}</a>
+          <button class="btn btn-sm btn-xs-lg btn-success" data-bs-toggle="modal" data-bs-target="#addMailboxTemplateModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_template }}</button>
           {% endif %}
         </div>
       </div>

data/web/templates/mailbox/tab-tls-policy.twig

@@ -11,7 +11,7 @@
       </div>
     </div>
     <div id="collapse-tab-tls-policy" class="card-body collapse" data-bs-parent="#mail-content">
-      <div class="mass-actions-mailbox mb-4">
+      <div class="mass-actions-mailbox mb-4 d-none d-sm-block">
         <div class="btn-group">
           <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="tls-policy-map" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
           <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
@@ -31,8 +31,8 @@
       <table id="tls_policy_table" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-mailbox mt-4">
         <div class="btn-group">
-          <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="tls-policy-map" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="tls-policy-map" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
-          <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
           <ul class="dropdown-menu">
             <li><a class="dropdown-item" data-action="edit_selected" data-id="tls-policy-map" data-api-url='edit/tls-policy-map' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
             <li><a class="dropdown-item" data-action="edit_selected" data-id="tls-policy-map" data-api-url='edit/tls-policy-map' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
@@ -42,7 +42,7 @@
             <li class="table_collapse_option"><a class="dropdown-item" data-datatables-expand="tls_policy_table">{{ lang.datatables.expand_all }}</a></li>
             <li class="table_collapse_option"><a class="dropdown-item" data-datatables-collapse="tls_policy_table">{{ lang.datatables.collapse_all }}</a></li>
           </ul>
-          <a class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addTLSPolicyMapAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_tls_policy_map }}</a>
+          <a class="btn btn-sm btn-xs-lg btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addTLSPolicyMapAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_tls_policy_map }}</a>
         </div>
       </div>
     </div>

data/web/templates/modals/admin.twig

@@ -22,8 +22,8 @@
           </div>
           <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
+              <div class="form-check">
-                <label><input type="checkbox" value="1" name="active" checked> {{ lang.admin.active }}</label>
+                <label><input type="checkbox" class="form-check-input" value="1" name="active" checked> {{ lang.admin.active }}</label>
               </div>
             </div>
           </div>
@@ -81,8 +81,8 @@
           </div>
           <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
+              <div class="form-check">
-                <label><input type="checkbox" value="1" name="active" checked> {{ lang.admin.active }}</label>
+                <label><input type="checkbox" class="form-check-input" value="1" name="active" checked> {{ lang.admin.active }}</label>
               </div>
             </div>
           </div>
@@ -181,8 +181,8 @@
           </div>
           <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
+              <div class="form-check">
-                <label><input type="checkbox" value="1" name="active" checked> {{ lang.admin.active }}</label>
+                <label><input type="checkbox" class="form-check-input" value="1" name="active" checked> {{ lang.admin.active }}</label>
               </div>
             </div>
           </div>

data/web/templates/modals/mailbox.twig

@@ -78,16 +78,16 @@
             <div class="col-sm-10">
               <div class="btn-group">
                 <input type="radio" class="btn-check" name="quarantine_notification" id="quarantine_notification_never" autocomplete="off" value="never">
-                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_notification_never">{{ lang.user.never }}</label>
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="quarantine_notification_never">{{ lang.user.never }}</label>
 
                 <input type="radio" class="btn-check" name="quarantine_notification" id="quarantine_notification_hourly" autocomplete="off" value="hourly">
-                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_notification_hourly">{{ lang.user.hourly }}</label>
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="quarantine_notification_hourly">{{ lang.user.hourly }}</label>
 
                 <input type="radio" class="btn-check" name="quarantine_notification" id="quarantine_notification_daily" autocomplete="off" value="daily">
-                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_notification_daily">{{ lang.user.daily }}</label>
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="quarantine_notification_daily">{{ lang.user.daily }}</label>
 
                 <input type="radio" class="btn-check" name="quarantine_notification" id="quarantine_notification_weekly" autocomplete="off" value="weekly">
-                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_notification_weekly">{{ lang.user.weekly }}</label>
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="quarantine_notification_weekly">{{ lang.user.weekly }}</label>
               </div>
               <p class="text-muted"><small>{{ lang.user.quarantine_notification_info }}</small></p>
             </div>
@@ -97,13 +97,13 @@
             <div class="col-sm-10">
               <div class="btn-group">
                 <input type="radio" class="btn-check" name="quarantine_category" id="quarantine_category_reject" autocomplete="off" value="reject">
-                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_category_reject">{{ lang.user.q_reject }}</label>
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="quarantine_category_reject">{{ lang.user.q_reject }}</label>
 
                 <input type="radio" class="btn-check" name="quarantine_category" id="quarantine_category_add_header" autocomplete="off" value="add_header">
-                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_category_add_header">{{ lang.user.q_add_header }}</label>
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="quarantine_category_add_header">{{ lang.user.q_add_header }}</label>
 
                 <input type="radio" class="btn-check" name="quarantine_category" id="quarantine_category_all" autocomplete="off" value="all">
-                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="quarantine_category_all">{{ lang.user.q_all }}</label>
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="quarantine_category_all">{{ lang.user.q_all }}</label>
               </div>
               <p class="text-muted"><small>{{ lang.user.quarantine_category_info }}</small></p>
             </div>
@@ -113,10 +113,10 @@
             <div class="col-sm-10">
               <div class="btn-group">
                 <input type="checkbox" class="btn-check" name="tls_enforce_in" id="tls_enforce_in" autocomplete="off" value="1">
-                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="tls_enforce_in">{{ lang.user.tls_enforce_in }}</label>
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="tls_enforce_in">{{ lang.user.tls_enforce_in }}</label>
 
                 <input type="checkbox" class="btn-check" name="tls_enforce_out" id="tls_enforce_out" autocomplete="off" value="1">
-                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="tls_enforce_out">{{ lang.user.tls_enforce_out }}</label>
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="tls_enforce_out">{{ lang.user.tls_enforce_out }}</label>
               </div>
             </div>
           </div>
@@ -155,14 +155,13 @@
           <div class="row mb-4">
             <label class="control-label col-sm-2 text-sm-end text-sm-end">{{ lang.acl.ratelimit }}</label>
             <div class="col-sm-10">
+              <div class="input-group">
                 <input name="rl_value" id="rl_value" type="number" autocomplete="off" value="" class="form-control mb-2" placeholder="{{ lang.ratelimit.disabled }}">
                 <select name="rl_frame" id="rl_frame" class="form-control">
-                <option value="s">{{ lang.ratelimit.second }}</option>
+                {% include 'mailbox/rl-frame.twig' %}
-                <option value="m">{{ lang.ratelimit.minute }}</option>
-                <option value="h">{{ lang.ratelimit.hour }}</option>
-                <option value="d">{{ lang.ratelimit.day }}</option>
                 </select>
-              <p class="text-muted mt-3">{{ lang.edit.mbox_rl_info }}</p>
+              </div>
+              <p class="text-muted mt-1">{{ lang.edit.mbox_rl_info }}</p>
             </div>
           </div>
           <div class="row mb-2">
@@ -176,8 +175,8 @@
           </div>
           <div class="row">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
+              <div class="form-check">
-                <label><input type="checkbox" value="1" name="force_pw_update" id="force_pw_update"> {{ lang.edit.force_pw_update }}</label>
+                <label><input type="checkbox" class="form-check-input" value="1" name="force_pw_update" id="force_pw_update"> {{ lang.edit.force_pw_update }}</label>
                 <small class="text-muted">{{ lang.edit.force_pw_update_info|format(ui_texts.main_name) }}</small>
               </div>
             </div>
@@ -185,8 +184,8 @@
           {% if not skip_sogo %}
           <div class="row">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
+              <div class="form-check">
-                <label><input type="checkbox" value="1" name="sogo_access" id="sogo_access"> {{ lang.edit.sogo_access }}</label>
+                <label><input type="checkbox" class="form-check-input" value="1" name="sogo_access" id="sogo_access"> {{ lang.edit.sogo_access }}</label>
                 <small class="text-muted">{{ lang.edit.sogo_access_info }}</small>
               </div>
             </div>
@@ -248,16 +247,16 @@
             <div class="col-sm-10">
               <div class="btn-group">
                 <input type="radio" class="btn-check" name="quarantine_notification" id="template_quarantine_notification_never" autocomplete="off" value="never">
-                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="template_quarantine_notification_never">{{ lang.user.never }}</label>
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="template_quarantine_notification_never">{{ lang.user.never }}</label>
 
                 <input type="radio" class="btn-check" name="quarantine_notification" id="template_quarantine_notification_hourly" autocomplete="off" value="hourly">
-                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="template_quarantine_notification_hourly">{{ lang.user.hourly }}</label>
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="template_quarantine_notification_hourly">{{ lang.user.hourly }}</label>
 
                 <input type="radio" class="btn-check" name="quarantine_notification" id="template_quarantine_notification_daily" autocomplete="off" value="daily">
-                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="template_quarantine_notification_daily">{{ lang.user.daily }}</label>
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="template_quarantine_notification_daily">{{ lang.user.daily }}</label>
 
                 <input type="radio" class="btn-check" name="quarantine_notification" id="template_quarantine_notification_weekly" autocomplete="off" value="weekly">
-                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="template_quarantine_notification_weekly">{{ lang.user.weekly }}</label>
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="template_quarantine_notification_weekly">{{ lang.user.weekly }}</label>
               </div>
               <p class="text-muted"><small>{{ lang.user.quarantine_notification_info }}</small></p>
             </div>
@@ -267,13 +266,13 @@
             <div class="col-sm-10">
               <div class="btn-group">
                 <input type="radio" class="btn-check" name="quarantine_category" id="template_quarantine_category_reject" autocomplete="off" value="reject" >
-                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="template_quarantine_category_reject">{{ lang.user.q_reject }}</label>
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="template_quarantine_category_reject">{{ lang.user.q_reject }}</label>
 
                 <input type="radio" class="btn-check" name="quarantine_category" id="template_quarantine_category_add_header" autocomplete="off" value="add_header">
-                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="template_quarantine_category_add_header">{{ lang.user.q_add_header }}</label>
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="template_quarantine_category_add_header">{{ lang.user.q_add_header }}</label>
 
                 <input type="radio" class="btn-check" name="quarantine_category" id="template_quarantine_category_all" autocomplete="off" value="all">
-                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="template_quarantine_category_all">{{ lang.user.q_all }}</label>
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="template_quarantine_category_all">{{ lang.user.q_all }}</label>
               </div>
               <p class="text-muted"><small>{{ lang.user.quarantine_category_info }}</small></p>
             </div>
@@ -283,10 +282,10 @@
             <div class="col-sm-10">
               <div class="btn-group">
                 <input type="checkbox" class="btn-check" name="tls_enforce_in" id="template_tls_enforce_in" autocomplete="off" value="1">
-                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="template_tls_enforce_in">{{ lang.user.tls_enforce_in }}</label>
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="template_tls_enforce_in">{{ lang.user.tls_enforce_in }}</label>
 
                 <input type="checkbox" class="btn-check" name="tls_enforce_out" id="template_tls_enforce_out" autocomplete="off" value="1">
-                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary" for="template_tls_enforce_out">{{ lang.user.tls_enforce_out }}</label>
+                <label class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light" for="template_tls_enforce_out">{{ lang.user.tls_enforce_out }}</label>
               </div>
             </div>
           </div>
@@ -325,14 +324,13 @@
           <div class="row mb-4">
             <label class="control-label col-sm-2 text-sm-end text-sm-end">{{ lang.acl.ratelimit }}</label>
             <div class="col-sm-10">
+              <div class="input-group">
                 <input name="rl_value" type="number" autocomplete="off" value="" class="form-control mb-2" placeholder="{{ lang.ratelimit.disabled }}">
                 <select name="rl_frame" class="form-control">
-                <option value="s">{{ lang.ratelimit.second }}</option>
+                {% include 'mailbox/rl-frame.twig' %}
-                <option value="m">{{ lang.ratelimit.minute }}</option>
-                <option value="h">{{ lang.ratelimit.hour }}</option>
-                <option value="d">{{ lang.ratelimit.day }}</option>
                 </select>
-              <p class="text-muted mt-3">{{ lang.edit.mbox_rl_info }}</p>
+              </div>
+              <p class="text-muted mt-1">{{ lang.edit.mbox_rl_info }}</p>
             </div>
           </div>
           <hr>
@@ -347,8 +345,8 @@
           </div>
           <div class="row">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
+              <div class="form-check">
-                <label><input type="checkbox" value="1" name="force_pw_update"> {{ lang.edit.force_pw_update }}</label>
+                <label><input type="checkbox" class="form-check-input" value="1" name="force_pw_update"> {{ lang.edit.force_pw_update }}</label>
                 <small class="text-muted">{{ lang.edit.force_pw_update_info|format(ui_texts.main_name) }}</small>
               </div>
             </div>
@@ -356,8 +354,8 @@
           {% if not skip_sogo %}
           <div class="row">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
+              <div class="form-check">
-                <label><input type="checkbox" value="1" name="sogo_access"> {{ lang.edit.sogo_access }}</label>
+                <label><input type="checkbox" class="form-check-input" value="1" name="sogo_access"> {{ lang.edit.sogo_access }}</label>
                 <small class="text-muted">{{ lang.edit.sogo_access_info }}</small>
               </div>
             </div>
@@ -445,8 +443,8 @@
           {% if not skip_sogo %}
           <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
+              <div class="form-check">
-                <label><input type="checkbox" id="addDomain_gal" value="1" name="gal" checked> {{ lang.edit.gal }}</label>
+                <label><input type="checkbox" class="form-check-input" id="addDomain_gal" value="1" name="gal" checked> {{ lang.edit.gal }}</label>
                 <small class="text-muted">{{ lang.edit.gal_info|raw }}</small>
               </div>
             </div>
@@ -454,23 +452,23 @@
           {% endif %}
           <div class="row mb-4">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
+              <div class="form-check">
-                <label><input type="checkbox" id="addDomain_active" value="1" name="active" checked> {{ lang.add.active }}</label>
+                <label><input type="checkbox" class="form-check-input" id="addDomain_active" value="1" name="active" checked> {{ lang.add.active }}</label>
               </div>
             </div>
           </div>
           <hr>
           <div class="row mb-4">
             <label class="control-label col-sm-2 text-sm-end" for="rl_frame">{{ lang.acl.ratelimit }}</label>
-            <div class="col-sm-7">
+            <div class="col-sm-10">
+              <div class="input-group">
                 <input name="rl_value" id="addDomain_rl_value" type="number" class="form-control" placeholder="{{ lang.ratelimit.disabled }}">
-            </div>
-            <div class="col-sm-3">
                 <select name="rl_frame" id="addDomain_rl_frame" class="form-control">
                 {% include 'mailbox/rl-frame.twig' %}
                 </select>
               </div>
             </div>
+          </div>
           <hr>
           <div class="row mb-2">
             <label class="control-label col-sm-2 text-sm-end text-sm-end" for="dkim_selector">{{ lang.admin.dkim_domains_selector }}</label>
@@ -481,7 +479,7 @@
           <div class="row mb-4">
             <label class="control-label col-sm-2 text-sm-end text-sm-end" for="key_size">{{ lang.admin.dkim_key_length }}</label>
             <div class="col-sm-10">
-              <select data-style="btn btn-secondary btn-sm" class="form-control" id="key_size" name="key_size">
+              <select data-style="btn btn-light" class="form-control" id="key_size" name="key_size">
                 <option data-subtext="bits" value="1024">1024</option>
                 <option data-subtext="bits" value="2048" selected>2048</option>
               </select>
@@ -491,12 +489,12 @@
           <div class="row mb-4">
             <label class="control-label col-sm-2 text-sm-end text-sm-end">{{ lang.add.backup_mx_options }}</label>
             <div class="col-sm-10">
-              <div class="checkbox">
+              <div class="form-check">
-                <label><input type="checkbox" id="addDomain_relay_domain" value="1" name="backupmx"> {{ lang.add.relay_domain }}</label>
+                <label><input type="checkbox" class="form-check-input" id="addDomain_relay_domain" value="1" name="backupmx"> {{ lang.add.relay_domain }}</label>
                 <br>
-                <label><input type="checkbox" id="addDomain_relay_all" value="1" name="relay_all_recipients"> {{ lang.add.relay_all }}</label>
+                <label><input type="checkbox" class="form-check-input" id="addDomain_relay_all" value="1" name="relay_all_recipients"> {{ lang.add.relay_all }}</label>
                 <p>{{ lang.add.relay_all_info|raw }}</p>
-                <label><input type="checkbox" id="addDomain_relay_unknown_only" value="1" name="relay_unknown_only"> {{ lang.add.relay_unknown_only }}</label>
+                <label><input type="checkbox" class="form-check-input" id="addDomain_relay_unknown_only" value="1" name="relay_unknown_only"> {{ lang.add.relay_unknown_only }}</label>
                 <br>
                 <p>{{ lang.add.relay_transport_info|raw }}</p>
               </div>
@@ -508,7 +506,6 @@
               {% if not skip_sogo %}
               <button class="btn btn-xs-lg btn-xs-half d-block d-sm-inline btn-secondary" data-action="add_item" data-id="add_domain" data-api-url='add/domain' data-api-attr='{"tags": []}' href="#">{{ lang.add.add_domain_only }}</button>
               <button class="btn btn-xs-lg btn-xs-half d-block d-sm-inline btn-secondary" data-action="add_item" data-id="add_domain" data-api-url='add/domain' data-api-attr='{"restart_sogo":"1", "tags": []}' href="#">{{ lang.add.add_domain_restart }}</button>
-              <div class="clearfix visible-xs"></div>
               {% else %}
               <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="add_item" data-id="add_domain" data-api-url='add/domain' data-api-attr='{"tags": []}' href="#">{{ lang.add.add }}</button>
               {% endif %}
@@ -584,34 +581,31 @@
           </div>
           <div class="row">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
+              <div class="form-check">
-                <label><input type="checkbox" value="1" name="gal" checked> {{ lang.add.gal }}</label>
+                <label><input type="checkbox" class="form-check-input" value="1" name="gal" checked> {{ lang.add.gal }}</label>
                 <small class="text-muted">{{ lang.add.gal_info|raw }}</small>
               </div>
             </div>
           </div>
           <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
+              <div class="form-check">
-                <label><input type="checkbox" value="1" name="active" checked> {{ lang.add.active }}</label>
+                <label><input type="checkbox" class="form-check-input" value="1" name="active" checked> {{ lang.add.active }}</label>
               </div>
             </div>
           </div>
           <hr>
           <div class="row">
             <label class="control-label col-sm-2 text-sm-end text-sm-end">{{ lang.edit.ratelimit }}</label>
-            <div class="col-sm-7">
+            <div class="col-sm-10">
+              <div class="input-group">
                 <input name="rl_value" type="number" value="" autocomplete="off" class="form-control mb-4" placeholder="{{ lang.ratelimit.disabled }}">
-            </div>
-            <div class="col-sm-3">
                 <select name="rl_frame" class="form-control">
-                <option value="s">{{ lang.ratelimit.second }}</option>
+                {% include 'mailbox/rl-frame.twig' %}
-                <option value="m">{{ lang.ratelimit.minute }}</option>
-                <option value="h">{{ lang.ratelimit.hour }}</option>
-                <option value="d">{{ lang.ratelimit.day }}</option>
                 </select>
               </div>
             </div>
+          </div>
           {% endif %}
           <hr>
           <div class="row mb-2">
@@ -623,7 +617,7 @@
           <div class="row mb-4">
             <label class="control-label col-sm-2 text-sm-end text-sm-end" for="key_size">{{ lang.admin.dkim_key_length }}</label>
             <div class="col-sm-10">
-              <select data-style="btn btn-secondary btn-sm" class="form-control" id="key_size" name="key_size">
+              <select data-style="btn btn-light" class="form-control" id="key_size" name="key_size">
                 <option data-subtext="bits">1024</option>
                 <option data-subtext="bits" selected>2048</option>
               </select>
@@ -633,12 +627,12 @@
           <div class="row mb-2">
             <label class="control-label col-sm-2 text-sm-end text-sm-end">{{ lang.edit.backup_mx_options }}</label>
             <div class="col-sm-10">
-              <div class="checkbox">
+              <div class="form-check">
-                <label><input type="checkbox" value="1" name="backupmx"> {{ lang.edit.relay_domain }}</label>
+                <label><input type="checkbox" class="form-check-input" value="1" name="backupmx"> {{ lang.edit.relay_domain }}</label>
                 <br>
-                <label><input type="checkbox" value="1" name="relay_all_recipients"> {{ lang.edit.relay_all }}</label>
+                <label><input type="checkbox" class="form-check-input" value="1" name="relay_all_recipients"> {{ lang.edit.relay_all }}</label>
                 <p>{{ lang.edit.relay_all_info|raw }}</p>
-                <label><input type="checkbox" value="1" name="relay_unknown_only"> {{ lang.edit.relay_unknown_only }}</label>
+                <label><input type="checkbox" class="form-check-input" value="1" name="relay_unknown_only"> {{ lang.edit.relay_unknown_only }}</label>
                 <br>
                 <p>{{ lang.edit.relay_transport_info|raw }}</p>
               </div>
@@ -708,8 +702,8 @@
           </div>
           <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
+              <div class="form-check">
-                <label><input type="checkbox" value="1" name="active" checked> {{ lang.add.active }}</label>
+                <label><input type="checkbox" class="form-check-input" value="1" name="active" checked> {{ lang.add.active }}</label>
               </div>
             </div>
           </div>
@@ -746,19 +740,19 @@
             <div class="col-sm-10">
               <textarea id="textarea_alias_goto" autocorrect="off" autocapitalize="none" class="form-control" rows="5" id="goto" name="goto" required></textarea>
               <p>{{ lang.add.target_address_info|raw }}</p>
-              <div class="checkbox">
+              <div class="form-check">
-                <label><input class="goto_checkbox" type="checkbox" value="1" name="goto_null"> {{ lang.add.goto_null }}</label>
+                <label><input class="form-check-input goto_checkbox" type="checkbox" value="1" name="goto_null"> {{ lang.add.goto_null }}</label>
               </div>
-              <div class="checkbox">
+              <div class="form-check">
-                <label><input class="goto_checkbox" type="checkbox" value="1" name="goto_spam"> {{ lang.add.goto_spam|raw }}</label>
+                <label><input class="form-check-input goto_checkbox" type="checkbox" value="1" name="goto_spam"> {{ lang.add.goto_spam|raw }}</label>
               </div>
-              <div class="checkbox">
+              <div class="form-check">
-                <label><input class="goto_checkbox" type="checkbox" value="1" name="goto_ham"> {{ lang.add.goto_ham|raw }}</label>
+                <label><input class="form-check-input goto_checkbox" type="checkbox" value="1" name="goto_ham"> {{ lang.add.goto_ham|raw }}</label>
               </div>
               {% if not skip_sogo %}
               <hr>
-              <div class="checkbox">
+              <div class="form-check">
-                <label><input type="checkbox" value="1" name="sogo_visible" checked> {{ lang.edit.sogo_visible }}</label>
+                <label><input type="checkbox" class="form-check-input" value="1" name="sogo_visible" checked> {{ lang.edit.sogo_visible }}</label>
               </div>
               <p class="text-muted">{{ lang.edit.sogo_visible_info }}</p>
               {% endif %}
@@ -766,8 +760,8 @@
           </div>
           <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
+              <div class="form-check">
-                <label><input type="checkbox" value="1" name="active" checked> {{ lang.add.active }}</label>
+                <label><input type="checkbox" class="form-check-input" value="1" name="active" checked> {{ lang.add.active }}</label>
               </div>
             </div>
           </div>
@@ -811,23 +805,23 @@
           </div>
           <div class="row mb-4">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
+              <div class="form-check">
-                <label><input type="checkbox" value="1" name="active" checked> {{ lang.add.active }}</label>
+                <label><input type="checkbox" class="form-check-input" value="1" name="active" checked> {{ lang.add.active }}</label>
               </div>
             </div>
           </div>
           <hr>
           <div class="row mb-2">
             <label class="control-label col-sm-2 text-sm-end" for="rl_frame">{{ lang.acl.ratelimit }}</label>
-            <div class="col-sm-7">
+            <div class="col-sm-10">
+              <div class="input-group">
                 <input name="rl_value" type="number" class="form-control" placeholder="{{ lang.ratelimit.disabled }}">
-            </div>
-            <div class="col-sm-3">
                 <select name="rl_frame" class="form-control">
                 {% include 'mailbox/rl-frame.twig' %}
                 </select>
               </div>
             </div>
+          </div>
           <hr>
           <div class="row mb-2">
             <label class="control-label col-sm-2 text-sm-end" for="dkim_selector2">{{ lang.admin.dkim_domains_selector }}</label>
@@ -838,7 +832,7 @@
           <div class="row mb-4">
             <label class="control-label col-sm-2 text-sm-end" for="key_size2">{{ lang.admin.dkim_key_length }}</label>
             <div class="col-sm-10">
-              <select data-style="btn btn-secondary btn-sm" class="form-control" id="key_size2" name="key_size">
+              <select data-style="btn btn-light" class="form-control" id="key_size2" name="key_size">
                 <option data-subtext="bits">1024</option>
                 <option data-subtext="bits" selected>2048</option>
               </select>
@@ -967,50 +961,50 @@
           </div>
           <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
+              <div class="form-check">
-                <label><input type="checkbox" value="1" name="delete2duplicates" checked> {{ lang.add.delete2duplicates }} (--delete2duplicates)</label>
+                <label><input type="checkbox" class="form-check-input" value="1" name="delete2duplicates" checked> {{ lang.add.delete2duplicates }} (--delete2duplicates)</label>
               </div>
             </div>
           </div>
           <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
+              <div class="form-check">
-                <label><input type="checkbox" value="1" name="delete1"> {{ lang.add.delete1 }} (--delete1)</label>
+                <label><input type="checkbox" class="form-check-input" value="1" name="delete1"> {{ lang.add.delete1 }} (--delete1)</label>
               </div>
             </div>
           </div>
           <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
+              <div class="form-check">
-                <label><input type="checkbox" value="1" name="delete2"> {{ lang.add.delete2 }} (--delete2)</label>
+                <label><input type="checkbox" class="form-check-input" value="1" name="delete2"> {{ lang.add.delete2 }} (--delete2)</label>
               </div>
             </div>
           </div>
           <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
+              <div class="form-check">
-                <label><input type="checkbox" value="1" name="automap" checked> {{ lang.add.automap }} (--automap)</label>
+                <label><input type="checkbox" class="form-check-input" value="1" name="automap" checked> {{ lang.add.automap }} (--automap)</label>
               </div>
             </div>
           </div>
           <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
+              <div class="form-check">
-                <label><input type="checkbox" value="1" name="skipcrossduplicates"> {{ lang.add.skipcrossduplicates }} (--skipcrossduplicates)</label>
+                <label><input type="checkbox" class="form-check-input" value="1" name="skipcrossduplicates"> {{ lang.add.skipcrossduplicates }} (--skipcrossduplicates)</label>
               </div>
             </div>
           </div>
           <div class="row mb-4">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
+              <div class="form-check">
-                <label><input type="checkbox" value="1" name="subscribeall" checked> {{ lang.add.subscribeall }} (--subscribeall)</label>
+                <label><input type="checkbox" class="form-check-input" value="1" name="subscribeall" checked> {{ lang.add.subscribeall }} (--subscribeall)</label>
               </div>
             </div>
           </div>
           <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
+              <div class="form-check">
-                <label><input type="checkbox" value="1" name="active" checked> {{ lang.add.active }}</label>
+                <label><input type="checkbox" class="form-check-input" value="1" name="active" checked> {{ lang.add.active }}</label>
               </div>
             </div>
           </div>
@@ -1068,8 +1062,8 @@
           </div>
           <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
+              <div class="form-check">
-                <label><input type="checkbox" value="1" name="active" checked> {{ lang.add.active }}</label>
+                <label><input type="checkbox" class="form-check-input" value="1" name="active" checked> {{ lang.add.active }}</label>
               </div>
             </div>
           </div>
@@ -1121,8 +1115,8 @@
           </div>
           <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
+              <div class="form-check">
-                <label><input type="checkbox" value="1" name="active" checked> {{ lang.add.active }}</label>
+                <label><input type="checkbox" class="form-check-input" value="1" name="active" checked> {{ lang.add.active }}</label>
               </div>
             </div>
           </div>
@@ -1162,8 +1156,8 @@
           </div>
           <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
+              <div class="form-check">
-                <label><input type="checkbox" value="1" name="active" checked> {{ lang.add.active }}</label>
+                <label><input type="checkbox" class="form-check-input" value="1" name="active" checked> {{ lang.add.active }}</label>
               </div>
             </div>
           </div>
@@ -1218,8 +1212,8 @@
           </div>
           <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
+              <div class="form-check">
-                <label><input type="checkbox" value="1" name="active" checked> {{ lang.add.active }}</label>
+                <label><input type="checkbox" class="form-check-input" value="1" name="active" checked> {{ lang.add.active }}</label>
               </div>
             </div>
           </div>

data/web/templates/modals/user.twig

@@ -127,50 +127,50 @@
           </div>
           <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
+              <div class="form-check">
-                <label><input type="checkbox" value="1" name="delete2duplicates" checked> {{ lang.add.delete2duplicates }} (--delete2duplicates)</label>
+                <label><input type="checkbox" class="form-check-input" value="1" name="delete2duplicates" checked> {{ lang.add.delete2duplicates }} (--delete2duplicates)</label>
               </div>
             </div>
           </div>
           <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
+              <div class="form-check">
-                <label><input type="checkbox" value="1" name="delete1"> {{ lang.add.delete1 }} (--delete1)</label>
+                <label><input type="checkbox" class="form-check-input" value="1" name="delete1"> {{ lang.add.delete1 }} (--delete1)</label>
               </div>
             </div>
           </div>
           <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
+              <div class="form-check">
-                <label><input type="checkbox" value="1" name="delete2"> {{ lang.add.delete2 }} (--delete2)</label>
+                <label><input type="checkbox" class="form-check-input" value="1" name="delete2"> {{ lang.add.delete2 }} (--delete2)</label>
               </div>
             </div>
           </div>
           <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
+              <div class="form-check">
-                <label><input type="checkbox" value="1" name="automap" checked> {{ lang.add.automap }} (--automap)</label>
+                <label><input type="checkbox" class="form-check-input" value="1" name="automap" checked> {{ lang.add.automap }} (--automap)</label>
               </div>
             </div>
           </div>
           <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
+              <div class="form-check">
-                <label><input type="checkbox" value="1" name="skipcrossduplicates"> {{ lang.add.skipcrossduplicates }} (--skipcrossduplicates)</label>
+                <label><input type="checkbox" class="form-check-input" value="1" name="skipcrossduplicates"> {{ lang.add.skipcrossduplicates }} (--skipcrossduplicates)</label>
               </div>
             </div>
           </div>
           <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
+              <div class="form-check">
-                <label><input type="checkbox" value="1" name="subscribeall" checked> {{ lang.add.subscribeall }} (--subscribeall)</label>
+                <label><input type="checkbox" class="form-check-input" value="1" name="subscribeall" checked> {{ lang.add.subscribeall }} (--subscribeall)</label>
               </div>
             </div>
           </div>
           <div class="row mb-4">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
+              <div class="form-check">
-                <label><input type="checkbox" value="1" name="active" checked> {{ lang.add.active }}</label>
+                <label><input type="checkbox" class="form-check-input" value="1" name="active" checked> {{ lang.add.active }}</label>
               </div>
             </div>
           </div>
@@ -228,8 +228,8 @@
           </div>
           <div class="row mb-2">
             <div class="offset-sm-2 col-sm-10">
-              <div class="checkbox">
+              <div class="form-check">
-                <label><input type="checkbox" value="1" name="active" checked> {{ lang.add.active }}</label>
+                <label><input type="checkbox" class="form-check-input" value="1" name="active" checked> {{ lang.add.active }}</label>
               </div>
             </div>
           </div>
@@ -285,15 +285,13 @@
             <label class="control-label col-sm-3" for="user_old_pass">{{ lang.user.password_now }}</label>
             <div class="col-sm-9">
               <input type="password" class="form-control" name="user_old_pass" autocomplete="off" required>
-            </div>
-          </div>
               {% if number_of_app_passwords > 0 %}
-            <div class="row mb-2">
+                <div class="invalid-feedback d-block">
-              <div class="offset-sm-3 col-sm-9">
+                  {{ lang.user.change_password_hint_app_passwords|format(number_of_app_passwords) }}
-                <small>{{ lang.user.change_password_hint_app_passwords | replace({'{{number_of_app_passwords}}': number_of_app_passwords}) }}</small>
-              </div>
                 </div>
               {% endif %}
+            </div>
+          </div>
           <div class="row">
             <div class="offset-sm-3 col-sm-9">
               <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="pwchange" data-item="null" data-api-url='edit/self' data-api-attr='{}' href="#">{{ lang.user.change_password }}</button>

data/web/templates/user/Pushover.twig

@@ -80,8 +80,8 @@
               </div>
             </div>
             <div class="col-sm-12">
-                <div class="checkbox">
+                <div class="form-check">
-                  <label><input type="checkbox" value="1" name="active"{% if pushover_data.active == '1' %} checked{% endif %}> {{ lang.user.active }}</label>
+                  <label><input type="checkbox" class="form-check-input" value="1" name="active"{% if pushover_data.active == '1' %} checked{% endif %}> {{ lang.user.active }}</label>
                 </div>
               </div>
               <div class="col-sm-12">
@@ -95,11 +95,11 @@
                   <div class="form-group">
                     <label for="text">{{ lang.user.pushover_sender_regex }}</label>
                     <input type="text" class="form-control mb-4" name="senders_regex" value="{{ pushover_data.senders_regex }}" placeholder="/(.*@example\.org$|^foo@example\.com$)/i" regex="true">
-                    <div class="checkbox">
+                    <div class="form-check">
-                      <label><input type="checkbox" value="1" name="evaluate_x_prio"{% if pushover_data.attributes.evaluate_x_prio == '1' %} checked{% endif %}> {{ lang.user.pushover_evaluate_x_prio|raw }}</label>
+                      <label><input type="checkbox" class="form-check-input" value="1" name="evaluate_x_prio"{% if pushover_data.attributes.evaluate_x_prio == '1' %} checked{% endif %}> {{ lang.user.pushover_evaluate_x_prio|raw }}</label>
                     </div>
-                    <div class="checkbox">
+                    <div class="form-check">
-                      <label><input type="checkbox" value="1" name="only_x_prio"{% if pushover_data.attributes.only_x_prio == '1' %} checked{% endif %}> {{ lang.user.pushover_only_x_prio|raw }}</label>
+                      <label><input type="checkbox" class="form-check-input" value="1" name="only_x_prio"{% if pushover_data.attributes.only_x_prio == '1' %} checked{% endif %}> {{ lang.user.pushover_only_x_prio|raw }}</label>
                     </div>
                   </div>
                 </div>

data/web/templates/user/Spamfilter.twig

@@ -45,9 +45,7 @@
           <form class="form-inline mb-4" data-id="add_wl_policy_mailbox">
             <div class="input-group" data-acl="{{ acl.spam_policy }}">
               <input type="text" class="form-control" name="object_from" placeholder="*@example.org" required>
-              <span class="input-group-btn">
               <button class="btn btn-secondary" data-action="add_item" data-id="add_wl_policy_mailbox" data-api-url='add/mailbox-policy' data-api-attr='{"username": {{ mailcow_cc_username|json_encode|raw }},"object_list":"wl"}' href="#"><i class="bi bi-plus-lg"></i> {{ lang.user.spamfilter_table_add }}</button>
-              </span>
             </div>
           </form>
           <table id="wl_policy_mailbox_table" class="table table-striped dt-responsive w-100"></table>
@@ -69,9 +67,7 @@
           <form class="form-inline mb-4" data-id="add_bl_policy_mailbox">
             <div class="input-group" data-acl="{{ acl.spam_policy }}">
               <input type="text" class="form-control" name="object_from" placeholder="*@example.org" required>
-              <span class="input-group-btn">
               <button class="btn btn-secondary" data-action="add_item" data-id="add_bl_policy_mailbox" data-api-url='add/mailbox-policy' data-api-attr='{"username": {{ mailcow_cc_username|json_encode|raw }},"object_list":"bl"}' href="#"><i class="bi bi-plus-lg"></i> {{ lang.user.spamfilter_table_add }}</button>
-              </span>
             </div>
           </form>
           <table id="bl_policy_mailbox_table" class="table table-striped dt-responsive w-100"></table>

data/web/templates/user/tab-user-auth.twig

@@ -129,13 +129,13 @@
         </div>
       </div>
       <div class="row">
-        <div class="col-md-3 col-12 text-sm-end text-start mb-4"><i class="bi bi-file-earmark-text"></i> {{ lang.user.apple_connection_profile }}<br />{{ lang.user.with_app_password }}:</div>
+        <div class="col-md-3 col-12 text-sm-end text-start mb-4"><i class="bi bi-file-earmark-text"></i> {{ lang.user.apple_connection_profile }}<br class="d-none d-lg-block" />{{ lang.user.with_app_password }}:</div>
         <div class="col-md-9 col-12">
           <p><i class="bi bi-file-earmark-post"></i> <a href="/mobileconfig.php?only_email&amp;app_password">{{ lang.user.email }}</a> <small>IMAP, SMTP</small></p>
-          <p class="text-muted">{{ lang.user.apple_connection_profile_mailonly }} {{ lang.user.apple_connection_profile_with_app_password }}</p>
+          <p class="text-muted">{{ lang.user.apple_connection_profile_mailonly }}<br /> {{ lang.user.apple_connection_profile_with_app_password }}</p>
           {% if not skip_sogo %}
           <p><i class="bi bi-file-earmark-post"></i> <a href="/mobileconfig.php?app_password">{{ lang.user.email_and_dav }}</a> <small>IMAP, SMTP, Cal/CardDAV</small></p>
-          <p class="text-muted">{{ lang.user.apple_connection_profile_complete }} {{ lang.user.apple_connection_profile_with_app_password }}</p>
+          <p class="text-muted">{{ lang.user.apple_connection_profile_complete }}<br /> {{ lang.user.apple_connection_profile_with_app_password }}</p>
           {% endif %}
         </div>
       </div>

data/web/templates/user/tab-user-settings.twig

@@ -12,19 +12,19 @@
         <div class="col-sm-3 col-12 text-sm-end text-start text-xs-bold mb-4">{{ lang.user.tag_handling }}:</div>
         <div class="col-sm-9 col-12">
           <div class="btn-group" data-acl="{{ acl.delimiter_action }}">
-            <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline btn-light{% if get_tagging_options == 'subfolder' %} btn-dark{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline{% if get_tagging_options == 'subfolder' %} btn-dark{% else %} btn-light{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailcow_cc_username }}"
             data-id="delimiter_action"
             data-api-url='edit/delimiter_action'
             data-api-attr='{"tagged_mail_handler":"subfolder"}'>{{ lang.user.tag_in_subfolder }}</button>
-            <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline btn-light{% if get_tagging_options == 'subject' %} btn-dark{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline{% if get_tagging_options == 'subject' %} btn-dark{% else %} btn-light{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailcow_cc_username }}"
             data-id="delimiter_action"
             data-api-url='edit/delimiter_action'
             data-api-attr='{"tagged_mail_handler":"subject"}'>{{ lang.user.tag_in_subject }}</button>
-            <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline btn-light{% if get_tagging_options == 'none' %} btn-dark{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline{% if get_tagging_options == 'none' %} btn-dark{% else %} btn-light{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailcow_cc_username }}"
             data-id="delimiter_action"
@@ -40,13 +40,13 @@
         <div class="col-sm-3 col-12 text-sm-end text-start text-xs-bold mb-4">{{ lang.user.tls_policy }}:</div>
         <div class="col-sm-9 col-12">
           <div class="btn-group" data-acl="{{ acl.tls_policy }}">
-            <button type="button" class="btn btn-sm btn-xs-half d-block d-sm-inline btn-light{% if get_tls_policy.tls_enforce_in == '1' %} btn-dark"{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-half d-block d-sm-inline{% if get_tls_policy.tls_enforce_in == '1' %} btn-dark"{% else %} btn-light{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailcow_cc_username }}"
             data-id="tls_policy"
             data-api-url='edit/tls_policy'
             data-api-attr='{"tls_enforce_in": {% if get_tls_policy.tls_enforce_in == '1' %}0{% else %}1{% endif %} }'>{{ lang.user.tls_enforce_in }}</button>
-            <button type="button" class="btn btn-sm btn-xs-half d-block d-sm-inline btn-light{% if get_tls_policy.tls_enforce_out == '1' %} btn-dark"{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-half d-block d-sm-inline{% if get_tls_policy.tls_enforce_out == '1' %} btn-dark{% else %} btn-light{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailcow_cc_username }}"
             data-id="tls_policy"
@@ -61,25 +61,25 @@
         <div class="col-sm-3 col-12 text-sm-end text-start text-xs-bold mb-4">{{ lang.user.quarantine_notification }}:</div>
         <div class="col-sm-9 col-12">
           <div class="btn-group" data-acl="{{ acl.quarantine_notification }}">
-            <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light{% if quarantine_notification == 'never' %} btn-dark{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline{% if quarantine_notification == 'never' %} btn-dark{% else %} btn-light{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailcow_cc_username }}"
             data-id="quarantine_notification"
             data-api-url='edit/quarantine_notification'
             data-api-attr='{"quarantine_notification":"never"}'>{{ lang.user.never }}</button>
-            <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light{% if quarantine_notification == 'hourly' %} btn-dark{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline{% if quarantine_notification == 'hourly' %} btn-dark{% else %} btn-light{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailcow_cc_username }}"
             data-id="quarantine_notification"
             data-api-url='edit/quarantine_notification'
             data-api-attr='{"quarantine_notification":"hourly"}'>{{ lang.user.hourly }}</button>
-            <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light{% if quarantine_notification == 'daily' %} btn-dark{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline{% if quarantine_notification == 'daily' %} btn-dark{% else %} btn-light{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailcow_cc_username }}"
             data-id="quarantine_notification"
             data-api-url='edit/quarantine_notification'
             data-api-attr='{"quarantine_notification":"daily"}'>{{ lang.user.daily }}</button>
-            <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-light{% if quarantine_notification == 'weekly' %} btn-dark{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline{% if quarantine_notification == 'weekly' %} btn-dark{% else %} btn-light{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailcow_cc_username }}"
             data-id="quarantine_notification"
@@ -93,19 +93,19 @@
         <div class="col-sm-3 col-12 text-sm-end text-start text-xs-bold mb-4">{{ lang.user.quarantine_category }}:</div>
         <div class="col-sm-9 col-12">
           <div class="btn-group" data-acl="{{ acl.quarantine_category }}">
-            <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline btn-light{% if quarantine_category == 'reject' %} btn-dark{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline{% if quarantine_category == 'reject' %} btn-dark{% else %} btn-light{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailcow_cc_username }}"
             data-id="quarantine_category"
             data-api-url='edit/quarantine_category'
             data-api-attr='{"quarantine_category":"reject"}'>{{ lang.user.q_reject }}</button>
-            <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline btn-light{% if quarantine_category == 'add_header' %} btn-dark{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline{% if quarantine_category == 'add_header' %} btn-dark{% else %} btn-light{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailcow_cc_username }}"
             data-id="quarantine_category"
             data-api-url='edit/quarantine_category'
             data-api-attr='{"quarantine_category":"add_header"}'>{{ lang.user.q_add_header }}</button>
-            <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline btn-light{% if quarantine_category == 'all' %} btn-dark{% endif %}"
+            <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline{% if quarantine_category == 'all' %} btn-dark{% else %} btn-light{% endif %}"
             data-action="edit_selected"
             data-item="{{ mailcow_cc_username }}"
             data-id="quarantine_category"

data/web/user.php

@@ -62,16 +62,18 @@ elseif (isset($_SESSION['mailcow_cc_role']) && $_SESSION['mailcow_cc_role'] == '
     $user_domains = array_merge($user_domains, $user_alias_domains);
   }
 
-  $template = 'user.twig';
+  // get number of app passwords
   $number_of_app_passwords = 0;
   foreach (app_passwd("get") as $app_password)
   {
       $app_password = app_passwd("details", $app_password['id']);
       if ($app_password['active'])
       {
-          ++$number_of_app_passwords;
+          $number_of_app_passwords++;
       }
   }
+
+  $template = 'user.twig';
   $template_data = [
     'acl' => $_SESSION['acl'],
     'acl_json' => json_encode($_SESSION['acl']),