/* ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ ⣿⣿⣿⣿⡿⠿⠿⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⠿⠿⠿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠿⠿⠿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ ⣿⣿⣿⣿⠃⠀⠀⠀⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠏⠁⠀⣀⣀⠀⠀⠙⣿⡇⠀⠈⣿⣿⣿⣿⣿⣿⣿⣿⣿⠀⠀⠀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ ⣿⣿⣿⠇⠀⢀⡀⠀⠘⣿⣿⡏⠉⠙⠋⠉⠉⠙⢿⡏⠉⠙⠋⠉⠉⠙⢿⡀⠀⠀⠙⠛⠶⠶⣶⡏⠁⠀⠀⠉⣍⠉⠉⢿⣿⠏⠉⢉⠀⠀⠀⡿⠛⠉⠁⠉⠉⠻⣿⣿⣿⣿⡿⠋⠉⠉⠉⠙⢿⠟⠉⠉⡉⠉⠙⢿⠟⠉⠉⡉⠉⠙⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ ⣿⣿⡏⠀⠀⣼⣧⠀⠀⠹⣿⡇⠀⠀⣶⣷⡀⠀⠘⡇⠀⢀⣶⣷⠀⠀⠘⣿⣦⣤⣀⡀⠀⠀⠈⢻⡇⠀⠀⣿⣿⡄⠀⠘⡟⠀⠀⣼⠀⠀⠀⠃⠀⠀⠛⠓⠀⠀⢹⣿⣿⡿⠀⠀⢰⣿⣦⣤⣤⡄⠀⠈⠙⠒⠲⢾⡀⠀⠈⠙⠒⠲⢾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ ⣿⡿⠀⠀⠀⠀⠀⠀⠀⠀⢻⡇⠀⠀⠿⠿⠁⠀⢠⡇⠀⠈⠿⠿⠀⠀⢠⠉⠉⠉⠻⠿⠃⠀⠀⣸⡇⠀⠀⠿⣿⣿⡀⠀⠁⠀⣸⣿⠀⠀⠀⡄⠀⠐⠶⠶⠒⠒⣺⠉⠉⢡⠀⠀⠸⠿⠏⠉⠉⠛⠒⢲⣦⠄⠀⠈⠛⠒⢲⣦⠀⠀⢘⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ ⣿⣇⣀⣠⣿⣿⣿⣿⣄⣀⣤⡇⠀⠀⣄⣀⣀⣤⣿⡇⠀⠀⣄⣀⣀⣤⣿⣷⣦⣄⣀⣀⣀⣤⣾⣿⣧⣄⣀⣀⣿⠿⠇⠀⠀⢠⣿⣿⣄⣀⣠⣿⣦⣄⣀⣀⣠⣴⣿⣀⣀⣸⣷⣤⣀⣀⣀⣤⣾⣷⣄⣀⣀⣀⣤⣾⣦⣄⣀⣀⣀⣤⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣇⣀⣀⣿⣿⣿⣿⣿⣇⣀⣀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣀⣀⣀⣠⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ ═══════════════════════════════════════════════════════════════════════════════════════════════════ *** *** appstyle.css *** *** *** ___________________________________________________________________________________________ *** *** Appstyle.css & Stylebook.css are primary stylesheets *** *** ==>> Appstyles ==> Basic and system-specific Styles *** *** ==>> Stylebook ==> Reuseable or component-like Styles *** *** ___________________________________________________________________________________________ *** *** *** *** Update with cleaning: July 2025 *** ═══════════════════════════════════════════════════════════════════════════════════════════════════ */ /* :root { */ body { /* Variables Basic Root ==> */ /* ███████████████████████████████████████████████████████████████████████████████████████████████ */ /* _______________________________________________________________________________________________ */ /* +++ Setting up primary variable name styles +++ */ /* +++ Starting with Layout +++ */ --sidebar-width: var(--sidebar-width-byuser); --markenbar-width: var(--markenbar-width-byuser); --middlepart-width: calc(100vw - calc(var(--sidebar-width) + var(--markenbar-width))); --middlepart-maxwidth: calc(var(--middlepart-width) + var(--markenbar-width)); --akten-width: var(--middlepart-width); --akten-maxwidth: var(--middlepart-maxwidth); --sidebar-footer-height: 95px; --sidebar-top-height: calc(var(--sidebar-top-logo-height) + var(--sidebar-top-menu-height)); --sidebar-top-logo-height: 80px; --sidebar-top-menu-height: 30px; --sidebar-inner-height: calc(100vh - calc(var(--sidebar-top-height) + var(--sidebar-footer-height))); /* /* / ______________________________________________________________________________________________ / *** Text & Font ***/ /* ===> Imported fonts in [FONTSLOAD] /resources/fontsload.css <== /* ===> Defined in [STYLEBOOK] /resources/styleguide/stylebook.css <== --- ==> USE: --fontsize-mainlevel: 13px; --fontsize-above-1 --fontsize-above-[n] --fontsize-below-[n] --fontsize-editor-default: calc(var(--fontsize-mainlevel) + 2px); --fontsize-ui: calc(var(--fontsize-mainlevel) - 2px); --lineheight-mainlevel: 13px; --lineheight-above-[n] --lineheight-below-[n] --fontfamily-default: 'derdicke','PragmataPro Liga', 'SegoeUI Symbol' ; --fontfamily-editor-default: 'PragmataPro Liga', 'SegoeUI Symbol'; /* ________________________________________________________________________________________________ /* +++ Main Components +++ */ --marke-card-width : 100%; --marke-card-snippet-height : 10vh; --panel-casing-maxwidth : 80vw; --papertree-width : var(--papertree-width-byuser ); --papertree-height: calc(100vh - (var(--sidebar-top-height) + var(--sidebar-footer-height))); --papertree-left : var(--papertree-left-byuser); /* ________________________________________________________________________________________________ /* +++ User Custom Settings ==> Defaults ==> Override by usersettings +++ /* +++ ==> Easy JS-Function to override Variable: ==> >_ setStyleVarBody(varName, varValue) +++ */ --sidebar-width-byuser : 350px; --markenbar-width-byuser : 380px; --papertree-width-byuser : calc(var(--sidebar-width) - 20px); --papertree-left-byuser : 4px; /* ________________________________________________________________________________________________ /* +++ Color, Color schemes & Color Assignations +++ */ /* ________________________________________________________________________________________________ /* +++ Legacy / Redirect outdated Variables for Compatibility +++ */ --sidebar: var(--sidebar-width); /* _______________________________________________________________________________________________ /* +++ Hopefully not in use anymore +++ */ --bg-primary : antiquewhite; --bg-secondary: rgb(26, 26, 26); --bg-third : bisque; --bg-fourth : burlywood; --color-special-prim: orangered; --color-special-sec: mediumslateblue; --box-shadow : 1px 1px #a5a5a5; --boxshadow-color-one: rgba(0,0,0,0.2); --menu-bgcolor: bisque; --userfooterbar-height: 95px; --aktenaktenmenu-sidebar-height: 130px; /* Colors */ --light-bg-15: hsl(34, 58%, 86%); --light-bg-20: hsl(34, 43%, 81%); --light-bg-80: hsl(0, 0%, 20%); --light-shader-15: rgba(100, 100, 100, 0.15);; --light-shader-20: rgba(100, 100, 100, 0.2); --light-shader-20: rgba(100, 100, 100, 0.3); } /* .brightelements { --bg-primary: rgb(26, 26, 26) !important; --bg-secondary: antiquewhite !important; --bg-third: rgb(51, 51, 51) !important; } */ /* _________________________________________ Material Design ICONS ===================== */ .material-symbols-outlined { font-family: Material Symbols Outlined; line-height: 1rem; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48; } ic-on { font-family: Material Symbols Outlined; font-size : var( --fontsize-above-6); width: 30px; /* height: 46px; */ margin-right: 15px; /* line-height: 30px; */ font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48; float: left; } /* -------- ENDE MATERIAL ICONS ------------- */ /* ———————————————————————————————————— ——— Theme: main-light ——— */ .main-light { --bg-primary : var(--color-level-1); --bg-secondary: var(--color-level-12); --bg-third : var(--color-level-3); --bg-fourth : var(--color-level-4); --bg-fifth: var(--color-level-5); --bg-full-pole: var(--color-level-2); --bg-bright-tint-full: var(--tint-level-1); --bg-bright-tint-90: var(--tint-level-2); --bg-bright-tint-30: var(--tint-level-8); } /* ———————————————————————————————————— ——— Theme: Darkmode ——— */ .darkmode { --bg-primary: var(--color-level-12); --bg-secondary: var(--color-level-2); --bg-third: var(--base-shade-95); --bg-fourth: var(--color-level-10); --bg-fifth: var(--color-level-9); --bg-full-pole: var(--base-shade-95); --boxshadow-color: #979184 !important; --boxshadow-color-one: #000000 !important; --main-font-color-00: var(--color-level-12); /* --bg-primary: rgb(26, 26, 26) !important; */ /* --bg-third: rgb(51, 51, 51) !important; */ /* --bg-third: rgb(35, 35, 35) !important; */ .userfooterbar { background-color: #1e1e1e !important; }; ul.userfootermenu-parent, ul.userfootermenu-child { background-color: var(--color-level-1) !important; color: var(--color-level-12) !important; }; ul[role="menu-bar"] > [role="menu-item"]:hover { background-color: var(--color-level-12) !important; color: var(--color-level-1) !important; }; /* body{ */ /* color: var(--color-level-12); */ /* } */ .timedisplay { color: var(--color-level-12); }; .metanotes-akten { background-color: var(--color-level-3); }; .markdown-body, pre { color: var(--color-level-12) !important; }; .metanotes-akten:hover { background-color: var(--color-level-1); }; .ab-root, .akte-lastedited, .papertree-rootpicker { box-shadow: 0px 0px 1px 1px var(--color-level-12); }; .wb-body { background-color: var(--color-level-1) !important; }; } /* ——— ENDE Darkmode ——— —————————————————————————— */ h1 { font-size: 45px; line-height: 45px; font-weight: 900; font-family: var(--fontfamily-default); color: var(--color-level-10); } a, p { color: var(--color-level-11) !important; } body { font-family : var(--fontfamily-default); font-weight : 400; letter-spacing : 0.31px; word-spacing : 1.1px; margin : 0; color: var(--color-level-12); --duenn-und-blass: rgba(140,55,70,0.1); --edler-rand: 1px solid var(--color-level-4); --visible-frame: #d9d9d900; &[deprecated] { font-size : var(--fontsize-mainlevel); line-height: var(--lineheight-above-2); } } img { width: -webkit-fill-available; } object, embed { height: 100%; width: 100%; } body, .rightfromsidebar { background-color: var(--color-level-1); } body { --max-index: 10; --min-index: 1; --index-parent: var(--max-index); --index-socket: var(--min-index); --sidebar: 250px; --marken: 380px; --akten: calc(100vw - calc(var(--sidebar) + var(--marken))); --header: 50px; } body.socketon { --index-parent: var(--max-index); --index-socket: var(--max-index); transition: 350ms; } ul { list-style-type: none; margin: unset; padding: unset; } .paperOverlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; mix-blend-mode: multiply; background-repeat: repeat; pointer-events: none; background-image: url('/resources/img/001BasikPaper.png') } /* // ______🮥🮥🮥 LAYOUT VIEWPORT ==> Parentwrapper // ████████████████████████████████████████████████████████████████████████████████████████████████ // ________________________________________________________________________________________________ // *** // *** [LAYOUT VIEWPORT] parentwrapper *** // *** [LAYOUT LEFT] sidebar | [LAYOUT MIDDLE] middlepart, akten | [LAYOUT RIGHT] Markenbar *** // *** This is Parentwrapper: ==> Containment for the 3 LAYOUT COLOUMNS & shared Properties *** // *** **/ .parentwrapper { --index: var(--index-parent); --sidebar-width-byuser: 100px; /* --sidebar-half: 50vw; */ --togglebar: 25px; --editor-small: 0vh; --editor-big: calc(100vh - var(--header) - var(--togglebar)); --editor-medium: 50vh; --editor: var(--editor-small); --top-editor: calc(var(--header) + var(--togglebar) + calc(100vh - var(--editor))); --top-toggler:calc(var(--header) + calc(100vh - var(--editor))); /* --maxakten: calc(var(--akten) + var(--marken)); */ z-index: var(--index); /* position: absolute; */ display: block; /* position: relative; */ position: fixed; /* height: max-content; */ height: 100vh; /* min-height: 100vh; */ width: 100vw; /* overflow-y: scroll; */ } .leftside, .middle, .rightside { display: inline-block; position: static; /* height: calc(100vh - 70px); */ height: 100vh; float: left; } .middle:not(:has(#mappentabelle)) { display: none } .middle, .rightside { overflow-y: scroll; } /* LEFTSIDE: SIDEBAR ==> Parentwrapper ==> [LAYOUT LEFT] ===> Sidebar /* ████████████████████████████████████████████████████████████████████████████████████████████████ /* ________________________________________________________________________________________________ /* +++ [LAYOUT VIEWPORT] parentwrapper +++ /* +++ [LAYOUT LEFT] sidebar | [LAYOUT MIDDLE] middlepart, akten | [LAYOUT RIGHT] Markenbar +++ /* +++ This is Sidebar: ==> Topmenu, Logo, Papierbaum, UsersFooter, User Settings +++ */ .leftside { max-width: var(--sidebar-width); background-color: var(--color-level-3); box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 25px -5px, rgba(0, 0, 0, 0.08) 0px 10px 10px -5px; resize: horizontal; position: relative; transition: 300ms; overflow: hidden; } #sidebar { position: relative; width: var(--sidebar-width); height: calc(var(--sidebar-inner-height) - 4px); top: var(--sidebar-top-logo-height); left: 0; overflow: hidden; /* padding-bottom: 150px; */ resize: horizontal; transition: 300ms; padding-left: 5px; } /* // ________________________________________________________________________________________________ // *** Sidebar Top: Knowtes Logo *** // *** ==> Top sits outside of sidebar in view of DOM-Tree, to keep it autonoum if sb is hidden */ /* HIERHER BITTE 🮥🮥 KNOWTES LOGO  VERSCHIEBEN. BEDANKEN SIE SICH ! */ /* ⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉ */ /* ______________________________________________________________________________________________ // *** Top Menu (alias Markenmenu) ***/ /* HIERHER BITTE 🮥🮥 TOP MENU  VERSCHIEBEN. BEDANKEN SIE SICH ! */ /* ⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉ */ /* ______________________________________________________________________________________________ // *** Papierbaum ***/ /* HIERHER BITTE 🮥🮥 PAPIERBAUM / PAPERTREE  VERSCHIEBEN. BEDANKEN SIE SICH ! */ /* ⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉ */ /* ______________________________________________________________________________________________ // *** UserFooter ***/ /* HIERHER BITTE 🮥🮥 User Footer  VERSCHIEBEN. BEDANKEN SIE SICH ! */ /* ⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉ */ /* ______________________________________________________________________________________________ // *** UserSettings ***/ /* HIERHER BITTE 🮥🮥 User Settings  VERSCHIEBEN. BEDANKEN SIE SICH ! */ /* ⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉ */ #resize, [resizeable] { content: ''; background-color: transparent; position: absolute; left: 240; width: 8px; height: 100%; top: 0px; cursor: ew-resize; opacity: 0; transition: 50ms; } #resize:hover { overflow: visible; transition: 200ms; border: 3px solid gainsboro; box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px; opacity: 0.8; } .middle { /* --maxakten: calc(var(--akten) + var(--marken)); */ width: var(--middlepart-width); height: 100%; z-index: 5; position: absolute; top: 0px; transition: 200ms; } .maxmiddle.middle{ /* --maxakten: calc(var(--akten) + var(--marken)); */ width: var(--middlepart-maxwidth); } .plussidebar.middle { /* --maxakten: calc(var(--akten) + var(--sidebar)); */ width: calc(var(--middlepart-width) + var(--sidebar-width)); } .plussidebar.middle.maxmiddle { /* --maxakten: calc(var(--akten) + var(--sidebar) + var(--marken) - 15px); */ width: calc(var(--middlepart-width) + var(--sidebar-width) + var(--markenbar-width) - 15px); } .rightside { width: var(--markenbar-width); float: right !important; padding-right: 10px; transition: 200ms; } .rightside.mc--out, .rightside.mc--outOff { width: 0; transition: 200ms; } .parentwrapper:has(.rightside:is(.mc--out)) .middle, .parentwrapper:has(.rightside:is(.mc--outOff)) .middle { width: var(--middlepart-maxwidth); transition: 200ms; } .middle-togglearea { height: 100px; width: 25px; filter: blur(100px); background-image: none; color: transparent; display: inline-block; /* float: left; */ position: absolute; /* right: 0px; right: 5px; top: 0px; */ transition: 200ms; /* z-index: 150; */ z-index: 150; right: 5px; } .middle-togglearea:hover { width: var(--markenbar-width); filter: blur(0px); position: absolute; } .middle-content { width: 95%; height: 100%; display: block; margin: auto; padding: 2.5%; line-height: 1.2rem; } .middle-content-akten { width: 95%; display: block; float: left; height: 100%; position: relative; z-index: 15; } .sidebarleft-mi { width: calc(1*var(--sidebar-width)); /* border: var(--edler-rand); */ background-color: var(--color-level-3); height: 100vh; box-shadow: var(--box-shadow); } .sidebarleft-mi, .rightfromsidebar, .markencontainer { display: block; position: absolute; } .sidebarfooter { /* width: calc(0.99*(var(--sidebar-width))); */ width: calc(var(--sidebar-width) - 4px); height: var(--sidebar-footer-height); position: absolute; bottom: 0; background-color: var(--color-level-1); margin: 0; font-weight: 700; /* left: -8px; padding: 8px; */ } .sidebarflag { position:absolute; opacity: 0.5; left: calc(0.94* var(--sidebar-width)); height:30px; z-index:5; text-align: right; bottom: 60px; } .sidebarflag:hover { content: ('Sidebar'); opacity: 1; } .timedisplay { font-size: 33px; line-height: 28px; text-align: right; color: var(--color-level-1); padding-right: 5px; } .timedisplay .today { font-weight: 900; } /* * ____________________________________________ [ middle ] ____________________________________________ */ .rightfromsidebar { left: var(--sidebar-width); /* width: var(--akten); */ right: var(--markenbar-width); /* border: var(--edler-rand); */ height: 100vh; /* overflow-y:scroll; */ } .markencontainer { padding-right: 15px; padding-left: 15px; height: 100vh; width: calc(var(--markenbar-width) - 30px); left: calc(var(--sidebar-width) + var(--middlepart-width)); /* border: var(--edler-rand); */ overflow-y: scroll; transition: 100ms; position: relative; z-index: 15; } /* ____________________________ ==> MARKENCARDSLIST <== MARKEN LISTE ____________________________ */ .MarkenCardsList { position: relative; } /* * _________________________ ==> PAGINATION <== MARKEN LISTE PAGINATION _________________________ */ .marken-pagination-bar { width: var(--marken); position: absolute; bottom: 50px; margin: 15px; button { box-shadow: none !important; margin-top: 6px !important; }; .button { padding: 2px; margin: -1px; width: 33%; text-align: center; ic-on { margin: auto; width: 100%; font-size : var( --fontsize-above-4); }; }; .label--module { width: calc(100% - 40px); background-color: var(--color-level-3); color: var(--color-level-10); border-radius: 3px; height: unset !important; text-align: center; }; } .marken-pagination-scrollupdown { margin: 15px; position: fixed; right: 10px; opacity: 0.5; top: 50px; button{ box-shadow: none !important; }; .button { padding: 2px; margin: -1px; ic-on { margin-right: 0px !important; width: 20px; font-size : var( --fontsize-above-4); }; }; } .marken-pagination-scrolldown:hover { opacity: 1; } /* _________________________ ENDE ENDE ENDE ==> PAGINATION <== MARKEN N _________________________ */ .marken-pagination-scrollupdown.mappen-pagination { right: calc(var(--marken) + 10px) !important } /* td:hover { background-color: rgba(255, 192, 203, 0.56); } tr:hover { background-color: rgba(127, 255, 212, 0.581); } */ /* ********************* AKTEN PAGINATION ***************************************************** */ /* _________________________ ==> PAGINATION <== AKTEN LISTE PAGINATION _________________________ */ .akten-pagination-bar { width: calc(var(--akten) - 50px); position: relative; bottom: 0px; margin: 15px; button { box-shadow: none !important; margin-top: 6px !important; }; .button { padding: 2px; margin: -1px; width: 33%; text-align: center; ic-on { margin: auto; width: 100%; font-size : var( --fontsize-above-4); }; }; .label--module { width: calc(100% - 40px); background-color: var(--color-level-3); color: var(--color-level-10); border-radius: 3px; height: unset !important; text-align: center; }; } .akten-pagination-scrollupdown { margin: 15px; position: fixed; right: 10px; opacity: 0.5; top: 50px; button{ box-shadow: none !important; }; .button { padding: 2px; margin: -1px; ic-on { margin-right: 0px !important; width: 20px; font-size : var( --fontsize-above-4); }; }; } .akten-pagination-scrolldown:hover { opacity: 1; } /* _________________________ ENDE ENDE ENDE ==> PAGINATION <== AKTEN N _________________________ */ /* *______________________________________ [ aktenbaum / table ] ______________________________________ */ .aktentable, .header { /* display: inline-block; */ width: calc(0.95* var(--akten)); overflow: auto; margin: auto; /* position: absolute; */ /* margin-inline: 2px; */ line-height: 1.2rem; /* padding: 2px; */ } .parentwrapper table { border-collapse: collapse; display: block; padding: 2px; } .table.custom-table { border-collapse: collapse; } .custom-table td { padding: 14px 25px; border-bottom: 1px solid #c0c0c050; margin-top: 3px; } .custom-table tr:nth-child(even) { background-color: var(--color-level-3); } .custom-table th { font-size: 1.0rem; font-weight: 700; background-color: var(--color-level-12); color: var(--color-level-3); text-align: left; padding: 7px 25px; } .bearbeitung { font-size: smaller; } /* .custom-table-head { */ /* display: table-row; */ /* border-spacing: 20px 0px; */ /* } */ /* .custom-table { /* border-bottom: 1px solid black; */ /* border-color: aqua; */ /* display: block; border-collapse: separate; border-spacing: 0px 10px; width: 75%; } */ .header { height: var(--header); width: 100%; padding: 5px 25px 25px 25px; background-color: var(--color-level-1); } /* ? super alte classes --> bestimmt können die eigentlich weg. ? //REVIEW 10/11/2024 - TAG: */ .editorsizeup { --editor: var(--editor-big); } .editor-container { --top-editor: calc(var(--header) + var(--togglebar) + calc(100vh - var(--editor))); --top-toggler:calc(var(--header) + calc(100vh - var(--editor))); width: inherit; /* display: block; */ position: absolute; height: 100vh;; /* height: calc(100vh - var(--togglebar)); */ /* height: var(--editor); */ /* max-width: calc(4*var(--editor)); */ /* top: var(--top-editor); */ bottom: 0; background-color: var(--duenn-und-blass); display: none; } .aktenviewerwindowstyle { height: 100vh; /* height: calc(99vh - var(--togglebar)); */ /* margin-top: calc(var(--togglebar) + 3px); */ } .marken-editor { display: block; height: max-content; padding-top: 2rem; width: var(--marken); position: fixed; right: calc(1.5* var(--marken)); top: 10vh; background-color: rgba(220, 20, 60, 0.662); color: var(--color-level-1); font-size: 1rem; font-weight: 400; font-family: "derdicke"; text-align: left; padding: 1rem; > div { background-color: var(--duenn-und-blass); min-height: 25vh; } } .cloned { background-color: var(--duenn-und-blass) !important; top: 50vh; position: fixed; color: var(--color-level-12); } .tackern:hover { color: rgba(172, 255, 47, 0.692); background-color: rgba(183, 4, 39, 0.984); } .tackern { /* height: 1.5rem; */ /* width: 100%; */ text-align: center; padding: auto; /* display: block; */ font-family: "derdicke"; font-weight: 700; letter-spacing: 2px; color: rgb(250, 113, 140); } .togglebutton { --top-editor: calc(var(--header) + var(--togglebar) + calc(100vh - var(--editor))); --top-toggler:calc(var(--header) + calc(100vh - var(--editor))); --tooglebutton-bar-button-size: 40px; font-family: "derdicke"; /* font-weight: 900; font-size: 2rem; */ display: block; position: absolute; /* position: fixed; */ /* left: var(--sidebar); right: var(--marken); */ width: 100%; /* width: var(--akten); */ height: var(--togglebar); /* top: var(--top-toggler); */ top: 0; bottom: 0; bottom: calc(0px + var(--editor)); } .togglebutton { word-spacing: 5px; background-color: var(--visible-frame); } .togglebutton::after{ font-family: "derdicke"; font-weight: 900; font-size: 1rem; place-content: center; text-align: center; letter-spacing: 3px; display: inline; position: absolute; padding-left: 1rem; } /* //initially made for wb-duplex */ .tooglein { backdrop-filter: contrast(0.8); } .inactive-title-bar { flex: none; display: flex; align-items: center; height: 1.5rem; margin: 0.1rem 0; padding: 0.2rem 0.1rem; background-size: 6.6666666667% 13.3333333333%; background-clip: content-box; } .inactive-title-bar .title { padding: 0 0.5em; margin: 0 auto; font-size: 1.5rem; font-weight: bold; line-height: 1.1; text-align: center; cursor: default; /* font-family: Chicago_12; */ color: var(--tertiary); } /* todo _______________________________________ [ blinking / blink ] _______________________________________ */ /* BLINKING CURSOSR */ .blinking-cursor { font-weight: 100; font-size: 30px; color: #2E3D48; -webkit-animation: 1s blink step-end infinite; -moz-animation: 1s blink step-end infinite; -ms-animation: 1s blink step-end infinite; -o-animation: 1s blink step-end infinite; animation: 1s blink step-end infinite; } @keyframes blink { from, to { color: transparent; } 50% { color: black; } } @-moz-keyframes blink { from, to { color: transparent; } 50% { color: black; } } @-webkit-keyframes blink { from, to { color: transparent; } 50% { color: black; } } @-ms-keyframes blink { from, to { color: transparent; } 50% { color: black; } } @-o-keyframes blink { from, to { color: transparent; } 50% { color: black; } } .header-mi { height: 50px; display: block; text-align: center; } .header-nav:before { content: "§"; position: relative; text-align: left; color:rgb(106, 80, 255); } .headermenu-mi { display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; float: inline-end; } /* ------------------------------------- * //NOTE 10/11/2024 - TAG: relativ neu! * breadcrumbs */ .breadcrumbs { /* margin-top: -5px; */ position: absolute; top: -5px; left: var(--sidebar-width); z-index: 1000; display: flex; margin-right: 5px; label--inline:hover { background-color: var(--teal-3); label--inline-heading { background-color: var(--teal-5); color: var(--color-level-10); }; }; label--inline { margin-right: 5px; span { padding-top: 2px;; } }; /* 2025 / Jun / 15 */ /* Added ==> Dokument Taskbar || Focus on Click */ .minimized-notat { filter: invert(1); font-style: italic; } } .logo { /* max-height: 50px; */ image-rendering: optimizeQuality; float: inline-start; /* background-image: url("https://knowtes.orijauch.de/resources/knowteslogo.png"); */ background-size: contain; width: calc(var(--sidebar-width) - 10px); text-align: center; font-weight: 900; padding-top: 6px; padding-left: 5px; position: fixed; top: 30px; height: var(--sidebar-top-logo-height); overflow: hidden; } .logo img { max-height: 40px; width: 30px !important; } .logopuretext td { border: 1px solid black; padding: 2px 5px; background-color: var(--color-level-2); } .logomiddlename { text-align: right; font-weight: 700; } .sekretariatTopBar { position: fixed; z-index: 2; background-color: transparent; top: -10px; } p { font-family: derdicke; font-size: 1em; } h1, h2, h3, .h3 { font-family: derdicke; font-weight: 900; } h1 { font-size: 2.6rem; letter-spacing: -0.02em; margin-bottom: 0; line-height: 2rem; } /* ******** Akten Liste / Akten Container / Akten Tabelle ************** */ div#mappentabelle { position: absolute; top: 70px; width: 100%; } .Aktenhead { position: fixed; margin-bottom: 50px; z-index: 10; margin-top: 30px; } .Aktenhead h1 { margin: 0; font-size: 3em; } #searchakte { margin-top: 15px; max-width: var(--akten); } img.barcode.bcXXXIX { transform: rotate(90deg); position: relative; left: 0px; height: 100%; width: 15px; background-blend-mode: multiply; } .metanotes-akten { border: 1px solid var(--color-level-12); padding-left: 15px; padding-bottom: 20px; border-left: 8px solid var(--color-level-12); margin: 10px; height: auto; box-shadow: 0 4px 8px 0 var(--boxshadow-color-one); position: relative; } .metanotes-akten:hover { background-color: var(--color-level-3); /* background-color: var(--color-shade-mslateblue-60); */ } .metanotes-akten h1 { margin-top: 50px; font-size: 3em; line-height: 1em; } .akte-lastedited { display: flex; /* background-color: var(--color-level-12); */ color: var(--color-level-12); width: 94%; padding: 1px 6px 1px 1px; font-size: 10px; position: relative; top: 0; left: 0px; justify-content: flex-end; } .unread-badger { /* border: 2px solid rgb(26, 26, 26); */ border-right: 8px solid var(--color-special-prim); position: relative; } .unread-badger::before { content: 'UNG'; width: 30px; height: 30px; /* background-image: url(icon/carbondesignsysIcons/visibility-on.svg); */ position: absolute; /* left: 0; */ right: 0px; background-color: bisque; font-weight: 900; fill: bisque; } .unread-badger .unread-badger-icon { background-image: url(icon/inbox.svg); background-size: contain; background-position: top left; background-repeat: no-repeat; width: 40px; height: 40px; position: absolute; /* margin-left: -30px; */ margin-top: 450px; filter: sepia(1); filter: brightness(0.1); filter: contrast(0.4) sepia(1) saturate(20) hue-rotate(21deg); } .unread-badger .unread-badger-icon:after { content: 'Ungelesen'; color: #000; /* width: 400px; */ filter: contrast(5.5); margin: 50px; z-index: 9999; } .badgers { width: 30px; position: absolute; right: 0px; top: 0px; height: 100%; /* background-color: var(--light-bg-15); */ background-color: var(--color-level-3); transition: 200ms; } .unread { width: 30px; height: 30px; padding: 5px 0px 10px 5px; opacity: 0.1; transition: 200ms; } .pin { width: 30px; height: 30px; padding: 5px 0px 50px 5px; opacity: 0.1; transition: 200ms; } .pinned { .pin { opacity: 1 !important; transition: 200ms; /* right: -30px; */ } .material-symbols-outlined { transition: 200ms; font-variation-settings: 'FILL' 1, 'wght' 0, 'GRAD' 0, 'opsz' 24 } } .markencard.pinned .pin{ /* height: initial; */ position: relative; display: block; bottom: 0; height: 15px; padding: 5px 0px 5px 5px; } .pin:hover{ /* color: var(--color-level-1); */ opacity: 1; transition: 200ms; .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important; transition: 200ms; } box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset; background-color: var(--light-bg-20); } .nc-akten-ordner { padding: 2px 5px; /* box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); */ border: 1px solid rgb(26, 26, 26); width: fit-content; } .nc-akten-dir-link { font-weight: 700; text-align: center; } .verzeichnisse { max-height: 3rem; display: flex; flex-direction: row-reverse; margin-right: 40px; } .metanotes-akten .tags { width: 72%; border: 1px solid var(--color-level-11); position: absolute; right: 40px; left: unset; margin-top: 25px; } .markencard .tags { width: 100%; border-top: 1px solid var(--color-level-5); background-color: var(--color-level-3); opacity: 0.65; margin-bottom: -2px; position: relative; } .taglist input:is(#txt) { min-width: unset !important; text-align: right; padding-right: 10px; } .taglist input::placeholder { text-align: right; } .taglist ul li:has(#txt) { display: flex; flex-direction: row-reverse; align-content: flex-end; align-items: stretch; justify-content: space-evenly; } .taglist { /* padding: 0px 3px 0px 3px; */ display: flex; overflow: hidden; text-overflow: ellipsis; } .taglist ul { display: flex; padding: 0px !important; flex-wrap: wrap; margin: auto;; /* li { */ /* display: inline-block; */ /* }; */ li:has(.tag-remove:hover), li:has(input:hover) { box-shadow: 0 0 0 2px #7AC3FF inset; transition: 50ms; }; .tag-remove:hover { font-weight: 900; font-size : var(--fontsize-mainlevel); color: antiquewhite; }; .tag-remove:not(.confirm):hover, li:has(.tag-remove:not(.confirm):hover), li:not(:has(.confirm)):hover { color: orangered; }; li:has(.tag-remove.confirm) { background-color: orangered; }; input { min-width: 100px; margin: initial; padding: initial; color: inherit; }; li:has(::placeholder ){ box-shadow: 0 0 0 2px #7AC3FF inset; } } .taglist { height: 30px; } .taglist li { width: fit-content; line-height: 20px; margin-left: 5px; padding: 3px 3px 5px 8px; font-size: 12px; /* line-height: var(--lineheight-mainlevel); */ /* background-color: rgb(222 224 216); */ /* display: flex; */ } .taglist li:hover { background-color: hsl(75, 11%, 91%); /* padding: 1px 3px 1px 3px; */ } .tag { font-size: 12px; line-height: var(--lineheight-below-2); color: var(--color-level-9); } .tag:hover { /* background-color: #eef1f4; */ background-color: hsl(75, 11%, 91%); } .tag-remove:hover { text-decoration: underline; } .tag-remove { /* content: 'close'; */ font-family: Material Symbols Outlined; /* line-height: var(--lineheight-mainlevel); */ font-size : var(--fontsize-mainlevel); font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48; float: right; margin-left: 5px; /* padding: 0px 5px; */ } .metanotes-akten .taglist { .tag-remove { display: none; }; li:has( #txt) { display: none; } } .ab-item.tag-inside, li:has(.tag.tag-inside) { background-color: var(--color-level-4); border: 1px solid var(--color-level-7) } .expandcontent { position: absolute; width: 50px; right: 0px; text-align: center; margin: auto; height: 26px; display: flex; ic-on { font-family: Material Symbols Outlined; font-size: 30px; width: unset !important; height: auto; margin: auto; line-height: var(--lineheight-above-8); font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48; float: left; } /* --------------------------------------------------------------------------------- IC-ON / AKTENBAUM //NOTE */ } .expandcontent:hover { background-color: var(--color-level-12); color: var(--color-level-1); /* height: 22px; */ height: 30px; top: 0; } .settings .expandcontent { position: unset !important; } .contentexpanded { background-color: mediumslateblue; color: var(--color-level-1); /* height: 22px; */ height: 30px; top: 0; width: 50px; } .contentexpanded:hover { background-color: var(--color-level-1); color: mediumslateblue; } .expanded { height: fit-content !important; min-height: 30px; transition: 200ms; } .filter-hide { display: none !important; } .aktenbaum { width: 74%; font-family: var(--fontfamily-default); position: relative; left: 20%; } .aktenbaum .ab-item:hover { background-color: var(--color-level-5); color: var(--color-level-1) !important; padding: 0px 5px; } .ab-inhalt-heading { font-family: derdicke; font-size: 1.2rem; font-weight: 900; padding: 3px 8px 5px 3px; border: 1px solid var(--color-level-12); } .ab-root { border: 0; text-transform: uppercase; font-weight: 900; background-color: var(--color-level-12); color: var(--color-level-1); padding: 20px 8px 0px; margin-bottom: 15px; } .ab-item { cursor: pointer; width: -webkit-fill-available; } /* ####### Aktenbaum Neues Grid ########## */ /* ============================= ! // 10/11/2024 - TAG: ALT! ================================ */ .ab-belt { margin-top: 0%; /* border-top: 2px solid rgb(26, 26, 26); font-weight: 900; text-align: left; */ margin-bottom: 0; display: flex; /* flex-direction: column; */ overflow: hidden; position: relative; font-size : var(--fontsize-mainlevel); /* font-family: PragmataPro Mono Liga; */ ic-on { margin-right: 0px; }; } div[data-ab-nesting="1"] { border-top: 2px solid var(--color-level-12); font-weight: 900; text-align: left; width: 100%; /* line-height: 1; */ margin-top: 10px; /* height: 20px; */ } div[data-ab-nesting="2"] { /* border-top: 1px dotted rgb(26, 26, 26); */ /* font-weight: 700; Bei font das serif auf 400 runter*/ font-weight: 400; text-align: left; /* width: -webkit-fill-available; */ overflow: hidden; /* height: 30px; */ /* line-height: 1; */ } div[data-ab-nesting="3"] { /* border-bottom: 1px dotted rgb(26, 26, 26); */ font-weight: 400; text-align: left; padding-left: 30px; overflow: hidden; /* height: 30px; */ /* line-height: 1; */ } /* div[data-ab-nesting="1"]:after { */ /* position: absolute; padding-left: .25ch; content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "; text-align: right; */ /* content: ''; */ /* } */ div[data-ab-nesting="2"]:after { position: absolute; padding-left: .25ch; content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "; /* content: "╳╳╳╳╳╳╳╳"; */ text-align: right; /* line-height: 1; */ } div[data-ab-nesting="3"]:after { position: absolute; padding-left: .25ch; content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "; text-align: right; /* line-height: 1; */ } .ab-nesting-2.ab-row-a { width: 25%; /* border-top: 1px dotted; */ } .ab-nesting-2.ab-row-c { /* border-top: 1px dotted; */ } .ab-nesting-3.ab-row-a { width: 25%; /* border-bottom: 1px dotted; */ } .aktenbaum-lastedit { float: right; font-weight: 300; font-size: 10px; font-family: 'ibm plex mono'; /* line-height: 1; */ } /* -------------------------------- ---------------------------------- aktenindex / papertree */ /* ══════════════════ Sidebar Papertree ═══════════════════════════ */ #meta-tabs-papertree { fieldset { border: 0 !important; box-shadow: none; } legend { display: none; } } .papertree-rootpicker { background-color: var(--color-level-1); border: 0; border-bottom: 1px solid rgb(95, 94, 94); font-weight: 900; width: 90%; } button#addRow { padding: unset !important; } button#addRow::before { padding: 0 !important; left: unset !important; } .row.group[data-nestnr="2"] { font-weight: 900 !important; border-top: 1px solid var(--color-level-12) !important; } .row.group[data-nestnr="3"] { font-weight: 700 !important; border-top: 0px !important; padding-left: 15px !important; } .row.group[data-nestnr="4"], .row.group[data-nestnr]:not(:is( [data-nestnr="2"],[data-nestnr="3"],[data-nestnr="4"] )) { font-weight: 700 !important; border-top: 0px !important; padding-left: 20px !important; } .page { border: 0px !important; } .page .row.group { margin-left: 0px !important; /* border: unset !important; */ margin-bottom: 5px !important; } .row input[type=text] { border: 0px !important; outline: 0px !important; text-overflow: ellipsis; margin-block: 0px !important; } .papertree-rootpicker { background-color: var(--color-level-12); color: var(--color-level-1); padding-top: 15px; width: 100%; border-bottom: 2px solid; margin-bottom: 15px; font-weight: 900; } .row button.addblock { position: absolute; outline: 0px !important; color: var(--color-level-12); margin-inline: 3px; display: inline-block; height: 15px; width: 15px; text-align: center; float: right; font-size: 12px; opacity: 0.4; background-color: transparent; margin: 1px; left: calc(var(--sidebar) - 35px); } button.addblock.add { left: calc(var(--sidebar) - 50px); } .Akten-Table-ShortIdDisp { padding: 2px 5px; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); border: 1px solid rgb(26, 26, 26); } .akten-table-freigaben { border: 1px solid var(--color-level-12); padding: 3px 5px 0px; width: 95%; } .akten-table-freigaben ul { display: flex; list-style-type: none; border-top: 1px solid var(--color-level-12); margin: 0px; padding: 2px; } .akten-table-freigaben li { /* border: 1px solid var(--color-level-4); */ padding: 2px 3px; margin: 1px 3px 1px; /* line-height: 1em; */ /* font-size: 12px; */ /* box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2); */ height: 1rem; } .akten-table-freigaben li:hover { box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); } .mediafiles { display: flex; position: relative; height: fit-content; max-height: 300px; width: 60%; } .mediafiles > img { display: block; max-height: 100px; max-width: 200px; margin: auto; float: left; } input, .textinput, input[type="text"] { color: var(--color-level-12); outline: 0px solid transparent; outline-offset: 0px; /* width: 100%; */ border: none; /* border-bottom: 2px solid var(--color-level-12); */ background-color: transparent; /* padding-left: 5px; */ margin-top: 2px; margin-bottom: 2px; } .unreadAkte { background-color: rgba(140,55,70,0.1) } .table-aktentitel { font-weight: 700 !important; } /* // ______🮥🮥🮥 LEFTSIDE: SIDEBAR ==> Parentwrapper ==> [LAYOUT LEFT] ===> Sidebar // ████████████████████████████████████████████████████████████████████████████████████████████████ // ________________________________________________________________________________________________ // *** [LAYOUT VIEWPORT] parentwrapper *** // *** [LAYOUT LEFT] sidebar | [LAYOUT MIDDLE] middlepart, akten | [LAYOUT RIGHT] Markenbar *** // *** This is Sidebar: ==> Topmenu, Logo, Papierbaum, UsersFooter, User Settings **/ /* .sidebar { width: auto; top: 0; padding: 8px; display: inline-block; } .sidebarleft { display: inline-block; position: absolute; top: 0; } */ .aktenmenu_sidebar { /* margin-top: 0px; */ /* left: -110px; */ position: fixed; transition: 100ms; /* bottom: var(--userfooterbar-height); */ bottom: 95px; width: var(--sidebar); /* margin-bottom: -500px; */ /* height: var(--aktenaktenmenu-sidebar-height); */ /* top: unset; */ } .aktenmenu_sidebar:hover { left: 0px; /* margin-top: -33px; */ } .sidebar-menu-icon { font-size : var( --fontsize-above-2); font-weight: 900; vertical-align: bottom; width: 27px; } .threeviews { display: flex; width: 100%; justify-content: space-between; button { width: 100%; } } .singlebutton { width: 100%; } .aktenroot { margin-top: 25px; background-color: var(--color-level-1); border: 1px solid var(--color-level-4); padding: 5px; max-width: var(--sidebar); width: 80%; } .aktenroot input { min-height: 120px; vertical-align: top; } .aktenmeta { margin-top: 25px; } .meta-leftside { /* top: -30px; */ top: 0px; height: 100%; position: relative; /* left: 30px; */ height: calc(100vh - var(--sidebar-footer-height) - var(--sidebar-top-height - 70px)); /* overflow: scroll; */ } /* .meta-tabs fieldset { box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; } */ .metafieldset { position: relative; background-color: var(--color-level-1); } .aktentoogle[type="checkbox"] { position: relative; width: 20px; height: 20px; z-index: 0; /* -webkit-appearance: none; */ } /* .papertree-rootpicker { background-color: transparent; color: rgb(26, 26, 26); border: 0; border-bottom: 2px solid; margin-bottom: 15px; font-weight: 900; } */ ::-webkit-input-placeholder { opacity: 1 !important; } /* .meta-tabs { padding: 5px; margin: 0; font-weight: 700; left: -13px; z-index: 999; } */ /* .meta-tabs:not(:has( > div:not(:empty))) { a { display: none } } */ body:not(:has(.akten-gateway.focus)) #meta-tabs-papertree { display: none; } /* todo .meta-tabs in der sidebar werden automatisch "leer" ======================================================================== ende .meta-tabs */ dialog { color: var(--color-level-10); } .modal { display: none; width: 100%; height: 100%; position: fixed; z-index: 5; background-color: rgba(222, 184, 135, 0.6); top: 0; left: 0; } .modal-dialog { /* position: absolute; */ position: fixed; /* right: calc(-0.5 * 100vw); */ left: calc(0.5* 100vw - 200px); /* top: calc(-0.5* 100vh + 600px); */ top: 5vh; z-index: 6; } .menu-bar { font-family: derdicke; font-size: 12px; } .markenmodalsytle { display: none; /* width: 40vw; */ margin: auto; position: fixed; top: 20vh; left: calc(100vw - var(--marken)); background-color: var(--color-level-1); border: 1px solid var(--color-level-12); z-index: 25; } .markenmodalsytle .window .window-pane { padding: 0; } .markensettings { width: 100%; height: 100%; /* height: calc(100% - 35px); */ display: none; top: 0; background: var(--color-level-4); position: absolute; overflow: scroll; /* transition: 200ms; */ } .markensettingshead { margin: auto; text-align: center; position: relative; top: 10px; margin-bottom: 15px; } .markensettingshead h1 { font-size: 30px !important; letter-spacing: -0.02em; margin-bottom: 0 !important; margin-top: 25px; padding: 0; line-height: 30px; } .settingsslider { transition: 100ms; /* height: 0px; */ } .markensettingsmenu { top: 0; position: absolute; } .markenfieldset { /* width: 60% !important; */ width: 90% !important; max-width: 500px; margin: auto !important; background-color: var(--color-level-3); border: 1px solid var(--color-level-5); font-size : var( --fontsize-above-1); } .freigabemarkenfieldset { /* width: 60% !important; */ width: 90% !important; max-width: 500px; margin: auto !important; position: relative; background-color: var(--color-level-3); border: 1px solid var(--color-level-5); } /* ╔═════════════════════════════════════════════════════════════════════════════════════════╗ ║ ║ ║ _______________ T O P M E N U :: S I D E B A R ______________________________ ║ ║ ║ ║ topmenu is named markenmenu (don't ask). ║ ║ ║ ╚═════════════════════════════════════════════════════════════════════════════════════════╝ */ /* topmenu = markenmenu */ #topmenu { position: fixed; top: 0px; z-index: 150; ic-on { display: none; } ; .escapeToHome { ic-on { display: block; margin-right: unset !important; width: unset !important; } ; } ; } div[onclick], li[onclick], span[onclick] { cursor: pointer; } /* menu-bar */ ul[role] { margin: 0; padding: 0; list-style: none; cursor: pointer; font-family: derdicke; font-weight: 400; font-size: 0.9rem; } ul[role="markenmenu-bar"] { display: flex; color: var(--color-level-10); background-color: var(--color-level-2); width: var(--sidebar); /* bottom: 100px; */ } ul[role="markenmenu-bar"]>[role="markenmenu-item"] { position: relative; padding: 8px 10px; z-index: 999; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); /* border: 1px solid black; */ display: flex; justify-content: space-between; } ul[role="menu"] { box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px; /* border: 1px solid var(--color-level-5); */ background-color: var(--color-level-3); z-index: 99; position: relative; bottom: 26px; /* left: 5px; */ transition: 100ms; width: 180px; } ul [role="menu-item"] { /* border: 1px solid var(--color-level-4); */ padding: 5px; z-index: 9999; transition: 100ms; } /* ul [role="menu-item"]:hover { background-color: var(--color-level-4); color: var(--color-level-10); padding: 5px; z-index: 99; } */ /* ul[role="markenmenu-bar"]>[role="markenmenu-item"]:focus, ul[role="markenmenu-bar"]>[role="markenmenu-item"]:focus-within, ul[role="markenmenu-bar"]>[role="markenmenu-item"]:hover { background: var(--color-level-4); color: var(--color-level-10); /* box-shadow: 1px 1px black; */ /* border-bottom: 3px solid var(--color-level-1); */ /* } */ ul[role="markenmenu-bar"]>[role="markenmenu-item"][aria-haspopup="false"] * { color: var(--color-level-10); background: inherit; text-decoration: none; } ul[role="markenmenu"] { position: relative; /* min-width: 200px; */ background: var(--color-level-2); color: var(--color-level-10); border: 1px solid var(--color-level-5); box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; } ul[role="markenmenu"]::before { content: ""; pointer-events: none; position: absolute; left: 28px; width: 2px; box-shadow: inset 1px 0 rgba(0, 0, 0, 0.15), inset -1px 0 var(--color-level-1); } [role="markenmenu-item"] ul[role="markenmenu"] { display: none; position: absolute; left: 0; top: 100%; z-index: 99; } ul[role="markenmenu"]>[role="markenmenu-item"]>a, ul[role="markenmenu"]>[role="markenmenu-item"]>button, ul[role="markenmenu"]>[role="markenmenu-item"][aria-haspopup="true"] { all: unset; position: relative; padding: 5px 20px; display: block; width: 100%; box-sizing: border-box; } /* ul[role="markenmenu"]>[role="markenmenu-item"]>a:hover, ul[role="markenmenu"]>[role="markenmenu-item"]>button:hover, ul[role="markenmenu"]>[role="markenmenu-item"][aria-haspopup="true"]:hover, ul[role="markenmenu"]>[role="markenmenu-item"]>a:focus, ul[role="markenmenu"]>[role="markenmenu-item"]>button:focus, ul[role="markenmenu"]>[role="markenmenu-item"][aria-haspopup="true"]:focus { background: var(--color-level-4); color: var(--color-level-11); outline: 1px solid var(--color-level-5); } */ /* selector ul dann kann der ul content moduliert werden */ ul [role="markenmenu-item"] { /* position: relative; */ } ul[role="markenmenu"] li { position: relative; } ul [role="markenmenu-item"]:focus>[role="markenmenu"], ul [role="markenmenu-item"]:focus-within>[role="markenmenu"] { display: block; } ul [role="markenmenu-item"].divider::after { content: ""; pointer-events: none; display: block; padding: 0; border-top: 1.5px solid var(--color-level-12); } /* ---------- Oris Modifications ---------- */ .modor { .markenmenu-child { min-width: 220px; /* background-color: var(--color-level-2) !important; */ border-radius: 6px !important; padding: 8px !important; box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2); animation-duration: 400ms; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); will-change: transform, opacity; font-size : var(--fontsize-mainlevel); line-height: 1; /* margin: 5px; */ display: block; backdrop-filter: blur(15px) !important; background: rgba(255, 255, 255, 0.4) !important; /* border-radius: 8px; */ box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(12.9px) !important; -webkit-backdrop-filter: blur(12.9px) !important; border: 1px solid rgb(85 82 82 / 30%) !important; } .markenmenu-child li { font-size : var(--fontsize-mainlevel); font-weight: 400; line-height: 1; /* color: var(--violet-11); */ border-radius: 6px; display: flex; align-items: center; min-height: 30px; height: fit-content; max-height: 60px; padding: 0 10px !important; position: relative; user-select: none; /* background-color: var(--color-level-2); */ /* margin: 5px; */ } .markenmenu-child li:hover { background-color: var(--violet-6); /* box-shadow: inset 0 0 0 1px color(display-p3 0.004 0.039 0.2/0.122),inset 0 1.5px 2px 0 color(display-p3 0 0 0/0.1),inset 0 1.5px 2px 0 color(display-p3 0 0 0/0.1); */ border: 1px solid var(--violet-7); } .markenmenu-seperator { height: 1px !important; min-height: 1px !important; /* background-color: var(--violet-6); */ /* background-color:rgb(85 82 82 / 30%) !important; */ /* border: 1px solid rgb(85 82 82 / 30%) !important; */ box-shadow: inset 0 0 0 1px color(display-p3 0.004 0.039 0.2/0.122),inset 0 1.5px 2px 0 color(display-p3 0 0 0/0.1),inset 0 1.5px 2px 0 color(display-p3 0 0 0/0.1); margin: 5px -10px; width: calc(100% + 20px); } } /* ┌────────────────────────────────────────────────────────────────────────────┐ │ ___ Badge Button _______ │ │ │ │ Simple design of "Notifications" with a Messages Counting Badge │ └────────────────────────────────────────────────────────────────────────────┘ */ .badge-button { position: absolute; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; color: #333333; background: #dddddd; border: none; outline: none; border-radius: 50%; /* float: right; */ right: 25px; top: 5px; } .badge-button:hover { cursor: pointer; } .badge-button:active { background: #cccccc; } .badge-button__badge { position: absolute; top: -10px; right: -10px; width: 15px; height: 15px; background: red; color: #ffffff; display: flex; justify-content: center; align-items: center; border-radius: 50%; } /* ######### ENDE Menu Marken Settings ENDE ######### */ /* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ ┃ ┃ ┃ ___ MarkenCards Grid - a bigger browser of cards _______________________ ┃ ┃ ┃ ┃ ==> add class .MarkenGrid to the Element #MarkenGrid ┃ ┃ ┃ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ */ .MarkenGrid { /* .parentwrapper { */ --marken: calc(100vw - var(--sidebar)); /* } */ background-color: var(--color-level-1); opacity: 1; display: block; position: absolute; z-index: 999; left: var(--sidebar); right: 0px; transition: 200ms; /* padding: 20px; */ /* margin-right: 10px !important; */ fragment { display: grid; grid-template-columns: repeat(auto-fill, 20em); margin: auto; gap: 10px; grid-auto-rows: minmax(var(--markenminheight), var(--markenmaxheight)); position: relative; z-index: 999; left: 2vw; top: 50px; }; .marken-kopf { position: absolute; top: -100px; width: 100%; background-color: var(--color-level-1); /* color: var(--color-level-1); */ /* box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; */ h1 { font-size: 45px; letter-spacing: -0.02em; margin-bottom: 0; line-height: 33px; padding: 5px; } }; .markencard { border-radius: 18px; --markenheight: 420px; --markenminheight: 420px; --markenmaxheight: 450px; --markenwidth: 250px; min-width: var(--markenwidth); height: var(--markenheight); /* max-height: calc(var(--markenheight) + 30px); */ overflow: hidden; margin: 0px; position: relative; z-index: 999; padding-bottom: 15px; /* background-color: #af86572f; */ background-color: #dde7d2; backdrop-filter: blur(15px); transition: 150ms; border: 0px; box-shadow: 0px 0px 12px 10px rgb(246 235 215 / 20%), rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;; /* box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; */ h3, .h3 { font-size: 28px; line-height: 30px; font-family: dasserif; font-weight: 900; margin: 5px 0px 2px 5px; }; .markencard_img { min-height: 75%; max-height: 76%; min-width: 150%; transition: 150ms; }; .markencard_img img { object-fit: cover; object-fit: cover; width: -webkit-fill-available; background-size: cover; }; .markencard_info { hr { opacity: 0.5; }; }; .markensnippet { display: none; }; }; .markencard:hover { /* height: calc(var(--markenheight) + 15px); */ position: relative; /* top: -15px; */ z-index: 1199; background-color: mediumslateblue !important; color: var(--color-level-1); border: 0px; .markencard_img { max-height: 0%; min-height: 0px; }; .markensnippet { display: block; color: var(--color-level-1); pre { color: antiquewhite; }; }; }; } /* ╔═════════════════════════════════════════════════════════════════════════════════════╗ ║ ║ ║ _______________ A K T E N S E T T I N G S ______________________________ ║ ║ ║ ║ ║ ║ ║ ╚═════════════════════════════════════════════════════════════════════════════════════╝ */ .aktensettings { width: 100%; height: 100%; /* height: calc(100% - 35px); */ top: 0; position: absolute; display: none; background: var(--color-level-3); color: var(--color-level-11); overflow: scroll; padding: 15px; } .aktensettingshead { font-weight: 900; color: var(--color-level-10); margin: auto; width: 100%; position: relative; text-align: center; } .aktensettingshead h1 { line-height: 45px; font-size: 45px; } .aktenkurzinfo { margin: auto; width: fit-content; margin-top: 50px; margin-bottom: 15px; max-width: 80%; } .aktensettings-tags { border: 1px solid var(--color-level-5); padding: 4px; ic-on { line-height: unset !important; height: unset !important; }; } .aktensettings fieldset { border: 2px solid var(--color-level-5); color: var(--color-level-11); min-height: fit-content; /* height: 100%; */ } .aktensettings h5 { padding: 0px 10px 0px 10px; } .aktenmappenzuweisung, .basisverzeichnis { /* width: 45%; */ margin-bottom: 25px; } .aktenfieldsets-eins { /* display: flex; */ max-width: 550px; margin: auto; /* justify-content: space-between; */ /* flex-direction: row; */ /* flex-wrap: wrap; */ } .aktendetails { width: 40%; font-family: monospace, serif; color: var(--color-level-10); box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset; background-color: var(--color-level-1); border: 1px solid var(--color-level-12); padding: 15px; } #neueakteheft { outline: 0; border: 0; background-color: var(--color-level-2); backdrop-filter: blur(10px); width: 600px; ic-on { font-size : var( --fontsize-above-6); margin: 0; }; .container-input-textfield { margin-top: 15px; /* padding: 15px; */ }; legend { font-size : var( --fontsize-above-1); color: var(--color-level-10); }; output { padding: 6px 12px; border-bottom: 1px solid var(--color-level-3); }; output:hover { background-color: var(--color-level-5); }; } /* .aktendetails .heading { text-align: center; } .aktendetails .line { display: flex; justify-content: space-between; } .divider::after { content: '.....................................................................................................................'; overflow: hidden; } */ /* .aktensettings input { width: 100%; background-color: transparent; outline: 0; border: 0px; color: var(--color-level-1); } .aktensettings input:focus-visible { outline: 0px; border: 0px; } */ .markenbarDrawerHandle { width: 20px; height: 100vh; /* visibility: hidden; */ position: absolute; right: 0px; top: 0px; z-index: 9999; writing-mode: vertical-lr; text-orientation: upright; text-align: center; span { display: none; text-orientation: upright; margin: auto; } } .markenbarDrawerHandle:hover { visibility: visible; background-color: var(--color-level-4); span { display: block; } } #markenscrollleiste { position: relative !important; } .markenbar { height: 100vh; width: var(--markenbar-width); left: calc(var(--sidebar-width) + var(--akten-width)); /* right: 15px; */ /* display: flex; */ position: absolute; overflow: hidden; transition: 100ms; } .markenbarswitch { width: 15px; height: 100vh; right: 0px; /* right: calc(var(--marken) - 10px); */ position: absolute; background-color: var(--color-level-3); /* opacity: 0.4; */ box-shadow: var(--box-shadow); } .markenbarswitch:hover { background-color: var(--color-level-4); /* content: 'minimize'; */ opacity: 1; } /* .markenbarswitchmini { width: 15px; height: 99vh; right: 15px; position: absolute; display: none; background-color: #c72f2f; } .markenbarswitchmini:hover { background-color: #c72f2f; } */ /* buttons */ button { /* display: ; */ /* min-width: 50px; */ min-height: 20px; background-color: var(--menu-bgcolor); color: var(--color-level-10); /* box-shadow: var(--box-shadow); */ font-family: derdicke; font-weight: 700; font-size : var(--fontsize-mainlevel); } /* button:active { */ /* background-color: var(--input-secondary); */ /* box-shadow: 1px 1px gray; */ /* color: var(--input-primary); */ /* } */ .button-sidebar { color: var(--color-level-12); position: relative; border: 1px solid var(--color-level-12); opacity: 1; font-weight: 700; padding: 4px 8px; box-shadow: 1px 1px var(--color-level-12); width: fit-content; background-color: transparent; cursor: pointer; } .button-sidebar:hover { color: var(--color-level-1); background-color: var(--color-level-12); transition: 100ms; } .button-sidebar:active { top: 1px; } .button-sidebar:active:after { background-color: greenyellow; } /* ****** MENU BAR in SIDEBAR ****** */ /* TOOGLE NEU */ .btn { display: inline-block !important; margin-bottom: 0; text-align: center; cursor: pointer; background-image: none; /* border: 1px solid transparent; */ white-space: nowrap; /* padding: 3px 16px; */ width: 70px; font-family: derdicke; font-size: 13px; font-weight: 700; border-radius: 0; min-height: 30px !important; padding-bottom: 7px; } .userrow { height: 50vh; overflow-y: scroll; /* width: 95%; */ } .btn-frei { background: darkgrey; border: 1px solid rgba(100, 100, 100, 0.6); color: #464646; opacity: 0.5; font-size: 10px; } .permissionset { border: 1px solid var(--color-level-3); background: var(--color-level-1); opacity: 1; } .btn-default-toggle-ghost, .btn-default-toggle-ghost:focus { background: darkgrey; /* border: 1px solid rgba(100, 100, 100, 0.6); */ color: #464646; outline: none; text-align: center; font-size : var(--fontsize-mainlevel); line-height: 34px; position: relative; float: left; opacity: 0.5; box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset; } .btn-group [type="radio"] { display: none; } [type="radio"]:checked+.btn-default-toggle-ghost { background: var(--color-level-1); opacity: 1; } [type="radio"]:checked+.btn-default-toggle-ghost:after { content: ''; position: absolute; top: 0px; height: 5px; background: black; left: 0px; right: 0px; } .btn-default-toggle-ghost+[type="radio"]+.btn-default-toggle-ghost{ border-left:0px;/*for removing the extra border between the buttons*/ } /* ENDE TOOGLE NEU */ .Logo-und-Menu { position: fixed; top: 16px; /* opacity: 0.5; */ z-index: 150; /* background-color: var(--color-level-3); */ } .Logo-und-Menu:hover, .Logo-und-Menu:focus, .Logo-und-Menu:focus-within { opacity: 1; } .akten-hauptvermerk { margin-top: 25px; } /* body::-webkit-scrollbar, *::-webkit-scrollbar{ content: "button"; width: 0px; height: 0px; opacity: 0.5; padding: 5px 0; */ /* background-color: red; */ /* } */ /* body::-webkit-scrollbar-track, *::-webkit-scrollbar-track { background-color: var(--color-level-3); border: 1px solid var(--color-level-4); } */ /* body::-webkit-scrollbar-thumb, *::-webkit-scrollbar-thumb { background-color: var(--color-level-4); opacity: 0.5; } */ @media (min-width: 951px) { #mobile-ui { display: none !important; } } @media (max-width: 950px) { .parentwrapper { display: none !important; } } .treefieldset { background-color: var(--color-level-1); } .sidebartab-papertree { height: 100%; } legend { padding: 0px 10px 0px 10px !important; font-weight: 900 !important; font-size: 13px; } fieldset h5 { font-size: 13px; font-weight: 900; } .sidebar-tabs-buttons-group { /* transform: rotate(90deg); */ position: absolute; /* top: 215px; */ /* left: 120px; */ top: 95px; left: 5px; z-index: 5; } button.sidebar-tab-button { border: 1px solid lightgray; -webkit-font-smoothing: antialiased; font-size: 12px; } .aktenaufschlag { box-shadow: none; } .sekretariattopbar { height: 35px; margin-bottom: 20px; border-bottom: 1px solid; /* overflow: visible; */ background: rgb(26, 26, 26); } .sekretariattopbar-obj { position: absolute; top: -8px; height: 100vh; width: var(--sidebar-width); overflow: visible !important; z-index: 999; } /* .createnewAkte { position: relative; top: 350px; /* background-color: var(--color-level-1); */ /* padding: 5px; margin: 0; font-weight: 700; } */ .createnewAkte, .createnewMappe { display: none; } .createnewAkte fieldset, .createnewMappe fieldset { background-color: var(--color-level-1); } .createnewAkte form, .createnewMappe form { font-size: 12px; } .userfooterbar { width: var(--sidebar-width); bottom: 0px; position: fixed; border-radius: 1px 4px 4px 4px; height: var(--sidebar-footer-height); z-index: 15; background-color: var(--color-level-12); color: var(--color-level-1); display: flex; justify-content: space-between; align-items: flex-end; box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px; } .showusersavatar { width: fit-content; } /* wir sollten mehr splitten */ /* ┌─────────────────────────────────────────────────────────────────────────────┐ │ / \* USER FOOTER MENU │ │ / \* . userfootermenu-parent │ │ / \* │ │ / \* │ └─────────────────────────────────────────────────────────────────────────────┘ */ /* ______________ appstyle.css : 2025/Jun/03 ______________________________________________________________________________ */ /* ____________________________________________________________________________________________________ +++ USERSETTINGS [ 05:33 | 2025/Aug/08 ] +++ +++ +++ */ .sidebarleft-workspace__inlineLabels > label-in { display: inline-flex; } /* ??? not found [ 16:28 | 2025/Jul/29 ] */ .userfootermenu-parent { width: fit-content !important; } .userfootersettings { /* [ adding bg --fieldset-bg-dark | -light 16:28 | 2025/Jul/29 ] */ /* --fieldset-bg-light : var(--GrayCold-light-a2); */ /* --fieldset-bg-dark : var(--GrayCold-dark-a2); */ display: none; height: 0px; color: var(--color-level-1); overflow: scroll; } .userfootersettings fieldset { background-color: var(--color-level-2); /* .darkmode & { */ /* background-color: var(--fieldset-bg-dark); */ /* }; */ /* background-color: var(--color-level-3); */ border: 1px solid var(--color-level-5); color: var(--color-level-11); min-height: fit-content; height: 100%; font-size : var( --fontsize-above-1); overflow: scroll; padding: 8px; } .userfootersettings-toggledon { display: block; position: fixed; bottom: 0px; /* top: -0px; */ z-index: 9; background: var(--color-level-4); color: var(--color-level-11); width: var(--sidebar-width); padding: 20px 8px; left: 0px; height: 100%; /* height: 0px; */ transition: 150ms; overflow: scroll; } ul.userfootermenu-parent, ul.userfootermenu-child { background-color: var(--color-level-12) !important; color: var(--color-level-1) !important; } ul.userfootermenu-parent:hover, ul.userfootermenu-child:hover { background-color: var(--color-level-1) !important; color: var(--color-level-12) !important; } .ab-belt small { font-size: 10px; font-family: 'ibm plex mono'; padding-left: 5px; opacity: 1; font-weight: 400; float: right; backdrop-filter: blur(25px); position: relative; z-index: 999; } .markencard:focus, .metanotes-mappentitel:focus { /* background-color: rgba(206, 252, 247, 0.545); */ color: var(--color-level-12); } /* ———————————————————————————————————————————————————————————————————— ————— Styles for Toogleswitch des ThemeSwitcher (hell/dunkel) ————— */ :root { --toggle-light: hsl(230, 22%, 74%); --toggle-dark: linear gradient hsl(210, 78%, 56%) to hsl(146, 68%, 55%); } /* The switch - the box around the slider */ .switch { position: relative; display: inline-block; width: 60px; height: 30px; } /* Hide default html checkbox */ .switch input { opacity: 0; } /* The slider */ .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--toggle-light); transition: 0.4s; } .slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 32px; bottom: 5px; background-color: #fff; transition: 0.4s; } input:checked + .slider { background: linear-gradient(90grad, hsl(210, 78%, 56%), hsl(146, 68%, 55%)); } input:checked + .slider:before { transform: translateX(-24px); } .slider, .round { border-radius: 34px; } .round::before { border-radius: 50%; } input:checked + .round::before { background-color: hsl(230, 17%, 14%); } /* Theme */ .dark { --main-background: hsl(230, 17%, 14%); --main-font: white; } .light { --main-background: white; --main-font: hsl(230, 17%, 14%); } .toggle-switch { display: flex; flex-direction: row; justify-content: center; align-items: center; } .toggle-switch p { padding: 1em; } /* ===== __E_N_D_E__ __ToogleSwitch__ >>>>>>>>>>>>>>>>>>>>>> /* ============================================================================================ */ /* .UserEditorReduziertOn is defined in knowteseditor.css */ /* ___________________________________________________________________________________________ */ details[open] { margin-bottom: 15px; background-color: var(--color-level-1); width: 100%; min-height: min-content; } details[open] summary:before { font-family: 'Material Symbols Outlined'; content: 'keyboard_arrow_down'; width: 30px; } details summary:before { font-family: 'Material Symbols Outlined'; content: 'keyboard_arrow_right'; width: 30px; margin-bottom: 15px; } details summary, summary { margin-bottom: 15px; width: 100%; } details summary:hover { background-color: honeydew; color: var(--base-shade-95); } .removedokument { /* display: flex; */ position: relative; top: 15px; padding: 5px; min-width: 33vw; background-color: var(--color-level-1); z-index: 9999; } .removedokPreconfirm { position: relative; display: flex; justify-content: space-around; background-color: lightpink; width: 90px; height: 30px; color: var(--color-level-12); z-index: 999; font-size: 12px; opacity: 1; span { font-size : var(--fontsize-mainlevel); font-weight: 400; padding: 6px 2px !important; } .material-symbols-outlined { line-height: 1rem; font-size : var( --fontsize-above-2); } } .removedokPreconfirm:hover { background-color: red; } .confirmremove { display: none; position: absolute; bottom: 1px; z-index: 999; width: 100%; } .confirmremove button { background-color: red; position: relative; height: 30px; width: 100%; opacity: 1; } .cancelRemove { background-color: lightblue !important; color: var(--color-level-12) !important; opacity: 1 !important; border: 1px solid rga(54,54,54,0.8); width: 100% !important; } /* ______________________________ A K T E N T A B S _____ */ #aktentabs { height: 100vh; width: 70px; position: fixed; z-index: 99; } .aktentabs-bande { height: 100vh; width: 5px; position: fixed; opacity: 0.9; left: 245px; z-index: 99999; filter: drop-shadow(gray 2px 4px 3px); top: 0px; background-color: rgba(245, 255, 250, 0.84); } .aktentab { margin-top: 10px; width: 70px; height: 30px; transform: rotate(-90deg); background-color: rgb(229, 214, 195); font-family: var(--fontfamily-default); position: absolute; z-index: 999; opacity: 0.8; filter: drop-shadow(3px 1px 5px black); text-align: center; padding: 5px; margin-top: 0px; border: 1px solid rgba(59, 59, 59, 0.324); /* margin-top: 10px; width: 70px; height: 30px; transform: rotate(-90deg); background-color: rgb(229, 214, 195); font-family: var(--fontfamily-default); position: absolute; z-index: 999; opacity: 0.7; filter: drop-shadow(3px 1px 5px black); text-align: center; padding: 5px; margin-top: 0px; border: 1px solid rgba(59, 59, 59, 0.524); */ } #aktentab-1 { top: 20px; } #aktentab-2 { top: 90px; } #aktentab-3 { top: 160px; } #aktentab-4 { top: 230px; } #aktentab-5 { top: 300px; } #aktentab-6 { top: 370px; } #aktentab-7 { top: 440px; } #aktentab-8 { top: 510px; } #aktentab-1, #aktentab-2, #aktentab-3, #aktentab-4, #aktentab-5, #aktentab-6, #aktentab-7, #aktentab-8 { position: fixed; left: 230px; } .opend.aktentab, .aktentab:hover { background-color: #f5fffad6 !important; filter: none; z-index: 99999; border-top: 0px; height: 30px; box-shadow: 3px 4px 8px 1px gray; } pt-n1.opend { background-color: #f5fffad6 !important; width: 104%; position: relative; opacity: 0.8; /* box-shadow: 1px 1px 2px 0px gray; */ z-index: 999; filter: drop-shadow(gray -1px 1px 1px); } .opendpt { background-color: #f5fffad6 !important; z-index: 9999999; } /* ______________________________ O N / O F F C L A S S S W I T C H E R _____ */ /* Für functionen wie toogleDisplay(OnOff) ... [...]classList.replace('invisible", 'visible') */ .invisible, .diskus-main { display: block; /* opacity: 0; */ transition: 200ms; } .visible { display: block; opacity: 1; transition: 200ms; } /* ___ENDE ENDE O N / O F F C L A S S S W I T C H E R _________________________ */ .button.close { width: 30px; height: 30px; } .backdrop { display: none; height: 100vh; width: 100vw; position: fixed; z-index: 99; backdrop-filter: blur(4px); } .backdrop.active { display: block !important; } /* button.button { background-color: var(--color-level-2); color: var(--color-level-10); padding: 6px 12px; border: 1px solid var(--color-level-4); border-radius: 3px; font-weight: 700; font-size: 13px; opacity: 1; } button.button:hover, button.button:active, button.button:focus { background-color: var(--color-level-4); border: 1px solid var(--color-level-6); } */ /* ╔════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════╗ */ /* | _____ PasteBin Modal Pastebums (Riss _____ | */ /* dialog#quickePastebin, iframe#quickePastebin-iframe { */ /* ____________________________________________________________________________________________________ WIRD JETZT FÜR COLORCODES MISSBRAUCHT! | Name ----------[ 2025 / Mär / 08 ] ____________________________________________________________________________________________________ */ /* border: 1px solid var(--color-level-4); */ /* outline: 0px; */ /* width: 100%; */ /* max-width: 650px; */ /* height: 100%; */ /* max-height: 550px; */ /* padding: 8px; */ /* background-color: var(--color-level-3); */ /* } */ /* ╔═══════════════════════════════════════════════════════════════════════════════════════════╗ ║ Styles of ** D O K U M E N T : S O C K E T ** Framer/Viewer for /n/ ║ ╚═══════════════════════════════════════════════════════════════════════════════════════════╝ ----- Replacing Winbox :-) ------ */ /* SECTION-WRAPPER ---> @CONTAINER STYLES */ /* after .parentwrapper */ .socketwrapper { --index: var(--index-socket); z-index: var(--index); display: block; /* position: fixed; */ /* height: 100vh; */ max-height: 100vh; max-width: 100vw; --sidebar: 250px; --marken: 380px; --akten: calc(100vw - calc(var(--sidebar) + var(--marken))); --header: 50px; --togglebar: 25px; --editor-small: 0vh; --editor-big: calc(100vh - var(--header) - var(--togglebar)); --editor-medium: 50vh; --editor: var(--editor-small); --top-editor: calc(var(--header) + var(--togglebar) + calc(100vh - var(--editor))); --top-toggler:calc(var(--header) + calc(100vh - var(--editor))); --dokSocket-Footer-height: 35px; --docFooter-Bottom: -35px; --docSocket-height: calc(100vh - var(--dokSocket-Footer-height)); --dokSocket-width: calc(100vw - var(--marken) - var(--sidebar) + 10px); --docSocket-left: calc(var(--sidebar) + 2px); --docSocket-footer-down: calc(var(--dokSocket-Footer-height) * -1); --min: none; --max: inline; --modus-dok-off: var(--min); --modus-dok-on: var(--max); --keep-footer: visible } /* ╔════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════╗ */ /* ║ _______ P A R E N T - container: /* ║ ║ */ /* style="display: block; z-index: 100; left: calc(var(--sidebar)); position: fixed; background-color: var(--tint-level-3);" */ .container-enabled-on { /* --index: var(--index-socket); */ /* z-index: var(--index); */ left: var(--docSocket-left); top: 0; width: var(--dokSocket-width); height: var(--docSocket-height); bottom: var(--docSocket-height); transition: 250ms; border: 0; display: block; position: fixed; /* z-index: var(--index-socket, 1); */ transition: 350ms; bottom: var(--dokSocket-Footer-height); } .container-enabled-on > .socket-child:is(#dokumentsocket-footer) { position: absolute; display: flex; flex-flow: row; bottom: var(--docFooter-Bottom); height: var(--dokSocket-Footer-height); width: var(--dokSocket-width); top: 100%; left: 0; background-color: var(--color-level-3); border-top: 1px solid var(--color-level-5); text-align: right; box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; z-index: 1; transition: 250ms; ul { display: inline-flex; }; li :is(ic-on, span) { height: 46px; line-height: 30px; }; } /* +----------------------------------------------------------------+ */ /* ╔════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════╗ */ /* | _____ iframes _____ | */ /* | | */ /* | [name=slot-|one|wo|three] | */ /* | | */ /* | #dokumentsocket-]frame|slot-one | */ /* | |slot-two ... | */ /* | | */ /* ╔════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════╗ */ /* +---------------------------------------+ */ /* | hide, show. |. split into | */ /* +---------------------------------------+ */ .container-enabled-on > .socket-child:is(iframe) { display: block; position: absolute; /* z-index: var(--z-index); */ /* left: var(--docSocket-left); */ width: var(--dokSocket-width); border: 0; height: var(--docSocket-height); } .container-enabled-on.off { /* display: none; */ transition: 350ms; overflow: hidden; /* > .socket-child { */ /* height: 0px; */ /* } */ } .socketon .container-enabled-on:not(.off) { > .socket-child { z-index: 111111; }; /* > .socket-child:is(#dokumentsocket-footer) { */ /* } */ } .socketon .container-enabled-on.off { transition: 350ms; height: var(--dokSocket-Footer-height); bottom: var(--docSocket-footer-down); overflow: hidden; /* width: fit-content; */ /* height: fit-content; */ /* */ > #dokumentsocket-footer { z-index: 200000; position: relative }; /* > .socket-child:is(:not(#dokumentsocket-footer)) { */ /* } */ } .container-enabled-on:is(#riss-socket-directory):not(.off):has(.rissItem) { position: relative; width: auto; z-index: 100; /* top: var(--dokSocket-Footer-height); */ /* > .socket-child { */ /* }; */ /* > .socket-child:is(#dokumentsocket-footer) { */ /* } */ } /* ╔══════════════════════════════════════════╗ */ /* ║ ║ */ /* ║ @riss-socket-directory ║ */ /* ║ ║ */ .container-enabled-fix { display: block; position: fixed; top: 0px; left: var(--sidebar); height: 0px; overflow: hidden; transition: 250ms; } .container-enabled-fix[data-active]{ z-index: var(--index-parent); height: 100vh; width: calc(100vw - var(--sidebar)); overflow-y: scroll; transition: 250ms; overflow: visible; /* > .socket-child[id='riss-directory-target'] { */ /* } */ } .container-enabled-fix.with-many-items > .socket-child { position: absolute; background-color: var(--color-level-2); } .container-enabled-fix > .socket-child:is(:target, :focus, :active) { display: block; transition: 250ms; z-index: 2000; } /* ╚══════════════════════════════════════════╝ */ /*+||-\---------+||---------------------------+||+||+||-----+-----------------------------------------------------------------------------+ */ /* || |:__ TASK ||:__ TOOL |:__ ICON_[-bar.]| || || ||______ footer: I C O N B A R a] > [[ ic-on ]] href, | */ /*+||-----------+||-----------\---------------+||+||+||\---+-----------------------------------------------------------------------------+ */ .dokumentsocket-iconbar { text-align: right; position: absolute; right: 0px; } .dokumentsocket-iconbar a { cursor: pointer; } .dokumentsocket-iconbar a:hover { border-bottom: 2px solid var(--color-level-10); ic-on { font-variation-settings: 'FILL' 1, 'wght' 600; }; } #dokumentsocket:not(:has(.wb-extra)) .socket-child a.doksocket-function-caller:has(> ic-on) { /* color: orangered !important; */ opacity: 0.2; } /* ______________________________________________________________________________________________ */ /* +++ MOVED TO STATIC PRINT-IT-OUT.CSS Print Page (aprint) */ .MovedTo static-print-it-out { .PagePrint { background-color: #ffffff; width: 100%; height: fit-content; /* padding: 25mm; */ --page-width: 720px; --page-height: calc(calc(var(--page-width) / 210) * 297); /* --page-height: 141%; */ --page-margin-top: 15px; --page-border: 1px solid var(--color-level-4); --page-color: var(--color-level-2); } .pageblatt { display: block; position: relative; width: var(--page-width); /* height: var(--page-height); */ /* padding: 15px 25px; */ /* position: relative; */ /* margin-top: var(--page-margin-top); */ /* left: 50%; transform: translateX(-50%); */ /* margin-left: 5mm; margin-right: 5mm; margin-top: 5mm; margin-bottom: 5mm; */ background-color: var(--color-level-2); padding: 20px; /* border: var(--page-border); */ } .singlepage { height: var(--page-height); } .deckblatt { display: block; position: relative; /*width: var(--page-width); height: var(--page-height); position: relative; left: 50%; transform: translateX(-50%); padding: 15px 25px; background-color: var(--color-level-2); border: var(--page-border); */ /* margin-top: unset !important; */ deckblatt-titel { position: absolute; width: 75%; top: 25%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: var(--color-level-10); font-family: 'derdicke'; font-weight: 900; font-size: 60px; line-height: 60px; } } .printdown { /* width: var(--page-width) !important; */ /* position: relative; */ /* left: 50%; */ /* transform: translateX(-50%); */ /* background-color: var(--color-level-2); */ /* padding: 15px 25px; */ /* margin-top: var(--page-margin-top); */ /* border: var(--page-border); */ h1 { border-bottom: 3px solid var(--color-level-10); }; } } .PagePrint pre > code { white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; } .PagePrint pre { padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; background-color: #f7f7f7; border-radius: 3px; & code { font-family: var(--fontfamily-editor-default) !important; } } @media print { /* .PagePrint { --page-width: 100vw !important; --page-margin-top: 0px !important; --page-border: 0px !important; } */ @page { size: A4 portrait; } } #deprecdokumentsocket:has( #dokumentsocket-frame:is([name='slot-one' i]) ){ height: var(--docSocket-height); width: var(--dokSocket-width); left: var(--docSocket-left); a:has( *[name='slot-one' i]) { color: var(--color-shade-mslateblue-100); > ic-on { font-variation-settings: 'FILL' 1; } } } #deprecdokumentsocket:has( #dokumentsocket-frame:is([name='slot-two' i]) ){ a:has( *[name='slot-two' i]) { color: var(--color-shade-mslateblue-100); > ic-on { font-variation-settings: 'FILL' 1; } } } #deprecdokumentsocket:has( #dokumentsocket-frame:is([name='slot-three' i]) ){ a:has( *[name='slot-three' i]) { color: var(--color-shade-mslateblue-100); > ic-on { font-variation-settings: 'FILL' 1; } } } /* | _________________deprecated settings for dok.socket || ende | */ #body-backstorage { display: none; } dialog:is(#riss-dialog):not([open]) { opacity: 0 !important; transition: 100ms; } dialog:is(#riss-dialog):is([open]) { opacity: 1.0; transition: 100ms; } /* ╔═══════════════════════════════════════════════════════════════════════════════════════════╗ */ /* ║ INTEGRATION OF ** D I S . K N O W T E S ** COMMENTING API (Nextcloud Talk) ║ */ /* ╚═══════════════════════════════════════════════════════════════════════════════════════════╝ */ .commentsPhantomator { /* display: none; */ /* width: var(--marken); */ width: 400px; height: 85vh; top: 5vh; right: 5vw; position: fixed; z-index: 955; padding: 10px; box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px; border-radius: 5px; background-color: hsl(248.51deg 100% 87.66%); } .hauntingPhantom { overflow: scroll; } .sekretariatSchnatter { height: 85vh; overflow: scroll; } /* ic-on { font-family: Material Symbols Outlined; font-size: 30px; width: 30px; height: 46px; margin-right: 15px; line-height: 30px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48; display: block; float: inline-start; } */ #usernotifications { opacity: 0; width: 30px; height: 30px; /* font-size: 24px; */ color: white; position: absolute; left: 60px; top: 0px; ic-on { font-variation-settings: 'FILL' 1; }; .ies-light-round { width: 180px; background: url(/resources/assets/round.png), #000000; height: 95px; position: absolute; background-size: cover; overflow: hidden; background-blend-mode: screen; /* mix-blend-mode: screen; */ /* z-index: 999999; */ /* bottom: -80px; */ left: -80px; background-position-y: -35px; }; } .notificationattention { opacity: 1 !important; transition: 800ms; } /* === key:Matrix Hint Panel ==================_0 */ .keyMatrixHintPanel { position: absolute; z-index: 55559; } body { --interface: { container-name: darkbody; }} @container darkbody style(--theme: darkmode) { div { background-color: var(--color-level-9); } /* * {--color-level-2: pink} */ } /* __________________________________ [ dialog to create neue doks ] __________________________________ */ .container-input-textfield:has( :is(input, textarea):disabled) { display: none !important; } textarea.input--textarea:not(:disabled) { height: auto; min-height: 200px !important; min-width: 300px !important; transition: 250; } /* #assignHeft[data-mappenid].inputsearch.input--textfield { */ /* } */