body { font-family: Arial, sans-serif; background-color: #ffffff; color: black; width: 400px; } .toggleButton { width: 24px; } select { max-width: 330px; } .text-box { outline: none; width: 80%; } #downloader-name { width: 160px; } #export { margin-top: 5px; } /* Dark mode */ .dark-mode { background-color: #1b1b1b; color: #d5d5d5; } .dark-mode fieldset { border-color: #535353; } .dark-mode button, .dark-mode select { background-color: #222; color: #d5d5d5; } .dark-mode button:hover, .dark-mode select:hover { background-color: #323232; } .dark-mode .expandableDiv { background-color: #1b2027; } .dark-mode .text-box { background-color: #323232; color: #d5d5d5; } /* Switch */ .switch { position: relative; display: inline-block; width: 40px; height: 20px; margin-left: 10px; } .switch input { opacity: 0; width: 0; height: 0; } /* Slider */ .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: 0.4s; border-radius: 20px; } .slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: white; border-radius: 50%; } input:checked + .slider { background-color: #2196f3; } input:checked + .slider:before { transform: translateX(20px); } #clear { width: 100%; margin-bottom: 3px; } #type-select { margin-left: auto; } #settings { display: flex; } .header { display: flex; justify-content: center; align-items: center; } .header > * { margin: 5px; } #remote { margin: 5px; } .log-container { display: flex; justify-content: center; } .right-bound { text-align: right; } .expandableDiv { width: 100%; overflow: hidden; background-color: lightblue; padding: 0; } .expandableDiv.expanded { padding: 5px; } .expandableDiv.collapsed { padding: 0; } .always-visible { display: block; } .expanded-only { display: none; } .expandableDiv.expanded .expanded-only { display: block; }