// ------------------------------------ // 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: 1px 0; margin: 0; & > li { display: inline-block; margin-right: -4px; } & h3 { margin: 0 0 10px; line-height: 1.5em; &, & input, & a { color: @fl-secondary-color; font-size: 16px; font-weight: normal; } & input { &, &[disabled], &:focus { background: none; border: 0; padding: 0 20px 0 0; height: auto; } } & .fa { font-size: 14px; } } } .composer-controls { position: absolute; right: 10px; top: 10px; z-index: 1; & li { display: inline-block; } .minimized & { top: 7px; } } .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 { position: absolute; left: 0; right: 0; } .composer-content { padding: 15px 15px 0; } .composer-controls { & li:not(:last-child) { display: none; } } .composer-avatar { display: none; } } // 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); } .composer { 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, box-shadow 0.2s"); &.active, &.full-screen { background: @fl-body-bg; } &.active:not(.full-screen) { box-shadow: 0 0 0 2px @fl-body-primary-color, 0 2px 6px @fl-shadow-color; } &.minimized { height: 50px; cursor: pointer; } &.full-screen { position: fixed; left: 0; top: 0; bottom: 0; right: 0; margin: 0; height: auto; } } .composer-controls { .full-screen & .btn { padding: 13px; & .fa { font-size: 20px; } } } .composer-header { .minimized & { pointer-events: none; } .full-screen & { margin-bottom: 20px; } } .composer-content { padding: 20px 20px 0; .minimized & { padding: 12px 20px; } .full-screen & { max-width: 900px; margin: 0 auto; padding: 30px; } } .composer-handle { height: 15px; margin-bottom: -17px; position: relative; .minimized &, .full-screen & { display: none; } } .fa-minus.minimize { vertical-align: -5px; } .composer-avatar { float: left; .avatar-size(64px); .minimized &, .full-screen & { display: none; } } .composer-body { margin-left: 90px; .minimized &, .full-screen & { margin-left: 0; } } .composer-editor { .minimized & { visibility: hidden; } .full-screen & textarea { font-size: 16px; } } } @media @desktop, @desktop-hd { .composer:not(.full-screen) { margin-left: -20px; margin-right: 180px; .index-page & { margin-left: 205px; margin-right: -20px; } } } @media @desktop-hd { .has-pane.pane-pinned .composer-container { left: @index-pane-width; } } // ------------------------------------ // Text Editor .text-editor { & textarea { border-radius: 0; padding: 0; border: 0; resize: none; color: @fl-body-color; font-size: 14px; line-height: 1.7; &, &:focus, &[disabled] { background: none; border: 0; } } } .text-editor-controls { margin: 0; padding: 15px 0; list-style-type: none; & li { display: inline-block; } } @media @tablet, @desktop, @desktop-hd { .text-editor-controls { margin: 0 -20px 0 -110px; padding: 15px 20px; border-top: 1px solid @fl-body-secondary-color; .full-screen & { margin: 0; border-top: 0; padding: 20px 0; } & .btn-primary { padding-left: 20px; padding-right: 20px; } } }