From 617b8e536581dfdf806af78529b8ba842bbc6832 Mon Sep 17 00:00:00 2001 From: vonmillhausen Date: Mon, 26 Jun 2023 13:19:47 +0100 Subject: [PATCH] Moved tool CSS to shared CSS file Just for future flexibility, moved the CSS from each individual tool to a shared CSS library --- tools/biosCRC32Patcher.htm | 51 +------------ tools/bootLogoChanger.htm | 58 +-------------- tools/buttonMappingChanger.htm | 88 +--------------------- tools/genericImageTool.htm | 58 +-------------- tools/saveStateTool.htm | 75 +------------------ tools/tools.css | 129 +++++++++++++++++++++++++++++++++ 6 files changed, 134 insertions(+), 325 deletions(-) create mode 100644 tools/tools.css diff --git a/tools/biosCRC32Patcher.htm b/tools/biosCRC32Patcher.htm index 7a395a3..b9170f1 100644 --- a/tools/biosCRC32Patcher.htm +++ b/tools/biosCRC32Patcher.htm @@ -4,56 +4,7 @@ Data Frog SF2000 BIOS CRC32 Patcher - +

Data Frog SF2000 BIOS CRC32 Patcher

diff --git a/tools/bootLogoChanger.htm b/tools/bootLogoChanger.htm index 0dbb72d..ae2fdba 100644 --- a/tools/bootLogoChanger.htm +++ b/tools/bootLogoChanger.htm @@ -4,63 +4,7 @@ Data Frog SF2000 Boot Logo Changer - +

Data Frog SF2000 Boot Logo Changer

diff --git a/tools/buttonMappingChanger.htm b/tools/buttonMappingChanger.htm index c5ac485..889809e 100644 --- a/tools/buttonMappingChanger.htm +++ b/tools/buttonMappingChanger.htm @@ -4,93 +4,7 @@ Data Frog SF2000 Button Mapping Tool - +

Data Frog SF2000 Button Mapping Tool

diff --git a/tools/genericImageTool.htm b/tools/genericImageTool.htm index 2149e02..05f0504 100644 --- a/tools/genericImageTool.htm +++ b/tools/genericImageTool.htm @@ -4,63 +4,7 @@ Data Frog SF2000 Generic Image Tool - +

Data Frog SF2000 Generic Image Tool

diff --git a/tools/saveStateTool.htm b/tools/saveStateTool.htm index f1c966b..a33221a 100644 --- a/tools/saveStateTool.htm +++ b/tools/saveStateTool.htm @@ -4,80 +4,7 @@ Data Frog SF2000 Save State Tool - +

Data Frog SF2000 Save State Tool

diff --git a/tools/tools.css b/tools/tools.css new file mode 100644 index 0000000..b46bfaf --- /dev/null +++ b/tools/tools.css @@ -0,0 +1,129 @@ +/* + + 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/) + + 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; +} + +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; +} \ No newline at end of file