gallery/style/shiny/base.css

167 lines
2.7 KiB
CSS

@import url(/fonts/muller/muller.css);
:root {
--gradient:
linear-gradient(135deg,
hsl(42deg, 67%, 70%),
hsl(348deg, 67%, 70%),
hsl(334deg, 77%, 80%),
hsl(234deg, 77%, 76%),
hsl(195deg, 67%, 67%),
hsl(155deg, 57%, 62%)
);
--text-col: white;
--nsfw-sticker-rotate: 15deg;
font-family: Muller;
font-size: 18pt;
font-weight: 600;
background: var(--gradient) fixed;
margin: 1em;
}
header {
text-align: center;
}
h1, h2 { font-weight: 100; }
h1 { font-size: 300%; }
h2 { font-size: 125%; }
body {
--shadow: hsl(42deg, 82%, 90%, 75%);
--border-col: var(--text-col);
background: hsla(0, 0%, 0%, 60%);
border: 3px solid var(--border-col);
box-shadow: 0 0 3em var(--shadow);
position: relative;
padding: 2em 4em;
margin: 2em auto 3.5em;
border-radius: 1.5em;
color: var(--text-col);
--text-shadow: 2px 2px 3px hsl(0, 0%, 0%, 75%);
text-shadow: var(--text-shadow);
}
header h1 {
margin: 0; padding: 0;
}
a {
color: inherit;
}
footer {
font-weight: 500;
font-size: 80%;
}
.corner {
display: block;
margin: 0;
padding: 0;
position: absolute;
top: 0.5em;
font-size: 100%;
font-weight: 500;
}
.corner.left { left: 2em; }
.corner.right { right: 2em; }
.emoji {
text-align: baseline;
height: 1em;
}
.buttonbar.choice input {
display: none;
}
.buttonbar {
padding: 0;
display: flex;
align-items: flex-start;
flex-flow: row wrap;
margin-bottom: -0.5em;
}
.buttonbar.choice {
justify-content: center;
}
.buttonbar li {
list-style: none;
margin-bottom: 0.5em;
}
.buttonbar.choice label,
.buttonbar:not(.choice) li {
--button-bg: hsl(330deg, 40%, 16%, 100%);
margin-right: 0.5em;
padding: 0 0.35em;
border-radius: 0.25em;
border: 1px solid var(--text-col);
background: var(--button-bg);
text-shadow: none;
}
.buttonbar.choice :checked + label {
color: var(--button-bg);
background: var(--text-col);
}
.buttonbar a {
text-decoration: none;
}
@media (prefers-color-scheme: dark) {
:root {
--gradient:
linear-gradient(135deg,
hsl(42deg, 27%, 25%),
hsl(348deg, 27%, 25%),
hsl(334deg, 32%, 25%),
hsl(234deg, 57%, 23%),
hsl(195deg, 27%, 20%),
hsl(155deg, 22%, 20%)
);
--text-col: hsl(55deg, 60%, 90%);
}
@media (prefers-contrast: high) {
:root {
--text-col: white;
background: black;
}
body {
border: unset;
box-shadow: unset;
background: unset;
}
}
body {
--shadow: hsl(42deg, 82%, 90%, 20%);
--border-col: black;
}
}
@media (pointer: coarse) {
.buttonbar {
font-size: 200%;
border-width: 2px;
}
}