Template:Project Board/styles.css: Difference between revisions
Template page
More actions
Content deleted Content added
LordSkorne7 (talk | contribs) No edit summary |
Tesinormed (talk | contribs) Replaced content with ".project-board { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-md); justify-content: space-between; align-items: start; padding: var(--space-md); background: var(--color-surface-2); width: 100%; }" Tag: Replaced |
||
| Line 1: | Line 1: | ||
.project-board { |
|||
.amaranth-columns-container { |
|||
display: flex; |
|||
flex-direction: row; |
|||
flex-wrap: wrap; |
|||
gap: var(--space-md); |
|||
overflow-x: auto; |
|||
justify-content: space-between; |
|||
overflow-y: hidden; |
|||
align-items: start; |
|||
gap: 1em; |
|||
padding: var(--space-md); |
|||
background: var(--color-surface-2); |
|||
width: 100%; |
|||
border-radius: 10px; |
|||
text-align: left; |
|||
color: #111; |
|||
white-space: nowrap; |
|||
min-height: 350px; |
|||
border: 1px solid #dadada; |
|||
} |
|||
.amaranth-column { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 1em; |
|||
min-width: 320px; |
|||
max-width: 320px; |
|||
background: transparent; |
|||
padding: 0 0.4em; |
|||
flex-shrink: 0; |
|||
white-space: normal; /* allows card contents to wrap vertically */ |
|||
box-sizing: border-box; |
|||
} |
|||
.amaranth-column-header { |
|||
color: #4b4b4b; |
|||
font-family: 'Cinzel', serif; |
|||
font-size: 1.15em; |
|||
font-weight: bold; |
|||
margin-bottom: 0.6em; |
|||
margin-left: 0.5em; |
|||
letter-spacing: 1px; |
|||
} |
|||
.amaranth-card { |
|||
background: #fff; |
|||
color: #111; |
|||
border-radius: 14px; |
|||
box-shadow: 0 4px 18px 0 rgba(0,0,0,0.11), 0 1.5px 6px 0 rgba(0,0,0,0.12); |
|||
margin-bottom: 0.75em; |
|||
padding: 1em 1.1em 1em 1.1em; |
|||
border: 1px solid #eaeaea; |
|||
display: flex; |
|||
flex-direction: column; /* ensures vertical stacking */ |
|||
gap: 0.5em; |
|||
width: 100%; /* ensures card uses the available width */ |
|||
min-width: 0; /* fixes overflow bug in flexbox */ |
|||
max-width: 320px; /* keeps all cards the same width as columns */ |
|||
box-sizing: border-box; |
|||
} |
|||
.amaranth-card-img, |
|||
img.amaranth-card-img { |
|||
width: 100%; |
|||
max-width: 280px; |
|||
max-height: 120px; |
|||
border-radius: 10px; |
|||
margin-bottom: 0.8em; |
|||
object-fit: contain; |
|||
box-shadow: 0 2px 6px #0002; |
|||
background: #f3f4f6; |
|||
display: block; |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
} |
|||
.amaranth-card-labels { |
|||
margin-bottom: 0.3em; /* Small gap between labels and image */ |
|||
text-align: center; |
|||
display: block; |
|||
} |
|||
.amaranth-label { |
|||
display: inline-block; |
|||
padding: 0.18em 0.9em 0.18em 0.9em; |
|||
margin: 0 0.15em 0.15em 0; |
|||
border-radius: 1em; |
|||
font-size: 0.85em; |
|||
font-family: 'Inter', 'Segoe UI', Arial, sans-serif; |
|||
font-weight: 600; |
|||
letter-spacing: 0.02em; |
|||
vertical-align: middle; |
|||
} |
|||
.amaranth-label-pink { background: #ffe0f4; color: #b50060; } |
|||
.amaranth-label-purple { background: #e5e0ff; color: #7200c7; } |
|||
.amaranth-label-gray { background: #f0f1f3; color: #222; } |
|||
.amaranth-label-green { background: #d0fae7; color: #277e4d; } |
|||
.amaranth-label-yellow { background: #fff3c1; color: #b68d00; } |
|||
.amaranth-label-blue { background: #daeafd; color: #1466a2; } |
|||
.amaranth-card-title { |
|||
font-family: 'Cinzel', serif; |
|||
font-weight: bold; |
|||
font-size: 1.08em; |
|||
margin-bottom: 0.18em; |
|||
} |
|||
.amaranth-card-subtitle { |
|||
font-size: 0.97em; |
|||
color: #678; |
|||
margin-bottom: 0.25em; |
|||
font-weight: 500; |
|||
font-family: 'Inter', 'Segoe UI', Arial, sans-serif; |
|||
} |
|||
/* COLLAPSIBLE BODY */ |
|||
.amaranth-card-details { |
|||
width: 100%; |
|||
} |
|||
.amaranth-card-summary { |
|||
cursor: pointer; |
|||
font-family: 'Inter', 'Segoe UI', Arial, sans-serif; |
|||
font-size: 0.98em; |
|||
font-weight: 600; |
|||
text-align: center; |
|||
margin: 0.7em 0 0.7em 0; |
|||
color: #474797; |
|||
} |
|||
.amaranth-card-body, |
|||
.amaranth-card-body-center { |
|||
width: 100%; |
|||
display: block; |
|||
text-align: center; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin: 0 auto; |
|||
padding: 0.7em 0.3em 0.5em 0.3em; |
|||
font-size: 0.98em; |
|||
color: #111; |
|||
font-family: 'Inter', 'Segoe UI', Arial, sans-serif; |
|||
word-break: break-word; |
|||
white-space: normal; /* CRUCIAL: makes text wrap and card grow vertically */ |
|||
overflow-wrap: break-word; |
|||
box-sizing: border-box; |
|||
} |
|||
details.amaranth-card-details[open] .amaranth-card-summary::after { |
|||
content: " ▲"; |
|||
font-size: 0.85em; |
|||
} |
|||
details.amaranth-card-details .amaranth-card-summary::after { |
|||
content: " ▼"; |
|||
font-size: 0.85em; |
|||
} |
} |
||