228 lines
3.4 KiB
SCSS
228 lines
3.4 KiB
SCSS
#dashboard {
|
|
.menubar {
|
|
.period-select {
|
|
float: right;
|
|
min-width: 350px;
|
|
position: relative;
|
|
top: -3px;
|
|
|
|
.input-group {
|
|
width: 150px;
|
|
float: left;
|
|
|
|
.input-group-addon {
|
|
background: #F0F4F8;
|
|
}
|
|
|
|
i {
|
|
font-size: 14px;
|
|
color: #577FC7;
|
|
position: relative;
|
|
top: 1px;
|
|
}
|
|
|
|
input[type="text"] {
|
|
height: 31px;
|
|
line-height: 18px;
|
|
font-size: 14px;
|
|
color: #777;
|
|
}
|
|
}
|
|
|
|
p {
|
|
position: relative;
|
|
top: 4px;
|
|
margin: 0 12px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.metrics {
|
|
margin-top: 30px;
|
|
font-family: $helvetica;
|
|
border: 1px solid #000;
|
|
box-shadow: inset 0 1px rgba(255, 255, 255, 0.3);
|
|
background-color: #363e4a;
|
|
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #303d4f), color-stop(100%, #435266)),#686e78;
|
|
background: -webkit-linear-gradient(#303d4f,#435266),#686e78;
|
|
background: -moz-linear-gradient(#303d4f,#435266),#686e78;
|
|
background: -o-linear-gradient(#303d4f,#435266),#686e78;
|
|
background: linear-gradient(#303d4f,#435266),#686e78;
|
|
border-radius: 5px;
|
|
|
|
.metric {
|
|
float: left;
|
|
width: 25%;
|
|
|
|
padding: 23px 0;
|
|
text-align: center;
|
|
border-right: 1px solid #526075;
|
|
|
|
@media(max-width: $maxSmall) {
|
|
width: 50%;
|
|
}
|
|
|
|
.field {
|
|
color: #f4f4f4;
|
|
margin-bottom: 9px;
|
|
display: inline-block;
|
|
font-size: 14px;
|
|
|
|
@media (max-width: $maxMedium) {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
.data {
|
|
display: block;
|
|
color: #fff;
|
|
font-size: 27px;
|
|
text-shadow: 1px 1px #000;
|
|
|
|
@media (max-width: $maxMedium) {
|
|
font-size: 21px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.chart {
|
|
margin: 40px 0 70px;
|
|
background: #fff;
|
|
|
|
border: 1px solid #DFE3EB;
|
|
padding: 25px 25px;
|
|
border-radius: 5px;
|
|
box-shadow: inset 0 1px 0 #ededed;
|
|
|
|
h3 {
|
|
font-size: 18px;
|
|
margin-bottom: 25px;
|
|
font-weight: 600;
|
|
margin-top: 0px;
|
|
|
|
.total {
|
|
font-size: 14px;
|
|
position: relative;
|
|
top: 6px;
|
|
left: -8px;
|
|
color: #2D96BE;
|
|
|
|
.change {
|
|
display: inline-block;
|
|
border-radius: 3px;
|
|
padding: 2px 5px;
|
|
margin-left: 7px;
|
|
font-size: 13px;
|
|
|
|
&.up {
|
|
color: #3fb83f;
|
|
|
|
i {
|
|
color: #3fb83f;
|
|
}
|
|
}
|
|
|
|
&.down {
|
|
color: #CC4C4C;
|
|
|
|
i {
|
|
color: #CC4C4C;
|
|
}
|
|
}
|
|
|
|
i {
|
|
font-size: 11px;
|
|
position: relative;
|
|
top: -1px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#visitors-chart {
|
|
height: 230px;
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
.charts-half {
|
|
margin-top: 50px;
|
|
|
|
.chart {
|
|
width: 48%;
|
|
margin-top: 0;
|
|
|
|
@media (max-width: $maxMedium) {
|
|
width: 100%;
|
|
}
|
|
|
|
#payments-chart {
|
|
height: 200px;
|
|
position: relative;
|
|
}
|
|
|
|
#signups-chart {
|
|
height: 200px;
|
|
position: relative;
|
|
}
|
|
}
|
|
}
|
|
|
|
.barchart {
|
|
margin-bottom: 70px;
|
|
|
|
h3 {
|
|
font-size: 18px;
|
|
margin-bottom: 25px;
|
|
font-weight: 600;
|
|
margin-top: 0;
|
|
}
|
|
|
|
#bar-chart {
|
|
height: 200px;
|
|
width: 99%;
|
|
padding-right: 10px !important;
|
|
}
|
|
}
|
|
|
|
.referrals {
|
|
padding-left: 15px;
|
|
|
|
h3 {
|
|
font-size: 18px;
|
|
margin-bottom: 25px;
|
|
font-weight: 600;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.referral {
|
|
span {
|
|
color: #444;
|
|
|
|
.data {
|
|
font-weight: 600;
|
|
margin-right: 5px;
|
|
border-right: 1px solid #e0e0e0;
|
|
padding-right: 7px;
|
|
}
|
|
}
|
|
|
|
.progress {
|
|
margin-top: 5px;
|
|
height: 4px;
|
|
background: #f0f0f0;
|
|
box-shadow: none;
|
|
|
|
.progress-bar {
|
|
background: #a5d15f;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|