diff --git a/assets/css/forum-style.css b/assets/css/forum-style.css
index 5e1090a..8f282b5 100644
--- a/assets/css/forum-style.css
+++ b/assets/css/forum-style.css
@@ -1,8 +1,8 @@
-/* Shop Orders (Profil) */
-.wbf-shop-orders-list {
+/* Shop Orders (Profil) — scoped unter .wbf-wrap für korrekte CSS-Variablen & Spezifität */
+.wbf-wrap .wbf-shop-orders-list {
margin-top: 1.2rem;
}
-.wbf-shop-orders-table {
+.wbf-wrap .wbf-shop-orders-table {
width: 100%;
border-collapse: collapse;
background: var(--c-surface);
@@ -11,27 +11,30 @@
box-shadow: var(--shadow-sm);
font-size: .97em;
}
-.wbf-shop-orders-table th, .wbf-shop-orders-table td {
+.wbf-wrap .wbf-shop-orders-table th,
+.wbf-wrap .wbf-shop-orders-table td {
padding: .65em 1em;
border-bottom: 1px solid var(--c-border);
}
-.wbf-shop-orders-table th {
- background: var(--c-surface2);
- color: var(--c-text-dim);
- font-weight: 600;
- font-size: .93em;
- text-transform: uppercase;
- letter-spacing: .04em;
+.wbf-wrap .wbf-shop-orders-table th {
+ background: var(--c-surface2) !important;
+ color: var(--c-text-dim) !important;
+ font-weight: 600 !important;
+ font-size: .93em !important;
+ text-transform: uppercase !important;
+ letter-spacing: .04em !important;
+ padding: .65em 1em !important;
+ border-bottom: 1px solid var(--c-border) !important;
}
-.wbf-shop-orders-table tr:last-child td { border-bottom: none; }
-.wbf-shop-order-row {
+.wbf-wrap .wbf-shop-orders-table tr:last-child td { border-bottom: none; }
+.wbf-wrap .wbf-shop-order-row {
cursor: pointer;
transition: background .15s;
}
-.wbf-shop-order-row:hover {
+.wbf-wrap .wbf-shop-order-row:hover {
background: var(--c-primary-l);
}
-.wbf-shop-order-details-inner {
+.wbf-wrap .wbf-shop-order-details-inner {
background: var(--c-bg2);
border-radius: var(--radius-sm);
padding: 1em 1.2em;
@@ -40,16 +43,17 @@
color: var(--c-text);
font-size: .98em;
}
-.wbf-shop-order-cancelled td, .wbf-shop-order-cancelled .wbf-shop-order-details-inner {
+.wbf-wrap .wbf-shop-order-cancelled td,
+.wbf-wrap .wbf-shop-order-cancelled .wbf-shop-order-details-inner {
color: var(--c-danger);
text-decoration: line-through;
opacity: .7;
}
-.wbf-shop-order-details {
+.wbf-wrap .wbf-shop-order-details {
background: var(--c-surface2);
transition: display .2s;
}
-.wbf-shop-order-toggle {
+.wbf-wrap .wbf-shop-order-toggle {
background: var(--c-surface2);
border: 1px solid var(--c-border);
color: var(--c-muted);
@@ -59,7 +63,7 @@
cursor: pointer;
transition: background .15s, color .15s;
}
-.wbf-shop-order-toggle:hover {
+.wbf-wrap .wbf-shop-order-toggle:hover {
background: var(--c-primary-l);
color: var(--c-primary);
}
@@ -665,186 +669,229 @@ a.wbf-btn--primary:hover {
padding-top: 1rem;
border-top: 1px solid var(--c-border);
}
-/* ── Verbindungen / Connection Cards ────────────────────────────────────── */
-.wbf-connection-card {
- display: grid;
- grid-template-columns: 56px 1fr;
- grid-template-rows: auto auto;
- gap: 0 1.1rem;
- padding: 1.4rem 1.25rem;
- border-bottom: 1px solid var(--c-border);
- transition: background .15s;
+/* ── Service Connection Cards (wbf-svc-*) ─────────────────────────── */
+.wbf-svc-list {
+ display: flex;
+ flex-direction: column;
+ gap: 0;
}
-.wbf-connection-card:last-child { border-bottom: none; }
-.wbf-connection-card:hover { background: rgba(255,255,255,.025); }
-.wbf-connection-card__icon {
- grid-column: 1;
- grid-row: 1 / 3;
- width: 48px;
- height: 48px;
- border-radius: 12px;
- border: 1px solid transparent;
+/* Individual card */
+.wbf-svc-card {
+ border-bottom: 1px solid var(--c-border);
+ transition: background .12s;
+}
+.wbf-svc-card:last-child,
+.wbf-svc-card--last { border-bottom: none; }
+.wbf-svc-card:hover { background: rgba(255,255,255,.015); }
+
+/* Main row: icon + info + actions */
+.wbf-svc-card__row {
+ display: flex;
+ align-items: center;
+ gap: .9rem;
+ padding: .9rem 1.1rem;
+}
+
+/* Service icon */
+.wbf-svc-icon {
+ width: 36px; height: 36px;
+ border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
- font-size: 1.35rem;
- align-self: center;
+ font-size: .95rem;
+ flex-shrink: 0;
+ border: 1px solid transparent;
+}
+.wbf-svc-icon--mc {
+ background: rgba(0,180,216,.12);
+ border-color: rgba(0,180,216,.25);
+ color: var(--c-primary);
+}
+.wbf-svc-icon--discord {
+ background: rgba(88,101,242,.14);
+ border-color: rgba(88,101,242,.28);
+ color: #7289da;
}
-/* Titelzeile — rechts oben */
-.wbf-connection-card__head {
- grid-column: 2;
- grid-row: 1;
- display: flex;
- align-items: center;
- gap: .6rem;
- margin-bottom: .5rem;
-}
-
-.wbf-connection-card__body {
+/* Info column */
+.wbf-svc-info {
flex: 1;
min-width: 0;
+ display: flex;
+ flex-direction: column;
+ gap: .18rem;
}
-
-.wbf-connection-card__title {
- font-weight: 700;
- font-size: .92rem;
- color: var(--c-text);
- line-height: 1;
-}
-
-.wbf-connection-card__desc {
- font-size: .82rem;
- color: var(--c-muted);
- line-height: 1.55;
- margin-bottom: .85rem;
-}
-
-/* Content-Bereich — grid row 2, rechte Spalte */
-.wbf-connection-card__content {
- grid-column: 2;
- grid-row: 2;
-}
-
-/* Plugin-Output normalisieren */
-.wbf-connection-card__content p {
- font-size: .8rem;
- color: var(--c-muted);
- line-height: 1.5;
- margin: 0 0 .7rem;
- font-weight: 400 !important;
-}
-.wbf-connection-card__content label {
- display: block;
- font-size: .75rem;
- font-weight: 600;
- color: var(--c-text-dim);
- text-transform: uppercase;
- letter-spacing: .04em;
- margin-bottom: .35rem;
-}
-.wbf-connection-card__content .wbf-mc-row,
-.wbf-connection-card__content > form,
-.wbf-connection-card__content > div {
+.wbf-svc-info__top {
display: flex;
align-items: center;
- gap: .55rem;
+ gap: .5rem;
+ flex-wrap: wrap;
+}
+.wbf-svc-name {
+ font-size: .88rem;
+ font-weight: 700;
+ color: var(--c-text);
+ white-space: nowrap;
+}
+.wbf-svc-desc {
+ font-size: .75rem;
+ color: var(--c-muted);
+ line-height: 1.4;
+}
+
+/* Status badge */
+.wbf-svc-badge {
+ display: inline-flex;
+ align-items: center;
+ gap: .25rem;
+ font-size: .68rem;
+ font-weight: 700;
+ padding: 2px 7px;
+ border-radius: 20px;
+ white-space: nowrap;
+ letter-spacing: .02em;
+}
+.wbf-svc-badge--on {
+ background: rgba(22,163,74,.12);
+ color: #16a34a;
+ border: 1px solid rgba(22,163,74,.25);
+}
+.wbf-svc-badge--off {
+ background: rgba(148,163,184,.1);
+ color: var(--c-muted);
+ border: 1px solid rgba(148,163,184,.2);
+}
+
+/* Linked user pill */
+.wbf-svc-linked-user {
+ display: inline-flex;
+ align-items: center;
+ gap: .35rem;
+ font-size: .78rem;
+ font-weight: 600;
+ color: var(--c-text);
+ background: rgba(0,180,216,.08);
+ border: 1px solid rgba(0,180,216,.2);
+ padding: 2px 8px 2px 5px;
+ border-radius: 20px;
+}
+.wbf-svc-linked-user--discord {
+ background: rgba(88,101,242,.1);
+ border-color: rgba(88,101,242,.22);
+ color: #7289da;
+}
+.wbf-svc-linked-user i { font-size: .75rem; }
+
+/* Actions */
+.wbf-svc-actions {
+ display: flex;
+ align-items: center;
+ gap: .4rem;
+ flex-shrink: 0;
flex-wrap: wrap;
}
-/* Input + Button auf einer Linie halten */
-.wbf-connect-row {
- display: flex !important;
- align-items: center !important;
- gap: .55rem !important;
- flex-wrap: nowrap !important;
+/* Status message */
+.wbf-svc-msg {
+ font-size: .78rem;
+ min-height: 0;
+ padding: 0;
}
-.wbf-connect-row input[type="text"] {
- flex: 1 1 0;
- min-width: 0;
- max-width: none !important;
-}
-.wbf-connect-row button,
-.wbf-connect-row .wbf-btn {
- flex-shrink: 0;
- white-space: nowrap;
+.wbf-svc-msg:not(:empty) { padding: 0 1.1rem .4rem; }
+
+/* Expandable form area */
+.wbf-svc-card__form {
+ padding: .75rem 1.1rem .9rem 3.35rem; /* align with text, after icon */
+ border-top: 1px solid rgba(255,255,255,.05);
+ background: rgba(0,0,0,.12);
}
-/* Alle Verknüpfen-Buttons in Connection-Cards vereinheitlichen */
-.wbf-connection-card__content .wbf-btn,
-.wbf-connection-card__content button:not(.wbf-bb-spoiler__btn) {
- padding: .5rem 1rem !important;
- font-size: .83rem !important;
- font-weight: 600 !important;
- height: 2.25rem !important;
- line-height: 1 !important;
- display: inline-flex !important;
- align-items: center !important;
- gap: .4rem !important;
- border-radius: var(--radius-sm) !important;
- border: 1.5px solid transparent !important;
- cursor: pointer !important;
- font-family: inherit !important;
- transition: var(--transition) !important;
- white-space: nowrap !important;
-}
-/* Primär (Verknüpfen / Code senden) */
-.wbf-connection-card__content .wbf-btn--primary,
-.wbf-connection-card__content button.wbf-btn--primary {
- background: var(--c-primary) !important;
- color: #fff !important;
- border-color: var(--c-primary) !important;
- box-shadow: 0 0 10px rgba(0,180,216,.25) !important;
-}
-.wbf-connection-card__content .wbf-btn--primary:hover {
- background: var(--c-primary-d) !important;
- border-color: var(--c-primary-d) !important;
-}
-/* Ghost (Zurück / Trennen) */
-.wbf-connection-card__content .wbf-btn--ghost,
-.wbf-connection-card__content button.wbf-btn--ghost {
- background: transparent !important;
- color: var(--c-text-dim) !important;
- border-color: var(--c-border-d) !important;
-}
-.wbf-connection-card__content .wbf-btn--ghost:hover {
- border-color: var(--c-primary) !important;
- color: var(--c-primary) !important;
-}
-/* MC-Plugin: dessen Button via content selector normalisieren */
-.wbf-connection-card__content input[type="submit"],
-.wbf-connection-card__content .mc-connect-btn {
- padding: .5rem 1rem !important;
- height: 2.25rem !important;
- font-size: .83rem !important;
- font-weight: 600 !important;
- background: var(--c-primary) !important;
- color: #fff !important;
- border: 1.5px solid var(--c-primary) !important;
- border-radius: var(--radius-sm) !important;
- cursor: pointer !important;
- font-family: inherit !important;
- white-space: nowrap !important;
- display: inline-flex !important;
- align-items: center !important;
-}
-.wbf-connection-card__content input[type="text"] {
- flex: 1;
- min-width: 160px;
- max-width: 280px;
- padding: .45rem .75rem;
+/* Token box */
+.wbf-svc-token-box {
+ background: var(--c-surface2);
border: 1px solid var(--c-border);
- border-radius: var(--radius-sm, 6px);
- background: var(--c-bg);
- color: var(--c-text);
- font-size: .88rem;
+ border-radius: var(--radius-sm);
+ padding: .75rem 1rem;
}
-.wbf-connection-card__content input[type="text"]:focus {
+.wbf-svc-token-box__header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: .5rem;
+ font-size: .78rem;
+ color: var(--c-muted);
+ margin-bottom: .45rem;
+ flex-wrap: wrap;
+}
+.wbf-svc-token-box__header code {
+ color: var(--c-primary);
+ font-size: .82rem;
+ font-weight: 700;
+}
+.wbf-svc-token-code {
+ display: block;
+ font-size: 1.5rem;
+ letter-spacing: .3em;
+ font-weight: 800;
+ color: var(--c-accent);
+ font-family: 'Courier New', monospace;
+}
+
+/* Form inputs inside svc card */
+.wbf-svc-card__form input[type="text"],
+.wbf-svc-card__form input[type="password"] {
+ background: var(--c-bg2);
+ border: 1.5px solid var(--c-border-d);
+ border-radius: var(--radius-sm);
+ padding: .45rem .75rem;
+ font-family: inherit;
+ font-size: .84rem;
+ color: var(--c-text);
+ transition: var(--transition);
+ width: 100%;
+ max-width: 280px;
+}
+.wbf-svc-card__form input:focus {
outline: none;
border-color: var(--c-primary);
- box-shadow: 0 0 0 3px rgba(0,180,216,.15);
+ box-shadow: 0 0 0 3px rgba(0,180,216,.12);
}
+.wbf-svc-card__form .wbf-connect-row {
+ display: flex;
+ align-items: center;
+ gap: .5rem;
+ flex-wrap: wrap;
+}
+.wbf-svc-card__form label {
+ display: block;
+ font-size: .7rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: .05em;
+ color: var(--c-text-dim);
+ margin-bottom: .3rem;
+}
+.wbf-svc-card__form p {
+ font-size: .78rem;
+ color: var(--c-muted);
+ margin: 0 0 .5rem;
+ line-height: 1.45;
+}
+
+/* Keep old connection card classes for backwards compat / filter output */
+.wbf-connection-badge {
+ display: inline-flex;
+ align-items: center;
+ gap: .3rem;
+ font-size: .7rem;
+ font-weight: 600;
+ padding: 2px 8px;
+ border-radius: 20px;
+}
+.wbf-connection-badge--connected { color: #16a34a; background: rgba(22,163,74,.12); border: 1px solid rgba(22,163,74,.25); }
+.wbf-connection-badge--disconnected { color: var(--c-muted); background: rgba(148,163,184,.08); border: 1px solid var(--c-border); }
.wbf-connection-card__content button,
.wbf-connection-card__content .wbf-btn {
white-space: nowrap;
@@ -4285,4 +4332,1228 @@ select.wbf-cf-input option { background: var(--c-surface2); color: var(--c-text)
margin-top: 10px;
font-size: .82rem;
text-align: center;
+}
+/* ═══════════════════════════════════════════════════════════════════════
+ PROFIL REDESIGN v2 — Modern Premium Dark
+ Überschreibt alle bestehenden .wbf-profile-* Styles gezielt
+ ═══════════════════════════════════════════════════════════════════════ */
+
+/* ── Layout ────────────────────────────────────────────────────────────── */
+.wbf-wrap .wbf-profile-layout {
+ grid-template-columns: 285px 1fr;
+ gap: 1.5rem;
+ align-items: start;
+}
+
+/* ── SIDEBAR ───────────────────────────────────────────────────────────── */
+.wbf-wrap .wbf-profile-sidebar {
+ position: sticky;
+ top: 68px;
+ border-radius: 16px;
+ background: linear-gradient(175deg, #1c2236 0%, #161b2c 60%, #131829 100%);
+ border: 1px solid rgba(0,180,216,.18);
+ box-shadow:
+ 0 12px 40px rgba(0,0,0,.5),
+ inset 0 1px 0 rgba(255,255,255,.06),
+ 0 0 0 0.5px rgba(0,180,216,.08);
+ overflow: hidden;
+ align-items: stretch;
+ text-align: center;
+}
+
+/* Banner */
+.wbf-wrap .wbf-profile-banner {
+ height: 150px;
+ border-radius: 0;
+ position: relative;
+ overflow: hidden;
+}
+.wbf-wrap .wbf-profile-banner__img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ display: block;
+}
+.wbf-wrap .wbf-profile-banner__placeholder {
+ width: 100%;
+ height: 100%;
+ background:
+ radial-gradient(ellipse 80% 100% at 20% 60%, rgba(0,180,216,.35) 0%, transparent 55%),
+ radial-gradient(ellipse 60% 80% at 85% 25%, rgba(100,60,220,.28) 0%, transparent 50%),
+ linear-gradient(135deg, #0a1628 0%, #0f1f3a 40%, #141028 70%, #0a1225 100%);
+}
+.wbf-wrap .wbf-profile-banner__placeholder::after {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2300b4d8' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+ opacity: .6;
+}
+.wbf-wrap .wbf-banner-upload-btn {
+ position: absolute;
+ bottom: 10px;
+ right: 10px;
+ width: 34px;
+ height: 34px;
+ border-radius: 50%;
+ background: rgba(0,0,0,.6);
+ backdrop-filter: blur(8px);
+ border: 1px solid rgba(255,255,255,.2);
+ color: #fff;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: .82rem;
+ cursor: pointer;
+ transition: all .2s;
+ z-index: 2;
+}
+.wbf-wrap .wbf-banner-upload-btn:hover {
+ background: rgba(0,180,216,.55);
+ border-color: var(--c-primary);
+ transform: scale(1.1);
+ box-shadow: 0 0 16px rgba(0,180,216,.4);
+}
+
+/* Avatar */
+.wbf-wrap .wbf-profile-sidebar__avatar-wrap {
+ margin-top: -58px;
+ padding-bottom: 0;
+ z-index: 2;
+ display: flex;
+ justify-content: center;
+ position: relative;
+}
+.wbf-wrap .wbf-profile-sidebar__avatar-wrap::before {
+ content: '';
+ position: absolute;
+ top: -4px;
+ width: 120px;
+ height: 120px;
+ border-radius: 50%;
+ background: conic-gradient(from 0deg, #00b4d8, #6366f1, #a78bfa, #00b4d8);
+ animation: wbf-ring-spin 6s linear infinite;
+ opacity: .75;
+ z-index: -1;
+}
+@keyframes wbf-ring-spin { to { transform: rotate(360deg); } }
+
+.wbf-wrap .wbf-profile-sidebar__avatar {
+ width: 108px;
+ height: 108px;
+ border-radius: 50%;
+ border: 4px solid #161b2c;
+ object-fit: cover;
+ box-shadow:
+ 0 0 0 1px rgba(0,180,216,.3),
+ 0 8px 28px rgba(0,0,0,.6);
+ display: block;
+ position: relative;
+ z-index: 1;
+}
+.wbf-wrap .wbf-avatar-upload-btn {
+ position: absolute;
+ bottom: 4px;
+ right: calc(50% - 62px);
+ width: 30px;
+ height: 30px;
+ border-radius: 50%;
+ background: var(--c-primary);
+ color: #fff;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: .72rem;
+ cursor: pointer;
+ z-index: 3;
+ box-shadow: 0 2px 8px rgba(0,0,0,.4);
+ transition: transform .2s, background .2s;
+ border: 2px solid #161b2c;
+}
+.wbf-wrap .wbf-avatar-upload-btn:hover {
+ transform: scale(1.12);
+ background: var(--c-primary-d);
+}
+
+/* Identity */
+.wbf-wrap .wbf-profile-sidebar__identity {
+ padding: .85rem 1.25rem .7rem;
+ border-bottom: 1px solid rgba(255,255,255,.06);
+ gap: .3rem;
+ align-items: center;
+}
+.wbf-wrap .wbf-profile-sidebar__identity h2 {
+ font-size: 1.1rem;
+ font-weight: 800;
+ color: #fff;
+ letter-spacing: -.02em;
+ margin: 0;
+}
+.wbf-wrap .wbf-profile-sidebar__username {
+ font-size: .76rem;
+ color: rgba(255,255,255,.38);
+ letter-spacing: .01em;
+}
+.wbf-wrap .wbf-profile-online-badge {
+ display: inline-flex;
+ align-items: center;
+ gap: .35rem;
+ font-size: .73rem;
+ font-weight: 700;
+ color: #22c55e;
+ background: rgba(34,197,94,.1);
+ border: 1px solid rgba(34,197,94,.2);
+ border-radius: 20px;
+ padding: .2rem .65rem;
+ letter-spacing: .02em;
+}
+.wbf-wrap .wbf-profile-online-dot {
+ width: 7px;
+ height: 7px;
+ border-radius: 50%;
+ background: #22c55e;
+ box-shadow: 0 0 8px rgba(34,197,94,.9);
+ animation: wbf-pulse-grn 2s infinite;
+ flex-shrink: 0;
+}
+@keyframes wbf-pulse-grn {
+ 0%, 100% { box-shadow: 0 0 5px rgba(34,197,94,.8); }
+ 50% { box-shadow: 0 0 12px rgba(34,197,94,.5); }
+}
+.wbf-wrap .wbf-profile-lastseen {
+ font-size: .72rem;
+ color: rgba(255,255,255,.3);
+ display: flex;
+ align-items: center;
+ gap: .3rem;
+}
+
+/* Stats */
+.wbf-wrap .wbf-profile-sidebar__stats {
+ background: rgba(0,0,0,.18);
+ border-bottom: 1px solid rgba(255,255,255,.05);
+}
+.wbf-wrap .wbf-profile-sidebar__stat {
+ padding: 1rem .5rem;
+ position: relative;
+}
+.wbf-wrap .wbf-profile-sidebar__stat:first-child {
+ border-right: 1px solid rgba(255,255,255,.06);
+}
+.wbf-wrap .wbf-profile-sidebar__stat span {
+ font-size: 1.5rem;
+ font-weight: 800;
+ color: var(--c-primary);
+ line-height: 1;
+ text-shadow: 0 0 20px rgba(0,180,216,.5);
+}
+.wbf-wrap .wbf-profile-sidebar__stat em {
+ font-style: normal;
+ font-size: .62rem;
+ color: rgba(255,255,255,.3);
+ text-transform: uppercase;
+ letter-spacing: .08em;
+ display: block;
+ margin-top: .3rem;
+}
+
+/* Sections (Bio, Sig, Custom Fields) */
+.wbf-wrap .wbf-profile-sidebar__section {
+ padding: .9rem 1.25rem;
+ border-bottom: 1px solid rgba(255,255,255,.05);
+ text-align: left;
+}
+.wbf-wrap .wbf-profile-sidebar__section:last-child {
+ border-bottom: none;
+}
+.wbf-wrap .wbf-profile-sidebar__section-label {
+ font-size: .64rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: .1em;
+ color: var(--c-primary);
+ margin-bottom: .45rem;
+ display: flex;
+ align-items: center;
+ gap: .35rem;
+ opacity: .85;
+}
+.wbf-wrap .wbf-profile-sidebar__section p,
+.wbf-wrap .wbf-profile-sidebar__bio-text,
+.wbf-wrap .wbf-profile-sidebar__sig {
+ font-size: .8rem;
+ color: rgba(255,255,255,.5);
+ line-height: 1.6;
+ margin: 0;
+}
+
+/* ── TAB NAVIGATION (Pill Style) ───────────────────────────────────────── */
+.wbf-wrap .wbf-profile-tabs {
+ display: flex;
+ gap: 3px;
+ margin-bottom: 1.25rem;
+ border-bottom: none;
+ padding: 4px;
+ background: rgba(0,0,0,.25);
+ border: 1px solid rgba(255,255,255,.07);
+ border-radius: 12px;
+ overflow-x: auto;
+ scrollbar-width: none;
+ flex-wrap: wrap;
+}
+.wbf-wrap .wbf-profile-tabs::-webkit-scrollbar { display: none; }
+
+.wbf-wrap .wbf-profile-tab {
+ display: inline-flex;
+ align-items: center;
+ gap: .4rem;
+ padding: .55rem 1rem;
+ font-size: .8rem;
+ font-weight: 600;
+ color: rgba(255,255,255,.38);
+ text-decoration: none;
+ border-radius: 8px;
+ border-bottom: none;
+ margin-bottom: 0;
+ white-space: nowrap;
+ transition: color .15s, background .15s, box-shadow .15s;
+ letter-spacing: .01em;
+ flex-shrink: 0;
+}
+.wbf-wrap .wbf-profile-tab:hover {
+ color: rgba(255,255,255,.7);
+ background: rgba(255,255,255,.06);
+ border-bottom-color: transparent;
+}
+.wbf-wrap .wbf-profile-tab.active {
+ color: #fff;
+ background: rgba(0,180,216,.18);
+ border-bottom-color: transparent;
+ box-shadow:
+ 0 0 16px rgba(0,180,216,.2),
+ inset 0 1px 0 rgba(0,180,216,.25),
+ 0 1px 0 rgba(0,180,216,.1);
+}
+.wbf-wrap .wbf-profile-tab.active i {
+ color: var(--c-primary);
+ filter: drop-shadow(0 0 4px rgba(0,180,216,.6));
+}
+.wbf-wrap .wbf-profile-tab i {
+ font-size: .78rem;
+}
+
+/* ── CONTENT CARDS ─────────────────────────────────────────────────────── */
+.wbf-wrap .wbf-profile-main {
+ display: flex;
+ flex-direction: column;
+ gap: 1.1rem;
+}
+.wbf-wrap .wbf-profile-card {
+ border-radius: 14px;
+ background: linear-gradient(175deg, #1c2236 0%, #171c2d 100%);
+ border: 1px solid rgba(255,255,255,.07);
+ box-shadow: 0 4px 24px rgba(0,0,0,.35);
+ overflow: hidden;
+ transition: border-color .2s, box-shadow .2s;
+}
+.wbf-wrap .wbf-profile-card:hover {
+ border-color: rgba(0,180,216,.2);
+ box-shadow: 0 6px 32px rgba(0,0,0,.4), 0 0 0 1px rgba(0,180,216,.06);
+}
+.wbf-wrap .wbf-profile-card__header {
+ padding: .9rem 1.4rem;
+ font-size: .73rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: .09em;
+ color: rgba(255,255,255,.4);
+ border-bottom: 1px solid rgba(255,255,255,.06);
+ background: rgba(0,0,0,.2);
+ display: flex;
+ align-items: center;
+ gap: .5rem;
+}
+.wbf-wrap .wbf-profile-card__header i {
+ color: var(--c-primary);
+ filter: drop-shadow(0 0 4px rgba(0,180,216,.5));
+ font-size: .85rem;
+}
+.wbf-wrap .wbf-profile-card__body {
+ padding: 1.4rem;
+}
+
+/* ── PROFILE EDIT FORM ─────────────────────────────────────────────────── */
+.wbf-wrap .wbf-profile-edit-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: .75rem 1.25rem;
+}
+.wbf-wrap .wbf-form-row label {
+ font-size: .68rem;
+ letter-spacing: .07em;
+ color: rgba(255,255,255,.38);
+}
+.wbf-wrap .wbf-form-row input[type="text"],
+.wbf-wrap .wbf-form-row input[type="email"],
+.wbf-wrap .wbf-form-row input[type="password"],
+.wbf-wrap .wbf-form-row input[type="url"],
+.wbf-wrap .wbf-form-row textarea,
+.wbf-wrap .wbf-form-row select,
+.wbf-wrap .wbf-cf-input {
+ background: rgba(0,0,0,.3);
+ border-color: rgba(255,255,255,.1);
+ border-radius: 8px;
+ color: rgba(255,255,255,.85);
+ transition: border-color .15s, box-shadow .15s, background .15s;
+}
+.wbf-wrap .wbf-form-row input:focus,
+.wbf-wrap .wbf-form-row textarea:focus,
+.wbf-wrap .wbf-form-row select:focus,
+.wbf-wrap .wbf-cf-input:focus {
+ background: rgba(0,180,216,.04);
+ border-color: rgba(0,180,216,.45);
+ box-shadow: 0 0 0 3px rgba(0,180,216,.1), 0 0 16px rgba(0,180,216,.08);
+}
+
+/* ── AKTIVITÄT — Post Items ────────────────────────────────────────────── */
+.wbf-wrap .wbf-profile-post-item {
+ padding: .75rem 1.4rem;
+ border-bottom: 1px solid rgba(255,255,255,.045);
+ transition: background .15s;
+}
+.wbf-wrap .wbf-profile-post-item:hover {
+ background: rgba(0,180,216,.04);
+}
+.wbf-wrap .wbf-profile-post-item__title {
+ color: var(--c-primary);
+ font-size: .84rem;
+ font-weight: 600;
+}
+.wbf-wrap .wbf-profile-post-item__time {
+ color: rgba(255,255,255,.28);
+ font-size: .68rem;
+}
+
+/* ── SHOP TABLE ─────────────────────────────────────────────────────────── */
+.wbf-wrap .wbf-shop-orders-table {
+ background: transparent;
+ border-radius: 10px;
+ overflow: hidden;
+ border: 1px solid rgba(255,255,255,.07);
+}
+.wbf-wrap .wbf-shop-orders-table th,
+.wbf-wrap .wbf-shop-orders-table td {
+ padding: .8em 1.1em;
+ border-bottom: 1px solid rgba(255,255,255,.06);
+}
+.wbf-wrap .wbf-shop-orders-table th {
+ background: rgba(0,0,0,.25) !important;
+ color: rgba(255,255,255,.38) !important;
+ font-weight: 700 !important;
+ font-size: .68rem !important;
+ text-transform: uppercase !important;
+ letter-spacing: .09em !important;
+ padding: .75em 1.1em !important;
+ border-bottom: 1px solid rgba(255,255,255,.08) !important;
+}
+.wbf-wrap .wbf-shop-order-row:hover {
+ background: rgba(0,180,216,.06);
+}
+
+/* ── DM + IGNORE BUTTON (auf fremdem Profil) ──────────────────────────── */
+.wbf-wrap .wbf-profile-main > div[style*="justify-content:flex-end"] {
+ gap: .6rem;
+ margin-bottom: 1rem;
+ padding: .85rem 1.25rem;
+ background: rgba(0,0,0,.2);
+ border: 1px solid rgba(255,255,255,.06);
+ border-radius: 12px;
+ justify-content: flex-end;
+}
+
+/* ── Responsive ────────────────────────────────────────────────────────── */
+@media (max-width: 900px) {
+ .wbf-wrap .wbf-profile-layout {
+ grid-template-columns: 1fr;
+ }
+ .wbf-wrap .wbf-profile-sidebar {
+ position: static;
+ border-radius: 14px;
+ }
+ .wbf-wrap .wbf-profile-sidebar__avatar-wrap::before {
+ display: none;
+ }
+ .wbf-wrap .wbf-profile-edit-grid {
+ grid-template-columns: 1fr;
+ }
+ .wbf-wrap .wbf-profile-tabs {
+ flex-wrap: nowrap;
+ overflow-x: auto;
+ }
+}
+@media (max-width: 480px) {
+ .wbf-wrap .wbf-profile-tab {
+ padding: .5rem .7rem;
+ font-size: .76rem;
+ }
+ .wbf-wrap .wbf-profile-card__body {
+ padding: 1rem;
+ }
+}
+
+/* ═══════════════════════════════════════════════════════════════════════ */
+
+/* ══════════════════════════════════════════════════════════════════════
+ PROFIL v4 — Neues Design (wbf-pv-*)
+ ══════════════════════════════════════════════════════════════════════ */
+
+/* ── Outer wrapper ──────────────────────────────────────────────────── */
+.wbf-pv {
+ display: flex;
+ flex-direction: column;
+ gap: 0;
+ border-radius: var(--radius);
+ overflow: hidden;
+ box-shadow: var(--shadow-lg);
+}
+
+/* ── HERO ─────────────────────────────────────────────────────────────── */
+.wbf-pv-hero {
+ background: var(--c-surface);
+ border: 1px solid var(--c-border);
+ border-bottom: none;
+ border-radius: var(--radius) var(--radius) 0 0;
+ overflow: hidden;
+}
+
+/* Banner */
+.wbf-pv-banner {
+ position: relative;
+ width: 100%;
+ height: 220px;
+ overflow: hidden;
+ background: linear-gradient(135deg, #060d1a 0%, #0a1628 40%, #061830 60%, #040b14 100%);
+}
+.wbf-pv-banner__placeholder {
+ width: 100%; height: 100%;
+ background:
+ linear-gradient(135deg, #060d1a 0%, #0d1f3c 40%, #071626 70%, #040c18 100%);
+ position: relative;
+}
+/* subtle animated particle-like grid on placeholder */
+.wbf-pv-banner__placeholder::before {
+ content: '';
+ position: absolute; inset: 0;
+ background-image:
+ radial-gradient(circle at 20% 50%, rgba(0,180,216,.18) 0%, transparent 50%),
+ radial-gradient(circle at 80% 30%, rgba(72,202,228,.12) 0%, transparent 45%),
+ radial-gradient(circle at 55% 80%, rgba(0,96,199,.1) 0%, transparent 40%);
+ animation: wbf-banner-breathe 6s ease-in-out infinite alternate;
+}
+@keyframes wbf-banner-breathe {
+ from { opacity: .7; }
+ to { opacity: 1; }
+}
+.wbf-pv-banner__img {
+ width: 100%; height: 100%;
+ object-fit: cover;
+ display: block;
+ transition: transform .4s ease;
+}
+.wbf-pv-banner:hover .wbf-pv-banner__img { transform: scale(1.02); }
+.wbf-pv-banner__overlay {
+ position: absolute; inset: 0;
+ background: linear-gradient(to bottom,
+ transparent 30%,
+ rgba(10,18,30,.55) 70%,
+ rgba(10,18,30,.9) 100%);
+ pointer-events: none;
+}
+.wbf-pv-banner__upload {
+ position: absolute;
+ bottom: 14px; right: 14px;
+ display: inline-flex;
+ align-items: center;
+ gap: .4rem;
+ padding: .4rem .85rem;
+ background: rgba(0,0,0,.55);
+ backdrop-filter: blur(8px);
+ border: 1px solid rgba(255,255,255,.18);
+ border-radius: 20px;
+ color: rgba(255,255,255,.85);
+ font-size: .75rem;
+ font-weight: 600;
+ cursor: pointer;
+ transition: background .2s, border-color .2s, color .2s;
+ letter-spacing: .02em;
+ z-index: 11;
+}
+.wbf-pv-banner__upload:hover {
+ background: rgba(0,180,216,.45);
+ border-color: var(--c-primary);
+ color: #fff;
+}
+
+/* Identity row: sits below banner, avatar overlaps */
+.wbf-pv-identity-row {
+ display: flex;
+ align-items: flex-end;
+ gap: 1.25rem;
+ padding: 0 1.75rem 1.5rem;
+ margin-top: -50px;
+ position: relative;
+ z-index: 2;
+ flex-wrap: wrap;
+}
+
+/* Avatar */
+.wbf-pv-avatar-wrap {
+ position: relative;
+ flex-shrink: 0;
+ margin-bottom: .15rem;
+}
+.wbf-pv-avatar-ring {
+ width: 110px; height: 110px;
+ border-radius: 50%;
+ padding: 3px;
+ background: linear-gradient(135deg, var(--c-primary) 0%, #48cae4 50%, #6366f1 100%);
+ box-shadow: 0 0 24px rgba(0,180,216,.4), 0 4px 14px rgba(0,0,0,.5);
+}
+.wbf-pv-avatar {
+ width: 100%; height: 100%;
+ border-radius: 50%;
+ object-fit: cover;
+ display: block;
+ border: 3px solid var(--c-surface);
+ background: var(--c-bg2);
+}
+.wbf-pv-online-dot {
+ position: absolute;
+ bottom: 6px; right: 6px;
+ width: 16px; height: 16px;
+ border-radius: 50%;
+ background: #22c55e;
+ border: 3px solid var(--c-surface);
+ box-shadow: 0 0 10px rgba(34,197,94,.8);
+ animation: wbf-pulse-green 2s infinite;
+}
+.wbf-pv-avatar-cam {
+ position: absolute;
+ inset: 3px;
+ border-radius: 50%;
+ background: rgba(0,0,0,.6);
+ backdrop-filter: blur(3px);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #fff;
+ font-size: .95rem;
+ cursor: pointer;
+ opacity: 0;
+ transition: opacity .18s;
+}
+.wbf-pv-avatar-wrap:hover .wbf-pv-avatar-cam { opacity: 1; }
+
+/* Identity text */
+.wbf-pv-identity {
+ flex: 1;
+ min-width: 0;
+ padding-bottom: .25rem;
+}
+.wbf-pv-name {
+ font-size: 1.6rem;
+ font-weight: 800;
+ color: #fff;
+ margin: 0 0 .35rem;
+ letter-spacing: -.02em;
+ text-shadow: 0 2px 12px rgba(0,0,0,.5);
+ line-height: 1.1;
+}
+.wbf-pv-meta {
+ display: flex;
+ align-items: center;
+ gap: .5rem;
+ flex-wrap: wrap;
+ margin-bottom: .6rem;
+}
+.wbf-pv-username {
+ font-size: .82rem;
+ color: var(--c-muted);
+ font-weight: 500;
+}
+.wbf-pv-online-badge {
+ display: inline-flex;
+ align-items: center;
+ gap: .3rem;
+ font-size: .72rem;
+ font-weight: 700;
+ color: #22c55e;
+ background: rgba(34,197,94,.12);
+ border: 1px solid rgba(34,197,94,.28);
+ padding: 2px 8px;
+ border-radius: 20px;
+}
+.wbf-pv-online-pulse {
+ width: 6px; height: 6px;
+ border-radius: 50%;
+ background: #22c55e;
+ box-shadow: 0 0 5px rgba(34,197,94,.9);
+ animation: wbf-pulse 2s infinite;
+ flex-shrink: 0;
+}
+.wbf-pv-lastseen {
+ font-size: .75rem;
+ color: var(--c-muted);
+ display: inline-flex;
+ align-items: center;
+ gap: .3rem;
+}
+/* Stats pills */
+.wbf-pv-stats-row {
+ display: flex;
+ align-items: center;
+ gap: .5rem;
+}
+.wbf-pv-stat {
+ display: flex;
+ flex-direction: column;
+ gap: .05rem;
+}
+.wbf-pv-stat span {
+ font-size: 1.05rem;
+ font-weight: 700;
+ color: var(--c-primary);
+ line-height: 1;
+ text-shadow: 0 0 12px rgba(0,180,216,.4);
+}
+.wbf-pv-stat em {
+ font-style: normal;
+ font-size: .62rem;
+ text-transform: uppercase;
+ letter-spacing: .07em;
+ color: var(--c-muted);
+}
+.wbf-pv-stat-sep {
+ width: 1px;
+ height: 28px;
+ background: rgba(255,255,255,.1);
+ margin: 0 .25rem;
+}
+
+/* Actions */
+.wbf-pv-actions {
+ display: flex;
+ gap: .5rem;
+ align-items: center;
+ flex-wrap: wrap;
+ margin-bottom: .25rem;
+ margin-left: auto;
+}
+
+/* ── TABS BAR ────────────────────────────────────────────────────────── */
+.wbf-pv-tabs-bar {
+ display: flex;
+ background: var(--c-surface2);
+ border: 1px solid var(--c-border);
+ border-top: none;
+ border-bottom: none;
+ padding: 0 1.25rem;
+ overflow-x: auto;
+ scrollbar-width: none;
+ gap: 0;
+}
+.wbf-pv-tabs-bar::-webkit-scrollbar { display: none; }
+.wbf-pv-tab {
+ display: inline-flex;
+ align-items: center;
+ gap: .4rem;
+ padding: .85rem 1rem;
+ font-size: .83rem;
+ font-weight: 600;
+ color: var(--c-muted);
+ text-decoration: none;
+ border-bottom: 2px solid transparent;
+ margin-bottom: -1px;
+ white-space: nowrap;
+ transition: color .15s, border-color .15s;
+ letter-spacing: .01em;
+}
+.wbf-pv-tab:hover { color: var(--c-text); border-bottom-color: rgba(255,255,255,.2); }
+.wbf-pv-tab.active { color: var(--c-primary); border-bottom-color: var(--c-primary); }
+.wbf-pv-tab i { font-size: .75rem; }
+
+/* ── BODY ────────────────────────────────────────────────────────────── */
+.wbf-pv-body {
+ display: grid;
+ grid-template-columns: 260px 1fr;
+ gap: 0;
+ border: 1px solid var(--c-border);
+ border-top: 1px solid rgba(255,255,255,.06);
+ border-radius: 0 0 var(--radius) var(--radius);
+ background: var(--c-bg);
+ min-height: 400px;
+}
+
+/* ── SIDEBAR ─────────────────────────────────────────────────────────── */
+.wbf-pv-sidebar {
+ background: var(--c-surface);
+ border-right: 1px solid var(--c-border);
+ display: flex;
+ flex-direction: column;
+ gap: 0;
+ border-radius: 0 0 0 var(--radius);
+}
+.wbf-pv-sb-section {
+ padding: 1rem 1.1rem;
+ border-bottom: 1px solid var(--c-border);
+}
+.wbf-pv-sb-section:last-child { border-bottom: none; }
+.wbf-pv-sb-label {
+ display: flex;
+ align-items: center;
+ gap: .4rem;
+ font-size: .65rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: .09em;
+ color: var(--c-primary);
+ margin-bottom: .55rem;
+}
+.wbf-pv-sb-label i { font-size: .65rem; }
+.wbf-pv-sb-text {
+ font-size: .82rem;
+ color: var(--c-text-dim);
+ line-height: 1.6;
+}
+.wbf-pv-sb-sig {
+ font-size: .78rem;
+ color: var(--c-muted);
+ font-style: italic;
+ line-height: 1.55;
+}
+.wbf-pv-sb-section--sig {
+ background: rgba(0,180,216,.03);
+ border-left: 2px solid rgba(0,180,216,.25);
+}
+/* Custom field rows in sidebar */
+.wbf-pv-cf-row {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ gap: .5rem;
+ margin-bottom: .45rem;
+ font-size: .8rem;
+}
+.wbf-pv-cf-row:last-child { margin-bottom: 0; }
+.wbf-pv-cf-lbl {
+ color: var(--c-muted);
+ flex-shrink: 0;
+ font-size: .75rem;
+}
+.wbf-pv-cf-val {
+ color: var(--c-text-dim);
+ text-align: right;
+ word-break: break-word;
+}
+.wbf-pv-cf-val--link {
+ color: var(--c-primary);
+ text-decoration: none;
+}
+.wbf-pv-cf-val--link:hover { text-decoration: underline; }
+
+/* ── CONTENT ─────────────────────────────────────────────────────────── */
+.wbf-pv-content {
+ padding: 1.25rem;
+ display: flex;
+ flex-direction: column;
+ gap: 1.1rem;
+ min-width: 0;
+}
+
+/* ── Responsive ─────────────────────────────────────────────────────── */
+@media (max-width: 900px) {
+ .wbf-pv-body { grid-template-columns: 1fr; }
+ .wbf-pv-sidebar { border-right: none; border-bottom: 1px solid var(--c-border); border-radius: 0; }
+ .wbf-pv-banner { height: 160px; }
+ .wbf-pv-name { font-size: 1.3rem; }
+}
+@media (max-width: 600px) {
+ .wbf-pv-banner { height: 130px; }
+ .wbf-pv-identity-row { padding: 0 1rem 1.25rem; margin-top: -40px; gap: .75rem; }
+ .wbf-pv-avatar-ring { width: 88px; height: 88px; }
+ .wbf-pv-name { font-size: 1.1rem; }
+ .wbf-pv-actions { margin-left: 0; width: 100%; }
+ .wbf-pv-tabs-bar { padding: 0 .5rem; }
+ .wbf-pv-tab { padding: .7rem .65rem; font-size: .78rem; }
+ .wbf-pv-content { padding: .85rem; }
+}
+
+
+/* Hide description, standalone labels AND label text — show only inputs/buttons */
+.wbf-svc-gallery-actions > p,
+.wbf-svc-gallery-actions p:not(:has(input)),
+.wbf-svc-gallery-actions label:not(:has(input)) {
+ display: none !important;
+}
+/* Label that wraps input: hide the text node, show input inline */
+.wbf-svc-gallery-actions label:has(input) {
+ display: inline-flex !important;
+ align-items: center !important;
+ gap: .4rem !important;
+ margin: 0 !important;
+ font-size: 0 !important; /* hides label text */
+ color: transparent !important;
+}
+.wbf-svc-gallery-actions label:has(input) input {
+ font-size: .82rem !important;
+ color: var(--c-text) !important;
+}
+/* Make the connect row inline */
+.wbf-svc-gallery-actions .wbf-connect-row,
+.wbf-svc-gallery-actions > div {
+ display: flex !important;
+ align-items: center !important;
+ gap: .4rem !important;
+ flex-wrap: nowrap !important;
+ margin: 0 !important;
+}
+/* Compact input in gallery actions */
+.wbf-svc-gallery-actions input[type="text"] {
+ width: 160px !important;
+ min-width: 0 !important;
+ max-width: 180px !important;
+ background: var(--c-bg2) !important;
+ border: 1.5px solid var(--c-border-d) !important;
+ border-radius: var(--radius-sm) !important;
+ padding: .38rem .65rem !important;
+ font-size: .82rem !important;
+ color: var(--c-text) !important;
+ font-family: inherit !important;
+}
+.wbf-svc-gallery-actions input[type="text"]:focus {
+ outline: none !important;
+ border-color: var(--c-primary) !important;
+ box-shadow: 0 0 0 3px rgba(0,180,216,.12) !important;
+}
+
+
+
+/* Actions-Bereich immer gleich breit und rechtsbündig */
+.wbf-svc-card__row {
+ align-items: center !important;
+}
+.wbf-svc-actions {
+ min-width: 260px !important;
+ justify-content: flex-end !important;
+ flex-shrink: 0 !important;
+}
+
+/* Einheitliches Input-Styling für alle inline-Felder */
+.wbf-svc-actions input[type="text"],
+.wbf-svc-gallery-actions input[type="text"],
+.wbf-svc-discord-inline input[type="text"] {
+ width: 155px !important;
+ min-width: 0 !important;
+ background: var(--c-bg2) !important;
+ border: 1.5px solid var(--c-border-d) !important;
+ border-radius: var(--radius-sm) !important;
+ padding: .4rem .7rem !important;
+ font-size: .82rem !important;
+ font-family: inherit !important;
+ color: var(--c-text) !important;
+ height: 2.1rem !important;
+ box-sizing: border-box !important;
+ transition: border-color .15s !important;
+}
+.wbf-svc-actions input[type="text"]:focus,
+.wbf-svc-gallery-actions input[type="text"]:focus,
+.wbf-svc-discord-inline input[type="text"]:focus {
+ outline: none !important;
+ border-color: var(--c-primary) !important;
+ box-shadow: 0 0 0 3px rgba(0,180,216,.12) !important;
+}
+.wbf-svc-actions input[type="text"]::placeholder,
+.wbf-svc-gallery-actions input[type="text"]::placeholder,
+.wbf-svc-discord-inline input[type="text"]::placeholder {
+ color: var(--c-muted) !important;
+}
+
+/* Einheitliche Buttons */
+.wbf-svc-actions .wbf-btn,
+.wbf-svc-gallery-actions .wbf-btn,
+.wbf-svc-discord-inline .wbf-btn {
+ height: 2.1rem !important;
+ padding: 0 .9rem !important;
+ font-size: .79rem !important;
+ font-weight: 600 !important;
+ white-space: nowrap !important;
+ display: inline-flex !important;
+ align-items: center !important;
+ gap: .35rem !important;
+ border-radius: var(--radius-sm) !important;
+ cursor: pointer !important;
+ font-family: inherit !important;
+ transition: var(--transition) !important;
+ box-sizing: border-box !important;
+}
+/* Primary-Stil für alle Haupt-Aktions-Buttons */
+.wbf-svc-actions .wbf-btn--primary,
+.wbf-svc-gallery-actions .wbf-btn--primary,
+.wbf-svc-discord-inline .wbf-btn--primary,
+/* Fallback: alle Buttons ohne --ghost / --outline werden primär */
+.wbf-svc-actions button:not(.wbf-btn--ghost):not(.wbf-btn--outline) {
+ background: var(--c-primary) !important;
+ color: #fff !important;
+ border: 1.5px solid var(--c-primary) !important;
+ box-shadow: 0 0 10px rgba(0,180,216,.2) !important;
+}
+.wbf-svc-actions .wbf-btn--primary:hover,
+.wbf-svc-gallery-actions .wbf-btn--primary:hover,
+.wbf-svc-discord-inline .wbf-btn--primary:hover {
+ background: var(--c-primary-d) !important;
+ border-color: var(--c-primary-d) !important;
+ box-shadow: 0 0 16px rgba(0,180,216,.35) !important;
+}
+/* Ghost-Stil für Sekundär-Buttons (Trennen etc.) */
+.wbf-svc-actions .wbf-btn:not(.wbf-btn--primary) {
+ background: var(--c-surface2) !important;
+ color: var(--c-text-dim) !important;
+ border: 1.5px solid var(--c-border-d) !important;
+ box-shadow: none !important;
+}
+.wbf-svc-actions .wbf-btn:not(.wbf-btn--primary):hover {
+ border-color: var(--c-primary) !important;
+ color: var(--c-primary) !important;
+}
+
+/* Input + Button immer flex-row, kein Wrap */
+.wbf-svc-gallery-actions,
+.wbf-svc-discord-inline {
+ display: flex !important;
+ align-items: center !important;
+ gap: .4rem !important;
+ flex-wrap: nowrap !important;
+}
+
+
+/* Zielt auf ALLE Buttons/Inputs in den Actions-Bereichen,
+ unabhängig von Klassen die das Plugin setzt */
+
+.wbf-svc-card .wbf-svc-actions button,
+.wbf-svc-card .wbf-svc-actions input[type="submit"],
+.wbf-svc-card .wbf-svc-actions input[type="button"],
+.wbf-svc-card .wbf-svc-actions a.wbf-btn,
+.wbf-svc-gallery-actions button,
+.wbf-svc-gallery-actions input[type="submit"],
+.wbf-svc-gallery-actions input[type="button"],
+.wbf-svc-discord-inline button {
+ height: 34px !important;
+ min-height: 34px !important;
+ max-height: 34px !important;
+ padding: 0 .9rem !important;
+ font-size: .8rem !important;
+ font-weight: 600 !important;
+ line-height: 1 !important;
+ display: inline-flex !important;
+ align-items: center !important;
+ justify-content: center !important;
+ gap: .35rem !important;
+ border-radius: 6px !important;
+ white-space: nowrap !important;
+ font-family: inherit !important;
+ cursor: pointer !important;
+ box-sizing: border-box !important;
+ vertical-align: middle !important;
+ background: var(--c-primary) !important;
+ color: #fff !important;
+ border: 1.5px solid var(--c-primary) !important;
+ box-shadow: 0 0 10px rgba(0,180,216,.2) !important;
+ transition: background .15s, box-shadow .15s !important;
+}
+.wbf-svc-card .wbf-svc-actions button:hover,
+.wbf-svc-gallery-actions button:hover,
+.wbf-svc-discord-inline button:hover {
+ background: var(--c-primary-d) !important;
+ box-shadow: 0 0 16px rgba(0,180,216,.35) !important;
+}
+
+/* Sekundär-Buttons (Trennen, Zurück) */
+.wbf-svc-card .wbf-svc-actions button.wbf-btn--ghost,
+.wbf-svc-card .wbf-svc-actions button:not(.wbf-btn--primary)[id*="disconnect"],
+.wbf-svc-card .wbf-svc-actions button:not(.wbf-btn--primary)[id*="unlink"],
+.wbf-svc-card .wbf-svc-actions button:not(.wbf-btn--primary)[id*="back"] {
+ background: var(--c-surface2) !important;
+ color: var(--c-text-dim) !important;
+ border-color: var(--c-border-d) !important;
+ box-shadow: none !important;
+}
+.wbf-svc-card .wbf-svc-actions button.wbf-btn--ghost:hover,
+.wbf-svc-card .wbf-svc-actions button:not(.wbf-btn--primary)[id*="disconnect"]:hover,
+.wbf-svc-card .wbf-svc-actions button:not(.wbf-btn--primary)[id*="unlink"]:hover {
+ border-color: var(--c-danger) !important;
+ color: var(--c-danger) !important;
+ background: rgba(240,82,82,.08) !important;
+}
+
+/* Alle Inline-Inputs gleich groß */
+.wbf-svc-card .wbf-svc-actions input[type="text"],
+.wbf-svc-gallery-actions input[type="text"],
+.wbf-svc-discord-inline input[type="text"] {
+ height: 34px !important;
+ min-height: 34px !important;
+ max-height: 34px !important;
+ padding: 0 .7rem !important;
+ font-size: .82rem !important;
+ font-family: inherit !important;
+ background: var(--c-bg2) !important;
+ border: 1.5px solid var(--c-border-d) !important;
+ border-radius: 6px !important;
+ color: var(--c-text) !important;
+ box-sizing: border-box !important;
+ width: 155px !important;
+ vertical-align: middle !important;
+}
+
+/* ══════════════════════════════════════════════════════════════════════
+ SERVICE CARDS — Buttons & Inputs einheitlich (finale Version)
+ ══════════════════════════════════════════════════════════════════════ */
+
+/* Feste Breite für den Actions-Bereich = alle Buttons rechtsbündig */
+.wbf-profile-card .wbf-svc-card .wbf-svc-card__row {
+ align-items: center !important;
+}
+.wbf-profile-card .wbf-svc-card .wbf-svc-actions {
+ min-width: 260px !important;
+ justify-content: flex-end !important;
+ flex-shrink: 0 !important;
+}
+
+/* ─ Alle Buttons in Service-Cards: exakt gleiche Größe ─────────────── */
+.wbf-profile-card .wbf-svc-list button,
+.wbf-profile-card .wbf-svc-list input[type="submit"],
+.wbf-profile-card .wbf-svc-list input[type="button"],
+.wbf-profile-card .wbf-svc-list a.button,
+.wbf-profile-card .wbf-svc-list .wbf-btn {
+ height: 34px !important;
+ min-height: 34px !important;
+ max-height: 34px !important;
+ padding: 0 1rem !important;
+ font-size: .8rem !important;
+ font-weight: 600 !important;
+ line-height: 34px !important;
+ display: inline-flex !important;
+ align-items: center !important;
+ justify-content: center !important;
+ gap: .35rem !important;
+ border-radius: 6px !important;
+ white-space: nowrap !important;
+ font-family: inherit !important;
+ cursor: pointer !important;
+ box-sizing: border-box !important;
+ vertical-align: middle !important;
+ background: var(--c-primary) !important;
+ color: #fff !important;
+ border: 1.5px solid var(--c-primary) !important;
+ box-shadow: 0 0 10px rgba(0,180,216,.2) !important;
+ transition: background .15s, box-shadow .15s !important;
+ text-decoration: none !important;
+}
+.wbf-profile-card .wbf-svc-list button:hover,
+.wbf-profile-card .wbf-svc-list input[type="submit"]:hover,
+.wbf-profile-card .wbf-svc-list .wbf-btn:hover {
+ background: var(--c-primary-d) !important;
+ box-shadow: 0 0 16px rgba(0,180,216,.4) !important;
+}
+
+/* Sekundär-Buttons (Trennen / Zurück) */
+.wbf-profile-card .wbf-svc-list button[id*="disconnect"],
+.wbf-profile-card .wbf-svc-list button[id*="unlink"],
+.wbf-profile-card .wbf-svc-list button[id*="back"],
+.wbf-profile-card .wbf-svc-list button.wbf-btn--ghost {
+ background: var(--c-surface2) !important;
+ color: var(--c-text-dim) !important;
+ border-color: var(--c-border-d) !important;
+ box-shadow: none !important;
+}
+.wbf-profile-card .wbf-svc-list button[id*="disconnect"]:hover,
+.wbf-profile-card .wbf-svc-list button[id*="unlink"]:hover {
+ border-color: var(--c-danger) !important;
+ color: var(--c-danger) !important;
+ background: rgba(240,82,82,.08) !important;
+}
+
+/* ─ Alle Text-Inputs in Service-Cards: exakt gleiche Größe ─────────── */
+.wbf-profile-card .wbf-svc-list input[type="text"] {
+ height: 34px !important;
+ min-height: 34px !important;
+ max-height: 34px !important;
+ padding: 0 .7rem !important;
+ font-size: .82rem !important;
+ font-family: inherit !important;
+ background: var(--c-bg2) !important;
+ border: 1.5px solid var(--c-border-d) !important;
+ border-radius: 6px !important;
+ color: var(--c-text) !important;
+ box-sizing: border-box !important;
+ width: 155px !important;
+ vertical-align: middle !important;
+ line-height: normal !important;
+}
+.wbf-profile-card .wbf-svc-list input[type="text"]:focus {
+ outline: none !important;
+ border-color: var(--c-primary) !important;
+ box-shadow: 0 0 0 3px rgba(0,180,216,.12) !important;
+}
+.wbf-profile-card .wbf-svc-list input[type="text"]::placeholder {
+ color: var(--c-muted) !important;
+}
+
+/* ─ Inline-Wrappers für Gallerie + Discord ──────────────────────────── */
+.wbf-svc-gallery-actions,
+.wbf-svc-discord-inline {
+ display: flex !important;
+ align-items: center !important;
+ gap: .4rem !important;
+ flex-wrap: nowrap !important;
+}
+
+/* ─ Gallerie Label-Text ausblenden, Input sichtbar lassen ───────────── */
+.wbf-svc-gallery-actions > p,
+.wbf-svc-gallery-actions p:not(:has(input)),
+.wbf-svc-gallery-actions label:not(:has(input)) {
+ display: none !important;
+}
+.wbf-svc-gallery-actions label:has(input) {
+ display: inline-flex !important;
+ align-items: center !important;
+ gap: .4rem !important;
+ margin: 0 !important;
+ font-size: 0 !important;
+ color: transparent !important;
+}
+.wbf-svc-gallery-actions label:has(input) input {
+ font-size: .82rem !important;
+ color: var(--c-text) !important;
+}
+
+/* ── Discord send-code Button direkt fixieren ──────────────────────── */
+#wbf-discord-send-code,
+#wbf-discord-relink,
+#wbf-mc-gen-btn,
+#wbf-mc-unlink-btn {
+ height: 34px !important;
+ min-height: 34px !important;
+ max-height: 34px !important;
+ padding-top: 0 !important;
+ padding-bottom: 0 !important;
+ line-height: 1 !important;
+ overflow: hidden !important;
+ box-sizing: border-box !important;
+}
+/* Icons in svc-buttons nicht größer als nötig */
+.wbf-profile-card .wbf-svc-list button i,
+.wbf-profile-card .wbf-svc-list .wbf-btn i {
+ font-size: .8rem !important;
+ line-height: 1 !important;
+ flex-shrink: 0 !important;
}
\ No newline at end of file
diff --git a/assets/js/forum-script.js b/assets/js/forum-script.js
index a43b597..db38036 100644
--- a/assets/js/forum-script.js
+++ b/assets/js/forum-script.js
@@ -634,11 +634,11 @@
// Sofort-Vorschau
var objectUrl = URL.createObjectURL(file);
var $wrap = $('#wbfProfileBannerWrap');
- var $existing = $wrap.find('.wbf-profile-banner__img');
+ var $existing = $wrap.find('.wbf-pv-banner__img');
// Falls noch kein Banner-Bild existiert, eins einfügen
if ($existing.length === 0) {
- $wrap.prepend('
');
+ $wrap.prepend('');
} else {
$existing.attr('src', objectUrl).css('opacity', '.4');
}
@@ -655,7 +655,7 @@
processData: false,
contentType: false,
success: function (res) {
- var $img = $wrap.find('.wbf-profile-banner__img');
+ var $img = $wrap.find('.wbf-pv-banner__img');
if (res.success) {
URL.revokeObjectURL(objectUrl);
$img.attr('src', res.data.banner_url + '?v=' + Date.now());
@@ -663,7 +663,7 @@
$img.css('opacity', '');
},
error: function () {
- $wrap.find('.wbf-profile-banner__img').css('opacity', '');
+ $wrap.find('.wbf-pv-banner__img').css('opacity', '');
}
});
});
@@ -1218,6 +1218,17 @@
url = base + sep + 'forum_thread=' + n.thread_id;
text = actor + ' hat deinen Beitrag geliket';
sub = n.thread_title || '';
+ } else if (n.type === 'plugin_update') {
+ url = n.plugin_url || base;
+ var versionStr = n.plugin_version ? ' auf v' + $('').text(n.plugin_version).html() + '' : '';
+ var pluginName = $('').text(n.plugin_title || 'Plugin').html();
+ text = '' + pluginName + ' wurde aktualisiert' + versionStr;
+ sub = 'Plugin-Update · Beobachtungsliste';
+ if (n.plugin_thumb) {
+ avatar = '
';
+ } else {
+ avatar = '
';
+ }
} else {
// reply (default)
url = base + sep + 'forum_thread=' + n.thread_id;
@@ -2265,7 +2276,7 @@
$btn.prop('disabled', false).html(' Code senden');
if (res.success) {
wbfDcMsg(' ' + (res.data.message || 'Code gesendet!'), '#16a34a');
- $('#wbf-dc-step1').slideUp(200, function () { $('#wbf-dc-step2').slideDown(200); });
+ $('#wbf-dc-step1-inline').slideUp(150); $('#wbf-dc-step2').slideDown(200);
$('#wbf-discord-code-input').val('').focus();
wbfDcStep = 2;
} else {
@@ -2323,7 +2334,7 @@
// „Zurück" in Schritt 2
$(document).on('click', '#wbf-discord-code-back', function () {
- $('#wbf-dc-step2').slideUp(200, function () { $('#wbf-dc-step1').slideDown(200); });
+ $('#wbf-dc-step2').slideUp(200); $('#wbf-dc-step1-inline').slideDown(150);
wbfDcMsg('');
wbfDcStep = 1;
});