Fix table styles and nav tabs for dark mode

This commit is contained in:
Erik Kalkoken 2021-05-09 05:25:45 +00:00 committed by Ariel Rin
parent 75a3adb2c9
commit 1473259e41
2 changed files with 153 additions and 128 deletions

View File

@ -40,9 +40,11 @@
</li>
</ul>
<div class="tab-content">
<div id="add" class="tab-pane fade in active panel panel-default">
<div class="panel panel-default panel-tabs-aa">
<div class="panel-body">
<div class="tab-content">
<div id="add" class="tab-pane active">
{% if acceptrequests %}
<div class="table-responsive">
<table class="table table-aa">
@ -97,10 +99,8 @@
<div class="alert alert-warning text-center">{% trans "No group add requests." %}</div>
{% endif %}
</div>
</div>
<div id="leave" class="tab-pane fade panel panel-default">
<div class="panel-body">
<div id="leave" class="tab-pane">
{% if leaverequests %}
<div class="table-responsive">
<table class="table table-aa">
@ -158,4 +158,5 @@
</div>
</div>
</div>
</div>
{% endblock content %}

View File

@ -43,28 +43,52 @@ ul.list-group.list-group-horizontal > li.list-group-item {
justify-content: center;
}
@media all {
/* style nav tabs in dark mode*/
.template-dark-mode .nav-tabs > li.active > a {
background-color: rgb(70, 69, 69)!important;
color: rgb(255, 255, 255) !important;
}
.panel-tabs-aa {
border-top: none;
border-top-left-radius: 0%;
border-top-right-radius: 0%;
}
/* style group headers within a table */
.tr-group {
.template-light-mode .tr-group {
font-weight: bold;
background-color: #e6e6e6 !important;
}
.template-dark-mode .tr-group {
font-weight: bold;
background-color: rgb(105, 105, 105) !important;
}
/* default style for tables */
.table-aa > thead > tr > th{
.template-light-mode .table-aa > thead > tr > th{
border-bottom: 1px solid #f2f2f2;
}
.template-dark-mode .table-aa > thead > tr > th{
border-bottom: 1px solid rgb(70, 69, 69);
}
.table-aa > thead > tr > th{
vertical-align: middle;
}
.table-aa > tbody > tr > td{
.template-light-mode .table-aa > tbody > tr > td{
border-bottom: 1px solid #f2f2f2;
}
.template-dark-mode .table-aa > tbody > tr > td{
border-bottom: 1px solid rgb(70, 69, 69);
}
.table-aa > tbody > tr > td {
vertical-align: middle;
}
.table-aa > tbody > tr:last-child {
border-bottom: none;
}
}
/* highlight active menu items
--------------------------------------------------------------------------------------------------------------------- */