SearXNG by roybarina

/* ==UserStyle==
@name           SearXNG
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    SearXNG style to fix the top search bar in place with a small stylish touch.
@author         Roy Barina
==/UserStyle== */

/**
* chain your custom domains here eg:
* @-moz-document domain("[searxng-instance-subdomain].[domain-name/TLD"), domain("searxng.mydomain.xyz") {}
**/
@-moz-document domain("") {
    /**
    * there are 4 widths that can have different styles;
    *     infinite >= 79.75em > 62em > 50em > 0 
    * so anything > 50em, is desktop, tablets and generally big screens and anything below 50em is generally cell phones or long\portrait screens
    **/
    body > main {
        > #results {
            /* results panel including the side bar */
            margin-top: 12rem !important; /* pushing the results below the top search bar */
        }
        > nav[id="links_on_top"] {
            /* About and Preferences links at top right corner */
            position: fixed !important; /* fixing the top links at place */
            z-index: 1001; /* making sure they are visible */
        }
        > form[id="search"] {
            /* top search bar */
            position: fixed; /* fix it in place */
            z-index: 1000; /* making sure nothing's drawing on top it */
            width: 100%; /* expand it to take full width */
            > .search_filters {
                /* the drop-down combos beneath the top search bar */
                background-color: #26282C; /* we need it to not be transparent */
                margin-top: 0; /* sticking it to its parent */
                margin-left: 0 !important; /* sticking it to the left edge */
                width: 100% !important; /* expand to full width */
                border-bottom: solid 2px hsl(223, 10%, 14%); /* a small line at the bottom will add a nice touch to the style */
                filter: drop-shadow(0 15px 10px #00000030); /* the drop shadow effect, to make it like it's on top of the results */
                :first-child {
                    /* the first drop-down, should be the language select. this is the only way I found to be able to expand the background */
                    @media screen and (max-width: 79.75em){
                        margin-left: 4rem !important; /* this amount make it looks like it's just beneath the General button */
                    }
                    @media screen and (min-width: 79.75em){
                        margin-left: calc(50% - var(--center-page-width) / 2 + 1rem); /* this calculation make it looks like it's just beneath the General button */
                    }
                }
            }
        }
    }
}