CDH-responsive by nicolasderumigny

/* ==UserStyle==
@name           CDH-responsive
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    Responsive design template for comptoir-hardware.com
@author         Nicolas Derumigny
==/UserStyle== */
/***
This work is licensed by Nicolas Derumigny <nderumigny+copyright@gmail.com> under
the terms of the Creative Commons Licence CC BY-ND
(https://creativecommons.org/licenses/by-nd/4.0/legalcode).

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE. NO DERIVATED ARE ALLOWED UNLESS AUTHORISED BY THE AUTHOR.
***/
/**** Colors ****/
:root {
    --lighter: #fff3;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-darkest: #282726;
        --bg-darker: #312f2d;
        --bg-dark: #3a3835;
        --fg-darkest: #65615d;
        --fg-darker: #86817c;
        --fg-dark: #aea596;

        --bright-green: #799300;
        --bright-red: #e12000;
        --bright-yellow: #827200;
        --bright-orange: #9f2319;
        --bright-blue: #245da6;

        --dark-red: #b71a00;

        --bg-green: #1c3524;
        --bg-yellow: #4d4c44;
        --bg-red: #3c3232;
        --bg-blue: #313437;
        
        --purple: #301b35;
        --green: var(--bright-green);
        --grey: unset;
        --black: #101010;

        --highlight: #d6cab0;
        --highlight-white: var(--highlight);
        
        --darker: #0003;
    }
}

@media (prefers-color-scheme: light) {
    :root {
        --bg-darkest: white;
        --bg-darker: #EEE;
        --bg-dark: #DDD;
        --fg-darkest: #50555A;
        --fg-darker: #444;
        --fg-dark: #303030;

        --bright-green: #84e6a4;
        --bright-red: #c8001d;
        --bright-yellow: #ffe000;
        --bright-orange: #d72f22;
        --bright-blue: #2c73ce;

        --dark-red: #9f0000;

        --bg-green: #f2fff5;
        --bg-yellow: #fffef3;
        --bg-red: #fff6f6;
        --bg-blue: #f4f5f6;

        --purple: #fdf4ff;
        --green: #c1af2e;
        --grey: var(--fg-darkest);
        --black: #101010;

        --highlight: black;
        --highlight-white: white; 
        
        --darker: #0001;
    }
}

@-moz-document domain("comptoir-hardware.com") {

    /**** Main wrapper ****/
    #page {
        font-size: 17px;
        line-height: 25px;
    }

    #page-body,
    #main {
        overflow: clip;
    }

    #page .joomla {
        margin-left: 10px;
        margin-right: 10px;
    }

    #page .wrapper, .neeed {
        min-width: 730px;
        max-width: 1500px;
        width: unset;
    }

    .wrapper-bg1 {
        background: unset;
    }

    .mainmiddle-wrapper-m {
        padding: 0;
        border: none !important;
    }

    #div_admin {
        padding-left: 20px;
        padding-right: 20px
    }

    #div_admin .bull_ragots {
        display: none;
    }

    #div_news {
        padding-left: 8px;
        padding-right: 8px
    }

    #main,
    #middle-expand,
    #main-shift,
    #mainmiddle-expand,
    #mainmiddle-expand,
    #content,
    .mainmiddle-wrapper-m,
    .mainmiddle-wrapper-m .contentleft-bg,
    .mainmiddle-wrapper-m .contentleft-bg .contentright-bg,
    #mainmiddle {
        position: unset;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
    }

    #middle {
        padding: 0;
        overflow: visible;
    }

    #main {
        flex: 1;
        height: auto !important;
    }

    #mainmiddle-expand {
        display: flex;
    }

    #content {
        flex: 1;
        background-color: var(--bg-darkest);
    }

    #content-shift {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        left: 0;
        height: min-content !important;
        margin-right: unset;
    }

    /* Allow stick */
    #left,
    #contentright {
        overflow: clip;
    }

    div.module.mod-trans.first,
    div.module.mod-trans.first.last {
        position: sticky;
        bottom: 0;
        top: 0;
    }

    .hab,
    .wrapper-bg2 {
        backdrop-filter: blur(5px) grayscale(0%);
        background-color: var(--lighter);
    }


    body#page {
        color: var(--fg-dark);
    }

    @media (prefers-color-scheme: dark) {
        body.yoopage {
            background: var(--black);
        }

        #comptoir-b span {
            color: var(--darker);
        }
    }

    #page h6,
    #page h2 {
        color: var(--fg-dark);
    }

    /*** A ne pas manquer ***/
    .cdhANPM a:visited .home_articles_title2 {
        color: var(--fg-dark);
    }

    .cdhANPM:hover a:visited .home_articles_title2 {
        color: var(--black);
    }

    /**** Header ****/
    #logo {
        position: unset;
    }

    #header {
        height: unset;
    }
    
    #toolbar {
        padding-top: 5px;
        padding-right: 10px;
    }
    
    #date {
        margin-right: 0px;
    }

    #search {
        top: 42px;
        right: 0px;
        z-index: 5;
    }

    div.default div.yoo-search div.searchbox {
        border-radius: 0;
        border-top-left-radius: 5px;
        width: 175px;
    }

    div.default div.yoo-search div.resultbox {
        left: -275px;
        top: 30px !important;
        color: var(--highlight-white);
    }

    div.default div.yoo-search div.resultbox-bg {
        border-top-left-radius: 40px;
    }
    
    div.default div.yoo-search div.resultbox-bg,
    div.default div.yoo-search div.resultbox-b {
        backdrop-filter: blur(15px) grayscale(100%);
        background: var(--darker);
        position: relative;
        z-index: 1;
    }
    
    div.default div.yoo-search div.resultbox-b {
        border-bottom-left-radius: 50px;
    }

    div.default div.yoo-search a.search-more {
        color: var(--highlight);
    }

    div.default div.yoo-search .resultbox-bg a{
        background: transparent;
    }

    div.default div.yoo-search h3.search-header {
        border-top-left-radius: 50px;
        color: var(--highlight-white) !important;
        background-color: var(--dark-red);
    }

    .divisionparquarentedouze,
    .divisionpartrentesix {
        display: none;
    }

    #headerbar {
        display: none;
    }

    #logo img {
        max-width: 1150px;
        width: 100%;
        height: unset;
    }

    td.member_pubdemerde {
        padding: 0 !important;
        height: unset !important;
        background-color: unset;
    }

    td.member_zone {
        height: unset !important;
        background-color: var(--black);
        padding-left: 20px;
        padding-top: 20px;
        padding-bottom: 15px;
        border-top-left-radius: 25px;
        padding-right: 0px;
    }

    td.member_zone table {
        width: 380px;
    }

    td.member_zone table table {
        width: 150px;
    }

    td.member_avatar {
        padding: 0px 10px 0px 0px;
    }

    td.member_avatar img {
        height: 88px;
    }

    #page td.member_name {
        color: var(--highlight-white);
    }

    #page td.member_text a {
        color: var(--fg-darkest);
    }

    #page td.member_text a:hover {
        color: var(--bright-red)
    }

    /**** Menu ****/
    #menu {
        left: 0;
    }

    #menubar div.menubar-2 {
        background: var(--bg-darkest);
    }

    #menu li.level1:hover {
        background: var(--bg-darker);
        border-radius: 0;
    }

    #menu li:hover a.level1 span.subtitle,
    #menu li:hover span.level1 span.subtitle {
        color: var(--fg-darkest);
    }

    #menu a.level1:hover .title {
        color: var(--highlight) !important;
    }

    #date {
        color: var(--fg-darkest);
    }

    .menubar-2 {
        border-radius: 0 !important;
        padding: 0 !important;
    }

    #menu .dropdown-1 {
        top: 8px;
        border-color: var(--bg-darker);
        border-top: 8px solid var(--bg-darker);
        height: unset;
        overflow: visible;
    }

    .remain {
        background: var(--bg-darker) !important;
    }

    .remain a {
        background: none !important;
    }

    #menu a.level2 span.bg:not(.group-box1),
    #menu span.level2 span.bg:not(.group-box1),
    #menu .level1 .title:not(.group-box1) {
        color: var(--fg-dark);
    }

    #menu li:hover a.level1 span.subtitle,
    #menu li:hover a .remain span.subtitle,
    #menu li.remain a.level1 span.subtitle {
        color: var(--fg-darkest);
    }

    #menu .dropdown-3 {
        background: var(--bg-darkest);
    }

    #menu span.bg.icon:before {
        background-image: url("https://www.comptoir-hardware.com/images/stories/_menu-cpu-mb-ram-oc.png");
        background-repeat: no-repeat;
        opacity: 0.1;
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    #menu a.level2 span.subtitle,
    #menu span.level2 span.subtitle,
    div.joomla p.articleinfo {
        color: var(--fg-darker);
    }

    #menu a:hover,
    #menu span.bg.icon:hover,
    .level2 .group-box1 .group-box5 .hover-box1 .hover-box4 a.leve2 span:hover,
    .level2 .group-box1 .group-box5 .hover-box1 .hover-box4 span:hover .title,
    .level2 .group-box1 .group-box5 .hover-box1 .hover-box4:hover span.bg,
    #menu a:link,
    #menu a:visited {
        color: var(--bright-red) !important;
    }

    .level2 .group-box1 .group-box5 .hover-box1 .hover-box4 span {
        background-image: unset !important;
        color: var(--fg-darker) !important;
    }

    #menu span.bg.icon,
    .level2 .group-box1 .group-box5 .hover-box1 .hover-box4 span.title {
        ...