mirror of
https://github.com/LonamiWebs/Telethon.git
synced 2024-11-10 19:46:36 +03:00
Add optional dark theme for the docs
This commit is contained in:
Lonami Exo
parent
bb0d29bdd5
commit
c3e5d390eb
|
|
@ -4,7 +4,16 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title>Telethon API</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="css/docs.css" rel="stylesheet">
|
||||
<link id="style" href="css/docs.light.css" rel="stylesheet">
|
||||
<script>
|
||||
try {
|
||||
which = document.cookie.split('=')[1].split(';')[0];
|
||||
if (which) {
|
||||
document.getElementById("style").href = "css/" + which;
|
||||
}
|
||||
} catch (e) {
|
||||
}
|
||||
</script>
|
||||
<link href="https://fonts.googleapis.com/css?family=Nunito|Source+Code+Pro" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
|
|
@ -21,7 +30,7 @@
|
|||
on what the methods, constructors and types mean. Nevertheless, this
|
||||
page aims to provide easy access to all the available methods, their
|
||||
definition and parameters.</p>
|
||||
|
||||
<p id="themeSelect"></p>
|
||||
<p>Please note that when you see this:</p>
|
||||
<pre>---functions---
|
||||
users.getUsers#0d91a548 id:Vector<InputUser> = Vector<User></pre>
|
||||
|
|
@ -145,5 +154,17 @@ users.getUsers#0d91a548 id:Vector<InputUser> = Vector<User></pre>
|
|||
</p>
|
||||
</div>
|
||||
<script src="js/search.js"></script>
|
||||
<script>
|
||||
document.getElementById("themeSelect").innerHTML = `
|
||||
Select
|
||||
<a href="#" onclick="setTheme('docs.light.css')">light</a> /
|
||||
<a href="#" onclick="setTheme('docs.dark.css')">dark</a> theme.
|
||||
`;
|
||||
|
||||
function setTheme(which) {
|
||||
style.href = "css/" + which;
|
||||
document.cookie = "css=" + which + "; path=/";
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
185
telethon_generator/data/html/css/docs.dark.css
Normal file
185
telethon_generator/data/html/css/docs.dark.css
Normal file
|
|
@ -0,0 +1,185 @@
|
|||
body {
|
||||
font-family: 'Nunito', sans-serif;
|
||||
color: #bbb;
|
||||
background-color:#000;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #42aaed;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-family: 'Source Code Pro', monospace;
|
||||
padding: 8px;
|
||||
color: #567;
|
||||
background: #080a0c;
|
||||
border-radius: 0;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #64bbdd;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
table td {
|
||||
border-top: 1px solid #111;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.horizontal {
|
||||
margin-bottom: 16px;
|
||||
list-style: none;
|
||||
background: #080a0c;
|
||||
border-radius: 4px;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.horizontal li {
|
||||
display: inline-block;
|
||||
margin: 0 8px 0 0;
|
||||
}
|
||||
|
||||
.horizontal img {
|
||||
display: inline-block;
|
||||
margin: 0 8px -2px 0;
|
||||
}
|
||||
|
||||
h1, summary.title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#main_div {
|
||||
padding: 20px 0;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
pre::-webkit-scrollbar {
|
||||
visibility: visible;
|
||||
display: block;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
pre::-webkit-scrollbar-track:horizontal {
|
||||
background: #222;
|
||||
border-radius: 0;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
pre::-webkit-scrollbar-thumb:horizontal {
|
||||
background: #444;
|
||||
border-radius: 0;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
:target {
|
||||
border: 2px solid #149;
|
||||
background: #246;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
/* 'sh' stands for Syntax Highlight */
|
||||
span.sh1 {
|
||||
color: #f93;
|
||||
}
|
||||
|
||||
span.tooltip {
|
||||
border-bottom: 1px dashed #ddd;
|
||||
}
|
||||
|
||||
#searchBox {
|
||||
width: 100%;
|
||||
border: none;
|
||||
height: 20px;
|
||||
padding: 8px;
|
||||
font-size: 16px;
|
||||
border-radius: 2px;
|
||||
border: 2px solid #222;
|
||||
background: #000;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
#searchBox:placeholder-shown {
|
||||
color: #bbb;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 2px;
|
||||
font-size: 16px;
|
||||
padding: 8px;
|
||||
color: #bbb;
|
||||
background-color: #111;
|
||||
border: 2px solid #146;
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #146;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* https://www.w3schools.com/css/css_navbar.asp */
|
||||
ul.together {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
ul.together li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
ul.together li a {
|
||||
display: block;
|
||||
border-radius: 8px;
|
||||
background: #111;
|
||||
padding: 4px 8px;
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
/* https://stackoverflow.com/a/30810322 */
|
||||
.invisible {
|
||||
left: 0;
|
||||
top: -99px;
|
||||
padding: 0;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
border: none;
|
||||
outline: none;
|
||||
position: fixed;
|
||||
box-shadow: none;
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
h1, summary.title {
|
||||
font-size: 18px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#dev_page_content_wrap {
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
#dev_page_title {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
|
@ -95,19 +95,6 @@ span.sh1 {
|
|||
color: #f70;
|
||||
}
|
||||
|
||||
span.sh2 {
|
||||
color: #0c7;
|
||||
}
|
||||
|
||||
span.sh3 {
|
||||
color: #aaa;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
span.sh4 {
|
||||
color: #06c;
|
||||
}
|
||||
|
||||
span.tooltip {
|
||||
border-bottom: 1px dashed #444;
|
||||
}
|
||||
|
|
@ -31,7 +31,7 @@ class DocsWriter:
|
|||
self._script = ''
|
||||
|
||||
# High level writing
|
||||
def write_head(self, title, relative_css_path):
|
||||
def write_head(self, title, relative_css_path, default_css):
|
||||
"""Writes the head part for the generated document,
|
||||
with the given title and CSS
|
||||
"""
|
||||
|
|
@ -45,11 +45,24 @@ class DocsWriter:
|
|||
|
||||
self.write('''</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="''')
|
||||
<link id="style" href="''')
|
||||
|
||||
self.write(relative_css_path)
|
||||
self.write('/')
|
||||
self.write(default_css)
|
||||
|
||||
self.write('''" rel="stylesheet">
|
||||
<script>
|
||||
try {
|
||||
which = document.cookie.split('=')[1].split(';')[0];
|
||||
if (which) {
|
||||
document.getElementById("style").href = "''')
|
||||
self.write(relative_css_path)
|
||||
self.write('''/" + which;
|
||||
}
|
||||
} catch (e) {
|
||||
}
|
||||
</script>
|
||||
<link href="https://fonts.googleapis.com/css?family=Nunito|Source+Code+Pro" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -114,7 +114,9 @@ def _generate_index(folder, original_paths, root):
|
|||
filename = os.path.join(folder, 'index.html')
|
||||
with DocsWriter(filename, type_to_path=_get_path_for_type) as docs:
|
||||
# Title should be the current folder name
|
||||
docs.write_head(folder.title(), relative_css_path=paths['css'])
|
||||
docs.write_head(folder.title(),
|
||||
relative_css_path=paths['css'],
|
||||
default_css=original_paths['default_css'])
|
||||
|
||||
docs.set_menu_separator(paths['arrow'])
|
||||
_build_menu(docs, filename, root,
|
||||
|
|
@ -206,7 +208,8 @@ def _write_html_pages(tlobjects, errors, layer, input_res, output_dir):
|
|||
# * Generating the types documentation, showing available constructors.
|
||||
# TODO Tried using 'defaultdict(list)' with strange results, make it work.
|
||||
original_paths = {
|
||||
'css': 'css/docs.css',
|
||||
'css': 'css',
|
||||
'default_css': 'docs.light.css',
|
||||
'arrow': 'img/arrow.svg',
|
||||
'search.js': 'js/search.js',
|
||||
'404': '404.html',
|
||||
|
|
@ -251,7 +254,8 @@ def _write_html_pages(tlobjects, errors, layer, input_res, output_dir):
|
|||
|
||||
with DocsWriter(filename, type_to_path=path_for_type) as docs:
|
||||
docs.write_head(title=tlobject.class_name,
|
||||
relative_css_path=paths['css'])
|
||||
relative_css_path=paths['css'],
|
||||
default_css=original_paths['default_css'])
|
||||
|
||||
# Create the menu (path to the current TLObject)
|
||||
docs.set_menu_separator(paths['arrow'])
|
||||
|
|
@ -392,9 +396,9 @@ def _write_html_pages(tlobjects, errors, layer, input_res, output_dir):
|
|||
for k, v in original_paths.items()}
|
||||
|
||||
with DocsWriter(filename, type_to_path=path_for_type) as docs:
|
||||
docs.write_head(
|
||||
title=snake_to_camel_case(name),
|
||||
relative_css_path=paths['css'])
|
||||
docs.write_head(title=snake_to_camel_case(name),
|
||||
relative_css_path=paths['css'],
|
||||
default_css=original_paths['default_css'])
|
||||
|
||||
docs.set_menu_separator(paths['arrow'])
|
||||
_build_menu(docs, filename, output_dir,
|
||||
|
|
@ -570,7 +574,8 @@ def _write_html_pages(tlobjects, errors, layer, input_res, output_dir):
|
|||
|
||||
|
||||
def _copy_resources(res_dir, out_dir):
|
||||
for dirname, files in [('css', ['docs.css']), ('img', ['arrow.svg'])]:
|
||||
for dirname, files in [('css', ['docs.light.css', 'docs.dark.css']),
|
||||
('img', ['arrow.svg'])]:
|
||||
dirpath = os.path.join(out_dir, dirname)
|
||||
os.makedirs(dirpath, exist_ok=True)
|
||||
for file in files:
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user