You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
504 lines
9.4 KiB
CSS
504 lines
9.4 KiB
CSS
/* Based on MVP.css v1.15 - https://github.com/andybrewer/mvp */
|
|
/* Altered to BEM, with other changes, and my own flex-box grid system */
|
|
|
|
*{
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html{scroll-behavior: smooth}
|
|
@media (prefers-reduced-motion: reduce){
|
|
html{scroll-behavior: auto}
|
|
}
|
|
|
|
/* Footer fixed to bottom */
|
|
html,body{height: 100%}
|
|
body{display: flex;flex-direction: column;}
|
|
main, .main{ flex: 1 0 auto }
|
|
|
|
|
|
/* Layout */
|
|
body {
|
|
background: var(--color-bg);
|
|
color: var(--color-text);
|
|
font-family: var(--font-family);
|
|
line-height: var(--line-height);
|
|
margin: 0;
|
|
overflow-x: hidden;
|
|
padding: 0;
|
|
}
|
|
|
|
|
|
/* Alerts */
|
|
.alert{
|
|
background: var(--color-secondary-accent);
|
|
border-left: 4px solid var(--color-secondary);
|
|
border-right: 4px solid var(--color-secondary);
|
|
padding: .1rem .8rem;
|
|
margin-bottom:.5rem;
|
|
}
|
|
.alert--error{
|
|
background: #f05870;
|
|
border-color: #e90d30;
|
|
}
|
|
.alert--warning{
|
|
background: #e8e85b;
|
|
border-color: #ddde11;
|
|
}
|
|
.alert--success{
|
|
background: #60c572;
|
|
border-color: #18ab34;
|
|
}
|
|
/* /Alerts */
|
|
hr{
|
|
background-color: var(--color-bg-secondary);
|
|
border: none;
|
|
height: 1px;
|
|
width: 100%;
|
|
max-width: var(--width-content);
|
|
margin: .5rem auto;
|
|
}
|
|
|
|
section img,
|
|
article img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
section pre {
|
|
overflow: auto;
|
|
}
|
|
|
|
/* Cards is a row */
|
|
/* Best to do this with grid, but there's less browser support... */
|
|
.card{
|
|
/* As not using grid atm, no solution to keep cards the same size when flex-wrapped */
|
|
border: 1px solid var(--color-bg-secondary);
|
|
border-radius: var(--border-radius);
|
|
box-shadow: var(--box-shadow) var(--color-shadow);
|
|
padding: 1.25rem;
|
|
/* flex: 0 0 var(--width-card); */
|
|
background: #FFF;
|
|
|
|
display: block !important; /* Unset row/col default */
|
|
}
|
|
.card:hover {
|
|
box-shadow: var(--box-shadow) var(--color-bg-secondary);
|
|
}
|
|
.row--cards{
|
|
align-items: stretch; /* For cards to be "same height", requires the height 100% on card */
|
|
}
|
|
.row--cards .card{
|
|
height: 100%; /* To make multiple cards next to each other 'same' height */
|
|
}
|
|
|
|
|
|
/* Nav */
|
|
.nav a{
|
|
text-decoration: none;
|
|
}
|
|
.nav a{
|
|
color: #CCC;
|
|
}
|
|
|
|
|
|
/* Lists */
|
|
ol li,
|
|
ul li {
|
|
padding: 0.2rem 0;
|
|
}
|
|
|
|
.no-bullet-point{
|
|
list-style: none;
|
|
}
|
|
/* Inline lists */
|
|
.inline-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin-left: -0.5rem; /* To offset the start of li margin. Little jank */
|
|
}
|
|
|
|
.inline-list li {
|
|
display: inline-block;
|
|
margin: 0 0.5rem;
|
|
position: relative;
|
|
text-align: left;
|
|
}
|
|
.inline-list>li{ /* Only affects first level li */
|
|
padding: 0; /* So that dropdowns, and nav areas aren't messed up by 'random' padding that on standard list items */
|
|
}
|
|
|
|
|
|
/* DROPDOWN(S), CHANGE CLASS to dropdown, ALSO ADD MEGAMENU STYLING */
|
|
/* Nav/inline-list Dropdown */
|
|
.inline-list li:hover ul {
|
|
display: block;
|
|
}
|
|
|
|
/* ?? maybe change */
|
|
.inline-list li ul {
|
|
background: var(--color-bg);
|
|
border: 1px solid var(--color-bg-secondary);
|
|
border-top: 10px solid transparent;
|
|
border-radius: var(--border-radius);
|
|
display: none;
|
|
height: auto;
|
|
padding: .5rem 1rem;
|
|
position: absolute;
|
|
top: 2rem; /* THIS IS UNIQUE FOR EACH USE-CASE, WILL NEED ALTERING PER */
|
|
white-space: nowrap;
|
|
width: auto;
|
|
z-index: 1;
|
|
|
|
/* Centre */
|
|
/* left: 50%;
|
|
transform: translate(-50%, 0); */
|
|
/* Left */
|
|
left: 0;
|
|
/* Right */
|
|
/* transform: translate(-50%, 0); */
|
|
}
|
|
|
|
.inline-list li ul::before {
|
|
/* fill gap above to make mousing over them easier */
|
|
/* background-color: green; */
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: -0.5rem;
|
|
height: 0.5rem;
|
|
}
|
|
|
|
.inline-list li ul li,
|
|
.inline-list li ul li a {
|
|
display: block;
|
|
}
|
|
|
|
|
|
/* Typography */
|
|
p {
|
|
padding: 0;
|
|
width: 100%;
|
|
}
|
|
p+p, h1+p{ /* Para after para should space out */
|
|
margin-top: .75rem;
|
|
}
|
|
|
|
mark, .highlight{ /* Useful for search result highlighting, and general hightlights that aren't strong */
|
|
padding: 0.1rem;
|
|
background: #ff8c00;
|
|
}
|
|
|
|
small {
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
code,samp {
|
|
font-family: monospace;
|
|
background-color: var(--color-accent);
|
|
border-radius: var(--border-radius);
|
|
color: var(--color-text);
|
|
display: inline-block;
|
|
margin: 0 0.1rem;
|
|
padding: 0 0.5rem;
|
|
}
|
|
pre {
|
|
margin: .5rem 0;
|
|
padding: 0.5rem 2rem;
|
|
display: block;
|
|
font-size: .9rem;
|
|
line-height: 1.3rem;
|
|
|
|
background-color: var(--color-accent);
|
|
border-radius: var(--border-radius);
|
|
color: var(--color-text);
|
|
overflow-x: auto;
|
|
|
|
white-space: pre-wrap;
|
|
border: 1px solid #c1cfda;
|
|
}
|
|
|
|
|
|
details {
|
|
margin: .7rem 0;
|
|
}
|
|
details summary {
|
|
margin-bottom: .8rem;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
/* Links */
|
|
a{
|
|
color: var(--color-link);
|
|
display: inline-block;
|
|
font-weight: bold;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
a:hover {
|
|
filter: brightness(var(--hover-brightness));
|
|
}
|
|
|
|
a:active {
|
|
filter: brightness(var(--active-brightness));
|
|
}
|
|
|
|
/* Buttons/Inputs */
|
|
.button,
|
|
button,
|
|
input[type="submit"]
|
|
{
|
|
background: #FEFEFE;
|
|
border: 2px solid var(--color-link);
|
|
border-radius: var(--border-radius);
|
|
display: inline-block;
|
|
font-size: .9rem;
|
|
font-weight: bold;
|
|
line-height: var(--line-height);
|
|
margin-top: 0.5rem;
|
|
padding: .6rem 1.2rem;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.button + .button,
|
|
button + button{
|
|
margin-left: 6px;
|
|
}
|
|
|
|
.button--small,
|
|
button.button--small,
|
|
input[type="submit"].button--small{
|
|
padding: .2rem 1.6rem;
|
|
}
|
|
|
|
.button,
|
|
button,
|
|
input[type="submit"]
|
|
{
|
|
font-family: var(--font-family);
|
|
}
|
|
|
|
.button:hover,
|
|
button:hover,
|
|
input[type="submit"]:hover
|
|
{
|
|
cursor: pointer;
|
|
filter: brightness(var(--hover-brightness));
|
|
}
|
|
|
|
.button:active,
|
|
button:active,
|
|
input[type="submit"]:active
|
|
{
|
|
filter: brightness(var(--active-brightness));
|
|
}
|
|
|
|
.button--blue,
|
|
button.button--blue,
|
|
input[type="submit"].button--blue
|
|
{
|
|
background-color: var(--color-link);
|
|
color: var(--color-bg);
|
|
}
|
|
|
|
|
|
/* Images */
|
|
figure {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
figure img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
figure figcaption {
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
|
|
/* Forms */
|
|
button:disabled,
|
|
input:disabled {
|
|
background: var(--color-bg-secondary);
|
|
border-color: var(--color-bg-secondary);
|
|
color: var(--color-text-secondary);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
button[disabled]:hover,
|
|
input[type="submit"][disabled]:hover {
|
|
filter: none;
|
|
}
|
|
|
|
form {
|
|
border: 1px solid var(--color-bg-secondary);
|
|
border-radius: var(--border-radius);
|
|
box-shadow: var(--box-shadow) var(--color-shadow);
|
|
display: block;
|
|
max-width: var(--width-card-wide);
|
|
min-width: var(--width-card);
|
|
padding: 1.5rem;
|
|
text-align: var(--justify-normal);
|
|
margin: 0 auto;
|
|
}
|
|
|
|
form header {
|
|
margin: 1.5rem 0;
|
|
padding: 1.5rem 0;
|
|
}
|
|
|
|
input,
|
|
label,
|
|
select,
|
|
textarea {
|
|
display: block;
|
|
font-size: inherit;
|
|
max-width: var(--width-card-wide);
|
|
}
|
|
|
|
input[type="checkbox"],
|
|
input[type="radio"] {
|
|
display: inline-block;
|
|
}
|
|
|
|
input[type="checkbox"]+label,
|
|
input[type="radio"]+label {
|
|
display: inline-block;
|
|
font-weight: normal;
|
|
position: relative;
|
|
top: 1px;
|
|
}
|
|
|
|
input[type="range"] {
|
|
padding: 0.4rem 0;
|
|
}
|
|
|
|
input,
|
|
select,
|
|
textarea {
|
|
border: 1px solid var(--color-bg-secondary);
|
|
border-radius: var(--border-radius);
|
|
margin-bottom: 1rem;
|
|
padding: 0.4rem 0.8rem;
|
|
}
|
|
|
|
input[type="text"],
|
|
input[type="password"]
|
|
textarea {
|
|
width: calc(100% - 1.6rem);
|
|
}
|
|
|
|
input[readonly],
|
|
textarea[readonly] {
|
|
background-color: var(--color-bg-secondary);
|
|
}
|
|
|
|
label {
|
|
font-weight: bold;
|
|
margin-bottom: 0.2rem;
|
|
}
|
|
|
|
/* Popups */
|
|
.modal{
|
|
border: 1px solid var(--color-bg-secondary);
|
|
border-radius: var(--border-radius);
|
|
box-shadow: var(--box-shadow) var(--color-shadow);
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 50%;
|
|
z-index: 999;
|
|
}
|
|
|
|
/* Tables */
|
|
.table-container{
|
|
overflow-x: auto;
|
|
}
|
|
table {
|
|
border: 1px solid var(--color-bg-secondary);
|
|
border-radius: var(--border-radius);
|
|
border-spacing: 0;
|
|
max-width: 100%;
|
|
white-space: nowrap;
|
|
|
|
text-align: left;
|
|
border-collapse: collapse;
|
|
overflow-wrap: normal;
|
|
}
|
|
|
|
table td,
|
|
table th,
|
|
table tr {
|
|
padding: 0.4rem 0.8rem;
|
|
text-align: var(--justify-important);
|
|
}
|
|
|
|
table thead tr {
|
|
background-color: var(--color-table);
|
|
/* border-radius: var(--border-radius); */
|
|
color: var(--color-bg);
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
table thead tr {
|
|
border-top-left-radius: var(--border-radius);
|
|
}
|
|
|
|
tbody tr:nth-child(even) {
|
|
background-color: var(--color-accent);
|
|
}
|
|
tbody tr:nth-child(odd) {
|
|
background-color: #FFF;
|
|
}
|
|
|
|
/* Quotes */
|
|
blockquote {
|
|
display: block;
|
|
font-size: x-large;
|
|
line-height: var(--line-height);
|
|
margin: 1rem auto;
|
|
max-width: var(--width-card-medium);
|
|
padding: 1.5rem 1rem;
|
|
text-align: var(--justify-important);
|
|
}
|
|
|
|
blockquote footer{
|
|
color: var(--color-text-secondary);
|
|
display: block;
|
|
font-size: small;
|
|
line-height: var(--line-height);
|
|
padding: 1.5rem 0;
|
|
}
|
|
|
|
/* Misc helpers */
|
|
.tar{ text-align: right; }
|
|
|
|
.no-padd{ padding: 0; }
|
|
|
|
/* Tags */
|
|
.tag{
|
|
background-color: var(--color-secondary);
|
|
border-radius: var(--border-radius);
|
|
color: var(--color-bg);
|
|
font-size: xx-small;
|
|
font-weight: bold;
|
|
padding: 0.2rem 1rem;
|
|
position: relative;
|
|
top:-2px;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.banner{
|
|
background: #eee;
|
|
}
|
|
|
|
|
|
.hide{
|
|
display: none;
|
|
}
|