diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
index 7c255b2..2fea020 100644
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -6,8 +6,9 @@
diff --git a/index.html b/index.html
index eab9b51..0a66d27 100644
--- a/index.html
+++ b/index.html
@@ -10,11 +10,6 @@
Bluelib 3
-
diff --git a/src/rules/skeleton.less b/src/rules/skeleton.less
index 023eac0..0bf1247 100644
--- a/src/rules/skeleton.less
+++ b/src/rules/skeleton.less
@@ -299,6 +299,8 @@
// Thanks, CSS variables!
color: @cA;
+ // Get the scrollbar color from the theme
+ scrollbar-color: @rgb-foreground @rgb-background;
}
//
@@ -346,8 +348,6 @@
display: grid;
justify-content: stretch;
align-items: stretch;
-
- width: 100%;
}
// A layout with a single container spanning the whole screen.
@@ -434,7 +434,7 @@
/// ===== Panels =====
/// Panels are the main sectioning elements available in Bluelib.
- /// Many instance of them should be present on the page!
+ /// Many instances of them should be present on the page!
/// They should group small amounts of tightly related content, which can be understood more or less separately from the rest of the page.
//
@@ -451,6 +451,9 @@
// Panels should try to fill the most space possible
width: 100%;
+ // And should be wide at least 312px
+ min-width: 312px;
+
background-color: @c0;
border-color: @c1;
diff --git a/src/targets/hacker.apache.css b/src/targets/hacker.apache.css
index 96870ff..c9bf2b3 100644
--- a/src/targets/hacker.apache.css
+++ b/src/targets/hacker.apache.css
@@ -67,6 +67,7 @@ body,
body *,
.bluelib * {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
+ scrollbar-color: rgb(var(--bluelib-foreground-r), var(--bluelib-foreground-g), var(--bluelib-foreground-b)) rgb(var(--bluelib-background-r), var(--bluelib-background-g), var(--bluelib-background-b));
}
body,
.bluelib,
@@ -95,7 +96,6 @@ body .layout,
display: grid;
justify-content: stretch;
align-items: stretch;
- width: 100%;
}
body .layout-fill,
.bluelib .layout-fill {
@@ -188,6 +188,7 @@ body .panel,
padding: 8px;
border-radius: 4px;
width: 100%;
+ min-width: 312px;
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.03);
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.125);
}
diff --git a/src/targets/paper.apache.css b/src/targets/paper.apache.css
index 8d07c66..a8774c7 100644
--- a/src/targets/paper.apache.css
+++ b/src/targets/paper.apache.css
@@ -67,6 +67,7 @@ body,
body *,
.bluelib * {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
+ scrollbar-color: rgb(var(--bluelib-foreground-r), var(--bluelib-foreground-g), var(--bluelib-foreground-b)) rgb(var(--bluelib-background-r), var(--bluelib-background-g), var(--bluelib-background-b));
}
body,
.bluelib,
@@ -95,7 +96,6 @@ body .layout,
display: grid;
justify-content: stretch;
align-items: stretch;
- width: 100%;
}
body .layout-fill,
.bluelib .layout-fill {
@@ -188,6 +188,7 @@ body .panel,
padding: 8px;
border-radius: 4px;
width: 100%;
+ min-width: 312px;
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.03);
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.125);
}
diff --git a/src/targets/royalblue.apache.css b/src/targets/royalblue.apache.css
index 6453e96..c3aede8 100644
--- a/src/targets/royalblue.apache.css
+++ b/src/targets/royalblue.apache.css
@@ -67,6 +67,7 @@ body,
body *,
.bluelib * {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
+ scrollbar-color: rgb(var(--bluelib-foreground-r), var(--bluelib-foreground-g), var(--bluelib-foreground-b)) rgb(var(--bluelib-background-r), var(--bluelib-background-g), var(--bluelib-background-b));
}
body,
.bluelib,
@@ -95,7 +96,6 @@ body .layout,
display: grid;
justify-content: stretch;
align-items: stretch;
- width: 100%;
}
body .layout-fill,
.bluelib .layout-fill {
@@ -188,6 +188,7 @@ body .panel,
padding: 8px;
border-radius: 4px;
width: 100%;
+ min-width: 312px;
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.03);
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.125);
}
diff --git a/src/targets/skeleton.apache.css b/src/targets/skeleton.apache.css
index 8a1ec6c..2e08674 100644
--- a/src/targets/skeleton.apache.css
+++ b/src/targets/skeleton.apache.css
@@ -67,6 +67,7 @@ body,
body *,
.bluelib * {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
+ scrollbar-color: rgb(var(--bluelib-foreground-r), var(--bluelib-foreground-g), var(--bluelib-foreground-b)) rgb(var(--bluelib-background-r), var(--bluelib-background-g), var(--bluelib-background-b));
}
body,
.bluelib,
@@ -95,7 +96,6 @@ body .layout,
display: grid;
justify-content: stretch;
align-items: stretch;
- width: 100%;
}
body .layout-fill,
.bluelib .layout-fill {
@@ -188,6 +188,7 @@ body .panel,
padding: 8px;
border-radius: 4px;
width: 100%;
+ min-width: 312px;
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.03);
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.125);
}
diff --git a/src/targets/skeleton.module.css b/src/targets/skeleton.module.css
index 846e113..eb711a1 100644
--- a/src/targets/skeleton.module.css
+++ b/src/targets/skeleton.module.css
@@ -65,6 +65,7 @@
.bluelib *,
.bluelib .all {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
+ scrollbar-color: rgb(var(--bluelib-foreground-r), var(--bluelib-foreground-g), var(--bluelib-foreground-b)) rgb(var(--bluelib-background-r), var(--bluelib-background-g), var(--bluelib-background-b));
}
.bluelib,
.bluelib *,
@@ -86,7 +87,6 @@
display: grid;
justify-content: stretch;
align-items: stretch;
- width: 100%;
}
.bluelib .layout-fill {
padding: 4px;
@@ -164,6 +164,7 @@
padding: 8px;
border-radius: 4px;
width: 100%;
+ min-width: 312px;
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.03);
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.125);
}
diff --git a/src/targets/skeleton.root.css b/src/targets/skeleton.root.css
index 13248b6..7c964b8 100644
--- a/src/targets/skeleton.root.css
+++ b/src/targets/skeleton.root.css
@@ -67,6 +67,7 @@ body,
body *,
.bluelib * {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
+ scrollbar-color: rgb(var(--bluelib-foreground-r), var(--bluelib-foreground-g), var(--bluelib-foreground-b)) rgb(var(--bluelib-background-r), var(--bluelib-background-g), var(--bluelib-background-b));
}
body,
.bluelib,
@@ -95,7 +96,6 @@ body .layout,
display: grid;
justify-content: stretch;
align-items: stretch;
- width: 100%;
}
body .layout-fill,
.bluelib .layout-fill {
@@ -188,6 +188,7 @@ body .panel,
padding: 8px;
border-radius: 4px;
width: 100%;
+ min-width: 312px;
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.03);
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.125);
}
diff --git a/src/targets/sophon.apache.css b/src/targets/sophon.apache.css
index b47d046..6e6645d 100644
--- a/src/targets/sophon.apache.css
+++ b/src/targets/sophon.apache.css
@@ -67,6 +67,7 @@ body,
body *,
.bluelib * {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
+ scrollbar-color: rgb(var(--bluelib-foreground-r), var(--bluelib-foreground-g), var(--bluelib-foreground-b)) rgb(var(--bluelib-background-r), var(--bluelib-background-g), var(--bluelib-background-b));
}
body,
.bluelib,
@@ -95,7 +96,6 @@ body .layout,
display: grid;
justify-content: stretch;
align-items: stretch;
- width: 100%;
}
body .layout-fill,
.bluelib .layout-fill {
@@ -188,6 +188,7 @@ body .panel,
padding: 8px;
border-radius: 4px;
width: 100%;
+ min-width: 312px;
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.03);
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.125);
}