Mathis/allianceauth
1
0
Fork 0
mirror of https://gitlab.com/allianceauth/allianceauth.git synced 2025-07-12 14:00:17 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Alliance Auth CSS Framework

See merge request allianceauth/allianceauth!1544
This commit is contained in:
Ariel Rin 2023-10-27 11:58:16 +00:00
commit a84fa1ca69
13 changed files with 156 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
allianceauth/authentication/templates/authentication/dashboard.characters.html
View File

@ -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>

2
allianceauth/authentication/templates/authentication/dashboard.groups.html
View File

@ -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>

2
allianceauth/optimer/templates/optimer/dashboard.ops.html
View File

@ -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>

49
allianceauth/static/allianceauth/css/auth-base-bs5.css
View File

@ -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;
}
}

101
allianceauth/static/allianceauth/css/auth-framework.css Normal file
View File

@ -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);
}
}

2
allianceauth/templates/allianceauth/base-bs5.html
View File

@ -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{

5
allianceauth/templates/allianceauth/messages-bs5.html
View File

@ -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 %}

3
allianceauth/templates/bundles/auth-base-bs5-css.html
View File

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

3
allianceauth/templates/bundles/auth-framework-css.html Normal file
View File

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

6
allianceauth/timerboard/templates/timerboard/dashboard.timers.html
View File

@ -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>

BIN
docs/_static/images/development/css-framework/callout-boxes.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

42
docs/development/custom/css-framework.md Normal file
View File

@ -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>
```

1
docs/development/custom/index.md
View File

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