7230 lines
158 KiB
C#
7230 lines
158 KiB
C#
/*
|
|
* $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(../APPL/Fonts/SkolarSansPEWeb-Rg.woff) format("woff");
|
|
font-weight: 400;
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
@font-face {
|
|
font-family: fclt-skolar-sans;
|
|
src: url(../APPL/Fonts/SkolarSansPEWeb-Sb.woff) format("woff");
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
}
|
|
@font-face {
|
|
font-family: fclt-skolar-sans;
|
|
src: url(../APPL/Fonts/SkolarSansPEWeb-Bd.woff) format("woff");
|
|
font-weight: 700;
|
|
font-weight: bold;
|
|
font-style: normal;
|
|
}
|
|
|
|
/* italic */
|
|
@font-face {
|
|
font-family: fclt-skolar-sans;
|
|
src: url(../APPL/Fonts/SkolarSansPEWeb-It.woff) format("woff");
|
|
font-weight: 400;
|
|
font-weight: normal;
|
|
font-style: italic;
|
|
}
|
|
@font-face {
|
|
font-family: fclt-skolar-sans;
|
|
src: url(../APPL/Fonts/SkolarSansPEWeb-SbIt.woff) format("woff");
|
|
font-weight: 600;
|
|
font-style: italic;
|
|
}
|
|
@font-face {
|
|
font-family: fclt-skolar-sans;
|
|
src: url(../APPL/Fonts/SkolarSansPEWeb-BdIt.woff) format("woff");
|
|
font-weight: 700;
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
}
|
|
|
|
h1, h2, h3, h4,
|
|
.card-header,
|
|
#portalmenu .menukop, #menutabs .menukop, div.filtermenukop
|
|
{
|
|
font-family: ==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: ==inputbackgroundcolor==; /* even zonder !important */
|
|
border-left: 2px solid rgba(52, 63, 77, 0.1); /* Aareon Urban Grey 10% */
|
|
}
|
|
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: ==fontfamily==;
|
|
font-size: 0.75em;
|
|
line-height: 1.8em;
|
|
text-align: left;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body.showmode td,
|
|
body.editmode td,
|
|
body#searchbody td
|
|
/* body#listbody zit op 12px */
|
|
{
|
|
font-size: 13px;
|
|
line-height: 24px;
|
|
}
|
|
|
|
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
|
|
{
|
|
font-weight: 600; /* semi-bold labels */
|
|
}
|
|
|
|
/* heel algemene styles */
|
|
textarea,
|
|
input,
|
|
th,
|
|
td,
|
|
select { /* Deze moeten allemaal afzonderlijk */
|
|
font-family: ==fontfamily==;
|
|
}
|
|
|
|
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: 1em;
|
|
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("../appl/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: 1.3em;
|
|
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;
|
|
color: ==tableheadercolor==;
|
|
padding: 2px 3px 2px 3px;
|
|
background-color: ==tableheaderbackgroundcolor==;
|
|
}
|
|
|
|
img { /* tekst-eigenschap voor de alt als de afbeelding er niet is */
|
|
text-transform: lowercase;
|
|
font-style: italic;
|
|
font-weight: 100;
|
|
}
|
|
|
|
.fa-1-5x {
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
#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:==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-family: Arial, sans-serif;
|
|
font-size: 0.75em;
|
|
background: url(==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: rgb(0,44,103);
|
|
padding: 40px;
|
|
border-radius: 4px;
|
|
margin: auto;
|
|
color: rgb(255,255,255);
|
|
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;
|
|
border: none;
|
|
border-bottom: 1px solid rgba(0,0,0,0.7);
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
outline: none;
|
|
xcolor: inherit;
|
|
}
|
|
#logindiv .illustration {
|
|
text-align: center;
|
|
padding: 15px 0 20px;
|
|
font-size: 100px;
|
|
color: rgb(245,157,4);
|
|
}
|
|
|
|
#logindiv #visname,
|
|
#logindiv #vispswd,
|
|
#logindiv #remember {
|
|
line-height: 2rem;
|
|
font-size: 16px;
|
|
color: inherit; /* label wijkt af van elders */
|
|
}
|
|
#logindiv #visname,
|
|
#logindiv #vispswd {
|
|
width: 100%;
|
|
}
|
|
#mobbutton {
|
|
cursor: pointer;
|
|
padding: 0px 12px;
|
|
color: ==buttoncolor==;
|
|
background-color:==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: ==buttonhovercolor==;
|
|
background-color:==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: 1px;
|
|
height: 30px;
|
|
align-items: center;
|
|
}
|
|
#loginfooter {
|
|
position: fixed;
|
|
bottom: 24px;
|
|
height: 24px;
|
|
width: 100%;
|
|
clear: both;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
color:==logincolor==;
|
|
}
|
|
.mobkey {
|
|
float: right;
|
|
}
|
|
|
|
.userphoto[onclick] {
|
|
cursor: pointer;
|
|
}
|
|
.circle {
|
|
background-color: ==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: ==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: url(==headerimage==) no-repeat;
|
|
background-position: left center;
|
|
background-color: ==headerbackgroundcolor==;
|
|
color: ==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: ==menucolor==;
|
|
background-color: ==menubackgroundcolor==;
|
|
border: 1px solid ==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: ==menukophovercolor==;
|
|
background-color: ==menukophoverbackgroundcolor==;
|
|
}
|
|
#headersuggest input.fld,
|
|
#headersearch input.fld
|
|
{
|
|
border: 1px solid ==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 ==buttonbackgroundcolor==;
|
|
border-top-right-radius: 3px;
|
|
border-bottom-right-radius: 3px;
|
|
background-color: ==inputbackgroundcolor==;
|
|
}
|
|
.moduleselector:hover {
|
|
cursor: pointer;
|
|
}
|
|
.moduleselector:active {
|
|
box-shadow: inset 0 0 3px ==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: ==headercolor==;
|
|
}
|
|
#headerfunctions > div {
|
|
display: inline-block;
|
|
margin: 0 1em;
|
|
}
|
|
|
|
.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 ==frameheaderbackgroundcolor==;
|
|
border-right: 0px solid ==frameheaderbackgroundcolor==;
|
|
border-radius: 4px;
|
|
}
|
|
.simpelpage {
|
|
padding: 3em;
|
|
font-size: 0.8em;
|
|
line-height: 1.6em;
|
|
font-weight: normal;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* **************************************************** */
|
|
/* **************************************************** */
|
|
/* ****** VOOR ?? ******** */
|
|
/* **************************************************** */
|
|
/* **************************************************** */
|
|
|
|
.lv_melding { /* noot: liever alle classes lowercase (conventie) */
|
|
border-radius: calc(.25rem - 1px);
|
|
background-color: ==buttonbackgroundcolor==;
|
|
color: ==buttoncolor==;
|
|
border-bottom: 1px solid #fffffe; /*backgroundcolor*/
|
|
}
|
|
|
|
.lv_melding:hover {
|
|
cursor: pointer;
|
|
color: ==buttonhovercolor==;
|
|
background-color: ==buttonhoverbackgroundcolor==;
|
|
transition: background-color 150ms;
|
|
}
|
|
|
|
.lv_melding:active {
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
.lv_melding h3 {
|
|
margin: auto;
|
|
min-height: 40px;
|
|
padding: 10px;
|
|
}
|
|
|
|
span.editnews {
|
|
opacity: 0.5;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
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.flexcontainer {
|
|
align-items: flex-start;
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
background-image: url("==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: ==buttonbackgroundcolor==; /*TODO*/
|
|
color: ==frameheadercolor==; /*TODO*/
|
|
}
|
|
|
|
div.seperator {
|
|
width: 100%;
|
|
height: 32px;
|
|
font-size: 2.5em;
|
|
padding: 0px 10px 0px 10px;
|
|
color: ==textcolor==;
|
|
font-family: ==fontfamily_titles==;
|
|
text-align: center;
|
|
border-bottom: 1px solid #ccc;
|
|
margin: 0.25em 0;
|
|
}
|
|
|
|
.bes-menu-col,
|
|
.mld-menu-col {
|
|
overflow: scroll;
|
|
height: calc(100vh - 32px);
|
|
}
|
|
|
|
div.mldicmenu {
|
|
height: 230px;
|
|
padding: 0px
|
|
}
|
|
|
|
div.besicmenu {
|
|
height: 250px;
|
|
padding: 0px
|
|
}
|
|
|
|
div.mldicmenu:hover,
|
|
div.iconmenu:hover,
|
|
div.besicmenu:hover {
|
|
cursor: pointer;
|
|
transition: 150ms;
|
|
opacity: 0.5;
|
|
transition: opacity 100ms;
|
|
}
|
|
|
|
div.iconmenu {
|
|
min-width: 200px;
|
|
min-height: 120px;
|
|
max-width: 600px;
|
|
max-height: 440px;
|
|
}
|
|
div.iconitem {
|
|
height: Calc(100% - 6px);
|
|
width: Calc(100% - 6px);
|
|
margin: 3px;
|
|
background-color: rgba(255,255,255,0.8); /* transparant over de eventuele achtergrondfoto */
|
|
}
|
|
div.iconitem:hover {
|
|
cursor: pointer;
|
|
}
|
|
div.iconimg {
|
|
box-sizing: border-box;
|
|
padding-top: 10px;
|
|
width: 100%;
|
|
height: 60%;
|
|
text-align: center;
|
|
}
|
|
div.iconimg img {
|
|
height: 100%;
|
|
width: auto;
|
|
margin: auto;
|
|
max-height: 100%;
|
|
max-width: 100%;
|
|
}
|
|
div.iconimg i {
|
|
position: relative;
|
|
top: 20%;
|
|
}
|
|
div.iconlabel {
|
|
box-sizing: border-box;
|
|
padding-top: 2px;
|
|
width: 100%;
|
|
height: 40%;
|
|
margin: auto;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-size: 0.85em;
|
|
line-height: 1.4em;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center
|
|
}
|
|
/* maar even kijken of dit wat is bij bes_fe_menu.asp*/
|
|
div.iconlabel2 {
|
|
box-sizing: border-box;
|
|
padding-top: 2px;
|
|
width: 100%;
|
|
height: 15%;
|
|
margin: auto;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-size: 0.85em;
|
|
line-height: 1.4em;
|
|
background-color: #f2f2f2;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center
|
|
}
|
|
/* end flexbox specific */
|
|
|
|
.fclt-icon-close
|
|
{
|
|
position: absolute;
|
|
right: .3em;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
display: flex;
|
|
align-items: center;
|
|
color: ==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;
|
|
}
|
|
|
|
.tabpinned:hover,
|
|
.tabclose:hover,
|
|
.tabcloseall:hover,
|
|
.pincurrenttab:hover {
|
|
transition: color 0.2s;
|
|
opacity: 1;
|
|
}
|
|
|
|
.tabcloseall, .pincurrenttab {
|
|
/* color: ==buttonbackgroundcolor==; /* dat is niet gegarandeerd goed */
|
|
color: ==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;
|
|
}
|
|
.tabcloseall:hover,
|
|
.pincurrenttab:hover {
|
|
color: ==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 ==dividercolor==;
|
|
}
|
|
div#menutabs ul.ui-tabs-nav::after,
|
|
div#maintabs ul.ui-tabs-nav::after {
|
|
content: "";
|
|
height: 0;
|
|
border-bottom: 1px solid ==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: ==textcolor==;
|
|
background-color: transparent;
|
|
border: 0;
|
|
}
|
|
|
|
/* label tag = de tekst */
|
|
label {
|
|
color: ==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;
|
|
}
|
|
|
|
|
|
/* ******* 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;
|
|
background-color: ==inputbackgroundcolor==;
|
|
border-radius: 50%;
|
|
color: ==textcolor==;
|
|
cursor: pointer;
|
|
}
|
|
|
|
span.multi_select_toggle:hover .fa-fw,
|
|
span.multi_suggest_toggle:hover .fa-fw {
|
|
color: ==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: ==textcolor==;
|
|
}
|
|
a[href^="mailto:"].fldmailto {
|
|
background-color: #fffffe; /*backgroundcolor*/
|
|
}
|
|
|
|
td.label:not(.flexsearch) + td span {
|
|
word-break: break-word;
|
|
-ms-line-break: anywhere;
|
|
}
|
|
|
|
/* ******* RESTANTEN ********************************** */
|
|
|
|
div#finRefInfoList td div
|
|
{
|
|
color: ==textcolor==;
|
|
}
|
|
|
|
/* 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: ==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;
|
|
}
|
|
|
|
.ia { /*inline action span */
|
|
cursor: pointer;
|
|
color: blue;
|
|
}
|
|
|
|
span.ia2 { /*inline action v2 */
|
|
cursor: pointer;
|
|
color: ==inlineactioncolor==;
|
|
border: 1px solid ==inlineactioncolor==;
|
|
margin: 1px;
|
|
padding: 2px 4px 2px 4px;
|
|
background-color: ==inlineactionbackgroundcolor==;
|
|
border-radius: 2px;
|
|
box-shadow: 1px 2px 2px #333;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
span.ia2:hover {
|
|
background-color: ==inlineactioncolor==;
|
|
color: ==inlineactionbackgroundcolor==;
|
|
}
|
|
|
|
.afwijkopstel {
|
|
font-weight: bold;
|
|
}
|
|
.dirty td {
|
|
opacity: 0.5;
|
|
}
|
|
.highlite td {
|
|
color: ==buttoncolor==;
|
|
background-color:==buttonbackgroundcolor==;
|
|
}
|
|
|
|
td.listid
|
|
{
|
|
color: #ccc
|
|
}
|
|
|
|
.msb { /* mld subject in list */
|
|
color: ==listsubjectcolor==;
|
|
}
|
|
.ac128, .ac2{
|
|
color: #9C0006;
|
|
}
|
|
.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,
|
|
.fcltfiller,
|
|
.fcltframeheader,
|
|
.fcltframefooter,
|
|
.sidebar-toggler,
|
|
.recentlychanged {
|
|
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: ==frameheaderbackgroundcolor==;
|
|
}
|
|
.hambdropdown {
|
|
background-color: ==frameheaderbackgroundcolor==;
|
|
position: absolute;
|
|
z-index: 11;
|
|
top: 100%;
|
|
right: 0px;
|
|
}
|
|
|
|
.fcltframeheader .iframer-title {
|
|
font-family: ==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;
|
|
}
|
|
|
|
#iframerextratitle {
|
|
font-size: 0.8em;
|
|
font-weight: normal;
|
|
font-style: italic;
|
|
color: ==frameheadercolor==;
|
|
}
|
|
|
|
/* Is dit beter? */
|
|
.iframer-title + #iframerextratitle:not(:empty)::before { content: "("; }
|
|
.iframer-title + #iframerextratitle:not(:empty)::after { content: ")"; }
|
|
|
|
[id^=autofilter-], #autofilter {
|
|
font-family: ==fontfamily_alt==;
|
|
padding: 2px 8px;
|
|
margin-left: 1em;
|
|
border: 0;
|
|
border-radius: 16px;
|
|
font-size: 1rem;
|
|
background-color: ==inputbackgroundcolor==;
|
|
opacity: 0.8;
|
|
}
|
|
.fcltblockhead #autofilter {
|
|
top: 0;
|
|
}
|
|
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: ==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: ==textcolor==;
|
|
opacity: 1.0;
|
|
}
|
|
|
|
/* 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;
|
|
margin-bottom: 0px;
|
|
margin-top: 3.5px;
|
|
margin-left: 2px;
|
|
border-radius: 8px;
|
|
opacity: 0.8;
|
|
padding: 2px 6px 3px 6px;
|
|
border: 1px solid #aaa;
|
|
}
|
|
div.filtermenukop {
|
|
display: none;
|
|
background-color: ==tableheaderbackgroundcolor==;
|
|
color: ==tableheadercolor==;
|
|
border: 1px solid ==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: ==inactivetabbackgroundcolor==;
|
|
}
|
|
.ui-tab.ui-state-default a {
|
|
color: ==inactivetabcolor==;
|
|
}
|
|
.ui-tab.ui-state-default .tabclose,
|
|
.ui-tab.ui-state-default .tabpinned {
|
|
color: ==inactivetabcolor==;
|
|
}
|
|
.ui-tab.ui-state-hover,
|
|
.ui-tab.ui-state-focus {
|
|
background-color: ==buttonhoverbackgroundcolor==;
|
|
}
|
|
.ui-tab.ui-state-hover a {
|
|
color :==buttonhovercolor==;
|
|
}
|
|
.ui-tab.ui-state-active {
|
|
border: 1px solid #aaa;
|
|
background-color: ==activetabbackgroundcolor==; /* sluit aan op pageheader */
|
|
font-weight: normal;
|
|
}
|
|
.ui-tab.ui-state-active a {
|
|
color: ==activetabcolor==;
|
|
}
|
|
.ui-tab.ui-state-active .tabclose,
|
|
.ui-tab.ui-state-active .tabpinned {
|
|
color: ==activetabcolor==;
|
|
}
|
|
|
|
.ui-widget-header {
|
|
border: 1px solid #aaa;
|
|
background: #FDFDFD; /* geen harde kleuren */
|
|
color: #222; /* geen harde kleuren */
|
|
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: ==frameheadercolor==!important;
|
|
background-color: ==frameheaderbackgroundcolor== !important;
|
|
}
|
|
.ui-widget-header.ui-dialog-titlebar {
|
|
font-family: ==fontfamily_titles==;
|
|
background-color: ==inactivetabbackgroundcolor==!important;
|
|
color: ==inactivetabcolor== !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: ==blockheaderbackgroundcolor== repeat-x left top;
|
|
color: ==blockheadercolor==;
|
|
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%;
|
|
}
|
|
/* #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;
|
|
}
|
|
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),
|
|
div#insLSF table > tbody tr div {
|
|
display: inline-block;
|
|
}
|
|
|
|
@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: ==activetabbackgroundcolor==;
|
|
}
|
|
/* Niet bij lijsten en het planbord */
|
|
body:not(#listbody, #planbody) td.label {
|
|
max-width: 250px;
|
|
width: 30%;
|
|
}
|
|
body:not(#listbody, #planbody) td.label:not(.flexsearch) + td {
|
|
width: 70%;
|
|
}
|
|
/* Correctie voor brede blokken (todo exact berekenen?) */
|
|
@media (min-width: 992px) /* Vanaf bootstrap 2-koloms breakpoint (lg) */
|
|
{
|
|
body:not(#listbody, #planbody) .col-12:not([class*=col-lg]) td.label {
|
|
width: 14.313%;
|
|
}
|
|
body:not(#listbody, #planbody) .col-12:not([class*=col-lg]) td.label + td {
|
|
width: 85.687%;
|
|
}
|
|
}
|
|
@media (min-width: 1488px) /* Vanaf bootstrap 3-koloms breakpoint (xxl) */
|
|
{
|
|
body:not(#listbody, #planbody) .col-12:not([class*=col-lg]) td.label {
|
|
width: 9.218%;
|
|
}
|
|
body:not(#listbody, #planbody) .col-12:not([class*=col-lg]) td.label + td {
|
|
width: 90.782%;
|
|
}
|
|
}
|
|
|
|
/* 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.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,
|
|
td.label label,
|
|
td.label label > span {
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
td.label.textarea,
|
|
td.label.textarea label,
|
|
td.label.textarea label > span {
|
|
white-space: normal;
|
|
overflow: visible;
|
|
}
|
|
td.checkbox-td {
|
|
width: 30px;
|
|
}
|
|
|
|
td.label div span:nth-child(1) {
|
|
max-width: 180px;
|
|
display: inline-block;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.fcltblockhead {
|
|
background-color:==blockheaderbackgroundcolor==;
|
|
color: ==blockheadercolor==;
|
|
font-size: 1.2em;
|
|
padding: 10px 0 0 2px;
|
|
height: 25px;
|
|
border-bottom: 2px solid #d2d2d2;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
#resDelete .fcltblockhead {
|
|
height: auto;
|
|
}
|
|
|
|
.fcltblockhead img.details {
|
|
margin-bottom: -3px;
|
|
}
|
|
|
|
body.modal .fcltblockhead {
|
|
height: auto;
|
|
border: 0px;
|
|
}
|
|
h2.page-header {
|
|
font-size: 1.5rem;
|
|
padding: 14px 0 14px 0;
|
|
text-align: center;
|
|
background-color: ==activetabbackgroundcolor==;
|
|
color: ==activetabcolor==;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* the grid model */
|
|
.planbordgrid {
|
|
display: grid;
|
|
background-color: #fff;
|
|
}
|
|
.planbordgrid .badge {
|
|
display: inline-block;
|
|
padding: .25em .4em;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
vertical-align: baseline;
|
|
border-radius: .25rem;
|
|
font-size: 90%;
|
|
margin-left: 6px;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
background-color: ==tableheadercolor==;
|
|
color: ==tableheaderbackgroundcolor==;
|
|
}
|
|
|
|
div.labelgrid label {
|
|
font-family: ==fontfamily_titles==;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-size: 1.1em;
|
|
padding-left: 6px;
|
|
}
|
|
div.labelgrid label i {
|
|
vertical-align: bottom;
|
|
padding: 1px;
|
|
color: ==tableheaderbackgroundcolor==;
|
|
}
|
|
#mod_res_selectroom .labelgrid:hover,
|
|
#mod_res_selectroom .labelgrid:hover label i {
|
|
color: ==menuitemhovercolor==;
|
|
background-color: ==menuitemhoverbackgroundcolor==;
|
|
}
|
|
|
|
div.capaciteitgrid {
|
|
font-size: 0.8em;
|
|
text-align: right;
|
|
}
|
|
div.rd { /* reserveringsdetails */
|
|
font-family: Arial Narrow, Arial, Helvetica, sans-serif;
|
|
line-height: 1.1em;
|
|
padding-left: 4px;
|
|
padding-bottom: 2px;
|
|
}
|
|
span.rdk { /* reserveringsdetails-kop */
|
|
text-decoration: underline;
|
|
padding-bottom: 2px;
|
|
display: block;
|
|
}
|
|
span.rdt { /* reserveringsdetails-titel */
|
|
display: block;
|
|
font-weight: bold;
|
|
}
|
|
span.rdn { /* reserveringsdetails-naam */
|
|
display: block;
|
|
font-style: italic;
|
|
}
|
|
div.ric { /* reserveringsdetails-icons */
|
|
float: right;
|
|
font-size: 2em;
|
|
padding-top: 2px;
|
|
padding-right: 2px;
|
|
}
|
|
div.rbz { /* reserveringsdetails-bezoekers */
|
|
color: #CCC;
|
|
}
|
|
span.maxgridrows {
|
|
font-style: italic;
|
|
}
|
|
|
|
.res_optie_eigen div.arrowleft,
|
|
.res_optie_eigen div.arrowright {
|
|
border-left-color: #F59D04;
|
|
border-right-color: #F59D04;
|
|
}
|
|
|
|
/* Tangerine */
|
|
.res_definitief_eigen div.arrowleft,
|
|
.res_definitief_eigen div.arrowright {
|
|
border-left-color: #CC5252;
|
|
border-right-color: #CC5252;
|
|
}
|
|
|
|
/* Grapefruit */
|
|
.res_optie div.arrowleft,
|
|
.res_optie div.arrowright {
|
|
border-left-color: #0FD3BB;
|
|
border-right-color: #0FD3BB;
|
|
}
|
|
|
|
/* Ocean Green */
|
|
.res_definitief div.arrowleft,
|
|
.res_definitief div.arrowright {
|
|
border-left-color: #007764;
|
|
border-right-color: #007764;
|
|
}
|
|
|
|
/* Pine Green */
|
|
.res_blok div.arrowleft,
|
|
.res_blok div.arrowright {
|
|
border-left-color: rgba(255, 255, 255, 0.6);
|
|
border-right-color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
|
|
/* bijna als planbordgrid-achtergrond*/
|
|
.res_lunchblok div.arrowleft,
|
|
.res_lunchblok div.arrowright {
|
|
border-left-color: #fffb;
|
|
border-right-color: #fffb;
|
|
}
|
|
|
|
/* bijna als planbordgrid-achtergrond */
|
|
/* hex-kleuren met 4 of 8 karakters worden niet in IE11 ondersteund (rgba() wel) */
|
|
.res_vervallen div.arrowleft,
|
|
.res_vervallen div.arrowright {
|
|
border-left-color: #73007E;
|
|
border-right-color: #73007E;
|
|
}
|
|
|
|
/* Berry */
|
|
.res_nietvrij div.arrowleft,
|
|
.res_nietvrij div.arrowright {
|
|
border-left-color: #B1B3B4;
|
|
border-right-color: #B1B3B4;
|
|
}
|
|
|
|
/* Niet beschikbaar: oranje LICHTGROEN */
|
|
/* .res_cleaning div.arrowleft,
|
|
.res_cleaning div.arrowright {
|
|
border-left-color: #808080;
|
|
border-right-color: #808080;
|
|
} */
|
|
|
|
.res_extern div.arrowleft,
|
|
.res_extern div.arrowright {
|
|
border-left-color: #4e85db;
|
|
border-right-color: #4e85db;
|
|
}
|
|
|
|
/* Via API (extern_id) gereserveerd */
|
|
.res_fatal div.arrowleft,
|
|
.res_fatal div.arrowright {
|
|
border-left-color: #EC1818;
|
|
border-right-color: #EC1818;
|
|
|
|
}
|
|
.res_optie_eigen div.arrowleft,
|
|
.res_optie_eigen div.arrowright {
|
|
border-left-color: #F59D04;
|
|
border-right-color: #F59D04;
|
|
}
|
|
|
|
/* Tangerine */
|
|
.res_definitief_eigen div.arrowleft,
|
|
.res_definitief_eigen div.arrowright {
|
|
border-left-color: #CC5252;
|
|
border-right-color: #CC5252;
|
|
}
|
|
|
|
.res_optie_eigen:not(div.overflowleft, div.overflowright),
|
|
.res_definitief_eigen:not(div.overflowleft, div.overflowright),
|
|
.res_optie:not(div.overflowleft, div.overflowright),
|
|
.res_definitief:not(div.overflowleft, div.overflowright),
|
|
.res_blok:not(div.overflowleft, div.overflowright),
|
|
.res_lunchblok:not(div.overflowleft, div.overflowright),
|
|
.res_vervallen:not(div.overflowleft, div.overflowright),
|
|
.res_cleaning:not(div.overflowleft, div.overflowright),
|
|
.res_extern:not(div.overflowleft, div.overflowright),
|
|
.res_fatal:not(div.overflowleft, div.overflowright),
|
|
.res_nietvrij:not(div.overflowleft, div.overflowright) {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.res_optie_eigen { background-color: #F59D04; color: #fff; } /* Tangerine */
|
|
.res_definitief_eigen { background-color: #CC5252; color: #fff; } /* Grapefruit */
|
|
.res_optie { background-color: #0FD3BB; color: #333; } /* Ocean Green */
|
|
.res_definitief { background-color: #007764; color: #fff; } /* Pine Green */
|
|
.res_blok { background-color: rgba(255, 255, 255, 0.6); color: #333;} /* bijna als planbordgrid-achtergrond*/
|
|
.res_lunchblok { background-color: #fffb;} /* bijna als planbordgrid-achtergrond */ /* hex-kleuren met 4 of 8 karakters worden niet in IE11 ondersteund (rgba() wel) */
|
|
.res_vervallen { background-color: #73007E; color: #fff;} /* Berry */
|
|
.res_nietvrij { background-color: #B1B3B4; color: #000; } /* Niet beschikbaar: oranje LICHTGROEN */
|
|
.res_cleaning { border-left-style: solid;
|
|
border-left-color: #808080;
|
|
border-right-style: solid;
|
|
border-right-color: #808080;
|
|
}
|
|
.res_extern { background-color: #4e85db; color: #fff;} /* Via API (extern_id) gereserveerd */
|
|
.res_fatal {
|
|
background-color: #EC1818;
|
|
color: #fff;
|
|
}
|
|
|
|
.admitscreen {
|
|
font-family: ==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;
|
|
}
|
|
/* sensor-classes */
|
|
.icongrid { font-size: 1.4em;}
|
|
.sens-blocked { color: #0b0bae;}
|
|
.sens-fatal { color: red;}
|
|
.sens-free { color: #45ca45;}
|
|
.sens-occupied { color: #d33121;}
|
|
.sens-uncertain { color: #aea8a8;}
|
|
|
|
:root {
|
|
--factor: 1;
|
|
--hourpx: 96px;
|
|
--unit025: calc(.25 * hour_px)px;
|
|
--unit050: calc(.5 * hour_px)px;
|
|
--unit075: calc(.75 * hour_px)px;
|
|
--unit100: calc(hour_px)px;
|
|
--unit125: calc(1.25 * hour_px)px;
|
|
--displayhour1: initial;
|
|
--displayhour2: initial;
|
|
--displayhour3: initial;
|
|
--toppos: 0;
|
|
--listtop: 30px;
|
|
}
|
|
div.hour-1 {
|
|
display: var(--displayhour1);
|
|
}
|
|
div.hour-2, div.hour-4 {
|
|
display: var(--displayhour2);
|
|
}
|
|
div.hour-3 {
|
|
display: var(--displayhour3);
|
|
}
|
|
div.res_cleaning[prc="0.25"] {
|
|
border-left-width: calc(.25 * var(--hourpx));
|
|
margin-left: var(--unit025);
|
|
}
|
|
div.res_cleaning[prc="0.50"], div.res_cleaning[prc="0.5"] {
|
|
border-left-width: calc(.5 * var(--hourpx));
|
|
margin-left: var(--unit050);
|
|
}
|
|
div.res_cleaning[prc="0.75"] {
|
|
border-left-width: calc(.75 * var(--hourpx));
|
|
margin-left: var(--unit075);
|
|
}
|
|
div.res_cleaning[prc="1.00"], div.res_cleaning[prc="1"] {
|
|
border-left-width: var(--hourpx);
|
|
margin-left: var(--unit100);
|
|
}
|
|
div.res_cleaning[prc="1.25"] {
|
|
border-left-width: calc(1.25 * var(--hourpx));
|
|
margin-left: var(--unit125);
|
|
}
|
|
div.res_cleaning[poc="0.25"] {
|
|
border-right-width: calc(.25 * var(--hourpx));
|
|
margin-right: var(--unit025);
|
|
}
|
|
div.res_cleaning[poc="0.50"], div.res_cleaning[poc="0.5"] {
|
|
border-right-width: calc(.5 * var(--hourpx));
|
|
margin-right: var(--unit050)
|
|
}
|
|
div.res_cleaning[poc="0.75"] {
|
|
border-right-width: calc(.75 * var(--hourpx));
|
|
margin-right: var(--unit075);
|
|
}
|
|
div.res_cleaning[poc="1.00"], div.res_cleaning[poc="1"] {
|
|
border-right-width: var(--hourpx);
|
|
margin-right: var(--unit100);
|
|
}
|
|
div.res_cleaning[poc="1.25"] {
|
|
border-right-width: calc(1.25 * var(--hourpx));
|
|
margin-right: var(--unit125);
|
|
}
|
|
|
|
.grid {
|
|
width: 100vw;
|
|
max-width: 100%;
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: 0 1fr;
|
|
overflow: hidden;
|
|
}
|
|
|
|
body.modal .grid {
|
|
padding-right: 5px; /* let op; de waarde hiervan moet gelijk zijn aan de negatieve margin van [class^=plantimegrid], .plandategrid { margin: -#px } */
|
|
}
|
|
|
|
/* Enkele aanpassingen voor planbord inline (voorzieningen subframe bijvoorbeeld) */
|
|
.card-body .grid {
|
|
width: 100%;
|
|
outline: 1px solid rgba(52, 63, 77, 0.2);
|
|
}
|
|
.card-body [id$="-body"].planbordgrid {
|
|
margin-bottom: -5px;
|
|
}
|
|
/* Einde voorzieningen aanpassingen */
|
|
|
|
div.fcltframeheader.floating {
|
|
max-width: 100%;
|
|
width: 100vw;
|
|
position: absolute;
|
|
top: var(--toppos);
|
|
z-index: 11;
|
|
}
|
|
.grid div.header.floating {
|
|
max-width: 100%;
|
|
position: absolute;
|
|
top: calc(var(--toppos) + var(--listtop));
|
|
z-index: 10;
|
|
}
|
|
.header {
|
|
grid-area: 1/1;
|
|
}
|
|
.body {
|
|
grid-area: 2/1;
|
|
}
|
|
|
|
div.grid input[id^=autofilter-] {
|
|
align-self: center;
|
|
grid-area: 1/1/3/1;
|
|
justify-self: left;
|
|
height: 22px;
|
|
}
|
|
[class^=plantimegrid], .plandategrid {
|
|
text-align: center;
|
|
background-color: white;
|
|
margin: 0 -5px;
|
|
word-wrap: normal;
|
|
}
|
|
div.click {
|
|
cursor: pointer;
|
|
}
|
|
div.planbordgrid {
|
|
width: 100%;
|
|
display: grid;
|
|
grid-template-columns: 310px 60px;
|
|
grid-auto-columns: 1fr;
|
|
grid-auto-rows: minmax(0px, auto);
|
|
row-gap: 0px;
|
|
-moz-column-gap: 1px;
|
|
column-gap: 1px;
|
|
}
|
|
div.planbordgrid.deel {
|
|
grid-template-columns: 240px 20px;
|
|
}
|
|
div[data-loc].hidden {
|
|
grid-auto-rows: 0;
|
|
overflow-y: hidden;
|
|
}
|
|
div.planbordgrid > div {
|
|
margin-bottom: 5px;
|
|
}
|
|
div.rrdet {
|
|
font-family: Tahoma, Arial, Helvetica, sans-serif;
|
|
font-size: .9em;
|
|
/* Padding zit op .rrdesc-wrapper */
|
|
padding: 0;
|
|
margin: 0;
|
|
line-height: 1.2em;
|
|
}
|
|
.rrphoto {
|
|
min-height: 100px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-position: center;
|
|
background-size: cover;
|
|
/* background-image-url wordt inline gezet want komt uit de DB */
|
|
}
|
|
.rrphoto .rrdesc-wrapper {
|
|
background: rgba(255, 255, 255, 0.7);
|
|
color: #222;
|
|
margin: 8px;
|
|
border-radius: 4px;
|
|
transition: background 150ms ease-out;
|
|
}
|
|
.rrdesc-wrapper {
|
|
padding: 4px 6px;
|
|
}
|
|
.rrphoto:hover .rrdesc-wrapper {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
}
|
|
div.rc-compact, div.rc {
|
|
background-color: rgba(52,63,77,0.2); /* urban grey */
|
|
z-index: 0;
|
|
}
|
|
div.labelgrid, div.capaciteitgrid {
|
|
white-space: normal;
|
|
z-index: 1;
|
|
/* background-color: rgba(52,63,77,0.1); /* urban grey */
|
|
|
|
}
|
|
div.locatiegrid, div.insdiscgrid {
|
|
cursor: pointer;
|
|
color: ==tableheadercolor==;
|
|
background-color: ==tableheaderbackgroundcolor==;
|
|
padding: 5px;
|
|
font-weight: bold;
|
|
}
|
|
div.locatiegrid::before, div.insdiscgrid::before {
|
|
font-family: "Font Awesome 5 Pro";
|
|
font-weight: 900;
|
|
padding-right: 5px;
|
|
content: "\f078";
|
|
}
|
|
div.locatiegrid.collapsed::before, div.insdiscgrid.collapsed::before {
|
|
font-family: "Font Awesome 5 Pro";
|
|
font-weight: 900;
|
|
padding-left: 1.5px;
|
|
padding-right: 6.5px;
|
|
content: "\f054";
|
|
}
|
|
.res_optie_eigen, /* Optie eigen reservering: lichtblauw */
|
|
.res_definitief_eigen, /* Definitief eigen reservering: lichtrood */
|
|
.res_optie, /* Optie: blauw ORANJE */
|
|
.res_definitief, /* Definitief: rood GROEN */
|
|
.res_blok, /* Blokkade: zwart GRIJS */
|
|
.res_vervallen, /* Vervallen: paars */
|
|
.res_nietvrij, /* Niet beschikbaar: oranje LICHTGROEN */
|
|
.res_cleaning,
|
|
.res_nieuw,
|
|
.res_fatal, /* dirty */
|
|
.res_extern { /* Via API (extern_id) gereserveerd */
|
|
z-index: 1;
|
|
}
|
|
@page {
|
|
size: A4 landscape;
|
|
}
|
|
@media print {
|
|
body, .grid {
|
|
width: 29cm;
|
|
}
|
|
div.fcltframeheader.floating,
|
|
.grid div.header.floating {
|
|
display: none;
|
|
}
|
|
.grid div.body div.rc {
|
|
border: .5px solid #eae6e6;
|
|
outline: 1.5px solid white;
|
|
}
|
|
div.ric {
|
|
float: none;
|
|
}
|
|
div.res_optie_eigen,
|
|
div.res_definitief_eigen,
|
|
div.res_optie,
|
|
div.res_definitief,
|
|
div.res_blok,
|
|
div.res_vervallen,
|
|
div.res_nietvrij {
|
|
height:unset!important;
|
|
}
|
|
}
|
|
|
|
/* En BINNEN het frame de blokken op de pagina's */
|
|
.mainpage {
|
|
background-image: url("==portalbgimage==");
|
|
background-position: center; /* ? */
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-attachment: fixed;
|
|
}
|
|
.showmode,
|
|
.editmode {
|
|
background-image: url("==framebgimage==");
|
|
background-size: cover;
|
|
}
|
|
.listmode {
|
|
/* background-color: #fafafa; ofzo? */
|
|
}
|
|
.xmainpage { /* Zo dan? Nee?*/
|
|
background-color: ==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: ==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: ==textcolor==;
|
|
}
|
|
.subtab-icon {
|
|
margin-right: 4px;
|
|
}
|
|
/* Dit is de subtab-badge met het aantal regels */
|
|
.subtabs li.ui-tab a::after {
|
|
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";
|
|
display: inline-block;
|
|
padding: 0.2em .4em;
|
|
border: 0;
|
|
box-shadow: 0 0 0 1px ==textcolor==;
|
|
background-color: ==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 a.badge-active::after {
|
|
content: attr(data-lines);
|
|
}
|
|
.subtabs li.ui-tab:not(.ui-state-active):hover a {
|
|
color: ==buttonhoverbackgroundcolor==; /* dat is natuurlijk niet altijd goed */
|
|
}
|
|
.subtabs li.ui-tab:not(.ui-state-active):hover a.badge-active::after {
|
|
box-shadow: 0 0 0 1px ==buttonhoverbackgroundcolor==;
|
|
}
|
|
.subtabs li.ui-state-active a {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* divs waarin de flexkenmerken geladen worden. Hebben straks ook .flexlist. Deze hoeven niet zichtbaar te zijn */
|
|
#mldFlexList,
|
|
#resFlexListMain,
|
|
#insFlexList
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
.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;
|
|
cursor: pointer;
|
|
vertical-align: top;
|
|
margin-top: 1px;
|
|
color: ==buttonbackgroundcolor==;
|
|
}
|
|
|
|
span.facautoreport {
|
|
cursor: pointer;
|
|
color: ==buttonbackgroundcolor==;
|
|
}
|
|
|
|
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: ==buttonbackgroundcolor== 1px 1px 9px 1px;
|
|
}
|
|
/* uren registratie iconen. Moeten misschien een keer een autokleur krijgen */
|
|
.notperfect .fa-comment-o, .notperfect .fa-comment {
|
|
padding-left: 8px;
|
|
cursor: pointer;
|
|
vertical-align: top;
|
|
margin-top: 1px;
|
|
color: #2b5797;
|
|
}
|
|
|
|
.preview i {
|
|
color: ==buttonbackgroundcolor==; /* deze is niet zeker goed */
|
|
}
|
|
.preview:hover i {
|
|
color: ==buttonhoverbackgroundcolor==;
|
|
}
|
|
span.flexsize,
|
|
span.tooltip {
|
|
font-family: ==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;
|
|
}
|
|
|
|
.invoerinsp {
|
|
}
|
|
|
|
.uitstelinsp {
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* For first use intropage*/
|
|
div.wbackground {
|
|
background-image: url("../appl/Pictures/welcomebg.jpg");
|
|
background-repeat:no-repeat;
|
|
background-position:center;
|
|
background-size: cover;
|
|
padding:10px 20px 10px 20px;
|
|
}
|
|
.transbox {
|
|
padding: 15px;
|
|
text-align: center;
|
|
border-radius:4px;
|
|
margin:4px;
|
|
box-shadow: 2px 2px 2px #888888;
|
|
margin: 30px 50px;
|
|
background-color: #ffffff;
|
|
border: 1px solid black;
|
|
opacity: 0.98;
|
|
}
|
|
|
|
.wwelcome {
|
|
}
|
|
.wtitle {
|
|
color: #222;
|
|
font-size: 1.8em;
|
|
}
|
|
.wintro, .wlinebye {
|
|
color: #333;
|
|
font-size: 1.4em;
|
|
padding: 2em 0 1em 0;
|
|
}
|
|
.wline1, .wline2, .wline3, .wline4, .wline5 {
|
|
color: #444;
|
|
font-size: 1.2em;
|
|
line-height: 1.8em;
|
|
text-align: left;
|
|
padding: 0 10% 0 10%;
|
|
}
|
|
|
|
|
|
/* For my personalized homepage*/
|
|
#mywelcome , #mymessages, #myactions{
|
|
background-color: ==activetabbackgroundcolor==;
|
|
color: ==textcolor==;
|
|
height: 10%;
|
|
margin: 5px 3px 0 3px;
|
|
padding: 0;
|
|
}
|
|
#mywelcomeframe {
|
|
padding: 0;
|
|
}
|
|
#mywelcometitle{
|
|
background-color: ==welcomebackgroundcolor==;
|
|
color: ==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;
|
|
}
|
|
#mywelcomeinfo {
|
|
background-color: ==tableheaderbackgroundcolor==;
|
|
color: ==tableheadercolor==;
|
|
border-radius: 4px 4px 0 0;
|
|
margin-top: 1px;
|
|
font-size: 1.2em;
|
|
}
|
|
.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; color:#000; font-size:100%;}
|
|
#facforum div.hideNews { display: inline-block; float: right; margin-right:30px; position:relative; }
|
|
#facforum i.hideNews { }
|
|
|
|
.nieuwsbody {
|
|
background-color: #fffffe; /*backgroundcolor*/
|
|
background-image: url("==newsbgimage==");
|
|
background-repeat :no-repeat;
|
|
background-size: cover;
|
|
background-position: center;
|
|
padding: 0;
|
|
margin: 0;
|
|
border: 0px solid #ccc;
|
|
color: ==newscolor==;
|
|
}
|
|
.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: none;
|
|
font-weight: bold;
|
|
}
|
|
.nieuwsdetails {
|
|
color: ==newscolor==; /* Backup voor als transparancy truucje van de regel hieronder niet werkt */
|
|
color: ==newscolor==80;
|
|
font-weight: lighter;
|
|
margin: 1px 20px 0px 14px;
|
|
padding-bottom: 12px;
|
|
line-height: 1.3em;
|
|
}
|
|
span.nusr { /* RWSN#64739 */
|
|
display: none;
|
|
}
|
|
div.showmorenews {
|
|
text-align: center;
|
|
}
|
|
.nieuwsbodyfull .nieuwsdetails {font-size: 0.9em;}
|
|
.nieuwsbody .nieuwsdetails {font-size: 0.8em;}
|
|
|
|
.nieuwsbodyfull{
|
|
padding: 15px;
|
|
border: 7px solid #919191;
|
|
border-radius: 5px;
|
|
}
|
|
hr.nieuwsep {
|
|
border: 1px solid ==buttonbackgroundcolor==;
|
|
box-shadow: ==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: ==linkhovercolor==;
|
|
}
|
|
|
|
.newstextFreshRed td {font-weight: bold; color: red;}
|
|
.newstextFresh td {font-weight: normal; color: ==textcolor==;}
|
|
.newstext td{
|
|
color: ==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;
|
|
}
|
|
|
|
.flikefoot {}
|
|
|
|
#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;
|
|
text-align: center; /* Dit dan? Center of right? */
|
|
}
|
|
|
|
#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: absolute;
|
|
left: 50%;
|
|
transform: translate(-50%, 100%); /* Horizontaal in het midden, verticaal 1x spinner-hoogte naar onderen */
|
|
z-index: 999;
|
|
}
|
|
.busyoverlay {
|
|
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: ==fontfamily_titles==;
|
|
font-style: normal;
|
|
list-style-type: none;
|
|
display: inline-block;
|
|
}
|
|
|
|
#buttons ul li,
|
|
#buttons ul li a,
|
|
.mv,
|
|
.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: 1px 14px 5px 10px;
|
|
color: ==buttoncolor==;
|
|
background-color:==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;
|
|
}
|
|
|
|
#sel_room {
|
|
text-transform: none;
|
|
}
|
|
|
|
span.bijlage, span.bijlage1, span.endicon {
|
|
color: ==buttoncolor==;
|
|
}
|
|
|
|
/* geen uppercase want heeft icon */
|
|
#buttons.vertical {
|
|
text-transform: none;
|
|
}
|
|
/* 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: ==buttoncolor==;
|
|
background-color: ==buttonbackgroundcolor==;
|
|
border: 1px solid transparent;
|
|
}
|
|
#buttons ul li.emphasismedium, /* Nodig voor css specificity */
|
|
.emphasismedium,
|
|
.advReset
|
|
{
|
|
color: ==buttoncolormediumlow==;
|
|
background-color: ==buttonbackgroundcolormediumlow==;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
#buttons ul li.emphasislow, /* Nodig voor css specificity */
|
|
.emphasislow,
|
|
.emphasislow a, /* ook ja? */
|
|
.resultprintcancel,
|
|
.alertCancel,
|
|
#linkCancel
|
|
{
|
|
color: ==buttoncolormediumlow==;
|
|
background-color: ==buttonbackgroundcolormediumlow==;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
#buttons.hambdropdown ul li {
|
|
text-align: left;
|
|
}
|
|
|
|
input[type=button]:hover:not([disabled]),
|
|
input[type=text].button:hover:not([disabled]),
|
|
.uploadbutton:hover,
|
|
span.button:hover {
|
|
color: ==buttonhovercolor==;
|
|
background-color:==buttonhoverbackgroundcolor==;
|
|
}
|
|
|
|
input:hover:not([disabled]) + span.bijlage,
|
|
input:hover:not([disabled]) + span.bijlage1,
|
|
input:hover:not([disabled]) + span.endicon {
|
|
color: ==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 ==buttoncolor==; /* IE11 backup */
|
|
border: 1px solid ==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,
|
|
.blockbuttoncontainer #buttons ul li:hover span,
|
|
body.showmode #buttons ul li:hover {
|
|
color: ==buttonhovercolor==;
|
|
background-color: ==buttonhoverbackgroundcolor==;
|
|
}
|
|
|
|
#buttons ul li:hover,
|
|
.mv:hover {
|
|
background-color: ==blockheaderbackgroundcolor==;
|
|
color: ==blockheadercolor==;
|
|
border: 1px solid ==buttonhoverbackgroundcolor==;
|
|
}
|
|
/* verticale (dialog) buttons */
|
|
#buttons ul li.vertical {
|
|
display: block;
|
|
}
|
|
#buttons.vertical {
|
|
min-width: 300px;
|
|
}
|
|
#buttons.vertical ul li { /* de buttons */
|
|
color: ==textcolor==;
|
|
}
|
|
#buttons.vertical ul li i { /* FA icons */
|
|
font-size: 1.5em;
|
|
margin-right: 11px;
|
|
}
|
|
#buttons.vertical ul li:hover {
|
|
background-color: ==buttonhoverbackgroundcolor==;
|
|
color: ==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;
|
|
}
|
|
|
|
#buttons ul li.dialog:hover *:not(i) {
|
|
text-decoration: underline;
|
|
}
|
|
/* 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: ==buttonhovercolor==;
|
|
background-color: ==buttonhoverbackgroundcolor==;
|
|
text-decoration: none;
|
|
}
|
|
#buttons ul li.emphasislow:hover, .alertCancel:hover, .resultprintcancel:hover, #linkCancel:hover {
|
|
color: ==buttonhovercolor==;
|
|
background-color: ==buttonhoverbackgroundcolor==;
|
|
text-decoration: none;
|
|
border: 1px solid transparent;
|
|
border-radius: 0px;
|
|
border-bottom: 1px solid ==buttonhoverbackgroundcolor==;
|
|
}
|
|
|
|
#buttons ul li:hover,
|
|
.alertOk:hover,
|
|
.advOk:hover,
|
|
.resultprintno:hover,
|
|
.advReset:hover,
|
|
#linkOk:hover,
|
|
#besfavbtnall:hover,
|
|
.sidebar-toggler:hover {
|
|
color: ==buttonhovercolor==;
|
|
text-decoration: none;
|
|
background: ==buttonhoverbackgroundcolor== radial-gradient(circle, transparent 1%, ==buttonhoverbackgroundcolor== 1%) center/15000%;
|
|
}
|
|
|
|
#buttons ul li.emphasishigh:active,
|
|
#linkOk:active, #besfavbtnall:active,
|
|
#buttons ul li.emphasismedium:active {
|
|
background-color: ==buttonhovercolor==;
|
|
background-size: 100%;
|
|
}
|
|
|
|
#buttons ul li.emphasislow:active {
|
|
color: ==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: ==buttoncolor==;
|
|
background-color: ==buttonbackgroundcolor==;
|
|
border-color: ==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;
|
|
}
|
|
|
|
td.profile {
|
|
}
|
|
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;
|
|
}
|
|
span.truncate {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.dragdrop {
|
|
cursor: auto;
|
|
margin-top: 8px;
|
|
text-align: center;
|
|
}
|
|
|
|
img.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: ==linkcolor==;
|
|
}
|
|
|
|
#mldBehandel a.details, #mldClose a.details {
|
|
color: ==blockheadercolor==;
|
|
}
|
|
|
|
input.details:hover,
|
|
span.details:hover,
|
|
label.cadselect:hover,
|
|
.fcltblockhead .details:hover,
|
|
.facmgtmultilang:hover
|
|
{
|
|
text-decoration: underline;
|
|
color: ==linkhovercolor==;
|
|
}
|
|
|
|
.mover {
|
|
display: inline-block;
|
|
width: 30px;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
font-weight: normal;
|
|
font-size: 2em;
|
|
background-color: lightgrey;
|
|
border-radius: 7px;
|
|
padding-top: 5px;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
.mover:hover {
|
|
border-radius: 2px;
|
|
}
|
|
|
|
|
|
.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;
|
|
}
|
|
|
|
.bijlage, .bijlage1, .materiaal {
|
|
background-repeat: no-repeat;
|
|
background-position: 6px;
|
|
text-align: left;
|
|
}
|
|
|
|
.button-icon-wrapper > span.bijlage,
|
|
.button-icon-wrapper > span.bijlage1,
|
|
.button-icon-wrapper > span.endicon {
|
|
position: absolute;
|
|
font-size: 1.2em;
|
|
z-index: 1;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
right: 0.5em;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
span.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%);
|
|
}
|
|
|
|
/* deze lijkt generiek maar valt in #mldHistory */
|
|
.btn-group > button
|
|
{
|
|
background-color: ==buttonbackgroundcolormediumlow==;
|
|
transition: background-color 0.2s;
|
|
color: ==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: ==buttonhoverbackgroundcolor==;
|
|
color: ==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: ==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 {
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
.mldflag0, .resflag0, .opdrflag0, .bezflag0, .finflag0, .besopdrflag0 { color: #b0b0b0; }
|
|
.mldflag1, .resflag1, .opdrflag1, .bezflag1, .finflag1, .besopdrflag1 { color: #4d4d4d; }
|
|
.mldflag2, .resflag2, .opdrflag2, .bezflag2, .finflag2, .besopdrflag2, .resfiat2 { color: #f15854; }
|
|
.mldflag3, .resflag3, .opdrflag3, .bezflag3, .finflag3, .besopdrflag3 { color: #ffd600; }
|
|
.mldflag4, .resflag4, .opdrflag4, .bezflag4, .finflag4, .besopdrflag4 { color: #5da5da; }
|
|
.mldflag5, .resflag5, .opdrflag5, .bezflag5, .finflag5, .besopdrflag5, .resfiat1 { color: #60bd68; }
|
|
.mldflag6, .resflag6, .opdrflag6, .bezflag6, .finflag6, .besopdrflag6 { color: #673ab7; }
|
|
.mldflag7, .resflag7, .opdrflag7, .bezflag7, .finflag7, .besopdrflag7, .resfiat0 { color: #faa43a; }
|
|
.mldflag8, .resflag8, .opdrflag8, .bezflag8, .finflag8, .besopdrflag8 { color: #b276b2; }
|
|
.mldflag9, .resflag9, .opdrflag9, .bezflag9, .finflag9, .besopdrflag9 { color: #b2912f; }
|
|
|
|
.mlds, .ress, .opdrs, .bezs, .fins, .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;
|
|
background-color:#f1f1f1; /**/
|
|
border-style: solid;
|
|
border-color: #ccc;
|
|
border-width: 0px 1px 1px 1px;
|
|
width: 100%;
|
|
padding: 3px 3px 3px 3px;
|
|
margin: 0px;
|
|
}
|
|
.rstable tr
|
|
{
|
|
color: ==textcolor==; /* doet niets denk ik */
|
|
background-color: #fffffe; /*backgroundcolor*/
|
|
vertical-align: top;
|
|
padding-bottom: 2px;
|
|
padding-top: 2px;
|
|
padding-left: 4px;
|
|
padding-right: 2px;
|
|
}
|
|
.rstable td
|
|
{
|
|
color: ==textcolor==;
|
|
border-bottom: 1px solid #eee;
|
|
padding: 4px 3px 7px 3px;
|
|
}
|
|
|
|
.rstable thead th, .rstable tfoot td
|
|
{
|
|
color: ==tableheadercolor==;
|
|
background-color: ==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 ==tableheaderbackgroundcolor==;
|
|
}
|
|
.rstable thead th:last-child, .rstable tfoot td:last-child
|
|
{
|
|
border-right: 1px ridge ==tableheaderbackgroundcolor==;
|
|
}
|
|
.rstable tfoot .rsfooter
|
|
{
|
|
padding: 0;
|
|
color: ==frameheadercolor==;
|
|
background-color: ==frameheaderbackgroundcolor== !important;
|
|
}
|
|
.rstable input[type=text]
|
|
{
|
|
background-color: #FFF4C3;
|
|
}
|
|
.rstable tr.selectable
|
|
{ /* bijvoorbeeld badgenr */
|
|
cursor: pointer;
|
|
}
|
|
.rstable tr:nth-child(odd),
|
|
.table-style tr:nth-child(odd)
|
|
{
|
|
filter: brightness(98%);
|
|
}
|
|
.rstable tr:hover
|
|
{
|
|
color: ==menuitemhovercolor==;
|
|
background-color: ==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;
|
|
}
|
|
#faqhead {
|
|
}
|
|
#faqsubhead {
|
|
font-size: 1.1em;
|
|
padding-bottom: 8px;
|
|
}
|
|
#faqsolved {
|
|
color: ==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: ==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-color: rgb(255, 254, 156);
|
|
color: #9C6500;
|
|
}
|
|
.cntopzeg td, .expired2 td, .mjbexpired td {
|
|
background-color: 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;
|
|
}
|
|
.isready td {
|
|
}
|
|
.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*/
|
|
tr.lzsoort2 td {
|
|
}
|
|
/* andere lists */
|
|
tr.editing td,
|
|
tr.updated td {
|
|
background-color: #FDFF9F!important;
|
|
color: ==textcolor==;
|
|
opacity: 1.0;
|
|
}
|
|
tr.updated10 td {
|
|
background-color: #FFFFE1;
|
|
color: ==textcolor==;
|
|
opacity: 1.0;
|
|
}
|
|
tr.updated100 td {
|
|
font-weight: 500;
|
|
color: ==textcolor==;
|
|
opacity: 1.0;
|
|
}
|
|
|
|
tr.updated.dirty td {
|
|
color: #808080
|
|
}
|
|
tr.vervolg {
|
|
border-left: 2px solid #666;
|
|
}
|
|
tr.wfstep {
|
|
}
|
|
|
|
.cntfuture td {
|
|
background-color: #E0E0E0;
|
|
}
|
|
.cntactive {
|
|
}
|
|
.cntrappel {
|
|
}
|
|
.cntopzeg td {
|
|
}
|
|
.cntpast td {
|
|
color: #666;
|
|
}
|
|
.cntinactive td {
|
|
background-color: #76b0f7;
|
|
}
|
|
|
|
.divrstable .updated td {
|
|
color: ==textcolor==;
|
|
}
|
|
|
|
#multires {
|
|
color: ==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;
|
|
display: inline-block;
|
|
}
|
|
.resreado {
|
|
color: #E40000;
|
|
font-weight: bold;
|
|
}
|
|
#resafhbez span {
|
|
color: ==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;
|
|
}
|
|
|
|
#rsMaxHistoryB, #rsMaxHistoryE, .resplanbordlimited {
|
|
text-align: center;
|
|
}
|
|
|
|
#rsMaxHistoryB a, #rsMaxHistoryE a, .resplanbordlimited a {
|
|
text-decoration: none;
|
|
color: ==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: ==frameheadercolor==;
|
|
line-height: 2em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
#multiactiondiv {
|
|
display: flex;
|
|
visibility: hidden;
|
|
float: left;
|
|
}
|
|
|
|
#phonebookteaser {
|
|
font-size: 0.7em;
|
|
padding-left: 4em;
|
|
}
|
|
#phonebookteaser a {
|
|
color: ==blockheadercolor==;
|
|
}
|
|
#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 */
|
|
* html .required,
|
|
*:not(option).required,
|
|
*:not(option).required:focus,
|
|
input.required,
|
|
input[type=text].required,
|
|
input[type=password].required,
|
|
select.required,
|
|
textarea.required
|
|
{
|
|
border-left: 2px solid ==requiredbordercolor==;
|
|
}
|
|
/* but maintain the button properties even if required */
|
|
input[type=button].required, input[type=text].button.required
|
|
{
|
|
background-color:==buttonbackgroundcolor==;
|
|
border-left: 3px solid ==requiredbordercolor==;
|
|
}
|
|
|
|
input[type=button].required:hover,
|
|
input[type=text].button.required:hover
|
|
{
|
|
color: ==buttonhovercolor==;
|
|
background-color:==buttonhoverbackgroundcolor==;
|
|
}
|
|
|
|
* html .missing,
|
|
missing,
|
|
input[type=text].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-today {
|
|
background-color: #C6EFCE;
|
|
}
|
|
.ui-datepicker-today a {
|
|
color: #FFFFFF;
|
|
font-weight: bold !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? */
|
|
.hidden {
|
|
display: none!important;
|
|
}
|
|
.visible {
|
|
display: block;
|
|
}
|
|
|
|
body.modal .label {
|
|
/* min-width: 180px; alext */
|
|
}
|
|
|
|
.label {
|
|
text-align: left;
|
|
vertical-align: text-top;
|
|
margin: 0;
|
|
color: ==textcolor==;
|
|
}
|
|
.orglcl {
|
|
font-style: italic;
|
|
color: ==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 black;
|
|
}
|
|
.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;
|
|
}
|
|
#afhaal {
|
|
}
|
|
.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: #7B7B7B; /* gelijk aan i.suggestklikker */
|
|
cursor: pointer;
|
|
width: 0;
|
|
}
|
|
|
|
/* inputs en suggests: als we deze op een paar na eens allemaal wegflikkerden?
|
|
-> KR: graag, met een schone lei beginnen */
|
|
.fldfolder
|
|
{
|
|
min-width: 218px;
|
|
display: inline-block;
|
|
padding-right: 4px;
|
|
}
|
|
.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_dlvrnr {
|
|
max-width: 50px;
|
|
}
|
|
|
|
.fld_cattime {
|
|
width: 4em;
|
|
}
|
|
|
|
.fld_catamount {
|
|
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: ==notesbackgroundcolor==;
|
|
color: #FFF;
|
|
}
|
|
.fcltframe.sidebar
|
|
{
|
|
background: ==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;
|
|
}
|
|
|
|
.fldfinbtw, .fldprocent {
|
|
width: 105px;
|
|
}
|
|
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;
|
|
}
|
|
.dateklikker:hover > i,
|
|
.timeklikker:hover > i {
|
|
color: ==buttonhoverbackgroundcolor==;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.flddatetime, .fldresstatus, #existingDates, #newDates, .fldmsgprio, .fldafspnum, .flddeel, .fldcnttarief {
|
|
width: 140px;
|
|
}
|
|
|
|
.fldmsgmessage {
|
|
width: 100%;
|
|
}
|
|
|
|
.fldregime
|
|
{
|
|
width: 210px;
|
|
}
|
|
.fldmatamount, .fldmatprice, .fldmattotal, .fldcurrency {
|
|
width: 100px;
|
|
text-align:right;
|
|
}
|
|
.fldfinbedrag, .fldfinamount {
|
|
width: 75px;
|
|
text-align:right;
|
|
}
|
|
.fldfinunit, .fldfinartcode {
|
|
width: 75px;
|
|
}
|
|
.fldtxt, .fldresroomchange, .flddatechange, .fldcntperiod /*todo*/
|
|
{
|
|
width: 100%;
|
|
}
|
|
|
|
.fldmlduren,
|
|
.fldmldkosten,
|
|
.fldmldurentotal {
|
|
width: 4em;
|
|
}
|
|
#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);
|
|
}
|
|
|
|
.fldlcldata, .fldlclstd
|
|
{
|
|
width: 400px;
|
|
}
|
|
#lcllink
|
|
{
|
|
cursor:pointer;
|
|
background-color: #ff00ff;
|
|
}
|
|
|
|
div#lcldialect .label
|
|
{
|
|
width: auto;
|
|
}
|
|
.color-preview {
|
|
line-height: 1.3em;
|
|
}
|
|
|
|
#itemfilter
|
|
{
|
|
width: 218px;
|
|
}
|
|
.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%;
|
|
}
|
|
|
|
td.flexlabel { /* flexlabel gaat samen met label,dus zo weinig mogelijk */
|
|
color: ==flexlabelcolor==;
|
|
background-color: ==flexlabelbackgroundcolor==;
|
|
}
|
|
/* prototype alext */
|
|
td.flexlabel.nohint {
|
|
overflow: visible;
|
|
}
|
|
td.flexlabel label { /* overrule de standaard labelkleur */
|
|
color: ==flexlabelcolor==;
|
|
font-weight: bold;
|
|
}
|
|
.readonly.flexvalue {
|
|
padding-top: 2px !important;
|
|
}
|
|
.flexlabellabel {
|
|
}
|
|
/* Oude Blanco-kenmerk, nu een newline */
|
|
.flexspacer {
|
|
margin-top: 1px;
|
|
}
|
|
tr.flexcollapsable td {
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
}
|
|
.xflexcollapsable .lhint::after {
|
|
content: "\f077";
|
|
font-family: "Font Awesome 5 Pro";
|
|
position: absolute;
|
|
right: 20px;
|
|
}
|
|
.xflexcollapsed .lhint::after {
|
|
content: "\f078";
|
|
font-family: "Font Awesome 5 Pro";
|
|
font-weight: 400;
|
|
position: absolute;
|
|
right: 20px;
|
|
}
|
|
|
|
/* 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: ==buttonbackgroundcolormediumlow==;
|
|
}
|
|
|
|
.wrapper-span .image-edit:hover {
|
|
opacity: 1;
|
|
color: ==buttonhovercolor==;
|
|
background: ==buttonhoverbackgroundcolor== radial-gradient(circle, transparent 1%, ==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 transparant; /* 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; }
|
|
.mv.r {}
|
|
.mv.l {}
|
|
/* 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 1px 4px;
|
|
}
|
|
/* blokken in modal altijd 100% */
|
|
body.modal .flexblock {
|
|
max-width: 100%;
|
|
flex-basis: 100%;
|
|
}
|
|
|
|
.modal th {
|
|
background-color: ==frameheaderbackgroundcolor==;
|
|
color: ==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_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_movewerkplek { min-width: 500px; }
|
|
#mod_noshow {min-width:500px;}
|
|
#mod_opdraccept {min-width:540px; height: 260px;}
|
|
#mod_opdrcancel {min-width:600px;}
|
|
/* #mod_opdrcancel .label {min-width: 0px;} alext */
|
|
#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:600px;}
|
|
#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; height:500px;}
|
|
#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 {
|
|
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: ==fontfamily_titles==;
|
|
font-weight: 600;
|
|
font-size: 1.05em;
|
|
}
|
|
#frametabs .ui-tabs-anchor {
|
|
font-family: ==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: ==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: 100; /* div#loggers + 1 */
|
|
}
|
|
|
|
div#menudivider{
|
|
position: absolute;
|
|
left: 259px;
|
|
height: 400px;
|
|
width: 1px;
|
|
border: 0px;
|
|
z-index: 2;
|
|
cursor: pointer;
|
|
background-color: ==dividercolor==;
|
|
}
|
|
|
|
div#maintabs{
|
|
position: absolute;
|
|
left: 265px;
|
|
height: 400px;
|
|
top: 82px;
|
|
width: 800px;
|
|
border: 0px;
|
|
}
|
|
|
|
|
|
.toggler {
|
|
position: absolute;
|
|
background-color: ==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 */
|
|
}
|
|
|
|
div#menutabs .ui-layout-content {
|
|
background-image: none; /* Wit blok halverwege menu weghalen */
|
|
background-color: ==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: ==fontfamily_alt==;
|
|
}
|
|
div#ProfFAC ul li.mi,
|
|
div#PersFAC ul li.mi,
|
|
div#MgtFAC ul li.mi {
|
|
font-family: ==fontfamily_alt==;
|
|
color: ==menucolor==;
|
|
background-color: ==menubackgroundcolor==;
|
|
}
|
|
#menutabs span.menukop {
|
|
color: ==menucolor==;
|
|
font-size: 1.15em;
|
|
}
|
|
|
|
span.menukop {
|
|
background-repeat:no-repeat;
|
|
background-position:left;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
span.menulinkkop {
|
|
cursor: pointer;
|
|
vertical-align: middle;
|
|
padding-left: 28px; /* 24+4 van .micon */
|
|
padding-left: 39px; /* + 2x 5.5px inline spacing */
|
|
}
|
|
|
|
/* 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 8px;
|
|
}
|
|
li.mk:hover {
|
|
background-color: ==menukophoverbackgroundcolor==!important;
|
|
}
|
|
li.mk:hover span.menukop,
|
|
li.mk:hover span.micon,
|
|
.withaction:hover i
|
|
{
|
|
color: ==menukophovercolor==!important;
|
|
}
|
|
.withaction { cursor: pointer; }
|
|
|
|
li.mi {
|
|
font-size: 0.9em;
|
|
line-height: 1.85em;
|
|
background-color: transparent;
|
|
opacity: 1;
|
|
}
|
|
.menuDropdown li.mi {
|
|
color:==menuitemhovercolor== !important;
|
|
background-color:==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: 24px;
|
|
margin: 0 4px 0 0;
|
|
vertical-align: middle;
|
|
font-size: 1.3em; /*fa5pro*/
|
|
}
|
|
.micon {
|
|
font-size: 14.4px;
|
|
}
|
|
|
|
.nomicon, .tabicon {
|
|
height: 24px;
|
|
display: inline-block;
|
|
text-align: center;
|
|
font-size: 1.3em;
|
|
line-height: 1.3em;
|
|
}
|
|
|
|
.micon:hover, .nomicon:hover {
|
|
transition: transform 0.5s;
|
|
transform: scale(1.2, 1.2);
|
|
}
|
|
.nomicon, .tabicon {
|
|
background-color: ==frameheaderbackgroundcolor==;
|
|
border-radius: 2px;
|
|
opacity: 0.8;
|
|
}
|
|
.tabicon {
|
|
vertical-align: text-bottom;
|
|
}
|
|
|
|
.nomicon:hover {
|
|
opacity: 1;
|
|
}
|
|
i.miconimg {
|
|
color: ==menuitemcolor== !important;
|
|
}
|
|
.menupinned {
|
|
float: right;
|
|
display: none;
|
|
}
|
|
li.mi:hover span.menupinned
|
|
{
|
|
display: inline;
|
|
}
|
|
|
|
li.mi {
|
|
cursor: pointer;
|
|
}
|
|
#menutabs li.mi:hover {
|
|
color:==menuitemhovercolor== !important;
|
|
background-color:==menuitemhoverbackgroundcolor== !important;
|
|
}
|
|
#portalmenu li.mi:hover {
|
|
color: ==linkcolor==;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.guicnt {
|
|
font-size: 0.6em;
|
|
color: #888;
|
|
}
|
|
|
|
#menutabs .ui-layout-content ul li li {
|
|
font-weight: normal;
|
|
color: ==menuitemcolor==;
|
|
background-color: ==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: ==menuitemcolor==;
|
|
background-color: ==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:==menuitembackgroundcolor== !important;
|
|
padding: 4px 4px 4px 8px;
|
|
cursor: pointer;
|
|
}
|
|
#menutabs .ui-tabs-submenu ul.menuDropDown li:hover {
|
|
color:==menuitemhovercolor== !important;
|
|
background-color:==menuitemhoverbackgroundcolor==!important;
|
|
}
|
|
#menutabs .ui-tabs-submenu ul.menuDropDown li.mks {
|
|
list-style: none;
|
|
display: list-item;
|
|
background-color: ==menukophoverbackgroundcolor==!important;
|
|
color: ==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;
|
|
}
|
|
|
|
.menuimg .fa-fw {
|
|
color: ==buttonbackgroundcolor==;
|
|
}
|
|
|
|
.rate.fa-star, .rate.fa-star-o {
|
|
color: #FFA500;
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
.rate.fa-question-circle {
|
|
color: #51768F;
|
|
font-size: 1.5em;
|
|
}
|
|
span.hint {
|
|
color: ==buttonbackgroundcolor==;
|
|
/* float: right; Niet meer nodig dan toch? */
|
|
cursor: auto;
|
|
line-height: inherit;
|
|
font-size: 1.3em;
|
|
}
|
|
span.hint:hover {
|
|
color: ==buttonhoverbackgroundcolor==;
|
|
}
|
|
|
|
/* TODO, minstens wat padding, prominenter. Zo? */
|
|
td > .bezflex td:first-child {
|
|
min-width: 375px;
|
|
}
|
|
tr[id^=trbez] i.fa-fw {
|
|
font-size: 1em;
|
|
cursor: pointer;
|
|
color: ==buttoncolor==;
|
|
background-color: ==buttonbackgroundcolor==;
|
|
line-height: 2em;
|
|
width: 2em;
|
|
}
|
|
tr[id^=trbez] i.fa-fw:hover {
|
|
color: ==buttonhovercolor==;
|
|
background-color: ==buttonhoverbackgroundcolor==;
|
|
}
|
|
|
|
.flikeopts li i
|
|
{
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
/* workplace reservations */
|
|
th.placephoto {
|
|
width: 90px;
|
|
}
|
|
td.placephoto img {
|
|
max-width: 80px;
|
|
max-height: 80px;
|
|
}
|
|
|
|
.menuImage {
|
|
width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
|
|
#iconbody .iconmenu {
|
|
width: 20%;
|
|
height: 50vw; /* halve hoogte */
|
|
}
|
|
#iconbody .iconmenu .iconitem {
|
|
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;
|
|
}
|
|
|
|
.iconlabel {
|
|
background-color: #fcfcfc;
|
|
cursor: pointer;
|
|
}
|
|
|
|
table.besaccordeon {
|
|
border-collapse: separate;
|
|
border-spacing: 2px;
|
|
}
|
|
table.besaccordeon td {
|
|
border: 1px solid #eee;
|
|
background-color: #fafafa;
|
|
}
|
|
.besaccordeon .iconlabel {
|
|
min-height: 5em;
|
|
}
|
|
.iprd {
|
|
}
|
|
.iprs {
|
|
font-size: 0.9em;
|
|
}
|
|
.ieenh {
|
|
display: none;
|
|
}
|
|
.iopm {
|
|
font-size:0.5em;
|
|
}
|
|
|
|
/* portalmenu */
|
|
#portalmenu {
|
|
text-align: center;
|
|
background-image: url("==portalmenubgimage==");
|
|
}
|
|
#portalmenu h2 {
|
|
font-size: 2em;
|
|
color: ==portalkopcolor==;
|
|
margin: 4px;
|
|
padding: 9px 1px 5px 1px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
#portalmenu table {
|
|
margin: 0 auto 1px auto;
|
|
width: 100%;
|
|
border-collapse: separate;
|
|
border-spacing: 6px;
|
|
}
|
|
#portalmenu table tr td
|
|
{
|
|
text-align: left;
|
|
border: 1px solid #f1f1f1;
|
|
padding: 1em 0.2em 1em 1.5em;
|
|
vertical-align: top;
|
|
background-color: rgba(255,255,255,0.85);
|
|
/* box-shadow: 3px 3px 3px #ccc; /* FMH zegt dat de card zo een button lijkt ..*/
|
|
background-image: url("==portalmenucardbgimage==");
|
|
background-position: top right;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
#portalmenu span.menukop {
|
|
background-image:none;
|
|
color: ==textcolor==;
|
|
font-weight: bold;
|
|
font-size: 1.4em; /* dapper?*/
|
|
cursor: default;
|
|
margin: 0;
|
|
padding: 8px 1px 8px 0px;
|
|
}
|
|
|
|
#portalmenu ul {
|
|
margin: 0 0 5px 0;
|
|
padding: 0 0 0 0;
|
|
}
|
|
#portalmenu li.mi {
|
|
font-family: ==fontfamily_alt==;
|
|
font-size: 1.1em;
|
|
line-height: 1.3em;
|
|
list-style: none;
|
|
}
|
|
#portalmenu li.more {
|
|
font-size: 0.9em;
|
|
cursor: pointer;
|
|
color: #004f80;
|
|
}
|
|
#portalmenu a {
|
|
color: ==textcolor==;
|
|
text-decoration: none;
|
|
}
|
|
#portalmenu a:hover,
|
|
#portalmenu .more:hover {
|
|
color: ==linkhovercolor==;
|
|
}
|
|
#portalmenu span.menuimg {
|
|
font-weight: bold;
|
|
line-height: 100px;
|
|
width: 100px;
|
|
display: block;
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
float: left;
|
|
padding-right: 1.5em;
|
|
}
|
|
#portalmenu span.menuimg li.mi {
|
|
font-weight: normal;
|
|
}
|
|
#portalmenu div.portalmenukop {
|
|
width:62%;
|
|
float:left;
|
|
background-color: rgba(255,255,255,0.4); /* testje, ik wil dat de tekst altijd leesbaar is op de achtergrond */
|
|
border-radius: 5px;
|
|
}
|
|
#portalmenu div.portalmenukop.withimg {
|
|
float:none;
|
|
text-align: center;
|
|
margin: auto;
|
|
}
|
|
|
|
#portalmenu span.menuimg img {
|
|
max-width: 95%;
|
|
}
|
|
|
|
@media all and (max-width: 60em) {
|
|
#portalmenu span.menuimg {
|
|
width: 70px;
|
|
}
|
|
#portalmenu div.portalmenukop {
|
|
width: 50%;
|
|
}
|
|
#portalmenu span.menuimg {
|
|
padding-right: 0.2em;
|
|
}
|
|
}
|
|
|
|
@media all and (min-width: 60em) and (max-width: 75em) {
|
|
#portalmenu span.menuimg {
|
|
width: 80px;
|
|
}
|
|
#portalmenu div.portalmenukop {
|
|
width: 50%;
|
|
}
|
|
#portalmenu span.menuimg {
|
|
padding-right: 0.5em;
|
|
}
|
|
}
|
|
|
|
@media all and (min-width: 75em) and (max-width: 85em) {
|
|
#portalmenu span.menuimg {
|
|
width: 85px;
|
|
}
|
|
#portalmenu div.portalmenukop {
|
|
width: 57%;
|
|
}
|
|
#portalmenu span.menuimg {
|
|
padding-right: 0.9em;
|
|
}
|
|
}
|
|
#portalmenu .portalmenukop.withimg span.menuimg {
|
|
line-height: normal;
|
|
float: none;
|
|
margin: auto;
|
|
padding-right: 0em;
|
|
}
|
|
|
|
.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 5 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.resfuture td {
|
|
}
|
|
tr.resactive td {
|
|
background-color: #444444;
|
|
color: #e0e0e0;
|
|
}
|
|
tr.respast td {
|
|
background-color: #bb3446;
|
|
color: #f0f0f0;
|
|
}
|
|
tr.respast.updated td {
|
|
color: ==textcolor==;
|
|
}
|
|
tr.resafgemeld td {
|
|
}
|
|
tr.resnietafgemeld td {
|
|
}
|
|
|
|
/* 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 {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 26px;
|
|
font-weight: bold;
|
|
background-color: orange;
|
|
color: white;
|
|
}
|
|
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;
|
|
cursor: default;
|
|
}
|
|
.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;
|
|
}
|
|
#LinkerNavi {
|
|
vertical-align: top;
|
|
width: 220px;
|
|
background-color: #fffffe; /*backgroundcolor*/
|
|
}
|
|
|
|
#mapCell {
|
|
border: 0px;
|
|
margin-left: 223px;
|
|
height: 800px;
|
|
}
|
|
|
|
#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;
|
|
}
|
|
|
|
.draggable {
|
|
color: red;
|
|
text-decoration: none !important;
|
|
font-weight: bold;
|
|
cursor: move !important;
|
|
}
|
|
.drag {
|
|
position: relative;
|
|
cursor: pointer;
|
|
color: red;
|
|
}
|
|
#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;
|
|
}
|
|
|
|
/* 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: ==frameheaderbackgroundcolor==;
|
|
color: ==frameheadercolor==;
|
|
}
|
|
.openFG, .closedFG {
|
|
transition: background-color 0.2s;
|
|
cursor: pointer;
|
|
}
|
|
.openFG:hover, .closedFG:hover {
|
|
background-color: ==buttonhoverbackgroundcolor==;
|
|
color: ==buttonhovercolor==;
|
|
}
|
|
.openFG td, .closedFG td, .fixedFG {
|
|
line-height: 2em;
|
|
padding-left: 0.4em;
|
|
border-top: 2px solid white;
|
|
}
|
|
.openFG td i, .closedFG td i, .fixedFG i{
|
|
vertical-align: inherit;
|
|
}
|
|
|
|
.legins {
|
|
width: 24px;
|
|
height: 24px;
|
|
border: 1px solid #999;
|
|
border-radius: 2px;
|
|
padding: 2px;
|
|
}
|
|
|
|
#navbuttons {
|
|
background-color: ==frameheaderbackgroundcolor==;
|
|
color: ==frameheadercolor==;
|
|
}
|
|
#navbuttons span.active {
|
|
background-color: ==frameheadercolor==;
|
|
color: ==frameheaderbackgroundcolor==;
|
|
}
|
|
#navbuttons span:hover {
|
|
color: ==buttonhovercolor==;
|
|
background-color: ==buttonhoverbackgroundcolor==;
|
|
}
|
|
|
|
#toggler {
|
|
float: left;
|
|
width: 12px;
|
|
height: 100%;
|
|
cursor: pointer;
|
|
}
|
|
#SearchCode, #SearchLbl {
|
|
width: 130px;
|
|
margin-left: 12px;
|
|
}
|
|
|
|
.area_diff {
|
|
color: red;
|
|
}
|
|
|
|
.bit_group {
|
|
}
|
|
label>span.facmgtmultilang:before,.facmgtmultilangheader:before {
|
|
content: "";
|
|
display: inline-block;
|
|
height: 1em;
|
|
width: calc(1.5em + 3px);
|
|
background-image: url("../appl/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 .value {
|
|
}
|
|
#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: ==tableheaderbackgroundcolor==;
|
|
color: ==tableheadercolor==;
|
|
font-weight: normal;
|
|
font-size: 1.1em;
|
|
margin-bottom: 2px;
|
|
}
|
|
table.filter td {
|
|
cursor: pointer;
|
|
padding:3px 2px 1px 4px;
|
|
color: ==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;
|
|
}
|
|
#searchBox {
|
|
font-size: 1.8em;
|
|
vertical-align: top;
|
|
text-align: center;
|
|
padding: 5px;
|
|
}
|
|
#searchBox #searchText {
|
|
font-size: 1.0em;
|
|
color: #666;
|
|
}
|
|
#searchBox input {
|
|
vertical-align: middle;
|
|
}
|
|
.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;
|
|
}
|
|
#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: ==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;
|
|
}
|
|
#mod_bijlagen
|
|
{
|
|
opacity: inherit;
|
|
transition: 0.2s ease;
|
|
}
|
|
#mod_bijlagen.dragon
|
|
{
|
|
opacity: 0.5;
|
|
transition: 0.2s ease;
|
|
}
|
|
.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: 0 0 0px #888;
|
|
border: 1px solid #888;
|
|
}
|
|
/*
|
|
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: ==portalkopcolor==;
|
|
}
|
|
.tabletmenu img {
|
|
background-color: ==frameheaderbackgroundcolor==;
|
|
}
|
|
.tmenutab {
|
|
background-color: ==tableheaderbackgroundcolor==;
|
|
color: ==tableheadercolor==;
|
|
border: 2px solid ==frameheadercolor==;
|
|
}
|
|
#tabletmenu #luser {
|
|
color: ==blockheaderbackgroundcolor==;
|
|
}
|
|
.tmenutabhome {
|
|
color: ==textcolor==;
|
|
}
|
|
|
|
/* floorscreen */
|
|
.floorscreen input[type=button] {
|
|
background-color:#a33;
|
|
width: 180px;
|
|
margin: 2px;
|
|
font-weight: bold;
|
|
padding: 12px;
|
|
box-shadow: 1px 1px 1px #888888;
|
|
margin-bottom: 12px;
|
|
font-size: 1.3em;
|
|
border-radius: 4px;
|
|
color: #fffffe; /*backgroundcolor*/
|
|
}
|
|
.floorscreen input[type=button]:hover {
|
|
background-color:#fff;
|
|
}
|
|
.floorscreen input[type=button].selected {
|
|
background-color:#d00;
|
|
font-weight:bold;
|
|
}
|
|
.floorscreen #fsnavigation {
|
|
width: 220px;
|
|
overflow: auto;
|
|
overflow-x: hidden;
|
|
background-color: #fffffe; /*backgroundcolor*/
|
|
border-right: 1px solid ==textcolor==;
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
text-align: center;
|
|
height: 100%;
|
|
}
|
|
|
|
.floorscreen #fsnavigation button {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.floorscreen #verdiepingen
|
|
{
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.floorscreen #fslegenda {
|
|
position: absolute;
|
|
bottom: 15px;
|
|
left: 5px;
|
|
background-color: rgba(255, 255, 255, 0.9); /* soms gaat het over de buttons */
|
|
padding: 5px;
|
|
}
|
|
.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: ==textcolor==;
|
|
}
|
|
.rflrscreen #rstable td
|
|
{
|
|
padding: 2px;
|
|
background-color: transparent;
|
|
}
|
|
.rflrscreen #iframerextratitle
|
|
{
|
|
color: ==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: 25;
|
|
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: 25;
|
|
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:==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;
|
|
}
|
|
|
|
#buttons ul li:hover { /* geen hover? */
|
|
color: ==buttonhovercolor==;
|
|
}
|
|
|
|
.ui-widget-content{
|
|
border:1px solid #eee;
|
|
}
|
|
|
|
li.hiddenbutton {
|
|
padding: 0px 0px 0px 0px!important;
|
|
}
|
|
|
|
.ui-widget {
|
|
font-family: ==fontfamily==;
|
|
}
|
|
|
|
#prodsearchsearch {
|
|
border: 0px;
|
|
}
|
|
|
|
#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 {
|
|
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: ==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: ==blockheaderbackgroundcolor==;
|
|
color: ==blockheadercolor==;
|
|
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;
|
|
}
|
|
.mjbbusy td{
|
|
}
|
|
|
|
.mjbwaiting td {
|
|
background-color: #F0F0FA;
|
|
}
|
|
|
|
span.mjborgbedrag {
|
|
color: #ccc;
|
|
font-size: 0.9em;
|
|
}
|
|
span.draggable .mjborgbedrag {
|
|
color: ==linkcolor==;
|
|
}
|
|
.mjbafbouw {
|
|
background-repeat: no-repeat !important;
|
|
background-position: center !important;
|
|
}
|
|
.mjbverval, .mjbplanned.mjbverval {
|
|
background-repeat: no-repeat !important;
|
|
background-position: center !important;
|
|
}
|
|
|
|
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: ==frameheaderbackgroundcolor==; color: ==frameheadercolor== ; border-color: ==frameheaderbackgroundcolor==; }
|
|
|
|
|
|
.resartikelfoto {
|
|
padding: 2px 2px 2px 20px;
|
|
}
|
|
|
|
.tableFloatingHeader {
|
|
z-index: 10;
|
|
}
|
|
|
|
.hamburger {
|
|
cursor:pointer;
|
|
}
|
|
|
|
/* reset all styling for the frametabs, then restyle */
|
|
.frametabs,
|
|
.frametabs li {
|
|
border: 0 !important;
|
|
background-image: none !important;
|
|
background-color: ==frameheaderbackgroundcolor==;
|
|
padding: 0 !important;
|
|
}
|
|
.frametabs li {
|
|
border-left: 1px solid rgba(255,255,255,0.25) !important;
|
|
}
|
|
.frametabs li a {
|
|
color: ==frameheadercolor== !important;
|
|
}
|
|
.frametabs li:hover a {
|
|
text-decoration: underline !important;
|
|
}
|
|
.frametabs .ui-state-active a,
|
|
.frametabs .ui-state-active a:link {
|
|
font-weight: bold !important;
|
|
}
|
|
|
|
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: ==menubackgroundcolor==;
|
|
color: ==menucolor==;
|
|
}
|
|
|
|
div.menuHeadSpacer
|
|
{
|
|
background-color: ==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: ==menuitemcolor==;
|
|
background-color:==menuitembackgroundcolor==;
|
|
}
|
|
table#useroptionstable tr:hover {
|
|
color: ==menukophovercolor==;
|
|
background-color:==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;
|
|
}
|
|
.chatfrom {
|
|
}
|
|
.chatfrom.other {
|
|
}
|
|
.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;
|
|
}
|
|
|
|
.hot-overlay {
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.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: ==buttoncolor==;
|
|
background-color:==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: 101;
|
|
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: ==frameheaderbackgroundcolor==;
|
|
color: ==frameheadercolor==;
|
|
margin: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.scf_extrafilter {
|
|
position: absolute;
|
|
right: 1em;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
select.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
|
|
============================== */
|
|
|
|
/* Werkt zoiets voor de breedte van de input-velden ? */
|
|
/*
|
|
#dkenmmodal input.fld:not([type='checkbox']):not([type='submit']),
|
|
#dkenmmodal select.fld,
|
|
#dkenmmodal select.fldmulti,
|
|
#dkenmmodal select.multiSuggest,
|
|
#dkenmmodal textarea.fldtxt,
|
|
.search-block-wrapper input.fld:not([type='checkbox']):not([type='submit']),
|
|
.search-block-wrapper select.fld,
|
|
.search-block-wrapper select.fldmulti,
|
|
.search-block-wrapper select.multiSuggest,
|
|
.search-block-wrapper textarea.fldtxt,
|
|
.block-wrapper input.fld:not([type='checkbox']):not([type='submit']),
|
|
.block-wrapper select.fld,
|
|
.block-wrapper select.fldmulti,
|
|
.block-wrapper select.multiSuggest,
|
|
.block-wrapper textarea.fldtxt
|
|
*/
|
|
/* Zo dan? */
|
|
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;
|
|
}
|
|
|
|
span.default-clickable-icon {
|
|
cursor: pointer;
|
|
}
|
|
span.default-clickable-icon:hover i {
|
|
color: ==buttonhoverbackgroundcolor==;
|
|
font-weight: 900;
|
|
}
|
|
|
|
/*////////////////////////////////////////////////////////
|
|
// //
|
|
// Notitie frame //
|
|
// //
|
|
////////////////////////////////////////////////////////*/
|
|
|
|
[id$="Historie"].card {
|
|
border: 0; /* Leuk? */
|
|
}
|
|
|
|
[id$="Historie"] > .card-header {
|
|
border-bottom: 1px solid transparent;
|
|
}
|
|
|
|
[id$="HistorieList"].card-body {
|
|
font-family: ==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: ==notesbackgroundcolor==;
|
|
}
|
|
|
|
/* =================
|
|
Extra notificatie
|
|
================= */
|
|
|
|
.note-notification {
|
|
font-style: italic;
|
|
}
|
|
|
|
/* =============
|
|
Textarea blok
|
|
============= */
|
|
|
|
.note-textarea {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 100%;
|
|
}
|
|
|
|
textarea#note {
|
|
display: block;
|
|
min-height: 5em;
|
|
width: 100%;
|
|
resize: vertical;
|
|
padding: 0.5em;
|
|
padding-right: 3.75em;
|
|
margin: 0;
|
|
border: 1px solid ==notesbackgroundcolor==;
|
|
border-radius: calc(0.25rem - 1px);
|
|
background-color: #f7f1e6 !important; /* Harde kleur */
|
|
transition: box-shadow .15s ease-in-out;
|
|
}
|
|
/* Tenzij ik een opmerking (afgemeld of notificatie) volg */
|
|
*:not(div) + form textarea#note.top {
|
|
border-top: 0px;
|
|
border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);
|
|
}
|
|
textarea#note.has-close-icon {
|
|
min-height: 8.4em;
|
|
}
|
|
textarea#note:focus {
|
|
box-shadow: inset 0 0 0 2px ==notesbackgroundcolor==;
|
|
}
|
|
|
|
.note-icon {
|
|
font-size: 16px;
|
|
|
|
position: absolute;
|
|
right: 0.9em;
|
|
bottom: 1.05em;
|
|
|
|
color: ==notesbackgroundcolor==;
|
|
outline-color: ==notesbackgroundcolor==; /* Als je er naar tab't */
|
|
}
|
|
.note-icon.top {
|
|
top: 0.4em;
|
|
bottom: auto;
|
|
}
|
|
|
|
.note-icon i {
|
|
cursor: pointer;
|
|
padding: 5px;
|
|
}
|
|
.note-icon i:hover {
|
|
color: ==buttonhoverbackgroundcolor==;
|
|
font-weight: 400;
|
|
}
|
|
.note-icon i:active {
|
|
color: ==buttonhoverbackgroundcolor==;
|
|
font-weight: 900;
|
|
}
|
|
|
|
/* =======
|
|
Toggles
|
|
======= */
|
|
|
|
.note-options-groups-wrapper {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.note-options,
|
|
.note-groups {
|
|
position: relative;
|
|
padding: 0.25em;
|
|
}
|
|
|
|
.note-options > div,
|
|
.note-groups > div {
|
|
position: relative;
|
|
white-space: nowrap;
|
|
}
|
|
.note-options label:not(.switch-label) {
|
|
padding-left: 2.25em;
|
|
}
|
|
.note-options input[type=checkbox]:not(.switch-toggler) {
|
|
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: ==notesbackgroundcolor==;
|
|
}
|
|
.note-options .switch-label.active, /* Geen idee wat die class er op zet */
|
|
.note-options .switch-label:active {
|
|
color: ==notesbackgroundcolor==;
|
|
}
|
|
|
|
/* ==========
|
|
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 {
|
|
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;
|
|
}
|
|
|
|
/* =============
|
|
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-fe-hidden.note-type-email,
|
|
.note-wrapper.note-type-self > .note-container.note-fe-hidden.note-type-email {
|
|
background-color: #dee6ee;
|
|
color: #545558;
|
|
}
|
|
.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);
|
|
}
|
|
/* Niet zichtbaar voor FE */
|
|
.note-wrapper > .note-container.note-fe-hidden,
|
|
.note-wrapper.note-type-self > .note-container.note-fe-hidden {
|
|
color: #545558;
|
|
background-color: #D9E4E3;
|
|
}
|
|
/* Tracking */
|
|
.note-wrapper > .note-container.note-type-tracking {
|
|
background-color: #fffffe; /*backgroundcolor*/
|
|
}
|
|
|
|
/* ==============
|
|
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 tijd */
|
|
.note-timestamp {
|
|
color: #747578;
|
|
}
|
|
|
|
/* Notitie auteur */
|
|
.note-author {
|
|
color: #002C67; /* Aareon Ink Blue */
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
/* Gewijzigd-tekst */
|
|
.note-edited {
|
|
color: #A0A0A0;
|
|
font-size: 10px;
|
|
padding-top: 4px !important;
|
|
}
|
|
|
|
/* Wijzigen-knop/icoon */
|
|
.note-button-edit {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* ============
|
|
Notitie body
|
|
============ */
|
|
.note-body{
|
|
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);
|
|
}
|
|
.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;
|
|
height: 2.25rem;
|
|
width: 2.25rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
right: 1rem;
|
|
bottom: 1rem;
|
|
border-radius: 50%;
|
|
background-color: white;
|
|
opacity: 0.6;
|
|
border: 1px solid ==textcolor==;
|
|
cursor: pointer;
|
|
}
|
|
.notes-wrapper .note-top-button:hover {
|
|
opacity: 1;
|
|
color: ==buttonhovercolor==;
|
|
background: ==buttonhoverbackgroundcolor== radial-gradient(circle, transparent 1%, ==buttonhoverbackgroundcolor== 1%) center/15000%;
|
|
}
|
|
}
|
|
|
|
/*////////////////////////////////////////////////////////
|
|
// //
|
|
// 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: 'Font Awesome 5 Pro', ==fontfamily==;
|
|
}
|
|
|
|
.notransition {
|
|
transition: none !important;
|
|
}
|
|
|
|
/* Voor de resize/scrollbars */
|
|
.fcltframe {
|
|
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-datepicker-div {
|
|
z-index: 12!important; /* div.fcltframeheader.floating +1 */
|
|
}
|
|
|
|
/* 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: 5px;
|
|
}
|
|
|
|
.ui-dialog-buttonset > .ui-button > .ui-icon {
|
|
line-height: 1.1em;
|
|
font-size: 1.1em;
|
|
text-indent: 0;
|
|
margin-top: 0;
|
|
background-image: none!important;
|
|
}
|
|
|
|
/* Want jQuery-ui maakt hier telkens 'auto' van maar dat gaat niet goed */
|
|
.fcltmodal {
|
|
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;
|
|
} |