/*
*/
div#sectionBar::after {
clear: both;
}
i {
vertical-align: -15%;
}
dt.cats {
/* width: calc(100% - 0.8rem);
*/
padding: 0.3rem;
border: 0.05rem solid black;
font-size: 1rem;
font-weight: 600;
color: black;
/* box-shadow: var(--mat-shadow);
*/
background-color: var(--object-level1);
}
dt.cats.pubb {
color: rgb(8, 50, 108);
}
dt.cat1 {
background-color: var(--object-level1);
}
dt.cat2 {
background-color: var(--object-level2);
}
dt.cat3 {
background-color: var(--object-level3);
}
dt.cat4 {
background-color: var(--object-level4);
}
dt.cat5 {
background-color: var(--object-level5);
}
/* div.browser ol {
list-style: none;
padding-left: 0.8rem;
margin: 0 0.2rem 0 0;
}
div.browser dd>ol {
padding-top: 0.25rem;
padding-left: 0.5em;
padding-bottom: 0.4rem;
overflow: scroll;
max-height: 50vh;
}
div.browser span.numerazioneCapitoli {
color: rgb(170, 170, 170);
font-size: 80%;
display: inline-block;
position: relative;
left: -0.3rem;
bottom: 0;
}
*/
[tooltip]:hover {
position: relative;
z-index: 100;
;
}
[tooltip]:after {
content: attr(tooltip);
color: white;
background: rgb(51, 51, 51);
background: rgba(31, 31, 31, 0.85);
box-shadow: var(--mat-shadow-light);
padding: 4px 8px;
position: absolute;
left: -9999px;
opacity: 0;
/* bottom: 100%; */
white-space: nowrap;
transition: 0.25s linear opacity;
border-radius: 4px;
font-weight: 500;
font-size: 1rem;
z-index: 100;
}
[tooltip]:hover:after {
left: 24px;
opacity: 1;
top: 32px;
z-index: 100;
}
select {
font-weight: 600;
font-size: 0.8rem;
background: var(--mat-btns-back);
color: var(--mat-btns-fore);
box-shadow: var(--mat-btns-shadow);
border: 1px solid rgb(85, 85, 85);
height: 1.5rem;
margin: 0rem 0.4rem 0 0.1rem;
cursor: pointer;
}
label {
font-weight: 600;
font-size: 0.8rem;
color: var(--app-text-color);
height: 1.5rem;
margin: 0;
padding: 0;
cursor: pointer;
}
input[type=checkbox] {
margin-right: 0.3rem;
}
div.moduleBar i {
font-size: 130%;
}
xselect {
-webkit-appearance: none;
padding: 0.1rem 2rem 0.1rem 0.3rem;
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
background-repeat: no-repeat, repeat;
background-position: right .7em top 50%, 0 0;
background-size: .65em auto, 100%;
}
div.moduleBar button {
background: none;
border: none;
box-shadow: none;
color: darkblue;
}
div.moduleBar button:hover {
text-decoration: underline;
color: crimson;
}
button.icon i {
background: var(--obj-background);
color: var(--obj-forecolor);
padding: 0.3rem 0.2rem 0rem 0.2rem;
vertical-align: 0;
border-radius: 15px;
border-style: outset;
display: inline-block;
border-width: 0.1rem;
}
div.uiPanel {
background: var(--obj-background);
/* color: var(--obj-forecolor); */
background: rgba(240, 240, 240, 0.95);
padding: 0.5rem;
position: fixed;
z-index: 9;
padding: 2rem;
right: 0;
border: 2px solid blue;
box-shadow: var(--obj-shadow-std);
top: 5rem;
}
div.uiPanelTitle {
background: var(--obj-titled-background);
color: var(--obj-titled-forecolor);
font-weight: 600;
text-align: center;
padding: 0.5rem;
width: 100%;
height: 2rem;
margin: 0;
position: absolute;
top: 0;
left: 0;
}
div.uiPanelBody {
padding: 2.5rem 0.5rem;
}
div.uiPanelButtons {
bottom: 0;
position: absolute;
width: 100%;
background: rgba(0, 0, 0, 0.6);
margin: 0;
height: 1.5.5rem;
left: 0;
padding: 0.5rem;
text-align: center;
}
div.uiPanel ctrl {
width: 100%;
text-align: right;
margin-bottom: 0.2rem;
}
/* STILE per slider WWW */
label.switch {
position: relative;
display: inline-block;
width: 60px;
height: 1.5rem;
font-size: 1rem;
}
label.switch input {
opacity: 0;
width: 0;
height: 0;
color: var(--ui-btns-fore);
}
label.switch .slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--mat-btns-back);
box-shadow: 0.1rem 0.1rem 0.2rem black inset;
-webkit-transition: .4s;
transition: .4s;
color: var(--ui-btns-fore);
}
label.switch .slider i.tc {
position: absolute;
background-color: white;
font-size: 1.2rem;
content: "";
height: 1.1rem;
width: 1.1rem;
top: 3px;
left: 3px;
bottom: 4px;
-webkit-transition: .4s;
border-radius: 34px;
transition: .4s;
box-shadow: 0.1rem 0.1rem 0.2rem black;
color: var(--ui-btns-fore);
}
label.switch input:checked+.slider {
background-color: yellow;
box-shadow: 0.1rem 0.1rem 0.2rem black inset;
}
/* label.switch input:focus+.slider {
box-shadow: 0 0 1px #2196F3, 0.1rem 0.1rem 0.2rem black inset;
} */
label.switch input:checked+.slider i.tc {
-webkit-transform: translateX(34px);
-ms-transform: translateX(34px);
transform: translateX(34px);
color: black;
font-size: 1.2rem;
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
div.chapterOptions,
div.blockOptions {
background: var(--obj-panel-background);
color: var(--obj-forecolor);
padding: 0.5rem;
/**/
border: 0.02rem dashed gray;
text-align: left;
padding-left: 1.5rem;
}
div.chapterOptions.collapsed,
div.blockOptions.collapsed {
display: inline-block;
width: 1rem;
height: 1rem;
padding: 0;
position: absolute;
background: none;
border: none;
}
div.chapterOptions.collapsed *,
div.blockOptions.collapsed * {
display: none;
}
/* button.collapser {
background: rgba(0, 0, 0, 0.01);
display: inline-block!important;
border: none;
box-shadow: none;
padding: 0;
margin: 0 0 0 2px;
vertical-align: top;
color: rgba(125, 125, 125, 1);
float: left;
}
button.collapser:hover {
background: none!important;
color: yellow;
}
button.collapser:before {
content: "◢";
text-shadow: 1px 1px 2px black;
position: relative;
}
.collapsed button.collapser:before {
content: "◤";
}
*/
div.contentTitle {
background: var(--obj-background);
color: var(--obj-forecolor);
padding: 0.5rem;
/**/
border: 0.02rem dashed gray;
}
div.module.collapsed div.moduleContent div.chapterOptions,
div.module.collapsed div.moduleContent div.blockOptions {
display: none;
}
div.module.collapsed {
overflow: hidden;
height: 2.5rem;
}
div.module div.buttons button.collapser {
transition: transform 0.4s ease-in;
background: none;
}
div.module div.buttons button.collapser:hover {
text-decoration: none;
transform: scale(1.2);
}
div.module.collapsed div.buttons button.collapser {
transform: rotate(180deg);
}
div.module.collapsed div.panel.contentTitle {
position: absolute;
top: 1px;
left: 11rem;
width: 70%;
height: 2rem;
padding: 0.1rem 0 0 0.3rem;
}
div.module.collapsed div.moduleContent {
max-height: 6rem!important;
}
div.moduleContent div.fileContent div.edit {
display: none;
}
div.moduleContent div.pubbLink div {
display: inline-Block;
}
/* region CTRL generico */
ctrl {
width: 32rem;
display: block;
text-align: right;
position: relative;
font-size: 1rem;
}
ctrl * {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
vertical-align: text-bottom;
font-size: 1em;
font-weight: 500;
letter-spacing: 0.01em;
box-sizing: border-box;
color: var(--mat-btns-fore);
}
ctrl *:focus {
outline: none;
}
/* EndRegion */
/*Checkbox e radiobutton*/
ctrl.uiRadioButton label input,
ctrl.uiCheckBox label input {
background: none;
border: 0.1em solid var(--ui-ctrl-color);
display: inline-block;
width: 1.2em;
height: 1.2em;
position: relative;
margin-left: 0.5em;
margin-right: 0.3em;
top: 0.15em;
cursor: pointer;
padding-left: 0.2em;
vertical-align: middle;
}
ctrl.uiRadioButton label input {
border-radius: 90px;
text-align: center;
vertical-align: -0.35em;
}
ctrl.uiRadioButton label input:checked,
ctrl.uiCheckBox label input:checked {
background-color: var(--ui-ctrl-color);
color: var(--ui-ctrl-hintcolor);
}
ctrl.uiCheckBox label input:checked:after {
content: "✓";
}
ctrl.uiRadioButton label input:checked:after {
content: "•";
}
ctrl.uiRadioButton label:hover,
ctrl.uiCheckBox label:hover {
text-decoration: underline;
text-decoration-style: dotted;
text-decoration-color: darkgray;
}
ctrl.uiRadioButton label:hover input,
ctrl.uiCheckBox label:hover input {
border-style: dotted;
}
ctrl.uiRadioButton label:hover input:after,
ctrl.uiCheckBox label:hover input:after {
color: var(--ui-ctrl-color);
filter: opacity(40%);
}
ctrl.uiCheckBox label:hover input:after {
content: "✓";
}
ctrl.uiRadioButton label:hover input:checked:after,
ctrl.uiCheckBox label:hover input:checked:after {
color: var(--ui-ctrl-hintcolor);
filter: none;
}
ctrl.uiRadioButton label:hover input:after {
content: "•";
}
ctrl.uiRadioButton label input:after {
left: 0.25em;
position: absolute;
bottom: -0.1em;
font-size: 1.2em;
}
ctrl.uiRadioButton.vertical data,
ctrl.uiCheckBox.vertical data {
max-height: 7em;
overflow-y: scroll;
}
ctrl.uiRadioButton.vertical data label,
ctrl.uiCheckBox.vertical data label {
clear: both;
}
/*Field*/
ctrl.uiField input {
font-size: 1em;
min-width: 20em;
border: 1px solid var(--ui-ctrl-color);
padding: 0.25em;
box-shadow: 0.08em 0.08em 0.15em rgba(40, 40, 40, 0.65) inset;
width: 100%;
/* position: absolute; */
}
/*Select Semplice*/
ctrl.uiSelect select {
-webkit-appearance: none;
padding: 0.1em 1.4em 0.1em 0.3em;
background: var(--ui-ctrl-contentBackground);
font-size: 1em;
min-width: 20em;
min-height: 1em;
height: 1.9em;
border-radius: 0;
border: 1px solid var(--ui-ctrl-color);
box-shadow: 0.08em 0.08em 0.15em rgba(40, 40, 40, 0.65) inset;
max-width: 20em;
}
ctrl.uiSelect data:before {
content: "…";
display: inline;
position: absolute;
right: 1em;
z-index: 2;
color: var(--ui-ctrl-color);
top: -0.1em;
vertical-align: text-bottom;
font-size: 1.2em;
font-weight: bold;
pointer-events: none;
}
ctrl.uiSelect data:hover:before {
color: var(--ui-ctrl-hilightColor);
pointer-events: none;
}
/*multiLvlSelect*/
ctrl.multiLvlSelect data mLvlSelect {
font-size: 1em;
min-width: 20em;
min-height: 1em;
background: white;
border: 1px solid var(--ui-ctrl-color);
padding: 0.25em;
box-shadow: 0.08em 0.08em 0.15em rgba(40, 40, 40, 0.65) inset;
margin-left: 0.3em;
bottom: -0.3em;
width: 20em;
display: inline-block;
}
ctrl.multiLvlSelect data mLvlSelect div.activation {
position: absolute;
right: 0.3em;
top: 0;
font-size: 1.2em;
font-weight: bold;
color: var(--ui-ctrl-color);
}
ctrl.multiLvlSelect data mLvlSelect:before {
content: attr(data-display-value);
float: left;
}
ctrl.multiLvlSelect data mLvlSelect .multiSelect {
position: absolute;
background: var(--obj-background);
color: var(--obj-forecolor);
padding: 0;
display: flex;
flex-direction: row;
box-shadow: var(--obj-shadow-std);
width: 100%;
margin: 0;
left: 0;
top: 2em;
}
ctrl.multiLvlSelect data mLvlSelect .multiSelect .selector {
background: white;
width: 100px;
box-shadow: 0.08em 0.08em 0.15em rgba(40, 40, 40, 0.65) inset;
min-height: 15em;
}
ctrl.multiLvlSelect data mLvlSelect .multiSelect .selector button {
background: none;
box-sizing: border-box;
border: none;
padding: 0.3em 0.02em;
border-bottom: 0.05em solid gray;
background: white;
display: block;
width: 96px;
box-shadow: none;
letter-spacing: -0.03em;
font-size: 0.9em;
}
ctrl.multiLvlSelect data mLvlSelect .multiSelect .selector button[selected=true] {
background: var(--ui-ctrl-color);
color: var(--ui-ctrl-hintcolor);
}
ctrl.multiLvlSelect data mLvlSelect .multiSelect .list {
background: white;
flex-grow: 1;
border-left: 0.05em solid gray;
padding: 0;
overflow-x: scroll;
}
ctrl.multiLvlSelect data mLvlSelect .multiSelect .list ul {
margin: 0;
list-style: none;
padding: 0;
}
ctrl.multiLvlSelect data mLvlSelect .multiSelect .list ul li {
background: none;
box-sizing: border-box;
border: none;
padding: 0.3em 0.02em;
border-bottom: 0.05em solid gray;
background: white;
display: block;
width: 100%;
box-shadow: none;
font-size: 0.9em;
}
/* uiButton*/
ctrl data button {
font-size: 1.1em;
border: 1px solid var(--ui-ctrl-color);
padding: 0.25em;
box-shadow: 0.08em 0.08em 0.15em rgba(40, 40, 40, 0.65);
background: var(--mat-btns-back);
width: 100%;
box-sizing: border-box;
height: 1.7em;
}
/* TEST */
ctrl {
color: black;
display: inline-block;
font: var(--font-condensed);
font-size: 85%;
position: relative;
/* border: 1px solid green; */
}
ctrl prompt {
/* border: 1px solid red; */
padding-top: 0.5em;
font-weight: 500;
display: inline-block;
position: relative;
top: -7px;
}
.uiRadioButton prompt {
padding-top: 0.2em;
}
ctrl data {
/* border: 1px solid blue; */
/* flex-basis: auto;
flex-grow: 2;
*/
/* min-width: 20em; */
padding: 0.2em;
display: inline-block;
position: relative;
}
ctrl data label {
float: left;
position: relative;
}
/*====Eccezioni per i controlli*/
div.blockSettings ctrl {
color: black;
width: auto;
display: inline-block;
font: var(--font-condensed);
font-size: 85%;
margin: 0 0.5rem;
}
div.blockSettings ctrl * {
font-family: var(--font-condensed);
}
div.blockSettings ctrl.uiButton {
color: black;
width: 9rem;
display: inline-block;
font-size: 85%;
}
div.blockSettings ctrl data,
div.blockSettings ctrl data select {
min-width: unset;
}