Sharinflan

Stylish AnimePT

Iniciado por Sharinflan,

8 mensagens neste tópico

Escrito (editado)

Como vi que não sou o único a preferir os sites escuros ao invés de claros, decidi editar o CSS do AnimePT. Não é o melhor estilo do mundo, mas é uma solução para não ficarem com os olhos inchados.

Para quem não sabe o que isto é, é basicamente temas para sites. Procurem por Stylish e instalem a versão adequada, dependendo do browser.

As cores utilizadas são as que uso para vários sites, wallpapers, tema, etc. Por isso, se quiserem mudar alguma cor, basta editarem os seguintes valores:

Background: #333333

Texto: #adadad

Caixa de comentar: #494949

Spoiler

@-moz-document domain("anime.pt") {
 /* PÁGINA PRINCIPAL*/

/* Barra de topo*/

header {
    background-color: #333333 !important;
}

 /* Centro Exterior*/

body {
    background-color: #333333 !important;
}

 /* Centro Médio*/

#ipsLayout_contentArea {
    padding: 20px;
    background: #333333 !important;
}

 /* Centro Interior*/

#ipsLayout_contentWrapper {
    width: 100%;
    background-color: #333333 !important;
}

 /* Barra de Inicio*/

.ipsBreadcrumb {
    background: #333333 !important;
    padding-left: 22px!important;
    padding-right: 22px!important;
    margin: 0px 0px 0px 0px!important;
    border: 0!important;
}


 /* Barra de Anúncios */

.ipsWidget.ipsWidget_horizontal .ipsWidget_title {
    font-weight: 400;
    margin-bottom: 10px;
    background: #333333 !important;
    padding: 10px;
}
    
 /* Corpo de Anúncios e Transparência das Barras de Tópicos*/

.ipsBox:not( .ipsBox_transparent ):not( .ipsModerated ) {
    background-color: #333333 !important;
}

 /* Texto do Corpo de Anúncios*/

.ipsType_richText {
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.5;
    color: #adadad !important;
}

 /* Corpo das secções*/

.ipsAreaBackground_reset {
    background: #333333 !important;
}

.ipsDataList.ipsDataList_zebra .ipsDataItem:not( .ipsDataItem_selected ):not( .ipsModerated ):not( .ipsDataItem_new ):not( .ipsDataItem_success ):not( .ipsDataItem_warning ):not( .ipsDataItem_error ):not( .ipsDataItem_info ):not( .ipsDataItem_status ):nth-child(even) {
    background: #333333 !important;
}

.ipsDataList li.ipsDataItem {
    border-bottom: 1px solid #333333 !important;
}

 /* Termos de uso*/

#ipsLayout_footer {
    margin: 0px;
    background-color: #333333 !important;
    color: #fff;
}
}

@-moz-document domain("anime.pt") {
 /* PÁGINA DE TÓPICO*/

 /* Borda exterior*/

article.cPost {
    border: 1px solid #333333 !important;
}

 /* Separador entre perfil e post*/

article.cPost aside.cAuthorPane {
    border-right: 1px solid #333333 !important;
}

 /* Texto dos posts*/

.cPost_contentWrap .ipsContained p {
    color: #adadad !important;
}

 /* Nome dos users*/

body.topic h3.cAuthorPane_author {
    color: #adadad !important;
    font-family: Roboto,sans-serif;
    font-size: 22px;
    font-weight: 700;
}

 /* Barra de Like*/

.ipsLikeRep {
    background: #333333 !important;
    border-radius: 2px;
    padding: 3px;
    line-height: 16px;
    display: inline-block;
    position: relative;
}

 /* Barra exterior de comentar*/

.ipsAreaBackground {
    background: #333333 !important;
}

 /* Corpo de comentar*/

.ipsComposeArea_editor:before {
    right: 100%;
    border-color: transparent #494949 transparent transparent !important;
}

.ipsComposeArea_editor {
    background: #494949 !important;
    position: relative;
    padding: 1px;
}

.ipsComposeArea_dummy {
    padding: 15px;
    background: #494949 !important;
    color: #707070;
    font-size: 15px;
    cursor: text;
}

.cke_top {
    white-space: normal;
    background: #494949 !important;
}

.cke_wysiwyg_frame, .cke_wysiwyg_div {
    background-color: #494949 !important;
}

body.topic .ipsAreaBackground_light {
    background: #333333 !important;
}

 /* Citação*/

.ipsQuote_citation {
    background: #494949 !important;
    margin: 0px -15px;
    padding: 5px 15px;
    color: #222;
    font-weight: bold;
    font-size: 13px;
    display: block;
}

.ipsQuote {
    margin: 0;
    padding: 0px 15px;
    border-width: 1px 1px 1px 2px;
    border-color: #494949 #494949 #494949 #494949 !important;
    border-style: solid;
    position: relative;
    background: #494949 !important;
    clear: both;
}
}

@-moz-document domain("anime.pt") {
 /* CARTAS DE PERFIL*/

.cUserHovercard {
    padding: 0;
    border: 0;
    background: #333333 !important;
}

.ipsAreaBackground .ipsList_inline li {
    margin-right: 0px;
    float: left;
    width: 25%;
    text-align: center;
    padding: 14px 0;
    border-top: 1px solid #333333 !important;
    border-right: 1px solid #333333 !important;
}

.ipsHovercard {
    background: #333333 !important;
    box-shadow: 0px 7px 20px rgba(0, 0, 0, 0.2), 0px 5px 20px rgba(0,0,0,0.1);
    border: 1px solid #333333 !important;
    border-radius: 4px;
    position: relative;
}

.ipsHovercard_stemTop .ipsHovercard_stem {
    top: 100%;
    border-color: #333333 transparent transparent transparent !important;
}

.ipsHovercard_stemTop .ipsHovercard_stem:before {
    bottom: -17px;
    border-color: #333333 transparent transparent transparent !important;
}
}

@-moz-document domain("anime.pt") {
 /* PERFIL*/

 /* Corpo*/

body.profile #ipsLayout_mainArea {
    background-color: #333333 !important;
}

 /* Botão Mural de Pensamentos*/

body.profile section.ipsColumn.ipsColumn_fluid .ipsTabs ul li a.ipsTabs_activeItem {
    background: #3498db !important;
    color: #fff !important;
    font-weight: 900;
}

body.profile section.ipsColumn.ipsColumn_fluid .ipsTabs {
    padding: 0px 0px 0 0px;
    background: #3498db !important;
}

 /* Barra lateral*/

.ipsAreaBackground_light {
    background: #333333 !important;
}

body.profile .cProfileSidebarBlock.ipsBox.ipsSpacer_bottom p {
    color: #aeb6c7;
    font-family: 'Roboto',sans-serif!important;
    font-size: 12px;
    padding-top: 8.5px;
    padding-bottom: 8.5px;
    background: #333333 !important;
    padding-left: 7px;
    padding-right: 7px;
}

#elWarningInfo {
    border-width: 1px;
    border-style: solid;
    border-color: #333333 !important;
}

.ipsWidget.ipsWidget_vertical .ipsWidget_title {
    font-size: 15px;
    color: #76829e;
    background: transparent;
    font-family: 'Roboto',sans-serif!important;
    font-weight: bold;
    border: 1px solid #333333 !important;
    border-bottom: 0;
    border-radius: 2px;
    padding: 15px;
}

body.profile .ipsWidget.ipsWidget_vertical .ipsWidget_inner {
    border: 1px solid #333333 !important;
    border-bottom: 0;
    border-radius: 2px;
}


}

@-moz-document domain("anime.pt") {
 /* PAINEL DE NOTIFICAÇÕES*/

 /* Corpo*/

.ipsDataList_readStatus .ipsDataItem:not( .ipsDataItem_unread ):not( .ipsDataItem_selected ):not( .ipsModerated ) {
    background: #333333 !important;
}

 /* Header e Footer*/

.ipsMenu_headerBar, .ipsMenu_footerBar {
    background: linear-gradient(to bottom, #333333 0%,#333333 100%) !important;
}

 /* Texto 'Notificações'*/

.ipsType_sectionHead {
    font-size: 20px;
    color: #adadad !important;
    line-height: 24px;
    font-weight: 400;
    display: inline-block;
    margin: 0;
}

 /* Bordas*/

.ipsMenu {
    background: #333333 !important;
    box-shadow: 0px 7px 20px rgba(0, 0, 0, 0.2);
    border: 1px solid #333333 !important;
    border-radius: 3px;
    z-index: 10000;
    position: absolute;
}

.ipsMenu_headerBar {
    border-bottom: 1px solid #333333 !important;
    box-shadow: 0px 1px 6px rgba(0,0,0,0.07);
    border-radius: 3px 3px 0px 0px;
}

.ipsMenu_footerBar {
    border-top: 1px solid #333333 !important;
    box-shadow: 0px -1px 6px rgba(0,0,0,0.07);
    border-radius: 0px 0px 3px 3px;
}

 /* Seta*/

.ipsMenu.ipsMenu_bottomRight:before {
    border-color: transparent transparent #333333 transparent !important;
    right: 9px;
    bottom: 100%;
}

.ipsMenu.ipsMenu_bottomRight:after {
    border-color: transparent transparent #333333 transparent !important;
    right: 10px;
    bottom: 100%;
}
}

@-moz-document domain("anime.pt") {
 /* Caixas de spoiler*/

 /* Fechada*/

.ipsSpoiler_header {
    background: #333333 !important;
    margin: 0px -15px;
    padding: 5px 15px;
    color: #adadad !important;
    font-weight: bold;
    font-size: 13px;
    display: block;
    cursor: pointer;
}

.ipsStyle_spoiler {
    margin: 0;
    padding: 0px 15px;
    border-width: 1px 1px 1px 1px;
    border-color: #404040 !important;
    border-style: solid;
    position: relative;
    background: #333333 !important;
    clear: both;
}

 /* Aberta*/

.ipsSpoiler, .ipsStyle_spoiler {
    margin: 0;
    padding: 0px 15px;
    border-width: 1px 1px 1px 1px;
    border-color: #404040 !important;
    border-style: solid;
    position: relative;
    background: #333333 !important;
    clear: both;
}
}

@-moz-document domain("anime.pt") {
 /* Mensagens privadas*/

.ipsComment:not( .ipsModerated ) .ipsComment_header {
    background: #333333 !important;
}

.ipsComment {
    position: relative;
    margin-bottom: 15px;
    padding: 0;
    background: #333 !important;
}

.ipsButtonBar {
    line-height: 1;
    background: #333333 !important;
}

.cMessage_active {
    background: #333333 !important;
    position: relative;
}

.cMessage {
    border-top: 2px solid #333 !important;
    border-bottom: 0;
}
}

@-moz-document domain("anime.pt") {
 /* Chat*/

.cometchat_tabsubtitle {
    background-color: #404040 !important;
    border-bottom: 1px solid #404040 !important;
    border-left: 1px solid #404040 !important;
    border-right: 1px solid #404040 !important;
    color: #404040 !important;
    font-family: arial,sans-serif;
    font-size: 12px;
    line-height: 1.3em!important;
    padding: 5px;
}

.cometchat_tabcontent {
    background-color: #404040 !important;
    background-position: left bottom;
    background-repeat: no-repeat;
    border-left: 1px solid #404040 !important;
    border-right: 1px solid #404040 !important;
    color: #adadad;
    line-height: 1.3em!important;
    overflow: hidden;
    padding-bottom: 1px;
    font-family: inherit;
    font-size: inherit;
    z-index: 99999;
}

.cometchat_tabclick {
    background-color: #404040!important;
    border-top: 0px!important;
    border-bottom: 1px solid #404040!important;
    border-left: 1px solid #404040!important;
    border-right: 1px solid #404040!important;
    color: #adadad!important;
    padding-bottom: 1px;
    padding-top: 10px!important;
    text-decoration: none;
}

 /* Conversa*/

.cometchat_tabcontenttext {
    white-space: pre-wrap;
    white-space: -moz-pre-wrap!important;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
    white-space: pre;
    white-space: -hp-pre-wrap;
    white-space: pre-line;
    border-bottom: 1px solid #404040 !important;
    height: 199px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 5px;
    padding-right: 8px;
    color: inherit;
    font-family: arial,sans-serif;
    font-size: 13px;
    text-align: left;
    width: 215px!important;
    background: #404040 !important;
}

.cometchat_prependMessages {
    color: #adadad !important;
    background: #404040 !important;
    cursor: pointer;
    font-family: arial,sans-serif;
    font-size: 12px;
    font-weight: bold;
    height: 18px;
    text-align: center;
    padding-top: 1px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    line-height: 18px;
    font-size: 9px;
    border-left: 1px solid #404040 !important;
    border-right: 1px solid #404040 !important;
    border-bottom: 1px solid #333 !important;
}

.cometchat_message {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #666 !important;
    font-family: inherit;
    font-size: 13px;
    border-bottom: 1px solid #404040 !important;
    background-color: #404040 !important;
    padding: 5px;
    border-left: 1px solid #404040 !important;
    border-right: 1px solid #404040 !important;
}

.cometchat_tabcontentinput {
    border: 0px;
    border-top: 1px solid #404040 !important;
    outline: none;
    padding: 4px 5px 0px 4px;
    overflow: hidden;
}

textarea.cometchat_textarea {
    background: #404040!important;
    border: none!important;
    box-shadow: none!important;
    color: #adadad!important;
    float: left;
    font-family: arial,sans-serif;
    font-size: 13px;
    height: 28px;
    outline: none;
    overflow: hidden;
    padding: 0px;
    resize: none;
    width: 175px;
    padding-top: 2px;
    line-height: 22px !important;
}

.cometchat_chatboxmessagecontent {
    background: #404040 !important;
    float: left;
    padding: 5px 4px;
    width: 175px;
    margin-bottom: 6px;
    -moz-box-shadow: 1px 1px 2px 0 #404040 !important;
    -webkit-box-shadow: 1px 1px 2px 0 #404040 !important;
    box-shadow: 1px 1px 2px 0 #404040 !important;
}

.cometchat_self {
    color: #adadad!important;
}

.cometchat_chatboxmessagefrom a>img {
    box-shadow: 0 0 1px #404040 !important;
}

.cometchat_time {
    background-color: #404040 !important;
    color: #adadad !important;
    font-family: arial,sans-serif;
    font-weight: bold;
    font-size: 9px;
    text-align: center;
    padding: 2px;
    display: table;
    line-height: 10px;
    margin: auto;
    margin-bottom: 5px;
    border: 1px solid #333 !important;
}

 /* Caixa de smilies*/

.container_body {
    height: 100%;
    width: 100%!important;
    background: #404040 !important;
}

.tab {
    float: left;
    background: #404040 !important;
    color: #adadad !important;
    text-align: center;
    cursor: pointer;
    moz-box-shadow: inset -1px 0px 0px 0px rgba(192,184,184,0.24);
    -webkit-box-shadow: inset -1px 0px 0px 0px rgba(192,184,184,0.24);
    box-shadow: inset -1px 0px 0px 0px rgba(192,184,184,0.24);
    border-right: 1px solid rgba(29,27,27,0.50);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 26px;
    border-bottom: 1px solid #404040 !important;
}

.selected h2 {
    background: #333333 !important;
    font-weight: bold;
}

.cometchat_container_title {
    cursor: default;
    background-color: #404040!important;
    border-left: 1px solid #404040!important;
    border-right: 1px solid #404040!important;
    border-top: 1px solid #404040!important;
    color: #adadad!important;
    font-family: arial,sans-serif;
    font-size: 13px;
    line-height: 14px;
    font-weight: normal;
    padding: 12px 6px;
    padding-right: 0px;
}

.cometchat_container_body {
    border-left: 1px solid #404040!important;
    border-bottom: 1px solid #404040!important;
    border-right: 1px solid #404040!important;
    background-color: #404040!important;
    position: relative;
    overflow: hidden;
}

.cometchat_other {
    background: #404040!important;
    padding: 5px 4px;
    position: relative;
}
}

Se estiverem no Google Chrome, apaguem os @-moz-document domain("anime.pt") {

Para aplicarem este estilo têm de criar um novo estilo e simplesmente copiam isto para lá e dão um nome. No Google Chrome têm de definir que se aplica em URLs no domínio anime.pt.

Se criaram, planeiam criar ou editar este estilo, metam aqui os vossos (se quiserem).

Editado por Sharinflan
2 membros gostaram disto!

Partilhar esta mensagem

Link para a mensagem

Escrito:

Andas a ver mr robot a mais :P

És um fixe pudim. Isto jode um bocado os icones aqui na barra por cima de onde se escreve, mas como nunca uso isso, cagativo. Se encontrar algo de anormal apito

Partilhar esta mensagem

Link para a mensagem

Escrito:

há 3 horas, volt disse:

Andas a ver mr robot a mais :P

És um fixe pudim. Isto jode um bocado os icones aqui na barra por cima de onde se escreve, mas como nunca uso isso, cagativo. Se encontrar algo de anormal apito

Já fazia isto antes de ver sequer Mr. Robot e tinha aplicado antes também, mas agora está mesmo demasiado claro :lol:

E sim, os icons estão meio marados. Isso é porque são imagens, tal como faz o facebook, e estão alojados aqui https://www.anime.pt/applications/core/interface/ckeditor/ckeditor/plugins/icons.png?t=G6CE

Podia editar e alojar no imgur e redireccionar, mas o mais provável era depois alguns icons ficarem trocados e outras coisas estranhas, tal como me aconteceu no facebook.

Se muita gente se queixar, posso tentar editar, alojar no imgur e redireccionar, mas não garanto que resulte.

Isto também foi meio feito às 3 pancadas hoje de manhã (mas ainda deu para aprender como fazer comments), por isso reclamem se algo estiver fora do sitio.

Partilhar esta mensagem

Link para a mensagem

Escrito:

Tens ai algum preview de como ficou??

Partilhar esta mensagem

Link para a mensagem

Escrito:

há 46 minutos, kimanii disse:

Tens ai algum preview de como ficou??

Home

Spoiler

ahxGmr6.png

Tópico

Spoiler

Xy7R8tu.png

Perfil

Spoiler

MHEUbyr.png

 

4 membros gostaram disto!

Partilhar esta mensagem

Link para a mensagem

Escrito:

@Sharinflan, quando puderes e se conseguires, adiciona aí a linha para isto também funcionar na parte das pm's sff !

 

E já agora, se não for pedir muito, para as caixas de spoiler também :P

 

sankyu*

Partilhar esta mensagem

Link para a mensagem

Escrito:

há 14 horas, volt disse:

@Sharinflan, quando puderes e se conseguires, adiciona aí a linha para isto também funcionar na parte das pm's sff !

 

E já agora, se não for pedir muito, para as caixas de spoiler também :P

 

sankyu*

Feito. É só ires buscar o novo código ao primeiro post e substituir o antigo.

Aproveitei e também alterei as caixas de chat. Eu não uso, mas certamente há quem use.

Se algo estiver marado, apita.

2 membros gostaram disto!

Partilhar esta mensagem

Link para a mensagem

Escrito:

Só recebi hoje resposta à mensagem em chat de ontem, por isso só agora vi que a caixa das recebidas fica branca, pois tem um código diferente das mensagens enviadas.

1º post editado.

@volt, acrescenta só isto no fim, se não quiseres estar a copiar tudo.

Spoiler

.cometchat_other {
    background: #404040!important;
    padding: 5px 4px;
    position: relative;
}
}

 

Partilhar esta mensagem

Link para a mensagem
Ir para a Lista de Tópicos Barbaridades Barbáricas