.gal-tabs {
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: 0.3rem;
scrollbar-width: thin;
}
.gal-tabs .chip {
white-space: nowrap;
}
.chip.small {
min-height: 36px;
padding: 0.35rem 0.85rem;
font-size: 0.88rem;
}
.gal-n {
display: inline-block;
min-width: 1.5em;
margin-left: 0.25rem;
padding: 0 0.4rem;
border-radius: 999px;
background: var(--surface-pink-9);
color: var(--ink-pink-3);
font-size: 0.78rem;
text-align: center;
}
.chip.active .gal-n {
background: var(--surface-neutral-9-veil);
color: var(--ink-neutral-9);
}
.gal-upcoming {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
margin: 0.4rem 0 1rem;
padding: 0.75rem 1rem;
border: 1.5px dashed var(--line-yellow-6);
border-radius: 18px;
background: var(--surface-amber-9);
}
.gal-toolbar {
gap: 0.6rem;
}
.gal-toolbar input {
flex: 1;
min-width: 0;
}
.gal-filters {
flex-wrap: wrap;
gap: 0.45rem;
margin: 0.6rem 0;
}
.gal-dot {
display: inline-block;
width: 0.7rem;
height: 0.7rem;
margin-right: 0.35rem;
border-radius: 50%;
background: var(--surface-pink-7);
}
.gal-dot.verde {
background: var(--surface-green-5);
}
.gal-dot.amarelo {
background: var(--surface-yellow-6);
}
.gal-tags summary,
.gal-set-aside summary,
.gal-history summary {
cursor: pointer;
font-weight: 800;
color: var(--ink-pink-3);
padding: 0.4rem 0;
}
.gal-hint {
margin: 0.2rem 0 1rem;
}
.gal-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: 1rem;
}
.gal-card {
display: flex;
flex-direction: column;
overflow: hidden;
border: 2px solid var(--line-pink-8);
border-radius: 20px;
background: var(--surface-neutral-9);
}
.gal-card.by-rosa,
.gal-dialog.by-rosa {
border: 3px solid var(--line-pink-7);
box-shadow: none;
}
.gal-card.by-verde,
.gal-dialog.by-verde {
border: 3px solid var(--line-green-5);
box-shadow: none;
}
.gal-card.by-amarelo,
.gal-dialog.by-amarelo {
border: 3px solid var(--line-yellow-6);
box-shadow: none;
}
.gal-cover {
position: relative;
display: grid;
place-items: center;
aspect-ratio: 1;
padding: 0;
border: 0;
background: repeating-conic-gradient(var(--surface-pink-9) 0% 25%, var(--surface-neutral-9) 0% 50%) 50% / 22px 22px;
}
.gal-cover img {
width: 100%;
height: 100%;
object-fit: contain;
}
.gal-icon {
font-size: 3rem;
}
.gal-count {
position: absolute;
right: 0.5rem;
bottom: 0.5rem;
padding: 0.1rem 0.5rem;
border-radius: 999px;
background: var(--surface-neutral-9-veil);
font-size: 0.78rem;
font-weight: 800;
}
.gal-quote {
margin: 0;
padding: 1rem;
color: var(--ink-pink-2);
font-size: 1.05rem;
font-weight: 700;
line-height: 1.35;
text-align: center;
overflow-wrap: anywhere;
}
.gal-quote.big {
font-size: 1.4rem;
}
.gal-info {
display: grid;
gap: 0.35rem;
padding: 0.65rem 0.75rem 0.8rem;
}
.gal-line {
display: flex;
align-items: flex-start;
gap: 0.3rem;
}
.gal-title {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.gal-mini {
flex: none;
min-width: 34px;
min-height: 34px;
border: 1.5px solid var(--line-pink-8);
border-radius: 999px;
background: var(--surface-neutral-9);
}
.gal-fav.on {
border-color: var(--line-yellow-6);
background: var(--surface-yellow-9);
}
.gal-meta {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
align-items: center;
}
.gal-meta .person-pill.by {
margin-left: 0;
}
.gal-to {
font-size: 0.78rem;
font-weight: 800;
color: var(--ink-green-2);
}
.gal-group {
margin-bottom: 1.6rem;
}
.gal-group h3 {
margin-bottom: 0.7rem;
}
.gal-loose ul {
margin: 0.6rem 0 0;
padding: 0;
list-style: none;
}
body.gal-dragging .workspace {
outline: 3px dashed var(--line-pink-7);
outline-offset: -10px;
border-radius: 24px;
}
.gal-kinds {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0;
padding: 0;
border: 0;
}
.gal-kinds legend {
margin-bottom: 0.4rem;
font-weight: 800;
}
.gal-kind input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.gal-kind:focus-within {
outline: 3px solid var(--line-pink-7);
outline-offset: 2px;
}
.gal-uploads,
.gal-files {
display: grid;
gap: 0.5rem;
margin: 0;
padding: 0;
list-style: none;
}
.gal-uploads:empty {
display: none;
}
.gal-upload {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.45rem 0.7rem;
border: 1.5px solid var(--line-pink-8);
border-radius: 14px;
background: var(--surface-neutral-9);
}
.gal-upload.error {
border-color: var(--line-pink-6);
background: var(--surface-pink-9);
}
.gal-upload-name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gal-detail {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
gap: 1.2rem;
align-items: start;
}
.gal-hero-box {
display: grid;
place-items: center;
min-height: 260px;
border-radius: 18px;
background: repeating-conic-gradient(var(--surface-pink-9) 0% 25%, var(--surface-neutral-9) 0% 50%) 50% / 24px 24px;
}
.gal-hero {
max-width: 100%;
max-height: 60vh;
object-fit: contain;
}
.gal-dl {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.35rem 0.8rem;
margin: 0;
}
.gal-dl dt {
font-weight: 800;
color: var(--ink-pink-3);
}
.gal-dl dd {
margin: 0;
}
.gal-phrase p {
color: var(--ink-pink-2);
font-size: 1.1rem;
white-space: pre-wrap;
}
.gal-file {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.7rem;
padding: 0.55rem;
border: 1.5px solid var(--line-pink-8);
border-radius: 16px;
background: var(--surface-neutral-9);
}
.gal-file-thumb {
width: 64px;
height: 64px;
object-fit: contain;
border-radius: 10px;
background: var(--surface-pink-9);
display: grid;
place-items: center;
font-size: 1.8rem;
}
.gal-file-info {
flex: 1;
min-width: 160px;
}
.gal-rev {
display: grid;
gap: 0.25rem;
padding: 0.7rem;
border: 1px solid var(--line-pink-8);
border-radius: 14px;
background: var(--surface-pink-9);
}
.gal-crumbs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem;
margin-bottom: 0.8rem;
color: var(--ink-pink-5);
font-weight: 800;
}
.gal-folders {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: 0.8rem;
margin-bottom: 1rem;
}
.gal-folder {
position: relative;
display: flex;
align-items: stretch;
border: 2px solid var(--line-pink-8);
border-radius: 22px;
background: linear-gradient(160deg, var(--surface-pink-9), var(--surface-pink-9) 70%);
box-shadow: 0 6px 18px var(--line-pink-7-veil);
}
.gal-folder:hover {
border-color: var(--line-pink-7);
box-shadow: 0 10px 22px var(--line-pink-7-veil);
}
.gal-folder::before {
content: '';
position: absolute;
top: -9px;
left: 18px;
width: 54px;
height: 14px;
border: 2px solid var(--line-pink-8);
border-bottom: 0;
border-radius: 12px 12px 0 0;
background: var(--surface-pink-9);
}
.gal-folder-open {
flex: 1;
display: grid;
gap: 0.15rem;
padding: 1rem 0.9rem 0.9rem;
border: 0;
background: none;
text-align: left;
color: var(--ink-pink-3);
}
.gal-folder-open b {
font-size: 1.02rem;
overflow-wrap: anywhere;
}
.gal-folder-open small {
color: var(--ink-pink-5);
}
.gal-folder-icon {
font-size: 1.9rem;
line-height: 1.1;
}
.gal-folder .gal-mini {
align-self: flex-start;
margin: 0.55rem 0.55rem 0 0;
border-color: var(--line-pink-8);
background: var(--surface-neutral-9);
}
.pills-emoji .pill-choice {
font-size: 1.25rem;
padding: 0.3rem 0.7rem;
}
.gal-thread ul,
.gal-list {
margin: 0;
padding: 0;
list-style: none;
}
.gal-comment {
display: grid;
gap: 0.25rem;
padding: 0.6rem 0.8rem;
border: 1px solid var(--line-pink-8);
border-radius: 14px;
background: var(--surface-neutral-9);
}
.gal-comment.archived {
opacity: 0.7;
}
.gal-comment > p:not(.small) {
color: var(--ink-pink-2);
white-space: pre-wrap;
}
.gal-composer {
display: grid;
gap: 0.6rem;
margin-top: 0.8rem;
padding: 0.8rem;
border: 1.5px dashed var(--line-pink-8);
border-radius: 16px;
background: var(--surface-pink-9);
}
.gal-composer [data-comment-send] {
justify-self: start;
}
.gal-list-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.45rem;
padding: 0.5rem 0;
border-bottom: 1px solid var(--line-pink-9);
}
.gal-list-row.archived {
opacity: 0.7;
}
.gal-list-row.new {
border-bottom: 0;
}
.gal-list-row input[name='name'] {
flex: 1;
min-width: 10rem;
}
.gal-list-row .emoji {
width: 4rem;
text-align: center;
}
@media (max-width: 760px) {
.gal-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.7rem;
}
.gal-detail {
grid-template-columns: 1fr;
}
.gal-toolbar {
flex-wrap: wrap;
}
.gal-upcoming {
flex-wrap: nowrap;
overflow-x: auto;
}
.gal-upcoming > * {
flex: none;
white-space: nowrap;
}
}