scinote-web/app/assets/stylesheets/tiny_mce.scss

197 lines
3.2 KiB
SCSS
Raw Normal View History

// scss-lint:disable ImportantRule
@import "constants";
@font-face {
font-family: "tinymce";
src: asset-url("tinymce/skins/lightgray/fonts/tinymce.woff");
}
.tinymce-view {
border: solid 1px;
border-color: $color-white;
border-radius: 3px;
float: left;
width: 100%;
&:hover {
border-color: $color-gainsboro;
cursor: pointer;
}
&:empty::before {
color: $color-silver-chalice;
content: attr(data-placeholder);
}
}
.mce-tinymce {
opacity: 0;
position: absolute !important;
&.show {
opacity: 1;
position: static !important;
}
}
.mce-container-body {
position: relative !important;
}
.tinymce-placeholder {
background: $color-concrete;
opacity: .7;
transition: .2s;
width: 100%;
}
.tinymce-save-button,
.tinymce-cancel-button {
cursor: pointer;
.fas {
font-family: "Font Awesome 5 Free";
font-weight: 900;
margin-top: 3px;
}
}
.tinymce-status-badge {
color: $color-silver-chalice;
margin-top: -20px;
}
.tinymce-placeholder-text {
color: $color-silver-chalice;
}
.mce-toolbar {
background: $color-white !important;
}
2019-09-24 15:24:16 +08:00
.restore-draft-notification {
align-items: center;
background: $state-info-bg !important;
display: flex;
height: 30px !important;
padding: 0 10px !important;
.notification-text {
flex-grow: 1;
max-width: 75%;
overflow: hidden;
text-overflow: ellipsis;
}
2019-09-24 15:24:16 +08:00
.restore-draft-btn {
border: 1px solid $color-silver-chalice;
cursor: pointer;
2019-09-24 15:24:16 +08:00
font-size: 12px;
margin-left: auto;
2019-09-24 15:24:16 +08:00
padding: 3px 10px 3px 10px;
}
.fas {
color: $color-silver-chalice;
cursor: pointer;
font-family: 'Font Awesome 5 Free';
font-weight: 501;
margin-left: 10px;
}
}
2019-04-28 22:16:31 +08:00
.mce-stack-layout {
.tinymce-active-object-handler {
border-top: 1px solid rgb(226, 228, 231);
height: 33px;
width: 100%;
.tool-button {
border: 1px solid transparent;
cursor: pointer;
display: inline-block;
line-height: 27px;
2019-04-29 01:11:41 +08:00
margin: 2px;
2019-04-28 22:16:31 +08:00
text-align: center;
width: 30px;
&:hover {
border: 1px solid rgb(226, 228, 231);
}
}
}
}
.mce-i-download::before {
content: "\F019";
font-family: "Font Awesome 5 Free";
font-weight: 900;
line-height: 16px;
position: absolute;
}
.mce-i-pencil::before {
content: "\F303";
font-family: "Font Awesome 5 Free";
font-weight: 900;
line-height: 16px;
position: absolute;
}
2019-04-28 22:16:31 +08:00
.mce-floatpanel[aria-label="Inline toolbar"] {
border: 0;
box-shadow: 0;
height: 0 !important;
opacity: 1;
z-index: 10 !important;
&::before,
&::after {
display: none;
}
.mce-container-body.mce-abs-layout {
background: $brand-primary;
position: relative;
top: -10px;
.mce-container,
.mce-widget {
background: transparent !important;
2019-04-28 22:16:31 +08:00
}
.mce-btn:hover {
border-color: transparent;
2019-04-28 22:16:31 +08:00
}
2019-05-01 00:32:59 +08:00
.mce-ico {
color: $color-white;
2019-05-01 00:32:59 +08:00
}
2019-04-28 22:16:31 +08:00
}
}
2020-03-03 22:55:17 +08:00
.mce-window {
.mce-abs-layout {
overflow: visible !important;
}
.mce-error {
padding-top: 15px;
}
.mce-primary[disabled=disabled] {
pointer-events: none;
button {
background: $color-alto;
color: $color-volcano;
}
}
}
// scss-lint:enable ImportantRule