jazzman/alphabreed
1
0
Fork 0
Code Pull Requests Actions Packages Projects Releases Activity

Styling Verbesserungen für Notes und Bookmarks

Browse Source
This commit is contained in:
Stefan Mühlinghaus
2026-01-30 23:22:16 +01:00
parent 469d574e96
commit 5ac790cddd
2 changed files with 80 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
hugo/layouts/notes/baseof.html
View File

@@ -13,18 +13,33 @@
<script defer src="/js/alpine-alphabreed.js"></script> <script defer src="/js/alpine-alphabreed.js"></script>
<script defer src="/js/alpine-3.15.3.min.js"></script> <script defer src="/js/alpine-3.15.3.min.js"></script>
<style> <style>
:root {
--color-hl: #a19bff;
--color-bg: #ccc;
--color-fg: #333;
}
@media (prefers-color-scheme: dark) {
:root {
--color-fg: #ccc;
--color-bg: #333;
}
}
::selection {
background-color:var(--color-hl); color:#333;
}
html, body, form, textarea { padding:0; margin:0; html, body, form, textarea { padding:0; margin:0;
height:100%; } height:100%; }
html { background-color:#333; color:#ccc; html { background-color:var(--color-bg); color:var(--color-fg);
font-family:monospace; font-size:15px; } caret-color:var(--color-hl); font-family:monospace;
font-size:15px; }
main { height:100%; } main { height:100%; }
textarea { border:none; padding:20px; width:100%; textarea { border:none; padding:20px; width:100%;
font-family:inherit; box-sizing:border-box; resize:none; font-family:inherit; box-sizing:border-box; resize:none;
background-color:inherit; color:inherit; background-color:inherit; color:inherit;
font-size:inherit; outline:none; } font-size:inherit; outline:none; }
#pending { position:fixed; top:10px; right:10px; width:20px; #pending { position:fixed; top:10px; right:10px; width:20px;
height:20px; border:3px solid #ccc; border-radius:20px; height:20px; border:3px solid transparent; border-radius:20px;
border-color:#ccc #ccc transparent transparent; border-color:var(--color-hl) var(--color-hl) transparent transparent;
opacity:0; transition:opacity 0.5s; transition-delay:0.5s; opacity:0; transition:opacity 0.5s; transition-delay:0.5s;
animation:0.7s linear infinite rotate; } animation:0.7s linear infinite rotate; }
#pending.show { opacity:1; } #pending.show { opacity:1; }

108
hugo/static/css/bookmarks.css
View File

@@ -1,65 +1,95 @@
html { overflow-y:scroll; background-color:white; } :root {
body { padding:4vw; margin:0; font-family:sans-serif; color:#333; --color-hl: #a19bff;
position:relative; } --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; a { color:inherit; text-decoration:none; -webkit-user-select:none;
-moz-user-select:none; -ms-user-select:none; 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; width:30px; line-height:30px; display:block; transition:all 0.2s;
cursor:pointer; margin:0; padding:0; position:absolute; top:0; right:0; } cursor:pointer; margin:0; padding:0; position:absolute; top:0; right:0;
.edit:hover { color:white; background:#333; text-decoration:none; } border-radius:100px; }
.edit:hover { color:var(--color-bg); background:var(--color-hl);
text-decoration:none; }
.category { overflow:hidden; } .category { overflow:hidden; }
.category h1 { font-size:15px; margin:0; border-bottom:1px solid #333; .category h1 { font-size:15px; margin:0; line-height:30px; outline:none;
line-height:30px; outline:none; position:relative; padding:0 35px 0 0; position:relative; padding:0 35px 0 0;
cursor:pointer; } border-bottom:1px solid var(--color-fg); }
.category h1 a:hover { text-decoration:none; } .category h1 a:hover { text-decoration:none; }
.category .badge { display:inline-block; font-weight:normal; font-size:8px; .category .title { cursor:pointer; transition:color 0.2s; }
padding:0 5px; border:1px solid #aaa; border-radius:3px; line-height:15px; .category .title:hover { color:var(--color-hl); }
text-align:center; min-width:11px; margin-left:10px; vertical-align:middle; .category .badge { display:inline-block; font-weight:normal;
color:#555; font-family:monospace; box-shadow:1px 1px 0 #ccc; } 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; } .bookmarks { display:none; list-style:none; margin:0; padding:30px 0; }
.category.open .bookmarks { display:block; } .category.open .bookmarks { display:block; }
.bookmark { display:block; padding:0; position:relative; .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; .bookmark .link { color:inherit; display:block; min-height:20px;
line-height:20px; padding:2px 0; } 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; .bookmark .editicon { width:20px; height:20px; float:left;
margin-right:5px; border-radius:2px; position:relative; 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; .bookmark .editicon img { width:16px; height:16px; position:absolute;
top:2px; left:2px; } top:2px; left:2px; }
.bookmark .editicon:hover { background-color:#333; } .bookmark .editicon:hover { background-color:var(--color-hl); }
button, button,
.button { display:inline-block; padding:5px 20px; border:1px solid #333; .button { display:inline-block; padding:5px 20px; text-decoration:none;
text-decoration:none; color:#333; background:white; font-size:inherit; color:var(--color-fg); background:transparent; font-size:inherit;
cursor:pointer; transition:all 0.2s; -webkit-user-select:none; border:1px solid var(--color-fg); cursor:pointer; transition:all 0.2s;
-moz-user-select:none; -ms-user-select:none; user-selct:none; } -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none;
user-selct:none; }
button:hover, button:hover,
.button:hover { color:#ddd; background:#333; } .button:hover { color:var(--color-hl); border-color:var(--color-hl); }
.buttons { margin-top:20px; } .buttons { margin-top:20px; }
#slidein { position:fixed; top:0; right:0; width:300px; height:100%; #slidein { position:fixed; top:0; right:0; width:300px; height:100%;
transform:translateX(100%); transition:transform 0.3s; 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.open { transform:translateX(0); }
#slidein .closer { position:absolute; top:10px; right:10px; width:30px; #slidein .closer { position:absolute; top:10px; right:10px; width:30px;
height:30px; cursor:pointer; } height:30px; cursor:pointer; }
#slidein .closer:before, #slidein .closer:before,
#slidein .closer:after { display:block; content:""; width:30px; height:1px; #slidein .closer:after { display:block; content:""; width:30px;
background:white; position:absolute; top:50%; left:0; } height:1px; background:var(--color-fg); position:absolute; top:50%;
left:0; }
#slidein .closer:before { transform:rotate(45deg); } #slidein .closer:before { transform:rotate(45deg); }
#slidein .closer:after { 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 { display:block; margin:10px 0 3px 0; }
.field label:after { display:inline; content:":"; } .field label:after { display:inline; content:":"; }
.field input[type="text"], .field input[type="text"],
.field select { display:block; width:100%; box-sizing:border-box; .field select { display:block; width:100%; box-sizing:border-box;
padding:3px 5px; border:1px solid #333; color:#333; padding:3px 5px; border:1px solid var(--color-fg);
background:white; font-size:inherit; } color:var(--color-fg); background:var(--color-bg); font-size:inherit; }
#favlet { position:absolute; top:10px; right:10px; color:#ccc; #favlet { position:absolute; top:10px; right:10px; color:var(--color-bg2);
text-decoration:none; font-size:10px; cursor:pointer; } text-decoration:none; font-size:10px; cursor:pointer;
transition:color 0.2s; }
#favlet:hover { color:var(--color-hl); }
.favletcode { word-break:break-all; } .favletcode { word-break:break-all; }
#addcontent { padding:5vw; } #addcontent { padding:5vw; }
@@ -81,20 +111,4 @@ button:hover,
.category:nth-of-type(3n+1) { clear:none; } .category:nth-of-type(3n+1) { clear:none; }
.category:nth-of-type(4n+1) { clear:left; } .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; }
}