mirror of
https://github.com/sbrl/Minetest-WorldEditAdditions.git
synced 2024-09-12 08:08:30 +02:00
It's an absolutely *glorious* series of hacks :D Including, but certainly not limited to: - CSS Grids with only 1 cell - Flexboxes used for positioning text nodes - Element heights set indirectly with the width property - z-index abused to show the current image in the sequence it's undefined which image will be shown initially, but given the amount of effort this took I'm ok with that If anyone knows how to shift the <picture> element 0.25em upwards *without* moving the image so that I can remove the upper and lower borders, I'd lvoe to know. I've tried everything - including settingit's height to zero etc. In the end I've padded out the top to balance it out instead :P
272 lines
5.4 KiB
CSS
272 lines
5.4 KiB
CSS
/* Base CSS */
|
|
|
|
/*
|
|
* This CSS file contains (for me) logical style defaults that are easy to read.
|
|
*
|
|
* This file is quite often used as a starting point for other projects.
|
|
*
|
|
* Todo:
|
|
* <button>
|
|
* <inputs>
|
|
* <progress>
|
|
* <meter>
|
|
*/
|
|
|
|
:root {
|
|
--bg-main: #8ABEF6;
|
|
--bg-bright: #38871e;
|
|
--bg-alt: #3F57B4;
|
|
--bg-transcluscent-slight: rgba(255, 255, 255, 0.1);
|
|
--bg-transcluscent: rgba(255, 255, 255, 0.8);
|
|
|
|
--text-main: #3F57B4;
|
|
--text-bright: #efefef;
|
|
--text-alt: #38871e;
|
|
|
|
--shadow: hsla(0, 0%, 25%, 0.25);
|
|
|
|
--highlight: hsl(353, 100%, 36%);
|
|
}
|
|
|
|
/* @media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--bg-main: #232323;
|
|
--bg-bright: black;
|
|
--bg-transcluscent: rgba(50, 50, 50, 0.5);
|
|
|
|
--text-main: #f3f3f3;
|
|
}
|
|
} */
|
|
|
|
/* rem is relative to the html element, and em is relative to the current element. */
|
|
html { font-size: 100%; }
|
|
|
|
body
|
|
{
|
|
margin: 0;
|
|
font-family: sans-serif; /* Serif is awful :( */
|
|
|
|
background: var(--bg-main); /* Don't forget to update the @page one too for paged media */
|
|
color: var(--text-main);
|
|
}
|
|
|
|
title { string-set: page-title content(text); }
|
|
|
|
/* Special tweaks for paged media (e.g. PDFs) */
|
|
@page {
|
|
font-family: sans-serif;
|
|
background: var(--bg-main); /* Set the background colour to cover the whole page */
|
|
|
|
@top-right {
|
|
content: "By Starbeamrainbowlabs";
|
|
opacity: 0.6;
|
|
}
|
|
@bottom-right {
|
|
content: "Page " counter(page) " of " counter(pages);
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
|
|
nav {
|
|
background: var(--bg-bright);
|
|
display: flex;
|
|
align-items: baseline;
|
|
font-size: 1.1em;
|
|
margin: 0;
|
|
}
|
|
nav h1 {
|
|
background: var(--bg-alt);
|
|
margin: 0;
|
|
padding: 0.5em;
|
|
font-size: 1.2em;
|
|
color: var(--text-bright);
|
|
}
|
|
nav ul {
|
|
flex: 1;
|
|
list-style-type: none;
|
|
margin: 0; padding: 0;
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
}
|
|
nav ul li {
|
|
background: var(--bg-transcluscent-slight);
|
|
}
|
|
nav a {
|
|
display: inline-block;
|
|
padding: 1.2em 3em;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
color: var(--text-bright);
|
|
}
|
|
|
|
|
|
/* A small tweak to things more responsive */
|
|
iframe, object, embed, img, table
|
|
{
|
|
max-width: 100%;
|
|
}
|
|
picture img { height: initial; }
|
|
|
|
/* Turn the user's cursor into a hand when over things they can click */
|
|
button, summary
|
|
{
|
|
cursor: pointer;
|
|
}
|
|
|
|
th, td
|
|
{
|
|
margin: 4px 6px;
|
|
padding: 4px 6px;
|
|
}
|
|
|
|
a { font-weight: bold; }
|
|
/* a:not(.nav) { color: hsl(208, 67%, 40%); }
|
|
a:not(.nav):hover { color: hsl(214, 67%, 50%); }
|
|
a:not(.nav):active, a:focus { color: hsl(214, 87%, 60%); } */
|
|
a:not(.nav):not(.bigbutton):visited { color: hsl(240, 77%, 60%); }
|
|
|
|
pre { page-break-inside: avoid; break-inside: avoid; }
|
|
pre, code {
|
|
white-space: pre-wrap;
|
|
-moz-tab-size: 4;
|
|
tab-size: 4;
|
|
}
|
|
|
|
|
|
/* todo add the rest of the textbox like inputs here */
|
|
input[type=text], input[type=number], textarea
|
|
{
|
|
margin: 3px 5px;
|
|
padding: 5px 8px;
|
|
|
|
background: var(--bg-bright);
|
|
border: 0;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
footer {
|
|
margin: 3em 0 0 0;
|
|
padding: 1em;
|
|
text-align: center;
|
|
background: var(--bg-bright);
|
|
color: var(--text-bright);
|
|
}
|
|
|
|
|
|
/* Utility / layout aids */
|
|
.float.left { float: left; }
|
|
.float.right { float: right; }
|
|
|
|
.flex { display: flex; }
|
|
.flex-1 { flex: 1; }
|
|
.flex-2 { flex: 2; }
|
|
.flex-3 { flex: 3; }
|
|
.flex-4 { flex: 4; }
|
|
.flex-5 { flex: 5; }
|
|
.flex-6 { flex: 6; }
|
|
|
|
.small-spacing { margin: 0.25em 0.35em; padding: 0.25em 0.35em; }
|
|
.med-spacing { margin: 0.45em 0.65em; padding: 0.45em 0.65em; }
|
|
.high-spacing { margin: 1em 1.25em; padding: 1em 1.25em; }
|
|
|
|
.text-left { text-align: left; }
|
|
.text-centre { text-align: center; }
|
|
.text-right { text-align: right; }
|
|
|
|
.small-text { font-size: 0.8rem; }
|
|
.medium-text { font-size: 1rem; }
|
|
.large-text { font-size: 1.3rem; }
|
|
|
|
.bold-text { font-weight: bolder; }
|
|
|
|
.block { display: block; }
|
|
.inline { display: inline; }
|
|
.inline.block { display: inline-block; }
|
|
|
|
.invisilink { text-decoration: none; color: inherit; }
|
|
.invisilist { list-style-type: none; margin: 5px; padding: 5px; }
|
|
|
|
.icon { vertical-align: middle; }
|
|
.icon.tiny { max-width: 1em; max-height: 1em; }
|
|
.icon.small { max-width: 1.25em; max-height: 1.25em; }
|
|
.icon.medium { max-width: 2em; max-height: 2em; }
|
|
.icon.large { max-width: 5em; max-height: 5em; }
|
|
|
|
.img-text-middle{ vertical-align: middle; }
|
|
|
|
|
|
.bigbox {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center; justify-content: center;
|
|
background: content-box linear-gradient(var(--bg-transcluscent), var(--bg-transcluscent)),
|
|
var(--bg) center / cover;
|
|
height: 80vh;
|
|
padding: 0 5em 0 5em;
|
|
box-sizing: border-box;
|
|
}
|
|
.bigbox h1 {
|
|
margin-top: 0;
|
|
font-size: 3em;
|
|
color: var(--text-alt);
|
|
}
|
|
|
|
.features-large {
|
|
margin: 3em 0;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: space-evenly;
|
|
}
|
|
.features-large figure {
|
|
background: var(--bg-transcluscent);
|
|
margin: 0.1em;
|
|
padding: 1em;
|
|
max-width: 15em;
|
|
}
|
|
/* .features-large figure img {
|
|
max-width: 12em;
|
|
} */
|
|
|
|
.cssbox-gallery {
|
|
display: flex;
|
|
}
|
|
|
|
.bigbutton {
|
|
display: inline-block;
|
|
|
|
margin: 0;
|
|
padding: 0.35em 0.45em;
|
|
border: 0;
|
|
border-radius: 0.25em;
|
|
|
|
background: var(--bg-alt);
|
|
|
|
color: var(--text-bright);
|
|
font-size: 1.25em;
|
|
text-decoration: none;
|
|
text-align: center;
|
|
|
|
box-shadow: 0 0 0.5em var(--shadow);
|
|
|
|
cursor: pointer;
|
|
transition: box-shadow 0.25s, transform 0.25s;
|
|
}
|
|
.bigbutton:hover {
|
|
box-shadow: 0 0.25em 0.65em var(--shadow);
|
|
transform: translateY(-0.25em);
|
|
}
|
|
.bigbutton:active {
|
|
box-shadow: 0 0 0.25em var(--shadow);
|
|
transform: translateY(0.1em);
|
|
}
|
|
.bigbutton.disabled {
|
|
filter: saturate(25%);
|
|
opacity: 0.75;
|
|
cursor: default;
|
|
}
|
|
|
|
.gallerybox {
|
|
background: var(--bg-transcluscent);
|
|
}
|