You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
493 lines
15 KiB
493 lines
15 KiB
@import '../../../../css/partials/base';
|
|
|
|
/********** Header **********/
|
|
#myoffice_container .dashboard-header {
|
|
height: 62px;
|
|
background-color: #22a5ff;
|
|
color: #fff;
|
|
border-radius: 2px;
|
|
margin-bottom: 20px;
|
|
}
|
|
#myoffice_container .dashboard-header > * {
|
|
float: left;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
}
|
|
#myoffice_container .dashboard-header .header-title {
|
|
float: left;
|
|
width: 55%;
|
|
padding: 10px 20px;
|
|
line-height: 40px;
|
|
font-size: 18px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
#myoffice_container .dashboard-header .header-link {
|
|
float: right;
|
|
width: 15%;
|
|
border-left: solid 1px #dcdcdc;
|
|
color: #fff;
|
|
padding: 5px 0px;
|
|
text-align: center;
|
|
}
|
|
|
|
#myoffice_container .dashboard-header .header-link.disabled {
|
|
background: #333;
|
|
cursor: not-allowed;
|
|
text-decoration: none;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
#myoffice_container .dashboard-header .header-link:not(.disabled):hover {
|
|
border-radius: 2px;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
}
|
|
#myoffice_container .dashboard-header .header-link .header-link-icon {
|
|
height: 30px;
|
|
}
|
|
#myoffice_container .dashboard-header .header-link .header-link-icon i {
|
|
vertical-align: sub;
|
|
vertical-align: -webkit-baseline-middle;
|
|
}
|
|
#myoffice_container .dashboard-header .header-link .header-link-title {
|
|
height: 20px;
|
|
font-size: 12px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/********** Content **********/
|
|
#myoffice_container .dashboard-content {
|
|
.dashboard-top-message {
|
|
padding: 10px;
|
|
margin-bottom: 10px;
|
|
border-radius: 2px;
|
|
opacity: 0.8;
|
|
}
|
|
.dashboard-top-message{
|
|
&.link-box[data-category] {
|
|
cursor: pointer;
|
|
&:hover {
|
|
background-color: #ff3b29;
|
|
background-image: -moz-linear-gradient(top, #ff3a28, #ff6161);
|
|
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ff3a28), to(#ff6161));
|
|
background-image: -webkit-linear-gradient(top, #ff3a28, #ff6161);
|
|
background-image: -o-linear-gradient(top, #ff3a28, #ff6161);
|
|
background-image: linear-gradient(to bottom, #ff3a28, #ff6161);
|
|
}
|
|
}
|
|
i {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
#myoffice_container .dashboard-content-div {
|
|
width: 50%;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
}
|
|
#myoffice_container .dashboard-left-section {
|
|
margin-bottom: 20px;
|
|
}
|
|
#myoffice_container .dashboard-content-div.dashboard-left-content {
|
|
padding-right: 10px;
|
|
}
|
|
#myoffice_container .dashboard-left-content .left-section-header {
|
|
height: 50px;
|
|
line-height: 50px;
|
|
border-bottom: solid 1px #aaa;
|
|
border-top: solid 1px #aaa;
|
|
padding: 0 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
#myoffice_container .dashboard-left-content .left-section-header.link-box {
|
|
background-color: #f6f6f6;
|
|
background-image: -webkit-linear-gradient(top, hsl(0, 0%, 98%) 0%, hsl(0, 0%, 95%) 100%);
|
|
background-image: -moz-linear-gradient(top, hsl(0, 0%, 98%) 0%, hsl(0, 0%, 95%) 100%);
|
|
background-image: -ms-linear-gradient(top, hsl(0, 0%, 98%) 0%, hsl(0, 0%, 95%) 100%);
|
|
background-image: -o-linear-gradient(top, hsl(0, 0%, 98%) 0%, hsl(0, 0%, 95%) 100%);
|
|
background-image: linear-gradient(top, hsl(0, 0%, 98%) 0%, hsl(0, 0%, 95%) 100%);
|
|
border-radius: 2px;
|
|
border: 1px solid #dcdcdc;
|
|
}
|
|
#myoffice_container .dashboard-left-content .left-section-header .title {
|
|
font-size: 22px;
|
|
color: #555;
|
|
}
|
|
#myoffice_container .dashboard-left-content .left-section-header .number {
|
|
font-size: 24px;
|
|
color: #22a5ff;
|
|
float: right;
|
|
}
|
|
#myoffice_container .dashboard-left-content .users-section-content .users-element {
|
|
display: inline-block;
|
|
padding: 5px;
|
|
}
|
|
|
|
/* Devices Chart */
|
|
#myoffice_container .devices-section-content .devices-chart canvas {
|
|
margin: 7px 0;
|
|
}
|
|
|
|
#myoffice_container .devices-section-content .devices-canvas-wrapper {
|
|
width: 130px;
|
|
height: 130px;
|
|
}
|
|
|
|
#myoffice_container .numbers-canvas-wrapper {
|
|
width: 100px;
|
|
height: 120px;
|
|
float: left;
|
|
}
|
|
|
|
#myoffice_container .users-section-content {
|
|
display: block;
|
|
}
|
|
|
|
#myoffice_container .users-section-content .users-canvas-wrapper {
|
|
width: 130px;
|
|
height: 130px;
|
|
}
|
|
|
|
#myoffice_container .users-section-content .users-chart-legend {
|
|
margin-left: 150px;
|
|
margin-right: 10px;
|
|
}
|
|
#myoffice_container .users-section-content .users-chart-legend ul {
|
|
list-style: none;
|
|
margin: 0px;
|
|
}
|
|
#myoffice_container .users-section-content .users-chart-legend .legend-element {
|
|
font-size: 12px;
|
|
line-height: 18px;
|
|
}
|
|
#myoffice_container .users-section-content .users-chart-legend .legend-element.no-user {
|
|
opacity: 0.5;
|
|
}
|
|
#myoffice_container .users-section-content .users-chart-legend .legend-number {
|
|
float: right;
|
|
}
|
|
#myoffice_container .users-section-content .users-chart-legend .legend-color {
|
|
margin-right: 10px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
#myoffice_container .devices-section-content .devices-chart-legend {
|
|
margin-left: 150px;
|
|
margin-right: 10px;
|
|
}
|
|
#myoffice_container .devices-section-content .devices-chart-legend ul {
|
|
list-style: none;
|
|
margin: 0px;
|
|
}
|
|
#myoffice_container .devices-section-content .devices-chart-legend .legend-element {
|
|
font-size: 12px;
|
|
line-height: 18px;
|
|
}
|
|
#myoffice_container .devices-section-content .devices-chart-legend .legend-element.no-device {
|
|
opacity: 0.5;
|
|
}
|
|
#myoffice_container .devices-section-content .devices-chart-legend .legend-number {
|
|
float: right;
|
|
}
|
|
#myoffice_container .devices-section-content .devices-chart-legend .legend-color {
|
|
margin-right: 10px;
|
|
font-size: 14px;
|
|
}
|
|
#myoffice_container .devices-section-content .unregistered-devices .value {
|
|
float: right;
|
|
color: red;
|
|
font-weight: bold;
|
|
}
|
|
#myoffice_container .devices-section-content .unregistered-devices .value.none {
|
|
color: #22a5ff;
|
|
}
|
|
#myoffice_container .devices-section-content .unregistered-devices {
|
|
margin-top: 25px;
|
|
padding: 0px 10px;
|
|
font-size: 16px;
|
|
}
|
|
/*****************/
|
|
|
|
#myoffice_container .dashboard-content-div.dashboard-right-content {
|
|
padding-left: 10px;
|
|
}
|
|
#myoffice_container .dashboard-right-content .dashboard-box {
|
|
border: 1px solid #dcdcdc;
|
|
border-radius: 2px;
|
|
}
|
|
#myoffice_container .dashboard-right-content .dashboard-box > :first-child {
|
|
border-top-left-radius: 4px;
|
|
border-top-right-radius: 4px;
|
|
}
|
|
#myoffice_container .dashboard-right-content .dashboard-box > :last-child {
|
|
border-bottom-left-radius: 4px;
|
|
border-bottom-right-radius: 4px;
|
|
}
|
|
#myoffice_container .dashboard-right-content .dashboard-box .dashboard-warning-row {
|
|
padding: 10px;
|
|
line-height: 40px;
|
|
color: #ffffff;
|
|
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
|
background-color: #faa732;
|
|
background-image: -moz-linear-gradient(top, #fbb450, #f89406);
|
|
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
|
|
background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
|
|
background-image: -o-linear-gradient(top, #fbb450, #f89406);
|
|
background-image: linear-gradient(to bottom, #fbb450, #f89406);
|
|
opacity: 0.8;
|
|
}
|
|
#myoffice_container .dashboard-right-content .dashboard-box .dashboard-warning-row > i {
|
|
margin-right: 10px;
|
|
color: #ffffff;
|
|
}
|
|
#myoffice_container .dashboard-right-content .dashboard-box .dashboard-box-row {
|
|
padding: 10px;
|
|
background-color: #f6f6f6;
|
|
background-image: -webkit-linear-gradient(top, hsl(0, 0%, 98%) 0%, hsl(0, 0%, 95%) 100%);
|
|
background-image: -moz-linear-gradient(top, hsl(0, 0%, 98%) 0%, hsl(0, 0%, 95%) 100%);
|
|
background-image: -ms-linear-gradient(top, hsl(0, 0%, 98%) 0%, hsl(0, 0%, 95%) 100%);
|
|
background-image: -o-linear-gradient(top, hsl(0, 0%, 98%) 0%, hsl(0, 0%, 95%) 100%);
|
|
background-image: linear-gradient(top, hsl(0, 0%, 98%) 0%, hsl(0, 0%, 95%) 100%);
|
|
color: #555;
|
|
}
|
|
#myoffice_container .dashboard-right-content .dashboard-box .dashboard-box-row.fax-number-row {
|
|
display: none; /*Hiding Fax temporarily*/
|
|
}
|
|
#myoffice_container .dashboard-right-content .dashboard-box > * {
|
|
border-bottom: solid 1px #c0c0c0;
|
|
}
|
|
#myoffice_container .dashboard-right-content .dashboard-box > :last-of-type {
|
|
border-bottom: none;
|
|
}
|
|
#myoffice_container .dashboard-right-content .dashboard-box .dashboard-box-row > div {
|
|
display: inline-block;
|
|
line-height: 40px;
|
|
vertical-align: middle;
|
|
}
|
|
#myoffice_container .dashboard-right-content .dashboard-box .dashboard-box-row > div > div {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
#myoffice_container .dashboard-right-content .dashboard-box .dashboard-box-row .row-title {
|
|
width: 40%;
|
|
padding-right: 5px;
|
|
box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
}
|
|
#myoffice_container .dashboard-right-content .dashboard-box .dashboard-box-row .row-content {
|
|
width: 60%;
|
|
font-size: 16px;
|
|
}
|
|
#myoffice_container .dashboard-right-content .dashboard-box .dashboard-box-row .row-number {
|
|
margin-left: 15px;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
}
|
|
#myoffice_container .dashboard-right-content .dashboard-box .dashboard-box-row .row-content .number-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
}
|
|
#myoffice_container .dashboard-right-content .dashboard-box .dashboard-box-row .row-content .number-list li {
|
|
line-height: 25px;
|
|
}
|
|
#myoffice_container .dashboard-right-content .dashboard-box .dashboard-box-row .row-content .number-list li.caller-id {
|
|
color: #22a5ff;
|
|
}
|
|
#myoffice_container .dashboard-right-content .dashboard-box .dashboard-box-row .row-content .number-list .features > i {
|
|
cursor: inherit;
|
|
}
|
|
#myoffice_container .dashboard-right-content .dashboard-box .dashboard-box-row .row-content .number-list .number-div {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
#myoffice_container .dashboard-right-content .dashboard-box .dashboard-box-row.account-info-box > div {
|
|
height: 20px;
|
|
line-height: 20px;
|
|
}
|
|
#myoffice_container .dashboard-right-content .dashboard-box .dashboard-box-row.account-info-box .row-label {
|
|
font-weight: 600;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
#myoffice_container .dashboard-right-content .dashboard-box .dashboard-box-div .div-title {
|
|
height: 40px;
|
|
line-height: 40px;
|
|
padding: 10px;
|
|
background-color: #f6f6f6;
|
|
font-size: 22px;
|
|
color: #555;
|
|
}
|
|
#myoffice_container .dashboard-right-content .dashboard-box .dashboard-box-div .div-title .number {
|
|
float: right;
|
|
margin-right: 10px;
|
|
color: #22a5ff;
|
|
}
|
|
#myoffice_container .dashboard-right-content .dashboard-box .dashboard-box-div > :not(:last-child) {
|
|
border-bottom: solid 1px #dcdcdc
|
|
}
|
|
#myoffice_container .dashboard-right-content .dashboard-box .dashboard-box-div .chart-container {
|
|
padding: 10px;
|
|
position: relative;
|
|
min-height: 100px;
|
|
}
|
|
#myoffice_container .dashboard-right-content .dashboard-box .dashboard-box-div canvas {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
margin: auto 0;
|
|
}
|
|
#myoffice_container .dashboard-right-content .dashboard-box .dashboard-box-div .chart-legend {
|
|
margin-left: 110px;
|
|
}
|
|
#myoffice_container .dashboard-right-content .dashboard-box .dashboard-box-div .chart-legend ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
}
|
|
#myoffice_container .dashboard-right-content .dashboard-box .dashboard-box-div .chart-legend .legend-element {
|
|
line-height: 30px
|
|
}
|
|
#myoffice_container .dashboard-right-content .dashboard-box .dashboard-box-div .chart-legend .legend-number {
|
|
float: right;
|
|
margin-right: 10px;
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
}
|
|
#myoffice_container .dashboard-right-content .dashboard-box .dashboard-box-div .assigned-numbers-legend ul {
|
|
margin-top: 20px;
|
|
}
|
|
#myoffice_container .dashboard-right-content .dashboard-box .dashboard-box-div .number-types-legend ul {
|
|
margin-top: 5px;
|
|
}
|
|
#myoffice_container .dashboard-right-content .dashboard-box .dashboard-box-div .number-types-legend:not([class*='size-']) .legend-element {
|
|
line-height: 24px;
|
|
}
|
|
#myoffice_container .dashboard-right-content .dashboard-box .dashboard-box-div .number-types-legend.size-2 {
|
|
margin-top: 20px;
|
|
}
|
|
#myoffice_container .dashboard-right-content .dashboard-box .dashboard-box-div .number-types-legend.size-1 {
|
|
margin-top: 35px;
|
|
}
|
|
/*#myoffice_container .dashboard-right-content .dashboard-box .dashboard-box-div .number-types-legend.size .legend-element {
|
|
line-height: 24px;
|
|
}*/
|
|
#myoffice_container .dashboard-right-content .dashboard-box .dashboard-box-div .number-types-legend .legend-color {
|
|
margin-right: 10px;
|
|
font-size: 14px;
|
|
}
|
|
#myoffice_container .dashboard-right-content .dashboard-box .dashboard-box-div .number-types-legend .legend-number {
|
|
font-size: 16px;
|
|
}
|
|
#myoffice_container .dashboard-right-content .dashboard-box .dashboard-box-div .number-types-legend .no-number {
|
|
line-height: 90px;
|
|
font-style: italic;
|
|
color: #999;
|
|
}
|
|
|
|
#myoffice_container .dashboard-content-div .link-box:hover,
|
|
#myoffice_container .dashboard-content-div .div-title.link-box:hover {
|
|
cursor: pointer;
|
|
background: #eeeeee;
|
|
}
|
|
#myoffice_container .dashboard-right-content .dashboard-box .dashboard-warning-row.link-box:hover {
|
|
background-color: #faa732;
|
|
background-image: -moz-linear-gradient(top, #f89406, #fbb450);
|
|
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f89406), to(#fbb450));
|
|
background-image: -webkit-linear-gradient(top, #f89406, #fbb450);
|
|
background-image: -o-linear-gradient(top, #f89406, #fbb450);
|
|
background-image: linear-gradient(to bottom, #f89406, #fbb450);
|
|
}
|
|
|
|
/********** Music-On-Hold Popup **********/
|
|
#my_office_music_on_hold_popup .media-dropdown {
|
|
margin-bottom: 0px;
|
|
width: 220px;
|
|
}
|
|
#my_office_music_on_hold_popup .upload-toggle {
|
|
margin-left: 10px;
|
|
min-width: 117px;
|
|
}
|
|
#my_office_music_on_hold_popup .upload-div {
|
|
display: none;
|
|
margin-top: 20px;
|
|
}
|
|
#my_office_music_on_hold_popup .upload-div .upload-input {
|
|
margin: 0;
|
|
width: 330px;
|
|
}
|
|
#my_office_music_on_hold_popup .upload-div button.upload-action {
|
|
margin-left: 10px;
|
|
min-width: 20px;
|
|
padding-right: 10px;
|
|
}
|
|
#my_office_music_on_hold_popup .upload-div .file-upload {
|
|
margin: 0;
|
|
}
|
|
#my_office_music_on_hold_popup .upload-div .file-upload > input {
|
|
margin: 0;
|
|
width: 192px;
|
|
padding: 6px;
|
|
}
|
|
#my_office_music_on_hold_popup .upload-div .file-upload > button {
|
|
width: 120px;
|
|
}
|
|
|
|
/********** Caller ID Popup **********/
|
|
#my_office_caller_id_popup .emergency-form {
|
|
margin-top: 15px;
|
|
}
|
|
#my_office_caller_id_popup .emergency-form form {
|
|
margin: 0px;
|
|
}
|
|
#my_office_caller_id_popup .emergency-form label {
|
|
margin: 0;
|
|
}
|
|
#my_office_caller_id_popup .emergency-form label.monster-invalid {
|
|
margin: 12px 0 0 5px;
|
|
display: inline-block !important;
|
|
font-size: 30px;
|
|
}
|
|
#my_office_caller_id_popup .emergency-form-label {
|
|
display: inline-block;
|
|
width: 120px;
|
|
}
|
|
#my_office_caller_id_popup .caller-id-name {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
#my_office_caller_id_popup .number-feature {
|
|
display: none;
|
|
}
|
|
|
|
#myoffice_container .warning-pulse-box {
|
|
-webkit-animation: "warning-pulse-box" 1s ease-in-out 0 infinite alternate;
|
|
|
|
animation-name: warning-pulse-box;
|
|
animation-duration: 1s;
|
|
animation-timing-function: ease-in-out;
|
|
animation-delay: 0;
|
|
animation-iteration-count: infinite;
|
|
animation-direction: alternate;
|
|
}
|
|
|
|
@-webkit-keyframes warning-pulse-box {
|
|
0% { box-shadow: 0px 0px 5px #fbb450 inset, 0px 0px 5px #f89406; }
|
|
100% { box-shadow: 0px 0px 30px #fbb450 inset, 0px 0px 10px #f89406; }
|
|
}
|
|
|
|
@keyframes warning-pulse-box {
|
|
0% { box-shadow: 0px 0px 5px #fbb450 inset, 0px 0px 5px #f89406; }
|
|
100% { box-shadow: 0px 0px 30px #fbb450 inset, 0px 0px 10px #f89406; }
|
|
}
|