@import "@core/scss/theme/config.scss";

.editor-top-menu {
	display: flex;
	flex-direction: column;
	height: 100%;
	.editor-rainbow {
		height: 4px;
		background-color: #c1392b;
		overflow: hidden;
	}
	.editor-colors {
		width: 174px;
		height: 4px;
		background-color: #333;
		box-shadow: 116px 0 0 #333, 290px 0 0 #9b58b5, 464px 0 0 #51abee, 638px 0 0 #62cb31, 812px 0 0 #ffb402, 986px 0 0 #ea9243, 1160px 0 0 #e77e22, 1334px 0 0 #f44336, 1508px 0 0 #c1392b;
	}
	.editor-top-content{
		display: flex;
		flex-grow: 1;
	}
	.editor-top-content-left{
		display: flex;
		align-items: center;
	}
	.editor-top-content-main{
		flex-grow: 1;
	}
	.editor-top-content-right{
		display: flex;
		align-items: center;
		.icon-setting{
			width: 25px;
			height: 25px;
			cursor: pointer;
			margin-right: 20px;
			background: url(//img11.360buyimg.com/imagetools/jfs/t1/50628/34/22422/3221/63e33865Fa91aab52/474b91b15a807ace.png) no-repeat 0 0/25px 25px;
			&:hover{
				background: url(//img14.360buyimg.com/imagetools/jfs/t1/129607/1/28114/3560/63e35235F5e400775/29dee6b9e8968d78.png) no-repeat 0 0/25px 25px;
			}
		}
	}
	.editor-name{
		padding-left: 20px;
		font-size: 22px;
		font-weight: bold;
	}
 }
 
 .editor-sub-button{
	user-select: none;
    display: inline-block;
    height: 33px;
    line-height: 33px;
    text-align: center;
    color: #000;
    background-color: #fff;
    border: 1px solid #999;
    border-radius: 2px;
    font-size: 14px;
    cursor: pointer;
    padding: 0 20px;
    max-width: auto;
    margin-right: 20px;
    color: #333;
	&:hover{
		color: #d22;
		background-color: #fff;
		border: 1px solid #d22;
	}
 }