Updated profile-selector

This commit is contained in:
chrono
2013-12-05 19:53:18 +01:00
parent 89cb41df1b
commit 780ef151de
5 changed files with 388 additions and 105 deletions
+29
View File
@@ -0,0 +1,29 @@
/*!
* Bootstrap Modal
*
* Copyright Jordan Schroter
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Boostrap 3 patch for for bootstrap-modal. Include BEFORE bootstrap-modal.css!
*/
body.modal-open,
.modal-open .navbar-fixed-top,
.modal-open .navbar-fixed-bottom {
margin-right: 0;
}
.modal {
left: 50%;
bottom: auto;
right: auto;
padding: 0;
width: 500px;
margin-left: -250px;
background-clip: padding-box;
}
.modal.container {
max-width: none;
}
+214
View File
@@ -0,0 +1,214 @@
/*!
* Bootstrap Modal
*
* Copyright Jordan Schroter
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
*/
.modal-open {
overflow: hidden;
}
/* add a scroll bar to stop page from jerking around */
.modal-open.page-overflow .page-container,
.modal-open.page-overflow .page-container .navbar-fixed-top,
.modal-open.page-overflow .page-container .navbar-fixed-bottom,
.modal-open.page-overflow .modal-scrollable {
overflow-y: scroll;
}
@media (max-width: 979px) {
.modal-open.page-overflow .page-container .navbar-fixed-top,
.modal-open.page-overflow .page-container .navbar-fixed-bottom {
overflow-y: visible;
}
}
.modal-scrollable {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
}
.modal {
outline: none;
position: absolute;
margin-top: 0;
top: 50%;
overflow: visible; /* allow content to popup out (i.e tooltips) */
}
.modal.fade {
top: -100%;
-webkit-transition: opacity 0.3s linear, top 0.3s ease-out, bottom 0.3s ease-out, margin-top 0.3s ease-out;
-moz-transition: opacity 0.3s linear, top 0.3s ease-out, bottom 0.3s ease-out, margin-top 0.3s ease-out;
-o-transition: opacity 0.3s linear, top 0.3s ease-out, bottom 0.3s ease-out, margin-top 0.3s ease-out;
transition: opacity 0.3s linear, top 0.3s ease-out, bottom 0.3s ease-out, margin-top 0.3s ease-out;
}
.modal.fade.in {
top: 50%;
}
.modal-body {
max-height: none;
overflow: visible;
}
.modal.modal-absolute {
position: absolute;
z-index: 950;
}
.modal .loading-mask {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #fff;
border-radius: 6px;
}
.modal-backdrop.modal-absolute{
position: absolute;
z-index: 940;
}
.modal-backdrop,
.modal-backdrop.fade.in{
opacity: 0.7;
filter: alpha(opacity=70);
background: #3F3E3A;
}
.modal.container {
width: 940px;
margin-left: -470px;
}
/* Modal Overflow */
.modal-overflow.modal {
top: 1%;
}
.modal-overflow.modal.fade {
top: -100%;
}
.modal-overflow.modal.fade.in {
top: 1%;
}
.modal-overflow .modal-body {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
/* Responsive */
@media (min-width: 1200px) {
.modal.container {
width: 1170px;
margin-left: -585px;
}
}
@media (max-width: 979px) {
.modal,
.modal.container,
.modal.modal-overflow {
top: 1%;
right: 1%;
left: 1%;
bottom: auto;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
}
.modal.fade.in,
.modal.container.fade.in,
.modal.modal-overflow.fade.in {
top: 1%;
bottom: auto;
}
.modal-body,
.modal-overflow .modal-body {
position: static;
margin: 0;
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
.modal-footer,
.modal-overflow .modal-footer {
position: static;
}
}
.loading-spinner {
position: absolute;
top: 50%;
left: 50%;
margin: -12px 0 0 -12px;
}
/*
Animate.css - http://daneden.me/animate
Licensed under the ☺ license (http://licence.visualidiot.com/)
Copyright (c) 2012 Dan Eden*/
.animated {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes shake {
0%, 100% {-webkit-transform: translateX(0);}
10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
}
@-moz-keyframes shake {
0%, 100% {-moz-transform: translateX(0);}
10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);}
20%, 40%, 60%, 80% {-moz-transform: translateX(10px);}
}
@-o-keyframes shake {
0%, 100% {-o-transform: translateX(0);}
10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);}
20%, 40%, 60%, 80% {-o-transform: translateX(10px);}
}
@keyframes shake {
0%, 100% {transform: translateX(0);}
10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
20%, 40%, 60%, 80% {transform: translateX(10px);}
}
.shake {
-webkit-animation-name: shake;
-moz-animation-name: shake;
-o-animation-name: shake;
animation-name: shake;
}
+116 -90
View File
@@ -1,101 +1,127 @@
@font-face{
font-family: "LCDN";
src: url('/picoreflow/assets/fonts/LCDN.eot');
src: local("LCD Normal"),
url('/picoreflow/assets/fonts/LCDN.woff') format("woff"),
url('/picoreflow/assets/fonts/LCDN.ttf') format("truetype");
font-family: "LCDN";
src: url('/picoreflow/assets/fonts/LCDN.eot');
src: local("LCD Normal"),
url('/picoreflow/assets/fonts/LCDN.woff') format("woff"),
url('/picoreflow/assets/fonts/LCDN.ttf') format("truetype");
}
@font-face{
font-family: "NoticeStd";
src: url('/picoreflow/assets/fonts/noticestd-webfont.eot');
src: local("NoticeStd Regular"),
url('/picoreflow/assets/fonts/noticestd-webfont.woff') format("woff"),
url('/picoreflow/assets/fonts/noticestd-webfont.ttf') format("truetype");
font-family: "NoticeStd";
src: url('/picoreflow/assets/fonts/noticestd-webfont.eot');
src: local("NoticeStd Regular"),
url('/picoreflow/assets/fonts/noticestd-webfont.woff') format("woff"),
url('/picoreflow/assets/fonts/noticestd-webfont.ttf') format("truetype");
}
body {
background: #b9b6af;
background: #b9b6af;
}
.display {
display: inline-block;
text-align: right;
padding-right: 10px;
font-size: 20px;
height: 35px;
line-height: 35px;
width: 80px;
vertical-align: middle;
color: #d8d3c5;
font-weight: normal;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #1F1E1A;
-moz-box-shadow: 0 0 1.1em 0 rgba(0,0,0,0.75),inset 0 0 9px 2px #000;
-webkit-box-shadow: 0 0 1.5em 0 rgba(0,0,0,0.75),inset 0 0 9px 2px #000;
box-shadow: 0 0 1.1em 0 rgba(0,0,0,0.75),inset 0 0 9px 2px #000;
border-color: #000000;
display: inline-block;
text-align: right;
padding-right: 10px;
font-size: 20px;
height: 35px;
line-height: 35px;
width: 80px;
vertical-align: middle;
color: #d8d3c5;
font-weight: normal;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #1F1E1A;
-moz-box-shadow: 0 0 1.1em 0 rgba(0,0,0,0.75),inset 0 0 9px 2px #000;
-webkit-box-shadow: 0 0 1.5em 0 rgba(0,0,0,0.75),inset 0 0 9px 2px #000;
box-shadow: 0 0 1.1em 0 rgba(0,0,0,0.75),inset 0 0 9px 2px #000;
border-color: #000000;
}
.ds-num {
font-family: "LCDN";
line-height: 38px;
font-family: "LCDN";
line-height: 38px;
}
.ds-led {
font-family: "NoticeStd";
font-size: 28px;
font-weight: 400;
text-align: center;
color: #1F1E1A;
padding-right: 1px;
font-family: "NoticeStd";
font-size: 28px;
font-weight: 400;
text-align: center;
color: #1F1E1A;
padding-right: 1px;
}
#main_status {
margin-top: 15px;
color: #d8d3c5;
font-weight: normal;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
background: #3F3E3A url('/picoreflow/assets/images/panel_bg.png') repeat;
-moz-box-shadow: 0 0 1.1em 0 rgba(0,0,0,0.35),inset 0 0 9px 2px #000;
-webkit-box-shadow: 0 0 1.5em 0 rgba(0,0,0,0.35),inset 0 0 9px 2px #000;
box-shadow: 0 0 1.1em 0 rgba(0,0,0,0.35),inset 0 0 9px 2px #000;
border-color: #282828;
height: 97px;
margin-top: 15px;
color: #d8d3c5;
font-weight: normal;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
background: #3F3E3A url('/picoreflow/assets/images/panel_bg.png') repeat;
-moz-box-shadow: 0 0 1.1em 0 rgba(0,0,0,0.35),inset 0 0 9px 2px #000;
-webkit-box-shadow: 0 0 1.5em 0 rgba(0,0,0,0.35),inset 0 0 9px 2px #000;
box-shadow: 0 0 1.1em 0 rgba(0,0,0,0.35),inset 0 0 9px 2px #000;
border-color: #282828;
height: 97px;
}
.panel-default {
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
-moz-box-shadow: 0 0 1.1em 0 rgba(0,0,0,0.55);
-webkit-box-shadow: 0 0 1.5em 0 rgba(0,0,0,0.55);
box-shadow: 0 0 1.1em 0 rgba(0,0,0,0.55);
margin-top: 15px;
background: #3F3E3A;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
-moz-box-shadow: 0 0 1.1em 0 rgba(0,0,0,0.55);
-webkit-box-shadow: 0 0 1.5em 0 rgba(0,0,0,0.55);
box-shadow: 0 0 1.1em 0 rgba(0,0,0,0.55);
margin-top: 15px;
background: #3F3E3A;
}
.panel-heading {
background: #fafafa url('/picoreflow/assets/images/page_bg.png') repeat-x;
background: #fafafa url('/picoreflow/assets/images/page_bg.png') repeat-x;
overflow: hidden;
padding: 10px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
#profile_selector {
border: 1px solid rgb(194, 194, 194);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: rgb(229,229,229);
background: -moz-linear-gradient(top, rgba(229,229,229,1) 0%, rgba(255,255,255,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(229,229,229,1)), color-stop(100%,rgba(255,255,255,1)));
background: -webkit-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,1) 100%);
background: -o-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,1) 100%);
background: linear-gradient(to bottom, rgba(229,229,229,1) 0%,rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#ffffff',GradientType=0 );
padding: 5px;
padding-bottom: 3px;
padding-top: 3px;
-moz-box-shadow: 0 0 1.1em 0 rgba(0,0,0,0.05),inset 0 0 9px 2px #000;
-webkit-box-shadow: 0 0 1.5em 0 rgba(0,0,0,0.05),inset 0 0 0 0 #000;
box-shadow: 0 0 1.1em 0 rgba(0,0,0,0.05),inset 0 0 0 0 #000;
}
.select2-container {
position: relative;
top: -3px;
width: 195px;
width: 190px;
height: 34px;
}
.select2-container .select2-choice {
line-height: 32px;
line-height: 32px;
}
.progress {
@@ -117,14 +143,14 @@ line-height: 32px;
}
.btn-success {
background: rgb(164,179,87);
background: -moz-linear-gradient(top, rgba(164,179,87,1) 0%, rgba(117,137,12,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(164,179,87,1)), color-stop(100%,rgba(117,137,12,1)));
background: -webkit-linear-gradient(top, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%);
background: -o-linear-gradient(top, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%);
background: -ms-linear-gradient(top, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%);
background: linear-gradient(to bottom, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4b357', endColorstr='#75890c',GradientType=0 );
background: rgb(164,179,87);
background: -moz-linear-gradient(top, rgba(164,179,87,1) 0%, rgba(117,137,12,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(164,179,87,1)), color-stop(100%,rgba(117,137,12,1)));
background: -webkit-linear-gradient(top, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%);
background: -o-linear-gradient(top, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%);
background: -ms-linear-gradient(top, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%);
background: linear-gradient(to bottom, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4b357', endColorstr='#75890c',GradientType=0 );
background-color: #75890c;
}
@@ -162,36 +188,36 @@ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4b357', end
}
.alert-success {
background: rgb(164,179,87);
background: -moz-linear-gradient(top, rgba(164,179,87,1) 0%, rgba(117,137,12,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(164,179,87,1)), color-stop(100%,rgba(117,137,12,1)));
background: -webkit-linear-gradient(top, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%);
background: -o-linear-gradient(top, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%);
background: -ms-linear-gradient(top, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%);
background: linear-gradient(to bottom, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4b357', endColorstr='#75890c',GradientType=0 );
background: rgb(164,179,87);
background: -moz-linear-gradient(top, rgba(164,179,87,1) 0%, rgba(117,137,12,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(164,179,87,1)), color-stop(100%,rgba(117,137,12,1)));
background: -webkit-linear-gradient(top, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%);
background: -o-linear-gradient(top, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%);
background: -ms-linear-gradient(top, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%);
background: linear-gradient(to bottom, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4b357', endColorstr='#75890c',GradientType=0 );
color: #fff;
}
.alert-error {
background: rgb(206,57,20);
background: -moz-linear-gradient(top, rgba(206,57,20,1) 0%, rgba(163,38,0,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(206,57,20,1)), color-stop(100%,rgba(163,38,0,1)));
background: -webkit-linear-gradient(top, rgba(206,57,20,1) 0%,rgba(163,38,0,1) 100%);
background: -o-linear-gradient(top, rgba(206,57,20,1) 0%,rgba(163,38,0,1) 100%);
background: -ms-linear-gradient(top, rgba(206,57,20,1) 0%,rgba(163,38,0,1) 100%);
background: linear-gradient(to bottom, rgba(206,57,20,1) 0%,rgba(163,38,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ce3914', endColorstr='#a32600',GradientType=0 );
background: rgb(206,57,20);
background: -moz-linear-gradient(top, rgba(206,57,20,1) 0%, rgba(163,38,0,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(206,57,20,1)), color-stop(100%,rgba(163,38,0,1)));
background: -webkit-linear-gradient(top, rgba(206,57,20,1) 0%,rgba(163,38,0,1) 100%);
background: -o-linear-gradient(top, rgba(206,57,20,1) 0%,rgba(163,38,0,1) 100%);
background: -ms-linear-gradient(top, rgba(206,57,20,1) 0%,rgba(163,38,0,1) 100%);
background: linear-gradient(to bottom, rgba(206,57,20,1) 0%,rgba(163,38,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ce3914', endColorstr='#a32600',GradientType=0 );
color: #fff;
}
.graph {
width: 100%;
height: 300px;
font-size: 14px;
line-height: 1.2em;
width: 100%;
height: 300px;
font-size: 14px;
line-height: 1.2em;
}
td {
width: 50%;
width: 50%;
}