Default progressbar theme

Support
#1

Hi
I have following theme in my application


html {
  --lumo-primary-text-color: rgb(48, 153, 102);
  --lumo-primary-color-50pct: rgba(48, 153, 102, 0.5);
  --lumo-primary-color-10pct: rgba(48, 153, 102, 0.1);
  --lumo-primary-color: #309966;
  --lumo-success-text-color: rgb(48, 153, 102);
  --lumo-success-color-50pct: rgba(48, 153, 102, 0.5);
  --lumo-success-color-10pct: rgba(48, 153, 102, 0.1);
  --lumo-success-color: #309966;
}

The problem is, when I run it, the progress bar is hidden by the header panel due to fact that they are same color and the top panel might be hiding the progress bar. How can I display it in contrast?

Here is the code i tried with but didn’t work:

/* Top Bar Background */
.jmix-main-view-header {
    background-color: var(--lumo-primary-color) !important;
    color: var(--lumo-primary-contrast-color) !important; /* Reverse text color */
    height: 60px; /* Adjust as needed */
    display: flex;
    justify-content: space-between; /* Space between title and right panel */
    align-items: center;
    padding: 0 16px; /* Add padding on both sides */
}

/* Top Bar Title Label */
.jmix-main-view-title {
    color: var(--lumo-primary-contrast-color) !important; /* Reverse color for visibility */
    font-size: 18px; /* Adjust font size as needed */
    font-weight: bold;
}

/* Right Panel Buttons and Icons */
.jmix-main-navigation-bar {
    display: flex;
    align-items: center;
    gap: 12px; /* Add spacing between elements */
}

/* Notification Button */
.jmix-main-navigation-bar .button-notification {
    background-color: var(--lumo-primary-color-10pct); /* Light background */
    border: none;
    border-radius: 8px; /* Optional rounded corners */
    padding: 8px;
    color: var(--lumo-primary-contrast-color) !important; /* Reverse text color */
    transition: background-color 0.3s ease;
}

.jmix-main-navigation-bar .button-notification:hover {
    background-color: var(--lumo-primary-color-50pct); /* Slightly darker on hover */
}

/* Profile Image */
.jmix-main-navigation-bar .profile_image {
    border-radius: 50%; /* Circular image */
    border: 2px solid var(--lumo-primary-contrast-color); /* Add border for better visibility */
    width: 40px; /* Ensure consistent size */
    height: 40px;
}

/* Logout Button */
.jmix-main-navigation-bar .jmix-logout-button {
    background-color: var(--lumo-primary-color-10pct);
    border: none;
    border-radius: 8px;
    padding: 8px;
    color: var(--lumo-primary-contrast-color) !important;
    transition: background-color 0.3s ease;
}

.jmix-main-navigation-bar .jmix-logout-button:hover {
    background-color: var(--lumo-primary-color-50pct);
}


/* Progress Bar Styling */
.vaadin-progress-bar {
    --lumo-progress-value-color: var(--lumo-primary-contrast-color); /* Reverse color for progress value */
    --lumo-progress-bar-color: var(--lumo-primary-color); /* Match the primary background color */
    height: 8px; /* Optional: Adjust thickness of the bar */
    border-radius: 4px; /* Optional: Rounded corners */
}

/* Progress Bar Container (Optional) */
.vaadin-progress-bar::part(bar) {
    background-color: var(--lumo-primary-color-10pct); /* Lightened background for the bar container */
}

Any suggestions?

#2

Hi,

Application loading indicator isn’t a progress bar, it’s just a div with .v-loading-indicator css class name. The following changes its color:

.v-loading-indicator {
    --lumo-primary-color: var(--lumo-primary-contrast-color);
}

Regards,
Gleb