536 lines
No EOL
14 KiB
CSS
536 lines
No EOL
14 KiB
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;
|
||
}
|
||
|
||
#cssPageWeaver_panel .panel-group-values label{
|
||
font-size: 12px;
|
||
}
|
||
|
||
|
||
/* 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;
|
||
} |