445 lines
7.5 KiB
SCSS
445 lines
7.5 KiB
SCSS
// Rôle : contient les adaptations responsive et préférences d'accessibilité.
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.app-shell {
|
|
grid-template-columns: 72px minmax(0, 1fr);
|
|
}
|
|
|
|
.sidebar {
|
|
width: 72px;
|
|
padding: var(--space-4) 10px;
|
|
}
|
|
|
|
.brand span:last-child,
|
|
.nav-item strong,
|
|
.sidebar-about-link strong,
|
|
.sidebar-mascot,
|
|
.sidebar-note {
|
|
display: none;
|
|
}
|
|
|
|
.brand,
|
|
.nav-item,
|
|
.sidebar-about-link {
|
|
justify-content: center;
|
|
}
|
|
|
|
.sidebar[data-variant="compact"] .sidebar-note {
|
|
display: block;
|
|
}
|
|
|
|
.about-story-section,
|
|
.about-contribute-section {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.about-section-heading {
|
|
position: static;
|
|
}
|
|
|
|
.about-reminders-list {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (max-height: 760px) and (min-width: 1025px) {
|
|
.sidebar-mascot {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.drawer {
|
|
--drawer-top-offset: 110px;
|
|
}
|
|
|
|
.app-shell {
|
|
display: block;
|
|
padding-bottom: 76px;
|
|
}
|
|
|
|
.sidebar {
|
|
display: none;
|
|
}
|
|
|
|
.topbar,
|
|
.page-heading,
|
|
.toolbox-head,
|
|
.module header {
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.topbar {
|
|
padding: var(--space-4);
|
|
}
|
|
|
|
.topbar-actions {
|
|
display: flex;
|
|
}
|
|
|
|
.topbar-actions > * {
|
|
width: 100%;
|
|
}
|
|
|
|
.game-heading-actions,
|
|
.guide-checklist-page-controls {
|
|
width: 100%;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.guide-checklist-page-controls {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.guide-checklist-page-actions {
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.home-onboarding-steps-action {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.home-onboarding-create-button {
|
|
width: 100%;
|
|
}
|
|
|
|
.hero,
|
|
.game-hero,
|
|
.page-hero,
|
|
.origin-section,
|
|
.home-onboarding-layout,
|
|
.home-onboarding-cards,
|
|
.about-story-section,
|
|
.about-story-list,
|
|
.about-contribute-blocks,
|
|
.about-contribute-section,
|
|
.about-contribute-formats,
|
|
.about-reminders-list,
|
|
.about-tools-list,
|
|
.section-grid,
|
|
.info-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.about-tool-item:nth-last-child(-n + 2) {
|
|
border-bottom: 1px solid rgba(165, 180, 252, 0.1);
|
|
}
|
|
|
|
.about-tool-item:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.about-story-list {
|
|
width: 100%;
|
|
}
|
|
|
|
.about-story-body {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.about-story-visual {
|
|
min-height: 176px;
|
|
}
|
|
|
|
.about-story-illustration {
|
|
width: min(86%, 220px);
|
|
}
|
|
|
|
.about-story-bullets {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.about-contribute-illustration {
|
|
width: min(100%, 220px);
|
|
max-height: 260px;
|
|
justify-self: center;
|
|
}
|
|
|
|
.about-contribute-section .about-section-heading {
|
|
grid-template-rows: auto;
|
|
}
|
|
|
|
.about-section-heading .about-contribute-illustration {
|
|
margin-top: var(--space-5);
|
|
}
|
|
|
|
.about-code-example pre {
|
|
padding-left: var(--space-4);
|
|
}
|
|
|
|
.hero,
|
|
.game-hero,
|
|
.page-hero {
|
|
min-height: auto;
|
|
padding: var(--space-6);
|
|
}
|
|
|
|
.game-hero::after {
|
|
left: 0;
|
|
opacity: 0.42;
|
|
background:
|
|
linear-gradient(90deg, rgba(5, 7, 17, 0.28), rgba(5, 7, 17, 0.72)),
|
|
var(--game-hero-image);
|
|
background-position:
|
|
center,
|
|
right center;
|
|
background-size:
|
|
cover,
|
|
cover;
|
|
mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.14) 30%, #000 70%);
|
|
-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.14) 30%, #000 70%);
|
|
}
|
|
|
|
.home-visual {
|
|
width: min(320px, 100%);
|
|
}
|
|
|
|
.origin-section {
|
|
padding: var(--space-5);
|
|
}
|
|
|
|
.home-dialogue {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.origin-copy {
|
|
padding-right: 0;
|
|
padding-bottom: var(--space-5);
|
|
border-right: 0;
|
|
border-bottom: 2px solid rgba(246, 196, 83, 0.66);
|
|
}
|
|
|
|
.dialogue-line {
|
|
max-width: 92%;
|
|
}
|
|
|
|
.dialogue-line-app {
|
|
max-width: 92%;
|
|
}
|
|
|
|
.home-stats {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
main {
|
|
width: min(100% - 24px, 1180px);
|
|
padding-top: var(--space-5);
|
|
}
|
|
|
|
.modules,
|
|
.modules[data-layout-cols="1"],
|
|
.modules[data-layout-cols="2"] {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.image-viewer-body.has-annotation-side {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.image-viewer-side {
|
|
height: min(280px, 32vh);
|
|
}
|
|
|
|
.image-viewer-root {
|
|
padding: 8px;
|
|
}
|
|
|
|
.image-viewer {
|
|
width: calc(100vw - 16px);
|
|
max-height: calc(100vh - 16px);
|
|
padding: var(--space-3);
|
|
}
|
|
|
|
.image-viewer.is-gallery {
|
|
height: calc(100vh - 16px);
|
|
}
|
|
|
|
.image-viewer-body.has-navigation {
|
|
gap: 6px;
|
|
}
|
|
|
|
.image-viewer-gallery {
|
|
gap: var(--space-3);
|
|
padding: var(--space-3);
|
|
}
|
|
|
|
.module-column {
|
|
display: contents;
|
|
}
|
|
|
|
.game-home-grid,
|
|
.game-layout,
|
|
.library-doc-layout {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.game-filters {
|
|
position: static;
|
|
}
|
|
|
|
.library-doc-nav {
|
|
max-height: none;
|
|
}
|
|
|
|
.library-example-layout,
|
|
.library-tool-feature-list dl > div {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.filter-options {
|
|
max-height: none;
|
|
}
|
|
|
|
.inline-form {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.calculator-form {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.timer-module {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.task-planner-settings,
|
|
.task-planner-task-settings {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.task-planner-line {
|
|
grid-template-columns: 30px 24px minmax(0, 1fr) auto;
|
|
}
|
|
|
|
.task-planner-type-select,
|
|
.task-planner-warning {
|
|
grid-column: 3 / -1;
|
|
}
|
|
|
|
.task-planner-actions {
|
|
grid-column: 4;
|
|
grid-row: 1;
|
|
}
|
|
|
|
.task-planner-description-panel,
|
|
.task-planner-task-settings {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.calculator-form {
|
|
grid-row: auto;
|
|
}
|
|
|
|
.combos-device-row,
|
|
.combos-form-grid,
|
|
.combos-palette {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.combo-card {
|
|
grid-template-columns: 30px minmax(0, 1fr);
|
|
}
|
|
|
|
.combo-card-main {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.combo-card-actions {
|
|
grid-column: 2;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.toolbox-actions-row {
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.toolbox-actions-row > div,
|
|
.toolbox-actions-row > div:last-child {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.toolbox-preferences-row {
|
|
max-width: none;
|
|
justify-self: stretch;
|
|
}
|
|
|
|
.tool-add-modal {
|
|
width: min(420px, calc(100vw - 32px));
|
|
}
|
|
|
|
.tool-add-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.mobile-nav {
|
|
position: fixed;
|
|
right: 12px;
|
|
bottom: 12px;
|
|
left: 12px;
|
|
z-index: 60;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 52px 1fr;
|
|
gap: 8px;
|
|
align-items: center;
|
|
padding: 8px;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-xl);
|
|
background: rgba(11, 14, 27, 0.9);
|
|
backdrop-filter: blur(10px);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.mobile-nav a,
|
|
.mobile-nav button {
|
|
min-height: 44px;
|
|
padding: 0 8px;
|
|
border-radius: var(--radius-md);
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.mobile-nav a {
|
|
display: grid;
|
|
place-items: center;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.mobile-nav a.active {
|
|
background: var(--color-primary-soft);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
}
|
|
|
|
@media (max-width: 699px) {
|
|
.drawer-panel {
|
|
width: 100vw;
|
|
min-width: 0;
|
|
max-width: none;
|
|
}
|
|
|
|
.drawer-resize-handle {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.home-stats {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.tool-add-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|