/*⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ ⣿⣿⣿⣿⠟⠉⠁⠀⠀⠀⠀⠈⠉⠻⣿⣿⠛⠛⠛⠛⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡏⠉⠉⠉⢹⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠉⠉⠉⠉⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠉⠉⠉⠉⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ ⣿⣿⣿⡏⠀⠀⠀⠀⣤⣄⠀⠀⠀⠀⢹⣿⠀⠀⠀⠀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡇⠀⠀⠀⢸⣿⣿⣿⡿⠿⠿⠿⣿⣿⣿⣿⠀⠀⠀⠀⣿⠿⠿⢿⣿⣿⣿⣿⣿⣿⠿⠿⠿⢿⣿⣿⣿⣿⣿⣿⡿⠿⠿⠿⢿⣿⣿⣿⠀⠀⠀⠀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ ⣿⣿⣿⣇⠀⠀⠀⠀⠉⠙⠛⠛⠿⣿⣿⠀⠀⠀⠀⠀⠀⢠⡀⠀⠀⠀⢿⣿⠇⠀⠀⠀⡄⠀⠀⠀⢸⣿⠋⠁⠀⠀⠀⠀⠀⠙⢿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠈⠻⣿⠟⠉⠀⠀⠀⠀⠀⠈⠙⣿⣿⠛⠁⠀⠀⠀⠀⠀⠉⠻⣿⠀⠀⠀⠀⡿⠁⠀⠀⢀⣴⣿⣿⣿⣿⣿⣿⣿⣿ ⣿⣿⣿⣿⣦⡀⠀⠀⠀⠀⠀⠀⠀⠈⠻⣶⠀⠀⠀⠀⣶⣾⣧⠀⠀⠀⠘⡿⠀⠀⠀⢠⡇⠀⠀⠀⢸⠃⠀⠀⠀⢴⣶⠄⠀⠀⠈⢿⠀⠀⠀⠀⣴⣶⡀⠀⠀⠀⠛⠀⠀⠀⢠⣶⣦⠀⠀⠀⠘⠃⠀⠀⠀⣴⣶⡆⠀⠀⠀⢹⠀⠀⠀⠀⠀⠀⠀⣰⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿ ⣿⣿⣿⠿⠿⠿⠿⢶⣦⣤⡄⠀⠀⠀⠀⣿⠀⠀⠀⠀⣿⣿⣿⣇⠀⠀⠀⠁⠀⠀⠀⣾⡇⠀⠀⠀⢸⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⠀⠀⠀⠸⣿⣿⡇⠀⠀⠀⠀⠀⠀⠀⢸⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⣿⣿⡇⠀⠀⠀⢸⠀⠀⠀⠀⠀⠀⠀⠘⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿ ⣿⣿⣿⡄⠀⠀⠀⠀⠙⠛⠁⠀⠀⠀⢀⣿⠀⠀⠀⠀⠛⢻⣿⣿⡄⠀⠀⠀⠀⠀⣼⣿⡇⠀⠀⠀⢸⡆⠀⠀⠀⠻⠿⠋⠉⠉⠉⣿⠀⠀⠀⠀⠙⠛⠀⠀⠀⠀⣴⠀⠀⠀⠈⠿⠏⠀⠀⠀⢠⣆⠀⠀⠀⠹⠿⠃⠀⠀⠀⣼⠀⠀⠀⠀⣤⠀⠀⠀⠈⢿⣿⣿⣿⣿⣿⣿⣿⣿ ⣿⣿⣿⣿⣦⣀⣀⠀⠀⠀⠀⢀⣀⣴⣿⣿⣆⡀⠀⠀⠀⢸⣿⣿⡿⠀⠀⠀⠀⢰⣿⣿⣇⣀⣀⣀⣸⣿⣦⣀⡀⠀⠀⠀⢀⣠⣾⣿⣀⣀⣀⣀⡀⠀⠀⠀⣀⣴⣿⣷⣄⡀⠀⠀⠀⢀⣀⣴⣿⣿⣦⣀⡀⠀⠀⠀⢀⣠⣾⣿⣀⣀⣀⣀⣿⣧⣀⣀⣀⣈⣻⣿⣿⣿⣿⣿⣿⣿ ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠀⠀⠀⠀⠀⣠⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣶⣶⣶⣶⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ ╔════════════════════════════════════════════════════════════════════════════════════════════════╗ ║ KNOWTES STYLEBOOK ║ ║ ║ ║ The Stylebook consists of this [1] stylebook.css ║ ║ [2] stylebook.js ║ ║ ║ ║ And come with addons of ==> [A] iconrouter.js ║ ║ [B] ║ ║ ║ ╚════════════════════════════════════════════════════════════════════════════════════════════════╝ ╭───────────────────────────────────────────╮ ╭──────────────────────────────────────────────────╮ UPDATED: 2025.Aug.18 :: 0R1 NOTES: ╰───────────────────────────────────────────╯ ╰──────────────────────────────────────────────────╯*/ @import url('/resources/fontsload.css'); @import url('/resources/assets/svg-knowtes/svgdatavariables.css'); /* ___________________ >>> B A S E S H A D E S << :: C O L O R S C H E M E S ___________________ */ /* *** *** These VARIABLES(!) of shader colorschemes are collected here for DEVELEOPMENT *** and are outside of any Theme-Styling. *** *** ==>> TO USE THE COLORSCHEMES PLEASE USE THE VARIABLE NAMES DEFINED AT #THEMES *** AND END WITH LEVEL... *** */ :root { --unchecked: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%0A%3C!--%20Uploaded%20to%3A%20SVG%20Repo%2C%20www.svgrepo.com%2C%20Generator%3A%20SVG%20Repo%20Mixer%20Tools%20--%3E%0A%3Csvg%20width%3D%22800px%22%20height%3D%22800px%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cg%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20fill%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%2F%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M4%203h16a1%201%200%200%201%201%201v16a1%201%200%200%201-1%201H4a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1zm1%202v14h14V5H5z%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E'); --checked: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!--%20Uploaded%20to%3A%20SVG%20Repo%2C%20www.svgrepo.com%2C%20Generator%3A%20SVG%20Repo%20Mixer%20Tools%20--%3E%0A%3Csvg%20fill%3D%22%23000000%22%20width%3D%22800px%22%20height%3D%22800px%22%20viewBox%3D%220%200%201920%201920%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M1743.858%20267.012%20710.747%201300.124%20176.005%20765.382%200%20941.387l710.747%20710.871%201209.24-1209.116z%22%20fill-rule%3D%22evenodd%22%2F%3E%0A%3C%2Fsvg%3E'); --base-shade-00 : rgb(250, 249, 246); --base-shade-10 : rgb(245, 244, 238); --base-shade-20 : rgb(220, 219, 214); --base-shade-30 : #c4c3be; --base-shade-40 : #abaaa6; --base-shade-50 : rgb(147, 146, 142); --base-shade-60 : rgb(122, 122, 119); --base-shade-70 : rgb(98, 97, 95); --base-shade-80 : rgb(73, 73, 71); --base-shade-90 : rgb(49, 48, 47); --base-shade-95 : rgb(36, 36, 37); --base-shade-100 : rgb(24, 24, 23); --base-shade-white : #ffffff; --base-shade-black : #000000; --alphabase-shader-00 : rgba(250, 249, 246,var(--alpha)); --alphabase-shader-10 : rgba(245, 244, 238,var(--alpha)); --alphabase-shader-20 : rgba(220, 219, 214,var(--alpha)); --alphabase-shader-50 : rgba(147, 146, 142,var(--alpha)); --alphabase-shader-60 : rgba(122, 122, 119,var(--alpha)); --alphabase-shader-70 : rgba(98, 97, 95,var(--alpha)); --alphabase-shader-80 : rgba(73, 73, 71,var(--alpha)); --alphabase-shader-90 : rgba(49, 48, 47,var(--alpha)); --alphabase-shader-100 : rgba(24, 24, 23,var(--alpha)); --base-tint-00 : #FCF3E7; --base-tint-10 : #e2dacf; --base-tint-20 : #c9c2b8; --base-tint-30 : #b0aaa1; --base-tint-40 : #97918a; --base-tint-50 : #7d756b; --base-tint-60 : #645e56; --base-tint-70 : #4b4640; --base-tint-80 : #322f2b; --base-tint-90 : #191715; --base-blueish-grey-5 : #f8fafa; --base-blueish-grey-10 : #f2f5f5; --base-blueish-grey-20 : #e6ebee; --base-blueish-grey-30 : #d2dbe0; --base-blueish-grey-40 : #b8c6cd; --base-blueish-grey-50 : #91a3b0; --base-blueish-grey-60 : #8394a4; --base-blueish-grey-70 : #708091; --base-blueish-grey-80 : #5e6c79; --base-blueish-grey-90 : #4e5864; --base-blueish-grey-95 : #333b42; --color-shade-mslateblue-100 : #7b68ee; --color-shade-mslateblue-90 : #8877ef; --color-shade-mslateblue-80 : #9586f1; --color-shade-mslateblue-70 : #a295f3; --color-shade-mslateblue-60 : #afa4f4; --color-shade-mslateblue-50 : #bdb3f6; --color-shade-mslateblue-40 : #cac2f8; --color-shade-mslateblue-30 : #d7d1f9; --color-shade-mslateblue-20 : #e4e0fb; --color-shade-mslateblue-10 : #e6e3fb; --color-shade-mslateblue-9 : #e9e6fb; --color-shade-mslateblue-8 : #ece9fc; --color-shade-mslateblue-7 : #eeecfc; --color-shade-mslateblue-6 : #f1effd; --color-shade-mslateblue-5 : #f4f2fd; --color-shade-mslateblue-4 : #f6f5fd; --color-shade-mslateblue-3 : #f9f8fe; --color-shade-mslateblue-2 : #fcfbfe; --color-shade-mslateblue-100 : #7b68ee; --color-shade-mslateblue-110 : #6e5dd6; --color-shade-mslateblue-120 : #6253be; --color-shade-mslateblue-130 : #5648a6; --color-shade-mslateblue-140 : #493e8e; --color-shade-mslateblue-150 : #3d3477; --color-shade-mslateblue-160 : #31295f; --color-shade-mslateblue-170 : #241f47; --color-shade-mslateblue-180 : #18142f; /* _________________ A blue-grey Shade like Balu Bear ____________ */ --base-balu-1200: #090A0B; --base-balu-1100: #191a20; --base-balu-1000: #21252B; --base-balu-900: #2C2E37; --base-balu-800: #2D323B; --base-balu-700: #31373F; --base-balu-600: #474E5B; --base-balu-500: #656D7D; --base-balu-400: #A1AEC7; --base-balu-300: #E1ECFF; --base-balu-200: #F2F6FF; --base-balu-100: #FFFFFF; /* __________________________ Preset Color Series _____________________ */ /* ______ PCS Cyan ______ */ --cyan-1 : #fafdfe; --cyan-2 : #f2fafb; --cyan-3 : #def7f9; --cyan-4 : #caf1f6; --cyan-5 : #b5e9f0; --cyan-6 : #9ddde7; --cyan-7 : #7dcedc; --cyan-8 : #3db9cf; --cyan-9 : #00a2c7; --cyan-10 : #0797b9; --cyan-11 : #107d98; --cyan-12 : #0d3c48; /* ______ PCS Sky Blue ______ */ --sky-1 : #f9feff; --sky-2 : #f1fafd; --sky-3 : #e1f6fd; --sky-4 : #d1f0fa; --sky-5 : #bee7f5; --sky-6 : #a9daed; --sky-7 : #8dcae3; --sky-8 : #60b3d7; --sky-9 : #7ce2fe; --sky-10 : #74daf8; --sky-11 : #00749e; --sky-12 : #1d3e56; /* ______ PCS Teal Green ______ */ --teal-1 : #fafefd; --teal-2 : #f3fbf9; --teal-3 : #e0f8f3; --teal-4 : #ccf3ea; --teal-5 : #b8eae0; --teal-6 : #a1ded2; --teal-7 : #83cdc1; --teal-8 : #53b9ab; --teal-9 : #12a594; --teal-10 : #0d9b8a; --teal-11 : #008573; --teal-12 : #0d3d38; /* ______ PCS Iris Blue ______ */ --iris-1 : #fdfdff; --iris-2 : #f8f8ff; --iris-3 : #f0f1fe; --iris-4 : #e6e7ff; --iris-5 : #dadcff; --iris-6 : #cbcdff; --iris-7 : #b8baf8; --iris-8 : #9b9ef0; --iris-9 : #5b5bd6; --iris-10 : #5151cd; --iris-11 : #5753c6; --iris-12 : #272962; /* ______ PCS Teal Violet ______ */ --violet-1 : #fdfcfe; --violet-2 : #faf8ff; --violet-3 : #f4f0fe; --violet-4 : #ebe4ff; --violet-5 : #e1d9ff; --violet-6 : #d4cafe; --violet-7 : #c2b5f5; --violet-8 : #aa99ec; --violet-9 : #6e56cf; --violet-10 : #654dc4; --violet-11 : #6550b9; --violet-12 : #2f265f; /* ______ PCS Crimson Pink ______ */ --crimson-1 : #fffcfd; --crimson-2 : #fef7f9; --crimson-3 : #ffe9f0; --crimson-4 : #fedce7; --crimson-5 : #facedd; --crimson-6 : #f3bed1; --crimson-7 : #eaacc3; --crimson-8 : #e093b2; --crimson-9 : #e93d82; --crimson-10: #df3478; --crimson-11: #cb1d63; --crimson-12: #621639; /* ______ PCS Orange ______ */ --orange-1 : #fefcfb; --orange-2 : #fff7ed; --orange-3 : #ffefd6; --orange-4 : #ffdfb5; --orange-5 : #ffd19a; --orange-6 : #ffc182; --orange-7 : #f5ae73; --orange-8 : #ec9455; --orange-9 : #f76b15; --orange-10 : #ef5f00; --orange-11 : #cc4e00; --orange-12 : #582d1d; /* ______ PCS Bronze Rose ______ */ --bronze-1 : #fdfcfc; --bronze-2 : #fdf7f5; --bronze-3 : #f6edea; --bronze-4 : #efe4df; --bronze-5 : #e7d9d3; --bronze-6 : #dfcdc5; --bronze-7 : #d3bcb3; --bronze-8 : #c2a499; --bronze-9 : #a18072; --bronze-10 : #957468; --bronze-11 : #7d5e54; --bronze-12 : #43302b; /* _____________________________________________________________________ */ /* --------------------------------------------------------------------- */ /* ________________________________________________________________________________________________ /* +++ Overlay Alpha Levels +++ */ --black-alpha_1: rgba(0, 0, 0, 0.05); --black-alpha_2: rgba(0, 0, 0, 0.1); --black-alpha_3: rgba(0, 0, 0, 0.15); --black-alpha_4: rgba(0, 0, 0, 0.2); --black-alpha_5: rgba(0, 0, 0, 0.3); --black-alpha_6: rgba(0, 0, 0, 0.4); --black-alpha_7: rgba(0, 0, 0, 0.5); --black-alpha_8: rgba(0, 0, 0, 0.6); --black-alpha_9: rgba(0, 0, 0, 0.7); --black-alpha_10: rgba(0, 0, 0, 0.8); --black-alpha_11: rgba(0, 0, 0, 0.9); --black-alpha_12: rgba(0, 0, 0, 0.95); --white-alpha_1: rgba(255, 255, 255, 0.05); --white-alpha_2: rgba(255, 255, 255, 0.1); --white-alpha_3: rgba(255, 255, 255, 0.15); --white-alpha_4: rgba(255, 255, 255, 0.2); --white-alpha_5: rgba(255, 255, 255, 0.3); --white-alpha_6: rgba(255, 255, 255, 0.4); --white-alpha_7: rgba(255, 255, 255, 0.5); --white-alpha_8: rgba(255, 255, 255, 0.6); --white-alpha_9: rgba(255, 255, 255, 0.7); --white-alpha_10: rgba(255, 255, 255, 0.8); --white-alpha_11: rgba(255, 255, 255, 0.9); --white-alpha_12: rgba(255, 255, 255, 0.95); /* ________________________________________________________________________________________________ /* +++ Gray graish Color Scheme +++ */ --grayish-near-black: #020202; --grayish-void-gray: #090C0C; --grayish-void-gray-hvoer: #161b1d; --grayish-deep-gray: #131516; --grayish-deep-gray-hover: #212528; --grayish-cool-gray: #191d21; --grayish-cool-gray-hover: #20262b; --grayish-gray: #81878c; --grayish-gray-hover: #87949b; --grayish-near-white: #dcdee0; --grayish-dark-cyan: #002e42; --grayish-dark-cyan-hover: #003649; --grayish-purple: #7e5ea8; --grayish-purple-hover: #64468e; --grayish-dark-puple: #312744; /* Vintage Gray Radix */ --Gray-Vint-1: #e9eae7; --Gray-Vint-2: #e4e6df; --Gray-Vint-3: #dadbd5; --Gray-Vint-4: #d0d2ca; --Gray-Vint-5: #c8cac1; --Gray-Vint-6: #bfc1b7; --Gray-Vint-7: #b3b5ab; --Gray-Vint-8: #9fa297; --Gray-Vint-9: #717469; --Gray-Vint-10: #676a5f; --Gray-Vint-11: #4b4e44; --Gray-Vint-12: #1f2118; --Gray-Vint-a1: #c7b7080e; --Gray-Vint-a2: #9a9c0116; --Gray-Vint-a3: #68620521; --Gray-Vint-a4: #4f51012c; --Gray-Vint-a5: #46480436; --Gray-Vint-a6: #3c3d0140; --Gray-Vint-a7: #3234034d; --Gray-Vint-a8: #252a0362; --Gray-Vint-a9: #161a0292; --Gray-Vint-a10: #1417009c; --Gray-Vint-a11: #0e1100b8; --Gray-Vint-a12: #090b00e6; --Gray-Vint-contrast: #FFFFFF; --Gray-Vint-surface: #ffffffcc; --Gray-Vint-indicator: #717469; --Gray-Vint-track: #717469; /* ____ H I G H L I G H T / S P E C I A L C O L O R S F O R C U S T O M O C C A S I O N S ___ */ --sondergabe-color-honeydew: honeydew; --sondergabe-color-ghostwhite: ghostwhite; /* _______________________________________________________________________________________ COLOOr SCHEME STILL MISSSING */ /* ____________ Sonderfarbe Attention ____________ */ --color-sonderfarbe-attention-background: #f2f9f9; /*or maybe #deefee? */ --color-sonderfarbe-attention-fill: #A0CECB; --color-sonderfarbe-attention-stroke: #65aba7; /* ____________ Sonderfarbe Confirm / WARN_______________ */ --color-sonderfarbe-red-fill:#ffa0a0; --color-sonderfarbe-red-stroke: #ff6868; --color-sonderfarbe-red-background: #ffe1e1; /*oder #fff1f1*/ /* sonderfarbe selection / focus */ --color-sonderfarbe-selection-medium: rgba(90, 66, 245, 0.969); --color-sonderfarbe-selection-strong: rgba(60, 27, 249, 0.965); --color-sonderfarbe-selection-light: rgba(224, 212, 230, 0.744); --color-sonderfarbe-selection-coldlight: rgba(152, 150, 190, 0.763); } /* *** *** An d not to forget, a alpha solution: *** *** ==>> rgb(from var(--color-shade-mslateblue-100)r g b /0.5); *** */ /* ________________________ >> C O L O R S C H E M E S << T H E M E D ________________________ */ /* *** *** MAIN LIGHT mand DARKMORDE PRACTICALLY JUST REVERSE THEIR COLORS, BESIDES A FEW FINETUNEING CUSTOMS *** */ .main-light, .light { /* .darkmode &.light, & { */ --color-level-1 : var(--base-shade-white); --color-level-2 : var(--base-shade-00); --color-level-3 : var(--base-shade-10); --color-level-4 : var(--base-shade-20); --color-level-5 : var(--base-shade-30); --color-level-6 : var(--base-shade-40); --color-level-7 : var(--base-shade-50); --color-level-8 : var(--base-shade-60); --color-level-9 : var(--base-shade-70); --color-level-10 : var(--base-shade-80); --color-level-11 : var(--base-shade-90); --color-level-12 : var(--base-shade-100); --tint-level-1 : var(--base-tint-00); --tint-level-2 : var(--base-tint-10); --tint-level-3 : var(--base-tint-20); --tint-level-4 : var(--base-tint-30); --tint-level-5 : var(--base-tint-40); --tint-level-6 : var(--base-tint-50); --tint-level-7 : var(--base-tint-60); --tint-level-8 : var(--base-tint-70); --tint-level-9 : var(--base-tint-80); --tint-level-10 : var(--base-tint-90); --highlight-level-1 : var(--color-shade-mslateblue-10); --highlight-level-2 : var(--color-shade-mslateblue-20); --highlight-level-3 : var(--color-shade-mslateblue-30); --highlight-level-4 : var(--color-shade-mslateblue-40); --highlight-level-5 : var(--color-shade-mslateblue-50); --highlight-level-6 : var(--color-shade-mslateblue-60); --highlight-level-7 : var(--color-shade-mslateblue-70); --highlight-level-8 : var(--color-shade-mslateblue-80); --highlight-level-9 : var(--color-shade-mslateblue-90); --highlight-level-10 : var(--color-shade-mslateblue-100); --blueishgrey-level-1 : var(--base-blueish-grey-5); --blueishgrey-level-2 : var(--base-blueish-grey-10); --blueishgrey-level-3 : var(--base-blueish-grey-20); --blueishgrey-level-4 : var(--base-blueish-grey-30); --blueishgrey-level-5 : var(--base-blueish-grey-40); --blueishgrey-level-6 : var(--base-blueish-grey-50); --blueishgrey-level-7 : var(--base-blueish-grey-60); --blueishgrey-level-8 : var(--base-blueish-grey-70); --blueishgrey-level-9 : var(--base-blueish-grey-80); --blueishgrey-level-10: var(--base-blueish-grey-90); --blueishgrey-level-11: var(--base-blueish-grey-95); /* } */ } .darkmode, .dark { --color-level-1 : var(--base-shade-95); --color-level-2 : var(--base-shade-95); --color-level-3 : var(--base-shade-90); --color-level-4 : var(--base-shade-80); --color-level-5 : var(--base-shade-70); --color-level-6 : var(--base-shade-60); --color-level-7 : var(--base-shade-50); --color-level-8 : var(--base-shade-40); --color-level-9 : var(--base-shade-30); --color-level-10 : var(--base-shade-20); --color-level-11 : var(--base-shade-10); --color-level-12 : var(--base-shade-00); --tint-level-1 : var(--base-tint-90); --tint-level-2 : var(--base-tint-80); --tint-level-3 : var(--base-tint-70); --tint-level-4 : var(--base-tint-60); --tint-level-5 : var(--base-tint-50); --tint-level-6 : var(--base-tint-40); --tint-level-7 : var(--base-tint-30); --tint-level-8 : var(--base-tint20); --tint-level-9 : var(--base-tint-10); --tint-level-10 : var(--base-tint-00); --blueishgrey-level-1 : var(--base-blueish-grey-95); --blueishgrey-level-2 : var(--base-blueish-grey-90); --blueishgrey-level-3 : var(--base-blueish-grey-80); --blueishgrey-level-4 : var(--base-blueish-grey-70); --blueishgrey-level-5 : var(--base-blueish-grey-60); --blueishgrey-level-6 : var(--base-blueish-grey-50); --blueishgrey-level-7 : var(--base-blueish-grey-40); --blueishgrey-level-8 : var(--base-blueish-grey-30); --blueishgrey-level-9 : var(--base-blueish-grey-20); --blueishgrey-level-10: var(--base-blueish-grey-10); --blueishgrey-level-11: var(--base-blueish-grey-5); } /* ___________________________________MISSING */ .grain-background { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==); } /* ____________________________________ [ Default Text Settings] ____________________________________ :root { --fontsize-default: 14px; --fontsize-editor-default: 16px; --font-size-ui: 12px; --fontfamily-default: 'derdicke'; --fontfamily-editor-default: 'PragmataPro Mono Liga Nerd Font Complete'; } */ /* ⠀⢰⣶⣶⣶⣶⣶⣶⡄⠀⠀⠀⣴⣶⣶⡆⠀⠀⢀⣴⣾⣿⣿⣿⣶⡄⠀⣶⣶⡆⠀⣠⣴⣿⣿⣿⣷⣦⡀⠀⠀⠀⠀⠀⢰⣶⣶⣶⣶⣶⣶⣤⡀⠀⣶⣶⣶⣶⣶⣶⣶⠀⣶⣶⣶⣶⣶⣶⣶⠀⠀⣶⣶⣶⡆⠀⠀⢰⣶⣶⠀⠀⢰⣶⣶⡆⢰⣶⣶⠀⠀⠀⣶⣶⣶⣶⣶⣶⣶ ⠀⢸⣿⣿⠉⠉⣹⣿⡿⠀⠀⣸⣿⡿⣿⣿⡄⠀⢸⣿⣿⣥⣀⣉⠉⠉⠀⣿⣿⡇⢰⣿⣿⠋⠁⠈⠿⠿⠷⢠⣤⣤⠀⠀⢸⣿⣿⡏⠉⠙⢿⣿⣷⠀⣿⣿⣏⣉⣉⣉⠉⠀⣿⣿⡏⠉⠉⠉⠉⠀⣸⣿⡿⣿⣿⡄⠀⢸⣿⣿⠀⠀⢸⣿⣿⡇⢸⣿⣿⠀⠀⠀⠉⠉⢹⣿⣿⠉⠉ ⠀⢸⣿⣿⠿⠿⢿⣿⣦⠀⢠⣿⣿⠃⢻⣿⣷⠀⠀⠙⠿⠿⣿⣿⣿⣦⠀⣿⣿⡇⢸⣿⣿⠀⠀⠀⠀⠀⠀⠘⠛⠛⠀⠀⢸⣿⣿⡇⠀⠀⢸⣿⣿⠀⣿⣿⡿⠿⠿⠿⠀⠀⣿⣿⣿⣿⣿⣿⠀⢠⣿⣿⠁⢻⣿⣷⠀⢸⣿⣿⠀⠀⢸⣿⣿⡇⢸⣿⣿⠀⠀⠀⠀⠀⢸⣿⣿⠀ ⠀⢸⣿⣿⣤⣤⣴⣿⣿⢃⣿⣿⣿⣿⣿⣿⣿⣧⢲⣶⣶⣄⣀⣼⣿⣿⠀⣿⣿⡇⠘⣿⣿⣧⣄⣤⣾⣿⡟⢠⣤⣤⠀⠀⢸⣿⣿⣧⣤⣴⣿⣿⡟⠀⣿⣿⣧⣤⣤⣤⣤⠀⣿⣿⡇⠀⠀⠀⢀⣿⣿⣿⣿⣿⣿⣿⣇⠸⣿⣿⣤⣀⣼⣿⣿⠃⢸⣿⣿⣤⣤⣤⣤⠀⢸⣿⣿ ⠀⠘⠛⠛⠛⠛⠛⠛⠁⠘⠛⠛⠀⠀⠀⠘⠛⠛⠂⠙⠛⠿⠿⠿⠛⠁⠀⠛⠛⠃⠀⠈⠙⠻⠿⠿⠟⠋⠀⠘⠛⠛⠀⠀⠘⠛⠛⠛⠛⠛⠛⠉⠀⠀⠛⠛⠛⠛⠛⠛⠛⠀⠛⠛⠃⠀⠀⠀⠚⠛⠛⠀⠀⠀⠘⠛⠛⠂⠙⠛⠿⠿⠿⠛⠁⠀⠘⠛⠛⠛⠛⠛⠛⠀⠘⠛⠛⠀ ╔═════════════════════════════════════════════════════════════════════════════════════════════════╗ ║ ║ ║ _________________________ D E F A U L T T H E M E O N E __________________________________ ║ ║ ║ ║ STYLE VARIATIONS THEME ONE.................................................... ║ ║ ║ ║ [1] ==> font-size ║ ║ [2] ==> line-height ║ ║ [3] ==> font-family ║ ║ ║ ╚═════════════════════════════════════════════════════════════════════════════════════════════════╝ */ :root { /* ______________ FONT SETTINGS _________________ */ --fontsize-mainlevel: 13px; --fontsize-above-1: calc(var(--fontsize-mainlevel) + 1px); --fontsize-above-2: calc(var(--fontsize-mainlevel) + 2px); --fontsize-above-3: calc(var(--fontsize-mainlevel) + 3px); --fontsize-above-4: calc(var(--fontsize-mainlevel) + 4px); --fontsize-above-5: calc(var(--fontsize-mainlevel) + 5px); --fontsize-above-6: calc(var(--fontsize-mainlevel) + 6px); --fontsize-above-7: calc(var(--fontsize-mainlevel) + 7px); --fontsize-above-8: calc(var(--fontsize-mainlevel) + 8px); --fontsize-below-1: calc(var(--fontsize-mainlevel) - 1px); --fontsize-below-2: calc(var(--fontsize-mainlevel) - 2px); --fontsize-below-3: calc(var(--fontsize-mainlevel) - 3px); --fontsize-below-4: calc(var(--fontsize-mainlevel) - 4px); --fontsize-below-5: calc(var(--fontsize-mainlevel) - 5px); --fontsize-editor-default: calc(var(--fontsize-mainlevel) + 2px); --fontsize-ui: calc(var(--fontsize-mainlevel) - 2px); /* _____ Lineheight ____ */ --lineheight-mainlevel: 13px; --lineheight-above-1: calc(var(--lineheight-mainlevel) + 1px); --lineheight-above-2: calc(var(--lineheight-mainlevel) + 2px); --lineheight-above-3: calc(var(--lineheight-mainlevel) + 3px); --lineheight-above-4: calc(var(--lineheight-mainlevel) + 4px); --lineheight-above-5: calc(var(--lineheight-mainlevel) + 5px); --lineheight-above-6: calc(var(--lineheight-mainlevel) + 6px); --lineheight-above-7: calc(var(--lineheight-mainlevel) + 7px); --lineheight-above-8: calc(var(--lineheight-mainlevel) + 8px); --lineheight-below-1: calc(var(--lineheight-mainlevel) - 1px); --lineheight-below-2: calc(var(--lineheight-mainlevel) - 2px); --lineheight-below-3: calc(var(--lineheight-mainlevel) - 3px); --lineheight-below-4: calc(var(--lineheight-mainlevel) - 4px); --lineheight-below-5: calc(var(--lineheight-mainlevel) - 5px); /* ___ Font Family ___ */ --fontfamily-default: 'derdicke', 'PragmataPro Liga', 'PragmataPro Mono Liga Nerd Font Complete', 'SegoeUI Symbol' ; --fontfamily-default-head: 'derdicke', 'PragmataPro Mono Liga Nerd Font Complete', --fontfamily-editor-default: 'PragmataPro Liga' , 'PragmataPro Mono Liga Nerd Font Complete', 'SegoeUI Symbol'; --fontfamily-textbody-default: 'PragmataPro Liga', 'derdicke', 'PragmataPro Mono Liga Nerd Font Complete', 'SegoeUI Symbol' ; /* --fontfamily-editor-default: 'PragmataPro Mono Liga Nerd Font Complete', 'SegoeUI Symbol'; */ } /* LAYOUT - COLUMN II ==> Text / Content Layout Scheme with two coloumns */ /* ███████████████████████████████████████████████████████████████████████████████████████████████ */ /* _______________________________________________________________________________________________ */ /* +++ USEAGE: or use .layout--columns +++ */ lay-out, .layout--columns { width: 100%; display: flex; } lay-left, lay--left { padding: 10px; border-right: 0.5px solid var(--color-level-10); min-width: 30%; } lay-right, lay--right { padding: 10px; border-left: 0.5px solid var(--color-level-10); max-width: 69%; } lay-singlecol, .layout--singlecol { padding: 10px; } /* [HTML] TAG - FONT VARIATION ==> Short Tag for font-feature-settings ████████████████████████████████████████████████████████████████████████████████████████████████ ________________________________________________________________________________________________ +++ USAGE: TEXT ==> for ss05 */ fv-i, [ss01] { font-family: var(--variants-fontfamiliy, 'PragmataPro Liga'); font-feature-settings: 'ss01' on; } fv-ii, [ss02] { font-family: var(--variants-fontfamiliy, 'PragmataPro Liga'); font-feature-settings: 'ss02' on; } fv-iii, [ss03] { font-family: var(--variants-fontfamiliy, 'PragmataPro Liga'); font-feature-settings: 'ss03' on; } fv-iv, [ss04] { font-family: var(--variants-fontfamiliy, 'PragmataPro Liga'); font-feature-settings: 'ss04' on; } fv-v, [ss05] { font-family: var(--variants-fontfamiliy, 'PragmataPro Liga'); font-feature-settings: 'ss05' on; } fv-vi, [ss06] { font-family: var(--variants-fontfamiliy, 'PragmataPro Liga'); font-feature-settings: 'ss06' on; } fv-vii, [ss07] { font-family: var(--variants-fontfamiliy, 'PragmataPro Liga'); font-feature-settings: 'ss07' on; } fv-viii, [ss08] { font-family: var(--variants-fontfamiliy, 'PragmataPro Liga'); font-feature-settings: 'ss08' on; } fv-ix, [ss09] { font-family: var(--variants-fontfamiliy, 'PragmataPro Liga'); font-feature-settings: 'ss09' on; } fv-x, [ss10] { font-family: var(--variants-fontfamiliy, 'PragmataPro Liga'); font-feature-settings: 'ss10' on; } fv-xi, [ss11] { font-family: var(--variants-fontfamiliy, 'PragmataPro Liga'); font-feature-settings: 'ss11' on; } fv-xii, [ss12] { font-family: var(--variants-fontfamiliy, 'PragmataPro Liga'); font-feature-settings: 'ss12' on; } fv-xiii, [ss13] { font-family: var(--variants-fontfamiliy, 'PragmataPro Liga'); font-feature-settings: 'ss13' on; } fv-xiv, [ss14] { font-family: var(--variants-fontfamiliy, 'PragmataPro Liga'); font-feature-settings: 'ss14' on; } fv-xv, [ss15] { font-family: var(--variants-fontfamiliy, 'PragmataPro Liga'); font-feature-settings: 'ss15' on; } fv-xvi, [ss16] { font-family: var(--variants-fontfamiliy, 'PragmataPro Liga'); font-feature-settings: 'ss16' on; } fv-xvii, [ss17] { font-family: var(--variants-fontfamiliy, 'PragmataPro Liga'); font-feature-settings: 'ss17' on; } fv-xviii, [ss18] { font-family: var(--variants-fontfamiliy, 'PragmataPro Liga'); font-feature-settings: 'ss18' on; } fv-xix, [ss19] { font-family: var(--variants-fontfamiliy, 'PragmataPro Liga'); font-feature-settings: 'ss19' on; } fv-xx, [ss20] { font-family: var(--variants-fontfamiliy, 'PragmataPro Liga'); font-feature-settings: 'ss20' on; } /* ______________________________ \\ ENDE .......... ENDE // _______________________________ */ /* ________________________________________________________________________________________________ /* HDOC Basic Style /* ████████████████████████████████████████████████████████████████████████████████████████████████ /* ________________________________________________________________________________________________ /* +++ USEGE: +++ */ .ui-content .ui-view-area { font-family: var(--fontfamily-textbody-default); h1, h2, h3 { font-family: var(--fontfamily-default-head); } } /* BASICS - TABLE ==> Usual Basic Table */ /* ███████████████████████████████████████████████████████████████████████████████████████████████ */ /* _______________________________________________________________________________________________ */ /* +++ USEAGE: +++ */ .markdown-body table { --table-base-color: var(--color-level-1); --table-alternate-color: var(--blueishgrey-level-3); --table-border-color: var(--blueishgrey-level-8); --table-border-width: 1px solid; --table-border-radius: 2px; --table-head-underline: 1px solid; --table-head-fontweight: 700; thead { border-bottom: var(--table-head-underline); border-bottom-color: var(--table-border-color) ; font-weight: var(--table-head-fontweight); /* text-align: center; */ /* &:first-of-type { */ /* text-align: left; */ /* }; */ }; tr:nth-child(even) { background-color: var(--table-alternate-color); }; th,td { padding: 6px 12px; } } /* ________________________________________________________________________________________________ // KN TABLE MarkdowntAble ==> Special Table for Knowtes Markdown Editor // // ████████████████████████████████████████████████████████████████████████████████████████████████ // ________________________________________________________________________________________________ // +++ USEGE: +++ */ .markdown-table { font-family: 'Iosevka Web'; font-weight: 400; font-size: 14px; text-align: left; /* // &:nth-child(${this.columnCount}n+1){ // background-color: #ccc; // } */ .table-header, .header-cell{ display: flex; font-weight: bold; overflow: hidden; position: relative; padding: 1ch 0ch; text-indent: 1ch; font-feature-settings: 'ss08' on; &:after { /*content:"======================================================================================================================== ";*/ /* content: '${headrowdivider.repeat(100)}'; */ position: absolute; top: 1.3em; font-size:14px; font-weight: 400; letter-spacing: -0.1px; white-space:nowrap; overflow-x: hidden; text-indent: 0ch; transform: scaleY(1); } &[UC] { text-transform: uppercase; transform: scaleY(1.1); } }; .table-row, .cell { display: flex; overflow: hidden; position: relative; padding: 0.5ch 2ch 1ch 2ch; min-height: 4ch; word-wrap: break-word; word-break: auto-phrase; &:after { /* // content:"----------------------------------------------------------------------------------------------------------------------- "; */ /* content: '${tablerowdivider.repeat(100)}'; */ position: absolute; bottom: -7px; font-size:14px; line-height: 1; letter-spacing: -0.1px; white-space:nowrap; overflow-x: hidden; text-indent: 0ch; margin-left: -4ch; } }; /* .cell:nth-child(${this.columnCount}n+(1-${this.columnCount})){ background-color: #ccc; } */ .cell[data-rowoe=even] { background-color: var(--Gray-Vint-1); } } /* __________________________ \\ ENDE .......... ENDE // ______________________________________ */ /* ______________________________ _____ TEXT INPUT FIELD __________ _____________________________ */ /* ╔═════════════════════════════════════════════════════════════════════════════════════════════════╗ ║ ║ ║ _______________ I N P U T ==> T E X T F I E L D <== ______________________________ ║ ║ ║ ║ Use HTML Sippet............................................................... ║ ║ ║ ║
║ ║ ║ ║ ║ ║
║ ║ Helping or clarifying Hint-Text ║ ║
║ ║
║ ║ ║ ╚═════════════════════════════════════════════════════════════════════════════════════════════════╝ */ body { --input-textfield-fontsize: 16px; --input-textfield-fontweight: 700; --input-textfield-backgroundcolor: var(--color-level-1); --input-label-01-font-size: 0.75rem; --input-label-01-font-weight: 400; --input-label-01-line-height: 1.33333; --input-label-01-letter-spacing: 0.32px; --form-helper-text-01-font-size: 0.75rem; --form-helper-text-01-line-height: 1.33333; --form-helper-text-01-letter-spacing: 0.32px; --input-body-01-font-size: 0.875rem; --input-body-01-font-weight: 400; --input-body-01-line-height: 1.28572; --input-body-01-letter-spacing: 0.16px; --input-layout-density-padding-inline-normal: 0.75rem; --input-layout-size-height-md: 2rem; } :focus-visible { outline: 0px !important; } /* ____________________________________ I N P U T L A B E L ___________________________________ */ /* _____ ==> Please check also the seperate Label section. */ .input--label { font-size: var(--input-label-01-font-size, 0.75rem); font-weight: var(--input-label-01-font-weight,400); line-height: var(--input-label-01-line-height,1.33333); letter-spacing: var(--input-label-01-letter-spacing,0.32px); display: inline-block; color: var(--color-level-10); font-weight: 700; line-height: 1rem; -webkit-margin-after: .5rem; margin-block-end: .5rem; vertical-align: baseline; } /* ________________________________ I N P U T T E X T F I E L D ________________________________ */ input.input--textfield { box-sizing: border-box; margin: 0; font-family: inherit; font-size: var(--input-textfield-fontsize) !important; vertical-align: baseline; font-weight: var(--input-textfield-fontweight); line-height: var(--lineheight-above-2); height: 20px; letter-spacing: 0.16px; outline: 0px; border: 0px; padding: 15px; background-color: var(--input-textfield-backgroundcolor); border-bottom: 1px solid var(--color-level-10); color: var(--color-level-10); inline-size: 100%; transition: background-color 70ms cubic-bezier(.2,0,.38,.9),outline 70ms cubic-bezier(.2,0,.38,.9); } textarea.input--textarea { background-color: honeydew; border: 1px solid var(--color-level-11); border-radius: 4px; min-height: 3rem; height: fit-content; transition: 250ms; outline: 0px; } textarea.input--textarea:focus, textarea.input--textarea:focus-within, textarea.input--textarea:focus-visible { outline: 0px; cursor: text;; } /* === Form ==> Helper Text (Hint) ===== */ .form--helper-text { font-size: var(--form-helper-text-01-font-size,0.7rem); line-height: var(--form-helper-text-01-line-height,1.33333); letter-spacing: var(--form-helper-text-01-letter-spacing,-0.32px); z-index: 0; color: var(--color-level-6); inline-size: 100%; -webkit-margin-before: .25rem; margin-block-start: .25rem; opacity: 1; p { font-family: derdicke; font-size: 1em; line-height: 1.5em; width: 100%; position: relative; word-break: auto-phrase; max-width: 300px; margin-top: 0px; }; } /* ╔═════════════════════════════════════════════════════════════════════════════════════════════════════════╗ ║ ║ ║ _______________ I N P U T ==> S E L E C T : T O G G L E <== ______________________________ ║ ║ ║ ║ Use HTML Sippet............................................................... ║ ║ ║ ║
║ ║
Option A
║ ║
Option B
║ ║
║ ║ ║ ║ ║ ║ ║ ╚═════════════════════════════════════════════════════════════════════════════════════════════════════════╝ */ .input--select-toggle { width: 150px; height: 30px; display: flex; background-color: var(--color-level-5); /* border: 1px solid black; */ .state-a, .state-b { /* padding: 3px 3px; */ text-align: center; /* font-family: "Segoe UI"; */ font-size: 13px ; font-weight: 700; line-height: 30px; color: var(--color-level-3); opacity: 0.8; margin: auto; width: 50%; height: 100%; box-shadow: rgba(0, 0, 0, 0.06) 2px 2px 2px 1px inset; transition: 250ms; }; :not([active]) { background-color: var(--color-level-2); color: var(--color-level-10); height: 100%; width: 50%; margin: auto; box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 3px 0px, rgba(0, 0, 0, 0.06) -1px 1px 2px 0px; }; } /* ╔═════════════════════════════════════════════════════════════════════════════════════════════════════════╗ ║ ║ ║ _______________ I N P U T ==> S E L E C T : D R O P D O W N <== ______________________________ ║ ║ ║ ║ Use HTML Sippet............................................................... ║ */ /* */ .input--select-dropdown { height: 32px; outline:0px solid black; outline-offset: -2px; position: relative; display: block; border: 1px solid var(--color-level-4); background-color: var(--color-level-2); /* block-size: 2.5rem; */ -webkit-border-after: 1px solid var(--cds-border-strong); border-block-end: 1px solid var(--color-level-10); color: var(--color-level-10); cursor: pointer; inline-size: 100%; list-style: none; transition: background-color 70ms cubic-bezier(.2,0,.38,.9); } .input--select-dropdown:hover { background-color: var(--color-level-4); } /* ╔══════════════════════════════════════════════════════════════════════════════════════════════╗ ║ ║ ║ _______________ L A B E L ==> I N P U T, M O D U L E <== ______________________ ║ ║ ║ ║ .label--module ║ .label--informer (smaller then label--module) ║ .label--input ║ ║ ║ ║ ║ ╚══════════════════════════════════════════════════════════════════════════════════════════════╝ */ .label--module { position: sticky; top: 0px; width: 100%; /* height: 35px; */ background-color: var(--color-level-4); backdrop-filter: blur(15px); font-size: var(--fontsize-mainlevel); font-weight: 700; font-family: var(--fontfamily-default); margin-bottom: 10px; padding: 10px 8px 8px 8px; /* border: 1px solid var(--color-level-5); */ } /* LABEL - INLINE ==> Badge like Label Inline with scheme |Title|Content | */ /* ███████████████████████████████████████████████████████████████████████████████████████████████ */ /* _______________________________________________________________________________________________ */ /* +++ USEAGE: or use .label--inline +++ */ /* +++ ==> Titel or use .label--heading +++ */ /* +++ ==> Content or use .label--inline-content +++ */ label-in, label--inline, .label--inline { --label-color: var(--violet-8); border: 1px solid var(--label-color); border-radius: 2px; margin-top: 5px; display: flex; align-items: center; text-indent: 4px; font-size: 12px; width: fit-content; padding: 0px px 0px 5px; height: fit-content; position: relative; i-c { height: 16px; width: 16px; display: inline-flex; .material-symbols-outlined { line-height: 1; font-size: initial; } }; } .label--inline-heading, label-hd, label--inline-heading { /* background-color: var(--label-color); */ background-color: var(--autColor-ccbg, var(--autColor-bg, var(--label-color))); padding: 2px 5px 2px 0px !important; font-weight: 700; color: var(--color-level-1); } .label--inline-content, label-line { padding: 0px 5px 0px 5px; height: fit-content; } .label--inline-content:empty, label-line:empty { width: 0px; padding: 0px; } .label-color-bg6 { --label-color: var(--blueishgrey-level-6);} .label-color-bg8 { --label-color: var(--blueishgrey-level-8);} .label-color-tc3 { --label-color: var(--tint-level-3); } .label-color-cl4 { --label-color: var(--color-level-4); } .label-color-cl5 { --label-color: var(--color-level-5); } /* ______________________________ \\ ENDE .......... ENDE // _______________________________ */ /* ____________________ Label ==> Badges _____________________________________ */ label--badge { --badge-size: 250px; display: block; position: relative; border: 1px solid var(--color-level-11); display:flex; margin-bottom: 1.5rem; margin-right: 1.5rem; color: var(--color-level-3); min-width: 250px; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px; overflow: hidden; } label--badge.error { background: url('https://img.freepik.com/premium-photo/abstract-comicstyle-explosion-bright-orange-reminiscent-retro-art_1285420-551.jpg') no-repeat center center; background-size: cover; background-position: center; max-width: calc( var(--badge-size) / 5); } label--badge.error:after { width: 100px; position: relative; left: 150px; /* height: 25px; */ content: 'ERR:FUNC[3]'; font-size: var(--fontsize-mainlevel); text-transform: uppercase; line-height: 3; text-align: center; color: var(--color-level-11); background-color: var(--color-sonderfarbe-red-fill); padding: 2px; } label--badge.request { background: url('https://png.pngtree.com/png-vector/20240312/ourlarge/pngtree-glove-cleaning-cartoon-png-image_11929724.png') no-repeat center center; background-size: cover; background-position: center; max-width: calc( var(--badge-size) / 5); } label--badge.request:after { width: 100px; position: relative; left: 150px; /* height: 25px; */ content: 'REQ:FEAT'; font-size: var(--fontsize-mainlevel); text-transform: uppercase; line-height: 3; text-align: center; color: var(--color-level-4); background-color: var(--color-level-11); padding: 2px; } /* ╔══════════════════════════════════════════════════════════════════════════════════════════════╗ ║ ║ ║ _______________ L A B E L ==> D I V I D E R <== ______________________ ║ ║ ║ ║ ==> USEAGE:

Text Divider

║ */ .label--hr-text { display: flex; align-items: center; justify-content: center; white-space: nowrap; &:after, &:before { content: ''; background-color: black; height: 5px; width: 50vw; margin: 10px; }; } /* ╔══════════════════════════════════════════════════════════════════════════════════════════════════╗ ║ ║ ║ ______________________________________ < C L I C K - - C O N F I R M > _______________ ║ ║ ║ ║ * ║ ║ * * * ║ ║ * ║ ║ ║ * proceedConfirmed() {} proceedCanceld() {Notiflix.Notify.info('Delete canceled!');} ║ ║ ║ ╚══════════════════════════════════════════════════════════════════════════════════════════════════╝ */ click--confirm { .awaitConfirm { display: none; background-color: #D8334A !important; color: ghostwhite !important; }; .cancelConfirm { display: none; background-color: #A0CECB !important; color: ghostwhite !important; }; .requestConfirm { display: block }; } /* ╔══════════════════════════════════════════════════════════════════════════════════════════════╗ ║ ║ ║ _______________ C L I C K ==> T R E E V I E W <== ______________________________ ║ ║ ║ ║ .click--treeview ║ ║ .click--treeview-nesting ║ ║ ║ ║ ║ ╚══════════════════════════════════════════════════════════════════════════════════════════════╝ */ /* ANWENDUNG FÜR PAPERTREE TOOLS - Interface ==> using jQuery to create " Plugin_tools " ! <([ UL ] ( ! .dokumenten-anzeiger > .treeItem _ _ _ _ _ _ _ _ _ ________ */ .tree, .click--treeview { background-color: var(--color-level-2); /* border-left: 2px solid var(--color-level-5); */ ul { list-style-type: none; padding: 0; }; .treeItem, .click--treeview-item { /* color: unset !important; */ border-bottom: 1px solid var(--color-level-4); padding: 8px 10px; border-radius: 1px; font-weight: 400; font-size: 12px; font-family: var(--fontfamily-default); color: var(--color-level-10); border-left: 2px solid rgba(199, 199, 199, 0.706); min-height: 35px; height: fit-content; word-break: break-all; ul li { padding: 5px 4px !important; list-style-type: none !important; }; ic-on { margin-right: unset !important; font-size: var(--fontsize-above-4); width: 23px; margin-right: 15px; font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 48; float: left; }; }; .treeItem:hover, .treeItem:active, .treeItem:focus, .click--treeview-item:hover, .click--treeview-item:active, .click--treeview-item:focus { background-color: var(--color-level-3); }; } /* // _______/// Panel / Modal / Dialog // ████████████████████████████████████████████████████████████████████████████████████████████████████ // ____________________________________________________________________________________________________ // *** *** // *** ==> panel--casing defines basis values for glassy Panels *** /* // *** *** */ /* ┌────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐ │ │ │ │ │ panel--casing │ │ │ │ │ │ │ └────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘ */ .panel--casing { position: absolute; padding: 15px; border-radius: 8px; border: 1px solid rgb(147 158 169 / 20%); background-color: rgba(170, 190, 190, 0.4); /* backdrop-filter: blur(25px) saturate(1.5); */ backdrop-filter: blur(15px) saturate(1.5); box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 90px; overflow: scroll; min-width: 100px; min-height: 100px; height: 70vh; width: 80vw; z-index: 85; &:not(.xy-dragResize) { top: 50%; left: 50%; transform: translate(-50%, -50%); }; &.xy-dragResize { transform: none; top: 25%; left: 25%; } .headcmd { display: inline-flex; /* position: absolute; */ position: fixed; top: 20px; left: unset; right: 20px; height: 30px; width: 70px; z-index: 100; .button.close, .button.tooltip { width: 30px; height: 30px; margin-left: 8px; display: inline-flex; z-index: 101; font-size: 25px; /* line-height: 13px; */ /* text-indent: -10px; */ font-family: 'SegoeUI Symbol'; color: var(--color-level-10); /* background-color: #f5f5f530; */ i-c, i-c > span { transform: translate(-10px, -8px); height: unset !important; width: unset !important; display: unset !important; margin: unset !important; line-height: unset !important; font-size: unset !important; }; }; /* .button.close { width: 30px; height: 30px; display: inline-flex; font-size: 25px; /* line-height: 13px; */ /* text-indent: -10px; */ /* font-family: 'SegoeUI Symbol'; */ /* color: var(--color-level-10); */ /* background-color: #f5f5f530; */ /* } */ /* } */ } } .panel--casing:focus { outline: 0; border: 0; } /* ═══════════════════════════════════════════════════════════════════════════════════════════════════ B U T T O N S ==> Click Komponenten: Buttons ███████████████████████████████████████████████████████████████████████████████████████████████████ ___________________________________________________________________________________________________ *** [1] Basic Button ==> .button *** *** [2] Basic Animation: Pressed Pulsate ==> .pulsate-bck *** *** [3] Button Minimal ==> .btn--mini *** *** [4] Button Super (neomorph) ==> .btn--super *** *** [5] Button Switsh (toggle) ==> .btn--switch *** /* ___________--- Simple Button Functions ==> Please check Documentation, too _________ */ /* [FUNCTION 1] button__show(buttonid) ==> Buttin visibility toogle */ /* BUTTONS NEED A CLASS BUTTON */ /* ---- Classic Button ----- */ button.button, input[type='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:is(:hover, :active, :focus):is(button, input[type='button']) { background-color: var(--color-level-3); border: 1px solid var(--color-level-5); } .button:is(:active, :focus):is(button, input[type='button']) { -webkit-animation: pulsate-bck 0.2s ease-in-out both; animation: pulsate-bck 0.2s ease-in-out both; } .pulsate-bck { -webkit-animation: pulsate-bck 0.2s ease-in-out both; animation: pulsate-bck 0.2s ease-in-out both; } /* * ---------------------------------------- * animation pulsate-bck * ---------------------------------------- */ @-webkit-keyframes pulsate-bck { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(0.8); transform: scale(0.8); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes pulsate-bck { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(0.8); transform: scale(0.8); } 100% { -webkit-transform: scale(1); transform: scale(1); }; } /* ______________________ Toggle Button _______________________ */ /* USAGE: ==> // // --------------------------------------------------------------- */ .togglebtn { --left: #E81B1B; --right: #009068; transform: scale(0.7); input[type=checkbox] { appearance: none; height: 2rem; width: 3.5rem; background-color: #fff; position: relative; border-radius: .2em; cursor: pointer; }; input[type=checkbox]::before { content: ''; display: block; height: 1.9em; width: 1.9em; transform: translate(-50%, -50%); position: absolute; top: 50%; left: calc(1.9em/2 + .3em); background-color: var(--left); border-radius: .2em; transition: .3s ease; }; input[type=checkbox]:checked::before { background-color: var(--right); left: calc(100% - (1.9em/2 + .3em)); }; } .btn--mini { width: fit-content; min-width: 15px; height: 1em; font-size: 12px; color: var(--color-level-10); border: 1px solid var(--color-level-6); background-color: var(--label-color); i-c { font-size: 12px; width: 15px; } ; } /* BUTTON SUPER (Floating Neomorph) ==>> .btn--super <<== ███████████████████████████████████████████████████████████████████████████████████████████████████ ___________________________________________________________________________________________________ *** Button Super ==> Button in floating Neomorphism Style *** *** .btn--super[active] ==> keeps Button inset *** */ .btn--super { --shadowColor-1: 0, 0, 0; --shadowColor-2: 255, 255, 255; display: grid; place-items: center; /* background: #e3edf7; */ background-color: transparent; padding: 4px 10px; border-radius: 2px; /* box-shadow: 6px 6px 10px -1px rgba(var(--shadowColor-1),0.15), -6px -6px 10px -1px rgba(var(--shadowColor-2),0.7); */ box-shadow: 6px 6px 10px -1px rgba(var(--shadowColor-1),0.05), -6px -6px 10px -1px rgba(var(--shadowColor-2),0.3); border: 1px solid rgba(var(--shadowColor-1),0); cursor: pointer; transition: transform 0.5s; &:hover { box-shadow: inset 2px 2px 3px -1px rgba(var(--shadowColor-1),0.2), inset -2px -2px 3px -1px rgba(var(--shadowColor-2),0.7), -0.25px -0.25px 0px rgba(var(--shadowColor-2),1), 0.25px 0.25px 0px rgba(var(--shadowColor-1),0.15), 0px 6px 5px -5px rgba(var(--shadowColor-1),0.05); border: 1px solid rgba(var(--shadowColor-1),0.1); /* transform: translateY(0.25em); */ } &:active, &[active] { box-shadow: inset 4px 4px 6px -1px rgba(var(--shadowColor-1),0.2), inset -4px -4px 6px -1px rgba(var(--shadowColor-2),0.7), -0.5px -0.5px 0px rgba(var(--shadowColor-2),1), 0.5px 0.5px 0px rgba(var(--shadowColor-1),0.15), 0px 12px 10px -10px rgba(var(--shadowColor-1),0.05); border: 1px solid rgba(var(--shadowColor-1),0.1); /* transform: translateY(0.25em); */ }; &.svg { transition: transform 200ms; }; &:hover svg { transform: scale(0.9); fill: #333333; } } /* __________________________\\ ENDE...........ENDE //__________________________________________ */ /* _______ Button Switch (Toggle) ==> ==>> .btn--switch onclick="toggleAttributer(this)" <<== ███████████████████████████████████████████████████████████████████████████████████████████████████ ___________________________________________________________________________________________________ *** .btn--switch ==> Class to be set in Element or Button *** *** [switch="left"] ==> Switsch graphic on left side, optional label text rightside *** *** [toggle="off"] ==> Switch is currently off, should change to "on" on click *** */ .btn--switch { --contentToggle : '\F205'; --contentFloat : left; --contentFont : 'PragmataPro Liga'; background-color: transparent; font-family : 'derdicke'; padding : 2px 4px 1px 4px; border : 1px solid var(--color-level-5); border-radius : 3px; &[switch="right"]{ --contentFloat: right; }; &[toggle="off"] { --contentToggle: '\F204'; }; &[toggle="on"]{ --contentToggle: '\F205'; }; &::before { content : var(--contentToggle); float : var(--contentFloat); font-family : var(--contentFont, 'PragmataPro Liga') !important; /* 'PragmataPro Liga' !important */; width : fit-content; color : var(--color-level-10); margin-right : 5px; transition : 300ms; font-size : larger; } } /* __________________________\\ ENDE...........ENDE //__________________________________________ */ .response--element-done { font-size: 14px; padding : 4px 8px; position: absolute; top: 5px; right: 5px; border-radius: 2px; color: #7aa17a; left: unset; background-color: honeydew; animation: BounceBackward 1s ease-in-out 0s 1 normal forwards; } @keyframes BounceBackward { 0% { animation-timing-function: ease-in; opacity: 0; transform: scale(7); } 38% { animation-timing-function: ease-out; opacity: 1; transform: scale(1); } 55% { animation-timing-function: ease-in; transform: scale(1.5);} 72% { animation-timing-function: ease-out; transform: scale(1); } 81% { animation-timing-function: ease-in; transform: scale(1.24); } 89% { animation-timing-function: ease-out; transform: scale(1); } 95% { animation-timing-function: ease-in; transform: scale(1.04); } 100% { animation-timing-function: ease-out; transform: scale(1); } } /* /* _____________________ Tooltip ==> Button Call <== _________________________ */ tool-tip-readLib { width: 0px; overflow: hidden; display: block; /* display: inline-flex; [2025 / Mär / 19] */ } tool-tip-readLib:after { content: 'info'; position: absolute !important; display: inline-flex !important; /* display: inline-flex !important; [2025 / Mär / 19] */ /* top: 15px; */ z-index: 100; padding: 5px !important; color: var(--color-level-1) !important; /* background: var(--color-level-5) !important; */ backdrop-filter: blur(8px) brightness(0.9); border: 1px solid var(--color-level-4) !important; border-radius: 4px; /* width: 20px !important; *//* height: 20px !important; */ line-height: var(--lineheight-above-6) !important; font-family: Material Symbols Outlined; font-size: var(--fontsize-above-6) !important; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48; } /* _____________________ Close Button Panel ==> Close Button for Panel <== _________________________ */ .closeBtn { position: absolute; width: 40px; height: 40px; top: 0px; left: unset; right: 0px; background-color: transparent !important; } .closeBtn:after { content: 'X'; display: block; /* width: 40px; */ /* height: 40px; */ } /* _____________________________________ Permissions Modal Akte/Marken __________________ */ /* .akte { */ /* > .settings, >.permissions { */ /* display: none; */ /* transition: 350ms; */ /* position: absolute; */ /* left: 0 !important; */ /* top: calc((100vh - 780px) * 0.5) !important; */ /* margin: auto; */ /* border-radius: 5px; */ /* }; */ /* } */ fieldset.freigabefieldset { position: relative; padding: 45px; backdrop-filter: blur(10px) brightness(0.95) saturate(0.8); border: 1px solid var(--color-level-5); border-radius: 5px; background-color: rgba(240, 245, 245, 0.3); button.button { width: 30px; height: 30px; position: absolute; top: 10px; left: 85%; font-size: var(--fontsize-above-4); line-height: var(--lineheight-above-6); padding: 5px; margin: 0; }; ic-on { font-family: Material Symbols Outlined; font-size: var(--fontsize-above-4); width: 20px; margin-right: 0; padding: 0; line-height: var(--lineheight-above-6); font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48; }; } .knowtes-permission { width: 350px; max-width: 90vw; min-width: 50%; margin: auto; } .select-userlist { margin-top: 25px; } .select-userlist::before { font-family: var(--fontfamily-editor-default); width: 100%; height: 20px; display: block; color: var(--color-level-6); content: '════════════════ Auswahl ════════════════'; } .select-userlist::after { font-family: var(--fontfamily-editor-default); width: 100%; height: 40px; margin-top: 10px; display: block; color: var(--color-level-6); content: '═══════════════════════════════════════════'; } input.button.button-sidebar{ background-color: honeydew; font-weight: 400; padding-left: 15px; /* padding-right: */ } input.inputsearch { background: rgba(255, 255, 255, 0.7); padding: 8px 10px; width: 100%; border-bottom: 1px solid var(--color-level-5); margin-bottom: 10px; } .preview-usercard { display: flex; /* background-color: rgba(246, 242, 242, 0.562); */ background-color: var(--color-level-3); border: 1px solid rgba(100, 100, 100, 0.2); border-radius: 4px; box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px; margin-top: 10px; max-width: 100%; position: relative; } /* | | ---------------------------------------------------------------------------------------------------- */ /* __________________________________ D I V I D E R _____________________________ */ /* ________________________ ==> L I N E | R <== D I V I D E R _____ */ /* /* Any or Textelement with class .liner< /* adds a only-rightsided Line /*replaxed .liner with divider--lineright */ .divider--lineright { display: flex; align-items: flex-start; text-align: left; width: 95%; } .divider--lineright:after { content: ''; flex-grow: 1; height: 1px; /* background: var(--color-level-12); */ min-width: 20px; margin: auto; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 1px 0px, rgba(60, 64, 67, 0.15) 0px 1px 1px 1px; } .divider--lineright:after { margin-left: 20px; } /* ____________________________________________________________ */ .divider--lineleft { display: flex; align-items: flex-end; text-align: right; width: 95%; } .divider--lineleft:before { content: ''; flex-grow: 1; height: 1px; /* background: var(--color-level-12); */ min-width: 20px; margin: auto; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 1px 0px, rgba(60, 64, 67, 0.15) 0px 1px 1px 1px; } .divider--lineleft:after { margin-right: 20px; } /* _____________________ ==> T E X T D I V I D E R <== M I D D I V I D E R _____ */ div-ider, .divider--mid { --text-divider-gap: 1rem; display: flex; align-items: center; /* font-size: 0.9375rem; */ text-transform: uppercase; letter-spacing: 0.1em; } div-ider::before, div-ider::after, .divider--mid::before, .divider--mid::after { content: ''; height: 1px; background-color: silver; flex-grow: 1; } div-ider::before, .divider--mid::before { margin-right: var(--text-divider-gap); } div-ider::after, .divider--mid::after { margin-left: var(--text-divider-gap); } /* ____ENDE_______ENDE____ L I N E R D I V I D E R _____ */ /* ________________________ ==> T E X T D I V I D E R <== D I V I D E R _____ */ /* /* Any or Textelement with class .hr- /* adds Line // Renamed divider-- /* */ .hr-line { display: flex; align-items: center; justify-content: center; white-space: nowrap; } .hr-line:after, .hr-line:before { content: ""; background-color: var(--color-level-10); height: 3px; width: 50%; margin: 10px; } /* ╔══════════════════════════════════════════════════════════════════════════════════════════════════╗ ║ ║ ║ __________ S T A T U S L I N E C M D - L I N I E P O W E R L I N E _______________ ║ ║ ║ ║ Command Line Highlihter ║ ║ VIM Like PowerLine ║ ║ ║ ║ ║ ║ ║ ╚══════════════════════════════════════════════════════════════════════════════════════════════════╝ */ /* .statusln { */ /* width: 100%; */ /* position: absolute; */ /* background-color: #E1ECFF; */ /* fall back default */ /* box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; */ /* } */ .responser { position: absolute; font-family: var(--fontfamily-editor-default); font-size: var(--fontsize-above-2); height: 16px; padding: 2px; text-align: right; right: 0px; width: 100%; /* background-color: #909090; */ box-shadow: rgba(0, 0, 0, 0.16) 0px 2px 2px 0px inset; } .responser:after { content: ''; right: -2px; height: 16px; padding: 2px; text-align: right; font-family: var(--fontfamily-editor-default); font-size: var(--fontsize-above-2); } /* .statusel { */ /* font-family: var(--fontfamily-editor-default); */ /* color: white; */ /* font-weight: 400; */ /* font-size: var(--fontsize-above-2); */ /* height: 16px; */ /* float: left; */ /* right: 0px; */ /* position: relative; */ /* top: 0px; */ /* margin-right: 8px; */ /* padding: 2px 8px; */ /* filter: brightness(1.0) saturate(0.75); */ /* } */ /* .statusel:before { */ /* content: ''; */ /* position: absolute; */ /* float: left; */ /* top: 0; */ /* left: 100%; */ /* border-width: 10px 8px 10px 6px; */ /* border-style: solid; */ /* border-color: transparent transparent transparent var(--innerhex); */ /* z-index: 51; */ /* } */ /* .statusel:after { */ /* content: ''; */ /* position: absolute; */ /* width: 10px; */ /* height: 20px; */ /* left: -8px; */ /* top: 0px; */ /* background-color: var(--innerhex); */ /* z-index: 49; */ /* */ /* } */ /* ║ __________ ENDE ENDE S T A T U S L I N E C M D - L I N I E P O W E R L I N E ENDE ENDE _______________ */ /* CONTAINMENT: BOX ███████████████████████████████████████████████████████████████████████████████████████████████████ ___________________________________________________________________________________________________ *** .bx or ***/ .bx, b-x { padding: 15px; background-color: var(--label-color, var(--blueishgrey-level-3)); border: 1px solid var(--label-color, var(--blueishgrey-level-3)); border-radius: 4px; margin-bottom: 15px; display: block; } /* ______________________________ \\ ENDE .......... ENDE // _______________________________ */ /* CONTAINMENT: ASCII ART PRE BOX ==> For TextArt ███████████████████████████████████████████████████████████████████████████████████████████████████ ___________________________________________________________________________________________________ *** .tart or for ASCII-Art or Code Snippets as ***/ .tart, text-art { background-color: var(--blueishgrey-level-2); border: 1px solid var(--blueishgrey-level-4) !important; border-radius: 4px !important; font-family: 'PragmataPro Liga'; line-height: 14px; /* letter-spacing: -0.1px; */ font-size: 14px; } /* ______________________________ \\ ENDE .......... ENDE // _______________________________ */ /* ________________________ [ ANIMATION ATTENTION ==> ARROW RIGHT POINTY <== ] ________________________ */ /* */ /*Demo: https://skycode.orijauch.de/?x=id/FPT2S4GKH&mode=result */ animation--pointy-inline { animation: slide1 1s ease-in-out infinite; margin-left: 9px; display: inline-block; font-size: var(--fontsize-mainlevel); font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; } animation--pointy-inline:before { /* content: '\2192'; */ font-family: var(--fontfamily-editor-default); } @keyframes slide1 { 0%, 100% { transform: translate(0, 0); }; 50% { transform: translate(10px, 0); }; } /* _______________________________________ [ ENDE ANIMATION ] _______________________________________ */ /* ╔══════════════════════════════════════════════════════════════════════════════════════════════════╗ ║ ║ ║ ________ [ P A P I E R B A U M ] C O N T E X T M E N U P R O V I D E R ______________ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ╚══════════════════════════════════════════════════════════════════════════════════════════════════╝ */ .context-menu { min-height: 50px; width: 280px; position: absolute; display: none; background-color: rgba(248, 248, 255, 0.185); border: 1px solid hsl(280.82deg 30% 80% / 58%); border-radius: 6px; backdrop-filter: blur(10px); box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px; padding-bottom: 25px; padding-top: 5px; z-index: 999999; font-family: 'derdicke'; /* font-family: var(--fontfamily-default); */ font-weight: 500; font-size: 13px; overflow: hidden; /* overscroll-behavior: contain; */ } .context-option { margin: 0px; word-wrap: normal; max-width: 400px; box-shadow: none !important; border: 0; line-height: 1.1em; overflow: visible; } .context-option:is(:focus, :focus-within), .context-option:hover { background-color: var(--violet-7); } .context-option-seperator { height: 1px !important; min-height: 1px !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); } /* .context-menu { min-height: 50px; position : absolute; display : none; background-color: rgba(248, 248, 255, 0.185); border: 1px solid var(--blueishgrey-level-5); border-radius: 3px; backdrop-filter: blur(10px); box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px; padding: 0px; z-index: 999999; font-family: var(--fontfamily-editor-default); font-size: var(--fontsize-mainlevel); overflow: hidden; } */ .contextmenu a:is([onclick], .ticked, .unticked):hover { background-color:#333; color:#fff !important; cursor: pointer; } /* .contextmenu a::before { content: ''; margin-right:0.75em; width:0.5em; height:1em; display: inline-block; } */ li.ticked span::after, a.ticked::after, a.__ticked:not(.unticked)::after, .__ticked:not(.unticked)::after { content: '\2713'; } li.unticked span::after, a.unticked::after, .__ticked.unticked::after, .__ticked.unticked::after { content: '\2610'; } /* ___________________________ | ✓ | | CHECK MARK | | Unicode: U+2713, | | UTF-8: E2 9C 93 | |__________________________| */ .context-option { margin: 0px; padding: 8px 28px; word-wrap: normal; max-width: 400px; max-height: 200px; box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px; img { max-width: 380px; max-height: 180px; }; input { width: 100%; font-size: var(--fontsize-mainlevel); line-height: var(--lineheight-mainlevel); }; s-e { flex-wrap: wrap; > * { font-size: var(--fontsize-mainlevel); line-height: var(--lineheight-mainlevel); text-transform: unset !important; }; :is(:focus, :focus-within) > & > * { width: 100%; max-width: 100%; &:focus { background-color: var(--sky-2) } } }; [cc1] { background-color: var(--sky-5); input { background-color: var(--sky-5); } }; [cc2] { background-color: var(--sky-6); }; [cc3] { background-color: var(--sky-7); }; [cc4] { background-color: var(--sky-8); }; } /* .context-option:hover, .context-option:is(:focus, :focus-within) { background-color: var(--highlight-level-6); } */ .contextGuiderTextfield { font-weight: 400 !important; font-size: var(--fontsize-below-2) !important; font-family: var(--fontfamily-default) !important; } .contextGuider-sidebar-class { width : 30px; position : absolute; left : 0; top : 0; padding-right: 2px; /* padding-left: 2px; */ backdrop-filter : blur(10px); border : 1px solid var(--teal-12); border-radius : 4px; display : grid; grid-template-rows : repeat(10, 30px); row-gap : 5px; overflow : hidden; } .contextGuider-sidebar-class > div.contextRowDiv > i-c > span { font-size: 18px !important; padding: 2px; text-align: center; } .contextGuider-sidebar-class.context-collapsed { left: 0 !important; position: fixed; } .contextGuider-sidebar-class [class*='contextGuidSide-btn'] { padding: 2px !important; text-align: center !important; font-size: 20px !important; &:hover { box-shadow: 2px 2px 8px 0px var(--bronze-6); } } /* .contextGuider-sidebar-class [hint] { --hint: attr(hint); } .contextGuider-sidebar-class:hover > &::after { content: " " var(--hint); display: contents }; .contextGuider-sidebar-class:has([hint]):hover { width: 70px; }; */ /* _____ CONTEXT GUIder (HIGHLANDER) ==> LINKPREVIEW TEMPLATE CHOOSER ______________ */ .lkprvCntxtChooser { width: 400px; height: 220px; /* backdrop-filter: blur(10px); */ /* background: rgb(200, 219, 217); */ display: flex; transition: 150ms; font-family: var(--fontfamily-default); .lkprvCntxtTmplOptions { width: fit-content; max-width: 200px; overflow: hidden; ul, li { padding: 0px 15px 10px 0px; /* max-width: 200px; */ /* width: fit-content; */ display: block !important; }; }; .lkprvCntxtPreview { height: 220px; width: 50%; background-color: transparent; .PreviewOrgan { transform: scale(0.7); transform-origin: top; transition: 150ms; }; .PreviewOrgan[data-warning] { --warning-banner: attr(data-warning) }; .PreviewOrgan[data-warning]::after { content: "" var(--warning-banner) ""; } }; .vtabmenu-parent { width: 100%; }; li.vtabmenu-item { font-weight: 700; padding: 10px 25px 8px 20px; /* backdrop-filter: blur(10px); */ width: 100%; background: rgb(8, 32, 38); background: linear-gradient(90deg, rgba(86, 133, 145, 0.2) 0%, rgba(128, 133, 132, 0.2) 100%); color: var(--color-level-10); box-shadow: rgba(50, 50, 93, 0.15) -3px 4px 4px -2px inset, rgba(0, 0, 0, 0.1) 0px 18px 36px -18px inset; }; li.vtabmenu-item:hover, li.vtabmenu-item:active, li.vtabmenu-item:focus, li.vtabmenu-item[selected] { background: transparent !important; box-shadow: 0px 0px 0px transparent !important; }; } /* ____________________________M I S C MISC________________ */ /* [disabled]:before { position: absolute; content: ' '; display: block; background-image: url('data:image/svg+xml,'); opacity: 0.8; width: 100%; height: 100%; z-index: 99999; background-size: cover; top: 0px; background-position: center; } */ [disabled] { filter: opacity(0.7) contrast(0.8) !important; /* display: none; */ cursor: not-allowed !important; } /* __________ Make it fixed - Attribute (eg. for editor) ______ */ [pinned] { position: fixed; } /* ___________________________ NEOMORPH Neomorphism ________________ */ .neomorph { border: none; padding: 1rem; border-radius: 4px !important; background: #e8e8e8 !important; box-shadow: 20px 20px 60px #c5c5c5, -20px -20px 60px #ffffff !important; transition: 0.3s; } .neomorph:focus { outline-color: #e8e8e8 !important; background: #e8e8e8 !important; box-shadow: inset 20px 20px 60px #c5c5c5, inset -20px -20px 60px #ffffff !important; transition: 0.3s; } /*_______________________________________ [ SKY CODE Skycode ] _______________________________________ */ .skycodeviewer { border: 1px solid rgb(200, 215, 200); border-radius: 4px; background-color: honeydew; height: fit-content; } body { --scrolldisplay: none;} ::-webkit-scrollbar{ width: 10px; height: 0px; background: transparent; margin-top: 100px; transition: 150ms; } ::-webkit-scrollbar-track{ /* border: 3px solid #000055; */ /* border-radius: 5px; */ border: 1px solid transparent; } ::-webkit-scrollbar-track:hover { background-color: var(--bronze-2); border: 1px solid var(--bronze-3); --scrolldisplay: display; } ::-webkit-scrollbar-thumb{ background: linear-gradient(transparent, var(--bronze-5)); border-radius: 10px; display: var(--scrolldisplay); transition: 150ms; } ::-webkit-scrollbar-thumb:hover{ background:linear-gradient(transparent, var(--bronze-5)); --scrolldisplay: display; } sign-line { padding: 0 1em; color: #777; border-left: 0.25em solid #ddd; display: block; font-size: 80%; line-height: 1.42857143; color: #777; } /* ________________________________________________________________________________ // _________ MARKDOWN PAGE & PAGEVIEWER ______________________________________ // ████████████████████████████████████████████████████████████████████████████████ // ________________________________________________________________________________ */ .mdpageview { box-sizing: border-box; display: block; line-height: 20px; /* margin: 24px; */ max-width: 600px; /* height: 100%; */ width: 100%; min-height: 327px; min-width: 240px; opacity: 1; /* padding: 0px 16px; */ position: relative; /* transform: translateY(100px); */ background-image: url(/resources/assets/papermaterialize.svg); background-repeat: repeat-y; background-size: contain; overflow: scroll; } .mdpage { /* width: 10%; */ /* height: 90%; */ transform: scale(0.7) translate(0px, -140px); padding: 12%; } .attachmentLayout { overflow: scroll !important; } /* ________________________________________________________________________________________________ /* Attachments Directory (Repository / Dokumentenanhang) ==> Styles /* ████████████████████████████████████████████████████████████████████████████████████████████████ /* ________________________________________________________________________________________________ /* +++ USEGE: kn-attachment path="[SHARED SEKRETARIAT FOLDER URI]" +++ +++ Example: ==> */ .reposmall { max-width: 870px; /* width: 100%; */ background-color: var(--color-level-2); border: 1px solid var(--color-level-4); border-radius: 4px; overflow: hidden; } .reposmall-parentframe { min-width: 270px; /* width: 270px; */ height: 550px; /* height: fit-content; */ border: 1px solid var(--blueishgrey-level-3); margin: 30px 0px; overflow-x: hidden; overflow-y: hidden; position: relative; display: flex; } .reposmallViewerPath { small { font-weight: 400; font-size: 12px; }; b { font-weight: 700 !important; }; } .reposmall-iframe { width: 100%; height: 550px; border: 0px solid var(--blueishgrey-level-5); overflow-x: hidden; overflow-y: scroll; position: absolute; } .reposmall .Aktenfoldername .label--module { max-width: 310px !important; } .reposmall .Aktenfoldername label--inline { max-width: 170px !important; margin-top: -2px; margin-bottom: 10px; } .repoDirInexistent button.button { background-color: var(--blueish-grey-color-level-3); } /* ╔══════════════════════════════════════════════════════════════════════════════════════════════════╗ ║ ║ ║ ____________________________________________ S Y N T A X A N A T O M Y _______________ ║ ║ ║ ║ USAGE....................................................... ║ ║ ║ ║ ║ ║ <img ║ ║ ║ ║ HTML Image Tag ║ ║ ║ ║ ║ ║ src="/resources/assets/bild.png" ║ ║ ║ ║ The path to the actual image file ║ ║ ║ ║ ║ ║ width="100" height="100" /> ║ ║ ║ ║ Added attributes setting the size of the image. ║ ║ ║ ║ ║ ╚══════════════════════════════════════════════════════════════════════════════════════════════════╝ */ .code, code-container { position: relative; border: 1px solid #ccc; border-radius: 4px; padding: 10px; background-color: #f9f9f9; overflow: visible; min-height: 100px; /* width: 70%; */ display: block; } .codeseg, code-segment { /* border: 2px solid #4CAF50; */ border-bottom: 2px solid var(--segmentColor); padding: 5px; margin-right: 8px; position: relative; display: inline-block; font-family: var(--fontfamily-editor-default); font-size: var(--fontsize-above-1); /* ..... used inside context-menu ....................................................... */ input:not(:focus), input[type='number'] { max-width: 100px; }; &:has(input:focus) { z-index: 2; }; [contenteditable] { font-weight: bold; } /* text-overflow: ellipsis; */ /* white-space: nowrap; */ /* overflow: hidden; */ /* max-width: 300px; */ } .codedesc::before, code-desc::before { content: ''; position: absolute; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; /* border-top: 10px solid #4CAF50; */ border-top: 10px solid var(--segmentColor); /* margin-top: 80px; */ top: -14px; left: 0; } .codedesc, code-desc { position: absolute; /* background-color: #f9f9f9; */ /* border: 1px solid #4CAF50; */ border: 1px solid var(--segmentColor); padding: 5px; z-index: 1; /* margin-top: 50px; */ left: 0; font-size: var(--fontsize-below-1); display: block; margin-top: 20px; /* width: 100%; */ font-family: var(--fontfamily-default); color: #fff !important; background-color: var(--segmentColor); box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.16) 0px 1px 2px; } .arrowdown, arrow-down { position: absolute; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; /* border-top: 10px solid #4CAF50; */ border-top: 10px solid var(--segmentColor); /* margin-top: 80px; */ top: 30px; left: 0; } [seg="1"] {--segmentColor: rgb(95 25 100);} [seg="2"] {--segmentColor: rgb(180 57 105);} [seg="3"] {--segmentColor: rgb(212 68 65);} [seg="4"] {--segmentColor: rgb(224 113 54);} [seg="5"] {--segmentColor: rgb(238 192 41);} /* ___________________________ S Y N T A X A N A T O M Y E N D E _____________________________ */ /* _________________________________ H I N T L I N E _________________________________ */ /* Zweiter Teil in JS */ /* USAGE: Set Hint-Text in Attribute 'hint' in the Element */ .hintline-wrapper { position: relative; display: inline-block; } .hintline { position: absolute; left: 50%; /* bottom: 0; */ /* transform: translate(-50%, calc(100% + 10px)); */ padding: 6px calc(10px + 1rem) 6px 10px; border-radius: 4px; background: rgba(0, 0, 0, 0.7); border: 1px solid rgba(0, 0, 0, 0.8); backdrop-filter: blur(15px); color: #fff; z-index: 9999999; font-size: var(--fontsize-mainlevel); max-width: 400px; word-wrap: break-word; } .hintline::before { content: ""; position: absolute; top: -10px; left: calc(50% - 10px); border-bottom: 10px solid rgba(0, 0, 0, 0.8); backdrop-filter: blur(15px); border-left: 10px solid transparent; border-right: 10px solid transparent; } /* ________________________________________ ENDE HINTLINE ______________________________________ */ /* __________________ *** ** F A L T E R ** *** Collapsible Elements ______________________ */ /* --------------------------------------------------------------------------------------------- */ /* // USAGE: Set Attribute 'collapsible' in the Element und giobt it the value of Headline/Summory of folded content // (if Atribute 'open' is set, the content is unfolded by default) // // Second Part in stylebook.js */ .falterToggleButton { width: 35px; height: 19px; background-color: transparent; border: 1px solid var(--color-level-8); border-radius: 2px; background-size: cover; padding: 0px; font-size: 19px; font-family: var(--fontfamily-editor-default); line-height: 0px; padding-bottom: 3px; } .falterToggleButton:hover { background-color: var(--violet-8); } fieldset[open] { .falterToggleButton { background-color: var(--violet-8); }; } .legendcontainer { padding: 0px 15px; span { font-family: var(--fontfamily-default); font-weight: 700 !important; font-size: var(--fontsize-above-2); } } /* ______________________ ** ENDE ** F A L T E R ** ENDE ** ________________________________________ */ /* ____________________ ** C O M M O N M O D A L ** ==> Basic Modal Setup for Knowtes ___________________________________________ */ /* Basic Setup class for modals

Modal Title

SOME INTROTEXT ABOUT IT. */ /* ----------------------------------------------------------------------------------------------------- */ .commonModal { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); backdrop-filter: blur(15px); background-image: url('https://m101.orijauch.de/resources/assets/noise-surfaces/nnnoise.svg'); border: 1px solid var(--color-level-4); border-radius: 4px; padding: 25px; z-index: 9999; overflow: hidden; .button-close { background-color: unset !important; border: 0; position: fixed; top: 8px; right: 8px; left: unset; }; h1 { margin-top: 0px; margin-bottom: 8px; }; } /* _____________________________________ QuickTagAdd (used with common modal) ______________________________ */ .quickTagAdd { h1 { margin-top: 15px; display: block; position: relative; }; .introtext { margin-top: 9px; position: relative; display: block; }; .button.submit { position: absolute; right: 15px; }; li.tagitem .rmItem { background-image: url('/resources/assets/svg-knowtes/PlusDither.svg'); background-color: rgba(255, 255, 255, 0.2); background-blend-mode: multiply; padding: 4px 2px 4px 4px; color: var(--color-level-2); margin-left: 12px; } li.tagitem .rmItem:after { content: '✖'; padding: 3px; } .rmItem:hover { color: var(--color-level-10) !important; } li.tagitem:hover { background-color: var(--bronze-5); } li.tagitem.selected { background-color: var(--bronze-3); } span.tagit { padding: 4px 0px 4px 4px; } li.tagitem { position: relative; cursor: pointer; margin: 8px 12px 5px 0px; /* border: 1px solid var(--color-level-8); */ list-style-type: none; background-image: url('/resources/assets/svg-knowtes/PlusDither.svg'); /* background-size: contain; */ background-color: rgba(255,255,255,0.6); background-blend-mode: lighten; background-repeat: repeat-x, repeat-y; display: inline-flex; } .tagslist { margin-top: 10px; display: inline-flex; flex-wrap: wrap; } .oldcss-quickadd { #tagsurid-quickadd { width: 75vw; max-width: 750px; height: 150px; font-size: var(--fontsize-above-1); .tagslistItem-ADDtag { position: absolute; left: 0px; } .tagslistItem-ADDtag:focus { background-color: var(--color-level-3); } .taglist { height: 30px; margin-top: 20px; border: 1px solid var(--color-level-4); border-radius: 3px; } .expandcontent .contentexpanded, .expandcontent:hover { top: unset !important; } } } } :has(> .effectsOff), .effectsOff { &,& > * { box-shadow: none !important; backdrop-filter: none !important; text-shadow: none !important; filter: none !important; background-color: var(--color-level-2) !important; } } /* UniPick */ .unipick { .ontainer { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); grid-gap: 0.75rem; /* To define the gap between rows/columns */ gap: 0.75rem; padding: 0.75rem; /* background-color: #222629; */ color: #fff; overflow: scroll; height: 100%; }; .card { /* This will come in handy later to center the contents */ position: relative; }; .card:after { content: ""; display: block; padding-bottom: 100%; }; .card .content { position: absolute; left: 0; right: 0; top: 0; bottom: 0; }; .center { width: 100%; height: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: center; text-align : center; border-radius : 0.75rem; /* --> more panel--casing |> .unipick @ util/panelCased/..css. || 2025 / Sep / 30 ||*/ /* background-color: #474b4f; */ }; .glyph { font-size: 26px; font-family: 'PragmataPro Liga'; }; .keyname { font-size: 11px; opacity: 0.5; font-family: 'PragmataPro Liga'; position: relative; top : -20px; text-align : center; }; } /* _____________________________________ Tagleiste _______________________________ */ .tagleiste { padding: 5px; font-family: derdicke; .tagbar { width: 100%; height: 20px; display: inline-flex; font-size: 12px; overflow: hidden; } .tagbar .tagslist { width: calc(100% - 30px - 150px); list-style-type: none; display: inline-flex; flex-wrap: wrap; } #tagaddinput { width: 150px; /* padding: 4px; */ /* box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset; */ border-bottom: 1px solid var(--color-level-8); } li.tagitem .rmItem { background-color: rgba(255, 255, 255, 0.2); background-blend-mode: multiply; padding: 2px 2px 2px 4px; color: var(--color-level-10); margin-left: 7px; } li.tagitem .rmItem:after { content: '✖'; padding: 3px; } .rmItem:hover { color: var(--color-level-10) !important; } li.tagitem:hover { background-color: var(--bronze-7); } li.tagitem.selected { background-color: var(--bronze-3); } li.tagitem { position: relative; cursor: pointer; margin: 0px 3px 3px 0px; list-style-type: none; display: inline-flex; height: 16px; overflow: hidden; text-wrap-mode: nowrap; width: fit-content; } span.tagit { padding: 1px 1px 3px 5px; } .expandtrigger { width: 20px; background-image: url('/resources/assets/svg-knowtes/keyboard_arrow_right_24dp_5F6368_FILL0_wght0_GRAD0_opsz24.svg'); background-size: contain; background-repeat: no-repeat; background-position: top; } .expandtrigger:hover { background-color: var(--bronze-3); } [expanded] .expandtrigger { background-image: url('/resources/assets/svg-knowtes/keyboard_arrow_down_24dp_5F6368_FILL0_wght0_GRAD0_opsz24.svg'); } } /* ___________________________________ TreeView Nested List Component _______________________________ */ .list-tree { --tree-clr: #075985; --tree-font-size: 1rem; --tree-item-height: 2; --tree-offset: 1.5rem; --tree-thickness: 2px; --tree-style: solid; } .list-tree ul{ display: grid; list-style: none; font-size: var(--tree-font-size); } .list-tree li{ line-height: var(--tree-item-height); padding-inline-start: var(--tree-offset); border-left: var(--tree-thickness) var(--tree-style) var(--tree-clr); position: relative; text-indent: .5rem; &:last-child { border-color: transparent; /* hide (not remove!) border on last li element*/ } & span{ font-size: 0.8rem; font-style: italic; font-weight: 100; opacity: .65; } &::before{ content: ''; position: absolute; top: calc(var(--tree-item-height) / 2 * -1 * var(--tree-font-size) + var(--tree-thickness)); left: calc(var(--tree-thickness) * -1); width: calc(var(--tree-offset) + var(--tree-thickness) * 2); height: calc(var(--tree-item-height) * var(--tree-font-size)); border-left: var(--tree-thickness) var(--tree-style) var(--tree-clr); border-bottom: var(--tree-thickness) var(--tree-style) var(--tree-clr); } &::after{ content: ''; position: absolute; width: 6px; height: 6px; border-radius: 50%; background-color: var(--tree-clr); top: calc(var(--tree-item-height) / 2 * 1rem); left: var(--tree-offset) ; translate: calc(var(--tree-thickness) * -1) calc(var(--tree-thickness) * -1); } & li li{ /* change line color etc. --tree-clr: rgb(175, 208, 84); */ --tree-style: dotted; } } /* ___________________ F I E L D S E T Allgemein _______________________________________________________ */ fieldset { min-width: 80px !important; border: 1px solid var(--color-level-10); padding: 0px 15px; margin: unset; padding-bottom: unset; padding-top: unset; border-radius: 4px; } fieldset[open] { padding-bottom: 15px; border: 1px solid var(--teal-7); } fieldset[nobox] { border: 0px; /* border-bottom: 1px solid var(--color-level-10); */ padding: 0px; legend { border-bottom: 1px solid var(--color-level-4); /* box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; */ width: 100%; }; } legend { border-bottom: unset; color: var(--color-level-10); /* border: 1px solid var(--color-level-10); */ border: unset; width: unset; } /* ___________________ KN - F I E L D S E T Specified _______________________________________________________ */ fieldset[kn] { min-width: 80px !important; border: 1px solid var(--color-level-10); padding: 0px 15px; margin: unset; padding-bottom: unset; padding-top: unset; border-radius: 4px; } fieldset[kn][open] { padding-bottom: 15px; border: 1px solid var(--teal-7); } fieldset[kn][nobox] { border: 0px; /* border-bottom: 1px solid var(--color-level-10); */ padding: 0px; legend { border-bottom: 1px solid var(--color-level-4); /* box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; */ width: 100%; }; } legend[kn] { border-bottom: unset; color: var(--color-level-10); /* border: 1px solid var(--color-level-10); */ border: unset; width: unset; padding: 15px; } /* ________________________ TabularBones ==> T A B B O X <== _________________________________ */ /* -------------------------------------------------------------------------------------------------*/ #tabContainer, tab-bx { display: block; background-color: var(--violet-5) !important; width: 100%; min-height: fit-content; /* height: 100%; */ border: 1px solid var(--violet-7); border-radius: 4px; font-family: var(--fontfamily-default); box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; .tabbar { display: flex; cursor: pointer; background-color: #f1f1f1; border-radius: 3px; color: var(--color-level-10); overflow: hidden; }; .tabviewer { margin-top: -2px; overflow: hidden; position: relative; z-index: 12; } tab-in:not([selected]) { display: none; }; tab, tab-it { padding: 5px 20px; border: 1px solid #ccc; margin-right: -2px; background-color: #f1f1f1; box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px; /* filter: drop-shadow(1px 1px 3px #190); */ }; tab-it.active { background-color: var(--violet-5); color: var(--color-level-1) !important; border-bottom: none; box-shadow: unset; filter: drop-shadow(0px 3px 3px rgb(150, 150, 150)); position: relative; z-index: 9; }; .tabv { display: none; } [selected], .tabv[selected] { display: block; /* border: 1px solid #ccc; */ /* margin-top: 45px; */ padding: 20px; min-height: 100px; background-color: var(--violet-5); }; } /* tab-bx */ /*______________________ ** E N D E ** T A B B O X ** E N D E ** _________________________________ */ /* _______________________________________ IMAGE BOX ______________________________________________ */ /* -------------------------------------------------------------------------------------------------
flowers

Not much more to say about these ste of blooming flowers.

Some stuf in italic.
---------------------------------------------------------------------------------------------------- */ img-bx, .imgbx { max-width: 90vw; max-height: 90vh; overflow: hidden; border: 1px solid var(--bronze-6); border-radius: 4px; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px; img { max-width: 100%; max-height: 100%; width: fit-content; height: fit-content; border: 1px solid var(--color-level-4); }; /* .caption, */ cap-tion { margin-top: -5px; padding: 8%; display: block; background-image: url('https://m101.orijauch.de/resources/assets/noise-surfaces/nnnoise.svg'); background-size: cover; backdrop-filter: blur(10px); background-color: rgba(250, 250, 250, 0.1); /* background-blend-mode: darken; */ font-family: var(--fontfamily-default); /* position: a; */ box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset; .captiontitle, cap-title { font-size: var(--fontsize-above-5); font-weight: 900; font-family: var(--fontfamily-default); }; p, i{ font-size: var(--fontsize-mainlevel); }; }; } /* ______________________________________________*/ .output-enc-color { color: var(--fg, initial); background-color: var(--bg, initial); font-family:'PragmataPro Mono Liga Nerd Font Complete'; line-height: 1; white-space: pre; letter-spacing: 0; word-spacing: 0; overflow-x: auto; overflow-y: hidden; font-size:12px; padding:10px; position:relative; span { background-color:var(--bg, inherit); color: var(--fg,inherit); } } /* ____________________________________________________________________________________________________ */ .linerow, l-row { display: flex; } /* _____________________________ [ KBD KEYBOARD-KEY-SAMPLE ] _________________________ // ████████████████████████████████████████████████████████████████████████████████████ // USAGE: eg. (

This is the Shortkey: STRG+x

// Samples a keyboard key inline text. */ kbd { background-color: #eee; border-radius: 3px; border: 1px solid #b4b4b4; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 2px 0 0 rgba(255, 255, 255, 0.7) inset; color: #333; display: inline-block; font-size: 0.85em; font-weight: 700; line-height: 1; padding: 2px 4px; white-space: nowrap; } /* KBD KEYBOARD-KEY-SAMPLE STYLE for one Character [A-Z, a-z, 0-9]*/ k-b-1, .keyBy1 { width: 0.85em; /* height: 1em; */ padding: 1px; outline: 1px solid currentColor; border-radius: 2px; background-color: rgba(190, 200, 210, 0.3); font-family: 'geist'; font-size: 1.2em; font-weight: 700; color: var(--color-level-10); text-align: center; display: inline-flex; margin-right: 1em; position: relative; overflow: hidden; } k-b-3, .keyBy3 { /* width: 1em; */ /* height: 1em; */ padding: 1px; outline: 1px solid currentColor; background-color: rgba(190, 200, 210, 0.3); font-family: 'geist', 'IBM Plex Mono', sans-serif; font-size: 1.2em; width: 3ch; /* Set the width of the element to 1 character */ transform: scaleX(0.6); font-weight: 700; color: var(--color-level-10); text-align: center; display: inline-flex; /* margin-right: 1em; */ position: relative; overflow: hidden; letter-spacing: -0.5px; } k-b-4, .keyBy4 { /* width: 1em; */ /* height: 1em; */ padding: 1px; outline: 1px solid currentColor; background-color: rgba(190, 200, 210, 0.3); font-family: 'geist', 'IBM Plex Mono', sans-serif; font-size: 1.2em; width: 4ch; /* Set the width of the element to 1 character */ transform: scaleX(0.6); font-weight: 700; color: var(--color-level-10); text-align: center; display: inline-flex; /* margin-right: 1em; */ position: relative; overflow: hidden; letter-spacing: -0.5px; } /* _____________________________ [ S I G N L I N E R ] _____________________________ // ████████████████████████████████████████████████████████████████████████████████████ // USAGE: ||>signed(by: ⟪user⟫at:⟪timestamp⟫|| // getsReplaced to: '
{by}>{signdate}
' // ==> simply call CommonCommand: printSignLine() at EditorScope */ /* =======>>>> THE SMALL SIGN LINE <<<<================ */ .signed { font-size: var(--fontsize-below-2); font-family: var(--fontfamily-editor-default); color: var(--color-level-8); } .signed > .signuser::before { width: 16px; height: 1.5rem; content: '' ; display: inline-block; white-space: pre; background-image: url('/resources/assets/svg-knowtes/signedFeather.svg'); background-repeat: no-repeat; background-size: contain; } /* =======>>>> THE LABELLINE SIGN LINE <<<<================ */ /* _________________________________________ LOADER CURTAIN (ANIMATION) _______________________________ */ /* USAGE: /* ==> /resources/util/loadBehindCurtain.js /* ----------------------------------------------------------------------------------------------------- */ .loaderCurtain { width: 100vw; height: 100vh; background-color: white; margin: auto; #loaderCurtainEl { border: 1px solid black; width: 100px; height: 100px; margin: 40px auto; overflow: hidden; }; #loaderCurtainEl > div { background: black; width: 10px; height: 100px; transform-origin: top center; animation: loadCurtain 2.5s infinite linear; }; } @keyframes loadCurtain { 0% { transform: rotate(0deg); } 25% { transform: rotate(-90deg); margin-left: -5px; margin-top: 0; transform-origin: top center; } 50% { margin-left: -5px; margin-top: 95px; transform-origin: top center; transform: rotate(-90deg); } 75% { margin-left: 95px; margin-top: 0; transform-origin: bottom center; transform: rotate(0deg); } 100% { transform: rotate(0deg); transform-origin: bottom center; margin-left: 0; margin-top: 0; } }; :has(> .effectsOff), .effectsOff { &,& > * { box-shadow: none !important; backdrop-filter: none !important; text-shadow: none !important; filter: none !important; } } /* ____________________________________________________________________________________________________ */ /* */ /* }; */ /* --------- Styleb } contextMenu.style.position = 'absolute'; contextMenu.style.display = 'none'; contextMenu.style.backgroundColor = 'var(--color-level-2)'; contextMenu.style.border = '1px solid var(--color-level-4)'; contextMenu.style.boxShadow = '2px 2px 10px rgba(0,0,0,0.2)'; contextMenu.style.padding = '16px 10px'; contextMenu.style.zIndex = '1000'; /* --------- Stylebook ----------- */ .stylebook { height: 100%; width: 100vw; position: relative; /* background-image: url(../assets/noise-surfaces/gggrainblue.svg); */ background-size: cover; background-repeat: no-repeat; font-family: derdicke; .heading { width: 75vw; height: 250px; border: 6px double black; position: relative; margin: auto; z-index: 5; backdrop-filter: blur(2px) brightness(1.1); padding: 10px; top: 15px; text-align: center; h1 { font-size: 60px; font-weight: 900; color: var(--color-level-1); margin: auto; text-align: center; }; } pre { font-family: 'IBM Plex Mono', 'geistMono', sans-serif; font-size: 13px; font-weight: 500; margin: auto; /* text-align: center; */ } p { font-family: 'IBM Plex Mono', 'geistMono', sans-serif; font-size: var(--fontsize-above-2); margin: auto; text-align: center; }; .guide { display: flex; margin: auto; justify-content: center; } .guide-id { font-weight: 900; width: 80vw; margin: auto; font-size: 25px; text-align: left; position: relative; text-indent: 15vw; padding: 0px; /* border-bottom: 2px solid var(--color-level-2); */ margin-bottom: 15px; margin-top: 30px; color: var(--color-level-1); /* background-color: #3e7981; */ border: 1px solid #4d82a0;; backdrop-filter: blur(2px); box-shadow: rgba(0, 0, 0, 0.25) 0px 7px 14px, rgba(0, 0, 0, 0.22) 0px 8px 8px; } .field { font-weight: 900; width: 80vw; margin: auto; padding: 20px; margin-bottom: 15px; margin-top: 30px; color: var(--color-level-1); background-color: var(--tint-level-1); border: 1px double var(--color-level-10); border-radius: 4px; box-shadow: rgba(0, 0, 0, 0.25) 0px 7px 14px, rgba(0, 0, 0, 0.22) 0px 8px 8px; legend { padding: 3px 15px 3px 15px; border-radius: 2px; background: var(--color-level-10); border: 1px solid var(--color-level-11); }; } .guide-exe { width: 30vw; /* font-family: 'IBM Plex Mono', 'geistMono', sans-serif; */ padding: 35px; background-color: var(--color-level-4); margin-right: 10px; } .guide-code { width: 40vw; font-family: 'IBM Plex Mono', 'geistMono', sans-serif; padding: 25px; /* backdrop-filter: blur(5px) brightness(1.1); */ border: 1px solid var(--color-level-2); border-radius: 6px; background-color: var(--color-level-4); margin-left: 10px; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px; }; } /* _________________________________________ Icon: PragmataPro Semiotics ======================================== */ .pragmataproSemiotics { font-family: 'PragmataPro Liga' !important; /* font-size: 16px; */ /* font-weight: 400; */ line-height: 1em; color: #000; /* background-color: #fff; */ } /*---------------------------------------*/ /* _________________________________________ Material Design ICONS ========================================= */ /* --fontvar-settings: 'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 48;*/ :root { --fontvar-settings: 'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 48; } ic-on { &:not(:has(> *)), & :not(:has(> *)) { font-family: Material Symbols Outlined; font-variation-settings: var(--fontvar-settings); font-size: initial; line-height: 1; } } .material-symbols-outlined { font-family: Material Symbols Outlined !important; &:not(:has(> *)) { /*font-family: Material Symbols Outlined !important; */ line-height: 1em; font-variation-settings: var(--fontvar-settings); /* font-variation-settings: */ /* 'FILL' 0, */ /* 'wght' 400, */ /* 'GRAD' 0, */ /* 'opsz' 48; */ }; /* 2025 / Mai / 02 setting i-c to em-height */ i-c > & { margin: auto; line-height: calc(1em + 4px); font-size: calc(1em + 4px); } } .googlematerialsymbol { &:not(:has(> *)), & :not(:has(> *)) { --fontvar-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48; font-family: Material Symbols Outlined; font-size: var(--fontsize-above-6); width: unset; margin-right: unset; /* line-height: 30px; */ font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48; /* float: unset; */ } } i-con { font-family: Material Symbols Outlined; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48; } /* -------- ENDE MATERIAL ICONS ------------- */ /* ............................................................ */ /* ███████████████████████████████████████████████ - - - █████████████████████████████████████████████████████ */