[For 1.8] - [Tutorial] Replace Editor icons with font awesome 5 for MyBB 1.8.21 [SCEditor]
Description:
A editor based on default Mybb editor using font awesome 5 icons for [SCEditor]
Introduction:
Hey all,
If you need a editor based on default Mybb editor using font awesome 5 icons, this is for you.
This is a quick and simple tutorial. * keep in mind to make a backup of your jscripts folder.
What you will get:
![[Image: New-Thread-in-My-Forum-2.png]]()
Requirement: MyBB 1.8.21 ( and the ability to desire to continue where this leaves off )
Instructions:
1) For the themes that will use this editor theme add this to your themes headerinclude template:
2) Download font-awesome specific files here:
Download link: http://s000.tinyupload.com/index.php?fil...6428479658
3) Upload files:
Upload path:
** the download file has the correct directory structure. So think of "Upload" as your forum root directory. ( Upload = MyBBRoot )
NOTE: for this tutorial we will base it off the existing mybb.css editor theme but this can be done with any of them if desired...
4) Create file:
Filename: jquery.sceditor.mybb-fa5.css
Filepath:
5) Edit file: jquery.sceditor.mybb-fa5.css
Fill with:
6) Create file:
Filename: mybb-fa5.css
Filepath:
7) Edit file:
Fill with:
NOTE: There are some icons that I did not get around to, as this was a rather quick job just simply to get font awesome icons on the editor and is simply shared in the hopes that this will get folks started and they can "diy" / continue from where this leaves off. Any icons that I did not get to, I set the icon as ellipsis "f141" as a placeholder so folks can find those and continue from there.
8) Activate Mybb-fa5.css editor style in theme.
Ok, now that you have the base setup..., you can edit anyway you like..., here is a quick and small example:
![[Image: New-Thread-in-My-Forum-3.png]]()
To get this you would replace Mybb-fa5.css with:
Ok, so, say now you feel like perhaps you want to have a dark with the previous parts of the tutorial in it......
What you will get:
![[Image: Post-Reply-to-testing-1.png]]()
You can either do this in the existing files or copy the existing files and rename those copies for this, and in this part we will rename the files so as to keep it simple and such.
Copy file: jquery.sceditor.mybb-fa5.css
and rename file: jquery.sceditor.mybb-fa5-dark.css
Edit file: jquery.sceditor.mybb-fa5-dark.css
Replace with:
Copy file: mybb-fa5.css
and rename file: mybb-fa5-dark.css
Edit file: mybb-fa5-dark.css
Replace with:
Have fun and continue further editing!
Final note: since this is shared as is in the hopes that folks will find it useful, edit, modify and continue with this further, please feel free to share any continuations of this via this thread....
Description:
A editor based on default Mybb editor using font awesome 5 icons for [SCEditor]
Introduction:
Hey all,
If you need a editor based on default Mybb editor using font awesome 5 icons, this is for you.
This is a quick and simple tutorial. * keep in mind to make a backup of your jscripts folder.
What you will get:
Requirement: MyBB 1.8.21 ( and the ability to desire to continue where this leaves off )
Instructions:
1) For the themes that will use this editor theme add this to your themes headerinclude template:
<!-- Add Font Awesome -->
<link rel="stylesheet" href="{$mybb->asset_url}/jscripts/sceditor/themes/mybb-fa5/css/all.css">2) Download font-awesome specific files here:
Download link: http://s000.tinyupload.com/index.php?fil...6428479658
3) Upload files:
Upload path:
public_html(MyBBRoot)/jscripts/sceditor/themes/mybb-fa5/** the download file has the correct directory structure. So think of "Upload" as your forum root directory. ( Upload = MyBBRoot )
NOTE: for this tutorial we will base it off the existing mybb.css editor theme but this can be done with any of them if desired...
4) Create file:
Filename: jquery.sceditor.mybb-fa5.css
Filepath:
public_html(MyBBRoot)/jscripts/sceditor/styles/jquery.sceditor.mybb-fa5.css5) Edit file: jquery.sceditor.mybb-fa5.css
Fill with:
/*! SCEditor | (C) 2011-2013, Sam Clarke | sceditor.com/license */
html, body, p, code:before, table {
margin: 0;
padding: 0;
font-family: Tahoma, Verdana, Arial, Sans-Serif;
font-size: 14px;
color: #333;
}
html {
/* Needed so the cursor will be placed at the end of the content
when the there isn't enought content to fill the full viewport */
height: 100%;
/* Needed for iOS scrolling bug fix */
overflow: auto;
-webkit-overflow-scrolling: touch;
}
body {
/* Needed for iOS scrolling bug fix */
position: relative;
overflow: auto;
/* Needed so the cursor will be placed at the end of the content
when the there isn't enought content to fill the full viewport */
min-height: 100%;
word-wrap: break-word;
}
table, td {
border: 1px dotted #000;
/* Show empty cells so they can be edited */
empty-cells: show;
}
code:before {
font-weight: bold;
content: 'Code:';
display: block;
border-bottom: 1px solid #ccc;
padding: 4px 0 3px 0;
margin-bottom: 10px;
}
code.phpcodeblock:before {
content: 'PHP Code:' !important;
}
code {
font-family: Monaco, Consolas, Courier, monospace;
font-size: 13px !important;
padding: 10px;
position: relative;
background: white;
margin: .25em .05em 0 0;
border: 1px solid #ccc;
white-space: pre;
display: block;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}
.ie6 code, .ie7 code {
margin-top: 0;
}
code:before, code {
display: block;
text-align: left;
}
blockquote {
position: relative;
background: white;
margin: .25em .05em 0 0;
border: 1px solid #ccc;
padding: 10px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}
blockquote cite {
font-weight: bold;
font-style: normal;
display: block;
font-size: 1em;
border-bottom: 1px solid #ccc;
margin-bottom: 10px;
padding-bottom: 3px;
}
/* prevent divs from being collapsed */
div {
min-height: 1.25em;
}
h1, h2, h3, h4, h5, h6 {
padding: 0;
margin: 0;
}
ul, ol {
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
}
img {
max-width: 100%;
}
font[size="1"] {
font-size: xx-small;
}
font[size="2"] {
font-size: x-small;
}
font[size="3"] {
font-size: small;
}
font[size="4"] {
font-size: medium;
}
font[size="5"] {
font-size: large;
}
font[size="6"] {
font-size: x-large;
}
font[size="7"] {
font-size: xx-large;
}
6) Create file:
Filename: mybb-fa5.css
Filepath:
public_html(MyBBRoot)/jscripts/sceditor/themes/mybb-fa5.css7) Edit file:
Fill with:
/*! SCEditor | (C) 2011-2016, Sam Clarke | sceditor.com/license */
.sceditor-button div,
div.sceditor-grip {
width: 16px;
height: 16px
font-family: "Font Awesome 5 Free";
display: inline-block;
font-weight: 900;
}
/* FA 5 images */
.sceditor-button-youtube div {
content: "\f141";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
}
.sceditor-button-link div:before {
content: "\f0c1";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
}
.sceditor-button-unlink div:before {
content: "\f127";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
}
.sceditor-button-underline div:before {
content: "\f0cd";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
}
.sceditor-button-time div:before {
content: "\f017";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
}
.sceditor-button-table div:before {
content: "\f0ce";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
}
.sceditor-button-superscript div:before {
content: "\f141";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
}
.sceditor-button-subscript div:before {
content: "\f141";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
}
.sceditor-button-strike div:before {
content: "\f0cc";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
}
.sceditor-button-source div:before {
content: "\f328";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
}
.sceditor-button-size div:before {
content: "\f034";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
}
.sceditor-button-rtl div:before {
content: "\f141";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
}
.sceditor-button-right div:before {
content: "\f038";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
}
.sceditor-button-removeformat div:before {
content: "\f2ea";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
}
.sceditor-button-quote div:before {
content: "\f10e";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
}
.sceditor-button-print div:before {
content: "\f02f";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
}
.sceditor-button-pastetext div:before {
content: "\f141";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
}
.sceditor-button-paste div:before {
content: "\f141";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
}
.sceditor-button-outdent div:before {
content: "\f141";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
}
.sceditor-button-orderedlist div:before {
content: "\f0cb";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
}
.sceditor-button-maximize div:before {
content: "\f31e";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
}
.sceditor-button-ltr div:before {
content: "\f141";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
}
.sceditor-button-left div:before {
content: "\f036";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
}
.sceditor-button-justify div:before {
content: "\f039";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
}
.sceditor-button-italic div:before {
content: "\f033";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
}
.sceditor-button-indent div:before {
content: "\f03c";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
}
.sceditor-button-image div:before {
content: "\f03e";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
}
.sceditor-button-horizontalrule div:before {
content: "\f337";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
}
.sceditor-button-format div:before {
content: "\f141";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
}
.sceditor-button-font div:before {
content: "\f031";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
}
.sceditor-button-emoticon div:before {
content: "\f118";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
}
.sceditor-button-email div:before {
content: "\f1d8";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
}
.sceditor-button-date div:before {
content: "\f073";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
}
.sceditor-button-cut div:before {
content: "\f0c4";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
}
.sceditor-button-copy div:before {
content: "\f0c5";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
}
.sceditor-button-color div:before {
content: "\f53f";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
}
.sceditor-button-code div:before {
content: "\f121";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
}
.sceditor-button-center div:before {
content: "\f037";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
}
.sceditor-button-bulletlist div:before {
content: "\f0ca";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
}
.sceditor-button-bold div:before {
content: "\f032";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
}
div.sceditor-grip:before {
content: "\f0b2";
color: #333;
font-family: "Font Awesome 5 Free";
}
.rtl div.sceditor-grip:before {
content: "\f0b2";
color: #333;
font-family: "Font Awesome 5 Free";
right: auto;
left: 0;
}
.sceditor-container {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
position: relative;
background: padding-box #fff;
border: 1px solid #d9d9d9;
font-size: 13px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
color: #333;
line-height: 1;
font-weight: 700;
height: 250px;
border-radius: 4px
}
.sceditor-container *,
.sceditor-container :after,
.sceditor-container {
-webkit-box-sizing: content-box;
box-sizing: content-box
}
.sceditor-container,
.sceditor-container div,
div.sceditor-dropdown,
div.sceditor-dropdown div {
padding: 0;
margin: 0;
z-index: 3
}
.sceditor-container iframe,
.sceditor-container textarea {
display: block;
-ms-flex: 1 1 0%;
-webkit-box-flex: 1;
flex: 1 1 0%;
line-height: 1.25;
border: 0;
outline: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #111;
padding: 0;
margin: 5px;
resize: none;
background: #fff;
height: auto !important;
width: auto !important;
width: calc(100% - 10px) !important;
min-height: 1px
}
.sceditor-container textarea {
margin: 7px 5px
}
div.sceditor-dnd-cover {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(255, 255, 255, .2);
border: 5px dashed #aaa;
z-index: 200;
font-size: 2em;
text-align: center;
color: #aaa
}
div.sceditor-dnd-cover p {
position: relative;
top: 45%;
pointer-events: none
}
div.sceditor-resize-cover {
position: absolute;
top: 0;
left: 0;
background: #000;
width: 100%;
height: 100%;
z-index: 10;
opacity: .3
}
div.sceditor-grip {
/* overflow: hidden; */
width: 16px;
height: 16px;
cursor: pointer;
position: absolute;
bottom: 0;
right: 0;
z-index: 3;
line-height: 0
}
div.sceditor-grip.has-icon {
background-image: none
}
.sceditor-maximize {
position: fixed;
top: 0;
left: 0;
height: 100% !important;
width: 100% !important;
border-radius: 0;
background-clip: padding-box;
z-index: 2000
}
body.sceditor-maximize,
html.sceditor-maximize {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
overflow: hidden
}
.sceditor-maximize div.sceditor-grip {
display: none
}
.sceditor-maximize div.sceditor-toolbar {
border-radius: 0;
background-clip: padding-box
}
div.sceditor-dropdown {
position: absolute;
border: 1px solid #ccc;
background: padding-box #fff;
z-index: 4000;
padding: 10px;
font-weight: 400;
font-size: 15px;
border-radius: 2px;
-webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .2);
box-shadow: 1px 2px 4px rgba(0, 0, 0, .2)
}
div.sceditor-dropdown *,
div.sceditor-dropdown :after,
div.sceditor-dropdown {
-webkit-box-sizing: border-box;
box-sizing: border-box
}
div.sceditor-dropdown a,
div.sceditor-dropdown a:link {
color: #333
}
div.sceditor-dropdown form {
margin: 0
}
div.sceditor-dropdown label {
display: block;
font-weight: 700;
color: #3c3c3c;
padding: 4px 0
}
div.sceditor-dropdown input,
div.sceditor-dropdown textarea {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
outline: 0;
padding: 4px;
border: 1px solid #ccc;
border-top-color: #888;
margin: 0 0 .75em;
border-radius: 1px;
background-clip: padding-box
}
div.sceditor-dropdown textarea {
padding: 6px
}
div.sceditor-dropdown input:focus,
div.sceditor-dropdown textarea:focus {
border-color: #666 #aaa #aaa;
-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1);
box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1)
}
div.sceditor-dropdown .button {
font-weight: 700;
color: #444;
padding: 6px 12px;
background: padding-box #ececec;
border: 1px solid #ccc;
border-radius: 2px;
cursor: pointer;
margin: .3em 0 0
}
div.sceditor-dropdown .button:hover {
background: #f3f3f3;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .15);
box-shadow: 0 1px 1px rgba(0, 0, 0, .15)
}
div.sceditor-font-picker,
div.sceditor-fontsize-picker,
div.sceditor-format {
padding: 6px 0
}
div.sceditor-color-picker {
padding: 4px
}
div.sceditor-emoticons,
div.sceditor-more-emoticons {
padding: 0
}
.sceditor-pastetext textarea {
border: 1px solid #bbb;
width: 20em
}
.sceditor-emoticons img,
.sceditor-more-emoticons img {
padding: 0;
cursor: pointer;
margin: 2px
}
.sceditor-more {
border-top: 1px solid #bbb;
display: block;
text-align: center;
cursor: pointer;
font-weight: 700;
padding: 6px 0
}
.sceditor-dropdown a:hover {
background: #eee
}
.sceditor-font-option,
.sceditor-fontsize-option,
.sceditor-format a {
display: block;
padding: 7px 10px;
cursor: pointer;
text-decoration: none;
color: #222
}
.sceditor-fontsize-option {
padding: 7px 13px
}
.sceditor-color-column {
float: left
}
.sceditor-color-option {
display: block;
border: 2px solid #fff;
height: 18px;
width: 18px;
overflow: hidden
}
.sceditor-color-option:hover {
border: 1px solid #aaa
}
div.sceditor-toolbar {
overflow: hidden;
padding: 2px 2px 1px;
background: #f7f7f7;
border-bottom: 1px solid #c0c0c0;
line-height: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
div.sceditor-group {
display: inline-block;
background: #eee;
margin: 1px 5px 1px 0;
padding: 1px;
border-bottom: 1px solid #ccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.sceditor-button {
float: left;
cursor: pointer;
padding: 3px 5px;
width: 16px;
height: 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 1px solid #eee;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.ie6 .sceditor-button, .ie7 .sceditor-button {
float: none!important;
display: inline;
zoom: 1;
}
.ie6 .sceditor-button {
padding: 0;
}
.ie6 .sceditor-button div {
margin: 5px;
}
.ie7 .sceditor-button div {
margin: 5px 0;
}
.sceditor-button:hover, .sceditor-button:active, .sceditor-button.active {
background: #fff;
/*-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.3), inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.3), inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.3), inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2)*/border: 1px solid #ddd;
}
.sceditor-button:active {
background: #fff;
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.3), inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 0 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.3), inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 0 8px rgba(0, 0, 0, 0.3);
box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.3), inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 0 8px rgba(0, 0, 0, 0.3);
}
.sceditor-button.disabled:hover {
background: inherit;
cursor: default;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.sceditor-button, .sceditor-button div {
display: block;
}
.sceditor-button div {
display: inline-block;
/* margin: 2px 0; */
margin: 10px 0;
padding: 0;
/* overflow: hidden; */
line-height: 0;
font-size: 0;
color: transparent;
}
.sceditor-button.disabled div {
opacity: .3;
}
.sceditor-button svg {
display: inline-block;
height: 16px;
width: 16px;
margin: 2px 0;
fill: #111;
text-decoration: none;
pointer-events: none;
line-height: 1
}
.sceditor-button.disabled svg {
fill: #888
}
.sceditor-button.has-icon div {
display: none
}
.sceditor-button.text,
.sceditor-button.text div,
.sceditor-button.text-icon,
.sceditor-button.text-icon div,
.text .sceditor-button,
.text .sceditor-button div,
.text-icon .sceditor-button,
.text-icon .sceditor-button div {
display: inline-block;
width: auto;
line-height: 16px;
font-size: 1em;
color: inherit;
text-indent: 0;
}
.sceditor-button.has-icon div,
.sceditor-button.text div,
.text .sceditor-button div,
.text-icon .sceditor-button.has-icon div {
padding: 0 2px;
background: 0 0;
}
.sceditor-button.text svg,
.text .sceditor-button svg {
display: none;
}
.sceditor-button.text-icon div,
.text-icon .sceditor-button div {
padding: 0 2px 0 20px;
}
.rtl div.sceditor-toolbar {
text-align: right;
}
.rtl .sceditor-button {
float: right;
}
/* Additional Buttons (for MyBB) */
.sceditor-button-video div:before {
content: "\f008";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
}
.sceditor-button-php div:before {
content: "\f120";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
}
NOTE: There are some icons that I did not get around to, as this was a rather quick job just simply to get font awesome icons on the editor and is simply shared in the hopes that this will get folks started and they can "diy" / continue from where this leaves off. Any icons that I did not get to, I set the icon as ellipsis "f141" as a placeholder so folks can find those and continue from there.
8) Activate Mybb-fa5.css editor style in theme.
Ok, now that you have the base setup..., you can edit anyway you like..., here is a quick and small example:
To get this you would replace Mybb-fa5.css with:
/*! SCEditor | (C) 2011-2016, Sam Clarke | sceditor.com/license */
.sceditor-button div,
div.sceditor-grip {
width: 16px;
height: 16px
font-family: "Font Awesome 5 Free";
display: inline-block;
font-weight: 900;
}
/* FA 5 images */
.sceditor-button-youtube div {
content: "\f141";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #333, 0 0 5px #555;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-link div:before {
content: "\f0c1";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #333, 0 0 5px #555;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-unlink div:before {
content: "\f127";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #333, 0 0 5px #555;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-underline div:before {
content: "\f0cd";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #333, 0 0 5px #555;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-time div:before {
content: "\f017";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #333, 0 0 5px #555;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-table div:before {
content: "\f0ce";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #333, 0 0 5px #555;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-superscript div:before {
content: "\f141";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #333, 0 0 5px #555;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-subscript div:before {
content: "\f141";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #333, 0 0 5px #555;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-strike div:before {
content: "\f0cc";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #333, 0 0 5px #555;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-source div:before {
content: "\f328";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #333, 0 0 5px #555;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-size div:before {
content: "\f034";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #333, 0 0 5px #555;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-rtl div:before {
content: "\f141";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #333, 0 0 5px #555;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-right div:before {
content: "\f038";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #333, 0 0 5px #555;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-removeformat div:before {
content: "\f2ea";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #333, 0 0 5px #555;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-quote div:before {
content: "\f10e";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #333, 0 0 5px #555;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-print div:before {
content: "\f02f";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #333, 0 0 5px #555;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-pastetext div:before {
content: "\f141";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #333, 0 0 5px #555;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-paste div:before {
content: "\f141";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #333, 0 0 5px #555;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-outdent div:before {
content: "\f141";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #333, 0 0 5px #555;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-orderedlist div:before {
content: "\f0cb";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #333, 0 0 5px #555;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-maximize div:before {
content: "\f31e";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #333, 0 0 5px #555;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-ltr div:before {
content: "\f141";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #333, 0 0 5px #555;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-left div:before {
content: "\f036";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #333, 0 0 5px #555;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-justify div:before {
content: "\f039";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #333, 0 0 5px #555;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-italic div:before {
content: "\f033";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #333, 0 0 5px #555;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-indent div:before {
content: "\f03c";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #333, 0 0 5px #555;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-image div:before {
content: "\f03e";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #333, 0 0 5px #555;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-horizontalrule div:before {
content: "\f337";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #333, 0 0 5px #555;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-format div:before {
content: "\f141";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #333, 0 0 5px #555;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-font div:before {
content: "\f031";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #333, 0 0 5px #555;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-emoticon div:before {
content: "\f118";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #333, 0 0 5px #555;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-email div:before {
content: "\f1d8";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #333, 0 0 5px #555;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-date div:before {
content: "\f073";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #333, 0 0 5px #555;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-cut div:before {
content: "\f0c4";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #333, 0 0 5px #555;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-copy div:before {
content: "\f0c5";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #333, 0 0 5px #555;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-color div:before {
content: "\f53f";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #333, 0 0 5px #555;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-code div:before {
content: "\f121";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #333, 0 0 5px #555;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-center div:before {
content: "\f037";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #333, 0 0 5px #555;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-bulletlist div:before {
content: "\f0ca";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #333, 0 0 5px #555;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-bold div:before {
content: "\f032";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #333, 0 0 5px #555;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
div.sceditor-grip:before {
content: "\f0b2";
color: #333;
font-family: "Font Awesome 5 Free";
text-shadow: 0 0 3px #333, 0 0 5px #555;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.rtl div.sceditor-grip:before {
content: "\f0b2";
color: #333;
font-family: "Font Awesome 5 Free";
right: auto;
left: 0;
text-shadow: 0 0 3px #333, 0 0 5px #555;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-container {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
position: relative;
background: padding-box #fff;
border: 1px solid #d9d9d9;
font-size: 13px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
color: #333;
line-height: 1;
font-weight: 700;
height: 250px;
border-radius: 4px
}
.sceditor-container *,
.sceditor-container :after,
.sceditor-container {
-webkit-box-sizing: content-box;
box-sizing: content-box
}
.sceditor-container,
.sceditor-container div,
div.sceditor-dropdown,
div.sceditor-dropdown div {
padding: 0;
margin: 0;
z-index: 3
}
.sceditor-container iframe,
.sceditor-container textarea {
display: block;
-ms-flex: 1 1 0%;
-webkit-box-flex: 1;
flex: 1 1 0%;
line-height: 1.25;
border: 0;
outline: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #111;
padding: 0;
margin: 5px;
resize: none;
background: #fff;
height: auto !important;
width: auto !important;
width: calc(100% - 10px) !important;
min-height: 1px
}
.sceditor-container textarea {
margin: 7px 5px
}
div.sceditor-dnd-cover {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(255, 255, 255, .2);
border: 5px dashed #aaa;
z-index: 200;
font-size: 2em;
text-align: center;
color: #aaa
}
div.sceditor-dnd-cover p {
position: relative;
top: 45%;
pointer-events: none
}
div.sceditor-resize-cover {
position: absolute;
top: 0;
left: 0;
background: #000;
width: 100%;
height: 100%;
z-index: 10;
opacity: .3
}
div.sceditor-grip {
/* overflow: hidden; */
width: 16px;
height: 16px;
cursor: pointer;
position: absolute;
bottom: 0;
right: 0;
z-index: 3;
line-height: 0
}
div.sceditor-grip.has-icon {
background-image: none
}
.sceditor-maximize {
position: fixed;
top: 0;
left: 0;
height: 100% !important;
width: 100% !important;
border-radius: 0;
background-clip: padding-box;
z-index: 2000
}
body.sceditor-maximize,
html.sceditor-maximize {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
overflow: hidden
}
.sceditor-maximize div.sceditor-grip {
display: none
}
.sceditor-maximize div.sceditor-toolbar {
border-radius: 0;
background-clip: padding-box
}
div.sceditor-dropdown {
position: absolute;
border: 1px solid #ccc;
background: padding-box #fff;
z-index: 4000;
padding: 10px;
font-weight: 400;
font-size: 15px;
border-radius: 2px;
-webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .2);
box-shadow: 1px 2px 4px rgba(0, 0, 0, .2)
}
div.sceditor-dropdown *,
div.sceditor-dropdown :after,
div.sceditor-dropdown {
-webkit-box-sizing: border-box;
box-sizing: border-box
}
div.sceditor-dropdown a,
div.sceditor-dropdown a:link {
color: #333
}
div.sceditor-dropdown form {
margin: 0
}
div.sceditor-dropdown label {
display: block;
font-weight: 700;
color: #3c3c3c;
padding: 4px 0
}
div.sceditor-dropdown input,
div.sceditor-dropdown textarea {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
outline: 0;
padding: 4px;
border: 1px solid #ccc;
border-top-color: #888;
margin: 0 0 .75em;
border-radius: 1px;
background-clip: padding-box
}
div.sceditor-dropdown textarea {
padding: 6px
}
div.sceditor-dropdown input:focus,
div.sceditor-dropdown textarea:focus {
border-color: #666 #aaa #aaa;
-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1);
box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1)
}
div.sceditor-dropdown .button {
font-weight: 700;
color: #444;
padding: 6px 12px;
background: padding-box #ececec;
border: 1px solid #ccc;
border-radius: 2px;
cursor: pointer;
margin: .3em 0 0
}
div.sceditor-dropdown .button:hover {
background: #f3f3f3;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .15);
box-shadow: 0 1px 1px rgba(0, 0, 0, .15)
}
div.sceditor-font-picker,
div.sceditor-fontsize-picker,
div.sceditor-format {
padding: 6px 0
}
div.sceditor-color-picker {
padding: 4px
}
div.sceditor-emoticons,
div.sceditor-more-emoticons {
padding: 0
}
.sceditor-pastetext textarea {
border: 1px solid #bbb;
width: 20em
}
.sceditor-emoticons img,
.sceditor-more-emoticons img {
padding: 0;
cursor: pointer;
margin: 2px
}
.sceditor-more {
border-top: 1px solid #bbb;
display: block;
text-align: center;
cursor: pointer;
font-weight: 700;
padding: 6px 0
}
.sceditor-dropdown a:hover {
background: #eee
}
.sceditor-font-option,
.sceditor-fontsize-option,
.sceditor-format a {
display: block;
padding: 7px 10px;
cursor: pointer;
text-decoration: none;
color: #222
}
.sceditor-fontsize-option {
padding: 7px 13px
}
.sceditor-color-column {
float: left
}
.sceditor-color-option {
display: block;
border: 2px solid #fff;
height: 18px;
width: 18px;
overflow: hidden
}
.sceditor-color-option:hover {
border: 1px solid #aaa
}
div.sceditor-toolbar {
overflow: hidden;
padding: 2px 2px 1px;
background: #f7f7f7;
border-bottom: 1px solid #c0c0c0;
line-height: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
div.sceditor-group {
display: inline-block;
background: #eee;
margin: 1px 5px 1px 0;
padding: 1px;
border-bottom: 1px solid #ccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.sceditor-button {
float: left;
cursor: pointer;
padding: 3px 5px;
width: 16px;
height: 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 1px solid #eee;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.ie6 .sceditor-button, .ie7 .sceditor-button {
float: none!important;
display: inline;
zoom: 1;
}
.ie6 .sceditor-button {
padding: 0;
}
.ie6 .sceditor-button div {
margin: 5px;
}
.ie7 .sceditor-button div {
margin: 5px 0;
}
.sceditor-button:hover, .sceditor-button:active, .sceditor-button.active {
background: #fff;
/*-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.3), inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.3), inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.3), inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2)*/border: 1px solid #ddd;
}
.sceditor-button:active {
background: #fff;
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.3), inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 0 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.3), inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 0 8px rgba(0, 0, 0, 0.3);
box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.3), inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 0 8px rgba(0, 0, 0, 0.3);
}
.sceditor-button.disabled:hover {
background: inherit;
cursor: default;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.sceditor-button, .sceditor-button div {
display: block;
}
.sceditor-button div {
display: inline-block;
/* margin: 2px 0; */
margin: 10px 0;
padding: 0;
/* overflow: hidden; */
line-height: 0;
font-size: 0;
color: transparent;
}
.sceditor-button.disabled div {
opacity: .3;
}
.sceditor-button svg {
display: inline-block;
height: 16px;
width: 16px;
margin: 2px 0;
fill: #111;
text-decoration: none;
pointer-events: none;
line-height: 1
}
.sceditor-button.disabled svg {
fill: #888
}
.sceditor-button.has-icon div {
display: none
}
.sceditor-button.text,
.sceditor-button.text div,
.sceditor-button.text-icon,
.sceditor-button.text-icon div,
.text .sceditor-button,
.text .sceditor-button div,
.text-icon .sceditor-button,
.text-icon .sceditor-button div {
display: inline-block;
width: auto;
line-height: 16px;
font-size: 1em;
color: inherit;
text-indent: 0;
}
.sceditor-button.has-icon div,
.sceditor-button.text div,
.text .sceditor-button div,
.text-icon .sceditor-button.has-icon div {
padding: 0 2px;
background: 0 0;
}
.sceditor-button.text svg,
.text .sceditor-button svg {
display: none;
}
.sceditor-button.text-icon div,
.text-icon .sceditor-button div {
padding: 0 2px 0 20px;
}
.rtl div.sceditor-toolbar {
text-align: right;
}
.rtl .sceditor-button {
float: right;
}
/* Additional Buttons (for MyBB) */
.sceditor-button-video div:before {
content: "\f008";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #333, 0 0 5px #555;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-php div:before {
content: "\f120";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #333, 0 0 5px #555;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
Ok, so, say now you feel like perhaps you want to have a dark with the previous parts of the tutorial in it......
What you will get:
You can either do this in the existing files or copy the existing files and rename those copies for this, and in this part we will rename the files so as to keep it simple and such.
Copy file: jquery.sceditor.mybb-fa5.css
and rename file: jquery.sceditor.mybb-fa5-dark.css
Edit file: jquery.sceditor.mybb-fa5-dark.css
Replace with:
/*! SCEditor | (C) 2011-2013, Sam Clarke | sceditor.com/license */
html, body, p, code:before, table {
margin: 0;
padding: 0;
font-family: Tahoma, Verdana, Arial, Sans-Serif;
font-size: 14px;
color: #fff;
}
html {
/* Needed so the cursor will be placed at the end of the content
when the there isn't enought content to fill the full viewport */
height: 100%;
/* Needed for iOS scrolling bug fix */
overflow: auto;
-webkit-overflow-scrolling: touch;
}
body {
/* Needed for iOS scrolling bug fix */
position: relative;
overflow: auto;
/* Needed so the cursor will be placed at the end of the content
when the there isn't enought content to fill the full viewport */
min-height: 100%;
word-wrap: break-word;
}
table, td {
border: 1px dotted #000;
/* Show empty cells so they can be edited */
empty-cells: show;
}
code:before {
font-weight: bold;
content: 'Code:';
display: block;
border-bottom: 1px solid #333;
padding: 4px 0 3px 0;
margin-bottom: 10px;
}
code.phpcodeblock:before {
content: 'PHP Code:' !important;
}
code {
font-family: Monaco, Consolas, Courier, monospace;
font-size: 13px !important;
padding: 10px;
position: relative;
background: #444;
margin: .25em .05em 0 0;
border: 1px solid #333;
white-space: pre;
display: block;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}
.ie6 code, .ie7 code {
margin-top: 0;
}
code:before, code {
display: block;
text-align: left;
}
blockquote {
position: relative;
background: #444;
margin: .25em .05em 0 0;
border: 1px solid #333;
padding: 10px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}
blockquote cite {
font-weight: bold;
font-style: normal;
display: block;
font-size: 1em;
border-bottom: 1px solid #333;
margin-bottom: 10px;
padding-bottom: 3px;
}
/* prevent divs from being collapsed */
div {
min-height: 1.25em;
}
h1, h2, h3, h4, h5, h6 {
padding: 0;
margin: 0;
}
ul, ol {
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
}
img {
max-width: 100%;
}
font[size="1"] {
font-size: xx-small;
}
font[size="2"] {
font-size: x-small;
}
font[size="3"] {
font-size: small;
}
font[size="4"] {
font-size: medium;
}
font[size="5"] {
font-size: large;
}
font[size="6"] {
font-size: x-large;
}
font[size="7"] {
font-size: xx-large;
}
Copy file: mybb-fa5.css
and rename file: mybb-fa5-dark.css
Edit file: mybb-fa5-dark.css
Replace with:
/*! SCEditor | (C) 2011-2016, Sam Clarke | sceditor.com/license */
.sceditor-button div,
div.sceditor-grip {
width: 16px;
height: 16px
font-family: "Font Awesome 5 Free";
display: inline-block;
font-weight: 900;
}
/* FA 5 images */
.sceditor-button-youtube div {
content: "\f141";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-link div:before {
content: "\f0c1";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-unlink div:before {
content: "\f127";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-underline div:before {
content: "\f0cd";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-time div:before {
content: "\f017";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-table div:before {
content: "\f0ce";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-superscript div:before {
content: "\f141";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-subscript div:before {
content: "\f141";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-strike div:before {
content: "\f0cc";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-source div:before {
content: "\f328";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-size div:before {
content: "\f034";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-rtl div:before {
content: "\f141";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-right div:before {
content: "\f038";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-removeformat div:before {
content: "\f2ea";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-quote div:before {
content: "\f10e";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-print div:before {
content: "\f02f";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-pastetext div:before {
content: "\f141";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-paste div:before {
content: "\f141";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-outdent div:before {
content: "\f141";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-orderedlist div:before {
content: "\f0cb";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-maximize div:before {
content: "\f31e";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-ltr div:before {
content: "\f141";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-left div:before {
content: "\f036";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-justify div:before {
content: "\f039";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-italic div:before {
content: "\f033";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-indent div:before {
content: "\f03c";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-image div:before {
content: "\f03e";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-horizontalrule div:before {
content: "\f337";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-format div:before {
content: "\f141";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-font div:before {
content: "\f031";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-emoticon div:before {
content: "\f118";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-email div:before {
content: "\f1d8";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-date div:before {
content: "\f073";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-cut div:before {
content: "\f0c4";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-copy div:before {
content: "\f0c5";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-color div:before {
content: "\f53f";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-code div:before {
content: "\f121";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-center div:before {
content: "\f037";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-bulletlist div:before {
content: "\f0ca";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-bold div:before {
content: "\f032";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
div.sceditor-grip:before {
content: "\f0b2";
color: #333;
font-family: "Font Awesome 5 Free";
text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.rtl div.sceditor-grip:before {
content: "\f0b2";
color: #333;
font-family: "Font Awesome 5 Free";
right: auto;
left: 0;
text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-container {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
position: relative;
background: padding-box #303030;
border: 1px solid #444;
font-size: 13px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
color: #333;
line-height: 1;
font-weight: 700;
height: 250px;
border-radius: 4px
}
.sceditor-container *,
.sceditor-container :after,
.sceditor-container {
-webkit-box-sizing: content-box;
box-sizing: content-box
}
.sceditor-container,
.sceditor-container div,
div.sceditor-dropdown,
div.sceditor-dropdown div {
padding: 0;
margin: 0;
z-index: 3
}
.sceditor-container iframe,
.sceditor-container textarea {
display: block;
-ms-flex: 1 1 0%;
-webkit-box-flex: 1;
flex: 1 1 0%;
line-height: 1.25;
border: 0;
outline: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #fff;
padding: 0;
margin: 5px;
resize: none;
background: #303030;
height: auto !important;
width: auto !important;
width: calc(100% - 10px) !important;
min-height: 1px;
}
.sceditor-container textarea {
margin: 7px 5px;
}
div.sceditor-dnd-cover {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(255, 255, 255, .2);
border: 5px dashed #ddd;
z-index: 200;
font-size: 2em;
text-align: center;
color: #ddd;
}
div.sceditor-dnd-cover p {
position: relative;
top: 45%;
pointer-events: none
}
div.sceditor-resize-cover {
position: absolute;
top: 0;
left: 0;
background: #000;
width: 100%;
height: 100%;
z-index: 10;
opacity: .3;
}
div.sceditor-grip {
/* overflow: hidden; */
width: 16px;
height: 16px;
cursor: pointer;
position: absolute;
bottom: 0;
right: 0;
z-index: 3;
line-height: 0;
}
div.sceditor-grip.has-icon {
background-image: none;
}
.sceditor-maximize {
position: fixed;
top: 0;
left: 0;
height: 100% !important;
width: 100% !important;
border-radius: 0;
background-clip: padding-box;
z-index: 2000;
}
body.sceditor-maximize,
html.sceditor-maximize {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
.sceditor-maximize div.sceditor-grip {
display: none;
}
.sceditor-maximize div.sceditor-toolbar {
border-radius: 0;
background-clip: padding-box;
}
div.sceditor-dropdown.sceditor-font-picker {
margin-top: 33px !important;
}
div.sceditor-dropdown.sceditor-color-picker {
margin-top: 33px !important;
}
div.sceditor-dropdown.sceditor-fontsize-picker {
margin-top: 33px !important;
}
div.sceditor-dropdown.sceditor-insertimage {
margin-top: 33px !important;
}
div.sceditor-dropdown.sceditor-insertemail {
margin-top: 33px !important;
}
div.sceditor-dropdown.sceditor-insertlink {
margin-top: 33px !important;
}
div.sceditor-dropdown.sceditor-emoticons {
margin-top: 33px !important;
}
div.sceditor-dropdown.sceditor-insertvideo {
margin-top: 33px !important;
}
div.sceditor-dropdown.sceditor-insertcode {
margin-top: 33px !important;
}
div.sceditor-dropdown.sceditor-insertphp {
margin-top: 33px !important;
}
select#videotype {
background-color: #333;
color: #A0A0A0;
border: 1px solid #555;
border-radius: 0 0 0 0;
}
select#videotype a:focus {
color: #fff;
}
div.sceditor-dropdown {
position: absolute;
border: 1px solid #333;
background: padding-box #444;
z-index: 4000;
padding: 10px;
font-weight: 400;
font-size: 15px;
border-radius: 2px;
-webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .2);
box-shadow: 1px 2px 4px rgba(0, 0, 0, .2)
}
div.sceditor-dropdown *,
div.sceditor-dropdown :after,
div.sceditor-dropdown {
-webkit-box-sizing: border-box;
box-sizing: border-box
}
div.sceditor-dropdown a,
div.sceditor-dropdown a:link {
color: #f1f1f1;
}
div.sceditor-dropdown form {
margin: 0
}
div.sceditor-dropdown label {
display: block;
font-weight: 700;
color: #fff;
padding: 4px 0;
}
div.sceditor-dropdown input,
div.sceditor-dropdown textarea {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
outline: 0;
padding: 4px;
border: 1px solid #555;
border-top-color: #555;
background-color: #303030;
margin: 0 0 .75em;
border-radius: 3px;
background-clip: padding-box;
color: #fff;
}
div.sceditor-dropdown textarea {
padding: 6px;
}
div.sceditor-dropdown input:focus,
div.sceditor-dropdown textarea:focus {
border-color: #777 #777 #777;
-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1);
box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1)
color: #777;
}
div.sceditor-dropdown .button {
font-weight: 700;
color: #fff;
padding: 6px 12px;
background: padding-box #333;
border: 1px solid #555;
border-radius: 2px;
cursor: pointer;
margin: .3em 0 0
}
div.sceditor-dropdown .button:hover {
background: #555;
border: 1px solid #444;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .15);
box-shadow: 0 1px 1px rgba(0, 0, 0, .15)
}
div.sceditor-font-picker,
div.sceditor-fontsize-picker,
div.sceditor-format {
padding: 6px 0
}
div.sceditor-color-picker {
padding: 4px
}
div.sceditor-emoticons,
div.sceditor-more-emoticons {
padding: 0
}
.sceditor-pastetext textarea {
border: 1px solid #bbb;
width: 20em;
color: #fff;
}
.sceditor-emoticons img,
.sceditor-more-emoticons img {
padding: 0;
cursor: pointer;
margin: 2px;
}
.sceditor-more {
border-top: 1px solid #444;
display: block;
text-align: center;
cursor: pointer;
font-weight: 700;
padding: 6px 0;
}
.sceditor-dropdown a:hover {
background: #333;
}
.sceditor-font-option,
.sceditor-fontsize-option,
.sceditor-format a {
display: block;
padding: 7px 10px;
cursor: pointer;
text-decoration: none;
color: #fff;
}
.sceditor-fontsize-option {
padding: 7px 13px
}
.sceditor-color-column {
float: left
}
.sceditor-color-option {
display: block;
border: 2px solid #333;
height: 18px;
width: 18px;
overflow: hidden
}
.sceditor-color-option:hover {
border: 1px solid #ddd;
}
div.sceditor-toolbar {
overflow: hidden;
padding: 2px 2px 1px;
background: #555;
border-bottom: 1px solid #444;
line-height: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
div.sceditor-group {
display: inline-block;
background: #444;
margin: 1px 5px 1px 0;
padding: 1px;
border-bottom: 1px solid #555;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.sceditor-button {
float: left;
cursor: pointer;
padding: 3px 5px;
width: 16px;
height: 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 1px solid #444;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.ie6 .sceditor-button, .ie7 .sceditor-button {
float: none!important;
display: inline;
zoom: 1;
}
.ie6 .sceditor-button {
padding: 0;
}
.ie6 .sceditor-button div {
margin: 5px;
}
.ie7 .sceditor-button div {
margin: 5px 0;
}
.sceditor-button:hover, .sceditor-button:active, .sceditor-button.active {
background: #444;
/*-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.3), inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.3), inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.3), inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2)*/border: 1px solid #ddd;
}
.sceditor-button:active {
background: #333;
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.3), inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 0 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.3), inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 0 8px rgba(0, 0, 0, 0.3);
box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.3), inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 0 8px rgba(0, 0, 0, 0.3);
}
.sceditor-button.disabled:hover {
background: inherit;
cursor: default;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.sceditor-button, .sceditor-button div {
display: block;
}
.sceditor-button div {
display: inline-block;
/* margin: 2px 0; */
margin: 10px 0;
padding: 0;
/* overflow: hidden; */
line-height: 0;
font-size: 0;
color: transparent;
}
.sceditor-button.disabled div {
opacity: .3;
}
.sceditor-button svg {
display: inline-block;
height: 16px;
width: 16px;
margin: 2px 0;
fill: #fff;
text-decoration: none;
pointer-events: none;
line-height: 1
}
.sceditor-button.disabled svg {
fill: #888
}
.sceditor-button.has-icon div {
display: none
}
.sceditor-button.text,
.sceditor-button.text div,
.sceditor-button.text-icon,
.sceditor-button.text-icon div,
.text .sceditor-button,
.text .sceditor-button div,
.text-icon .sceditor-button,
.text-icon .sceditor-button div {
display: inline-block;
width: auto;
line-height: 16px;
font-size: 1em;
color: inherit;
text-indent: 0;
}
.sceditor-button.has-icon div,
.sceditor-button.text div,
.text .sceditor-button div,
.text-icon .sceditor-button.has-icon div {
padding: 0 2px;
background: 0 0;
}
.sceditor-button.text svg,
.text .sceditor-button svg {
display: none;
}
.sceditor-button.text-icon div,
.text-icon .sceditor-button div {
padding: 0 2px 0 20px;
}
.rtl div.sceditor-toolbar {
text-align: right;
}
.rtl .sceditor-button {
float: right;
}
/* Additional Buttons (for MyBB) */
.sceditor-button-video div:before {
content: "\f008";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
.sceditor-button-php div:before {
content: "\f120";
color: #333;
font-family: "Font Awesome 5 Free";
font-size: 15px;
text-shadow: 0 0 3px #007FD6, 0 0 5px #aaa;
-webkit-text-fill-color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ccc;
}
Have fun and continue further editing!
Final note: since this is shared as is in the hopes that folks will find it useful, edit, modify and continue with this further, please feel free to share any continuations of this via this thread....