[CSS] .section-panel height fix, better section hierarchy

.section-panel is now only allowed to have the height it's allowed on view, .section-details hierarchy is now better represented through a bigger padding for titles, and a button-like consistent padding for subtitles; buttons' padding now dependent on font-size.
This commit is contained in:
Eliseu Amaro 2022-11-25 15:42:41 +01:00
parent 87559e9a8c
commit 9d3ddfe916
No known key found for this signature in database
GPG Key ID: 96DA09D4B97BC2D5
2 changed files with 21 additions and 6 deletions

View File

@ -269,13 +269,14 @@ html {
display: flex;
}
.icon {
fill: var(--foreground);
height: 1em;
vertical-align: center;
width: 1em;
vertical-align: center;
font-size: initial;
}
.markdown-blocks {
border-radius: 0 0 var(--font-size-sm) var(--font-size-sm);
}
@ -321,6 +322,7 @@ html {
.page-header h1 svg {
margin-right: 6px;
font-size: inherit;
}
.page-header #toggle-panel-left {
@ -332,12 +334,13 @@ html {
}
.section-panel {
overflow: auto;
top: calc(2 * var(--font-size-sm) + var(--font-size-lg));
height: calc(100vh - (2 * var(--font-size-base) + var(--font-size-lg)));
}
.section-panel .panel-content {
display: block;
height: calc(100vh - var(--font-size-xxl));
overflow: auto;
}
@ -354,6 +357,10 @@ html {
align-self: self-end;
}
.footer {
bottom: 0;
}
hr {
background-color: var(--border) !important;
display: block;

View File

@ -310,7 +310,15 @@
display: block;
font-family: 'Open Sans', sans-serif !important;
font-weight: 900 !important;
width: 100%
width: 100%;
}
.section-details-title summary {
padding: var(--font-size-sm);
}
.section-details-subtitle summary {
padding: 6px 12px;
}
.section-details-subtitle summary > *, .section-details-title summary > * {
@ -409,7 +417,7 @@ button {
display: block !important;
font-family: "Open Sans", sans-serif !important;
font-weight: 900 !important;
margin-left: auto !important
margin-left: auto !important;
}
button, input, select, textarea {
@ -419,7 +427,7 @@ button, input, select, textarea {
font-size: inherit !important;
max-width: border-box;
overflow: hidden;
padding: 6px 8px !important;
padding: calc(var(--font-size-sm) / 2) var(--font-size-sm) !important;
width: auto;
background: var(--gradient) !important
}