mirror of
https://github.com/zadam/trilium.git
synced 2026-05-07 17:46:54 +02:00
style/about dialog: make the property sheet responsive
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user