From 1b75c799e50e563a0468c4f572c0460b225cda7e Mon Sep 17 00:00:00 2001 From: Ignacio Rivero Date: Tue, 24 Jun 2025 15:21:58 -0300 Subject: [PATCH] Added a hackton of CSS just for a little checkbox --- app.py | 106 +++++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 103 insertions(+), 3 deletions(-) diff --git a/app.py b/app.py index 243869d..48ffa05 100644 --- a/app.py +++ b/app.py @@ -326,6 +326,89 @@ HTML_FORM = ''' 50% { left: calc(100% - 40%); } 100% { left: 0%; } } + /* this next bit is a mess but it works */ + .options-bannermode { + display: flex; + align-items: left; + justify-content: space-between; + margin-left: 1em; + margin-right: 1em; + } + .options-bannermode label { + font-size: 1em; + color: #eee; + margin-bottom: 1em; + display: block; + } + .options-bannermode-inner { + display: block; + align-items: center; + position: relative; + padding-left: 35px; + margin-bottom: 12px; + cursor: pointer; + font-size: 1em; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + } + + /* Hide the browser's default checkbox */ + .options-bannermode-inner input { + position: absolute; + opacity: 0; + cursor: pointer; + height: 0; + width: 0; + } + + /* Create a custom checkbox */ + .checkmark { + position: absolute; + top: -25%; + left: 0; + height: 25px; + width: 25px; + background-color: #181c1f; + border-radius: 0.35em; + border: 1.5px solid #444; + } + + /* On mouse-over, add a grey background color */ + .options-bannermode-inner:hover input ~ .checkmark { + filter: brightness(1.12); + } + + /* When the checkbox is checked, add a blue background */ + .options-bannermode-inner input:checked ~ .checkmark { + background: linear-gradient(135deg, #8ee3c1, #35a7ff); + } + + /* Create the checkmark/indicator (hidden when not checked) */ + .checkmark:after { + content: ""; + position: absolute; + display: none; + } + + /* Show the checkmark when checked */ + .options-bannermode-inner input:checked ~ .checkmark:after { + display: block; + } + + /* Style the checkmark/indicator */ + .options-bannermode-inner .checkmark:after { + left: 9px; + top: 5px; + width: 5px; + height: 10px; + border: solid white; + border-width: 0 3px 3px 0; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + } @media (max-width: 1000px) { body { font-size: 1.28em !important; @@ -377,7 +460,22 @@ HTML_FORM = ''' font-size: 1.16em !important; padding: 0.6em 1.2em; } - } + /* i'm so sorry, i'm not bothered to find out why or how this works */ + .options-bannermode-inner .checkmark { + top: -10%; + } + .options-bannermode-inner .checkmark::after { + left: 13px; + top: 7px; + transform: rotate(45deg) scale(1.66); + } + .checkmark { + width: 1.2em; + height: 1.2em; + } + .options-bannermode-inner { + padding-left: 55px; + } @@ -392,10 +490,11 @@ HTML_FORM = '''
-
@@ -898,3 +997,4 @@ if __name__ == "__main__": parser.add_argument('-p', '--port', type=int, default=5000, help='Port to run the server on (default: 5000)') args = parser.parse_args() app.run(host='0.0.0.0', port=args.port) +