Você não está conectado. Conecte-se ou registre-se

Editor escuro

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

1Info Editor escuro em Sex Nov 28, 2014 2:50 pm

HeroWaar

avatar
Membro elite

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 Dez 23, 2014 9:04 am, editado 3 vez(es) (Razão : Código atualizado)

Ver perfil do usuário http://badlands.com.br/

2Info Re: Editor escuro em Sex Nov 28, 2014 3:36 pm

DeeW.

avatar
Membro elite

Não seria mais 'perfeito' deixar a parte onde 'escreve' escuro?
E não entendi porque deveria utilizar JS!!!
Parabéns amigo, ótimo estilo!

Ver perfil do usuário

3Info Re: Editor escuro em Ter Dez 09, 2014 7:17 pm

HeroWaar

avatar
Membro elite

@Deew,

Atualizado!

HeroWaar,

Ver perfil do usuário http://badlands.com.br/

4Info Re: Editor escuro em Sex Dez 12, 2014 4:53 pm

deaneo8

avatar
Membro ativo

nice topic guy keep up the good love the website

Ver perfil do usuário

5Info Re: Editor escuro em Ter Dez 16, 2014 11:33 am

fascicularia

avatar
Membro ativo

Superbe. Merci HeroWaar

Ver perfil do usuário http://forumessai2.forumactif.org

6Info Re: Editor escuro em Sex Jan 23, 2015 9:22 am

Convidado


Convidado
Parabéns amigo, ótimo estilo!

7Info Re: Editor escuro em Seg Fev 23, 2015 1:18 pm

EJJSRR

avatar
Membro ativo

postando para ver o codigo

parabéns bom efeito

Ver perfil do usuário http://gamezer.foruns.com.pt/

8Info Re: Editor escuro em Sex Maio 01, 2015 1:19 am

Desadikta

avatar
Membro ativo

postando para ver o codigo ty

Ver perfil do usuário

Conteúdo patrocinado


Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum