Editor escuro Sex 28 Nov 2014 - 14:50
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Nome do Arquivo: Editor escuroAutor: HeroWaar
Funcionalidade: PunBB
Categoria: Recursos de Outros Autores
Olá,
Como ja tive várias dificuldades em alterar aquele editor branco destacando em meu tema escuro, resolvi passar a todos uma 'alternativa'. Isto utiliza somente CSS, creio que seja fácil a todos de como fazer.
O visual foi alterado apenas dos ícones e o fundo da barra, a área de texto continua branca, caso alguém queira ela escura me avise para que eu esteja alterando.
Aqui esta:
[poll]
Escolha o que melhor lhe agradar.
CSS:
- Código:
.sceditor-container {
margin-top: 10px !important;
background-color: #303030 !important;
}
body, code:before, html, p, table {
color: #ddd;
}
.sceditor-toolbar {
background: #1f1f1f !important;
background-image: linear-gradient(top,#333,#1f1f1f) !important;
background-image: -moz-linear-gradient(top,#333,#1f1f1f) !important;
background-image: -ms-linear-gradient(top,#333,#1f1f1f) !important;
background-image: -o-linear-gradient(top,#333,#1f1f1f) !important;
background-image: -webkit-gradient(linear,left top,left bottom,from(#333),to(#1f1f1f)) !important;
background-image: -webkit-linear-gradient(top,#333,#1f1f1f) !important;
border: 1px solid #0d0d0d !important;
box-shadow: 0 1px 0 rgba(255,255,255,.15) inset !important;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#333333',endColorstr='#1f1f1f') !important;
moz-box-shadow: 0 1px 0 rgba(255,255,255,.15) inset !important;
padding: 6px 8px 2px !important;
webkit-box-shadow: 0 1px 0 rgba(255,255,255,.15) inset !important;
white-space: normal !important;
}
div.sceditor-grip {
background: #cfd1cf !important;
background-image: linear-gradient(top,#ebebeb,#cfd1cf) !important;
background-image: -moz-linear-gradient(top,#ebebeb,#cfd1cf) !important;
background-image: -ms-linear-gradient(top,#ebebeb,#cfd1cf) !important;
background-image: -o-linear-gradient(top,#ebebeb,#cfd1cf) !important;
background-image: -webkit-gradient(linear,left top,left bottom,from(#ebebeb),to(#cfd1cf)) !important;
background-image: -webkit-linear-gradient(top,#ebebeb,#cfd1cf) !important;
border-top: 1px solid #bfbfbf !important;
box-shadow: 0 1px 0 #fff inset !important;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#ebebeb',endColorstr='#cfd1cf') !important;
moz-box-shadow: 0 1px 0 #fff inset !important;
position: relative !important;
webkit-box-shadow: 0 1px 0 #fff inset !important;
width: 100% !important;
height: 20px !important;
}
.sceditor-button {
background: #404040 !important;
background-image: linear-gradient(top,#595959,#404040) !important;
background-image: -moz-linear-gradient(top,#595959,#404040) !important;
background-image: -ms-linear-gradient(top,#595959,#404040) !important;
background-image: -o-linear-gradient(top,#595959,#404040) !important;
background-image: -webkit-gradient(linear,left top,left bottom,from(#595959),to(#404040)) !important;
background-image: -webkit-linear-gradient(top,#595959,#404040) !important;
border: 1px solid #0d0d0d !important;
border-bottom-color: #060606 !important;
box-shadow: 0 1px 0 rgba(255,255,255,.1),0 0 2px rgba(255,255,255,.15) inset,0 1px 0 rgba(255,255,255,.15) inset !important;
color: #f2f2f2 !important;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#595959',endColorstr='#404040') !important;
font-size: 11px !important;
font-weight: bold !important;
margin: 0 0.5px !important;
moz-box-shadow: 0 1px 0 rgba(255,255,255,.1),0 0 2px rgba(255,255,255,.15) inset,0 1px 0 rgba(255,255,255,.15) inset !important;
padding: 4px 6px !important;
text-shadow: 0 1px 0 #000 !important;
webkit-box-shadow: 0 1px 0 rgba(255,255,255,.1),0 0 2px rgba(255,255,255,.15) inset,0 1px 0 rgba(255,255,255,.15) inset !important;
white-space: nowrap !important;
background-clip: padding-box !important;
border-radius: 3px !important;
cursor: pointer !important;
float: left !important;
height: 20px !important;
padding: 4px 6px !important;
text-indent: -9999px !important;
width: 16px !important;
}
.sceditor-button div{
height: 16px !important;
width: 16px !important;
background: url("http://i.imgur.com/gdKl813.png") !important;
}
.sceditor-button-bold div {
background-position: 0 -24px !important;
}
.sceditor-button-italic div {
background-position: 0 -48px !important;
}
.sceditor-button-strike div {
background-position: 0 -72px !important;
}
.sceditor-button-underline div {
background-position: 0 -144px !important;
}
.sceditor-button-emoticon div {
background-position: 0 -1056px !important;
}
.sceditor-button-left div {
background-position: 0 -1128px !important;
}
.sceditor-button-center div {
background-position: 0 -1104px !important;
}
.sceditor-button-right div {
background-position: 0 -1152px !important;
}
.sceditor-button-justify div {
background-position: 0 -1080px !important;
}
.sceditor-button-quote div {
background-position: 0 -216px !important;
}
.sceditor-button-code div {
background-position: 0 -480px !important;
}
.sceditor-button-servimg div {
background-position: 0 -695px !important;
}
.sceditor-button-image div {
background-position: 0 -936px !important;
}
.sceditor-button-link div {
background-position: 0 -1248px !important;
}
.sceditor-button-youtube div {
background-image: url("http://i.imgur.com/3ThBzsN.png") !important;
}
.sceditor-button-headers div {
background-position: 0 -408px !important;
}
.sceditor-button-subscript div {
background-position: 0 -96px !important;
}
.sceditor-button-superscript div {
background-position: 0 -120px !important;
}
.sceditor-button-fascroll div {
background-position: 0 -708px !important;
background-image: url("http://i.imgur.com/JU12pVe.png") !important;
}
.sceditor-button-farand div {
background-position: 0 -756px !important;
background-image: url(http://i.imgur.com/zpgzUmG.png) !important;
}
.sceditor-button-faupdown div {
background-image: url("http://i.imgur.com/JU12pVe.png") !important;
background-position: 0 -724px !important;
}
.sceditor-button-dailymotion div {
background-image: url(http://i.imgur.com/dr8CPHY.jpg) !important;
}
.sceditor-button-size div {
background-position: 0 -384px !important;
}
.sceditor-button-color div {
background-image: url("http://i.imgur.com/xk2fJW0.png") !important;
}
.sceditor-button-font div {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
line-height: 1.2 !important;
text-align: left !important;
text-indent: 0 !important;
width: 41px !important;
font-size: 13px !important;
color: #fff !important;
}
.sceditor-button.sceditor-button-font {
width: 38px !important;
}
.sceditor-button-removeformat div {
background-position: 0 -1680px !important;
}
.sceditor-button-source div {
background-position: 0 -1800px !important;
}
.sceditor-button-flash div {
background-position: 0 -576px !important;
}
.sceditor-button-date div {
background-image: url("http://i.imgur.com/Oq8b1nJ.gif") !important;
}
.sceditor-button-time div {
background-image: url("http://i.imgur.com/yFbOmTE.png") !important;
}
.sceditor-button-faspoiler div {
background-image: url("http://i.imgur.com/3RQ0rPx.png") !important;
}
.sceditor-button-fahide div {
background-image: url("http://i.imgur.com/PlzRV0u.png") !important;
}
.sceditor-button-bulletlist div {
background-position: 0 -1320px !important;
}
.sceditor-button-orderedlist div {
background-position: 0 -1368px !important;
}
.sceditor-button-horizontalrule div {
background-position: 0 -888px !important;
}
.sceditor-button-table div {
background-position: 0 -1896px !important;
}
.sceditor-button-more div {
background-position: 0 -1392px !important;
}
.sceditor-button-pastetext div {
background-position: 0 -1536px !important;
}
.sceditor-button.active, .sceditor-button:active, .sceditor-button:hover {
background: #1a1a1a !important;
background-image: -moz-linear-gradient(top,#262626,#1a1a1a) !important;
box-shadow: 0 0 8px rgba(0,0,0,.75) inset !important;
border: 1px solid rgba(76,76,76,0.4) !important;
}
div.sceditor-group {
background: none !important;
border-bottom: medium none !important;
}
.sceditor-button.disabled div {
opacity: 1 !important;
}