runtimeterror/static/css/custom.css

256 lines
4.2 KiB
CSS
Raw Normal View History

/* color overrides */
:root {
--code: var(--base06);
}
2023-08-16 21:53:17 +00:00
/* override page max-width */
.page {
max-width: 72rem;
}
/* logo tweaks */
.page__logo {
color: var(--off-fg);
}
.page__logo-inner {
opacity: 0.80;
}
2023-11-06 21:23:24 +00:00
/* Footer tweaks */
.copyright {
font-size: 14px;
line-height: 1.3rem;
}
.powered_by {
font-size: 12px;
line-height: 1.1rem;
color: var(--muted);
}
.powered_by a:link, .powered_by a:visited {
color: var(--off-fg);
text-decoration: none;
}
.powered_by a:hover {
color: var(--hover);
text-decoration: underline;
}
2023-08-16 01:27:46 +00:00
/* Notice CSS Built on hugo-notice by Nicolas Martignoni: https://github.com/martignoni/hugo-notice */
.notice {
--root-color: #444;
--root-background: #eff;
--title-color: #fff;
--title-background: #7bd;
--warning-title: #c33;
--warning-content: #fee;
--info-title: #fb7;
--info-content: #fec;
--note-title: #6be;
--note-content: #e7f2fa;
--tip-title: #5a5;
--tip-content: #efe;
}
@media (prefers-color-scheme: dark) {
.notice {
--root-color: #ddd;
--root-background: #eff;
--title-color: #fff;
--title-background: #7bd;
--warning-title: #800;
--warning-content: #400;
--info-title: #a50;
--info-content: #420;
--note-title: #069;
--note-content: #023;
--tip-title: #363;
--tip-content: #121;
}
}
body.dark .notice {
--root-color: #ddd;
--root-background: #eff;
--title-color: #fff;
--title-background: #7bd;
--warning-title: #800;
--warning-content: #400;
--info-title: #a50;
--info-content: #420;
--note-title: #069;
--note-content: #023;
--tip-title: #363;
--tip-content: #121;
}
.notice {
padding: 18px;
line-height: 24px;
margin-bottom: 24px;
border-radius: 4px;
color: var(--root-color);
background: var(--root-background);
}
.notice p:last-child {
margin-bottom: 0;
}
.notice-title {
margin: -18px -18px 12px;
padding: 4px 18px;
border-radius: 4px 4px 0 0;
font-weight: 700;
color: var(--title-color);
background: var(--title-background);
}
.notice.warning .notice-title {
background: var(--warning-title);
}
.notice.warning {
background: var(--warning-content);
}
.notice.info .notice-title {
background: var(--info-title);
}
.notice.info {
background: var(--info-content);
}
.notice.note .notice-title {
background: var(--note-title);
}
.notice.note {
background: var(--note-content);
}
.notice.tip .notice-title {
background: var(--tip-title);
}
.notice.tip {
background: var(--tip-content);
}
.icon-notice {
display: inline-flex;
align-self: center;
margin-right: 8px;
}
.icon-notice img,
.icon-notice svg {
height: 1em;
width: 1em;
fill: currentColor;
}
.icon-notice img,
.icon-notice.baseline svg {
top: 0.125em;
position: relative;
}
2023-11-13 16:05:14 +00:00
/* pagination overrides */
ul.pagination li::marker {
content:'';
}
ul.pagination li {
margin: 0 0.25rem;
}
2023-11-13 16:05:14 +00:00
.pagination {
display:flex;
justify-content: center;
}
/* statuslol overrides */
2023-12-23 23:00:24 +00:00
.statuslol {
background: var(--inner-bg) !important;
2023-12-29 14:49:53 +00:00
flex-direction:column
}
.statuslol_emoji_container {
font-size: 1.5em !important;
2023-12-23 23:00:24 +00:00
}
.statuslol_content p,
.statuslol_content li,
.statuslol_content em,
.statuslol_content strong {
2023-12-29 14:49:53 +00:00
overflow-wrap: inherit;
2023-12-23 23:00:24 +00:00
font-size: 0.8em;
line-height:normal;
2023-12-29 14:49:53 +00:00
margin: 0.8em auto;
2023-12-23 23:00:24 +00:00
color: var(--fg);
}
.statuslol_time a:link,
.statuslol_time a:visited {
color: var(--link) !important;
}
.statuslol_time a:hover,
.statuslol_time a:active {
2023-12-23 23:00:24 +00:00
color: var(--hover) !important;
}
small[style^="opacity: .5"] {
opacity: 1 !important;
}
/* code overrides */
pre,
code,
kbd,
samp {
color: var(--code);
2024-01-15 23:07:23 +00:00
}
/* search box styling */
form {
display: flex;
flex-direction: row;
border-radius: 0.25rem;
2024-01-16 00:12:56 +00:00
outline: 0.25rem solid var(--bg);
2024-01-16 17:24:35 +00:00
width: 240px;
transition: width .2s ease-in-out, outline .2s ease-in-out;
2024-01-15 23:07:23 +00:00
}
input {
flex-grow: 2;
border: none;
background-color: var(--off-bg);
color: var(--off-fg);
2024-01-16 00:12:56 +00:00
height: 1.5rem;
border-radius: 0.25rem;
padding-left: 0.5rem;
font-family: var(--font-monospace);
2024-01-15 23:07:23 +00:00
}
input:focus {
outline: none;
}
form:focus-within {
outline: 1px solid var(--logo);
2024-01-16 17:24:35 +00:00
width: 100%;
2024-01-15 23:07:23 +00:00
}
form button {
outline: none;
border: none;
background-color: var(--off-bg);
2024-01-16 00:12:56 +00:00
color: var(--link);
2024-01-16 17:24:35 +00:00
}