diff --git a/assets/widgets/frontend.css b/assets/widgets/frontend.css index cd67ceb8..5df1d1cc 100644 --- a/assets/widgets/frontend.css +++ b/assets/widgets/frontend.css @@ -63,31 +63,11 @@ .aksrt-widget-quote blockquote { margin: 12px 0 0; font-size: 16px; line-height: 1.8; } .aksrt-widget-quote button { position: absolute; right: 13px; bottom: 13px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; cursor: pointer; } -/* Zibll icon-card contracts (vertical + horizontal variants). */ -.icon-card { max-width:280px; margin-left:auto; margin-right:auto; text-align:center; color:var(--main-color,#333); } -.icon-card .card-icon { display:inline-block; height:1.1em; transition:.3s; } -.icon-card .card-icon.toggle-radius { width:2.2em; height:2.2em; } -.icon-card .toggle-radius .fa { font-size:.9em; } -.icon-card:hover .card-icon { transform:scale(1.05); } -.icon-card .card-icon img, .icon-cover-icon img { width:1em; height:1em; object-fit:contain; vertical-align:middle; } -.icon-cover-card { min-width:0; color:var(--main-color,#333); } -.icon-cover-card .icon-cover-icon { display:inline-flex; align-items:center; justify-content:center; flex:none; } -.icon-cover-card .icon-cover-desc { min-width:0; } -.icon-cover-card .icon-cover-desc > div { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } -.icon-cover-card a, .icon-card a { color:inherit; text-decoration:none; } -.icon-cover-card .font-bold, .icon-card .font-bold { font-weight:700; } -.icon-cover-card .muted-color, .icon-card .muted-color { color:var(--muted-color,#8a8c98); } -.icon-cover-card .badg.cir { border-radius:50%; } -.icon-cover-card .badg.cir.radius4 { border-radius:4px; } -.zib-widget { border-radius:var(--main-radius,8px); background:var(--main-bg-color,#fff); box-shadow:0 0 10px var(--main-shadow,rgba(116,116,116,.08)); } +/* The AKSRT base stylesheet already carries Zibll's icon-card and utility rules. + * Restore the one renamed primitive used verbatim by these two widget renderers. */ +.zib-widget { clear:both; margin-bottom:20px; padding:15px; border-radius:var(--main-radius,8px); background:var(--main-bg-color,#fff); box-shadow:0 0 10px var(--main-shadow,rgba(116,116,116,.08)); } .zib-widget.padding-10 { padding:10px; } .zib-widget.nobottom.notop { padding-top:0; padding-bottom:0; } -.row.gutters-5 { margin-left:-2.5px; margin-right:-2.5px; } -.row.gutters-5 > [class*="col-"] { padding-left:2.5px; padding-right:2.5px; } -@media (max-width:767px) { - .icon-card, .icon-cover-card { font-size:12px; } - .icon-cover-card { padding-top:8px; padding-bottom:8px; } -} .aksrt-widget-video { position: relative; overflow: hidden; border-radius: var(--aksrt-widget-radius); background: #000; aspect-ratio: 16 / 9; } .aksrt-widget-video--4-3 { aspect-ratio: 4 / 3; }.aksrt-widget-video--1-1 { aspect-ratio: 1; }.aksrt-widget-video--auto { aspect-ratio: auto; } diff --git a/tests/widget-system/icon-card-contract.test.cjs b/tests/widget-system/icon-card-contract.test.cjs index 2ac5a42c..053fb692 100644 --- a/tests/widget-system/icon-card-contract.test.cjs +++ b/tests/widget-system/icon-card-contract.test.cjs @@ -41,6 +41,20 @@ test('homepage horizontal cards render fully from legacy CSS with no dedicated s assert.doesNotMatch(widgetCss, /aksrt-widget-icon-cards \.icon-cover-card/); }); +test('widget icon cards restore the reference surface height without compact overrides', () => { + const widgetCss = read('assets/widgets/frontend.css'); + + assert.match( + widgetCss, + /\.zib-widget\s*\{[^}]*margin-bottom:\s*20px[^}]*padding:\s*15px[^}]*box-shadow:\s*0 0 10px/s, + ); + assert.match(widgetCss, /\.zib-widget\.padding-10\s*\{\s*padding:\s*10px/); + assert.match(widgetCss, /\.zib-widget\.nobottom\.notop\s*\{[^}]*padding-top:\s*0[^}]*padding-bottom:\s*0/s); + assert.doesNotMatch(widgetCss, /\.row\.gutters-5/); + assert.doesNotMatch(widgetCss, /\.icon-card\s*,\s*\.icon-cover-card\s*\{\s*font-size:\s*12px/); + assert.doesNotMatch(widgetCss, /\.icon-cover-card\s*\{[^}]*padding-(?:top|bottom)/s); +}); + test('header icon-card defaults use bundled Font Awesome icons', () => { const defaults = [ read('src/Admin/Schema/SchemaPageDisplay.php'),