esp01s-serial-remote-controller

 body {
     margin: 3em auto 3em auto;
     text-align: center;
     font-family: "Nimbus Sans", "Nimbus Sans L", "Helvetica", Inter;
     font-size: 20px;
 }
 
 #title {
     padding: 0em 0.5em 0em 0.5em;
 }
 
 #main-div {
     max-width: 23em;
     margin: auto auto;
     padding: 0 10px;
 }
 
 table {
     border-collapse: collapse;
 }
 
 tr {
     vertical-align: bottom;
     border-color: #3E3E42;
 }
 
 td {
     width: 100%;
 }
 
 a, a:visited {
     color: #00E;
 }
 
 h1 {
     font-size: 36px;
 }
 
 #main {
     /*
     margin-bottom: 0.5em;
     cursor: pointer;
     padding: 1.25em 28px 1.00em 28px;
     border-radius: 8px;
     border: 1px solid #E3E3E3;
     */
 }
 
 #main, #timer {
     border-radius: 8px;
     border: 1px solid #E3E3E3;
 }
 
 #timer {
     margin-top: 1em;
 }
 
 #main-set,
 #main-toggle,
 #timer-enable {
     cursor: pointer;
 }
 
 #main-now,
 #main-set {
     font-size: 20px;
 }
 
 #main-now-value {
     font-family: monospace;
     white-space: nowrap;
 }
 
 #timer-enable {
     padding: 28px 28px 12px 28px;
 }
 
 #main-toggle {
     padding: 28px 28px 12px 28px;
 }
 
 #main-now {
     padding: 18px 28px 2px 28px;
 }
 
 #main-sep {
     padding: 0px 28px 0px 28px;
 }
 
 #main-set {
     padding: 0px 28px 0px 28px;
 }
 
 #timer-picker {
     padding: 18px 28px 0.00em 28px;
     font-size: 20px;
 }
 
 #timer-sep, #main-sep {
     border-bottom: 1px solid #E3E3E3;
     margin: 0 30px 0 30px;
 }
 
 #from-time, #to-time {
     font-family: monospace;
     font-size: 18px;
     padding: 2px;
     margin: 0px;
     border: 1px solid #E3E3E3;
     border-radius: 5px;
     cursor: pointer;
     background-color: white;
 }
 
 #timer-save-div, #main-save-div {
     padding: 18px 30px 30px 30px;
     text-align: center;
 }
 
 #timer-save, #main-save {
     margin-right: 0px;
     box-shadow: none;
     border: 1px solid #E3E3E3;
     color: black;
     background-color: white;
     border-radius: 5px;
     cursor: pointer;
     height: 32px;
     font-size: 16px;
     width: 100%;
     font-weight: normal;
 }
 
 #timer-save:active, #main-save:active {
   background-color: #E3E3E3;
   border: none;
 }
 
 #main-set-value {
     font-size: 20px;
     font-weight: normal;
     font-family: monospace;
     border: 1px solid #E3E3E3;
     border-radius: 5px;
     padding: 3px 5px 2px 5px;
     font-size: 20px;
     height: 22px;
 
     /*
     margin: 0px;
     border: 1px solid #E3E3E3;
     cursor: pointer;
     width: 20px;
 
     margin-right: 0px;
     box-shadow: none;
     background-color: white;
     border-radius: 5px;
     cursor: pointer;
     */
 }
 
 #main-set-value-td {
     font-family: monospace;
     white-space: nowrap;
 }
 
 @media (hover: hover) and (pointer: fine) {
     #main-toggle:hover #main-checkbox,
     #timer-enable:hover #timer-checkbox,
     #from-time:hover, #to-time:hover,
     #main-checkbox:hover, #timer-checkbox:hover,
     #main-set-value:hover,
     #timer-save:hover, #main-save:hover {
         border: 1px solid #999999;
     }
 }
 
 #from-time:focus-visible,
 #to-time:focus-visible,
 #main-set-value:focus-visible {
     border: 1px solid #999999;
     outline: none;
 }
 
 #buttons-div {
     text-align: left;
     margin-left: auto;
     margin-right: auto;
     font-size: 20px;
     user-select: none;
 }
 
 #info-div {
     padding: 1.75em 1em 1em 1em;
     font-size: 16px;
     td {
         padding: .20em;
         text-wrap: nowrap;
     }
     td:nth-child(1) {
         text-align: left;
         user-select: none;
     }
     td:nth-child(2) {
         text-align: right;
         font-family: monospace;
     }
 }
 
 #save-button {
     padding: 0.25em 0 0 0;
     text-align: right;
 }
 
 #save-timer-button {
     border: 1px solid grey;
     border-radius: 2px;
     text-align: center;
     margin-top: 0.35em;
     font-size: 16px;
     color: black;
     background-color: white;
     vertical-align: bottom;
 }
 
 #main-checkbox, #timer-checkbox {
     width: 20px;
     height: 20px;
     border: 1px solid #E3E3E3;
     border-radius: 5px;
     color: black;
     text-align: center;
     vertical-align: center;
     cursor: pointer;
     color: white;
     svg {
         display: none;
     }
 }
 
 #main-checkbox[checked="1"], #timer-checkbox[checked="1"] {
     background-color: #3584e4;
     svg {
         display: revert;
     }
 }
 
 #checkmark-svg {
     width: 14px;
     height: 20px;
 }
 
 #main-checkbox-td, #timer-checkbox-td {
     display: block;
     padding: 0;
     margin: 0;
 }
 
 @media (prefers-color-scheme: dark) {
     body {
         color: white;
         background-color: #17171A;
     }
 
     a, a:visited {
         color: #56C8FF;
     }
 
     input {
         color-scheme: dark;
     }
 
     #buttons-div {
         border: none;
     }
 
     #main, #timer {
         background-color: #232326;
         border: none;
     }
 
     #timer-sep, #main-sep {
         border-bottom-color: #3E3E42;
     }
 
     #timer-save, #main-save {
         border-color: #999999;
         color: white;
         background-color: #303033;
         border-color: #3E3E42;
     }
 
     #timer-save:active, #main-save:active {
         background-color: #3E3E42;
         border: none;
     }
 
     #from-time, #to-time, #main-set-value {
         background-color: #303033;
         color: white;
         border-color: #3E3E42;
     }
 
     #main-checkbox, #timer-checkbox {
         border-color: #3E3E42;
         background-color: #303033;
     }
 
     #main-checkbox[checked="1"], #timer-checkbox[checked="1"] {
         background-color: #56C8FF;
         color: #004263;
     }
 
     @media (hover: hover) and (pointer: fine) {
         #main-toggle:hover #main-checkbox,
         #timer-enable:hover #timer-checkbox,
         #from-time:hover, #to-time:hover,
         #main-checkbox:hover, #timer-checkbox:hover,
         #timer-save:hover, #main-save:hover {
             border: 1px solid #828282;
         }
     }
 
     #from-time:focus-visible,
     #to-time:focus-visible,
     #main-set-value:focus-visible {
         border: 1px solid #828282;
     }
 }