hmn
/
formats.exposed
2
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix overflow in explorer

This commit is contained in:
Evan Hahn 2023-11-09 09:10:20 -06:00
parent c755f0bb6f
commit f7677d3f2f
1 changed files with 76 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

145
public/common/global.css
View File

@ -1,161 +1,166 @@
@import url("vendor/reset.css");
:root {
--foreground-color: #111;
--background-color: #fff;
--activated-color: #333;
--tree-border-color: #ccc;
--tree-activated-border-color: #000;
--button-color: #fff;
--button-background-color: #495;
--button-background-color-hover: limegreen;
--foreground-color: #111;
--background-color: #fff;
--activated-color: #333;
--tree-border-color: #ccc;
--tree-activated-border-color: #000;
--button-color: #fff;
--button-background-color: #495;
--button-background-color-hover: limegreen;
}
@media (prefers-color-scheme: dark) {
:root {
--foreground-color: #f0f0f0;
--background-color: #222;
--activated-color: #ddd;
--tree-border-color: #444;
--tree-activated-border-color: #fff;
}
:root {
--foreground-color: #f0f0f0;
--background-color: #222;
--activated-color: #ddd;
--tree-border-color: #444;
--tree-activated-border-color: #fff;
}
}
* {
box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 18pt;
line-height: 1.5em;
color: var(--foreground-color);
background: var(--background-color);
margin: 1em;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-size: 18pt;
line-height: 1.5em;
color: var(--foreground-color);
background: var(--background-color);
margin: 1em;
display: flex;
max-height: 100vh;
overflow: hidden;
}
h1,
p {
margin-bottom: 1rem;
margin-bottom: 1rem;
}
h1 {
font-weight: bold;
font-size: 200%;
font-weight: bold;
font-size: 200%;
}
a {
color: inherit;
color: inherit;
}
ul,
ol {
padding-left: 1rem;
padding-left: 1rem;
}
ul {
list-style-type: disc;
list-style-type: disc;
}
ol {
list-style-type: decimal;
list-style-type: decimal;
}
input,
textarea {
font: inherit;
font: inherit;
}
#explorer {
display: flex;
overflow: hidden;
flex: 1;
display: flex;
overflow: hidden;
}
#explorer .bytes,
#explorer .tree {
flex: 1;
overflow: auto;
flex: 1;
overflow: auto;
}
#explorer .bytes {
max-width: 15em;
font-family: Inconsolata, Consolas, Monaco, monospace;
font-size: 80%;
line-height: 1.5em;
white-space: pre-wrap;
max-width: 15em;
font-family: Inconsolata, Consolas, Monaco, monospace;
font-size: 80%;
line-height: 1.5em;
white-space: pre-wrap;
}
#explorer .bytes span {
cursor: pointer;
cursor: pointer;
}
#explorer .bytes span.activated {
background: var(--activated-color);
color: var(--background-color);
background: var(--activated-color);
color: var(--background-color);
}
#explorer .tree {
padding-left: 0.5rem;
scrollbar-gutter: stable;
padding-left: 0.5rem;
scrollbar-gutter: stable;
}
#explorer .tree details.activated {
outline-width: 3px;
outline-color: var(--tree-activated-border-color);
outline-width: 3px;
outline-color: var(--tree-activated-border-color);
}
#explorer .tree details {
outline: 1px solid var(--tree-border-color);
border-radius: 10px;
padding: 0 0.5rem 0 0.5rem;
transition: outline ease-out 0.1s;
margin: 3px 3px 0.5rem 3px;
outline: 1px solid var(--tree-border-color);
border-radius: 10px;
padding: 0 0.5rem 0 0.5rem;
transition: outline ease-out 0.1s;
margin: 3px 3px 0.5rem 3px;
}
#explorer .tree details[open] {
padding-bottom: 6px;
padding-bottom: 6px;
}
#explorer .tree details p:last-child {
margin-bottom: 0;
margin-bottom: 0;
}
#explorer .tree details .children {
margin-left: 0.5rem;
margin-left: 0.5rem;
}
#explorer .tree details summary {
cursor: pointer;
user-select: none;
display: flex;
cursor: pointer;
user-select: none;
display: flex;
}
#explorer .tree details summary:before {
content: "▶";
margin-right: 0.2em;
transition: transform ease-out 0.1s;
content: "▶";
margin-right: 0.2em;
transition: transform ease-out 0.1s;
}
#explorer .tree details[open]>summary:before {
transform: rotate(90deg);
#explorer .tree details[open] > summary:before {
transform: rotate(90deg);
}
#explorer .tree details summary:focus {
outline: none;
outline: none;
}
#explorer .tree details summary .title {
flex: 1;
font-weight: bold;
flex: 1;
font-weight: bold;
}
#explorer .tree details summary .bytecount {
margin-left: 0.5em;
font-size: 75%;
opacity: 0.5;
margin-left: 0.5em;
font-size: 75%;
opacity: 0.5;
}
#explorer .tree details:not(.activated) {
background: var(--background-color);
color: var(--foreground-color);
background: var(--background-color);
color: var(--foreground-color);
}