Tema Inkblot (Tema do Estúdio Waldon)
What this is
A bunch of miscellaneous CSS 'improvements' that I, 
Croquembouche, use on a bunch of pages because I think it makes them easier to deal with.
The changes this component makes are bunch of really trivial modifications to ease the writing experience and to make documenting components/themes a bit easier (which I do a lot). It doesn't change anything about the page visually for the reader — the changes are for the writer.
I wouldn't expect translations of articles that use this component to also use this component, unless the translator likes it and would want to use it anyway.
This component probably won't conflict with other components or themes, and even if it does, it probably won't matter too much.
Usage
On any wiki:
[[include :scp-wiki:component:croqstyle]]
This component is designed to be used on other components. When using on another component, be sure to add this inside the component's [[iftags]] block, so that users of your component are not forced into also using Croqstyle.
Related components
Other personal styling components (which change just a couple things):
Personal styling themes (which are visual overhauls):
CSS changes
Reasonably-sized footnotes
Stops footnotes from being a million miles wide, so that you can actually read them.
.hovertip { max-width: 400px; }
Monospace edit/code
Makes the edit textbox monospace, and also changes all monospace text to Fira Code, the obviously superior monospace font.
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');
:root { --mono-font: "Fira Code", Cousine, monospace; }
#edit-page-textarea, .code pre, .code p, .code, tt, .page-source { font-family: var(--mono-font); }
.code pre * { white-space: pre; }
.code *, .pre * { font-feature-settings: unset; }
Teletype backgrounds
Adds a light grey background to <tt> elements ({{text}}), so code snippets stand out more.
tt {
background-color: var(--swatch-something-bhl-idk-will-fix-later, #f4f4f4);
font-size: 85%;
padding: 0.2em 0.4em;
margin: 0;
border-radius: 6px;
}
No more bigfaces
Stops big pictures from appearing when you hover over someone's avatar image, because they're stupid and really annoying and you can just click on them if you want to see the big version.
.avatar-hover { display: none !important; }
Breaky breaky
Any text inside a div with class nobreak has line-wrapping happen between every letter.
.nobreak { word-break: break-all; }
Code colours
Add my terminal's code colours as variables. Maybe I'll change this to a more common terminal theme like Monokai or something at some point, but for now it's just my personal theme, which is derived from Tomorrow Night Eighties.
Also, adding the .terminal class to a fake code block as [[div class="code terminal"]] gives it a sort of pseudo-terminal look with a dark background. Doesn't work with [[code]], because Wikidot inserts a bunch of syntax highlighting that you can't change yourself without a bunch of CSS. Use it for non-[[code]] code snippets only.
Quick tool to colourise a 'standard' Wikidot component usage example with the above vars: link
:root {
--c-bg: #393939;
--c-syntax: #e0e0e0;
--c-comment: #999999;
--c-error: #f2777a;
--c-value: #f99157;
--c-symbol: #ffcc66;
--c-string: #99cc99;
--c-operator: #66cccc;
--c-builtin: #70a7df;
--c-keyword: #cc99cc;
}
.terminal, .terminal > .code {
color: var(--c-syntax);
background: var(--c-bg);
border: 0.4rem solid var(--c-comment);
border-radius: 1rem;
}
Debug mode
Draw lines around anything inside .debug-mode. The colour of the lines is red but defers to CSS variable --debug-colour.
You can also add div.debug-info.over and div.debug-info.under inside an element to annotate the debug boxes — though you'll need to make sure to leave enough vertical space that the annotation doesn't overlap the thing above or below it.
.debug-mode, .debug-mode *, .debug-mode *::before, .debug-mode *::after {
outline: 1px solid var(--debug-colour, red);
position: relative;
}
.debug-info {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-family: 'Fira Code', monospace;
font-size: 1rem;
white-space: nowrap;
}
.debug-info.over { top: -2.5rem; }
.debug-info.under { bottom: -2.5rem; }
.debug-info p { margin: 0; }
Esta página é algumas coisas:
- A fonte do Tema Inkblot.
- Um guia para escrever para o Estúdio Waldon.
- Uma demonstração de como o tema se aprece em um contexto de formato textual longo.
O Tema Inkblot é feito para críticas dos restaurantes Ambrose, escritas pelo Estúdio Waldon, que é um sub-GdI dos restaurantes Ambrose, eu acho. Mas você pode usá-lo para qualquer coisa.
As instruções de uso estão abaixo do preâmbulo.
[[include :scp-pt-br:theme:inkblot]]
[[module CSS]]
:root {
--inkblot-accent: transparent;
--header-title: "ESTÚDIO WALDON";
--header-subtitle: "connaisseurs do desconhecido";
}
[[/module]]
[[div class="inkblot-header"]]
[[div class="inkblot-title"]]
[[div class="title-1"]]
Título
[[/div]]
[[div class="title-2"]]
Título
[[/div]]
[[div class="title-3"]]
Título
[[/div]]
[[div class="title-4"]]
Título
[[/div]]
[[/div]]
[[div class="inkblot-info"]]
Uma crítica para alguma coisa de nerd.
Escrita por algum nerd.
Leitura de XX minutos.
⭐⭐⭐⭐★
[[div class="inkblot-image"]]
[[image pancakes.png]]
[[/div]]
[[/div]]
[[/div]]
Se você estiver usando o tema junto com o componente da Barra Lateral Desativável do Sigma-9:
Inclua este tema depois do componente da Barra Lateral Desativável.
Adicione esse código CSS à página:
[[module CSS]]
/* compatibilidade com Toggle Sidebar */
#side-bar { top: 0; }
.inkblot-header { width: 100%; left: 0; }
[[/module]]
Preâmbulo
Dentro do universo, o Estúdio Waldon substitui o 'Guia Michelin online, desenvolvido pela Dark Web' no meu headcanon porque não gosto muito da ideia de ser processado pelo verdadeiro Guia Michelin por violação de propriedade intelectual.
O formato Ambrose, atualmente, está prestando um desserviço a si mesmo. Muitos artigos dos Restaurantes Ambrose consistem em um conjunto de itens de menu não relacionados seguidos por um conjunto de críticas sem relação. Isso é uma abordagem de espingarda — isso é chato, não há um fio narrativo a seguir, não há nada para chamar sua atenção. Ele incentiva seus leitores a ficarem desinteressados. Listas repelem a atenção. Mesmo se você fizer uma lista bem e exceder essas restrições, por que se limitar para começo de conversa?
Isso é uma pena, porque o formato dos Restaurantes Ambrose promete tanto. As críticas, se entrelaçadas, podem contar uma história interconectada. O menu é uma ideia fantástica — nenhum outro formato de GdI incentiva esse tipo de criatividade! Era isso que o formato Ambrose era para ser originalmente. Mas é difícil pensar em todos os pequenos detalhes que tornam esse formato mágico e muito mais fácil criar algo que parece correto, mas não é.
O Estúdio Waldon é uma visão diferente do formato dos Restaurantes Ambrose. O Estúdio Waldon pega uma coisa e segue com ela — uma crítica complexa e profunda de uma única coisa e de todos os seus aspectos. Um tópico para se concentrar. Sem distrações. Isso significa que em um formato Ambrose escrito pelo Estúdio Waldon, você verá apenas uma crítica. Há menos partes móveis para atrapalhar a escrita de uma boa história, enquanto ainda permanece aberto para o mesmo nível de criatividade visual.
O Estúdio Waldon não possui uma página central porque acabei de inventá-lo, então acho que isso vai ter que servir. O Estúdio Waldon é uma pequena equipe de críticos — talvez dez pessoas, no máximo — tentando abrir caminho na indústria de avaliações (tentando e falhando, mas eles nunca irão admitir). Sua organização é relaxa e sem hierarquia forte. Eles se concentram em críticas de alta qualidade de coisas de alta qualidade. Eles apreciam profundamente os pequenos detalhes, muitas vezes à custa dos maiores — tal como não perceber que o restaurante em que eles acabaram de entrar é na verdade uma armadilha anômala mortal. Para esse efeito, um tema de uma crítica do Estúdio Waldon pode ser o conflito entre algo óbvio para o leitor e o próprio crítico dentro do universo sendo totalmente alheio a esse algo.
Mas ei, isso é apenas um tema. Você pode fazer o que quiser.
Uso
Há alguns passos para usar este tema:
- Adicionar o tema.
- Configurar o tema.
- Fazer o cabeçalho especial.
Adicionando o tema
Para adicionar este tema a uma página, cole o seguinte código nela, preferencialmente próximo ao topo da página juntamente com qualquer outro CSS.
[[include :scp-pt-br:theme:inkblot]]
[[module CSS]]
:root {
--inkblot-accent: transparent;
--header-title: "ESTÚDIO WALDON";
--header-subtitle: "connaisseurs do desconhecido";
}
[[/module]]
(Você pode fazer uma div com um formato parecido com a da acima adicionando a classe inksplot a ela.)
Configurando o tema
Para configurar o tema, altere os valores das três variáveis CSS.
O —inkblot-accent determina a cor das bolhas pequenas e outras coisas da página. Se você não incluir esta variável ou não alterá-la do código acima, a cor padrão é 'transparent', o que significa que essas bolhas e coisas estão invisíveis.
Eu tenho um pedido: por favor não use a mesma cor de accent usada por outro artigo Inkblot. Este tema usa a cor 'coral', então essa já está ocupada. Escolha uma cor nova. Não vai ter muitas páginas usando este tema, então não essa deve ser uma escolha difícil.
(Você pode ver quais página usam este tema indo para o fundo da página, abrindo 'Opções', e então clicando 'Voltar Links'.)
Tente escolher uma cor sobre a qual você consiga ver texto preto. Se você tiver que escolher uma cor escura, se certifique de ajusta a cor da fonte dos botões de avaliação para que eles fiquem visíveis, e você mesmo pode descobrir como fazer o cabeçalho Inkblot funcionar com ela.
As outras duas variáveis alteram o texto no cabeçalho.
Fazendo o cabeçalho Inkblot
O Tema Inkblot oculta o título padrão da página, então você precisará criar o seu próprio. Você pode colocar o texto que quiser nele, mas eu imploro, por favor, use o mesmo texto que o título da página real. Por favor.
Você viu um cabeçalho normal do Inkblot no topo da página, então aqui está outro, exceto que agora ele está rotulado e cada elemento HTML apresenta um contorno desenhado ao redor de si.
Você pode ver, com sorte, que a parte do cabeçalho que é o título é composta por quatro subseções, cada uma contendo uma ou duas palavras. Eu acho que essa é uma maneira bem legal e visualmente interessante de dividir o título.
A seção de informações deve conter algumas informações sobre a crítica. Minha sugestão — do que é esta crítica? Quem a escreveu? Quanto tempo vai demorar para ler? E quão boa é a coisa que está sendo avaliada?
A imagem pode ser qualquer coisa. Provavelmente é bem normal fazer dela uma foto da pessoa que está fazendo a crítica. Talvez este tema tenha sido feito por panquecas. Eu evitaria fazer dela uma imagem da coisa que está sendo revisada — guarde isso para o artigo propriamente dito.
Esse cabeçalho terá as três seções em uma linha no desktop, mas, no celular, o título terá uma linha só para si, e a seção de informações e a imagem estarão na próxima linha.
Você pode ver como fazer o cabeçalho acima, incluindo as quatro subseções do título, abaixo. Observe que você pode remover uma das seções do título e, em vez disso, haverá apenas um espaço no lugar — foi o que fiz para o título desta página.
[[div class="inkblot-header"]]
[[div class="inkblot-title"]]
[[div class="title-1"]]
Coloque
[[/div]]
[[div class="title-2"]]
**Qualquer**
[[/div]]
[[div class="title-3"]]
Texto
[[/div]]
[[div class="title-4"]]
//que quiser//.
[[/div]]
[[/div]]
[[div class="inkblot-info"]]
Esta é a sinopse da crítica.
Escrito por algum otário.
Leitura de 5 minutos.
⭐★★★★
[[div class="inkblot-image"]]
[[image pancakes.png]]
[[/div]]
[[/div]]
[[/div]]
Observe que usar esse layout de cabeçalho e título apresenta alguns problemas.
- Você precisa ter cuidado com o tamanho do seu título, ou cuidado ao dividi-lo nas quatro partes. Se ele for muito longo, uma das seções do título pode atravessar para a próxima linha, tornando a leitura confusa. Eu recomendo ter um título curto que possa ser facilmente dividido em quatro segmentos aproximadamente iguais.
- Se o título foi muito longo ou houver muito tento na seção de informações, eles poderão transbordar ou se sobrepor também. Tente não botar muita coisa.
Você não precisa usar o título estranho em grade, ou a seção de informações, ou ter uma imagem. Você pode adicioná-los e removê-los como quiser. Você nem precisa usar a classe .inkblot-header — tudo o que ela faz é mover o cabeçalho até a metade do lado esquerdo da página no desktop.
Aqui está um exemplo sem o título em grade, sem as informações, sem a imagem e sem .inkblot-header:
[[div class="inkblot-title"]]
//Apenas// um **título** normal.
[[/div]]
Mas como faço um cardápio. Ambrose?
Aqui está o problema. Este tema pode ter sido feito para críticas dos Restaurantes Ambrose, mas ele não vem com um cardápio Ambrose.
Por que isso?
Acredito firmemente que metade da diversão de escrever um formato Ambrose é fazer seu próprio cardápio. Adoro ver novos designs para cardápios em cada formato Ambrose. Portanto, o ônus é seu — quero ver você usar este tema com seu próprio design de cardápio. Não importa se for terrível! Tudo o que ele precisa ser é algo que você se divirta fazendo.
Se eu colocar um design de cardápio neste tema, não minta para mim e me diga que você não o usaria. Você iria. Eu iria. E, como designer deste tema, posso fazer o que quero.
Se você realmente precisar, você pode copiar um cardápio de outro formato e ajustar um pouco as cores. Mas você sabe que se você fizer isso, eu vou derrubá-lo com toda a força de um único voto negativo e uma crítica leve. Por favor, não faça isso.
Adicionar o cardápio de um restaurante Ambrose com estilo especial qualifica seu artigo como um Formato de GdI para os Restaurantes Ambrose.
Código fonte
Ok, isso é tudo que tenho a dizer. Aqui está o código fonte.
/* Importar fontes */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Prata&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;600&display=swap');
/* Configurar o tamanho da fonte de volta ao normal */
#page-content { font-size: 1rem; }
body { font-family: 'Libre Baskerville', serif; }
/* Esconder o título da página. Eu farei o meu próprio título do caralho */
#page-title { display: none; }
/* - == === SINTAXE CUSTOMIZADA === == - */
/* O cabeçalho do inkblot contém o título e a caixa de informações */
.inkblot-header {
display: flex;
justify-content: flex-end;
align-items: center;
flex-wrap: wrap;
position: relative;
margin: 1rem 0 3rem;
width: 100%;
left: 0;
max-width: none !important; /* sobrepor a div da #page-content */
}
@media (min-width: 768px) {
/* No desktop, o cabeçalho se expande por cima da barra lateral */
.inkblot-header {
width: calc(100% + 18 * 0.82rem);
left: calc(-18 * 0.82rem);
}
}
/* O título do inkblot tem uma grade */
.inkblot-title {
flex: 1 1 0;
font-size: min(4rem, 10vw);
font-family: 'Prata', serif;
display: inline-grid;
grid-template-areas:
"one two"
"three four";
grid-gap: 0.1em;
max-width: 100%;
position: relative;
margin: 1rem;
}
.inkblot-title::before {
content: "";
border-radius: 74% 26% 27% 77% / 74% 38% 73% 38%;
background-color: var(--inkblot-accent, transparent);
position: absolute;
height: 40%; width: 100%; top: 50%; left: 50%;
transform: translate(-50%, -50%) skewY(-6deg);
max-width: min(50vw, 80%);
}
.inkblot-title > * { z-index: 1; white-space: nowrap; }
.inkblot-title .title-1 { grid-area: one; place-self: start end; }
.inkblot-title .title-2 { grid-area: two; place-self: start start; }
.inkblot-title .title-3 { grid-area: three; place-self: start end; }
.inkblot-title .title-4 { grid-area: four; place-self: start start; }
.inkblot-title p { margin: 0; line-height: 1em; text-align: center; }
/* Texto em itálico vai um pouco para direita, então precisa empurrar ele um pouco */
.inkblot-title > em, .inkblot-title .title-1 em, .inkblot-title .title-3 em {
position: relative;
left: -0.1em;
}
@media (max-width: 767px) {
.inkblot-title {
flex-basis: 100%;
}
}
/* A caixa de informações em si é um flex container */
.inkblot-info {
flex: 1 1 0;
text-align: center;
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
}
.inkblot-info > p {
min-width: 12.5rem;
}
/* No desktop, se o cabeçalho invadir duas colunas, ele irá invadir a barra lateral.
* A max-width do treco de informações é reduzido para que ele não seja maior que a #page-content.
* justify-content:flex-end no .inkblot-header empurra ele para a direita.
* !important para sobrepor a max-width padrão da wikidot para tudo
*/
@media (min-width: 768px) {
.inkblot-info {
max-width: calc(100% - 18 * 0.82rem) !important;
}
}
/* A imagem só deve ser estilizada dentro da seção de informações.
* Ela pode ser facilmente modificada para permitir uma imagem sofisticada
* fora da seção de informações, mas não quero fazer isso, porque essa
* organização é necessária para line-wrapping apropriado no celular, e
* a imagem formatada erradamente age como um bom indicador de que algo
* tá errado
*/
.inkblot-info .inkblot-image { flex: 0 1 10rem; min-width: 10rem; }
.inkblot-info .inkblot-image img {
border-radius: 65% 35% 43% 57% / 41% 35% 65% 59%;
box-shadow: 0.5rem 0 var(--inkblot-accent, transparent);
/* The height is 8rem, but I want it slightly bigger */
height: 10rem; width: 10rem;
margin: -1rem 0;
}
/* A classe inksplot deixa qualquer coisa com bolhas */
.inksplot {
border-width: 0.5rem;
border-style: solid;
border-color: var(--inkblot-accent); /* if no accent, will not override */
padding: 2rem 4rem;
margin: 1rem -3rem;
border-radius: 38% 95% 94% 42% / 62% 56% 84% 75%;
}
/* No celular, o inkblot é retangular e chato para pourpar espaço */
@media (max-width: 960px) and (min-width: 767px), (max-width: 650px) {
.inksplot {
padding: 1rem;
border-radius: 5rem / 3rem;
margin: 1rem -1rem;
}
}
/* - == === BOLHAS DISTRIBUÍDAS === == - */
/* Eu quero algumas bolhas coloridas na página.
* Por sorte, a Wikidot me dá algumas divs extras com as quais brincar:
* 6 em #container-wrap-wrap e 3 em #container.
* Elas são #extra(c?)-div-[1-6]. Isso é um bocado de seletores. */
#container-wrap-wrap, #container { position: relative; overflow: hidden; }
/* Baseado no CSS de Murray Smith (CC BY-SA 3.0)
* https://stackoverflow.com/a/14451916/4958427 */
[id^=extra][id*=-div-] {
position: absolute;
z-index: -1;
pointer-events: none;
--content-width: min(1040px, 100vw);
--content-margin: calc(50vw - var(--content-width) / 2);
--blob-width: 30rem;
--blob-radius: calc(var(--blob-width) * 0.67);
background-color: var(--inkblot-accent, transparent);
top: var(--top-offset);
transform: rotate(var(--rotation))
translate(calc(var(--sin-rotation) * 0.866 * var(--blob-radius) / 2),
calc(-1 * var(--cos-rotation) * 0.866 * var(--blob-radius) / 2))
skewX(-30deg)
scale(1, 0.866);
}
[id^=extra][id*=-div-]:before,
[id^=extra][id*=-div-]:after {
content: '';
position: absolute;
background-color: inherit;
}
[id^=extra][id*=-div-],
[id^=extra][id*=-div-]:before,
[id^=extra][id*=-div-]:after {
width: var(--blob-width); height: var(--blob-width);
border-top-right-radius: 95%;
}
[id^=extra][id*=-div-]:before {
transform: rotate(-135deg) skewX(-45deg) scale(1.414, 0.707) translate(0,-50%);
}
[id^=extra][id*=-div-]:after {
transform: rotate(135deg) skewY(-45deg) scale(0.707, 1.414) translate(50%);
}
/* Muita matemática foi colocada nisso.
* Para centralizar um triângulo no que o contém, ele precisa da seguinte tradução:
* onde A é o ãngulo de rotação:
* x:
* sin(N)
* * 0.866 (compensação de escala)
* * raio
* / 2
* y:
* -1
* * cos(N)
* * 0.866 (compensação de escala)
* * raio
* / 2
* Triângulos possuem uma ordem de simetria em torno de 120 graus,
* então qualquer ângulo acima disso é inútil.
*/
#extra-div-1,
#extra-div-3,
#extra-div-5,
#extrac-div-1,
#extrac-div-3 {
right: calc(var(--blob-radius) * -2 + var(--content-margin));
}
#extra-div-2,
#extra-div-4,
#extra-div-6,
#extrac-div-2 {
left: calc(var(--blob-radius) * -2 + var(--content-margin));
}
#extra-div-1 {
--blob-width: 30rem;
--top-offset: 500px;
--rotation: 53.33deg; --sin-rotation: 0.802; --cos-rotation: 0.597;
}
#extra-div-2 {
--blob-width: 30rem;
--top-offset: 1300px;
--rotation: 40deg; --sin-rotation: 0.642; --cos-rotation: 0.766;
}
#extra-div-3 {
--blob-width: 20rem;
--top-offset: 2100px;
--rotation: 66.66deg; --sin-rotation: 0.918; --cos-rotation: 0.396;
}
#extra-div-4 {
--blob-width: 15rem;
--top-offset: 2900px;
--rotation: 13.33deg; --sin-rotation: 0.231; --cos-rotation: 0.973;
}
#extra-div-5 {
--blob-width: 40rem;
--top-offset: 3700px;
--rotation: 26.66deg; --sin-rotation: 0.448; --cos-rotation: 0.893;
}
#extra-div-6 {
--blob-width: 25rem;
--top-offset: 4500px;
--rotation: 106.66deg; --sin-rotation: 0.958; --cos-rotation: -0.286;
}
#extrac-div-1 {
--blob-width: 15rem;
--top-offset: 5300px;
--rotation: 93.33deg; --sin-rotation: 0.998; --cos-rotation: -0.058;
}
#extrac-div-2 {
--blob-width: 10rem;
--top-offset: 6100px;
--rotation: 120deg; --sin-rotation: 0.855; --cos-rotation: -0.500;
}
#extrac-div-3 {
--blob-width: 7rem;
--top-offset: 6900px;
--rotation: 80deg; --sin-rotation: 0.984; --cos-rotation: 0.173;
}
/* - == === CABEÇALHO === == - */
/* Substitui o plano de fundo do cabeçalho */
/* 324px [e duas vezes a altura do cabeçalho padrão */
div#container-wrap { background: url(https://scp-wiki.wdfiles.com/local--files/theme%3Ainkblot/review-header.svg) top left/100% 648px no-repeat; }
#header { background: radial-gradient(circle at left 75px top 90px, var(--inkblot-accent, transparent) 42px, transparent 42.5px); }
/* Substitui o texto do cabeçalho */
/* Centraliza o texto no meio do cabeçalho */
#header h1, #header h2 { margin-left: 0; float: none; text-align: center; }
/* Move o subtítulo um tiquinho para baixo */
#header h2 { margin-top: 0.3rem; }
/* Esconde o texto existente */
#header h1 span, #header h2 span { font-size: 0; }
/* Estiliza o novo texto */
#header h1 a::before, #header h2::before {
color: #333;
font-family: 'Montserrat', sans-serif;
text-shadow: none;
}
/* Configura o novo conteúdo do texto de uma variável */
#header h1 a::before {
content: var(--header-title, "ESTÚDIO WALDON");
font-weight: 300;
}
#header h2::before {
content: var(--header-subtitle, "connoisseurs of the unknown");
font-weight: 600;
}
/* Esconde a caixa de busca e enfia o botão perto do login */
#search-top-box { top: 10px; transform: translateY(-7%); }
#search-top-box-form > input[type=text] { display: none; }
#search-top-box-form > input[type=submit] {
background:
url('https://scp-wiki.wdfiles.com/local--files/theme%3Ainkblot/search-solid.svg') 50%/0.8rem no-repeat,
var(--inkblot-accent, transparent)
!important /* não reverter ao passar o mouse em cima */;
border: none;
border-radius: 50%;
font-size: 0;
height: 1.5rem; width: 1.5rem;
}
#login-status { right: calc(10px + 2rem); color: #333a; }
#login-status a { color: #b01a; }
/* - == === BARRA SUPERIOR === == - */
#top-bar { display: flex; justify-content: center; right: 0; }
#top-bar a { color: #333d; }
/* - == === BARRA LATERAL === == - */
/* Move a barra lateral para baixo, tirando ela do caminho do cabeçalho do inkblot */
@media (min-width: 768px) {
#side-bar { top: 12rem; }
}
/* Faz a barra lateral ficar bonita */
/* Mantem as cores dos blocos da barra lateral - eu gosto delas */
#side-bar .side-block,
#interwiki .side-block {
border: none;
border-radius: 0.5rem;
box-shadow: none;
}
#side-bar .heading,
#interwiki .heading {
margin: 0.6rem 0 0.5rem;
padding: 0;
color: #000a;
height: 1rem;
display: flex;
justify-content: space-around;
align-items: center;
border: none;
}
#side-bar .heading::before,
#side-bar .heading::after,
#interwiki .heading::before,
#interwiki .heading::after {
content: "";
height: 1px;
box-sizing: border-box;
border-bottom: 1px dotted #333;
margin: 0.1rem 0.5rem 0;
flex: 1 1 0;
}
#side-bar .menu-item > img,
#interwiki .menu-item > img {
visibility: hidden;
}
#top-bar .open-menu a {
border-radius: 1px;
border: none;
border-left: 0.25rem solid var(--inkblot-accent, #333);
border-right: 1px dotted #333;
}
@media (max-width: 767px) {
#side-bar {
background-image:
radial-gradient(
circle at left 10% top 90%,
var(--inkblot-accent, white) 25%,
transparent 25%
),
linear-gradient(-75deg, #ccc 30%, white 30%);
border-right: 4px dotted #444 !important;
background-clip: padding-box;
}
}
/* - == === MÓDULO DE AVALIAÇÃO === == - */
.page-rate-widget-box { box-shadow: none; }
.page-rate-widget-box {
display: inline-flex;
justify-content: flex-end;
align-items: center;
border-radius: 0;
border-width: 1px 0;
border-style: dotted;
border-color: #333;
padding: 0.1rem;
margin-right: 3rem;
}
div.page-rate-widget-box .rate-points,
.page-rate-widget-box .cancel {
background-color: transparent;
border-radius: 0;
border: none;
color: #333;
}
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown,
.page-rate-widget-box .cancel {
background-color: var(--inkblot-accent, transparent);
border-radius: 50%;
border: none;
color: #333;
height: 1.5rem; width: 1.5rem;
position: relative;
margin-left: 0.25rem;
}
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a,
.page-rate-widget-box .cancel a {
position: absolute;
display: block;
top: 0; left: 0; height: 100%; width: 100%;
text-align: center; line-height: 1.5rem;
color: #333;
padding: 0;
margin: 0;
font-weight: bold;
}
.page-rate-widget-box .cancel a { color: transparent; }
.page-rate-widget-box .cancel a::after {
content: "✖";
position: absolute;
color: #333;
top: 0; left: 0; height: 100%; width: 100%;
}
.page-rate-widget-box .rateup a:hover { background-color: limegreen; }
.page-rate-widget-box .ratedown a:hover { background-color: tomato; }
.page-rate-widget-box .cancel a:hover {
color: transparent;
background-color: transparent;
border-radius: 0;
}
/* Compatibilidade com o módulo de informações */
/* Mais específico porque provavelmente vai ser importado antes do módulo de informações */
#page-content .rate-box-with-credit-button {
background: none;
border-radius: 0;
box-shadow: none;
border-width: 1px 0;
border-style: dotted;
border-color: #333;
display: flex;
align-items: center;
}
.rate-box-with-credit-button .page-rate-widget-box {
border: none;
}
.creditButton {
height: 1rem;
width: 1rem;
background-color: var(--inkblot-accent, transparent);
border-radius: 50%;
}
#page-content .creditButton p a {
color: #333;
border: none;
line-height: 1rem;
margin-left: 0;
}
/* - == === BLOCOS DE IMAGEM === == - */
.scp-image-block {
border: none;
border-top: 1px dotted #333;
box-shadow: none;
}
.scp-image-block .scp-image-caption {
background: none;
border-top: solid 0.25rem var(--inkblot-accent, transparent);
padding-top: 0.5rem;
font-weight: normal;
}
.scp-image-block img {
padding: 0.5rem;
box-sizing: border-box;
}
@media (min-width: 768px) {
.scp-image-block.block-left {
margin-left: -100px;
}
}
@media (min-width: 1250px) {
.scp-image-block.block-right {
margin-right: -100px;
}
}
@media (max-width: 600px) {
.scp-image-block.block-left, .scp-image-block.block-right {
float: none; clear: both; margin-left: auto; margin-right: auto;
}
}
/* Compatibilidade com as imagens de Woedenaz
* http://scp-wiki.wikidot.com/component:image-features-source
* Imagens que não sejam a de passar o mouse por cima para
* ampliar podem precisar de mais conserto
*/
.image-hover-enlarge img {
box-shadow: none !important;
}
/* - == === OUTRAS COISAS === == - */
li, p { line-height: 1.5em; }
#page-content h1, #page-content h2, #page-content h3,
#page-content h4, #page-content h5, #page-content h6 {
font-family: 'Libre Baskerville', serif;
color: #333;
margin: 1em 0 0.5em 0;
letter-spacing: 0;
}
#page-content h1 {
font-family: 'Prata', serif; font-size: 3rem; text-align: center;
}
#page-content h2 { font-size: 2rem; font-weight: bold; }
hr {
margin: 3rem;
height: 1rem;
background: radial-gradient(circle at center, var(--inkblot-accent, transparent) 0.375rem, transparent calc(0.375rem + 0.5px));
display: flex;
justify-content: space-around;
align-items: center;
}
hr::before, hr::after {
content: "";
height: 1px;
box-sizing: border-box;
border-bottom: 1px dotted #333;
width: calc(50% - 3rem);
}
.page-tags span {
border-top: 1px dotted #333;
}
.footnotes-footer {
margin-top: 2rem;
}
#page-content {
margin-bottom: 2rem;
}
#footer {
background: transparent;
}
#footer a {
color: black;
}
#breadcrumbs, .pseudocrumbs {
display: flex;
flex-direction: row-reverse;
font-size: 0;
margin-top: -1rem;
}
#breadcrumbs a, .pseudocrumbs a {
font-size: 0.82rem;
margin-left: 0.3rem;
}
#breadcrumbs a::before, .pseudocrumbs a::before {
content: "«";
margin-right: 0.3rem;
}
.licensebox {
font-size: 0.82rem;
font-family: verdana, arial, helvetica, sans-serif;
margin: 1rem 0 -1.5rem;
}
span, a {
word-break: normal;
}
blockquote, div.blockquote {
border: none;
border-left: thick solid var(--inkblot-accent, #eee);
background: none;
}
