mirror of
https://github.com/SillyTavern/SillyTavern.git
synced 2025-06-05 21:59:27 +02:00
add debugger icons
This commit is contained in:
@ -141,16 +141,16 @@
|
||||
|
||||
<div id="qr--modal-debugButtons">
|
||||
<div title="Resume" id="qr--modal-resume" class="qr--modal-debugButton menu_button">
|
||||
<span class="qr--glyph">▷</span>
|
||||
<!-- <span class="qr--glyph">▷</span> -->
|
||||
</div>
|
||||
<div title="Step Over" id="qr--modal-step" class="qr--modal-debugButton qr--glyph-combo menu_button">
|
||||
<span class="qr--glyph">↷</span><span class="qr--glyph">▪</span>
|
||||
<!-- <span class="qr--glyph">↷</span><span class="qr--glyph">▪</span> -->
|
||||
</div>
|
||||
<div title="Step Into" id="qr--modal-stepInto" class="qr--modal-debugButton qr--glyph-combo menu_button">
|
||||
<span class="qr--glyph">↓</span><span class="qr--glyph">▪</span>
|
||||
<!-- <span class="qr--glyph">↓</span><span class="qr--glyph">▪</span> -->
|
||||
</div>
|
||||
<div title="Step Out" id="qr--modal-stepOut" class="qr--modal-debugButton qr--glyph-combo menu_button">
|
||||
<span class="qr--glyph">↑</span><span class="qr--glyph">▪</span>
|
||||
<!-- <span class="qr--glyph">↑</span><span class="qr--glyph">▪</span> -->
|
||||
</div>
|
||||
</div>
|
||||
<div id="qr--modal-debugState"></div>
|
||||
|
@ -548,15 +548,27 @@
|
||||
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugButtons .qr--modal-debugButton {
|
||||
aspect-ratio: 1.25 / 1;
|
||||
width: 2.25em;
|
||||
position: relative;
|
||||
}
|
||||
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugButtons .qr--modal-debugButton.qr--glyph-combo {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugButtons .qr--modal-debugButton:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 3px;
|
||||
background-color: var(--SmartThemeBodyColor);
|
||||
mask-size: contain;
|
||||
mask-position: center;
|
||||
}
|
||||
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugButtons .qr--modal-debugButton.qr--glyph-combo .qr--glyph {
|
||||
grid-column: 1;
|
||||
line-height: 0.8;
|
||||
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugButtons .qr--modal-debugButton#qr--modal-resume:after {
|
||||
mask-image: url('/img/step-resume.svg');
|
||||
}
|
||||
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugButtons .qr--modal-debugButton#qr--modal-step:after {
|
||||
mask-image: url('/img/step-over.svg');
|
||||
}
|
||||
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugButtons .qr--modal-debugButton#qr--modal-stepInto:after {
|
||||
mask-image: url('/img/step-into.svg');
|
||||
}
|
||||
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugButtons .qr--modal-debugButton#qr--modal-stepOut:after {
|
||||
mask-image: url('/img/step-out.svg');
|
||||
}
|
||||
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeProgress {
|
||||
--prog: 0;
|
||||
|
@ -631,15 +631,36 @@
|
||||
.qr--modal-debugButton {
|
||||
aspect-ratio: 1.25 / 1;
|
||||
width: 2.25em;
|
||||
&.qr--glyph-combo {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
.qr--glyph {
|
||||
grid-column: 1;
|
||||
line-height: 0.8;
|
||||
}
|
||||
}
|
||||
position: relative;
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 3px;
|
||||
background-color: var(--SmartThemeBodyColor);
|
||||
mask-size: contain;
|
||||
mask-position: center;
|
||||
}
|
||||
&#qr--modal-resume:after {
|
||||
mask-image: url('/img/step-resume.svg');
|
||||
}
|
||||
&#qr--modal-step:after {
|
||||
mask-image: url('/img/step-over.svg');
|
||||
}
|
||||
&#qr--modal-stepInto:after {
|
||||
mask-image: url('/img/step-into.svg');
|
||||
}
|
||||
&#qr--modal-stepOut:after {
|
||||
mask-image: url('/img/step-out.svg');
|
||||
}
|
||||
// &.qr--glyph-combo {
|
||||
// display: grid;
|
||||
// grid-template-columns: 1fr;
|
||||
// grid-template-rows: 1fr 1fr;
|
||||
// .qr--glyph {
|
||||
// grid-column: 1;
|
||||
// line-height: 0.8;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
|
Reference in New Issue
Block a user