nodebb-theme-ricequant/modules/composer.less

NodeBB theme for ricequant.

@topbarHeight: 50px;
@bottombarHeight: 16px;
@bottombarHeightMobile: 15px;
@btnBlue: #69f;
@btnDarkBlue: #36f;
@rowPadding: 30px;
@btnGap: 10px;
@inputLineheight: 34px;
@summernote-width: 600px;
@category-list-width: 300px;

@content-lineheight: 1.5;
@content-paragram-margin: 14px;

.note-editable p {
	margin-bottom: @content-paragram-margin;
	line-height: @content-lineheight;
}

.icon-composer-pre{
	&:before {
		display: inline-block;
	    font: normal normal normal 14px "rqicon" !important;
	    font-size: inherit;
	    -webkit-font-smoothing: antialiased;
	    text-decoration: inherit;
	    text-rendering: auto;
	    text-transform: none;
	    vertical-align: middle;
	    speak: none;
	    -moz-osx-font-smoothing: grayscale;
		content: "\e6d5";
	}
}

.composer-radius{
	.border-radius(4px);
}

.res_btn{
	float: right;
    color: @btnBlue;
    border: solid 1px @btnBlue;
    background: #fff;
    margin-top: 1px;
}

.sm-composer-wrapper{
	position: fixed;
    top: 0;
	height: 0;
	left: 50%;
	margin-left: -@summernote-width / 2;
    text-align: center;
	z-index: 1032;
	&:before{
		content: '';
		display: inline-block;
		height: 100vh;
		width: 0;
		vertical-align: middle;
	}
}
.sm-composer {
	.no-select;
	display: inline-block;
	vertical-align: middle;
	text-align: initial;
	width: @summernote-width;
    padding: 0 @rowPadding;
	background: #fff;
	border: solid 1px @input-border;
	visibility: hidden;
	box-shadow: 0 0 20px 10px #ccc;
    > div{
        cursor: initial;
    }

	textarea{
		border: solid 1px @input-border;
	}

    .sm-wrapper{
        margin: 20px 0;
		.note-editable.panel-body{
			.default-select;
			height: calc( ~"100vh - 506px" );
		}

		.note-editor:not(.fullscreen){
			.note-editable.panel-body{
				min-height: 200px;
				max-height: 400px;
			}
		}
    }

	.composer-top{
        cursor: move;
        margin: 0 -@rowPadding;
		.btn{
			border: none;
			font-size: 16px;
		}
        .new-topic{
            padding: 20px 15px;
            margin: 15px 15px;
            border-bottom: solid 1px #ccc;
        }
        .btn-minimize{
            padding-top: 8px;
            padding-bottom: 4px;
        }
	}
	.bt-disabled{
		color: #ccc;
		cursor: not-allowed;
		ul{
			display: none !important;
		}

		.bk-icon:before{
			content: "\f078" !important;
		}
	}

	.bk-icon{
		float: right;
		line-height: 50px;
		position: relative;
    	top: -50px;
    	right: 30px;
	}

	.bk-icon:before{
		content: "\f078";
	}

	#notes, #algorithms, #backtests-list{
		.open{
			.bk-icon:before{
				content: "\f077";
			}
		}
	}

	.select-algorithm-name, .select-note-name, .select-backtest-name{
		white-space: nowrap;
    	display: block;
    	overflow: hidden;
    	width: 100%;
    	text-overflow: ellipsis;
    	padding: 0 50px;
	}

	.algorithm-dropdown, .backtest-dropdown, .note-dropdown{
	    overflow: hidden;
		margin: 0 -30px;
		height: 50px;
	}

	.js-share-container{
		display: none;
	}

	.composer-container {
		min-height: 50px;
		padding-left: 10px;
		padding-right: 10px;
	}

	.title-container, .category-list-container{
		margin-top: 10px;
		display: block;
		.title, .category-list{
			font-size: 14px;
			.composer-radius;
		}
	}

	.title-container {
		width: 100%;
	}

	.category-list-container{
        position: relative;
		.hidden, .category-list-hidden{
			display: none;
		}

		.category-list{
			width: @category-list-width;
			height: @inputLineheight;
			cursor: pointer;
			padding: 6px 32px 6px 12px;
			margin-right: -30px;
			font-size: 14px;
			line-height: 1.42857143;
			color: #555;
			background-color: #fff;
			background-image: none;
			border: 1px solid @input-border;
			-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
			box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
			-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
			-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
			transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
			&.warning{
				border-color: #cc0000;
				.placeholder(#cc0000);
			}
		}

		.category-list-wrapper{
			cursor: pointer;
		}

		.category-list-options{
			position: absolute;
			width: @category-list-width;
			border: solid 1px @input-border;
			z-index: 2;
			list-style-type: none;
			background-color: #fff;
			padding: 0;
			.composer-radius;
			.selected{
				background-color: rgba(111, 159, 255, 0.2);
			}
			li:hover{
				color: @btnBlue;
				cursor: pointer;
			}
			li > div{
				padding: 13px 10px;
				margin: 0 30px;
			}
			li:not(:last-child) > div{
				border-bottom: solid 1px @input-border;
				margin-bottom: -1px;
			}
		}

		.col-lg-12{
			padding: 0px;
		}
	}

	.category-tag-row {
		margin: 5px 0;

		.tags-container {
			.bootstrap-tagsinput {
				width:100%;
				margin-bottom: 0px;
				input {
					height:28px;
				}
			}
		}
	}

	.write,{
		display: block;
		width: 100%;
		height: 100%;
		margin: 0 auto;
		font-size: 14px;
		.composer-radius;
		resize:none;
		overflow: auto;
	}

	.formatting-bar {
		margin: 5px 0;
		padding: 0px 8px;
		span {
			color: #000;
		}
        .btn-primary {
            background:#69f;
            border-color:#69f;
        }
        .btn-default {
            border-color:#fff;
        }
	}

    .resizer {
        position: absolute;
        width: 100%;
        left: 0;
        top: 10px;
        cursor: move;

        .trigger {
            position: relative;
            display: block;
            height: 10px;
            width: 50px;
            top: -15px;
            margin: 0 auto;
			.pointer;

            background: #efefef;
            border: 1px solid #999;
            .border-radius(2px);

            i {
                position:relative;
                top:-8px;
                font-size: 11px;
                color: #666;
            }
		}
	}

	.imagedrop {
		position: absolute;
		top: 250px;
		text-align: center;
		font-size: 24px;
		color: #999;
		width: 100%;
		display: none;
	}

    .composer-bottom{
        margin-bottom: @bottombarHeight;
        margin-top: 15px;

        .share_res{
            line-height: @inputLineheight;
            padding: 4px 12px;
            border: solid 1px @input-border;
            color: @input-border;
			.share_tips{
				display: none;
				&.active{
					display: inline-block;
				}
			}
            .composer-radius;
            .btn-res{
                .res_btn;
            }
            .btn-backtest{
                margin-right: @btnGap;
            }
            .backtest-selected, .notebook-selected{
                button{
                    .border-radius(5px);
                    background-color: #eee;
                    span:first-of-type{
                        padding-left: 5px;
                        max-width: 80px;
                        display: inline-block;
                        vertical-align: middle;
                        .text-ellipsis;
                    }
                }
            }
        }

    .btn-group{
    margin: 1rem 0 0;
    display: block;
    .btn{
    	height: 44px;
    	width: 200px;
        float: right;
    	.composer-radius !important;
    	.btn-default{
    		margin-right: 20px;
    	}
        &:last-of-type{
            margin-right: 20px;
        }
    }
    .btn-primary{
    	background-color: @btnBlue;
    	border-color: @btnBlue;
    }

    .btn-primary:hover{
    	background-color: @btnDarkBlue;
    	border-color: @btnDarkBlue;
    	cursor: pointer;
    }
    }
    }
}

@media (max-width: 767px) {
	.composer:not(.sm-topic-composer) {
        width: 100%;
        left: 50%;
        margin-left: -50%;
		background: rgba(224, 224, 224, 1);
		.title-container, .category-list-container{
			width: auto !important;
		}

		.category-list-container{
			width: auto !important;
			.category-list{
				padding-left: 12px;
			}
		}

		.composer-bottom{
			margin-bottom: @bottombarHeightMobile;

            //disable share while on mobile devices
            .share_res{
                display: none;
            }
			// .share_bt, .share_rh{
			// 	> span{
			// 		color: @input-border;
			// 	}
			// 	button{
			// 		.res_btn;
			// 	}
			// 	.backtest-selected, .notebook-selected{
			// 		display: inline-block;
			// 		position: absolute;
			// 		left: 28px;
			// 		.btn-sm{
			// 			padding: 7px 10px;
			// 			color: @btnBlue;
			// 		}
			// 	}
			// 	.composer-radius;
			// 	color: @input-color;
			// 	margin: 0px 14px 10px;
			// 	padding: 5px 10px;
			// 	border: solid 1px @input-border;
			// 	line-height: 34px;
			// }

			.action-bar{
				margin: 0 14px;
				button{
                    width: 100px !important;
				}
				.btn-primary{
					float: right;
                    margin-right: -12px;
				}
			}
		}
	}

	.resizer {
		visibility: hidden;
	}
}