Side tab menu at the bottom and/or on the top

Dashboard
6

Well, it is not full theme for dashboard, it contains overrides for elements I have in use so kind of incomplete stuff for sharing. I use only button, dropdown and ui_template from dashboard standard components.
And the look of cards and widget containers is just colors, borders, rounded corners and shadows (inner/outer) for them. Just couple of CSS rules.
It maybe another good starting point but the real art should still be created by the artist.

<style id="custom-styles">
: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(40,40,40,1);
  --color-gray-secondary:rgba(65,65,65,1);
  --color-text-primary: rgb(230, 226, 209);
  --color-widget-border: rgb(105, 100, 100);
}
.masonry-container {
    position: relative;
    width: 100%;
    height:100%;
    margin: 0 auto;
    background-image: linear-gradient(0deg, var(--nr-dashboard-widgetBgndColor), var(--color-gray-secondary));
}
.nr-dashboard-theme .nr-dashboard-template {
     background-color: #33333300; 
}

.nr-dashboard-cardcontainer {
    position: relative;
    box-shadow: inset 0px 4px 4px 0px #100f0f6e;
    border-radius: 15px;
}
.nr-dashboard-theme ui-card-panel {
    font-family: Calibri;
    background-color: #33333300;
    color:var(--color-text-primary);
    border-radius: 15px;
    box-shadow: 0 0 8px 0px #00000080;
    border: 1px solid #555555;
    border-top: 2px solid #484848;
}
body.nr-dashboard-theme md-content md-card {
    background-color: #33333300;
    color: var(--color-text-primary);
    text-shadow: 4px 2px 4px #00000044;
    box-shadow: inset 0px 10px 20px 0px #0000006b;
    border-radius: 12px;
    border: 1px solid #565655e6;
    border-top: 2px solid #4b4b4a;
}
</style>
1 Like