app/assets/stylesheets/common.scss

   1 @use "sass:map";
   2 @import "parameters";
   3 @import "bootstrap";
   4 @import "rails_bootstrap_forms";
   5
   6 /* Styles common to large and small screens */
   7
   8 /* Default rules for the body of every page */
   9
  10 body {
  11   font-size: $typeheight;
  12   --dark-mode-map-filter: none;
  13   --marker-red: #f6110a;
  14   --marker-green: #9cef11;
  15   --marker-blue: #0b8ef1;
  16 }
  17
  18 time[title] {
  19   text-decoration: underline dotted;
  20 }
  21
  22 /* Utility for de-emphasizing content */
  23
  24 .text-body-secondary a {
  25   color: $blue;
  26 }
  27
  28 /* Bootstrap contextual table classes overrides in dark mode */
  29
  30 @include color-mode(dark) {
  31   .table-primary {
  32     --bs-table-bg: rgb(var(--bs-primary-rgb), .25);
  33   }
  34   .table-secondary {
  35     --bs-table-bg: rgb(var(--bs-secondary-rgb), .25);
  36   }
  37   .table-success {
  38     --bs-table-bg: rgb(var(--bs-success-rgb), .25);
  39   }
  40   .table-primary, .table-secondary, .table-success {
  41     --bs-table-color: initial;
  42     border-color: inherit;
  43   }
  44 }
  45
  46 /* Utility for delayed loading spinner */
  47
  48 .delayed-fade-in {
  49   animation: 300ms linear forwards delayed-fade-in;
  50 }
  51
  52 @keyframes delayed-fade-in {
  53   0%   { opacity: 0 }
  54   66%  { opacity: 0 }
  55   100% { opacity: 1 }
  56 }
  57
  58 /* Bootstrap close button overrides for nested light/dark themes */
  59
  60 [data-bs-theme="dark"],
  61 [data-bs-theme] [data-bs-theme="dark"] {
  62   --bs-btn-close-filter: invert(1) grayscale(100%) brightness(200%);
  63 }
  64
  65 [data-bs-theme="light"],
  66 [data-bs-theme] [data-bs-theme="light"] {
  67   --bs-btn-close-filter: none;
  68 }
  69
  70 /* Rules for the header */
  71
  72 #menu-icon {
  73   display: none;
  74   position: absolute;
  75   top: 0;
  76   right: 0;
  77   background: image-url("menu-icon.svg") no-repeat;
  78   background-size: 30px 30px;
  79   width: 30px;
  80   height: 30px;
  81   margin: 14px 10px 0 0;
  82   opacity: 0.6;
  83 }
  84
  85 @include color-mode(dark) {
  86   #menu-icon {
  87     filter: invert(1);
  88   }
  89 }
  90
  91 header {
  92   height: $headerHeight;
  93   position: relative;
  94   font-size: 14px;
  95
  96   > * {
  97     padding: $lineheight * 0.5;
  98   }
  99
 100   h1 {
 101     height: $headerHeight;
 102     font-size: 18px;
 103   }
 104
 105   .btn {
 106     font-size: 14px;
 107   }
 108
 109   .username {
 110     max-width: 12em;
 111   }
 112 }
 113
 114 nav.primary {
 115   #edit_tab .btn-outline-primary {
 116     @include button-outline-variant($green, $color-hover: $white, $active-color: $white);
 117   }
 118
 119   .disabled {
 120     .btn-outline-primary {
 121       color: $grey;
 122       cursor: default;
 123
 124       &:hover {
 125         background-color: lighten($green, 30%);
 126       }
 127     }
 128   }
 129
 130   // Small tweaks to the toggle to stop the primary colour showing through
 131   // when the menu is shown
 132   .show > .btn-outline-primary.dropdown-toggle {
 133     background-color: $green;
 134     border-color: $green;
 135
 136     &:focus {
 137       box-shadow: 0 0 0 0.2rem fade-out($green, 0.5);
 138     }
 139   }
 140 }
 141
 142 nav.secondary {
 143   .nav-link {
 144     padding: 0 0.3rem;
 145   }
 146
 147   > ul {
 148     height: 1.5em;
 149   }
 150 }
 151
 152 nav.primary, nav.secondary {
 153   .dropdown-item {
 154     &:hover, &:active {
 155       background-color: $green;
 156       color: white;
 157     }
 158   }
 159 }
 160
 161 #compact-secondary-nav {
 162   display: none;
 163 }
 164
 165 body.small-nav {
 166   #menu-icon {
 167     display: block;
 168   }
 169
 170   header {
 171     flex-direction: column;
 172     height: auto;
 173     min-height: $headerHeight;
 174
 175     &.closed nav {
 176       display: none !important;
 177     }
 178
 179     .search_forms {
 180       display: block;
 181     }
 182
 183     .username {
 184       max-width: unset;
 185     }
 186   }
 187
 188   #sidebar .search_forms {
 189     display: none;
 190   }
 191
 192   nav.primary {
 193     margin-right: 0;
 194     padding: 0;
 195
 196     #edit_tab {
 197       width: 100%;
 198       padding: 10px;
 199     }
 200   }
 201
 202   nav.secondary {
 203     flex-direction: column;
 204
 205     > ul {
 206       height: auto;
 207       justify-content: center;
 208     }
 209
 210     .user-menu, .login-menu {
 211       width: 100%;
 212     }
 213   }
 214
 215   #compact-secondary-nav {
 216     display: none;
 217   }
 218
 219   .compact-hide {
 220     display: inline-block;
 221   }
 222
 223   .overlay-sidebar #sidebar .welcome {
 224     display: none;
 225   }
 226
 227   .overlay-sidebar #sidebar #banner {
 228     display: none;
 229   }
 230 }
 231
 232 /* Rules for language selector */
 233
 234 button.d-md-none[data-bs-target="#select_language_dialog"] {
 235   right: 50px;
 236   top: 11px;
 237 }
 238
 239 .select_language_list {
 240   column-width: 160px;
 241
 242   small {
 243     font-size: 10px;
 244   }
 245 }
 246
 247 /* Utility for styling notification numbers */
 248
 249 .count-number {
 250   background: transparentize(lighten($green, 25%), .25);
 251   color: $gray-800;
 252   font-weight: $font-weight-normal;
 253 }
 254
 255 /* Rules for Leaflet maps */
 256
 257 .leaflet-top.leaflet-right,
 258 .leaflet-top.leaflet-left {
 259   height: 100%;
 260   column-gap: 10px;
 261   display: flex;
 262   flex-direction: column;
 263   flex-wrap: wrap-reverse;
 264 }
 265
 266 .leaflet-control .control-button {
 267   display: block;
 268   height: 40px;
 269   width: 40px;
 270   color: white;
 271   padding: 10px;
 272   background-color: rgba(0,0,0,.6);
 273   outline: none;
 274
 275   &:hover,
 276   &:focus {
 277     background-color: black;
 278   }
 279
 280   &.disabled,
 281   &.leaflet-disabled {
 282     background-color: rgba(0,0,0,.5);
 283     cursor: default;
 284   }
 285
 286   &-first {
 287     border-start-start-radius: 4px;
 288   }
 289
 290   &-last {
 291     border-end-start-radius: 4px;
 292     margin-bottom: 10px;
 293   }
 294 }
 295
 296 .leaflet-control.active .control-button {
 297   background-color: $vibrant-green;
 298 }
 299
 300 /* Rules for the sidebar and main map area */
 301
 302 .map-layout {
 303   #content {
 304     overflow: hidden;
 305     position: absolute;
 306     top: $headerHeight;
 307     bottom: 0;
 308     width: 100%;
 309   }
 310
 311   #sidebar, #map {
 312     position: relative;
 313     height: 100%;
 314     overflow-x: hidden;
 315     overflow-y: auto;
 316   }
 317
 318   #sidebar {
 319     float: left;
 320     width: $sidebarWidth;
 321   }
 322
 323   .overlay-sidebar #sidebar {
 324     position: absolute;
 325     height: auto;
 326     overflow: hidden;
 327
 328     #banner {
 329       display: block;
 330     }
 331
 332     .welcome {
 333       display: block;
 334     }
 335
 336     .sidebar-close-controls,
 337     #sidebar_loader,
 338     #sidebar_content {
 339       display: none;
 340     }
 341   }
 342
 343   .welcome {
 344     display: none;
 345   }
 346
 347   #banner {
 348     display: none;
 349
 350     img {
 351       display: block;
 352       width: $sidebarWidth;
 353     }
 354   }
 355
 356   #map {
 357     height: 100%;
 358     overflow: hidden;
 359
 360     &.query-active {
 361       cursor: help;
 362     }
 363
 364     &.query-disabled {
 365       cursor: not-allowed;
 366     }
 367
 368     .leaflet-marker-draggable {
 369       cursor: move;
 370     }
 371
 372     .query-marker {
 373       animation: 1500ms forwards query-marker-fade;
 374
 375       @keyframes query-marker-fade {
 376         to { opacity: 0 }
 377       }
 378     }
 379   }
 380
 381   #map-ui {
 382     display: none;
 383     position: relative;
 384     float: right;
 385     width: 250px;
 386     height: 100%;
 387     overflow: auto;
 388   }
 389 }
 390
 391 @include media-breakpoint-down(md) {
 392   body.map-layout {
 393     #sidebar, #map {
 394       position: relative;
 395       overflow-x: hidden;
 396       width: 100%;
 397       height: 50%;
 398     }
 399
 400     #map-ui {
 401       width: 100%;
 402       height: 50%;
 403       overflow-y: scroll;
 404     }
 405
 406     .overlay-sidebar.overlay-right-sidebar {
 407       #sidebar {
 408         position: absolute;
 409         width: 350px;
 410         height: auto;
 411         overflow: hidden;
 412       }
 413
 414       #map {
 415         height: 100%;
 416       }
 417     }
 418   }
 419 }
 420
 421 .layers-ui {
 422   .base-layers > * {
 423     height: 3.5rem;
 424
 425     > .btn {
 426       box-sizing: content-box;
 427       top: - map.get($border-widths, 4);
 428       left: - map.get($border-widths, 4);
 429       --bs-btn-border-color: var(--bs-body-bg);
 430     }
 431     > .btn:hover {
 432       --bs-btn-border-color: var(--bs-primary-border-subtle);
 433     }
 434   }
 435
 436   .overlay-layers {
 437     .form-check.disabled { color: $darkgrey; }
 438   }
 439 }
 440
 441 .share-ui {
 442   #mapnik_scale {
 443     width: 100px;
 444   }
 445 }
 446
 447 .leaflet-top {
 448   top: 10px !important;
 449   .leaflet-control {
 450     margin-right: 0px !important;
 451     margin-top: 0px !important;
 452   }
 453 }
 454
 455 .leaflet-popup-scrolled {
 456   padding-right: $lineheight;
 457   border-bottom: 0px !important;
 458   border-top: 0px !important;
 459 }
 460
 461 .leaflet-popup-content-wrapper, .leaflet-popup-tip,
 462 .leaflet-contextmenu, .leaflet-contextmenu-item,
 463 .leaflet-control-attribution, .leaflet-control-scale-line {
 464   @extend .bg-body, .text-body;
 465 }
 466
 467 .leaflet-control-attribution, .leaflet-control-scale-line {
 468   @extend .bg-opacity-75;
 469   text-shadow: none !important;
 470 }
 471
 472 .leaflet-contextmenu-item.over {
 473   @extend .bg-body-secondary, .border-secondary, .border-opacity-10;
 474 }
 475
 476 .leaflet-popup-content-wrapper {
 477   @extend .rounded-1;
 478
 479   a {
 480     color: var(--bs-link-color) !important;
 481   }
 482 }
 483
 484 @include color-mode(dark) {
 485   .leaflet-container .leaflet-control-attribution a {
 486     color: var(--bs-link-color);
 487   }
 488
 489   .leaflet-control-scale-line {
 490     border-color: rgba(var(--bs-light-rgb), .75) !important;
 491   }
 492 }
 493
 494 @mixin dark-map-color-scheme {
 495   .leaflet-tile-container,
 496   #legend .filtered-image {
 497     filter: var(--dark-mode-map-filter);
 498   }
 499
 500   .leaflet-tile-container .leaflet-tile {
 501     filter: none;
 502   }
 503 }
 504
 505 body[data-map-theme="dark"] {
 506   @include dark-map-color-scheme;
 507 }
 508
 509 @include color-mode(dark) {
 510   body:not([data-map-theme]) {
 511     @include dark-map-color-scheme;
 512   }
 513 }
 514
 515 /* Rules for attribution text under the main map shown on printouts */
 516
 517 .donate-attr { color: darken($green, 10%) !important; }
 518
 519 /* Temporary label size override until we remove site-wide font customisation */
 520
 521 form {
 522   label {
 523     font-size: 16px;
 524   }
 525   .col-form-label {
 526     font-size: 16px;
 527   }
 528 }
 529
 530 /* Stop bootstrap 5 from floating legends when they don't need to be */
 531 legend {
 532   float: none;
 533 }
 534
 535 /* Override the text colour for primary and secondary buttons, to match our
 536    bootstrap 4 colours. Note this has accessibility issues, which is why
 537    bootstrap 5 calculates black as the appropriate colour, and we should
 538    reconsider our colours at some point with that in mind. */
 539
 540 .btn-primary {
 541   @include button-variant($primary, $primary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white);
 542 }
 543
 544 .btn-secondary {
 545   @include button-variant($secondary, $secondary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white);
 546 }
 547
 548 .btn-outline-secondary {
 549   @include button-outline-variant($secondary, $color-hover: $white, $active-color: $white);
 550 }
 551
 552 /* Rules for the search and direction forms */
 553
 554 header .search_forms,
 555 .directions_form {
 556   display: none;
 557 }
 558
 559 .search_form {
 560   .describe_location {
 561     font-size: 10px;
 562   }
 563
 564   input:not(:placeholder-shown) + .input-group-text .describe_location {
 565     display: none;
 566   }
 567 }
 568
 569 /* Rules for routing */
 570
 571 td.distance {
 572     font-size: x-small;
 573 }
 574 tr.turn {
 575     cursor: pointer;
 576 }
 577
 578 .routing_marker_column {
 579   margin-left: .35rem;
 580   margin-right: .35rem;
 581   width: 15px;
 582
 583   svg {
 584     cursor: move;
 585   }
 586 }
 587
 588 /* Rules for the history sidebar */
 589
 590 .changeset-above-sidebar-viewport {
 591   --changeset-border-color: #CC6655;
 592   --changeset-fill-color: #DDBBBB;
 593   --changeset-outline-color: #FFF4F4;
 594 }
 595 .changeset-in-sidebar-viewport {
 596   --changeset-border-color: #FF9500;
 597   --changeset-fill-color: #FFFFAF;
 598   --changeset-outline-color: #FFFFFF;
 599   &.changeset-highlight-outline {
 600     filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .75));
 601   }
 602 }
 603 .changeset-below-sidebar-viewport {
 604   --changeset-border-color: #8888AA;
 605   --changeset-fill-color: #CCCCDD;
 606   --changeset-outline-color: #F4F4FF;
 607 }
 608 .changeset-highlight-outline {
 609   filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .25));
 610 }
 611
 612 #sidebar .changesets {
 613   .changeset-color-hint-bar {
 614     height: 2px;
 615     background: var(--changeset-border-color);
 616   }
 617
 618   li {
 619     &.selected {
 620       @extend :hover;
 621     }
 622
 623     a.stretched-link > bdi, a:not(.stretched-link), [title] {
 624       position: relative;
 625       z-index: 2; /* needs to be higher than Bootstrap's stretched link ::after z-index */
 626     }
 627   }
 628 }
 629
 630 #sidebar .changeset_line .changeset_num_comments {
 631   min-width: 2.5em;
 632 }
 633
 634 /* Rules for the browse sidebar */
 635
 636 #sidebar_content {
 637   .browse-tag-list {
 638     table-layout: fixed;
 639
 640     tr > *:not([colspan]) {
 641       white-space: pre-wrap;
 642       word-wrap: break-word;
 643       word-break: break-word;
 644     }
 645
 646     tr:last-child > * {
 647       border-bottom: 0;
 648     }
 649   }
 650
 651   .browse-element-list {
 652     line-height: 1.25rem;
 653
 654     .browse-icon {
 655       height: 1.25rem;
 656     }
 657
 658     .d-flex > .browse-icon {
 659       height: max(20px, 1.25rem);
 660     }
 661   }
 662
 663   .query-results {
 664     display: none;
 665   }
 666 }
 667
 668 @include color-mode(dark) {
 669   #sidebar_content .browse-element-list .browse-icon-invertible {
 670     filter: invert(.8) hue-rotate(180deg);
 671   }
 672 }
 673
 674 /* Force LTR/RTL alignment for placeholder text */
 675
 676 .form-control::placeholder {
 677   text-align: left;
 678 }
 679
 680 /* Rules for export sidebar */
 681
 682 .export_form {
 683   .export_area_inputs {
 684     input[type="text"] {
 685       width: 100px;
 686     }
 687   }
 688
 689   .export_boxy {
 690     > * {
 691         margin: -1px;
 692     }
 693   }
 694 }
 695
 696 /* Rules for edit pages */
 697
 698 .site-edit {
 699   #content {
 700     position: absolute;
 701     top: $headerHeight;
 702     bottom: 0;
 703     width: 100%;
 704   }
 705 }
 706
 707 /* Rules for non-map content pages */
 708
 709 .content-inner {
 710   max-width: 960px;
 711   padding: $lineheight;
 712 }
 713
 714 /* Rules for login and signup pages */
 715
 716 .sessions-new, .users-new, .users-create {
 717   #content .content-inner {
 718     max-width: 760px;
 719   }
 720 }
 721
 722 .header-illustration {
 723   background-position: right;
 724   background-repeat: no-repeat;
 725   position: relative;
 726   min-height: 200px;
 727   width: 100%;
 728   left: 0;
 729   bottom: 0;
 730
 731   &.new-user-main {
 732     background-image: image-url("sign-up-illustration.svg");
 733     background-position-x: 70px;
 734   }
 735
 736   &.confirm-main {
 737     background-image: image-url("confirm-illustration.svg");
 738   }
 739
 740   &.new-user-terms {
 741     background-image: image-url("terms-illustration.svg");
 742   }
 743 }
 744
 745 [dir=rtl] .header-illustration {
 746   transform: scaleX(-1);
 747
 748   h1 {
 749     transform: scaleX(-1);
 750   }
 751
 752   ul {
 753     transform: scaleX(-1);
 754   }
 755 }
 756
 757 /* Rules for small maps in content areas */
 758
 759 .content_map {
 760   height: 200px;
 761   margin-bottom: $lineheight;
 762 }
 763
 764 @include media-breakpoint-up(md) {
 765   .content_map {
 766     height: 400px;
 767   }
 768 }
 769
 770 /* Rules for the user map */
 771
 772 .content_map .leaflet-popup-content {
 773   margin: $spacer;
 774 }
 775
 776 /* Rules for user popups on maps */
 777
 778 .user_popup {
 779   p {
 780     margin: 0 0 5px 0 !important;
 781     font-size: 12px;
 782   }
 783 }
 784
 785 /* Rules for the diary entry page */
 786
 787 .diary_entries {
 788   #map {
 789     height: 400px;
 790     display: none;
 791   }
 792   .diary-comment .col-auto {
 793     width: 62px;
 794   }
 795   .diary-comment .col {
 796     max-width: 690px;
 797   }
 798 }
 799
 800 /* Rules for the issues page */
 801
 802 .issues.issues-index {
 803   td.reporting_users {
 804     max-width: 5rem;
 805   }
 806 }
 807
 808 /* Rules for the account confirmation page */
 809
 810 .accounts-terms-show {
 811   .legale {
 812     padding: $lineheight;
 813     margin-bottom: $lineheight;
 814     overflow: auto;
 815     height: 20em;
 816
 817     li {
 818       list-style: inherit;
 819     }
 820
 821     ol ol {
 822       list-style-type: lower-alpha;
 823     }
 824   }
 825 }
 826
 827 /* Rules for user images */
 828
 829 img.user_image {
 830   max-width: 100px;
 831   max-height: 100px;
 832 }
 833
 834 img.user_thumbnail {
 835   max-width: 50px;
 836   max-height: 50px;
 837 }
 838
 839 img.user_thumbnail_tiny {
 840   width: 25px;
 841   height: 25px;
 842   object-fit: contain;
 843 }
 844
 845 /* General styles for action lists / subnavs */
 846
 847 nav.secondary-actions {
 848   margin-left: -11px;
 849   overflow: hidden;
 850   > ul {
 851     display: flex;
 852     flex-direction: row;
 853     flex-wrap: wrap;
 854     margin-bottom: 0;
 855     margin-left: -1px;
 856     padding: 0;
 857     > li {
 858       flex-basis: auto;
 859       list-style: none;
 860       border-left: 1px solid $grey;
 861       padding-left: $lineheight * 0.5;
 862       margin-right: $lineheight * 0.5;
 863       margin-bottom: $lineheight * 0.125;
 864     }
 865   }
 866 }
 867
 868 div.secondary-actions {
 869   padding: 10px;
 870   text-align: center;
 871 }
 872
 873 /* Rules for rich text */
 874
 875 .richtext {
 876   code {
 877     background: var(--bs-secondary-bg);
 878     padding: 2px 3px;
 879   }
 880
 881   pre {
 882     background: var(--bs-secondary-bg);
 883     padding: 2px 3px;
 884     white-space: pre-wrap;
 885
 886     code {
 887       padding: 0;
 888     }
 889   }
 890
 891   img {
 892     padding: $lineheight;
 893     background-color: var(--bs-tertiary-bg);
 894     display: block;
 895     max-width: 100%;
 896     margin: auto;
 897   }
 898
 899   blockquote {
 900     border-left: $lineheight solid var(--bs-tertiary-bg);
 901     padding-left: $lineheight;
 902     margin: 0;
 903     color: var(--bs-secondary-color);
 904   }
 905 }
 906
 907 /* Rules for the "About" page */
 908
 909 .site-about #content {
 910   .content-inner {
 911     max-width: 760px;
 912   }
 913
 914   .attr {
 915     margin-top: -20px;
 916
 917     h1 {
 918       span {
 919         color: $vibrant-green;
 920       }
 921     }
 922
 923     .user-image {
 924       height: 150px;
 925       background-position: 0 50%;
 926       background-repeat: no-repeat;
 927       background-image: image-url('about/osm.png');
 928       background-size: cover;
 929       background-color: $vibrant-green;
 930     }
 931
 932     .byosm {
 933       background: $vibrant-green;
 934     }
 935
 936     .byosm span {
 937       display: inline-block;
 938       width: 1em;
 939       margin-left: -1em;
 940     }
 941   }
 942 }
 943
 944 /* Rules for tables with usernames */
 945
 946 .messages-table .username,
 947 #block_list .username {
 948   max-width: 20em;
 949 }
 950
 951 /* Rules for navigation tabs */
 952
 953 .nav-tabs .username {
 954   max-width: 20em;
 955 }
 956
 957 .bg-body-secondary .nav-tabs {
 958   --bs-border-color: var(--bs-secondary-border-subtle);
 959   --bs-secondary-bg: var(--bs-secondary-border-subtle);
 960   margin-bottom: -1px;
 961 }
 962
 963 /* Rules for traces */
 964
 965 img.trace_image {
 966   mix-blend-mode: darken;
 967 }
 968
 969 @include color-mode(dark) {
 970   img.trace_image {
 971     filter: invert(1);
 972     mix-blend-mode: lighten;
 973   }
 974 }
 975
 976 /* Rules for the heatmap */
 977
 978 .heatmap {
 979   grid-template-columns: auto;
 980   grid-auto-columns: minmax(1em, 1fr);
 981   grid-template-rows: auto;
 982   grid-auto-rows: minmax(1em, 1fr);
 983   font-size: x-small;
 984   gap: 0.3em;
 985
 986   [data-date], [data-date] span {
 987     display: block;
 988     aspect-ratio: 1;
 989     border-radius: 25%;
 990   }
 991
 992   [data-date] {
 993     background-color: #ededed;
 994     span {
 995       background-color: #14432a;
 996     }
 997     &[data-count] {
 998       background-color: #4dd05a;
 999     }
1000     &:hover {
1001       box-shadow: 0px 0px 0px 1px #8884;
1002     }
1003   }
1004 }
1005
1006 @include color-mode(dark) {
1007   .heatmap {
1008     [data-date] {
1009       background-color: #2d333b;
1010       span {
1011         background-color: #4dd05a;
1012       }
1013       &[data-count] {
1014         background-color: #14432a;
1015       }
1016     }
1017   }
1018 }
1019
1020 .tooltip.wide {
1021   --bs-tooltip-max-width: none;
1022 }