uiconfig-blueprint 0.1.0-dev.5 → 0.1.0-dev.7

package/src/renderer.scss

@@ -54,11 +54,23 @@
 @import "components/common";
 @import "bpComponents/index";
 
-.bp5-form-group.bp5-inline label.bp5-label{
+:root { font-family: Inter, sans-serif; }
+
+.bp5-vars, :root {
+  --pt-text-color: var(--gray-1) !important;
+  --pt-font-family-sans: Inter, ui-sans-serif, -apple-system,"BlinkMacSystemFont","Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Open Sans","Helvetica Neue","Icons16",sans-serif;
+}
+.bp5-dark {
+  --pt-text-color: var(--light-gray2) !important;
+  --pt-font-family-sans: Inter, ui-sans-serif, -apple-system,"BlinkMacSystemFont","Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Open Sans","Helvetica Neue","Icons16",sans-serif;
+}
+
+.bp5-form-group.bp5-inline label.bp5-label, .switch .bp5-label {
   text-overflow: ellipsis;
   overflow: hidden;
-  max-width: calc(min(50%, 7*$pt-font-size-small));
-  width: 50%;
+  max-width: calc(8 * $pt-font-size-small);
+  min-width: calc(8 * $pt-font-size-small);
+  width: calc(8 * $pt-font-size-small);
   font-size: $pt-font-size-small;
   height: $pt-input-height;
   line-height: normal;
@@ -68,11 +80,16 @@
   display: flex;
   align-items: center;
   justify-content: flex-start;
+
+  color: $dark-gray1;
+  .bp5-dark & {
+    color: $gray5;
+  }
 }
 
 .switch{
   display: flex;
-  justify-content: space-between;
+  justify-content: left;
   align-items: center;
   flex-direction: row-reverse;
   margin-bottom: 0;
@@ -94,7 +111,7 @@
 }
 
 :root{
-  --background-color-transition-time: 0.1s;
+  --background-color-transition-time: 0.2s;
   --background-color-transition: background-color var(--background-color-transition-time) ease-in-out;
 }
 .bp5-panel-stack-view {
@@ -114,6 +131,10 @@
   position: relative;
   overflow-y: scroll;
   padding: 0 0 0 0;
+
+  .bp5-panel-stack2-header{
+    box-shadow: none;
+  }
 }
 #blueprintUiContainer {
   height: 100%;
@@ -121,12 +142,12 @@
   padding: 0 0 0 0;
 
   position: fixed;
-  top: 0;
-  right: 10px;
+  top: 20px;
+  right: 20px;
   width: var(--blueprint-ui-container-width);
   pointer-events: auto;
-  max-height: calc(100% - 6rem);
-  border-radius: 0.5rem;
+  max-height: calc(100% - 40px);
+  border-radius: $pt-grid-size;
   font-family: Inter, ui-sans-serif, system-ui, -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 
@@ -144,6 +165,7 @@
 .folderContent {
   flex: 1 1 auto;
   max-width: 100%;
+  margin-left: calc($pt-grid-size * 0.5);
 }
 
 //button {
@@ -209,4 +231,15 @@
 
 .bp5-panel-stack2-view{
   background: transparent;
-}
+}
+
+.bp5-slider-handle{
+  border-radius: 100%;
+}
+
+.bp5-collapse .bp5-collapse-body {
+  transition: transform 0.3s var(--pt-transition-ease), opacity 0.3s;
+}
+.bp5-collapse {
+  transition: height 0.3s var(--pt-transition-ease);
+}