sf2000/tools/tools.css

135 lines
3.3 KiB
CSS
Raw Normal View History

/*
Von Millhausen's SF2000 Tools Shared CSS Library
================================================
There's a fairly common UI between all of my tools, so rather than each tool
including a full copy of all the shared stuff, all the shared stuff can go
into this CSS file. Makes the tools a bit more maintainable, at the cost of a
bit less portability.
Just like the tools themselves, this file should be considered CC0 Public
Domain (https://creativecommons.org/publicdomain/zero/1.0/)
Tool updates... This was just supposed to be a new feature for the generic image tool (dithering support), but while working on that things kind of snowballed 😅 * Added dithering support to the generic image tool and the boot logo changer, when converting images to RGB565 format. This uses a Bayer 8x8 matrix, and the overall "strength" of the dither can be controlled - it defaults to what I feel is a sane value. Dithering can help reduce banding effects due to the low colour depth in RGB565. * Made "fix" scaling mode more flexible in the generic image tool - now there's checkboxes beside the width and height dimensions - if you un-check one, the other dimension will be calculated automatically to keep the input's aspect ratio intact * Improved downscaling quality in the generic image tool. While working on the dithering feature, I discovered the previous "gaussian resampling" downscaling method I was using introduced distortion in certain situations. I had a lot of fun playing around with possible replacements (I tried 10 new downscaling functions!), and finally settled on a hybrid function that mixes powers-of-two downscaling (with some custom mipmap style cross-blending) with Hermite interpolation. This new method is reasonably quick, gives clean results with no great distortion, and works well with alpha channels (doesn't introduce any dark fringing) * Generic image tool now shows the dimensions of the output image * Added a max width on the main tool page bodies, so that they don't get so wide on full-screen desktop browsers * Fixed a few edge-case logic bugs here and there (e.g., when upscaling only a single dimensions with the generic image tool, or places where I thought I was copying objects, but was only creating references to them, etc.) * Switched from using "var" declarations across all tool codebases to "let" or "const" instead * Switched out the SVG alert icons to just use emoji instead * Various other nips and tucks (fixed up my arbitrary 80-column comment wrapping on the tools that had previously just been eye-balled, fixed a few comment typos, etc.)
2024-05-14 21:20:57 +02:00
Version 1.1: Added a max-width to the body element, and auto margins to center
things again (just stops the page being too wide on full-screen desktop
browsers).
Version 1.0: Initial version
*/
:root {
--background: rgb(240, 235, 220);
--text: rgb(50, 40, 20);
--infoBackground: rgb(65, 160, 65);
--infoText: rgb(255, 255, 255);
--errorBackground: rgb(200, 65, 65);
--errorText: rgb(255, 255, 255);
--warningBackground: rgb(200, 128, 64);
--warningText: rgb(255, 255, 255);
--mappingBox: rgba(50, 40, 20, 0.1);
}
@media (prefers-color-scheme: dark) {
:root {
--background: rgb(70, 75, 100);
--text: rgb(190, 190, 200);
--infoBackground: rgb(75, 130, 85);
--infoText: rgb(200, 245, 200);
--errorBackground: rgb(130, 85, 75);
--errorText: rgb(245, 200, 200);
--warningBackground: rgb(130, 110, 75);
--warningText: rgb(255, 240, 214);
--mappingBox: rgba(190, 190, 200, 0.1);
}
}
body {
background-color: var(--background);
color: var(--text);
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
Tool updates... This was just supposed to be a new feature for the generic image tool (dithering support), but while working on that things kind of snowballed 😅 * Added dithering support to the generic image tool and the boot logo changer, when converting images to RGB565 format. This uses a Bayer 8x8 matrix, and the overall "strength" of the dither can be controlled - it defaults to what I feel is a sane value. Dithering can help reduce banding effects due to the low colour depth in RGB565. * Made "fix" scaling mode more flexible in the generic image tool - now there's checkboxes beside the width and height dimensions - if you un-check one, the other dimension will be calculated automatically to keep the input's aspect ratio intact * Improved downscaling quality in the generic image tool. While working on the dithering feature, I discovered the previous "gaussian resampling" downscaling method I was using introduced distortion in certain situations. I had a lot of fun playing around with possible replacements (I tried 10 new downscaling functions!), and finally settled on a hybrid function that mixes powers-of-two downscaling (with some custom mipmap style cross-blending) with Hermite interpolation. This new method is reasonably quick, gives clean results with no great distortion, and works well with alpha channels (doesn't introduce any dark fringing) * Generic image tool now shows the dimensions of the output image * Added a max width on the main tool page bodies, so that they don't get so wide on full-screen desktop browsers * Fixed a few edge-case logic bugs here and there (e.g., when upscaling only a single dimensions with the generic image tool, or places where I thought I was copying objects, but was only creating references to them, etc.) * Switched from using "var" declarations across all tool codebases to "let" or "const" instead * Switched out the SVG alert icons to just use emoji instead * Various other nips and tucks (fixed up my arbitrary 80-column comment wrapping on the tools that had previously just been eye-balled, fixed a few comment typos, etc.)
2024-05-14 21:20:57 +02:00
max-width: 80em;
margin: 0 auto;
}
a, a:visited, a:hover, a:active { color: inherit; }
hr {
border: 1px solid var(--text);
margin: 2em 0;
}
p.info, p.warning, p.error {
border: 1px dashed;
border-radius: 10px;
padding: 10px;
margin: 20px;
}
p.info {
background-color: var(--infoBackground);
border-color: var(--infoText);
color: var(--infoText);
}
p.warning {
background-color: var(--warningBackground);
border-color: var(--warningText);
color: var(--warningText);
}
p.error {
background-color: var(--errorBackground);
border-color: var(--errorText);
color: var(--errorText);
}
.icon {
position: relative;
top: 0.15em;
left: -0.2em;
height: 1em;
}
h1:first-child { text-align: center; }
p:last-child { text-align: center; }
.controlContainer {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.control {
display: inline;
background-color: var(--mappingBox);
padding: 1em;
border-radius: 1em;
margin: 0.5em;
}
.control input[type=number] {width: 4em;}
.control h3:first-child {
text-align: center;
margin-top: 0;
border-bottom: 1px solid var(--text);
}
.control table {
width: 100%;
border-spacing: 0 0.1em;
background-color: var(--mappingBox);
border-radius: 0.5em;
padding: 0.5em;
}
.control table:nth-child(2) { margin-bottom: 1em; }
.control table caption { margin-bottom: 0.5em; }
.control table thead tr th {
border-bottom: 1px solid var(--text);
border-collapse: separate;
border-spacing: 1em 1em;
padding: 0 1em;
}
.alignC { text-align: center; }
.alignL { text-align: left; }
canvas {
border: 1px white dashed;
}
#slotSelector label:not(:last-child) {
margin-right: 1em;
}