8039 lines
181 KiB
CSS
8039 lines
181 KiB
CSS
/*
|
|
* $Revision$
|
|
* $Id$
|
|
*/
|
|
|
|
/* Aareon Skolar-Sans font, licensed from Rosetta
|
|
100 - Thin
|
|
200 - Extra Light
|
|
300 - Light
|
|
400 - Normal
|
|
500 - Medium
|
|
600 - Semi Bold
|
|
700 - Bold
|
|
800 - Extra Bold
|
|
900 - Black
|
|
*/
|
|
@font-face {
|
|
font-family: fclt-skolar-sans;
|
|
src: url(../Fonts/SkolarSansPEWeb-Rg.woff2) format("woff2");
|
|
font-weight: 400;
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
@font-face {
|
|
font-family: fclt-skolar-sans;
|
|
src: url(../Fonts/SkolarSansPEWeb-Sb.woff2) format("woff2");
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
}
|
|
@font-face {
|
|
font-family: fclt-skolar-sans;
|
|
src: url(../Fonts/SkolarSansPEWeb-Bd.woff2) format("woff2");
|
|
font-weight: 700;
|
|
font-weight: bold;
|
|
font-style: normal;
|
|
}
|
|
|
|
/* italic */
|
|
@font-face {
|
|
font-family: fclt-skolar-sans;
|
|
src: url(../Fonts/SkolarSansPEWeb-It.woff2) format("woff2");
|
|
font-weight: 400;
|
|
font-weight: normal;
|
|
font-style: italic;
|
|
}
|
|
@font-face {
|
|
font-family: fclt-skolar-sans;
|
|
src: url(../Fonts/SkolarSansPEWeb-SbIt.woff2) format("woff2");
|
|
font-weight: 600;
|
|
font-style: italic;
|
|
}
|
|
@font-face {
|
|
font-family: fclt-skolar-sans;
|
|
src: url(../Fonts/SkolarSansPEWeb-BdIt.woff2) format("woff2");
|
|
font-weight: 700;
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
}
|
|
|
|
h1, h2, h3, h4,
|
|
.card-header,
|
|
#portalmenu .menukop, #menutabs .menukop, div.filtermenukop, .widget-type-mk .menukop, .widget-type-mi .menulabel
|
|
{
|
|
font-family: var(--fontfamily_titles);
|
|
font-weight: 600; /* SemiBold */
|
|
font-style: normal;
|
|
}
|
|
|
|
/* wat tijdelijk controlestyles om te zijn of de code deze niet/goed gebruikt */
|
|
|
|
/* deze onderkennen we, dev-only (input.flduo is bedoeld als toevoeging) */
|
|
input.fld, input.suggest,
|
|
select.fld, select.fldmulti, select.multiSuggest,
|
|
textarea.fldtxt,
|
|
input.flddate,
|
|
input.fldtime,
|
|
input.fldshort,
|
|
input#autofilter
|
|
{
|
|
background-color: var(--inputbackgroundcolor);
|
|
border-left: 2px solid rgba(52, 63, 77, 0.1); /* Aareon Urban Grey 10% */
|
|
}
|
|
input#autofilter {
|
|
border: 1px solid rgba(52, 63, 77, 0.4); /* Aareon Urban Grey 40% */
|
|
}
|
|
input.suggest {
|
|
padding-right: 20px; /* Voor het suggest-icoontje */
|
|
}
|
|
|
|
input.flddate, .fldflexD, .fldSflexD
|
|
{
|
|
width: 11em;
|
|
}
|
|
input.fldtime, .fldflexT, .fldSflexT
|
|
{
|
|
width: 6em;
|
|
}
|
|
input.fldshort
|
|
{
|
|
width: 105px;
|
|
}
|
|
input.fldlong { /* Rapport */
|
|
width: 460px;
|
|
background-position: 448px !important;
|
|
}
|
|
/* deprecated (textarea.fldtxt is de default) en niet nodig (want 100%)
|
|
textarea.fld
|
|
{
|
|
width: 340px;
|
|
} */
|
|
|
|
.leftcontainer { /* te elimeren */
|
|
border: 1px solid red;
|
|
}
|
|
|
|
|
|
/* **************************************************** */
|
|
/* **************************************************** */
|
|
/* ****** ALGEMENE ZAKEN op TAGS ******** */
|
|
/* **************************************************** */
|
|
/* **************************************************** */
|
|
|
|
/* bodystyles */
|
|
html {
|
|
overflow: auto;
|
|
box-sizing: border-box; /* Bootstrap global, nu ook onze global */
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
*, *::before, *::after {
|
|
box-sizing: inherit;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--fontfamily);
|
|
font-size: 0.75em;
|
|
line-height: 1.8em;
|
|
text-align: left;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body.modal td,
|
|
body.showmode td,
|
|
body.editmode td,
|
|
body.notesmode .card,
|
|
body#searchbody td,
|
|
body#searchbody nav,
|
|
section#searchbody td /* voor de styling-preview */
|
|
{
|
|
font-size: 13px;
|
|
line-height: 27px;
|
|
}
|
|
|
|
/* heel algemene styles */
|
|
body.modal td.label,
|
|
body.modal td.label label,
|
|
body.showmode td.label,
|
|
body.showmode td.label label,
|
|
body.editmode td.label,
|
|
body.editmode td.label label,
|
|
body#searchbody td.label,
|
|
body#searchbody td.label label,
|
|
section#searchbody td.label,
|
|
section#searchbody td.label label
|
|
{
|
|
font-weight: 600; /* semi-bold labels */
|
|
}
|
|
|
|
textarea,
|
|
input,
|
|
th,
|
|
td,
|
|
select { /* Deze moeten allemaal afzonderlijk */
|
|
font-family: var(--fontfamily);
|
|
}
|
|
|
|
/* Deze op z'n minst toch wel */
|
|
td.label,
|
|
td.label ~ td
|
|
{
|
|
color: var(--textcolor);
|
|
}
|
|
|
|
input, textarea, select {
|
|
font-size: 1em;
|
|
padding: 4px 2px 4px 4px;
|
|
margin: 0;
|
|
border: 0;
|
|
border: 1px solid transparent; /* KR; niet zonder overleg weghalen aub */
|
|
border-bottom: 1px solid #aaa;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
textarea {
|
|
overflow: auto; /* Anders default scrollbars bij IE11 */
|
|
}
|
|
td, th {
|
|
font-size: 13px;
|
|
padding: 0px 1px 1px 2px;
|
|
margin: 0;
|
|
border: 0;
|
|
vertical-align: top;
|
|
font-weight: normal;
|
|
}
|
|
/* Safari is ugly, dan maar zo voor iedereen */
|
|
select {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
background-image: url("../Pictures/togglerdown.png");
|
|
background-repeat: no-repeat;
|
|
background-position: right 6px center;
|
|
padding-right: 17px; /* voor het icoontje */
|
|
}
|
|
|
|
select[multiple] {
|
|
background-image: none;
|
|
padding-right: 0;
|
|
}
|
|
|
|
a {
|
|
cursor: pointer;
|
|
}
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
form {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
div {
|
|
border: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
table { /* om border om lege cellen te houden */
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
pre, xmp, code {
|
|
font-size: 13px;
|
|
line-height: 1.3em!important;
|
|
font-style: normal;
|
|
white-space: pre-wrap;
|
|
display:block; /* Zo gebruiken wij <code> die eigenlijk inline is */
|
|
}
|
|
code {
|
|
margin-left: 2em;
|
|
}
|
|
th {
|
|
text-align: inherit;
|
|
padding: 2px 3px 2px 3px;
|
|
background-color: var(--tableheaderbackgroundcolor);
|
|
color: var(--tableheadercolor);
|
|
}
|
|
|
|
img { /* tekst-eigenschap voor de alt als de afbeelding er niet is */
|
|
text-transform: lowercase;
|
|
font-style: italic;
|
|
font-weight: 100;
|
|
}
|
|
|
|
#buttons ul li.btn_disabled,
|
|
i.btn_disabled
|
|
{
|
|
cursor: default;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* =======================
|
|
Switch Toggle Start
|
|
======================= */
|
|
.switch-container {
|
|
position: relative;
|
|
padding-left: 2.25em;
|
|
}
|
|
|
|
/* Custom overrule met switch, dus originele checkbox hiden */
|
|
.switch-checkbox {
|
|
position: absolute;
|
|
z-index: -1;
|
|
opacity: 0;
|
|
}
|
|
|
|
/* Altijd aanwezig (desnoods leeg) */
|
|
.switch-label {
|
|
position: relative;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
|
|
/* ::before = switch-toggle-container, ::after = switch-toggler */
|
|
.switch-checkbox ~ .switch-label::before, /* ~ sibling selector */
|
|
.switch-checkbox ~ .switch-label::after {
|
|
content: "";
|
|
position: absolute;
|
|
border-radius: 0.5em;
|
|
transition: background-color .15s ease-in-out;
|
|
}
|
|
.switch-checkbox ~ .switch-label::before {
|
|
top: .4em;
|
|
left: -2.25em;
|
|
height: 1em;
|
|
width: 1.75em;
|
|
background-color: #FFFFFF;
|
|
border: 1px solid rgba(0, 0, 0, 0.5);
|
|
transition: box-shadow .15s ease-in-out;
|
|
}
|
|
.switch-checkbox ~ .switch-label::after {
|
|
top: calc(.4em + 2px);
|
|
left: calc(-2.25em + 2px);
|
|
height: calc(1em - 4px);
|
|
width: calc(1em - 4px);
|
|
background-color: rgba(0, 0, 0, 0.35);
|
|
transition: transform .15s ease-in-out;
|
|
}
|
|
|
|
/* Checked */
|
|
.switch-checkbox:checked ~ .switch-label::before {
|
|
background-color: #00B0F0; /* Aareon Sky Blue */
|
|
}
|
|
.switch-checkbox:checked ~ .switch-label::after {
|
|
background-color: #FFFFFF;
|
|
transform: translateX(0.75em);
|
|
}
|
|
/* Op geklikt / gefocused */
|
|
.switch-checkbox:focus ~ .switch-label::before {
|
|
box-shadow: 0 0 0.1em 0.1em;
|
|
}
|
|
|
|
/* Disabled */
|
|
.switch-checkbox:disabled ~ .switch-label::before {
|
|
border-color: rgba(52, 63, 77, 0.35)!important; /* Aareon Urban Grey (10% + 25% =) 35% */
|
|
background-color: rgba(52, 63, 77, 0.1)!important; /* Aareon Urban Grey 10% */
|
|
}
|
|
.switch-checkbox:disabled ~ .switch-label::after {
|
|
background-color: rgba(52, 63, 77, 0.25)!important; /* Aareon Urban Grey 25% */
|
|
}
|
|
|
|
/* Disabled & Checked */
|
|
.switch-checkbox:disabled:checked ~ .switch-label::before {
|
|
border-color: transparent;
|
|
background-color: rgba(52, 63, 77, 0.25)!important; /* Aareon Urban Grey 25% */
|
|
}
|
|
.switch-checkbox:disabled:checked ~ .switch-label::after {
|
|
background-color: rgba(255, 255, 255, 0.75)!important;
|
|
}
|
|
|
|
/* =====================
|
|
Switch Toggle End
|
|
===================== */
|
|
|
|
/* **************************************************** */
|
|
/* ***** ***** */
|
|
/* ***** LOGIN / PORTAL ***** */
|
|
/* ***** ***** */
|
|
/* **************************************************** */
|
|
#myportalteaser, div#sfooter {
|
|
text-align: center;
|
|
font-size: 1.5em;
|
|
padding-top: 70px;
|
|
padding-bottom: 40px;
|
|
color: var(--logincolor);
|
|
margin: 0 10%; /* wat ruimte aan de zijkanten */
|
|
}
|
|
#myportalteaser a , div#sfooter a {
|
|
color: rgb(245,157,4); /* net als dat inlog-symbool */
|
|
}
|
|
#loginhtml, #termshtml {
|
|
height: 100%;
|
|
}
|
|
#termshtml { /* waar is deze van? */
|
|
background-color: #F4F6F9; /* geen harde kleuren */
|
|
}
|
|
#loginhtml {
|
|
background-color: #1C5D87; /* de hoofdkleur van de backgroundimage */
|
|
}
|
|
|
|
.fontsizeFix{
|
|
font-size: 1.25em;
|
|
}
|
|
|
|
#loginbody {
|
|
font-size: 0.75em;
|
|
background: var(--loginbgimage) no-repeat center center fixed;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
height: 100%;
|
|
}
|
|
#loginbody .form-group {
|
|
margin-bottom: 1rem;
|
|
}
|
|
#loginbody form {
|
|
max-width: 330px;
|
|
width: 90%;
|
|
background-color: var(--loginbackgroundcolor);
|
|
padding: 40px;
|
|
border-radius: 4px;
|
|
margin: auto;
|
|
color: #ffffff !important; /* anders dan anders */
|
|
box-shadow: 3px 3px 4px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
#loginbody_sr form {
|
|
max-width: 330px;
|
|
width: 90%;
|
|
background-color: rgb(0,44,103);
|
|
padding: 40px;
|
|
border-radius: 4px;
|
|
margin: auto;
|
|
color: black;
|
|
box-shadow: 3px 3px 4px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
#loginbody form .form-control {
|
|
background: none !important; /* als die color dat is, dan deze ook, anders ios wit-op-wit */
|
|
border: none;
|
|
border-bottom: 1px solid rgba(0,0,0,0.7);
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
}
|
|
#loginbody form a.form-control {
|
|
border: 0;
|
|
}
|
|
#logindiv .illustration {
|
|
text-align: center;
|
|
padding: 15px 0 20px;
|
|
font-size: 100px;
|
|
color: rgb(245,157,4);
|
|
}
|
|
|
|
#logindiv #visname,
|
|
#logindiv #vispswd,
|
|
#logindiv #vismail,
|
|
#logindiv #vistoken,
|
|
#logindiv .visselfregister,
|
|
#logindiv #otpcode,
|
|
#logindiv #prsemail,
|
|
#logindiv #remember {
|
|
color: #ffffff !important;
|
|
line-height: 2rem;
|
|
font-size: 16px;
|
|
}
|
|
#logindiv #visname,
|
|
#logindiv #vispswd,
|
|
#logindiv #vismail,
|
|
#logindiv #vistoken,
|
|
#logindiv .visselfregister,
|
|
#logindiv #otpcode,
|
|
#logindiv #prsemail {
|
|
width: 100%;
|
|
}
|
|
.otp label {
|
|
color: #ffffff;
|
|
font-size: 1.25em;
|
|
}
|
|
#mobbutton {
|
|
cursor: pointer;
|
|
padding: 0px 12px;
|
|
color: var(--buttoncolor);
|
|
background-color:var(--buttonbackgroundcolor);
|
|
border: 1px solid transparent; /* dan blijft de grootte goed */
|
|
text-align: center;
|
|
border-radius: 2px;
|
|
transition: color 0.2s, background-color 0.2s, background 0.2s;
|
|
text-decoration: none;
|
|
will-change: background-color, color;
|
|
}
|
|
#mobbutton:hover {
|
|
color: var(--buttonhovercolor);
|
|
background-color:var(--buttonhoverbackgroundcolor);
|
|
}
|
|
#logindiv .remember {
|
|
text-align: center;
|
|
}
|
|
#logindiv #buttons.vertical {
|
|
min-width: 0; /* overrule de normale regel van 300 */
|
|
}
|
|
#logindiv #buttons.vertical ul li {
|
|
margin-bottom: 4px;
|
|
height: 42px;
|
|
align-items: center;
|
|
}
|
|
#loginfooter {
|
|
position: fixed;
|
|
bottom: 24px;
|
|
height: 24px;
|
|
width: 100%;
|
|
clear: both;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
color: var(--logincolor);
|
|
}
|
|
.mobkey {
|
|
float: right;
|
|
}
|
|
|
|
.userphoto[onclick] {
|
|
cursor: pointer;
|
|
}
|
|
.circle {
|
|
background-color: var(--frameheaderbackgroundcolor);
|
|
border-radius: 50%;
|
|
height: 2.5rem; /* 100% of parent */
|
|
text-align: center;
|
|
width: 2.5rem; /* 100% of parent */
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
}
|
|
.initials {
|
|
font-size: 1.25rem; /* 50% of parent */
|
|
line-height: 1;
|
|
position: relative;
|
|
padding-top: 0.625rem; /* 25% of parent */
|
|
color: var(--frameheadercolor);
|
|
display: inline-block;
|
|
}
|
|
|
|
|
|
/* wat doen deze (hier)? */
|
|
#addroomslebuttons #buttons, #addroominsbuttons #buttons, #addroomfaqbuttons #buttons {
|
|
text-align:left;
|
|
float:left;
|
|
}
|
|
|
|
/* headerstyles */
|
|
#headerblok {
|
|
width:100%;
|
|
float: right;
|
|
background: var(--headerimage) no-repeat;
|
|
background-position: left center;
|
|
background-color: var(--headerbackgroundcolor);
|
|
color: var(--headercolor);
|
|
}
|
|
div.new-headerSearch {
|
|
display: inline-block;
|
|
}
|
|
div#loggedinuser div.userlocation {
|
|
display: none;
|
|
}
|
|
div.new-layout {
|
|
position: absolute;
|
|
right: 0;
|
|
}
|
|
#headersearch {
|
|
position: relative;
|
|
}
|
|
|
|
div#useroptions,
|
|
div.modules {
|
|
position: absolute;
|
|
z-index: 12;
|
|
width: 220px;
|
|
line-height: 1.9em;
|
|
padding: 4px;
|
|
color: var(--menucolor);
|
|
background-color: var(--menubackgroundcolor);
|
|
border: 1px solid var(--buttonbackgroundcolor);
|
|
box-shadow: 2px 2px 4px #888888;
|
|
}
|
|
div#useroptions {
|
|
top: calc(50% + 0.95em + 5px); /* 50% plus de helft vd hoogte van .moduleselector */
|
|
right: 2.5em;
|
|
}
|
|
div.modules {
|
|
top: 100%;
|
|
right: -1.55em
|
|
}
|
|
div#useroptions > div,
|
|
div.modules > div.module {
|
|
cursor: pointer;
|
|
}
|
|
div#useroptions > div:hover, div.test,
|
|
div.modules > div.module:hover {
|
|
color: var(--menukophovercolor);
|
|
background-color: var(--menukophoverbackgroundcolor);
|
|
}
|
|
#headersuggest input.fld,
|
|
#headersearch input.fld
|
|
{
|
|
border: 1px solid var(--buttonbackgroundcolor);
|
|
width: 190px;
|
|
line-height: 1.9em;
|
|
padding-left: 6px;
|
|
height: calc(1.9em + 10px); /* 10px = padding-top & -bottom en border-top & -bottom van een input */
|
|
padding-right: 20px; /* Voor het icoontje */
|
|
}
|
|
.hsspacer {
|
|
height: 21px;
|
|
}
|
|
|
|
#headersuggest input {
|
|
border-radius: 3px;
|
|
}
|
|
#productsearch {
|
|
border-top-left-radius: 3px;
|
|
border-bottom-left-radius: 3px;
|
|
}
|
|
.moduleselector {
|
|
position: absolute;
|
|
line-height: 1.9em;
|
|
height: calc(1.9em + 10px); /* 10px = padding-top & -bottom en border-top & -bottom van een input */
|
|
width: 2em;
|
|
margin-left: -5px;
|
|
border: 1px solid var(--buttonbackgroundcolor);
|
|
border-top-right-radius: 3px;
|
|
border-bottom-right-radius: 3px;
|
|
background-color: var(--inputbackgroundcolor);
|
|
}
|
|
.moduleselector:hover {
|
|
cursor: pointer;
|
|
}
|
|
.moduleselector:active {
|
|
box-shadow: inset 0 0 3px var(--buttonbackgroundcolor);
|
|
}
|
|
.moduleselector i {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
#headerprefix, #userimperson {
|
|
font-weight: bold;
|
|
text-align: center;
|
|
color: #FFF;
|
|
position: absolute;
|
|
font-size: 2.0em;
|
|
margin-left: 40%;
|
|
margin-top: 10px;
|
|
padding: 20px;
|
|
box-shadow: 0px 0px 10px #515151;
|
|
max-width: 40%;
|
|
border-radius: 4px;
|
|
background: linear-gradient(to right, #CC5252, #F59D04)
|
|
}
|
|
#headerfunctions {
|
|
position: relative;
|
|
display: inline-flex;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
float: right;
|
|
height: 100%;
|
|
color: var(--headercolor);
|
|
}
|
|
#headerfunctions > div {
|
|
display: inline-block;
|
|
margin: 0 1em;
|
|
}
|
|
|
|
#headerhelp {
|
|
cursor: pointer;
|
|
}
|
|
#headerhelp:hover > i {
|
|
font-weight: 400;
|
|
}
|
|
.userphoto:hover > .initials {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.headerToggle {
|
|
display: inline-block;
|
|
position: relative;
|
|
font-size: 18px;
|
|
text-shadow: 0px 0px 1px #fff; /* should the backgroundcolor be the same */
|
|
}
|
|
|
|
#loggedinuser {
|
|
display: inline;
|
|
text-align: right;
|
|
}
|
|
#loggedinuser div {
|
|
display: inline;
|
|
}
|
|
div.userphoto img.profile {
|
|
max-height: 39px;
|
|
margin-right: 5px;
|
|
cursor: pointer;
|
|
}
|
|
#langtoggle {
|
|
display: inline-block; /* display:none to hide */
|
|
padding: 1px 5px 0 4px;
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
#logindiv #langtoggle {
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
#langtoggle img {
|
|
cursor: pointer;
|
|
height: 20px;
|
|
border: 1px solid #fff;
|
|
margin-right: 1px;
|
|
}
|
|
#toggleInterface {
|
|
display: inline-block; /* display:none to hide */
|
|
padding: 1px 5px 0 4px;
|
|
vertical-align: middle;
|
|
}
|
|
#logindiv #toggleInterface { float: right; }
|
|
#toggleInterface img {
|
|
cursor: pointer;
|
|
height: 12px;
|
|
border: 1px solid #fff;
|
|
margin-right: 1px;
|
|
}
|
|
div.username span {
|
|
padding-left: 3px;
|
|
padding-right: 1px;
|
|
}
|
|
|
|
div#loggers {
|
|
position:absolute;
|
|
top:5px;
|
|
left:5px;
|
|
z-index:99
|
|
}
|
|
button#loggingoff {
|
|
display:none;
|
|
}
|
|
button#loggingoff,button#loggingshow {
|
|
font-size:10px;
|
|
background-color:#fdd; /* geen harde kleuren */
|
|
}
|
|
button#loggingoff {
|
|
background-color:#f88; /* geen harde kleuren */
|
|
}
|
|
button#loggingon {
|
|
font-size:10px;
|
|
}
|
|
#badschema {
|
|
background-color: red;
|
|
font-size: 2.0em;
|
|
z-index: 9999;
|
|
left: 200px;
|
|
position: absolute;
|
|
}
|
|
#badobjects {
|
|
background-color: red;
|
|
color: white;
|
|
font-size: 10px;
|
|
z-index: 9999;
|
|
left: 100px;
|
|
top: 0px;
|
|
position: absolute;
|
|
}
|
|
|
|
/* **************************************************** */
|
|
/* **************************************************** */
|
|
/* ****** VOOR ALLE PAGINA'S ******** */
|
|
/* **************************************************** */
|
|
/* **************************************************** */
|
|
|
|
#mainbody {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
#rejectbody,
|
|
body.editmode {
|
|
border-left: 0px solid var(--frameheaderbackgroundcolor);
|
|
border-right: 0px solid var(--frameheaderbackgroundcolor);
|
|
border-radius: 4px;
|
|
}
|
|
.simpelpage {
|
|
padding: 3em;
|
|
font-size: 0.8em;
|
|
line-height: 1.6em;
|
|
font-weight: normal;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* **************************************************** */
|
|
/* **************************************************** */
|
|
/* ****** VOOR ?? ******** */
|
|
/* **************************************************** */
|
|
/* **************************************************** */
|
|
|
|
.bes-menu-button,
|
|
.mld-menu-button {
|
|
border-radius: calc(.25rem - 1px);
|
|
background-color: var(--buttonbackgroundcolor);
|
|
color: var(--buttoncolor);
|
|
border-bottom: 1px solid #FFFFFE; /* backgroundcolor */
|
|
cursor: pointer;
|
|
transition: background-color 150ms,
|
|
color 150ms;
|
|
}
|
|
|
|
.beta .bes-menu-button,
|
|
.beta .mld-menu-button {
|
|
display: flex;
|
|
flex-grow: 1;
|
|
align-items: center;
|
|
}
|
|
|
|
.bes-menu-button:hover,
|
|
.mld-menu-button:hover {
|
|
background-color: var(--buttonhoverbackgroundcolor);
|
|
color: var(--buttonhovercolor);
|
|
}
|
|
|
|
.bes-menu-button:active,
|
|
.mld-menu-button:active {
|
|
transform: translateY(1px);
|
|
}
|
|
.beta .bes-menu-button:last-child:active,
|
|
.beta .mld-menu-button:last-child:active {
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.bes-menu-button h3,
|
|
.mld-menu-button h3 {
|
|
margin: auto;
|
|
min-height: calc(1.5em + 20px);
|
|
padding: 10px;
|
|
}
|
|
.beta .bes-menu-button h3,
|
|
.beta .mld-menu-button h3 {
|
|
margin: 0;
|
|
}
|
|
|
|
span.editnews {
|
|
opacity: 0.5;
|
|
transition: all 0.2s;
|
|
font-size: 0.5em;
|
|
}
|
|
|
|
span.editnews:hover {
|
|
opacity: 1;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
span.hide-more.visible {
|
|
opacity: 1;
|
|
transition: all 1s;
|
|
transition-delay: 250ms;
|
|
}
|
|
span.hide-more.invisible {
|
|
opacity: 0;
|
|
transition: all 1s;
|
|
transition-delay: 250ms;
|
|
}
|
|
div.clear-both {
|
|
clear: both;
|
|
}
|
|
div.blockgraph {
|
|
width: 16vw;
|
|
height: 16vw;
|
|
min-width: 16em;
|
|
min-height: 16em;
|
|
border: 1px solid black;
|
|
display: inline-block;
|
|
margin: 10px 10px 0 0;
|
|
cursor:pointer;
|
|
}
|
|
div.blockgraph span {
|
|
text-align: center;
|
|
display: block;
|
|
color: white; /* geen harde kleuren */
|
|
}
|
|
span.blockgraph-title {
|
|
padding-top: 5%;
|
|
font-size: 1em;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
span.blockgraph-value {
|
|
padding-top: 30%;
|
|
font-size: 3em;
|
|
}
|
|
|
|
/* begin flexbox specific */
|
|
div.res-menu-flex {
|
|
align-items: flex-start;
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
background-image: var(--portalmenubgimage); /*testje*/
|
|
}
|
|
|
|
div.searchBar {
|
|
width: 100%;
|
|
height: 32px;
|
|
border-bottom-left-radius: 10px;
|
|
border-bottom-right-radius: 10px;
|
|
padding: 0px 10px 0px 10px;
|
|
background-color: var(--buttonbackgroundcolor); /*TODO*/
|
|
color: var(--frameheadercolor); /*TODO*/
|
|
}
|
|
|
|
div.seperator {
|
|
width: 100%;
|
|
font-size: 2.5em;
|
|
padding: 10px 0px;
|
|
color: var(--textcolor);
|
|
font-family: var(--fontfamily_titles);
|
|
text-align: center;
|
|
border-bottom: 1px solid rgba(52, 63, 77, 0.2);
|
|
background: linear-gradient(to right, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 1) 35%, rgba(255, 255, 255, 1) 65%, rgba(255, 255, 255, 0) 70%);
|
|
}
|
|
|
|
.bes-menu-col,
|
|
.mld-menu-col {
|
|
height: calc(100vh - 32px);
|
|
overflow-y: scroll;
|
|
}
|
|
.beta.bes-menu-col,
|
|
.beta.mld-menu-col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
div.besicmenu,
|
|
div.mldicmenu {
|
|
height: 250px;
|
|
padding: 0px
|
|
}
|
|
|
|
div.besicmenu,
|
|
div.mldicmenu,
|
|
div.iconmenu {
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
|
|
div.iconmenu,
|
|
.res-flex-recent {
|
|
min-width: 200px;
|
|
min-height: 120px;
|
|
max-width: 600px;
|
|
max-height: 440px;
|
|
}
|
|
.iconitem,
|
|
.res-flex-recent-card {
|
|
height: calc(100% - 6px);
|
|
width: calc(100% - 6px);
|
|
margin: 3px;
|
|
background-color: rgba(255, 255, 255, 0.8); /* transparant over de eventuele achtergrondfoto */
|
|
}
|
|
.iconitem,
|
|
.res-flex-recent-card,
|
|
.res-flex-recent-item {
|
|
cursor: pointer;
|
|
transition: 150ms opacity;
|
|
}
|
|
div.besicmenu div.iconitem,
|
|
div.mldicmenu div.iconitem {
|
|
border: 1px solid rgba(52, 63, 77, 0.2);
|
|
}
|
|
|
|
.mld-menu-col .row:hover .iconitem:not(:hover),
|
|
.bes-menu-col .row:hover .iconitem:not(:hover),
|
|
.res-menu-flex:hover > :not(.no-action) > :is(.iconitem:not(:hover), .res-flex-recent-card:not(:hover)),
|
|
.res-flex-recent-card:hover > .res-flex-recent-item:not(:hover) {
|
|
opacity: .65;
|
|
}
|
|
|
|
div.iconimg,
|
|
div.bes-icon-wrapper,
|
|
div.mld-icon-wrapper,
|
|
.res-flex-recent-label {
|
|
width: 100%;
|
|
height: 60%;
|
|
text-align: center;
|
|
color: var(--menuiconcolor);
|
|
}
|
|
.res-flex-recent-label {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
line-height: 1.4em;
|
|
height: 40%;
|
|
}
|
|
div.iconimg > img,
|
|
.mld-icon-wrapper > img,
|
|
.bes-icon-wrapper > img {
|
|
height: auto;
|
|
width: auto;
|
|
max-height: 100%;
|
|
max-width: 100%;
|
|
}
|
|
.mld-icon-wrapper img,
|
|
.bes-icon-wrapper img,
|
|
.mld-icon-wrapper i,
|
|
.bes-icon-wrapper i,
|
|
.iconimg > * {
|
|
position: relative;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.res-iconlabel,
|
|
.res-flex-recent-item {
|
|
text-overflow: ellipsis;
|
|
font-size: 0.85em;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.res-iconlabel,
|
|
.bes-iconlabel,
|
|
.mld-iconlabel,
|
|
.res-flex-recent-item {
|
|
width: 100%;
|
|
height: 40%;
|
|
padding: 0.5em;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
line-height: 1.4em;
|
|
cursor: pointer;
|
|
}
|
|
.res-flex-recent-item {
|
|
text-align: left; /* toch niet center */
|
|
position: relative;
|
|
height: 20%;
|
|
border-top: 1px dashed rgba(0, 0, 0, 0.5);
|
|
}
|
|
.res-iconlabel i,
|
|
.res-flex-recent-item i {
|
|
margin-right: 6px;
|
|
}
|
|
|
|
span.highlight-text {
|
|
background-color: yellow;
|
|
color: black;
|
|
}
|
|
.no-action *,
|
|
.no-action div.vrijedag,
|
|
.no-action div.vrijweekend {
|
|
cursor: not-allowed;
|
|
}
|
|
/* end flexbox specific */
|
|
|
|
.fclt-icon-close
|
|
{
|
|
position: absolute;
|
|
right: .3em;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--inactivetabcolor);
|
|
}
|
|
|
|
/* **************************************************** */
|
|
/* **************************************************** */
|
|
/* ****** TABS, Navigatie ed ******** */
|
|
/* **************************************************** */
|
|
/* **************************************************** */
|
|
/* tabs: sluitkruisje en pin */
|
|
.tabclose,
|
|
.tabpinned {
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
padding-left: 0.3em;
|
|
}
|
|
.tabclose {
|
|
font-size: 1.1em;
|
|
margin-right: -0.2em;
|
|
}
|
|
.tabpinned {
|
|
font-size: 0.9em;
|
|
}
|
|
.hot {
|
|
color: #ff5151 !important; /* harde kleur rood */
|
|
opacity: 1 !important;
|
|
}
|
|
.card .hot {
|
|
line-height: 1.5em;
|
|
}
|
|
|
|
.tabpinned:hover,
|
|
.tabclose:hover,
|
|
.tabcloseall:hover,
|
|
.pincurrenttab:hover {
|
|
transition: color 0.2s;
|
|
opacity: 1;
|
|
}
|
|
|
|
.tabcloseall, .pincurrenttab {
|
|
/* color: var(--buttonbackgroundcolor); /* dat is niet gegarandeerd goed */
|
|
color: var(--textcolor); /* Deze dan? */
|
|
background-color: #fffffe; /*backgroundcolor*/
|
|
cursor: pointer;
|
|
font-size: 1.5em;
|
|
float: right;
|
|
line-height: 31px;
|
|
padding: 0px 4px 3px 1px;
|
|
}
|
|
.pincurrenttab {
|
|
padding: 1px 1px 2px 4px;
|
|
}
|
|
|
|
.moretab {
|
|
font-family: var(--fontfamily_titles);
|
|
font-weight: 600;
|
|
font-size: 1.05em;
|
|
line-height: 2em;
|
|
color: var(--inactivetabcolor);
|
|
background-color: var(--inactivetabbackgroundcolor);
|
|
border: 1px solid #d3d3d3;
|
|
border-bottom-width: 0;
|
|
border-top-right-radius: 2px;
|
|
border-top-left-radius: 2px;
|
|
float: left;
|
|
cursor: pointer;
|
|
padding: 2px 0.6em 0.5px 0.8em;
|
|
margin: 4px 0.2em -1px 2.5px;
|
|
}
|
|
|
|
.moretab > span {
|
|
margin-right: 0.2em;
|
|
}
|
|
|
|
.moretab:not(.moretab-active):hover {
|
|
background-color: var(--buttonhoverbackgroundcolor);
|
|
color: var(--buttonhovercolor);
|
|
}
|
|
|
|
.moretab-active {
|
|
border: 1px solid #aaa;
|
|
background-color: var(--activetabbackgroundcolor); /* sluit aan op pageheader */
|
|
color: var(--activetabcolor);
|
|
}
|
|
|
|
div.morelist {
|
|
position: absolute;
|
|
overflow-y: auto;
|
|
font-family: var(--fontfamily_titles);
|
|
font-weight: 600;
|
|
font-size: 1.05em;
|
|
line-height: 2.2em;
|
|
color: var(--menucolor);
|
|
background-color: var(--menubackgroundcolor);
|
|
border: 1px solid var(--buttonbackgroundcolor);
|
|
box-shadow: 2px 2px 4px #888888;
|
|
margin: 35px 0 0 0.2em;
|
|
min-width: 220px;
|
|
max-height: calc(100% - 35px);
|
|
padding: 4px;
|
|
z-index: 12;
|
|
pointer-events: none;
|
|
transition: opacity 100ms ease-in-out,
|
|
transform 100ms ease-in-out;
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
|
|
.moretab-active + .morelist {
|
|
pointer-events: auto;
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
div.morelistitem {
|
|
cursor: pointer;
|
|
}
|
|
|
|
div.morelist > div.morelistitem:hover {
|
|
color: var(--menukophovercolor);
|
|
background-color: var(--menukophoverbackgroundcolor);
|
|
}
|
|
|
|
div.pindialog {
|
|
margin-top: 10px;
|
|
}
|
|
ul#pinoptions {
|
|
margin-top: 24px;
|
|
list-style: none;
|
|
padding-left: 12px;
|
|
}
|
|
ul.hmi {
|
|
list-style:none;
|
|
padding-left: 10px;
|
|
}
|
|
li.hmi {
|
|
border-bottom: none;
|
|
border-top: 1px solid #eee;
|
|
cursor: pointer;
|
|
line-height: 2em;
|
|
padding: 1px 4px 4px 8px;
|
|
}
|
|
li.hmi:hover {
|
|
background-color: var(--menukophoverbackgroundcolor)!important;
|
|
}
|
|
|
|
.tabcloseall:hover,
|
|
.pincurrenttab:hover {
|
|
color: var(--buttonhoverbackgroundcolor); /* dat is niet gegarandeerd goed */
|
|
}
|
|
div#maintabs ul.ui-tabs-nav {
|
|
margin-right: 59px; /* rechterruimte voor tabcloseall cs.*/
|
|
border: 0;
|
|
border-right: 1px solid var(--dividercolor);
|
|
}
|
|
div#menutabs ul.ui-tabs-nav::after,
|
|
div#maintabs ul.ui-tabs-nav::after {
|
|
content: "";
|
|
height: 0;
|
|
border-bottom: 1px solid var(--dividercolor);
|
|
}
|
|
|
|
div#menutabs ul.ui-tabs-nav::after {
|
|
width: calc(100% + .4em); /* 100% + padding-horizontaal */
|
|
}
|
|
div#maintabs ul.ui-tabs-nav::after {
|
|
width: calc(100% + 62px + .4em); /* 100% + margin-right + padding-horizontaal */
|
|
}
|
|
|
|
/* **************************************************** */
|
|
/* **************************************************** */
|
|
/* ****** INPUTS E.D. (zonder sizing) ******** */
|
|
/* **************************************************** */
|
|
/* **************************************************** */
|
|
|
|
select::-ms-expand {
|
|
display: none;
|
|
}
|
|
|
|
input[type=file] {
|
|
border: 0;
|
|
background-color: #FFFDF1; /* geen harde kleuren */
|
|
}
|
|
|
|
input[type=password] {
|
|
border:1px solid #ccc;
|
|
background-color: #FFFDF1; /* geen harde kleuren */
|
|
}
|
|
|
|
input[type=checkbox], input[type=radio]{
|
|
background-color:transparent;
|
|
margin: 0 4px 0 2px;
|
|
}
|
|
|
|
input[type=submit] {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
input[readonly], select[readonly], textarea[readonly] {
|
|
color: var(--textcolor);
|
|
background-color: transparent;
|
|
border: 0;
|
|
}
|
|
|
|
/* label tag = de tekst */
|
|
label {
|
|
color: var(--textcolor);
|
|
margin: 0;
|
|
/*white-space: nowrap;*/
|
|
}
|
|
label.active {
|
|
color: #00c; /* geen harde kleuren */
|
|
}
|
|
label.selector {
|
|
float: left; /* links in de td */
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.2em;
|
|
font-weight: bold;
|
|
text-align:left;
|
|
}
|
|
|
|
/* voor login "onthoud mij" label */
|
|
.rememberme {
|
|
color: #ffffff !important;
|
|
}
|
|
.rememberme:hover {
|
|
color: #00c !important;;
|
|
}
|
|
|
|
/* ******* QUALIFIERS, algemene verbijzonderingen ***** */
|
|
.labelextra {
|
|
color: #afc3d0; /* geen harde kleuren?! */
|
|
float: right; /* rechts in de td */
|
|
cursor: pointer;
|
|
}
|
|
.labelextra:hover {
|
|
color: #51768F; /* geen harde kleuren?! */
|
|
opacity: 1;
|
|
}
|
|
label.compactselector {
|
|
padding: 0 0 2px 4px;
|
|
line-height: 2em;
|
|
}
|
|
label.lt {
|
|
font-weight: normal;
|
|
}
|
|
|
|
div.multitoggle,
|
|
div.advmultitoggle {
|
|
position: relative;
|
|
white-space: nowrap;
|
|
/* font-size: 12px; */
|
|
}
|
|
|
|
select.advMultiSuggest {
|
|
max-width: 100%;
|
|
}
|
|
|
|
span.multi_select_toggle,
|
|
span.multi_suggest_toggle {
|
|
font-size: 1.3em;
|
|
position: absolute;
|
|
display: block;
|
|
right: 20px;
|
|
line-height: normal;
|
|
margin-top: 3px;
|
|
color: var(--textcolor);
|
|
cursor: pointer;
|
|
}
|
|
|
|
span.multi_select_toggle > *,
|
|
span.multi_suggest_toggle > * {
|
|
position: relative;
|
|
padding-top: .125em;
|
|
}
|
|
|
|
span.multi_select_toggle::before,
|
|
span.multi_suggest_toggle::before {
|
|
content: "";
|
|
position: absolute;
|
|
display: block;
|
|
font-size: 1.3em;
|
|
width: .75em;
|
|
height: .75em;
|
|
top: .125em;
|
|
right: .125em;
|
|
background-color: var(--inputbackgroundcolor);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
span.multi_select_toggle:hover .fa-fw,
|
|
span.multi_suggest_toggle:hover .fa-fw {
|
|
color: var(--buttonhoverbackgroundcolor);
|
|
font-weight: 900;
|
|
}
|
|
span.multi_select_toggle.disabled,
|
|
span.multi_suggest_toggle.disabled,
|
|
div.note-icon.disabled {
|
|
color: #aaa; /* deze mag */
|
|
pointer-events: none;
|
|
}
|
|
|
|
a[href^="mailto:"], a[href^="tel:"], a[href^="callto:"] {
|
|
text-decoration: none;
|
|
color: var(--textcolor);
|
|
}
|
|
a[href^="mailto:"].fldmailto {
|
|
background-color: #fffffe; /*backgroundcolor*/
|
|
}
|
|
|
|
td.label:not(.flexsearch) + td div,
|
|
td.label:not(.flexsearch) + td span {
|
|
word-break: break-word;
|
|
line-break: initial;
|
|
-ms-line-break: anywhere;
|
|
}
|
|
|
|
/* ******* RESTANTEN ********************************** */
|
|
|
|
/* VOOR REGELS IN EEN OVERZICHT */
|
|
div.allactions {
|
|
position: absolute;
|
|
border: 0;
|
|
padding: 5px 3px 9px 3px;
|
|
height: 1em;
|
|
border-radius: 4px;
|
|
z-index: 10;
|
|
}
|
|
|
|
div.ias {
|
|
visibility:hidden;
|
|
padding: 0;
|
|
white-space: nowrap;
|
|
cursor: default;
|
|
height: 1em;
|
|
padding: 5px;
|
|
}
|
|
.rstable tbody tr:hover td div.ias
|
|
{
|
|
visibility:visible;
|
|
}
|
|
.rstable tbody tr:nth-child(even) td.dupe
|
|
{
|
|
color: #FFFFFF;
|
|
}
|
|
.rstable tbody tr:nth-child(odd) td.dupe
|
|
{
|
|
color: #FAFAFA;
|
|
}
|
|
.rstable tbody tr:hover td.dupe,
|
|
.rstable tbody tr.selected td.dupe
|
|
{
|
|
color: var(--textcolor);
|
|
}
|
|
|
|
th.multiselect:hover input[type='checkbox']/*, td:hover input[type='checkbox'].multiselect alext*/ {
|
|
outline: 1px solid red;
|
|
}
|
|
th.multiselect, td.multiselect {
|
|
width:3em;
|
|
text-align: center;
|
|
}
|
|
td.multiselect:hover {
|
|
cursor: pointer;
|
|
}
|
|
.rstable tbody tr.selected td {
|
|
background-color: #DCE4FF !important;
|
|
}
|
|
#rstable td.emptyset {
|
|
padding-left: 10px;
|
|
}
|
|
.ia { /* inline action span */
|
|
cursor: pointer;
|
|
color: blue;
|
|
}
|
|
|
|
span.ia2 { /* inline action v2 */
|
|
cursor: pointer;
|
|
color: var(--inlineactioncolor);
|
|
border: 1px solid var(--inlineactioncolor);
|
|
margin: 1px;
|
|
padding: 2px 4px 2px 4px;
|
|
background-color: var(--inlineactionbackgroundcolor);
|
|
border-radius: 2px;
|
|
box-shadow: 1px 2px 2px #333;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
span.ia2:hover {
|
|
background-color: var(--inlineactioncolor);
|
|
color: var(--inlineactionbackgroundcolor);
|
|
}
|
|
|
|
.afwijkopstel {
|
|
font-weight: bold;
|
|
}
|
|
.dirty td {
|
|
opacity: 0.5;
|
|
}
|
|
.highlite td {
|
|
color: var(--buttoncolor);
|
|
background-color:var(--buttonbackgroundcolor);
|
|
}
|
|
|
|
td.listid
|
|
{
|
|
color: #ccc
|
|
}
|
|
|
|
.msb { /* mld subject in list */
|
|
color: var(--listsubjectcolor);
|
|
}
|
|
.ac, .ac2, .ac128 {
|
|
color: #9C0006;
|
|
}
|
|
.opdrsubstatus,
|
|
.mldshowactie {
|
|
font-weight: bold;
|
|
background-color: #9C0006;
|
|
color: white;
|
|
padding: 3px 5px;
|
|
border-radius: 5px;
|
|
}
|
|
/* blockstyles */
|
|
|
|
.fcltframe {
|
|
text-align: right;
|
|
padding: 2px;
|
|
}
|
|
div.fcltframe {
|
|
font-size: 12pt;
|
|
font-weight:bold;
|
|
text-align:left;
|
|
}
|
|
|
|
#resselector,
|
|
.besartbtns,
|
|
.sidebar-toggler,
|
|
.recentlychanged,
|
|
.fcltframeheader,
|
|
.fcltfiller,
|
|
.fcltframefooter
|
|
{
|
|
height: 32px;
|
|
}
|
|
|
|
.fcltfiller, .fcltframeheader, .fcltframefooter {
|
|
width: 100%;
|
|
left: 0; /* zzZ IE11 */
|
|
font-size: 1.1em; /* fontafhankelijk*/
|
|
}
|
|
|
|
#resselector,
|
|
.fcltframeheader,
|
|
.fcltframefooter {
|
|
padding: 1px 5px 1px 1px;
|
|
background-color: var(--frameheaderbackgroundcolor);
|
|
}
|
|
|
|
#resselector:empty {
|
|
height: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.hambdropdown {
|
|
background-color: var(--frameheaderbackgroundcolor);
|
|
position: absolute;
|
|
z-index: 11;
|
|
top: 100%;
|
|
right: 0px;
|
|
}
|
|
|
|
.fcltframeheader .iframer-title {
|
|
font-family: var(--fontfamily_titles);
|
|
font-size: 1.2em;
|
|
}
|
|
.fcltframeheader .iframer-title,
|
|
.fcltframeheader #iframerextratitle,
|
|
.fcltframeheader #autofilter,
|
|
span.hints {
|
|
position: relative;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
float: left;
|
|
margin-left: 0.5em;
|
|
}
|
|
.ui-dialog-titlebar .hints {
|
|
position: absolute;
|
|
right: 1.8em;
|
|
}
|
|
span.hints {
|
|
float: right;
|
|
margin-right: 0.5em;
|
|
}
|
|
span.hints .tinyhint {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
padding-top: 0.5em;
|
|
aspect-ratio: 1;
|
|
border-radius: 50%;
|
|
background-color: white;
|
|
color: #CC5252; /* Aareon Grapefruit */
|
|
font-weight: 900;
|
|
border: 1px solid currentColor;
|
|
opacity: 0;
|
|
transition: opacity .05s;
|
|
}
|
|
span.hints.active .tinyhint {
|
|
opacity: 1;
|
|
}
|
|
|
|
#iframerextratitle {
|
|
/* font-size: 0.9em; */
|
|
font-weight: normal;
|
|
font-style: italic;
|
|
color: var(--frameheadercolor);
|
|
}
|
|
|
|
/* Is dit beter? */ /* PF: nee, pakt verkeerd uit voor .rflrscreen */
|
|
x.iframer-title + #iframerextratitle:not(:empty)::before { color: var(--frameheadercolor); content: "("; }
|
|
x.iframer-title + #iframerextratitle:not(:empty)::after { color: var(--frameheadercolor); content: ")"; }
|
|
|
|
[id^=autofilter-], #autofilter {
|
|
font-family: var(--fontfamily_alt);
|
|
padding: 3px 8px;
|
|
margin-left: 1em;
|
|
border: 0;
|
|
border-radius: 16px;
|
|
font-size: 1rem;
|
|
background-color: var(--inputbackgroundcolor);
|
|
opacity: 0.8;
|
|
}
|
|
div.collapsed #autofilter {
|
|
display: none
|
|
}
|
|
|
|
.fcltframeheader { /* is een h2; moet dat eigenlijk h3 worden? KR -> Ja (Main header-h1-, info-tab-h2-, frameheader-h3-*/
|
|
color: var(--frameheadercolor);
|
|
text-align: left;
|
|
border-radius: 4px 4px 0 0;
|
|
}
|
|
.collapsible {
|
|
cursor: pointer;
|
|
}
|
|
|
|
h2 {
|
|
margin: 0; /* altijd? */
|
|
}
|
|
|
|
.buttoncontainer {
|
|
position: relative;
|
|
}
|
|
|
|
.fcltframeheader.collapsed span, .fcltframeheader.collapsed i {
|
|
opacity: .75;
|
|
transition: opacity 1s ease-in-out;
|
|
}
|
|
|
|
div.fcltframefooter {
|
|
cursor: default;
|
|
border-bottom-left-radius: 2px;
|
|
border-bottom-right-radius: 2px;
|
|
}
|
|
.fcltframefooter #buttons {
|
|
float: inherit;
|
|
text-align: center;
|
|
}
|
|
div.widgetx {
|
|
overflow: hidden;
|
|
}
|
|
div.widgetcontainer {
|
|
float: left;
|
|
}
|
|
div.widget {
|
|
border: 0px solid #f1f1f1;
|
|
margin: 2px;
|
|
border-radius: 4px;
|
|
}
|
|
.widgettitle {
|
|
border-bottom: 0px solid #f1f1f1;
|
|
background-color: white;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.recentlychangedcredentials {
|
|
background-color: orange;
|
|
color: black;
|
|
padding: 1px 1px 1px 2px;
|
|
}
|
|
.recentlychanged {
|
|
background-color: orange;
|
|
color: white;
|
|
padding: 1px 0px 1px 0px;
|
|
font-weight: bold;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.recentlychanged .fa-plus-square-o {
|
|
color:red;
|
|
}
|
|
.recentlychanged #buttons {
|
|
position: absolute;
|
|
right: 1px; /* Todo; buttons */
|
|
}
|
|
|
|
tr.recentlychangedopdr td,
|
|
tr.recentlychangedmld td {
|
|
background-color: #FDFF9F;
|
|
color: var(--textcolor);
|
|
opacity: 1.0;
|
|
}
|
|
|
|
.submenu {
|
|
position: absolute;
|
|
top: 1px;
|
|
}
|
|
/* Modal windows (kalender, popups) */
|
|
.ui-dialog {
|
|
box-shadow: 2px 2px 5px rgba(0,0,0, 0.5);
|
|
padding: 0px;
|
|
border: 0px;
|
|
border-image-width: 0;
|
|
}
|
|
|
|
input#menufilter {
|
|
width: 220px;
|
|
border-radius: 8px;
|
|
opacity: 0.8;
|
|
margin: 5px;
|
|
padding: 2px 6px 3px 6px;
|
|
border: 1px solid #aaa;
|
|
}
|
|
div.filtermenukop {
|
|
display: none;
|
|
background-color: var(--tableheaderbackgroundcolor);
|
|
color: var(--tableheadercolor);
|
|
border: 1px solid var(--tableheaderbackgroundcolor);
|
|
text-align:center;
|
|
}
|
|
|
|
/* oude jQuery ui kleurenfestijn tbv tab menu */
|
|
.tabclose,
|
|
.tabpinned {
|
|
opacity: 0.4; /* vager dan de titel zelf */
|
|
}
|
|
/* bedoeld voor de tabs */
|
|
.ui-tab.ui-state-default {
|
|
background: var(--inactivetabbackgroundcolor);
|
|
}
|
|
.ui-tab.ui-state-default a {
|
|
color: var(--inactivetabcolor);
|
|
}
|
|
.ui-tab.ui-state-default .tabclose,
|
|
.ui-tab.ui-state-default .tabpinned {
|
|
color: var(--inactivetabcolor);
|
|
}
|
|
.ui-tab.ui-state-hover,
|
|
.ui-tab.ui-state-focus {
|
|
background-color: var(--buttonhoverbackgroundcolor);
|
|
}
|
|
.ui-tab.ui-state-hover a {
|
|
color: var(--buttonhovercolor);
|
|
}
|
|
.ui-tab.ui-state-active {
|
|
border: 1px solid #aaa;
|
|
background-color: var(--activetabbackgroundcolor); /* sluit aan op pageheader */
|
|
font-weight: normal;
|
|
}
|
|
.ui-tab.ui-state-active a {
|
|
color: var(--activetabcolor);
|
|
}
|
|
.ui-tab.ui-state-active .tabclose,
|
|
.ui-tab.ui-state-active .tabpinned {
|
|
color: var(--activetabcolor);
|
|
}
|
|
|
|
.ui-widget-header {
|
|
border: 1px solid #aaa;
|
|
font-weight: bold;
|
|
}
|
|
.ui-widget-header.ui-datepicker-header,
|
|
.ui-widget-header.ui-dialog-titlebar {
|
|
background: none;
|
|
border: none;
|
|
border-bottom-right-radius: 0; /* overrule voor .ui-corner-all */
|
|
border-bottom-left-radius: 0; /* overrule voor .ui-corner-all */
|
|
}
|
|
.ui-widget-header.ui-datepicker-header {
|
|
color: var(--buttoncolor)!important;
|
|
background-color: var(--buttonbackgroundcolor) !important;
|
|
}
|
|
.ui-widget-header.ui-dialog-titlebar {
|
|
font-family: var(--fontfamily_titles);
|
|
background-color: var(--buttonhoverbackgroundcolor) !important;
|
|
color: var(--buttonhovercolor) !important; /* denk ook aan fclt-icon-close */
|
|
}
|
|
|
|
.ui-widget-header.ui-dialog-titlebar.has-fclt-icon-close {
|
|
padding-right: 0.4em;
|
|
}
|
|
.ui-corner-all,.ui-corner-top,.ui-corner-right,.ui-corner-tr{
|
|
border-top-right-radius:2px;
|
|
border-top-left-radius:2px;
|
|
}
|
|
.ui-tabs-hamburger {
|
|
border-radius: 0px;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
border: 0px !important;
|
|
}
|
|
/* Anders lelijk in multi-dialoog */
|
|
.ui-datepicker-multi .ui-datepicker-group table td {
|
|
padding: 1px;
|
|
}
|
|
.ui-datepicker-multi div.ui-datepicker-header {
|
|
height: 33px;
|
|
}
|
|
.ui-datepicker-calendar th {
|
|
background-color: white;
|
|
color: var(--textcolor);
|
|
font-weight: normal;
|
|
}
|
|
|
|
/* Een kader om velden in een view-editscherm */
|
|
.fcltblock {
|
|
margin:3px 0px 3px 0px;
|
|
padding:0px;
|
|
text-align:left;
|
|
border-radius: 4px;
|
|
min-width: 500px; /* dev */
|
|
}
|
|
body.modal .fcltblock {
|
|
background-color: #fffffe; /*backgroundcolor*/
|
|
border:1px solid #eee;
|
|
}
|
|
|
|
table.fcltblocktab {
|
|
width: 100%;
|
|
}
|
|
.advanced-header {
|
|
padding: 0 0 0.25em 2px;
|
|
}
|
|
.advanced-header-text {
|
|
font-family: var(--fontfamily_titles);
|
|
font-size: 16px;
|
|
font-weight: 900;
|
|
color: var(--textcolor);
|
|
}
|
|
|
|
/* #insLSF is specific for ins_search table after label "Taak". nth-child(2) = label text */
|
|
div#insLSF table > tbody tr td:nth-child(2) {
|
|
width: 30%;
|
|
min-width: 150px;
|
|
max-width: 325px;
|
|
}
|
|
div#total_list table > tbody tr td {
|
|
width: inherit;
|
|
}
|
|
/* (flex)-table in table uitlijning */
|
|
body:not(#listbody, #planbody) div#total_list td, /* Factuurregels table in table uitlijning */
|
|
body:not(#listbody, #planbody) div#besItemsList td, /* (Show) Bestelling tabel in tabel uitlijning */
|
|
body:not(#listbody, #planbody) div#bezBezoekersList td /* (Edit) Bezoekers tabel in tabel uitlijning */
|
|
{
|
|
width: auto;
|
|
}
|
|
/* Factuurregels btw tarief */
|
|
#sel_items select {
|
|
width: auto;
|
|
}
|
|
#finItemsList input[id^=sum],
|
|
#total_list #totalEXC_txt,
|
|
#total_list #totalBTW_txt {
|
|
text-align: right;
|
|
}
|
|
|
|
td.label.hashint label,
|
|
td.label.haspreview label,
|
|
div#insLSF table > tbody tr td.hashint:nth-child(2) label,
|
|
div#insLSF table > tbody tr td.haspreview:nth-child(2) label {
|
|
line-height: 1.8em;
|
|
display: inline-block;
|
|
width: calc(100% - 22px);
|
|
}
|
|
td.label.hashint span.hint,
|
|
td.label.haspreview span.preview,
|
|
div#insLSF table > tbody tr td.hashint:nth-child(2) div,
|
|
div#insLSF table > tbody tr td.haspreview:nth-child(2) div {
|
|
width: 22px;
|
|
vertical-align: top;
|
|
}
|
|
td.label.hashint.haspreview label,
|
|
div#insLSF table > tbody tr td.hashint.haspreview:nth-child(2) label {
|
|
width: calc(100% - 44px);
|
|
}
|
|
td.label.hashint.haspreview div,
|
|
div#insLSF table > tbody tr td.hashint.haspreview:nth-child(2) div {
|
|
width: 44px;
|
|
}
|
|
td.label > span,
|
|
td.label div:not(.res_remark, .resartflexedit, .time-holder),
|
|
div#insLSF table > tbody tr div {
|
|
display: inline-block;
|
|
}
|
|
td.hashint span.hint::after {
|
|
content: attr(data-title);
|
|
position: absolute;
|
|
opacity: 0;
|
|
font-size: 0.9rem;
|
|
z-index: 2; /* .endicon + 1 */
|
|
pointer-events: none;
|
|
white-space: pre-wrap;
|
|
padding: .15rem .4rem;
|
|
margin-left: .25em;
|
|
border-radius: 0.25rem;
|
|
border: 1px solid #ccc;
|
|
box-shadow: 1.5px 1.5px 3px #ccc;
|
|
color: var(--textcolor);
|
|
background-color: #FFFFFF;
|
|
transition: opacity .2s ease-in-out; /* .2s fadeOut bij het verbergen */
|
|
}
|
|
td.hashint span.hint:hover::after {
|
|
opacity: 1;
|
|
transition: opacity 0s linear; /* Geen fadeIn bij het tonen */
|
|
}
|
|
|
|
@media (max-width: 425px) {
|
|
td.label {
|
|
max-width: 150px;
|
|
}
|
|
td.flexlabel span {
|
|
display: inline-block;
|
|
max-width: 175px;
|
|
}
|
|
}
|
|
/* specific for ins_search table after label "Taak" to keep checkboxes lined out*/
|
|
table > tbody tr.insD td:nth-child(1),
|
|
div#insLSF table > tbody tr td:nth-child(1) {
|
|
width: 25px;
|
|
}
|
|
|
|
table[id^=searchblock] {
|
|
table-layout: fixed;
|
|
}
|
|
table[id^=searchblock] td#usrrapinfo {
|
|
overflow: visible;
|
|
}
|
|
#searchbody
|
|
{
|
|
background-color: var(--activetabbackgroundcolor);
|
|
}
|
|
body#planbody.content-box,
|
|
body#mod_res_selectroom.deprecated {
|
|
box-sizing: content-box;
|
|
}
|
|
/* Niet bij lijsten en het planbord */
|
|
section#searchbody td.label,
|
|
body:not(#listbody, #planbody) td.label {
|
|
max-width: 250px;
|
|
width: 30%;
|
|
}
|
|
section#searchbody td.label + td,
|
|
body:not(#listbody, #planbody) td.label:not(.flexsearch) + td:not(.iconpicker, .filepicker, [data-type]) {
|
|
width: 70%;
|
|
}
|
|
|
|
@media (min-width: 0px) /* Vanaf bootstrap xs (geen Facilitor breakpoint) */
|
|
{
|
|
.col-lg-6.col-xxl-4 .d-xs-none {
|
|
display: none;
|
|
}
|
|
.col-lg-6.col-xxl-4 .d-xs-initial {
|
|
display: initial;
|
|
}
|
|
}
|
|
@media (min-width: 576px) /* Vanaf bootstrap sm (geen Facilitor breakpoint) */
|
|
{
|
|
.col-lg-6.col-xxl-4 .d-sm-none {
|
|
display: none;
|
|
}
|
|
.col-lg-6.col-xxl-4 .d-sm-initial {
|
|
display: initial;
|
|
}
|
|
}
|
|
@media (min-width: 768px) /* Vanaf bootstrap md (geen Facilitor breakpoint) */
|
|
{
|
|
.col-lg-6.col-xxl-4 .d-md-none {
|
|
display: none;
|
|
}
|
|
.col-lg-6.col-xxl-4 .d-md-initial {
|
|
display: initial;
|
|
}
|
|
}
|
|
@media (min-width: 992px) /* Vanaf bootstrap 2-koloms breakpoint (lg) */
|
|
{
|
|
/* Correctie voor brede blokken (todo exact berekenen?) */
|
|
body:not(#listbody, #planbody, .modal) .col-12:not([class*=col-lg]) td.label {
|
|
width: 14.313%;
|
|
}
|
|
body:not(#listbody, #planbody, .modal) .col-12:not([class*=col-lg]) td.label + td {
|
|
width: 85.687%;
|
|
}
|
|
.col-lg-6.col-xxl-4 .d-lg-none {
|
|
display: none;
|
|
}
|
|
.col-lg-6.col-xxl-4 .d-lg-initial {
|
|
display: initial;
|
|
}
|
|
}
|
|
@media (min-width: 1200px) /* Vanaf bootstrap xl (geen Facilitor breakpoint) */
|
|
{
|
|
.col-lg-6.col-xxl-4 .d-xl-none {
|
|
display: none;
|
|
}
|
|
.col-lg-6.col-xxl-4 .d-xl-initial {
|
|
display: initial;
|
|
}
|
|
}
|
|
@media (min-width: 1488px) /* Vanaf bootstrap 3-koloms breakpoint (xxl) */
|
|
{
|
|
/* Correctie voor brede blokken (todo exact berekenen?) */
|
|
body:not(#listbody, #planbody, .modal) .col-12:not([class*=col-lg]) td.label {
|
|
width: 9.218%;
|
|
}
|
|
body:not(#listbody, #planbody, .modal) .col-12:not([class*=col-lg]) td.label + td {
|
|
width: 90.782%;
|
|
}
|
|
.col-lg-6.col-xxl-4 .d-xxl-none {
|
|
display: none;
|
|
}
|
|
.col-lg-6.col-xxl-4 .d-xxl-initial {
|
|
display: initial;
|
|
}
|
|
}
|
|
@media (min-width: 1792px) /* Vanaf facilitor 3xl (custom -niet bootstrap- breakpoint) */
|
|
{
|
|
.col-lg-6.col-xxl-4 .d-3xl-none {
|
|
display: none;
|
|
}
|
|
.col-lg-6.col-xxl-4 .d-3xl-initial {
|
|
display: initial;
|
|
}
|
|
}
|
|
@media (min-width: 2000px) /* Vanaf facilitor 4xl (custom -niet bootstrap- breakpoint) */
|
|
{
|
|
.col-lg-6.col-xxl-4 .d-4xl-none {
|
|
display: none;
|
|
}
|
|
.col-lg-6.col-xxl-4 .d-4xl-initial {
|
|
display: initial;
|
|
}
|
|
}
|
|
|
|
/* dialect table exceptions */
|
|
div#lcldialectList td.label label {
|
|
white-space: normal;
|
|
}
|
|
div#lcldialectList td input {
|
|
width: 400px;
|
|
}
|
|
div#lcldialectList td span,
|
|
/* styling table exception */
|
|
div#template_css td {
|
|
width: inherit!important;
|
|
}
|
|
|
|
td:not([colspan]).label label > span {
|
|
max-width: 150px;
|
|
width: 150px;
|
|
}
|
|
/* selectors below become higher with display: inline-block
|
|
vertical-align: top prevents that according to https://stackoverflow.com/questions/27536428/inline-block-element-height-issue */
|
|
td.label,
|
|
td.label label {
|
|
vertical-align: top;
|
|
height: 22px;
|
|
}
|
|
|
|
td.label:not(.hasinlineflex),
|
|
td.label label,
|
|
td.label label > span {
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
td.label label,
|
|
td.label label > span:not(.stdmjb, .orglcl) {
|
|
max-width: 100%;
|
|
display: inline-block;
|
|
}
|
|
td.label.flexlabel,
|
|
td.label.flexlabel label,
|
|
td.label.flexlabel label > span,
|
|
td.label.textarea,
|
|
td.label.textarea label,
|
|
td.label.textarea label > span {
|
|
display: inline;
|
|
white-space: normal;
|
|
overflow: visible;
|
|
}
|
|
td.label.flexlabel[colspan],
|
|
td.label.textarea[colspan] { /* Anders volgt de layout van de hele tabel-row een verkeerde column indeling */
|
|
display: table-cell; /* = initial */
|
|
}
|
|
/* Plaatje in de Artikelselectie moet wel groot kunnen worden */
|
|
#besItemSel td.label label,
|
|
#besItemSel td.label label > span {
|
|
display: inline;
|
|
}
|
|
td.checkbox-td {
|
|
width: 30px;
|
|
}
|
|
|
|
td.label div span:nth-child(1):not(.input-icon-wrapper) {
|
|
max-width: 180px;
|
|
display: inline-block;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
h2.page-header {
|
|
font-size: 1.5rem;
|
|
line-height: 1.5rem;
|
|
padding: 14px 0 14px 0;
|
|
text-align: center;
|
|
background-color: var(--activetabbackgroundcolor);
|
|
color: var(--activetabcolor);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.admitscreen {
|
|
font-family: var(--fontfamily_alt);
|
|
font-size: 2rem;
|
|
text-align: center;
|
|
}
|
|
.admitscreen h3 {
|
|
text-align: center;
|
|
}
|
|
.admitscreen.ok {
|
|
background-color: #007764; /* Aareon Pine Green */
|
|
color: #fff;
|
|
}
|
|
.admitscreen.nok {
|
|
background-color: #CC5252;
|
|
color: #fff;
|
|
}
|
|
.admitscreen .interval {
|
|
margin-top: 2em;
|
|
text-transform: lowercase;
|
|
font-size: .8em;
|
|
line-height: 1.3em;
|
|
color: #111;
|
|
}
|
|
.admitscreen .admitfooter {
|
|
font-size: .5em;
|
|
position: absolute;
|
|
bottom: 10px;
|
|
left: 10px;
|
|
}
|
|
|
|
/* En BINNEN het frame de blokken op de pagina's */
|
|
.mainpage {
|
|
background-image: var(--portalbgimage);
|
|
background-position: center; /* ? */
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-attachment: fixed;
|
|
}
|
|
#frm_widget_page_frame,
|
|
#frametabs > .container-fluid {
|
|
background-image: var(--framebgimage);
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.xmainpage { /* Zo dan? Nee?*/
|
|
background-color: var(--activetabbackgroundcolor);
|
|
}
|
|
.notesmode .fcltblock,
|
|
.notesmode .fcltblock >div {
|
|
background-color: #f0fffd; /* dev */
|
|
}
|
|
|
|
/*************** dit is bedoeld voor de subtabs, zo weinig mogelijk, verderop staat hetzelfde voor de grote frametabs *************/
|
|
|
|
.subtabs .ui-state-default {
|
|
color: var(--textcolor);
|
|
background-color: white;
|
|
}
|
|
.subtabs .ui-state-hover {
|
|
background-color: white;
|
|
}
|
|
.subtabs.ui-tabs-nav,
|
|
.subtabs li.ui-tab {
|
|
border: 0;
|
|
padding: 0;
|
|
text-transform: uppercase;
|
|
}
|
|
.subtabs li.ui-tab {
|
|
border-left: 1px solid rgba(255,255,255,0.25);
|
|
border-right: 1px solid rgba(0,0,0,0.25);
|
|
border-radius: 0;
|
|
}
|
|
|
|
/* Alternatieve rechter-border (2/3 hoog ipv 100%) */
|
|
.subtabs li.ui-tab:not(:last-of-type) {
|
|
position: relative;
|
|
border-right: 1px solid transparent;
|
|
margin-right: 0;
|
|
}
|
|
.subtabs li:not(:last-of-type)::after {
|
|
content: "";
|
|
position: absolute;
|
|
height: calc(200% / 3);
|
|
width: 0;
|
|
border-right: 1px solid rgba(0, 0, 0, 0.25);
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
.subtabs li.ui-tab a {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
color: var(--textcolor);
|
|
}
|
|
.subtab-icon {
|
|
margin-right: 4px;
|
|
}
|
|
/* Dit is de subtab-badge met het aantal regels */
|
|
span.subtab-badge {
|
|
font-family: "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans",
|
|
"sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
padding: 0.2em .4em;
|
|
border: 0;
|
|
box-shadow: 0 0 0 1px var(--textcolor);
|
|
background-color: var(--textcolor);
|
|
color: #fffffe; /*backgroundcolor*/
|
|
white-space: nowrap;
|
|
border-radius: .25rem;
|
|
font-size: 0.8em;
|
|
margin-left: 6px;
|
|
line-height: 1.1em;
|
|
opacity: 0.45;
|
|
}
|
|
.subtabs li.ui-tab:not(.ui-state-active):hover a {
|
|
color: var(--buttonhoverbackgroundcolor); /* dat is natuurlijk niet altijd goed */
|
|
}
|
|
.subtabs li.ui-tab:not(.ui-state-active):hover span.subtab-badge {
|
|
box-shadow: 0 0 0 1px var(--buttonhoverbackgroundcolor);
|
|
}
|
|
.subtabs li.ui-state-active a {
|
|
font-weight: bold;
|
|
}
|
|
|
|
#insPlanList {
|
|
height:300px;
|
|
}
|
|
.septop {
|
|
border-top: 1px solid #ddd;
|
|
}
|
|
|
|
td.time {
|
|
line-height: 1.2em!important;
|
|
}
|
|
|
|
.fcltblock .inside {
|
|
padding: 1px 1px 2px 1px;
|
|
background-color: #fffffe; /*backgroundcolor*/
|
|
border-top: 0;
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.leftcontainer .fcltblock {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
span.autoreport {
|
|
padding-left: 8px;
|
|
margin-top: 1px;
|
|
}
|
|
|
|
span.autoreport,
|
|
span.facautoreport {
|
|
cursor: pointer;
|
|
color: var(--textcolor);
|
|
vertical-align: inherit;
|
|
}
|
|
|
|
span.far-alignment {
|
|
margin-left: -3px;
|
|
}
|
|
|
|
table.preview {
|
|
width: 100%;
|
|
}
|
|
table.preview tr td {
|
|
padding: 1px;
|
|
max-height: 170px;
|
|
height: 100%;
|
|
position: relative;
|
|
text-align: center;
|
|
vertical-align: bottom;
|
|
cursor: pointer;
|
|
}
|
|
|
|
table.preview tr td {
|
|
word-break: break-all;
|
|
}
|
|
table.preview img.preview:hover {
|
|
box-shadow: var(--buttonbackgroundcolor) 1px 1px 9px 1px;
|
|
}
|
|
/* uren registratie iconen. Moeten misschien een keer een autokleur krijgen */
|
|
.notperfect .fa-comment {
|
|
padding-left: 8px;
|
|
cursor: pointer;
|
|
margin-top: 1px;
|
|
color: #2b5797;
|
|
}
|
|
|
|
.preview i {
|
|
color: var(--buttonbackgroundcolor); /* deze is niet zeker goed */
|
|
}
|
|
.preview:hover i {
|
|
color: var(--buttonhoverbackgroundcolor);
|
|
}
|
|
span.flexsize,
|
|
span.tooltip {
|
|
font-family: var(--fontfamily_alt);
|
|
color:#808080;
|
|
font-size:0.8em;
|
|
}
|
|
|
|
.besflex {
|
|
padding: 1px 0 2px 0;
|
|
}
|
|
tr.bessrtgroepname td {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.info {
|
|
padding: 4px 4px 12px 4px;
|
|
font-size: 1.2em;
|
|
color: #111111;
|
|
}
|
|
|
|
#selfInput.fcltblock td {
|
|
padding: 2px;
|
|
}
|
|
|
|
.inside {
|
|
margin:0;
|
|
padding: 0;
|
|
}
|
|
/* For internal styling within textarea's */
|
|
.fclthtml {
|
|
overflow-wrap: anywhere;
|
|
line-height: 1.5em;
|
|
}
|
|
.fclthtml table, .fclthtml td, .fclthtml th {
|
|
border: solid 1px #888;
|
|
}
|
|
.fclthtml th {
|
|
background-color: #999;
|
|
}
|
|
.fclthtml td {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.text-styles {
|
|
position: relative;
|
|
display: flex;
|
|
line-height: 1.8em;
|
|
background-color: var(--inputbackgroundcolor);
|
|
background-image: linear-gradient(
|
|
rgba(0, 0, 0, 0.03),
|
|
rgba(0, 0, 0, 0.03));
|
|
border-top-left-radius: 0.3em;
|
|
border-left: 2px solid rgba(52, 63, 77, 0.25); /* Aareon Urban Grey 25% */
|
|
border-top: 1px solid rgba(52, 63, 77, 0.25); /* Aareon Urban Grey 25% */
|
|
}
|
|
.text-styles.closed {
|
|
border: 0;
|
|
z-index: 1;
|
|
}
|
|
.text-style-button {
|
|
border-radius: 0.3em;
|
|
padding: 0.3em 0.6em;
|
|
}
|
|
.text-style-toggle {
|
|
position: absolute;
|
|
line-height: 0;
|
|
top: 0.15em;
|
|
right: 0.2em;
|
|
padding: 0.15em;
|
|
border-radius: 50%;
|
|
color: var(--textcolor);
|
|
background-color: var(--inputbackgroundcolor);
|
|
opacity: 0.75;
|
|
}
|
|
.text-style-toggle > i {
|
|
aspect-ratio: 1;
|
|
}
|
|
.text-style-button:hover {
|
|
background-color: rgba(255, 255, 255, 0.25);
|
|
}
|
|
.text-styles.closed .text-style-button,
|
|
.text-styles:not(.closed) .text-style-toggle {
|
|
display: none;
|
|
}
|
|
|
|
/* For first use intropage*/
|
|
div.wbackground {
|
|
background-image: url("../Pictures/welcomebg.jpg");
|
|
background-repeat:no-repeat;
|
|
background-position:left top;
|
|
background-size: cover;
|
|
padding: 10px 20px 200px 20px;
|
|
}
|
|
.transbox {
|
|
width: 700px;
|
|
color: #fff;
|
|
text-shadow: 1px 1px black;
|
|
padding: 25px;
|
|
border-radius: 4px;
|
|
box-shadow: 4px 4px 20px #111;
|
|
margin: 30px 0px 30px 50px;
|
|
background-color: rgba(48,48,48,0.95);
|
|
}
|
|
|
|
.wtitle {
|
|
font-family: var(--fontfamily_titles);
|
|
font-weight: bold;
|
|
font-size: 1.8em;
|
|
}
|
|
.wintro, .wlinebye {
|
|
font-size: 1.4em;
|
|
padding: 2em 0 1em 0;
|
|
}
|
|
.wline1, .wline2, .wline3, .wline4, .wline5 {
|
|
font-size: 1.4em;
|
|
line-height: 1.6em;
|
|
}
|
|
|
|
|
|
/* For my personalized homepage*/
|
|
#mywelcome , #mymessages, #myactions{
|
|
background-color: var(--activetabbackgroundcolor);
|
|
color: var(--textcolor);
|
|
height: 10%;
|
|
margin: 5px 3px 0 3px;
|
|
padding: 0;
|
|
}
|
|
#mywelcomeframe {
|
|
padding: 0;
|
|
}
|
|
#mywelcometitle{
|
|
background-color: var(--welcomebackgroundcolor);
|
|
color: var(--welcomecolor);
|
|
font-size: 1.8em;
|
|
line-height: 1.8em;
|
|
text-align: center;
|
|
}
|
|
#mynewscontainer {
|
|
display: inline;
|
|
}
|
|
#mynewsframe, #myactionsframe {
|
|
padding: 0;
|
|
}
|
|
#myactionsinfo, #mywelcomeinfo, #mymessagesinfo {
|
|
padding: 4px;
|
|
}
|
|
#myactionscontainer {
|
|
display: inline;
|
|
}
|
|
.widget-title,
|
|
#mywelcomeinfo {
|
|
background-color: var(--tableheaderbackgroundcolor);
|
|
color: var(--tableheadercolor);
|
|
border-radius: 4px 4px 0 0;
|
|
margin-top: 1px;
|
|
font-size: 1.2em;
|
|
}
|
|
#mywelcomeinfo.widget-title {
|
|
font-size: 1.44em;
|
|
}
|
|
.ui-tabs-nav {
|
|
border-bottom-left-radius: 0px;
|
|
border-bottom-right-radius: 0px;
|
|
}
|
|
|
|
#facforum div {background-color: #FFFF80; background-image: none; padding:1em 2.2em;}
|
|
#facforum h5 {background-color: #FFFF80; background-image: none; font-weight: normal; font-size:100%;}
|
|
#facforum h5 a {color:#000;}
|
|
#facforum h5 .ui-icon {background-image: url(../Localscripts/theme/images/ui-icons_444444_256x240.png);}
|
|
#facforum div.hideNews { float: right; margin-right:30px; position: relative; }
|
|
|
|
.nieuwsbody, .nieuwsbodyfull {
|
|
background-color: #fffffe; /* backgroundcolor */
|
|
background-image: var(--newsbgimage);
|
|
background-repeat :no-repeat;
|
|
background-size: cover;
|
|
background-position: center;
|
|
padding: 0;
|
|
margin: 0;
|
|
border: 0px solid #ccc;
|
|
color: var(--newscolor);
|
|
}
|
|
.nieuwsicon {
|
|
color: var(--newscolor);
|
|
font-size: 2rem;
|
|
display: inline;
|
|
float: left;
|
|
margin: 0 10px;
|
|
text-shadow: 1px 2px 2px #333;
|
|
}
|
|
.nieuwstitel {
|
|
font-weight: bold;
|
|
font-size:1.6em;
|
|
padding: 10px 0 4px 14px;
|
|
}
|
|
.nieuwstitelbigger {
|
|
font-weight: bold;
|
|
font-size: 2.4em;
|
|
padding: 10px 0 4px 14px;
|
|
text-align: center;
|
|
}
|
|
.nieuwstekst {
|
|
font-size: 1.1em;
|
|
margin: 1px 20px 0px 14px;
|
|
padding-bottom: 12px;
|
|
line-height: 1.3em;
|
|
}
|
|
.nieuwstekst a {
|
|
text-decoration: underline;
|
|
font-weight: bold;
|
|
color: var(--newscolor);
|
|
}
|
|
.nieuwsdetails {
|
|
color: var(--newscolor); /* Backup voor als transparancy truucje van de regel hieronder niet werkt */
|
|
color: var(--newscolor)80;
|
|
font-weight: lighter;
|
|
margin: 1px 20px 0px 14px;
|
|
padding-bottom: 12px;
|
|
line-height: 1.3em;
|
|
}
|
|
|
|
span.nusr { /* RWSN#64739 */
|
|
display: none;
|
|
}
|
|
#showmorenews {
|
|
margin: 0 0 1em 14px;
|
|
}
|
|
.nieuwsbodyfull .nieuwsdetails {font-size: 0.9em;}
|
|
.nieuwsbody .nieuwsdetails {font-size: 0.8em;}
|
|
|
|
.nieuwsbodyfull {
|
|
margin: auto;
|
|
width: 70%;
|
|
}
|
|
hr.nieuwsep {
|
|
border: 1px solid var(--buttonbackgroundcolor);
|
|
box-shadow: var(--buttonbackgroundcolor) 0px 0px 5px;
|
|
}
|
|
|
|
#usermess td {
|
|
line-height:1.7em;
|
|
}
|
|
.usermsgdate {
|
|
white-space: nowrap;
|
|
}
|
|
.usermessage a {
|
|
text-decoration: none;
|
|
cursor:pointer;
|
|
}
|
|
.usermessage a:hover {
|
|
text-decoration: underline;
|
|
color: var(--linkhovercolor);
|
|
}
|
|
|
|
.newstextFreshRed td {font-weight: bold; color: red;}
|
|
.newstextFresh td {font-weight: normal; color: var(--textcolor);}
|
|
.newstext td{
|
|
color: var(--textcolor);
|
|
font-weight: 200;
|
|
}
|
|
|
|
.flikehead, .flikefoot, .flikeopts, #flike_op {
|
|
font-size: 1.1em;
|
|
padding: 2px;
|
|
}
|
|
.flikefoot {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
ul.flikeopts li {
|
|
line-height: 2em;
|
|
list-style-type: none;
|
|
}
|
|
|
|
ul.flikeopts li a,
|
|
ul.flikeopts li a img {
|
|
margin-left: 10px;
|
|
margin-right: 10px;
|
|
}
|
|
#satisfaction {
|
|
width: 24px;
|
|
height: 24px;
|
|
position: absolute;
|
|
top: 50px;
|
|
left: 100px;
|
|
}
|
|
|
|
.faclisticon {
|
|
height: 16px;
|
|
}
|
|
|
|
/*ZOEKSCHERMEN*/
|
|
#searchbody *:not(.buttoncontainer) > #buttons {
|
|
text-align: center;
|
|
margin-top: 4px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.modal .simple-block-wrapper > #buttons,
|
|
.modal .simple-block-wrapper > #buttons1,
|
|
.modal .simple-block-wrapper > #buttons2,
|
|
.modal .block-wrapper > #buttons {
|
|
margin: 4px 4px 1em 4px;
|
|
text-align: center;
|
|
}
|
|
|
|
#filters {
|
|
padding: 0 5px 0 5px;
|
|
}
|
|
|
|
/* zoekvelden die initieel en altijd zichtbaar zijn */
|
|
.primsearch {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
/* zoekvelden die initieel niet en aan te zetten zijn */
|
|
.secsearch {
|
|
display: none;
|
|
margin: 0;
|
|
}
|
|
table.fill {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
#accepttable {
|
|
width: 100%;
|
|
}
|
|
|
|
.busyloading {
|
|
color: #444;
|
|
position: fixed;
|
|
left: 50%;
|
|
transform: translate(-50%, 100%); /* Horizontaal in het midden, verticaal 1x spinner-hoogte naar onderen */
|
|
z-index: 999;
|
|
}
|
|
.busyloading ~ #collapseblock td.emptyset {
|
|
padding-bottom: 100px;
|
|
}
|
|
.busyoverlay {
|
|
position: fixed;
|
|
z-index: 100; /* modal -1 */
|
|
top: 0;
|
|
left: 0;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
background: #aaa;
|
|
opacity: 0.75;
|
|
}
|
|
|
|
.anointotext1 {
|
|
font-weight: bold;
|
|
color: red;
|
|
}
|
|
|
|
/*
|
|
* THE BUTTONS
|
|
*/
|
|
/* het blok waarin de list met buttons */
|
|
.notebuttons {
|
|
float:left;
|
|
}
|
|
#buttons {
|
|
font-size: .825rem; /* = 16px * 0.75em * 1.1em */
|
|
}
|
|
#buttons ul {
|
|
padding: 0;
|
|
margin-left: 0;
|
|
margin-bottom: 0;
|
|
margin-top: 0;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.alertOk, .alertCancel, .advOk, .advReset,
|
|
#besfavbtnall, .resultprintno, .resultprintcancel {
|
|
background-image: none!important;
|
|
outline-style:none;
|
|
box-shadow:none;
|
|
border-color:transparent;
|
|
}
|
|
|
|
/* een button */
|
|
#buttons ul li,
|
|
#buttons ul li a {
|
|
font-family: var(--fontfamily_titles);
|
|
font-style: normal;
|
|
list-style-type: none;
|
|
display: inline-block;
|
|
}
|
|
|
|
#buttons ul li,
|
|
#buttons ul li a,
|
|
.mv,
|
|
.mover,
|
|
.uploadbutton,
|
|
input[type=button],
|
|
input[type=text].button,
|
|
input.button,
|
|
span.button,
|
|
.alertCancel, .alertOk, .alertOk:active,
|
|
.advOk, .advReset, .resultprintno, .resultprintcancel,
|
|
#linkOk, #linkCancel, #besfavbtnall
|
|
{
|
|
cursor: pointer;
|
|
padding: 3px 14px 3px 10px;
|
|
color: var(--buttoncolor);
|
|
background-color: var(--buttonbackgroundcolor);
|
|
border: 1px solid transparent; /* dan blijft de grootte goed */
|
|
text-align: center;
|
|
border-radius: 2px;
|
|
font-size: 1.1em;
|
|
font-weight: 500;
|
|
transition: color 0.2s, background-color 0.2s, background 0.2s;
|
|
text-decoration: none;
|
|
text-transform: lowercase;
|
|
will-change: background-color, color;
|
|
background-position: center !important;
|
|
}
|
|
|
|
/* Verticale knoppen in een dialog net iets anders (vaak veel boven elkaar) */
|
|
#buttons.vertical.dialog ul li {
|
|
border-radius: calc(.25rem - 1px);
|
|
border-bottom: 1px solid #FFFFFE; /* backgroundcolor */
|
|
}
|
|
#buttons.vertical.dialog ul li:hover .dialogtext {
|
|
text-decoration: none;
|
|
}
|
|
#buttons.vertical.dialog ul li:active {
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
#buttons.vertical ul li,
|
|
#sel_room {
|
|
text-transform: none;
|
|
}
|
|
|
|
span:is(.bijlage, .bijlage1, .endicon, .starticon) {
|
|
color: var(--buttoncolor);
|
|
}
|
|
|
|
/* volgens mij willen we de tekst op een rij verticale buttons niet centreren */
|
|
#buttons.vertical ul li {
|
|
text-align: left;
|
|
padding: 3px 14px 3px 10px;
|
|
}
|
|
|
|
.alertOk:active {
|
|
font-size: 12px;
|
|
}
|
|
|
|
#buttons ul li.emphasishigh, /* Nodig voor css specificity */
|
|
.emphasishigh,
|
|
.alertOk, .advOk, .resultprintno,
|
|
#linkOk, #besfavbtnall
|
|
{
|
|
color: var(--buttoncolor);
|
|
background-color: var(--buttonbackgroundcolor);
|
|
border: 1px solid transparent;
|
|
}
|
|
#buttons ul li.emphasismedium, /* Nodig voor css specificity */
|
|
.emphasismedium,
|
|
.advReset
|
|
{
|
|
color: var(--buttoncolormediumlow);
|
|
background-color: var(--buttonbackgroundcolormediumlow);
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
#buttons ul li.emphasislow, /* Nodig voor css specificity */
|
|
.emphasislow,
|
|
.emphasislow a, /* ook ja? */
|
|
.resultprintcancel,
|
|
.alertCancel,
|
|
#linkCancel
|
|
{
|
|
color: var(--buttoncolormediumlow);
|
|
background-color: var(--buttonbackgroundcolormediumlow);
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
#buttons.hambdropdown ul li {
|
|
text-align: left;
|
|
}
|
|
|
|
|
|
.button-icon-wrapper:hover > [type=button]:not([disabled]),
|
|
input[type=button]:hover:not([disabled]),
|
|
input[type=text].button:hover:not([disabled]),
|
|
.uploadbutton:hover,
|
|
span.button:hover {
|
|
color: var(--buttonhovercolor);
|
|
background-color:var(--buttonhoverbackgroundcolor);
|
|
}
|
|
.button-icon-wrapper:hover > :is(.starticon,
|
|
[type=button]:not([disabled]) + :is(.bijlage, .bijlage1, .endicon)) {
|
|
color: var(--buttonhovercolor);
|
|
}
|
|
|
|
input[type=button][disabled] {
|
|
cursor: default;
|
|
}
|
|
|
|
.blockbuttoncontainer #buttons ul li,
|
|
.blockbuttoncontainer #buttons ul li span {
|
|
transition: background-color 0.2s;
|
|
display: inline;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
/* is ook maar een button */
|
|
.subframe .blockbuttoncontainer #buttons ul li {
|
|
box-shadow: 1.5px 1.5px 3px #ccc;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
#buttons ul li.byHamburger,
|
|
#buttons ul li.byHamburger a,
|
|
#buttons ul li.byDropdown,
|
|
#buttons ul li.byDropdown a {
|
|
border: 1px solid var(--buttoncolor); /* IE11 backup */
|
|
border: 1px solid var(--buttoncolor)25;
|
|
border-radius: 2px;
|
|
line-height: 1.5em;
|
|
padding: 3px 6px;
|
|
height: calc(1.8em + 6px); /* body(default) line-height + verticale padding (zie hierboven) */
|
|
}
|
|
|
|
#buttons.hambdropdown ul li.byHamburger:first-of-type,
|
|
#buttons.hambdropdown ul li.byDropdown:first-of-type {
|
|
border-bottom-color: transparent;
|
|
}
|
|
|
|
#buttons.hambdropdown ul li.byHamburger:last-of-type,
|
|
#buttons.hambdropdown ul li.byDropdown:last-of-type {
|
|
border-top-color: transparent;
|
|
}
|
|
|
|
#buttons ul li:hover,
|
|
.blockbuttoncontainer #buttons ul li:hover,
|
|
body.showmode #buttons ul li:hover {
|
|
color: var(--buttonhovercolor);
|
|
background-color: var(--buttonhoverbackgroundcolor);
|
|
}
|
|
|
|
/* verticale (dialog) buttons */
|
|
#buttons ul li.vertical {
|
|
display: block;
|
|
}
|
|
#buttons.vertical {
|
|
min-width: 300px;
|
|
}
|
|
#buttons ul li i + span {
|
|
margin-left: .25em;
|
|
}
|
|
#buttons.vertical ul li i { /* FA icons */
|
|
font-size: 1.5em;
|
|
}
|
|
#buttons.vertical ul li:hover {
|
|
background-color: var(--buttonhoverbackgroundcolor);
|
|
color: var(--buttonhovercolor);
|
|
}
|
|
|
|
div#buttons.dialog {
|
|
background-color: transparent;
|
|
margin: 4px;
|
|
}
|
|
|
|
div#buttons.dialog a,
|
|
div#buttons.dialog img {
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.dialogtext {
|
|
display: inline;
|
|
font-weight: normal;
|
|
}
|
|
|
|
#buttons ul li.dialog,
|
|
#buttons ul li.dialog a {
|
|
text-align: left;
|
|
}
|
|
|
|
/* de submitbutton wil je onzichtbaar hebben, maar niet hidden!*/
|
|
#buttons ul li.hiddenbutton,
|
|
#buttons ul li.hiddenbutton input[type=submit] {
|
|
position: absolute;
|
|
display: flex;
|
|
height: 0;
|
|
width: 0;
|
|
background-color: transparent;
|
|
opacity: 0;
|
|
border: 0;
|
|
cursor: default;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
/* een buttonhover */
|
|
#buttons ul li a:hover {
|
|
color: var(--buttonhovercolor);
|
|
background-color: var(--buttonhoverbackgroundcolor);
|
|
text-decoration: none;
|
|
}
|
|
#buttons ul li.emphasislow:hover, .alertCancel:hover, .resultprintcancel:hover, #linkCancel:hover {
|
|
color: var(--buttonhovercolor);
|
|
background-color: var(--buttonhoverbackgroundcolor);
|
|
text-decoration: none;
|
|
border: 1px solid transparent;
|
|
border-radius: 0px;
|
|
border-bottom: 1px solid var(--buttonhoverbackgroundcolor);
|
|
}
|
|
|
|
#buttons ul li:hover,
|
|
.mv:hover,
|
|
.mover:hover,
|
|
.alertOk:hover,
|
|
.advOk:hover,
|
|
.resultprintno:hover,
|
|
.advReset:hover,
|
|
#linkOk:hover,
|
|
#besfavbtnall:hover,
|
|
.sidebar-toggler:hover {
|
|
color: var(--buttonhovercolor);
|
|
text-decoration: none;
|
|
background: var(--buttonhoverbackgroundcolor) radial-gradient(circle, transparent 1%, var(--buttonhoverbackgroundcolor) 1%) center/15000%;
|
|
}
|
|
|
|
#buttons ul li.emphasishigh:active,
|
|
#linkOk:active, #besfavbtnall:active,
|
|
#buttons ul li.emphasismedium:active {
|
|
background-color: var(--buttonhovercolor);
|
|
background-size: 100%;
|
|
}
|
|
|
|
#buttons ul li.emphasislow:active {
|
|
color: var(--buttonhovercolor);
|
|
}
|
|
|
|
/* Hierin verandert de 'wijzigen' knop in het reserveringen-planbord */
|
|
#buttons ul li.noHover:hover { /* een button waar je niet op moet klikken ..*/
|
|
cursor: default;
|
|
color: var(--buttoncolor);
|
|
background-color: var(--buttonbackgroundcolor);
|
|
border-color: var(--buttonbackgroundcolor);
|
|
}
|
|
|
|
.btn_disabled
|
|
{
|
|
opacity: 0.6;
|
|
color: #808080!important;
|
|
}
|
|
|
|
.mbutton
|
|
{
|
|
width: 20px;
|
|
height: 20px;
|
|
color: #7B7B7B;
|
|
border: 0;
|
|
}
|
|
/* een inline button */
|
|
.ilbutton {
|
|
cursor: pointer;
|
|
}
|
|
.ilbutton:hover {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
li.dialog span.default,
|
|
#buttons .default
|
|
{
|
|
font-weight: 700;
|
|
}
|
|
|
|
img.photo {
|
|
border: 0;
|
|
cursor: pointer;
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100px;
|
|
width: 100px;
|
|
}
|
|
|
|
img.kenmerk {
|
|
border: 1px solid #ccc;
|
|
max-height: 100px;
|
|
max-width: 100px;
|
|
display: block;
|
|
cursor: pointer;
|
|
}
|
|
|
|
img.kenmerk:is(:not([src]), [src=""]) {
|
|
display: none;
|
|
}
|
|
|
|
img.profile {
|
|
border: 1px solid #fff;
|
|
max-height: 200px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
#mrkFotoList img.photo {
|
|
height: auto;
|
|
width: 220px;
|
|
}
|
|
|
|
img.details, span.details, tr.details, i.details, div.ref, label.details {
|
|
border: 0;
|
|
cursor: pointer;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
span.details:hover, label.details:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.truncate {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.dragdrop {
|
|
cursor: auto;
|
|
margin-top: 8px;
|
|
text-align: center;
|
|
}
|
|
|
|
span.lendobj {
|
|
padding: 0px;
|
|
margin: 0px;
|
|
margin-left: 5px;
|
|
cursor: auto;
|
|
height: 12px;
|
|
}
|
|
|
|
/* moreinfo als link ipv icon */
|
|
input.details,
|
|
span.details,
|
|
a.details,
|
|
label.cadselect,
|
|
.facmgtmultilang {
|
|
cursor: pointer;
|
|
color: var(--linkcolor);
|
|
}
|
|
|
|
input.details:hover,
|
|
span.details:hover,
|
|
label.cadselect:hover,
|
|
.facmgtmultilang:hover
|
|
{
|
|
text-decoration: underline;
|
|
color: var(--linkhovercolor);
|
|
}
|
|
.bedrijfdienstloc-wrapper {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.bedrijfdienstloc-select {
|
|
flex-basis: calc(49% - 100px);
|
|
}
|
|
.bedrijfdienstloc-button {
|
|
flex-basis: 200px;
|
|
margin: auto;
|
|
}
|
|
|
|
.cnt-scope-buttons {
|
|
text-align: center;
|
|
}
|
|
.mover {
|
|
font-size: 20px;
|
|
}
|
|
.uploadbutton {
|
|
border: 1px solid #ccc;
|
|
display: inline-block;
|
|
padding: 6px 12px;
|
|
cursor: pointer;
|
|
}
|
|
input[type=file] {
|
|
display: none;
|
|
}
|
|
.fileopen {
|
|
position: relative;
|
|
top: 1px;
|
|
left: -17px;
|
|
width: 16px;
|
|
height: 16px;
|
|
font-size: 1.2em;
|
|
}
|
|
.button-icon-wrapper,
|
|
.input-icon-wrapper {
|
|
position: relative;
|
|
white-space: nowrap;
|
|
}
|
|
:is(.button-icon-wrapper, .input-icon-wrapper) input:is([type=text], [type=button]) {
|
|
padding-right: 2em; /* Voor het icoontje */
|
|
}
|
|
:is(.button-icon-wrapper, .input-icon-wrapper) > .starticon + input:is([type=text], [type=button]) {
|
|
padding-left: 2em;
|
|
padding-right: 10px; /* Button default */
|
|
}
|
|
|
|
.symbol-delete {
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
/* Symbool knoppen */
|
|
:is(.iconpicker, .filepicker, [data-type]) {
|
|
display: grid;
|
|
column-gap: 1px;
|
|
}
|
|
:is(.iconpicker, .filepicker, [data-type]) .button-icon-wrapper {
|
|
overflow: hidden;
|
|
}
|
|
:is(.iconpicker, .filepicker, [data-type]) .button-icon-wrapper input[type=button] {
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* type = 0 laat 2 gelijke knoppen zien */
|
|
[data-type="0"] {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
/* Anders 1 knop met 1 'delete'-icoontje */
|
|
:is([data-type="1"], [data-type="2"], .iconpicker, .filepicker) {
|
|
grid-template-columns: 999fr 1fr;
|
|
}
|
|
|
|
[data-type="1"] > .file-picker,
|
|
[data-type="2"] > .fa-picker,
|
|
:is([data-type="0"], .iconpicker, .filepicker) > [type=hidden][value=""] ~ .symbol-delete {
|
|
display: none;
|
|
}
|
|
|
|
.fa-icon-picker {
|
|
box-sizing: content-box;
|
|
font-size: 1.5em;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 3px;
|
|
}
|
|
|
|
.fa-icon-picker > i {
|
|
background-color: #FFFFFF;
|
|
aspect-ratio: 1; /* Height = width = 1.25em */
|
|
line-height: 1.25em; /* = height & width */
|
|
padding: .4em;
|
|
border: 1px solid rgba(0, 0, 0, .25);
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
transition: transform .05s;
|
|
transform: translateZ(0); /* Deze laatste 2 verbeteren de performance enorm, aldus; */
|
|
backface-visibility: hidden; /* https://stackoverflow.com/questions/12969228/chrome-slow-scrolling-with-fixed-position-elements */
|
|
}
|
|
|
|
.fa-icon-picker > i:hover {
|
|
z-index: 1;
|
|
transform: scale(1.75);
|
|
box-shadow: #FFFFFF 0 0 0 1px;
|
|
}
|
|
|
|
.bijlage, .bijlage1, .materiaal {
|
|
background-repeat: no-repeat;
|
|
background-position: 6px;
|
|
text-align: left;
|
|
}
|
|
|
|
/* Als de handtekening er staat, onderdruk dan de 'toevoegen' knop */
|
|
img.kenmerk[src]:not([src=""]) + .flex-bijlage.button-icon-wrapper {
|
|
display: none;
|
|
}
|
|
|
|
.button-icon-wrapper > span:is(.bijlage, .bijlage1, .endicon, .starticon) {
|
|
position: absolute;
|
|
font-size: 1.2em;
|
|
z-index: 1;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
right: 0.5em;
|
|
transition: color 0.2s;
|
|
}
|
|
span.starticon {
|
|
left: 0.5em;
|
|
right: initial;
|
|
}
|
|
|
|
span:is(.starticon, .endicon) {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.card-header-content {
|
|
position: relative;
|
|
}
|
|
.card-header-content > .btn-group,
|
|
.card-header-content > .blockbuttoncontainer
|
|
{
|
|
position: absolute;
|
|
font-size: 0.85em; /* todo, temp button fix */
|
|
right: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
.card-header-content > .filter {
|
|
position: absolute;
|
|
float: right;
|
|
font-size: 1em;
|
|
top: 50%;
|
|
right: 0;
|
|
transform: translateY(-50%);
|
|
}
|
|
.card-header-content > .filter.fa-search::before {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 0;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
.card-header-content > .filter > #autofilter {
|
|
padding-right: 1.5em;
|
|
}
|
|
|
|
/* deze lijkt generiek maar valt in #mldHistory */
|
|
.btn-group > button
|
|
{
|
|
background-color: var(--buttonbackgroundcolormediumlow);
|
|
transition: background-color 0.2s;
|
|
color: var(--buttoncolormediumlow);
|
|
border: 0;
|
|
height: 23px;
|
|
width: 50px;
|
|
cursor: pointer;
|
|
float: left;
|
|
}
|
|
|
|
.btn-group > button:not(:last-child) {
|
|
border-right: 1px solid #0FD3BB;
|
|
}
|
|
|
|
.btn-group > button:first-child
|
|
{
|
|
border-top-left-radius: 2px;
|
|
border-bottom-left-radius: 2px;
|
|
}
|
|
.btn-group > button:last-child
|
|
{
|
|
border-top-right-radius: 2px;
|
|
border-bottom-right-radius: 2px;
|
|
}
|
|
|
|
.btn-group > button:not(.selected) {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.btn-group > button:hover {
|
|
background-color: var(--buttonhoverbackgroundcolor);
|
|
color: var(--buttonhovercolor);
|
|
opacity: 1;
|
|
}
|
|
|
|
.uitvoerenden {
|
|
padding: 4px 0 4px 25px;
|
|
width: 140px;
|
|
text-align: left;
|
|
}
|
|
|
|
#r_objs_button {
|
|
background-repeat: no-repeat;
|
|
background-position: 6px;
|
|
}
|
|
|
|
#r_objs_button:disabled,
|
|
#r_objs_button:disabled + span.endicon {
|
|
opacity: 0.5;
|
|
}
|
|
#r_objs_button:disabled {
|
|
font-style: italic;
|
|
background-image: none;
|
|
}
|
|
div.r_objs.disabled { visibility: hidden; }
|
|
|
|
.fldr_objs, .fldr_objs:focus{
|
|
background: none;
|
|
border: 0px;
|
|
}
|
|
.frametab {
|
|
width: 100%;
|
|
padding: 0px!important;
|
|
}
|
|
|
|
div#result {
|
|
width: 100%;
|
|
}
|
|
|
|
div.mldhandlinghead {
|
|
margin-top: 10px;
|
|
border-bottom: 1px solid #ddd;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.inlinedetails i {
|
|
color: var(--textcolor);
|
|
vertical-align: middle;
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
#flag-icon {
|
|
float: left;
|
|
margin-right: 2px;
|
|
}
|
|
#flag-icon + select { /* 100% - flag-icon-width - flag-icon-margin-right */
|
|
width: calc(100% - 1.63em - 2px);
|
|
}
|
|
|
|
.mldflag0,.mldflag1,.mldflag2,
|
|
.mldflag3,.mldflag4,.mldflag5,
|
|
.mldflag6,.mldflag7,.mldflag8,
|
|
.mldflag9,
|
|
.opdrflag0,.opdrflag1,.opdrflag2,
|
|
.opdrflag3,.opdrflag4,.opdrflag5,
|
|
.opdrflag6,.opdrflag7,.opdrflag8,
|
|
.opdrflag9,
|
|
.bezflag0,.bezflag1,.bezflag2,
|
|
.bezflag3,.bezflag4,.bezflag5,
|
|
.bezflag6,.bezflag7,.bezflag8,
|
|
.bezflag9,
|
|
.resflag0,.resflag1,.resflag2,
|
|
.resflag3,.resflag4,.resflag5,
|
|
.resflag6,.resflag7,.resflag8,
|
|
.resflag9,
|
|
.resfiat,
|
|
.finflag0,.finflag1,.finflag2,
|
|
.finflag3,.finflag4,.finflag5,
|
|
.finflag6,.finflag7,.finflag8,
|
|
.finflag9,
|
|
.besopdrflag0,.besopdrflag1,.besopdrflag2,
|
|
.besopdrflag3,.besopdrflag4,.besopdrflag5,
|
|
.besopdrflag6,.besopdrflag7,.besopdrflag8,
|
|
.besopdrflag9,
|
|
.insflag0,.insflag1,.insflag2,
|
|
.insflag3,.insflag4,.insflag5,
|
|
.insflag6,.insflag7,.insflag8,
|
|
.insflag9
|
|
{
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
.mldflag0, .resflag0, .opdrflag0, .bezflag0, .finflag0, .insflag0, .besopdrflag0 { color: #b0b0b0; }
|
|
.mldflag1, .resflag1, .opdrflag1, .bezflag1, .finflag1, .insflag1, .besopdrflag1 { color: #4d4d4d; }
|
|
.mldflag2, .resflag2, .opdrflag2, .bezflag2, .finflag2, .insflag2, .besopdrflag2, .resfiat2 { color: #f15854; }
|
|
.mldflag3, .resflag3, .opdrflag3, .bezflag3, .finflag3, .insflag3, .besopdrflag3 { color: #ffd600; }
|
|
.mldflag4, .resflag4, .opdrflag4, .bezflag4, .finflag4, .insflag4, .besopdrflag4 { color: #5da5da; }
|
|
.mldflag5, .resflag5, .opdrflag5, .bezflag5, .finflag5, .insflag5, .besopdrflag5, .resfiat1 { color: #60bd68; }
|
|
.mldflag6, .resflag6, .opdrflag6, .bezflag6, .finflag6, .insflag6, .besopdrflag6 { color: #673ab7; }
|
|
.mldflag7, .resflag7, .opdrflag7, .bezflag7, .finflag7, .insflag7, .besopdrflag7, .resfiat0 { color: #faa43a; }
|
|
.mldflag8, .resflag8, .opdrflag8, .bezflag8, .finflag8, .insflag8, .besopdrflag8 { color: #b276b2; }
|
|
.mldflag9, .resflag9, .opdrflag9, .bezflag9, .finflag9, .insflag9, .besopdrflag9 { color: #b2912f; }
|
|
|
|
.mlds, .ress, .opdrs, .bezs, .fins, .inss, .besopdrs { /* small flags for search use*/
|
|
font-size: 1em;
|
|
vertical-align: inherit;
|
|
}
|
|
.respl { /* small flags for planboard use*/
|
|
font-size: 1em;
|
|
vertical-align: top;
|
|
margin-top: 3px;
|
|
}
|
|
/* headerstyles, usually to be overruled */
|
|
#header
|
|
{
|
|
height: 125px;
|
|
background-position: 0 0;
|
|
}
|
|
|
|
/*
|
|
* OVERZICHTEN. Alle lijsten hebben class rstable
|
|
*/
|
|
#rstable,
|
|
#usermess {
|
|
border-spacing: 0;
|
|
}
|
|
|
|
.rstable
|
|
{
|
|
clear: both;
|
|
border-style: solid;
|
|
border-color: #ccc;
|
|
border-width: 0px 1px 1px 1px;
|
|
width: 100%;
|
|
padding: 3px 3px 3px 3px;
|
|
margin: 0px;
|
|
}
|
|
.rstable tr
|
|
{
|
|
color: var(--textcolor); /* doet niets denk ik */
|
|
vertical-align: top;
|
|
padding-bottom: 2px;
|
|
padding-top: 2px;
|
|
padding-left: 4px;
|
|
padding-right: 2px;
|
|
}
|
|
.rstable td
|
|
{
|
|
color: var(--textcolor);
|
|
border-bottom: 1px solid #eee;
|
|
padding: 4px 3px 7px 3px;
|
|
}
|
|
|
|
.rstable thead th, .rstable tfoot td
|
|
{
|
|
color: var(--tableheadercolor);
|
|
background-color: var(--tableheaderbackgroundcolor);
|
|
font-weight: normal;
|
|
border-right: 1px ridge #ccc;
|
|
white-space: nowrap;
|
|
padding: 2px 3px 2px 3px; /* want tfoot td = th */
|
|
}
|
|
.rstable thead th:first-child, .rstable tfoot td:first-child
|
|
{
|
|
border-left: 1px ridge var(--tableheaderbackgroundcolor);
|
|
}
|
|
.rstable thead th:last-child, .rstable tfoot td:last-child
|
|
{
|
|
border-right: 1px ridge var(--tableheaderbackgroundcolor);
|
|
}
|
|
.rstable tfoot .rsfooter
|
|
{
|
|
padding: 0;
|
|
color: var(--frameheadercolor);
|
|
background-color: var(--frameheaderbackgroundcolor) !important;
|
|
}
|
|
.rstable tr.selectable
|
|
{ /* bijvoorbeeld badgenr */
|
|
cursor: pointer;
|
|
}
|
|
.rstable tbody,
|
|
.table-style tbody {
|
|
background-color: #ffffff;
|
|
}
|
|
.rstable tbody tr:nth-child(odd),
|
|
.table-style tbody tr:nth-child(odd)
|
|
{
|
|
background-color: rgba(0, 0, 0, 0.02);
|
|
}
|
|
.rstable tbody tr:hover
|
|
{
|
|
color: var(--menuitemhovercolor);
|
|
background-color: var(--menuitemhoverbackgroundcolor);
|
|
}
|
|
.rstable.sortable thead
|
|
{
|
|
cursor: pointer;
|
|
}
|
|
.rstable.sortable .clickaction
|
|
{
|
|
cursor: pointer;
|
|
}
|
|
.rstable.sortable tfoot td img
|
|
{
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
/* Voor fin facturen */
|
|
.withinmargin td {
|
|
background-color: rgb(198, 239, 206, 1);
|
|
color: #006100;
|
|
}
|
|
.outsidemargin td {
|
|
background-color: rgb(255, 199, 207);
|
|
color: #9C0006;
|
|
}
|
|
tr.rejected td {
|
|
color: red;
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.tab_mld_materials tr.matline { background-color: #fffffe; /*backgroundcolor*/ border-bottom: #ccc; }
|
|
.tab_mld_uitvoerenden { width: 100%; }
|
|
.tab_mld_uitvoerenden tr.uitvline { background-color: #fffffe; /*backgroundcolor*/ border-bottom: #ccc; }
|
|
|
|
.nowrap { white-space: nowrap;}
|
|
|
|
/* all resulttables can be overruled by their id, like #algtable {} here */
|
|
#resvtabletiny, #resctabletiny {
|
|
width: 55%;
|
|
}
|
|
#beztabletiny { width: 100%; }
|
|
|
|
#faqtable td { padding: 5px 10px 20px 10px;}
|
|
.faqq {
|
|
font-size: 1.1em;
|
|
font-weight: bold;
|
|
}
|
|
.faqa {font-size: 1.1em; font-style: normal;}
|
|
#faqfooter {
|
|
line-height: 25px;
|
|
padding: 4px;
|
|
font-size: 1.1em;
|
|
font-weight: bold;
|
|
}
|
|
#mod_faq {
|
|
min-width:700px;
|
|
}
|
|
#faqsubhead {
|
|
font-size: 1.1em;
|
|
padding-bottom: 8px;
|
|
}
|
|
#faqsolved {
|
|
color: var(--buttoncolor);
|
|
font-size: 1.2em;
|
|
margin-top: 4px;
|
|
}
|
|
.faqantwoord {
|
|
display:none;
|
|
font-size: 1em;
|
|
}
|
|
.faqvraag {
|
|
font-style: normal;
|
|
font-size:1.1em;
|
|
}
|
|
.faqvraag:hover {
|
|
text-decoration: underline;
|
|
}
|
|
#faqanswerlist {
|
|
list-style-type: disclosure-closed; /* in feite een soort chevron */
|
|
}
|
|
#faqanswerlist li {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
|
|
#urg_kritiek1 {color: red;}
|
|
/* flexkenmerken voor alle modules */
|
|
#flextable {
|
|
width: 100%;
|
|
}
|
|
|
|
#besfavtable {
|
|
width: 100%;
|
|
}
|
|
#besfavtable tr td {
|
|
cursor: pointer;
|
|
}
|
|
#besfavtable tr.selected td {
|
|
background-color: #f4d767;
|
|
}
|
|
#besfavtable .disabled {
|
|
color: #A0A0A0;
|
|
}
|
|
|
|
.besischange td, .besischange input {
|
|
background-color: #E6FFBB;
|
|
}
|
|
|
|
.beshaschange td, .beshaschange input {
|
|
color: #606060;
|
|
background-color: #FFEEBB;
|
|
}
|
|
|
|
#prodtable td {
|
|
vertical-align: middle;
|
|
padding: 4px;
|
|
border-bottom: 0;
|
|
}
|
|
#prodtable img {
|
|
height: 100px;
|
|
margin: 0px;
|
|
border-radius:4px;
|
|
}
|
|
|
|
span.rater img {
|
|
height: 16px!important;
|
|
}
|
|
span.rating {
|
|
white-space: nowrap;
|
|
color: gold;
|
|
}
|
|
span.rating:hover i { /* zoals de suggestklikker */
|
|
color: red;
|
|
}
|
|
.prodsrchmess {
|
|
margin: 20px;
|
|
font-size: 1.2em;
|
|
}
|
|
.prodicon {
|
|
color: var(--buttonbackgroundcolor);
|
|
}
|
|
.pscapt {
|
|
font-size: 1.3em;
|
|
font-weight: normal;
|
|
}
|
|
.pscapt:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
tr.expired2 {
|
|
color: #990000 !important;
|
|
}
|
|
input.expired2,
|
|
span.expired2 {
|
|
color: #CC0000 !important;
|
|
font-weight: normal;
|
|
}
|
|
.opdrgtmld {
|
|
color: #C05600 !important;
|
|
font-weight: bold;
|
|
}
|
|
/* for colored rows and others*/ /* PF: ns even aanzien hoe de MS-kleuren uitpakken */
|
|
.cntrappel td, .expired1 td {
|
|
background: linear-gradient(to top, rgb(255, 254, 156), rgb(255, 254, 156));
|
|
color: #9C6500;
|
|
}
|
|
.cntopzeg td, .expired2 td, .mjbexpired td {
|
|
background: linear-gradient(to top, rgb(255, 199, 207), rgb(255, 199, 207)); /*#FFC7CE*/
|
|
color: #9C0006;
|
|
}
|
|
.expired3 td {
|
|
background-color: #F1DCF6;
|
|
}
|
|
.pending td {
|
|
font-weight: 700;
|
|
color: #333;
|
|
}
|
|
.unsolved td {
|
|
background-color: #E4E8F8;
|
|
font-weight: bold;
|
|
}
|
|
.unready td {
|
|
color: #030407;
|
|
font-weight: bold;
|
|
}
|
|
.sleepy td {
|
|
color: #101010;
|
|
background-color: #E0E0E0;
|
|
}
|
|
.orderready td {
|
|
color: #101010;
|
|
background-color: #FFCC88;
|
|
}
|
|
.past td {
|
|
opacity: 0.7;
|
|
}
|
|
.today td {
|
|
font-weight: bold;
|
|
}
|
|
.future td {
|
|
opacity: 0.9;
|
|
}
|
|
.negative {
|
|
color: #AB1455;
|
|
}
|
|
.notperfect td {
|
|
background-color: #E4E8F8;
|
|
}
|
|
.confidential {
|
|
text-transform: uppercase;
|
|
opacity: 0.8;
|
|
}
|
|
tr.resR td {
|
|
background-color: #e8e8e8;
|
|
}
|
|
tr.resC td {
|
|
background-color: #fefefe;
|
|
}
|
|
tr.resV td {
|
|
background-color: #fcfcfc;
|
|
}
|
|
|
|
/* fac_list*/
|
|
/* andere lists */
|
|
tr.editing td,
|
|
tr.updated td {
|
|
background-color: #FDFF9F!important;
|
|
color: var(--textcolor);
|
|
opacity: 1.0;
|
|
}
|
|
tr.updated10 td {
|
|
background-color: #FFFFE1;
|
|
color: var(--textcolor);
|
|
opacity: 1.0;
|
|
}
|
|
tr.updated100 td {
|
|
font-weight: 500;
|
|
color: var(--textcolor);
|
|
opacity: 1.0;
|
|
}
|
|
|
|
tr.updated.dirty td {
|
|
color: #808080
|
|
}
|
|
tr.vervolg {
|
|
border-left: 2px solid #666;
|
|
}
|
|
tr.child {
|
|
background-color: #CBCED2;
|
|
}
|
|
.cntfuture td {
|
|
background-color: #E0E0E0;
|
|
}
|
|
.cntpast td {
|
|
color: #666;
|
|
}
|
|
.cntinactive td {
|
|
background-color: #76b0f7;
|
|
}
|
|
|
|
.divrstable .updated td {
|
|
color: var(--textcolor);
|
|
}
|
|
|
|
#multires {
|
|
color: var(--frameheadercolor);
|
|
font-size: 1.2em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
#resselector { position: relative; }
|
|
#selectedDates {
|
|
margin-left: 3px;
|
|
width: auto; /* uitzondering */
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
outline: 1px solid rgba(52, 63, 77, 0.25); /* Aareon Urban Grey 25% */
|
|
}
|
|
#resselector .buttoncontainer {
|
|
float: right;
|
|
}
|
|
.resreado {
|
|
color: #E40000;
|
|
font-weight: bold;
|
|
}
|
|
#resafhbez span {
|
|
color: var(--textcolor);
|
|
font-weight: bold;
|
|
}
|
|
.facsetreado {
|
|
color: #E40000;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.facmenuheaditem {
|
|
font-weight: bold;
|
|
}
|
|
#rsMaxHistoryB, #rsMaxHistoryE, .resplanbordlimited {
|
|
clear: both;
|
|
padding: 1px 8px 1px 1px;
|
|
margin: 0;
|
|
line-height: 15px;
|
|
font-size: 1em;
|
|
text-align: center;
|
|
background-color: #FFF; /* anders ongewenst transparent */
|
|
}
|
|
|
|
#rsMaxHistoryB a, #rsMaxHistoryE a, .resplanbordlimited a {
|
|
text-decoration: none;
|
|
color: var(--linkcolor);
|
|
}
|
|
#rsMaxHistoryB a:hover, #rsMaxHistoryE a:hover, .resplanbordlimited a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
div.res_remark {
|
|
background-color: #fff;
|
|
border-color: #ddd;
|
|
}
|
|
|
|
#rsEndText {
|
|
color: white;
|
|
background-color: #9C0006;
|
|
font-weight: bold;
|
|
padding: 1px 8px 2px 8px;
|
|
margin: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
#resSummary {
|
|
background-color: yellow;
|
|
padding: 2px;
|
|
}
|
|
|
|
#statusline {
|
|
background-color: yellow;
|
|
color: red;
|
|
width: 100%;
|
|
text-align: center;
|
|
padding: 2px 4px 2px 4px;
|
|
margin: 0;
|
|
}
|
|
|
|
#multilabel{
|
|
color: var(--frameheadercolor);
|
|
line-height: 2em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
#multiactiondiv {
|
|
display: flex;
|
|
visibility: hidden;
|
|
float: left;
|
|
}
|
|
|
|
#phonebookteaser {
|
|
font-size: 0.7em;
|
|
padding-left: 4em;
|
|
}
|
|
#ph_gotoFgraph { text-decoration: underline; cursor: pointer; background-color: transparent; }
|
|
|
|
/* pas op: option's css kent alleen background-color by IE */
|
|
|
|
/* field colors for required fields */
|
|
input.required,
|
|
input[type=text].required,
|
|
input[type=password].required,
|
|
select.required:is([multiple], :not(.no-empty-option)),
|
|
textarea.required
|
|
{
|
|
border-left: 2px solid var(--requiredbordercolor);
|
|
}
|
|
/* but maintain the button properties even if required */
|
|
input[type=button].required, input[type=text].button.required
|
|
{
|
|
background-color:var(--buttonbackgroundcolor);
|
|
border-left: 3px solid var(--requiredbordercolor);
|
|
}
|
|
|
|
input[type=button].required:hover,
|
|
input[type=text].button.required:hover
|
|
{
|
|
color: var(--buttonhovercolor);
|
|
background-color:var(--buttonhoverbackgroundcolor);
|
|
}
|
|
|
|
/* field colors for reqafm fields */
|
|
* html .reqafm,
|
|
*:not(option).reqafm,
|
|
*:not(option).reqafm:focus,
|
|
input.reqafm,
|
|
input[type=text].reqafm,
|
|
input[type=password].reqafm,
|
|
select.reqafm,
|
|
textarea.reqafm
|
|
{
|
|
border-left: 2px solid blue;
|
|
}
|
|
|
|
* html .missing,
|
|
missing,
|
|
input[type=text].required.missing,
|
|
input[type=button].required.missing,
|
|
div[id^=req_].missing > input[type=text].required,
|
|
input[type=button].required.missing,
|
|
input[type=password].required.missing,
|
|
select.required.missing, option.required.missing,
|
|
textarea.required.missing,
|
|
.required.missing {
|
|
background-color: #ff5050 !important;
|
|
color: #fff;
|
|
}
|
|
|
|
input.number.bad,
|
|
input.float.bad,
|
|
input.currency.bad,
|
|
input.flddate.bad,
|
|
input.fldtime.bad,
|
|
input.fldflexC.bad,
|
|
input.fldflexC50.bad {
|
|
background-color: #ffb0b0 !important;
|
|
}
|
|
|
|
input.bad,
|
|
input[type=text].bad,
|
|
textarea.bad {
|
|
background-color: #ffb0b0 !important;
|
|
}
|
|
|
|
div.bad {
|
|
font-weight: bold;
|
|
color: red;
|
|
}
|
|
|
|
input[type=text].nomatch {
|
|
background-color: #FEB0B0;
|
|
}
|
|
|
|
input[type=text].mldres {
|
|
background-color: #EFBF2F;
|
|
}
|
|
|
|
/* datepicker calendar PF: ik twijfel */
|
|
.ui-datepicker td.calselected, .ui-datepicker td.calselected a
|
|
{
|
|
background-color: #E37B00 !important;
|
|
}
|
|
.ui-datepicker-vrije-dag a,
|
|
.ui-datepicker-week-end a {
|
|
color: #FFFFFF;
|
|
font-weight: bold;
|
|
opacity: .35 !important;
|
|
}
|
|
.ui-datepicker-trigger {
|
|
float:left;
|
|
margin: 2px 10px 0 2px;
|
|
}
|
|
|
|
/* handig om dynamisch toe te voegen? */
|
|
.res_nofit_hidden,
|
|
.hidden {
|
|
display: none!important;
|
|
}
|
|
.visible {
|
|
display: block;
|
|
}
|
|
|
|
.label {
|
|
text-align: left;
|
|
vertical-align: text-top;
|
|
margin: 0;
|
|
color: var(--textcolor);
|
|
}
|
|
.orglcl {
|
|
font-style: italic;
|
|
color: var(--textcolor);
|
|
font-size: 0.8em;
|
|
}
|
|
.multi_cb {
|
|
min-width: 20px;
|
|
width: 0.1%;
|
|
}
|
|
td.label.flexsearch {
|
|
width: 250px;
|
|
}
|
|
td.operand_td {
|
|
width: 1px; /* = shrink to fit ? */
|
|
}
|
|
.opdrfooter {
|
|
font-style: italic;
|
|
}
|
|
.score {
|
|
min-width: 275px;
|
|
}
|
|
|
|
#goegel, img.blockrefresh {
|
|
margin: 2px 12px 0 12px;
|
|
color: #fff;
|
|
float: right;
|
|
}
|
|
|
|
div#statusboxes {
|
|
text-align:center;
|
|
line-height:3em;
|
|
float:right;
|
|
}
|
|
|
|
.bezflex {
|
|
/* background-color: #eee; todo */
|
|
margin: 4px;
|
|
}
|
|
|
|
#morebuttons { padding: 0 0 4px 2px; }
|
|
|
|
.bezBezoek {
|
|
border: 2px;
|
|
border-color: red blue;
|
|
}
|
|
|
|
.bezPoolBinnen td {
|
|
color: #006100;
|
|
background-color: #C6EFCE;
|
|
font-weight:bold;
|
|
}
|
|
|
|
.bezPoolLoketself td {
|
|
font-weight:bold;
|
|
}
|
|
.bezPoolLoketother td {
|
|
color: #888;
|
|
}
|
|
|
|
.resflex {
|
|
background-color:#eee;
|
|
margin:4px;
|
|
}
|
|
|
|
#inssymbol {
|
|
width: 96px;
|
|
height: 96px;
|
|
border: 1px solid #ccc;
|
|
}
|
|
.insphotowrap {
|
|
position: fixed;
|
|
}
|
|
.objphoto {
|
|
background-color: #fff;
|
|
border: 1px solid #eee;
|
|
padding: 5px;
|
|
border-radius: 3px;
|
|
max-width: 60px;
|
|
vertical-align:top;
|
|
box-shadow: 3px 3px 3px #eee;
|
|
}
|
|
#insphoto {
|
|
float: right;
|
|
margin-right: 8px;
|
|
width: 96px;
|
|
border: 8px solid #fff;
|
|
box-shadow: 3px 3px 2px #ccc;
|
|
}
|
|
#resphoto {
|
|
width: 218px;
|
|
border: 10px solid #fff;
|
|
border-bottom-width: 40px;
|
|
border-radius: 3px;
|
|
box-shadow: 5px 5px 2px #888;
|
|
cursor: pointer;
|
|
}
|
|
img.ins_deel {
|
|
width: initial;
|
|
max-width: 218px;
|
|
max-height: 218px;
|
|
padding: 5px;
|
|
border: 1px solid #eee;
|
|
box-shadow: 3px 3px 3px #888;
|
|
}
|
|
#resphoto_opstel {
|
|
width: 218px;
|
|
border: 10px solid #fff;
|
|
border-bottom-width: 40px;
|
|
border-radius: 3px;
|
|
box-shadow: 5px 5px 2px #888;
|
|
cursor: pointer;
|
|
}
|
|
.resroominfo {text-align: center;}
|
|
#resdescript, #opstelwarning {
|
|
text-align: left;
|
|
padding-top: 1em;
|
|
font-size: 0.9em;
|
|
line-height: 1.3em;
|
|
}
|
|
#resmakedates, #bezmakedates {
|
|
padding-left: 3px;
|
|
padding-top: 3px;
|
|
font-size: 1.1em;
|
|
}
|
|
#usrrapinfo {
|
|
font-style: italic;
|
|
padding-left: 130px;
|
|
padding-bottom: 16px;
|
|
}
|
|
#fldbehandel, #flddienst {
|
|
color: #ADD8E6;
|
|
}
|
|
.finrtable
|
|
{
|
|
width: 100%;
|
|
}
|
|
|
|
.finrtable img
|
|
{
|
|
cursor: pointer;
|
|
}
|
|
|
|
#cntSplit {height: 264px;}
|
|
select.flddienstfilt { /* de filter van diensten in mldopdr*/
|
|
background-color: #eee;
|
|
}
|
|
|
|
.fldnotresponsive {
|
|
width: 218px !important;
|
|
}
|
|
table#vis_tab {
|
|
width: 100%;
|
|
}
|
|
table#vis_tab .fldflexC {
|
|
width: 218px !important;
|
|
}
|
|
/*
|
|
table#vis_tab .suggest,
|
|
table#vis_tab .suggestBusy,
|
|
table#vis_tab .suggestBad {
|
|
width: 218px !important;
|
|
} vast niet zo !important .. */
|
|
|
|
.productklikker i {
|
|
position: relative;
|
|
z-index: 1;
|
|
right: 20px;
|
|
color: var(--buttonhoverbackgroundcolor);
|
|
cursor: pointer;
|
|
width: 0;
|
|
}
|
|
|
|
/* inputs en suggests: als we deze op een paar na eens allemaal wegflikkerden?
|
|
-> KR: graag, met een schone lei beginnen */
|
|
.mldid, .resid, .besid, .bezid
|
|
{
|
|
text-transform: uppercase;
|
|
font-size: 1.1em;
|
|
}
|
|
tr.mod_xcp .fldcontroletype, tr.mod_xcp .fldsel_srtcontrole, tr.mod_xcp .fldeenheid {
|
|
width: 346px;
|
|
}
|
|
.suggest {
|
|
background-position: right 4px center;
|
|
}
|
|
.fldflexD, .fldSflexD {
|
|
width: 218px;
|
|
}
|
|
|
|
input.button {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Kan weg ?
|
|
#mod_substitutes .button, #rscolpicker .button, #sleRuimteList .button, #prodsearchsearch, #mod_bijlagen .button {
|
|
width: auto;
|
|
} */
|
|
|
|
#template_css .button {
|
|
width: 130px;
|
|
}
|
|
|
|
.fld_tiny,
|
|
.fld_dlvrnr {
|
|
max-width: 50px;
|
|
}
|
|
|
|
/* gekoppelde meldingen zien er als readonly uit */
|
|
.child .card {
|
|
background-color: #CBCED2;
|
|
}
|
|
|
|
/* kennisbank cards met post-it flavour */
|
|
#mldFaq,
|
|
#mldFaqedit {
|
|
background-color: #F7CE5F;
|
|
}
|
|
#mldFaq .card-body,
|
|
#mldFaqedit .card-body {
|
|
background-color: rgba(255, 255, 255, 0.95); /* 95% wit, 5% wat hierboven staat */
|
|
}
|
|
|
|
/* Dit zijn readonly info-.card's */
|
|
#opdrMelding,
|
|
#finInvPartInfo,
|
|
#finRefInfo,
|
|
#bezResAfspraak {
|
|
background-color: #EAEBED;
|
|
}
|
|
|
|
#opdrMelding .card-body,
|
|
#finInvPartInfo .card-body,
|
|
#finRefInfo .card-body,
|
|
#bezResAfspraak .card-body,
|
|
.child .card-body
|
|
{
|
|
background-color: rgba(255, 255, 255, 0.5); /* 50% wit, 50% wat hierboven staat */
|
|
}
|
|
|
|
.mldobj-container {
|
|
background-color: #F5F5F6; /* = 50% #EAEBED */
|
|
}
|
|
|
|
/* note-frames */
|
|
#mldHistorie.card,
|
|
#opdrHistorie.card,
|
|
#insHistorie.card,
|
|
#finHistorie.card,
|
|
#cntHistorie.card
|
|
{
|
|
background-color: transparent; /* anti-bootstrap-default-white */
|
|
}
|
|
#mldHistorie .card-header,
|
|
#opdrHistorie .card-header,
|
|
#insHistorie .card-header,
|
|
#finHistorie .card-header,
|
|
#cntHistorie .card-header
|
|
{
|
|
background-color: var(--notesbackgroundcolor);
|
|
color: #FFF;
|
|
}
|
|
.fcltframe.sidebar
|
|
{
|
|
background: var(--notesbackgroundcolor);
|
|
}
|
|
.fcltframe.sidebar > iframe /* Geeft bovenstaande 40% opacity */
|
|
{
|
|
background-color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
|
|
/* In mobile popup, vooralsnog iets korter voor iPhone */
|
|
.fldtokenmail
|
|
{
|
|
width: 200px;
|
|
}
|
|
.fldmsgsubj, .fldfac_query, .fldhaltnote
|
|
{
|
|
width: 400px;
|
|
}
|
|
.fldstdopmerk
|
|
{
|
|
width: 340px;
|
|
}
|
|
/* Rapport */
|
|
.fldusrrap {
|
|
width: 460px;
|
|
background-position: 448px !important;
|
|
}
|
|
|
|
.flddagbits, .fldweekbits, .flddayofmonth, .flddayofweek {
|
|
width: 109px;
|
|
}
|
|
|
|
.fldobjrestrict {
|
|
font-style: italic;
|
|
}
|
|
|
|
.fldmldhasopm {
|
|
font-style: italic;
|
|
font-weight: bold;
|
|
}
|
|
|
|
#kostenklant, #issuer_search {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.fldfinomsch, .flduitvExist
|
|
{
|
|
width: 400px;
|
|
}
|
|
input.fldtime {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* div = 100% */
|
|
span.input-icon-wrapper { display: inline-block; } /* Wrapt zo strak om de input heen (zonder inline-spacing) */
|
|
div.input-icon-wrapper { display: block; } /* Overbodig maar ter verduidelijking */
|
|
|
|
.input-icon-wrapper > .dateklikker,
|
|
.input-icon-wrapper > .timeklikker,
|
|
.input-icon-wrapper > .default-clickable-icon {
|
|
position: absolute;
|
|
display: flex;
|
|
font-size: 1.2em;
|
|
z-index: 1;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
right: 0.2em;
|
|
color: #7B7B7B;
|
|
cursor: pointer;
|
|
}
|
|
.input-icon-wrapper input[type=color] {
|
|
height: 27px; /* = default line-height */
|
|
padding-right: 2em;
|
|
}
|
|
input[type=color].unsupported + .default-clickable-icon {
|
|
display: none;
|
|
}
|
|
|
|
.dateklikker:hover > i,
|
|
.timeklikker:hover > i {
|
|
color: var(--buttonhoverbackgroundcolor);
|
|
font-weight: 900;
|
|
}
|
|
|
|
.flddatetime, .fldresstatus, #existingDates, #newDates, .fldmsgprio, .fldafspnum, .flddeel, .fldcnttarief {
|
|
width: 140px;
|
|
}
|
|
|
|
.fldregime {
|
|
width: 210px;
|
|
}
|
|
|
|
.fldmatamount, .fldmatprice, .fldmattotal {
|
|
text-align: right;
|
|
}
|
|
|
|
.fldfinbedrag, .fldfinamount {
|
|
width: 75px;
|
|
text-align:right;
|
|
}
|
|
|
|
.fldfinunit, .fldfinartcode {
|
|
width: 75px;
|
|
}
|
|
|
|
.fldtxt, .fldresroomchange, .flddatechange, .fldcntperiod /*todo*/
|
|
{
|
|
width: 100%;
|
|
}
|
|
|
|
.fld_catamount,
|
|
.fldmlduren,
|
|
.fldmldkosten,
|
|
.fldmldurentotal {
|
|
width: 4em !important;
|
|
}
|
|
#fldmldurentotal.afwijk {
|
|
color: red;
|
|
}
|
|
.fldtotalbtw.afwijk {
|
|
color: red;
|
|
}
|
|
.fldexturl {
|
|
color: red;
|
|
}
|
|
.fldfacrefresh {
|
|
font-size: 2em;
|
|
font-weight: bold;
|
|
color: #cc0000;
|
|
}
|
|
|
|
/* haltewerkzaamheden: jaar, km,
|
|
bestellingen: retour */
|
|
.fldjaar, .fldkm, .fldmaterialen, .fldretour {
|
|
width: 40px;
|
|
text-align:right;
|
|
}
|
|
|
|
/* haltewerkzaamheden weeknummer */
|
|
.fldweeknr {
|
|
width: 20px;
|
|
}
|
|
|
|
.btwdiv {
|
|
width: 100px;
|
|
}
|
|
|
|
/* objectkeuze modal, nogal wat op af te dingen */
|
|
#fldobjExist {
|
|
height: 200px;
|
|
}
|
|
.mldobj-container {
|
|
min-height: 180px;
|
|
padding: 2px;
|
|
}
|
|
.mldobj-info-wrapper {
|
|
font-size: .9em;
|
|
line-height: 1.2em;
|
|
}
|
|
.mldobj-has-photo {
|
|
min-height: 100px;
|
|
height: calc(100% - 1.3em);
|
|
background-position: right;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
/* background-image-url wordt inline gezet want komt uit de DB */
|
|
}
|
|
.mldobj-has-photo .mldobj-info {
|
|
background: rgba(255, 255, 255, 0.7);
|
|
transition: background 150ms ease-out;
|
|
}
|
|
.mldobj-info {
|
|
margin: 8px;
|
|
border-radius: 4px;
|
|
padding: 4px 6px;
|
|
}
|
|
.mldobj-info td {
|
|
vertical-align: inherit;
|
|
}
|
|
.mldobj-has-photo:hover .mldobj-info {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
}
|
|
#lcllink
|
|
{
|
|
cursor:pointer;
|
|
background-color: #ff00ff;
|
|
}
|
|
|
|
div#lcldialect .label
|
|
{
|
|
width: auto;
|
|
}
|
|
.color-preview {
|
|
line-height: 1.3em;
|
|
}
|
|
.scf-color-preview {
|
|
display: inline-block;
|
|
margin-top: 0.2em;
|
|
}
|
|
.rstable .normal-padding {
|
|
padding: 0 1px 1px 2px;
|
|
}
|
|
.iteminfo2 {
|
|
font-weight: bold;
|
|
}
|
|
.iteminfo1 {
|
|
font-weight: bold;
|
|
}
|
|
.iteminfo3 {
|
|
font-style: italic;
|
|
}
|
|
.besitemflex
|
|
{
|
|
margin-left:10px;
|
|
color: #888
|
|
}
|
|
.besitemstotal td {
|
|
font-weight: bold;
|
|
}
|
|
.besphoto {
|
|
width: 100px;
|
|
border: 8px solid #fff;
|
|
box-shadow: 3px 3px 2px #ccc;
|
|
}
|
|
.besartbtns {
|
|
text-align: center;
|
|
}
|
|
|
|
.addsub
|
|
{
|
|
float: left;
|
|
text-align:left;
|
|
}
|
|
.besdetailtd {
|
|
border: 0px solid #ccc;
|
|
vertical-align: top;
|
|
padding: 4px;
|
|
box-shadow: 3px 3px 2px #ccc;
|
|
}
|
|
.besdetailtable {
|
|
width: 100%;
|
|
}
|
|
|
|
tr.flexlabel { /* Overrule de standaard labelkleur */
|
|
background-color: var(--flexlabelbackgroundcolor);
|
|
}
|
|
tr.flexlabel td,
|
|
tr.flexlabel td label {
|
|
color: var(--flexlabelcolor);
|
|
}
|
|
/* prototype alext */
|
|
td.flexlabel.nohint {
|
|
display: table-cell;
|
|
overflow: visible;
|
|
}
|
|
td.flexlabel.nohint > label {
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
}
|
|
td.flexlabel label {
|
|
font-weight: bold;
|
|
}
|
|
.readonly.flexvalue {
|
|
padding-top: 2px !important;
|
|
}
|
|
/* Oude Blanco-kenmerk, nu een newline */
|
|
.flexspacer {
|
|
margin-top: 1px;
|
|
}
|
|
tr.faqcollapsable td,
|
|
tr.flexcollapsable td {
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* edit pencil 66057 */
|
|
.wrapper-span {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.image-edit {
|
|
position: absolute;
|
|
padding: 2px 5px;
|
|
border-radius: 50%;
|
|
height: 2.1em;
|
|
text-align: center;
|
|
background-color: white;
|
|
opacity: 0.8;
|
|
margin-left: -1.8em;
|
|
}
|
|
|
|
.wrapper-span:hover .image-edit {
|
|
background-color: var(--buttonbackgroundcolormediumlow);
|
|
}
|
|
|
|
.wrapper-span .image-edit:hover {
|
|
opacity: 1;
|
|
color: var(--buttonhovercolor);
|
|
background: var(--buttonhoverbackgroundcolor) radial-gradient(circle, transparent 1%, var(--buttonhoverbackgroundcolor) 1%) center/15000%;
|
|
}
|
|
|
|
body.showmode .lhint {
|
|
background-image: none;
|
|
}
|
|
label.expression.flexexpr, .expression.flexexpr {
|
|
font-style: italic;
|
|
}
|
|
.fldflexN, .fldSflexN {
|
|
width: 100px;
|
|
}
|
|
.fldflexF.missing, .fldflexE.missing {
|
|
color: #ff5050;
|
|
}
|
|
.fldflexR.inactive, .fldflexS.inactive {
|
|
color: #FF4301;
|
|
}
|
|
.operand {
|
|
background-color: #E1E894;
|
|
vertical-align: top;
|
|
width: 90px;
|
|
border: 1px solid transparent; /* Focus heeft ook 1px border */
|
|
margin-right: 2px;
|
|
text-align: center;
|
|
}
|
|
|
|
span.besprijsup {
|
|
color:red;
|
|
}
|
|
span.besprijsdown {
|
|
color:green;
|
|
}
|
|
|
|
tr.unauthorized {
|
|
background-color:#ddd;
|
|
color: red;
|
|
}
|
|
|
|
#plaatsselect {
|
|
border: 0px green solid;
|
|
margin: 0;
|
|
}
|
|
|
|
/* left-to-right and right-to-left selectors */
|
|
#mldFrame { height: 800px; }
|
|
/* for modal-like tabs*/
|
|
.likemodal {
|
|
background-color: #fffffe; /*backgroundcolor*/
|
|
margin: 10px 20px 0 20px;
|
|
}
|
|
|
|
body.likemodal {
|
|
box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
|
|
}
|
|
|
|
/* styling for modal (popup) forms */
|
|
body.modal {
|
|
padding: 2px 4px 0 4px;
|
|
}
|
|
/* blokken in modal altijd 100% */
|
|
body.modal .flexblock {
|
|
max-width: 100%;
|
|
flex-basis: 100%;
|
|
}
|
|
|
|
.modal th {
|
|
background-color: var(--frameheaderbackgroundcolor);
|
|
color: var(--frameheadercolor);
|
|
border-right: 1px solid #ccc;
|
|
}
|
|
#bes_add_fav {min-width: 500px;}
|
|
#besrejectbody {min-width:500px;}
|
|
#fac_like {min-width:600px;}
|
|
#localebody {min-width:800px;}
|
|
#mld_opdrejectbody {min-width:600px;}
|
|
#mod_acceptofferte {min-width:600px;}
|
|
#mod_algfaq {min-width:500px;}
|
|
#mod_algmultiedit {min-width:500px; height:250px;}
|
|
#mod_authQR {min-width:500px; width:650px;}
|
|
#mod_bes_kenmerk {min-width:600px;}
|
|
#mod_beslever {min-width:800px;}
|
|
#mod_besprijs {min-width:350px;}
|
|
#mod_besretour {min-width:600px;}
|
|
#mod_besweging {min-width:500px;}
|
|
#mod_bezcheckin {min-width:600px;}
|
|
#mod_bezmultiedit {min-width:500px; height:250px;}
|
|
#mod_bijlagen {min-width:600px;}
|
|
#mod_caddoorvoeren {min-width:500px;}
|
|
#mod_changecnttype {min-width:450px;}
|
|
#mod_changeopdrtype {min-width:450px;}
|
|
#mod_cntsplit .label {min-width: 180px;}
|
|
#mod_cntsplit {min-width:500px;}
|
|
#mod_dubrejectbody {min-width:600px;}
|
|
#mod_edit_prs_modal {min-width: 600px;}
|
|
#mod_favorites {min-width: 550px;}
|
|
#mod_grprecht {min-width: 600px;}
|
|
#mod_history {height: 300px;}
|
|
#mod_impbezoekers {min-width:800px;}
|
|
#mod_impinlezen { min-width: 500px; }
|
|
#mod_impverwerken { min-width: 500px; }
|
|
#mod_insmultiedit {min-width:500px;height:250px;}
|
|
#mod_insxcp {min-width:800px;}
|
|
#mod_insxcpmultiedit {min-width:500px;height:250px;}
|
|
#mod_mjbinclscen {min-width:600px; min-height: 120px;}
|
|
#mod_mldaccept {min-width:500px;}
|
|
#mod_mldcancelworkflow {min-width:600px;}
|
|
#mod_mldclose {min-width:600px;}
|
|
#mod_mldcontinue {min-width:600px;}
|
|
#mod_mlddouble {min-width:800px;}
|
|
#mod_mldfixsla {min-width:500px;}
|
|
#mod_mldforward {min-width:600px;}
|
|
#mod_mldmat {min-width:900px;}
|
|
#mod_mldobj {min-width:900px;}
|
|
#mod_mldshiftdate {min-width:550px;}
|
|
#mod_mldstdmsrtruimte {min-width:500px;}
|
|
#mod_nieuws {min-width:800px;}
|
|
#mod_movewerkplek { min-width: 500px; }
|
|
#mod_noshow {min-width:500px;}
|
|
#mod_opdraccept {min-width:540px; height: 260px;}
|
|
#mod_opdrcancel {min-width:600px;}
|
|
#mod_opdrclose {min-width:540px; height: 260px;}
|
|
#mod_opdrejectbody {min-width:600px;}
|
|
#mod_pass2mail {min-width:500px;}
|
|
#mod_perslidwerkplek {min-width:500px;}
|
|
#mod_pnotes {min-width:500px;}
|
|
#mod_preview {min-width:600px;}
|
|
#mod_prs_pwdchange {min-width:700px;}
|
|
#mod_prsinzetbaar {min-width:500px;}
|
|
#mod_prsmultiedit { min-width: 520px; }
|
|
#mod_queuemail {min-width:600px;}
|
|
#mod_rejectbody {min-width:600px;}
|
|
#mod_rejectoffertebody {min-width:600px;}
|
|
#mod_req_move {min-width:500px;}
|
|
#mod_req_move2 {min-width:500px;}
|
|
#mod_req_move3 {min-width:500px;}
|
|
#mod_res_selectroom {min-width:600px;}
|
|
#mod_resafwijzen {min-width:650px; height: 250px;}
|
|
#mod_resdelete {min-width:500px;}
|
|
#mod_resmulti_save {min-width:500px;}
|
|
#mod_respool {min-width:600px;}
|
|
#mod_resupdateobj {min-width:500px;}
|
|
#mod_resupdateroom {min-width:500px;}
|
|
#mod_ruimteafdeling {min-width:700px;}
|
|
#mod_ruimtefunctie {min-width:650px; height:40px;}
|
|
#mod_ruimteresscope {min-width:500px;}
|
|
#mod_selfreg {min-width:410px;}
|
|
#mod_signature { height: 320px; }
|
|
#mod_stdmeldingfaq .label {min-width: 0px;}
|
|
#mod_stdmeldingfaq {min-width:500px;}
|
|
#mod_substitutes {min-width: 500px;}
|
|
#mod_tekedit {min-width:500px;}
|
|
#mod_token2mail {min-width:250px;}
|
|
#mod_mlduitv {min-width:800px;}
|
|
#mod_urenremarkbody {min-width:500px;}
|
|
#mod_wfexpression { min-width: 700px; }
|
|
#prjeditbezet { min-width: 800px; }
|
|
|
|
/* modals met buttons. zouden ook een class buttonmodal oid mogen krijgen ipv stylen per id */
|
|
#act_modal { min-width: 300px; max-height: 80vh !important; overflow-y: scroll;}
|
|
|
|
.modal.scaffolding {min-width:500px;}
|
|
body#mod_resmulti { min-width: 690px; }
|
|
body.mod_edit_mandate {min-width:500px;}
|
|
|
|
#mod_resmulti div#List.inside { min-height: 490px;}
|
|
body#mod_resmulti div#show_date_from {
|
|
min-height: 250px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
div#mldsimilar { padding: 4px 4px 4px 10px; }
|
|
#prjeditbezet .label {
|
|
width: auto !important;
|
|
min-width: auto !important;
|
|
}
|
|
|
|
body.modal table.fcltblocktab > tbody tr td.label label {
|
|
display: inline-block;
|
|
max-width: 100%;
|
|
padding-right: 0;
|
|
}
|
|
|
|
#hinter {
|
|
background-color: #eee092;
|
|
}
|
|
#hinter #hinttext {
|
|
font-size: 1em;
|
|
line-height: 1.5;
|
|
}
|
|
/* ==== menu styles ==== */
|
|
/* voor de tabjes boven het menu */
|
|
#maintabs .ui-tabs-anchor {
|
|
padding: 0.45em 0.8em !important; /* durven we deze weg te laten? keuze */
|
|
font-family: var(--fontfamily_titles);
|
|
font-weight: 600;
|
|
font-size: 1.05em;
|
|
}
|
|
#frametabs .ui-tabs-anchor {
|
|
font-family: var(--fontfamily_titles);
|
|
}
|
|
|
|
div#menu {
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: auto;
|
|
}
|
|
|
|
.scrollTopTab {
|
|
position: fixed;
|
|
display: flex;
|
|
align-content: center;
|
|
top: 0;
|
|
left: 50%;
|
|
width: 3rem;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 2;
|
|
overflow: hidden;
|
|
background-color: white;
|
|
border: 2px solid grey;
|
|
border-bottom-right-radius: 15px;
|
|
border-bottom-left-radius: 15px;
|
|
transition: opacity 150ms ease-in-out,
|
|
margin-top 50ms ease-in-out;
|
|
opacity: 0;
|
|
margin-top: 0.9em;
|
|
}
|
|
|
|
.scrollTopTab:hover {
|
|
margin-top: 1.3em;
|
|
}
|
|
|
|
.scrollTopTab.scrolled {
|
|
opacity: 1;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Merk op dat heel veel afmetingen hieronder alleen zijn
|
|
voor een initieel rustiger beeld. Vooral frheader.height
|
|
en menutabs.width hebben echt effect */
|
|
div#frheader{
|
|
height: 75px;
|
|
width: 100%;
|
|
line-height: 1.2em;
|
|
}
|
|
div#topdivider{
|
|
position: absolute;
|
|
height: 1px;
|
|
width: 100%;
|
|
z-index: 2;
|
|
cursor: pointer;
|
|
background-color: var(--dividercolor);
|
|
}
|
|
div#topdivider.dividerclosed{
|
|
height: 0px;
|
|
}
|
|
div#menutabs {
|
|
position: absolute;
|
|
left: 0px;
|
|
width: 257px; /* Wordt vergroot naar behoefte, nooit verkleind */
|
|
top: 82px;
|
|
border: 0;
|
|
}
|
|
div#menutabs ul {
|
|
border: 0;
|
|
}
|
|
div.ui-tabs-submenu {
|
|
position: absolute;
|
|
min-width: 180px;
|
|
z-index: 102; /* div#loggers + 1 */
|
|
}
|
|
|
|
div#menudivider{
|
|
position: absolute;
|
|
left: 259px;
|
|
height: 400px;
|
|
width: 1px;
|
|
border: 0px;
|
|
z-index: 2;
|
|
cursor: pointer;
|
|
background-color: var(--dividercolor);
|
|
}
|
|
|
|
div#maintabs{
|
|
position: absolute;
|
|
left: 265px;
|
|
height: 400px;
|
|
top: 82px;
|
|
width: 800px;
|
|
border: 0px;
|
|
}
|
|
|
|
|
|
.toggler {
|
|
position: absolute;
|
|
background-color: var(--dividercolor);
|
|
z-index: 10;
|
|
border: 1px solid grey;
|
|
cursor: pointer;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
#menutoggler {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 22px;
|
|
width: 13px;
|
|
right: 1px;
|
|
border-right: 0px;
|
|
border-radius: 3px 0px 0px 3px;
|
|
transition: background-color 75ms ease-in-out;
|
|
}
|
|
#menutoggler:hover {
|
|
background-color:white;
|
|
}
|
|
#menudivider.dividerclosed #menutoggler {
|
|
left: 0px;
|
|
border-right: 1px solid gray;
|
|
border-left: 1px;
|
|
border-radius: 0px 3px 3px 0px;
|
|
}
|
|
/* headtoggler lijkt initieel niet zichtbaar, is dat de bedoeling? KR -> Ja, maar je ziet stiekem en onbedoeld toch een paar pixels. */
|
|
#headtoggler {
|
|
height: 13px;
|
|
width: 18px;
|
|
top: -14px;
|
|
left: 5px;
|
|
display:none;
|
|
border-bottom: 0px;
|
|
border-radius: 3px 3px 0px 0px;
|
|
}
|
|
#headtoggler:hover {
|
|
background-color:white;
|
|
}
|
|
#topdivider.dividerclosed #headtoggler {
|
|
display: flex;
|
|
top: 0px;
|
|
border: 1px solid gray;
|
|
border-top: 0px;
|
|
border-radius: 0px 0px 3px 3px;
|
|
}
|
|
|
|
/* ook strak tegen de randen */
|
|
.ui-tabs {
|
|
padding: 0;
|
|
}
|
|
/* Menu-items tegen linkerkant */
|
|
.ui-tabs .ui-tabs-panel {
|
|
padding: 0; /* 2px padding vervangen door div.menuHeadSpacer */
|
|
}
|
|
|
|
.ui-tabs-nav .ui-tabs-tab {
|
|
border-radius: 0.25rem 0.25rem 0 0;
|
|
margin-right: 0.125rem;
|
|
}
|
|
|
|
div#menutabs .ui-layout-content {
|
|
background-image: none; /* Wit blok halverwege menu weghalen */
|
|
background-color: var(--menubackgroundcolor);
|
|
}
|
|
|
|
div#menutabs li.ui-state-active {
|
|
background-image: none; /* Wit blok halverwege menu weghalen */
|
|
}
|
|
|
|
#menutabs .ui-menu-tabs ul,
|
|
#menutabs .ui-layout-content ul {
|
|
padding: 0px;
|
|
margin: 0px;
|
|
}
|
|
|
|
.ui-tabs-submenu ul {
|
|
padding: 0px;
|
|
margin: 0px;
|
|
}
|
|
|
|
#menutabs .ui-layout-content ul li,
|
|
#menutabs .ui-tabs-submenu ul li,
|
|
#menutabs .ui-menu-tabs ul li {
|
|
list-style: none;
|
|
}
|
|
.menutab { /* die max 3 paneltabs, om het smaller te houden? */
|
|
font-family: var(--fontfamily_alt);
|
|
}
|
|
div#ProfFAC ul li.mi,
|
|
div#PersFAC ul li.mi,
|
|
div#MgtFAC ul li.mi {
|
|
font-family: var(--fontfamily_alt);
|
|
color: var(--menucolor);
|
|
background-color: var(--menubackgroundcolor);
|
|
}
|
|
#menutabs span.menukop
|
|
{
|
|
color: var(--menucolor);
|
|
}
|
|
#menutabs span.micon
|
|
{
|
|
color: var(--menuiconcolor);
|
|
}
|
|
#menutabs span.menukop {
|
|
font-size: 1.15em;
|
|
}
|
|
|
|
span.menulabel,
|
|
span.menukop {
|
|
background-repeat:no-repeat;
|
|
background-position:left;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
span.menulinkkop {
|
|
cursor: pointer;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* deze is voor kop en item */
|
|
li.mk {
|
|
border-bottom: none;
|
|
border-top: 1px solid #eee;
|
|
cursor: pointer;
|
|
line-height: 3.1em;
|
|
padding: 1px 4px 4px 4px;
|
|
}
|
|
li.mk[onClick] {
|
|
display: flex;
|
|
gap: .5em;
|
|
}
|
|
li.mk:hover {
|
|
background-color: var(--menukophoverbackgroundcolor)!important;
|
|
}
|
|
li.mk:hover span.menukop,
|
|
li.mk:hover span.micon,
|
|
.withaction:hover i
|
|
{
|
|
color: var(--menukophovercolor)!important;
|
|
}
|
|
.withaction { cursor: pointer; }
|
|
|
|
li.mi {
|
|
font-size: 0.9em;
|
|
line-height: 1.85em;
|
|
background-color: transparent;
|
|
opacity: 1;
|
|
}
|
|
li.mi[data-value]::before {
|
|
content: attr(data-value);
|
|
display: block;
|
|
font-weight: bold;
|
|
height: 0px;
|
|
overflow: hidden;
|
|
visibility: hidden;
|
|
}
|
|
.menuDropdown li.mi {
|
|
color:var(--menuitemhovercolor) !important;
|
|
background-color:var(--menuitemhoverbackgroundcolor) !important;
|
|
}
|
|
.mkimg, .mimg {
|
|
border: 0;
|
|
padding: 0;
|
|
margin-right: 2px;
|
|
margin-left: -10px;
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
li.mklogo img {
|
|
border: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.micon, .nomicon, .tabicon {
|
|
width: 1.25em; /* evenals de fa-fw */
|
|
margin: 0 4px 0 0;
|
|
vertical-align: middle;
|
|
font-size: 2em;
|
|
}
|
|
|
|
.nomicon, .tabicon {
|
|
aspect-ratio: 1;
|
|
display: inline-block;
|
|
text-align: center;
|
|
line-height: 1.3em;
|
|
}
|
|
|
|
.micon:hover, .nomicon:hover {
|
|
transition: transform 0.5s;
|
|
transform: scale(1.2, 1.2);
|
|
}
|
|
.nomicon, .tabicon {
|
|
background-color: var(--frameheaderbackgroundcolor);
|
|
border-radius: 2px;
|
|
opacity: 0.8;
|
|
}
|
|
.tabicon {
|
|
vertical-align: text-bottom;
|
|
}
|
|
|
|
.nomicon:hover {
|
|
opacity: 1;
|
|
}
|
|
i.miconimg {
|
|
color: var(--menuitemcolor) !important;
|
|
}
|
|
.menupinned {
|
|
float: right;
|
|
display: none;
|
|
}
|
|
li.mi:hover span.menupinned
|
|
{
|
|
display: inline;
|
|
}
|
|
|
|
li.mi {
|
|
cursor: pointer;
|
|
}
|
|
#menutabs li.mi:hover {
|
|
color:var(--menuitemhovercolor) !important;
|
|
background-color:var(--menuitemhoverbackgroundcolor) !important;
|
|
}
|
|
.widget-type-mk li.mi:hover,
|
|
#portalmenu li.mi:hover {
|
|
color: var(--linkcolor);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.guicnt {
|
|
font-size: 0.6em;
|
|
color: #888;
|
|
}
|
|
|
|
#menutabs .ui-layout-content ul li li {
|
|
font-weight: normal;
|
|
color: var(--menuitemcolor);
|
|
background-color: var(--menuitembackgroundcolor);
|
|
list-style: none;
|
|
border-top: 1px solid #eee;
|
|
padding: 2px 0 3px 32px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
#menutabs .ui-tabs-submenu ul {
|
|
border-left: 1px solid #ddd;
|
|
box-shadow: 2px 2px #ccc;
|
|
}
|
|
|
|
#menutabs .ui-tabs-submenu ul li {
|
|
font-weight: normal;
|
|
color: var(--menuitemcolor);
|
|
background-color: var(--menuitembackgroundcolor);
|
|
list-style: none;
|
|
border-top: 1px solid #ddd;
|
|
padding: 0px 3px 1px 3px;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#menutabs .ui-tabs-submenu ul.menuDropDown li {
|
|
background-color:var(--menuitembackgroundcolor) !important;
|
|
padding: 4px 4px 4px 8px;
|
|
cursor: pointer;
|
|
}
|
|
#menutabs .ui-tabs-submenu ul.menuDropDown li:hover {
|
|
color:var(--menuitemhovercolor) !important;
|
|
background-color:var(--menuitemhoverbackgroundcolor)!important;
|
|
}
|
|
#menutabs .ui-tabs-submenu ul.menuDropDown li.mks {
|
|
list-style: none;
|
|
display: list-item;
|
|
background-color: var(--menukophoverbackgroundcolor)!important;
|
|
color: var(--menukophovercolor)!important;
|
|
border-top: 1px solid #ddd;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
padding: 4px 4px 4px 8px;
|
|
border-bottom: none;
|
|
line-height: 2.1em;
|
|
cursor: default;
|
|
}
|
|
|
|
.mklogo .fa-fw,
|
|
.milogo .fa-fw {
|
|
color: var(--menuiconcolor);
|
|
}
|
|
|
|
.rate.fa-star, .rate.fa-star-o {
|
|
color: #FFA500;
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
.rate.fa-question-circle {
|
|
color: #51768F;
|
|
font-size: 1.4em;
|
|
}
|
|
span.hint {
|
|
color: var(--buttonbackgroundcolor);
|
|
/* float: right; Niet meer nodig dan toch? */
|
|
cursor: auto;
|
|
line-height: inherit;
|
|
font-size: 1.3em;
|
|
cursor: help;
|
|
}
|
|
span.hint:hover {
|
|
color: var(--buttonhoverbackgroundcolor);
|
|
}
|
|
|
|
/* TODO, minstens wat padding, prominenter. Zo? */
|
|
td > .bezflex td:first-child {
|
|
min-width: 375px;
|
|
}
|
|
tr[id^=trbez]:not([id$=flex]) span > i.fa-fw {
|
|
font-size: 1em;
|
|
cursor: pointer;
|
|
color: var(--buttoncolor);
|
|
background-color: var(--buttonbackgroundcolor);
|
|
line-height: 2em;
|
|
width: 2em;
|
|
}
|
|
tr[id^=trbez]:not([id$=flex]) span > i.fa-fw:hover {
|
|
color: var(--buttonhovercolor);
|
|
background-color: var(--buttonhoverbackgroundcolor);
|
|
}
|
|
|
|
.flikeopts li i
|
|
{
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
/* workplace reservations */
|
|
th.placephoto {
|
|
width: 90px;
|
|
}
|
|
td.placephoto img {
|
|
max-width: 80px;
|
|
max-height: 80px;
|
|
}
|
|
|
|
#iconbody .iconmenu,
|
|
#iconbody .res-flex-recent {
|
|
width: 20%;
|
|
height: 50vw; /* halve hoogte */
|
|
}
|
|
#iconbody .iconmenu .iconitem,
|
|
#iconbody .res-flex-recent .res-flex-recent-card {
|
|
border: 2px solid #666;
|
|
}
|
|
|
|
/* voor iconmenu */
|
|
td.iconmenu {
|
|
font-size: 1em;
|
|
text-align:center;
|
|
padding-bottom: 12px;
|
|
vertical-align: top;
|
|
cursor: pointer;
|
|
}
|
|
|
|
td.iconmenu h3 {
|
|
font-weight: normal;
|
|
}
|
|
td.iconmenu img, td.bessrtdeelfoto img {
|
|
width: 100px;
|
|
height: 100px;
|
|
padding: 5px;
|
|
border: 1px solid #ffffff;
|
|
}
|
|
td.bessrtdeelfoto {
|
|
text-align: center;
|
|
}
|
|
|
|
.iprdvg { /* Product catalogus naam */
|
|
display: block;
|
|
font-size: 0.8em;
|
|
font-weight: bold;
|
|
}
|
|
.iprs { /* Prijs */
|
|
white-space: nowrap;
|
|
margin-left: 0.5rem;
|
|
/* font-size: 0.9em; */
|
|
}
|
|
.ieenh { /* Eenheid */
|
|
display: none;
|
|
}
|
|
.iopm { /* Artikel opmerking */
|
|
font-size: 10px;
|
|
line-height: 12px;
|
|
}
|
|
|
|
/* portalmenu */
|
|
.widget-type-mk,
|
|
.widget-type-mi,
|
|
#portalmenu {
|
|
text-align: center;
|
|
background-image: var(--portalmenubgimage);
|
|
background-size: cover;
|
|
}
|
|
.widget-type-mi {
|
|
padding: 6px;
|
|
}
|
|
#portalmenu h2 {
|
|
font-size: 2em;
|
|
color: var(--portalkopcolor);
|
|
margin: 4px;
|
|
padding: 9px 1px 5px 1px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.widget-type-mk div.row,
|
|
#portalmenu div.row {
|
|
padding-top: 0;
|
|
padding-bottom: 6px;
|
|
}
|
|
.widget-type-mk div.row:first-child,
|
|
#portalmenu div.row:first-child {
|
|
padding-top: 6px;
|
|
}
|
|
|
|
.widget-type-mk div.col,
|
|
#portalmenu div.col {
|
|
padding-left: 0;
|
|
padding-right: 6px;
|
|
}
|
|
.widget-type-mk div.col:first-child,
|
|
#portalmenu div.col:first-child {
|
|
padding-left: 6px;
|
|
}
|
|
.widget-type-mk .container-fluid,
|
|
.widget-type-mk .row {
|
|
height: 100%;
|
|
}
|
|
|
|
#portalmenu .menu-kop-content,
|
|
.widget-type-mk .menu-kop-content,
|
|
.widget-type-mi .menu-item-content
|
|
{
|
|
height: 100%;
|
|
text-align: left;
|
|
border: 1px solid #f1f1f1;
|
|
padding: 1em;
|
|
vertical-align: top;
|
|
background-color: rgba(255, 255, 255, 0.95);
|
|
box-shadow: 1px 1px 20px #ccc;
|
|
background-image: var(--portalmenucardbgimage);
|
|
background-position: top right;
|
|
background-repeat: no-repeat;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.widget-menu-item,
|
|
.widget-menu-kop {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
}
|
|
.widget-menu-image {
|
|
display: flex;
|
|
height: 100%;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
#portalmenu span.menukop,
|
|
.widget-type-mk span.menukop,
|
|
.widget-type-mi span.menulabel {
|
|
background-image: none;
|
|
color: var(--textcolor);
|
|
font-weight: bold;
|
|
font-size: 1.5em; /* dapper?*/
|
|
cursor: default;
|
|
margin: 0;
|
|
padding: 8px 1px 8px 0px;
|
|
}
|
|
|
|
.widget-type-mk ul,
|
|
#portalmenu ul {
|
|
margin: 0 0 5px 0;
|
|
padding: 0 0 0 0;
|
|
}
|
|
.widget-type-mk li.mi,
|
|
#portalmenu li.mi {
|
|
font-size: 1.2em;
|
|
line-height: 1.3em;
|
|
list-style: none;
|
|
}
|
|
.widget-type-mk li.more,
|
|
#portalmenu li.more {
|
|
font-size: 0.9em;
|
|
cursor: pointer;
|
|
color: #004f80;
|
|
}
|
|
.widget-type-mk a,
|
|
#portalmenu a {
|
|
color: var(--textcolor);
|
|
text-decoration: none;
|
|
}
|
|
.widget-type-mk a:hover,
|
|
.widget-type-mk .more:hover,
|
|
#portalmenu a:hover,
|
|
#portalmenu .more:hover {
|
|
color: var(--linkhovercolor);
|
|
}
|
|
#portalmenu span.menuimg,
|
|
.widget-type-mk span.menuimg,
|
|
.widget-type-mi .menuimg {
|
|
font-size: 13px;
|
|
font-weight: bold;
|
|
line-height: 100px;
|
|
height: calc(100px + 1em); /* 1em voor inline spacing */
|
|
display: block;
|
|
float: left;
|
|
}
|
|
#portalmenu span.menuimg {
|
|
width: calc(100px - 1.5em);
|
|
}
|
|
.widget-type-mk span.menuimg,
|
|
.widget-type-mi .menuimg {
|
|
min-width: 100px;
|
|
max-width: 95%;
|
|
text-align: center;
|
|
}
|
|
.widget-type-mk span.menuimg li.mi,
|
|
#portalmenu span.menuimg li.mi {
|
|
font-weight: normal;
|
|
}
|
|
.widget-type-mk div.portalmenukop,
|
|
#portalmenu div.portalmenukop {
|
|
max-width: calc(100% - 100px);
|
|
padding-left: 0.5em;
|
|
padding-right: 0.5em;
|
|
float: left;
|
|
background-color: rgba(255, 255, 255, 0); /* Voor leesbaarheid, uitgezet */
|
|
border-radius: 5px;
|
|
}
|
|
#portalmenu div.portalmenukop {
|
|
margin-left: 1.5em;
|
|
}
|
|
.widget-type-mk div.portalmenukop.withimg,
|
|
#portalmenu div.portalmenukop.withimg {
|
|
float: none;
|
|
text-align: center;
|
|
margin: auto;
|
|
}
|
|
|
|
.widget-type-mk span.menuimg img,
|
|
#portalmenu span.menuimg img {
|
|
max-width: 95%;
|
|
max-height: 100px;
|
|
}
|
|
|
|
/* Anders onder elkaar */
|
|
@media all and (max-width: 85em) {
|
|
.widget-type-mk span.menuimg,
|
|
.widget-type-mk div.portalmenukop,
|
|
#portalmenu span.menuimg,
|
|
#portalmenu div.portalmenukop {
|
|
display: block;
|
|
float: none;
|
|
margin-left: 0;
|
|
width: auto;
|
|
max-width: none;
|
|
}
|
|
|
|
#portalmenu span.menuimg {
|
|
text-align: center;
|
|
}
|
|
}
|
|
.widget-type-mk .portalmenukop.withimg span.menuimg,
|
|
.widget-type-mi span.menuimg,
|
|
#portalmenu .portalmenukop.withimg span.menuimg {
|
|
float: none;
|
|
margin: auto;
|
|
padding-right: 0;
|
|
}
|
|
|
|
#portalmenu .portalmenukop.withimg span.menuimg {
|
|
line-height: normal;
|
|
}
|
|
.deleted {
|
|
text-decoration: line-through;
|
|
}
|
|
.alg_deleted, .cnt_deleted, .prs_deleted, .res_deleted, .cnt_inactive, .ins_deleted {
|
|
background-color: red;
|
|
color: white;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
padding: 4px;
|
|
margin-top: 2px;
|
|
font-variant: small-caps;
|
|
}
|
|
.outofbounds {
|
|
color: red;
|
|
font-weight: bold;
|
|
}
|
|
|
|
input.activeinterval,
|
|
span.activeinterval,
|
|
input[readonly].activeinterval,
|
|
input.notapproved,
|
|
span.notapproved {
|
|
font-weight: bold;
|
|
color: red;
|
|
}
|
|
|
|
input.suggest::-ms-clear, input#autofilter::-ms-clear, input#menufilter::-ms-clear,
|
|
input#materiallist_button::-ms-clear, input.suggestBusy::-ms-clear, input.fldflexF::-ms-clear,
|
|
#uitvoerendelist_button::-ms-clear, .hasDatepicker::-ms-clear, #productsearch::-ms-clear
|
|
{
|
|
width : 0;
|
|
height: 0;
|
|
}
|
|
|
|
|
|
.fatal {
|
|
background-color: red;
|
|
color: yellow;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
div.fatal {
|
|
padding: 5px;
|
|
}
|
|
|
|
tr.res_fatal td { background-color: #F88 !important; }
|
|
|
|
tr.res_fatal td:before {
|
|
content: "\f00d";
|
|
font-family: "Font Awesome 6 Pro";
|
|
font-weight: 400;
|
|
color: rgba(183, 59, 46, 1);
|
|
font-size: 1.25em;
|
|
white-space: nowrap;
|
|
padding: 0px 3px 0px 1px;
|
|
vertical-align: top;
|
|
}
|
|
|
|
tr.resactive td {
|
|
background-color: #444444;
|
|
color: #e0e0e0;
|
|
}
|
|
tr.respast td {
|
|
background-color: #bb3446;
|
|
color: #f0f0f0;
|
|
}
|
|
tr.respast.updated td {
|
|
color: var(--textcolor);
|
|
}
|
|
|
|
/* geen kruizen in de multiselect/hamburger kolom ivm uitlijning */
|
|
tr.res_fatal td.multiselect:before, tr.res_fatal td.hambCont:before, tr.res_fatal td.inlinedetails:before {
|
|
content: none;
|
|
}
|
|
.warning-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: var(--notesbackgroundcolor);
|
|
}
|
|
#lock-warning {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 26px;
|
|
margin: auto;
|
|
padding: 0 0.5em;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
font-weight: bold;
|
|
color: white;
|
|
}
|
|
.warning {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 26px;
|
|
font-size: initial; /* mag best nadrukkelijker toch? */
|
|
font-weight: bold;
|
|
background-color: orange;
|
|
color: white;
|
|
}
|
|
.warning > i.fa-fw {
|
|
margin-right: 0.5em;
|
|
}
|
|
tr.listfatal td {
|
|
background-color: red;
|
|
color: yellow;
|
|
font-weight: bold;
|
|
}
|
|
tr.listfatal.updated td {
|
|
color: blue;
|
|
}
|
|
.noshow, #fldnoshow {
|
|
color: yellow;
|
|
font-weight: bold;
|
|
background-color: red;
|
|
}
|
|
.rsSummary {
|
|
float: left;
|
|
background-color: #808080;
|
|
color: #FFFFFF;
|
|
padding: 0; /* moet 0, anders zie je nog iets als-ie hidden is */
|
|
}
|
|
.rsTruncmore {
|
|
color: #888;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.mldpublic td {
|
|
background-color: #E0E0E0;
|
|
}
|
|
.mldsubject {
|
|
font-weight: bold;
|
|
}
|
|
.mldopdruren {
|
|
background-color: #F5F5F5;
|
|
}
|
|
.mldimpropdruren {
|
|
background-color: #F7C39D;
|
|
}
|
|
.mldopdrurenkosten {
|
|
background-color: #9EADF6;
|
|
}
|
|
#legenda {
|
|
background-color: #fffffe; /*backgroundcolor*/
|
|
}
|
|
.legendatitel {
|
|
font-weight: bold;
|
|
white-space: nowrap;
|
|
}
|
|
.legendaregel
|
|
{
|
|
vertical-align:top;
|
|
width:25px;
|
|
padding:0;
|
|
cursor: default;
|
|
}
|
|
.legendakleur {
|
|
width: 16px;
|
|
height: 16px;
|
|
box-shadow: 1px 1px 1px #888888;
|
|
margin-bottom: 2px;
|
|
}
|
|
.legendselectable .legendakleur {
|
|
cursor: pointer; /* je kunt er op klikken */
|
|
}
|
|
.legendaupdatable .legendakleur {
|
|
cursor: grab; /* je kunt er mee slepen */
|
|
}
|
|
.legendatekst {
|
|
font-size: 0.9em;
|
|
white-space: nowrap;
|
|
padding-left: 2px;
|
|
cursor: default;
|
|
}
|
|
#legenda, #meldinglegenda, #opdrachtlegenda, #inslegenda, #planbordlegenda, #contractlegenda {
|
|
width:100%;
|
|
background-color: #ffffff;
|
|
border: 1px solid #eee;
|
|
border-collapse: separate;
|
|
border-spacing: 1px;
|
|
}
|
|
#legenda td, #meldinglegenda td, #opdrachtlegenda td, #inslegenda td, #planbordlegenda td {
|
|
padding-left: 6px;
|
|
}
|
|
|
|
/* Facilitor Graphics classes*/
|
|
#navigationCell {
|
|
float: left;
|
|
width: 240px;
|
|
overflow: auto;
|
|
overflow-x: hidden;
|
|
background-color: #fffffe; /*backgroundcolor*/
|
|
padding-left:1px;
|
|
padding-right:2px;
|
|
border-right: 1px solid #ccc;
|
|
border-bottom: 1px solid #ccc;
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
}
|
|
|
|
/* de standaard 500px van de plaatsselector is hier gortig, klusje voor Koen om de juiste selector te vinden ;-) */
|
|
#navigationCell #sgLoccompleteDiv.suggestautocompleteContainer,
|
|
#navigationCell #sgBldcompleteDiv.suggestautocompleteContainer,
|
|
#navigationCell #sgFlrcompleteDiv.suggestautocompleteContainer {
|
|
max-width: 350px !important;
|
|
}
|
|
|
|
.fgdatumfilter select {
|
|
width: 105px;
|
|
font-weight: bold;
|
|
}
|
|
.fgdiscblock {
|
|
padding-left: 10px;
|
|
}
|
|
#LinkerNavi {
|
|
vertical-align: top;
|
|
width: 220px;
|
|
background-color: #fffffe; /*backgroundcolor*/
|
|
}
|
|
|
|
#mapCell {
|
|
border: 0px;
|
|
margin-left: 223px;
|
|
height: 800px;
|
|
}
|
|
.fgindicator {
|
|
position:absolute;
|
|
right: 0;
|
|
z-index:1;
|
|
cursor:pointer;
|
|
}
|
|
#mapCell3D {
|
|
border: 0px;
|
|
margin-left: 223px;
|
|
height: 800px;
|
|
}
|
|
#tabsCell {
|
|
border-top:1px solid black;
|
|
}
|
|
/* Graphics */
|
|
td.selectable {
|
|
padding: 0; cursor:pointer;
|
|
}
|
|
#docBody {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 700px;
|
|
height: 400px;
|
|
}
|
|
#theTabs {
|
|
height:100%;
|
|
padding-top:1px;
|
|
}
|
|
.fglock {
|
|
cursor: pointer;
|
|
color: red; /* styling todo */
|
|
float: left;
|
|
margin-left: -0.75em;
|
|
padding: 0.5em 1em 0.5em 0;
|
|
}
|
|
.fginconsistent {
|
|
background-color: #CC0000;
|
|
color: white;
|
|
font-weight: bold;
|
|
padding: 1px 4px;
|
|
}
|
|
.draggable {
|
|
color: red;
|
|
text-decoration: none !important;
|
|
font-weight: bold;
|
|
cursor: grab !important;
|
|
}
|
|
.drag {
|
|
position: relative;
|
|
cursor: pointer;
|
|
color: red;
|
|
}
|
|
.dragging {
|
|
color: red;
|
|
font-weight: bold;
|
|
cursor: move;
|
|
padding: 0 4px;
|
|
}
|
|
|
|
#navigationCell.collapsed {
|
|
display:none;
|
|
}
|
|
#fgmenutoggler {
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: white;
|
|
height: 20px;
|
|
width: 15px;
|
|
top: 1px;
|
|
border-right-style: none;
|
|
border-radius: 3px 0px 0px 3px;
|
|
}
|
|
#fgmenutoggler.collapsed {
|
|
border-left: 0px;
|
|
border-right-style: solid;
|
|
border-radius: 0px 3px 3px 0px;
|
|
}
|
|
#fgmenutoggler:hover {
|
|
background-color:#ddd;
|
|
}
|
|
#fgtabtoggler {
|
|
background-color: white;
|
|
height: 20px;
|
|
width: 18px;
|
|
border-top-style: none;
|
|
border-radius: 0px 0px 3px 3px;
|
|
}
|
|
#fgtabtoggler:hover {
|
|
background-color:#ddd;
|
|
}
|
|
#fgtabtoggler.collapsed {
|
|
border-top-style: solid;
|
|
border-bottom: 1px;
|
|
border-radius: 3px 3px 0px 0px;
|
|
}
|
|
#legendCell {
|
|
position: absolute;
|
|
top: 32px;
|
|
left: 246px;
|
|
min-width: 100px;
|
|
overflow-y: auto;
|
|
background-color:rgba(255,255,255,0.95);
|
|
padding: 4px;
|
|
box-shadow: 1px 1px 5px #666;
|
|
border-radius: 3px;
|
|
}
|
|
#legendCell #titel {
|
|
position: relative;
|
|
font-weight: bold;
|
|
text-indent: 2em;
|
|
}
|
|
#legendCell #titel[data-toggle="collapse"]::after {
|
|
font-family: 'Font Awesome 6 Pro';
|
|
font-weight: 300;
|
|
content: "\f13a"; /* chevron-down */
|
|
font-size: 1.2em;
|
|
position: absolute;
|
|
left: -1.5em;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
#legendCell #titel[data-toggle="collapse"][aria-expanded=false]::after {
|
|
content: "\f138"; /* chevron-right */
|
|
}
|
|
|
|
#fLegenda1, #fLegenda2 {
|
|
padding:2px;
|
|
}
|
|
#legendMore {
|
|
float: right;
|
|
padding-right: 2px;
|
|
}
|
|
.legendtitle {
|
|
font-weight: bold; /* bijvoorbeeld, mag anders*/
|
|
}
|
|
#flegendaseparator {
|
|
height: 6px;
|
|
}
|
|
/* Enkele 'vieze' overrules, te verfijnen */
|
|
#navigationCell label,
|
|
#navigationCell .fld
|
|
{
|
|
width: 225px;
|
|
}
|
|
|
|
#navigationCell .fldsDiscsIn,
|
|
#navigationCell .fldrooms,
|
|
#navigationCell select,
|
|
#fLegenda select
|
|
{
|
|
width: 226px;
|
|
}
|
|
/* note: the order is which the next definitions appear is
|
|
significant, and more of these are defined in slnkdwf.css
|
|
*/
|
|
.openFG, .closedFG, .fixedFG {
|
|
width: 228px;
|
|
background-color: var(--frameheaderbackgroundcolor);
|
|
color: var(--frameheadercolor);
|
|
}
|
|
.openFG, .closedFG {
|
|
transition: background-color 0.2s;
|
|
cursor: pointer;
|
|
}
|
|
.openFG:hover, .closedFG:hover {
|
|
background-color: var(--buttonhoverbackgroundcolor);
|
|
color: var(--buttonhovercolor);
|
|
}
|
|
.openFG td, .closedFG td, .fixedFG {
|
|
line-height: 2em;
|
|
padding-left: 0.4em;
|
|
border-top: 2px solid white;
|
|
font-weight: bold;
|
|
}
|
|
.openFG td i, .closedFG td i, .fixedFG i{
|
|
vertical-align: inherit;
|
|
}
|
|
.legdisc {
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
.legins {
|
|
height: 36px;
|
|
border-radius: 2px;
|
|
padding: 2px;
|
|
box-shadow: 1px 1px 2px #999;
|
|
}
|
|
.legins.draggable {
|
|
background-color: #fbff83; /* stickyyellow */
|
|
}
|
|
.leginsname {
|
|
font-family: var(--fontfamily_alt);
|
|
vertical-align: middle;
|
|
padding-left: 8px;
|
|
}
|
|
.leginsnr {
|
|
opacity: 0.8;
|
|
font-size: 0.8em;
|
|
margin-left: 3px;
|
|
}
|
|
#navbuttons {
|
|
background-color: var(--frameheaderbackgroundcolor);
|
|
color: var(--frameheadercolor);
|
|
}
|
|
#navbuttons span.active {
|
|
background-color: var(--frameheadercolor);
|
|
color: var(--frameheaderbackgroundcolor);
|
|
}
|
|
#navbuttons span:hover {
|
|
color: var(--buttonhovercolor);
|
|
background-color: var(--buttonhoverbackgroundcolor);
|
|
}
|
|
#toggler {
|
|
float: left;
|
|
width: 12px;
|
|
height: 100%;
|
|
cursor: pointer;
|
|
}
|
|
#SearchCode, #SearchLbl {
|
|
opacity: 0.7;
|
|
}
|
|
.area_diff {
|
|
color: red;
|
|
}
|
|
|
|
label > span.facmgtmultilang::before,
|
|
.facmgtmultilangheader::before
|
|
{
|
|
content: "";
|
|
display: inline-block;
|
|
height: 1em;
|
|
width: calc(1.5em + 3px);
|
|
background-image: url("../Pictures/nl.png");
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
background-position: left;
|
|
}
|
|
|
|
/* phonebook API */
|
|
#phonebookdetails {
|
|
background-color:#fff;
|
|
padding: 5px 5px 10px 5px;
|
|
border: 1px solid #888;
|
|
}
|
|
#phonebookdetails .label {
|
|
text-align: right;
|
|
padding-right: 5px;
|
|
}
|
|
#phonebookdetails th {
|
|
background-color: #fff;
|
|
}
|
|
#phonebookdetails .title,
|
|
#phonebookdetails .title a {
|
|
text-align: left;
|
|
font-size: 1.1em;
|
|
}
|
|
#phonebookdetails td {
|
|
padding: 3px;
|
|
}
|
|
|
|
table.filter {
|
|
background-color: #fffffe; /*backgroundcolor*/
|
|
border: 1px solid #ccc;
|
|
margin-bottom: 10px;
|
|
}
|
|
table.filter th {
|
|
background-color: var(--tableheaderbackgroundcolor);
|
|
color: var(--tableheadercolor);
|
|
font-weight: normal;
|
|
font-size: 1.1em;
|
|
margin-bottom: 2px;
|
|
}
|
|
table.filter td {
|
|
cursor: pointer;
|
|
padding:3px 2px 1px 4px;
|
|
color: var(--textcolor);
|
|
line-height: 18px;
|
|
}
|
|
table.filter td.count {
|
|
font-size: 0.9em;
|
|
text-align: right;
|
|
}
|
|
table.filter td.meer {
|
|
font-size: 0.9em;
|
|
cursor: default;
|
|
}
|
|
table.filter img {
|
|
padding-right: 4px;
|
|
vertical-align: bottom
|
|
}
|
|
span.wisFilter {
|
|
color: #888;
|
|
cursor: pointer;
|
|
}
|
|
.simple-content-wrapper {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin: 0.5rem 0;
|
|
}
|
|
.prodsearch-widget,
|
|
.input-button-wrapper {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: calc(100% - 10px);
|
|
}
|
|
.input-button-wrapper input.fld {
|
|
line-height: 1.6em;
|
|
}
|
|
#searchBox {
|
|
font-size: 1.8em;
|
|
vertical-align: top;
|
|
text-align: center;
|
|
padding: 5px;
|
|
}
|
|
#searchBox #searchText {
|
|
font-size: 1.0em;
|
|
color: #666;
|
|
width: auto;
|
|
border: 1px solid #aaa; /* match normale input */
|
|
border-radius: 2px;
|
|
padding-left: 9px;
|
|
margin-right: 2px
|
|
}
|
|
#searchBox input {
|
|
vertical-align: middle;
|
|
}
|
|
#breadcrums {
|
|
padding: 10px;
|
|
}
|
|
.tag {
|
|
color: #3e6d8e;
|
|
margin: 2px 4px 2px 1px;
|
|
padding: 2px 3px 2px 3px;
|
|
}
|
|
#prodtable {
|
|
border: 1px solid #f1f1f1;
|
|
}
|
|
#prodtable th {
|
|
background-color: #fafafa;
|
|
color: var(--textcolor);
|
|
border: none;
|
|
border-bottom: 1px solid #f1f1f1;
|
|
}
|
|
|
|
#mod_authQR
|
|
{
|
|
padding: 5px 10px 5px 16px;
|
|
font-size:9pt;
|
|
line-height: 14pt;
|
|
}
|
|
#mod_authQR #qrurl
|
|
{
|
|
font-size:12px;
|
|
font-family: courier;
|
|
white-space: nowrap;
|
|
}
|
|
.droppable {
|
|
opacity: inherit;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
.droppable.dragon {
|
|
opacity: 0.5;
|
|
}
|
|
.otptoken {
|
|
color: #ddd;
|
|
}
|
|
.otptokencurrent {
|
|
color: #000;
|
|
}
|
|
#uitleen_restxt
|
|
{
|
|
font-size:9pt;
|
|
line-height: 12pt;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
p.trunc {
|
|
white-space: nowrap;
|
|
width: 140px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
table.filter p { margin: 0px; }
|
|
|
|
#hidFrame { display: none; }
|
|
|
|
/* experimentje. is dit leuk? */
|
|
input, textarea, select {
|
|
/*outline: none; Todo; dit is een accessibility-killer, outline wordt veel gebruikt door browsers voor bijv. :focus */
|
|
border-radius: 0px;
|
|
}
|
|
|
|
input:focus, textarea:focus, select:focus {
|
|
box-shadow: none;
|
|
border: 1px solid rgba(0, 0, 0, 0.5);
|
|
border-left-width: 2px;
|
|
}
|
|
/*
|
|
input[type=radio]:focus,
|
|
input[type=checkbox]:focus {
|
|
border: 1px solid transparent;
|
|
box-shadow: 0 0 0px #888;
|
|
}
|
|
*/
|
|
input[readonly], select[readonly], textarea[readonly] {
|
|
box-shadow: none;
|
|
border:none;
|
|
}
|
|
/* touch colors are defined here to allow customisation */
|
|
#tabletmenu {
|
|
color: var(--portalkopcolor);
|
|
}
|
|
.tabletmenu img {
|
|
background-color: var(--frameheaderbackgroundcolor);
|
|
}
|
|
.tmenutab {
|
|
background-color: var(--tableheaderbackgroundcolor);
|
|
color: var(--tableheadercolor);
|
|
border: 2px solid var(--frameheadercolor);
|
|
}
|
|
.tmenutabhome {
|
|
color: var(--textcolor);
|
|
}
|
|
|
|
/* floorscreen */
|
|
.floorscreen input[type=button] {
|
|
background-color: #CC5252; /*configurable*/
|
|
color: #fffffe; /*backgroundcolor*/
|
|
margin: 2px;
|
|
font-weight: bold;
|
|
padding: 12px;
|
|
box-shadow: 1px 1px 1px #888888;
|
|
margin-bottom: 12px;
|
|
font-size: 1.3em;
|
|
border-radius: 4px;
|
|
}
|
|
.floorscreen input[type=button]:hover {
|
|
background-color:#F59D04; /*configurable*/
|
|
}
|
|
.floorscreen input[type=button].selected {
|
|
background-color:#fffffe; /*backgroundcolor*/
|
|
color:#CC5252; /*configurable*/
|
|
box-shadow: 1px 1px 1px #888888 inset;
|
|
}
|
|
.flrbutton {
|
|
width: 150px; /* default */
|
|
}
|
|
.floorscreen #fsmenu {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
height: 100%;
|
|
width: 220px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
overflow: auto;
|
|
overflow-x: hidden;
|
|
background-color: #fffffe; /*backgroundcolor*/
|
|
border-right: 1px solid var(--textcolor);
|
|
}
|
|
.floorscreen #fsmenu #fsnavigation {
|
|
text-align: center;
|
|
}
|
|
.floorscreen #fsmenu #fslegenda {
|
|
position: relative;
|
|
bottom: 15px;
|
|
left: 5px;
|
|
background-color: rgba(255, 255, 255, 0.9); /* soms gaat het over de buttons */
|
|
padding: 5px;
|
|
}
|
|
|
|
.floorscreen #verdiepingen {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.floorscreen #theReport
|
|
{
|
|
background-color: #f0f0f0;
|
|
width: 650px;
|
|
position: absolute;
|
|
bottom: 10px;
|
|
right: 25px;
|
|
box-shadow: 2px 2px 2px #888888;
|
|
border: 1px solid #888888;
|
|
}
|
|
|
|
.floorscreen #theClock
|
|
{
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 25px;
|
|
font-size: 20px;
|
|
background-color: transparent;
|
|
color: #888;
|
|
text-align: right;
|
|
z-index:999;
|
|
}
|
|
|
|
.infodatumfilter
|
|
{
|
|
color: #d01111;
|
|
}
|
|
|
|
.rflrscreen #rstable th
|
|
{
|
|
background-color: #fffffe; /*backgroundcolor*/
|
|
color: var(--textcolor);
|
|
}
|
|
.rflrscreen #rstable td
|
|
{
|
|
padding: 2px;
|
|
background-color: transparent;
|
|
}
|
|
.rflrscreen #iframerextratitle
|
|
{
|
|
color: var(--frameheaderbackgroundcolor);
|
|
}
|
|
|
|
body.floorscreen3d {
|
|
background-color: #fff;
|
|
margin: 0px;
|
|
overflow: hidden;
|
|
}
|
|
.bord3d {
|
|
padding: 2px 4px 2px 4px;
|
|
border: 1px outset #fff;
|
|
background-color: rgba(253, 249, 0, 0.7);
|
|
color: #555;
|
|
font-size: 0.8em;
|
|
font-family: Calibri,Tahoma, Arial, Helvetica, Sans-serif;
|
|
line-height: 1.3em;
|
|
border-radius: 4px;
|
|
box-shadow: #333 2px 2px;
|
|
text-align: center;
|
|
}
|
|
.bord3d .title {
|
|
text-decoration: underline;
|
|
cursor: pointer;
|
|
}
|
|
.bord3d .body {
|
|
font-weight: bold;
|
|
}
|
|
#xsldata {
|
|
min-height: 550px;
|
|
font-family: Courier;
|
|
}
|
|
#req_srtnoti { display: inline; }
|
|
/* Tabgrootte zetten werkt helaas niet in IE */
|
|
#xsldata, pre {
|
|
-moz-tab-size: 4;
|
|
-o-tab-size: 4;
|
|
tab-size: 4;
|
|
}
|
|
#xsledit label, #xslview label {padding-right: 10px;}
|
|
#xslview {padding: 8px 0 10px 0;}
|
|
#sDocuments {width: 200px;}
|
|
|
|
#scfcolpicker {
|
|
padding: 10px;
|
|
border: 1px solid black;
|
|
position: absolute;
|
|
top: 5px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background-color: #f0f0f0;
|
|
z-index: 103;
|
|
box-shadow: 2px 2px 10px #aaa;
|
|
}
|
|
.scfcolpicker {
|
|
padding: 10px;
|
|
border: 1px solid black;
|
|
position: relative;
|
|
bottom: 100px;
|
|
right: 100px;
|
|
white-space: nowrap;
|
|
background-color: #f0f0f0;
|
|
z-index: 103;
|
|
box-shadow: 2px 2px 10px #aaa;
|
|
}
|
|
.scfcolpicker td {
|
|
cursor: pointer;
|
|
}
|
|
#scfcolpicker select, #rscolpicker select {
|
|
width:150px;
|
|
}
|
|
|
|
#scfcolpicker td:hover, #rscolpicker td:hover, #rscolpicker td label:hover {
|
|
cursor: move;
|
|
}
|
|
|
|
#scfcolpicker td input {
|
|
cursor: pointer;
|
|
}
|
|
#scfcolpicker .buttons {
|
|
text-align: center;
|
|
}
|
|
#scfcolpicker .button {
|
|
width: auto;
|
|
}
|
|
tr.rscols_combined td {
|
|
padding-left: 10px;
|
|
}
|
|
|
|
/* Todo, hover-kleur op niet hover-iconen? Mag dit allemaal weg?
|
|
#btn_bez_morevis i, #btn_bez_morevis span, #btn_bez_import i, #btn_bez_import span, #btn_add_sub i, #btn_bes_del_complete span,
|
|
#prsBedrijfadres i.fa-folder-open, #btn_sle_morerooms i, #btn_bes_del_complete i, #ins_add_object_connect i, #btn_faq_add_room i, #btn_faq_add_stdm i
|
|
#ins_add_object_connect span, #btn_faq_add_room span, #btn_faq_add_stdm span
|
|
{
|
|
color:var(--buttonhoverbackgroundcolor);
|
|
} */
|
|
|
|
#btn_bez_morevis, #btn_bez_morevis span, #btn_bez_import, #btn_bez_import span, #btn_add_sub,
|
|
#prsBedrijfadres fa-folder-open, #btn_sle_morerooms, #btn_bes_del_complete, #ins_add_object_connect, #btn_faq_add_room, #btn_faq_add_stdm
|
|
{
|
|
border-color: transparent!important;
|
|
}
|
|
|
|
.ui-widget-content {
|
|
border: 1px solid #eee;
|
|
}
|
|
.ui-dialog:not(.ui-resizable) .ui-dialog-content {
|
|
position: static;
|
|
}
|
|
|
|
li.hiddenbutton {
|
|
padding: 0px 0px 0px 0px!important;
|
|
}
|
|
|
|
.ui-widget,
|
|
.ui-widget button.ui-widget { /* Voor button is dat dus bewust 1.1em * 1.1em */
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
#prodsearchsearch {
|
|
border: 0px;
|
|
line-height: 30px;
|
|
}
|
|
|
|
#showlink {
|
|
border: 0px solid #ccc!important;
|
|
box-shadow: 4px 4px 8px rgba(0,0,0, 0.5);
|
|
text-align: right!important;
|
|
}
|
|
|
|
tr.report_V td,tr.report_C td {
|
|
background-color: #FEFFBB;
|
|
color: #000;
|
|
}
|
|
tr.report_S td {
|
|
background-color: #FEFFBB;
|
|
}
|
|
tr.report_I td {
|
|
background-color: #FEFFBB;
|
|
color: #606060;
|
|
}
|
|
tr.report_U td {
|
|
background-color: #FEFFBB;
|
|
color: #606060;
|
|
}
|
|
tr.report_H td {
|
|
color: #a0a0a0;
|
|
}
|
|
|
|
tr.report_H:hover td {
|
|
color: var(--menuitemhovercolor);
|
|
}
|
|
|
|
/* KPI module; niet alles even noodzakelijk */
|
|
.kpitcol1, .kpicol1 {
|
|
width: 20%;
|
|
}
|
|
.kpicol2 {
|
|
width: 45%;
|
|
}
|
|
table.kpidetails {
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
td.kpidetails {
|
|
font-size: 8pt;
|
|
vertical-align: top;
|
|
}
|
|
.kpisec_heading {
|
|
background-color: var(--tableheaderbackgroundcolor);
|
|
color: var(--tableheadercolor);
|
|
font-size: 1.8em;
|
|
vertical-align: bottom;
|
|
padding: 4px 0 0 15px;
|
|
}
|
|
.kpiavg {
|
|
color: #fff;
|
|
font-size: 2em;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
width: 100px;
|
|
height: 80px;
|
|
}
|
|
.kpiscore {
|
|
width: 50px;
|
|
text-align: right;
|
|
}
|
|
.kpioms {
|
|
min-width: 300px;
|
|
}
|
|
|
|
.mjbtotal {
|
|
border-left:1px solid #aaa;
|
|
vertical-align: middle;
|
|
}
|
|
.mjbjaar, .mjbgeraamd {
|
|
border-left:1px solid #eee;
|
|
vertical-align: middle;
|
|
}
|
|
.mjbplanned td {
|
|
background-color: #FCF2E5;
|
|
}
|
|
|
|
/* Conditiescore dcscore1 t/m dcscore6 */
|
|
td.dcscore1, td.dcscore2, td.dcscore1_5, td.dcscore2_5 {
|
|
background-color: #87DD87;
|
|
}
|
|
td.dcscore3, td.dcscore4, td.dcscore3_5, td.dcscore4_5 {
|
|
background-color: #FFC859;
|
|
}
|
|
td.dcscore5, td.dcscore6, td.dcscore5_5 {
|
|
background-color: #FD7878;
|
|
}
|
|
|
|
/* Prioriteit dpscore1 t/m dpscore9 */
|
|
|
|
/* Urgentie xcp_prio_1 t/m xcp_prio_3 */
|
|
td.xcp_prio_3 {
|
|
background-color: #F00;
|
|
color: #FFF;
|
|
}
|
|
|
|
.fcltscenario, .fcltactsit {
|
|
font-weight: bold;
|
|
font-size: 1.1em;
|
|
padding: 12px;
|
|
text-align: center;
|
|
}
|
|
|
|
.stdmjb {
|
|
color: #aaa;
|
|
font-size: 0.9em;
|
|
}
|
|
.scenerized1 td, .fcltscenario {
|
|
background-color: #EEB066;
|
|
}
|
|
.mjbstd td {
|
|
opacity: 0.9;
|
|
}
|
|
.mjbxcp td {
|
|
opacity: 1.0;
|
|
}
|
|
|
|
.mjbwaiting td {
|
|
background-color: #F0F0FA;
|
|
}
|
|
|
|
span.mjborgbedrag {
|
|
color: #ccc;
|
|
font-size: 0.9em;
|
|
}
|
|
span.draggable .mjborgbedrag {
|
|
color: var(--linkcolor);
|
|
}
|
|
.mjbafbouw,
|
|
.mjbverval,
|
|
.mjbplanned.mjbverval {
|
|
vertical-align: middle;
|
|
text-align: center !important; /* overrule the hardcoded right */
|
|
|
|
}
|
|
|
|
td.mjbfreezed {
|
|
background-color: rgba(185, 215, 255, 1);
|
|
color: #000061;
|
|
}
|
|
|
|
td.mjbcompleted {
|
|
background-color: rgba(198, 239, 206, 1);
|
|
color: #006100;
|
|
}
|
|
|
|
td.mjbrejected {
|
|
background-color: rgba(255, 180, 180, 1);
|
|
color: #610000;
|
|
}
|
|
|
|
/* toaster stuff */
|
|
.jq-icon-info { background-color: #31708f; color: #d9edf7; border-color: #bce8f1; }
|
|
.jq-icon-warning { background-color: #8a6d3b; color: #fcf8e3; border-color: #faebcc; }
|
|
.jq-icon-error { background-color: #a94442; color: #f2dede; border-color: #ebccd1; }
|
|
.jq-icon-success { background-color: var(--frameheaderbackgroundcolor); color: var(--frameheadercolor) ; border-color: var(--frameheaderbackgroundcolor); }
|
|
|
|
|
|
.resartikelfoto {
|
|
padding: 2px 2px 2px 20px;
|
|
}
|
|
|
|
.tableFloatingHeader {
|
|
z-index: 10;
|
|
}
|
|
|
|
.hamburger {
|
|
cursor:pointer;
|
|
}
|
|
.frametabs.ui-tabs .ui-tabs-nav li.ui-tabs-active {
|
|
padding-bottom: 0; /* Niet bij Graphics */
|
|
}
|
|
td.multi_cb, th.multi_cb {
|
|
text-align: center;
|
|
}
|
|
|
|
span#multilabel, span.footerbutton {
|
|
padding: 3px 8px;
|
|
border-right: 1px solid rgba(255, 255, 255, 0.25);
|
|
}
|
|
|
|
#termshtml body {
|
|
width: 96%;
|
|
margin-left: 2.5%;
|
|
margin-top:5%;
|
|
}
|
|
div#terms {
|
|
height: 40em;
|
|
overflow-y:scroll;
|
|
padding: 1em;
|
|
}
|
|
div#prsAV {
|
|
border: 2px solid #aaa;
|
|
}
|
|
|
|
div.ui-menu-tabs {
|
|
background-color: var(--menubackgroundcolor);
|
|
color: var(--menucolor);
|
|
}
|
|
|
|
div.menuHeadSpacer
|
|
{
|
|
background-color: var(--menubackgroundcolor);
|
|
cursor: pointer;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
height: 2px;
|
|
}
|
|
|
|
.fldissuetype {
|
|
width:80%;
|
|
}
|
|
|
|
@media all and (min-width: 40em){
|
|
#termshtml body {
|
|
width: 60%;
|
|
margin-left: 20%;
|
|
margin-top:10%;
|
|
}
|
|
}
|
|
select[multiple]#authorizationgroup {
|
|
height: 150px;
|
|
}
|
|
img.customImg {
|
|
max-height: 800px;
|
|
max-width: 600px;
|
|
}
|
|
|
|
table#useroptionstable {
|
|
width: 100%;
|
|
cursor: pointer;
|
|
}
|
|
table#useroptionstable tr {
|
|
color: var(--menuitemcolor);
|
|
background-color:var(--menuitembackgroundcolor);
|
|
}
|
|
table#useroptionstable tr:hover {
|
|
color: var(--menukophovercolor);
|
|
background-color:var(--menukophoverbackgroundcolor);
|
|
}
|
|
|
|
/* res_rsv_deel_by_placetime.asp */
|
|
div.icondate {
|
|
padding-top: 18%;
|
|
font-weight: bold;
|
|
font-size: 1.3em;
|
|
}
|
|
div.beschikb0 {
|
|
color: #FFF;
|
|
background-color: #E50012;
|
|
}
|
|
span.beschikb0 {
|
|
color: #E50012;
|
|
}
|
|
div.beschikb10 {
|
|
color: #FFF;
|
|
background-color: #FF8504;
|
|
}
|
|
span.beschikb10 {
|
|
color: #FF8504;
|
|
}
|
|
div.beschikb50 {
|
|
color: #FFF;
|
|
background-color: #A5D200;
|
|
}
|
|
span.beschikb50 {
|
|
color: #A5D200;
|
|
}
|
|
div.beschikb100 {
|
|
color : #FFF;
|
|
background-color : #0AAA32;
|
|
}
|
|
span.beschikb100 {
|
|
color: #0AAA32;
|
|
}
|
|
div.vrijedag {
|
|
color : #333;
|
|
background-color : #eee;
|
|
cursor: auto;
|
|
}
|
|
div.vrijweekend {
|
|
color : #f33;
|
|
background-color : #eee;
|
|
cursor: auto;
|
|
}
|
|
div.werkweekend {
|
|
color : #f33;
|
|
background-color : inherit;
|
|
}
|
|
|
|
.flooravatar {
|
|
font-size: 17px;
|
|
background-color: rgba(0,0,0,0.3) ;
|
|
font-weight: bold;
|
|
border-radius: 40px;
|
|
padding: 11px;
|
|
width: 48px;
|
|
text-align: center;
|
|
margin: auto auto;
|
|
}
|
|
|
|
@media all and (min-width: 69em) {
|
|
.flooravatar {
|
|
font-size: 22px;
|
|
padding: 13px;
|
|
width: 58px;
|
|
}
|
|
}
|
|
|
|
@media all and (min-width: 90em) {
|
|
.flooravatar {
|
|
font-size: 28px;
|
|
padding: 18px;
|
|
width: 76px;
|
|
}
|
|
}
|
|
|
|
/* chatter */
|
|
#chat .card-header,
|
|
#chatwait .card-header {
|
|
background-color: #E02D93; /* Aareon Fuchsia */
|
|
color: #FFF;
|
|
}
|
|
#chat .text-wrapper {
|
|
display: flex;
|
|
}
|
|
#chat textarea {
|
|
transition: box-shadow .15s ease-in-out;
|
|
background-color: rgba(52, 63, 77, 0.05); /* Aareon Urban Grey 5% */
|
|
}
|
|
#chat .cancelbutton,
|
|
#chat .spinnerbutton,
|
|
#chat .sendbutton {
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 6px 12px;
|
|
transition: box-shadow .15s ease-in-out;
|
|
}
|
|
#chat .cancelbutton:active,
|
|
#chat .spinnerbutton:active,
|
|
#chat .sendbutton:active,
|
|
#chat textarea:focus {
|
|
box-shadow: 0 0 0 3px #E02D93 /* Aareon Fuchsia */
|
|
}
|
|
#chatqueue tr[title] {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.chatmodal {
|
|
background-color: #F59D04; /* Aareon Tangerine - geen harde kleuren */
|
|
}
|
|
.chatbody {
|
|
background-color: #ddd;
|
|
}
|
|
.chatdisclaimer {
|
|
font-size: 1.1em;
|
|
padding-bottom: 20px;
|
|
}
|
|
.chatinitialmsg {
|
|
padding-bottom: 4px;
|
|
font-style: oblique;
|
|
}
|
|
.chatbody .fldpers {
|
|
text-align: center;
|
|
padding: 5px;
|
|
width: 90%;
|
|
display: inline-block;
|
|
font-weight: bold;
|
|
text-decoration: underline;
|
|
}
|
|
.chattime {
|
|
font-size: 0.8em;
|
|
padding-right: 6px;
|
|
opacity: 0.8;
|
|
float: right;
|
|
}
|
|
.chatmsg {
|
|
display: block;
|
|
padding: 0 4px 0 4px;
|
|
border-radius: 4px;
|
|
padding: 5px;
|
|
}
|
|
.chatmsg.self {
|
|
margin: 0 30px 0 5px;
|
|
background-color: #ebf6ff; /* geen harde kleuren */
|
|
}
|
|
.chatmsg.other {
|
|
margin: 0 5px 0 30px;
|
|
background-color: #96cbfb;/* geen harde kleuren */
|
|
}
|
|
.chathistory {
|
|
overflow: auto;
|
|
width:100%;
|
|
margin-bottom: 10px;
|
|
}
|
|
.chatinput {
|
|
margin: 0 10px 0 10px;
|
|
}
|
|
.chatinput textarea {
|
|
height: 80px;
|
|
width: 100%;
|
|
}
|
|
.chatbuttons {
|
|
min-width: 30px;
|
|
}
|
|
.chatwaiting {
|
|
height: 200px;
|
|
text-align: center;
|
|
padding-left: 20%;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.chatwaitingstop {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 45%;
|
|
}
|
|
.chatmsg.system {
|
|
font-style: italic;
|
|
background-color: silver;
|
|
}
|
|
.chatmsg.inactive {
|
|
background-color: beige;
|
|
}
|
|
.chatmsg.aborted {
|
|
background-color: orange;
|
|
}
|
|
|
|
/*////////////////////////////////////////////////////////
|
|
// //
|
|
// New design classes voor Detailschermen (show & edit) //
|
|
// //
|
|
////////////////////////////////////////////////////////*/
|
|
|
|
/* ==============================
|
|
Globals
|
|
============================== */
|
|
|
|
iframe.inactive {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.ui-widget-overlay {
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Voor vervolg pop-ups wel de achtergrond onbeschikbaar maken */
|
|
.ui-dialog:not([aria-describedby="fcltmodal1"]) + .ui-widget-overlay {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.fcltframe.hot-overlay::after {
|
|
content: "";
|
|
z-index: 100; /* modal -1 */
|
|
pointer-events: none;
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
background: #ffffff;
|
|
opacity: .4;
|
|
}
|
|
|
|
.no-select {
|
|
-webkit-user-select: none; /* Safari */
|
|
-ms-user-select: none; /* IE 10 and IE 11 */
|
|
user-select: none; /* Standard syntax */
|
|
}
|
|
|
|
/* ==============================
|
|
Layout
|
|
============================== */
|
|
|
|
/* Sidebar wordt gebruikt voor het notitie-iframe (in IFRAMER) */
|
|
/* Resize Section */
|
|
.sidebar.sidebar-transition {
|
|
transition: flex-basis 150ms ease-in-out;
|
|
}
|
|
.sidebar.collapsed {
|
|
flex-basis: 40px;
|
|
}
|
|
|
|
.sidebar-toggler {
|
|
position: absolute;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 0.35em;
|
|
color: var(--buttoncolor);
|
|
background-color:var(--buttonbackgroundcolor);
|
|
cursor: pointer;
|
|
border-radius: 4px 2px 2px 4px;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.resize-area,
|
|
.sidebar .resizeHandle {
|
|
position: absolute;
|
|
height: 100%;
|
|
cursor: ew-resize;
|
|
}
|
|
|
|
/* Gewoon alles hiden in logboek modus */
|
|
.logboek .content-wrapper > *:not(.fcltframeheader) {
|
|
display: none;
|
|
}
|
|
|
|
/* Logboek modus; maak dan notitieframe 100% breed (en override opgeslagen breedtes) */
|
|
[aria-hidden="false"].col-12 ~ .sidebar {
|
|
max-width: 100%!important;
|
|
flex-basis: 100%!important;
|
|
}
|
|
|
|
/* Logboek modus of scherm zo smal dat de frames onder elkaar wrappen; hide resize handlers */
|
|
[aria-hidden="false"].col-12 ~ .sidebar > .resizeHandle,
|
|
[aria-hidden="false"].col-12 ~ .sidebar > .sidebar-toggler {
|
|
display: none;
|
|
}
|
|
|
|
.resize-area {
|
|
width: 100%;
|
|
z-index: 104;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.sidebar .resizeHandle {
|
|
width: 0.5em;
|
|
font-size: 1.1em;
|
|
display: flex;
|
|
justify-content: start;
|
|
align-items: center;
|
|
padding-left: calc(0.5em / 2 / 1.1 - 2px);
|
|
border-left: 1px solid rgba(0, 0, 0, 0.05);
|
|
}
|
|
/* \End Resize Section */
|
|
|
|
.flex-center {
|
|
justify-content: center;
|
|
}
|
|
|
|
.block-wrapper {
|
|
padding-left: 0.5rem;
|
|
padding-right: 0.5rem;
|
|
min-width: 368px; /* is sowieso nooit kleiner, en zo 'pre-render' je, sortof, en voorkom je HELEMAAL in elkaar gedrukte pagina's tijdens het renderen (is de bedoeling) */
|
|
}
|
|
|
|
/* Deze lost het pre-render verhaal aardig op */
|
|
.container-fluid form, .tabbody {
|
|
display: contents;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Niet-bootstrap div's die zich toch in de bootstrap container bevinden (lijsten bijv.) moeten zich nog als div gedragen (block = width 100%) */
|
|
.container-fluid > .row > div:not(.block-wrapper, .col, [class^="col-"], [class*=" col-"]) {
|
|
flex-basis: 100%;
|
|
}
|
|
|
|
.search-block-wrapper {
|
|
margin-top: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.search-block-wrapper table {
|
|
width: 100%;
|
|
}
|
|
|
|
.simple-block-wrapper {
|
|
padding: 0;
|
|
}
|
|
|
|
/* ==============================
|
|
Headers
|
|
============================== */
|
|
|
|
.search-page-header {
|
|
position: relative;
|
|
background-color: var(--frameheaderbackgroundcolor);
|
|
color: var(--frameheadercolor);
|
|
margin: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.scf_extrafilter {
|
|
position: absolute;
|
|
right: 1em;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
select.fld.extrafilter {
|
|
width: auto;
|
|
min-width: 130px;
|
|
}
|
|
|
|
.buttoncontainer.smallbuttons > #buttons:not(.hambdropdown) > ul > li {
|
|
font-size: 0;
|
|
display: inline-flex;
|
|
padding: 3px 12px;
|
|
}
|
|
|
|
.buttoncontainer.smallbuttons > #buttons:not(.hambdropdown) > ul > li > i {
|
|
font-size: calc(1rem * 0.75 /* body */ * 1.1 * 1.1); /* todo; simplify; 14.52px */
|
|
line-height: calc(1.8rem * 0.75 /* body */); /* todo; simplify, 1.35rem */
|
|
}
|
|
|
|
/* ==============================
|
|
BLOCK
|
|
============================== */
|
|
|
|
.block-sizer {
|
|
position: absolute; /* Zodat het de document flow niet beinvloed onload */
|
|
left: 0; /* zzZ IE11 */
|
|
border: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 0;
|
|
visibility: hidden;
|
|
}
|
|
|
|
/* ==============================
|
|
Card
|
|
============================== */
|
|
|
|
.card {
|
|
margin-top: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
box-shadow: 0 0 1px 0 rgba(48,49,51,0.05), 0 8px 16px 0 rgba(48,49,51,0.1); /* extracted from Aareon mockups */
|
|
}
|
|
|
|
.card-header {
|
|
padding-top: 0.5rem;
|
|
padding-bottom: 0.5rem;
|
|
font-size: 1.3em; /* fontafhankelijk */
|
|
}
|
|
|
|
/* Om resultsettables binnen een card strak aan de borders te zetten (want card-body heeft 20px padding) */
|
|
.card-body:not(.nopadding) > *:nth-child(n+1):nth-child(-n+5).divrstable, /* Alleen als ik tussen de eerste 5 children zit */
|
|
.card-body:not(.nopadding) > table > tbody > tr:first-child > td:first-child > .divrstable {
|
|
margin: -1.25rem;
|
|
}
|
|
|
|
/* voor niet-resultsets (tables?) die ook geen padding willen */
|
|
[class^=col-].nopadding,
|
|
.card-body.nopadding {
|
|
padding: 0;
|
|
}
|
|
|
|
/* ==============================
|
|
Content
|
|
============================== */
|
|
|
|
input.fld:not([type='checkbox']):not([type='submit']),
|
|
select.fld, select.fldmulti, select.multiSuggest,
|
|
textarea.fldtxt
|
|
{
|
|
width: 100%;
|
|
}
|
|
|
|
input.fld.fld.flduo.flduo, /* Deze input (classes dubbel benoemd om css-specificity te verhogen) */
|
|
input.flduo + select.fld { /* En zijn opvolger */
|
|
width: 50%;
|
|
}
|
|
|
|
.button-spacer {
|
|
height: 30px;
|
|
width: 100%;
|
|
position: relative;
|
|
visibility: hidden;
|
|
}
|
|
|
|
/* Bootstrap's collapse */
|
|
.collapse:not(.show) {
|
|
display: none;
|
|
}
|
|
|
|
/* Is bootstrap collapsible */
|
|
[data-toggle="collapse"] {
|
|
cursor: pointer;
|
|
}
|
|
[data-toggle="collapse"] > .card-header-content::after {
|
|
font-family: 'Font Awesome 6 Pro';
|
|
font-weight: 300;
|
|
content: "\f077";
|
|
position: absolute;
|
|
right: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
[data-toggle="collapse"].collapsed > .card-header-content::after {
|
|
content: "\f078";
|
|
}
|
|
|
|
span.default-clickable-icon {
|
|
cursor: pointer;
|
|
}
|
|
span.default-clickable-icon:hover > i {
|
|
color: var(--buttonhoverbackgroundcolor);
|
|
font-weight: 900;
|
|
}
|
|
|
|
/*////////////////////////////////////////////////////////
|
|
// //
|
|
// Notitie frame //
|
|
// //
|
|
////////////////////////////////////////////////////////*/
|
|
|
|
[id$="Historie"].card {
|
|
border: 0;
|
|
box-shadow: none;
|
|
}
|
|
|
|
[id$="Historie"] > .card-header {
|
|
border-bottom: 1px solid transparent;
|
|
}
|
|
|
|
[id$="HistorieList"].card-body {
|
|
font-family: var(--fontfamily), "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans",
|
|
"sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
}
|
|
|
|
[id$="HistorieList"] input[type=checkbox]:checked:before,
|
|
[id$="HistorieList"] input[type=radio]:checked:before {
|
|
color: var(--notesbackgroundcolor);
|
|
}
|
|
|
|
section.edit-note {
|
|
background-color: rgba(255, 255, 255, 0.5);
|
|
border: 1px solid var(--notesbackgroundcolor);
|
|
border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);
|
|
}
|
|
|
|
/* Als ik na een niet-lege en zichtbare div kom, maar dan ook mijn bovenste borders rond */
|
|
div:not([style*="display: none"]):not(:empty) ~ form > section.edit-note {
|
|
border-radius: calc(0.25rem - 1px);
|
|
}
|
|
|
|
/* =================
|
|
Extra notificatie
|
|
================= */
|
|
|
|
.note-notification {
|
|
font-style: italic;
|
|
}
|
|
|
|
/* =============
|
|
Textarea blok
|
|
============= */
|
|
|
|
.note-textarea {
|
|
position: relative;
|
|
}
|
|
|
|
.edit-note .text-styles {
|
|
border: 0;
|
|
line-height: unset;
|
|
background-image: none;
|
|
background-color: transparent;
|
|
}
|
|
.edit-note .text-styles.closed + .note-textarea > textarea {
|
|
border-top: 0;
|
|
}
|
|
.edit-note .text-styles.closed > .text-style-toggle {
|
|
background-color: #f7f1e6 !important; /* Harde kleur */
|
|
}
|
|
|
|
.note-textarea > textarea {
|
|
resize: vertical;
|
|
width: 100%;
|
|
margin: 0;
|
|
border-bottom: 1px solid var(--notesbackgroundcolor);
|
|
border-top: 1px solid var(--notesbackgroundcolor);
|
|
border-left: 0;
|
|
border-right: 0;
|
|
background-color: #f7f1e6 !important; /* Harde kleur */
|
|
transition: box-shadow .15s ease-in-out;
|
|
outline: 0;
|
|
}
|
|
|
|
.note-textarea > textarea {
|
|
display: block;
|
|
min-height: 5em;
|
|
padding: 0.5em;
|
|
}
|
|
|
|
.note-textarea > textarea.mentioning {
|
|
caret-color: var(--notesbackgroundcolor);
|
|
cursor: wait;
|
|
}
|
|
|
|
.note-edit > textarea {
|
|
min-height: 8.4em;
|
|
}
|
|
.note-textarea > textarea:focus {
|
|
box-shadow: inset 0 0 0 2px var(--notesbackgroundcolor);
|
|
}
|
|
|
|
.note-icon {
|
|
font-size: 16px;
|
|
color: var(--notesbackgroundcolor);
|
|
outline-color: var(--notesbackgroundcolor); /* Als je er naar tab't */
|
|
margin: auto 0 auto 0.25em;
|
|
}
|
|
.note-submit-wrapper {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
justify-content: flex-end;
|
|
align-items: flex-end;
|
|
}
|
|
.note-icon.submit {
|
|
margin-right: 0.5em;
|
|
}
|
|
.note-icon i {
|
|
cursor: pointer;
|
|
padding: 6px;
|
|
}
|
|
.note-icon.close i {
|
|
padding: 6px 10.5px; /* Deze is iets dunner, dit maakt hem vierkant */
|
|
}
|
|
|
|
.note-icon i:hover {
|
|
font-weight: 400;
|
|
}
|
|
.note-icon i:active {
|
|
font-weight: 900;
|
|
}
|
|
|
|
/* ===========
|
|
Reply-block
|
|
=========== */
|
|
|
|
.note-textarea > .reply-wrapper + textarea {
|
|
padding-top: 6.5em;
|
|
}
|
|
|
|
.reply-wrapper {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 4.5em;
|
|
width: 100%;
|
|
margin: 1em 0;
|
|
}
|
|
.note-textarea > .reply-wrapper {
|
|
position: absolute;
|
|
}
|
|
|
|
.reply-container {
|
|
width: calc(100% - 2em);
|
|
max-height: 4.5em;
|
|
border-radius: 5px;
|
|
padding: 0.25em;
|
|
margin: 0 1em;
|
|
background-color: rgba(0, 0, 0, 0.03);
|
|
border-left: 0.3em solid var(--notesbackgroundcolor);
|
|
}
|
|
|
|
div.reply-header,
|
|
.reply-body {
|
|
position: relative;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
margin: 0 .25em;
|
|
}
|
|
|
|
.reply-body {
|
|
display: block;
|
|
color: var(--textcolor);
|
|
}
|
|
|
|
/* Onderstaande werkt niet in IE11, maar boeie, het gaat alleen om de ellipsis [...] */
|
|
.reply-body {
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 1;
|
|
max-height: 1.8em; /* Dit is de IE11 fallback, hoogte = 1 line-height */
|
|
}
|
|
|
|
div.reply-header > .default-clickable-icon {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.note-body .reply-container {
|
|
cursor: alias;
|
|
}
|
|
.note-body .reply-container:hover {
|
|
background-color: rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
/* =======
|
|
Toggles
|
|
======= */
|
|
|
|
.note-options-groups-wrapper {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
flex-wrap: wrap;
|
|
min-height: 4em;
|
|
}
|
|
|
|
.note-options,
|
|
.note-groups {
|
|
position: relative;
|
|
padding: 0.5em 0;
|
|
}
|
|
.note-groups {
|
|
padding: 0.5em;
|
|
}
|
|
|
|
/* DEPRECATED */
|
|
.note-options > div,
|
|
.note-groups > div {
|
|
position: relative;
|
|
white-space: nowrap;
|
|
}
|
|
.switch-container ~ div > label {
|
|
padding-left: 2.25em;
|
|
}
|
|
.switch-container ~ div > input[type=checkbox] {
|
|
position: absolute;
|
|
transform: translateY(40%);
|
|
margin-left: 0.33333em;
|
|
}
|
|
|
|
/* Kleuren voor de switch-toggler binnen de noteFrame */
|
|
.note-options .switch-checkbox:checked ~ .switch-label::before {
|
|
background-color: var(--notesbackgroundcolor);
|
|
}
|
|
.note-options .switch-label.active,
|
|
.note-options .switch-label:active {
|
|
color: var(--notesbackgroundcolor);
|
|
}
|
|
/* \DEPRECATED */
|
|
|
|
/* ===========
|
|
Toggles new
|
|
=========== */
|
|
|
|
.note-option-group {
|
|
padding: 0.5em;
|
|
height: 3em;
|
|
max-width: 275px;
|
|
font-size: 0.75rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
margin: 0 .25em .25em 0.5em;
|
|
cursor: pointer;
|
|
}
|
|
.note-option-group > .name {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
margin-left: 0.25em;
|
|
padding-right: 0.5em;
|
|
}
|
|
.note-option-group .fa-stack {
|
|
opacity: 1;
|
|
flex-shrink: 0;
|
|
height: 3em;
|
|
width: 2.5em;
|
|
line-height: 3em;
|
|
cursor: pointer;
|
|
transition: opacity 0.15s;
|
|
}
|
|
/* Kleur van de tekst en de icoontjes */
|
|
.note-option-group,
|
|
.note-option-group .fa-stack {
|
|
color: #aaa;
|
|
}
|
|
|
|
.note-option-group .fa-stack .fa-slash {
|
|
transition: opacity .1s,
|
|
transform .1s;
|
|
transform: scaleX(-1); /* = fa-flip-horizontal */
|
|
}
|
|
.note-option-group .fa-stack .fa-lock,
|
|
.note-option-group .fa-stack .fa-unlock {
|
|
transition: opacity .1s;
|
|
}
|
|
.note-option-group .fa-stack.on .fa-slash,
|
|
.note-option-group .fa-stack:not(.on) .fa-unlock,
|
|
.note-option-group .fa-stack.on .fa-lock {
|
|
opacity: 0;
|
|
z-index: -1;
|
|
}
|
|
.note-option-group .fa-stack.on .fa-slash {
|
|
transform: scale3d(-1.5, 1.5, 1.5);
|
|
}
|
|
.note-option-group .name.disabled,
|
|
.fa-stack.disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
.note-option-group.anySelected,
|
|
.note-option-group.anySelected .fa-stack,
|
|
.note-option-group .fa-lock, /* lock en unlock gewoon altijd */
|
|
.note-option-group .fa-unlock {
|
|
background-color: transparent;
|
|
color: var(--textcolor);
|
|
}
|
|
|
|
.note-option-group .fa-stack:not(.disabled):hover {
|
|
animation: wiggle 0.15s 2;
|
|
}
|
|
|
|
label[data-toggle-type] + input[type=checkbox] {
|
|
display: none;
|
|
}
|
|
|
|
.note-options {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
flex-wrap: wrap;
|
|
flex-basis: 0;
|
|
flex-grow: 100;
|
|
}
|
|
|
|
@keyframes reply-icon {
|
|
33% { transform: rotate(45deg) scale(1.25); }
|
|
50% { transform: rotate(-15deg) scale(1.5); }
|
|
67% { transform: rotate(30deg) scale(1.25); }
|
|
}
|
|
|
|
@keyframes wiggle {
|
|
0% { transform: rotate(-5deg); }
|
|
50% { transform: rotate(10deg); }
|
|
100% { transform: rotate(-5deg); }
|
|
}
|
|
|
|
@keyframes overlay-lowlight {
|
|
0% { opacity: 0; }
|
|
25% { opacity: 0.25; }
|
|
75% { opacity: 0.25; }
|
|
100% { opacity: 0; }
|
|
}
|
|
|
|
/* ==========
|
|
De notitie
|
|
========== */
|
|
|
|
.note-date-wrapper,
|
|
.note-wrapper {
|
|
position: relative;
|
|
display: flex;
|
|
}
|
|
|
|
/* =============
|
|
Notitie datum
|
|
============= */
|
|
|
|
.note-date-wrapper {
|
|
border-top: 1px solid rgba(52, 63, 77, 0.2); /* Aareon Urban Grey 20% */
|
|
margin: 0.75em 2%;
|
|
}
|
|
|
|
.note-date {
|
|
background-color: #f5faf9;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
display: flex;
|
|
align-items: center;
|
|
height: 1em;
|
|
line-height: 1em;
|
|
padding: 8px 2%;
|
|
border-radius: 0.25em;
|
|
}
|
|
|
|
/* ===============
|
|
Notitie wrapper
|
|
=============== */
|
|
|
|
.notes-wrapper {
|
|
padding: 0 1em;
|
|
}
|
|
|
|
/* Notities van jezelf */
|
|
.note-type-self {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
/* =================
|
|
Notitie container
|
|
================= */
|
|
|
|
.note-container {
|
|
position: relative;
|
|
width: 85%;
|
|
padding: 0.5em 1em;
|
|
margin: 0.5em 0;
|
|
box-shadow: -0.1em 0.2em 0.2em rgb(0, 0, 0, 0.2);
|
|
border-radius: 0.25em;
|
|
}
|
|
|
|
.note-container .lowlight-overlay {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
background-color: black;
|
|
border-radius: inherit;
|
|
animation: overlay-lowlight 1s;
|
|
}
|
|
|
|
/* =============
|
|
Notitie types
|
|
============= */
|
|
|
|
/* Eigen notities */
|
|
.note-type-self > .note-container {
|
|
box-shadow: 0.1em 0.2em 0.2em rgb(0, 0, 0, 0.2);
|
|
}
|
|
|
|
/* Tracking */
|
|
.note-container.note-type-tracking {
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Gemailde notities */
|
|
.note-wrapper > .note-container.note-uitv-hidden.note-type-email,
|
|
.note-wrapper.note-type-self > .note-container.note-uitv-hidden.note-type-email,
|
|
.note-wrapper > .note-container.note-fe-hidden.note-type-email,
|
|
.note-wrapper.note-type-self > .note-container.note-fe-hidden.note-type-email {
|
|
background-color: #dee6ee;
|
|
color: var(--textcolor);
|
|
}
|
|
.note-wrapper.note-type-self > .note-container.note-type-email,
|
|
.note-wrapper > .note-container.note-type-email {
|
|
background-color: #C1DCF7;
|
|
}
|
|
|
|
/* Gewone notities, geen onderscheid meer tussen eigen en andermans */
|
|
.note-wrapper > .note-container, /* note_fe_visible is impliciet */
|
|
.note-wrapper.note-type-self > .note-container {
|
|
background-color: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
/* Opdracht notities bij de melding iets lichter dan normaal (de background-image conflicteert niet met de reeds gesette background-color) */
|
|
#mldHistorie .note-wrapper > .note-container.note-module-ord, /* note_fe_visible is impliciet */
|
|
#mldHistorie .note-wrapper.note-type-self > .note-container.note-module-ord {
|
|
background-image: linear-gradient(
|
|
rgba(255, 255, 255, 0.25),
|
|
rgba(255, 255, 255, 0.25));
|
|
}
|
|
|
|
/* Niet zichtbaar voor FE / UITV */
|
|
.note-wrapper > .note-container.note-uitv-hidden,
|
|
.note-wrapper.note-type-self > .note-container.note-uitv-hidden,
|
|
.note-wrapper > .note-container.note-fe-hidden,
|
|
.note-wrapper.note-type-self > .note-container.note-fe-hidden {
|
|
background-color: #D9E4E3;
|
|
color: var(--textcolor);
|
|
}
|
|
/* Tracking */
|
|
.note-wrapper > .note-container.note-type-tracking {
|
|
background-color: #fffffe; /* backgroundcolor */
|
|
}
|
|
|
|
/* Lowlight voor uitgezette vragen (de background-image conflicteert niet met de reeds gesette background-color) */
|
|
#opdrHistorie .note-wrapper.note-marked > .note-container,
|
|
#mldHistorie .note-wrapper.note-marked.note-type-self > .note-container {
|
|
background-image: repeating-linear-gradient(
|
|
135deg,
|
|
rgba(0, 0, 0, 0.05),
|
|
rgba(0, 0, 0, 0.05) 10px,
|
|
rgba(255, 255, 255, 0.05) 10px,
|
|
rgba(255, 255, 255, 0.05) 20px);
|
|
}
|
|
/* En bijbehorende hover */
|
|
#opdrHistorie .note-wrapper.note-marked > .note-container:hover,
|
|
#mldHistorie .note-wrapper.note-marked.note-type-self > .note-container:hover {
|
|
background-image: repeating-linear-gradient(
|
|
135deg,
|
|
rgba(0, 0, 0, 0.02),
|
|
rgba(0, 0, 0, 0.02) 10px,
|
|
rgba(255, 255, 255, 0.02) 10px,
|
|
rgba(255, 255, 255, 0.02) 20px);
|
|
}
|
|
|
|
/* Highlight voor 'onbeantwoordde'-vragen (alleen bij MLD) */
|
|
#mldHistorie .note-wrapper.note-marked:not(.note-type-self) > .note-container {
|
|
box-shadow: 0 0 .4em .25em #CC5252; /* Aareon Grapefruit */
|
|
transition: box-shadow .15s;
|
|
}
|
|
/* En bijbehorende hover */
|
|
#mldHistorie .note-wrapper.note-marked:not(.note-type-self) > .note-container:hover {
|
|
box-shadow: 0 0 .25em .15em #CC5252; /* Aareon Grapefruit */
|
|
}
|
|
|
|
/* Animatie voor het reply icoontje bij onbeantwoordde notities (alleen bij MLD) */
|
|
#mldHistorie .note-wrapper.note-marked:not(.note-type-self) .note-button-more.open:hover .fa-reply, /* In de dropdown */
|
|
#mldHistorie .note-wrapper.note-marked:not(.note-type-self) .note-container:hover .note-header-right-wrapper > .note-button-reply > .fa-reply { /* Directe actie */
|
|
animation: reply-icon 0.75s 1;
|
|
}
|
|
|
|
/* ==============
|
|
Notitie header
|
|
============== */
|
|
|
|
.note-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
/* Ruimte tussen spans rechts in de notitie header */
|
|
.note-header-right-wrapper > span:first-child ~ span {
|
|
margin-left: 2px;
|
|
}
|
|
|
|
/* Notitie auteur icoontje */
|
|
.note-author-icon {
|
|
font-size: 1.2em;
|
|
margin-right: .25em;
|
|
}
|
|
|
|
/* Notitie auteur */
|
|
.note-author {
|
|
font-size: 1.2em;
|
|
color: #002C67; /* Aareon Ink Blue */
|
|
}
|
|
|
|
/* Notitie tijd */
|
|
.note-timestamp {
|
|
color: #747578;
|
|
}
|
|
|
|
/* Gewijzigd-tekst */
|
|
.note-edited {
|
|
color: #A0A0A0;
|
|
font-size: 10px;
|
|
padding-top: 4px !important;
|
|
}
|
|
|
|
/* Dropdown-knop/icoon */
|
|
.note-button-more {
|
|
position: relative;
|
|
}
|
|
|
|
/* Dit element zorgt ervoor dat je met een klik op de achtergrond het dropdownmenu dichtklapt */
|
|
.note-button-more.open::after {
|
|
content: "";
|
|
z-index: 11;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
cursor: auto;
|
|
}
|
|
|
|
/* Het actiemenu bij individuele notities (alleen als meer dan 1 actie mogelijk is) */
|
|
.note-actions-menu {
|
|
position: absolute;
|
|
top: 100%;
|
|
right: 0;
|
|
z-index: -1;
|
|
min-width: 200px;
|
|
border-radius: 8px;
|
|
padding: .8em 0;
|
|
background-color: var(--notesbackgroundcolor);
|
|
background-image: linear-gradient(
|
|
rgba(255, 255, 255, 0.98),
|
|
rgba(255, 255, 255, 0.98));
|
|
box-shadow: 0 0 .3em rgba(255, 255, 255, 0.5),
|
|
0 0 .3em var(--notesbackgroundcolor);
|
|
opacity: 0;
|
|
}
|
|
|
|
.note-button-more.open > .note-actions-menu {
|
|
z-index: 12;
|
|
opacity: 1;
|
|
}
|
|
|
|
.note-actions-menu > [class^=note-button-] {
|
|
z-index: 13;
|
|
line-height: 2.8em;
|
|
padding: 0 0.75em;
|
|
}
|
|
|
|
.note-actions-menu > [class^=note-button-]:hover {
|
|
background-color: rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.note-actions-menu > [class^=note-button-] > i {
|
|
margin-right: 0.5em;
|
|
color: var(--notesbackgroundcolor);
|
|
}
|
|
|
|
/* ============
|
|
Notitie body
|
|
============ */
|
|
|
|
.note-body {
|
|
position: relative;
|
|
line-height: 1.4em; /* Pas ook autocollapse en collapsed height aan */
|
|
}
|
|
|
|
/* Hier zit de notitie-tekst in */
|
|
.note-text {
|
|
overflow: hidden;
|
|
max-height: 175em; /* = 125 regels x1.4em */
|
|
transition: max-height 0.15s cubic-bezier(1, 0, 0, 0);
|
|
}
|
|
|
|
/* Inline-reply */
|
|
.note-body > .reply-wrapper,
|
|
.note-body > .reply-wrapper > .reply-container {
|
|
width: 100%;
|
|
margin: 0;
|
|
line-height: 1.8em;
|
|
}
|
|
.note-body > .reply-wrapper {
|
|
margin-bottom: .5em;
|
|
}
|
|
.note-text.note-autocollapse,
|
|
.note-text.note-collapsed {
|
|
transition: max-height 0.15s cubic-bezier(0, 1, 0, 1);
|
|
}
|
|
|
|
/* Autocollapse is verder ingeklapt dan collapsed */
|
|
.note-text.note-autocollapse {
|
|
max-height: 2.8em; /* 2 regels x1.4em */
|
|
}
|
|
|
|
/* Na 'minder' toggle */
|
|
.note-text.note-collapsed {
|
|
max-height: 7em; /* 5 regels x1.4em */
|
|
}
|
|
|
|
.note-text > .bold {
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ==============
|
|
Notitie footer
|
|
============== */
|
|
|
|
/* De ...meer/...minder toggle */
|
|
.note-toggler {
|
|
float: right;
|
|
padding-left: 2em;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* ================
|
|
Notitie Top-knop
|
|
================ */
|
|
|
|
.note-top-button {
|
|
display: none;
|
|
}
|
|
|
|
@media (min-width: 23em) /* Anders is deze niet echt nodig */
|
|
{
|
|
.note-top-button {
|
|
position: fixed;
|
|
right: 1rem;
|
|
top: 3rem;
|
|
z-index: 1;
|
|
height: 2.25rem;
|
|
width: 2.25rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
background-color: white;
|
|
opacity: 0.6;
|
|
border: 1px solid var(--textcolor);
|
|
cursor: pointer;
|
|
}
|
|
.notes-wrapper .note-top-button:hover {
|
|
opacity: 1;
|
|
color: #fff;
|
|
background: var(--notesbackgroundcolor) radial-gradient(circle, transparent 1%, var(--notesbackgroundcolor) 1%) center/15000%;
|
|
}
|
|
}
|
|
|
|
/*////////////////////////////////////////////////////////
|
|
// //
|
|
// Widgetpage styles //
|
|
// //
|
|
////////////////////////////////////////////////////////*/
|
|
|
|
.widget-container,
|
|
.widget-row {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
align-content: flex-start;
|
|
}
|
|
|
|
.widget-title {
|
|
min-height: 24px;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.widget-container > div[class*=-col-wrapper] {
|
|
position: relative;
|
|
}
|
|
|
|
.empty-col,
|
|
.widget-col {
|
|
height: calc(100% - 10px);
|
|
}
|
|
|
|
[class^=widget-type-] {
|
|
height: 100%;
|
|
}
|
|
|
|
.widget-body [class^=widget-type-] {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.widget-title + [class^=widget-type-] {
|
|
height: calc(100% - 24px);
|
|
}
|
|
|
|
[class^=widget-type-] > * {
|
|
display: block; /* iframe is default inline, maar dat hebben we hier liever niet */
|
|
}
|
|
|
|
.resizing-col-wrapper > .widget-col,
|
|
.widget-col-wrapper > .widget-col,
|
|
.empty-col-wrapper > .empty-col {
|
|
border: 3.5px solid rgba(52, 63, 77, 0.25);
|
|
margin: 5px;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.widget-col-wrapper:not(.resizing-col-wrapper, .ui-draggable-dragging):hover > .widget-col,
|
|
.empty-col-wrapper:not(.resizing-col-wrapper ~ .empty-col-wrapper):hover > .empty-col {
|
|
border-color: rgba(52, 63, 77, 0.5);
|
|
}
|
|
|
|
.empty-col-wrapper > .empty-col {
|
|
position: relative;
|
|
border-style: dashed;
|
|
}
|
|
|
|
.empty-col-wrapper .tooltip {
|
|
max-width: 83px;
|
|
text-align: center;
|
|
visibility: hidden;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.widget-container:not(.low-clearance) > .empty-col-wrapper:hover .tooltip {
|
|
visibility: visible;
|
|
}
|
|
.resizing-col-wrapper ~ .empty-col-wrapper:hover .tooltip,
|
|
.widget-container:not(.low-clearance) > .empty-col-wrapper:hover i {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.widget-container:not(.low-clearance) > .resizing-col-wrapper ~ .empty-col-wrapper:hover i {
|
|
visibility: visible;
|
|
}
|
|
|
|
.widget-new-wrapper > .widget-col {
|
|
min-height: 5em;
|
|
border-style: dashed;
|
|
}
|
|
|
|
.big-tooltip {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 40px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.big-tooltip > i {
|
|
margin: 0 0.5em;
|
|
}
|
|
|
|
.widget-container + .widget-container .big-tooltip {
|
|
font-size: 0;
|
|
min-height: 150px;
|
|
}
|
|
|
|
.widget-new-wrapper,
|
|
.empty-col-wrapper > .empty-col {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.resizing-col-wrapper > .widget-col {
|
|
border-style: dotted;
|
|
}
|
|
|
|
.widget-type-flr img,
|
|
.widget-type-img img {
|
|
max-height: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
[class*=widget-type-] iframe {
|
|
width: 100%;
|
|
border: 0;
|
|
}
|
|
|
|
.ui-draggable-handle {
|
|
cursor: -webkit-grab;
|
|
cursor: grab;
|
|
}
|
|
|
|
.ui-draggable-handle:active {
|
|
cursor: -webkit-grabbing;
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.ui-droppable-hover > .widget-col,
|
|
.ui-droppable-hover > .empty-col {
|
|
opacity: 0.5;
|
|
border-style: dashed;
|
|
}
|
|
|
|
.widget-col-bg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
opacity: 0;
|
|
font-size: 80px;
|
|
background-color: white;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.ui-droppable-hover .widget-col-bg {
|
|
opacity: 1;
|
|
}
|
|
|
|
.ui-resizable-handle {
|
|
position: absolute;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 1em;
|
|
color: var(--textcolor);
|
|
}
|
|
|
|
.ui-resizable-handle.ui-resizable-e {
|
|
right: -3.5px;
|
|
}
|
|
|
|
.ui-resizable-handle.ui-resizable-s {
|
|
bottom: -3.5px;
|
|
}
|
|
|
|
.ui-draggable-dragging > .ui-resizable-handle, /* Hide eigen column resizer-handle tijdens draggen */
|
|
.ui-droppable-active > .ui-resizable-handle, /* En ook de andere column resizer-handle's */
|
|
.ui-draggable-dragging ~ .ui-resizable-s, /* En ook de eigen row resizer-handle */
|
|
.ui-droppable-active ~ .ui-resizable-s { /* En ook de row resizer-handles */
|
|
visibility: hidden;
|
|
}
|
|
|
|
/* Widget-icon styling */
|
|
.icons-wrapper {
|
|
position: absolute;
|
|
top: 4px;
|
|
right: 4px;
|
|
margin-top: 5px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.icons-wrapper > .widget-icon {
|
|
display: none;
|
|
width: 35px;
|
|
height: 35px;
|
|
background-color: #ffffff;
|
|
text-align: center;
|
|
color: var(--textcolor);
|
|
border: 1px dashed #ffffff;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.widget-icon:hover {
|
|
border-color: var(--textcolor);
|
|
}
|
|
|
|
.widget-container:not(.ui-resizable-resizing) .widget-col-wrapper:not(.resizing-col-wrapper, .ui-draggable-dragging):hover .widget-icon {
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.widget-container.ui-resizable-resizing .widget-size {
|
|
display: block;
|
|
}
|
|
.widget-size {
|
|
display: none;
|
|
background-color: #fff;
|
|
padding: 0 0.2em 0 0.5em;
|
|
margin: 0.2em;
|
|
opacity: 0.8;
|
|
border-radius: 0.2em;
|
|
color: #343F4D; /* Aareon Urban Grey */
|
|
}
|
|
|
|
.widget-size-value::after {
|
|
content: "px";
|
|
}
|
|
|
|
.empty-col {
|
|
color: var(--textcolor);
|
|
}
|
|
|
|
.empty-col > * {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
/* Met deze is bootstrap niet nodig (beter goed gejat ..) */
|
|
.item-width-0 { flex: 0 0 100px; visibility: hidden; }
|
|
.item-width-1 { width: 8.33333%; width: calc(99.98% / 12 * 1); }
|
|
.item-width-2 { width: 16.66666%; width: calc(99.98% / 12 * 2); }
|
|
.item-width-3 { width: 25%; width: calc(99.98% / 12 * 3); }
|
|
.item-width-4 { width: 33.33333%; width: calc(99.98% / 12 * 4); }
|
|
.item-width-5 { width: 41.66666%; width: calc(99.98% / 12 * 5); }
|
|
.item-width-6 { width: 50%; width: calc(99.98% / 12 * 6); }
|
|
.item-width-7 { width: 58.33333%; width: calc(99.98% / 12 * 7); }
|
|
.item-width-8 { width: 66.66666%; width: calc(99.98% / 12 * 8); }
|
|
.item-width-9 { width: 75%; width: calc(99.98% / 12 * 9); }
|
|
.item-width-10 { width: 83.33333%; width: calc(99.98% / 12 * 10); }
|
|
.item-width-11 { width: 91.66666%; width: calc(99.98% / 12 * 11); }
|
|
.item-width-12 { width: 100%; width: calc(99.98% / 12 * 12); }
|
|
|
|
.widget-col-wrapper {
|
|
flex-grow: 0;
|
|
}
|
|
|
|
.filler-col-wrapper {
|
|
flex: 1 0 0px;
|
|
}
|
|
|
|
/* Edit-mode */
|
|
.widget-container.editable .item-width-0 { visibility: visible; }
|
|
.widget-container .item-width-1 { width: calc((99.98% - 100px) / 12 * 1); }
|
|
.widget-container .item-width-2 { width: calc((99.98% - 100px) / 12 * 2); }
|
|
.widget-container .item-width-3 { width: calc((99.98% - 100px) / 12 * 3); }
|
|
.widget-container .item-width-4 { width: calc((99.98% - 100px) / 12 * 4); }
|
|
.widget-container .item-width-5 { width: calc((99.98% - 100px) / 12 * 5); }
|
|
.widget-container .item-width-6 { width: calc((99.98% - 100px) / 12 * 6); }
|
|
.widget-container .item-width-7 { width: calc((99.98% - 100px) / 12 * 7); }
|
|
.widget-container .item-width-8 { width: calc((99.98% - 100px) / 12 * 8); }
|
|
.widget-container .item-width-9 { width: calc((99.98% - 100px) / 12 * 9); }
|
|
.widget-container .item-width-10 { width: calc((99.98% - 100px) / 12 * 10); }
|
|
.widget-container .item-width-11 { width: calc((99.98% - 100px) / 12 * 11); }
|
|
.widget-container .item-width-12 { width: calc((99.98% - 100px) / 12 * 12); }
|
|
|
|
.low-clearance .tooltip {
|
|
height: 0;
|
|
font-size: 0;
|
|
}
|
|
|
|
/*////////////////////////////////////////////////////////
|
|
// //
|
|
// Probeersels //
|
|
// //
|
|
////////////////////////////////////////////////////////*/
|
|
|
|
/* Niet getabt? dan frames onder elkaar */
|
|
.col:not([aria-hidden], .sidebar) ~ .col[aria-hidden="false"],
|
|
.col[aria-hidden="false"] ~ .col:not([aria-hidden], .sidebar),
|
|
.fcltframe.col:not([aria-hidden], .sidebar) ~ .fcltframe.col:not([aria-hidden], .sidebar) {
|
|
flex-basis: 100%;
|
|
}
|
|
|
|
#productsearch {
|
|
font-family: var(--fontfamily), 'Font Awesome 6 Pro';
|
|
}
|
|
|
|
.notransition {
|
|
transition: none !important;
|
|
}
|
|
|
|
/* Voor de resize/scrollbars */
|
|
.fcltframe {
|
|
position: relative;
|
|
padding: 0px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.fcltframe > iframe {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
/*////////////////////////////////////////////////////////
|
|
// //
|
|
// Bootstrap overrules //
|
|
// //
|
|
////////////////////////////////////////////////////////*/
|
|
|
|
.col { /* We willen dat deze class wel wrapt indien nodig, met flex-basis: 0 (default) is de width gewoon 0% en wordt er niet ge-wrapt */
|
|
flex-basis: 0.01%;
|
|
}
|
|
|
|
/* Als ik onder col-lg kom dan wrappen de frame onder elkaar, dan moet de onthouden breedte van de sidebar niet gelden en mogen de resizehandlers weg */
|
|
@media (max-width: 991.98px)
|
|
{
|
|
.sidebar.col-12 {
|
|
flex-basis: 100%!important;
|
|
max-width: 100%!important;
|
|
}
|
|
.sidebar > .resizeHandle,
|
|
.sidebar > .sidebar-toggler {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/*////////////////////////////////////////////////////////
|
|
// //
|
|
// jQuery-ui overrules //
|
|
// //
|
|
////////////////////////////////////////////////////////*/
|
|
|
|
.ui-widget,
|
|
.ui-widget textarea,
|
|
.ui-widget button,
|
|
.ui-widget input,
|
|
.ui-widget th,
|
|
.ui-widget td,
|
|
.ui-widget select {
|
|
font-family: var(--fontfamily);
|
|
}
|
|
|
|
#ui-datepicker-div {
|
|
z-index: 101!important; /* div.fcltframeheader.floating +1 */
|
|
}
|
|
|
|
li[inmore]:not([inmore="0"]) {
|
|
display: none;
|
|
}
|
|
|
|
/* Want we willen FA icons in, bijvoorbeeld, de FcltMgr.confirm() */
|
|
.ui-dialog .ui-dialog-buttonpane {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding-right: 0.4em;
|
|
}
|
|
|
|
.modal #buttons ul li,
|
|
.ui-dialog .ui-dialog-buttonpane button {
|
|
min-width: 7.5rem;
|
|
}
|
|
.ui-dialog .ui-dialog-buttonpane button:last-of-type {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.ui-dialog-buttonset > .ui-button {
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
line-height: 1.8em;
|
|
}
|
|
|
|
.ui-dialog-buttonset > .ui-button > .ui-icon {
|
|
line-height: 1em;
|
|
font-size: 1.1em;
|
|
text-indent: 0;
|
|
margin-top: -0.05em;
|
|
background-image: none!important;
|
|
}
|
|
|
|
/* Want jQuery-ui maakt hier telkens 'auto' van maar dat gaat niet goed */
|
|
.fcltmodal {
|
|
display: block; /* Prevents inline spacing */
|
|
width: inherit!important;
|
|
}
|
|
|
|
/*////////////////////////////////////////////////////////
|
|
// //
|
|
// Desktop scrollbalk //
|
|
// //
|
|
////////////////////////////////////////////////////////*/
|
|
|
|
/* Firefox */
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(52, 63, 77, 0.2) rgba(0, 0, 0, 0);
|
|
}
|
|
*:hover {
|
|
scrollbar-color: rgba(52, 63, 77, 0.3) rgba(0, 0, 0, 0);
|
|
}
|
|
|
|
/* De rest (excl IE11) */
|
|
*:not(textarea)::-webkit-scrollbar {
|
|
height: 8px;
|
|
width: 8px;
|
|
}
|
|
|
|
/* Het beweegbare gedeelte vd scrollbalk */
|
|
*:not(textarea)::-webkit-scrollbar-thumb {
|
|
background-color: rgba(52, 63, 77, 0.2);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
body::-webkit-scrollbar:horizontal:hover { height: 12px; }
|
|
body::-webkit-scrollbar-thumb:vertical { border-radius: 50%/3px; }
|
|
body::-webkit-scrollbar-thumb:horizontal { border-radius: 4px/50%; }
|
|
|
|
*:not(textarea)::-webkit-scrollbar-thumb:hover,
|
|
*:not(textarea):hover::-webkit-scrollbar-thumb {
|
|
background-color: rgba(52, 63, 77, 0.3);
|
|
}
|
|
|
|
/* De balk zelf */
|
|
*:not(textarea)::-webkit-scrollbar-track {
|
|
opacity: 0;
|
|
}
|
|
|
|
/*////////////////////////////////////////////////////////
|
|
// //
|
|
// Zwaar wegende styling //
|
|
// //
|
|
////////////////////////////////////////////////////////*/
|
|
|
|
/* Hieronder alle zwaar wegende styling zodat !important niet nodig is */
|
|
|
|
/* Expliciet dubbel gedefinieerd (met span erbij om zwaarder te wegen) */
|
|
.input-icon-wrapper > span.secsearch {
|
|
display: none;
|
|
} |