<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
:root { color-scheme: light dark; }
body {
width: 260px;
margin: 0;
padding: 12px;
text-align: center;
font: 13px/1.4 system-ui, sans-serif;
}
form {
display: flex;
gap: 6px;
}
#word {
border-radius: 4px;
border: 1px solid #bbb;
flex: 1;
font-size: 17px;
font: inherit;
min-width: 0;
padding: 6px 8px;
}
#word:focus {
outline: none;
border-color: #bbb;
}
form button {
background: #486860;
border-radius: 4px;
border: none;
color: #fff;
cursor: pointer;
padding: 0;
width: 30px;
}
#add_button {
font-size: 18px;
font-weight: bold;
padding: 0 0 4px 0;
}
#toggle {
font-size: 12px;
padding: 0 0 0 1px;
}
#toggle.off {
background: #8a8a8a;
font-size: 12px;
padding: 0 0 3px 2px;
}
ul {
list-style: none;
margin: 10px 0 0;
padding: 0;
max-height: 240px;
overflow-y: auto;
}
li {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 5px 8px;
border-radius: 4px;
background: rgba(127, 127, 127, 0.12);
}
li + li {
margin-top: 4px;
}
li span {
overflow-wrap: anywhere;
}
li button {
border: none;
background: none;
color: inherit;
opacity: 0.55;
font-size: 16px;
cursor: pointer;
}
li button:hover {
opacity: 1;
}
p.empty {
margin: 12px 0 0;
opacity: 0.6;
text-align: center;
}
.menu-link {
color: #888;
text-decoration: none;
font-size: 11px;
padding: 0 10px 0 0;
}
.menu-link:hover {
text-decoration: none;
}
footer {
font-size: 11px;
color: #888;
padding-top: 11px;
}
</style>
</head>
<body>
<form id="add">
<input id="word" type="text" placeholder="Add word(s)" autocomplete="off" autofocus />
<button type="submit" title="Add" id="add_button">+</button>
<button type="button" id="toggle"></button>
</form>
<ul id="list"></ul>
<footer><a href="https://vgmlr.com/mlwrk" target="_blank" class="menu-link">vgmlr.com/mlwrk</a> 138.026</footer>
<script src="popup.js"></script>
</body>
</html>
Pith - fret
Updates
Menu
Calendar
Project Tin (024/029)
Miter
0.0038
257,022 (+276)
257,022 (+276)