tdlight-team/tdlight
tdlight-team/tdlight
1
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Further improvements and fixes for build instructions generator (#1901)

Browse Source 
* Improve focus visuals in build.html

* Fix build.html appearance for mobile devices

* Add custom focus visuals for links in build.html

* Fix incorrect CSS selectors in build.html

* Fix checkbox and radio alignment in build.html
This commit is contained in:
Mammad 2022-04-17 16:20:42 +04:30 committed by GitHub
parent b9036dda3e
commit 6f08d65279
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 23 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
build.html
View File

@ -3,11 +3,13 @@
<head> <head>
<title>TDLib build instructions</title> <title>TDLib build instructions</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style> <style>
:root { :root {
--background: #fafafa; --background: #fafafa;
--color: black; --color: black;
--color-primary: #0088ff; --color-primary: #0088ff;
--color-primary-light: #42a7ff;
--color-code-block: #ebf9ff; --color-code-block: #ebf9ff;
--color-select-border: rgb(211, 211, 211); --color-select-border: rgb(211, 211, 211);
--color-checkbox-background: rgb(211, 211, 211); --color-checkbox-background: rgb(211, 211, 211);
@ -38,6 +40,14 @@
body { body {
font-family: 'Segoe UI', Arial, Helvetica, sans-serif; font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
} }
:focus:not(:focus-visible) {
outline: none;
}
input:focus-visible, select:focus-visible, button:focus-visible {
box-shadow: 0 0 0 3px var(--color-primary);
outline: none;
}
.hide { .hide {
display: none; display: none;
} }
@ -62,6 +72,7 @@
padding: 5px; padding: 5px;
margin-bottom: 0; margin-bottom: 0;
display: block; display: block;
overflow-x: auto;
} }
#buildCommands ul { #buildCommands ul {
list-style: '$ '; list-style: '$ ';
@ -70,30 +81,29 @@
a { a {
color: var(--color-primary); color: var(--color-primary);
text-decoration-color: transparent; text-decoration-color: transparent;
transition: text-decoration-color 200ms; transition: text-decoration 200ms, color 200ms;
} }
a:hover { a:hover {
text-decoration: underline; text-decoration: underline;
} }
a:focus-visible {
text-decoration: underline 2px;
color: var(--color-primary-light);
outline: none;
}
select, button { select, button {
border: 1px solid var(--color-select-border); border: 1px solid var(--color-select-border);
background-color: var(--background); background-color: var(--background);
color: var(--color); color: var(--color);
padding: 5px; padding: 5px;
margin-top: 5px; margin-top: 5px;
transition: border 200ms, padding 200ms; box-shadow: 0 0 0 0 var(--color-primary);
transition: border 200ms, padding 200ms, box-shadow 200ms;
border-radius: 999em; border-radius: 999em;
font-size: 16px; font-size: 16px;
cursor: pointer; cursor: pointer;
} }
select:focus, button:focus {
outline: none;
border-color: var(--color-primary);
border-width: 2px;
padding: 4px;
}
label * { label * {
vertical-align: middle; vertical-align: middle;
} }
@ -108,7 +118,8 @@
width: 20px; width: 20px;
border-radius: 3px; border-radius: 3px;
position: relative; position: relative;
transition: background-color 200ms; top: -1px; // Fix alignment
transition: background-color 200ms, box-shadow 200ms;
} }
input[type=checkbox]::after { input[type=checkbox]::after {
content: ""; content: "";
@ -141,7 +152,8 @@
width: 20px; width: 20px;
border-radius: 100%; border-radius: 100%;
position: relative; position: relative;
transition: background-color 200ms; top: -2px; // Fix alignment
transition: background-color 200ms, box-shadow 200ms;
} }
input[type=radio]::after { input[type=radio]::after {
content: ""; content: "";