add dark mode

This commit is contained in:
Pim Snel 2023-12-12 23:35:33 +01:00
parent 6996d92269
commit ae25357db7
2 changed files with 78 additions and 4 deletions

View File

@ -19,8 +19,16 @@ table tr.optrow {
#lastUpdateElement{
font-size: 10px;
color: #000;
}
#advanced {
background-color: #efefef;
padding:2px;
}
@media only screen and (max-width: 1026px) {
body {
@ -36,3 +44,67 @@ table tr.optrow {
display: none;
}
}
@media (prefers-color-scheme: dark) {
body {
color: #fff;
background-color: #1e1e24;
}
select {
color: #000;
}
.table-striped > tbody > tr:nth-of-type(2n+1) {
background-color: #18181a;
}
table#indexedOptionsTable tr td{
border-top: 1px solid #38383d !important;
}
table tr.optrow:hover {
background-color: #767676 !important;
}
.table > thead > tr > th {
border-bottom: 2px solid #38383d !important;
}
.form-control {
color: #dedede;
background-color: #060606;
border: 1px solid #38383d;
}
#lastUpdateElement{
font-size: 10px;
color: #fff;
}
#advanced {
background-color: #232327;
padding:2px;
}
footer {
color: #666;
background-color: #28365e;
font-size: smaller;
border-top: 1px solid #a3d3f6;
border-top-color: rgb(163, 211, 246);
}
.modal-content {
background-color: #28365e;
}
footer {
color:#ccc9c9;
}
a, a:visited {
color: #7196d9;
}
pre {
color: #f5f5f5;
background-color: #333;
}
}

View File

@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<title>Home Manager - Option Search</title>
<link rel="shortcut icon" href="images/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
@ -18,7 +19,7 @@
<body>
<header>
<div id="lastUpdateElement" style="position:absolute; line-height: 11px;color: #000; right: 37px;top:59px;"></div>
<div id="lastUpdateElement" style="position:absolute; line-height: 11px; right: 37px;top:59px;"></div>
<div class="logo">
<a class="baselink" href="./"> <img src="images/home-manager-option-search2.png"></a>
</div>
@ -62,7 +63,7 @@
</div>
</div>
<div id="searchform" style="background-color: white;top:54px;position:sticky;>
<div id="searchform" xstyle="background-color: white;top:54px;position:sticky;>
<form method="get" action="?" onSubmit="searchEnter()">
<div class="form-group">
<label for="searchInput">
@ -80,7 +81,7 @@
</div>
</form>
<div class="collapse" id="advanced" style="background-color: #efefef ;padding:2px;">
<div class="collapse" id="advanced" >
<ul class="list-inline" style="margin-top:5px;margin-bottom:5px;">
<li>Search in</li>
<li><input type="checkbox" checked id="indexOnTitleCheckbox"> Title</li>
@ -150,7 +151,8 @@
</footer>
<!--<script type="text/javascript" src="https://rawgit.com/kristopolous/Porter-Stemmer/master/PorterStemmer1980.min.js"></script>-->
<script type="text/javascript" src="https://unpkg.com/js-search@1.3.7/dist/umd/js-search.min.js"></script>
<!--<script type="text/javascript" src="https://unpkg.com/js-search@1.3.7/dist/umd/js-search.min.js"></script>-->
<script type="text/javascript" src="https://unpkg.com/js-search@2.0.1/dist/umd/js-search.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>