/* # ----------------------------------------------------------------------------- # ~/assets/themes/j1/modules/mmenu_light/css/theme/uno/mmenu.css # Provides theme styles (Uno) for Mobile Menu light (v3.0.5) # # Product/Info: # https://jekyll.one # # Copyright (C) 2023, 2024 Juergen Adams # # J1 Template is licensed under the MIT License. # See: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE.md # ----------------------------------------------------------------------------- */ /* jadams, 2020-06-20: CSS/Offset to the NAV bar should be calculated at runtime as a dyn style */ /* CSS overwrites ----------------------------------------------------------------------------- */ /* Drawer */ .mm-ocd--left .mm-ocd__content { background-color: #212121; } .mm-ocd--right .mm-ocd__content { background-color: #212121; } /* Additional CSS styles for BS Theme Switcher ----------------------------------------------------------------------------- */ .mmenu-item.active, .mmenu-item:active { /* color: #fff; */ text-decoration: none; background-color: #607d8b; } /* Navigator ----------------------------------------------------------------------------- */ .mm-spn li:after { border-top: 0 !important; } .mm-spn a:not(:last-child):after { border-right: 0 !important; } .mm-spn li:hover { background-color: #424242; } .mm-spn.mm-spn--navbar:after { text-align: left; /* jadams, 2020-06-20: set menu title to the left */ font-size: x-large; /* jadams, 2020-06-20: increase size of the menu title */ } /* Themes */ /* jadams, 2020-06-20: set J1 Theme colors (dark theme) */ .mm-spn.mm-spn--dark { color: #e3e3e3; background: #000 !important; } .mm-spn ul { background: #000 !important; } /* Sidebar (Drawer) ----------------------------------------------------------------------------- */ .mm-side { margin: 1.5rem; } .mm-side .widget { position: relative; z-index: 1; margin-bottom: 25px } .mm-side .widget .title { color: #fff; margin-bottom: 15px; border-left: 3px solid #204a87; padding-left: 5px } .menu-title { margin-bottom: 1.5rem; font-size: 28px; color: #EEEEEE; border-bottom: 1px solid #757575; } .mm-side .widget .heading { text-align: left; color: #EEEEEE; font-size: 20px; text-transform: uppercase; position: relative; margin-bottom: 10px; padding-bottom: 10px } .mm-side .widget ul.link { font-family: Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif; font-size: 14px; padding: 0; margin: 0; list-style: none; line-height: 1.5rem; } .mm-side .widget ul.link li a { color: #aaa } .mm-side .widget ul.link li a:focus,.mm-side .widget ul.link li a:hover { color: #fafafa; text-decoration: none; font-weight: 500; } /* Navigation (Menu) ----------------------------------------------------------------------------- */ .mm-spn a { color: #9e9e9e !important; } /* jadams, 2022-08-13: muted the anchor on hover, because (currently) NO action on click */ .mm-spn a:hover { color: #9e9e9e !important; } /* jadams, 2020-07-03: added hover to global style */ a.toc-link:hover { color: #fafafa; text-decoration: none; font-weight: 500; } /* Media breakpoints ----------------------------------------------------------------------------- */ /* BS@5 // ----------------------------------------------------------------------------- // X-Small devices (portrait phones, less than 576px) // No media query for `xs` since this is the default in Bootstrap // Small devices (landscape phones, 576px and up) // ---------------------------------------------- // @media (min-width: 576px) { ... } // Medium devices (tablets, 768px and up) // -------------------------------------- // @media (min-width: 768px) { ... } // Large devices (desktops, 992px and up) // -------------------------------------- // @media (min-width: 992px) { ... } // X-Large devices (large desktops, 1200px and up) // ----------------------------------------------- // @media (min-width: 1200px) { ... } // XX-Large devices (larger desktops, 1400px and up) // ------------------------------------------------- // @media (min-width: 1400px) { ... } */ /* jadams, 2020-07-02: media query for MMenu -------------------------------------------------------------------------------- NOTE: For unknown reason, style "mm-ocd--left" is NOT applied correctly like "mm-ocd--right" what cause the wrong background-color As a workaround, the background-color is added to the media queries as well (but MUST be removed if fixed!!!) -------------------------------------------------------------------------------- */ /* Desktop Large devices (desktops, 992px and up) */ @media only screen and (min-width: 992px) { /* .mm-ocd { top: 100px; /* drawer top offset to NAV bar */ } */ .mm-ocd__content { background-color: #000; /* black */ } } /* Mobile Small devices (992px and below) */ @media only screen and (max-width: 992px) { .mm-ocd { top: 48px; /* drawer top offset to NAV bar */ } .mm-ocd__content { background-color: #000; /* black */ } }