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

Add search button styling and fix responsive header layout

Browse Source 
Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
2026-01-30 05:18:12 +00:00
parent 733bcc3496
commit 20e9b39688
1 changed files with 63 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/media/css/user.css
View File

@@ -16,3 +16,66 @@
*/
/* Add your custom CSS here */
/* Enhanced search button styling */
.mod-finder__search.input-group button,
.container-search button[type="submit"] {
background-color: var(--color-primary);
color: var(--mainmenu-nav-link-color);
border-color: var(--color-primary);
padding: 0.6rem 1rem;
border-radius: 0 0.25rem 0.25rem 0;
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.mod-finder__search.input-group button:hover,
.container-search button[type="submit"]:hover {
background-color: var(--color-hover);
border-color: var(--color-hover);
}
.mod-finder__search.input-group button:focus,
.container-search button[type="submit"]:focus {
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5);
}
/* Responsive header menu and search layout improvements */
@media (max-width: 991.98px) {
.container-header .container-nav {
flex-direction: column;
}
.container-header .container-nav nav {
width: 100%;
margin-bottom: 1rem;
}
.container-header .container-search {
width: 100%;
margin-top: 0.5rem;
}
.mod-finder__search.input-group {
max-width: 100%;
}
}
@media (min-width: 992px) {
.container-header .container-nav {
display: flex;
flex-direction: row;
align-items: center;
gap: 2rem;
}
.container-header .container-nav nav {
flex: 1;
}
.container-header .container-search {
flex: 0 0 auto;
min-width: 300px;
margin-top: 0;
}
}