Adding a dark theme to the clippy lint list
This commit is contained in:
xFrednet
parent
72eb60a28b
commit
e25b1060f5
@ -8,6 +8,13 @@
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/github.min.css"/>
|
||||
|
||||
<!-- This stylesheet is linked to a specific version to ensure that the link stays static even if mdbook does some refactoring. -->
|
||||
<!-- gitcdn is used to get the css file as a stylesheet content type. It's open source and published under the GLP-3.0 License -->
|
||||
<link rel="stylesheet" href="https://gitcdn.xyz/cdn/rust-lang/mdBook/v0.4.7/src/theme/css/variables.css"/>
|
||||
<link id="styleHighlight" rel="stylesheet" href="https://gitcdn.xyz/repo/rust-lang/mdBook/master/src/theme/highlight.css" disabled="true">
|
||||
<link id="styleNight" rel="stylesheet" href="https://gitcdn.xyz/repo/rust-lang/mdBook/master/src/theme/tomorrow-night.css">
|
||||
<link id="styleAyu" rel="stylesheet" href="https://gitcdn.xyz/repo/rust-lang/mdBook/master/src/theme/ayu-highlight.css" disabled="true">
|
||||
<style>
|
||||
blockquote { font-size: 1em; }
|
||||
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; }
|
||||
@ -15,7 +22,6 @@
|
||||
.form-inline .checkbox { margin-right: 0.6em }
|
||||
|
||||
.panel-heading { cursor: pointer; }
|
||||
.panel-heading:hover { background-color: #eee; }
|
||||
|
||||
.panel-title { display: flex; }
|
||||
.panel-title .label { display: inline-block; }
|
||||
@ -24,10 +30,134 @@
|
||||
.panel-title-name span { vertical-align: bottom; }
|
||||
|
||||
.panel .panel-title-name .anchor { display: none; }
|
||||
.panel:hover .panel-title-name .anchor { display: inline; color: #fff; }
|
||||
.panel:hover .panel-title-name .anchor { display: inline;}
|
||||
|
||||
</style>
|
||||
<style>
|
||||
/* Expanding the mdBoom theme*/
|
||||
.light {
|
||||
--inline-code-bg: #f6f7f6;
|
||||
}
|
||||
.rust {
|
||||
--inline-code-bg: #f6f7f6;
|
||||
}
|
||||
.coal {
|
||||
--inline-code-bg: #1d1f21;
|
||||
}
|
||||
.navy {
|
||||
--inline-code-bg: #1d1f21;
|
||||
}
|
||||
.ayu {
|
||||
--inline-code-bg: #191f26;
|
||||
}
|
||||
|
||||
/* Applying the mdBook theme */
|
||||
.theme-icon {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
margin: 0.7em;
|
||||
line-height: 2em;
|
||||
border: solid 1px var(--icons);
|
||||
border-radius: 5px;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.theme-icon:hover {
|
||||
background: var(--theme-hover);
|
||||
}
|
||||
.theme-choice {
|
||||
position: absolute;
|
||||
margin-top: calc(2em + 0.7em);
|
||||
margin-left: 0.7em;
|
||||
list-style: none;
|
||||
border: 1px solid var(--theme-popup-border);
|
||||
border-radius: 5px;
|
||||
color: var(--fg);
|
||||
background: var(--theme-popup-bg);
|
||||
padding: 0 0;
|
||||
}
|
||||
.theme-choice > li {
|
||||
padding: 5px 10px;
|
||||
font-size: 0.8em;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.theme-choice > li:hover {
|
||||
background: var(--theme-hover);
|
||||
}
|
||||
|
||||
.alert {
|
||||
color: var(--fg);
|
||||
background: var(--theme-hover);
|
||||
border: 1px solid var(--theme-popup-border);
|
||||
}
|
||||
.page-header {
|
||||
border-color: var(--theme-popup-border);
|
||||
}
|
||||
.panel-default > .panel-heading {
|
||||
background: var(--theme-hover);
|
||||
color: var(--fg);
|
||||
border: 1px solid var(--theme-popup-border);
|
||||
}
|
||||
.panel-default > .panel-heading:hover {
|
||||
filter: brightness(90%);
|
||||
}
|
||||
.list-group-item {
|
||||
background: 0%;
|
||||
border: 1px solid var(--theme-popup-border);
|
||||
}
|
||||
.panel, pre, hr {
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--theme-popup-border);
|
||||
}
|
||||
|
||||
#filter-label, #filter-clear {
|
||||
background: var(--searchbar-bg);
|
||||
color: var(--searchbar-fg);
|
||||
border-color: var(--theme-popup-border);
|
||||
filter: brightness(95%);
|
||||
}
|
||||
#filter-label:hover, #filter-clear:hover {
|
||||
filter: brightness(90%);
|
||||
}
|
||||
#filter-input {
|
||||
background: var(--searchbar-bg);
|
||||
color: var(--searchbar-fg);
|
||||
border-color: var(--theme-popup-border);
|
||||
}
|
||||
|
||||
#filter-input::-webkit-input-placeholder,
|
||||
#filter-input::-moz-placeholder {
|
||||
color: var(--searchbar-fg);
|
||||
opacity: 30%;
|
||||
}
|
||||
|
||||
p > code {
|
||||
color: var(--inline-code-color);
|
||||
background-color: var(--inline-code-bg);
|
||||
}
|
||||
html {
|
||||
scrollbar-color: var(--scrollbar) var(--bg);
|
||||
}
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="theme-icon" class="theme-icon">🖌</div>
|
||||
<ul id="theme-menu" class="theme-choice" style="display: none;">
|
||||
<li id="light">Light</li>
|
||||
<li id="rust">Rust</li>
|
||||
<li id="coal">Coal</li>
|
||||
<li id="navy">Navy</li>
|
||||
<li id="ayu">Ayu</li>
|
||||
</ul>
|
||||
|
||||
<div class="container" ng-app="clippy" ng-controller="lintList">
|
||||
<div class="page-header">
|
||||
<h1>ALL the Clippy Lints</h1>
|
||||
@ -49,7 +179,7 @@
|
||||
</div>
|
||||
|
||||
<div class="panel panel-default" ng-show="data">
|
||||
<div class="panel-body row">
|
||||
<div class="panel-body row filter-panel">
|
||||
<div class="col-md-6 form-inline">
|
||||
<div class="form-group form-group-lg">
|
||||
<p class="h4">Lint levels</p>
|
||||
@ -79,7 +209,7 @@
|
||||
<label class="input-group-addon" id="filter-label" for="filter-input">Filter:</label>
|
||||
<input type="text" class="form-control" placeholder="Keywords or search string" id="filter-input" ng-model="search" ng-model-options="{debounce: 50}"/>
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default" type="button" ng-click="search = ''">
|
||||
<button id="filter-clear" class="btn" type="button" ng-click="search = ''">
|
||||
Clear
|
||||
</button>
|
||||
</span>
|
||||
@ -320,6 +450,60 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setupListeners() {
|
||||
let themeIcon = document.getElementById("theme-icon");
|
||||
let themeMenu = document.getElementById("theme-menu");
|
||||
themeIcon.addEventListener("click", function(e) {
|
||||
if (themeMenu.style.display == "none") {
|
||||
themeMenu.style.display = "block";
|
||||
} else {
|
||||
themeMenu.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
let children = themeMenu.children;
|
||||
for (let index = 0; index < children.length; index++) {
|
||||
let child = children[index];
|
||||
child.addEventListener("click", function(e) {
|
||||
setTheme(child.id, true);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
setupListeners();
|
||||
|
||||
function setTheme(theme, store) {
|
||||
let enableHighlight = false;
|
||||
let enableNight = false;
|
||||
let enableAyu = false;
|
||||
|
||||
if (theme == "ayu") {
|
||||
enableAyu = true;
|
||||
} else if (theme == "coal" || theme == "navy") {
|
||||
enableNight = true;
|
||||
} else if (theme == "rust") {
|
||||
enableHighlight = true;
|
||||
} else {
|
||||
enableHighlight = true;
|
||||
// this makes sure that an unknown theme request gets set to a known one
|
||||
theme = "light";
|
||||
}
|
||||
document.getElementsByTagName("body")[0].className = theme;
|
||||
|
||||
document.getElementById("styleHighlight").disabled = !enableHighlight;
|
||||
document.getElementById("styleNight").disabled = !enableNight;
|
||||
document.getElementById("styleAyu").disabled = !enableAyu;
|
||||
|
||||
if (store) {
|
||||
try {
|
||||
localStorage.setItem('clippy-lint-list-theme', theme);
|
||||
} catch (e) { }
|
||||
}
|
||||
}
|
||||
|
||||
// loading the theme after the initial load
|
||||
setTheme(localStorage.getItem('clippy-lint-list-theme'), false);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user