add some fancy magic :kekw:

This commit is contained in:
2025-10-13 18:21:23 +02:00
parent 2e59c1f5e7
commit 22badaf535
15 changed files with 1328 additions and 786 deletions

View File

@@ -4,20 +4,51 @@ html {
body {
background: #002B36;
height: 90%;
color: #839496;
font-family: sans-serif;
margin: 0;
padding: 1em;
padding: 0;
display: flex;
flex-direction: column;
height: 100%;
}
#tools {
background: #00212b;
padding: 8px;
font-size: 14px;
flex-shrink: 0;
}
#tools .function {
display: inline-block;
padding: 4px 8px;
margin: 0 4px;
color: #839496;
border-radius: 3px;
text-decoration: none;
}
#tools .function.enabled {
cursor: pointer;
color: #93a1a1;
}
#tools .function.enabled:hover {
background: #073642;
color: #eee8d5;
}
#content {
height: 100%;
padding: 0;
flex-grow: 1;
padding: 1em;
overflow-y: auto;
}
textarea {
background: transparent;
border: 0;
color: #fff;
color: #eee8d5;
font-family: monospace;
font-size: 1em;
height: 100%;
@@ -34,6 +65,7 @@ textarea {
outline: none;
padding: 0 0 4em 0;
white-space: pre-wrap;
word-wrap: break-word;
}
#code code {
@@ -60,77 +92,4 @@ pre .line::before {
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#tools {
background: #08323c;
bottom: 0;
font-size: 0;
left: 0;
position: fixed;
width: 100%;
}
#tools .function {
background: url(function-icons.png);
display: inline-block;
height: 37px;
position: relative;
width: 32px;
}
#tools .link embed {
vertical-align: bottom;
}
#tools .function.enabled:hover {
cursor: pointer;
}
#tools .function.save {
background-position: -5px top;
}
#tools .function.enabled.save {
background-position: -5px center;
}
#tools .function.enabled.save:hover {
background-position: -5px bottom;
}
#tools .function.new {
background-position: -42px top;
}
#tools .function.enabled.new {
background-position: -42px center;
}
#tools .function.enabled.new:hover {
background-position: -42px bottom;
}
#tools .function.duplicate {
background-position: -79px top;
}
#tools .function.enabled.duplicate {
background-position: -79px center;
}
#tools .function.enabled.duplicate:hover {
background-position: -79px bottom;
}
#tools .function.raw {
background-position: -116px top;
}
#tools .function.enabled.raw {
background-position: -116px center;
}
#tools .function.enabled.raw:hover {
background-position: -116px bottom;
}
}