scripts/apps/dashboard/styles/dashboard.scss
// dashboard.scss
// Styling for the superdesk dashboard page (gridster, widgets)
// ----------------------------------------------------------------------------------------
@import '~mixins.scss';
@import '~variables.scss';
.dashboard-container {
position: absolute;
inset-inline-start: 0;
inset-inline-end: 0;
inset-block-end: 0;
inset-block-start: $topspace + $subnav-height;
overflow-y: auto;
> .content {
padding: 0 2.4rem $bottom-view-padding 0;
}
.empty-dashboard {
position: absolute;
inset-inline-start: 50%;
inset-block-start: 40%;
font-size: 22px;
font-weight: bold;
color: #aaa;
width: 300px;
margin-inline-start: -150px;
}
}
.sd-widget {
background: var(--sd-colour__dashboard-widget-Bg);
border-block-start:0;
border-radius: var(--b-radius--medium);
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.2);
width: 100%;
height: 100%;
display: grid;
grid-template-rows: [topLine] auto [mainHeader] auto [mainContent] 1fr;
grid-template-columns: 1fr auto;
position: relative;
.widget-line {
grid-row: topLine;
border-radius: 1px 1px 0 0;
height: 0px;
background: transparent;
}
.widget-header {
grid-row: mainHeader;
display: flex;
align-items: center;
height: 34px;
box-shadow: 0 1px 0 0 var(--sd-colour-line--medium);
position: relative;
z-index: 2;
background-color: var(--sd-item__main-Bg);
border-radius: var(--b-radius--medium) var(--b-radius--medium) 0 0;
.widget-title {
color: $sd-text;
padding-inline-start: 12px;
font-size: 1.3rem;
font-weight: 400;
}
}
.widget-header__search-button {
display: flex;
align-items: center;
width: 36px;
justify-content: center;
height: 100%;
border-inline-end: 1px solid var(--sd-colour-line--light);
transition: all ease-in-out 0.1s;
border-radius: var(--b-radius--medium) 0 0 0;
i {
opacity: 0.5;
transition: all ease-in-out 0.1s;
color: $sd-text;
}
&:hover {
i {
opacity: 1;
//transition: all ease-in-out 0.1s;
}
}
&:active {
i {
opacity: 1;
color: var(--sd-colour-interactive);
//transition: all ease-in-out 0.1s;
}
}
&--active {
background-color: var(--sd-colour-interactive);
i {
opacity: 0.5;
color: $white;
}
}
}
.widget-content {
position: relative;
grid-row: mainContent;
overflow-y: hidden;
.activity-list.card-list>li {
box-shadow: 0 0 0 1px var(--sd-shadow-outline--2), 0 1px 4px 0 rgba(0,0,0,.12), 0 0 1px 0 rgba(0,0,0,.2);
border-radius: 2px;
&:hover {
box-shadow: 0 0 0 1px var(--sd-shadow-outline--2), 0 1px 4px 0 rgba(0,0,0,.12), 0 0 1px 0 rgba(0,0,0,.2);
}
}
}
.widget-footer {
border-block-start: 1px solid var(--sd-colour-line--medium);
height: 31px;
background-color: var(--sd-item__main-Bg);
border-radius: 0 0 var(--b-radius--medium) var(--b-radius--medium);
}
.widget-settings {
position: absolute;
top : 2px;
inset-inline-end: 6px;
line-height: 1;
width: 28px;
height: 28px;
text-align: center;
z-index: 3;
.dropdown__toggle {
margin-block-start: 4px;
i {
opacity: 0.7;
}
}
.dropdown__menu {
margin-block-start: -7px;
margin-inline-end: 4px;
}
}
.slider {
.arrow {
width: 8px;
height: 12px;
background: url(~images/widget-slider.png) no-repeat 0 0;
margin-block-start: 9px;
opacity: 0.85;
&.left {
float: inline-start;
margin-inline-start: 9px;
}
&.right {
background-position: -10px 0px;
margin-inline-end: 9px;
float: inline-end;
}
&:hover {
cursor: pointer;
opacity: 1;
}
&.disable {
opacity: 0.4;
}
}
}
::-webkit-scrollbar {
border-inline-start: 4px solid $background-main !important;
border-inline-end: 1px solid $background-main !important;
width: 8px !important;
background: $background-main !important;
}
::-webkit-scrollbar-track {
background: $background-main !important;
border-inline-start: 3px solid $background-main !important;
&:hover {
background: rgba(0,0,0,.05) !important;
}
}
::-webkit-scrollbar-thumb {
border-inline-start: 3px solid $background-main !important;
}
}
/*
---------------------------------------------
Widgets styles
---------------------------------------------
*/
//default-widget
.d-widget {
&.default {
.widget-content {
padding: 20px;
}
}
}
//specific widgets styles are defined in their own widgets folder
//world clock
//ingest
//ingest statisticswidget
.sd-widget {
&.ingest-stats {
.widget-content {
padding: 10px;
overflow: hidden;
}
}
}
.statistics {
.stats-container {
float: inline-start;
&.size1 {
width:372px;
}
&.size2 {
width:744px;
}
}
.stats-block {
float: inline-start;
border: 1px solid #ccc;
margin-inline-end: 30px;
margin-block-end: 30px;
@include border-radius(3px);
.title {
text-align: center;
margin-block-end: 5px;
margin-block-start: 10px;
padding-block-end: 10px;
border-block-end: 1px solid #f0f0f0;
font-size: 18px;
color: $sd-text;
letter-spacing: 1px;
}
.block {
padding: 10px;
}
&.theme-dark {
background: #212121;
border-color: #000;
.title {
color: #a8a8a8;
border-color:#313131;
}
}
}
}
/*
---------------------------------------------
STREAM PAGE
---------------------------------------------
*/
.workspace-stream {
padding: 40px 35px $bottom-view-padding !important;
overflow: auto;
inset-block-end: auto;
.activity-container {
width: 500px;
}
}
/*
=============================================
Gridster library
=============================================
*/
.gridster {
position:relative;
}
.gridster > * {
margin: 0 auto;
-webkit-transition: height .4s;
-moz-transition: height .4s;
-o-transition: height .4s;
-ms-transition: height .4s;
transition: height .4s;
}
.gridster .gs_w {
z-index: 2;
position: absolute;
}
.ready .gs_w:not(.preview-holder) {
-webkit-transition: opacity .3s, left .3s, top .3s;
-moz-transition: opacity .3s, left .3s, top .3s;
-o-transition: opacity .3s, left .3s, top .3s;
transition: opacity .3s, left .3s, top .3s;
}
.ready .gs_w:not(.preview-holder) {
-webkit-transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
-moz-transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
-o-transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
}
.gridster .preview-holder {
z-index: 1;
position: absolute;
background-color: #f0f0f0;
border: 1px dashed #c8c8c8;
@include border-radius(3px);
}
.gridster .player-revert {
z-index: 10!important;
-webkit-transition: left .3s, top .3s !important;
-moz-transition: left .3s, top .3s !important;
-o-transition: left .3s, top .3s !important;
transition: left .3s, top .3s !important;
}
.gridster .dragging {
z-index: 10!important;
@include transition(all 0s !important);
@include opacity(80);
cursor: move;
}
.gridster {
.dash-grid {
list-style-type: none;
width: 100% !important;
li {
.widget-close {
position: absolute;
width: 30px;
height: 30px;
background: url("~images/round-close.png") no-repeat 0 0;
z-index: 100;
inset-inline-end: -15px;
inset-block-start: -15px;
cursor: pointer;
}
.widget-resize-width , .widget-resize-height {
cursor: pointer;
position: absolute;
}
.widget-resize-width {
width: 47px;
height: 43px;
z-index: 100;
inset-inline-end: -25px;
inset-block-start: 50%;
margin-block-start: -22px;
.resize-left, .resize-right {
width : 23px;
height: 43px;
float: inline-start;
@include opacity(0);
@include transition(all 0.3s linear);
background: url("~images/widget-resize-icons.png") no-repeat 0 0;
}
.resize-right {
background-position: -23px 0;
float: inline-end;
}
}
.widget-resize-height {
width: 43px;
height: 47px;
z-index: 100;
inset-inline-start: 50%;
inset-block-end: -24px;
margin-inline-start: -22px;
.resize-up, .resize-down {
width : 43px;
height: 23px;
background: url("~images/widget-resize-icons.png") no-repeat -47px 0;
@include opacity(0);
@include transition(all 0.3s linear);
}
.resize-down {
background-position: -47px -23px;
margin-block-start: 1px;
}
}
}
}
&.editmode {
.dash-grid li {
&:hover {
.resize-left, .resize-right, .resize-up, .resize-down {
@include opacity(50);
@include transition(all 0.3s linear);
&:hover {
@include opacity(100);
@include transition(all 0.3s linear);
}
}
}
&.dragging {
.widget-resize-width , .widget-resize-height {
@include opacity(30);
}
}
}
.d-widget {
border-color: #999;
@include box-shadow(0 0 4px 1px #b8b8b8 );
@include transition(all 0.3s linear);
}
}
}
/*
=============================================
Add new widget modal
=============================================
*/
.widget-select {
.modal-screen {
inset-block-start: $nav-height;
inset-block-end: auto;
}
.modal-body {
height: 500px;
max-height: 500px;
background-color: #f8f8f8;
.nav-tabs {
line-height: $nav-height;
padding-inline-start: 20px;
label {
display: inline-block;
color: #989898;
}
}
}
.modal-footer {
min-height: 60px;
.center {
@include center-block();
text-align: center;
}
.btn-done {
float: inline-end;
margin-block-start: -28px;
}
.btn-next i {
margin-inline-start: 8px;
width: 8px;
}
}
}
.widget-list {
list-style-type: none;
margin: 0;
padding: 0px;
display: flex;
flex-flow: row wrap;
li {
width: calc(#{33%} - #{40px});
margin: 20px;
padding: 0;
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.2);
border-radius: 4px;
background-color: var(--sd-item__main-Bg);
position: relative;
.thumbnail {
border-radius: 4px 4px 0 0;
position: relative;
padding-block-start: 6px;
min-height: 177px;
background-color: var(--sd-item__main-Bg--hover);
&::before {
content: "";
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
inset-inline-end: 0;
height: 8px;
background-color: rgba(0,0,0,.2);
border-radius: 4px 4px 0 0;
}
img {
max-width: 100%;
}
}
.title {
text-align: center;
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
color: $sd-text;
padding: 8px 0;
}
&:hover {
cursor:pointer;
box-shadow: 0 1px 8px 0 rgba(0,0,0,0.5);
}
&.widget {
// specific colors
&.world-clock {
.thumbnail {
background-color: $widget_world-clock;
}
}
&.user-activity {
.thumbnail {
background-color: $widget_user-activity;
}
}
&.ingest-stats {
.thumbnail {
background-color: $widget_ingest-stats;
}
}
&.aggregate {
.thumbnail {
background-color: $widget_aggregate;
}
}
&.archive {
.thumbnail {
background-color: $widget_archive;
}
}
&.ingest {
.thumbnail {
background-color: $widget_ingest;
}
}
&.activity {
.thumbnail {
background-color: $widget_activity;
}
}
&.routing {
.thumbnail {
background-color: $widget_routing;
}
}
&.analytics {
.thumbnail {
background-color: $widget_analytics;
}
}
&.stages-auto-publish {
.thumbnail {
background-color: $widget_publish;
}
}
// selected
&.selected {
cursor: default;
@include box-shadow (0 1px 4px 0 rgba(0,0,0,0.06));
.thumbnail, .title {
@include opacity(30);
}
//green checkmark
&::before {
content: "";
position: absolute;
width: 32px;
height: 32px;
background-color: #49b04b;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNiAyMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjYgMjIiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Im0yNS4zMSAyLjU1NWMtLjgtLjgtMi4yLS42LTMgLjJsLTEyLjQgMTIuNC02LjI4OC02LjI4OWMtMS0xLTIuNC0xLTMtLjItLjguOC0uNiAyLjIuMiAzLjJsNy40ODkgNy40ODljMCAwIC44MDcuNiAxLjYuNnMxLjUwOS0uNTgxIDEuNTA5LS41ODFsMTMuNjktMTMuODE5YzEtLjggMS0yLjIuMi0zIi8+PC9zdmc+);
background-repeat: no-repeat;
background-size: 20px;
background-position: center center;
@include border-radius(50%);
inset-block-start: -16px;
inset-inline-end: -16px;
z-index: 1;
@include box-shadow (0 2px 6px 0 rgba(0,0,0,0.55));
}
}
}
}
}
.widget-detail {
padding: 40px !important;
display: flex;
.thumbnail-box {
position: relative;
width: calc(#{60%} - #{30px});
margin-inline-end: 30px;
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.2);
border-radius: 2px;
&::before {
content: "";
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
inset-inline-end: 0;
height: 8px;
background-color: rgba(0,0,0,.2);
border-radius: 4px 4px 0 0;
}
// specific colors
&.world-clock {
background-color: $widget_world-clock;
}
&.ingest-stats {
background-color: $widget_ingest-stats;
}
&.aggregate {
background-color: $widget_aggregate;
}
&.archive {
background-color: $widget_archive;
}
&.ingest {
background-color: $widget_ingest;
}
&.activity {
background-color: $widget_activity;
}
&.routing {
background-color: $widget_routing;
}
&.analytics {
background-color: $widget_analytics;
}
&.user-activity {
background-color: $widget_user-activity;
}
}
.content-box {
display: flex;
flex-direction: column;
align-items: flex-start;
width: calc(#{40%});
.title {
font-size: 30px;
line-height: 110%;
font-weight: 700;
padding: 0 0 20px;
width: 100%;
}
.description {
font-size: 14px;
width: 100%;
margin-block-end: 20px;
flex-grow: 1;
ul {
list-style: circle;
}
}
}
}