MokoConsulting/MokoCassiopeia
1
1
Fork 0
Code Issues 2 Pull Requests Actions Packages Releases 1 Activity

CSS and Joomla 6 fixes: dropdown icons, footer, drawers, horizontal menu

Browse Source 
- Replace CSS border-triangle dropdown toggles with FontAwesome chevron icon
- Fix footer: use --nav-bg-color background, --mainmenu-nav-link-color links, add display:flex to grid-child
- Dynamic footer padding-right when theme control is active
- Drawer close buttons: align left in left drawer, right in right drawer
- Fix .menu-horizontal selector (was .metismenu.menu-horizontal, actual output is .mod-menu.menu-horizontal)
- Add horizontal padding to .mod-list li
- Joomla 6 compat: replace legacy JHtml with namespaced HTMLHelper in mod_kunenalogin

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jonathan Miller
2026-03-31 16:48:12 -05:00
parent dd19e226f4
commit 044d8277f8
3 changed files with 42 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/media/css/template.css
View File

@@ -13966,10 +13966,13 @@ meter {
.footer {
margin-top: 1em;
color: var(--body-color);
background: var(--color-primary);
background-color: var(--nav-bg-color);
}
.footer .grid-child {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
@@ -13980,7 +13983,7 @@ meter {
}
.footer a {
color: currentColor;
color: var(--mainmenu-nav-link-color);
}
.footer .mod-menu {
@@ -15203,7 +15206,7 @@ ul.tags {
}
.mod-list li {
padding: 0.25em 0;
padding: 0.25em 0.5rem;
}
.mod-list li a {
@@ -16171,7 +16174,16 @@ body:not(.has-sidebar-right) .site-grid .container-component {
display: table-cell;
}
.metismenu.menu-horizontal {
.menu-horizontal {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-flex: 1;
-ms-flex: 1 0 100%;
flex: 1 0 100%;
@@ -16181,28 +16193,19 @@ body:not(.has-sidebar-right) .site-grid .container-component {
}
@media (min-width: 992px) {
.metismenu.menu-horizontal {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
.menu-horizontal {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-flex: 1;
-ms-flex: 1 1 0%;
flex: 1 1 0%;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
}
.metismenu.menu-horizontal>li {
.menu-horizontal>li {
position: relative;
}
.metismenu.menu-horizontal .level-1>ul {
min-width: 12rem;
}
.metismenu.mod-menu {
margin: 0;
}
@@ -16620,12 +16623,13 @@ body:not(.has-sidebar-right) .site-grid .container-component {
}
.dropdown-toggle::after {
content: "";
font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "FontAwesome";
font-weight: 900;
content: "\f078";
display: inline-block;
border: none;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/></svg>');
background-repeat: no-repeat;
width: 10px;
height: 10px
font-size: 0.65em;
vertical-align: middle;
}
.btn {
@@ -19355,18 +19359,18 @@ nav[data-toggle=toc] .nav-link.active+ul{
padding: 0;
}
/* Dropdown toggle arrow */
/* Dropdown toggle arrow — uses FontAwesome instead of CSS borders */
.mod-menu-main__link.dropdown-toggle::after,
.mod-menu-main__heading.dropdown-toggle::after {
content: "";
font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "FontAwesome";
font-weight: 900;
content: "\f078";
display: inline-block;
margin-left: auto;
padding-left: 0.5rem;
vertical-align: middle;
border-top: 0.3em solid;
border-right: 0.3em solid transparent;
border-bottom: 0;
border-left: 0.3em solid transparent;
font-size: 0.65em;
border: none;
}
/* Desktop styles (≥768px) */