feat: add pinned allocator lesson view
This commit is contained in:
user
@@ -24,6 +24,24 @@
|
||||
z-index: 80;
|
||||
width: 100%;
|
||||
}
|
||||
.viewer-action-toast {
|
||||
position: absolute;
|
||||
z-index: 12;
|
||||
right: 9px;
|
||||
bottom: 9px;
|
||||
max-width: min(720px, calc(100vw - 18px));
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
border: 1px solid #42b8e7;
|
||||
border-radius: 3px;
|
||||
background: #102c38ee;
|
||||
color: #dff7ff;
|
||||
padding: 5px 9px;
|
||||
box-shadow: 0 4px 14px #0007;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font: 750 10px/1.25 ui-monospace, monospace;
|
||||
}
|
||||
.viewer-chrome .topbar {
|
||||
position: relative;
|
||||
top: auto;
|
||||
@@ -41,6 +59,9 @@
|
||||
.viewer-chrome.is-nvim-fit .topbar {
|
||||
flex: none;
|
||||
}
|
||||
.viewer-chrome.is-nvim-fit .allocator-panel {
|
||||
flex: none;
|
||||
}
|
||||
.viewer-chrome.is-nvim-fit .nvim-panel {
|
||||
display: flex;
|
||||
min-height: 0;
|
||||
@@ -159,6 +180,159 @@
|
||||
background: #eaf6fb;
|
||||
color: #174d64;
|
||||
}
|
||||
.allocator-panel {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border-top: 1px solid #40515a;
|
||||
border-bottom: 1px solid #40515a;
|
||||
background: #f7f9f5;
|
||||
color: #182127;
|
||||
box-shadow: 0 4px 12px #0002;
|
||||
font: 11px/1.25 system-ui, sans-serif;
|
||||
}
|
||||
.allocator-panel > header {
|
||||
display: grid;
|
||||
grid-template-columns: 125px minmax(260px, auto) 1fr;
|
||||
gap: 8px;
|
||||
align-items: baseline;
|
||||
min-height: 22px;
|
||||
padding: 3px 8px;
|
||||
border-bottom: 1px solid #b7c1c4;
|
||||
background: #e8eef0;
|
||||
}
|
||||
.allocator-panel > header > span {
|
||||
color: #166987;
|
||||
font: 800 9px/1.2 ui-monospace, monospace;
|
||||
letter-spacing: .06em;
|
||||
}
|
||||
.allocator-panel > header > strong {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font: 750 11px/1.2 ui-monospace, monospace;
|
||||
}
|
||||
.allocator-panel > header > small {
|
||||
overflow: hidden;
|
||||
color: #536168;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.allocator-panel-body {
|
||||
display: grid;
|
||||
grid-template-columns: 230px minmax(420px, 1fr) minmax(310px, .8fr);
|
||||
gap: 9px;
|
||||
align-items: stretch;
|
||||
padding: 5px 8px 7px;
|
||||
}
|
||||
.allocator-metrics {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 3px 8px;
|
||||
margin: 0;
|
||||
}
|
||||
.allocator-metrics > div {
|
||||
min-width: 0;
|
||||
border-left: 2px solid #8ea2ab;
|
||||
padding-left: 5px;
|
||||
}
|
||||
.allocator-metrics dt {
|
||||
color: #627077;
|
||||
font: 750 7px/1.2 ui-monospace, monospace;
|
||||
letter-spacing: .05em;
|
||||
}
|
||||
.allocator-metrics dd {
|
||||
margin: 1px 0 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font: 700 10px/1.2 ui-monospace, monospace;
|
||||
}
|
||||
.allocator-arena-view {
|
||||
min-width: 0;
|
||||
}
|
||||
.allocator-arena-view.is-inactive {
|
||||
opacity: .42;
|
||||
}
|
||||
.allocator-arena-labels {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
margin-bottom: 3px;
|
||||
color: #536168;
|
||||
font: 700 8px/1.2 ui-monospace, monospace;
|
||||
}
|
||||
.allocator-arena-labels strong {
|
||||
color: #075f80;
|
||||
}
|
||||
.allocator-pinned-arena {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--allocator-size), minmax(2px, 1fr));
|
||||
height: 32px;
|
||||
border: 1px solid #28343a;
|
||||
background: #fff;
|
||||
}
|
||||
.allocator-pinned-arena i {
|
||||
min-width: 0;
|
||||
border-right: 1px solid #e1e5e6;
|
||||
background: #fbfcfc;
|
||||
}
|
||||
.allocator-pinned-arena i:nth-child(8n) {
|
||||
border-right-color: #87969d;
|
||||
}
|
||||
.allocator-pinned-arena i.is-allocated {
|
||||
border-right-color: #b2d8e6;
|
||||
background: #43a8ce;
|
||||
}
|
||||
.allocator-cursor {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: -4px;
|
||||
bottom: -4px;
|
||||
width: 2px;
|
||||
background: #d02d25;
|
||||
transform: translateX(-1px);
|
||||
box-shadow: 0 0 0 1px #fff9;
|
||||
}
|
||||
.allocator-cursor::before {
|
||||
content: "allocp";
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 4px;
|
||||
color: #8d1d17;
|
||||
font: 800 7px/1 ui-monospace, monospace;
|
||||
}
|
||||
.allocator-facts {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 2px 7px;
|
||||
min-width: 0;
|
||||
}
|
||||
.allocator-facts > div {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
justify-content: space-between;
|
||||
gap: 5px;
|
||||
border-bottom: 1px dotted #b4bec2;
|
||||
}
|
||||
.allocator-facts span {
|
||||
overflow: hidden;
|
||||
color: #46565e;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.allocator-facts code {
|
||||
overflow: hidden;
|
||||
color: #142e39;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font: 700 9px/1.3 ui-monospace, monospace;
|
||||
}
|
||||
.allocator-facts p {
|
||||
grid-column: 1 / -1;
|
||||
margin: 0;
|
||||
color: #647278;
|
||||
}
|
||||
.nvim-panel {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
@@ -1460,6 +1634,19 @@ text.uml-step-element-active {
|
||||
.nvim-work-indicator {
|
||||
display: none;
|
||||
}
|
||||
.allocator-panel > header {
|
||||
grid-template-columns: auto 1fr;
|
||||
}
|
||||
.allocator-panel > header > small {
|
||||
display: none;
|
||||
}
|
||||
.allocator-panel-body {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.allocator-metrics,
|
||||
.allocator-facts {
|
||||
display: none;
|
||||
}
|
||||
.memory-lanes {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user