Split large Sass modules by feature area
All checks were successful
Deploy Sokko G / deploy (push) Successful in 15s
All checks were successful
Deploy Sokko G / deploy (push) Successful in 15s
This commit is contained in:
parent
bd6dd78e34
commit
c81f66c747
20 changed files with 3990 additions and 3948 deletions
File diff suppressed because it is too large
Load diff
510
website/src/styles/home/_about.scss
Normal file
510
website/src/styles/home/_about.scss
Normal file
|
|
@ -0,0 +1,510 @@
|
|||
// Rôle : gère les sections à propos, valeurs et rappels éditoriaux.
|
||||
|
||||
.about-page {
|
||||
display: grid;
|
||||
gap: var(--space-6);
|
||||
}
|
||||
|
||||
.about-onboarding-section {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.about-story-section {
|
||||
display: grid;
|
||||
gap: var(--space-5);
|
||||
align-items: start;
|
||||
padding: var(--space-6);
|
||||
}
|
||||
|
||||
.about-story-section .about-section-heading {
|
||||
position: static;
|
||||
max-width: 860px;
|
||||
}
|
||||
|
||||
.about-section-heading {
|
||||
position: sticky;
|
||||
top: var(--space-5);
|
||||
}
|
||||
|
||||
.about-section-heading h2 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.about-section-heading .about-contribute-illustration {
|
||||
margin-top: var(--space-6);
|
||||
}
|
||||
|
||||
.about-story-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
gap: var(--space-4);
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.about-story-item {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
gap: var(--space-3);
|
||||
align-items: stretch;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
padding: var(--space-4);
|
||||
border: 1px solid rgba(150, 165, 205, 0.12);
|
||||
border-radius: var(--radius-md);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(139, 92, 246, 0.1), transparent 42%),
|
||||
rgba(16, 20, 38, 0.36);
|
||||
}
|
||||
|
||||
.about-story-body {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
gap: var(--space-4);
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.about-story-body > div {
|
||||
display: grid;
|
||||
align-content: center;
|
||||
gap: 10px;
|
||||
min-height: 210px;
|
||||
padding-block: var(--space-4);
|
||||
}
|
||||
|
||||
.about-story-item h3 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
padding: 0 0 var(--space-3);
|
||||
border-bottom: 1px solid rgba(246, 196, 83, 0.12);
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
|
||||
.about-story-item h3 .module-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
flex: 0 0 30px;
|
||||
border: 1px solid rgba(246, 196, 83, 0.24);
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(246, 196, 83, 0.09);
|
||||
}
|
||||
|
||||
.about-story-item h3 .module-icon-svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.about-story-body p {
|
||||
margin: 0;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: 1.58;
|
||||
}
|
||||
|
||||
.about-story-bullets {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 4px var(--space-4);
|
||||
margin: 0;
|
||||
padding-left: 1.15rem;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.about-story-bullets li {
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
.about-story-bullets li::marker {
|
||||
color: var(--color-accent-gold);
|
||||
}
|
||||
|
||||
.about-story-bullets.single-column {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.about-story-warning {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 7px;
|
||||
color: var(--color-warning);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.about-story-warning .ui-icon {
|
||||
width: 15px;
|
||||
min-width: 15px;
|
||||
height: 15px;
|
||||
margin-top: 1px;
|
||||
color: var(--color-warning);
|
||||
opacity: 0.88;
|
||||
}
|
||||
|
||||
.about-story-visual {
|
||||
display: grid;
|
||||
min-height: 230px;
|
||||
place-items: center;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(246, 196, 83, 0.12);
|
||||
border-radius: var(--radius-md);
|
||||
background:
|
||||
radial-gradient(circle at center, rgba(139, 92, 246, 0.28), transparent 60%),
|
||||
radial-gradient(circle at 24% 18%, rgba(246, 196, 83, 0.1), transparent 36%),
|
||||
rgba(5, 7, 17, 0.18);
|
||||
}
|
||||
|
||||
.about-story-illustration {
|
||||
display: block;
|
||||
width: min(96%, 340px);
|
||||
max-height: 250px;
|
||||
object-fit: contain;
|
||||
opacity: 0.94;
|
||||
filter: saturate(1.02) brightness(1.02) drop-shadow(0 18px 26px rgba(0, 0, 0, 0.32));
|
||||
}
|
||||
|
||||
.about-tools-section {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
padding: var(--space-6);
|
||||
}
|
||||
|
||||
.about-tools-section .page-heading p:not(.eyebrow) {
|
||||
max-width: 780px;
|
||||
margin: 8px 0 0;
|
||||
color: var(--color-text-secondary);
|
||||
line-height: 1.56;
|
||||
}
|
||||
|
||||
.about-contribute-section {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
|
||||
gap: var(--space-6);
|
||||
align-items: stretch;
|
||||
scroll-margin-top: var(--space-6);
|
||||
padding: var(--space-6);
|
||||
}
|
||||
|
||||
.about-contribute-section .about-section-heading {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.about-contribute-content {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.about-contribute-content > p {
|
||||
max-width: 112ch;
|
||||
margin: 0;
|
||||
color: var(--color-text-secondary);
|
||||
line-height: 1.62;
|
||||
}
|
||||
|
||||
.about-contribute-blocks {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.about-contribute-block {
|
||||
display: grid;
|
||||
grid-template-columns: 30px minmax(0, 1fr);
|
||||
gap: 12px;
|
||||
align-items: start;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.about-contribute-block .module-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 1px solid rgba(246, 196, 83, 0.22);
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(246, 196, 83, 0.09);
|
||||
}
|
||||
|
||||
.about-contribute-block .module-icon-svg {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.about-contribute-block h3 {
|
||||
margin: 0 0 6px;
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.about-contribute-block p {
|
||||
margin: 0;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.about-contribute-block ul {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
margin: 10px 0 0;
|
||||
padding-left: 1.15rem;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.about-contribute-block li::marker {
|
||||
color: var(--color-accent-gold);
|
||||
}
|
||||
|
||||
.about-contribute-block .about-contribute-note {
|
||||
margin-top: var(--space-3);
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-xs);
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.about-contribute-content pre,
|
||||
.about-prompt-box,
|
||||
.about-code-example {
|
||||
margin: 0;
|
||||
border: 1px solid rgba(165, 180, 252, 0.12);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(5, 7, 17, 0.28);
|
||||
}
|
||||
|
||||
.about-contribute-content pre {
|
||||
overflow: auto;
|
||||
padding: var(--space-4);
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.about-contribute-formats {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(260px, 0.64fr) minmax(0, 1.36fr);
|
||||
gap: var(--space-4);
|
||||
align-items: stretch;
|
||||
margin-top: var(--space-3);
|
||||
}
|
||||
|
||||
.about-code-example {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
overflow: hidden;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(139, 92, 246, 0.08), transparent 45%),
|
||||
rgba(5, 7, 17, 0.32);
|
||||
}
|
||||
|
||||
.about-code-example > p {
|
||||
margin: 0;
|
||||
padding: 8px var(--space-3);
|
||||
border-bottom: 1px solid rgba(246, 196, 83, 0.14);
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 800;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.about-code-example pre {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
padding: var(--space-3);
|
||||
}
|
||||
|
||||
.about-contribute-illustration {
|
||||
display: block;
|
||||
width: min(100%, 260px);
|
||||
max-height: 420px;
|
||||
object-fit: contain;
|
||||
filter: saturate(1.05) brightness(1.04) drop-shadow(0 26px 38px rgba(0, 0, 0, 0.36));
|
||||
}
|
||||
|
||||
.about-section-heading .about-contribute-illustration {
|
||||
width: min(100%, 300px);
|
||||
max-height: 520px;
|
||||
align-self: center;
|
||||
margin-top: var(--space-6);
|
||||
object-fit: contain;
|
||||
opacity: 0.94;
|
||||
filter: saturate(1.02) brightness(0.99) drop-shadow(0 22px 30px rgba(0, 0, 0, 0.32));
|
||||
}
|
||||
|
||||
.about-contribute-content code {
|
||||
color: var(--color-text-primary);
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: 1.55;
|
||||
white-space: inherit;
|
||||
}
|
||||
|
||||
.about-prompt-box {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.about-prompt-box h3 {
|
||||
margin: 0 0 8px;
|
||||
color: var(--color-accent-gold);
|
||||
font-size: var(--font-size-md);
|
||||
}
|
||||
|
||||
.about-prompt-box p {
|
||||
margin: 0 0 var(--space-3);
|
||||
color: var(--color-text-secondary);
|
||||
line-height: 1.58;
|
||||
}
|
||||
|
||||
.about-prompt-box pre {
|
||||
border-color: rgba(246, 196, 83, 0.16);
|
||||
background: rgba(5, 7, 17, 0.34);
|
||||
}
|
||||
|
||||
.about-tools-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0 var(--space-6);
|
||||
}
|
||||
|
||||
.about-tool-item {
|
||||
display: grid;
|
||||
grid-template-columns: 38px minmax(0, 1fr);
|
||||
gap: 12px;
|
||||
align-items: start;
|
||||
padding: 14px 0;
|
||||
border-bottom: 1px solid rgba(165, 180, 252, 0.1);
|
||||
}
|
||||
|
||||
.about-tool-item:nth-last-child(-n + 2) {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.about-tool-item .module-icon {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
flex: 0 0 34px;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.about-tool-item .module-icon-svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.about-tool-item h3 {
|
||||
margin: 0 0 4px;
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
|
||||
.about-tool-item p {
|
||||
margin: 0;
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.about-tool-examples {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin: 10px 0 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.about-tool-examples li {
|
||||
padding: 4px 8px;
|
||||
border: 1px solid rgba(246, 196, 83, 0.18);
|
||||
border-radius: var(--radius-pill);
|
||||
background: rgba(246, 196, 83, 0.08);
|
||||
color: var(--color-accent-gold);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.about-tools-library-button {
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
min-width: min(100%, 300px);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
justify-self: center;
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
|
||||
.about-storage-reminders {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
margin-top: var(--space-2);
|
||||
padding: var(--space-5);
|
||||
border: 1px solid rgba(246, 196, 83, 0.16);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(5, 7, 17, 0.24);
|
||||
}
|
||||
|
||||
.about-storage-reminders .eyebrow {
|
||||
margin: 0;
|
||||
color: var(--color-accent-gold);
|
||||
}
|
||||
|
||||
.about-reminders-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 260px));
|
||||
justify-content: center;
|
||||
gap: var(--space-4);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.about-reminder-item {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
min-width: 0;
|
||||
padding: var(--space-3);
|
||||
border: 1px solid rgba(150, 165, 205, 0.1);
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(16, 20, 38, 0.34);
|
||||
}
|
||||
|
||||
.about-reminder-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.about-reminder-item .module-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
flex: 0 0 30px;
|
||||
border: 1px solid rgba(246, 196, 83, 0.26);
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(246, 196, 83, 0.1);
|
||||
}
|
||||
|
||||
.about-reminder-item h4 {
|
||||
margin: 0;
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-xs);
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.about-reminder-item p {
|
||||
max-width: none;
|
||||
margin: 0;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-xs);
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
618
website/src/styles/home/_library.scss
Normal file
618
website/src/styles/home/_library.scss
Normal file
|
|
@ -0,0 +1,618 @@
|
|||
// Rôle : gère les styles de la librairie et des aperçus d’outils.
|
||||
@use "../mixins";
|
||||
|
||||
.library-page {
|
||||
display: grid;
|
||||
gap: var(--space-6);
|
||||
}
|
||||
|
||||
.library-hero {
|
||||
min-height: 220px;
|
||||
}
|
||||
|
||||
.library-summary {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: var(--space-4);
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
.library-summary article {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-4);
|
||||
border: 1px solid rgba(150, 165, 205, 0.12);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(5, 7, 17, 0.28);
|
||||
}
|
||||
|
||||
.library-summary h2,
|
||||
.library-summary p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.library-summary h2 {
|
||||
margin-bottom: 5px;
|
||||
font-size: var(--font-size-md);
|
||||
}
|
||||
|
||||
.library-summary-icon {
|
||||
display: grid;
|
||||
width: 34px;
|
||||
min-width: 34px;
|
||||
height: 34px;
|
||||
place-items: center;
|
||||
border: 1px solid rgba(196, 181, 253, 0.24);
|
||||
border-radius: var(--radius-md);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(139, 92, 246, 0.92), rgba(99, 102, 241, 0.84));
|
||||
box-shadow: var(--shadow-primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.library-summary-icon .module-icon-svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
.library-doc-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
|
||||
align-items: start;
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.library-doc-nav {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
padding: var(--space-4);
|
||||
scroll-margin-top: var(--space-5);
|
||||
}
|
||||
|
||||
.library-toc-heading {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.library-toc-heading h2,
|
||||
.library-toc-heading p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.library-toc-heading h2 {
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
.library-toc-heading p {
|
||||
max-width: 620px;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.library-doc-nav-groups {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.library-doc-nav-group {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.library-doc-nav-group > a {
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 800;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.library-doc-nav-group > a:hover,
|
||||
.library-doc-nav-group > a:focus-visible {
|
||||
color: var(--color-accent-gold);
|
||||
}
|
||||
|
||||
.library-doc-nav-group.active > a {
|
||||
color: var(--color-accent-gold);
|
||||
}
|
||||
|
||||
.library-doc-nav-group ul {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.library-doc-nav-group li {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.library-doc-nav-group li a {
|
||||
display: grid;
|
||||
grid-template-columns: 28px minmax(0, 1fr);
|
||||
min-height: 36px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 4px 8px 4px 4px;
|
||||
border: 1px solid rgba(150, 165, 205, 0.1);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(5, 7, 17, 0.22);
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.library-doc-nav-group li a:hover,
|
||||
.library-doc-nav-group li a:focus-visible {
|
||||
border-color: rgba(246, 196, 83, 0.36);
|
||||
background: rgba(246, 196, 83, 0.08);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.library-doc-nav-group .module-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.library-doc-nav-group .module-icon-svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.library-tools {
|
||||
display: grid;
|
||||
gap: var(--space-6);
|
||||
justify-items: stretch;
|
||||
}
|
||||
|
||||
.library-tool-category {
|
||||
display: grid;
|
||||
gap: var(--space-5);
|
||||
min-width: 0;
|
||||
scroll-margin-top: var(--space-8);
|
||||
}
|
||||
|
||||
.library-tool-section {
|
||||
position: relative;
|
||||
display: grid;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
gap: var(--space-4);
|
||||
overflow: hidden;
|
||||
padding: var(--space-5);
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-lg);
|
||||
background: rgba(16, 20, 38, 0.42);
|
||||
box-shadow: var(--shadow-sm);
|
||||
scroll-margin-top: var(--space-8);
|
||||
|
||||
@include mixins.gold-panel-frame;
|
||||
}
|
||||
|
||||
.library-tool-section > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.library-category-hero {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
padding: var(--space-6);
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-lg);
|
||||
background:
|
||||
radial-gradient(circle at 92% 12%, rgba(246, 196, 83, 0.12), transparent 30%),
|
||||
var(--gradient-nebula),
|
||||
linear-gradient(135deg, rgba(16, 20, 38, 0.9), rgba(5, 7, 17, 0.88));
|
||||
box-shadow: var(--shadow-sm);
|
||||
|
||||
@include mixins.gold-panel-frame;
|
||||
}
|
||||
|
||||
.library-category-hero > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.library-category-hero h2,
|
||||
.library-category-hero p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.library-category-hero h2 {
|
||||
margin-bottom: var(--space-3);
|
||||
color: var(--color-text-primary);
|
||||
font-size: clamp(1.7rem, 3vw, var(--font-size-3xl));
|
||||
line-height: 1.05;
|
||||
}
|
||||
|
||||
.library-category-hero p:not(.eyebrow) {
|
||||
max-width: 760px;
|
||||
}
|
||||
|
||||
.library-tool-intro {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.library-tool-title-row {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
.library-tool-title-row .module-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.library-tool-title-row .module-icon-svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.library-tool-intro h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.library-tool-intro p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.library-tool-intro h2 {
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
|
||||
.library-tool-intro p {
|
||||
max-width: 860px;
|
||||
}
|
||||
|
||||
.library-example-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
|
||||
align-items: start;
|
||||
justify-content: stretch;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.library-example-layout:not(.has-legend) {
|
||||
grid-template-columns: minmax(0, 860px);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.library-tool-docs {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.library-control-legend,
|
||||
.library-tool-feature-list {
|
||||
min-width: 0;
|
||||
border: 1px solid rgba(150, 165, 205, 0.12);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(5, 7, 17, 0.28);
|
||||
}
|
||||
|
||||
.library-control-legend {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-3);
|
||||
border-color: rgba(246, 196, 83, 0.22);
|
||||
background:
|
||||
radial-gradient(circle at 100% 0%, rgba(246, 196, 83, 0.08), transparent 34%),
|
||||
rgba(5, 7, 17, 0.46);
|
||||
}
|
||||
|
||||
.library-control-legend h3,
|
||||
.library-tool-feature-list h3 {
|
||||
margin: 0;
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-md);
|
||||
}
|
||||
|
||||
.library-control-legend-group {
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
min-width: 0;
|
||||
padding: var(--space-2);
|
||||
border: 1px solid rgba(150, 165, 205, 0.1);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(5, 7, 17, 0.28);
|
||||
}
|
||||
|
||||
.library-control-legend-group.is-generic-single {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.library-control-legend-group h4 {
|
||||
margin: 0;
|
||||
color: var(--color-accent-gold);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 900;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.library-control-legend-items {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.library-control-legend-item {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(34px, max-content) minmax(0, 1fr);
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.library-control-preview {
|
||||
display: inline-flex;
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
min-height: 34px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.library-control-preview.notepad-toolbar-group {
|
||||
flex-wrap: nowrap;
|
||||
padding-right: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.library-control-preview-stack {
|
||||
display: inline-grid;
|
||||
gap: 6px;
|
||||
justify-items: start;
|
||||
}
|
||||
|
||||
.library-control-preview-row {
|
||||
display: inline-flex;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.library-control-preview .notepad-toolbar-button,
|
||||
.library-control-preview .drawing-control-button,
|
||||
.library-control-preview .notepad-color-toggle,
|
||||
.library-control-preview .drawing-width-toggle,
|
||||
.library-control-preview .module-scroll-button {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.library-control-preview .notepad-toolbar-button.is-wide {
|
||||
width: auto;
|
||||
min-width: 46px;
|
||||
padding: 0 9px;
|
||||
}
|
||||
|
||||
.library-control-preview .notepad-color-toggle.active,
|
||||
.library-control-preview .drawing-width-toggle.active {
|
||||
border-color: rgba(246, 196, 83, 0.48);
|
||||
background: rgba(246, 196, 83, 0.1);
|
||||
color: var(--color-accent-gold);
|
||||
}
|
||||
|
||||
.library-control-preview .module-scroll-button {
|
||||
min-height: 34px;
|
||||
}
|
||||
|
||||
.library-control-legend-item strong {
|
||||
display: block;
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.library-control-legend-item p {
|
||||
margin: 3px 0 0;
|
||||
font-size: var(--font-size-xs);
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.library-tool-feature-list {
|
||||
display: grid;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
border-color: rgba(246, 196, 83, 0.18);
|
||||
border-radius: var(--radius-md);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(16, 20, 38, 0.52), rgba(5, 7, 17, 0.36)),
|
||||
rgba(5, 7, 17, 0.3);
|
||||
}
|
||||
|
||||
.library-tool-advanced-list {
|
||||
border-color: rgba(34, 211, 238, 0.16);
|
||||
}
|
||||
|
||||
.library-tool-feature-list summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-4);
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.library-tool-feature-list summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.library-tool-feature-list summary .ui-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
flex: 0 0 auto;
|
||||
color: var(--color-text-secondary);
|
||||
transition: transform var(--duration-fast) var(--ease-standard);
|
||||
}
|
||||
|
||||
.library-tool-feature-list[open] summary .ui-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.library-tool-feature-content {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
padding: 0 var(--space-5) var(--space-5);
|
||||
}
|
||||
|
||||
.library-tool-feature-list dl {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.library-tool-feature-list dl > div {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(180px, 0.28fr) minmax(0, 1fr);
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-3);
|
||||
border: 1px solid rgba(150, 165, 205, 0.12);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(5, 7, 17, 0.28);
|
||||
}
|
||||
|
||||
.library-tool-feature-list dt {
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.library-tool-feature-list dd {
|
||||
margin: 0;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.library-tool-feature-list dd p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.library-tool-feature-list dd ul {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
margin: var(--space-2) 0 0;
|
||||
padding-left: 1.1rem;
|
||||
}
|
||||
|
||||
.library-tool-feature-list dd li {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.library-tool-import-format {
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.library-tool-import-format p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.library-tool-import-format pre {
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
padding: var(--space-3);
|
||||
overflow: auto;
|
||||
border: 1px solid rgba(150, 165, 205, 0.12);
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(2, 3, 9, 0.42);
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-sm);
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.library-tool-import-example {
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.library-tool-import-example button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-self: end;
|
||||
gap: 8px;
|
||||
width: fit-content;
|
||||
min-height: 38px;
|
||||
padding-inline: var(--space-3);
|
||||
}
|
||||
|
||||
.library-tool-import-example .ui-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.library-tool-badge {
|
||||
display: inline-flex;
|
||||
width: fit-content;
|
||||
margin-bottom: var(--space-3);
|
||||
padding: 4px 9px;
|
||||
border: 1px solid rgba(246, 196, 83, 0.24);
|
||||
border-radius: var(--radius-pill);
|
||||
background: rgba(246, 196, 83, 0.08);
|
||||
color: var(--color-accent-gold);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.library-tool-example {
|
||||
width: min(100%, 860px);
|
||||
min-width: 0;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.library-tool-example header > div {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.library-tool-example header p {
|
||||
margin: 3px 0 0;
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.library-example-actions {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.library-reset-button {
|
||||
display: inline-grid;
|
||||
width: 40px;
|
||||
min-width: 40px;
|
||||
min-height: 40px;
|
||||
flex: 0 0 40px;
|
||||
place-items: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.library-reset-button .ui-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.library-tool-example .module-content {
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.library-tool-example .image-annotation-stage,
|
||||
.library-tool-example .images-grid img {
|
||||
max-height: 260px;
|
||||
}
|
||||
|
||||
352
website/src/styles/home/_onboarding.scss
Normal file
352
website/src/styles/home/_onboarding.scss
Normal file
|
|
@ -0,0 +1,352 @@
|
|||
// Rôle : gère le parcours d’onboarding et ses visuels sur la page home.
|
||||
|
||||
.home-onboarding {
|
||||
display: grid;
|
||||
gap: var(--space-6);
|
||||
margin-top: var(--space-6);
|
||||
padding: var(--space-6);
|
||||
}
|
||||
|
||||
.home-onboarding-heading {
|
||||
max-width: 980px;
|
||||
}
|
||||
|
||||
.home-onboarding-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
align-items: stretch;
|
||||
column-gap: clamp(var(--space-12), 5vw, 5rem);
|
||||
row-gap: var(--space-6);
|
||||
}
|
||||
|
||||
.home-onboarding-steps {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: var(--space-4);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.home-onboarding-steps h3 {
|
||||
margin: 0;
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
.home-onboarding-create-button {
|
||||
min-height: 40px;
|
||||
padding-inline: var(--space-4);
|
||||
}
|
||||
|
||||
.home-onboarding-steps-action {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
padding-top: var(--space-2);
|
||||
padding-left: calc(28px + var(--space-3));
|
||||
}
|
||||
|
||||
.home-onboarding-preview {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: var(--space-4);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.home-onboarding-preview h3 {
|
||||
margin: 0;
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
.home-onboarding-steps ol {
|
||||
display: grid;
|
||||
gap: var(--space-6);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.home-onboarding-steps li {
|
||||
display: flex;
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
gap: var(--space-3);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.home-onboarding-steps li:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.home-onboarding-steps li:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.home-onboarding-steps li::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 32px;
|
||||
bottom: calc(-1 * var(--space-6) + 4px);
|
||||
left: 13px;
|
||||
width: 1px;
|
||||
background: rgba(246, 196, 83, 0.18);
|
||||
}
|
||||
|
||||
.home-onboarding-steps li:last-child::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.home-onboarding-steps li > span {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
width: 28px;
|
||||
min-width: 28px;
|
||||
height: 28px;
|
||||
place-items: center;
|
||||
border: 1px solid rgba(246, 196, 83, 0.32);
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(246, 196, 83, 0.1);
|
||||
color: var(--color-accent-gold);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.home-onboarding-steps div {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.home-onboarding-steps strong,
|
||||
.home-onboarding-steps p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.home-onboarding-steps strong {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.home-onboarding-steps p {
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.home-onboarding-slider {
|
||||
position: relative;
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(150, 165, 205, 0.14);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(5, 7, 17, 0.38);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.home-onboarding-slider figure {
|
||||
position: relative;
|
||||
display: grid;
|
||||
min-height: 320px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.home-onboarding-slider img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 320px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.home-onboarding-slider figcaption {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: grid;
|
||||
min-height: 4.1em;
|
||||
align-content: center;
|
||||
gap: 1px;
|
||||
padding: 10px var(--space-4);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
|
||||
.home-onboarding-slider figcaption strong,
|
||||
.home-onboarding-slider figcaption span {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.home-onboarding-slider figcaption strong {
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-md);
|
||||
}
|
||||
|
||||
.home-onboarding-slider figcaption span {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.home-onboarding-dots {
|
||||
position: absolute;
|
||||
right: var(--space-3);
|
||||
bottom: calc(4.1em + var(--space-3));
|
||||
display: flex;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.home-onboarding-dots button {
|
||||
width: 10px;
|
||||
min-width: 10px;
|
||||
height: 10px;
|
||||
min-height: 10px;
|
||||
padding: 0;
|
||||
border-color: rgba(246, 196, 83, 0.36);
|
||||
border-radius: var(--radius-pill);
|
||||
background: rgba(5, 7, 17, 0.68);
|
||||
}
|
||||
|
||||
.home-onboarding-dots button.active,
|
||||
.home-onboarding-dots button:hover,
|
||||
.home-onboarding-dots button:focus-visible {
|
||||
background: var(--color-accent-gold);
|
||||
box-shadow: 0 0 10px rgba(246, 196, 83, 0.26);
|
||||
}
|
||||
|
||||
.home-onboarding-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(260px, 320px));
|
||||
gap: var(--space-4);
|
||||
justify-content: center;
|
||||
padding-top: var(--space-6);
|
||||
border-top: 1px solid rgba(150, 165, 205, 0.12);
|
||||
}
|
||||
|
||||
.home-onboarding-card {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
align-content: start;
|
||||
padding: 0;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-md);
|
||||
background:
|
||||
linear-gradient(rgba(16, 20, 38, 0.88), rgba(16, 20, 38, 0.88)) padding-box,
|
||||
radial-gradient(circle at 100% 0%, rgba(34, 211, 238, 0.42), transparent 28%) border-box,
|
||||
linear-gradient(135deg, rgba(246, 196, 83, 0.62) 0%, rgba(246, 196, 83, 0.42) 72%, rgba(34, 211, 238, 0.24) 100%) border-box;
|
||||
box-shadow: var(--shadow-sm);
|
||||
text-decoration: none;
|
||||
transition:
|
||||
border-color var(--duration-fast) var(--ease-standard),
|
||||
background var(--duration-fast) var(--ease-standard),
|
||||
box-shadow var(--duration-fast) var(--ease-standard);
|
||||
}
|
||||
|
||||
@supports (corner-shape: scoop) {
|
||||
.home-onboarding-card {
|
||||
corner-shape: scoop;
|
||||
}
|
||||
}
|
||||
|
||||
.home-onboarding-card-visual {
|
||||
position: relative;
|
||||
display: grid;
|
||||
aspect-ratio: 3 / 2;
|
||||
min-height: 0;
|
||||
place-items: center;
|
||||
overflow: hidden;
|
||||
border-bottom: 1px solid rgba(246, 196, 83, 0.42);
|
||||
background:
|
||||
radial-gradient(circle at 50% 15%, rgba(246, 196, 83, 0.12), transparent 34%),
|
||||
rgba(5, 7, 17, 0.28);
|
||||
}
|
||||
|
||||
.home-onboarding-card-visual img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.3));
|
||||
}
|
||||
|
||||
.home-onboarding-card-body {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
justify-items: center;
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.home-onboarding-card-title {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 9px;
|
||||
min-width: 0;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.home-onboarding-card-title .module-icon-svg {
|
||||
width: 20px;
|
||||
min-width: 20px;
|
||||
height: 20px;
|
||||
background: var(--color-accent-gold);
|
||||
}
|
||||
|
||||
.home-onboarding-card strong {
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-lg);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.home-onboarding-card-text {
|
||||
max-width: 30ch;
|
||||
text-align: center;
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.home-onboarding-card em {
|
||||
display: inline-flex;
|
||||
min-height: 38px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: fit-content;
|
||||
padding: 0 var(--space-3);
|
||||
border: 1px solid rgba(246, 196, 83, 0.28);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(246, 196, 83, 0.08);
|
||||
color: var(--color-accent-gold);
|
||||
font-style: normal;
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.home-onboarding-card:hover,
|
||||
.home-onboarding-card:focus-visible {
|
||||
transform: none;
|
||||
border-color: transparent;
|
||||
background:
|
||||
linear-gradient(rgba(18, 23, 44, 0.96), rgba(18, 23, 44, 0.96)) padding-box,
|
||||
radial-gradient(circle at 100% 0%, rgba(246, 196, 83, 0.26), transparent 28%) border-box,
|
||||
linear-gradient(135deg, rgba(246, 196, 83, 0.58), rgba(196, 181, 253, 0.34) 62%, rgba(34, 211, 238, 0.2)) border-box;
|
||||
box-shadow:
|
||||
var(--shadow-sm),
|
||||
0 0 18px rgba(139, 92, 246, 0.16);
|
||||
}
|
||||
|
||||
.home-visual {
|
||||
display: grid;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
width: min(100%, 640px);
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.home-visual img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: 520px;
|
||||
border-radius: var(--radius-lg);
|
||||
filter: drop-shadow(0 22px 36px rgba(0, 0, 0, 0.34));
|
||||
}
|
||||
|
||||
201
website/src/styles/home/_shared.scss
Normal file
201
website/src/styles/home/_shared.scss
Normal file
|
|
@ -0,0 +1,201 @@
|
|||
// Rôle : regroupe les fondations partagées des pages home et sections éditoriales.
|
||||
@use "../mixins";
|
||||
|
||||
.hero,
|
||||
.game-hero,
|
||||
.page-hero {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
display: grid;
|
||||
min-height: 360px;
|
||||
align-items: end;
|
||||
gap: var(--space-6);
|
||||
overflow: hidden;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-xl);
|
||||
background:
|
||||
var(--gradient-nebula),
|
||||
radial-gradient(circle at 86% 18%, rgba(246, 196, 83, 0.1), transparent 28%),
|
||||
linear-gradient(135deg, rgba(16, 20, 38, 0.98), rgba(5, 7, 17, 0.96));
|
||||
box-shadow: var(--shadow-md);
|
||||
padding: var(--space-10);
|
||||
}
|
||||
|
||||
.hero::before,
|
||||
.game-hero::before,
|
||||
.page-hero::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 2;
|
||||
padding: 1px;
|
||||
border-radius: inherit;
|
||||
background:
|
||||
radial-gradient(circle at 100% 0%, rgba(246, 196, 83, 0.5), transparent 26%),
|
||||
linear-gradient(135deg, rgba(246, 196, 83, 0.38), rgba(139, 92, 246, 0.22) 48%, rgba(196, 181, 253, 0.3));
|
||||
@include mixins.border-mask;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hero::after,
|
||||
.game-hero::after,
|
||||
.page-hero::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(5, 7, 17, 0.1), rgba(5, 7, 17, 0.52)),
|
||||
radial-gradient(circle at 82% 16%, rgba(246, 196, 83, 0.18), transparent 30%);
|
||||
}
|
||||
|
||||
.hero > *,
|
||||
.game-hero > *,
|
||||
.page-hero > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(360px, 480px);
|
||||
}
|
||||
|
||||
.game-hero {
|
||||
grid-template-columns: 1fr auto;
|
||||
--game-hero-image: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.game-hero::after {
|
||||
left: 35%;
|
||||
opacity: 0.72;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(5, 7, 17, 0.04), rgba(5, 7, 17, 0.2) 58%, rgba(5, 7, 17, 0.62) 100%),
|
||||
var(--game-hero-image);
|
||||
background-position:
|
||||
center,
|
||||
right center;
|
||||
background-repeat: no-repeat;
|
||||
background-size:
|
||||
cover,
|
||||
cover;
|
||||
mask-image: linear-gradient(90deg, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.06) 34%, rgba(0, 0, 0, 0.34) 58%, #000 88%);
|
||||
-webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.06) 34%, rgba(0, 0, 0, 0.34) 58%, #000 88%);
|
||||
}
|
||||
|
||||
.page-hero {
|
||||
min-height: 180px;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: end;
|
||||
padding: var(--space-6);
|
||||
}
|
||||
|
||||
.page-hero p:last-child {
|
||||
max-width: 720px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
max-width: 820px;
|
||||
margin-bottom: 14px;
|
||||
font-size: clamp(2rem, 4vw, var(--font-size-4xl));
|
||||
line-height: 1.05;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 10px;
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
|
||||
p,
|
||||
li,
|
||||
small,
|
||||
span {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin-bottom: 10px;
|
||||
color: var(--color-accent-gold);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 800;
|
||||
letter-spacing: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.actions,
|
||||
.card-actions,
|
||||
.toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.toolbar-stack {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.toolbar-stack > div {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.hero-library-button {
|
||||
display: inline-flex;
|
||||
width: fit-content;
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
|
||||
.library-link-button {
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.library-link-button .ui-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: var(--color-accent-gold);
|
||||
}
|
||||
|
||||
.hero-panel {
|
||||
padding: var(--space-5);
|
||||
border: 1px solid rgba(165, 180, 252, 0.14);
|
||||
border-radius: var(--radius-lg);
|
||||
background: rgba(16, 20, 38, 0.72);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.hero-panel span {
|
||||
display: block;
|
||||
background: var(--gradient-brand);
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
font-size: 56px;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.home-section-heading {
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.home-section-heading h2,
|
||||
.home-section-heading p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.home-section-heading p:not(.eyebrow) {
|
||||
max-width: 980px;
|
||||
}
|
||||
|
||||
60
website/src/styles/home/_stats.scss
Normal file
60
website/src/styles/home/_stats.scss
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
// Rôle : gère les statistiques et mentions légales de la home.
|
||||
|
||||
.home-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
.hero-stats {
|
||||
align-self: center;
|
||||
justify-self: end;
|
||||
width: min(420px, 100%);
|
||||
}
|
||||
|
||||
.home-stats article {
|
||||
min-height: 118px;
|
||||
padding: var(--space-4);
|
||||
border: 1px solid rgba(165, 180, 252, 0.14);
|
||||
border-radius: var(--radius-md);
|
||||
background:
|
||||
linear-gradient(145deg, rgba(246, 196, 83, 0.08), transparent 52%),
|
||||
rgba(7, 10, 24, 0.52);
|
||||
}
|
||||
|
||||
.home-stats strong {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
background: var(--gradient-brand);
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
font-size: 44px;
|
||||
font-weight: 900;
|
||||
line-height: 0.95;
|
||||
}
|
||||
|
||||
.home-stats span {
|
||||
display: block;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 700;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.home-legal {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
margin-top: var(--space-5);
|
||||
padding-top: var(--space-4);
|
||||
border-top: 1px solid rgba(150, 165, 205, 0.14);
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-xs);
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.home-legal p {
|
||||
max-width: 920px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
78
website/src/styles/home/_story.scss
Normal file
78
website/src/styles/home/_story.scss
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
// Rôle : gère les panneaux narratifs Nebula et les dialogues home.
|
||||
@use "../mixins";
|
||||
|
||||
.nebula-panel {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-lg);
|
||||
background: rgba(16, 20, 38, 0.42);
|
||||
box-shadow: var(--shadow-sm);
|
||||
|
||||
@include mixins.gold-panel-frame;
|
||||
}
|
||||
|
||||
.nebula-panel > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.origin-section {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(360px, 0.78fr);
|
||||
gap: var(--space-6);
|
||||
margin-top: var(--space-6);
|
||||
padding: var(--space-6);
|
||||
}
|
||||
|
||||
.origin-copy {
|
||||
min-width: 0;
|
||||
padding-right: var(--space-6);
|
||||
border-right: 2px solid rgba(246, 196, 83, 0.66);
|
||||
}
|
||||
|
||||
.home-dialogue {
|
||||
position: relative;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
|
||||
.dialogue-line {
|
||||
width: fit-content;
|
||||
max-width: min(74ch, 86%);
|
||||
margin: 0;
|
||||
padding: 8px 11px;
|
||||
border: 1px solid rgba(165, 180, 252, 0.14);
|
||||
border-radius: 8px;
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: 1.35;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.dialogue-line-user {
|
||||
justify-self: end;
|
||||
background: linear-gradient(135deg, rgba(124, 58, 237, 0.28), rgba(37, 99, 235, 0.18));
|
||||
}
|
||||
|
||||
.dialogue-line-app {
|
||||
justify-self: start;
|
||||
max-width: min(62ch, 68%);
|
||||
background: rgba(7, 10, 24, 0.48);
|
||||
}
|
||||
|
||||
.dialogue-line i {
|
||||
color: var(--color-text-secondary);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.dialogue-caption {
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-xs);
|
||||
font-style: italic;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
48
website/src/styles/toolboxes/calendar/_base.scss
Normal file
48
website/src/styles/toolboxes/calendar/_base.scss
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
// Rôle : pose la structure du module calendrier et le choix initial.
|
||||
.calendar-module {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.calendar-mode-choice {
|
||||
display: grid;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.calendar-mode-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.calendar-mode-card {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
min-height: 92px;
|
||||
align-content: center;
|
||||
padding: 12px;
|
||||
border: 1px solid rgba(246, 196, 83, 0.18);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(16, 20, 38, 0.56);
|
||||
color: var(--color-text-primary);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.calendar-mode-card:hover:not(:disabled) {
|
||||
border-color: rgba(246, 196, 83, 0.42);
|
||||
background: rgba(139, 92, 246, 0.14);
|
||||
}
|
||||
|
||||
.calendar-mode-card span {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.calendar-mode-card.is-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.58;
|
||||
}
|
||||
449
website/src/styles/toolboxes/calendar/_form.scss
Normal file
449
website/src/styles/toolboxes/calendar/_form.scss
Normal file
|
|
@ -0,0 +1,449 @@
|
|||
// Rôle : stylise le formulaire, les sélecteurs et les actions calendrier.
|
||||
.calendar-event-form {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.calendar-form-row {
|
||||
display: grid;
|
||||
align-items: end;
|
||||
gap: 8px 10px;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.calendar-form-main-row {
|
||||
grid-template-columns: minmax(0, 1fr) 42px auto;
|
||||
}
|
||||
|
||||
.calendar-form-time-row {
|
||||
grid-template-columns: minmax(112px, 136px) repeat(2, minmax(86px, 104px)) minmax(70px, auto) minmax(62px, auto);
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
.calendar-event-form-month .calendar-form-time-row {
|
||||
grid-template-columns: repeat(2, minmax(96px, 116px)) repeat(2, minmax(86px, 104px)) minmax(70px, auto) minmax(66px, auto);
|
||||
}
|
||||
|
||||
.calendar-form-month-row {
|
||||
grid-template-columns: max-content repeat(2, minmax(198px, 226px)) minmax(136px, auto);
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
.calendar-event-form label,
|
||||
.calendar-day-field,
|
||||
.calendar-color-picker,
|
||||
.calendar-repeat-field,
|
||||
.calendar-month-event-repeat-field,
|
||||
.calendar-month-repeat-field,
|
||||
.calendar-alert-type-field {
|
||||
display: grid;
|
||||
gap: 5px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.calendar-event-form label span,
|
||||
.calendar-day-field > span,
|
||||
.calendar-color-picker > span,
|
||||
.calendar-repeat-field > span,
|
||||
.calendar-month-event-repeat-field > span,
|
||||
.calendar-month-repeat-field > span,
|
||||
.calendar-alert-type-field > span,
|
||||
.calendar-alert-offsets legend {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 900;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.calendar-event-form input:not([type="checkbox"]),
|
||||
.calendar-event-form select {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.calendar-month-date-dropdown {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.calendar-month-date-trigger {
|
||||
display: grid;
|
||||
grid-template-columns: 18px minmax(0, 1fr) 14px;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
width: 100%;
|
||||
min-height: 36px;
|
||||
padding: 0 8px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background-color: rgba(15, 23, 42, 0.64);
|
||||
color: var(--color-text-primary);
|
||||
font-weight: 900;
|
||||
font-variant-numeric: tabular-nums;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.calendar-month-date-trigger span {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.calendar-month-date-trigger:hover,
|
||||
.calendar-month-date-dropdown:focus-within .calendar-month-date-trigger {
|
||||
border-color: rgba(196, 181, 253, 0.22);
|
||||
background-color: rgba(21, 26, 48, 0.58);
|
||||
}
|
||||
|
||||
.calendar-month-date-trigger .ui-icon {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.calendar-month-date-trigger .ui-icon-chevron-down {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
justify-self: end;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.calendar-time-field input {
|
||||
padding-inline: 10px 4px;
|
||||
font-size: 12px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.calendar-month-date-picker {
|
||||
position: absolute;
|
||||
top: calc(100% + 6px);
|
||||
left: 0;
|
||||
z-index: 20;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, minmax(0, 1fr));
|
||||
gap: 3px;
|
||||
min-width: 0;
|
||||
padding: 4px;
|
||||
border: 1px solid rgba(150, 165, 205, 0.16);
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(8, 11, 24, 0.98);
|
||||
box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: translateY(-4px);
|
||||
transition:
|
||||
opacity var(--duration-fast) var(--ease-standard),
|
||||
transform var(--duration-fast) var(--ease-standard);
|
||||
}
|
||||
|
||||
.calendar-month-date-picker {
|
||||
width: min(300px, calc(100vw - 48px));
|
||||
}
|
||||
|
||||
.calendar-month-date-picker.is-weekday-mode {
|
||||
grid-template-columns: 34px repeat(7, minmax(48px, 1fr));
|
||||
width: min(420px, calc(100vw - 48px));
|
||||
}
|
||||
|
||||
.calendar-month-date-dropdown:focus-within .calendar-month-date-picker {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.calendar-month-date-dropdown.is-aligned-end .calendar-month-date-picker {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.calendar-month-date-picker button {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-width: 0;
|
||||
min-height: 22px;
|
||||
padding: 0;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(16, 20, 38, 0.58);
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.calendar-month-date-picker-header {
|
||||
grid-column: 1 / -1;
|
||||
display: grid;
|
||||
grid-template-columns: 56px minmax(0, 1fr) 56px;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.calendar-month-date-picker-header strong {
|
||||
min-width: 0;
|
||||
color: var(--color-text-primary);
|
||||
overflow: hidden;
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
text-transform: capitalize;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.calendar-month-date-picker-header button {
|
||||
min-height: 24px;
|
||||
padding-inline: 6px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.calendar-month-date-picker-day {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-height: 18px;
|
||||
color: var(--color-text-muted);
|
||||
overflow: hidden;
|
||||
font-size: 9px;
|
||||
font-weight: 900;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.calendar-month-date-picker-week {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-height: 24px;
|
||||
color: var(--color-accent-gold);
|
||||
font-size: 10px;
|
||||
font-weight: 900;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.calendar-month-date-picker.is-weekday-mode button {
|
||||
min-height: 26px;
|
||||
padding-inline: 3px;
|
||||
overflow: hidden;
|
||||
font-size: 10px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.calendar-month-date-picker button.is-outside,
|
||||
.calendar-month-date-picker button:disabled {
|
||||
opacity: 0.34;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.calendar-month-date-picker button:hover:not(:disabled),
|
||||
.calendar-month-date-picker button.active {
|
||||
border-color: rgba(246, 196, 83, 0.58);
|
||||
background: rgba(139, 92, 246, 0.3);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.calendar-alert-offsets {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, max-content);
|
||||
align-items: center;
|
||||
gap: 5px 8px;
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.calendar-alert-offsets legend {
|
||||
grid-column: 1 / -1;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.calendar-alert-offsets label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
min-height: 24px;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.calendar-alert-offsets input {
|
||||
flex: 0 0 auto;
|
||||
width: 20px;
|
||||
min-width: 20px;
|
||||
max-width: 20px;
|
||||
height: 20px;
|
||||
min-height: 20px;
|
||||
max-height: 20px;
|
||||
}
|
||||
|
||||
.calendar-alert-mode-switch {
|
||||
align-self: start;
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.calendar-alert-type-field {
|
||||
align-self: start;
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.calendar-color-picker {
|
||||
position: relative;
|
||||
align-self: end;
|
||||
}
|
||||
|
||||
.calendar-color-toggle {
|
||||
width: 32px;
|
||||
min-width: 32px;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.calendar-repeat-switch {
|
||||
align-self: end;
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.calendar-repeat-switch .ui-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.calendar-month-repeat-field {
|
||||
align-self: end;
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.calendar-month-repeat-switch {
|
||||
align-self: end;
|
||||
grid-template-columns: repeat(2, 30px);
|
||||
width: max-content;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.calendar-month-repeat-switch button {
|
||||
width: 30px;
|
||||
min-width: 30px;
|
||||
min-height: 28px;
|
||||
}
|
||||
|
||||
.calendar-month-repeat-switch .ui-icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.calendar-month-event-repeat-switch {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 3px;
|
||||
min-height: 36px;
|
||||
padding: 3px;
|
||||
border: 1px solid rgba(150, 165, 205, 0.14);
|
||||
border-radius: var(--radius-pill);
|
||||
background: rgba(11, 14, 27, 0.72);
|
||||
}
|
||||
|
||||
.calendar-month-event-repeat-switch button {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-width: 0;
|
||||
min-height: 28px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: var(--radius-pill);
|
||||
background: transparent;
|
||||
color: var(--color-text-secondary);
|
||||
overflow: hidden;
|
||||
font-size: 11px;
|
||||
font-weight: 900;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.calendar-month-event-repeat-switch .ui-icon {
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
}
|
||||
|
||||
.calendar-month-event-repeat-switch button.active {
|
||||
background: rgba(139, 92, 246, 0.72);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.calendar-month-event-repeat-switch button:disabled {
|
||||
opacity: 0.35;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.calendar-form-delete-button {
|
||||
width: 34px;
|
||||
min-width: 34px;
|
||||
min-height: 32px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.calendar-delete-actions {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.calendar-color-menu {
|
||||
grid-template-columns: repeat(3, 34px);
|
||||
}
|
||||
|
||||
.calendar-color-picker .calendar-color-menu {
|
||||
right: 0;
|
||||
left: auto;
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.calendar-color-picker:hover .calendar-color-menu,
|
||||
.calendar-color-picker:focus-within .calendar-color-menu {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.calendar-color-picker .calendar-color-menu::before,
|
||||
.calendar-color-picker .calendar-color-menu::after {
|
||||
right: 9px;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.calendar-form-alert-row {
|
||||
grid-template-columns: minmax(210px, auto) auto minmax(0, 1fr);
|
||||
align-items: start;
|
||||
column-gap: 20px;
|
||||
}
|
||||
|
||||
.calendar-form-alert-row .calendar-form-actions {
|
||||
align-self: end;
|
||||
}
|
||||
|
||||
.calendar-form-actions {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
justify-content: end;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.calendar-form-actions button {
|
||||
min-height: 34px;
|
||||
min-width: 0;
|
||||
padding-inline: 10px;
|
||||
}
|
||||
|
||||
.calendar-form-error {
|
||||
margin: 0;
|
||||
}
|
||||
159
website/src/styles/toolboxes/calendar/_month.scss
Normal file
159
website/src/styles/toolboxes/calendar/_month.scss
Normal file
|
|
@ -0,0 +1,159 @@
|
|||
// Rôle : stylise la grille mensuelle et ses barres multi-jours.
|
||||
.calendar-month-grid {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, minmax(0, 1fr));
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
overflow: visible;
|
||||
border: 1px solid rgba(150, 165, 205, 0.13);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(5, 7, 17, 0.22);
|
||||
}
|
||||
|
||||
.calendar-month-bars-layer {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 3;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, minmax(0, 1fr));
|
||||
grid-template-rows: 34px repeat(var(--calendar-month-week-count, 5), minmax(86px, 1fr));
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.calendar-month-header {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-height: 34px;
|
||||
min-width: 0;
|
||||
padding: 0 4px;
|
||||
border-bottom: 1px solid rgba(150, 165, 205, 0.14);
|
||||
background: rgba(10, 13, 27, 0.96);
|
||||
color: var(--color-text-secondary);
|
||||
overflow: hidden;
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
text-overflow: ellipsis;
|
||||
text-transform: capitalize;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.calendar-month-cell {
|
||||
position: relative;
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 5px;
|
||||
min-width: 0;
|
||||
min-height: 86px;
|
||||
padding: 6px;
|
||||
border-right: 1px solid rgba(150, 165, 205, 0.08);
|
||||
border-bottom: 1px solid rgba(150, 165, 205, 0.08);
|
||||
background: rgba(9, 12, 25, 0.34);
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
.calendar-month-cell:hover,
|
||||
.calendar-month-cell.is-form-selected {
|
||||
background: rgba(246, 196, 83, 0.09);
|
||||
}
|
||||
|
||||
.calendar-month-cell.is-selected {
|
||||
background: rgba(139, 92, 246, 0.18);
|
||||
}
|
||||
|
||||
.calendar-month-cell.is-today {
|
||||
box-shadow: inset 0 0 0 1px rgba(246, 196, 83, 0.58);
|
||||
background: rgba(246, 196, 83, 0.08);
|
||||
}
|
||||
|
||||
.calendar-month-cell.is-outside {
|
||||
cursor: default;
|
||||
background: rgba(5, 7, 17, 0.18);
|
||||
}
|
||||
|
||||
.calendar-month-day-number {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.calendar-month-now-indicator {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
padding: 1px 5px;
|
||||
border: 1px solid rgba(246, 196, 83, 0.48);
|
||||
border-radius: var(--radius-pill);
|
||||
background: rgba(11, 14, 27, 0.92);
|
||||
color: var(--color-accent-gold);
|
||||
font-size: 9px;
|
||||
font-weight: 900;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.calendar-month-bar {
|
||||
align-self: start;
|
||||
min-width: 0;
|
||||
min-height: var(--calendar-month-bar-height, 28px);
|
||||
margin: calc(28px + (var(--calendar-event-lane, 0) * (var(--calendar-month-bar-height, 28px) + var(--calendar-month-bar-gap, 4px)))) 4px 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 255, 255, 0.22);
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(139, 92, 246, 0.82);
|
||||
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.calendar-month-bar.is-active {
|
||||
outline: 2px solid rgba(246, 196, 83, 0.72);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
.calendar-month-bar-button {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
min-height: var(--calendar-month-bar-height, 28px);
|
||||
padding: 0 9px;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
color: white;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.calendar-month-bar strong {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
font-size: 10px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.calendar-month-bar.calendar-event-gold .calendar-month-bar-button {
|
||||
color: #0b0e1b;
|
||||
}
|
||||
|
||||
.calendar-month-bar.calendar-event-gold {
|
||||
border-color: rgba(11, 14, 27, 0.28);
|
||||
background: rgba(230, 176, 55, 0.92);
|
||||
}
|
||||
|
||||
.calendar-month-bar.calendar-event-cyan {
|
||||
background: rgba(34, 211, 238, 0.78);
|
||||
}
|
||||
|
||||
.calendar-month-bar.calendar-event-pink {
|
||||
background: rgba(217, 70, 239, 0.78);
|
||||
}
|
||||
|
||||
.calendar-month-bar.calendar-event-green {
|
||||
background: rgba(34, 197, 94, 0.78);
|
||||
}
|
||||
|
||||
.calendar-month-bar.calendar-event-gray {
|
||||
background: rgba(125, 135, 159, 0.84);
|
||||
}
|
||||
52
website/src/styles/toolboxes/calendar/_responsive.scss
Normal file
52
website/src/styles/toolboxes/calendar/_responsive.scss
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
// Rôle : regroupe les ajustements responsive du calendrier.
|
||||
@media (max-width: 760px) {
|
||||
.calendar-form-main-row,
|
||||
.calendar-form-time-row,
|
||||
.calendar-form-month-row,
|
||||
.calendar-form-alert-row {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.calendar-mode-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.calendar-alert-offsets,
|
||||
.calendar-alert-mode-switch,
|
||||
.calendar-form-actions,
|
||||
.calendar-repeat-field,
|
||||
.calendar-month-event-repeat-field,
|
||||
.calendar-month-repeat-field,
|
||||
.calendar-form-error {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.calendar-repeat-switch,
|
||||
.calendar-month-repeat-switch,
|
||||
.calendar-month-event-repeat-switch,
|
||||
.calendar-alert-mode-switch,
|
||||
.calendar-color-picker {
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.calendar-week-grid {
|
||||
grid-template-columns: 34px repeat(7, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.calendar-day-header {
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.calendar-month-header {
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.calendar-month-cell {
|
||||
min-height: 72px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.calendar-month-bars-layer {
|
||||
grid-template-rows: 34px repeat(var(--calendar-month-week-count, 5), minmax(72px, 1fr));
|
||||
}
|
||||
}
|
||||
359
website/src/styles/toolboxes/calendar/_week.scss
Normal file
359
website/src/styles/toolboxes/calendar/_week.scss
Normal file
|
|
@ -0,0 +1,359 @@
|
|||
// Rôle : stylise la grille hebdomadaire et ses événements.
|
||||
.calendar-week-options {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-self: end;
|
||||
gap: 10px;
|
||||
min-width: 0;
|
||||
padding: 2px 0;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.calendar-month-toolbar {
|
||||
display: grid;
|
||||
grid-template-columns: 64px minmax(0, 1fr) auto 64px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.calendar-month-toolbar strong {
|
||||
min-width: 0;
|
||||
color: var(--color-text-primary);
|
||||
overflow: hidden;
|
||||
font-size: 15px;
|
||||
font-weight: 900;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
text-transform: capitalize;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.calendar-month-toolbar button {
|
||||
min-height: 32px;
|
||||
min-width: 0;
|
||||
padding-inline: 9px;
|
||||
}
|
||||
|
||||
.calendar-hide-hours-switch {
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.calendar-hide-hours-switch .ui-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.calendar-week-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 42px repeat(7, minmax(0, 1fr));
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
min-width: 0;
|
||||
overflow: visible;
|
||||
border: 1px solid rgba(150, 165, 205, 0.13);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(5, 7, 17, 0.22);
|
||||
}
|
||||
|
||||
.calendar-time-header,
|
||||
.calendar-day-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 4;
|
||||
min-height: 40px;
|
||||
border-bottom: 1px solid rgba(150, 165, 205, 0.14);
|
||||
background: rgba(10, 13, 27, 0.96);
|
||||
}
|
||||
|
||||
.calendar-time-header {
|
||||
left: 0;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.calendar-day-header {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-width: 0;
|
||||
padding: 0 2px;
|
||||
color: var(--color-text-secondary);
|
||||
overflow: hidden;
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
text-overflow: ellipsis;
|
||||
text-transform: capitalize;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.calendar-time-column {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
z-index: 3;
|
||||
display: grid;
|
||||
border-right: 1px solid rgba(150, 165, 205, 0.12);
|
||||
background: rgba(10, 13, 27, 0.92);
|
||||
}
|
||||
|
||||
.calendar-time-column span {
|
||||
display: block;
|
||||
min-width: 0;
|
||||
padding: 2px 4px 0 0;
|
||||
border-top: 1px solid rgba(150, 165, 205, 0.18);
|
||||
color: var(--color-text-muted);
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
font-variant-numeric: tabular-nums;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.calendar-time-column .calendar-hidden-hours-label {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
border-top: 1px solid rgba(246, 196, 83, 0.18);
|
||||
border-bottom: 1px solid rgba(246, 196, 83, 0.12);
|
||||
background:
|
||||
repeating-linear-gradient(
|
||||
-45deg,
|
||||
rgba(246, 196, 83, 0.04) 0 4px,
|
||||
rgba(246, 196, 83, 0.1) 4px 5px
|
||||
),
|
||||
rgba(246, 196, 83, 0.035);
|
||||
color: rgba(246, 196, 83, 0.78);
|
||||
font-size: 9px;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.calendar-day-column {
|
||||
position: relative;
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
border-right: 1px solid rgba(150, 165, 205, 0.08);
|
||||
}
|
||||
|
||||
.calendar-day-column.is-today {
|
||||
background: rgba(246, 196, 83, 0.025);
|
||||
}
|
||||
|
||||
.calendar-hour-cell {
|
||||
display: grid;
|
||||
grid-template-rows: repeat(2, minmax(0, 1fr));
|
||||
min-width: 0;
|
||||
border-top: 1px solid rgba(150, 165, 205, 0.3);
|
||||
}
|
||||
|
||||
.calendar-hidden-hours-cell {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-width: 0;
|
||||
border-top: 1px solid rgba(246, 196, 83, 0.16);
|
||||
border-bottom: 1px solid rgba(246, 196, 83, 0.08);
|
||||
background:
|
||||
repeating-linear-gradient(
|
||||
-45deg,
|
||||
rgba(246, 196, 83, 0.02) 0 5px,
|
||||
rgba(246, 196, 83, 0.075) 5px 6px
|
||||
),
|
||||
rgba(246, 196, 83, 0.025);
|
||||
}
|
||||
|
||||
.calendar-hidden-hours-cell span {
|
||||
max-width: calc(100% - 8px);
|
||||
padding: 1px 7px;
|
||||
border: 1px solid rgba(246, 196, 83, 0.32);
|
||||
border-radius: var(--radius-pill);
|
||||
background: rgba(10, 13, 27, 0.82);
|
||||
color: rgba(246, 196, 83, 0.86);
|
||||
overflow: hidden;
|
||||
font-size: 9px;
|
||||
font-weight: 900;
|
||||
line-height: 1.1;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.calendar-slot {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
.calendar-slot + .calendar-slot {
|
||||
border-top: 1px dotted rgba(150, 165, 205, 0.12);
|
||||
}
|
||||
|
||||
.calendar-slot:hover,
|
||||
.calendar-slot.is-form-selected {
|
||||
background: rgba(246, 196, 83, 0.09);
|
||||
}
|
||||
|
||||
.calendar-slot.is-selected {
|
||||
background: rgba(139, 92, 246, 0.18);
|
||||
}
|
||||
|
||||
.calendar-events-layer {
|
||||
position: absolute;
|
||||
inset: 0 2px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.calendar-now-line {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 3;
|
||||
height: 0;
|
||||
border-top: 1px solid rgba(246, 196, 83, 0.9);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.calendar-now-line::before {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
left: -4px;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: var(--radius-pill);
|
||||
background: var(--color-accent-gold);
|
||||
box-shadow: 0 0 12px rgba(246, 196, 83, 0.7);
|
||||
content: "";
|
||||
}
|
||||
|
||||
.calendar-now-line span {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
right: 3px;
|
||||
padding: 1px 4px;
|
||||
border: 1px solid rgba(246, 196, 83, 0.48);
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(11, 14, 27, 0.92);
|
||||
color: var(--color-accent-gold);
|
||||
font-size: 9px;
|
||||
font-weight: 900;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.calendar-event {
|
||||
position: absolute;
|
||||
left: calc((100% / var(--calendar-event-lane-count, 1)) * var(--calendar-event-lane, 0));
|
||||
width: calc((100% / var(--calendar-event-lane-count, 1)) - 2px);
|
||||
z-index: 2;
|
||||
display: block;
|
||||
min-height: 24px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 255, 255, 0.22);
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(139, 92, 246, 0.78);
|
||||
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.calendar-event.is-active {
|
||||
outline: 2px solid rgba(246, 196, 83, 0.72);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
.calendar-event-button {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 1px;
|
||||
min-width: 0;
|
||||
padding: 5px 7px;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
color: white;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.calendar-event-button:hover,
|
||||
.calendar-event-button:focus-visible,
|
||||
.calendar-month-bar-button:hover,
|
||||
.calendar-month-bar-button:focus-visible {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.calendar-event-button > strong,
|
||||
.calendar-event-button > span {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.calendar-event-button > strong {
|
||||
font-size: 10px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.calendar-event-button > span {
|
||||
font-size: 9px;
|
||||
opacity: 0.86;
|
||||
}
|
||||
|
||||
.calendar-event.is-compact {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.calendar-event.is-compact .calendar-event-button {
|
||||
place-items: center;
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
.calendar-event-tooltip {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.calendar-event-tooltip strong,
|
||||
.calendar-event-tooltip span {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.calendar-event-tooltip strong {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.calendar-event-gold {
|
||||
border-color: rgba(11, 14, 27, 0.28);
|
||||
background: rgba(230, 176, 55, 0.9);
|
||||
color: #0b0e1b;
|
||||
}
|
||||
|
||||
.calendar-event-gold .calendar-event-button {
|
||||
color: #0b0e1b;
|
||||
}
|
||||
|
||||
.calendar-event-gold .calendar-event-button > span {
|
||||
color: rgba(11, 14, 27, 0.76);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.calendar-event-cyan {
|
||||
background: rgba(34, 211, 238, 0.72);
|
||||
}
|
||||
|
||||
.calendar-event-pink {
|
||||
background: rgba(217, 70, 239, 0.72);
|
||||
}
|
||||
|
||||
.calendar-event-green {
|
||||
background: rgba(34, 197, 94, 0.72);
|
||||
}
|
||||
|
||||
.calendar-event-gray {
|
||||
background: rgba(125, 135, 159, 0.78);
|
||||
}
|
||||
179
website/src/styles/toolboxes/equipment-planner/_details.scss
Normal file
179
website/src/styles/toolboxes/equipment-planner/_details.scss
Normal file
|
|
@ -0,0 +1,179 @@
|
|||
// Rôle : stylise les détails, formulaires et traits equipment planner.
|
||||
.equipment-planner-craft-tab {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.equipment-planner-readonly-text,
|
||||
.equipment-planner-trait-readonly,
|
||||
.equipment-planner-material-readonly {
|
||||
margin: 0;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.equipment-planner-display-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.equipment-planner-display-panel {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
padding: 12px;
|
||||
border: 1px solid rgba(165, 180, 252, 0.12);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(5, 7, 17, 0.34);
|
||||
}
|
||||
|
||||
.equipment-planner-display-panel h4 {
|
||||
margin: 0;
|
||||
color: var(--color-accent-gold);
|
||||
font-size: var(--font-size-md);
|
||||
}
|
||||
|
||||
.equipment-planner-display-panel ul {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.equipment-planner-display-panel li {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.equipment-planner-display-stat {
|
||||
grid-template-columns: 18px minmax(0, 1fr) auto !important;
|
||||
}
|
||||
|
||||
.equipment-planner-display-stat .ui-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: var(--color-accent-gold);
|
||||
}
|
||||
|
||||
.equipment-planner-display-panel p {
|
||||
margin: 0;
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.equipment-planner-display-panel b {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.equipment-planner-display-socket {
|
||||
grid-template-columns: 24px minmax(0, 1fr) !important;
|
||||
}
|
||||
|
||||
.equipment-planner-display-socket > div {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.equipment-planner-display-socket strong,
|
||||
.equipment-planner-display-socket small {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.equipment-planner-display-socket small {
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
.equipment-planner-trait-readonly,
|
||||
.equipment-planner-material-readonly {
|
||||
display: flex;
|
||||
grid-column: 1 / -1;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.equipment-planner-trait-readonly .ui-icon {
|
||||
width: 15px;
|
||||
min-width: 15px;
|
||||
height: 15px;
|
||||
color: var(--color-accent-gold);
|
||||
}
|
||||
|
||||
.equipment-planner-trait-readonly span,
|
||||
.equipment-planner-material-readonly span,
|
||||
.equipment-planner-socket-heading strong {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.equipment-planner-trait-readonly b,
|
||||
.equipment-planner-material-readonly b {
|
||||
margin-left: auto;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.equipment-planner-field,
|
||||
.equipment-planner-panel {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.equipment-planner-field textarea {
|
||||
min-height: 70px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.equipment-planner-panel {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.equipment-planner-trait-form {
|
||||
grid-template-columns: 44px minmax(110px, 0.7fr) minmax(120px, 1fr) minmax(88px, 0.45fr) auto;
|
||||
}
|
||||
|
||||
.equipment-planner-trait-list,
|
||||
.equipment-planner-trait-category {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.equipment-planner-trait-category {
|
||||
padding: 8px;
|
||||
border: 1px solid rgba(165, 180, 252, 0.08);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(21, 26, 48, 0.22);
|
||||
}
|
||||
|
||||
.equipment-planner-trait-category-header {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.equipment-planner-trait-category-header strong {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.equipment-planner-trait {
|
||||
display: grid;
|
||||
grid-template-columns: 30px 44px minmax(90px, 0.7fr) minmax(120px, 1fr) minmax(72px, 0.5fr) 30px;
|
||||
gap: 7px;
|
||||
align-items: center;
|
||||
}
|
||||
242
website/src/styles/toolboxes/equipment-planner/_items.scss
Normal file
242
website/src/styles/toolboxes/equipment-planner/_items.scss
Normal file
|
|
@ -0,0 +1,242 @@
|
|||
// Rôle : stylise les sections, items, onglets et modes d'édition equipment planner.
|
||||
.equipment-planner-type-section {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.equipment-planner-list {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.equipment-planner-type-section.is-drop-target,
|
||||
.equipment-planner-item.is-drop-target,
|
||||
.equipment-planner-trait-category.is-drop-target,
|
||||
.equipment-planner-trait.is-drop-target {
|
||||
border-color: rgba(246, 196, 83, 0.72);
|
||||
}
|
||||
|
||||
.equipment-planner-type-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.equipment-planner-type-title h3 {
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-md);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.equipment-planner-type-icon {
|
||||
display: inline-grid;
|
||||
width: 28px;
|
||||
min-width: 28px;
|
||||
height: 28px;
|
||||
place-items: center;
|
||||
border: 1px solid rgba(246, 196, 83, 0.2);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(246, 196, 83, 0.08);
|
||||
color: var(--color-accent-gold);
|
||||
}
|
||||
|
||||
.equipment-planner-type-icon .ui-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.equipment-planner-type-actions {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.equipment-planner-type-boundary-drop-zone {
|
||||
min-height: 7px;
|
||||
border-radius: var(--radius-pill);
|
||||
}
|
||||
|
||||
.equipment-planner-type-boundary-drop-zone.is-drop-target {
|
||||
background: rgba(246, 196, 83, 0.5);
|
||||
}
|
||||
|
||||
.equipment-planner-equipment-list {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.equipment-planner-item {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
border: 1px solid rgba(165, 180, 252, 0.12);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(5, 7, 17, 0.36);
|
||||
}
|
||||
|
||||
.equipment-planner-item.is-inactive {
|
||||
opacity: 0.68;
|
||||
}
|
||||
|
||||
.equipment-planner-line {
|
||||
display: grid;
|
||||
grid-template-columns: 30px minmax(0, 1fr) minmax(190px, auto) 34px 30px;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.equipment-planner-name {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
color: var(--color-text-primary);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.equipment-planner-identity {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.equipment-planner-include-switch {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-self: end;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 900;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.equipment-planner-include-switch input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.equipment-planner-include-switch > span {
|
||||
position: relative;
|
||||
width: 36px;
|
||||
min-width: 36px;
|
||||
height: 20px;
|
||||
border: 1px solid rgba(165, 180, 252, 0.18);
|
||||
border-radius: var(--radius-pill);
|
||||
background: rgba(15, 23, 42, 0.8);
|
||||
}
|
||||
|
||||
.equipment-planner-include-switch > span::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-text-muted);
|
||||
transition: transform var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
|
||||
}
|
||||
|
||||
.equipment-planner-include-switch input:checked + span {
|
||||
border-color: rgba(246, 196, 83, 0.48);
|
||||
background: rgba(246, 196, 83, 0.16);
|
||||
}
|
||||
|
||||
.equipment-planner-include-switch input:checked + span::before {
|
||||
transform: translateX(16px);
|
||||
background: var(--color-accent-gold);
|
||||
}
|
||||
|
||||
.equipment-planner-include-switch b {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.equipment-planner-details {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
padding: 0 0 0 48px;
|
||||
}
|
||||
|
||||
.equipment-planner-tabs {
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
align-items: stretch;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(165, 180, 252, 0.12);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(5, 7, 17, 0.36);
|
||||
}
|
||||
|
||||
.equipment-planner-tab {
|
||||
display: inline-flex;
|
||||
min-height: 34px;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
padding: 0 10px;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.equipment-planner-tab + .equipment-planner-tab {
|
||||
border-left: 1px solid rgba(165, 180, 252, 0.1);
|
||||
}
|
||||
|
||||
.equipment-planner-tab.active {
|
||||
background:
|
||||
linear-gradient(135deg, rgba(246, 196, 83, 0.12), rgba(139, 92, 246, 0.12)),
|
||||
rgba(21, 26, 48, 0.64);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.equipment-planner-edit-mode-button {
|
||||
display: inline-flex;
|
||||
min-height: 34px;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
padding: 0 10px;
|
||||
border: 0;
|
||||
border-left: 1px solid rgba(165, 180, 252, 0.1);
|
||||
border-radius: 0;
|
||||
background: rgba(21, 26, 48, 0.42);
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.equipment-planner-edit-mode-button.active {
|
||||
color: var(--color-accent-gold);
|
||||
}
|
||||
|
||||
.equipment-planner-edit-mode-button .ui-icon {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.equipment-planner-tab .ui-icon,
|
||||
.equipment-planner-percent-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.equipment-planner-percent-icon {
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
color: var(--color-accent-gold);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 900;
|
||||
}
|
||||
124
website/src/styles/toolboxes/equipment-planner/_pickers.scss
Normal file
124
website/src/styles/toolboxes/equipment-planner/_pickers.scss
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
// Rôle : stylise les sélecteurs et le formulaire d'ajout equipment planner.
|
||||
.equipment-planner-module {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.equipment-planner-add-form {
|
||||
grid-template-columns: 44px minmax(180px, 1fr) auto;
|
||||
}
|
||||
|
||||
.equipment-planner-picker {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.equipment-planner-picker-trigger,
|
||||
.equipment-planner-picker-option,
|
||||
.equipment-planner-color-option {
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
min-height: 36px;
|
||||
padding: 0;
|
||||
border: 1px solid rgba(165, 180, 252, 0.12);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(21, 26, 48, 0.58);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.equipment-planner-picker-trigger {
|
||||
grid-template-columns: 1fr 10px;
|
||||
width: 44px;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.equipment-planner-shape-picker .equipment-planner-picker-trigger {
|
||||
grid-template-columns: 28px 10px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.equipment-planner-add-form .equipment-planner-picker-trigger,
|
||||
.equipment-planner-add-form input,
|
||||
.equipment-planner-add-form button {
|
||||
min-height: 42px;
|
||||
}
|
||||
|
||||
.equipment-planner-picker-trigger .ui-icon:first-child,
|
||||
.equipment-planner-picker-option .ui-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.equipment-planner-picker-trigger .equipment-planner-socket-icon {
|
||||
width: 26px;
|
||||
min-width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
.equipment-planner-picker-trigger .equipment-planner-socket-icon .ui-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.equipment-planner-shape-picker .equipment-planner-picker-trigger .equipment-planner-socket-icon,
|
||||
.equipment-planner-shape-picker .equipment-planner-picker-option .equipment-planner-socket-icon {
|
||||
width: 28px;
|
||||
min-width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.equipment-planner-shape-picker .equipment-planner-picker-trigger .equipment-planner-socket-icon .ui-icon,
|
||||
.equipment-planner-shape-picker .equipment-planner-picker-option .equipment-planner-socket-icon .ui-icon {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
.equipment-planner-picker-trigger .ui-icon:last-child {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
}
|
||||
|
||||
.equipment-planner-picker-trigger.active,
|
||||
.equipment-planner-picker-option.active,
|
||||
.equipment-planner-color-option.active {
|
||||
border-color: rgba(246, 196, 83, 0.55);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(246, 196, 83, 0.12), rgba(139, 92, 246, 0.12)),
|
||||
rgba(21, 26, 48, 0.76);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.equipment-planner-picker-menu {
|
||||
position: fixed;
|
||||
z-index: 12;
|
||||
width: max-content;
|
||||
max-width: calc(100vw - 16px);
|
||||
padding: 8px;
|
||||
border: 1px solid rgba(165, 180, 252, 0.14);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(9, 12, 28, 0.98);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.equipment-planner-picker-grid,
|
||||
.equipment-planner-color-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--picker-columns, 5), 32px);
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.equipment-planner-picker-option {
|
||||
width: 32px;
|
||||
min-width: 32px;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.equipment-planner-color-grid {
|
||||
grid-template-columns: repeat(var(--picker-columns, 6), 28px);
|
||||
}
|
||||
|
||||
.equipment-planner-color-option {
|
||||
width: 28px;
|
||||
min-width: 28px;
|
||||
min-height: 28px;
|
||||
}
|
||||
335
website/src/styles/toolboxes/equipment-planner/_sockets.scss
Normal file
335
website/src/styles/toolboxes/equipment-planner/_sockets.scss
Normal file
|
|
@ -0,0 +1,335 @@
|
|||
// Rôle : stylise les sertissages, couleurs et ajustements responsive equipment planner.
|
||||
.equipment-planner-material-form {
|
||||
grid-template-columns: minmax(160px, 1fr) 82px auto;
|
||||
}
|
||||
|
||||
.equipment-planner-materials li {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 82px 30px;
|
||||
gap: 7px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-form {
|
||||
grid-template-columns: minmax(160px, 1fr) 44px 44px auto;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-card {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
padding: 10px;
|
||||
border: 1px solid rgba(165, 180, 252, 0.1);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(5, 7, 17, 0.34);
|
||||
}
|
||||
|
||||
.equipment-planner-socket-heading {
|
||||
grid-template-columns: 30px minmax(0, 1fr) 30px;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-heading input {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-token {
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 2px solid rgba(245, 247, 255, 0.36);
|
||||
box-shadow: 0 0 18px rgba(246, 196, 83, 0.16);
|
||||
}
|
||||
|
||||
.equipment-planner-socket-icon {
|
||||
display: inline-grid;
|
||||
width: 24px;
|
||||
min-width: 24px;
|
||||
height: 24px;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-icon .ui-icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background: var(--equipment-socket-icon-color, currentColor);
|
||||
color: var(--equipment-socket-icon-color, currentColor) !important;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-icon.color-red {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-icon.color-orange {
|
||||
color: #f97316;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-icon.color-amber {
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-icon.color-yellow {
|
||||
color: var(--color-accent-gold);
|
||||
}
|
||||
|
||||
.equipment-planner-socket-icon.color-lime {
|
||||
color: #84cc16;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-icon.color-green {
|
||||
color: #22c55e;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-icon.color-teal {
|
||||
color: #14b8a6;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-icon.color-cyan {
|
||||
color: var(--color-accent-cyan);
|
||||
}
|
||||
|
||||
.equipment-planner-socket-icon.color-blue {
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-icon.color-indigo {
|
||||
color: var(--color-accent-indigo);
|
||||
}
|
||||
|
||||
.equipment-planner-socket-icon.color-violet {
|
||||
color: #7c3aed;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-icon.color-purple {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.equipment-planner-socket-icon.color-pink {
|
||||
color: var(--color-accent-pink);
|
||||
}
|
||||
|
||||
.equipment-planner-socket-icon.color-rose {
|
||||
color: #f43f5e;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-icon.color-white {
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-icon.color-gray {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-icon.color-black {
|
||||
color: #020617;
|
||||
}
|
||||
|
||||
.equipment-planner-color-swatch {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid rgba(245, 247, 255, 0.28);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-token.color-red,
|
||||
.equipment-planner-color-swatch.color-red {
|
||||
background: #ef4444;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-token.color-orange,
|
||||
.equipment-planner-color-swatch.color-orange {
|
||||
background: #f97316;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-token.color-amber,
|
||||
.equipment-planner-color-swatch.color-amber {
|
||||
background: #f59e0b;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-token.color-yellow,
|
||||
.equipment-planner-color-swatch.color-yellow {
|
||||
background: var(--color-accent-gold);
|
||||
}
|
||||
|
||||
.equipment-planner-socket-token.color-lime,
|
||||
.equipment-planner-color-swatch.color-lime {
|
||||
background: #84cc16;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-token.color-green,
|
||||
.equipment-planner-color-swatch.color-green {
|
||||
background: #22c55e;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-token.color-teal,
|
||||
.equipment-planner-color-swatch.color-teal {
|
||||
background: #14b8a6;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-token.color-cyan,
|
||||
.equipment-planner-color-swatch.color-cyan {
|
||||
background: var(--color-accent-cyan);
|
||||
}
|
||||
|
||||
.equipment-planner-socket-token.color-blue,
|
||||
.equipment-planner-color-swatch.color-blue {
|
||||
background: #3b82f6;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-token.color-indigo,
|
||||
.equipment-planner-color-swatch.color-indigo {
|
||||
background: var(--color-accent-indigo);
|
||||
}
|
||||
|
||||
.equipment-planner-socket-token.color-violet,
|
||||
.equipment-planner-color-swatch.color-violet {
|
||||
background: #7c3aed;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-token.color-purple,
|
||||
.equipment-planner-color-swatch.color-purple {
|
||||
background: var(--color-primary);
|
||||
}
|
||||
|
||||
.equipment-planner-socket-token.color-pink,
|
||||
.equipment-planner-color-swatch.color-pink {
|
||||
background: var(--color-accent-pink);
|
||||
}
|
||||
|
||||
.equipment-planner-socket-token.color-rose,
|
||||
.equipment-planner-color-swatch.color-rose {
|
||||
background: #f43f5e;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-token.color-white,
|
||||
.equipment-planner-color-swatch.color-white {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-token.color-gray,
|
||||
.equipment-planner-color-swatch.color-gray {
|
||||
background: #64748b;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-token.color-black,
|
||||
.equipment-planner-color-swatch.color-black {
|
||||
background: #020617;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-controls,
|
||||
.equipment-planner-socket-links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 7px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-controls {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-links select {
|
||||
min-height: 32px;
|
||||
flex: 1 1 96px;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-controls select {
|
||||
width: min(150px, 100%);
|
||||
min-height: 32px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.equipment-planner-bonus-form {
|
||||
grid-template-columns: minmax(110px, 1fr) minmax(64px, 0.45fr) 44px;
|
||||
}
|
||||
|
||||
.equipment-planner-socket-bonuses li {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto 30px;
|
||||
gap: 7px;
|
||||
align-items: center;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
.equipment-planner-socket-bonuses span {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.equipment-planner-link-chip {
|
||||
display: inline-flex;
|
||||
max-width: 100%;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
min-height: 28px;
|
||||
padding: 0 8px;
|
||||
border: 1px solid rgba(34, 211, 238, 0.28);
|
||||
border-radius: var(--radius-pill);
|
||||
background: rgba(34, 211, 238, 0.08);
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.equipment-planner-link-chip::before {
|
||||
content: "";
|
||||
width: 14px;
|
||||
height: 1px;
|
||||
background: var(--color-accent-cyan);
|
||||
}
|
||||
|
||||
.equipment-planner-link-chip span {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.equipment-planner-link-chip .ui-icon {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.task-planner-task-settings {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.equipment-planner-summary-grid,
|
||||
.equipment-planner-summary-source-grid,
|
||||
.equipment-planner-display-grid,
|
||||
.equipment-planner-add-form,
|
||||
.equipment-planner-trait-form,
|
||||
.equipment-planner-material-form,
|
||||
.equipment-planner-socket-form,
|
||||
.equipment-planner-bonus-form {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.equipment-planner-line {
|
||||
grid-template-columns: 30px minmax(0, 1fr) 34px 30px;
|
||||
}
|
||||
|
||||
.equipment-planner-include-switch {
|
||||
grid-column: 2 / -1;
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.equipment-planner-details {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.equipment-planner-trait,
|
||||
.equipment-planner-materials li {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
192
website/src/styles/toolboxes/equipment-planner/_summary.scss
Normal file
192
website/src/styles/toolboxes/equipment-planner/_summary.scss
Normal file
|
|
@ -0,0 +1,192 @@
|
|||
// Rôle : stylise les résumés, listes et panneaux principaux equipment planner.
|
||||
.equipment-planner-summary,
|
||||
.equipment-planner-type-section,
|
||||
.equipment-planner-panel {
|
||||
border: 1px solid rgba(165, 180, 252, 0.1);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(7, 10, 24, 0.28);
|
||||
}
|
||||
|
||||
.equipment-planner-summary {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.equipment-planner-summary-header,
|
||||
.equipment-planner-type-header,
|
||||
.equipment-planner-trait-category-header,
|
||||
.equipment-planner-socket-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.equipment-planner-summary-header h3,
|
||||
.equipment-planner-panel h4 {
|
||||
margin: 0;
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-md);
|
||||
}
|
||||
|
||||
.equipment-planner-summary-header span,
|
||||
.equipment-planner-type-actions > span,
|
||||
.equipment-planner-trait-category-header span {
|
||||
padding: 4px 8px;
|
||||
border: 1px solid rgba(246, 196, 83, 0.18);
|
||||
border-radius: var(--radius-pill);
|
||||
background: rgba(246, 196, 83, 0.08);
|
||||
color: var(--color-accent-gold);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 900;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.equipment-planner-summary-grid {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.equipment-planner-summary-source-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
align-items: start;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.equipment-planner-summary-source-grid.columns-1 {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.equipment-planner-summary-panel {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
padding: 10px;
|
||||
border: 1px solid rgba(165, 180, 252, 0.08);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(5, 7, 17, 0.32);
|
||||
}
|
||||
|
||||
.equipment-planner-summary-grid strong,
|
||||
.equipment-planner-field span {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 900;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.equipment-planner-summary-grid ul,
|
||||
.equipment-planner-list,
|
||||
.equipment-planner-equipment-list,
|
||||
.equipment-planner-trait-list ul,
|
||||
.equipment-planner-materials,
|
||||
.equipment-planner-socket-bonuses {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 6px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.equipment-planner-summary-grid li {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.equipment-planner-summary-grid li.equipment-planner-summary-total {
|
||||
grid-template-columns: 18px minmax(0, 1fr) auto;
|
||||
}
|
||||
|
||||
.equipment-planner-summary-total .ui-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: var(--color-accent-gold);
|
||||
}
|
||||
|
||||
.equipment-planner-summary-total .equipment-planner-socket-icon {
|
||||
width: 18px;
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.equipment-planner-summary-total .equipment-planner-socket-icon .ui-icon {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
}
|
||||
|
||||
.equipment-planner-summary-grid li span,
|
||||
.equipment-planner-summary-grid li small {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.equipment-planner-summary-grid li b {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.equipment-planner-summary-grid li .ui-tooltip {
|
||||
overflow: visible;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.equipment-planner-summary-tooltip {
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
min-width: 190px;
|
||||
}
|
||||
|
||||
.equipment-planner-summary-tooltip > strong {
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
.equipment-planner-summary-tooltip > span {
|
||||
display: grid;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.equipment-planner-summary-tooltip-row {
|
||||
display: grid;
|
||||
grid-template-columns: 16px minmax(0, 1fr) auto;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
min-height: 18px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.equipment-planner-summary-tooltip-row .ui-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
color: var(--color-accent-gold);
|
||||
}
|
||||
|
||||
.equipment-planner-summary-tooltip-row span {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.equipment-planner-summary-tooltip-row b {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.equipment-planner-summary-grid p,
|
||||
.equipment-planner-muted,
|
||||
.equipment-planner-empty {
|
||||
margin: 0;
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue