scratch – Rev
?pathlinks?
/**
* Trumbowyg v2.5.1 - A lightweight WYSIWYG editor
* Default stylesheet for Trumbowyg editor
* ------------------------
* @link http://alex-d.github.io/Trumbowyg
* @license MIT
* @author Alexandre Demode (Alex-D)
* Twitter : @AlexandreDemode
* Website : alex-d.fr
*/
$light-color: #ecf0f1 !default;
$dark-color: #222 !default;
$modal-submit-color: #2ecc71 !default;
$modal-reset-color: #EEE !default;
$transition-duration: 150ms !default;
#trumbowyg-icons {
overflow: hidden;
visibility: hidden;
height: 0;
width: 0;
svg {
height: 0;
width: 0;
}
}
.trumbowyg-box {
*,
*::before,
*::after {
box-sizing: border-box;
}
svg {
width: 17px;
height: 100%;
fill: $dark-color;
}
}
.trumbowyg-box,
.trumbowyg-editor {
display: block;
position: relative;
border: 1px solid #DDD;
width: 100%;
min-height: 300px;
margin: 17px auto;
}
.trumbowyg-box .trumbowyg-editor {
margin: 0 auto;
}
.trumbowyg-box.trumbowyg-fullscreen {
background: #FEFEFE;
border: none !important;
}
.trumbowyg-editor,
.trumbowyg-textarea {
position: relative;
box-sizing: border-box;
padding: 20px;
min-height: 300px;
width: 100%;
border-style: none;
resize: none;
outline: none;
overflow: auto;
}
.trumbowyg-box-blur .trumbowyg-editor {
*,
&::before {
color: transparent !important;
text-shadow: 0 0 7px #333;
@media screen and (min-width: 0 \0
) {
color: rgba(200, 200, 200, 0.6) !important;
}
@supports (-ms-accelerator:true) {
color: rgba(200, 200, 200, 0.6) !important;
}
}
img,
hr {
opacity: 0.2;
}
}
.trumbowyg-textarea {
position: relative;
display: block;
overflow: auto;
border: none;
white-space: normal;
font-size: 14px;
font-family: "Inconsolata", "Consolas", "Courier", "Courier New", sans-serif;
line-height: 18px;
}
.trumbowyg-box.trumbowyg-editor-visible {
.trumbowyg-textarea {
height: 1px !important;
width: 25%;
min-height: 0 !important;
padding: 0 !important;
background: none;
opacity: 0 !important;
}
}
.trumbowyg-box.trumbowyg-editor-hidden {
.trumbowyg-textarea {
display: block;
}
.trumbowyg-editor {
display: none;
}
}
.trumbowyg-box.trumbowyg-disabled {
.trumbowyg-textarea {
opacity: 0.8;
background: none;
}
}
.trumbowyg-editor[contenteditable=true]:empty:not(:focus)::before {
content: attr(placeholder);
color: #999;
pointer-events: none;
}
.trumbowyg-button-pane {
display: flex;
flex-flow: row wrap;
width: 100%;
min-height: 36px;
background: $light-color;
border-bottom: 1px solid darken($light-color, 7%);
margin: 0;
padding: 0 5px;
list-style-type: none;
line-height: 10px;
backface-visibility: hidden;
&::after {
content: " ";
display: block;
position: absolute;
top: 36px;
left: 0;
right: 0;
width: 100%;
height: 1px;
background: darken($light-color, 7%);
}
.trumbowyg-button-group {
display: flex;
flex-flow: row wrap;
.trumbowyg-fullscreen-button svg {
color: transparent;
}
&:not(:empty) + .trumbowyg-button-group::before {
content: " ";
display: block;
width: 1px;
background: darken($light-color, 7%);
margin: 0 5px;
height: 35px;
}
}
button {
display: block;
position: relative;
width: 35px;
height: 35px;
padding: 1px 6px !important;
margin-bottom: 1px;
overflow: hidden;
border: none;
cursor: pointer;
background: none;
transition: background-color $transition-duration, opacity $transition-duration;
&.trumbowyg-textual-button {
width: auto;
line-height: 35px;
}
}
&.trumbowyg-disable button:not(.trumbowyg-not-disable):not(.trumbowyg-active),
.trumbowyg-disabled & button:not(.trumbowyg-not-disable):not(.trumbowyg-viewHTML-button) {
opacity: 0.2;
cursor: default;
}
&.trumbowyg-disable,
.trumbowyg-disabled & {
.trumbowyg-button-group::before {
background: darken($light-color, 3%);
}
}
button:not(.trumbowyg-disable):hover,
button:not(.trumbowyg-disable):focus,
button.trumbowyg-active {
background-color: #FFF;
outline: none;
}
.trumbowyg-open-dropdown {
&::after {
display: block;
content: " ";
position: absolute;
top: 25px;
right: 3px;
height: 0;
width: 0;
border: 3px solid transparent;
border-top-color: #555;
}
&.trumbowyg-textual-button {
padding-left: 10px !important;
padding-right: 18px !important;
&::after {
top: 17px;
right: 7px;
}
}
}
.trumbowyg-right {
margin-left: auto;
&::before {
display: none !important;
}
}
}
.trumbowyg-dropdown {
width: 200px;
border: 1px solid $light-color;
padding: 5px 0;
border-top: none;
background: #FFF;
margin-left: -1px;
box-shadow: rgba(0, 0, 0, .1) 0 2px 3px;
button {
display: block;
width: 100%;
height: 35px;
line-height: 35px;
text-decoration: none;
background: #FFF;
padding: 0 10px;
color: #333 !important;
border: none;
cursor: pointer;
text-align: left;
font-size: 15px;
transition: all $transition-duration;
&:hover,
&:focus {
background: $light-color;
}
svg {
float: left;
margin-right: 14px;
}
}
}
/* Modal box */
.trumbowyg-modal {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
max-width: 520px;
width: 100%;
height: 350px;
z-index: 11;
overflow: hidden;
backface-visibility: hidden;
}
.trumbowyg-modal-box {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
max-width: 500px;
width: calc(100% - 20px);
padding-bottom: 45px;
z-index: 1;
background-color: #FFF;
text-align: center;
font-size: 14px;
box-shadow: rgba(0, 0, 0, .2) 0 2px 3px;
backface-visibility: hidden;
.trumbowyg-modal-title {
font-size: 24px;
font-weight: bold;
margin: 0 0 20px;
padding: 15px 0 13px;
display: block;
border-bottom: 1px solid #EEE;
color: #333;
background: lighten($light-color, 5%);
}
.trumbowyg-progress {
width: 100%;
height: 3px;
position: absolute;
top: 58px;
.trumbowyg-progress-bar {
background: #2BC06A;
height: 100%;
transition: width $transition-duration linear;
}
}
label {
display: block;
position: relative;
margin: 15px 12px;
height: 29px;
line-height: 29px;
overflow: hidden;
.trumbowyg-input-infos {
display: block;
text-align: left;
height: 25px;
line-height: 25px;
transition: all 150ms;
span {
display: block;
color: darken($light-color, 45%);
background-color: lighten($light-color, 5%);
border: 1px solid #DEDEDE;
padding: 0 7px;
width: 150px;
}
span.trumbowyg-msg-error {
color: #e74c3c;
}
}
&.trumbowyg-input-error {
input,
textarea {
border: 1px solid #e74c3c;
}
.trumbowyg-input-infos {
margin-top: -27px;
}
}
input {
position: absolute;
top: 0;
right: 0;
height: 27px;
line-height: 27px;
border: 1px solid #DEDEDE;
background: #fff;
font-size: 14px;
max-width: 330px;
width: 70%;
padding: 0 7px;
transition: all $transition-duration;
&:hover,
&:focus {
outline: none;
border: 1px solid #95a5a6;
}
&:focus {
background: lighten($light-color, 5%);
}
}
}
.error {
margin-top: 25px;
display: block;
color: red;
}
.trumbowyg-modal-button {
position: absolute;
bottom: 10px;
right: 0;
text-decoration: none;
color: #FFF;
display: block;
width: 100px;
height: 35px;
line-height: 33px;
margin: 0 10px;
background-color: #333;
border: none;
cursor: pointer;
font-family: "Trebuchet MS", Helvetica, Verdana, sans-serif;
font-size: 16px;
transition: all $transition-duration;
&.trumbowyg-modal-submit {
right: 110px;
background: darken($modal-submit-color, 3%);
&:hover,
&:focus {
background: lighten($modal-submit-color, 5%);
outline: none;
}
&:active {
background: darken($modal-submit-color, 10%);
}
}
&.trumbowyg-modal-reset {
color: #555;
background: darken($modal-reset-color, 3%);
&:hover,
&:focus {
background: lighten($modal-reset-color, 5%);
outline: none;
}
&:active {
background: darken($modal-reset-color, 10%);
}
}
}
}
.trumbowyg-overlay {
position: absolute;
background-color: rgba(255, 255, 255, 0.5);
width: 100%;
left: 0;
display: none;
z-index: 10;
}
/**
* Fullscreen
*/
body.trumbowyg-body-fullscreen {
overflow: hidden;
}
.trumbowyg-fullscreen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
z-index: 99999;
&.trumbowyg-box,
.trumbowyg-editor {
border: none;
}
.trumbowyg-editor,
.trumbowyg-textarea {
height: calc(100% - 37px) !important;
overflow: auto;
}
.trumbowyg-overlay {
height: 100% !important;
}
.trumbowyg-button-group .trumbowyg-fullscreen-button svg {
color: $dark-color;
fill: transparent;
}
}
.trumbowyg-editor {
object,
embed,
video,
img {
max-width: 100%;
}
video,
img {
height: auto;
}
img {
cursor: move;
}
/*
* lset for resetCss option
*/
&.trumbowyg-reset-css {
background: #FEFEFE !important;
font-family: "Trebuchet MS", Helvetica, Verdana, sans-serif !important;
font-size: 14px !important;
line-height: 1.45em !important;
white-space: normal !important;
color: #333;
a {
color: #15c !important;
text-decoration: underline !important;
}
div,
p,
ul,
ol,
blockquote {
box-shadow: none !important;
background: none !important;
margin: 0 !important;
margin-bottom: 15px !important;
line-height: 1.4em !important;
font-family: "Trebuchet MS", Helvetica, Verdana, sans-serif !important;
font-size: 14px !important;
border: none;
}
iframe,
object,
hr {
margin-bottom: 15px !important;
}
blockquote {
margin-left: 32px !important;
font-style: italic !important;
color: #555;
}
ul,
ol {
padding-left: 20px !important;
}
ul ul,
ol ol,
ul ol,
ol ul {
border: none;
margin: 2px !important;
padding: 0 !important;
padding-left: 24px !important;
}
hr {
display: block;
height: 1px;
border: none;
border-top: 1px solid #CCC;
}
h1,
h2,
h3,
h4 {
color: #111;
background: none;
margin: 0 !important;
padding: 0 !important;
font-weight: bold;
}
h1 {
font-size: 32px !important;
line-height: 38px !important;
margin-bottom: 20px !important;
}
h2 {
font-size: 26px !important;
line-height: 34px !important;
margin-bottom: 15px !important;
}
h3 {
font-size: 22px !important;
line-height: 28px !important;
margin-bottom: 7px !important;
}
h4 {
font-size: 16px !important;
line-height: 22px !important;
margin-bottom: 7px !important;
}
}
}
/*
* Dark theme
*/
.trumbowyg-dark {
.trumbowyg-textarea {
background: #111;
color: #ddd;
}
.trumbowyg-box {
border: 1px solid lighten($dark-color, 7%);
&.trumbowyg-fullscreen {
background: #111;
}
&.trumbowyg-box-blur .trumbowyg-editor {
*,
&::before {
text-shadow: 0 0 7px #ccc;
@media screen and (min-width: 0 \0
) {
color: rgba(20, 20, 20, 0.6) !important;
}
@supports (-ms-accelerator:true) {
color: rgba(20, 20, 20, 0.6) !important;
}
}
}
svg {
fill: $light-color;
color: $light-color;
}
}
.trumbowyg-button-pane {
background-color: $dark-color;
border-bottom-color: lighten($dark-color, 7%);
&::after {
background: lighten($dark-color, 7%);
}
.trumbowyg-button-group:not(:empty) {
&::before {
background-color: lighten($dark-color, 7%);
}
.trumbowyg-fullscreen-button svg {
color: transparent;
}
}
&.trumbowyg-disable {
.trumbowyg-button-group::before {
background-color: lighten($dark-color, 3%);
}
}
button:not(.trumbowyg-disable):hover,
button:not(.trumbowyg-disable):focus,
button.trumbowyg-active {
background-color: #333;
}
.trumbowyg-open-dropdown::after {
border-top-color: #fff;
}
}
.trumbowyg-fullscreen {
.trumbowyg-button-group .trumbowyg-fullscreen-button svg {
color: $light-color;
fill: transparent;
}
}
.trumbowyg-dropdown {
border-color: $dark-color;
background: #333;
box-shadow: rgba(0, 0, 0, .3) 0 2px 3px;
button {
background: #333;
color: #fff !important;
&:hover,
&:focus {
background: $dark-color;
}
}
}
// Modal box
.trumbowyg-modal-box {
background-color: $dark-color;
.trumbowyg-modal-title {
border-bottom: 1px solid #555;
color: #fff;
background: lighten($dark-color, 10%);
}
label {
display: block;
position: relative;
margin: 15px 12px;
height: 27px;
line-height: 27px;
overflow: hidden;
.trumbowyg-input-infos {
span {
color: #eee;
background-color: lighten($dark-color, 5%);
border-color: $dark-color;
}
span.trumbowyg-msg-error {
color: #e74c3c;
}
}
&.trumbowyg-input-error {
input,
textarea {
border-color: #e74c3c;
}
}
input {
border-color: $dark-color;
color: #eee;
background: #333;
&:hover,
&:focus {
border-color: lighten($dark-color, 25%);
}
&:focus {
background-color: lighten($dark-color, 5%);
}
}
}
.trumbowyg-modal-button {
&.trumbowyg-modal-submit {
background: darken($modal-submit-color, 20%);
&:hover,
&:focus {
background: darken($modal-submit-color, 10%);
}
&:active {
background: darken($modal-submit-color, 25%);
}
}
&.trumbowyg-modal-reset {
background: #333;
color: #ccc;
&:hover,
&:focus {
background: #444;
}
&:active {
background: #111;
}
}
}
}
.trumbowyg-overlay {
background-color: rgba(15, 15, 15, 0.6);
}
}