Merge branch 'aa-css-framework' into 'v4.x'

Alliance Auth CSS Framework

See merge request allianceauth/allianceauth!1544

allianceauth/authentication/templates/authentication/dashboard.characters.html

@@ -17,7 +17,7 @@
                             <span class="d-md-inline m-2">{% translate 'Change Main' %}</span>
                         </a>
                     </div>
-                    <table class="table" style="--bs-table-bg: transparent;">
+                    <table class="table">
                         <thead>
                             <tr>
                                 <th class="text-center"></th>

allianceauth/authentication/templates/authentication/dashboard.groups.html

@@ -6,7 +6,7 @@
             <div class="card-body">
                 <div style="height: 300px; overflow-y:auto;">
                     <h6 class="text-center">{% translate "State:" %} {{ request.user.profile.state }}</h6>
-                    <table class="table" style="--bs-table-bg: transparent;">
+                    <table class="table">
                         {% for group in groups %}
                             <tr>
                                 <td class="text-center">{{ group.name }}</td>

allianceauth/optimer/templates/optimer/dashboard.ops.html

@@ -7,7 +7,7 @@
             <h4 class="card-title text-center">{% translate "Upcoming Fleets" %}</h4>
             <div class="card-body">
                 <div style="height: 300px; overflow-y:auto;">
-                    <table class="table" style="--bs-table-bg: transparent;">
+                    <table class="table">
                         <thead>
                             <tr>
                                 <th class="text-center">{% translate "Operation" %}</th>

allianceauth/static/allianceauth/css/auth-base-bs5.css

@@ -1,49 +0,0 @@
-/* BS 5 Additions
-
-Helpful CSS classes that are missing in BS5
-------------------------------------------------------------------------------------- */
-@media all {
-    .cursor-auto {
-        cursor: auto;
-    }
-
-    .cursor-default {
-        cursor: default;
-    }
-
-    .cursor-pointer {
-        cursor: pointer;
-    }
-
-    .cursor-wait {
-        cursor: wait;
-    }
-
-    .cursor-text {
-        cursor: text;
-    }
-
-    .cursor-move {
-        cursor: move;
-    }
-
-    .cursor-help {
-        cursor: help;
-    }
-
-    .cursor-not-allowed {
-        cursor: not-allowed;
-    }
-
-    .cursor-inherit {
-        cursor: inherit;
-    }
-
-    .cursor-zoom-in {
-        cursor: zoom-in;
-    }
-
-    .cursor-zoom-out {
-        cursor: zoom-out;
-    }
-}

allianceauth/static/allianceauth/css/auth-framework.css

@@ -0,0 +1,101 @@
+/**
+ * Alliance Auth CSS Framework
+ *
+ * This provides some CSS classes together with a couple of Bootstrap fixes
+ * to be used throughout Alliance Auth and its Community Apps
+ */
+
+/* Bootstrap fixes
+------------------------------------------------------------------------------------- */
+@media all {
+    .table {
+        --bs-table-bg: transparent;
+    }
+}
+
+/* Cursor classes
+------------------------------------------------------------------------------------- */
+@media all {
+    .cursor-auto {
+        cursor: auto;
+    }
+
+    .cursor-default {
+        cursor: default;
+    }
+
+    .cursor-pointer {
+        cursor: pointer;
+    }
+
+    .cursor-wait {
+        cursor: wait;
+    }
+
+    .cursor-text {
+        cursor: text;
+    }
+
+    .cursor-move {
+        cursor: move;
+    }
+
+    .cursor-help {
+        cursor: help;
+    }
+
+    .cursor-not-allowed {
+        cursor: not-allowed;
+    }
+
+    .cursor-inherit {
+        cursor: inherit;
+    }
+
+    .cursor-zoom-in {
+        cursor: zoom-in;
+    }
+
+    .cursor-zoom-out {
+        cursor: zoom-out;
+    }
+}
+
+/* Callouts
+ *
+ * Not quite alerts, but custom and helpful notes for folks.
+ * Requires a base and modifier class.
+------------------------------------------------------------------------------------- */
+@media all {
+    /* Common styles for all types */
+    .aa-callout {
+        border: 1px solid var(--bs-border-color);
+        border-left-width: 0.25rem;
+        border-radius: 0.25rem;
+        margin-bottom: 1.25rem;
+        margin-top: 1.25rem;
+        padding: 1.25rem;
+    }
+
+    /* Last item bottom margin should be 0 */
+    .aa-callout :last-child {
+        margin-bottom: 0;
+    }
+
+    /* Variations */
+    .aa-callout.aa-callout-danger {
+        border-left-color: var(--bs-danger);
+    }
+
+    .aa-callout.aa-callout-info {
+        border-left-color: var(--bs-info);
+    }
+
+    .aa-callout.aa-callout-success {
+        border-left-color: var(--bs-success);
+    }
+
+    .aa-callout.aa-callout-warning {
+        border-left-color: var(--bs-warning);
+    }
+}

allianceauth/templates/allianceauth/base-bs5.html

@@ -22,7 +22,7 @@
         {% theme_css %}
 
         {% include 'bundles/fontawesome.html' %}
-        {% include 'bundles/auth-base-bs5-css.html' %}
+        {% include 'bundles/auth-framework-css.html' %}
 
         <style>
             .navbar-toggler.collapsed{

allianceauth/templates/allianceauth/messages-bs5.html

@@ -3,7 +3,7 @@
     {% for message in messages %}
         <div class="alert alert-{{ message.level_tag }} alert-dismissible d-flex align-items-center fade show" role="alert">
 
-            <div class="" style="">
+            <div>
                 {% if message.level_tag == "info" %}
                     <i class="fas fa-info-circle"></i>
                 {% elif message.level_tag == "success" %}
@@ -15,12 +15,11 @@
                 {% endif %}
             </div>
 
-            <div class="ms-2" style="">
+            <div class="ms-2">
                 {{ message }}
             </div>
 
             <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-
         </div>
     {% endfor %}
 {% endif %}

allianceauth/templates/bundles/auth-base-bs5-css.html

@@ -1,3 +0,0 @@
-{% load static %}
-
-<link href="{% static 'allianceauth/css/auth-base-bs5.css' %}" rel="stylesheet">

allianceauth/templates/bundles/auth-framework-css.html

@@ -0,0 +1,3 @@
+{% load static %}
+
+<link href="{% static 'allianceauth/css/auth-framework.css' %}" rel="stylesheet">

allianceauth/timerboard/templates/timerboard/dashboard.timers.html

@@ -7,7 +7,7 @@
             <h4 class="card-title text-center">{% translate "Upcoming Timers" %}</h4>
             <div class="card-body">
                 <div style="height: 300px; overflow-y:auto;">
-                    <table class="table" style="--bs-table-bg: transparent;">
+                    <table class="table">
                         <thead>
                             <tr>
                                 <th class="text-center">{% translate "Details" %}</th>
@@ -20,10 +20,10 @@
                         <tbody>
                             {% for timer in timers %}
                             <tr>
-                                <td style="" class="text-center">
+                                <td class="text-center">
                                     {{ timer.details }}
                                 </td>
-                                <td style="" class="text-center">
+                                <td class="text-center">
                                     {{ timer.get_timer_type_display }}
                                 </td>
                                 <td class="text-center" nowrap>

docs/development/custom/css-framework.md

@@ -0,0 +1,42 @@
+# CSS Framework
+
+To establish a unified style language throughout Alliance Auth and Community Apps,
+Alliance Auth is providing its own CSS framework with a couple of CSS classes.
+
+## Callout-Boxes
+
+These are similar to the Bootstrap alert/notification boxes, but not as "loud".
+
+Callout-boxes need a base-class (`.aa-callout`) and a modifier-class (e.g.:
+`.aa-callout-info` for an info-box). Modifier classes are available for the usual
+Bootstrap alert levels "Success",  "Info", "Warning" and "Danger".
+
+![Alliance Auth Framework: Callout Boxes](/_static/images/development/css-framework/callout-boxes.png "Alliance Auth Framework: Callout Boxes")
+
+### HTML
+
+```html
+<div class="aa-callout aa-callout-success">
+    <p>
+        This is a success callout-box.
+    </p>
+</div>
+
+<div class="aa-callout aa-callout-info">
+    <p>
+        This is an info callout-box.
+    </p>
+</div>
+
+<div class="aa-callout aa-callout-warning">
+    <p>
+        This is a warning callout-box.
+    </p>
+</div>
+
+<div class="aa-callout aa-callout-danger">
+    <p>
+        This is a danger callout-box.
+    </p>
+</div>
+```

docs/development/custom/index.md

@@ -11,4 +11,5 @@ This section describes how to extend **Alliance Auth** with custom apps, service
     menu-hooks
     url-hooks
     logging
+    css-framework
 ```