From fea89c5231abb2648713146fd36161cb5e07cede Mon Sep 17 00:00:00 2001
From: James Cole <james@firefly-iii.org>
Date: Sat, 14 Mar 2026 06:16:53 +0100
Subject: [PATCH] Remove and replace inline styles.

---
 public/v1/css/firefly.css                     | 13 ++++++
 resources/views/layout/default.twig           |  2 +-
 resources/views/layout/empty.twig             |  2 +-
 resources/views/layout/guest.twig             |  2 +-
 resources/views/layout/install.twig           |  4 +-
 resources/views/list/ale.twig                 |  4 +-
 resources/views/list/attachments.twig         |  2 +-
 resources/views/list/bills.twig               | 10 ++---
 resources/views/list/groups.twig              | 42 +++++++++----------
 resources/views/partials/empty.twig           |  2 +-
 resources/views/partials/journal-row.twig     |  1 -
 resources/views/partials/transaction-row.twig |  1 -
 resources/views/piggy-banks/index.twig        |  2 +-
 resources/views/recurring/create.twig         |  2 +-
 resources/views/recurring/edit.twig           |  2 +-
 resources/views/recurring/index.twig          |  6 +--
 resources/views/reports/audit/report.twig     |  8 ++--
 resources/views/reports/index.twig            |  2 +-
 .../v2/errors/FireflyException.blade.php      |  2 +-
 19 files changed, 59 insertions(+), 50 deletions(-)
 delete mode 100644 resources/views/partials/journal-row.twig
 delete mode 100644 resources/views/partials/transaction-row.twig

diff --git a/public/v1/css/firefly.css b/public/v1/css/firefly.css
index 221e26fd85..0708c582e4 100644
--- a/public/v1/css/firefly.css
+++ b/public/v1/css/firefly.css
@@ -35,9 +35,22 @@
 
 /* install box border */
 .install-box-border {border:1px #ddd solid;}
+.install-box-title {font-family: monospace;font-size:16pt;}
+
+/* some borders and lines */
+.top-light-border {border-top:1px #aaa solid;}
+.top-dark-border {border-top:1px #777 solid;}
+.bottom-light-border {border-bottom:1px #aaa solid;}
+
+/* misc */
+.calendar-display {max-width: 400px;margin: 0 auto;}
+.empty-high-block {height:400px;}
+.fw-normal {font-weight: normal;}
 
 /** tables **/
 th.ten {width:10%;}
+td.twenty th.twenty {width:25%;}
+td.onetwenty {width:120px;}
 td.quarter th.quarter {width:25%;}
 td.thirty th.thirty {width:30%;}
 td.third th.third {width:33%;}
diff --git a/resources/views/layout/default.twig b/resources/views/layout/default.twig
index 8c23bb8a19..6a69ccbf9b 100644
--- a/resources/views/layout/default.twig
+++ b/resources/views/layout/default.twig
@@ -290,7 +290,7 @@
     </script>
     <noscript><p><img
                 src="//{{ config('firefly.tracker_url') }}/matomo.php?idsite={{ config('firefly.tracker_site_id') }}&amp;rec=1"
-                style="border:0;" alt=""/></p></noscript>
+                class="no-border" alt=""/></p></noscript>
 {% endif %}
 
 <form id="logout-form" action="{{ route('logout') }}" method="POST" class="hidden">
diff --git a/resources/views/layout/empty.twig b/resources/views/layout/empty.twig
index 7cbb13d537..afc1c18025 100644
--- a/resources/views/layout/empty.twig
+++ b/resources/views/layout/empty.twig
@@ -84,7 +84,7 @@
             s.parentNode.insertBefore(g, s);
         })();
     </script>
-    <noscript><p><img src="//{{ config('firefly.tracker_url') }}/matomo.php?idsite={{ config('firefly.tracker_site_id') }}&amp;rec=1" style="border:0;" alt=""/></p></noscript>
+    <noscript><p><img src="//{{ config('firefly.tracker_url') }}/matomo.php?idsite={{ config('firefly.tracker_site_id') }}&amp;rec=1" class="no-border" alt=""/></p></noscript>
 {% endif %}
 
 </body>
diff --git a/resources/views/layout/guest.twig b/resources/views/layout/guest.twig
index 349f91ca4e..b2b714c0f4 100644
--- a/resources/views/layout/guest.twig
+++ b/resources/views/layout/guest.twig
@@ -98,7 +98,7 @@
             s.parentNode.insertBefore(g, s);
         })();
     </script>
-    <noscript><p><img src="//{{ config('firefly.tracker_url') }}/matomo.php?idsite={{ config('firefly.tracker_site_id') }}&amp;rec=1" style="border:0;" alt=""/></p></noscript>
+    <noscript><p><img src="//{{ config('firefly.tracker_url') }}/matomo.php?idsite={{ config('firefly.tracker_site_id') }}&amp;rec=1" class="no-border" alt=""/></p></noscript>
 {% endif %}
 
 </body>
diff --git a/resources/views/layout/install.twig b/resources/views/layout/install.twig
index 7693e2265d..89792c970f 100644
--- a/resources/views/layout/install.twig
+++ b/resources/views/layout/install.twig
@@ -26,7 +26,7 @@
 <div class="login-box">
     <div class="login-logo">
         <strong>Firefly</strong>III<br/>
-        <span style="font-family: monospace;font-size:16pt;">installation and upgrade</span>
+        <span class="install-box-title">installation and upgrade</span>
     </div>
     {% block content %}{% endblock %}
 </div>
@@ -57,7 +57,7 @@
             s.parentNode.insertBefore(g, s);
         })();
     </script>
-    <noscript><p><img src="//{{ config('firefly.tracker_url') }}/matomo.php?idsite={{ config('firefly.tracker_site_id') }}&amp;rec=1" style="border:0;" alt=""/></p></noscript>
+    <noscript><p><img src="//{{ config('firefly.tracker_url') }}/matomo.php?idsite={{ config('firefly.tracker_site_id') }}&amp;rec=1" class="no-border" alt=""/></p></noscript>
 {% endif %}
 
 </body>
diff --git a/resources/views/list/ale.twig b/resources/views/list/ale.twig
index 4084f4b920..b8fd03e782 100644
--- a/resources/views/list/ale.twig
+++ b/resources/views/list/ale.twig
@@ -7,7 +7,7 @@
     <tbody>
     {% for logEntry in logEntries %}
         <tr>
-            <th style="width:20%;" scope="row">
+            <th class="twenty" scope="row">
                 {# link to object: #}
                 {% if 'FireflyIII\\Models\\Rule' == logEntry.changer_type %}
                     <a href="{{ route('rules.edit', [logEntry.changer_id] ) }}">
@@ -18,7 +18,7 @@
                         {{ logEntry.changer_type|replace({"FireflyIII\\Models\\": ""})|replace({"FireflyIII\\": ""}) }} #{{ logEntry.changer_id }}
                     </a>
             </th>
-            <td style="width:30%;" title="{{ logEntry.created_at.isoFormat(dateTimeFormat) }}">
+            <td class="thirty" title="{{ logEntry.created_at.isoFormat(dateTimeFormat) }}">
                 {{ trans('firefly.ale_action_'~logEntry.action) }}
             </td>
             <td>
diff --git a/resources/views/list/attachments.twig b/resources/views/list/attachments.twig
index e67e669062..61e359c0dc 100644
--- a/resources/views/list/attachments.twig
+++ b/resources/views/list/attachments.twig
@@ -1,7 +1,7 @@
 <table class="table table-responsive table-hover">
     {% for attachment in attachments %}
         <tr>
-            <td style="width:120px;">
+            <td class="onetwenty">
                 <div class="btn-group btn-group-xs">
                     <a href="{{ route('attachments.edit', attachment.id) }}" class="btn btn-default"><span
                                 class="fa fa-pencil"></span></a>
diff --git a/resources/views/list/bills.twig b/resources/views/list/bills.twig
index 29f928f1aa..ff4cbcc562 100644
--- a/resources/views/list/bills.twig
+++ b/resources/views/list/bills.twig
@@ -1,4 +1,4 @@
-<div style="padding-left:8px;">
+<div class="pl-2">
     {{ paginator.links('pagination.bootstrap-4')|raw }}
 </div>
 <table class="table table-responsive table-hover" id="bill-sortable">
@@ -63,9 +63,7 @@
                         {% endif %}
                     </td>
                     <td class="text-right">
-                <span style="margin-right:5px;"
-                      title="{{ formatAmountBySymbol(entry.amount_min, entry.currency_symbol, entry.currency_decimal_places, false)|escape }} -- {{ formatAmountBySymbol(entry.amount_max, entry.currency_symbol, entry.currency_decimal_places, false)|escape }}"
-                >
+                <span class="mr-2" title="{{ formatAmountBySymbol(entry.amount_min, entry.currency_symbol, entry.currency_decimal_places, false)|escape }} -- {{ formatAmountBySymbol(entry.amount_max, entry.currency_symbol, entry.currency_decimal_places, false)|escape }}">
                     ~ {{ formatAmountBySymbol((entry.amount_max + entry.amount_min)/2, entry.currency_symbol, entry.currency_decimal_places) }}
 
                     {% if '0' != entry.pc_amount_max and null != entry.pc_amount_max %}
@@ -227,7 +225,7 @@
     {% if totals|length > 0 %}
         <tfoot>
         <tr>
-            <td colspan="8" style="border-top:1px #777 solid;"></td>
+            <td colspan="8" class="top-dark-border"></td>
         </tr>
         {% for sum in totals %}
             {% if '0' != sum.avg %}
@@ -266,6 +264,6 @@
     {% endif %}
 
 </table>
-<div style="padding-left:8px;">
+<div class="pl-2">
     {{ paginator.links('pagination.bootstrap-4')|raw }}
 </div>
diff --git a/resources/views/list/groups.twig b/resources/views/list/groups.twig
index 38ba197057..273ad2ba3c 100644
--- a/resources/views/list/groups.twig
+++ b/resources/views/list/groups.twig
@@ -52,14 +52,14 @@
     <tbody>
     {% for group in groups %}
         {% if group.count > 1 %}
-            <tr style="border-top:1px #aaa solid;">
-                <td colspan="2" style="border-top:1px #aaa solid;">
+            <tr class="top-light-border">
+                <td colspan="2" class="top-light-border">
                     <small><strong>
                             <a href="{{ route('transactions.show', [group.id]) }}"
                                title="{{ group.title }}">{{ group.title }}</a>
                         </strong></small>
                 </td>
-                <td colspan="1" class="text-right" style="border-top:1px #aaa solid;">
+                <td colspan="1" class="text-right top-light-border">
                     {% for sum in group.sums %}
                         {% if group.transaction_type == 'Deposit' %}
                             {{ formatAmountBySymbol(sum.amount*-1, sum.currency_symbol, sum.currency_decimal_places) }}
@@ -87,11 +87,11 @@
                 </td>
                 <!-- column to span accounts + extra fields -->
                 {% if showCategory or showBudget %}
-                    <td style="border-top:1px #aaa solid;" colspan="3">&nbsp;</td>
+                    <td class="top-light-border" colspan="3">&nbsp;</td>
                 {% else %}
-                    <td style="border-top:1px #aaa solid;" colspan="2">&nbsp;</td>
+                    <td class="top-light-border" colspan="2">&nbsp;</td>
                 {% endif %}
-                <td style="border-top:1px #aaa solid;" colspan="2" class="hidden-xs">
+                <td class="top-light-border hidden-xs" colspan="2">
                     <div class="btn-group btn-group-xs pull-right">
                         <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                                 aria-haspopup="true" aria-expanded="false">
@@ -108,17 +108,17 @@
                         </ul>
                     </div>
                 </td>
-                <td style="border-top:1px #aaa solid;" class="hidden-xs">&nbsp;</td>
+                <td class="top-light-border hidden-xs">&nbsp;</td>
             </tr>
         {% endif %}
         {% for index, transaction in group.transactions %}
-            {% set style="" %}
+            {% set className="" %}
             {% if group.transactions|length == loop.index and group.count > 1 %}
-                {% set style="border-bottom:1px #aaa solid;" %}
+                {% set className="bottom-light-border" %}
             {% endif %}
             <tr data-date="{{ transaction.date.format('Y-m-d') }}" data-count="{{ group.count }}"
                 data-id="{{ group.id }}">
-                <td style=" {{ style|raw }}" class="hidden-xs">
+                <td class="hidden-xs {{ className }}">
                     {% if transaction.transaction_type_type == 'Withdrawal' %}
                         <span class="fa fa-long-arrow-left fa-fw"
                               title="{{ trans('firefly.Withdrawal') }}"></span>
@@ -147,7 +147,7 @@
                     {% endif %}
 
                 </td>
-                <td style=" {{ style|raw }}">
+                <td class="{{ className }}">
                     {% if transaction.reconciled %}
                         <span class="fa fa-check"></span>
                     {% endif %}
@@ -162,7 +162,7 @@
                     </a>
                     {% endif %}
                 </td>
-                <td style="{{ style|raw }};" class="text-right">
+                <td class="{{ className }} text-right">
 
                     {#  deposit #}
                     {% if transaction.transaction_type_type == 'Deposit' %}
@@ -275,7 +275,7 @@
                     {% endif %}
                 </td>
                 {% if (fireflyiiiconfig('use_running_balance', true)) %}
-                <td style="{{ style|raw }};text-align:right">
+                <td class=" {{ className }} text-right">
                     {# RUNNING BALANCE #}
                     {% if (null == transaction.balance_dirty or false == transaction.balance_dirty) and null != transaction.destination_balance_after and null != transaction.source_balance_after %}
                         {% if transaction.transaction_type_type == 'Deposit' %}
@@ -335,10 +335,10 @@
                     {% endif %}
                 </td>
                 {% endif %}
-                <td style=" {{ style|raw }}">
+                <td class="{{ className }}">
                     {{ transaction.date.isoFormat(monthAndDayFormat) }}
                 </td>
-                <td style=" {{ style|raw }}">
+                <td class="{{ className }}">
                     {% if 'Cash account' == transaction.source_account_type %}
                         <span class="text-success">({{ 'cash'|_ }})</span>
                     {% else %}
@@ -346,7 +346,7 @@
                            title="{{ transaction.source_account_iban|default(transaction.source_account_name) }}">{{ transaction.source_account_name }}</a>
                     {% endif %}
                 </td>
-                <td style=" {{ style|raw }}">
+                <td class="{{ className }}">
                     {% if 'Cash account' == transaction.destination_account_type %}
                         <span class="text-success">({{ 'cash'|_ }})</span>
                     {% else %}
@@ -355,7 +355,7 @@
                     {% endif %}
                 </td>
                 {% if showCategory %}
-                    <td style=" {{ style|raw }}" class="hidden-xs">
+                    <td class="hidden-xs {{ className }}">
                         {% if transaction.category_id %}
                             <a href="{{ route('categories.show', [transaction.category_id]) }}"
                                title="{{ transaction.category_name }}">{{ transaction.category_name }}</a>
@@ -363,7 +363,7 @@
                     </td>
                 {% endif %}
                 {% if showBudget %}
-                    <td style=" {{ style|raw }}" class="hidden-xs">
+                    <td class="hidden-xs {{ className }}">
                         {% if transaction.budget_id %}
                             <a href="{{ route('budgets.show', [transaction.budget_id]) }}"
                                title="{{ transaction.budget_name }}">{{ transaction.budget_name }}</a>
@@ -372,7 +372,7 @@
                 {% endif %}
 
                 {% if group.count == 1 %}
-                    <td style=" {{ style|raw }};" class="hidden-xs">
+                    <td class="hidden-xs {{ className }}">
                         <div class="btn-group btn-group-xs pull-right">
                             <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                                     aria-haspopup="true" aria-expanded="false">
@@ -400,11 +400,11 @@
 
                 {% endif %}
                 {% if group.count != 1 %}
-                    <td style=" {{ style|raw }};" class="hidden-xs">
+                    <td class="hidden-xs {{ className }}">
                         &nbsp;
                     </td>
                 {% endif %}
-                <td style="{{ style|raw }}" class="hidden-xs">
+                <td class="hidden-xs {{ className }}">
                     {% if transaction.transaction_type_type != 'Reconciliation' and transaction.transaction_type_type != 'Opening balance' and transaction.transaction_type_type != 'Liability credit' %}
                     <div class="pull-right">
                         <input id="list_{{ transaction.transaction_journal_id }}"
diff --git a/resources/views/partials/empty.twig b/resources/views/partials/empty.twig
index b18079818b..3907cc0f39 100644
--- a/resources/views/partials/empty.twig
+++ b/resources/views/partials/empty.twig
@@ -13,7 +13,7 @@
                     {{ ('no_'~type~'_imperative_'~objectType)|_ }}
 
                 </p>
-                <p style="text-align: center;">
+                <p class="text-center">
                     <a class="btn btn-lg btn-success" href="{{ route }}">{{ ('no_'~type~'_create_'~objectType)|_ }}</a>
                 </p>
             </div>
diff --git a/resources/views/partials/journal-row.twig b/resources/views/partials/journal-row.twig
deleted file mode 100644
index 9bd55d9c60..0000000000
--- a/resources/views/partials/journal-row.twig
+++ /dev/null
@@ -1 +0,0 @@
-<h1 style="color:red;">REPLACE ME</h1>
diff --git a/resources/views/partials/transaction-row.twig b/resources/views/partials/transaction-row.twig
deleted file mode 100644
index 9bd55d9c60..0000000000
--- a/resources/views/partials/transaction-row.twig
+++ /dev/null
@@ -1 +0,0 @@
-<h1 style="color:red;">REPLACE ME</h1>
diff --git a/resources/views/piggy-banks/index.twig b/resources/views/piggy-banks/index.twig
index 247f8a0468..c722f91bde 100644
--- a/resources/views/piggy-banks/index.twig
+++ b/resources/views/piggy-banks/index.twig
@@ -15,7 +15,7 @@
                         <h3 class="box-title">{{ 'piggyBanks'|_ }}</h3>
                     </div>
                     <div class="box-body no-padding">
-                        <div style="padding:8px;">
+                        <div class="p-2">
                             <a class="btn btn-success" href="{{ route('piggy-banks.create') }}"><span class="fa fa-plus fa-fw"></span> {{ 'create_new_piggy_bank'|_ }}</a>
                         </div>
                         {% include 'list/piggy-banks' %}
diff --git a/resources/views/recurring/create.twig b/resources/views/recurring/create.twig
index 818093fb44..32eab7a011 100644
--- a/resources/views/recurring/create.twig
+++ b/resources/views/recurring/create.twig
@@ -192,7 +192,7 @@
                     <h4 class="modal-title">{{ 'recurring_calendar_view'|_ }}</h4>
                 </div>
                 <div class="modal-body">
-                    <div id="recurring_calendar" style="max-width: 400px;margin: 0 auto;">
+                    <div id="recurring_calendar" class="calendar-display">
 
                     </div>
 
diff --git a/resources/views/recurring/edit.twig b/resources/views/recurring/edit.twig
index eac5847c19..286a1ae3b5 100644
--- a/resources/views/recurring/edit.twig
+++ b/resources/views/recurring/edit.twig
@@ -191,7 +191,7 @@
                     <h4 class="modal-title">{{ 'recurring_calendar_view'|_ }}</h4>
                 </div>
                 <div class="modal-body">
-                    <div id="recurring_calendar" style="max-width: 400px;margin: 0 auto;">
+                    <div id="recurring_calendar"  class="calendar-display">
 
                     </div>
 
diff --git a/resources/views/recurring/index.twig b/resources/views/recurring/index.twig
index 0937b0e2f9..e23fddb5a7 100644
--- a/resources/views/recurring/index.twig
+++ b/resources/views/recurring/index.twig
@@ -25,13 +25,13 @@
                     </div>
 
                     <div class="box-body no-padding">
-                        <div style="padding:8px;">
+                        <div class="p-2">
                             <a href="{{ route('recurring.create') }}" class="btn btn-success"><span class="fa fa-plus fa-fw"></span> {{ ('make_new_recurring')|_ }}
                             </a>
                         </div>
 
                         <!-- list of recurring here -->
-                        <div style="padding-left:8px;">
+                        <div class="pl-2">
                             {{ paginator.links('pagination.bootstrap-4')|raw }}
                         </div>
                         <table class="table table-responsive  table-hover sortable">
@@ -141,7 +141,7 @@
                             {% endfor %}
                             </tbody>
                         </table>
-                        <div style="padding-left:8px;">
+                        <div class="pl-2">
                             {{ paginator.links('pagination.bootstrap-4')|raw }}
                         </div>
                     </div>
diff --git a/resources/views/reports/audit/report.twig b/resources/views/reports/audit/report.twig
index 4589488ea5..2910b3b167 100644
--- a/resources/views/reports/audit/report.twig
+++ b/resources/views/reports/audit/report.twig
@@ -17,8 +17,8 @@
                         {% for hide in hideable %}
                             <li><input
                                     {% if hide in defaultShow %}checked{% endif %}
-                                    type="checkbox" class="audit-option-checkbox" name="option[]" value="{{ hide }}" id="option_{{ hide }}"/> <label
-                                    for="option_{{ hide }}" style="font-weight:normal;">{{ trans('list.'~hide) }}</label></li>
+                                    type="checkbox" class="fw-normal audit-option-checkbox" name="option[]" value="{{ hide }}" id="option_{{ hide }}"/> <label
+                                    for="option_{{ hide }}">{{ trans('list.'~hide) }}</label></li>
                         {% endfor %}
 
                     </ul>
@@ -52,7 +52,7 @@
                         </div>
                     {% else %}
                         <div class="box-body no-padding">
-                            <p style="padding:10px;">
+                            <p class="p-4">
                                 {{ trans('firefly.audit_end_balance',
                                     {
                                         account_name: account.name|escape,
@@ -63,7 +63,7 @@
                             </p>
                             {% include 'reports.partials.journals-audit'  with {'journals': auditData[account.id].journals,'account':account} %}
 
-                            <p style="padding:10px;">
+                            <p class="p-4">
 
                                 {{ trans('firefly.audit_end_balance',
                                     {
diff --git a/resources/views/reports/index.twig b/resources/views/reports/index.twig
index e8970f3e53..1612d13bc7 100644
--- a/resources/views/reports/index.twig
+++ b/resources/views/reports/index.twig
@@ -184,7 +184,7 @@
 
         </div>
     </div>
-    <div style="height:400px;">&nbsp;</div>
+    <div class="empty-high-block">&nbsp;</div>
 
 {% endblock %}
 
diff --git a/resources/views/v2/errors/FireflyException.blade.php b/resources/views/v2/errors/FireflyException.blade.php
index 5dfc2be6c8..f90d71783e 100644
--- a/resources/views/v2/errors/FireflyException.blade.php
+++ b/resources/views/v2/errors/FireflyException.blade.php
@@ -52,7 +52,7 @@
                 <h4>
                     {{ trans('errors.stacktrace') }}
                 </h4>
-                <div style="font-family: monospace;font-size:11px;">
+                <div class="monospace">
                     {!!  nl2br($exception->getTraceAsString())  !!}
                 </div>
             </div>