reinrutschen) ========================================================= */ .te-actionbar--sf{ background: #ffffff; color: var(--te-text, #0b0c0e); border-bottom: 1px solid rgba(11,12,14,.10); box-shadow: none; margin: 0; /* kein Gap durch die Bar selbst */ padding: 6px 14px; /* kompakt */ } .te-actionbar--sf .te-actionbar__inner{ display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; /* app-typische H�he */ } .te-actionbar--sf .te-actionbar__left, .te-actionbar--sf .te-actionbar__right{ display: inline-flex; align-items: center; gap: 8px; flex-wrap: nowrap; } /* WP-autop Notbremse: falls WP
/
injiziert */
.te-actionbar--sf p{ margin: 0 !important; }
.te-actionbar--sf br{ display: none !important; }
/* Buttons: Salesforce-Feeling (neutral, thin border, keine Rundungen) */
.te-actionbar--sf .te-abtn{
appearance: none;
-webkit-appearance: none;
height: 32px;
padding: 0 12px;
border-radius: 0 !important; /* keine Rundungen */
border: 1px solid rgba(11,12,14,.18);
background: #ffffff;
color: rgba(11,12,14,.92);
font-weight: 500; /* NICHT fett */
font-size: 13px;
line-height: 30px;
text-decoration: none !important;
box-shadow: none !important;
cursor: pointer;
display: inline-flex;
align-items: center;
white-space: nowrap;
}
.te-actionbar--sf .te-abtn:hover{
border-color: rgba(11,12,14,.28);
background: rgba(42,166,160,.06);
}
.te-actionbar--sf .te-abtn:focus{
outline: none;
box-shadow: 0 0 0 2px rgba(42,166,160,.18) !important;
}
/* Primary: Tonn-T�rkis, aber ruhig */
.te-actionbar--sf .te-abtn--primary{
background: var(--te-accent, #2aa6a0);
border-color: var(--te-accent, #2aa6a0);
color: #ffffff;
font-weight: 600; /* nur Primary darf minimal kr�ftiger sein */
}
.te-actionbar--sf .te-abtn--primary:hover{
filter: brightness(.98);
}
/* Ghost (Zur�ck) minimal */
.te-actionbar--sf .te-abtn--ghost{
background: #ffffff;
}
/* Separator wie in App-Toolbars */
.te-actionbar--sf .te-abtn-sep{
width: 1px;
height: 20px;
background: rgba(11,12,14,.14);
margin: 0 6px;
}
/* Search: rechteckig, ruhig, aligned */
.te-actionbar--sf .te-asearch{
display: inline-flex;
align-items: stretch;
height: 32px;
border-radius: 0 !important;
border: 1px solid rgba(11,12,14,.18);
background: #ffffff;
overflow: hidden;
}
.te-actionbar--sf .te-asearch__input{
width: min(360px, 38vw);
min-width: 220px;
border: 0 !important;
outline: none !important;
background: transparent !important;
padding: 0 10px !important;
font-size: 13px !important;
font-weight: 400 !important;
color: rgba(11,12,14,.82) !important;
}
.te-actionbar--sf .te-asearch__btn{
border: 0 !important;
border-left: 1px solid rgba(11,12,14,.14) !important;
background: #ffffff !important;
padding: 0 12px !important;
font-size: 13px !important;
font-weight: 600 !important;
color: rgba(11,12,14,.92) !important;
cursor: pointer;
}
.te-actionbar--sf .te-asearch__btn:hover{
background: rgba(42,166,160,.06) !important;
}
/* Screenreader only */
.te-sr-only{
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}
/* =========================================================
TE Actionbar � Salesforce/Banking-Look (v2)
========================================================= */
/* 0) Optional: WP
/
darf die Actionbar nicht zerlegen */
.te-actionbar p { margin: 0 !important; }
.te-actionbar br { display: none !important; }
/* 1) Container: ohne Rundungen, ohne �billig Buttons�, sehr clean */
.te-actionbar{
position: relative;
background: #ffffff;
border-bottom: 1px solid rgba(11,12,14,.10);
}
/* 2) Gradient Separator oberhalb (wie Screenshot), sehr d�nn */
.te-actionbar::before{
content:"";
position:absolute;
left:0; right:0; top:0;
height: 2px;
/* Verlauf in euren Farben: Schwarz -> Accent -> Schwarz */
background: linear-gradient(90deg,
rgba(11,12,14,.00) 0%,
rgba(11,12,14,.35) 18%,
rgba(42,166,160,1) 50%,
rgba(11,12,14,.35) 82%,
rgba(11,12,14,.00) 100%
);
pointer-events:none;
}
/* 3) Inner Layout: rechts wirklich rechts */
.te-actionbar__inner{
display:flex;
align-items:center;
gap: 14px;
padding: 10px 16px; /* bewusst niedrig: �App�, kein Website-Spacing */
max-width: none;
}
/* links bleibt links */
.te-actionbar__left{
display:flex;
align-items:center;
gap: 10px;
min-width: 0;
}
/* rechts wird nach rechts �gedr�ckt� */
.te-actionbar__right{
margin-left: auto; /* DAS ist der entscheidende Teil */
display:flex;
align-items:center;
}
/* 4) Buttons: eckig, d�nn, professionell */
.te-abtn{
appearance:none;
border: 1px solid rgba(11,12,14,.18);
background: #fff;
color: #0b0c0e;
padding: 6px 10px;
line-height: 1;
border-radius: 0; /* keine Rundungen */
font-weight: 500; /* nicht fett */
font-size: 13px;
letter-spacing: .1px;
box-shadow: none;
cursor:pointer;
}
.te-abtn:hover{
background: rgba(11,12,14,.03);
border-color: rgba(11,12,14,.28);
}
/* 5) Primary: SCHWARZ (statt gr�n/t�rkis) */
.te-abtn--primary{
background: #0b0c0e !important;
color: #fff !important;
border-color: #0b0c0e !important;
}
.te-abtn--primary:hover{
background: #000 !important;
border-color: #000 !important;
}
/* 6) Separator zwischen Zur�ck und Aktionen */
.te-abtn-sep{
width: 1px;
height: 18px;
background: rgba(11,12,14,.15);
}
/* 7) Suche: weiter nach rechts + �Banking Input�-Look */
.te-asearch{
display:flex;
align-items:center;
gap: 0;
}
.te-asearch__input{
width: 320px; /* optional anpassen */
max-width: 44vw;
height: 30px;
border-radius: 0;
border: 1px solid rgba(11,12,14,.18);
background: #fff;
padding: 0 10px;
font-size: 13px;
font-weight: 400;
outline: none;
}
.te-asearch__btn{
height: 30px;
border-radius: 0;
margin-left: -1px; /* nahtlos an Input */
border: 1px solid rgba(11,12,14,.18);
background: #fff;
color: #0b0c0e;
padding: 0 12px;
font-size: 13px;
font-weight: 600;
cursor:pointer;
}
.te-asearch__btn:hover{
background: rgba(11,12,14,.03);
border-color: rgba(11,12,14,.28);
}
/* =========================================================
TonnEstate ListView Table (Salesforce-like, dense)
Scope: .te-lv ONLY
Regeln: keine Rundungen, keine luftigen Gaps, ruhige Typo
========================================================= */
.te-lv{
/* App-Canvas (grau) */
--lv-bg: #f4f6f8;
--lv-surface: #ffffff;
--lv-line: rgba(11,12,14,.10);
--lv-line-strong: rgba(11,12,14,.16);
--lv-text: var(--te-text, #0b0c0e);
--lv-muted: rgba(11,12,14,.58);
--lv-accent: var(--te-accent, #2aa6a0);
/* density */
--lv-h: 32px;
--lv-pad-x: 12px;
background: var(--lv-bg);
padding: 0; /* keine Website-Gaps */
color: var(--lv-text);
font-family: var(--te-font, "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
}
.te-lv__surface{
background: var(--lv-surface);
border: 1px solid var(--lv-line);
border-radius: 0; /* zwingend: keine Rundungen */
box-shadow: none;
overflow: hidden; /* sticky head + borders sauber */
}
/* --- Header --- */
.te-lv__head{
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 8px var(--lv-pad-x);
border-bottom: 1px solid var(--lv-line);
background: #fff;
}
.te-lv__context{
display: grid;
gap: 2px;
min-width: 0;
}
.te-lv__object{
font-size: 12px;
font-weight: 400;
color: var(--lv-muted);
letter-spacing: .01em;
}
.te-lv__view{
display: inline-flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.te-lv__viewbtn{
appearance: none;
border: 0;
background: transparent;
color: var(--lv-text);
padding: 0;
margin: 0;
font-size: 14px;
font-weight: 500; /* ruhig, nicht fett */
line-height: 1.2;
cursor: pointer;
white-space: nowrap;
}
.te-lv__chev{
display: inline-block;
width: 10px;
height: 10px;
margin-left: 6px;
border-right: 1px solid rgba(11,12,14,.55);
border-bottom: 1px solid rgba(11,12,14,.55);
transform: rotate(45deg) translateY(-1px);
}
.te-lv__meta{
font-size: 12px;
font-weight: 400;
color: var(--lv-muted);
white-space: nowrap;
}
/* Right cluster */
.te-lv__head-right{
display: inline-flex;
align-items: center;
gap: 10px;
}
.te-lv__search{
display: inline-flex;
align-items: center;
height: var(--lv-h);
border: 1px solid var(--lv-line-strong);
border-radius: 0;
background: #fff;
overflow: hidden;
}
.te-lv__searchinput{
height: var(--lv-h);
width: min(360px, 34vw);
min-width: 220px;
border: 0;
outline: none;
background: transparent;
padding: 0 10px;
font-size: 13px;
font-weight: 400;
color: var(--lv-text);
}
.te-lv__searchinput::placeholder{
color: rgba(11,12,14,.38);
}
.te-lv__tools{
display: inline-flex;
align-items: center;
gap: 8px;
}
/* Icon buttons: eckig, flach */
.te-lv__iconbtn{
appearance: none;
border: 1px solid var(--lv-line-strong);
border-radius: 0;
background: #fff;
color: rgba(11,12,14,.80);
height: var(--lv-h);
min-width: var(--lv-h);
padding: 0 10px;
font-size: 14px;
font-weight: 400;
line-height: var(--lv-h);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
cursor: pointer;
box-shadow: none;
}
.te-lv__iconbtn svg{
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
}
.te-lv__iconbtn:hover{
background: rgba(11,12,14,.02);
border-color: rgba(11,12,14,.24);
}
.te-lv__iconbtn:focus-visible{
outline: 2px solid rgba(11,12,14,.35);
outline-offset: 1px;
}
.te-lv__divider{
width: 1px;
height: 18px;
background: var(--lv-line-strong);
display: inline-block;
margin: 0 2px;
}
/* Primary button: schwarz (Salesforce-ähnlich neutral/strong) */
.te-lv__btn{
appearance: none;
border-radius: 0;
border: 1px solid rgba(11,12,14,.18);
background: #fff;
color: var(--lv-text);
height: var(--lv-h);
padding: 0 12px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
}
.te-lv__btn--primary{
background: #0b0c0e;
border-color: #0b0c0e;
color: #fff;
}
.te-lv__btn--primary:hover{
background: #000;
border-color: #000;
}
/* --- Table --- */
.te-lv__tablewrap{
overflow: auto;
background: #fff;
}
.te-lv__table{
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 13px;
}
.te-lv__th{
position: sticky;
top: 0;
z-index: 2;
text-align: left;
padding: 10px var(--lv-pad-x);
background: #fbfcfd;
border-bottom: 1px solid var(--lv-line);
color: rgba(11,12,14,.62);
font-weight: 500; /* NICHT fett */
white-space: nowrap;
}
.te-lv__th--check,
.te-lv__td--check{
width: 44px;
padding-left: 10px;
padding-right: 10px;
}
.te-lv__th--actions,
.te-lv__td--actions{
width: 52px;
text-align: right;
padding-right: 10px;
}
.te-lv__td{
padding: 10px var(--lv-pad-x);
border-bottom: 1px solid var(--lv-line);
vertical-align: top;
background: #fff;
}
.te-lv__row:hover .te-lv__td{
background: rgba(11,12,14,.015);
}
.te-lv__row:focus{
outline: none;
}
.te-lv__row:focus .te-lv__td{
background: rgba(42,166,160,.06);
box-shadow: inset 0 0 0 2px rgba(42,166,160,.22);
}
/* Links + Secondary line */
.te-lv__link{
color: rgba(11,12,14,.92);
text-decoration: none;
border-bottom: 1px solid rgba(11,12,14,.18);
font-weight: 500;
}
.te-lv__link:hover{
border-bottom-color: rgba(11,12,14,.35);
}
.te-lv__sub{
margin-top: 3px;
font-size: 12px;
color: var(--lv-muted);
font-weight: 400;
}
/* Monospace-ish tokens for contact values */
.te-lv__mono{
font-variant-numeric: tabular-nums;
}
/* Badges: funktional, nicht bunt */
.te-lv__badge{
display: inline-flex;
align-items: center;
height: 22px;
padding: 0 8px;
border-radius: 0; /* keine Rundungen */
border: 1px solid var(--lv-line-strong);
background: #fff;
font-size: 12px;
font-weight: 400;
color: rgba(11,12,14,.82);
white-space: nowrap;
}
.te-lv__badge--open{
border-color: rgba(42,166,160,.35);
background: rgba(42,166,160,.08);
}
.te-lv__badge--warm{
border-color: rgba(245,158,11,.35);
background: rgba(245,158,11,.10);
}
.te-lv__badge--muted{
border-color: rgba(11,12,14,.18);
background: rgba(11,12,14,.03);
}
/* Checkboxes: neutral (Browser default, aber sauber ausgerichtet) */
.te-lv__check{
width: 14px;
height: 14px;
vertical-align: middle;
}
/* SR only */
.te-lv__sr{
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}
/* Responsive: keep density, allow wrap only where necessary */
@media (max-width: 980px){
.te-lv__head{
flex-wrap: wrap;
gap: 8px;
}
.te-lv__searchinput{
width: min(520px, 70vw);
min-width: 180px;
}
}
/* =========================================================
Ergänzungen: Shell (5% Rand) + Head Alignment + Pagination + Modal
Scope: .te-lv ONLY
========================================================= */
/* 1) Links/Rechts mindestens 5% Rand (App-Shell Constraint) */
.te-lv__shell{
margin-left: 5vw;
margin-right: 5vw;
padding-top: 14px; /* kompakt, aber nicht „luftig“ */
padding-bottom: 14px;
}
/* optional: nicht zu breit auf Ultra-Wide */
@media (min-width: 1600px){
.te-lv__shell{ margin-left: max(5vw, 72px); margin-right: max(5vw, 72px); }
}
/* 2) Header-Baseline: Search + Icons + Button sauber bündig */
.te-lv__head-right{
margin-left: auto;
display: flex;
align-items: center; /* vertikal bündig */
justify-content: flex-end;
gap: 10px;
}
.te-lv__search{
height: var(--lv-h);
}
.te-lv__searchinput{
height: var(--lv-h);
line-height: var(--lv-h);
}
/* Iconbuttons + Primary: exakt gleiche Höhe */
.te-lv__iconbtn,
.te-lv__btn{
height: var(--lv-h);
line-height: calc(var(--lv-h) - 2px);
}
/* Der "⋯" Rowmenu-Button war text-basiert: optisch zentrieren */
.te-lv__td--actions .te-lv__iconbtn{
padding: 0;
min-width: var(--lv-h);
font-size: 18px;
line-height: var(--lv-h);
}
/* 3) Pagination Footer (Bootstrap-like, eckig, dicht) */
.te-lv__foot{
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 8px var(--lv-pad-x);
border-top: 1px solid var(--lv-line);
background: #fff;
}
.te-lv__foot-left{
display: inline-flex;
align-items: center;
gap: 10px;
white-space: nowrap;
}
.te-lv__range{
font-size: 12px;
color: var(--lv-muted);
}
.te-lv__muted{
font-size: 12px;
color: var(--lv-muted);
}
/* Inputs/Selects (für Modal + Footer) */
.te-lv__input,
.te-lv__select{
height: var(--lv-h);
border-radius: 0;
border: 1px solid var(--lv-line-strong);
background: #fff;
color: var(--lv-text);
font-size: 13px;
font-weight: 400;
padding: 0 10px;
outline: none;
}
.te-lv__input:focus-visible,
.te-lv__select:focus-visible{
outline: 2px solid rgba(11,12,14,.35);
outline-offset: 1px;
}
.te-lv__pager{
display: inline-flex;
align-items: center;
gap: 0;
}
.te-lv__pbtn{
appearance: none;
border-radius: 0;
border: 1px solid var(--lv-line-strong);
background: #fff;
color: rgba(11,12,14,.85);
height: var(--lv-h);
min-width: var(--lv-h);
padding: 0 10px;
font-size: 13px;
font-weight: 400;
cursor: pointer;
/* Bootstrap-ähnlich: zusammenhängend */
margin-left: -1px;
}
.te-lv__pbtn:hover{
background: rgba(11,12,14,.02);
}
.te-lv__pbtn--active{
background: rgba(11,12,14,.06);
border-color: rgba(11,12,14,.22);
}
.te-lv__dots{
display: inline-flex;
align-items: center;
height: var(--lv-h);
padding: 0 10px;
border: 1px solid transparent;
color: rgba(11,12,14,.45);
}
/* 4) Modal (Enterprise: overlay + eckiges Panel) */
.te-lv__modal{
position: fixed;
inset: 0;
z-index: 9999;
}
.te-lv__modal-backdrop{
position: absolute;
inset: 0;
background: rgba(11,12,14,.45);
}
.te-lv__modal-panel{
position: relative;
margin: 6vh auto;
width: min(920px, 92vw);
background: #fff;
border: 1px solid rgba(11,12,14,.18);
border-radius: 0;
box-shadow: none;
}
.te-lv__modal-head{
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px var(--lv-pad-x);
border-bottom: 1px solid var(--lv-line);
background: #fbfcfd;
}
.te-lv__modal-title{
margin: 0;
font-size: 14px;
font-weight: 500;
color: rgba(11,12,14,.92);
}
.te-lv__modal-actions{
display: inline-flex;
align-items: center;
gap: 8px;
}
.te-lv__modal-body{
padding: 12px var(--lv-pad-x);
background: #fff;
}
.te-lv__formgrid{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 12px;
}
.te-lv__label{
display: grid;
gap: 4px;
font-size: 12px;
color: rgba(11,12,14,.70);
}
@media (max-width: 860px){
.te-lv__formgrid{ grid-template-columns: 1fr; }
}
/* =========================================================
Enterprise ListView Hardening (Scope: .te-lv only)
Ziel: Salesforce/Bootstrap-ähnliche Dichte + saubere Kanten
========================================================= */
.te-lv{
--lv-bg: #f4f6f8;
--lv-surface: #fff;
--lv-line: rgba(11,12,14,.12);
--lv-line-strong: rgba(11,12,14,.18);
--lv-text: var(--te-text, #0b0c0e);
--lv-muted: rgba(11,12,14,.58);
--lv-h: 32px;
--lv-pad-x: 12px;
background: var(--lv-bg);
color: var(--lv-text);
}
/* 5% Seitenrand: stabil, enterprise-like */
.te-lv__shell{
margin: 0 5vw;
padding: 12px 0;
}
/* harte Kante / keine Schatten / keine Rundungen */
.te-lv__surface{
background: var(--lv-surface);
border: 1px solid var(--lv-line);
border-radius: 0 !important;
box-shadow: none !important;
overflow: hidden;
}
/* Theme-Reset NUR im ListView Scope (damit GP/WP nicht reinfunkt) */
.te-lv button,
.te-lv select,
.te-lv input{
border-radius: 0 !important;
box-shadow: none !important;
font: inherit;
}
/* Header: keine „Webseiten“-Höhen, sondern Control-Baseline */
.te-lv__head{
display:flex;
align-items:center;
justify-content:space-between;
gap: 12px;
padding: 8px var(--lv-pad-x);
border-bottom: 1px solid var(--lv-line);
background: #fff;
}
/* Control-Cluster (Search + Icons + Primary) = eine Reihe */
.te-lv__controls{
display:flex;
align-items:center;
justify-content:flex-end;
gap: 8px;
flex-wrap: nowrap;
}
/* Search als Input-Group (Bootstrap-Pattern) */
.te-lv__search{
display:flex;
align-items:center;
height: var(--lv-h);
border: 1px solid var(--lv-line-strong);
background:#fff;
}
.te-lv__searchinput{
height: var(--lv-h);
border: 0;
outline: none;
padding: 0 10px;
width: min(360px, 34vw);
min-width: 220px;
}
.te-lv__iconbtn{
height: var(--lv-h);
min-width: var(--lv-h);
padding: 0 10px;
border: 1px solid var(--lv-line-strong);
background:#fff;
display:inline-flex;
align-items:center;
justify-content:center;
cursor:pointer;
}
.te-lv__iconbtn svg{ width:16px; height:16px; }
.te-lv__btn{
height: var(--lv-h);
padding: 0 12px;
border: 1px solid var(--lv-line-strong);
background:#fff;
cursor:pointer;
font-weight: 500;
}
.te-lv__btn--primary{
background:#0b0c0e;
border-color:#0b0c0e;
color:#fff;
}
/* Table: sticky head, harte Linien, keine Luft */
.te-lv__tablewrap{ overflow:auto; }
.te-lv__table{ width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
.te-lv__th{
position: sticky; top: 0; z-index: 2;
background:#fbfcfd;
border-bottom:1px solid var(--lv-line);
padding: 10px var(--lv-pad-x);
font-weight: 500;
color: rgba(11,12,14,.62);
}
.te-lv__td{
padding: 10px var(--lv-pad-x);
border-bottom: 1px solid var(--lv-line);
background:#fff;
}
.te-lv__th--check, .te-lv__td--check{ width:44px; padding: 10px 10px; }
.te-lv__th--actions, .te-lv__td--actions{ width:52px; text-align:right; padding-right:10px; }
.te-lv__row:hover .te-lv__td{ background: rgba(11,12,14,.015); }
/* Footer: KEINE zusätzlichen „grauen Linien“ außer Border-Top */
.te-lv__foot{
display:flex;
align-items:center;
justify-content:space-between;
gap: 12px;
padding: 8px var(--lv-pad-x);
border-top: 1px solid var(--lv-line);
background:#fff;
}
/* Page size selector wirklich „enterprise“: kompakt + aligned */
.te-lv__foot-left{
display:flex;
align-items:center;
gap: 10px;
white-space: nowrap;
font-size: 12px;
color: var(--lv-muted);
}
.te-lv__select{
height: var(--lv-h);
border: 1px solid var(--lv-line-strong);
background:#fff;
padding: 0 8px;
}
/* Pagination = Button Group (Bootstrap-Logik) */
.te-lv__pager{
display:inline-flex;
align-items:center;
gap: 0;
white-space: nowrap;
}
.te-lv__pbtn{
height: var(--lv-h);
min-width: var(--lv-h);
padding: 0 10px;
border: 1px solid var(--lv-line-strong);
background:#fff;
cursor:pointer;
/* Button-Group effect */
margin-left: -1px;
}
.te-lv__pbtn--active{
background: rgba(11,12,14,.06);
border-color: rgba(11,12,14,.24);
}
.te-lv__dots{
display:inline-flex;
align-items:center;
height: var(--lv-h);
padding: 0 10px;
color: rgba(11,12,14,.45);
}
/* SR only */
.te-lv__sr{
position:absolute !important;
width:1px; height:1px;
margin:-1px; padding:0;
overflow:hidden; clip:rect(0,0,0,0);
white-space:nowrap; border:0;
}
/* =========================================================
Tabulator Pagination – Segmented Control (Codepen-like)
Scope: .te-lvtab ONLY (ListView Table)
========================================================= */
/* Paginator as tight segmented group (no "website gaps") */
.te-lvtab .tabulator .tabulator-paginator{
display: inline-flex;
align-items: center;
gap: 0;
}
/* Base segment */
.te-lvtab .tabulator .tabulator-paginator .tabulator-page{
border-radius: 0 !important; /* rule: no rounded buttons */
margin: 0 !important; /* remove "webby" spacing */
min-width: 34px; /* dense */
height: 32px; /* dense */
padding: 0 10px; /* compact */
line-height: 32px;
background: #fff;
color: #0b0c0e;
border: 1px solid rgba(11,12,14,.18);
box-shadow: none;
font-weight: 400; /* keep typography calm */
}
/* Collapse borders between segments (single control look) */
.te-lvtab .tabulator .tabulator-paginator .tabulator-page + .tabulator-page{
margin-left: -1px !important;
}
/* Hover: minimal */
.te-lvtab .tabulator .tabulator-paginator .tabulator-page:hover{
background: rgba(11,12,14,.03);
border-color: rgba(11,12,14,.26);
}
/* Active: NOT black-filled; subtle segment state (codepen-like) */
.te-lvtab .tabulator .tabulator-paginator .tabulator-page.active{
background: rgba(11,12,14,.06) !important;
color: #0b0c0e !important;
border-color: rgba(11,12,14,.34) !important;
}
/* Focus: enterprise, quiet, visible */
.te-lvtab .tabulator .tabulator-paginator .tabulator-page:focus{
outline: 1px solid rgba(11,12,14,.45);
outline-offset: -1px;
position: relative;
z-index: 2;
}
/* Disabled state (Tabulator variants) */
.te-lvtab .tabulator .tabulator-paginator .tabulator-page.disabled,
.te-lvtab .tabulator .tabulator-paginator .tabulator-page[disabled],
.te-lvtab .tabulator .tabulator-paginator .tabulator-page[aria-disabled="true"]{
opacity: .35;
cursor: default;
pointer-events: none;
background: #fff;
}
/* =========================================================
TonnEstate DataGrid ListView (DataTables-like)
Scope: .te-lv only
========================================================= */
.te-lv{
--lv-bg: #f3f5f7;
--lv-surface: #fff;
--lv-line: rgba(11,12,14,.10);
--lv-line-strong: rgba(11,12,14,.16);
--lv-text: var(--te-text, #0b0c0e);
--lv-muted: rgba(11,12,14,.55);
--lv-accent: var(--te-accent, #2aa6a0);
--lv-h: 32px;
--lv-pad-x: 14px;
--lv-cell-y: 12px; /* Row padding */
--lv-radius: 8px; /* du willst leicht rund -> ok */
background: var(--lv-bg);
color: var(--lv-text);
}
/* shell = 5% workspace gutter */
.te-lv__shell{ margin: 0 5vw; padding: 14px 0; }
/* surface mit Innenpadding (das hat dir gefehlt) */
.te-lv__surface{
background: var(--lv-surface);
border: 1px solid var(--lv-line);
border-radius: var(--lv-radius);
overflow: hidden;
}
/* Header: kompakt, aber „DataGrid“-klar */
.te-lv__head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap: 16px;
padding: 14px var(--lv-pad-x);
border-bottom: 1px solid var(--lv-line);
background:#fff;
}
.te-lv__head-left{
display:flex;
align-items:flex-start;
gap: 18px;
min-width: 0;
}
.te-lv__object{ font-size: 12px; color: var(--lv-muted); font-weight: 400; }
.te-lv__viewline{ display:flex; align-items:center; gap:10px; }
.te-lv__viewbtn{
border:0; background:transparent; padding:0;
font-size:14px; font-weight:500; cursor:pointer; color: var(--lv-text);
}
.te-lv__chev{
display:inline-block; width:10px; height:10px; margin-left:6px;
border-right:1px solid rgba(11,12,14,.55);
border-bottom:1px solid rgba(11,12,14,.55);
transform: rotate(45deg) translateY(-1px);
}
.te-lv__meta{ font-size:12px; color: var(--lv-muted); }
.te-lv__dtleft{
display:flex;
align-items:center;
gap: 10px;
font-size: 12px;
color: var(--lv-muted);
white-space: nowrap;
}
.te-lv__info{
margin-left: 8px;
padding-left: 10px;
border-left: 1px solid var(--lv-line);
}
/* right controls */
.te-lv__head-right{
display:flex;
align-items:center;
gap: 8px;
}
.te-lv__search{
display:flex;
align-items:center;
height: var(--lv-h);
border: 1px solid var(--lv-line-strong);
background:#fff;
border-radius: 6px; /* Inputgroup modern, aber nicht „pill“ */
overflow:hidden;
}
.te-lv__searchinput{
height: var(--lv-h);
border:0; outline:none;
padding: 0 10px;
width: min(360px, 34vw);
min-width: 220px;
font-size: 13px;
}
.te-lv__iconbtn{
height: var(--lv-h);
min-width: var(--lv-h);
border: 1px solid var(--lv-line-strong);
background:#fff;
border-radius: 6px;
display:inline-flex;
align-items:center;
justify-content:center;
padding: 0 10px;
cursor:pointer;
}
.te-lv__iconbtn svg{ width:16px; height:16px; }
.te-lv__btn{
height: var(--lv-h);
border: 1px solid rgba(11,12,14,.28);
background:#fff;
border-radius: 6px;
padding: 0 12px;
font-size: 13px;
font-weight: 500;
cursor:pointer;
}
.te-lv__btn--primary{
background:#0b0c0e;
border-color:#0b0c0e;
color:#fff;
}
/* table wrapper: innenraum wie DataTables */
.te-lv__gridwrap{
padding: 10px var(--lv-pad-x) 0 var(--lv-pad-x); /* Innenpadding! */
background:#fff;
}
/* table */
.te-lv__table{
width:100%;
border-collapse: separate;
border-spacing: 0;
font-size: 13px;
background:#fff;
border: 1px solid var(--lv-line);
border-radius: 8px;
overflow:hidden;
}
.te-lv__th{
background:#f7f8fa;
color: rgba(11,12,14,.62);
font-weight: 500;
text-align:left;
padding: 10px 12px;
border-bottom: 1px solid var(--lv-line);
white-space: nowrap;
}
.te-lv__td{
padding: var(--lv-cell-y) 12px;
border-bottom: 1px solid var(--lv-line);
vertical-align: top;
background:#fff;
}
/* zebra wie DataTables (dezent) */
.te-lv__row:nth-child(even) .te-lv__td{
background: rgba(11,12,14,.012);
}
/* hover */
.te-lv__row:hover .te-lv__td{
background: rgba(11,12,14,.02);
}
.te-lv__th--check, .te-lv__td--check{ width: 44px; }
.te-lv__th--actions, .te-lv__td--actions{ width: 240px; text-align:right; }
.te-lv__link{
color: rgba(11,12,14,.92);
text-decoration: none;
border-bottom: 1px solid rgba(11,12,14,.20);
font-weight: 500;
}
.te-lv__sub{ margin-top:4px; font-size:12px; color: var(--lv-muted); }
.te-lv__mono{ font-variant-numeric: tabular-nums; }
.te-lv__badge{
display:inline-flex; align-items:center;
height: 22px;
padding: 0 8px;
border-radius: 6px;
border: 1px solid var(--lv-line-strong);
background:#fff;
font-size: 12px;
color: rgba(11,12,14,.80);
}
.te-lv__badge--ok{ background: rgba(42,166,160,.10); border-color: rgba(42,166,160,.30); }
.te-lv__badge--warn{ background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.35); }
/* row buttons (wie in deinem Screenshot-Referenz, aber edel schwarz) */
.te-lv__rowbtns{
display:inline-flex;
align-items:center;
justify-content:flex-end;
gap: 6px;
}
.te-lv__rbtn{
height: 28px;
padding: 0 10px;
border-radius: 6px;
border: 1px solid rgba(11,12,14,.18);
background: #0b0c0e;
color: #fff;
font-size: 12px;
font-weight: 500;
cursor: pointer;
}
.te-lv__rbtn:hover{ background:#000; border-color:#000; }
.te-lv__rbtn--danger{
background:#fff;
color:#0b0c0e;
border-color: rgba(11,12,14,.22);
}
/* footer: kompakt und nicht „leer“ */
.te-lv__foot{
display:flex;
align-items:center;
justify-content:space-between;
gap: 12px;
padding: 12px var(--lv-pad-x) 14px var(--lv-pad-x);
border-top: 1px solid var(--lv-line);
background:#fff;
}
.te-lv__pager{
display:inline-flex;
align-items:center;
gap: 0;
}
.te-lv__pbtn{
height: 30px;
min-width: 34px;
padding: 0 10px;
border: 1px solid var(--lv-line-strong);
background:#fff;
border-radius: 0; /* Button-group scharf */
margin-left: -1px;
cursor:pointer;
}
.te-lv__pbtn--active{
background: rgba(11,12,14,.06);
border-color: rgba(11,12,14,.22);
}
.te-lv__dots{
display:inline-flex;
align-items:center;
height: 30px;
padding: 0 10px;
color: rgba(11,12,14,.45);
}
.te-lv__pill{
display:inline-flex;
align-items:center;
height: 26px;
padding: 0 10px;
border: 1px solid var(--lv-line-strong);
border-radius: 6px;
background:#fff;
color: rgba(11,12,14,.78);
font-size: 12px;
}
.te-lv__select{
height: var(--lv-h);
border: 1px solid var(--lv-line-strong);
background:#fff;
border-radius: 6px;
padding: 0 8px;
}
/* SR only */
.te-lv__sr{
position:absolute !important;
width:1px; height:1px;
margin:-1px; padding:0;
overflow:hidden; clip:rect(0,0,0,0);
white-space:nowrap; border:0;
}
/* =========================================================
TonnEstate DataGrid ListView (DataTables-like)
Scope: .te-lv only
========================================================= */
.te-lv{
--lv-bg: #f3f5f7;
--lv-surface: #fff;
--lv-line: rgba(11,12,14,.10);
--lv-line-strong: rgba(11,12,14,.16);
--lv-text: var(--te-text, #0b0c0e);
--lv-muted: rgba(11,12,14,.55);
--lv-accent: var(--te-accent, #2aa6a0);
--lv-h: 32px;
--lv-pad-x: 14px;
--lv-cell-y: 12px; /* Row padding */
--lv-radius: 8px; /* du willst leicht rund -> ok */
background: var(--lv-bg);
color: var(--lv-text);
}
/* shell = 5% workspace gutter */
.te-lv__shell{ margin: 0 5vw; padding: 14px 0; }
/* surface mit Innenpadding (das hat dir gefehlt) */
.te-lv__surface{
background: var(--lv-surface);
border: 1px solid var(--lv-line);
border-radius: var(--lv-radius);
overflow: hidden;
}
/* Header: kompakt, aber „DataGrid“-klar */
.te-lv__head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap: 16px;
padding: 14px var(--lv-pad-x);
border-bottom: 1px solid var(--lv-line);
background:#fff;
}
.te-lv__head-left{
display:flex;
align-items:flex-start;
gap: 18px;
min-width: 0;
}
.te-lv__object{ font-size: 12px; color: var(--lv-muted); font-weight: 400; }
.te-lv__viewline{ display:flex; align-items:center; gap:10px; }
.te-lv__viewbtn{
border:0; background:transparent; padding:0;
font-size:14px; font-weight:500; cursor:pointer; color: var(--lv-text);
}
.te-lv__chev{
display:inline-block; width:10px; height:10px; margin-left:6px;
border-right:1px solid rgba(11,12,14,.55);
border-bottom:1px solid rgba(11,12,14,.55);
transform: rotate(45deg) translateY(-1px);
}
.te-lv__meta{ font-size:12px; color: var(--lv-muted); }
.te-lv__dtleft{
display:flex;
align-items:center;
gap: 10px;
font-size: 12px;
color: var(--lv-muted);
white-space: nowrap;
}
.te-lv__info{
margin-left: 8px;
padding-left: 10px;
border-left: 1px solid var(--lv-line);
}
/* right controls */
.te-lv__head-right{
display:flex;
align-items:center;
gap: 8px;
}
.te-lv__search{
display:flex;
align-items:center;
height: var(--lv-h);
border: 1px solid var(--lv-line-strong);
background:#fff;
border-radius: 6px; /* Inputgroup modern, aber nicht „pill“ */
overflow:hidden;
}
.te-lv__searchinput{
height: var(--lv-h);
border:0; outline:none;
padding: 0 10px;
width: min(360px, 34vw);
min-width: 220px;
font-size: 13px;
}
.te-lv__iconbtn{
height: var(--lv-h);
min-width: var(--lv-h);
border: 1px solid var(--lv-line-strong);
background:#fff;
border-radius: 6px;
display:inline-flex;
align-items:center;
justify-content:center;
padding: 0 10px;
cursor:pointer;
}
.te-lv__iconbtn svg{ width:16px; height:16px; }
.te-lv__btn{
height: var(--lv-h);
border: 1px solid rgba(11,12,14,.28);
background:#fff;
border-radius: 6px;
padding: 0 12px;
font-size: 13px;
font-weight: 500;
cursor:pointer;
}
.te-lv__btn--primary{
background:#0b0c0e;
border-color:#0b0c0e;
color:#fff;
}
/* table wrapper: innenraum wie DataTables */
.te-lv__gridwrap{
padding: 10px var(--lv-pad-x) 0 var(--lv-pad-x); /* Innenpadding! */
background:#fff;
}
/* table */
.te-lv__table{
width:100%;
border-collapse: separate;
border-spacing: 0;
font-size: 13px;
background:#fff;
border: 1px solid var(--lv-line);
border-radius: 8px;
overflow:hidden;
}
.te-lv__th{
background:#f7f8fa;
color: rgba(11,12,14,.62);
font-weight: 500;
text-align:left;
padding: 10px 12px;
border-bottom: 1px solid var(--lv-line);
white-space: nowrap;
}
.te-lv__td{
padding: var(--lv-cell-y) 12px;
border-bottom: 1px solid var(--lv-line);
vertical-align: top;
background:#fff;
}
/* zebra wie DataTables (dezent) */
.te-lv__row:nth-child(even) .te-lv__td{
background: rgba(11,12,14,.012);
}
/* hover */
.te-lv__row:hover .te-lv__td{
background: rgba(11,12,14,.02);
}
.te-lv__th--check, .te-lv__td--check{ width: 44px; }
.te-lv__th--actions, .te-lv__td--actions{ width: 240px; text-align:right; }
.te-lv__link{
color: rgba(11,12,14,.92);
text-decoration: none;
border-bottom: 1px solid rgba(11,12,14,.20);
font-weight: 500;
}
.te-lv__sub{ margin-top:4px; font-size:12px; color: var(--lv-muted); }
.te-lv__mono{ font-variant-numeric: tabular-nums; }
.te-lv__badge{
display:inline-flex; align-items:center;
height: 22px;
padding: 0 8px;
border-radius: 6px;
border: 1px solid var(--lv-line-strong);
background:#fff;
font-size: 12px;
color: rgba(11,12,14,.80);
}
.te-lv__badge--ok{ background: rgba(42,166,160,.10); border-color: rgba(42,166,160,.30); }
.te-lv__badge--warn{ background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.35); }
/* row buttons (wie in deinem Screenshot-Referenz, aber edel schwarz) */
.te-lv__rowbtns{
display:inline-flex;
align-items:center;
justify-content:flex-end;
gap: 6px;
}
.te-lv__rbtn{
height: 28px;
padding: 0 10px;
border-radius: 6px;
border: 1px solid rgba(11,12,14,.18);
background: #0b0c0e;
color: #fff;
font-size: 12px;
font-weight: 500;
cursor: pointer;
}
.te-lv__rbtn:hover{ background:#000; border-color:#000; }
.te-lv__rbtn--danger{
background:#fff;
color:#0b0c0e;
border-color: rgba(11,12,14,.22);
}
/* footer: kompakt und nicht „leer“ */
.te-lv__foot{
display:flex;
align-items:center;
justify-content:space-between;
gap: 12px;
padding: 12px var(--lv-pad-x) 14px var(--lv-pad-x);
border-top: 1px solid var(--lv-line);
background:#fff;
}
.te-lv__pager{
display:inline-flex;
align-items:center;
gap: 0;
}
.te-lv__pbtn{
height: 30px;
min-width: 34px;
padding: 0 10px;
border: 1px solid var(--lv-line-strong);
background:#fff;
border-radius: 0; /* Button-group scharf */
margin-left: -1px;
cursor:pointer;
}
.te-lv__pbtn--active{
background: rgba(11,12,14,.06);
border-color: rgba(11,12,14,.22);
}
.te-lv__dots{
display:inline-flex;
align-items:center;
height: 30px;
padding: 0 10px;
color: rgba(11,12,14,.45);
}
.te-lv__pill{
display:inline-flex;
align-items:center;
height: 26px;
padding: 0 10px;
border: 1px solid var(--lv-line-strong);
border-radius: 6px;
background:#fff;
color: rgba(11,12,14,.78);
font-size: 12px;
}
.te-lv__select{
height: var(--lv-h);
border: 1px solid var(--lv-line-strong);
background:#fff;
border-radius: 6px;
padding: 0 8px;
}
/* SR only */
.te-lv__sr{
position:absolute !important;
width:1px; height:1px;
margin:-1px; padding:0;
overflow:hidden; clip:rect(0,0,0,0);
white-space:nowrap; border:0;
}
/* =========================================================
ListView Header Alignment Patch (Enterprise Baseline)
Scope: .te-lv only
Ziel: links "Context+Info" sauber, rechts Controls auf einer Höhe
========================================================= */
.te-lv{
/* Ein bisschen mehr „Enterprise“-Höhe, nicht zu groß */
--lv-h: 34px;
}
/* 1) Header als Grid: links / rechts */
.te-lv__head{
display: grid;
grid-template-columns: 1fr auto;
align-items: center; /* wichtigste Änderung: Baseline */
gap: 16px;
}
/* 2) Linke Seite: Titleblock + DT-Info auf einer Linie */
.te-lv__head-left{
display: flex;
align-items: center; /* gleiche Höhe wie Search/Icons */
gap: 18px;
min-width: 0;
}
/* Titleblock kompakt und stabil */
.te-lv__titleblock{
display: flex;
flex-direction: column;
gap: 6px;
min-width: 260px; /* verhindert „wildes Springen“ */
}
.te-lv__object{
line-height: 1.1;
}
.te-lv__viewline{
display: inline-flex;
align-items: center;
gap: 10px;
line-height: 1.1;
}
.te-lv__meta{
line-height: 1.1;
white-space: nowrap;
}
/* 3) Rechte Seite: Controls Cluster auf einer Baseline */
.te-lv__head-right{
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
white-space: nowrap;
}
/* 4) Alle Controls EXAKT gleiche Höhe */
.te-lv__select,
.te-lv__iconbtn,
.te-lv__btn{
height: var(--lv-h);
}
/* Select optisch „Enterprise“: keine WP-Default-Margins */
.te-lv__select{
margin: 0;
line-height: calc(var(--lv-h) - 2px);
}
/* Iconbuttons wirklich zentrieren */
.te-lv__iconbtn{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 10px;
}
/* 5) Search als Input-Group: gleiche Höhe wie Icons */
.te-lv__search{
height: var(--lv-h);
display: inline-flex;
align-items: center;
overflow: hidden; /* damit nichts „übersteht“ */
}
.te-lv__searchinput{
height: var(--lv-h);
margin: 0;
line-height: calc(var(--lv-h) - 2px);
padding: 0 12px;
}
/* Lupe-Button in Search: gleiche Höhe, kein Versatz */
.te-lv__search .te-lv__iconbtn{
height: var(--lv-h);
min-width: var(--lv-h);
border-left: 1px solid var(--lv-line-strong);
border-top: 0;
border-right: 0;
border-bottom: 0;
}
/* 6) WP/Theme-Müll: Buttons/Inputs haben manchmal vertikale margins */
.te-lv button,
.te-lv input,
.te-lv select{
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* 7) Optional: Wenn links zu eng wird, darf DT-Info umbrechen (aber sauber) */
@media (max-width: 980px){
.te-lv__head{
grid-template-columns: 1fr;
gap: 10px;
}
.te-lv__head-right{
justify-content: flex-start;
}
.te-lv__dtleft{
border-left: 0;
padding-left: 0;
}
}
/* Sort Button im Header (Salesforce-like) */
.te-lv__sortbtn{
border: 0;
background: transparent;
padding: 0;
font: inherit;
color: inherit;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
}
.te-lv__sortbtn::after{
content: "";
width: 8px;
height: 8px;
border-right: 1px solid rgba(11,12,14,.45);
border-bottom: 1px solid rgba(11,12,14,.45);
transform: rotate(45deg);
opacity: .55;
}
.te-lv__sortbtn[aria-sort="ascending"]::after{
transform: rotate(-135deg);
opacity: .9;
}
.te-lv__sortbtn[aria-sort="descending"]::after{
transform: rotate(45deg);
opacity: .9;
}
/* =========================================================
Enterprise ListView Header + Sort (Salesforce-like)
Scope: .te-lv only
========================================================= */
.te-lv{
--lv-h: 34px; /* Control height */
--lv-gap: 8px;
--lv-head-pad-y: 12px;
--lv-head-pad-x: 14px;
--lv-line: rgba(11,12,14,.10);
--lv-line-strong: rgba(11,12,14,.16);
--lv-muted: rgba(11,12,14,.55);
}
/* Header = 2-column grid: left context, right controls */
.te-lv__head{
display: grid;
grid-template-columns: 1fr auto;
align-items: center; /* Baseline fix */
gap: 16px;
padding: var(--lv-head-pad-y) var(--lv-head-pad-x);
border-bottom: 1px solid var(--lv-line);
background: #fff;
}
/* Left = titleblock + dtleft in one row, aligned */
.te-lv__head-left{
display: flex;
align-items: center; /* Baseline fix */
gap: 18px;
min-width: 0;
}
/* Titleblock stable: no drifting */
.te-lv__titleblock{
display: grid;
grid-auto-rows: min-content;
gap: 6px;
min-width: 260px;
}
.te-lv__object{
font-size: 12px;
color: var(--lv-muted);
font-weight: 400;
line-height: 1.1;
}
.te-lv__viewline{
display: inline-flex;
align-items: center;
gap: 10px;
line-height: 1.1;
}
.te-lv__viewbtn{
border: 0;
background: transparent;
padding: 0;
font-size: 14px;
font-weight: 500;
color: rgba(11,12,14,.92);
cursor: pointer;
}
.te-lv__meta{
font-size: 12px;
color: var(--lv-muted);
white-space: nowrap;
}
/* dtleft = secondary header controls (like DataTables) */
.te-lv__dtleft{
display: inline-flex;
align-items: center;
gap: 10px;
white-space: nowrap;
padding-left: 14px;
border-left: 1px solid var(--lv-line);
font-size: 12px;
color: var(--lv-muted);
}
/* Right controls wrapper */
.te-lv__head-right{
display: flex;
align-items: center;
justify-content: flex-end;
}
.te-lv__controls{
display: inline-flex;
align-items: center; /* Baseline fix */
gap: var(--lv-gap);
white-space: nowrap;
}
/* Force all controls to same height + remove theme margins */
.te-lv button,
.te-lv input,
.te-lv select{
margin: 0 !important;
box-shadow: none !important;
}
/* Select */
.te-lv__select{
height: var(--lv-h);
line-height: calc(var(--lv-h) - 2px);
border: 1px solid var(--lv-line-strong);
background: #fff;
padding: 0 8px;
border-radius: 6px;
}
/* Search = input-group, height locked */
.te-lv__search{
height: var(--lv-h);
display: inline-flex;
align-items: center;
border: 1px solid var(--lv-line-strong);
border-radius: 6px;
overflow: hidden;
background: #fff;
}
.te-lv__searchinput{
height: var(--lv-h);
border: 0;
outline: none;
padding: 0 12px;
font-size: 13px;
width: min(360px, 34vw);
min-width: 220px;
}
.te-lv__search .te-lv__iconbtn{
height: var(--lv-h);
min-width: var(--lv-h);
border: 0;
border-left: 1px solid var(--lv-line-strong);
border-radius: 0;
}
/* Icon buttons */
.te-lv__iconbtn{
height: var(--lv-h);
min-width: var(--lv-h);
padding: 0 10px;
border: 1px solid var(--lv-line-strong);
background: #fff;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.te-lv__iconbtn svg{ width: 16px; height: 16px; }
/* Primary action */
.te-lv__btn{
height: var(--lv-h);
padding: 0 12px;
border-radius: 6px;
border: 1px solid rgba(11,12,14,.28);
background: #fff;
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.te-lv__btn--primary{
background: #0b0c0e;
border-color: #0b0c0e;
color: #fff;
}
/* =========================================================
Sort (Salesforce/DataTables-like)
========================================================= */
.te-lv__th[data-sort]{
padding-right: 10px; /* room for caret */
}
.te-lv__sortbtn{
border: 0;
background: transparent;
padding: 0;
margin: 0;
font: inherit;
color: inherit;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
}
/* neutral caret */
.te-lv__sortbtn::after{
content: "";
width: 8px;
height: 8px;
border-right: 1px solid rgba(11,12,14,.45);
border-bottom: 1px solid rgba(11,12,14,.45);
transform: rotate(45deg);
opacity: .45;
}
/* active states */
.te-lv__sortbtn[aria-sort="ascending"]::after{
transform: rotate(-135deg);
opacity: .9;
}
.te-lv__sortbtn[aria-sort="descending"]::after{
transform: rotate(45deg);
opacity: .9;
}
.te-lv__sortbtn:hover{
color: rgba(11,12,14,.92);
}
/* Responsive: stack controls cleanly */
@media (max-width: 980px){
.te-lv__head{
grid-template-columns: 1fr;
gap: 10px;
}
.te-lv__head-right{
justify-content: flex-start;
}
.te-lv__dtleft{
border-left: 0;
padding-left: 0;
}
}
/* =========================================================
Enterprise ListView Header + Sort (Salesforce-like)
Scope: .te-lv only
========================================================= */
.te-lv{
--lv-h: 34px; /* Control height */
--lv-gap: 8px;
--lv-head-pad-y: 12px;
--lv-head-pad-x: 14px;
--lv-line: rgba(11,12,14,.10);
--lv-line-strong: rgba(11,12,14,.16);
--lv-muted: rgba(11,12,14,.55);
}
/* Header = 2-column grid: left context, right controls */
.te-lv__head{
display: grid;
grid-template-columns: 1fr auto;
align-items: center; /* Baseline fix */
gap: 16px;
padding: var(--lv-head-pad-y) var(--lv-head-pad-x);
border-bottom: 1px solid var(--lv-line);
background: #fff;
}
/* Left = titleblock + dtleft in one row, aligned */
.te-lv__head-left{
display: flex;
align-items: center; /* Baseline fix */
gap: 18px;
min-width: 0;
}
/* Titleblock stable: no drifting */
.te-lv__titleblock{
display: grid;
grid-auto-rows: min-content;
gap: 6px;
min-width: 260px;
}
.te-lv__object{
font-size: 12px;
color: var(--lv-muted);
font-weight: 400;
line-height: 1.1;
}
.te-lv__viewline{
display: inline-flex;
align-items: center;
gap: 10px;
line-height: 1.1;
}
.te-lv__viewbtn{
border: 0;
background: transparent;
padding: 0;
font-size: 14px;
font-weight: 500;
color: rgba(11,12,14,.92);
cursor: pointer;
}
.te-lv__meta{
font-size: 12px;
color: var(--lv-muted);
white-space: nowrap;
}
/* dtleft = secondary header controls (like DataTables) */
.te-lv__dtleft{
display: inline-flex;
align-items: center;
gap: 10px;
white-space: nowrap;
padding-left: 14px;
border-left: 1px solid var(--lv-line);
font-size: 12px;
color: var(--lv-muted);
}
/* Right controls wrapper */
.te-lv__head-right{
display: flex;
align-items: center;
justify-content: flex-end;
}
.te-lv__controls{
display: inline-flex;
align-items: center; /* Baseline fix */
gap: var(--lv-gap);
white-space: nowrap;
}
/* Force all controls to same height + remove theme margins */
.te-lv button,
.te-lv input,
.te-lv select{
margin: 0 !important;
box-shadow: none !important;
}
/* Select */
.te-lv__select{
height: var(--lv-h);
line-height: calc(var(--lv-h) - 2px);
border: 1px solid var(--lv-line-strong);
background: #fff;
padding: 0 8px;
border-radius: 6px;
}
/* Search = input-group, height locked */
.te-lv__search{
height: var(--lv-h);
display: inline-flex;
align-items: center;
border: 1px solid var(--lv-line-strong);
border-radius: 6px;
overflow: hidden;
background: #fff;
}
.te-lv__searchinput{
height: var(--lv-h);
border: 0;
outline: none;
padding: 0 12px;
font-size: 13px;
width: min(360px, 34vw);
min-width: 220px;
}
.te-lv__search .te-lv__iconbtn{
height: var(--lv-h);
min-width: var(--lv-h);
border: 0;
border-left: 1px solid var(--lv-line-strong);
border-radius: 0;
}
/* Icon buttons */
.te-lv__iconbtn{
height: var(--lv-h);
min-width: var(--lv-h);
padding: 0 10px;
border: 1px solid var(--lv-line-strong);
background: #fff;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.te-lv__iconbtn svg{ width: 16px; height: 16px; }
/* Primary action */
.te-lv__btn{
height: var(--lv-h);
padding: 0 12px;
border-radius: 6px;
border: 1px solid rgba(11,12,14,.28);
background: #fff;
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.te-lv__btn--primary{
background: #0b0c0e;
border-color: #0b0c0e;
color: #fff;
}
/* =========================================================
Sort (Salesforce/DataTables-like)
========================================================= */
.te-lv__th[data-sort]{
padding-right: 10px; /* room for caret */
}
.te-lv__sortbtn{
border: 0;
background: transparent;
padding: 0;
margin: 0;
font: inherit;
color: inherit;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
}
/* neutral caret */
.te-lv__sortbtn::after{
content: "";
width: 8px;
height: 8px;
border-right: 1px solid rgba(11,12,14,.45);
border-bottom: 1px solid rgba(11,12,14,.45);
transform: rotate(45deg);
opacity: .45;
}
/* active states */
.te-lv__sortbtn[aria-sort="ascending"]::after{
transform: rotate(-135deg);
opacity: .9;
}
.te-lv__sortbtn[aria-sort="descending"]::after{
transform: rotate(45deg);
opacity: .9;
}
.te-lv__sortbtn:hover{
color: rgba(11,12,14,.92);
}
/* Responsive: stack controls cleanly */
@media (max-width: 980px){
.te-lv__head{
grid-template-columns: 1fr;
gap: 10px;
}
.te-lv__head-right{
justify-content: flex-start;
}
.te-lv__dtleft{
border-left: 0;
padding-left: 0;
}
}
/* =========================================================
ListView: Row action icon buttons (Enterprise)
========================================================= */
.te-lv__td--actions{ text-align: right; }
.te-lv__rowbtns{
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
}
/* Icon-only action button */
.te-lv__rbtn--icon{
width: 30px;
height: 30px;
padding: 0;
border-radius: 6px;
border: 1px solid rgba(11,12,14,.16);
background: #0b0c0e;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.te-lv__rbtn--icon svg{ width: 16px; height: 16px; }
.te-lv__rbtn--icon:hover{ background: #000; border-color: #000; }
/* Delete: outlined (safer visual language) */
.te-lv__rbtn--danger{
background: #fff;
color: #0b0c0e;
border-color: rgba(11,12,14,.22);
}
.te-lv__rbtn--danger:hover{
background: rgba(11,12,14,.04);
border-color: rgba(11,12,14,.30);
}
/* =========================================================
ListView: Search alignment fix (deterministic)
Problem: input-group baseline drift (padding/border/line-height)
Lösung: grid container + identical box model for input/button
========================================================= */
.te-lv__search{
height: var(--lv-h);
display: grid;
grid-template-columns: 1fr var(--lv-h);
align-items: stretch;
border: 1px solid var(--lv-line-strong);
border-radius: 6px;
overflow: hidden;
background: #fff;
}
/* ensure the input doesn't add its own internal vertical metrics */
.te-lv__searchinput{
height: var(--lv-h);
border: 0;
outline: none;
padding: 0 12px;
font-size: 13px;
line-height: var(--lv-h); /* kills baseline drift */
display: block;
}
/* lock the iconbutton to the exact same height and remove any vertical padding */
.te-lv__search .te-lv__iconbtn{
height: var(--lv-h);
min-width: var(--lv-h);
width: var(--lv-h);
border: 0;
border-left: 1px solid var(--lv-line-strong);
border-radius: 0;
padding: 0;
}
/* also lock svg centering */
.te-lv__search .te-lv__iconbtn svg{
width: 16px;
height: 16px;
display: block;
}
/* =========================================================
TE ListView – Enterprise Header Fix + Icon Actions (Patch)
Scope: .te-lv only
Ziel:
- Search darf nicht kollabieren/hoch rutschen
- Header baseline exakt (Salesforce-like)
- Row actions: graue Outline Icons auf Weiß (keine schwarzen Kacheln)
========================================================= */
/* ---------- Header Layout: von Flex(space-between) -> Grid ---------- */
.te-lv__head{
display: grid !important;
grid-template-columns: 1fr auto !important; /* links flexibel, rechts stabil */
align-items: center !important;
column-gap: 16px !important;
}
/* Linke Seite: Context + dtleft sauber auf einer Höhe */
.te-lv__head-left{
display: flex !important;
align-items: center !important;
gap: 18px !important;
min-width: 0 !important; /* wichtig für grid overflow handling */
}
/* dtleft als sekundärer Block – darf NICHT die rechten Controls zerquetschen */
.te-lv__dtleft{
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
white-space: nowrap !important;
min-width: 0 !important;
}
/* Rechte Seite: Controls Cluster */
.te-lv__head-right{
display: inline-flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 10px !important;
white-space: nowrap !important;
margin-left: 0 !important; /* weg mit flex-hack */
}
/* ---------- Search: deterministic input-group (kein Drift, kein Shrink) ---------- */
.te-lv__search{
height: var(--lv-h) !important;
display: grid !important;
grid-template-columns: minmax(260px, 360px) var(--lv-h) !important; /* Input bleibt lesbar */
align-items: stretch !important;
border: 1px solid var(--lv-line-strong) !important;
border-radius: 0 !important; /* eure Regel */
overflow: hidden !important;
background: #fff !important;
}
.te-lv__searchinput{
height: var(--lv-h) !important;
border: 0 !important;
outline: none !important;
background: transparent !important;
padding: 0 12px !important;
font-size: 13px !important;
font-weight: 400 !important;
line-height: var(--lv-h) !important; /* kill baseline drift */
margin: 0 !important; /* Theme-Margins eliminieren */
min-width: 0 !important;
}
.te-lv__search .te-lv__iconbtn{
height: var(--lv-h) !important;
width: var(--lv-h) !important;
min-width: var(--lv-h) !important;
border: 0 !important;
border-left: 1px solid var(--lv-line-strong) !important;
border-radius: 0 !important;
padding: 0 !important; /* kein Vertikalversatz */
margin: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
/* ---------- Globale Theme-Margins für Controls neutralisieren ---------- */
.te-lv button,
.te-lv input,
.te-lv select{
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* ---------- Row Actions: grey outline icons on white (enterprise) ---------- */
.te-lv__td--actions{ text-align: right; }
.te-lv__rowbtns{
display: inline-flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 8px !important;
}
/* Icon-only button */
.te-lv__rbtn{
width: 30px !important;
height: 30px !important;
padding: 0 !important;
border-radius: 0 !important;
border: 1px solid rgba(11,12,14,.14) !important;
background: #fff !important;
color: rgba(11,12,14,.62) !important; /* neutral grey */
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
}
/* bessere “Icon-Qualität” = stroke-only, runde caps/joins */
.te-lv__rbtn svg{
width: 16px !important;
height: 16px !important;
fill: none !important;
stroke: currentColor !important;
stroke-width: 1.8 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
display: block !important;
}
.te-lv__rbtn:hover{
border-color: rgba(11,12,14,.28) !important;
background: rgba(11,12,14,.02) !important;
color: rgba(11,12,14,.78) !important;
}
/* Delete: nur minimal stärker – KEIN rot, kein black */
.te-lv__rbtn--danger{
color: rgba(11,12,14,.70) !important;
}
.te-lv__rbtn--danger:hover{
border-color: rgba(11,12,14,.34) !important;
}
/* ---------- Responsive: wenn Header eng wird, rechte Controls umbrechen, aber sauber ---------- */
@media (max-width: 980px){
.te-lv__head{
grid-template-columns: 1fr !important;
row-gap: 10px !important;
}
.te-lv__head-right{
justify-content: flex-start !important;
flex-wrap: wrap !important;
}
.te-lv__search{
grid-template-columns: minmax(220px, 1fr) var(--lv-h) !important;
}
}
/* =========================================================
LV Row Actions: equal spacing + colored icons (enterprise)
========================================================= */
.te-lv__rowbtns{
display: inline-flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 8px !important; /* exakt gleich */
}
.te-lv__rowbtns button{
width: 32px !important;
height: 32px !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 0 !important;
border: 1px solid rgba(11,12,14,.16) !important;
background: #fff !important; /* immer weiß */
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
}
/* Icon quality + neutral base */
.te-lv__rowbtns button svg{
width: 16px !important;
height: 16px !important;
display: block !important;
fill: none !important;
stroke: rgba(11,12,14,.55) !important;
stroke-width: 1.8 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
}
/* requested semantic colors – only the icon */
.te-lv__rowbtns button[data-action="delete"] svg{ stroke: #b42318 !important; } /* rot */
.te-lv__rowbtns button[data-action="edit"] svg{ stroke: #a77b00 !important; } /* Gelb */
.te-lv__rowbtns button[data-action="view"] svg{ stroke: #1a7f37 !important; } /* Grün */
/* hover: enterprise-quiet */
.te-lv__rowbtns button:hover{
border-color: rgba(11,12,14,.28) !important;
background: rgba(11,12,14,.02) !important;
}
/* =========================================================
LV Header controls: hard baseline + same control height
Works even if search has ONLY an input (no button)
========================================================= */
.te-lv{ --lv-h: 34px; }
.te-lv__head-right,
.te-lv__controls{
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
white-space: nowrap !important;
}
.te-lv__head-right > *{ margin: 0 !important; }
.te-lv__iconbtn,
.te-lv__btn,
.te-lv__select{
height: var(--lv-h) !important;
line-height: calc(var(--lv-h) - 2px) !important;
border-radius: 0 !important;
}
/* Search container becomes a real control */
.te-lv__search{
height: var(--lv-h) !important;
display: inline-flex !important;
align-items: center !important;
border: 1px solid rgba(11,12,14,.18) !important;
border-radius: 0 !important;
background: #fff !important;
overflow: hidden !important;
}
/* If search contains only input, it still aligns */
.te-lv__searchinput{
height: var(--lv-h) !important;
line-height: var(--lv-h) !important;
border: 0 !important;
outline: none !important;
padding: 0 12px !important;
margin: 0 !important;
min-width: 320px !important; /* verhindert „zusammenklappen“ */
}
/* =========================================================
LV View selector: enterprise
========================================================= */
.te-lv__titleblock{ gap: 6px !important; }
.te-lv__viewline{
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
}
.te-lv__viewbtn{
height: var(--lv-h) !important;
padding: 0 10px !important;
border: 1px solid rgba(11,12,14,.18) !important;
background: #fff !important;
border-radius: 0 !important;
font-size: 13px !important;
font-weight: 500 !important;
color: rgba(11,12,14,.88) !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
}
.te-lv__chev{
width: 8px !important;
height: 8px !important;
border-right: 1px solid rgba(11,12,14,.55) !important;
border-bottom: 1px solid rgba(11,12,14,.55) !important;
transform: rotate(45deg) !important;
display: inline-block !important;
margin-top: -2px !important;
}
.te-lv__meta{
font-size: 12px !important;
color: rgba(11,12,14,.55) !important;
white-space: nowrap !important;
}
/* =========================================================
TE ListView FINAL PATCH (11:29)
Fixes:
1) Row action icons: equal spacing, centered, grey outline (no mystery gap)
2) Header + Search baseline alignment (no floating)
3) Pagination professional (bootstrap-like group)
Scope: .te-lv only
========================================================= */
.te-lv{
--lv-h: 34px;
--lv-border: rgba(11,12,14,.16);
--lv-border-strong: rgba(11,12,14,.22);
--lv-text-muted: rgba(11,12,14,.55);
}
/* -----------------------------
HEADER: stable grid layout
------------------------------ */
.te-lv__head{
display: grid !important;
grid-template-columns: 1fr auto !important;
align-items: center !important;
gap: 16px !important;
}
.te-lv__head-left{
display: flex !important;
align-items: center !important;
gap: 18px !important;
min-width: 0 !important;
}
.te-lv__head-right{
display: inline-flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 10px !important;
white-space: nowrap !important;
}
/* hard-reset theme margins that cause drifting */
.te-lv button,
.te-lv input,
.te-lv select{
margin: 0 !important;
vertical-align: middle !important;
box-sizing: border-box !important;
}
/* unified control heights */
.te-lv__iconbtn,
.te-lv__btn,
.te-lv__select{
height: var(--lv-h) !important;
line-height: calc(var(--lv-h) - 2px) !important;
border-radius: 0 !important;
}
/* -----------------------------
SEARCH: input-group (no float)
------------------------------ */
.te-lv__search{
height: var(--lv-h) !important;
display: grid !important;
grid-template-columns: minmax(320px, 420px) var(--lv-h) !important;
align-items: stretch !important;
border: 1px solid var(--lv-border-strong) !important;
border-radius: 0 !important;
background: #fff !important;
overflow: hidden !important;
}
.te-lv__searchinput{
height: var(--lv-h) !important;
border: 0 !important;
outline: none !important;
padding: 0 12px !important;
line-height: var(--lv-h) !important;
font-size: 13px !important;
font-weight: 400 !important;
display: block !important;
min-width: 0 !important;
}
.te-lv__search .te-lv__iconbtn{
height: var(--lv-h) !important;
width: var(--lv-h) !important;
min-width: var(--lv-h) !important;
border: 0 !important;
border-left: 1px solid var(--lv-border-strong) !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
/* -----------------------------
ROW ACTIONS: FIX "mystery gap"
------------------------------ */
/* 1) kill any inline whitespace / font-metric gaps */
.te-lv__rowbtns{
display: inline-flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 8px !important;
font-size: 0 !important; /* eliminates phantom spacing from inline content */
}
/* 2) hard-normalize buttons (centering + grey outline) */
.te-lv__rowbtns .te-lv__rbtn{
width: 32px !important;
height: 32px !important;
padding: 0 !important;
border-radius: 0 !important;
border: 1px solid var(--lv-border) !important; /* grau */
background: #fff !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
}
/* 3) ensure svg is optically centered */
.te-lv__rowbtns .te-lv__rbtn svg{
width: 16px !important;
height: 16px !important;
display: block !important;
fill: none !important;
stroke-width: 1.8 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
}
/* semantic icon colors (only the icon) */
.te-lv__rowbtns .te-lv__rbtn[data-action="delete"] svg{ stroke: #b42318 !important; } /* rot */
.te-lv__rowbtns .te-lv__rbtn[data-action="edit"] svg{ stroke: #1a7f37 !important; } /* grün */
.te-lv__rowbtns .te-lv__rbtn[data-action="view"] svg{ stroke: #a77b00 !important; } /* dunkelgelb */
/* hover quiet */
.te-lv__rowbtns .te-lv__rbtn:hover{
border-color: rgba(11,12,14,.28) !important;
background: rgba(11,12,14,.02) !important;
}
/* -----------------------------
PAGINATION: professional group
------------------------------ */
.te-lv__pager{
display: inline-flex !important;
align-items: center !important;
}
.te-lv__pbtn{
height: 30px !important;
min-width: 32px !important;
padding: 0 10px !important;
border: 1px solid var(--lv-border) !important;
background: #fff !important;
color: rgba(11,12,14,.72) !important;
border-radius: 0 !important;
margin: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
/* collapse borders -> one continuous control */
.te-lv__pbtn + .te-lv__pbtn{
border-left: 0 !important;
}
.te-lv__pbtn--active{
background: rgba(11,12,14,.06) !important;
color: rgba(11,12,14,.92) !important;
border-color: var(--lv-border-strong) !important;
}
.te-lv__dots{
display: inline-flex !important;
height: 30px !important;
padding: 0 10px !important;
border-top: 1px solid var(--lv-border) !important;
border-bottom: 1px solid var(--lv-border) !important;
color: var(--lv-text-muted) !important;
}
/* =========================================================
TonnEstate CRM – ListView (Tabulator) – scoped
========================================================= */
.te-lvtab{
/* App: grauer Hintergrund, weiße Arbeitsfläche */
background: transparent;
}
.te-lvtab__surface{
background:#fff;
border:1px solid rgba(11,12,14,.10);
border-radius: 8px; /* deine Aussage: Rundung ok */
overflow:hidden;
}
.te-lvtab__bar{
display:flex;
align-items:center; /* <- der Alignment-Fix */
justify-content:space-between;
gap:16px;
padding:12px 14px;
border-bottom:1px solid rgba(11,12,14,.08);
}
.te-lvtab__left,
.te-lvtab__right{
display:flex;
align-items:center; /* <- der Alignment-Fix */
gap:12px;
min-width:0;
}
.te-lvtab__left{ flex:1 1 auto; }
.te-lvtab__right{ flex:0 0 auto; }
.te-lvtab__object{
font-size:12px;
color:rgba(11,12,14,.60);
white-space:nowrap;
}
.te-lvtab__view{
height:34px;
padding:0 10px;
border:1px solid rgba(11,12,14,.16);
background:#fff;
color:rgba(11,12,14,.90);
font-size:14px;
font-weight:400; /* ruhig, nicht fett */
line-height:32px;
cursor:pointer;
white-space:nowrap;
}
.te-lvtab__chev{
display:inline-block;
width:0; height:0;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:6px solid rgba(11,12,14,.55);
margin-left:8px;
transform: translateY(-1px);
}
.te-lvtab__meta{
display:flex;
align-items:center; /* <- wieder baseline fix */
gap:10px;
color:rgba(11,12,14,.65);
font-size:12px;
white-space:nowrap;
}
.te-lvtab__count strong{
font-weight:600; /* minimal, kein „fett“ Look */
}
.te-lvtab__sep{
width:1px;
height:18px;
background:rgba(11,12,14,.10);
}
.te-lvtab__label{ color:rgba(11,12,14,.55); }
.te-lvtab__select{
height:34px;
border:1px solid rgba(11,12,14,.16);
background:#fff;
padding:0 8px;
font-size:13px;
}
.te-lvtab__range{
margin-left:6px;
color:rgba(11,12,14,.55);
}
/* Toolbar: Suche + Buttons = gleiche Höhe, gleicher Abstand */
.te-lvtab__search{
height:34px;
display:flex;
align-items:center;
border:1px solid rgba(11,12,14,.16);
background:#fff;
}
.te-lvtab__searchinput{
height:32px;
width:320px;
border:0;
outline:0;
padding:0 10px;
font-size:13px;
background:transparent;
}
.te-lvtab__iconbtn{
width:34px;
height:34px;
display:inline-flex;
align-items:center;
justify-content:center;
border:1px solid rgba(11,12,14,.16);
background:#fff;
padding:0;
cursor:pointer;
margin-left:0; /* <- verhindert „wilde“ Abstände */
}
.te-lvtab__search .te-lvtab__iconbtn{
border:0;
border-left:1px solid rgba(11,12,14,.12);
}
.te-lvtab__iconbtn svg{
width:16px;
height:16px;
color:rgba(11,12,14,.55); /* Enterprise: grau, nicht schwarz */
}
.te-lvtab__btn{
height:34px;
padding:0 12px;
border:1px solid rgba(11,12,14,.85);
background:#0b0c0e;
color:#fff;
font-size:13px;
font-weight:400;
cursor:pointer;
}
/* Screenreader helper */
.te-lvtab__sr{
position:absolute !important;
width:1px; height:1px;
padding:0; margin:-1px;
overflow:hidden; clip:rect(0,0,0,0);
white-space:nowrap; border:0;
}
/* Grid wrapper */
.te-lvtab__grid{
padding:10px 12px 12px;
background: #f3f4f6; /* Content-Hintergrund */
}
/* Tabulator “Enterprise” overrides (nur in dieser ListView) */
.te-lvtab .tabulator{
border:1px solid rgba(11,12,14,.10);
border-radius:8px;
overflow:hidden;
background:#fff;
}
.te-lvtab .tabulator .tabulator-header{
background:#f6f7f9;
border-bottom:1px solid rgba(11,12,14,.10);
}
.te-lvtab .tabulator .tabulator-col{
background:#f6f7f9;
border-right:1px solid rgba(11,12,14,.08);
}
.te-lvtab .tabulator .tabulator-col-title{
font-weight:400;
color:rgba(11,12,14,.75);
font-size:12px;
}
.te-lvtab .tabulator .tabulator-row{
min-height:44px; /* App density */
border-bottom:1px solid rgba(11,12,14,.06);
}
.te-lvtab .tabulator .tabulator-cell{
padding:10px 12px; /* inneres Padding pro Row/Zelle */
font-size:13px;
color:rgba(11,12,14,.90);
}
/* Action icons: gleiches Spacing + Centering + Outline grau */
.te-lvtab .te-row-actions{
display:flex;
justify-content:flex-end;
gap:8px; /* <- garantiert gleiche Abstände */
}
.te-lvtab .te-ia{
width:30px;
height:30px;
display:inline-flex;
align-items:center;
justify-content:center;
border:1px solid rgba(11,12,14,.14);
background:#fff;
padding:0;
cursor:pointer;
}
.te-lvtab .te-ia svg{
width:16px;
height:16px;
color:rgba(11,12,14,.55);
}
/* Funktionsfarben (nicht dekorativ): nur Icon-Farbe */
.te-lvtab .te-ia--del svg{ color: rgba(200, 0, 0, .75); }
.te-lvtab .te-ia--edit svg{ color: rgba(170, 140, 0, .85); }
.te-lvtab .te-ia--view svg{ color: rgba(0, 140, 60, .75); }
/* Hover: leicht stärker, aber nicht “webby” */
.te-lvtab .te-ia:hover{ border-color: rgba(11,12,14,.28); }
/* Tabulator – TonnEstate Skin (scoped) */
.te-lvtab .tabulator {
border: 1px solid rgba(11,12,14,.10);
border-radius: 12px;
overflow: hidden;
}
.te-lvtab .tabulator .tabulator-header {
background: #f7f8f9;
border-bottom: 1px solid rgba(11,12,14,.10);
}
.te-lvtab .tabulator .tabulator-footer {
background: #fff;
border-top: 1px solid rgba(11,12,14,.10);
}
/* Pagination Buttons */
.te-lvtab .tabulator .tabulator-paginator .tabulator-page {
border: 1px solid rgba(11,12,14,.14);
background: #fff;
color: #0b0c0e;
border-radius: 10px;
min-width: 36px;
height: 34px;
padding: 0 10px;
margin: 0 4px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.te-lvtab .tabulator .tabulator-paginator .tabulator-page.active {
background: #0b0c0e;
color: #fff;
border-color: #0b0c0e;
}
/* Counter / “Datensätze” neutral */
.te-lvtab .tabulator .tabulator-footer .tabulator-page-counter,
.te-lvtab .tabulator .tabulator-footer .tabulator-page-size {
color: #2a2f35;
}
/* Search input: nicht grau, sauber */
.te-lvtab .te-lvtab__searchinput {
color: #0b0c0e;
}
.te-lvtab .te-lvtab__searchinput::placeholder {
color: rgba(11,12,14,.45);
}
/* Hier neu */
/* OVERRIDE: Tabulator Pagination (ListView) – right aligned, no container, DE label, elegant select
Scope: .te-lvtab ONLY
*/
/* Footer nicht als Flex anfassen – nur stabile Float/Align-Logik */
.te-lvtab .tabulator .tabulator-footer{
background:#fff;
border-top:1px solid rgba(11,12,14,.10);
text-align:right; /* paginator aligns to the right */
padding: 8px 12px; /* kompakt, enterprise */
}
/* Page size + counter links halten */
.te-lvtab .tabulator .tabulator-footer .tabulator-page-size,
.te-lvtab .tabulator .tabulator-footer .tabulator-page-counter{
float:left;
color:#2a2f35;
}
/* Paginator rechts – ohne grauen Container */
.te-lvtab .tabulator .tabulator-footer .tabulator-paginator{
float:right;
margin:0;
padding:0;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
display:inline-block;
}
/* Button-Design: CodePen-like states, aber 0px Radius */
.te-lvtab .tabulator .tabulator-paginator .tabulator-page{
border:1px solid rgba(11,12,14,.18) !important;
background:#fff !important;
color: rgba(11,12,14,.78) !important;
border-radius:0 !important; /* Regel */
min-width:40px;
height:34px;
padding:0 12px;
margin:0 4px !important; /* CodePen spacing */
display:inline-flex;
align-items:center;
justify-content:center;
font-weight:400;
box-shadow:none !important;
}
/* Hover + Active exakt wie CodePen-Charakter (dunkel gefüllt) */
.te-lvtab .tabulator .tabulator-paginator .tabulator-page:hover{
/* background:#1d1f20 !important; */
border-color:#1d1f20 !important;
color:#1d1f20 !important;
}
.te-lvtab .tabulator .tabulator-paginator .tabulator-page.active{
/* background:#1d1f20 !important; */
border-color:#1d1f20 !important;
/* color:#f0f0f0 !important; */
}
/* Disabled neutral */
.te-lvtab .tabulator .tabulator-paginator .tabulator-page.disabled,
.te-lvtab .tabulator .tabulator-paginator .tabulator-page[disabled],
.te-lvtab .tabulator .tabulator-paginator .tabulator-page[aria-disabled="true"]{
opacity:.35;
pointer-events:none;
}
/* --- Page Size deutsch + Select "edel" --- */
/* Annahme (Tabulator üblich): Label umschließt Select */
.te-lvtab .tabulator .tabulator-footer .tabulator-page-size label{
color:transparent; /* Label-Text unsichtbar, Layout bleibt */
font-size:13px;
position:relative;
margin-right:10px;
}
.te-lvtab .tabulator .tabulator-footer .tabulator-page-size label::before{
content:"Einträge"; /* dein Wunsch: deutsch */
color:#2a2f35;
margin-right:10px;
}
/* Select wieder korrekt sichtbar/stabil (nicht zerstören) */
.te-lvtab .tabulator .tabulator-footer .tabulator-page-size select{
color:#0b0c0e;
height:34px;
line-height:34px;
border:1px solid rgba(11,12,14,.18);
background:#fff;
border-radius:0 !important; /* Regel */
padding:0 10px;
font-size:13px;
font-weight:400;
box-shadow:none;
outline:none;
}
.te-lvtab .tabulator .tabulator-footer .tabulator-page-size select:hover{
border-color: rgba(11,12,14,.28);
}
.te-lvtab .tabulator .tabulator-footer .tabulator-page-size select:focus{
border-color: rgba(11,12,14,.34);
outline:1px solid rgba(11,12,14,.22);
outline-offset:1px;
}
/* Float-Clearing, damit Footer-Höhe korrekt bleibt */
.te-lvtab .tabulator .tabulator-footer::after{
content:"";
display:block;
clear:both;
}
/* OVERRIDE: Tabulator footer PageSize (left) + Pagination (right) + Select black/white
Scope: #teCustomersGrid ONLY
*/
/* Left: page size; Right: paginator */
#teCustomersGrid .tabulator .tabulator-footer .tabulator-page-size{
float: left;
}
#teCustomersGrid .tabulator .tabulator-footer .tabulator-paginator{
float: right;
}
/* Clearfix */
#teCustomersGrid .tabulator .tabulator-footer::after{
content:"";
display:block;
clear:both;
}
/* Select: black background, white value (consistent with active page) */
#teCustomersGrid .tabulator .tabulator-footer .tabulator-page-size select{
height: 34px;
line-height: 34px;
padding: 0 12px;
border-radius: 0 !important;
border: 1px solid #0b0c0e;
background: #0b0c0e;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff; /* Chromium/Safari edge cases */
font-size: 13px;
font-weight: 400;
box-shadow: none !important;
outline: none !important;
vertical-align: middle;
}
/* Dropdown options readable (native dropdown uses its own surface) */
#teCustomersGrid .tabulator .tabulator-footer .tabulator-page-size select option{
background: #ffffff;
color: #0b0c0e;
}
/* OVERRIDE: Customers Grid – PageSize Select black/white (footer only)
Scope: #teCustomersGrid ONLY
*/
#teCustomersGrid .tabulator .tabulator-footer .tabulator-page-size select{
height:34px;
line-height:34px;
padding:0 12px;
border-radius:0 !important;
border:1px solid #0b0c0e;
background:#0b0c0e;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff; /* Chrome/Safari native select */
font-size:13px;
font-weight:400;
box-shadow:none !important;
outline:none !important;
}
/* Optionen lesbar (native dropdown surface) */
#teCustomersGrid .tabulator .tabulator-footer .tabulator-page-size select option{
background:#ffffff;
color:#0b0c0e;
}
/* OVERRIDE: Tabulator footer page-size select black/white
Scope: #teCustomersGrid ONLY
*/
#teCustomersGrid .tabulator .tabulator-footer .tabulator-page-size select{
height: 34px;
line-height: 34px;
padding: 0 12px;
border-radius: 0 !important;
border: 1px solid #0b0c0e;
background: #0b0c0e;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff;
font-size: 13px;
font-weight: 400;
box-shadow: none !important;
outline: none !important;
}
/* Dropdown options readable */
#teCustomersGrid .tabulator .tabulator-footer .tabulator-page-size select option{
background: #ffffff;
color: #0b0c0e;
}
/* =========================================================
/* ADD */ Tabulator Footer Pagination (Salesforce-like)
Scope: #teCustomersGrid only
Goals:
- "Page Size" -> "Anzahl Einträge" (UTF escape)
- Label vor Select
- Select schwarz/weiß wie Current Page
- Pagination rechts, Page-Size links
========================================================= */
/* Footer row: two zones (left page-size, right paginator) */
#teCustomersGrid .tabulator .tabulator-footer{
display: flex;
align-items: center;
justify-content: flex-start;
}
/* Left zone */
#teCustomersGrid .tabulator .tabulator-footer .tabulator-page-size{
display: inline-flex;
align-items: center;
gap: 8px;
margin-right: 12px;
}
/* Replace Tabulator text label visually */
#teCustomersGrid .tabulator .tabulator-footer .tabulator-page-size{
font-size: 0; /* hide existing "Page Size" text node safely */
line-height: 0;
}
/* New label (UTF-escaped) */
#teCustomersGrid .tabulator .tabulator-footer .tabulator-page-size::before{
content: "Anzahl Eintr\\00E4ge";
font-size: 13px;
line-height: 1;
color: #2a2f35;
font-weight: 400;
}
/* Ensure select is visible again (undo font-size:0 on wrapper) */
#teCustomersGrid .tabulator .tabulator-footer .tabulator-page-size select{
font-size: 13px;
line-height: 1;
}
/* Select styling: black/white, square, compact */
#teCustomersGrid .tabulator .tabulator-footer .tabulator-page-size select{
height: 34px;
padding: 0 10px;
border-radius: 0 !important;
border: 1px solid #0b0c0e !important;
background: #0b0c0e !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff;
box-shadow: none !important;
outline: none !important;
}
/* Options (browser dependent; safe defaults) */
#teCustomersGrid .tabulator .tabulator-footer .tabulator-page-size select option{
background: #ffffff;
color: #0b0c0e;
}
/* Right zone: paginator aligned to the right */
#teCustomersGrid .tabulator .tabulator-footer .tabulator-paginator{
margin-left: auto;
}
/* Keep paginator controls compact and square */
#teCustomersGrid .tabulator .tabulator-footer .tabulator-page{
border-radius: 0 !important;
}
/* Ensure current page matches the "black" control style */
#teCustomersGrid .tabulator .tabulator-footer .tabulator-page.active{
background: #0b0c0e !important;
border-color: #0b0c0e !important;
color: #ffffff !important;
}
/* =========================================================
Tabulator – PageSize Select (Enterprise)
Scope: Tabulator Footer only
========================================================= */
.tabulator .tabulator-footer .tabulator-page-size{
/* Reset WordPress/Theme Select Look */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Sizing */
height: 34px;
line-height: 34px;
padding: 0 34px 0 12px; /* right padding for chevron */
/* Typography */
font: inherit;
font-size: 13px;
font-weight: 600;
/* Visual */
color: rgba(11,12,14,.92);
background-color: #fff;
border: 1px solid rgba(11,12,14,.18);
border-radius: 10px;
/* Layout safety */
margin: 0 !important;
float: none !important;
position: static !important;
/* Smooth */
transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
/* Custom chevron (no external SVG needed) */
.tabulator .tabulator-footer .tabulator-page-size{
background-image:
linear-gradient(45deg, transparent 50%, rgba(11,12,14,.65) 50%),
linear-gradient(135deg, rgba(11,12,14,.65) 50%, transparent 50%);
background-position:
calc(100% - 16px) 50%,
calc(100% - 11px) 50%;
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
}
/* Hover */
.tabulator .tabulator-footer .tabulator-page-size:hover{
border-color: rgba(11,12,14,.28);
background-color: #fff;
}
/* Focus (enterprise ring) */
.tabulator .tabulator-footer .tabulator-page-size:focus{
outline: none;
border-color: rgba(42,166,160,.70); /* te-accent */
box-shadow: 0 0 0 3px rgba(42,166,160,.18);
}
/* Disabled */
.tabulator .tabulator-footer .tabulator-page-size:disabled{
opacity: .55;
cursor: not-allowed;
}
/* Option readability (some browsers ignore much of this, but harmless) */
.tabulator .tabulator-footer .tabulator-page-size option{
font-weight: 600;
}
/* =========================================================
Tabulator Footer: Page-Size LINKS, Pager RECHTS
(hartes Override gegen floats / text-align / WP-Defaults)
========================================================= */
.tabulator .tabulator-footer .tabulator-footer-contents{
/* falls irgendwo text-align:right reingrätscht */
text-align: left !important;
}
/* Der Container, der ALLES enthält (Label + Select + Pagerbuttons) */
.tabulator .tabulator-footer .tabulator-paginator{
display: flex !important;
align-items: center !important;
gap: 10px !important;
/* der wichtigste Punkt: weg mit float/right-shifts */
float: none !important;
width: 100% !important;
justify-content: flex-end !important; /* Pager grundsätzlich rechts */
}
/* Label soll links bleiben */
.tabulator .tabulator-footer .tabulator-paginator > label{
order: 1 !important;
margin: 0 !important;
white-space: nowrap !important;
}
/* Select soll links stehen und ALLES nachfolgende nach rechts schieben */
.tabulator .tabulator-footer .tabulator-paginator > select.tabulator-page-size{
order: 2 !important;
margin-right: auto !important; /* DAS schiebt die Buttons nach rechts */
float: none !important; /* killt Float-Bugs zuverlässig */
}
/* Pager-Buttons bleiben rechts */
.tabulator .tabulator-footer .tabulator-paginator > .tabulator-page,
.tabulator .tabulator-footer .tabulator-paginator > .tabulator-pages{
order: 3 !important;
}
/* =========================================================
Tabulator PageSize Select – sichtbar, länglich, enterprise
(nur Optik, kein Layout)
========================================================= */
.tabulator .tabulator-footer .tabulator-paginator > select.tabulator-page-size{
/* Größe / Form */
min-width: 84px !important; /* länglicher */
height: 38px !important; /* größer */
line-height: 38px !important;
padding: 0 38px 0 14px !important; /* Platz für Chevron rechts */
/* Typo */
font: inherit !important;
font-size: 14px !important;
font-weight: 600 !important;
/* Look */
background-color: #ffffff !important;
border: 1px solid rgba(11,12,14,.28) !important;
border-radius: 4px !important;
color: rgba(11,12,14,.92) !important;
/* Select muss wie Select wirken (nicht "nackt") */
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
/* Glatter */
box-shadow: 0 1px 0 rgba(0,0,0,.04) !important;
cursor: pointer !important;
/* Sicherheitsnetz gegen kaputte Defaults */
background-image:
linear-gradient(45deg, transparent 50%, rgba(11,12,14,.70) 50%),
linear-gradient(135deg, rgba(11,12,14,.70) 50%, transparent 50%) !important;
background-position:
calc(100% - 18px) 50%,
calc(100% - 12px) 50% !important;
background-size: 7px 7px, 7px 7px !important;
background-repeat: no-repeat !important;
}
/* Hover: klarer */
.tabulator .tabulator-footer .tabulator-paginator > select.tabulator-page-size:hover{
border-color: rgba(11,12,14,.40) !important;
}
/* Focus: Enterprise Ring (te-accent) */
.tabulator .tabulator-footer .tabulator-paginator > select.tabulator-page-size:focus{
outline: none !important;
border-color: rgba(42,166,160,.75) !important;
box-shadow: 0 0 0 3px rgba(42,166,160,.18) !important;
}
:root{
--te-focus: rgba(42,166,160,.75);
--te-focus-ring: 0 0 0 3px rgba(42,166,160,.18);
--te-focus-ring-strong: 0 0 0 4px rgba(42,166,160,.22);
}
/* =========================================================
TonnEstate Glow Standard (scoped)
========================================================= */
.te-lvtab :is(
.te-lvtab__searchinput,
.te-lvtab__select,
.te-lvtab__btn,
.te-lvtab__iconbtn,
.te-icon-link,
.te-burger
):focus{
outline: none;
border-color: var(--te-focus);
box-shadow: var(--te-focus-ring);
}
.te-lvtab :is(
.te-lvtab__searchinput,
.te-lvtab__select,
.te-lvtab__btn,
.te-lvtab__iconbtn,
.te-icon-link,
.te-burger
):focus-visible{
outline: none;
border-color: var(--te-focus);
box-shadow: var(--te-focus-ring-strong);
}
/* =========================================================
TonnEstate Enterprise Hover / Focus
Override GeneratePress Dark Hover
========================================================= */
/* App-spezifische Buttons */
.te-lvtab button:hover,
.te-lvtab button:focus,
.te-lvtab .te-lvtab__btn:hover,
.te-lvtab .te-lvtab__btn:focus,
.te-lvtab .te-lvtab__iconbtn:hover,
.te-lvtab .te-lvtab__iconbtn:focus{
background-color: #f7f8f9 !important; /* hell */
color: var(--contrast) !important;
border-color: rgba(11,12,14,.25) !important;
}
/* Tabulator Buttons (Pager etc.) */
.tabulator button:hover,
.tabulator button:focus{
background-color: #f7f8f9 !important;
color: rgba(11,12,14,.92) !important;
border-color: rgba(11,12,14,.25) !important;
}
/* Kein dunkler Hover auf Icon-only Buttons */
.te-icon-link:hover,
.te-icon-link:focus{
background-color: transparent !important;
color: var(--contrast) !important;
}
/* Header: Checkbox sauber zentrieren */
.te-lvtab .tabulator .tabulator-col[tabulator-field=""] .tabulator-col-title,
.te-lvtab .tabulator .tabulator-col:first-child .tabulator-col-title{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
/* Top PageSize Select – Enterprise (nur Toolbar) */
.te-lvtab__meta .te-lvtab__select{
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
height:34px;
line-height:34px;
padding:0 34px 0 12px; /* rechts Platz für Chevron */
font: inherit;
font-size:13px;
font-weight:600;
color: rgba(11,12,14,.92);
background:#fff;
border:1px solid rgba(11,12,14,.18);
border-radius:4px;
box-shadow: 0 1px 0 rgba(0,0,0,.04);
cursor:pointer;
/* Chevron */
background-image:
linear-gradient(45deg, transparent 50%, rgba(11,12,14,.70) 50%),
linear-gradient(135deg, rgba(11,12,14,.70) 50%, transparent 50%);
background-position:
calc(100% - 18px) 50%,
calc(100% - 12px) 50%;
background-size: 7px 7px, 7px 7px;
background-repeat:no-repeat;
transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.te-lvtab__meta .te-lvtab__select:hover{
border-color: rgba(11,12,14,.28);
}
.te-lvtab__meta .te-lvtab__select:focus{
outline:none;
border-color: rgba(42,166,160,.75);
box-shadow: 0 0 0 3px rgba(42,166,160,.18);
}
/* View-"Combobox" oben (Alle Kunden) – im gleichen Look wie te-lvtab__select */
.te-lvtab__view{
height:34px;
display:inline-flex;
align-items:center;
gap:10px;
padding:0 12px;
font: inherit;
font-size:13px;
font-weight:600;
color: rgba(11,12,14,.92);
background:#fff;
border:1px solid rgba(11,12,14,.18);
border-radius:4px;
box-shadow: 0 1px 0 rgba(0,0,0,.04);
cursor:pointer;
transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.te-lvtab__view:hover{
border-color: rgba(11,12,14,.28);
}
.te-lvtab__view:focus{
outline:none;
border-color: rgba(42,166,160,.75);
box-shadow: 0 0 0 3px rgba(42,166,160,.18);
}
/* Chevron im gleichen Stil wie Select-Pfeil */
.te-lvtab__view .te-lvtab__chev{
width:0;
height:0;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:6px solid rgba(11,12,14,.70);
margin-left:2px;
transform: translateY(1px);
}
/* Optional: wenn geöffnet, Chevron drehen */
.te-lvtab__view[aria-expanded="true"] .te-lvtab__chev{
transform: translateY(-1px) rotate(180deg);
}
/* Einheitliche Control-Höhen in der Toolbar */
.te-lvtab__select,
.te-lvtab__view{
height:34px;
line-height:34px;
}
.te-lvtab__select{ line-height:normal; } /* select rendert je nach Browser */
.te-lvtab__select,
.te-lvtab__view{
border:1px solid rgba(11,12,14,.16);
box-shadow: 0 1px 0 rgba(0,0,0,.03);
}
.te-lvtab__select:hover,
.te-lvtab__view:hover{
border-color: rgba(11,12,14,.26);
background: rgba(247,248,249,.65); /* leichtes "enterprise" hover */
}
.te-lvtab__select:focus,
.te-lvtab__view:focus{
outline:none;
border-color: rgba(42,166,160,.70);
box-shadow: 0 0 0 3px rgba(42,166,160,.16), 0 1px 0 rgba(0,0,0,.03);
}
.te-lvtab__view{ font-weight:600; }
/* =========================================================
/* OVERRIDE */ TonnEstate Shell Separator (Brand Teal + Silver)
Notes:
- No margins/padding (no layout shifts)
- No black, no blue, no magenta
- 4-stop gradient aligned to logo + enterprise UI
========================================================= */
.te-separator{
display:block;
width:100%;
height:8px; /* set to 15px if you want it stronger */
margin:0;
padding:0;
line-height:0;
/* Fallback solid */
background: var(--te-accent);
/* Brand gradient: Deep Teal -> Teal -> Light Teal -> Soft Silver */
background: linear-gradient(
90deg,
#0E6F6B 0%, /* Deep Teal (enterprise anchor) */
var(--te-accent) 35%, /* Brand Teal (your token #2aa6a0) */
#66D3CF 75%, /* Light Teal (calm, not neon) */
#CFD6DB 100% /* Soft Silver (matches logo metal) */
);
/* subtle crispness on black header edge */
box-shadow: inset 0 1px 0 rgba(255,255,255,0.16);
}
#te-shell-separator{
display:block !important;
height:8px !important; /* kräftig als Trenner */
padding:0 !important;
line-height:0 !important;
border:0 !important;
width:100vw !important;
max-width:100vw !important;
margin-left:calc(50% - 50vw) !important;
margin-right:calc(50% - 50vw) !important;
border-radius:0 !important;
background: linear-gradient(
90deg,
#0E6F6B 0%,
#2AA6A0 38%,
#66D3CF 78%,
#CFD6DB 100%
) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.16) !important;
}
/* ========================================================= */
/* OVERRIDE: Shell Separator – final tuning (8px, lighter, calm) */
/* ========================================================= */
#te-shell-separator{
height:8px !important;
min-height:8px !important;
background: linear-gradient(
90deg,
#1B7F7A 0%,
#2AA6A0 28%,
#4FBFB9 52%,
#BFC7CC 78%,
#D7DDE1 100%
) !important;
#te-shell-separator{
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.22),
inset 0 -1px 0 rgba(0,0,0,0.06) !important;
}
/* =========================================================
/* ADD */ Tabulator Pagination Glow (ListView Kunden)
Scope: .te-lvtab + #teCustomersGrid ONLY
Goal: Enterprise hover/focus glow like page-size, no dead buttons
========================================================= */
.te-lvtab #teCustomersGrid .tabulator .tabulator-footer .tabulator-paginator .tabulator-page{
/* neutral enterprise base */
border-radius: 0 !important;
background: transparent !important;
color: #2a2f35 !important;
border: 1px solid rgba(11,12,14,.18) !important;
height: 30px !important;
min-width: 32px !important;
line-height: 28px !important;
padding: 0 10px !important;
box-shadow: none !important;
text-decoration: none !important;
/* keep it quiet/compact */
font-weight: 400 !important;
font-size: 13px !important;
letter-spacing: 0 !important;
transition:
border-color .12s ease,
box-shadow .12s ease,
color .12s ease,
background-color .12s ease;
}
/* Arrow buttons: give them "icon weight" without changing markup */
.te-lvtab #teCustomersGrid .tabulator .tabulator-footer .tabulator-paginator .tabulator-page[data-page="first"],
.te-lvtab #teCustomersGrid .tabulator .tabulator-footer .tabulator-paginator .tabulator-page[data-page="prev"],
.te-lvtab #teCustomersGrid .tabulator .tabulator-footer .tabulator-paginator .tabulator-page[data-page="next"],
.te-lvtab #teCustomersGrid .tabulator .tabulator-footer .tabulator-paginator .tabulator-page[data-page="last"]{
font-weight: 600 !important;
letter-spacing: -0.4px !important;
color: #0b0c0e !important;
}
/* Hover: green glow (Salesforce-like affordance) */
.te-lvtab #teCustomersGrid .tabulator .tabulator-footer .tabulator-paginator .tabulator-page:hover{
border-color: rgba(42,166,160,.75) !important;
color: #0b0c0e !important;
box-shadow:
0 0 0 1px rgba(42,166,160,.55),
0 0 0 3px rgba(42,166,160,.22),
0 0 12px rgba(42,166,160,.28) !important;
}
/* Keyboard focus (enterprise accessibility) */
.te-lvtab #teCustomersGrid .tabulator .tabulator-footer .tabulator-paginator .tabulator-page:focus,
.te-lvtab #teCustomersGrid .tabulator .tabulator-footer .tabulator-paginator .tabulator-page:focus-visible{
outline: none !important;
border-color: rgba(42,166,160,.85) !important;
box-shadow:
0 0 0 1px rgba(42,166,160,.65),
0 0 0 3px rgba(42,166,160,.28),
0 0 14px rgba(42,166,160,.34) !important;
}
/* Active page (current state) */
.te-lvtab #teCustomersGrid .tabulator .tabulator-footer .tabulator-paginator .tabulator-page.active{
background: rgba(11,12,14,.04) !important;
border-color: rgba(11,12,14,.35) !important;
color: #0b0c0e !important;
box-shadow: none !important;
}
/* Disabled state: explicit, no glow */
.te-lvtab #teCustomersGrid .tabulator .tabulator-footer .tabulator-paginator .tabulator-page:disabled,
.te-lvtab #teCustomersGrid .tabulator .tabulator-footer .tabulator-paginator .tabulator-page.tabulator-disabled{
opacity: .38 !important;
cursor: not-allowed !important;
border-color: rgba(11,12,14,.14) !important;
box-shadow: none !important;
}
/* =========================================================
TEST ONLY — Tabulator Pager (Kunden-Listview)
Scope: NUR #teCustomersGrid (keine Seiteneffekte)
========================================================= */
/* Basis-Look der Pager-Buttons */
#teCustomersGrid .tabulator .tabulator-footer .tabulator-page{
background: #fff !important;
color: rgba(11,12,14,.85) !important;
border: 1px solid rgba(11,12,14,.22) !important;
height: 34px !important;
min-width: 40px !important;
padding: 0 12px !important;
border-radius: 0 !important;
box-shadow: none !important;
font-weight: 500 !important;
}
/* Hover NUR wenn nicht disabled (Tabulator setzt disabled=1) */
#teCustomersGrid .tabulator .tabulator-footer .tabulator-page:not([disabled]):hover{
background: rgba(11,12,14,.04) !important;
border-color: rgba(11,12,14,.40) !important;
color: rgba(11,12,14,.95) !important;
cursor: pointer !important;
}
/* Active (aktuelle Seite) */
#teCustomersGrid .tabulator .tabulator-footer .tabulator-page.active{
background: #0b0c0e !important;
border-color: #0b0c0e !important;
color: #fff !important;
}
/* Disabled — nicht “grau auf grau”, sondern bewusst ruhig */
#teCustomersGrid .tabulator .tabulator-footer .tabulator-page[disabled],
#teCustomersGrid .tabulator .tabulator-footer .tabulator-page:disabled{
opacity: 1 !important; /* Tabulator setzt sonst .5 */
background: rgba(11,12,14,.03) !important;
color: rgba(11,12,14,.35) !important;
border-color: rgba(11,12,14,.12) !important;
cursor: not-allowed !important;
}
/* Optional: Pager als “Button-Group” (Salesforce-like) */
#teCustomersGrid .tabulator .tabulator-footer .tabulator-paginator{
display: inline-flex !important;
gap: 0 !important;
align-items: center !important;
}
#teCustomersGrid .tabulator .tabulator-footer .tabulator-page + .tabulator-page{
margin-left: -1px !important; /* Border-Collapse Effekt */
}
/* =========================================================
TonnEstate – "Mein Arbeitsplatz" (Grundlayout)
Scope: NUR neue, gekapselte Styles für .te-workspace
Ziel: Nichts am bestehenden Theme/Sidebar/Topbar zerstören.
Einfügen: Am ENDE eurer Childtheme style.css
========================================================= */
/* ---------- 0) Fallback-Tokens (nutzt vorhandene :root Tokens, falls definiert) ---------- */
.te-workspace{
--te-ws-bg: rgba(11,12,14,.035);
--te-ws-card: rgba(255,255,255,.96);
--te-ws-border: rgba(11,12,14,.12);
--te-ws-border-soft: rgba(11,12,14,.08);
--te-ws-shadow: 0 10px 26px rgba(11,12,14,.08);
--te-ws-radius: var(--te-radius-md, 16px);
--te-ws-radius-sm: var(--te-radius-sm, 12px);
--te-ws-text: var(--te-text, #0b0c0e);
--te-ws-muted: var(--te-muted, #2a2f35);
--te-ws-accent: var(--te-accent, #2aa6a0);
}
/* ---------- 1) Page / Container ---------- */
.te-workspace{
color: var(--te-ws-text);
background: var(--te-ws-bg);
border-radius: var(--te-ws-radius);
padding: clamp(14px, 2vw, 22px);
margin: 0;
}
.te-section{
background: var(--te-ws-card);
border: 1px solid var(--te-ws-border-soft);
border-radius: var(--te-ws-radius);
box-shadow: var(--te-ws-shadow);
padding: clamp(14px, 2vw, 22px);
margin: 14px 0;
}
.te-section--tiles{
padding-bottom: 18px;
}
/* ---------- 2) Header ---------- */
.te-workspace__header{
display: flex;
gap: 14px;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 10px;
}
.te-workspace__titlebar{
display: grid;
gap: 8px;
}
.te-workspace__title{
margin: 0;
font-size: clamp(20px, 2.2vw, 28px);
line-height: 1.15;
letter-spacing: -.02em;
}
.te-workspace__chips{
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.te-workspace__actions{
display: flex;
gap: 10px;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
}
/* ---------- 3) Rowhead ---------- */
.te-rowhead{
display: flex;
gap: 10px;
align-items: baseline;
justify-content: space-between;
margin-bottom: 12px;
}
.te-rowhead__title{
margin: 0;
font-size: 16px;
letter-spacing: .01em;
}
.te-rowhead__sub{
font-size: 13px;
color: var(--te-ws-muted);
opacity: .85;
}
.te-rowhead__meta{
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
}
/* ---------- 4) Basic atoms (Buttons / Badges / Chips) ---------- */
.te-muted{ color: var(--te-ws-muted); opacity: .85; }
.te-chip,
.te-badge{
display: inline-flex;
align-items: center;
gap: 6px;
border: 1px solid var(--te-ws-border-soft);
border-radius: 999px;
padding: 6px 10px;
font-size: 12px;
line-height: 1;
background: rgba(255,255,255,.72);
}
.te-badge--accent{
border-color: rgba(42,166,160,.35);
box-shadow: 0 0 0 3px rgba(42,166,160,.12);
}
.te-badge--muted{
background: rgba(255,255,255,.7);
}
.te-btn{
border: 1px solid var(--te-ws-border);
background: rgba(255,255,255,.9);
color: var(--te-ws-text);
border-radius: 12px;
padding: 10px 12px;
font-size: 13px;
line-height: 1;
cursor: pointer;
transition: transform .06s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.te-btn:hover{
background: #fff;
border-color: rgba(11,12,14,.18);
box-shadow: 0 0 0 3px rgba(42,166,160,.10);
}
.te-btn:active{ transform: translateY(1px); }
.te-btn--primary{
background: var(--te-ws-text);
color: #fff;
border-color: var(--te-ws-text);
}
.te-btn--primary:hover{
background: #0b0c0e;
border-color: #0b0c0e;
box-shadow: 0 0 0 3px rgba(42,166,160,.18);
}
.te-btn--ghost{
background: rgba(255,255,255,.7);
}
.te-btn--small{
padding: 8px 10px;
border-radius: 10px;
font-size: 12.5px;
}
/* ---------- 5) Tiles (Kontakte-Kacheln) ---------- */
.te-tiles{
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
}
@media (max-width: 1100px){
.te-tiles{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px){
.te-tiles{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.te-tile{
display: flex;
gap: 12px;
align-items: center;
text-decoration: none;
color: var(--te-ws-text);
border: 1px solid var(--te-ws-border-soft);
background: rgba(255,255,255,.86);
border-radius: var(--te-ws-radius);
padding: 14px;
min-height: 70px;
transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.te-tile:hover{
background: #fff;
border-color: rgba(42,166,160,.30);
box-shadow: 0 14px 32px rgba(11,12,14,.10);
transform: translateY(-1px);
}
.te-tile__icon{
width: 36px;
height: 36px;
border-radius: 12px;
border: 1px solid var(--te-ws-border-soft);
background: rgba(42,166,160,.10);
flex: 0 0 auto;
}
.te-tile__meta{
display: grid;
gap: 4px;
min-width: 0;
}
.te-tile__label{
font-size: 13px;
color: var(--te-ws-muted);
opacity: .9;
}
.te-tile__value{
font-size: 20px;
line-height: 1.05;
font-weight: 650;
letter-spacing: -.02em;
}
/* ---------- 6) Help Toggle Box ---------- */
.te-help{
border: 1px solid var(--te-ws-border-soft);
border-radius: var(--te-ws-radius);
overflow: hidden;
background: rgba(255,255,255,.78);
margin: 10px 0 14px;
}
.te-help__toggle{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 14px;
cursor: pointer;
border: 0;
background: transparent;
color: var(--te-ws-text);
font-size: 13px;
}
.te-help__toggle:hover{
background: rgba(42,166,160,.06);
}
.te-help__body{
border-top: 1px solid var(--te-ws-border-soft);
padding: 12px 14px 14px;
}
.te-help__content p{
margin: 0;
font-size: 13px;
color: var(--te-ws-muted);
line-height: 1.45;
}
/* ---------- 7) Workflow Timeline (vertikal) ---------- */
.te-timeline{
display: grid;
gap: 12px;
margin-top: 10px;
}
/* Step item */
.te-step{
display: grid;
grid-template-columns: 18px minmax(0, 1fr);
gap: 12px;
}
/* Rail */
.te-step__rail{
position: relative;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 18px;
}
.te-step__dot{
width: 12px;
height: 12px;
border-radius: 999px;
border: 2px solid rgba(11,12,14,.22);
background: #fff;
z-index: 2;
}
.te-step__line{
position: absolute;
top: 30px;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: calc(100% - 22px);
background: rgba(11,12,14,.10);
}
/* Card */
.te-step__card{
border: 1px solid var(--te-ws-border-soft);
background: rgba(255,255,255,.92);
border-radius: var(--te-ws-radius);
padding: 14px;
transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.te-step__card:hover{
background: #fff;
border-color: rgba(11,12,14,.14);
box-shadow: 0 10px 26px rgba(11,12,14,.09);
}
.te-step__head{
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
margin-bottom: 8px;
}
.te-step__titlewrap{
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.te-step__icon{
width: 26px;
height: 26px;
border-radius: 10px;
border: 1px solid var(--te-ws-border-soft);
background: rgba(11,12,14,.04);
flex: 0 0 auto;
}
.te-step__title{
margin: 0;
font-size: 14px;
line-height: 1.25;
letter-spacing: -.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.te-step__hint{
font-size: 13px;
color: var(--te-ws-muted);
opacity: .9;
margin: 4px 0 10px;
}
.te-step__flags{
display: inline-flex;
gap: 6px;
flex: 0 0 auto;
}
.te-flag{
width: 10px;
height: 10px;
border-radius: 999px;
background: rgba(11,12,14,.18);
border: 1px solid rgba(11,12,14,.12);
}
/* Status states (apply to .te-step) */
.te-step--done .te-step__dot{
background: rgba(42,166,160,.18);
border-color: rgba(42,166,160,.70);
}
.te-step--active .te-step__dot{
background: rgba(42,166,160,.28);
border-color: var(--te-ws-accent);
box-shadow: 0 0 0 4px rgba(42,166,160,.14);
}
.te-step--blocked .te-step__dot{
background: rgba(220,38,38,.14);
border-color: rgba(220,38,38,.70);
}
.te-step--future .te-step__dot{
background: #fff;
border-color: rgba(11,12,14,.18);
}
.te-step--active .te-step__card{
border-color: rgba(42,166,160,.28);
box-shadow: 0 0 0 4px rgba(42,166,160,.12);
}
/* Tasks inside step */
.te-step__tasks{
display: grid;
gap: 10px;
margin: 10px 0 12px;
}
.te-task{
border: 1px solid var(--te-ws-border-soft);
border-radius: 14px;
background: rgba(255,255,255,.90);
padding: 10px 12px;
display: grid;
gap: 6px;
}
.te-task__meta{
display: flex;
gap: 10px;
justify-content: space-between;
font-size: 12px;
color: var(--te-ws-muted);
}
.te-task__title{
font-size: 13px;
line-height: 1.35;
}
.te-task--open{
border-color: rgba(11,12,14,.10);
}
.te-task--overdue{
border-color: rgba(220,38,38,.28);
box-shadow: 0 0 0 3px rgba(220,38,38,.08);
}
/* Step actions */
.te-step__actions{
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-start;
margin-top: 8px;
}
/* ---------- 8) Dropzones (hidden in V1 unless activated) ---------- */
.te-dropzones{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-top: 12px;
}
@media (max-width: 720px){
.te-dropzones{ grid-template-columns: 1fr; }
}
.te-dropzone{
border: 1px dashed rgba(11,12,14,.22);
border-radius: var(--te-ws-radius);
background: rgba(255,255,255,.82);
padding: 12px;
text-align: center;
font-size: 13px;
color: var(--te-ws-muted);
}
/* ---------- 9) Calendar placeholder container ---------- */
.te-calendar{
border: 1px solid var(--te-ws-border-soft);
border-radius: var(--te-ws-radius);
background: rgba(255,255,255,.85);
min-height: 260px;
padding: 12px;
}
/* ---------- 10) Tabs + ListView toolbar ---------- */
.te-tabs{
display: inline-flex;
gap: 6px;
padding: 6px;
border: 1px solid var(--te-ws-border-soft);
border-radius: 999px;
background: rgba(255,255,255,.78);
}
.te-tab{
border: 0;
background: transparent;
padding: 8px 10px;
border-radius: 999px;
font-size: 12.5px;
color: var(--te-ws-muted);
cursor: pointer;
transition: background .12s ease, color .12s ease, box-shadow .12s ease;
}
.te-tab:hover{
background: rgba(42,166,160,.08);
color: var(--te-ws-text);
}
.te-tab.is-active{
background: rgba(11,12,14,.92);
color: #fff;
box-shadow: 0 0 0 3px rgba(42,166,160,.12);
}
.te-lvtab__toolbar{
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 0 12px;
}
.te-lvtab__left,
.te-lvtab__right{
display: inline-flex;
align-items: center;
gap: 10px;
}
.te-lvtab__label{
font-size: 12.5px;
color: var(--te-ws-muted);
}
.te-lvtab__select{
border: 1px solid var(--te-ws-border-soft);
background: rgba(255,255,255,.92);
color: var(--te-ws-text);
border-radius: 12px;
padding: 8px 10px;
font-size: 13px;
line-height: 1;
cursor: pointer;
}
.te-lvtab__select:hover{
border-color: rgba(11,12,14,.16);
box-shadow: 0 0 0 3px rgba(42,166,160,.10);
}
/* Tabulator container wrapper */
.te-lvtab{
border: 1px solid var(--te-ws-border-soft);
border-radius: var(--te-ws-radius);
background: rgba(255,255,255,.92);
overflow: hidden;
}
/* ---------- 11) Small responsiveness improvements ---------- */
@media (max-width: 900px){
.te-workspace__header{
flex-direction: column;
align-items: stretch;
}
.te-workspace__actions{
justify-content: flex-start;
}
}
/* TE PROOF – muss sichtbar sein */
body.page-id-107 #teWorkspace{
outline: 6px solid #2aa6a0 !important;
outline-offset: 6px !important;
}
/* =========================================================
TE | Workspace (reusable component)
Scope: .te-workspace and children only (no page-id coupling)
========================================================= */
.te-workspace{
--ws-gap: 18px;
--ws-gap-lg: 26px;
--ws-card-pad: 22px;
display:block;
width:100%;
}
/* Defensive: if WP wraps shortcode in
, don't break layout */ .te-workspace:where(section){ margin:0; } /* Header */ .te-workspace__header{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--ws-gap); margin:0 0 var(--ws-gap-lg) 0; } .te-workspace__titlebar{ min-width:260px; flex:1 1 auto; } .te-workspace__title{ margin:0 0 10px 0; letter-spacing:-0.01em; line-height:1.12; } .te-workspace__chips{ display:flex; flex-wrap:wrap; gap:8px; } .te-workspace__actions{ display:flex; gap:10px; flex:0 0 auto; align-items:center; } /* Buttons (local) */ .te-workspace .te-btn{ border-radius:12px; padding:10px 14px; font-weight:600; line-height:1; box-shadow:0 1px 0 rgba(0,0,0,.04); } .te-workspace .te-btn--primary{ background:var(--te-accent, #2aa6a0); border:1px solid rgba(0,0,0,.08); color:#fff; } .te-workspace .te-btn--primary:hover{ filter:brightness(0.96); } .te-workspace .te-btn--ghost{ background:rgba(255,255,255,.85); border:1px solid rgba(11,12,14,.14); color:var(--te-text, #0b0c0e); } .te-workspace .te-btn--ghost:hover{ background:rgba(255,255,255,.95); } /* Cards */ .te-workspace .te-section{ margin:0 0 var(--ws-gap-lg) 0; padding:var(--ws-card-pad); border:1px solid rgba(11,12,14,.10); border-radius:16px; background:rgba(255,255,255,.92); box-shadow:0 6px 20px rgba(0,0,0,.04); } .te-workspace .te-rowhead{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin:0 0 16px 0; } .te-workspace .te-rowhead__title{ margin:0; letter-spacing:-0.01em; } .te-workspace .te-rowhead__sub, .te-workspace .te-muted{ color:rgba(11,12,14,.62); } /* Tiles */ .te-workspace .te-tiles{ display:grid; grid-template-columns:repeat(5, minmax(210px, 1fr)); gap:14px; } @media (max-width:1280px){ .te-workspace .te-tiles{ grid-template-columns:repeat(3, minmax(220px, 1fr)); } } @media (max-width:768px){ .te-workspace__header{ flex-direction:column; } .te-workspace__actions{ width:100%; } .te-workspace .te-tiles{ grid-template-columns:repeat(2, minmax(160px, 1fr)); } } @media (max-width:520px){ .te-workspace .te-tiles{ grid-template-columns:1fr; } } .te-workspace .te-tile{ display:flex; align-items:center; justify-content:center; min-height:120px; padding:16px; border-radius:16px; border:1px solid rgba(11,12,14,.10); background:rgba(247,248,249,.90); text-decoration:none; color:inherit; transition:transform .12s ease, box-shadow .12s ease, background .12s ease; } .te-workspace .te-tile:hover{ transform:translateY(-2px); background:rgba(255,255,255,.96); box-shadow:0 10px 24px rgba(0,0,0,.06); } .te-workspace .te-tile__meta{ text-align:center; } .te-workspace .te-tile__label{ font-weight:700; margin:0 0 6px 0; } .te-workspace .te-tile__value{ font-size:13px; color:rgba(11,12,14,.62); } /* Help toggle */ .te-workspace .te-help{ margin:0 0 16px 0; } .te-workspace .te-help__toggle{ display:inline-flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; border:1px solid rgba(11,12,14,.14); background:rgba(255,255,255,.86); font-weight:700; cursor:pointer; transition:background .12s ease, transform .12s ease; } .te-workspace .te-help__toggle:hover{ background:rgba(255,255,255,.96); transform:translateY(-1px); } .te-workspace .te-help__body{ margin-top:12px; padding:14px; border-radius:14px; border:1px dashed rgba(11,12,14,.18); background:rgba(247,248,249,.70); } /* Timeline */ .te-workspace .te-timeline{ display:flex; flex-direction:column; gap:14px; padding:6px 0 0 0; } .te-workspace .te-step{ display:grid; grid-template-columns:42px 1fr; gap:14px; align-items:start; } .te-workspace .te-step__rail{ position:relative; display:flex; justify-content:center; } .te-workspace .te-step__dot{ width:12px; height:12px; border-radius:999px; border:2px solid rgba(11,12,14,.25); background:rgba(255,255,255,.95); margin-top:18px; z-index:2; } .te-workspace .te-step__line{ position:absolute; top:32px; bottom:-16px; width:2px; background:rgba(11,12,14,.10); border-radius:99px; } .te-workspace .te-step:last-child .te-step__line{ display:none; } .te-workspace .te-step__card{ border-radius:16px; border:1px solid rgba(11,12,14,.10); background:rgba(255,255,255,.96); box-shadow:0 10px 24px rgba(0,0,0,.05); padding:16px; } .te-workspace .te-step__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin:0 0 10px 0; } .te-workspace .te-step__title{ margin:0; font-size:16px; letter-spacing:-0.01em; } .te-workspace .te-step__hint{ margin:0 0 12px 0; color:rgba(11,12,14,.62); font-size:13px; } /* States */ .te-workspace .te-step--active .te-step__dot{ border-color:rgba(42,166,160,.85); box-shadow:0 0 0 4px rgba(42,166,160,.14); } .te-workspace .te-step--active .te-step__card{ border-color:rgba(42,166,160,.25); } /* Tasks */ .te-workspace .te-step__tasks{ display:flex; flex-direction:column; gap:10px; } .te-workspace .te-task{ border-radius:14px; border:1px solid rgba(11,12,14,.10); background:rgba(247,248,249,.92); padding:12px; cursor:grab; transition:transform .12s ease, box-shadow .12s ease, background .12s ease; } .te-workspace .te-task:hover{ background:rgba(255,255,255,.98); box-shadow:0 10px 18px rgba(0,0,0,.06); transform:translateY(-1px); } .te-workspace .te-task:active{ cursor:grabbing; } .te-workspace .te-task__meta{ display:flex; gap:10px; align-items:baseline; color:rgba(11,12,14,.62); font-size:12px; margin-bottom:6px; } .te-workspace .te-task__title{ font-weight:700; font-size:13px; } /* Dropzones */ .te-workspace .te-dropzones{ display:grid; grid-template-columns:repeat(3, minmax(180px, 1fr)); gap:10px; margin-top:14px; } .te-workspace .te-dropzone{ border-radius:14px; padding:12px; border:1px dashed rgba(11,12,14,.22); background:rgba(247,248,249,.60); font-weight:700; color:rgba(11,12,14,.70); text-align:center; } /* Calendar */ .te-workspace .te-calendar{ min-height:280px; border-radius:16px; border:1px dashed rgba(11,12,14,.18); background:rgba(247,248,249,.55); } /* Tabs */ .te-workspace .te-tabs{ display:inline-flex; gap:8px; flex-wrap:wrap; } .te-workspace .te-tab{ border-radius:999px; border:1px solid rgba(11,12,14,.14); background:rgba(255,255,255,.86); padding:8px 12px; font-weight:700; cursor:pointer; } .te-workspace .te-tab.is-active{ border-color:rgba(42,166,160,.35); box-shadow:0 0 0 4px rgba(42,166,160,.12); } /* Toolbar */ .te-workspace #teTasksToolbar.te-lvtab__toolbar{ margin-top:14px; padding:12px 14px; border-radius:16px; border:1px solid rgba(11,12,14,.10); background:rgba(255,255,255,.92); } .te-workspace #teTasksToolbar .te-lvtab__right{ display:flex; align-items:center; gap:10px; } .te-workspace #teTasksPageSize.te-lvtab__select{ min-width:110px; border-radius:12px; } /* ========================================================= ADD: TE Workspace (Arbeitsplatz) – scoped, enterprise, stabil ========================================================= */ .te-workspace{ padding: 18px 18px 28px; } .te-workspace__header{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin: 6px 0 18px; } .te-workspace__title{ margin:0; font-size: 34px; line-height: 1.05; font-weight: 950; letter-spacing: -0.5px; } .te-workspace__actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; } /* Row Head */ .te-workspace .te-rowhead{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin: 6px 0 12px; } .te-workspace .te-rowhead__title{ margin:0; font-size: 26px; font-weight: 950; letter-spacing: -0.2px; } .te-workspace .te-rowhead__sub{ color: rgba(11,12,14,.62); font-weight: 750; } /* Sections */ .te-workspace .te-section{ margin: 22px 0; padding: 16px 16px 18px; border: 1px solid rgba(11,12,14,.10); border-radius: 16px; background: #fff; box-shadow: 0 10px 26px rgba(15,23,42,.06); } /* Badges */ .te-workspace .te-badge{ display:inline-flex; align-items:center; gap:8px; padding: 7px 10px; border-radius: 999px; border: 1px solid rgba(11,12,14,.12); font-weight: 800; reed-size: 12px; background: rgba(11,12,14,.02); } .te-workspace .te-badge--muted{ color: rgba(11,12,14,.72); } /* Tiles */ .te-workspace .te-tiles{ display:grid; grid-template-columns: repeat(5, minmax(180px, 1fr)); gap: 14px; margin-top: 8px; } .te-workspace .te-tile{ display:flex; align-items:center; gap:12px; padding: 14px 14px; border-radius: 16px; border: 1px solid rgba(11,12,14,.10); background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.96)); text-decoration:none; color: inherit; box-shadow: 0 10px 22px rgba(15,23,42,.05); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .te-workspace .te-tile:hover{ transform: translateY(-1px); border-color: rgba(42,166,160,.26); box-shadow: 0 14px 26px rgba(15,23,42,.08); } .te-workspace .te-tile__icon{ width: 44px; height: 44px; border-radius: 14px; display:grid; place-items:center; border: 1px solid rgba(42,166,160,.22); background: rgba(42,166,160,.10); color: var(--te-accent, #2aa6a0); } .te-workspace .te-tile__icon svg{ width: 22px; height: 22px; } .te-workspace .te-tile__label{ font-size: 12px; font-weight: 900; color: rgba(11,12,14,.62); text-transform: none; } .te-workspace .te-tile__value{ font-size: 22px; font-weight: 950; letter-spacing: -0.2px; } /* Help Toggle */ .te-workspace .te-help{ margin: 6px 0 14px; } .te-workspace .te-help__toggle{ width: 100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(11,12,14,.10); background: rgba(11,12,14,.02); font-weight: 900; cursor: pointer; } .te-workspace .te-help__body{ margin-top: 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(11,12,14,.10); background: #fff; } /* Timeline */ .te-workspace .te-timeline{ margin-top: 14px; display:flex; flex-direction:column; gap: 10px; position: relative; } .te-workspace .te-step{ position: relative; display:flex; align-items:flex-start; gap: 12px; padding: 12px 12px; border: 1px solid rgba(11,12,14,.10); border-radius: 16px; background: #fff; } .te-workspace .te-step__dot{ width: 12px; height: 12px; border-radius: 999px; margin-top: 6px; border: 2px solid rgba(11,12,14,.22); background: #fff; } .te-workspace .te-step__title{ font-weight: 950; letter-spacing: -0.1px; } .te-workspace .te-step__meta{ margin-top: 2px; font-weight: 800; font-size: 12px; color: rgba(11,12,14,.62); } .te-workspace .te-step__actions{ margin-left: auto; display:flex; gap: 8px; } /* States */ .te-workspace .te-step--done{ border-color: rgba(42,166,160,.18); background: linear-gradient(180deg, rgba(42,166,160,.06), rgba(255,255,255,1)); } .te-workspace .te-step--done .te-step__dot{ border-color: rgba(42,166,160,.55); background: rgba(42,166,160,.18); } .te-workspace .te-step--active{ border-color: rgba(42,166,160,.34); box-shadow: 0 0 0 4px rgba(42,166,160,.10); } .te-workspace .te-step--active .te-step__dot{ border-color: rgba(42,166,160,.75); background: rgba(42,166,160,.28); } .te-workspace .te-step--next{ opacity: .92; } /* Small buttons in timeline */ .te-workspace .te-btn--sm{ padding: 8px 10px; border-radius: 12px; font-weight: 900; } /* Responsive */ @media (max-width: 1200px){ .te-workspace .te-tiles{ grid-template-columns: repeat(2, minmax(220px, 1fr)); } } @media (max-width: 640px){ .te-workspace__header{ flex-direction: column; align-items: flex-start; } .te-workspace .te-tiles{ grid-template-columns: 1fr; } } /* 1) Hero bekommt Background (nur Startseite) */ body.home.page-id-27 .entry-content > .te-hero{ background-image: url("https://tonnestate.de/wp-content/uploads/2026/01/Header_TonnEstate.webp"); background-position: center; background-size: cover; background-repeat: no-repeat; /* falls irgendwo schon background-color/gradient drüber liegt */ background-color: transparent; } /* 2) Overlay für Lesbarkeit */ body.home.page-id-27 .entry-content > .te-hero{ position: relative; } body.home.page-id-27 .entry-content > .te-hero::before{ content: ""; position: absolute; inset: 0; background: radial-gradient(1200px 600px at 20% 35%, rgba(0,0,0,.10), rgba(0,0,0,.62)); pointer-events: none; } /* 3) Inhalt nach vorne holen */ body.home.page-id-27 .entry-content > .te-hero > .te-hero-inner{ position: relative; z-index: 1; } /* ========================================================= New ========================================================= */ .te-hero-bottom{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin: 6px 0 10px; } /* Search box as one combined "header box" */ .te-hero-search{ display:flex; align-items:stretch; background:#fff; border:1px solid rgba(11,12,14,.18); border-radius:14px; overflow:hidden; box-shadow: 0 10px 26px rgba(0,0,0,.10); } /* Make it "Sydney style" larger */ .te-hero-search__input{ appearance:none; -webkit-appearance:none; border:0 !important; outline:0; background:transparent; padding: 12px 14px; height: 46px; min-width: 320px; font-size: 14.5px; line-height: 1; color: var(--te-text, #0b0c0e); } .te-hero-search__input::placeholder{ color: rgba(11,12,14,.55); } /* Button integrated into the same capsule */ .te-hero-search__btn{ border:0 !important; outline:0; padding: 0 18px; height: 46px; min-width: 120px; font-weight: 600; font-size: 14px; letter-spacing: .2px; color:#fff; background: var(--te-accent, #2aa6a0); cursor:pointer; } /* Focus ring like professional header inputs */ .te-hero-search:focus-within{ border-color: rgba(42,166,160,.55); box-shadow: 0 0 0 3px rgba(42,166,160,.18), 0 12px 28px rgba(0,0,0,.12); } /* Button hover */ .te-hero-search__btn:hover{ filter: brightness(.95); } /* Scroll link aligned nicely next to box */ .te-hero-scroll{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; color: rgba(11,12,14,.65); font-size: 13px; padding: 6px 2px; } .te-hero-scroll:hover{ color: rgba(11,12,14,.90); } /* Mobile: full-width */ @media (max-width: 768px){ .te-hero-bottom{ align-items:stretch; } .te-hero-search{ width:100%; } .te-hero-search__input{ min-width: 0; width:100%; } .te-hero-search__btn{ min-width: 110px; } } /* ========================================================= HERO Background via pseudo-layer (robust) ========================================================= */ body.home section.te-hero{ position: relative; overflow: hidden; background: transparent !important; } /* Bild-Layer */ body.home section.te-hero::before{ content:""; position:absolute; inset:0; background-image: url("https://tonnestate.de/wp-content/uploads/2026/01/Header_TonnEstate.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; filter: saturate(0.95) contrast(1.05); transform: scale(1.02); z-index: 0; } /* Dark overlay für Lesbarkeit */ body.home section.te-hero::after{ content:""; position:absolute; inset:0; background: radial-gradient(80% 60% at 30% 20%, rgba(0,0,0,.35), rgba(0,0,0,.75)); z-index: 1; } /* Inhalt nach vorne */ body.home section.te-hero > *{ position: relative; z-index: 2; } /* ========================================================= TE HOME HERO v1 (Image-only) — Full-bleed + 60–70vh Scope: nur der Hero mit .te-hero--imageonly ========================================================= */ /* 0) Gegen horizontalen Scroll durch 100vw-bleed */ body.home { overflow-x: hidden; } /* 1) Full-bleed Container (aus dem GP Content-Wrapper rausziehen) */ body.home .te-hero.te-hero--imageonly{ position: relative; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); /* Hero-Höhe */ min-height: 65vh; /* Ziel 60–70% */ height: 65vh; max-height: 72vh; /* keine Abstände oben/unten */ margin-top: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; overflow: hidden; } /* 2) Das Bild selbst: cover + zentriert */ body.home .te-hero.te-hero--imageonly > .te-hero-bg{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* 3) Inner Wrapper: Box unten positionieren */ body.home .te-hero.te-hero--imageonly > .te-hero-inner{ position: relative; height: 100%; display: flex; align-items: flex-end; /* Box nach unten */ justify-content: center; padding: 0 20px 26px; /* nur innen Abstand */ z-index: 2; } /* 4) White Box: fixe Max-Breite + clean */ body.home .te-hero.te-hero--imageonly .te-hero-searchbox{ width: min(860px, calc(100% - 40px)); margin: 0 auto; } /* 5) 4px “Top padding” killen (nur Home; minimal invasiv) */ body.home .site-content, body.home .inside-article{ padding-top: 0 !important; margin-top: 0 !important; } /* 6) Mobile: etwas mehr Höhe, damit Box nicht drückt */ @media (max-width: 768px){ body.home .te-hero.te-hero--imageonly{ min-height: 70vh; height: 70vh; max-height: 78vh; } body.home .te-hero.te-hero--imageonly > .te-hero-inner{ padding-bottom: 18px; } }