a0482d3f0b
Two independent filters. One allows only styles that are enabled, the other allows only styles that were written locally (that is, styles without an update URL).
153 lines
3.1 KiB
HTML
153 lines
3.1 KiB
HTML
<html>
|
|
<head>
|
|
<title></title>
|
|
<style>
|
|
body {
|
|
margin: 0px;
|
|
font: 12px arial,sans-serif;
|
|
}
|
|
a, a:visited {
|
|
color: #555;
|
|
-webkit-transition: color 0.5s;
|
|
}
|
|
a:hover {
|
|
color: #999;
|
|
}
|
|
#header {
|
|
height: 100%;
|
|
width: 250px;
|
|
position: fixed;
|
|
top: 0px;
|
|
padding: 15px;
|
|
border-right: 1px dashed #AAA;
|
|
}
|
|
#header {
|
|
-webkit-box-shadow: 0px 0px 50px -18px black;
|
|
}
|
|
#installed {
|
|
position: relative;
|
|
margin-left: 280px;
|
|
}
|
|
[style-id] {
|
|
margin: 10px;
|
|
padding: 0px 15px;
|
|
}
|
|
[style-id] {
|
|
border-top: 2px solid gray;
|
|
}
|
|
#installed::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%; height: 2px;
|
|
background-color: #fff;
|
|
}
|
|
.applies-to, .actions {
|
|
padding-left: 15px;
|
|
}
|
|
.actions > * {
|
|
margin-right: 5px;
|
|
}
|
|
.applies-to-extra {
|
|
font-weight: bold;
|
|
}
|
|
.disabled h2::after {
|
|
content: " (Disabled)";
|
|
}
|
|
.disabled {
|
|
opacity: 0.5;
|
|
}
|
|
.disabled .disable {
|
|
display: none;
|
|
}
|
|
.enabled .enable {
|
|
display: none;
|
|
}
|
|
|
|
/* Default, no update buttons */
|
|
.update, .check-update {
|
|
display: none;
|
|
}
|
|
/* Check update button for things that can*/
|
|
*[style-update-url] .check-update {
|
|
display: inline;
|
|
}
|
|
/* Update check in progress */
|
|
.checking-update .check-update {
|
|
display: none;
|
|
}
|
|
/* Updates available */
|
|
.can-update .update {
|
|
display: inline;
|
|
}
|
|
.can-update .check-update {
|
|
display: none;
|
|
}
|
|
/* Updates not available */
|
|
.no-update .check-update {
|
|
display: none;
|
|
}
|
|
/* Updates done */
|
|
.update-done .check-update {
|
|
display: none;
|
|
}
|
|
|
|
@media(max-width:675px) {
|
|
#header {
|
|
height: auto;
|
|
position: inherit;
|
|
width: auto;
|
|
border-right: none;
|
|
}
|
|
|
|
#installed {
|
|
margin-left: 0px;
|
|
}
|
|
|
|
[style-id] {
|
|
margin: 0px;
|
|
}
|
|
}
|
|
|
|
fieldset {
|
|
border-width: 1px;
|
|
border-radius: 6px;
|
|
margin: 1em 0;
|
|
}
|
|
legend {
|
|
color: gray;
|
|
}
|
|
.enabled-only > .disabled, .edited-only > [style-update-url] {
|
|
display: none;
|
|
}
|
|
</style>
|
|
<script src="localization.js"></script>
|
|
<script src="health.js"></script>
|
|
<script src="storage.js"></script>
|
|
<script src="messaging.js"></script>
|
|
<script src="apply.js"></script>
|
|
</head>
|
|
<body id="stylish-manage">
|
|
|
|
<div id="header">
|
|
<img src="128.png">
|
|
<h1 id="manage-heading"></h1>
|
|
<p id="manage-text"></p>
|
|
<fieldset>
|
|
<legend id="filters"></legend>
|
|
<div><input id="manage.onlyEnabled" type="checkbox"><label id="manage.onlyEnabled-label" for="manage.onlyEnabled"></label></div>
|
|
<div><input id="manage.onlyEdited" type="checkbox"><label id="manage.onlyEdited-label" for="manage.onlyEdited"></label></div>
|
|
</fieldset>
|
|
<p><button id="check-all-updates"></button></p>
|
|
<p><a href="edit.html"><button id="add-style-label"></button></a></p>
|
|
<div id="options">
|
|
<h2 id="options-heading"></h2>
|
|
<input id="show-badge" type="checkbox"><label id="show-badge-label" for="show-badge"></label>
|
|
</div>
|
|
</div>
|
|
<div id="installed"></div>
|
|
|
|
<script src="manage.js"></script>
|
|
</body>
|
|
</html>
|