A text-based bookmark manager rendered in a web page
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

75 lines
1.6 KiB

:root{
--font-size:12px;
--line-height:16px;
--gap:2px;
--height:calc(var(--line-height) + var(--gap) * 2);
--height:auto;
--width-number:2em;
--background:#FEFEFE;
--link:purple;
--text:black;
--selection:lightyellow
}
@font-face {
font-family: Junicode;
src: url("Junicode-CondLight.otf") format("opentype");
}
@font-face {
font-family: Junicode;
src: url("Junicode-CondLightItalic.otf") format("opentype");
font-style:italic;
}
* {
font-family: Junicode, serif;
font-variant-numeric: lining-nums;
}
textarea {width:100%;padding:0;margin:0;
border:1px dotted black;
height:var(--height)
}
.PIN date, .PIN .tags, .PIN .id {display:none}
tr a{color:var(--text); text-decoration:none}
tr a::after{
margin-left:5px; content:attr(href); color:var(--link);
text-decoration:underline}
li:hover a::after{display:block}
tbody tr:hover {background:var(--selection)}
td {line-height:var(--line-height);
height:var(--height);
border-bottom: 1px solid black;
padding: var(--gap) 5px;
word-break:break-word;
}
table {
border-collapse:collapse;
border: 1px dotted black;
}
hr{ border:none;
border-bottom: 1px solid black;
}
button::after {
content:" "attr(count);
position:absolute;
transform:translate(1px, -5px)
}
button{background:transparent;border:none}
p{margin:0;display:inline}
.desc {opacity:.5}
td:last-of-type {text-align:center;min-width:8ch}
td:first-of-type {text-align:center;width:4ch}
td:nth-of-type(3) {text-align:center}
.hidden{display:none}
tr,table {min-width:100%}