Cybrkyd's Git Repositories

IndexedDB-notes - commit: 79ad4aa

commit 79ad4aab4ef496499e67bac0a7ee54302b5c1d37ef802caeeb0fae41a7f89bd2
author cybrkyd <git@cybrkyd.com> 2026-05-25 16:44:59 +0100
committer cybrkyd <git@cybrkyd.com> 2026-05-25 16:44:59 +0100

Commit Message

CSS

- Re-style sidebar
- Shuffle styles order

📊 Diffstat

idb-notes.html 136
1 files changed, 60 insertions(+), 76 deletions(-)

Diff

diff --git a/idb-notes.html b/idb-notes.html
index dd6268b..5dc0079 100644
--- a/idb-notes.html
+++ b/idb-notes.html
@@ -20,6 +20,18 @@ body {
display: flex;
min-height: 100vh;
}
+ h1 {
+ margin-bottom: 20px;
+ font-size: 1.6rem;
+ color: #807973;
+ }
+ #docStatus {
+ font-size: 13px;
+ color: #555;
+ margin-bottom: 8px;
+ min-height: 18px;
+ font-style: italic;
+ }
textarea {
width: 100%;
height: 600px;
@@ -32,155 +44,127 @@ textarea {
font-family: Arial, sans-serif;
background-color: #fff1e5;
}
+ .link-btn {
+ background: none;
+ border: none;
+ padding: 0;
+ margin-top: 10px;
+ margin-right: 14px;
+ font-size: 14px;
+ color: #0f8e99;
+ text-decoration: underline;
+ cursor: pointer;
+ font-family: inherit;
+ }
+ .link-btn:hover {
+ color: darkblue;
+ }
.saved-column {
- background: white;
- width: 300px;
+ background: #fde8d0;
+ width: 260px;
flex-shrink: 0;
- box-shadow: 2px 0 8px rgba(0,0,0,0.1);
+ box-shadow: 2px 0 8px rgba(0,0,0,0.07);
transition: width 0.3s ease;
position: relative;
display: flex;
flex-direction: column;
}
-
.saved-column.collapsed {
- width: 50px;
+ width: 44px;
}
-
.saved-column.collapsed .docs-content {
display: none;
}
-
.column-header {
- padding: 15px;
- border-bottom: 1px solid #ddd;
+ padding: 14px 12px;
+ border-bottom: 1px solid #e0c8b0;
display: flex;
justify-content: space-between;
align-items: center;
- background: white;
+ background: #fde8d0;
}
-
.saved-column.collapsed .column-header {
justify-content: center;
- padding: 15px 5px;
+ padding: 14px 5px;
}
-
.column-header h2 {
- font-size: 18px;
+ font-size: 0.95rem;
+ color: #807973;
+ font-weight: 600;
margin: 0;
}
-
.saved-column.collapsed .column-header h2 {
display: none;
}
-
.toggle-btn {
- background: #007bff;
- color: white;
- border: none;
- width: 30px;
- height: 30px;
- border-radius: 4px;
+ background: none;
+ color: #0f8e99;
+ border: 1px solid #0f8e99;
+ width: 24px;
+ height: 24px;
+ border-radius: 3px;
cursor: pointer;
- font-size: 18px;
+ font-size: 16px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
- transition: background 0.2s;
+ transition: background 0.2s, color 0.2s;
+ flex-shrink: 0;
+ line-height: 1;
}
-
.toggle-btn:hover {
- background: #0056b3;
+ background: #0f8e99;
+ color: #fff1e5;
}
-
.docs-content {
flex: 1;
overflow-y: auto;
- padding: 15px;
+ padding: 12px;
}
-
.doc-single-line {
- margin-bottom: 12px;
+ margin-bottom: 10px;
padding: 8px;
- background: #f9f9f9;
+ background: #fff1e5;
border-radius: 4px;
- border: 1px solid #eee;
+ border: 1px solid #e0c8b0;
}
-
.doc-single-line.active-doc {
background: #e8f0fe;
border-color: #007bff;
}
-
.doc-line1 {
- font-size: 11px;
- color: #333;
+ font-size: 0.72rem;
+ color: #444;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
- margin-bottom: 6px;
+ margin-bottom: 5px;
}
-
.doc-line2 {
display: flex;
gap: 10px;
}
-
.small-link-btn {
background: none;
border: none;
padding: 0;
- font-size: 11px;
- color: blue;
+ font-size: 0.72rem;
+ color: #0f8e99;
text-decoration: underline;
cursor: pointer;
font-family: inherit;
}
-
.small-link-btn:hover {
- color: darkblue;
+ color: #0a6b75;
}
-
.content-column {
flex: 1;
padding: 40px;
max-width: 900px;
margin: 0 auto;
}
-
- h1 {
- margin-bottom: 20px;
- font-size: 28px;
- }
-
- #docStatus {
- font-size: 13px;
- color: #555;
- margin-bottom: 8px;
- min-height: 18px;
- font-style: italic;
- }
-
-
-
- .link-btn {
- background: none;
- border: none;
- padding: 0;
- margin-top: 10px;
- margin-right: 14px;
- font-size: 14px;
- color: blue;
- text-decoration: underline;
- cursor: pointer;
- font-family: inherit;
- }
-
- .link-btn:hover {
- color: darkblue;
- }
</style>
</head>
<body>