MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
@import url('https://fonts.googleapis.com/css2?family=Calistoga&display=swap'); | |||
/* CSS placed here will be applied to all skins */ | /* CSS placed here will be applied to all skins */ | ||
. | .latin { | ||
display: | font-family: "Calistoga", serif; | ||
font-weight: 400; | |||
font-style: normal; | |||
font-size:133%; | |||
} | |||
.centeredcells td { | |||
text-align:center; | |||
} | |||
/** | |||
* Trumbowyg v2.27.3 - A lightweight WYSIWYG editor | |||
* Default stylesheet for Trumbowyg editor | |||
* ------------------------ | |||
* @link https://alex-d.github.io/Trumbowyg/ | |||
* @license MIT | |||
* @author Alexandre Demode (Alex-D) | |||
* Twitter : @AlexandreDemode | |||
* Website : alex-d.fr | |||
*/ | |||
#trumbowyg-icons, | |||
.trumbowyg-icons { | |||
overflow: hidden; | |||
visibility: hidden; | |||
height: 0; | |||
width: 0; | |||
} | |||
#trumbowyg-icons svg, | |||
.trumbowyg-icons svg { | |||
height: 0; | |||
width: 0; | |||
} | |||
.trumbowyg-box *, | |||
.trumbowyg-box *::before, | |||
.trumbowyg-box *::after, | |||
.trumbowyg-modal *, | |||
.trumbowyg-modal *::before, | |||
.trumbowyg-modal *::after { | |||
-webkit-box-sizing: border-box; | |||
-moz-box-sizing: border-box; | |||
box-sizing: border-box; | |||
} | |||
.trumbowyg-box svg, | |||
.trumbowyg-modal svg { | |||
width: 17px; | |||
height: 100%; | |||
color: #222; | |||
fill: #222; | |||
} | |||
.trumbowyg-box { | |||
display: -webkit-box; | |||
display: -webkit-flex; | |||
display: -moz-box; | |||
display: -ms-flexbox; | |||
display: flex; | |||
-webkit-box-orient: vertical; | |||
-webkit-box-direction: normal; | |||
-webkit-flex-direction: column; | |||
-moz-box-orient: vertical; | |||
-moz-box-direction: normal; | |||
-ms-flex-direction: column; | |||
flex-direction: column; | |||
min-height: 300px; | |||
} | |||
.trumbowyg-editor-box { | |||
display: block; | |||
-webkit-box-flex: 1; | |||
-webkit-flex: 1; | |||
-moz-box-flex: 1; | |||
-ms-flex: 1; | |||
flex: 1; | |||
} | |||
.trumbowyg-box, | |||
.trumbowyg-editor-box { | |||
position: relative; | |||
width: 100%; | |||
border: 1px solid #d7e0e2; | |||
} | |||
.trumbowyg-box .trumbowyg-editor { | |||
min-height: 100%; | |||
margin: 0 auto; | |||
} | |||
.trumbowyg-box.trumbowyg-fullscreen { | |||
background: #fefefe; | |||
border: none !important; | |||
} | |||
.trumbowyg-editor-box, | |||
.trumbowyg-textarea { | |||
position: relative; | |||
-webkit-box-sizing: border-box; | |||
-moz-box-sizing: border-box; | |||
box-sizing: border-box; | |||
padding: 20px; | |||
width: 100%; | |||
border-style: none; | |||
resize: none; | |||
outline: none; | |||
overflow: auto; | |||
-webkit-user-select: text; | |||
-moz-user-select: text; | |||
-ms-user-select: text; | |||
user-select: text; | |||
} | |||
.trumbowyg-editor-box.trumbowyg-autogrow-on-enter, | |||
.trumbowyg-textarea.trumbowyg-autogrow-on-enter { | |||
-webkit-transition: height 300ms ease-out; | |||
-o-transition: height 300ms ease-out; | |||
transition: height 300ms ease-out; | |||
} | |||
.trumbowyg-editor-box { | |||
padding: 0; | |||
} | |||
.trumbowyg-editor { | |||
outline: none; | |||
padding: 20px; | |||
} | |||
.trumbowyg-box-blur .trumbowyg-editor *, .trumbowyg-box-blur .trumbowyg-editor::before { | |||
color: transparent !important; | |||
text-shadow: 0 0 7px #333; | |||
} | |||
@media screen and (min-width: 0 \0 ) { | |||
.trumbowyg-box-blur .trumbowyg-editor *, .trumbowyg-box-blur .trumbowyg-editor::before { | |||
color: rgba(200, 200, 200, 0.6) !important; | |||
} | |||
} | |||
@supports (-ms-accelerator: true) { | |||
.trumbowyg-box-blur .trumbowyg-editor *, .trumbowyg-box-blur .trumbowyg-editor::before { | |||
color: rgba(200, 200, 200, 0.6) !important; | |||
} | |||
} | |||
.trumbowyg-box-blur .trumbowyg-editor img, | |||
.trumbowyg-box-blur .trumbowyg-editor hr { | |||
opacity: 0.2; | |||
} | |||
.trumbowyg-textarea { | |||
position: relative; | |||
display: block; | |||
overflow: auto; | |||
border: none; | |||
font-size: 14px; | |||
font-family: "Consolas", "Courier", "Courier New", monospace; | |||
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; | |||
-webkit-box-flex: 1; | |||
-webkit-flex: 1; | |||
-moz-box-flex: 1; | |||
-ms-flex: 1; | |||
flex: 1; | |||
margin-bottom: 1px; | |||
} | |||
.trumbowyg-box.trumbowyg-editor-hidden .trumbowyg-editor-box { | |||
display: none; | |||
} | } | ||
. | .trumbowyg-box.trumbowyg-disabled .trumbowyg-textarea { | ||
text- | opacity: 0.8; | ||
background: none; | |||
} | |||
.trumbowyg-editor-box[contenteditable=true]:empty:not(:focus)::before { | |||
content: attr(placeholder); | |||
color: #999; | |||
pointer-events: none; | |||
white-space: break-spaces; | |||
} | |||
.trumbowyg-button-pane { | |||
display: -webkit-box; | |||
display: -webkit-flex; | |||
display: -moz-box; | |||
display: -ms-flexbox; | |||
display: flex; | |||
-webkit-flex-wrap: wrap; | |||
-ms-flex-wrap: wrap; | |||
flex-wrap: wrap; | |||
width: 100%; | |||
min-height: 36px; | |||
background: #ecf0f1; | |||
border-bottom: 1px solid #d7e0e2; | |||
margin: 0; | |||
padding: 0 5px; | |||
position: relative; | |||
list-style-type: none; | |||
line-height: 10px; | |||
-webkit-backface-visibility: hidden; | |||
backface-visibility: hidden; | |||
overflow: hidden; | |||
z-index: 11; | |||
} | |||
.trumbowyg-button-pane::before, .trumbowyg-button-pane::after { | |||
content: " "; | |||
display: block; | |||
position: absolute; | |||
top: 35px; | |||
left: 0; | |||
right: 0; | |||
width: 100%; | |||
height: 1px; | |||
background: #d7e0e2; | |||
} | |||
.trumbowyg-button-pane::after { | |||
top: 71px; | |||
} | |||
.trumbowyg-button-pane .trumbowyg-button-group { | |||
display: -webkit-box; | |||
display: -webkit-flex; | |||
display: -moz-box; | |||
display: -ms-flexbox; | |||
display: flex; | |||
-webkit-flex-wrap: wrap; | |||
-ms-flex-wrap: wrap; | |||
flex-wrap: wrap; | |||
} | |||
.trumbowyg-button-pane .trumbowyg-button-group .trumbowyg-fullscreen-button svg { | |||
color: transparent; | |||
} | |||
.trumbowyg-button-pane .trumbowyg-button-group::after { | |||
content: " "; | |||
display: block; | |||
width: 1px; | |||
background: #d7e0e2; | |||
margin: 0 5px; | |||
height: 35px; | |||
vertical-align: top; | |||
} | |||
.trumbowyg-button-pane .trumbowyg-button-group:last-child::after { | |||
content: none; | |||
} | |||
.trumbowyg-button-pane button { | |||
display: block; | |||
position: relative; | |||
width: 35px; | |||
height: 35px; | |||
padding: 1px 6px !important; | |||
margin-bottom: 1px; | |||
overflow: hidden; | |||
border: none; | |||
cursor: pointer; | |||
background: none; | |||
vertical-align: middle; | |||
-webkit-transition: background-color 150ms, opacity 150ms; | |||
-o-transition: background-color 150ms, opacity 150ms; | |||
transition: background-color 150ms, opacity 150ms; | |||
} | |||
.trumbowyg-button-pane button.trumbowyg-textual-button { | |||
width: auto; | |||
line-height: 35px; | |||
-webkit-user-select: none; | |||
-moz-user-select: none; | |||
-ms-user-select: none; | |||
user-select: none; | |||
} | |||
.trumbowyg-button-pane.trumbowyg-disable button:not(.trumbowyg-not-disable):not(.trumbowyg-active), | |||
.trumbowyg-button-pane button.trumbowyg-disable, .trumbowyg-disabled .trumbowyg-button-pane button:not(.trumbowyg-not-disable):not(.trumbowyg-viewHTML-button) { | |||
opacity: 0.2; | |||
cursor: default; | |||
pointer-events: none; | |||
} | |||
.trumbowyg-button-pane.trumbowyg-disable .trumbowyg-button-group::before, .trumbowyg-disabled .trumbowyg-button-pane .trumbowyg-button-group::before { | |||
background: #e3e9eb; | |||
} | |||
.trumbowyg-button-pane button:not(.trumbowyg-disable):hover, | |||
.trumbowyg-button-pane button:not(.trumbowyg-disable):focus, | |||
.trumbowyg-button-pane button.trumbowyg-active { | |||
background-color: #fff; | |||
outline: none; | |||
} | |||
.trumbowyg-button-pane .trumbowyg-open-dropdown::after { | |||
display: block; | |||
content: " "; | |||
position: absolute; | |||
top: 27px; | |||
right: 3px; | |||
height: 0; | |||
width: 0; | |||
border: 3px solid transparent; | |||
border-top-color: #555; | |||
} | |||
.trumbowyg-button-pane .trumbowyg-open-dropdown.trumbowyg-textual-button { | |||
padding-left: 10px !important; | |||
padding-right: 18px !important; | |||
} | |||
.trumbowyg-button-pane .trumbowyg-open-dropdown.trumbowyg-textual-button::after { | |||
top: 17px; | |||
right: 7px; | |||
} | |||
.trumbowyg-button-pane .trumbowyg-right { | |||
margin-left: auto; | |||
} | |||
.trumbowyg-dropdown { | |||
max-width: 300px; | |||
max-height: 250px; | |||
overflow-y: auto; | |||
overflow-x: hidden; | |||
white-space: nowrap; | |||
border: 1px solid #d7e0e2; | |||
padding: 5px 0; | |||
border-top: none; | |||
background: #fff; | |||
color: #222; | |||
margin-left: -1px; | |||
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 3px; | |||
box-shadow: rgba(0, 0, 0, 0.1) 0 2px 3px; | |||
z-index: 12; | |||
} | |||
.trumbowyg-dropdown button { | |||
display: block; | |||
width: 100%; | |||
height: 35px; | |||
line-height: 35px; | |||
text-decoration: none; | |||
background: #fff; | |||
padding: 0 20px 0 10px; | |||
color: #222; | |||
border: none; | |||
cursor: pointer; | |||
text-align: left; | |||
font-size: 15px; | |||
-webkit-transition: all 150ms; | |||
-o-transition: all 150ms; | |||
transition: all 150ms; | |||
} | |||
.trumbowyg-dropdown button:hover, .trumbowyg-dropdown button:focus { | |||
background: #ecf0f1; | |||
} | |||
.trumbowyg-dropdown button svg { | |||
float: left; | |||
margin-right: 14px; | |||
} | |||
/* Modal box */ | |||
.trumbowyg-modal { | |||
position: absolute; | |||
top: 0; | |||
left: 50%; | |||
-webkit-transform: translateX(-50%); | |||
-ms-transform: translateX(-50%); | |||
-o-transform: translateX(-50%); | |||
transform: translateX(-50%); | |||
max-width: 520px; | |||
width: 100%; | |||
height: 350px; | |||
z-index: 12; | |||
overflow: hidden; | |||
-webkit-backface-visibility: hidden; | |||
backface-visibility: hidden; | |||
} | |||
.trumbowyg-modal-box { | |||
position: absolute; | |||
top: 0; | |||
left: 50%; | |||
-webkit-transform: translateX(-50%); | |||
-ms-transform: translateX(-50%); | |||
-o-transform: translateX(-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; | |||
font-family: "Trebuchet MS", Helvetica, Verdana, sans-serif; | |||
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 3px; | |||
box-shadow: rgba(0, 0, 0, 0.2) 0 2px 3px; | |||
-webkit-backface-visibility: hidden; | |||
backface-visibility: hidden; | |||
} | |||
.trumbowyg-modal-box .trumbowyg-modal-title { | |||
font-size: 24px; | |||
font-weight: bold; | |||
margin: 0 0 20px; | |||
padding: 15px 0 13px; | |||
display: block; | |||
border-bottom: 1px solid #d7e0e2; | |||
} | |||
.trumbowyg-modal-box .trumbowyg-progress { | |||
width: 100%; | |||
height: 3px; | |||
position: absolute; | |||
top: 58px; | |||
} | |||
.trumbowyg-modal-box .trumbowyg-progress .trumbowyg-progress-bar { | |||
background: #2BC06A; | |||
width: 0; | |||
height: 100%; | |||
-webkit-transition: width 150ms linear; | |||
-o-transition: width 150ms linear; | |||
transition: width 150ms linear; | |||
} | |||
.trumbowyg-modal-box .trumbowyg-input-row { | |||
position: relative; | |||
margin: 15px 12px; | |||
border: 1px solid #dedede; | |||
overflow: hidden; | |||
} | |||
.trumbowyg-modal-box .trumbowyg-input-infos { | |||
text-align: left; | |||
-webkit-transition: all 150ms; | |||
-o-transition: all 150ms; | |||
transition: all 150ms; | |||
width: 150px; | |||
border-right: 1px solid #dedede; | |||
padding: 0 7px; | |||
background-color: #fbfcfc; | |||
position: absolute; | |||
left: 0; | |||
top: 0; | |||
bottom: 0; | |||
} | |||
.trumbowyg-modal-box .trumbowyg-input-infos label { | |||
color: #69878f; | |||
overflow: hidden; | |||
height: 27px; | |||
line-height: 27px; | |||
} | |||
.trumbowyg-modal-box .trumbowyg-input-infos label, .trumbowyg-modal-box .trumbowyg-input-infos label span { | |||
display: block; | |||
height: 27px; | |||
line-height: 27px; | |||
-webkit-transition: all 150ms; | |||
-o-transition: all 150ms; | |||
transition: all 150ms; | |||
} | |||
.trumbowyg-modal-box .trumbowyg-input-infos .trumbowyg-msg-error { | |||
color: #e74c3c; | |||
} | |||
.trumbowyg-modal-box .trumbowyg-input-html { | |||
padding: 1px 1px 1px 152px; | |||
} | |||
.trumbowyg-modal-box .trumbowyg-input-html, .trumbowyg-modal-box .trumbowyg-input-html input, .trumbowyg-modal-box .trumbowyg-input-html textarea, .trumbowyg-modal-box .trumbowyg-input-html select { | |||
font-size: 14px; | |||
} | |||
.trumbowyg-modal-box .trumbowyg-input-html input, .trumbowyg-modal-box .trumbowyg-input-html textarea, .trumbowyg-modal-box .trumbowyg-input-html select { | |||
-webkit-transition: all 150ms; | |||
-o-transition: all 150ms; | |||
transition: all 150ms; | |||
height: 27px; | |||
line-height: 27px; | |||
border: 0; | |||
width: 100%; | |||
padding: 0 7px; | |||
} | |||
.trumbowyg-modal-box .trumbowyg-input-html input:hover, .trumbowyg-modal-box .trumbowyg-input-html input:focus, .trumbowyg-modal-box .trumbowyg-input-html textarea:hover, .trumbowyg-modal-box .trumbowyg-input-html textarea:focus, .trumbowyg-modal-box .trumbowyg-input-html select:hover, .trumbowyg-modal-box .trumbowyg-input-html select:focus { | |||
outline: 1px solid #95a5a6; | |||
} | |||
.trumbowyg-modal-box .trumbowyg-input-html input:focus, .trumbowyg-modal-box .trumbowyg-input-html textarea:focus, .trumbowyg-modal-box .trumbowyg-input-html select:focus { | |||
background: #fbfcfc; | |||
} | |||
.trumbowyg-modal-box .trumbowyg-input-html input[type=checkbox] { | |||
width: 16px; | |||
height: 16px; | |||
padding: 0; | |||
} | |||
.trumbowyg-modal-box .trumbowyg-input-html-with-checkbox { | |||
text-align: left; | |||
padding: 3px 1px 1px 3px; | |||
} | |||
.trumbowyg-modal-box .trumbowyg-input-error input, .trumbowyg-modal-box .trumbowyg-input-error select, .trumbowyg-modal-box .trumbowyg-input-error textarea { | |||
outline: 1px solid #e74c3c; | |||
} | |||
.trumbowyg-modal-box .trumbowyg-input-error .trumbowyg-input-infos label span:first-child { | |||
margin-top: -27px; | |||
} | |||
.trumbowyg-modal-box .error { | |||
margin-top: 25px; | |||
display: block; | |||
color: red; | |||
} | |||
.trumbowyg-modal-box .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; | |||
-webkit-transition: all 150ms; | |||
-o-transition: all 150ms; | |||
transition: all 150ms; | |||
} | |||
.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit { | |||
right: 110px; | |||
background: #2bc06a; | |||
} | |||
.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:hover, .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:focus { | |||
background: #40d47e; | |||
outline: none; | |||
} | |||
.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:active { | |||
background: #25a25a; | |||
} | |||
.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset { | |||
color: #555; | |||
background: #e6e6e6; | |||
} | |||
.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:hover, .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:focus { | |||
background: #fbfbfb; | |||
outline: none; | |||
} | |||
.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:active { | |||
background: #d5d5d5; | |||
} | |||
.trumbowyg-overlay { | |||
position: absolute; | |||
background-color: rgba(255, 255, 255, 0.5); | |||
height: 100%; | |||
width: 100%; | |||
left: 0; | |||
display: none; | |||
top: 0; | |||
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-fullscreen.trumbowyg-box, | |||
.trumbowyg-fullscreen .trumbowyg-editor-box { | |||
border: none; | |||
} | |||
.trumbowyg-fullscreen .trumbowyg-editor-box, | |||
.trumbowyg-fullscreen .trumbowyg-textarea { | |||
height: auto !important; | |||
overflow: auto; | |||
} | |||
.trumbowyg-fullscreen .trumbowyg-overlay { | |||
height: 100% !important; | |||
} | |||
.trumbowyg-fullscreen .trumbowyg-button-group .trumbowyg-fullscreen-button svg { | |||
color: #222; | |||
fill: transparent; | |||
} | |||
.trumbowyg-editor { | |||
/* | |||
* For resetCss option | |||
*/ | |||
} | |||
.trumbowyg-editor object, | |||
.trumbowyg-editor embed, | |||
.trumbowyg-editor video, | |||
.trumbowyg-editor img { | |||
max-width: 100%; | |||
} | |||
.trumbowyg-editor video, | |||
.trumbowyg-editor img { | |||
height: auto; | |||
} | |||
.trumbowyg-editor img { | |||
cursor: move; | |||
} | |||
.trumbowyg-editor canvas:focus { | |||
outline: none; | |||
} | |||
.trumbowyg-editor.trumbowyg-reset-css { | |||
background: #fefefe !important; | |||
font-family: "Trebuchet MS", Helvetica, Verdana, sans-serif !important; | |||
font-size: 14px !important; | |||
line-height: 1.45em !important; | |||
color: #333 !important; | |||
font-weight: normal !important; | |||
} | |||
.trumbowyg-editor.trumbowyg-reset-css a { | |||
color: #15c !important; | |||
text-decoration: underline !important; | |||
} | |||
.trumbowyg-editor.trumbowyg-reset-css div, | |||
.trumbowyg-editor.trumbowyg-reset-css p, | |||
.trumbowyg-editor.trumbowyg-reset-css ul, | |||
.trumbowyg-editor.trumbowyg-reset-css ol, | |||
.trumbowyg-editor.trumbowyg-reset-css blockquote { | |||
-webkit-box-shadow: none !important; | |||
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 !important; | |||
} | |||
.trumbowyg-editor.trumbowyg-reset-css iframe, | |||
.trumbowyg-editor.trumbowyg-reset-css object, | |||
.trumbowyg-editor.trumbowyg-reset-css hr { | |||
margin-bottom: 15px !important; | |||
} | |||
.trumbowyg-editor.trumbowyg-reset-css blockquote { | |||
margin-left: 32px !important; | |||
font-style: italic !important; | |||
color: #555 !important; | |||
} | |||
.trumbowyg-editor.trumbowyg-reset-css ul { | |||
list-style: disc !important; | |||
} | |||
.trumbowyg-editor.trumbowyg-reset-css ol { | |||
list-style: decimal !important; | |||
} | |||
.trumbowyg-editor.trumbowyg-reset-css ul, | |||
.trumbowyg-editor.trumbowyg-reset-css ol { | |||
padding-left: 20px !important; | |||
} | |||
.trumbowyg-editor.trumbowyg-reset-css ul ul, | |||
.trumbowyg-editor.trumbowyg-reset-css ol ol, | |||
.trumbowyg-editor.trumbowyg-reset-css ul ol, | |||
.trumbowyg-editor.trumbowyg-reset-css ol ul { | |||
border: none !important; | |||
margin: 2px !important; | |||
padding: 0 !important; | |||
padding-left: 24px !important; | |||
} | |||
.trumbowyg-editor.trumbowyg-reset-css hr { | |||
display: block !important; | |||
height: 1px !important; | |||
border: none !important; | |||
border-top: 1px solid #CCC !important; | |||
} | |||
.trumbowyg-editor.trumbowyg-reset-css h1, | |||
.trumbowyg-editor.trumbowyg-reset-css h2, | |||
.trumbowyg-editor.trumbowyg-reset-css h3, | |||
.trumbowyg-editor.trumbowyg-reset-css h4 { | |||
color: #111 !important; | |||
background: none !important; | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
font-weight: bold !important; | |||
} | |||
.trumbowyg-editor.trumbowyg-reset-css h1 { | |||
font-size: 32px !important; | |||
line-height: 38px !important; | |||
margin-bottom: 20px !important; | |||
} | |||
.trumbowyg-editor.trumbowyg-reset-css h2 { | |||
font-size: 26px !important; | |||
line-height: 34px !important; | |||
margin-bottom: 15px !important; | |||
} | |||
.trumbowyg-editor.trumbowyg-reset-css h3 { | |||
font-size: 22px !important; | |||
line-height: 28px !important; | |||
margin-bottom: 7px !important; | |||
} | |||
.trumbowyg-editor.trumbowyg-reset-css h4 { | |||
font-size: 16px !important; | |||
line-height: 22px !important; | |||
margin-bottom: 7px !important; | |||
} | |||
/* | |||
* Dark theme | |||
*/ | |||
.trumbowyg-dark .trumbowyg-textarea { | |||
background: #222; | |||
color: #fff; | |||
border-color: #343434; | |||
} | |||
.trumbowyg-dark .trumbowyg-box { | |||
border: 1px solid #343434; | |||
} | |||
.trumbowyg-dark .trumbowyg-box.trumbowyg-fullscreen { | |||
background: #111; | |||
} | |||
.trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor *, .trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor::before { | |||
text-shadow: 0 0 7px #ccc; | |||
} | |||
@media screen and (min-width: 0 \0 ) { | |||
.trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor *, .trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor::before { | |||
color: rgba(20, 20, 20, 0.6) !important; | |||
} | |||
} | |||
@supports (-ms-accelerator: true) { | |||
.trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor *, .trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor::before { | |||
color: rgba(20, 20, 20, 0.6) !important; | |||
} | |||
} | |||
.trumbowyg-dark .trumbowyg-box svg { | |||
fill: #fff; | |||
color: #fff; | |||
} | |||
.trumbowyg-dark .trumbowyg-button-pane { | |||
background-color: #222; | |||
border-bottom-color: #343434; | |||
} | |||
.trumbowyg-dark .trumbowyg-button-pane::before, .trumbowyg-dark .trumbowyg-button-pane::after { | |||
background: #343434; | |||
} | |||
.trumbowyg-dark .trumbowyg-button-pane .trumbowyg-button-group:not(:empty)::after { | |||
background-color: #343434; | |||
} | |||
.trumbowyg-dark .trumbowyg-button-pane .trumbowyg-button-group:not(:empty) .trumbowyg-fullscreen-button svg { | |||
color: transparent; | |||
} | |||
.trumbowyg-dark .trumbowyg-button-pane.trumbowyg-disable .trumbowyg-button-group::after { | |||
background-color: #2a2a2a; | |||
} | |||
.trumbowyg-dark .trumbowyg-button-pane button:not(.trumbowyg-disable):hover, | |||
.trumbowyg-dark .trumbowyg-button-pane button:not(.trumbowyg-disable):focus, | |||
.trumbowyg-dark .trumbowyg-button-pane button.trumbowyg-active { | |||
background-color: #333; | |||
} | |||
.trumbowyg-dark .trumbowyg-button-pane .trumbowyg-open-dropdown::after { | |||
border-top-color: #fff; | |||
} | |||
.trumbowyg-dark .trumbowyg-fullscreen .trumbowyg-button-pane .trumbowyg-button-group:not(:empty) .trumbowyg-fullscreen-button svg { | |||
color: #ecf0f1; | |||
fill: transparent; | |||
} | |||
.trumbowyg-dark .trumbowyg-dropdown { | |||
border-color: #343434; | |||
background: #333; | |||
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 2px 3px; | |||
box-shadow: rgba(0, 0, 0, 0.3) 0 2px 3px; | |||
} | |||
.trumbowyg-dark .trumbowyg-dropdown button { | |||
background: #333; | |||
color: #fff; | |||
} | |||
.trumbowyg-dark .trumbowyg-dropdown button:hover, .trumbowyg-dark .trumbowyg-dropdown button:focus { | |||
background: #222; | |||
} | |||
.trumbowyg-dark .trumbowyg-modal-box { | |||
background-color: #333; | |||
color: #fff; | |||
} | |||
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-title { | |||
border-bottom: 1px solid #555; | |||
color: #fff; | |||
background: #3c3c3c; | |||
} | |||
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-input-row { | |||
border-color: #222; | |||
} | |||
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-input-infos { | |||
color: #eee; | |||
background-color: #2f2f2f; | |||
border-right-color: #222; | |||
} | |||
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-input-infos span { | |||
color: #eee; | |||
background-color: #2f2f2f; | |||
border-color: #343434; | |||
} | |||
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-input-infos span.trumbowyg-msg-error { | |||
color: #e74c3c; | |||
} | |||
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-input-row.trumbowyg-input-error input, | |||
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-input-row.trumbowyg-input-error select, | |||
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-input-row.trumbowyg-input-error textarea { | |||
border-color: #e74c3c; | |||
} | |||
.trumbowyg-dark .trumbowyg-modal-box input, | |||
.trumbowyg-dark .trumbowyg-modal-box select, | |||
.trumbowyg-dark .trumbowyg-modal-box textarea { | |||
border-color: #343434; | |||
color: #fff; | |||
background: #222; | |||
} | |||
.trumbowyg-dark .trumbowyg-modal-box input:hover, .trumbowyg-dark .trumbowyg-modal-box input:focus, | |||
.trumbowyg-dark .trumbowyg-modal-box select:hover, | |||
.trumbowyg-dark .trumbowyg-modal-box select:focus, | |||
.trumbowyg-dark .trumbowyg-modal-box textarea:hover, | |||
.trumbowyg-dark .trumbowyg-modal-box textarea:focus { | |||
border-color: #626262; | |||
} | |||
.trumbowyg-dark .trumbowyg-modal-box input:focus, | |||
.trumbowyg-dark .trumbowyg-modal-box select:focus, | |||
.trumbowyg-dark .trumbowyg-modal-box textarea:focus { | |||
background-color: #2f2f2f; | |||
} | |||
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit { | |||
background: #1b7943; | |||
} | |||
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:hover, .trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:focus { | |||
background: #25a25a; | |||
} | |||
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:active { | |||
background: #176437; | |||
} | |||
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset { | |||
background: #333; | |||
color: #ccc; | |||
} | |||
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:hover, .trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:focus { | |||
background: #444; | |||
} | |||
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:active { | |||
background: #111; | |||
} | |||
.trumbowyg-dark .trumbowyg-overlay { | |||
background-color: rgba(15, 15, 15, 0.6); | |||
} | } | ||
Latest revision as of 19:51, 30 August 2024
@import url('https://fonts.googleapis.com/css2?family=Calistoga&display=swap');
/* CSS placed here will be applied to all skins */
.latin {
font-family: "Calistoga", serif;
font-weight: 400;
font-style: normal;
font-size:133%;
}
.centeredcells td {
text-align:center;
}
/**
* Trumbowyg v2.27.3 - A lightweight WYSIWYG editor
* Default stylesheet for Trumbowyg editor
* ------------------------
* @link https://alex-d.github.io/Trumbowyg/
* @license MIT
* @author Alexandre Demode (Alex-D)
* Twitter : @AlexandreDemode
* Website : alex-d.fr
*/
#trumbowyg-icons,
.trumbowyg-icons {
overflow: hidden;
visibility: hidden;
height: 0;
width: 0;
}
#trumbowyg-icons svg,
.trumbowyg-icons svg {
height: 0;
width: 0;
}
.trumbowyg-box *,
.trumbowyg-box *::before,
.trumbowyg-box *::after,
.trumbowyg-modal *,
.trumbowyg-modal *::before,
.trumbowyg-modal *::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.trumbowyg-box svg,
.trumbowyg-modal svg {
width: 17px;
height: 100%;
color: #222;
fill: #222;
}
.trumbowyg-box {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-height: 300px;
}
.trumbowyg-editor-box {
display: block;
-webkit-box-flex: 1;
-webkit-flex: 1;
-moz-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.trumbowyg-box,
.trumbowyg-editor-box {
position: relative;
width: 100%;
border: 1px solid #d7e0e2;
}
.trumbowyg-box .trumbowyg-editor {
min-height: 100%;
margin: 0 auto;
}
.trumbowyg-box.trumbowyg-fullscreen {
background: #fefefe;
border: none !important;
}
.trumbowyg-editor-box,
.trumbowyg-textarea {
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 20px;
width: 100%;
border-style: none;
resize: none;
outline: none;
overflow: auto;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
.trumbowyg-editor-box.trumbowyg-autogrow-on-enter,
.trumbowyg-textarea.trumbowyg-autogrow-on-enter {
-webkit-transition: height 300ms ease-out;
-o-transition: height 300ms ease-out;
transition: height 300ms ease-out;
}
.trumbowyg-editor-box {
padding: 0;
}
.trumbowyg-editor {
outline: none;
padding: 20px;
}
.trumbowyg-box-blur .trumbowyg-editor *, .trumbowyg-box-blur .trumbowyg-editor::before {
color: transparent !important;
text-shadow: 0 0 7px #333;
}
@media screen and (min-width: 0 \0 ) {
.trumbowyg-box-blur .trumbowyg-editor *, .trumbowyg-box-blur .trumbowyg-editor::before {
color: rgba(200, 200, 200, 0.6) !important;
}
}
@supports (-ms-accelerator: true) {
.trumbowyg-box-blur .trumbowyg-editor *, .trumbowyg-box-blur .trumbowyg-editor::before {
color: rgba(200, 200, 200, 0.6) !important;
}
}
.trumbowyg-box-blur .trumbowyg-editor img,
.trumbowyg-box-blur .trumbowyg-editor hr {
opacity: 0.2;
}
.trumbowyg-textarea {
position: relative;
display: block;
overflow: auto;
border: none;
font-size: 14px;
font-family: "Consolas", "Courier", "Courier New", monospace;
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;
-webkit-box-flex: 1;
-webkit-flex: 1;
-moz-box-flex: 1;
-ms-flex: 1;
flex: 1;
margin-bottom: 1px;
}
.trumbowyg-box.trumbowyg-editor-hidden .trumbowyg-editor-box {
display: none;
}
.trumbowyg-box.trumbowyg-disabled .trumbowyg-textarea {
opacity: 0.8;
background: none;
}
.trumbowyg-editor-box[contenteditable=true]:empty:not(:focus)::before {
content: attr(placeholder);
color: #999;
pointer-events: none;
white-space: break-spaces;
}
.trumbowyg-button-pane {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
min-height: 36px;
background: #ecf0f1;
border-bottom: 1px solid #d7e0e2;
margin: 0;
padding: 0 5px;
position: relative;
list-style-type: none;
line-height: 10px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
overflow: hidden;
z-index: 11;
}
.trumbowyg-button-pane::before, .trumbowyg-button-pane::after {
content: " ";
display: block;
position: absolute;
top: 35px;
left: 0;
right: 0;
width: 100%;
height: 1px;
background: #d7e0e2;
}
.trumbowyg-button-pane::after {
top: 71px;
}
.trumbowyg-button-pane .trumbowyg-button-group {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.trumbowyg-button-pane .trumbowyg-button-group .trumbowyg-fullscreen-button svg {
color: transparent;
}
.trumbowyg-button-pane .trumbowyg-button-group::after {
content: " ";
display: block;
width: 1px;
background: #d7e0e2;
margin: 0 5px;
height: 35px;
vertical-align: top;
}
.trumbowyg-button-pane .trumbowyg-button-group:last-child::after {
content: none;
}
.trumbowyg-button-pane button {
display: block;
position: relative;
width: 35px;
height: 35px;
padding: 1px 6px !important;
margin-bottom: 1px;
overflow: hidden;
border: none;
cursor: pointer;
background: none;
vertical-align: middle;
-webkit-transition: background-color 150ms, opacity 150ms;
-o-transition: background-color 150ms, opacity 150ms;
transition: background-color 150ms, opacity 150ms;
}
.trumbowyg-button-pane button.trumbowyg-textual-button {
width: auto;
line-height: 35px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.trumbowyg-button-pane.trumbowyg-disable button:not(.trumbowyg-not-disable):not(.trumbowyg-active),
.trumbowyg-button-pane button.trumbowyg-disable, .trumbowyg-disabled .trumbowyg-button-pane button:not(.trumbowyg-not-disable):not(.trumbowyg-viewHTML-button) {
opacity: 0.2;
cursor: default;
pointer-events: none;
}
.trumbowyg-button-pane.trumbowyg-disable .trumbowyg-button-group::before, .trumbowyg-disabled .trumbowyg-button-pane .trumbowyg-button-group::before {
background: #e3e9eb;
}
.trumbowyg-button-pane button:not(.trumbowyg-disable):hover,
.trumbowyg-button-pane button:not(.trumbowyg-disable):focus,
.trumbowyg-button-pane button.trumbowyg-active {
background-color: #fff;
outline: none;
}
.trumbowyg-button-pane .trumbowyg-open-dropdown::after {
display: block;
content: " ";
position: absolute;
top: 27px;
right: 3px;
height: 0;
width: 0;
border: 3px solid transparent;
border-top-color: #555;
}
.trumbowyg-button-pane .trumbowyg-open-dropdown.trumbowyg-textual-button {
padding-left: 10px !important;
padding-right: 18px !important;
}
.trumbowyg-button-pane .trumbowyg-open-dropdown.trumbowyg-textual-button::after {
top: 17px;
right: 7px;
}
.trumbowyg-button-pane .trumbowyg-right {
margin-left: auto;
}
.trumbowyg-dropdown {
max-width: 300px;
max-height: 250px;
overflow-y: auto;
overflow-x: hidden;
white-space: nowrap;
border: 1px solid #d7e0e2;
padding: 5px 0;
border-top: none;
background: #fff;
color: #222;
margin-left: -1px;
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 3px;
box-shadow: rgba(0, 0, 0, 0.1) 0 2px 3px;
z-index: 12;
}
.trumbowyg-dropdown button {
display: block;
width: 100%;
height: 35px;
line-height: 35px;
text-decoration: none;
background: #fff;
padding: 0 20px 0 10px;
color: #222;
border: none;
cursor: pointer;
text-align: left;
font-size: 15px;
-webkit-transition: all 150ms;
-o-transition: all 150ms;
transition: all 150ms;
}
.trumbowyg-dropdown button:hover, .trumbowyg-dropdown button:focus {
background: #ecf0f1;
}
.trumbowyg-dropdown button svg {
float: left;
margin-right: 14px;
}
/* Modal box */
.trumbowyg-modal {
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
max-width: 520px;
width: 100%;
height: 350px;
z-index: 12;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.trumbowyg-modal-box {
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-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;
font-family: "Trebuchet MS", Helvetica, Verdana, sans-serif;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 3px;
box-shadow: rgba(0, 0, 0, 0.2) 0 2px 3px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.trumbowyg-modal-box .trumbowyg-modal-title {
font-size: 24px;
font-weight: bold;
margin: 0 0 20px;
padding: 15px 0 13px;
display: block;
border-bottom: 1px solid #d7e0e2;
}
.trumbowyg-modal-box .trumbowyg-progress {
width: 100%;
height: 3px;
position: absolute;
top: 58px;
}
.trumbowyg-modal-box .trumbowyg-progress .trumbowyg-progress-bar {
background: #2BC06A;
width: 0;
height: 100%;
-webkit-transition: width 150ms linear;
-o-transition: width 150ms linear;
transition: width 150ms linear;
}
.trumbowyg-modal-box .trumbowyg-input-row {
position: relative;
margin: 15px 12px;
border: 1px solid #dedede;
overflow: hidden;
}
.trumbowyg-modal-box .trumbowyg-input-infos {
text-align: left;
-webkit-transition: all 150ms;
-o-transition: all 150ms;
transition: all 150ms;
width: 150px;
border-right: 1px solid #dedede;
padding: 0 7px;
background-color: #fbfcfc;
position: absolute;
left: 0;
top: 0;
bottom: 0;
}
.trumbowyg-modal-box .trumbowyg-input-infos label {
color: #69878f;
overflow: hidden;
height: 27px;
line-height: 27px;
}
.trumbowyg-modal-box .trumbowyg-input-infos label, .trumbowyg-modal-box .trumbowyg-input-infos label span {
display: block;
height: 27px;
line-height: 27px;
-webkit-transition: all 150ms;
-o-transition: all 150ms;
transition: all 150ms;
}
.trumbowyg-modal-box .trumbowyg-input-infos .trumbowyg-msg-error {
color: #e74c3c;
}
.trumbowyg-modal-box .trumbowyg-input-html {
padding: 1px 1px 1px 152px;
}
.trumbowyg-modal-box .trumbowyg-input-html, .trumbowyg-modal-box .trumbowyg-input-html input, .trumbowyg-modal-box .trumbowyg-input-html textarea, .trumbowyg-modal-box .trumbowyg-input-html select {
font-size: 14px;
}
.trumbowyg-modal-box .trumbowyg-input-html input, .trumbowyg-modal-box .trumbowyg-input-html textarea, .trumbowyg-modal-box .trumbowyg-input-html select {
-webkit-transition: all 150ms;
-o-transition: all 150ms;
transition: all 150ms;
height: 27px;
line-height: 27px;
border: 0;
width: 100%;
padding: 0 7px;
}
.trumbowyg-modal-box .trumbowyg-input-html input:hover, .trumbowyg-modal-box .trumbowyg-input-html input:focus, .trumbowyg-modal-box .trumbowyg-input-html textarea:hover, .trumbowyg-modal-box .trumbowyg-input-html textarea:focus, .trumbowyg-modal-box .trumbowyg-input-html select:hover, .trumbowyg-modal-box .trumbowyg-input-html select:focus {
outline: 1px solid #95a5a6;
}
.trumbowyg-modal-box .trumbowyg-input-html input:focus, .trumbowyg-modal-box .trumbowyg-input-html textarea:focus, .trumbowyg-modal-box .trumbowyg-input-html select:focus {
background: #fbfcfc;
}
.trumbowyg-modal-box .trumbowyg-input-html input[type=checkbox] {
width: 16px;
height: 16px;
padding: 0;
}
.trumbowyg-modal-box .trumbowyg-input-html-with-checkbox {
text-align: left;
padding: 3px 1px 1px 3px;
}
.trumbowyg-modal-box .trumbowyg-input-error input, .trumbowyg-modal-box .trumbowyg-input-error select, .trumbowyg-modal-box .trumbowyg-input-error textarea {
outline: 1px solid #e74c3c;
}
.trumbowyg-modal-box .trumbowyg-input-error .trumbowyg-input-infos label span:first-child {
margin-top: -27px;
}
.trumbowyg-modal-box .error {
margin-top: 25px;
display: block;
color: red;
}
.trumbowyg-modal-box .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;
-webkit-transition: all 150ms;
-o-transition: all 150ms;
transition: all 150ms;
}
.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit {
right: 110px;
background: #2bc06a;
}
.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:hover, .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:focus {
background: #40d47e;
outline: none;
}
.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:active {
background: #25a25a;
}
.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset {
color: #555;
background: #e6e6e6;
}
.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:hover, .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:focus {
background: #fbfbfb;
outline: none;
}
.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:active {
background: #d5d5d5;
}
.trumbowyg-overlay {
position: absolute;
background-color: rgba(255, 255, 255, 0.5);
height: 100%;
width: 100%;
left: 0;
display: none;
top: 0;
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-fullscreen.trumbowyg-box,
.trumbowyg-fullscreen .trumbowyg-editor-box {
border: none;
}
.trumbowyg-fullscreen .trumbowyg-editor-box,
.trumbowyg-fullscreen .trumbowyg-textarea {
height: auto !important;
overflow: auto;
}
.trumbowyg-fullscreen .trumbowyg-overlay {
height: 100% !important;
}
.trumbowyg-fullscreen .trumbowyg-button-group .trumbowyg-fullscreen-button svg {
color: #222;
fill: transparent;
}
.trumbowyg-editor {
/*
* For resetCss option
*/
}
.trumbowyg-editor object,
.trumbowyg-editor embed,
.trumbowyg-editor video,
.trumbowyg-editor img {
max-width: 100%;
}
.trumbowyg-editor video,
.trumbowyg-editor img {
height: auto;
}
.trumbowyg-editor img {
cursor: move;
}
.trumbowyg-editor canvas:focus {
outline: none;
}
.trumbowyg-editor.trumbowyg-reset-css {
background: #fefefe !important;
font-family: "Trebuchet MS", Helvetica, Verdana, sans-serif !important;
font-size: 14px !important;
line-height: 1.45em !important;
color: #333 !important;
font-weight: normal !important;
}
.trumbowyg-editor.trumbowyg-reset-css a {
color: #15c !important;
text-decoration: underline !important;
}
.trumbowyg-editor.trumbowyg-reset-css div,
.trumbowyg-editor.trumbowyg-reset-css p,
.trumbowyg-editor.trumbowyg-reset-css ul,
.trumbowyg-editor.trumbowyg-reset-css ol,
.trumbowyg-editor.trumbowyg-reset-css blockquote {
-webkit-box-shadow: none !important;
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 !important;
}
.trumbowyg-editor.trumbowyg-reset-css iframe,
.trumbowyg-editor.trumbowyg-reset-css object,
.trumbowyg-editor.trumbowyg-reset-css hr {
margin-bottom: 15px !important;
}
.trumbowyg-editor.trumbowyg-reset-css blockquote {
margin-left: 32px !important;
font-style: italic !important;
color: #555 !important;
}
.trumbowyg-editor.trumbowyg-reset-css ul {
list-style: disc !important;
}
.trumbowyg-editor.trumbowyg-reset-css ol {
list-style: decimal !important;
}
.trumbowyg-editor.trumbowyg-reset-css ul,
.trumbowyg-editor.trumbowyg-reset-css ol {
padding-left: 20px !important;
}
.trumbowyg-editor.trumbowyg-reset-css ul ul,
.trumbowyg-editor.trumbowyg-reset-css ol ol,
.trumbowyg-editor.trumbowyg-reset-css ul ol,
.trumbowyg-editor.trumbowyg-reset-css ol ul {
border: none !important;
margin: 2px !important;
padding: 0 !important;
padding-left: 24px !important;
}
.trumbowyg-editor.trumbowyg-reset-css hr {
display: block !important;
height: 1px !important;
border: none !important;
border-top: 1px solid #CCC !important;
}
.trumbowyg-editor.trumbowyg-reset-css h1,
.trumbowyg-editor.trumbowyg-reset-css h2,
.trumbowyg-editor.trumbowyg-reset-css h3,
.trumbowyg-editor.trumbowyg-reset-css h4 {
color: #111 !important;
background: none !important;
margin: 0 !important;
padding: 0 !important;
font-weight: bold !important;
}
.trumbowyg-editor.trumbowyg-reset-css h1 {
font-size: 32px !important;
line-height: 38px !important;
margin-bottom: 20px !important;
}
.trumbowyg-editor.trumbowyg-reset-css h2 {
font-size: 26px !important;
line-height: 34px !important;
margin-bottom: 15px !important;
}
.trumbowyg-editor.trumbowyg-reset-css h3 {
font-size: 22px !important;
line-height: 28px !important;
margin-bottom: 7px !important;
}
.trumbowyg-editor.trumbowyg-reset-css h4 {
font-size: 16px !important;
line-height: 22px !important;
margin-bottom: 7px !important;
}
/*
* Dark theme
*/
.trumbowyg-dark .trumbowyg-textarea {
background: #222;
color: #fff;
border-color: #343434;
}
.trumbowyg-dark .trumbowyg-box {
border: 1px solid #343434;
}
.trumbowyg-dark .trumbowyg-box.trumbowyg-fullscreen {
background: #111;
}
.trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor *, .trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor::before {
text-shadow: 0 0 7px #ccc;
}
@media screen and (min-width: 0 \0 ) {
.trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor *, .trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor::before {
color: rgba(20, 20, 20, 0.6) !important;
}
}
@supports (-ms-accelerator: true) {
.trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor *, .trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor::before {
color: rgba(20, 20, 20, 0.6) !important;
}
}
.trumbowyg-dark .trumbowyg-box svg {
fill: #fff;
color: #fff;
}
.trumbowyg-dark .trumbowyg-button-pane {
background-color: #222;
border-bottom-color: #343434;
}
.trumbowyg-dark .trumbowyg-button-pane::before, .trumbowyg-dark .trumbowyg-button-pane::after {
background: #343434;
}
.trumbowyg-dark .trumbowyg-button-pane .trumbowyg-button-group:not(:empty)::after {
background-color: #343434;
}
.trumbowyg-dark .trumbowyg-button-pane .trumbowyg-button-group:not(:empty) .trumbowyg-fullscreen-button svg {
color: transparent;
}
.trumbowyg-dark .trumbowyg-button-pane.trumbowyg-disable .trumbowyg-button-group::after {
background-color: #2a2a2a;
}
.trumbowyg-dark .trumbowyg-button-pane button:not(.trumbowyg-disable):hover,
.trumbowyg-dark .trumbowyg-button-pane button:not(.trumbowyg-disable):focus,
.trumbowyg-dark .trumbowyg-button-pane button.trumbowyg-active {
background-color: #333;
}
.trumbowyg-dark .trumbowyg-button-pane .trumbowyg-open-dropdown::after {
border-top-color: #fff;
}
.trumbowyg-dark .trumbowyg-fullscreen .trumbowyg-button-pane .trumbowyg-button-group:not(:empty) .trumbowyg-fullscreen-button svg {
color: #ecf0f1;
fill: transparent;
}
.trumbowyg-dark .trumbowyg-dropdown {
border-color: #343434;
background: #333;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 2px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0 2px 3px;
}
.trumbowyg-dark .trumbowyg-dropdown button {
background: #333;
color: #fff;
}
.trumbowyg-dark .trumbowyg-dropdown button:hover, .trumbowyg-dark .trumbowyg-dropdown button:focus {
background: #222;
}
.trumbowyg-dark .trumbowyg-modal-box {
background-color: #333;
color: #fff;
}
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-title {
border-bottom: 1px solid #555;
color: #fff;
background: #3c3c3c;
}
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-input-row {
border-color: #222;
}
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-input-infos {
color: #eee;
background-color: #2f2f2f;
border-right-color: #222;
}
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-input-infos span {
color: #eee;
background-color: #2f2f2f;
border-color: #343434;
}
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-input-infos span.trumbowyg-msg-error {
color: #e74c3c;
}
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-input-row.trumbowyg-input-error input,
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-input-row.trumbowyg-input-error select,
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-input-row.trumbowyg-input-error textarea {
border-color: #e74c3c;
}
.trumbowyg-dark .trumbowyg-modal-box input,
.trumbowyg-dark .trumbowyg-modal-box select,
.trumbowyg-dark .trumbowyg-modal-box textarea {
border-color: #343434;
color: #fff;
background: #222;
}
.trumbowyg-dark .trumbowyg-modal-box input:hover, .trumbowyg-dark .trumbowyg-modal-box input:focus,
.trumbowyg-dark .trumbowyg-modal-box select:hover,
.trumbowyg-dark .trumbowyg-modal-box select:focus,
.trumbowyg-dark .trumbowyg-modal-box textarea:hover,
.trumbowyg-dark .trumbowyg-modal-box textarea:focus {
border-color: #626262;
}
.trumbowyg-dark .trumbowyg-modal-box input:focus,
.trumbowyg-dark .trumbowyg-modal-box select:focus,
.trumbowyg-dark .trumbowyg-modal-box textarea:focus {
background-color: #2f2f2f;
}
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit {
background: #1b7943;
}
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:hover, .trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:focus {
background: #25a25a;
}
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:active {
background: #176437;
}
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset {
background: #333;
color: #ccc;
}
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:hover, .trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:focus {
background: #444;
}
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:active {
background: #111;
}
.trumbowyg-dark .trumbowyg-overlay {
background-color: rgba(15, 15, 15, 0.6);
}