From 55b603a66c8c2c5560f50bfc77dee7262ab5b55c Mon Sep 17 00:00:00 2001 From: Fa Team Date: Fri, 20 Oct 2023 15:51:54 +0330 Subject: [PATCH] Implement RTL Styles for Multiple Languages Add RTL support for many RTL languages such as AR,FA,HE, etc. Beside user menu in the user panel now support RTL,LTR direction --- core/css/apps.css | 1809 +++++++++++++++++++++++++- core/css/apps.css.map | 2 +- core/css/apps.scss | 2856 +++++++++++++++++++++-------------------- 3 files changed, 3245 insertions(+), 1422 deletions(-) diff --git a/core/css/apps.css b/core/css/apps.css index dd35d38efd105..5ee67e6d9cf32 100644 --- a/core/css/apps.css +++ b/core/css/apps.css @@ -1 +1,1808 @@ -:root{--border-radius-rounded: calc(var(--default-clickable-area) / 2 + var(--default-grid-baseline) * 2 - 2px);--body-container-radius: var(--border-radius-rounded);--body-container-margin: calc(var(--default-grid-baseline) * 2);--body-height: calc(100% - env(safe-area-inset-bottom) - 50px - var(--body-container-margin))}@media screen and (max-width: 1024px){:root{--body-container-margin: 0px;--body-container-radius: 0px}}html{width:100%;height:100%;position:absolute;background-color:var(--color-background-plain, var(--color-main-background))}body{background-color:var(--color-background-plain, var(--color-main-background));background-image:var(--image-background, var(--image-background-default));background-size:cover;background-position:center;position:fixed;width:100%;height:calc(100vh - env(safe-area-inset-bottom))}h2{font-weight:bold;font-size:20px;margin-bottom:12px;line-height:30px;color:var(--color-text-light)}h3{font-size:16px;margin:12px 0;color:var(--color-text-light)}h4{font-size:14px}em{font-style:normal;color:var(--color-text-lighter)}dl{padding:12px 0}dt,dd{display:inline-block;padding:12px;padding-left:0}dt{width:130px;white-space:nowrap;text-align:right}kbd{padding:4px 10px;border:1px solid #ccc;box-shadow:0 1px 0 rgba(0,0,0,.2);border-radius:var(--border-radius);display:inline-block;white-space:nowrap}#content[class*=app-] *{box-sizing:border-box}#app-navigation:not(.vue){--border-radius-pill: calc(var(--default-clickable-area) / 2);width:300px;z-index:500;overflow-y:auto;overflow-x:hidden;background-color:var(--color-main-background-blur);backdrop-filter:var(--filter-background-blur);-webkit-backdrop-filter:var(--filter-background-blur);-webkit-user-select:none;position:sticky;height:100%;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-direction:column;flex-grow:0;flex-shrink:0}#app-navigation:not(.vue) .app-navigation-caption{font-weight:bold;line-height:44px;padding:10px 44px 0 44px;white-space:nowrap;text-overflow:ellipsis;box-shadow:none !important;user-select:none;pointer-events:none;margin-left:10px}.app-navigation-personal .app-navigation-new,.app-navigation-administration .app-navigation-new{display:block;padding:calc(var(--default-grid-baseline)*2)}.app-navigation-personal .app-navigation-new button,.app-navigation-administration .app-navigation-new button{display:inline-block;width:100%;padding:10px;padding-left:34px;background-position:10px center;text-align:left;margin:0}.app-navigation-personal li,.app-navigation-administration li{position:relative}.app-navigation-personal>ul,.app-navigation-administration>ul{position:relative;height:100%;width:100%;overflow-x:hidden;overflow-y:auto;box-sizing:border-box;display:flex;flex-direction:column;padding:calc(var(--default-grid-baseline)*2);padding-bottom:0}.app-navigation-personal>ul:last-child,.app-navigation-administration>ul:last-child{padding-bottom:calc(var(--default-grid-baseline)*2)}.app-navigation-personal>ul>li,.app-navigation-administration>ul>li{display:inline-flex;flex-wrap:wrap;order:1;flex-shrink:0;margin:0;margin-bottom:3px;width:100%;border-radius:var(--border-radius-pill)}.app-navigation-personal>ul>li.pinned,.app-navigation-administration>ul>li.pinned{order:2}.app-navigation-personal>ul>li.pinned.first-pinned,.app-navigation-administration>ul>li.pinned.first-pinned{margin-top:auto !important}.app-navigation-personal>ul>li>.app-navigation-entry-deleted,.app-navigation-administration>ul>li>.app-navigation-entry-deleted{padding-left:44px !important}.app-navigation-personal>ul>li>.app-navigation-entry-edit,.app-navigation-administration>ul>li>.app-navigation-entry-edit{padding-left:38px !important}.app-navigation-personal>ul>li a:hover,.app-navigation-personal>ul>li a:hover>a,.app-navigation-personal>ul>li a:focus,.app-navigation-personal>ul>li a:focus>a,.app-navigation-administration>ul>li a:hover,.app-navigation-administration>ul>li a:hover>a,.app-navigation-administration>ul>li a:focus,.app-navigation-administration>ul>li a:focus>a{background-color:var(--color-background-hover)}.app-navigation-personal>ul>li a:focus-visible,.app-navigation-administration>ul>li a:focus-visible{box-shadow:0 0 0 4px var(--color-main-background);outline:2px solid var(--color-main-text)}.app-navigation-personal>ul>li.active,.app-navigation-personal>ul>li.active>a,.app-navigation-personal>ul>li a:active,.app-navigation-personal>ul>li a:active>a,.app-navigation-personal>ul>li a.selected,.app-navigation-personal>ul>li a.selected>a,.app-navigation-personal>ul>li a.active,.app-navigation-personal>ul>li a.active>a,.app-navigation-administration>ul>li.active,.app-navigation-administration>ul>li.active>a,.app-navigation-administration>ul>li a:active,.app-navigation-administration>ul>li a:active>a,.app-navigation-administration>ul>li a.selected,.app-navigation-administration>ul>li a.selected>a,.app-navigation-administration>ul>li a.active,.app-navigation-administration>ul>li a.active>a{background-color:var(--color-primary-element);color:var(--color-primary-element-text)}.app-navigation-personal>ul>li.icon-loading-small:after,.app-navigation-administration>ul>li.icon-loading-small:after{left:22px;top:22px}.app-navigation-personal>ul>li.deleted>ul,.app-navigation-personal>ul>li.collapsible:not(.open)>ul,.app-navigation-administration>ul>li.deleted>ul,.app-navigation-administration>ul>li.collapsible:not(.open)>ul{display:none}.app-navigation-personal>ul>li>ul,.app-navigation-administration>ul>li>ul{flex:0 1 auto;width:100%;position:relative}.app-navigation-personal>ul>li>ul>li,.app-navigation-administration>ul>li>ul>li{display:inline-flex;flex-wrap:wrap;padding-left:44px;width:100%;margin-bottom:3px}.app-navigation-personal>ul>li>ul>li:hover,.app-navigation-personal>ul>li>ul>li:hover>a,.app-navigation-personal>ul>li>ul>li:focus,.app-navigation-personal>ul>li>ul>li:focus>a,.app-navigation-administration>ul>li>ul>li:hover,.app-navigation-administration>ul>li>ul>li:hover>a,.app-navigation-administration>ul>li>ul>li:focus,.app-navigation-administration>ul>li>ul>li:focus>a{border-radius:var(--border-radius-pill);background-color:var(--color-background-hover)}.app-navigation-personal>ul>li>ul>li.active,.app-navigation-personal>ul>li>ul>li.active>a,.app-navigation-personal>ul>li>ul>li a.selected,.app-navigation-personal>ul>li>ul>li a.selected>a,.app-navigation-administration>ul>li>ul>li.active,.app-navigation-administration>ul>li>ul>li.active>a,.app-navigation-administration>ul>li>ul>li a.selected,.app-navigation-administration>ul>li>ul>li a.selected>a{border-radius:var(--border-radius-pill);background-color:var(--color-primary-element-light)}.app-navigation-personal>ul>li>ul>li.icon-loading-small:after,.app-navigation-administration>ul>li>ul>li.icon-loading-small:after{left:22px}.app-navigation-personal>ul>li>ul>li>.app-navigation-entry-deleted,.app-navigation-administration>ul>li>ul>li>.app-navigation-entry-deleted{margin-left:4px;padding-left:84px}.app-navigation-personal>ul>li>ul>li>.app-navigation-entry-edit,.app-navigation-administration>ul>li>ul>li>.app-navigation-entry-edit{margin-left:4px;padding-left:78px !important}.app-navigation-personal>ul>li,.app-navigation-personal>ul>li>ul>li,.app-navigation-administration>ul>li,.app-navigation-administration>ul>li>ul>li{position:relative;box-sizing:border-box}.app-navigation-personal>ul>li.icon-loading-small>a,.app-navigation-personal>ul>li.icon-loading-small>.app-navigation-entry-bullet,.app-navigation-personal>ul>li>ul>li.icon-loading-small>a,.app-navigation-personal>ul>li>ul>li.icon-loading-small>.app-navigation-entry-bullet,.app-navigation-administration>ul>li.icon-loading-small>a,.app-navigation-administration>ul>li.icon-loading-small>.app-navigation-entry-bullet,.app-navigation-administration>ul>li>ul>li.icon-loading-small>a,.app-navigation-administration>ul>li>ul>li.icon-loading-small>.app-navigation-entry-bullet{background:rgba(0,0,0,0) !important}.app-navigation-personal>ul>li>a,.app-navigation-personal>ul>li>ul>li>a,.app-navigation-administration>ul>li>a,.app-navigation-administration>ul>li>ul>li>a{background-size:16px 16px;background-position:14px center;background-repeat:no-repeat;display:block;justify-content:space-between;line-height:44px;min-height:44px;padding:0 12px 0 14px;overflow:hidden;box-sizing:border-box;white-space:nowrap;text-overflow:ellipsis;border-radius:var(--border-radius-pill);color:var(--color-main-text);flex:1 1 0px;z-index:100}.app-navigation-personal>ul>li>a.svg,.app-navigation-personal>ul>li>ul>li>a.svg,.app-navigation-administration>ul>li>a.svg,.app-navigation-administration>ul>li>ul>li>a.svg{padding:0 12px 0 44px}.app-navigation-personal>ul>li>a.svg :focus-visible,.app-navigation-personal>ul>li>ul>li>a.svg :focus-visible,.app-navigation-administration>ul>li>a.svg :focus-visible,.app-navigation-administration>ul>li>ul>li>a.svg :focus-visible{padding:0 8px 0 42px}.app-navigation-personal>ul>li>a:first-child img,.app-navigation-personal>ul>li>ul>li>a:first-child img,.app-navigation-administration>ul>li>a:first-child img,.app-navigation-administration>ul>li>ul>li>a:first-child img{margin-right:11px !important;width:16px;height:16px;filter:var(--background-invert-if-dark)}.app-navigation-personal>ul>li>a>.app-navigation-entry-utils,.app-navigation-personal>ul>li>ul>li>a>.app-navigation-entry-utils,.app-navigation-administration>ul>li>a>.app-navigation-entry-utils,.app-navigation-administration>ul>li>ul>li>a>.app-navigation-entry-utils{display:inline-block;float:right}.app-navigation-personal>ul>li>a>.app-navigation-entry-utils .app-navigation-entry-utils-counter,.app-navigation-personal>ul>li>ul>li>a>.app-navigation-entry-utils .app-navigation-entry-utils-counter,.app-navigation-administration>ul>li>a>.app-navigation-entry-utils .app-navigation-entry-utils-counter,.app-navigation-administration>ul>li>ul>li>a>.app-navigation-entry-utils .app-navigation-entry-utils-counter{padding-right:0 !important}.app-navigation-personal>ul>li>.app-navigation-entry-bullet,.app-navigation-personal>ul>li>ul>li>.app-navigation-entry-bullet,.app-navigation-administration>ul>li>.app-navigation-entry-bullet,.app-navigation-administration>ul>li>ul>li>.app-navigation-entry-bullet{position:absolute;display:block;margin:16px;width:12px;height:12px;border:none;border-radius:50%;cursor:pointer;transition:background 100ms ease-in-out}.app-navigation-personal>ul>li>.app-navigation-entry-bullet+a,.app-navigation-personal>ul>li>ul>li>.app-navigation-entry-bullet+a,.app-navigation-administration>ul>li>.app-navigation-entry-bullet+a,.app-navigation-administration>ul>li>ul>li>.app-navigation-entry-bullet+a{background:rgba(0,0,0,0) !important}.app-navigation-personal>ul>li>.app-navigation-entry-menu,.app-navigation-personal>ul>li>ul>li>.app-navigation-entry-menu,.app-navigation-administration>ul>li>.app-navigation-entry-menu,.app-navigation-administration>ul>li>ul>li>.app-navigation-entry-menu{top:44px}.app-navigation-personal>ul>li.editing .app-navigation-entry-edit,.app-navigation-personal>ul>li>ul>li.editing .app-navigation-entry-edit,.app-navigation-administration>ul>li.editing .app-navigation-entry-edit,.app-navigation-administration>ul>li>ul>li.editing .app-navigation-entry-edit{opacity:1;z-index:250}.app-navigation-personal>ul>li.deleted .app-navigation-entry-deleted,.app-navigation-personal>ul>li>ul>li.deleted .app-navigation-entry-deleted,.app-navigation-administration>ul>li.deleted .app-navigation-entry-deleted,.app-navigation-administration>ul>li>ul>li.deleted .app-navigation-entry-deleted{transform:translateX(0);z-index:250}.app-navigation-personal.hidden,.app-navigation-administration.hidden{display:none}.app-navigation-personal .app-navigation-entry-utils .app-navigation-entry-utils-menu-button>button,.app-navigation-personal .app-navigation-entry-deleted .app-navigation-entry-deleted-button,.app-navigation-administration .app-navigation-entry-utils .app-navigation-entry-utils-menu-button>button,.app-navigation-administration .app-navigation-entry-deleted .app-navigation-entry-deleted-button{border:0;opacity:.5;background-color:rgba(0,0,0,0);background-repeat:no-repeat;background-position:center}.app-navigation-personal .app-navigation-entry-utils .app-navigation-entry-utils-menu-button>button:hover,.app-navigation-personal .app-navigation-entry-utils .app-navigation-entry-utils-menu-button>button:focus,.app-navigation-personal .app-navigation-entry-deleted .app-navigation-entry-deleted-button:hover,.app-navigation-personal .app-navigation-entry-deleted .app-navigation-entry-deleted-button:focus,.app-navigation-administration .app-navigation-entry-utils .app-navigation-entry-utils-menu-button>button:hover,.app-navigation-administration .app-navigation-entry-utils .app-navigation-entry-utils-menu-button>button:focus,.app-navigation-administration .app-navigation-entry-deleted .app-navigation-entry-deleted-button:hover,.app-navigation-administration .app-navigation-entry-deleted .app-navigation-entry-deleted-button:focus{background-color:rgba(0,0,0,0);opacity:1}.app-navigation-personal .collapsible .collapse,.app-navigation-administration .collapsible .collapse{opacity:0;position:absolute;width:44px;height:44px;margin:0;z-index:110;left:0}.app-navigation-personal .collapsible .collapse:focus-visible,.app-navigation-administration .collapsible .collapse:focus-visible{opacity:1;border-width:0;box-shadow:inset 0 0 0 2px var(--color-primary-element);background:none}.app-navigation-personal .collapsible:before,.app-navigation-administration .collapsible:before{position:absolute;height:44px;width:44px;margin:0;padding:0;background:none;background-image:var(--icon-triangle-s-dark);background-size:16px;background-repeat:no-repeat;background-position:center;border:none;border-radius:0;outline:none !important;box-shadow:none;content:" ";opacity:0;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);z-index:105;border-radius:50%;transition:opacity 100ms ease-in-out}.app-navigation-personal .collapsible>a:first-child,.app-navigation-administration .collapsible>a:first-child{padding-left:44px}.app-navigation-personal .collapsible:hover:before,.app-navigation-personal .collapsible:focus:before,.app-navigation-administration .collapsible:hover:before,.app-navigation-administration .collapsible:focus:before{opacity:1}.app-navigation-personal .collapsible:hover>a,.app-navigation-personal .collapsible:focus>a,.app-navigation-administration .collapsible:hover>a,.app-navigation-administration .collapsible:focus>a{background-image:none}.app-navigation-personal .collapsible:hover>.app-navigation-entry-bullet,.app-navigation-personal .collapsible:focus>.app-navigation-entry-bullet,.app-navigation-administration .collapsible:hover>.app-navigation-entry-bullet,.app-navigation-administration .collapsible:focus>.app-navigation-entry-bullet{background:rgba(0,0,0,0) !important}.app-navigation-personal .collapsible.open:before,.app-navigation-administration .collapsible.open:before{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}.app-navigation-personal .app-navigation-entry-utils,.app-navigation-administration .app-navigation-entry-utils{flex:0 1 auto}.app-navigation-personal .app-navigation-entry-utils ul,.app-navigation-administration .app-navigation-entry-utils ul{display:flex !important;align-items:center;justify-content:flex-end}.app-navigation-personal .app-navigation-entry-utils li,.app-navigation-administration .app-navigation-entry-utils li{width:44px !important;height:44px}.app-navigation-personal .app-navigation-entry-utils button,.app-navigation-administration .app-navigation-entry-utils button{height:100%;width:100%;margin:0;box-shadow:none}.app-navigation-personal .app-navigation-entry-utils .app-navigation-entry-utils-menu-button button:not([class^=icon-]):not([class*=" icon-"]),.app-navigation-administration .app-navigation-entry-utils .app-navigation-entry-utils-menu-button button:not([class^=icon-]):not([class*=" icon-"]){background-image:var(--icon-more-dark)}.app-navigation-personal .app-navigation-entry-utils .app-navigation-entry-utils-menu-button:hover button,.app-navigation-personal .app-navigation-entry-utils .app-navigation-entry-utils-menu-button:focus button,.app-navigation-administration .app-navigation-entry-utils .app-navigation-entry-utils-menu-button:hover button,.app-navigation-administration .app-navigation-entry-utils .app-navigation-entry-utils-menu-button:focus button{background-color:rgba(0,0,0,0);opacity:1}.app-navigation-personal .app-navigation-entry-utils .app-navigation-entry-utils-counter,.app-navigation-administration .app-navigation-entry-utils .app-navigation-entry-utils-counter{overflow:hidden;text-align:right;font-size:9pt;line-height:44px;padding:0 12px}.app-navigation-personal .app-navigation-entry-utils .app-navigation-entry-utils-counter.highlighted,.app-navigation-administration .app-navigation-entry-utils .app-navigation-entry-utils-counter.highlighted{padding:0;text-align:center}.app-navigation-personal .app-navigation-entry-utils .app-navigation-entry-utils-counter.highlighted span,.app-navigation-administration .app-navigation-entry-utils .app-navigation-entry-utils-counter.highlighted span{padding:2px 5px;border-radius:10px;background-color:var(--color-primary-element);color:var(--color-primary-element-text)}.app-navigation-personal .app-navigation-entry-edit,.app-navigation-administration .app-navigation-entry-edit{padding-left:5px;padding-right:5px;display:block;width:calc(100% - 1px);transition:opacity 250ms ease-in-out;opacity:0;position:absolute;background-color:var(--color-main-background);z-index:-1}.app-navigation-personal .app-navigation-entry-edit form,.app-navigation-personal .app-navigation-entry-edit div,.app-navigation-administration .app-navigation-entry-edit form,.app-navigation-administration .app-navigation-entry-edit div{display:inline-flex;width:100%}.app-navigation-personal .app-navigation-entry-edit input,.app-navigation-administration .app-navigation-entry-edit input{padding:5px;margin-right:0;height:38px}.app-navigation-personal .app-navigation-entry-edit input:hover,.app-navigation-personal .app-navigation-entry-edit input:focus,.app-navigation-administration .app-navigation-entry-edit input:hover,.app-navigation-administration .app-navigation-entry-edit input:focus{z-index:1}.app-navigation-personal .app-navigation-entry-edit input[type=text],.app-navigation-administration .app-navigation-entry-edit input[type=text]{width:100%;min-width:0;border-bottom-right-radius:0;border-top-right-radius:0}.app-navigation-personal .app-navigation-entry-edit button,.app-navigation-personal .app-navigation-entry-edit input:not([type=text]),.app-navigation-administration .app-navigation-entry-edit button,.app-navigation-administration .app-navigation-entry-edit input:not([type=text]){width:36px;height:38px;flex:0 0 36px}.app-navigation-personal .app-navigation-entry-edit button:not(:last-child),.app-navigation-personal .app-navigation-entry-edit input:not([type=text]):not(:last-child),.app-navigation-administration .app-navigation-entry-edit button:not(:last-child),.app-navigation-administration .app-navigation-entry-edit input:not([type=text]):not(:last-child){border-radius:0 !important}.app-navigation-personal .app-navigation-entry-edit button:not(:first-child),.app-navigation-personal .app-navigation-entry-edit input:not([type=text]):not(:first-child),.app-navigation-administration .app-navigation-entry-edit button:not(:first-child),.app-navigation-administration .app-navigation-entry-edit input:not([type=text]):not(:first-child){margin-left:-1px}.app-navigation-personal .app-navigation-entry-edit button:last-child,.app-navigation-personal .app-navigation-entry-edit input:not([type=text]):last-child,.app-navigation-administration .app-navigation-entry-edit button:last-child,.app-navigation-administration .app-navigation-entry-edit input:not([type=text]):last-child{border-bottom-right-radius:var(--border-radius);border-top-right-radius:var(--border-radius);border-bottom-left-radius:0;border-top-left-radius:0}.app-navigation-personal .app-navigation-entry-deleted,.app-navigation-administration .app-navigation-entry-deleted{display:inline-flex;padding-left:44px;transform:translateX(300px)}.app-navigation-personal .app-navigation-entry-deleted .app-navigation-entry-deleted-description,.app-navigation-administration .app-navigation-entry-deleted .app-navigation-entry-deleted-description{position:relative;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex:1 1 0px;line-height:44px}.app-navigation-personal .app-navigation-entry-deleted .app-navigation-entry-deleted-button,.app-navigation-administration .app-navigation-entry-deleted .app-navigation-entry-deleted-button{margin:0;height:44px;width:44px;line-height:44px}.app-navigation-personal .app-navigation-entry-deleted .app-navigation-entry-deleted-button:hover,.app-navigation-personal .app-navigation-entry-deleted .app-navigation-entry-deleted-button:focus,.app-navigation-administration .app-navigation-entry-deleted .app-navigation-entry-deleted-button:hover,.app-navigation-administration .app-navigation-entry-deleted .app-navigation-entry-deleted-button:focus{opacity:1}.app-navigation-personal .app-navigation-entry-edit,.app-navigation-personal .app-navigation-entry-deleted,.app-navigation-administration .app-navigation-entry-edit,.app-navigation-administration .app-navigation-entry-deleted{width:calc(100% - 1px);transition:transform 250ms ease-in-out,opacity 250ms ease-in-out,z-index 250ms ease-in-out;position:absolute;left:0;background-color:var(--color-main-background);box-sizing:border-box}.app-navigation-personal .drag-and-drop,.app-navigation-administration .drag-and-drop{-webkit-transition:padding-bottom 500ms ease 0s;transition:padding-bottom 500ms ease 0s;padding-bottom:40px}.app-navigation-personal .error,.app-navigation-administration .error{color:var(--color-error)}.app-navigation-personal .app-navigation-entry-utils ul,.app-navigation-personal .app-navigation-entry-menu ul,.app-navigation-administration .app-navigation-entry-utils ul,.app-navigation-administration .app-navigation-entry-menu ul{list-style-type:none}#content{box-sizing:border-box;position:static;margin:var(--body-container-margin);margin-top:50px;padding:0;display:flex;width:calc(100% - var(--body-container-margin)*2);height:var(--body-height);border-radius:var(--body-container-radius);overflow:clip}#content:not(.with-sidebar--full){position:fixed}@media only screen and (max-width: 1024px){#content{border-top-left-radius:var(--border-radius-large);border-top-right-radius:var(--border-radius-large)}#app-navigation{border-top-left-radius:var(--border-radius-large)}#app-sidebar{border-top-right-radius:var(--border-radius-large)}}#app-content{z-index:1000;background-color:var(--color-main-background);flex-basis:100vw;overflow:auto;position:initial;height:100%}#app-content>.section:first-child{border-top:none}#app-content #app-content-wrapper{display:flex;position:relative;align-items:stretch;min-height:100%}#app-content #app-content-wrapper .app-content-details{flex:1 1 524px}#app-content #app-content-wrapper .app-content-details #app-navigation-toggle-back{display:none}#app-content::-webkit-scrollbar-button{height:var(--body-container-radius)}#app-sidebar{width:27vw;min-width:300px;max-width:500px;display:block;position:-webkit-sticky;position:sticky;top:50px;right:0;overflow-y:auto;overflow-x:hidden;z-index:1500;opacity:.7px;height:calc(100vh - 50px);background:var(--color-main-background);border-left:1px solid var(--color-border);flex-shrink:0}#app-sidebar.disappear{display:none}#app-settings{margin-top:auto}#app-settings.open #app-settings-content,#app-settings.opened #app-settings-content{display:block}#app-settings-content{display:none;padding:calc(var(--default-grid-baseline)*2);padding-top:0;padding-left:calc(var(--default-grid-baseline)*4);max-height:300px;overflow-y:auto;box-sizing:border-box}#app-settings-content input[type=text]{width:93%}#app-settings-content .info-text{padding:5px 0 7px 22px;color:var(--color-text-lighter)}#app-settings-content input[type=checkbox].radio+label,#app-settings-content input[type=checkbox].checkbox+label,#app-settings-content input[type=radio].radio+label,#app-settings-content input[type=radio].checkbox+label{display:inline-block;width:100%;padding:5px 0}#app-settings-header{box-sizing:border-box;background-color:rgba(0,0,0,0);overflow:hidden;border-radius:calc(var(--default-clickable-area)/2);padding:calc(var(--default-grid-baseline)*2);padding-top:0}#app-settings-header .settings-button{display:flex;align-items:center;height:44px;width:100%;padding:0;margin:0;background-color:rgba(0,0,0,0);box-shadow:none;border:0;border-radius:calc(var(--default-clickable-area)/2);text-align:left;font-weight:normal;font-size:100%;opacity:.8;color:var(--color-main-text)}#app-settings-header .settings-button.opened{border-top:solid 1px var(--color-border);background-color:var(--color-main-background);margin-top:8px}#app-settings-header .settings-button:hover,#app-settings-header .settings-button:focus{background-color:var(--color-background-hover)}#app-settings-header .settings-button::before{background-image:var(--icon-settings-dark);background-position:14px center;background-repeat:no-repeat;content:"";width:44px;height:44px;top:0;left:0;display:block}#app-settings-header .settings-button:focus-visible{box-shadow:0 0 0 2px inset var(--color-primary-element) !important;background-position:12px center}.section{display:block;padding:30px;margin-bottom:24px}.section.hidden{display:none !important}.section input[type=checkbox],.section input[type=radio]{vertical-align:-2px;margin-right:4px}.sub-section{position:relative;margin-top:10px;margin-left:27px;margin-bottom:10px}.appear{opacity:1;-webkit-transition:opacity 500ms ease 0s;-moz-transition:opacity 500ms ease 0s;-ms-transition:opacity 500ms ease 0s;-o-transition:opacity 500ms ease 0s;transition:opacity 500ms ease 0s}.appear.transparent{opacity:0}.tabHeaders{display:flex;margin-bottom:16px}.tabHeaders .tabHeader{display:flex;flex-direction:column;flex-grow:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;color:var(--color-text-lighter);margin-bottom:1px;padding:5px}.tabHeaders .tabHeader.hidden{display:none}.tabHeaders .tabHeader:first-child{padding-left:15px}.tabHeaders .tabHeader:last-child{padding-right:15px}.tabHeaders .tabHeader .icon{display:inline-block;width:100%;height:16px;background-size:16px;vertical-align:middle;margin-top:-2px;margin-right:3px;opacity:.7;cursor:pointer}.tabHeaders .tabHeader a{color:var(--color-text-lighter);margin-bottom:1px;overflow:hidden;text-overflow:ellipsis}.tabHeaders .tabHeader.selected{font-weight:bold}.tabHeaders .tabHeader.selected,.tabHeaders .tabHeader:hover,.tabHeaders .tabHeader:focus{margin-bottom:0px;color:var(--color-main-text);border-bottom:1px solid var(--color-text-lighter)}.tabsContainer{clear:left}.tabsContainer .tab{padding:0 15px 15px}.contact .popovermenu ul>li>a>img,.popover__menu>li>a>img{filter:var(--background-invert-if-dark)}.contact .popovermenu ul>li>a>img[src^=data],.popover__menu>li>a>img[src^=data]{filter:none}.bubble,.app-navigation-entry-menu,.popovermenu{position:absolute;background-color:var(--color-main-background);color:var(--color-main-text);border-radius:var(--border-radius-large);padding:3px;z-index:110;margin:5px;margin-top:-5px;right:0;filter:drop-shadow(0 1px 3px var(--color-box-shadow));display:none;will-change:filter}.bubble:after,.app-navigation-entry-menu:after,.popovermenu:after{bottom:100%;right:7px;border:solid rgba(0,0,0,0);content:" ";height:0;width:0;position:absolute;pointer-events:none;border-bottom-color:var(--color-main-background);border-width:9px}.bubble.menu-center,.app-navigation-entry-menu.menu-center,.popovermenu.menu-center{transform:translateX(50%);right:50%;margin-right:0}.bubble.menu-center:after,.app-navigation-entry-menu.menu-center:after,.popovermenu.menu-center:after{right:50%;transform:translateX(50%)}.bubble.menu-left,.app-navigation-entry-menu.menu-left,.popovermenu.menu-left{right:auto;left:0;margin-right:0}.bubble.menu-left:after,.app-navigation-entry-menu.menu-left:after,.popovermenu.menu-left:after{left:6px;right:auto}.bubble.open,.app-navigation-entry-menu.open,.popovermenu.open{display:block}.bubble.contactsmenu-popover,.app-navigation-entry-menu.contactsmenu-popover,.popovermenu.contactsmenu-popover{margin:0}.bubble ul,.app-navigation-entry-menu ul,.popovermenu ul{display:flex !important;flex-direction:column}.bubble li,.app-navigation-entry-menu li,.popovermenu li{display:flex;flex:0 0 auto}.bubble li.hidden,.app-navigation-entry-menu li.hidden,.popovermenu li.hidden{display:none}.bubble li>button,.bubble li>a,.bubble li>.menuitem,.app-navigation-entry-menu li>button,.app-navigation-entry-menu li>a,.app-navigation-entry-menu li>.menuitem,.popovermenu li>button,.popovermenu li>a,.popovermenu li>.menuitem{cursor:pointer;line-height:44px;border:0;border-radius:var(--border-radius-large);background-color:rgba(0,0,0,0);display:flex;align-items:flex-start;height:auto;margin:0;font-weight:normal;box-shadow:none;width:100%;color:var(--color-main-text);white-space:nowrap}.bubble li>button span[class^=icon-],.bubble li>button span[class*=" icon-"],.bubble li>button[class^=icon-],.bubble li>button[class*=" icon-"],.bubble li>a span[class^=icon-],.bubble li>a span[class*=" icon-"],.bubble li>a[class^=icon-],.bubble li>a[class*=" icon-"],.bubble li>.menuitem span[class^=icon-],.bubble li>.menuitem span[class*=" icon-"],.bubble li>.menuitem[class^=icon-],.bubble li>.menuitem[class*=" icon-"],.app-navigation-entry-menu li>button span[class^=icon-],.app-navigation-entry-menu li>button span[class*=" icon-"],.app-navigation-entry-menu li>button[class^=icon-],.app-navigation-entry-menu li>button[class*=" icon-"],.app-navigation-entry-menu li>a span[class^=icon-],.app-navigation-entry-menu li>a span[class*=" icon-"],.app-navigation-entry-menu li>a[class^=icon-],.app-navigation-entry-menu li>a[class*=" icon-"],.app-navigation-entry-menu li>.menuitem span[class^=icon-],.app-navigation-entry-menu li>.menuitem span[class*=" icon-"],.app-navigation-entry-menu li>.menuitem[class^=icon-],.app-navigation-entry-menu li>.menuitem[class*=" icon-"],.popovermenu li>button span[class^=icon-],.popovermenu li>button span[class*=" icon-"],.popovermenu li>button[class^=icon-],.popovermenu li>button[class*=" icon-"],.popovermenu li>a span[class^=icon-],.popovermenu li>a span[class*=" icon-"],.popovermenu li>a[class^=icon-],.popovermenu li>a[class*=" icon-"],.popovermenu li>.menuitem span[class^=icon-],.popovermenu li>.menuitem span[class*=" icon-"],.popovermenu li>.menuitem[class^=icon-],.popovermenu li>.menuitem[class*=" icon-"]{min-width:0;min-height:0;background-position:14px center;background-size:16px}.bubble li>button span[class^=icon-],.bubble li>button span[class*=" icon-"],.bubble li>a span[class^=icon-],.bubble li>a span[class*=" icon-"],.bubble li>.menuitem span[class^=icon-],.bubble li>.menuitem span[class*=" icon-"],.app-navigation-entry-menu li>button span[class^=icon-],.app-navigation-entry-menu li>button span[class*=" icon-"],.app-navigation-entry-menu li>a span[class^=icon-],.app-navigation-entry-menu li>a span[class*=" icon-"],.app-navigation-entry-menu li>.menuitem span[class^=icon-],.app-navigation-entry-menu li>.menuitem span[class*=" icon-"],.popovermenu li>button span[class^=icon-],.popovermenu li>button span[class*=" icon-"],.popovermenu li>a span[class^=icon-],.popovermenu li>a span[class*=" icon-"],.popovermenu li>.menuitem span[class^=icon-],.popovermenu li>.menuitem span[class*=" icon-"]{padding:22px 0 22px 44px}.bubble li>button:not([class^=icon-]):not([class*=icon-])>span:not([class^=icon-]):not([class*=icon-]):first-child,.bubble li>button:not([class^=icon-]):not([class*=icon-])>input:not([class^=icon-]):not([class*=icon-]):first-child,.bubble li>button:not([class^=icon-]):not([class*=icon-])>form:not([class^=icon-]):not([class*=icon-]):first-child,.bubble li>a:not([class^=icon-]):not([class*=icon-])>span:not([class^=icon-]):not([class*=icon-]):first-child,.bubble li>a:not([class^=icon-]):not([class*=icon-])>input:not([class^=icon-]):not([class*=icon-]):first-child,.bubble li>a:not([class^=icon-]):not([class*=icon-])>form:not([class^=icon-]):not([class*=icon-]):first-child,.bubble li>.menuitem:not([class^=icon-]):not([class*=icon-])>span:not([class^=icon-]):not([class*=icon-]):first-child,.bubble li>.menuitem:not([class^=icon-]):not([class*=icon-])>input:not([class^=icon-]):not([class*=icon-]):first-child,.bubble li>.menuitem:not([class^=icon-]):not([class*=icon-])>form:not([class^=icon-]):not([class*=icon-]):first-child,.app-navigation-entry-menu li>button:not([class^=icon-]):not([class*=icon-])>span:not([class^=icon-]):not([class*=icon-]):first-child,.app-navigation-entry-menu li>button:not([class^=icon-]):not([class*=icon-])>input:not([class^=icon-]):not([class*=icon-]):first-child,.app-navigation-entry-menu li>button:not([class^=icon-]):not([class*=icon-])>form:not([class^=icon-]):not([class*=icon-]):first-child,.app-navigation-entry-menu li>a:not([class^=icon-]):not([class*=icon-])>span:not([class^=icon-]):not([class*=icon-]):first-child,.app-navigation-entry-menu li>a:not([class^=icon-]):not([class*=icon-])>input:not([class^=icon-]):not([class*=icon-]):first-child,.app-navigation-entry-menu li>a:not([class^=icon-]):not([class*=icon-])>form:not([class^=icon-]):not([class*=icon-]):first-child,.app-navigation-entry-menu li>.menuitem:not([class^=icon-]):not([class*=icon-])>span:not([class^=icon-]):not([class*=icon-]):first-child,.app-navigation-entry-menu li>.menuitem:not([class^=icon-]):not([class*=icon-])>input:not([class^=icon-]):not([class*=icon-]):first-child,.app-navigation-entry-menu li>.menuitem:not([class^=icon-]):not([class*=icon-])>form:not([class^=icon-]):not([class*=icon-]):first-child,.popovermenu li>button:not([class^=icon-]):not([class*=icon-])>span:not([class^=icon-]):not([class*=icon-]):first-child,.popovermenu li>button:not([class^=icon-]):not([class*=icon-])>input:not([class^=icon-]):not([class*=icon-]):first-child,.popovermenu li>button:not([class^=icon-]):not([class*=icon-])>form:not([class^=icon-]):not([class*=icon-]):first-child,.popovermenu li>a:not([class^=icon-]):not([class*=icon-])>span:not([class^=icon-]):not([class*=icon-]):first-child,.popovermenu li>a:not([class^=icon-]):not([class*=icon-])>input:not([class^=icon-]):not([class*=icon-]):first-child,.popovermenu li>a:not([class^=icon-]):not([class*=icon-])>form:not([class^=icon-]):not([class*=icon-]):first-child,.popovermenu li>.menuitem:not([class^=icon-]):not([class*=icon-])>span:not([class^=icon-]):not([class*=icon-]):first-child,.popovermenu li>.menuitem:not([class^=icon-]):not([class*=icon-])>input:not([class^=icon-]):not([class*=icon-]):first-child,.popovermenu li>.menuitem:not([class^=icon-]):not([class*=icon-])>form:not([class^=icon-]):not([class*=icon-]):first-child{margin-left:44px}.bubble li>button[class^=icon-],.bubble li>button[class*=" icon-"],.bubble li>a[class^=icon-],.bubble li>a[class*=" icon-"],.bubble li>.menuitem[class^=icon-],.bubble li>.menuitem[class*=" icon-"],.app-navigation-entry-menu li>button[class^=icon-],.app-navigation-entry-menu li>button[class*=" icon-"],.app-navigation-entry-menu li>a[class^=icon-],.app-navigation-entry-menu li>a[class*=" icon-"],.app-navigation-entry-menu li>.menuitem[class^=icon-],.app-navigation-entry-menu li>.menuitem[class*=" icon-"],.popovermenu li>button[class^=icon-],.popovermenu li>button[class*=" icon-"],.popovermenu li>a[class^=icon-],.popovermenu li>a[class*=" icon-"],.popovermenu li>.menuitem[class^=icon-],.popovermenu li>.menuitem[class*=" icon-"]{padding:0 14px 0 44px !important}.bubble li>button:hover,.bubble li>button:focus,.bubble li>a:hover,.bubble li>a:focus,.bubble li>.menuitem:hover,.bubble li>.menuitem:focus,.app-navigation-entry-menu li>button:hover,.app-navigation-entry-menu li>button:focus,.app-navigation-entry-menu li>a:hover,.app-navigation-entry-menu li>a:focus,.app-navigation-entry-menu li>.menuitem:hover,.app-navigation-entry-menu li>.menuitem:focus,.popovermenu li>button:hover,.popovermenu li>button:focus,.popovermenu li>a:hover,.popovermenu li>a:focus,.popovermenu li>.menuitem:hover,.popovermenu li>.menuitem:focus{background-color:var(--color-background-hover)}.bubble li>button:focus,.bubble li>button:focus-visible,.bubble li>a:focus,.bubble li>a:focus-visible,.bubble li>.menuitem:focus,.bubble li>.menuitem:focus-visible,.app-navigation-entry-menu li>button:focus,.app-navigation-entry-menu li>button:focus-visible,.app-navigation-entry-menu li>a:focus,.app-navigation-entry-menu li>a:focus-visible,.app-navigation-entry-menu li>.menuitem:focus,.app-navigation-entry-menu li>.menuitem:focus-visible,.popovermenu li>button:focus,.popovermenu li>button:focus-visible,.popovermenu li>a:focus,.popovermenu li>a:focus-visible,.popovermenu li>.menuitem:focus,.popovermenu li>.menuitem:focus-visible{box-shadow:0 0 0 2px var(--color-primary-element)}.bubble li>button.active,.bubble li>a.active,.bubble li>.menuitem.active,.app-navigation-entry-menu li>button.active,.app-navigation-entry-menu li>a.active,.app-navigation-entry-menu li>.menuitem.active,.popovermenu li>button.active,.popovermenu li>a.active,.popovermenu li>.menuitem.active{border-radius:var(--border-radius-pill);background-color:var(--color-primary-element-light)}.bubble li>button.action,.bubble li>a.action,.bubble li>.menuitem.action,.app-navigation-entry-menu li>button.action,.app-navigation-entry-menu li>a.action,.app-navigation-entry-menu li>.menuitem.action,.popovermenu li>button.action,.popovermenu li>a.action,.popovermenu li>.menuitem.action{padding:inherit !important}.bubble li>button>span,.bubble li>a>span,.bubble li>.menuitem>span,.app-navigation-entry-menu li>button>span,.app-navigation-entry-menu li>a>span,.app-navigation-entry-menu li>.menuitem>span,.popovermenu li>button>span,.popovermenu li>a>span,.popovermenu li>.menuitem>span{cursor:pointer;white-space:nowrap}.bubble li>button>p,.bubble li>a>p,.bubble li>.menuitem>p,.app-navigation-entry-menu li>button>p,.app-navigation-entry-menu li>a>p,.app-navigation-entry-menu li>.menuitem>p,.popovermenu li>button>p,.popovermenu li>a>p,.popovermenu li>.menuitem>p{width:150px;line-height:1.6em;padding:8px 0;white-space:normal}.bubble li>button>select,.bubble li>a>select,.bubble li>.menuitem>select,.app-navigation-entry-menu li>button>select,.app-navigation-entry-menu li>a>select,.app-navigation-entry-menu li>.menuitem>select,.popovermenu li>button>select,.popovermenu li>a>select,.popovermenu li>.menuitem>select{margin:0;margin-left:6px}.bubble li>button:not(:empty),.bubble li>a:not(:empty),.bubble li>.menuitem:not(:empty),.app-navigation-entry-menu li>button:not(:empty),.app-navigation-entry-menu li>a:not(:empty),.app-navigation-entry-menu li>.menuitem:not(:empty),.popovermenu li>button:not(:empty),.popovermenu li>a:not(:empty),.popovermenu li>.menuitem:not(:empty){padding-right:14px !important}.bubble li>button>img,.bubble li>a>img,.bubble li>.menuitem>img,.app-navigation-entry-menu li>button>img,.app-navigation-entry-menu li>a>img,.app-navigation-entry-menu li>.menuitem>img,.popovermenu li>button>img,.popovermenu li>a>img,.popovermenu li>.menuitem>img{width:16px;padding:14px}.bubble li>button>input.radio+label,.bubble li>button>input.checkbox+label,.bubble li>a>input.radio+label,.bubble li>a>input.checkbox+label,.bubble li>.menuitem>input.radio+label,.bubble li>.menuitem>input.checkbox+label,.app-navigation-entry-menu li>button>input.radio+label,.app-navigation-entry-menu li>button>input.checkbox+label,.app-navigation-entry-menu li>a>input.radio+label,.app-navigation-entry-menu li>a>input.checkbox+label,.app-navigation-entry-menu li>.menuitem>input.radio+label,.app-navigation-entry-menu li>.menuitem>input.checkbox+label,.popovermenu li>button>input.radio+label,.popovermenu li>button>input.checkbox+label,.popovermenu li>a>input.radio+label,.popovermenu li>a>input.checkbox+label,.popovermenu li>.menuitem>input.radio+label,.popovermenu li>.menuitem>input.checkbox+label{padding:0 !important;width:100%}.bubble li>button>input.checkbox+label::before,.bubble li>a>input.checkbox+label::before,.bubble li>.menuitem>input.checkbox+label::before,.app-navigation-entry-menu li>button>input.checkbox+label::before,.app-navigation-entry-menu li>a>input.checkbox+label::before,.app-navigation-entry-menu li>.menuitem>input.checkbox+label::before,.popovermenu li>button>input.checkbox+label::before,.popovermenu li>a>input.checkbox+label::before,.popovermenu li>.menuitem>input.checkbox+label::before{margin:-2px 13px 0}.bubble li>button>input.radio+label::before,.bubble li>a>input.radio+label::before,.bubble li>.menuitem>input.radio+label::before,.app-navigation-entry-menu li>button>input.radio+label::before,.app-navigation-entry-menu li>a>input.radio+label::before,.app-navigation-entry-menu li>.menuitem>input.radio+label::before,.popovermenu li>button>input.radio+label::before,.popovermenu li>a>input.radio+label::before,.popovermenu li>.menuitem>input.radio+label::before{margin:-2px 12px 0}.bubble li>button>input:not([type=radio]):not([type=checkbox]):not([type=image]),.bubble li>a>input:not([type=radio]):not([type=checkbox]):not([type=image]),.bubble li>.menuitem>input:not([type=radio]):not([type=checkbox]):not([type=image]),.app-navigation-entry-menu li>button>input:not([type=radio]):not([type=checkbox]):not([type=image]),.app-navigation-entry-menu li>a>input:not([type=radio]):not([type=checkbox]):not([type=image]),.app-navigation-entry-menu li>.menuitem>input:not([type=radio]):not([type=checkbox]):not([type=image]),.popovermenu li>button>input:not([type=radio]):not([type=checkbox]):not([type=image]),.popovermenu li>a>input:not([type=radio]):not([type=checkbox]):not([type=image]),.popovermenu li>.menuitem>input:not([type=radio]):not([type=checkbox]):not([type=image]){width:150px}.bubble li>button form,.bubble li>a form,.bubble li>.menuitem form,.app-navigation-entry-menu li>button form,.app-navigation-entry-menu li>a form,.app-navigation-entry-menu li>.menuitem form,.popovermenu li>button form,.popovermenu li>a form,.popovermenu li>.menuitem form{display:flex;flex:1 1 auto;align-items:center}.bubble li>button form:not(:first-child),.bubble li>a form:not(:first-child),.bubble li>.menuitem form:not(:first-child),.app-navigation-entry-menu li>button form:not(:first-child),.app-navigation-entry-menu li>a form:not(:first-child),.app-navigation-entry-menu li>.menuitem form:not(:first-child),.popovermenu li>button form:not(:first-child),.popovermenu li>a form:not(:first-child),.popovermenu li>.menuitem form:not(:first-child){margin-left:5px}.bubble li>button>span.hidden+form,.bubble li>button>span[style*="display:none"]+form,.bubble li>a>span.hidden+form,.bubble li>a>span[style*="display:none"]+form,.bubble li>.menuitem>span.hidden+form,.bubble li>.menuitem>span[style*="display:none"]+form,.app-navigation-entry-menu li>button>span.hidden+form,.app-navigation-entry-menu li>button>span[style*="display:none"]+form,.app-navigation-entry-menu li>a>span.hidden+form,.app-navigation-entry-menu li>a>span[style*="display:none"]+form,.app-navigation-entry-menu li>.menuitem>span.hidden+form,.app-navigation-entry-menu li>.menuitem>span[style*="display:none"]+form,.popovermenu li>button>span.hidden+form,.popovermenu li>button>span[style*="display:none"]+form,.popovermenu li>a>span.hidden+form,.popovermenu li>a>span[style*="display:none"]+form,.popovermenu li>.menuitem>span.hidden+form,.popovermenu li>.menuitem>span[style*="display:none"]+form{margin-left:0}.bubble li>button input,.bubble li>a input,.bubble li>.menuitem input,.app-navigation-entry-menu li>button input,.app-navigation-entry-menu li>a input,.app-navigation-entry-menu li>.menuitem input,.popovermenu li>button input,.popovermenu li>a input,.popovermenu li>.menuitem input{min-width:44px;max-height:40px;margin:2px 0;flex:1 1 auto}.bubble li>button input:not(:first-child),.bubble li>a input:not(:first-child),.bubble li>.menuitem input:not(:first-child),.app-navigation-entry-menu li>button input:not(:first-child),.app-navigation-entry-menu li>a input:not(:first-child),.app-navigation-entry-menu li>.menuitem input:not(:first-child),.popovermenu li>button input:not(:first-child),.popovermenu li>a input:not(:first-child),.popovermenu li>.menuitem input:not(:first-child){margin-left:5px}.bubble li:not(.hidden):not([style*="display:none"]):first-of-type>button>form,.bubble li:not(.hidden):not([style*="display:none"]):first-of-type>button>input,.bubble li:not(.hidden):not([style*="display:none"]):first-of-type>a>form,.bubble li:not(.hidden):not([style*="display:none"]):first-of-type>a>input,.bubble li:not(.hidden):not([style*="display:none"]):first-of-type>.menuitem>form,.bubble li:not(.hidden):not([style*="display:none"]):first-of-type>.menuitem>input,.app-navigation-entry-menu li:not(.hidden):not([style*="display:none"]):first-of-type>button>form,.app-navigation-entry-menu li:not(.hidden):not([style*="display:none"]):first-of-type>button>input,.app-navigation-entry-menu li:not(.hidden):not([style*="display:none"]):first-of-type>a>form,.app-navigation-entry-menu li:not(.hidden):not([style*="display:none"]):first-of-type>a>input,.app-navigation-entry-menu li:not(.hidden):not([style*="display:none"]):first-of-type>.menuitem>form,.app-navigation-entry-menu li:not(.hidden):not([style*="display:none"]):first-of-type>.menuitem>input,.popovermenu li:not(.hidden):not([style*="display:none"]):first-of-type>button>form,.popovermenu li:not(.hidden):not([style*="display:none"]):first-of-type>button>input,.popovermenu li:not(.hidden):not([style*="display:none"]):first-of-type>a>form,.popovermenu li:not(.hidden):not([style*="display:none"]):first-of-type>a>input,.popovermenu li:not(.hidden):not([style*="display:none"]):first-of-type>.menuitem>form,.popovermenu li:not(.hidden):not([style*="display:none"]):first-of-type>.menuitem>input{margin-top:12px}.bubble li:not(.hidden):not([style*="display:none"]):last-of-type>button>form,.bubble li:not(.hidden):not([style*="display:none"]):last-of-type>button>input,.bubble li:not(.hidden):not([style*="display:none"]):last-of-type>a>form,.bubble li:not(.hidden):not([style*="display:none"]):last-of-type>a>input,.bubble li:not(.hidden):not([style*="display:none"]):last-of-type>.menuitem>form,.bubble li:not(.hidden):not([style*="display:none"]):last-of-type>.menuitem>input,.app-navigation-entry-menu li:not(.hidden):not([style*="display:none"]):last-of-type>button>form,.app-navigation-entry-menu li:not(.hidden):not([style*="display:none"]):last-of-type>button>input,.app-navigation-entry-menu li:not(.hidden):not([style*="display:none"]):last-of-type>a>form,.app-navigation-entry-menu li:not(.hidden):not([style*="display:none"]):last-of-type>a>input,.app-navigation-entry-menu li:not(.hidden):not([style*="display:none"]):last-of-type>.menuitem>form,.app-navigation-entry-menu li:not(.hidden):not([style*="display:none"]):last-of-type>.menuitem>input,.popovermenu li:not(.hidden):not([style*="display:none"]):last-of-type>button>form,.popovermenu li:not(.hidden):not([style*="display:none"]):last-of-type>button>input,.popovermenu li:not(.hidden):not([style*="display:none"]):last-of-type>a>form,.popovermenu li:not(.hidden):not([style*="display:none"]):last-of-type>a>input,.popovermenu li:not(.hidden):not([style*="display:none"]):last-of-type>.menuitem>form,.popovermenu li:not(.hidden):not([style*="display:none"]):last-of-type>.menuitem>input{margin-bottom:0px}.bubble li>button,.app-navigation-entry-menu li>button,.popovermenu li>button{padding:0}.bubble li>button span,.app-navigation-entry-menu li>button span,.popovermenu li>button span{opacity:1}.popovermenu li>button>img,.popovermenu li>a>img,.popovermenu li>.menuitem>img{width:44px;height:44px}#contactsmenu .contact .popovermenu li>a>img{width:16px;height:16px}.app-content-list{position:-webkit-sticky;position:relative;top:0;border-right:1px solid var(--color-border);display:flex;flex-direction:column;transition:transform 250ms ease-in-out;min-height:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;flex:1 1 200px;min-width:200px;max-width:300px}.app-content-list .app-content-list-item{position:relative;height:68px;cursor:pointer;padding:10px 7px;display:flex;flex-wrap:wrap;align-items:center;flex:0 0 auto}.app-content-list .app-content-list-item>[class^=icon-],.app-content-list .app-content-list-item>[class*=" icon-"],.app-content-list .app-content-list-item>.app-content-list-item-menu>[class^=icon-],.app-content-list .app-content-list-item>.app-content-list-item-menu>[class*=" icon-"]{order:4;width:24px;height:24px;margin:-7px;padding:22px;opacity:.3;cursor:pointer}.app-content-list .app-content-list-item>[class^=icon-]:hover,.app-content-list .app-content-list-item>[class^=icon-]:focus,.app-content-list .app-content-list-item>[class*=" icon-"]:hover,.app-content-list .app-content-list-item>[class*=" icon-"]:focus,.app-content-list .app-content-list-item>.app-content-list-item-menu>[class^=icon-]:hover,.app-content-list .app-content-list-item>.app-content-list-item-menu>[class^=icon-]:focus,.app-content-list .app-content-list-item>.app-content-list-item-menu>[class*=" icon-"]:hover,.app-content-list .app-content-list-item>.app-content-list-item-menu>[class*=" icon-"]:focus{opacity:.7}.app-content-list .app-content-list-item>[class^=icon-][class^=icon-star],.app-content-list .app-content-list-item>[class^=icon-][class*=" icon-star"],.app-content-list .app-content-list-item>[class*=" icon-"][class^=icon-star],.app-content-list .app-content-list-item>[class*=" icon-"][class*=" icon-star"],.app-content-list .app-content-list-item>.app-content-list-item-menu>[class^=icon-][class^=icon-star],.app-content-list .app-content-list-item>.app-content-list-item-menu>[class^=icon-][class*=" icon-star"],.app-content-list .app-content-list-item>.app-content-list-item-menu>[class*=" icon-"][class^=icon-star],.app-content-list .app-content-list-item>.app-content-list-item-menu>[class*=" icon-"][class*=" icon-star"]{opacity:.7}.app-content-list .app-content-list-item>[class^=icon-][class^=icon-star]:hover,.app-content-list .app-content-list-item>[class^=icon-][class^=icon-star]:focus,.app-content-list .app-content-list-item>[class^=icon-][class*=" icon-star"]:hover,.app-content-list .app-content-list-item>[class^=icon-][class*=" icon-star"]:focus,.app-content-list .app-content-list-item>[class*=" icon-"][class^=icon-star]:hover,.app-content-list .app-content-list-item>[class*=" icon-"][class^=icon-star]:focus,.app-content-list .app-content-list-item>[class*=" icon-"][class*=" icon-star"]:hover,.app-content-list .app-content-list-item>[class*=" icon-"][class*=" icon-star"]:focus,.app-content-list .app-content-list-item>.app-content-list-item-menu>[class^=icon-][class^=icon-star]:hover,.app-content-list .app-content-list-item>.app-content-list-item-menu>[class^=icon-][class^=icon-star]:focus,.app-content-list .app-content-list-item>.app-content-list-item-menu>[class^=icon-][class*=" icon-star"]:hover,.app-content-list .app-content-list-item>.app-content-list-item-menu>[class^=icon-][class*=" icon-star"]:focus,.app-content-list .app-content-list-item>.app-content-list-item-menu>[class*=" icon-"][class^=icon-star]:hover,.app-content-list .app-content-list-item>.app-content-list-item-menu>[class*=" icon-"][class^=icon-star]:focus,.app-content-list .app-content-list-item>.app-content-list-item-menu>[class*=" icon-"][class*=" icon-star"]:hover,.app-content-list .app-content-list-item>.app-content-list-item-menu>[class*=" icon-"][class*=" icon-star"]:focus{opacity:1}.app-content-list .app-content-list-item>[class^=icon-].icon-starred,.app-content-list .app-content-list-item>[class*=" icon-"].icon-starred,.app-content-list .app-content-list-item>.app-content-list-item-menu>[class^=icon-].icon-starred,.app-content-list .app-content-list-item>.app-content-list-item-menu>[class*=" icon-"].icon-starred{opacity:1}.app-content-list .app-content-list-item:hover,.app-content-list .app-content-list-item:focus,.app-content-list .app-content-list-item.active{background-color:var(--color-background-dark)}.app-content-list .app-content-list-item:hover .app-content-list-item-checkbox.checkbox+label,.app-content-list .app-content-list-item:focus .app-content-list-item-checkbox.checkbox+label,.app-content-list .app-content-list-item.active .app-content-list-item-checkbox.checkbox+label{display:flex}.app-content-list .app-content-list-item .app-content-list-item-checkbox.checkbox+label,.app-content-list .app-content-list-item .app-content-list-item-star{position:absolute;height:40px;width:40px;z-index:50}.app-content-list .app-content-list-item .app-content-list-item-checkbox.checkbox:checked+label,.app-content-list .app-content-list-item .app-content-list-item-checkbox.checkbox:hover+label,.app-content-list .app-content-list-item .app-content-list-item-checkbox.checkbox:focus+label,.app-content-list .app-content-list-item .app-content-list-item-checkbox.checkbox.active+label{display:flex}.app-content-list .app-content-list-item .app-content-list-item-checkbox.checkbox:checked+label+.app-content-list-item-icon,.app-content-list .app-content-list-item .app-content-list-item-checkbox.checkbox:hover+label+.app-content-list-item-icon,.app-content-list .app-content-list-item .app-content-list-item-checkbox.checkbox:focus+label+.app-content-list-item-icon,.app-content-list .app-content-list-item .app-content-list-item-checkbox.checkbox.active+label+.app-content-list-item-icon{opacity:.7}.app-content-list .app-content-list-item .app-content-list-item-checkbox.checkbox+label{top:14px;left:7px;display:none}.app-content-list .app-content-list-item .app-content-list-item-checkbox.checkbox+label::before{margin:0}.app-content-list .app-content-list-item .app-content-list-item-checkbox.checkbox+label~.app-content-list-item-star{display:none}.app-content-list .app-content-list-item .app-content-list-item-star{display:flex;top:10px;left:32px;background-size:16px;height:20px;width:20px;margin:0;padding:0}.app-content-list .app-content-list-item .app-content-list-item-icon{position:absolute;display:inline-block;height:40px;width:40px;line-height:40px;border-radius:50%;vertical-align:middle;margin-right:10px;color:#fff;text-align:center;font-size:1.5em;text-transform:capitalize;object-fit:cover;user-select:none;cursor:pointer;top:50%;margin-top:-20px}.app-content-list .app-content-list-item .app-content-list-item-line-one,.app-content-list .app-content-list-item .app-content-list-item-line-two{display:block;padding-left:50px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;order:1;flex:1 1 0px;padding-right:10px;cursor:pointer}.app-content-list .app-content-list-item .app-content-list-item-line-two{opacity:.5;order:3;flex:1 0;flex-basis:calc(100% - 44px)}.app-content-list .app-content-list-item .app-content-list-item-details{order:2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100px;opacity:.5;font-size:80%;user-select:none}.app-content-list .app-content-list-item .app-content-list-item-menu{order:4;position:relative}.app-content-list .app-content-list-item .app-content-list-item-menu .popovermenu{margin:0;right:-2px}.app-content-list.selection .app-content-list-item-checkbox.checkbox+label{display:flex}.button.primary.skip-navigation:focus-visible{box-shadow:0 0 0 4px var(--color-main-background) !important;outline:2px solid var(--color-main-text) !important}/*# sourceMappingURL=apps.css.map */ +@charset "UTF-8"; +/** + * @copyright Copyright (c) 2016-2017, John Molakvoæ + * @copyright Copyright (c) 2016, Julius Haertl + * @copyright Copyright (c) 2016, Morris Jobke + * @copyright Copyright (c) 2016, pgys + * @copyright Copyright (c) 2016, Lukas Reschke + * @copyright Copyright (c) 2016, Stefan Weil + * @copyright Copyright (c) 2016, Roeland Jago Douma + * @copyright Copyright (c) 2016, jowi + * @copyright Copyright (c) 2015, Hendrik Leppelsack + * @copyright Copyright (c) 2015, Thomas Müller + * @copyright Copyright (c) 2015, Vincent Petry + * @copyright Copyright (c) 2014-2017, Jan-Christoph Borchardt + * + * @license GNU AGPL version 3 or any later version + * + */ +/** + * @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com) + * + * @author John Molakvoæ (skjnldsv) + * + * @license GNU AGPL version 3 or any later version + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, either version 3 of the + * License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + * + */ +/** + * @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com) + * + * @author John Molakvoæ (skjnldsv) + * + * @license GNU AGPL version 3 or any later version + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, either version 3 of the + * License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + * + */ +/** + * @see core/src/icons.js + */ +/** + * SVG COLOR API + * + * @param string $icon the icon filename + * @param string $dir the icon folder within /core/img if $core or app name + * @param string $color the desired color in hexadecimal + * @param int $version the version of the file + * @param bool [$core] search icon in core + * + * @returns A background image with the url to the set to the requested icon. + */ +:root { + /* - 2px is required for making it look nice */ + --border-radius-rounded: calc(var(--default-clickable-area) / 2 + var(--default-grid-baseline) * 2 - 2px); + --body-container-radius: var(--border-radius-rounded); + --body-container-margin: calc(var(--default-grid-baseline) * 2); + --body-height: calc(100% - env(safe-area-inset-bottom) - 50px - var(--body-container-margin)); +} + +@media screen and (max-width: 1024px) { + :root { + --body-container-margin: 0px; + --body-container-radius: 0px; + } +} +html { + width: 100%; + height: 100%; + position: absolute; + background-color: var(--color-background-plain, var(--color-main-background)); +} + +body { + background-color: var(--color-background-plain, var(--color-main-background)); + background-image: var(--image-background, var(--image-background-plain, var(--image-background-default))); + background-size: cover; + background-position: center; + position: fixed; + width: 100%; + height: calc(100vh - env(safe-area-inset-bottom)); +} + +/* BASE STYLING ------------------------------------------------------------ */ +h2 { + font-weight: bold; + font-size: 20px; + margin-bottom: 12px; + line-height: 30px; + color: var(--color-text-light); +} + +h3 { + font-size: 16px; + margin: 12px 0; + color: var(--color-text-light); +} + +h4 { + font-size: 14px; +} + +/* do not use italic typeface style, instead lighter color */ +em { + font-style: normal; + color: var(--color-text-lighter); +} + +dl { + padding: 12px 0; +} + +dt, +dd { + display: inline-block; + padding: 12px; + padding-left: 0; +} + +dt { + width: 130px; + white-space: nowrap; + text-align: right; +} + +kbd { + padding: 4px 10px; + border: 1px solid #ccc; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); + border-radius: var(--border-radius); + display: inline-block; + white-space: nowrap; +} + +/* APP STYLING ------------------------------------------------------------ */ +#content[class*=app-] * { + box-sizing: border-box; +} + +/* APP-NAVIGATION ------------------------------------------------------------ */ +/* Navigation: folder like structure */ +#app-navigation:not(.vue) { + --border-radius-pill: calc(var(--default-clickable-area) / 2); + width: 300px; + z-index: 500; + overflow-y: auto; + overflow-x: hidden; + background-color: var(--color-main-background-blur); + backdrop-filter: var(--filter-background-blur); + -webkit-backdrop-filter: var(--filter-background-blur); + -webkit-user-select: none; + position: sticky; + height: 100%; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + display: flex; + flex-direction: column; + flex-grow: 0; + flex-shrink: 0; +} +#app-navigation:not(.vue) .app-navigation-caption { + font-weight: bold; + line-height: 44px; + padding: 10px 44px 0 44px; + white-space: nowrap; + text-overflow: ellipsis; + box-shadow: none !important; + user-select: none; + pointer-events: none; + margin-left: 10px; +} + +.app-navigation-personal, +.app-navigation-administration { + /* 'New' button */ + /** + * Button styling for menu, edit and undo + */ + /** + * Collapsible menus + */ + /** + * App navigation utils, buttons and counters for drop down menu + */ + /** + * Editable entries + */ + /** + * Deleted entries with undo button + */ + /** + * Common rules for animation of undo and edit entries + */ + /** + * drag and drop + */ +} +.app-navigation-personal .app-navigation-new, +.app-navigation-administration .app-navigation-new { + display: block; + padding: calc(var(--default-grid-baseline) * 2); +} +.app-navigation-personal .app-navigation-new button, +.app-navigation-administration .app-navigation-new button { + display: inline-block; + width: 100%; + padding: 10px; + padding-left: 34px; + background-position: 10px center; + text-align: left; + margin: 0; +} +.app-navigation-personal li, +.app-navigation-administration li { + position: relative; +} +.app-navigation-personal > ul, +.app-navigation-administration > ul { + position: relative; + height: 100%; + width: 100%; + overflow-x: hidden; + overflow-y: auto; + box-sizing: border-box; + display: flex; + flex-direction: column; + padding: calc(var(--default-grid-baseline) * 2); + padding-bottom: 0; + /* Menu and submenu */ +} +.app-navigation-personal > ul:last-child, +.app-navigation-administration > ul:last-child { + padding-bottom: calc(var(--default-grid-baseline) * 2); +} +.app-navigation-personal > ul > li, +.app-navigation-administration > ul > li { + display: inline-flex; + flex-wrap: wrap; + order: 1; + flex-shrink: 0; + margin: 0; + margin-bottom: 3px; + width: 100%; + border-radius: var(--border-radius-pill); + /* Pinned-to-bottom entries */ + /* align loader */ + /* hide deletion/collapse of subitems */ + /* Second level nesting for lists */ +} +.app-navigation-personal > ul > li.pinned, +.app-navigation-administration > ul > li.pinned { + order: 2; +} +.app-navigation-personal > ul > li.pinned.first-pinned, +.app-navigation-administration > ul > li.pinned.first-pinned { + margin-top: auto !important; +} +.app-navigation-personal > ul > li > .app-navigation-entry-deleted, +.app-navigation-administration > ul > li > .app-navigation-entry-deleted { + /* Ugly hack for overriding the main entry link */ + padding-left: 44px !important; +} +.app-navigation-personal > ul > li > .app-navigation-entry-edit, +.app-navigation-administration > ul > li > .app-navigation-entry-edit { + /* Ugly hack for overriding the main entry link */ + /* align the input correctly with the link text + 44px-6px padding for the input */ + padding-left: 38px !important; +} +.app-navigation-personal > ul > li a:hover, +.app-navigation-personal > ul > li a:hover > a, +.app-navigation-personal > ul > li a:focus, +.app-navigation-personal > ul > li a:focus > a, +.app-navigation-administration > ul > li a:hover, +.app-navigation-administration > ul > li a:hover > a, +.app-navigation-administration > ul > li a:focus, +.app-navigation-administration > ul > li a:focus > a { + background-color: var(--color-background-hover); +} +.app-navigation-personal > ul > li a:focus-visible, +.app-navigation-administration > ul > li a:focus-visible { + box-shadow: 0 0 0 4px var(--color-main-background); + outline: 2px solid var(--color-main-text); +} +.app-navigation-personal > ul > li.active, +.app-navigation-personal > ul > li.active > a, +.app-navigation-personal > ul > li a:active, +.app-navigation-personal > ul > li a:active > a, +.app-navigation-personal > ul > li a.selected, +.app-navigation-personal > ul > li a.selected > a, +.app-navigation-personal > ul > li a.active, +.app-navigation-personal > ul > li a.active > a, +.app-navigation-administration > ul > li.active, +.app-navigation-administration > ul > li.active > a, +.app-navigation-administration > ul > li a:active, +.app-navigation-administration > ul > li a:active > a, +.app-navigation-administration > ul > li a.selected, +.app-navigation-administration > ul > li a.selected > a, +.app-navigation-administration > ul > li a.active, +.app-navigation-administration > ul > li a.active > a { + background-color: var(--color-primary-element); + color: var(--color-primary-element-text); +} +.app-navigation-personal > ul > li.icon-loading-small:after, +.app-navigation-administration > ul > li.icon-loading-small:after { + left: 22px; + top: 22px; +} +.app-navigation-personal > ul > li.deleted > ul, .app-navigation-personal > ul > li.collapsible:not(.open) > ul, +.app-navigation-administration > ul > li.deleted > ul, +.app-navigation-administration > ul > li.collapsible:not(.open) > ul { + display: none; +} +.app-navigation-personal > ul > li > ul, +.app-navigation-administration > ul > li > ul { + flex: 0 1 auto; + width: 100%; + position: relative; +} +.app-navigation-personal > ul > li > ul > li, +.app-navigation-administration > ul > li > ul > li { + display: inline-flex; + flex-wrap: wrap; + padding-left: 44px; + width: 100%; + margin-bottom: 3px; + /* align loader */ +} +.app-navigation-personal > ul > li > ul > li:hover, +.app-navigation-personal > ul > li > ul > li:hover > a, .app-navigation-personal > ul > li > ul > li:focus, +.app-navigation-personal > ul > li > ul > li:focus > a, +.app-navigation-administration > ul > li > ul > li:hover, +.app-navigation-administration > ul > li > ul > li:hover > a, +.app-navigation-administration > ul > li > ul > li:focus, +.app-navigation-administration > ul > li > ul > li:focus > a { + border-radius: var(--border-radius-pill); + background-color: var(--color-background-hover); +} +.app-navigation-personal > ul > li > ul > li.active, +.app-navigation-personal > ul > li > ul > li.active > a, +.app-navigation-personal > ul > li > ul > li a.selected, +.app-navigation-personal > ul > li > ul > li a.selected > a, +.app-navigation-administration > ul > li > ul > li.active, +.app-navigation-administration > ul > li > ul > li.active > a, +.app-navigation-administration > ul > li > ul > li a.selected, +.app-navigation-administration > ul > li > ul > li a.selected > a { + border-radius: var(--border-radius-pill); + background-color: var(--color-primary-element-light); +} +.app-navigation-personal > ul > li > ul > li.icon-loading-small:after, +.app-navigation-administration > ul > li > ul > li.icon-loading-small:after { + left: 22px; /* 44px / 2 */ +} +.app-navigation-personal > ul > li > ul > li > .app-navigation-entry-deleted, +.app-navigation-administration > ul > li > ul > li > .app-navigation-entry-deleted { + /* margin to keep active indicator visible */ + margin-left: 4px; + padding-left: 84px; +} +.app-navigation-personal > ul > li > ul > li > .app-navigation-entry-edit, +.app-navigation-administration > ul > li > ul > li > .app-navigation-entry-edit { + /* margin to keep active indicator visible */ + margin-left: 4px; + /* align the input correctly with the link text + 44px+44px-4px-6px padding for the input */ + padding-left: 78px !important; +} +.app-navigation-personal > ul > li, +.app-navigation-personal > ul > li > ul > li, +.app-navigation-administration > ul > li, +.app-navigation-administration > ul > li > ul > li { + position: relative; + box-sizing: border-box; + /* hide icons if loading */ + /* Main entry link */ + /* Bullet icon */ + /* popover fix the flex positionning of the li parent */ + /* show edit/undo field if editing/deleted */ +} +.app-navigation-personal > ul > li.icon-loading-small > a, +.app-navigation-personal > ul > li.icon-loading-small > .app-navigation-entry-bullet, +.app-navigation-personal > ul > li > ul > li.icon-loading-small > a, +.app-navigation-personal > ul > li > ul > li.icon-loading-small > .app-navigation-entry-bullet, +.app-navigation-administration > ul > li.icon-loading-small > a, +.app-navigation-administration > ul > li.icon-loading-small > .app-navigation-entry-bullet, +.app-navigation-administration > ul > li > ul > li.icon-loading-small > a, +.app-navigation-administration > ul > li > ul > li.icon-loading-small > .app-navigation-entry-bullet { + /* hide icon or bullet if loading state*/ + background: transparent !important; +} +.app-navigation-personal > ul > li > a, +.app-navigation-personal > ul > li > ul > li > a, +.app-navigation-administration > ul > li > a, +.app-navigation-administration > ul > li > ul > li > a { + background-size: 16px 16px; + background-position: 14px center; + background-repeat: no-repeat; + display: block; + justify-content: space-between; + line-height: 44px; + min-height: 44px; + padding: 0 12px 0 14px; + overflow: hidden; + box-sizing: border-box; + white-space: nowrap; + text-overflow: ellipsis; + border-radius: var(--border-radius-pill); + color: var(--color-main-text); + flex: 1 1 0px; + z-index: 100; /* above the bullet to allow click*/ + /* TODO: forbid using img as icon in menu? */ + /* counter can also be inside the link */ +} +.app-navigation-personal > ul > li > a.svg, +.app-navigation-personal > ul > li > ul > li > a.svg, +.app-navigation-administration > ul > li > a.svg, +.app-navigation-administration > ul > li > ul > li > a.svg { + padding: 0 12px 0 44px; +} +.app-navigation-personal > ul > li > a.svg :focus-visible, +.app-navigation-personal > ul > li > ul > li > a.svg :focus-visible, +.app-navigation-administration > ul > li > a.svg :focus-visible, +.app-navigation-administration > ul > li > ul > li > a.svg :focus-visible { + padding: 0 8px 0 42px; +} +.app-navigation-personal > ul > li > a:first-child img, +.app-navigation-personal > ul > li > ul > li > a:first-child img, +.app-navigation-administration > ul > li > a:first-child img, +.app-navigation-administration > ul > li > ul > li > a:first-child img { + margin-right: 11px !important; + width: 16px; + height: 16px; + filter: var(--background-invert-if-dark); +} +.app-navigation-personal > ul > li > a > .app-navigation-entry-utils, +.app-navigation-personal > ul > li > ul > li > a > .app-navigation-entry-utils, +.app-navigation-administration > ul > li > a > .app-navigation-entry-utils, +.app-navigation-administration > ul > li > ul > li > a > .app-navigation-entry-utils { + display: inline-block; + float: right; +} +.app-navigation-personal > ul > li > a > .app-navigation-entry-utils .app-navigation-entry-utils-counter, +.app-navigation-personal > ul > li > ul > li > a > .app-navigation-entry-utils .app-navigation-entry-utils-counter, +.app-navigation-administration > ul > li > a > .app-navigation-entry-utils .app-navigation-entry-utils-counter, +.app-navigation-administration > ul > li > ul > li > a > .app-navigation-entry-utils .app-navigation-entry-utils-counter { + padding-right: 0 !important; +} +.app-navigation-personal > ul > li > .app-navigation-entry-bullet, +.app-navigation-personal > ul > li > ul > li > .app-navigation-entry-bullet, +.app-navigation-administration > ul > li > .app-navigation-entry-bullet, +.app-navigation-administration > ul > li > ul > li > .app-navigation-entry-bullet { + position: absolute; + display: block; + margin: 16px; + width: 12px; + height: 12px; + border: none; + border-radius: 50%; + cursor: pointer; + transition: background 100ms ease-in-out; +} +.app-navigation-personal > ul > li > .app-navigation-entry-bullet + a, +.app-navigation-personal > ul > li > ul > li > .app-navigation-entry-bullet + a, +.app-navigation-administration > ul > li > .app-navigation-entry-bullet + a, +.app-navigation-administration > ul > li > ul > li > .app-navigation-entry-bullet + a { + /* hide icon if bullet, can't have both */ + background: transparent !important; +} +.app-navigation-personal > ul > li > .app-navigation-entry-menu, +.app-navigation-personal > ul > li > ul > li > .app-navigation-entry-menu, +.app-navigation-administration > ul > li > .app-navigation-entry-menu, +.app-navigation-administration > ul > li > ul > li > .app-navigation-entry-menu { + top: 44px; +} +.app-navigation-personal > ul > li.editing .app-navigation-entry-edit, +.app-navigation-personal > ul > li > ul > li.editing .app-navigation-entry-edit, +.app-navigation-administration > ul > li.editing .app-navigation-entry-edit, +.app-navigation-administration > ul > li > ul > li.editing .app-navigation-entry-edit { + opacity: 1; + z-index: 250; +} +.app-navigation-personal > ul > li.deleted .app-navigation-entry-deleted, +.app-navigation-personal > ul > li > ul > li.deleted .app-navigation-entry-deleted, +.app-navigation-administration > ul > li.deleted .app-navigation-entry-deleted, +.app-navigation-administration > ul > li > ul > li.deleted .app-navigation-entry-deleted { + transform: translateX(0); + z-index: 250; +} +.app-navigation-personal.hidden, +.app-navigation-administration.hidden { + display: none; +} +.app-navigation-personal .app-navigation-entry-utils .app-navigation-entry-utils-menu-button > button, +.app-navigation-personal .app-navigation-entry-deleted .app-navigation-entry-deleted-button, +.app-navigation-administration .app-navigation-entry-utils .app-navigation-entry-utils-menu-button > button, +.app-navigation-administration .app-navigation-entry-deleted .app-navigation-entry-deleted-button { + border: 0; + opacity: 0.5; + background-color: transparent; + background-repeat: no-repeat; + background-position: center; +} +.app-navigation-personal .app-navigation-entry-utils .app-navigation-entry-utils-menu-button > button:hover, .app-navigation-personal .app-navigation-entry-utils .app-navigation-entry-utils-menu-button > button:focus, +.app-navigation-personal .app-navigation-entry-deleted .app-navigation-entry-deleted-button:hover, +.app-navigation-personal .app-navigation-entry-deleted .app-navigation-entry-deleted-button:focus, +.app-navigation-administration .app-navigation-entry-utils .app-navigation-entry-utils-menu-button > button:hover, +.app-navigation-administration .app-navigation-entry-utils .app-navigation-entry-utils-menu-button > button:focus, +.app-navigation-administration .app-navigation-entry-deleted .app-navigation-entry-deleted-button:hover, +.app-navigation-administration .app-navigation-entry-deleted .app-navigation-entry-deleted-button:focus { + background-color: transparent; + opacity: 1; +} +.app-navigation-personal .collapsible, +.app-navigation-administration .collapsible { + /* Fallback for old collapse button. + TODO: to be removed. Leaved here for retro compatibility */ + /* force padding on link no matter if 'a' has an icon class */ +} +.app-navigation-personal .collapsible .collapse, +.app-navigation-administration .collapsible .collapse { + opacity: 0; + position: absolute; + width: 44px; + height: 44px; + margin: 0; + z-index: 110; + /* Needed for IE11; otherwise the button appears to the right of the + * link. */ + left: 0; +} +.app-navigation-personal .collapsible .collapse:focus-visible, +.app-navigation-administration .collapsible .collapse:focus-visible { + opacity: 1; + border-width: 0; + box-shadow: inset 0 0 0 2px var(--color-primary-element); + background: none; +} +.app-navigation-personal .collapsible:before, +.app-navigation-administration .collapsible:before { + position: absolute; + height: 44px; + width: 44px; + margin: 0; + padding: 0; + background: none; + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + background-image: var(--icon-triangle-s-dark); + background-size: 16px; + background-repeat: no-repeat; + background-position: center; + border: none; + border-radius: 0; + outline: none !important; + box-shadow: none; + content: " "; + opacity: 0; + -webkit-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); + z-index: 105; + border-radius: 50%; + transition: opacity 100ms ease-in-out; +} +.app-navigation-personal .collapsible > a:first-child, +.app-navigation-administration .collapsible > a:first-child { + padding-left: 44px; +} +.app-navigation-personal .collapsible:hover:before, .app-navigation-personal .collapsible:focus:before, +.app-navigation-administration .collapsible:hover:before, +.app-navigation-administration .collapsible:focus:before { + opacity: 1; +} +.app-navigation-personal .collapsible:hover > a, .app-navigation-personal .collapsible:focus > a, +.app-navigation-administration .collapsible:hover > a, +.app-navigation-administration .collapsible:focus > a { + background-image: none; +} +.app-navigation-personal .collapsible:hover > .app-navigation-entry-bullet, .app-navigation-personal .collapsible:focus > .app-navigation-entry-bullet, +.app-navigation-administration .collapsible:hover > .app-navigation-entry-bullet, +.app-navigation-administration .collapsible:focus > .app-navigation-entry-bullet { + background: transparent !important; +} +.app-navigation-personal .collapsible.open:before, +.app-navigation-administration .collapsible.open:before { + -webkit-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); +} +.app-navigation-personal .app-navigation-entry-utils, +.app-navigation-administration .app-navigation-entry-utils { + flex: 0 1 auto; +} +.app-navigation-personal .app-navigation-entry-utils ul, +.app-navigation-administration .app-navigation-entry-utils ul { + display: flex !important; + align-items: center; + justify-content: flex-end; +} +.app-navigation-personal .app-navigation-entry-utils li, +.app-navigation-administration .app-navigation-entry-utils li { + width: 44px !important; + height: 44px; +} +.app-navigation-personal .app-navigation-entry-utils button, +.app-navigation-administration .app-navigation-entry-utils button { + height: 100%; + width: 100%; + margin: 0; + box-shadow: none; +} +.app-navigation-personal .app-navigation-entry-utils .app-navigation-entry-utils-menu-button, +.app-navigation-administration .app-navigation-entry-utils .app-navigation-entry-utils-menu-button { + /* Prevent bg img override if an icon class is set */ +} +.app-navigation-personal .app-navigation-entry-utils .app-navigation-entry-utils-menu-button button:not([class^=icon-]):not([class*=" icon-"]), +.app-navigation-administration .app-navigation-entry-utils .app-navigation-entry-utils-menu-button button:not([class^=icon-]):not([class*=" icon-"]) { + /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ + background-image: var(--icon-more-dark); +} +.app-navigation-personal .app-navigation-entry-utils .app-navigation-entry-utils-menu-button:hover button, .app-navigation-personal .app-navigation-entry-utils .app-navigation-entry-utils-menu-button:focus button, +.app-navigation-administration .app-navigation-entry-utils .app-navigation-entry-utils-menu-button:hover button, +.app-navigation-administration .app-navigation-entry-utils .app-navigation-entry-utils-menu-button:focus button { + background-color: transparent; + opacity: 1; +} +.app-navigation-personal .app-navigation-entry-utils .app-navigation-entry-utils-counter, +.app-navigation-administration .app-navigation-entry-utils .app-navigation-entry-utils-counter { + overflow: hidden; + text-align: right; + font-size: 9pt; + line-height: 44px; + padding: 0 12px; /* Same padding as all li > a in the app-navigation */ +} +.app-navigation-personal .app-navigation-entry-utils .app-navigation-entry-utils-counter.highlighted, +.app-navigation-administration .app-navigation-entry-utils .app-navigation-entry-utils-counter.highlighted { + padding: 0; + text-align: center; +} +.app-navigation-personal .app-navigation-entry-utils .app-navigation-entry-utils-counter.highlighted span, +.app-navigation-administration .app-navigation-entry-utils .app-navigation-entry-utils-counter.highlighted span { + padding: 2px 5px; + border-radius: 10px; + background-color: var(--color-primary-element); + color: var(--color-primary-element-text); +} +.app-navigation-personal .app-navigation-entry-edit, +.app-navigation-administration .app-navigation-entry-edit { + padding-left: 5px; + padding-right: 5px; + display: block; + width: calc(100% - 1px); /* Avoid border overlapping */ + transition: opacity 250ms ease-in-out; + opacity: 0; + position: absolute; + background-color: var(--color-main-background); + z-index: -1; +} +.app-navigation-personal .app-navigation-entry-edit form, +.app-navigation-personal .app-navigation-entry-edit div, +.app-navigation-administration .app-navigation-entry-edit form, +.app-navigation-administration .app-navigation-entry-edit div { + display: inline-flex; + width: 100%; +} +.app-navigation-personal .app-navigation-entry-edit input, +.app-navigation-administration .app-navigation-entry-edit input { + padding: 5px; + margin-right: 0; + height: 38px; +} +.app-navigation-personal .app-navigation-entry-edit input:hover, .app-navigation-personal .app-navigation-entry-edit input:focus, +.app-navigation-administration .app-navigation-entry-edit input:hover, +.app-navigation-administration .app-navigation-entry-edit input:focus { + /* overlapp borders */ + z-index: 1; +} +.app-navigation-personal .app-navigation-entry-edit input[type=text], +.app-navigation-administration .app-navigation-entry-edit input[type=text] { + width: 100%; + min-width: 0; /* firefox hack: override auto */ + border-bottom-right-radius: 0; + border-top-right-radius: 0; +} +.app-navigation-personal .app-navigation-entry-edit button, +.app-navigation-personal .app-navigation-entry-edit input:not([type=text]), +.app-navigation-administration .app-navigation-entry-edit button, +.app-navigation-administration .app-navigation-entry-edit input:not([type=text]) { + width: 36px; + height: 38px; + flex: 0 0 36px; +} +.app-navigation-personal .app-navigation-entry-edit button:not(:last-child), +.app-navigation-personal .app-navigation-entry-edit input:not([type=text]):not(:last-child), +.app-navigation-administration .app-navigation-entry-edit button:not(:last-child), +.app-navigation-administration .app-navigation-entry-edit input:not([type=text]):not(:last-child) { + border-radius: 0 !important; +} +.app-navigation-personal .app-navigation-entry-edit button:not(:first-child), +.app-navigation-personal .app-navigation-entry-edit input:not([type=text]):not(:first-child), +.app-navigation-administration .app-navigation-entry-edit button:not(:first-child), +.app-navigation-administration .app-navigation-entry-edit input:not([type=text]):not(:first-child) { + margin-left: -1px; +} +.app-navigation-personal .app-navigation-entry-edit button:last-child, +.app-navigation-personal .app-navigation-entry-edit input:not([type=text]):last-child, +.app-navigation-administration .app-navigation-entry-edit button:last-child, +.app-navigation-administration .app-navigation-entry-edit input:not([type=text]):last-child { + border-bottom-right-radius: var(--border-radius); + border-top-right-radius: var(--border-radius); + border-bottom-left-radius: 0; + border-top-left-radius: 0; +} +.app-navigation-personal .app-navigation-entry-deleted, +.app-navigation-administration .app-navigation-entry-deleted { + display: inline-flex; + padding-left: 44px; + transform: translateX(300px); +} +.app-navigation-personal .app-navigation-entry-deleted .app-navigation-entry-deleted-description, +.app-navigation-administration .app-navigation-entry-deleted .app-navigation-entry-deleted-description { + position: relative; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + flex: 1 1 0px; + line-height: 44px; +} +.app-navigation-personal .app-navigation-entry-deleted .app-navigation-entry-deleted-button, +.app-navigation-administration .app-navigation-entry-deleted .app-navigation-entry-deleted-button { + margin: 0; + height: 44px; + width: 44px; + line-height: 44px; +} +.app-navigation-personal .app-navigation-entry-deleted .app-navigation-entry-deleted-button:hover, .app-navigation-personal .app-navigation-entry-deleted .app-navigation-entry-deleted-button:focus, +.app-navigation-administration .app-navigation-entry-deleted .app-navigation-entry-deleted-button:hover, +.app-navigation-administration .app-navigation-entry-deleted .app-navigation-entry-deleted-button:focus { + opacity: 1; +} +.app-navigation-personal .app-navigation-entry-edit, +.app-navigation-personal .app-navigation-entry-deleted, +.app-navigation-administration .app-navigation-entry-edit, +.app-navigation-administration .app-navigation-entry-deleted { + width: calc(100% - 1px); /* Avoid border overlapping */ + transition: transform 250ms ease-in-out, opacity 250ms ease-in-out, z-index 250ms ease-in-out; + position: absolute; + left: 0; + background-color: var(--color-main-background); + box-sizing: border-box; +} +.app-navigation-personal .drag-and-drop, +.app-navigation-administration .drag-and-drop { + -webkit-transition: padding-bottom 500ms ease 0s; + transition: padding-bottom 500ms ease 0s; + padding-bottom: 40px; +} +.app-navigation-personal .error, +.app-navigation-administration .error { + color: var(--color-error); +} +.app-navigation-personal .app-navigation-entry-utils ul, +.app-navigation-personal .app-navigation-entry-menu ul, +.app-navigation-administration .app-navigation-entry-utils ul, +.app-navigation-administration .app-navigation-entry-menu ul { + list-style-type: none; +} + +/* CONTENT --------------------------------------------------------- */ +#content { + box-sizing: border-box; + position: static; + margin: var(--body-container-margin); + margin-top: 50px; + padding: 0; + display: flex; + width: calc(100% - var(--body-container-margin) * 2); + height: var(--body-height); + border-radius: var(--body-container-radius); + overflow: clip; +} +#content:not(.with-sidebar--full) { + position: fixed; +} + +@media only screen and (max-width: 1024px) { + #content { + border-top-left-radius: var(--border-radius-large); + border-top-right-radius: var(--border-radius-large); + } + #app-navigation { + border-top-left-radius: var(--border-radius-large); + } + #app-sidebar { + border-top-right-radius: var(--border-radius-large); + } +} +/* APP-CONTENT AND WRAPPER ------------------------------------------ */ +/* Part where the content will be loaded into */ +/** + * !Important. We are defining the minimum requirement we want for flex + * Just before the mobile breakpoint we have variables.$breakpoint-mobile (1024px) - variables.$navigation-width + * -> 468px. In that case we want 200px for the list and 268px for the content + */ +#app-content { + z-index: 1000; + background-color: var(--color-main-background); + flex-basis: 100vw; + overflow: auto; + position: initial; + height: 100%; + /* margin if navigation element is here */ + /* no top border for first settings item */ + /* if app-content-list is present */ +} +#app-content > .section:first-child { + border-top: none; +} +#app-content #app-content-wrapper { + display: flex; + position: relative; + align-items: stretch; + /* make sure we have at least full height for loaders or such + no need for list/details since we have a flex stretch */ + min-height: 100%; + /* CONTENT DETAILS AFTER LIST*/ +} +#app-content #app-content-wrapper .app-content-details { + /* grow full width */ + flex: 1 1 524px; +} +#app-content #app-content-wrapper .app-content-details #app-navigation-toggle-back { + display: none; +} +#app-content::-webkit-scrollbar-button { + height: var(--body-container-radius); +} + +/* APP-SIDEBAR ------------------------------------------------------------ */ +/* + Sidebar: a sidebar to be used within #content + #app-content will be shrinked properly +*/ +#app-sidebar { + width: 27vw; + min-width: 300px; + max-width: 500px; + display: block; + position: -webkit-sticky; + position: sticky; + top: 50px; + right: 0; + overflow-y: auto; + overflow-x: hidden; + z-index: 1500; + opacity: 0.7px; + height: calc(100vh - 50px); + background: var(--color-main-background); + border-left: 1px solid var(--color-border); + flex-shrink: 0; +} +#app-sidebar.disappear { + display: none; +} + +/* APP-SETTINGS ------------------------------------------------------------ */ +/* settings area */ +#app-settings { + margin-top: auto; +} +#app-settings.open #app-settings-content, #app-settings.opened #app-settings-content { + display: block; +} + +#app-settings-content { + display: none; + padding: calc(var(--default-grid-baseline) * 2); + padding-top: 0; + padding-left: calc(var(--default-grid-baseline) * 4); + /* restrict height of settings and make scrollable */ + max-height: 300px; + overflow-y: auto; + box-sizing: border-box; + /* display input fields at full width */ +} +#app-settings-content input[type=text] { + width: 93%; +} +#app-settings-content .info-text { + padding: 5px 0 7px 22px; + color: var(--color-text-lighter); +} +#app-settings-content input[type=checkbox].radio + label, #app-settings-content input[type=checkbox].checkbox + label, #app-settings-content input[type=radio].radio + label, #app-settings-content input[type=radio].checkbox + label { + display: inline-block; + width: 100%; + padding: 5px 0; +} + +#app-settings-header { + box-sizing: border-box; + background-color: transparent; + overflow: hidden; + border-radius: calc(var(--default-clickable-area) / 2); + padding: calc(var(--default-grid-baseline) * 2); + padding-top: 0; +} +#app-settings-header .settings-button { + display: flex; + align-items: center; + height: 44px; + width: 100%; + padding: 0; + margin: 0; + background-color: transparent; + box-shadow: none; + border: 0; + border-radius: calc(var(--default-clickable-area) / 2); + text-align: left; + font-weight: normal; + font-size: 100%; + opacity: 0.8; + /* like app-navigation a */ + color: var(--color-main-text); +} +#app-settings-header .settings-button.opened { + border-top: solid 1px var(--color-border); + background-color: var(--color-main-background); + margin-top: 8px; +} +#app-settings-header .settings-button:hover, #app-settings-header .settings-button:focus { + background-color: var(--color-background-hover); +} +#app-settings-header .settings-button::before { + background-image: var(--icon-settings-dark); + background-position: 14px center; + background-repeat: no-repeat; + content: ""; + width: 44px; + height: 44px; + top: 0; + left: 0; + display: block; +} +#app-settings-header .settings-button:focus-visible { + box-shadow: 0 0 0 2px inset var(--color-primary-element) !important; + background-position: 12px center; +} + +/* GENERAL SECTION ------------------------------------------------------------ */ +.section { + display: block; + padding: 30px; + margin-bottom: 24px; + /* slight position correction of checkboxes and radio buttons */ +} +.section.hidden { + display: none !important; +} +.section input[type=checkbox], .section input[type=radio] { + vertical-align: -2px; + margin-right: 4px; +} + +.sub-section { + position: relative; + margin-top: 10px; + margin-left: 27px; + margin-bottom: 10px; +} + +.appear { + opacity: 1; + -webkit-transition: opacity 500ms ease 0s; + -moz-transition: opacity 500ms ease 0s; + -ms-transition: opacity 500ms ease 0s; + -o-transition: opacity 500ms ease 0s; + transition: opacity 500ms ease 0s; +} +.appear.transparent { + opacity: 0; +} + +/* TABS ------------------------------------------------------------ */ +.tabHeaders { + display: flex; + margin-bottom: 16px; +} +.tabHeaders .tabHeader { + display: flex; + flex-direction: column; + flex-grow: 1; + text-align: center; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + cursor: pointer; + color: var(--color-text-lighter); + margin-bottom: 1px; + padding: 5px; + /* Use same amount as sidebar padding */ +} +.tabHeaders .tabHeader.hidden { + display: none; +} +.tabHeaders .tabHeader:first-child { + padding-left: 15px; +} +.tabHeaders .tabHeader:last-child { + padding-right: 15px; +} +.tabHeaders .tabHeader .icon { + display: inline-block; + width: 100%; + height: 16px; + background-size: 16px; + vertical-align: middle; + margin-top: -2px; + margin-right: 3px; + opacity: 0.7; + cursor: pointer; +} +.tabHeaders .tabHeader a { + color: var(--color-text-lighter); + margin-bottom: 1px; + overflow: hidden; + text-overflow: ellipsis; +} +.tabHeaders .tabHeader.selected { + font-weight: bold; +} +.tabHeaders .tabHeader.selected, .tabHeaders .tabHeader:hover, .tabHeaders .tabHeader:focus { + margin-bottom: 0px; + color: var(--color-main-text); + border-bottom: 1px solid var(--color-text-lighter); +} + +.tabsContainer { + clear: left; +} +.tabsContainer .tab { + padding: 0 15px 15px; +} + +/* POPOVER MENU ------------------------------------------------------------ */ +.contact .popovermenu ul > li > a > img, +.popover__menu > li > a > img { + filter: var(--background-invert-if-dark); +} +.contact .popovermenu ul > li > a > img[src^=data], +.popover__menu > li > a > img[src^=data] { + filter: none; +} + +.bubble, +.app-navigation-entry-menu, +.popovermenu { + position: absolute; + background-color: var(--color-main-background); + color: var(--color-main-text); + border-radius: var(--border-radius-large); + padding: 3px; + z-index: 110; + margin: 5px; + margin-top: -5px; + right: 0; + filter: drop-shadow(0 1px 3px var(--color-box-shadow)); + display: none; + will-change: filter; + /* Center the popover */ + /* Align the popover to the left */ +} +.bubble:after, +.app-navigation-entry-menu:after, +.popovermenu:after { + bottom: 100%; + right: 7px; + /* change this to adjust the arrow position */ + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-bottom-color: var(--color-main-background); + border-width: 9px; +} +.bubble.menu-center, +.app-navigation-entry-menu.menu-center, +.popovermenu.menu-center { + transform: translateX(50%); + right: 50%; + margin-right: 0; +} +.bubble.menu-center:after, +.app-navigation-entry-menu.menu-center:after, +.popovermenu.menu-center:after { + right: 50%; + transform: translateX(50%); +} +.bubble.menu-left, +.app-navigation-entry-menu.menu-left, +.popovermenu.menu-left { + right: auto; + left: 0; + margin-right: 0; +} +.bubble.menu-left:after, +.app-navigation-entry-menu.menu-left:after, +.popovermenu.menu-left:after { + left: 6px; + right: auto; +} +.bubble.open, +.app-navigation-entry-menu.open, +.popovermenu.open { + display: block; +} +.bubble.contactsmenu-popover, +.app-navigation-entry-menu.contactsmenu-popover, +.popovermenu.contactsmenu-popover { + margin: 0; +} +.bubble ul, +.app-navigation-entry-menu ul, +.popovermenu ul { + /* Overwrite #app-navigation > ul ul */ + display: flex !important; + flex-direction: column; +} +.bubble li, +.app-navigation-entry-menu li, +.popovermenu li { + display: flex; + flex: 0 0 auto; + /* css hack, only first not hidden */ +} +.bubble li.hidden, +.app-navigation-entry-menu li.hidden, +.popovermenu li.hidden { + display: none; +} +.bubble li > button, +.bubble li > a, +.bubble li > .menuitem, +.app-navigation-entry-menu li > button, +.app-navigation-entry-menu li > a, +.app-navigation-entry-menu li > .menuitem, +.popovermenu li > button, +.popovermenu li > a, +.popovermenu li > .menuitem { + cursor: pointer; + line-height: 44px; + border: 0; + border-radius: var(--border-radius-large); + background-color: transparent; + display: flex; + align-items: flex-start; + height: auto; + margin: 0; + font-weight: normal; + box-shadow: none; + width: 100%; + color: var(--color-main-text); + white-space: nowrap; + /* prevent .action class to break the design */ + /* Add padding if contains icon+text */ + /* DEPRECATED! old img in popover fallback + * TODO: to remove */ + /* checkbox/radio fixes */ + /* no margin if hidden span before */ + /* Inputs inside popover supports text, submit & reset */ +} +.bubble li > button span[class^=icon-], +.bubble li > button span[class*=" icon-"], .bubble li > button[class^=icon-], .bubble li > button[class*=" icon-"], +.bubble li > a span[class^=icon-], +.bubble li > a span[class*=" icon-"], +.bubble li > a[class^=icon-], +.bubble li > a[class*=" icon-"], +.bubble li > .menuitem span[class^=icon-], +.bubble li > .menuitem span[class*=" icon-"], +.bubble li > .menuitem[class^=icon-], +.bubble li > .menuitem[class*=" icon-"], +.app-navigation-entry-menu li > button span[class^=icon-], +.app-navigation-entry-menu li > button span[class*=" icon-"], +.app-navigation-entry-menu li > button[class^=icon-], +.app-navigation-entry-menu li > button[class*=" icon-"], +.app-navigation-entry-menu li > a span[class^=icon-], +.app-navigation-entry-menu li > a span[class*=" icon-"], +.app-navigation-entry-menu li > a[class^=icon-], +.app-navigation-entry-menu li > a[class*=" icon-"], +.app-navigation-entry-menu li > .menuitem span[class^=icon-], +.app-navigation-entry-menu li > .menuitem span[class*=" icon-"], +.app-navigation-entry-menu li > .menuitem[class^=icon-], +.app-navigation-entry-menu li > .menuitem[class*=" icon-"], +.popovermenu li > button span[class^=icon-], +.popovermenu li > button span[class*=" icon-"], +.popovermenu li > button[class^=icon-], +.popovermenu li > button[class*=" icon-"], +.popovermenu li > a span[class^=icon-], +.popovermenu li > a span[class*=" icon-"], +.popovermenu li > a[class^=icon-], +.popovermenu li > a[class*=" icon-"], +.popovermenu li > .menuitem span[class^=icon-], +.popovermenu li > .menuitem span[class*=" icon-"], +.popovermenu li > .menuitem[class^=icon-], +.popovermenu li > .menuitem[class*=" icon-"] { + min-width: 0; /* Overwrite icons*/ + min-height: 0; + background-position: 14px center; + background-size: 16px; +} +.bubble li > button span[class^=icon-], +.bubble li > button span[class*=" icon-"], +.bubble li > a span[class^=icon-], +.bubble li > a span[class*=" icon-"], +.bubble li > .menuitem span[class^=icon-], +.bubble li > .menuitem span[class*=" icon-"], +.app-navigation-entry-menu li > button span[class^=icon-], +.app-navigation-entry-menu li > button span[class*=" icon-"], +.app-navigation-entry-menu li > a span[class^=icon-], +.app-navigation-entry-menu li > a span[class*=" icon-"], +.app-navigation-entry-menu li > .menuitem span[class^=icon-], +.app-navigation-entry-menu li > .menuitem span[class*=" icon-"], +.popovermenu li > button span[class^=icon-], +.popovermenu li > button span[class*=" icon-"], +.popovermenu li > a span[class^=icon-], +.popovermenu li > a span[class*=" icon-"], +.popovermenu li > .menuitem span[class^=icon-], +.popovermenu li > .menuitem span[class*=" icon-"] { + /* Keep padding to define the width to + assure correct position of a possible text */ + padding: 22px 0 22px 44px; +} +.bubble li > button:not([class^=icon-]):not([class*=icon-]) > span:not([class^=icon-]):not([class*=icon-]):first-child, +.bubble li > button:not([class^=icon-]):not([class*=icon-]) > input:not([class^=icon-]):not([class*=icon-]):first-child, +.bubble li > button:not([class^=icon-]):not([class*=icon-]) > form:not([class^=icon-]):not([class*=icon-]):first-child, +.bubble li > a:not([class^=icon-]):not([class*=icon-]) > span:not([class^=icon-]):not([class*=icon-]):first-child, +.bubble li > a:not([class^=icon-]):not([class*=icon-]) > input:not([class^=icon-]):not([class*=icon-]):first-child, +.bubble li > a:not([class^=icon-]):not([class*=icon-]) > form:not([class^=icon-]):not([class*=icon-]):first-child, +.bubble li > .menuitem:not([class^=icon-]):not([class*=icon-]) > span:not([class^=icon-]):not([class*=icon-]):first-child, +.bubble li > .menuitem:not([class^=icon-]):not([class*=icon-]) > input:not([class^=icon-]):not([class*=icon-]):first-child, +.bubble li > .menuitem:not([class^=icon-]):not([class*=icon-]) > form:not([class^=icon-]):not([class*=icon-]):first-child, +.app-navigation-entry-menu li > button:not([class^=icon-]):not([class*=icon-]) > span:not([class^=icon-]):not([class*=icon-]):first-child, +.app-navigation-entry-menu li > button:not([class^=icon-]):not([class*=icon-]) > input:not([class^=icon-]):not([class*=icon-]):first-child, +.app-navigation-entry-menu li > button:not([class^=icon-]):not([class*=icon-]) > form:not([class^=icon-]):not([class*=icon-]):first-child, +.app-navigation-entry-menu li > a:not([class^=icon-]):not([class*=icon-]) > span:not([class^=icon-]):not([class*=icon-]):first-child, +.app-navigation-entry-menu li > a:not([class^=icon-]):not([class*=icon-]) > input:not([class^=icon-]):not([class*=icon-]):first-child, +.app-navigation-entry-menu li > a:not([class^=icon-]):not([class*=icon-]) > form:not([class^=icon-]):not([class*=icon-]):first-child, +.app-navigation-entry-menu li > .menuitem:not([class^=icon-]):not([class*=icon-]) > span:not([class^=icon-]):not([class*=icon-]):first-child, +.app-navigation-entry-menu li > .menuitem:not([class^=icon-]):not([class*=icon-]) > input:not([class^=icon-]):not([class*=icon-]):first-child, +.app-navigation-entry-menu li > .menuitem:not([class^=icon-]):not([class*=icon-]) > form:not([class^=icon-]):not([class*=icon-]):first-child, +.popovermenu li > button:not([class^=icon-]):not([class*=icon-]) > span:not([class^=icon-]):not([class*=icon-]):first-child, +.popovermenu li > button:not([class^=icon-]):not([class*=icon-]) > input:not([class^=icon-]):not([class*=icon-]):first-child, +.popovermenu li > button:not([class^=icon-]):not([class*=icon-]) > form:not([class^=icon-]):not([class*=icon-]):first-child, +.popovermenu li > a:not([class^=icon-]):not([class*=icon-]) > span:not([class^=icon-]):not([class*=icon-]):first-child, +.popovermenu li > a:not([class^=icon-]):not([class*=icon-]) > input:not([class^=icon-]):not([class*=icon-]):first-child, +.popovermenu li > a:not([class^=icon-]):not([class*=icon-]) > form:not([class^=icon-]):not([class*=icon-]):first-child, +.popovermenu li > .menuitem:not([class^=icon-]):not([class*=icon-]) > span:not([class^=icon-]):not([class*=icon-]):first-child, +.popovermenu li > .menuitem:not([class^=icon-]):not([class*=icon-]) > input:not([class^=icon-]):not([class*=icon-]):first-child, +.popovermenu li > .menuitem:not([class^=icon-]):not([class*=icon-]) > form:not([class^=icon-]):not([class*=icon-]):first-child { + margin-left: 44px; +} +.bubble li > button[class^=icon-], .bubble li > button[class*=" icon-"], +.bubble li > a[class^=icon-], +.bubble li > a[class*=" icon-"], +.bubble li > .menuitem[class^=icon-], +.bubble li > .menuitem[class*=" icon-"], +.app-navigation-entry-menu li > button[class^=icon-], +.app-navigation-entry-menu li > button[class*=" icon-"], +.app-navigation-entry-menu li > a[class^=icon-], +.app-navigation-entry-menu li > a[class*=" icon-"], +.app-navigation-entry-menu li > .menuitem[class^=icon-], +.app-navigation-entry-menu li > .menuitem[class*=" icon-"], +.popovermenu li > button[class^=icon-], +.popovermenu li > button[class*=" icon-"], +.popovermenu li > a[class^=icon-], +.popovermenu li > a[class*=" icon-"], +.popovermenu li > .menuitem[class^=icon-], +.popovermenu li > .menuitem[class*=" icon-"] { + padding: 0 14px 0 44px !important; +} +.bubble li > button:hover, .bubble li > button:focus, +.bubble li > a:hover, +.bubble li > a:focus, +.bubble li > .menuitem:hover, +.bubble li > .menuitem:focus, +.app-navigation-entry-menu li > button:hover, +.app-navigation-entry-menu li > button:focus, +.app-navigation-entry-menu li > a:hover, +.app-navigation-entry-menu li > a:focus, +.app-navigation-entry-menu li > .menuitem:hover, +.app-navigation-entry-menu li > .menuitem:focus, +.popovermenu li > button:hover, +.popovermenu li > button:focus, +.popovermenu li > a:hover, +.popovermenu li > a:focus, +.popovermenu li > .menuitem:hover, +.popovermenu li > .menuitem:focus { + background-color: var(--color-background-hover); +} +.bubble li > button:focus, .bubble li > button:focus-visible, +.bubble li > a:focus, +.bubble li > a:focus-visible, +.bubble li > .menuitem:focus, +.bubble li > .menuitem:focus-visible, +.app-navigation-entry-menu li > button:focus, +.app-navigation-entry-menu li > button:focus-visible, +.app-navigation-entry-menu li > a:focus, +.app-navigation-entry-menu li > a:focus-visible, +.app-navigation-entry-menu li > .menuitem:focus, +.app-navigation-entry-menu li > .menuitem:focus-visible, +.popovermenu li > button:focus, +.popovermenu li > button:focus-visible, +.popovermenu li > a:focus, +.popovermenu li > a:focus-visible, +.popovermenu li > .menuitem:focus, +.popovermenu li > .menuitem:focus-visible { + box-shadow: 0 0 0 2px var(--color-primary-element); +} +.bubble li > button.active, +.bubble li > a.active, +.bubble li > .menuitem.active, +.app-navigation-entry-menu li > button.active, +.app-navigation-entry-menu li > a.active, +.app-navigation-entry-menu li > .menuitem.active, +.popovermenu li > button.active, +.popovermenu li > a.active, +.popovermenu li > .menuitem.active { + border-radius: var(--border-radius-pill); + background-color: var(--color-primary-element-light); +} +.bubble li > button.action, +.bubble li > a.action, +.bubble li > .menuitem.action, +.app-navigation-entry-menu li > button.action, +.app-navigation-entry-menu li > a.action, +.app-navigation-entry-menu li > .menuitem.action, +.popovermenu li > button.action, +.popovermenu li > a.action, +.popovermenu li > .menuitem.action { + padding: inherit !important; +} +.bubble li > button > span, +.bubble li > a > span, +.bubble li > .menuitem > span, +.app-navigation-entry-menu li > button > span, +.app-navigation-entry-menu li > a > span, +.app-navigation-entry-menu li > .menuitem > span, +.popovermenu li > button > span, +.popovermenu li > a > span, +.popovermenu li > .menuitem > span { + cursor: pointer; + white-space: nowrap; +} +.bubble li > button > p, +.bubble li > a > p, +.bubble li > .menuitem > p, +.app-navigation-entry-menu li > button > p, +.app-navigation-entry-menu li > a > p, +.app-navigation-entry-menu li > .menuitem > p, +.popovermenu li > button > p, +.popovermenu li > a > p, +.popovermenu li > .menuitem > p { + width: 150px; + line-height: 1.6em; + padding: 8px 0; + white-space: normal; +} +.bubble li > button > select, +.bubble li > a > select, +.bubble li > .menuitem > select, +.app-navigation-entry-menu li > button > select, +.app-navigation-entry-menu li > a > select, +.app-navigation-entry-menu li > .menuitem > select, +.popovermenu li > button > select, +.popovermenu li > a > select, +.popovermenu li > .menuitem > select { + margin: 0; + margin-left: 6px; +} +.bubble li > button:not(:empty), +.bubble li > a:not(:empty), +.bubble li > .menuitem:not(:empty), +.app-navigation-entry-menu li > button:not(:empty), +.app-navigation-entry-menu li > a:not(:empty), +.app-navigation-entry-menu li > .menuitem:not(:empty), +.popovermenu li > button:not(:empty), +.popovermenu li > a:not(:empty), +.popovermenu li > .menuitem:not(:empty) { + padding-right: 14px !important; +} +.bubble li > button > img, +.bubble li > a > img, +.bubble li > .menuitem > img, +.app-navigation-entry-menu li > button > img, +.app-navigation-entry-menu li > a > img, +.app-navigation-entry-menu li > .menuitem > img, +.popovermenu li > button > img, +.popovermenu li > a > img, +.popovermenu li > .menuitem > img { + width: 16px; + padding: 14px; +} +.bubble li > button > input.radio + label, +.bubble li > button > input.checkbox + label, +.bubble li > a > input.radio + label, +.bubble li > a > input.checkbox + label, +.bubble li > .menuitem > input.radio + label, +.bubble li > .menuitem > input.checkbox + label, +.app-navigation-entry-menu li > button > input.radio + label, +.app-navigation-entry-menu li > button > input.checkbox + label, +.app-navigation-entry-menu li > a > input.radio + label, +.app-navigation-entry-menu li > a > input.checkbox + label, +.app-navigation-entry-menu li > .menuitem > input.radio + label, +.app-navigation-entry-menu li > .menuitem > input.checkbox + label, +.popovermenu li > button > input.radio + label, +.popovermenu li > button > input.checkbox + label, +.popovermenu li > a > input.radio + label, +.popovermenu li > a > input.checkbox + label, +.popovermenu li > .menuitem > input.radio + label, +.popovermenu li > .menuitem > input.checkbox + label { + padding: 0 !important; + width: 100%; +} +.bubble li > button > input.checkbox + label::before, +.bubble li > a > input.checkbox + label::before, +.bubble li > .menuitem > input.checkbox + label::before, +.app-navigation-entry-menu li > button > input.checkbox + label::before, +.app-navigation-entry-menu li > a > input.checkbox + label::before, +.app-navigation-entry-menu li > .menuitem > input.checkbox + label::before, +.popovermenu li > button > input.checkbox + label::before, +.popovermenu li > a > input.checkbox + label::before, +.popovermenu li > .menuitem > input.checkbox + label::before { + margin: -2px 13px 0; +} +.bubble li > button > input.radio + label::before, +.bubble li > a > input.radio + label::before, +.bubble li > .menuitem > input.radio + label::before, +.app-navigation-entry-menu li > button > input.radio + label::before, +.app-navigation-entry-menu li > a > input.radio + label::before, +.app-navigation-entry-menu li > .menuitem > input.radio + label::before, +.popovermenu li > button > input.radio + label::before, +.popovermenu li > a > input.radio + label::before, +.popovermenu li > .menuitem > input.radio + label::before { + margin: -2px 12px 0; +} +.bubble li > button > input:not([type=radio]):not([type=checkbox]):not([type=image]), +.bubble li > a > input:not([type=radio]):not([type=checkbox]):not([type=image]), +.bubble li > .menuitem > input:not([type=radio]):not([type=checkbox]):not([type=image]), +.app-navigation-entry-menu li > button > input:not([type=radio]):not([type=checkbox]):not([type=image]), +.app-navigation-entry-menu li > a > input:not([type=radio]):not([type=checkbox]):not([type=image]), +.app-navigation-entry-menu li > .menuitem > input:not([type=radio]):not([type=checkbox]):not([type=image]), +.popovermenu li > button > input:not([type=radio]):not([type=checkbox]):not([type=image]), +.popovermenu li > a > input:not([type=radio]):not([type=checkbox]):not([type=image]), +.popovermenu li > .menuitem > input:not([type=radio]):not([type=checkbox]):not([type=image]) { + width: 150px; +} +.bubble li > button form, +.bubble li > a form, +.bubble li > .menuitem form, +.app-navigation-entry-menu li > button form, +.app-navigation-entry-menu li > a form, +.app-navigation-entry-menu li > .menuitem form, +.popovermenu li > button form, +.popovermenu li > a form, +.popovermenu li > .menuitem form { + display: flex; + flex: 1 1 auto; + /* put a small space between text and form + if there is an element before */ + align-items: center; +} +.bubble li > button form:not(:first-child), +.bubble li > a form:not(:first-child), +.bubble li > .menuitem form:not(:first-child), +.app-navigation-entry-menu li > button form:not(:first-child), +.app-navigation-entry-menu li > a form:not(:first-child), +.app-navigation-entry-menu li > .menuitem form:not(:first-child), +.popovermenu li > button form:not(:first-child), +.popovermenu li > a form:not(:first-child), +.popovermenu li > .menuitem form:not(:first-child) { + margin-left: 5px; +} +.bubble li > button > span.hidden + form, +.bubble li > button > span[style*="display:none"] + form, +.bubble li > a > span.hidden + form, +.bubble li > a > span[style*="display:none"] + form, +.bubble li > .menuitem > span.hidden + form, +.bubble li > .menuitem > span[style*="display:none"] + form, +.app-navigation-entry-menu li > button > span.hidden + form, +.app-navigation-entry-menu li > button > span[style*="display:none"] + form, +.app-navigation-entry-menu li > a > span.hidden + form, +.app-navigation-entry-menu li > a > span[style*="display:none"] + form, +.app-navigation-entry-menu li > .menuitem > span.hidden + form, +.app-navigation-entry-menu li > .menuitem > span[style*="display:none"] + form, +.popovermenu li > button > span.hidden + form, +.popovermenu li > button > span[style*="display:none"] + form, +.popovermenu li > a > span.hidden + form, +.popovermenu li > a > span[style*="display:none"] + form, +.popovermenu li > .menuitem > span.hidden + form, +.popovermenu li > .menuitem > span[style*="display:none"] + form { + margin-left: 0; +} +.bubble li > button input, +.bubble li > a input, +.bubble li > .menuitem input, +.app-navigation-entry-menu li > button input, +.app-navigation-entry-menu li > a input, +.app-navigation-entry-menu li > .menuitem input, +.popovermenu li > button input, +.popovermenu li > a input, +.popovermenu li > .menuitem input { + min-width: 44px; + max-height: 40px; /* twice the element margin-y */ + margin: 2px 0; + flex: 1 1 auto; +} +.bubble li > button input:not(:first-child), +.bubble li > a input:not(:first-child), +.bubble li > .menuitem input:not(:first-child), +.app-navigation-entry-menu li > button input:not(:first-child), +.app-navigation-entry-menu li > a input:not(:first-child), +.app-navigation-entry-menu li > .menuitem input:not(:first-child), +.popovermenu li > button input:not(:first-child), +.popovermenu li > a input:not(:first-child), +.popovermenu li > .menuitem input:not(:first-child) { + margin-left: 5px; +} +.bubble li:not(.hidden):not([style*="display:none"]):first-of-type > button > form, .bubble li:not(.hidden):not([style*="display:none"]):first-of-type > button > input, .bubble li:not(.hidden):not([style*="display:none"]):first-of-type > a > form, .bubble li:not(.hidden):not([style*="display:none"]):first-of-type > a > input, .bubble li:not(.hidden):not([style*="display:none"]):first-of-type > .menuitem > form, .bubble li:not(.hidden):not([style*="display:none"]):first-of-type > .menuitem > input, +.app-navigation-entry-menu li:not(.hidden):not([style*="display:none"]):first-of-type > button > form, +.app-navigation-entry-menu li:not(.hidden):not([style*="display:none"]):first-of-type > button > input, +.app-navigation-entry-menu li:not(.hidden):not([style*="display:none"]):first-of-type > a > form, +.app-navigation-entry-menu li:not(.hidden):not([style*="display:none"]):first-of-type > a > input, +.app-navigation-entry-menu li:not(.hidden):not([style*="display:none"]):first-of-type > .menuitem > form, +.app-navigation-entry-menu li:not(.hidden):not([style*="display:none"]):first-of-type > .menuitem > input, +.popovermenu li:not(.hidden):not([style*="display:none"]):first-of-type > button > form, +.popovermenu li:not(.hidden):not([style*="display:none"]):first-of-type > button > input, +.popovermenu li:not(.hidden):not([style*="display:none"]):first-of-type > a > form, +.popovermenu li:not(.hidden):not([style*="display:none"]):first-of-type > a > input, +.popovermenu li:not(.hidden):not([style*="display:none"]):first-of-type > .menuitem > form, +.popovermenu li:not(.hidden):not([style*="display:none"]):first-of-type > .menuitem > input { + margin-top: 12px; +} +.bubble li:not(.hidden):not([style*="display:none"]):last-of-type > button > form, .bubble li:not(.hidden):not([style*="display:none"]):last-of-type > button > input, .bubble li:not(.hidden):not([style*="display:none"]):last-of-type > a > form, .bubble li:not(.hidden):not([style*="display:none"]):last-of-type > a > input, .bubble li:not(.hidden):not([style*="display:none"]):last-of-type > .menuitem > form, .bubble li:not(.hidden):not([style*="display:none"]):last-of-type > .menuitem > input, +.app-navigation-entry-menu li:not(.hidden):not([style*="display:none"]):last-of-type > button > form, +.app-navigation-entry-menu li:not(.hidden):not([style*="display:none"]):last-of-type > button > input, +.app-navigation-entry-menu li:not(.hidden):not([style*="display:none"]):last-of-type > a > form, +.app-navigation-entry-menu li:not(.hidden):not([style*="display:none"]):last-of-type > a > input, +.app-navigation-entry-menu li:not(.hidden):not([style*="display:none"]):last-of-type > .menuitem > form, +.app-navigation-entry-menu li:not(.hidden):not([style*="display:none"]):last-of-type > .menuitem > input, +.popovermenu li:not(.hidden):not([style*="display:none"]):last-of-type > button > form, +.popovermenu li:not(.hidden):not([style*="display:none"]):last-of-type > button > input, +.popovermenu li:not(.hidden):not([style*="display:none"]):last-of-type > a > form, +.popovermenu li:not(.hidden):not([style*="display:none"]):last-of-type > a > input, +.popovermenu li:not(.hidden):not([style*="display:none"]):last-of-type > .menuitem > form, +.popovermenu li:not(.hidden):not([style*="display:none"]):last-of-type > .menuitem > input { + margin-bottom: 0px; +} +.bubble li > button, +.app-navigation-entry-menu li > button, +.popovermenu li > button { + padding: 0; +} +.bubble li > button span, +.app-navigation-entry-menu li > button span, +.popovermenu li > button span { + opacity: 1; +} + +.popovermenu li > button, +.popovermenu li > a, +.popovermenu li > .menuitem { + /* DEPRECATED! old img in popover fallback + * TODO: to remove */ +} +.popovermenu li > button > img, +.popovermenu li > a > img, +.popovermenu li > .menuitem > img { + width: 44px; + height: 44px; +} + +#contactsmenu .contact .popovermenu li > a > img { + width: 16px; + height: 16px; +} + +/* CONTENT LIST ------------------------------------------------------------ */ +.app-content-list { + position: -webkit-sticky; + position: relative; + top: 0; + border-right: 1px solid var(--color-border); + display: flex; + flex-direction: column; + transition: transform 250ms ease-in-out; + min-height: 100%; + max-height: 100%; + overflow-y: auto; + overflow-x: hidden; + flex: 1 1 200px; + min-width: 200px; + max-width: 300px; + /* Default item */ +} +.app-content-list .app-content-list-item { + position: relative; + height: 68px; + cursor: pointer; + padding: 10px 7px; + display: flex; + flex-wrap: wrap; + align-items: center; + flex: 0 0 auto; + /* Icon fixes */ +} +.app-content-list .app-content-list-item > [class^=icon-], +.app-content-list .app-content-list-item > [class*=" icon-"], +.app-content-list .app-content-list-item > .app-content-list-item-menu > [class^=icon-], +.app-content-list .app-content-list-item > .app-content-list-item-menu > [class*=" icon-"] { + order: 4; + width: 24px; + height: 24px; + margin: -7px; + padding: 22px; + opacity: 0.3; + cursor: pointer; +} +.app-content-list .app-content-list-item > [class^=icon-]:hover, .app-content-list .app-content-list-item > [class^=icon-]:focus, +.app-content-list .app-content-list-item > [class*=" icon-"]:hover, +.app-content-list .app-content-list-item > [class*=" icon-"]:focus, +.app-content-list .app-content-list-item > .app-content-list-item-menu > [class^=icon-]:hover, +.app-content-list .app-content-list-item > .app-content-list-item-menu > [class^=icon-]:focus, +.app-content-list .app-content-list-item > .app-content-list-item-menu > [class*=" icon-"]:hover, +.app-content-list .app-content-list-item > .app-content-list-item-menu > [class*=" icon-"]:focus { + opacity: 0.7; +} +.app-content-list .app-content-list-item > [class^=icon-][class^=icon-star], .app-content-list .app-content-list-item > [class^=icon-][class*=" icon-star"], +.app-content-list .app-content-list-item > [class*=" icon-"][class^=icon-star], +.app-content-list .app-content-list-item > [class*=" icon-"][class*=" icon-star"], +.app-content-list .app-content-list-item > .app-content-list-item-menu > [class^=icon-][class^=icon-star], +.app-content-list .app-content-list-item > .app-content-list-item-menu > [class^=icon-][class*=" icon-star"], +.app-content-list .app-content-list-item > .app-content-list-item-menu > [class*=" icon-"][class^=icon-star], +.app-content-list .app-content-list-item > .app-content-list-item-menu > [class*=" icon-"][class*=" icon-star"] { + opacity: 0.7; +} +.app-content-list .app-content-list-item > [class^=icon-][class^=icon-star]:hover, .app-content-list .app-content-list-item > [class^=icon-][class^=icon-star]:focus, .app-content-list .app-content-list-item > [class^=icon-][class*=" icon-star"]:hover, .app-content-list .app-content-list-item > [class^=icon-][class*=" icon-star"]:focus, +.app-content-list .app-content-list-item > [class*=" icon-"][class^=icon-star]:hover, +.app-content-list .app-content-list-item > [class*=" icon-"][class^=icon-star]:focus, +.app-content-list .app-content-list-item > [class*=" icon-"][class*=" icon-star"]:hover, +.app-content-list .app-content-list-item > [class*=" icon-"][class*=" icon-star"]:focus, +.app-content-list .app-content-list-item > .app-content-list-item-menu > [class^=icon-][class^=icon-star]:hover, +.app-content-list .app-content-list-item > .app-content-list-item-menu > [class^=icon-][class^=icon-star]:focus, +.app-content-list .app-content-list-item > .app-content-list-item-menu > [class^=icon-][class*=" icon-star"]:hover, +.app-content-list .app-content-list-item > .app-content-list-item-menu > [class^=icon-][class*=" icon-star"]:focus, +.app-content-list .app-content-list-item > .app-content-list-item-menu > [class*=" icon-"][class^=icon-star]:hover, +.app-content-list .app-content-list-item > .app-content-list-item-menu > [class*=" icon-"][class^=icon-star]:focus, +.app-content-list .app-content-list-item > .app-content-list-item-menu > [class*=" icon-"][class*=" icon-star"]:hover, +.app-content-list .app-content-list-item > .app-content-list-item-menu > [class*=" icon-"][class*=" icon-star"]:focus { + opacity: 1; +} +.app-content-list .app-content-list-item > [class^=icon-].icon-starred, +.app-content-list .app-content-list-item > [class*=" icon-"].icon-starred, +.app-content-list .app-content-list-item > .app-content-list-item-menu > [class^=icon-].icon-starred, +.app-content-list .app-content-list-item > .app-content-list-item-menu > [class*=" icon-"].icon-starred { + opacity: 1; +} +.app-content-list .app-content-list-item:hover, .app-content-list .app-content-list-item:focus, .app-content-list .app-content-list-item.active { + background-color: var(--color-background-dark); +} +.app-content-list .app-content-list-item:hover .app-content-list-item-checkbox.checkbox + label, .app-content-list .app-content-list-item:focus .app-content-list-item-checkbox.checkbox + label, .app-content-list .app-content-list-item.active .app-content-list-item-checkbox.checkbox + label { + display: flex; +} +.app-content-list .app-content-list-item .app-content-list-item-checkbox.checkbox + label, +.app-content-list .app-content-list-item .app-content-list-item-star { + position: absolute; + height: 40px; + width: 40px; + z-index: 50; +} +.app-content-list .app-content-list-item .app-content-list-item-checkbox.checkbox:checked + label, .app-content-list .app-content-list-item .app-content-list-item-checkbox.checkbox:hover + label, .app-content-list .app-content-list-item .app-content-list-item-checkbox.checkbox:focus + label, .app-content-list .app-content-list-item .app-content-list-item-checkbox.checkbox.active + label { + display: flex; +} +.app-content-list .app-content-list-item .app-content-list-item-checkbox.checkbox:checked + label + .app-content-list-item-icon, .app-content-list .app-content-list-item .app-content-list-item-checkbox.checkbox:hover + label + .app-content-list-item-icon, .app-content-list .app-content-list-item .app-content-list-item-checkbox.checkbox:focus + label + .app-content-list-item-icon, .app-content-list .app-content-list-item .app-content-list-item-checkbox.checkbox.active + label + .app-content-list-item-icon { + opacity: 0.7; +} +.app-content-list .app-content-list-item .app-content-list-item-checkbox.checkbox + label { + top: 14px; + left: 7px; + display: none; + /* Hide the star, priority to the checkbox */ +} +.app-content-list .app-content-list-item .app-content-list-item-checkbox.checkbox + label::before { + margin: 0; +} +.app-content-list .app-content-list-item .app-content-list-item-checkbox.checkbox + label ~ .app-content-list-item-star { + display: none; +} +.app-content-list .app-content-list-item .app-content-list-item-star { + display: flex; + top: 10px; + left: 32px; + background-size: 16px; + height: 20px; + width: 20px; + margin: 0; + padding: 0; +} +.app-content-list .app-content-list-item .app-content-list-item-icon { + position: absolute; + display: inline-block; + height: 40px; + width: 40px; + line-height: 40px; + border-radius: 50%; + vertical-align: middle; + margin-right: 10px; + color: #fff; + text-align: center; + font-size: 1.5em; + text-transform: capitalize; + object-fit: cover; + user-select: none; + cursor: pointer; + top: 50%; + margin-top: -20px; +} +.app-content-list .app-content-list-item .app-content-list-item-line-one, +.app-content-list .app-content-list-item .app-content-list-item-line-two { + display: block; + padding-left: 50px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + order: 1; + flex: 1 1 0px; + padding-right: 10px; + cursor: pointer; +} +.app-content-list .app-content-list-item .app-content-list-item-line-two { + opacity: 0.5; + order: 3; + flex: 1 0; + flex-basis: calc(100% - 44px); +} +.app-content-list .app-content-list-item .app-content-list-item-details { + order: 2; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100px; + opacity: 0.5; + font-size: 80%; + user-select: none; +} +.app-content-list .app-content-list-item .app-content-list-item-menu { + order: 4; + position: relative; +} +.app-content-list .app-content-list-item .app-content-list-item-menu .popovermenu { + margin: 0; + right: -2px; +} +.app-content-list.selection .app-content-list-item-checkbox.checkbox + label { + display: flex; +} + +.button.primary.skip-navigation:focus-visible { + box-shadow: 0 0 0 4px var(--color-main-background) !important; + outline: 2px solid var(--color-main-text) !important; +} + +:lang(FA,AR,UR,KU,HE,BN,HI,KN,MR,PS,SI,TA,TE) body { + direction: rtl; +} + +#header-menu-user-menu { + right: unset; + inset-inline-end: 0; +} + +textarea { + unicode-bidi: plaintext; +} + +/*# sourceMappingURL=apps.css.map */ diff --git a/core/css/apps.css.map b/core/css/apps.css.map index 1ea3ae6ad1d45..471352ed352aa 100644 --- a/core/css/apps.css.map +++ b/core/css/apps.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["apps.scss","variables.scss","functions.scss"],"names":[],"mappings":"AAsBA,MAEC,0GAEA,sDACA,gEACA,8FAGD,sCACC,MACC,6BACA,8BAKF,KACC,WACA,YACA,kBAEA,6EAGD,KAEC,6EAEA,0EACA,sBACA,2BACA,eACA,WACA,iDAKD,GACC,iBACA,eACA,mBACA,iBACA,8BAGD,GACC,eACA,cACA,8BAGD,GACC,eAID,GACC,kBACA,gCAGD,GACC,eAGD,MAEC,qBACA,aACA,eAGD,GACC,YACA,mBACA,iBAGD,IACC,iBACA,sBACA,kCACA,mCACA,qBACA,mBAMD,wBACC,sBAKD,0BAEC,8DAEA,MCjBkB,MDkBlB,YACA,gBACA,kBACA,mDACA,8CACA,+EACA,gBACA,YACA,sBACA,qBACA,iBACA,aACA,sBACA,YACA,cAEA,kDACC,iBACA,iBACA,yBACA,mBACA,uBACA,2BACA,iBACA,oBACA,iBAQD,gGACC,cACA,6CACA,8GACC,qBACA,WACA,aACA,kBACA,gCACA,gBACA,SAIF,8DACC,kBAED,8DACC,kBACA,YACA,WACA,kBACA,gBACA,sBACA,aACA,sBACA,6CACA,iBAEA,oFACC,oDAGD,oEACC,oBACA,eACA,QACA,cACA,SACA,kBACA,WACA,wCAGA,kFACC,QACA,4GACC,2BAIF,gIAEC,6BAED,0HAIC,6BAKA,wVAEC,+CAGF,oGACC,kDACA,yCAMA,gsBAEC,8CACA,wCAKF,sHACC,UACA,SAMA,kNAEC,aAKF,0EACC,cACA,WACA,kBACA,gFACC,oBACA,eACA,kBACA,WACA,kBAIC,wXAEC,wCACA,+CAKD,gZAEC,wCACA,oDAKF,kIACC,UAGD,4IAEC,gBACA,kBAGD,sIAEC,gBAGA,6BAMJ,oJAEC,kBACA,sBAGC,4jBAGC,oCAIF,4JACC,0BACA,gCACA,4BACA,cACA,8BACA,iBACA,gBACA,sBACA,gBACA,sBACA,mBACA,uBACA,wCACA,6BACA,aACA,YAGA,4KACC,sBACA,wOACC,qBAGF,4NACC,6BACA,WACA,YAEA,wCAID,4QACC,qBACA,YACA,4ZACC,2BAKH,wQACC,kBACA,cACA,YACA,WACA,YACA,YACA,kBACA,eACA,wCAEA,gRAEC,oCAKF,gQACC,SAID,gSACC,UACA,YAED,4SACC,wBACA,YAIH,sEACC,aAMD,4YAEC,SACA,WACA,+BACA,4BACA,2BACA,w0BAEC,+BACA,UAUD,sGACC,UACA,kBACA,WACA,YACA,SACA,YAIA,OAEA,kIACC,UACA,eACA,wDACA,gBAGF,gGACC,kBACA,YACA,WACA,SACA,UACA,gBEhYF,6CFkYE,qBACA,4BACA,2BACA,YACA,gBACA,wBACA,gBACA,YACA,UACA,iCACA,6BACA,yBACA,YACA,kBACA,qCAMD,8GACC,kBAIA,wNACC,UAED,oMACC,sBAED,gTACC,oCAID,0GACC,4BACA,wBACA,oBAQH,gHACC,cACA,sHACC,wBACA,mBACA,yBAED,sHACC,sBACA,YAED,8HACC,YACA,WACA,SACA,gBAIA,oSEpcF,uCFucE,obAEC,+BACA,UAGF,wLACC,gBACA,iBACA,cACA,iBACA,eAEA,gNACC,UACA,kBACA,0NACC,gBACA,mBACA,8CACA,wCASJ,8GACC,iBACA,kBACA,cACA,uBACA,qCACA,UACA,kBACA,8CACA,WACA,8OAEC,oBACA,WAED,0HACC,YACA,eACA,YACA,4QAGC,UAGF,gJACC,WACA,YACA,6BACA,0BAED,wRAEC,WACA,YACA,cACA,4VACC,2BAED,gWACC,iBAED,oUACC,gDACA,6CACA,4BACA,yBAQH,oHACC,oBACA,kBACA,4BACA,wMACC,kBACA,mBACA,uBACA,gBACA,aACA,iBAED,8LACC,SACA,YACA,WACA,iBACA,oZAEC,UAQH,kOAEC,uBACA,2FAGA,kBACA,OACA,8CACA,sBAMD,sFACC,gDACA,wCACA,oBAGD,sEACC,yBAGD,0OAEC,qBAMF,SACC,sBACA,gBACA,oCACA,gBACA,UACA,aACA,kDACA,0BACA,2CACA,cAEA,kCACC,eAIF,2CACC,SACC,kDACA,mDAED,gBACC,kDAED,aACC,oDAcF,aACC,aACA,8CACA,iBACA,cACA,iBACA,YAGA,kCACC,gBAID,kCACC,aACA,kBACA,oBAGA,gBAGA,uDAEC,eACA,mFACC,aAKH,uCACC,oCASF,aACC,WACA,UC/nBmB,MDgoBnB,UC/nBmB,MDgoBnB,cACA,wBACA,gBACA,ICtoBe,KDuoBf,QACA,gBACA,kBACA,aACA,aACA,0BACA,wCACA,0CACA,cAEA,uBACC,aAOF,cAEC,gBAGC,oFACC,cAKH,sBACC,aACA,6CACA,cACA,kDAEA,iBACA,gBACA,sBAGA,uCACC,UAGD,iCACC,uBACA,gCAOE,4NACC,qBACA,WACA,cAOL,qBACC,sBACA,+BACA,gBACA,oDACA,6CACA,cAEA,sCACC,aACA,mBACA,YACA,WACA,UACA,SACA,+BACA,gBACA,SACA,oDACA,gBACA,mBACA,eACA,WAGA,6BAEA,6CACC,yCACA,8CACA,eAED,wFAEC,+CAGD,8CACC,2CACA,gCACA,4BACA,WACA,WACA,YACA,MACA,OACA,cAGD,oDACC,mEACA,gCAMH,SACC,cACA,aACA,mBACA,gBACC,wBAIA,yDAEC,oBACA,iBAIH,aACC,kBACA,gBACA,iBACA,mBAGD,QACC,UACA,yCACA,sCACA,qCACA,oCACA,iCACA,oBACC,UAKF,YACC,aACA,mBAEA,uBACC,aACA,sBACA,YACA,kBACA,mBACA,gBACA,uBACA,eACA,gCACA,kBACA,YAEA,8BACC,aAID,mCACC,kBAED,kCACC,mBAGD,6BACC,qBACA,WACA,YACA,qBACA,sBACA,gBACA,iBACA,WACA,eAGD,yBACC,gCACA,kBACA,gBACA,uBAED,gCACC,iBAED,0FAGC,kBACA,6BACA,kDAIH,eACC,WACA,oBACC,oBAWD,0DACC,wCAIA,gFACC,YAKH,gDAGC,kBACA,8CACA,6BACA,yCACA,YACA,YACA,WACA,gBACA,QACA,sDACA,aACA,mBAEA,kEACC,YAKA,UAEA,2BACA,YACA,SACA,QACA,kBACA,oBACA,iDACA,iBAGD,oFACC,0BACA,UACA,eACA,sGACC,UACA,0BAIF,8EACC,WACA,OACA,eACA,gGACC,SACA,WAIF,+DACC,cAGD,+GACC,SAGD,yDAEC,wBACA,sBAED,yDACC,aACA,cAEA,8EACC,aAGD,oOAGC,eACA,YAhGkB,KAiGlB,SACA,yCACA,+BACA,aACA,uBACA,YACA,SACA,mBACA,gBACA,WACA,6BACA,mBAEA,whDAIC,YACA,aACA,gCACA,gBApHe,KAsHhB,yzBAIC,yBAOC,gvGACC,YAnIe,KAuIlB,+tBAEC,iCAED,ojBAEC,+CAED,4nBAEC,kDAED,mSACC,wCACA,oDAGD,mSACC,2BAED,iRACC,eACA,mBAED,sPACC,YACA,kBACA,cACA,mBAED,mSACC,SACA,gBAGD,gVACC,8BAID,wQACC,MA/Ke,KAgLf,aAGD,uyBAEC,qBACA,WAED,yeACC,mBAED,8cACC,mBAED,2xBACC,YAED,iRACC,aACA,cAGA,mBACA,mbACC,gBAIF,04BAEC,cAGD,0RACC,UAnNiB,KAoNjB,gBACA,aACA,cAEA,4bACC,gBAQA,2hDACC,gBAMD,ygDACC,kBAKJ,8EACC,UACA,6FACC,UAcD,+EACC,MAhQiB,KAiQjB,OAjQiB,KA0QlB,6CACC,WACA,YAOJ,kBACC,wBACA,kBACA,MACA,2CACA,aACA,sBACA,uCACA,gBACA,gBACA,gBACA,kBACA,eACA,UCloCgB,MDmoChB,UCloCgB,MDqoChB,yCACC,kBACA,YACA,eACA,iBACA,aACA,eACA,mBACA,cAKC,8RAEC,QACA,WACA,YACA,YACA,aACA,WACA,eACA,4mBAEC,WAED,wtBAEC,WACA,ghDAEC,UAIF,kVACC,UAKH,8IAGC,8CAEA,2RACC,aAIF,6JAEC,kBACA,YACA,WACA,WAQC,2XAEC,aAEA,2eACC,WAIH,wFACC,SACA,SAEA,aACA,gGACC,SAGD,oHACC,aAKH,qEACC,aACA,SACA,UACA,qBACA,YACA,WACA,SACA,UAGD,qEACC,kBACA,qBACA,YACA,WACA,iBACA,kBACA,sBACA,kBACA,WACA,kBACA,gBACA,0BACA,iBACA,iBACA,eACA,QACA,iBAGD,kJAEC,cACA,kBACA,mBACA,gBACA,uBACA,QACA,aACA,mBACA,eAGD,yEACC,WACA,QACA,SACA,6BAGD,wEACC,QACA,mBACA,gBACA,uBACA,gBACA,WACA,cACA,iBAGD,qEACC,QACA,kBACA,kFACC,SAGA,WAIH,2EACC,aAGF,8CACC,6DACA","file":"apps.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["apps.scss","variables.scss","functions.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBA;AAAA;AAAA;AA4BA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AF5BC;AACE;EACA;EAEA;EACA;EACA;;;AAGF;EACE;IACE;IACA;;;AAKJ;EACE;EACA;EACA;EAEA;;;AAGF;EAEE;EAEA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAEA;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;AACA;EACE;EACA;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIF;AAEA;EACE;;;AAGF;AACA;AACA;EAEE;EAEA,OCjBgB;EDkBhB;EACA;EACA;EACA;EACA;EACA;EAAwD;EACxD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;AAAA;AAGE;AAoPA;AAAA;AAAA;AAiBA;AAAA;AAAA;AA6EA;AAAA;AAAA;AAmDA;AAAA;AAAA;AAsDA;AAAA;AAAA;AA2BA;AAAA;AAAA;AAeA;AAAA;AAAA;;AApeA;AAAA;EACE;EACA;;AACA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;AAAA;EACE;;AAEF;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA0HA;;AAxHA;AAAA;EACE;;AAGF;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;AAyCA;AAMA;AASA;;AAvDA;AAAA;EACE;;AACA;AAAA;EACE;;AAIJ;AAAA;AACE;EACA;;AAEF;AAAA;AACE;AACA;AAAA;EAEA;;AAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;;AAGJ;AAAA;EACE;EACA;;AAMA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;EACA;;AAKJ;AAAA;EACE;EACA;;AAMA;AAAA;AAAA;EAEE;;AAKJ;AAAA;EACE;EACA;EACA;;AACA;AAAA;EACE;EACA;EACA;EACA;EACA;AAmBA;;AAfE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;EACA;;AAKF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;EACA;;AAKJ;AAAA;EACE;;AAGF;AAAA;AACE;EACA;EACA;;AAGF;AAAA;AACE;EACA;AACA;AAAA;EAEA;;AAMR;AAAA;AAAA;AAAA;EAEE;EACA;AACA;AAQA;AA2CA;AAkBA;AAKA;;AAxEE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEE;EACA;;AAIJ;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;AAgBA;;AAdA;AAAA;AAAA;AAAA;EACE;;AACA;AAAA;AAAA;AAAA;EACE;;AAGJ;AAAA;AAAA;AAAA;EACE;EACA;EACA;EAEA;;AAIF;AAAA;AAAA;AAAA;EACE;EACA;;AACA;AAAA;AAAA;AAAA;EACE;;AAKN;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AACE;EACA;;AAKJ;AAAA;AAAA;AAAA;EACE;;AAIF;AAAA;AAAA;AAAA;EACE;EACA;;AAEF;AAAA;AAAA;AAAA;EACE;EACA;;AAIN;AAAA;EACE;;AAMF;AAAA;AAAA;AAAA;EAEE;EACA;EACA;EACA;EACA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;EACA;;AAOJ;AAAA;AACE;AAAA;AAgDA;;AA9CA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;AAEA;AAAA;EAEA;;AAEA;AAAA;EACE;EACA;EACA;EACA;;AAGJ;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;AElYN;EAEA;EFkYM;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAMF;AAAA;EACE;;AAIA;AAAA;AAAA;EACE;;AAEF;AAAA;AAAA;EACE;;AAEF;AAAA;AAAA;EACE;;AAIF;AAAA;EACE;EACA;EACA;;AAQN;AAAA;EACE;;AACA;AAAA;EACE;EACA;EACA;;AAEF;AAAA;EACE;EACA;;AAEF;AAAA;EACE;EACA;EACA;EACA;;AAEF;AAAA;AACE;;AACA;AAAA;AEtcN;EAEA;;AFucM;AAAA;AAAA;EAEE;EACA;;AAGJ;AAAA;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;EACA;;AACA;AAAA;EACE;EACA;EACA;EACA;;AASR;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;AAAA;AAAA;AAAA;EAEE;EACA;;AAEF;AAAA;EACE;EACA;EACA;;AACA;AAAA;AAAA;AAEE;EACA;;AAGJ;AAAA;EACE;EACA;EACA;EACA;;AAEF;AAAA;AAAA;AAAA;EAEE;EACA;EACA;;AACA;AAAA;AAAA;AAAA;EACE;;AAEF;AAAA;AAAA;AAAA;EACE;;AAEF;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;;AAQN;AAAA;EACE;EACA;EACA;;AACA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;EACE;EACA;EACA;EACA;;AACA;AAAA;AAAA;EAEE;;AAQN;AAAA;AAAA;AAAA;EAEE;EACA;EAGA;EACA;EACA;EACA;;AAMF;AAAA;EACE;EACA;EACA;;AAGF;AAAA;EACE;;AAGF;AAAA;AAAA;AAAA;EAEE;;;AAKJ;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;IACE;IACA;;EAEF;IACE;;EAEF;IACE;;;AAIJ;AACA;AAEA;AAAA;AAAA;AAAA;AAAA;AAOA;EACE;EACA;EACA;EACA;EACA;EACA;AACA;AACA;AAKA;;AAJA;EACE;;AAIF;EACE;EACA;EACA;AACA;AAAA;EAEA;AAEA;;AACA;AACE;EACA;;AACA;EACE;;AAKN;EACE;;;AAIJ;AACA;AAAA;AAAA;AAAA;AAIA;EACE;EACA,WC/nBiB;EDgoBjB,WC/nBiB;EDgoBjB;EACA;EACA;EACA,KCtoBa;EDuoBb;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAKJ;AACA;AACA;EAEE;;AAGE;EACE;;;AAKN;EACE;EACA;EACA;EACA;AACA;EACA;EACA;EACA;AAEA;;AACA;EACE;;AAGF;EACE;EACA;;AAOI;EACE;EACA;EACA;;;AAOV;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;;AAEA;EACE;EACA;EACA;;AAEF;EAEE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AAKN;AACA;EACE;EACA;EACA;AAIA;;AAHA;EACE;;AAIA;EAEE;EACA;;;AAIN;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;;AAIJ;AACA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAMA;;AAJA;EACE;;AAIF;EACE;;AAEF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EAGE;EACA;EACA;;;AAIN;EACE;;AACA;EACE;;;AAIJ;AAOE;AAAA;EACE;;AAIA;AAAA;EACE;;;AAKN;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAmBA;AAUA;;AA3BA;AAAA;AAAA;EACE;EAKA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;AAAA;EACE;EACA;EACA;;AACA;AAAA;AAAA;EACE;EACA;;AAIJ;AAAA;AAAA;EACE;EACA;EACA;;AACA;AAAA;AAAA;EACE;EACA;;AAIJ;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;AACE;EACA;EACA;;AAEF;AAAA;AAAA;EACE;EACA;AAuIA;;AArIA;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;EACA,aAhGe;EAiGf;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA2CA;AAkBA;AAIA;AAAA;AAMA;AAyBA;AAKA;;AAnGA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAIE;EACA;EACA;EACA,iBApHW;;AAsHb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEE;AAAA;EAEA;;AAOE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE,aAnIS;;AAuIf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;;AAEF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;;AAEF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;;AAEF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;;AAEF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;EACA;;AAEF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;;AAEF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;;AAIF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE,OA/KW;EAgLX;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;EACA;;AAEF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;;AAEF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;;AAEF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;;AAEF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;EACA;AACA;AAAA;EAEA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE,WAnNa;EAoNb;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;;AAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;;AAMF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;;AAKR;AAAA;AAAA;EACE;;AACA;AAAA;AAAA;EACE;;;AASJ;AAAA;AAAA;AAGE;AAAA;;AAEA;AAAA;AAAA;EACE,OAhQa;EAiQb,QAjQa;;;AA0Qf;EACE;EACA;;;AAMR;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,WCloCc;EDmoCd,WCloCc;ADooCd;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;;AAGE;AAAA;AAAA;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;;AAEF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;;AAIJ;AAAA;AAAA;AAAA;EACE;;AAKN;EAGE;;AAEA;EACE;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;;AAQE;EAEE;;AAEA;EACE;;AAIN;EACE;EACA;EAEA;AAIA;;AAHA;EACE;;AAGF;EACE;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AACA;EACE;EAGA;;AAIN;EACE;;;AAGJ;EACE;EACA;;;AAKC;EACC;;;AAIJ;EACE;EACA;;;AAGF;EACE","file":"apps.css"} \ No newline at end of file diff --git a/core/css/apps.scss b/core/css/apps.scss index f9fc8c35dd39d..68fce78c18491 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -14,1424 +14,1440 @@ * * @license GNU AGPL version 3 or any later version * + */ + @use 'variables'; + @use 'sass:math'; + @import 'functions'; + + + :root { + /* - 2px is required for making it look nice */ + --border-radius-rounded: calc(var(--default-clickable-area) / 2 + var(--default-grid-baseline) * 2 - 2px); + + --body-container-radius: var(--border-radius-rounded); + --body-container-margin: calc(var(--default-grid-baseline) * 2); + --body-height: calc(100% - env(safe-area-inset-bottom) - 50px - var(--body-container-margin)); + } + + @media screen and (max-width: variables.$breakpoint-mobile) { + :root { + --body-container-margin: 0px; + --body-container-radius: 0px; + } + } + + + html { + width: 100%; + height: 100%; + position: absolute; + // color-background-plain should always be defined. It is the primary user colour + background-color: var(--color-background-plain, var(--color-main-background)); + } + + body { + // color-background-plain should always be defined. It is the primary user colour + background-color: var(--color-background-plain, var(--color-main-background)); + // user background, or plain colour and finally default admin background + background-image: var(--image-background, var(--image-background-plain, var(--image-background-default))); + background-size: cover; + background-position: center; + position: fixed; + width: 100%; + height: calc(100vh - env(safe-area-inset-bottom)); + } + + /* BASE STYLING ------------------------------------------------------------ */ + // no h1 allowed since h1 = logo + h2 { + font-weight: bold; + font-size: 20px; + margin-bottom: 12px; + line-height: 30px; + color: var(--color-text-light); + } + + h3 { + font-size: 16px; + margin: 12px 0; + color: var(--color-text-light); + } + + h4 { + font-size: 14px; + } + + /* do not use italic typeface style, instead lighter color */ + em { + font-style: normal; + color: var(--color-text-lighter); + } + + dl { + padding: 12px 0; + } + + dt, + dd { + display: inline-block; + padding: 12px; + padding-left: 0; + } + + dt { + width: 130px; + white-space: nowrap; + text-align: right; + } + + kbd { + padding: 4px 10px; + border: 1px solid #ccc; + box-shadow: 0 1px 0 rgba(0, 0, 0, .2); + border-radius: var(--border-radius); + display: inline-block; + white-space: nowrap; + } + + + /* APP STYLING ------------------------------------------------------------ */ + + #content[class*='app-'] * { + box-sizing: border-box; + } + + /* APP-NAVIGATION ------------------------------------------------------------ */ + /* Navigation: folder like structure */ + #app-navigation:not(.vue) { + // We use fixed variable for the pill style as we have larger containers around nested list entries + --border-radius-pill: calc(var(--default-clickable-area) / 2); + + width: variables.$navigation-width; + z-index: 500; + overflow-y: auto; + overflow-x: hidden; + background-color: var(--color-main-background-blur); + backdrop-filter: var(--filter-background-blur); + -webkit-backdrop-filter: var(--filter-background-blur); -webkit-user-select: none; + position: sticky; + height: 100%; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + display: flex; + flex-direction: column; + flex-grow: 0; + flex-shrink: 0; + + .app-navigation-caption { + font-weight: bold; + line-height: 44px; + padding: 10px 44px 0 44px; + white-space: nowrap; + text-overflow: ellipsis; + box-shadow: none !important; + user-select: none; + pointer-events:none; + margin-left: 10px; + } + } + + .app-navigation-personal, + .app-navigation-administration { + + /* 'New' button */ + .app-navigation-new { + display: block; + padding: calc(var(--default-grid-baseline) * 2); + button { + display: inline-block; + width: 100%; + padding: 10px; + padding-left: 34px; + background-position: 10px center; + text-align: left; + margin: 0; + } + } + + li { + position: relative; + } + > ul { + position: relative; + height: 100%; + width: 100%; + overflow-x: hidden; + overflow-y: auto; + box-sizing: border-box; + display: flex; + flex-direction: column; + padding: calc(var(--default-grid-baseline) * 2); + padding-bottom: 0; + + &:last-child { + padding-bottom: calc(var(--default-grid-baseline) * 2); + } + + > li { + display: inline-flex; + flex-wrap: wrap; + order: 1; + flex-shrink: 0; + margin: 0; + margin-bottom: 3px; + width: 100%; + border-radius: var(--border-radius-pill); + + /* Pinned-to-bottom entries */ + &.pinned { + order: 2; + &.first-pinned { + margin-top: auto !important; + } + } + + > .app-navigation-entry-deleted { + /* Ugly hack for overriding the main entry link */ + padding-left: 44px !important; + } + > .app-navigation-entry-edit { + /* Ugly hack for overriding the main entry link */ + /* align the input correctly with the link text + 44px-6px padding for the input */ + padding-left: 38px !important; + } + + a:hover, + a:focus { + &, + > a { + background-color: var(--color-background-hover); + } + } + a:focus-visible { + box-shadow: 0 0 0 4px var(--color-main-background); + outline: 2px solid var(--color-main-text); + } + &.active, + a:active, + a.selected , + a.active { + &, + > a { + background-color: var(--color-primary-element); + color: var(--color-primary-element-text); + } + } + + /* align loader */ + &.icon-loading-small:after { + left: 22px; + top: 22px; + } + + /* hide deletion/collapse of subitems */ + &.deleted, + &.collapsible:not(.open) { + > ul { + // NO ANIMATE because if not really hidden, we can still tab through it + display: none; + } + } + + /* Second level nesting for lists */ + > ul { + flex: 0 1 auto; + width: 100%; + position: relative; + > li { + display: inline-flex; + flex-wrap: wrap; + padding-left: 44px; + width: 100%; + margin-bottom: 3px; + + &:hover, + &:focus { + &, + > a { + border-radius: var(--border-radius-pill); + background-color: var(--color-background-hover); + } + } + &.active, + a.selected { + &, + > a { + border-radius: var(--border-radius-pill); + background-color: var(--color-primary-element-light); + } + } + + /* align loader */ + &.icon-loading-small:after { + left: 22px; /* 44px / 2 */ + } + + > .app-navigation-entry-deleted { + /* margin to keep active indicator visible */ + margin-left: 4px; + padding-left: 84px; + } + + > .app-navigation-entry-edit { + /* margin to keep active indicator visible */ + margin-left: 4px; + /* align the input correctly with the link text + 44px+44px-4px-6px padding for the input */ + padding-left: 78px !important; + } + } + } + } + /* Menu and submenu */ + > li, + > li > ul > li { + position: relative; + box-sizing: border-box; + /* hide icons if loading */ + &.icon-loading-small { + > a, + > .app-navigation-entry-bullet { + /* hide icon or bullet if loading state*/ + background: transparent !important; + } + } + /* Main entry link */ + > a { + background-size: 16px 16px; + background-position: 14px center; + background-repeat: no-repeat; + display: block; + justify-content: space-between; + line-height: 44px; + min-height: 44px; + padding: 0 12px 0 14px; + overflow: hidden; + box-sizing: border-box; + white-space: nowrap; + text-overflow: ellipsis; + border-radius: var(--border-radius-pill); + color: var(--color-main-text); + flex: 1 1 0px; + z-index: 100; /* above the bullet to allow click*/ + /* TODO: forbid using img as icon in menu? */ + + &.svg { + padding: 0 12px 0 44px; + :focus-visible { + padding: 0 8px 0 42px; + } + } + &:first-child img { + margin-right: 11px!important; + width: 16px; + height: 16px; + // Legacy invert if bright background + filter: var(--background-invert-if-dark); + } + + /* counter can also be inside the link */ + > .app-navigation-entry-utils { + display: inline-block; + float: right; + .app-navigation-entry-utils-counter { + padding-right: 0 !important; + } + } + } + /* Bullet icon */ + > .app-navigation-entry-bullet { + position: absolute; + display: block; + margin: 16px; + width: 12px; + height: 12px; + border: none; + border-radius: 50%; + cursor: pointer; + transition: background 100ms ease-in-out; + + + a { + /* hide icon if bullet, can't have both */ + background: transparent !important; + } + } + + /* popover fix the flex positionning of the li parent */ + > .app-navigation-entry-menu { + top: 44px; + } + + /* show edit/undo field if editing/deleted */ + &.editing .app-navigation-entry-edit { + opacity: 1; + z-index: 250; + } + &.deleted .app-navigation-entry-deleted { + transform: translateX(0); + z-index: 250; + } + } + } + &.hidden { + display: none; + } + + /** + * Button styling for menu, edit and undo + */ + .app-navigation-entry-utils .app-navigation-entry-utils-menu-button > button, + .app-navigation-entry-deleted .app-navigation-entry-deleted-button { + border: 0; + opacity: 0.5; + background-color: transparent; + background-repeat: no-repeat; + background-position: center; + &:hover, + &:focus { + background-color: transparent; + opacity: 1; + } + } + + /** + * Collapsible menus + */ + .collapsible { + /* Fallback for old collapse button. + TODO: to be removed. Leaved here for retro compatibility */ + .collapse { + opacity: 0; + position: absolute; + width: 44px; + height: 44px; + margin: 0; + z-index: 110; + + /* Needed for IE11; otherwise the button appears to the right of the + * link. */ + left: 0; + + &:focus-visible { + opacity: 1; + border-width: 0; + box-shadow: inset 0 0 0 2px var(--color-primary-element); + background: none; + } + } + &:before { + position: absolute; + height: 44px; + width: 44px; + margin: 0; + padding: 0; + background: none; + @include icon-color('triangle-s', 'actions', variables.$color-black, 1, true); + background-size: 16px; + background-repeat: no-repeat; + background-position: center; + border: none; + border-radius: 0; + outline: none !important; + box-shadow: none; + content: ' '; + opacity: 0; + -webkit-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); + z-index: 105; // above a, under button + border-radius: 50%; + transition: opacity variables.$animation-quick ease-in-out; + + + } + + /* force padding on link no matter if 'a' has an icon class */ + > a:first-child { + padding-left: 44px; + } + &:hover, + &:focus { + &:before { + opacity: 1; + } + > a { + background-image: none; + } + > .app-navigation-entry-bullet { + background: transparent !important; + } + } + &.open { + &:before { + -webkit-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + } + } + } + + /** + * App navigation utils, buttons and counters for drop down menu + */ + .app-navigation-entry-utils { + flex: 0 1 auto; + ul { + display: flex !important; + align-items: center; + justify-content: flex-end; + } + li { + width: 44px !important; + height: 44px; + } + button { + height: 100%; + width: 100%; + margin: 0; + box-shadow: none; + } + .app-navigation-entry-utils-menu-button { + /* Prevent bg img override if an icon class is set */ + button:not([class^='icon-']):not([class*=' icon-']) { + @include icon-color('more', 'actions', variables.$color-black, 1, true); + } + &:hover button, + &:focus button { + background-color: transparent; + opacity: 1; + } + } + .app-navigation-entry-utils-counter { + overflow: hidden; + text-align: right; + font-size: 9pt; + line-height: 44px; + padding: 0 12px; /* Same padding as all li > a in the app-navigation */ + + &.highlighted { + padding: 0; + text-align: center; + span { + padding: 2px 5px; + border-radius: 10px; + background-color: var(--color-primary-element); + color: var(--color-primary-element-text); + } + } + } + } + + /** + * Editable entries + */ + .app-navigation-entry-edit { + padding-left: 5px; + padding-right: 5px; + display: block; + width: calc(100% - 1px); /* Avoid border overlapping */ + transition: opacity 250ms ease-in-out; + opacity: 0; + position: absolute; + background-color: var(--color-main-background); + z-index: -1; + form, + div { + display: inline-flex; + width: 100%; + } + input { + padding: 5px; + margin-right: 0; + height: 38px; + &:hover, + &:focus { + /* overlapp borders */ + z-index: 1; + } + } + input[type='text'] { + width: 100%; + min-width: 0; /* firefox hack: override auto */ + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + button, + input:not([type='text']) { + width: 36px; + height: 38px; + flex: 0 0 36px; + &:not(:last-child) { + border-radius: 0 !important; + } + &:not(:first-child) { + margin-left: -1px; + } + &:last-child { + border-bottom-right-radius: var(--border-radius); + border-top-right-radius: var(--border-radius); + border-bottom-left-radius: 0; + border-top-left-radius: 0; + } + } + } + + /** + * Deleted entries with undo button + */ + .app-navigation-entry-deleted { + display: inline-flex; + padding-left: 44px; + transform: translateX(#{variables.$navigation-width}); + .app-navigation-entry-deleted-description { + position: relative; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + flex: 1 1 0px; + line-height: 44px; + } + .app-navigation-entry-deleted-button { + margin: 0; + height: 44px; + width: 44px; + line-height: 44px; + &:hover, + &:focus { + opacity: 1; + } + } + } + + /** + * Common rules for animation of undo and edit entries + */ + .app-navigation-entry-edit, + .app-navigation-entry-deleted { + width: calc(100% - 1px); /* Avoid border overlapping */ + transition: transform 250ms ease-in-out, + opacity 250ms ease-in-out, + z-index 250ms ease-in-out; + position: absolute; + left: 0; + background-color: var(--color-main-background); + box-sizing: border-box; + } + + /** + * drag and drop + */ + .drag-and-drop { + -webkit-transition: padding-bottom 500ms ease 0s; + transition: padding-bottom 500ms ease 0s; + padding-bottom: 40px; + } + + .error { + color: var(--color-error); + } + + .app-navigation-entry-utils ul, + .app-navigation-entry-menu ul { + list-style-type: none; + } + } + + + /* CONTENT --------------------------------------------------------- */ + #content { + box-sizing: border-box; + position: static; + margin: var(--body-container-margin); + margin-top: 50px; + padding: 0; + display: flex; + width: calc(100% - var(--body-container-margin) * 2); + height: var(--body-height); + border-radius: var(--body-container-radius); + overflow: clip; + + &:not(.with-sidebar--full) { + position: fixed; + } + } + + @media only screen and (max-width: variables.$breakpoint-mobile) { + #content { + border-top-left-radius: var(--border-radius-large); + border-top-right-radius: var(--border-radius-large); + } + #app-navigation { + border-top-left-radius: var(--border-radius-large); + } + #app-sidebar { + border-top-right-radius: var(--border-radius-large); + } + } + + /* APP-CONTENT AND WRAPPER ------------------------------------------ */ + /* Part where the content will be loaded into */ + + /** + * !Important. We are defining the minimum requirement we want for flex + * Just before the mobile breakpoint we have variables.$breakpoint-mobile (1024px) - variables.$navigation-width + * -> 468px. In that case we want 200px for the list and 268px for the content + */ + $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width - variables.$list-min-width; + + #app-content { + z-index: 1000; + background-color: var(--color-main-background); + flex-basis: 100vw; + overflow: auto; + position: initial; + height: 100%; + /* margin if navigation element is here */ + /* no top border for first settings item */ + > .section:first-child { + border-top: none; + } + + /* if app-content-list is present */ + #app-content-wrapper { + display: flex; + position: relative; + align-items: stretch; + /* make sure we have at least full height for loaders or such + no need for list/details since we have a flex stretch */ + min-height: 100%; + + /* CONTENT DETAILS AFTER LIST*/ + .app-content-details { + /* grow full width */ + flex: 1 1 $min-content-width; + #app-navigation-toggle-back { + display: none; + } + } + } + + &::-webkit-scrollbar-button { + height: var(--body-container-radius); + } + } + + /* APP-SIDEBAR ------------------------------------------------------------ */ + /* + Sidebar: a sidebar to be used within #content + #app-content will be shrinked properly */ -@use 'variables'; -@use 'sass:math'; -@import 'functions'; - - -:root { - /* - 2px is required for making it look nice */ - --border-radius-rounded: calc(var(--default-clickable-area) / 2 + var(--default-grid-baseline) * 2 - 2px); - - --body-container-radius: var(--border-radius-rounded); - --body-container-margin: calc(var(--default-grid-baseline) * 2); - --body-height: calc(100% - env(safe-area-inset-bottom) - 50px - var(--body-container-margin)); -} - -@media screen and (max-width: variables.$breakpoint-mobile) { - :root { - --body-container-margin: 0px; - --body-container-radius: 0px; - } -} - - -html { - width: 100%; - height: 100%; - position: absolute; - // color-background-plain should always be defined. It is the primary user colour - background-color: var(--color-background-plain, var(--color-main-background)); -} - -body { - // color-background-plain should always be defined. It is the primary user colour - background-color: var(--color-background-plain, var(--color-main-background)); - // image-background-plain means the admin has disabled the background image - background-image: var(--image-background, var(--image-background-default)); - background-size: cover; - background-position: center; - position: fixed; - width: 100%; - height: calc(100vh - env(safe-area-inset-bottom)); -} - -/* BASE STYLING ------------------------------------------------------------ */ -// no h1 allowed since h1 = logo -h2 { - font-weight: bold; - font-size: 20px; - margin-bottom: 12px; - line-height: 30px; - color: var(--color-text-light); -} - -h3 { - font-size: 16px; - margin: 12px 0; - color: var(--color-text-light); -} - -h4 { - font-size: 14px; -} - -/* do not use italic typeface style, instead lighter color */ -em { - font-style: normal; - color: var(--color-text-lighter); -} - -dl { - padding: 12px 0; -} - -dt, -dd { - display: inline-block; - padding: 12px; - padding-left: 0; -} - -dt { - width: 130px; - white-space: nowrap; - text-align: right; -} - -kbd { - padding: 4px 10px; - border: 1px solid #ccc; - box-shadow: 0 1px 0 rgba(0, 0, 0, .2); - border-radius: var(--border-radius); - display: inline-block; - white-space: nowrap; -} - - -/* APP STYLING ------------------------------------------------------------ */ - -#content[class*='app-'] * { - box-sizing: border-box; -} - -/* APP-NAVIGATION ------------------------------------------------------------ */ -/* Navigation: folder like structure */ -#app-navigation:not(.vue) { - // We use fixed variable for the pill style as we have larger containers around nested list entries - --border-radius-pill: calc(var(--default-clickable-area) / 2); - - width: variables.$navigation-width; - z-index: 500; - overflow-y: auto; - overflow-x: hidden; - background-color: var(--color-main-background-blur); - backdrop-filter: var(--filter-background-blur); - -webkit-backdrop-filter: var(--filter-background-blur); -webkit-user-select: none; - position: sticky; - height: 100%; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - display: flex; - flex-direction: column; - flex-grow: 0; - flex-shrink: 0; - - .app-navigation-caption { - font-weight: bold; - line-height: 44px; - padding: 10px 44px 0 44px; - white-space: nowrap; - text-overflow: ellipsis; - box-shadow: none !important; - user-select: none; - pointer-events:none; - margin-left: 10px; - } -} - -.app-navigation-personal, -.app-navigation-administration { - - /* 'New' button */ - .app-navigation-new { - display: block; - padding: calc(var(--default-grid-baseline) * 2); - button { - display: inline-block; - width: 100%; - padding: 10px; - padding-left: 34px; - background-position: 10px center; - text-align: left; - margin: 0; - } - } - - li { - position: relative; - } - > ul { - position: relative; - height: 100%; - width: 100%; - overflow-x: hidden; - overflow-y: auto; - box-sizing: border-box; - display: flex; - flex-direction: column; - padding: calc(var(--default-grid-baseline) * 2); - padding-bottom: 0; - - &:last-child { - padding-bottom: calc(var(--default-grid-baseline) * 2); - } - - > li { - display: inline-flex; - flex-wrap: wrap; - order: 1; - flex-shrink: 0; - margin: 0; - margin-bottom: 3px; - width: 100%; - border-radius: var(--border-radius-pill); - - /* Pinned-to-bottom entries */ - &.pinned { - order: 2; - &.first-pinned { - margin-top: auto !important; - } - } - - > .app-navigation-entry-deleted { - /* Ugly hack for overriding the main entry link */ - padding-left: 44px !important; - } - > .app-navigation-entry-edit { - /* Ugly hack for overriding the main entry link */ - /* align the input correctly with the link text - 44px-6px padding for the input */ - padding-left: 38px !important; - } - - a:hover, - a:focus { - &, - > a { - background-color: var(--color-background-hover); - } - } - a:focus-visible { - box-shadow: 0 0 0 4px var(--color-main-background); - outline: 2px solid var(--color-main-text); - } - &.active, - a:active, - a.selected , - a.active { - &, - > a { - background-color: var(--color-primary-element); - color: var(--color-primary-element-text); - } - } - - /* align loader */ - &.icon-loading-small:after { - left: 22px; - top: 22px; - } - - /* hide deletion/collapse of subitems */ - &.deleted, - &.collapsible:not(.open) { - > ul { - // NO ANIMATE because if not really hidden, we can still tab through it - display: none; - } - } - - /* Second level nesting for lists */ - > ul { - flex: 0 1 auto; - width: 100%; - position: relative; - > li { - display: inline-flex; - flex-wrap: wrap; - padding-left: 44px; - width: 100%; - margin-bottom: 3px; - - &:hover, - &:focus { - &, - > a { - border-radius: var(--border-radius-pill); - background-color: var(--color-background-hover); - } - } - &.active, - a.selected { - &, - > a { - border-radius: var(--border-radius-pill); - background-color: var(--color-primary-element-light); - } - } - - /* align loader */ - &.icon-loading-small:after { - left: 22px; /* 44px / 2 */ - } - - > .app-navigation-entry-deleted { - /* margin to keep active indicator visible */ - margin-left: 4px; - padding-left: 84px; - } - - > .app-navigation-entry-edit { - /* margin to keep active indicator visible */ - margin-left: 4px; - /* align the input correctly with the link text - 44px+44px-4px-6px padding for the input */ - padding-left: 78px !important; - } - } - } - } - /* Menu and submenu */ - > li, - > li > ul > li { - position: relative; - box-sizing: border-box; - /* hide icons if loading */ - &.icon-loading-small { - > a, - > .app-navigation-entry-bullet { - /* hide icon or bullet if loading state*/ - background: transparent !important; - } - } - /* Main entry link */ - > a { - background-size: 16px 16px; - background-position: 14px center; - background-repeat: no-repeat; - display: block; - justify-content: space-between; - line-height: 44px; - min-height: 44px; - padding: 0 12px 0 14px; - overflow: hidden; - box-sizing: border-box; - white-space: nowrap; - text-overflow: ellipsis; - border-radius: var(--border-radius-pill); - color: var(--color-main-text); - flex: 1 1 0px; - z-index: 100; /* above the bullet to allow click*/ - /* TODO: forbid using img as icon in menu? */ - - &.svg { - padding: 0 12px 0 44px; - :focus-visible { - padding: 0 8px 0 42px; - } - } - &:first-child img { - margin-right: 11px!important; - width: 16px; - height: 16px; - // Legacy invert if bright background - filter: var(--background-invert-if-dark); - } - - /* counter can also be inside the link */ - > .app-navigation-entry-utils { - display: inline-block; - float: right; - .app-navigation-entry-utils-counter { - padding-right: 0 !important; - } - } - } - /* Bullet icon */ - > .app-navigation-entry-bullet { - position: absolute; - display: block; - margin: 16px; - width: 12px; - height: 12px; - border: none; - border-radius: 50%; - cursor: pointer; - transition: background 100ms ease-in-out; - - + a { - /* hide icon if bullet, can't have both */ - background: transparent !important; - } - } - - /* popover fix the flex positionning of the li parent */ - > .app-navigation-entry-menu { - top: 44px; - } - - /* show edit/undo field if editing/deleted */ - &.editing .app-navigation-entry-edit { - opacity: 1; - z-index: 250; - } - &.deleted .app-navigation-entry-deleted { - transform: translateX(0); - z-index: 250; - } - } - } - &.hidden { - display: none; - } - - /** - * Button styling for menu, edit and undo - */ - .app-navigation-entry-utils .app-navigation-entry-utils-menu-button > button, - .app-navigation-entry-deleted .app-navigation-entry-deleted-button { - border: 0; - opacity: 0.5; - background-color: transparent; - background-repeat: no-repeat; - background-position: center; - &:hover, - &:focus { - background-color: transparent; - opacity: 1; - } - } - - /** - * Collapsible menus - */ - .collapsible { - /* Fallback for old collapse button. - TODO: to be removed. Leaved here for retro compatibility */ - .collapse { - opacity: 0; - position: absolute; - width: 44px; - height: 44px; - margin: 0; - z-index: 110; - - /* Needed for IE11; otherwise the button appears to the right of the - * link. */ - left: 0; - - &:focus-visible { - opacity: 1; - border-width: 0; - box-shadow: inset 0 0 0 2px var(--color-primary-element); - background: none; - } - } - &:before { - position: absolute; - height: 44px; - width: 44px; - margin: 0; - padding: 0; - background: none; - @include icon-color('triangle-s', 'actions', variables.$color-black, 1, true); - background-size: 16px; - background-repeat: no-repeat; - background-position: center; - border: none; - border-radius: 0; - outline: none !important; - box-shadow: none; - content: ' '; - opacity: 0; - -webkit-transform: rotate(-90deg); - -ms-transform: rotate(-90deg); - transform: rotate(-90deg); - z-index: 105; // above a, under button - border-radius: 50%; - transition: opacity variables.$animation-quick ease-in-out; - - - } - - /* force padding on link no matter if 'a' has an icon class */ - > a:first-child { - padding-left: 44px; - } - &:hover, - &:focus { - &:before { - opacity: 1; - } - > a { - background-image: none; - } - > .app-navigation-entry-bullet { - background: transparent !important; - } - } - &.open { - &:before { - -webkit-transform: rotate(0); - -ms-transform: rotate(0); - transform: rotate(0); - } - } - } - - /** - * App navigation utils, buttons and counters for drop down menu - */ - .app-navigation-entry-utils { - flex: 0 1 auto; - ul { - display: flex !important; - align-items: center; - justify-content: flex-end; - } - li { - width: 44px !important; - height: 44px; - } - button { - height: 100%; - width: 100%; - margin: 0; - box-shadow: none; - } - .app-navigation-entry-utils-menu-button { - /* Prevent bg img override if an icon class is set */ - button:not([class^='icon-']):not([class*=' icon-']) { - @include icon-color('more', 'actions', variables.$color-black, 1, true); - } - &:hover button, - &:focus button { - background-color: transparent; - opacity: 1; - } - } - .app-navigation-entry-utils-counter { - overflow: hidden; - text-align: right; - font-size: 9pt; - line-height: 44px; - padding: 0 12px; /* Same padding as all li > a in the app-navigation */ - - &.highlighted { - padding: 0; - text-align: center; - span { - padding: 2px 5px; - border-radius: 10px; - background-color: var(--color-primary-element); - color: var(--color-primary-element-text); - } - } - } - } - - /** - * Editable entries - */ - .app-navigation-entry-edit { - padding-left: 5px; - padding-right: 5px; - display: block; - width: calc(100% - 1px); /* Avoid border overlapping */ - transition: opacity 250ms ease-in-out; - opacity: 0; - position: absolute; - background-color: var(--color-main-background); - z-index: -1; - form, - div { - display: inline-flex; - width: 100%; - } - input { - padding: 5px; - margin-right: 0; - height: 38px; - &:hover, - &:focus { - /* overlapp borders */ - z-index: 1; - } - } - input[type='text'] { - width: 100%; - min-width: 0; /* firefox hack: override auto */ - border-bottom-right-radius: 0; - border-top-right-radius: 0; - } - button, - input:not([type='text']) { - width: 36px; - height: 38px; - flex: 0 0 36px; - &:not(:last-child) { - border-radius: 0 !important; - } - &:not(:first-child) { - margin-left: -1px; - } - &:last-child { - border-bottom-right-radius: var(--border-radius); - border-top-right-radius: var(--border-radius); - border-bottom-left-radius: 0; - border-top-left-radius: 0; - } - } - } - - /** - * Deleted entries with undo button - */ - .app-navigation-entry-deleted { - display: inline-flex; - padding-left: 44px; - transform: translateX(#{variables.$navigation-width}); - .app-navigation-entry-deleted-description { - position: relative; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - flex: 1 1 0px; - line-height: 44px; - } - .app-navigation-entry-deleted-button { - margin: 0; - height: 44px; - width: 44px; - line-height: 44px; - &:hover, - &:focus { - opacity: 1; - } - } - } - - /** - * Common rules for animation of undo and edit entries - */ - .app-navigation-entry-edit, - .app-navigation-entry-deleted { - width: calc(100% - 1px); /* Avoid border overlapping */ - transition: transform 250ms ease-in-out, - opacity 250ms ease-in-out, - z-index 250ms ease-in-out; - position: absolute; - left: 0; - background-color: var(--color-main-background); - box-sizing: border-box; - } - - /** - * drag and drop - */ - .drag-and-drop { - -webkit-transition: padding-bottom 500ms ease 0s; - transition: padding-bottom 500ms ease 0s; - padding-bottom: 40px; - } - - .error { - color: var(--color-error); - } - - .app-navigation-entry-utils ul, - .app-navigation-entry-menu ul { - list-style-type: none; - } -} - - -/* CONTENT --------------------------------------------------------- */ -#content { - box-sizing: border-box; - position: static; - margin: var(--body-container-margin); - margin-top: 50px; - padding: 0; - display: flex; - width: calc(100% - var(--body-container-margin) * 2); - height: var(--body-height); - border-radius: var(--body-container-radius); - overflow: clip; - - &:not(.with-sidebar--full) { - position: fixed; - } -} - -@media only screen and (max-width: variables.$breakpoint-mobile) { - #content { - border-top-left-radius: var(--border-radius-large); - border-top-right-radius: var(--border-radius-large); - } - #app-navigation { - border-top-left-radius: var(--border-radius-large); - } - #app-sidebar { - border-top-right-radius: var(--border-radius-large); - } -} - -/* APP-CONTENT AND WRAPPER ------------------------------------------ */ -/* Part where the content will be loaded into */ - -/** - * !Important. We are defining the minimum requirement we want for flex - * Just before the mobile breakpoint we have variables.$breakpoint-mobile (1024px) - variables.$navigation-width - * -> 468px. In that case we want 200px for the list and 268px for the content - */ -$min-content-width: variables.$breakpoint-mobile - variables.$navigation-width - variables.$list-min-width; - -#app-content { - z-index: 1000; - background-color: var(--color-main-background); - flex-basis: 100vw; - overflow: auto; - position: initial; - height: 100%; - /* margin if navigation element is here */ - /* no top border for first settings item */ - > .section:first-child { - border-top: none; - } - - /* if app-content-list is present */ - #app-content-wrapper { - display: flex; - position: relative; - align-items: stretch; - /* make sure we have at least full height for loaders or such - no need for list/details since we have a flex stretch */ - min-height: 100%; - - /* CONTENT DETAILS AFTER LIST*/ - .app-content-details { - /* grow full width */ - flex: 1 1 $min-content-width; - #app-navigation-toggle-back { - display: none; - } - } - } - - &::-webkit-scrollbar-button { - height: var(--body-container-radius); - } -} - -/* APP-SIDEBAR ------------------------------------------------------------ */ -/* - Sidebar: a sidebar to be used within #content - #app-content will be shrinked properly -*/ -#app-sidebar { - width: 27vw; - min-width: variables.$sidebar-min-width; - max-width: variables.$sidebar-max-width; - display: block; - position: -webkit-sticky; - position: sticky; - top: variables.$header-height; - right:0; - overflow-y: auto; - overflow-x: hidden; - z-index: 1500; - opacity: 0.7px; - height: calc(100vh - #{variables.$header-height}); - background: var(--color-main-background); - border-left: 1px solid var(--color-border); - flex-shrink: 0; - // no animations possible, use OC.Apps.showAppSidebar - &.disappear { - display: none; - } -} - - -/* APP-SETTINGS ------------------------------------------------------------ */ -/* settings area */ -#app-settings { - // To the bottom w/ flex - margin-top: auto; - &.open, - &.opened { - #app-settings-content { - display: block; - } - } -} - -#app-settings-content { - display: none; - padding: calc(var(--default-grid-baseline) * 2); - padding-top: 0; - padding-left: calc(var(--default-grid-baseline) * 4); - /* restrict height of settings and make scrollable */ - max-height: 300px; - overflow-y: auto; - box-sizing: border-box; - - /* display input fields at full width */ - input[type='text'] { - width: 93%; - } - - .info-text { - padding: 5px 0 7px 22px; - color: var(--color-text-lighter); - } - input { - &[type='checkbox'], - &[type='radio'] { - &.radio, - &.checkbox { - + label { - display: inline-block; - width: 100%; - padding: 5px 0; - } - } - } - } -} - -#app-settings-header { - box-sizing: border-box; - background-color: transparent; - overflow: hidden; - border-radius: calc(var(--default-clickable-area) / 2); - padding: calc(var(--default-grid-baseline) * 2); - padding-top: 0; - - .settings-button { - display: flex; - align-items: center; - height: 44px; - width: 100%; - padding: 0; - margin: 0; - background-color: transparent; - box-shadow: none; - border: 0; - border-radius: calc(var(--default-clickable-area) / 2); - text-align: left; - font-weight: normal; - font-size: 100%; - opacity: 0.8; - - /* like app-navigation a */ - color: var(--color-main-text); - - &.opened { - border-top: solid 1px var(--color-border); - background-color: var(--color-main-background); - margin-top: 8px; - } - &:hover, - &:focus { - background-color: var(--color-background-hover); - } - - &::before { - background-image: var(--icon-settings-dark); - background-position: 14px center; - background-repeat: no-repeat; - content: ''; - width: 44px; - height: 44px; - top: 0; - left: 0; - display: block; - } - - &:focus-visible { - box-shadow: 0 0 0 2px inset var(--color-primary-element) !important; - background-position: 12px center; - } - } -} - -/* GENERAL SECTION ------------------------------------------------------------ */ -.section { - display: block; - padding: 30px; - margin-bottom: 24px; - &.hidden { - display: none !important; - } - /* slight position correction of checkboxes and radio buttons */ - input { - &[type='checkbox'], - &[type='radio'] { - vertical-align: -2px; - margin-right: 4px; - } - } -} -.sub-section { - position: relative; - margin-top: 10px; - margin-left: 27px; - margin-bottom: 10px; -} - -.appear { - opacity: 1; - -webkit-transition: opacity 500ms ease 0s; - -moz-transition: opacity 500ms ease 0s; - -ms-transition: opacity 500ms ease 0s; - -o-transition: opacity 500ms ease 0s; - transition: opacity 500ms ease 0s; - &.transparent { - opacity: 0; - } -} - -/* TABS ------------------------------------------------------------ */ -.tabHeaders { - display: flex; - margin-bottom: 16px; - - .tabHeader { - display: flex; - flex-direction: column; - flex-grow: 1; - text-align: center; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - cursor: pointer; - color: var(--color-text-lighter); - margin-bottom: 1px; - padding: 5px; - - &.hidden { - display: none; - } - - /* Use same amount as sidebar padding */ - &:first-child { - padding-left: 15px; - } - &:last-child { - padding-right: 15px; - } - - .icon { - display: inline-block; - width: 100%; - height: 16px; - background-size: 16px; - vertical-align: middle; - margin-top: -2px; - margin-right: 3px; - opacity: .7; - cursor: pointer; - } - - a { - color: var(--color-text-lighter); - margin-bottom: 1px; - overflow: hidden; - text-overflow: ellipsis; - } - &.selected { - font-weight: bold; - } - &.selected, - &:hover, - &:focus { - margin-bottom: 0px; - color: var(--color-main-text); - border-bottom: 1px solid var(--color-text-lighter); - } - } -} -.tabsContainer { - clear: left; - .tab { - padding: 0 15px 15px; - } -} - -/* POPOVER MENU ------------------------------------------------------------ */ -$popoveritem-height: 44px; -$popovericon-size: 16px; -$outter-margin: math.div($popoveritem-height - $popovericon-size, 2); - -.contact .popovermenu ul, -.popover__menu { - > li > a > img { - filter: var(--background-invert-if-dark); - - // We do not want to invert the color of the user_status emoji: - // https://github.com/nextcloud/nextcloud-vue/blob/8899087f8f8d45e0ed744bde9faa00b625a21905/src/components/NcAvatar/NcAvatar.vue#L495 - &[src^="data"] { - filter: none; - } - } -} - -.bubble, -.app-navigation-entry-menu, -.popovermenu { - position: absolute; - background-color: var(--color-main-background); - color: var(--color-main-text); - border-radius: var(--border-radius-large); - padding: 3px; - z-index: 110; - margin: 5px; - margin-top: -5px; - right: 0; - filter: drop-shadow(0 1px 3px var(--color-box-shadow)); - display: none; - will-change: filter; - - &:after { - bottom: 100%; - // Required right-distance is half menu icon size + right padding - // = 16px/2 + 14px = 22px - // popover right margin is 5px, arrow width is 9px to center and border is 1px - // 22px - 9px - 5px - 1px = 7px - right: 7px; - /* change this to adjust the arrow position */ - border: solid transparent; - content: ' '; - height: 0; - width: 0; - position: absolute; - pointer-events: none; - border-bottom-color: var(--color-main-background); - border-width: 9px; - } - /* Center the popover */ - &.menu-center { - transform: translateX(50%); - right: 50%; - margin-right: 0; - &:after { - right: 50%; - transform: translateX(50%); - } - } - /* Align the popover to the left */ - &.menu-left { - right: auto; - left: 0; - margin-right: 0; - &:after { - left: 6px; - right: auto; - } - } - - &.open { - display: block; - } - - &.contactsmenu-popover { - margin: 0; - } - - ul { - /* Overwrite #app-navigation > ul ul */ - display: flex !important; - flex-direction: column; - } - li { - display: flex; - flex: 0 0 auto; - - &.hidden { - display: none; - } - - > button, - > a, - > .menuitem { - cursor: pointer; - line-height: $popoveritem-height; - border: 0; - border-radius: var(--border-radius-large); - background-color: transparent; - display: flex; - align-items: flex-start; - height: auto; - margin: 0; - font-weight: normal; - box-shadow: none; - width: 100%; - color: var(--color-main-text); - white-space: nowrap; - - span[class^='icon-'], - span[class*=' icon-'], - &[class^='icon-'], - &[class*=' icon-'] { - min-width: 0; /* Overwrite icons*/ - min-height: 0; - background-position: #{math.div($popoveritem-height - $popovericon-size, 2)} center; - background-size: $popovericon-size; - } - span[class^='icon-'], - span[class*=' icon-'] { - /* Keep padding to define the width to - assure correct position of a possible text */ - padding: #{math.div($popoveritem-height, 2)} 0 #{math.div($popoveritem-height, 2)} $popoveritem-height; - } - // If no icons set, force left margin to align - &:not([class^='icon-']):not([class*='icon-']) { - > span, - > input, - > form { - &:not([class^='icon-']):not([class*='icon-']):first-child { - margin-left: $popoveritem-height; - } - } - } - &[class^='icon-'], - &[class*=' icon-'] { - padding: 0 #{math.div($popoveritem-height - $popovericon-size, 2)} 0 $popoveritem-height !important; - } - &:hover, - &:focus { - background-color: var(--color-background-hover); - } - &:focus, - &:focus-visible { - box-shadow: 0 0 0 2px var(--color-primary-element); - } - &.active { - border-radius: var(--border-radius-pill); - background-color: var(--color-primary-element-light); - } - /* prevent .action class to break the design */ - &.action { - padding: inherit !important; - } - > span { - cursor: pointer; - white-space: nowrap; - } - > p { - width: 150px; - line-height: 1.6em; - padding: 8px 0; - white-space: normal; - } - > select { - margin: 0; - margin-left: 6px; - } - /* Add padding if contains icon+text */ - &:not(:empty) { - padding-right: $outter-margin !important; - } - /* DEPRECATED! old img in popover fallback - * TODO: to remove */ - > img { - width: $popovericon-size; - padding: #{math.div($popoveritem-height - $popovericon-size, 2)}; - } - /* checkbox/radio fixes */ - > input.radio + label, - > input.checkbox + label { - padding: 0 !important; - width: 100%; - } - > input.checkbox + label::before { - margin: -2px 13px 0; - } - > input.radio + label::before { - margin: -2px 12px 0; - } - > input:not([type=radio]):not([type=checkbox]):not([type=image]) { - width: 150px; - } - form { - display: flex; - flex: 1 1 auto; - /* put a small space between text and form - if there is an element before */ - align-items: center; - &:not(:first-child) { - margin-left: 5px; - } - } - /* no margin if hidden span before */ - > span.hidden + form, - > span[style*='display:none'] + form { - margin-left: 0; - } - /* Inputs inside popover supports text, submit & reset */ - input { - min-width: $popoveritem-height; - max-height: #{$popoveritem-height - 4px}; /* twice the element margin-y */ - margin: 2px 0; - flex: 1 1 auto; - // space between inline inputs - &:not(:first-child) { - margin-left: 5px; - } - } - } - /* css hack, only first not hidden */ - &:not(.hidden):not([style*='display:none']) { - &:first-of-type { - > button, > a, > .menuitem { - > form, > input { - margin-top: $outter-margin - 2px; // minus the input margin - } - } - } - &:last-of-type { - > button, > a, > .menuitem { - > form, > input { - margin-bottom: 0px; - } - } - } - } - > button { - padding: 0; - span { - opacity: 1; - } - } - - } -} - -.popovermenu { - li { - > button, - > a, - > .menuitem { - /* DEPRECATED! old img in popover fallback - * TODO: to remove */ - > img { - width: $popoveritem-height; - height: $popoveritem-height; - } - } - } -} - -#contactsmenu .contact .popovermenu { - li { - > a { - > img { - width: 16px; - height: 16px; - } - } - } -} - -/* CONTENT LIST ------------------------------------------------------------ */ -.app-content-list { - position: -webkit-sticky; - position: relative; - top: 0; - border-right: 1px solid var(--color-border); - display: flex; - flex-direction: column; - transition: transform 250ms ease-in-out; - min-height: 100%; - max-height: 100%; - overflow-y: auto; - overflow-x: hidden; - flex: 1 1 variables.$list-min-width; - min-width: variables.$list-min-width; - max-width: variables.$list-max-width; - - /* Default item */ - .app-content-list-item { - position: relative; - height: 68px; - cursor: pointer; - padding: 10px 7px; - display: flex; - flex-wrap: wrap; - align-items: center; - flex: 0 0 auto; - - /* Icon fixes */ - &, - > .app-content-list-item-menu { - > [class^='icon-'], - > [class*=' icon-'] { - order: 4; - width: 24px; - height: 24px; - margin: -7px; // right padding of item - padding: 22px; - opacity: .3; - cursor: pointer; - &:hover, - &:focus { - opacity: .7; - } - &[class^='icon-star'], - &[class*=' icon-star'] { - opacity: .7; - &:hover, - &:focus { - opacity: 1 ; - } - - } - &.icon-starred { - opacity: 1 ; - } - } - } - - &:hover, - &:focus, - &.active { - background-color: var(--color-background-dark); - // display checkbox on hover/focus/active - .app-content-list-item-checkbox.checkbox + label { - display: flex; - } - } - - .app-content-list-item-checkbox.checkbox + label, - .app-content-list-item-star { - position: absolute; - height: 40px; - width: 40px; - z-index: 50; - } - - .app-content-list-item-checkbox.checkbox { - &:checked, - &:hover, - &:focus, - &.active { - + label { - // display checkbox if checked - display: flex; - // if checked, lower the opacity of the avatar - + .app-content-list-item-icon { - opacity: .7; - } - } - } - + label { - top: 14px; - left: 7px; - // hidden by default, only chown on hover-focus or if checked - display: none; - &::before { - margin: 0; - } - /* Hide the star, priority to the checkbox */ - ~ .app-content-list-item-star { - display: none; - } - } - } - - .app-content-list-item-star { - display: flex; - top: 10px; - left: 32px; - background-size: 16px; - height: 20px; - width: 20px; - margin: 0; - padding: 0; - } - - .app-content-list-item-icon { - position: absolute; - display: inline-block; - height: 40px; - width: 40px; - line-height: 40px; - border-radius: 50%; - vertical-align: middle; - margin-right: 10px; - color: #fff; - text-align: center; - font-size: 1.5em; - text-transform: capitalize; - object-fit: cover; - user-select: none; - cursor: pointer; - top: 50%; - margin-top: -20px; - } - - .app-content-list-item-line-one, - .app-content-list-item-line-two { - display: block; - padding-left: 50px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - order: 1; - flex: 1 1 0px; - padding-right: 10px; - cursor: pointer; - } - - .app-content-list-item-line-two { - opacity: .5; - order: 3; - flex: 1 0; - flex-basis: calc(100% - 44px); - } - - .app-content-list-item-details { - order: 2; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 100px; - opacity: .5; - font-size: 80%; - user-select: none; - } - - .app-content-list-item-menu { - order: 4; - position: relative; - .popovermenu { - margin: 0; - // action icon have -7px margin - // default popover is normally 5px - right: -2px; - } - } - } - &.selection .app-content-list-item-checkbox.checkbox + label { - display: flex; - } -} -.button.primary.skip-navigation:focus-visible { - box-shadow: 0 0 0 4px var(--color-main-background) !important; - outline: 2px solid var(--color-main-text) !important; -} + #app-sidebar { + width: 27vw; + min-width: variables.$sidebar-min-width; + max-width: variables.$sidebar-max-width; + display: block; + position: -webkit-sticky; + position: sticky; + top: variables.$header-height; + right:0; + overflow-y: auto; + overflow-x: hidden; + z-index: 1500; + opacity: 0.7px; + height: calc(100vh - #{variables.$header-height}); + background: var(--color-main-background); + border-left: 1px solid var(--color-border); + flex-shrink: 0; + // no animations possible, use OC.Apps.showAppSidebar + &.disappear { + display: none; + } + } + + + /* APP-SETTINGS ------------------------------------------------------------ */ + /* settings area */ + #app-settings { + // To the bottom w/ flex + margin-top: auto; + &.open, + &.opened { + #app-settings-content { + display: block; + } + } + } + + #app-settings-content { + display: none; + padding: calc(var(--default-grid-baseline) * 2); + padding-top: 0; + padding-left: calc(var(--default-grid-baseline) * 4); + /* restrict height of settings and make scrollable */ + max-height: 300px; + overflow-y: auto; + box-sizing: border-box; + + /* display input fields at full width */ + input[type='text'] { + width: 93%; + } + + .info-text { + padding: 5px 0 7px 22px; + color: var(--color-text-lighter); + } + input { + &[type='checkbox'], + &[type='radio'] { + &.radio, + &.checkbox { + + label { + display: inline-block; + width: 100%; + padding: 5px 0; + } + } + } + } + } + + #app-settings-header { + box-sizing: border-box; + background-color: transparent; + overflow: hidden; + border-radius: calc(var(--default-clickable-area) / 2); + padding: calc(var(--default-grid-baseline) * 2); + padding-top: 0; + + .settings-button { + display: flex; + align-items: center; + height: 44px; + width: 100%; + padding: 0; + margin: 0; + background-color: transparent; + box-shadow: none; + border: 0; + border-radius: calc(var(--default-clickable-area) / 2); + text-align: left; + font-weight: normal; + font-size: 100%; + opacity: 0.8; + + /* like app-navigation a */ + color: var(--color-main-text); + + &.opened { + border-top: solid 1px var(--color-border); + background-color: var(--color-main-background); + margin-top: 8px; + } + &:hover, + &:focus { + background-color: var(--color-background-hover); + } + + &::before { + background-image: var(--icon-settings-dark); + background-position: 14px center; + background-repeat: no-repeat; + content: ''; + width: 44px; + height: 44px; + top: 0; + left: 0; + display: block; + } + + &:focus-visible { + box-shadow: 0 0 0 2px inset var(--color-primary-element) !important; + background-position: 12px center; + } + } + } + + /* GENERAL SECTION ------------------------------------------------------------ */ + .section { + display: block; + padding: 30px; + margin-bottom: 24px; + &.hidden { + display: none !important; + } + /* slight position correction of checkboxes and radio buttons */ + input { + &[type='checkbox'], + &[type='radio'] { + vertical-align: -2px; + margin-right: 4px; + } + } + } + .sub-section { + position: relative; + margin-top: 10px; + margin-left: 27px; + margin-bottom: 10px; + } + + .appear { + opacity: 1; + -webkit-transition: opacity 500ms ease 0s; + -moz-transition: opacity 500ms ease 0s; + -ms-transition: opacity 500ms ease 0s; + -o-transition: opacity 500ms ease 0s; + transition: opacity 500ms ease 0s; + &.transparent { + opacity: 0; + } + } + + /* TABS ------------------------------------------------------------ */ + .tabHeaders { + display: flex; + margin-bottom: 16px; + + .tabHeader { + display: flex; + flex-direction: column; + flex-grow: 1; + text-align: center; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + cursor: pointer; + color: var(--color-text-lighter); + margin-bottom: 1px; + padding: 5px; + + &.hidden { + display: none; + } + + /* Use same amount as sidebar padding */ + &:first-child { + padding-left: 15px; + } + &:last-child { + padding-right: 15px; + } + + .icon { + display: inline-block; + width: 100%; + height: 16px; + background-size: 16px; + vertical-align: middle; + margin-top: -2px; + margin-right: 3px; + opacity: .7; + cursor: pointer; + } + + a { + color: var(--color-text-lighter); + margin-bottom: 1px; + overflow: hidden; + text-overflow: ellipsis; + } + &.selected { + font-weight: bold; + } + &.selected, + &:hover, + &:focus { + margin-bottom: 0px; + color: var(--color-main-text); + border-bottom: 1px solid var(--color-text-lighter); + } + } + } + .tabsContainer { + clear: left; + .tab { + padding: 0 15px 15px; + } + } + + /* POPOVER MENU ------------------------------------------------------------ */ + $popoveritem-height: 44px; + $popovericon-size: 16px; + $outter-margin: math.div($popoveritem-height - $popovericon-size, 2); + + .contact .popovermenu ul, + .popover__menu { + > li > a > img { + filter: var(--background-invert-if-dark); + + // We do not want to invert the color of the user_status emoji: + // https://github.com/nextcloud/nextcloud-vue/blob/8899087f8f8d45e0ed744bde9faa00b625a21905/src/components/NcAvatar/NcAvatar.vue#L495 + &[src^="data"] { + filter: none; + } + } + } + + .bubble, + .app-navigation-entry-menu, + .popovermenu { + position: absolute; + background-color: var(--color-main-background); + color: var(--color-main-text); + border-radius: var(--border-radius-large); + padding: 3px; + z-index: 110; + margin: 5px; + margin-top: -5px; + right: 0; + filter: drop-shadow(0 1px 3px var(--color-box-shadow)); + display: none; + will-change: filter; + + &:after { + bottom: 100%; + // Required right-distance is half menu icon size + right padding + // = 16px/2 + 14px = 22px + // popover right margin is 5px, arrow width is 9px to center and border is 1px + // 22px - 9px - 5px - 1px = 7px + right: 7px; + /* change this to adjust the arrow position */ + border: solid transparent; + content: ' '; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-bottom-color: var(--color-main-background); + border-width: 9px; + } + /* Center the popover */ + &.menu-center { + transform: translateX(50%); + right: 50%; + margin-right: 0; + &:after { + right: 50%; + transform: translateX(50%); + } + } + /* Align the popover to the left */ + &.menu-left { + right: auto; + left: 0; + margin-right: 0; + &:after { + left: 6px; + right: auto; + } + } + + &.open { + display: block; + } + + &.contactsmenu-popover { + margin: 0; + } + + ul { + /* Overwrite #app-navigation > ul ul */ + display: flex !important; + flex-direction: column; + } + li { + display: flex; + flex: 0 0 auto; + + &.hidden { + display: none; + } + + > button, + > a, + > .menuitem { + cursor: pointer; + line-height: $popoveritem-height; + border: 0; + border-radius: var(--border-radius-large); + background-color: transparent; + display: flex; + align-items: flex-start; + height: auto; + margin: 0; + font-weight: normal; + box-shadow: none; + width: 100%; + color: var(--color-main-text); + white-space: nowrap; + + span[class^='icon-'], + span[class*=' icon-'], + &[class^='icon-'], + &[class*=' icon-'] { + min-width: 0; /* Overwrite icons*/ + min-height: 0; + background-position: #{math.div($popoveritem-height - $popovericon-size, 2)} center; + background-size: $popovericon-size; + } + span[class^='icon-'], + span[class*=' icon-'] { + /* Keep padding to define the width to + assure correct position of a possible text */ + padding: #{math.div($popoveritem-height, 2)} 0 #{math.div($popoveritem-height, 2)} $popoveritem-height; + } + // If no icons set, force left margin to align + &:not([class^='icon-']):not([class*='icon-']) { + > span, + > input, + > form { + &:not([class^='icon-']):not([class*='icon-']):first-child { + margin-left: $popoveritem-height; + } + } + } + &[class^='icon-'], + &[class*=' icon-'] { + padding: 0 #{math.div($popoveritem-height - $popovericon-size, 2)} 0 $popoveritem-height !important; + } + &:hover, + &:focus { + background-color: var(--color-background-hover); + } + &:focus, + &:focus-visible { + box-shadow: 0 0 0 2px var(--color-primary-element); + } + &.active { + border-radius: var(--border-radius-pill); + background-color: var(--color-primary-element-light); + } + /* prevent .action class to break the design */ + &.action { + padding: inherit !important; + } + > span { + cursor: pointer; + white-space: nowrap; + } + > p { + width: 150px; + line-height: 1.6em; + padding: 8px 0; + white-space: normal; + } + > select { + margin: 0; + margin-left: 6px; + } + /* Add padding if contains icon+text */ + &:not(:empty) { + padding-right: $outter-margin !important; + } + /* DEPRECATED! old img in popover fallback + * TODO: to remove */ + > img { + width: $popovericon-size; + padding: #{math.div($popoveritem-height - $popovericon-size, 2)}; + } + /* checkbox/radio fixes */ + > input.radio + label, + > input.checkbox + label { + padding: 0 !important; + width: 100%; + } + > input.checkbox + label::before { + margin: -2px 13px 0; + } + > input.radio + label::before { + margin: -2px 12px 0; + } + > input:not([type=radio]):not([type=checkbox]):not([type=image]) { + width: 150px; + } + form { + display: flex; + flex: 1 1 auto; + /* put a small space between text and form + if there is an element before */ + align-items: center; + &:not(:first-child) { + margin-left: 5px; + } + } + /* no margin if hidden span before */ + > span.hidden + form, + > span[style*='display:none'] + form { + margin-left: 0; + } + /* Inputs inside popover supports text, submit & reset */ + input { + min-width: $popoveritem-height; + max-height: #{$popoveritem-height - 4px}; /* twice the element margin-y */ + margin: 2px 0; + flex: 1 1 auto; + // space between inline inputs + &:not(:first-child) { + margin-left: 5px; + } + } + } + /* css hack, only first not hidden */ + &:not(.hidden):not([style*='display:none']) { + &:first-of-type { + > button, > a, > .menuitem { + > form, > input { + margin-top: $outter-margin - 2px; // minus the input margin + } + } + } + &:last-of-type { + > button, > a, > .menuitem { + > form, > input { + margin-bottom: 0px; + } + } + } + } + > button { + padding: 0; + span { + opacity: 1; + } + } + + } + } + + .popovermenu { + li { + > button, + > a, + > .menuitem { + /* DEPRECATED! old img in popover fallback + * TODO: to remove */ + > img { + width: $popoveritem-height; + height: $popoveritem-height; + } + } + } + } + + #contactsmenu .contact .popovermenu { + li { + > a { + > img { + width: 16px; + height: 16px; + } + } + } + } + + /* CONTENT LIST ------------------------------------------------------------ */ + .app-content-list { + position: -webkit-sticky; + position: relative; + top: 0; + border-right: 1px solid var(--color-border); + display: flex; + flex-direction: column; + transition: transform 250ms ease-in-out; + min-height: 100%; + max-height: 100%; + overflow-y: auto; + overflow-x: hidden; + flex: 1 1 variables.$list-min-width; + min-width: variables.$list-min-width; + max-width: variables.$list-max-width; + + /* Default item */ + .app-content-list-item { + position: relative; + height: 68px; + cursor: pointer; + padding: 10px 7px; + display: flex; + flex-wrap: wrap; + align-items: center; + flex: 0 0 auto; + + /* Icon fixes */ + &, + > .app-content-list-item-menu { + > [class^='icon-'], + > [class*=' icon-'] { + order: 4; + width: 24px; + height: 24px; + margin: -7px; // right padding of item + padding: 22px; + opacity: .3; + cursor: pointer; + &:hover, + &:focus { + opacity: .7; + } + &[class^='icon-star'], + &[class*=' icon-star'] { + opacity: .7; + &:hover, + &:focus { + opacity: 1 ; + } + + } + &.icon-starred { + opacity: 1 ; + } + } + } + + &:hover, + &:focus, + &.active { + background-color: var(--color-background-dark); + // display checkbox on hover/focus/active + .app-content-list-item-checkbox.checkbox + label { + display: flex; + } + } + + .app-content-list-item-checkbox.checkbox + label, + .app-content-list-item-star { + position: absolute; + height: 40px; + width: 40px; + z-index: 50; + } + + .app-content-list-item-checkbox.checkbox { + &:checked, + &:hover, + &:focus, + &.active { + + label { + // display checkbox if checked + display: flex; + // if checked, lower the opacity of the avatar + + .app-content-list-item-icon { + opacity: .7; + } + } + } + + label { + top: 14px; + left: 7px; + // hidden by default, only chown on hover-focus or if checked + display: none; + &::before { + margin: 0; + } + /* Hide the star, priority to the checkbox */ + ~ .app-content-list-item-star { + display: none; + } + } + } + + .app-content-list-item-star { + display: flex; + top: 10px; + left: 32px; + background-size: 16px; + height: 20px; + width: 20px; + margin: 0; + padding: 0; + } + + .app-content-list-item-icon { + position: absolute; + display: inline-block; + height: 40px; + width: 40px; + line-height: 40px; + border-radius: 50%; + vertical-align: middle; + margin-right: 10px; + color: #fff; + text-align: center; + font-size: 1.5em; + text-transform: capitalize; + object-fit: cover; + user-select: none; + cursor: pointer; + top: 50%; + margin-top: -20px; + } + + .app-content-list-item-line-one, + .app-content-list-item-line-two { + display: block; + padding-left: 50px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + order: 1; + flex: 1 1 0px; + padding-right: 10px; + cursor: pointer; + } + + .app-content-list-item-line-two { + opacity: .5; + order: 3; + flex: 1 0; + flex-basis: calc(100% - 44px); + } + + .app-content-list-item-details { + order: 2; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100px; + opacity: .5; + font-size: 80%; + user-select: none; + } + + .app-content-list-item-menu { + order: 4; + position: relative; + .popovermenu { + margin: 0; + // action icon have -7px margin + // default popover is normally 5px + right: -2px; + } + } + } + &.selection .app-content-list-item-checkbox.checkbox + label { + display: flex; + } + } + .button.primary.skip-navigation:focus-visible { + box-shadow: 0 0 0 4px var(--color-main-background) !important; + outline: 2px solid var(--color-main-text) !important; + } + + + :lang(FA,AR,UR,KU,HE,BN,HI,KN,MR,PS,SI,TA,TE) { + body { + direction: rtl; + } + } + + #header-menu-user-menu { + right: unset; + inset-inline-end: 0; + } + + textarea { + unicode-bidi: plaintext; + } \ No newline at end of file