Skip to Content

Changes for page Public Web Site

Last modified by Agnease on 2026/06/24 15:34
From version 22.1
edited by Agnease
on 2026/06/23 12:06
Change comment: Rollback to version 20.11
To version 24.2
edited by Agnease
on 2026/06/24 14:25
Change comment: There is no comment for this version

Summary

Details

XWiki.StyleSheetExtension[0]
code
... ... @@ -1233,8 +1233,8 @@
1233 1233  
1234 1234  .product-layout {
1235 1235   display: grid;
1236 - grid-template-columns: 1.1fr .9fr;
1237 - grid-gap: 36px;
1236 + grid-template-columns: minmax(0, 1.12fr) minmax(280px, .88fr);
1237 + grid-gap: 32px;
1238 1238   max-width: 1040px;
1239 1239   margin: 0 auto;
1240 1240   align-items: start;
... ... @@ -1242,6 +1242,7 @@
1242 1242  
1243 1243  .product-summary-card,
1244 1244  .product-info-card,
1245 +.product-feature,
1245 1245  .product-gallery-panel {
1246 1246   background: #fff;
1247 1247   border: 1px solid @line;
... ... @@ -1250,16 +1250,18 @@
1250 1250  }
1251 1251  
1252 1252  .product-summary-card {
1253 - padding: 26px;
1254 + padding: 28px;
1254 1254  
1255 1255   h2 {
1256 1256   text-align: left;
1257 1257   margin-top: 0;
1259 + margin-bottom: 14px;
1260 + line-height: 1.25;
1258 1258   }
1259 1259  
1260 1260   p {
1261 1261   color: @muted;
1262 - line-height: 1.6;
1265 + line-height: 1.62;
1263 1263   }
1264 1264  
1265 1265   p:last-child {
... ... @@ -1268,13 +1268,19 @@
1268 1268  }
1269 1269  
1270 1270  .product-info-card {
1271 - padding: 22px;
1274 + padding: 24px;
1272 1272  
1273 1273   h3 {
1274 1274   margin-top: 0;
1275 1275   margin-bottom: 12px;
1279 + line-height: 1.3;
1276 1276   }
1277 1277  
1282 + p {
1283 + color: @muted;
1284 + line-height: 1.55;
1285 + }
1286 +
1278 1278   ul {
1279 1279   margin: 0;
1280 1280   padding-left: 20px;
... ... @@ -1287,21 +1287,26 @@
1287 1287   }
1288 1288  }
1289 1289  
1299 +.product-card-note {
1300 + margin: 0 0 14px;
1301 + color: @muted;
1302 + line-height: 1.55;
1303 +}
1304 +
1290 1290  .product-feature-grid {
1291 1291   display: grid;
1292 1292   grid-template-columns: repeat(3, minmax(0, 1fr));
1293 - grid-gap: 18px;
1308 + grid-gap: 20px;
1294 1294   max-width: 1040px;
1295 - margin: 22px auto 0;
1310 + margin: 24px auto 0;
1296 1296  }
1297 1297  
1298 1298  .product-feature {
1299 - background: #fff;
1300 - border: 1px solid @line;
1301 - border-radius: @radius;
1302 - box-shadow: @shadow-sm;
1303 - padding: 22px;
1314 + padding: 24px;
1315 + min-width: 0;
1316 + min-height: 100%;
1304 1304  
1318 + .card-heading,
1305 1305   .feature-heading {
1306 1306   display: flex;
1307 1307   align-items: center;
... ... @@ -1332,10 +1332,65 @@
1332 1332   p {
1333 1333   margin: 0;
1334 1334   color: @muted;
1335 - line-height: 1.5;
1349 + line-height: 1.52;
1336 1336   }
1337 1337  }
1338 1338  
1353 +.product-gallery-caption {
1354 + max-width: 820px;
1355 + margin: 28px auto 12px;
1356 + color: @muted;
1357 + font-size: 14px;
1358 + line-height: 1.5;
1359 + text-align: center;
1360 +}
1361 +
1362 +/* Keep the default XWiki gallery behavior.
1363 + Only center it and make its corners match the product cards. */
1364 +.gallery.xGallery {
1365 + float: none;
1366 + display: block;
1367 + margin-left: auto !important;
1368 + margin-right: auto !important;
1369 + border-radius: @radius;
1370 + overflow: hidden;
1371 +}
1372 +
1373 +.gallery.xGallery .galleria-container,
1374 +.gallery.xGallery .galleria-stage,
1375 +.gallery.xGallery img {
1376 + border-radius: @radius;
1377 +}
1378 +
1379 +.product-section-muted {
1380 + background:
1381 + radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 65%);
1382 +}
1383 +
1384 +/* Compact process list when used inside a product card. */
1385 +.product-summary-card .process-list {
1386 + margin-top: 16px;
1387 +
1388 + li {
1389 + padding: 13px 14px 13px 50px;
1390 + margin-bottom: 10px;
1391 + box-shadow: none;
1392 + }
1393 +
1394 + li:before {
1395 + left: 14px;
1396 + top: 14px;
1397 + width: 24px;
1398 + height: 24px;
1399 + font-size: 12px;
1400 + }
1401 +
1402 + strong {
1403 + margin-bottom: 2px;
1404 + }
1405 +}
1406 +
1407 +/* Kept for older product pages that still use a screenshot placeholder/panel. */
1339 1339  .product-gallery-panel {
1340 1340   max-width: 1040px;
1341 1341   margin: 20px auto 0;
... ... @@ -1368,11 +1368,6 @@
1368 1368   justify-content: center;
1369 1369  }
1370 1370  
1371 -.product-section-muted {
1372 - background:
1373 - radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 65%);
1374 -}
1375 -
1376 1376  @media (max-width: 980px) {
1377 1377   .product-layout,
1378 1378   .product-feature-grid {
... ... @@ -1401,6 +1401,28 @@
1401 1401   .product-gallery-panel {
1402 1402   padding: 20px;
1403 1403   }
1468 +
1469 + .product-feature {
1470 + .card-heading,
1471 + .feature-heading {
1472 + gap: 12px;
1473 + }
1474 +
1475 + .feature-icon {
1476 + width: 42px;
1477 + height: 42px;
1478 + font-size: 16px;
1479 + }
1480 + }
1481 +
1482 + .product-gallery-caption {
1483 + margin-top: 22px;
1484 + padding: 0 14px;
1485 + }
1486 +
1487 + .product-summary-card .process-list li {
1488 + padding-left: 46px;
1489 + }
1404 1404  }
1405 1405  
1406 1406  /* ========== Resources Index ========== */