eden-emu/SDL
15
0
Fork 0
mirror of https://github.com/libsdl-org/SDL.git synced 2025-06-03 18:37:40 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Fix HTML examples template tabs

Browse source 
Tab labels now follow their drawer again. Also, to avoid tabs covering
up code or debugging logs, the tab label that's on top (and therefore
not automatically hidden behind the other drawer when that drawer
opens) will now automatically hide itself when the other drawer is
opened.
This commit is contained in:
Semphris 2025-01-05 14:16:43 -05:00 • committed by Sam Lantinga
parent ece6a6ed8f
commit dcc645e413
1 changed files with 16 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

20
examples/template.html
View file

@ -76,8 +76,8 @@
}
#output-container::before {
position: fixed;
bottom: 0;
position: absolute;
bottom: 100%;
right: 1rem;
content: 'Console';
@ -134,8 +134,8 @@
}
#source-code::before {
position: fixed;
bottom: 0;
position: absolute;
bottom: 100%;
left: 1rem;
content: 'Source code';
@ -143,6 +143,10 @@
background: linear-gradient(to bottom, #789, #e0eaee);
padding: 0.75rem 1.5rem;
border-radius: 0.5rem 0.5rem 0 0;
/* Used for a hack to avoid tab labels showing on top of tabs; see
comment below for details. */
transition: bottom 0.25s;
}
#source-code:hover,
@ -164,6 +168,14 @@
overflow: scroll;
}
/* Hack: Sinze z-index only goes one way, and both tab labels should be
behind each other's tab, put the former on top (higher z-index) and
make the latter one disappear when the former is hovered. */
#output-container:hover ~ #source-code::before,
#output-container:focus-within ~ #source-code::before {
bottom: -100%;
}
@media (prefers-color-scheme: dark) {
main > #sidebar {
border-color: rgba(48, 54, 61, 0.7);