mirror of
https://github.com/flarum/framework.git
synced 2024-12-02 06:53:47 +08:00
c13dfa2228
This is to be used for formatting buttons and the like. Although it is displayed in the controls area at the moment, it is conceptually different and may be relocated to the top of the text editor in the future.
375 lines
6.7 KiB
Plaintext
375 lines
6.7 KiB
Plaintext
// ------------------------------------
|
|
// Composer
|
|
|
|
.Composer {
|
|
pointer-events: auto;
|
|
.box-shadow(0 2px 6px @shadow-color);
|
|
|
|
&.minimized {
|
|
height: 46px;
|
|
cursor: pointer;
|
|
background: @control-bg;
|
|
}
|
|
}
|
|
.Composer-controls {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
.ComposerBody-content {
|
|
.minimized & {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
.ComposerBody-header {
|
|
list-style: none;
|
|
padding: 1px 0;
|
|
margin: 0 0 10px;
|
|
|
|
.minimized & {
|
|
pointer-events: none;
|
|
}
|
|
|
|
> li {
|
|
display: inline-block;
|
|
margin-right: -4px;
|
|
}
|
|
h3 {
|
|
margin: 0;
|
|
line-height: 1.5em;
|
|
color: @secondary-color;
|
|
|
|
&, input, a {
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
}
|
|
input, a {
|
|
color: inherit;
|
|
}
|
|
input {
|
|
font-size: 16px;
|
|
width: 500px;
|
|
|
|
&, &[disabled], &:focus {
|
|
background: none;
|
|
border: 0;
|
|
padding: 0 20px 0 0;
|
|
height: auto;
|
|
}
|
|
}
|
|
.icon {
|
|
font-size: 14px;
|
|
margin-right: 3px;
|
|
}
|
|
}
|
|
}
|
|
.fa-minus.minimize {
|
|
vertical-align: -5px;
|
|
}
|
|
.Composer-controls {
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 10px;
|
|
z-index: 1;
|
|
|
|
& li {
|
|
display: inline-block;
|
|
}
|
|
.minimized & {
|
|
top: 7px;
|
|
}
|
|
}
|
|
.ComposerBody-loading {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: fade(@body-bg, 90%);
|
|
display: none;
|
|
border-radius: @border-radius @border-radius 0 0;
|
|
|
|
&.active {
|
|
display: block;
|
|
}
|
|
}
|
|
.ComposerBody-editor {
|
|
.minimized & {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
// 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: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: @zindex-composer;
|
|
background: @body-bg;
|
|
|
|
&:not(.minimized) {
|
|
position: absolute;
|
|
top: 0;
|
|
height: 350px !important;
|
|
padding-top: @header-height-phone;
|
|
|
|
&:before {
|
|
content: " ";
|
|
.header-background();
|
|
position: absolute;
|
|
opacity: 0;
|
|
|
|
.visible& {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
& .Composer-controls {
|
|
position: static;
|
|
z-index: @zindex-header + 1;
|
|
|
|
li:not(.App-backControl) {
|
|
display: none;
|
|
}
|
|
.App-backControl {
|
|
position: absolute !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.Composer-controls .fa-minus:before {
|
|
content: @fa-var-times;
|
|
}
|
|
.composer-backdrop {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: @zindex-composer - 1;
|
|
background-color: @overlay-bg;
|
|
opacity: 0.9;
|
|
}
|
|
.ComposerBody-content {
|
|
.minimized & {
|
|
margin-right: 50px;
|
|
}
|
|
}
|
|
.ComposerBody-avatar {
|
|
display: none;
|
|
}
|
|
.ComposerBody-header {
|
|
margin-bottom: 0;
|
|
|
|
> li {
|
|
display: block;
|
|
border-bottom: 1px solid @control-bg;
|
|
padding: 10px 15px;
|
|
|
|
.minimized & {
|
|
border-bottom: 0;
|
|
padding: 15px;
|
|
}
|
|
|
|
.normal &:first-child {
|
|
margin: -@header-height-phone 50px 0;
|
|
text-align: center;
|
|
position: relative;
|
|
z-index: @zindex-header + 1;
|
|
border: 0;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
|
|
h3 {
|
|
color: @header-control-color;
|
|
}
|
|
}
|
|
}
|
|
h3 input {
|
|
width: 100% !important;
|
|
}
|
|
}
|
|
.ComposerBody-editor {
|
|
padding: 15px;
|
|
}
|
|
.ComposerBody-editor .TextEditor-controls .item-submit {
|
|
position: absolute !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-up {
|
|
.App-composer {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: @zindex-composer;
|
|
pointer-events: none;
|
|
.transition(left 0.2s);
|
|
}
|
|
.Composer {
|
|
border-radius: @border-radius @border-radius 0 0;
|
|
background: fade(@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, &.fullScreen {
|
|
background: @body-bg;
|
|
}
|
|
&.active:not(.fullScreen) {
|
|
.box-shadow(~"0 0 0 2px @{primary-color}, 0 2px 6px @{shadow-color}");
|
|
}
|
|
&.fullScreen {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
margin: 0;
|
|
height: auto;
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
.Composer-controls {
|
|
.fullScreen & .Button {
|
|
padding: 13px;
|
|
width: auto;
|
|
|
|
.Button-icon {
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
}
|
|
.ComposerBody-header {
|
|
.fullScreen & {
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
.Composer-content {
|
|
padding: 20px 20px 0;
|
|
|
|
.minimized & {
|
|
padding: 12px 20px;
|
|
}
|
|
.fullScreen & {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
padding: 30px;
|
|
}
|
|
}
|
|
.Composer-handle {
|
|
height: 15px;
|
|
margin-bottom: -17px;
|
|
position: relative;
|
|
|
|
.minimized &, .fullScreen & {
|
|
display: none;
|
|
}
|
|
}
|
|
.ComposerBody-avatar {
|
|
float: left;
|
|
.Avatar--size(64px);
|
|
|
|
.minimized &, .fullScreen & {
|
|
display: none;
|
|
}
|
|
}
|
|
.ComposerBody-content {
|
|
margin-left: 85px;
|
|
|
|
.minimized &, .fullScreen & {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
.ComposerBody-editor {
|
|
.fullScreen & textarea {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
.ComposerBody--discussion .ComposerBody-header .item-title {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media @desktop-up {
|
|
.Composer:not(.fullScreen) {
|
|
margin-left: 220px;
|
|
margin-right: -20px;
|
|
|
|
.App--discussion & {
|
|
margin-left: -20px;
|
|
margin-right: 205px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media @desktop-hd {
|
|
.hasPane.panePinned .App-composer {
|
|
left: @pane-width;
|
|
}
|
|
}
|
|
|
|
// ------------------------------------
|
|
// Text Editor
|
|
|
|
.TextEditor textarea {
|
|
border-radius: 0;
|
|
padding: 0 0 10px;
|
|
border: 0;
|
|
resize: none;
|
|
color: @text-color;
|
|
font-size: 14px;
|
|
line-height: 1.7;
|
|
|
|
&, &:focus, &[disabled] {
|
|
background: none;
|
|
border: 0;
|
|
}
|
|
|
|
@media @phone {
|
|
font-size: 16px; // minimum font-size required to prevent page zoom on focus in iOS 10
|
|
}
|
|
}
|
|
.TextEditor-controls {
|
|
margin: 0;
|
|
padding: 10px 0;
|
|
list-style-type: none;
|
|
overflow-x: auto;
|
|
white-space: nowrap;
|
|
|
|
li {
|
|
display: inline-block;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
.TextEditor-toolbar {
|
|
.Button--icon {
|
|
width: 28px;
|
|
}
|
|
}
|
|
|
|
@media @tablet-up {
|
|
.TextEditor-controls {
|
|
margin: 0 -20px 0 -105px;
|
|
padding: 10px 20px;
|
|
border-top: 1px solid @control-bg;
|
|
|
|
.fullScreen & {
|
|
margin: 0;
|
|
border-top: 0;
|
|
padding: 20px 0;
|
|
}
|
|
}
|
|
}
|