extension/src/components/SomethingWentWrong.module.css
.root {
display: grid;
grid-template-columns: auto 1fr;
grid-gap: 3px;
padding: 1rem;
color: var(--fuidt-colorNeutralForeground1);
background-color: var(--fuidt-colorNeutralBackground1);
height: inherit;
width: inherit;
overflow: auto;
box-sizing: border-box;
font-family:
ui-sans-serif,
system-ui,
-apple-system,
BlinkMacSystemFont,
Segoe UI,
Roboto,
Helvetica Neue,
Arial,
Noto Sans,
sans-serif,
Apple Color Emoji,
Segoe UI Emoji,
Segoe UI Symbol,
Noto Color Emoji;
}
.icon {
text-decoration-line: none;
position: relative;
top: -5px;
z-index: 1;
color: var(--fuidt-errorBGColor);
}
.errorBox {
border: dashed 2px var(--fuidt-errorBGColor);
color: var(--fuidt-colorNeutralForeground1);
padding: 0.5rem;
align-self: stretch;
}
.content {
display: flex;
flex-direction: column;
align-items: start;
justify-content: start;
box-sizing: border-box;
row-gap: 1rem;
padding-block-start: 1rem;
}
.link {
color: var(--fuidt-colorBrandForegroundLink);
&:hover {
color: var(--fuidt-colorBrandForegroundLinkHover);
text-decoration: underline;
}
&:active {
color: var(--fuidt-colorBrandForegroundLinkPressed);
}
&:focus-visible {
color: var(--fuidt-colorStrokeFocus2);
text-decoration: underline;
text-decoration-style: double;
outline: none;
}
}
.row {
align-self: flex-end;
display: flex;
align-items: end;
gap: 0.5rem;
}
.reloadButton {
-webkit-text-size-adjust: 100%;
tab-size: 4;
font-feature-settings: normal;
font-synthesis: none;
color-scheme: dark;
text-align: center;
box-sizing: border-box;
border: 0 solid #bfc3d9;
text-decoration: inherit;
border-radius: 0.375rem;
padding: 0.5rem;
font-weight: 700;
color: var(--fuidt-errorColor);
transition-property:
color,
background-color,
border-color,
text-decoration-color,
fill,
stroke,
-webkit-text-decoration-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 0.15s;
background-color: var(--fuidt-errorBGColor);
font-size: 1.25rem;
line-height: 1.75rem;
cursor: pointer;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
&:hover {
background-color: var(--fuidt-errorBGColor);
filter: brightness(1.1);
}
}