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

147
public/common/global.css
View File

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