Boas-vindas ao Power Pixel

Junte-se a comunidade! Crie o seu próprio conteúdo, e faça amizades.EntrarCriar uma conta

Editor escuro

+2
DeeW.
HeroWaar
6 participantes

HeroWaar HeroWaar  • Sex 28 Nov 2014 - 14:50

Editor escuro Empty Editor escuro Sex 28 Nov 2014 - 14:50

Reputação da mensagem: 100% (13 votos)
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Nome do Arquivo: Editor escuro
Autor: 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. Smile

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;
}
[/poll]


Última edição por HeroWaar em Ter 23 Dez 2014 - 9:04, editado 3 vez(es) (Motivo da edição : Código atualizado)

DeeW. DeeW.  • Sex 28 Nov 2014 - 15:36

Editor escuro Empty Re: Editor escuro Sex 28 Nov 2014 - 15:36

Reputação da mensagem: 100% (1 votos)
Não seria mais 'perfeito' deixar a parte onde 'escreve' escuro?
E não entendi porque deveria utilizar JS!!!
Parabéns amigo, ótimo estilo!

HeroWaar HeroWaar  • Ter 9 Dez 2014 - 19:17

Editor escuro Empty Re: Editor escuro Ter 9 Dez 2014 - 19:17

@Deew,

Atualizado!

HeroWaar,

deaneo8 deaneo8  • Sex 12 Dez 2014 - 16:53

Editor escuro Empty Re: Editor escuro Sex 12 Dez 2014 - 16:53

nice topic guy keep up the good love the website

fascicularia fascicularia  • Ter 16 Dez 2014 - 11:33

Editor escuro Empty Re: Editor escuro Ter 16 Dez 2014 - 11:33

Superbe. Merci HeroWaar

Anonymous Convidado  • Sex 23 Jan 2015 - 9:22

Editor escuro Empty Re: Editor escuro Sex 23 Jan 2015 - 9:22

Parabéns amigo, ótimo estilo!

EJJSRR EJJSRR  • Seg 23 Fev 2015 - 13:18

Editor escuro Empty Re: Editor escuro Seg 23 Fev 2015 - 13:18

postando para ver o codigo

parabéns bom efeito

Desadikta Desadikta  • Sex 1 maio 2015 - 1:19

Editor escuro Empty Re: Editor escuro Sex 1 maio 2015 - 1:19

postando para ver o codigo ty

Conteúdo patrocinado  • 

Editor escuro Empty Re: Editor escuro

Permissões neste sub-fórum
Não podes responder a tópicos