rich_editor/assets/editor/style.css

107 lines
2.2 KiB
CSS
Raw Permalink Normal View History

2021-05-27 05:42:34 +07:00
/**
* Copyright (C) 2017 Wasabeef
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@charset "UTF-8";
html {
height: 100%;
}
body {
overflow: scroll;
display: table;
table-layout: fixed;
width: 100%;
min-height:100%;
}
#editor {
display: table-cell;
outline: 0px solid transparent;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
#editor[placeholder]:empty:not(:focus):before {
content: attr(placeholder);
opacity: .5;
}
p {
margin-top: 0;
margin-bottom: 8px;
-webkit-margin-before: 0em;
}
// Thanks to Jonathan B (https://stackoverflow.com/a/23501094) for figuring that out
sup {
vertical-align: super;
}
sub {
vertical-align: sub;
}
img {
max-width: 100%;
object-fit: contain;
}
/* change this when changing the class name of resizableImageClass in rich_text_editor.js */
img.resizable {
border: 1px solid gray;
touch-action: none;
/* This is suggested by the doc, but I'm not sure that it is required when there is no large borders around the image. */
/* This makes things *much* easier */
/* box-sizing: border-box;*/
}
.rotate90deg {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.rotate180deg {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.rotate270deg {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}