208 lines
5.9 KiB
CSS
208 lines
5.9 KiB
CSS
/**
|
|
* @id photo
|
|
* @name Photo
|
|
* @description A different theme that looks great with a high-res photo behind it.
|
|
* @author Starbeamrainbowlabs
|
|
* @author_link https://starbeamrainbowlabs.com/
|
|
* @minversion v0.20
|
|
*/
|
|
|
|
/*
|
|
To use this theme, copy the following into your custom css;
|
|
|
|
:root {
|
|
--image-url: url("https://imgur.com/NSIDIeo.jpg");
|
|
--bg-colour: hsl(20, 66%, 44%);
|
|
}
|
|
|
|
....changing URL to point to an image (can be absolute or relative), and the background colour to a colour that will be displayed behind the image. It works best if the image has relatively plain bottom edge, as then it blends with the background colour better.
|
|
*/
|
|
|
|
:root {
|
|
/* --bg-colour: hsl(20, 66%, 44%); */
|
|
/* --image-url: url("https://i.imgur.com/NSIDIeo.jpg"); */
|
|
|
|
--image-url: url("https://imgur.com/6KfDsYS.png");
|
|
--bg-colour: #34243D;
|
|
|
|
--bg-a: hsla(0, 0%, 95%, 0.5);
|
|
--bg-b: hsla(0, 0%, 95%, 0.8);
|
|
|
|
--text-a: hsl(0, 0%, 10%);
|
|
--text-b: hsl(0, 0%, 25%);
|
|
|
|
--shadow-a: hsla(0, 0%, 25%, 0.3);
|
|
|
|
--panel-padding: 0.7em;
|
|
|
|
--addition: #09b400;
|
|
--deletion: #cf1c11;
|
|
--nochange: #847bc7;
|
|
|
|
counter-reset: search-results;
|
|
}
|
|
|
|
html, body { font-size: 100%; }
|
|
body {
|
|
margin: 0;
|
|
display: grid;
|
|
grid-template-columns: 1fr 4fr 1fr;
|
|
grid-template-rows: repeat(6, auto);
|
|
grid-template-areas: "side-left header side-right"
|
|
"side-left nav-top side-right"
|
|
"side-left content side-right"
|
|
"side-left comments side-right"
|
|
"side-left footer side-right"
|
|
"side-left nav-bottom side-right";
|
|
|
|
background: var(--image-url) no-repeat top center / contain,
|
|
var(--bg-colour);
|
|
|
|
color: var(--text-a);
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
body > nav, main, .comments, footer {
|
|
margin: 1em 0;
|
|
background: var(--bg-a);
|
|
padding: var(--panel-padding);
|
|
box-shadow: 0.5em 0.5em 0.5em var(--shadow-a);
|
|
}
|
|
nav.top { grid-area: nav-top; }
|
|
nav.bottom { grid-area: nav-bottom; }
|
|
|
|
body > nav {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
.nav-more { position: relative; }
|
|
.nav-more label { font-weight: bolder; cursor: pointer; }
|
|
.nav-more input[type=checkbox] { display: none; }
|
|
.nav-more-menu {
|
|
z-index: 10000;
|
|
position: absolute; top: 2.6rem; right: 100000px;
|
|
text-align: left;
|
|
background: var(--bg-b);
|
|
}
|
|
input[type=checkbox]:checked ~ .nav-more-menu { top: 2.15em; right: -2.7em; }
|
|
|
|
nav.mega-menu > span { flex: 1; line-height: 2; display: inline-block; margin: 0; padding: 0.3rem 0.5rem; }
|
|
nav.mega-menu { display: flex; flex-direction: row; padding-bottom: 0.4em; }
|
|
nav.mega-menu .category { min-width: 7.5em; padding: 0.3em 1em; }
|
|
nav.mega-menu strong { display: block; }
|
|
nav.mega-menu span { display: block; }
|
|
|
|
h1 {
|
|
grid-area: header;
|
|
text-align: center;
|
|
}
|
|
.logo { max-width: 1.75em; vertical-align: middle; }
|
|
|
|
main { grid-area: content; position: relative; }
|
|
.jump-to-comments { position: absolute; top: var(--panel-padding); right: var(--panel-padding); }
|
|
|
|
main > h1:first-child, .comments > h2:first-child { margin-top: 0; }
|
|
|
|
table { border-collapse: collapse; }
|
|
tr:nth-child(2n) { background: var(--bg-a); }
|
|
th, td { padding: 0.25em 0.45em; }
|
|
|
|
pre, code, input, textarea { font-size: 1rem; }
|
|
|
|
|
|
main label { font-weight: bold; display: inline-block; min-width: 12em; }
|
|
textarea { min-height: 10em; }
|
|
textarea, #tags, #search-box {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
|
|
}
|
|
.fit-text-mirror { position: absolute; left: -1000000px; }
|
|
|
|
textarea, input:not([type=submit]):not([type=button]) {
|
|
font-family: "Ubuntu", sans-serif;
|
|
/* font-weight: light; */
|
|
font-size: 1.1em;
|
|
|
|
background: var(--bg-b);
|
|
margin: 0.5em 0;
|
|
padding: 0.5em;
|
|
|
|
border: 0;
|
|
box-shadow: inset 0 0 0.5em var(--shadow-a);
|
|
}
|
|
|
|
input[type=submit] {
|
|
width: 100%; box-sizing: border-box;
|
|
margin: 0.25em 0;
|
|
padding: 0.1em 0.25em;
|
|
font-weight: bold;
|
|
font-size: 1.25em;
|
|
}
|
|
|
|
.matching-tags-display {
|
|
--parent-margin: 0.7em;
|
|
width: calc(100% + (var(--parent-margin) * 2)); box-sizing: border-box;
|
|
background: var(--bg-b);
|
|
margin-left: calc(0em - var(--parent-margin));
|
|
padding: 1em;
|
|
}
|
|
|
|
.page-list { list-style-type: none; margin: 0.3rem; padding: 0.3rem; }
|
|
.page-list li:not(.header) { margin: 0.3rem; padding: 0.3rem; }
|
|
.page-list li .size { margin-left: 0.7rem; color: var(--text-b); }
|
|
.page-list li .editor { display: inline-block; margin: 0 0.5rem; }
|
|
.page-list li .tags { margin: 0 1rem; }
|
|
.tag-list { list-style-type: none; margin: 0.5rem; padding: 0.5rem; }
|
|
.tag-list li { display: inline-block; margin: 1rem; }
|
|
.mini-tag { background: var(--bg-b); padding: 0.2rem 0.4rem; text-decoration: none; }
|
|
|
|
.larger { color: var(--addition); }
|
|
.smaller, .deletion { color: var(--deletion); }
|
|
.nochange { color: var(--nochange); font-style: italic; }
|
|
.significant { font-weight: bolder; font-size: 1.1rem; }
|
|
.deletion, .deletion > .editor { text-decoration: line-through; }
|
|
|
|
.highlighted-diff { white-space: pre-wrap; }
|
|
.diff-added { background-color: rgba(31, 171, 36, 0.6); color: var(--addition); }
|
|
.diff-removed { background-color: rgba(255, 96, 96, 0.6); color: var(--deletion); }
|
|
|
|
.newpage::before { content: "N"; margin: 0 0.3em 0 -1em; font-weight: bolder; text-decoration: underline dotted; }
|
|
.move::before { content: "\\1f69a"; font-size: 1.25em; margin: 0 0.1em 0 -1.1em; }
|
|
.upload::before { content: "\\1f845"; margin: 0 0.1em 0 -1.1em; }
|
|
.new-comment::before { content: "\\1f4ac"; margin: 0 0.1em 0 -1.1em; }
|
|
.reversion::before { content: "\\231b"; margin: 0 0.1em 0 -1.1em; }
|
|
|
|
.search-result {
|
|
position: relative;
|
|
counter-increment: search-results;
|
|
margin-left: 1.25em;
|
|
}
|
|
.search-result::before {
|
|
position: absolute;
|
|
top: 0.2em; left: -1.25em;
|
|
content: counter(search-results);
|
|
font-size: 1.25em; color: var(--text-b);
|
|
}
|
|
|
|
.stacked-bar { display: flex; }
|
|
|
|
|
|
.comments { grid-area: comments; }
|
|
|
|
.avatar { vertical-align: middle; max-height: 1.5em; }
|
|
figure > .avatar, .avatar ~ figcaption { display: inline-block; }
|
|
|
|
|
|
footer { grid-area: footer; }
|
|
|
|
|
|
@media (max-width: 640px) {
|
|
body { grid-template-columns: 1fr 16fr 1fr; }
|
|
nav { flex-direction: column !important; }
|
|
nav > span { padding: 0.5em; }
|
|
}
|