467 lines
8.8 KiB
SCSS
467 lines
8.8 KiB
SCSS
/* Common styles used in screens */
|
|
@import "client/common.scss";
|
|
|
|
.screen {
|
|
display:none;
|
|
}
|
|
|
|
.screen.secondary {
|
|
border: 1px solid $ColorScreenPrimary;
|
|
background-color:$ColorScreenBackground;
|
|
|
|
.footer button {
|
|
margin:1em 0em 1em 1em;
|
|
}
|
|
|
|
.breadcrumb {
|
|
margin-bottom:3em;
|
|
}
|
|
|
|
.breadcrumb p {
|
|
float:left;
|
|
}
|
|
|
|
p {
|
|
margin: 1em;
|
|
cursor: pointer;
|
|
font-size: 120%;
|
|
line-height: 150%;
|
|
}
|
|
|
|
ul {
|
|
margin-left: 2em;
|
|
list-style: disc;
|
|
}
|
|
|
|
li {
|
|
margin-bottom:1.5em;
|
|
}
|
|
|
|
p.current {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.content,
|
|
.inner-content {
|
|
clear: both;
|
|
float: left;
|
|
height: 100%;
|
|
width: 100%;
|
|
position:relative;
|
|
}
|
|
|
|
.content-head {
|
|
height:21px;
|
|
padding:4px;
|
|
background-color:#ED3618;
|
|
|
|
.content-icon {
|
|
margin-right:10px;
|
|
float:left;
|
|
}
|
|
|
|
h1 {
|
|
margin: -3px 0px 0px 0px;
|
|
padding:0;
|
|
float:left;
|
|
font-weight:100;
|
|
font-size:24px;
|
|
}
|
|
|
|
.content-icon {
|
|
margin-right:10px;
|
|
float:left;
|
|
}
|
|
|
|
.content-nav {
|
|
float:right;
|
|
margin-right:10px;
|
|
|
|
.home-icon {
|
|
float:left;
|
|
margin-right:20px;
|
|
}
|
|
|
|
a.arrow-right {
|
|
float:left;
|
|
display:block;
|
|
margin-top:2px;
|
|
margin-right:10px;
|
|
width: 0;
|
|
height: 0;
|
|
border-top: 7px solid transparent;
|
|
border-bottom: 7px solid transparent;
|
|
border-left: 7px solid #FFF;
|
|
}
|
|
|
|
a.arrow-left {
|
|
float:left;
|
|
display:block;
|
|
margin-top:2px;
|
|
margin-right:20px;
|
|
width: 0;
|
|
height: 0;
|
|
border-top: 7px solid transparent;
|
|
border-bottom: 7px solid transparent;
|
|
border-right:7px solid #FFF;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content-scroller {
|
|
height:inherit;
|
|
position:relative;
|
|
display:block;
|
|
overflow:auto;
|
|
}
|
|
|
|
.content-wrapper {
|
|
padding: 0px 0px 0px 0px;
|
|
font-size: 15px;
|
|
color: #ccc;
|
|
border-bottom: dotted 1px #444;
|
|
}
|
|
|
|
.content-wrapper h2 {
|
|
color:#fff;
|
|
font-weight:600;
|
|
font-size:24px;
|
|
}
|
|
|
|
.buttonrow, .screen.secondary .footer {
|
|
position: absolute;
|
|
bottom:0px;
|
|
right:0px;
|
|
z-index:5;
|
|
background-color:$translucent1;
|
|
width:100%;
|
|
}
|
|
|
|
textarea {
|
|
background-color: $ColorTextBoxBackground;
|
|
border:none;
|
|
-webkit-box-shadow: inset 2px 2px 3px 0px #888;
|
|
box-shadow: inset 2px 2px 3px 0px #888;
|
|
}
|
|
|
|
|
|
|
|
/* Start of Jeff's common.css file */
|
|
body {
|
|
font-size: 14px;
|
|
font-weight: 300;
|
|
color: #FFF;
|
|
padding:3% 6%;
|
|
background-color: #262626;
|
|
position:relative;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6, p, div, table, form, img, tr, td, th {
|
|
margin:0;
|
|
border:0;
|
|
padding:0;
|
|
}
|
|
|
|
a {display:inline-block;}
|
|
a img {border:none;}
|
|
.clearall {clear:both;}
|
|
.clearleft {clear:left;}
|
|
small, .small {font-size:11px;}
|
|
.bold {font-weight:bold;}
|
|
|
|
.button-grey-toggle.selected {
|
|
background-color: #999;
|
|
text-decoration:none;
|
|
&:hover {
|
|
background-color: #999;
|
|
color:#ccc;
|
|
text-decoration:none;
|
|
}
|
|
}
|
|
|
|
.button-grey-toggle:hover {
|
|
text-decoration:none;
|
|
}
|
|
|
|
.button-grey, .button-grey-toggle {
|
|
margin:0px 8px 0px 8px;
|
|
background-color:#666;
|
|
border: solid 1px #868686;
|
|
outline:solid 2px #666;
|
|
padding:3px 10px;
|
|
font-size:12px;
|
|
font-weight:300;
|
|
cursor:pointer;
|
|
color:#ccc;
|
|
text-decoration:none;
|
|
line-height:12px;
|
|
text-align:center;
|
|
|
|
&.disabled {
|
|
background-color: transparent;
|
|
border: solid 1px #868686;
|
|
outline: solid 2px transparent;
|
|
color:#ccc;
|
|
}
|
|
|
|
&.disabled:hover {
|
|
background-color: #515151;
|
|
color:#ccc;
|
|
}
|
|
}
|
|
|
|
.button-grey:hover {
|
|
background-color:#999;
|
|
color:#FFF;
|
|
text-decoration:none;
|
|
}
|
|
|
|
.button-orange {
|
|
margin:0px 8px 0px 8px;
|
|
background-color: $ColorScreenPrimary;
|
|
border: solid 1px #F27861;
|
|
outline: solid 2px $ColorScreenPrimary;
|
|
padding:3px 10px;
|
|
font-size:12px;
|
|
font-weight:300;
|
|
cursor:pointer;
|
|
color:#FC9;
|
|
text-decoration:none;
|
|
line-height:12px;
|
|
text-align:center;
|
|
|
|
&.disabled {
|
|
background-color: transparent;
|
|
border: solid 1px #868686;
|
|
outline: solid 2px transparent;
|
|
color:#ccc;
|
|
}
|
|
|
|
&.disabled:hover {
|
|
background-color: #515151;
|
|
color:#ccc;
|
|
}
|
|
}
|
|
|
|
.smallbutton {
|
|
font-size:10px;
|
|
padding:2px 8px;
|
|
}
|
|
|
|
.button-orange:hover {
|
|
background-color:#f16750;
|
|
color:#FFF;
|
|
text-decoration:none;
|
|
}
|
|
|
|
.button-disabled {
|
|
border: none;
|
|
outline: none;
|
|
color:#EEE;
|
|
background-color:#666;
|
|
cursor:default;
|
|
}
|
|
|
|
.button-disabled:hover{
|
|
color:#EEE;
|
|
background-color:#666;
|
|
}
|
|
|
|
.f8 {font-size:8px !important}
|
|
.f9 {font-size:9px !important}
|
|
.f10 {font-size:10px !important}
|
|
.f11 {font-size:11px !important}
|
|
.f12 {font-size:12px !important}
|
|
.f13 {font-size:13px !important}
|
|
.f14 {font-size:14px !important}
|
|
.f15 {font-size:15px !important}
|
|
.f16 {font-size:16px !important}
|
|
.f17 {font-size:17px !important}
|
|
.f18 {font-size:18px !important}
|
|
.f19 {font-size:19px !important}
|
|
.f20 {font-size:20px !important}
|
|
|
|
.m0 {margin: 0 !important;}
|
|
|
|
.mr5 {margin-right:5px;}
|
|
.mr10 {margin-right:10px;}
|
|
.mr20 {margin-right:20px;}
|
|
.mr30 {margin-right:30px;}
|
|
.mr35 {margin-right:35px;}
|
|
.mr40 {margin-right:40px;}
|
|
.mr45 {margin-right:45px;}
|
|
.mr120 {margin-right:120px;}
|
|
|
|
.ml5 {margin-left:5px;}
|
|
.ml10 {margin-left:10px;}
|
|
.ml20 {margin-left:20px;}
|
|
.ml25 {margin-left:25px;}
|
|
.ml30 {margin-left:30px;}
|
|
.ml35 {margin-left:35px;}
|
|
.ml45 {margin-left:45px;}
|
|
|
|
.mt5 {margin-top:5px;}
|
|
.mt10 {margin-top:10px;}
|
|
.mt15 {margin-top:15px;}
|
|
.mt20 {margin-top:20px;}
|
|
.mt25 {margin-top:25px;}
|
|
.mt30 {margin-top:30px;}
|
|
.mt35 {margin-top:35px;}
|
|
.mt40 {margin-top:40px;}
|
|
.mt45 {margin-top:45px;}
|
|
.mt50 {margin-top:50px;}
|
|
.mt55 {margin-top:55px;}
|
|
.mt65 {margin-top:65px;}
|
|
|
|
.mt5 {margin-top:5px}
|
|
.mt10 {margin-top:10px}
|
|
.mb5 {margin-bottom:5px}
|
|
.mb10 {margin-bottom:10px}
|
|
.mb15 {margin-bottom:15px;}
|
|
|
|
.w0 {width:0% !important}
|
|
.w5 {width:5% !important}
|
|
.w10 {width:10% !important}
|
|
.w15 {width:15% !important}
|
|
.w20 {width:20% !important}
|
|
.w25 {width:25% !important}
|
|
.w30 {width:30% !important}
|
|
.w35 {width:35% !important}
|
|
.w40 {width:40% !important}
|
|
.w45 {width:45% !important}
|
|
.w50 {width:50% !important}
|
|
.w55 {width:55% !important}
|
|
.w60 {width:60% !important}
|
|
.w65 {width:65% !important}
|
|
.w70 {width:70% !important}
|
|
.w75 {width:75% !important}
|
|
.w80 {width:80% !important}
|
|
.w85 {width:85% !important}
|
|
.w90 {width:90% !important}
|
|
.w95 {width:95% !important}
|
|
.w100 {width:100% !important}
|
|
|
|
.p5 {padding:5px !important}
|
|
.p10 {padding:10px !important}
|
|
.p15 {padding:15px !important}
|
|
.p20 {padding:20px !important}
|
|
.p25 {padding:25px !important}
|
|
.p30 {padding:30px !important}
|
|
|
|
.h20 { height:20px; line-height:20px; vertical-align:middle}
|
|
.h30 { height:30px; line-height:30px; vertical-align:middle }
|
|
.h40 { height:40px; line-height:25px; vertical-align:middle }
|
|
|
|
.border-right {border-right:solid 1px #999;}
|
|
.border-left {border-left:solid 1px #999;}
|
|
.border-bottom {border-bottom:solid 1px #999;}
|
|
.border-top {border-top:solid 1px #999;}
|
|
|
|
.whitespace {white-space:normal;}
|
|
.clearall {clear:both;}
|
|
|
|
.error {
|
|
background-color:#300;
|
|
padding:5px;
|
|
border: solid 1px #900;
|
|
}
|
|
|
|
.op50 {
|
|
opacity: .5;
|
|
-ms-filter: "alpha(opacity=50)";
|
|
}
|
|
|
|
.op30 {
|
|
opacity: .3;
|
|
-ms-filter: "alpha(opacity=30)";
|
|
}
|
|
|
|
.op10 {
|
|
opacity: .1;
|
|
-ms-filter: "alpha(opacity=10)";
|
|
}
|
|
|
|
.nowrap {
|
|
display:inline-block;
|
|
white-space:nowrap;
|
|
}
|
|
|
|
.overlay {
|
|
display:none;
|
|
position:fixed;
|
|
width:100%;
|
|
height:100%;
|
|
top:0px;
|
|
left:0px;
|
|
z-index: 999;
|
|
background-image:url('/assets/shared/bkg_overlay.png');
|
|
}
|
|
|
|
.overlay-small {
|
|
width:300px;
|
|
//height:160px;
|
|
position:absolute;
|
|
left:50%;
|
|
top:20%;
|
|
background-color:#333;
|
|
border: 1px solid #ed3618;
|
|
z-index:1000;
|
|
display:none;
|
|
}
|
|
|
|
.overlay-inner {
|
|
width:250px;
|
|
//height:130px;
|
|
padding:25px;
|
|
font-size:15px;
|
|
color:#aaa;
|
|
}
|
|
|
|
.overlay-inner input[type=text], .overlay-inner input[type=password] {
|
|
padding:3px;
|
|
font-size:13px;
|
|
width:239px;
|
|
}
|
|
|
|
.overlay-video {
|
|
position:absolute;
|
|
left:50%;
|
|
top:20%;
|
|
background-color:#333;
|
|
border: 1px solid #ed3618;
|
|
z-index:1000;
|
|
display:none;
|
|
|
|
.overlay-video-inner {
|
|
padding:25px;
|
|
}
|
|
|
|
#video-dialog-close {
|
|
margin:0;
|
|
}
|
|
}
|
|
|
|
.help-launcher {
|
|
font-weight:bold;
|
|
font-size:12px;
|
|
line-height:12px;
|
|
position:absolute;
|
|
top:3px;
|
|
right:3px;
|
|
cursor:pointer;
|
|
}
|
|
.white {color:#fff;}
|
|
.lightgrey {color:#ccc;}
|
|
.grey {color:#999;}
|
|
.darkgrey {color:#333;}
|
|
.orange {color:#ED3618 !important;}
|
|
.teal {color:#2b8897;}
|
|
.green-fill {background-color:#72a43b;}
|
|
.gold-fill {background-color:#cc9900;}
|
|
.red-fill {background-color:#660000;}
|
|
.orange-fill {background-color:#ed3618;}
|
|
.teal-fill {background-color:#0b6672;}
|
|
|
|
/* End of Jeff's common.css file */
|