Skip to Content

Changes for page Public Web Site

Last modified by Agnease on 2026/06/24 15:34
From version 21.3
edited by Agnease
on 2026/06/23 08:37
Change comment: There is no comment for this version
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
... ... @@ -996,6 +996,45 @@
996 996   }
997 997  }
998 998  
999 +.resource-note.related-resources {
1000 + p {
1001 + margin-bottom: 10px;
1002 + }
1003 +
1004 + ul {
1005 + margin: 0;
1006 + padding-left: 20px;
1007 + }
1008 +
1009 + li {
1010 + margin: 6px 0;
1011 + color: @muted;
1012 + }
1013 +}
1014 +
1015 +.resource-faq-item {
1016 + display: flow-root;
1017 + border-bottom: 1px solid @line;
1018 + padding: 12px 0;
1019 +
1020 + summary {
1021 + cursor: pointer;
1022 + font-weight: 700;
1023 + color: @text;
1024 + line-height: 1.4;
1025 + }
1026 +
1027 + summary:hover,
1028 + summary:focus {
1029 + color: @brand-strong;
1030 + }
1031 +
1032 + p {
1033 + margin: 10px 0 4px;
1034 + color: @muted;
1035 + }
1036 +}
1037 +
999 999  .resource-checklist {
1000 1000   margin: 18px 0 24px;
1001 1001   padding: 0;
... ... @@ -1194,8 +1194,8 @@
1194 1194  
1195 1195  .product-layout {
1196 1196   display: grid;
1197 - grid-template-columns: 1.1fr .9fr;
1198 - grid-gap: 36px;
1236 + grid-template-columns: minmax(0, 1.12fr) minmax(280px, .88fr);
1237 + grid-gap: 32px;
1199 1199   max-width: 1040px;
1200 1200   margin: 0 auto;
1201 1201   align-items: start;
... ... @@ -1212,16 +1212,18 @@
1212 1212  }
1213 1213  
1214 1214  .product-summary-card {
1215 - padding: 26px;
1254 + padding: 28px;
1216 1216  
1217 1217   h2 {
1218 1218   text-align: left;
1219 1219   margin-top: 0;
1259 + margin-bottom: 14px;
1260 + line-height: 1.25;
1220 1220   }
1221 1221  
1222 1222   p {
1223 1223   color: @muted;
1224 - line-height: 1.6;
1265 + line-height: 1.62;
1225 1225   }
1226 1226  
1227 1227   p:last-child {
... ... @@ -1230,13 +1230,19 @@
1230 1230  }
1231 1231  
1232 1232  .product-info-card {
1233 - padding: 22px;
1274 + padding: 24px;
1234 1234  
1235 1235   h3 {
1236 1236   margin-top: 0;
1237 1237   margin-bottom: 12px;
1279 + line-height: 1.3;
1238 1238   }
1239 1239  
1282 + p {
1283 + color: @muted;
1284 + line-height: 1.55;
1285 + }
1286 +
1240 1240   ul {
1241 1241   margin: 0;
1242 1242   padding-left: 20px;
... ... @@ -1250,23 +1250,26 @@
1250 1250  }
1251 1251  
1252 1252  .product-card-note {
1253 - margin: 0 0 12px;
1300 + margin: 0 0 14px;
1254 1254   color: @muted;
1255 - line-height: 1.5;
1302 + line-height: 1.55;
1256 1256  }
1257 1257  
1258 1258  .product-feature-grid {
1259 1259   display: grid;
1260 1260   grid-template-columns: repeat(3, minmax(0, 1fr));
1261 - grid-gap: 18px;
1308 + grid-gap: 20px;
1262 1262   max-width: 1040px;
1263 - margin: 22px auto 0;
1310 + margin: 24px auto 0;
1264 1264  }
1265 1265  
1266 1266  .product-feature {
1267 - padding: 22px;
1314 + padding: 24px;
1315 + min-width: 0;
1316 + min-height: 100%;
1268 1268  
1269 - .card-heading {
1318 + .card-heading,
1319 + .feature-heading {
1270 1270   display: flex;
1271 1271   align-items: center;
1272 1272   gap: 14px;
... ... @@ -1296,12 +1296,12 @@
1296 1296   p {
1297 1297   margin: 0;
1298 1298   color: @muted;
1299 - line-height: 1.5;
1349 + line-height: 1.52;
1300 1300   }
1301 1301  }
1302 1302  
1303 1303  .product-gallery-caption {
1304 - max-width: 860px;
1354 + max-width: 820px;
1305 1305   margin: 28px auto 12px;
1306 1306   color: @muted;
1307 1307   font-size: 14px;
... ... @@ -1312,6 +1312,8 @@
1312 1312  /* Keep the default XWiki gallery behavior.
1313 1313   Only center it and make its corners match the product cards. */
1314 1314  .gallery.xGallery {
1365 + float: none;
1366 + display: block;
1315 1315   margin-left: auto !important;
1316 1316   margin-right: auto !important;
1317 1317   border-radius: @radius;
... ... @@ -1319,16 +1319,22 @@
1319 1319  }
1320 1320  
1321 1321  .gallery.xGallery .galleria-container,
1322 -.gallery.xGallery .galleria-stage {
1374 +.gallery.xGallery .galleria-stage,
1375 +.gallery.xGallery img {
1323 1323   border-radius: @radius;
1324 - overflow: hidden;
1325 1325  }
1326 1326  
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. */
1327 1327  .product-summary-card .process-list {
1328 1328   margin-top: 16px;
1329 1329  
1330 1330   li {
1331 - padding: 12px 14px 12px 50px;
1389 + padding: 13px 14px 13px 50px;
1332 1332   margin-bottom: 10px;
1333 1333   box-shadow: none;
1334 1334   }
... ... @@ -1335,7 +1335,7 @@
1335 1335  
1336 1336   li:before {
1337 1337   left: 14px;
1338 - top: 13px;
1396 + top: 14px;
1339 1339   width: 24px;
1340 1340   height: 24px;
1341 1341   font-size: 12px;
... ... @@ -1346,11 +1346,7 @@
1346 1346   }
1347 1347  }
1348 1348  
1349 -.product-section-muted {
1350 - background:
1351 - radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 65%);
1352 -}
1353 -
1407 +/* Kept for older product pages that still use a screenshot placeholder/panel. */
1354 1354  .product-gallery-panel {
1355 1355   max-width: 1040px;
1356 1356   margin: 20px auto 0;
... ... @@ -1412,6 +1412,19 @@
1412 1412   padding: 20px;
1413 1413   }
1414 1414  
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 +
1415 1415   .product-gallery-caption {
1416 1416   margin-top: 22px;
1417 1417   padding: 0 14px;