Design and template styling fixes

holoviz · Mar 29, 2023 · e51bac3 · e51bac3
1 parent 6985c2a
commit e51bac3
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 36 deletions.
diff --git a/panel/template/bootstrap/bootstrap.css b/panel/template/bootstrap/bootstrap.css
@@ -82,10 +82,10 @@ a.navbar-brand {
 }
 
 #header-items {
-    display: block;
+    align-items: center;
+    display: flex;
     flex-grow: 1;
     margin-left: 15px;
-    overflow: hidden;
     white-space: nowrap;
 }
 

diff --git a/panel/template/fast/fast.css b/panel/template/fast/fast.css
@@ -62,8 +62,9 @@ body {
 }
 
 #header-items {
+    align-items: center;
+    display: flex;
     color: var(--neutral-foreground-rest);
-    overflow: hidden;
     padding-left: 10px;
     width: 100%;
 }
@@ -144,16 +145,15 @@ img.app-logo {
     transition: all 0.2s cubic-bezier(0.945, 0.020, 0.270, 0.665);
     transform-origin: center left; /* Set the transformed position of sidebar to center left side. */
     height: calc(100vh - 76px);
-    overflow-y: scroll;
-    padding-left: 5px;
-    padding-right: 10px;
+    overflow-y: auto;
+    padding: 15px 10px 5px 0;
     margin-right: 12px;
 }
 
 #main {
     height: 100%;
-    overflow-y: scroll;
-    padding-right: 15px;
+    overflow-y: auto;
+    padding: 0 15px;
     transition: all 0.2s cubic-bezier(0.945, 0.020, 0.270, 0.665);
     flex-grow: 1;
 }
@@ -170,11 +170,6 @@ img.app-logo {
     margin: 0px;
 }
 
-.sidenav {
-    padding-top: 15px;
-    overflow-y: scroll;
-}
-
 .sidenav fast-menu {
     width: 100%;
 }
@@ -345,4 +340,5 @@ fast-card {
     --dialog-width: 80%;
     --dialog-height: auto;
     --background-color: var(--neutral-layer-floating);
+    z-index: 10;
 }
diff --git a/panel/template/fast/list/fast_list_template.html b/panel/template/fast/list/fast_list_template.html
@@ -75,6 +75,7 @@
   body_design.setLuminance({{ style.luminance }});
   body_design.setAccentColor("{{ style.accent_base_color }}")
   body_design.setNeutralColor("{{ style.neutral_color }}");
+  header_design.setLuminance({{ style.luminance }});
   header_design.setAccentColor("{{ style.header_accent_base_color }}");
   header_design.setNeutralColor("{{ style.header_neutral_color }}");
 });

diff --git a/panel/template/material/material.css b/panel/template/material/material.css
@@ -133,6 +133,8 @@ img.app-logo {
 }
 
 #header-items {
+    align-items: center;
+    display: flex;
     width: 100%;
     margin-left: 25px;
 }

diff --git a/panel/theme/css/bootstrap.css b/panel/theme/css/bootstrap.css
@@ -267,8 +267,8 @@ input.bk-input, textarea.bk-input {
     --bs-btn-border-color: var(--bs-border-color);
     --bs-btn-border-radius: 0.375rem;
     --bs-btn-hover-border-color: transparent;
-    --bs-btn-hover-color: var(--bs-body-bg);
-    --bs-btn-hover-bg: var(--bs-body-color);
+    --bs-btn-hover-color: var(--bs-body-color);
+    --bs-btn-hover-bg: var(--bs-body-bg);
     --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
     --bs-btn-disabled-opacity: 0.65;
     --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
@@ -325,11 +325,11 @@ input.bk-input, textarea.bk-input {
   --bs-btn-border-color: var(--bs-border-color);
   --bs-btn-hover-color: var(--panel-on-primary-color);
   --bs-btn-hover-bg: var(--panel-primary-color);
-  --bs-btn-hover-border-color: var(--panel-primary-color);
+  --bs-btn-hover-border-color: var(--panel-on-primary-color);
   --bs-btn-focus-shadow-rgb: var(--panel-primary-rgb);
   --bs-btn-active-color: var(--panel-on-primary-color);
   --bs-btn-active-bg: var(--panel-primary-color);
-  --bs-btn-active-border-color: var(--panel-primary-color);
+  --bs-btn-active-border-color: var(--panel-on-primary-color);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.3);
   --bs-btn-disabled-color: #fff;
   --bs-btn-disabled-bg: #0d6efd;

diff --git a/panel/theme/css/fast.css b/panel/theme/css/fast.css
@@ -417,7 +417,6 @@ input[type=file]:active {
 /* Buttons */
 
 .bk-btn {
-    border: unset;
     border-radius: calc(var(--control-corner-radius) * 1px);
     line-height: var(--type-ramp-base-line-height);
     min-width: calc((var(--base-height-multiplier) + var(--density)) * var(--design-unit) * 1px);
@@ -433,8 +432,6 @@ input[type=file]:active {
 }
 
 .bk-btn.bk-btn-default.bk-active {
-    background-color: var(--neutral-fill-active);
-    border: 1px solid var(--accent-fill-active);
     box-shadow: inset 0px 3px 5px rgb(0 0 0 / 25%);
     filter: brightness(0.9);
 }
@@ -462,6 +459,7 @@ input[type=file]:active {
 .bk-menu > :not(.bk-divider):hover,
 .bk-menu > :not(.bk-divider).bk-active {
     background-color: var(--accent-fill-hover);
+    color: var(--foreground-on-accent-hover);
 }
 
 /* Checkbox/Radio */

diff --git a/panel/theme/css/material.css b/panel/theme/css/material.css
@@ -311,27 +311,11 @@ select.bk-input:focus {
     border: unset;
 }
 
-.bk-btn-group > button.bk-btn-default:hover {
-    background: var(--mdc-theme-primary) radial-gradient(circle, transparent 1%, var(--mdc-theme-primary) 1%) center/15000%;
-}
-
-.bk-btn-group > button.bk-btn-default:active {
-  background-color: var(--mdc-theme-background);
-  background-size: 100%;
-  transition: background 0s;
-}
-
 .bk-menu {
     color: var(--mdc-theme-primary);
     border: 1px solid var(--mdc-theme-primary);
 }
 
-.bk-active.bk-btn-default {
-    background-color: var(--mdc-theme-primary);
-    border: 1px solid var(--mdc-theme-primary);
-    color: var(--mdc-theme-on-primary);
-}
-
 /* Checkbox */
 
 input[type="checkbox"] {