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

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

@ -19,19 +19,27 @@
--ak-sidebar--minimum-auto-width: 80rem;
}
::-webkit-scrollbar {
width: 5px;
height: 5px;
background-color: transparent;
@supports selector(::-webkit-scrollbar) {
::-webkit-scrollbar {
width: 5px;
height: 5px;
background-color: transparent;
}
::-webkit-scrollbar-thumb {
background-color: var(--ak-accent);
}
::-webkit-scrollbar-track {
background-color: transparent;
}
::-webkit-scrollbar-corner {
background-color: transparent;
}
}
::-webkit-scrollbar-thumb {
background-color: var(--ak-accent);
}
::-webkit-scrollbar-track {
background-color: transparent;
}
::-webkit-scrollbar-corner {
background-color: transparent;
@supports not selector(::-webkit-scrollbar) {
:root {
scrollbar-color: var(--ak-accent) transparent;
}
}
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);
}
.pf-c-card__body {
overflow-x: scroll;
overflow-x: auto;
padding-left: calc(var(--pf-c-card--child--PaddingLeft) / 2);
padding-right: calc(var(--pf-c-card--child--PaddingRight) / 2);
}