[MERGE] odoo_theme: styling fixes, tweaks, and general cleanup

**Special terms restyling:**
A general restyling of special terms has been made for better legibility
in text, and to differentiate roles (ie: `:command:`,`:file:`,`:dfn:`)
so writers can use these instead of italic and bold styling.
`:guilabel:` has not been changed because its use is too vast.

task-2790284

**Reference pages have a new look:**
`code` elements have been restyled to remove unnecessary spaces (ex:
`odoo.models .BaseModel`. See
https://www.odoo.com/documentation/15.0/developer/reference/backend/orm.html#odoo.models.BaseModel)
and to include visual aid of parent/children relations (left border).

Basic for task-2755298

**URL styling:**
When an image has an external link, the `external-link` icon appears
under the image. This has been removed. URLs with icons such as external
links or "Edit on Github" links have been modified to remove the
underline under the icons. On mobile, long URLs would push the content
outside the viewport. `overflow-wrap: anywhere` has been added to all
URLs on mobile devices.

**No more horizontal scroll on Windows thanks to css grid:**
Windows and Mac don't work the same (no kidding). Windows would add
±`1rem` of horizontal scroll when Mac doesn't. Adding that `1rem` to the
content's `max-width` calculations would make Mac unhappy (it left a
`1rem` gap). The solution for everyone to be happy was to change the
display type to `grid`. By doing this, the max-width calculations and
the left positioning according to the side-nav were not necessary
anymore. Great Success. Very Nice.

**Scrolling To:**
With the new subnav added with commit 10f62b6a, the scroll position was
wrong. This is fixed by changing the padding/margin top values in the
`o-scroll-padding` mixin.

**Replace "Hide Search Matches" with close icon:**
The title says it all.

**Forgotten scrollbar styling**
The scrollbar stylings for the side-nav should have been moved to
`o_side_nav-inner` during the previous restyling of the header.

**Clean up the mess:**
All these changes made me want to clean up a bit. By doing so I realised
that a lot of the utility mixins that were used in the old *old* doc
were still present here, but aren't being used. Same for some variables.
Some stying was using values instead of their variable counterparts, so
these have been replaced.

closes odoo/documentation#2264

Signed-off-by: Antoine Vandevenne (anv) <anv@odoo.com>

extensions/odoo_theme/static/fonts/icomoon.svg

@@ -73,6 +73,7 @@
 <glyph unicode="&#xe93f;" glyph-name="users" d="M512 355.84c-80.495 0-145.749 65.254-145.749 145.749s65.254 145.749 145.749 145.749c80.495 0 145.749-65.254 145.749-145.749 0-0.12 0-0.24 0-0.36v0.019c-0.194-80.348-65.374-145.408-145.749-145.408 0 0 0 0-0.001 0v0zM512 584.533c-0.101 0-0.221 0.001-0.341 0.001-45.243 0-81.92-36.677-81.92-81.92s36.677-81.92 81.92-81.92c45.243 0 81.92 36.676 81.92 81.919v0c0 0 0 0 0 0.001 0 45.123-36.483 81.725-81.56 81.919h-0.018zM512 48.299c-166.912 0-242.347 71.339-245.419 74.411l-9.557 9.216v13.653c-0.001 0.249-0.001 0.544-0.001 0.838 0 88.823 45.479 167.025 114.422 212.588l0.95 0.59c5.573 4.791 12.876 7.708 20.862 7.708 17.72 0 32.085-14.365 32.085-32.085 0-12.909-7.624-24.038-18.615-29.129l-0.198-0.082c-48.611-31.869-81.428-84.377-85.978-144.773l-0.038-0.635c49.99-30.683 110.525-48.856 175.305-48.856 5.692 0 11.351 0.14 16.974 0.418l-0.791-0.031c4.546-0.218 9.875-0.342 15.232-0.342 64.75 0 125.259 18.156 176.714 49.655l-1.482-0.844c-4.752 60.983-37.518 113.431-85.302 144.965l-0.714 0.443c-11.19 5.174-18.814 16.302-18.814 29.212 0 17.72 14.365 32.085 32.085 32.085 7.985 0 15.289-2.917 20.904-7.743l-0.042 0.036c69.893-46.153 115.372-124.354 115.372-213.178 0-0.295-0.001-0.589-0.002-0.884v0.045-13.653l-9.557-9.216c-2.048-3.072-77.483-74.411-244.395-74.411zM254.976 556.544c-80.495 0-145.749 65.254-145.749 145.749s65.254 145.749 145.749 145.749c80.495 0 145.749-65.254 145.749-145.749 0-0.12 0-0.24 0-0.36v0.019c0 0 0 0 0 0 0-80.307-65.101-145.408-145.408-145.408-0.12 0-0.24 0-0.36 0h0.019zM254.976 783.872c-0.101 0-0.221 0.001-0.341 0.001-45.243 0-81.92-36.677-81.92-81.92s36.677-81.92 81.92-81.92c45.243 0 81.92 36.676 81.92 81.919v0c0 0 0 0 0 0.001 0 45.123-36.483 81.725-81.56 81.919h-0.018zM200.704 251.733h-3.413c-71.644 3.816-136.497 30.086-188.367 71.832l0.634-0.493-9.557 9.557v12.971c-0.001 0.249-0.001 0.544-0.001 0.838 0 88.823 45.479 167.025 114.422 212.588l0.95 0.59c4.951 3.282 11.031 5.237 17.567 5.237 11.157 0 20.983-5.694 26.732-14.335l0.074-0.118c2.85-4.879 4.532-10.741 4.532-16.996 0-11.17-5.366-21.087-13.66-27.314l-0.088-0.063c-48.35-32.119-81.049-84.489-85.971-144.721l-0.045-0.687c40.072-24.904 87.931-41.156 139.25-44.994l1.038-0.062c16.031-1.553 28.462-14.957 28.462-31.265 0-1.010-0.048-2.009-0.141-2.994l0.010 0.126c-1.103-16.632-14.864-29.705-31.678-29.705-0.263 0-0.525 0.003-0.787 0.010l0.039-0.001zM769.024 556.544c-0.101 0-0.221 0-0.341 0-80.495 0-145.749 65.254-145.749 145.749s65.254 145.749 145.749 145.749c80.495 0 145.749-65.254 145.749-145.749 0-0.12 0-0.24 0-0.36v0.019c-0.194-80.228-65.179-145.214-145.389-145.408h-0.019zM769.024 783.872c-0.101 0-0.221 0.001-0.341 0.001-45.243 0-81.92-36.677-81.92-81.92s36.677-81.92 81.92-81.92c45.243 0 81.92 36.676 81.92 81.919v0c-0.191 45.046-36.56 81.535-81.542 81.92h-0.037zM823.296 251.733c-16.252 0.793-29.467 12.839-32.058 28.473l-0.027 0.199c-0.049 0.665-0.077 1.44-0.077 2.222 0 16.545 12.523 30.165 28.607 31.899l0.142 0.012c52.182 4.239 99.769 20.704 140.909 46.501l-1.304-0.762c-4.967 60.919-37.666 113.289-85.309 144.966l-0.707 0.442c-11.19 5.174-18.814 16.302-18.814 29.212 0 17.72 14.365 32.085 32.085 32.085 7.985 0 15.289-2.917 20.904-7.743l-0.042 0.036c70.295-46.16 116.134-124.536 116.395-213.635v-13.692l-9.557-9.216c-51.237-41.253-116.090-67.523-186.913-71.304l-0.82-0.035z" />
 <glyph unicode="&#xe940;" glyph-name="external-link" d="M851.627 475.307c-18.773 0-34.133-15.36-34.133-34.133v-400.725c0-19.797-16.043-35.84-35.84-35.84h-677.205c-19.797 0-35.84 16.043-35.84 35.84v676.864c0 19.797 16.043 35.84 35.84 35.84h391.168c18.773 0 34.133 15.36 34.133 34.133s-15.36 34.133-34.133 34.133h-391.168c-57.685 0-104.448-46.763-104.448-104.448v-676.523c0-57.685 46.763-104.448 104.448-104.448h676.864c57.685 0 104.448 46.763 104.448 104.448v400.725c0 18.773-15.36 34.133-34.133 34.133zM989.867 960h-314.709c-18.773 0-34.133-15.36-34.133-34.133s15.36-34.133 34.133-34.133h229.376l-486.059-489.131c-12.971-13.312-12.971-34.475 0.341-47.787s34.475-13.312 47.787 0l488.789 490.837v-232.448c0-18.773 15.36-34.133 34.133-34.133s34.133 15.36 34.133 34.133v312.661c0 18.773-15.36 34.133-34.133 34.133z" />
 <glyph unicode="&#xe941;" glyph-name="sidepanel" d="M923.648 953.515h-823.296c-53.589 0-96.939-43.349-96.939-96.939v-817.152c0-53.589 43.691-96.939 96.939-96.939h823.296c53.589 0 96.939 43.349 96.939 96.939v817.152c0 53.589-43.691 96.939-96.939 96.939zM71.68 39.424v817.152c0 15.701 12.971 28.672 28.672 28.672h260.096v-874.496h-260.096c-15.701 0-28.672 12.971-28.672 28.672zM952.32 39.424c0-15.701-12.971-28.672-28.672-28.672h-494.933v874.496h494.933c15.701 0 28.672-12.971 28.672-28.672v-817.152zM248.149 682.155h-64.171c-18.773 0-34.133-15.36-34.133-34.133s15.36-34.133 34.133-34.133h64.171c18.773 0 34.133 15.36 34.133 34.133s-15.36 34.133-34.133 34.133zM248.149 482.133h-64.171c-18.773 0-34.133-15.36-34.133-34.133s15.36-34.133 34.133-34.133h64.171c18.773 0 34.133 15.36 34.133 34.133s-15.36 34.133-34.133 34.133zM248.149 282.112h-64.171c-18.773 0-34.133-15.36-34.133-34.133s15.36-34.133 34.133-34.133h64.171c18.773 0 34.133 15.36 34.133 34.133s-15.36 34.133-34.133 34.133z" />
+<glyph unicode="&#xe942;" glyph-name="close" horiz-adv-x="966" d="M483 413.867c-9.216 0-18.432 3.755-24.917 10.581l-143.701 151.552c-12.971 13.653-12.288 35.157 1.365 48.128s35.157 12.288 48.128-1.365l118.784-125.269 116.736 125.269c12.971 13.653 34.475 14.336 48.128 1.707 13.653-12.971 14.336-34.475 1.707-48.128l-141.653-151.552c-6.485-6.827-15.36-10.923-24.917-10.923v0zM339.299 262.315c-8.533 0-16.725 3.072-23.552 9.216-13.653 12.971-14.336 34.475-1.365 48.128l143.701 151.893c6.485 6.827 15.36 10.581 24.917 10.581v0c9.557 0 18.432-4.096 24.917-10.923l141.653-151.893c12.971-13.653 11.947-35.499-1.707-48.128-13.995-12.971-35.499-11.947-48.128 1.707l-116.736 125.269-118.784-125.269c-6.827-7.168-15.701-10.581-24.917-10.581zM483-8.363c-251.563 0-456.363 204.8-456.363 456.363s204.8 456.363 456.363 456.363 456.363-204.8 456.363-456.363-204.8-456.363-456.363-456.363zM483 836.096c-214.016 0-388.096-174.080-388.096-388.096s174.080-388.096 388.096-388.096 388.096 174.080 388.096 388.096-174.080 388.096-388.096 388.096z" />
 <glyph unicode="&#xe943;" glyph-name="warning" d="M512 366.080c-18.851 0-34.133 15.282-34.133 34.133v0 266.923c3.841 14.958 17.205 25.835 33.109 25.835s29.268-10.877 33.058-25.599l0.052-0.237v-267.947c-0.516-17.722-14.464-32.025-31.989-33.105l-0.097-0.005zM561.493 235.349c0-27.334-22.159-49.493-49.493-49.493s-49.493 22.159-49.493 49.493c0 27.334 22.159 49.493 49.493 49.493s49.493-22.159 49.493-49.493zM512-58.539c-0.175 0-0.383 0-0.59 0-85.883 0-166.872 20.95-238.137 58.018l2.866-1.356-7.168-2.731c-37.904-18.971-82.226-31.259-129.098-34.088l-0.95-0.046c-5.386-0.637-11.624-1.001-17.947-1.001-15.234 0-29.975 2.11-43.948 6.054l1.137-0.274c-12.674 5.358-21.951 16.554-24.535 30.123l-0.041 0.256c-0.067 0.972-0.105 2.106-0.105 3.25 0 16.486 7.897 31.128 20.115 40.349l0.128 0.092c2.976 2.392 5.561 5.085 7.768 8.074l0.083 0.118 10.923 16.384c9.496 13.456 19.331 29.181 28.329 45.435l1.367 2.693v4.437c-75.931 87.53-122.203 202.576-122.203 328.43 0 0.816 0.002 1.632 0.006 2.448v-0.126c0 282.77 229.23 512 512 512s512-229.23 512-512v0c-1.933-280.169-229.5-506.543-509.941-506.543-0.724 0-1.447 0.002-2.17 0.005h0.111zM280.235 65.707c0.213 0.005 0.465 0.007 0.717 0.007 6.372 0 12.359-1.647 17.559-4.539l-0.185 0.094c61.793-33.917 135.397-53.886 213.661-53.931h0.014c0.611-0.003 1.335-0.005 2.059-0.005 243.989 0 441.984 196.922 443.722 440.501l0.001 0.165c0 246.198-199.583 445.781-445.781 445.781s-445.781-199.583-445.781-445.781v0c0-0.193 0-0.421 0-0.649 0-116.103 45.5-221.578 119.641-299.568l-0.174 0.185c5.58-6.057 9.001-14.177 9.001-23.097 0-3.951-0.671-7.746-1.906-11.276l0.073 0.239c-3.792-12.731-7.853-23.372-12.589-33.637l0.642 1.552c-12.032-21.257-23.322-38.868-35.435-55.851l1.301 1.92c34.959 3.899 66.833 13.685 95.797 28.379l-1.589-0.731c11.435 5.785 24.829 9.484 39.006 10.23l0.247 0.010zM151.552 98.133v0zM151.552 98.133v0z" />
 <glyph unicode="&#xe944;" glyph-name="websites" d="M754.005 745.301c13.385-30.015 21.179-65.040 21.179-101.886 0-1.021-0.006-2.040-0.018-3.058l0.001 0.155c0.006-0.64 0.009-1.397 0.009-2.155 0-36.984-7.791-72.149-21.821-103.942l0.649 1.649c-1.658-3.722-2.623-8.066-2.623-12.635 0-17.532 14.212-31.744 31.744-31.744 0.202 0 0.404 0.002 0.605 0.006h-0.030c0.025 0 0.055 0 0.085 0 13.095 0 24.339 7.93 29.19 19.249l0.079 0.207c16.611 38.226 26.274 82.753 26.274 129.536s-9.663 91.31-27.102 131.692l0.829-2.156c-17.339 41.245-41.452 76.412-71.295 105.771l-0.043 0.042c-5.765 5.765-13.73 9.331-22.528 9.331-17.595 0-31.859-14.264-31.859-31.859 0-8.798 3.566-16.763 9.331-22.528v0c23.967-23.869 43.342-52.329 56.698-83.951l0.646-1.723zM931.499 807.424c-24.028 55.679-56.599 103.235-96.609 143.372l0.012-0.012c-5.807 5.813-13.833 9.408-22.699 9.408s-16.891-3.596-22.698-9.408v0c-5.793-5.753-9.38-13.721-9.38-22.528s3.586-16.775 9.378-22.526l0.002-0.002c34.619-34.218 62.631-75.033 82.009-120.416l0.935-2.464c19.2-44.384 30.367-96.066 30.367-150.357s-11.168-105.974-31.331-152.876l0.963 2.519c-1.586-3.672-2.509-7.947-2.509-12.438 0-13.202 7.974-24.542 19.368-29.466l0.208-0.080c3.551-1.512 7.682-2.39 12.018-2.39 0.095 0 0.19 0 0.285 0.001h-0.015c0.060 0 0.13-0.001 0.201-0.001 13.157 0 24.464 7.919 29.415 19.25l0.080 0.207c21.598 50.426 34.155 109.106 34.155 170.719 0 1.542-0.008 3.082-0.024 4.621l0.002-0.235c0.014 1.303 0.022 2.843 0.022 4.385 0 61.613-12.557 120.293-35.252 173.62l1.097-2.902zM187.392 640.853c0-0.188-0.001-0.411-0.001-0.634 0-46.626 9.668-90.993 27.108-131.208l-0.825 2.135c4.93-11.526 16.174-19.456 29.269-19.456 0.030 0 0.060 0 0.090 0h-0.005c0.025 0 0.054 0 0.083 0 4.517 0 8.829 0.877 12.775 2.471l-0.229-0.082c11.758 4.936 19.866 16.355 19.866 29.667 0 4.445-0.904 8.678-2.537 12.527l0.079-0.21c-13.521 31.012-21.388 67.142-21.388 105.11 0 74.081 29.949 141.167 78.4 189.81l-0.009-0.009c5.793 5.753 9.38 13.721 9.38 22.528s-3.586 16.775-9.378 22.526l-0.002 0.002c-5.807 5.813-13.833 9.408-22.699 9.408s-16.891-3.596-22.698-9.408v0c-60.312-60.239-97.621-143.498-97.621-235.472 0-0.017 0-0.034 0-0.051v0.002zM134.485 439.808c11.668 4.975 19.699 16.349 19.699 29.598 0 4.601-0.969 8.977-2.713 12.933l0.081-0.205c-19.176 44.316-30.33 95.921-30.33 150.132 0 106.625 43.15 203.171 112.941 273.129l-0.008-0.008c5.765 5.765 9.331 13.73 9.331 22.528 0 17.595-14.264 31.859-31.859 31.859-8.798 0-16.763-3.566-22.528-9.331v0c-81.386-80.892-131.758-192.907-131.758-316.687 0-0.625 0.001-1.25 0.004-1.874v0.096c-0.014-1.303-0.022-2.843-0.022-4.385 0-61.613 12.557-120.293 35.252-173.62l-1.097 2.902c5.701-11.36 17.258-19.019 30.605-19.019 4.079 0 7.991 0.715 11.617 2.028l-0.238-0.075zM485.376 485.547v-394.923c-0.109-0.991-0.171-2.141-0.171-3.305 0-17.72 14.365-32.085 32.085-32.085s32.085 14.365 32.085 32.085c0 1.164-0.062 2.314-0.183 3.446l0.012-0.141v394.923c58.562 14.82 101.205 67.049 101.205 129.238 0 73.52-59.6 133.12-133.12 133.12s-133.12-59.6-133.12-133.12c0-62.189 42.644-114.417 100.285-129.040l0.92-0.198zM517.12 683.52c37.703 0 68.267-30.564 68.267-68.267s-30.564-68.267-68.267-68.267c-37.703 0-68.267 30.564-68.267 68.267v0c0 37.703 30.564 68.267 68.267 68.267v0zM642.389 238.421c-0.779 0.068-1.685 0.107-2.6 0.107-16.246 0-29.642-12.205-31.519-27.945l-0.015-0.151c-0.051-0.676-0.080-1.464-0.080-2.259 0-16.425 12.342-29.968 28.258-31.859l0.152-0.015c160.085-17.749 226.645-63.829 226.645-84.309 0-32.085-131.072-90.795-345.088-90.795s-344.747 58.709-344.747 90.795c0 20.48 69.973 68.267 232.107 84.992 16.049 1.732 28.434 15.205 28.434 31.571 0 0.902-0.038 1.795-0.111 2.678l0.008-0.116c-2.868 16.194-16.835 28.334-33.637 28.334-0.174 0-0.349-0.001-0.523-0.004h0.026c-68.267-7.168-289.451-38.912-289.451-148.48 0-102.4 204.8-154.624 409.6-154.624s409.6 53.248 409.6 154.624c-3.413 107.861-220.501 140.288-287.061 147.456z" />
 <glyph unicode="&#xe945;" glyph-name="arrow-down" d="M824.32 299.861c-5.807 5.813-13.833 9.408-22.699 9.408s-16.891-3.596-22.698-9.408v0l-234.837-248.149v876.203c0 17.72-14.365 32.085-32.085 32.085s-32.085-14.365-32.085-32.085v-880.981l-234.837 251.563c-5.821 6.32-14.137 10.265-23.374 10.265-8.392 0-16.023-3.256-21.7-8.575l0.018 0.016c-5.895-6.125-9.527-14.467-9.527-23.656 0-8.287 2.953-15.885 7.865-21.797l-0.045 0.056 288.085-307.2c5.789-6.271 14.037-10.198 23.203-10.24h0.008c9.076 0.229 17.236 3.967 23.213 9.901l-0.002-0.002 292.181 307.2c5.696 5.736 9.217 13.64 9.217 22.365 0 9.061-3.796 17.236-9.886 23.019l-0.014 0.013z" />

extensions/odoo_theme/static/scss/_iconfont.scss

@@ -427,3 +427,8 @@
     content: $i-sidepanel;
   }
 }
+.i-close {
+  &:before {
+    content: $i-close;
+  }
+}

extensions/odoo_theme/static/scss/_mixins.scss

@@ -4,18 +4,6 @@
 
 // Utilities
 // ------------------------------------------------------------------
-.o-no-select {
-    pointer-events: none;
-    cursor: default;
-    &, & * {
-        &::selection {
-            background: transparent;
-        }
-        &::-moz-selection {
-            background: transparent;
-        }
-    }
-}
 
 @mixin o-position-absolute($top: auto, $right: auto, $bottom: auto, $left: auto){
     position: absolute;
@@ -41,32 +29,6 @@
 
 // Backgrounds
 // ------------------------------------------------------------------
-@mixin o-svg-bg($file_name,$file_ext,$x:50%, $y:50%, $repeat: no-repeat, $folder: ''){
-    $std-url: url("img/${folder}${file_name}.${file_ext}");
-    $svg-url: url("img/${folder}${file_name}.svg");
-    background-image: $std-url;
-    background-image: $svg-url;
-    background-position: $x $y;
-    background-repeat: $repeat;
-}
-
-@mixin o-retina-bg($img,$x:50%, $y:50%, $repeat: no-repeat, $folder: ''){
-    $std-url: url("img/${folder}${img}");
-    background-image: $std-url;
-    background-position: $x $y;
-    background-repeat: $repeat;
-
-    @media
-    only screen and (-webkit-min-device-pixel-ratio: 2),
-    only screen and (   min--moz-device-pixel-ratio: 2),
-    only screen and (     -o-min-device-pixel-ratio: 2/1),
-    only screen and (        min-device-pixel-ratio: 2),
-    only screen and (                min-resolution: 192dpi),
-    only screen and (                min-resolution: 2dppx) {
-    // $2x-url: url("img/${folder}${website-2x-prefix}${img}");
-        background-image: url("img/${folder}${website-2x-prefix}${img}");
-    }
-}
 
 @mixin o-gradient($deg: 99deg , $startColor: $o-violet, $endColor: #62495B, $startOffset: 10%, $endOffset: 90%){
     background: mix($startColor, $endColor);
@@ -103,29 +65,8 @@
     display: block;
     width: 0;
     height: 0;
-    padding-top:  $o-header-height + 10px;
+    padding-top:  calc(#{$o-headers-height} + 10px);
-    margin-top:  -$o-header-height - 10px;
+    margin-top:  -$o-headers-height - 10px;
-}
-
-
-//-- has_col
-
-@mixin o-pseudo-col(){
-  position: relative;
-  min-height: 1px;
-  padding-right: 15px;
-  padding-left: 15px;
-  float: left;
-  width: 100%;
-}
-
-@mixin o-code-col(){
-  /* content: ""; Deactivating o_has_code_column background */
-  background: $doc_code-bg;
-  /* @include box-shadow(inset 40px 0 40px -18px rgba(22, 24, 29, 0.3)); */
-  @include o-position-absolute($top: 3rem, $right:0);
-  width: 43%;
-  height: calc(100% - 3rem);
 }
 
 @mixin o-easter-egg($width: 100%, $height: 100%, $img: 'img/poule.svg' ){
@@ -151,14 +92,10 @@
         }
 }
 
-@function valid-radius($radius) {
+@mixin o-content-tab-selected {
-  $return: ();
+    font-weight: $fw_bold;
-  @each $value in $radius {
+    background: $doc-paper;
-    @if type-of($value) == number {
+    border-bottom: 1px solid $doc-paper;
-      $return: append($return, max($value, 0));
+    border-left: 1px solid $gray-light;
-    } @else {
+    border-right: 1px solid $gray-light;
-      $return: append($return, $value);
-    }
-  }
-  @return $return;
 }

extensions/odoo_theme/static/scss/_variables.scss

@@ -1,25 +1,9 @@
-$o-pagination-main-border: #d8d8d8;
-
 $grid-breakpoint-xxl: 1400px;
 $grid-breakpoint-xxxl: 1680px;
 
 $container-max-width-xxl:1380px;
 $container-max-width-xxxl: 1560px;
 
-// Paths and Prefixes
-// ==============================================
-$website-img-base-url    : "../img";
-$website-loading-url     : "openerp_website/static/src/img/2016/gif/ring.gif";
-$website-2x-prefix       : "2x_";
-
-// Animations and Transitions
-// =====================
-$o-ease: cubic-bezier(.55,0,.1,1);
-
-// Events
-// ===============================================
-$country-events-list-gap : 15px;
-
 // Odoo Colours
 // ==============================================
 $o-violet-dark           : #875A7B;
@@ -71,6 +55,7 @@ $fw_extrabold:                              800;
 $fw_black:                                  900;
 
 $font-size-secondary:                       .875rem;
+
 //------------------------------------------------------------------------------
 // icomoon icons
 //------------------------------------------------------------------------------
@@ -158,6 +143,7 @@ $i-check: "\e909";
 $i-edit: "\e932";
 $i-article: "\e94e";
 $i-sidepanel: "\e941";
+$i-close: "\e942";
 
 
 //------------------------------------------------------------------------------
@@ -235,10 +221,10 @@ $o-header-mobile-height:                    50px;
 $o-header-height:                           80px;
 $o-header-white:                            #ffffff;
 
-$o-subheader-height:                        calc(#{$o-header-height}/2.5);
+$o-subheader-height:                        32px;
 
-$o-headers-mobile-height:                   calc(#{$o-header-mobile-height} + (#{$o-subheader-height}));
+$o-headers-mobile-height:                   $o-header-mobile-height + $o-subheader-height;
-$o-headers-height:                          calc(#{$o-header-height} + #{$o-subheader-height});
+$o-headers-height:                          $o-header-height + $o-subheader-height;
 // Navigation
 $o-side-nav-width:                          350px;
 $o-on-page-width:                           20%;
@@ -247,13 +233,6 @@ $o-on-page-width:                           20%;
 $o-halfpage-width:                          54%;
 $o-codecol-width:                           43%;
 
-// Paths and Prefixes
-$website-img-base-url:                      "../img/";
-$website-2x-prefix:                         "2x_";
-
-// Animations and Transitions
-$o-ease:                                    cubic-bezier(.55,0,.1,1);
-
 // Paddings and margins
 $padding-xs:                                .5rem;
 $padding-s:                                 1rem;

extensions/odoo_theme/static/style.scss

@@ -12,16 +12,28 @@ div[aria-label="related navigation"] {
 
 body {
     position: relative;
-    a:not(:hover), a.o_logo {
+    a {
+        @include media-breakpoint-down(lg) {
+            overflow-wrap: anywhere;
+        }
+
+        &:not(:hover), &.o_logo {
             text-decoration: none !important;
         }
 
-    a.external:after {
+        &:hover {
+            text-underline-position: from-font;
+        }
+
+        &.external {
+            &:not(.image-reference):after {
                 content: '#{$i-external-link}';
                 font-family: icomoon, sans-serif !important;
                 @include font-size($font-size-base/1.3);
                 margin: 0 .2rem;
             }
+        }
+    }
 
     dd {
         margin-left: 1rem;
@@ -34,9 +46,12 @@ body {
         }
     }
 
-    abbr[title="Pull Request"] {
+    abbr {
+        text-underline-offset: 2px;
+        &[title="Pull Request"] {
             @include o-easter-egg();
         }
+    }
 }
 
 .hidden {
@@ -47,6 +62,7 @@ body {
 
 span.viewcode-link {
     float: none;
+    margin-left: .3rem;
 }
 //------------------------------------------------------------------------------
 // Header with logo, searchbar and switchers
@@ -110,7 +126,7 @@ header {
             position: relative;
 
             @include media-breakpoint-up(lg) {
-                padding-right: $padding-m;
+                margin-right: $padding-m;
             }
 
             .o_search {
@@ -120,10 +136,7 @@ header {
                     @include o-position-absolute($top: 50%, $right: .5rem);
                     @include o-transform (translateY(-50%)) ;
 
-                    @include media-breakpoint-up(lg) {
+                    padding: 0 $padding-xs;
-                        right: 1rem;
-                    }
-                    padding: 0;
                     font-size: 1.2rem;
                     color: $gray;
                 }
@@ -138,14 +151,16 @@ header {
             }
 
             .highlight-link {
-                @include o-position-absolute($bottom: -4.5rem, $right: 0);
+                @include font-size(0);
-                @include media-breakpoint-up(lg) {
-                    bottom: -1.5rem;
-                    right: $padding-m;
-                }
                 margin-bottom: 0;
                 a {
-                    @include font-size(12px);
+                    text-decoration: none;
+                    color: $gray;
+                    &:before {
+                        @include o-position-absolute($top: 50%, $right: 3rem);
+                        @include o-transform (translateY(-50%)) ;
+                        @include o-inline-icon($i-close, auto, middle, 1.2rem);
+                    }
                 }
             }
         }
@@ -182,7 +197,6 @@ header {
 //------------------------------------------------------------------------------
 
 .o_side_nav {
-    width: 100%;
     .o_mobile-overlay {
         background-color: rgba(0,0,0,.3);
         @include o-position-absolute($top: 0, $bottom: 0, $left: 0, $right:0);
@@ -190,9 +204,10 @@ header {
         transition: opacity .2s linear;
         z-index: -100;
     }
+
     .o_side_nav-inner {
         width: 90%;
-        height: calc(100% - (#{$o-headers-mobile-height});
+        height: calc(100% - #{$o-headers-mobile-height});
         overflow-y: auto;
         position: fixed;
         left: -100%;
@@ -205,11 +220,23 @@ header {
         font-weight: $fw_regular;
         @include media-breakpoint-up(lg) {
             width: $o-side-nav-width;
-            height: calc(100vh - (#{$o-headers-height}));
+            height: calc(100vh - #{$o-headers-height});
             left: 0;
             padding-top: $padding-m;
             padding-left: $padding-m;
         }
+        &::-webkit-scrollbar {
+            width: 5px;
+        }
+
+        &::-webkit-scrollbar-track {
+            background: $white;
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background-color: $o-violet-darker ;
+            border-radius: 0;
+        }
     }
 
     &.show {
@@ -224,7 +251,6 @@ header {
     }
 
     .toctree-l1 {
-        padding-top: $padding-xs;
         padding-bottom: $padding-xs;
 
         > .o_toc_entry_wrapper a {
@@ -232,6 +258,7 @@ header {
             font-weight: 600;
         }
     }
+
     .o_main_toc {
         > ul {
             li {
@@ -285,19 +312,6 @@ header {
 
         }
     }
-
-    &::-webkit-scrollbar {
-        width: 5px;
-    }
-
-    &::-webkit-scrollbar-track {
-        background: $white;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        background-color: $o-violet-darker ;
-        border-radius: 0;
-    }
 }
 
 .o_main_toc, .o_page_toc_nav {
@@ -364,14 +378,13 @@ header {
             display: none;
             @include media-breakpoint-up(xl) {
                 display: block;
+                grid-area: toc;
                 top: $o-headers-height;
-                right: 0;
+                padding: $padding-m $padding-s $padding-m 0;
-                padding: $padding-l $padding-s $padding-l 0;
                 overflow-y: auto;
             }
             position: -webkit-sticky;
             position: sticky;
-            width: $o-on-page-width;
             height: 100%;
             max-height: calc(100vh - #{$o-headers-height});
         }
@@ -409,22 +422,49 @@ header {
 //------------------------------------------------------------------------------
 
 #wrap {
+    display: grid;
+    grid-template-areas: "main";
+    grid-template-columns: minmax(0,100%);
     margin-top: $o-headers-mobile-height;
     @include media-breakpoint-up(lg) {
-        display: flex;
+        grid-template-areas: "sidebar main toc";
-        justify-content: space-between;
+        grid-template-columns: minmax(0,$o-side-nav-width) minmax(0,auto) minmax(0,$o-on-page-width);
         margin-top: $o-headers-height;
     }
-
+    p {
+        > code {
+            padding: 0 .3rem;
+        }
+    }
     code {
         display: inline-block;
         color: inherit;
-        background: $doc_code-bg;
-        padding: 0 .3rem;
-        margin: 0 0.1rem;
-        line-height: 1.3;
-        border: 1px solid $gray-light;
         overflow-wrap: anywhere;
+        &:first-of-type:not(span):not(em) {
+            padding-left: .3rem;
+        }
+        &:last-of-type:not(em) {
+            padding-right: .3rem;
+        }
+        ~ .sig-paren, ~ .sig-param, ~ .optional {
+            @extend code;
+            + .sig-paren {
+                padding: 0 .1rem;
+            }
+        }
+        &.file {
+            font-family: $font-family-base;
+            font-weight: $fw_medium;
+            font-style: italic;
+            padding-right: .4rem;
+            color: $color-beta-dark;
+            background-color: lighten($color-beta-lightest, 30%);
+        }
+
+        &:not(.file) {
+            color: inherit;
+            background: darken($doc_code-bg,3%);
+        }
     }
 
     iframe {
@@ -433,22 +473,19 @@ header {
 
     main {
         position: relative;
+        grid-area: main;
         padding-bottom: $padding-l;
         @include media-breakpoint-up(lg) {
-            left: calc(#{$o-side-nav-width} - #{$padding-s});
+            padding: $padding-m $padding-l;
-            max-width: calc(100vw - #{$o-side-nav-width});
-            padding: $padding-l;
             margin: 0;
+            grid-column-end: toc;
         }
         @include media-breakpoint-up(xl) {
-            left: $o-side-nav-width;
+            grid-column-end: main;
-            max-width: calc(100vw - #{$o-side-nav-width} - #{$o-on-page-width});
         }
 
         &.o_index, &.o_fullwidth_page, &.o_has_code_column {
-            @include media-breakpoint-up(xl) {
+            grid-column-end: toc;
-                max-width: calc(100vw - #{$o-side-nav-width});
-            }
         }
 
         // Homepage
@@ -460,11 +497,11 @@ header {
                 align-items: center;
                 @include o-gradient();
                 @include media-breakpoint-up(lg) {
-                    margin: -#{$margin-m} -#{$margin-m} $margin-m;
+                    margin: -#{$margin-m} -#{$margin-l} $margin-m;
                     padding: $padding-m $padding-m;
                 }
                 @include media-breakpoint-up(xl) {
-                    margin: -#{$margin-l} -#{$margin-l} $margin-l;
+                    margin: -#{$margin-m} -#{$margin-l} $margin-l;
                     padding: $padding-l $padding-l;
                 }
             }
@@ -522,18 +559,7 @@ header {
         // pages with column for code on the right
         &.o_has_code_column {
             article.doc-body {
-                > * {
-                  max-width: 100%;
-                }
-
                 @include media-breakpoint-up(xl) {
-                    width: 100%;
-                    padding-right: 0;
-
-                    &:before {
-                        @include o-code-col();
-                    }
-
                     .o_git_link {
                         right: calc(#{$o-codecol-width} + #{$padding-l});
                     }
@@ -636,6 +662,32 @@ header {
 
             .command {
                 font-family: var(--bs-font-monospace);
+                font-weight: $fw_regular;
+                @extend code;
+            }
+
+            dl.py, dl.js {
+                > dd {
+                    border-left: 3px solid $gray-lighter;
+                    margin: 0;
+                    padding-left: $padding-s;
+                    padding-top: $padding-xs;
+                }
+                &.class em.property {
+                    font-size: $font-size-secondary;
+                    &:first-child {
+                        border-bottom: 3px solid $gray-lighter;
+                        + [class^=sig] {
+                            padding-left: .3rem;
+                        }
+                    }
+                    &:not(:first-child) {
+                        @extend code;
+                        &:last-of-type {
+                            padding-right: .3rem;
+                        }
+                    }
+                }
             }
 
             dl.field-list {
@@ -646,8 +698,11 @@ header {
                     display: block;
                 }
 
-                > dt, > dd {
+                > dt {
                     padding-left: 0;
+                }
+
+                > dd {
                     padding-right: 0;
                 }
 
@@ -739,6 +794,7 @@ header {
                 a.headerlink {
                     text-decoration: none;
                     font-size: 0;
+                    line-height: 0;
                     visibility: hidden !important;
 
                     &:before {
@@ -802,21 +858,21 @@ header {
         .dfn{
             @include font-size($font-size-secondary);
             line-height: 1;
-            color: $o-violet;
+            color: $color-beta;
             font-weight: $fw_semibold;
             &:before {
                 content:'?';
                 display: inline-block;
                 width: 15px;
                 height: 15px;
-                background-color: $o-violet;
+                border: 2px solid $color-beta;
-                border: 1px solid $o-violet;
                 border-radius: 20px;
                 text-align: center;
-                color: $white;
+                color: $color-beta;
+                font-size: 12px;
                 font-weight: $fw_extrabold;
                 font-style: normal;
-                margin: 0 .2rem;
+                margin: 0 .1rem;
             }
         }
 
@@ -851,11 +907,14 @@ header {
 // Alerts
 //------------------------------------------------------------------------------
 // alert-info
+// alert-note
+// alert-tip
 // alert-warning
 // alert-danger
-// alert-go_to
+// alert-example
 // alert-exercise
-// alert-success // removed : never used in doc
+// alert-go_to
+
         .alert {
             position: relative;
             display: inline-block;
@@ -864,8 +923,10 @@ header {
             width: 100%;
             @include font-size($font-size-secondary);
 
-            code {
+            code, div[class^="highlight"] {
                 background-color: $white !important;
+                border: 1px solid $gray-light;
+                color: inherit;
             }
 
             > p , > ul {
@@ -900,6 +961,10 @@ header {
                         content: '#{$i-info}';
                     }
                 }
+
+                code, div[class^="highlight"] {
+                    border-color: tint-color($brand-info, 30%);
+                }
             }
 
             &.alert-note {
@@ -938,6 +1003,10 @@ header {
                         content: '#{$i-warning}';
                     }
                 }
+
+                code, div[class^="highlight"] {
+                    border-color: tint-color($brand-warning, 50%);
+                }
             }
 
             &.alert-danger {
@@ -950,6 +1019,10 @@ header {
                         content: '#{$i-danger}';
                     }
                 }
+
+                code, div[class^="highlight"] {
+                    border-color: tint-color($brand-danger, 50%);
+                }
             }
 
             &.alert-example {
@@ -964,6 +1037,10 @@ header {
                 > .alert-title:before, > h3:before {
                     content: '#{$i-knowledge}';
                 }
+
+                code, div[class^="highlight"] {
+                    border-color: tint-color($doc-example, 50%);
+                }
             }
 
             &.alert-exercise {
@@ -978,6 +1055,9 @@ header {
                 > .alert-title:before, > h3:before {
                     content: '#{$i-exercise}';
                 }
+                code, div[class^="highlight"] {
+                    border-color: tint-color($doc-exercise, 50%);
+                }
             }
 
             &.alert-go_to {
@@ -995,6 +1075,9 @@ header {
                 > .alert-title:before, > h3:before {
                     content: '#{$i-arrow-right}';
                 }
+                code, div[class^="highlight"] {
+                    border-color: tint-color($o-violet, 50%);
+                }
             }
         }
     }
@@ -1003,14 +1086,6 @@ header {
 // Content Tabs
 //------------------------------------------------------------------------------
 
-@mixin o-content-tab-selected {
-    font-weight: 700;
-    background: $doc-paper;
-    border-bottom: 1px solid $doc-paper;
-    border-left: 1px solid $gray-light;
-    border-right: 1px solid $gray-light;
-}
-
 .sphinx-tabs {
     padding: 0;
     margin-bottom: 1rem;
@@ -1043,8 +1118,8 @@ header {
         &:hover {
             &:not([aria-selected="true"]) {
                 cursor: pointer;
-                background: hsl(317deg, 16%, 90%);
+                background: tint-color($o-violet-dark, 80%);
-                color: #7A436B;
+                color: $o-violet-dark;
                 transition: color .15s, background .15s;
                 border-radius: 0;
             }