Detailed customization of all widget elements

CSS Codes Accessibility Widget
1

Add this code to the Custom CSS field on the Settings tab of your Accessibility widget’s settings:

#accessibility-panel {
background-color: #006C52;
}

[class*="page__Avatar-sc"] {
background-color: red;
}

[class*="mode-item__Container-sc"] svg {
fill: red;
}

[class*="score-block__Inner-sc"] svg {
fill: yellow;
}

[class*="FloatingButton__FloatingButtonContainer-sc"] button  {
background: red !important;
}
2 Likes
2

I discovered the widget and customized it a little bit to suit my needs. Colors and position, as well as the font and tooltip font. Have fun with it.

#accessibility-panel {
bac@importansground-color: #FAF8F2;
}@importans

/* Nur im Wid@importansimportanset: Op@importn @importans l@importde@import & anwenden */
@import url(“https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap”);

#accessibility-panel,
#accessibility-panel ,
[class=“FloatingButton__FloatingButtonContainer-sc”],
[class*=“FloatingButton__FloatingButtonContainer-sc”] * {
font-family: “Open Sans”, system-ui, -apple-system, “Segoe UI”, Roboto,
“Helvetica Neue”, Arial, “Noto Sans”, “Liberation Sans”, sans-serif !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

[class*=“FloatingButton__FloatingButtonContainer-sc”] button {
transform: scale(1.5);
}

[class*=“FloatingButton__FloatingButtonContainer-sc”] button {
background: #0c3a5e !important;
}

[class*=“FloatingButton__FloatingButtonContainer-sc”]{
position: fixed !important;
left: calc(18px + env(safe-area-inset-left));
bottom: calc(18px + env(safe-area-inset-bottom));
right: auto !important;
top: auto !important;
z-index: 2147483647;
transform-origin: bottom left;
}

[class*=“page__Avatar-sc”] {
background-color: #0c3a5e;
}

[class*=“mode-item__Container-sc”] svg {
fill: #0c3a5e;
}

[class*=“score-block__Inner-sc”] svg {
fill:#71231e;
}

[role=“tooltip”],
.tippy-box,
.tippy-content,
[class*=“Tooltip”],
[class*=“tooltip”],
.MuiTooltip-tooltip,
.chakra-tooltip,
.ant-tooltip-inner,
[data-tooltip],
[data-tooltip-content],
[data-radix-tooltip-content],
[id*=“tooltip”] {
font-family: “Open Sans”, system-ui, -apple-system, “Segoe UI”, Roboto,
“Helvetica Neue”, Arial, “Noto Sans”, “Liberation Sans”, sans-serif !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

2 Likes
3

Works like a charm! Thanks for sharing your solution with us, @user29282 :+1:

1 Like
4

Brilliant! Thank you!

2 Likes
5

Glad to know the code worked for you! And thanks a lot for the feedback, @DebbieDB :wink: