Fix and improve fast templates (#6023)

holoviz · Dec 12, 2023 · b2e04e1 · b2e04e1
1 parent 2b481ed
commit b2e04e1
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 23 deletions.
diff --git a/panel/template/fast/fast.css b/panel/template/fast/fast.css
@@ -146,7 +146,7 @@ img.app-logo {
   transform-origin: center left;
   height: calc(100vh - 76px);
   overflow-y: auto;
-  padding: 15px 10px 5px 0;
+  padding: 15px 10px 5px 5px;
 }
 
 #sidebar.hidden {
@@ -214,6 +214,10 @@ img.app-logo {
   margin-block-end: 0;
 }
 
+div.pn-wrapper {
+  height: 100%;
+}
+
 .pn-modal-close {
   position: absolute;
   right: 10%;

diff --git a/panel/template/fast/grid/fast_grid_template.html b/panel/template/fast/grid/fast_grid_template.html
@@ -63,6 +63,9 @@
   #sidebar {
     min-width: var(--sidebar-width);
     max-width: var(--sidebar-width);
+    {% if not main_layout %}
+    background-color: var(--panel-surface-color);
+    {% endif %}
   }
 </style>
 

diff --git a/panel/template/fast/list/fast_list_template.html b/panel/template/fast/list/fast_list_template.html
@@ -53,6 +53,9 @@
   #sidebar {
     min-width: var(--sidebar-width);
     max-width: var(--sidebar-width);
+	{% if not main_layout %}
+	background-color: var(--panel-surface-color);
+	{% endif %}
   }
 </style>
 

diff --git a/panel/theme/css/fast.css b/panel/theme/css/fast.css
@@ -16,6 +16,16 @@
   --switch-size: 12px;
   --container-background: var(--panel-surface-color);
   color: var(--neutral-foreground-rest);
+
+  --panel-primary-color: var(--accent-foreground-rest);
+  --panel-on-primary-color: var(--foreground-on-accent-rest);
+}
+/* Anchor */
+a {
+  color: var(--accent-fill-rest);
+}
+a:hover {
+  color: var(--accent-fill-hover);
 }
 
 /* Track */
@@ -472,7 +482,32 @@ input[type='file']:active {
     (var(--base-height-multiplier) + var(--density)) * var(--design-unit) * 1px
   );
 }
+.bk-btn-default:focus,
+.bk-btn-default:active,
+.bk-btn-primary:focus,
+.bk-btn-primary:active,
+.bk-btn-success:focus,
+.bk-btn-success:active,
+.bk-btn-warning:focus,
+.bk-btn-warning:active,
+.bk-btn-danger:focus,
+.bk-btn-danger:active,
+.bk-btn-light:focus,
+.bk-btn-light:active {
+  outline: none;
+}
+.bk-btn:active {
+  transform: none;
+}
 
+:host(.solid) .bk-btn-group .bk-btn.bk-btn-default.bk-active,
+:host(.solid) .bk-btn-group .bk-btn.bk-btn-primary.bk-active,
+.bk-btn:active,
+::file-selector-button:active,
+.bk-active.bk-btn,
+.bk-active::file-selector-button {
+  box-shadow: none;
+}
 .bk-btn a {
   text-decoration: none;
   color: inherit;
@@ -491,51 +526,88 @@ input[type='file']:active {
 
 :host(.solid) .bk-btn.bk-btn-default:hover {
   background-color: var(--neutral-fill-hover);
+  color: var(--neutral-foreground-hover);
+}
+
+:host(.solid) .bk-btn.bk-btn-default:active,
+:host(.solid) .bk-btn.bk-btn-default.bk-active {
+  background-color: var(--neutral-fill-active);
+  color: var(--neutral-foreground-active);
 }
 
 :host(.outline) .bk-btn.bk-btn-default {
   background-color: transparent;
-  border: 1px solid var(--neutral-fill-strong-rest);
+  border: 1px solid var(--neutral-stroke-rest);
   color: var(--neutral-fill-strong-rest);
 }
 
 :host(.outline) .bk-btn.bk-btn-default:hover {
-  background-color: var(--neutral-fill-hover);
-  color: var(--neutral-foreground-rest);
+  border-color: var(--neutral-stroke-hover);
+  color: var(--neutral-fill-strong-hover);
+}
+
+:host(.outline) .bk-btn.bk-btn-default:active {
+  border-color: var(--neutral-stroke-active);
+  color: var(--neutral-fill-strong-active);
 }
 
 :host(.outline) .bk-btn.bk-btn-default.bk-active {
-  color: var(--foreground-on-accent-rest);
-  box-shadow: inset 0px 3px 5px rgb(0 0 0 / 25%);
+  color: var(--neutral-foreground-rest);
+  box-shadow: none;
 }
 
 :host(.outline) .bk-btn-group .bk-btn-default.bk-active {
   background-color: var(--neutral-fill-active);
-  color: var(--foreground-on-accent-active);
+  color: var(--neutral-foreground-rest);
 }
 
-:host(.solid) .bk-btn.bk-btn-primary {
+:host(.outline) .bk-btn-group .bk-btn-primary.bk-active,
+:host(.solid) .bk-btn.bk-btn-primary,
+:host(.solid) .bk-btn.bk-btn-primary[disabled],
+:host(.solid) .bk-btn.bk-btn-primary[disabled]:hover {
   background-color: var(--accent-fill-rest);
+  border-color: var(--accent-fill-rest);
+  color: var(--foreground-on-accent-rest);
 }
-
-:host(.solid) .bk-btn.bk-btn-primary.bk-active {
+:host(.solid) .bk-btn.bk-btn-primary:hover {
+  background-color: var(--accent-fill-hover);
+  border-color: var(--accent-fill-hover);
+  color: var(--foreground-on-accent-hover);
+}
+:host(.solid) .bk-btn.bk-btn-primary.bk-active,
+:host(.solid) .bk-btn.bk-btn-primary:active,
+:host(.solid) .bk-btn.bk-btn-primary.bk-active[disabled],
+:host(.solid) .bk-btn.bk-btn-primary.bk-active[disabled]:hover {
   background-color: var(--accent-fill-active);
-  box-shadow: inset 0px 3px 5px rgb(0 0 0 / 25%);
+  border-color: var(--accent-fill-active);
+  color: var(--foreground-on-accent-active);
 }
-
-:host(.outline) .bk-btn-primary {
-  background-color: transparent;
-  color: var(--neutral-foreground-rest);
+:host(.outline) .bk-btn-group .bk-btn-primary.bk-active:hover,
+:host(.solid) .bk-btn.bk-btn-primary.bk-active:hover {
+  background-color: var(--accent-fill-hover);
+  color: var(--foreground-on-accent-hover);
 }
-
-:host(.outline) .bk-btn-primary.bk-active,
-:host(.outline) .bk-btn-primary:hover {
-  color: var(--neutral-foreground-rest);
+:host(.solid) .bk-btn.bk-btn-primary[disabled],
+:host(.solid) .bk-btn.bk-btn-primary[disabled]:hover,
+:host(.solid) .bk-btn.bk-btn-primary[disabled]:focus,
+:host(.solid) .bk-btn.bk-btn-primary[disabled].bk-active {
+  pointer-events: none !important;
+  cursor: not-allowed;
+  opacity: var(--disabled-opacity);
 }
-
-:host(.outline) .bk-btn-group .bk-btn-primary.bk-active {
-  background-color: var(--accent-fill-rest);
-  color: var(--foreground-on-accent-active);
+:host(.outline) .bk-btn.bk-btn-primary.bk-active:hover,
+:host(.outline) .bk-btn.bk-btn-primary:hover {
+  border-color: var(--accent-fill-hover);
+  color: var(--neutral-foreground-hover);
+}
+:host(.outline) .bk-btn.bk-btn-primary.bk-active,
+:host(.outline) .bk-btn.bk-btn-primary:active {
+  border-color: var(--accent-fill-active);
+  color: var(--neutral-foreground-active);
+}
+:host(.outline) .bk-btn.bk-btn-primary {
+  border-color: var(--accent-fill-rest);
+  color: var(--neutral-foreground-rest);
 }
 
 :host(.outline) .bk-btn-success.bk-active,
@@ -589,6 +661,10 @@ input[type='file']:active {
 select:not([type='file']).bk-input {
   margin: 0;
 }
+select:not([multiple]).bk-input,
+select:not([size]).bk-input {
+  background-image: url('data:image/svg+xml;utf8,<svg version="1.1" viewBox="0 0 25 20" xmlns="http://www.w3.org/2000/svg"><path d="M 0,0 25,0 12.5,20 Z" fill="darkgrey"/></svg>');
+}
 
 /* Checkbox/Radio */