wlohAll by za1111

/* ==UserStyle==
@name           wlohAll
@namespace      userstyles.world/user/za1111
@version        1.0.1
@description    WLoH pages mobile friendly
@author         za1111 [<soerenbindinger@web.de>]
@license        CDDL-1.0
@preprocessor   less
@var            number     size-P "REM size Portrait" ['px', 18, 8, 42, 0.1]
@var            number     size-L "REM size Landscape" ['px', 18, 8, 42, 0.1]
@var            number     bgcol "Select top elements bg brightness, 255 is max " [250, 200, 255, 1]
==/UserStyle== */

@-moz-document url-prefix("https://wordfeud.aasmul.net") {

  /* ### VARIABLES ### */

    @resPad:calc(50% - 430px);
    .main>p {
        background-color: rgb(@bgcol,@bgcol,@bgcol);
    }    
    

  /* ### BASIC DIMENSIONS ### */

    @media screen and (orientation: portrait) and (max-width: 6000px) {
        :root {
            font-size: @size-P;
        }
        img[title^="Relax"] {
            padding: 0;
            margin: .3rem 0 -.3rem -.3rem;
        }
    }
    @media screen and (orientation: landscape) and (max-width: 6000px) {
        :root {
            font-size: @size-L;
        }
        img[title^="Relax"] {
            transform: scale(.8, .8);
            margin: 0 0 0 -0.6rem;
        }
    }

  /* ### GENERAL ### */
    
    h1,
    h2,
    h3,
    div.header {
        font-size: 99%;
    }

    body,
    div#Form2 {
        width: 100%;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    span[style*="width"],
     input[style*="width"],
      select[style*="width"]
       textarea[style*="width"] {
        max-width: 100%;    
    }

    select,
    select[id*="Label"],
    input,
    input[id*="Label"] {
        margin: 0.3rem 0;
        max-width: 97%;
        min-width: 2.3rem;
        padding: 0.3rem calc(@resPad + .5rem);
        box-sizing: border-box;
    }

    textarea,
    textarea[id*="TextBox"] {
        margin-bottom: 0.6rem;
        max-width: 97%;
        padding: 0.3rem calc(@resPad + .5rem);
        box-sizing: border-box;   
    }

    div.page {
        width: 98%;
        margin: 0 auto;
        box-sizing: content-box;
        border: 1px solid #406285;
    }

    /* #### HEADER #### */

    div.header {
        width: 100%;
        margin: 0 auto;
        padding: 0;
        box-sizing: content-box;
        position: sticky;
        top: -2.5rem;
        z-index: 900;
        background-color: #496077;
        display: grid;
        grid-template-columns: 130px 1fr auto;
        grid-template-rows: 2.7rem 2rem;
    }
    .header div.title:first-of-type {
        grid-area: 1/1/2/2;
        display: flex;
        justify-content: center;
        align-items: baseline;
        overflow: hidden;
    }
    .header > div:nth-child(2) {
        grid-area: 1/2/2/-1;
    }
    .header h1 {
        font-size: 150%;
        margin-top: -.4rem !important;
    }
    .header > div:nth-child(3) {
        grid-area: 2/-2/3/-1;
    }
    .header > div.loginDisplay {
        background-color: #496077;
        height: 1.8rem;
        margin: 0;
        padding: .1rem .2rem 0 0;
        box-sizing: border-box;
        display: flex;
        flex-flow: row nowrap;
        align-items: start;
    }
    a#HeadLoginView_HeadLoginStatus {
        text-decoration: 1px underline solid;
    }
    .header > div:nth-child(4) {
        grid-area: 2/1/3/-2;
        display: flex;
        flex-flow: row nowrap;
    /*  overflow: hidden; */
        height: 2rem;
        background-color: #496077;
    }
    .header > div.container {
        font-size: 100%;
        line-height: 100%;
        background-color: #496077;
    }
    div.row,
    div.hideSkiplink {
        background-color: #496077;    
    }
    #myTopnav a.icon {
        float: left;
        font-size: 120%;
        line-height: 120%;
        padding-top: 1.8rem 1.1rem 0 0;
        box-sizing: border-box;
        margin-bottom:-.2rem;  
        background-color: #496077;  
    }
    #myTopnav a {
        flex: 3 1 content;
        background-color: #496077;  
        text-decoration: none;
        font-size: 140%;
        padding: 0 .8rem .2rem .1rem;
        line-height: 100%;
        z-index:1000;
    }

    /* #### END HEADER #### */

    div.main {
        width: 97%;
        margin: 0 auto;
        box-sizing: border-box;
        padding: 0.3rem calc(@resPad + .6rem);
    }
    div.footer,
    hr {
        width: 88%;
        margin: 0 auto;
        font-size: 80%;
    }

    fieldset {
        width: 100%;
        margin: 0;
        padding:0;
    }

    /* ### KEEP THAT LAST BRACKET: ### */
}