DJK

AVISO:

Esta é uma página component usada internamente pela Wiki Lusófona. Ela foi feita para ser usada e incluída em outras páginas.

avaliação: +3+–x

O quê isso faz

Faz a barra lateral ser escondida por padrão e ativada por um botão que fica no canto, semelhante à versão de celular do site.

Como usar

1. Copie o código abaixo.

2. Cole no artigo depois do Black Highlighter e qualquer outra include de Tema.

[[include :scp-pt-br:component:toggle-sidebar-bhl]]

3. (Opcional) Estilizar o botão da barra lateral se estiver usando um tema.

Também há 5 variáveis de CSS disponíveis para estilizar o botão se necessário.
Para as cores, é fortemente sugerido que você use as variáveis de cor disponíveis do BHL que podem ser encontradas aqui.

:root:lang(pt-br) {
--toggle-button-bg: hex/rgb/hsl color;
--toggle-border-color: hex/rgb/hsl color;
--toggle-border-width: px/rem/em;
--toggle-icon-color: hex/rgb/hsl color;
--toggle-roundness: percentage;
}

+ Mostrar código do componente

Este é um componente que anima o cabeçalho ACS ao carregar.

Como usar:

Coloque isso em qualquer lugar em seu artigo:

[[include :scp-pt-br:component:acs-animation]]

E feito!

Exemplo: scp-5935

Observação:

- Duas variáveis, --timeScale e --timeDelay, controlam o tempo da animação. Por exemplo:

[[module CSS]]
:root {
--timeScale: 2;
--timeDelay: 0.5s;
}
[[/module]]

--timeScale desacelera a animação inteira por um fator de 2, e --timeDelay atrasa o início da animação em meio segundo. Os valores padrão são 1 e 0s, respectivamente.

Para mudar os valores padrão, coloque o código acima depois da [[include]]. --timeDelay é recomendado se o ACS não for o primeiro elemento de conteúdo, ou se você estiver usando ele com outros módulos de animação (como o Efeito Fade In.)

- Provavelmente incompatível com outros tipos de cabeçalhos ACS*.

*Para usar com o ACS Lite do PeppersGhostPeppersGhost, adicione o seguinte código após a [[include]]:

[[module CSS]]
/*-- ACS Lite Animation Compatibility Patch --*/
.anom-bar > .bottom-box::before { display: none; }
.anom-bar > .bottom-box { box-shadow: none!important; }
div.diamond-part { clip-path: none; animation: none; box-shadow: none!important; }
@media (max-width: 480px) {
div.top-right-box { clip-path: polygon(0% -30%, 100% -30%, 100% 130%, 0% 130%); }
}
[[/module]]

- Inspirado nas obras de AnAnomalousWriterAnAnomalousWriter.

Código Fonte:

:root {
    --timeScale: 1;
    --timeDelay: 0s;
}
 
/* Converting middle divider from box-shadow to ::before pseudo-element */
.anom-bar > .bottom-box { box-shadow: none!important; }
.anom-bar > .bottom-box::before {
    position: absolute;
    content: " ";
    width: 100%;
    height: 0.5rem;
    background-color: rgb(var(--black-monochrome, 12, 12, 12));
    transform: translateY(-0.74rem);
}
 
/* DIVIDER */
.anom-bar > .bottom-box::before {
    animation-name: divider;
    animation-duration: calc(0.74s * var(--timeScale));
    animation-delay: calc(0.1s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.32,.38,.39,.94);
    animation-fill-mode: backwards;
}
 
/* CLASSIFIED LEVEL BARS */
div.top-center-box  > * {
    animation-name: bar;
    animation-duration: calc(0.45s * var(--timeScale));
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-fill-mode: backwards;
}
div.top-center-box > :nth-child(1) { animation-delay: calc(0.2s * var(--timeScale) + var(--timeDelay)); }
div.top-center-box > :nth-child(2) { animation-delay: calc(0.32s * var(--timeScale) + var(--timeDelay)); }
div.top-center-box > :nth-child(3) { animation-delay: calc(0.45s * var(--timeScale) + var(--timeDelay)); }
div.top-center-box > :nth-child(4) { animation-delay: calc(0.61s * var(--timeScale) + var(--timeDelay)); }
div.top-center-box > :nth-child(5) { animation-delay: calc(0.75s * var(--timeScale) + var(--timeDelay)); }
div.top-center-box > :nth-child(6) { animation-delay: calc(0.95s * var(--timeScale) + var(--timeDelay)); }
 
/* TOP TEXT */
div.top-left-box, div.top-right-box {
    clip-path: polygon( 0% -50%, 150% -50%, 150% 100%, 0% 100%);
}
 
div.top-left-box > *, div.top-right-box > * {
    position: relative;
    animation-name: bottomup;
    animation-duration: calc(0.65s * var(--timeScale));
    animation-delay: calc(0.5s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-fill-mode: backwards;
}
 
/*-----------------------------------*/
/*-----------------------------------*/
 
/* CONTAINMENT, DISRUPTION, RISK CLASSES */
div.text-part > * {
    clip-path: polygon( 0% 0%, 100% 0%, 100% 100%, 0% 100%);
    animation-name: expand2;
    animation-duration: calc(0.5s * var(--timeScale));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.12,.41,.27,.99);
    animation-fill-mode: backwards;
}
div.text-part > :nth-child(1) {
    animation-name: expand1;
}
div.text-part > :nth-child(1) { animation-delay: calc(0.6s * var(--timeScale) + var(--timeDelay)); }
div.text-part > :nth-child(2) { animation-delay: calc(0.75s * var(--timeScale) + var(--timeDelay)); }
div.text-part > :nth-child(3) { animation-delay: calc(0.86s * var(--timeScale) + var(--timeDelay)); }
 
div.main-class::before, div.main-class::after {
    animation-name: iconslide;
    animation-duration: calc(0.45s * var(--timeScale));
    animation-delay: calc(0.8s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.12,.41,.27,.99);
    animation-fill-mode: backwards;
}
 /* BOTTOM TEXT */
div.main-class > *,  div.disrupt-class > *, div.risk-class > * {
    white-space: nowrap;
    animation-name: flowIn;
    animation-duration: calc(0.42s * var(--timeScale));
    animation-delay: calc(0.75s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-fill-mode: backwards;
}
 
/*-----------------------------------*/
/*-----------------------------------*/
 
/* DIAMOND */
div.arrows {
    animation-name: arrowspin;
    animation-duration: calc(0.7s * var(--timeScale));
    animation-delay: calc(0.6s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.12,.41,.27,.99);
    animation-fill-mode: backwards;
}
 
div.quadrants > * {
    animation-name: fade;
    animation-duration: calc(0.3s * var(--timeScale));
    animation-delay: calc(1.4s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.12,.41,.27,.99);
    animation-fill-mode: backwards;
}
 
div.top-icon, div.right-icon, div.left-icon, div.bottom-icon {
    animation-name: nodegrow;
    animation-duration: calc(0.4s * var(--timeScale));
    animation-delay: calc(1.4s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.12,.41,.27,.99);
    animation-fill-mode: backwards;
}
div.diamond-part {
    clip-path: polygon( -10% 0.37%, 120% 0.37%, 120% 100%, -10% 100%);
    animation-name: diamondBorder;
    animation-duration: calc(0.8s * var(--timeScale));
    animation-delay: calc(0.5s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.32,.38,.39,.94);
    animation-fill-mode: backwards;
    will-change: box-shadow;
}
 
/* MOBILE QUERY */
@media (max-width: 480px ) {
    .anom-bar > .bottom-box::before {
        display:none;
    }
    .anom-bar > .bottom-box {
        box-shadow: 0 -0.5rem 0 0 rgb(var(--black-monochrome, 12, 12, 12))!important;
    }
    div.top-center-box  > * {
        animation-name: bar-mobile;
        animation-duration: calc(0.9s * var(--timeScale));
    }
    div.top-center-box > :nth-child(1) { animation-delay: calc(0.1s * var(--timeScale) + var(--timeDelay)); }
    div.top-center-box > :nth-child(2) { animation-delay: calc(0.2s * var(--timeScale) + var(--timeDelay)); }
    div.top-center-box > :nth-child(3) { animation-delay: calc(0.3s * var(--timeScale) + var(--timeDelay)); }
    div.top-center-box > :nth-child(4) { animation-delay: calc(0.4s * var(--timeScale) + var(--timeDelay)); }
    div.top-center-box > :nth-child(5) { animation-delay: calc(0.5s * var(--timeScale) + var(--timeDelay)); }
    div.top-center-box > :nth-child(6) { animation-delay: calc(0.6s * var(--timeScale) + var(--timeDelay)); }
 
}
 
/*--- Motion Accessibility ---*/
@media (prefers-reduced-motion) {
    div.anom-bar-container { --timeScale: 0!important; }
}
 
/*-------------------------*/
 
@keyframes divider {
    from { max-width: 0%;  }
    to { max-width: 100%; }
}
 
@keyframes bar {
    from { max-width: 0%; }
    to { max-width: 100%; }
}
@keyframes bar-mobile {
    from { max-height: 0%; }
    to { max-height: 100%; }
}
 
@keyframes bottomup {
    from { top: 100px; }
    to { top: 0; }
}
 
@keyframes expand1 {
    from { opacity: 0; clip-path: inset(0 calc(100% - 0.75rem) 0 0); }
    to { opacity: 1; clip-path: inset(0); }
}
@keyframes iconslide {
    from { opacity: 0; transform: translateX(-5rem); }
    to { opacity: 1; transform: translateX(0); }
}
 
@keyframes expand2 {
    from { opacity: 0; width: 1%; }
    to { opacity: 1; width: calc(100% - 0.25rem); }
}
@keyframes fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
 
@keyframes flowIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
 
@keyframes arrowspin {
    from { clip-path: circle(0%); transform: rotate(135deg); }
    to { clip-path: circle(75%); transform: rotate(0deg); }
}
@keyframes nodegrow {
    from { transform: scale(0);}
    to {  transform: scale(1);}
}
@keyframes diamondBorder {
    from { box-shadow: -0.5rem -20rem 0 0 rgb(var(--black-monochrome, 12, 12, 12)); }
    to { box-shadow: -0.5rem 0 0 0 rgb(var(--black-monochrome, 12, 12, 12)); }
}

avaliação: +3+–x

O quê isso faz

Faz a barra lateral ser escondida por padrão e ativada por um botão que fica no canto, semelhante à versão de celular do site.

Como usar

1. Copie o código abaixo.

2. Cole no artigo depois do Black Highlighter e qualquer outra include de Tema.

[[include :scp-pt-br:component:toggle-sidebar-bhl]]

3. (Opcional) Estilizar o botão da barra lateral se estiver usando um tema.

Também há 5 variáveis de CSS disponíveis para estilizar o botão se necessário.
Para as cores, é fortemente sugerido que você use as variáveis de cor disponíveis do BHL que podem ser encontradas aqui.

:root:lang(pt-br) {
--toggle-button-bg: hex/rgb/hsl color;
--toggle-border-color: hex/rgb/hsl color;
--toggle-border-width: px/rem/em;
--toggle-icon-color: hex/rgb/hsl color;
--toggle-roundness: percentage;
}

+ Mostrar código do componente
avaliação: +3+–x

O que isso faz

Reorganiza o cabeçalho para que os títulos e logotipos sejam centralizados

Como usar

1. Copie o código abaixo.

2. Cole no artigo depois do Black Highlighter ou qualquer outro tema incluso.

[[include :scp-pt-br:component:centered-header-bhl]]

+ Mostrar código de componente
+ Mostrar código do tema
avaliação: +3+–x

Em qualquer wiki:

[[include :scp-pt-br:component:djk]]

Olá a todos, sou djkaktus. Este é um componente pessoal que estou usando para aliviar o sofrimento de um Elenee FishTruckElenee FishTruck que, até hoje, trabalhou incansavelmente para atualizar todas as mais de 140 das minhas páginas toda vez que atualizo minha formatação padrão para algo que realmente gosto. Dessa forma, posso editar todos eles em um único lugar.

Algumas coisas que isso faz:

1) Adiciona o Black Highlighter a página (Santificado seja nosso Woed)
2) Modifica o Black Highlighter usando o tema BHL Penumbra (Parabéns a Estrella)
3) Modifica o BHL Penumbra com um monte de mudanças de cor nesse tipo de variante retrô que eu gosto muito
4) Adiciona uma customização ACS para se adequar às alterações do Penumbra
5) Adiciona Fade In, Barra Lateral Colapsável e componente de Animação ACS
6) Me permite alterar qualquer um destes por capricho

Estou constantemente me esforçando para encontrar o tema mais representativo possível para a maioria dos meus artigos. Isso efetivamente me permite aproximar-me desse ideal sem ter que atualizar uma centena de páginas toda vez que mudo alguma coisa.

sup {
vertical-align: top; position: relative; top: -0.5em;
}
:root:lang(pt-br){
--header-title: "A FUNDAÇÃO";
--header-subtitle: "DEPARTAMENTO DE CONTENÇÃO";
--lgurl: url(https://scp-wiki.wdfiles.com/local--files/component%3Adjk/scpnewlogo.png);
--white-monochrome: 15, 15, 15 ;
--pale-gray-monochrome: 35, 35, 35 ;
--light-pale-gray-monochrome: 35, 35, 35 ;
--very-light-gray-monochrome: 60, 60, 60 ;
--light-gray-monochrome: 160, 160, 160 ;
--gray-monochrome: 200, 200, 200 ;
--dark-gray-monochrome: 220, 220, 220 ;
--black-monochrome: 245, 245, 245 ;
--accentColor: 83, 49, 49 ;
--background-gradient-color: var(--light-gray-monochrome);
--five-color: 83, 49, 49 ;
--four-color: 83, 49, 49 ;
--three-color: 83, 49, 49 ;
--two-color: 83, 49, 49 ;
--one-color: 83, 49, 49 ;
--swatch-menubg-dark-color: var(--very-light-gray-monochrome);
}
#header h1 a::before {
-webkit-text-stroke: initial;
}
#header h2 span::before {
  content: none;
}
 
#page-content .info-container {
    --link-color: 0, 0, 0 ;
}
 
#page-content .info-container .translation_block {
    display: none;
}
 
#page-content .info-container .collapsible-block-link,
#page-content .info-container:hover .collapsible-block-link {
    line-height: 1.6em;
}
 
#page-content .info-container .collapsible-block-folded,
#page-content .info-container .collapsible-block-unfolded-link {
    display: grid;
background: #533131;
}
 
#page-content .info-container .collapsible-block-folded .collapsible-block-link,
#page-content .info-container .collapsible-block-link {
    -webkit-mask: unset;
            mask: unset;
    background: transparent;
    grid-column: 1;
    grid-row: 1;
    opacity: 0;
}
 
#page-content .info-container .collapsible-block-folded::before,
#page-content .info-container .collapsible-block-unfolded-link::before {
    --wght: 800;
    content: "DJK";
    color: #fff;
    font-family: Inter, Arimo, Verdana, Geneva, "Helvetica Neue", "Helvetica", Arial, sans-serif;;
    display: block;
    pointer-events: none;
    grid-column: 1;
    grid-row: 1;
}
#page-content div.warning-top-box>h1 {
color: rgb(var(--black-monochrome));
}
#page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link {
margin: 0;
background: transparent;
}
#footer a, #footer a:visited {
    color: rgb(var(--black-monochrome));
}
#side-bar .scpnet-interwiki-wrapper::before {
  mix-blend-mode: color !important;
}
#side-bar iframe.scpnet-interwiki-frame {
  filter: none !important;
}
#page-content table.wiki-content-table th {
color: rgb(var(--black-monochrome));
}
#license-area {
    color: rgb(var(--black-monochrome));
}
#license-area a, #license-area a:visited {
color: rgb(var(--black-monochrome));
}
table.page-files th {
color: rgb(var(--black-monochrome));
}
.top-right-box > .level {
line-height: 0;
}
.scp-image-block {
        border: solid 0.5rem rgb(var(--pale-gray-monochrome));
        border-bottom: solid 0rem rgb(var(--pale-gray-monochrome));
        box-shadow: 0rem 0.26rem 0rem 0rem rgb(var(--accentColor));
        box-sizing: border-box;
    }
 
    .scp-image-block .scp-image-caption {
        background-color: rgb(var(--pale-gray-monochrome));
        border: solid 0.25rem rgb(var(--pale-gray-monochrome));
        color: rgb(var(--black-monochrome));
        font-size: 0.84rem;
}
div[id*=page-options-bottom]>a:after {
    background-color: rgb(var(--black-monochrome));
}
div.menu-item a:hover {
color: rgb(var(--black-monochrome)) !important;
}
.bibitems .title, .footnotes-footer .title {
color: rgb(var(--black-monochrome)) !important;
}
#header div[class*=top-bar]>ul>li>ul {
    background: rgba(var(--gray-monochrome));
}
.code pre, .code p, .code {
    background-color: rgb(var(--pale-gray-monochrome));
    color: rgb(var(--black-monochrome));
}
componenteotraduzido
revisão da página: 22, última edição: 01 Feb 2022 09:35
Editar Avalie (+3) Etiquetas Discutir (1) Histórico Arquivos Impressão Ferramentas do site + Opções
Salvo indicação em contrário, o conteúdo desta página é licenciado sob Creative Commons Attribution-ShareAlike 3.0 License