aiforge/web_src/less/openi.less

a {
  color: #0366d6;
}
.nowrap{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ui .text.yellow a {
	color: #fbbd08!important
}
.ui .text.yellow a:hover {
	color: #f2711c!important
}
.mb-1 {
	margin-bottom: 8px !important;
}
.mb-2 {
	margin-bottom: 16px !important;
}
.following.bar #navbar .brand{
	padding-left: 0;
  	padding-top: 0;
  	padding-bottom: 0;
}
.following.bar .brand .ui.mini.image {
    width: auto;
    height: 40px;
}

.following.bar.dark {
	background-color: #363840;
}
.ui.secondary.menu.dark .item{
	color: #FFF;
}
.ui.secondary.menu.dark .item:hover{
	color: #40A9FF;
}
.ui.secondary.menu .active.item{
	color: #40A9FF;
	border-bottom: 1px solid #40A9FF;
	border-radius: 0;
}

.repository:not(.new), .organization:not(.new), .explore, .dashboard {
    padding-top: 0px;
}
.dashboard .dashboard-navbar, .organization .organization-header, .explore .repos--seach{
	padding-top:15px;
	padding-bottom: 15px;
	padding-left: 0;
	margin-bottom: 20px;
	background-color:#f5f5f6 !important;
	border-bottom: 1px solid rgba(34,36,38,.15);
}
.following.bar .text .svg.octicon-triangle-down {
    color: #3291F8;
}
.ui .avatar.image {
    border-radius: 30px;
}
footer {
    background-color: #f5f5f6;
	padding-bottom: 1.0rem;
}

.repository .header-wrapper {
    background-color: #f5f5f6;
    margin-top: 0px;
}

/*moble*/
.ui.menu:not(.vertical) .item>.button {
    color: #FFF;
	box-shadow: 0 0 0 1px rgba(255,255,255,.35) inset;
}
/*PC*/
@media only screen and (min-width: 1200px){
.following.bar #navbar, footer .container {
	padding: 0;
}
}

/*start page*/
.ui.header.section--header{
    font-size: 50px;
    font-weight: 300;
    text-align: center;
    margin-bottom: 1.0em;
}
.ui.header.section--header .sub.header {
    font-size: 20px;
    line-height: 30px;
    color: #9b9b9b;
    text-align: center;
	color: rgba(255,255,255,.6);
}
.ui.inverted.segment>.ui.header.section--header .sub.header{
	color: rgba(255,255,255,.6);
}

#index-project {
    background: #002060;
    color: #FFF;
    position: relative;
    padding-top: 3.0em;
	padding-bottom:2.0em
}
#index-project .ui.inverted.segment, #index-project .ui.primary.inverted.segment{
	background:none;
}
.prorow{
	background: rgba(0,27,81,0.8);
}

.flip{
	position:absolute;
	left:6px;
	right:6px;
	top:6px;
	bottom:6px;
	border:2px solid #ffc000;
	border-radius: 12px;
	transition: transform 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
	transform: perspective(800px) rotateY(0deg);
	transform-style: preserve-3d;
	z-index:5;
}
.flip-more{ border-color:#4472c4}
.flip-blue{ border-color:#00b0f0}
.flip-green{ border-color:#00b050}
#index-project .ipros:hover .flip{transform: perspective(800px) rotateY(180deg);}

#index-project .ui.card{
	margin:0 auto;
	background:none;
	border:none;
	box-shadow:none;
}
#index-project .ui.card>.image>img{
	width:auto;
	margin:10px auto;
}
#index-project .ui.card>.content, #index-project.ui.cards>.card>.content{
	padding: 0.5em 0.2em;
}
.ui.inverted.segment .ui.card>.content>.header, .ui.inverted.segment .ui.cards>.card>.content>.header{
	color: rgba(255,255,255,.9);
}
.ui.inverted.segment .ui.card .meta, .ui.inverted.segment .ui.cards>.card .meta{
    color: #5b9bd5;
}
.ui.inverted.segment .ui.card>.extra, .ui.inverted.segment .ui.cards>.card>.extra {
	color: rgba(255,255,255,.4);
}

#particles{ width: 100%; height:100%; position: absolute; top:0; left:0; right:0; bottom:0;}

footer .ui.vertical.text.menu:first-child{ margin-top: 1em}
footer .ui.vertical.menu .header.item{ background:none}
footer .column{margin-bottom:0!important; padding-bottom:0!important;}
/*explore*/
.explore .ui.secondary.vertical.pointing.menu,
.explore .ui.secondary.vertical.pointing.menu .item,
.organization .ui.secondary.vertical.pointing.menu,
.organization .ui.secondary.vertical.pointing.menu .item{
	border-right-width: 0;
}
.explore .computer.only .ui.secondary.pointing.menu .item{
	padding-left:0;
}
.ui.repository.list .item .ui.header .metas{
	text-align: right;
}
@media only screen and (max-width:767.98px){
	.explore .repository.list .ui.right.menu{
		float: none;
	}
}

/*organization*/
.organization-info{
	padding-top:15px;
	margin-bottom:2.5rem;
}
.organization-info > .container{
	overflow: auto;
    background: url(/img/org_bg.png) no-repeat center center #f5f5f6;
    padding-top: 30px;
	padding-bottom:20px;
    background-size: cover;
	border-radius: 5px;
    border: 1px solid #efefef;
}
.organization.profile #org-info .ui.header{
	font-size: 1.71428571rem;
    margin-bottom: 10px;
	font-weight: 400;
}
.organization.profile #org-avatar {
    width: 80px;
    height: 80px;
	margin-left: auto;
    margin-right: auto;
    margin-bottom: 15px;
    border: solid 5px #FFF;
}
.organization.profile #org-info .desc {
    font-size: 14px;
    width: 80%;
    margin: 0 auto 10px;
    color: #FFF;
}
.organization.teams .ui.attached.segment+.ui.attached.header{ margin-top:0}
@media only screen and (max-width:768px){
.organization-info{
	padding-top:0;
}
.organization-info > .container{
	margin-left:0!important;
	margin-right:0!important;
}
}
.ui.vertical.menu .dropdown.item .menu {
	left: 50%;
}

// icon cloudbrain 
.i-round{display:inline-block;width:18px;height:18px;background:url("/img/icons.svg");background-position: -496px -52px;}
.i-bg-organ{background-position: -496px -52px;}
.STOPPED, .KILLED{display:inline-block;width:18px;height:18px;background:url("/img/icons.svg");background-position: -496px -52px;background-position: -459px -52px;}
.RUNNING{display:inline-block;width:18px;height:18px;background:url("/img/icons.svg");background-position: -496px -52px;background-position: -478px -52px;}
.i-bg-orange{background-position: -495px -51px;}
.FAILED,.START_FAILED{display:inline-block;width:18px;height:18px;background:url("/img/icons.svg");background-position: -496px -52px;background-position: -532px -52px;}
.i-bg-green{background-position: -441px -52px;}
.i-bg-used{background-position: -514px -52px;}
.icon-bind{background-position: -550px -52px;}
.icon-unbind{background-position: -568px -52px;}
.CREATING, .STOPPING, .DELETING, .STARTING, i.WAITING ,.INIT,.KILLING{display:inline-block;background-image:url('/img/loading.gif');background-repeat:no-repeat;width:16px;height:16px;background-size:16px 16px;margin-right:5px;}

i.COMPLETED,i.SUCCEEDED{display:inline-block;width:18px;height:18px;background:url("/img/icons.svg");background-position: -496px -52px;background-position: -441px -52px;}
.text_over{
	overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    width: 100%;
}
.git-user-content{
	margin-bottom: 16px;
    word-break: break-all;
}
.row.git-user-content .ui.avatar.s16.image {
    width: 50px !important;
    height: 50px !important;
    vertical-align: middle;
	border-radius: 500rem;}
.user-list-item {
	padding: 0.3em 0px !important;
	margin: 15px 0 !important;
    width: 220px !important;
}
.row.git-user-content .content {
    margin-left: 6px;
    display: inline-block;
    vertical-align: top !important;
	overflow: hidden;
}
.row.git-user-content .content .header {
    font-weight: bold;
}
.item.user-list-item .header {
    line-height: 23px !important;
    font-size: 16px !important;
    text-overflow: ellipsis;
    overflow: hidden;
	width: 145px;
	
   white-space:nowrap;
   
}
.item.user-list-item .header a {
    color: #587284 !important;
}
.row.git-user-content .content .commit-btn {
    margin-top: 6px;
    float: left;
	font-size: 11px;
	color: #40485b !important;
}

.dropdown-menu {
	position: relative;
	display: inline-block;
	
}
.hover_active{
	height: 100% !important;
	margin-top: 1px !important;
}
.dropdown-menu:hover .dropdown-content {
display: block;
}
.dropdown-menu:hover .hover_active {
	background: #fff !important;
	border-color: #d4d4d5 !important;
    font-weight: 700 !important;
    // margin-bottom: -1px;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
	border-radius: .28571429rem .28571429rem 0 0!important;
	color: rgba(0,0,0,.95) !important;
    border-top-width: 1px !important;
    
}

.dropdown-menu:hover .dropdown-content {
	display: block;
}
.dropdown-content{
	display: none;
	position: absolute;
	background-color: #ffffff;
	min-width: 180px;
	z-index: 999;
	border: 1px solid transparent; 
	border-color: #d4d4d5;
	border-top: none;

}
.dropdown-content a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.cloudbrain-question{
	margin-left: 4px !important;
	color: #3291F8;
	
}
//缺省页
.bgtask-none{
	background: #fff !important;
	border: 0 !important;
	box-shadow: none !important;
	padding-bottom: 0 !important;
	padding-top: 2em !important;
	
}
.bgtask-header-pic {
	height: 80px;
	text-align: center;
	background: url(//ai-studio-static-online.cdn.bcebos.com/aistudio/dist/1638363279337/images/search_empty.png) top no-repeat;
	background-size: 80px 80px;
}

.bgtask-content{
	margin: 2rem auto 0;
	/* width: 500px; */
	text-align: left;
}
.bgtask-content-txt {
	font-size: 14px;
	color: #a6a6a6;
	line-height: 22px;
	margin-bottom: 4px;
}
.bgtask-content-header {
	text-align: center;
	color: #3F3F40;
	font-size: 18px;
	margin-bottom: 1rem;
}

.selectcloudbrain .active.item{
	color: #0087f5 !important;
	border: 1px solid #0087f5;
	margin: -1px;
	background: #FFF !important;
}
#deletemodel {
	width: 100%;
	height: 100%;
}
/* 弹窗 */

#mask {
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	filter: alpha(opacity=60);
	background-color: #777;
	z-index: 1000;
	display: none;
	opacity: 0.8;
	-moz-opacity: 0.5;
	padding-top: 100px;
	color: #000000
}

#loadingPage {
	margin: 200px auto;
	width: 50px;
	height: 40px;
	text-align: center;
	font-size: 10px;
	display: block;
}

#loadingPage>div {
	background-color: green;
	height: 100%;
	width: 6px;
	display: inline-block;
	-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
	animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

#loadingPage .rect2 {
	-webkit-animation-delay: -1.1s;
	animation-delay: -1.1s;
}

#loadingPage .rect3 {
	-webkit-animation-delay: -1.0s;
	animation-delay: -1.0s;
}

#loadingPage .rect4 {
	-webkit-animation-delay: -0.9s;
	animation-delay: -0.9s;
}

#loadingPage .rect5 {
	-webkit-animation-delay: -0.8s;
	animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
	0%,
	40%,
	100% {
		-webkit-transform: scaleY(0.4)
	}
	20% {
		-webkit-transform: scaleY(1.0)
	}
}

@keyframes sk-stretchdelay {
	0%,
	40%,
	100% {
		transform: scaleY(0.4);
		-webkit-transform: scaleY(0.4);
	}
	20% {
		transform: scaleY(1.0);
		-webkit-transform: scaleY(1.0);
	}
}
/* 消息框 */

.alert {
	display: none;
	position: fixed;
	width: 100%;
	z-index: 1001;
	padding: 15px;
	border: 1px solid transparent;
	border-radius: 4px;
	text-align: center;
	font-weight: bold;
}

.alert-success {
	color: #3c763d;
	background-color: #dff0d8;
	border-color: #d6e9c6;
}

.alert-info {
	color: #31708f;
	background-color: #d9edf7;
	border-color: #bce8f1;
}

.alert-warning {
	color: #8a6d3b;
	background-color: #fcf8e3;
	border-color: #faebcc;
}

.alert-danger {
	color: #a94442;
	background-color: #f2dede;
	border-color: #ebccd1;
}

.pusher {
	width: calc(100% - 260px);
	box-sizing: border-box;
}
/* 弹窗 (background)  */

#imageModal {
	display: none;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0, 0, 0);
	background-color: rgba(0, 0, 0, 0.4);
}
/* 弹窗内容 */

.modal-content {
	background-color: #fefefe;
	margin: 15% auto;
	padding: 20px;
	border: 1px solid #888;
	width: 30%;
}
/* 关闭按钮 */

.close {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
}

.close:hover,
.close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}

.dis {
	margin-bottom: 20px;
}

.disabled {
	cursor: pointer;
	pointer-events: none;
}
.left2{
	margin-left: -2px !important;
}
.width70{
    width: 70% !important;
}
.width83{
    width: 83% !important;
}
.content-padding{
    padding: 40px !important;
}
.model_disabled{
    background-color: rgba(245, 245, 246, 100) !important;
    color: rgba(136, 136, 136, 100) !important;
}
.edge{
	margin-left:0 !important;
	margin-right: 0 !important;
	padding-left:0 !important;
	padding-right:0 !important;
  }
.lfpd {
	padding-left:0 !important;
	padding-right: 0 !important;
}
.mglf{
	margin-left:0.5em !important;
}
.tooltips{
	display: inline-block;
    margin-left: 5.5rem;
    font-size: 12px;
    margin-top: 0.7rem;
    color: #888888;
}
.tutorial_icon{
	vertical-align: middle;
	margin-right: 0.75em;
}
.notic_content{
	height: 50px;
	vertical-align: middle;
	text-align: center;
	line-height: 50px;
	background: #E5F4F4
}
.x_icon{
	float: right!important;
	margin-right: 15px !important;
	color: rgb(0,0,0) !important;
    font-size: 20px !important;
    font-weight: bold !important;
}
.a_width{
	// width: 50% !important;
	margin-left: 20em;
	// display:inline-block !important;
}
.a_width i{
	vertical-align:middle!important;
}
.footer_icon{
	display: inline-block !important;
	vertical-align: middle !important;
	margin-right:0.8em !important;
}
.a_margin{
	margin: 0px !important;
}

/*pages*/
.ui.borderless.pagination {border:none}
.ui.pagination.menu .item {
    min-width: 32px;
    text-align: center;
    height: 32px;
    border-radius: .28571429rem;
    margin: 0 5px;
    background-color: #F2F2F2;
}
.ui.pagination.menu>.item:first-child, .ui.pagination.menu .item:last-child {
    background-color: #FFF !important;
}
.ui.ui.menu .item.disabled{
    background-color: #F2F2F2;
}
.ui.pagination.menu .active.item {
    background-color: #3291F8;
    color: #FFF;
}
.ui.pagination.menu .item>.input {
    margin: 0em .5em;
    width: 3em;
    height: 32px;
}
@media only screen and (max-width: 767px) {
	.following.bar #navbar .brand{
		padding-top: 6px;
	}
    .secondary.menu + .ui.container{
        margin-left:0 !important;
        margin-right:0 !important;
    }
	.repo-title{
		position: absolute;
		top: 6px;
		left: 50px;
		right: 70px;
		height: 40px;
		line-height: 40px !important;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #FFF;
		background-color: #363840;
		padding-left: 20px;
	}
	.repo-title a{
		color: #FFF !important;
	}
	.repo-title img + a{
	    display: none !important;
	}
	.repository .header-wrapper{
		margin-bottom: 36px;
	}
	.header-wrapper .tabs.divider{
		margin-top: 40px !important;
	}
	.repository .ui.tabs.container{
		margin-top: -60px;
	}
	
	.repo-title .divider, 
	.repo-title svg, 
	.repo-title img, 	
	.ui.tabular.menu .item svg, 
	.ui.tabular.menu .item i, 
	.ui.tabular.menu .item .label,
	.ui.tabular.menu .dropdown-content,
	.repository.file .repository-summary,
	.repository-summary + .menu,
	.desc-home .edit-icon,
	#repo-files-table .message,
    #repo-files-table .age,
    #repo-files-table .ui.sha.label,
    #repo-files-table .commit-button,
    .members
	{
		display: none !important;
	}
	.header-wrapper{
		display: flex;
  		flex-direction: column-reverse; 
	}
	.ui.tabular.menu .item{
		padding: .5em;
	}
	.ui.tabular.menu .active.item{
		border: none;
		background: none;
		color: #000000;
		border-bottom: 2px solid #000;
		white-space: nowrap;
	}
	.repository .repo-header{
		margin-bottom: -50px;
	}
	.repo-header .repo-buttons{
		position: relative;
		top: 1rem;
		width: 100%;
		display: flex;
    	justify-content: flex-end;
	}
	.repo-buttons .ui.labeled.button>.button{
		box-shadow: none !important;
		width: 16px;
		overflow: hidden;
		white-space: nowrap;
	}
	.repo-buttons .ui.labeled.button>.label{
		border: none !important;
	}
	.repository.file.list #repo-files-table td.name{
        max-width: 100%;
    }
    #repo-files-table tr{
        padding-top: 0;
        padding-bottom: 0;
    }
    .ui.attached:not(.message)+.ui.attached.segment:not(.top){
        border: none;
    }
    .markdown:not(code).file-view{
        padding: 2em 0!important;
    }
}
//elemet-ui

.el-pagination.is-background .el-pager li:not(.disabled).active {
	background-color: #5bb973 !important; 
	color: #FFF !important;
  }
  .el-pagination.is-background .el-pager li:hover {
	color: #5bb973 !important;
  }

.tag_key{
	max-width:100%;
	margin: 3px 3px;
	display:inline-flex;
}
.tag_lable{
	border: 1px solid rgba(232, 232, 232, 100) ;
	border-radius: 4px;
	color: rgba(65, 80, 88, 100);
	font-family: Microsoft Yahei;
	font-size: 14px;
	padding: 0.3em 0.5em;
	height: 30px;
	text-align: center;
	margin: 0.2em;
}
.omit{
	overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.tag_bg{
	background-color: #0366D6 !important;
	color:#FFFFFF !important;
}
.margin-bottom20{
	margin-bottom: 20px;
}
.maxheight{
	max-height: 88px;
	overflow: hidden;
}
.pad-botom{
	padding-bottom:0px !important;
}
.icon_a{
	position: absolute;
	right: 0;
	bottom: .2em;
	background: #FFF;
	border: none !important;
	color: #0366d6 !important;
	box-shadow: -15px 0px 10px #fff;
}

/**seach**/
/**搜索导航条适配窄屏**/
.seachnav{
	overflow-x: auto;   
	overflow-y: hidden;  
	scrollbar-width: none; /* firefox */
	-ms-overflow-style: none; /* IE 10+ */
  }
  .seachnav::-webkit-scrollbar {
	display: none; /* Chrome Safari */
  }
  .ui.green.button, .ui.green.buttons .button{
	  background-color: #5BB973;
  }
  .seach .repos--seach{
	padding-bottom: 0;
	border-bottom: none;
  }
  .seach .ui.secondary.pointing.menu{
	border-bottom: none;
  }
  .seach .ui.secondary.pointing.menu .item > i{
	margin-right: 5px;
  }
  .seach .ui.secondary.pointing.menu .active.item{
	border-bottom-width: 2px;
	margin: 0 0 -1px;
  }
  .seach .ui.menu .active.item>.label {
	background: #1684FC;
	color: #FFF;
  }
  .seach .ui.menu .item>.label:not(.active.item>.label) {
	background: #e8e8e8;
	color: rgba(0,0,0,.6);
  }
  
  .highlight{
	color: red;
  }
  .ui.list .list>.item>img.image+.content, .ui.list>.item>img.image+.content {
	width: calc(100% - 3.0em);
	margin-left: 0;
  }
  
  .seach .ui.list .list>.item .header, .seach .ui.list>.item .header{
	margin-bottom: 0.5em;
	font-size: 1.4rem !important;
	font-weight: normal;
  }
  .seach .time, .seach .time a{
	font-size: 12px;
	color: grey;
  }
  
  .seach .list .item.members .ui.avatar.image {
	width: 3.2em;
	height: 3.2em;
  }
  .ui.list .list>.item.members>img.image+.content, .ui.list>.item.members>img.image+.content {
	width: calc(100% - 4.0em);
	margin-left: 0;
  }

  .searchlabel{
	color: rgba(16, 16, 16, 100);
	font-size: 24px;
	text-align: left;
	font-family: SourceHanSansSC-medium;
  }


  #tipmsg {
    position: relative;
    top: 50px;
    left: 50%;
    display: none;
    z-index: 9999;
}