aljaz/boris
1
1
Fork 0
mirror of https://github.com/dergigi/boris.git synced 2025-12-26 02:54:29 +01:00
Code Issues Packages Projects Releases Wiki Activity

style: make sidebars extend edge-to-edge on desktop

Browse Source
This commit is contained in:
Gigi
2025-10-13 22:37:20 +02:00
parent f80fa3de7f
commit e03696eed7
3 changed files with 36 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/styles/layout/app.css
View File

@@ -39,8 +39,8 @@
@media (min-width: 769px) {
.pane.sidebar {
position: sticky;
top: 1rem;
max-height: calc(100vh - 2rem);
top: 0;
max-height: 100vh;
overflow-y: auto;
align-self: start;
}
@@ -55,8 +55,8 @@
.pane.highlights {
position: sticky;
top: 1rem;
max-height: calc(100vh - 2rem);
top: 0;
max-height: 100vh;
overflow-y: auto;
align-self: start;
}

17
src/styles/layout/highlights.css
View File

@@ -1,14 +1,20 @@
/* Highlights panel layout and interactions */
.highlights-container {
background: #1a1a1a;
border: 1px solid #333;
border-radius: 12px;
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
/* Desktop: no border or rounded corners for edge-to-edge sidebars */
@media (min-width: 769px) {
.highlights-container {
border: none;
border-radius: 0;
}
}
.highlights-container.collapsed {
display: flex;
align-items: flex-start;
@@ -47,6 +53,13 @@
border-radius: 12px 12px 0 0;
}
/* Desktop: no rounded corners for edge-to-edge header */
@media (min-width: 769px) {
.highlights-header {
border-radius: 0;
}
}
.highlights-actions { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.highlights-actions-left { display: flex; align-items: center; gap: 0.5rem; }

19
src/styles/layout/sidebar.css
View File

@@ -1,8 +1,6 @@
/* Bookmarks and sidebar layout */
.bookmarks-container {
background: #1a1a1a;
border: 1px solid #333;
border-radius: 12px;
display: flex;
flex-direction: column;
height: 100%;
@@ -11,6 +9,14 @@
padding: 0;
}
/* Desktop: no border or rounded corners for edge-to-edge sidebars */
@media (min-width: 769px) {
.bookmarks-container {
border: none;
border-radius: 0;
}
}
.bookmarks-container .view-mode-controls {
margin-top: auto;
padding: 1rem;
@@ -41,6 +47,15 @@
margin-bottom: 0;
}
/* Desktop: no border or rounded corners for edge-to-edge header */
@media (min-width: 769px) {
.sidebar-header-bar {
border: none;
border-radius: 0;
border-bottom: 1px solid #333;
}
}
.sidebar-header-right {
display: flex;
align-items: center;