habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: fix scrollbar styling (#12600)

Browse Source 
* Fix `.pf-c-card__body` scrollbars

* Fallback scrollbar styling for browsers that don't support `::-webkit-scrollbar`

---------

Co-authored-by: Marcelo Elizeche Landó <marcelo@goauthentik.io>
This commit is contained in:
RoboMagus
2025-04-22 04:47:02 +02:00
committed by GitHub
parent 976e81c1dd
commit bedf548a5f
2 changed files with 21 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
web/src/common/styles/authentik.css
View File

@ -19,19 +19,27 @@
--ak-sidebar--minimum-auto-width: 80rem; --ak-sidebar--minimum-auto-width: 80rem;
} }
::-webkit-scrollbar { @supports selector(::-webkit-scrollbar) {
::-webkit-scrollbar {
width: 5px; width: 5px;
height: 5px; height: 5px;
background-color: transparent; background-color: transparent;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: var(--ak-accent); background-color: var(--ak-accent);
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background-color: transparent; background-color: transparent;
} }
::-webkit-scrollbar-corner { ::-webkit-scrollbar-corner {
background-color: transparent; background-color: transparent;
}
}
@supports not selector(::-webkit-scrollbar) {
:root {
scrollbar-color: var(--ak-accent) transparent;
}
} }
html { html {

2
web/src/elements/cards/AggregateCard.ts
View File

@ -86,7 +86,7 @@ export class AggregateCard extends AKElement implements IAggregateCard {
font-size: var(--pf-global--FontSize--sm); font-size: var(--pf-global--FontSize--sm);
} }
.pf-c-card__body { .pf-c-card__body {
overflow-x: scroll; overflow-x: auto;
padding-left: calc(var(--pf-c-card--child--PaddingLeft) / 2); padding-left: calc(var(--pf-c-card--child--PaddingLeft) / 2);
padding-right: calc(var(--pf-c-card--child--PaddingRight) / 2); padding-right: calc(var(--pf-c-card--child--PaddingRight) / 2);
} }