diff options
| author | Mammad <67197540+Mammad900@users.noreply.github.com> | 2021-12-14 07:58:27 +0330 |
|---|---|---|
| committer | Aliaksei Levin <22669599+levlam@users.noreply.github.com> | 2021-12-17 17:02:25 +0300 |
| commit | 75229c6209907ed82f9cc199eef1001bb619c1ea (patch) | |
| tree | d9fd469f9f621a67a50864c9d9379afd910ad756 | |
| parent | 561119367a89bd420def695f4191c21d4951c01a (diff) | |
Update build.html
| -rw-r--r-- | build.html | 177 |
1 files changed, 172 insertions, 5 deletions
@@ -3,11 +3,178 @@ <head> <title>Telegram Bot API server build instructions</title> -<style> -.hide { display: none; } -div.main { max-width:1200px; margin: auto; font-size: x-large; } -select.large { font-size: large; } -</style> + <style> + :root { + --background: #fafafa; + --color: black; + --color-primary: #0088ff; + --color-code-block: #ebf9ff; + --color-select-border: rgb(211, 211, 211); + --color-checkbox-background: rgb(211, 211, 211); + --color-checkbox-tick: #ffffff; + --color-copy-success-background: #c1ffc6; + --color-copy-success-border: rgb(0, 255, 0); + --color-copy-fail-background: #ffcbcb; + --color-copy-fail-border: rgb(255, 0, 0); + + color: var(--color); + background: var(--background); + } + @media (prefers-color-scheme: dark) { + :root { + --background: #0e0e0e; + --color: rgb(190, 190, 190); + --color-primary: #0088ff; + --color-code-block: #101315; + --color-select-border: rgb(54, 54, 54); + --color-checkbox-background: rgb(51, 51, 51); + --color-checkbox-tick: #ffffff; + --color-copy-success-background: #001f00; + --color-copy-success-border: rgb(0, 255, 0); + --color-copy-fail-background: #1f0000; + --color-copy-fail-border: rgb(255, 0, 0); + } + } + body { + font-family: 'Segoe UI', Arial, Helvetica, sans-serif; + } + .hide { + display: none; + } + div.main { + max-width: 1250px; + padding: 25px; + margin: auto; + font-size: 16px; + } + + p { + margin: 0; + } + .main > div { + margin-bottom: 20px; + } + + #buildCommands { + font-family: Consolas, monospace; + margin-left: 40px; + background: var(--color-code-block); + padding: 5px; + margin-bottom: 0; + display: block; + } + #buildCommands ul { + list-style: '$ '; + } + + a { + color: var(--color-primary); + text-decoration-color: transparent; + transition: text-decoration-color 200ms; + } + a:hover { + text-decoration: underline; + } + select, button { + border: 1px solid var(--color-select-border); + background-color: var(--background); + color: var(--color); + padding: 5px; + margin-top: 5px; + transition: border 200ms, padding 200ms; + border-radius: 999em; + font-size: 16px; + cursor: pointer; + } + + select:focus, button:focus { + outline: none; + border-color: var(--color-primary); + border-width: 2px; + padding: 4px; + } + + label * { + vertical-align: middle; + } + + input[type=checkbox] { + margin-right: 5px; + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + background-color: var(--color-checkbox-background); + height: 20px; + width: 20px; + border-radius: 3px; + position: relative; + transition: background-color 200ms; + } + input[type=checkbox]::after { + content: ""; + transition: border-color 200ms; + position: absolute; + left: 6px; + top: 2px; + width: 5px; + height: 10px; + border: solid transparent; + border-width: 0 3px 3px 0; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + } + input[type=checkbox]:checked { + background-color: var(--color-primary); + } + input[type=checkbox]:checked::after { + border-color: var(--color-checkbox-tick); + } + + input[type=radio] { + margin-right: 5px; + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + background-color: var(--color-checkbox-background); + height: 20px; + width: 20px; + border-radius: 100%; + position: relative; + transition: background-color 200ms; + } + input[type=radio]::after { + content: ""; + transition: border-color 200ms; + position: absolute; + left: 10px; + top: 10px; + width: 0; + height: 0; + border-radius: 100%; + background-color: transparent; + transition: width 200ms, height 200ms, left 200ms, top 200ms, background-color 100ms; + } + input[type=radio]:checked::after { + background-color: var(--color-primary); + left: 2px; + top: 2px; + width: 16px; + height: 16px; + } + + #copyBuildCommandsButton { + margin-left: 40px; + } + #copyBuildCommandsButton.success { + background: var(--color-copy-success-background); + border-color: var(--color-copy-success-border); + } + #copyBuildCommandsButton.fail { + background: var(--color-copy-fail-background); + border-color: var(--color-copy-fail-border); + } + </style> </head> <body onload="onLoad(true)" onpopstate="onLoad(false)"> |