walter-boente_book-collection/csspageweaver/interface/css/panel.css

@import url("../fonts/IBM_Plex_Mono/stylesheet.css");

@media print{
    csspageweaver-gui{ 
        display: none;
    }
}

@media screen, pagedjs-ignore {

     
    /* TOGGLE PANEL ----------------------------------- */
    #cssPageWeaver_toggle-panel ~ #cssPageWeaver_panel{ display: none; }
    #cssPageWeaver_toggle-panel + label #panel-open{ display: none; }

    #cssPageWeaver_toggle-panel:checked ~ #cssPageWeaver_panel{ display: block; }
    #cssPageWeaver_toggle-panel:checked + label #panel-open{ display: block; }
    #cssPageWeaver_toggle-panel:checked + label #panel-closed{ display: none; }

    #cssPageWeaver_toggle-panel{ display: none; }


    /* STYLE ----------------------------------- */
    :root{
        --cssPageWeaver-font:'IBM Plex Mono';
        --cssPageWeaver-size: 16px;
        --cssPageWeaver-fixed: 30px;

        /* --cssPageWeaver-color-border: #8fb6b0;
        --cssPageWeaver-color-accent: #EE6C4D;
        --cssPageWeaver-color-accent-hover: #852811;
        --cssPageWeaver-color-text: #464f4e;
        --cssPageWeaver-color-bg: #f8f8f2; */

        
        /* --cssPageWeaver-color-accent: #EE6C4D;
        --cssPageWeaver-color-accent-hover: #852811;
        --cssPageWeaver-color-border: #86766e;
        --cssPageWeaver-color-text: #4f4946;
        --cssPageWeaver-color-bg: #efefef; */

        --cssPageWeaver-color-accent: RebeccaPurple;
        --cssPageWeaver-color-accent-hover: BlueViolet;
        --cssPageWeaver-color-border: #836e86;
        --cssPageWeaver-color-border-light: #999999;
        --cssPageWeaver-color-text: #4e464f;
        --cssPageWeaver-color-bg: #f1f0f0;

        --cssPageWeaver-radius: 5px;
    }


    /* Toggle button -------------------------------------------- */

    #cssPageWeaver_toggle-panel + label{
        background-color: var(--cssPageWeaver-color-bg);
        border: 2px solid var(--cssPageWeaver-color-border);
        border-radius: var(--cssPageWeaver-color-radius);

        --size: 30px;
        width: var(--size);
        height: var(--size);

        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25em;

        color: var(--cssPageWeaver-color-text);
        //border-radius: var(--cssPageWeaver-radius);

        transition: border-radius .25s ease-in-out;

    }

    #cssPageWeaver_toggle-panel:checked + label{ 
        border-top-left-radius: var(--cssPageWeaver-radius);
    }


    /* CONTAINER -------------------------------------------- */

    csspageweaver-gui *{
        margin: 0;
        padding: 0;
       
    }


    csspageweaver-gui{
        font-family: var(--cssPageWeaver-font);
        color: var(--cssPageWeaver-color-text);
        font-size: var(--cssPageWeaver-size);
    }

    csspageweaver-gui label, 
    csspageweaver-gui button{
        cursor: pointer!important;
    }

    #cssPageWeaver_toggle-panel + label{
        position: fixed;
        left: var(--cssPageWeaver-fixed);
        top: var(--cssPageWeaver-fixed);
        width: 30px;
        left: 30px;
        z-index: 9000;
    }

    #cssPageWeaver_panel{
        width: 296px;
        background-color: var(--cssPageWeaver-color-bg);
        border: 2px solid var(--cssPageWeaver-color-border);
        border-radius: var(--cssPageWeaver-radius);
        position: fixed;
        left: var(--cssPageWeaver-fixed);
        top: var(--cssPageWeaver-fixed);
        z-index: 8900;
        padding: 1em 1em .5em 1em;

        max-height: 80vh;
        max-height: calc(100vh - 5rem);
        overflow: scroll;

    }


    /* panel-group ------------------------------------- */


    #cssPageWeaver_panel .panel-group{
        margin: 0;
        padding-top: 1.25em;
    }
    #cssPageWeaver_panel .panel-group:not(:last-of-type){
        border-bottom: 1px solid var(--cssPageWeaver-color-border);
        padding-bottom: 1.25em;
    }



    /* panel-group-title ------------------------------------- */

      #cssPageWeaver_panel h1, 
      #cssPageWeaver_panel button,
      #cssPageWeaver_panel p,
      #cssPageWeaver_panel svg,
      #cssPageWeaver_panel label{
        all: initial;
        all: unset;
      }


    #cssPageWeaver_panel .panel-group-title{
        display: grid;
        grid-template-columns: auto 1ch 1fr;
        grid-gap: .5ch;
    }

    #cssPageWeaver_panel h1 span{
        font-size: 0.75em;
    }


    #cssPageWeaver_panel .panel-group-title:not(:empty) + *{
        margin-top: 1.25em;
    }

    #cssPageWeaver_panel .panel-group-title h1{
        font-size: 1em;
        font-weight: 600;
        margin: 0;
    } 

    #cssPageWeaver_panel .panel-group-title input{
        display: none;
    } 
    #cssPageWeaver_panel .panel-group-title label{
        grid-column: -1;
    }

    #cssPageWeaver_panel .panel-group-title label span{
        /* color: var(--cssPageWeaver-color-accent); */
        font-size: 16px;
        border: 1.5px solid var(--cssPageWeaver-color-accent);
        padding: 0.25ch 1ch 0.5ch 1ch;
        min-width: 4ch;
        text-align: center;

        font-size: 0.8em;
        font-weight: 500;
        border-radius: var(--cssPageWeaver-radius);

        background-color: var(--cssPageWeaver-color-accent);
        border-color: var(--cssPageWeaver-color-accent);
        color: var(--cssPageWeaver-color-bg);

        font-style: italic;   
       
    } 

    #cssPageWeaver_panel .panel-group-title label span:hover{
        background-color: var(--cssPageWeaver-color-accent-hover);
        border-color: var(--cssPageWeaver-color-accent-hover);
        color: var(--cssPageWeaver-color-bg);

    }

    #cssPageWeaver_panel .panel-group-title input:not(:checked) + label[id*="toggle"] span.button-see{
        background-color: var(--cssPageWeaver-color-bg);
        color: var(--cssPageWeaver-color-accent);
    } 

    #cssPageWeaver_panel .panel-group-title input:checked + label[id*="toggle"] span.button-hide{
        background-color: var(--cssPageWeaver-color-bg);
        color: var(--cssPageWeaver-color-accent);
    } 

    /* INFO BOX ---------------------------------- */
    #cssPageWeaver_panel .panel-group-title details{
        position: relative;
    }
    #cssPageWeaver_panel .panel-group-title summary{
        color: var(--cssPageWeaver-color-text);
        //border: 1px solid black;
        //border-radius: 1rem;
        width: 1rem;
        font-size: .8em;
        height: 1rem;
        text-align: center;
        cursor: pointer;
        opacity: .3;
        line-height: 160%;
    }

    #cssPageWeaver_panel .panel-group-title details summary::marker {
        display: none;
        content: "";
        border: 1px solid currentColor;
    }

}

#cssPageWeaver_panel .panel-group-title details p{
    position: absolute;
    background: var(--cssPageWeaver-color-bg);
    padding: .5ch;
    width: max-content;
    max-width: 10rem;
    font-size: .7rem;
    margin-top: .5ch;
    border: 1px solid var(--cssPageWeaver-color-accent);
    border-radius: .2ch;
    top: -50%;
    left: 2em;
    transform: translateX(0%);
}


/* panel-group-values ---------------------------------- */

#cssPageWeaver_panel .panel-group-values{
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* INPUT NUMBER ---------------------------------- */


#cssPageWeaver_panel input[type="number"]{
    font-family: var(--cssPageWeaver-font)!important;
    color: var(--cssPageWeaver-color-text);
    width: 8ch;
    background-color: transparent!important;
    border: 1px solid var(--cssPageWeaver-color-text);
    font-size: calc(var(--cssPageWeaver-size)*0.9);
    padding-left: 0.5ch;
}

#cssPageWeaver_panel input[type="number"]:focus,
#cssPageWeaver_panel input[type="number"]:focus-visible{
    border: 1px solid var(--cssPageWeaver-color-accent)!important;
    outline: none;
}


/* INPUT CHECKBOX ---------------------------------- */

#cssPageWeaver_panel input[type="checkbox"], 
#cssPageWeaver_panel input[type="radio"]{ display: none; }

#cssPageWeaver_panel input + label:not([id*="toggle"])::before{
    content: "";
    --size: 12px;
    width: var(--size);
    height: var(--size);
    display: inline-block;
    box-sizing: border-box;
    border: 1.5px solid var(--cssPageWeaver-color-text);
    margin-right: 1ch;

}

#cssPageWeaver_panel input:checked + label{
    color: var(--cssPageWeaver-color-accent);
}

#cssPageWeaver_panel input:checked + label::before{
    border: 5px solid var(--cssPageWeaver-color-accent);
}

#cssPageWeaver_panel input + label:hover{
    color: var(--cssPageWeaver-color-accent-hover);
}

#cssPageWeaver_panel input + label:hover::before{
    border: 1.5px solid var(--cssPageWeaver-color-accent-hover);
}

#cssPageWeaver_panel input[type="radio"]:checked + label:hover::before{
    border: 5px solid var(--cssPageWeaver-color-accent);
}
#cssPageWeaver_panel input[type="radio"]:checked + label:hover{
    color: var(--cssPageWeaver-color-accent);
}
#cssPageWeaver_panel input[type="checkbox"] + label:hover::before{
    border: 5px solid var(--cssPageWeaver-color-accent-hover);
}

/* INPUT RADIO ---------------------------------- */

 #cssPageWeaver_panel input[type="radio"] + label{
    margin-bottom: 0.5em;
}

/* exception */
/*#cssPageWeaver_panel #baseline-toggle + label::before{ display: none; }
*/

/* BUTTONS-GROUP ------------------------------------------- */

#cssPageWeaver_panel .buttons-group button,
#cssPageWeaver_panel .buttons-group .button{
    display: inline-block;
    --size: 40px;
    background-color: transparent;
    border: 1.5px solid var(--cssPageWeaver-color-accent);
    border-radius: var(--cssPageWeaver-radius);
    box-sizing: border-box;

    color: var(--cssPageWeaver-color-accent);

    width: var(--size);
    height: var(--size);

    text-align: center;
    vertical-align: middle;
    text-decoration: none;
}

#cssPageWeaver_panel .buttons-group .button:not(:has(*)){
    padding: .5em 0;
}

#cssPageWeaver_panel .buttons-group input{
    display: none;
}

#cssPageWeaver_panel .buttons-group button svg,
#cssPageWeaver_panel .buttons-group .button svg{
    fill: var(--cssPageWeaver-color-accent);
    padding: 0.25em;
}

#cssPageWeaver_panel .buttons-group{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1ch;
}

#cssPageWeaver_panel .buttons-group.align-right{
    justify-content: flex-end;
}

#cssPageWeaver_panel .panel-group-title:not(:empty) + .buttons-group{
    padding-top: 0.25em;
    margin-top: .5em;
}

#cssPageWeaver_panel .buttons-group .force-right{
    text-align: right;
    flex-grow: 1;
}

#panel-buttons .buttons-group{
    padding-top: 1.25em;
    display: flex;
}


#panel-buttons .buttons-group button,
#panel-buttons .buttons-group .button{
    margin-left: 0.5em;
}

#cssPageWeaver_panel input + label.label-block{
  display: block;
  margin-top: 1rem;
}

#cssPageWeaver_panel .panel-group-title.button-toggle label::before{ display: none!important; }

/* CHECKED BUTTONS --------------------------------------- */

#cssPageWeaver_panel .buttons-group input:checked + button,
#cssPageWeaver_panel .buttons-group input:checked + .button{ 
    background-color: var(--cssPageWeaver-color-accent);
    border-color: var(--cssPageWeaver-color-accent);
    cursor: pointer;
}
#cssPageWeaver_panel .buttons-group input:checked + button svg,
#cssPageWeaver_panel .buttons-group input:checked + .button svg{
    fill: var(--cssPageWeaver-color-bg);
}

/* TOGGLE LABEL ICONS --------------------------------------- */

#cssPageWeaver_panel input[id*="toggle"] + .buttons-group{
  margin-top: 1rem;
}

#cssPageWeaver_panel input[id*="toggle"]:checked + .buttons-group .button:nth-of-type(1),
#cssPageWeaver_panel input[id*="toggle"]:not(:checked) + .buttons-group .button:nth-of-type(2){
    background-color: var(--cssPageWeaver-color-accent);
    border-color: var(--cssPageWeaver-color-accent);
}

#cssPageWeaver_panel input[id*="toggle"]:checked + .buttons-group .button:nth-of-type(1) svg,
#cssPageWeaver_panel input[id*="toggle"]:not(:checked) + .buttons-group .button:nth-of-type(2) svg{
    fill: var(--cssPageWeaver-color-bg);
}

/* DETAILS CONTAINER< ------------------- */

[data-open-container*="details"] ~ [id*="details"]{
    box-sizing: border-box;
    position: relative;
    top: 1em;

    max-height: 0px;
    overflow: hidden;
    transition:  max-height 1s;
}

[data-open-container*="details"]:checked ~ [id*="details"]{
    max-height: 100vh;
    margin-bottom: 0.5em;
    border-top: .5px solid var(--cssPageWeaver-color-border-light);
}


/* HOVER BUTTONS ------------------------------------------------------------ */ 

#cssPageWeaver_panel .buttons-group button:hover,
#cssPageWeaver_panel .buttons-group .button:hover{
    background-color: var(--cssPageWeaver-color-accent-hover)!important;
    border-color: var(--cssPageWeaver-color-accent-hover)!important;
}
#cssPageWeaver_panel .buttons-group button:hover svg,
#cssPageWeaver_panel .buttons-group .button:hover svg{
    fill: var(--cssPageWeaver-color-bg)!important;
}

/* SHORTCUT ------------------------------------------------------------ */ 

#cssPageWeaver_panel .shortcut-list{
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .25em;
    margin-top: .5em;
}
#cssPageWeaver_panel .shortcut-list li{
    font-size: .75em;
    color: var(--cssPageWeaver-color-text);
    border: 1px solid;
    border-radius: .25em;
    padding: .2em;
    cursor: help;
    opacity: .5;
}

/* List hidden hooks ------------------------------------------------------------ */

#cssPageWeaver_panel #hidden-features h1 {
    font-weight: bold;
    margin-bottom: .5em;

}
#cssPageWeaver_panel #hidden-features summary {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-top: 1em;
    font-size: .75rem;
    cursor: pointer;
}
#cssPageWeaver_panel #hidden-features ul{
    list-style: none;
    font-size: .75rem;
    display: flex;
    flex-wrap: wrap;
    gap: .75em;
}
#cssPageWeaver_panel #hidden-features ul li{
    margin-bottom: .25em;
    color: var(--cssPageWeaver-color-bg);
    padding: .2em .4em;
    border-radius: .2em;
    background: var(--cssPageWeaver-color-accent);
    font-style: italic;
}

#cssPageWeaver_panel #hidden-features summary::marker {
    display: none;
}