mirror of
https://github.com/vector-im/element-call.git
synced 2026-04-03 07:10:26 +00:00
Merge remote-tracking branch 'upstream/dbkr/matrixrtcsession' into SimonBrandner/feat/e2ee-embeded
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner
23
.env.example
23
.env.example
@@ -10,19 +10,10 @@ LIVEKIT_SECRET="secret"
|
||||
# Used for determining the homeserver to use for short urls etc.
|
||||
# VITE_FALLBACK_STUN_ALLOWED=false
|
||||
|
||||
# VITE_CUSTOM_THEME=true
|
||||
# VITE_THEME_ACCENT=#0dbd8b
|
||||
# VITE_THEME_ACCENT_20=#0dbd8b33
|
||||
# VITE_THEME_ALERT=#ff5b55
|
||||
# VITE_THEME_ALERT_20=#ff5b5533
|
||||
# VITE_THEME_LINKS=#0086e6
|
||||
# VITE_THEME_PRIMARY_CONTENT=#ffffff
|
||||
# VITE_THEME_SECONDARY_CONTENT=#a9b2bc
|
||||
# VITE_THEME_TERTIARY_CONTENT=#8e99a4
|
||||
# VITE_THEME_TERTIARY_CONTENT_20=#8e99a433
|
||||
# VITE_THEME_QUATERNARY_CONTENT=#6f7882
|
||||
# VITE_THEME_QUINARY_CONTENT=#394049
|
||||
# VITE_THEME_SYSTEM=#21262c
|
||||
# VITE_THEME_BACKGROUND=#15191e
|
||||
# VITE_THEME_BACKGROUND_85=#15191ed9
|
||||
# VITE_THEME_SUBTLE_PRIMARY=#26282D
|
||||
# CSS to be injected into the page for the purpose of custom theming.
|
||||
# Generally, writing a custom theme involves overriding Compound design tokens,
|
||||
# which are documented here:
|
||||
# https://compound.element.io/?path=/docs/foundations-design-tokens--docs
|
||||
# https://compound.element.io/?path=/docs/tokens-color-palettes--docs
|
||||
# https://compound.element.io/?path=/docs/tokens-semantic-colors--docs
|
||||
# VITE_CUSTOM_CSS=".cpd-theme-dark.cpd-theme-dark { --cpd-color-theme-bg: #101317; }"
|
||||
|
||||
1
.github/workflows/build.yaml
vendored
1
.github/workflows/build.yaml
vendored
@@ -23,6 +23,7 @@ jobs:
|
||||
SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
|
||||
SENTRY_URL: ${{ secrets.SENTRY_URL }}
|
||||
SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
|
||||
VITE_APP_VERSION: ${{ github.sha }}
|
||||
NODE_OPTIONS: "--max-old-space-size=4096"
|
||||
- name: Upload Artifact
|
||||
uses: actions/upload-artifact@v2
|
||||
|
||||
4
.github/workflows/netlify-fullmesh.yaml
vendored
4
.github/workflows/netlify-fullmesh.yaml
vendored
@@ -28,7 +28,7 @@ jobs:
|
||||
ref: ${{ github.event.workflow_run.head_sha }}
|
||||
|
||||
- name: "Download artifact"
|
||||
uses: actions/github-script@v3.1.0
|
||||
uses: actions/github-script@v3.2.0
|
||||
with:
|
||||
script: |
|
||||
const artifacts = await github.actions.listWorkflowRunArtifacts({
|
||||
@@ -60,7 +60,7 @@ jobs:
|
||||
|
||||
- name: Deploy to Netlify
|
||||
id: netlify
|
||||
uses: nwtgck/actions-netlify@v1.2.3
|
||||
uses: nwtgck/actions-netlify@v1.2.4
|
||||
with:
|
||||
publish-dir: dist
|
||||
deploy-message: "Deploy from GitHub Actions"
|
||||
|
||||
4
.github/workflows/netlify-livekit.yaml
vendored
4
.github/workflows/netlify-livekit.yaml
vendored
@@ -28,7 +28,7 @@ jobs:
|
||||
ref: ${{ github.event.workflow_run.head_sha }}
|
||||
|
||||
- name: "Download artifact"
|
||||
uses: actions/github-script@v3.1.0
|
||||
uses: actions/github-script@v3.2.0
|
||||
with:
|
||||
script: |
|
||||
const artifacts = await github.actions.listWorkflowRunArtifacts({
|
||||
@@ -60,7 +60,7 @@ jobs:
|
||||
|
||||
- name: Deploy to Netlify
|
||||
id: netlify
|
||||
uses: nwtgck/actions-netlify@v1.2.3
|
||||
uses: nwtgck/actions-netlify@v1.2.4
|
||||
with:
|
||||
publish-dir: dist
|
||||
deploy-message: "Deploy from GitHub Actions"
|
||||
|
||||
10
.github/workflows/publish.yaml
vendored
10
.github/workflows/publish.yaml
vendored
@@ -26,7 +26,7 @@ jobs:
|
||||
uses: actions/checkout@v2
|
||||
|
||||
- name: Log in to container registry
|
||||
uses: docker/login-action@f054a8b539a109f9f41c372932f1ae047eff08c9
|
||||
uses: docker/login-action@cf8514a65188af1d4f94f8c28a7a4153af1088ce
|
||||
with:
|
||||
registry: ${{ env.REGISTRY }}
|
||||
username: ${{ github.actor }}
|
||||
@@ -54,7 +54,7 @@ jobs:
|
||||
tar --numeric-owner --transform "s/dist/element-call-${TARBALL_VERSION}/" -cvzf element-call-${TARBALL_VERSION}.tar.gz dist
|
||||
|
||||
- name: Upload
|
||||
uses: actions/upload-artifact@0b7f8abb1508181956e8e162db84b466c27e18ce
|
||||
uses: actions/upload-artifact@65d862660abb392b8c4a3d1195a2108db131dd05
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ github.token }}
|
||||
with:
|
||||
@@ -62,7 +62,7 @@ jobs:
|
||||
|
||||
- name: Extract metadata (tags, labels) for Docker
|
||||
id: meta
|
||||
uses: docker/metadata-action@818d4b7b91585d195f67373fd9cb0332e31a7175
|
||||
uses: docker/metadata-action@0f8c876bafbf5dbce05c36682ec68e9a0274a48a
|
||||
with:
|
||||
images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
|
||||
tags: |
|
||||
@@ -72,10 +72,10 @@ jobs:
|
||||
type=raw,value=latest-ci_${{steps.current-time.outputs.unix_time}},enable={{is_default_branch}}
|
||||
|
||||
- name: Set up Docker Buildx
|
||||
uses: docker/setup-buildx-action@dc7b9719a96d48369863986a06765841d7ea23f6
|
||||
uses: docker/setup-buildx-action@885d1462b80bc1c1c7f0b00334ad271f09369c55
|
||||
|
||||
- name: Build and push Docker image
|
||||
uses: docker/build-push-action@ad44023a93711e3deb337508980b4b5e9bcdc5dc
|
||||
uses: docker/build-push-action@9311bf5263ae5b36f3ec67aff768790c6e2344ad
|
||||
with:
|
||||
context: .
|
||||
platforms: linux/amd64,linux/arm64
|
||||
|
||||
10
package.json
10
package.json
@@ -25,9 +25,9 @@
|
||||
"@opentelemetry/api": "^1.4.0",
|
||||
"@opentelemetry/context-zone": "^1.9.1",
|
||||
"@opentelemetry/exporter-jaeger": "^1.9.1",
|
||||
"@opentelemetry/exporter-trace-otlp-http": "^0.35.1",
|
||||
"@opentelemetry/instrumentation-document-load": "^0.31.1",
|
||||
"@opentelemetry/instrumentation-user-interaction": "^0.32.1",
|
||||
"@opentelemetry/exporter-trace-otlp-http": "^0.41.0",
|
||||
"@opentelemetry/instrumentation-document-load": "^0.33.0",
|
||||
"@opentelemetry/instrumentation-user-interaction": "^0.33.0",
|
||||
"@opentelemetry/sdk-trace-web": "^1.9.1",
|
||||
"@react-aria/button": "^3.3.4",
|
||||
"@react-aria/dialog": "^3.1.4",
|
||||
@@ -47,6 +47,7 @@
|
||||
"@sentry/react": "^6.13.3",
|
||||
"@sentry/tracing": "^6.13.3",
|
||||
"@use-gesture/react": "^10.2.11",
|
||||
"@vector-im/compound-design-tokens": "^0.0.5",
|
||||
"@vitejs/plugin-basic-ssl": "^1.0.1",
|
||||
"@vitejs/plugin-react": "^4.0.1",
|
||||
"classnames": "^2.3.1",
|
||||
@@ -78,12 +79,15 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.16.5",
|
||||
"@react-spring/rafz": "^9.7.3",
|
||||
"@sentry/vite-plugin": "^0.3.0",
|
||||
"@storybook/react": "^6.5.0-alpha.5",
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@types/content-type": "^1.1.5",
|
||||
"@types/d3": "^7.4.0",
|
||||
"@types/dom-screen-wake-lock": "^1.0.1",
|
||||
"@types/dompurify": "^3.0.2",
|
||||
"@types/grecaptcha": "^3.0.4",
|
||||
"@types/node": "^18.13.0",
|
||||
"@types/react-router-dom": "^5.3.3",
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body class="cpd-theme-dark">
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
11
renovate.json
Normal file
11
renovate.json
Normal file
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"$schema": "https://docs.renovatebot.com/renovate-schema.json",
|
||||
"extends": ["config:base"],
|
||||
"packageRules": [
|
||||
{
|
||||
"description": "Disable renoavte for packages we want to monitor ourselves",
|
||||
"matchPackagePatterns": ["matrix-js-sdk"],
|
||||
"enabled": false
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -16,7 +16,7 @@ limitations under the License.
|
||||
|
||||
.avatar {
|
||||
position: relative;
|
||||
color: var(--primary-content);
|
||||
color: var(--stopgap-color-on-solid-accent);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -33,7 +33,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.avatar svg * {
|
||||
fill: var(--primary-content);
|
||||
fill: var(--cpd-color-text-primary);
|
||||
}
|
||||
|
||||
.avatar span {
|
||||
|
||||
@@ -18,5 +18,5 @@ limitations under the License.
|
||||
flex: 1;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
background-color: var(--subtle-primary);
|
||||
background-color: var(--cpd-color-bg-subtle-primary);
|
||||
}
|
||||
|
||||
@@ -17,7 +17,7 @@ limitations under the License.
|
||||
.banner {
|
||||
position: absolute;
|
||||
padding: 29px;
|
||||
background-color: var(--quaternary-content);
|
||||
background-color: var(--cpd-color-bg-subtle-primary);
|
||||
vertical-align: middle;
|
||||
font-size: var(--font-size-body);
|
||||
text-align: center;
|
||||
|
||||
@@ -24,5 +24,5 @@ limitations under the License.
|
||||
margin: 8px;
|
||||
|
||||
border-radius: 100%;
|
||||
background-color: var(--subtle-primary);
|
||||
background-color: var(--cpd-color-bg-subtle-primary);
|
||||
}
|
||||
|
||||
@@ -34,7 +34,7 @@ limitations under the License.
|
||||
.facepile .avatar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
border: 1px solid var(--system);
|
||||
border: 1px solid var(--cpd-color-bg-canvas-default);
|
||||
}
|
||||
|
||||
.facepile.md .avatar {
|
||||
|
||||
@@ -82,27 +82,6 @@ limitations under the License.
|
||||
stroke: white;
|
||||
}
|
||||
|
||||
.backButton {
|
||||
background: transparent;
|
||||
border: none;
|
||||
display: flex;
|
||||
color: var(--primary-content);
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.backButton h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.backButton > * {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.backButton > :last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.userName {
|
||||
font-weight: 600;
|
||||
margin-right: 8px;
|
||||
@@ -111,15 +90,6 @@ limitations under the License.
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.signOutButton {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: rgb(255, 75, 85);
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.versionMismatchWarning {
|
||||
padding-left: 15px;
|
||||
}
|
||||
@@ -134,7 +104,7 @@ limitations under the License.
|
||||
mask-image: url("./icons/AlertTriangleFilled.svg");
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
background-color: var(--alert);
|
||||
background-color: var(--cpd-color-icon-critical-primary);
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
|
||||
@@ -21,8 +21,8 @@ limitations under the License.
|
||||
overflow-y: auto;
|
||||
list-style: none;
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--quinary-content);
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--cpd-color-border-interactive-secondary);
|
||||
background-color: var(--cpd-color-bg-canvas-default);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
@@ -31,7 +31,7 @@ limitations under the License.
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: transparent;
|
||||
color: var(--primary-content);
|
||||
color: var(--cpd-color-text-primary);
|
||||
padding: 8px 16px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
@@ -44,6 +44,6 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.option.disabled {
|
||||
color: var(--quaternary-content);
|
||||
background-color: var(--bgColor3);
|
||||
color: var(--cpd-color-text-disabled);
|
||||
background-color: var(--stopgap-bgColor3);
|
||||
}
|
||||
|
||||
@@ -27,7 +27,7 @@ limitations under the License.
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
color: var(--primary-content);
|
||||
color: var(--cpd-color-text-primary);
|
||||
font-size: var(--font-size-body);
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
@@ -44,7 +44,11 @@ limitations under the License.
|
||||
|
||||
.menuItem.focused,
|
||||
.menuItem:hover {
|
||||
background-color: var(--quinary-content);
|
||||
background-color: var(--cpd-color-bg-action-secondary-hovered);
|
||||
}
|
||||
|
||||
.menuItem:active {
|
||||
background-color: var(--cpd-color-bg-action-secondary-pressed);
|
||||
}
|
||||
|
||||
.menuItem.focused:first-child,
|
||||
@@ -65,5 +69,5 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.checkIcon * {
|
||||
stroke: var(--primary-content);
|
||||
stroke: var(--cpd-color-text-primary);
|
||||
}
|
||||
|
||||
@@ -25,7 +25,7 @@ import { Node } from "@react-types/shared";
|
||||
import styles from "./Menu.module.css";
|
||||
|
||||
interface MenuProps<T> extends AriaMenuOptions<T> {
|
||||
className?: String;
|
||||
className?: string;
|
||||
onClose: () => void;
|
||||
onAction: (value: Key) => void;
|
||||
label?: string;
|
||||
|
||||
@@ -28,7 +28,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: #21262c;
|
||||
background: var(--cpd-color-bg-subtle-secondary);
|
||||
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
|
||||
border-radius: 8px;
|
||||
max-width: 90vw;
|
||||
|
||||
@@ -15,12 +15,12 @@ limitations under the License.
|
||||
*/
|
||||
|
||||
.tooltip {
|
||||
background-color: var(--system);
|
||||
background-color: var(--cpd-color-bg-subtle-secondary);
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
color: var(--primary-content);
|
||||
color: var(--cpd-color-text-primary);
|
||||
border-radius: 8px;
|
||||
max-width: 135px;
|
||||
width: max-content;
|
||||
|
||||
@@ -22,7 +22,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.userButton svg * {
|
||||
fill: var(--primary-content);
|
||||
fill: var(--cpd-color-icon-primary);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
|
||||
@@ -81,7 +81,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.authLinks a {
|
||||
color: var(--accent);
|
||||
color: var(--cpd-color-text-action-accent);
|
||||
text-decoration: none;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
@@ -46,8 +46,8 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.button {
|
||||
color: var(--primary-content);
|
||||
background-color: var(--accent);
|
||||
color: var(--stopgap-color-on-solid-accent);
|
||||
background-color: var(--cpd-color-text-action-accent);
|
||||
}
|
||||
|
||||
.button:focus,
|
||||
@@ -62,7 +62,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.toolbarButton:disabled {
|
||||
opacity: 0.55;
|
||||
background-color: var(--cpd-color-bg-action-primary-disabled);
|
||||
}
|
||||
|
||||
.toolbarButton,
|
||||
@@ -70,72 +70,89 @@ limitations under the License.
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50px;
|
||||
background-color: var(--system);
|
||||
background-color: var(--cpd-color-bg-subtle-secondary);
|
||||
}
|
||||
|
||||
.toolbarButton:hover,
|
||||
.toolbarButtonSecondary:hover {
|
||||
background-color: var(--quinary-content);
|
||||
background-color: var(--cpd-color-bg-action-secondary-hovered);
|
||||
}
|
||||
|
||||
.toolbarButton:active,
|
||||
.toolbarButtonSecondary:active {
|
||||
background-color: var(--cpd-color-bg-action-secondary-pressed);
|
||||
}
|
||||
|
||||
.toolbarButton.on,
|
||||
.toolbarButton.off {
|
||||
background-color: var(--primary-content);
|
||||
background-color: var(--cpd-color-bg-action-primary-rest);
|
||||
}
|
||||
|
||||
.toolbarButtonSecondary.on {
|
||||
background-color: var(--accent);
|
||||
background-color: var(--cpd-color-text-success-primary);
|
||||
}
|
||||
|
||||
.iconButton:not(.stroke) svg * {
|
||||
fill: var(--primary-content);
|
||||
fill: var(--cpd-color-bg-action-primary-rest);
|
||||
}
|
||||
|
||||
.iconButton:not(.stroke):hover svg * {
|
||||
fill: var(--accent);
|
||||
fill: var(--cpd-color-icon-accent-tertiary);
|
||||
}
|
||||
|
||||
.iconButton.on:not(.stroke) svg * {
|
||||
fill: var(--accent);
|
||||
fill: var(--cpd-color-icon-accent-tertiary);
|
||||
}
|
||||
|
||||
.iconButton.on.stroke svg * {
|
||||
stroke: var(--accent);
|
||||
stroke: var(--cpd-color-icon-accent-tertiary);
|
||||
}
|
||||
|
||||
.hangupButton {
|
||||
background-color: var(--cpd-color-bg-critical-primary);
|
||||
}
|
||||
|
||||
.hangupButton,
|
||||
.hangupButton:hover {
|
||||
background-color: var(--alert);
|
||||
background-color: var(--cpd-color-bg-critical-hovered);
|
||||
}
|
||||
|
||||
.toolbarButton.hangupButton svg * {
|
||||
fill: var(--stopgap-color-on-solid-accent);
|
||||
}
|
||||
|
||||
.toolbarButton svg *,
|
||||
.toolbarButtonSecondary svg * {
|
||||
fill: var(--cpd-color-icon-primary);
|
||||
}
|
||||
|
||||
.toolbarButton.on svg * {
|
||||
fill: var(--accent);
|
||||
fill: var(--cpd-color-icon-accent-tertiary);
|
||||
}
|
||||
|
||||
.toolbarButton.off svg * {
|
||||
fill: #21262c;
|
||||
fill: var(--cpd-color-icon-on-solid-primary);
|
||||
}
|
||||
|
||||
.toolbarButtonSecondary.on svg * {
|
||||
fill: var(--primary-content);
|
||||
fill: var(--stopgap-color-on-solid-accent);
|
||||
}
|
||||
|
||||
.secondary,
|
||||
.copyButton {
|
||||
color: var(--accent);
|
||||
border: 2px solid var(--accent);
|
||||
color: var(--cpd-color-text-action-accent);
|
||||
border: 2px solid var(--cpd-color-text-action-accent);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.secondaryHangup {
|
||||
color: var(--alert);
|
||||
border: 2px solid var(--alert);
|
||||
color: var(--cpd-color-text-critical-primary);
|
||||
border: 2px solid var(--cpd-color-border-critical-primary);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.copyButton.secondaryCopy {
|
||||
color: var(--primary-content);
|
||||
border-color: var(--primary-content);
|
||||
color: var(--cpd-color-text-primary);
|
||||
border-color: var(--cpd-color-border-interactive-primary);
|
||||
}
|
||||
|
||||
.copyButton {
|
||||
@@ -158,12 +175,12 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.copyButton:not(.on) svg * {
|
||||
fill: var(--accent);
|
||||
fill: var(--cpd-color-icon-accent-tertiary);
|
||||
}
|
||||
|
||||
.copyButton.on {
|
||||
border-color: transparent;
|
||||
background-color: var(--accent);
|
||||
background-color: var(--cpd-color-text-action-accent);
|
||||
color: white;
|
||||
}
|
||||
|
||||
@@ -172,32 +189,36 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.copyButton.secondaryCopy:not(.on) svg * {
|
||||
fill: var(--primary-content);
|
||||
fill: var(--cpd-color-bg-action-primary-rest);
|
||||
}
|
||||
|
||||
.iconCopyButton svg * {
|
||||
fill: var(--tertiary-content);
|
||||
fill: var(--cpd-color-icon-secondary);
|
||||
}
|
||||
|
||||
.iconCopyButton:hover svg * {
|
||||
fill: var(--accent);
|
||||
fill: var(--cpd-color-icon-accent-tertiary);
|
||||
}
|
||||
|
||||
.iconCopyButton.on svg *,
|
||||
.iconCopyButton.on:hover svg * {
|
||||
fill: transparent;
|
||||
stroke: var(--accent);
|
||||
stroke: var(--cpd-color-text-action-accent);
|
||||
}
|
||||
|
||||
.dropdownButton {
|
||||
color: var(--primary-content);
|
||||
color: var(--cpd-color-text-primary);
|
||||
padding: 2px 8px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.dropdownButton:hover,
|
||||
.dropdownButton:hover {
|
||||
background-color: var(--cpd-color-bg-action-secondary-hovered);
|
||||
}
|
||||
|
||||
.dropdownButton:active,
|
||||
.dropdownButton.on {
|
||||
background-color: var(--quinary-content);
|
||||
background-color: var(--cpd-color-bg-action-secondary-pressed);
|
||||
}
|
||||
|
||||
.dropdownButton svg {
|
||||
@@ -205,7 +226,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.dropdownButton svg * {
|
||||
fill: var(--primary-content);
|
||||
fill: var(--cpd-color-icon-primary);
|
||||
}
|
||||
|
||||
.lg {
|
||||
@@ -215,6 +236,6 @@ limitations under the License.
|
||||
.linkButton {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: var(--accent);
|
||||
color: var(--cpd-color-text-action-accent);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -26,7 +26,7 @@ limitations under the License.
|
||||
.callTile {
|
||||
height: 95px;
|
||||
padding: 12px;
|
||||
background-color: var(--system);
|
||||
background-color: var(--cpd-color-bg-subtle-secondary);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
@@ -52,7 +52,7 @@ limitations under the License.
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
padding: 0 16px;
|
||||
color: var(--primary-content);
|
||||
color: var(--cpd-color-text-primary);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -39,5 +39,5 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.notice {
|
||||
color: var(--secondary-content);
|
||||
color: var(--cpd-color-text-secondary);
|
||||
}
|
||||
|
||||
@@ -47,5 +47,5 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.notice {
|
||||
color: var(--secondary-content);
|
||||
color: var(--cpd-color-text-secondary);
|
||||
}
|
||||
|
||||
@@ -21,6 +21,7 @@ limitations under the License.
|
||||
(to avoid having to maintain a fork of Inter). */
|
||||
|
||||
@import "normalize.css/normalize.css";
|
||||
@import "@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css";
|
||||
|
||||
:root {
|
||||
--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||
@@ -37,22 +38,17 @@ limitations under the License.
|
||||
--font-size-title: calc(24px * var(--font-scale));
|
||||
--font-size-headline: calc(32px * var(--font-scale));
|
||||
|
||||
--accent: #0dbd8b;
|
||||
--accent-20: #0dbd8b33;
|
||||
--alert: #ff5b55;
|
||||
--alert-20: #ff5b5533;
|
||||
--links: #0086e6;
|
||||
--primary-content: #ffffff;
|
||||
--secondary-content: #a9b2bc;
|
||||
--tertiary-content: #8e99a4;
|
||||
--tertiary-content-20: #8e99a433;
|
||||
--quaternary-content: #6f7882;
|
||||
--quinary-content: #394049;
|
||||
--system: #21262c;
|
||||
--background: #15191e;
|
||||
--background-85: rgba(23, 25, 28, 0.85);
|
||||
--bgColor3: #444; /* This isn't found anywhere in the designs or Compound */
|
||||
--subtle-primary: #26282d;
|
||||
--cpd-color-border-accent: var(--cpd-color-green-1100);
|
||||
/* These colors are needed during the transitionary period between the old and
|
||||
new Compound design systems, but should be removed ASAP */
|
||||
--stopgap-color-on-solid-accent: var(--cpd-color-bg-canvas-default);
|
||||
--stopgap-background-85: rgba(255, 255, 255, 0.85);
|
||||
--stopgap-bgColor3: #444;
|
||||
}
|
||||
|
||||
.cpd-theme-dark {
|
||||
--stopgap-color-on-solid-accent: var(--cpd-color-text-primary);
|
||||
--stopgap-background-85: rgba(16, 19, 23, 0.85);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
@@ -136,8 +132,8 @@ limitations under the License.
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background);
|
||||
color: var(--primary-content);
|
||||
background-color: var(--cpd-color-bg-canvas-default);
|
||||
color: var(--cpd-color-text-primary);
|
||||
color-scheme: dark;
|
||||
margin: 0;
|
||||
font-family: var(--font-family);
|
||||
@@ -204,7 +200,7 @@ p {
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--accent);
|
||||
color: var(--cpd-color-text-action-accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@@ -216,8 +212,8 @@ a:active {
|
||||
hr {
|
||||
width: calc(100% - 24px);
|
||||
border: none;
|
||||
border-top: 1px solid var(--quinary-content);
|
||||
color: var(--quaternary-content);
|
||||
border-top: 1px solid var(--cpd-color-border-interactive-secondary);
|
||||
color: var(--cpd-color-border-interactive-secondary);
|
||||
overflow: visible;
|
||||
text-align: center;
|
||||
height: 5px;
|
||||
|
||||
@@ -87,62 +87,10 @@ export class Initializer {
|
||||
});
|
||||
|
||||
// Custom Themeing
|
||||
if (import.meta.env.VITE_CUSTOM_THEME) {
|
||||
const style = document.documentElement.style;
|
||||
style.setProperty(
|
||||
"--accent",
|
||||
import.meta.env.VITE_THEME_ACCENT as string
|
||||
);
|
||||
style.setProperty(
|
||||
"--accent-20",
|
||||
import.meta.env.VITE_THEME_ACCENT_20 as string
|
||||
);
|
||||
style.setProperty("--alert", import.meta.env.VITE_THEME_ALERT as string);
|
||||
style.setProperty(
|
||||
"--alert-20",
|
||||
import.meta.env.VITE_THEME_ALERT_20 as string
|
||||
);
|
||||
style.setProperty("--links", import.meta.env.VITE_THEME_LINKS as string);
|
||||
style.setProperty(
|
||||
"--primary-content",
|
||||
import.meta.env.VITE_THEME_PRIMARY_CONTENT as string
|
||||
);
|
||||
style.setProperty(
|
||||
"--secondary-content",
|
||||
import.meta.env.VITE_THEME_SECONDARY_CONTENT as string
|
||||
);
|
||||
style.setProperty(
|
||||
"--tertiary-content",
|
||||
import.meta.env.VITE_THEME_TERTIARY_CONTENT as string
|
||||
);
|
||||
style.setProperty(
|
||||
"--tertiary-content-20",
|
||||
import.meta.env.VITE_THEME_TERTIARY_CONTENT_20 as string
|
||||
);
|
||||
style.setProperty(
|
||||
"--quaternary-content",
|
||||
import.meta.env.VITE_THEME_QUATERNARY_CONTENT as string
|
||||
);
|
||||
style.setProperty(
|
||||
"--quinary-content",
|
||||
import.meta.env.VITE_THEME_QUINARY_CONTENT as string
|
||||
);
|
||||
style.setProperty(
|
||||
"--system",
|
||||
import.meta.env.VITE_THEME_SYSTEM as string
|
||||
);
|
||||
style.setProperty(
|
||||
"--background",
|
||||
import.meta.env.VITE_THEME_BACKGROUND as string
|
||||
);
|
||||
style.setProperty(
|
||||
"--background-85",
|
||||
import.meta.env.VITE_THEME_BACKGROUND_85 as string
|
||||
);
|
||||
style.setProperty(
|
||||
"--subtle-primary",
|
||||
import.meta.env.VITE_THEME_SUBTLE_PRIMARY as string
|
||||
);
|
||||
if (import.meta.env.VITE_CUSTOM_CSS) {
|
||||
const style = document.createElement("style");
|
||||
style.textContent = import.meta.env.VITE_CUSTOM_CSS;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
// Custom fonts
|
||||
|
||||
@@ -42,7 +42,7 @@ limitations under the License.
|
||||
position: absolute;
|
||||
bottom: 11px;
|
||||
right: -4px;
|
||||
background-color: var(--quinary-content);
|
||||
background-color: var(--cpd-color-subtle-primary);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 10px;
|
||||
@@ -53,7 +53,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.removeButton {
|
||||
color: var(--accent);
|
||||
color: var(--cpd-color-text-action-accent);
|
||||
font-size: var(--font-size-caption);
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
@@ -42,7 +42,7 @@ limitations under the License.
|
||||
.inputField {
|
||||
border-radius: 4px;
|
||||
transition: border-color 0.25s;
|
||||
border: 1px solid var(--quinary-content);
|
||||
border: 1px solid var(--cpd-color-border-interactive-primary);
|
||||
}
|
||||
|
||||
.inputField input,
|
||||
@@ -52,8 +52,8 @@ limitations under the License.
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 12px 9px 10px 9px;
|
||||
color: var(--primary-content);
|
||||
background-color: var(--background);
|
||||
color: var(--cpd-color-text-primary);
|
||||
background-color: var(--cpd-color-bg-canvas-default);
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
@@ -61,7 +61,7 @@ limitations under the License.
|
||||
.inputField.disabled input,
|
||||
.inputField.disabled textarea,
|
||||
.inputField.disabled span {
|
||||
color: var(--quaternary-content);
|
||||
color: var(--cpd-color-text-disabled);
|
||||
}
|
||||
|
||||
.inputField span {
|
||||
@@ -81,13 +81,13 @@ limitations under the License.
|
||||
.inputField input:placeholder-shown:focus::placeholder,
|
||||
.inputField textarea:placeholder-shown:focus::placeholder {
|
||||
transition: color 0.25s ease-in 0.1s;
|
||||
color: var(--quaternary-content);
|
||||
color: var(--cpd-color-text-placeholder);
|
||||
}
|
||||
|
||||
.inputField label {
|
||||
transition: font-size 0.25s ease-out 0.1s, color 0.25s ease-out 0.1s,
|
||||
top 0.25s ease-out 0.1s, background-color 0.25s ease-out 0.1s;
|
||||
color: var(--tertiary-content);
|
||||
color: var(--cpd-color-text-secondary);
|
||||
background-color: transparent;
|
||||
font-size: var(--font-size-body);
|
||||
position: absolute;
|
||||
@@ -103,7 +103,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.inputField:focus-within {
|
||||
border-color: var(--links);
|
||||
border-color: var(--cpd-color-text-link-external);
|
||||
}
|
||||
|
||||
.inputField input:focus,
|
||||
@@ -117,7 +117,7 @@ limitations under the License.
|
||||
.inputField textarea:focus + label,
|
||||
.inputField textarea:not(:placeholder-shown) + label,
|
||||
.inputField.prefix textarea + label {
|
||||
background-color: var(--system);
|
||||
background-color: var(--cpd-color-bg-canvas-default);
|
||||
transition: font-size 0.25s ease-out 0s, color 0.25s ease-out 0s,
|
||||
top 0.25s ease-out 0s, background-color 0.25s ease-out 0s;
|
||||
font-size: var(--font-size-micro);
|
||||
@@ -128,7 +128,7 @@ limitations under the License.
|
||||
|
||||
.inputField input:focus + label,
|
||||
.inputField textarea:focus + label {
|
||||
color: var(--links);
|
||||
color: var(--cpd-color-border-focused);
|
||||
}
|
||||
|
||||
.checkboxField {
|
||||
@@ -169,11 +169,11 @@ limitations under the License.
|
||||
|
||||
.checkboxField.disabled,
|
||||
.checkboxField.disabled .description {
|
||||
color: var(--quinary-content);
|
||||
color: var(--cpd-color-text-disabled);
|
||||
}
|
||||
|
||||
.checkboxField.disabled .checkbox {
|
||||
border-color: var(--quinary-content);
|
||||
border-color: var(--cpd-color-border-disabled);
|
||||
}
|
||||
|
||||
.checkbox svg {
|
||||
@@ -181,12 +181,12 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.checkbox svg * {
|
||||
stroke: var(--primary-content);
|
||||
stroke: var(--stopgap-color-on-solid-accent);
|
||||
}
|
||||
|
||||
.checkboxField input[type="checkbox"]:checked + label > .checkbox {
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
background: var(--cpd-color-text-action-accent);
|
||||
border-color: var(--cpd-color-text-action-accent);
|
||||
}
|
||||
|
||||
.checkboxField input[type="checkbox"]:checked + label > .checkbox svg {
|
||||
@@ -194,18 +194,18 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.checkboxField:focus-within .checkbox {
|
||||
border: 1.5px solid var(--links) !important;
|
||||
border: 1.5px solid var(--cpd-color-text-link-external) !important;
|
||||
}
|
||||
|
||||
.errorMessage {
|
||||
margin: 0;
|
||||
font-size: var(--font-size-caption);
|
||||
color: var(--alert);
|
||||
color: var(--cpd-color-text-critical-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.description {
|
||||
color: var(--secondary-content);
|
||||
color: var(--cpd-color-text-secondary);
|
||||
margin-left: 26px;
|
||||
width: 100%; /* Ensure that it breaks onto the next row */
|
||||
}
|
||||
|
||||
@@ -31,11 +31,11 @@ limitations under the License.
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 12px;
|
||||
background-color: var(--background);
|
||||
background-color: var(--cpd-color-bg-canvas-default);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--quinary-content);
|
||||
border: 1px solid var(--cpd-color-border-interactive-primary);
|
||||
font-size: var(--font-size-body);
|
||||
color: var(--primary-content);
|
||||
color: var(--cpd-color-text-primary);
|
||||
height: 40px;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
|
||||
@@ -11,7 +11,9 @@ import {
|
||||
const defaultLiveKitPublishOptions: TrackPublishDefaults = {
|
||||
audioPreset: AudioPresets.music,
|
||||
dtx: true,
|
||||
red: true,
|
||||
// disable red because the livekit server strips out red packets for clients
|
||||
// that don't support it (firefox) but of course that doesn't work with e2ee.
|
||||
red: false,
|
||||
forceStereo: false,
|
||||
simulcast: true,
|
||||
videoSimulcastLayers: [VideoPresets.h180, VideoPresets.h360] as VideoPreset[],
|
||||
|
||||
@@ -36,6 +36,12 @@ export enum ECAddonConnectionState {
|
||||
|
||||
export type ECConnectionState = ConnectionState | ECAddonConnectionState;
|
||||
|
||||
// This is mostly necessary because an empty useRef is an empty object
|
||||
// which is truthy, so we can't just use Boolean(currentSFUConfig.current)
|
||||
function sfuConfigValid(sfuConfig?: SFUConfig): boolean {
|
||||
return Boolean(sfuConfig?.url) && Boolean(sfuConfig?.jwt);
|
||||
}
|
||||
|
||||
export function useECConnectionState(
|
||||
livekitRoom?: Room,
|
||||
sfuConfig?: SFUConfig
|
||||
@@ -68,18 +74,22 @@ export function useECConnectionState(
|
||||
|
||||
const currentSFUConfig = useRef(Object.assign({}, sfuConfig));
|
||||
|
||||
// Id we are transitioning from a valid config to another valid one, we need
|
||||
// to explicitly switch focus
|
||||
useEffect(() => {
|
||||
if (
|
||||
sfuConfig &&
|
||||
currentSFUConfig.current &&
|
||||
sfuConfigValid(sfuConfig) &&
|
||||
sfuConfigValid(currentSFUConfig.current) &&
|
||||
!sfuConfigEquals(currentSFUConfig.current, sfuConfig)
|
||||
) {
|
||||
logger.info("JWT changed!");
|
||||
logger.info(
|
||||
`SFU config changed! URL was ${currentSFUConfig.current?.url} now ${sfuConfig?.url}`
|
||||
);
|
||||
|
||||
(async () => {
|
||||
setSwitchingFocus(true);
|
||||
await livekitRoom?.disconnect();
|
||||
await livekitRoom?.connect(sfuConfig.url, sfuConfig.jwt);
|
||||
await livekitRoom?.connect(sfuConfig!.url, sfuConfig!.jwt);
|
||||
})();
|
||||
}
|
||||
|
||||
|
||||
@@ -18,7 +18,7 @@ limitations under the License.
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 194px;
|
||||
background: var(--system);
|
||||
background: var(--cpd-color-bg-subtle-secondary);
|
||||
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
@@ -15,7 +15,7 @@ limitations under the License.
|
||||
*/
|
||||
|
||||
.inspector {
|
||||
background-color: var(--system);
|
||||
background-color: var(--cpd-color-bg-subtle-secondary);
|
||||
}
|
||||
|
||||
.scrollContainer {
|
||||
@@ -36,6 +36,6 @@ limitations under the License.
|
||||
|
||||
.sequenceDiagramViewer :global(.messageText) {
|
||||
font-size: var(--font-size-caption);
|
||||
fill: var(--primary-content) !important;
|
||||
stroke: var(--primary-content) !important;
|
||||
fill: var(--cpd-color-text-primary) !important;
|
||||
stroke: var(--cpd-color-text-primary) !important;
|
||||
}
|
||||
|
||||
@@ -280,7 +280,6 @@ export function GroupCallView({
|
||||
<ActiveCall
|
||||
client={client}
|
||||
rtcSession={rtcSession}
|
||||
memberships={memberships}
|
||||
onLeave={onLeave}
|
||||
hideHeader={hideHeader}
|
||||
muteStates={muteStates}
|
||||
|
||||
@@ -57,14 +57,14 @@ limitations under the License.
|
||||
background: linear-gradient(
|
||||
360deg,
|
||||
#15191e 0%,
|
||||
rgba(21, 25, 30, 0.9) 37%,
|
||||
rgba(21, 25, 30, 0.8) 49.68%,
|
||||
rgba(21, 25, 30, 0.7) 56.68%,
|
||||
rgba(21, 25, 30, 0.427397) 72.92%,
|
||||
rgba(21, 25, 30, 0.257534) 81.06%,
|
||||
rgba(21, 25, 30, 0.136986) 87.29%,
|
||||
rgba(21, 25, 30, 0.0658079) 92.4%,
|
||||
rgba(21, 25, 30, 0) 100%
|
||||
rgba(16, 19, 23, 0.9) 37%,
|
||||
rgba(16, 19, 23, 0.8) 49.68%,
|
||||
rgba(16, 19, 23, 0.7) 56.68%,
|
||||
rgba(16, 19, 23, 0.427397) 72.92%,
|
||||
rgba(16, 19, 23, 0.257534) 81.06%,
|
||||
rgba(16, 19, 23, 0.136986) 87.29%,
|
||||
rgba(16, 19, 23, 0.0658079) 92.4%,
|
||||
rgba(16, 19, 23, 0) 100%
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -35,7 +35,6 @@ import { OverlayTriggerState } from "@react-stately/overlays";
|
||||
import { JoinRule } from "matrix-js-sdk/src/@types/partials";
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
|
||||
import { CallMembership } from "matrix-js-sdk/src/matrixrtc/CallMembership";
|
||||
|
||||
import type { IWidgetApiRequest } from "matrix-widget-api";
|
||||
import {
|
||||
@@ -120,7 +119,6 @@ export interface InCallViewProps {
|
||||
rtcSession: MatrixRTCSession;
|
||||
livekitRoom: Room;
|
||||
muteStates: MuteStates;
|
||||
memberships: CallMembership[];
|
||||
onLeave: (error?: Error) => void;
|
||||
hideHeader: boolean;
|
||||
otelGroupCallMembership?: OTelGroupCallMembership;
|
||||
@@ -132,7 +130,6 @@ export function InCallView({
|
||||
rtcSession,
|
||||
livekitRoom,
|
||||
muteStates,
|
||||
memberships,
|
||||
onLeave,
|
||||
hideHeader,
|
||||
otelGroupCallMembership,
|
||||
|
||||
@@ -20,7 +20,7 @@ limitations under the License.
|
||||
height: 50vh;
|
||||
border-radius: 24px;
|
||||
overflow: hidden;
|
||||
background-color: var(--bgColor3);
|
||||
background-color: var(--stopgap-bgColor3);
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
@@ -41,7 +41,7 @@ limitations under the License.
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: var(--bgColor3);
|
||||
background-color: var(--stopgap-bgColor3);
|
||||
}
|
||||
|
||||
.cameraPermissions {
|
||||
@@ -62,7 +62,7 @@ limitations under the License.
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: rgba(23, 25, 28, 0.9);
|
||||
background-color: var(--stopgap-background-85);
|
||||
}
|
||||
|
||||
.previewButtons > * {
|
||||
|
||||
@@ -20,7 +20,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.settingsModal p {
|
||||
color: var(--secondary-content);
|
||||
color: var(--cpd-color-text-secondary);
|
||||
}
|
||||
|
||||
.tabContainer {
|
||||
|
||||
@@ -92,7 +92,7 @@ export const useOptInAnalytics = (): DisableableSetting<boolean | null> => {
|
||||
export const useEnableSPAE2EE = (): DisableableSetting<boolean | null> => {
|
||||
const settingVal = useSetting<boolean | null>(
|
||||
"enable-end-to-end-encryption",
|
||||
false
|
||||
true
|
||||
);
|
||||
|
||||
if (!isE2EESupported()) return [false, null];
|
||||
|
||||
@@ -44,12 +44,12 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.tab > * {
|
||||
color: var(--secondary-content);
|
||||
color: var(--cpd-color-text-secondary);
|
||||
margin: 0 8px 0 0;
|
||||
}
|
||||
|
||||
.tab svg * {
|
||||
fill: var(--secondary-content);
|
||||
fill: var(--cpd-color-text-secondary);
|
||||
}
|
||||
|
||||
.tab > :last-child {
|
||||
@@ -57,15 +57,15 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.tab.selected {
|
||||
background-color: var(--accent);
|
||||
background-color: var(--cpd-color-text-action-accent);
|
||||
}
|
||||
|
||||
.tab.selected * {
|
||||
color: var(--primary-content);
|
||||
color: var(--stopgap-color-on-solid-accent);
|
||||
}
|
||||
|
||||
.tab.selected svg * {
|
||||
fill: var(--primary-content);
|
||||
fill: var(--stopgap-color-on-solid-accent);
|
||||
}
|
||||
|
||||
.tab.disabled {
|
||||
|
||||
@@ -37,7 +37,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.link {
|
||||
color: var(--links);
|
||||
color: var(--cpd-color-text-link-external);
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
@@ -46,7 +46,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.primary {
|
||||
color: var(--accent);
|
||||
color: var(--cpd-color-text-action-accent);
|
||||
}
|
||||
|
||||
.overflowEllipsis {
|
||||
|
||||
@@ -53,7 +53,7 @@ limitations under the License.
|
||||
bottom: -1px;
|
||||
content: "";
|
||||
border-radius: var(--tileRadius);
|
||||
box-shadow: inset 0 0 0 4px var(--accent) !important;
|
||||
box-shadow: inset 0 0 0 4px var(--cpd-color-border-accent) !important;
|
||||
opacity: 0;
|
||||
transition: opacity ease 0.15s;
|
||||
}
|
||||
@@ -77,8 +77,8 @@ limitations under the License.
|
||||
position: absolute;
|
||||
height: 24px;
|
||||
padding: 0 8px;
|
||||
color: var(--primary-content);
|
||||
background-color: var(--background-85);
|
||||
color: var(--cpd-color-text-primary);
|
||||
background-color: var(--stopgap-background-85);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -95,6 +95,10 @@ limitations under the License.
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.infoBubble > svg * {
|
||||
fill: var(--cpd-color-icon-primary);
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@@ -103,8 +107,8 @@ limitations under the License.
|
||||
width: 100%;
|
||||
height: 42px;
|
||||
|
||||
color: var(--primary-content);
|
||||
background-color: var(--background-85);
|
||||
color: var(--cpd-color-text-primary);
|
||||
background-color: var(--stopgap-background-85);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -154,7 +158,7 @@ limitations under the License.
|
||||
.videoMutedOverlay {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #21262c;
|
||||
background-color: var(--cpd-color-bg-subtle-secondary);
|
||||
}
|
||||
|
||||
.presenterLabel {
|
||||
@@ -162,7 +166,7 @@ limitations under the License.
|
||||
top: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background-color: #17191c;
|
||||
background-color: var(--stopgap-background-85);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@@ -40,9 +40,9 @@ limitations under the License.
|
||||
appearance: none;
|
||||
|
||||
background-color: transparent;
|
||||
--slider-color: var(--quinary-content);
|
||||
--slider-color: var(--cpd-color-bg-subtle-primary);
|
||||
--slider-height: 4px;
|
||||
--thumb-color: var(--accent);
|
||||
--thumb-color: var(--cpd-color-text-action-accent);
|
||||
--thumb-radius: 100%;
|
||||
--thumb-size: 16px;
|
||||
--thumb-margin-top: -6px;
|
||||
|
||||
Reference in New Issue
Block a user