framework/ember/app/styles/flarum/composer.less
2015-03-04 09:49:26 +10:30

242 lines
4.3 KiB
Plaintext

// ------------------------------------
// Composer
.composer {
pointer-events: auto;
.box-shadow(0 2px 6px @fl-shadow-color);
}
.composer-controls {
list-style: none;
padding: 0;
margin: 0;
}
.composer-header {
list-style: none;
padding: 0;
margin: 0;
& h3 {
margin: 0 0 10px;
line-height: 1.5em;
&, & input {
color: @fl-body-muted-color;
font-size: 16px;
font-weight: normal;
}
& input {
background: none;
border: 0;
padding: 0;
height: auto;
}
}
}
.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;
}
}
// On phones, show the composer as a fixed overlay that covers the whole
// screen. The controls are hidden (except for the 'x', which is the back-
// control), and the avatar hidden.
@media @phone {
.composer-open {
overflow: hidden;
}
.composer {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: @zindex-composer;
background: @fl-body-bg;
height: 100vh !important;
padding-top: @mobile-header-height;
&:before {
content: " ";
.toolbar();
opacity: 0;
.visible& {
opacity: 1;
}
}
}
.composer-content {
padding: 15px;
}
.composer-controls {
& li:not(.back-control) {
display: none;
}
}
.composer-avatar {
display: none;
}
.composer-body {
& h3 input {
width: 100% !important;
}
}
}
// On larger screens, show the composer as a window at the bottom of the
// content area. We hide a lot of the content when the composer is minimized.
@media @tablet, @desktop, @desktop-hd {
.composer-container {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: @zindex-composer;
pointer-events: none;
.transition(left 0.2s);
.with-pane & {
left: @index-pane-width;
}
}
.composer {
margin-left: -20px;
margin-right: 180px;
border-radius: @border-radius-base @border-radius-base 0 0;
background: fade(@fl-body-bg, 95%);
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: @fl-body-bg;
}
&.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;
& li {
display: inline-block;
}
.minimized & {
top: 7px;
}
}
.fa-minus.minimize {
vertical-align: -5px;
}
.composer-avatar {
float: left;
.avatar-size(64px);
.minimized & {
display: none;
}
}
.composer-body {
margin-left: 90px;
.minimized & {
margin-left: 0;
}
}
.composer-header h3 {
margin-top: 5px;
}
.composer-editor {
.minimized & {
visibility: hidden;
}
}
}
// ------------------------------------
// Text Editor
.text-editor {
& textarea {
border-radius: 0;
padding: 0;
border: 0;
resize: none;
color: @fl-body-color;
font-size: 14px;
line-height: 1.6;
&, &:focus, &[disabled] {
background: none;
}
}
}
.text-editor-controls {
margin: 10px 0 0;
padding: 0;
list-style-type: none;
& li {
display: inline-block;
}
}
// On phones, since one of the text editor controls will probably be the
// primary-control, we shouldn't hide it completely when it's "disabled".
@media @phone {
.text-editor-controls {
opacity: 0.5;
}
}