:root[theme="light"] { --background: #fff; --text: rgb(45, 45, 45); --box-main: #eef4f3; --box-toggle: rgb(215 238 233); --box-separation: rgb(215 238 233); --box-toggleOn: rgb(28 232 138); --item-bg: #dddddd; --box-shadow: none; --select: rgb(127, 253, 127); --greenBtn: #6ade1d; --greenBtn-bottom: #54a31f; --redBtn: #d64d4f; --redBtn-bottom: #854243; --blueBtn: rgb(80, 128, 230); --blueBtn-bottom: rgb(44, 78, 180); } :root[theme="dark"] { --background: #121212; --text: rgb(229, 229, 229); --box-main: #1d1d1d; --box-toggle: #191919; --box-separation: #2e2e2e; --box-toggleOn: #2e2e2e; --item-bg: #191919; --box-shadow: none; --select: rgb(68 214 141); --greenBtn: #24D166; --greenBtn-bottom: #3e6c20; --redBtn: #c82b2d; --redBtn-bottom: #803334; --blueBtn: rgb(80, 128, 230); --blueBtn-bottom: rgb(44, 78, 180); --border: none; } :root[theme="frappe"] { --background: #232634; --text: #e2e8ff; --box-main: #303446; --box-toggle: #414559; --box-separation: #414559; --box-toggleOn: #607dc1; --item-bg: #414559; --select: #8caaee; --greenBtn: #78c346; --greenBtn-bottom: #597844; --redBtn: #d64d4f; --redBtn-bottom: #854243; --blueBtn: rgb(80, 128, 230); --blueBtn-bottom: rgb(44, 78, 180); } :root[theme="onedark"] { --background: #282c34; --text: #d2d6df; --box-main: #4d515d; --box-toggle: #2f333d; --box-separation: #2f333d; --box-toggleOn: #13a3b7; --item-bg: #4d515d; --select: #57b6c2; --greenBtn: #85cf50; --greenBtn-bottom: #406923; --redBtn: #be2d39; --redBtn-bottom: #791a22; --blueBtn: rgb(80, 128, 230); --blueBtn-bottom: rgb(44, 78, 180); } :root[theme="matrix"] { --background: #0d0208; --text: #00ff41; --box-main: #0c2216; --box-toggle: #214338; --box-separation: #214338; --box-toggleOn: #24782e; --item-bg: #214338; --select: #00ff41; --greenBtn: #19b42b; --greenBtn-bottom: #10701c; --redBtn: #19b42b; --redBtn-bottom: #10701c; --blueBtn: #19b42b; --blueBtn-bottom: #10701c; } :root[theme="github"] { --background: #f6f8fa; --text: #292d31; --box-main: #ffffff; --box-toggle: #f3f3f3; --box-separation: #f3f3f3; --box-toggleOn: #cce5ff; --item-bg: #3a66d150; --select: #cce5ff; --greenBtn: #0a9431; --greenBtn-bottom: #0c6826; --redBtn: #d73a49; --redBtn-bottom: #9b2733; --blueBtn: #005cc5; --blueBtn-bottom: #00428e; } :root[theme="latte"] { --background: #dce0e8; --text: #4c4f69; --box-main: #eff1f5; --box-toggle: #e6e9ef; --box-separation: #e6e9ef; --box-toggleOn: #cce5ff; --item-bg: #bcc0cc; --select: #cce5ff; --greenBtn: #40a02b; --greenBtn-bottom: #2e711f; --redBtn: #d20f39; --redBtn-bottom: #9c0c2b; --blueBtn: #1e66f5; --blueBtn-bottom: rgb(3, 49, 101); } :root[theme="solarized-dark"] { --background: #002b36; --text: #a4b1b3; --box-main: #003745; --box-toggle: #2e4c52; --box-separation: #2e4c52; --box-toggleOn: #005a6f; --item-bg: #003745; --select: #2aa198; --greenBtn: #859900; --greenBtn-bottom: rgb(73, 84, 1); --redBtn: #dc322f; --redBtn-bottom: #af2523; --blueBtn: #268bd2; --blueBtn-bottom: #2074b1; } body { background-color: var(--background); color: var(--text); padding: 20px; font-size: x-large; text-align: left; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; } h1 { margin-top: 0; display: inline-block; } #version { margin: 5px; } input[type="text"], .input { border-radius: 5px; padding: 5px; outline: none; border: none; width: 50%; height: 35px; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; } .input { width: 70px; font-size: larger; padding: 5px; } .prefBox, #pathConfig { display: flex; justify-content: space-between; margin: 0 15px; padding: 20px 15px; border-radius: 15px; background-color: var(--box-main); } #flatpakTxt { margin: 0 15px; padding: 20px 15px; cursor: pointer; text-decoration: underline; color: var(--blueBtn); } .prefBox { flex-direction: row; } #pathConfig { flex-direction: column; } .configBox { display: flex; flex-direction: row; justify-content: space-between; } #configBtn { display: inline-block; } #configOpts { display: flex; flex-direction: column; justify-content: center; align-items: center; } #save { padding: 10px; border-radius: 8px; border: none; color: rgb(255, 255, 255); background-color: rgb(49, 215, 49); cursor: pointer; } #save:active { background-color: rgb(41, 155, 41); } #top { position: absolute; top: 10px; right: 10px; display: flex; } #back, #restart { text-decoration: none; padding: 8px; border-radius: 10px; margin: 3px; font-size: large; cursor: pointer; } #back { background-color: var(--blueBtn); color: white; } #restart { background-color: var(--redBtn); color: white; } .redBtn { background-color: var(--redBtn); color: white; text-decoration: none; border: none; margin: 5px; border-radius: 10px; cursor: pointer; font-size: medium; } a { color: rgb(29, 140, 209); cursor: pointer; } input[type="checkbox"] { width: 25px; height: 25px; } .greenBtn { padding: 10px; margin: 0 20px; border: none; border-radius: 10px; font-size: large; color: white; background-color: var(--greenBtn); border-bottom: 4px solid var(--greenBtn-bottom); cursor: pointer; position: relative; outline: none; } #selectLocation:active { border-bottom: none; top: 4px; margin-bottom: 4px; } select { padding: 15px; background-color: var(--select); border: none; border-radius: 8px; cursor: pointer; font-size: large; outline: none; position: relative; } #browserInfo { cursor: pointer; } #configOpts { display: none; } body::-webkit-scrollbar { width: 10px; } body::-webkit-scrollbar-thumb { background: linear-gradient(rgb(110, 110, 110), rgb(77, 77, 77)); border-radius: 8px; } #proxyTxt:valid { border: 2px solid var(--greenBtn); } #proxyTxt:invalid { border: 2px solid var(--redBtn); }