framework/less/forum/composer.less
2015-06-01 10:29:11 +09:30

265 lines
4.7 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: 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] {
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;
}
}
.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;
}
}
}
.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;
}
}
}