/* Scrollbar */ .dashboard-container *::-webkit-scrollbar { width: 0.5rem; } .dashboard-container *::-webkit-scrollbar { width: 5px; height: 5px; } .dashboard-container *::-webkit-scrollbar-button { width: 0px; height: 0px; } .dashboard-container *::-webkit-scrollbar-thumb { background: #bbbbbb; border: 0px none #ffffff; border-radius: 50px; } .dashboard-container *::-webkit-scrollbar-thumb:hover { background: #949494; } .dashboard-container *::-webkit-scrollbar-thumb:active { background: #707070; } .dashboard-container *::-webkit-scrollbar-track { background: inherit; border: 0px none #ffffff; border-radius: 50px; } .dashboard-container *::-webkit-scrollbar-track:hover { background: #cecece; } .dashboard-container *::-webkit-scrollbar-track:active { background: #d3d3d3; } .dashboard-container *::-webkit-scrollbar-corner { background: transparent; } .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; border-radius: 10px; list-style-type: none; margin: 0; min-height: 100px; transition: all 0.15s ease-in; } .dashboard-placeholder{ transition: background 0.15s linear; cursor: pointer; position: relative; } .dashboard-placeholder:hover{ background-color: #e6e6e6; } .dashboard-placeholder .placeholder-add{ display: inline-block; opacity: 0; text-align: center; height: 100%; vertical-align: bottom; line-height: 100%; position: absolute; color: #adadad; top: calc(50% - 15px); left: calc(50% - 15px); font-size: 30px; transition: opacity 0.15s linear; } .dashboard-placeholder:hover .placeholder-add{ opacity: 1; } .dashboard-container .dashboard-placeholder.bordered{ border-radius: 0; box-shadow: inset 0px 0px 1px 1px #bbbbbb; } .dashboard-container .dashboard-placeholder.drag-over{ background-color: #dfeeff; box-shadow: inset 0px 0px 1px 2px #9fcdff; } .dashboard-container .dashboard-widget{ position: absolute; background-color: #ffffff; border-radius: 10px; box-shadow: 0 0 20px 0 #cecece!important; transition: transform 0.15s ease-in, box-shadow 0.15s ease-in; } .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; height: calc(100% - 34px); max-height: calc(100% - 34px); overflow: auto; display: flex; } .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: -2px; right: 0px; cursor: all-scroll; transform: rotate(45deg); transition: all 0.2s ease-in-out; cursor: nw-resize; } .dashboard-widget:hover .dashboard-widget-resize { opacity: 0.3; } .dashboard-widget .widget-header-options li{ padding: 0 0.5rem; 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; } .dashboard-configure-menu li.active i.text-muted{ color: #ffffff!important; } .dashboard-configure-menu li{ cursor: pointer; transition: background 0.2s ease-in-out; } .dashboard-configure-menu li:hover{ background: #f3f3f3; } .dashboard-modal .widget-types{ padding: 0; margin: 0; display: grid; grid-template-columns: auto auto auto; list-style-type: none; } .dashboard-modal .widget-types li{ border-radius: 2px; padding: 5px; margin: 5px; background: #ebebeb; list-style-type: none; }