/* * Steigerwald-News Widget — admin builder styles. * Integrates with the WordPress admin look & feel. */ .snw-wrap { max-width: 1200px; } .snw-intro { max-width: 720px; color: #50575e; } .snw-builder { --snw-bottom-gap: 24px; position: relative; display: grid; grid-template-columns: minmax(320px, 1fr) minmax(360px, 1.3fr); gap: 24px; align-items: start; margin-top: 16px; } /* Public builder breaks out of the theme's content column to use the full page width. The JS sets an exact innerWidth-based width to avoid the 100vw scrollbar overflow; this is the CSS fallback. */ .snw-builder--public { width: 100vw; margin-left: calc(50% - 50vw); box-sizing: border-box; padding: 24px 32px; } /* Let position:sticky pin to the viewport on the public builder page. The theme sets body{overflow:hidden} (both axes), which turns into a scroll container that is NOT the actual scroller ( is) and silently breaks sticky. Resetting it lets be the scroller. overflow-x: clip still contains the full-bleed width without a horizontal scrollbar. */ /* Match the theme's `body:not(.woocommerce-page).cm-normal-container` specificity (it forces overflow:hidden, which breaks position:sticky) and override it so stays the scroller and the preview can pin to the viewport. */ body:not(.woocommerce-page).cm-normal-container.snw-builder-page { overflow-x: clip; overflow-y: visible; } @media (max-width: 900px) { .snw-builder { grid-template-columns: 1fr; } } .snw-card { background: #fff; border: 1px solid #c3c4c7; border-radius: 4px; padding: 16px 18px; margin: 0; } .snw-card h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 12px; padding: 0; color: #1d2327; } .snw-card label, .snw-card > label { display: block; font-weight: 600; margin: 12px 0 4px; } .snw-card input[type="text"]:not(.snw-token__input), .snw-card input[type="url"]:not(.snw-token__input), .snw-card input[type="email"]:not(.snw-token__input), .snw-card input[type="number"]:not(.snw-token__input), .snw-card select, .snw-card textarea { width: 100%; max-width: 420px; padding: 6px 8px; border: 1px solid #8c8f94; border-radius: 4px; background: #fff; color: #2c3338; box-shadow: none; } .snw-card textarea { max-width: 100%; resize: vertical; } .snw-card input[type="text"]:not(.snw-token__input):focus, .snw-card input[type="url"]:not(.snw-token__input):focus, .snw-card input[type="email"]:not(.snw-token__input):focus, .snw-card input[type="number"]:not(.snw-token__input):focus, .snw-card select:focus, .snw-card textarea:focus { border-color: #2271b1; box-shadow: 0 0 0 1px #2271b1; outline: none; } .snw-card .description { margin: 4px 0 0; color: #646970; font-size: 12px; } .snw-checkboxes { border: 0; margin: 12px 0 0; padding: 0; } .snw-checkboxes legend { font-weight: 600; margin-bottom: 6px; padding: 0; } .snw-checkboxes label { display: inline-block; width: auto; margin: 0 12px 6px 0; font-weight: 400; } .snw-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 14px; margin-top: 8px; } .snw-color { display: flex; align-items: center; gap: 6px; font-size: 12px; } .snw-color__input { width: 60px !important; } .snw-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; } .snw-status { font-size: 13px; color: #007a3e; } .snw-status--error { color: #d63638; } /* Token / tag input */ .snw-token { position: relative; border: 1px solid #8c8f94; border-radius: 4px; padding: 6px; background: #fff; } .snw-token__input { width: 100%; border: 0 !important; box-shadow: none !important; } .snw-token__list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .snw-token__chip { background: #f0f0f1; border: 1px solid #c3c4c7; border-radius: 12px; padding: 2px 6px 2px 10px; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; } .snw-token__chip button { border: 0; background: transparent; cursor: pointer; color: #50575e; font-size: 14px; line-height: 1; } .snw-token__results, .snw-results { list-style: none; margin: 4px 0 0; padding: 0; max-height: 200px; overflow-y: auto; border: 1px solid #c3c4c7; border-radius: 4px; background: #fff; } .snw-token__results li, .snw-results li { padding: 6px 10px; cursor: pointer; border-bottom: 1px solid #f0f0f1; } .snw-token__results li:hover, .snw-results li:hover { background: #f6f7f7; } .snw-token__results small, .snw-results small { color: #787c82; } .snw-selected { list-style: none; margin: 8px 0 0; padding: 0; } .snw-sel-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin-bottom: 6px; background: #fff; border: 1px solid #c3c4c4; border-radius: 4px; cursor: grab; } .snw-sel-item:active { cursor: grabbing; } .snw-sel-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .snw-sel-date { color: #787c82; font-size: 12px; } .snw-sel-up, .snw-sel-down, .snw-sel-rm { border: 1px solid #c3c4c7; background: #f6f7f7; cursor: pointer; border-radius: 3px; width: 24px; height: 24px; line-height: 1; } /* Editor (left): normal document flow. It is the taller column and simply scrolls with the page — no sticky, no internal scroll surface of its own. */ .snw-builder__config { display: grid; gap: 16px; } /* Preview (right): a smart sticky sidebar. It flows with the page and scrolls together with the editor until its lower edge reaches the bottom of the viewport; it then docks there and stays visible while the taller editor continues. Scrolling back up releases it so it travels up with the content again. There is ONE page scrollbar; the preview panel itself moves relative to the viewport and its content never scrolls internally. Native position:sticky;bottom is unreliable in this theme, so admin.js sets the emulated top offset (viewport height - preview height - gap). --snw-bottom-gap reserves viewport spacing so the docked panel does not sit flush to the edge. */ .snw-builder__preview { position: sticky; align-self: start; } .snw-preview-head { padding: 0 0 8px; border-bottom: 1px solid #f0f0f1; } /* On small screens the two columns stack. Drop the sticky/scroll-cap so the workspace flows naturally instead of forcing a 50/50 pinned layout. */ @media (max-width: 900px) { .snw-builder__config, .snw-builder__preview { position: static; max-height: none; overflow: visible; } .snw-preview-head { position: static; border-bottom: 0; } } /* The preview is a plain sticky sidebar (docked to the screen) with its NATURAL height — it is exactly as tall as the live widget. There is NO internal scroll area: when the widget fits the screen it shows fully, and when it is taller the column simply scrolls with the page while the preview stays pinned (like the admin dashboard). No cramped scroll boxes. */ /* Public builder: behaves like the admin dashboard — the page scrolls normally and the preview column is sticky (pinned) so you don't lose it while configuring. The preview frame itself scrolls internally when its content is taller than the viewport (its "own scroll area"). No cramped two-pane boxes. */ .snw-preview-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .snw-preview-toolbar label { font-weight: 600; } .snw-preview-frame { background: #fff; border: 1px solid #c3c4c7; border-radius: 4px; padding: 16px; min-height: 240px; max-width: none; } /* Admin preview: the preview frame is narrow, so the responsive column caps from widget.css would always collapse to a single column and make the "Artikel pro Reihe" control look dead. Show the configured column count here; real embeds keep the responsive behaviour. */ .steigerwald-news-widget.snw-preview[data-layout="grid"] .snw-list, .steigerwald-news-widget.snw-preview[data-layout="cards"] .snw-list { grid-template-columns: repeat(var(--snw-columns, 2), minmax(0, 1fr)) !important; } .snw-preset-table td, .snw-preset-table th { vertical-align: middle; } .snw-preset-table .snw-preset-actions .button { margin: 0 2px 4px 0; } .snw-advanced summary { cursor: pointer; font-weight: 600; } .snw-help { background: #fff; border: 1px solid #c3c4c7; border-radius: 4px; padding: 12px 18px; } .snw-help summary { cursor: pointer; font-weight: 600; } /* Orientation steps under the intro */ .snw-steps { max-width: 720px; margin: 8px 0 0; padding: 10px 14px; background: #fff; border-left: 4px solid #c59a20; border-radius: 2px; color: #1d2327; font-size: 13px; } /* In-page section navigation (sticky) */ .snw-section-nav { position: sticky; top: 32px; z-index: 6; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; background: #f6f7f7; border: 1px solid #c3c4c7; border-radius: 4px; margin-bottom: 4px; } .snw-section-nav a { display: inline-block; padding: 4px 11px; border-radius: 14px; background: #fff; border: 1px solid #c3c4c7; color: #1d2327; text-decoration: none; font-size: 12px; font-weight: 600; } .snw-section-nav a:hover, .snw-section-nav a:focus { background: #007cba; border-color: #007cba; color: #fff; } .snw-card, .snw-builder__preview { scroll-margin-top: 48px; } .snw-builder { scroll-behavior: smooth; } /* Inline hints */ .snw-mode-hint, .snw-field-hint { margin: 6px 0 0; color: #646970; font-size: 12px; font-style: italic; } /* Collapsible design sub-sections */ .snw-fieldset { border: 0; border-top: 1px solid #c3c4c7; margin: 14px 0 0; padding: 0; } .snw-fieldset > summary { font-weight: 600; cursor: pointer; padding: 10px 0; list-style: none; display: flex; align-items: center; } .snw-fieldset > summary::-webkit-details-marker { display: none; } .snw-fieldset > summary::before { content: "\25BE"; margin-right: 8px; transition: transform .15s ease; } .snw-fieldset:not([open]) > summary::before { transform: rotate(-90deg); } /* Sticky save / action bar */ .snw-actions { position: sticky; bottom: 12px; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; padding: 12px; background: #fff; border: 1px solid #c3c4c7; border-radius: 4px; box-shadow: 0 2px 10px rgba(0, 0, 0, .10); } /* Visual layout picker */ .snw-layout-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin: 4px 0 0; } .snw-layout-opt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 6px; background: #fff; border: 1px solid #c3c4c7; border-radius: 6px; cursor: pointer; font-size: 12px; color: #1d2327; } .snw-layout-opt:hover { border-color: #007cba; } .snw-layout-opt.is-active { border-color: #007cba; box-shadow: 0 0 0 1px #007cba; background: #f0f7fb; } .snw-layout-name { font-weight: 600; } .snw-layout-thumb { display: block; width: 48px; height: 34px; border: 1px solid #c3c4c7; border-radius: 3px; background: #f6f7f7; background-repeat: no-repeat; } .snw-thumb-grid { background-image: linear-gradient(#8c8f94 0 0), linear-gradient(#8c8f94 0 0), linear-gradient(#8c8f94 0 0), linear-gradient(#8c8f94 0 0); background-size: 44% 44%; background-position: 8% 12%, 54% 12%, 8% 56%, 54% 56%; } .snw-thumb-list { background-image: linear-gradient(#8c8f94 0 0), linear-gradient(#c3c4c7 0 0), linear-gradient(#8c8f94 0 0), linear-gradient(#c3c4c7 0 0); background-size: 26% 40%, 60% 10%, 26% 40%, 60% 10%; background-position: 8% 15%, 40% 22%, 8% 60%, 40% 67%; } .snw-thumb-cards { box-shadow: inset 0 0 0 1px #8c8f94; background-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0), linear-gradient(#fff 0 0), linear-gradient(#fff 0 0); background-size: 44% 44%; background-position: 8% 12%, 54% 12%, 8% 56%, 54% 56%; } .snw-thumb-compact { background-image: linear-gradient(#8c8f94 0 0), linear-gradient(#c3c4c7 0 0), linear-gradient(#c3c4c7 0 0); background-size: 70% 14%, 80% 14%, 80% 14%; background-position: 15% 20%, 10% 50%, 10% 76%; } .snw-thumb-headlines { background-image: radial-gradient(circle, #c59a20 38%, transparent 42%), linear-gradient(#8c8f94 0 0), radial-gradient(circle, #c59a20 38%, transparent 42%), linear-gradient(#c3c4c7 0 0); background-size: 10% 22%, 75% 12%, 10% 22%, 75% 12%; background-position: 10% 22%, 28% 24%, 10% 64%, 28% 66%; } /* Segmented control (theme) */ .snw-segmented { display: inline-flex; border: 1px solid #c3c4c7; border-radius: 4px; overflow: hidden; margin: 4px 0 0; } .snw-seg-opt { padding: 6px 16px; background: #fff; border: 0; border-right: 1px solid #c3c4c7; cursor: pointer; font-size: 13px; font-weight: 600; color: #1d2327; } .snw-seg-opt:last-child { border-right: 0; } .snw-seg-opt.is-active { background: #007cba; color: #fff; } /* Live preview indicator */ .snw-live-badge { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; padding: 2px 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #007a3e; background: #e6f4ea; border: 1px solid #9dd9b3; border-radius: 10px; vertical-align: middle; } .snw-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #00a32a; animation: snw-pulse 1.6s ease-in-out infinite; } @keyframes snw-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } /* ---- Dashboard ---- */ .snw-quick { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 22px; } .snw-dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; } .snw-stat-card { background: #fff; border: 1px solid #c3c4c7; border-radius: 8px; padding: 18px 20px; } .snw-stat-num { font-size: 32px; font-weight: 600; line-height: 1.1; } .snw-stat-label { margin-top: 4px; color: #646970; } .snw-dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } @media (max-width: 900px) { .snw-dash-cols { grid-template-columns: 1fr; } } .snw-dash-list { list-style: none; margin: 0; padding: 0; } .snw-dash-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #f0f0f1; } .snw-dash-list li:last-child { border-bottom: none; } .snw-badge { display: inline-block; font-size: 11px; padding: 2px 9px; border-radius: 10px; background: #f0f0f1; color: #50575e; white-space: nowrap; } .snw-badge-pending { background: #fff4e5; color: #996800; } .snw-badge-accepted { background: #e5f5e0; color: #1a6b2e; } .snw-bar-row { display: flex; align-items: center; gap: 8px; margin: 7px 0; } .snw-bar-label { width: 130px; font-size: 12px; color: #50575e; flex: none; } .snw-bar-track { flex: 1; background: #f0f0f1; border-radius: 4px; height: 10px; overflow: hidden; } .snw-bar-fill { height: 100%; background: #c59a20; border-radius: 4px; } .snw-bar-val { width: 26px; text-align: right; font-size: 12px; color: #50575e; } /* ===== Public 4-step creator ===== */ .snw-builder--public .snw-admin-only { display: none !important; } /* Step sections (1 Inhalte · 2 Darstellung · 3 Design · 4 Anfragen) */ .snw-step { scroll-margin-top: 48px; } .snw-step__head { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; } .snw-step__num { flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #c59a20; color: #fff; font-weight: 700; font-size: 14px; } .snw-step__head h2 { margin: 0; font-size: 18px; } .snw-step__lead { margin: 0 0 12px; color: #50575e; font-size: 14px; } .snw-optional { color: #8c8f94; font-weight: 400; } /* Make the layout picker more prominent on the public creator */ .snw-builder--public .snw-layout-picker { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); } .snw-builder--public .snw-layout-thumb { width: 64px; height: 46px; } /* Step 4: request — visually separated from the builder */ .snw-request__card { border-color: #c59a20; box-shadow: inset 0 2px 0 #c59a20; } .snw-request__lead { margin: 0 0 14px; color: #50575e; font-size: 14px; } .snw-request-btn { width: 100%; margin-top: 6px; padding: 12px 16px; font-size: 15px; text-align: center; } .snw-request__note { margin: 12px 0 0; color: #646970; font-size: 12px; } .snw-request .snw-status { margin-top: 8px; } /* Compact the public creator's Design step (less vertical waste). */ .snw-builder--public .snw-step .snw-card { padding: 14px 16px; } .snw-builder--public .snw-step .snw-card > label { margin: 9px 0 3px; } .snw-builder--public .snw-step .snw-card > label:first-child { margin-top: 0; } .snw-builder--public .snw-checkboxes { margin-top: 8px; } .snw-builder--public .snw-fieldset { margin-top: 8px; } .snw-builder--public .snw-fieldset > summary { padding: 7px 0; } .snw-builder--public .snw-layout-picker { margin-top: 2px; } /* Keep the "Weitere Designoptionen" / "Weitere Farben" internals tight. */ .snw-builder--public #snw-more-design label, .snw-builder--public #snw-more-colors label { margin: 8px 0 3px; } .snw-builder--public #snw-image-options label { margin: 8px 0 3px; } /* WordPress dashboard widget (compact analytics KPI summary). */ #snw_dashboard_widget .snw-dash-widget { margin: 0 -12px -12px; padding: 4px 12px 14px; container-type: inline-size; } #snw_dashboard_widget .snw-dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 6px 0 4px; } @container (max-width: 260px) { #snw_dashboard_widget .snw-dash-grid { grid-template-columns: 1fr; } } #snw_dashboard_widget .snw-dash-stat { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; background: #fff; border: 1px solid #e2e4e7; border-radius: 8px; padding: 10px 10px 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } #snw_dashboard_widget .snw-dash-stat__icon { font-size: 15px; line-height: 1; color: #8c8f94; margin-bottom: 2px; } #snw_dashboard_widget .snw-dash-stat__num { font-size: 24px; font-weight: 700; color: #1d2327; line-height: 1.1; } #snw_dashboard_widget .snw-dash-stat__label { font-size: 11px; color: #646970; line-height: 1.25; overflow-wrap: anywhere; } #snw_dashboard_widget .snw-dash-stat--accent { background: #f6fafd; border-color: #cfe3f3; } #snw_dashboard_widget .snw-dash-stat--accent .snw-dash-stat__num { color: #2271b1; } #snw_dashboard_widget .snw-dash-stat--alert .snw-dash-stat__num { color: #b26200; } #snw_dashboard_widget .snw-dash-stat__dot { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: #db8a00; box-shadow: 0 0 0 3px rgba(219, 138, 0, 0.15); } #snw_dashboard_widget .snw-dash-ctr { margin: 2px 2px 8px; font-size: 11px; color: #646970; text-align: right; } #snw_dashboard_widget .snw-dash-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; } #snw_dashboard_widget .snw-dash-actions .button { flex: 1 1 0; min-width: 0; margin: 0; text-align: center; justify-content: center; } #snw_dashboard_widget .snw-dash-foot { margin: 0; padding-top: 8px; border-top: 1px solid #f0f0f1; font-size: 11px; color: #a7aaad; text-align: center; } #snw_dashboard_widget .snw-dash-foot a { color: #a7aaad; text-decoration: none; } #snw_dashboard_widget .snw-dash-foot a:hover { color: #787c82; text-decoration: underline; } /* Settings page (global branding). */ .snw-branding-preview-wrap { margin-top: 18px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .snw-branding-preview-wrap .description { color: #646970; } #snw-branding-preview { display: inline-block; padding: 12px 14px; border: 1px dashed #c3c4c7; border-radius: 8px; background: #fff; } .snw-msg { margin-left: 10px; font-weight: 600; } .snw-msg--ok { color: #1a7f37; } .snw-msg--err { color: #d63638; }