.dashboard-container { background-color: #efefef; } .dashboard-container .dashboard-grid{ display: grid; list-style-type: none; margin: 0; padding: 0; grid-column-gap: 0px; grid-row-gap: 0px; position: relative; } .dashboard-container .dashboard-placeholder{ box-shadow: inset 0px 0px 1px 2px transparent; list-style-type: none; margin: 0; min-height: 100px; transition: all 0.2s ease-in-out; } .dashboard-container .dashboard-placeholder.bordered{ box-shadow: inset 0px 0px 1px 1px #bbbbbb; } .dashboard-container .dashboard-placeholder.drag-over{ box-shadow: inset 0px 0px 1px 2px #bbbbbb; } .dashboard-container .dashboard-widget{ position: absolute; background-color: #ffffff; border-radius: 10px; box-shadow: 0 0 20px 0 #cecece!important; transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } .dashboard-widget.ui-draggable-dragging{ transform: scale(1.03); box-shadow: 0 0 40px 10px rgba(0,0,0,0.1)!important; } .dashboard-widget .dashboard-widget-header{ padding: 5px; background-color: #222222; color: #ffffff; border-radius: 10px 10px 0 0; display: flex; } .dashboard-widget .dashboard-widget-content{ padding: 5px; max-height: 100%; overflow: auto; } .dashboard-widget .dashboard-widget-header .widget-header-icon, .dashboard-widget .dashboard-widget-header .widget-header-title, .dashboard-widget .dashboard-widget-header .widget-header-options{ display: inline-block; vertical-align: top; } .dashboard-widget .dashboard-widget-header .widget-header-icon{ padding-left: 5px; } .dashboard-widget .dashboard-widget-header .widget-header-title{ padding-left: 5px; flex-grow: 1; } .dashboard-widget.widget-draggable .dashboard-widget-header .widget-header-title{ cursor: move; } .dashboard-widget .dashboard-widget-header .widget-header-options{ list-style-type: none; margin: 0; cursor: pointer; float: right; padding: 0; } .dashboard-widget .dashboard-widget-header .widget-header-options:after{ content :''; display: block; clear: both; } .dashboard-widget .widget-header-options li{ display: inline-block; } .dashboard-widget .dashboard-widget-resize{ opacity: 0; position: absolute; bottom: -3px; right: 3px; cursor: all-scroll; transform: rotate(45deg); transition: all 0.2s ease-in-out; } .dashboard-widget:hover .dashboard-widget-resize { opacity: 0.3; } .dashboard-widget .widget-header-options li{ padding-left: 3px; padding-right: 3px; opacity: 0.5; transition: opacity 0.2s ease-in-out; } .dashboard-widget .widget-header-options .widget-option-delete, .dashboard-widget .dashboard-widget-resize{ display: none; } .dashboard-widget.widget-removable .widget-header-options .widget-option-delete, .dashboard-widget.widget-resizeable .dashboard-widget-resize{ display: inline-block; } .dashboard-widget .widget-header-options li:hover{ opacity: 1; }