@inventure71/paddockjs 2.0.1 → 4.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +176 -1
- package/INSTALL_AND_UPDATE.md +24 -4
- package/README.md +84 -512
- package/docs/architecture.md +38 -24
- package/docs/component_inventory.md +72 -0
- package/docs/composable-layouts.md +77 -0
- package/docs/concepts.md +2 -2
- package/docs/custom_model_controller.md +6 -6
- package/docs/data-helpers.md +50 -0
- package/docs/data_contract.md +104 -27
- package/docs/getting-started.md +75 -0
- package/docs/headless-environment.md +68 -0
- package/docs/index.md +18 -4
- package/docs/learnings.md +6 -6
- package/docs/rules.md +12 -8
- package/docs/sense_contract.md +1 -1
- package/docs/system_specs.md +71 -21
- package/docs/theming.md +64 -0
- package/docs/training.md +26 -19
- package/docs/troubleshooting.md +76 -0
- package/docs/upgrading-hosts-to-3.md +42 -0
- package/examples/python/README.md +6 -0
- package/examples/python/base_policy_server.py +19 -0
- package/package.json +10 -3
- package/src/api/PaddockSimulatorController.js +150 -24
- package/src/api/runtimeTheme.js +59 -0
- package/src/app/F1SimulatorApp.js +213 -29
- package/src/app/banners/raceDataBannerController.js +71 -36
- package/src/app/banners/stewardMessageController.js +5 -4
- package/src/app/camera/cameraConstants.js +2 -0
- package/src/app/camera/cameraController.js +86 -29
- package/src/app/camera/cameraGeometry.js +12 -1
- package/src/app/domBindings.js +89 -9
- package/src/app/layoutScheduler.js +27 -0
- package/src/app/layoutSupport.js +165 -0
- package/src/app/raceOverlayClearanceSupport.js +158 -0
- package/src/app/readouts/carOverviewRenderer.js +16 -8
- package/src/app/readouts/controlStateRenderer.js +1 -1
- package/src/app/readouts/raceStatusRenderer.js +30 -21
- package/src/app/readouts/readoutFormatters.js +2 -0
- package/src/app/readouts/telemetryRenderer.js +17 -8
- package/src/app/readouts/timingTowerRenderer.js +262 -49
- package/src/app/runtime/frameLoop.js +5 -1
- package/src/app/runtime/runtimeVisibility.js +66 -5
- package/src/config/cssValues.js +16 -0
- package/src/config/defaultOptions.js +58 -38
- package/src/config/themeOptions.js +830 -0
- package/src/config/timingGapMode.js +13 -0
- package/src/config/urlOptions.js +25 -0
- package/src/data/championship.js +14 -9
- package/src/data/index.d.ts +212 -0
- package/src/data/index.js +14 -0
- package/src/environment/controllerLoop.js +17 -3
- package/src/environment/episode.js +11 -1
- package/src/environment/index.d.ts +1 -2
- package/src/environment/metrics.js +59 -16
- package/src/environment/observationVector.js +50 -33
- package/src/environment/observations.js +89 -20
- package/src/environment/options.js +1 -1
- package/src/environment/runtime.js +44 -11
- package/src/environment/scenarios.js +1 -1
- package/src/environment/sensors/carRays.js +48 -37
- package/src/environment/sensors/index.js +501 -97
- package/src/environment/sensors/indexedRayBands.js +134 -46
- package/src/environment/sensors/rayBandTrace.js +1171 -0
- package/src/environment/sensors/rayChannels.js +108 -0
- package/src/environment/sensors/rayConfig.js +71 -25
- package/src/environment/sensors/rayGeometry.js +23 -17
- package/src/environment/sensors/sensorTargets.js +67 -1
- package/src/environment/sensors/surfaceRays.js +167 -118
- package/src/environment/sensors/trackRays.js +157 -48
- package/src/index.d.ts +153 -9
- package/src/index.js +52 -3
- package/src/simulation/collisionGeometry.js +260 -96
- package/src/simulation/driver/driverController.js +1 -1
- package/src/simulation/driver/edgeRecovery.js +1 -1
- package/src/simulation/driver/racingControls.js +2 -2
- package/src/simulation/driver/rejoinControls.js +2 -2
- package/src/simulation/pit/pitFlow.js +21 -9
- package/src/simulation/pit/pitKinematics.js +2 -2
- package/src/simulation/pit/pitQueue.js +5 -3
- package/src/simulation/pit/pitRouteMovement.js +9 -4
- package/src/simulation/pit/pitRouting.js +79 -46
- package/src/simulation/pit/pitState.js +1 -0
- package/src/simulation/pit/pitTireService.js +7 -3
- package/src/simulation/race/raceFinish.js +25 -8
- package/src/simulation/race/raceOrder.js +189 -32
- package/src/simulation/race/raceProgress.js +129 -37
- package/src/simulation/race/raceSetup.js +4 -6
- package/src/simulation/race/raceStep.js +26 -14
- package/src/simulation/race/safetyCar.js +1 -1
- package/src/simulation/race/stalledDnf.js +1 -1
- package/src/simulation/raceSimulation.js +20 -17
- package/src/simulation/rules/collisionSteward.js +40 -23
- package/src/simulation/rules/rulesReview.js +77 -56
- package/src/simulation/snapshots/raceSnapshots.js +37 -0
- package/src/simulation/timing/drsTiming.js +143 -30
- package/src/simulation/timing/gapEstimation.js +25 -3
- package/src/simulation/timing/lapTelemetry.js +138 -40
- package/src/simulation/timing/raceTiming.js +5 -1
- package/src/simulation/timing/sectorPerformance.js +104 -26
- package/src/simulation/timing/timingHistory.js +229 -14
- package/src/simulation/timing/timingLines.js +65 -7
- package/src/simulation/track/pitLaneLayout.js +30 -3
- package/src/simulation/track/pitLaneState.js +218 -19
- package/src/simulation/track/spatialQueries.js +66 -33
- package/src/simulation/track/trackMath.js +91 -24
- package/src/simulation/track/trackModel.js +2 -0
- package/src/simulation/track/trackQueryIndex.js +1468 -189
- package/src/simulation/track/trackQueryPitIndex.js +138 -14
- package/src/simulation/track/trackQueryScratch.js +7 -0
- package/src/simulation/track/trackQueryStats.js +25 -0
- package/src/simulation/track/trackSnapshotJson.js +139 -0
- package/src/simulation/track/trackStatePolicy.js +249 -2
- package/src/simulation/vehicle/contactResolution.js +99 -62
- package/src/simulation/vehicle/mainTrackWheelSurface.js +73 -34
- package/src/simulation/vehicle/pitWheelSurface.js +81 -28
- package/src/simulation/vehicle/runoffResponse.js +54 -29
- package/src/simulation/vehicle/vehicleGeometry.js +245 -51
- package/src/simulation/vehicle/vehicleKinematics.js +2 -2
- package/src/simulation/vehicle/vehiclePhysics.js +45 -30
- package/src/simulation/vehicle/vehicleSnapshots.js +35 -1
- package/src/simulation/vehicle/vehicleState.js +7 -1
- package/src/simulation/vehicle/wheelSurface.js +807 -92
- package/src/simulation/warmup/runtimeWarmup.js +0 -1
- package/src/styles.css +1568 -519
- package/src/ui/bannerTemplates.js +38 -28
- package/src/ui/cameraControlsTemplate.js +16 -5
- package/src/ui/carOverviewTemplate.js +12 -5
- package/src/ui/raceCanvasTemplate.js +31 -8
- package/src/ui/raceControlsTemplate.js +27 -10
- package/src/ui/shellTemplate.js +3 -1
- package/src/ui/telemetryDrawerTemplate.js +23 -10
- package/src/ui/telemetryTemplates.js +58 -32
- package/src/ui/templateUtils.js +48 -0
- package/src/ui/timingTowerTemplate.js +29 -12
package/src/styles.css
CHANGED
|
@@ -1,27 +1,33 @@
|
|
|
1
|
-
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@85,500;100,700;110,900&family=IBM+Plex+Mono:wght@500;600;700&display=swap');
|
|
2
|
-
|
|
3
1
|
.f1-sim-component {
|
|
2
|
+
container-type: inline-size;
|
|
4
3
|
color-scheme: dark;
|
|
5
|
-
--
|
|
6
|
-
--
|
|
7
|
-
--
|
|
8
|
-
--
|
|
9
|
-
--
|
|
10
|
-
--
|
|
11
|
-
--
|
|
12
|
-
--
|
|
13
|
-
--
|
|
14
|
-
--
|
|
15
|
-
--
|
|
16
|
-
--
|
|
17
|
-
--
|
|
18
|
-
--
|
|
19
|
-
--
|
|
20
|
-
--
|
|
4
|
+
--paddock-safe-area-top: env(safe-area-inset-top, 0px);
|
|
5
|
+
--paddock-safe-area-right: env(safe-area-inset-right, 0px);
|
|
6
|
+
--paddock-safe-area-bottom: env(safe-area-inset-bottom, 0px);
|
|
7
|
+
--paddock-safe-area-left: env(safe-area-inset-left, 0px);
|
|
8
|
+
--surface: var(--paddock-color-surface, var(--paddock-surface-color, #08090b));
|
|
9
|
+
--surface-raised: var(--paddock-color-surface-raised, var(--paddock-surface-raised-color, #111318));
|
|
10
|
+
--surface-panel: var(--paddock-color-surface-panel, var(--paddock-surface-panel-color, #171a20));
|
|
11
|
+
--line: var(--paddock-color-border, var(--paddock-line-color, rgba(255, 255, 255, 0.13)));
|
|
12
|
+
--line-strong: var(--paddock-line-strong-color, var(--paddock-color-border, rgba(255, 255, 255, 0.28)));
|
|
13
|
+
--text: var(--paddock-color-text, var(--paddock-text-color, #f4f7fb));
|
|
14
|
+
--muted: var(--paddock-color-muted-text, var(--paddock-muted-text-color, #8d97a7));
|
|
15
|
+
--red: var(--paddock-color-primary, var(--paddock-accent-color, #e10600));
|
|
16
|
+
--primary-text: var(--paddock-color-primary-text, #ffffff);
|
|
17
|
+
--race-control-red: var(--paddock-color-red-flag, var(--paddock-race-control-red-color, #e10600));
|
|
18
|
+
--green: var(--paddock-color-green-flag, var(--paddock-green-color, #14c784));
|
|
19
|
+
--yellow: var(--paddock-color-yellow-flag, var(--paddock-yellow-color, #ffd166));
|
|
20
|
+
--blue: var(--paddock-color-info, var(--paddock-blue-color, #39a7ff));
|
|
21
|
+
--track: var(--paddock-color-track, var(--paddock-track-color, #262a31));
|
|
22
|
+
--track-edge: var(--paddock-color-track-edge, var(--paddock-track-edge-color, #f4f7fb));
|
|
23
|
+
--font-display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
24
|
+
--font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', ui-monospace, monospace;
|
|
21
25
|
--timing-columns: 1.9rem 2.1rem minmax(4.6rem, 1fr) 4.55rem 1.6rem;
|
|
22
26
|
--paddock-entry-count: 10;
|
|
23
27
|
--timing-board-max-width: var(--paddock-timing-tower-max-width, 390px);
|
|
24
|
-
--timing-
|
|
28
|
+
--timing-entry-extra-block-padding: 5px;
|
|
29
|
+
--timing-entry-row-min-height: calc(1.3rem + (var(--timing-entry-extra-block-padding) * 2));
|
|
30
|
+
--timing-board-min-height: calc(10.8rem + (var(--paddock-entry-count) * (var(--timing-entry-row-min-height) + 1px)));
|
|
25
31
|
margin: 0;
|
|
26
32
|
min-height: 100%;
|
|
27
33
|
background: var(--surface);
|
|
@@ -29,6 +35,412 @@
|
|
|
29
35
|
font-family: var(--font-display);
|
|
30
36
|
}
|
|
31
37
|
|
|
38
|
+
.f1-sim-component[data-paddock-theme-mode='light'] {
|
|
39
|
+
color-scheme: light;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .sim-shell {
|
|
43
|
+
background: var(--surface);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .sim-topbar {
|
|
47
|
+
border-bottom-color: color-mix(in srgb, var(--red) 74%, var(--line));
|
|
48
|
+
box-shadow: 0 16px 30px rgba(17, 24, 39, 0.12);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .sim-backlink,
|
|
52
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .sim-control {
|
|
53
|
+
color: var(--text);
|
|
54
|
+
background: color-mix(in srgb, var(--paddock-button-background, var(--surface-raised)) 10%, transparent);
|
|
55
|
+
border-color: var(--paddock-button-border, var(--line));
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .sim-backlink:hover,
|
|
59
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .sim-control:hover {
|
|
60
|
+
background: color-mix(in srgb, var(--paddock-button-background, var(--red)) 15%, transparent);
|
|
61
|
+
border-color: color-mix(in srgb, var(--paddock-button-border, var(--red)) 78%, var(--text));
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .sim-control--safety.is-active {
|
|
65
|
+
color: var(--paddock-color-secondary-text, #111318);
|
|
66
|
+
background: var(--yellow);
|
|
67
|
+
border-color: var(--yellow);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .camera-controls {
|
|
71
|
+
background: color-mix(in srgb, var(--paddock-camera-controls-background, var(--surface-panel)) 88%, transparent);
|
|
72
|
+
border-color: var(--paddock-camera-controls-border, var(--line));
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .camera-controls--external {
|
|
76
|
+
background: color-mix(in srgb, var(--paddock-camera-controls-background, var(--surface-panel)) 94%, transparent);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .camera-controls button {
|
|
80
|
+
color: var(--paddock-camera-controls-text, var(--text));
|
|
81
|
+
background: color-mix(in srgb, var(--paddock-camera-controls-background, var(--surface-raised)) 72%, transparent);
|
|
82
|
+
border-color: var(--paddock-camera-controls-border, var(--line));
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .camera-controls button.is-active,
|
|
86
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .camera-controls button[aria-pressed='true'] {
|
|
87
|
+
color: var(--primary-text);
|
|
88
|
+
background: var(--paddock-camera-controls-accent, var(--red));
|
|
89
|
+
border-color: var(--paddock-camera-controls-accent, var(--red));
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .broadcast-tower-frame {
|
|
93
|
+
background:
|
|
94
|
+
linear-gradient(180deg, color-mix(in srgb, var(--text) 8%, transparent), transparent 42%),
|
|
95
|
+
linear-gradient(160deg,
|
|
96
|
+
color-mix(in srgb, var(--paddock-timing-tower-shell-background, var(--surface-panel)) 92%, var(--surface) 8%) 0%,
|
|
97
|
+
color-mix(in srgb, var(--paddock-timing-tower-shell-background, var(--surface-panel)) 80%, var(--surface-raised) 20%) 48%,
|
|
98
|
+
color-mix(in srgb, var(--surface) 82%, var(--surface-raised) 18%) 100%);
|
|
99
|
+
border-color: var(--line);
|
|
100
|
+
box-shadow:
|
|
101
|
+
inset 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent),
|
|
102
|
+
0 20px 46px rgba(17, 24, 39, 0.14);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .broadcast-tower-frame::before {
|
|
106
|
+
background:
|
|
107
|
+
linear-gradient(90deg, color-mix(in srgb, var(--text) 7%, transparent), transparent 18%, transparent 82%, color-mix(in srgb, var(--red) 12%, transparent)),
|
|
108
|
+
linear-gradient(180deg, color-mix(in srgb, var(--text) 8%, transparent), transparent 18%);
|
|
109
|
+
mix-blend-mode: multiply;
|
|
110
|
+
opacity: 0.55;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .broadcast-brand,
|
|
114
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .broadcast-lap {
|
|
115
|
+
color: var(--paddock-timing-tower-driver-text, var(--text));
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .broadcast-lap {
|
|
119
|
+
background: color-mix(in srgb, var(--surface-raised) 72%, transparent);
|
|
120
|
+
border-top-color: var(--line);
|
|
121
|
+
border-bottom-color: var(--line);
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .broadcast-lap strong {
|
|
125
|
+
color: var(--text);
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .car-overview-toggle button {
|
|
129
|
+
color: var(--muted);
|
|
130
|
+
background: color-mix(in srgb, var(--surface-raised) 72%, transparent);
|
|
131
|
+
border-color: var(--line);
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .broadcast-gap-mode-toggle {
|
|
135
|
+
color: var(--muted);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .broadcast-gap-mode-toggle::before {
|
|
139
|
+
background: color-mix(in srgb, var(--surface-raised) 72%, transparent);
|
|
140
|
+
border-color: var(--line);
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .broadcast-gap-mode-toggle.is-active,
|
|
144
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .broadcast-gap-mode-toggle[aria-pressed='true'] {
|
|
145
|
+
color: var(--primary-text);
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .broadcast-gap-mode-toggle.is-active::before,
|
|
149
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .broadcast-gap-mode-toggle[aria-pressed='true']::before {
|
|
150
|
+
background: var(--red);
|
|
151
|
+
border-color: var(--red);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .broadcast-column-head {
|
|
155
|
+
color: var(--muted);
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .timing-row {
|
|
159
|
+
color: var(--paddock-timing-tower-driver-text, var(--text));
|
|
160
|
+
background:
|
|
161
|
+
linear-gradient(90deg, color-mix(in srgb, var(--driver-color, var(--red)) 8%, transparent), transparent 42%),
|
|
162
|
+
color-mix(in srgb, var(--paddock-timing-tower-row-background, var(--surface-raised)) 88%, transparent);
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .timing-row:hover {
|
|
166
|
+
background:
|
|
167
|
+
linear-gradient(90deg, color-mix(in srgb, var(--driver-color, var(--red)) 16%, transparent), transparent 52%),
|
|
168
|
+
color-mix(in srgb, var(--paddock-timing-tower-row-background, var(--surface-raised)) 96%, transparent);
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .timing-row.is-selected {
|
|
172
|
+
color: var(--primary-text);
|
|
173
|
+
background: var(--red);
|
|
174
|
+
box-shadow:
|
|
175
|
+
inset 4px 0 0 var(--driver-color, var(--red)),
|
|
176
|
+
0 0 0 1px color-mix(in srgb, var(--red) 30%, var(--line));
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .timing-row.is-dnf {
|
|
180
|
+
color: var(--muted);
|
|
181
|
+
background:
|
|
182
|
+
linear-gradient(90deg, color-mix(in srgb, var(--muted) 12%, transparent), transparent 42%),
|
|
183
|
+
color-mix(in srgb, var(--surface-raised) 68%, transparent);
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .timing-row.is-dnf .timing-icon,
|
|
187
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .timing-row.is-dnf .timing-tire {
|
|
188
|
+
filter: grayscale(1);
|
|
189
|
+
opacity: 0.64;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .timing-row.is-dnf .timing-position {
|
|
193
|
+
color: var(--muted);
|
|
194
|
+
background: color-mix(in srgb, var(--muted) 16%, var(--surface-raised));
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .timing-row.is-dnf .timing-gap {
|
|
198
|
+
color: var(--muted);
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .timing-position {
|
|
202
|
+
color: var(--primary-text);
|
|
203
|
+
background: color-mix(in srgb, var(--text) 86%, var(--surface));
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .timing-gap {
|
|
207
|
+
color: var(--paddock-timing-tower-gap-text, var(--muted));
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .timing-row.is-selected .timing-position {
|
|
211
|
+
color: var(--primary-text);
|
|
212
|
+
background: var(--red);
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .timing-row.is-selected .timing-gap,
|
|
216
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .timing-row.is-selected .timing-tire--h,
|
|
217
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .timing-row.is-selected .timing-tire--m,
|
|
218
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .timing-row.is-selected .timing-tire--s {
|
|
219
|
+
color: var(--primary-text);
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .sim-canvas-panel {
|
|
223
|
+
box-shadow:
|
|
224
|
+
inset 0 0 80px color-mix(in srgb, var(--text) 10%, transparent),
|
|
225
|
+
0 24px 54px rgba(17, 24, 39, 0.16);
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .race-telemetry-drawer {
|
|
229
|
+
background: var(--surface);
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .race-telemetry-drawer__toolbar {
|
|
233
|
+
background: color-mix(in srgb, var(--surface-raised) 92%, var(--surface));
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .telemetry-drawer {
|
|
237
|
+
background:
|
|
238
|
+
linear-gradient(180deg, color-mix(in srgb, var(--text) 5%, transparent), transparent 22%),
|
|
239
|
+
color-mix(in srgb, var(--surface-panel) 97%, transparent);
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .steward-message,
|
|
243
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .fps-counter,
|
|
244
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .race-finish-panel {
|
|
245
|
+
background: color-mix(in srgb, var(--surface-panel) 88%, transparent);
|
|
246
|
+
border-color: var(--line);
|
|
247
|
+
box-shadow: 0 16px 34px rgba(17, 24, 39, 0.14);
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .fps-counter,
|
|
251
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .fps-counter strong {
|
|
252
|
+
color: var(--text);
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .steward-message.is-penalty {
|
|
256
|
+
--steward-chip-bg: var(--race-control-red);
|
|
257
|
+
--steward-chip-color: var(--primary-text);
|
|
258
|
+
background: linear-gradient(
|
|
259
|
+
110deg,
|
|
260
|
+
color-mix(in srgb, var(--race-control-red) 30%, var(--surface-panel)) 0%,
|
|
261
|
+
color-mix(in srgb, var(--surface-panel) 88%, var(--race-control-red)) 62%
|
|
262
|
+
);
|
|
263
|
+
border-color: var(--race-control-red);
|
|
264
|
+
box-shadow:
|
|
265
|
+
inset 0 3px 0 var(--race-control-red),
|
|
266
|
+
0 16px 34px rgba(17, 24, 39, 0.14);
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .steward-message.is-warning {
|
|
270
|
+
--steward-chip-bg: var(--yellow);
|
|
271
|
+
--steward-chip-color: var(--paddock-color-secondary-text, #111318);
|
|
272
|
+
background: linear-gradient(
|
|
273
|
+
110deg,
|
|
274
|
+
color-mix(in srgb, var(--yellow) 36%, var(--surface-panel)) 0%,
|
|
275
|
+
color-mix(in srgb, var(--surface-panel) 88%, var(--yellow)) 62%
|
|
276
|
+
);
|
|
277
|
+
border-color: var(--yellow);
|
|
278
|
+
box-shadow:
|
|
279
|
+
inset 0 3px 0 var(--yellow),
|
|
280
|
+
0 16px 34px rgba(17, 24, 39, 0.14);
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .start-lights,
|
|
284
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .paddock-loading {
|
|
285
|
+
color: var(--text);
|
|
286
|
+
background:
|
|
287
|
+
radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--red) 12%, transparent), transparent 34%),
|
|
288
|
+
color-mix(in srgb, var(--surface-panel) 82%, transparent);
|
|
289
|
+
border-color: var(--line);
|
|
290
|
+
box-shadow: 0 16px 34px rgba(17, 24, 39, 0.14);
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .start-lights__label,
|
|
294
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .paddock-loading__label {
|
|
295
|
+
color: var(--muted);
|
|
296
|
+
text-shadow: none;
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .start-lights__gantry span,
|
|
300
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .paddock-loading__lights span {
|
|
301
|
+
background: color-mix(in srgb, var(--surface-raised) 88%, var(--text));
|
|
302
|
+
border-color: var(--line);
|
|
303
|
+
box-shadow: inset 0 0 10px color-mix(in srgb, var(--text) 12%, transparent);
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .start-lights__gantry span.is-lit {
|
|
307
|
+
background: var(--race-control-red);
|
|
308
|
+
border-color: color-mix(in srgb, var(--race-control-red) 58%, var(--primary-text));
|
|
309
|
+
box-shadow:
|
|
310
|
+
inset 0 0 8px color-mix(in srgb, var(--primary-text) 18%, transparent),
|
|
311
|
+
0 0 18px color-mix(in srgb, var(--race-control-red) 64%, transparent);
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .start-lights.is-lights-out .start-lights__label {
|
|
315
|
+
color: var(--text);
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .start-lights.is-lights-out .start-lights__gantry span {
|
|
319
|
+
background: color-mix(in srgb, var(--text) 86%, var(--surface));
|
|
320
|
+
border-color: var(--line);
|
|
321
|
+
box-shadow: inset 0 0 12px color-mix(in srgb, var(--text) 16%, transparent);
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .paddock-loading__lights span {
|
|
325
|
+
animation-name: paddock-loading-pulse-light;
|
|
326
|
+
}
|
|
327
|
+
|
|
328
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .race-data-panel {
|
|
329
|
+
color: var(--paddock-race-data-panel-text, var(--text));
|
|
330
|
+
background:
|
|
331
|
+
linear-gradient(104deg,
|
|
332
|
+
color-mix(in srgb, var(--paddock-race-data-panel-background, var(--surface-panel)) 98%, var(--surface) 2%) 0 58%,
|
|
333
|
+
color-mix(in srgb, var(--surface-raised) 86%, var(--paddock-race-data-panel-background, var(--surface-panel)) 14%) 58.2% 68%,
|
|
334
|
+
color-mix(in srgb, var(--surface-panel) 92%, var(--surface) 8%) 68.2% 100%),
|
|
335
|
+
repeating-linear-gradient(90deg, color-mix(in srgb, var(--text) 5%, transparent) 0 1px, transparent 1px 82px);
|
|
336
|
+
box-shadow:
|
|
337
|
+
0 18px 44px rgba(17, 24, 39, 0.14),
|
|
338
|
+
inset 0 1px color-mix(in srgb, var(--text) 8%, transparent);
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .race-data-copy strong,
|
|
342
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .race-data-panel.is-radio-mode .race-data-copy strong,
|
|
343
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .race-data-panel[data-idle-mode="quote"] .race-data-subtitle {
|
|
344
|
+
color: var(--text);
|
|
345
|
+
text-shadow: none;
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .race-data-subtitle,
|
|
349
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .race-data-panel[data-idle-mode="quote"] .race-data-copy strong {
|
|
350
|
+
color: var(--muted);
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .race-data-number {
|
|
354
|
+
color: color-mix(in srgb, var(--text) 14%, transparent);
|
|
355
|
+
-webkit-text-stroke-color: color-mix(in srgb, var(--text) 42%, transparent);
|
|
356
|
+
}
|
|
357
|
+
|
|
358
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .race-data-dismiss {
|
|
359
|
+
background: color-mix(in srgb, var(--surface-raised) 82%, transparent);
|
|
360
|
+
border-color: var(--line);
|
|
361
|
+
--race-data-dismiss-icon-color: var(--muted);
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .race-data-link {
|
|
365
|
+
color: var(--primary-text);
|
|
366
|
+
border-color: color-mix(in srgb, var(--driver-color, var(--red)) 72%, var(--surface-raised));
|
|
367
|
+
}
|
|
368
|
+
|
|
369
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .telemetry-sector-banner {
|
|
370
|
+
background:
|
|
371
|
+
linear-gradient(110deg, color-mix(in srgb, var(--surface-panel) 98%, var(--surface)), color-mix(in srgb, var(--surface-raised) 88%, var(--surface-panel))),
|
|
372
|
+
repeating-linear-gradient(90deg, color-mix(in srgb, var(--text) 5%, transparent) 0 1px, transparent 1px 58px);
|
|
373
|
+
box-shadow: 0 16px 36px rgba(17, 24, 39, 0.14), inset 0 1px color-mix(in srgb, var(--text) 8%, transparent);
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .telemetry-sector-banner__copy em {
|
|
377
|
+
color: var(--muted);
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .telemetry-lap-table,
|
|
381
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .telemetry-sector-table {
|
|
382
|
+
background: color-mix(in srgb, var(--text) 6%, transparent);
|
|
383
|
+
}
|
|
384
|
+
|
|
385
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .telemetry-lap-table tr,
|
|
386
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .telemetry-sector-table tr {
|
|
387
|
+
border-bottom-color: color-mix(in srgb, var(--text) 8%, transparent);
|
|
388
|
+
}
|
|
389
|
+
|
|
390
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .telemetry-sector-bar {
|
|
391
|
+
color: var(--text);
|
|
392
|
+
background:
|
|
393
|
+
linear-gradient(90deg, color-mix(in srgb, var(--sector-status-color) 42%, transparent) var(--sector-fill, 0%), color-mix(in srgb, var(--text) 4%, transparent) 0),
|
|
394
|
+
color-mix(in srgb, var(--surface-panel) 94%, var(--sector-status-color) 6%);
|
|
395
|
+
border-color: var(--line);
|
|
396
|
+
box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--text) 5%, transparent);
|
|
397
|
+
}
|
|
398
|
+
|
|
399
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .telemetry-sector-bar.is-active {
|
|
400
|
+
border-color: var(--green);
|
|
401
|
+
box-shadow:
|
|
402
|
+
inset 0 -2px 0 var(--green),
|
|
403
|
+
0 0 24px color-mix(in srgb, var(--green) 16%, transparent);
|
|
404
|
+
}
|
|
405
|
+
|
|
406
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .telemetry-sector-bar.is-overall-best,
|
|
407
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .telemetry-sector-table td.is-overall-best {
|
|
408
|
+
color: var(--text);
|
|
409
|
+
}
|
|
410
|
+
|
|
411
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .telemetry-sector-bar.is-personal-best,
|
|
412
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .telemetry-sector-table td.is-personal-best {
|
|
413
|
+
color: var(--text);
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .telemetry-sector-bar.is-slower,
|
|
417
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .telemetry-sector-table td.is-slower {
|
|
418
|
+
color: color-mix(in srgb, var(--yellow) 74%, var(--text));
|
|
419
|
+
}
|
|
420
|
+
|
|
421
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .car-overview-toggle button.is-active,
|
|
422
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .car-overview-toggle button[aria-pressed='true'] {
|
|
423
|
+
color: var(--primary-text);
|
|
424
|
+
background: color-mix(in srgb, var(--driver-color, var(--red)) 76%, var(--surface-raised));
|
|
425
|
+
border-color: color-mix(in srgb, var(--driver-color, var(--red)) 72%, var(--line));
|
|
426
|
+
}
|
|
427
|
+
|
|
428
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .car-overview-diagram {
|
|
429
|
+
background:
|
|
430
|
+
radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--driver-color, var(--red)) 16%, transparent) 0 18%, transparent 42%),
|
|
431
|
+
linear-gradient(135deg, color-mix(in srgb, var(--surface-raised) 90%, transparent), color-mix(in srgb, var(--surface-panel) 70%, transparent));
|
|
432
|
+
border-color: var(--line);
|
|
433
|
+
}
|
|
434
|
+
|
|
435
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .car-overview-cell {
|
|
436
|
+
background: color-mix(in srgb, var(--surface-panel) 92%, transparent);
|
|
437
|
+
border-color: var(--line);
|
|
438
|
+
}
|
|
439
|
+
|
|
440
|
+
.f1-sim-component[data-paddock-theme-mode='light'] .car-overview-cell strong {
|
|
441
|
+
color: var(--text);
|
|
442
|
+
}
|
|
443
|
+
|
|
32
444
|
.f1-sim-component,
|
|
33
445
|
.f1-sim-component * {
|
|
34
446
|
box-sizing: border-box;
|
|
@@ -41,22 +453,40 @@
|
|
|
41
453
|
.f1-sim-component button,
|
|
42
454
|
.f1-sim-component a {
|
|
43
455
|
font: inherit;
|
|
456
|
+
touch-action: manipulation;
|
|
457
|
+
-webkit-tap-highlight-color: transparent;
|
|
44
458
|
}
|
|
45
459
|
|
|
46
|
-
.sim-
|
|
460
|
+
.f1-sim-component button:focus-visible,
|
|
461
|
+
.f1-sim-component a:focus-visible,
|
|
462
|
+
.f1-sim-component [tabindex]:focus-visible {
|
|
463
|
+
outline: 3px solid color-mix(in srgb, var(--paddock-color-info, var(--blue)) 78%, #ffffff);
|
|
464
|
+
outline-offset: 3px;
|
|
465
|
+
}
|
|
466
|
+
|
|
467
|
+
.f1-sim-component [data-paddock-component],
|
|
468
|
+
.f1-sim-component [data-f1-simulator-shell] {
|
|
469
|
+
min-inline-size: 0;
|
|
470
|
+
}
|
|
471
|
+
|
|
472
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-shell {
|
|
47
473
|
min-height: 100svh;
|
|
48
|
-
padding:
|
|
474
|
+
padding:
|
|
475
|
+
max(clamp(0.85rem, 2vw, 1.4rem), var(--paddock-safe-area-top))
|
|
476
|
+
max(clamp(0.85rem, 2vw, 1.4rem), var(--paddock-safe-area-right))
|
|
477
|
+
max(clamp(0.85rem, 2vw, 1.4rem), var(--paddock-safe-area-bottom))
|
|
478
|
+
max(clamp(0.85rem, 2vw, 1.4rem), var(--paddock-safe-area-left));
|
|
49
479
|
background: #000;
|
|
50
480
|
}
|
|
51
481
|
|
|
52
|
-
.sim-workspace {
|
|
482
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-workspace {
|
|
53
483
|
min-height: calc(100svh - clamp(1.7rem, 4vw, 2.8rem));
|
|
54
484
|
display: flex;
|
|
55
485
|
flex-direction: column;
|
|
56
486
|
gap: 0.9rem;
|
|
57
487
|
}
|
|
58
488
|
|
|
59
|
-
.sim-topbar {
|
|
489
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-topbar {
|
|
60
490
|
position: relative;
|
|
61
491
|
display: grid;
|
|
62
492
|
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
@@ -67,9 +497,10 @@
|
|
|
67
497
|
box-shadow: 0 18px 34px rgba(0, 0, 0, 0.24);
|
|
68
498
|
}
|
|
69
499
|
|
|
70
|
-
.sim-backlink,
|
|
71
|
-
.sim-control {
|
|
72
|
-
min-
|
|
500
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-backlink,
|
|
501
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-control {
|
|
502
|
+
min-height: 44px;
|
|
503
|
+
min-width: 44px;
|
|
73
504
|
overflow: hidden;
|
|
74
505
|
border: 1px solid var(--line-strong);
|
|
75
506
|
color: var(--text);
|
|
@@ -85,30 +516,30 @@
|
|
|
85
516
|
cursor: pointer;
|
|
86
517
|
}
|
|
87
518
|
|
|
88
|
-
.sim-backlink:hover,
|
|
89
|
-
.sim-control:hover {
|
|
519
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-backlink:hover,
|
|
520
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-control:hover {
|
|
90
521
|
border-color: var(--text);
|
|
91
522
|
background: rgba(255, 255, 255, 0.1);
|
|
92
523
|
}
|
|
93
524
|
|
|
94
|
-
.sim-control--safety.is-active {
|
|
525
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-control--safety.is-active {
|
|
95
526
|
color: #0a0b0d;
|
|
96
527
|
background: var(--yellow);
|
|
97
528
|
border-color: var(--yellow);
|
|
98
529
|
}
|
|
99
530
|
|
|
100
|
-
.camera-controls button.is-active,
|
|
101
|
-
.camera-controls button[aria-pressed='true'] {
|
|
531
|
+
:where(.f1-sim-component, .f1-sim-component *).camera-controls button.is-active,
|
|
532
|
+
:where(.f1-sim-component, .f1-sim-component *).camera-controls button[aria-pressed='true'] {
|
|
102
533
|
color: #08090b;
|
|
103
534
|
background: var(--text);
|
|
104
535
|
border-color: var(--text);
|
|
105
536
|
}
|
|
106
537
|
|
|
107
|
-
.sim-title-block {
|
|
538
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-title-block {
|
|
108
539
|
min-width: 0;
|
|
109
540
|
}
|
|
110
541
|
|
|
111
|
-
.sim-kicker {
|
|
542
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-kicker {
|
|
112
543
|
margin: 0 0 0.2rem;
|
|
113
544
|
color: var(--red);
|
|
114
545
|
font-family: var(--font-mono);
|
|
@@ -126,19 +557,46 @@
|
|
|
126
557
|
letter-spacing: 0;
|
|
127
558
|
}
|
|
128
559
|
|
|
129
|
-
.sim-controls {
|
|
560
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-controls {
|
|
130
561
|
min-width: 0;
|
|
131
562
|
display: flex;
|
|
132
563
|
gap: 0.6rem;
|
|
133
564
|
justify-content: flex-end;
|
|
134
565
|
}
|
|
135
566
|
|
|
136
|
-
|
|
567
|
+
@container (max-width: 860px) {
|
|
568
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-topbar {
|
|
569
|
+
grid-template-columns: minmax(0, 1fr);
|
|
570
|
+
align-items: stretch;
|
|
571
|
+
}
|
|
572
|
+
|
|
573
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-controls,
|
|
574
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-backlink {
|
|
575
|
+
justify-content: stretch;
|
|
576
|
+
}
|
|
577
|
+
|
|
578
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-controls {
|
|
579
|
+
display: grid;
|
|
580
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
581
|
+
}
|
|
582
|
+
|
|
583
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-topbar h1 {
|
|
584
|
+
line-height: 0.92;
|
|
585
|
+
min-height: 1.08em;
|
|
586
|
+
}
|
|
587
|
+
|
|
588
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-control,
|
|
589
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-backlink {
|
|
590
|
+
text-align: center;
|
|
591
|
+
}
|
|
592
|
+
}
|
|
593
|
+
|
|
594
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-external-camera-controls {
|
|
137
595
|
display: flex;
|
|
138
596
|
justify-content: flex-start;
|
|
139
597
|
}
|
|
140
598
|
|
|
141
|
-
.sim-grid {
|
|
599
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-grid {
|
|
142
600
|
flex: 1;
|
|
143
601
|
min-height: 0;
|
|
144
602
|
position: relative;
|
|
@@ -147,8 +605,8 @@
|
|
|
147
605
|
gap: 0.9rem;
|
|
148
606
|
}
|
|
149
607
|
|
|
150
|
-
.sim-shell--left-tower-overlay .sim-grid,
|
|
151
|
-
.sim-shell--left-tower-overlay.sim-grid {
|
|
608
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .sim-grid,
|
|
609
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay.sim-grid {
|
|
152
610
|
--timing-board-width: max(255px, calc((100cqw - 1.8rem) * 0.78 / 4.68));
|
|
153
611
|
--race-data-safe-left: calc(2rem + var(--timing-board-width));
|
|
154
612
|
--race-data-right-gutter: 1rem;
|
|
@@ -158,11 +616,11 @@
|
|
|
158
616
|
grid-template-columns: minmax(620px, 1fr) minmax(270px, 0.9fr);
|
|
159
617
|
}
|
|
160
618
|
|
|
161
|
-
.sim-shell--left-tower-overlay .sim-canvas-panel {
|
|
619
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .sim-canvas-panel {
|
|
162
620
|
grid-column: 1;
|
|
163
621
|
}
|
|
164
622
|
|
|
165
|
-
.sim-canvas-panel--with-timing-tower {
|
|
623
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--with-timing-tower {
|
|
166
624
|
--timing-board-width: min(var(--timing-board-max-width), max(255px, calc((100cqw - 1.8rem) * 0.78 / 4.68)));
|
|
167
625
|
--race-data-safe-left: calc(2rem + var(--timing-board-width));
|
|
168
626
|
--race-data-right-gutter: 1rem;
|
|
@@ -170,15 +628,15 @@
|
|
|
170
628
|
container-type: inline-size;
|
|
171
629
|
}
|
|
172
630
|
|
|
173
|
-
.sim-shell--left-tower-overlay.sim-shell--timing-expand-race-view .sim-canvas-panel {
|
|
631
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay.sim-shell--timing-expand-race-view .sim-canvas-panel {
|
|
174
632
|
min-height: max(var(--paddock-race-view-min-height, 620px), var(--timing-board-min-height));
|
|
175
633
|
}
|
|
176
634
|
|
|
177
|
-
.sim-canvas-panel--with-timing-tower.sim-canvas-panel--timing-expand-race-view {
|
|
635
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--with-timing-tower.sim-canvas-panel--timing-expand-race-view {
|
|
178
636
|
min-height: max(var(--paddock-race-view-min-height, 620px), var(--timing-board-min-height));
|
|
179
637
|
}
|
|
180
638
|
|
|
181
|
-
.sim-shell--left-tower-overlay .sim-timing {
|
|
639
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .sim-timing {
|
|
182
640
|
position: absolute;
|
|
183
641
|
z-index: 5;
|
|
184
642
|
top: 1rem;
|
|
@@ -193,7 +651,7 @@
|
|
|
193
651
|
pointer-events: auto;
|
|
194
652
|
}
|
|
195
653
|
|
|
196
|
-
.sim-canvas-panel--with-timing-tower > .sim-timing {
|
|
654
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--with-timing-tower > .sim-timing {
|
|
197
655
|
position: absolute;
|
|
198
656
|
z-index: 5;
|
|
199
657
|
top: 1rem;
|
|
@@ -209,99 +667,155 @@
|
|
|
209
667
|
pointer-events: auto;
|
|
210
668
|
}
|
|
211
669
|
|
|
212
|
-
.sim-
|
|
670
|
+
:where(.f1-sim-component, .f1-sim-component *).timing-panel-toggle {
|
|
671
|
+
position: absolute;
|
|
672
|
+
z-index: 14;
|
|
673
|
+
top: 0.75rem;
|
|
674
|
+
left: 0.75rem;
|
|
675
|
+
display: none;
|
|
676
|
+
min-width: 44px;
|
|
677
|
+
min-height: 44px;
|
|
678
|
+
padding: 0.62rem 0.78rem;
|
|
679
|
+
color: var(--green);
|
|
680
|
+
background: rgba(8, 10, 16, 0.72);
|
|
681
|
+
border: 1px solid color-mix(in srgb, var(--green) 54%, rgba(255, 255, 255, 0.22));
|
|
682
|
+
font-family: var(--font-mono);
|
|
683
|
+
font-size: 0.66rem;
|
|
684
|
+
font-weight: 900;
|
|
685
|
+
letter-spacing: 0.1em;
|
|
686
|
+
text-transform: uppercase;
|
|
687
|
+
cursor: pointer;
|
|
688
|
+
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
|
|
689
|
+
}
|
|
690
|
+
|
|
691
|
+
:where(.f1-sim-component, .f1-sim-component *).timing-panel-toggle[aria-expanded='true'] {
|
|
692
|
+
color: transparent;
|
|
693
|
+
background: rgba(8, 10, 16, 0.82);
|
|
694
|
+
border-color: color-mix(in srgb, var(--green) 74%, rgba(255, 255, 255, 0.22));
|
|
695
|
+
}
|
|
696
|
+
|
|
697
|
+
:where(.f1-sim-component, .f1-sim-component *).timing-panel-toggle[aria-expanded='true'] {
|
|
698
|
+
width: 44px;
|
|
699
|
+
min-width: 44px;
|
|
700
|
+
padding: 0;
|
|
213
701
|
overflow: hidden;
|
|
702
|
+
color: transparent;
|
|
703
|
+
font-size: 0;
|
|
704
|
+
}
|
|
705
|
+
|
|
706
|
+
:where(.f1-sim-component, .f1-sim-component *).timing-panel-toggle[aria-expanded='true']::before,
|
|
707
|
+
:where(.f1-sim-component, .f1-sim-component *).timing-panel-toggle[aria-expanded='true']::after {
|
|
708
|
+
content: "";
|
|
709
|
+
position: absolute;
|
|
710
|
+
left: 50%;
|
|
711
|
+
top: 50%;
|
|
712
|
+
width: 0.58rem;
|
|
713
|
+
height: 0.11rem;
|
|
714
|
+
background: var(--green);
|
|
715
|
+
border-radius: 999px;
|
|
214
716
|
}
|
|
215
717
|
|
|
216
|
-
.sim-
|
|
718
|
+
:where(.f1-sim-component, .f1-sim-component *).timing-panel-toggle[aria-expanded='true']::before {
|
|
719
|
+
transform: translate(-50%, -50%) rotate(45deg);
|
|
720
|
+
}
|
|
721
|
+
|
|
722
|
+
:where(.f1-sim-component, .f1-sim-component *).timing-panel-toggle[aria-expanded='true']::after {
|
|
723
|
+
transform: translate(-50%, -50%) rotate(-45deg);
|
|
724
|
+
}
|
|
725
|
+
|
|
726
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay.sim-shell--timing-scroll .sim-timing {
|
|
727
|
+
overflow: hidden;
|
|
728
|
+
}
|
|
729
|
+
|
|
730
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--timing-scroll .sim-timing {
|
|
217
731
|
overflow: hidden;
|
|
218
732
|
}
|
|
219
733
|
|
|
220
|
-
.sim-shell--left-tower-overlay .sim-canvas-panel > .camera-controls {
|
|
734
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .sim-canvas-panel > .camera-controls {
|
|
221
735
|
left: calc(2rem + var(--timing-board-width));
|
|
222
736
|
max-width: calc(100% - (2rem + var(--timing-board-width)) - 1rem);
|
|
223
737
|
}
|
|
224
738
|
|
|
225
|
-
.sim-canvas-panel--with-timing-tower > .camera-controls {
|
|
739
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--with-timing-tower > .camera-controls {
|
|
226
740
|
left: calc(2rem + var(--timing-board-width));
|
|
227
741
|
max-width: calc(100% - (2rem + var(--timing-board-width)) - 1rem);
|
|
228
742
|
}
|
|
229
743
|
|
|
230
|
-
.sim-shell--left-tower-overlay .start-lights {
|
|
744
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .start-lights {
|
|
231
745
|
left: calc((2rem + var(--timing-board-width)) + (100% - (2rem + var(--timing-board-width))) / 2);
|
|
232
746
|
}
|
|
233
747
|
|
|
234
|
-
.sim-canvas-panel--with-timing-tower > .start-lights {
|
|
748
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--with-timing-tower > .start-lights {
|
|
235
749
|
left: calc((2rem + var(--timing-board-width)) + (100% - (2rem + var(--timing-board-width))) / 2);
|
|
236
750
|
}
|
|
237
751
|
|
|
238
|
-
.sim-shell--left-tower-overlay .race-data-panel {
|
|
752
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .race-data-panel {
|
|
239
753
|
z-index: 12;
|
|
240
754
|
grid-template-columns: clamp(4.6rem, 7.5cqw, 7rem) minmax(0, 1fr) auto;
|
|
241
755
|
}
|
|
242
756
|
|
|
243
|
-
.sim-canvas-panel--with-timing-tower .race-data-panel {
|
|
757
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--with-timing-tower .race-data-panel {
|
|
244
758
|
z-index: 12;
|
|
245
759
|
grid-template-columns: clamp(4.6rem, 7.5cqw, 7rem) minmax(0, 1fr) auto;
|
|
246
760
|
}
|
|
247
761
|
|
|
248
762
|
@container (min-width: 980px) {
|
|
249
|
-
.sim-shell--left-tower-overlay .race-data-panel--auto,
|
|
250
|
-
|
|
763
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .race-data-panel--auto,
|
|
764
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--with-timing-tower .race-data-panel--auto {
|
|
251
765
|
--race-data-banner-left: calc(var(--race-data-safe-left) + (var(--race-data-available-width) / 2));
|
|
252
766
|
--race-data-banner-width: min(860px, calc(var(--race-data-available-width) - 0.5rem));
|
|
253
767
|
--race-data-banner-translate-x: -50%;
|
|
254
768
|
}
|
|
255
769
|
}
|
|
256
770
|
|
|
257
|
-
.sim-shell--left-tower-overlay .race-data-copy {
|
|
771
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .race-data-copy {
|
|
258
772
|
padding-inline: 0.45rem 0.8rem;
|
|
259
773
|
}
|
|
260
774
|
|
|
261
|
-
.sim-canvas-panel--with-timing-tower .race-data-copy {
|
|
775
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--with-timing-tower .race-data-copy {
|
|
262
776
|
padding-inline: 0.45rem 0.8rem;
|
|
263
777
|
}
|
|
264
778
|
|
|
265
|
-
.sim-shell--left-tower-overlay .race-data-number {
|
|
779
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .race-data-number {
|
|
266
780
|
padding-inline: 0.45rem;
|
|
267
781
|
font-size: clamp(3.2rem, 6cqw, 5.3rem);
|
|
268
782
|
}
|
|
269
783
|
|
|
270
|
-
.sim-canvas-panel--with-timing-tower .race-data-number {
|
|
784
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--with-timing-tower .race-data-number {
|
|
271
785
|
padding-inline: 0.45rem;
|
|
272
786
|
font-size: clamp(3.2rem, 6cqw, 5.3rem);
|
|
273
787
|
}
|
|
274
788
|
|
|
275
|
-
.sim-shell--left-tower-overlay .race-data-link {
|
|
789
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .race-data-link {
|
|
276
790
|
min-width: clamp(104px, 10cqw, 140px);
|
|
277
791
|
margin-right: 0.55rem;
|
|
278
792
|
padding-inline: 0.75rem;
|
|
279
793
|
font-size: 0.64rem;
|
|
280
794
|
}
|
|
281
795
|
|
|
282
|
-
.sim-canvas-panel--with-timing-tower .race-data-link {
|
|
796
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--with-timing-tower .race-data-link {
|
|
283
797
|
min-width: clamp(104px, 10cqw, 140px);
|
|
284
798
|
margin-right: 0.55rem;
|
|
285
799
|
padding-inline: 0.75rem;
|
|
286
800
|
font-size: 0.64rem;
|
|
287
801
|
}
|
|
288
802
|
|
|
289
|
-
.sim-timing,
|
|
290
|
-
.sim-telemetry,
|
|
291
|
-
.sim-canvas-panel {
|
|
803
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-timing,
|
|
804
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-telemetry,
|
|
805
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel {
|
|
292
806
|
min-height: 0;
|
|
293
807
|
background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
|
|
294
808
|
border: 1px solid var(--line);
|
|
295
809
|
}
|
|
296
810
|
|
|
297
|
-
.sim-timing,
|
|
298
|
-
.sim-telemetry {
|
|
811
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-timing,
|
|
812
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-telemetry {
|
|
299
813
|
position: relative;
|
|
300
814
|
padding: 0.9rem;
|
|
301
815
|
overflow: hidden;
|
|
302
816
|
}
|
|
303
817
|
|
|
304
|
-
.telemetry-stack {
|
|
818
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-stack {
|
|
305
819
|
display: grid;
|
|
306
820
|
grid-auto-rows: max-content;
|
|
307
821
|
align-content: start;
|
|
@@ -312,15 +826,15 @@
|
|
|
312
826
|
scrollbar-width: thin;
|
|
313
827
|
}
|
|
314
828
|
|
|
315
|
-
.telemetry-stack > .sim-telemetry {
|
|
829
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-stack > .sim-telemetry {
|
|
316
830
|
min-height: auto;
|
|
317
831
|
}
|
|
318
832
|
|
|
319
|
-
.telemetry-component {
|
|
833
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-component {
|
|
320
834
|
width: 100%;
|
|
321
835
|
}
|
|
322
836
|
|
|
323
|
-
.sim-timing.broadcast-tower {
|
|
837
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-timing.broadcast-tower {
|
|
324
838
|
position: relative;
|
|
325
839
|
width: min(100%, var(--timing-board-max-width));
|
|
326
840
|
max-width: var(--timing-board-max-width);
|
|
@@ -328,18 +842,19 @@
|
|
|
328
842
|
padding: 0;
|
|
329
843
|
background: transparent;
|
|
330
844
|
border: 0;
|
|
845
|
+
container-type: inline-size;
|
|
331
846
|
overflow: hidden;
|
|
332
847
|
}
|
|
333
848
|
|
|
334
|
-
.sim-shell--left-tower-overlay .sim-timing.broadcast-tower,
|
|
335
|
-
.sim-canvas-panel--with-timing-tower > .sim-timing.broadcast-tower {
|
|
849
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .sim-timing.broadcast-tower,
|
|
850
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--with-timing-tower > .sim-timing.broadcast-tower {
|
|
336
851
|
position: absolute;
|
|
337
852
|
width: var(--timing-board-width);
|
|
338
853
|
max-width: var(--timing-board-width);
|
|
339
854
|
height: auto;
|
|
340
855
|
}
|
|
341
856
|
|
|
342
|
-
.broadcast-tower-frame {
|
|
857
|
+
:where(.f1-sim-component, .f1-sim-component *).broadcast-tower-frame {
|
|
343
858
|
position: relative;
|
|
344
859
|
height: 100%;
|
|
345
860
|
min-height: 0;
|
|
@@ -358,7 +873,7 @@
|
|
|
358
873
|
0 24px 70px rgba(0, 0, 0, 0.42);
|
|
359
874
|
}
|
|
360
875
|
|
|
361
|
-
.broadcast-tower-frame::before {
|
|
876
|
+
:where(.f1-sim-component, .f1-sim-component *).broadcast-tower-frame::before {
|
|
362
877
|
content: '';
|
|
363
878
|
position: absolute;
|
|
364
879
|
inset: 0;
|
|
@@ -370,16 +885,16 @@
|
|
|
370
885
|
opacity: 0.7;
|
|
371
886
|
}
|
|
372
887
|
|
|
373
|
-
.broadcast-brand,
|
|
374
|
-
.broadcast-lap,
|
|
375
|
-
.broadcast-race-control-banner,
|
|
376
|
-
.broadcast-column-head,
|
|
377
|
-
.timing-list {
|
|
888
|
+
:where(.f1-sim-component, .f1-sim-component *).broadcast-brand,
|
|
889
|
+
:where(.f1-sim-component, .f1-sim-component *).broadcast-lap,
|
|
890
|
+
:where(.f1-sim-component, .f1-sim-component *).broadcast-race-control-banner,
|
|
891
|
+
:where(.f1-sim-component, .f1-sim-component *).broadcast-column-head,
|
|
892
|
+
:where(.f1-sim-component, .f1-sim-component *).timing-list {
|
|
378
893
|
position: relative;
|
|
379
894
|
z-index: 1;
|
|
380
895
|
}
|
|
381
896
|
|
|
382
|
-
.broadcast-brand {
|
|
897
|
+
:where(.f1-sim-component, .f1-sim-component *).broadcast-brand {
|
|
383
898
|
display: flex;
|
|
384
899
|
align-items: center;
|
|
385
900
|
justify-content: center;
|
|
@@ -389,7 +904,7 @@
|
|
|
389
904
|
text-transform: uppercase;
|
|
390
905
|
}
|
|
391
906
|
|
|
392
|
-
.broadcast-f1-logo {
|
|
907
|
+
:where(.f1-sim-component, .f1-sim-component *).broadcast-f1-logo {
|
|
393
908
|
display: block;
|
|
394
909
|
width: 6.9rem;
|
|
395
910
|
max-width: 74%;
|
|
@@ -397,7 +912,7 @@
|
|
|
397
912
|
object-fit: contain;
|
|
398
913
|
}
|
|
399
914
|
|
|
400
|
-
.broadcast-lap {
|
|
915
|
+
:where(.f1-sim-component, .f1-sim-component *).broadcast-lap {
|
|
401
916
|
display: flex;
|
|
402
917
|
align-items: baseline;
|
|
403
918
|
justify-content: center;
|
|
@@ -414,14 +929,14 @@
|
|
|
414
929
|
text-transform: uppercase;
|
|
415
930
|
}
|
|
416
931
|
|
|
417
|
-
.broadcast-lap strong {
|
|
932
|
+
:where(.f1-sim-component, .f1-sim-component *).broadcast-lap strong {
|
|
418
933
|
color: #fff;
|
|
419
934
|
font-size: 1.62rem;
|
|
420
935
|
font-weight: 900;
|
|
421
936
|
letter-spacing: -0.04em;
|
|
422
937
|
}
|
|
423
938
|
|
|
424
|
-
.broadcast-race-control-banner {
|
|
939
|
+
:where(.f1-sim-component, .f1-sim-component *).broadcast-race-control-banner {
|
|
425
940
|
display: grid;
|
|
426
941
|
grid-template-columns: 3.4rem minmax(0, 1fr);
|
|
427
942
|
align-items: center;
|
|
@@ -431,21 +946,21 @@
|
|
|
431
946
|
text-transform: uppercase;
|
|
432
947
|
}
|
|
433
948
|
|
|
434
|
-
.broadcast-race-control-banner.is-safety-car {
|
|
949
|
+
:where(.f1-sim-component, .f1-sim-component *).broadcast-race-control-banner.is-safety-car {
|
|
435
950
|
background: #e0ce00;
|
|
436
951
|
color: #0a0b0d;
|
|
437
952
|
}
|
|
438
953
|
|
|
439
|
-
.broadcast-race-control-banner.is-red-flag {
|
|
954
|
+
:where(.f1-sim-component, .f1-sim-component *).broadcast-race-control-banner.is-red-flag {
|
|
440
955
|
background: var(--race-control-red);
|
|
441
956
|
color: #fff;
|
|
442
957
|
}
|
|
443
958
|
|
|
444
|
-
.broadcast-race-control-banner[hidden] {
|
|
959
|
+
:where(.f1-sim-component, .f1-sim-component *).broadcast-race-control-banner[hidden] {
|
|
445
960
|
display: none;
|
|
446
961
|
}
|
|
447
962
|
|
|
448
|
-
.broadcast-race-control-banner span {
|
|
963
|
+
:where(.f1-sim-component, .f1-sim-component *).broadcast-race-control-banner span {
|
|
449
964
|
display: grid;
|
|
450
965
|
place-items: center;
|
|
451
966
|
min-height: 2.65rem;
|
|
@@ -456,96 +971,146 @@
|
|
|
456
971
|
letter-spacing: -0.06em;
|
|
457
972
|
}
|
|
458
973
|
|
|
459
|
-
.broadcast-race-control-banner strong {
|
|
974
|
+
:where(.f1-sim-component, .f1-sim-component *).broadcast-race-control-banner strong {
|
|
460
975
|
padding: 0 0.65rem;
|
|
461
976
|
font-size: 1.1rem;
|
|
462
977
|
font-weight: 900;
|
|
463
978
|
line-height: 0.9;
|
|
464
979
|
}
|
|
465
980
|
|
|
466
|
-
.broadcast-gap-mode {
|
|
981
|
+
:where(.f1-sim-component, .f1-sim-component *).broadcast-gap-mode-toggle {
|
|
982
|
+
position: relative;
|
|
983
|
+
isolation: isolate;
|
|
984
|
+
justify-self: end;
|
|
467
985
|
display: grid;
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
min-height: 1.75rem;
|
|
986
|
+
place-items: center;
|
|
987
|
+
width: 44px;
|
|
988
|
+
min-width: 44px;
|
|
989
|
+
height: 44px;
|
|
990
|
+
min-height: 44px;
|
|
991
|
+
margin: 0;
|
|
992
|
+
padding: 0;
|
|
476
993
|
color: rgba(244, 247, 251, 0.58);
|
|
477
|
-
background:
|
|
478
|
-
border:
|
|
994
|
+
background: transparent;
|
|
995
|
+
border: 0;
|
|
479
996
|
font-family: var(--font-mono);
|
|
480
|
-
font-size: 0.
|
|
997
|
+
font-size: 0.52rem;
|
|
481
998
|
font-weight: 900;
|
|
482
999
|
letter-spacing: 0.08em;
|
|
483
1000
|
text-transform: uppercase;
|
|
484
1001
|
cursor: pointer;
|
|
485
1002
|
}
|
|
486
1003
|
|
|
487
|
-
.broadcast-gap-mode
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
1004
|
+
:where(.f1-sim-component, .f1-sim-component *).broadcast-gap-mode-toggle::before {
|
|
1005
|
+
content: '';
|
|
1006
|
+
position: absolute;
|
|
1007
|
+
inset: 11px 4px;
|
|
1008
|
+
z-index: -1;
|
|
1009
|
+
background: rgba(255, 255, 255, 0.055);
|
|
1010
|
+
border: 1px solid rgba(255, 255, 255, 0.14);
|
|
1011
|
+
border-radius: 0.22rem;
|
|
1012
|
+
transition:
|
|
1013
|
+
background 160ms ease,
|
|
1014
|
+
border-color 160ms ease,
|
|
1015
|
+
box-shadow 160ms ease,
|
|
1016
|
+
transform 160ms ease;
|
|
1017
|
+
}
|
|
1018
|
+
|
|
1019
|
+
:where(.f1-sim-component, .f1-sim-component *).broadcast-gap-mode-toggle.is-active,
|
|
1020
|
+
:where(.f1-sim-component, .f1-sim-component *).broadcast-gap-mode-toggle[aria-pressed='true'] {
|
|
1021
|
+
color: #f5f6f8;
|
|
1022
|
+
}
|
|
1023
|
+
|
|
1024
|
+
:where(.f1-sim-component, .f1-sim-component *).broadcast-gap-mode-toggle.is-active::before,
|
|
1025
|
+
:where(.f1-sim-component, .f1-sim-component *).broadcast-gap-mode-toggle[aria-pressed='true']::before {
|
|
1026
|
+
background: rgba(255, 255, 255, 0.12);
|
|
1027
|
+
border-color: rgba(255, 255, 255, 0.24);
|
|
1028
|
+
box-shadow: inset 0 0 0 1px rgba(244, 247, 251, 0.05);
|
|
1029
|
+
}
|
|
1030
|
+
|
|
1031
|
+
:where(.f1-sim-component, .f1-sim-component *).broadcast-gap-mode-toggle:hover::before {
|
|
1032
|
+
background: rgba(255, 255, 255, 0.1);
|
|
1033
|
+
border-color: rgba(255, 255, 255, 0.24);
|
|
1034
|
+
}
|
|
1035
|
+
|
|
1036
|
+
:where(.f1-sim-component, .f1-sim-component *).broadcast-gap-mode-toggle:active::before {
|
|
1037
|
+
transform: scale(0.96);
|
|
1038
|
+
}
|
|
1039
|
+
|
|
1040
|
+
.f1-sim-component .broadcast-gap-mode-toggle:focus-visible {
|
|
1041
|
+
outline: 0;
|
|
1042
|
+
}
|
|
1043
|
+
|
|
1044
|
+
.f1-sim-component .broadcast-gap-mode-toggle:focus-visible::before {
|
|
1045
|
+
outline: 2px solid var(--blue);
|
|
1046
|
+
outline-offset: 1px;
|
|
492
1047
|
}
|
|
493
1048
|
|
|
494
|
-
.broadcast-column-head {
|
|
1049
|
+
:where(.f1-sim-component, .f1-sim-component *).broadcast-column-head {
|
|
495
1050
|
display: grid;
|
|
496
1051
|
grid-template-columns: var(--timing-columns);
|
|
1052
|
+
align-items: center;
|
|
497
1053
|
gap: 0;
|
|
498
|
-
|
|
1054
|
+
min-height: 44px;
|
|
1055
|
+
padding: 0;
|
|
499
1056
|
color: rgba(244, 247, 251, 0.44);
|
|
500
1057
|
font-family: var(--font-mono);
|
|
501
1058
|
font-size: 0.52rem;
|
|
502
1059
|
font-weight: 800;
|
|
1060
|
+
line-height: 1;
|
|
503
1061
|
letter-spacing: 0.09em;
|
|
504
1062
|
text-transform: uppercase;
|
|
505
1063
|
}
|
|
506
1064
|
|
|
507
|
-
.broadcast-column-head span:nth-child(1),
|
|
508
|
-
.broadcast-column-head span:nth-child(2),
|
|
509
|
-
.broadcast-column-head span:nth-child(5) {
|
|
1065
|
+
:where(.f1-sim-component, .f1-sim-component *).broadcast-column-head span:nth-child(1),
|
|
1066
|
+
:where(.f1-sim-component, .f1-sim-component *).broadcast-column-head span:nth-child(2),
|
|
1067
|
+
:where(.f1-sim-component, .f1-sim-component *).broadcast-column-head span:nth-child(5) {
|
|
510
1068
|
text-align: center;
|
|
511
1069
|
}
|
|
512
1070
|
|
|
513
|
-
.broadcast-column-head span:nth-child(1),
|
|
514
|
-
.timing-position {
|
|
1071
|
+
:where(.f1-sim-component, .f1-sim-component *).broadcast-column-head span:nth-child(1),
|
|
1072
|
+
:where(.f1-sim-component, .f1-sim-component *).timing-position {
|
|
515
1073
|
grid-column: 1;
|
|
516
1074
|
}
|
|
517
1075
|
|
|
518
|
-
.broadcast-column-head span:nth-child(2),
|
|
519
|
-
.timing-icon {
|
|
1076
|
+
:where(.f1-sim-component, .f1-sim-component *).broadcast-column-head span:nth-child(2),
|
|
1077
|
+
:where(.f1-sim-component, .f1-sim-component *).timing-icon {
|
|
520
1078
|
grid-column: 2;
|
|
521
1079
|
}
|
|
522
1080
|
|
|
523
|
-
.broadcast-column-head span:nth-child(3),
|
|
524
|
-
.timing-name {
|
|
1081
|
+
:where(.f1-sim-component, .f1-sim-component *).broadcast-column-head span:nth-child(3),
|
|
1082
|
+
:where(.f1-sim-component, .f1-sim-component *).timing-name {
|
|
525
1083
|
grid-column: 3;
|
|
526
1084
|
}
|
|
527
1085
|
|
|
528
|
-
.broadcast-column-head span:nth-child(4),
|
|
529
|
-
.
|
|
1086
|
+
:where(.f1-sim-component, .f1-sim-component *).broadcast-column-head span:nth-child(4),
|
|
1087
|
+
:where(.f1-sim-component, .f1-sim-component *).broadcast-gap-mode-toggle,
|
|
1088
|
+
:where(.f1-sim-component, .f1-sim-component *).timing-gap {
|
|
530
1089
|
grid-column: 4;
|
|
531
1090
|
}
|
|
532
1091
|
|
|
533
|
-
.broadcast-column-head span:nth-child(5),
|
|
534
|
-
.timing-tire {
|
|
1092
|
+
:where(.f1-sim-component, .f1-sim-component *).broadcast-column-head span:nth-child(5),
|
|
1093
|
+
:where(.f1-sim-component, .f1-sim-component *).timing-tire {
|
|
535
1094
|
grid-column: 5;
|
|
536
1095
|
}
|
|
537
1096
|
|
|
538
|
-
.broadcast-column-head span:nth-child(3) {
|
|
1097
|
+
:where(.f1-sim-component, .f1-sim-component *).broadcast-column-head span:nth-child(3) {
|
|
539
1098
|
padding-inline: 0.45rem;
|
|
540
1099
|
}
|
|
541
1100
|
|
|
542
|
-
.broadcast-column-head span:nth-child(4)
|
|
1101
|
+
:where(.f1-sim-component, .f1-sim-component *).broadcast-column-head span:nth-child(4),
|
|
1102
|
+
:where(.f1-sim-component, .f1-sim-component *).broadcast-gap-mode-toggle {
|
|
543
1103
|
padding-right: 0.25rem;
|
|
544
1104
|
text-align: right;
|
|
545
1105
|
}
|
|
546
1106
|
|
|
547
|
-
.
|
|
548
|
-
|
|
1107
|
+
:where(.f1-sim-component, .f1-sim-component *).broadcast-gap-mode-toggle {
|
|
1108
|
+
padding-right: 0;
|
|
1109
|
+
text-align: center;
|
|
1110
|
+
}
|
|
1111
|
+
|
|
1112
|
+
:where(.f1-sim-component, .f1-sim-component *).timing-header,
|
|
1113
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-header {
|
|
549
1114
|
display: flex;
|
|
550
1115
|
align-items: center;
|
|
551
1116
|
justify-content: space-between;
|
|
@@ -555,27 +1120,27 @@
|
|
|
555
1120
|
text-transform: uppercase;
|
|
556
1121
|
}
|
|
557
1122
|
|
|
558
|
-
.timing-header span,
|
|
559
|
-
.telemetry-header span {
|
|
1123
|
+
:where(.f1-sim-component, .f1-sim-component *).timing-header span,
|
|
1124
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-header span {
|
|
560
1125
|
color: var(--muted);
|
|
561
1126
|
font-family: var(--font-mono);
|
|
562
1127
|
font-size: 0.72rem;
|
|
563
1128
|
letter-spacing: 0.12em;
|
|
564
1129
|
}
|
|
565
1130
|
|
|
566
|
-
.timing-header strong {
|
|
1131
|
+
:where(.f1-sim-component, .f1-sim-component *).timing-header strong {
|
|
567
1132
|
color: var(--green);
|
|
568
1133
|
font-family: var(--font-mono);
|
|
569
1134
|
font-size: 0.74rem;
|
|
570
1135
|
}
|
|
571
1136
|
|
|
572
|
-
.timing-list {
|
|
1137
|
+
:where(.f1-sim-component, .f1-sim-component *).timing-list {
|
|
573
1138
|
flex: 1 1 auto;
|
|
574
1139
|
list-style: none;
|
|
575
1140
|
padding: 0;
|
|
576
1141
|
margin: 0;
|
|
577
1142
|
display: grid;
|
|
578
|
-
grid-auto-rows:
|
|
1143
|
+
grid-auto-rows: max-content;
|
|
579
1144
|
align-content: start;
|
|
580
1145
|
justify-content: stretch;
|
|
581
1146
|
gap: 1px;
|
|
@@ -584,39 +1149,79 @@
|
|
|
584
1149
|
scrollbar-width: thin;
|
|
585
1150
|
}
|
|
586
1151
|
|
|
587
|
-
.timing-list > li {
|
|
1152
|
+
:where(.f1-sim-component, .f1-sim-component *).timing-list > li {
|
|
588
1153
|
min-width: 0;
|
|
589
1154
|
overflow: hidden;
|
|
590
1155
|
}
|
|
591
1156
|
|
|
592
|
-
.sim-shell--left-tower-overlay .timing-list {
|
|
1157
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .timing-list {
|
|
593
1158
|
overflow-x: hidden;
|
|
594
1159
|
overflow-y: auto;
|
|
595
1160
|
}
|
|
596
1161
|
|
|
597
|
-
.sim-shell--left-tower-overlay .broadcast-column-head,
|
|
598
|
-
.sim-shell--left-tower-overlay .timing-row {
|
|
599
|
-
grid-template-columns: 1.7rem 1.8rem minmax(0, 1fr) minmax(
|
|
1162
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .broadcast-column-head,
|
|
1163
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .timing-row {
|
|
1164
|
+
grid-template-columns: 1.7rem 1.8rem minmax(0, 1fr) minmax(44px, 3.45rem) 1.25rem;
|
|
600
1165
|
}
|
|
601
1166
|
|
|
602
|
-
.sim-shell--left-tower-overlay .broadcast-column-head {
|
|
1167
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .broadcast-column-head {
|
|
603
1168
|
overflow: hidden;
|
|
604
1169
|
}
|
|
605
1170
|
|
|
606
|
-
.sim-shell--left-tower-overlay .broadcast-column-head span {
|
|
1171
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .broadcast-column-head span {
|
|
607
1172
|
min-width: 0;
|
|
608
1173
|
overflow: hidden;
|
|
609
1174
|
text-overflow: ellipsis;
|
|
610
1175
|
}
|
|
611
1176
|
|
|
612
|
-
|
|
1177
|
+
@container (max-width: 255px) {
|
|
1178
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-timing.broadcast-tower .broadcast-column-head,
|
|
1179
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-timing.broadcast-tower .timing-row {
|
|
1180
|
+
grid-template-columns: 1.45rem 1.55rem minmax(2.25rem, 1fr) minmax(2.75rem, 3rem) minmax(0.9rem, 1rem);
|
|
1181
|
+
}
|
|
1182
|
+
|
|
1183
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-timing.broadcast-tower .broadcast-column-head {
|
|
1184
|
+
font-size: 0.48rem;
|
|
1185
|
+
letter-spacing: 0.06em;
|
|
1186
|
+
}
|
|
1187
|
+
|
|
1188
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-timing.broadcast-tower .broadcast-column-head span:nth-child(3),
|
|
1189
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-timing.broadcast-tower .timing-name {
|
|
1190
|
+
padding-inline: 0.28rem;
|
|
1191
|
+
}
|
|
1192
|
+
|
|
1193
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-timing.broadcast-tower .broadcast-column-head span:nth-child(4),
|
|
1194
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-timing.broadcast-tower .broadcast-gap-mode-toggle,
|
|
1195
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-timing.broadcast-tower .timing-gap {
|
|
1196
|
+
padding-right: 0.1rem;
|
|
1197
|
+
}
|
|
1198
|
+
|
|
1199
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-timing.broadcast-tower .timing-position {
|
|
1200
|
+
font-size: 0.72rem;
|
|
1201
|
+
}
|
|
1202
|
+
|
|
1203
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-timing.broadcast-tower .timing-name {
|
|
1204
|
+
gap: 0.16rem;
|
|
1205
|
+
font-size: 0.7rem;
|
|
1206
|
+
}
|
|
1207
|
+
|
|
1208
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-timing.broadcast-tower .timing-gap {
|
|
1209
|
+
font-size: 0.62rem;
|
|
1210
|
+
}
|
|
1211
|
+
|
|
1212
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-timing.broadcast-tower .timing-tire {
|
|
1213
|
+
font-size: 0.68rem;
|
|
1214
|
+
}
|
|
1215
|
+
}
|
|
1216
|
+
|
|
1217
|
+
:where(.f1-sim-component, .f1-sim-component *).timing-row {
|
|
613
1218
|
display: grid;
|
|
614
1219
|
grid-template-columns: var(--timing-columns);
|
|
615
1220
|
gap: 0;
|
|
616
1221
|
align-items: center;
|
|
617
1222
|
width: 100%;
|
|
618
|
-
min-height:
|
|
619
|
-
padding: 0;
|
|
1223
|
+
min-height: var(--timing-entry-row-min-height);
|
|
1224
|
+
padding: var(--timing-entry-extra-block-padding) 0;
|
|
620
1225
|
border: 0;
|
|
621
1226
|
color: var(--text);
|
|
622
1227
|
background:
|
|
@@ -625,26 +1230,26 @@
|
|
|
625
1230
|
cursor: pointer;
|
|
626
1231
|
}
|
|
627
1232
|
|
|
628
|
-
.broadcast-column-head,
|
|
629
|
-
.timing-row {
|
|
1233
|
+
:where(.f1-sim-component, .f1-sim-component *).broadcast-column-head,
|
|
1234
|
+
:where(.f1-sim-component, .f1-sim-component *).timing-row {
|
|
630
1235
|
min-width: 0;
|
|
631
1236
|
}
|
|
632
1237
|
|
|
633
|
-
.timing-row > * {
|
|
1238
|
+
:where(.f1-sim-component, .f1-sim-component *).timing-row > * {
|
|
634
1239
|
min-width: 0;
|
|
635
1240
|
}
|
|
636
1241
|
|
|
637
|
-
.sim-shell--left-tower-overlay .timing-row {
|
|
1242
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .timing-row {
|
|
638
1243
|
min-width: 0;
|
|
639
1244
|
}
|
|
640
1245
|
|
|
641
|
-
.timing-row:hover {
|
|
1246
|
+
:where(.f1-sim-component, .f1-sim-component *).timing-row:hover {
|
|
642
1247
|
background:
|
|
643
1248
|
linear-gradient(90deg, color-mix(in srgb, var(--driver-color, var(--red)) 22%, transparent), transparent 52%),
|
|
644
1249
|
rgba(28, 31, 38, 0.86);
|
|
645
1250
|
}
|
|
646
1251
|
|
|
647
|
-
.timing-row.is-selected {
|
|
1252
|
+
:where(.f1-sim-component, .f1-sim-component *).timing-row.is-selected {
|
|
648
1253
|
color: #08090b;
|
|
649
1254
|
outline: 0;
|
|
650
1255
|
background: #f5f6f8;
|
|
@@ -653,55 +1258,56 @@
|
|
|
653
1258
|
0 0 0 1px rgba(255, 255, 255, 0.68);
|
|
654
1259
|
}
|
|
655
1260
|
|
|
656
|
-
.timing-row.is-dnf {
|
|
1261
|
+
:where(.f1-sim-component, .f1-sim-component *).timing-row.is-dnf {
|
|
657
1262
|
color: rgba(244, 247, 251, 0.56);
|
|
658
1263
|
background:
|
|
659
1264
|
linear-gradient(90deg, rgba(148, 163, 184, 0.14), transparent 42%),
|
|
660
1265
|
rgba(10, 12, 17, 0.58);
|
|
661
1266
|
}
|
|
662
1267
|
|
|
663
|
-
.timing-row.is-dnf .timing-icon,
|
|
664
|
-
.timing-row.is-dnf .timing-tire {
|
|
1268
|
+
:where(.f1-sim-component, .f1-sim-component *).timing-row.is-dnf .timing-icon,
|
|
1269
|
+
:where(.f1-sim-component, .f1-sim-component *).timing-row.is-dnf .timing-tire {
|
|
665
1270
|
filter: grayscale(1);
|
|
666
1271
|
opacity: 0.64;
|
|
667
1272
|
}
|
|
668
1273
|
|
|
669
|
-
.timing-row.is-dnf .timing-position {
|
|
1274
|
+
:where(.f1-sim-component, .f1-sim-component *).timing-row.is-dnf .timing-position {
|
|
670
1275
|
color: rgba(244, 247, 251, 0.68);
|
|
671
1276
|
background: rgba(30, 35, 44, 0.78);
|
|
672
1277
|
}
|
|
673
1278
|
|
|
674
|
-
.timing-row.is-dnf .timing-gap {
|
|
1279
|
+
:where(.f1-sim-component, .f1-sim-component *).timing-row.is-dnf .timing-gap {
|
|
675
1280
|
color: rgba(244, 247, 251, 0.68);
|
|
676
1281
|
}
|
|
677
1282
|
|
|
678
|
-
.timing-position,
|
|
679
|
-
.timing-icon,
|
|
680
|
-
.timing-tire,
|
|
681
|
-
.timing-gap {
|
|
1283
|
+
:where(.f1-sim-component, .f1-sim-component *).timing-position,
|
|
1284
|
+
:where(.f1-sim-component, .f1-sim-component *).timing-icon,
|
|
1285
|
+
:where(.f1-sim-component, .f1-sim-component *).timing-tire,
|
|
1286
|
+
:where(.f1-sim-component, .f1-sim-component *).timing-gap {
|
|
682
1287
|
font-family: var(--font-mono);
|
|
683
1288
|
font-weight: 700;
|
|
684
1289
|
}
|
|
685
1290
|
|
|
686
|
-
.timing-position {
|
|
1291
|
+
:where(.f1-sim-component, .f1-sim-component *).timing-position {
|
|
687
1292
|
align-self: stretch;
|
|
688
1293
|
display: grid;
|
|
689
1294
|
place-items: center;
|
|
1295
|
+
margin-block: calc(var(--timing-entry-extra-block-padding) * -1);
|
|
690
1296
|
color: #f5f6f8;
|
|
691
1297
|
background: rgba(2, 3, 7, 0.72);
|
|
692
1298
|
font-size: 0.78rem;
|
|
693
1299
|
}
|
|
694
1300
|
|
|
695
|
-
.timing-row:first-child .timing-position {
|
|
1301
|
+
:where(.f1-sim-component, .f1-sim-component *).timing-row:first-child .timing-position {
|
|
696
1302
|
background: var(--red);
|
|
697
1303
|
}
|
|
698
1304
|
|
|
699
|
-
.timing-row.is-selected .timing-position {
|
|
1305
|
+
:where(.f1-sim-component, .f1-sim-component *).timing-row.is-selected .timing-position {
|
|
700
1306
|
color: #fff;
|
|
701
1307
|
background: var(--red);
|
|
702
1308
|
}
|
|
703
1309
|
|
|
704
|
-
.timing-icon {
|
|
1310
|
+
:where(.f1-sim-component, .f1-sim-component *).timing-icon {
|
|
705
1311
|
display: grid;
|
|
706
1312
|
place-items: center;
|
|
707
1313
|
justify-self: center;
|
|
@@ -715,11 +1321,11 @@
|
|
|
715
1321
|
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32);
|
|
716
1322
|
}
|
|
717
1323
|
|
|
718
|
-
.timing-team-icon {
|
|
1324
|
+
:where(.f1-sim-component, .f1-sim-component *).timing-team-icon {
|
|
719
1325
|
background: var(--team-color, var(--driver-color, var(--red)));
|
|
720
1326
|
}
|
|
721
1327
|
|
|
722
|
-
.timing-name {
|
|
1328
|
+
:where(.f1-sim-component, .f1-sim-component *).timing-name {
|
|
723
1329
|
min-width: 0;
|
|
724
1330
|
display: flex;
|
|
725
1331
|
align-items: center;
|
|
@@ -735,13 +1341,13 @@
|
|
|
735
1341
|
text-transform: uppercase;
|
|
736
1342
|
}
|
|
737
1343
|
|
|
738
|
-
.timing-name > span:first-child {
|
|
1344
|
+
:where(.f1-sim-component, .f1-sim-component *).timing-name > span:first-child {
|
|
739
1345
|
min-width: 0;
|
|
740
1346
|
overflow: hidden;
|
|
741
1347
|
text-overflow: ellipsis;
|
|
742
1348
|
}
|
|
743
1349
|
|
|
744
|
-
.timing-penalty-badge {
|
|
1350
|
+
:where(.f1-sim-component, .f1-sim-component *).timing-penalty-badge {
|
|
745
1351
|
flex: 0 0 auto;
|
|
746
1352
|
display: grid;
|
|
747
1353
|
place-items: center;
|
|
@@ -758,7 +1364,7 @@
|
|
|
758
1364
|
box-shadow: 0 0 14px rgba(225, 6, 0, 0.42);
|
|
759
1365
|
}
|
|
760
1366
|
|
|
761
|
-
.timing-gap {
|
|
1367
|
+
:where(.f1-sim-component, .f1-sim-component *).timing-gap {
|
|
762
1368
|
color: rgba(244, 247, 251, 0.76);
|
|
763
1369
|
font-size: 0.66rem;
|
|
764
1370
|
overflow: hidden;
|
|
@@ -768,36 +1374,36 @@
|
|
|
768
1374
|
white-space: nowrap;
|
|
769
1375
|
}
|
|
770
1376
|
|
|
771
|
-
.timing-row.is-selected .timing-gap {
|
|
1377
|
+
:where(.f1-sim-component, .f1-sim-component *).timing-row.is-selected .timing-gap {
|
|
772
1378
|
color: #08090b;
|
|
773
1379
|
}
|
|
774
1380
|
|
|
775
|
-
.timing-tire {
|
|
1381
|
+
:where(.f1-sim-component, .f1-sim-component *).timing-tire {
|
|
776
1382
|
justify-self: center;
|
|
777
1383
|
color: #f3e35f;
|
|
778
1384
|
font-size: 0.72rem;
|
|
779
1385
|
text-align: center;
|
|
780
1386
|
}
|
|
781
1387
|
|
|
782
|
-
.timing-tire--s {
|
|
1388
|
+
:where(.f1-sim-component, .f1-sim-component *).timing-tire--s {
|
|
783
1389
|
color: #ff3b30;
|
|
784
1390
|
}
|
|
785
1391
|
|
|
786
|
-
.timing-tire--m {
|
|
1392
|
+
:where(.f1-sim-component, .f1-sim-component *).timing-tire--m {
|
|
787
1393
|
color: #f3e35f;
|
|
788
1394
|
}
|
|
789
1395
|
|
|
790
|
-
.timing-tire--h {
|
|
1396
|
+
:where(.f1-sim-component, .f1-sim-component *).timing-tire--h {
|
|
791
1397
|
color: #e9eef5;
|
|
792
1398
|
}
|
|
793
1399
|
|
|
794
|
-
.timing-row.is-selected .timing-tire--h,
|
|
795
|
-
.timing-row.is-selected .timing-tire--m,
|
|
796
|
-
.timing-row.is-selected .timing-tire--s {
|
|
1400
|
+
:where(.f1-sim-component, .f1-sim-component *).timing-row.is-selected .timing-tire--h,
|
|
1401
|
+
:where(.f1-sim-component, .f1-sim-component *).timing-row.is-selected .timing-tire--m,
|
|
1402
|
+
:where(.f1-sim-component, .f1-sim-component *).timing-row.is-selected .timing-tire--s {
|
|
797
1403
|
color: #08090b;
|
|
798
1404
|
}
|
|
799
1405
|
|
|
800
|
-
.sim-canvas-panel {
|
|
1406
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel {
|
|
801
1407
|
position: relative;
|
|
802
1408
|
min-height: var(--paddock-race-view-min-height, 620px);
|
|
803
1409
|
overflow: hidden;
|
|
@@ -806,7 +1412,7 @@
|
|
|
806
1412
|
0 24px 70px rgba(0, 0, 0, 0.32);
|
|
807
1413
|
}
|
|
808
1414
|
|
|
809
|
-
.track-canvas {
|
|
1415
|
+
:where(.f1-sim-component, .f1-sim-component *).track-canvas {
|
|
810
1416
|
position: absolute;
|
|
811
1417
|
inset: 0;
|
|
812
1418
|
z-index: 0;
|
|
@@ -816,13 +1422,13 @@
|
|
|
816
1422
|
touch-action: auto;
|
|
817
1423
|
}
|
|
818
1424
|
|
|
819
|
-
.track-canvas canvas {
|
|
1425
|
+
:where(.f1-sim-component, .f1-sim-component *).track-canvas canvas {
|
|
820
1426
|
width: 100% !important;
|
|
821
1427
|
height: 100% !important;
|
|
822
1428
|
display: block;
|
|
823
1429
|
}
|
|
824
1430
|
|
|
825
|
-
.physics-mode-indicator {
|
|
1431
|
+
:where(.f1-sim-component, .f1-sim-component *).physics-mode-indicator {
|
|
826
1432
|
position: absolute;
|
|
827
1433
|
z-index: 18;
|
|
828
1434
|
top: 0.85rem;
|
|
@@ -834,30 +1440,95 @@
|
|
|
834
1440
|
pointer-events: none;
|
|
835
1441
|
}
|
|
836
1442
|
|
|
837
|
-
.physics-mode-indicator--arcade {
|
|
838
|
-
background: #168cff;
|
|
839
|
-
}
|
|
1443
|
+
:where(.f1-sim-component, .f1-sim-component *).physics-mode-indicator--arcade {
|
|
1444
|
+
background: #168cff;
|
|
1445
|
+
}
|
|
1446
|
+
|
|
1447
|
+
:where(.f1-sim-component, .f1-sim-component *).physics-mode-indicator--advanced {
|
|
1448
|
+
background: #e10600;
|
|
1449
|
+
}
|
|
1450
|
+
|
|
1451
|
+
:where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer {
|
|
1452
|
+
--telemetry-drawer-width: min(390px, max(300px, 30cqw));
|
|
1453
|
+
--race-toolbar-height: 3.4rem;
|
|
1454
|
+
position: relative;
|
|
1455
|
+
display: flex;
|
|
1456
|
+
flex-direction: column;
|
|
1457
|
+
container-type: inline-size;
|
|
1458
|
+
inline-size: 100%;
|
|
1459
|
+
max-inline-size: 100%;
|
|
1460
|
+
height: var(--paddock-race-view-height, var(--paddock-race-view-min-height, 620px));
|
|
1461
|
+
min-height: min(100%, var(--paddock-race-view-min-height, 620px));
|
|
1462
|
+
overflow: hidden;
|
|
1463
|
+
background: #000;
|
|
1464
|
+
}
|
|
1465
|
+
|
|
1466
|
+
@container (max-width: 520px) {
|
|
1467
|
+
:where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer--responsive-narrow {
|
|
1468
|
+
--telemetry-drawer-width: min(88%, 360px);
|
|
1469
|
+
height: auto;
|
|
1470
|
+
}
|
|
1471
|
+
|
|
1472
|
+
:where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer--responsive-narrow .race-telemetry-drawer__toolbar {
|
|
1473
|
+
flex-direction: column;
|
|
1474
|
+
align-items: stretch;
|
|
1475
|
+
gap: 0.5rem;
|
|
1476
|
+
}
|
|
1477
|
+
|
|
1478
|
+
:where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer--responsive-narrow .race-telemetry-drawer__toolbar .camera-controls--external {
|
|
1479
|
+
width: 100%;
|
|
1480
|
+
flex: 0 0 auto;
|
|
1481
|
+
justify-content: stretch;
|
|
1482
|
+
}
|
|
1483
|
+
|
|
1484
|
+
:where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer--responsive-narrow .race-telemetry-drawer__toolbar .camera-controls--external button {
|
|
1485
|
+
flex: 1 1 min(9.25rem, 44%);
|
|
1486
|
+
}
|
|
1487
|
+
|
|
1488
|
+
:where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer--responsive-narrow .race-telemetry-drawer__controls {
|
|
1489
|
+
display: grid;
|
|
1490
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
1491
|
+
gap: 0.45rem;
|
|
1492
|
+
width: 100%;
|
|
1493
|
+
}
|
|
1494
|
+
|
|
1495
|
+
:where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer--responsive-narrow .race-telemetry-drawer__controls .sim-control,
|
|
1496
|
+
:where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer--responsive-narrow .race-telemetry-drawer__controls .telemetry-drawer-toggle {
|
|
1497
|
+
width: 100%;
|
|
1498
|
+
min-width: 0;
|
|
1499
|
+
white-space: nowrap;
|
|
1500
|
+
}
|
|
1501
|
+
|
|
1502
|
+
:where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer--responsive-narrow .race-telemetry-drawer__race,
|
|
1503
|
+
:where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer--responsive-narrow.is-telemetry-open .race-telemetry-drawer__race {
|
|
1504
|
+
flex: 0 0 auto;
|
|
1505
|
+
margin-right: 0;
|
|
1506
|
+
padding-right: 0;
|
|
1507
|
+
margin-bottom: 0;
|
|
1508
|
+
}
|
|
840
1509
|
|
|
841
|
-
.
|
|
842
|
-
|
|
843
|
-
|
|
1510
|
+
:where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer--responsive-narrow .telemetry-drawer {
|
|
1511
|
+
top: 0.75rem;
|
|
1512
|
+
right: 0.75rem;
|
|
1513
|
+
bottom: 0.75rem;
|
|
1514
|
+
width: var(--telemetry-drawer-width);
|
|
1515
|
+
height: auto;
|
|
1516
|
+
border-left: 1px solid var(--line);
|
|
1517
|
+
border-top: 0;
|
|
1518
|
+
clip-path: none;
|
|
1519
|
+
transform: translate3d(calc(100% + 1rem), 0, 0);
|
|
1520
|
+
box-shadow: -18px 0 40px rgba(0, 0, 0, 0.38);
|
|
1521
|
+
transition:
|
|
1522
|
+
opacity 180ms ease,
|
|
1523
|
+
transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
1524
|
+
}
|
|
844
1525
|
|
|
845
|
-
.race-telemetry-drawer {
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
position: relative;
|
|
849
|
-
display: flex;
|
|
850
|
-
flex-direction: column;
|
|
851
|
-
container-type: inline-size;
|
|
852
|
-
inline-size: 100%;
|
|
853
|
-
max-inline-size: 100%;
|
|
854
|
-
height: var(--paddock-race-view-height, var(--paddock-race-view-min-height, 620px));
|
|
855
|
-
min-height: min(100%, var(--paddock-race-view-min-height, 620px));
|
|
856
|
-
overflow: hidden;
|
|
857
|
-
background: #000;
|
|
1526
|
+
:where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer--responsive-narrow.is-telemetry-open .telemetry-drawer {
|
|
1527
|
+
transform: translate3d(0, 0, 0);
|
|
1528
|
+
}
|
|
858
1529
|
}
|
|
859
1530
|
|
|
860
|
-
.race-telemetry-drawer__toolbar {
|
|
1531
|
+
:where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer__toolbar {
|
|
861
1532
|
position: relative;
|
|
862
1533
|
z-index: 13;
|
|
863
1534
|
display: flex;
|
|
@@ -870,30 +1541,33 @@
|
|
|
870
1541
|
border-bottom: 1px solid var(--line);
|
|
871
1542
|
}
|
|
872
1543
|
|
|
873
|
-
.race-telemetry-drawer__toolbar .camera-controls--external {
|
|
1544
|
+
:where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer__toolbar .camera-controls--external {
|
|
874
1545
|
flex: 1 1 auto;
|
|
875
1546
|
}
|
|
876
1547
|
|
|
877
|
-
.race-telemetry-drawer__race {
|
|
1548
|
+
:where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer__race {
|
|
1549
|
+
position: relative;
|
|
878
1550
|
min-width: 0;
|
|
879
1551
|
display: flex;
|
|
880
1552
|
flex: 1 1 auto;
|
|
881
1553
|
min-height: 0;
|
|
882
1554
|
margin-right: 0;
|
|
883
|
-
|
|
1555
|
+
padding-right: 0;
|
|
1556
|
+
overflow: hidden;
|
|
1557
|
+
transition: padding-right 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
884
1558
|
}
|
|
885
1559
|
|
|
886
|
-
.race-telemetry-drawer.is-telemetry-open .race-telemetry-drawer__race {
|
|
887
|
-
|
|
1560
|
+
:where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer.is-telemetry-open .race-telemetry-drawer__race {
|
|
1561
|
+
padding-right: var(--telemetry-drawer-width);
|
|
888
1562
|
}
|
|
889
1563
|
|
|
890
|
-
.race-telemetry-drawer__race > .sim-canvas-panel {
|
|
1564
|
+
:where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer__race > .sim-canvas-panel {
|
|
891
1565
|
flex: 1 1 auto;
|
|
892
1566
|
min-height: 0;
|
|
893
1567
|
height: 100%;
|
|
894
1568
|
}
|
|
895
1569
|
|
|
896
|
-
.race-telemetry-drawer__controls {
|
|
1570
|
+
:where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer__controls {
|
|
897
1571
|
min-width: 0;
|
|
898
1572
|
display: flex;
|
|
899
1573
|
flex-wrap: wrap;
|
|
@@ -901,13 +1575,13 @@
|
|
|
901
1575
|
gap: 0.45rem;
|
|
902
1576
|
}
|
|
903
1577
|
|
|
904
|
-
.race-telemetry-drawer__controls .sim-control,
|
|
905
|
-
.race-telemetry-drawer__controls .telemetry-drawer-toggle {
|
|
906
|
-
min-height:
|
|
1578
|
+
:where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer__controls .sim-control,
|
|
1579
|
+
:where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer__controls .telemetry-drawer-toggle {
|
|
1580
|
+
min-height: 44px;
|
|
907
1581
|
padding: 0.62rem 0.72rem;
|
|
908
1582
|
}
|
|
909
1583
|
|
|
910
|
-
.telemetry-drawer-toggle {
|
|
1584
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-drawer-toggle {
|
|
911
1585
|
border: 1px solid rgba(255, 255, 255, 0.26);
|
|
912
1586
|
color: #08090b;
|
|
913
1587
|
background: var(--green);
|
|
@@ -919,15 +1593,15 @@
|
|
|
919
1593
|
cursor: pointer;
|
|
920
1594
|
}
|
|
921
1595
|
|
|
922
|
-
.telemetry-drawer {
|
|
1596
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-drawer {
|
|
923
1597
|
position: absolute;
|
|
924
1598
|
z-index: 11;
|
|
925
|
-
top:
|
|
1599
|
+
top: 0;
|
|
926
1600
|
right: 0;
|
|
927
1601
|
bottom: 0;
|
|
928
1602
|
width: var(--telemetry-drawer-width);
|
|
929
1603
|
min-width: 0;
|
|
930
|
-
height:
|
|
1604
|
+
height: 100%;
|
|
931
1605
|
overflow: hidden;
|
|
932
1606
|
color: var(--text);
|
|
933
1607
|
background:
|
|
@@ -935,22 +1609,24 @@
|
|
|
935
1609
|
rgba(8, 9, 11, 0.97);
|
|
936
1610
|
border-left: 1px solid var(--line);
|
|
937
1611
|
clip-path: inset(0 0 0 100%);
|
|
938
|
-
transform: translate3d(
|
|
1612
|
+
transform: translate3d(100%, 0, 0);
|
|
939
1613
|
opacity: 0;
|
|
940
1614
|
pointer-events: none;
|
|
941
1615
|
will-change: transform, opacity;
|
|
942
1616
|
transition:
|
|
943
1617
|
clip-path 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
|
|
1618
|
+
transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
|
|
944
1619
|
opacity 180ms ease;
|
|
945
1620
|
}
|
|
946
1621
|
|
|
947
|
-
.race-telemetry-drawer.is-telemetry-open .telemetry-drawer {
|
|
1622
|
+
:where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer.is-telemetry-open .telemetry-drawer {
|
|
948
1623
|
clip-path: inset(0);
|
|
1624
|
+
transform: translate3d(0, 0, 0);
|
|
949
1625
|
opacity: 1;
|
|
950
1626
|
pointer-events: auto;
|
|
951
1627
|
}
|
|
952
1628
|
|
|
953
|
-
.telemetry-drawer__content {
|
|
1629
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-drawer__content {
|
|
954
1630
|
height: 100%;
|
|
955
1631
|
padding: 0.72rem;
|
|
956
1632
|
min-height: 0;
|
|
@@ -958,11 +1634,11 @@
|
|
|
958
1634
|
scrollbar-width: thin;
|
|
959
1635
|
}
|
|
960
1636
|
|
|
961
|
-
.telemetry-drawer__content > .telemetry-stack {
|
|
1637
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-drawer__content > .telemetry-stack {
|
|
962
1638
|
height: 100%;
|
|
963
1639
|
}
|
|
964
1640
|
|
|
965
|
-
.camera-controls {
|
|
1641
|
+
:where(.f1-sim-component, .f1-sim-component *).camera-controls {
|
|
966
1642
|
position: absolute;
|
|
967
1643
|
top: 1rem;
|
|
968
1644
|
left: 1rem;
|
|
@@ -976,7 +1652,7 @@
|
|
|
976
1652
|
backdrop-filter: blur(14px);
|
|
977
1653
|
}
|
|
978
1654
|
|
|
979
|
-
.camera-controls--external {
|
|
1655
|
+
:where(.f1-sim-component, .f1-sim-component *).camera-controls--external {
|
|
980
1656
|
position: relative;
|
|
981
1657
|
top: auto;
|
|
982
1658
|
left: auto;
|
|
@@ -985,7 +1661,9 @@
|
|
|
985
1661
|
background: rgba(8, 9, 11, 0.84);
|
|
986
1662
|
}
|
|
987
1663
|
|
|
988
|
-
.camera-controls button {
|
|
1664
|
+
:where(.f1-sim-component, .f1-sim-component *).camera-controls button {
|
|
1665
|
+
min-width: 44px;
|
|
1666
|
+
min-height: 44px;
|
|
989
1667
|
border: 1px solid rgba(255, 255, 255, 0.22);
|
|
990
1668
|
color: var(--text);
|
|
991
1669
|
background: rgba(255, 255, 255, 0.06);
|
|
@@ -998,11 +1676,11 @@
|
|
|
998
1676
|
cursor: pointer;
|
|
999
1677
|
}
|
|
1000
1678
|
|
|
1001
|
-
.camera-controls button:hover {
|
|
1679
|
+
:where(.f1-sim-component, .f1-sim-component *).camera-controls button:hover {
|
|
1002
1680
|
border-color: var(--text);
|
|
1003
1681
|
}
|
|
1004
1682
|
|
|
1005
|
-
.steward-message {
|
|
1683
|
+
:where(.f1-sim-component, .f1-sim-component *).steward-message {
|
|
1006
1684
|
--steward-panel-bg: rgba(8, 9, 11, 0.92);
|
|
1007
1685
|
--steward-chip-bg: color-mix(in srgb, var(--steward-color, var(--yellow)) 18%, rgba(8, 9, 11, 0.94));
|
|
1008
1686
|
--steward-chip-color: var(--steward-color, var(--yellow));
|
|
@@ -1030,24 +1708,24 @@
|
|
|
1030
1708
|
transform 160ms ease;
|
|
1031
1709
|
}
|
|
1032
1710
|
|
|
1033
|
-
.steward-message.is-penalty {
|
|
1711
|
+
:where(.f1-sim-component, .f1-sim-component *).steward-message.is-penalty {
|
|
1034
1712
|
--steward-panel-bg: linear-gradient(110deg, rgba(68, 6, 8, 0.96), rgba(8, 9, 11, 0.94) 58%);
|
|
1035
1713
|
--steward-chip-bg: #e10600;
|
|
1036
1714
|
--steward-chip-color: #fff;
|
|
1037
1715
|
}
|
|
1038
1716
|
|
|
1039
|
-
.steward-message.is-warning {
|
|
1717
|
+
:where(.f1-sim-component, .f1-sim-component *).steward-message.is-warning {
|
|
1040
1718
|
--steward-panel-bg: linear-gradient(110deg, rgba(70, 56, 8, 0.96), rgba(8, 9, 11, 0.94) 58%);
|
|
1041
1719
|
--steward-chip-bg: var(--yellow);
|
|
1042
1720
|
--steward-chip-color: #111318;
|
|
1043
1721
|
}
|
|
1044
1722
|
|
|
1045
|
-
.steward-message.is-hidden {
|
|
1723
|
+
:where(.f1-sim-component, .f1-sim-component *).steward-message.is-hidden {
|
|
1046
1724
|
opacity: 0;
|
|
1047
1725
|
transform: translate(-50%, -0.55rem);
|
|
1048
1726
|
}
|
|
1049
1727
|
|
|
1050
|
-
.steward-message__kicker {
|
|
1728
|
+
:where(.f1-sim-component, .f1-sim-component *).steward-message__kicker {
|
|
1051
1729
|
grid-row: span 2;
|
|
1052
1730
|
align-self: center;
|
|
1053
1731
|
min-width: 4.9rem;
|
|
@@ -1064,7 +1742,7 @@
|
|
|
1064
1742
|
text-transform: uppercase;
|
|
1065
1743
|
}
|
|
1066
1744
|
|
|
1067
|
-
.steward-message strong {
|
|
1745
|
+
:where(.f1-sim-component, .f1-sim-component *).steward-message strong {
|
|
1068
1746
|
min-width: 0;
|
|
1069
1747
|
overflow-wrap: anywhere;
|
|
1070
1748
|
overflow: hidden;
|
|
@@ -1075,7 +1753,7 @@
|
|
|
1075
1753
|
white-space: normal;
|
|
1076
1754
|
}
|
|
1077
1755
|
|
|
1078
|
-
.steward-message span:last-child {
|
|
1756
|
+
:where(.f1-sim-component, .f1-sim-component *).steward-message span:last-child {
|
|
1079
1757
|
min-width: 0;
|
|
1080
1758
|
overflow-wrap: anywhere;
|
|
1081
1759
|
overflow: hidden;
|
|
@@ -1085,7 +1763,7 @@
|
|
|
1085
1763
|
white-space: normal;
|
|
1086
1764
|
}
|
|
1087
1765
|
|
|
1088
|
-
.fps-counter {
|
|
1766
|
+
:where(.f1-sim-component, .f1-sim-component *).fps-counter {
|
|
1089
1767
|
position: absolute;
|
|
1090
1768
|
top: 1rem;
|
|
1091
1769
|
right: 1rem;
|
|
@@ -1106,12 +1784,12 @@
|
|
|
1106
1784
|
backdrop-filter: blur(10px);
|
|
1107
1785
|
}
|
|
1108
1786
|
|
|
1109
|
-
.fps-counter strong {
|
|
1787
|
+
:where(.f1-sim-component, .f1-sim-component *).fps-counter strong {
|
|
1110
1788
|
color: #fff;
|
|
1111
1789
|
font-size: 0.74rem;
|
|
1112
1790
|
}
|
|
1113
1791
|
|
|
1114
|
-
.race-finish-panel {
|
|
1792
|
+
:where(.f1-sim-component, .f1-sim-component *).race-finish-panel {
|
|
1115
1793
|
position: absolute;
|
|
1116
1794
|
z-index: 9;
|
|
1117
1795
|
left: 50%;
|
|
@@ -1134,7 +1812,7 @@
|
|
|
1134
1812
|
text-transform: uppercase;
|
|
1135
1813
|
}
|
|
1136
1814
|
|
|
1137
|
-
.race-finish-panel span {
|
|
1815
|
+
:where(.f1-sim-component, .f1-sim-component *).race-finish-panel span {
|
|
1138
1816
|
color: var(--muted);
|
|
1139
1817
|
font-family: var(--font-mono);
|
|
1140
1818
|
font-size: 0.66rem;
|
|
@@ -1142,14 +1820,14 @@
|
|
|
1142
1820
|
letter-spacing: 0.12em;
|
|
1143
1821
|
}
|
|
1144
1822
|
|
|
1145
|
-
.race-finish-panel > strong {
|
|
1823
|
+
:where(.f1-sim-component, .f1-sim-component *).race-finish-panel > strong {
|
|
1146
1824
|
grid-column: 1;
|
|
1147
1825
|
font-size: clamp(1.45rem, 3vw, 2.4rem);
|
|
1148
1826
|
font-weight: 900;
|
|
1149
1827
|
line-height: 0.92;
|
|
1150
1828
|
}
|
|
1151
1829
|
|
|
1152
|
-
.race-finish-panel ol {
|
|
1830
|
+
:where(.f1-sim-component, .f1-sim-component *).race-finish-panel ol {
|
|
1153
1831
|
grid-column: 2;
|
|
1154
1832
|
grid-row: 1 / span 2;
|
|
1155
1833
|
display: grid;
|
|
@@ -1160,7 +1838,7 @@
|
|
|
1160
1838
|
list-style: none;
|
|
1161
1839
|
}
|
|
1162
1840
|
|
|
1163
|
-
.race-finish-panel li {
|
|
1841
|
+
:where(.f1-sim-component, .f1-sim-component *).race-finish-panel li {
|
|
1164
1842
|
display: grid;
|
|
1165
1843
|
grid-template-columns: 2.2rem minmax(0, 1fr);
|
|
1166
1844
|
gap: 0.45rem;
|
|
@@ -1169,20 +1847,25 @@
|
|
|
1169
1847
|
font-size: 0.72rem;
|
|
1170
1848
|
}
|
|
1171
1849
|
|
|
1172
|
-
.race-finish-panel li strong {
|
|
1850
|
+
:where(.f1-sim-component, .f1-sim-component *).race-finish-panel li strong {
|
|
1173
1851
|
min-width: 0;
|
|
1174
1852
|
overflow: hidden;
|
|
1175
1853
|
text-overflow: ellipsis;
|
|
1176
1854
|
white-space: nowrap;
|
|
1177
1855
|
}
|
|
1178
1856
|
|
|
1179
|
-
.standalone-control {
|
|
1857
|
+
:where(.f1-sim-component, .f1-sim-component *).standalone-control {
|
|
1180
1858
|
display: inline-flex;
|
|
1181
1859
|
align-items: center;
|
|
1182
1860
|
justify-content: center;
|
|
1861
|
+
min-width: 0;
|
|
1862
|
+
}
|
|
1863
|
+
|
|
1864
|
+
:where(.f1-sim-component, .f1-sim-component *).standalone-control > .sim-control {
|
|
1865
|
+
width: 100%;
|
|
1183
1866
|
}
|
|
1184
1867
|
|
|
1185
|
-
.start-lights {
|
|
1868
|
+
:where(.f1-sim-component, .f1-sim-component *).start-lights {
|
|
1186
1869
|
position: absolute;
|
|
1187
1870
|
top: 4.15rem;
|
|
1188
1871
|
left: 50%;
|
|
@@ -1203,24 +1886,24 @@
|
|
|
1203
1886
|
backdrop-filter: blur(14px);
|
|
1204
1887
|
}
|
|
1205
1888
|
|
|
1206
|
-
.start-lights[hidden] {
|
|
1889
|
+
:where(.f1-sim-component, .f1-sim-component *).start-lights[hidden] {
|
|
1207
1890
|
display: none;
|
|
1208
1891
|
}
|
|
1209
1892
|
|
|
1210
|
-
.start-lights__label {
|
|
1893
|
+
:where(.f1-sim-component, .f1-sim-component *).start-lights__label {
|
|
1211
1894
|
color: rgba(244, 247, 251, 0.78);
|
|
1212
1895
|
font-size: 0.62rem;
|
|
1213
1896
|
font-weight: 900;
|
|
1214
1897
|
letter-spacing: 0.16em;
|
|
1215
1898
|
}
|
|
1216
1899
|
|
|
1217
|
-
.start-lights__gantry {
|
|
1900
|
+
:where(.f1-sim-component, .f1-sim-component *).start-lights__gantry {
|
|
1218
1901
|
display: grid;
|
|
1219
1902
|
grid-template-columns: repeat(5, 1.35rem);
|
|
1220
1903
|
gap: 0.34rem;
|
|
1221
1904
|
}
|
|
1222
1905
|
|
|
1223
|
-
.start-lights__gantry span {
|
|
1906
|
+
:where(.f1-sim-component, .f1-sim-component *).start-lights__gantry span {
|
|
1224
1907
|
width: 1.35rem;
|
|
1225
1908
|
height: 1.35rem;
|
|
1226
1909
|
border-radius: 50%;
|
|
@@ -1232,7 +1915,7 @@
|
|
|
1232
1915
|
transition: background 80ms linear, box-shadow 80ms linear, border-color 80ms linear;
|
|
1233
1916
|
}
|
|
1234
1917
|
|
|
1235
|
-
.start-lights__gantry span.is-lit {
|
|
1918
|
+
:where(.f1-sim-component, .f1-sim-component *).start-lights__gantry span.is-lit {
|
|
1236
1919
|
background: #e10600;
|
|
1237
1920
|
border-color: rgba(255, 210, 210, 0.86);
|
|
1238
1921
|
box-shadow:
|
|
@@ -1240,17 +1923,17 @@
|
|
|
1240
1923
|
0 0 18px rgba(225, 6, 0, 0.72);
|
|
1241
1924
|
}
|
|
1242
1925
|
|
|
1243
|
-
.start-lights.is-lights-out .start-lights__label {
|
|
1926
|
+
:where(.f1-sim-component, .f1-sim-component *).start-lights.is-lights-out .start-lights__label {
|
|
1244
1927
|
color: #fff;
|
|
1245
1928
|
}
|
|
1246
1929
|
|
|
1247
|
-
.start-lights.is-lights-out .start-lights__gantry span {
|
|
1930
|
+
:where(.f1-sim-component, .f1-sim-component *).start-lights.is-lights-out .start-lights__gantry span {
|
|
1248
1931
|
background: #08090b;
|
|
1249
1932
|
border-color: rgba(255, 255, 255, 0.12);
|
|
1250
1933
|
box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.9);
|
|
1251
1934
|
}
|
|
1252
1935
|
|
|
1253
|
-
.paddock-loading {
|
|
1936
|
+
:where(.f1-sim-component, .f1-sim-component *).paddock-loading {
|
|
1254
1937
|
position: absolute;
|
|
1255
1938
|
inset: 0;
|
|
1256
1939
|
z-index: 30;
|
|
@@ -1271,13 +1954,13 @@
|
|
|
1271
1954
|
backdrop-filter: blur(10px);
|
|
1272
1955
|
}
|
|
1273
1956
|
|
|
1274
|
-
.paddock-loading__lights {
|
|
1957
|
+
:where(.f1-sim-component, .f1-sim-component *).paddock-loading__lights {
|
|
1275
1958
|
display: grid;
|
|
1276
1959
|
grid-template-columns: repeat(5, 1rem);
|
|
1277
1960
|
gap: 0.28rem;
|
|
1278
1961
|
}
|
|
1279
1962
|
|
|
1280
|
-
.paddock-loading__lights span {
|
|
1963
|
+
:where(.f1-sim-component, .f1-sim-component *).paddock-loading__lights span {
|
|
1281
1964
|
width: 1rem;
|
|
1282
1965
|
height: 1rem;
|
|
1283
1966
|
border-radius: 50%;
|
|
@@ -1289,30 +1972,90 @@
|
|
|
1289
1972
|
animation: paddock-loading-pulse 900ms ease-in-out infinite;
|
|
1290
1973
|
}
|
|
1291
1974
|
|
|
1292
|
-
.paddock-loading__lights span:nth-child(2) {
|
|
1975
|
+
:where(.f1-sim-component, .f1-sim-component *).paddock-loading__lights span:nth-child(2) {
|
|
1293
1976
|
animation-delay: 90ms;
|
|
1294
1977
|
}
|
|
1295
1978
|
|
|
1296
|
-
.paddock-loading__lights span:nth-child(3) {
|
|
1979
|
+
:where(.f1-sim-component, .f1-sim-component *).paddock-loading__lights span:nth-child(3) {
|
|
1297
1980
|
animation-delay: 180ms;
|
|
1298
1981
|
}
|
|
1299
1982
|
|
|
1300
|
-
.paddock-loading__lights span:nth-child(4) {
|
|
1983
|
+
:where(.f1-sim-component, .f1-sim-component *).paddock-loading__lights span:nth-child(4) {
|
|
1301
1984
|
animation-delay: 270ms;
|
|
1302
1985
|
}
|
|
1303
1986
|
|
|
1304
|
-
.paddock-loading__lights span:nth-child(5) {
|
|
1987
|
+
:where(.f1-sim-component, .f1-sim-component *).paddock-loading__lights span:nth-child(5) {
|
|
1305
1988
|
animation-delay: 360ms;
|
|
1306
1989
|
}
|
|
1307
1990
|
|
|
1308
|
-
.paddock-loading__label {
|
|
1991
|
+
:where(.f1-sim-component, .f1-sim-component *).paddock-loading__label {
|
|
1309
1992
|
text-shadow: 0 0 16px rgba(225, 6, 0, 0.48);
|
|
1310
1993
|
}
|
|
1311
1994
|
|
|
1312
|
-
[data-paddock-component].is-loaded > .paddock-loading {
|
|
1995
|
+
:where(.f1-sim-component, .f1-sim-component *)[data-paddock-component].is-loaded > .paddock-loading {
|
|
1313
1996
|
opacity: 0;
|
|
1314
1997
|
}
|
|
1315
1998
|
|
|
1999
|
+
:where(.f1-sim-component, .f1-sim-component *).paddock-unsupported-size {
|
|
2000
|
+
position: absolute;
|
|
2001
|
+
inset: 0;
|
|
2002
|
+
z-index: 60;
|
|
2003
|
+
display: none;
|
|
2004
|
+
place-content: center;
|
|
2005
|
+
gap: 0.35rem;
|
|
2006
|
+
padding: 1rem;
|
|
2007
|
+
color: var(--text);
|
|
2008
|
+
background:
|
|
2009
|
+
linear-gradient(135deg, color-mix(in srgb, var(--race-control-red) 18%, transparent), transparent 42%),
|
|
2010
|
+
color-mix(in srgb, var(--surface) 94%, #000000);
|
|
2011
|
+
border: 1px solid var(--line-strong);
|
|
2012
|
+
font-family: var(--font-mono);
|
|
2013
|
+
text-align: center;
|
|
2014
|
+
text-transform: uppercase;
|
|
2015
|
+
}
|
|
2016
|
+
|
|
2017
|
+
:where(.f1-sim-component, .f1-sim-component *).paddock-unsupported-size strong {
|
|
2018
|
+
color: var(--yellow);
|
|
2019
|
+
font-size: 0.82rem;
|
|
2020
|
+
font-weight: 900;
|
|
2021
|
+
letter-spacing: 0.12em;
|
|
2022
|
+
}
|
|
2023
|
+
|
|
2024
|
+
:where(.f1-sim-component, .f1-sim-component *).paddock-unsupported-size span {
|
|
2025
|
+
max-width: 28rem;
|
|
2026
|
+
color: var(--muted);
|
|
2027
|
+
font-size: 0.68rem;
|
|
2028
|
+
font-weight: 800;
|
|
2029
|
+
letter-spacing: 0.08em;
|
|
2030
|
+
line-height: 1.35;
|
|
2031
|
+
}
|
|
2032
|
+
|
|
2033
|
+
:where(.f1-sim-component, .f1-sim-component *)[data-paddock-size-unsupported='true'] {
|
|
2034
|
+
position: relative;
|
|
2035
|
+
min-block-size: 7rem;
|
|
2036
|
+
overflow: hidden;
|
|
2037
|
+
}
|
|
2038
|
+
|
|
2039
|
+
:where(.f1-sim-component, .f1-sim-component *)[data-paddock-size-unsupported='true'] > :not(.paddock-unsupported-size) {
|
|
2040
|
+
visibility: hidden;
|
|
2041
|
+
pointer-events: none;
|
|
2042
|
+
}
|
|
2043
|
+
|
|
2044
|
+
:where(.f1-sim-component, .f1-sim-component *)[data-paddock-size-unsupported='true'] > .paddock-unsupported-size {
|
|
2045
|
+
display: grid;
|
|
2046
|
+
visibility: visible;
|
|
2047
|
+
pointer-events: auto;
|
|
2048
|
+
}
|
|
2049
|
+
|
|
2050
|
+
:where(.f1-sim-component, .f1-sim-component *)[data-f1-simulator-shell][data-paddock-size-unsupported='true'] {
|
|
2051
|
+
display: grid;
|
|
2052
|
+
min-block-size: min(100svh, 24rem);
|
|
2053
|
+
}
|
|
2054
|
+
|
|
2055
|
+
:where(.f1-sim-component, .f1-sim-component *)[data-f1-simulator-shell][data-paddock-size-unsupported='true'] > .sim-workspace {
|
|
2056
|
+
display: none;
|
|
2057
|
+
}
|
|
2058
|
+
|
|
1316
2059
|
@keyframes paddock-loading-pulse {
|
|
1317
2060
|
0%,
|
|
1318
2061
|
100% {
|
|
@@ -1333,7 +2076,25 @@
|
|
|
1333
2076
|
}
|
|
1334
2077
|
}
|
|
1335
2078
|
|
|
1336
|
-
|
|
2079
|
+
@keyframes paddock-loading-pulse-light {
|
|
2080
|
+
0%,
|
|
2081
|
+
100% {
|
|
2082
|
+
background: color-mix(in srgb, var(--surface-raised) 88%, var(--text));
|
|
2083
|
+
border-color: var(--line);
|
|
2084
|
+
box-shadow: inset 0 0 10px color-mix(in srgb, var(--text) 12%, transparent);
|
|
2085
|
+
}
|
|
2086
|
+
|
|
2087
|
+
45%,
|
|
2088
|
+
62% {
|
|
2089
|
+
background: var(--race-control-red);
|
|
2090
|
+
border-color: color-mix(in srgb, var(--race-control-red) 58%, var(--primary-text));
|
|
2091
|
+
box-shadow:
|
|
2092
|
+
inset 0 0 8px color-mix(in srgb, var(--primary-text) 18%, transparent),
|
|
2093
|
+
0 0 18px color-mix(in srgb, var(--race-control-red) 64%, transparent);
|
|
2094
|
+
}
|
|
2095
|
+
}
|
|
2096
|
+
|
|
2097
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-panel {
|
|
1337
2098
|
--race-data-banner-left: 50%;
|
|
1338
2099
|
--race-data-banner-width: min(1080px, calc(100% - 1.5rem));
|
|
1339
2100
|
--race-data-banner-translate-x: -50%;
|
|
@@ -1361,19 +2122,19 @@
|
|
|
1361
2122
|
transition: opacity 180ms ease, transform 180ms ease, width 180ms ease, min-height 180ms ease, background-color 180ms ease;
|
|
1362
2123
|
}
|
|
1363
2124
|
|
|
1364
|
-
.race-data-panel.is-hidden {
|
|
2125
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-panel.is-hidden {
|
|
1365
2126
|
opacity: 0;
|
|
1366
2127
|
pointer-events: none;
|
|
1367
2128
|
transform: translate(var(--race-data-banner-translate-x), 18px);
|
|
1368
2129
|
}
|
|
1369
2130
|
|
|
1370
|
-
.race-data-panel--custom {
|
|
2131
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-panel--custom {
|
|
1371
2132
|
--race-data-banner-left: 50%;
|
|
1372
2133
|
--race-data-banner-width: min(1080px, calc(100% - 1.5rem));
|
|
1373
2134
|
--race-data-banner-translate-x: -50%;
|
|
1374
2135
|
}
|
|
1375
2136
|
|
|
1376
|
-
.race-data-panel::before {
|
|
2137
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-panel::before {
|
|
1377
2138
|
content: "";
|
|
1378
2139
|
position: absolute;
|
|
1379
2140
|
inset: 0;
|
|
@@ -1384,7 +2145,7 @@
|
|
|
1384
2145
|
pointer-events: none;
|
|
1385
2146
|
}
|
|
1386
2147
|
|
|
1387
|
-
.race-data-panel::after {
|
|
2148
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-panel::after {
|
|
1388
2149
|
content: "";
|
|
1389
2150
|
position: absolute;
|
|
1390
2151
|
top: 0;
|
|
@@ -1395,29 +2156,34 @@
|
|
|
1395
2156
|
pointer-events: none;
|
|
1396
2157
|
}
|
|
1397
2158
|
|
|
1398
|
-
.race-data-copy,
|
|
1399
|
-
.race-data-number,
|
|
1400
|
-
.race-data-link,
|
|
1401
|
-
.race-data-dismiss {
|
|
2159
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-copy,
|
|
2160
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-number,
|
|
2161
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-link,
|
|
2162
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-dismiss {
|
|
1402
2163
|
position: relative;
|
|
1403
2164
|
z-index: 1;
|
|
1404
2165
|
}
|
|
1405
2166
|
|
|
1406
|
-
.race-data-dismiss {
|
|
2167
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-dismiss {
|
|
1407
2168
|
--race-data-dismiss-icon-color: rgba(244, 247, 251, 0.9);
|
|
2169
|
+
--race-data-dismiss-fill: rgba(8, 10, 16, 0.58);
|
|
2170
|
+
--race-data-dismiss-ring: rgba(244, 247, 251, 0.2);
|
|
1408
2171
|
position: absolute;
|
|
1409
2172
|
top: 0.44rem;
|
|
1410
2173
|
right: 0.48rem;
|
|
1411
2174
|
display: grid;
|
|
1412
2175
|
place-items: center;
|
|
1413
|
-
width:
|
|
1414
|
-
height:
|
|
2176
|
+
width: 44px;
|
|
2177
|
+
height: 44px;
|
|
1415
2178
|
padding: 0;
|
|
1416
2179
|
overflow: hidden;
|
|
1417
2180
|
color: transparent;
|
|
1418
|
-
background:
|
|
1419
|
-
|
|
1420
|
-
|
|
2181
|
+
background:
|
|
2182
|
+
radial-gradient(circle at 50% 50%,
|
|
2183
|
+
var(--race-data-dismiss-fill) 0 12px,
|
|
2184
|
+
var(--race-data-dismiss-ring) 12.5px 13.5px,
|
|
2185
|
+
transparent 14px);
|
|
2186
|
+
border: 0;
|
|
1421
2187
|
font-family: var(--font-mono);
|
|
1422
2188
|
font-size: 0;
|
|
1423
2189
|
font-weight: 900;
|
|
@@ -1427,8 +2193,8 @@
|
|
|
1427
2193
|
z-index: 4;
|
|
1428
2194
|
}
|
|
1429
2195
|
|
|
1430
|
-
.race-data-dismiss::before,
|
|
1431
|
-
.race-data-dismiss::after {
|
|
2196
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-dismiss::before,
|
|
2197
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-dismiss::after {
|
|
1432
2198
|
content: "";
|
|
1433
2199
|
position: absolute;
|
|
1434
2200
|
left: 50%;
|
|
@@ -1439,32 +2205,32 @@
|
|
|
1439
2205
|
border-radius: 999px;
|
|
1440
2206
|
}
|
|
1441
2207
|
|
|
1442
|
-
.race-data-dismiss::before {
|
|
2208
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-dismiss::before {
|
|
1443
2209
|
transform: translate(-50%, -50%) rotate(45deg);
|
|
1444
2210
|
}
|
|
1445
2211
|
|
|
1446
|
-
.race-data-dismiss::after {
|
|
2212
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-dismiss::after {
|
|
1447
2213
|
transform: translate(-50%, -50%) rotate(-45deg);
|
|
1448
2214
|
}
|
|
1449
2215
|
|
|
1450
|
-
.race-data-dismiss:hover {
|
|
2216
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-dismiss:hover {
|
|
1451
2217
|
--race-data-dismiss-icon-color: #fff;
|
|
2218
|
+
--race-data-dismiss-fill: color-mix(in srgb, var(--driver-color, var(--red)) 48%, rgba(8, 10, 16, 0.72));
|
|
2219
|
+
--race-data-dismiss-ring: color-mix(in srgb, var(--driver-color, var(--red)) 64%, #ffffff);
|
|
1452
2220
|
color: transparent;
|
|
1453
|
-
border-color: color-mix(in srgb, var(--driver-color, var(--red)) 70%, #ffffff);
|
|
1454
|
-
background: color-mix(in srgb, var(--driver-color, var(--red)) 52%, rgba(8, 10, 16, 0.72));
|
|
1455
2221
|
}
|
|
1456
2222
|
|
|
1457
|
-
.race-data-dismiss:focus-visible {
|
|
2223
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-dismiss:focus-visible {
|
|
1458
2224
|
outline: 2px solid var(--driver-color, var(--red));
|
|
1459
2225
|
outline-offset: 2px;
|
|
1460
2226
|
}
|
|
1461
2227
|
|
|
1462
|
-
.race-data-panel--with-telemetry .race-data-dismiss,
|
|
1463
|
-
.race-data-panel.is-radio-mode .race-data-dismiss {
|
|
2228
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-panel--with-telemetry .race-data-dismiss,
|
|
2229
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-panel.is-radio-mode .race-data-dismiss {
|
|
1464
2230
|
z-index: 4;
|
|
1465
2231
|
}
|
|
1466
2232
|
|
|
1467
|
-
.race-data-copy {
|
|
2233
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-copy {
|
|
1468
2234
|
grid-column: 2;
|
|
1469
2235
|
grid-row: 1;
|
|
1470
2236
|
min-width: 0;
|
|
@@ -1472,7 +2238,7 @@
|
|
|
1472
2238
|
padding: 0.92rem 1.45rem 0.98rem 0.55rem;
|
|
1473
2239
|
}
|
|
1474
2240
|
|
|
1475
|
-
.race-data-kicker {
|
|
2241
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-kicker {
|
|
1476
2242
|
display: block;
|
|
1477
2243
|
margin-bottom: 0.22rem;
|
|
1478
2244
|
color: var(--driver-color, var(--red));
|
|
@@ -1483,7 +2249,7 @@
|
|
|
1483
2249
|
text-transform: uppercase;
|
|
1484
2250
|
}
|
|
1485
2251
|
|
|
1486
|
-
.race-data-copy strong {
|
|
2252
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-copy strong {
|
|
1487
2253
|
display: block;
|
|
1488
2254
|
overflow: hidden;
|
|
1489
2255
|
text-overflow: ellipsis;
|
|
@@ -1494,7 +2260,7 @@
|
|
|
1494
2260
|
text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45), 0 0 24px color-mix(in srgb, var(--driver-color, var(--red)) 28%, transparent);
|
|
1495
2261
|
}
|
|
1496
2262
|
|
|
1497
|
-
.race-data-subtitle {
|
|
2263
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-subtitle {
|
|
1498
2264
|
display: block;
|
|
1499
2265
|
overflow: hidden;
|
|
1500
2266
|
text-overflow: ellipsis;
|
|
@@ -1508,7 +2274,7 @@
|
|
|
1508
2274
|
text-transform: uppercase;
|
|
1509
2275
|
}
|
|
1510
2276
|
|
|
1511
|
-
.race-data-number {
|
|
2277
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-number {
|
|
1512
2278
|
grid-column: 1;
|
|
1513
2279
|
grid-row: 1;
|
|
1514
2280
|
display: grid;
|
|
@@ -1530,86 +2296,75 @@
|
|
|
1530
2296
|
transition: opacity 160ms ease, transform 160ms ease;
|
|
1531
2297
|
}
|
|
1532
2298
|
|
|
1533
|
-
.race-data-panel.is-project-mode .race-data-number {
|
|
2299
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-panel.is-project-mode .race-data-number {
|
|
1534
2300
|
transform: translateX(-8px);
|
|
1535
2301
|
}
|
|
1536
2302
|
|
|
1537
|
-
.race-data-panel--with-telemetry {
|
|
2303
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-panel--with-telemetry {
|
|
1538
2304
|
grid-template-columns: clamp(6.5rem, 11vw, 8.7rem) minmax(0, 1fr) minmax(150px, 0.48fr) auto;
|
|
1539
2305
|
min-height: 112px;
|
|
1540
2306
|
}
|
|
1541
2307
|
|
|
1542
|
-
.race-data-telemetry {
|
|
2308
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-telemetry {
|
|
1543
2309
|
position: relative;
|
|
1544
2310
|
z-index: 1;
|
|
1545
2311
|
grid-column: 3;
|
|
1546
2312
|
grid-row: 1;
|
|
1547
2313
|
align-self: stretch;
|
|
1548
2314
|
display: grid;
|
|
1549
|
-
grid-template-rows:
|
|
1550
|
-
gap: 0.4rem;
|
|
2315
|
+
grid-template-rows: minmax(0, 1fr);
|
|
1551
2316
|
min-width: 0;
|
|
1552
2317
|
padding: 0.85rem 0.65rem;
|
|
1553
|
-
border-left: 1px solid
|
|
1554
|
-
}
|
|
1555
|
-
|
|
1556
|
-
.race-data-telemetry__label {
|
|
1557
|
-
color: var(--driver-color, var(--red));
|
|
1558
|
-
font-family: var(--font-mono);
|
|
1559
|
-
font-size: 0.58rem;
|
|
1560
|
-
font-weight: 900;
|
|
1561
|
-
letter-spacing: 0.14em;
|
|
1562
|
-
line-height: 1;
|
|
1563
|
-
text-transform: uppercase;
|
|
2318
|
+
border-left: 1px solid var(--line);
|
|
1564
2319
|
}
|
|
1565
2320
|
|
|
1566
|
-
.race-data-telemetry__bars {
|
|
2321
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-telemetry__bars {
|
|
1567
2322
|
display: grid;
|
|
1568
2323
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
1569
2324
|
gap: 0.28rem;
|
|
1570
2325
|
min-width: 0;
|
|
1571
2326
|
}
|
|
1572
2327
|
|
|
1573
|
-
.race-data-sector-bar {
|
|
2328
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-sector-bar {
|
|
1574
2329
|
min-height: 3.85rem;
|
|
1575
2330
|
padding: 0.52rem 0.42rem;
|
|
1576
2331
|
}
|
|
1577
2332
|
|
|
1578
|
-
.race-data-panel--with-telemetry .race-data-link {
|
|
2333
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-panel--with-telemetry .race-data-link {
|
|
1579
2334
|
grid-column: 4;
|
|
1580
2335
|
}
|
|
1581
2336
|
|
|
1582
|
-
.race-data-panel.is-radio-mode .race-data-telemetry {
|
|
2337
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-panel.is-radio-mode .race-data-telemetry {
|
|
1583
2338
|
display: none;
|
|
1584
2339
|
}
|
|
1585
2340
|
|
|
1586
|
-
.race-data-panel.is-radio-mode {
|
|
2341
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-panel.is-radio-mode {
|
|
1587
2342
|
grid-template-columns: minmax(0, 1fr);
|
|
1588
2343
|
}
|
|
1589
2344
|
|
|
1590
|
-
.race-data-panel.is-radio-mode .race-data-copy {
|
|
2345
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-panel.is-radio-mode .race-data-copy {
|
|
1591
2346
|
grid-column: 1;
|
|
1592
2347
|
padding-left: 1.45rem;
|
|
1593
2348
|
}
|
|
1594
2349
|
|
|
1595
|
-
.race-data-panel.is-radio-mode .race-data-copy strong {
|
|
2350
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-panel.is-radio-mode .race-data-copy strong {
|
|
1596
2351
|
color: #f8fafc;
|
|
1597
2352
|
font-size: clamp(1.6rem, 3.2vw, 2.35rem);
|
|
1598
2353
|
}
|
|
1599
2354
|
|
|
1600
|
-
.race-data-panel[data-idle-mode="quote"] .race-data-copy {
|
|
2355
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-panel[data-idle-mode="quote"] .race-data-copy {
|
|
1601
2356
|
padding-top: 0.8rem;
|
|
1602
2357
|
padding-bottom: 0.88rem;
|
|
1603
2358
|
}
|
|
1604
2359
|
|
|
1605
|
-
.race-data-panel[data-idle-mode="quote"] .race-data-copy strong {
|
|
2360
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-panel[data-idle-mode="quote"] .race-data-copy strong {
|
|
1606
2361
|
color: rgba(244, 247, 251, 0.78);
|
|
1607
2362
|
font-size: clamp(0.95rem, 1.55vw, 1.2rem);
|
|
1608
2363
|
letter-spacing: 0.05em;
|
|
1609
2364
|
line-height: 1;
|
|
1610
2365
|
}
|
|
1611
2366
|
|
|
1612
|
-
.race-data-panel[data-idle-mode="quote"] .race-data-subtitle {
|
|
2367
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-panel[data-idle-mode="quote"] .race-data-subtitle {
|
|
1613
2368
|
max-width: 100%;
|
|
1614
2369
|
margin-top: 0.34rem;
|
|
1615
2370
|
color: #fff;
|
|
@@ -1621,25 +2376,26 @@
|
|
|
1621
2376
|
text-shadow: 0 2px 0 rgba(0, 0, 0, 0.52), 0 0 22px color-mix(in srgb, var(--driver-color, var(--red)) 30%, transparent);
|
|
1622
2377
|
}
|
|
1623
2378
|
|
|
1624
|
-
.race-data-panel.is-radio-mode .race-data-number {
|
|
2379
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-panel.is-radio-mode .race-data-number {
|
|
1625
2380
|
display: none;
|
|
1626
2381
|
}
|
|
1627
2382
|
|
|
1628
|
-
.race-data-panel.is-radio-mode .race-data-link {
|
|
2383
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-panel.is-radio-mode .race-data-link {
|
|
1629
2384
|
display: none;
|
|
1630
2385
|
}
|
|
1631
2386
|
|
|
1632
|
-
.race-data-link {
|
|
2387
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-link {
|
|
1633
2388
|
grid-column: 3;
|
|
1634
2389
|
grid-row: 1;
|
|
1635
2390
|
display: grid;
|
|
1636
2391
|
place-items: center;
|
|
1637
|
-
align-self:
|
|
1638
|
-
|
|
2392
|
+
align-self: end;
|
|
2393
|
+
justify-self: end;
|
|
2394
|
+
min-width: clamp(112px, 10vw, 150px);
|
|
1639
2395
|
max-width: calc(100% - 0.85rem);
|
|
1640
|
-
min-height:
|
|
1641
|
-
margin
|
|
1642
|
-
padding: 0
|
|
2396
|
+
min-height: 44px;
|
|
2397
|
+
margin: 0 0.85rem 0.85rem 0;
|
|
2398
|
+
padding: 0 0.82rem;
|
|
1643
2399
|
overflow: hidden;
|
|
1644
2400
|
text-overflow: ellipsis;
|
|
1645
2401
|
white-space: nowrap;
|
|
@@ -1647,20 +2403,29 @@
|
|
|
1647
2403
|
background: color-mix(in srgb, var(--driver-color, var(--red)) 88%, #111318);
|
|
1648
2404
|
border: 1px solid color-mix(in srgb, var(--driver-color, var(--red)) 72%, #ffffff);
|
|
1649
2405
|
font-family: var(--font-mono);
|
|
1650
|
-
font-size: 0.
|
|
2406
|
+
font-size: 0.66rem;
|
|
1651
2407
|
font-weight: 900;
|
|
1652
|
-
letter-spacing: 0.
|
|
2408
|
+
letter-spacing: 0.07em;
|
|
2409
|
+
line-height: 1;
|
|
1653
2410
|
text-align: center;
|
|
1654
2411
|
text-decoration: none;
|
|
1655
2412
|
text-transform: uppercase;
|
|
1656
2413
|
}
|
|
1657
2414
|
|
|
1658
|
-
.race-data-link
|
|
2415
|
+
.f1-sim-component .race-data-link {
|
|
2416
|
+
font-family: var(--font-mono);
|
|
2417
|
+
font-size: 0.66rem;
|
|
2418
|
+
font-weight: 900;
|
|
2419
|
+
letter-spacing: 0.07em;
|
|
2420
|
+
line-height: 1;
|
|
2421
|
+
}
|
|
2422
|
+
|
|
2423
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-link:hover {
|
|
1659
2424
|
color: #fff;
|
|
1660
2425
|
filter: brightness(1.12);
|
|
1661
2426
|
}
|
|
1662
2427
|
|
|
1663
|
-
.telemetry-grid dt {
|
|
2428
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-grid dt {
|
|
1664
2429
|
display: block;
|
|
1665
2430
|
min-width: 0;
|
|
1666
2431
|
overflow: hidden;
|
|
@@ -1674,7 +2439,7 @@
|
|
|
1674
2439
|
text-transform: uppercase;
|
|
1675
2440
|
}
|
|
1676
2441
|
|
|
1677
|
-
.telemetry-grid dd {
|
|
2442
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-grid dd {
|
|
1678
2443
|
min-width: 0;
|
|
1679
2444
|
overflow: hidden;
|
|
1680
2445
|
text-overflow: ellipsis;
|
|
@@ -1684,18 +2449,18 @@
|
|
|
1684
2449
|
font-size: clamp(0.86rem, 1.6vw, 1.15rem);
|
|
1685
2450
|
}
|
|
1686
2451
|
|
|
1687
|
-
.telemetry-header {
|
|
2452
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-header {
|
|
1688
2453
|
align-items: flex-start;
|
|
1689
2454
|
}
|
|
1690
2455
|
|
|
1691
|
-
.telemetry-header strong {
|
|
2456
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-header strong {
|
|
1692
2457
|
min-width: 0;
|
|
1693
2458
|
text-align: right;
|
|
1694
2459
|
font-size: 0.92rem;
|
|
1695
2460
|
text-transform: uppercase;
|
|
1696
2461
|
}
|
|
1697
2462
|
|
|
1698
|
-
.telemetry-grid {
|
|
2463
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-grid {
|
|
1699
2464
|
margin: 1rem 0 0;
|
|
1700
2465
|
display: grid;
|
|
1701
2466
|
grid-template-columns: 1fr;
|
|
@@ -1703,7 +2468,7 @@
|
|
|
1703
2468
|
background: var(--line);
|
|
1704
2469
|
}
|
|
1705
2470
|
|
|
1706
|
-
.telemetry-grid > div {
|
|
2471
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-grid > div {
|
|
1707
2472
|
min-width: 0;
|
|
1708
2473
|
display: flex;
|
|
1709
2474
|
justify-content: space-between;
|
|
@@ -1712,12 +2477,12 @@
|
|
|
1712
2477
|
background: var(--surface-panel);
|
|
1713
2478
|
}
|
|
1714
2479
|
|
|
1715
|
-
.telemetry-grid dd {
|
|
2480
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-grid dd {
|
|
1716
2481
|
color: var(--text);
|
|
1717
2482
|
text-align: right;
|
|
1718
2483
|
}
|
|
1719
2484
|
|
|
1720
|
-
.telemetry-module-header {
|
|
2485
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-module-header {
|
|
1721
2486
|
display: flex;
|
|
1722
2487
|
align-items: baseline;
|
|
1723
2488
|
justify-content: space-between;
|
|
@@ -1726,7 +2491,7 @@
|
|
|
1726
2491
|
text-transform: uppercase;
|
|
1727
2492
|
}
|
|
1728
2493
|
|
|
1729
|
-
.telemetry-module-header span {
|
|
2494
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-module-header span {
|
|
1730
2495
|
color: var(--muted);
|
|
1731
2496
|
font-family: var(--font-mono);
|
|
1732
2497
|
font-size: 0.66rem;
|
|
@@ -1734,7 +2499,7 @@
|
|
|
1734
2499
|
letter-spacing: 0.14em;
|
|
1735
2500
|
}
|
|
1736
2501
|
|
|
1737
|
-
.telemetry-module-header strong {
|
|
2502
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-module-header strong {
|
|
1738
2503
|
color: var(--green);
|
|
1739
2504
|
font-family: var(--font-mono);
|
|
1740
2505
|
font-size: 0.7rem;
|
|
@@ -1742,13 +2507,13 @@
|
|
|
1742
2507
|
letter-spacing: 0.08em;
|
|
1743
2508
|
}
|
|
1744
2509
|
|
|
1745
|
-
.telemetry-sector-bars {
|
|
2510
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-bars {
|
|
1746
2511
|
display: grid;
|
|
1747
2512
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
1748
2513
|
gap: 0.35rem;
|
|
1749
2514
|
}
|
|
1750
2515
|
|
|
1751
|
-
.telemetry-sector-bar {
|
|
2516
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-bar {
|
|
1752
2517
|
--sector-status-color: var(--green);
|
|
1753
2518
|
--sector-status-bg: color-mix(in srgb, var(--sector-status-color) 10%, rgba(8, 10, 14, 0.94));
|
|
1754
2519
|
position: relative;
|
|
@@ -1764,49 +2529,49 @@
|
|
|
1764
2529
|
box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.05);
|
|
1765
2530
|
}
|
|
1766
2531
|
|
|
1767
|
-
.telemetry-sector-bar.is-active {
|
|
2532
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-bar.is-active {
|
|
1768
2533
|
border-color: color-mix(in srgb, var(--green) 65%, rgba(255, 255, 255, 0.22));
|
|
1769
2534
|
box-shadow:
|
|
1770
2535
|
inset 0 -2px 0 var(--green),
|
|
1771
2536
|
0 0 24px rgba(20, 199, 132, 0.12);
|
|
1772
2537
|
}
|
|
1773
2538
|
|
|
1774
|
-
.telemetry-sector-bar.is-complete {
|
|
2539
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-bar.is-complete {
|
|
1775
2540
|
color: #08090b;
|
|
1776
2541
|
}
|
|
1777
2542
|
|
|
1778
|
-
.telemetry-sector-bar.is-overall-best,
|
|
1779
|
-
.telemetry-sector-table td.is-overall-best {
|
|
2543
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-bar.is-overall-best,
|
|
2544
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-table td.is-overall-best {
|
|
1780
2545
|
--sector-status-color: #c77dff;
|
|
1781
2546
|
--sector-status-bg: color-mix(in srgb, #c77dff 23%, rgba(8, 10, 14, 0.94));
|
|
1782
2547
|
color: #fff;
|
|
1783
2548
|
}
|
|
1784
2549
|
|
|
1785
|
-
.telemetry-sector-bar.is-personal-best,
|
|
1786
|
-
.telemetry-sector-table td.is-personal-best {
|
|
2550
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-bar.is-personal-best,
|
|
2551
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-table td.is-personal-best {
|
|
1787
2552
|
--sector-status-color: var(--green);
|
|
1788
2553
|
--sector-status-bg: color-mix(in srgb, var(--green) 20%, rgba(8, 10, 14, 0.94));
|
|
1789
2554
|
color: #ecfff7;
|
|
1790
2555
|
}
|
|
1791
2556
|
|
|
1792
|
-
.telemetry-sector-bar.is-slower,
|
|
1793
|
-
.telemetry-sector-table td.is-slower {
|
|
2557
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-bar.is-slower,
|
|
2558
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-table td.is-slower {
|
|
1794
2559
|
--sector-status-color: var(--yellow);
|
|
1795
2560
|
--sector-status-bg: color-mix(in srgb, var(--yellow) 16%, rgba(8, 10, 14, 0.94));
|
|
1796
2561
|
color: #fff2b8;
|
|
1797
2562
|
}
|
|
1798
2563
|
|
|
1799
|
-
.telemetry-sector-table td.is-overall-best,
|
|
1800
|
-
.telemetry-sector-table td.is-personal-best,
|
|
1801
|
-
.telemetry-sector-table td.is-slower {
|
|
2564
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-table td.is-overall-best,
|
|
2565
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-table td.is-personal-best,
|
|
2566
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-table td.is-slower {
|
|
1802
2567
|
background:
|
|
1803
2568
|
linear-gradient(90deg, color-mix(in srgb, var(--sector-status-color) 28%, transparent), transparent 72%),
|
|
1804
2569
|
var(--sector-status-bg);
|
|
1805
2570
|
box-shadow: inset 3px 0 0 var(--sector-status-color);
|
|
1806
2571
|
}
|
|
1807
2572
|
|
|
1808
|
-
.telemetry-sector-bar span,
|
|
1809
|
-
.telemetry-sector-bar strong {
|
|
2573
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-bar span,
|
|
2574
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-bar strong {
|
|
1810
2575
|
position: relative;
|
|
1811
2576
|
z-index: 1;
|
|
1812
2577
|
display: block;
|
|
@@ -1815,14 +2580,14 @@
|
|
|
1815
2580
|
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.32);
|
|
1816
2581
|
}
|
|
1817
2582
|
|
|
1818
|
-
.telemetry-sector-bar span {
|
|
2583
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-bar span {
|
|
1819
2584
|
margin-bottom: 0.4rem;
|
|
1820
2585
|
font-size: 0.58rem;
|
|
1821
2586
|
font-weight: 900;
|
|
1822
2587
|
letter-spacing: 0.16em;
|
|
1823
2588
|
}
|
|
1824
2589
|
|
|
1825
|
-
.telemetry-sector-bar strong {
|
|
2590
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-bar strong {
|
|
1826
2591
|
overflow: hidden;
|
|
1827
2592
|
font-size: 0.72rem;
|
|
1828
2593
|
font-weight: 900;
|
|
@@ -1830,7 +2595,7 @@
|
|
|
1830
2595
|
white-space: nowrap;
|
|
1831
2596
|
}
|
|
1832
2597
|
|
|
1833
|
-
.telemetry-sector-banner {
|
|
2598
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-banner {
|
|
1834
2599
|
--sector-status-color: var(--green);
|
|
1835
2600
|
--sector-banner-color: var(--driver-color, var(--green));
|
|
1836
2601
|
position: absolute;
|
|
@@ -1842,6 +2607,7 @@
|
|
|
1842
2607
|
gap: 0.65rem;
|
|
1843
2608
|
align-items: stretch;
|
|
1844
2609
|
width: min(560px, calc(100% - 2rem));
|
|
2610
|
+
min-height: 88px;
|
|
1845
2611
|
padding: 0.65rem;
|
|
1846
2612
|
color: var(--text);
|
|
1847
2613
|
background:
|
|
@@ -1853,17 +2619,17 @@
|
|
|
1853
2619
|
box-shadow: 0 16px 42px rgba(0, 0, 0, 0.42), inset 0 1px rgba(255, 255, 255, 0.12);
|
|
1854
2620
|
}
|
|
1855
2621
|
|
|
1856
|
-
.sim-canvas-panel:has(.race-data-panel:not(.is-hidden)) .telemetry-sector-banner {
|
|
2622
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel:has(.race-data-panel:not(.is-hidden)) .telemetry-sector-banner {
|
|
1857
2623
|
bottom: 8.3rem;
|
|
1858
2624
|
}
|
|
1859
2625
|
|
|
1860
|
-
.telemetry-sector-banner__copy {
|
|
2626
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-banner__copy {
|
|
1861
2627
|
min-width: 0;
|
|
1862
2628
|
padding: 0.28rem 0.35rem;
|
|
1863
2629
|
text-transform: uppercase;
|
|
1864
2630
|
}
|
|
1865
2631
|
|
|
1866
|
-
.telemetry-sector-banner__copy span {
|
|
2632
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-banner__copy span {
|
|
1867
2633
|
display: block;
|
|
1868
2634
|
color: var(--sector-banner-color);
|
|
1869
2635
|
font-family: var(--font-mono);
|
|
@@ -1872,12 +2638,12 @@
|
|
|
1872
2638
|
letter-spacing: 0.14em;
|
|
1873
2639
|
}
|
|
1874
2640
|
|
|
1875
|
-
.telemetry-sector-banner__copy b {
|
|
2641
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-banner__copy b {
|
|
1876
2642
|
color: inherit;
|
|
1877
2643
|
font: inherit;
|
|
1878
2644
|
}
|
|
1879
2645
|
|
|
1880
|
-
.telemetry-sector-banner__copy strong {
|
|
2646
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-banner__copy strong {
|
|
1881
2647
|
display: block;
|
|
1882
2648
|
margin-top: 0.2rem;
|
|
1883
2649
|
overflow: hidden;
|
|
@@ -1888,7 +2654,7 @@
|
|
|
1888
2654
|
white-space: nowrap;
|
|
1889
2655
|
}
|
|
1890
2656
|
|
|
1891
|
-
.telemetry-sector-banner__copy em {
|
|
2657
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-banner__copy em {
|
|
1892
2658
|
display: block;
|
|
1893
2659
|
margin-top: 0.28rem;
|
|
1894
2660
|
color: rgba(244, 247, 251, 0.68);
|
|
@@ -1899,15 +2665,15 @@
|
|
|
1899
2665
|
letter-spacing: 0.12em;
|
|
1900
2666
|
}
|
|
1901
2667
|
|
|
1902
|
-
.telemetry-sector-banner__bars {
|
|
2668
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-banner__bars {
|
|
1903
2669
|
align-self: stretch;
|
|
1904
2670
|
display: grid;
|
|
1905
2671
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
1906
2672
|
gap: 0.32rem;
|
|
1907
2673
|
}
|
|
1908
2674
|
|
|
1909
|
-
.telemetry-lap-table,
|
|
1910
|
-
.telemetry-sector-table {
|
|
2675
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-lap-table,
|
|
2676
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-table {
|
|
1911
2677
|
width: 100%;
|
|
1912
2678
|
min-width: 0;
|
|
1913
2679
|
table-layout: fixed;
|
|
@@ -1917,20 +2683,20 @@
|
|
|
1917
2683
|
font-family: var(--font-mono);
|
|
1918
2684
|
}
|
|
1919
2685
|
|
|
1920
|
-
.telemetry-lap-table tr,
|
|
1921
|
-
.telemetry-sector-table tr {
|
|
2686
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-lap-table tr,
|
|
2687
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-table tr {
|
|
1922
2688
|
border-bottom: 1px solid rgba(255, 255, 255, 0.075);
|
|
1923
2689
|
}
|
|
1924
2690
|
|
|
1925
|
-
.telemetry-lap-table tr:last-child,
|
|
1926
|
-
.telemetry-sector-table tr:last-child {
|
|
2691
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-lap-table tr:last-child,
|
|
2692
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-table tr:last-child {
|
|
1927
2693
|
border-bottom: 0;
|
|
1928
2694
|
}
|
|
1929
2695
|
|
|
1930
|
-
.telemetry-lap-table th,
|
|
1931
|
-
.telemetry-lap-table td,
|
|
1932
|
-
.telemetry-sector-table th,
|
|
1933
|
-
.telemetry-sector-table td {
|
|
2696
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-lap-table th,
|
|
2697
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-lap-table td,
|
|
2698
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-table th,
|
|
2699
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-table td {
|
|
1934
2700
|
overflow: hidden;
|
|
1935
2701
|
padding: 0.55rem 0.5rem;
|
|
1936
2702
|
font-size: 0.68rem;
|
|
@@ -1940,8 +2706,8 @@
|
|
|
1940
2706
|
white-space: nowrap;
|
|
1941
2707
|
}
|
|
1942
2708
|
|
|
1943
|
-
.telemetry-lap-table th,
|
|
1944
|
-
.telemetry-sector-table th {
|
|
2709
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-lap-table th,
|
|
2710
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-table th {
|
|
1945
2711
|
color: var(--muted);
|
|
1946
2712
|
font-weight: 800;
|
|
1947
2713
|
letter-spacing: 0.09em;
|
|
@@ -1949,20 +2715,20 @@
|
|
|
1949
2715
|
text-transform: uppercase;
|
|
1950
2716
|
}
|
|
1951
2717
|
|
|
1952
|
-
.telemetry-lap-table td,
|
|
1953
|
-
.telemetry-sector-table td {
|
|
2718
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-lap-table td,
|
|
2719
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-table td {
|
|
1954
2720
|
color: var(--text);
|
|
1955
2721
|
font-weight: 900;
|
|
1956
2722
|
}
|
|
1957
2723
|
|
|
1958
|
-
.car-overview {
|
|
2724
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview {
|
|
1959
2725
|
position: relative;
|
|
1960
2726
|
margin-top: 1rem;
|
|
1961
2727
|
padding-top: 0.85rem;
|
|
1962
2728
|
border-top: 1px solid var(--line);
|
|
1963
2729
|
}
|
|
1964
2730
|
|
|
1965
|
-
.car-overview-header {
|
|
2731
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-header {
|
|
1966
2732
|
display: flex;
|
|
1967
2733
|
align-items: center;
|
|
1968
2734
|
justify-content: space-between;
|
|
@@ -1971,7 +2737,7 @@
|
|
|
1971
2737
|
text-transform: uppercase;
|
|
1972
2738
|
}
|
|
1973
2739
|
|
|
1974
|
-
.car-overview-header span {
|
|
2740
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-header span {
|
|
1975
2741
|
color: var(--muted);
|
|
1976
2742
|
font-family: var(--font-mono);
|
|
1977
2743
|
font-size: 0.64rem;
|
|
@@ -1979,23 +2745,23 @@
|
|
|
1979
2745
|
letter-spacing: 0.12em;
|
|
1980
2746
|
}
|
|
1981
2747
|
|
|
1982
|
-
.car-overview-header strong {
|
|
2748
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-header strong {
|
|
1983
2749
|
color: var(--driver-color, var(--red));
|
|
1984
2750
|
font-family: var(--font-mono);
|
|
1985
2751
|
font-size: 0.72rem;
|
|
1986
2752
|
letter-spacing: 0.08em;
|
|
1987
2753
|
}
|
|
1988
2754
|
|
|
1989
|
-
.car-overview-toggle {
|
|
2755
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-toggle {
|
|
1990
2756
|
display: grid;
|
|
1991
2757
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
1992
2758
|
gap: 0.35rem;
|
|
1993
2759
|
margin-bottom: 0.7rem;
|
|
1994
2760
|
}
|
|
1995
2761
|
|
|
1996
|
-
.car-overview-toggle button {
|
|
2762
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-toggle button {
|
|
1997
2763
|
min-width: 0;
|
|
1998
|
-
min-height:
|
|
2764
|
+
min-height: 44px;
|
|
1999
2765
|
color: var(--muted);
|
|
2000
2766
|
font-family: var(--font-mono);
|
|
2001
2767
|
font-size: 0.68rem;
|
|
@@ -2007,14 +2773,14 @@
|
|
|
2007
2773
|
cursor: pointer;
|
|
2008
2774
|
}
|
|
2009
2775
|
|
|
2010
|
-
.car-overview-toggle button.is-active,
|
|
2011
|
-
.car-overview-toggle button[aria-pressed='true'] {
|
|
2776
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-toggle button.is-active,
|
|
2777
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-toggle button[aria-pressed='true'] {
|
|
2012
2778
|
color: #fff;
|
|
2013
2779
|
background: color-mix(in srgb, var(--driver-color, var(--red)) 30%, rgba(255, 255, 255, 0.075));
|
|
2014
2780
|
border-color: color-mix(in srgb, var(--driver-color, var(--red)) 72%, rgba(255, 255, 255, 0.18));
|
|
2015
2781
|
}
|
|
2016
2782
|
|
|
2017
|
-
.car-overview-diagram {
|
|
2783
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-diagram {
|
|
2018
2784
|
--arrow-line: color-mix(in srgb, var(--driver-color, var(--red)) 72%, rgba(255, 255, 255, 0.36));
|
|
2019
2785
|
position: relative;
|
|
2020
2786
|
display: grid;
|
|
@@ -2030,7 +2796,7 @@
|
|
|
2030
2796
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
2031
2797
|
}
|
|
2032
2798
|
|
|
2033
|
-
.car-overview-diagram::before {
|
|
2799
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-diagram::before {
|
|
2034
2800
|
content: '';
|
|
2035
2801
|
position: absolute;
|
|
2036
2802
|
inset: 0.55rem;
|
|
@@ -2043,7 +2809,7 @@
|
|
|
2043
2809
|
opacity: 0.62;
|
|
2044
2810
|
}
|
|
2045
2811
|
|
|
2046
|
-
.car-overview-diagram::after {
|
|
2812
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-diagram::after {
|
|
2047
2813
|
content: '';
|
|
2048
2814
|
position: absolute;
|
|
2049
2815
|
inset: 0;
|
|
@@ -2056,7 +2822,7 @@
|
|
|
2056
2822
|
opacity: 0.44;
|
|
2057
2823
|
}
|
|
2058
2824
|
|
|
2059
|
-
.car-overview-car {
|
|
2825
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-car {
|
|
2060
2826
|
position: relative;
|
|
2061
2827
|
z-index: 1;
|
|
2062
2828
|
grid-column: 1 / -1;
|
|
@@ -2071,7 +2837,7 @@
|
|
|
2071
2837
|
transform: skewX(-10deg);
|
|
2072
2838
|
}
|
|
2073
2839
|
|
|
2074
|
-
.car-overview-car::before {
|
|
2840
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-car::before {
|
|
2075
2841
|
content: '';
|
|
2076
2842
|
position: absolute;
|
|
2077
2843
|
inset: 0;
|
|
@@ -2085,7 +2851,7 @@
|
|
|
2085
2851
|
0 0 28px color-mix(in srgb, var(--driver-color, var(--red)) 44%, transparent);
|
|
2086
2852
|
}
|
|
2087
2853
|
|
|
2088
|
-
.car-overview-car::after {
|
|
2854
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-car::after {
|
|
2089
2855
|
content: '';
|
|
2090
2856
|
position: absolute;
|
|
2091
2857
|
inset: 0.58rem 0.86rem;
|
|
@@ -2096,7 +2862,7 @@
|
|
|
2096
2862
|
opacity: 0.34;
|
|
2097
2863
|
}
|
|
2098
2864
|
|
|
2099
|
-
.car-overview-car-image {
|
|
2865
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-car-image {
|
|
2100
2866
|
position: absolute;
|
|
2101
2867
|
z-index: 2;
|
|
2102
2868
|
inset: 0.25rem 0.2rem;
|
|
@@ -2110,9 +2876,9 @@
|
|
|
2110
2876
|
transform: skewX(10deg);
|
|
2111
2877
|
}
|
|
2112
2878
|
|
|
2113
|
-
.car-overview-icon,
|
|
2114
|
-
.car-overview-number,
|
|
2115
|
-
.car-overview-core-stat {
|
|
2879
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-icon,
|
|
2880
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-number,
|
|
2881
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-core-stat {
|
|
2116
2882
|
position: relative;
|
|
2117
2883
|
z-index: 3;
|
|
2118
2884
|
transform: skewX(10deg);
|
|
@@ -2120,12 +2886,12 @@
|
|
|
2120
2886
|
font-weight: 900;
|
|
2121
2887
|
}
|
|
2122
2888
|
|
|
2123
|
-
.car-overview-icon {
|
|
2889
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-icon {
|
|
2124
2890
|
font-size: 0.86rem;
|
|
2125
2891
|
letter-spacing: -0.07em;
|
|
2126
2892
|
}
|
|
2127
2893
|
|
|
2128
|
-
.car-overview-number {
|
|
2894
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-number {
|
|
2129
2895
|
position: absolute;
|
|
2130
2896
|
right: 0.42rem;
|
|
2131
2897
|
bottom: 0.18rem;
|
|
@@ -2133,7 +2899,7 @@
|
|
|
2133
2899
|
font-size: 0.54rem;
|
|
2134
2900
|
}
|
|
2135
2901
|
|
|
2136
|
-
.car-overview-core-stat {
|
|
2902
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-core-stat {
|
|
2137
2903
|
position: absolute;
|
|
2138
2904
|
left: 50%;
|
|
2139
2905
|
bottom: -1.05rem;
|
|
@@ -2144,7 +2910,7 @@
|
|
|
2144
2910
|
transform: translateX(-50%) skewX(10deg);
|
|
2145
2911
|
}
|
|
2146
2912
|
|
|
2147
|
-
.car-overview-cell {
|
|
2913
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-cell {
|
|
2148
2914
|
position: relative;
|
|
2149
2915
|
z-index: 1;
|
|
2150
2916
|
min-width: 0;
|
|
@@ -2154,7 +2920,7 @@
|
|
|
2154
2920
|
box-shadow: inset 3px 0 0 color-mix(in srgb, var(--driver-color, var(--red)) 78%, transparent);
|
|
2155
2921
|
}
|
|
2156
2922
|
|
|
2157
|
-
.car-overview-cell::after {
|
|
2923
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-cell::after {
|
|
2158
2924
|
content: '';
|
|
2159
2925
|
position: absolute;
|
|
2160
2926
|
width: 0.42rem;
|
|
@@ -2163,76 +2929,76 @@
|
|
|
2163
2929
|
transform: rotate(45deg);
|
|
2164
2930
|
}
|
|
2165
2931
|
|
|
2166
|
-
.car-overview-cell--slot-1 {
|
|
2932
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-1 {
|
|
2167
2933
|
grid-column: 1;
|
|
2168
2934
|
grid-row: 1;
|
|
2169
2935
|
justify-self: stretch;
|
|
2170
2936
|
width: auto;
|
|
2171
2937
|
}
|
|
2172
2938
|
|
|
2173
|
-
.car-overview-cell--slot-1::after,
|
|
2174
|
-
.car-overview-cell--slot-2::after {
|
|
2939
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-1::after,
|
|
2940
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-2::after {
|
|
2175
2941
|
right: 50%;
|
|
2176
2942
|
bottom: -0.25rem;
|
|
2177
2943
|
transform: translateX(50%) rotate(45deg);
|
|
2178
2944
|
}
|
|
2179
2945
|
|
|
2180
|
-
.car-overview-cell--slot-2 {
|
|
2946
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-2 {
|
|
2181
2947
|
grid-column: 2;
|
|
2182
2948
|
grid-row: 1;
|
|
2183
2949
|
justify-self: stretch;
|
|
2184
2950
|
width: auto;
|
|
2185
2951
|
}
|
|
2186
2952
|
|
|
2187
|
-
.car-overview-cell--slot-3 {
|
|
2953
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-3 {
|
|
2188
2954
|
grid-column: 1;
|
|
2189
2955
|
grid-row: 2;
|
|
2190
2956
|
justify-self: stretch;
|
|
2191
2957
|
width: auto;
|
|
2192
2958
|
}
|
|
2193
2959
|
|
|
2194
|
-
.car-overview-cell--slot-4 {
|
|
2960
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-4 {
|
|
2195
2961
|
grid-column: 2;
|
|
2196
2962
|
grid-row: 2;
|
|
2197
2963
|
justify-self: stretch;
|
|
2198
2964
|
width: auto;
|
|
2199
2965
|
}
|
|
2200
2966
|
|
|
2201
|
-
.car-overview-cell--slot-3::after,
|
|
2202
|
-
.car-overview-cell--slot-4::after {
|
|
2967
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-3::after,
|
|
2968
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-4::after {
|
|
2203
2969
|
top: 50%;
|
|
2204
2970
|
transform: translateY(-50%) rotate(45deg);
|
|
2205
2971
|
}
|
|
2206
2972
|
|
|
2207
|
-
.car-overview-cell--slot-3::after {
|
|
2973
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-3::after {
|
|
2208
2974
|
right: -0.25rem;
|
|
2209
2975
|
}
|
|
2210
2976
|
|
|
2211
|
-
.car-overview-cell--slot-4::after {
|
|
2977
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-4::after {
|
|
2212
2978
|
left: -0.25rem;
|
|
2213
2979
|
}
|
|
2214
2980
|
|
|
2215
|
-
.car-overview-cell--slot-5,
|
|
2216
|
-
.car-overview-cell--slot-6 {
|
|
2981
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-5,
|
|
2982
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-6 {
|
|
2217
2983
|
grid-row: 4;
|
|
2218
2984
|
}
|
|
2219
2985
|
|
|
2220
|
-
.car-overview-cell--slot-5 {
|
|
2986
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-5 {
|
|
2221
2987
|
grid-column: 1;
|
|
2222
2988
|
}
|
|
2223
2989
|
|
|
2224
|
-
.car-overview-cell--slot-6 {
|
|
2990
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-6 {
|
|
2225
2991
|
grid-column: 2;
|
|
2226
2992
|
}
|
|
2227
2993
|
|
|
2228
|
-
.car-overview-cell--slot-5::after,
|
|
2229
|
-
.car-overview-cell--slot-6::after {
|
|
2994
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-5::after,
|
|
2995
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-6::after {
|
|
2230
2996
|
right: 50%;
|
|
2231
2997
|
top: -0.25rem;
|
|
2232
2998
|
transform: translateX(50%) rotate(45deg);
|
|
2233
2999
|
}
|
|
2234
3000
|
|
|
2235
|
-
.car-overview-cell--slot-7 {
|
|
3001
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-7 {
|
|
2236
3002
|
grid-column: 1 / -1;
|
|
2237
3003
|
grid-row: 5;
|
|
2238
3004
|
justify-self: stretch;
|
|
@@ -2243,21 +3009,21 @@
|
|
|
2243
3009
|
width: auto;
|
|
2244
3010
|
}
|
|
2245
3011
|
|
|
2246
|
-
.car-overview-cell--slot-7::after {
|
|
3012
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-7::after {
|
|
2247
3013
|
left: 50%;
|
|
2248
3014
|
top: -0.25rem;
|
|
2249
3015
|
transform: translateX(-50%) rotate(45deg);
|
|
2250
3016
|
}
|
|
2251
3017
|
|
|
2252
|
-
.car-overview-cell--slot-7 > span {
|
|
3018
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-7 > span {
|
|
2253
3019
|
margin-bottom: 0;
|
|
2254
3020
|
}
|
|
2255
3021
|
|
|
2256
|
-
.car-overview-cell--slot-7 strong {
|
|
3022
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-7 strong {
|
|
2257
3023
|
text-align: right;
|
|
2258
3024
|
}
|
|
2259
3025
|
|
|
2260
|
-
.car-overview-cell > span {
|
|
3026
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-cell > span {
|
|
2261
3027
|
display: block;
|
|
2262
3028
|
margin-bottom: 0.18rem;
|
|
2263
3029
|
color: var(--muted);
|
|
@@ -2268,7 +3034,7 @@
|
|
|
2268
3034
|
text-transform: uppercase;
|
|
2269
3035
|
}
|
|
2270
3036
|
|
|
2271
|
-
.car-overview-cell strong {
|
|
3037
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-cell strong {
|
|
2272
3038
|
display: block;
|
|
2273
3039
|
overflow: hidden;
|
|
2274
3040
|
color: #fff;
|
|
@@ -2280,7 +3046,7 @@
|
|
|
2280
3046
|
white-space: nowrap;
|
|
2281
3047
|
}
|
|
2282
3048
|
|
|
2283
|
-
.car-overview-cell strong span {
|
|
3049
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-cell strong span {
|
|
2284
3050
|
display: inline;
|
|
2285
3051
|
margin: 0;
|
|
2286
3052
|
color: inherit;
|
|
@@ -2290,65 +3056,74 @@
|
|
|
2290
3056
|
}
|
|
2291
3057
|
|
|
2292
3058
|
@media (max-width: 1120px) {
|
|
2293
|
-
.sim-grid,
|
|
2294
|
-
|
|
2295
|
-
|
|
3059
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-grid,
|
|
3060
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .sim-grid,
|
|
3061
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay.sim-grid {
|
|
2296
3062
|
grid-template-columns: 1fr;
|
|
2297
3063
|
}
|
|
2298
3064
|
|
|
2299
|
-
.sim-canvas-panel,
|
|
2300
|
-
|
|
3065
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel,
|
|
3066
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .sim-canvas-panel {
|
|
2301
3067
|
min-height: 62svh;
|
|
2302
3068
|
grid-column: auto;
|
|
2303
3069
|
order: -1;
|
|
2304
3070
|
}
|
|
2305
3071
|
|
|
2306
|
-
.sim-shell--left-tower-overlay.sim-shell--timing-expand-race-view .sim-canvas-panel {
|
|
3072
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay.sim-shell--timing-expand-race-view .sim-canvas-panel {
|
|
2307
3073
|
min-height: 62svh;
|
|
2308
3074
|
}
|
|
2309
3075
|
|
|
2310
|
-
.sim-shell--left-tower-overlay .sim-timing {
|
|
3076
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .sim-timing {
|
|
2311
3077
|
position: static;
|
|
2312
3078
|
width: auto;
|
|
2313
3079
|
max-width: 390px;
|
|
2314
3080
|
clip-path: none;
|
|
2315
3081
|
}
|
|
2316
3082
|
|
|
2317
|
-
.sim-shell--left-tower-overlay .sim-
|
|
3083
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .sim-timing.broadcast-tower {
|
|
3084
|
+
position: relative;
|
|
3085
|
+
inset: auto;
|
|
3086
|
+
width: min(100%, var(--timing-board-max-width));
|
|
3087
|
+
max-width: 390px;
|
|
3088
|
+
height: auto;
|
|
3089
|
+
clip-path: none;
|
|
3090
|
+
}
|
|
3091
|
+
|
|
3092
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .sim-canvas-panel > .camera-controls {
|
|
2318
3093
|
left: 1rem;
|
|
2319
3094
|
max-width: calc(100% - 2rem);
|
|
2320
3095
|
}
|
|
2321
3096
|
|
|
2322
|
-
.sim-shell--left-tower-overlay .start-lights {
|
|
3097
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .start-lights {
|
|
2323
3098
|
left: 50%;
|
|
2324
3099
|
}
|
|
2325
3100
|
|
|
2326
|
-
.sim-shell--left-tower-overlay .race-data-panel {
|
|
3101
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .race-data-panel {
|
|
2327
3102
|
--race-data-banner-left: 50%;
|
|
2328
3103
|
--race-data-banner-width: min(1080px, calc(100% - 1.5rem));
|
|
2329
3104
|
left: 50%;
|
|
2330
3105
|
}
|
|
2331
3106
|
|
|
2332
|
-
.sim-timing,
|
|
2333
|
-
|
|
3107
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-timing,
|
|
3108
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-telemetry {
|
|
2334
3109
|
min-height: auto;
|
|
2335
3110
|
}
|
|
2336
3111
|
|
|
2337
|
-
.sim-telemetry {
|
|
3112
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-telemetry:not(.telemetry-component) {
|
|
2338
3113
|
display: grid;
|
|
2339
3114
|
grid-template-columns: minmax(0, 0.9fr) minmax(280px, 1.1fr);
|
|
2340
3115
|
gap: 1rem;
|
|
2341
3116
|
}
|
|
2342
3117
|
|
|
2343
|
-
.telemetry-header {
|
|
3118
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-header {
|
|
2344
3119
|
grid-column: 1 / -1;
|
|
2345
3120
|
}
|
|
2346
3121
|
|
|
2347
|
-
.telemetry-grid {
|
|
3122
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-grid {
|
|
2348
3123
|
margin-top: 0;
|
|
2349
3124
|
}
|
|
2350
3125
|
|
|
2351
|
-
.car-overview {
|
|
3126
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview {
|
|
2352
3127
|
margin-top: 0;
|
|
2353
3128
|
padding-top: 0;
|
|
2354
3129
|
border-top: 0;
|
|
@@ -2356,256 +3131,530 @@
|
|
|
2356
3131
|
}
|
|
2357
3132
|
|
|
2358
3133
|
@media (max-width: 760px) {
|
|
2359
|
-
.sim-shell {
|
|
3134
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-shell {
|
|
2360
3135
|
padding: 0.75rem;
|
|
2361
3136
|
}
|
|
2362
3137
|
|
|
2363
|
-
.sim-grid,
|
|
2364
|
-
|
|
2365
|
-
|
|
3138
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-grid,
|
|
3139
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .sim-grid,
|
|
3140
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay.sim-grid {
|
|
2366
3141
|
grid-template-columns: minmax(0, 1fr);
|
|
2367
3142
|
}
|
|
2368
3143
|
|
|
2369
|
-
.sim-shell--left-tower-overlay .sim-timing,
|
|
2370
|
-
|
|
3144
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .sim-timing,
|
|
3145
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--with-timing-tower > .sim-timing {
|
|
2371
3146
|
width: min(100%, var(--timing-board-max-width));
|
|
2372
3147
|
}
|
|
2373
3148
|
|
|
2374
|
-
.sim-shell--left-tower-overlay .sim-timing {
|
|
3149
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .sim-timing {
|
|
2375
3150
|
width: 100%;
|
|
2376
3151
|
max-width: 100%;
|
|
2377
3152
|
}
|
|
2378
3153
|
|
|
2379
|
-
.sim-topbar {
|
|
3154
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-topbar {
|
|
2380
3155
|
grid-template-columns: 1fr;
|
|
2381
3156
|
align-items: stretch;
|
|
2382
3157
|
}
|
|
2383
3158
|
|
|
2384
|
-
.sim-controls,
|
|
2385
|
-
|
|
3159
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-controls,
|
|
3160
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-backlink {
|
|
2386
3161
|
justify-content: stretch;
|
|
2387
3162
|
}
|
|
2388
3163
|
|
|
2389
|
-
.sim-controls {
|
|
3164
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-controls {
|
|
2390
3165
|
display: grid;
|
|
2391
3166
|
grid-template-columns: 1fr 1fr;
|
|
2392
3167
|
}
|
|
2393
3168
|
|
|
2394
|
-
.sim-control,
|
|
2395
|
-
|
|
3169
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-control,
|
|
3170
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-backlink {
|
|
2396
3171
|
text-align: center;
|
|
2397
3172
|
}
|
|
2398
3173
|
|
|
2399
|
-
.sim-canvas-panel {
|
|
3174
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel {
|
|
2400
3175
|
min-height: 58svh;
|
|
2401
3176
|
}
|
|
2402
3177
|
|
|
2403
|
-
.race-telemetry-drawer {
|
|
2404
|
-
--telemetry-drawer-width:
|
|
3178
|
+
:where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer--responsive-narrow {
|
|
3179
|
+
--telemetry-drawer-width: min(88%, 360px);
|
|
2405
3180
|
}
|
|
2406
3181
|
|
|
2407
|
-
.race-telemetry-drawer__race,
|
|
2408
|
-
|
|
3182
|
+
:where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer--responsive-narrow .race-telemetry-drawer__race,
|
|
3183
|
+
:where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer--responsive-narrow.is-telemetry-open .race-telemetry-drawer__race {
|
|
2409
3184
|
margin-right: 0;
|
|
3185
|
+
padding-right: 0;
|
|
2410
3186
|
}
|
|
2411
3187
|
|
|
2412
|
-
.race-telemetry-drawer.is-telemetry-open .race-telemetry-drawer__race {
|
|
2413
|
-
margin-bottom:
|
|
3188
|
+
:where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer--responsive-narrow.is-telemetry-open .race-telemetry-drawer__race {
|
|
3189
|
+
margin-bottom: 0;
|
|
2414
3190
|
}
|
|
2415
3191
|
|
|
2416
|
-
.telemetry-drawer {
|
|
2417
|
-
top:
|
|
2418
|
-
|
|
2419
|
-
|
|
2420
|
-
|
|
2421
|
-
|
|
3192
|
+
:where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer--responsive-narrow .telemetry-drawer {
|
|
3193
|
+
top: 0.75rem;
|
|
3194
|
+
right: 0.75rem;
|
|
3195
|
+
bottom: 0.75rem;
|
|
3196
|
+
width: var(--telemetry-drawer-width);
|
|
3197
|
+
height: auto;
|
|
3198
|
+
border-left: 1px solid var(--line);
|
|
3199
|
+
border-top: 0;
|
|
3200
|
+
clip-path: none;
|
|
3201
|
+
transform: translate3d(calc(100% + 1rem), 0, 0);
|
|
3202
|
+
box-shadow: -18px 0 40px rgba(0, 0, 0, 0.38);
|
|
3203
|
+
transition:
|
|
3204
|
+
opacity 180ms ease,
|
|
3205
|
+
transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
2422
3206
|
}
|
|
2423
3207
|
|
|
2424
|
-
.race-telemetry-drawer.is-telemetry-open .telemetry-drawer {
|
|
3208
|
+
:where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer--responsive-narrow.is-telemetry-open .telemetry-drawer {
|
|
2425
3209
|
transform: translate3d(0, 0, 0);
|
|
2426
3210
|
}
|
|
2427
3211
|
|
|
2428
|
-
.camera-controls {
|
|
3212
|
+
:where(.f1-sim-component, .f1-sim-component *).camera-controls {
|
|
2429
3213
|
max-width: calc(100% - 1.5rem);
|
|
2430
3214
|
}
|
|
2431
3215
|
|
|
2432
|
-
.race-data-panel {
|
|
3216
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-panel {
|
|
2433
3217
|
left: 50%;
|
|
2434
|
-
bottom:
|
|
2435
|
-
grid-template-columns: minmax(0, 1fr)
|
|
3218
|
+
bottom: 1.1rem;
|
|
3219
|
+
grid-template-columns: minmax(4.6rem, 0.26fr) minmax(0, 1fr) minmax(6.5rem, 7rem);
|
|
2436
3220
|
width: calc(100% - 1.5rem);
|
|
2437
3221
|
min-height: 88px;
|
|
2438
3222
|
}
|
|
2439
3223
|
|
|
2440
|
-
.telemetry-sector-banner {
|
|
3224
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-sector-banner {
|
|
2441
3225
|
right: 0.75rem;
|
|
2442
3226
|
bottom: 0.75rem;
|
|
2443
3227
|
grid-template-columns: 1fr;
|
|
2444
3228
|
width: calc(100% - 1.5rem);
|
|
2445
3229
|
}
|
|
2446
3230
|
|
|
2447
|
-
.sim-canvas-panel:has(.race-data-panel:not(.is-hidden)) .telemetry-sector-banner {
|
|
3231
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel:has(.race-data-panel:not(.is-hidden)) .telemetry-sector-banner {
|
|
2448
3232
|
bottom: 8rem;
|
|
2449
3233
|
}
|
|
2450
3234
|
|
|
2451
|
-
.race-data-panel.is-radio-mode {
|
|
3235
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-panel.is-radio-mode {
|
|
2452
3236
|
grid-template-columns: minmax(0, 1fr);
|
|
2453
3237
|
}
|
|
2454
3238
|
|
|
2455
|
-
.race-data-panel--with-telemetry {
|
|
2456
|
-
|
|
3239
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-panel--with-telemetry {
|
|
3240
|
+
--race-data-action-rail: 0.45rem;
|
|
3241
|
+
grid-template-columns: minmax(4.6rem, 0.26fr) minmax(0, 1fr) minmax(6.5rem, 7rem);
|
|
3242
|
+
grid-template-rows: auto auto;
|
|
3243
|
+
}
|
|
3244
|
+
|
|
3245
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-panel:not(.race-data-panel--with-telemetry):not(.is-radio-mode) {
|
|
3246
|
+
grid-template-columns: minmax(4.2rem, 0.24fr) minmax(0, 1fr) minmax(8.85rem, 8.85rem);
|
|
2457
3247
|
}
|
|
2458
3248
|
|
|
2459
|
-
.race-data-copy {
|
|
3249
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-copy {
|
|
2460
3250
|
grid-column: 2;
|
|
2461
|
-
padding: 0.78rem 0.
|
|
3251
|
+
padding: 0.78rem 0.7rem 0.85rem 0.45rem;
|
|
2462
3252
|
}
|
|
2463
3253
|
|
|
2464
|
-
.race-data-panel--with-telemetry .race-data-copy {
|
|
3254
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-panel--with-telemetry .race-data-copy {
|
|
2465
3255
|
grid-column: 2;
|
|
2466
3256
|
padding-bottom: 0.35rem;
|
|
2467
3257
|
}
|
|
2468
3258
|
|
|
2469
|
-
.race-data-telemetry {
|
|
3259
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-telemetry {
|
|
2470
3260
|
grid-column: 1 / -1;
|
|
2471
3261
|
grid-row: 2;
|
|
2472
|
-
|
|
3262
|
+
align-self: start;
|
|
3263
|
+
grid-template-rows: max-content;
|
|
3264
|
+
padding: 0 var(--race-data-action-rail, 0.45rem) 0.75rem 0.95rem;
|
|
2473
3265
|
border-left: 0;
|
|
2474
3266
|
}
|
|
2475
3267
|
|
|
2476
|
-
.
|
|
2477
|
-
|
|
3268
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-telemetry__bars {
|
|
3269
|
+
align-items: start;
|
|
3270
|
+
gap: 0.32rem;
|
|
3271
|
+
}
|
|
3272
|
+
|
|
3273
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-sector-bar {
|
|
3274
|
+
min-height: 2.75rem;
|
|
3275
|
+
padding: 0.42rem 0.42rem 0.38rem;
|
|
3276
|
+
}
|
|
3277
|
+
|
|
3278
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-sector-bar span {
|
|
3279
|
+
margin-bottom: 0.22rem;
|
|
3280
|
+
}
|
|
3281
|
+
|
|
3282
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-sector-bar strong {
|
|
3283
|
+
font-size: 0.68rem;
|
|
2478
3284
|
}
|
|
2479
3285
|
|
|
2480
|
-
.race-data-panel
|
|
3286
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-panel--with-telemetry .race-data-link {
|
|
3287
|
+
grid-column: 3;
|
|
3288
|
+
grid-row: 1;
|
|
3289
|
+
}
|
|
3290
|
+
|
|
3291
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-panel.is-radio-mode .race-data-copy {
|
|
2481
3292
|
grid-column: 1;
|
|
2482
3293
|
padding-left: 0.95rem;
|
|
2483
3294
|
}
|
|
2484
3295
|
|
|
2485
|
-
.race-data-number {
|
|
3296
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-number {
|
|
2486
3297
|
grid-column: 1;
|
|
2487
3298
|
min-width: 4.8rem;
|
|
2488
3299
|
height: auto;
|
|
2489
|
-
|
|
3300
|
+
padding-inline: 0.45rem;
|
|
3301
|
+
font-size: clamp(2.9rem, 11cqw, 3.4rem);
|
|
2490
3302
|
}
|
|
2491
3303
|
|
|
2492
|
-
.race-data-link
|
|
2493
|
-
|
|
2494
|
-
|
|
2495
|
-
|
|
3304
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-link,
|
|
3305
|
+
.f1-sim-component .race-data-link,
|
|
3306
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-shell--left-tower-overlay .race-data-link,
|
|
3307
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--with-timing-tower .race-data-link {
|
|
3308
|
+
grid-column: 3;
|
|
3309
|
+
grid-row: 1;
|
|
3310
|
+
min-width: 5.4rem;
|
|
3311
|
+
width: min(5.6rem, calc(100% - 0.45rem));
|
|
3312
|
+
max-width: 5.6rem;
|
|
3313
|
+
margin: 0 var(--race-data-action-rail, 0.45rem) 0 0;
|
|
3314
|
+
padding-inline: 0.5rem;
|
|
3315
|
+
min-height: 44px;
|
|
3316
|
+
font-size: 0.56rem;
|
|
3317
|
+
letter-spacing: 0.055em;
|
|
2496
3318
|
}
|
|
2497
3319
|
|
|
2498
|
-
.race-data-dismiss {
|
|
2499
|
-
top: 0
|
|
2500
|
-
right: 0.
|
|
2501
|
-
width:
|
|
2502
|
-
height:
|
|
3320
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-dismiss {
|
|
3321
|
+
top: 0;
|
|
3322
|
+
right: var(--race-data-action-rail, 0.45rem);
|
|
3323
|
+
width: 44px;
|
|
3324
|
+
height: 44px;
|
|
2503
3325
|
}
|
|
2504
3326
|
|
|
2505
|
-
.sim-telemetry {
|
|
3327
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-telemetry {
|
|
2506
3328
|
display: block;
|
|
2507
3329
|
}
|
|
2508
3330
|
|
|
2509
|
-
.telemetry-grid {
|
|
3331
|
+
:where(.f1-sim-component, .f1-sim-component *).telemetry-grid {
|
|
2510
3332
|
margin-top: 1rem;
|
|
2511
3333
|
}
|
|
2512
3334
|
|
|
2513
|
-
.car-overview {
|
|
3335
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview {
|
|
2514
3336
|
margin-top: 1rem;
|
|
2515
3337
|
padding-top: 0.85rem;
|
|
2516
3338
|
border-top: 1px solid var(--line);
|
|
2517
3339
|
}
|
|
2518
3340
|
|
|
2519
|
-
.car-overview-diagram {
|
|
3341
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-diagram {
|
|
2520
3342
|
grid-template-columns: 1fr;
|
|
2521
3343
|
grid-template-rows: repeat(2, auto) 5.3rem repeat(4, auto);
|
|
2522
3344
|
}
|
|
2523
3345
|
|
|
2524
|
-
.car-overview-diagram::before {
|
|
3346
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-diagram::before {
|
|
2525
3347
|
background:
|
|
2526
3348
|
linear-gradient(var(--arrow-line), var(--arrow-line)) 50% 18% / 1px 16% no-repeat,
|
|
2527
3349
|
linear-gradient(var(--arrow-line), var(--arrow-line)) 50% 82% / 1px 16% no-repeat;
|
|
2528
3350
|
}
|
|
2529
3351
|
|
|
2530
|
-
.car-overview-cell,
|
|
2531
|
-
|
|
3352
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-cell,
|
|
3353
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-car {
|
|
2532
3354
|
grid-column: 1;
|
|
2533
3355
|
justify-self: stretch;
|
|
2534
3356
|
width: auto;
|
|
2535
3357
|
}
|
|
2536
3358
|
|
|
2537
|
-
.car-overview-cell--slot-1 {
|
|
3359
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-1 {
|
|
2538
3360
|
grid-row: 1;
|
|
2539
3361
|
}
|
|
2540
3362
|
|
|
2541
|
-
.car-overview-cell--slot-2 {
|
|
3363
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-2 {
|
|
2542
3364
|
grid-row: 2;
|
|
2543
3365
|
}
|
|
2544
3366
|
|
|
2545
|
-
.car-overview-car {
|
|
3367
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-car {
|
|
2546
3368
|
grid-row: 3;
|
|
2547
3369
|
justify-self: center;
|
|
2548
3370
|
}
|
|
2549
3371
|
|
|
2550
|
-
.car-overview-cell--slot-3 {
|
|
3372
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-3 {
|
|
2551
3373
|
grid-row: 4;
|
|
2552
3374
|
}
|
|
2553
3375
|
|
|
2554
|
-
.car-overview-cell--slot-4 {
|
|
3376
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-4 {
|
|
2555
3377
|
grid-row: 5;
|
|
2556
3378
|
}
|
|
2557
3379
|
|
|
2558
|
-
.car-overview-cell--slot-5 {
|
|
3380
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-5 {
|
|
2559
3381
|
grid-row: 6;
|
|
2560
3382
|
}
|
|
2561
3383
|
|
|
2562
|
-
.car-overview-cell--slot-6 {
|
|
3384
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-6 {
|
|
2563
3385
|
grid-row: 7;
|
|
2564
3386
|
}
|
|
2565
3387
|
|
|
2566
|
-
.car-overview-cell--slot-7 {
|
|
3388
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-7 {
|
|
2567
3389
|
grid-row: 8;
|
|
2568
3390
|
display: block;
|
|
2569
3391
|
}
|
|
2570
3392
|
|
|
2571
|
-
.car-overview-cell--slot-7 strong {
|
|
3393
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-cell--slot-7 strong {
|
|
2572
3394
|
text-align: left;
|
|
2573
3395
|
}
|
|
2574
3396
|
|
|
2575
|
-
.car-overview-cell::after {
|
|
3397
|
+
:where(.f1-sim-component, .f1-sim-component *).car-overview-cell::after {
|
|
2576
3398
|
display: none;
|
|
2577
3399
|
}
|
|
2578
3400
|
}
|
|
2579
3401
|
|
|
2580
3402
|
@media (max-width: 520px) {
|
|
2581
|
-
.sim-canvas-panel--with-timing-tower {
|
|
2582
|
-
|
|
3403
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower {
|
|
3404
|
+
--race-overlay-banner-clearance: 0px;
|
|
3405
|
+
min-height: max(var(--paddock-race-view-min-height, 620px), var(--timing-board-min-height));
|
|
2583
3406
|
}
|
|
2584
3407
|
|
|
2585
|
-
.sim-canvas-panel--with-timing-tower
|
|
2586
|
-
|
|
2587
|
-
|
|
2588
|
-
|
|
2589
|
-
|
|
2590
|
-
height: min(46svh, 420px);
|
|
2591
|
-
clip-path: none;
|
|
3408
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower.sim-canvas-panel--needs-banner-clearance {
|
|
3409
|
+
min-height: max(
|
|
3410
|
+
calc(var(--paddock-race-view-min-height, 620px) + var(--race-overlay-banner-clearance)),
|
|
3411
|
+
calc(var(--timing-board-min-height) + var(--race-overlay-banner-clearance))
|
|
3412
|
+
);
|
|
2592
3413
|
}
|
|
2593
3414
|
|
|
2594
|
-
.sim-canvas-panel--with-timing-tower > .sim-timing
|
|
2595
|
-
position:
|
|
2596
|
-
|
|
2597
|
-
|
|
2598
|
-
|
|
3415
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .sim-timing {
|
|
3416
|
+
position: absolute;
|
|
3417
|
+
top: 0.75rem;
|
|
3418
|
+
bottom: 0.75rem;
|
|
3419
|
+
left: 0.75rem;
|
|
3420
|
+
width: min(82%, var(--timing-board-max-width));
|
|
3421
|
+
max-width: var(--timing-board-max-width);
|
|
3422
|
+
height: auto;
|
|
3423
|
+
transform: translate3d(calc(-100% - 1rem), 0, 0);
|
|
3424
|
+
opacity: 0;
|
|
3425
|
+
pointer-events: none;
|
|
3426
|
+
clip-path: inset(0 round 1.25rem);
|
|
3427
|
+
transition:
|
|
3428
|
+
opacity 180ms ease,
|
|
3429
|
+
transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
3430
|
+
}
|
|
3431
|
+
|
|
3432
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .sim-timing.broadcast-tower {
|
|
3433
|
+
position: absolute;
|
|
3434
|
+
width: min(82%, var(--timing-board-max-width));
|
|
3435
|
+
max-width: var(--timing-board-max-width);
|
|
3436
|
+
height: auto;
|
|
3437
|
+
}
|
|
3438
|
+
|
|
3439
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower.sim-canvas-panel--needs-banner-clearance > .sim-timing {
|
|
3440
|
+
bottom: var(--race-overlay-banner-clearance);
|
|
3441
|
+
}
|
|
3442
|
+
|
|
3443
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower.is-timing-panel-open > .sim-timing {
|
|
3444
|
+
transform: translate3d(0, 0, 0);
|
|
3445
|
+
opacity: 1;
|
|
3446
|
+
pointer-events: auto;
|
|
3447
|
+
}
|
|
3448
|
+
|
|
3449
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .timing-panel-toggle {
|
|
3450
|
+
display: grid;
|
|
3451
|
+
place-items: center;
|
|
3452
|
+
}
|
|
3453
|
+
|
|
3454
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .camera-controls {
|
|
3455
|
+
left: 0.75rem;
|
|
3456
|
+
top: 4.45rem;
|
|
3457
|
+
max-width: calc(100% - 1.5rem);
|
|
3458
|
+
}
|
|
3459
|
+
|
|
3460
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .start-lights {
|
|
3461
|
+
top: 7.2rem;
|
|
3462
|
+
left: 50%;
|
|
3463
|
+
}
|
|
3464
|
+
|
|
3465
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .steward-message {
|
|
3466
|
+
top: 4.1rem;
|
|
3467
|
+
left: 0.75rem;
|
|
3468
|
+
right: 0.75rem;
|
|
3469
|
+
width: auto;
|
|
3470
|
+
min-width: 0;
|
|
3471
|
+
min-inline-size: 0;
|
|
3472
|
+
max-width: none;
|
|
3473
|
+
max-inline-size: none;
|
|
3474
|
+
grid-template-columns: minmax(4.7rem, max-content) minmax(0, 1fr);
|
|
3475
|
+
align-items: center;
|
|
3476
|
+
gap: 0.18rem 0.62rem;
|
|
3477
|
+
padding: 0.55rem 0.65rem;
|
|
3478
|
+
transform: none;
|
|
3479
|
+
}
|
|
3480
|
+
|
|
3481
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .steward-message.is-hidden {
|
|
3482
|
+
transform: translateY(-0.55rem);
|
|
3483
|
+
}
|
|
3484
|
+
|
|
3485
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .steward-message .steward-message__kicker {
|
|
3486
|
+
min-width: 4.7rem;
|
|
3487
|
+
padding: 0.44rem 0.52rem;
|
|
3488
|
+
font-size: 0.92rem;
|
|
3489
|
+
}
|
|
3490
|
+
|
|
3491
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .steward-message strong {
|
|
3492
|
+
font-size: 0.86rem;
|
|
3493
|
+
}
|
|
3494
|
+
|
|
3495
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .steward-message span:last-child {
|
|
3496
|
+
font-size: 0.66rem;
|
|
3497
|
+
}
|
|
3498
|
+
}
|
|
3499
|
+
|
|
3500
|
+
@container (max-width: 520px) {
|
|
3501
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower {
|
|
3502
|
+
--race-overlay-banner-clearance: 0px;
|
|
3503
|
+
min-height: max(var(--paddock-race-view-min-height, 620px), var(--timing-board-min-height));
|
|
3504
|
+
}
|
|
3505
|
+
|
|
3506
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower.sim-canvas-panel--needs-banner-clearance {
|
|
3507
|
+
min-height: max(
|
|
3508
|
+
calc(var(--paddock-race-view-min-height, 620px) + var(--race-overlay-banner-clearance)),
|
|
3509
|
+
calc(var(--timing-board-min-height) + var(--race-overlay-banner-clearance))
|
|
3510
|
+
);
|
|
3511
|
+
}
|
|
3512
|
+
|
|
3513
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .sim-timing {
|
|
3514
|
+
position: absolute;
|
|
3515
|
+
top: 0.75rem;
|
|
3516
|
+
bottom: 0.75rem;
|
|
3517
|
+
left: 0.75rem;
|
|
3518
|
+
width: min(82%, var(--timing-board-max-width));
|
|
3519
|
+
max-width: var(--timing-board-max-width);
|
|
3520
|
+
height: auto;
|
|
3521
|
+
transform: translate3d(calc(-100% - 1rem), 0, 0);
|
|
3522
|
+
opacity: 0;
|
|
3523
|
+
pointer-events: none;
|
|
3524
|
+
clip-path: inset(0 round 1.25rem);
|
|
3525
|
+
}
|
|
3526
|
+
|
|
3527
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .sim-timing.broadcast-tower {
|
|
3528
|
+
position: absolute;
|
|
3529
|
+
width: min(82%, var(--timing-board-max-width));
|
|
3530
|
+
max-width: var(--timing-board-max-width);
|
|
3531
|
+
height: auto;
|
|
3532
|
+
}
|
|
3533
|
+
|
|
3534
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower.sim-canvas-panel--needs-banner-clearance > .sim-timing {
|
|
3535
|
+
bottom: var(--race-overlay-banner-clearance);
|
|
3536
|
+
}
|
|
3537
|
+
|
|
3538
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower.is-timing-panel-open > .sim-timing {
|
|
3539
|
+
transform: translate3d(0, 0, 0);
|
|
3540
|
+
opacity: 1;
|
|
3541
|
+
pointer-events: auto;
|
|
3542
|
+
}
|
|
3543
|
+
|
|
3544
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .timing-panel-toggle {
|
|
3545
|
+
display: grid;
|
|
3546
|
+
place-items: center;
|
|
2599
3547
|
}
|
|
2600
3548
|
|
|
2601
|
-
.sim-canvas-panel--with-timing-tower > .camera-controls {
|
|
3549
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .camera-controls {
|
|
2602
3550
|
left: 0.75rem;
|
|
2603
|
-
top:
|
|
3551
|
+
top: 4.45rem;
|
|
2604
3552
|
max-width: calc(100% - 1.5rem);
|
|
2605
3553
|
}
|
|
2606
3554
|
|
|
2607
|
-
.sim-canvas-panel--with-timing-tower > .start-lights {
|
|
2608
|
-
top:
|
|
3555
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .start-lights {
|
|
3556
|
+
top: 7.2rem;
|
|
2609
3557
|
left: 50%;
|
|
2610
3558
|
}
|
|
3559
|
+
|
|
3560
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .steward-message {
|
|
3561
|
+
top: 4.1rem;
|
|
3562
|
+
left: 0.75rem;
|
|
3563
|
+
right: 0.75rem;
|
|
3564
|
+
width: auto;
|
|
3565
|
+
min-width: 0;
|
|
3566
|
+
min-inline-size: 0;
|
|
3567
|
+
max-width: none;
|
|
3568
|
+
max-inline-size: none;
|
|
3569
|
+
grid-template-columns: minmax(4.7rem, max-content) minmax(0, 1fr);
|
|
3570
|
+
align-items: center;
|
|
3571
|
+
gap: 0.18rem 0.62rem;
|
|
3572
|
+
padding: 0.55rem 0.65rem;
|
|
3573
|
+
transform: none;
|
|
3574
|
+
}
|
|
3575
|
+
|
|
3576
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .steward-message.is-hidden {
|
|
3577
|
+
transform: translateY(-0.55rem);
|
|
3578
|
+
}
|
|
3579
|
+
|
|
3580
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .steward-message .steward-message__kicker {
|
|
3581
|
+
min-width: 4.7rem;
|
|
3582
|
+
padding: 0.44rem 0.52rem;
|
|
3583
|
+
font-size: 0.92rem;
|
|
3584
|
+
}
|
|
3585
|
+
|
|
3586
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .steward-message strong {
|
|
3587
|
+
font-size: 0.86rem;
|
|
3588
|
+
}
|
|
3589
|
+
|
|
3590
|
+
:where(.f1-sim-component, .f1-sim-component *).sim-canvas-panel--responsive-narrow.sim-canvas-panel--with-timing-tower > .steward-message span:last-child {
|
|
3591
|
+
font-size: 0.66rem;
|
|
3592
|
+
}
|
|
3593
|
+
}
|
|
3594
|
+
|
|
3595
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-panel--standalone {
|
|
3596
|
+
position: relative;
|
|
3597
|
+
left: auto;
|
|
3598
|
+
right: auto;
|
|
3599
|
+
bottom: auto;
|
|
3600
|
+
grid-template-columns: minmax(4.6rem, 0.35fr) minmax(0, 1fr);
|
|
3601
|
+
transform: none;
|
|
3602
|
+
width: 100%;
|
|
3603
|
+
max-width: 100%;
|
|
3604
|
+
min-height: 0;
|
|
3605
|
+
}
|
|
3606
|
+
|
|
3607
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-panel--standalone .race-data-copy {
|
|
3608
|
+
grid-column: 2;
|
|
3609
|
+
grid-row: 1;
|
|
3610
|
+
min-width: 0;
|
|
3611
|
+
padding: 0.75rem 0.68rem 0.55rem;
|
|
3612
|
+
}
|
|
3613
|
+
|
|
3614
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-panel--standalone .race-data-kicker {
|
|
3615
|
+
font-size: 0.54rem;
|
|
3616
|
+
letter-spacing: 0.12em;
|
|
3617
|
+
}
|
|
3618
|
+
|
|
3619
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-panel--standalone .race-data-copy strong {
|
|
3620
|
+
font-size: clamp(1.05rem, 3vw, 1.45rem);
|
|
3621
|
+
line-height: 0.98;
|
|
3622
|
+
}
|
|
3623
|
+
|
|
3624
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-panel--standalone .race-data-subtitle {
|
|
3625
|
+
font-size: 0.55rem;
|
|
3626
|
+
letter-spacing: 0.06em;
|
|
3627
|
+
}
|
|
3628
|
+
|
|
3629
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-panel--standalone .race-data-number {
|
|
3630
|
+
grid-column: 1;
|
|
3631
|
+
grid-row: 1;
|
|
3632
|
+
min-width: 0;
|
|
3633
|
+
height: auto;
|
|
3634
|
+
font-size: clamp(2.3rem, 5vw, 3.9rem);
|
|
3635
|
+
}
|
|
3636
|
+
|
|
3637
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-panel--standalone .race-data-link {
|
|
3638
|
+
grid-column: 1 / -1;
|
|
3639
|
+
grid-row: 2;
|
|
3640
|
+
margin: 0;
|
|
3641
|
+
min-width: 0;
|
|
3642
|
+
min-height: 44px;
|
|
3643
|
+
font-size: 0.62rem;
|
|
3644
|
+
}
|
|
3645
|
+
|
|
3646
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-panel--standalone.race-data-panel--with-telemetry {
|
|
3647
|
+
grid-template-columns: minmax(4.6rem, 0.35fr) minmax(0, 1fr);
|
|
3648
|
+
}
|
|
3649
|
+
|
|
3650
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-panel--standalone.race-data-panel--with-telemetry .race-data-copy {
|
|
3651
|
+
grid-column: 2;
|
|
3652
|
+
padding-bottom: 0.35rem;
|
|
3653
|
+
}
|
|
3654
|
+
|
|
3655
|
+
:where(.f1-sim-component, .f1-sim-component *).race-data-panel--standalone .race-data-telemetry {
|
|
3656
|
+
grid-column: 1 / -1;
|
|
3657
|
+
grid-row: auto;
|
|
3658
|
+
padding: 0 0.68rem 0.65rem;
|
|
3659
|
+
border-left: 0;
|
|
2611
3660
|
}
|