179 lines
3.7 KiB
SCSS
179 lines
3.7 KiB
SCSS
// Rôle : définit les bases globales HTML, body, typographie et contrôles natifs.
|
|
@use "design-system/controls";
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
margin: -1px;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
border: 0;
|
|
clip: rect(0 0 0 0);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
html {
|
|
min-height: 100%;
|
|
background: var(--color-bg-page);
|
|
}
|
|
|
|
body {
|
|
position: relative;
|
|
min-height: 100vh;
|
|
margin: 0;
|
|
color: var(--color-text-primary);
|
|
background: var(--gradient-page);
|
|
background-attachment: fixed;
|
|
font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
button {
|
|
@include controls.text-button;
|
|
}
|
|
|
|
select {
|
|
@include controls.select-control;
|
|
}
|
|
|
|
select:hover,
|
|
select:focus {
|
|
@include controls.select-control-hover;
|
|
}
|
|
|
|
select:disabled {
|
|
@include controls.control-disabled;
|
|
}
|
|
|
|
select option {
|
|
@include controls.select-option;
|
|
}
|
|
|
|
:where(input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="password"], textarea) {
|
|
@include controls.field-control;
|
|
}
|
|
|
|
input[type="time"] {
|
|
@include controls.time-control;
|
|
}
|
|
|
|
:where(textarea) {
|
|
@include controls.field-textarea;
|
|
@include controls.scrollbar-control;
|
|
@include controls.scrollbar-resizer;
|
|
}
|
|
|
|
:where(input, textarea)::placeholder {
|
|
@include controls.field-placeholder;
|
|
}
|
|
|
|
:where(input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="password"], textarea):hover,
|
|
input[type="time"]:hover {
|
|
@include controls.field-hover;
|
|
}
|
|
|
|
:where(input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="password"], textarea):focus,
|
|
input[type="time"]:focus {
|
|
@include controls.field-focus;
|
|
outline: none;
|
|
}
|
|
|
|
:where(input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="password"], textarea):focus-visible,
|
|
input[type="time"]:focus-visible {
|
|
outline: 2px solid var(--color-accent-gold);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
button:disabled,
|
|
:where(input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="password"], textarea):disabled,
|
|
input[type="time"]:disabled {
|
|
@include controls.control-disabled;
|
|
}
|
|
|
|
button:hover:not(:disabled, .active, .is-active, [aria-pressed="true"], .nds-button, .nds-icon-button) {
|
|
@include controls.text-button-hover;
|
|
}
|
|
|
|
button:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: 2px solid var(--color-accent-gold);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
@include controls.checkbox-control;
|
|
}
|
|
|
|
input[type="checkbox"]::before {
|
|
@include controls.checkbox-check;
|
|
}
|
|
|
|
input[type="checkbox"]:hover {
|
|
@include controls.checkbox-hover;
|
|
}
|
|
|
|
input[type="checkbox"]:checked {
|
|
@include controls.checkbox-checked;
|
|
}
|
|
|
|
input[type="checkbox"]:checked::before {
|
|
@include controls.checkbox-checked-check;
|
|
}
|
|
|
|
input[type="checkbox"]:disabled {
|
|
@include controls.checkbox-disabled;
|
|
}
|
|
|
|
input[type="checkbox"]:disabled::before {
|
|
opacity: 0.54;
|
|
}
|
|
|
|
input[type="checkbox"]:focus-visible {
|
|
outline: 2px solid var(--color-accent-gold);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
.themed-scrollbar,
|
|
.legacy-scrollbar {
|
|
@include controls.scrollbar-control;
|
|
}
|
|
|
|
:is(
|
|
.annotation-marker-list,
|
|
.damage-table-wrap,
|
|
.drawer-panel,
|
|
.filter-options,
|
|
.goal-tree-editor-panel,
|
|
.goal-tree-prerequisite-list,
|
|
.goal-tree-view-wrap,
|
|
.module-content,
|
|
.notepad-pages-list,
|
|
.notepad-surface,
|
|
.table-grid-wrap,
|
|
.tool-split-tree
|
|
) {
|
|
@include controls.scrollbar-control;
|
|
}
|
|
|
|
body.is-modal-open {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.startup-error {
|
|
min-height: 100vh;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|