58 lines
1.6 KiB
Plaintext
58 lines
1.6 KiB
Plaintext
.panel-shell() {
|
|
position: relative;
|
|
background:
|
|
linear-gradient(180deg, fade(@bone, 4%), transparent 24%),
|
|
linear-gradient(135deg, fade(@ember, 8%), transparent 40%),
|
|
linear-gradient(180deg, fade(@bg-char, 52%), fade(@bg-void, 34%)),
|
|
url("@{page-bg-url}") center center / cover no-repeat,
|
|
linear-gradient(180deg, @bg-panel 0%, color-mix(in srgb, @bg-panel 88%, black) 100%);
|
|
border: @border-main;
|
|
border-radius: @radius-md;
|
|
box-shadow: @shadow-heavy, @shadow-inset;
|
|
}
|
|
|
|
.ornate-frame() {
|
|
position: relative;
|
|
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 6px;
|
|
pointer-events: none;
|
|
border: 1px solid fade(@gold-acid, 16%);
|
|
border-radius: calc(@radius-md - 4px);
|
|
}
|
|
}
|
|
|
|
.caps-heading() {
|
|
font-family: @font-display;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
.body-copy() {
|
|
font-family: @font-body;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.metal-button() {
|
|
.caps-heading();
|
|
border: 1px solid fade(@gold-acid, 44%);
|
|
border-radius: 999px;
|
|
background:
|
|
linear-gradient(180deg, fade(@ember-bright, 20%), fade(@blood, 10%)),
|
|
linear-gradient(135deg, fade(@bone, 10%), transparent 40%),
|
|
@bg-input;
|
|
color: @parchment;
|
|
box-shadow: inset 0 1px 0 fade(white, 8%), 0 6px 14px fade(black, 20%);
|
|
transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, color 120ms ease;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
border-color: fade(@ember-bright, 70%);
|
|
color: lighten(@parchment, 8%);
|
|
transform: translateY(-1px);
|
|
box-shadow: inset 0 1px 0 fade(white, 14%), 0 8px 18px fade(@blood, 26%);
|
|
}
|
|
}
|