@blokkli/editor 2.0.0-alpha.52 → 2.0.0-alpha.53

package/dist/runtime/editor/plugins/Sidebar/index.vue

@@ -3,7 +3,7 @@
     <button
       :id="'bk-sidebar-button-' + id"
       ref="tourElement"
-      class="bk-toolbar-button"
+      class="bk-toolbar-button _bk_group/tooltip"
       :class="[
   { 'bk-is-active': activeSidebar === id && !isDisabled },
   'bk-is-' + region
@@ -16,17 +16,21 @@
         <Icon v-if="icon" :name="icon" />
       </slot>
       <slot name="badge" />
-      <div class="bk-tooltip">
-        <span>{{ tooltipTitle || title }}</span>
-        <ShortcutIndicator
-          v-if="keyCode"
-          :meta
-          :shift
-          :key-code
-          :label="title"
-          @pressed="toggleSidebar"
-        />
-      </div>
+      <Tooltip
+        :label="tooltipTitle || title"
+        :placement="tooltipPlacement"
+        :margin="region === 'left'"
+      >
+        <template v-if="keyCode" #shortcut>
+          <ShortcutIndicator
+            :meta
+            :shift
+            :key-code
+            :label="title"
+            @pressed="toggleSidebar"
+          />
+        </template>
+      </Tooltip>
     </button>
   </Teleport>
 
@@ -55,7 +59,7 @@
       </template>
       <template #default="{ width, height, isResizing }">
         <div class="bk-sidebar-content-wrapper">
-          <Loading v-if="isLoading" white />
+          <Loading v-if="isLoading" theme="white" />
           <div ref="sidebarContent" class="bk-sidebar-content">
             <slot
               :key="isRenderedDetached ? 'detached' : 'attached'"
@@ -74,22 +78,24 @@
     <ScrollBoundary
       v-else
       v-show="activeSidebar === id"
-      class="bk-sidebar-inner"
+      class="bk bk-sidebar-inner"
     >
-      <div class="bk">
-        <div class="bk-sidebar-title">
-          <span>{{ title }}</span>
-          <div v-if="beta" class="bk-beta-indicator">BETA</div>
-          <button v-if="!ui.isMobile.value" @click.prevent.stop="onDetach">
-            <Icon name="dock-window" />
-          </button>
-          <button @click.prevent.stop="toggleSidebar">
-            <Icon name="bk_mdi_close" />
-          </button>
-        </div>
+      <div class="bk-sidebar-title">
+        <span>{{ title }}</span>
+        <BetaIndicator
+          v-if="beta"
+          class="_bk_mr-auto _bk_ml-5"
+          :inverted="region === 'right-bottom'"
+        />
+        <button v-if="!ui.isMobile.value" @click.prevent.stop="onDetach">
+          <Icon name="dock-window" />
+        </button>
+        <button @click.prevent.stop="toggleSidebar">
+          <Icon name="bk_mdi_close" />
+        </button>
       </div>
       <div class="bk-sidebar-content-wrapper">
-        <Loading v-if="isLoading" white />
+        <Loading v-if="isLoading" theme="white" />
         <div ref="sidebarContent" class="bk-sidebar-content">
           <slot
             :key="isRenderedDetached ? 'detached' : 'attached'"
@@ -120,7 +126,9 @@ import {
   Icon,
   ShortcutIndicator,
   ScrollBoundary,
-  Loading
+  Loading,
+  BetaIndicator,
+  Tooltip
 } from "#blokkli/editor/components";
 import SidebarDetached from "./Detached/index.vue";
 import {
@@ -221,6 +229,14 @@ useAnimationFrame(() => {
     isOverflowing.value = sidebarContent.value.scrollHeight > sidebarContent.value.offsetHeight;
   }
 });
+const tooltipPlacement = computed(() => {
+  if (props.region === "left") {
+    return "below-left";
+  } else if (props.region === "right") {
+    return "center-before";
+  }
+  return "above-before";
+});
 const commandTitle = computed(() => {
   if (activeSidebar.value === props.id) {
     return $t("sidebar.hide", "Hide @title").replace("@title", props.title);
@@ -279,3 +295,572 @@ export default {
   name: "PluginSidebar"
 };
 </script>
+
+<style>
+.bk-html-root {
+  --bk-sidebar-width-right: 100vw;
+  --bk-toolbar-left-width: 50px;
+  --bk-add-item-icon-padding: 6px;
+  --bk-item-icon-radius-base-toolbar: 4px;
+  --bk-add-item-font-size: 16px;
+}
+
+  @media screen and (min-height: 900px) {
+.bk-html-root {
+    --bk-toolbar-left-width: 60px;
+    --bk-add-item-icon-padding: 8px;
+    --bk-item-icon-radius-base-toolbar: 6px;
+    --bk-add-item-font-size: 16px
+}
+  }
+
+  @media screen and (min-height: 1100px) {
+.bk-html-root {
+    --bk-toolbar-left-width: 70px;
+    --bk-add-item-icon-padding: 10px;
+    --bk-item-icon-radius-base-toolbar: 8px;
+    --bk-add-item-font-size: 18px
+}
+  }
+
+  @media (min-width: 768px) {
+.bk-html-root {
+    --bk-sidebar-width-right: 351px
+}
+  }
+
+  @media (min-width: 1536px) {
+.bk-html-root {
+    --bk-sidebar-width-right: 400px
+}
+  }
+
+  @media (min-width: 1920px) {
+.bk-html-root {
+    --bk-sidebar-width-right: 440px
+}
+  }
+
+.bk.bk-sidebar {
+  pointer-events: auto;
+  z-index: calc(var(--bk-z-index-base) + 140000) /* "sidebar" */;
+  width: var(--bk-sidebar-width-right);
+  --bk-tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
+}
+
+.bk.bk-sidebar .bk-sidebar-padding {
+  padding: 20px;
+}
+
+.bk.bk-sidebar.bk-is-right {
+  min-height: 0px;
+  flex: 1 1 0%;
+}
+
+.bk.bk-sidebar.bk-is-right-bottom {
+  min-height: 0px;
+  flex: 1 1 0%;
+}
+
+.bk.bk-sidebar.bk-is-right-bottom .bk-sidebar-title {
+  border-bottom-color: transparent !important;
+  --bk-tw-bg-opacity: 1;
+  background-color: rgb(var(--bk-theme-accent-700) / var(--bk-tw-bg-opacity, 1));
+  --bk-tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1));
+}
+
+.bk.bk-sidebar.bk-is-right-bottom .bk-sidebar-title button {
+  --bk-tw-text-opacity: 1;
+  color: rgb(var(--bk-theme-accent-50) / var(--bk-tw-text-opacity, 1));
+}
+
+.bk.bk-sidebar.bk-is-right-bottom .bk-sidebar-title button:hover {
+  --bk-tw-bg-opacity: 1;
+  background-color: rgb(var(--bk-theme-accent-800) / var(--bk-tw-bg-opacity, 1));
+  --bk-tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1));
+}
+
+@media (min-width: 768px) {
+
+  .bk.bk-sidebar.bk-is-left {
+    width: 400px;
+  }
+}
+
+.bk.bk-sidebar.bk-is-left {
+    grid-area: sidebar-left;
+  }
+
+.bk.bk-sidebar:empty {
+  display: none;
+}
+
+.bk.bk-sidebar.bk-is-hidden {
+  pointer-events: none;
+  --bk-tw-translate-y: 40px;
+  transform: translate(var(--bk-tw-translate-x), var(--bk-tw-translate-y)) rotate(var(--bk-tw-rotate)) skewX(var(--bk-tw-skew-x)) skewY(var(--bk-tw-skew-y)) scaleX(var(--bk-tw-scale-x)) scaleY(var(--bk-tw-scale-y));
+  opacity: 0;
+}
+
+.bk.bk-sidebar .bk-sidebar-title {
+  display: flex;
+  height: 40px;
+  align-items: center;
+  border-bottom-width: 1px !important;
+  --bk-tw-border-opacity: 1 !important;
+  border-bottom-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1)) !important;
+  padding-left: 15px !important;
+  font-family: PB Inter, sans-serif !important;
+  font-weight: 600 !important;
+  user-select: none;
+  font-size: 14px;
+  line-height: 20px;
+  --bk-tw-bg-opacity: 1;
+  background-color: rgb(var(--bk-theme-mono-200) / var(--bk-tw-bg-opacity, 1));
+}
+
+.bk.bk-sidebar .bk-sidebar-title button:first-of-type {
+  margin-left: auto;
+}
+
+.bk.bk-sidebar .bk-sidebar-title button {
+  display: flex;
+  height: 40px;
+  min-width: 40px;
+  align-items: center;
+  justify-content: center;
+  --bk-tw-text-opacity: 1;
+  color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-text-opacity, 1));
+}
+
+.bk.bk-sidebar .bk-sidebar-title button:hover {
+  --bk-tw-bg-opacity: 1;
+  background-color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-bg-opacity, 1));
+  --bk-tw-text-opacity: 1;
+  color: rgb(var(--bk-theme-mono-900) / var(--bk-tw-text-opacity, 1));
+}
+
+.bk.bk-sidebar .bk-sidebar-title button svg {
+  width: 15px;
+  height: 15px;
+  fill: currentColor;
+}
+
+.bk.bk-sidebar-inner {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+}
+
+.bk.bk-sidebar-right-wrapper {
+  pointer-events: none;
+  position: relative;
+  z-index: calc(var(--bk-z-index-base) + 140000) /* "sidebar" */;
+  display: flex;
+  flex-direction: column;
+  --bk-tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
+  grid-area: sidebar-right;
+  width: var(--bk-sidebar-width-right);
+}
+
+.bk.bk-sidebar-right-wrapper > * {
+  pointer-events: auto;
+}
+
+.bk.bk-sidebar-right-wrapper.bk-is-resizing-split > #bk-sidebar-content-right,
+    .bk.bk-sidebar-right-wrapper.bk-is-resizing-split > #bk-sidebar-content-right-bottom {
+  pointer-events: none;
+}
+
+.bk.bk-sidebar-right-wrapper.bk-is-split {
+  --bk-tw-bg-opacity: 1;
+  background-color: rgb(var(--bk-theme-mono-900) / var(--bk-tw-bg-opacity, 1));
+}
+
+.bk.bk-sidebar-right-wrapper #bk-sidebar-content-right,
+  .bk.bk-sidebar-right-wrapper #bk-sidebar-content-right-bottom {
+  position: relative;
+  z-index: 10;
+}
+
+.bk .bk-sidebar-content-wrapper {
+  position: relative;
+  flex: 1 1 0%;
+  overflow: hidden;
+}
+
+.bk .bk-sidebar-content {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+}
+
+.bk .bk-sidebar-content::-webkit-scrollbar {
+    display: none;
+  }
+
+.bk .bk-sidebar-padding {
+  padding: 15px;
+}
+
+@media (min-width: 1024px) {
+
+  .bk .bk-sidebar-padding {
+    padding: 20px;
+  }
+}
+
+.bk.bk-sidebar-detached {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  z-index: calc(var(--bk-z-index-base) + 320000) /* "sidebar-detached" */;
+  display: flex;
+  height: auto;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: 6px;
+  --bk-tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
+  will-change: transform;
+  border-width: 1px;
+  --bk-tw-border-opacity: 1;
+  border-color: rgb(var(--bk-theme-mono-200) / var(--bk-tw-border-opacity, 1));
+  pointer-events: auto;
+  contain: layout paint style;
+}
+
+.bk.bk-sidebar-detached.bk-is-focused {
+  --bk-tw-border-opacity: 1;
+  border-color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-border-opacity, 1));
+  --bk-tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --bk-tw-shadow-colored: 0 20px 25px -5px var(--bk-tw-shadow-color), 0 8px 10px -6px var(--bk-tw-shadow-color);
+  box-shadow: var(--bk-tw-ring-offset-shadow, 0 0 #0000), var(--bk-tw-ring-shadow, 0 0 #0000), var(--bk-tw-shadow);
+}
+
+.bk.bk-sidebar-detached.bk-is-focused .bk-sidebar-title {
+  --bk-tw-bg-opacity: 1;
+  background-color: rgb(var(--bk-theme-mono-800) / var(--bk-tw-bg-opacity, 1));
+  --bk-tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1));
+}
+
+.bk.bk-sidebar-detached.bk-is-focused .bk-sidebar-title button:hover {
+  --bk-tw-bg-opacity: 1;
+  background-color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-bg-opacity, 1));
+}
+
+.bk.bk-sidebar-detached:not(.bk-is-focused) .bk-sidebar-detached-inner button,
+      .bk.bk-sidebar-detached:not(.bk-is-focused) .bk-sidebar-detached-inner li,
+      .bk.bk-sidebar-detached:not(.bk-is-focused) .bk-sidebar-detached-inner a,
+      .bk.bk-sidebar-detached:not(.bk-is-focused) .bk-sidebar-detached-inner input,
+      .bk.bk-sidebar-detached:not(.bk-is-focused) .bk-sidebar-detached-inner textarea {
+  pointer-events: none;
+}
+
+.bk.bk-sidebar-detached .bk-sidebar-title {
+  cursor: move;
+  display: flex;
+  height: 40px;
+  user-select: none;
+  align-items: center;
+  --bk-tw-bg-opacity: 1;
+  background-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-bg-opacity, 1));
+  padding-left: 10px;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+  --bk-tw-text-opacity: 1;
+  color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-text-opacity, 1));
+}
+
+.bk.bk-sidebar-detached .bk-sidebar-title > .bk-sidebar-title-icon {
+  margin-right: 5px;
+  height: 20px;
+  width: 20px;
+}
+
+.bk.bk-sidebar-detached .bk-sidebar-title > .bk-sidebar-title-icon svg {
+  fill: currentColor;
+}
+
+.bk.bk-sidebar-detached .bk-sidebar-title > span {
+  margin-right: auto;
+}
+
+.bk.bk-sidebar-detached .bk-sidebar-title button {
+  display: flex;
+  height: 40px;
+  width: 40px;
+  align-items: center;
+  justify-content: center;
+}
+
+.bk.bk-sidebar-detached .bk-sidebar-title button:hover {
+  --bk-tw-bg-opacity: 1;
+  background-color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-bg-opacity, 1));
+}
+
+.bk.bk-sidebar-detached .bk-sidebar-title button svg {
+  height: 20px;
+  width: 20px;
+  fill: currentColor;
+}
+
+.bk .bk-sidebar-detached-inner {
+  position: relative;
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+}
+
+.bk .bk-sidebar-detached-handle {
+  position: absolute;
+  z-index: 50;
+}
+
+.bk .bk-sidebar-detached-handle.bk-is-bottom {
+  bottom: 0px;
+  height: 10px;
+  width: 100%;
+  cursor: ns-resize;
+}
+
+.bk .bk-sidebar-detached-handle.bk-is-right {
+  right: 0px;
+  height: 100%;
+  width: 10px;
+  cursor: ew-resize;
+}
+
+.bk .bk-sidebar-detached-handle.bk-is-bottom-right {
+  right: 0px;
+  bottom: 0px;
+  height: 10px;
+  width: 10px;
+  cursor: se-resize;
+}
+
+.bk.bk-sidebar-tabs {
+  position: relative;
+  left: 0px;
+  z-index: calc(var(--bk-z-index-base) + 150000) /* "sidebar-tabs" */;
+  display: flex;
+  height: 40px;
+  width: 100%;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+  overflow: auto;
+  --bk-tw-bg-opacity: 1;
+  background-color: rgb(var(--bk-theme-mono-900) / var(--bk-tw-bg-opacity, 1));
+}
+
+@media (min-width: 1024px) {
+
+  .bk.bk-sidebar-tabs {
+    height: auto;
+    overflow: visible;
+  }
+}
+
+.bk.bk-sidebar-tabs {
+  pointer-events: auto;
+  contain: style size;
+  grid-area: right;
+}
+
+.bk.bk-sidebar-tabs > div {
+  display: flex;
+}
+
+@media (min-width: 1024px) {
+
+.bk.bk-sidebar-tabs {
+    flex-direction: column;
+    justify-content: flex-start;
+  }
+
+    .bk.bk-sidebar-tabs #bk-sidebar-tabs-right-bottom {
+    margin-top: auto;
+  }
+
+    .bk.bk-sidebar-tabs > div {
+    position: relative;
+    min-height: 50px;
+  }
+        .bk.bk-sidebar-tabs > div:first-child:before {
+          content: '';
+          position: absolute;
+          bottom: 0px;
+          left: 0px;
+          height: 1px;
+          width: 100%;
+          --bk-tw-bg-opacity: 1;
+          background-color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-bg-opacity, 1));
+        }
+  }
+
+.bk.bk-sidebar-tabs button {
+  position: relative;
+  height: 40px;
+  width: 50px;
+}
+
+@media (min-width: 768px) {
+
+  .bk.bk-sidebar-tabs button {
+    height: 50px;
+  }
+}
+
+.bk .bk-sidebar-container-tabs.bk-is-right {
+  display: flex;
+  flex-direction: row;
+}
+
+@media (min-width: 1024px) {
+
+  .bk .bk-sidebar-container-tabs.bk-is-right {
+    flex-direction: column;
+  }
+}
+
+.bk .bk-sidebar-container-tabs .bk-toolbar-button:before {
+  height: 0px;
+  width: 0px;
+  border-style: solid;
+  --bk-tw-content: '';
+  content: var(--bk-tw-content);
+  position: absolute;
+  bottom: 0px;
+  left: 17.5px;
+  transform-origin: bottom;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  --bk-tw-scale-y: 0;
+  transform: translate(var(--bk-tw-translate-x), var(--bk-tw-translate-y)) rotate(var(--bk-tw-rotate)) skewX(var(--bk-tw-skew-x)) skewY(var(--bk-tw-skew-y)) scaleX(var(--bk-tw-scale-x)) scaleY(var(--bk-tw-scale-y));
+      border-width: 0 8px 6px;
+      border-color: transparent transparent #ffffff transparent;
+}
+
+@media (min-width: 1024px) {
+        .bk .bk-sidebar-container-tabs .bk-toolbar-button.bk-is-right:before, .bk .bk-sidebar-container-tabs .bk-toolbar-button.bk-is-right-bottom:before {
+          border-width: 10px 0 10px 10px;
+          border-color: transparent transparent transparent #ffffff;
+          position: absolute;
+          top: 15px;
+          left: 0px;
+          transform-origin: left;
+          transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+          transition-duration: 150ms;
+          --bk-tw-scale-x: 0;
+          transform: translate(var(--bk-tw-translate-x), var(--bk-tw-translate-y)) rotate(var(--bk-tw-rotate)) skewX(var(--bk-tw-skew-x)) skewY(var(--bk-tw-skew-y)) scaleX(var(--bk-tw-scale-x)) scaleY(var(--bk-tw-scale-y));
+        }
+        .bk .bk-sidebar-container-tabs .bk-toolbar-button.bk-is-left:before {
+          border-width: 0 10px 10px;
+          left: 15px;
+        }
+    }
+
+.bk .bk-sidebar-container-tabs .bk-toolbar-button.bk-is-active {
+  --bk-tw-bg-opacity: 1;
+  background-color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-bg-opacity, 1));
+}
+
+.bk .bk-sidebar-container-tabs .bk-toolbar-button.bk-is-active:before {
+  --bk-tw-scale-x: 1;
+  --bk-tw-scale-y: 1;
+  transform: translate(var(--bk-tw-translate-x), var(--bk-tw-translate-y)) rotate(var(--bk-tw-rotate)) skewX(var(--bk-tw-skew-x)) skewY(var(--bk-tw-skew-y)) scaleX(var(--bk-tw-scale-x)) scaleY(var(--bk-tw-scale-y));
+}
+
+.bk .bk-sidebar-badge {
+  position: absolute;
+  top: 3px;
+  right: 3px;
+  display: flex;
+  width: 18px;
+  height: 18px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  font-weight: 700;
+  font-size: 10px;
+}
+
+.bk .bk-sidebar-badge.bk-is-yellow {
+  --bk-tw-bg-opacity: 1;
+  background-color: rgb(var(--bk-theme-yellow-normal) / var(--bk-tw-bg-opacity, 1));
+  --bk-tw-text-opacity: 1;
+  color: rgb(var(--bk-theme-yellow-dark) / var(--bk-tw-text-opacity, 1));
+}
+
+.bk .bk-sidebar-badge.bk-is-red {
+  --bk-tw-bg-opacity: 1;
+  background-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-bg-opacity, 1));
+  --bk-tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1));
+}
+
+.bk.bk-sidebar-resize {
+  flex: 0 0 8px;
+  position: relative;
+  z-index: 50;
+  cursor: ns-resize;
+}
+
+.bk.bk-sidebar-resize:hover > div {
+  opacity: 1;
+}
+
+.bk.bk-sidebar-resize:before {
+    content: '';
+    position: absolute;
+    left: 0px;
+    width: 100%;
+    top: 50%;
+    height: 18px;
+    --bk-tw-translate-y: -50%;
+    transform: translate(var(--bk-tw-translate-x), var(--bk-tw-translate-y)) rotate(var(--bk-tw-rotate)) skewX(var(--bk-tw-skew-x)) skewY(var(--bk-tw-skew-y)) scaleX(var(--bk-tw-scale-x)) scaleY(var(--bk-tw-scale-y));
+  }
+
+.bk.bk-sidebar-resize > div {
+  opacity: 0;
+  position: absolute;
+  left: 50%;
+  width: 100px;
+  --bk-tw-translate-x: -50%;
+  --bk-tw-bg-opacity: 1;
+  background-color: rgb(var(--bk-theme-accent-950) / var(--bk-tw-bg-opacity, 1));
+  --bk-tw-backdrop-blur: blur(24px);
+  -webkit-backdrop-filter: var(--bk-tw-backdrop-blur) var(--bk-tw-backdrop-brightness) var(--bk-tw-backdrop-contrast) var(--bk-tw-backdrop-grayscale) var(--bk-tw-backdrop-hue-rotate) var(--bk-tw-backdrop-invert) var(--bk-tw-backdrop-opacity) var(--bk-tw-backdrop-saturate) var(--bk-tw-backdrop-sepia);
+  backdrop-filter: var(--bk-tw-backdrop-blur) var(--bk-tw-backdrop-brightness) var(--bk-tw-backdrop-contrast) var(--bk-tw-backdrop-grayscale) var(--bk-tw-backdrop-hue-rotate) var(--bk-tw-backdrop-invert) var(--bk-tw-backdrop-opacity) var(--bk-tw-backdrop-saturate) var(--bk-tw-backdrop-sepia);
+  top: 50%;
+  --bk-tw-translate-y: -50%;
+  transform: translate(var(--bk-tw-translate-x), var(--bk-tw-translate-y)) rotate(var(--bk-tw-rotate)) skewX(var(--bk-tw-skew-x)) skewY(var(--bk-tw-skew-y)) scaleX(var(--bk-tw-scale-x)) scaleY(var(--bk-tw-scale-y));
+  display: grid;
+  gap: 2px;
+  border-radius: 9999px;
+  padding-left: 8px;
+  padding-right: 8px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
+.bk.bk-sidebar-resize > div hr {
+  height: 1px;
+  border-top-width: 1px;
+  --bk-tw-border-opacity: 1;
+  border-top-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
+  --bk-tw-bg-opacity: 1;
+  background-color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-bg-opacity, 1));
+}
+</style>