:root{ --PANELSEARCH__background-color:var(--color--white-0); --PANELSEARCH__shadow-x:2px; --PANELSEARCH__shadow-y:0px; --PANELSEARCH__shadow-blur:2px; --PANELSEARCH__shadow-scale:1px; --PANELSEARCH__shadow-color:var(--transparent--white-0); --FOREGROUNDPANEL__background-color:var(--transparent--white-0); --MAINBAR__background-color : var(--color--white-0); --MAINBAR__BRAND_background-color : var(--color--white-0); --MAINBAR__MENU__background-color : var(--color--white-0); --MAINCALENDAR__background-color : var(--color--white-0); --MAINCALENDAR__HEAD__background-color: var(--color--green-0); --MAINCALENDAR__HEAD__TITLE__color : var(--color--white-0); --MAINCALENDAR__BODY__background-color : var(--color--white-0); --MAINMAP__background-color :var(--color--white-0); } .languageSwitcher{ .UI-button{ .UI-text{display:none} .UI-icon{ --filter--red-0:0; img{ } } } } #app{ height:100%; width:100vw; overflow:hidden; position:relative; display:grid; #app__panel--search{ transition: 0.5s; position:absolute; opacity:0; left:calc(-1 * var(--PANELSEARCH__width)); z-index:1003; height: var(--PANELSEARCH__height); width: var(--PANELSEARCH__width); padding: var(--PANELSEARCH__padding); background: var(--PANELSEARCH__background-color); box-shadow: var(--PANELSEARCH__shadow-x, 0) var(--PANELSEARCH__shadow-y, 0) var(--PANELSEARCH__shadow-blur, 0) var(--PANELSEARCH__shadow-scale, 0) var(--PANELSEARCH__shadow-color, transparent); } #app__foregroudPanel{ transition: 0.5s; position:absolute; top:0;width:0; height:100vh; background:var(--FOREGROUNDPANEL__background-color); z-index:1002; cursor:pointer; } #app__mainBar{grid-area:mainBar; background: var(--UI__MAINBAR__background); padding: var(--UI__MAINBAR__padding); #app__brand{grid-area:brand; background:var(--UI__MAINBAR__BRAND_background); } #app__menu{grid-area:menu; background: var(--UI__MAINBAR__MENU__background); gap : var(--UI__MAINBAR__MENU__gap); display:flex; justify-content:flex-start; align-items:center; .UI-button{ --padding: var(--UI__MAINBAR__MENU__BUTTON__padding); --background: var(--UI__MAINBAR__MENU__BUTTON__background); --color: var(--UI__MAINBAR__MENU__BUTTON__color); --fontSize: var(--UI__MAINBAR__MENU__BUTTON__fontSize); --fontWeight: var(--UI__MAINBAR__MENU__BUTTON__fontWeight); --svgcolor: var(--UI__MAINBAR__MENU__BUTTON__svgcolor); --borderColor: var(--UI__MAINBAR__MENU__BUTTON__borderColor); --borderWidth: var(--UI__MAINBAR__MENU__BUTTON__borderWidth); --borderStyle: var(--UI__MAINBAR__MENU__BUTTON__borderStyle); --borderRadius: var(--UI__MAINBAR__MENU__BUTTON__borderRadius); --icon__height: var(--UI__MAINBAR__MENU__BUTTON__ICON__height); --icon__width: var(--UI__MAINBAR__MENU__BUTTON__ICON__width); } .UI-button:hover{ --background: var(--UI__MAINBAR__MENU__BUTTON-HOVER__background); --color: var(--UI__MAINBAR__MENU__BUTTON-HOVER__color); --svgcolor: var(--UI__MAINBAR__MENU__BUTTON-HOVER__svgcolor); } } display:grid; grid-template-areas:"brand . menu"; grid-template-columns:min-content 1fr min-content; } #app__switchToMain{grid-area:toMain;} #app__main__map{ background:var(--MAINMAP__background-color); overflow:hidden; } #app__main__calendar{ height:100%;overflow:hidden; display:grid; grid-template-areas:"head" "content"; grid-template-rows:max-content 1fr; gap:var(--MAINCALENDAR__gap); background:var(--MAINCALENDAR__background-color); padding:var(--MAINCALENDAR__padding); > .UI-head{grid-area:head; > .UI-title { --background: var(--MAINCALENDAR__HEAD__TITLE__background); --borderWidth: var(--MAINCALENDAR__HEAD__TITLE__borderWidth); --color: var(--MAINCALENDAR__HEAD__TITLE__color); --fontSize: var(--MAINCALENDAR__HEAD__TITLE__fontSize); --fontWeight: var(--MAINCALENDAR__HEAD__TITLE__fontWeight); --padding: var(--MAINCALENDAR__HEAD__TITLE__padding); --margin: var(--MAINCALENDAR__HEAD__TITLE__margin); } } > .UI-body{ height:100%;overflow:auto; background : var(--MAINCALENDAR__BODY__background-color); padding : var(--MAINCALENDAR__BODY__padding); .calendar-empty{ padding:40px 10px; h1{ font-size:20px; color:#000; margin-bottom:15px; } p{ font-size:18px; color:#000; margin-bottom:10px; } p.opt{ display:grid; width:100%; grid-template-areas:"title button"; grid-template-columns:1fr max-content; > button{grid-area:button;} > .title{grid-area:title;font-weight:bold;} > .title:before{content:"- "} } .UI-button{ --padding: var(--UI__MAINBAR__MENU__BUTTON__padding); --background: var(--UI__MAINBAR__MENU__BUTTON__background); --color: var(--UI__MAINBAR__MENU__BUTTON__color); --fontSize: var(--UI__MAINBAR__MENU__BUTTON__fontSize); --fontWeight: var(--UI__MAINBAR__MENU__BUTTON__fontWeight); --svgcolor: var(--UI__MAINBAR__MENU__BUTTON__svgcolor); --borderColor: var(--UI__MAINBAR__MENU__BUTTON__borderColor); --borderWidth: var(--UI__MAINBAR__MENU__BUTTON__borderWidth); --borderStyle: var(--UI__MAINBAR__MENU__BUTTON__borderStyle); --borderRadius: var(--UI__MAINBAR__MENU__BUTTON__borderRadius); --icon__height: var(--UI__MAINBAR__MENU__BUTTON__ICON__height); --icon__width: var(--UI__MAINBAR__MENU__BUTTON__ICON__width); } .UI-button:hover{ --background: var(--UI__MAINBAR__MENU__BUTTON-HOVER__background); --color: var(--UI__MAINBAR__MENU__BUTTON-HOVER__color); --svgcolor: var(--UI__MAINBAR__MENU__BUTTON-HOVER__svgcolor); } } } &[data-dialog]{ .UI-button{ opacity:0.2; } } } &[data-main="map"]{ button[data-switchtomain="map"]{ display:none; } } &[data-main="calendar"]{ button[data-switchtomain="calendar"]{ display:none; } } &[data-panelsearch="open"]{ #app__panel--search{ left:0; opacity:1; } #app__foregroudPanel{ width:100vw; } } > .UI-panel{ > .UI-panel__body{ > .UI-tabulation { > .UI-tabulation__body{ --UI__FILTER__background: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__background); --UI__FILTER__margin: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__margin); --UI__FILTER__borderColor: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__borderColor); --UI__FILTER__borderWidth: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__borderWidth); --UI__FILTER__borderStyle: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__borderStyle); --UI__FILTER__HEAD__padding: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__HEAD__padding); --UI__FILTER__HEAD__TITLE__fontWeight: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__HEAD__TITLE__fontWeight); --UI__FILTER__HEAD__TITLE__fontSize: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__HEAD__TITLE__fontSize); --UI__FILTER__HEAD__TITLE__color: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__HEAD__TITLE__color); --UI__FILTER__HEAD__TITLE__ICON__height: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__HEAD__TITLE__ICON__height); --UI__FILTER__HEAD__TITLE__ICON__width: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__HEAD__TITLE__ICON__width); --UI__FILTER__HEAD__TITLE__svgcolor: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__HEAD__TITLE__svgcolor); --UI__FILTER__HEAD__CHOICE__fontSize: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__HEAD__CHOICE__fontSize); --UI__FILTER__HEAD__CHOICE__fontWeight: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__HEAD__CHOICE__fontWeight); --UI__FILTER__HEAD__CHOICE__color: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__HEAD__CHOICE__color); --UI__FILTER__HEAD__CHOICE__gap: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__HEAD__CHOICE__gap); --UI__FILTER__BODY__borderTopWidth: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__BODY__borderTopWidth); --UI__FILTER__BODY__borderTopColor: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__BODY__borderTopColor); --UI__FILTER__BODY__borderTopStyle: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__BODY__borderTopStyle); --UI__FILTER__BODY__padding: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__BODY__padding); --UI__FILTER__BODY__TOOLS__BUTTON__padding: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__BODY__TOOLS__BUTTON__padding); --UI__FILTER__BODY__TOOLS__BUTTON__background: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__BODY__TOOLS__BUTTON__background); --UI__FILTER__BODY__TOOLS__BUTTON__fontSize: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__BODY__TOOLS__BUTTON__fontSize); --UI__FILTER__BODY__TOOLS__BUTTON__fontWeight: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__BODY__TOOLS__BUTTON__fontWeight); --UI__FILTER__BODY__TOOLS__BUTTON__borderColor: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__BODY__TOOLS__BUTTON__borderColor); --UI__FILTER__BODY__TOOLS__BUTTON__borderWidth: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__BODY__TOOLS__BUTTON__borderWidth); --UI__FILTER__BODY__TOOLS__BUTTON__borderStyle: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__BODY__TOOLS__BUTTON__borderStyle); --UI__FILTER__BODY__TOOLS__BUTTON__borderRadius: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__BODY__TOOLS__BUTTON__borderRadius); --UI__FILTER__BODY__TOOLS__BUTTON__color: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__BODY__TOOLS__BUTTON__color); --UI__FILTER__BODY__TOOLS__BUTTON__ICON__height: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__BODY__TOOLS__BUTTON__ICON__height); --UI__FILTER__BODY__TOOLS__BUTTON__ICON__width: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__BODY__TOOLS__BUTTON__ICON__width); --UI__FILTER__BODY__TOOLS__BUTTON__svgcolor: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__BODY__TOOLS__BUTTON__svgcolor); --UI__FILTER__BODY__TOOLS__BUTTON-HOVER__background: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__BODY__TOOLS__BUTTON-HOVER__background); --UI__FILTER__BODY__TOOLS__BUTTON-HOVER__borderColor: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__BODY__TOOLS__BUTTON-HOVER__borderColor); --UI__FILTER__BODY__TOOLS__BUTTON-HOVER__svgcolor: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__BODY__TOOLS__BUTTON-HOVER__svgcolor); --UI__FILTER__BODY__TOOLS__BUTTON-HOVER__color: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__BODY__TOOLS__BUTTON-HOVER__color); --UI__FILTER-ACTIVE__borderColor: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER-ACTIVE__borderColor); --UI__FILTER-ACTIVE__HEAD__TITLE__color : var(--UI__PANEL__BODY__TABULATION__BODY__FILTER-ACTIVE__HEAD__TITLE__color); --UI__FILTER-ACTIVE__HEAD__TITLE__svgcolor : var(--UI__PANEL__BODY__TABULATION__BODY__FILTER-ACTIVE__HEAD__TITLE__svgcolor); --UI__FILTER-ACTIVE__BODY__borderTopColor: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER-ACTIVE__BODY__borderTopColor); --UI__FILTER__BODY__CHOICE__borderWidth: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__BODY__CHOICE__borderWidth); --UI__FILTER__BODY__CHOICE__borderStyle: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__BODY__CHOICE__borderStyle); --UI__FILTER__BODY__CHOICE__gap: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__BODY__CHOICE__gap); --UI__FILTER__BODY__CHOICE__padding: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__BODY__CHOICE__padding); --UI__FILTER__BODY__CHOICE__margin: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__BODY__CHOICE__margin); --UI__FILTER__BODY__CHOICE__LABEL__fontSize: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__BODY__CHOICE__LABEL__fontSize); --UI__FILTER__BODY__CHOICE__LABEL__ICON__height: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__BODY__CHOICE__LABEL__ICON__height); --UI__FILTER__BODY__CHOICE__LABEL__ICON__width: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__BODY__CHOICE__LABEL__ICON__width); --UI__FILTER__BODY__CHOICE__borderColor: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__BODY__CHOICE__borderColor); --UI__FILTER__BODY__CHOICE__LABEL__color: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__BODY__CHOICE__LABEL__color); --UI__FILTER__BODY__CHOICE__LABEL__svgcolor: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__BODY__CHOICE__LABEL__svgcolor); /* --UI__FILTER__BODY__CHOICE-ACTIVE__borderColor: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__BODY__CHOICE-ACTIVE__borderColor); */ --UI__FILTER__BODY__CHOICE-ACTIVE__LABEL__color: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__BODY__CHOICE-ACTIVE__LABEL__color); --UI__FILTER__BODY__CHOICE-ACTIVE__LABEL__svgcolor: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__BODY__CHOICE-ACTIVE__LABEL__svgcolor); --UI__FILTER__BODY__CHOICE-HOVER__borderColor: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__BODY__CHOICE-HOVER__borderColor); --UI__FILTER__BODY__CHOICE-HOVER__LABEL__color: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__BODY__CHOICE-HOVER__LABEL__color); --UI__FILTER__BODY__CHOICE-HOVER__LABEL__svgcolor: var(--UI__PANEL__BODY__TABULATION__BODY__FILTER__BODY__CHOICE-HOVER__LABEL__svgcolor); .byactivitytypegroup{ &#byactivitytypegroup--tat-primary{ --UI__FILTER__borderColor: var(--tat-primary__color); --UI__FILTER__HEAD__TITLE__color: var(--tat-primary__color); --UI__FILTER__HEAD__TITLE__svgcolor:var(--tat-primary__svgcolor); --UI__FILTER__BODY__TOOLS__BUTTON__borderColor: var(--tat-primary__color); --UI__FILTER__BODY__borderTopColor:var(--tat-primary__color); --UI__FILTER__BODY__CHOICE-HOVER__borderColor:var(--tat-primary__color); --UI__FILTER__BODY__CHOICE-HOVER__LABEL__color:var(--tat-primary__color); --UI__FILTER__BODY__CHOICE-HOVER__LABEL__svgcolor:var(--tat-primary__svgcolor); --UI__FILTER__BODY__CHOICE-ACTIVE__LABEL__color:var(--tat-primary__color); --UI__FILTER__BODY__CHOICE-ACTIVE__LABEL__svgcolor:var(--tat-primary__svgcolor); } &#byactivitytypegroup--tat-support{ --UI__FILTER__borderColor: var(--tat-support__color); --UI__FILTER__HEAD__TITLE__color: var(--tat-support__color); --UI__FILTER__HEAD__TITLE__svgcolor:var(--tat-support__svgcolor); --UI__FILTER__BODY__TOOLS__BUTTON__borderColor: var(--tat-support__color); --UI__FILTER__BODY__borderTopColor:var(--tat-support__color); --UI__FILTER__BODY__CHOICE-HOVER__borderColor:var(--tat-support__color); --UI__FILTER__BODY__CHOICE-HOVER__LABEL__color:var(--tat-support__color); --UI__FILTER__BODY__CHOICE-HOVER__LABEL__svgcolor:var(--tat-support__svgcolor); --UI__FILTER__BODY__CHOICE-ACTIVE__LABEL__color:var(--tat-support__color); --UI__FILTER__BODY__CHOICE-ACTIVE__LABEL__svgcolor:var(--tat-support__svgcolor); } &#byactivitytypegroup--tat-entertainment{ --UI__FILTER__borderColor: var(--tat-entertainment__color); --UI__FILTER__HEAD__TITLE__color: var(--tat-entertainment__color); --UI__FILTER__HEAD__TITLE__svgcolor: var(--tat-entertainment__svgcolor); --UI__FILTER__BODY__TOOLS__BUTTON__borderColor: var(--tat-entertainment__color); --UI__FILTER__BODY__borderTopColor: var(--tat-entertainment__color); --UI__FILTER__BODY__CHOICE-HOVER__borderColor: var(--tat-entertainment__color); --UI__FILTER__BODY__CHOICE-HOVER__LABEL__color: var(--tat-entertainment__color); --UI__FILTER__BODY__CHOICE-HOVER__LABEL__svgcolor: var(--tat-entertainment__svgcolor); --UI__FILTER__BODY__CHOICE-ACTIVE__LABEL__color: var(--tat-entertainment__color); --UI__FILTER__BODY__CHOICE-ACTIVE__LABEL__svgcolor:var(--tat-entertainment__svgcolor); } } } } } } } .calendar{ > .date{ position:relative; display:grid; grid-template-areas:"title geolocations"; > .title{grid-area:title; background:#fff; border-color:var(--color--green-0); border-width:0 2px; border-style:solid; color:var(--color--green-0); font-size:20px; position:relative; > ._inner{ border-color:var(--color--green-0); border-width:2px 0; border-style:solid; position:sticky; top:0; display:grid; grid-template-areas: "day month" "year year"; grid-template-columns: min-content min-content; padding:5px; .day:after{ content:'/'; } .year{ display:none; } } } > .geolocations{grid-area:geolocations; > .geolocation{ > .title{ background:#fff; border:var(--color--orange-0) 2px solid; padding:5px 8px; --color:var(--color--orange-0); --fontSize:15px; --fontWeight:bold; color:var(--color--orange-0); font-size:16px; > .housenumber{ margin-right:5px; } } > .activities{ > .activity{ display:grid; grid-template-areas: "title timelapses" "organisation activitytypes" "summary summary" ; gap:10px; grid-template-columns:1fr min-content; padding:8px 8px; margin-bottom:8px; border:#dadada 2px solid; > .title{ grid-area:title; --fontWeight:bold; --fontSize:16px; --color:var(--color--black-0); } > .timelapses{ grid-area:timelapses; /* color:var(--color--block-0);*/ font-size:14px; > .timetable{ font-size:10px; border-collapse:collapse; >.timetable_quarter{ td{ border-bottom:var(--color--grey-0) 15px solid; padding:0 1.8px; } td.active{ border-bottom-color:var(--color--orange-0); } } } } > .activitytypes{ --fontSize:15px; --icon__height:20px; --icon__width: 20px; >.activitytype.of-activitygroup--tat-entertainment{ --svgcolor:var(--tat-entertainment__svgcolor); } >.activitytype.of-activitygroup--tat-primary{ --svgcolor:var(--tat-primary__svgcolor); } >.activitytype.of-activitygroup--tat-support{ --svgcolor:var(--tat-support__svgcolor); } .UI-text{display:none} display:flex; gap:5px; } > .organisation{ grid-area:organisation; > .title{ --fontSize:15px; --color:var(--color--black-0); } } > .summary{ grid-area:summary; --fontSize:15px; --color:var(--color--black-0); } } } } } } > .activity{ > .activity__title{ font-size: var(--pos-left__calendar__body__activity__title--fontSize); color: var(--pos-left__calendar__body__activity__title--color); } > .activity__summary{ font-size: var(--pos-left__calendar__body__activity__summary--fontSize); color: var(--pos-left__calendar__body__activity__summary--color); } } > .activity:hover{ background: var(--pos-left__calendar__body__activity_hover--background); border: var(--pos-left__calendar__body__activity_hover--border); } } .map__geolocation{ .map__geolocation__head{ display:flex; gap:10px; justify-content:space-between; .map__geolocation__title{ font-size:14px; } } .map__geolocation__body{ .activitytypes{ display:flex; gap:3px; padding:3px 0; .UI-iconText{ border:var(--color--green-0) 2px solid; padding:3px; border-radius:3px; .UI-text{ display:none; } .UI-icon{ width:14px;height:14px; } } } .map__geolocation__toolbar{ .UI-button{ padding:5px 5px 2px 5px; .UI-icon{height:15px;width:15px;} } } } }