rbondessonandGitHub
eb08257b77
* Apply event presentation attributes to timeline previews and errors * Make TextualEventView render the same in web and storybook * Make TileErrorView render the same in app/web and storybook * Updated snapshots * Make it possible to view shared components with default app/web base styling. * Adjust styling and add underline to pass tests * Fix Sonar issue * Rename base css to root css * Handle font styling correctly
72 lines
2.1 KiB
CSS
72 lines
2.1 KiB
CSS
/*
|
|
Copyright 2026 Element Creations Ltd.
|
|
|
|
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
|
Please see LICENSE files in the repository root for full details.
|
|
*/
|
|
|
|
/*
|
|
* Match the app/web shell baseline without importing app/web component styles.
|
|
* Shared component stories should inherit the same root typography and font
|
|
* feature settings as the real app, while still owning their component styling.
|
|
*/
|
|
@layer app-web {
|
|
:root[data-storybook-root-css="app-web"] {
|
|
[class^="cpd-theme"][class^="cpd-theme"] {
|
|
--cpd-font-family-sans:
|
|
"Inter", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "Arial", "Helvetica", sans-serif,
|
|
"Noto Color Emoji";
|
|
}
|
|
|
|
body {
|
|
font: var(--cpd-font-body-md-regular) !important;
|
|
letter-spacing: var(--cpd-font-letter-spacing-body-md) !important;
|
|
font-feature-settings:
|
|
"kern" 1,
|
|
"liga" 1,
|
|
"calt" 1 !important;
|
|
|
|
background-color: var(--cpd-color-bg-canvas-default);
|
|
color: var(--cpd-color-text-primary);
|
|
border: 0;
|
|
margin: 0;
|
|
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
pre,
|
|
code {
|
|
font-family:
|
|
"Fira Code", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace, "Noto Color Emoji";
|
|
font-size: 100% !important;
|
|
}
|
|
}
|
|
|
|
/* Username color classes - these are defined in the main app's _common.pcss
|
|
but need to be available in Storybook for components that use colorClass */
|
|
.mx_Username_color1 {
|
|
color: var(--cpd-color-text-decorative-1);
|
|
}
|
|
|
|
.mx_Username_color2 {
|
|
color: var(--cpd-color-text-decorative-2);
|
|
}
|
|
|
|
.mx_Username_color3 {
|
|
color: var(--cpd-color-text-decorative-3);
|
|
}
|
|
|
|
.mx_Username_color4 {
|
|
color: var(--cpd-color-text-decorative-4);
|
|
}
|
|
|
|
.mx_Username_color5 {
|
|
color: var(--cpd-color-text-decorative-5);
|
|
}
|
|
|
|
.mx_Username_color6 {
|
|
color: var(--cpd-color-text-decorative-6);
|
|
}
|
|
}
|