Dashboard CSS tips - Dropdown

A bit space conservation, more colors and tiny movements in details.

[{"id":"cd8c7b3.443fc88","type":"ui_dropdown","z":"fdcebe88.8ee74","name":"","label":"","tooltip":"","place":"Select option","group":"a605595c.ac6378","order":0,"width":0,"height":0,"passthru":true,"multiple":false,"options":[{"label":"ONE","value":"1","type":"str"},{"label":"TWO","value":"2","type":"str"},{"label":"THREE","value":"3","type":"str"},{"label":"FOUR","value":"4","type":"str"},{"label":"FIVE","value":"5","type":"str"},{"label":"SIX","value":"6","type":"str"},{"label":"SEVEN","value":"7","type":"str"},{"label":"EIGHT","value":"8","type":"str"},{"label":"NINE","value":"9","type":"str"},{"label":"TEN","value":"10","type":"str"}],"payload":"","topic":"","x":640,"y":280,"wires":[[]]},{"id":"ab98427.85cd3c","type":"ui_template","z":"fdcebe88.8ee74","group":"110f893b.a0f1d7","name":"dashboard styles override","order":1,"width":0,"height":0,"format":"<style id=\"dashboard-styles-override\">\n   .nr-dashboard-theme md-select-menu md-option {\n        background-color: var(--nr-dashboard-groupBorderColor);\n        color: #eeeeee;\n        height: 29px;\n       /* border-radius: 14px;*/\n        margin-left: 10px;\n        margin-right: 10px;\n        margin-top: 2px;\n        box-shadow: 0 0 6px 6px #24202133;\n        transition: 0.3s;\n    }\n    .nr-dashboard-theme md-select-menu md-option[selected] {\n        color: var(--nr-dashboard-widgetTextColor) !important;\n        background-color: var(--nr-dashboard-widgetColor) !important;\n    }\n    .nr-dashboard-theme md-select-menu md-option:nth-child(even) {\n        background-color: var(--nr-dashboard-groupBorderColor);\n        opacity:0.8;\n    }\n    .nr-dashboard-theme md-select-menu md-option:last-child {\n       margin-bottom: 8px;\n    }\n    .nr-dashboard-theme md-select-menu md-option:hover {\n        background-color: var(--nr-dashboard-widgetBackgroundColor) !important;\n        padding-left: 24px;\n    }\n    .nr-dashboard-theme md-select-menu md-option > .md-ripple-container{\n        /* border-radius: 14px;*/\n    }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":690,"y":340,"wires":[[]]},{"id":"a605595c.ac6378","type":"ui_group","z":"","name":"Default","tab":"78387f0f.22098","order":1,"disp":true,"width":"4","collapse":false},{"id":"110f893b.a0f1d7","type":"ui_group","z":"","name":"Default","tab":"726cbb20.1af4f4","order":13,"disp":true,"width":"6","collapse":false},{"id":"78387f0f.22098","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false},{"id":"726cbb20.1af4f4","type":"ui_tab","z":"","name":"SEC","icon":"dashboard","disabled":false,"hidden":false}]

Enjoy
:man_artist:

6 Likes

Really Cool!