@stackoverflow/stacks 3.0.0-beta.27 → 3.0.0-beta.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -10432,8 +10432,7 @@ ol {
10432
10432
  .v-hidden {
10433
10433
  visibility: hidden !important;
10434
10434
  }
10435
- .v-visible-sr,
10436
- .s-topbar .s-topbar--skip-link:not(:focus) {
10435
+ .v-visible-sr {
10437
10436
  border: 0;
10438
10437
  /* stylelint-disable-next-line property-no-deprecated -- clip is kept for older browser compatibility alongside clip-path */
10439
10438
  clip: rect(var(--su1), var(--su1), var(--su1), var(--su1));
@@ -11496,40 +11495,6 @@ body.theme-highcontrast.theme-dark .s-bling.s-bling__filled.s-bling__bronze {
11496
11495
  height: var(--_bl-icon-size);
11497
11496
  width: var(--_bl-icon-size);
11498
11497
  }
11499
- .s-breadcrumbs {
11500
- --_br-divider-px: var(--su4);
11501
- --_br-link-fc: var(--fc-light);
11502
- align-items: flex-start;
11503
- color: var(--black-300);
11504
- display: flex;
11505
- flex-wrap: wrap;
11506
- font-size: var(--fs-caption);
11507
- }
11508
- @media (max-width: 48.75rem) {
11509
- .s-breadcrumbs {
11510
- --_br-divider-px: var(--su2);
11511
- }
11512
- }
11513
- .s-breadcrumbs .s-breadcrumbs--divider {
11514
- margin-left: var(--_br-divider-px);
11515
- margin-right: var(--_br-divider-px);
11516
- }
11517
- body.theme-highcontrast .s-breadcrumbs .s-breadcrumbs--divider {
11518
- color: var(--fc-light);
11519
- }
11520
- .s-breadcrumbs .s-breadcrumbs--item {
11521
- align-items: center;
11522
- display: flex;
11523
- flex-wrap: nowrap;
11524
- margin-bottom: var(--su2);
11525
- margin-top: var(--su2);
11526
- }
11527
- .s-breadcrumbs .s-breadcrumbs--link {
11528
- color: var(--_br-link-fc);
11529
- }
11530
- .s-breadcrumbs .s-breadcrumbs--link:hover {
11531
- --_br-link-fc: var(--fc-medium);
11532
- }
11533
11498
  .s-btn {
11534
11499
  --_bu-baw: var(--su1);
11535
11500
  --_bu-br: var(--br-pill);
@@ -12023,101 +11988,6 @@ fieldset[disabled] .s-btn:hover .s-btn--badge .s-btn--number,
12023
11988
  .s-btn[aria-disabled="true"]:hover .s-btn--badge .s-btn--number {
12024
11989
  color: var(--_bu-badge-fc-disabled);
12025
11990
  }
12026
- .s-btn-group {
12027
- border: var(--su1) solid var(--black-300);
12028
- border-radius: var(--br-md);
12029
- display: inline-flex;
12030
- flex-wrap: wrap;
12031
- padding: var(--su3);
12032
- }
12033
- @media (max-width: 48.75rem) {
12034
- html .s-btn-group .s-btn {
12035
- --_bu-px: 0.4em;
12036
- }
12037
- html .s-btn-group .s-btn.s-btn__dropdown {
12038
- padding-right: 1.2em;
12039
- }
12040
- html .s-btn-group .s-btn.s-btn__dropdown:after {
12041
- right: var(--_bu-px);
12042
- }
12043
- }
12044
- .s-btn-group form {
12045
- display: flex;
12046
- margin-right: var(--sun1);
12047
- }
12048
- .s-btn-group .s-btn {
12049
- --_bu-br: var(--br-md);
12050
- --_bu-bc-hover: transparent;
12051
- --_bu-px: calc(var(--su12) - var(--su1));
12052
- --_bu-py: calc(var(--su6) + 0.65px);
12053
- font-weight: 400;
12054
- white-space: nowrap;
12055
- }
12056
- .s-btn-group .s-btn.s-btn__xs {
12057
- --_bu-px: calc(var(--su8) - var(--su1));
12058
- --_bu-py: calc(var(--su2) + 0.9px);
12059
- }
12060
- .s-btn-group .s-btn.s-btn__sm {
12061
- --_bu-px: calc(var(--su8) + var(--su1));
12062
- --_bu-py: calc(var(--su4) + (var(--su2) - 0.15px));
12063
- }
12064
- .s-btn-group .s-btn.s-btn__md {
12065
- --_bu-px: var(--su12);
12066
- --_bu-py: calc(var(--su8) + 0.15px);
12067
- }
12068
- .s-btn-group .s-btn.is-selected,
12069
- .s-btn-group .s-btn--radio:checked + .s-btn {
12070
- font-weight: bold;
12071
- }
12072
- .s-btn-group .s-btn .s-btn--badge {
12073
- margin-bottom: -100%;
12074
- margin-top: -100%;
12075
- font-weight: normal;
12076
- }
12077
- .s-btn-group .s-btn .s-btn--text {
12078
- display: inline-flex;
12079
- flex-direction: column;
12080
- }
12081
- .s-btn-group .s-btn .s-btn--text:before {
12082
- content: attr(data-text);
12083
- font-weight: bold;
12084
- height: 0;
12085
- pointer-events: none;
12086
- user-select: none;
12087
- visibility: hidden;
12088
- }
12089
- .s-card {
12090
- --_ca-bc: var(--bc-medium);
12091
- border: var(--su1) solid var(--_ca-bc);
12092
- background-color: var(--white);
12093
- border-radius: var(--br-md);
12094
- padding: var(--su12);
12095
- }
12096
- a.s-card {
12097
- text-decoration: none !important;
12098
- }
12099
- .s-card.s-card__muted {
12100
- --_ca-bc: var(--bc-light);
12101
- }
12102
- .s-card.s-card__muted > * {
12103
- opacity: 0.65;
12104
- }
12105
- @media (prefers-color-scheme: dark) {
12106
- body.theme-system .s-card.s-card__muted > * {
12107
- opacity: 0.7;
12108
- }
12109
- }
12110
- body.theme-dark .s-card.s-card__muted > *,
12111
- .theme-dark__forced .s-card.s-card__muted > *,
12112
- body.theme-system .theme-dark__forced .s-card.s-card__muted > * {
12113
- opacity: 0.7;
12114
- }
12115
- body.theme-highcontrast .s-card.s-card__muted > * {
12116
- opacity: 0.75;
12117
- }
12118
- .s-card > :last-child {
12119
- margin-bottom: 0;
12120
- }
12121
11991
  .s-checkbox,
12122
11992
  .s-radio {
12123
11993
  --_ch-ai: center;
@@ -12594,64 +12464,6 @@ pre.s-code-block::-webkit-scrollbar-corner {
12594
12464
  .s-empty-state:last-child {
12595
12465
  margin-bottom: 0;
12596
12466
  }
12597
- .s-expandable {
12598
- --_ex-after-h: 10px;
12599
- --_ex-after-hmx: 0;
12600
- --_ex-after-transition: height 100ms linear, max-height 0s 100ms linear;
12601
- --_ex-content-hmx: 1000000px;
12602
- --_ex-content-mb: 0;
12603
- --_ex-content-o: unset;
12604
- --_ex-content-transform: unset;
12605
- --_ex-content-transition: margin-bottom 100ms cubic-bezier(0, 0, 0, 1), transform 100ms cubic-bezier(1, 0, 1, 1), opacity 100ms cubic-bezier(1, 0, 1, 1);
12606
- --_ex-content-v: unset;
12607
- align-items: flex-start;
12608
- display: flex;
12609
- -webkit-clip-path: polygon(-1000000px -1000000px, 1000000px -1000000px, 1000000px 1000000px, -1000000px 1000000px);
12610
- clip-path: polygon(-1000000px -1000000px, 1000000px -1000000px, 1000000px 1000000px, -1000000px 1000000px);
12611
- transition: clip-path 0s var(--_ex-transition-duration), -webkit-clip-path 0s var(--_ex-transition-duration);
12612
- }
12613
- .s-expandable:not(.is-expanded) {
12614
- --_ex-after-h: 0;
12615
- --_ex-after-hmx: 10px;
12616
- --_ex-after-transition: height 10px linear;
12617
- --_ex-content-hmx: 0;
12618
- --_ex-content-mb: -1500px;
12619
- --_ex-content-o: 0;
12620
- --_ex-content-transform: scaleY(0);
12621
- --_ex-content-transition: margin-bottom 100ms cubic-bezier(1, 0, 1, 1), visibility 0s 100ms, max-height 0s 100ms, transform 100ms cubic-bezier(0, 1, 1, 1), opacity 100ms cubic-bezier(0, 1, 1, 1);
12622
- --_ex-content-v: hidden;
12623
- -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
12624
- clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
12625
- overflow: hidden;
12626
- transition: none;
12627
- }
12628
- @supports ((-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)) or (clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%))) {
12629
- .s-expandable:not(.is-expanded) .s-expandable--content {
12630
- --_ex-content-o: 0;
12631
- --_ex-content-transform: none;
12632
- }
12633
- }
12634
- .s-expandable:after {
12635
- height: var(--_ex-after-h);
12636
- max-height: var(--_ex-after-hmx);
12637
- transition: var(--_ex-after-transition);
12638
- -ms-flex-preferred-size: 0;
12639
- content: '';
12640
- flex-basis: 0;
12641
- }
12642
- .s-expandable .s-expandable--content {
12643
- max-height: var(--_ex-content-hmx);
12644
- margin-bottom: var(--_ex-content-mb);
12645
- opacity: var(--_ex-content-o);
12646
- -webkit-transform: var(--_ex-content-transform);
12647
- transform: var(--_ex-content-transform);
12648
- visibility: var(--_ex-content-v);
12649
- -ms-flex-preferred-size: 100%;
12650
- flex-basis: 100%;
12651
- -webkit-transform-origin: 0 0;
12652
- transform-origin: 0 0;
12653
- transition: var(--_ex-content-transition);
12654
- }
12655
12467
  .s-input,
12656
12468
  .s-textarea,
12657
12469
  :has(> .s-textarea) {
@@ -13095,123 +12907,82 @@ p .s-link {
13095
12907
  .s-link:visited:hover {
13096
12908
  color: var(--_li-fc-hover);
13097
12909
  }
13098
- .s-link-preview {
13099
- --_lp-details-fc: var(--black-400);
13100
- --_lp-details-mt: var(--su2);
13101
- --_lp-footer-bg: var(--black-100);
13102
- --_lp-footer-fd: unset;
13103
- --_lp-header-bg: var(--black-100);
13104
- --_lp-misc-pl: var(--su4);
13105
- --_lp-misc-pt: unset;
13106
- border: var(--su1) solid var(--bc-medium);
13107
- border-radius: var(--br-md);
13108
- box-shadow: var(--bs-sm);
13109
- text-align: left;
13110
- }
13111
- @media (max-width: 48.75rem) {
13112
- .s-link-preview {
13113
- --_lp-details-mt: var(--su4);
13114
- --_lp-footer-fd: column;
13115
- --_lp-misc-pl: 0;
13116
- --_lp-misc-pt: var(--su2);
13117
- }
13118
- }
13119
- body.theme-highcontrast .s-link-preview {
13120
- --_lp-details-fc: var(--black-600);
13121
- --_lp-footer-bg: var(--black-050);
13122
- --_lp-header-bg: var(--black-050);
13123
- }
13124
- .s-link-preview .s-link-preview--details a,
13125
- .s-link-preview .s-link-preview--footer a {
13126
- color: var(--black-600);
13127
- cursor: pointer;
13128
- text-decoration: none;
13129
- }
13130
- .s-link-preview .s-link-preview--details a:hover,
13131
- .s-link-preview .s-link-preview--footer a:hover,
13132
- .s-link-preview .s-link-preview--details a:active,
13133
- .s-link-preview .s-link-preview--footer a:active,
13134
- .s-link-preview .s-link-preview--details a:focus,
13135
- .s-link-preview .s-link-preview--footer a:focus,
13136
- .s-link-preview .s-link-preview--details a:visited,
13137
- .s-link-preview .s-link-preview--footer a:visited {
13138
- color: var(--black-500);
13139
- }
13140
- .s-link-preview .s-link-preview--body {
13141
- font-size: var(--fs-body2);
13142
- padding: var(--su12);
13143
- }
13144
- .s-link-preview .s-link-preview--body *:last-child {
13145
- margin-bottom: 0;
13146
- }
13147
- .s-link-preview .s-link-preview--code pre {
13148
- border-radius: 0 !important;
13149
- margin: 0;
13150
- max-height: 400px;
13151
- }
13152
- .s-link-preview .s-link-preview--details {
13153
- color: var(--_lp-details-fc);
13154
- margin-top: var(--_lp-details-mt);
13155
- font-size: var(--fs-caption);
13156
- }
13157
- .s-link-preview .s-link-preview--footer {
13158
- background: var(--_lp-footer-bg);
13159
- flex-direction: var(--_lp-footer-fd);
13160
- border-bottom-left-radius: var(--br-md);
13161
- border-bottom-right-radius: var(--br-md);
13162
- border-top: var(--su1) solid var(--bc-medium);
13163
- display: flex;
13164
- font-size: var(--fs-caption);
13165
- justify-content: space-between;
13166
- padding: var(--su12);
13167
- }
13168
- .s-link-preview .s-link-preview--header {
13169
- background: var(--_lp-header-bg);
13170
- border-bottom: var(--su1) solid var(--bc-medium);
13171
- border-top-left-radius: var(--br-md);
13172
- border-top-right-radius: var(--br-md);
12910
+ .s-loader {
12911
+ --_ld-color: var(--black-600);
12912
+ --_ld-gap: calc(var(--_ld-size) / 2);
12913
+ --_ld-size: calc(var(--su4) + var(--su1));
12914
+ --_ld-offset: calc(calc(var(--_ld-size) / 8) * -5);
13173
12915
  display: flex;
13174
- padding: var(--su12) var(--su8);
12916
+ gap: var(--_ld-gap);
12917
+ margin-top: var(--_ld-gap);
13175
12918
  }
13176
- .s-link-preview .s-link-preview--icon {
13177
- color: var(--black-600);
13178
- margin-right: var(--su8);
12919
+ .s-loader__sm {
12920
+ --_ld-size: calc(calc(var(--su8) - var(--su1)) / 2);
12921
+ margin-left: var(--su1);
12922
+ margin-right: var(--su1);
13179
12923
  }
13180
- .s-link-preview .s-link-preview--misc {
13181
- padding-left: var(--_lp-misc-pl);
13182
- padding-top: var(--_lp-misc-pt);
13183
- color: var(--black-400);
12924
+ .s-loader__lg {
12925
+ --_ld-size: var(--su8);
13184
12926
  }
13185
- .s-link-preview .s-link-preview--title {
13186
- color: var(--black-600);
13187
- font-size: var(--fs-body3);
13188
- font-weight: bold;
12927
+ .s-loader:before,
12928
+ .s-loader .s-loader--sr-text:before,
12929
+ .s-loader:after {
12930
+ background-color: currentColor;
12931
+ content: "";
12932
+ display: block;
12933
+ height: var(--_ld-size);
12934
+ width: var(--_ld-size);
12935
+ animation: loader-animation 0.8s cubic-bezier(1, 1, 0, 1) infinite;
13189
12936
  }
13190
- .s-link-preview a.s-link-preview--title {
13191
- color: var(--theme-link-color, var(--theme-secondary));
13192
- cursor: pointer;
13193
- text-decoration: none;
12937
+ .s-loader .s-loader--sr-text {
12938
+ display: block;
12939
+ flex-shrink: 0;
12940
+ height: var(--_ld-size);
12941
+ width: var(--_ld-size);
12942
+ font-size: 0;
12943
+ overflow: visible;
13194
12944
  }
13195
- .s-link-preview a.s-link-preview--title:active,
13196
- .s-link-preview a.s-link-preview--title:hover {
13197
- color: var(--theme-link-color-hover, var(--theme-secondary-500));
13198
- text-decoration: none;
12945
+ .s-loader .s-loader--sr-text:before {
12946
+ animation-delay: 0.25s;
13199
12947
  }
13200
- body.theme-highcontrast .s-link-preview a.s-link-preview--title:active,
13201
- body.theme-highcontrast .s-link-preview a.s-link-preview--title:hover {
13202
- text-decoration: underline;
12948
+ .s-loader:after {
12949
+ animation-delay: 0.5s;
13203
12950
  }
13204
- .s-link-preview a.s-link-preview--title:visited {
13205
- color: var(--theme-link-color, var(--purple-500));
12951
+ @media (prefers-reduced-motion: reduce) {
12952
+ .s-loader:before,
12953
+ .s-loader .s-loader--sr-text:before,
12954
+ .s-loader:after {
12955
+ animation: loader-animation-reduced-motion 2s ease-in-out infinite;
12956
+ }
13206
12957
  }
13207
- .s-link-preview a.s-link-preview--title:visited:hover {
13208
- color: var(--theme-link-color, var(--purple-600));
12958
+ @keyframes loader-animation {
12959
+ 0%,
12960
+ 1%,
12961
+ 99%,
12962
+ to {
12963
+ opacity: 0.2;
12964
+ transform: translateY(0);
12965
+ }
12966
+ 49%,
12967
+ 50% {
12968
+ opacity: 1;
12969
+ transform: translateY(var(--_ld-offset));
12970
+ }
12971
+ 51% {
12972
+ opacity: 0.2;
12973
+ transform: translateY(var(--_ld-offset));
12974
+ }
13209
12975
  }
13210
- .s-link-preview .s-link-preview--url {
13211
- max-width: 100%;
13212
- overflow: hidden;
13213
- text-overflow: ellipsis !important;
13214
- white-space: nowrap;
12976
+ @keyframes loader-animation-reduced-motion {
12977
+ 0%,
12978
+ to {
12979
+ opacity: 0.3;
12980
+ transform: none;
12981
+ }
12982
+ 50% {
12983
+ opacity: 1;
12984
+ transform: none;
12985
+ }
13215
12986
  }
13216
12987
  .s-menu {
13217
12988
  --_me-action-bg: unset;
@@ -13884,55 +13655,6 @@ button.s-notice--dismiss.focus-inset-bordered {
13884
13655
  margin-top: calc(var(--_no-pd) * -1);
13885
13656
  margin-bottom: calc(var(--_no-pd) * -1);
13886
13657
  }
13887
- .s-page-title {
13888
- --_pt-ai: flex-end;
13889
- --_pt-fd: row;
13890
- --_pt-actions-ml: var(--su8);
13891
- --_pt-actions-mt: unset;
13892
- --_pt-breadcrums-mb: var(--su8);
13893
- align-items: var(--_pt-ai);
13894
- flex-direction: var(--_pt-fd);
13895
- border-bottom: var(--su1) solid var(--bc-medium);
13896
- display: flex;
13897
- justify-content: space-between;
13898
- padding-bottom: var(--su16);
13899
- width: 100%;
13900
- }
13901
- @media (max-width: 48.75rem) {
13902
- .s-page-title {
13903
- --_pt-breadcrums-mb: var(--su2);
13904
- }
13905
- }
13906
- @media (max-width: 71.875rem) {
13907
- .s-page-title {
13908
- --_pt-ai: flex-start;
13909
- --_pt-fd: column;
13910
- --_pt-actions-ml: 0;
13911
- --_pt-actions-mt: var(--su8);
13912
- }
13913
- }
13914
- .s-page-title .s-page-title--actions {
13915
- margin-left: var(--_pt-actions-ml);
13916
- margin-top: var(--_pt-actions-mt);
13917
- flex-shrink: 0;
13918
- }
13919
- .s-page-title .s-page-title--description {
13920
- color: var(--fc-light);
13921
- font-size: var(--fs-body2);
13922
- margin-bottom: 0;
13923
- margin-top: var(--su4);
13924
- }
13925
- .s-page-title .s-page-title--header {
13926
- color: var(--fc-dark);
13927
- font-size: var(--fs-headline1);
13928
- font-weight: bold;
13929
- line-height: var(--lh-sm);
13930
- margin: 0;
13931
- margin-bottom: 0;
13932
- }
13933
- .s-page-title .s-breadcrumbs {
13934
- margin-bottom: var(--_pt-breadcrums-mb);
13935
- }
13936
13658
  .s-pagination ul,
13937
13659
  ul.s-pagination {
13938
13660
  list-style: none;
@@ -14282,6 +14004,8 @@ body.theme-highcontrast .s-post-summary__deleted * {
14282
14004
  display: flex;
14283
14005
  gap: var(--su6);
14284
14006
  line-height: 1.563rem;
14007
+ overflow-wrap: break-word;
14008
+ hyphens: auto;
14285
14009
  }
14286
14010
  .s-post-summary .s-post-summary--title-link {
14287
14011
  color: var(--_ps-title-link-fc);
@@ -14304,282 +14028,56 @@ body.theme-highcontrast .s-post-summary__deleted * {
14304
14028
  .s-post-summary .s-post-summary--title-icon {
14305
14029
  flex-shrink: 0;
14306
14030
  }
14307
- .s-progress {
14308
- --_pr-bar: var(--br-md);
14309
- --_pr-bg: var(--black-300);
14310
- --_pr-h: unset;
14311
- --_pr-size: unset;
14312
- --_pr-w: 100%;
14313
- --_pr-hmn: var(--su4);
14314
- --_pr-bar-bar: var(--br-md);
14315
- --_pr-bar-bg: var(--green-400);
14316
- --_pr-bar-hmn: var(--su4);
14317
- --_pr-label-ai: unset;
14318
- --_pr-label-bc: transparent;
14319
- --_pr-label-d: unset;
14320
- --_pr-label-g: unset;
14321
- --_pr-label-jc: unset;
14322
- --_pr-label-px: unset;
14323
- background-color: var(--_pr-bg);
14324
- border-radius: var(--_pr-bar);
14325
- height: var(--_pr-size, var(--_pr-h));
14326
- min-height: var(--_pr-hmn);
14327
- min-width: var(--su6);
14328
- position: relative;
14329
- width: var(--_pr-size, var(--_pr-w));
14330
- }
14331
- .s-progress.s-progress__brand {
14332
- --_pr-bar-bg: var(--orange-400);
14333
- }
14334
- .s-progress.s-progress__bronze {
14335
- --_pr-bar-bg: var(--orange-100);
14336
- --_pr-label-bc: var(--orange-400);
14337
- }
14338
- .s-progress.s-progress__gold {
14339
- --_pr-bar-bg: var(--yellow-100);
14340
- --_pr-label-bc: var(--yellow-400);
14341
- }
14342
- .s-progress.s-progress__info {
14343
- --_pr-bar-bg: var(--blue-400);
14031
+ .s-prose {
14032
+ --_pr-fs: unset;
14033
+ --_pr-lh: 1.5;
14034
+ --_pr-blockquote-ml: 1em;
14035
+ --_pr-blockquote-mt: 0;
14036
+ --_pr-blockquote-before-bg: var(--black-250);
14037
+ --_pr-code-fs: var(--fs-body1);
14038
+ --_pr-h1-fs: var(--fs-headline1);
14039
+ --_pr-h2-fs: var(--fs-title);
14040
+ --_pr-h3-fs: var(--fs-subheading);
14041
+ --_pr-h4-fs: var(--fs-body3);
14042
+ --_pr-h5-fs: var(--fs-body2);
14043
+ --_pr-h6-fs: var(--fs-body1);
14044
+ --_pr-hr-bg: var(--black-225);
14045
+ --_pr-img-mb: 1.1em;
14046
+ --_pr-kbd-bc: var(--black-300);
14047
+ --_pr-kbd-bs: 0 var(--su1) var(--su1) hsla(210, 8%, 5%, 0.15), inset 0 1px 0 0 var(--_white-static);
14048
+ --_pr-spoiler-cursor: pointer;
14049
+ --_pr-spoiler-after-t: 1em;
14050
+ --_pr-soiler-after-o: unset;
14051
+ --_pr-soiler-child-o: 0;
14052
+ --_pr-soiler-child-visibility: hidden;
14053
+ --s-prose-spacing: 1.1em;
14054
+ --s-prose-spacing-condensed: calc(1.1em / 2);
14055
+ font-size: var(--_pr-fs);
14056
+ line-height: var(--_pr-lh);
14057
+ overflow-wrap: break-word;
14344
14058
  }
14345
- .s-progress.s-progress__silver {
14346
- --_pr-bar-bg: var(--blue-100);
14347
- --_pr-label-bc: var(--blue-400);
14059
+ @media (prefers-color-scheme: dark) {
14060
+ body.theme-system .s-prose {
14061
+ --_pr-kbd-bc: transparent;
14062
+ --_pr-kbd-btc: var(--black-400);
14063
+ --_pr-kbd-bs: 0 var(--su1) var(--su1) hsla(210, 8%, 5%, 0.8);
14064
+ }
14348
14065
  }
14349
- .s-progress.s-progress__badge,
14350
- .s-progress.s-progress__privilege {
14351
- --_pr-bar: var(--br-md);
14352
- --_pr-bg: transparent;
14353
- --_pr-hmn: 2em;
14354
- --_pr-bar-bar: var(--br-md);
14355
- --_pr-bar-hmn: 2em;
14356
- --_pr-label-d: flex;
14357
- --_pr-label-g: var(--su4);
14066
+ body.theme-dark .s-prose,
14067
+ .theme-dark__forced .s-prose,
14068
+ body.theme-system .theme-dark__forced .s-prose {
14069
+ --_pr-kbd-bc: transparent;
14070
+ --_pr-kbd-btc: var(--black-400);
14071
+ --_pr-kbd-bs: 0 var(--su1) var(--su1) hsla(210, 8%, 5%, 0.8);
14358
14072
  }
14359
- .s-progress.s-progress__badge {
14360
- --_pr-label-ai: center;
14361
- --_pr-label-px: 1em;
14073
+ body.theme-highcontrast .s-prose {
14074
+ --_pr-blockquote-before-bg: var(--black-500);
14075
+ --_pr-hr-bg: var(--black-400);
14362
14076
  }
14363
- .s-progress.s-progress__badge .s-progress--label .s-badge--label {
14364
- flex-grow: 1;
14365
- text-align: center;
14366
- }
14367
- .s-progress.s-progress__circular {
14368
- --_pr-bg: transparent;
14369
- --_pr-size: var(--su32);
14370
- --s-progress-value: 0;
14371
- }
14372
- .s-progress.s-progress__circular.s-progress__sm {
14373
- --_pr-size: var(--su24);
14374
- }
14375
- .s-progress.s-progress__circular.s-progress__md {
14376
- --_pr-size: var(--su48);
14377
- }
14378
- .s-progress.s-progress__circular.s-progress__lg {
14379
- --_pr-size: var(--su64);
14380
- }
14381
- .s-progress.s-progress__circular .s-progress-bar {
14382
- transform: rotate(270deg);
14383
- }
14384
- .s-progress.s-progress__circular .s-progress-bar circle {
14385
- fill: none;
14386
- stroke-linecap: round;
14387
- stroke-width: var(--su4);
14388
- }
14389
- .s-progress.s-progress__circular .s-progress-bar circle:nth-of-type(1) {
14390
- opacity: 0.4;
14391
- stroke: currentColor;
14392
- }
14393
- .s-progress.s-progress__circular .s-progress-bar circle:nth-of-type(2) {
14394
- stroke: currentColor;
14395
- stroke-dasharray: 87.9645943;
14396
- stroke-dashoffset: calc(((1 - var(--s-progress-value)) * 87.9645943) * 1px);
14397
- }
14398
- .s-progress.s-progress__privilege {
14399
- --_pr-bar-bg: var(--green-200);
14400
- --_pr-label-ai: center;
14401
- --_pr-label-bc: var(--green-400);
14402
- --_pr-label-jc: center;
14403
- }
14404
- body.theme-highcontrast .s-progress.s-progress__privilege {
14405
- --_pr-bar-bg: var(--green-300);
14406
- }
14407
- .s-progress.s-progress__stepped {
14408
- background: transparent;
14409
- display: flex;
14410
- }
14411
- .s-progress.s-progress__stepped .s-progress--bar {
14412
- background: var(--black-250);
14413
- border-radius: 0;
14414
- height: var(--su6);
14415
- position: absolute;
14416
- top: calc(var(--su8) + var(--su1));
14417
- z-index: var(--zi-base);
14418
- }
14419
- .s-progress.s-progress__stepped .s-progress--bar.s-progress--bar__left {
14420
- left: 0;
14421
- right: 50%;
14422
- }
14423
- .s-progress.s-progress__stepped .s-progress--bar.s-progress--bar__right {
14424
- left: 50%;
14425
- right: 0;
14426
- }
14427
- .s-progress.s-progress__stepped .s-progress--label {
14428
- border: 0;
14429
- border-radius: 0;
14430
- color: var(--black-400);
14431
- display: block;
14432
- font-size: var(--fs-body1);
14433
- height: auto;
14434
- padding: var(--su12) var(--su6) 0 var(--su6);
14435
- position: static;
14436
- text-align: center;
14437
- width: auto;
14438
- z-index: var(--zi-base);
14439
- }
14440
- .s-progress.s-progress__stepped .s-progress--step {
14441
- align-items: center;
14442
- display: flex;
14443
- flex-basis: 0;
14444
- flex-direction: column;
14445
- flex-grow: 1;
14446
- flex-shrink: 1;
14447
- position: relative;
14448
- }
14449
- .s-progress.s-progress__stepped .s-progress--step.is-active .s-progress--bar.s-progress--bar__left {
14450
- background: var(--theme-secondary);
14451
- }
14452
- .s-progress.s-progress__stepped .s-progress--step.is-active .s-progress--label {
14453
- color: var(--fc-dark);
14454
- }
14455
- .s-progress.s-progress__stepped .s-progress--step.is-active .s-progress--stop {
14456
- background: var(--theme-secondary);
14457
- box-shadow: 0 0 0 var(--su6) var(--translucent-secondary);
14458
- }
14459
- .s-progress.s-progress__stepped .s-progress--step.is-complete .s-progress--bar,
14460
- .s-progress.s-progress__stepped .s-progress--step.is-complete .s-progress--stop {
14461
- background: var(--theme-secondary);
14462
- }
14463
- .s-progress.s-progress__stepped .s-progress--step.is-complete .s-progress--label {
14464
- color: var(--fc-dark);
14465
- }
14466
- .s-progress.s-progress__stepped .s-progress--stop {
14467
- align-items: center;
14468
- background: var(--black-250);
14469
- border-radius: 100%;
14470
- color: var(--_white-static);
14471
- display: flex;
14472
- height: var(--su24);
14473
- justify-content: center;
14474
- position: relative;
14475
- width: var(--su24);
14476
- z-index: var(--zi-selected);
14477
- }
14478
- body.theme-highcontrast .s-progress.s-progress__stepped .s-progress--stop {
14479
- color: var(--white);
14480
- }
14481
- .s-progress .s-progress--bar {
14482
- background-color: var(--_pr-bar-bg);
14483
- border-radius: var(--_pr-bar);
14484
- min-height: var(--_pr-hmn);
14485
- height: 100%;
14486
- min-width: var(--su6);
14487
- position: relative;
14488
- }
14489
- .s-progress .s-progress--label {
14490
- align-items: var(--_pr-label-ai);
14491
- border: var(--su1) solid var(--_pr-label-bc);
14492
- display: var(--_pr-label-d);
14493
- gap: var(--_pr-label-g);
14494
- justify-content: var(--_pr-label-jc);
14495
- padding-left: var(--_pr-label-px);
14496
- padding-right: var(--_pr-label-px);
14497
- border-radius: var(--br-md);
14498
- color: var(--fc-dark);
14499
- font-size: var(--fs-caption);
14500
- height: 100%;
14501
- line-height: var(--lh-xs);
14502
- position: absolute;
14503
- width: 100%;
14504
- z-index: calc(var(--zi-base) + 2);
14505
- }
14506
- .s-progress .s-progress--segments {
14507
- display: flex;
14508
- height: 100%;
14509
- justify-content: space-between;
14510
- list-style: none;
14511
- margin: 0;
14512
- padding: 0;
14513
- position: absolute;
14514
- top: 0;
14515
- width: 100%;
14516
- }
14517
- .s-progress .s-progress--segments li {
14518
- display: block;
14519
- padding-top: var(--su4);
14520
- position: relative;
14521
- text-align: center;
14522
- }
14523
- .s-progress .s-progress--segments li:not(:first-child):not(:last-child):before {
14524
- background-color: var(--white);
14525
- content: "";
14526
- display: block;
14527
- height: 100%;
14528
- left: var(--sun1);
14529
- position: absolute;
14530
- top: 0;
14531
- width: var(--su4);
14532
- }
14533
- .s-prose {
14534
- --_pr-fs: unset;
14535
- --_pr-lh: 1.5;
14536
- --_pr-blockquote-ml: 1em;
14537
- --_pr-blockquote-mt: 0;
14538
- --_pr-blockquote-before-bg: var(--black-250);
14539
- --_pr-code-fs: var(--fs-body1);
14540
- --_pr-h1-fs: var(--fs-headline1);
14541
- --_pr-h2-fs: var(--fs-title);
14542
- --_pr-h3-fs: var(--fs-subheading);
14543
- --_pr-h4-fs: var(--fs-body3);
14544
- --_pr-h5-fs: var(--fs-body2);
14545
- --_pr-h6-fs: var(--fs-body1);
14546
- --_pr-hr-bg: var(--black-225);
14547
- --_pr-img-mb: 1.1em;
14548
- --_pr-kbd-bc: var(--black-300);
14549
- --_pr-kbd-bs: 0 var(--su1) var(--su1) hsla(210, 8%, 5%, 0.15), inset 0 1px 0 0 var(--_white-static);
14550
- --_pr-spoiler-cursor: pointer;
14551
- --_pr-spoiler-after-t: 1em;
14552
- --_pr-soiler-after-o: unset;
14553
- --_pr-soiler-child-o: 0;
14554
- --_pr-soiler-child-visibility: hidden;
14555
- --s-prose-spacing: 1.1em;
14556
- --s-prose-spacing-condensed: calc(1.1em / 2);
14557
- font-size: var(--_pr-fs);
14558
- line-height: var(--_pr-lh);
14559
- overflow-wrap: break-word;
14560
- }
14561
- @media (prefers-color-scheme: dark) {
14562
- body.theme-system .s-prose {
14563
- --_pr-kbd-bc: transparent;
14564
- --_pr-kbd-btc: var(--black-400);
14565
- --_pr-kbd-bs: 0 var(--su1) var(--su1) hsla(210, 8%, 5%, 0.8);
14566
- }
14567
- }
14568
- body.theme-dark .s-prose,
14569
- .theme-dark__forced .s-prose,
14570
- body.theme-system .theme-dark__forced .s-prose {
14571
- --_pr-kbd-bc: transparent;
14572
- --_pr-kbd-btc: var(--black-400);
14573
- --_pr-kbd-bs: 0 var(--su1) var(--su1) hsla(210, 8%, 5%, 0.8);
14574
- }
14575
- body.theme-highcontrast .s-prose {
14576
- --_pr-blockquote-before-bg: var(--black-500);
14577
- --_pr-hr-bg: var(--black-400);
14578
- }
14579
- @media (max-width: 48.75rem) {
14580
- .s-prose {
14581
- --_pr-spoiler-after-t: calc(var(--su8) + var(--su1));
14582
- }
14077
+ @media (max-width: 48.75rem) {
14078
+ .s-prose {
14079
+ --_pr-spoiler-after-t: calc(var(--su8) + var(--su1));
14080
+ }
14583
14081
  }
14584
14082
  .s-prose.s-prose__sm {
14585
14083
  --_pr-h1-fs: 1.75em;
@@ -15193,83 +14691,6 @@ body.theme-highcontrast .is-readonly .s-select > select {
15193
14691
  .s-sidebarwidget .s-sidebarwidget--action:is(a, button) {
15194
14692
  white-space: nowrap;
15195
14693
  }
15196
- .s-loader {
15197
- --_ld-color: var(--black-600);
15198
- --_ld-gap: calc(var(--_ld-size) / 2);
15199
- --_ld-size: calc(var(--su4) + var(--su1));
15200
- --_ld-offset: calc(calc(var(--_ld-size) / 8) * -5);
15201
- display: flex;
15202
- gap: var(--_ld-gap);
15203
- margin-top: var(--_ld-gap);
15204
- }
15205
- .s-loader__sm {
15206
- --_ld-size: calc(calc(var(--su8) - var(--su1)) / 2);
15207
- margin-left: var(--su1);
15208
- margin-right: var(--su1);
15209
- }
15210
- .s-loader__lg {
15211
- --_ld-size: var(--su8);
15212
- }
15213
- .s-loader:before,
15214
- .s-loader .s-loader--sr-text:before,
15215
- .s-loader:after {
15216
- background-color: currentColor;
15217
- content: "";
15218
- display: block;
15219
- height: var(--_ld-size);
15220
- width: var(--_ld-size);
15221
- animation: loader-animation 0.8s cubic-bezier(1, 1, 0, 1) infinite;
15222
- }
15223
- .s-loader .s-loader--sr-text {
15224
- display: block;
15225
- flex-shrink: 0;
15226
- height: var(--_ld-size);
15227
- width: var(--_ld-size);
15228
- font-size: 0;
15229
- overflow: visible;
15230
- }
15231
- .s-loader .s-loader--sr-text:before {
15232
- animation-delay: 0.25s;
15233
- }
15234
- .s-loader:after {
15235
- animation-delay: 0.5s;
15236
- }
15237
- @media (prefers-reduced-motion: reduce) {
15238
- .s-loader:before,
15239
- .s-loader .s-loader--sr-text:before,
15240
- .s-loader:after {
15241
- animation: loader-animation-reduced-motion 2s ease-in-out infinite;
15242
- }
15243
- }
15244
- @keyframes loader-animation {
15245
- 0%,
15246
- 1%,
15247
- 99%,
15248
- to {
15249
- opacity: 0.2;
15250
- transform: translateY(0);
15251
- }
15252
- 49%,
15253
- 50% {
15254
- opacity: 1;
15255
- transform: translateY(var(--_ld-offset));
15256
- }
15257
- 51% {
15258
- opacity: 0.2;
15259
- transform: translateY(var(--_ld-offset));
15260
- }
15261
- }
15262
- @keyframes loader-animation-reduced-motion {
15263
- 0%,
15264
- to {
15265
- opacity: 0.3;
15266
- transform: none;
15267
- }
15268
- 50% {
15269
- opacity: 1;
15270
- transform: none;
15271
- }
15272
- }
15273
14694
  .s-table {
15274
14695
  --_ta-tbody-tbody-bc: var(--bc-medium);
15275
14696
  --_ta-tbody-tbody-bw: var(--su2);
@@ -15868,637 +15289,6 @@ input[type="checkbox"].s-toggle-switch:focus-visible {
15868
15289
  input[type="checkbox"].s-toggle-switch[disabled] {
15869
15290
  cursor: default;
15870
15291
  }
15871
- .s-topbar {
15872
- --_tb-bt: var(--theme-topbar-accent-border, 3px solid var(--theme-primary));
15873
- --_tb-h: var(--theme-topbar-height, calc(var(--su48) + var(--su8)));
15874
- --_tb-item-bg: unset;
15875
- --_tb-item-fc: var(--theme-topbar-item-color, var(--black-400));
15876
- --_tb-item-ai-bs: 0 0 0 var(--su2) var(--theme-topbar-background-color, var(--white));
15877
- --_tb-item-ai-t: calc(50% - calc(var(--su12) + var(--su2)));
15878
- --_tb-logo-bg: transparent;
15879
- --_tb-menu-btn-bg: unset;
15880
- --_tb-menu-btn-bg-hover: unset;
15881
- --_tb-menu-btn-fc-hover: unset;
15882
- --_tb-menu-btn-span-bg: var(--theme-topbar-item-color, var(--black-400));
15883
- --_tb-menu-btn-span-fc: unset;
15884
- --_tb-menu-btn-span-after-t: calc(var(--su6) - var(--su1));
15885
- --_tb-menu-btn-span-after-rotate: 0deg;
15886
- --_tb-menu-btn-span-before-t: calc(var(--su1) - var(--su6));
15887
- --_tb-menu-btn-span-before-rotate: 0deg;
15888
- --_tb-notice-bg: transparent;
15889
- --_tb-notice-fc: var(--theme-topbar-item-color, var(--black-400));
15890
- --_tb-notice-bg-hover: var(--theme-topbar-item-background-hover, var(--black-200));
15891
- --_tb-notice-fc-hover: var(--theme-topbar-item-color-hover, var(--black-600));
15892
- --_tb-notice-td: none;
15893
- --_tb-searchbar-d: flex;
15894
- --_tb-searchbar-p: 0 var(--su8);
15895
- --_tb-searchbar-open-d: unset;
15896
- --_tb-searchbar-open-mxw: 0;
15897
- --_tb-searchbar-popover-wmn: var(--su448);
15898
- --_tb-searchbar-popover-content-mxh: calc(100vh - var(--_tb-h) - var(--su16));
15899
- align-items: center;
15900
- background-color: var(--theme-topbar-background-color, var(--white));
15901
- border-bottom: var(--theme-topbar-bottom-border, var(--su1) solid var(--black-225));
15902
- border-top: var(--_tb-bt);
15903
- display: flex;
15904
- height: var(--_tb-h);
15905
- min-width: auto;
15906
- position: relative;
15907
- width: 100%;
15908
- z-index: var(--zi-navigation-fixed);
15909
- }
15910
- @media (prefers-color-scheme: dark) {
15911
- body.theme-system .s-topbar.s-topbar__light {
15912
- --focus-theme: var(--theme-dark-secondary-custom-200, var(--black-200));
15913
- }
15914
- }
15915
- body.theme-dark .s-topbar.s-topbar__light,
15916
- .theme-dark__forced .s-topbar.s-topbar__light,
15917
- body.theme-system .theme-dark__forced .s-topbar.s-topbar__light {
15918
- --focus-theme: var(--theme-dark-secondary-custom-200, var(--black-200));
15919
- }
15920
- body.theme-highcontrast .s-topbar {
15921
- --_tb-notice-td: underline;
15922
- --theme-topbar-search-color: var(--theme-topbar-item-color, var(--black-400));
15923
- --theme-topbar-search-background: var(--theme-topbar-background-color, var(--white));
15924
- --theme-topbar-search-placeholder: var(--theme-topbar-item-color, var(--black-400));
15925
- --theme-topbar-search-border: var(--theme-topbar-item-color, var(--black-400));
15926
- --theme-topbar-select-color: var(--theme-topbar-item-color, var(--black-400));
15927
- --theme-topbar-select-background: var(--theme-topbar-background-color, var(--white));
15928
- --theme-topbar-item-color: var(--black-600);
15929
- --theme-topbar-item-color-hover: var(--black-600);
15930
- --theme-topbar-item-background-hover: var(--black-300);
15931
- --theme-topbar-item-color-current: var(--black);
15932
- border-bottom: var(--su1) solid currentColor;
15933
- }
15934
- body.theme-highcontrast .s-topbar.s-topbar__dark {
15935
- --focus-theme: #ffffff;
15936
- }
15937
- body.theme-highcontrast .s-topbar__dark {
15938
- --theme-topbar-item-color: var(--_white-static);
15939
- --theme-topbar-item-color-hover: var(--_white-static);
15940
- --theme-topbar-item-background-hover: #46484d;
15941
- --theme-topbar-item-color-current: var(--_white-static);
15942
- }
15943
- body.theme-highcontrast .s-topbar__dark .s-badge {
15944
- border-color: currentColor;
15945
- }
15946
- body.theme-highcontrast .s-topbar__light {
15947
- --theme-topbar-item-color: #211d1e;
15948
- --theme-topbar-item-color-hover: #211d1e;
15949
- --theme-topbar-item-background-hover: #dee0e3;
15950
- --theme-topbar-item-color-current: var(--_black-static);
15951
- }
15952
- @media (prefers-color-scheme: dark) {
15953
- body.theme-highcontrast.theme-system .s-topbar.s-topbar__light {
15954
- --focus-theme: var(--black-200);
15955
- }
15956
- }
15957
- body.theme-highcontrast.theme-dark .s-topbar.s-topbar__light {
15958
- --focus-theme: var(--black-200);
15959
- }
15960
- @media (max-width: 48.75rem) {
15961
- .s-topbar {
15962
- --_tb-searchbar-d: none;
15963
- --_tb-searchbar-p: var(--su8) var(--su12);
15964
- --_tb-searchbar-open-d: flex;
15965
- --_tb-searchbar-open-mxw: none;
15966
- --_tb-searchbar-select-w: 25%;
15967
- --_tb-searchbar-popover-wmn: initial;
15968
- --_tb-searchbar-popover-content-mxh: calc(100vh - var(--_tb-h) - var(--su48) - var(--su12));
15969
- }
15970
- }
15971
- .s-topbar.s-topbar__light {
15972
- --focus-neutral: #ffffff;
15973
- }
15974
- .s-topbar.s-topbar__dark {
15975
- --focus-neutral: #211d1e;
15976
- --focus-theme: var(--theme-dark-secondary-custom-400, #ffffff);
15977
- }
15978
- .s-topbar:has( > .s-topbar--skip-link:focus) {
15979
- border-top: none;
15980
- display: block;
15981
- height: auto;
15982
- }
15983
- .s-topbar:has( > .s-topbar--skip-link:focus) .s-topbar--container {
15984
- height: var(--_tb-h);
15985
- }
15986
- .s-topbar:has( > .s-topbar--skip-link:focus) .s-topbar--skip-link {
15987
- border-bottom: var(--_tb-bt);
15988
- }
15989
- .s-topbar a.s-topbar--logo:focus-visible {
15990
- box-shadow: inset 0 0 0 var(--su2) var(--focus-theme), inset 0 0 0 var(--su4) var(--focus-neutral);
15991
- outline: var(--su2) solid transparent !important;
15992
- }
15993
- .s-topbar a.s-topbar--logo:hover,
15994
- .s-topbar a.s-topbar--logo.is-selected {
15995
- --_tb-logo-bg: var(--theme-topbar-item-background-hover, var(--black-200));
15996
- }
15997
- .s-topbar .s-topbar--container {
15998
- align-items: center;
15999
- display: flex;
16000
- height: 100%;
16001
- margin: 0 auto;
16002
- max-width: 100%;
16003
- width: var(--su-max);
16004
- }
16005
- .s-topbar .s-topbar--content {
16006
- list-style: none;
16007
- margin: 0;
16008
- padding: 0;
16009
- scrollbar-color: var(--scrollbar) transparent;
16010
- display: flex;
16011
- height: 100%;
16012
- margin-left: auto;
16013
- overflow-x: auto;
16014
- }
16015
- .s-topbar .s-topbar--content > li {
16016
- display: inline-flex;
16017
- }
16018
- .s-topbar .s-topbar--content::-webkit-scrollbar {
16019
- width: calc(var(--su12) - var(--su2));
16020
- height: calc(var(--su12) - var(--su2));
16021
- background-color: transparent;
16022
- }
16023
- .s-topbar .s-topbar--content::-webkit-scrollbar-track {
16024
- border-radius: calc(var(--su12) - var(--su2));
16025
- background-color: transparent;
16026
- }
16027
- .s-topbar .s-topbar--content::-webkit-scrollbar-thumb {
16028
- border-radius: calc(var(--su12) - var(--su2));
16029
- background-color: var(--scrollbar);
16030
- }
16031
- .s-topbar .s-topbar--content::-webkit-scrollbar-corner {
16032
- background-color: transparent;
16033
- border-color: transparent;
16034
- }
16035
- .s-topbar .s-topbar--item:not(.s-topbar--item__unset) {
16036
- background-color: var(--_tb-item-bg);
16037
- color: var(--_tb-item-fc);
16038
- align-items: center;
16039
- border-radius: var(--br-md);
16040
- display: inline-flex;
16041
- padding: 0 calc(var(--su12) - var(--su2));
16042
- position: relative;
16043
- text-decoration: none;
16044
- white-space: nowrap;
16045
- }
16046
- .s-topbar .s-topbar--item:not(.s-topbar--item__unset) .svg-icon {
16047
- vertical-align: text-top;
16048
- }
16049
- .s-topbar .s-topbar--item:not(.s-topbar--item__unset):focus-visible {
16050
- box-shadow: inset 0 0 0 var(--su2) var(--focus-theme), inset 0 0 0 var(--su4) var(--focus-neutral);
16051
- outline: var(--su2) solid transparent !important;
16052
- }
16053
- .s-topbar .s-topbar--item:not(.s-topbar--item__unset):hover,
16054
- .s-topbar .s-topbar--item:not(.s-topbar--item__unset).is-selected,
16055
- .s-topbar .s-topbar--item:not(.s-topbar--item__unset).is-selected:hover {
16056
- --_tb-item-bg: var(--theme-topbar-item-background-hover, var(--black-200));
16057
- --_tb-item-fc: var(--theme-topbar-item-color-hover, var(--black-600));
16058
- --_tb-item-ai-bs: 0 0 0 var(--su2) var(--theme-topbar-item-background-hover, var(--black-200));
16059
- --_tb-item-ai-t: calc(50% - calc(var(--su16) + var(--su2)));
16060
- outline: none;
16061
- }
16062
- .s-topbar .s-topbar--item:not(.s-topbar--item__unset) .s-activity-indicator {
16063
- box-shadow: var(--_tb-item-ai-bs);
16064
- top: var(--_tb-item-ai-t);
16065
- position: absolute;
16066
- right: var(--su2);
16067
- transition: top var(--te-smooth) 0.15s;
16068
- }
16069
- .s-topbar .s-topbar--item.s-topbar--item__unset {
16070
- align-self: center;
16071
- padding-top: var(--su8);
16072
- padding-bottom: var(--su8);
16073
- }
16074
- .s-topbar .s-topbar--logo {
16075
- background-color: var(--_tb-logo-bg);
16076
- align-items: center;
16077
- border-radius: var(--br-md);
16078
- display: flex;
16079
- height: 100%;
16080
- padding: 0 var(--su8);
16081
- }
16082
- .s-topbar .s-topbar--menu-btn {
16083
- background-color: var(--_tb-menu-btn-bg);
16084
- color: var(--_tb-menu-btn-fc);
16085
- align-items: center;
16086
- display: flex;
16087
- flex-shrink: 0;
16088
- height: 100%;
16089
- justify-content: center;
16090
- padding: 0 var(--su16);
16091
- }
16092
- .s-topbar .s-topbar--menu-btn.is-selected {
16093
- --_tb-menu-btn-bg: var(--theme-topbar-item-background-current);
16094
- --_tb-menu-btn-bg-hover: var(--theme-topbar-item-background-hover, var(--black-200));
16095
- --_tb-menu-btn-fc: var(--theme-topbar-item-color-current, var(--black));
16096
- --_tb-menu-btn-fc-hover: var(--theme-topbar-item-color-hover, var(--black-400));
16097
- --_tb-menu-btn-span-bg: transparent;
16098
- --_tb-menu-btn-span-after-t: 0;
16099
- --_tb-menu-btn-span-after-rotate: 45deg;
16100
- --_tb-menu-btn-span-before-t: 0;
16101
- --_tb-menu-btn-span-before-rotate: -45deg;
16102
- }
16103
- .s-topbar .s-topbar--menu-btn:not(.is-selected) span {
16104
- transition: background-color;
16105
- transition-duration: 0.1s;
16106
- }
16107
- .s-topbar .s-topbar--menu-btn span {
16108
- background-color: var(--_tb-menu-btn-span-bg);
16109
- }
16110
- .s-topbar .s-topbar--menu-btn span,
16111
- .s-topbar .s-topbar--menu-btn span:after,
16112
- .s-topbar .s-topbar--menu-btn span:before {
16113
- height: var(--su2);
16114
- position: relative;
16115
- width: var(--su16);
16116
- }
16117
- .s-topbar .s-topbar--menu-btn span:after,
16118
- .s-topbar .s-topbar--menu-btn span:before {
16119
- background-color: var(--theme-topbar-item-color, var(--black-400));
16120
- content: '';
16121
- left: 0;
16122
- position: absolute;
16123
- transition: top, transform;
16124
- transition-duration: 0.1s;
16125
- transition-timing-function: ease-in-out;
16126
- }
16127
- .s-topbar .s-topbar--menu-btn span:after {
16128
- top: var(--_tb-menu-btn-span-after-t);
16129
- transform: rotate(var(--_tb-menu-btn-span-after-rotate));
16130
- }
16131
- .s-topbar .s-topbar--menu-btn span:before {
16132
- top: var(--_tb-menu-btn-span-before-t);
16133
- transform: rotate(var(--_tb-menu-btn-span-before-rotate));
16134
- }
16135
- .s-topbar .s-topbar--menu-btn:hover {
16136
- background-color: var(--_tb-menu-btn-bg-hover);
16137
- color: var(--_tb-menu-btn-fc-hover);
16138
- }
16139
- .s-topbar .s-topbar--navigation {
16140
- scrollbar-color: var(--scrollbar) transparent;
16141
- display: flex;
16142
- height: 100%;
16143
- margin-left: auto;
16144
- overflow-x: auto;
16145
- }
16146
- .s-topbar .s-topbar--navigation::-webkit-scrollbar {
16147
- width: calc(var(--su12) - var(--su2));
16148
- height: calc(var(--su12) - var(--su2));
16149
- background-color: transparent;
16150
- }
16151
- .s-topbar .s-topbar--navigation::-webkit-scrollbar-track {
16152
- border-radius: calc(var(--su12) - var(--su2));
16153
- background-color: transparent;
16154
- }
16155
- .s-topbar .s-topbar--navigation::-webkit-scrollbar-thumb {
16156
- border-radius: calc(var(--su12) - var(--su2));
16157
- background-color: var(--scrollbar);
16158
- }
16159
- .s-topbar .s-topbar--navigation::-webkit-scrollbar-corner {
16160
- background-color: transparent;
16161
- border-color: transparent;
16162
- }
16163
- .s-topbar .s-topbar--notice {
16164
- background-color: var(--_tb-notice-bg);
16165
- border: var(--su1) solid var(--_tb-notice-bg);
16166
- color: var(--_tb-notice-fc);
16167
- text-decoration: var(--_tb-notice-td);
16168
- border-radius: var(--br-md);
16169
- display: inline-flex;
16170
- flex-shrink: 0;
16171
- font-size: var(--fs-fine);
16172
- font-weight: 700;
16173
- margin-left: var(--su8);
16174
- margin-right: var(--su8);
16175
- line-height: var(--lh-xxl);
16176
- padding: 0 var(--su6);
16177
- text-transform: uppercase;
16178
- }
16179
- .s-topbar .s-topbar--notice.is-unread {
16180
- --_tb-notice-bg: var(--theme-primary-400);
16181
- --_tb-notice-fc: var(--white);
16182
- --_tb-notice-bg-hover: var(--theme-primary-500);
16183
- --_tb-notice-fc-hover: var(--white);
16184
- }
16185
- .s-topbar .s-topbar--notice:focus-visible {
16186
- border-color: var(--focus-theme) !important;
16187
- box-shadow: inset 0 0 0 var(--su1) var(--focus-theme), inset 0 0 0 var(--su3) var(--focus-neutral);
16188
- outline: var(--su2) solid transparent !important;
16189
- }
16190
- .s-topbar .s-topbar--notice:hover {
16191
- background-color: var(--_tb-notice-bg-hover);
16192
- border-color: var(--_tb-notice-bg-hover);
16193
- color: var(--_tb-notice-fc-hover);
16194
- }
16195
- .s-topbar .s-topbar--searchbar {
16196
- display: var(--_tb-searchbar-d);
16197
- align-items: center;
16198
- flex-grow: 1;
16199
- flex-shrink: 10000;
16200
- padding: var(--_tb-searchbar-p);
16201
- }
16202
- @media (max-width: 48.75rem) {
16203
- .s-topbar .s-topbar--searchbar {
16204
- background: var(--theme-topbar-item-background-hover, var(--black-200));
16205
- left: 0;
16206
- max-width: 100%;
16207
- position: absolute;
16208
- right: 0;
16209
- top: 100%;
16210
- }
16211
- }
16212
- .s-topbar .s-topbar--searchbar .s-topbar--searchbar--input-group {
16213
- flex-grow: 1;
16214
- position: relative;
16215
- }
16216
- .s-topbar .s-topbar--searchbar .s-topbar--searchbar--input-group .s-input {
16217
- background-color: var(--theme-topbar-search-background, var(--white));
16218
- border-color: var(--theme-topbar-search-border, var(--black-300));
16219
- color: var(--theme-topbar-search-color, var(--black-500));
16220
- display: block;
16221
- line-height: var(--lh-sm);
16222
- }
16223
- .s-topbar .s-topbar--searchbar .s-topbar--searchbar--input-group .s-input::placeholder {
16224
- color: var(--theme-topbar-search-placeholder, var(--black-400));
16225
- font-style: normal;
16226
- }
16227
- .s-topbar .s-topbar--searchbar .s-topbar--searchbar--input-group .s-input:not(:focus-visible):not(.focus) {
16228
- box-shadow: var(--theme-topbar-search-shadow);
16229
- }
16230
- .s-topbar .s-topbar--searchbar .s-topbar--searchbar--input-group .s-input-icon {
16231
- color: var(--theme-topbar-search-placeholder, var(--black-400));
16232
- }
16233
- .s-topbar .s-topbar--searchbar .s-popover {
16234
- max-width: 100%;
16235
- min-width: var(--_tb-searchbar-popover-wmn);
16236
- padding: 0;
16237
- }
16238
- .s-topbar .s-topbar--searchbar .s-popover .s-popover--content {
16239
- max-height: var(--_tb-searchbar-popover-content-mxh);
16240
- }
16241
- .s-topbar .s-topbar--searchbar .s-select {
16242
- align-self: stretch;
16243
- color: var(--theme-topbar-select-color, var(--black-500));
16244
- margin-right: var(--sun1);
16245
- max-width: var(--su256) !important;
16246
- }
16247
- @media (max-width: 48.75rem) {
16248
- .s-topbar .s-topbar--searchbar .s-select {
16249
- width: 25% !important;
16250
- }
16251
- }
16252
- .s-topbar .s-topbar--searchbar .s-select > select {
16253
- background-color: var(--theme-topbar-select-background, var(--black-200));
16254
- border-bottom-right-radius: 0 !important;
16255
- border-color: var(--theme-topbar-search-border, var(--black-300));
16256
- border-top-right-radius: 0 !important;
16257
- color: var(--theme-topbar-select-color, var(--black-500));
16258
- height: 100%;
16259
- line-height: var(--lh-sm);
16260
- }
16261
- .s-topbar .s-topbar--searchbar .s-select > select:focus-visible,
16262
- .s-topbar .s-topbar--searchbar .s-select > select.focus {
16263
- z-index: var(--zi-selected);
16264
- }
16265
- .s-topbar .s-topbar--searchbar .s-select + .s-topbar--searchbar--input-group > .s-input {
16266
- border-bottom-left-radius: 0 !important;
16267
- border-top-left-radius: 0 !important;
16268
- }
16269
- .s-topbar .s-topbar--searchbar .s-select:before,
16270
- .s-topbar .s-topbar--searchbar .s-select:after {
16271
- z-index: var(--zi-active);
16272
- }
16273
- @media (max-width: 48.75rem) {
16274
- .s-topbar .s-topbar--searchbar.s-topbar--searchbar__open {
16275
- display: var(--_tb-searchbar-open-d);
16276
- max-width: var(--_tb-searchbar-open-mxw);
16277
- }
16278
- }
16279
- .s-topbar .s-topbar--skip-link {
16280
- background-color: var(--theme-secondary-100);
16281
- border-bottom: var(--_tb-bt);
16282
- display: block;
16283
- outline: none;
16284
- padding: var(--su12);
16285
- text-align: center;
16286
- }
16287
- .s-topbar .s-navigation .s-navigation--item:not(.is-selected) {
16288
- color: var(--theme-topbar-item-color, var(--black-400));
16289
- }
16290
- .s-topbar .s-navigation .s-navigation--item:not(.is-selected):hover {
16291
- background-color: var(--theme-topbar-item-background-hover, var(--black-200));
16292
- color: var(--theme-topbar-item-color-hover, var(--black-400));
16293
- }
16294
- .s-topbar .s-popover .s-navigation .s-navigation--item:not(.is-selected) {
16295
- color: var(--black-500);
16296
- }
16297
- .s-topbar .s-popover .s-navigation .s-navigation--item:not(.is-selected):hover {
16298
- background-color: var(--black-200);
16299
- color: var(--black-600);
16300
- }
16301
- .s-topbar__dark {
16302
- --theme-topbar-background-color: #211d1e;
16303
- --theme-topbar-bottom-border: var(--su1) solid #211d1e;
16304
- --theme-topbar-search-color: #ffffff;
16305
- --theme-topbar-search-background: #584c4f;
16306
- --theme-topbar-search-placeholder: #eceaea;
16307
- --theme-topbar-search-border: #8d7d81;
16308
- --theme-topbar-select-color: #eceaea;
16309
- --theme-topbar-select-background: #736468;
16310
- --theme-topbar-item-color: #d7d8db;
16311
- --theme-topbar-item-color-hover: var(--_white-static);
16312
- --theme-topbar-item-background-hover: #46484d;
16313
- --theme-topbar-item-color-current: var(--_white-static);
16314
- --theme-topbar-accent-border: none;
16315
- --scrollbar: hsla(0, 0%, 100%, 0.2);
16316
- }
16317
- .s-topbar__light {
16318
- --theme-topbar-background-color: var(--_white-static);
16319
- --theme-topbar-bottom-border: var(--su1) solid #d7d8db;
16320
- --theme-topbar-search-color: #46484d;
16321
- --theme-topbar-search-background: var(--_white-static);
16322
- --theme-topbar-search-placeholder: #6b6d73;
16323
- --theme-topbar-search-border: #a7aab0;
16324
- --theme-topbar-select-color: #46484d;
16325
- --theme-topbar-select-background: #dee0e3;
16326
- --theme-topbar-item-color: #6b6d73;
16327
- --theme-topbar-item-color-hover: #46484d;
16328
- --theme-topbar-item-background-hover: #dee0e3;
16329
- --theme-topbar-item-color-current: var(--_black-static);
16330
- --scrollbar: hsla(0, 0%, 0%, 0.2);
16331
- }
16332
- .s-uploader {
16333
- --_up-bg-b-image: url("data:image/svg+xml;,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='5' ry='5' stroke='%23000000' stroke-width='8' stroke-dasharray='7%2c 22' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
16334
- --_up-bg: var(--black-100);
16335
- --_up-bg-focus: var(--black-150);
16336
- --_up-bg-bc: var(--black-250);
16337
- --_up-focus-ring-color: var(--focus-ring);
16338
- position: relative;
16339
- }
16340
- body.theme-highcontrast .s-uploader {
16341
- --_up-bg-bc-hc: var(--black-400);
16342
- }
16343
- body.theme-highcontrast .s-uploader.has-error {
16344
- --_up-bg-bc-hc-state: var(--red-500);
16345
- }
16346
- body.theme-highcontrast .s-uploader.has-success {
16347
- --_up-bg-bc-hc-state: var(--green-400);
16348
- }
16349
- body.theme-highcontrast .s-uploader.has-warning {
16350
- --_up-bg-bc-hc-state: var(--yellow-500);
16351
- }
16352
- .s-uploader.has-error .s-link,
16353
- .s-uploader.has-success .s-link,
16354
- .s-uploader.has-warning .s-link {
16355
- color: var(--_up-link-fc);
16356
- }
16357
- .s-uploader.has-error {
16358
- --_up-bg: var(--red-100);
16359
- --_up-bg-focus: var(--red-200);
16360
- --_up-bg-bc: var(--red-300);
16361
- --_up-focus-ring-color: var(--focus-ring-error);
16362
- --_up-link-fc: var(--red-500);
16363
- }
16364
- .s-uploader.has-success {
16365
- --_up-bg: var(--green-100);
16366
- --_up-bg-focus: var(--green-200);
16367
- --_up-bg-bc: var(--green-300);
16368
- --_up-focus-ring-color: var(--focus-ring-success);
16369
- --_up-link-fc: var(--green-400);
16370
- }
16371
- .s-uploader.has-warning {
16372
- --_up-bg: var(--yellow-100);
16373
- --_up-bg-focus: var(--yellow-200);
16374
- --_up-bg-bc: var(--yellow-300);
16375
- --_up-focus-ring-color: var(--focus-ring-warning);
16376
- --_up-link-fc: var(--yellow-500);
16377
- }
16378
- .s-uploader.is-active {
16379
- --_up-bg: var(--black-150);
16380
- --_up-bg-bc: var(--black-300);
16381
- }
16382
- .s-uploader.is-disabled {
16383
- opacity: var(--_o-disabled-static);
16384
- }
16385
- .s-uploader .s-uploader--container {
16386
- align-items: center;
16387
- background-color: var(--_up-bg);
16388
- border-radius: var(--br-md);
16389
- display: flex;
16390
- flex-direction: column;
16391
- justify-content: center;
16392
- min-height: var(--su128);
16393
- padding: var(--su8) var(--su16);
16394
- position: relative;
16395
- text-align: center;
16396
- }
16397
- .s-uploader .s-uploader--container:before {
16398
- -webkit-mask-image: var(--_up-bg-b-image);
16399
- mask-image: var(--_up-bg-b-image);
16400
- background-color: var(--_up-bg-bc-hc-state, var(--_up-bg-bc-hc, var(--_up-bg-bc)));
16401
- border-radius: var(--br-md);
16402
- content: '';
16403
- display: block;
16404
- inset: 0;
16405
- position: absolute;
16406
- }
16407
- .s-uploader .s-uploader--input {
16408
- cursor: pointer;
16409
- height: 100%;
16410
- inset: 0;
16411
- opacity: 0;
16412
- position: absolute;
16413
- width: 100%;
16414
- z-index: var(--zi-selected);
16415
- }
16416
- .s-uploader .s-uploader--input:focus:focus-visible + .s-uploader--container {
16417
- box-shadow: 0 0 0 var(--su2) var(--focus-neutral), 0 0 0 var(--su4) var(--focus-theme);
16418
- outline: var(--su2) solid transparent !important;
16419
- }
16420
- .s-uploader .s-uploader--input:focus:focus-visible + .s-uploader--container,
16421
- .s-uploader .s-uploader--input .s-uploader--container.focus {
16422
- background-color: var(--_up-bg-focus);
16423
- }
16424
- .s-uploader .s-uploader--preview {
16425
- max-width: 100%;
16426
- pointer-events: none;
16427
- }
16428
- .s-uploader .s-uploader--preview-thumbnail {
16429
- background-color: var(--white);
16430
- border-radius: var(--br-md);
16431
- box-shadow: var(--bs-md);
16432
- max-height: var(--su128);
16433
- max-width: 100%;
16434
- overflow: hidden;
16435
- text-overflow: ellipsis;
16436
- white-space: nowrap;
16437
- }
16438
- body.theme-highcontrast .s-uploader .s-uploader--preview-thumbnail {
16439
- border: var(--su1) solid var(--black);
16440
- }
16441
- .s-uploader .s-uploader--preview-thumbnail:is(img) {
16442
- object-fit: scale-down;
16443
- object-position: center;
16444
- }
16445
- .s-uploader .s-uploader--preview-thumbnail:not(img) {
16446
- padding: var(--su16);
16447
- }
16448
- .s-uploader .s-uploader--previews {
16449
- max-width: 100%;
16450
- text-align: left;
16451
- }
16452
- .s-uploader .s-uploader--previews.has-multiple {
16453
- display: block;
16454
- height: auto;
16455
- padding: var(--su8) var(--su2);
16456
- width: 100%;
16457
- }
16458
- .s-uploader .s-uploader--previews.has-multiple .s-uploader--preview {
16459
- align-items: center;
16460
- display: flex;
16461
- padding: var(--su6) 0;
16462
- width: 100%;
16463
- }
16464
- .s-uploader .s-uploader--previews.has-multiple .s-uploader--preview:after {
16465
- content: attr(data-filename);
16466
- display: block;
16467
- margin-left: var(--su12);
16468
- max-width: 100%;
16469
- overflow: hidden;
16470
- text-overflow: ellipsis;
16471
- white-space: nowrap;
16472
- }
16473
- .s-uploader .s-uploader--previews.has-multiple .s-uploader--preview-thumbnail {
16474
- color: transparent;
16475
- height: var(--su32);
16476
- flex-shrink: 0;
16477
- width: var(--su32);
16478
- }
16479
- .s-uploader .s-uploader--previews.has-multiple .s-uploader--preview-thumbnail:is(img) {
16480
- object-fit: cover;
16481
- }
16482
- .s-uploader .s-uploader--previews.has-multiple .s-uploader--preview-thumbnail:not(img) {
16483
- background-image: url("data:image/svg+xml;,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' fill='%23535A60' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M3 3a2 2 0 012-2h6l4 4v10a2 2 0 01-2 2H5a2 2 0 01-2-2V3zm7-1.5V6h4.5L10 1.5z'%3E%3C/path%3E%3C/svg%3E");
16484
- background-position: center;
16485
- background-repeat: no-repeat;
16486
- }
16487
- .s-uploader .s-uploader--previews-heading {
16488
- color: var(--black-600);
16489
- font-size: var(--fs-body2);
16490
- font-weight: 700;
16491
- padding-bottom: var(--su8);
16492
- }
16493
- .s-uploader .s-uploader--reset {
16494
- position: absolute;
16495
- right: var(--su8);
16496
- top: var(--su8);
16497
- z-index: var(--zi-active);
16498
- }
16499
- .s-uploader input[type="file"]::file-selector-button {
16500
- cursor: pointer;
16501
- }
16502
15292
  .s-user-card {
16503
15293
  --_uc-ai: center;
16504
15294
  --_uc-fd: unset;