3_global.scss

@import 'color_theme';

$auditSize: 333px;

#rightEverything{
	transition: width 3s;
	min-width: 765px;
}

.rightEverythingOpened{
	width: calc(100% - $auditSize);
	left: $auditSize;
	position: absolute;
}

#leftEverything{
	display: none;
	width: $auditSize;
	left: 0%;
	position: fixed;
	height: 100%;
}

/*Main Layout*/
#navPanel{
	height:60px;
	line-height: 60px;
	width:100%;
	background: $acc_color3;
	font-size: 15px;
	color: $acc_color1-5;
}

#mainPanel{
	color: $main_color;
	min-height: 750px;
}

#contentPanel {
	min-height:500px;
	position: relative;
	margin:35px 50px auto;
}

#footerPanel{
	position: fixed;
	bottom: 0;
	width:100%;
	background: $acc_color1;
	border-top: 1px $acc_color2 solid;
	height: 40px;
	padding-bottom: 20px;
}



#logo{
	display:inline-block;
	font-weight: 600;
	position: relative;
	z-index:4;
	font-size: 24px;
}
#logoIcon{
	display:inline-block;
	vertical-align: middle;
	height: 25px;
	margin-right: 15px;
	margin-left: 15px;
}
.panel{
	margin-top:20px;
}
#notificationsWrap{
	position: absolute;
	top: 60px;
	width: 100%;
	right: 0;
	background:$hi_color2;
	z-index: 2;
	text-align: center;
	padding-bottom:2px;
}
#noticeScrollWrap{
	display: none;
	height: 78px;
	overflow-y: auto;
}
.notificationWrap{
	width: 97%;
	background: $acc_color2;
	margin: 0 auto;
	padding: 5px;
	border-radius: 2px;
	border-left: 5px $hi_color3 solid;	//success color
	color: $acc_color3;
	font-size: 14px;
	display: inline-block;
	text-align: left;
	margin-top:2px;
}
#notificationHandle{
	background: $hi_color2;
	width: 100px;
	display:inline-block;
	height: 15px;
	border-bottom-right-radius: 3px;
	border-bottom-left-radius: 3px; 
	text-align: center;
	position: absolute;
	bottom: -15px;
	margin-left:-50px;
}
#notificationHandle:hover{
	cursor: pointer;
}
.closeNotification{
	float: right;
	margin-right: 5px;
	cursor: pointer;
	color: $acc_color3;
}
#tips{
	font-size: 13px;
	margin-bottom: 35px;
}
.closeNotification:hover{
	color: $hi_color1;
}
.notificationIcon{
	margin: 0 10px;
	color: $hi_color3;					//success color
}
.warningNotice{
	border-left: 5px $hi_color1 solid;	//warning color
}
.warningNotice .notificationIcon{
	color: $hi_color1;					//warning color
}
#emptyNotifications{
	color: $acc_color1-5;
	margin-top: 30px;
}
.noticeTime{
	font-size: 11px;
}


// --------- Home ---------
.marblesWrap{
	display: inline-block;
	min-width: 235px;
	text-align: left;
	color: $main_color;
	margin-bottom: 15px;
	position: relative;
	min-height: 158px;
	border-radius: 3px;
	margin-left: 10px;
	margin-right: 10px;
	vertical-align: top;
	background: $acc_color1-5;
}
.innerMarbleWrap{
	min-height:100px;
	padding-right: 10px;
}
.legend{
	display:absolute;
	z-index: 1;
	font-size:30px;
	padding-top: 10px;
}
.legend {
	padding-left: 10px;
	padding-right: 10px;
	margin: 0;
}
.companyPanel{
	background: $acc_color2;
	padding: 0;
	border-radius: 3px;
	margin-bottom: 5px;
	color: $main_color;
}
.floatRight{
	float: right;
}
.ownerWrap{
	padding: 20px;
}
.companyNameWrap{
	border-bottom: 1px $acc_color1-5 solid;
	padding: 16px;
}
.companyName{
	margin-left: 10px;
	font-weight: 700;
}
#toolbarWrap{
	margin: 0; 
	text-align:left;
	position: relative;
	height: 100px;
}
.smallMarble{
	height: 40px;
	width: 40px;
}
.ball{
	display:inline-block;
	border:2px transparent solid;
	padding:0;
	vertical-align: bottom;
	border-radius: 1000px;
}
.ball:hover{
	cursor: pointer;
	border-color: $main_color;
}

.whitebg.ball:hover{
	border-color: $hi_color2;
}

#description{
	margin-left: 20px;
	position: absolute;
	width: 100%;
	text-align: center;
	bottom: 10px;
}
#trashbin{
	text-align: center;
	padding: 5px 50px;
	border: 1px $acc_color2 dashed;
	border-radius:3px;
	vertical-align: top;
	position: absolute;
	right: 0px;
	bottom: 15px;
	min-height: 90px;
	line-height: 90px;
}

#trashbin .ball{
	vertical-align: middle;
}
.bottomAlign{
	position: absolute;
	bottom: 5px;

}
#trashText{
	vertical-align: top;
	display: inline-block;
	margin-left: 10px;
	color: $main_color;
	font-weight: 100;
	font-size: 12px;
}
.marblesFix{
	padding: 2px;
	font-size: 12px;
	float:right;
}
.marblesWrap.marblesFixed .legend .marblesFix{
	transform: rotate(45deg);
	color: $hi_color2;
}
.marblesFix:hover, .marblesOpenSection:hover{
	color: $hi_color1;
	cursor: pointer;
}

.notAdminControl{
	background: $acc_color1-5;
}
.noMarblesMsg{
	text-align: center;
	position: absolute;
	top: 85px;
	left: 40%;
}

// --------- Create ---------
.addMarble{
	line-height: 75px;
	margin-left: 10px;
	font-size: 20px;
	vertical-align: bottom;
	border: 1px dashed $acc_color2;
	border-radius: 100%;
	text-align: center;
}
.addMarble:hover{
	cursor: pointer;
	border-color: $main_color;
	transition: all .25s linear;
}
.addMarble, .ball{
	margin: 5px 0 5px 8px;
}
.addMarble, .largeMarble{
	height: 75px;
	width: 75px;
	line-height: 75px;
}
.createball{
	display: inline-block;
	font-size:275px;
	color: transparent;
	border: 2px dashed $main_color;
	border-radius: 200px;
	width: 250px;
	height: 250px;
	vertical-align: middle;
}
#createform{
	display: inline-block;
	margin-top: 40px;
	margin-left: 15px;
	vertical-align: middle;
}
.createLegend{
	width:45px;
	display: inline-block;
}
#innerWrap{
	margin: auto;
	text-align: center;
	margin-top: 20px;
}
#createPanel{
	position: fixed;
	top: 75px;
	background: #343d48;
	z-index: 1005;
	padding: 40px 60px;
	left: 50%;
	margin-left: -265px;
	width: 410px;
}
#tint{
	display:none;
	background: #000;
	opacity: .85;
	position: fixed;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	z-index: 1001;
}

// --------- common ---------
.hint{
	font-size:12px;
	font-weight:bold;
	color:$acc_color2;
}
#footerWrap{
	height: 235px;
	background: $acc_color1;
	color: $acc_color2;
	width:100%;
	border-top:25px $acc_color1 solid;
}
.myCompany{
	background: #545658;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}


// --------- marble colors ---------
.white{color:#FFFEF3;}
.black{color:#1C2026;}
.red{color:#F15847;}
.green{color:#68B369;}
.blue{color:#3D76BA;}
.purple{color:#634FA1;}
.pink{color:#CC5AA2;}
.orange{color:#ED8F30;}
.yellow{color:#DAC94E;}

.whitebg{background:#FFFEF3;}
.blackbg{background:#1C2026}
.redbg{background:#F15847}
.greenbg{background:#68B369}
.bluebg{background:#3D76BA}
.purplebg{background:#634FA1}
.pinkbg{background:#CC5AA2}
.orangebg{background:#ED8F30}
.yellowbg{background:#DAC94E}


.colorSelectWrap{
	text-align: left;
	margin: 5px;
	display: inline-block;
}
.colorInput{
	width:105px;
	border: 1px solid $acc_color2;
	border-radius: 5px;
	padding: 5px;
	font-size: 13px;
}
.colorOptionsWrap{
	display:none;
	position:absolute;
	background: $acc_color1;
	padding: 10px 0;
	width:105px;
	border-radius: 10px;
	text-align: left;
	margin-top:1px;
	z-index:4;
}
.colorOption{
	width: 85px;
	display:block;
	padding: 10px;
	text-align: center;
	cursor: pointer;
}
.colorOption:hover{
	background: $acc_color0;
}
.colorValue{
	margin-left:10px;
}

#loginPanel{
	width: 400px;
	margin: auto;
	border: 1px $acc_color2 solid;
	border-radius: 5px;
	padding: 20px;
	text-align: center;
}

#triangle{
	border: 10px solid $acc_color3;
	border-top-color: transparent;
	border-left-color: transparent;
	border-right-color: transparent;
	width: 0;
	left: 45%;
	position: absolute;
	top: -20px;
}


//------------ Login ------------//
#welcomePanel{
	text-align: center;
	max-width: 610px;
	margin: auto;
	margin-top: 80px;
	margin-bottom: 100px;
	font-size: 13px;
}
#split1x3Wrap{
	margin-top: 100px;
}
.split1x3{
	display: inline-block;
	padding:0;
	margin: 0;
	width: 25%;
	margin-right: 8%;
	vertical-align: top;
}
.welcomeTitle{
	font-weight: 600;
	font-size: 15px;
}
#loginCompany{
	color:$hi_color1; 
	text-align:center;
}
#adminText{
	font-size: 15px;
	margin-top: 15px;
	margin-bottom: 35px;
	font-weight: 700;
}
.blub1x3{
	display:inline-block;
	height: 28px;
	margin-bottom: 20px;
}
.welcomeImg{
	height: 75px;
}

$marble_top: 15px;
$marble_left: 0;
#proposeMarbleStable, #proposeMarble, #endorseMarbleStable, #endorseMarble, #marbleBorderTop, #marbleBorderBottom, #marbleBorderLeft, #marbleBorderRight, .ordererMarbles{
	border: 3px solid #3D76BA;
	height: 40px;
	width: 40px;
	position: relative;
	position: absolute;
	top: $marble_top;
	left: $marble_left;
	background: transparent;
	margin:0;
	padding: 0;
	color: #3D76BA;
	line-height: 40px;
	font-size: 16px;
}
#marbleBorderTop, #proposeMarble, #endorseMarbleStable, #endorseMarble, #marbleBorderBottom, #marbleBorderLeft, #marbleBorderRight{
	display: none;
}
#proposeMarbleStable.hideBorders{
	border-color: transparent;
}

#proposeMarbleStable, #proposeMarble, #endorseMarbleStable, #endorseMarble{
	background: #fff;
}

.marbleWrap{
	height: 40px;
	width: 40px;
	position: absolute;
	display: inline-block;
	text-align: center;
	margin-left: -26px;
	margin-top:30px;
}

#marbleBorderTop{
	color: transparent;
	border-left-color: transparent;
	border-bottom-color: transparent;
	border-right-color: transparent;
	top: $marble_top - 50px;
}

#marbleBorderBottom{
	color: transparent;
	border-left-color: transparent;
	border-top-color: transparent;
	border-right-color: transparent;
	top: $marble_top + 50px;
}

#marbleBorderLeft{
	color: transparent;
	border-bottom-color: transparent;
	border-top-color: transparent;
	border-right-color: transparent;
	left: $marble_left - 50px;
}

#marbleBorderRight{
	color: transparent;
	border-left-color: transparent;
	border-top-color: transparent;
	border-bottom-color: transparent;
	left:$marble_left + 50px;
}


#endorseMarbleStable span{
	display:none;
}
#orderBoxStable, #orderBox, #commitBoxStable{
	display: none;
	height: 135px;
	line-height: 140px;
	width: 152px;
	background: transparent;
	border: 2px #fff solid;
	border-radius: 6px;
	font-size: 35px;
	text-align: center;
	margin: auto;
	position: relative;
}
#orderBox{
	position: absolute;
	top: -2px;
	left: -2px;
	font-size: 22px;
}
#orderBoxStable{
	line-height: 74px;
	border: 2px #fff transparent;
}
#boxId{
	position: absolute;
	bottom: 18px;
	width: 100%;
	text-align: center;
}
.hideMe{
	display: none;
}
.ordererMarbles {
	background: #fff;
	margin-right:2%;
	position: relative;
	display: inline-block;
}
.ordererMarbles:first-of-type {
	background: #ff8100;
}
.ordererMarbles:last-of-type{
	background: #ec0000;
}
#orderBox, #commitBoxStable{
	background: #018fe0;
	border-color: transparent;
}


//-- start up panel -- //
#startUpPanel, #txStoryPanel, #settingsPanel{
	display: none;
	position: fixed;
	top: 60px;
	background: #343d48;
	border: 1px #646b73 solid;
	z-index: 1005;
	padding: 30px;
	width: 90%;
	left: 1%;
	min-width: 720px;
}
#startUpPanel, #settingsPanel{
	position: absolute;
	top: 0;
}
.stepWrap{
	display: inline-block;
	width: 25%;
	text-align: center;
	vertical-align: top;
	line-height: 16px;
}
.stepNext{
	display: inline-block;
	width:10%;
	vertical-align: top;
	margin-top: 100px;
}
.stepHeader{
	font-weight: 600;
	margin-top: 10px;
	height: 32px;
}
.stepCircleStatus, .txStatus{
	margin-top: 35px;
	height: 20px;
	width: 20px;
	display: inline-block;
	background: $main_color;
	border-radius: 100px;
}
.stepDescription{
	font-size: 13px;
	text-align: left;
	height: 115px;
}
.stepEdit{
	font-size: 12px;
	padding-bottom: 20px;
}
.inactiveStep{
	opacity: 0.3;
}
.stepLoadingWrap{
	height: 40px;
	margin-top: 10px;
}
.inactiveStep .stepLoadingWrap .stepLoading, .stepComplete .stepLoadingWrap .stepLoading, .stepFailed .stepLoadingWrap .stepLoading{
	display: none;
}
.stepComplete .stepCircleStatus, .stepComplete .txStatus{
	background: #6CC284;
}
.stepFailed .stepCircleStatus, .stepFailed .txStatus{
	background: #ed8f30;
}
.stepHelpWrap{
	display: none;
	text-align: center;
	border-top: 2px #ccc solid;
	margin-top: 15px;
	padding-top: 15px;
}
.stepHelpTxt {
	font-size: 13px;
	line-height: 16px;
}
.stepInputLegend{
	display: inline-block;
	text-align: right;
	width: 115px;
	font-size: 13px;
	margin-right: 5px;
}
#closeStartUp, #closeTxStoryPos, #closeSettings, #closeCreate{
	position: absolute;
	right: 15px;
	top: 15px;
}
#closeStartUp:hover, #closeTxStoryPos:hover, #closeSettings:hover, #closeCreate:hover{
	color: $hi_color1;
	cursor: pointer;
}
#appStartingText{
	text-align: center;
	font-size: 24px;
	color: #e5ebef;
	margin: 30px 0;
}


// ----------- tx story ---------------
.txStepWrap{
	display: inline-block;
	width: 20%;
	text-align: center;
	vertical-align: top;
	margin: 0 2.5%;
}
.txLegend{
	font-size: 20px;
	font-weight: 700;
}
.txStoryWrap{
	height: 150px;
	margin: 10px 0;
	position: relative;
}
.txDescription{
	font-size: 13.5px;
	line-height: 20px;
	text-align: center;
}
.txStatus{
	height: 15px;
	width: 15px;
	margin-top: 0;
	margin-bottom: 20px;
}
#txStoryErrorWrap{
	display: none;
	text-align: center;
	width: 700px;
	margin: auto;
	margin-top: 30px;
	font-size: 14px;

	color: $main_bg;
	background: $main_color;
	padding: 10px;
	border-radius: 10px;
}
#txStoryErrorTxt{
	margin-left: 15px;
}


// ------------ Settings Panel ----------//
.settingsWrap{
	margin-bottom: 50px;
}
.storyOn{
	color: $hi_color3;
	font-weight: 700;
}
#construction{
	color: #d740fd;
	margin-left: 10px;
	font-size: 16px;
}


// ----------- IE 10 +
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	#notificationHandle{
		width: 100%;
		margin: 0;
	}
	#noticeScrollWrap{
		height: 64px
	}
	#notificationsWrap{
		padding: 0;
	}

	#txStep1 .txStoryWrap, #txStep2 .txStoryWrap{
		width: 40px;
		margin: auto;
	}
	.marbleWrap{
		margin-left: 0;
	}

	#orderBoxStable, #orderBox, #commitBoxStable{
		height: 122px;
		line-height: 122px;
	}
	#orderBoxStable{
		line-height: 66px;
	}
}

// --------- Login/Logout ---------
#whoAmI{
	position: absolute;
	right:20px;
	z-index:3;
	top:0;
	color: $acc_color1;
	cursor: pointer;
	font-size: 13px;
	transition: background-color 0.3s ease;
	padding: 0 15px;
}
#userIcon{
	background:$acc_color2;
	padding:8px;
	border-radius:20px;
	width:20px;
	text-align: center;
	color: $acc_color3;
	margin-right:10px;
	font-size:20px;
}
#userSelect{
	display:none;
	position: absolute;
	top: 72px;
	right: -10px;
	z-index:2;
	color: $acc_color2;
	background: $acc_color3;
	border-radius: 10px;
	width: 140px;
	text-align: center;
	font-size: 11px;
	font-weight: bold;
}
.userLine{
	line-height: 40px;
	height: 40px;
	cursor:pointer;
	color: $acc_color1-5; 
	font-weight: 100;
}

.invalid{
	opacity: 0.3;
}


@keyframes bounce {
	from {
		transform: scale3d(1, 1, 1);
	}

	30% {
		transform: scale3d(1.15, 0.80, 1);
	}

	40% {
		transform: scale3d(0.75, 1.25, 1);
	}

	50% {
		transform: scale3d(1.15, 0.85, 1);
	}

	65% {
		transform: scale3d(.95, 1.05, 1);
	}

	75% {
		transform: scale3d(1.05, .95, 1);
	}

	to {
		transform: scale3d(1, 1, 1);
	}
}

.bounce {
	animation-name: bounce;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}