framework/ember/app/styles/flarum/composer.less

154 lines
2.4 KiB
Plaintext
Raw Normal View History

// ------------------------------------
// Composer
.composer-container {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: @zindex-navbar-fixed;
pointer-events: none;
.transition(left 0.2s);
.with-pane & {
left: @index-pane-width;
}
}
.composer {
pointer-events: auto;
margin-left: -20px;
margin-right: 180px;
.box-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
border-radius: @border-radius-base @border-radius-base 0 0;
background: rgba(255, 255, 255, 0.9);
transform: translateZ(0); // Fix for Chrome bug where a transparent white background is actually gray
position: relative;
height: 300px;
.transition(~"background 0.2s");
.index-index & {
margin-left: 205px;
margin-right: -20px;
}
&.active, &.fullscreen {
background: #fff;
}
&.minimized {
height: 50px;
cursor: pointer;
}
&.fullscreen {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: 0;
height: auto;
}
}
.composer-content {
padding: 20px 20px 15px;
.minimized & {
padding: 10px 20px;
}
.fullscreen & {
max-width: 900px;
margin: 0 auto;
padding: 30px;
}
}
.composer-handle {
height: 20px;
margin-bottom: -20px;
position: relative;
.minimized &, .fullscreen & {
display: none;
}
}
.composer-controls {
position: absolute;
right: 10px;
top: 10px;
list-style-type: none;
padding: 0;
margin: 0;
& li {
display: inline-block;
}
}
.btn-minimize .fa {
vertical-align: -5px;
}
.composer-avatar {
float: left;
.avatar-size(64px);
.minimized & {
display: none;
}
}
.composer-body {
margin-left: 90px;
& h3 {
margin: 5px 0 10px;
color: @fl-body-muted-color;
font-size: 16px;
font-weight: normal;
}
.minimized & {
margin-left: 0;
}
}
.composer-editor {
.minimized & {
visibility: hidden;
}
}
.text-editor {
& textarea {
background: none;
border-radius: 0;
padding: 0;
border: 0;
resize: none;
color: @fl-body-color;
font-size: 14px;
line-height: 1.6;
&:focus {
background: none;
}
}
}
.text-editor-controls {
margin: 10px 0 0;
padding: 0;
list-style-type: none;
& li {
display: inline-block;
}
}
.composer-loading {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.9);
opacity: 0;
pointer-events: none;
border-radius: @border-radius-base @border-radius-base 0 0;
.transition(opacity 0.2s);
&.active {
opacity: 1;
pointer-events: auto;
}
}