110 lines
2.1 KiB
SCSS
110 lines
2.1 KiB
SCSS
// Rôle : gère la structure commune du calculateur et ses panneaux de saisie.
|
|
.calculator-module,
|
|
.timer-module {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 35fr) minmax(0, 65fr);
|
|
column-gap: var(--space-6);
|
|
row-gap: var(--space-4);
|
|
align-items: start;
|
|
overflow: hidden;
|
|
padding: var(--space-4);
|
|
}
|
|
|
|
.calculator-form {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
align-self: start;
|
|
align-content: start;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
}
|
|
|
|
.module[data-module-type="calculator"] {
|
|
container-name: calculator-tool;
|
|
container-type: inline-size;
|
|
}
|
|
|
|
@container calculator-tool (max-width: 820px) {
|
|
.calculator-module {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.calculator-card {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.calculator-field {
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
}
|
|
|
|
.calculator-current-field {
|
|
grid-column: 1;
|
|
grid-row: 2;
|
|
}
|
|
|
|
.calculator-result-field {
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
align-self: start;
|
|
}
|
|
|
|
.calculator-result-field.has-current {
|
|
grid-row: 1 / 3;
|
|
align-self: stretch;
|
|
}
|
|
|
|
.calculator-label-field,
|
|
.calculator-save-button {
|
|
grid-column: 1 / -1;
|
|
}
|
|
}
|
|
|
|
@container calculator-tool (max-width: 560px) {
|
|
.calculator-card {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.calculator-field,
|
|
.calculator-current-field,
|
|
.calculator-result-field,
|
|
.calculator-label-field,
|
|
.calculator-save-button {
|
|
grid-column: 1;
|
|
grid-row: auto;
|
|
}
|
|
|
|
.calculator-result-field.has-current {
|
|
grid-row: auto;
|
|
}
|
|
}
|
|
|
|
@supports not (container-type: inline-size) {
|
|
.calculator-module {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
}
|
|
|
|
.calculator-card,
|
|
.tool-split-results,
|
|
.timer-control-card,
|
|
.timer-results-card {
|
|
display: grid;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
padding: 12px;
|
|
border: 1px solid rgba(165, 180, 252, 0.12);
|
|
border-radius: var(--radius-md);
|
|
background:
|
|
linear-gradient(135deg, rgba(139, 92, 246, 0.08), transparent 62%),
|
|
rgba(7, 10, 24, 0.3);
|
|
}
|
|
|
|
.timer-control-card,
|
|
.timer-results-card {
|
|
align-self: start;
|
|
gap: var(--space-3);
|
|
}
|