/* ============================================================================= wiso-w6-form.css ----------------------------------------------------------------------------- W6 Forms / Themes / Validation / Select / Combobox / Workflow Helper Buttons / AddGrid Popup / Noble Enterprise Form Design Enthält: 1) Theme Tokens + Theme Switch 2) Base Typography / Controls / Select / Combobox / Validation 3) Workflow Helper Buttons im Input 4) AddGrid Popup 5) W6 Form Noble (Premium / Enterprise Design) Live Theme Switch: html[data-wiso-theme="light"|"contrast-light"|"dark"|"contrast-dark"] Optional per-form override: .wiso_widget.w6-form.w6-form--theme-light .wiso_widget.w6-form.w6-form--theme-dark .wiso_widget.w6-form.w6-form--theme-contrast-light .wiso_widget.w6-form.w6-form--theme-contrast-dark Validation usage: form.setProperties(name, { css: "w6-validate-error" }) form.setProperties(name, { css: "w6-validate-success" }) ============================================================================= */ /* ============================================================================= 1) THEME TOKENS ============================================================================= */ .wiso_widget.w6-form { --w6-bg: #0f1116; --w6-bg-2: #12151c; --w6-bg-3: #1f222a; --w6-text: #e5e5e5; --w6-text-dim: #9ca3af; --w6-border: #3f4350; --w6-accent: #0b4f9e; --w6-accent-glow: rgba(11, 79, 158, .35); --w6-valid: #22c55e; --w6-valid-glow: rgba(34, 197, 94, .32); --w6-invalid: #ef4444; --w6-invalid-glow: rgba(239, 68, 68, .30); --w6-radius: 8px; --w6-radius-lg: 10px; --w6-input-h: 34px; --w6-pad-y: 6px; --w6-pad-x: 10px; --w6-font: system-ui, Segoe UI, Arial, sans-serif; --w6-font-mono: ui-monospace, Consolas, monospace; --w6-dd-bg: var(--w6-bg-2); --w6-dd-border: var(--w6-border); --w6-dd-item-hover: rgba(255, 255, 255, .06); --w6-dd-item-active: rgba(11, 79, 158, .22); --w6wf-btn-bg: rgba(0,0,0,0.06); --w6wf-btn-bg-hover: rgba(0,0,0,0.10); --w6wf-btn-bg-active: rgba(0,0,0,0.14); --w6wf-btn-border: rgba(0,0,0,0.10); --w6wf-btn-border-hover: rgba(0,0,0,0.16); --w6wf-btn-border-active: rgba(0,0,0,0.20); --w6wf-btn-ring: rgba(40,120,255,0.35); --w6wf-icon-color: rgba(40, 120, 255, 0.95); } /* ----------------------------------------------------------------------------- GLOBAL THEME SWITCH ----------------------------------------------------------------------------- */ /* LIGHT */ html[data-wiso-theme="light"] .wiso_widget.w6-form, .wiso_widget.w6-form.w6-form--theme-light { --w6-bg: #ffffff; --w6-bg-2: #f5f7fb; --w6-bg-3: #ffffff; --w6-text: #111827; --w6-text-dim: #6b7280; --w6-border: #d1d5db; --w6-accent: #0b4f9e; --w6-accent-glow: rgba(11, 79, 158, .18); --w6-dd-item-hover: rgba(0, 0, 0, .05); --w6-dd-item-active: rgba(11, 79, 158, .14); --w6-valid: #16a34a; --w6-valid-glow: rgba(22, 163, 74, .22); --w6-invalid: #e53935; --w6-invalid-glow: rgba(229, 57, 53, .22); } /* CONTRAST LIGHT */ html[data-wiso-theme="contrast-light"] .wiso_widget.w6-form, .wiso_widget.w6-form.w6-form--theme-contrast-light { --w6-bg: #ffffff; --w6-bg-2: #ffffff; --w6-bg-3: #f3f4f6; --w6-text: #0b1220; --w6-text-dim: #334155; --w6-border: #111827; --w6-accent: #0b4f9e; --w6-accent-glow: rgba(11, 79, 158, .20); --w6-dd-item-hover: rgba(0, 0, 0, .07); --w6-dd-item-active: rgba(11, 79, 158, .16); --w6-valid: #15803d; --w6-valid-glow: rgba(21, 128, 61, .24); --w6-invalid: #dc2626; --w6-invalid-glow: rgba(220, 38, 38, .24); } /* DARK */ html[data-wiso-theme="dark"] .wiso_widget.w6-form, .wiso_widget.w6-form.w6-form--theme-dark { --w6-bg: #0f1116; --w6-bg-2: #12151c; --w6-bg-3: #1f222a; --w6-text: #e5e5e5; --w6-text-dim: #9ca3af; --w6-border: #3f4350; --w6-accent: #0b4f9e; --w6-accent-glow: rgba(11, 79, 158, .35); --w6-dd-item-hover: rgba(255, 255, 255, .06); --w6-dd-item-active: rgba(11, 79, 158, .22); --w6-valid: #22c55e; --w6-valid-glow: rgba(34, 197, 94, .32); --w6-invalid: #ef4444; --w6-invalid-glow: rgba(239, 68, 68, .30); --w6wf-btn-bg: rgba(255,255,255,0.10); --w6wf-btn-bg-hover: rgba(255,255,255,0.16); --w6wf-btn-bg-active: rgba(255,255,255,0.20); --w6wf-btn-border: rgba(255,255,255,0.14); --w6wf-btn-border-hover: rgba(255,255,255,0.20); --w6wf-btn-border-active: rgba(255,255,255,0.26); --w6wf-icon-color: rgba(120, 180, 255, 0.98); } /* CONTRAST DARK */ html[data-wiso-theme="contrast-dark"] .wiso_widget.w6-form, .wiso_widget.w6-form.w6-form--theme-contrast-dark { --w6-bg: #0b0d12; --w6-bg-2: #0f131a; --w6-bg-3: #151a22; --w6-text: #ffffff; --w6-text-dim: rgba(255, 255, 255, .78); --w6-border: rgba(255, 255, 255, .28); --w6-accent: #0b4f9e; --w6-accent-glow: rgba(11, 79, 158, .28); --w6-dd-item-hover: rgba(255, 255, 255, .10); --w6-dd-item-active: rgba(11, 79, 158, .22); --w6-valid: #4ade80; --w6-valid-glow: rgba(74, 222, 128, .34); --w6-invalid: #fb7185; --w6-invalid-glow: rgba(251, 113, 133, .32); } /* ============================================================================= 2) BASE TYPOGRAPHY / CONTROLS / SELECT / COMBOBOX / VALIDATION ============================================================================= */ /* ----------------------------------------------------------------------------- TYPOGRAPHY / BOX MODEL ----------------------------------------------------------------------------- */ .wiso_widget.w6-form, .wiso_widget.w6-form * { font-family: var(--w6-font); box-sizing: border-box; } .wiso_widget.w6-form label, .wiso_widget.w6-form .wiso_label, .wiso_widget.w6-form .form-label { color: var(--w6-text); font-size: 12.5px; line-height: 1.35; } .wiso_widget.w6-form .wiso_hint, .wiso_widget.w6-form .form-hint { color: var(--w6-text-dim); font-size: 12px; } .w6-input--mono { font-family: var(--w6-font-mono) !important; } .w6-w-100 { width: 100% !important; } /* ----------------------------------------------------------------------------- INPUT / TEXTAREA ----------------------------------------------------------------------------- */ .wiso_widget.w6-form input[type="text"], .wiso_widget.w6-form input[type="password"], .wiso_widget.w6-form input[type="email"], .wiso_widget.w6-form input[type="number"], .wiso_widget.w6-form input[type="date"], .wiso_widget.w6-form input[type="time"], .wiso_widget.w6-form input[type="search"], .wiso_widget.w6-form textarea { height: var(--w6-input-h); padding: var(--w6-pad-y) var(--w6-pad-x); border-radius: var(--w6-radius); border: 1px solid var(--w6-border); background: var(--w6-bg); color: var(--w6-text); box-shadow: none; outline: none; } .wiso_widget.w6-form textarea { height: auto; min-height: 86px; resize: vertical; line-height: 1.45; } .wiso_widget.w6-form input:focus, .wiso_widget.w6-form textarea:focus { border-color: var(--w6-accent); box-shadow: 0 0 0 2px var(--w6-accent-glow); } .wiso_widget.w6-form input::placeholder, .wiso_widget.w6-form textarea::placeholder { color: var(--w6-text-dim); opacity: .75; } /* ----------------------------------------------------------------------------- SELECT / WISO_SELECT ----------------------------------------------------------------------------- */ .wiso_widget.w6-form select, .wiso_widget.w6-form .wiso_select { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 100%; height: var(--w6-input-h); min-height: var(--w6-input-h); max-height: var(--w6-input-h); padding: 0 calc(var(--w6-pad-x) * 2.2) 0 var(--w6-pad-x); border-radius: var(--w6-radius); border: 1px solid var(--w6-border); background-color: var(--w6-bg); color: var(--w6-text); line-height: calc(var(--w6-input-h) - 2px); box-sizing: border-box; outline: none; background-image: linear-gradient(45deg, transparent 50%, var(--w6-text-dim) 50%), linear-gradient(135deg, var(--w6-text-dim) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 10px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; } .wiso_widget.w6-form select:hover, .wiso_widget.w6-form .wiso_select:hover { border-color: var(--w6-accent); } .wiso_widget.w6-form select:focus, .wiso_widget.w6-form .wiso_select:focus, .wiso_widget.w6-form .wiso_select.wiso_input--focus { border-color: var(--w6-accent) !important; box-shadow: 0 0 0 2px var(--w6-accent-glow); } .wiso_widget.w6-form select:disabled, .wiso_widget.w6-form .wiso_select:disabled { opacity: 0.6; cursor: not-allowed; } /* ----------------------------------------------------------------------------- COMBOBOX ----------------------------------------------------------------------------- */ .wiso_widget.w6-form .wiso_combobox-input-box { height: var(--w6-input-h); border-radius: var(--w6-radius); border: 1px solid var(--w6-border); background: var(--w6-bg); color: var(--w6-text); box-shadow: none; outline: none; } .wiso_widget.w6-form .wiso_combobox-input-box input, .wiso_widget.w6-form .wiso_combobox-input-box .wiso_input { height: calc(var(--w6-input-h) - 2px); border: none; background: transparent; color: var(--w6-text); outline: none; box-shadow: none; } .wiso_widget.w6-form .wiso_combobox-input-box:focus-within { border-color: var(--w6-accent); box-shadow: 0 0 0 2px var(--w6-accent-glow); } .wiso_combobox-input { border: none !important; } /* Combobox / Select Wrapper */ .wiso_widget.w6-form .wiso_input__container { border-radius: var(--w6-radius); overflow: hidden; } /* Dropdown Liste */ .wiso_popup .wiso_list { max-height: 240px; overflow-y: auto; overflow-x: hidden; } /* ----------------------------------------------------------------------------- VALIDATION ----------------------------------------------------------------------------- */ /* INVALID */ .wiso_widget.w6-form .w6-validate-error input, .wiso_widget.w6-form .w6-validate-error textarea, .wiso_widget.w6-form .w6-validate-error select { border-color: var(--w6-invalid) !important; box-shadow: 0 0 0 2px var(--w6-invalid-glow) !important; } .wiso_widget.w6-form .w6-validate-error .wiso_combobox-input-box { border-color: var(--w6-invalid) !important; box-shadow: 0 0 0 2px var(--w6-invalid-glow) !important; } .wiso_widget.w6-form .w6-validate-error .wiso_combobox-input-box input, .wiso_widget.w6-form .w6-validate-error .wiso_combobox-input-box .wiso_input { box-shadow: none !important; } .wiso_widget.w6-form .w6-validate-error label, .wiso_widget.w6-form .w6-validate-error .wiso_label { color: var(--w6-invalid) !important; } /* VALID */ .wiso_widget.w6-form .w6-validate-success input, .wiso_widget.w6-form .w6-validate-success textarea, .wiso_widget.w6-form .w6-validate-success select { border-color: var(--w6-valid) !important; box-shadow: 0 0 0 2px var(--w6-valid-glow) !important; } .wiso_widget.w6-form .w6-validate-success .wiso_combobox-input-box { border-color: var(--w6-valid) !important; box-shadow: 0 0 0 2px var(--w6-valid-glow) !important; } .wiso_widget.w6-form .w6-validate-success .wiso_combobox-input-box input, .wiso_widget.w6-form .w6-validate-success .wiso_combobox-input-box .wiso_input { box-shadow: none !important; } .wiso_widget.w6-form .w6-validate-success label, .wiso_widget.w6-form .w6-validate-success .wiso_label { color: var(--w6-valid) !important; } /* Validation + Focus soll stabil bleiben */ .wiso_widget.w6-form .w6-validate-error .wiso_combobox-input-box:focus-within, .wiso_widget.w6-form .w6-validate-error input:focus, .wiso_widget.w6-form .w6-validate-error textarea:focus, .wiso_widget.w6-form .w6-validate-error select:focus { border-color: var(--w6-invalid) !important; box-shadow: 0 0 0 2px var(--w6-invalid-glow) !important; } .wiso_widget.w6-form .w6-validate-success .wiso_combobox-input-box:focus-within, .wiso_widget.w6-form .w6-validate-success input:focus, .wiso_widget.w6-form .w6-validate-success textarea:focus, .wiso_widget.w6-form .w6-validate-success select:focus { border-color: var(--w6-valid) !important; box-shadow: 0 0 0 2px var(--w6-valid-glow) !important; } /* ============================================================================= 3) WORKFLOW HELPER BUTTONS IM INPUT ============================================================================= */ :root { --w6wf-icon-folder-url: url("../img/extended/icons-grid/folder-open-outline.svg"); --w6wf-icon-file-url: url("../img/extended/icons-grid/file-outline.svg"); --w6wf-icon-addgrid-url: url("../img/extended/icons-grid/view-grid-outline.svg"); } .w6wf-help { position: relative; display: block; width: 100%; min-width: 0; } .w6wf-help input, .w6wf-help textarea, .w6wf-help .wiso_input, .w6wf-help .dhx_input, .w6wf-help .wiso_form-input, .w6wf-help .dhx_form-input { width: 100%; box-sizing: border-box; padding-right: 40px; } .w6wf-help.w6wf-help--btns2 input, .w6wf-help.w6wf-help--btns2 textarea, .w6wf-help.w6wf-help--btns2 .wiso_input, .w6wf-help.w6wf-help--btns2 .dhx_input, .w6wf-help.w6wf-help--btns2 .wiso_form-input, .w6wf-help.w6wf-help--btns2 .dhx_form-input { padding-right: 72px; } .w6wf-help.w6wf-help--btns3 input, .w6wf-help.w6wf-help--btns3 textarea, .w6wf-help.w6wf-help--btns3 .wiso_input, .w6wf-help.w6wf-help--btns3 .dhx_input, .w6wf-help.w6wf-help--btns3 .wiso_form-input, .w6wf-help.w6wf-help--btns3 .dhx_form-input { padding-right: 104px; } .w6wf-help__btn { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 8px; cursor: pointer; user-select: none; -webkit-user-select: none; box-sizing: border-box; background-color: var(--w6wf-btn-bg); background-repeat: no-repeat; background-position: center; background-size: 16px 16px; opacity: 0.95; transition: filter 120ms ease, opacity 120ms ease, background-color 120ms ease; } .w6wf-help__btn:hover { background-color: var(--w6wf-btn-bg-hover); opacity: 1; } .w6wf-help__btn:active { filter: brightness(0.95); } .w6wf-help__btn.is-2 { right: 40px; } .w6wf-help__btn.is-3 { right: 72px; } .w6wf-help__btn--folder { background-image: var(--w6wf-icon-folder-url); } .w6wf-help__btn--file { background-image: var(--w6wf-icon-file-url); } .w6wf-help__btn--addgrid { background-image: var(--w6wf-icon-addgrid-url); } /* ----------------------------------------------------------------------------- Helper-Button Pseudo-Lösung für WISO Input-Container ----------------------------------------------------------------------------- */ .w6wf-field--folder .wiso_input, .w6wf-field--file .wiso_input, .w6wf-field--addgrid .wiso_input { box-sizing: border-box; padding-right: 44px; } .w6wf-btns2 .wiso_input { padding-right: 78px; } .w6wf-btns3 .wiso_input { padding-right: 112px; } .w6wf-field--folder .wiso_input__container, .w6wf-field--file .wiso_input__container, .w6wf-field--addgrid .wiso_input__container { position: relative; } .w6wf-field--folder .wiso_input__container::after, .w6wf-field--file .wiso_input__container::after, .w6wf-field--addgrid .wiso_input__container::after { content: ""; position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 9px; cursor: pointer; pointer-events: auto; user-select: none; -webkit-user-select: none; transition: background-color 120ms ease, box-shadow 120ms ease, transform 80ms ease, filter 120ms ease, opacity 120ms ease; opacity: 0.98; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: 16px 16px; mask-repeat: no-repeat; mask-position: center; mask-size: 24px 24px; background-color: var(--w6wf-icon-color); box-shadow: 0 0 0 999px var(--w6wf-btn-bg) inset, 0 0 0 1px var(--w6wf-btn-border) inset; } .w6wf-field--folder .wiso_input__container:hover::after, .w6wf-field--file .wiso_input__container:hover::after, .w6wf-field--addgrid .wiso_input__container:hover::after { box-shadow: 0 0 0 999px var(--w6wf-btn-bg-hover) inset, 0 0 0 1px var(--w6wf-btn-border-hover) inset; filter: brightness(1.05); } .w6wf-field--folder .wiso_input__container:active::after, .w6wf-field--file .wiso_input__container:active::after, .w6wf-field--addgrid .wiso_input__container:active::after { transform: translateY(-50%) scale(0.96); filter: brightness(0.96); box-shadow: 0 0 0 999px var(--w6wf-btn-bg-active) inset, 0 0 0 1px var(--w6wf-btn-border-active) inset; } .w6wf-field--folder .wiso_input__container:focus-within::after, .w6wf-field--file .wiso_input__container:focus-within::after, .w6wf-field--addgrid .wiso_input__container:focus-within::after { box-shadow: 0 0 0 999px var(--w6wf-btn-bg-hover) inset, 0 0 0 2px var(--w6wf-btn-ring); } .w6wf-field--folder .wiso_input__container:has(.wiso_input:disabled)::after, .w6wf-field--file .wiso_input__container:has(.wiso_input:disabled)::after, .w6wf-field--addgrid .wiso_input__container:has(.wiso_input:disabled)::after { opacity: 0.45; cursor: default; filter: grayscale(1); } .w6wf-field--folder .wiso_input__container::after { -webkit-mask-image: var(--w6wf-icon-folder-url); mask-image: var(--w6wf-icon-folder-url); } .w6wf-field--file .wiso_input__container::after { -webkit-mask-image: var(--w6wf-icon-file-url); mask-image: var(--w6wf-icon-file-url); } .w6wf-field--addgrid .wiso_input__container::after { -webkit-mask-image: var(--w6wf-icon-addgrid-url); mask-image: var(--w6wf-icon-addgrid-url); } /* ============================================================================= 4) ADDGRID POPUP ============================================================================= */ :root { --w6wf-pop-bg: #ffffff; --w6wf-pop-bg2: #f4f6f9; --w6wf-pop-text: rgba(15,23,42,0.92); --w6wf-pop-muted: rgba(15,23,42,0.62); --w6wf-pop-border: rgba(20,30,40,0.18); --w6wf-pop-border2: rgba(20,30,40,0.12); --w6wf-pop-shadow: 0 18px 55px rgba(0,0,0,0.22); --w6wf-accent: rgba(40,120,255,0.95); } html[data-wiso-theme="dark"] { --w6wf-pop-bg: #0b1220; --w6wf-pop-bg2: #0f172a; --w6wf-pop-text: rgba(235,242,255,0.92); --w6wf-pop-muted: rgba(235,242,255,0.65); --w6wf-pop-border: rgba(255,255,255,0.14); --w6wf-pop-border2: rgba(255,255,255,0.10); --w6wf-pop-shadow: 0 20px 70px rgba(0,0,0,0.62); --w6wf-accent: rgba(120,180,255,0.98); } html[data-wiso-theme="contrast-dark"] { --w6wf-pop-bg: #070c16; --w6wf-pop-bg2: #0b1220; --w6wf-pop-text: rgba(235,242,255,0.94); --w6wf-pop-muted: rgba(235,242,255,0.70); --w6wf-pop-border: rgba(255,255,255,0.20); --w6wf-pop-border2: rgba(255,255,255,0.14); --w6wf-pop-shadow: 0 22px 80px rgba(0,0,0,0.72); --w6wf-accent: rgba(150,200,255,0.98); } .wiso_widget.wiso_popup:has(.w6wf-addgrid) { border-radius: 14px !important; overflow: hidden !important; background: var(--w6wf-pop-bg) !important; border: 1px solid var(--w6wf-pop-border) !important; box-shadow: var(--w6wf-pop-shadow) !important; --wf-border-1: var(--w6wf-pop-border) !important; --wf-border-2: var(--w6wf-pop-border2) !important; --wf-surface-0: var(--w6wf-pop-bg) !important; --wf-surface-1: var(--w6wf-pop-bg2) !important; --wf-text-1: var(--w6wf-pop-text) !important; --wf-text-2: var(--w6wf-pop-muted) !important; } .wiso_widget.wiso_popup:has(.w6wf-addgrid) > .wiso_popup-content, .wiso_widget.wiso_popup:has(.w6wf-addgrid) .wiso_popup__inner-html-content { background: transparent !important; border: none !important; padding: 0 !important; outline: none !important; border-radius: 14px !important; } .w6wf-addgrid { display: flex; flex-direction: column; width: 520px; height: 420px; max-width: min(72vw, 560px); min-width: 360px; box-sizing: border-box; background: var(--w6wf-pop-bg) !important; color: var(--w6wf-pop-text) !important; } .w6wf-addgrid__head { padding: 14px 16px 10px 16px; background: linear-gradient(180deg, var(--w6wf-pop-bg), var(--w6wf-pop-bg2)) !important; border-bottom: 1px solid var(--w6wf-pop-border2) !important; } .w6wf-addgrid__title { font-size: 14px; font-weight: 800; letter-spacing: 0.2px; color: var(--w6wf-pop-text) !important; } .w6wf-addgrid__sub { margin-top: 2px; font-size: 12px; color: var(--w6wf-pop-muted) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .w6wf-addgrid__toolbar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--w6wf-pop-bg) !important; border-bottom: 1px solid var(--w6wf-pop-border2) !important; } .w6wf-addgrid__search { flex: 1 1 auto; height: 34px; border-radius: 10px; background: var(--w6wf-pop-bg2) !important; color: var(--w6wf-pop-text) !important; border: 1px solid var(--w6wf-pop-border2) !important; outline: none; padding: 0 12px; box-sizing: border-box; } .w6wf-addgrid__search:focus { border-color: color-mix(in srgb, var(--w6wf-accent) 55%, var(--w6wf-pop-border2)) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--w6wf-accent) 22%, transparent) !important; } .w6wf-addgrid__hint { font-size: 12px; color: var(--w6wf-pop-muted) !important; white-space: nowrap; } .w6wf-addgrid__grid { flex: 1 1 auto; min-height: 0; height: 320px; padding: 10px 12px 12px 12px; box-sizing: border-box; background: var(--w6wf-pop-bg) !important; border-radius: 12px !important; overflow: hidden !important; } .w6wf-addgrid-grid { height: 100% !important; border-radius: 12px !important; overflow: hidden !important; border: none !important; outline: 1px solid var(--w6wf-pop-border2) !important; outline-offset: -1px !important; background: var(--w6wf-pop-bg2) !important; } .w6wf-addgrid-grid.wiso_grid, .w6wf-addgrid-grid .wiso_grid-content, .w6wf-addgrid-grid .wiso_grid-body, .w6wf-addgrid-grid .wiso_data-wrap, .w6wf-addgrid-grid .wiso_grid_data, .w6wf-addgrid-grid .wiso_header-wrapper, .w6wf-addgrid-grid .wiso_grid-header { background: transparent !important; border: none !important; box-shadow: none !important; } .w6wf-addgrid-grid .wiso_grid-content, .w6wf-addgrid-grid .wiso_grid-body, .w6wf-addgrid-grid .wiso_header-wrapper { overflow: hidden !important; } .w6wf-addgrid__grid.wiso_widget, .w6wf-addgrid__grid .wiso_widget, .w6wf-addgrid__grid .wiso_grid { height: 100% !important; min-height: 0 !important; } .w6wf-addgrid__grid .wiso_grid-content { height: 100% !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; } .w6wf-addgrid__grid .wiso_grid-header-wrap { flex: 0 0 auto !important; } .w6wf-addgrid__grid .wiso_grid-body { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; scrollbar-width: thin; } .w6wf-addgrid__grid [role="presentation"].wiso_grid-body, .w6wf-addgrid__grid div.wiso_grid-body[role="presentation"] { overflow-y: auto !important; overflow-x: hidden !important; } .w6wf-addgrid__grid .wiso_grid-body::-webkit-scrollbar { width: 10px; } .w6wf-addgrid__grid .wiso_grid-body::-webkit-scrollbar-thumb { border-radius: 10px; background: rgba(90, 140, 210, 0.45); } .w6wf-addgrid__grid .wiso_grid-body::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); } .w6wf-addgrid-grid .wiso_grid-header-cell { background: transparent !important; color: var(--w6wf-pop-text) !important; border-right: 1px solid var(--w6wf-pop-border2) !important; } .w6wf-addgrid-grid .wiso_grid-header-cell:last-child { border-right: none !important; } .w6wf-addgrid-grid .wiso_grid-header-cell-text_content { color: var(--w6wf-pop-text) !important; font-weight: 700; } .w6wf-addgrid-grid .wiso_grid-cell { background: transparent !important; color: var(--w6wf-pop-text) !important; border-bottom: 1px solid var(--w6wf-pop-border2) !important; } .w6wf-addgrid-grid .wiso_grid-row:last-child .wiso_grid-cell { border-bottom: none !important; } .w6wf-addgrid-grid .wiso_grid-row:hover .wiso_grid-cell { background: color-mix(in srgb, var(--w6wf-accent) 10%, var(--w6wf-pop-bg2)) !important; } .w6wf-addgrid-grid .wiso_grid-selected-row { background: color-mix(in srgb, var(--w6wf-accent) 18%, transparent) !important; border-left: 2px solid color-mix(in srgb, var(--w6wf-accent) 60%, transparent) !important; } html[data-wiso-theme="dark"] .w6wf-addgrid-grid .wiso_grid-sort-icon, html[data-wiso-theme="contrast-dark"] .w6wf-addgrid-grid .wiso_grid-sort-icon { opacity: 0.9; filter: brightness(1.2); } .w6wf-addgrid__list { padding: 10px 12px 12px 12px; } .w6wf-addgrid__li { padding: 10px 12px; border: 1px solid var(--w6wf-pop-border); border-radius: 12px; background: var(--w6wf-pop-bg2); margin-bottom: 8px; cursor: pointer; transition: transform 80ms ease, filter 120ms ease, border-color 120ms ease; } .w6wf-addgrid__li:hover { filter: brightness(1.05); border-color: color-mix(in srgb, var(--w6wf-accent) 45%, var(--w6wf-pop-border)); } .w6wf-addgrid__li:active { transform: scale(0.99); } .w6wf-addgrid__li-v { font-weight: 700; font-size: 13px; } .w6wf-addgrid__li-d { margin-top: 2px; font-size: 12px; color: var(--w6wf-pop-muted); } .w6wf-addgrid__empty { padding: 10px 6px; color: var(--w6wf-pop-muted); font-size: 12px; } /* ============================================================================= 5) W6 FORM NOBLE – PREMIUM / ENTERPRISE DESIGN ============================================================================= */ /* ----------------------------------------------------------------------------- Root / Layout Reset ----------------------------------------------------------------------------- */ .w6-form.w6-form--noble { padding: 12px; border: 0; border-radius: 12px; background: transparent; box-shadow: none; } /* ========================================================= W6 FORM SCROLL FIX (WINDOW) ========================================================= */ /* 1. WICHTIG: Parent muss Scroll erlauben */ .wiso_window .wiso_layout-cell.wiso_window-content { display: flex !important; flex-direction: column !important; overflow: hidden !important; } /* 2. Form darf NICHT einfach 100% blockieren */ .w6-form.w6-form--noble { display: flex; flex-direction: column; height: 100%; min-height: 0; /* 🔥 extrem wichtig für flex scroll */ } /* 3. SCROLLBEREICH */ .w6-form.w6-form--noble .wiso_layout { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; /* optional: schöner Scroll */ scrollbar-width: thin; } /* Chrome Scrollbar */ .w6-form.w6-form--noble .wiso_layout::-webkit-scrollbar { width: 8px; } .w6-form.w6-form--noble .wiso_layout::-webkit-scrollbar-thumb { background: rgba(11, 79, 158, 0.35); border-radius: 6px; } .w6-form.w6-form--noble .wiso_layout::-webkit-scrollbar-thumb:hover { background: rgba(11, 79, 158, 0.55); } /* 4. Falls KEIN .wiso_layout vorhanden -> fallback */ .w6-form.w6-form--noble.wiso_widget { overflow-y: auto; } .w6-form.w6-form--noble .wiso_layout-rows, .w6-form.w6-form--noble .wiso_layout-row, .w6-form.w6-form--noble .wiso_layout-cell, .w6-form.w6-form--noble .wiso_form-group, .w6-form.w6-form--noble .wiso_form-item { background: transparent; border: 0; box-shadow: none; } /* ----------------------------------------------------------------------------- Fieldsets ----------------------------------------------------------------------------- */ .w6-form.w6-form--noble .wiso_form-fieldset, .w6-form.w6-form--noble fieldset, .w6-form.w6-form--noble .wiso_fieldset { position: relative; margin: 0 0 18px 0; padding: 14px 16px 18px 16px !important; border-radius: 10px; border: 1px solid transparent; overflow: hidden; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .w6-form.w6-form--noble .wiso_form-fieldset::before, .w6-form.w6-form--noble fieldset::before, .w6-form.w6-form--noble .wiso_fieldset::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 1px; opacity: 0.65; pointer-events: none; } .w6-form.w6-form--noble .wiso_form-fieldset > legend, .w6-form.w6-form--noble fieldset > legend, .w6-form.w6-form--noble .wiso_form-legend, .w6-form.w6-form--noble .wiso_form-fieldset-legend { display: inline-flex; align-items: center; min-height: 22px; padding: 0 10px; margin: 0 0 14px 0; border-radius: 6px; font-size: 11px; line-height: 1; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; position: relative; z-index: 2; } html[data-wiso-theme="dark"] .w6-form.w6-form--noble .wiso_form-fieldset > legend::before, html[data-wiso-theme="dark"] .w6-form.w6-form--noble fieldset > legend::before, html[data-wiso-theme="dark"] .w6-form.w6-form--noble .wiso_form-legend::before, html[data-wiso-theme="dark"] .w6-form.w6-form--noble .wiso_form-fieldset-legend::before, html[data-wiso-theme="light"] .w6-form.w6-form--noble .wiso_form-fieldset > legend::before, html[data-wiso-theme="light"] .w6-form.w6-form--noble fieldset > legend::before, html[data-wiso-theme="light"] .w6-form.w6-form--noble .wiso_form-legend::before, html[data-wiso-theme="light"] .w6-form.w6-form--noble .wiso_form-fieldset-legend::before { content: ""; display: inline-block; width: 3px; height: 12px; margin-right: 8px; border-radius: 2px; background: #0b4f9e; opacity: 0.90; flex: 0 0 auto; } .w6-form.w6-form--noble .wiso_form-fieldset:focus-within, .w6-form.w6-form--noble fieldset:focus-within, .w6-form.w6-form--noble .wiso_fieldset:focus-within { transform: translateY(-1px); } /* ----------------------------------------------------------------------------- Labels ----------------------------------------------------------------------------- */ .w6-form.w6-form--noble .wiso_form-label, .w6-form.w6-form--noble label { font-size: 11px; font-weight: 600; letter-spacing: 0.01em; margin-bottom: 5px; opacity: 0.76; } /* ----------------------------------------------------------------------------- Noble Inputs / Textareas / Selects / Combos ----------------------------------------------------------------------------- */ .w6-form.w6-form--noble input, .w6-form.w6-form--noble textarea, .w6-form.w6-form--noble select, .w6-form.w6-form--noble .wiso_input, .w6-form.w6-form--noble .wiso_input input, .w6-form.w6-form--noble .wiso_textarea textarea, .w6-form.w6-form--noble .wiso_combo, .w6-form.w6-form--noble .wiso_combo input, .w6-form.w6-form--noble .wiso_select, .w6-form.w6-form--noble .wiso_select select { border-radius: 6px; box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease; } .w6-form.w6-form--noble input, .w6-form.w6-form--noble .wiso_input input, .w6-form.w6-form--noble .wiso_combo input, .w6-form.w6-form--noble select, .w6-form.w6-form--noble .wiso_select select { height: 31px; padding: 0 10px; } .w6-form.w6-form--noble textarea, .w6-form.w6-form--noble .wiso_textarea textarea, .w6-form.w6-form--noble .wiso_input--textarea, .w6-form.w6-form--noble textarea.wiso_input.wiso_input--textarea { min-height: 90px; padding: 10px 10px 12px 10px; resize: vertical; box-sizing: border-box; } .w6-form.w6-form--noble input::placeholder, .w6-form.w6-form--noble textarea::placeholder, .w6-form.w6-form--noble .wiso_input input::placeholder, .w6-form.w6-form--noble .wiso_combo input::placeholder { opacity: 0.30; } .w6-form.w6-form--noble input:focus, .w6-form.w6-form--noble textarea:focus, .w6-form.w6-form--noble select:focus, .w6-form.w6-form--noble .wiso_input input:focus, .w6-form.w6-form--noble .wiso_combo input:focus, .w6-form.w6-form--noble .wiso_select select:focus { outline: none; } /* ========================================================== W6 Noble Form - Combo Disabled Fix Ziel: - disabled Combo behält gleiche Höhe, Breite, Padding und Alignment - Liste bleibt optisch identisch wie im normalen Zustand - nur Bedienung wird gesperrt ========================================================== */ .w6-form.w6-form--noble .wiso_combobox.wiso_combobox--disabled { opacity: 1 !important; pointer-events: none !important; } /* Hauptbox stabil halten */ .w6-form.w6-form--noble .wiso_combobox.wiso_combobox--disabled .wiso_combobox-input-box { min-height: 34px !important; height: 34px !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; } /* Text / Value vertikal mittig halten */ .w6-form.w6-form--noble .wiso_combobox.wiso_combobox--disabled input, .w6-form.w6-form--noble .wiso_combobox.wiso_combobox--disabled .wiso_combobox-input, .w6-form.w6-form--noble .wiso_combobox.wiso_combobox--disabled .wiso_combobox-input-value { height: 34px !important; line-height: 34px !important; font-size: var(--wiso-font-size-normal, 13px) !important; box-sizing: border-box !important; opacity: 1 !important; } /* Icon/Dropdown-Pfeil mittig halten */ .w6-form.w6-form--noble .wiso_combobox.wiso_combobox--disabled .wiso_combobox-input-icon, .w6-form.w6-form--noble .wiso_combobox.wiso_combobox--disabled .wiso_combobox-input-button { height: 34px !important; min-height: 34px !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* Wrapper darf nicht zusammenschrumpfen */ .w6-form.w6-form--noble .wiso_combobox.wiso_combobox--disabled .wiso_combobox-input-list-wrapper, .w6-form.w6-form--noble .wiso_combobox.wiso_combobox--disabled .wiso_combobox-input-list { width: 100% !important; box-sizing: border-box !important; } /* Listeneinträge stabilisieren */ .w6-form.w6-form--noble .wiso_combobox.wiso_combobox--disabled .wiso_combobox-input-list li, .w6-form.w6-form--noble .wiso_combobox.wiso_combobox--disabled .wiso_combobox-input-list [role="option"] { min-height: 34px !important; height: 34px !important; line-height: 34px !important; display: flex !important; align-items: center !important; box-sizing: border-box !important; font-size: var(--wiso-font-size-normal, 13px) !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* Falls die Combo-Liste außerhalb von .w6-form gerendert wird */ .wiso_popup .wiso_combobox-input-list li, .wiso_popup .wiso_combobox-input-list [role="option"] { min-height: 34px !important; height: 34px !important; line-height: 34px !important; display: flex !important; align-items: center !important; box-sizing: border-box !important; font-size: var(--wiso-font-size-normal, 13px) !important; } /* ----------------------------------------------------------------------------- Notes / Textarea Abstand unten ----------------------------------------------------------------------------- */ .w6-form.w6-form--noble [data-cell-id="Notes"] { height: auto !important; min-height: 90px; padding-bottom: 12px !important; box-sizing: border-box; } .w6-form.w6-form--noble [data-cell-id="Notes"] .wiso_form-group--textarea { margin-bottom: 0; padding-bottom: 10px; box-sizing: border-box; } .w6-form.w6-form--noble [data-cell-id="Notes"] .wiso_input__wrapper { margin-bottom: 10px !important; padding-bottom: 0 !important; box-sizing: border-box; } .w6-form.w6-form--noble [data-cell-id="Notes"] textarea.wiso_input.wiso_input--textarea { display: block; width: 100%; min-height: 90px; margin: 0 !important; box-sizing: border-box; } /* ========================================================== W6 FORM NOBLE – CHECKBOX (FIELD STYLE) Ziel: - Label oben - Checkbox darunter (größer) - harmonisch wie Input-Felder ========================================================== */ .w6-form.w6-form--noble .wiso_form-group--checkbox { display: flex !important; flex-direction: column !important; align-items: flex-start !important; margin: 0 0 18px 0 !important; padding: 0 !important; } /* ---------------------------------------------------------- LABEL (oben wie bei Input) ---------------------------------------------------------- */ .w6-form.w6-form--noble label.wiso_checkbox { display: block !important; width: 100% !important; margin-bottom: 6px !important; font-size: 12px !important; font-weight: 600 !important; color: rgba(230,238,248,0.75); line-height: 1.2 !important; } /* ---------------------------------------------------------- HOLDER (Checkbox-Zeile) ---------------------------------------------------------- */ .w6-form.w6-form--noble .wiso_checkbox__holder { display: flex !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; gap: 12px !important; } /* ---------------------------------------------------------- INPUT verstecken (wie gehabt) ---------------------------------------------------------- */ .w6-form.w6-form--noble .wiso_checkbox__input { position: absolute !important; opacity: 0 !important; pointer-events: none !important; } /* ---------------------------------------------------------- VISUAL CHECKBOX (GRÖSSER + MODERN) ---------------------------------------------------------- */ .w6-form.w6-form--noble .wiso_checkbox__visual-input { flex: 0 0 28px !important; width: 28px !important; height: 28px !important; border-radius: 8px !important; background: rgba(255,255,255,0.05); border: 1px solid rgba(65,167,225,0.35); position: relative; transition: all .15s ease; } /* Icon (SVG Maske) */ .w6-form.w6-form--noble .wiso_checkbox__visual-input::before { content: ""; position: absolute; inset: 0; background-color: #0b4f9e; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: 22px; mask-repeat: no-repeat; mask-position: center; mask-size: 22px; opacity: 0.9; } /* unchecked */ .w6-form.w6-form--noble .wiso_checkbox__input + .wiso_checkbox__visual-input::before { -webkit-mask-image: url("../img/extended/icons-form/checkbox-blank-outline.svg"); mask-image: url("../img/extended/icons-form/checkbox-blank-outline.svg"); } /* checked */ .w6-form.w6-form--noble .wiso_checkbox__input:checked + .wiso_checkbox__visual-input { background: linear-gradient(135deg, #0b4f9e, #41A7E1); border-color: #41A7E1; box-shadow: 0 0 0 2px rgba(65,167,225,0.25); } .w6-form.w6-form--noble .wiso_checkbox__input:checked + .wiso_checkbox__visual-input::before { -webkit-mask-image: url("../img/extended/icons-form/checkbox-marked-outline.svg"); mask-image: url("../img/extended/icons-form/checkbox-marked-outline.svg"); background-color: #fff; } /* ---------------------------------------------------------- TEXT (optional rechts) ---------------------------------------------------------- */ .w6-form.w6-form--noble .wiso_text { font-size: 13px; font-weight: 500; color: rgba(235,242,250,0.85); } /* ---------------------------------------------------------- HOVER / FOCUS ---------------------------------------------------------- */ .w6-form.w6-form--noble .wiso_checkbox:hover .wiso_checkbox__visual-input { border-color: #41A7E1; box-shadow: 0 0 6px rgba(65,167,225,0.25); transform: translateY(-1px); } .w6-form.w6-form--noble .wiso_checkbox__input:focus + .wiso_checkbox__visual-input { box-shadow: 0 0 0 2px rgba(65,167,225,0.35); } /* ---------------------------------------------------------- DISABLED ---------------------------------------------------------- */ .w6-form.w6-form--noble .wiso_checkbox__input:disabled + .wiso_checkbox__visual-input { opacity: 0.4; filter: grayscale(0.2); } /* ----------------------------------------------------------------------------- Noble Theme Variants ----------------------------------------------------------------------------- */ /* DARK */ html[data-wiso-theme="dark"] .w6-form.w6-form--noble .wiso_form-fieldset, html[data-wiso-theme="dark"] .w6-form.w6-form--noble fieldset, html[data-wiso-theme="dark"] .w6-form.w6-form--noble .wiso_fieldset { background: linear-gradient(180deg, rgba(31, 36, 46, 0.92) 0%, rgba(26, 31, 40, 0.96) 100%); border-color: rgba(255,255,255,0.045); box-shadow: inset 0 1px 0 rgba(255,255,255,0.035), inset 0 -1px 0 rgba(0,0,0,0.25), 0 8px 20px rgba(0,0,0,0.16); } html[data-wiso-theme="dark"] .w6-form.w6-form--noble .wiso_form-fieldset::before, html[data-wiso-theme="dark"] .w6-form.w6-form--noble fieldset::before, html[data-wiso-theme="dark"] .w6-form.w6-form--noble .wiso_fieldset::before { background: linear-gradient(90deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02)); } html[data-wiso-theme="dark"] .w6-form.w6-form--noble .wiso_form-fieldset > legend, html[data-wiso-theme="dark"] .w6-form.w6-form--noble fieldset > legend, html[data-wiso-theme="dark"] .w6-form.w6-form--noble .wiso_form-legend, html[data-wiso-theme="dark"] .w6-form.w6-form--noble .wiso_form-fieldset-legend { color: #f1f5fb; background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 1px 2px rgba(0,0,0,0.20); border: 1px solid rgba(255,255,255,0.06); } html[data-wiso-theme="dark"] .w6-form.w6-form--noble .wiso_form-label, html[data-wiso-theme="dark"] .w6-form.w6-form--noble label { color: rgba(230, 238, 249, 0.74); } html[data-wiso-theme="dark"] .w6-form.w6-form--noble input, html[data-wiso-theme="dark"] .w6-form.w6-form--noble textarea, html[data-wiso-theme="dark"] .w6-form.w6-form--noble select, html[data-wiso-theme="dark"] .w6-form.w6-form--noble .wiso_input, html[data-wiso-theme="dark"] .w6-form.w6-form--noble .wiso_input input, html[data-wiso-theme="dark"] .w6-form.w6-form--noble .wiso_textarea textarea, html[data-wiso-theme="dark"] .w6-form.w6-form--noble .wiso_combo, html[data-wiso-theme="dark"] .w6-form.w6-form--noble .wiso_combo input, html[data-wiso-theme="dark"] .w6-form.w6-form--noble .wiso_select, html[data-wiso-theme="dark"] .w6-form.w6-form--noble .wiso_select select { background: linear-gradient(180deg, rgba(8, 13, 22, 0.94), rgba(6, 11, 19, 0.96)); border: 1px solid rgba(255,255,255,0.055); color: #e6eef9; box-shadow: inset 0 1px 0 rgba(255,255,255,0.025), inset 0 -1px 0 rgba(0,0,0,0.35); } html[data-wiso-theme="dark"] .w6-form.w6-form--noble input:hover, html[data-wiso-theme="dark"] .w6-form.w6-form--noble textarea:hover, html[data-wiso-theme="dark"] .w6-form.w6-form--noble select:hover, html[data-wiso-theme="dark"] .w6-form.w6-form--noble .wiso_input:hover, html[data-wiso-theme="dark"] .w6-form.w6-form--noble .wiso_input input:hover, html[data-wiso-theme="dark"] .w6-form.w6-form--noble .wiso_combo input:hover, html[data-wiso-theme="dark"] .w6-form.w6-form--noble .wiso_select select:hover { border-color: rgba(11,79,158,0.60); box-shadow: 0 0 0 1px rgba(11,79,158,0.25), 0 0 6px rgba(11,79,158,0.12); } html[data-wiso-theme="dark"] .w6-form.w6-form--noble input:focus, html[data-wiso-theme="dark"] .w6-form.w6-form--noble textarea:focus, html[data-wiso-theme="dark"] .w6-form.w6-form--noble select:focus, html[data-wiso-theme="dark"] .w6-form.w6-form--noble .wiso_input:focus, html[data-wiso-theme="dark"] .w6-form.w6-form--noble .wiso_input input:focus, html[data-wiso-theme="dark"] .w6-form.w6-form--noble .wiso_combo input:focus, html[data-wiso-theme="dark"] .w6-form.w6-form--noble .wiso_select select:focus { border-color: #0b4f9e !important; box-shadow: 0 0 0 1px rgba(11,79,158,0.65), 0 0 10px rgba(11,79,158,0.35), inset 0 1px 0 rgba(255,255,255,0.06); background: linear-gradient(180deg, rgba(12,18,30,0.96), rgba(10,14,22,0.98)); } html[data-wiso-theme="dark"] .w6-form.w6-form--noble .wiso_input__wrapper:focus-within { box-shadow: 0 0 0 1px rgba(11,79,158,0.35), 0 0 14px rgba(11,79,158,0.18); border-radius: 8px; } html[data-wiso-theme="dark"] .w6-form.w6-form--noble .wiso_form-fieldset:focus-within, html[data-wiso-theme="dark"] .w6-form.w6-form--noble fieldset:focus-within, html[data-wiso-theme="dark"] .w6-form.w6-form--noble .wiso_fieldset:focus-within { border-color: rgba(11,79,158,0.26); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 0 0 1px rgba(11,79,158,0.14), 0 0 18px rgba(11,79,158,0.10), 0 10px 24px rgba(0,0,0,0.18); } html[data-wiso-theme="dark"] .w6-form.w6-form--noble .wiso_form-fieldset:focus-within > legend, html[data-wiso-theme="dark"] .w6-form.w6-form--noble fieldset:focus-within > legend, html[data-wiso-theme="dark"] .w6-form.w6-form--noble .wiso_fieldset:focus-within .wiso_form-fieldset-legend, html[data-wiso-theme="dark"] .w6-form.w6-form--noble .wiso_fieldset:focus-within .wiso_form-legend { color: #f4f8ff; border-color: rgba(11,79,158,0.24); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 1px rgba(11,79,158,0.08); } html[data-wiso-theme="dark"] .w6-form.w6-form--noble .wiso_input.wiso_invalid, html[data-wiso-theme="dark"] .w6-form.w6-form--noble textarea.wiso_invalid, html[data-wiso-theme="dark"] .w6-form.w6-form--noble .wiso_combo input.wiso_invalid, html[data-wiso-theme="dark"] .w6-form.w6-form--noble .wiso_select select.wiso_invalid { border-color: #d64545 !important; box-shadow: 0 0 0 1px rgba(214,69,69,0.6), 0 0 8px rgba(214,69,69,0.25); } html[data-wiso-theme="dark"] .w6-form.w6-form--noble .wiso_input.wiso_invalid:focus, html[data-wiso-theme="dark"] .w6-form.w6-form--noble textarea.wiso_invalid:focus { border-color: #ff6b6b !important; box-shadow: 0 0 0 1px rgba(255,107,107,0.8), 0 0 12px rgba(255,107,107,0.35); } html[data-wiso-theme="dark"] .w6-form.w6-form--noble .wiso_input:disabled, html[data-wiso-theme="dark"] .w6-form.w6-form--noble textarea:disabled, html[data-wiso-theme="dark"] .w6-form.w6-form--noble .wiso_combo input:disabled, html[data-wiso-theme="dark"] .w6-form.w6-form--noble .wiso_select select:disabled { color: rgba(180,190,210,0.6); background: linear-gradient(180deg, rgba(20,25,35,0.9), rgba(15,18,25,0.95)); border-color: rgba(255,255,255,0.06); box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); cursor: not-allowed; opacity: 0.85; } html[data-wiso-theme="dark"] .w6-form.w6-form--noble .wiso_input:active, html[data-wiso-theme="dark"] .w6-form.w6-form--noble textarea:active { box-shadow: 0 0 0 1px rgba(11,79,158,0.7), inset 0 2px 4px rgba(0,0,0,0.4); } html[data-wiso-theme="dark"] .w6-form.w6-form--noble .wiso_text { color: rgba(230, 238, 249, 0.82); } /* LIGHT */ html[data-wiso-theme="light"] .w6-form.w6-form--noble .wiso_form-fieldset, html[data-wiso-theme="light"] .w6-form.w6-form--noble fieldset, html[data-wiso-theme="light"] .w6-form.w6-form--noble .wiso_fieldset { background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(248,250,253,0.98) 100%); border-color: rgba(25, 43, 70, 0.08); box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 8px 18px rgba(28, 40, 60, 0.06); } html[data-wiso-theme="light"] .w6-form.w6-form--noble .wiso_form-fieldset::before, html[data-wiso-theme="light"] .w6-form.w6-form--noble fieldset::before, html[data-wiso-theme="light"] .w6-form.w6-form--noble .wiso_fieldset::before { background: linear-gradient(90deg, rgba(11,79,158,0.12), rgba(11,79,158,0.02)); } html[data-wiso-theme="light"] .w6-form.w6-form--noble .wiso_form-fieldset > legend, html[data-wiso-theme="light"] .w6-form.w6-form--noble fieldset > legend, html[data-wiso-theme="light"] .w6-form.w6-form--noble .wiso_form-legend, html[data-wiso-theme="light"] .w6-form.w6-form--noble .wiso_form-fieldset-legend { color: #1f2c3d; background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(245,248,252,0.96)); border: 1px solid rgba(25, 43, 70, 0.10); box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 1px 2px rgba(28,40,60,0.06); } html[data-wiso-theme="light"] .w6-form.w6-form--noble .wiso_form-label, html[data-wiso-theme="light"] .w6-form.w6-form--noble label { color: rgba(30, 42, 58, 0.72); } html[data-wiso-theme="light"] .w6-form.w6-form--noble input, html[data-wiso-theme="light"] .w6-form.w6-form--noble textarea, html[data-wiso-theme="light"] .w6-form.w6-form--noble select, html[data-wiso-theme="light"] .w6-form.w6-form--noble .wiso_input, html[data-wiso-theme="light"] .w6-form.w6-form--noble .wiso_input input, html[data-wiso-theme="light"] .w6-form.w6-form--noble .wiso_textarea textarea, html[data-wiso-theme="light"] .w6-form.w6-form--noble .wiso_combo, html[data-wiso-theme="light"] .w6-form.w6-form--noble .wiso_combo input, html[data-wiso-theme="light"] .w6-form.w6-form--noble .wiso_select, html[data-wiso-theme="light"] .w6-form.w6-form--noble .wiso_select select { background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(252,253,255,0.98)); border: 1px solid rgba(25, 43, 70, 0.10); color: #202b3b; box-shadow: inset 0 1px 0 rgba(255,255,255,0.80); } html[data-wiso-theme="light"] .w6-form.w6-form--noble input:hover, html[data-wiso-theme="light"] .w6-form.w6-form--noble textarea:hover, html[data-wiso-theme="light"] .w6-form.w6-form--noble select:hover, html[data-wiso-theme="light"] .w6-form.w6-form--noble .wiso_input input:hover, html[data-wiso-theme="light"] .w6-form.w6-form--noble .wiso_combo input:hover, html[data-wiso-theme="light"] .w6-form.w6-form--noble .wiso_select select:hover { border-color: rgba(11,79,158,0.16); } html[data-wiso-theme="light"] .w6-form.w6-form--noble input:focus, html[data-wiso-theme="light"] .w6-form.w6-form--noble textarea:focus, html[data-wiso-theme="light"] .w6-form.w6-form--noble select:focus, html[data-wiso-theme="light"] .w6-form.w6-form--noble .wiso_input input:focus, html[data-wiso-theme="light"] .w6-form.w6-form--noble .wiso_combo input:focus, html[data-wiso-theme="light"] .w6-form.w6-form--noble .wiso_select select:focus { border-color: #0b4f9e !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 0 0 2px rgba(11,79,158,0.08); background: #ffffff; } html[data-wiso-theme="light"] .w6-form.w6-form--noble .wiso_form-fieldset:focus-within, html[data-wiso-theme="light"] .w6-form.w6-form--noble fieldset:focus-within, html[data-wiso-theme="light"] .w6-form.w6-form--noble .wiso_fieldset:focus-within { border-color: rgba(11,79,158,0.14); box-shadow: inset 0 1px 0 rgba(255,255,255,0.88), 0 0 0 1px rgba(11,79,158,0.08), 0 10px 22px rgba(28,40,60,0.08); } html[data-wiso-theme="light"] .w6-form.w6-form--noble .wiso_text { color: rgba(32, 43, 59, 0.82); } /* CONTRAST LIGHT */ html[data-wiso-theme="contrast-light"] .w6-form.w6-form--noble .wiso_form-fieldset, html[data-wiso-theme="contrast-light"] .w6-form.w6-form--noble fieldset, html[data-wiso-theme="contrast-light"] .w6-form.w6-form--noble .wiso_fieldset { background: #ffffff; border: 2px solid #111111; box-shadow: none; } html[data-wiso-theme="contrast-light"] .w6-form.w6-form--noble .wiso_form-fieldset::before, html[data-wiso-theme="contrast-light"] .w6-form.w6-form--noble fieldset::before, html[data-wiso-theme="contrast-light"] .w6-form.w6-form--noble .wiso_fieldset::before { background: #111111; } html[data-wiso-theme="contrast-light"] .w6-form.w6-form--noble .wiso_form-fieldset > legend, html[data-wiso-theme="contrast-light"] .w6-form.w6-form--noble fieldset > legend, html[data-wiso-theme="contrast-light"] .w6-form.w6-form--noble .wiso_form-legend, html[data-wiso-theme="contrast-light"] .w6-form.w6-form--noble .wiso_form-fieldset-legend { color: #111111; background: #ffffff; border: 2px solid #111111; box-shadow: none; } html[data-wiso-theme="contrast-light"] .w6-form.w6-form--noble input, html[data-wiso-theme="contrast-light"] .w6-form.w6-form--noble textarea, html[data-wiso-theme="contrast-light"] .w6-form.w6-form--noble select, html[data-wiso-theme="contrast-light"] .w6-form.w6-form--noble .wiso_input input, html[data-wiso-theme="contrast-light"] .w6-form.w6-form--noble .wiso_combo input, html[data-wiso-theme="contrast-light"] .w6-form.w6-form--noble .wiso_select select { background: #ffffff; border: 2px solid #111111; color: #111111; box-shadow: none; } html[data-wiso-theme="contrast-light"] .w6-form.w6-form--noble .wiso_form-label, html[data-wiso-theme="contrast-light"] .w6-form.w6-form--noble label, html[data-wiso-theme="contrast-light"] .w6-form.w6-form--noble .wiso_text { color: #111111; } html[data-wiso-theme="contrast-light"] .w6-form.w6-form--noble input:focus, html[data-wiso-theme="contrast-light"] .w6-form.w6-form--noble textarea:focus, html[data-wiso-theme="contrast-light"] .w6-form.w6-form--noble select:focus { border: 2px solid #000 !important; box-shadow: none; } /* CONTRAST DARK */ html[data-wiso-theme="contrast-dark"] .w6-form.w6-form--noble .wiso_form-fieldset, html[data-wiso-theme="contrast-dark"] .w6-form.w6-form--noble fieldset, html[data-wiso-theme="contrast-dark"] .w6-form.w6-form--noble .wiso_fieldset { background: #000000; border: 2px solid #f2f2f2; box-shadow: none; } html[data-wiso-theme="contrast-dark"] .w6-form.w6-form--noble .wiso_form-fieldset::before, html[data-wiso-theme="contrast-dark"] .w6-form.w6-form--noble fieldset::before, html[data-wiso-theme="contrast-dark"] .w6-form.w6-form--noble .wiso_fieldset::before { background: #f2f2f2; } html[data-wiso-theme="contrast-dark"] .w6-form.w6-form--noble .wiso_form-fieldset > legend, html[data-wiso-theme="contrast-dark"] .w6-form.w6-form--noble fieldset > legend, html[data-wiso-theme="contrast-dark"] .w6-form.w6-form--noble .wiso_form-legend, html[data-wiso-theme="contrast-dark"] .w6-form.w6-form--noble .wiso_form-fieldset-legend { color: #ffffff; background: #000000; border: 2px solid #ffffff; box-shadow: none; } html[data-wiso-theme="contrast-dark"] .w6-form.w6-form--noble input, html[data-wiso-theme="contrast-dark"] .w6-form.w6-form--noble textarea, html[data-wiso-theme="contrast-dark"] .w6-form.w6-form--noble select, html[data-wiso-theme="contrast-dark"] .w6-form.w6-form--noble .wiso_input input, html[data-wiso-theme="contrast-dark"] .w6-form.w6-form--noble .wiso_combo input, html[data-wiso-theme="contrast-dark"] .w6-form.w6-form--noble .wiso_select select { background: #000000; border: 2px solid #f2f2f2; color: #ffffff; box-shadow: none; } html[data-wiso-theme="contrast-dark"] .w6-form.w6-form--noble .wiso_form-label, html[data-wiso-theme="contrast-dark"] .w6-form.w6-form--noble label, html[data-wiso-theme="contrast-dark"] .w6-form.w6-form--noble .wiso_text { color: #ffffff; } html[data-wiso-theme="contrast-dark"] .w6-form.w6-form--noble input:focus, html[data-wiso-theme="contrast-dark"] .w6-form.w6-form--noble textarea:focus, html[data-wiso-theme="contrast-dark"] .w6-form.w6-form--noble select:focus { border: 2px solid #0b4f9e !important; box-shadow: none; } /* ========================================================= W6 FORM – Fixes 1) Mehr Abstand unter Checkboxen 2) Inneren zweiten Rahmen bei aktiver Combobox entfernen ========================================================= */ /* --------------------------------------------------------- 1) Checkboxen: mehr Abstand nach unten --------------------------------------------------------- */ /* ganze Checkbox-Zeile */ .w6-form.w6-form--noble .wiso_form-group--checkbox, .wiso_widget.w6-form .wiso_form-group--checkbox { margin-bottom: 15px !important; } /* falls mehrere Checkbox-Zellen direkt untereinander stehen */ .w6-form.w6-form--noble [data-cell-id="RequireSignature"], .w6-form.w6-form--noble [data-cell-id="RequireSignedMdn"], .w6-form.w6-form--noble [data-cell-id="RequireEncryption"] { padding-bottom: 15px !important; box-sizing: border-box; } /* letzte Checkbox im Block nicht unnötig doppelt aufblasen */ .w6-form.w6-form--noble .wiso_form-group--checkbox:last-child, .wiso_widget.w6-form .wiso_form-group--checkbox:last-child { margin-bottom: 0 !important; } /* --------------------------------------------------------- 2) Combobox: zweiten inneren Rahmen entfernen --------------------------------------------------------- */ /* äußerer Wrapper bleibt der eigentliche Rahmen */ .wiso_widget.w6-form .wiso_combobox-input-box, .w6-form.w6-form--noble .wiso_combobox-input-box { overflow: hidden; } /* innerer Bereich / List-Wrapper darf keinen eigenen Rand / Glow zeichnen */ .wiso_widget.w6-form .wiso_combobox-input-list-wrapper, .wiso_widget.w6-form .wiso_combobox-input-list, .wiso_widget.w6-form .wiso_combobox-input-list__item, .wiso_widget.w6-form .wiso_combobox-input-list__item--input, .wiso_widget.w6-form .wiso_combobox-input, .w6-form.w6-form--noble .wiso_combobox-input-list-wrapper, .w6-form.w6-form--noble .wiso_combobox-input-list, .w6-form.w6-form--noble .wiso_combobox-input-list__item, .w6-form.w6-form--noble .wiso_combobox-input-list__item--input, .w6-form.w6-form--noble .wiso_combobox-input { border: none !important; box-shadow: none !important; outline: none !important; background-image: none !important; } /* der echte Input in der Combobox ebenfalls komplett clean */ .wiso_widget.w6-form .wiso_combobox-input-list__item--input input, .wiso_widget.w6-form .wiso_combobox-input input, .w6-form.w6-form--noble .wiso_combobox-input-list__item--input input, .w6-form.w6-form--noble .wiso_combobox-input input { border: none !important; box-shadow: none !important; outline: none !important; background: transparent !important; } /* Focus nur auf dem äußeren Combobox-Wrapper */ .wiso_widget.w6-form .wiso_combobox-input-box:focus-within, .w6-form.w6-form--noble .wiso_combobox-input-box:focus-within { border-color: #0b4f9e !important; box-shadow: 0 0 0 2px rgba(11,79,158,0.25) !important; } /* sicherstellen, dass innen bei Focus nichts zusätzlich malt */ .wiso_widget.w6-form .wiso_combobox-input-box:focus-within .wiso_combobox-input-list-wrapper, .wiso_widget.w6-form .wiso_combobox-input-box:focus-within .wiso_combobox-input-list, .wiso_widget.w6-form .wiso_combobox-input-box:focus-within .wiso_combobox-input, .w6-form.w6-form--noble .wiso_combobox-input-box:focus-within .wiso_combobox-input-list-wrapper, .w6-form.w6-form--noble .wiso_combobox-input-box:focus-within .wiso_combobox-input-list, .w6-form.w6-form--noble .wiso_combobox-input-box:focus-within .wiso_combobox-input { border: none !important; box-shadow: none !important; outline: none !important; } /* ========================================================= W6 HelpMessage --------------------------------------------------------- Passend zu w6-form--noble Unterstützt: - light - dark - contrast-light - contrast-dark ========================================================= */ /* --------------------------------------------------------- Basis --------------------------------------------------------- */ .w6-helpmessage { position: relative; margin: 14px 0 12px 0; padding: 18px 16px 14px 16px; border-radius: 10px; border: 1px solid transparent; overflow: visible; box-sizing: border-box; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease; } .w6-helpmessage::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 1px; opacity: 0.65; pointer-events: none; } .w6-helpmessage__header { position: absolute; top: -11px; left: 14px; display: inline-flex; align-items: center; min-height: 22px; padding: 0 10px; border-radius: 6px; font-size: 11px; line-height: 1; font-weight: 800; letter-spacing: 0.10em; text-transform: uppercase; z-index: 2; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease; } .w6-helpmessage__header::before { content: ""; display: inline-block; width: 3px; height: 12px; margin-right: 8px; border-radius: 2px; background: #0b4f9e; opacity: 0.90; flex: 0 0 auto; } .w6-helpmessage__body { display: flex; flex-direction: column; gap: 9px; } .w6-helpmessage__text { font-size: 12.5px; line-height: 1.5; font-weight: 500; } .w6-helpmessage__highlight { display: inline-flex; align-self: flex-start; padding: 6px 10px; border-radius: 8px; font-size: 12.5px; line-height: 1.35; font-weight: 700; border: 1px solid transparent; transition: background .18s ease, border-color .18s ease, color .18s ease; } /* --------------------------------------------------------- LIGHT --------------------------------------------------------- */ html[data-wiso-theme="light"] .w6-helpmessage { background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,253,0.98)); border-color: rgba(25, 43, 70, 0.08); box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 8px 18px rgba(28, 40, 60, 0.06); color: #1f2c3d; } html[data-wiso-theme="light"] .w6-helpmessage::before { background: linear-gradient(90deg, rgba(11,79,158,0.12), rgba(11,79,158,0.02)); } html[data-wiso-theme="light"] .w6-helpmessage__header { color: #1f2c3d; background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(245,248,252,0.96)); border: 1px solid rgba(25, 43, 70, 0.10); box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 1px 2px rgba(28,40,60,0.06); } html[data-wiso-theme="light"] .w6-helpmessage__text { color: rgba(32, 43, 59, 0.86); } html[data-wiso-theme="light"] .w6-helpmessage__highlight { background: rgba(11, 79, 158, 0.06); border-color: rgba(11, 79, 158, 0.14); color: #0b4f9e; } /* --------------------------------------------------------- DARK --------------------------------------------------------- */ html[data-wiso-theme="dark"] .w6-helpmessage { background: linear-gradient(180deg, rgba(31, 36, 46, 0.92), rgba(26, 31, 40, 0.96)); border-color: rgba(255,255,255,0.045); box-shadow: inset 0 1px 0 rgba(255,255,255,0.035), inset 0 -1px 0 rgba(0,0,0,0.25), 0 8px 20px rgba(0,0,0,0.16); color: #e6eef9; } html[data-wiso-theme="dark"] .w6-helpmessage::before { background: linear-gradient(90deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02)); } html[data-wiso-theme="dark"] .w6-helpmessage__header { color: #f1f5fb; background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); border: 1px solid rgba(255,255,255,0.06); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 1px 2px rgba(0,0,0,0.20); } html[data-wiso-theme="dark"] .w6-helpmessage__text { color: rgba(230, 238, 249, 0.84); } html[data-wiso-theme="dark"] .w6-helpmessage__highlight { background: rgba(11, 79, 158, 0.12); border-color: rgba(11, 79, 158, 0.22); color: #8dbbff; } /* --------------------------------------------------------- CONTRAST LIGHT --------------------------------------------------------- */ html[data-wiso-theme="contrast-light"] .w6-helpmessage { background: #ffffff; border: 2px solid #111111; box-shadow: none; color: #111111; } html[data-wiso-theme="contrast-light"] .w6-helpmessage::before { background: #111111; } html[data-wiso-theme="contrast-light"] .w6-helpmessage__header { color: #111111; background: #ffffff; border: 2px solid #111111; box-shadow: none; } html[data-wiso-theme="contrast-light"] .w6-helpmessage__text { color: #111111; } html[data-wiso-theme="contrast-light"] .w6-helpmessage__highlight { background: #ffffff; border: 2px solid #0b4f9e; color: #0b4f9e; } /* --------------------------------------------------------- CONTRAST DARK --------------------------------------------------------- */ html[data-wiso-theme="contrast-dark"] .w6-helpmessage { background: #000000; border: 2px solid #f2f2f2; box-shadow: none; color: #ffffff; } html[data-wiso-theme="contrast-dark"] .w6-helpmessage::before { background: #f2f2f2; } html[data-wiso-theme="contrast-dark"] .w6-helpmessage__header { color: #ffffff; background: #000000; border: 2px solid #ffffff; box-shadow: none; } html[data-wiso-theme="contrast-dark"] .w6-helpmessage__text { color: #ffffff; } html[data-wiso-theme="contrast-dark"] .w6-helpmessage__highlight { background: #000000; border: 2px solid #0b4f9e; color: #8dbbff; } /* ========================================================= W6 Window Content – Scroll Fix für Formularfenster Ursache: .wiso_window-content zentriert den Inhalt und verhindert sauberes Layout/Scrolling. ========================================================= */ /* 1) Window-Content darf NICHT zentrieren */ div.wiso_layout-cell.wiso_window-content { text-align: left !important; align-items: stretch !important; justify-content: flex-start !important; vertical-align: top !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; min-height: 0 !important; min-width: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* 2) Form-Root füllt den Content sauber */ #w6as2ConfigurationFormRoot, #as2ConfigurationFormRoot, div.w6-as2configuration-form-root { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; width: 100% !important; height: 100% !important; min-height: 0 !important; min-width: 0 !important; overflow: hidden !important; box-sizing: border-box !important; } /* 3) DAS echte Form-Element wird zum Scrollcontainer */ #w6as2ConfigurationFormRoot > .w6-form.w6-form--noble, #as2ConfigurationFormRoot > .w6-form.w6-form--noble, div.w6-as2configuration-form-root > .w6-form.w6-form--noble, #w6as2ConfigurationFormRoot > .wiso_widget.wiso_layout.wiso_layout-rows.w6-form.w6-form--noble.wiso_form, #as2ConfigurationFormRoot > .wiso_widget.wiso_layout.wiso_layout-rows.w6-form.w6-form--noble.wiso_form, div.w6-as2configuration-form-root > .wiso_widget.wiso_layout.wiso_layout-rows.w6-form.w6-form--noble.wiso_form { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; width: 100% !important; height: 100% !important; min-height: 0 !important; min-width: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; box-sizing: border-box !important; align-items: stretch !important; justify-content: flex-start !important; text-align: left !important; } /* 4) direkte Kinder normal untereinander */ #w6as2ConfigurationFormRoot > .w6-form.w6-form--noble > .wiso_layout-cell, #as2ConfigurationFormRoot > .w6-form.w6-form--noble > .wiso_layout-cell, div.w6-as2configuration-form-root > .w6-form.w6-form--noble > .wiso_layout-cell, #w6as2ConfigurationFormRoot > .wiso_widget.wiso_layout.wiso_layout-rows.w6-form.w6-form--noble.wiso_form > .wiso_layout-cell, #as2ConfigurationFormRoot > .wiso_widget.wiso_layout.wiso_layout-rows.w6-form.w6-form--noble.wiso_form > .wiso_layout-cell, div.w6-as2configuration-form-root > .wiso_widget.wiso_layout.wiso_layout-rows.w6-form.w6-form--noble.wiso_form > .wiso_layout-cell { flex: 0 0 auto !important; } /* 5) Scrollbar */ #w6as2ConfigurationFormRoot > .w6-form.w6-form--noble::-webkit-scrollbar, #as2ConfigurationFormRoot > .w6-form.w6-form--noble::-webkit-scrollbar, div.w6-as2configuration-form-root > .w6-form.w6-form--noble::-webkit-scrollbar, #w6as2ConfigurationFormRoot > .wiso_widget.wiso_layout.wiso_layout-rows.w6-form.w6-form--noble.wiso_form::-webkit-scrollbar, #as2ConfigurationFormRoot > .wiso_widget.wiso_layout.wiso_layout-rows.w6-form.w6-form--noble.wiso_form::-webkit-scrollbar, div.w6-as2configuration-form-root > .wiso_widget.wiso_layout.wiso_layout-rows.w6-form.w6-form--noble.wiso_form::-webkit-scrollbar { width: 8px; } #w6as2ConfigurationFormRoot > .w6-form.w6-form--noble::-webkit-scrollbar-thumb, #as2ConfigurationFormRoot > .w6-form.w6-form--noble::-webkit-scrollbar-thumb, div.w6-as2configuration-form-root > .w6-form.w6-form--noble::-webkit-scrollbar-thumb, #w6as2ConfigurationFormRoot > .wiso_widget.wiso_layout.wiso_layout-rows.w6-form.w6-form--noble.wiso_form::-webkit-scrollbar-thumb, #as2ConfigurationFormRoot > .wiso_widget.wiso_layout.wiso_layout-rows.w6-form.w6-form--noble.wiso_form::-webkit-scrollbar-thumb, div.w6-as2configuration-form-root > .wiso_widget.wiso_layout.wiso_layout-rows.w6-form.w6-form--noble.wiso_form::-webkit-scrollbar-thumb { background: rgba(11,79,158,0.38); border-radius: 8px; } /* Container */ .w6-file-cell { display: flex; align-items: center; } /* ========================================================= W6 File Template – edle Icon-Darstellung mit SVG-Mask Unterstützt Light / Dark / Contrast Themes ========================================================= */ /* ---------- Grundlayout ---------- */ .w6-file-cell { display: flex; align-items: center; gap: 10px; min-height: 28px; width: 100%; overflow: hidden; } .w6-file-icon-wrap { position: relative; width: 24px; min-width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease; } .w6-file-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2; } /* ---------- Icon via SVG Mask ---------- */ .w6-file-icon { width: 20px; height: 20px; display: inline-block; flex-shrink: 0; background-color: currentColor; -webkit-mask-image: var(--icon); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; mask-image: var(--icon); mask-repeat: no-repeat; mask-position: center; mask-size: contain; transition: filter 0.16s ease, transform 0.16s ease, opacity 0.16s ease; } /* ---------- Extension Badge ---------- */ .w6-file-ext-badge { position: absolute; right: -8px; bottom: -6px; max-width: 28px; padding: 0 4px; height: 12px; line-height: 12px; border-radius: 999px; font-size: 8px; font-weight: 700; letter-spacing: 0.2px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 2px 8px rgba(0,0,0,.14); border: 1px solid rgba(255,255,255,.18); } /* ---------- Hover / Selection edel ---------- */ .w6-file-cell:hover .w6-file-icon-wrap { transform: translateY(-1px); } .w6-file-cell:hover .w6-file-icon { filter: drop-shadow(0 2px 6px rgba(0,0,0,.16)); } /* ========================================================= LIGHT ========================================================= */ :root, [data-wiso-theme="light"], [data-wiso-theme="contrast-light"] { --w6-file-name-color: #2d3039; --w6-file-badge-bg: rgba(255,255,255,0.96); --w6-file-badge-color: #2d3039; --w6-file-hover-bg: linear-gradient(180deg, rgba(11,79,158,0.06), rgba(11,79,158,0.03)); --w6-file-hover-shadow: 0 6px 14px rgba(11,79,158,0.10); --w6-file-folder: #f49519; --w6-file-pdf: #d62828; --w6-file-xml: #0b8f87; --w6-file-json: #0b4f9e; --w6-file-js: #d9a300; --w6-file-ts: #2563eb; --w6-file-css: #2980b9; --w6-file-html: #e76f51; --w6-file-txt: #6c757d; --w6-file-excel: #2f9e44; --w6-file-word: #3b5bdb; --w6-file-archive: #8d6e63; --w6-file-image: #9c36b5; --w6-file-default: #8f99a3; } [data-wiso-theme="light"] .w6-file-name, [data-wiso-theme="contrast-light"] .w6-file-name, :root .w6-file-name { color: var(--w6-file-name-color); } [data-wiso-theme="light"] .w6-file-cell:hover .w6-file-icon-wrap, [data-wiso-theme="contrast-light"] .w6-file-cell:hover .w6-file-icon-wrap, :root .w6-file-cell:hover .w6-file-icon-wrap { background: var(--w6-file-hover-bg); box-shadow: var(--w6-file-hover-shadow); } [data-wiso-theme="light"] .w6-file-ext-badge, [data-wiso-theme="contrast-light"] .w6-file-ext-badge, :root .w6-file-ext-badge { background: var(--w6-file-badge-bg); color: var(--w6-file-badge-color); } /* ========================================================= DARK ========================================================= */ [data-wiso-theme="dark"], [data-wiso-theme="contrast-dark"] { --w6-file-name-color: rgba(230,238,250,0.96); --w6-file-badge-bg: rgba(45,48,57,0.96); --w6-file-badge-color: rgba(230,238,250,0.96); --w6-file-hover-bg: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04)); --w6-file-hover-shadow: 0 8px 16px rgba(0,0,0,0.28); --w6-file-folder: #f7b955; --w6-file-pdf: #ff6b6b; --w6-file-xml: #2ec4b6; --w6-file-json: #41a7e1; --w6-file-js: #ffe066; --w6-file-ts: #74c0fc; --w6-file-css: #4dabf7; --w6-file-html: #ff922b; --w6-file-txt: #ced4da; --w6-file-excel: #69db7c; --w6-file-word: #91a7ff; --w6-file-archive: #c4a484; --w6-file-image: #da77f2; --w6-file-default: #9aa4b2; } [data-wiso-theme="dark"] .w6-file-name, [data-wiso-theme="contrast-dark"] .w6-file-name { color: var(--w6-file-name-color); } [data-wiso-theme="dark"] .w6-file-cell:hover .w6-file-icon-wrap, [data-wiso-theme="contrast-dark"] .w6-file-cell:hover .w6-file-icon-wrap { background: var(--w6-file-hover-bg); box-shadow: var(--w6-file-hover-shadow); } [data-wiso-theme="dark"] .w6-file-ext-badge, [data-wiso-theme="contrast-dark"] .w6-file-ext-badge { background: var(--w6-file-badge-bg); color: var(--w6-file-badge-color); } /* ========================================================= Farbklassen ========================================================= */ .w6-file-icon--folder { color: var(--w6-file-folder); } .w6-file-icon--pdf { color: var(--w6-file-pdf); } .w6-file-icon--xml { color: var(--w6-file-xml); } .w6-file-icon--json { color: var(--w6-file-json); } .w6-file-icon--js { color: var(--w6-file-js); } .w6-file-icon--ts { color: var(--w6-file-ts); } .w6-file-icon--css { color: var(--w6-file-css); } .w6-file-icon--html { color: var(--w6-file-html); } .w6-file-icon--txt { color: var(--w6-file-txt); } .w6-file-icon--excel { color: var(--w6-file-excel); } .w6-file-icon--word { color: var(--w6-file-word); } .w6-file-icon--archive { color: var(--w6-file-archive); } .w6-file-icon--image { color: var(--w6-file-image); } .w6-file-icon--default { color: var(--w6-file-default); } /* ---------- optional: Badge bei Folder ausblenden ---------- */ .w6-file-icon--folder + .w6-file-ext-badge { display: none; } /* ========================================================== W6 AS2 Configuration – Sideform Readonly + Empty State Ziel: 1) Eingedockte Sideform als hochwertige Leseansicht 2) Werte klar sichtbar, nicht blass wie disabled 3) Keine Bearbeitung in Dock-Ansicht 4) Schöne Startansicht ohne selektierte Row ========================================================== */ /* ---------------------------------------------------------- ROOT ---------------------------------------------------------- */ .w6-as2configuration-form-root { position: relative; min-height: 100%; overflow: auto; } /* ---------------------------------------------------------- EMPTY STATE ---------------------------------------------------------- */ .w6-sideform-empty { display: none; min-height: 100%; padding: 18px; box-sizing: border-box; } .w6-as2configuration-form-root.w6-sideform--empty .w6-sideform-empty { display: flex; align-items: center; justify-content: center; } .w6-as2configuration-form-root.w6-sideform--empty .wiso_form, .w6-as2configuration-form-root.w6-sideform--empty .w6-form { display: none; } .w6-sideform-empty__panel { width: 100%; max-width: 520px; border-radius: 22px; padding: 28px 26px; text-align: center; box-sizing: border-box; border: 1px solid rgba(11, 79, 158, 0.16); box-shadow: 0 14px 38px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.35); } .w6-sideform-empty__icon { width: 72px; height: 72px; margin: 0 auto 18px auto; border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 34px; } .w6-sideform-empty__title { font-size: 21px; line-height: 1.2; font-weight: 800; margin-bottom: 10px; } .w6-sideform-empty__text { font-size: 14px; line-height: 1.6; margin-bottom: 12px; } .w6-sideform-empty__hint { font-size: 13px; line-height: 1.55; padding: 12px 14px; border-radius: 14px; } /* Light */ html[data-wiso-theme="light"] .w6-sideform-empty__panel, html[data-wiso-theme="contrast-light"] .w6-sideform-empty__panel { background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 249, 255, 0.98)); color: #223047; } html[data-wiso-theme="light"] .w6-sideform-empty__icon, html[data-wiso-theme="contrast-light"] .w6-sideform-empty__icon { color: #0b4f9e; background: linear-gradient(180deg, rgba(65, 167, 225, 0.16), rgba(11, 79, 158, 0.10)); border: 1px solid rgba(11, 79, 158, 0.15); box-shadow: 0 10px 24px rgba(11, 79, 158, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.65); } html[data-wiso-theme="light"] .w6-sideform-empty__text, html[data-wiso-theme="contrast-light"] .w6-sideform-empty__text { color: #50607a; } html[data-wiso-theme="light"] .w6-sideform-empty__hint, html[data-wiso-theme="contrast-light"] .w6-sideform-empty__hint { color: #41506a; background: rgba(11, 79, 158, 0.06); border: 1px solid rgba(11, 79, 158, 0.10); } /* Dark */ html[data-wiso-theme="dark"] .w6-sideform-empty__panel, html[data-wiso-theme="contrast-dark"] .w6-sideform-empty__panel { background: linear-gradient(180deg, rgba(44, 48, 58, 0.98), rgba(34, 37, 46, 0.98)); color: rgba(238, 244, 252, 0.96); border-color: rgba(65, 167, 225, 0.14); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.04); } html[data-wiso-theme="dark"] .w6-sideform-empty__icon, html[data-wiso-theme="contrast-dark"] .w6-sideform-empty__icon { color: #7fd2ff; background: linear-gradient(180deg, rgba(65, 167, 225, 0.18), rgba(11, 79, 158, 0.16)); border: 1px solid rgba(65, 167, 225, 0.14); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.05); } html[data-wiso-theme="dark"] .w6-sideform-empty__text, html[data-wiso-theme="contrast-dark"] .w6-sideform-empty__text { color: rgba(212, 222, 236, 0.82); } html[data-wiso-theme="dark"] .w6-sideform-empty__hint, html[data-wiso-theme="contrast-dark"] .w6-sideform-empty__hint { color: rgba(214, 226, 240, 0.82); background: rgba(11, 79, 158, 0.18); border: 1px solid rgba(65, 167, 225, 0.12); } /* ========================================================== AS2 Sideform Mode Hint ========================================================== */ .w6-sideform-modehint { position: sticky; top: 0; z-index: 3; padding: 10px 16px 0 16px; background: transparent; } .w6-sideform-modehint__inner { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 10px 14px; border-radius: 14px; font-size: 12px; line-height: 1.45; font-weight: 600; border: 1px solid transparent; backdrop-filter: blur(8px); } .w6-sideform-modehint__inner .mdi { font-size: 16px; flex: 0 0 auto; } /* Light */ html[data-wiso-theme="light"] .w6-sideform-modehint__inner--readonly, html[data-wiso-theme="contrast-light"] .w6-sideform-modehint__inner--readonly { color: #35506f; background: rgba(11, 79, 158, 0.08); border-color: rgba(11, 79, 158, 0.12); } html[data-wiso-theme="light"] .w6-sideform-modehint__inner--edit, html[data-wiso-theme="contrast-light"] .w6-sideform-modehint__inner--edit { color: #21543b; background: rgba(65, 167, 225, 0.10); border-color: rgba(65, 167, 225, 0.18); } /* Dark */ html[data-wiso-theme="dark"] .w6-sideform-modehint__inner--readonly, html[data-wiso-theme="contrast-dark"] .w6-sideform-modehint__inner--readonly { color: rgba(225, 235, 247, 0.92); background: rgba(11, 79, 158, 0.20); border-color: rgba(65, 167, 225, 0.14); } html[data-wiso-theme="dark"] .w6-sideform-modehint__inner--edit, html[data-wiso-theme="contrast-dark"] .w6-sideform-modehint__inner--edit { color: rgba(225, 241, 233, 0.95); background: rgba(35, 120, 86, 0.22); border-color: rgba(92, 190, 150, 0.16); } /* ========================================================== Combo readonly / editable styling ========================================================== */ /* Docked readonly */ .w6-as2configuration-form-root.w6-sideform--readonly .wiso_combobox, .w6-as2configuration-form-root.w6-sideform--readonly .wiso_combobox input, .w6-as2configuration-form-root.w6-sideform--readonly .wiso_combobox-input-list-wrapper { opacity: 1 !important; } html[data-wiso-theme="dark"] .w6-as2configuration-form-root.w6-sideform--readonly .wiso_combobox-input-list-wrapper, html[data-wiso-theme="contrast-dark"] .w6-as2configuration-form-root.w6-sideform--readonly .wiso_combobox-input-list-wrapper { background: linear-gradient(180deg, rgba(46, 50, 60, 0.96), rgba(39, 43, 52, 0.96)) !important; border: 1px solid rgba(255,255,255,0.06) !important; box-shadow: none !important; } html[data-wiso-theme="light"] .w6-as2configuration-form-root.w6-sideform--readonly .wiso_combobox-input-list-wrapper, html[data-wiso-theme="contrast-light"] .w6-as2configuration-form-root.w6-sideform--readonly .wiso_combobox-input-list-wrapper { background: linear-gradient(180deg, rgba(248,250,253,0.98), rgba(242,246,251,0.98)) !important; border: 1px solid rgba(11,79,158,0.10) !important; box-shadow: none !important; } /* Edit mode: kein graues Innenleben */ html[data-wiso-theme="dark"] .w6-as2configuration-form-root:not(.w6-sideform--readonly) .wiso_combobox-input-list-wrapper, html[data-wiso-theme="contrast-dark"] .w6-as2configuration-form-root:not(.w6-sideform--readonly) .wiso_combobox-input-list-wrapper { background: linear-gradient(180deg, rgba(17, 24, 39, 0.96), rgba(10, 16, 28, 0.96)) !important; border: 1px solid rgba(65, 167, 225, 0.12) !important; box-shadow: none !important; } html[data-wiso-theme="light"] .w6-as2configuration-form-root:not(.w6-sideform--readonly) .wiso_combobox-input-list-wrapper, html[data-wiso-theme="contrast-light"] .w6-as2configuration-form-root:not(.w6-sideform--readonly) .wiso_combobox-input-list-wrapper { background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,250,254,0.98)) !important; border: 1px solid rgba(11,79,158,0.14) !important; box-shadow: none !important; } /* ========================================================== AS2 Sideform – harte Mode-Steuerung ========================================================== */ /* Default: alles sichtbar, danach je Modus explizit begrenzen */ .w6-as2configuration-form-root.w6-sideform-mode--empty [data-cell-id="mandantData"], .w6-as2configuration-form-root.w6-sideform-mode--empty [data-cell-id="partnerBaseData"], .w6-as2configuration-form-root.w6-sideform-mode--empty [data-cell-id="partnerAs2Data"], .w6-as2configuration-form-root.w6-sideform-mode--empty [data-cell-id="partnerSecurityData"] { display: none !important; } /* Mandant-Modus: nur Mandant-Fieldset */ .w6-as2configuration-form-root.w6-sideform-mode--mandant [data-cell-id="mandantData"] { display: block !important; } .w6-as2configuration-form-root.w6-sideform-mode--mandant [data-cell-id="partnerBaseData"], .w6-as2configuration-form-root.w6-sideform-mode--mandant [data-cell-id="partnerAs2Data"], .w6-as2configuration-form-root.w6-sideform-mode--mandant [data-cell-id="partnerSecurityData"] { display: none !important; } /* Partner-Modus: nur Partner-Fieldsets */ .w6-as2configuration-form-root.w6-sideform-mode--partner [data-cell-id="mandantData"] { display: none !important; } .w6-as2configuration-form-root.w6-sideform-mode--partner [data-cell-id="partnerBaseData"], .w6-as2configuration-form-root.w6-sideform-mode--partner [data-cell-id="partnerAs2Data"], .w6-as2configuration-form-root.w6-sideform-mode--partner [data-cell-id="partnerSecurityData"] { display: block !important; } /* ========================================================== W6 Form Noble – Vault/Listbox Styling FINAL ---------------------------------------------------------- Ziel: - Dark / Contrast-Dark / Light / Contrast-Light - Vault bleibt scrollbar - Toolbar/Header stabil - Upload-Progress integriert - keine abgeschnittenen Listenelemente - W6-edle Optik mit runden Kanten ========================================================== */ /* ========================================================== 1) Theme Tokens ========================================================== */ html[data-wiso-theme="dark"], html[data-wiso-theme="contrast-dark"] { --w6vault-bg: rgba(15, 18, 26, 0.72); --w6vault-bg2: rgba(18, 26, 38, 0.96); --w6vault-bg3: rgba(10, 15, 24, 0.92); --w6vault-item-bg: rgba(255,255,255,0.035); --w6vault-item-hover: rgba(65,167,225,0.16); --w6vault-border: rgba(65,167,225,0.28); --w6vault-border-strong: rgba(65,167,225,0.95); --w6vault-text: rgba(235,242,250,0.88); --w6vault-text-strong: #ffffff; --w6vault-shadow: 0 10px 28px rgba(0,0,0,0.22); --w6vault-inner-shadow: inset 0 0 0 1px rgba(255,255,255,0.035); } html[data-wiso-theme="light"], html[data-wiso-theme="contrast-light"] { --w6vault-bg: rgba(246, 250, 255, 0.96); --w6vault-bg2: rgba(255,255,255,0.98); --w6vault-bg3: rgba(235,243,252,0.96); --w6vault-item-bg: rgba(255,255,255,0.86); --w6vault-item-hover: rgba(65,167,225,0.12); --w6vault-border: rgba(11,79,158,0.22); --w6vault-border-strong: rgba(11,79,158,0.72); --w6vault-text: rgba(31,41,55,0.92); --w6vault-text-strong: #111827; --w6vault-shadow: 0 12px 28px rgba(15,23,42,0.12); --w6vault-inner-shadow: inset 0 1px 0 rgba(255,255,255,0.90); } html[data-wiso-theme="contrast-light"] { --w6vault-border: rgba(11,79,158,0.34); --w6vault-border-strong: rgba(11,79,158,0.88); --w6vault-text: rgba(15,23,42,0.98); } /* ========================================================== 2) Vault Grundcontainer ========================================================== */ .w6-form.w6-form--noble .wiso_vault { min-height: 0 !important; overflow: hidden !important; box-sizing: border-box !important; border-radius: 14px !important; border: 1px solid var(--w6vault-border) !important; background: var(--w6vault-bg) !important; box-shadow: var(--w6vault-inner-shadow), var(--w6vault-shadow) !important; } .w6-form.w6-form--noble .wiso_vault .wiso_layout, .w6-form.w6-form--noble .wiso_vault .wiso_layout-cell, .w6-form.w6-form--noble .wiso_vault .wiso_widget { min-height: 0 !important; box-sizing: border-box !important; } /* ========================================================== 3) Toolbar / Header Struktur: [data-cell-id="toolbar"].wiso_vault--toolbar > nav.wiso_toolbar.vault-toolbar > ul.wiso_navbar ========================================================== */ .w6-form.w6-form--noble .wiso_vault [data-cell-id="toolbar"], .w6-form.w6-form--noble .wiso_vault [data-cell-id="toolbar"].wiso_vault--toolbar { width: 100% !important; height: 64px !important; min-height: 64px !important; max-height: 64px !important; flex: 0 0 64px !important; padding: 10px 12px !important; display: flex !important; align-items: center !important; justify-content: stretch !important; overflow: hidden !important; box-sizing: border-box !important; border-radius: 14px 14px 0 0 !important; border-bottom: 1px solid var(--w6vault-border) !important; background: linear-gradient( 180deg, var(--w6vault-bg2), var(--w6vault-bg3) ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.16) !important; } .w6-form.w6-form--noble .wiso_vault [data-cell-id="toolbar"] > nav.wiso_toolbar.vault-toolbar { width: 100% !important; min-width: 0 !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; flex: 1 1 auto !important; padding: 0 !important; margin: 0 !important; display: flex !important; align-items: center !important; overflow: hidden !important; box-sizing: border-box !important; border-radius: 13px !important; border: 1px solid var(--w6vault-border) !important; background: linear-gradient( 180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.035) ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 6px 16px rgba(0,0,0,0.14) !important; } .w6-form.w6-form--noble .wiso_vault [data-cell-id="toolbar"] > nav.wiso_toolbar.vault-toolbar > ul.wiso_navbar { width: 100% !important; min-width: 0 !important; height: 100% !important; min-height: 100% !important; flex: 1 1 auto !important; display: flex !important; align-items: center !important; gap: 8px !important; padding: 0 10px !important; margin: 0 !important; overflow: hidden !important; box-sizing: border-box !important; } .w6-form.w6-form--noble .wiso_vault [data-cell-id="toolbar"] .wiso_toolbar__item { flex: 0 0 auto !important; display: flex !important; align-items: center !important; justify-content: center !important; } .w6-form.w6-form--noble .wiso_vault [data-cell-id="toolbar"] .wiso_toolbar__item--spacer { flex: 1 1 auto !important; min-width: 10px !important; } .w6-form.w6-form--noble .wiso_vault [data-cell-id="toolbar"] .wiso_toolbar__item--separator { width: 1px !important; height: 26px !important; margin: 0 2px !important; border: 0 !important; background: var(--w6vault-border) !important; } /* ========================================================== 4) Toolbar Buttons ========================================================== */ .w6-form.w6-form--noble .wiso_vault [data-cell-id="toolbar"] .wiso_toolbar-button, .w6-form.w6-form--noble .wiso_vault [data-cell-id="toolbar"] .wiso_button { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; max-width: 36px !important; max-height: 36px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 11px !important; border: 1px solid rgba(120,140,170,0.22) !important; color: var(--w6vault-text-strong) !important; background: linear-gradient( 180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.045) ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 3px 8px rgba(0,0,0,0.14) !important; box-sizing: border-box !important; } .w6-form.w6-form--noble .wiso_vault [data-cell-id="toolbar"] .wiso_toolbar-button:hover, .w6-form.w6-form--noble .wiso_vault [data-cell-id="toolbar"] .wiso_button:hover { background: linear-gradient( 180deg, rgba(65,167,225,0.26), rgba(11,79,158,0.16) ) !important; border-color: rgba(65,167,225,0.55) !important; } .w6-form.w6-form--noble .wiso_vault [data-cell-id="toolbar"] .wiso_toolbar-button--active, .w6-form.w6-form--noble .wiso_vault [data-cell-id="toolbar"] .wiso_toolbar-button--active:hover { background: linear-gradient( 135deg, rgba(11,79,158,0.96), rgba(65,167,225,0.82) ) !important; border-color: rgba(65,167,225,0.9) !important; color: #ffffff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 0 0 1px rgba(65,167,225,0.18), 0 6px 14px rgba(11,79,158,0.26) !important; } .w6-form.w6-form--noble .wiso_vault [data-cell-id="toolbar"] .wiso_toolbar-button__icon, .w6-form.w6-form--noble .wiso_vault [data-cell-id="toolbar"] .dxi { font-size: 18px !important; line-height: 1 !important; } /* ========================================================== 5) Scrollbereich / Liste ========================================================== */ .w6-form.w6-form--noble .wiso_vault [data-cell-id="vault"], .w6-form.w6-form--noble .wiso_vault .wiso_vault-container, .w6-form.w6-form--noble .wiso_vault .wiso_vault--container { height: auto !important; min-height: 0 !important; flex: 1 1 0 !important; overflow-y: auto !important; overflow-x: hidden !important; border-radius: 0 0 14px 14px !important; box-sizing: border-box !important; } .w6-form.w6-form--noble .wiso_vault .wiso_vault--container > .wiso_list, .w6-form.w6-form--noble .wiso_vault .wiso_vault-container > .wiso_list, .w6-form.w6-form--noble .wiso_vault [data-cell-id="vault"] .wiso_list { height: auto !important; min-height: 0 !important; overflow: visible !important; padding: 8px !important; box-sizing: border-box !important; background: transparent !important; } /* ========================================================== 6) List Items ========================================================== */ .w6-form.w6-form--noble .wiso_vault .wiso_list-item { min-height: 49px !important; height: auto !important; margin: 0 0 7px 0 !important; padding: 8px 10px !important; display: flex !important; align-items: center !important; gap: 10px !important; box-sizing: border-box !important; border-radius: 10px !important; border: 1px solid var(--w6vault-border2, rgba(255,255,255,0.08)) !important; background: var(--w6vault-item-bg) !important; color: var(--w6vault-text) !important; transition: background-color .14s ease, border-color .14s ease, box-shadow .14s ease, color .14s ease !important; } html[data-wiso-theme="light"] .w6-form.w6-form--noble .wiso_vault .wiso_list-item, html[data-wiso-theme="contrast-light"] .w6-form.w6-form--noble .wiso_vault .wiso_list-item { border-color: rgba(11,79,158,0.14) !important; box-shadow: 0 2px 7px rgba(15,23,42,0.06) !important; } .w6-form.w6-form--noble .wiso_vault .wiso_list-item:last-child { margin-bottom: 0 !important; } .w6-form.w6-form--noble .wiso_vault .wiso_list-item:hover { background: var(--w6vault-item-hover) !important; border-color: rgba(65,167,225,0.42) !important; color: var(--w6vault-text-strong) !important; } /* ========================================================== 7) Auswahl ========================================================== */ .w6-form.w6-form--noble .wiso_vault .wiso_list-item--selected, .w6-form.w6-form--noble .wiso_vault .wiso_list-item--selected:hover, .w6-form.w6-form--noble .wiso_vault .wiso_list-item--focus, .w6-form.w6-form--noble .wiso_vault .wiso_list-item--selected.wiso_list-item--focus { background: linear-gradient( 135deg, rgba(11,79,158,0.94), rgba(65,167,225,0.82) ) !important; border-color: var(--w6vault-border-strong) !important; color: #ffffff !important; box-shadow: 0 0 0 1px rgba(255,255,255,0.16) inset, 0 0 0 2px rgba(65,167,225,0.20), 0 8px 20px rgba(11,79,158,0.32) !important; } .w6-form.w6-form--noble .wiso_vault .wiso_list-item--selected * { color: #ffffff !important; } .w6-form.w6-form--noble .wiso_vault .wiso_list-item--selected::before { content: ""; width: 4px; align-self: stretch; flex: 0 0 auto; margin-right: 2px; border-radius: 999px; background: #ffffff; box-shadow: 0 0 10px rgba(255,255,255,0.65); } /* ========================================================== 8) Icon / Text / Info ========================================================== */ .w6-form.w6-form--noble .wiso_vault .wiso_list-item--icon { width: 40px !important; height: 40px !important; min-width: 40px !important; flex: 0 0 40px !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; box-sizing: border-box !important; border-radius: 10px !important; border: 1px solid rgba(65,167,225,0.35) !important; background: rgba(65,167,225,0.12) !important; } .w6-form.w6-form--noble .wiso_vault .wiso_list-item--selected .wiso_list-item--icon { background: rgba(255,255,255,0.15) !important; border-color: rgba(255,255,255,0.6) !important; } .w6-form.w6-form--noble .wiso_vault .wiso_list-item--content { flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden !important; } .w6-form.w6-form--noble .wiso_vault .wiso_list-item--name, .w6-form.w6-form--noble .wiso_vault .wiso_list-item--size { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .w6-form.w6-form--noble .wiso_vault .wiso_item--info { flex: 0 0 auto !important; margin-left: auto !important; display: flex !important; align-items: center !important; } /* ========================================================== 9) Upload Progress ========================================================== */ .w6-form.w6-form--noble .wiso_vault [data-cell-id="toolbar"] .progress-bar { position: relative !important; width: 100% !important; min-width: 0 !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; flex: 1 1 auto !important; display: flex !important; align-items: center !important; padding: 0 8px !important; margin: 0 !important; overflow: hidden !important; box-sizing: border-box !important; border-radius: 13px !important; border: 1px solid var(--w6vault-border) !important; background: linear-gradient( 180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.035) ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 6px 16px rgba(0,0,0,0.18) !important; } .w6-form.w6-form--noble .wiso_vault [data-cell-id="toolbar"] .progress-indicator { position: absolute !important; left: 0 !important; top: 0 !important; bottom: 0 !important; height: 100% !important; border: 0 !important; border-radius: 12px !important; background: linear-gradient( 90deg, rgba(15,112,221,0.98), rgba(65,167,225,0.95) ) !important; box-shadow: none !important; } .w6-form.w6-form--noble .wiso_vault [data-cell-id="toolbar"] .progress-bar::before, .w6-form.w6-form--noble .wiso_vault [data-cell-id="toolbar"] .progress-bar::after, .w6-form.w6-form--noble .wiso_vault [data-cell-id="toolbar"] .progress-indicator::before, .w6-form.w6-form--noble .wiso_vault [data-cell-id="toolbar"] .progress-indicator::after { content: none !important; display: none !important; border: 0 !important; box-shadow: none !important; } .w6-form.w6-form--noble .wiso_vault [data-cell-id="toolbar"] .progress-text { position: relative !important; z-index: 2 !important; flex: 1 1 auto !important; text-align: center !important; color: #ffffff !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .02em !important; text-shadow: 0 1px 2px rgba(0,0,0,0.60) !important; pointer-events: none !important; } .w6-form.w6-form--noble .wiso_vault [data-cell-id="toolbar"] .action-abort-all { position: relative !important; z-index: 3 !important; width: auto !important; min-width: 68px !important; max-width: none !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; padding: 0 14px !important; margin-left: 10px !important; margin-right: 0 !important; border-radius: 10px !important; font-size: 12px !important; font-weight: 700 !important; color: #ffffff !important; background: linear-gradient( 180deg, rgba(12,16,24,0.92), rgba(0,0,0,0.72) ) !important; border: 1px solid rgba(255,255,255,0.14) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 3px 8px rgba(0,0,0,0.28) !important; } /* ========================================================= W6 Button – Disabled (nur innerhalb .w6-form--noble) ========================================================= */ /* ---------- LIGHT THEME ---------- */ html[data-wiso-theme="light"] .w6-form.w6-form--noble .wiso_button:disabled, html[data-wiso-theme="contrast-light"] .w6-form.w6-form--noble .wiso_button:disabled { opacity: 0.65 !important; cursor: not-allowed !important; background: rgba(0, 0, 0, 0.06) !important; border: 1px solid rgba(0, 0, 0, 0.12) !important; color: rgba(0, 0, 0, 0.45) !important; box-shadow: none !important; } /* Primary Button (Light) */ html[data-wiso-theme="light"] .w6-form.w6-form--noble .wiso_button--color_primary:disabled, html[data-wiso-theme="contrast-light"] .w6-form.w6-form--noble .wiso_button--color_primary:disabled { background: rgba(0, 120, 255, 0.18) !important; color: rgba(0, 0, 0, 0.5) !important; } /* ---------- DARK THEME ---------- */ html[data-wiso-theme="dark"] .w6-form.w6-form--noble .wiso_button:disabled, html[data-wiso-theme="contrast-dark"] .w6-form.w6-form--noble .wiso_button:disabled { opacity: 0.6 !important; cursor: not-allowed !important; background: rgba(120, 120, 120, 0.25) !important; border: 1px solid rgba(255,255,255,0.15) !important; color: rgba(255,255,255,0.5) !important; box-shadow: none !important; } /* Primary Button (Dark) */ html[data-wiso-theme="dark"] .w6-form.w6-form--noble .wiso_button--color_primary:disabled, html[data-wiso-theme="contrast-dark"] .w6-form.w6-form--noble .wiso_button--color_primary:disabled { background: rgba(80, 120, 180, 0.25) !important; color: rgba(255,255,255,0.55) !important; } /* ---------- GLOBAL (nur innerhalb der Form) ---------- */ /* Hover deaktivieren */ .w6-form.w6-form--noble .wiso_button:disabled:hover { background: inherit !important; } /* Klick komplett blocken */ .w6-form.w6-form--noble .wiso_button:disabled { pointer-events: none; } /* leichter Disabled-Effekt */ .w6-form.w6-form--noble .wiso_button:disabled { filter: saturate(0.6); } /* ========================================================== W6 FORM NOBLE – NATIVE SPINNER CLEAN (TRANSPARENT LIGHT) ========================================================== */ /* Spinner sichtbar lassen */ .w6-form.w6-form--noble input[type="number"]::-webkit-inner-spin-button, .w6-form.w6-form--noble input[type="number"]::-webkit-outer-spin-button { opacity: 1 !important; margin: 0 !important; cursor: pointer !important; } /* ========================================================== LIGHT MODE – Hintergrund entfernen ========================================================== */ html[data-wiso-theme="light"] .w6-form.w6-form--noble input[type="number"], html[data-wiso-theme="contrast-light"] .w6-form.w6-form--noble input[type="number"] { background-color: transparent !important; } /* Spinner selbst neutralisieren */ html[data-wiso-theme="light"] .w6-form.w6-form--noble input[type="number"]::-webkit-inner-spin-button, html[data-wiso-theme="light"] .w6-form.w6-form--noble input[type="number"]::-webkit-outer-spin-button, html[data-wiso-theme="contrast-light"] .w6-form.w6-form--noble input[type="number"]::-webkit-inner-spin-button, html[data-wiso-theme="contrast-light"] .w6-form.w6-form--noble input[type="number"]::-webkit-outer-spin-button { filter: brightness(0.65) contrast(1.2) !important; background: transparent !important; } /* ========================================================== DARK MODE – gut sichtbar ========================================================== */ html[data-wiso-theme="dark"] .w6-form.w6-form--noble input[type="number"]::-webkit-inner-spin-button, html[data-wiso-theme="dark"] .w6-form.w6-form--noble input[type="number"]::-webkit-outer-spin-button, html[data-wiso-theme="contrast-dark"] .w6-form.w6-form--noble input[type="number"]::-webkit-inner-spin-button, html[data-wiso-theme="contrast-dark"] .w6-form.w6-form--noble input[type="number"]::-webkit-outer-spin-button { filter: invert(1) brightness(1.4) contrast(0.9) !important; } /* ========================================================== Hover ========================================================== */ .w6-form.w6-form--noble input[type="number"]:hover::-webkit-inner-spin-button, .w6-form.w6-form--noble input[type="number"]:hover::-webkit-outer-spin-button { filter: brightness(1.1) !important; } /* ========================================================== Filter Window – categoriesContainer scrollbar fix ========================================================== */ [data-cell-id="categoriesContainer"].wiso_layout-cell, .wiso_layout-cell[data-cell-id="categoriesContainer"] { min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; } /* Inhalt darf höher als die Cell sein */ [data-cell-id="categoriesContainer"] > * { min-height: 0 !important; } /* Falls darin Form-/Layout-Widgets liegen */ [data-cell-id="categoriesContainer"] .wiso_layout, [data-cell-id="categoriesContainer"] .wiso_layout-cell, [data-cell-id="categoriesContainer"] .wiso_widget { min-height: 0 !important; } /* Form darf innerhalb der Content-Zelle scrollen */ .wiso_layout-cell[data-cell-id="content"], .wiso_layout-cell.w6-form.w6-form--noble, .wiso_layout-cell.w6-form.wiso_form { min-height: 0 !important; overflow: auto !important; } /* Inneres Form-Widget muss Höhe weitergeben */ .wiso_layout-cell.w6-form.w6-form--noble > .wiso_widget, .wiso_layout-cell.w6-form.wiso_form > .wiso_widget, .wiso_widget.wiso_form { height: 100% !important; min-height: 0 !important; overflow: auto !important; } /* Falls die Form selbst Flex-Container ist */ .w6-form.w6-form--noble { min-height: 0 !important; overflow: auto !important; } /* Optional: schöner Scrollbar */ .w6-form.w6-form--noble::-webkit-scrollbar, .wiso_widget.wiso_form::-webkit-scrollbar { width: 10px; } .w6-form.w6-form--noble::-webkit-scrollbar-thumb, .wiso_widget.wiso_form::-webkit-scrollbar-thumb { background: rgba(120, 180, 255, 0.35); border-radius: 999px; }