[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:
parent
87559e9a8c
commit
9d3ddfe916
|
@ -269,13 +269,14 @@ html {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
fill: var(--foreground);
|
fill: var(--foreground);
|
||||||
height: 1em;
|
height: 1em;
|
||||||
vertical-align: center;
|
|
||||||
width: 1em;
|
width: 1em;
|
||||||
|
vertical-align: center;
|
||||||
|
font-size: initial;
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown-blocks {
|
.markdown-blocks {
|
||||||
border-radius: 0 0 var(--font-size-sm) var(--font-size-sm);
|
border-radius: 0 0 var(--font-size-sm) var(--font-size-sm);
|
||||||
}
|
}
|
||||||
|
@ -321,6 +322,7 @@ html {
|
||||||
|
|
||||||
.page-header h1 svg {
|
.page-header h1 svg {
|
||||||
margin-right: 6px;
|
margin-right: 6px;
|
||||||
|
font-size: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-header #toggle-panel-left {
|
.page-header #toggle-panel-left {
|
||||||
|
@ -332,12 +334,13 @@ html {
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-panel {
|
.section-panel {
|
||||||
|
overflow: auto;
|
||||||
top: calc(2 * var(--font-size-sm) + var(--font-size-lg));
|
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 {
|
.section-panel .panel-content {
|
||||||
display: block;
|
display: block;
|
||||||
height: calc(100vh - var(--font-size-xxl));
|
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -354,6 +357,10 @@ html {
|
||||||
align-self: self-end;
|
align-self: self-end;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
background-color: var(--border) !important;
|
background-color: var(--border) !important;
|
||||||
display: block;
|
display: block;
|
||||||
|
|
|
@ -310,7 +310,15 @@
|
||||||
display: block;
|
display: block;
|
||||||
font-family: 'Open Sans', sans-serif !important;
|
font-family: 'Open Sans', sans-serif !important;
|
||||||
font-weight: 900 !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 > * {
|
.section-details-subtitle summary > *, .section-details-title summary > * {
|
||||||
|
@ -409,7 +417,7 @@ button {
|
||||||
display: block !important;
|
display: block !important;
|
||||||
font-family: "Open Sans", sans-serif !important;
|
font-family: "Open Sans", sans-serif !important;
|
||||||
font-weight: 900 !important;
|
font-weight: 900 !important;
|
||||||
margin-left: auto !important
|
margin-left: auto !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
button, input, select, textarea {
|
button, input, select, textarea {
|
||||||
|
@ -419,7 +427,7 @@ button, input, select, textarea {
|
||||||
font-size: inherit !important;
|
font-size: inherit !important;
|
||||||
max-width: border-box;
|
max-width: border-box;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding: 6px 8px !important;
|
padding: calc(var(--font-size-sm) / 2) var(--font-size-sm) !important;
|
||||||
width: auto;
|
width: auto;
|
||||||
background: var(--gradient) !important
|
background: var(--gradient) !important
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user