dashboard-shell-shell 3.0.2-test.20250913 → 3.0.5-logTest.2

package/assets/styles/global/_button.scss

@@ -120,7 +120,7 @@ button,
     line-height: $btn-sm-height - 2px;
 
     &:focus, &.focused {
-      border: 0;
+      // border: 0;
     }
   }
 }
@@ -169,13 +169,13 @@ button,
 }
 
 .role-multi-action {
-  //  background: var(--accent-btn);
-  //  border: solid thin var(--primary);
-   color: var(--primary) !important;
-   border-radius: 2px;
-   min-width: 32px;
-   height: 32px;
-   width: 32px;
+  background-color: rgba(0,0,0,0);
+  border: solid thin var(--primary);
+  color: var(--primary) !important;
+  border-radius: 2px;
+  min-width: 32px;
+  height: 32px;
+  width: 32px;
 }
 
 .icon-group i {

package/assets/styles/global/_form.scss

@@ -37,6 +37,7 @@ TEXTAREA,
     color: var(--input-label);
   }
   &:hover:not(.focused):not(:focus):not(.disabled):not(:disabled):not(.view) {
+    box-shadow: 0 4px 6px 0 var(--input-border-box-shadow);
     &, .vs__dropdown-menu {
       border-color: var(--input-hover-border);
     }

package/assets/styles/global/_labeled-input.scss

@@ -88,7 +88,7 @@
     }
   }
 
-  &.view>DIV:not(.addon) {
+  &.view>DIV:not(.addon, .sub-label) {
     font-size: 14px;
     padding: $input-padding-lg 0 0 0;
 

package/assets/styles/global/_layout.scss

@@ -6,7 +6,7 @@
   .outlet {
     display: flex;
     flex-direction: column;
-    padding: $space-m;
+    padding: 20px;
     min-height: 100%;
   }
 }

package/assets/styles/global/_select.scss

@@ -56,7 +56,7 @@
 
       .vs__dropdown-toggle{
         border: solid var(--border-width) var(--input-border);
-        height: 32px;
+        // height: 30px;
       }
       // .vs__dropdown-toggle,
       .vs__dropdown-toggle > * {

package/assets/styles/global/_tooltip.scss

@@ -11,7 +11,7 @@
     background: var(--tooltip-bg);
     box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
     color: var(--tooltip-text);
-    border-radius: 4px;
+    border-radius: 2px;
     padding: 8px;
   }
 
@@ -123,14 +123,14 @@
 .v-popper__popper {
   $color: var(--popover-bg);
   border: 1px solid var(--border);
-  border-radius: var(--border-radius-lg);
+  border-radius: 2px;
 
   .v-popper__inner {
-    border-radius: 4px;
+    border-radius: 2px;
     background: $color;
     color: var(--popover-text);
     padding: 10px;
-    border-radius: var(--border-radius-lg);
+    border-radius: 0px;
     border: none;
 
     a {
@@ -147,7 +147,7 @@
 }
 
 .v-popper__popper.v-popper--theme-dropdown {
-  border-radius: 4px;
+  border-radius: 0px;
   z-index: z-index('tooltip');
   border: 1px solid #d9d9d9 !important;
 
@@ -157,6 +157,10 @@
     }
   }
 }
+.v-popper__popper .v-popper__arrow-container {
+  display: none;
+}
+
 
 .v-popper {
   display: inline;

package/assets/styles/themes/_dark.scss

@@ -53,6 +53,7 @@
   --slider-light-bg-right      : #{rgba($darker, 0)};
 
   --muted                      : #{$disabled};
+  --deemphasized               : #{$disabled};
 
   --body-bg                    : #{$darker};
   --body-text                  : #{$lightest};
@@ -96,6 +97,7 @@
 
   --modal-bg                   : #{$dark};
   --modal-border               : #{$medium};
+  --subtle-overlay-bg          : #{rgba($darkest, 0.75)};
   --overlay-bg                 : #{rgba($darkest, 0.75)};
   --overlay-model-bg           : rgba($darkest, 0.45);
   --shadow                     : #{rgba($darkest, 0.9)};
@@ -122,6 +124,8 @@
   --dropdown-group-text        : #{$lighter};
   --dropdown-highlight-text    : var(--link);
 
+  --notification-unread-bg     : var(--primary-banner-bg);
+
   --input-text                 : #{$lightest};
   --input-label                : #{$lighter};
   --input-placeholder          : #{$disabled};
@@ -137,6 +141,8 @@
   --input-disabled-placeholder : #{darken($disabled, 10%)};
   --input-addon-bg             : #{$darker};
 
+  --label-secondary           : #{$lighter};
+
   --progress-bg                : #{$medium};
   --progress-divider           : #{$lightest};
 
@@ -166,6 +172,7 @@
   --tabbed-container-bg        : #{mix($medium, $dark, 20%)};
 
   --yaml-editor-bg             : #{$darkest};
+  --drawer-body-bg             : #{$darkest};
 
   --diff-border                : var(--border);
   --diff-header-bg             : var(--nav-bg);
@@ -229,7 +236,30 @@
   --badge-state-disabled-bg    : #{$medium};
   --badge-state-disabled-border: #{$lighter};
 
+  --click-badge-error          : #{$lightest};
+  --click-badge-error-bg       : #F43434;
+  --click-badge-error-border   : #FF8080;
+
+  --click-badge-warning        : #662E00;
+  --click-badge-warning-bg     : #FFCA4D;
+  --click-badge-warning-border : #F2870D;
+
+  --click-badge-success        : #00FF32;
+  --click-badge-success-bg     : #354240;
+  --click-badge-success-border : #4DFF70;
+  
+  --click-badge-info           : #{$lightest};
+  --click-badge-info-bg        : #{$info};
+  --click-badge-info-border    : #ACD2EC;
+  --bubble-bg                  : #{$darkest};
+
   $slate: #4B4F6B;
 
   --slate: #{$slate};
+
+  --link-text-secondary: #{$secondary};
+
+  .secondary-text-link {
+    color: var(--link-text-secondary);
+  }
 }

package/assets/styles/themes/_light.scss

@@ -8,6 +8,8 @@ $darker    : #333;
 //light disabled
 $dark      : #ffffff;
 
+$scroll_dark: #8b8b8b;
+
 //light border and buttons
 $medium    : #d7d7d7;
 
@@ -82,6 +84,7 @@ BODY, .theme-light {
 
   --link                    : #{$link};
   --link-text               : #{contrast-color($link)};
+  --link-text-secondary     : #{$darker};
   --link-hover-bg           : #{darken($link, 10%)};
   --link-hover-text         : #{saturate($lightest, 20%)};
   --link-active-bg          : #{darken($link, 25%)};
@@ -94,6 +97,16 @@ BODY, .theme-light {
   
   .text-link {
     color: var(--link) !important;
+
+  }
+
+  .secondary-text-link {
+    color: var(--link-text-secondary);
+    text-decoration: underline;
+
+    &:hover {
+      text-decoration: none;
+    }
   }
 
   .bg-link {
@@ -147,13 +160,17 @@ BODY, .theme-light {
       }
   }
 
-  // --muted                      : #{$dark};
   --muted                      : #A8ABB2;
+  --deemphasized               : #717179;
 
   .text-muted {
     color: var(--muted) !important;
   }
 
+  .text-deemphasized {
+    color: var(--deemphasized);
+  }
+
   --darker                    : #{$darker};
   --darker-text               : #{contrast-color($darker)};
   --darker-hover-bg           : #{darken($darker, 10%)};
@@ -251,9 +268,9 @@ BODY, .theme-light {
 
 
   --warning                    : #{$warning};
-  --warning-text               : #{contrast-color($warning)};
+  --warning-text               : #fff;
   --warning-hover-bg           : #{darken($warning, 10%)};
-  --warning-hover-text         : #{saturate($lightest, 20%)};
+  --warning-hover-text         : #fff;
   --warning-active-bg          : #{darken($warning, 25%)};
   --warning-active-text        : #{contrast-color(darken($warning, 25%))};
   --warning-border             : #{$warning};
@@ -314,11 +331,42 @@ BODY, .theme-light {
       background: var(--error-active-bg);
       }
   }
+
+  --disabled : #{$disabled};
+  --disabled-text : #{contrast-color($disabled)};
+  --disabled-hover-bg : #{darken($disabled, 10%)};
+  --disabled-hover-text : #{saturate($lightest, 20%)};
+  --disabled-active-bg : #{darken($disabled, 25%)};
+  --disabled-active-text : #{contrast-color(darken($disabled, 25%))};
+  --disabled-border : #{$disabled};
+  --disabled-banner-bg : #{rgba($disabled, 0.15)};
+  --disabled-light-bg : #{rgba($disabled, 0.05)};
+
+
+  .text-disabled {
+    color: var(--disabled) !important;
+  }
+
+  .bg-disabled {
+    background-color: var(--disabled);
+    color: var(--disabled-text);
+
+    &.btn:hover {
+      color: var(--disabled-hover-text);
+      background-color: #ccc !important;
+      transition: all 0.3s ease;
+    }
+
+    &.btn:active {
+      color: var(--disabled-active-text);
+      background: var(--disabled-active-bg);
+    }
+  }
   
 
   --body-bg                    : #{$lightest};
   --body-text                  : #{$darkest};
-  --scrollbar-thumb            : #{$dark};
+  --scrollbar-thumb            : #{$scroll_dark};
   --scrollbar-thumb-dropdown   : #{$lighter};
   --scrollbar-track            : transparent;
 
@@ -360,6 +408,8 @@ BODY, .theme-light {
   --border                     : #{$medium};
   --border-width               : 1px;
   --border-radius              : 2px;
+  --border-radius-md           : 6px;
+  --border-radius-lg           : 8px;
   // --outline                    : var(--primary);
   --outline                    : #d9d9d9;
   --outline-width              : 1px;
@@ -370,7 +420,8 @@ BODY, .theme-light {
 
   --modal-bg                   : #{$lightest};
   --modal-border               : #{$dark};
-  --overlay-bg                 : #{rgba($lighter, 0.75)};
+  --subtle-overlay-bg          : #{rgba($lighter, 0.75)};
+  --overlay-bg                 : rgba(38, 42, 64, 0.35);
   --overlay-model-bg           : rgba(0, 0, 0, 0.45);
   --overlay-model-bg           : rgba(0, 0, 0, 0.45);
   --shadow                     : #{rgba($medium, 0.85)};
@@ -400,6 +451,8 @@ BODY, .theme-light {
   --dropdown-disabled-bg       : #{$disabled};
   --dropdown-highlight-text    : var(--link);
 
+  --notification-unread-bg     : var(--primary-banner-bg);
+
   --card-badge-text            : #ffffff;
 
   // UNUSED?
@@ -422,6 +475,7 @@ BODY, .theme-light {
   --input-addon-bg             : #{$darker};
   --input-hover-border         : #d7d7d7;
 
+  --label-secondary           : #{$darker};
 
   --progress-bg                : #{$medium};
   --progress-divider           : #{$medium};
@@ -460,6 +514,7 @@ BODY, .theme-light {
   --tabbed-container-bg        : #{mix($light, $lighter, 15%)};
 
   --yaml-editor-bg             : #{$lighter};
+  --drawer-body-bg             : #{$lighter};
 
   --diff-border                : var(--border);
   --diff-header-bg             : var(--nav-bg);
@@ -569,4 +624,29 @@ BODY, .theme-light {
 
   --product-icon               : #{$darker};
   --product-icon-active        : #{$darkest};
+
+  --badge-state-disabled-text  : #{$darker};
+  --badge-state-disabled-bg    : #{$lighter};
+  --badge-state-disabled-border: #{$medium};
+
+  --gap                        : 8px;
+  --gap-md                     : 16px;
+  --gap-lg                     : 24px;
+
+  --click-badge-error          : #{$lightest};
+  --click-badge-error-bg       : #B13333;
+  --click-badge-error-border   : #7C0015;
+
+  --click-badge-warning        : #473900;
+  --click-badge-warning-bg     : #FFE47A;
+  --click-badge-warning-border : #E5A200;
+
+  --click-badge-success        : #007032;
+  --click-badge-success-bg     : #CEE4D7;
+  --click-badge-success-border : #1F7043;
+
+  --click-badge-info           : #{$lightest};
+  --click-badge-info-bg        : #{$info};
+  --click-badge-info-border    : #2673A6;
+  --bubble-bg                : #{$lighter};
 }

package/assets/styles/vendor/vue-select.scss

@@ -159,9 +159,10 @@
     content: $icon-chevron-down;
     font-family: 'icons';
     height: 32px;
-    padding-top: 8px;
     color: var(--secondary);
     margin-right: 9px;
+    display: flex;
+    align-items: center;
   }
 }