100 lines
4.4 KiB
CSS
100 lines
4.4 KiB
CSS
html { overflow-y:scroll; background-color:white; }
|
|
body { padding:4vw; margin:0; font-family:sans-serif; color:#333;
|
|
position:relative; }
|
|
a { color:inherit; text-decoration:none; -webkit-user-select:none;
|
|
-moz-user-select:none; -ms-user-select:none; user-select:none; }
|
|
.edit { display:block; color:#ccc; text-align:center; text-decoration:none;
|
|
width:30px; line-height:30px; display:block; transition:all 0.2s;
|
|
cursor:pointer; margin:0; padding:0; position:absolute; top:0; right:0; }
|
|
.edit:hover { color:white; background:#333; text-decoration:none; }
|
|
.category { overflow:hidden; }
|
|
.category h1 { font-size:15px; margin:0; border-bottom:1px solid #333;
|
|
line-height:30px; outline:none; position:relative; padding:0 35px 0 0;
|
|
cursor:pointer; }
|
|
.category h1 a:hover { text-decoration:none; }
|
|
.category .badge { display:inline-block; font-weight:normal; font-size:8px;
|
|
padding:0 5px; border:1px solid #aaa; border-radius:3px; line-height:15px;
|
|
text-align:center; min-width:11px; margin-left:10px; vertical-align:middle;
|
|
color:#555; font-family:monospace; box-shadow:1px 1px 0 #ccc; }
|
|
.bookmarks { display:none; list-style:none; margin:0; padding:30px 0; }
|
|
.category.open .bookmarks { display:block; }
|
|
.bookmark { display:block; padding:0; position:relative;
|
|
border-bottom:1px dotted #ccc; }
|
|
.bookmark .link { color:inherit; display:block; min-height:20px;
|
|
line-height:20px; padding:2px 0; }
|
|
.bookmark .link:hover { background-color:#eef; }
|
|
.bookmark .editicon { width:20px; height:20px; float:left;
|
|
margin-right:5px; border-radius:2px; position:relative;
|
|
cursor:pointer; margin-top:2px; }
|
|
.bookmark .editicon img { width:16px; height:16px; position:absolute;
|
|
top:2px; left:2px; }
|
|
.bookmark .editicon:hover { background-color:#333; }
|
|
button,
|
|
.button { display:inline-block; padding:5px 20px; border:1px solid #333;
|
|
text-decoration:none; color:#333; background:white; font-size:inherit;
|
|
cursor:pointer; transition:all 0.2s; -webkit-user-select:none;
|
|
-moz-user-select:none; -ms-user-select:none; user-selct:none; }
|
|
button:hover,
|
|
.button:hover { color:#ddd; background:#333; }
|
|
.buttons { margin-top:20px; }
|
|
|
|
#slidein { position:fixed; top:0; right:0; width:300px; height:100%;
|
|
transform:translateX(100%); transition:transform 0.3s;
|
|
background:rgba(0,0,0,0.9); }
|
|
#slidein.open { transform:translateX(0); }
|
|
#slidein .closer { position:absolute; top:10px; right:10px; width:30px;
|
|
height:30px; cursor:pointer; }
|
|
#slidein .closer:before,
|
|
#slidein .closer:after { display:block; content:""; width:30px; height:1px;
|
|
background:white; position:absolute; top:50%; left:0; }
|
|
#slidein .closer:before { transform:rotate(45deg); }
|
|
#slidein .closer:after { transform:rotate(-45deg); }
|
|
#slidein .inner { padding:50px 20px 20px 20px; color:white; }
|
|
|
|
.field label { display:block; margin:10px 0 3px 0; }
|
|
.field label:after { display:inline; content:":"; }
|
|
.field input[type="text"],
|
|
.field select { display:block; width:100%; box-sizing:border-box;
|
|
padding:3px 5px; border:1px solid #333; color:#333;
|
|
background:white; font-size:inherit; }
|
|
|
|
#favlet { position:absolute; top:10px; right:10px; color:#ccc;
|
|
text-decoration:none; font-size:10px; cursor:pointer; }
|
|
.favletcode { word-break:break-all; }
|
|
|
|
#addcontent { padding:5vw; }
|
|
|
|
/*
|
|
@media screen and (min-width:500px) {
|
|
.categories { margin:-10px; }
|
|
.categories:after { display:table; content:""; clear:left; }
|
|
.category { float:left; width:50%; box-sizing:border-box; padding:0 10px; }
|
|
.category:nth-of-type(2n+1) { clear:left; }
|
|
}
|
|
@media screen and (min-width:750px) {
|
|
.category { width:33.33%; }
|
|
.category:nth-of-type(2n+1) { clear:none; }
|
|
.category:nth-of-type(3n+1) { clear:left; }
|
|
}
|
|
@media screen and (min-width:1000px) {
|
|
.category { width:25%; }
|
|
.category:nth-of-type(3n+1) { clear:none; }
|
|
.category:nth-of-type(4n+1) { clear:left; }
|
|
}
|
|
*/
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
html { background-color:#333; }
|
|
body { color:#ccc; }
|
|
button, .button { border-color:#ccc; color:#ccc; background-color:#333; }
|
|
button:hover, .button:hover { color:#333; background-color:white;
|
|
border-color:white; }
|
|
#favlet { color:#aaa; }
|
|
#slidein .inner { color:#ccc; }
|
|
.category h1 { border-color:#ccc; }
|
|
.category .badge { color:#aaa; border-color:#555; box-shadow:#666; }
|
|
.edit:hover { color:#333; background-color:white; }
|
|
.bookmark { border-color:#666; }
|
|
.bookmark .editicon:hover { background-color:white; }
|
|
.bookmark .link:hover { background-color:#444; }
|
|
} |