Styling Verbesserungen für Notes und Bookmarks

hugo/static/css/bookmarks.css

@@ -1,65 +1,95 @@
-html { overflow-y:scroll; background-color:white; }
-body { padding:4vw; margin:0; font-family:sans-serif; color:#333;
-  position:relative; }
+:root {
+  --color-hl: #a19bff;
+  --color-fg: #333;
+  --color-fg2: #666;
+  --color-bg: #ccc;
+  --color-bg2: #999;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-fg: #ccc;
+    --color-fg2: #999;
+    --color-bg: #333;
+    --color-bg2: #666;
+  }
+}
+
+::selection {
+  background-color:var(--color-hl); color:#333;
+}
+
+html { overflow-y:scroll; background-color:var(--color-bg); }
+body { padding:4vw; margin:0; font-family:sans-serif;
+  color:var(--color-fg); accent-clor:var(--color-hl); 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;
+.edit { display:block; color:var(--color-hl); 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; }
+  cursor:pointer; margin:0; padding:0; position:absolute; top:0; right:0;
+  border-radius:100px; }
+.edit:hover { color:var(--color-bg); background:var(--color-hl);
+  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 { font-size:15px; margin:0; line-height:30px; outline:none;
+  position:relative; padding:0 35px 0 0;
+  border-bottom:1px solid var(--color-fg); }
 .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; }
+.category .title { cursor:pointer; transition:color 0.2s; }
+.category .title:hover { color:var(--color-hl); }
+.category .badge { display:inline-block; font-weight:normal;
+  font-size:8px; padding:0 5px; border:1px solid var(--color-bg2);
+  border-radius:100px; line-height:14px; text-align:center;
+  min-width:11px; margin-left:10px; vertical-align:middle;
+  color:var(--color-fg2); font-family:monospace; }
 .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; }
+  border-bottom:1px dotted var(--color-bg2); }
 .bookmark .link { color:inherit; display:block; min-height:20px;
   line-height:20px; padding:2px 0; }
-.bookmark .link:hover { background-color:#eef; }
+.bookmark .link:hover { background-color:#ffffff0f; }
 .bookmark .editicon { width:20px; height:20px; float:left;
   margin-right:5px; border-radius:2px; position:relative;
-  cursor:pointer; margin-top:2px; }
+  cursor:pointer; margin-top:2px; transition:all 0.2s; }
 .bookmark .editicon img { width:16px; height:16px; position:absolute;
   top:2px; left:2px; }
-.bookmark .editicon:hover { background-color:#333; }
+.bookmark .editicon:hover { background-color:var(--color-hl); }
 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 { display:inline-block; padding:5px 20px; text-decoration:none;
+  color:var(--color-fg); background:transparent; font-size:inherit;
+  border:1px solid var(--color-fg); 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; }
+.button:hover { color:var(--color-hl); border-color:var(--color-hl); }
 .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); }
+  background:rgba(0,0,0,0.2); backdrop-filter:blur(10px); }
 #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:after { display:block; content:""; width:30px;
+  height:1px; background:var(--color-fg); 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; }
+#slidein .inner { padding:50px 20px 20px 20px; color:var(--color-fg); }
 
 .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; }
+  padding:3px 5px; border:1px solid var(--color-fg);
+  color:var(--color-fg); background:var(--color-bg); font-size:inherit; }
 
-#favlet { position:absolute; top:10px; right:10px; color:#ccc;
-  text-decoration:none; font-size:10px; cursor:pointer; }
+#favlet { position:absolute; top:10px; right:10px; color:var(--color-bg2);
+  text-decoration:none; font-size:10px; cursor:pointer;
+  transition:color 0.2s; }
+#favlet:hover { color:var(--color-hl); }
 .favletcode { word-break:break-all; }
 
 #addcontent { padding:5vw; }
@@ -81,20 +111,4 @@ button:hover,
   .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; }
-}
+*/