Stylesheet Dashboard

1

Moin,

ich hab mir mein Stylesheet Dashboard zerschossen.
Mag jemand den Inhalt hier Posten, ist im Flow Config zu finden :slight_smile:

Vielen Dank

2

Hier bitte :slight_smile:

<style>
/*
It is reasnoble to declare the colors as CSS variables
so they can be easily called by name where needed.

You can see that in many places the variables are not used. Change it!
*/

:root {
  --color-green-primary: rgb(51, 204, 51);
  --color-green-secondary: rgb(26, 101, 26);
  --color-red-primary: rgb(255, 0, 0);
  --color-red-secondary: rgba(153,0,0,1);
  --color-gray-primary: rgba(20,20,20,1);
  --color-gray-secondary: rgba(65,65,65,1);
  --color-text-headline: rgb(62, 206, 250);
  --color-text-headline-secondary: rgb(31, 103, 125);
  --color-text-primary: rgb(230, 226, 209);
  --color-widget-border: rgb(84, 78, 78);
  --color-sidebar-primary: rgba(26, 26, 26, 1)
}

/*
All CSS adjustments are commented out.
Turn rules on one by one and see the changes.
Don't use too many elements cos it wil be confusing
Start with simple elements like text, slider or button

Many of elements like buttons have states, 
those rules must be found and adjusted also.
*/


.masonry-container {
    position: relative;
    width: 100%;
    height:100%;
    margin: 0 auto;
    background: rgb(255,0,0);
    background: linear-gradient(180deg, var(--color-gray-primary)8%, var(--color-gray-secondary) 60%, var(--color-text-headline-secondary));
}

md-sidenav.md-sidenav-left._md {
    background: linear-gradient(180deg, var(--color-sidebar-primary)6%, var(--color-gray-secondary) 60%, var(--color-text-headline-secondary));
}



.nr-dashboard-cardcontainer {
    position: relative;
    /*box-shadow: inset 0px 1px 4px 0px #000000bb;
    border-radius: 15px;*/
}


 
.nr-dashboard-theme ui-card-panel {
    background-color: #33333300;
    color:var(--color-text-primary);
    /*border-radius: 15px;*/
    box-shadow: 0 0 8px 0px #00000080;
}


 
body.nr-dashboard-theme md-content md-card {
    background-color: #33333300;
    color: var(--color-text-primary);
    text-shadow: 4px 2px 4px #00000045;
    box-shadow: 0 -1px 5px 1px #00000045;
    border-radius: 10px;
    /*border: 1px solid var(--color-widget-border);*/
}



.nr-dashboard-theme ui-card-panel p.nr-dashboard-cardtitle {
    color: var(--color-text-headline);
    text-align: center;
}


.md-button {
    display: inline-block;
    position: relative;
    cursor: pointer;
    min-height: 36px;
    min-width: 88px;
    line-height: 36px;
    vertical-align: middle;
    align-items: center;
    text-align: center;
    border-radius: 12px;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline: none;
    border: 0;
    padding: 0 6px;
    margin: 6px 8px;
    background: transparent;
    color:var(--color-text-primary);
    white-space: nowrap;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 14px;
    font-style: inherit;
    font-variant: inherit;
    font-family: inherit;
    text-decoration: none;
    overflow: hidden;
    transition: box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1);
}


.nr-dashboard-theme .nr-dashboard-button .md-button {
    background-color: #88888800;
    color:var(--color-text-headline);
}



.nr-dashboard-theme .nr-dashboard-button .md-button:hover {
    background-color: #88888855;
}

.md-toolbar-tools {
    background-color: var(--color-gray-primary);
}


md-slider .md-thumb {
    z-index: 1;
    position: absolute;
    left: -10px;
    top: 14px;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    -webkit-transform: scale(.7);
    transform: scale(.7);
    transition: all .4s cubic-bezier(.25,.8,.25,1);
    box-shadow: 0 0 6px #00000070;
    color: var(--color-text-primary);
}


Advanced stuff - dynamic change of card CSS

Classes here can be used to make colored stripe at the top of card
Usage is not in here, but they are added to md-card when needed within another template

.carderr {
    background: rgb(255,0,0);
    background: linear-gradient(180deg, var(--color-red-primary) 0px, var(--color-red-secondary) 3px, rgba(80,80,80,1) 4px, rgba(45,45,45,1) 100%);
}
.cardok {
    background: rgb(39,255,0);
    background: linear-gradient(180deg, var(--color-green-primary) 0px, var(--color-green-secondary) 3px, rgba(70,70,70,1) 4px, rgba(40,40,40,1) 100%);
}


</style>