style/about dialog: make the property sheet responsive

This commit is contained in:
Adorian Doran
2026-04-18 10:20:30 +03:00
parent d240fb32bb
commit 5539c901fe

View File

@@ -173,37 +173,81 @@
/* TODO: move to global styles */
.property-sheet-table {
display: table;
border-spacing: 0 2px;
border-collapse: separate;
--border-radius: 8px;
dl {
display: table-row;
--_br: 8px;
background: var(--card-background-color);
&:first-child {
clip-path: inset(0 round var(--_br) var(--_br) 0 0);
}
&:last-child {
clip-path: inset(0 round 0 0 var(--_br) var(--_br));
dt {
color: var(--muted-text-color);
}
}
}
dt, dd {
display: table-cell;
padding: 10px 16px;
vertical-align: top;
@media (min-width: 600px) {
.property-sheet-table {
display: table;
border-spacing: 0 2px;
border-collapse: separate;
dl {
display: table-row;
--_br: var(--border-radius);
&:first-child {
clip-path: inset(0 round var(--_br) var(--_br) 0 0);
}
&:last-child {
clip-path: inset(0 round 0 0 var(--_br) var(--_br));
}
}
dt, dd {
display: table-cell;
padding: 10px 16px;
vertical-align: top;
}
dt {
white-space: nowrap;
}
dl {
width: 100%;
}
dt {
white-space: nowrap;
color: var(--muted-text-color);
}
}
dl {
width: 100%;
@media (max-width: 599px) {
.property-sheet-table {
display: flex;
flex-direction: column;
gap: 2px;
dl {
margin: 0;
padding: 12px 20px;
&:first-child {
border-radius: var(--border-radius) var(--border-radius) 0 0;
}
&:last-child {
border-radius: 0 0 var(--border-radius) var(--border-radius);
}
dt {
margin-bottom: 8px;
font-size: .85em;
font-weight: 500;
text-transform: uppercase;
letter-spacing: .4pt;
}
dd {
margin: 0;
}
}
}
}