Co-Study4Grid / frontend /src /index.css
github-actions[bot]
Deploy 7688ef1
13d4e44
Raw
History Blame Contribute Delete
2.92 kB
/*
Copyright (c) 2025-2026, RTE (https://www.rte-france.com)
This Source Code Form is subject to the terms of the Mozilla Public License, version 2.0.
If a copy of the Mozilla Public License, version 2.0 was not distributed with this file,
you can obtain one at http://mozilla.org/MPL/2.0/.
SPDX-License-Identifier: MPL-2.0
This file is part of Co-Study4Grid a Power Grid Study tool Assistant Interface to help solve contigencies for a grid state under study.
*/
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
/* Theme is selected by `<html data-theme="light|dark">` (set by the
pre-mount script in index.html and by useTheme). color-scheme
follows the same flip via a style attribute set in JS. */
color-scheme: light;
color: var(--color-text-primary);
background-color: var(--color-surface);
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
margin: 0;
min-width: 320px;
min-height: 100vh;
background-color: var(--color-surface);
color: var(--color-text-primary);
}
#root {
width: 100%;
height: 100vh;
}
/* Standalone Style Alignments */
.action-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.action-table th,
.action-table td {
padding: var(--space-2);
text-align: left;
border-bottom: 1px solid var(--color-border-subtle);
/* Long equipment IDs (LINE.XYZ_ABC_LONG_NAME) would otherwise stretch
the table past the modal container and either trigger a horizontal
scrollbar or get clipped invisibly by the parent's `overflow: hidden`.
`overflow-wrap: anywhere` lets the cell break mid-word when needed
so content stays visible and the modal fits its natural width. */
overflow-wrap: anywhere;
word-break: break-word;
}
.action-table th {
background: var(--color-surface-muted);
font-weight: 600;
}
.action-table tr:hover {
background: var(--color-brand-soft);
}
.action-table tr.selected {
background: var(--color-brand-soft);
}
.metric-badge {
display: inline-block;
padding: 1px 5px;
border-radius: 3px;
font-size: var(--text-xs);
font-weight: bold;
}
.metric-score {
background: var(--color-brand-soft);
color: var(--color-brand);
}
.metric-rho {
background: var(--color-warning-soft);
color: var(--color-warning-text);
}
.modal-tab {
padding: var(--space-3) var(--space-5);
cursor: pointer;
border-bottom: 3px solid transparent;
font-weight: bold;
color: var(--color-text-tertiary);
transition: all 0.2s;
}
.game-app-host {
position: fixed;
top: 56px;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.game-app-host > div {
height: 100% !important;
}
.modal-tab.active {
border-bottom-color: var(--color-brand);
color: var(--color-brand);
background: var(--color-surface-muted);
}