PDF rausgenommen
This commit is contained in:
aschwarz
433
msd2/tracking/piwik/plugins/Dashboard/stylesheets/dashboard.less
Normal file
433
msd2/tracking/piwik/plugins/Dashboard/stylesheets/dashboard.less
Normal file
@ -0,0 +1,433 @@
|
||||
#dashboard {
|
||||
margin: 0 -8px;
|
||||
}
|
||||
|
||||
body#standalone {
|
||||
background-color: @theme-color-widget-exported-background-base;
|
||||
|
||||
.top_controls {
|
||||
background-color: @theme-color-widget-exported-background-base;
|
||||
}
|
||||
#dashboard {
|
||||
margin: -10px -6px 0;
|
||||
}
|
||||
}
|
||||
|
||||
#dashboard {
|
||||
#dashboardWidgetsArea > .col {
|
||||
min-height: 100px;
|
||||
// Customize Bootstrap gutter between columns
|
||||
padding-right: 8px;
|
||||
padding-left: 8px;
|
||||
|
||||
>.sortable {
|
||||
padding: 5px 0 13px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hover {
|
||||
border: 2px dashed #E3E3E3;
|
||||
}
|
||||
|
||||
.widgetHover {
|
||||
border: 1px solid #aba494;
|
||||
}
|
||||
|
||||
.widget .entityContainer {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.widget .sparkline {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
// Overriding some dataTable css for better dashboard display
|
||||
.widget .dataTableWrapper {
|
||||
width: 100% !important;
|
||||
table * {
|
||||
// Because of Bootstrap
|
||||
box-sizing: content-box;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-confirm {
|
||||
display: none;
|
||||
color: @theme-color-text-light;
|
||||
cursor: default;
|
||||
font-size: 12px !important;
|
||||
border-radius: 4px;
|
||||
padding: 20px 10px;
|
||||
border-radius: 4px;
|
||||
min-height: 0 !important;
|
||||
|
||||
textarea {
|
||||
background-color: @theme-color-background-contrast;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-confirm p {
|
||||
margin-top: 16px;
|
||||
font-size: 14px;
|
||||
|
||||
}
|
||||
.ui-confirm h2 {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ui-dialog .ui-dialog-buttonpane {
|
||||
text-align: center;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.ui-dialog-buttonset input[type=button], .ui-dialog-buttonset button {
|
||||
color: #fff !important;
|
||||
border: 0 !important;
|
||||
font-size: 12px !important;
|
||||
padding: 5px 20px !important;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
margin: 0 8px 3px 8px !important;
|
||||
}
|
||||
|
||||
.ui-dialog .ui-button-text {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.ui-widget-overlay {
|
||||
opacity: 0.6;
|
||||
background: none #000;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.ui-dialog {
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.widgetLoading, .widgetLoadingError, .dimensionLoadingError {
|
||||
padding: 10px;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
.widgetLoadingError {
|
||||
.alert.alert-danger {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.widgetLoadingError, .dimensionLoadingError {
|
||||
color: @theme-color-brand;
|
||||
text-align: left;
|
||||
a {
|
||||
color: @theme-color-brand;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
#closeMenuIcon {
|
||||
float: right;
|
||||
margin: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menuClear {
|
||||
clear: both;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.dashboardSettings > span {
|
||||
background: url(plugins/Morpheus/images/sort_subtable_desc.png) right center no-repeat;
|
||||
padding-right: 20px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dashboardSettings ul.submenu {
|
||||
display: none;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.dashboardSettings.expanded ul.submenu {
|
||||
display: block;
|
||||
list-style: square outside none;
|
||||
z-index: 1020; /* More than .jqplot-seriespicker-popover (1010) */
|
||||
}
|
||||
|
||||
.dashboardSettings.expanded .dropdown {
|
||||
min-width: 800px;
|
||||
background-color: @theme-color-background-contrast;
|
||||
}
|
||||
|
||||
.dashboardSettings ul.submenu > li {
|
||||
padding: 5px 0;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
#changeDashboardLayout h2 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#columnPreview {
|
||||
clear: both;
|
||||
width: 400px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#columnPreview > div {
|
||||
margin: 5px;
|
||||
float: left;
|
||||
opacity: 0.4;
|
||||
cursor: pointer;
|
||||
filter: Alpha(opacity=40);
|
||||
}
|
||||
|
||||
#columnPreview > div:hover, #columnPreview > div.choosen {
|
||||
opacity: 1;
|
||||
filter: Alpha(opacity=100);
|
||||
}
|
||||
|
||||
#columnPreview div div {
|
||||
height: 120px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#columnPreview div div span {
|
||||
background-color: #ddd;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
border: 2px dotted #555;
|
||||
margin: 0 1px;
|
||||
}
|
||||
|
||||
#columnPreview div.choosen div span, #columnPreview div:hover div span {
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
#columnPreview .width-100 {
|
||||
width: 120px;
|
||||
}
|
||||
#columnPreview .width-75 {
|
||||
width: 90px;
|
||||
}
|
||||
#columnPreview .width-67 {
|
||||
width: 80.4px;
|
||||
}
|
||||
#columnPreview .width-50 {
|
||||
width: 60px;
|
||||
}
|
||||
#columnPreview .width-40 {
|
||||
width: 48px;
|
||||
}
|
||||
#columnPreview .width-33 {
|
||||
width: 40px;
|
||||
}
|
||||
#columnPreview .width-30 {
|
||||
width: 36px;
|
||||
}
|
||||
#columnPreview .width-25 {
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Layout for widget previews
|
||||
*/
|
||||
|
||||
.widgetpreview-base {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.addWidget, .manageDashboard {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
ul.widgetpreview-widgetlist,
|
||||
ul.widgetpreview-categorylist {
|
||||
color: @theme-color-text-light;
|
||||
list-style: none;
|
||||
font-size: 11px;
|
||||
line-height: 20px;
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
ul.widgetpreview-categorylist {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
ul.widgetpreview-categorylist li,
|
||||
ul.widgetpreview-widgetlist li {
|
||||
line-height: 20px;
|
||||
padding: 0 25px 0 5px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.widgetpreview-base li.widgetpreview-choosen {
|
||||
background: #e4e2d7 url(plugins/Morpheus/images/arr_r.png) no-repeat right 6px;
|
||||
color: #255792;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.widgetpreview-categorylist li.widgetpreview-choosen {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.widgetpreview-base li.widgetpreview-unavailable {
|
||||
color: #D3D3D3;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
ul.widgetpreview-widgetlist {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
div.widgetpreview-preview {
|
||||
width: 500px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.dashboardSettings .submenu {
|
||||
font-weight: bold;
|
||||
color: #255792;
|
||||
}
|
||||
|
||||
.dashboardSettings .submenu ul {
|
||||
float: none;
|
||||
font-weight: normal;
|
||||
padding-top: 10px;
|
||||
margin-left: 10px;
|
||||
color: @theme-color-text-light;
|
||||
list-style: none;
|
||||
font-size: 11px;
|
||||
line-height: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.dashboardSettings .submenu ul li {
|
||||
line-height: 20px;
|
||||
padding: 0 25px 0 5px;
|
||||
color: @theme-color-text-light;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.dashboardSettings ul.submenu > li.generalAction:hover {
|
||||
color: @theme-color-link;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.dashboardSettings .submenu ul li:not([disabled]):hover {
|
||||
background: @theme-color-background-base;
|
||||
border-radius: 2px;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.dashboardSettings .submenu li[disabled],
|
||||
.dashboardSettings .submenu li[disabled]:hover {
|
||||
color: #d3d3d3;
|
||||
}
|
||||
|
||||
.dashboardSettings .widgetpreview-widgetlist {
|
||||
width: 228px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.dashboardSettings .widgetTop {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dashboardSettings .widgetpreview-widgetlist,
|
||||
.dashboardSettings .widgetpreview-preview {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dashboardSettings.expanded .widgetpreview-widgetlist,
|
||||
.dashboardSettings.expanded .widgetpreview-preview {
|
||||
display: block;
|
||||
z-index: 333999;
|
||||
}
|
||||
|
||||
.widgetPlaceholder {
|
||||
border: 1px dashed #bbb6ad;
|
||||
}
|
||||
|
||||
#newDashboardName, #createDashboardName {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
#newDashboardNameInput, #createDashboardNameInput {
|
||||
margin: 20px 0 0 100px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#createDashboardNameInput input {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.popoverSubMessage {
|
||||
text-align: center;
|
||||
padding: 10px 0 5px 0;
|
||||
}
|
||||
|
||||
#copyDashboardToUserConfirm .inputs {
|
||||
width: 400px;
|
||||
margin: 32px auto 0;
|
||||
|
||||
label {
|
||||
margin-top: 18px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#dashboardWidgetsArea {
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
@media all and (max-width: 749px) {
|
||||
#dashboardWidgetsArea {
|
||||
padding-right: 7px;
|
||||
}
|
||||
|
||||
.col.width-75,
|
||||
.col.width-67,
|
||||
.col.width-50,
|
||||
.col.width-40,
|
||||
.col.width-33,
|
||||
.col.width-30,
|
||||
.col.width-25 {
|
||||
width: 100%;
|
||||
.widget {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.ui-dialog .widget {
|
||||
.button#close,.button#maximise {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-button, .ui-dialog-titlebar-close {
|
||||
.btn;
|
||||
color: @theme-color-brand-contrast !important;
|
||||
background-color: @color-red-piwik !important;
|
||||
&:hover {
|
||||
background: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,72 @@
|
||||
|
||||
body {
|
||||
padding-left: 7px;
|
||||
}
|
||||
|
||||
#standalone strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
#dashboard {
|
||||
margin: 30px -6px 0 -12px;
|
||||
width: 100%;
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
#Dashboard {
|
||||
z-index: 5;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#Dashboard > ul > li {
|
||||
list-style: square inside none;
|
||||
}
|
||||
#Dashboard > ul {
|
||||
list-style: square inside none;
|
||||
background: #f7f7f7;
|
||||
border: 1px solid #e4e5e4;
|
||||
padding: 5px 10px 6px 10px;
|
||||
border-radius: 4px;
|
||||
color: #444;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
#Dashboard:hover ul {
|
||||
background: #f1f0eb;
|
||||
border-color: #a9a399;
|
||||
}
|
||||
|
||||
#Dashboard > ul > li {
|
||||
float: left;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
#Dashboard a {
|
||||
color: #444;
|
||||
text-decoration: none;
|
||||
font-weight: normal;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#Dashboard > ul > li:hover,
|
||||
#Dashboard > ul > li:hover a {
|
||||
color: #e87500;
|
||||
}
|
||||
|
||||
.top_controls > #Dashboard,
|
||||
.top_controls > #periodString,
|
||||
.top_controls > .dashboardSettings {
|
||||
margin-left: 0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.jqplot-seriespicker-popover {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#ajaxLoading {
|
||||
margin: 40px 0 -30px 0;
|
||||
}
|
||||
168
msd2/tracking/piwik/plugins/Dashboard/stylesheets/widget.less
Normal file
168
msd2/tracking/piwik/plugins/Dashboard/stylesheets/widget.less
Normal file
@ -0,0 +1,168 @@
|
||||
.widget {
|
||||
.font-default(13px, 18px);
|
||||
background: @theme-color-widget-background;
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
box-shadow: @default-box-shade;
|
||||
border: 1px solid @theme-color-widget-background !important;
|
||||
|
||||
&:hover, &:focus {
|
||||
box-shadow: @default-box-shade;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: normal;
|
||||
border-bottom: none;
|
||||
margin: 0;
|
||||
padding: 12px 10px 7px;
|
||||
}
|
||||
h3 {
|
||||
font-weight: normal;
|
||||
font-size: 15px;
|
||||
margin: 0;
|
||||
color: @theme-color-text;
|
||||
text-shadow: none;
|
||||
padding: 22px 15px 16px 12px !important;
|
||||
}
|
||||
p {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
&.default {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
.widgetTop {
|
||||
cursor: default !important;
|
||||
}
|
||||
}
|
||||
|
||||
.widgetTop {
|
||||
cursor: move;
|
||||
font-size: 10pt;
|
||||
font-weight: normal;
|
||||
padding-bottom: 4px;
|
||||
background: @theme-color-widget-title-background;
|
||||
h3 {
|
||||
.font-default(18px, 18px);
|
||||
color: @theme-color-widget-title-text;
|
||||
}
|
||||
.button {
|
||||
margin: 16px 8px 0 0;
|
||||
opacity: 0.8;
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
}
|
||||
.buttons {
|
||||
right: 8px;
|
||||
float: right;
|
||||
position: absolute;
|
||||
padding-left: 50px;
|
||||
display: none;
|
||||
top: 7px;
|
||||
color: @theme-color-widget-title-text;
|
||||
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, @theme-color-widget-title-background 45px);
|
||||
background: -webkit-linear-gradient(left,rgba(255,255,255,0) 0%, @theme-color-widget-title-background 45px);
|
||||
background: linear-gradient(to right, rgba(255,255,255,0) 0%, @theme-color-widget-title-background 45px);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='@{theme-color-widget-title-background}',GradientType=1 );
|
||||
}
|
||||
|
||||
&:hover .buttons {
|
||||
display:block;
|
||||
}
|
||||
}
|
||||
|
||||
.widgetText {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.pk-emptyDataTable {
|
||||
.font-default(13px, 16px);
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.widgetContent {
|
||||
.widgetBody {
|
||||
padding: 5px 12px 0;
|
||||
}
|
||||
|
||||
/** We do not want to show a material-card in a widget which is already a card */
|
||||
.card {
|
||||
box-shadow: 0 0;
|
||||
padding: 0 10px;
|
||||
|
||||
.card-content {
|
||||
padding: 0;
|
||||
border-radius: 0
|
||||
}
|
||||
}
|
||||
.jqplot-graph {
|
||||
margin-top: 6px;
|
||||
}
|
||||
.sparkline {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.widgetContent.hidden {
|
||||
position: absolute;
|
||||
top: -5000px;
|
||||
height: 1000px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.widgetContent.loading {
|
||||
opacity: 0.5;
|
||||
background: url(plugins/Morpheus/images/loading-blue.gif) no-repeat top right;
|
||||
}
|
||||
|
||||
.widgetLoading {
|
||||
cursor: wait;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.widgetNameOffScreen {
|
||||
overflow: hidden;
|
||||
width:1px;
|
||||
height:1px;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.widget.hiddenContent .widgetTop.widgetTopHover {
|
||||
.button#minimise,.button#refresh {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
|
||||
.widget table.dataTable tr td {
|
||||
background-color: @theme-color-widget-background;
|
||||
}
|
||||
|
||||
.dataTable table.dataTable tr td {
|
||||
background-color: @theme-color-widget-background;
|
||||
}
|
||||
|
||||
.widget {
|
||||
.datatableHeaderMessage, .datatableFooterMessage {
|
||||
padding-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.bar-graph-colors[data-name=grid-background] {
|
||||
color: @theme-color-widget-background !important;
|
||||
}
|
||||
|
||||
|
||||
.widgetoverlay {
|
||||
.widget, .ui-dialog-content {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.ui-dialog .widget .widgetTop .buttons {
|
||||
right: 25px;
|
||||
}
|
||||
Reference in New Issue
Block a user